/* ============================================================================
   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-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; }
}