/* Home Coverage Audit design system — light theme.
   Brand: #ffffff ground, #111827 ink, #2563EB accent.
   Every CTA is solid #2563EB with bold #ffffff text.
   Headings: Space Grotesk. Body: IBM Plex Sans. (Google Fonts)
   Feel: analytical audit worksheet: checklist rows, tabular numerals, 6px corners, cool greys */

:root {
  --black: #ffffff;              /* page background */
  --green: #2563EB;          /* brand accent (fills) */
  --green-dark: #1D4ED8;
  --green-glow: rgba(37,99,235,0.30);
  --white: #111827;             /* strongest ink (headings) */

  /* The accent often fails contrast as small text on a light ground; this is
     the darkened form used wherever the accent carries meaning as TEXT
     (links, eyebrow, stat numbers, icons) rather than as a fill. */
  --green-ink: #1A47B8;

  /* Text that sits ON the accent fill. Per-brand: some accents take black,
     some take white — never assume. */
  --cta-fg: #ffffff;

  --surface-1: #F8FAFC;
  --surface-2: #ffffff;
  --surface-3: #EEF2F7;
  --border: #DDE3EA;
  --border-strong: #B6C0CD;

  --text: #334155;
  --text-muted: #64748B;
  --text-dim: #64748B;

  --font-head: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'IBM Plex Sans', -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: 6px;
  --radius-sm: 4px;

  --shadow-green: 0 0 0 1px rgba(37,99,235,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: 700;
  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: #fff; 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 #2563EB with WHITE BOLD text. No gradients. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--green);
  color: var(--cta-fg);
  font-family: var(--font-head);
  font-weight: 700;
  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: var(--cta-fg); 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-ink); text-decoration: none; }

.nav-cta {
  flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.nav-cta-label {
  color: #ffffff;
  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: var(--cta-fg); 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(37,99,235,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; }
}

/* 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 the name sits in the middle of the taller tile. */
.hero-home .opt-grid { grid-auto-rows: 1fr; }

/* Homepage picker on phones: two categories per row across the full card width,
   tall tiles, hyphenation for "Replacement" on the narrowest phones. No phone CTA
   under the picker on mobile — the sticky header carries the same number. */
@media (max-width: 960px) {
  .hero-home .quote-card { padding: 16px 13px; }
  .hero-home .opt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .hero-home .opt {
    padding: 12px 8px; font-size: 1rem; line-height: 1.25; min-height: 58px;
    min-width: 0; text-align: center;
  }
  .hero-home .opt span { min-width: 0; hyphens: auto; overflow-wrap: anywhere; }
  @media (max-width: 400px) { .hero-home .opt { font-size: .92rem; min-height: 54px; } }
  .hero-home .hero-call-label,
  .hero-home .hero-call { display: none; }
}

/* 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(37,99,235,.1); border: 1px solid rgba(37,99,235,.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(37,99,235,.1); border: 1px solid rgba(37,99,235,.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: #fff;
  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(37,99,235,.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; } }
/* Site footer after the category columns were removed (2026-09-04): brand + one Company column. The sitemap page keeps the 4-column .footer-grid. */
@media (min-width: 861px) { .footer-grid-slim { grid-template-columns: 1.6fr 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; } }

/* Smaller than the header lockup (38px tall ≈ 168px wide) — user-directed 2026-09-04. */
.footer-about .footer-brand { width: 120px; 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: #ffffff; flex-shrink: 0; }

/* Homepage hero subhead — fills the column the mascot used to occupy. */
.hero-sub { font-size: 1.05rem; line-height: 1.6; color: var(--text-muted);
            max-width: 46ch; margin: 0 auto; }
@media (min-width: 961px) {
  .hero-grid.split .hero-sub { margin-left: 0; margin-right: 0; text-align: left; }
  .hero-grid.split { align-content: center; }
}