/* =====================================================================================
   Modern.ai V0.3 shared styles. Tokens + components harvested from the live site's CSS.
   ===================================================================================== */
:root[data-theme="dark"]{
  --surface:#0b0614; --raised:#120a22; --soft:#1b102e; --sunken:#080411;
  --fg:#ffffff; --dim:#b9a9d6; --faint:#7d6b9e;
  --line:#2c1a49; --line-soft:#3a235f;
  --action:#8b5cf6; --action-soft:#b69cff;
  --green:#69e6a3; --amber:#f6c768; --red:#ff6b7a;
  --k:#14A8F5;
  --scrim:11,6,20; --scrim-page:11,6,20;
  --card-shadow:0 20px 60px rgba(0,0,0,.45);
}
:root[data-theme="light"]{
  --surface:#f6f4fc; --raised:#ffffff; --soft:#f1ebfb; --sunken:#ece6f8;
  --fg:#0b0614; --dim:#574f6b; --faint:#8b8399;
  --line:#e7e2f1; --line-soft:#dad1ec;
  --action:#7c3aed; --action-soft:#6d28d9;
  --green:#15924c; --amber:#b7791f; --red:#e11d48;
  --k:#0e7dc0;
  --scrim:246,244,252; --scrim-page:236,234,246;
  --card-shadow:0 18px 50px rgba(80,60,140,.14);
}
:root{
  --grad-spectrum:linear-gradient(96deg,#2b6fff,#b44dff 45%,#ff4fa3 75%,#ffb46b);
  --grad-spectrum-soft:linear-gradient(96deg,#2b6fffbf,#b44dffbf 45%,#ff4fa3bf 75%,#ffb46bbf);
  --grad-btn:linear-gradient(180deg,#755ad9 0%,#4726bb 100%);
  --grad-text:linear-gradient(99deg,#714dff,#9c83ff 30%,#e770ff 75%);
  --font-display:'Jost',Poppins,'Century Gothic','Segoe UI',sans-serif;
  --font-body:'Inter',ui-sans-serif,system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --vh:1vh;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--surface); color:var(--fg);
  font-family:var(--font-body); font-size:16px; line-height:1.6;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
  transition:background .35s ease,color .35s ease;
}
::selection{background:#6B4CF0;color:#fff}
img{max-width:100%}

/* ---------------- buttons (lifted verbatim from shipped site CSS) ---------------- */
.cta{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;cursor:pointer;
  color:#fff;border:none;border-radius:999px;padding:15px 32px;
  font:600 16px var(--font-body);white-space:nowrap;
  background:var(--grad-spectrum);background-size:220% 100%;
  transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s,background .14s,filter .2s;
  position:relative;overflow:hidden;
}
.cta:hover{filter:saturate(1.08);transform:translateY(-2px);box-shadow:0 14px 38px #8b5cf680}
.cta:active{transform:translateY(0) scale(.99)}
.cta:after{
  content:"";pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent);
  width:55%;height:100%;transition:left .6s cubic-bezier(.22,1,.36,1);
  position:absolute;top:0;left:-130%;transform:skew(-18deg);
}
.cta:hover:after{left:155%}
.cta-glow{animation:2.6s cubic-bezier(.4,0,.6,1) infinite ctaPulse,7s linear infinite ctaPan}
.cta-glow:hover{animation-play-state:paused}
@keyframes ctaPulse{0%,to{box-shadow:0 8px 26px #b44dff73,0 0 #ff4fa380}50%{box-shadow:0 12px 42px #b44dffad,0 2px 16px #2bb7ff59,0 0 0 8px #ff4fa300}}
@keyframes ctaPan{0%{background-position:0% 0}50%{background-position:100% 0}to{background-position:0% 0}}
.btn2{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;cursor:pointer;
  color:var(--fg);border-radius:999px;padding:15px 30px;font:600 15.5px var(--font-body);white-space:nowrap;
  background:linear-gradient(var(--raised),var(--raised)) padding-box,var(--grad-spectrum-soft) border-box;
  border:1px solid transparent;
  transition:transform .2s cubic-bezier(.22,1,.36,1),background .16s,border-color .16s,box-shadow .2s;
}
.btn2:hover{
  transform:translateY(-2px);box-shadow:0 10px 30px #b44dff47,0 3px 12px #ff4fa32e;
  background:linear-gradient(var(--soft),var(--soft)) padding-box,var(--grad-spectrum) border-box;
}
.btn2:active{transform:translateY(0) scale(.99)}
.cta.sm{padding:11px 22px;font-size:14px}
.btn2.sm{padding:10px 20px;font-size:13.5px}
@media (prefers-reduced-motion:reduce){.cta-glow{animation:none}.cta:after{display:none}}

.hl{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.check{
  background:var(--grad-btn);border-radius:96px;
  width:20px;height:20px;min-width:20px;font-size:13px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;color:#fff;
}

/* ---------------- nav ---------------- */
nav.top{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;gap:26px;
  padding:14px clamp(18px,3.2vw,44px);
  transition:background .35s,border-color .35s,backdrop-filter .35s;
  border-bottom:1px solid transparent;
}
nav.top.scrolled{background:rgba(var(--scrim),.78);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom-color:var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--fg)}
.brand img.mark{width:30px;height:30px;border-radius:50%}
.brand img.word{height:15px;width:auto;display:block}
[data-theme="light"] .brand img.word{filter:invert(1)}
.nav-links{display:flex;align-items:center;gap:4px;margin-left:8px}
.nav-links > .ni{position:relative}
.nl{
  display:inline-flex;align-items:center;gap:6px;color:var(--dim);text-decoration:none;
  font-size:14px;font-weight:500;padding:9px 12px;border-radius:9px;cursor:pointer;
  background:none;border:0;font-family:var(--font-body);transition:color .18s,background .18s;
}
.nl:hover,.nl[aria-current="page"]{color:var(--fg);background:var(--soft)}
.nl .car{font-size:9px;opacity:.7;transition:transform .2s}
.ni:hover .car,.ni:focus-within .car{transform:rotate(180deg)}
.soon{
  font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:#fff;
  background:var(--grad-btn);border-radius:4px;padding:2px 6px;
}
.dd{
  position:absolute;top:calc(100% + 8px);left:0;min-width:220px;
  background:var(--raised);border:1px solid var(--line);border-radius:16px;
  padding:8px;box-shadow:var(--card-shadow);
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .18s,transform .18s,visibility .18s;
}
.ni:hover .dd,.ni:focus-within .dd{opacity:1;visibility:visible;transform:none}
.dd a,.dd span{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  color:var(--dim);text-decoration:none;font-size:13.5px;font-weight:500;
  padding:9px 12px;border-radius:10px;
}
.dd a:hover{color:var(--fg);background:var(--soft)}
.mono-tag{font-family:var(--mono);font-size:9px;letter-spacing:.08em;color:var(--faint);border:1px solid var(--line);border-radius:3px;padding:1px 5px}
.nav-spacer{flex:1}
.tgl{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:999px;cursor:pointer;
  background:var(--soft);border:1px solid var(--line);color:var(--dim);
  transition:color .2s,border-color .2s,transform .2s;
}
.tgl:hover{color:var(--fg);border-color:var(--line-soft);transform:translateY(-1px)}
.tgl svg{width:17px;height:17px}
[data-theme="dark"] .tgl .ic-sun{display:none}
[data-theme="light"] .tgl .ic-moon{display:none}
.nav-login{color:var(--dim);text-decoration:none;font-size:14px;font-weight:500;padding:8px 6px}
.nav-login:hover{color:var(--fg)}
#menuBtn{display:none}

/* ---------------- layout ---------------- */
main{position:relative;z-index:10}
section{position:relative;padding:110px clamp(20px,5vw,72px)}
section.tall{min-height:calc(var(--vh)*100);display:flex;align-items:center}
.wrap{width:100%;max-width:1180px;margin:0 auto}
.eyebrow{
  font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.14em;
  color:var(--dim);text-transform:uppercase;
  display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;
}
.eyebrow .tick{width:7px;height:7px;border-radius:50%;background:var(--grad-text);box-shadow:0 0 10px 1px rgba(224,83,176,.7)}
.eyebrow .new{color:#fff;background:var(--grad-btn);border-radius:4px;padding:2px 7px;font-size:10.5px;letter-spacing:.12em}
h1,h2{font-family:var(--font-display);font-weight:600;letter-spacing:-.015em;line-height:1.08;text-wrap:balance}
h1{font-size:clamp(30px,5.2vw,72px)}
h2{font-size:clamp(27px,4.2vw,54px)}
h3{font-family:var(--font-display);font-weight:600}
.lede{color:var(--dim);font-size:clamp(15.5px,1.3vw,18px);line-height:1.7;margin-top:24px;max-width:56ch}
.copy{max-width:640px;position:relative}
.copy.center{margin:0 auto;text-align:center}
.copy.center .lede{margin-left:auto;margin-right:auto}
.copy.right{margin-left:auto}
.copy.scrimmed::before{
  content:"";position:absolute;inset:-72px -96px;z-index:-1;
  background:radial-gradient(ellipse closest-side at 50% 50%,rgba(var(--scrim),.78) 0%,rgba(var(--scrim),.38) 55%,rgba(var(--scrim),0) 97%);
  pointer-events:none;
}
.cta-row{display:flex;align-items:center;gap:14px;margin-top:34px;flex-wrap:wrap}
.copy.center .cta-row{justify-content:center}
.rv{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
.on .rv{opacity:1;transform:none}
.on .rv.d1{transition-delay:.08s}.on .rv.d2{transition-delay:.16s}.on .rv.d3{transition-delay:.24s}.on .rv.d4{transition-delay:.32s}.on .rv.d5{transition-delay:.4s}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ---------------- cards + grids ---------------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.card{
  border:1px solid var(--line);border-radius:20px;padding:24px;
  background:var(--raised);transition:transform .22s,border-color .22s,box-shadow .25s;
}
.card:hover{transform:translateY(-3px);border-color:var(--line-soft);box-shadow:var(--card-shadow)}
.card h3{font-size:17px;margin-bottom:8px}
.card p{color:var(--dim);font-size:13.5px;line-height:1.6}
.card .num{font-family:var(--mono);font-size:12px;color:var(--action-soft);letter-spacing:.1em;display:block;margin-bottom:10px}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--k);text-transform:uppercase;display:block;margin-bottom:10px}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stats.three{grid-template-columns:repeat(3,1fr)}
.stat{padding:30px 10px;text-align:center;border:1px solid var(--line);border-radius:20px;background:var(--raised)}
.stat .num{font-family:var(--mono);font-weight:600;font-size:clamp(28px,3.4vw,46px);letter-spacing:-.02em;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .lbl{color:var(--dim);font-size:13px;margin-top:10px;line-height:1.5;padding:0 10px}

/* pills + chips */
.chip{
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--dim);
  border:1px solid var(--line);border-radius:999px;padding:8px 14px;
  background:var(--raised);display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
}
.chip img{width:15px;height:15px;object-fit:contain}
.chip i{font-style:normal;font-size:10px;color:var(--faint);letter-spacing:.12em}
.stat-line{font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;color:var(--dim);margin-top:26px;text-transform:uppercase}
.pillrow{display:flex;flex-wrap:wrap;gap:10px 14px}
.pill{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-size:13px;font-weight:500;color:var(--dim);
  border:1px solid var(--line);border-radius:999px;padding:8px 15px;background:rgba(var(--scrim),.4);
}
.pill b{color:var(--green);font-weight:700}

/* product screenshots, theme-paired */
.shotframe{
  border:1px solid var(--line);border-radius:18px;overflow:hidden;
  background:var(--sunken);box-shadow:var(--card-shadow);
}
.shotframe .bar{display:flex;align-items:center;gap:8px;padding:10px 16px;background:var(--raised);border-bottom:1px solid var(--line)}
.shotframe .bar .dot{width:9px;height:9px;border-radius:50%}
.shotframe .bar .url{font-family:var(--mono);font-size:11px;color:var(--faint);margin-left:8px}
.shotframe img.shot{display:block;width:100%;height:auto}

/* tabs */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.tab{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--dim);cursor:pointer;
  border:1px solid var(--line);border-radius:999px;padding:8px 16px;background:none;text-transform:uppercase;
  transition:color .2s,border-color .2s,background .2s;
}
.tab:hover{color:var(--fg)}
.tab[aria-selected="true"]{color:#fff;background:var(--grad-btn);border-color:transparent}
[data-theme="light"] .tab[aria-selected="true"]{color:#fff}

/* retention table */
.rt{border:1px solid var(--line);border-radius:20px;background:var(--raised);overflow:hidden}
.rt .row{display:grid;grid-template-columns:170px 90px 1fr;gap:14px;align-items:center;padding:14px 20px;border-bottom:1px solid var(--line)}
.rt .row:last-child{border-bottom:0}
.rt .row.head{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--faint);text-transform:uppercase}
.rt .p{font-weight:600;font-size:14px}
.rt .w{font-family:var(--mono);font-size:12.5px;color:var(--dim)}
.rt .barwrap{position:relative;height:10px;border-radius:99px;background:var(--soft);overflow:hidden}
.rt .bar{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:99px;background:var(--faint);transition:width 1.2s cubic-bezier(.22,.61,.36,1)}
.rt .row.modern .p{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.rt .row.modern .bar{background:var(--grad-spectrum)}
.rt .note{font-size:11.5px;color:var(--faint);padding:12px 20px;border-top:1px solid var(--line)}
.on .rt .bar{width:var(--w)}
@media (prefers-reduced-motion:reduce){.rt .bar{transition:none;width:var(--w)}}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;counter-reset:step}
.steps.five{grid-template-columns:repeat(5,1fr)}
.step{border:1px solid var(--line);border-radius:18px;padding:20px;background:var(--raised)}
.step .sn{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--action-soft);display:block;margin-bottom:10px}
.step h3{font-size:15.5px;margin-bottom:6px}
.step p{color:var(--dim);font-size:13px;line-height:1.55}

/* faq */
.faq{max-width:760px;margin:40px auto 0;display:flex;flex-direction:column;gap:10px}
.faq details{border:1px solid var(--line);border-radius:16px;background:var(--raised);overflow:hidden}
.faq summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:18px 22px;font-weight:600;font-size:15px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--action-soft);font-size:18px;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 22px 18px;color:var(--dim);font-size:14px;line-height:1.65}

/* code blocks */
.code{
  font-family:var(--mono);font-size:12.5px;line-height:1.7;color:var(--dim);
  background:var(--sunken);border:1px solid var(--line);border-radius:14px;padding:16px 18px;
  overflow-x:auto;white-space:pre;
}
.code .hi{color:var(--action-soft)}
.copybtn{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--dim);cursor:pointer;
  border:1px solid var(--line);border-radius:6px;padding:4px 10px;background:var(--raised);
  transition:color .15s,border-color .15s,transform .1s;
}
.copybtn:hover{color:var(--fg);border-color:var(--line-soft)}
.copybtn:active{transform:scale(.96)}

/* forms (UI only in concept) */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:12.5px;font-weight:500;color:var(--dim)}
.field input,.field select{
  font:14px var(--font-body);color:var(--fg);
  background:var(--sunken);border:1px solid var(--line);border-radius:10px;padding:11px 14px;outline:none;
  transition:border-color .2s;
}
.field input:focus,.field select:focus{border-color:var(--action)}

/* customer + bank strips */
.cust{display:flex;align-items:center;justify-content:center;gap:clamp(18px,3.5vw,44px);flex-wrap:wrap}
.cust img{height:22px;width:auto;opacity:.85;transition:opacity .2s}
.cust img:hover{opacity:1}
[data-theme="light"] .cust img{filter:invert(1);opacity:.7}
.cust .more{font-size:13px;color:var(--faint)}
.banks{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
.banks .bank{
  display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:500;color:var(--dim);
  border:1px solid var(--line);border-radius:999px;padding:9px 16px;background:var(--raised);
}
.banks .bank img{width:18px;height:18px;object-fit:contain;border-radius:4px}

/* tiers (pricing) */
.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tier{
  position:relative;border:1px solid var(--line);border-radius:22px;padding:26px 22px;
  background:var(--raised);display:flex;flex-direction:column;
}
.tier.pop{
  border:1px solid transparent;
  background:linear-gradient(var(--raised),var(--raised)) padding-box,var(--grad-spectrum-soft) border-box;
  box-shadow:0 18px 60px rgba(180,77,255,.22);
}
.tier .ribbon{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:#fff;
  background:var(--grad-btn);border-radius:999px;padding:4px 12px;white-space:nowrap;
}
.tier .tk{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--faint)}
.tier .tk .ai{color:var(--action-soft)}
.tier .price{font-family:var(--font-display);font-weight:600;font-size:42px;margin-top:10px}
.tier .price small{font-size:15px;color:var(--faint);font-weight:500}
.tier .who{color:var(--dim);font-size:13px;margin:6px 0 18px;min-height:38px}
.tier ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:22px}
.tier li{display:flex;gap:9px;font-size:13px;color:var(--dim);line-height:1.45}
.tier li .check{width:17px;height:17px;min-width:17px;font-size:10px;margin-top:1px}
.tier .cta,.tier .btn2{justify-content:center;margin-top:auto;padding:12px 18px;font-size:14px}
.tier .note{font-size:11.5px;color:var(--faint);text-align:center;margin-top:10px}
.tier .note a{color:var(--action-soft)}
.usage{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.ucard{display:flex;gap:16px;border:1px solid var(--line);border-radius:20px;padding:22px;background:var(--raised)}
.ucard .ic{width:40px;height:40px;min-width:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--soft);border:1px solid var(--line);font-size:17px}
.ucard h3{font-size:15.5px;margin-bottom:5px}
.ucard p{color:var(--dim);font-size:13px;line-height:1.55}
.trust{display:flex;flex-wrap:wrap;gap:12px 30px;justify-content:center;margin-top:36px}
.trust span{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--dim)}
.partners{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:44px;border-top:1px solid var(--line);padding-top:30px}
.partner{display:flex;flex-direction:column;align-items:center;gap:7px;border:1px solid var(--line);border-radius:14px;padding:14px 22px;background:rgba(var(--scrim),.35);min-width:170px}
.partner .pk{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--faint)}
.partner .pn{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:500;font-size:14.5px}
.partner img{width:17px;height:17px;object-fit:contain}

/* marquee */
.marquee{overflow:hidden;position:relative;width:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee .track{display:flex;gap:12px;width:max-content;animation:mq 44s linear infinite}
.marquee:hover .track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee .track{animation:none}}

/* footer */
footer.site{
  width:100%;max-width:1180px;margin:80px auto 0;
  padding:44px 42px 24px;position:relative;z-index:10;
  background:rgba(var(--scrim),.92);
  border:1px solid var(--line);border-bottom:0;border-radius:28px 28px 0 0;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.foot-brand p{color:var(--dim);font-size:13.5px;line-height:1.6;margin-top:14px;max-width:30ch}
.fcol .fh{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--faint);margin-bottom:14px}
.fcol a,.fcol span{display:flex;align-items:center;gap:8px;color:var(--dim);text-decoration:none;font-size:13.5px;padding:5px 0}
.fcol a:hover{color:var(--fg)}
.foot-bottom{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid var(--line);margin-top:38px;padding:22px 0 8px;
  color:var(--faint);font-size:12.5px;
}
.foot-bottom .links{display:flex;gap:20px}
.foot-bottom a{color:var(--faint);text-decoration:none}
.foot-bottom a:hover{color:var(--fg)}

/* subpage hero */
.page-hero{padding-top:170px}
.page-hero .back{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--faint);text-decoration:none;display:inline-block;margin-bottom:20px;text-transform:uppercase}
.page-hero .back:hover{color:var(--fg)}

/* ambient canvas for subpages */
#amb{position:fixed;inset:0;z-index:0;pointer-events:none}

/* ---------------- responsive ---------------- */
@media (max-width:1080px){
  .grid4,.steps{grid-template-columns:repeat(2,1fr)}
  .steps.five{grid-template-columns:repeat(2,1fr)}
  .tiers{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:980px){
  .nav-links,.nav-login{display:none}
  #menuBtn{display:inline-flex}
  nav.top.open .nav-links{
    display:flex;flex-direction:column;align-items:stretch;gap:2px;
    position:absolute;top:100%;left:12px;right:12px;
    background:var(--raised);border:1px solid var(--line);border-radius:18px;
    padding:12px;box-shadow:var(--card-shadow);
  }
  nav.top.open .dd{position:static;opacity:1;visibility:visible;transform:none;border:0;box-shadow:none;background:transparent;padding:0 0 6px 14px}
}
@media (max-width:720px){
  section{padding:90px 20px}
  .grid2,.grid3,.grid4,.steps,.steps.five,.tiers,.usage,.stats,.stats.three{grid-template-columns:1fr}
  .rt .row{grid-template-columns:1fr;gap:6px}
  .rt .row.head{display:none}
  .foot-grid{grid-template-columns:1fr}
  nav.top .cta.sm{padding:10px 14px;font-size:12.5px}
  .brand img.word{height:13px}
}

/* ================= V0.4: takeoff chart (deck p4) ================= */
.takeoff-svg{width:100%;height:auto;display:block;overflow:visible}
.takeoff-path{fill:none;stroke:url(#tkGrad);stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(139,92,246,.65))}
.tk-dot{fill:var(--action-soft);opacity:0;transition:opacity .4s}
.tk-dot.lit{opacity:1}
.tk-label{font-family:var(--font-body);font-size:12.5px;fill:var(--dim);opacity:0;transition:opacity .4s}
.tk-year{font-family:var(--mono);font-size:11px;fill:var(--faint)}
.tk-label.lit,.tk-label.lit + .tk-year{opacity:1}
/* holo rainbow, lifted from the live site's .osx .holo treatment: the amber read as a
   warning colour rather than as the brand's signature spectrum. */
.tk-takeoff{font-family:var(--mono);font-size:12px;letter-spacing:.14em;fill:url(#holoGrad);opacity:0;transition:opacity .5s}
.tk-takeoff-sub{font-family:var(--font-body);font-weight:600;font-size:15px;fill:var(--fg);opacity:0;transition:opacity .5s .1s}
.tk-takeoff.lit,.tk-takeoff.lit ~ .tk-takeoff-sub{opacity:1}
.tk-end{fill:url(#holoGrad);opacity:0;filter:drop-shadow(0 0 12px rgba(139,92,246,.85))}
.tk-end.lit{opacity:1;animation:tkEndPulse 2.4s ease-in-out infinite}
@keyframes tkEndPulse{0%,100%{r:7}50%{r:10}}
.tk-cost{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:baseline;justify-content:center;margin-top:26px;border-top:1px solid var(--line);padding-top:20px}
.tk-cost .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--action-soft);text-transform:uppercase}
.tk-cost span{color:var(--dim);font-size:14px}
@media (prefers-reduced-motion:reduce){.tk-end.lit{animation:none}.takeoff-path{stroke-dashoffset:0 !important}.tk-dot,.tk-label,.tk-takeoff,.tk-takeoff-sub{opacity:1 !important}}

/* dead-login flicker: broken status LEDs (motion: fragmentation) */
.dead-login .chip i{animation:deadflick 5.2s steps(1) infinite}
.dead-login .chip:nth-child(2n) i{animation-delay:1.4s}
.dead-login .chip:nth-child(3n) i{animation-delay:2.6s}
.dead-login .chip:nth-child(5n) i{animation-delay:3.7s}
@keyframes deadflick{0%,88%{opacity:1}90%{opacity:.25}92%{opacity:.85}95%{opacity:.3}97%,100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.dead-login .chip i{animation:none}}

/* flow-draw underline (os pipeline) */
.flow-track{position:relative;height:2px;background:var(--line);border-radius:99px;margin:18px 0 0;overflow:hidden}
.flow-track .flow-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--grad-spectrum);border-radius:99px}

/* url-glint sweep */
.glint-host{position:relative;overflow:hidden}
.glint{position:absolute;top:0;bottom:0;width:38%;left:-50%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(182,156,255,.22),transparent);transform:skew(-16deg)}

/* sovereignty frame */
.sovereign-frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.sovereign-frame rect{fill:none;stroke:var(--action);stroke-width:1.6;opacity:.85}

/* anime helpers: elements start hidden only when the driver will run */
html.anim [data-anim] .an{opacity:0}
@media (prefers-reduced-motion:reduce){html.anim [data-anim] .an{opacity:1}}

/* =====================================================================================
   V0.4.1 LIGHT-THEME DESIGN PASS.
   The visual audit flagged 40% of light captures as slop vs 9% of dark: the light theme
   had been DERIVED from dark by token swap instead of designed. Specific measured
   complaints addressed here: gradient-outline buttons "feel unfinished" on white,
   ambient dot field reads as "visual noise without clear purpose", cards float with no
   separation from the ground, and section scrims add texture with no purpose.
   ===================================================================================== */
:root[data-theme="light"]{
  /* real ground/card separation - white cards must sit ON something */
  --surface:#eceaf6;
  --raised:#ffffff;
  --soft:#f4f1fc;
  --sunken:#e3dff2;
  --line:#ddd7ee;
  --line-soft:#c9c0e4;
  --card-shadow:0 10px 34px rgba(70,48,140,.10), 0 2px 6px rgba(70,48,140,.06);
}
/* secondary button: on white a gradient OUTLINE reads unfinished. Give light its own
   confident solid treatment that still pairs with the primary gradient button. */
:root[data-theme="light"] .btn2{
  background:#ffffff;
  border:1.5px solid var(--line-soft);
  box-shadow:0 1px 2px rgba(70,48,140,.06);
  color:#2e1f52;
}
:root[data-theme="light"] .btn2:hover{
  background:#faf8ff;
  border-color:var(--action);
  box-shadow:0 8px 22px rgba(124,58,237,.16);
}
/* cards earn an edge + lift so they read as deliberate objects, not floating text */
:root[data-theme="light"] .card,
:root[data-theme="light"] .tier,
:root[data-theme="light"] .step,
:root[data-theme="light"] .stat,
:root[data-theme="light"] .conn,
:root[data-theme="light"] .ucard,
:root[data-theme="light"] .shotframe,
:root[data-theme="light"] .agent{
  box-shadow:var(--card-shadow);
}
/* the ambient dust field is atmosphere on black and NOISE on white */
:root[data-theme="light"] #amb{opacity:.25}
/* Scrims protect text from a busy 3D scene. This rule used to disable them on light with the
   note "on light the scene is quiet" - which was TRUE when written and measured. It stopped
   being true the moment the light scene was rebuilt to carry real weight: mark depth went from
   0.76x of dark to 1.12x, and the fleet lede immediately became hard to read. The premise the
   exemption rested on was invalidated by a later change, so the exemption goes with it.
   Lighter than the dark scrim, because light copy needs less protection to clear the ground. */
:root[data-theme="light"] main section .copy::before{
  content:"";position:absolute;inset:-52px -40px;z-index:-1;pointer-events:none;
  /* BOTH radii must be <= 50%, not just the vertical one. A radial gradient only completes its
     fade inside its box when its radius reaches the box edge; at 78% horizontal the ramp was
     still at ~0.5 alpha when the element ended and the box clipped it to 0 - a hard vertical
     seam down the page. It was invisible on mobile only because the box is wider than a phone,
     so the cut falls off-screen. On desktop it measured a 49.7 luminance discontinuity at
     x=758, exactly the scrim box's right edge at 759. Same geometry error as the vertical one,
     left in the other axis.
     And --scrim-page, not --scrim: --scrim is 246,244,252 while this theme's real ground is
     #eceaf6, so the scrim was painting LIGHTER than the page it exists to vanish into. */
  background:radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(var(--scrim-page),.94) 0%,
    rgba(var(--scrim-page),.90) 52%,
    rgba(var(--scrim-page),.58) 78%,
    rgba(var(--scrim-page),0) 100%);
}
/* brand lockup: give the wordmark enough size to read as a mark rather than body text */
:root[data-theme="light"] .brand img.word{height:17px}

/* =====================================================================================
   Card links must not inherit the user-agent link colour. `<a class="card">` with only
   text-decoration:none still renders its headings in UA blue (#0000EE) — and purple once
   visited — which is why the Solutions cards showed "Agencies" in blue and "Brands" in
   purple. Anchors that are structural containers inherit theme colour; only real inline
   links keep an accent.
   ===================================================================================== */
a.card, a.card:visited, a.conn, a.conn:visited, a.pill, a.pill:visited,
a.tier, a.tier:visited, a.step, a.step:visited{ color:var(--fg); text-decoration:none; }
a.card h3, a.card h2, a.card p, a.card span,
a.conn span, a.pill, a.step h3, a.step p{ color:inherit; }
a.card p, a.conn span, a.step p{ color:var(--dim); }
a.card .kicker{ color:var(--k); }

/* =====================================================================================
   Click-to-enlarge for product screenshots. The source site ships `class="zoom-img"` on
   its platform shots (26 instances across home/brands/investors); the interaction scan
   caught that the rebuild had inventoried the IMAGES but not the BEHAVIOUR, so the shots
   shipped dead and unreadable at their laid-out size.
   ===================================================================================== */
.shotframe img.shot{cursor:zoom-in}
#lightbox{
  position:fixed; inset:0; z-index:200; display:none;
  align-items:center; justify-content:center;
  background:rgba(var(--scrim),.92); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  padding:clamp(16px,4vw,56px); cursor:zoom-out;
}
#lightbox.open{display:flex}
#lightbox img{
  max-width:100%; max-height:100%; width:auto; height:auto;
  border:1px solid var(--line-soft); border-radius:14px; box-shadow:var(--card-shadow);
  animation:lbIn .22s cubic-bezier(.22,.61,.36,1);
}
@keyframes lbIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
#lightbox .lb-close{
  position:absolute; top:18px; right:22px; width:40px; height:40px; border-radius:999px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  background:var(--raised); border:1px solid var(--line); color:var(--fg);
  font:600 20px/1 var(--font-body);
}
#lightbox .lb-cap{
  position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--dim);
  text-transform:uppercase;
}
@media (prefers-reduced-motion:reduce){#lightbox img{animation:none}}

/* =====================================================================================
   V0.4.2 SUB-PAGE HERO COMPOSITION.
   Native review of brands-light.png: the right ~45% of every sub-page hero was empty.
   Dark mode hid it because the ambient neural field filled that space; light mode runs the
   field at 0.25 opacity, so the composition collapsed to left-aligned text on flat lavender
   and read as a generic AI template. That is a COMPOSITION defect, not a colour one, and it
   is why light carried 40% of the slop flags against dark's 9%.
   Fix: the hero becomes a real two-column layout with a deliberate right-hand element.
   ===================================================================================== */
.page-hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,64px);align-items:center}
.page-hero .copy{max-width:none}
.hero-aside{position:relative;min-height:300px;display:flex;align-items:center;justify-content:center}
/* the aside is a designed spec panel, not a decorative blob: it states what the page proves */
.spec-panel{
  width:100%; border:1px solid var(--line); border-radius:24px; padding:28px;
  background:var(--raised); box-shadow:var(--card-shadow);
  display:flex; flex-direction:column; gap:14px;
}
.spec-panel .sp-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--k);text-transform:uppercase}
.spec-panel .sp-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line)}
.spec-panel .sp-row:last-child{border-bottom:0}
.spec-panel .sp-l{font-size:13.5px;color:var(--dim);line-height:1.45}
.spec-panel .sp-v{font-family:var(--mono);font-size:12.5px;color:var(--fg);white-space:nowrap}
.spec-panel .sp-v.on{color:var(--green)}
.spec-panel .sp-v.soon{color:var(--amber)}
/* short pages (legal, support, roadmap) stay single-column and centred: a deliberate short
   page reads as intentional, whereas a half-empty two-column grid reads as broken */
.page-hero.solo .wrap{display:block}
.page-hero.solo .copy{max-width:640px}
@media (max-width:980px){
  .page-hero .wrap{grid-template-columns:1fr}
  .hero-aside{min-height:0}
}


/* =====================================================================================
   SHIP PASS. Three targeted corrections from Adam's review of the live build.
   ===================================================================================== */

/* Trust-bar checkmarks read as brand-purple, which made them look like decoration rather
   than confirmation. Green is the universal "this is included / this is true" signal. */
.trust .check{
  background:linear-gradient(180deg,#3ddc97 0%,#15a05f 100%);
  color:#04140c;
}
[data-theme="light"] .trust .check{
  background:linear-gradient(180deg,#23c07d 0%,#0e8b4e 100%);
  color:#ffffff;
}

/* Partner badges sat on rgba(scrim,.35) over a busy animated scene, so the wordmarks were
   effectively unreadable. Give them an opaque card ground, a real border and full-strength
   label colour — these are trust marks and must read instantly. */
.partner{
  background:var(--raised);
  border:1px solid var(--line-soft);
  box-shadow:var(--card-shadow);
  backdrop-filter:none;
}
.partner .pk{color:var(--dim)}
.partner .pn{color:var(--fg)}
[data-theme="dark"] .partner{background:#150d26}


/* =====================================================================================
   HOLO — lifted verbatim from the live modern.ai stylesheet (.holo + @keyframes osxHolo).
   Previously approximated with a rotating SVG gradient, which did not match. This is the
   real thing: a rainbow clipped to the glyphs plus a white specular sweep.
   ===================================================================================== */
.holo{
  background:linear-gradient(108deg,#0000 44%,#fffffffa 50%,#0000 56%) 0 0/240% 100% no-repeat,
             linear-gradient(100deg,#3457c9,#2bb7ff,#9cf0ff,#fff,#ffb46b,#ff4fa3,#a45bff,#2bb7ff,#3457c9) 0 0/320%;
  -webkit-text-fill-color:transparent; color:#0000;
  filter:drop-shadow(0 0 16px #2bb7ff80);
  -webkit-background-clip:text; background-clip:text;
  animation:4.2s linear infinite osxHolo;
}
@keyframes osxHolo{0%{background-position:-150% 0,0%}to{background-position:250% 0,200%}}
@media (prefers-reduced-motion:reduce){.holo{animation:none}}


/* 3) the stacked "risk" and "memory layer" cards were plain bordered boxes of text.
   Give them a real editorial treatment: numbered rail, hairline rules, hover lift, and a
   left accent that carries the section's meaning (red = what you lose, spectrum = what you gain). */
.rail{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
.rail-item{
  position:relative; display:grid; grid-template-columns:44px 1fr; gap:18px;
  padding:22px 20px 22px 0; border-bottom:1px solid var(--line);
  transition:background .25s, padding-left .25s;
}
.rail-item:hover{background:rgba(var(--scrim),.5); padding-left:10px}
.rail-item .rn{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--faint);
  padding-top:3px;
}
.rail-item h3{font-size:16.5px; margin-bottom:6px}
.rail-item p{color:var(--dim); font-size:13.5px; line-height:1.6; margin:0}
.rail-item::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--grad-spectrum); opacity:0; transition:opacity .25s;
}
.rail-item:hover::before{opacity:1}
.rail.risk .rn{color:var(--red)}
.rail.risk .rail-item::before{background:linear-gradient(180deg,var(--red),transparent)}

/* 4) direct-response trial banner above pricing — free to start, in minutes, no card */
.trial-banner{
  display:flex; align-items:center; justify-content:center; gap:clamp(14px,2.4vw,34px);
  flex-wrap:wrap; margin:0 auto 42px; max-width:940px;
  padding:20px 28px; border-radius:20px;
  background:linear-gradient(var(--raised),var(--raised)) padding-box,
             var(--grad-spectrum) border-box;
  border:1.5px solid transparent;
  box-shadow:0 14px 44px rgba(139,92,246,.24);
}
.trial-banner .tb-lead{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(19px,2.2vw,26px); letter-spacing:-.01em; color:var(--fg);
  display:flex; align-items:center; gap:10px;
}
.trial-banner .tb-free{
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.trial-banner .tb-points{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.trial-banner .tb-points span{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:500; color:var(--dim); white-space:nowrap;
}
.trial-banner .tb-points .check{width:18px;height:18px;min-width:18px;font-size:11px}
@media (max-width:720px){
  .trial-banner{flex-direction:column; text-align:center; padding:22px 20px}
  .trial-banner .tb-points{justify-content:center; gap:10px}
}

/* 5) the "ai" in each tier label gets the same holo cascade the brand uses elsewhere */
.tier .tk .ai{
  font-weight:600;
  background:linear-gradient(108deg,#0000 44%,#fffffffa 50%,#0000 56%) 0 0/240% 100% no-repeat,
             linear-gradient(100deg,#3457c9,#2bb7ff,#9cf0ff,#fff,#ffb46b,#ff4fa3,#a45bff,#2bb7ff,#3457c9) 0 0/320%;
  -webkit-text-fill-color:transparent; color:#0000;
  -webkit-background-clip:text; background-clip:text;
  animation:4.2s linear infinite osxHolo;
}
@media (prefers-reduced-motion:reduce){.tier .tk .ai{animation:none}}

/* pricing CTAs carry the live site's full animated treatment, not just the static gradient */
.tier .cta{animation:2.6s cubic-bezier(.4,0,.6,1) infinite ctaPulse, 7s linear infinite ctaPan}
.tier .cta:hover{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.tier .cta{animation:none}}


/* =====================================================================================
   THE TAKEOFF — rebuilt as a self-contained card, left-aligned.
   It was previously a free-floating SVG negotiating space with the 3D brain, and it lost:
   the vertical spike (the entire point of the chart) kept landing behind the render. A
   bounded card fits FIRST and cannot be encroached on. A 2022 milestone was added because
   the jump from 1995 straight to the spike had no transition — the curve needs the moment
   the current generation of AI actually arrived.
   ===================================================================================== */
.takeoff-card{
  max-width:min(760px, 64%);
  margin-top:38px;
  padding:22px 26px 16px;
  border-radius:22px;
  background:rgba(var(--scrim),.72);
  border:1px solid var(--line);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  box-shadow:var(--card-shadow);
}
.takeoff-card .tk-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  padding-bottom:14px; margin-bottom:6px; border-bottom:1px solid var(--line);
}
.tk-eyebrow{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; color:var(--faint);
  text-transform:uppercase; white-space:nowrap; padding-top:3px;
}
.tk-callout{text-align:right; opacity:0; transition:opacity .5s}
.tk-callout.lit{opacity:1}
.tk-kick{
  display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  color:var(--action-soft); margin-bottom:3px;
}
.tk-sub{display:block; font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--fg)}

.takeoff-svg{width:100%; height:auto; display:block; overflow:visible}
.tk-base{stroke:var(--line); stroke-width:1}

/* the end marker matches the brand, not a rainbow: it is the same spectrum as the curve */
.tk-end{fill:url(#tkEndGrad); opacity:0; filter:drop-shadow(0 0 10px rgba(224,83,176,.75))}
.tk-end.lit{opacity:1; animation:tkEndPulse 2.4s ease-in-out infinite}

/* 2022 is the hinge: emphasised, because a flat line that suddenly goes vertical with no
   transition reads as a mistake rather than as an argument */
.tk-turn{fill:var(--action-soft); filter:drop-shadow(0 0 8px rgba(182,156,255,.7))}
.tk-turn-label{fill:var(--action-soft)}
.tk-year.tk-turn-label{fill:var(--action-soft); opacity:.85}

@media (max-width:980px){
  .takeoff-card{max-width:100%}
  .takeoff-card .tk-head{flex-direction:column; gap:8px}
  .tk-callout{text-align:left}
}


/* The takeoff annotation lives INSIDE the chart, anchored to the spike. It was previously in
   the card header, which read as a caption rather than as the explanation for the vertical.
   This is the single most important label on the page: without it nobody knows WHY the line
   goes vertical. */
.tk-kick-svg{
  font-family:var(--mono); font-size:12px; letter-spacing:.14em;
  fill:var(--action-soft); opacity:0; transition:opacity .5s;
}
.tk-sub-svg{
  font-family:var(--font-display); font-weight:600; font-size:17px;
  fill:var(--fg); opacity:0; transition:opacity .5s .08s;
}
.tk-kick-svg.lit,.tk-sub-svg.lit{opacity:1}

/* =====================================================================================
   Grid/flex children default to min-width:auto, so a child whose min-content is wide —
   a `white-space:pre` code block, a long unbroken URL — refuses to shrink and pushes the
   whole page wider than the viewport. Its own overflow-x:auto never engages, because the
   element was never actually constrained. Measured on mcp.html at a true 390px viewport:
   two setup cards rendered 531px wide, 8 overflowing elements, in both themes.
   ===================================================================================== */
.grid2 > *, .grid3 > *, .grid4 > *, .tiers > *, .steps > *, .usage > *, .conn-extra > *{ min-width:0 }
.card, .step, .ucard, .tier{ min-width:0 }
.code{ max-width:100%; overflow-x:auto }
/* a bare long URL in prose should wrap rather than widen the page */
.card p, .rail-item p, .lede{ overflow-wrap:anywhere }


/* On mobile the hero copy stack occupies the entire first viewport, so any scene behind it
   competes directly with body text. Give the proof pills an opaque ground there. */
@media (max-width:720px){
  .pill{ background:var(--raised); border-color:var(--line-soft) }
  .hero-grid .copy{ position:relative; z-index:2 }
}

/* =====================================================================================
   MOBILE DARK - the copy scrim has to COVER the block, not fade out inside it.
   Measured on a real iPhone 13 viewport (390px), scene 6 "fleet" (particle brightness 0.8):
   the h2 read cleanly, the .lede directly under it did not. Cause is the geometry, not the
   opacity - `ellipse closest-side` takes its radius from the SHORTER half-axis, which on a
   narrow, tall mobile copy block is the half-WIDTH. The gradient therefore hit full
   transparency well above the lede. Desktop copy blocks are wide and short, so the same
   rule covered them and the defect stayed invisible until a true-device capture.
   Sized in percentages here so the cover scales with the block instead of collapsing.

   Applied to EVERY section copy block, not just the twelve marked `.scrimmed`: on mobile the
   grid collapses and the fixed canvas sits behind all of them, so the desktop judgement about
   which blocks are "over" the brain no longer holds. It is free where it is not needed -
   `--scrim` IS the page background, so over an empty background the scrim is invisible.

   Light theme is deliberately exempt: captured at the same viewport it reads cleanly (the
   field is quiet on white) and a scrim there only smudges the heading.
   ===================================================================================== */
@media (max-width:860px){
  /* Any depth, NOT `> .wrap > .copy`: five sections nest their copy one level deeper
     (the hero in .hero-grid, and start/reporting/mcp-sec/radar in .grid2), so the direct-child
     selector silently skipped exactly the blocks that still showed particles through the text.
     Verified afterwards by querying getComputedStyle(el,'::before') on every section. */
  :root:not([data-theme="light"]) main section .copy::before{
    content:"";position:absolute;inset:-56px -40px;z-index:-1;pointer-events:none;
    /* Vertical radius must be <= 50%: a radial gradient only completes its fade inside the
       box when its radius reaches the box edge. At 64% the ramp was still at ~0.4 alpha when
       the element ended, and the box clipped it to 0 - a hard horizontal seam straight across
       the particle field, visible in the first capture of this fix. Horizontal radius can stay
       generous because the box is wider than the phone, so those edges are clipped off-screen. */
    background:radial-gradient(ellipse 78% 50% at 50% 50%,
      rgba(var(--scrim),.94) 0%,
      rgba(var(--scrim),.90) 50%,
      rgba(var(--scrim),.58) 76%,
      rgba(var(--scrim),0) 100%);
  }
}

/* The same principle already applied to #amb one rule-set up: the neural field is atmosphere
   on black and NOISE on white. On dark it composites additively and reads as glow; on light
   it composites normally, so every particle lands as a grey dot and the DENSE part - directly
   behind the brain - reads as dirt over copy rather than as depth. Measured on a 390px light
   capture, under the takeoff card, where the same geometry that makes the brain glow on dark
   made a speckled smudge on white. Scoped to light so the approved dark scene is untouched.
   Safe to fade: scene.background is T3.bg, which is the same colour as body's --surface, so
   lowering the canvas opacity only weakens the field - it cannot reveal a seam. */
/* REGRESSION GUARD: this was written for a MOBILE problem (dense speckle over the takeoff
   copy at 390px) and originally shipped unscoped, which faded the desktop light hero's brain
   into a grey smudge - a surface I had not looked at. Media-query it so the fix stays where
   the problem was measured. */
@media (max-width:860px){
  :root[data-theme="light"] #gl{opacity:.5}
}

/* Bank marks are supplied as BLACK ink on transparency - they are drawn for a white page.
   Measured on the dark theme at 390px: brex sits at p95 contrast 14 against the chip with
   0.7% of its pixels clearing a deviation of 30, mercury at 40/9.5%, and Chase renders only
   its blue octagon because the "CHASE" wordmark beside it is black. All three read as blank
   or half-blank chips. Inverting is not an option - it would turn Chase's blue orange - so
   give every mark the white ground it was drawn for. Wells Fargo already ships its own red
   plate, and putting the whole set on one tile keeps them reading as a consistent row.
   Light theme already supplies a white-ish page, so this is scoped to dark. */
:root:not([data-theme="light"]) .banks .bank img{
  background:#fff; padding:2px; width:22px; height:22px; border-radius:5px;
}

/* The OpenAI knot ships as BLACK ink on transparency. Beside Claude's orange burst and
   Gemini's violet spark it disappears into the dark chip - confirmed at 1:1, not just in an
   upscaled crop. It is monochrome, so inverting is safe and is the treatment OpenAI itself
   uses on dark surfaces. Matched by src so both the home model row and the MCP client pills
   are covered. (Google Ads was checked at the same time and is fine - its colour marks read
   correctly at card size; the muddiness there was an artifact of upscaling a 15px chip.) */
:root:not([data-theme="light"]) img[src*="chatgpt-mark"]{filter:invert(1)}

/* Six connector marks ship as PURE WHITE monochrome - tiktok/x/taboola/applovin/shipstation
   are fill="#ffffff" in the SVG source and gorgias.png measures mean RGB 255,255,255 at zero
   saturation. They were chosen for the dark theme, where they read perfectly. On light they
   sit on white cards and vanish: the light-theme gate measured a p95 RGB distance from the
   card background of exactly 0.0 - not "faint", identical. Inverting is safe precisely
   because they are monochrome; it makes them black on white, which is the ground they need.
   Listed explicitly rather than by container so no COLOUR logo is ever caught by this. */
:root[data-theme="light"] img[src$="tiktok.svg"],
:root[data-theme="light"] img[src$="/x.svg"],
:root[data-theme="light"] img[src$="taboola.svg"],
:root[data-theme="light"] img[src$="applovin.svg"],
:root[data-theme="light"] img[src$="shipstation.svg"],
:root[data-theme="light"] img[src$="gorgias.png"]{filter:invert(1)}

/* ---------------- takeoff chart legibility + hero density (mobile) ---------------- */

/* The chart's milestone labels live in a 1000-unit viewBox. On a 390px phone the card renders
   that at 0.296 scale, so a 12.5-unit label lands at 3.7 RENDERED PIXELS. Even lifting the
   font size cannot save them - five labels at a readable size collide inside 1000 units. On
   mobile the SVG therefore keeps only the CURVE and its two annotations, and the milestones
   move out to real HTML text below, where they wrap and read at body size. */
.tk-legend{
  display:none; list-style:none; margin:14px 0 0; padding:0;
  font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--faint);
  line-height:1.9;
}
.tk-legend li{display:inline}
.tk-legend li:not(:last-child)::after{content:" · "; color:var(--line-soft)}
.tk-legend b{font-weight:500; color:var(--dim)}

@media (max-width:720px){
  .tk-legend{display:block}
  /* Only the five MILESTONE labels move to the legend. The turn annotation - 'Generative AI
     arrives / 2022' - is the marker that explains WHY the line goes vertical, so it stays
     in the chart. Hiding it along with the milestones removed the whole point of the hinge. */
  .takeoff-svg .tk-label:not(.tk-turn-label),
  .takeoff-svg .tk-year:not(.tk-turn-label){display:none}

  /* .brain-stage is an EMPTY box on mobile - the brain is painted by the fixed full-screen
     canvas, not by this element, which holds only a decorative glow. Measured on a 390px
     iPhone: it reserved 300px of dead height inside an already 1160px-tall hero on a 664px
     viewport, which is the void under the proof pills. The canvas does not need it. */
  .hero-grid .brain-stage{display:none}
}