/* ============================================================
   SHUTTLEVEST — DESIGN TOKENS
   ============================================================ */
:root{
  /* Core palette (brand) */
  --ink:#08090A;
  --charcoal:#111417;
  --ivory:#FBF7EF;
  --cream:#F4F0E8;
  --stone:#D9D1C4;
  --forest:#163D31;
  --sage:#DFE9DC;
  --bluegrey:#DDE9F7;
  --sand:#EADBC4;
  --clay:#C98F6A;
  --lime:#B7D84B;

  /* Derived ink tints (light sections) */
  --ink-90:rgba(8,9,10,.92);
  --ink-70:rgba(8,9,10,.68);
  --ink-55:rgba(8,9,10,.62);
  --ink-38:rgba(8,9,10,.38);
  --ink-14:rgba(8,9,10,.14);
  --ink-08:rgba(8,9,10,.08);

  /* Derived light tints (dark sections) */
  --lt-92:rgba(251,247,239,.92);
  --lt-66:rgba(251,247,239,.66);
  --lt-46:rgba(251,247,239,.58);
  --lt-16:rgba(251,247,239,.16);
  --lt-08:rgba(251,247,239,.08);

  /* Type */
  --f-display:"Inter Tight","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --f-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Layout */
  --maxw:1240px;
  --gutter:clamp(20px,4.6vw,56px);
  --pad-sec:clamp(84px,10.5vw,158px);
  --r-xs:6px; --r-sm:10px; --r-md:16px; --r-lg:26px;

  /* Motion */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-soft:cubic-bezier(.22,.61,.36,1);
  --nav-h:74px;
}

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--ink); color:var(--ink);
  font-family:var(--f-body); font-size:17px; line-height:1.62;
  font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-feature-settings:"tnum" 0,"ss01" 1; overflow-x:hidden;
}
img,svg,video{display:block; max-width:100%}
button,input,select,textarea{font:inherit; color:inherit}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4,p,figure{margin:0}
ul{margin:0; padding:0; list-style:none}
:focus-visible{outline:2px solid var(--lime); outline-offset:3px; border-radius:3px}
::selection{background:var(--lime); color:var(--ink)}

.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter)}
.sec{position:relative; padding-block:var(--pad-sec)}
.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--lime); color:var(--ink); padding:12px 18px; border-radius:0 0 var(--r-sm) 0; font-weight:500}
.skip:focus{left:0}

/* Section surfaces */
.s-ink{background:var(--ink); color:var(--ivory)}
.s-charcoal{background:var(--charcoal); color:var(--ivory)}
.s-forest{background:var(--forest); color:var(--ivory)}
.s-ivory{background:var(--ivory)}
.s-cream{background:var(--cream)}
.s-sage{background:var(--sage)}
.s-blue{background:var(--bluegrey)}
.s-sand{background:var(--sand)}
.s-ink p,.s-charcoal p,.s-forest p{color:var(--lt-66)}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.display{
  font-family:var(--f-display); font-weight:500;
  font-size:clamp(3rem,8.4vw,6.6rem); line-height:.94; letter-spacing:-.045em;
}
.h2{
  font-family:var(--f-display); font-weight:500;
  font-size:clamp(2.1rem,4.9vw,3.9rem); line-height:1.02; letter-spacing:-.038em;
  text-wrap:balance;
}
.h3{font-family:var(--f-display); font-weight:500; font-size:clamp(1.15rem,1.6vw,1.35rem); line-height:1.24; letter-spacing:-.022em}
.lede{font-size:clamp(1.02rem,1.45vw,1.19rem); line-height:1.6; color:var(--ink-70); max-width:56ch}
.s-ink .lede,.s-charcoal .lede,.s-forest .lede{color:var(--lt-66)}
.fine{font-size:.8rem; line-height:1.55; color:var(--ink-55)}
.s-ink .fine,.s-charcoal .fine,.s-forest .fine{color:var(--lt-46)}

/* Eyebrow — the route-line motif, used as a structural marker */
.eyebrow{
  display:inline-flex; align-items:center; gap:11px;
  font-family:var(--f-mono); font-size:.68rem; font-weight:500;
  letter-spacing:.17em; text-transform:uppercase; color:var(--ink-55);
  margin-bottom:22px;
}
.eyebrow::before{
  content:""; width:34px; height:1px; background:currentColor; opacity:.5;
}
.eyebrow::after{content:""; width:5px; height:5px; border-radius:50%; background:var(--lime); margin-left:-4px}
.s-ink .eyebrow,.s-charcoal .eyebrow,.s-forest .eyebrow{color:var(--lt-46)}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 26px; border-radius:var(--r-sm); border:1px solid transparent;
  font-family:var(--f-body); font-size:.95rem; font-weight:500; letter-spacing:-.01em;
  cursor:pointer; transition:transform .35s var(--e-out), background .3s, border-color .3s, color .3s, box-shadow .35s var(--e-out);
  white-space:nowrap;
}
.btn-primary{background:var(--lime); color:var(--ink); box-shadow:0 1px 0 rgba(255,255,255,.4) inset}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 12px 30px -14px rgba(183,216,75,.75)}
.btn-ghost{border-color:var(--lt-16); color:var(--ivory); background:rgba(251,247,239,.02)}
.btn-ghost:hover{border-color:var(--lt-46); transform:translateY(-2px)}
.btn-dark{background:var(--ink); color:var(--ivory)}
.btn-dark:hover{transform:translateY(-2px)}
.btn-line{border-color:var(--ink-14); color:var(--ink)}
.btn-line:hover{border-color:var(--ink-38); transform:translateY(-2px)}
.btn svg{width:15px; height:15px; transition:transform .4s var(--e-out)}
.btn:hover svg{transform:translateX(3px)}

/* ============================================================
   HEADER
   ============================================================ */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:100; height:var(--nav-h);
  display:flex; align-items:center;
  transition:background .45s var(--e-soft), border-color .45s, backdrop-filter .45s;
  border-bottom:1px solid transparent;
}
.hdr.is-stuck{background:rgba(8,9,10,.82); backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%); border-bottom-color:var(--lt-08)}
.hdr-in{display:flex; align-items:center; justify-content:space-between; gap:24px}
.brand{display:inline-flex; align-items:center; gap:11px; color:var(--ivory)}
.brand-mark{width:30px; height:30px; flex:none}
.brand-name{font-family:var(--f-display); font-weight:600; font-size:1.16rem; letter-spacing:-.035em}
.nav{display:flex; align-items:center; gap:34px}
.nav a{font-size:.92rem; color:var(--lt-66); position:relative; padding-block:4px; transition:color .3s}
.nav a::after{content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--lime); transition:width .4s var(--e-out)}
.nav a:hover{color:var(--ivory)}
.nav a:hover::after{width:100%}
.hdr-cta{display:flex; align-items:center; gap:14px}
.hdr .btn{padding:11px 20px; font-size:.88rem}
.burger{display:none; width:44px; height:44px; align-items:center; justify-content:center; background:none; border:1px solid var(--lt-16); border-radius:var(--r-xs); cursor:pointer}
.burger span{display:block; width:17px; height:1.5px; background:var(--ivory); position:relative; transition:background .2s}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:17px; height:1.5px; background:var(--ivory); transition:transform .4s var(--e-out)}
.burger span::before{top:-5px} .burger span::after{top:5px}
.is-open .burger span{background:transparent}
.is-open .burger span::before{transform:translateY(5px) rotate(45deg)}
.is-open .burger span::after{transform:translateY(-5px) rotate(-45deg)}
.mnav{
  position:fixed; inset:var(--nav-h) 0 auto 0; z-index:99; background:rgba(8,9,10,.97);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  padding:26px var(--gutter) 38px; display:none; border-bottom:1px solid var(--lt-08);
}
body.is-open{overflow:hidden}
.mnav.is-visible{display:block; animation:slideDown .45s var(--e-out)}
@keyframes slideDown{from{opacity:0; transform:translateY(-10px)}to{opacity:1; transform:none}}
.mnav a{display:block; padding:15px 0; font-family:var(--f-display); font-size:1.5rem; letter-spacing:-.03em; color:var(--ivory); border-bottom:1px solid var(--lt-08)}
.mnav .btn{width:100%; margin-top:24px}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; background:var(--ink); overflow:hidden; isolation:isolate}
.hero-media{position:absolute; inset:0; z-index:0; overflow:hidden}
.hero-media video{width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.4s var(--e-soft)}
.hero-media video.is-ready{opacity:1}
/* Cinematic CSS placeholder — visible until assets/video/hero.mp4 exists */
.hero-fallback{position:absolute; inset:0; background:var(--ink)}
.hero-fallback::before,.hero-fallback::after{content:""; position:absolute; inset:-25%; }
.hero-fallback::before{
  background:
    radial-gradient(46% 52% at 22% 30%, rgba(22,61,49,.85), transparent 62%),
    radial-gradient(40% 46% at 78% 24%, rgba(201,143,106,.34), transparent 66%),
    radial-gradient(60% 60% at 62% 88%, rgba(17,20,23,.96), transparent 70%);
  animation:drift 26s ease-in-out infinite alternate;
}
.hero-fallback::after{
  background:radial-gradient(34% 40% at 84% 66%, rgba(183,216,75,.16), transparent 70%);
  animation:drift 34s ease-in-out infinite alternate-reverse;
}
@keyframes drift{from{transform:translate3d(-3%,-2%,0) scale(1.04)}to{transform:translate3d(4%,3%,0) scale(1.16)}}
.hero-routes{position:absolute; inset:0; width:100%; height:100%; opacity:.42}
.hero-routes path{fill:none; stroke:rgba(251,247,239,.5); stroke-width:.9; stroke-dasharray:5 9; animation:flow 9s linear infinite}
.hero-routes path:nth-child(2){animation-duration:13s; stroke:rgba(183,216,75,.55)}
.hero-routes path:nth-child(3){animation-duration:17s}
@keyframes flow{to{stroke-dashoffset:-140}}
.hero-veil{position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(8,9,10,.86) 0%, rgba(8,9,10,.42) 32%, rgba(8,9,10,.72) 74%, rgba(8,9,10,.97) 100%),
  linear-gradient(96deg, rgba(8,9,10,.84) 8%, rgba(8,9,10,.18) 62%);
}
.grain{position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.055; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-in{position:relative; z-index:3; width:100%; padding-top:calc(var(--nav-h) + 40px); padding-bottom:26px}
.hero-grid{display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(30px,5vw,72px); align-items:center}
.hero-copy{color:var(--ivory); max-width:44ch}
.hero-chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px}
.chip{
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.11em; text-transform:uppercase;
  padding:7px 12px; border:1px solid var(--lt-16); border-radius:var(--r-xs);
  color:var(--lt-66); background:rgba(251,247,239,.035); backdrop-filter:blur(6px);
}
.hero h1{margin-bottom:24px; color:var(--ivory)}
.hero h1 .ln{display:block; overflow:hidden}
.hero h1 .ln>span{display:block; transform:translateY(102%); animation:riseIn 1.15s var(--e-out) forwards}
.hero h1 .ln:nth-child(2)>span{animation-delay:.11s}
.hero h1 .ln:nth-child(3)>span{animation-delay:.2s}
@keyframes riseIn{to{transform:none}}
.hero-sub{color:var(--lt-66); font-size:clamp(1rem,1.35vw,1.14rem); max-width:50ch; margin-bottom:34px}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:22px}
.hero-legal{max-width:46ch}
.hero-visual{position:relative; display:flex; justify-content:center; align-items:center; min-height:520px}
.hero-glow{position:absolute; width:74%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(183,216,75,.18), transparent 66%); filter:blur(20px)}

/* Product strip */
.strip{position:relative; z-index:3; border-top:1px solid var(--lt-08); background:rgba(8,9,10,.5); backdrop-filter:blur(10px)}
.strip-in{display:flex; align-items:center; gap:0; overflow:hidden}
.strip-track{display:flex; gap:0; align-items:center; animation:marquee 44s linear infinite; will-change:transform}
.strip:hover .strip-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.strip-item{display:inline-flex; align-items:center; gap:10px; padding:17px 30px; white-space:nowrap;
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--lt-46)}
.strip-item b{color:var(--lt-92); font-weight:500}
.strip-item i{width:4px; height:4px; border-radius:50%; background:var(--lime); font-style:normal; flex:none}

/* ============================================================
   PHONE MOCKUP (CSS-rendered; swap for assets/mockups/*.png)
   ============================================================ */
.device{
  position:relative; width:296px; aspect-ratio:296/604; flex:none;
  border-radius:44px; padding:10px;
  background:linear-gradient(160deg,#2b3036,#0d0f12 44%,#23282e);
  box-shadow:0 60px 90px -50px rgba(0,0,0,.95), 0 0 0 1px rgba(251,247,239,.07), inset 0 0 0 1px rgba(0,0,0,.6);
}
.device.float{animation:floaty 8.5s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(-9px)}50%{transform:translateY(9px)}}
.device-screen{position:relative; width:100%; height:100%; border-radius:35px; overflow:hidden; background:#0B0D0F}
.device::after{content:""; position:absolute; top:22px; left:50%; transform:translateX(-50%); width:76px; height:22px; border-radius:12px; background:#08090A; z-index:6}
.scr{position:absolute; inset:0; overflow:hidden; padding:52px 18px 18px; display:flex; flex-direction:column; gap:12px;
  opacity:0; transform:translateY(10px) scale(.99); transition:opacity .6s var(--e-out), transform .6s var(--e-out); pointer-events:none;
  background:radial-gradient(120% 70% at 50% 0%, #171B1F 0%, #0B0D0F 62%);
}
.scr.is-active{opacity:1; transform:none; pointer-events:auto}
.scr-top{display:flex; align-items:center; justify-content:space-between}
.scr-eyebrow{font-family:var(--f-mono); font-size:.52rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(251,247,239,.4); margin:0}
.scr-name{font-family:var(--f-display); font-size:.88rem; color:var(--ivory); margin:2px 0 0; letter-spacing:-.02em}
.scr-av{width:28px; height:28px; border-radius:50%; background:linear-gradient(140deg,var(--forest),#2c6b56); color:var(--ivory); display:grid; place-items:center; font-size:.72rem; font-weight:500}
.scr-card{background:rgba(251,247,239,.045); border:1px solid rgba(251,247,239,.08); border-radius:16px; padding:14px}
.scr-label{font-family:var(--f-mono); font-size:.5rem; letter-spacing:.15em; text-transform:uppercase; color:rgba(251,247,239,.42); margin:0}
.scr-big{font-family:var(--f-display); font-size:1.62rem; letter-spacing:-.035em; color:var(--ivory); margin:5px 0 8px; font-variant-numeric:tabular-nums}
.scr-pill{display:inline-flex; align-items:center; gap:5px; font-family:var(--f-mono); font-size:.55rem; letter-spacing:.06em; padding:4px 8px; border-radius:20px; background:rgba(183,216,75,.14); color:var(--lime)}
.scr-chart{width:100%; height:66px; margin-top:10px; overflow:visible}
.chart-line{fill:none; stroke:var(--lime); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.chart-area{fill:url(#svGrad); opacity:0; transition:opacity 1s .5s ease}
.is-drawn .chart-area{opacity:1}
.scr-rows{display:flex; flex-direction:column; gap:7px}
.scr-row{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; background:rgba(251,247,239,.04); border:1px solid rgba(251,247,239,.06);
  opacity:0; transform:translateX(14px); animation:slideIn .6s var(--e-out) forwards}
.is-active .scr-row:nth-child(1){animation-delay:.18s}
.is-active .scr-row:nth-child(2){animation-delay:.28s}
.is-active .scr-row:nth-child(3){animation-delay:.38s}
.is-active .scr-row:nth-child(4){animation-delay:.48s}
@keyframes slideIn{to{opacity:1; transform:none}}
.scr-cur{width:26px; height:26px; border-radius:8px; display:grid; place-items:center; font-size:.7rem; color:var(--ivory); background:rgba(251,247,239,.09); font-family:var(--f-mono)}
.scr-row-t{flex:1; min-width:0}
.scr-row-t p{margin:0; font-size:.68rem; color:var(--ivory); line-height:1.3}
.scr-row-t span{font-family:var(--f-mono); font-size:.5rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(251,247,239,.38)}
.scr-amt{font-family:var(--f-display); font-size:.8rem; color:var(--ivory); letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.scr-bar{height:5px; border-radius:4px; background:rgba(251,247,239,.1); overflow:hidden; margin-top:8px}
.scr-bar i{display:block; height:100%; border-radius:4px; background:var(--lime); width:0; transition:width 1.3s .3s var(--e-out)}
.is-active .scr-bar i{width:var(--w)}
.scr-insight{border:1px solid rgba(183,216,75,.28); background:linear-gradient(150deg, rgba(183,216,75,.13), rgba(183,216,75,.03)); border-radius:16px; padding:14px; position:relative; overflow:hidden}
.scr-insight::after{content:""; position:absolute; inset:0; background:radial-gradient(70% 60% at 20% 0%, rgba(183,216,75,.24), transparent 70%); animation:pulseGlow 3.6s ease-in-out infinite}
@keyframes pulseGlow{0%,100%{opacity:.35}50%{opacity:1}}
.scr-insight p{position:relative; z-index:1; margin:8px 0 0; font-size:.72rem; line-height:1.5; color:rgba(251,247,239,.9)}
.scr-chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.scr-chip{font-size:.58rem; padding:5px 9px; border-radius:20px; border:1px solid rgba(251,247,239,.14); color:rgba(251,247,239,.7)}
.scr-rings{display:flex; gap:12px}
.ring{flex:1; text-align:center}
.ring svg{width:100%; max-width:74px; margin:0 auto; transform:rotate(-90deg)}
.ring circle{fill:none; stroke-width:6; stroke-linecap:round}
.ring .rbg{stroke:rgba(251,247,239,.1)}
.ring .rfg{stroke:var(--lime); stroke-dasharray:163.4; stroke-dashoffset:163.4; transition:stroke-dashoffset 1.5s .35s var(--e-out)}
.is-active .ring .rfg{stroke-dashoffset:var(--off)}
.ring p{margin:6px 0 0; font-size:.58rem; color:rgba(251,247,239,.6); line-height:1.35}
.ring b{display:block; font-family:var(--f-display); font-size:.9rem; color:var(--ivory); letter-spacing:-.02em}
.scr-foot{margin-top:auto; display:flex; justify-content:space-between; align-items:center; padding-top:10px; border-top:1px solid rgba(251,247,239,.07)}
.scr-foot span{font-family:var(--f-mono); font-size:.48rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(251,247,239,.3)}
.scr-mini{display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:.66rem; color:rgba(251,247,239,.78)}
.scr-mini + .scr-mini{margin-top:9px}
.scr-mini b{font-family:var(--f-display); letter-spacing:-.02em; color:var(--ivory); font-variant-numeric:tabular-nums}
.mini-bar{height:4px; border-radius:3px; background:rgba(251,247,239,.09); margin-top:5px; overflow:hidden}
.mini-bar i{display:block; height:100%; background:linear-gradient(90deg,var(--lime),rgba(183,216,75,.4)); width:0; transition:width 1.1s var(--e-out)}
.is-active .mini-bar i{width:var(--w)}

/* ============================================================
   REVEAL
   ============================================================ */
.rv{opacity:0; transform:translateY(26px); transition:opacity .9s var(--e-out), transform .9s var(--e-out)}
.rv.in{opacity:1; transform:none}
.rv-d1{transition-delay:.08s} .rv-d2{transition-delay:.16s} .rv-d3{transition-delay:.24s}
.rv-d4{transition-delay:.32s} .rv-d5{transition-delay:.4s} .rv-d6{transition-delay:.48s}

/* ============================================================
   EDITORIAL SPLIT (problem / audience)
   ============================================================ */
.split{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,80px); align-items:start}
.rule{height:1px; background:var(--ink-14); margin-block:clamp(40px,5vw,64px)}
.s-ink .rule,.s-charcoal .rule,.s-forest .rule{background:var(--lt-08)}

.frag{display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:14px}
.frag-card{border:1px solid var(--ink-14); border-radius:var(--r-sm); padding:16px 14px; background:rgba(255,255,255,.4); min-height:112px; display:flex; flex-direction:column; justify-content:space-between}
.frag-card span{font-family:var(--f-mono); font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-38)}
.frag-card p{margin:0; font-size:.88rem; line-height:1.3; color:var(--ink-90)}
.frag-unify{margin-top:12px; border-radius:var(--r-sm); background:var(--ink); color:var(--ivory); padding:16px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.frag-unify p{margin:0; font-size:.92rem; color:var(--lt-92)}
.frag-unify span{font-family:var(--f-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--lime)}

/* ============================================================
   VISION SYSTEM DIAGRAM
   ============================================================ */
.sys{position:relative; margin-top:clamp(40px,6vw,76px); aspect-ratio:16/9; min-height:380px}
.sys-lines{position:absolute; inset:0; width:100%; height:100%}
.sys-lines path{fill:none; stroke:rgba(8,9,10,.28); stroke-width:1; stroke-dasharray:4 7; animation:flow 18s linear infinite}
.sys-node{position:absolute; transform:translate(-50%,-50%); background:var(--ivory); border:1px solid var(--ink-14); border-radius:var(--r-sm); padding:13px 16px; min-width:132px; text-align:left; box-shadow:0 14px 30px -22px rgba(8,9,10,.5)}
.sys-node h4{font-family:var(--f-display); font-size:.94rem; letter-spacing:-.02em; margin:0}
.sys-node p{margin:3px 0 0; font-size:.72rem; line-height:1.35; color:var(--ink-55)}
.sys-core{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:var(--ink); color:var(--ivory); border-radius:50%; width:clamp(148px,17vw,196px); aspect-ratio:1; display:grid; place-content:center; text-align:center; padding:16px; box-shadow:0 30px 60px -30px rgba(8,9,10,.7)}
.sys-core span{font-family:var(--f-mono); font-size:.56rem; letter-spacing:.16em; text-transform:uppercase; color:var(--lime); display:block; margin-bottom:6px}
.sys-core strong{font-family:var(--f-display); font-weight:500; font-size:clamp(1.05rem,1.7vw,1.32rem); letter-spacing:-.03em}
.sys-list{display:none}

/* ============================================================
   APP PREVIEW
   ============================================================ */
.tabs{display:flex; flex-wrap:wrap; gap:8px; margin-top:34px}
.tab{padding:10px 17px; border-radius:var(--r-xs); border:1px solid var(--lt-16); background:transparent; color:var(--lt-66); font-size:.84rem; cursor:pointer; transition:all .3s var(--e-soft)}
.tab:hover{color:var(--ivory); border-color:var(--lt-46)}
.tab[aria-selected="true"]{background:var(--lime); border-color:var(--lime); color:var(--ink); font-weight:500}
.stage{display:flex; align-items:center; justify-content:center; gap:0; margin-top:clamp(48px,6vw,76px); position:relative}
.stage::before{content:""; position:absolute; width:min(760px,92%); aspect-ratio:2/1; background:radial-gradient(circle, rgba(183,216,75,.11), transparent 64%); filter:blur(30px)}
.stage .device{position:relative; z-index:1}
.stage .side{transform:scale(.8) translateY(24px); opacity:.55; transition:opacity .6s var(--e-out), transform .8s var(--e-out)}
.stage .side.left{margin-right:-46px; transform:scale(.8) translateY(24px) rotate(-4deg)}
.stage .side.right{margin-left:-46px; transform:scale(.8) translateY(24px) rotate(4deg)}
.stage .side:hover{opacity:.85}
.stage .main{z-index:2}

/* ============================================================
   FEATURE PILLARS
   ============================================================ */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,20px); margin-top:clamp(42px,5vw,66px)}
.card{background:rgba(255,255,255,.55); border:1px solid var(--ink-14); border-radius:var(--r-md); padding:clamp(24px,2.4vw,32px); transition:transform .5s var(--e-out), box-shadow .5s var(--e-out), border-color .4s; display:flex; flex-direction:column; gap:12px}
.card:hover{transform:translateY(-5px); box-shadow:0 26px 46px -34px rgba(8,9,10,.55); border-color:var(--ink-38)}
.card-ico{width:38px; height:38px; border-radius:var(--r-xs); display:grid; place-items:center; background:var(--sage); border:1px solid rgba(8,9,10,.07)}
.card-ico svg{width:18px; height:18px; stroke:var(--forest); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.card p{margin:0; font-size:.94rem; line-height:1.58; color:var(--ink-70)}
.card-tag{margin-top:auto; padding-top:12px; font-family:var(--f-mono); font-size:.58rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-38); border-top:1px solid var(--ink-08)}

/* ============================================================
   AUDIENCE
   ============================================================ */
.aud-list{display:grid; grid-template-columns:1fr 1fr; gap:0 26px; margin-top:8px}
.aud-item{display:flex; align-items:baseline; gap:12px; padding:16px 0; border-bottom:1px solid rgba(8,9,10,.1)}
.aud-item span{font-family:var(--f-mono); font-size:.62rem; color:var(--ink-38); letter-spacing:.08em}
.aud-item p{margin:0; font-size:1rem; color:var(--ink-90)}
.media{position:relative; border-radius:var(--r-md); overflow:hidden; background:linear-gradient(150deg,#c9d4dd,#eef2f6 60%,#dfe6ec); aspect-ratio:4/5; border:1px solid rgba(8,9,10,.08)}
.media img{width:100%; height:100%; object-fit:cover}
.media-ph{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:20px; gap:6px;
  background:linear-gradient(180deg, rgba(8,9,10,.05), rgba(8,9,10,.28)); }
.media-ph span{font-family:var(--f-mono); font-size:.6rem; letter-spacing:.1em; color:rgba(8,9,10,.5); background:rgba(255,255,255,.72); padding:6px 9px; border-radius:5px; align-self:flex-start}
.media.has-img .media-ph{display:none}

/* ============================================================
   ROADMAP
   ============================================================ */
.road{position:relative; margin-top:clamp(46px,5vw,72px)}
.road-rail{position:absolute; left:0; right:0; top:33px; height:1px; background:repeating-linear-gradient(90deg, rgba(8,9,10,.32) 0 5px, transparent 5px 12px)}
.road-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,26px); position:relative}
.road-item{padding-top:64px; position:relative}
.road-dot{position:absolute; top:27px; left:0; width:13px; height:13px; border-radius:50%; background:var(--sand); border:1.5px solid rgba(8,9,10,.45)}
.road-item.now .road-dot{background:var(--lime); border-color:var(--ink); box-shadow:0 0 0 5px rgba(183,216,75,.28)}
.road-ph{font-family:var(--f-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-55); display:block; margin-bottom:9px}
.road-item h3{margin-bottom:9px}
.road-item p{margin:0; font-size:.92rem; line-height:1.55; color:var(--ink-70)}
.road-badge{display:inline-block; margin-top:12px; font-family:var(--f-mono); font-size:.56rem; letter-spacing:.12em; text-transform:uppercase; padding:4px 9px; border-radius:20px; background:var(--ink); color:var(--lime)}

/* ============================================================
   TRUST
   ============================================================ */
.trust-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:clamp(42px,5vw,64px); background:var(--lt-08); border:1px solid var(--lt-08); border-radius:var(--r-md); overflow:hidden}
.trust-item{background:var(--forest); padding:clamp(22px,2.4vw,30px); display:flex; flex-direction:column; gap:10px; transition:background .4s}
.trust-item:hover{background:#1a4a3b}
.trust-item svg{width:20px; height:20px; stroke:var(--lime); fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round}
.trust-item h3{font-size:1rem; color:var(--ivory)}
.trust-item p{margin:0; font-size:.85rem; line-height:1.5; color:var(--lt-66)}
.disclosure{margin-top:30px; border:1px solid var(--lt-16); border-radius:var(--r-md); padding:clamp(22px,2.4vw,30px); background:rgba(8,9,10,.28)}
.disclosure p{margin:0; font-size:.9rem; line-height:1.62; color:var(--lt-66); max-width:74ch}
.disclosure p + p{margin-top:12px}

/* ============================================================
   WAITLIST
   ============================================================ */
.wl{display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(28px,4vw,64px); align-items:center}
.wl-points{margin-top:28px}
.wl-points li{display:flex; gap:12px; align-items:flex-start; padding:12px 0; border-top:1px solid var(--ink-14); font-size:.94rem; color:var(--ink-70)}
.wl-points li b{color:var(--ink); font-weight:500}
.wl-points svg{width:16px; height:16px; flex:none; margin-top:4px; stroke:var(--forest); fill:none; stroke-width:1.6}
.panel{background:var(--charcoal); border-radius:var(--r-lg); padding:clamp(26px,3.4vw,44px); color:var(--ivory); box-shadow:0 50px 80px -60px rgba(8,9,10,.9); position:relative; overflow:hidden}
.panel::before{content:""; position:absolute; top:-40%; right:-20%; width:60%; aspect-ratio:1; background:radial-gradient(circle, rgba(183,216,75,.14), transparent 66%)}
.panel > *{position:relative}
.fld{margin-bottom:16px}
.fld label{display:block; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--lt-46); margin-bottom:8px}
.fld input,.fld select{
  width:100%; padding:14px 15px; border-radius:var(--r-sm);
  background:rgba(251,247,239,.05); border:1px solid var(--lt-16); color:var(--ivory);
  font-size:.96rem; transition:border-color .3s, background .3s;
  appearance:none; -webkit-appearance:none;
}
.fld select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23FBF7EF' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 15px center; padding-right:40px}
.fld select option{background:var(--charcoal); color:var(--ivory)}
.fld input::placeholder{color:var(--lt-46)}
.fld input:hover,.fld select:hover{border-color:var(--lt-46)}
.fld input:focus,.fld select:focus{outline:none; border-color:var(--lime); background:rgba(251,247,239,.08)}
.fld input:-webkit-autofill,.fld input:-webkit-autofill:focus{-webkit-text-fill-color:var(--ivory); -webkit-box-shadow:0 0 0 60px #1a1f24 inset; caret-color:var(--ivory)}
.fld.err input,.fld.err select{border-color:#E2725B}
.fld-msg{display:none; font-size:.76rem; color:#F0947F; margin-top:7px}
.fld.err .fld-msg{display:block}
.fld-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.hp{position:absolute; left:-9999px; opacity:0; height:0; width:0}
.panel .btn-primary{width:100%; margin-top:10px}
.form-note{margin-top:16px; font-size:.76rem; color:var(--lt-46); line-height:1.55}
.form-note a{text-decoration:underline; text-underline-offset:3px}
.form-alert{display:none; margin-bottom:16px; padding:12px 14px; border-radius:var(--r-sm); background:rgba(226,114,91,.12); border:1px solid rgba(226,114,91,.4); font-size:.85rem; color:#F0947F}
.form-alert.show{display:block}
.success{display:none; text-align:left}
.success.show{display:block; animation:slideDown .6s var(--e-out)}
.success-ico{width:52px; height:52px; border-radius:50%; background:rgba(183,216,75,.15); display:grid; place-items:center; margin-bottom:20px}
.success-ico svg{width:24px; height:24px; stroke:var(--lime); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.success h3{font-size:1.5rem; margin-bottom:12px}
.success p{color:var(--lt-66); font-size:.96rem}
.is-sent .form-body{display:none}

/* ============================================================
   FOOTER
   ============================================================ */
.ftr{background:var(--ink); color:var(--ivory); padding-block:clamp(56px,6vw,84px) 34px}
.ftr-top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:clamp(26px,3vw,48px)}
.ftr-line{font-family:var(--f-display); font-size:clamp(1.15rem,1.9vw,1.5rem); letter-spacing:-.03em; margin-top:20px; max-width:22ch; color:var(--lt-92)}
.ftr h4{font-family:var(--f-mono); font-size:.62rem; letter-spacing:.15em; text-transform:uppercase; color:var(--lt-46); font-weight:500; margin-bottom:16px}
.ftr li{margin-bottom:11px}
.ftr li a{font-size:.92rem; color:var(--lt-66); transition:color .3s}
.ftr li a:hover{color:var(--lime)}
.ftr-btm{margin-top:clamp(44px,5vw,70px); padding-top:26px; border-top:1px solid var(--lt-08); display:flex; justify-content:space-between; gap:22px; flex-wrap:wrap}
.ftr-btm p{font-size:.78rem; color:var(--lt-46); max-width:74ch; line-height:1.6}
.soc{display:flex; gap:10px}
.soc a{width:36px; height:36px; border:1px solid var(--lt-16); border-radius:var(--r-xs); display:grid; place-items:center; transition:all .3s}
.soc a:hover{border-color:var(--lime); background:rgba(183,216,75,.1)}
.soc svg{width:15px; height:15px; fill:var(--lt-66)}
.soc a:hover svg{fill:var(--lime)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width:1041px){
  .hero .device{width:min(296px,34vh)}
}
@media (max-width:1040px){
  .hero-grid{grid-template-columns:1fr; gap:44px}
  .hero-copy{max-width:none}
  .hero-visual{min-height:0; order:2}
  .split,.wl{grid-template-columns:1fr; gap:34px}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .trust-grid{grid-template-columns:repeat(2,1fr)}
  .ftr-top{grid-template-columns:1fr 1fr}
  .frag{grid-template-columns:repeat(2,1fr)}
  .road-grid{grid-template-columns:1fr 1fr}
  .road-rail{display:none}
  .sys{min-height:0; aspect-ratio:auto}
  .sys-lines,.sys-node,.sys-core{display:none}
  .sys-list{display:grid; grid-template-columns:1fr; gap:1px; background:rgba(8,9,10,.12); border:1px solid rgba(8,9,10,.12); border-radius:var(--r-md); overflow:hidden}
  .sys-li{background:var(--sage); padding:18px 20px; display:flex; gap:14px; align-items:baseline}
  .sys-li strong{font-family:var(--f-display); font-weight:500; font-size:1rem; letter-spacing:-.02em; min-width:96px}
  .sys-li span{font-size:.86rem; color:var(--ink-55)}
}
@media (max-width:820px){
  .nav,.hdr-cta .btn{display:none}
  .burger{display:flex}
  .stage{flex-direction:column; gap:34px}
  .stage .side{display:none}
  .aud-list{grid-template-columns:1fr}
}
@media (max-width:620px){
  body{font-size:16px}
  .hero{min-height:auto}
  .hero-in{padding-top:calc(var(--nav-h) + 30px); padding-bottom:18px}
  .hero-visual{transform:scale(.92); transform-origin:top center; margin-top:-8px}
  .grid-3,.ftr-top,.road-grid,.trust-grid,.frag{grid-template-columns:1fr}
  .hero-actions .btn{flex:1 1 100%}
  .fld-row{grid-template-columns:1fr}
  .device{width:262px}
  .ftr-btm{flex-direction:column}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .rv{opacity:1; transform:none}
  .hero h1 .ln>span{transform:none}
  .scr-row{opacity:1; transform:none}
}

/* ============================================================
   ============================================================
   ADDITIONS — legal pages, regulatory components, cookie bar
   ============================================================
   ============================================================ */

/* ------------------------------------------------------------
   SHARED BITS
   ------------------------------------------------------------ */
.btn-sm{padding:9px 16px; font-size:.84rem}
mark.todo{
  background:#FFE9A8; color:#5A4300; padding:2px 7px; border-radius:4px;
  font-weight:600; font-size:.92em;
}

/* ------------------------------------------------------------
   LEGAL / CONTENT PAGE LAYOUT
   ------------------------------------------------------------ */
.page-legal{background:var(--ivory); color:var(--ink)}

.legal-hero{
  background:var(--ink); color:var(--ivory);
  padding-block:calc(var(--nav-h) + clamp(56px,8vw,96px)) clamp(52px,7vw,84px);
  position:relative; overflow:hidden;
}
.legal-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(58% 70% at 82% 10%, rgba(22,61,49,.6), transparent 68%),
             radial-gradient(40% 50% at 10% 90%, rgba(183,216,75,.1), transparent 70%);
}
.legal-hero .wrap{position:relative; z-index:1}
.legal-hero .eyebrow{color:var(--lt-46)}
.legal-hero .lede{color:var(--lt-66); max-width:62ch; margin-top:22px}
.legal-title{
  font-family:var(--f-display); font-weight:500;
  font-size:clamp(2.2rem,5.4vw,4rem); line-height:1.02; letter-spacing:-.035em;
  margin-top:18px; max-width:20ch;
}
.legal-meta{
  margin-top:26px; font-family:var(--f-mono); font-size:.74rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--lt-46);
}

.legal-body{padding-block:clamp(56px,7vw,90px) clamp(72px,9vw,120px)}
.legal-wrap{max-width:860px}

.legal-wrap h2{
  font-family:var(--f-display); font-weight:500;
  font-size:clamp(1.5rem,2.7vw,2rem); line-height:1.16; letter-spacing:-.028em;
  margin-top:3em; margin-bottom:.7em; scroll-margin-top:calc(var(--nav-h) + 20px);
}
.legal-wrap > h2:first-of-type{margin-top:0}
.legal-wrap h3{
  font-family:var(--f-display); font-weight:600;
  font-size:1.07rem; letter-spacing:-.012em;
  margin-top:2em; margin-bottom:.5em;
}
.legal-wrap p{margin-bottom:1.1em; color:var(--ink-70); max-width:74ch}
.legal-wrap p b, .legal-wrap li b{color:var(--ink); font-weight:600}
.legal-wrap a{color:var(--ink); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--ink-38); transition:text-decoration-color .2s}
.legal-wrap a:hover{text-decoration-color:var(--ink)}
.legal-wrap code{
  font-family:var(--f-mono); font-size:.86em; background:var(--ink-08);
  padding:2px 6px; border-radius:4px;
}
.legal-list{margin:0 0 1.4em; padding:0; list-style:none; max-width:74ch}
.legal-list li{
  position:relative; padding-left:22px; margin-bottom:.6em; color:var(--ink-70);
}
.legal-list li::before{
  content:""; position:absolute; left:2px; top:.62em;
  width:6px; height:6px; border-radius:50%; background:var(--lime);
}
.addr{
  font-style:normal; padding:18px 20px; border-left:3px solid var(--ink-14);
  background:#fff; border-radius:0 var(--r-sm) var(--r-sm) 0;
}

/* ------------------------------------------------------------
   CALLOUTS
   ------------------------------------------------------------ */
.callout{
  border-radius:var(--r-md); padding:clamp(22px,3.2vw,30px);
  margin:2em 0 2.4em; border:1px solid var(--ink-14); background:#fff;
}
.callout h2, .callout h3{margin-top:0; margin-bottom:.6em; font-size:1.12rem}
.callout h2{font-size:1.22rem}
.callout p:last-child, .callout ul:last-child{margin-bottom:0}
.callout ul{margin:0 0 1em; padding:0; list-style:none}
.callout li{position:relative; padding-left:22px; margin-bottom:.55em; color:var(--ink-70)}
.callout li::before{
  content:""; position:absolute; left:2px; top:.62em;
  width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.45;
}

.callout-key{background:var(--forest); color:var(--ivory); border-color:transparent}
.callout-key h2, .callout-key h3{color:var(--ivory)}
.callout-key p, .callout-key li{color:var(--lt-66)}
.callout-key b{color:var(--ivory)}
.callout-key li::before{background:var(--lime); opacity:1}
.callout-key a{color:var(--lime); text-decoration-color:rgba(183,216,75,.5)}
.callout-key a:hover{text-decoration-color:var(--lime)}

.callout-warn{
  background:#FFF8EC; border-color:#E8CFA3;
  border-left:4px solid var(--clay);
}
.callout-info{background:var(--bluegrey); border-color:#C3D6EE}
.callout-info h3{color:var(--ink)}

/* ------------------------------------------------------------
   TABLES
   ------------------------------------------------------------ */
.table-scroll{
  overflow-x:auto; margin:1.4em 0 1.2em;
  border:1px solid var(--ink-14); border-radius:var(--r-md); background:#fff;
  -webkit-overflow-scrolling:touch;
}
.table-scroll:focus-visible{outline:2px solid var(--lime); outline-offset:2px}
.legal-table{width:100%; border-collapse:collapse; font-size:.9rem; min-width:620px}
.legal-table th, .legal-table td{
  text-align:left; padding:14px 16px; vertical-align:top;
  border-bottom:1px solid var(--ink-08);
}
.legal-table thead th{
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-55); background:var(--cream);
  border-bottom:1px solid var(--ink-14); white-space:nowrap;
}
.legal-table tbody tr:last-child td{border-bottom:0}
.legal-table td{color:var(--ink-70)}
.legal-table td b{color:var(--ink)}
.legal-table a{color:var(--ink)}
.tmuted{color:var(--ink-38); font-size:.88em; display:inline-block; margin-top:3px}
.tnote{font-size:.82rem; color:var(--ink-55); margin-top:-.4em}

.tag{
  display:inline-block; font-family:var(--f-mono); font-size:.64rem;
  letter-spacing:.08em; text-transform:uppercase; padding:4px 9px;
  border-radius:100px; white-space:nowrap; font-weight:500;
}
.tag-partner{background:var(--forest); color:var(--ivory)}
.tag-sv{background:var(--lime); color:var(--ink)}
.tag-planned{background:var(--ink-08); color:var(--ink-55)}

/* ------------------------------------------------------------
   REGULATORY MODEL CARDS
   ------------------------------------------------------------ */
.model-grid{
  display:grid; gap:14px; margin:1.8em 0 2.2em;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
}
.model-card{
  background:#fff; border:1px solid var(--ink-14); border-radius:var(--r-md);
  padding:24px 22px;
}
.model-card h3{margin:12px 0 8px; font-size:1rem}
.model-card p{margin:0; font-size:.88rem; color:var(--ink-70)}
.model-num{
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em;
  color:var(--ink-38);
}

/* ------------------------------------------------------------
   PROTECTION CARDS
   ------------------------------------------------------------ */
.prot-grid{
  display:grid; gap:14px; margin:1.8em 0 2em;
  grid-template-columns:repeat(auto-fit,minmax(265px,1fr));
}
.prot-card{
  background:#fff; border:1px solid var(--ink-14); border-radius:var(--r-md);
  padding:24px 22px; border-top:4px solid var(--ink-14);
}
.prot-card h3{margin:0 0 6px; font-size:1rem}
.prot-card p{margin:0 0 .8em; font-size:.88rem}
.prot-card p:last-child{margin-bottom:0}
.prot-verdict{
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.07em;
  text-transform:uppercase; font-weight:500;
}
.prot-yes{border-top-color:#4C8C5E}
.prot-yes .prot-verdict{color:#2F6B42}
.prot-no{border-top-color:#C0573C}
.prot-no .prot-verdict{color:#A8432B}
.prot-part{border-top-color:var(--clay)}
.prot-part .prot-verdict{color:#9A6238}

/* ------------------------------------------------------------
   STEPS (complaints)
   ------------------------------------------------------------ */
.steps{margin:1.6em 0 2em; display:grid; gap:4px}
.step{
  display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start;
  padding:20px 22px; background:#fff; border:1px solid var(--ink-14);
  border-radius:var(--r-md);
}
.step h3{margin:0 0 5px; font-size:1rem}
.step p{margin:0; font-size:.89rem}
.step-n{
  width:30px; height:30px; border-radius:50%; background:var(--forest);
  color:var(--ivory); display:grid; place-items:center;
  font-family:var(--f-mono); font-size:.8rem;
}

/* ------------------------------------------------------------
   ABOUT / CONTACT GRID
   ------------------------------------------------------------ */
.about-grid{
  display:grid; gap:14px; margin:1.8em 0 2.4em;
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
}
.about-card{
  background:#fff; border:1px solid var(--ink-14); border-radius:var(--r-md);
  padding:26px 24px;
}
.about-card h3{margin:0 0 10px; font-size:1.02rem}
.about-card p{margin:0 0 .7em; font-size:.9rem}
.about-card p:last-child{margin-bottom:0}
.contact-link{
  font-family:var(--f-mono); font-size:.86rem; word-break:break-word;
}

/* ------------------------------------------------------------
   LEGAL PAGE CTA
   ------------------------------------------------------------ */
.legal-cta{
  margin-top:3.4em; padding-top:2.4em; border-top:1px solid var(--ink-14);
}
.legal-cta h2{margin-top:0}
.legal-cta p{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:0}

/* ------------------------------------------------------------
   404
   ------------------------------------------------------------ */
.err404{padding-block:calc(var(--nav-h) + clamp(70px,11vw,130px)) clamp(80px,11vw,130px)}
.err404-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.err404-links{
  display:flex; flex-wrap:wrap; gap:10px 24px; margin-top:44px;
  padding-top:26px; border-top:1px solid var(--lt-16);
}
.err404-links a{color:var(--lt-66); font-size:.9rem; text-decoration:underline;
  text-underline-offset:3px; text-decoration-color:rgba(251,247,239,.25)}
.err404-links a:hover{color:var(--ivory)}

/* ------------------------------------------------------------
   HOMEPAGE — REGULATED PARTNER SECTION
   ------------------------------------------------------------ */
.partner-flow{
  display:grid; grid-template-columns:1fr auto 1fr; gap:20px; align-items:stretch;
  margin-top:clamp(44px,5.5vw,70px);
}
.pf-card{
  background:var(--lt-08); border:1px solid var(--lt-16);
  border-radius:var(--r-lg); padding:clamp(26px,3.4vw,36px);
}
.pf-card-partner{border-color:rgba(183,216,75,.3)}
.pf-card h3{
  font-family:var(--f-display); font-weight:500; font-size:1.3rem;
  letter-spacing:-.02em; margin:16px 0 18px; color:var(--ivory);
}
.pf-card ul{display:grid; gap:11px}
.pf-card li{
  position:relative; padding-left:23px; color:var(--lt-66); font-size:.93rem;
}
.pf-card li::before{
  content:""; position:absolute; left:0; top:.55em; width:7px; height:7px;
  border-radius:50%; background:var(--lime); opacity:.75;
}
.pf-tag{
  display:inline-block; font-family:var(--f-mono); font-size:.66rem;
  letter-spacing:.1em; text-transform:uppercase; padding:5px 11px;
  border-radius:100px;
}
.pf-tag-sv{background:var(--lime); color:var(--ink)}
.pf-tag-partner{background:transparent; color:var(--lime); border:1px solid rgba(183,216,75,.45)}
.pf-join{display:grid; place-items:center; color:var(--lt-46); width:40px}
.pf-join svg{width:40px; height:24px}

.partner-points{
  display:grid; gap:14px; margin-top:20px;
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
}
.pp{
  padding:26px 24px; border:1px solid var(--lt-16); border-radius:var(--r-md);
}
.pp h3{
  font-family:var(--f-display); font-weight:600; font-size:1rem;
  margin-bottom:9px; color:var(--ivory); letter-spacing:-.01em;
}
.pp p{font-size:.89rem; color:var(--lt-66); margin:0}

.partner-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(36px,4.5vw,52px)}

/* Risk/provider note on feature cards */
.card-note{
  display:block; margin-top:14px; font-family:var(--f-mono);
  font-size:.68rem; letter-spacing:.04em; color:var(--ink-55);
  padding-top:12px; border-top:1px solid var(--ink-08);
}
.card-note-risk{color:#A8432B}

/* ------------------------------------------------------------
   FOOTER — REGULATORY NOTICE
   ------------------------------------------------------------ */
.ftr-reg{
  margin-top:clamp(44px,5vw,64px); padding-top:clamp(30px,3.6vw,40px);
  border-top:1px solid var(--lt-16);
}
.ftr-reg-h{
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--lt-46); margin-bottom:16px;
}
.ftr-reg p{
  font-size:.79rem; line-height:1.65; color:var(--lt-46);
  margin-bottom:12px; max-width:92ch;
}
.ftr-reg p:last-child{margin-bottom:0}
.ftr-reg b{color:var(--lt-66); font-weight:500}
.ftr-reg a{color:var(--lime); text-decoration:underline; text-underline-offset:2px}

.ftr-btm-links{display:flex; flex-wrap:wrap; gap:8px 20px}
.ftr-btm-links a{text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:rgba(251,247,239,.22)}
.ftr-btm-links a:hover{text-decoration-color:currentColor}

/* ------------------------------------------------------------
   COOKIE BAR
   ------------------------------------------------------------ */
.cookiebar{
  position:fixed; left:max(16px,env(safe-area-inset-left));
  right:max(16px,env(safe-area-inset-right));
  bottom:max(16px,env(safe-area-inset-bottom)); z-index:120;
  max-width:720px; margin-inline:auto;
  background:var(--charcoal); color:var(--ivory);
  border:1px solid var(--lt-16); border-radius:var(--r-md);
  padding:20px 22px; display:flex; flex-wrap:wrap; gap:16px;
  align-items:center; justify-content:space-between;
  box-shadow:0 18px 50px rgba(0,0,0,.4);
  animation:cookieIn .5s var(--e-out) both;
}
.cookiebar[hidden]{display:none}
.cookiebar p{margin:0; font-size:.82rem; line-height:1.55; color:var(--lt-66); flex:1 1 300px}
.cookiebar a{color:var(--lime); text-decoration:underline; text-underline-offset:2px}
.cookiebar-btns{display:flex; gap:10px; flex-wrap:wrap}
@keyframes cookieIn{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width:860px){
  .partner-flow{grid-template-columns:1fr}
  .pf-join{width:auto; transform:rotate(90deg); margin-inline:auto}
}
@media (max-width:680px){
  .legal-wrap h2{margin-top:2.4em}
  .step{grid-template-columns:auto 1fr; gap:14px; padding:18px}
  .callout{padding:20px}
  /* Compact on phones: a tall stacked bar would sit over the hero copy. */
  .cookiebar{padding:14px 16px; gap:12px; flex-direction:column; align-items:stretch}
  /* flex-basis is the BLOCK axis once stacked — without this the paragraph
     reserves 300px of height and the bar swallows the hero. */
  .cookiebar p{flex:0 0 auto; font-size:.76rem; line-height:1.5}
  .cookiebar-btns{display:grid; grid-template-columns:1fr 1fr; gap:8px}
  .cookiebar-btns .btn{width:100%; justify-content:center; padding:10px 12px; font-size:.8rem}
  .legal-cta p{flex-direction:column; align-items:stretch}
  .legal-cta .btn{justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .cookiebar{animation:none}
}

/* ------------------------------------------------------------
   COOKIE BAR CLEARANCE
   While the cookie bar is on screen it must not sit over the
   hero risk warning. JS adds .cookiebar-open to <body> while
   the bar is visible and removes it once a choice is made.
   ------------------------------------------------------------ */
body.cookiebar-open .ftr-btm{padding-bottom:clamp(90px,12vh,140px)}

/* The hero risk warning sits ABOVE the call-to-action buttons, so it stays
   clear of the cookie bar and is read before anyone clicks through. */
.hero-legal{max-width:52ch; margin-bottom:24px}
.hero-actions{margin-bottom:0}

/* ------------------------------------------------------------
   HERO RISK WARNING — legibility
   .fine defaults to dark ink for light sections. The hero is a
   dark surface but is not one of the .s-ink/.s-forest classes,
   so the warning was rendering as near-black on near-black.
   ------------------------------------------------------------ */
.hero-legal{color:var(--lt-66)}
.hero-legal a{
  color:var(--lime); text-decoration:underline; text-underline-offset:2px;
  text-decoration-color:rgba(183,216,75,.45);
}
.hero-legal a:hover{text-decoration-color:var(--lime)}

/* ------------------------------------------------------------
   SMALL PHONES — tighten the hero and the cookie bar so the
   bar can never sit over the risk warning.
   ------------------------------------------------------------ */
@media (max-width:430px){
  .hero-chips{margin-bottom:18px; gap:6px}
  .chip{padding:6px 10px; font-size:.62rem}
  .hero-sub{margin-bottom:22px}
  .hero-legal{margin-bottom:18px}
  .cookiebar{padding:12px 14px; gap:10px}
  .cookiebar p{font-size:.72rem; line-height:1.45}
  .cookiebar-btns .btn{padding:9px 10px; font-size:.76rem}
}
@media (max-height:760px) and (max-width:680px){
  .cookiebar p{font-size:.7rem; line-height:1.4}
  .cookiebar{padding:11px 13px; gap:9px}
}

/* ============================================================
   ============================================================
   BLOG
   ============================================================
   ============================================================ */

/* ------------------------------------------------------------
   TAG BAR + CHIPS
   ------------------------------------------------------------ */
.tagbar{display:flex; flex-wrap:wrap; gap:8px; margin-top:30px}
.tagchip{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.07em;
  text-transform:uppercase; padding:7px 13px; border-radius:100px;
  border:1px solid var(--lt-16); color:var(--lt-66);
  transition:border-color .2s, color .2s, background .2s;
}
.tagchip span{
  font-size:.9em; opacity:.6; padding-left:6px;
  border-left:1px solid currentColor;
}
.tagchip:hover{border-color:var(--lime); color:var(--ivory)}
.tagchip.is-on{background:var(--lime); border-color:var(--lime); color:var(--ink)}
.tagchip.is-on span{opacity:.75}

/* On light surfaces (post hero tags sit on dark, these are for elsewhere) */
.legal-body .tagchip{border-color:var(--ink-14); color:var(--ink-55)}
.legal-body .tagchip:hover{border-color:var(--ink); color:var(--ink)}

/* ------------------------------------------------------------
   BREADCRUMBS
   ------------------------------------------------------------ */
.crumbs{
  display:flex; flex-wrap:wrap; gap:9px; align-items:center;
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--lt-46); margin-bottom:26px;
}
.crumbs a{color:var(--lt-46); transition:color .2s}
.crumbs a:hover{color:var(--lime)}

/* ------------------------------------------------------------
   FEATURED POST
   ------------------------------------------------------------ */
.post-feat{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,3.4vw,46px);
  align-items:center; background:#fff; border:1px solid var(--ink-14);
  border-radius:var(--r-lg); overflow:hidden; margin-bottom:22px;
  transition:border-color .25s var(--e-soft), transform .25s var(--e-soft);
}
.post-feat:hover{border-color:var(--ink-38); transform:translateY(-2px)}
.post-feat-media{
  aspect-ratio:4/3; background:var(--cream); position:relative; overflow:hidden;
  align-self:stretch;
}
.post-feat-media img{width:100%; height:100%; object-fit:cover}
.post-feat-body{padding:clamp(26px,3.4vw,46px) clamp(26px,3.4vw,46px) clamp(26px,3.4vw,46px) 0}
.post-feat-body h2{
  font-family:var(--f-display); font-weight:500;
  font-size:clamp(1.5rem,2.9vw,2.2rem); line-height:1.1; letter-spacing:-.03em;
  margin:14px 0 14px; color:var(--ink);
}
.post-feat-body p{color:var(--ink-70); margin-bottom:18px; max-width:52ch}

/* ------------------------------------------------------------
   POST GRID
   ------------------------------------------------------------ */
.post-grid{
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
}
.post-card{
  background:#fff; border:1px solid var(--ink-14); border-radius:var(--r-md);
  overflow:hidden; transition:border-color .25s var(--e-soft), transform .25s var(--e-soft);
}
.post-card:hover{border-color:var(--ink-38); transform:translateY(-3px)}
.post-card > a{display:block; padding-bottom:24px}
.post-card-media{
  aspect-ratio:16/10; background:var(--cream); overflow:hidden;
  border-bottom:1px solid var(--ink-08);
}
.post-card-media img{width:100%; height:100%; object-fit:cover}
.post-card h3{
  font-family:var(--f-display); font-weight:500; font-size:1.2rem;
  line-height:1.22; letter-spacing:-.022em; margin:12px 24px 10px; color:var(--ink);
}
.post-card p{
  color:var(--ink-70); font-size:.9rem; margin:0 24px 16px; line-height:1.55;
}
.post-card .post-kicker{margin:20px 24px 0}
.post-card .post-meta{margin:0 24px}

/* Image slot with no file yet: a quiet brand gradient, not a broken box */
.post-card-media[data-empty], .post-feat-media[data-empty]{
  background:
    radial-gradient(70% 90% at 22% 18%, rgba(22,61,49,.16), transparent 62%),
    radial-gradient(60% 70% at 84% 80%, rgba(183,216,75,.2), transparent 66%),
    var(--cream);
}

.post-kicker{
  display:block; font-family:var(--f-mono); font-size:.66rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-38);
}
.post-meta{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.06em;
  color:var(--ink-38);
}

/* ------------------------------------------------------------
   PAGER
   ------------------------------------------------------------ */
.pager{
  display:flex; align-items:center; justify-content:center; gap:20px;
  margin-top:46px; flex-wrap:wrap;
}
.pager-count{
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-38);
}

/* ------------------------------------------------------------
   BLOG CTA
   ------------------------------------------------------------ */
.blog-cta{
  display:flex; flex-wrap:wrap; gap:22px; align-items:center;
  justify-content:space-between;
  margin-top:clamp(56px,7vw,86px); padding-top:clamp(34px,4vw,48px);
  border-top:1px solid var(--ink-14);
}
.blog-cta h2{
  font-family:var(--f-display); font-weight:500; font-size:1.5rem;
  letter-spacing:-.025em; margin:0 0 8px;
}
.blog-cta p{margin:0; color:var(--ink-70); max-width:52ch}

/* ------------------------------------------------------------
   SINGLE POST
   ------------------------------------------------------------ */
.post-hero .post-title{max-width:22ch}
.post-tags{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px}
.post-hero .legal-meta{display:flex; flex-wrap:wrap; gap:9px; align-items:center}

.post-cover{margin:0; background:var(--ink)}
.post-cover img{
  width:100%; max-height:min(560px,62vh); object-fit:cover;
  border-radius:var(--r-lg);
}
.post-cover .wrap{transform:translateY(clamp(-70px,-7vw,-30px))}

/* Post body typography — slightly larger than the legal pages */
.post-body p{font-size:1.04rem; line-height:1.72; max-width:68ch}
.post-body h2{
  font-size:clamp(1.45rem,2.5vw,1.85rem); margin-top:2.2em; margin-bottom:.6em;
}
.post-body h3{font-size:1.14rem; margin-top:1.8em}
.post-body > p:first-of-type{
  font-size:1.16rem; line-height:1.65; color:var(--ink-90);
}
.md-ul, .md-ol{margin:0 0 1.5em; padding:0; max-width:68ch}
.md-ul li, .md-ol li{
  position:relative; padding-left:26px; margin-bottom:.65em;
  color:var(--ink-70); line-height:1.66;
}
.md-ul li::before{
  content:""; position:absolute; left:4px; top:.68em;
  width:6px; height:6px; border-radius:50%; background:var(--lime);
}
.md-ol{counter-reset:li}
.md-ol li{counter-increment:li; list-style:none}
.md-ol li::before{
  content:counter(li); position:absolute; left:0; top:.1em;
  font-family:var(--f-mono); font-size:.76rem; color:var(--ink-38);
}
.md-quote{
  margin:2em 0; padding:4px 0 4px 26px; border-left:3px solid var(--lime);
}
.md-quote p{
  font-family:var(--f-display); font-size:1.2rem; line-height:1.5;
  letter-spacing:-.015em; color:var(--ink); margin:0; max-width:56ch;
}
.md-hr{border:0; border-top:1px solid var(--ink-14); margin:2.6em 0}
.md-pre{
  background:var(--ink); color:var(--ivory); padding:20px 22px;
  border-radius:var(--r-md); overflow-x:auto; margin:1.6em 0;
  font-family:var(--f-mono); font-size:.84rem; line-height:1.6;
}
.md-pre code{background:none; padding:0; color:inherit; font-size:inherit}
.md-fig{margin:2em 0}
.md-fig img{width:100%; border-radius:var(--r-md)}
.md-fig figcaption{
  margin-top:11px; font-size:.82rem; color:var(--ink-55); text-align:center;
}
.post-body img{border-radius:var(--r-md)}

/* ------------------------------------------------------------
   SHARE ROW
   ------------------------------------------------------------ */
.post-share{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  margin-top:3em; padding-top:1.8em; border-top:1px solid var(--ink-14);
}
.post-share > span{
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-38); margin-right:4px;
}
.post-share a{
  width:38px; height:38px; display:grid; place-items:center;
  border:1px solid var(--ink-14); border-radius:50%;
  transition:border-color .2s, background .2s, color .2s;
}
.post-share a svg{width:16px; height:16px; fill:currentColor}
.post-share a:hover{background:var(--ink); border-color:var(--ink); color:var(--ivory)}
.share-copy{
  background:none; border:1px solid var(--ink-14); border-radius:100px;
  padding:9px 17px; cursor:pointer; font-family:var(--f-mono);
  font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-55); transition:border-color .2s, color .2s;
}
.share-copy:hover{border-color:var(--ink); color:var(--ink)}
.share-copy.is-done{border-color:var(--lime); color:var(--ink); background:var(--lime)}

/* ------------------------------------------------------------
   PER-POST DISCLAIMER
   ------------------------------------------------------------ */
.post-disclaimer{
  margin-top:2.4em; padding:24px 26px; border-radius:var(--r-md);
  background:var(--cream); border:1px solid var(--ink-08);
}
.post-disclaimer p{
  font-size:.84rem; line-height:1.62; color:var(--ink-55);
  margin-bottom:.8em; max-width:none;
}
.post-disclaimer p:last-child{margin-bottom:0}
.post-disclaimer b{color:var(--ink-70)}

.related-sec{padding-block:clamp(60px,7vw,90px)}

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width:880px){
  .post-feat{grid-template-columns:1fr}
  .post-feat-media{aspect-ratio:16/9}
  .post-feat-body{padding:0 clamp(22px,4vw,30px) clamp(26px,4vw,34px)}
}
@media (max-width:680px){
  .post-cover .wrap{transform:none; padding-inline:0}
  .post-cover img{border-radius:0; max-height:46vh}
  .blog-cta{flex-direction:column; align-items:stretch}
  .blog-cta .btn{justify-content:center}
  .post-body p{font-size:1rem}
  .post-share{gap:10px}
}

/* A cover image that has not been uploaded yet collapses rather than
   leaving a broken frame on the page. */
.post-cover[data-empty]{display:none}