/* =====================================================================
   AnswerBooked — CHAMPION · best-of-breed landing (production)
   ---------------------------------------------------------------------
   Thesis: "the proof, live — in a voice that knows the trades, on a
   foundation of blue trust."
     · DEMO-FIRST  (v2): the hero IS a live call console — number, green
       call button, and a transcript that BOOKS the job before your eyes.
     · TERRAIN VOICE (v3): field-dispatch motif (work-order ticket) + a
       single, disciplined hi-vis caution band ("the next guy"). Warm,
       plain-spoken — in the words, not just the style.
     · BLUE TRUST FOUNDATION (v1): deep brand blue, inverted trust peaks,
       and an orfèvre embossed guarantee seal at the close.

   COLOR IS 100% TOKENIZED — flip the lead/action color in :root only.
     BLUE  #1B5E8C = trust / brand / structure / the email path
     GREEN #2C9E5C / #157F42 = ACTION & LIVE (call CTAs, dot, waveform, booked)
     IVORY #FBF6EE = warm base · AMBER = one disciplined site-safety accent
   Type: Familjen Grotesk (display) · Archivo (body) · Spline Sans Mono (line).
   Every porting decision keeps contrast >= WCAG AA (measured in headless).
   ===================================================================== */

/* ----------------------------- Tokens ----------------------------- */
:root {
  /* Warm-light surfaces (brand base) */
  --paper:   #FBF6EE;   /* ivory base */
  --paper-2: #F4ECDD;   /* warm step */
  --paper-3: #EDE3D2;   /* deeper warm step */
  --card:    #FFFFFF;
  --card-2:  #FFFCF7;
  --line:    #E9DFCD;
  --line-2:  #DBCFB8;

  /* Ink (all >= WCAG AA on ivory) */
  --ink:    #1C1813;
  --ink-2:  #463F33;
  --ink-3:  #6A6051;   /* AA on ivory (smallest body) */
  --ink-4:  #5C5347;

  /* ---- BLUE — trust / "answer" / brand / structure ---- */
  --blue:         #1B5E8C;  /* brand fills, links, structure, the email path */
  --blue-bright:  #2E83BE;  /* DECORATIVE on dark only (glow/dots) */
  --blue-on-field:#93C4E6;  /* AA blue text/links on the blue console/fields (lifted ~7% for the halo-tinted micro-labels: seal DAY/MONEY-BACK, AB "who") */
  --blue-deep:    #174E78;  /* hover / pressed */
  --blue-ink:     #134A72;  /* AA blue text on ivory */
  --blue-soft:    #EAF1F7;  /* tint surface (dose lightly) */
  --blue-line:    #C6D9E8;
  --blue-glow:    rgba(27, 94, 140, 0.16);

  /* Deep-blue "device" / inverted trust peaks */
  --field:       #123A5A;
  --field-2:     #0C2840;
  --field-3:     #0A2237;   /* the console floor */
  --field-line:  rgba(133,186,224,0.16);
  --on-field:    #F2F7FC;
  --on-field-dim:#C2D3E3;   /* AA on field */
  --on-field-mut:#BCCDDE;   /* AA on dark feed bubbles/labels — lifted to clear 4.5:1 with margin over the halo (feed__no/time, Caller) */

  /* ---- GREEN — ACTION & LIVE (call CTAs, live dot, waveform, "booked") ---- */
  --green:         #2C9E5C; /* vivid signal: live dot, waveform, stamp accent */
  --green-cta:     #157F42; /* call-button fill (white text = AA, measured) */
  --green-cta-deep:#0F6837; /* call-button hover / pressed */
  --green-ink:     #0F6E38; /* AA green text on ivory AND on green-soft (measured) */
  --green-bright:  #56D28A; /* green on the dark console — lifted ~7% to clear 4.5:1 over the halo (feed__wo/tag, annot) */
  --green-soft:    #E7F3EA;
  --green-line:    #BCE1C9;
  --green-glow:    rgba(21,127,66,0.34);

  /* Loss — calculator only (bounded). Coral lifts to AA on the dark readout. */
  --loss:        #B23A2A;
  --loss-deep:   #8E2F23;
  --loss-ink:    #8E2F23;   /* AA loss text at body size on ivory */
  --loss-soft:   #F7E9E5;
  --loss-line:   #E7C5BC;
  --loss-coral:  #FF6A52;   /* large figure on dark field (AA-large) */
  --loss-coral-2:#FF8A75;

  /* Amber hi-vis — ONE disciplined site-safety accent (caution band only) */
  --hivis:       #E8852C;
  --hivis-bright:#F59E3D;   /* on ink/dark only */
  --hivis-deep:  #8F420E;   /* AA amber text on ivory */

  --font-display: "Familjen Grotesk", "Archivo", system-ui, sans-serif;
  --font-body:    "Archivo", system-ui, sans-serif;
  --font-mono:    "Spline Sans Mono", ui-monospace, SFMono-Regular, monospace;

  --container: 1180px;
  --gutter: clamp(1.15rem, 4vw, 2.6rem);
  --radius: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 100px;

  --shadow-sm: 0 1px 2px rgba(28,20,6,0.04), 0 4px 12px -6px rgba(28,20,6,0.07);
  --shadow-md: 0 2px 4px rgba(28,20,6,0.04), 0 22px 48px -26px rgba(28,20,6,0.18);
  --shadow-lg: 0 4px 10px rgba(28,20,6,0.05), 0 44px 80px -34px rgba(28,20,6,0.26);
  --shadow-green: 0 2px 5px rgba(10,60,30,0.22), 0 16px 34px -14px rgba(21,127,66,0.55);
  --shadow-field: 0 50px 100px -44px rgba(6,22,38,0.78);

  --ease: cubic-bezier(0.22, 0.68, 0.18, 1);
  --slam: cubic-bezier(0.18, 1.4, 0.4, 1);
}

/* ----------------------------- Reset ------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.62;
  font-size: clamp(1rem, 0.97rem + 0.2vw, 1.07rem);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
em { font-style: italic; }
strong { font-weight: 700; }
select, input, button, textarea { font: inherit; color: inherit; }

/* Figures read as instrument numerals (tabular) */
.console__num, .callbanner__num, .calc__big, [data-calc-out], [data-calc-result],
.calc-facts__num, .stat__num, .callbar__num, .nav__phone {
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}

/* Warm paper grain */
.grain::before {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

:focus-visible { outline: 3px solid var(--green-cta); outline-offset: 3px; border-radius: 5px; }
.section--field :focus-visible, .console :focus-visible { outline-color: var(--green-bright); }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--green-cta); color: #fff; padding: 0.7rem 1.1rem; font-weight: 700; }
.skip-link:focus { left: 1rem; top: 1rem; }

/* --------------------------- Layout utils ------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); position: relative; z-index: 2; }
.hero__inner > *, .stats > *, .steps > *, .own-grid > *,
.close-grid > *, .calc > *, .footer__inner > *, .guar > * { min-width: 0; }

.section { position: relative; padding-block: clamp(3rem, 6.4vw, 6rem); scroll-margin-top: 74px; }
.section--problem, .section--faq, .section--calc { background: var(--paper-2); }
.section--how, .section--own { background: var(--card); }
.section--demo { background: var(--card); }
.section--capture { background: var(--blue-soft); }

/* Hairline between adjacent light sections */
.section + .section:not(.section--field)::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(100% - 2.3rem, var(--container)); border-top: 1px solid var(--line);
}

/* The inverted deep-blue peaks (color-in-large) */
.section--field {
  background:
    radial-gradient(120% 130% at 86% -6%, rgba(46,131,190,0.34), transparent 56%),
    radial-gradient(90% 90% at 4% 104%, rgba(70,201,126,0.10), transparent 60%),
    linear-gradient(158deg, var(--field) 0%, var(--field-2) 92%);
  color: var(--on-field);
  overflow: hidden; /* clip the guilloché watermark so it can't push horizontal scroll */
}
.section--field::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  opacity: 0.5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
/* faint guilloché watermark on the trust peaks (security-paper signature) */
.section--field .container::before {
  content: ""; position: absolute; right: -6%; top: -18%; width: clamp(280px, 36vw, 480px); aspect-ratio: 1;
  background: url("../assets/guilloche-rosette-ivory.svg") no-repeat center/contain;
  opacity: 0.06; pointer-events: none; z-index: 0;
}
.section--field .container > * { position: relative; z-index: 1; }

/* ------------------------- Section headings ----------------------- */
.sec-head { max-width: 56ch; margin-bottom: clamp(2.2rem, 5vw, 3.4rem); }
.sec-head--center { margin-inline: auto; text-align: center; max-width: 46ch; }

.eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue-ink); font-weight: 600; margin-bottom: 1.05rem; }
.eyebrow__dot { width: 7px; height: 7px; border-radius: 2px; background: var(--green); flex: none; transform: rotate(45deg); }
.sec-head--center .eyebrow { justify-content: center; }
.section--field .eyebrow { color: var(--on-field-dim); }
.section--field .eyebrow__dot { background: var(--green-bright); }

.sec-title { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; font-size: clamp(1.95rem, 1.25rem + 3.4vw, 3.25rem); color: var(--ink); overflow-wrap: break-word; }
.sec-lede { margin-top: 1.1rem; color: var(--ink-2); font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem); max-width: 54ch; line-height: 1.55; }
.sec-lede--center { margin-inline: auto; }
.sec-lede strong { color: var(--ink); }
.accent { color: var(--blue-ink); }
.section--field .sec-title, .section--field .close__title { color: var(--on-field); }
.section--field .sec-lede { color: var(--on-field-dim); }
.section--field .sec-lede strong { color: var(--on-field); }
.section--field .accent { color: var(--blue-on-field); }

/* ------------------------------ Buttons --------------------------- */
.btn {
  --bg: var(--card); --fg: var(--ink); --bd: var(--line-2);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  font-weight: 700; letter-spacing: 0.005em; line-height: 1.1;
  padding: 0.92rem 1.4rem; border: 1px solid var(--bd); border-radius: var(--radius);
  background: var(--bg); color: var(--fg);
  transition: transform 0.16s var(--ease), box-shadow 0.22s var(--ease), background 0.22s var(--ease), border-color 0.22s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--sm { padding: 0.58rem 0.95rem; font-size: 0.9rem; }
.btn--lg { padding: 1.05rem 1.6rem; font-size: 1.05rem; }
.btn--block { display: flex; width: 100%; }

/* PRIMARY = the action (GREEN — call / submit / go). Keeps white fg everywhere
   (the FAQ/close CTA contrast bug in v2/v4 came from a link rule overriding --fg). */
.btn--call { --bg: var(--green-cta); --fg: #fff; --bd: transparent; box-shadow: var(--shadow-green); font-weight: 800; }
.btn--call:hover { --bg: var(--green-cta-deep); transform: translateY(-2px); box-shadow: 0 2px 6px rgba(10,60,30,0.26), 0 24px 44px -16px rgba(21,127,66,0.62); }
.btn--call:active { transform: translateY(0); box-shadow: 0 1px 3px rgba(10,60,30,0.3); }

/* SECONDARY = the brand / navigate / email path (BLUE) */
.btn--solid { --bg: var(--blue); --fg: #fff; --bd: var(--blue); box-shadow: var(--shadow-sm); font-weight: 700; }
.btn--solid:hover { --bg: var(--blue-deep); transform: translateY(-2px); box-shadow: var(--shadow-md); }
/* On a blue field, the brand button inverts to ivory-on-field so it stays visible */
.section--field .btn--solid { --bg: var(--paper); --fg: var(--field-2); --bd: var(--paper); }
.section--field .btn--solid:hover { --bg: #fff; }

.btn__icon { display: inline-grid; place-items: center; flex: none; }
.btn__stack { display: flex; flex-direction: column; line-height: 1.12; align-items: flex-start; min-width: 0; }
.btn__lead { font-size: 0.8em; font-weight: 700; }
.btn__num { font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; }

/* Quiet text-link CTA */
.btn-link { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; color: var(--blue-ink); padding: 0.35rem 0; border-bottom: 2px solid transparent; transition: border-color 0.18s var(--ease), gap 0.18s var(--ease); }
.btn-link:hover { border-bottom-color: var(--blue); gap: 0.6rem; }
.section--field .btn-link { color: var(--blue-on-field); }
.btn-link__arrow { transition: transform 0.18s var(--ease); }
.btn-link:hover .btn-link__arrow { transform: translateY(2px); }

/* Live dot (GREEN = live) + live pill */
.livedot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none; box-shadow: 0 0 0 0 rgba(44,158,92,0.6); animation: pulse 2.2s var(--ease) infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(44,158,92,0.55); } 70% { box-shadow: 0 0 0 7px rgba(44,158,92,0); } 100% { box-shadow: 0 0 0 0 rgba(44,158,92,0); } }
.pill-live { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green-bright); font-weight: 600; background: rgba(70,201,126,0.13); border: 1px solid rgba(70,201,126,0.34); border-radius: var(--radius-pill); padding: 0.32rem 0.7rem; }
/* On the lit console corner, give the pill a dark chip so green text stays AA */
.console .pill-live { background: rgba(6,20,34,0.66); border-color: rgba(70,201,126,0.46); }
.console .pill-live .livedot, .callbanner .livedot { background: var(--green-bright); }
.console .pill-live .livedot { box-shadow: 0 0 0 0 rgba(70,201,126,0.65); animation: livePulse 2.4s var(--ease) infinite; }
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(70,201,126,0.6); opacity: 1; }
  70%  { box-shadow: 0 0 0 8px rgba(70,201,126,0); opacity: 0.78; }
  100% { box-shadow: 0 0 0 0 rgba(70,201,126,0); opacity: 1; }
}

/* DFY micro-trust band — green checks */
.dfy-band { display: flex; flex-wrap: wrap; gap: 0.45rem 0.7rem; margin-top: 1.5rem; font-family: var(--font-mono); font-size: 0.73rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-3); }
.dfy-band li { display: inline-flex; align-items: center; gap: 0.5rem; }
.dfy-band li::before { content: "✓"; color: var(--green-ink); font-weight: 800; }
.dfy-band--center { justify-content: center; margin-inline: auto; margin-bottom: clamp(1.8rem, 4vw, 2.6rem); max-width: 64ch; }
.section--field .dfy-band { color: var(--on-field-dim); }
.section--field .dfy-band li::before { color: var(--green-bright); }

/* ----------------------------- Nav ------------------------------- */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(251,246,238,0.78); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid transparent; transition: background 0.25s var(--ease), border-color 0.25s var(--ease); }
.nav.is-stuck { background: rgba(251,246,238,0.93); border-bottom-color: var(--line); box-shadow: 0 6px 22px -16px rgba(18,62,96,0.4); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 64px; }

.brand { display: inline-flex; align-items: center; }
.brand__logo { height: 30px; width: auto; display: block; }
.footer .brand__logo { height: 30px; }
.wm { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; }

.nav__links { display: none; gap: 1.6rem; }
.nav__links a { font-weight: 600; font-size: 0.9rem; color: var(--ink-2); position: relative; padding: 0.3em 0; transition: color 0.15s; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1.5px; background: var(--blue); transition: right 0.26s var(--ease); }
.nav__links a:hover { color: var(--blue-ink); }
.nav__links a:hover::after { right: 0; }

.nav__cta { display: flex; align-items: center; gap: 0.7rem; }
.nav__phone { display: none; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-weight: 600; font-size: 0.88rem; padding: 0.45rem 0.8rem; border: 1px solid var(--green-line); border-radius: var(--radius); white-space: nowrap; color: var(--green-ink); transition: border-color 0.18s, background 0.18s; }
.nav__phone:hover { border-color: var(--green-cta); background: var(--green-soft); }
.nav__phone .livedot { background: var(--green); }

/* ============================ HERO ================================ */
.hero { position: relative; overflow: hidden; padding-block: clamp(1.4rem, 4.5vw, 3.6rem); }
.hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(56% 46% at 88% 0%, rgba(27,94,140,0.12), transparent 60%),
    radial-gradient(60% 55% at 4% 96%, rgba(44,158,92,0.08), transparent 62%);
}
.hero__bg::after { content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(27,94,140,0.10) 1px, transparent 0);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(120% 78% at 72% 6%, #000 18%, transparent 68%);
  mask-image: radial-gradient(120% 78% at 72% 6%, #000 18%, transparent 68%);
}

/* Mobile order: intro (eyebrow+H1) -> console (number + GREEN call ABOVE FOLD;
   transcript streams below) -> supporting copy + email path. */
.hero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.1rem, 3.5vw, 1.7rem); align-items: start; }

.eyebrow--hero { color: var(--blue-ink); }
.hero__title { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; line-height: 1.02; font-size: clamp(2.1rem, 1.2rem + 4.3vw, 4.2rem); margin-top: 0.85rem; color: var(--ink); overflow-wrap: break-word; max-width: 15ch; }
.hero__title .accent { color: var(--blue-ink); position: relative; white-space: nowrap; }
.accent__line { position: absolute; left: 0; right: 0; bottom: 0.02em; height: 0.085em; background: var(--blue); border-radius: 3px; transform: scaleX(0); transform-origin: left; animation: swipe 0.7s var(--ease) 0.55s forwards; }
@keyframes swipe { to { transform: scaleX(1); } }

.hero__sub { font-size: clamp(1.05rem, 1rem + 0.5vw, 1.24rem); color: var(--ink-2); max-width: 48ch; line-height: 1.5; }
.hero__sub strong { color: var(--ink); }
.hero__support { display: grid; gap: 0; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem 1.3rem; margin-top: 1.5rem; }

/* ---- THE CALL CONSOLE — the deep-blue "device" (one big color-in-large) ---- */
.console {
  position: relative; overflow: hidden; z-index: 2; color: var(--on-field);
  border: 1px solid var(--field-line); border-radius: var(--radius-xl);
  background:
    radial-gradient(130% 80% at 100% 0%, rgba(46,131,190,0.36), transparent 56%),
    radial-gradient(120% 80% at 0% 100%, rgba(70,201,126,0.10), transparent 58%),
    linear-gradient(168deg, #164870 0%, var(--field) 32%, var(--field-2) 72%, var(--field-3) 100%);
  box-shadow: var(--shadow-field), inset 0 1px 0 rgba(255,255,255,0.1);
}
.console::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"); }
/* faint guilloché inside the device — the security-paper signature */
.console::before { content: ""; position: absolute; right: -22%; top: -30%; width: 300px; height: 300px; background: url("../assets/guilloche-rosette-ivory.svg") no-repeat center/contain; opacity: 0.08; pointer-events: none; z-index: 0; }
.console > * { position: relative; z-index: 1; }

/* The dialer (the action: number + waveform + green call) — MUST clear the fold */
.console__dialer { padding: clamp(1.3rem, 3.5vw, 1.9rem); }
.console__bar { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.95rem; }
.console__id { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-field-dim); }
.console__say { color: var(--on-field-dim); font-size: 0.96rem; line-height: 1.45; margin-bottom: 0.8rem; max-width: 36ch; }
.console__num { display: block; font-family: var(--font-mono); font-weight: 700; font-size: clamp(1.95rem, 7.5vw, 2.8rem); letter-spacing: 0.01em; color: #fff; margin-bottom: 0.85rem; white-space: nowrap; text-shadow: 0 0 24px rgba(70,201,126,0.4); transition: color 0.15s; }
.console__num:hover { color: var(--green-bright); }

.waveform { display: flex; align-items: center; gap: 3px; height: 30px; margin-bottom: 1.1rem; opacity: 0.95; }
.waveform span { flex: 1 1 0; min-width: 0; border-radius: 2px; height: 22%; background: linear-gradient(180deg, var(--green-bright), rgba(70,201,126,0.55)); transform-origin: center; animation: wave 1.1s var(--ease) infinite; }
.waveform span:nth-child(3n)   { animation-duration: 0.9s;  background: linear-gradient(180deg, #6FE0A2, rgba(70,201,126,0.5)); }
.waveform span:nth-child(4n)   { animation-duration: 1.35s; }
.waveform span:nth-child(5n)   { animation-duration: 0.78s; }
.waveform span:nth-child(7n)   { animation-duration: 1.6s; }
.waveform span:nth-child(8n+1) { animation-delay: -0.1s; }
.waveform span:nth-child(8n+2) { animation-delay: -0.45s; }
.waveform span:nth-child(8n+3) { animation-delay: -0.8s; }
.waveform span:nth-child(8n+4) { animation-delay: -0.25s; }
.waveform span:nth-child(8n+5) { animation-delay: -0.95s; }
.waveform span:nth-child(8n+6) { animation-delay: -0.6s; }
.waveform span:nth-child(8n+7) { animation-delay: -0.35s; }
.waveform span:nth-child(8n+8) { animation-delay: -0.7s; }
@keyframes wave { 0%, 100% { height: 18%; } 50% { height: 80%; } }

.console__free { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--green-bright); margin-top: 0.85rem; }
.console__hint { margin-top: 0.5rem; font-size: 0.82rem; color: var(--on-field-dim); }

/* The live transcript — a standalone deep-blue "call-log" device, mounted at the
   first scroll (demo section) and framed as a field WORK ORDER ticket (terrain).
   Kept OUT of the hero so the hero stays ~1 screen tall (measured). */
.calllog {
  position: relative; overflow: hidden; z-index: 2; color: var(--on-field);
  border: 1px solid var(--field-line); border-radius: var(--radius-xl);
  background:
    radial-gradient(130% 80% at 100% 0%, rgba(46,131,190,0.30), transparent 56%),
    radial-gradient(120% 80% at 0% 100%, rgba(70,201,126,0.10), transparent 58%),
    linear-gradient(168deg, #164870 0%, var(--field) 32%, var(--field-2) 78%, var(--field-3) 100%);
  box-shadow: var(--shadow-field), inset 0 1px 0 rgba(255,255,255,0.1);
  padding: clamp(1.3rem, 3.5vw, 1.9rem);
  margin-bottom: clamp(1.4rem, 3.5vw, 2rem);
}
.calllog::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"); }
.calllog::before { content: ""; position: absolute; right: -18%; top: -26%; width: 280px; height: 280px; background: url("../assets/guilloche-rosette-ivory.svg") no-repeat center/contain; opacity: 0.07; pointer-events: none; z-index: 0; }
.calllog > * { position: relative; z-index: 1; }
/* dispatch-ticket header (v3 terrain motif) */
.feed__ticket { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; padding-bottom: 0.7rem; margin-bottom: 0.9rem; border-bottom: 1px dashed var(--field-line); font-family: var(--font-mono); }
.feed__wo { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-bright); font-weight: 600; }
.feed__wo svg { width: 14px; height: 14px; flex: none; }
.feed__no { font-size: 0.7rem; letter-spacing: 0.08em; color: var(--on-field-mut); }
.feed__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.4rem; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-field-mut); padding-bottom: 0.8rem; margin-bottom: 0.95rem; border-bottom: 1px solid var(--field-line); }
.feed__tag { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--green-bright); }
.turns { display: flex; flex-direction: column; gap: 0.32rem; }
.turn { display: flex; flex-direction: column; }
.bubble { padding: 0.62rem 0.88rem; border-radius: 13px; font-size: 0.9rem; line-height: 1.42; max-width: 92%; }
.bubble__who { display: block; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.22rem; }
.bubble--caller { align-self: flex-end; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.13); color: var(--on-field-dim); border-bottom-right-radius: 5px; }
.bubble--caller .bubble__who { color: var(--on-field-mut); }
.bubble--ab { align-self: flex-start; background: rgba(46,131,190,0.22); border: 1px solid rgba(133,186,224,0.3); color: var(--on-field); border-bottom-left-radius: 5px; }
.bubble--ab .bubble__who { color: var(--blue-on-field); }
.turn--ab { margin-bottom: 0.28rem; }
.annot { display: inline-flex; align-items: center; align-self: flex-start; margin-top: 0.34rem; margin-left: 0.2rem; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--green-bright); font-weight: 600; }
.annot::before { content: "↳"; margin-right: 0.35rem; opacity: 0.75; }

.stamp { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.85rem; font-family: var(--font-mono); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: #0A2237; background: var(--green-bright); border: 1.5px solid var(--green-bright); border-radius: 8px; padding: 0.5rem 0.8rem; transform: rotate(-2deg); box-shadow: 0 10px 24px -10px rgba(70,201,126,0.7); }
.stamp__check { display: inline-grid; place-items: center; color: #0A2237; }
.feed__foot { margin-top: 1.05rem; padding-top: 0.9rem; border-top: 1px dashed var(--field-line); font-size: 0.84rem; color: var(--on-field-dim); }

/* ----------------------- ② Demo (your turn) ---------------------- */
.callbanner { position: relative; overflow: hidden; background: linear-gradient(165deg, var(--green-soft), var(--card)); border: 1px solid var(--green-line); border-radius: var(--radius-xl); padding: clamp(1.8rem, 4.5vw, 2.8rem) 1.5rem; text-align: center; box-shadow: var(--shadow-md); }
.callbanner::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 80% at 50% -10%, rgba(44,158,92,0.12), transparent 60%); }
.callbanner > * { position: relative; }
.callbanner__live { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green-ink); margin-bottom: 1rem; }
.callbanner__num { display: block; font-family: var(--font-mono); font-weight: 700; font-size: clamp(2rem, 8.5vw, 3.6rem); letter-spacing: 0.01em; color: var(--ink); margin-bottom: 1.2rem; white-space: nowrap; }
.callbanner__num:hover { color: var(--green-ink); }
.callbanner .btn { margin-inline: auto; }
.callbanner__free { margin-top: 1rem; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--green-ink); }
.callbanner__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 1.3rem; }
.chip { font-size: 0.85rem; font-weight: 500; color: var(--ink-2); background: var(--card); border: 1px solid var(--line-2); border-radius: var(--radius-pill); padding: 0.42rem 0.9rem; }

/* ------------------------- ③ Stats (light) ----------------------- */
.stats { display: grid; gap: 1.1rem; }
.stat { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2rem); box-shadow: var(--shadow-sm); }
.stat--lead { background: linear-gradient(165deg, var(--blue-soft), var(--card)); border-color: var(--blue-line); border-left: 4px solid var(--blue); }
.stat__num { font-family: var(--font-display); font-weight: 700; line-height: 0.96; letter-spacing: -0.02em; color: var(--ink); font-size: clamp(2.6rem, 1.8rem + 4vw, 3.8rem); }
.stat--lead .stat__num { color: var(--blue-ink); font-size: clamp(3.4rem, 2.2rem + 6vw, 5rem); }
.stat__cap { margin-top: 0.8rem; color: var(--ink-2); font-size: 1rem; line-height: 1.45; max-width: 34ch; }
.stat--lead .stat__cap { font-size: 1.08rem; max-width: 40ch; }
.stat__cap em { font-style: italic; color: var(--ink); }
.stat__cap strong { color: var(--ink); }
.stat--lead .stat__cap strong { color: var(--blue-ink); }
.stat__src { display: block; margin-top: 1rem; padding-top: 0.7rem; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.05em; color: var(--ink-4); text-transform: uppercase; }

/* Caution band — the ONE disciplined hi-vis accent ("the next guy") on ink */
.caution { position: relative; margin-top: clamp(2.2rem, 5vw, 3.4rem); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.caution__stripes { height: 12px; background: repeating-linear-gradient(-45deg, var(--hivis) 0 18px, var(--ink) 18px 36px); }
.caution__plate { background: var(--ink); color: var(--paper); text-align: center; padding: clamp(1.5rem, 4vw, 2.3rem) 1.2rem; position: relative; overflow: hidden; }
.caution__plate::after { content: ""; position: absolute; inset: 0; opacity: 0.5; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"); }
.caution__tag { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hivis-bright); font-weight: 600; margin-bottom: 0.75rem; }
.caution__tag::before { content: "⚠"; font-size: 1rem; }
.caution__text { position: relative; z-index: 1; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; line-height: 1.06; font-size: clamp(1.6rem, 1.1rem + 2.6vw, 2.6rem); color: var(--paper); }
.caution__text .accent { color: var(--hivis-bright); }

/* ------------------------- ④ Steps ------------------------------- */
.steps { display: grid; gap: 1.1rem; counter-reset: step; }
.step { display: flex; gap: 1.1rem; background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2rem); box-shadow: var(--shadow-sm); transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.step:hover { border-color: var(--blue-line); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.step__no { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(165deg, var(--blue), var(--blue-deep)); color: #fff; font-family: var(--font-mono); font-weight: 700; font-size: 1.2rem; box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), var(--shadow-sm); }
.step__title { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; margin-bottom: 0.4rem; letter-spacing: -0.01em; }
.step__text { color: var(--ink-2); font-size: 0.97rem; }
.step__text strong { color: var(--ink); }
.micro-line { margin-top: clamp(2rem, 4vw, 2.8rem); font-size: clamp(1.06rem, 0.95rem + 0.55vw, 1.28rem); font-weight: 600; color: var(--ink); max-width: 56ch; line-height: 1.5; }

/* ------------------------- ⑤ Calculator (loss-only, 2-panel) ----- */
.calc-facts { display: grid; gap: 0.9rem; margin-bottom: 1.7rem; }
.calc-facts li { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; box-shadow: var(--shadow-sm); }
.calc-facts li::before { content: ""; position: absolute; left: 0; top: 14%; bottom: 14%; width: 3px; border-radius: 0 3px 3px 0; background: var(--loss); opacity: 0.55; }
.calc-facts__num { display: block; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.015em; font-size: clamp(1.45rem, 1.1rem + 1.5vw, 1.9rem); color: var(--ink); }
.calc-facts__sep { color: var(--ink-4); }
.calc-facts__per { font-size: 0.5em; color: var(--ink-4); font-family: var(--font-mono); font-weight: 600; }
.calc-facts__cap { display: block; margin-top: 0.25rem; font-size: 0.85rem; color: var(--ink-3); }

/* 2-panel: ivory inputs panel + deep-blue readout panel (the leak-meter) */
.calc { display: grid; gap: 1.2rem; }
.calc__controls { display: grid; gap: 1.35rem; align-content: start; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--radius-xl); padding: clamp(1.5rem, 3.5vw, 2.1rem); box-shadow: var(--shadow-sm); }
.calc__panel-tag { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); padding-bottom: 0.7rem; border-bottom: 1px solid var(--line); }
.calc__field { display: grid; gap: 0.5rem; }
.calc__field label { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; font-weight: 600; font-size: 0.92rem; color: var(--ink); }
.calc__field label output { color: var(--blue-ink); font-family: var(--font-mono); font-weight: 700; font-size: 1.02rem; background: var(--blue-soft); border: 1px solid var(--blue-line); border-radius: 6px; padding: 0.08rem 0.5rem; }
.calc__pct { color: var(--blue-ink); font-family: var(--font-mono); font-weight: 700; }
.calc__sub { font-size: 0.78rem; color: var(--ink-3); }

.calc__select { position: relative; }
.calc__select select { width: 100%; -webkit-appearance: none; appearance: none; background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--radius); color: var(--ink); padding: 0.72rem 2.2rem 0.72rem 0.85rem; font-size: 1rem; font-weight: 600; }
.calc__select select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-glow); }
.calc__caret { position: absolute; right: 0.85rem; top: 50%; transform: translateY(-50%); color: var(--blue-ink); pointer-events: none; font-size: 0.8rem; }

.calc input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; background: linear-gradient(90deg, var(--blue-line), var(--line)); border-radius: 100px; outline-offset: 5px; }
.calc input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--blue); border: 4px solid var(--card); box-shadow: 0 2px 8px -1px rgba(27,94,140,0.5); cursor: pointer; transition: transform 0.12s var(--ease); }
.calc input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.08); }
.calc input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--blue); border: 4px solid var(--card); box-shadow: 0 2px 8px -1px rgba(27,94,140,0.5); cursor: pointer; }

/* Readout panel = the leak-meter (deep blue, coral figure — AA-large on field) */
.calc__output { background: var(--field); color: var(--on-field); border: 1px solid var(--field-line); border-radius: var(--radius-xl); padding: clamp(1.5rem, 3.5vw, 2.1rem); position: relative; overflow: hidden; box-shadow: var(--shadow-field); }
.calc__output::before { content: ""; position: absolute; right: -20%; bottom: -25%; width: 280px; height: 280px; background: url("../assets/guilloche-rosette-ivory.svg") no-repeat center/contain; opacity: 0.07; pointer-events: none; }
.calc__output > * { position: relative; z-index: 1; }
.calc__label { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-field-dim); }
.calc__rec { width: 8px; height: 8px; border-radius: 50%; background: var(--loss-coral); flex: none; box-shadow: 0 0 0 0 rgba(255,106,82,0.55); animation: pulse-rec 2s infinite; }
@keyframes pulse-rec { 0% { box-shadow: 0 0 0 0 rgba(255,106,82,0.5); } 70% { box-shadow: 0 0 0 7px rgba(255,106,82,0); } 100% { box-shadow: 0 0 0 0 rgba(255,106,82,0); } }
.calc__big { display: flex; align-items: baseline; gap: 0.04em; flex-wrap: wrap; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.025em; color: var(--loss-coral); line-height: 1; margin-block: 0.4rem 0.5rem; font-size: clamp(2.7rem, 1.7rem + 5vw, 4.6rem); text-shadow: 0 0 30px rgba(255,106,82,0.3); }
.calc__cur { font-size: 0.5em; align-self: flex-start; margin-top: 0.1em; }
.calc__unit { font-size: 0.24em; color: var(--on-field-mut); font-family: var(--font-mono); font-weight: 500; letter-spacing: 0; align-self: center; margin-left: 0.2em; }
.calc__month { color: var(--on-field-dim); font-size: 0.98rem; }
.calc__month strong { color: var(--loss-coral-2); font-family: var(--font-mono); }

.calc__leak { margin-top: 1.2rem; }
.calc__leak-track { height: 14px; background: rgba(0,0,0,0.28); border: 1px solid var(--field-line); border-radius: 100px; overflow: hidden; }
.calc__leak-fill { height: 100%; border-radius: 100px; background: linear-gradient(90deg, var(--loss-deep), #D14A38); transition: width 0.6s var(--ease); min-width: 6px; position: relative; }
.calc__leak-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); transform: translateX(-100%); animation: leakshine 2.6s var(--ease) infinite; }
@keyframes leakshine { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }
.calc__leak-scale { display: flex; justify-content: space-between; margin-top: 0.45rem; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.04em; color: var(--on-field-dim); }

.calc__break { margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--field-line); display: grid; gap: 0.5rem; }
.calc__break-row { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.88rem; color: var(--on-field-dim); font-family: var(--font-mono); letter-spacing: 0.01em; }
.calc__break-row strong { color: var(--on-field); font-weight: 700; }
.calc__break-row--fix strong { color: var(--loss-coral-2); }

.calc__plug { display: flex; align-items: flex-start; gap: 0.6rem; margin-top: 1.2rem; padding: 0.85rem 1rem; background: rgba(70,201,126,0.13); border: 1px solid rgba(70,201,126,0.34); border-radius: var(--radius); font-size: 0.9rem; color: var(--on-field); line-height: 1.45; }
.calc__plug-ico { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--green); color: #fff; margin-top: 0.1rem; }

.calc__how { margin-top: 1.1rem; }
.calc__how summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--on-field-dim); list-style: none; padding: 0.5rem 0; border-top: 1px solid var(--field-line); }
.calc__how summary::-webkit-details-marker { display: none; }
.calc__how-mark { font-size: 1.1rem; line-height: 1; transition: transform 0.25s var(--ease); }
.calc__how[open] .calc__how-mark { transform: rotate(45deg); }
.calc__how-body { font-size: 0.88rem; color: var(--on-field-dim); padding-top: 0.4rem; }
.calc__how-body ul { display: grid; gap: 0.4rem; margin: 0.7rem 0; padding-left: 1.1rem; list-style: disc; }
.calc__how-body strong { color: var(--on-field); }
.calc__disclaim { color: var(--on-field-mut); font-style: italic; }

/* Calc exit — deep-blue open-loop nudge to call/email */
.calc-exit { margin-top: 1.7rem; display: grid; gap: 1.1rem 2rem; align-items: center; color: var(--on-field); border-radius: var(--radius-xl); padding: clamp(1.6rem, 4vw, 2.4rem); position: relative; overflow: hidden;
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(46,131,190,0.34), transparent 58%),
    linear-gradient(158deg, var(--field) 0%, var(--field-2) 95%);
  box-shadow: var(--shadow-field);
}
.calc-exit::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"); }
.calc-exit > * { position: relative; z-index: 1; }
.calc-exit__eyebrow { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green-bright); margin-bottom: 0.6rem; }
.calc-exit__h { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; font-size: clamp(1.45rem, 1.1rem + 1.7vw, 2.1rem); color: var(--on-field); }
.calc-exit__h .accent { color: var(--blue-on-field); }
.calc-exit__sub { margin-top: 0.7rem; color: var(--on-field-dim); max-width: 48ch; }
.calc-exit__sub strong { color: var(--on-field); }
.calc-exit__sub a { color: var(--blue-on-field); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.calc-exit__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 0.4rem; }

/* ------------------------- ⑥ Ownership --------------------------- */
.own-grid { display: grid; gap: 1.8rem; }
.own-copy p { color: var(--ink-2); margin-bottom: 1.1rem; max-width: 58ch; }
.own-copy strong { color: var(--ink); }
.own-copy em { color: var(--blue-ink); font-style: italic; }
.straight { margin-top: 1.5rem; background: var(--blue-soft); border: 1px solid var(--blue-line); border-left: 4px solid var(--blue); border-radius: var(--radius); padding: 1.3rem 1.4rem; }
.straight__tag { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-ink); font-weight: 600; margin-bottom: 0.5rem; }
.straight__tag::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--blue); transform: rotate(45deg); }
.straight p { margin-bottom: 0; }
.own-list { display: grid; gap: 0.45rem; align-content: start; background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--radius-lg); padding: 1.5rem 1.4rem; box-shadow: var(--shadow-sm); }
.own-list li { display: flex; align-items: center; gap: 0.7rem; font-weight: 600; padding-block: 0.5rem; border-bottom: 1px solid var(--line); }
.own-list li:last-child { border-bottom: 0; }
.own-list .ico { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; flex: none; font-size: 0.78rem; font-weight: 800; }
.own-list .yes .ico { background: var(--green-soft); color: var(--green-ink); }
.own-list .no { color: var(--ink-2); }
.own-list .no .ico { background: var(--blue-soft); color: var(--blue-ink); }

/* ------------------------- ⑦ Guarantee (INVERTED BLUE peak) ------ */
.guar { display: grid; gap: clamp(1.8rem, 4vw, 2.6rem); align-items: center; justify-items: center; text-align: center; position: relative; z-index: 2; }
.guar__body { position: relative; max-width: 42rem; }
.guar__body p { color: var(--on-field-dim); margin: 1.1rem 0 1.6rem; }
.guar__body strong { color: var(--on-field); }

/* The seal — orfèvre embossed medal (v1): reeded edge + guilloché + rotating micro-text */
.seal { position: relative; width: clamp(186px, 42vw, 224px); aspect-ratio: 1; flex: none; justify-self: center; }
.seal__svg { width: 100%; height: 100%; filter: drop-shadow(0 14px 26px rgba(8,26,44,.55)); }
.seal__rotor { transform-origin: 100px 100px; animation: seal-spin 36s linear infinite; }
@keyframes seal-spin { to { transform: rotate(360deg); } }
.seal__micro { letter-spacing: .04em; font-family: var(--font-mono); font-weight: 500; }
.seal__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1; text-shadow: 0 1px 0 rgba(8,26,44,.5); }
.seal__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(3.2rem, 8vw, 4.2rem); color: #fff; letter-spacing: -.02em; }
/* Near-white engraving on the (darkened) medal face — clears WCAG AA on the seal
   gradient, where the blue-on-field token cannot. Scoped to the seal only. */
.seal__day { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .42em; text-indent: .42em; color: #EAF2FA; margin-top: .12rem; }
.seal__back { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .2em; color: #EAF2FA; margin-top: .45rem; }

/* ------------------------- ⑧ FAQ -------------------------------- */
.faq { display: grid; gap: 0.7rem; max-width: 820px; }
.qa { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s; }
.qa[open] { border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.qa--demo { border-color: var(--green-line); border-left: 4px solid var(--green-cta); background: var(--green-soft); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.3rem; list-style: none; cursor: pointer; }
.qa summary::-webkit-details-marker { display: none; }
.qa__q { font-family: var(--font-display); font-weight: 700; font-size: 1.04rem; letter-spacing: -0.01em; }
.qa__plus { position: relative; width: 16px; height: 16px; flex: none; }
.qa__plus::before, .qa__plus::after { content: ""; position: absolute; background: var(--blue); border-radius: 2px; transition: transform 0.25s var(--ease); }
.qa--demo .qa__plus::before, .qa--demo .qa__plus::after { background: var(--green-ink); }
.qa__plus::before { top: 7px; left: 0; width: 16px; height: 2.5px; }
.qa__plus::after { left: 7px; top: 0; width: 2.5px; height: 16px; }
.qa[open] .qa__plus::after { transform: scaleY(0); }
.qa__a { padding: 0 1.3rem 1.25rem; color: var(--ink-2); }
.qa__a p { max-width: 66ch; }
.qa__a strong { color: var(--ink); }
.qa__a em { color: var(--blue-ink); font-style: italic; }
/* Link colour is scoped to NON-button links only — buttons keep their own --fg
   (this is the fix for the FAQ call-CTA contrast bug seen across the panel). */
.qa__a a:not(.btn) { color: var(--blue-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.qa__a .btn { margin-top: 1rem; }
.faq-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.7rem; margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.faq-foot p { font-weight: 600; }
.maillink { font-family: var(--font-mono); font-weight: 700; color: var(--blue-ink); text-decoration: underline; text-underline-offset: 2px; }
.maillink:hover { color: var(--blue-deep); }

/* ------------------------- ⑨ Close / capture (INVERTED BLUE peak) -- */
.close__title { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.025em; line-height: 1.06; font-size: clamp(2rem, 1.25rem + 3.8vw, 3.4rem); color: var(--on-field); }
.close-grid { display: grid; gap: 1.3rem; align-items: start; }

/* Ivory cards on the dark field — they set their OWN ink color so no field
   text rule can bleed in (the close-section invisible-text bug from v1). */
.value-card, .capture { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: clamp(1.7rem, 4vw, 2.5rem); box-shadow: var(--shadow-lg); color: var(--ink); }
.value-card__eyebrow { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue-ink); font-weight: 600; margin-bottom: 1rem; }
.getlist { display: grid; gap: 0.7rem; margin-bottom: 1.4rem; }
.getlist li { display: flex; align-items: flex-start; gap: 0.65rem; font-weight: 500; color: var(--ink-2); }
.getlist__ico { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--green-soft); color: var(--green-ink); font-weight: 800; font-size: 0.78rem; margin-top: 0.1rem; }
.value-card__note { color: var(--ink-3); font-size: 0.92rem; border-top: 1px solid var(--line); padding-top: 1.2rem; margin-bottom: 1.3rem; }
.value-card__call .btn { width: 100%; }

.capture__eyebrow { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-ink); font-weight: 600; margin-bottom: 0.5rem; }
.capture__h { font-family: var(--font-display); font-weight: 700; font-size: 1.55rem; color: var(--ink); margin-bottom: 0.6rem; letter-spacing: -0.015em; }
.capture__lede { color: var(--ink-2); font-size: 0.95rem; margin-bottom: 1.4rem; }
.capture__lede strong { color: var(--ink); }

/* 2-step form */
.lead-form { position: relative; }
.lead-progress { height: 5px; background: var(--line); border-radius: 100px; overflow: hidden; margin-bottom: 1.4rem; }
.lead-progress__bar { display: block; height: 100%; background: var(--green-cta); border-radius: 100px; transition: width 0.4s var(--ease); }
.lead-step[hidden] { display: none; }
.lead-step__q { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; color: var(--ink); margin-bottom: 0.9rem; letter-spacing: -0.01em; }
.trade-taps { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.tap { font-weight: 700; font-size: 1rem; color: var(--ink); background: var(--paper); border: 1.5px solid var(--line-2); border-radius: var(--radius); padding: 0.85rem 1.1rem; transition: transform 0.12s var(--ease), border-color 0.18s var(--ease), background 0.18s var(--ease), color 0.18s var(--ease); }
.tap:hover { border-color: var(--blue); color: var(--blue-ink); transform: translateY(-2px); }
.tap:active { transform: translateY(0); }
.tap.is-selected { background: var(--blue); border-color: var(--blue); color: #fff; }
.lead-back { display: inline-flex; align-items: center; gap: 0.3rem; background: none; border: none; color: var(--blue-ink); font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700; padding: 0; margin-bottom: 1rem; cursor: pointer; }
.lead-back:hover { text-decoration: underline; }

.lead-form .field { display: block; margin-bottom: 0.95rem; }
.lead-form label { display: block; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.4rem; }
.lead-form .req { color: var(--green-ink); }
.lead-form .opt { color: var(--ink-3); text-transform: none; letter-spacing: 0; }
.lead-form input { width: 100%; background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--radius); color: var(--ink); padding: 0.85rem 0.95rem; font-size: 1rem; }
.lead-form input::placeholder { color: var(--ink-4); opacity: 0.85; }
.lead-form input:focus { outline: none; border-color: var(--green-cta); box-shadow: 0 0 0 3px var(--green-glow); }
.lead-form input[aria-invalid="true"] { border-color: var(--loss); }
.form-fine { margin-top: 0.85rem; font-size: 0.78rem; color: var(--ink-3); }
.form-msg { margin-top: 0.75rem; font-size: 0.95rem; font-weight: 700; min-height: 1.1em; }
.form-msg.is-error { color: var(--loss-ink); }
.form-msg.is-success { color: var(--green-ink); background: var(--green-soft); border: 1px solid var(--green-line); border-radius: var(--radius); padding: 0.85rem 1rem; line-height: 1.5; }

/* Honesty / seller-trust — on the blue field */
.honesty { margin-top: 1.8rem; text-align: center; border: 1px solid var(--field-line); background: rgba(255,255,255,0.05); border-radius: var(--radius-lg); padding: clamp(1.7rem, 4vw, 2.4rem); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.honesty__lead { font-family: var(--font-display); font-weight: 700; font-style: italic; font-size: clamp(1.25rem, 1rem + 1.3vw, 1.7rem); color: var(--on-field); letter-spacing: -0.01em; }
.honesty__body { color: var(--on-field-dim); max-width: 62ch; margin: 0.8rem auto 0; }
.honesty__body strong { color: var(--on-field); }
.honesty__mail { color: var(--green-bright); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* ------------------------- Capture band A ------------------------ */
.capture-card { background: var(--card); border: 1px solid var(--blue-line); border-top: 4px solid var(--blue); border-radius: var(--radius-xl); padding: clamp(1.6rem, 4vw, 2.6rem); box-shadow: var(--shadow-lg); display: grid; gap: 1.6rem; }
.capture-card__eyebrow { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue-ink); font-weight: 600; margin-bottom: 0.7rem; }
.capture-card__h { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.06; font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.2rem); color: var(--ink); }
.capture-card__h .accent { color: var(--blue-ink); }
.capture-card__sub { margin-top: 0.75rem; color: var(--ink-2); font-size: 1.02rem; max-width: 46ch; }
.capture-card__sub strong { color: var(--ink); }

/* ------------------------- ⑩ Footer (light) --------------------- */
.footer { background: var(--paper); color: var(--ink-2); padding-top: clamp(2.8rem, 5vw, 4rem); padding-bottom: 6.5rem; border-top: 1px solid var(--line); position: relative; }
.footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--blue) 0%, var(--blue-deep) 50%, var(--blue) 100%); }
.footer__inner { display: grid; gap: 2.4rem; padding-bottom: 2.2rem; border-bottom: 1px solid var(--line); }
.footer__tag { margin-top: 1rem; max-width: 44ch; font-size: 0.95rem; color: var(--ink-2); }
.footer__guar { display: flex; align-items: center; gap: 0.6rem; margin-top: 1.2rem; font-size: 0.9rem; color: var(--ink-2); }
.footer__guar-badge { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.1em; background: var(--green-cta); color: #fff; font-weight: 700; padding: 0.2rem 0.5rem; border-radius: 5px; flex: none; }
.footer__hello { margin-top: 0.8rem; font-size: 0.9rem; color: var(--ink-2); }
.footer__hello a { color: var(--blue-ink); font-weight: 700; text-decoration: underline; }
.footer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.footer__col { display: grid; gap: 0.6rem; align-content: start; }
.footer__h { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.2rem; }
.footer__col a { color: var(--ink-2); font-size: 0.92rem; }
.footer__col a:hover { color: var(--blue-ink); }
.footer__legal { padding-top: 1.6rem; }
.footer__addr { font-family: var(--font-mono); font-size: 0.82rem; color: var(--ink-3); }
.footer__disc { margin-top: 0.6rem; font-size: 0.82rem; color: var(--ink-3); line-height: 1.55; }

/* ------------------------- Mobile call bar ----------------------- */
.callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: center; gap: 0.8rem; background: var(--green-cta); color: #fff; padding: 0.72rem 1rem; padding-bottom: calc(0.72rem + env(safe-area-inset-bottom, 0)); box-shadow: 0 -12px 34px -14px rgba(0,0,0,0.4); transform: translateY(120%); transition: transform 0.32s var(--ease); }
.callbar.is-visible { transform: translateY(0); }
.callbar__icon { display: grid; place-items: center; flex: none; }
.callbar__text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.callbar__lead { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 800; font-size: 0.92rem; }
.callbar__lead .livedot { background: #fff; box-shadow: none; animation: none; }
.callbar__num { font-family: var(--font-mono); font-weight: 600; font-size: 0.82rem; white-space: nowrap; }
.callbar__go { margin-left: auto; font-weight: 800; flex: none; }

/* ------------------------- Reveal anim --------------------------- */
/* Hidden state is scoped to .js: without JS the class is never swapped in (see
   the inline script in <head>), so .reveal is never hidden and ALL content shows.
   With JS, main.js swaps no-js->js before paint, the items hide, then the
   IntersectionObserver adds .is-in to fade them up. */
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); will-change: opacity, transform; }
.reveal.is-in { opacity: 1; transform: none; }

/* ---- Live transcript streaming (JS adds .is-streaming, then per-turn .is-shown) ----
   Default (no JS / failure / reduced motion): everything is visible. */
[data-live-transcript].is-streaming .turn { opacity: 0; transform: translateY(10px); }
[data-live-transcript].is-streaming .turn.is-shown { opacity: 1; transform: none; transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); }
[data-live-transcript].is-streaming .stamp { opacity: 0; transform: scale(0.8) rotate(-2deg); }
[data-live-transcript].is-streaming .stamp.is-stamped { opacity: 1; transform: rotate(-2deg) scale(1); transition: opacity 0.3s var(--ease), transform 0.5s var(--slam); }
[data-live-transcript].is-streaming .feed__foot { opacity: 0; transition: opacity 0.5s var(--ease); }
[data-live-transcript].is-streaming.is-done .feed__foot { opacity: 1; }

/* =========================== Responsive =========================== */
@media (min-width: 600px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calc-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__inner { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .guar { grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: left; }
  .guar__body p { margin-inline: 0; }
  .calc-exit { grid-template-columns: minmax(0, 1fr) auto; }
  .calc-exit__actions { justify-content: flex-end; }
  .capture-card--split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; gap: 2.6rem; }
}
@media (min-width: 920px) {
  .nav__links { display: flex; }
  .nav__phone { display: inline-flex; }
  /* Desktop hero: intro (top-left) + support (bottom-left) in column 1; the
     call console spans column 2 across both rows. */
  .hero__inner { grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr); grid-template-rows: auto 1fr; column-gap: clamp(2rem, 5vw, 3.6rem); row-gap: 1.7rem; align-items: start; }
  .hero__intro   { grid-column: 1; grid-row: 1; }
  .hero__support { grid-column: 1; grid-row: 2; align-self: start; }
  .console       { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
  .hero__support .hero__sub { margin-top: 0; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .own-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .calc { grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr); align-items: start; }
  .close-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .callbar { display: none; }
}

/* Mobile (<=919px): intro stacks above the console; supporting copy below it. */
@media (max-width: 919px) {
  .hero__support { margin-top: 0.2rem; }
  .hero__support .hero__sub { margin-top: 0; }
  .hero .dfy-band { margin-top: 1.1rem; }
}

/* Narrow phones (<=390px): tighten the dialer so the GREEN call button clears
   the fold at 360-390px. MEASURED in headless. */
@media (max-width: 390px) {
  .hero { padding-block: 1.1rem 1.3rem; }
  .hero__title { margin-top: 0.55rem; }
  .hero__inner { gap: 0.95rem; }
  .console__dialer { padding: 1.15rem 1.1rem; }
  .console__bar { margin-bottom: 0.75rem; }
  .console__say { font-size: 0.9rem; margin-bottom: 0.6rem; max-width: none; }
  .console__num { margin-bottom: 0.7rem; }
  .waveform { height: 24px; margin-bottom: 0.85rem; }
  .console .btn--lg { padding: 0.95rem 1.3rem; }
  .trade-taps { gap: 0.5rem; }
}

/* =========================== A11y / motion ======================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .accent__line { transform: scaleX(1); }
  .seal__rotor { animation: none !important; }
  .waveform span { height: 50% !important; }
}