/* ═══════════════════════════════════════════════════════════════════
   SKANDA — Obsidian Slate
   A single sheet of black glass with light passing through it.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* ── Ground ── */
  --void:        #06070a;
  --slate-0:     #080a0e;
  --slate-1:     #0c0f15;
  --slate-2:     #11151d;

  /* ── Ink ── */
  --ink:         #f3f6fa;
  --ink-2:       #b9c2d0;
  --muted:       #8791a3;
  --muted-dim:   #5a6373;

  /* ── Signal ── */
  --cyan:        #00e5ff;
  --cyan-soft:   rgba(0,229,255,.14);
  --cyan-glow:   rgba(0,229,255,.40);
  --mint:        #5eead4;
  --deep:        #123a7a;

  /* ── Glass ── */
  --glass-top:   rgba(255,255,255,.062);
  --glass-mid:   rgba(255,255,255,.022);
  --glass-low:   rgba(255,255,255,.008);
  --hair:        rgba(255,255,255,.085);
  --hair-soft:   rgba(255,255,255,.045);

  /* ── Type ── */
  --f-display: 'Sora', ui-sans-serif, system-ui, sans-serif;
  --f-body:    'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ── Motion ── */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --spring:    cubic-bezier(.34,1.56,.64,1);

  /* ── Rhythm ── */
  --shell:  1240px;
  --gutter: clamp(20px, 5vw, 56px);
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-5: 48px; --s-6: 64px; --s-7: 96px; --s-8: 128px;
  --radius: 22px;
}

/* ── Reset ─────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  background:var(--void);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:clamp(15.5px,.42vw + 14.4px,17px);
  line-height:1.62;
  letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
}
/* [hidden] must win over any explicit display we set on a component */
[hidden]{ display:none !important; }
img,svg{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:rgba(0,229,255,.28); color:#fff; }

:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
  border-radius:4px;
}

.skip{
  position:fixed; top:-100px; left:16px; z-index:999;
  background:var(--cyan); color:#001318; padding:12px 18px;
  border-radius:0 0 10px 10px; font-weight:600;
  transition:top .25s var(--ease);
}
.skip:focus{ top:0; }

.shell{
  width:100%; max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ═══ LOADING GATE ═════════════════════════════════════════════════
   Only ever shown when JS is running, and it removes itself on a
   hard timer — content is never held hostage by the animation.      */
.loader{ display:none; }
.js .loader{
  display:grid; place-content:center;
  position:fixed; inset:0; z-index:900;
  background:var(--void);
  transition:opacity .7s var(--ease), visibility .7s;
}
.js .loader.is-done{ opacity:0; visibility:hidden; pointer-events:none; }
.js.is-loading{ overflow:hidden; }
.loader__inner{ display:flex; align-items:center; gap:clamp(20px,4vw,40px); }
.loader__rule{
  display:block; height:1px; width:clamp(70px,17vw,220px);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.42));
  transform:scaleX(var(--p,0)); transform-origin:right center;
  transition:transform .18s linear;
}
.loader__rule:last-child{
  background:linear-gradient(90deg, rgba(255,255,255,.42), transparent);
  transform-origin:left center;
}
.loader__num{
  font-family:var(--f-display); font-weight:300;
  font-size:clamp(2.6rem,5.6vw,4.4rem);
  letter-spacing:-.04em; line-height:1;
  color:var(--ink); font-variant-numeric:tabular-nums;
  min-width:2.4ch; text-align:center;
}
.loader__mark{
  margin-top:28px; height:14px; width:auto; color:var(--muted-dim);
  justify-self:center;
  opacity:0; animation:riseIn .8s var(--ease-out) .25s forwards;
}
@media (prefers-reduced-motion: reduce){ .js .loader{ display:none; } }

/* Hold the hero choreography until the gate lifts */
.js.is-loading .hero *{ animation-play-state:paused !important; }

/* Scrollbar */
@supports selector(::-webkit-scrollbar){
  ::-webkit-scrollbar{ width:11px; }
  ::-webkit-scrollbar-track{ background:var(--void); }
  ::-webkit-scrollbar-thumb{
    background:linear-gradient(var(--slate-2),#1b2230);
    border-radius:99px; border:3px solid var(--void);
  }
  ::-webkit-scrollbar-thumb:hover{ background:linear-gradient(#1b2230,#26303f); }
}

/* ═══ ATMOSPHERE ═══════════════════════════════════════════════════
   Living background: plasma canvas + mesh grid + film grain         */
.atmosphere{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -10%, #0b1420 0%, transparent 58%),
    radial-gradient(90% 70% at 100% 100%, #080f18 0%, transparent 52%),
    var(--void);
}
#aurora{
  position:absolute; inset:-8%;
  width:116%; height:116%;
  opacity:.30;
  filter:blur(52px) saturate(108%);
  will-change:opacity;
}
.atmosphere__mesh{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:74px 74px;
  mask-image:radial-gradient(115% 90% at 50% 20%, #000 0%, transparent 72%);
  -webkit-mask-image:radial-gradient(115% 90% at 50% 20%, #000 0%, transparent 72%);
  opacity:.7;
}
.atmosphere__grain{
  position:absolute; inset:0; opacity:.14; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* ═══ GLASS SLATE ══════════════════════════════════════════════════ */
.slate{
  position:relative;
  border-radius:var(--radius);
  background:
    linear-gradient(158deg, var(--glass-top) 0%, var(--glass-mid) 44%, var(--glass-low) 100%);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.07) inset,
    0 -1px 0 rgba(0,0,0,.4) inset,
    0 36px 70px -34px rgba(0,0,0,.95),
    0 4px 16px -8px rgba(0,0,0,.6);
  isolation:isolate;
}
/* specular hairline */
.slate::before{
  content:''; position:absolute; inset:0; border-radius:inherit;
  padding:1px; pointer-events:none; z-index:3;
  background:linear-gradient(150deg,
    rgba(255,255,255,.55) 0%,
    rgba(255,255,255,.10) 22%,
    rgba(255,255,255,.02) 46%,
    rgba(0,229,255,.16) 82%,
    rgba(255,255,255,.20) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
  opacity:.85;
  transition:opacity .5s var(--ease);
}
/* cursor light travelling across the glass */
.slate::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  pointer-events:none; z-index:2; opacity:0;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),
    rgba(255,255,255,.10), rgba(0,229,255,.05) 38%, transparent 66%);
  transition:opacity .45s var(--ease);
}
.slate:hover::after{ opacity:1; }
.slate:hover::before{ opacity:1; }

[data-tilt]{
  transform:
    perspective(1400px)
    rotateX(var(--rx,0deg))
    rotateY(var(--ry,0deg))
    translate3d(0,0,0);
  transition:transform .7s var(--ease-out), box-shadow .5s var(--ease);
}
[data-tilt].is-tilting{ transition:transform .12s linear; }

/* ═══ TYPE PRIMITIVES ══════════════════════════════════════════════ */
.tag{
  font-family:var(--f-mono);
  font-size:11.5px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--cyan);
  margin-bottom:var(--s-3);
}
.display{
  font-family:var(--f-display);
  font-weight:600;
  font-size:clamp(2.15rem, 5.1vw, 4.05rem);
  line-height:1.03;
  letter-spacing:-.038em;
  margin-bottom:var(--s-3);
}
.display em{
  font-style:normal;
  background:linear-gradient(96deg, var(--cyan) 8%, var(--mint) 55%, #a9e8ff 95%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.section__lede{
  max-width:62ch;
  color:var(--ink-2);
  font-size:clamp(1.02rem,.42vw + .93rem,1.16rem);
  line-height:1.66;
}
.section{
  position:relative;
  padding-block:clamp(84px,11vw,168px);
}
/* hairline rule between sections */
main > .section::before{
  content:''; position:absolute; top:0; left:var(--gutter); right:var(--gutter); height:1px;
  background:linear-gradient(90deg, transparent, var(--hair-soft) 18%, rgba(0,229,255,.20) 50%, var(--hair-soft) 82%, transparent);
  max-width:calc(var(--shell) - var(--gutter) * 2);
  margin-inline:auto;
}
main > .section:first-of-type::before{ display:none; }

.section__head{ margin-bottom:clamp(48px,6vw,84px); }
.section__head--center{ text-align:center; }
.section__head--center .section__lede{ margin-inline:auto; }

/* ═══ BUTTONS ══════════════════════════════════════════════════════ */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:0 24px;
  border-radius:999px;
  font-family:var(--f-body);
  font-size:.95rem; font-weight:600; letter-spacing:-.01em;
  cursor:pointer; overflow:hidden; isolation:isolate;
  transition:transform .35s var(--spring), box-shadow .35s var(--ease), color .3s var(--ease);
  white-space:nowrap;
}
.btn svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; transition:transform .4s var(--ease-out); }
.btn:hover svg{ transform:translateX(4px); }
.btn--sm{ min-height:42px; padding:0 20px; font-size:.88rem; }
.btn--lg{ min-height:58px; padding:0 34px; font-size:1.02rem; }

.btn--primary{
  color:#00171d;
  background:linear-gradient(140deg,#8ff4ff 0%, var(--cyan) 42%, #00b6cf 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.22) inset, 0 14px 34px -14px var(--cyan-glow), 0 2px 10px -4px rgba(0,0,0,.7);
}
.btn--primary::before{
  content:''; position:absolute; inset:0; z-index:-1; opacity:0;
  background:linear-gradient(140deg,#c9fbff 0%, #34eeff 50%, #00d3f0 100%);
  transition:opacity .35s var(--ease);
}
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 0 0 1px rgba(255,255,255,.3) inset, 0 20px 46px -14px var(--cyan-glow); }
.btn--primary:hover::before{ opacity:1; }
.btn--primary:active{ transform:translateY(0) scale(.985); }

.btn--ghost{
  color:var(--ink);
  background:linear-gradient(158deg, rgba(255,255,255,.07), rgba(255,255,255,.015));
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 0 0 1px var(--hair) inset;
}
.btn--ghost:hover{ transform:translateY(-2px); box-shadow:0 0 0 1px rgba(0,229,255,.4) inset, 0 12px 30px -16px var(--cyan-glow); color:#fff; }
.btn--ghost:active{ transform:translateY(0) scale(.985); }

.nav .btn--sm{
  color:var(--ink);
  background:linear-gradient(158deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  box-shadow:0 0 0 1px var(--hair) inset;
}
.nav .btn--sm:hover{ box-shadow:0 0 0 1px rgba(0,229,255,.45) inset, 0 10px 26px -14px var(--cyan-glow); transform:translateY(-1px); }

/* ═══ NAV ══════════════════════════════════════════════════════════ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:16px var(--gutter) 0;
  transition:padding .45s var(--ease);
}
.nav__inner{
  display:flex; align-items:center; gap:var(--s-4);
  height:66px; padding-inline:22px 14px;
  max-width:var(--shell); margin-inline:auto;
  border-radius:999px;
  background:linear-gradient(158deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  box-shadow:
    0 0 0 1px var(--hair) inset,
    0 1px 0 rgba(255,255,255,.06) inset,
    0 20px 44px -28px rgba(0,0,0,.9);
  transition:height .45s var(--ease), background .45s var(--ease), box-shadow .45s var(--ease);
}
.nav__hair{ display:none; }
.nav.is-stuck{ padding-top:10px; }
.nav.is-stuck .nav__inner{
  height:58px;
  background:linear-gradient(158deg, rgba(12,15,21,.86), rgba(9,11,16,.78));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 1px 0 rgba(255,255,255,.07) inset,
    0 22px 50px -26px rgba(0,0,0,.95);
}

.logo{ display:inline-flex; align-items:center; margin-right:auto; transition:transform .2s var(--ease-out); }
.logo__svg{
  height:21px; width:auto; color:#fff;
  filter:drop-shadow(0 0 12px rgba(255,255,255,.06));
  transition:filter .35s var(--ease);
}
.logo__svg .tri{ fill:var(--cyan); transition:transform .35s var(--spring); transform-origin:center; }
.logo:hover .logo__svg{ filter:drop-shadow(0 0 20px rgba(0,229,255,.45)); }
.logo:hover .logo__svg .tri{ transform:scale(1.22); }
.logo:active{ transform:scale(.96); }

.nav__links{ display:flex; gap:34px; font-size:.93rem; font-weight:500; }
.nav__links a{ position:relative; color:var(--muted); padding:6px 0; transition:color .25s var(--ease); }
.nav__links a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--cyan); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease-out);
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after{ transform:scaleX(1); }
.nav__links a.is-active{ color:var(--ink); }
.nav__links a.is-active::after{ transform:scaleX(1); opacity:.6; }

.burger{ display:none; width:44px; height:44px; align-items:center; justify-content:center; flex-direction:column; gap:5px; }
.burger span{ display:block; width:20px; height:1.6px; background:var(--ink); border-radius:2px; transition:transform .35s var(--ease-out), opacity .25s; }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.3px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.3px) rotate(-45deg); }

.drawer{
  position:fixed; inset:78px 0 auto 0; z-index:99;
  display:flex; flex-direction:column; gap:2px;
  padding:14px var(--gutter) 26px;
  background:rgba(8,10,14,.92);
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  border-bottom:1px solid var(--hair);
  animation:drawerIn .38s var(--ease-out) both;
}
.drawer[hidden]{ display:none; }
.drawer a{ padding:15px 2px; font-size:1.1rem; font-weight:500; color:var(--ink-2); border-bottom:1px solid var(--hair-soft); }
.drawer a:last-child{ border-bottom:0; }
.drawer__cta{ margin-top:12px; color:var(--cyan) !important; font-weight:600; }
@keyframes drawerIn{ from{ opacity:0; transform:translateY(-12px); } to{ opacity:1; transform:none; } }

/* ═══ HERO ═════════════════════════════════════════════════════════ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding-block:150px 110px;
  overflow:hidden;
  isolation:isolate;
}
.hero__plate{ position:absolute; inset:0; z-index:-2; }
.hero__plate img{
  width:100%; height:100%; object-fit:cover; object-position:52% 38%;
  opacity:.60;
  filter:saturate(.78) contrast(1.08) brightness(.92) hue-rotate(-8deg);
  animation:kenburns 44s var(--ease) infinite alternate;
}
@keyframes kenburns{
  from{ transform:scale(1.06) translate3d(0,0,0); }
  to  { transform:scale(1.18) translate3d(-1.6%,-1.4%,0); }
}
.hero__scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(6,7,10,.88) 0%, rgba(6,7,10,.26) 30%, rgba(6,7,10,.55) 66%, var(--void) 97%),
    linear-gradient(96deg, rgba(6,7,10,.90) 2%, rgba(6,7,10,.60) 38%, rgba(6,7,10,.14) 82%);
}
.hero__beam{
  position:absolute; z-index:-1; inset:auto 0 -22% 0; height:62%;
  background:radial-gradient(58% 100% at 22% 100%, rgba(0,229,255,.13), transparent 70%);
  filter:blur(14px);
}

.hero__grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  grid-template-areas:"copy console" "meta meta";
  align-items:center;
  gap:clamp(34px,4.6vw,60px) clamp(30px,4vw,60px);
}
.hero__copy{ grid-area:copy; }
.hero__meta{ grid-area:meta; }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:11.5px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-2);
  padding:8px 16px 8px 12px;
  border-radius:999px;
  background:linear-gradient(158deg, rgba(255,255,255,.07), rgba(255,255,255,.015));
  box-shadow:0 0 0 1px var(--hair) inset;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  margin-bottom:var(--s-4);
}
.eyebrow__dot{
  width:7px; height:7px; border-radius:50%; background:var(--cyan);
  box-shadow:0 0 0 0 var(--cyan-glow);
  animation:pulse 2.6s var(--ease) infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(0,229,255,.55); }
  70%{ box-shadow:0 0 0 9px rgba(0,229,255,0); }
  100%{ box-shadow:0 0 0 0 rgba(0,229,255,0); }
}

.hero__title{
  font-family:var(--f-display);
  font-weight:600;
  font-size:clamp(2.45rem, 4.75vw, 4.45rem);
  line-height:1.06;
  letter-spacing:-.045em;
  margin-bottom:var(--s-4);
  max-width:14ch;
}
.lw{ display:block; overflow:hidden; padding-bottom:.34em; margin-bottom:-.36em; }
.ln{ display:block; }
.ln--accent{
  background:linear-gradient(94deg,#ffffff 0%, #b6f2ff 34%, var(--cyan) 72%, var(--mint) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.hero__lede{
  max-width:60ch;
  color:var(--ink-2);
  font-size:clamp(1.03rem,.5vw + .93rem,1.22rem);
  line-height:1.62;
  margin-bottom:var(--s-5);
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:clamp(46px,6vw,74px); }

.hero__meta{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  max-width:760px;
  background:var(--hair-soft);
  border-radius:16px; overflow:hidden;
  box-shadow:0 0 0 1px var(--hair-soft);
}
.hero__meta > div{
  background:rgba(10,13,18,.5);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  padding:16px 18px;
}
.hero__meta dt{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted-dim); margin-bottom:6px;
}
.hero__meta dd{
  font-family:var(--f-display); font-size:clamp(1.02rem,1.3vw,1.28rem);
  font-weight:600; letter-spacing:-.03em; color:var(--ink);
}

/* ── Live reply console ─────────────────────────────────────────── */
.console-wrap{
  grid-area:console; position:relative;
  width:100%; max-width:520px; margin-left:auto;
}
.console-ghost{
  position:absolute; inset:0;
  border-radius:clamp(18px,1.6vw,24px);
  background:linear-gradient(158deg, rgba(255,255,255,.030), rgba(255,255,255,.006));
  box-shadow:0 0 0 1px rgba(255,255,255,.05) inset;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.console-ghost--1{ transform:translate(18px,16px) scale(.975); opacity:.62; }
.console-ghost--2{ transform:translate(36px,32px) scale(.95);  opacity:.34; }
.console{
  position:relative;
  padding:0; overflow:hidden;
  width:100%;
  border-radius:clamp(18px,1.6vw,24px);
}
.console__bar{
  display:flex; align-items:center; gap:12px;
  padding:14px 18px;
  border-bottom:1px solid var(--hair-soft);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0));
}
.console__live{
  display:inline-flex; align-items:center; gap:7px; flex:none;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:#7ff2ff;
  padding:4px 10px 4px 8px; border-radius:999px;
  background:rgba(0,229,255,.10);
  box-shadow:0 0 0 1px rgba(0,229,255,.24) inset;
}
.console__live i{ width:6px; height:6px; border-radius:50%; background:var(--cyan); animation:pulse 2.4s var(--ease) infinite; }
.console__title{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--muted-dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.console__clock{
  margin-left:auto; flex:none;
  font-family:var(--f-mono); font-size:11px; color:var(--muted);
  font-variant-numeric:tabular-nums;
}

.console__thread{
  padding:22px 20px;
  min-height:250px;
  display:flex; flex-direction:column; gap:12px; justify-content:flex-end;
}
.msg{ display:flex; }
.msg--out{ justify-content:flex-end; }
.msg p{
  max-width:84%;
  padding:12px 15px;
  font-size:.935rem; line-height:1.5;
  border-radius:16px;
  animation:msgIn .5s var(--ease-out) both;
  overflow-wrap:anywhere;
}
@keyframes msgIn{ from{ opacity:0; transform:translateY(10px) scale(.97); } to{ opacity:1; transform:none; } }
.msg--in p{
  color:var(--ink-2);
  background:rgba(255,255,255,.055);
  box-shadow:0 0 0 1px var(--hair-soft) inset;
  border-bottom-left-radius:5px;
}
.msg--out p{
  color:#012a33;
  background:linear-gradient(140deg,#a6f6ff, var(--cyan) 78%);
  box-shadow:0 8px 26px -14px var(--cyan-glow);
  border-bottom-right-radius:5px;
  font-weight:500;
}
.msg--typing p{ display:flex; gap:5px; align-items:center; padding:15px; }
.msg--typing span{
  width:6px; height:6px; border-radius:50%; background:#0b3d47;
  animation:typing 1.25s var(--ease) infinite;
}
.msg--typing span:nth-child(2){ animation-delay:.16s; }
.msg--typing span:nth-child(3){ animation-delay:.32s; }
@keyframes typing{ 0%,60%,100%{ opacity:.28; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-3px); } }

.console__foot{
  display:flex; align-items:center; gap:12px;
  padding:13px 18px;
  border-top:1px solid var(--hair-soft);
  background:linear-gradient(0deg, rgba(255,255,255,.035), rgba(255,255,255,0));
}
.console__stat{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-dim); }
.console__stat b{ color:var(--cyan); font-weight:500; }
.console__dot{ width:4px; height:4px; border-radius:50%; background:var(--muted-dim); }
.console__sheen{
  position:absolute; inset:0; z-index:4; pointer-events:none;
  background:linear-gradient(112deg, transparent 30%, rgba(255,255,255,.07) 46%, transparent 60%);
  transform:translateX(-120%);
  animation:sheen 7.5s var(--ease) 1.6s infinite;
}
@keyframes sheen{ 0%{ transform:translateX(-120%); } 26%,100%{ transform:translateX(120%); } }

.scrollcue{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  display:grid; place-items:center; width:44px; height:44px; z-index:2;
}
.scrollcue__rail{
  width:22px; height:34px; border-radius:99px;
  box-shadow:0 0 0 1px var(--hair) inset;
  display:grid; justify-items:center; padding-top:7px;
}
.scrollcue__bead{
  width:3px; height:7px; border-radius:99px; background:var(--cyan);
  animation:bead 1.9s var(--ease) infinite;
}
@keyframes bead{ 0%,100%{ transform:translateY(0); opacity:1; } 55%{ transform:translateY(11px); opacity:.15; } }

/* ═══ TICKER ═══════════════════════════════════════════════════════ */
.ticker{
  position:relative;
  padding-block:20px;
  border-block:1px solid var(--hair-soft);
  background:linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,0));
  overflow:hidden;
  mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.ticker__track{
  display:flex; align-items:center; gap:26px; width:max-content;
  animation:slide 44s linear infinite;
}
.ticker span{
  font-family:var(--f-mono); font-size:11.5px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
  white-space:nowrap;
}
.ticker i{ width:5px; height:5px; border-radius:50%; background:var(--cyan); opacity:.55; flex:none; }
@keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ═══ THE SHIFT ════════════════════════════════════════════════════ */
#shift .section__lede{ margin-top:var(--s-3); }
.gaps{
  margin-top:clamp(48px,6vw,80px);
  display:grid; gap:var(--s-3);
  grid-template-columns:repeat(auto-fit,minmax(266px,1fr));
}
.gap{ padding:30px 28px 32px; }
.gap__no{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.2em;
  color:var(--cyan); display:block; margin-bottom:20px;
}
.gap h3{
  font-family:var(--f-display); font-size:1.16rem; font-weight:600;
  letter-spacing:-.02em; margin-bottom:10px;
}
.gap p{ color:var(--muted); font-size:.96rem; line-height:1.6; }

/* ═══ SERVICES ═════════════════════════════════════════════════════ */
.section--services{
  background:
    radial-gradient(70% 44% at 78% 6%, rgba(0,229,255,.055), transparent 62%),
    radial-gradient(60% 40% at 8% 92%, rgba(18,58,122,.20), transparent 66%);
}
.bento{
  display:grid; gap:var(--s-3);
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:minmax(0,auto);
}
.card{ display:flex; flex-direction:column; overflow:hidden; }
.card--wide{ grid-column:span 2; }

@media (min-width: 900px){
  .card--wide{ flex-direction:row; align-items:stretch; min-height:352px; }
  /* Media spans the whole card and dissolves — no seam to give it away */
  .card--wide .card__media{
    position:absolute; inset:0; width:100%; height:100%; min-height:320px;
  }
  .card--wide .card__media img{
    -webkit-mask-image:linear-gradient(96deg, #000 0%, #000 11%, rgba(0,0,0,.40) 27%, transparent 45%);
            mask-image:linear-gradient(96deg, #000 0%, #000 11%, rgba(0,0,0,.40) 27%, transparent 45%);
  }
  .card--wide .card__media::after{
    background:linear-gradient(96deg,
      rgba(6,7,10,.06) 0%,
      rgba(8,11,16,.46) 22%,
      rgba(9,12,18,.34) 40%,
      rgba(11,14,20,.10) 56%,
      transparent 70%);
  }
  .card--wide .card__body{
    margin-top:0; margin-left:38%; width:62%;
    padding:clamp(34px,3.6vw,50px) clamp(32px,3.4vw,46px);
    justify-content:center;
  }
  .card--wide h3{ font-size:clamp(1.5rem,2.1vw,1.95rem); }
  .card--wide .card__body > p:not(.card__kicker){ max-width:52ch; }
}

.card__media{ position:relative; height:200px; flex:none; overflow:hidden; }
.card__media img{
  width:100%; height:100%; object-fit:cover;
  opacity:.58; filter:saturate(.72) contrast(1.05) brightness(.9);
  transform:scale(1.04);
  transition:transform 1.1s var(--ease-out), opacity .6s var(--ease);
}
.card:hover .card__media img{ transform:scale(1.11); opacity:.7; }
.card__media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,7,10,.22) 0%, rgba(9,12,17,.72) 62%, #0b0e14 100%);
}

.card__body{ position:relative; z-index:1; padding:28px 30px 32px; display:flex; flex-direction:column; flex:1; margin-top:-46px; }
.card__idx{
  position:absolute; top:26px; right:28px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.2em;
  color:var(--muted-dim);
}
.card__ico{
  width:46px; height:46px; border-radius:14px;
  display:grid; place-items:center; margin-bottom:20px;
  background:linear-gradient(150deg, rgba(0,229,255,.20), rgba(0,229,255,.04));
  box-shadow:0 0 0 1px rgba(0,229,255,.24) inset, 0 8px 22px -12px var(--cyan-glow);
  transition:transform .5s var(--spring), box-shadow .5s var(--ease);
}
.card__ico svg{ width:22px; height:22px; fill:none; stroke:var(--cyan); stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.card:hover .card__ico{ transform:translateY(-3px) scale(1.06); box-shadow:0 0 0 1px rgba(0,229,255,.45) inset, 0 14px 30px -12px var(--cyan-glow); }

.card h3{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(1.34rem,1.5vw,1.62rem);
  letter-spacing:-.032em; margin-bottom:6px;
}
.card__kicker{
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--cyan);
  margin-bottom:14px;
}
.card__body > p:not(.card__kicker){ color:var(--muted); font-size:.97rem; line-height:1.66; }

.chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:auto; padding-top:22px; }
.chips li{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-2);
  padding:6px 11px; border-radius:999px;
  background:rgba(255,255,255,.045);
  box-shadow:0 0 0 1px var(--hair-soft) inset;
  overflow-wrap:anywhere;
}

/* ── Full capability list ───────────────────────────────────────── */
.caps{
  margin-top:clamp(34px,4.4vw,56px);
  padding:clamp(28px,3.4vw,44px) clamp(24px,3vw,44px);
  border-radius:var(--radius);
  background:linear-gradient(158deg, rgba(255,255,255,.035), rgba(255,255,255,.008));
  box-shadow:0 0 0 1px var(--hair-soft) inset;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}
.caps__title{
  font-family:var(--f-mono); font-size:11px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--cyan);
  margin-bottom:22px;
}
.caps__list{
  display:grid; gap:12px 30px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
.caps__list li{
  display:flex; align-items:flex-start; gap:12px;
  font-size:.98rem; color:var(--ink-2); line-height:1.5;
}
.caps__list svg{
  width:17px; height:17px; flex:none; margin-top:3px;
  fill:none; stroke:var(--cyan); stroke-width:2.3;
  stroke-linecap:round; stroke-linejoin:round;
}

/* ═══ SYSTEM DIAGRAM ═══════════════════════════════════════════════ */
.section--system{
  background:radial-gradient(62% 52% at 50% 44%, rgba(0,229,255,.06), transparent 68%);
}
.diagram{ padding:clamp(22px,3vw,40px) clamp(16px,2.6vw,40px) clamp(24px,3vw,36px); }
.diagram__svg{ width:100%; height:auto; display:block; overflow:visible; }

.d-glow{ animation:corePulse 5.5s var(--ease) infinite alternate; transform-origin:500px 200px; }
@keyframes corePulse{ from{ opacity:.55; transform:scale(.94); } to{ opacity:1; transform:scale(1.05); } }

.d-node rect{
  fill:rgba(255,255,255,.042);
  stroke:rgba(255,255,255,.10);
  stroke-width:1;
}
.d-node text{
  font-family:var(--f-body); font-size:15px; font-weight:500;
  fill:var(--ink-2); dominant-baseline:middle;
}
.d-node--out text{ fill:var(--muted); }

.d-core rect{
  fill:rgba(0,229,255,.07);
  stroke:rgba(0,229,255,.42);
  stroke-width:1.3;
}
.d-core__k{
  font-family:var(--f-display); font-size:19px; font-weight:600;
  letter-spacing:.02em; fill:#fff; text-anchor:middle;
}
.d-core__s{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; fill:var(--cyan); text-anchor:middle; opacity:.8;
}

.d-pulses .p{
  stroke-dasharray:7 93;
  stroke-dashoffset:100;
  animation:flow 3.4s linear infinite;
  animation-delay:var(--t,0s);
  filter:drop-shadow(0 0 5px rgba(0,229,255,.85));
}
@keyframes flow{ to{ stroke-dashoffset:0; } }

.diagram__legend{
  display:grid; gap:10px 28px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  margin-top:clamp(18px,2.4vw,28px);
  padding-top:clamp(18px,2.4vw,26px);
  border-top:1px solid var(--hair-soft);
}
.diagram__legend li{ font-size:.9rem; color:var(--muted); }
.diagram__legend b{
  font-family:var(--f-mono); font-size:10.5px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--cyan);
  margin-right:8px;
}

/* Small screens: the diagram becomes a readable stack */
.diagram__stack{ display:none; }
@media (max-width: 760px){
  .diagram__svg{ display:none; }
  .diagram__stack{ display:block; }
  .dstack__row + .dstack__row{ margin-top:20px; }
  .dstack__label{
    font-family:var(--f-mono); font-size:10.5px; letter-spacing:.18em;
    text-transform:uppercase; color:var(--cyan); margin-bottom:10px; display:block;
  }
  .dstack__items{ display:flex; flex-wrap:wrap; gap:8px; }
  .dstack__items li{
    font-size:.86rem; color:var(--ink-2);
    padding:9px 13px; border-radius:12px;
    background:rgba(255,255,255,.045);
    box-shadow:0 0 0 1px var(--hair-soft) inset;
  }
  .dstack__core{
    text-align:center; padding:18px; border-radius:16px;
    background:rgba(0,229,255,.07);
    box-shadow:0 0 0 1px rgba(0,229,255,.32) inset;
  }
  .dstack__core b{ font-family:var(--f-display); font-size:1.06rem; display:block; }
  .dstack__core span{ font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan); }
  .dstack__arrow{ display:block; text-align:center; color:var(--cyan); opacity:.5; margin:12px 0; font-size:.9rem; }
}

/* ═══ IMPACT ═══════════════════════════════════════════════════════ */
.section--impact{ background:radial-gradient(58% 46% at 50% 0%, rgba(0,229,255,.05), transparent 68%); }
.stats{
  display:grid; gap:var(--s-3);
  grid-template-columns:repeat(6,minmax(0,1fr));
}
.stat{ grid-column:span 2; padding:32px 28px 30px; text-align:center; }
.stat--hero{ grid-column:span 2; }
.stats > .stat:nth-child(4){ grid-column:span 3; }
.stats > .stat:nth-child(5){ grid-column:span 3; }

.stat__val{
  display:flex; align-items:baseline; justify-content:center; gap:2px;
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(2.4rem,4.2vw,3.5rem);
  letter-spacing:-.05em; line-height:1;
  margin-bottom:14px;
  background:linear-gradient(170deg,#ffffff 8%, #cfeaf5 46%, var(--cyan) 118%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  font-variant-numeric:tabular-nums;
}
.stat__val i{ font-style:normal; font-size:.42em; letter-spacing:-.01em; color:var(--muted); -webkit-text-fill-color:var(--muted); }
.stat__val b{ font-weight:600; }
.stat--hero .stat__val{
  background:linear-gradient(170deg,#e8fdff 0%, var(--cyan) 52%, var(--mint) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 6px 26px rgba(0,229,255,.28));
}
.stat--hero::before{ opacity:1; }
.stat__lbl{
  display:block;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.19em;
  text-transform:uppercase; color:var(--ink); margin-bottom:8px;
}
.stat p{ color:var(--muted); font-size:.9rem; line-height:1.55; }

/* ═══ APPROACH ═════════════════════════════════════════════════════ */
.steps{ display:grid; gap:2px; background:var(--hair-soft); border-radius:20px; overflow:hidden; box-shadow:0 0 0 1px var(--hair-soft); }
.step{
  display:flex; gap:clamp(20px,3.5vw,52px);
  padding:clamp(28px,4vw,44px) clamp(24px,3.4vw,44px);
  background:linear-gradient(158deg, rgba(255,255,255,.032), rgba(255,255,255,.006));
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  transition:background .45s var(--ease);
}
.step:hover{ background:linear-gradient(158deg, rgba(0,229,255,.06), rgba(255,255,255,.012)); }
.step__no{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(1.6rem,3.4vw,2.6rem); letter-spacing:-.05em;
  color:transparent;
  -webkit-text-stroke:1px rgba(0,229,255,.55);
  flex:none; line-height:1; min-width:2.2ch;
}
.step h3{ font-family:var(--f-display); font-weight:600; font-size:clamp(1.16rem,1.7vw,1.42rem); letter-spacing:-.028em; margin-bottom:9px; }
.step p{ color:var(--muted); max-width:62ch; font-size:.98rem; }

/* ═══ VOICE ════════════════════════════════════════════════════════ */
.section--voice{
  position:relative;
  background:
    radial-gradient(52% 60% at 16% 46%, rgba(0,229,255,.075), transparent 66%),
    linear-gradient(180deg, transparent, rgba(255,255,255,.014), transparent);
}
.voice{
  display:grid; align-items:center;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(36px,6vw,84px);
}
.voice__portrait{ position:relative; }
.voice__portrait img{
  position:relative; z-index:1;
  width:100%; max-width:420px;
  filter:drop-shadow(0 42px 60px rgba(0,0,0,.85)) contrast(1.04) saturate(.94);
  mask-image:linear-gradient(180deg,#000 76%, rgba(0,0,0,.55) 92%, transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 76%, rgba(0,0,0,.55) 92%, transparent 100%);
}
.voice__halo{
  position:absolute; z-index:0;
  left:50%; top:46%; transform:translate(-50%,-50%);
  width:min(430px,102%); aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle, rgba(0,229,255,.20) 0%, rgba(0,229,255,.055) 42%, transparent 68%);
  filter:blur(8px);
  animation:halo 9s var(--ease) infinite alternate;
}
@keyframes halo{ from{ transform:translate(-50%,-50%) scale(.94); opacity:.75; } to{ transform:translate(-50%,-50%) scale(1.07); opacity:1; } }
.voice__ring{
  position:absolute; z-index:0;
  left:50%; top:46%; transform:translate(-50%,-50%);
  width:min(400px,96%); aspect-ratio:1; border-radius:50%;
  border:1px solid rgba(0,229,255,.22);
  box-shadow:0 0 0 1px rgba(255,255,255,.03), inset 0 0 60px rgba(0,229,255,.06);
  animation:ring 14s linear infinite;
}
.voice__ring::before,
.voice__ring::after{
  content:''; position:absolute; border-radius:50%;
  border:1px solid rgba(255,255,255,.05);
}
.voice__ring::before{ inset:-9%; }
.voice__ring::after{
  inset:14%; border-color:rgba(0,229,255,.12);
  border-style:dashed;
}
@keyframes ring{ to{ transform:translate(-50%,-50%) rotate(360deg); } }

.voice blockquote p{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.34rem,2.6vw,2.06rem);
  line-height:1.32; letter-spacing:-.032em;
  color:var(--ink);
  text-wrap:balance;
}
.voice blockquote em{
  font-style:italic;
  background:linear-gradient(96deg,var(--cyan),var(--mint));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.voice__by{
  margin-top:var(--s-3);
  font-family:var(--f-mono); font-size:12px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--cyan);
}
.voice__note{ margin-top:var(--s-3); color:var(--muted); max-width:52ch; font-size:.98rem; }

/* ═══ SELECTED WORK ════════════════════════════════════════════════ */
.section--work{
  background:radial-gradient(64% 44% at 16% 20%, rgba(0,229,255,.045), transparent 64%);
}
.works{
  display:grid; gap:var(--s-3);
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
}
.work{
  display:flex; flex-direction:column;
  padding:clamp(28px,3.2vw,40px) clamp(24px,2.8vw,36px) clamp(22px,2.4vw,30px);
  overflow:hidden;
  transition:transform .7s var(--ease-out), box-shadow .5s var(--ease);
}
.work__idx{
  position:absolute; top:26px; right:28px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.2em;
  color:var(--muted-dim);
}
.work__body{ flex:1; }
.work__sector{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.19em;
  text-transform:uppercase; color:var(--cyan); margin-bottom:12px;
}
.work__name{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(1.42rem,2vw,1.82rem);
  letter-spacing:-.034em; margin-bottom:12px;
}
.work__note{ color:var(--muted); font-size:.97rem; line-height:1.62; margin-bottom:20px; }
.work .chips{ padding-top:0; margin-bottom:24px; }
.work__go{
  display:inline-flex; align-items:center; gap:9px;
  padding-top:20px; margin-top:auto;
  border-top:1px solid var(--hair-soft);
  font-family:var(--f-mono); font-size:11px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-2);
  transition:color .3s var(--ease);
  overflow-wrap:anywhere;
}
.work__go svg{
  width:15px; height:15px; flex:none;
  fill:none; stroke:var(--cyan); stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .45s var(--ease-out);
}
.work:hover .work__go{ color:#fff; }
.work:hover .work__go svg{ transform:translate(3px,-3px); }

/* ═══ CTA + CONTACT ════════════════════════════════════════════════ */
.cta{ padding-block:clamp(20px,4vw,50px) clamp(84px,10vw,150px); }
.cta__panel{
  position:relative; overflow:hidden;
  padding:clamp(34px,4.6vw,72px) clamp(26px,4vw,64px);
  border-radius:clamp(24px,3vw,34px);
}
.cta__glow{
  position:absolute; inset:-40% -10% auto -10%; height:150%;
  background:
    radial-gradient(46% 52% at 26% 0%, rgba(0,229,255,.20), transparent 62%),
    radial-gradient(40% 44% at 88% 96%, rgba(94,234,212,.10), transparent 64%);
  filter:blur(6px); pointer-events:none;
}
.cta__aurora{
  position:absolute; inset:0; pointer-events:none; opacity:.45;
  background:
    conic-gradient(from 210deg at 22% 18%, rgba(0,229,255,.16), transparent 32%, transparent 68%, rgba(18,58,122,.22));
  mask-image:radial-gradient(90% 80% at 30% 20%, #000, transparent 74%);
  -webkit-mask-image:radial-gradient(90% 80% at 30% 20%, #000, transparent 74%);
  animation:ctaDrift 24s var(--ease) infinite alternate;
}
@keyframes ctaDrift{ from{ transform:scale(1) rotate(0deg); } to{ transform:scale(1.14) rotate(9deg); } }

.cta__grid{
  position:relative; z-index:1;
  display:grid; gap:clamp(34px,4.4vw,60px);
  grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  align-items:center;
}
.cta__title{ margin-bottom:var(--s-3); font-size:clamp(1.95rem,3.3vw,2.95rem); text-wrap:balance; }
.cta__lede{ color:var(--ink-2); font-size:clamp(1rem,.4vw + .92rem,1.1rem); max-width:46ch; }

.cta__next{ margin-top:clamp(26px,3vw,38px); display:grid; gap:12px; }
.cta__next li{
  display:flex; gap:14px; align-items:flex-start;
  font-size:.94rem; color:var(--muted);
}
.cta__next span{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.16em;
  color:var(--cyan); padding-top:3px; flex:none;
}
.cta__foot{
  margin-top:clamp(26px,3vw,36px); padding-top:22px;
  border-top:1px solid var(--hair-soft);
  font-size:.9rem; color:var(--muted-dim); line-height:1.7;
  overflow-wrap:anywhere;
}
.cta__foot a{ color:var(--ink-2); border-bottom:1px solid rgba(0,229,255,.4); transition:color .25s var(--ease); }
.cta__foot a:hover{ color:var(--cyan); }

/* ── Form card ──────────────────────────────────────────────────── */
.form-card{
  position:relative;
  padding:clamp(26px,3vw,38px);
  border-radius:clamp(18px,2vw,26px);
  background:linear-gradient(158deg, rgba(255,255,255,.075) 0%, rgba(255,255,255,.028) 46%, rgba(255,255,255,.012) 100%);
}
.form{ display:grid; gap:18px; }
.form__title{
  font-family:var(--f-display); font-weight:600;
  font-size:1.2rem; letter-spacing:-.028em; margin-bottom:2px;
}
.field{ display:grid; gap:8px; border:0; }
.field-row{ display:grid; gap:18px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.field__label{
  font-family:var(--f-mono); font-size:10.5px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2);
  display:flex; align-items:baseline; gap:8px;
}
.field__label .req{ color:var(--cyan); }
.field__label .opt{ color:var(--muted-dim); letter-spacing:.1em; text-transform:none; font-size:10px; }

.input{
  width:100%; min-height:50px;
  padding:13px 16px;
  font-family:var(--f-body); font-size:.97rem; color:var(--ink);
  background:rgba(255,255,255,.045);
  border:0; border-radius:13px;
  box-shadow:0 0 0 1px var(--hair) inset;
  transition:box-shadow .3s var(--ease), background .3s var(--ease);
  -webkit-appearance:none; appearance:none;
}
.input::placeholder{ color:var(--muted-dim); }
.input:hover{ background:rgba(255,255,255,.06); }
.input:focus{
  outline:none;
  background:rgba(255,255,255,.075);
  box-shadow:
    0 0 0 1px rgba(0,229,255,.55) inset,
    0 0 0 4px rgba(0,229,255,.12),
    0 10px 30px -18px var(--cyan-glow);
}
.input--area{ resize:vertical; min-height:112px; line-height:1.6; }
.input[aria-invalid="true"]{ box-shadow:0 0 0 1px rgba(255,110,110,.6) inset; }
.err{
  font-size:.83rem; color:#ff9b9b;
  display:flex; align-items:center; gap:6px;
}
.err[hidden]{ display:none; }

/* pickers */
.field--chips{ gap:12px; }
.pickers{ display:flex; flex-wrap:wrap; gap:8px; }
.picker{ position:relative; cursor:pointer; }
.picker input{
  position:absolute; inset:0; opacity:0; width:100%; height:100%; margin:0;
  cursor:pointer;
}
.picker span{
  display:block;
  padding:11px 15px; border-radius:999px;
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
  background:rgba(255,255,255,.04);
  box-shadow:0 0 0 1px var(--hair-soft) inset;
  transition:color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
  user-select:none;
}
.picker:hover span{ color:var(--ink-2); box-shadow:0 0 0 1px var(--hair) inset; }
.picker input:checked + span{
  color:#00232b;
  background:linear-gradient(140deg,#9df6ff, var(--cyan) 82%);
  box-shadow:0 0 0 1px rgba(255,255,255,.28) inset, 0 8px 22px -14px var(--cyan-glow);
}
.picker input:focus-visible + span{ outline:2px solid var(--cyan); outline-offset:3px; }

/* send button states */
.form__send{ width:100%; margin-top:4px; position:relative; }
.form__send-idle{ display:inline-flex; align-items:center; gap:10px; }
.form__send-busy{ display:none; align-items:center; gap:6px; }
.form__send-busy i{
  width:6px; height:6px; border-radius:50%; background:#00232b;
  animation:typing 1.2s var(--ease) infinite;
}
.form__send-busy i:nth-child(2){ animation-delay:.16s; }
.form__send-busy i:nth-child(3){ animation-delay:.32s; }
.form__send.is-busy{ pointer-events:none; }
.form__send.is-busy .form__send-idle{ display:none; }
.form__send.is-busy .form__send-busy{ display:inline-flex; }

.form__micro{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted-dim); text-align:center;
}
.form__status{ font-size:.88rem; color:#ff9b9b; text-align:center; }
.form__status:empty{ display:none; }

/* success state */
.form-done{ text-align:center; padding:clamp(14px,2vw,26px) 0; animation:riseIn .6s var(--ease-out) both; }
.form-done[hidden]{ display:none; }
.form-done__mark{
  width:64px; height:64px; margin:0 auto 22px;
  border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(150deg, rgba(0,229,255,.22), rgba(0,229,255,.05));
  box-shadow:0 0 0 1px rgba(0,229,255,.4) inset, 0 14px 34px -16px var(--cyan-glow);
}
.form-done__mark svg{
  width:28px; height:28px; fill:none; stroke:var(--cyan);
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:32; stroke-dashoffset:32;
  animation:draw .6s var(--ease-out) .18s forwards;
}
@keyframes draw{ to{ stroke-dashoffset:0; } }
.form-done h3{
  font-family:var(--f-display); font-weight:600;
  font-size:1.34rem; letter-spacing:-.03em; margin-bottom:10px;
}
.form-done p{ color:var(--muted); font-size:.95rem; max-width:38ch; margin:0 auto 24px; }

/* ═══ FOOTER ═══════════════════════════════════════════════════════ */
.footer{ border-top:1px solid var(--hair-soft); padding-block:var(--s-5); background:rgba(6,7,10,.6); }
.footer__inner{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-3) var(--s-4); }
.footer__logo{ height:15px; width:auto; color:var(--muted-dim); flex:none; }
.footer__line{ font-size:.85rem; color:var(--muted-dim); flex:1 1 320px; }
.footer__legal{ display:flex; flex-wrap:wrap; gap:4px 18px; }
.footer__legal a{
  font-size:.82rem; color:var(--muted-dim);
  transition:color .25s var(--ease);
}
.footer__legal a:hover{ color:var(--ink-2); }
.footer__meta{ font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; color:var(--muted-dim); margin-left:auto; }

/* ═══ REVEAL CHOREOGRAPHY ══════════════════════════════════════════
   Gated on .js so the page is fully legible with scripting disabled. */
.js .reveal{
  opacity:0; transform:translate3d(0,26px,0);
  transition:opacity .85s var(--ease-out), transform .85s var(--ease-out);
  transition-delay:calc(var(--d,0) * 85ms);
}
.js .reveal.in{ opacity:1; transform:none; }

/* Hero entrance is pure CSS — the headline never waits on a script. */
@keyframes lineUp{ from{ transform:translate3d(0,170%,0); } to{ transform:none; } }
@keyframes riseIn{ from{ opacity:0; transform:translate3d(0,26px,0); } to{ opacity:1; transform:none; } }
@keyframes consoleIn{
  from{ opacity:0; transform:perspective(1400px) translate3d(0,42px,0) rotateY(-7deg) scale(.96); }
  to  { opacity:1; transform:perspective(1400px) translate3d(0,0,0) rotateY(0) scale(1); }
}
.js .hero .eyebrow{ animation:riseIn .9s var(--ease-out) .05s both; }
.js .hero__title .lw:nth-child(1) .ln{ animation:lineUp 1.05s var(--ease-out) .16s both; }
.js .hero__title .lw:nth-child(2) .ln{ animation:lineUp 1.05s var(--ease-out) .26s both; }
.js .hero__title .lw:nth-child(3) .ln{ animation:lineUp 1.05s var(--ease-out) .36s both; }
.js .hero__lede   { animation:riseIn .9s var(--ease-out) .52s both; }
.js .hero__actions{ animation:riseIn .9s var(--ease-out) .62s both; }
.js .hero__meta   { animation:riseIn .9s var(--ease-out) .78s both; }
.js .console-wrap { animation:consoleIn 1.15s var(--ease-out) .40s both; }

/* ═══ RESPONSIVE ═══════════════════════════════════════════════════ */
@media (max-width: 940px){
  .cta__grid{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width: 1020px){
  .hero__grid{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"copy" "console" "meta";
  }
  .console-wrap{ margin-inline:0; max-width:560px; }
  .console-ghost{ display:none; }
  .hero{ padding-block:140px 100px; }
  .hero__title{ max-width:18ch; }
}
@media (max-width: 1080px){
  .voice{ grid-template-columns:1fr; text-align:left; }
  .voice__portrait{ max-width:330px; }
  .stats{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .stat, .stat--hero{ grid-column:span 2; }
  .stats > .stat:nth-child(4){ grid-column:span 2; }
  .stats > .stat:nth-child(5){ grid-column:span 4; }
}
@media (max-width: 860px){
  .nav__links{ display:none; }
  .nav .btn--sm{ display:none; }
  .burger{ display:flex; margin-left:auto; }
  .bento{ grid-template-columns:1fr; }
  .card__media{ height:170px; }
  .hero__meta{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hero{ padding-block:132px 96px; }
}
@media (max-width: 560px){
  :root{ --radius:18px; }
  .stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stat, .stat--hero, .stats > .stat:nth-child(4){ grid-column:span 1; }
  .stats > .stat:nth-child(5){ grid-column:span 2; }
  .step{ flex-direction:column; gap:12px; }
  .field-row{ grid-template-columns:minmax(0,1fr); }
  .card__body{ padding:24px 22px 26px; }
  .gap{ padding:26px 22px 28px; }
  .btn{ width:100%; }
  .hero__actions .btn, .cta__actions .btn{ width:100%; }
  .footer__meta{ margin-left:0; }
}

/* ═══ REDUCED MOTION ═══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1 !important; transform:none !important; }
  .ln{ transform:none !important; }
  .hero__plate img{ animation:none; transform:scale(1.06); }
  .ticker__track{ animation:none; }
  #aurora{ display:none; }
  [data-tilt]{ transform:none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   MOTION LAYER — cursor, scroll progress, spotlight, parallax
   Every rule here is opt-in: fine pointers only, motion-safe only.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tracking cursor ────────────────────────────────────────────── */
.cursor{ display:none; }

@media (hover:hover) and (pointer:fine){
  @media (prefers-reduced-motion: no-preference){
    .js .cursor{ display:block; }
    .js body{ cursor:none; }
    .js a, .js button, .js label, .js summary, .js [data-tilt]{ cursor:none; }
    /* the caret must stay visible where people type */
    .js .input, .js .input--area{ cursor:text; }
  }
}

.cursor__dot,
.cursor__ring{
  position:fixed; top:0; left:0;
  z-index:9999; pointer-events:none;
  border-radius:50%;
  will-change:transform;
}
.cursor__dot{
  width:7px; height:7px;
  margin:-3.5px 0 0 -3.5px;
  background:var(--cyan);
  box-shadow:0 0 12px rgba(0,229,255,.9), 0 0 30px rgba(0,229,255,.45);
  transition:width .3s var(--spring), height .3s var(--spring),
             margin .3s var(--spring), opacity .3s var(--ease);
}
.cursor__ring{
  width:34px; height:34px;
  margin:-17px 0 0 -17px;
  border:1px solid rgba(255,255,255,.34);
  background:rgba(255,255,255,.02);
  backdrop-filter:blur(1px);
  -webkit-backdrop-filter:blur(1px);
  transition:width .38s var(--spring), height .38s var(--spring),
             margin .38s var(--spring), border-color .3s var(--ease),
             background .3s var(--ease), opacity .3s var(--ease);
}

/* over anything clickable the ring opens up and the dot recedes */
.cursor.is-link .cursor__ring{
  width:62px; height:62px; margin:-31px 0 0 -31px;
  border-color:rgba(0,229,255,.62);
  background:rgba(0,229,255,.07);
}
.cursor.is-link .cursor__dot{
  width:5px; height:5px; margin:-2.5px 0 0 -2.5px;
}
/* pressed */
.cursor.is-down .cursor__ring{
  width:26px; height:26px; margin:-13px 0 0 -13px;
  border-color:rgba(0,229,255,.9);
  background:rgba(0,229,255,.14);
}
/* over text fields, hand the cursor back to the browser */
.cursor.is-text .cursor__ring,
.cursor.is-text .cursor__dot,
.cursor.is-off  .cursor__ring,
.cursor.is-off  .cursor__dot{ opacity:0; }

/* ── Scroll progress ────────────────────────────────────────────── */
.progress{
  position:fixed; top:0; left:0; right:0; height:2px;
  z-index:200; pointer-events:none;
  background:rgba(255,255,255,.05);
  opacity:0; transition:opacity .4s var(--ease);
}
.progress.is-on{ opacity:1; }
.progress__bar{
  display:block; height:100%; width:100%;
  transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg, rgba(0,229,255,.35), var(--cyan) 60%, var(--mint));
  box-shadow:0 0 14px rgba(0,229,255,.6);
}
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){
    .progress__bar{
      animation:progressGrow linear both;
      animation-timeline:scroll(root block);
    }
  }
}
@keyframes progressGrow{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

/* ── Pointer spotlight ──────────────────────────────────────────── */
.atmosphere__spot{
  position:absolute; inset:0; pointer-events:none;
  opacity:0; transition:opacity .8s var(--ease);
  background:radial-gradient(560px circle at var(--sx,50%) var(--sy,40%),
    rgba(0,229,255,.10),
    rgba(0,160,220,.05) 34%,
    transparent 68%);
}
.js .atmosphere__spot{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .atmosphere__spot{ display:none; } }

/* film grain drifts, so the page never feels frozen */
@media (prefers-reduced-motion: no-preference){
  .atmosphere__grain{ animation:grainShift 7s steps(6) infinite; }
}
@keyframes grainShift{
  0%{ transform:translate(0,0); }      20%{ transform:translate(-3%,2%); }
  40%{ transform:translate(2%,-3%); }  60%{ transform:translate(-2%,-2%); }
  80%{ transform:translate(3%,1%); }   100%{ transform:translate(0,0); }
}

/* ── Hero parallax (JS-driven, works everywhere) ────────────────── */
.hero__plate{ will-change:transform; }
.hero__grid{ will-change:transform; }

/* ══ SCROLL-DRIVEN MOTION ═══════════════════════════════════════════
   Native scroll timelines run off the main thread. Where they are not
   supported nothing is lost — the IntersectionObserver reveals below
   already put every element in its final, readable state.            */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){

    /* imagery drifts inside its frame as the card travels */
    .card__media img{
      animation:mediaDrift linear both;
      animation-timeline:view();
      animation-range:cover 0% cover 100%;
    }

    /* the portrait rises a little slower than the text beside it */
    .voice__portrait img{
      animation:portraitDrift linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 88%;
    }

    /* the diagram settles into place */
    .diagram__svg{
      animation:diagramIn linear both;
      animation-timeline:view();
      animation-range:entry 12% cover 46%;
    }

    /* metrics swell as they arrive */
    .stat__val{
      animation:statPop linear both;
      animation-timeline:view();
      animation-range:entry 8% cover 42%;
    }

    /* step numerals slide in from the margin */
    .step__no{
      animation:stepSlide linear both;
      animation-timeline:view();
      animation-range:entry 6% cover 40%;
    }

    /* section hairlines draw out from the centre */
    main > .section::before{
      animation:ruleDraw linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 62%;
    }

    /* the eyebrow chip and section tags catch the light */
    .tag{
      animation:tagIn linear both;
      animation-timeline:view();
      animation-range:entry 10% entry 70%;
    }
  }
}

@keyframes mediaDrift{
  from{ transform:scale(1.16) translate3d(0,-4.5%,0); }
  to  { transform:scale(1.16) translate3d(0, 4.5%,0); }
}
@keyframes portraitDrift{
  from{ transform:translate3d(0,7%,0) scale(1.02); }
  to  { transform:translate3d(0,-5%,0) scale(1.02); }
}
@keyframes diagramIn{
  from{ opacity:.25; transform:scale(.94) translate3d(0,26px,0); }
  to  { opacity:1;   transform:none; }
}
@keyframes statPop{
  from{ opacity:.35; transform:scale(.86) translate3d(0,14px,0); }
  to  { opacity:1;   transform:none; }
}
@keyframes stepSlide{
  from{ opacity:0; transform:translate3d(-26px,0,0); }
  to  { opacity:1; transform:none; }
}
@keyframes ruleDraw{
  from{ transform:scaleX(0); opacity:0; }
  to  { transform:scaleX(1); opacity:1; }
}
@keyframes tagIn{
  from{ opacity:0; transform:translate3d(0,12px,0); }
  to  { opacity:1; transform:none; }
}

/* the hairline needs a defined origin for the draw */
main > .section::before{ transform-origin:50% 50%; }

/* ── Ticker reacts to scroll ────────────────────────────────────── */
.ticker__track{
  animation-duration:var(--tickerDur, 44s);
  animation-direction:var(--tickerDir, normal);
}

/* lift on hover */
@media (hover:hover) and (pointer:fine){
  @media (prefers-reduced-motion: no-preference){
    .card, .work, .gap, .stat{ transition:transform .7s var(--ease-out), box-shadow .5s var(--ease); }
    .card:hover, .work:hover, .gap:hover, .stat:hover{
      box-shadow:
        0 1px 0 rgba(255,255,255,.10) inset,
        0 -1px 0 rgba(0,0,0,.4) inset,
        0 48px 90px -40px rgba(0,0,0,.98),
        0 0 60px -30px var(--cyan-glow);
    }
  }
}

@media (prefers-reduced-motion: reduce){
  .progress{ display:none; }
  .cursor{ display:none !important; }
  body{ cursor:auto !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   LEGAL PAGES — terms, privacy, refund
   Same slate/glass system, quieter: a document, not a landing page.
   ═══════════════════════════════════════════════════════════════════ */

.backhome{
  display:inline-flex; align-items:center; gap:8px;
  margin-left:auto;
  padding:0 18px; min-height:42px;
  border-radius:999px;
  font-size:.88rem; font-weight:600;
  color:var(--ink);
  background:linear-gradient(158deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  box-shadow:0 0 0 1px var(--hair) inset;
  transition:box-shadow .3s var(--ease), transform .35s var(--spring);
}
.backhome svg{
  width:16px; height:16px; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .35s var(--ease-out);
}
.backhome:hover{ box-shadow:0 0 0 1px rgba(0,229,255,.42) inset; transform:translateY(-1px); }
.backhome:hover svg{ transform:translateX(-3px); }

/* Narrow screens: logo + full "Back to home" pill don't both fit inside
   the floating nav — collapse the label to an icon-only round button
   rather than let the row overflow and get clipped. */
@media (max-width: 560px){
  .nav__inner{ gap:12px; padding-inline:16px 10px; }
  .backhome{
    padding:0; width:40px; min-height:40px;
    justify-content:center; gap:0; flex:none;
  }
  .backhome__label{
    position:absolute; width:1px; height:1px;
    padding:0; margin:-1px; overflow:hidden;
    clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  .backhome svg{ width:18px; height:18px; }
  .backhome:hover svg{ transform:translateX(-2px); }
}

.legal-hero{
  position:relative;
  padding:clamp(140px,18vw,190px) 0 clamp(48px,6vw,72px);
  overflow:hidden;
}
.legal-hero__glow{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(50% 60% at 18% 0%, rgba(0,229,255,.09), transparent 66%);
}
.legal-hero .tag{ margin-bottom:14px; }
.legal-hero h1{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(2.1rem,4.4vw,3.4rem);
  letter-spacing:-.04em; line-height:1.06;
  margin-bottom:16px;
}
.legal-meta{
  display:flex; flex-wrap:wrap; gap:10px 22px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted-dim);
}
.legal-meta b{ color:var(--ink-2); font-weight:500; }

.legal{
  padding-bottom:clamp(70px,9vw,120px);
}
.legal__layout{
  display:grid; gap:clamp(30px,4vw,56px);
  grid-template-columns:minmax(0,232px) minmax(0,1fr);
  align-items:start;
}

/* on-page contents rail */
.legal-toc{
  position:sticky; top:100px;
  padding:22px clamp(18px,2vw,24px);
  border-radius:18px;
  display:none;
}
.legal-toc__title{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--cyan); margin-bottom:14px;
}
.legal-toc ol{ display:grid; gap:2px; counter-reset:toc; }
.legal-toc li{ counter-increment:toc; }
.legal-toc a{
  display:flex; gap:10px; align-items:baseline;
  padding:8px 4px; border-radius:8px;
  font-size:.86rem; color:var(--muted); line-height:1.4;
  transition:color .25s var(--ease), background .25s var(--ease);
}
.legal-toc a::before{
  content:counter(toc, decimal-leading-zero);
  font-family:var(--f-mono); font-size:10.5px; color:var(--muted-dim); flex:none;
}
.legal-toc a:hover{ color:var(--ink); background:rgba(255,255,255,.04); }
.legal-toc a.is-active{ color:var(--cyan); }
.legal-toc a.is-active::before{ color:var(--cyan); }

.legal-doc{
  padding:clamp(30px,4vw,52px) clamp(24px,4vw,52px);
  border-radius:clamp(20px,2.4vw,28px);
}

.legal-doc section{ scroll-margin-top:100px; }
.legal-doc section + section{
  margin-top:clamp(30px,3.6vw,44px);
  padding-top:clamp(30px,3.6vw,44px);
  border-top:1px solid var(--hair-soft);
}

.legal-doc h2{
  display:flex; align-items:baseline; gap:12px;
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(1.2rem,1.7vw,1.44rem);
  letter-spacing:-.026em; margin-bottom:14px;
}
.legal-doc h2 i{
  font-style:normal; font-family:var(--f-mono); font-size:.62em;
  font-weight:500; color:var(--cyan); letter-spacing:.02em;
}
.legal-doc h3{
  font-family:var(--f-display); font-weight:600; font-size:1.03rem;
  letter-spacing:-.018em; margin:20px 0 8px;
}
.legal-doc p{ color:var(--ink-2); font-size:.98rem; line-height:1.72; }
.legal-doc p + p{ margin-top:12px; }
.legal-doc ul, .legal-doc ol.legal-list{
  margin-top:12px; display:grid; gap:10px; padding-left:0;
}
.legal-doc ul li, .legal-doc ol.legal-list li{
  position:relative; padding-left:24px;
  color:var(--ink-2); font-size:.96rem; line-height:1.68;
}
.legal-doc ul li::before{
  content:''; position:absolute; left:2px; top:.62em;
  width:6px; height:6px; border-radius:50%;
  background:var(--cyan); opacity:.75;
}
.legal-doc ol.legal-list{ counter-reset:ll; }
.legal-doc ol.legal-list li{ counter-increment:ll; }
.legal-doc ol.legal-list li::before{
  content:counter(ll) '.'; position:absolute; left:0; top:0;
  font-family:var(--f-mono); font-size:.82em; color:var(--cyan);
}
.legal-doc strong{ color:var(--ink); font-weight:600; }
.legal-doc a{ color:var(--cyan); border-bottom:1px solid rgba(0,229,255,.35); transition:color .25s var(--ease); }
.legal-doc a:hover{ color:#8ff4ff; }

.legal-callout{
  margin-top:16px; padding:16px 18px;
  border-radius:14px;
  background:rgba(0,229,255,.05);
  box-shadow:0 0 0 1px rgba(0,229,255,.20) inset;
  font-size:.92rem; color:var(--ink-2); line-height:1.6;
}
.legal-callout b{ color:var(--cyan); }

.legal-crosslinks{
  margin-top:clamp(30px,4vw,48px);
  display:flex; flex-wrap:wrap; gap:10px;
}
.legal-crosslinks a{
  padding:10px 16px; border-radius:999px;
  font-size:.86rem; color:var(--ink-2);
  background:rgba(255,255,255,.04);
  box-shadow:0 0 0 1px var(--hair-soft) inset;
  transition:color .25s var(--ease), box-shadow .25s var(--ease);
}
.legal-crosslinks a:hover{ color:#fff; box-shadow:0 0 0 1px rgba(0,229,255,.4) inset; }
.legal-crosslinks a.is-current{ color:var(--cyan); box-shadow:0 0 0 1px rgba(0,229,255,.4) inset; }

@media (min-width: 900px){
  .legal-toc{ display:block; }
}
@media (max-width: 640px){
  .legal-doc{ padding:24px 18px; }
}