/* ============================================================ SearchFlow landing v8 — navy / white / black, amber = CTA only. Navy "chrome" (header, hero, guarantee, footer) frames light content bands. Accent blue is deliberately SERP-link blue — the colour of a Google result is the whole pitch. ============================================================ */ :root { /* light theme */ --paper:#F7F8FB; --surface:#FFFFFF; --surface-2:#EEF1F7; --ink:#0B1526; --ink-soft:#3E4C63; --ink-faint:#5F6E87; --blue:#1D4F9C; --blue-deep:#153B76; --blue-wash:#E3EBF7; --amber:#EFA31C; --amber-deep:#B87709; --amber-hi:#F7B03A; --amber-wash:#FCEFD6; --pain:#C6402E; --pain-wash:#F8E1DC; --line:rgba(11,21,38,.12); --line-strong:rgba(11,21,38,.24); --shadow:0 1px 2px rgba(11,21,38,.06),0 12px 30px -12px rgba(11,21,38,.18); --shadow-lg:0 2px 6px rgba(11,21,38,.08),0 32px 64px -22px rgba(11,21,38,.3); /* fixed brand-navy panels — identical in both themes (deliberate) */ --navy-hi:#16386B; --navy:#0F2D57; --navy-deep:#0B2244; --navy-ink:#081A36; --on-navy:#F2F6FC; --on-navy-soft:#BCCADF; --on-navy-faint:#8FA3C0; --navy-line:rgba(255,255,255,.14); --blue-bright:#9CC0F5; --mono:"SFMono-Regular",Consolas,"Cascadia Code","Liberation Mono",Menlo,ui-monospace,monospace; --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --grot:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif; --r:16px; --r-sm:10px; } @media (prefers-color-scheme:dark){ :root{ --paper:#0A101C; --surface:#101827; --surface-2:#141F33; --ink:#E9EEF6; --ink-soft:#A7B4C9; --ink-faint:#7C8BA3; --blue:#8AB0EC; --blue-deep:#A9C7F4; --blue-wash:#16294A; --amber:#F2A928; --amber-deep:#EFA31C; --amber-hi:#F7B94F; --amber-wash:#3A2A0E; --pain:#F1745C; --pain-wash:#3A1B15; --line:rgba(233,238,246,.12); --line-strong:rgba(233,238,246,.24); --shadow:0 1px 2px rgba(0,0,0,.4),0 14px 34px -14px rgba(0,0,0,.6); --shadow-lg:0 2px 8px rgba(0,0,0,.5),0 34px 70px -24px rgba(0,0,0,.7); } } :root[data-theme="light"]{ --paper:#F7F8FB; --surface:#FFFFFF; --surface-2:#EEF1F7; --ink:#0B1526; --ink-soft:#3E4C63; --ink-faint:#5F6E87; --blue:#1D4F9C; --blue-deep:#153B76; --blue-wash:#E3EBF7; --amber:#EFA31C; --amber-deep:#B87709; --amber-hi:#F7B03A; --amber-wash:#FCEFD6; --pain:#C6402E; --pain-wash:#F8E1DC; --line:rgba(11,21,38,.12); --line-strong:rgba(11,21,38,.24); --shadow:0 1px 2px rgba(11,21,38,.06),0 12px 30px -12px rgba(11,21,38,.18); --shadow-lg:0 2px 6px rgba(11,21,38,.08),0 32px 64px -22px rgba(11,21,38,.3); } :root[data-theme="dark"]{ --paper:#0A101C; --surface:#101827; --surface-2:#141F33; --ink:#E9EEF6; --ink-soft:#A7B4C9; --ink-faint:#7C8BA3; --blue:#8AB0EC; --blue-deep:#A9C7F4; --blue-wash:#16294A; --amber:#F2A928; --amber-deep:#EFA31C; --amber-hi:#F7B94F; --amber-wash:#3A2A0E; --pain:#F1745C; --pain-wash:#3A1B15; --line:rgba(233,238,246,.12); --line-strong:rgba(233,238,246,.24); --shadow:0 1px 2px rgba(0,0,0,.4),0 14px 34px -14px rgba(0,0,0,.6); --shadow-lg:0 2px 8px rgba(0,0,0,.5),0 34px 70px -24px rgba(0,0,0,.7); } *{box-sizing:border-box} html{scroll-behavior:smooth} [id]{scroll-margin-top:84px} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans); font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} h1,h2,h3{font-family:var(--grot);font-weight:800;line-height:1.05;letter-spacing:-.025em; text-wrap:balance;margin:0} p{margin:0} a{color:inherit} .wrap{width:min(1120px,92vw);margin-inline:auto} .eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase; color:var(--blue);font-weight:600} .section{padding:clamp(4rem,9vw,7rem) 0} .lede{font-size:clamp(1.05rem,1.6vw,1.22rem);color:var(--ink-soft);max-width:62ch;line-height:1.6} /* ---- scroll reveal (JS adds .in; hidden state only when JS is on) ---- */ html.js .rv{opacity:0;transform:translateY(20px); transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.3,1)} html.js .rv.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ html.js .rv{opacity:1;transform:none;transition:none} } /* ---- buttons (amber = CTA, and only CTA) ---- */ .btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--grot);font-weight:700; font-size:1rem;padding:.9em 1.4em;border-radius:var(--r-sm);border:1px solid transparent; cursor:pointer;text-decoration:none;line-height:1; transition:transform .15s ease,box-shadow .15s ease,background .15s ease,border-color .15s ease} .btn:focus-visible{outline:3px solid var(--blue);outline-offset:2px} .btn-primary{background:linear-gradient(180deg,var(--amber-hi),var(--amber));color:#231400; box-shadow:0 1px 0 var(--amber-deep),0 10px 24px -10px rgba(184,119,9,.8)} .btn-primary:hover{transform:translateY(-2px); box-shadow:0 1px 0 var(--amber-deep),0 18px 34px -12px rgba(184,119,9,.85)} .btn-primary:active{transform:translateY(0)} .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)} .btn-ghost:hover{background:var(--surface-2);transform:translateY(-2px)} .btn-lg{font-size:1.08rem;padding:1.05em 1.65em} @media (max-width:520px){.hero-cta .btn,.final-cta .btn{flex:1 1 100%;justify-content:center}} /* ---- header: fixed navy chrome, both themes ---- */ .head{position:sticky;top:0;z-index:50;-webkit-backdrop-filter: saturate(1.3) blur(12px); backdrop-filter: saturate(1.3) blur(12px); background:color-mix(in srgb,var(--navy-deep) 88%,transparent); border-bottom:1px solid var(--navy-line)} .head-in{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0} .brand{display:flex;align-items:center;gap:.55rem;font-family:var(--grot);font-weight:800; font-size:1.46rem;letter-spacing:-.02em;color:var(--on-navy)} /* The wordmark is ONE flex item. Left as a bare text node, "Search" and "Flow" become two anonymous flex items and the .brand gap opens a space between them. */ .brand .wm{white-space:nowrap} .brand .mark{width:30px;height:30px;flex:none} .brand b{color:var(--blue-bright);font-weight:800} .head .btn{padding:.62em 1.1em;font-size:.92rem} .head-cta-note{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase; color:var(--on-navy-faint);margin-right:.2rem} @media (max-width:640px){.head-cta-note{display:none}} /* ---- hero: full-bleed navy panel ---- */ .hero{position:relative;overflow:hidden;color:var(--on-navy); background:linear-gradient(180deg,var(--navy-hi) 0%,var(--navy) 34%,var(--navy-deep) 100%); padding-top:clamp(3rem,6vw,5rem);padding-bottom:clamp(3rem,7vw,5.5rem)} .hero::before{content:"";position:absolute;inset:0;pointer-events:none; background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1.4px); background-size:26px 26px; -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 72%); mask-image:linear-gradient(180deg,#000 0%,transparent 72%)} .hero::after{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(640px 420px at 78% -8%,rgba(110,160,235,.28),transparent 70%), radial-gradient(520px 380px at 8% 110%,rgba(30,70,140,.5),transparent 70%)} .hero .wrap{position:relative;z-index:1} .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,3.2rem);align-items:center} @media (max-width:900px){.hero-grid{grid-template-columns:1fr;gap:2.2rem}} .hero .eyebrow{color:var(--blue-bright)} .hero h1{font-size:clamp(2.7rem,7vw,4.8rem);color:#fff;letter-spacing:-.03em} .hero h1 .flow{color:var(--blue-bright)} .hero .lede{margin-top:1.2rem;color:var(--on-navy-soft)} .hero-cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem} .hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.35)} .hero .btn-ghost:hover{background:rgba(255,255,255,.09)} .hero-micro{font-family:var(--mono);font-size:.78rem;color:var(--on-navy-faint);margin-top:1.2rem; display:flex;align-items:center;gap:.55rem} .dot{width:7px;height:7px;border-radius:50%;background:var(--blue-bright);flex:none; box-shadow:0 0 0 0 var(--blue-bright);animation:pulse 2.4s infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(156,192,245,.55)} 70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}} @media (prefers-reduced-motion:reduce){.dot{animation:none}} /* ---- search-gap card (the thesis) ---- */ .serp{background:var(--surface);border:1px solid var(--line);border-radius:var(--r); box-shadow:var(--shadow-lg);overflow:hidden;color:var(--ink)} .hero .serp{border-color:rgba(255,255,255,.18); box-shadow:0 2px 8px rgba(4,10,22,.45),0 40px 80px -24px rgba(4,10,22,.7)} .serp-bar{display:flex;align-items:center;gap:.6rem;padding:.85rem 1rem;border-bottom:1px solid var(--line); background:var(--surface-2)} .serp-bar svg{width:18px;height:18px;color:var(--ink-faint);flex:none} .serp-q{font-family:var(--mono);font-size:.95rem;color:var(--ink);white-space:nowrap;overflow:hidden} .serp-q .caret{display:inline-block;width:2px;height:1.05em;background:var(--blue);vertical-align:-.15em; margin-left:1px;animation:blink 1s step-end infinite} @keyframes blink{50%{opacity:0}} @media (prefers-reduced-motion:reduce){.serp-q .caret{animation:none}} .serp-vol{margin-left:auto;font-family:var(--mono);font-size:.68rem;letter-spacing:.04em; color:var(--blue-deep);background:var(--blue-wash);padding:.25em .55em;border-radius:6px; white-space:nowrap;font-weight:600} .serp-body{padding:.5rem .35rem} .res{display:flex;align-items:flex-start;gap:.7rem;padding:.7rem .8rem;border-radius:9px} .res+.res{margin-top:.15rem} .res .fav{width:26px;height:26px;border-radius:6px;flex:none;display:grid;place-items:center; font-family:var(--grot);font-weight:800;font-size:.8rem;color:#fff} .res .rt{font-weight:700;color:var(--blue);font-size:.98rem;line-height:1.25} .res .ru{font-family:var(--mono);font-size:.72rem;color:var(--ink-faint)} .res .rd{font-size:.82rem;color:var(--ink-soft);margin-top:.15rem} .res .badge{font-family:var(--mono);font-size:.64rem;letter-spacing:.04em;text-transform:uppercase; color:var(--blue-deep);background:var(--blue-wash);padding:.2em .5em;border-radius:5px;margin-left:auto; white-space:nowrap;font-weight:600} .res-you{background:var(--pain-wash);border:1px dashed var(--pain);align-items:center} .res-you .fav{background:transparent;color:var(--pain);border:1.5px dashed var(--pain)} .res-you .rt{color:var(--pain);display:flex;align-items:center;gap:.4rem} .res-you .rd{color:var(--pain);opacity:.85} .res-you .badge{color:var(--pain);background:var(--pain-wash);border:1px solid var(--pain)} /* ================================================================ MOBILE HARDENING — added 2026-07-28. ⚠️ CONTEXT, so nobody "fixes" this again on the same false premise: a headless screenshot at --window-size=390 appeared to show the page overflowing badly and clipping the hero. IT WAS A MEASUREMENT ARTIFACT. Chrome on Windows will not create a window narrower than ~500px, so it rendered at 500 and cropped the capture to 390 — the crop looked exactly like overflow. Measured properly (an iframe at a true 390px and 360px, see _harness.html) the layout fits with ZERO overflow. What is kept below is defensive only, and none of it changes the design: grid/flex children default to `min-width:auto` and refuse to shrink below their content — with `.res .badge` set to `white-space:nowrap`, one future wording change really could push the SERP card past the viewport. These three rules make that impossible without altering anything visible today. ================================================================ */ .hero-grid > *, .head-in > *, .res > *, .serp, .serp-bar > *{min-width:0} .res .ru, .serp-q, .hero .lede, .hero h1{overflow-wrap:anywhere} html, body{max-width:100%;overflow-x:hidden} /* ⭐ THE ONE REAL DEFECT the proper measurement did find: the result badges are `white-space:nowrap`, and `.serp` is `overflow:hidden`, so on a phone they are silently CLIPPED MID-WORD — "RANKS #1 · HAS" — inside the card. It doesn't break the page, it just looks broken, which on the one graphic whose job is to look like a real Google result is worse than losing it. The badge is a caption on a mockup; the map-pack story survives without it. */ @media (max-width:620px){ .res .badge, .res-you .badge{display:none} } /* ================================================================ HERO v2 — the three surfaces. Added 2026-08-08 (HERO_SPEC_2026-08-08.md). Replaces the blue-web-links mockup, which told a WEBSITE story when the pitch is three places: the map pack, AI search, and Google itself. ⚠️ EVERY COLOUR IN HERE IS A LITERAL GOOGLE VALUE, NOT A THEME TOKEN, AND THAT IS DELIBERATE. This card is a picture of Google, not part of our page chrome. Theming it — light/dark, brand navy, our blue — destroys the split-second recognition the whole direction depends on. Do not "fix" it by wiring it to var(--ink) et al. Namespaced `sf-` throughout so nothing collides with .serp/.res above. ================================================================ */ .sf-stack{display:grid;gap:.5rem} .sf-g{background:#fff;border-radius:11px;overflow:hidden;font-family:arial,-apple-system,"Segoe UI",sans-serif; color:#202124;box-shadow:0 2px 8px rgba(4,10,22,.4),0 30px 60px -22px rgba(4,10,22,.7)} .sf-bar{display:flex;align-items:center;gap:.55rem;padding:.6rem .8rem;border-bottom:1px solid #ebebeb} .sf-bar .sf-mag{width:15px;height:15px;flex:none;color:#9aa0a6} .sf-q{font-size:.85rem;color:#202124;flex:1;overflow-wrap:anywhere} .sf-q .sf-caret{display:inline-block;width:1.5px;height:.95em;background:#1a73e8;vertical-align:-.14em; margin-left:1px;animation:blink 1s step-end infinite} .sf-vol{font-size:.64rem;color:#70757a;white-space:nowrap;flex:none} .sf-label{font-size:.8rem;color:#202124;padding:.55rem .8rem .1rem} .sf-wrap{display:grid;grid-template-columns:1fr 150px;gap:.5rem;padding:.15rem .55rem .5rem} .sf-biz{display:grid;grid-template-columns:1fr auto;gap:.4rem;align-items:start;padding:.5rem .3rem;border-radius:8px} .sf-biz+.sf-biz{border-top:1px solid #f1f3f4} .sf-bn{font-size:.85rem;color:#1a0dab;line-height:1.3} .sf-rate{font-size:.73rem;color:#70757a;margin-top:.12rem} .sf-stars{color:#e37400;letter-spacing:-.5px} .sf-meta{font-size:.73rem;color:#70757a;margin-top:.08rem} .sf-quote{font-size:.72rem;color:#3c4043;margin-top:.22rem;display:flex;gap:.3rem;align-items:flex-start} .sf-qi{width:11px;height:11px;border-radius:50%;background:#1a73e8;flex:none;margin-top:.2rem} .sf-acts{display:flex;gap:.5rem;flex:none;padding-top:.15rem} .sf-act{display:grid;justify-items:center;gap:.14rem;width:44px} .sf-ring{width:26px;height:26px;border-radius:50%;border:1px solid #dadce0;display:grid;place-items:center;color:#1a73e8} .sf-ring svg{width:13px;height:13px} .sf-act small{font-size:.6rem;color:#1a73e8} .sf-biz.sf-you{background:#fef7e6;border:1px dashed #b8860b;margin-top:.3rem} .sf-biz.sf-you .sf-bn{color:#8a5a06;font-weight:600} .sf-biz.sf-you .sf-meta{color:#8a6a2e} .sf-miss{font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.09em;color:#fff; background:#d93025;border-radius:99px;padding:.24rem .55rem;white-space:nowrap;align-self:center} .sf-biz.sf-won{background:#e6f4ea;border:1px solid #137333} .sf-biz.sf-won .sf-bn{color:#0d652d;font-weight:600} .sf-wonb{font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.09em;color:#fff; background:#137333;border-radius:99px;padding:.24rem .55rem;white-space:nowrap;align-self:center} .sf-map{border-radius:8px;position:relative;overflow:hidden;min-height:126px; background:radial-gradient(circle at 24% 62%,#d6e8d3 0 17%,transparent 18%), radial-gradient(circle at 72% 30%,#d6e8d3 0 13%,transparent 14%),linear-gradient(#eaf0e8,#e2eae0)} .sf-map i{position:absolute;width:11px;height:14px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%; background:#d93025;box-shadow:0 1px 2px rgba(0,0,0,.3)} .sf-map i.sf-me{background:#137333;width:14px;height:18px} .sf-map b{position:absolute;right:6px;bottom:5px;font-size:.54rem;color:#5f6368;font-weight:400} .sf-more{font-size:.76rem;color:#202124;border:1px solid #dadce0;border-radius:99px; padding:.32rem .9rem;display:inline-block;margin:.1rem .8rem .7rem} .sf-lane-t{display:flex;align-items:center;gap:.4rem;padding:.5rem .7rem .25rem;font-size:.71rem;color:#5f6368} .sf-spark{width:13px;height:13px;flex:none} .sf-ai{font-size:.76rem;color:#202124;line-height:1.5;padding:0 .7rem .6rem;margin:0} .sf-other{color:#d93025;font-weight:600} .sf-mine{background:#e6f4ea;color:#0d652d;font-weight:700;border-radius:3px;padding:0 .15rem} .sf-org{padding:.15rem .7rem .6rem;display:grid;gap:.45rem} .sf-ourl{font-size:.69rem;color:#4d5156;display:flex;align-items:center;gap:.3rem} .sf-fav{width:13px;height:13px;border-radius:50%;background:#e8eaed;flex:none} .sf-otitle{font-size:.8rem;color:#1a0dab;line-height:1.25} .sf-dim{opacity:.42} .sf-page{font-family:var(--mono);font-size:.61rem;font-weight:700;color:#d93025;letter-spacing:.08em;margin-left:auto} .sf-page.sf-ok{color:#137333} /* the two states */ .sf-flip{position:relative} .sf-flip .sf-face{transition:opacity .5s ease} .sf-flip .sf-after{position:absolute;inset:0;opacity:0;pointer-events:none} .sf-flip.sf-on .sf-before{opacity:0;pointer-events:none} .sf-flip.sf-on .sf-after{opacity:1;pointer-events:auto} .sf-switch{display:flex;gap:.4rem;margin-top:.6rem;font-family:var(--mono);font-size:.6rem; letter-spacing:.12em;text-transform:uppercase} .sf-switch button{flex:1;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.24); color:#C6D6EE;border-radius:6px;padding:.46rem;cursor:pointer;font:inherit;letter-spacing:.12em} .sf-switch button[aria-pressed="true"]{background:var(--amber);color:#3A2405;border-color:var(--amber);font-weight:700} .sf-switch button:focus-visible{outline:2px solid var(--amber);outline-offset:2px} /* the dash line + the three named places */ .hero .dash{margin:1.15rem 0 0;font-size:clamp(1rem,1.6vw,1.14rem);line-height:1.45; color:var(--on-navy-soft);max-width:44ch;overflow-wrap:anywhere} .hero .dash b{color:#fff;font-weight:700} .hero .places{margin:.85rem 0 0;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em; color:var(--blue-bright);line-height:1.5} .hero .places span{color:var(--on-navy-faint)} /* The coined mechanism name. Amber = the one thing we want remembered. */ .hero .places span b{color:var(--amber-hi);font-weight:700;letter-spacing:.06em} @media (max-width:560px){ .sf-wrap{grid-template-columns:1fr} .sf-map{display:none} .sf-acts{display:none} } @media (prefers-reduced-motion:reduce){ .sf-flip .sf-face{transition:none} .sf-q .sf-caret{animation:none} } /* ---- Request a Visibility Audit (2026-08-08) ---- */ .auditbox{max-width:760px;margin:2rem auto 0;background:var(--surface-2);border:1px solid var(--line); border-radius:var(--r);padding:clamp(1.2rem,3vw,2rem);box-shadow:var(--shadow-lg)} .af-grid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem} @media (max-width:640px){.af-grid{grid-template-columns:1fr}} .af{display:grid;gap:.32rem;min-width:0} .af.af-wide{grid-column:1/-1} .af > span{font-size:.82rem;font-weight:700;color:var(--ink)} .af > span em{font-style:normal;font-weight:400;color:var(--ink-faint);font-size:.78rem} .af input,.af textarea{font:inherit;font-size:.94rem;color:var(--ink);background:var(--surface); border:1px solid var(--line);border-radius:9px;padding:.62rem .75rem;width:100%;min-width:0} .af textarea{resize:vertical} .af input:focus-visible,.af textarea:focus-visible{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)} .af input:user-invalid{border-color:var(--pain)} .af-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.85rem;margin-top:1.2rem} .af-note{font-size:.8rem;color:var(--ink-faint);margin:0;flex:1 1 16rem} .af-status{margin:.9rem 0 0;font-size:.9rem;color:var(--ink-soft);min-height:1.2em} .af-status.ok{color:var(--blue-deep);font-weight:700} .af-status.err{color:var(--pain);font-weight:700} /* 🚨 The belt to form_embed.js's braces. If that script is ever blocked, slow, or removed, this height must still clear the whole form INCLUDING the Submit button — 640px did not, and the button sat below the fold inside the frame (found 08-13). */ #auditEmbed iframe{width:100%;min-height:900px;border:0;border-radius:9px} /* ---- Booking gate (2026-08-08) ---- */ #bookGate{border:0;padding:0;background:transparent;max-width:min(680px,94vw);width:100%} #bookGate::backdrop{background:rgba(4,10,22,.72)} .gate{background:var(--surface);border:1px solid var(--line);border-radius:var(--r); box-shadow:var(--shadow-lg);padding:clamp(1.2rem,3vw,1.9rem);color:var(--ink)} .gate h3{margin:0 0 .3rem;font-size:1.3rem;letter-spacing:-.02em} .gate p.sub{margin:0 0 1.2rem;font-size:.9rem;color:var(--ink-soft)} .gq{margin-bottom:1.1rem} .gq > span{display:block;font-size:.88rem;font-weight:700;margin-bottom:.5rem} .gopts{display:flex;flex-wrap:wrap;gap:.5rem} .gopts button{font:inherit;font-size:.86rem;cursor:pointer;padding:.55rem .9rem;border-radius:99px; border:1px solid var(--line);background:var(--surface-2);color:var(--ink)} .gopts button[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:700} .gopts button:focus-visible{outline:2px solid var(--blue);outline-offset:2px} .gate-actions{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;margin-top:.4rem} .gate-close{background:none;border:0;font:inherit;font-size:.85rem;color:var(--ink-faint); cursor:pointer;text-decoration:underline;padding:.4rem} .gate-frame{display:none} .gate-frame iframe{width:100%;min-height:660px;border:0;border-radius:9px} #bookGate.booking .gate-step{display:none} #bookGate.booking .gate-frame{display:block} /* ---- video / VSL ---- */ .vsl{position:relative;margin-top:1rem;border-radius:var(--r);overflow:hidden; border:1px solid rgba(255,255,255,.18); background:linear-gradient(135deg,var(--navy-hi),var(--navy-ink));aspect-ratio:16/9; display:grid;place-items:center;box-shadow:0 2px 8px rgba(4,10,22,.4),0 30px 60px -22px rgba(4,10,22,.65)} .vsl::before{content:"";position:absolute;inset:0;opacity:.16; background:radial-gradient(circle at 30% 20%,#fff 0,transparent 42%), repeating-linear-gradient(115deg,transparent 0 14px,rgba(255,255,255,.06) 14px 15px)} .vsl-inner{position:relative;text-align:center;color:var(--on-navy);padding:1rem} .play{width:66px;height:66px;border-radius:50%; background:linear-gradient(180deg,var(--amber-hi),var(--amber));color:#231400;display:grid; place-items:center;margin:0 auto .8rem;box-shadow:0 12px 30px -8px rgba(0,0,0,.55);cursor:pointer; transition:transform .15s ease} .play:hover{transform:scale(1.07)} .play:focus-visible{outline:3px solid var(--blue-bright);outline-offset:3px} .play svg{width:26px;height:26px;margin-left:3px} .vsl-label{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;opacity:.9} .vsl-title{font-family:var(--grot);font-weight:800;font-size:1.05rem;margin-top:.15rem} .vsl-note{font-family:var(--mono);font-size:.66rem;color:var(--on-navy-faint);margin-top:.6rem;text-align:center} /* ---- niche strip ---- */ .strip{border-bottom:1px solid var(--line);background:var(--surface-2)} .strip-in{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:center;align-items:center; padding:1.05rem 0;font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase; color:var(--ink-faint)} .strip-in b{color:var(--ink-soft);font-weight:600} .strip-in .sep{color:var(--blue);opacity:.55} /* ---- generic section head ---- */ .sec-head{max-width:64ch} .sec-head h2{font-size:clamp(1.8rem,3.9vw,2.7rem);margin-top:.65rem} .sec-head .lede{margin-top:1rem} /* ---- leak ---- */ .leak{background:var(--surface);border-block:1px solid var(--line)} .leak-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:center;margin-top:2.4rem} @media (max-width:820px){.leak-grid{grid-template-columns:1fr}} .flowviz{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:1.4rem} .flowrow{display:flex;align-items:center;gap:.7rem} .flowrow+.flowrow{margin-top:.7rem} .chip{flex:1;display:flex;align-items:center;gap:.6rem;padding:.7rem .8rem;border-radius:9px; border:1px solid var(--line);background:var(--surface);font-weight:600;font-size:.92rem} .chip .k{font-family:var(--mono);font-size:.7rem;color:var(--ink-faint);margin-left:auto} .chip.win{border-color:var(--blue);background:var(--blue-wash)} .chip.win .k{color:var(--blue-deep)} .chip.lose{border-color:var(--pain);color:var(--pain);background:var(--pain-wash)} .chip.lose .k{color:var(--pain)} .arrow{font-family:var(--mono);color:var(--blue);font-weight:700;flex:none} .stat-row{display:flex;gap:1.2rem;flex-wrap:wrap;margin-top:1.4rem} .stat{flex:1;min-width:150px} .stat b{font-family:var(--grot);font-weight:800;font-size:clamp(2rem,4.2vw,2.8rem);color:var(--ink); font-variant-numeric:tabular-nums;display:block;line-height:1;letter-spacing:-.02em} .stat span{font-size:.85rem;color:var(--ink-soft);display:block;margin-top:.4rem} .stat.accent b{color:var(--blue)} /* ---- kit stack ---- */ .kit{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem;margin-top:2.4rem} @media (max-width:760px){.kit{grid-template-columns:1fr}} .kit-item{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r); padding:1.4rem 1.4rem 1.25rem;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.4rem; transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease} .kit-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--line-strong)} .kit-item .ic{width:42px;height:42px;border-radius:11px;background:var(--blue-wash);color:var(--blue-deep); display:grid;place-items:center;margin-bottom:.55rem} .kit-item .ic svg{width:21px;height:21px} .kit-item h3{font-size:1.14rem} .kit-item p{font-size:.93rem;color:var(--ink-soft)} .kit-item .worth{font-family:var(--mono);font-size:.7rem;letter-spacing:.05em;color:var(--blue); text-transform:uppercase;font-weight:600;margin-top:auto;padding-top:.55rem} .kit-flag{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;justify-content:center; font-family:var(--mono);font-size:.8rem;color:var(--ink-soft);background:var(--surface-2); border:1px dashed var(--line-strong);border-radius:var(--r);padding:.95rem 1rem;text-align:center} .kit-flag b{color:var(--blue);font-weight:700} /* ---- steps ---- */ .steps{background:var(--surface);border-block:1px solid var(--line)} .steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.4rem} @media (max-width:760px){.steps-grid{grid-template-columns:1fr}} .step{position:relative;padding:1.5rem 1.4rem;border:1px solid var(--line);border-radius:var(--r); background:var(--surface-2);transition:transform .2s ease,box-shadow .2s ease} .step:hover{transform:translateY(-3px);box-shadow:var(--shadow)} .step .n{font-family:var(--mono);font-weight:700;font-size:.78rem;color:var(--blue);letter-spacing:.12em} .step h3{font-size:1.18rem;margin-top:.55rem} .step p{font-size:.93rem;color:var(--ink-soft);margin-top:.45rem} .step .when{font-family:var(--mono);font-size:.72rem;color:var(--blue);margin-top:.75rem;font-weight:600} /* ---- guarantee: navy panel, amber seal (the one non-CTA amber — it IS the offer) ---- */ .guar{position:relative;overflow:hidden;color:var(--on-navy);border-radius:var(--r); background:linear-gradient(135deg,var(--navy-hi),var(--navy-ink)); padding:clamp(2rem,4.5vw,3.2rem);box-shadow:var(--shadow-lg);display:grid;grid-template-columns:auto 1fr; gap:clamp(1.3rem,3vw,2.4rem);align-items:center} .guar::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5; background:radial-gradient(480px 320px at 85% 0%,rgba(110,160,235,.3),transparent 70%)} .guar>*{position:relative} @media (max-width:680px){.guar{grid-template-columns:1fr;text-align:center}} /* ⭐ The guarantee medallion, rebuilt 2026-08-18. The old one was a 122px DASHED circle reading "live in 7 days or free" - a dashed border reads as a coupon, and "or free" undersold a specific, named promise. Now a struck double-ring seal that says what it is: a money-back guarantee with the term on its face. The asterisk is real - the exact condition is footnoted under the copy, not hidden. */ .seal{width:158px;height:158px;flex:none;position:relative;display:grid;place-items:center; text-align:center;font-family:var(--grot);color:var(--amber-hi);line-height:1;margin-inline:auto} .seal::before{content:"";position:absolute;inset:0;border-radius:50%; border:2px solid var(--amber);opacity:.92} .seal::after{content:"";position:absolute;inset:9px;border-radius:50%; border:1px solid var(--amber);opacity:.42} .seal-in{position:relative;display:block;padding:0 12px} .seal-n{font-size:3rem;font-weight:800;display:block;letter-spacing:-.03em} .seal-d{font-family:var(--mono);font-size:.58rem;letter-spacing:.22em;text-transform:uppercase; display:block;margin-top:.1rem;opacity:.88} .seal-rule{display:block;width:46px;height:1px;background:var(--amber);opacity:.5;margin:.5rem auto} .seal-t{font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase; display:block;line-height:1.45;color:var(--on-navy)} .guar-note{margin-top:.9rem;font-size:.82rem;line-height:1.55;color:var(--on-navy-faint);max-width:54ch} .guar h2{color:#fff;font-size:clamp(1.7rem,3.5vw,2.4rem)} .guar p{color:var(--on-navy-soft);margin-top:.75rem;max-width:54ch} .guar .mono-hi{font-family:var(--mono);color:var(--amber-hi)} /* ---- pricing ---- */ .price-duo{display:grid;grid-template-columns:.85fr 1.24fr .85fr;gap:1.1rem;max-width:1140px;margin:2.6rem auto 0;align-items:center} @media (max-width:900px){.price-duo{grid-template-columns:1fr;max-width:460px}.price-duo .price-card.featured{order:-1}} .price-mini{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:1.7rem 1.4rem;text-align:center} .price-mini .kicker{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)} .price-mini .price-nums{margin:.7rem 0} .price-mini .big{font-size:2.2rem;font-family:var(--grot);font-weight:800;line-height:1;font-variant-numeric:tabular-nums} .price-mini .per{color:var(--ink-soft);font-size:.95rem} .price-mini .mini-sub{font-size:.86rem;color:var(--ink-soft);margin:.2rem 0 1.15rem} .price-mini .btn{width:100%;justify-content:center} .price-card{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r); box-shadow:var(--shadow-lg);overflow:hidden} .price-card.featured{border-color:var(--blue);box-shadow:var(--shadow-lg),0 0 0 4px var(--blue-wash)} .price-badge{background:var(--navy);color:var(--on-navy);font-family:var(--mono);font-size:.66rem;letter-spacing:.14em; text-transform:uppercase;text-align:center;padding:.5rem;font-weight:600} .price-top{padding:1.7rem 1.8rem 1.5rem;border-bottom:1px solid var(--line);text-align:center} .price-top .kicker{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)} .price-nums{display:flex;align-items:baseline;justify-content:center;gap:.5rem;margin-top:.75rem;flex-wrap:wrap} .price-nums .big{font-family:var(--grot);font-weight:800;font-size:3.2rem;line-height:1;font-variant-numeric:tabular-nums; letter-spacing:-.02em} .price-nums .per{color:var(--ink-soft);font-size:1rem} .price-sub{font-size:.9rem;color:var(--ink-soft);margin-top:.65rem} .price-annual{display:inline-block;margin-top:.9rem;padding:.42rem .9rem;border-radius:999px;background:var(--blue-wash);color:var(--blue);font-family:var(--mono);font-size:.74rem;letter-spacing:.03em;font-weight:600} .price-list{list-style:none;margin:0;padding:1.35rem 1.8rem;display:grid;gap:.65rem} .price-list li{display:flex;gap:.6rem;align-items:flex-start;font-size:.95rem} .price-list li svg{width:18px;height:18px;color:var(--blue);flex:none;margin-top:.15rem} .price-cta{padding:0 1.8rem 1.8rem;display:flex;flex-direction:column;gap:.7rem} .price-cta .btn{justify-content:center;width:100%} .price-foot{font-family:var(--mono);font-size:.72rem;color:var(--ink-faint);text-align:center;margin-top:.2rem} .price-anchor-note{max-width:600px;margin:1.4rem auto 0;text-align:center;font-size:.92rem;color:var(--ink-soft)} /* ---- storefront (the 5-product ladder) ---- */ .store-fam{margin-top:2.6rem} .fam-head{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap;margin-bottom:1.2rem} .fam-head .fam-k{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase; color:var(--blue);font-weight:700} .fam-head .fam-t{font-family:var(--grot);font-weight:800;font-size:1.15rem;letter-spacing:-.02em} .fam-head .fam-s{font-size:.9rem;color:var(--ink-soft)} .store-grid{display:grid;gap:1.1rem;align-items:stretch} .store-grid.two{grid-template-columns:1fr 1fr;max-width:720px;margin-inline:auto} .store-grid.three{grid-template-columns:1fr 1fr 1fr} .store-grid.four{grid-template-columns:repeat(4,1fr)} @media (max-width:1180px){.store-grid.four{grid-template-columns:1fr 1fr;max-width:760px;margin-inline:auto}} @media (max-width:820px){.store-grid.two,.store-grid.three,.store-grid.four{grid-template-columns:1fr;max-width:420px;margin-inline:auto}} /* Style A — clean, centered, everything in one dropdown */ .offer{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r); padding:1.9rem 1.5rem;text-align:center;display:flex;flex-direction:column;gap:.65rem;box-shadow:var(--shadow); transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease} .offer:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--line-strong)} .offer.feat{border-color:var(--blue);box-shadow:var(--shadow-lg),0 0 0 4px var(--blue-wash)} .offer-badge{position:absolute;top:-.7rem;left:50%;transform:translateX(-50%);background:var(--navy); color:var(--on-navy);font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase; padding:.3rem .75rem;border-radius:999px;white-space:nowrap;z-index:1} .offer-kick{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)} .offer-price{display:flex;align-items:baseline;justify-content:center;gap:.4rem} .offer-price .amt{font-family:var(--grot);font-weight:800;font-size:2.7rem;line-height:1;letter-spacing:-.02em; font-variant-numeric:tabular-nums} .offer.feat .offer-price .amt{font-size:2.9rem} .offer-price .unit{color:var(--ink-soft);font-size:.9rem} .offer-annual{font-family:var(--mono);font-size:.72rem;color:var(--blue);background:var(--blue-wash); border-radius:999px;padding:.3rem .8rem;align-self:center} .offer-line{color:var(--ink-soft);font-size:.96rem;max-width:32ch;margin-inline:auto} .offer-more{text-align:left;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);margin-top:.15rem} .offer-more summary{padding:.7rem .9rem;font-size:.88rem;font-weight:700} .offer-more[open]{box-shadow:none;border-color:var(--line-strong)} .offer-more .more-in{padding:0 .95rem 1rem;font-size:.86rem;color:var(--ink-soft)} .offer-more .more-in ul{margin:.2rem 0 0;padding-left:1.05rem;display:grid;gap:.3rem} .offer-more .more-in li{line-height:1.45} .offer-more .more-in .howto{margin-top:.75rem;padding:.7rem 0 0;border-top:1px dashed var(--line-strong);color:var(--ink-faint)} .offer-guar{font-size:.82rem;color:var(--ink-soft);text-align:left;background:var(--blue-wash); border-radius:var(--r-sm);padding:.6rem .75rem;line-height:1.4} .offer-guar b{color:var(--blue-deep);font-weight:700} .offer-cta{margin-top:auto;padding-top:.3rem;display:flex;flex-direction:column;gap:.55rem} .offer-cta .btn{width:100%;justify-content:center} .offer-foot{font-family:var(--mono);font-size:.68rem;color:var(--ink-faint);text-align:center} /* ---- compare (Apple-style: pick 2–3, see them side by side) ---- */ .compare{margin-top:3rem} /* ── The two paths. Frames the whole store: the audit lands, then you choose. ── */ .paths{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin:1.6rem 0 2rem} @media (max-width:820px){.paths{grid-template-columns:1fr}} .path{background:var(--surface);border:1px solid var(--line);border-radius:var(--r); padding:1.5rem 1.4rem;box-shadow:var(--shadow)} .path.us{border-color:var(--blue);box-shadow:var(--shadow-lg),0 0 0 3px var(--blue-wash)} .path-k{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase; color:var(--blue);display:block;margin-bottom:.3rem} .path-t{font-family:var(--grot);font-weight:800;font-size:1.2rem;letter-spacing:-.02em;margin:0 0 .3rem} .path-s{color:var(--ink-soft);font-size:.92rem;margin:0 0 1rem} .path ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.7rem} .path li{display:flex;gap:.6rem;align-items:flex-start;font-size:.94rem;line-height:1.45} .path li b{font-family:var(--grot)} .path .pp{font-family:var(--mono);font-size:.74rem;color:var(--blue);white-space:nowrap; background:var(--blue-wash);border-radius:999px;padding:.15rem .5rem;flex:0 0 auto;margin-top:.1rem} .ascend{margin:0 0 2rem;padding:1.15rem 1.35rem;border:1px dashed var(--line-strong); border-radius:var(--r);background:var(--surface);font-size:.93rem;color:var(--ink-soft)} .ascend b{color:var(--ink);font-family:var(--grot)} .cmp-lead{text-align:center;color:var(--ink-soft);font-size:.95rem;max-width:56ch;margin:.5rem auto 0} .cmp-chips{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin:1.3rem 0 1.5rem} .cmp-chip{font-family:var(--grot);font-weight:700;font-size:.85rem;padding:.5rem .95rem;border-radius:999px; border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-soft);cursor:pointer; transition:background .15s ease,color .15s ease,border-color .15s ease} .cmp-chip[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff} .cmp-chip[disabled]{opacity:.4;cursor:not-allowed} .cmp-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow)} .cmp-table{width:100%;border-collapse:collapse;min-width:520px} .cmp-table th,.cmp-table td{padding:.8rem .85rem;text-align:center;border-bottom:1px solid var(--line);vertical-align:top} .cmp-table tr:last-child td{border-bottom:none} .cmp-table .rowlab{text-align:left;font-weight:600;color:var(--ink-soft);font-size:.85rem;white-space:nowrap; background:var(--surface-2)} .cmp-table thead th{background:var(--surface-2);border-bottom:2px solid var(--line-strong)} .cmp-table thead th.feat{background:var(--blue-wash)} .cmp-h .cname{font-family:var(--grot);font-weight:800;font-size:1rem;display:block} .cmp-h .cprice{font-family:var(--mono);font-size:.76rem;color:var(--blue);margin-top:.15rem;display:block} .cmp-h .btn{margin-top:.6rem;padding:.45em .9em;font-size:.82rem} .cmp-yes{color:var(--blue);font-weight:800} .cmp-no{color:var(--ink-faint)} .cmp-val{font-size:.85rem;color:var(--ink)} /* the inversion callout — the whole persuasion hinge */ .inversion{max-width:840px;margin:1.6rem auto 0;display:flex;gap:.9rem;align-items:flex-start; background:var(--amber-wash);border:1px solid var(--amber);border-radius:var(--r);padding:1.05rem 1.25rem; font-size:.94rem;color:var(--ink)} .inversion .ibolt{font-size:1.15rem;flex:none;line-height:1.3} .inversion b{color:var(--amber-deep)} .store-credit{max-width:840px;margin:1.1rem auto 0;text-align:center;font-size:.9rem;color:var(--ink-soft)} .store-credit b{color:var(--blue);font-weight:700} /* per-tier guarantee band */ .guartiers{margin-top:2.6rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r); padding:clamp(1.4rem,3vw,2rem);box-shadow:var(--shadow)} .guartiers h3{font-family:var(--grot);font-weight:800;font-size:1.2rem;text-align:center;letter-spacing:-.02em} .guartiers .umbrella{text-align:center;color:var(--ink-soft);max-width:56ch;margin:.6rem auto 1.4rem;font-size:.98rem} .guartiers .umbrella b{color:var(--ink)} .gt-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem} @media (max-width:680px){.gt-grid{grid-template-columns:1fr}} .gt{display:flex;gap:.7rem;align-items:flex-start;background:var(--surface-2);border:1px solid var(--line); border-radius:var(--r-sm);padding:.85rem 1rem} .gt .gt-ic{color:var(--blue);flex:none;margin-top:.1rem} .gt .gt-ic svg{width:20px;height:20px} .gt b{display:block;font-size:.92rem;color:var(--ink)} .gt span{font-size:.85rem;color:var(--ink-soft)} /* ---- founder ---- */ .founder{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.3rem,3vw,2.4rem);align-items:center; background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.6rem,3vw,2.5rem); box-shadow:var(--shadow)} @media (max-width:620px){.founder{grid-template-columns:1fr;text-align:center}} .founder-photo{width:132px;height:132px;border-radius:50%;background:var(--blue-wash);border:2px solid var(--blue); display:grid;place-items:center;font-family:var(--mono);font-size:.66rem;color:var(--blue-deep);text-align:center; padding:.5rem;margin-inline:auto} .founder h2{font-size:clamp(1.5rem,3vw,2rem);margin-top:.55rem} .founder p{color:var(--ink-soft);margin-top:.75rem;max-width:56ch} .founder-contact{font-family:var(--mono);font-size:.82rem;color:var(--blue);margin-top:1rem;font-weight:600} /* tel:/mailto: links inherit their surrounding colour — the point is that the number is tappable on a phone, not that it looks like a link on desktop */ .founder-contact a{color:inherit;text-decoration:none} .founder-contact a:hover{text-decoration:underline} /* ---- testimonials ---- */ .tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:2.2rem} @media (max-width:760px){.tgrid{grid-template-columns:1fr}} .tcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.45rem;box-shadow:var(--shadow)} .tcard .stars{color:var(--amber);letter-spacing:.1em;font-size:.9rem} /* review gold — semantic, not accent */ .tcard blockquote{margin:.65rem 0 0;font-size:.96rem;line-height:1.55;color:var(--ink)} .tcard cite{display:block;margin-top:.95rem;font-family:var(--mono);font-size:.76rem;color:var(--ink-faint);font-style:normal} .t-note{font-family:var(--mono);font-size:.72rem;color:var(--ink-faint);text-align:center;margin-top:1.3rem; background:var(--surface-2);border:1px dashed var(--line-strong);border-radius:var(--r-sm);padding:.75rem; max-width:640px;margin-inline:auto} /* ---- roadmap teaser ---- */ .roadmap{border-top:1px solid var(--line);background:var(--surface-2)} .roadmap-in{padding:1.5rem 0;text-align:center;font-size:.92rem;color:var(--ink-soft)} .roadmap-in b{color:var(--blue);font-weight:700} .roadmap-in .lbl{font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase; color:var(--ink-faint);display:block;margin-bottom:.45rem} /* ---- faq ---- */ .faq{display:grid;gap:.75rem;margin-top:2.2rem;max-width:780px} details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden} details[open]{border-color:var(--line-strong);box-shadow:var(--shadow)} summary{list-style:none;cursor:pointer;padding:1.1rem 1.25rem;font-weight:700;font-size:1rem; display:flex;align-items:center;gap:.85rem} summary::-webkit-details-marker{display:none} summary:hover{background:var(--surface-2)} summary:focus-visible{outline:3px solid var(--blue);outline-offset:-3px;border-radius:var(--r-sm)} summary .q{font-family:var(--mono);color:var(--blue);font-size:.85rem;flex:none;font-weight:700} summary::after{content:"+";margin-left:auto;font-family:var(--mono);color:var(--ink-faint);font-size:1.3rem; transition:transform .2s ease} details[open] summary::after{transform:rotate(45deg)} details p{padding:0 1.25rem 1.2rem 3.1rem;color:var(--ink-soft);font-size:.94rem} @media (max-width:520px){details p{padding-left:1.25rem}} @media (prefers-reduced-motion:reduce){summary::after{transition:none}} /* ---- final cta ---- */ .final{text-align:center} .final h2{font-size:clamp(2.1rem,5.2vw,3.4rem)} .final .lede{margin:1.1rem auto 0} .final-cta{display:flex;gap:.85rem;justify-content:center;flex-wrap:wrap;margin-top:2rem} /* ---- footer: navy chrome bookend ---- */ footer{background:var(--navy-deep);color:var(--on-navy-soft);padding:2.8rem 0 2.2rem;font-size:.88rem} .foot-in{display:flex;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;align-items:center} .foot-in .brand{font-size:1.05rem} .foot-note{font-family:var(--mono);font-size:.72rem;color:var(--on-navy-faint)} footer a{color:var(--on-navy-faint)} .builtby{text-align:center;font-family:var(--mono);font-size:.68rem;color:var(--on-navy-faint); padding-top:2rem;letter-spacing:.04em;opacity:.8} /* ============================================================ /paths - "Not sure which one is you?" Added 2026-08-18. Three equal doors to a CONVERSATION: email, phone/text, calendar. They are deliberately the SAME weight. The brain's own evidence (Rank-and-Rent Master) is that offering one channel loses the half of people who wanted the other, and John Whiting's tier data has ~25% of leads clicking a booking link and never booking. See WEBSITE_BUILD_PLAN.md 6. ============================================================ */ .talk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem; margin-top:2.4rem;max-width:940px;margin-inline:auto} .talk-card{ /* reset, because one of the three is a