/* === DVKV-TOKENS v1 — KEEP BYTE-IDENTICAL ACROSS hub.css AND legal.css === */
@property --m { syntax: "<number>"; inherits: true; initial-value: 0.5; }
@property --s { syntax: "<number>"; inherits: true; initial-value: 0.28; }
@property --draw { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --glow-a { syntax: "<number>"; inherits: true; initial-value: 0.37; }
@property --grain-a { syntax: "<number>"; inherits: true; initial-value: 0.0625; }
@property --border-a { syntax: "<number>"; inherits: true; initial-value: 0.15; }
@property --near { syntax: "<number>"; inherits: false; initial-value: 0.5; }

:root{
  /* ---- brand endpoints. These eight hexes are the source of truth for JS too. ---- */
  --dv-1:#6C3AE0;  --dv-2:#00E5FF;  --dv-3:#FF0080;  --dv-bg:#0A0A1A;
  --kv-1:#2D6CDF;  --kv-2:#5AC8FA;  --kv-3:#E8A33D;  --kv-bg:#0B0F16;

  /* ---- the axis. JS writes ONLY this (and --s). ---- */
  --m: .5;
  --m-inv: calc(1 - var(--m));
  --p: calc(var(--m-inv) * 100%);      /* DiscoVision weight, as a percentage */

  /* ---- morphed colour tokens. Everything on the page reads these, never a raw brand hex. ---- */
  --c1: color-mix(in oklab, var(--dv-1) var(--p), var(--kv-1));
  --c2: color-mix(in oklab, var(--dv-2) var(--p), var(--kv-2));
  --c3: color-mix(in oklab, var(--dv-3) var(--p), var(--kv-3));
  --bg: color-mix(in oklab, var(--dv-bg) var(--p), var(--kv-bg));
  --bg2:color-mix(in oklab, #12122A var(--p), #17202E);

  /* ---- morphed mood scalars: DiscoVision is louder, KeynoteVision is calmer ---- */
  --glow-a:   calc(.22 + var(--m-inv) * .30);
  --grain-a:  calc(.040 + var(--m-inv) * .045);
  --radius:   calc(14px + var(--m-inv) * 8px);
  --border-a: calc(.10 + var(--m-inv) * .10);
  --border:   rgba(255,255,255,var(--border-a));
  --glow:     0 18px 60px -28px color-mix(in oklab, var(--c1) calc(var(--glow-a)*100%), transparent),
              0 0 46px -20px color-mix(in oklab, var(--c2) calc(var(--glow-a)*100%), transparent);

  /* ---- fixed neutrals: NEVER morph. Contrast must not depend on the axis. ---- */
  --ink:#EEF0F8;  --muted:#9AA0B6;  --dim:#6B7088;
  --surface:rgba(255,255,255,.035);

  /* ---- motion tokens. Every transition on this site uses one of these. ---- */
  --ease:      cubic-bezier(.2,.7,.3,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --t-fast: 160ms;  --t: 280ms;  --t-slow: 520ms;

  --wrap:1120px;
  --font-display:"Unbounded",system-ui,sans-serif;
  --font-body:"General Sans",system-ui,sans-serif;
}
/* === END DVKV-TOKENS === */

/* ---------- scroll-derived scalars (hub only; the whole glasses state machine) ----------
   --spread is 0 at rest at BOTH ends, so "reform at the CTA" falls out for free.        */
:root{
  --split:  clamp(0, calc((var(--s) - .42) / .30), 1);   /* .42→.72  come apart */
  --reform: clamp(0, calc((var(--s) - .74) / .24), 1);   /* .74→.98  rejoin    */
  --spread: calc(var(--split) - var(--reform));          /* 0 → 1 → 0          */
  --seam:   clamp(0, calc((var(--s) - .93) / .05), 1);   /* the closing glint  */
}

/* ---------- ancient-engine fallback: a fixed, handsome mid-axis palette ---------- */
@supports not (color: color-mix(in oklab, #000 50%, #fff)){
  :root{
    --m:.5;
    --c1:#4E53B0; --c2:#2DD6FA; --c3:#F0568E; --bg:#0A0A18; --bg2:#151528;
    --border:rgba(255,255,255,.15);
    --glow:0 18px 60px -28px rgba(78,83,176,.55), 0 0 46px -20px rgba(45,214,250,.42);
  }
  .top{ background:#0A0A18; }
  .glasses #g-left, .glasses #g-right{ --lens:#2DD6FA; }
  .btn-primary{ background:linear-gradient(100deg,#2DD6FA,#4E9BE0); box-shadow:0 18px 50px -26px rgba(78,83,176,.6); }
  .card.disco{ --own-a:rgba(108,58,224,.30); --own-b:rgba(0,229,255,.16); --own-c:rgba(255,0,128,.30); }
  .card.key  { --own-a:rgba(45,108,223,.30); --own-b:rgba(90,200,250,.16); --own-c:rgba(232,163,61,.28); }
  .card.disco{ border-color:rgba(0,229,255,.28); }
  .card.key  { border-color:rgba(90,200,250,.28); }
}

/* ---------- faces (already shipped; one borrowed from each brand) ---------- */
@font-face{
  font-family:"Unbounded";
  src:url("../fonts/unbounded-var.woff2") format("woff2");
  font-weight:200 900;font-display:swap;font-style:normal;
}
@font-face{
  font-family:"General Sans";
  src:url("../fonts/general-sans-var.woff2") format("woff2");
  font-weight:200 700;font-display:swap;font-style:normal;
}

/* ---------- base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:1.0625rem; line-height:1.65;
  overflow-x:hidden; min-height:100vh; -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
img,svg{ max-width:100%; }
:focus-visible{ outline:2px solid var(--c2); outline-offset:3px; border-radius:inherit; }

.shell{ max-width:var(--wrap); margin:0 auto; padding:0 clamp(1.1rem,4vw,2.4rem); }
.vh{
  position:absolute!important; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

.skip-link{
  position:fixed; left:50%; top:0; translate:-50% -140%; z-index:100;
  background:var(--bg2); color:var(--ink); border:1px solid var(--c2);
  border-radius:0 0 14px 14px; padding:.7rem 1.4rem; font-weight:600;
  font-family:var(--font-display); font-size:.82rem; letter-spacing:.04em;
  transition:translate var(--t) var(--ease-out);
}
.skip-link:focus-visible{ translate:-50% 0; outline-offset:-4px; }

/* ---------- background stack ---------- */
.bg{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.aurora{
  position:absolute; border-radius:50%; filter:blur(90px); mix-blend-mode:screen;
  opacity:calc(.32 + var(--m-inv) * .26);
  animation-duration:calc(26s + var(--m) * 14s);
  animation-timing-function:ease-in-out; animation-iteration-count:infinite;
}
.aurora.a{
  width:60vw; height:60vw; left:-14vw; top:-18vw; animation-name:drift1;
  background:radial-gradient(circle at 40% 40%,var(--c1),transparent 62%),
             radial-gradient(circle at 70% 60%,var(--c2),transparent 60%);
}
.aurora.b{
  width:58vw; height:58vw; right:-16vw; bottom:-20vw; animation-name:drift2;
  background:radial-gradient(circle at 60% 40%,var(--c1),transparent 62%),
             radial-gradient(circle at 40% 70%,var(--c3),transparent 58%);
}
.aurora.c{
  width:38vw; height:38vw; left:32vw; top:24vh; animation-name:drift3;
  opacity:calc(.20 + var(--m-inv) * .18);
  background:radial-gradient(circle,var(--c3),transparent 60%);
}
canvas.field{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.grain{
  position:absolute; inset:0; opacity:var(--grain-a); 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='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vignette{
  position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 0%,transparent 40%,rgba(0,0,0,.55) 100%);
}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,4vh) scale(1.12)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-5vw,-3vh) scale(1.1)}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-4vw,5vh) scale(1.2)}}

/* ---------- header ---------- */
.top{ position:relative; z-index:10; }
.top-in{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  max-width:var(--wrap); margin:0 auto; padding:1.1rem clamp(1.1rem,4vw,2.4rem);
}
.brand{
  display:inline-flex; align-items:center; gap:.62rem;
  font-family:var(--font-display); font-weight:700; font-size:1.02rem; letter-spacing:.01em;
  border-radius:12px; padding:.2rem .3rem; margin-inline-start:-.3rem;
}
.brand .mark{ width:34px; height:34px; color:var(--c2); flex:none; }
.brand .mark svg{ width:100%; height:100%; display:block; }
.brand .sep{ opacity:.5; }
.pill{
  margin-inline-start:auto;
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  border:1px solid var(--border); border-radius:100px; padding:.42rem .85rem;
  background:var(--surface); display:inline-flex; align-items:center; gap:.5rem; white-space:nowrap;
}
.pill .dot{
  width:7px; height:7px; border-radius:50%; background:var(--c3);
  box-shadow:0 0 10px var(--c3); animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.4;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}

/* ---------- the axis control ---------- */
.axis{
  display:flex; align-items:center; gap:.6rem; margin:0;
  pointer-events:auto;
}
.axis-cap{
  font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dim);
  white-space:nowrap; transition:color var(--t) var(--ease);
}
html[data-side="dv"] .axis-cap:first-of-type,
html[data-side="kv"] .axis-cap:last-of-type{ color:var(--c2); }
.axis-in{
  -webkit-appearance:none; appearance:none; width:180px; height:44px; margin:0;
  background:linear-gradient(90deg,var(--dv-2),var(--kv-2)) center / 100% 3px no-repeat;
  border-radius:100px; cursor:ew-resize;
}
.axis-in::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:14px; height:14px; border-radius:50%;
  background:var(--c2); border:0; cursor:grab;
  box-shadow:0 0 0 4px color-mix(in oklab, var(--c2) 22%, transparent);
}
.axis-in::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%; background:var(--c2); border:0; cursor:grab;
  box-shadow:0 0 0 4px color-mix(in oklab, var(--c2) 22%, transparent);
}
.axis-in::-moz-range-track{ background:transparent; height:3px; }
.no-js .axis{ display:none; }

/* ---------- the rail ---------- */
.rail{ position:relative; z-index:2; }
.rail-stage{
  position:sticky; top:0; height:100svh;
  display:grid; align-content:start; justify-items:center;
  padding-top:2.6rem; pointer-events:none; z-index:1;
}
.glasses{
  --spread-max:110px;
  width:min(300px,62vw); height:auto; display:block; overflow:visible; color:var(--c2);
  opacity:1; filter:drop-shadow(0 0 40px color-mix(in oklab, var(--c2) calc(var(--glow-a)*90%), transparent));
}
.glasses path{ stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--draw)); }
:root{ animation:draw-in 1200ms var(--ease-out) both; }
@keyframes draw-in{ from{ --draw:0 } to{ --draw:1 } }

#g-left{
  transform:translateX(calc(var(--spread) * var(--spread-max) * -1)) rotate(calc(var(--spread) * -5deg));
  transform-origin:310px 195px; transition:none; will-change:transform;
  --lens:color-mix(in oklab, var(--c2) calc((1 - var(--spread)) * 100%), var(--dv-2));
  color:var(--lens);
}
#g-right{
  transform:translateX(calc(var(--spread) * var(--spread-max))) rotate(calc(var(--spread) * 5deg));
  transform-origin:690px 195px; transition:none; will-change:transform;
  --lens:color-mix(in oklab, var(--c2) calc((1 - var(--spread)) * 100%), var(--kv-2));
  color:var(--lens);
}
#g-left path,#g-right path{ stroke:currentColor; }
#g-bridge path{
  stroke:var(--c2);
  stroke-dashoffset:calc(1 - var(--draw) + var(--spread) * .5);
}
#g-bridge{ opacity:calc(1 - var(--spread)); }
.lens-glyph{
  font-family:var(--font-display); font-weight:700; font-size:64px; text-anchor:middle;
  fill:currentColor; letter-spacing:.02em; stroke:none;
  opacity:calc(var(--spread) * .70 + .30);
  transform:scale(calc(.80 + var(--spread) * .20));
}
#g-left .lens-glyph{ transform-origin:310px 180px; }
#g-right .lens-glyph{ transform-origin:690px 180px; }
#g-seam path{ stroke:#FFFFFF; }
#g-seam{ opacity:calc(var(--seam) * (1 - var(--seam)) * 4); }

.rail-state{
  order:-1; margin:0 0 clamp(.7rem,2.2vh,1.6rem); font-size:.68rem; letter-spacing:.34em;
  text-transform:uppercase; color:var(--muted);
}

.rail-step{ position:relative; z-index:2; min-height:100svh; }
/* the copy is sticky too: it holds below the art for most of its step and only slides
   away during the hand-off to the next one, so it never parks on top of the strokes. */
.rail-step > .shell{ position:sticky; top:30vh; width:100%; padding-bottom:2rem; }
/* a soft pool of background under the copy: the sticky art is behind it, so a heading
   crossing the wireframe mid-scroll still reads. Invisible over plain background. */
.rail-step > .shell::before{
  content:""; position:absolute; inset:-3.5rem 0 -3.5rem -9vw; z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom,
    transparent 0,
    color-mix(in oklab, var(--bg) 96%, transparent) 3.5rem,
    color-mix(in oklab, var(--bg) 96%, transparent) calc(100% - 3.5rem),
    transparent 100%);
}
/* step 0 slides up under the sticky stage: keeps the stage inside .rail (a negative
   margin on the sticky element itself lets it escape past the rail's bottom edge). */
.rail-step[data-step="0"]{ margin-top:-100svh; }

/* ---------- step copy ---------- */
.kicker{ font-size:.7rem; letter-spacing:.32em; text-transform:uppercase; color:var(--muted); margin:0 0 1rem; }
h1{
  font-family:var(--font-display); font-weight:800; line-height:.98; margin:0;
  font-size:clamp(2.2rem,3.6vw,3.5rem); letter-spacing:-.02em;
  background:linear-gradient(100deg,var(--c1),var(--c2) 46%,var(--c3));
  background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:flow 9s ease-in-out infinite;
}
@keyframes flow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.tag{
  font-family:var(--font-display); font-weight:500; letter-spacing:-.01em;
  font-size:clamp(1.05rem,3.2vw,1.65rem); margin:1rem 0 0; color:var(--ink);
}
.sub{ max-width:44rem; margin:1.1rem 0 0; color:var(--muted); }
.look{ margin:.9rem 0 0; font-size:1.02rem; color:var(--ink); font-weight:500; }
.hint{
  margin:1.4rem 0 0; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--dim); transition:opacity var(--t-slow) var(--ease);
}
.touched .hint{ opacity:0; }
.hint-coarse{ display:none; }
@media (pointer:coarse){
  .hint-fine{ display:none; }
  .hint-coarse{ display:inline; }
}

h2{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.015em; line-height:1.06;
  font-size:clamp(1.7rem,4.4vw,2.8rem); margin:0;
}
.lead{ max-width:46rem; margin:1rem 0 0; color:var(--muted); }
.eyebrow{ font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--dim); margin:0 0 .35rem; }

.split{
  display:grid; gap:clamp(1.4rem,4vw,3.2rem); margin-top:clamp(1.6rem,4vh,2.6rem);
  grid-template-columns:1fr;
}
.split h3{
  font-family:var(--font-display); font-weight:700; font-size:clamp(1.15rem,2.6vw,1.5rem);
  margin:0 0 .5rem; letter-spacing:-.01em;
}
.split p{ margin:0; color:var(--muted); font-size:1rem; }
.split .col{ position:relative; padding-top:1rem; border-top:1px solid var(--border); }
.split .col::before{
  content:""; position:absolute; top:-1px; left:0; width:56px; height:1px;
  background:var(--own-2); box-shadow:0 0 12px var(--own-2);
}
.col.dv{ --own-1:var(--dv-1); --own-2:var(--dv-2); --near:var(--m-inv); }
.col.kv{ --own-1:var(--kv-1); --own-2:var(--kv-2); --near:var(--m); }
.col.dv h3{ color:var(--dv-2); }
.col.kv h3{ color:var(--kv-2); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:44px; padding:.6rem 1.25rem; border-radius:100px;
  border:1px solid var(--border); background:var(--surface); color:var(--ink);
  font-family:var(--font-display); font-weight:600; font-size:.82rem; letter-spacing:.01em;
  transition:transform var(--t) var(--ease), border-color var(--t) var(--ease),
             box-shadow var(--t) var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{
  color:#08080F; border-color:transparent;
  background:linear-gradient(100deg,var(--own-2),color-mix(in oklab,var(--own-2) 45%,var(--own-1)));
  box-shadow:0 18px 50px -26px color-mix(in oklab,var(--own-1) calc(var(--near)*80%),transparent);
}
.btn-ghost{ border-color:color-mix(in oklab,var(--own-2) calc(var(--near)*55%),var(--border)); }
.btn-ghost:hover{ border-color:var(--own-2); }

.cta-groups{ display:grid; gap:clamp(1rem,3vw,2rem); grid-template-columns:1fr; margin-top:clamp(1.6rem,4vh,2.4rem); }
.cta-group{ display:flex; flex-wrap:wrap; align-items:center; gap:.55rem; }
.cta-group.dv{ --own-1:var(--dv-1); --own-2:var(--dv-2); --near:var(--m-inv); }
.cta-group.kv{ --own-1:var(--kv-1); --own-2:var(--kv-2); --near:var(--m); }
.foot-note{ margin:1.3rem 0 0; color:var(--dim); font-size:.85rem; }

/* ---------- morph words ---------- */
.mw{ display:inline-grid; vertical-align:baseline; }
.mw > i{
  grid-area:1/1; font-style:normal;
  transition:opacity var(--t) var(--ease), filter var(--t) var(--ease);
}
.mw > i[data-side="dv"]{ opacity:1; filter:blur(0); }
.mw > i[data-side="kv"]{ opacity:0; filter:blur(4px); }
html[data-side="kv"] .mw > i[data-side="dv"]{ opacity:0; filter:blur(4px); }
html[data-side="kv"] .mw > i[data-side="kv"]{ opacity:1; filter:blur(0); }

/* ---------- generic section ---------- */
.sec{ position:relative; z-index:2; padding:clamp(3.5rem,10vh,6.5rem) 0; }
.sec-head{ max-width:46rem; }

/* ---------- proof ---------- */
.proof-grid{
  display:grid; gap:clamp(1.2rem,3vw,2.2rem); grid-template-columns:1fr;
  margin-top:clamp(1.8rem,5vh,2.8rem);
}
.proof-shot{
  margin:0; position:relative; isolation:isolate;
  border:1px solid var(--border); border-radius:calc(var(--radius) * 1.4);
  background:var(--bg2); padding:clamp(1rem,2.6vw,1.6rem);
  display:grid; justify-items:center; gap:1rem;
  box-shadow:var(--glow);
}
.proof-shot.dv{ --own-1:var(--dv-1); --own-2:var(--dv-2); --own-3:var(--dv-3); --own-bg:var(--dv-bg); }
.proof-shot.kv{ --own-1:var(--kv-1); --own-2:var(--kv-2); --own-3:var(--kv-3); --own-bg:var(--kv-bg); }
.device{ width:min(240px,58vw); height:auto; display:block; }
.device .frame{ fill:var(--own-bg); stroke:var(--own-1); }
.device .tile{ fill:color-mix(in oklab,var(--own-1) 26%,transparent); stroke:color-mix(in oklab,var(--own-2) 55%,transparent); }
.device .tile-hot{ fill:color-mix(in oklab,var(--own-3) 26%,transparent); stroke:color-mix(in oklab,var(--own-3) 60%,transparent); }
.device .bar{ fill:color-mix(in oklab,var(--own-2) 18%,transparent); }
.device .ttl{ fill:var(--own-2); font-family:var(--font-display); font-weight:700; font-size:13px; }
.device .lbl{ fill:#C9CEE0; font-family:var(--font-body); font-size:9px; }
.device .chip{ fill:var(--own-3); }
.proof-shot figcaption{
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}
.proof-note{ margin:1.4rem 0 0; color:var(--dim); font-size:.82rem; }

/* ---------- kit ---------- */
.kit-lead{ display:grid; gap:clamp(1rem,2.4vw,1.6rem); grid-template-columns:1fr; margin-top:clamp(1.8rem,5vh,2.6rem); }
.kit-card{
  border:1px solid var(--border); border-radius:var(--radius); background:var(--bg2);
  padding:clamp(1.3rem,3vw,1.9rem); display:grid; gap:.7rem; align-content:start;
}
.kit-card .ico{ width:28px; height:28px; color:var(--c2); }
.kit-card h3{ font-family:var(--font-display); font-weight:700; margin:0; letter-spacing:-.01em;
  font-size:clamp(1.15rem,2.6vw,1.5rem); }
.kit-card p{ margin:0; color:var(--muted); font-size:.98rem; }
.kit-minor{ list-style:none; margin:clamp(1.4rem,4vh,2rem) 0 0; padding:0; }
.kit-minor li{
  display:flex; align-items:center; gap:.9rem; padding:.95rem .2rem;
  border-top:1px solid var(--border); font-size:.95rem; color:var(--muted);
}
.kit-minor li:last-child{ border-bottom:1px solid var(--border); }
.kit-minor .ico{ width:18px; height:18px; color:var(--c2); flex:none; }
.kit-minor b{ color:var(--ink); font-weight:600; }

/* ---------- portals ---------- */
.portals{ display:grid; gap:clamp(1rem,2.4vw,1.6rem); grid-template-columns:1fr; margin-top:clamp(1.8rem,5vh,2.6rem); }
.card{
  position:relative; display:flex; flex-direction:column; gap:.9rem; isolation:isolate; min-width:0;
  padding:clamp(1.5rem,3.2vw,2.2rem); border-radius:var(--radius);
  background:var(--bg2);
  border:1px solid rgba(255,255,255,calc(.08 + var(--near) * .22));
  box-shadow:0 20px 64px -30px color-mix(in oklab,var(--own-1) calc(var(--near)*70%),transparent);
  transition:transform var(--t) var(--ease), border-color var(--t) var(--ease),
             box-shadow var(--t) var(--ease);
}
.card::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:radial-gradient(130% 100% at 12% 0%,var(--own-a),transparent 60%),
             radial-gradient(120% 120% at 100% 100%,var(--own-b),transparent 55%);
}
.card.disco{
  --own-1:var(--dv-1); --own-2:var(--dv-2); --own-3:var(--dv-3); --near:var(--m-inv);
  --own-a:color-mix(in oklab,var(--dv-1) 30%,transparent);
  --own-b:color-mix(in oklab,var(--dv-2) 18%,transparent);
  --own-c:color-mix(in oklab,var(--dv-3) 34%,transparent);
}
.card.key{
  --own-1:var(--kv-1); --own-2:var(--kv-2); --own-3:var(--kv-3); --near:var(--m);
  --own-a:color-mix(in oklab,var(--kv-1) 30%,transparent);
  --own-b:color-mix(in oklab,var(--kv-2) 18%,transparent);
  --own-c:color-mix(in oklab,var(--kv-3) 28%,transparent);
}
@media (hover:hover) and (pointer:fine){
  .card:hover{ transform:translateY(-6px); }
}
.card-top{ display:flex; align-items:center; gap:.8rem; }
.badge{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center; flex:none;
  border:1px solid var(--border); color:var(--own-2);
  background:color-mix(in oklab,var(--own-1) 22%,transparent);
}
.badge svg{ width:24px; height:24px; }
.card h2{ font-size:clamp(1.22rem,4.4vw,1.5rem); margin:0; }
.card h2 .accent{ color:var(--own-2); }
/* stretched link: the <a> covers the whole card, so focus is visible on the whole card */
.card h2 a::after{ content:""; position:absolute; inset:0; z-index:1; border-radius:var(--radius); }
.card h2 a:focus-visible{ outline:none; }
.card h2 a:focus-visible::after{ outline:2px solid var(--c2); outline-offset:3px; }
.card p{ margin:0; color:var(--muted); font-size:1rem; }
.chips{ display:flex; flex-wrap:wrap; gap:.45rem; }
.chips span{
  font-size:.72rem; letter-spacing:.04em; color:var(--muted);
  border:1px solid var(--border); border-radius:100px; padding:.28rem .7rem; background:var(--surface);
}
.card .beta-btns{ position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.2rem; }
.go{
  margin-top:.3rem; display:inline-flex; align-items:center; gap:.5rem; font-weight:600;
  font-family:var(--font-display); font-size:.8rem; letter-spacing:.02em; color:var(--own-2);
}
.go .arrow{ transition:transform var(--t) var(--ease); }
.card:hover .go .arrow{ transform:translateX(6px); }

/* ---------- footer ---------- */
.foot{
  position:relative; z-index:2; border-top:1px solid var(--border);
  margin-top:clamp(2rem,6vh,4rem); padding:clamp(2.4rem,7vh,3.6rem) 0 clamp(2.4rem,6vh,3rem);
}
.foot-beta{ margin:0; color:var(--ink); font-size:.95rem; font-weight:500; }
.foot-beta .accent{ color:var(--c2); }
.foot-meta{ margin:.55rem 0 0; color:var(--dim); font-size:.85rem; }
.foot-meta a{ color:var(--muted); border-bottom:1px solid transparent; transition:border-color var(--t) var(--ease); }
.foot-meta a:hover{ border-color:currentColor; }
.foot-nav{ margin:1.1rem 0 0; display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; }
.foot-nav a{
  color:var(--ink); font-family:var(--font-display); font-weight:600; font-size:.82rem;
  border-bottom:1px solid var(--border); padding-bottom:2px;
  transition:border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.foot-nav a:hover{ border-color:var(--c2); color:var(--c2); }
.foot-legal{ margin:2rem 0 0; border-top:1px solid var(--border); padding-top:1.2rem; }
.foot-legal > summary{
  cursor:pointer; list-style:none; color:var(--muted); font-size:.74rem;
  letter-spacing:.16em; text-transform:uppercase; border-radius:8px; padding:.2rem 0;
  display:flex; align-items:center; gap:.5rem;
}
.foot-legal > summary::-webkit-details-marker{ display:none; }
.foot-legal > summary::before{
  content:"+"; color:var(--c2); font-size:.95rem; line-height:1; width:1ch;
}
.foot-legal[open] > summary::before{ content:"–"; }
.foot-legal-body{ margin-top:.9rem; max-width:940px; }
.foot-legal-body p{ margin:0 0 .6rem; color:var(--dim); font-size:.74rem; line-height:1.65; }

/* ---------- breakpoints ---------- */
@media (min-width:700px){
  .rail-stage{ padding-top:clamp(5.5rem,12vh,8rem); }
  .rail-step > .shell{ top:34vh; }
  .split{ grid-template-columns:1fr 1fr; }
  .cta-groups{ grid-template-columns:1fr 1fr; }
  .proof-grid{ grid-template-columns:1fr 1fr; }
  .kit-lead{ grid-template-columns:1fr 1fr; }
  .portals{ grid-template-columns:1fr 1fr; }
}
/* >=900px the art holds the right half and the copy steps through on the left, so a
   heading never crosses a stroke. Below that the two occupy separate vertical bands. */
@media (min-width:900px){
  .rail-stage{
    align-content:center; justify-items:end; padding-top:0;
    max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1.1rem,4vw,2.4rem);
  }
  .rail-state{ order:0; justify-self:end; margin:clamp(.8rem,2vh,1.4rem) 0 0; }
  .glasses{ width:min(560px,40vw); }
  .rail-step{ display:grid; align-content:center; }
  .rail-step > .shell{ position:static; padding-bottom:0; }
  .rail-step > .shell::before{
    inset:-4rem 0 -4rem -9vw;
    background:radial-gradient(56% 64% at 32% 50%,
      color-mix(in oklab, var(--bg) 82%, transparent) 0%,
      color-mix(in oklab, var(--bg) 54%, transparent) 48%, transparent 76%);
  }
  .rail-step .shell > *{ max-width:min(36rem,50%); }
  .rail-step .shell > .split,
  .rail-step .shell > .cta-groups{ max-width:min(36rem,50%); }
}
@media (min-width:1024px){
  .top{
    position:sticky; top:0;
    background:color-mix(in oklab, var(--bg) 78%, transparent);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--border);
  }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  @media (min-width:1024px){ .top{ background:var(--bg); } }
}
/* axis docks to a bottom bar wherever the pointer is coarse or the screen is small */
@media (max-width:699px){
  .top-in{ padding-block:.9rem; gap:.6rem; }
  .pill{ font-size:.6rem; letter-spacing:.1em; padding:.34rem .62rem; }
}
@media (max-width:699px), (pointer:coarse){
  body{ padding-bottom:84px; }
  .axis{
    position:fixed; left:50%; translate:-50% 0; bottom:calc(12px + env(safe-area-inset-bottom));
    width:min(340px,calc(100vw - 32px)); z-index:40;
    background:color-mix(in oklab, var(--bg) 86%, transparent);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    border:1px solid var(--border); border-radius:100px; padding:6px 16px;
    box-shadow:0 12px 40px -18px rgba(0,0,0,.8);
  }
  .axis-in{ flex:1; width:auto; min-width:0; }
  .pill{ margin-inline-start:auto; }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  @media (max-width:699px), (pointer:coarse){ .axis{ background:var(--bg2); } }
}

/* ---------- contrast & motion preferences ---------- */
@media (prefers-contrast: more){
  :root{ --glow-a:0; --border-a:.3; }
  .grain{ display:none; }
  .card{ box-shadow:none; }
  .proof-shot{ box-shadow:none; }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  canvas.field{ display:none; }
  .aurora,h1,.pill .dot{ animation:none!important; }
  :root{ animation:none; --draw:1; }
  .rail-step{ min-height:auto; padding-top:clamp(2rem,8vh,5rem); padding-bottom:clamp(2rem,8vh,5rem); }
  .rail-step > .shell{ position:static; }
  .rail-stage{ height:60svh; }
  .rail-step[data-step="0"]{ margin-top:-60svh; }
  .mw > i{ transition:opacity var(--t-fast) linear; filter:none!important; }
  html.axis-eased{ transition:--m var(--t) var(--ease); }
  *,*::before,*::after{
    transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important;
  }
  html.axis-eased{ transition-duration:var(--t)!important; }
}