/* PolicyHulk design system — light theme.
   Brand: white background, dark grey text, green #3BEB1E accent.
   Every CTA stays solid #3BEB1E with BLACK BOLD text.
   Headings: Inter. Body: Proxima Nova (licensed; falls back to Montserrat). */

:root {
  --black: #ffffff;             /* page background */
  --green: #3BEB1E;
  --green-dark: #2FBF17;
  --green-glow: rgba(59, 235, 30, 0.30);
  --white: #14181c;             /* strongest ink (headings) */

  /* Green on white fails contrast for small text and links; use a darkened
     brand green wherever green carries meaning as text rather than as a fill. */
  --green-ink: #1F7D10;

  --surface-1: #f7f9f7;
  --surface-2: #ffffff;
  --surface-3: #f2f4f2;
  --border: #e2e6e2;
  --border-strong: #c9cfc9;

  --text: #2e343a;              /* dark grey body text */
  --text-muted: #5a6169;
  --text-dim: #6f767e;

  --font-head: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'proxima-nova', 'Proxima Nova', 'Montserrat', -apple-system,
               BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Nav height. The desktop bar carries a stacked label + call button, so it
     needs more room than the mobile bar, which shows the button alone. */
  --nav-h: 96px;

  --wrap: 1180px;
  --radius: 14px;
  --radius-sm: 10px;

  --shadow-green: 0 0 0 1px rgba(59, 235, 30, 0.25), 0 10px 30px -10px var(--green-glow);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--black);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  color: var(--white);
}

h1 { font-size: clamp(2rem, 5.4vw, 3.75rem); }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.6rem); }
h4 { font-size: 1.1rem; }

p { margin: 0 0 1.1em; color: var(--text-muted); }
p.lead { font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--text); }

a { color: var(--green-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

.accent { color: var(--green-ink); }

/* Skip link — accessibility */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--green); color: #000; font-weight: 700;
  padding: 12px 18px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

/* ---------------- Buttons ---------------- */
/* HARD BRAND RULE: every CTA is solid #3BEB1E with BLACK BOLD text. No gradients. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--green);
  color: #000000;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  padding: 16px 30px;
  border: 0; border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: center;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
  box-shadow: 0 6px 24px -8px var(--green-glow);
}
.btn:hover { background: var(--green-dark); color: #000; text-decoration: none; transform: translateY(-1px); box-shadow: 0 10px 30px -8px var(--green-glow); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn-lg { font-size: 1.18rem; padding: 19px 38px; width: 100%; max-width: 420px; }
.btn-block { width: 100%; padding: 18px 24px; font-size: 1.18rem; }
.btn-ghost {
  background: transparent; color: var(--white);
  border: 1.5px solid var(--border-strong); box-shadow: none; font-weight: 700;
}
.btn-ghost:hover { background: var(--surface-2); color: var(--white); border-color: var(--green); }

/* ---------------- Header / nav ---------------- */
/* The navigation stays on the original dark theme — a deliberate dark island.
   Colours are hard-coded rather than tokenised so it never follows the page's
   light tokens. */

/* The trust line, moved out of the nav and centered above the page content. */
.trust-note {
  text-align: center;
  font-size: 13px;
  color: var(--text-dim);
  padding: 14px 0 2px;
  line-height: 1.5;
}
.trust-note strong { color: var(--green-ink); font-weight: 700; }
@media (max-width: 600px) { .trust-note { font-size: 11.5px; padding: 9px 0 0; } }

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(0, 0, 0, 0.94);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid #1f1f1f;
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; height: var(--nav-h);
}
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand:hover { text-decoration: none; }
.brand img { display: block; height: 38px; width: auto; }
@media (max-width: 400px) { .brand img { height: 32px; } }

.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-links > li { position: relative; }
.nav-links > li > a {
  display: flex; align-items: center; gap: 6px;
  color: #d4d4d4; font-weight: 600; font-size: 0.95rem;
  padding: 10px 14px; border-radius: 8px;
}
.nav-links > li > a:hover,
.nav-links > li[aria-current] > a { color: var(--green); background: #161616; text-decoration: none; }
.nav-links .caret { width: 9px; height: 9px; fill: currentColor; opacity: .6; }

/* dropdown */
.dropdown {
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 264px; background: #111111;
  border: 1px solid #262626; border-radius: var(--radius);
  padding: 8px; list-style: none; margin: 0;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  box-shadow: 0 20px 50px -15px rgba(0,0,0,.75);
}
.nav-links > li:hover > .dropdown,
.nav-links > li:focus-within > .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a {
  display: block; padding: 10px 12px; border-radius: 8px;
  color: #d4d4d4; font-size: 0.92rem; font-weight: 500;
}
.dropdown a:hover { background: #1c1c1c; color: var(--green); text-decoration: none; }

.nav-cta {
  flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.nav-cta-label {
  color: #ffffff;                       /* white, on the dark nav */
  font-family: var(--font-head); font-weight: 700;
  font-size: 12px; letter-spacing: -0.01em; line-height: 1; white-space: nowrap;
}
.nav-call { padding: 13px 22px; font-size: 1.02rem; letter-spacing: 0; gap: 8px; }
.nav-call .call-icon { width: 16px; height: 16px; fill: #000000; flex-shrink: 0; }

.nav-toggle {
  display: none; background: transparent; border: 1.5px solid #3a3a3a;
  border-radius: 8px; padding: 9px 10px; cursor: pointer;
}
.nav-toggle span { display: block; width: 20px; height: 2px; background: #ffffff; margin: 4px 0; transition: .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 980px) {
  :root { --nav-h: 68px; }
  .nav-toggle { display: block; }
  .nav-cta-label { display: none; }
  .nav-call { padding: 9px 13px; font-size: .92rem; gap: 6px; }
  .nav-call .call-icon { width: 14px; height: 14px; }
  .nav-links {
    display: none; position: absolute; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #0a0a0a; border-bottom: 1px solid #1f1f1f;
    padding: 10px 16px 20px; max-height: calc(100vh - var(--nav-h)); overflow-y: auto;
  }
  .nav-links.open { display: flex; }
  .nav-links > li > a { padding: 13px 8px; font-size: 1rem; }
  .dropdown {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; background: transparent;
    padding: 0 0 8px 12px; display: none;
  }
  .nav-links > li.open > .dropdown { display: block; }
  .nav-links .caret { margin-left: auto; transition: transform .2s; }
  .nav-links > li.open .caret { transform: rotate(180deg); }
}

/* ---------------- Breadcrumbs ---------------- */
.breadcrumbs {
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.breadcrumbs ol {
  list-style: none; margin: 0; padding: 11px 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.breadcrumbs li { display: flex; align-items: center; gap: 8px; color: var(--text-dim); }
.breadcrumbs a { color: var(--text-muted); font-weight: 500; }
.breadcrumbs a:hover { color: var(--green-ink); }
.breadcrumbs li[aria-current="page"] { color: var(--green-ink); font-weight: 600; }
.breadcrumbs .sep { color: var(--border-strong); }

/* ---------------- Hero ---------------- */
.hero {
  position: relative; overflow: hidden;
  padding: 40px 0 56px;
  background:
    radial-gradient(900px 460px at 50% -10%, rgba(59,235,30,0.14), transparent 65%),
    var(--black);
}
.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--border) 1px, transparent 1px),
                    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(700px 340px at 50% 0%, #000 20%, transparent 75%);
  opacity: .35;
}
.hero > * { position: relative; z-index: 1; }
/* Centered hero stack: headline on top, quote form centered beneath it, and
   the supporting copy under the form. Keeping the form high in the document is
   what lets the whole card sit above the fold — see .hero-form below. */
.hero-grid {
  display: grid; grid-template-columns: 1fr; gap: 30px;
  justify-items: center; text-align: center;
}
.hero-grid > * { width: 100%; max-width: 760px; }
.hero-grid > .hero-form { max-width: 620px; }
.hero-grid > .hero-copy-bottom { margin-top: 4px; }

/* Compact hero headline: every pixel here pushes the form toward the fold. */
.hero h1 { font-size: clamp(2rem, 3.2vw, 2.9rem); margin-bottom: .35em; }
.hero .eyebrow { margin-bottom: 16px; }

/* Form chrome reads left-aligned even inside the centered hero. The `.quiz`
   variant (the category picker and the multi-step quote form) centers instead;
   the contact card stays left-aligned. */
.quote-card { text-align: left; }
.quote-card.quiz { text-align: center; }
.quote-card.quiz .opt { justify-content: center; text-align: center; }
.quote-card.quiz .qnav { justify-content: center; }
/* Labels sit above their input, so they read left-aligned even though the rest
   of the quiz is centered. */
.quote-card.quiz .field label { text-align: left; }
/* Except the ZIP field, whose input is centered — its label centers with it. */
.quote-card.quiz .field-zip label { text-align: center; }
/* The header is sticky, so an anchor jump to #quote would land under it. */
#quote { scroll-margin-top: calc(var(--nav-h) + 14px); }
.hero-grid .prose { text-align: left; }
.hero .trust-row { justify-content: center; }
.hero .eyebrow { margin-left: auto; margin-right: auto; }

/* Homepage only: the category picker sits beside the copy on desktop.
   Below 960px it falls back to the shared centered stack. */
@media (min-width: 961px) {
  .hero-grid.split {
    grid-template-columns: 1.05fr 0.95fr;
    /* The form spans both rows and is taller than the copy. Without an fr row
       its leftover height inflates row 1 and pushes the lead copy away from
       the headline. */
    grid-template-rows: auto 1fr;
    gap: 12px 46px; align-items: start;
    justify-items: stretch; text-align: left;
  }
  .hero-grid.split > * { max-width: none; }
  .hero-grid.split .hero-copy-top    { grid-column: 1; grid-row: 1; }
  .hero-grid.split .hero-copy-bottom { grid-column: 1; grid-row: 2; }
  .hero-grid.split .hero-form        { grid-column: 2; grid-row: 1 / span 2; }
  .hero-grid.split .trust-row { justify-content: flex-start; }
  .hero-grid.split .eyebrow { margin-left: 0; margin-right: 0; }
  .hero-grid.split h1 { font-size: clamp(2rem, 3.4vw, 2.9rem); }
}

/* The form leads visually so the whole card clears the fold. On the split
   homepage the card already sits beside the copy, so only the stacked
   (centered) hero needs reordering — and below 961px the split collapses to
   the same stack, so the rule covers both. */
.hero-grid:not(.split) .hero-form { order: -1; }
.hero-grid:not(.split) .hero-copy-top { order: 0; }
.hero-grid:not(.split) .hero-copy-bottom { order: 1; }

@media (max-width: 960px) {
  .hero-grid.split .hero-form { order: -1; }
  .hero-grid.split .hero-copy-top { order: 0; }
  .hero-grid.split .hero-copy-bottom { order: 1; }
}

/* ==================== HOMEPAGE HERO — JAKKER ====================
   Jakker is the face of the brand, so he anchors the LEFT of the homepage hero
   and everything else shifts right: copy in the middle column, category picker
   on the right. He is painted as a background rather than an <img> so a phone
   downloads only the phone-sized cut-out, and never the desktop one.

   Every rule here carries the `.hero-jakker` prefix, which outranks the plain
   `.hero-grid.split` placements above and the viewport tiers at the bottom of
   this file — so this block can live with the rest of the hero rules without
   depending on document order. */
.hero-figure { display: none; }

/* Forced tile line break, phones and tablets only — see the `|` convention in
   build.js. Above 961px the name fits on one line and the break disappears. */
.br-mobile { display: none; }
@media (max-width: 960px) { .br-mobile { display: inline; } }

/* Every category tile is the same height whatever its name wraps to: `1fr` rows
   all take the height of the tallest one, and .opt is already a centred flex box
   so a one-line name sits in the middle of a two-line row (user-directed
   2026-08-12). Homepage picker only — the quiz steps on the vertical pages keep
   their own rhythm. */
.hero-jakker .opt-grid { grid-auto-rows: 1fr; }

@media (min-width: 961px) {
  .hero-jakker .hero-grid.split {
    /* Two columns, as before Jakker existed: copy left, picker right. He is a
       third row inside the copy column rather than a column of his own
       (user-directed 2026-08-12), so the copy keeps its full width. */
    grid-template-rows: auto 1fr auto;
  }
  .hero-jakker .hero-grid.split .hero-figure {
    display: block;
    grid-column: 1; grid-row: 2;
    /* The 1fr row is whatever the picker card leaves over once the headline and
       the trust bullets are placed, and `contain` scales him to fit it — so he
       grows on tall viewports and shrinks on short ones without ever making the
       copy column taller than the card beside it. */
    align-self: stretch;
    min-height: 200px;
    /* PNG first for browsers without image-set(); the webp is smaller for
       everything since ~2023. */
    background-image: url('/assets/jakker-v1.png');
    background-image: image-set(
      url('/assets/jakker-v1.webp') type('image/webp'),
      url('/assets/jakker-v1.png') type('image/png')
    );
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
  }
  .hero-jakker .hero-grid.split .hero-copy-top    { grid-column: 1; grid-row: 1; }
  .hero-jakker .hero-grid.split .hero-copy-bottom { grid-column: 1; grid-row: 3; }
  .hero-jakker .hero-grid.split .hero-form        { grid-column: 2; grid-row: 1 / span 3; }
  /* The whole left column is centered on one axis (user-directed 2026-08-12):
     eyebrow, headline, Jakker and the trust bullets all share the column's
     centre line. The `.hero-grid.split` rules above left-align each of these,
     so every one of them needs an explicit override here. */
  .hero-jakker .hero-grid.split .hero-copy-top,
  .hero-jakker .hero-grid.split .hero-copy-bottom { text-align: center; }
  /* `fit-content` keeps the h1 as wide as its longest line, so "Instant
     quotes." centres over "Save big. No pressure." rather than over the whole
     column; the auto margins then centre that block in the column. */
  .hero-jakker .hero-grid.split h1 {
    width: fit-content; margin-left: auto; margin-right: auto; text-align: center;
  }
  .hero-jakker .hero-grid.split .eyebrow { margin-left: auto; margin-right: auto; }
  .hero-jakker .hero-grid.split .trust-row { justify-content: center; }
}

/* ---------- Phones and tablets: Jakker beside the headline ----------
   Below 961px the split normally collapses to one centered column with the card
   first. Here the top row is Jakker on the left and the headline on the right,
   both centred against each other, and the picker card runs full width beneath
   them (user-directed 2026-08-12). Explicit grid placement is what overrides the
   `order` rules above; order only applies to auto-placed items. */
@media (max-width: 960px) {
  .hero-jakker .hero-grid.split {
    /* Jakker's column. The card no longer shares the row with him, so the width
       is set by how big he should read next to the headline, not by tile text. */
    grid-template-columns: minmax(0, 30%) minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 22px;
    justify-items: stretch;
    text-align: left;
  }
  /* The centered stack caps its children at 760px and centers them; in a 2-up
     grid that cap has to go or the columns will not fill their tracks. */
  .hero-jakker .hero-grid.split > * { max-width: none; width: auto; min-width: 0; }

  .hero-jakker .hero-figure {
    display: block;
    grid-column: 1; grid-row: 1;
    /* He and the headline are each centred in the row, so the shorter of the two
       rides the middle of the taller one. `contain` + a centred position keeps
       him whole at whatever height the headline sets. */
    align-self: center;
    /* Kept deliberately small (user-directed 2026-08-12): this row's height is
       whichever is taller, Jakker or the headline beside him, and every pixel of
       it pushes the picker card down the page. `contain` scales him to the box,
       so a shorter box is simply a smaller Jakker. */
    min-height: 104px;
    background-image: url('/assets/jakker-sm-v1.png');
    background-image: image-set(
      url('/assets/jakker-sm-v1.webp') type('image/webp'),
      url('/assets/jakker-sm-v1.png') type('image/png')
    );
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
  }
  .hero-jakker .hero-copy-top {
    grid-column: 2; grid-row: 1; align-self: center; text-align: center;
  }
  .hero-jakker .hero-form        { grid-column: 1 / -1; grid-row: 2; }
  .hero-jakker .hero-copy-bottom { grid-column: 1 / -1; grid-row: 3; text-align: center; }

  /* The headline shares its row with Jakker, so it lives in about two-thirds of
     the width. The vw term is sized so "Save big. No pressure." stays on one
     line from a 360px phone up; the clamp ceiling stops it running away on a
     tablet, where the same two-thirds is far wider. */
  .hero-jakker .hero-copy-top h1 { font-size: clamp(1.05rem, 5.4vw, 1.7rem); }
  .hero-jakker .hero-copy-top .eyebrow { margin-bottom: 10px; }

  /* Two categories per row across the full card width, with taller tiles and
     bigger names than the squeezed two-thirds-width version (user-directed
     2026-08-12). `min-height` is what sets the row height — the one-line and
     two-line names then match instead of stepping. tools/fold-audit.js measures
     the card wherever it lands, so it covers this layout as-is. */
  .hero-jakker .quote-card { padding: 16px 13px; }
  .hero-jakker .opt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .hero-jakker .opt {
    padding: 12px 8px; font-size: 1rem; line-height: 1.25; min-height: 58px;
    min-width: 0; text-align: center;
  }
  /* "Replacement" is wider than a tile on the narrowest phones. Hyphenation
     breaks it at a syllable instead of mid-word; `anywhere` stays as the last
     resort for anything hyphenation cannot split. */
  .hero-jakker .opt span { min-width: 0; hyphens: auto; overflow-wrap: anywhere; }
  @media (max-width: 400px) { .hero-jakker .opt { font-size: .92rem; min-height: 54px; } }
  /* No phone CTA under the picker on mobile (user-directed 2026-08-12) — the
     sticky header carries the same number, and the tiles are the card's job.
     The TLS note below it stays. */
  .hero-jakker .hero-call-label,
  .hero-jakker .hero-call { display: none; }
}

/* Short viewports (small laptops, landscape phones): claw back vertical space
   so the whole form still clears the fold. */



/* Mobile-only jump CTA. On desktop the form sits just below the copy and its
   first field is above the fold; on mobile the copy alone fills the viewport,
   so this button becomes the first CTA.
   Declared BEFORE the media query below — a later `display:none` would win. */
.hero-jump { display: none; }

@media (max-width: 960px) {
  .hero-grid { gap: 26px; }
  .hero-jump { display: inline-flex; width: 100%; max-width: 420px; margin: 2px auto 0; }
  /* Trust bullets move below the jump CTA so they never push it past the fold. */
  .hero .trust-row { margin-top: 18px; }
}

/* Tighten the hero on small phones so the jump CTA clears a 375x667 viewport. */


.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(59,235,30,.1); border: 1px solid rgba(59,235,30,.3);
  color: var(--green-ink); font-family: var(--font-head); font-weight: 700;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 999px; margin-bottom: 18px;
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }

.trust-row { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 22px 0 0; padding: 0; list-style: none; }
.trust-row li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-muted); font-weight: 600; }
.trust-row svg { width: 17px; height: 17px; fill: var(--green-ink); flex-shrink: 0; }

/* ---------------- Sections ---------------- */
.section { padding: 66px 0; }
.section-alt { background: var(--surface-1); border-block: 1px solid var(--border); }
.section-head { max-width: 720px; margin: 0 auto 44px; text-align: center; }
.section-head p { margin-bottom: 0; }

/* ---------------- Cards ---------------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); gap: 20px; }
.card {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  display: flex; flex-direction: column;
}
.card:hover { border-color: var(--green); transform: translateY(-3px); box-shadow: var(--shadow-green); text-decoration: none; }
.card h3 { margin-bottom: 8px; }
.card p { font-size: 0.95rem; margin-bottom: 18px; }
.card .card-link { margin-top: auto; font-weight: 700; font-family: var(--font-head); color: var(--green-ink); }
.card-icon {
  width: 52px; height: 52px; border-radius: 12px;
  background: rgba(59,235,30,.1); border: 1px solid rgba(59,235,30,.25);
  display: grid; place-items: center; margin-bottom: 18px;
}
.card-icon svg { width: 26px; height: 26px; stroke: var(--green-ink); fill: none; stroke-width: 1.9; }

/* numbered steps */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; counter-reset: step; }
.step { position: relative; padding-top: 8px; }
.step-num {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--green); color: #000;
  font-family: var(--font-head); font-weight: 900; font-size: 1.15rem;
  display: grid; place-items: center; margin-bottom: 16px;
}

/* stats */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 20px; text-align: center; }
.stat-num { font-family: var(--font-head); font-weight: 900; font-size: clamp(2rem,4vw,2.9rem); color: var(--green-ink); line-height: 1; }
.stat-lbl { font-size: 13px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .07em; margin-top: 8px; font-weight: 600; }

/* prose (legal + article pages) */
.prose { max-width: 800px; margin: 0 auto; }
.prose h2 { margin-top: 2em; font-size: 1.55rem; }
.prose h3 { margin-top: 1.6em; font-size: 1.2rem; }
.prose ul, .prose ol { color: var(--text-muted); padding-left: 22px; margin-bottom: 1.2em; }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--white); }
.prose table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: .93rem; }
.prose th, .prose td { border: 1px solid var(--border); padding: 11px 13px; text-align: left; }
.prose th { background: var(--surface-2); color: var(--white); font-family: var(--font-head); }
.prose td { color: var(--text-muted); }
.updated { font-size: 13px; color: var(--text-dim); border-left: 3px solid var(--green); padding-left: 12px; margin-bottom: 2.2em; }

.notice {
  background: var(--surface-2); border: 1px solid var(--border);
  border-left: 3px solid var(--green); border-radius: var(--radius-sm);
  padding: 18px 20px; margin: 1.6em 0; font-size: .93rem;
}
.notice p:last-child { margin-bottom: 0; }
.notice strong { color: var(--green-ink); }

/* FAQ */
.faq { max-width: 820px; margin: 0 auto; }
.faq details {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); margin-bottom: 12px; overflow: hidden;
}
.faq details[open] { border-color: var(--border-strong); }
.faq summary {
  cursor: pointer; padding: 19px 22px; list-style: none;
  font-family: var(--font-head); font-weight: 700; font-size: 1.03rem; color: var(--white);
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; color: var(--green-ink); font-size: 1.5rem; font-weight: 400;
  line-height: 1; flex-shrink: 0; transition: transform .2s;
}
.faq details[open] summary::after { content: '−'; }
.faq .faq-body { padding: 0 22px 20px; }
.faq .faq-body p { margin-bottom: 0; font-size: .96rem; }

/* ---------------- Quote form ---------------- */
.quote-card {
  background: var(--surface-2); border: 1px solid var(--border-strong);
  border-radius: var(--radius); padding: 26px;
  box-shadow: 0 24px 60px -30px rgba(20,24,28,.20);
}


.quote-card .qc-head { margin-bottom: 18px; }
.quote-card .qc-head .qc-title { font-size: 1.55rem; margin-bottom: 6px; }
.quote-card .qc-head p { font-size: .98rem; margin: 0; }

.progress { height: 6px; background: var(--surface-3); border-radius: 999px; overflow: hidden; margin-bottom: 8px; }
.progress-bar { height: 100%; width: 0; background: var(--green); border-radius: 999px; transition: width .3s ease; }
.progress-meta { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--text-dim); margin-bottom: 18px; font-weight: 600; }
.progress[hidden], .progress-meta[hidden] { display: none; }   /* [hidden] must beat display:flex */

/* Post-ZIP promo line. Sits between the progress meta and the active step. */
.zip-promo {
  display: block;
  text-align: center;
  background: var(--surface-3);
  color: var(--green-ink);
  border: 1px solid var(--green);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 14px;
  font-family: var(--font-head);
  font-size: 1.32rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.zip-promo { color: var(--white); }           /* black ink; only the price is green */
.zip-promo .zip-promo-price {
  color: #207D11; font-size: 40px; line-height: 1;
  margin: 0 9px;                              /* breathing room from "As Low As" and "in <city>" */
  animation: zipPromoPulse 3s ease-in-out infinite;
}
/* One full dark -> bright -> dark cycle every 3s. The reduced-motion block
   above flattens this to a static colour for anyone who asked for that. */
@keyframes zipPromoPulse {
  0%, 100% { color: #207D11; }
  50%      { color: #3BEB1D; }
}
.zip-promo[hidden] { display: none; }

/* Disqualification panel — replaces the form when an answer ends the quiz. */
.dq-panel {
  text-align: center;
  padding: 26px 20px 30px;
}
.dq-panel[hidden] { display: none; }
.dq-icon {
  width: 46px; height: 46px; margin: 0 auto 14px;
  fill: none; stroke: var(--text-dim); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.dq-text {
  margin: 0;
  font-family: var(--font-head);
  font-size: 1.28rem; font-weight: 700; line-height: 1.35;
  color: var(--white);
}
@media (max-width: 600px) { .dq-text { font-size: 1.14rem; } }

.qstep { display: none; }
.qstep.active { display: block; animation: fadeIn .25s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.qstep > .q-label {
  display: block; font-family: var(--font-head); font-weight: 700;
  font-size: 24px; color: var(--white); margin-top: 30px; margin-bottom: 6px;
}
.qstep > .q-help { font-size: .96rem; color: var(--text-dim); margin-bottom: 16px; }

/* Exactly two answers per row on desktop, one per row on phones. */
.opt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.opt {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface-2); border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); padding: 16px 17px;
  cursor: pointer; font-weight: 600; font-size: 1.08rem; color: var(--text);
  transition: border-color .15s, background .15s, color .15s;
  text-align: left; width: 100%; font-family: var(--font-body);
}
.opt:hover { border-color: var(--green); background: #eef7ec; }
.opt.selected { border-color: var(--green); background: rgba(59,235,30,.14); color: var(--white); }
.opt input { accent-color: var(--green); width: 17px; height: 17px; flex-shrink: 0; margin: 0; }

.field { margin-bottom: 15px; }
.field label { display: block; font-size: .95rem; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.field .req { color: var(--green-ink); }
.field input, .field select, .field textarea {
  width: 100%; background: var(--surface-2); border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px 15px;
  color: var(--white); font-size: 17px; /* >=16px = no iOS zoom */
  font-family: var(--font-body);
  transition: border-color .15s;
}
.field textarea { min-height: 104px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--green); }
.field input::placeholder, .field textarea::placeholder { color: #9aa1a8; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%231F7D10' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; background-size: 11px;
  padding-right: 40px;
}
/* Name fields stay side-by-side even on the narrowest phones — stacking them
   costs ~60px of height that the contact step cannot spare. */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Resolved city/state for the entered ZIP, or the reason it was rejected. */
.zip-city { font-size: .85rem; margin-top: 6px; min-height: 1.2em; color: var(--text-dim); }
.zip-city.ok  { color: var(--green-ink); font-weight: 700; }
.zip-city.bad { color: #c5221f; font-weight: 600; }

/* ZIP holds five digits — a full-width input invites the wrong expectation.
   The whole field is centered inside the card. */
.field-zip { text-align: center; }
.field-zip input[data-zip] {
  max-width: 190px; margin: 0 auto;
  text-align: center; letter-spacing: .06em;
  font-size: 22px;                      /* the one input the user reads back */
}
.field-zip .zip-city { text-align: center; }

.field-error { color: #c5221f; font-size: .82rem; margin-top: 5px; display: none; }
.field.invalid input, .field.invalid select { border-color: #c5221f; }
.field.invalid .field-error { display: block; }

/* honeypot — must stay visually hidden but not display:none (bots skip those) */
.hp-field {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden; opacity: 0;
}

.consent {
  display: flex; gap: 11px; align-items: flex-start;
  background: var(--surface-3); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px; margin: 16px 0;
}
.consent input { accent-color: var(--green); width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; }
.consent label { font-size: 11px; line-height: 1.5; color: var(--text-dim); }
.consent a { color: var(--text-muted); text-decoration: underline; }
.consent a:hover { color: var(--green-ink); }

.qnav { display: flex; gap: 12px; align-items: center; margin-top: 12px; }
.qnav .btn { flex: 1; }
.qback {
  background: none; border: 0; color: var(--text-dim); cursor: pointer;
  font-family: var(--font-body); font-weight: 600; font-size: .98rem; padding: 10px 6px;
}
.qback:hover { color: var(--green-ink); }

.form-msg { border-radius: var(--radius-sm); padding: 14px; font-size: .9rem; margin-top: 14px; display: none; }
.form-msg.err { display: block; background: #fdecea; border: 1px solid #f3b9b4; color: #a50e0e; }

.secure-note {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 10px; line-height: 1.4; color: var(--text-dim);
  margin-top: 12px; text-align: center;
}
.secure-note svg { width: 11px; height: 11px; fill: var(--green-ink); flex-shrink: 0; }

/* Reassurance badge under the quiz secure note. Horizontal and centered, with
   hairline dividers between claims; wraps to a column on narrow cards. */
.quiz-badge {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 6px 14px; margin: 10px 0 0; padding: 10px 0 0; list-style: none;
  border-top: 1px solid var(--border);
}
.quiz-badge li {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; line-height: 1.3; font-weight: 600; color: var(--text-muted);
  white-space: nowrap;
}
.quiz-badge li + li { border-left: 1px solid var(--border); padding-left: 14px; }
.quiz-badge svg { width: 13px; height: 13px; fill: var(--green-ink); flex-shrink: 0; }
/* The three claims stop fitting on one line once the card narrows, and a
   divider stranded at the start of a wrapped row reads as a mistake. */
@media (max-width: 639px) {
  .quiz-badge { gap: 7px 12px; }
  .quiz-badge li + li { border-left: 0; padding-left: 0; }
}

/* ---------------- Ads ---------------- */
.ad-slot { margin: 34px auto; text-align: center; min-height: 90px; overflow: hidden; }
.ad-slot::before {
  content: 'Advertisement'; display: block; font-size: 9px; letter-spacing: .16em;
  text-transform: uppercase; color: #9aa1a8; margin-bottom: 6px;
}

/* ---------------- Footer ---------------- */
.site-footer { background: var(--surface-1); border-top: 1px solid var(--border); padding: 56px 0 0; margin-top: 60px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 36px; margin-bottom: 44px; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-col h4 {
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--green-ink); margin-bottom: 16px; font-weight: 700;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 9px; }
.footer-col a { color: var(--text-muted); font-size: .9rem; }
.footer-col a:hover { color: var(--green-ink); }
.footer-about p { font-size: .88rem; margin-top: 14px; }

/* Global footer — HARD RULE: 90% page width all devices, 9px, light gray on dark bg */
#domani-global-footer {
  width: 90%; max-width: 90%; margin: 0 auto;
  border-top: 1px solid var(--border);
  padding: 26px 0 34px;
  font-size: 9px; line-height: 1.7; color: #6b7075;
  text-align: center;
}
#domani-global-footer * { font-size: 9px; }
#domani-global-footer p { color: #6b7075; margin: 0 0 10px; font-size: 9px; }
#domani-global-footer a { color: #6b7075; text-decoration: underline; }
#domani-global-footer a:hover { color: var(--green-ink); }
#domani-global-footer .gf-links {
  margin-bottom: 12px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px;
}
#domani-global-footer .gf-links a { margin-right: 0; white-space: nowrap; }

/* Bottom logo — 64px desktop / 7% mobile, centered, right above the global footer */
.footer-logo { width: 40px; max-width: 40px; margin: 5px auto 30px; padding: 0; display: block; }
@media (max-width: 640px) { .footer-logo { width: 40px; min-width: 0; } }

.footer-about .footer-brand { width: 190px; margin: 0 0 4px; }

/* ---------------- Utility ---------------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}


/* ============================================================================
   VIEWPORT TIERS — must stay LAST in this file.
   Requirement: the entire quote card is visible without scrolling on every
   device, at every step. Rather than shrinking everything everywhere, each tier
   only gives up what the available height actually demands. The heroes render
   the form BEFORE the headline, so the card's top is fixed by the page chrome
   and only the card's own height has to shrink.

   Equal-specificity rules resolve by document order — moving these blocks
   earlier lets the comfortable base rules win and the form drops below the
   fold. Enforced by tools/fold-audit.js.
   ========================================================================== */

/* Tier 2 — laptops and landscape tablets (<=950px tall). */
@media (max-height: 950px) {
  .hero { padding-top: 22px; }
  .hero-grid { gap: 20px; }
  .quote-card { padding: 20px; }
  .quote-card .qc-head { margin-bottom: 12px; }
  .quote-card .qc-head .qc-title { font-size: 1.4rem; }
  .quote-card .qc-head p { display: none; }
  .progress-meta { margin-bottom: 13px; }
  /* The promo is the largest single block of card chrome once a ZIP is entered,
     so short viewports buy their headroom here first. */
  .zip-promo { margin-bottom: 9px; padding: 7px 10px; font-size: 1.12rem; }
  .qstep > .q-label { font-size: 24px; }
  .qstep > .q-help { font-size: .9rem; margin-bottom: 11px; }
  .opt-grid { gap: 8px; }
  .opt { padding: 13px 15px; font-size: 1.02rem; }
  .field { margin-bottom: 11px; }
  .field label { font-size: .9rem; margin-bottom: 4px; }
  .field input, .field select { padding: 12px 13px; font-size: 16.5px; }
  .consent { padding: 10px; margin: 11px 0; }
  .consent label { font-size: 10px; line-height: 1.4; }
  .btn-block { padding: 15px 20px; font-size: 1.1rem; }
}

/* Tier 3 — short laptops / 768-tall landscape tablets. */
@media (max-height: 820px) {
  :root { --nav-h: 80px; }
  .nav-call { padding: 10px 18px; }
  .hero { padding-top: 16px; }
  .hero .eyebrow { display: none; }
  .hero-grid { gap: 16px; }
  .quote-card { padding: 15px; }
  .quote-card .qc-head { margin-bottom: 9px; }
  .progress-meta { margin-bottom: 10px; }
  .zip-promo { margin-bottom: 9px; padding: 8px 10px; }
  .qstep > .q-help { margin-bottom: 8px; }
  .opt { padding: 10px 14px; }
  .opt-grid { gap: 7px; }
  /* Control chrome is where a 768-tall landscape screen finds its last pixels:
     three field rows at 2px less padding each is what keeps the name/address
     step above the fold once the ZIP promo is showing. */
  .field input, .field select { padding: 10px 13px; }
  .btn-block { padding: 11px 18px; }
  .field { margin-bottom: 6px; }
  .field label { margin-bottom: 3px; }
  .consent { padding: 8px; margin: 6px 0; }
  .consent label { font-size: 9.5px; line-height: 1.3; }
  .btn-block { padding: 13px 18px; }
  .secure-note { margin-top: 8px; }
  .qnav { margin-top: 8px; }
  .hero-call { margin-top: 8px; }
  .opt-grid { gap: 7px; }
  /* The homepage's 100px hero padding is unaffordable on a 768px-tall screen. */
  .hero.hero-home { padding-top: 40px; }
}

/* Tier 4 — phones. Roomier than the short-laptop tier: most phones are tall. */
@media (max-width: 600px) {
  .breadcrumbs ol { padding: 8px 0; }
  .hero { padding: 18px 0 40px; }
  .hero h1 { font-size: 1.9rem; }

  .quote-card { padding: 15px 13px; }
  .quote-card .qc-head { margin-bottom: 10px; }
  .quote-card .qc-head .qc-title { font-size: 1.32rem; }
  .quote-card .qc-head p { display: none; }
  .progress-meta { margin-bottom: 10px; font-size: 11.5px; }
  .zip-promo { margin-bottom: 9px; font-size: 1.2rem; }
  .qstep > .q-label { font-size: 20px; margin-bottom: 6px; }
  .qstep > .q-help { display: none; }        /* the question already says it */
  .opt-grid { grid-template-columns: 1fr; gap: 8px; }
  /* Steps with five or more answers stay two-up on a phone — stacked, they are
     what pushes the card past the fold. The radio moves above the label so a
     half-width tile still fits a two-word answer. */
  /* Doubled class: the small-phone tier at the end of this file re-declares
     `.opt-grid { grid-template-columns: 1fr }` and would otherwise win on
     document order, stacking these steps again on the exact device that can
     least afford it. */
  .opt-grid.opt-grid-dense { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .opt-grid.opt-grid-dense .opt {
    flex-direction: column; align-items: center; justify-content: center;
    gap: 5px; padding: 9px 7px; font-size: .93rem; line-height: 1.25;
    text-align: center; min-height: 62px; hyphens: auto; overflow-wrap: anywhere;
  }
  .opt { padding: 12px 14px; font-size: 1.04rem; }
  .opt-grid { gap: 7px; }
  .field { margin-bottom: 8px; }
  .field-row { gap: 9px; }
  .field label { font-size: .88rem; margin-bottom: 2px; }
  .field input, .field select { padding: 11px 12px; font-size: 16px; }
  .field-zip input[data-zip] { max-width: 170px; font-size: 22px; }
  .consent { padding: 8px; margin: 8px 0; gap: 8px; }
  .consent label { font-size: 9.5px; line-height: 1.35; }
  .btn-block { padding: 13px 18px; font-size: 1.12rem; }
  .secure-note { margin-top: 8px; }
  .qnav { margin-top: 8px; }
  .zip-city { font-size: .82rem; margin-top: 4px; }
}

/* Tier 5 — small phones (iPhone SE, 375x667). The contact step carries the
   mandatory TCPA consent text; this is the tightest the card can legally get.
   9px matches the global footer's legal-text size, the floor we already ship. */
@media (max-width: 600px) and (max-height: 700px) {
  :root { --nav-h: 60px; }
  .trust-note { font-size: 10.5px; padding: 3px 0 0; line-height: 1.3; }
  .secure-note { margin-top: 2px; }
  .qnav { margin-top: 2px; }
  .qback { padding: 5px 4px; font-size: .85rem; }
  .breadcrumbs { font-size: 12px; }
  .breadcrumbs ol { padding: 4px 0; }
  .hero { padding: 2px 0 32px; }

  .quote-card { padding: 8px; }
  .quote-card .qc-head { margin-bottom: 5px; }
  .quote-card .qc-head .qc-title { font-size: 1.05rem; }
  .progress-meta { margin-bottom: 5px; font-size: 11px; }
  /* The promo wraps to three lines on a 375px card and costs ~100px there —
     more than the submit button. Stepping the type down fits it on two and is
     where an SE finds the headroom for the name/address step, rather than
     shrinking the inputs and their tap targets. */
  .zip-promo { margin-bottom: 5px; padding: 6px 9px; font-size: .95rem; }
  .zip-promo .zip-promo-price { font-size: 27px; margin: 0 5px; }
  .qstep > .q-label { font-size: 20px; margin-bottom: 2px; }
  .opt-grid { grid-template-columns: 1fr; gap: 3px; }
  /* Same two-up dense grid as the phone tier, one notch shorter — an SE is the
     only screen where the 62px tile does not fit. */
  .opt-grid.opt-grid-dense .opt { min-height: 52px; padding: 7px 6px; }
  .opt { padding: 7px 12px; font-size: .96rem; }
  .opt input { width: 15px; height: 15px; }
  .qstep [data-next] { margin-top: 10px !important; }
  .field { margin-bottom: 6px; }
  .field label { font-size: .75rem; margin-bottom: 2px; }
  .field input, .field select { padding: 9px 11px; }
  .consent { padding: 5px; margin: 2px 0; gap: 6px; }
  .consent label { font-size: 9px; line-height: 1.25; }
  .btn-block { padding: 9px 18px; font-size: 1.06rem; }
  .field { margin-bottom: 4px; }
  .field input, .field select { padding: 9px 11px; }
}

/* Form pages render only the form above the footer. */
.hero-form-only { padding-bottom: 34px; }
.hero-form-only .hero-grid { gap: 0; }
.quote-card .qc-head .qc-title { line-height: 1.15; }

/* Homepage hero only: breathing room under the dark nav bar.
   Two class selectors (0,2,0) so this beats the single-class `.hero` padding in
   the viewport tiers above, regardless of document order. Form pages are
   deliberately excluded — their card has to clear the fold. */
/* Homepage hero top padding. Ordered narrowest-last: equal specificity means
   document order decides, and a short screen must beat the 100px default. */
.hero.hero-home { padding-top: 60px; }
@media (max-height: 820px) { .hero.hero-home { padding-top: 34px; } }
@media (max-width: 600px)  { .hero.hero-home { padding-top: 40px; } }
@media (max-width: 600px) and (max-height: 700px) {
  .hero.hero-home { padding-top: 2px; }
  .hero-call-label { font-size: 16px; margin: 4px 0 3px; }
  .quote-card .secure-note { margin-top: 2px; }
}
@media (max-width: 600px) and (max-height: 700px) { .hero.hero-home { padding-top: 24px; } }

/* Call block under the homepage category cards. The button spans the full card
   width, i.e. both columns of the 2-up grid. Sizing comes from .btn-block. */
.hero-call-label {
  font-family: var(--font-head); font-weight: 700;
  font-size: 20px; line-height: 1.3; color: var(--white);
  text-align: center; margin: 16px 0 9px;
}
.hero-call { margin-top: 0; letter-spacing: 0; gap: 9px; }
.hero-call .call-icon { width: 18px; height: 18px; fill: #000000; flex-shrink: 0; }