/* ============================================================
   CovWell — premium product-led system
   Warm mineral paper + deep forest + signal emerald. Geist display
   and UI, Geist Mono details. Tile-mark brand asset. (Inter/Plex
   remain only for the legal pages via site/legal.css.)
   ============================================================ */

/* ---------- Self-hosted fonts (variable woff2, latin) ----------
   Geist + Geist Mono (Vercel, OFL) — the free half of Base44's stack;
   their display face "Dazzed" is commercial and can't be shipped.
   font-display: optional + preload = no swap-shift on the mega headline;
   the font is same-origin and ~28KB, so it makes first paint in practice. */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400 800; font-display: optional; src: url("/site/fonts/geist-var.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400 500; font-display: optional; src: url("/site/fonts/geist-mono-var.woff2") format("woff2"); }
/* Big headlines use the platform's classic serif — Iowan Old Style on
   macOS/iOS, Georgia elsewhere (the sturdy editorial look preferred over
   Fraunces). No webfont download and no flash-of-fallback: headlines render
   instantly in their final face. See --serif below. */

/* ---------- Tokens ---------- */
:root {
  --paper:      #F7F5EF;
  --paper-deep: #ECE6D9; /* a decisive tonal step — paper vs deep must read as different rooms */
  --card:       #FFFEFA;
  --ink:        #171815;
  --ink-soft:   #575B53;
  --ink-faint:  #61665C; /* 4.7:1 on --paper-deep #ECE6D9, 5.2:1 on --paper — carries the AI disclosures; darkening paper-deep further breaks AA */
  --line:       rgba(23, 24, 21, .15);
  --line-soft:  rgba(23, 24, 21, .08);

  --green:       #0B6B4F; /* primary CTA — white text passes AA on this */
  --green-hover: #07543E;
  --green-bright:#169A6D; /* graphics only */
  --green-tint:  #E1F2E9;
  --green-rgb:   11, 107, 79; /* = --green; single primitive for every deep-green shadow/ring/border */
  --signal:      #B9F5D2;

  --amber: #92610A;
  --rust:  #B42318;
  --slate: #47566A;

  --dark:      #111A16;
  --dark-2:    #0B110E;
  --dark-ink:  #F7F4EB;
  --dark-soft: #B8C0B8;
  --dark-line: rgba(247, 244, 235, .15);

  --display: "Geist", -apple-system, "Segoe UI", sans-serif;
  --serif: "Iowan Old Style", Georgia, "Times New Roman", serif; /* classic system serif for big headlines (Fraunces removed by preference) */
  --sans:  "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:  "Geist Mono", ui-monospace, "SF Mono", monospace;

  --r-lg: 24px;
  --r-md: 16px;
  --r-sm: 11px;

  --shadow-soft: 0 1px 1px rgba(23,24,21,.04), 0 10px 30px rgba(23,24,21,.065);
  --shadow-lift: 0 2px 5px rgba(23,24,21,.06), 0 28px 80px rgba(23,24,21,.14);

  --wrap: 1240px;
  --ease: cubic-bezier(.22, .8, .28, 1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html.reduce { scroll-behavior: auto; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background:
    radial-gradient(900px 620px at 82% 2%, rgba(185,245,210,.2), transparent 64%),
    var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.modal-open { overflow: hidden; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
textarea { font: inherit; }
::selection { background: rgba(5, 150, 105, .18); }

[id] { scroll-margin-top: 84px; } /* anchor targets clear the fixed nav */

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
.wrap-narrow { max-width: 860px; }
.center { text-align: center; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.skip {
  position: fixed; top: -60px; left: 16px; z-index: 300;
  background: var(--ink); color: var(--paper);
  padding: 10px 16px; border-radius: var(--r-sm);
  text-decoration: none; transition: top .2s;
}
.skip:focus { top: 12px; }

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

/* ---------- Paper grain ---------- */
.grain {
  position: fixed; inset: -50%; z-index: 90; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  mix-blend-mode: multiply;
  opacity: .42;
}
/* The giant fixed grain layer is a real compositing cost on phones */
@media (max-width: 767px) {
  .grain { display: none; }}

/* ---------- Scroll progress ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; z-index: 250;
  width: 100%; height: 2px;
  background: var(--ink);
  transform: scaleX(0); transform-origin: 0 50%;
}

/* ---------- Type primitives ---------- */
.eyebrow {
  font-family: var(--mono);
  font-size: 12px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 18px;
}
.eyebrow.light { color: var(--dark-soft); }

.section-h {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(30px, 4.2vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.028em;
  max-width: 22em;
  text-wrap: balance;
}
.section-h.light { color: var(--dark-ink); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-weight: 600; font-size: 15px; line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s, color .2s, border-color .2s;
}
.btn:active { transform: scale(.985); }
.btn-green {
  background: var(--green); color: #fff;
  box-shadow: 0 1px 2px rgba(var(--green-rgb),.25), 0 6px 18px rgba(var(--green-rgb),.22);
}
.btn-green:hover {
  background: var(--green-hover);
  box-shadow: 0 2px 4px rgba(var(--green-rgb),.28), 0 12px 30px rgba(var(--green-rgb),.3);
}
.btn-cream { background: var(--paper); color: var(--ink); }
.btn-cream:hover { background: #fff; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-ghost-light { background: transparent; color: var(--dark-ink); border-color: var(--dark-line); }
.btn-ghost-light:hover { border-color: var(--dark-ink); }
.btn-sm { padding: 10px 18px; font-size: 14px; }
.btn-lg { padding: 17px 32px; font-size: 16px; }
.btn-block { width: 100%; }

/* ============================================================
   NAV — flat Base44-style bar
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 120;
}
.nav-bar {
  display: flex; align-items: center; gap: 30px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px 28px;
  transition: padding .35s var(--ease);
}
.nav::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(240, 238, 232, .82);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  border-bottom: 1px solid transparent;
  opacity: 0;
  transition: opacity .3s, border-color .3s;
  pointer-events: none;
}
.nav.scrolled::before { opacity: 1; border-bottom-color: var(--line-soft); }
.nav.scrolled .nav-bar { padding-top: 10px; padding-bottom: 10px; }
.nav-bar > * { position: relative; }
.brand {
  display: inline-flex; align-items: center; gap: 11px;
  text-decoration: none; margin-right: auto;
}
.brand-tile { width: 45px; height: auto; }
.brand-word {
  font-family: var(--display);
  font-weight: 700; font-size: 20.5px; letter-spacing: -0.02em;
}
.brand-word span { color: var(--ink-soft); }
.nav-links { display: flex; gap: 2px; }
.nav-links a {
  padding: 8px 13px;
  font-size: 14.5px; font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
  border-radius: 999px;
  transition: color .15s, background .15s;
}
.nav-links a:hover { color: var(--ink); background: rgba(19,18,16,.05); }
.nav-actions { display: flex; align-items: center; gap: 16px; }
.nav-phone {
  font-family: var(--mono); font-size: 13.5px;
  color: var(--ink-soft); text-decoration: none;
  white-space: nowrap;
  transition: color .15s;
}
.nav-phone:hover { color: var(--ink); }
.nav-toggle {
  display: none;
  flex-direction: column; gap: 5px;
  padding: 12px 10px;
  background: none; border: 0;
}
.nav-toggle span {
  width: 20px; height: 1.8px; background: var(--ink);
  border-radius: 2px;
  transition: transform .25s var(--ease), opacity .2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.8px) rotate(-45deg); }
.mobile-nav {
  position: fixed; top: 70px; left: 16px; right: 16px; z-index: 119;
  display: flex; flex-direction: column; gap: 2px;
  max-height: calc(100vh - 90px);
  max-height: calc(100dvh - 90px);
  overflow-y: auto;
  padding: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift);
}
.mobile-nav a {
  padding: 12px 14px;
  font-weight: 500; text-decoration: none;
  border-radius: var(--r-sm);
}
.mobile-nav a:hover { background: var(--paper); }
.mnav-phone { font-family: var(--mono); color: var(--ink-soft); }

/* ============================================================
   HERO — mega headline + prompt card
   ============================================================ */
.hero {
  position: relative;
  padding: 168px 0 56px;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(19,18,16,.15) 1px, transparent 1.1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(900px 620px at 50% 20%, #000 25%, transparent 78%);
  -webkit-mask-image: radial-gradient(900px 620px at 50% 20%, #000 25%, transparent 78%);
  opacity: .55;
  pointer-events: none;
}
.hero-h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(48px, 8.6vw, 104px);
  line-height: .99;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
/* One-line hero explainer (restored): the H1 owns the frame, this line says
   who it's for and how it works. Consolidated single rule — centered layout. */
.hero-sub {
  max-width: 610px;
  margin: 28px auto 0;
  font-size: clamp(16px, 1.45vw, 18.5px);
  line-height: 1.62;
  color: var(--ink-soft);
  text-wrap: pretty;
}
/* Hero load choreography */
.hero-el { opacity: 0; transform: translateY(22px); filter: blur(6px); }
html.js .hero-el { animation: hero-in .85s var(--ease) forwards; }
/* Deliberate hero choreography — copy column top-to-bottom, then the compact
   Coverage Brief. This list is the
   AUTHORITATIVE delay chain (the H1 has its own transform-only reveal). */
html.js .hero-kicker.hero-el  { animation-delay: .05s; }
html.js .hero-sub.hero-el     { animation-delay: .2s; }
html.js .hero-proof.hero-el   { animation-delay: .28s; }
html.js .tool-shell.hero-el   { animation-delay: .38s; }
html.js .triage-bar.hero-el   { animation-delay: .48s; }
html.js .cta-trust.hero-el    { animation-delay: .56s; }
html:not(.js) .hero-el, html.reduce .hero-el { opacity: 1; transform: none; filter: none; animation: none; }
@keyframes hero-in {
  to { opacity: 1; transform: none; filter: blur(0); }
}
.prompt-send {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  border: 0; border-radius: 13px;
  background: var(--green); color: #fff;
  box-shadow: 0 1px 2px rgba(var(--green-rgb),.25), 0 6px 16px rgba(var(--green-rgb),.24);
  transition: background .2s, transform .25s var(--ease), box-shadow .25s var(--ease);
}
.prompt-send:hover { background: var(--green-hover); box-shadow: 0 2px 4px rgba(var(--green-rgb),.3), 0 10px 26px rgba(var(--green-rgb),.32); }
.prompt-send:active { transform: scale(.95); }

.pi { width: 14px; height: 14px; color: var(--green-bright); flex-shrink: 0; }

/* CTA trust micro-rows — checkmarks exactly where the click happens */
.cta-trust {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px 20px;
  margin-top: 16px;
}
.cta-trust span {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500;
  color: var(--ink-soft);
}
.cta-trust-modal { margin-top: 16px; gap: 6px 16px; }
.cta-trust-modal span { font-size: 12.5px; color: var(--ink-faint); }
.badge svg { width: 15px; height: 15px; color: var(--green-bright); flex-shrink: 0; }
.final .badge-row { margin-top: 28px; }

.hero-proof {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(100%, 880px);
  margin: 28px auto 22px;
  background: rgba(255, 254, 250, .72);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(23,24,21,.03), 0 12px 34px rgba(23,24,21,.045);
  backdrop-filter: blur(10px);
}
.hero-proof li {
  min-width: 0;
  padding: 14px 16px;
  text-align: left;
  border-right: 1px solid var(--line-soft);
}
.hero-proof li:last-child { border-right: 0; }
.hero-proof strong,
.hero-proof span { display: block; }
.hero-proof strong {
  font-size: 13px;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.hero-proof span {
  margin-top: 3px;
  color: var(--ink-faint);
  font-size: 10.5px;
  line-height: 1.35;
}
@media (max-width: 700px) {
  .hero-proof { grid-template-columns: 1fr 1fr; margin-top: 22px; }
  .hero-proof li:nth-child(2) { border-right: 0; }
  .hero-proof li:nth-child(-n + 2) { border-bottom: 1px solid var(--line-soft); }
}

/* Severity chips (shared: demos + chat) */
.sev {
  flex-shrink: 0;
  margin-top: 1px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
}
.sev-high { color: var(--rust); background: rgba(180,35,24,.08); }
.sev-med  { color: var(--amber); background: rgba(146,97,10,.09); }
.sev-ok   { color: var(--green); background: var(--green-tint); }

.tool-shell {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
.tool-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 22px;
  border-bottom: 1px solid var(--line-soft);
  background: #F7F5EF;
}
.tool-head-brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 14.5px;
}
.tool-head-brand img { width: 24px; height: auto; }
.live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green-bright);
  box-shadow: 0 0 0 0 rgba(5,150,105,.5);
  animation: pulse 2.4s ease-out infinite;
}
html.reduce .live-dot { animation: none; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(5,150,105,.45); }
  70% { box-shadow: 0 0 0 9px rgba(5,150,105,0); }
  100% { box-shadow: 0 0 0 0 rgba(5,150,105,0); }
}
.tool-head-note {
  font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .02em;
  color: var(--ink-faint);
  text-align: right;
}

.brief-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 15px 22px;
  background: #FFFEFA;
  border-bottom: 1px solid var(--line-soft);
}
.brief-context > div { display: flex; flex-direction: column; min-width: 0; }
.brief-context-kicker {
  font-family: var(--mono);
  font-size: 9.5px;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--green);
}
.brief-context strong {
  margin-top: 3px;
  font-size: 14px;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.brief-context ol {
  display: flex;
  align-items: center;
  gap: 8px;
}
.brief-context li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-faint);
  font-size: 11px;
  font-weight: 550;
  white-space: nowrap;
}
.brief-context li + li::before {
  content: "";
  width: 22px;
  height: 1px;
  margin-right: 2px;
  background: var(--line);
}
.brief-context li span {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 9px;
  background: var(--paper);
}
.brief-context li.is-active { color: var(--ink); }
.brief-context li.is-active span {
  color: #fff;
  border-color: var(--green);
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(var(--green-rgb), .1);
}

@media (max-width: 640px) {
  .brief-context { align-items: flex-start; flex-direction: column; gap: 12px; padding: 14px 17px; }
  .brief-context ol { width: 100%; justify-content: space-between; gap: 4px; }
  .brief-context li { gap: 4px; font-size: 10px; }
  .brief-context li + li::before { width: clamp(8px, 5vw, 22px); margin-right: 0; }
}

.tool-chat { display: flex; flex-direction: column; min-height: 440px; }
.chat-scroll {
  flex: 1;
  overflow-y: auto;
  max-height: 460px;
  padding: 24px 24px 10px;
  display: flex; flex-direction: column; gap: 16px;
  scroll-behavior: smooth;
}
html.reduce .chat-scroll { scroll-behavior: auto; }
.msg { max-width: 78%; animation: msg-in .4s var(--ease); }
html.reduce .msg { animation: none; }
@keyframes msg-in {
  from { opacity: 0; transform: translateY(10px); }
}
.msg-user {
  align-self: flex-end;
  background: var(--ink); color: var(--paper);
  padding: 12px 17px;
  border-radius: 16px 16px 5px 16px;
  font-size: 15px; line-height: 1.5;
}
.msg-ai {
  align-self: flex-start;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 5px 16px 16px 16px;
  padding: 16px 18px;
  font-size: 15px; line-height: 1.55;
  width: 100%;
  max-width: 92%;
}
.msg-ai .ai-intro { color: var(--ink); }
.ai-findings { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.ai-finding {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-soft);
  background: var(--card);
  font-size: 14px; line-height: 1.5;
}
.ai-rec {
  margin-top: 12px;
  font-size: 14.5px;
  color: var(--ink-soft);
}
.ai-handoff {
  margin-top: 14px;
  padding: 13px 15px;
  border-radius: var(--r-sm);
  background: var(--green-tint);
  border: 1px solid rgba(var(--green-rgb),.18);
  font-size: 14px;
}
.ai-handoff p { color: var(--ink); margin-bottom: 10px; }
.ai-handoff .handoff-ctas { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-handoff a {
  display: inline-flex; align-items: center;
  padding: 8px 15px;
  border-radius: 999px;
  background: var(--green); color: #fff;
  font-size: 13px; font-weight: 600;
  text-decoration: none;
}
.ai-handoff a.alt { background: transparent; color: var(--ink); border: 1px solid rgba(19,18,16,.25); }
.ai-policy-line {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 6px;
}
.ai-analysis-status {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 10px;
  padding: 9px 11px;
  border: 1px solid rgba(146, 97, 10, .2);
  border-radius: 9px;
  background: rgba(146, 97, 10, .06);
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.4;
}
.ai-analysis-status strong { color: var(--amber); font-size: 11.5px; }
.doc-page {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  color: var(--ink-faint);
  margin-left: 6px;
  white-space: nowrap;
}
.ai-followup { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.ai-followup .fu-q { width: 100%; font-size: 14px; font-weight: 500; margin-bottom: 2px; }
.fu-chip {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  font-size: 13.5px; font-weight: 500;
  transition: border-color .15s, background .15s;
}
.fu-chip:hover { border-color: var(--ink); background: #fff; }

/* "Jump to answer" — skip the typewriter and reveal the findings now */
.chat-skip {
  align-self: flex-end;
  margin: 2px 2px 0 auto;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink-soft);
  font-size: 12px; font-weight: 500;
  transition: border-color .15s, color .15s;
}
.chat-skip:hover { border-color: var(--ink); color: var(--ink); }

/* Touch devices: every quick-reply / conversion control gets a >=44px hit
   area. Desktop density is untouched (pointer: fine keeps the base rules). */
@media (pointer: coarse) {
  .fu-chip, .pill, .chat-skip, .nr-go, .nr-skip, .nr-cal,
  .triage-bar a {
    min-height: 44px;
    padding-top: 11px;
    padding-bottom: 11px;
  }
  .nr-date { min-height: 44px; }
  .ai-handoff a { min-height: 44px; padding: 10px 16px; }}

/* ---- Non-renewal triage: date form + coverage countdown ---- */
.nr-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.nr-date {
  font: inherit; font-size: 16px; /* 16px keeps iOS from zooming on focus */
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
}
.nr-date:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.nr-go { padding: 10px 18px; height: auto; }
.nr-skip { margin-top: 9px; }
.nr-card {
  margin-top: 4px;
  padding: 18px;
  border: 1px solid rgba(146,97,10,.28);
  border-radius: 14px;
  background: rgba(146,97,10,.06);
}
.nr-countdown {
  text-align: center;
  padding: 4px 0 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(146,97,10,.18);
}
.nr-count-n {
  font-family: var(--display);
  font-weight: 700; font-size: 58px; line-height: 1;
  letter-spacing: -0.03em;
  color: var(--amber);
}
.nr-count-l { margin-top: 5px; font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.nr-count-date { margin-top: 6px; font-family: var(--mono); font-size: 12px; color: var(--ink-faint); }
.nr-note { font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.nr-cal {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 14px;
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  font-size: 13.5px; font-weight: 500;
  text-decoration: none;
  transition: border-color .15s;
}
.nr-cal::before { content: "🗓"; font-size: 14px; }
.nr-cal:hover { border-color: var(--ink); }

.typing {
  align-self: flex-start;
  display: inline-flex; gap: 5px;
  padding: 15px 18px;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 5px 16px 16px 16px;
}
.typing i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-faint);
  animation: tdot 1.2s infinite;
}
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
html.reduce .typing i, html.reduce .demo-typing i { animation: none; }
@keyframes tdot { 30% { transform: translateY(-4px); opacity: .5; } }

.chat-pills {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 14px 24px 4px;
}
.pill {
  padding: 11px 16px; /* ≥44px tap target */
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  font-size: 13.5px; font-weight: 500;
  color: var(--ink-soft);
  transition: border-color .15s, color .15s, background .15s;
}
.pill:hover { border-color: var(--ink); color: var(--ink); background: var(--card); }
.pill-upload { display: inline-flex; align-items: center; gap: 6px; }
.pill-upload svg { width: 14px; height: 14px; flex-shrink: 0; }
.chat-form {
  display: flex; gap: 10px;
  padding: 14px 24px 6px;
}
.chat-attach {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  width: 46px; height: 46px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink-soft);
  transition: border-color .15s, color .15s, background .15s;
}
.chat-attach:hover { border-color: var(--ink); color: var(--ink); background: #fff; }
.chat-input {
  flex: 1; min-width: 0;
  padding: 13px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  font: inherit; font-size: 16px; /* 16px+ prevents iOS Safari focus auto-zoom */
  transition: border-color .2s, background .2s;
}
.chat-input:focus { border-color: rgba(19,18,16,.6); background: #fff; }
.chat-input:focus:not(:focus-visible) { outline: none; }
.chat-send { padding: 0 18px; border-radius: 12px; }
.ai-ack {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 8px 24px 0;
  color: var(--ink-soft);
  font-size: 11.5px;
  line-height: 1.45;
  cursor: pointer;
}
.ai-ack input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--green);
}
.ai-ack a { color: var(--green); text-underline-offset: 2px; }
.ai-ack-error {
  padding: 6px 24px 0 51px;
  color: #9D2A21;
  font-size: 11.5px;
  line-height: 1.4;
}
.chat-foot {
  padding: 10px 24px 18px;
  font-size: 12px;
  color: var(--ink-faint);
}

.mobile-actions { display: none; }
/* ============================================================
   CARRIER MARKET — finite, static proof
   ============================================================ */
.carriers {
  padding: 84px 0 76px;
  overflow: hidden;
  max-width: 100%;
}
.carriers-h {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(26px, 3.2vw, 36px);
  letter-spacing: -0.025em;
  margin: 0 auto 38px;
  max-width: 20em;
}
.carrier-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
}
.carrier-grid li {
  min-width: 0;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--paper);
}
.carrier-grid img {
  height: 26px;
  width: auto;
  max-width: 122px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .68;
  transition: filter .25s, opacity .25s;
}
.carrier-grid li:hover img { filter: none; opacity: 1; }
.carrier-note {
  max-width: 660px;
  margin: 24px auto 0;
  color: var(--ink-faint);
  font-size: 12.5px;
  line-height: 1.55;
  text-align: center;
}
/* ============================================================
   HOW IT WORKS
   ============================================================ */
.how {
  padding: 100px 0 110px;
  background: var(--paper-deep);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px;
  margin-top: 56px;
  position: relative;
}
.steps::before {
  content: "";
  /* runs from the center of circle 01 to the center of circle 03 */
  position: absolute; top: 17px; left: 18px; right: calc(33.33% - 47px);
  height: 1px;
  background: var(--line);
}
.step { position: relative; padding-top: 52px; }
.step-num {
  position: absolute; top: 0; left: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: var(--paper-deep);
  border: 1px solid var(--line);
  border-radius: 50%;
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  z-index: 1;
}
.step h3 {
  font-family: var(--display);
  font-weight: 700; font-size: 21px;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.step p { font-size: 15px; color: var(--ink-soft); }
   MARKET PULSE — sourced CA market-share (Tier 1)
   ============================================================ */
.market { padding: 100px 0 110px; }
.market-intro {
  margin-top: 18px;
  max-width: 40em;
  font-size: 16px; line-height: 1.6;
  color: var(--ink-soft);
}
.market-tabs {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 34px;
}
.market-tab {
  padding: 9px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  font-family: var(--mono);
  font-size: 12px; font-weight: 500;
  letter-spacing: .04em;
  color: var(--ink-soft);
  transition: background .2s, color .15s, border-color .15s;
}
.market-tab:hover:not([disabled]) { border-color: var(--ink); color: var(--ink); }
.market-tab.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.market-body {
  display: block;
  margin-top: 28px;
  padding: 34px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
}
.market-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
.market-panel[data-line-panel="business"] { grid-template-columns: 1fr; gap: 28px; }
.rank { display: flex; flex-direction: column; gap: 14px; }
.rank li {
  display: grid;
  grid-template-columns: 150px 1fr 48px;
  align-items: center;
  gap: 14px;
  font-size: 14px;
}
.rank-name { font-weight: 500; color: var(--ink); }
.rank-track {
  height: 8px;
  background: var(--paper-deep);
  border-radius: 999px;
  overflow: hidden;
}
.rank-fill {
  display: block; height: 100%;
  background: var(--green);
  border-radius: 999px;
  transform-origin: 0 50%;
  transform: scaleX(0);
  transition: transform 1s var(--ease);
}
.market-body.in-view .rank-fill { transform: scaleX(1); }
html.reduce .rank-fill { transform: scaleX(1); transition: none; }
.rank-pct {
  font-family: var(--mono); font-size: 12.5px;
  color: var(--ink-soft);
  text-align: right;
}
.rank-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px 34px;
}
.rank-mini h3 {
  font-family: var(--mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 12px;
}
.rank-sm { gap: 9px; }
.rank-sm li { grid-template-columns: 128px 1fr 42px; gap: 10px; font-size: 12.5px; }
.rank-sm .rank-pct { font-size: 11.5px; }
.rank-sm .rank-track { height: 6px; }
@media (max-width: 700px) {
  .rank-grid { grid-template-columns: 1fr; }}

.market-caveat {
  padding: 22px 24px;
  background: var(--paper-deep);
  border-radius: var(--r-md);
  border: 1px solid var(--line-soft);
}
.market-caveat h2 {
  font-family: var(--mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 12px;
}
.market-caveat p {
  font-size: 14px; line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 12px;
}
.market-caveat p:last-child { margin-bottom: 0; }
.market-caveat strong { color: var(--ink); font-weight: 600; }
.market-source {
  margin-top: 20px;
  font-size: 12px; line-height: 1.6;
  color: var(--ink-faint);
  max-width: 60em;
}
.market-cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--line-soft);
}
.market-cta span {
  font-family: var(--display);
  font-weight: 600; font-size: 19px;
  letter-spacing: -0.02em;
}
.market-cta em { font-style: italic; color: var(--green); }

/* ============================== GOOGLE REVIEWS (agency social proof) ==============================
   #google-reviews on the homepage, filled by /api/reviews (Bollinsure GBP).
   Hidden until configured + 5 reviews; display-only (no review JSON-LD). */
.greviews { padding: 96px 0 10px; }
.greviews-sub { margin-top: 14px; max-width: 40em; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.greviews-sub strong { color: var(--ink); font-weight: 600; }
.greviews-sub a, .greviews-foot a { color: var(--green); }
.greviews-summary { display: flex; align-items: baseline; gap: 12px; margin-top: 18px; }
.greviews-stars { color: var(--green); font-size: 19px; letter-spacing: 2px; }
.greviews-count { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); }
.greviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 22px; }
.greviews-card {
  margin: 0; padding: 20px 22px;
  background: var(--paper-deep);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  display: flex; flex-direction: column; gap: 10px;
}
.greviews-card-stars { color: var(--green); font-size: 13px; letter-spacing: 2px; }
.greviews-card blockquote { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
.greviews-card figcaption { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); }
.greviews-foot { margin-top: 18px; font-size: 12px; line-height: 1.6; color: var(--ink-faint); }

@media (max-width: 860px) {
  .market-body { padding: 24px; }
  .market-panel { grid-template-columns: 1fr; gap: 28px; }
  .rank li { grid-template-columns: 120px 1fr 44px; gap: 10px; font-size: 13px; }}

/* ============================================================
   HOW WE'RE DIFFERENT — comparison table
   ============================================================ */
.compare {
  padding: 100px 0 110px;
  background: var(--paper-deep);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.compare-table th, .compare-table td {
  padding: 15px 18px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line-soft);
}
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td { border-bottom: 0; }
.compare-table thead th {
  font-family: var(--mono);
  font-size: 11.5px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint);
  background: #F7F5EF;
  border-bottom: 1px solid var(--line);
}
.compare-table tbody th[scope="row"] {
  font-weight: 600;
  color: var(--ink);
  width: 22%;
}
.compare-table td { color: var(--ink-soft); }
.compare-table thead .compare-us { color: var(--green); }
.compare-table .compare-us a { color: var(--green); }

/* ============================================================
   HUMAN + AI (dark)
   ============================================================ */
.human {
  padding: 120px 0;
  background:
    radial-gradient(1000px 600px at 85% 0%, rgba(5,150,105,.07), transparent 55%),
    var(--dark);
  color: var(--dark-ink);
}
.human-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 70px;
  align-items: center;
}
.human-p {
  margin-top: 22px;
  max-width: 34em;
  font-size: 16.5px; line-height: 1.7;
  color: var(--dark-soft);
}
.human-p:first-of-type { margin-top: 30px; }
.human-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.human-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.stat {
  padding: 26px 24px 22px;
  border: 1px solid var(--dark-line);
  border-radius: var(--r-md);
  background: rgba(243,239,228,.03);
}
.stat-n {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(34px, 3.6vw, 46px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--dark-ink);
}
.stat-sm { font-size: .45em; letter-spacing: .04em; }
.stat-l {
  display: block;
  margin-top: 10px;
  font-size: 13px; line-height: 1.5;
  color: var(--dark-soft);
}
.human-licenses {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 64px;
  padding-top: 34px;
  border-top: 1px solid var(--dark-line);
}
.lic-chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 16px;
  border: 1px solid var(--dark-line);
  border-radius: 999px;
  font-family: var(--mono); font-size: 12px;
  color: var(--dark-soft);
}
.lic-chip img { width: 18px; height: auto; }
a.lic-verify {
  text-decoration: none;
  color: var(--dark-ink);
  border-color: rgba(243,239,228,.3);
  transition: border-color .15s;
}
a.lic-verify:hover { border-color: var(--dark-ink); }
a.lic-verify svg { width: 11px; height: 11px; margin-left: 2px; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.quote-pin { height: 220vh; position: relative; }
html.reduce .quote-pin, html:not(.js) .quote-pin { height: auto; }
.quote-sticky {
  position: sticky; top: 0;
  min-height: 100vh;
  display: flex; align-items: center;
  padding: 80px 0;
}
html.reduce .quote-sticky, html:not(.js) .quote-sticky { position: static; min-height: 0; }
.quote-fill {
  max-width: 900px;
  margin: 26px auto 0;
  text-align: center;
}
.quote-fill p {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(28px, 4.4vw, 50px);
  line-height: 1.18;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
.quote-fill .qw { color: rgba(19,18,16,.16); transition: color .18s linear; }
.quote-fill .qw.on { color: var(--ink); }
.quote-fill .qw.cur { color: var(--green-bright); }
html.reduce .quote-fill .qw, html:not(.js) .quote-fill .qw { color: var(--ink); }
.quote-attr {
  margin-top: 30px;
  text-align: center;
  font-family: var(--mono); font-size: 13px;
  color: var(--ink-faint);
}
.quote-solo blockquote {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(21px, 2.6vw, 30px);
  line-height: 1.32;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--ink);
}
.quote-solo figcaption {
  margin-top: 22px;
  font-family: var(--mono); font-size: 12.5px;
  color: var(--ink-faint);
}
.quote-card blockquote {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
}
.quote-card figcaption {
  margin-top: 18px;
  font-family: var(--mono); font-size: 12.5px;
  color: var(--ink-faint);
}

/* ============================================================
   FAQ
   ============================================================ */
.faq {
  padding: 100px 0 110px;
  background: var(--paper-deep);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.faq-list { margin-top: 40px; }
.faq-list details {
  border-bottom: 1px solid var(--line);
}
.faq-list details:first-child { border-top: 1px solid var(--line); }
.faq-list summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 4px;
  font-family: var(--display);
  font-weight: 700; font-size: 18px;
  letter-spacing: -0.015em;
  cursor: pointer;
  list-style: none;
  transition: color .15s;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { color: var(--ink-soft); }
.faq-x {
  position: relative;
  flex-shrink: 0;
  width: 22px; height: 22px;
}
.faq-x::before, .faq-x::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 13px; height: 1.6px;
  background: var(--ink);
  transform: translate(-50%, -50%);
  transition: transform .3s var(--ease);
}
.faq-x::after { transform: translate(-50%, -50%) rotate(90deg); }
details[open] .faq-x::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-list details p {
  padding: 0 40px 24px 4px;
  color: var(--ink-soft);
  font-size: 15.5px;
  max-width: 46em;
}
.faq-list details a { color: var(--ink); }

/* ============================================================
   FINAL CTA
   ============================================================ */
.final {
  position: relative;
  padding: 130px 0 140px;
}
.final::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(19,18,16,.15) 1px, transparent 1.1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(700px 480px at 50% 45%, #000 25%, transparent 78%);
  -webkit-mask-image: radial-gradient(700px 480px at 50% 45%, #000 25%, transparent 78%);
  opacity: .5;
  pointer-events: none;
}
.final .wrap { position: relative; }
.final-tile { margin: 0 auto 26px; width: 88px; height: auto; }
.final-h {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(34px, 5.2vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.032em;
  text-wrap: balance;
}
.final-sub {
  margin: 22px auto 0;
  max-width: 480px;
  color: var(--ink-soft);
  font-size: 16.5px;
}
.final-ctas {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  margin-top: 34px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--dark-2);
  color: var(--dark-soft);
  padding: 64px 0 40px;
}
.footer-top {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 34px 60px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--dark-line);
}
.footer-brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.footer-tile { width: 40px; height: auto; }
.footer-word {
  font-family: var(--display);
  font-weight: 700; font-size: 19px; color: var(--dark-ink); letter-spacing: -0.02em;
}
.footer-word span { color: var(--dark-soft); }
.footer-links { display: grid; grid-template-columns: repeat(2, auto); gap: 8px 36px; }
.footer-links a {
  font-size: 14px; color: var(--dark-soft);
  text-decoration: none;
  transition: color .15s;
}
.footer-links a:hover { color: var(--dark-ink); }
.footer-contact { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.footer-contact a { color: var(--dark-ink); text-decoration: none; }
.footer-contact a:hover { text-decoration: underline; }
.footer-personal { max-width: 240px; font-size: 12.5px; line-height: 1.55; }
.footer-legal { padding-top: 30px; }
.footer-legal p {
  font-size: 12.5px; line-height: 1.65;
  max-width: 52em; /* readable measure (~60-70ch) for the compliance copy */
  margin-bottom: 10px;
}
.footer-copy { color: rgba(181,174,157,.7); }

/* ============================================================
   EMAIL MODAL
   ============================================================ */
.modal {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal-overlay {
  position: absolute; inset: 0;
  background: rgba(19,18,16,.42);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  animation: overlay-in .25s ease-out;
}
.modal-card {
  position: relative;
  width: 100%; max-width: 640px;
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  display: grid; grid-template-columns: 40% 1fr; overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift);
  animation: modal-in .35s var(--ease);
}
/* left brand rail — matches the quote-wizard family */
.modal-rail { display: flex; flex-direction: column; background: var(--dark); color: var(--dark-ink); padding: 30px 26px; min-height: 0; overflow-y: auto; }
.modal-rail-mark { width: 30px; height: 30px; }
.modal-rail-h { font-family: var(--serif); font-weight: 600; font-size: 22px; line-height: 1.22; letter-spacing: -.01em; margin-top: 26px; }
.modal-rail-sub { margin-top: 10px; font-size: 13px; line-height: 1.55; color: var(--dark-soft); }
.modal-rail-foot { margin-top: auto; padding-top: 22px; font-size: 11px; line-height: 1.5; color: var(--dark-soft); }
.modal-main { min-height: 0; overflow-y: auto; padding: 34px 32px 26px; }
html.reduce .modal-overlay, html.reduce .modal-card { animation: none; }
@keyframes overlay-in { from { opacity: 0; } }
@keyframes modal-in {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
}
.modal-close {
  position: absolute; top: 14px; right: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border: 0; border-radius: 50%;
  background: var(--paper);
  color: var(--ink-soft);
  transition: background .15s, color .15s;
}
.modal-close:hover { background: var(--paper-deep); color: var(--ink); }
.modal-card h3 {
  font-family: var(--serif);
  font-weight: 600; font-size: 24px;
  letter-spacing: -0.01em; line-height: 1.18; color: var(--ink);
  padding-right: 36px;
}
#gate-message {
  margin: 8px 0 0;
  font-size: 14.5px; line-height: 1.5;
  color: var(--ink-soft);
}
.modal-form { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.modal-input {
  width: 100%; box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  font: inherit; font-size: 16px; /* 16px+ prevents iOS Safari focus auto-zoom */
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.modal-input:hover { border-color: var(--ink-faint); }
.modal-input:focus-visible { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(var(--green-rgb),.14); }
.modal-input:focus:not(:focus-visible) { outline: none; }
.modal-note {
  margin-top: 14px;
  font-size: 12px;
  color: var(--ink-faint);
}
.gate-error {
  font-size: 13.5px; font-weight: 500;
  color: var(--rust);
}
.modal.modal-shake .modal-card { animation: shake .4s; }
html.reduce .modal.modal-shake .modal-card { animation: none; }
@keyframes shake {
  20% { transform: translateX(-6px); } 45% { transform: translateX(5px); }
  70% { transform: translateX(-3px); } 90% { transform: translateX(2px); }
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
@media (max-width: 680px) {
  .modal { padding: 0; align-items: stretch; }
  .modal-card { max-width: none; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .modal-rail { flex-direction: row; align-items: center; gap: 12px; padding: 14px 18px; overflow: visible; }
  .modal-rail-mark { width: 24px; height: 24px; }
  .modal-rail-h { margin: 0; font-size: 15px; }
  .modal-rail-sub, .modal-rail-foot { display: none; }
  .modal-close { background: transparent; color: var(--dark-ink); }
  .modal-close:hover { background: rgba(247,244,235,.16); color: #fff; }
  .modal-main { padding: 26px 20px 22px; }
}

/* ============================================================
   REVEAL SYSTEM
   ============================================================ */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}
html.js [data-reveal].revealed { opacity: 1; transform: none; }
html.reduce [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  html.js [data-reveal], html.js .hero-el {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
  .grain, .scroll-progress, .nav, .mobile-nav, .mobile-actions, .modal { display: none !important; }
  .quote-fill .qw { color: var(--ink) !important; }}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1023px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; } /* hamburger appears the moment the links disappear */
  .human-grid { grid-template-columns: 1fr; gap: 54px; }
  .carrier-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }}
@media (max-width: 860px) {
  .nav-actions .btn { display: none; }
  .steps { grid-template-columns: 1fr; gap: 38px; }
  .steps::before { display: none; }
  /* compact, not hidden — the AI disclosure stays visible on mobile */
  .tool-head-note { font-size: 10px; line-height: 1.3; max-width: 12em; text-align: right; }
  .quote-pin { height: 190vh; }}
@media (max-width: 700px) {
  .bp { display: none; } /* let text-wrap: balance set the mobile headline */
}
@media (max-width: 640px) {
  .wrap { padding: 0 20px; }
  .hero { padding-top: 132px; }
  .nav-phone { display: none; }
  .carrier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .carrier-grid li { min-height: 66px; padding: 15px 10px; }
  .carrier-grid img { max-width: 110px; }
  .msg { max-width: 92%; }
  .msg-ai { max-width: 100%; }
  .chat-pills, .chat-form, .chat-foot { padding-left: 16px; padding-right: 16px; }
  .chat-scroll { padding: 20px 16px 8px; }
  .human-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat { padding: 20px 16px 16px; }
  .footer-links { grid-template-columns: 1fr; }
  .modal-card { padding: 34px 22px 26px; }}
@media (max-width: 420px) {
  .human-stats { grid-template-columns: 1fr; }}

/* ============================================================
   2026 PRODUCT-LED REDESIGN
   Signature coverage brief, higher-contrast section rhythm, and
   finite interaction-led motion. Kept here as the active layer so
   legacy component rules above remain safe for legal subpages.
   ============================================================ */

/* ---------- Global refinement ---------- */
/* Type register: confident, not loud — the Linear/Mercury bar is 600-700
   weight with moderate negative tracking; sub-1.0 leading is reserved for
   single-line display moments only. */
.section-h {
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.03em;
  max-width: 18em;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 20px;
  font-size: 11px;
  letter-spacing: .17em;
}
/* Enterprise-grade buttons: soft rectangle, not full pill; a whisper of
   top-light on the primary so it reads alive without shouting */
.btn { border-radius: 12px; }
.btn-green { background: linear-gradient(180deg, #0D7757 0%, var(--green) 58%); }
.btn-green:hover { background: linear-gradient(180deg, #0A6349 0%, var(--green-hover) 58%); }

/* ---------- Navigation ---------- */
.nav-bar {
  max-width: 1360px;
  gap: 26px;
  padding: 18px 34px;
}
.nav::before {
  background: rgba(247, 245, 239, .88);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
}
.nav.scrolled .nav-bar { padding-top: 11px; padding-bottom: 11px; }
.brand { gap: 12px; }
.brand-tile { width: 37px; }
.brand-word,
.footer-word {
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .17em;
  line-height: 1;
}
.nav-links a {
  padding: 9px 13px;
  font-size: 13.5px;
}
.nav-actions .btn {
  padding: 11px 18px;
  box-shadow: 0 1px 2px rgba(var(--green-rgb),.25), 0 8px 20px rgba(var(--green-rgb),.18);
}

/* ---------- Split hero ---------- */
.hero {
  min-height: 0;
  display: block;
  padding: 150px 0 58px;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
}
.hero::before {
  inset: -12% -6% 0;
  background-image:
    linear-gradient(rgba(23,24,21,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23,24,21,.055) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(1150px 820px at 50% 34%, #000 18%, transparent 78%);
  -webkit-mask-image: radial-gradient(1150px 820px at 50% 34%, #000 18%, transparent 78%);
  opacity: .5;
}
.hero-aura {
  position: absolute;
  width: 900px;
  height: 900px;
  left: 50%;
  top: 300px;
  transform: translateX(-50%);
  z-index: -1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 42%, rgba(185,245,210,.5), rgba(185,245,210,.12) 44%, transparent 70%);
  filter: blur(16px);
  pointer-events: none;
}
.hero-grid {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-copy {
  min-width: 0;
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* centre the copy-column children that were left-aligned in the 2-col layout */
.hero-copy .hero-kicker { justify-content: center; }
.hero-copy .prompt-card { width: 100%; max-width: 680px; }
.hero-copy .cta-trust { justify-content: center; }
.hero-copy .triage-bar { text-align: center; }
.hero-copy .verticals { align-items: center; }
.hero-copy .doors,
.hero-copy .door-panel { justify-content: center; }
.hero-copy .hero-badges { justify-content: center; }
.hero-kicker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 25px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
/* Motion discipline: one pulsing dot on the page (the screener's live-dot).
   This one holds still — a resting page reads more expensive than a busy one. */
.signal-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green-bright);
  box-shadow: 0 0 0 3px rgba(22,154,109,.14);
}
.hero-h1 {
  max-width: 1160px;
  font-weight: 700; /* 800 + ultra-tight tracking read "loud"; 700/-.038 reads premium */
  font-size: clamp(52px, 6.5vw, 94px);
  line-height: .99;
  letter-spacing: -.038em;
  text-wrap: balance;
}
.hero-h1 .accent {
  display: inline; /* flows with the sentence — two lines max, Base44 scale */
  color: var(--green);
  font-weight: 700;
}
/* LCP: the H1 is the largest-contentful element — it must never start at
   opacity 0 (Chrome won't credit the paint until it's opaque). Transform-only
   reveal; the rest of the hero keeps the fade choreography. */
.hero-h1.hero-el { opacity: 1; filter: none; transform: none; }
html.js .hero-h1.hero-el { animation: hero-rise .7s var(--ease) backwards; animation-delay: .08s; }
/* this (0,3,1) rule out-specifies the generic reduced-motion kills — match it */
html.reduce .hero-h1.hero-el,
html:not(.js) .hero-h1.hero-el { animation: none; }
@keyframes hero-rise { from { transform: translateY(16px); } }
.hero-el { filter: blur(2px); }
/* delay chain lives in the base layer (html.js .X.hero-el list) — the
   redesign layer only softens the pre-animation blur */
@keyframes hero-in {
  to { opacity: 1; transform: none; filter: blur(0); }
}
.prompt-send {
  width: 48px;
  min-width: 0;
  height: 48px;
  padding: 0;
  flex-shrink: 0;
  border-radius: 13px;
  white-space: nowrap;
}
.prompt-send svg { flex: 0 0 auto; }
.cta-trust {
  justify-content: center;
  gap: 8px 17px;
  margin-top: 16px;
}
.cta-trust span { font-size: 12px; }
.hero-cta .btn { gap: 8px; }

/* The highest-intent visitor on the site holds a non-renewal notice with a
   deadline — their door gets its own bar, not a footnote in the trust row. */
.triage-bar { margin-top: 14px; }
.triage-bar a {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 18px;
  border: 1px solid rgba(146,97,10,.32);
  border-radius: 12px;
  background: rgba(146,97,10,.07);
  font-size: 13.5px; font-weight: 500;
  color: #7a5206; /* deepened amber — 13.5px normal text needs >=4.5:1 (--amber was 4.48) */
  text-decoration: none;
  transition: border-color .2s, background .2s, transform .25s var(--ease);
}
.triage-bar a:hover {
  border-color: var(--amber);
  background: rgba(146,97,10,.11);
  transform: translateY(-1px);
}
.triage-bar svg { width: 15px; height: 15px; flex-shrink: 0; }
.triage-bar strong { font-weight: 700; }
/* one-time attention pulse on the send arrow after a chip prefills the box */
@keyframes send-nudge {
  0%, 100% { box-shadow: 0 1px 2px rgba(var(--green-rgb),.25), 0 6px 16px rgba(var(--green-rgb),.24); }
  50% { box-shadow: 0 1px 2px rgba(var(--green-rgb),.3), 0 6px 16px rgba(var(--green-rgb),.3), 0 0 0 7px rgba(22,154,109,.22); }
}
.prompt-send.nudge { animation: send-nudge 1s var(--ease) 2; }
html.reduce .prompt-send.nudge { animation: none; }
.doors .door.is-active {
  color: var(--ink);
  font-weight: 600;
}

/* Goal selector and sequenced chat answers. */
.goal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.goal-grid .pill {
  min-height: 48px;
  justify-content: flex-start;
  text-align: left;
  white-space: normal;
}
.goal-grid[hidden] { display: none; }
.goal-more {
  grid-column: 1 / -1;
  margin-top: 2px;
}
.goal-more summary {
  width: fit-content;
  padding: 8px 2px;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
}
.goal-more summary:hover { color: var(--ink); }
.goal-more summary:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.goal-more-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 6px;
}
.ai-sequence-pending {
  display: none !important;
}

@media (max-width: 640px) {
  .goal-grid { grid-template-columns: 1fr; }
  .goal-grid .pill { width: 100%; }
  .goal-more { grid-column: auto; }
  .goal-more-options { grid-template-columns: 1fr; }
  .hero-cta .btn { width: 100%; justify-content: center; }}
.doors .door.is-active::before { content: "[\00a0"; color: var(--green); font-weight: 500; }
.doors .door.is-active::after { content: "\00a0]"; color: var(--green); font-weight: 500; }
.door.is-active {
  background: var(--ink);
  color: var(--paper);
}
.vertical:hover,
.vertical.is-active {
  border-color: rgba(var(--green-rgb),.35);
  background: var(--green-tint);
  color: var(--green-hover);
}
/* Attio-style panel settle: lays back slightly, then flattens as it fades in */
@keyframes panel-settle {
  from { transform: rotateX(10deg) scale(.975); }
  to { transform: rotateX(0) scale(1); }
}
html.js .product-window { animation: panel-settle 1s var(--ease) .5s backwards; }
html:not(.js) .product-window,
html.reduce .product-window { animation: none; transform: none; }
.window-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(247,244,235,.25);
}
.window-dots span:nth-child(2) { background: rgba(185,245,210,.52); }
.product-state i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #43D39B;
  box-shadow: 0 0 0 4px rgba(67,211,155,.1);
}
.preview-heading p {
  margin-bottom: 5px;
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.preview-heading > span {
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,254,250,.82);
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.preview-query p {
  padding-top: 3px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-soft);
}
.preview-progress span {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.preview-progress span:nth-child(2) { align-items: center; }
.preview-progress span:nth-child(3) { align-items: flex-end; }
.preview-progress i {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #FAF9F4;
  font-style: normal;
  font-size: 8px;
}
.preview-progress .is-done i {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}
.preview-progress .is-current i {
  border-color: rgba(var(--green-rgb),.35);
  background: var(--signal);
  color: var(--green-hover);
  box-shadow: 0 0 0 4px rgba(185,245,210,.42);
}
.risk-icon svg { width: 18px; height: 18px; }
.risk-row strong[data-risk-title] {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: -.01em;
}
.risk-row p {
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.5px;
  color: var(--ink-faint);
}
/* Brief sign-off — the payoff beat: a licensed human's signature draws in
   last, dramatizing "the AI reads, a broker owns the answer." */
.broker-review.brief-signoff {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 11px;
  padding: 11px 14px;
  border: 1px solid rgba(var(--green-rgb),.19);
  border-radius: 14px;
  background: linear-gradient(100deg, rgba(225,242,233,.96), rgba(245,252,248,.96));
}
.signoff-copy strong {
  display: block;
  font-size: 12px; line-height: 1.3; font-weight: 650;
  color: var(--ink);
}
.signoff-sig svg { width: 100%; height: auto; display: block; }
@keyframes sig-draw { to { stroke-dashoffset: 0; } }
html.reduce .sig-path { stroke-dashoffset: 0; animation: none; }
@keyframes scan-pass {
  0%, 12% { opacity: 0; transform: translateY(0); }
  18% { opacity: 1; }
  52% { opacity: .86; }
  62%, 100% { opacity: 0; transform: translateY(420px); }
}
.hero-product.is-updating .product-state i { animation: state-blink .65s ease infinite alternate; }
@keyframes state-blink { to { opacity: .35; } }

/* ---------- Contrast rhythm and product sections ---------- */
.tool-intro .section-h { max-width: 12em; }
.tool-shell {
  border-color: rgba(23,24,21,.18);
  border-radius: var(--r-lg);
  box-shadow: 0 4px 8px rgba(23,24,21,.06), 0 36px 100px rgba(23,24,21,.15);
}
.tool-head {
  min-height: 58px;
  padding: 13px 22px;
  border-bottom-color: var(--dark-line);
  background: var(--dark);
  color: var(--dark-ink);
}
.tool-head-note { color: var(--dark-soft); }
.tool-chat { min-height: 500px; background: var(--card); }
.chat-scroll { max-height: 520px; }
.chat-form { padding-top: 16px; }
.chat-input { background: #F4F2EB; }

.carriers {
  padding: 88px 0 78px;
  background: var(--card);
  border-bottom: 1px solid var(--line-soft);
}
.carriers-h {
  max-width: 16em;
  margin-bottom: 40px;
  font-size: clamp(34px, 4.1vw, 52px);
  line-height: 1.02;
  letter-spacing: -.04em;
}

.how {
  padding: 126px 0 136px;
  background: var(--paper);
}
.steps {
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 62px;
}
.steps::before { display: none; }
.step {
  min-height: 265px;
  padding: 28px 26px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: rgba(255,254,250,.72);
  transition: transform .35s var(--ease), border-color .25s, box-shadow .35s var(--ease);
}
.step:hover {
  transform: translateY(-4px);
  border-color: var(--line);
  box-shadow: var(--shadow-soft);
}
.step-num {
  position: static;
  width: 38px;
  height: 38px;
  margin-bottom: 48px;
  background: var(--dark);
  border-color: var(--dark);
  color: var(--dark-ink);
  /* lift the medallion off the card so it reads as a token, not a flat disc */
  box-shadow: 0 5px 14px rgba(23,24,21,.16);
}
.step:last-child .step-num { background: var(--green); border-color: var(--green); box-shadow: 0 5px 16px rgba(var(--green-rgb),.28); }
.step h3 { font-size: 23px; }


/* ---------- Outcomes — the arc from catch to fix ---------- */
.outcomes {
  padding: 126px 0 132px;
  background: var(--card);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.oc-card h3 {
  font-family: var(--display);
  font-weight: 700; font-size: 20px;
  letter-spacing: -0.02em;
  max-width: 11em; /* clears the corner tag */
  margin-bottom: 18px;
}
.oc-beat dt {
  font-family: var(--mono);
  font-size: 10px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 3px;
}
.oc-beat dd {
  margin: 0;
  font-size: 14px; line-height: 1.55;
  color: var(--ink-soft);
}
.oc-beat dd .sev { margin-right: 6px; vertical-align: 1px; }
.oc-beat.oc-fix dt { color: var(--green); }
.oc-beat.oc-fix dd { color: var(--ink); }
.oc-proof ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 32px;
}
.oc-proof li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 14px; line-height: 1.5;
  color: var(--dark-soft);
}
.oc-proof li .pi { margin-top: 3px; color: var(--signal); }
.oc-proof a { color: var(--dark-ink); }
@media (max-width: 860px) {
  .oc-proof ul { grid-template-columns: 1fr; }
  .outcomes { padding: 100px 0 108px; }}


/* ---------- Upload security / compliance band ---------- */
.upload-trust { padding: 104px 0 112px; }
.ut-grid {
  list-style: none; margin: 48px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.ut-item {
  padding: 28px 26px 24px;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
}
.ut-ic {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: 11px;
  background: var(--green-tint);
  color: var(--green);
  margin-bottom: 18px;
}
.ut-ic svg { width: 21px; height: 21px; }
.ut-item h3 {
  font-family: var(--display);
  font-weight: 700; font-size: 16px;
  letter-spacing: -.01em;
  margin: 0 0 8px;
}
.ut-item p { font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); margin: 0; }
.ut-foot { margin-top: 34px; font-size: 14px; color: var(--ink-soft); }
.ut-foot a { color: var(--green); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 900px) { .ut-grid { grid-template-columns: 1fr 1fr; }}
@media (max-width: 560px) { .ut-grid { grid-template-columns: 1fr; } .upload-trust { padding: 80px 0 88px; }}

/* Full-width "offering" stat leading the Human+AI grid */
.stat.stat-wide { grid-column: 1 / -1; background: rgba(185,245,210,.06); border-color: rgba(185,245,210,.24); }
.stat.stat-wide .stat-l { max-width: 44em; color: var(--dark-ink); opacity: .82; font-size: 13.5px; }

.human {
  padding: 126px 0 136px;
  background:
    radial-gradient(800px 560px at 86% 10%, rgba(67,211,155,.12), transparent 60%),
    var(--dark);
}
.human-grid { gap: 92px; }
.human-copy .section-h { max-width: 11.5em; font-size: clamp(42px, 5vw, 64px); }
.human-p { font-size: 16px; }
.stat {
  min-height: 150px;
  border-radius: 18px;
  background: rgba(247,244,235,.035);
}
.stat-n { color: var(--signal); }

.quote-pin { height: 175vh; }
.quote-fill p { font-size: clamp(34px, 5vw, 62px); line-height: 1.08; }
.faq { padding: 126px 0 136px; }
.faq-list summary { padding: 25px 4px; font-size: 19px; }

.final {
  padding: 150px 0 160px;
  background:
    radial-gradient(700px 420px at 50% 52%, rgba(185,245,210,.38), transparent 72%);
}
.final-h { font-weight: 700; font-size: clamp(46px, 6vw, 72px); line-height: 1.0; letter-spacing: -.035em; }
.final-tile { width: 72px; }
.footer { padding-top: 74px; }
.footer-word { color: var(--dark-ink); }

/* ---------- Responsive composition ---------- */
@media (max-width: 1120px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(410px, .9fr); gap: 38px; }
  .hero-h1 { font-size: clamp(54px, 6.3vw, 76px); }
  .human-grid { gap: 54px; }}

@media (max-width: 960px) {
  .hero { min-height: 0; padding: 140px 0 90px; }
  .hero::before {
    mask-image: radial-gradient(720px 680px at 50% 64%, #000 10%, transparent 76%);
    -webkit-mask-image: radial-gradient(720px 680px at 50% 64%, #000 10%, transparent 76%);
  }
  .hero-aura { right: auto; left: 50%; top: 380px; }
  .hero-copy { max-width: 760px; }
  .hero-h1 { max-width: 740px; font-size: clamp(58px, 9vw, 82px); }
  .catch-card { grid-column: span 6; }
  .catch-card:nth-child(1), .catch-card:nth-child(2) { grid-column: span 6; }
  .catch-card:nth-child(7) { grid-column: 1 / -1; } /* odd count: last card full-width, no orphan */
}

@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr; gap: 12px; }
  .step { min-height: 0; }
  .step-num { margin-bottom: 28px; }
  .tool-chat { min-height: 460px; }
  .quote-pin { height: 150vh; }}

@media (max-width: 700px) {
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  body.modal-open { padding-bottom: 0; }
  .mobile-actions {
    position: fixed;
    z-index: 190;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: rgba(255, 254, 250, .94);
    box-shadow: 0 -12px 36px rgba(17, 26, 22, .12);
    backdrop-filter: blur(14px);
  }
  .mobile-actions .btn { min-height: 48px; }
  .mobile-actions-call {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 82px;
    min-height: 48px;
    padding: 0 20px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--green);
    background: #fff;
    font-size: 14px;
    font-weight: 650;
    text-decoration: none;
  }
  .modal-open .mobile-actions { display: none; }
  .nav-bar { padding-left: 20px; padding-right: 20px; }
  .brand-tile { width: 34px; }
  .hero { padding-top: 122px; }
  .hero-h1 { font-size: clamp(48px, 13vw, 68px); line-height: .96; }
  .tool-section, .how, .human, .faq { padding-top: 100px; padding-bottom: 108px; }
  .carriers { padding-top: 82px; padding-bottom: 72px; }
  .section-h { font-size: clamp(35px, 10vw, 48px); }}

@media (max-width: 560px) {
  .hero-h1 { font-size: clamp(43px, 12.6vw, 59px); }
  .hero-kicker { font-size: 9.5px; }
  .prompt-send { width: 44px; height: 44px; } /* icon-only below 560px; aria-label carries it */
  .triage-bar a { font-size: 12.5px; padding: 9px 14px; }
  .preview-heading > span { display: none; }
  .risk-row p { max-width: 165px; }
  .broker-review.brief-signoff { padding: 11px 13px; gap: 10px; }
  .ai-ack, .ai-ack-error { padding-left: 16px; padding-right: 16px; }
  .final { padding: 112px 0 120px; }}

@media (max-width: 380px) {
  .brand-word { letter-spacing: .13em; }
  .hero-h1 { font-size: 42px; }
  .risk-row p { max-width: 118px; }}

html.reduce .signal-dot,
html.reduce .product-scan,
html.reduce .hero-product.is-updating .product-state i { animation: none; }
html.reduce .product-scan { display: none; }

/* Defense in depth: the html.reduce class comes from an inline script — if JS
   is blocked or errors, this pure-CSS mirror still honors the OS setting. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-el, html.js .hero-el, html.js .hero-h1.hero-el { opacity: 1; transform: none; filter: none; animation: none; }
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .product-window, html.js .product-window { animation: none; transform: none; }
  .live-dot, .typing i,
  .prompt-send.nudge { animation: none !important; }
  .rank-fill { transform: scaleX(1); transition: none; }
  .quote-fill .qw { color: var(--ink); }
  .reading-beam, .hero-h1 .hw { animation: none !important; }
  .reading-pin { height: auto; }
  .reading-sticky { position: static; height: auto; }
  html.js .reading-chips [data-chip] { opacity: 1; transform: none; }
  .reading-doclines [data-hl] { background: rgba(22,154,109,.15); border-left-color: var(--green); color: var(--ink); }
  .reading-readout { display: none; }}

@media print {
  .hero-aura, .product-scan { display: none !important; }
  .hero { min-height: 0; }
  .hero-grid { grid-template-columns: 1fr; }}

/* ============================================================
   STANDALONE RESOURCE PAGES (market.html)
   Its header uses a trimmed .nav-links-page that must stay visible
   below 1023px (the base .nav-links hides there and this page has no
   hamburger); the CTA stays reachable too. Links collapse under 600px,
   where the brand logo (→ home) + CTA carry navigation.
   ============================================================ */
.page-market .nav-links-page { display: flex !important; gap: 4px; }
.page-market .nav-actions .btn { display: inline-flex !important; }
.market-page { padding-top: 138px; }
@media (max-width: 600px) {
  .page-market .nav-links-page { display: none !important; }
  .market-page { padding-top: 112px; }}

/* ============================================================
   TESTIMONIAL — scroll follow-along (real client review)
   Reuses the .quote-pin / .qw word-fill machinery, sized down for a
   full paragraph rather than a one-line statement.
   ============================================================ */
.quote-scroll {
  position: relative;
  /* a faint green-tinted "room" (Apollo/Charma) gives the one real review its
     own space between the two paper sections around it */
  background:
    radial-gradient(920px 520px at 50% 32%, rgba(185,245,210,.17), transparent 70%),
    var(--paper);
}
.quote-scroll .wrap { text-align: center; }
.quote-scroll .quote-pin { height: 150vh; }
.quote-scroll .eyebrow { margin-bottom: 28px; }
.quote-scroll .quote-fill { max-width: 900px; margin: 0 auto; }
/* oversized display-serif quotation mark, the Apollo/Charma signature */
.quote-scroll .quote-fill::before {
  content: "\201C";
  display: block;
  margin: 0 auto -0.28em;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(96px, 13vw, 168px);
  line-height: .8;
  color: var(--green-bright);
  opacity: .26;
}
.quote-scroll .quote-fill p {
  font-size: clamp(26px, 3.8vw, 46px);
  line-height: 1.3;
  letter-spacing: -0.022em;
}
.quote-scroll .quote-attr { margin-top: 34px; }
@media (max-width: 640px) {
  .quote-scroll .quote-pin { height: auto; }
  .quote-scroll .quote-sticky { position: static; min-height: 0; padding: 96px 0; }
  .quote-scroll .qw { color: var(--ink); }
  .quote-scroll .quote-fill p { font-size: clamp(22px, 6vw, 28px); line-height: 1.38; }}
/* never trap scroll under reduced motion / no-JS — collapse the runway */
html.reduce .quote-scroll .quote-pin,
html:not(.js) .quote-scroll .quote-pin { height: auto; }

/* Live-streaming intro: a caret blinks while the brief is being written */
.ai-streaming .ai-intro::after {
  content: "";
  display: inline-block;
  width: 2px; height: 1.05em;
  margin-left: 2px;
  vertical-align: -2px;
  background: var(--green-bright);
  animation: caret 1s steps(1) infinite;
}
html.reduce .ai-streaming .ai-intro::after { animation: none; }

/* Findings / rec / CTAs reveal one after another once the intro finishes
   typing — the brief writes itself out instead of appearing all at once. */
@keyframes aiReveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ai-reveal { animation: aiReveal .42s var(--ease, cubic-bezier(.22, .8, .28, 1)) both; }
html.reduce .ai-reveal { animation: none; }

/* ============================================================
   BROKER REVIEW — seamless one-click handoff in the AI response
   ============================================================ */
.broker-review-cta {
  margin: 14px 0 4px;
  padding: 14px;
  border: 1px solid rgba(var(--green-rgb),.22);
  border-radius: var(--r-md);
  background: rgba(225,242,233,.55);
}
.broker-review-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border: 0; border-radius: 10px;
  background: var(--green);
  color: #fff; font-weight: 600; font-size: 15px;
  box-shadow: 0 2px 8px rgba(var(--green-rgb),.18);
  transition: background .2s;
}
.broker-review-btn:hover {
  background: var(--green-hover);
}
.broker-review-note {
  margin-top: 9px;
  font-size: 12.5px; line-height: 1.5;
  color: var(--ink-soft);
}
.broker-review-cta.sent {
  border-color: rgba(var(--green-rgb),.3);
  background: var(--green-tint);
}
.broker-review-sent {
  margin: 0;
  font-size: 14px; line-height: 1.5; font-weight: 500;
  color: var(--green-hover);
}

/* ---------- Classic serif on the big headlines only ----------
   Body/nav/buttons/eyebrows stay on the clean sans (--display=Geist); the
   large headlines use the classic serif (--serif = Iowan Old Style / Georgia),
   a serif-headline-over-sans pattern. Relaxed tracking suits the serif. */
.hero-h1,
.section-h,
.final-h,
.human-copy .section-h,
.quote-fill p {
  font-family: var(--serif);
  font-optical-sizing: auto;
  letter-spacing: -0.018em;
  font-weight: 600;
}


/* ============================================================
   HERO-EMBEDDED CHAT + billion-dollar polish pass
   (chat lives in the hero; demos follow as the first band)
   ============================================================ */
.hero { padding: 138px 0 72px; }
/* the copy column must track the wrap, never the chat form's intrinsic
   min-content (the input's default size would force ~390px on phones) */
.hero-copy { width: 100%; }
.chat-form, .chat-form .chat-input { min-width: 0; }
.hero .tool-shell {
  width: 100%;
  max-width: 880px;
  margin: 42px auto 0;
  text-align: left;
}
/* the composer is the brightest surface on the page */
.hero .tool-shell {
  border-color: rgba(23,24,21,.16);
  box-shadow:
    0 1px 0 rgba(255,255,255,.85) inset,
    0 2px 4px rgba(23,24,21,.05),
    0 34px 90px -18px rgba(23,24,21,.22);
}
/* focus halo on the live composer (additive — keyboard rings unchanged) */
.chat-form:focus-within .chat-input { outline: none; }
.hero .tool-shell:focus-within {
  border-color: rgba(var(--green-rgb),.45);
  box-shadow:
    0 1px 0 rgba(255,255,255,.85) inset,
    0 2px 4px rgba(23,24,21,.05),
    0 34px 90px -18px rgba(23,24,21,.2),
    0 0 0 4px rgba(22,154,109,.1);
  transition: border-color .2s, box-shadow .25s var(--ease);
}
/* goal micro-kicker */
.goal-kicker {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0 0 2px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
/* send button micro-physics */
.chat-send { transition: background .2s, transform .18s var(--ease), box-shadow .2s; }
.chat-send:hover { transform: scale(1.05); }
.chat-send:active { transform: scale(.94); }
html.reduce .chat-send:hover, html.reduce .chat-send:active { transform: none; }
/* tactile press on every button */
.btn:active { transform: scale(.975); }
html.reduce .btn:active { transform: none; }
/* eyebrow hairline dash — one quiet system across every section */
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: .55;
}
.eyebrow.center::before { display: none; } /* centered eyebrows stay symmetric */
@media (max-width: 700px) {
  .hero { padding-top: 118px; }
  .hero .tool-shell { margin-top: 30px; }}


/* ============================================================
   READING SCENE — the signature "watch it read" moment.
   Pin is desktop-only (html.js, >900px); reduced-motion, no-JS,
   and narrow viewports render the static final composition.
   ============================================================ */
.reading { padding: 110px 0 0; }
.reading-intro { margin-bottom: 8px; text-align: center; }
.reading-intro .section-h { margin-left: auto; margin-right: auto; }
.reading-pin { position: relative; height: 230vh; }
.reading-sticky {
  position: sticky; top: 0;
  height: 100vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.reading-stage {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 28px;
  text-align: center; /* centers the readout + note; the grid resets its cells */
  transform-origin: 50% 50%;
}
.reading-readout {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 0 0 18px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint);
}
.reading-track {
  display: inline-block; width: 110px; height: 2px;
  background: rgba(23,24,21,.14); border-radius: 2px; overflow: hidden;
}
.reading-track i {
  display: block; width: 100%; height: 100%;
  background: var(--green-bright);
  transform: scaleX(0); transform-origin: 0 50%;
}
/* Robust 2-column grid (never collapses/floats like flex-wrap did) */
.reading-row {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 34px;
  align-items: center;
  width: 100%;
  text-align: left;
}
.reading-doc {
  position: relative;
  width: 100%;
  height: min(60vh, 540px);
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
.reading-doc-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(23,24,21,.1);
  background: #F3F0E7;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .1em; color: var(--ink-faint);
}
.reading-doc-body { position: relative; height: calc(100% - 41px); overflow: hidden; padding: 0 24px; }
.reading-doclines {
  font-family: var(--mono); font-size: 11.5px; line-height: 2.05;
  color: var(--ink-soft);
  padding: 22px 0 60px;
  will-change: transform;
}
.reading-doclines p { margin: 0; }
.reading-doclines .rd-h { color: var(--ink); font-weight: 500; margin-top: 14px; }
.reading-doclines .rd-h:first-child { margin-top: 0; }
.reading-doclines [data-hl] {
  margin: 6px 0; padding: 4px 10px;
  border-left: 3px solid transparent; border-radius: 4px;
  transition: background .5s, border-color .5s, color .5s;
}
.reading-doclines [data-hl].is-hl {
  background: rgba(22,154,109,.15);
  border-left-color: var(--green);
  color: var(--ink);
}
.reading-beam {
  position: absolute; left: 0; right: 0; top: 37%; height: 44px;
  background: linear-gradient(180deg, transparent, rgba(22,154,109,.12) 40%, rgba(22,154,109,.12) 60%, transparent);
  border-top: 1px solid rgba(var(--green-rgb),.45);
  border-bottom: 1px solid rgba(var(--green-rgb),.45);
  animation: beam-pulse 2.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes beam-pulse { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
html.reduce .reading-beam { animation: none; }
.reading-fade { position: absolute; left: 0; right: 0; pointer-events: none; }
.reading-fade-t { top: 0; height: 40px; background: linear-gradient(0deg, transparent, var(--card)); }
.reading-fade-b { bottom: 0; height: 70px; background: linear-gradient(180deg, transparent, var(--card)); }
.reading-chips {
  display: flex; flex-direction: column; gap: 14px; justify-content: center;
  min-width: 0;
}
.reading-chip {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 18px 50px rgba(23,24,21,.12);
}
.reading-chip .rc-meta {
  display: flex; justify-content: space-between; gap: 12px;
  margin: 0;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  color: var(--green);
}
.reading-chip .rc-meta span + span { color: var(--ink-faint); }
.reading-chip h3 { margin: 8px 0 5px; font-size: 16px; font-weight: 650; letter-spacing: -0.01em; }
.reading-chip .rc-body { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink-soft); }
.reading-chip-sum {
  display: flex; align-items: center; gap: 14px;
  background: var(--green); color: #F7F5EF;
  border-color: transparent;
  box-shadow: 0 24px 70px rgba(8,122,90,.35);
}
.reading-chip-sum p { margin: 0; font-size: 13.5px; line-height: 1.5; }
.rc-check {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(247,245,239,.14); color: var(--signal);
}
.reading-note {
  display: block;
  width: 100%;
  max-width: 60em;
  margin: 22px auto 0;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; line-height: 1.6;
  color: var(--ink-faint);
  text-align: center;
}
/* JS pin choreography: chips hidden until their scroll cue (desktop only) */
html.js .reading-chips [data-chip] {
  opacity: 0;
  transform: translateX(26px) scale(.97);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
html.js .reading-chips .reading-chip-sum { transform: translateY(16px); }
html.js .reading-chips [data-chip].is-on { opacity: 1; transform: none; }
/* Static composition: no pin, everything visible, highlights on */
html.reduce .reading-pin, html:not(.js) .reading-pin { height: auto; }
html.reduce .reading-sticky, html:not(.js) .reading-sticky { position: static; height: auto; padding: 26px 0 0; }
html.reduce .reading-chips [data-chip], html:not(.js) .reading-chips [data-chip] { opacity: 1; transform: none; }
html.reduce .reading-doclines [data-hl], html:not(.js) .reading-doclines [data-hl] {
  background: rgba(22,154,109,.15); border-left-color: var(--green); color: var(--ink);
}
html.reduce .reading-readout, html:not(.js) .reading-readout { display: none; }
@media (max-width: 900px) {
  .reading { padding-top: 84px; }
  .reading-pin { height: auto !important; }
  .reading-sticky { position: static; height: auto; padding: 20px 0 0; }
  .reading-readout { display: none; }
  .reading-row { grid-template-columns: 1fr; gap: 22px; }
  .reading-doc { height: 460px; }
  /* neutralize any inline transforms left by the desktop pin (resize/rotate) */
  .reading-doclines, .reading-stage { transform: none !important; }
  .reading-beam { animation: none; }
  html.js .reading-chips [data-chip] { opacity: 1; transform: none; }
  .reading-doclines [data-hl] { background: rgba(22,154,109,.15); border-left-color: var(--green); color: var(--ink); }
  .reading-note { padding: 0 24px; }}

/* Hero H1 loads word by word — transform-only so the LCP element is never
   transparent (the same rule the block animation follows). */
html.js .hero-h1.hw-split { animation: none; }
html.js .hero-h1 .hw { display: inline-block; animation: hw-rise .7s var(--ease) backwards; }
@keyframes hw-rise { from { transform: translateY(.55em) rotate(1.2deg); } }
html.reduce .hero-h1 .hw, html:not(.js) .hero-h1 .hw { animation: none; }

/* ============================================================
   DEPTH POLISH — flagship-tier dimensionality on the two signature
   product surfaces (hero composer + reading scene). Resting depth is
   static so it survives everywhere; the settle motion is reduce-safe.
   ============================================================ */
/* Hero composer settles from a slight back-tilt into place on load,
   overriding the generic hero-in for this one element (same end state). */
@keyframes shell-settle {
  from { opacity: 0; transform: perspective(1800px) rotateX(9deg) translateY(28px) scale(.985); filter: blur(6px); }
  to   { opacity: 1; transform: perspective(1800px) rotateX(0) translateY(0) scale(1); filter: blur(0); }
}
html.js .hero .tool-shell.hero-el {
  transform-origin: 50% -30%;
  /* `both` (not `backwards`): base .hero-el is opacity:0, so the fill must hold
     the settled end-state after the run or the chat card vanishes. */
  animation: shell-settle .9s var(--ease) .32s both;
}
html.reduce .hero .tool-shell.hero-el,
html:not(.js) .hero .tool-shell.hero-el { animation: none; }

/* Deeper, layered resting shadow — more air under the brightest surface */
.hero .tool-shell {
  box-shadow:
    0 1px 0 rgba(255,255,255,.85) inset,
    0 2px 4px rgba(23,24,21,.05),
    0 18px 40px -20px rgba(23,24,21,.16),
    0 44px 110px -30px rgba(23,24,21,.24);
  transition: border-color .2s, box-shadow .25s var(--ease);
}
.hero .tool-shell:focus-within {
  border-color: rgba(var(--green-rgb),.45);
  box-shadow:
    0 1px 0 rgba(255,255,255,.85) inset,
    0 2px 4px rgba(23,24,21,.05),
    0 18px 40px -20px rgba(23,24,21,.16),
    0 44px 110px -30px rgba(23,24,21,.22),
    0 0 0 4px rgba(22,154,109,.1);
}

/* Reading scene: richer, more dimensional depth on the document + chips */
.reading-doc {
  box-shadow:
    0 2px 6px rgba(23,24,21,.06),
    0 30px 60px -24px rgba(23,24,21,.2),
    0 60px 130px -40px rgba(23,24,21,.28);
}
.reading-chip {
  box-shadow:
    0 1px 2px rgba(23,24,21,.05),
    0 16px 40px -18px rgba(23,24,21,.2);
}
.reading-chip-sum {
  box-shadow:
    0 2px 6px rgba(8,122,90,.2),
    0 26px 70px -24px rgba(8,122,90,.4);
}

/* ============================================================
   Quote wizard — a bespoke two-column intake (dark brand rail + form)
   ============================================================ */
.qwiz { position: fixed; inset: 0; z-index: 420; display: flex; align-items: center; justify-content: center; padding: 20px; }
.qw-overlay {
  position: absolute; inset: 0; background: rgba(19,18,16,.5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: overlay-in .25s ease-out;
}
.qw-card {
  position: relative; width: 100%; max-width: 760px;
  max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px);
  display: grid; grid-template-columns: 38% 1fr; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift); animation: modal-in .35s var(--ease);
}
.qw-close {
  position: absolute; top: 14px; right: 14px; z-index: 3; width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px; background: transparent; color: var(--ink-faint); cursor: pointer;
  transition: background .18s, color .18s;
}
.qw-close:hover { background: var(--paper-deep); color: var(--ink); }

/* left brand rail */
.qw-rail { display: flex; flex-direction: column; background: var(--dark); color: var(--dark-ink); padding: 30px 28px; min-height: 0; overflow-y: auto; }
.qw-rail-mark { width: 30px; height: 30px; }
.qw-rail-h { font-family: var(--serif); font-weight: 600; font-size: 23px; line-height: 1.22; letter-spacing: -.01em; margin-top: 26px; }
.qw-rail-sub { margin-top: 10px; font-size: 13px; line-height: 1.55; color: var(--dark-soft); }
.qw-steps { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.qw-steps li { display: flex; align-items: center; gap: 11px; font-size: 13.5px; font-weight: 500; color: var(--dark-soft); padding: 7px 0; transition: color .2s; }
.qw-step-dot { width: 9px; height: 9px; border-radius: 999px; border: 1.5px solid rgba(247,244,235,.32); flex-shrink: 0; transition: background .2s, border-color .2s, box-shadow .2s; }
.qw-steps li.active { color: var(--dark-ink); }
.qw-steps li.active .qw-step-dot { background: var(--green-bright); border-color: var(--green-bright); box-shadow: 0 0 0 4px rgba(22,154,109,.18); }
.qw-steps li.done .qw-step-dot { background: var(--green-bright); border-color: var(--green-bright); }
.qw-rail-foot { margin-top: auto; padding-top: 22px; font-size: 11px; line-height: 1.5; color: var(--dark-soft); }

/* right content column */
.qw-main { min-height: 0; overflow-y: auto; padding: 34px 34px 26px; }
.qw-h { font-family: var(--serif); font-weight: 600; font-size: 25px; line-height: 1.18; letter-spacing: -.01em; color: var(--ink); padding-right: 40px; }
.qw-sub { margin-top: 7px; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.qw-lines { display: flex; flex-direction: column; gap: 9px; margin-top: 20px; }
.qw-line {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: 15px 17px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--paper); cursor: pointer;
  transition: border-color .18s, background .18s, box-shadow .2s, transform .2s var(--ease);
}
.qw-line:hover { border-color: var(--green); background: var(--card); box-shadow: 0 10px 24px -14px rgba(var(--green-rgb),.45); transform: translateY(-1px); }
.qw-line-t { font-weight: 650; font-size: 15px; color: var(--ink); }
.qw-line-d { font-size: 12.5px; line-height: 1.4; color: var(--ink-soft); }
.qw-field { margin-top: 15px; }
.qw-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.qw-input {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 16px;
  padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--paper); color: var(--ink); transition: border-color .15s, box-shadow .15s;
}
.qw-input:hover { border-color: var(--ink-faint); }
.qw-input:focus-visible { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(var(--green-rgb),.14); }
.qw-textarea { resize: vertical; min-height: 54px; }
.qw-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.qw-chip {
  font: inherit; font-size: 13px; padding: 8px 13px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink-soft);
  transition: border-color .15s, background .15s, color .15s;
}
.qw-chip:hover { border-color: var(--ink); color: var(--ink); }
.qw-chip.on { background: var(--green-tint); border-color: var(--green); color: var(--green); font-weight: 550; }
.qw-error { margin-top: 10px; font-size: 13px; color: var(--rust); }
.qw-nav { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
.qw-back { font: inherit; font-size: 14px; font-weight: 500; color: var(--ink-soft); background: transparent; border: 0; cursor: pointer; padding: 6px 2px; }
.qw-back:hover { color: var(--ink); }
.qw-next {
  flex: 1; font: inherit; font-size: 15px; font-weight: 600; color: #fff;
  background: var(--green); border: 0; border-radius: var(--r-sm); padding: 13px 18px; cursor: pointer;
  box-shadow: 0 1px 2px rgba(var(--green-rgb),.25), 0 8px 20px rgba(var(--green-rgb),.18);
  transition: background .18s, transform .2s var(--ease);
}
.qw-next:hover { background: var(--green-hover); transform: translateY(-1px); }
.qw-next:disabled { opacity: .7; cursor: default; transform: none; }
.qw-trust { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 11.5px; line-height: 1.5; color: var(--ink-faint); }
.qw-done { padding: 6px 0; }
.qw-done-check { width: 50px; height: 50px; margin: 0 0 6px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--green-tint); color: var(--green); font-size: 25px; font-weight: 700; }

@media (max-width: 680px) {
  .qwiz { padding: 0; align-items: stretch; }
  .qw-card { max-width: none; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .qw-rail { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 6px 14px; padding: 14px 18px; overflow: visible; }
  .qw-rail-mark { width: 24px; height: 24px; }
  .qw-rail-h, .qw-rail-sub, .qw-rail-foot { display: none; }
  .qw-close { color: var(--dark-ink); }
  .qw-close:hover { background: rgba(247,244,235,.16); color: #fff; }
  .qw-steps { flex-direction: row; margin: 0 44px 0 auto; gap: 16px; }
  .qw-steps li { padding: 0; font-size: 12px; }
  .qw-main { padding: 24px 20px 22px; }
  .qw-h { font-size: 22px; }
}
/* line cards get a quiet chevron that leans in on hover */
.qw-line { position: relative; padding-right: 42px; }
.qw-line::after {
  content: "→"; position: absolute; right: 17px; top: 50%; transform: translateY(-50%);
  color: var(--ink-faint); opacity: 0; transition: opacity .2s, transform .2s var(--ease), color .2s;
}
.qw-line:hover::after { opacity: 1; color: var(--green); transform: translateY(-50%) translateX(3px); }
/* each step's content settles in as it renders (children are recreated per step) */
@keyframes qw-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.qw-body > * { animation: qw-in .3s var(--ease) both; }
@media (prefers-reduced-motion: reduce) {
  .qw-overlay, .qw-card, .qw-body > * { animation: none; }
  .qw-line, .qw-next, .qw-line::after { transition: none; }
}

/* ---- Findings CTA: talk to a broker / get a quote ---- */
.answer-cta { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.answer-cta-row { display: flex; flex-wrap: wrap; gap: 10px; }
.cta-btn {
  flex: 1 1 auto; min-width: 148px; text-align: center; text-decoration: none;
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  padding: 11px 16px; border-radius: var(--r-sm); border: 1px solid transparent;
  transition: background .18s, border-color .18s, color .18s, transform .2s var(--ease);
}
.cta-btn-primary { background: var(--green); color: #fff; box-shadow: 0 1px 2px rgba(var(--green-rgb),.25), 0 8px 18px rgba(var(--green-rgb),.16); }
.cta-btn-primary:hover { background: var(--green-hover); transform: translateY(-1px); }
.cta-btn-secondary { background: var(--card); color: var(--ink); border-color: var(--line); }
.cta-btn-secondary:hover { border-color: var(--green); color: var(--green); transform: translateY(-1px); }
.answer-cta-review { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 16px; margin-top: 10px; }
.cta-review-link { font: inherit; font-size: 13px; font-weight: 500; color: var(--ink-soft); background: transparent; border: 0; padding: 8px 0; min-height: 24px; cursor: pointer; text-align: left; }
.cta-review-link:hover { color: var(--green); text-decoration: underline; }
.cta-print-link::before { content: "↗"; margin-right: 6px; font-family: var(--mono); font-size: 11px; }
.answer-cta-note { margin-top: 10px; font-size: 11.5px; line-height: 1.5; color: var(--ink-faint); }
.pill-quote { border-color: rgba(var(--green-rgb),.4); color: var(--green); font-weight: 550; }

/* ---- Local Coverage Brief export ---- */
.print-brief { display: none; }
@media print {
  @page { margin: .58in; }
  body.printing-brief { padding: 0 !important; background: #fff !important; color: #171815; }
  body.printing-brief > :not(.print-brief) { display: none !important; }
  body.printing-brief > .print-brief {
    display: block !important;
    max-width: 7.2in;
    margin: 0 auto;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10.5pt;
    line-height: 1.48;
  }
  .print-brief p { margin: 0; }
  .print-brief-head { padding-bottom: 20pt; border-bottom: 1px solid #D8D5CB; }
  .print-brief-brand { display: flex; align-items: center; gap: 7pt; font-size: 9pt; letter-spacing: .16em; }
  .print-brief-mark { display: grid; place-items: center; width: 20pt; height: 20pt; border-radius: 50%; background: #0B6B4F; color: #fff; font-weight: 700; letter-spacing: 0; }
  .print-brief-kicker { margin-top: 22pt !important; color: #0B6B4F; font-size: 8pt; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
  .print-brief h1 { margin: 5pt 0 4pt; font-size: 25pt; line-height: 1.05; letter-spacing: -.02em; }
  .print-brief-date { color: #696A64; font-size: 8.5pt; }
  .print-brief-policy { padding: 12pt 0; border-bottom: 1px solid #E8E5DC; font-size: 8.5pt; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
  .print-brief-status { margin: 16pt 0; padding: 10pt 12pt; border: 1px solid #DCCCA7; border-radius: 7pt; background: #FBF7EC; }
  .print-brief-status strong { display: block; color: #80560C; }
  .print-brief-status p { margin-top: 2pt; color: #55564F; font-size: 9pt; }
  .print-brief-intro { margin: 18pt 0 !important; font-size: 12pt; }
  .print-brief-findings { margin: 0; padding: 0; list-style: none; }
  .print-brief-finding { break-inside: avoid; padding: 12pt 0; border-top: 1px solid #E8E5DC; }
  .print-brief-finding-meta { color: #0B6B4F; font-size: 8pt; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
  .print-brief-finding-text { margin-top: 4pt !important; font-size: 11pt; }
  .print-brief-finding-status { margin-top: 3pt !important; color: #696A64; font-size: 8.5pt; }
  .print-brief-next { break-inside: avoid; margin-top: 18pt; padding: 14pt; border-radius: 8pt; background: #E9F4EE; }
  .print-brief-next h2 { margin: 0 0 4pt; color: #0B6B4F; font-size: 11pt; }
  .print-brief-legal { margin-top: 24pt; padding-top: 12pt; border-top: 1px solid #B9B6AC; color: #55564F; font-size: 7.8pt; }
  .print-brief-legal p + p { margin-top: 5pt; }
}

/* ===== Booking popup — books on-site via the scheduler, no external redirect ===== */
.booking-card {
  position: relative; width: 100%; max-width: 560px;
  max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lift);
  animation: modal-in .35s var(--ease);
}
html.reduce .booking-card { animation: none; }
.booking-head { padding: 20px 22px 12px; }
.booking-h { font-weight: 700; font-size: 1.05rem; margin: 0 0 .2rem; color: var(--ink); }
.booking-sub { font-size: .9rem; color: var(--ink-faint); margin: 0; }
.booking-frame { flex: 1 1 auto; min-height: 560px; background: var(--paper-deep); }
.booking-frame iframe { display: block; width: 100%; height: 100%; min-height: 560px; border: 0; }
.booking-foot { font-size: .82rem; color: var(--ink-faint); text-align: center; margin: 0; padding: 10px 22px 16px; }
@media (max-width: 600px) {
  .booking-frame, .booking-frame iframe { min-height: 66vh; }
}

/* ============================== GUIDES (content library) ==============================
   Plain-English coverage guides. Reuses the market-page shell (nav, eyebrow, .section-h,
   .market-intro, .market-caveat, .market-source, .market-cta); this layer adds only the
   long-form prose and the hub cards. */
.guide-body { margin-top: 26px; max-width: 46em; }
.guide-body h2 {
  font-family: var(--display);
  font-size: 21px; font-weight: 600; letter-spacing: -0.015em;
  margin: 32px 0 10px;
}
.guide-body h2:first-child { margin-top: 0; }
.guide-body p { font-size: 15px; line-height: 1.7; color: var(--ink-soft); margin: 0 0 14px; }
.guide-body ul { margin: 0 0 16px; padding-left: 20px; }
.guide-body li { font-size: 15px; line-height: 1.65; color: var(--ink-soft); margin-bottom: 8px; }
.guide-body li strong, .guide-body p strong { color: var(--ink); font-weight: 600; }
.guide-body a { color: var(--green); }

.guide-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; margin-top: 30px; }
.guide-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 20px 22px;
  background: var(--paper-deep);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  text-decoration: none;
}
.guide-card:hover, .guide-card:focus-visible { border-color: var(--green); }
.guide-card .guide-tag {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-faint);
}
.guide-card h2 { font-family: var(--display); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); margin: 0; }
.guide-card p { font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); margin: 0; }

/* ============================================================
   CONTRACT REQUIREMENT CHECKER (contract-check.html)
   Standalone page; padding-top clears the fixed nav like .market-page.
   ============================================================ */
.cc { padding: 138px 0 110px; }
.cc .wrap { max-width: 900px; }
.cc-intro {
  max-width: 62ch; margin: 18px 0 0;
  font-size: 17px; line-height: 1.65; color: var(--ink-soft);
}
.cc-promises {
  list-style: none; margin: 30px 0 0; padding: 0;
  display: grid; gap: 10px;
}
.cc-promises li {
  position: relative; padding: 13px 16px 13px 40px;
  background: var(--green-tint); border-radius: var(--r-sm);
  font-size: 14.5px; line-height: 1.55; color: var(--ink-soft);
}
.cc-promises li::before {
  content: "✓"; position: absolute; left: 15px; top: 12px;
  color: var(--green); font-weight: 700;
}
.cc-promises strong { color: var(--ink); font-weight: 600; }

/* ---- form ---- */
.cc-form {
  margin-top: 34px; padding: 24px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-soft);
}
.cc-label {
  display: block; margin-bottom: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-faint);
}
.cc-textarea {
  width: 100%; padding: 15px 16px; box-sizing: border-box;
  font-family: var(--mono); font-size: 13.5px; line-height: 1.6;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  resize: vertical; min-height: 190px;
}
.cc-textarea:focus-visible {
  outline: 2px solid var(--green); outline-offset: 1px; border-color: var(--green);
}
.cc-hint { margin: 10px 0 0; font-size: 13px; line-height: 1.55; color: var(--ink-faint); }
.cc-linkbtn {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: var(--green); text-decoration: underline;
  text-underline-offset: 2px;
}
.cc-linkbtn:hover { color: var(--green-hover); }
.cc-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-top: 18px;
}
.cc-count { font-size: 12.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* ---- results ---- */
.cc-results { margin-top: 40px; }
.cc-results-h {
  font-family: var(--display); font-size: 26px; font-weight: 600;
  letter-spacing: -.02em; color: var(--ink); margin: 0;
}
.cc-summary {
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline;
  margin-top: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--line-soft);
  font-size: 14px; color: var(--ink-faint);
}
.cc-summary strong { color: var(--green); font-weight: 600; }

.cc-block { margin-top: 34px; }
.cc-block h2 {
  font-family: var(--display); font-size: 13px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint);
  margin: 0 0 14px;
}
.cc-block-sub { margin: -8px 0 16px; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }

.cc-limit-card {
  margin-bottom: 14px; padding: 18px 20px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.cc-limit-card h3 {
  margin: 0 0 12px; font-family: var(--display);
  font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--ink);
}
.cc-limit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cc-limit-row {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: baseline; gap: 10px;
}
.cc-limit-basis { font-size: 14.5px; color: var(--ink-soft); }
.cc-limit-amount {
  font-family: var(--mono); font-size: 16px; font-weight: 600;
  color: var(--ink); font-variant-numeric: tabular-nums;
}

.cc-term-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: ccterm; }
.cc-term {
  padding: 18px 20px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-md);
}
.cc-term-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.cc-term-head h3 {
  margin: 0; font-family: var(--display); font-size: 16px;
  font-weight: 600; letter-spacing: -.01em; color: var(--ink);
}
.cc-term-tag {
  padding: 3px 9px; border-radius: 999px;
  background: var(--green-tint); color: var(--green);
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
}
.cc-term-note { margin: 9px 0 0; font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); }

/* ---- quoted contract evidence ---- */
.cc-quote { margin-top: 11px; }
.cc-quote summary {
  cursor: pointer; font-size: 12px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint);
}
.cc-quote summary:hover { color: var(--green); }
.cc-quote blockquote {
  margin: 10px 0 0; padding: 12px 14px;
  border-left: 3px solid var(--green); background: var(--paper-deep);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.65;
  color: var(--ink-soft); white-space: pre-wrap; overflow-wrap: anywhere;
}

.cc-result-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.cc-disclaimer {
  margin-top: 20px; padding: 15px 17px;
  background: var(--paper-deep); border-radius: var(--r-sm);
  font-size: 13px; line-height: 1.6; color: var(--ink-faint);
}

.cc-message {
  padding: 24px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-md);
}
.cc-message h2 {
  margin: 0 0 8px; font-family: var(--display);
  font-size: 19px; font-weight: 600; letter-spacing: -.01em; color: var(--ink);
}
.cc-message p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); }
.cc-message .btn { margin: 0; }

.cc-explain { margin-top: 56px; padding-top: 30px; border-top: 1px solid var(--line-soft); }
.cc-explain h2 {
  margin: 0 0 12px; font-family: var(--display);
  font-size: 20px; font-weight: 600; letter-spacing: -.015em; color: var(--ink);
}
.cc-explain p { margin: 0 0 12px; max-width: 68ch; font-size: 15px; line-height: 1.7; color: var(--ink-soft); }
.cc-explain em { font-style: italic; color: var(--ink); }

.cc-legal {
  margin-top: 34px; padding: 16px 18px;
  border: 1px dashed var(--line); border-radius: var(--r-sm);
  font-size: 13px; line-height: 1.65; color: var(--ink-faint);
}
.cc-legal p { margin: 0; }
.cc-legal strong { color: var(--ink); font-weight: 600; }

@media (max-width: 640px) {
  .cc { padding: 118px 0 80px; }
  .cc-form { padding: 18px; }
  .cc-limit-row { flex-direction: column; gap: 2px; }
  .cc-result-actions .btn { width: 100%; text-align: center; }
}