/* ============================================================================
   Something New — V8 "Signal" for lead magnet pages
   Self-contained: the /go/* gates load only this, so they do not depend on
   the homepage preview folder. Tokens match assets/theme.css in site-v8.

   The form markup is fixed by assets/site.js, which expects .field,
   [data-err], .form-status and the .is-bad / .is-sending / .is-on states.
   Those class names are contract, not styling choices; do not rename them.
   ========================================================================= */

:root{
  --band:#3458E6; --band-deep:#2B49C4; --accent:#4C6EF5; --royal:#1E40AF;
  --cta:#FFE14D; --navy:#0F172A; --tail:#0E1016;
  --paper:#F9FBFD; --tint:#F5F7FF; --ink:#0A0F1E; --body:#41506B;
  --muted:#667085; --line:#E4E7EC;
  --r-btn:8px; --r-card:16px; --r-lg:24px;
  --shell:1180px;
  --display:"Satoshi","Switzer",system-ui,sans-serif;
  --text:"Switzer","Satoshi",system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--body);
  font-family:var(--text); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--display); color:var(--ink); margin:0; letter-spacing:-.03em; text-wrap:balance; }
.shell{ width:100%; max-width:var(--shell); margin:0 auto; padding:0 24px; }
.em{ font-style:italic; font-weight:inherit; }

/* -------------------------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:52px; padding:0 28px; border-radius:var(--r-btn);
  font-family:var(--text); font-size:16.5px; font-weight:700; line-height:1;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform .18s var(--ease), background-color .18s var(--ease);
}
.btn:active{ transform:translateY(1px); }
.btn.primary{ background:var(--royal); color:#fff; width:100%; }
.btn.primary:hover{ background:#17359A; }
.btn.lg{ height:56px; font-size:17px; }
.btn.gold{ background:var(--cta); color:#12121A; }
.btn.gold:hover{ background:#FFE873; }
.btn.ghost{ background:rgba(255,255,255,.6); color:var(--ink); border-color:rgba(10,15,30,.14); }

/* ------------------------------------------------------------------ nav */
.lm-nav{
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid rgba(10,15,30,.07);
}
.lm-nav .shell{ display:flex; align-items:center; justify-content:space-between; height:66px; }
.lm-logo{ font-family:var(--display); font-weight:700; font-size:17px; color:var(--ink); letter-spacing:-.03em; }
.lm-back{ font-size:14px; font-weight:600; color:var(--muted); }
.lm-back:hover{ color:var(--ink); }


/* ------------------------------------------------------- the real site nav
   Gates used to carry a stripped-back logo-and-back-link bar. That looked
   like a different website, and it also meant #navbar, #navlinks, #burger and
   #sheet were absent, which made assets/site.js throw before it ever bound the
   gate form. The nav is not decoration here: the form depends on it. */
.navbar{ position:sticky; top:0; z-index:50; padding:14px 0; }
.navbar .nav{
  width:calc(100% - 48px); max-width:var(--shell); margin:0 auto;
  display:flex; align-items:center; gap:22px;
  height:60px; padding:0 10px 0 22px; border-radius:999px;
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 18px 40px -26px rgba(10,15,30,.45), inset 0 1px 0 rgba(255,255,255,.9);
  transition:box-shadow .22s var(--ease);
}
.navbar.is-stuck .nav{ box-shadow:0 22px 50px -26px rgba(10,15,30,.55); }
.navbar .logo{
  font-family:var(--display); font-weight:700; font-size:17px;
  color:var(--ink); letter-spacing:-.03em; white-space:nowrap;
}
.navlinks{ display:flex; align-items:center; gap:4px; margin-left:auto; }
.navlink{
  padding:8px 13px; border-radius:999px; font-size:14.5px; font-weight:600;
  color:var(--body); transition:color .18s var(--ease), background-color .18s var(--ease);
}
.navlink:hover{ color:var(--ink); background:rgba(10,15,30,.05); }
.navbar .btn-cta{
  height:40px; padding:0 18px; border-radius:999px; font-size:14.5px; font-weight:700;
  background:var(--cta); color:#12121A; display:inline-flex; align-items:center;
  transition:background-color .2s var(--ease);
}
.navbar .btn-cta:hover{ background:#FFE873; }
.burger{
  display:none; width:40px; height:40px; margin-left:auto; border:0; cursor:pointer;
  background:transparent; position:relative; border-radius:10px;
}
.burger span, .burger::before, .burger::after{
  content:""; position:absolute; left:10px; right:10px; height:2px;
  background:var(--ink); border-radius:2px; transition:transform .24s var(--ease), opacity .18s var(--ease);
}
.burger span{ top:19px; }
.burger::before{ top:13px; }
.burger::after{ top:25px; }
.is-open .burger span{ opacity:0; }
.is-open .burger::before{ transform:translateY(6px) rotate(45deg); }
.is-open .burger::after{ transform:translateY(-6px) rotate(-45deg); }
.sheet{
  position:fixed; inset:0 0 0 auto; width:min(84vw,340px); z-index:60;
  background:var(--paper); border-left:1px solid var(--line);
  padding:96px 28px 28px; display:flex; flex-direction:column; gap:6px;
  transform:translateX(100%); transition:transform .32s var(--ease);
}
.is-open .sheet{ transform:none; }
.sheet a{
  padding:13px 4px; font-family:var(--display); font-weight:700; font-size:19px;
  color:var(--ink); border-bottom:1px solid var(--line);
}
@media (max-width:860px){
  .navlinks, .navbar .btn-cta{ display:none; }
  .burger{ display:block; }
}
@media (prefers-reduced-motion:reduce){ .sheet{ transition:none; } }

/* ------------------------------------------------------------ the hero
   Opens on the V8 gradient so the gate reads as part of the site rather
   than a stray funnel page. */
.lm-hero{
  position:relative; overflow:hidden;
  background:linear-gradient(170deg,#EAF0FC 0%, #F7FAFF 42%, #DCE6FB 100%);
  /* -88px pulls the gradient up behind the sticky nav (14 + 60 + 14) so there
     is no band of paper above it; the padding pays that height back. The form
     and its button have to clear the fold on a laptop, so everything here is
     kept tight. */
  margin-top:-88px;
  padding:112px 0 56px;
}
.lm-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(760px 420px at 78% 8%, rgba(52,88,230,.16), transparent 62%);
}
.lm-hero .shell{ position:relative; z-index:1; }
.lm-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:start; }
.lm-eyebrow{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--royal);
  background:rgba(255,255,255,.72); border:1px solid rgba(30,64,175,.18);
  padding:7px 14px; border-radius:999px; margin-bottom:22px;
}
.lm-hero h1{ font-size:clamp(30px,3.6vw,44px); font-weight:700; line-height:1.06; max-width:17ch; }
.lm-lede{ margin:16px 0 0; font-size:17.5px; line-height:1.55; color:var(--body); max-width:54ch; }
.lm-trust{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.lm-trust span{
  font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--royal); background:rgba(255,255,255,.7);
  border:1px solid rgba(30,64,175,.16); padding:8px 14px; border-radius:999px;
}
.lm-proof{ margin-top:30px; display:flex; gap:30px; flex-wrap:wrap; }
.lm-proof div{ min-width:0; }
.lm-proof b{
  display:block; font-family:var(--display); font-weight:700; font-size:26px;
  color:var(--ink); letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.lm-proof span{ font-size:13px; color:var(--muted); }

/* --------------------------------------------------------------- form
   Our liquid glass, so it matches the site's nav and cards. */
.lm-form-card{
  position:sticky; top:92px;
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.8);
  border-radius:var(--r-lg); padding:28px;
  box-shadow:0 30px 70px -30px rgba(10,15,30,.4), inset 0 1px 0 rgba(255,255,255,.9);
}
.lm-form-card h2{ font-size:21px; font-weight:700; }
.lm-form-card .sub{ margin:8px 0 22px; font-size:15px; color:var(--body); }
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.field label{
  font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
}
.field .opt{ text-transform:none; letter-spacing:0; font-weight:500; opacity:.7; }
.field input{
  height:46px; padding:0 15px; border-radius:10px;
  background:rgba(255,255,255,.85); border:1px solid rgba(10,15,30,.14);
  color:var(--ink); font-family:var(--text); font-size:15.5px;
  transition:border-color .2s var(--ease), background-color .2s var(--ease);
}
.field input::placeholder{ color:#9AA6BE; }
.field input:focus{ outline:none; border-color:var(--royal); background:#fff; }
.field.is-bad input{ border-color:#B42318; background:#FFF7F7; }
.field-err{
  display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s var(--ease);
  font-size:13px; color:#B42318;
}
.field-err > span{ overflow:hidden; }
.field.is-bad .field-err{ grid-template-rows:1fr; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-status{
  display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s var(--ease);
  margin:12px 0 0; font-size:14px; text-align:center; color:var(--body);
}
.form-status > span{ overflow:hidden; }
.form-status.is-on{ grid-template-rows:1fr; }
.form-status.is-bad{ color:#B42318; }
.is-sending .btn.primary{ opacity:.75; pointer-events:none; }
.lm-formnote{ margin:14px 0 0; font-size:12.5px; color:var(--muted); text-align:center; }

/* ------------------------------------------------------------- sections */
.lm-sec{ padding:84px 0; }
.lm-sec.tint{ background:var(--tint); }
.lm-sec.dark{ background:var(--navy); color:#98A2B3; }
.lm-sec.dark h2,.lm-sec.dark h3{ color:#fff; }
.lm-head{ max-width:60ch; margin-bottom:44px; }
.lm-head h2{ font-size:clamp(27px,3.4vw,38px); font-weight:700; line-height:1.14; }
.lm-head p{ margin:16px 0 0; font-size:17.5px; }

/* what you get: numbered because the tool genuinely runs in this order */
.lm-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.lm-step{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-card); padding:24px 22px;
}
.lm-sec.dark .lm-step{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); }
.lm-step-n{
  font-family:var(--display); font-weight:700; font-size:14px; color:var(--accent);
  border:1px solid rgba(76,110,245,.3); border-radius:10px;
  display:grid; place-items:center; width:42px; height:42px; margin-bottom:16px;
}
.lm-step h3{ font-size:17.5px; font-weight:700; line-height:1.25; }
.lm-step p{ margin:9px 0 0; font-size:15px; }

/* the problem block, on the band */
.lm-why{ background:var(--band); color:#D7DFFE; padding:84px 0; }
.lm-why h2{ color:#fff; font-size:clamp(27px,3.6vw,40px); font-weight:700; line-height:1.12; max-width:20ch; }
.lm-why-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; margin-top:8px; }
.lm-why p{ margin:0 0 18px; font-size:17.5px; line-height:1.65; }
.lm-why p:first-child{ color:#fff; }
.lm-why b{ color:var(--cta); }
.lm-bullets{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.lm-bullets li{ position:relative; padding-left:30px; font-size:16.5px; }
.lm-bullets li::before{
  content:""; position:absolute; left:0; top:5px; width:17px; height:17px;
  border-radius:50%; background:var(--cta);
}
.lm-bullets li::after{
  content:""; position:absolute; left:4.5px; top:9px; width:8px; height:5px;
  border-left:2px solid #12121A; border-bottom:2px solid #12121A; transform:rotate(-45deg);
}

/* preview of the thing they are actually getting */
.lm-shot{
  border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line);
  box-shadow:0 40px 80px -40px rgba(10,15,30,.4);
}

/* closing CTA */
.lm-close{ background:var(--tail); padding:88px 0; text-align:center; }
.lm-close h2{ color:#fff; font-size:clamp(28px,3.8vw,42px); font-weight:700; line-height:1.12; }
.lm-close p{ margin:16px auto 28px; max-width:52ch; color:#98A2B3; font-size:17px; }
.lm-close .lm-trust{ justify-content:center; margin-top:24px; }
.lm-close .lm-trust span{ color:var(--cta); background:rgba(255,255,255,.06); border-color:rgba(255,225,77,.28); }
.lm-foot{
  background:var(--tail); border-top:1px solid rgba(255,255,255,.1);
  padding:26px 0; color:#667085; font-size:14px;
}
.lm-foot .shell{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.lm-foot a{ color:#98A2B3; }

/* ------------------------------------------- hero: bullets, bare form,
   and the glass box that holds the magnet itself.
   The form sits in the copy column now: the glass is spent on showing the
   thing being offered, which is the only image on the page that has to
   carry the whole promise. */
.lm-hero .lm-bullets{ margin-top:18px; gap:9px; }
.lm-hero .lm-bullets li{ color:var(--body); font-size:15.5px; }
.lm-hero .lm-bullets li::before{ background:var(--royal); }
.lm-hero .lm-bullets li::after{ border-left-color:#fff; border-bottom-color:#fff; }

.lm-form-bare{ margin-top:22px; max-width:540px; }
.lm-form-bare .fieldrow{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.lm-form-bare .field input{ background:rgba(255,255,255,.92); }
.lm-form-bare .btn.primary{ margin-top:4px; }
.lm-form-bare .lm-formnote{ text-align:left; }

.lm-magnet{
  align-self:center; margin:0;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.8);
  border-radius:var(--r-lg); padding:16px;
  box-shadow:0 30px 70px -30px rgba(10,15,30,.4), inset 0 1px 0 rgba(255,255,255,.9);
}
.lm-magnet img{ width:100%; border-radius:13px; box-shadow:0 18px 40px -24px rgba(10,15,30,.55); }
.lm-magnet figcaption{
  margin-top:13px; padding:0 4px 2px; font-size:13px; color:var(--muted); text-align:center;
}

/* ------------------------------------ the problem block, broken into parts
   One long column of prose was doing the arguing; these carry the same
   argument in pieces, with the payoff on the yellow so the eye lands there. */
.lm-why-intro{ margin:18px 0 0; font-size:18.5px; color:#fff; max-width:56ch; }
.lm-why-boxes{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:32px; }
.lm-why-box{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-card); padding:24px 26px;
}
.lm-why-box h3{ color:#fff; font-size:18px; font-weight:700; }
.lm-why-box p{ margin:10px 0 0; font-size:16px; }
.lm-why-flag{
  margin-top:18px; background:var(--cta); border-radius:var(--r-card); padding:24px 28px;
}
.lm-why-flag b{
  display:block; font-family:var(--display); font-size:20px; color:#12121A; letter-spacing:-.02em;
}
.lm-why-flag p{ margin:8px 0 0; font-size:16.5px; color:#33321C; max-width:70ch; }

.lm-figs{ display:grid; grid-template-columns:1.55fr 1fr; gap:18px; margin-top:32px; align-items:start; }
.lm-fig{
  margin:0; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-card); padding:12px;
}
.lm-fig img{ width:100%; border-radius:10px; }
.lm-fig figcaption{ margin-top:11px; padding:0 4px 3px; font-size:13.5px; color:#C7D2FE; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition:none !important; animation:none !important; }
  html{ scroll-behavior:auto; }
}
@media (max-width:960px){
  .lm-grid{ grid-template-columns:1fr; gap:36px; }
  .lm-form-card{ position:static; }
  .lm-why-grid{ grid-template-columns:1fr; gap:28px; }
  .lm-sec{ padding:60px 0; }
  .lm-steps{ grid-template-columns:1fr 1fr; }
  .lm-figs{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .lm-steps{ grid-template-columns:1fr; }
  .lm-why-boxes{ grid-template-columns:1fr; }
  .lm-form-bare .fieldrow{ grid-template-columns:1fr; gap:0; }
}


/* ============================================================================
   GROWTH AUDIT (/growth-audit)

   The section kit (brand strip, mini UI mockups, the feature marquee and the
   results carousel) is lifted from the creators page in
   Website-2026/site-performance-cinema/creators.html, class names and all, so
   if that page ever lands in this repo the two share one implementation
   rather than two that drift.

   The header is modelled on Ecom Republic's: near-black, centred, logo and one
   button, no nav links, because a landing page with a nav is a landing page
   with exits.
   ========================================================================= */

.ga-center{ text-align:center; margin:0 auto 0; max-width:62ch; }
.ga-center h2{ font-size:clamp(28px,3.6vw,40px); font-weight:700; line-height:1.12; }
.ga-center p{ margin:14px auto 0; font-size:17px; color:var(--body); max-width:56ch; }

/* -------------------------------------------------------------- the hero
   The ground is the site's own hero render: .world.w1 is the host that
   /v8/hero-shader.js looks for, and the gradient below is the no-WebGL
   fallback, both copied from v8/theme.css so this page renders identically
   to the homepage hero. The shader hides .w1-blobs itself once it paints.
   The layout on top of it is Ecom Republic's: centred, one button, no nav. */
.world{ position:relative; overflow:hidden; }
.world.w1{ background:linear-gradient(160deg,#EAF0FC 0%, #F7FAFF 48%, #ECF2FD 100%); }
.w1-shader{ position:absolute; inset:0; width:100%; height:100%; z-index:0; display:block; }
.w1-blobs{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.w1-blobs .blob{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.55; }
.w1-blobs .b1{ width:560px; height:560px; left:-140px; top:-160px; background:radial-gradient(circle,#9CC0FF,transparent 70%); animation:w1drift1 46s ease-in-out infinite alternate; }
.w1-blobs .b2{ width:620px; height:620px; right:-180px; top:20px; background:radial-gradient(circle,#5B7EFF,transparent 70%); animation:w1drift2 58s ease-in-out infinite alternate; }
.w1-blobs .b3{ width:480px; height:480px; left:28%; bottom:-240px; background:radial-gradient(circle,#C9DBFF,transparent 70%); animation:w1drift3 40s ease-in-out infinite alternate; }
@keyframes w1drift1{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(60px,40px) scale(1.15); } }
@keyframes w1drift2{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(-50px,60px) scale(1.1); } }
@keyframes w1drift3{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(40px,-30px) scale(1.2); } }
.w1.has-shader .w1-blobs{ display:none; }
.world.w1 .shell{ position:relative; z-index:1; }

.ga-hero{ padding:22px 0 88px; text-align:center; }
.ga-head{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-bottom:56px; text-align:left;
}
.ga-head .ga-logo{ font-family:var(--display); font-weight:700; font-size:18px; color:var(--ink); letter-spacing:-.03em; }
.ga-head .ga-logo i{ color:var(--royal); font-style:normal; }
.ga-head .btn{ height:44px; padding:0 22px; font-size:15px; }
/* a plain line above the headline rather than a pill: the hero is already
   carrying a lot of weight and a pill competes with the CTA for attention */
/* glass, the same primitive as the nav and the cards, so the kicker reads as
   part of the system rather than a coloured line of text */
.ga-kicker{
  display:inline-block; margin:0 auto; padding:9px 18px; border-radius:999px;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 8px 24px -14px rgba(10,15,30,.4);
  font-size:13.5px; font-weight:700; letter-spacing:.01em; color:var(--royal);
}
.ga-hero-claim{
  margin:30px auto 0; max-width:32ch;
  font-family:var(--display); font-weight:700; font-size:clamp(19px,2.1vw,24px);
  line-height:1.25; letter-spacing:-.02em; color:var(--ink);
}
.ga-hero h1{
  margin:18px auto 0; color:var(--ink); max-width:18ch;
  font-size:clamp(38px,6.4vw,74px); font-weight:700; line-height:1.02; letter-spacing:-.04em;
}
.ga-hero-lede{ margin:24px auto 0; max-width:62ch; font-size:18px; line-height:1.55; color:var(--body); }
.ga-hero-lede b{ color:var(--ink); font-weight:600; }
.ga-cta{
  display:inline-flex; align-items:center; justify-content:center;
  margin:28px auto 0; padding:20px 42px; border-radius:14px;
  font-size:18px; font-weight:700; letter-spacing:-.01em;
  background:var(--cta); color:#12121A; border:0; cursor:pointer;
  font-family:var(--text); box-shadow:0 22px 50px -18px rgba(16,24,60,.45);
  transition:transform .18s var(--ease), background-color .18s var(--ease);
}
.ga-cta:hover{ background:#FFE873; transform:translateY(-1px); }
.ga-cta:active{ transform:translateY(1px); }
.ga-ticks{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px;
  /* above the CTA, so they sit on the light half of the render and can be
     read: the ramp to indigo starts right where they used to be */
  margin:24px 0 0; padding:0; list-style:none;
  font-size:13.5px; font-weight:600; color:var(--body);
}
.ga-ticks li{ display:flex; align-items:center; gap:8px; }
.ga-ticks li::before{ content:"\2713"; color:var(--royal); font-weight:700; }

/* ------------------------------------------------------------ brand strip */
/* the strip lives inside the hero now, on the dark base of the render, so it
   carries no ground of its own and its text goes light */
.cp-strip{ margin-top:52px; padding-top:30px; border-top:1px solid rgba(255,255,255,.16); }
.cp-strip-line{ color:rgba(255,255,255,.72); }
.cp-strip-line{
  text-align:center; font-size:12.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; margin:0 0 18px;
}
.cp-strip-marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.cp-strip-track{ display:flex; gap:14px; width:max-content; animation:cp-stripScroll 32s linear infinite; }
@keyframes cp-stripScroll{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }
.cp-strip-chip{
  font-family:var(--display); font-weight:700; font-size:16px; color:#fff;
  white-space:nowrap; padding:9px 10px;
}

/* ------------------------------------------------------ alternating rows
   One per pillar: short copy on one side, that pillar's page in the app on
   the other, sides swapping down the page. The shot gets the wider column,
   and .flip has to swap the widths as well as the order or every second row
   puts the screenshot in the narrow one. */
.ga-row{ display:grid; grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr); gap:52px; align-items:center; }
.ga-row + .ga-row{ margin-top:64px; padding-top:64px; border-top:1px solid var(--line); }
.ga-row.flip{ grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr); }
.ga-row.flip > .ga-row-copy{ order:2; }
.ga-row-n{
  display:block; font-size:12px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--royal); margin-bottom:12px;
}
.ga-row h3{ font-size:clamp(22px,2.4vw,28px); font-weight:700; line-height:1.15; }
.ga-row ul{ margin:16px 0 0; padding:0; list-style:none; }
.ga-row li{ position:relative; padding-left:22px; margin-bottom:9px; font-size:15.5px; line-height:1.5; }
.ga-row li::before{ content:""; position:absolute; left:0; top:.58em; width:7px; height:7px; border-radius:50%; background:var(--accent); }
.ga-row-why{
  margin:18px 0 0; padding:14px 16px; border-radius:12px;
  background:var(--tint); border-left:3px solid var(--band);
  font-size:15px; line-height:1.5;
}
.ga-row-why b{ color:var(--ink); }
.ga-hero-shot{ margin:44px auto 0; max-width:1000px; }
.ga-shot{
  margin:0; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:0 28px 60px -34px rgba(10,15,30,.4);
  display:flex; flex-direction:column;
}
.ga-shot img{ width:100%; display:block; border-bottom:1px solid var(--line); }
.ga-shot figcaption{ padding:13px 18px; font-size:13px; color:var(--muted); background:#fff; }

/* ------------------------------------------------------- feature marquee */
.cp-run-row{
  overflow:hidden; margin-top:26px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}
.cp-run-track{ display:flex; gap:18px; width:max-content; padding:4px 24px; }
.cp-run-row--l .cp-run-track{ animation:cp-runLeft 60s linear infinite; }
.cp-run-row--r .cp-run-track{ animation:cp-runRight 60s linear infinite; }
@keyframes cp-runLeft{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }
@keyframes cp-runRight{ from{ transform:translate3d(-50%,0,0); } to{ transform:translate3d(0,0,0); } }
.cp-run-row:hover .cp-run-track{ animation-play-state:paused; }
.cp-run-card{
  flex:0 0 auto; width:280px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-card); padding:20px;
}
.cp-run-card h3{ margin-top:0; font-size:17px; font-weight:700; letter-spacing:-.015em; }
.cp-run-card p{ margin:8px 0 0; font-size:14px; line-height:1.5; color:var(--body); }

/* ------------------------------------------------------ results carousel */
.cp-results-wrap{ margin-top:44px; }
.cp-results-track{
  display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:20px 10px 28px; scrollbar-width:none;
}
.cp-results-track::-webkit-scrollbar{ display:none; }
.cp-result-card{
  flex:0 0 auto; width:260px; scroll-snap-align:center;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:26px 22px; display:flex; flex-direction:column; gap:9px;
  transform:scale(.94); opacity:.72;
  transition:transform .3s var(--ease), opacity .3s var(--ease), box-shadow .3s var(--ease);
}
.cp-result-card.is-active{ transform:scale(1.05); opacity:1; box-shadow:0 34px 64px -30px rgba(16,24,40,.36); }
.cp-result-top{ display:flex; align-items:center; gap:10px; }
.cp-result-mark{
  width:34px; height:34px; border-radius:10px; background:var(--royal); color:#fff;
  font-family:var(--display); font-weight:700; font-size:14px; display:grid; place-items:center; flex:0 0 auto;
}
.cp-result-name{ display:block; font-family:var(--display); font-weight:700; font-size:15px; color:var(--ink); }
.cp-result-cat{ display:block; font-size:12px; color:var(--muted); }
.cp-result-label{ font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:6px; }
.cp-result-n{ font-family:var(--display); font-weight:700; font-size:clamp(30px,4vw,38px); letter-spacing:-.03em; color:var(--band); line-height:1.1; }
.cp-result-sub{ font-size:13px; color:var(--body); }
.cp-result-pill{
  align-self:flex-start; margin-top:auto; font-size:11.5px; font-weight:700;
  color:var(--royal); background:var(--tint); border:1px solid #DDE3FF; padding:5px 12px; border-radius:999px;
}
.cp-dots{ display:flex; justify-content:center; gap:8px; margin-top:2px; }
.cp-dot{ width:8px; height:8px; border-radius:50%; background:var(--line); border:0; cursor:pointer; padding:0; transition:width .2s var(--ease), background-color .2s var(--ease); }
.cp-dot.is-active{ background:var(--royal); width:22px; border-radius:999px; }
.cp-dot:focus-visible{ outline:2px solid var(--royal); outline-offset:3px; }

@media (prefers-reduced-motion:reduce){
  .cp-strip-marquee,.cp-run-row{ overflow-x:auto; }
  .cp-strip-track,.cp-run-track{ animation:none; }
}
@media (max-width:1040px){
}
@media (max-width:900px){
  /* .ga-row.flip out-specifies a bare .ga-row, so stacking has to name it */
  .ga-row,.ga-row.flip{ grid-template-columns:1fr; gap:26px; }
  .ga-row.flip > .ga-row-copy{ order:0; }
  .ga-row + .ga-row{ margin-top:44px; padding-top:44px; }
}
@media (max-width:860px){
  .cp-how-grid,  .ga-head{ margin-bottom:38px; }
  .ga-hero{ padding-bottom:64px; }
}

/* ------------------------------------------------------------ the CTA end */
.ga-end{ position:relative; overflow:hidden; background:var(--band); padding:88px 0; }
.ga-end::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(760px 420px at 18% 108%, rgba(14,16,22,.45), transparent 62%);
}
.ga-end .shell{ position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.ga-end h2{ color:#fff; font-size:clamp(28px,3.6vw,42px); font-weight:700; line-height:1.1; }
/* scoped to the copy column: the quiz panel is inside .ga-end too, and a bare
   .ga-end p paints and resizes its hints as if they were headline copy */
.ga-end-copy p{ margin:16px 0 0; color:rgba(255,255,255,.82); font-size:17px; max-width:44ch; }
.ga-end .lm-trust{ margin-top:26px; }
.ga-end .lm-trust span{ color:#fff; background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.24); }

/* ----------------------------------------------------------- quiz surface
   One form on the page, in the end card, because assets/site.js binds a
   single #auditform. The hero button scrolls to it rather than opening a
   second copy in a dialog. */
.ga-panel{
  background:rgba(255,255,255,.96); border-radius:var(--r-lg); padding:28px;
  box-shadow:0 30px 70px -30px rgba(10,15,30,.55);
}
.ga-panel h3{ font-size:20px; font-weight:700; }
.ga-panel .sub{ margin:7px 0 20px; font-size:14.5px; color:var(--body); }
.ga-panel{ position:relative; }

@media (max-width:860px){
  .ga-end .shell{ grid-template-columns:1fr; gap:34px; }
  .ga-end-copy p{ max-width:none; }
}

/* ------------------------------------------------------------ the form
   Selects: the audit asks three of its questions as a list, and nothing else
   in this file has ever needed one. Matched to .field input, with the native
   arrow replaced because Safari will not tint it. */
.field select{
  height:46px; padding:0 40px 0 15px; border-radius:10px;
  background:rgba(255,255,255,.85) no-repeat right 14px center / 11px 7px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23667085' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  border:1px solid rgba(10,15,30,.14); color:var(--ink);
  font-family:var(--text); font-size:15.5px; appearance:none; -webkit-appearance:none;
  transition:border-color .2s var(--ease), background-color .2s var(--ease);
}
.field select:focus{ outline:none; border-color:var(--royal); background-color:#fff; }
.field.is-bad select{ border-color:#B42318; background-color:#FFF7F7; }

/* One question on screen at a time. The steps are a presentation layer over
   the ordinary audit form: the last step submits, so assets/site.js posts,
   validates and swaps in the calendar exactly as it does on /audit. */
.lm-quiz-head{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.lm-back{
  width:30px; height:30px; flex:none; display:grid; place-items:center;
  border-radius:8px; border:1px solid rgba(10,15,30,.14);
  background:#fff; color:var(--ink); cursor:pointer; font-size:15px;
}
.lm-back[hidden]{ display:none; }
.lm-count{ font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.lm-rail{ flex:1; height:4px; border-radius:999px; background:rgba(10,15,30,.09); overflow:hidden; }
.lm-rail i{ display:block; height:100%; background:var(--royal); border-radius:999px; transition:width .35s var(--ease); }
/* .btn sets display:inline-flex, which beats the browser's own [hidden]
   rule, so the submit button would sit under Continue on every step. */
.ga-panel .btn[hidden]{ display:none; }
.lm-q{ display:none; }
.lm-q.is-on{ display:block; }
.lm-q .field{ margin-bottom:6px; }
.lm-q label{ font-size:16px; font-weight:700; letter-spacing:0; text-transform:none; color:var(--ink); margin-bottom:4px; }
.lm-hint{ margin:2px 0 14px; font-size:13.5px; color:var(--muted); }
.lm-consent{ margin:14px 0 0; font-size:11.5px; line-height:1.5; color:var(--muted); }

/* The booking step that replaces the form once /api/audit accepts it. The
   markup comes from assets/site.js, which is shared with /audit; only the
   surface is ours. */
.form-done{ color:var(--body); }
.form-done h3{ font-size:20px; font-weight:700; margin-bottom:6px; }
.form-done p{ margin:0 0 18px; font-size:15px; }
.cal-frame{ min-height:620px; border-radius:12px; overflow:hidden; background:#fff; }
.cal-frame iframe{ width:100%; min-height:620px; border:0; display:block; }

/* The booking step takes the whole shell. GHL's widget stacks its date
   picker above its slots whenever the column is narrow, and that stack is
   most of the calendar's height; the pitch beside it has already done its
   job by the time anyone is looking at a calendar. site.js marks the panel
   on success, so the row reacts to that mark rather than needing a second
   hook of its own. */
.ga-end .shell:has(.ga-panel.is-booking){ grid-template-columns:1fr; }
.ga-end .shell:has(.ga-panel.is-booking) .ga-end-copy{ display:none; }
.ga-panel.is-booking{ padding:30px; }
/* The panel's own heading sells the quiz ("eight quick questions"),
   which is the wrong thing to read once the questions are answered and
   a calendar is on screen. Everything but the booking step steps out. */
.ga-panel.is-booking > :not(#auditdone){ display:none; }
.ga-panel.is-booking .cal-frame,
.ga-panel.is-booking .cal-frame iframe{ min-height:780px; }
.cal-frame .cal-fallback{ padding:26px; text-align:center; font-size:15.5px; color:var(--muted); }

/* ----------------------------------------------------------- the problem
   A white and blue ground rather than a full-bleed indigo: paper easing into
   the pale blue, white cards on top, and the accents in the blue family. The
   one yellow has nothing to push against on near-white, so the emphasis here
   is royal. */
.ga-problem{
  position:relative; overflow:hidden; padding:88px 0;
  background:linear-gradient(168deg,#FFFFFF 0%, var(--tint) 46%, #E9EFFD 100%);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.ga-problem .shell{ position:relative; z-index:1; }
.ga-problem-head{ display:grid; grid-template-columns:1.08fr .92fr; gap:56px; align-items:end; }
.ga-problem-kicker{
  margin:0 0 14px; font-size:15px; font-weight:700; color:var(--royal);
}
.ga-problem h2{
  color:var(--ink); font-size:clamp(30px,4.2vw,48px); font-weight:700;
  line-height:1.06; letter-spacing:-.035em;
}
.ga-hl{ color:var(--royal); }
.ga-problem-intro b{ display:block; color:var(--ink); font-size:17px; font-weight:700; margin-bottom:12px; }
.ga-problem-intro p{ margin:0; color:var(--body); font-size:16.5px; line-height:1.6; }
.ga-problem-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:52px; }
.ga-problem-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:24px 22px; box-shadow:0 22px 48px -32px rgba(10,15,30,.28);
}
.ga-problem-card span{
  display:block; font-size:11.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent); margin-bottom:10px;
}
.ga-problem-card h3{
  color:var(--ink); font-size:20px; font-weight:700; line-height:1.14; letter-spacing:-.025em;
}
.ga-problem-card p{ margin:12px 0 0; color:var(--body); font-size:14.5px; line-height:1.55; }

/* the marquee cards carry a question, not a picture of one */
.cp-run-card .cp-run-tag{
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--royal); margin-bottom:10px;
}
.cp-run-card .cp-run-id{ color:var(--muted); font-weight:600; }

@media (max-width:1040px){
  .ga-problem-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:860px){
  .ga-problem-head{ grid-template-columns:1fr; gap:26px; align-items:start; }
  .ga-problem-grid{ grid-template-columns:1fr; }
}

/* ------------------------------------------------------------- the demo
   The real app in a browser frame, live on the page. It is lazy, so a visitor
   who never scrolls this far never loads it, and there is no screenshot
   fallback: a fallback is invisible until the one time it fires, and then it
   is the thing the page gets judged on. The app has its own narrow layout, so
   at any width it renders itself rather than a picture of itself. */
.ga-demo{
  margin:44px auto 0; max-width:1120px;
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  background:#fff; box-shadow:0 44px 90px -44px rgba(10,15,30,.46);
}
.ga-demo-bar{
  display:flex; align-items:center; gap:14px; padding:12px 16px;
  background:#F2F5FB; border-bottom:1px solid var(--line);
}
.ga-demo-dots{ display:flex; gap:6px; flex:none; }
.ga-demo-dots i{ width:11px; height:11px; border-radius:50%; background:#D5DCEA; }
.ga-demo-url{
  flex:1; text-align:center; font-size:12.5px; color:var(--muted);
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:6px 14px; max-width:420px; margin:0 auto;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.ga-demo-open{ flex:none; font-size:12.5px; font-weight:700; color:var(--royal); }
.ga-demo-stage{ position:relative; aspect-ratio:1360/990; background:#F7F9FD; }
.ga-demo-frame{
  position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
}
.ga-demo-note{ margin:22px auto 0; text-align:center; font-size:13.5px; color:var(--muted); max-width:72ch; }

@media (max-width:640px){
  /* a short frame on a phone is unreadable; give it height instead */
  .ga-demo-stage{ aspect-ratio:3/4; }
}