/* 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. */
.quote-card { text-align: left; }
/* 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;
    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; }
}

/* 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; }

.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: 1.32rem; color: var(--white); 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. */
.field input[data-zip] { max-width: 190px; }

.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; }

/* ---------------- 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 — 100px desktop / 10% mobile, centered, right above the global footer */
.footer-logo { width: 100px; margin: 5px auto; padding: 0; display: block; }
@media (max-width: 640px) { .footer-logo { width: 10%; min-width: 56px; } }

.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; }
  .qstep > .q-label { font-size: 1.2rem; }
  .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; }
  .qstep > .q-help { margin-bottom: 8px; }
  .opt { padding: 10px 14px; }
  .opt-grid { gap: 7px; }
  .field { margin-bottom: 8px; }
  .field label { margin-bottom: 3px; }
  .consent { padding: 8px; margin: 8px 0; }
  .consent label { font-size: 9.5px; line-height: 1.32; }
  .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; }
  .qstep > .q-label { font-size: 1.2rem; margin-bottom: 6px; }
  .qstep > .q-help { display: none; }        /* the question already says it */
  .opt-grid { grid-template-columns: 1fr; gap: 8px; }
  .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 input[data-zip] { max-width: 160px; }
  .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: 3px; }
  .qnav { margin-top: 4px; }
  .qback { padding: 5px 4px; font-size: .85rem; }
  .breadcrumbs { font-size: 12px; }
  .breadcrumbs ol { padding: 4px 0; }
  .hero { padding: 2px 0 32px; }

  .quote-card { padding: 9px; }
  .quote-card .qc-head { margin-bottom: 8px; }
  .quote-card .qc-head .qc-title { font-size: 1.15rem; }
  .progress-meta { margin-bottom: 8px; font-size: 11px; }
  .qstep > .q-label { font-size: 1.08rem; margin-bottom: 4px; }
  .opt-grid { grid-template-columns: 1fr; gap: 3px; }
  .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: 7px; margin: 4px 0; gap: 6px; }
  .consent label { font-size: 9px; line-height: 1.3; }
  .btn-block { padding: 11px 18px; font-size: 1.06rem; }
  .field { margin-bottom: 5px; }
  .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: 100px; }
@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; }