:root{
  /* ── Zentra MY brand, LIGHT. Navy ink on lavender paper, Electric Blue accent. ──
     Navy-on-white and navy-on-lavender are both approved pairings in the brand
     guidelines. Blue-on-navy is NOT approved for text and must never come back.

     House rules for this palette, so it doesn't drift into AI-slop:
       · no gradients, no backdrop-filter, no glassmorphism
       · separation comes from hairline rules and space, not stacked shadows
       · exactly one accent — Electric Blue — used sparingly
     Every value below is a token. Do not hardcode a colour further down the file;
     add a token here instead. */
  --bg:#ffffff;
  --surface:#f5f4ff;        /* Soft Lavender — recessed panels */
  --surface-2:#efedfa;      /* one step deeper */
  --input:#ffffff;
  --line:rgba(4,0,67,.13);
  --line-hair:rgba(4,0,67,.08);
  --text:#040043;           /* Deep Navy — body ink */
  --text-sub:#4a4878;         /* 8.1:1 on white */
  --text-muted:#605e85;       /* 6.0:1. Was #8a88ad — only 3.5:1, which fails
                                 WCAG AA for body text and read as washed-out.
                                 Muted on light must be DARKER than muted on dark. */
  --accent:#0021f3;         /* Electric Blue — CTA fills */
  --accent-2:#0a17c9;       /* CTA hover — DARKER on light, not lighter */
  --accent-bright:#0021f3;  /* emphasis text. Was #6f86ff for dark; that tint is
                               unreadable on white, so it collapses to the accent. */
  --accent-wash:rgba(0,33,243,.07);   /* faint accent fill */
  --accent-edge:rgba(0,33,243,.22);   /* accent hairline */
  --radius:14px;
  --font:'Sora',system-ui,-apple-system,sans-serif;
  --mono:'DM Mono',ui-monospace,monospace;
  --maxw:760px;
}

/* ══ DARK ZONES ══════════════════════════════════════════════════
   The page runs night → day → commitment. Theme carries meaning here; it is
   not decoration, and it must not become stripes:

     ZONE 1  dark   hero + symptoms   the problem. The enquiry lands at 11:47pm,
                                      you reply at 7:02am, they already booked
                                      with someone else. The zone IS the night.
     ZONE 2  light  kit + honest      the fix, free. Daylight.
     ZONE 3  dark   offer + faq       the paid system. Weight and separation
                                      from the free thing above it.

   Two transitions, at the two moments the argument turns. Adding a third
   alternation would turn a narrative into a zebra — don't.

   Mechanically this only re-points the SAME token names, so every component
   below works in both zones without a single theme-specific rule. That is why
   the earlier sweep of hardcoded literals into tokens mattered. */
.theme-dark{
  --bg:#08080f;
  --surface:#14131f;
  --surface-2:#1b1a28;
  --line:rgba(193,191,227,.14);
  --line-hair:rgba(193,191,227,.08);
  --text:#f6f6f9;
  --text-sub:#c1bfe3;         /* lavender pearl */
  --text-muted:#918fbb;       /* legible on near-black; the light-zone value
                                 (#605e85) would fail contrast here */
  --accent-2:#1e3bff;         /* hover goes BRIGHTER on dark, darker on light */
  --accent-bright:#6f86ff;    /* emphasis text — pure #0021f3 is too dark to
                                 read against #08080f */
  --accent-wash:rgba(111,134,255,.10);
  --accent-edge:rgba(111,134,255,.30);

  background:var(--bg);
  color:var(--text);
}
/* At a zone boundary the colour change IS the divider — a rule on top of it
   reads as a seam. */
.theme-dark + .theme-dark{border-top-color:var(--line)}
.zone-start{border-top:0}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  /* Was a radial accent gradient. Flat paper now — the gradient wash is the
     single most recognisable "AI-generated page" tell and it earned nothing. */
  background:var(--bg);
  color:var(--text);
  line-height:1.55;
  min-height:100vh;
  overflow-x:hidden;
}
body.modal-open{overflow:hidden}
b{color:inherit;font-weight:700}

/* ── Slim brand bar ── */
/* Full-bleed, but the brand still lines up with the --maxw column below it.
   Was max-width:var(--maxw) + margin auto, which was invisible on a white page
   but leaves white shoulders either side the moment the bar is themed dark. */
.topbar{padding:20px max(22px, calc((100% - var(--maxw)) / 2));max-width:none;margin:0}
.brand{display:inline-flex;align-items:center;text-decoration:none}
.brand-logo{height:34px;width:auto;display:block;border-radius:8px}
@media(max-width:520px){.brand-logo{height:30px}}

/* ══ HERO ══ */
.hero{
  min-height:calc(100vh - 62px);
  display:flex;align-items:center;justify-content:center;
  padding:36px 22px 64px;text-align:center;
}
.hero-inner{max-width:var(--maxw);margin:0 auto}
.eyebrow{
  font-style:italic;color:var(--text-sub);
  font-size:clamp(15px,2.4vw,19px);margin-bottom:18px;font-weight:400;
}
h1{
  font-size:clamp(34px,7vw,60px);line-height:1.06;font-weight:800;
  letter-spacing:-.03em;margin:0 auto 22px;max-width:15ch;
}
h1 .hl{color:var(--accent-bright)}
.sub{
  color:var(--text-sub);font-size:clamp(16px,2.4vw,21px);
  max-width:44ch;margin:0 auto 34px;line-height:1.5;
}
.sub b{color:var(--text)}

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5ch;
  font-family:var(--font);font-weight:700;font-size:16px;letter-spacing:-.01em;
  color:#fff;background:var(--accent);
  border:0;border-radius:12px;padding:16px 30px;cursor:pointer;
  text-decoration:none;line-height:1.2;
  box-shadow:0 2px 0 0 var(--accent-2);   /* was a 30px blue glow — a light-mode SaaS tell */
  transition:transform .12s ease, background .18s ease, box-shadow .18s ease;
}
.btn:hover{background:var(--accent-2);transform:translateY(-1px);box-shadow:0 2px 0 0 var(--accent-2)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.6;cursor:default;transform:none}
.btn-lg{font-size:clamp(17px,2.4vw,20px);padding:19px 42px;border-radius:14px}
.btn-block{display:flex;width:100%;padding:17px 24px}
.chev{font-weight:800;transform:translateY(-1px)}

.bribe{margin-top:20px;color:var(--text-sub);font-size:clamp(15px,2.2vw,18px)}
.bribe em{color:var(--text);font-style:italic;font-weight:700}
.trust{margin-top:14px;color:var(--text-muted);font-size:13.5px;font-family:var(--mono);letter-spacing:.01em}

/* ══ MODAL ══ */
.modal-overlay{
  position:fixed;inset:0;z-index:100;
  /* Solid navy scrim. Was rgba(4,4,10,.72) + backdrop-filter:blur(5px) — on a
     light page that blur is the glassmorphism tell, and it washed the scrim out
     so the modal stopped reading as "on top of" the page. */
  background:rgba(4,0,67,.58);
  display:flex;align-items:flex-start;justify-content:center;
  padding:24px 16px;overflow-y:auto;
  animation:fade .18s ease;
}
/* Critical: a custom display: value defeats the [hidden] attribute, so the
   overlay must be told to stay hidden when closed. Without this, ✕/Esc/click-out
   fire but the overlay never disappears. */
.modal-overlay[hidden]{display:none}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{
  position:relative;margin:auto;
  /* The modal is always a light card, whatever zone the page is scrolled to.
     It sits at top level today, but pin the tokens anyway — if it ever gets
     moved inside a .theme-dark section, --text would flip to near-white and
     the form would become white-on-white. */
  --text:#040043;
  --text-sub:#4a4878;
  --text-muted:#605e85;
  --accent-bright:#0021f3;
  background:#fff;color:var(--text);
  width:100%;max-width:480px;
  border-radius:20px;padding:46px 30px 28px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6);
  animation:pop .22s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.modal-close{
  position:absolute;top:12px;right:12px;z-index:2;
  width:38px;height:38px;border-radius:50%;
  border:0;background:#ececf3;color:#6a6a7a;
  font-size:24px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s ease,color .15s ease;
}
.modal-close:hover{background:#e6e6ee;color:var(--text)}
.modal-h{
  font-size:clamp(22px,4.8vw,27px);line-height:1.15;font-weight:800;
  letter-spacing:-.02em;text-align:center;margin-bottom:22px;color:var(--text);
}

/* ── Step 1: the diagnostic ──
   Tap-only by design: on a phone, four taps beats four text fields every time,
   and the answers are what make the roadmap theirs instead of generic. */
.step-count{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--accent);text-align:center;margin-bottom:8px;font-weight:500;
}
.modal-h + .modal-sub,.modal-sub{
  text-align:center;color:#66667a;font-size:14.5px;line-height:1.5;
  margin:-14px auto 22px;max-width:40ch;
}
.modal-sub em{color:var(--text);font-style:italic;font-weight:700}

.q{margin-bottom:18px}
.q-t{font-size:14.5px;font-weight:700;color:var(--text);margin-bottom:9px}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  font-family:var(--font);font-size:14px;font-weight:600;cursor:pointer;
  color:#44445a;background:var(--input);border:1.5px solid #e3e3ec;
  border-radius:10px;padding:11px 14px;flex:0 1 auto;
  transition:border-color .12s ease,background .12s ease,color .12s ease;
}
.chip:hover{border-color:#c3c3d4}
.chip.on{
  background:var(--accent);border-color:var(--accent);color:#fff;
  box-shadow:0 8px 22px -10px rgba(0,33,243,.8);
}
.back-link{
  display:block;width:100%;margin-top:14px;padding:6px;
  background:none;border:0;cursor:pointer;font-family:var(--font);
  font-size:13.5px;color:#8a8a9e;text-align:center;
}
.back-link:hover{color:var(--accent)}

/* Secondary action inside the modal (light surface). */
.btn-ghost{
  background:#ececf3 !important;color:#44445a !important;box-shadow:none !important;
}
.btn-ghost:hover{background:#e3e3ec !important;color:var(--text) !important;transform:none;}

/* ── Form ── */
.field{margin-bottom:12px}
.field input{
  width:100%;font-family:var(--font);font-size:16px;color:var(--text);
  background:var(--input);border:1.5px solid #e3e3ec;border-radius:11px;
  padding:15px 16px;transition:border-color .15s ease,background .15s ease;
}
.field input::placeholder{color:#9a9aa8}
.field input:focus{outline:none;border-color:var(--accent);background:#fff}
.phone-field{display:flex;align-items:stretch;gap:0}
.phone-field .cc{
  display:flex;align-items:center;white-space:nowrap;
  background:#ececf3;border:1.5px solid #e3e3ec;border-right:0;
  border-radius:11px 0 0 11px;padding:0 12px;font-size:15px;color:#55556a;font-weight:600;
}
.phone-field input{border-radius:0 11px 11px 0}

.consent{display:flex;gap:9px;align-items:flex-start;margin:6px 0 18px;cursor:pointer}
.consent input{margin-top:3px;width:16px;height:16px;flex:0 0 auto;accent-color:var(--accent)}
.consent span{font-size:12.5px;line-height:1.45;color:#66667a}

.msg{margin-top:12px;font-size:13.5px;min-height:1.2em;text-align:center}
.msg.err{color:#d21c47}

.modal-bribe{
  text-align:center;margin-top:18px;
  font-size:15px;color:#55556a;line-height:1.4;
}
.modal-bribe em{color:var(--text);font-style:italic;font-weight:700}

/* ── Success state ── */
#success-state{text-align:center}
.tick{
  width:56px;height:56px;margin:0 auto 16px;border-radius:50%;
  background:rgba(0,33,243,.1);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:800;
}
.success-sub{color:#55556a;font-size:15.5px;line-height:1.5;margin-bottom:22px;max-width:36ch;margin-left:auto;margin-right:auto}
.success-sub em{color:var(--text);font-style:italic;font-weight:700}
/* Booking demoted to a text link when the WhatsApp handoff is active */
.book-link{
  display:block;margin-top:16px;text-align:center;
  font-size:14px;color:#55556a;text-decoration:underline;
}
.book-link:hover{color:var(--accent)}

/* ── Footer ── */
.legal{text-align:center;padding:30px 22px 40px;color:var(--text-muted);font-size:12.5px;line-height:1.7}
.foot-link{color:var(--text-sub);text-decoration:none}
.foot-link:hover{text-decoration:underline}

@media(max-width:520px){
  .modal{padding:34px 22px 26px}
  .hero{min-height:calc(100vh - 62px)}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ══════════════════════════════════════════════════════════════════════
   PAGE SECTIONS (index only — namespaced .blk-* so nothing here can reach
   the roadmap page, which shares this stylesheet and has its own .sec).
   ══════════════════════════════════════════════════════════════════════ */
.blk{padding:74px 22px;border-top:1px solid var(--line)}
.wrap{max-width:var(--maxw);margin:0 auto}
.kicker{
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-bright);margin-bottom:12px;
}
.blk-h{
  font-size:clamp(26px,4.4vw,38px);line-height:1.14;font-weight:800;
  letter-spacing:-.025em;margin-bottom:14px;max-width:20ch;
}
.blk-sub{color:var(--text-sub);font-size:clamp(15.5px,2.1vw,18px);line-height:1.55;max-width:52ch}
.blk-note{
  margin-top:30px;padding-left:16px;border-left:2px solid var(--accent-bright);
  color:var(--text-sub);font-size:15.5px;line-height:1.6;max-width:52ch;
}

/* ── Symptoms: the self-identification check ── */
.sym-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
.sym{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 20px 22px;
}
.sym-n{
  font-family:var(--mono);font-size:12.5px;color:var(--accent-bright);
  letter-spacing:.1em;margin-bottom:12px;
}
.sym h3{font-size:16.5px;font-weight:700;line-height:1.3;margin-bottom:9px;letter-spacing:-.01em}
.sym p{color:var(--text-sub);font-size:14.5px;line-height:1.6}

/* ── What's in the kit ── */
.kit-list{list-style:none;margin:34px 0 0}
.kit-list li{display:flex;gap:16px;padding:20px 0;border-bottom:1px solid var(--line)}
.kit-list li:last-child{border-bottom:0}
.kit-i{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,33,243,.16);border:1px solid var(--accent-edge);
  color:var(--accent-bright);font-family:var(--mono);font-size:13px;margin-top:2px;
}
.kit-list h3{font-size:17px;font-weight:700;margin-bottom:6px;letter-spacing:-.01em}
.kit-list p{color:var(--text-sub);font-size:14.5px;line-height:1.6}

/* ── The excerpt: a real piece of the asset, styled like the chat it goes into ── */
.peek{margin:32px 0 34px}
.peek-head{margin-bottom:10px}
.peek-tag{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-muted);
}
.peek-body{
  background:var(--input);color:#1c1b28;border-radius:14px;
  padding:20px 20px;font-size:14.5px;line-height:1.62;
  box-shadow:0 18px 44px -26px rgba(0,0,0,.9);
}
.peek-note{margin-top:12px;color:var(--text-muted);font-size:13.5px;line-height:1.55;max-width:52ch}
.blk-kit .btn{margin-top:4px}

/* ── The honest section ── */
.honest-p{color:var(--text-sub);font-size:clamp(15.5px,2.1vw,17.5px);line-height:1.68;max-width:56ch;margin-bottom:18px}
.honest-p b{color:var(--text)}
.honest-p.dim{color:var(--text-muted);font-size:14.5px}

/* ── FAQ ── */
.faq{margin-top:28px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:18px 30px 18px 0;position:relative;
  font-size:16px;font-weight:600;line-height:1.4;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:4px;top:16px;
  font-size:21px;font-weight:400;color:var(--accent-bright);line-height:1;
}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--text-sub);font-size:14.5px;line-height:1.65;padding:0 0 20px;max-width:56ch}

.final-cta{margin-top:64px;text-align:center}
.final-cta .blk-h,.final-cta .blk-sub{max-width:none;margin-left:auto;margin-right:auto}
.final-cta .blk-sub{margin-bottom:28px}

/* ══════════════════════════════════════════════════════════════════════
   THE DIAGNOSTIC — one question per screen
   ══════════════════════════════════════════════════════════════════════ */
.qstep[hidden]{display:none}
.qstep-mid{text-align:center;padding:8px 0 4px}
.mid-mark{font-size:38px;line-height:1;margin-bottom:16px}

.qprog{margin-bottom:22px}
.qprog[hidden]{display:none}
.qprog-bar{height:4px;border-radius:99px;background:#e6e6ee;overflow:hidden}
.qprog-bar span{
  display:block;height:100%;width:0;border-radius:99px;
  background:var(--accent);transition:width .34s cubic-bezier(.4,0,.2,1);
}
.qprog-t{
  margin-top:9px;font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;
  text-transform:uppercase;color:#8b8b9e;
}

/* Long answers need their own row each or they wrap into an unreadable jumble. */
.opts-stack{flex-direction:column;align-items:stretch}
.opts-stack .chip{text-align:left}

/* ── Build pause ── */
.loader{display:flex;gap:7px;justify-content:center;margin-bottom:20px}
.loader span{
  width:9px;height:9px;border-radius:50%;background:var(--accent);opacity:.28;
  animation:zpulse 1.05s ease-in-out infinite;
}
.loader span:nth-child(2){animation-delay:.16s}
.loader span:nth-child(3){animation-delay:.32s}
@keyframes zpulse{0%,80%,100%{opacity:.28;transform:scale(.86)}40%{opacity:1;transform:scale(1)}}

/* ── Payoff: the diagnosis, before any contact field ── */
.payoff-tag{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);margin-bottom:10px;
}
.payoff-body{color:#55556a;font-size:14.5px;line-height:1.62;margin-bottom:16px}
.payoff-fix{
  background:rgba(0,33,243,.06);border-left:3px solid var(--accent);
  padding:13px 15px;border-radius:0 10px 10px 0;
  font-size:14px;line-height:1.55;color:#3a3a4d;margin-bottom:20px;
}
.payoff-fix b{color:var(--accent)}
.payoff-inc{margin-bottom:22px}
.payoff-inc-t{font-size:13px;font-weight:700;color:var(--text);margin-bottom:10px}
.payoff-inc ul{list-style:none}
.payoff-inc li{
  position:relative;padding:7px 0 7px 26px;font-size:14px;color:#55556a;
  border-bottom:1px solid #ededf3;
}
.payoff-inc li:last-child{border-bottom:0}
.payoff-inc li::before{
  content:"✓";position:absolute;left:4px;top:7px;color:var(--accent);font-weight:700;font-size:13px;
}
.payoff-inc li.first{color:var(--text);font-weight:700}
.payoff-inc li.first::after{
  content:"start here";margin-left:9px;font-family:var(--mono);font-size:10px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--accent);font-weight:400;
}

.fineprint{margin-top:14px;text-align:center;font-size:12px;color:#8b8b9e;line-height:1.5}

/* ── Mobile ── */
@media(max-width:760px){
  .blk{padding:56px 20px}
  .sym-grid{grid-template-columns:1fr;gap:12px}
  .final-cta{margin-top:48px}
}
@media(max-width:520px){
  .peek-body{font-size:13.5px;padding:17px 16px}
  .faq summary{font-size:15px}
}

/* ══ THE PAID OFFER — Founding 5 ══
   Visually heavier than the free-kit sections above it: this is the part of the page
   that has to look like a real product, not a lead magnet. All namespaced .off-/.gtee-/
   .f5- so nothing collides with roadmap.html, which shares this stylesheet. */
.blk-offer{
  background:var(--surface);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

/* Core system — numbered because it's a sequence, not a feature list. */
.off-flow{list-style:none;counter-reset:off;margin:26px 0 0;display:grid;gap:12px}
.off-flow li{
  counter-increment:off;
  position:relative;
  padding:13px 16px 13px 50px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--text-sub);
  font-size:.96rem;
}
.off-flow li::before{
  content:counter(off);
  position:absolute;left:15px;top:13px;
  width:23px;height:23px;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent);color:#fff;
  border-radius:50%;
  font-family:var(--mono);font-size:.75rem;font-weight:500;
}
.off-flow li b{color:var(--text)}

.off-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
.off-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px 18px;
}
.off-h{font-size:1.02rem;font-weight:700;margin-bottom:12px;color:var(--text)}
.off-list{list-style:none;display:grid;gap:11px}
.off-list li{
  font-size:.9rem;line-height:1.5;color:var(--text-muted);
  padding-left:16px;position:relative;
}
.off-list li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:5px;height:5px;border-radius:50%;background:var(--accent-bright);
}
.off-list li b{color:var(--text-sub)}
.off-vs li b{color:var(--text)}

/* Guarantees — the strongest asset while there are no case studies. */
.gtee{
  margin-top:26px;padding:22px 20px;
  background:var(--surface);
  border:1px solid var(--accent-edge);
  border-radius:var(--radius);
}
.gtee-row{display:flex;gap:13px;align-items:flex-start;margin-bottom:14px}
.gtee-n{
  flex:0 0 26px;height:26px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--accent-bright);color:var(--accent-bright);
  border-radius:50%;
  font-family:var(--mono);font-size:.78rem;
}
.gtee-row p{font-size:.93rem;line-height:1.55;color:var(--text-sub)}
.gtee-row p b{color:var(--text)}
.gtee-not{
  font-size:.84rem;color:var(--text-muted);
  border-top:1px solid var(--line);padding-top:13px;margin-top:4px;
}

/* Founding 5 — scarcity + price. The one block that should stop the scroll. */
.f5{
  margin-top:26px;padding:28px 22px;
  background:var(--surface);
  border:1px solid var(--accent-edge);
  border-radius:var(--radius);
  text-align:center;
}
.f5-tag{
  display:inline-block;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-bright);
  border:1px solid var(--accent-edge);border-radius:100px;
  padding:5px 12px;margin-bottom:14px;
}
.f5-h{font-size:1.35rem;font-weight:800;line-height:1.25;margin-bottom:12px}
.f5-p{font-size:.93rem;color:var(--text-muted);max-width:52ch;margin:0 auto}
.f5-price{
  display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;
  margin:24px 0 12px;padding:18px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.f5-price>div{display:flex;flex-direction:column;gap:2px}
.f5-amt{font-size:1.7rem;font-weight:800;letter-spacing:-.02em;line-height:1}
.f5-lab{font-size:.76rem;color:var(--text-muted);font-family:var(--mono)}
.f5-plus{font-size:1.2rem;color:var(--text-muted)}
.f5-note{font-size:.88rem;color:var(--text-sub);max-width:50ch;margin:0 auto 20px}
.f5 .btn-lg{width:100%;max-width:380px}
.f5-fine{font-size:.82rem;color:var(--text-muted);margin-top:14px;max-width:48ch;margin-left:auto;margin-right:auto}
.f5-fine b{color:var(--text-sub)}

/* Final CTA now offers both paths — stack them, don't crowd. */
.final-cta .btn-lg+.btn-lg{margin-top:10px}
.final-cta .btn-ghost{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}

@media(max-width:760px){
  .off-cols{grid-template-columns:1fr}
}
@media(max-width:520px){
  .f5{padding:24px 16px}
  .f5-h{font-size:1.18rem}
  .f5-amt{font-size:1.45rem}
  .f5-price{gap:12px}
  .off-flow li{font-size:.9rem;padding-left:46px}
}

/* The 8-step flow reads as a wall on a wide screen: eight full-width cards stacked in
   a 760px column is ~700px of near-identical blocks, in a page that is already mostly
   stacked cards. Two columns on desktop halves the run and breaks the rhythm; mobile
   keeps one column, where a narrow single file is the right shape. */
@media(min-width:761px){
  .off-flow{grid-template-columns:1fr 1fr}
}

/* ══ READABILITY PASS ══
   The page had 16 distinct font sizes and put most of its body copy in the dimmest
   colour (#918fbb, 6.2:1) at .82–.96rem. Individually each rule passed WCAG; together
   they read as grey mush. This collapses the scale, lifts long-form copy to the
   brighter pearl, and leaves the dim colour only for genuine fine print. */

/* One body size for anything you actually read a sentence of. */
.off-flow li,
.gtee-row p,
.f5-p,
.f5-note,
.off-list li{font-size:1rem;line-height:1.6}

/* Long-form copy moves off the dimmest colour. */
.off-flow li,
.gtee-row p,
.f5-p,
.f5-note{color:var(--text-sub)}
.off-list li{color:var(--text-sub)}

/* Dim colour now means fine print, and only fine print. */
.f5-fine,
.gtee-not,
.peek-note{font-size:.88rem;color:var(--text-muted);line-height:1.55}

/* The numbered kit badges were the page's only real contrast failure: white-on-accent
   at 13px measured 2.6:1. Bigger, bolder, and on the brighter blue. */
.kit-i{background:var(--accent-bright);color:#08080f;font-weight:700;font-size:.85rem}

/* Section intros were competing with the headings above them. */
.blk-sub{font-size:1.02rem;color:var(--text-sub)}

/* One type scale for the whole page: 14 fine print / 16 body / 17 lead / 22 / 38.
   The page had eight sizes between 14 and 17.5px. Differences that small don't read
   as hierarchy, they read as noise — and the main reading copy (symptom cards, kit
   descriptions, FAQ answers) was sitting at 14.5px, which is where the real strain
   was coming from. */
.sym p,
.kit-list li p,
.faq details p,
.blk-note{font-size:1rem;line-height:1.6;color:var(--text-sub)}

.blk-sub,
.honest-p{font-size:1.06rem;line-height:1.65}

.sym h3,
.kit-list li h3,
.off-h,
.faq summary{font-size:1.06rem}

.peek-note,
.gtee-not,
.f5-fine,
.trust{font-size:.875rem}

/* The audit CTA was wrapping to two lines inside its 380px cap. */
.f5 .btn-lg{max-width:440px;white-space:nowrap}
@media(max-width:420px){
  .f5 .btn-lg{white-space:normal;font-size:1rem}
}

/* ══ WHATSAPP MOCKUP ══
   Built in markup, not shipped as a PNG: the page is long enough already, this stays
   crisp at any width, the copy stays editable and readable by a screen reader, and it
   carries the same visual language as the ads that bring people here. Light panel on
   a dark page is the point — it reads as "your phone", not "our website". */
.wa{
  max-width:420px;margin:26px auto 0;
  border-radius:16px;overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 18px 50px rgba(0,0,0,.5);
  font-size:.94rem;
}
.wa-flush{margin:0 auto;box-shadow:none}
.wa-top{
  background:#075e54;color:#fff;
  padding:11px 14px;display:flex;align-items:center;gap:11px;
}
.wa-av{
  width:34px;height:34px;flex:0 0 auto;border-radius:50%;
  background:rgba(0,0,0,.28);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.95rem;
}
.wa-who{display:flex;flex-direction:column;font-weight:600;line-height:1.25}
.wa-who em{font-style:normal;font-weight:400;font-size:.76rem;opacity:.8}
.wa-body{
  background:#ece5dd;
  padding:16px 12px;
  display:flex;flex-direction:column;gap:9px;
}
.wa-in,.wa-out{
  max-width:86%;padding:8px 11px 6px;border-radius:9px;
  color:#111;line-height:1.45;
  position:relative;
  box-shadow:0 1px 1px rgba(0,0,0,.13);
}
.wa-in{background:#fff;align-self:flex-start;border-top-left-radius:2px}
.wa-out{background:#dcf8c6;align-self:flex-end;border-top-right-radius:2px}
.wa-in i,.wa-out i{
  display:block;text-align:right;font-style:normal;
  font-size:.7rem;color:#4e5c66;margin-top:2px;
}
.wa-gap{
  align-self:center;
  background:#fdf3c8;color:#6f5610;
  font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 11px;border-radius:100px;
}
.wa-cap{
  text-align:center;font-size:.84rem;color:var(--text-muted);
  margin:12px auto 0;max-width:44ch;
}

/* ══ SYSTEM DIAGRAM ══ one glanceable picture, and a break from stacked cards. */
.pipe{
  margin:26px 0 6px;padding:20px 16px;
  background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);
  text-align:center;
}
.pipe-row{
  display:flex;align-items:center;justify-content:center;
  gap:9px;flex-wrap:wrap;
}
.pipe-node{
  display:flex;flex-direction:column;
  padding:9px 13px;border-radius:9px;
  background:var(--accent-wash);
  border:1px solid var(--accent-edge);
  font-size:.9rem;font-weight:600;color:var(--text);
  line-height:1.2;
}
.pipe-node em{font-style:normal;font-weight:400;font-size:.72rem;color:var(--text-muted);margin-top:2px}
.pipe-win{background:var(--accent);border-color:var(--accent);color:#fff}
.pipe-arr{color:var(--text-muted);font-size:1.05rem}
.pipe-feed{
  font-size:.8rem;color:var(--text-muted);
  margin-top:12px;font-family:var(--mono);
}

@media(max-width:520px){
  .wa{font-size:.9rem}
  .pipe-row{gap:7px}
  .pipe-node{font-size:.84rem;padding:8px 10px}
  .pipe-arr{font-size:.9rem}
}

/* ══ THE RAIL ══
   Replaces the pill-and-arrow row. Four stops on a drawn line, the destination marked,
   and the dormant-lead loop anchored under stop 3 (where those leads actually re-enter)
   instead of floating under the whole row pointing at nothing. */
.rail{
  margin:28px 0 22px;padding:30px 18px 22px;
  background:var(--surface);   /* was a radial accent wash over the surface */
  border:1px solid var(--line);border-radius:var(--radius);
}
.rail-track{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);
  position:relative;
}
/* The line itself, drawn behind the dots and stopping inside the first/last columns
   so it never dangles off the ends. */
.rail-track::before{
  content:"";position:absolute;
  top:17px;left:12.5%;right:12.5%;height:2px;
  background:var(--accent);   /* flat, was a gradient rail */
  z-index:0;
}
.rail-stop{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:4px;position:relative;z-index:1;padding:0 4px;
}
.rail-dot{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface);
  border:2px solid rgba(0,33,243,.45);
  color:var(--accent-bright);
  font-family:var(--mono);font-size:.85rem;font-weight:500;
  margin-bottom:6px;
}
.rail-name{font-size:.94rem;font-weight:700;color:var(--text);line-height:1.25}
.rail-when{font-size:.76rem;color:var(--text-muted);font-family:var(--mono)}
.is-win .rail-dot{
  background:var(--accent);border-color:var(--accent);color:#fff;
  box-shadow:0 0 0 5px rgba(0,33,243,.2);
}
.is-win .rail-name{color:#fff}

/* The loop, anchored under stop 3 (the third of four columns). */
/* The loop lives inside stop 3 rather than being positioned against the rail: a
   percentage margin resolves against the padded .rail box, not the grid track, so it
   drifted about a column off. Nested, it cannot miss. */
.rail-loop{
  display:block;margin-top:9px;
  /* Wider than its column so the label sits on one line instead of breaking
     mid-word; it overhangs into the gaps either side, which are empty. */
  width:170%;
  font-size:.74rem;color:var(--text-muted);font-family:var(--mono);
  line-height:1.35;white-space:nowrap;
}
.rail-loop-arrow{
  display:block;width:1px;height:13px;margin:0 auto 5px;
  background:rgba(0,33,243,.45);position:relative;
}
.rail-loop-arrow::before{
  content:"";position:absolute;top:-1px;left:-3px;
  border-left:3.5px solid transparent;border-right:3.5px solid transparent;
  border-bottom:5px solid rgba(0,33,243,.6);
}

/* ══ PHASES ══ three grouped cards instead of eight identical ones. */
.phase-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:4px}
.phase{
  background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 16px;
}
.phase-tag{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-bright);margin-bottom:11px;
}
.phase ul{list-style:none;display:grid;gap:9px}
.phase li{
  font-size:.95rem;line-height:1.5;color:var(--text-sub);
  padding-left:15px;position:relative;
}
.phase li::before{
  content:"";position:absolute;left:0;top:.6em;
  width:5px;height:5px;border-radius:50%;background:var(--accent-bright);
}

@media(max-width:760px){
  .phase-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  /* The rail goes vertical: four stops side by side under 560px squeezes the labels
     to two or three words a line, which is worse than simply stacking them. */
  .rail{padding:22px 16px 18px}
  .rail-track{grid-template-columns:1fr;gap:16px}
  .rail-track::before{
    top:8px;bottom:8px;left:17px;right:auto;width:2px;height:auto;
    background:var(--accent);
  }
  .rail-stop{flex-direction:row;align-items:center;text-align:left;gap:12px;flex-wrap:wrap}
  .rail-dot{margin-bottom:0;flex:0 0 auto;width:34px;height:34px}
  .rail-name{flex:1 1 auto}
  .rail-when{width:100%;padding-left:46px}
  .rail-loop{width:auto;margin-left:0;padding-left:46px;margin-top:6px;text-align:left;white-space:normal}
  .rail-loop-arrow{margin:0 0 5px}
}

/* ══ INFOGRAPHIC PASS ══
   Icons, a comparison grid and guarantee seals. Deliberately not generated imagery:
   this block carries the price and the three guarantees, and an image model mangling
   "RM 3,000" or "half the implementation fee" would be a commitment we didn't make.
   Live text, drawn structure. */

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.off-h-lead{margin:30px 0 14px;font-size:1.14rem}

/* Included, as icon tiles. */
.inc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.inc{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 14px;
}
.inc-i{width:26px;height:26px;color:var(--accent-bright);stroke-linecap:round;stroke-linejoin:round;margin-bottom:10px}
.inc-n{font-size:.95rem;font-weight:700;line-height:1.3;margin-bottom:5px}
.inc-d{font-size:.85rem;line-height:1.45;color:var(--text-muted)}

/* Comparison grid. Scrolls inside itself on narrow screens rather than forcing the
   page sideways, with the capability column pinned so a mark always has its label. */
.cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius)}
.cmp{
  width:100%;border-collapse:separate;border-spacing:0;
  background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);
  font-size:.92rem;min-width:520px;
}
.cmp th,.cmp td{padding:11px 10px;text-align:center;border-bottom:1px solid var(--line)}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp thead th{
  font-family:var(--mono);font-size:.74rem;font-weight:500;
  letter-spacing:.04em;color:var(--text-muted);
  text-transform:uppercase;padding-top:14px;padding-bottom:12px;
}
.cmp tbody th{
  text-align:left;font-weight:600;color:var(--text-sub);
  position:sticky;left:0;background:var(--surface);
  min-width:210px;font-size:.9rem;
}
.cmp .y{color:#4ade80;font-size:1.05rem}
.cmp .n{color:#8f8ea7;font-size:1.05rem}
.cmp .p{color:#e0b341;font-size:1.05rem}
/* The column that matters, tinted top to bottom so the eye tracks it. */
.cmp .cmp-us{background:rgba(0,33,243,.14)}
.cmp thead .cmp-us{color:var(--text);font-weight:700;border-radius:var(--radius) var(--radius) 0 0}
.cmp-key{
  font-size:.8rem;color:var(--text-muted);margin-top:10px;text-align:center;
}
.cmp-key .y{color:#4ade80}
.cmp-key .p{color:#e0b341}
.cmp-key .n{color:#8f8ea7}

/* Guarantee seals: the promise big, the condition small. */
.seals{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-bottom:16px}
.seal{
  background:var(--accent-wash);
  border:1px solid var(--accent-edge);
  border-radius:var(--radius);padding:18px 15px;
}
.seal-i{width:30px;height:30px;color:var(--accent-bright);stroke-linecap:round;stroke-linejoin:round;margin-bottom:11px}
.seal-big{font-size:1.02rem;font-weight:800;line-height:1.25;margin-bottom:7px}
.seal-sm{font-size:.86rem;line-height:1.5;color:var(--text-muted)}
.seal-sm b{color:var(--text-sub)}

@media(max-width:900px){
  .inc-grid{grid-template-columns:repeat(2,1fr)}
  .seals{grid-template-columns:1fr}
}
@media(max-width:520px){
  .inc-grid{grid-template-columns:1fr}
  .cmp tbody th{min-width:170px;font-size:.85rem}
}