:root{
  /* Sampled from x.ai / Grok Bot: near-black #0A0A0A, hairline #1F2228,
     hot orange #DA291C, and the bot accents (cyan, amber, lavender, pink). */
  --bg:#0A0A0A;
  --bg-2:#0F0F0F;
  --surface:#1A1A1A;
  --surface-2:#202020;
  --line:#1F2228;
  --line-2:rgba(255,255,255,.075);
  --ink:#FFFFFF;
  --ink-2:#D5D9E2;
  --muted:#9598A1;
  --faint:#6C6F77;

  --glacier:#3B82F6;
  --zug:#DA291C;
  --iris:#DA291C;
  --cyan:#4AD8EC;
  --mint:#4AD8EC;
  --amber:#DA291C;
  --rose:#FF99A8;
  --slate:#A78BFA;
  --claret:#F59E0B;
  --moss:#22C55E;
  --ochre:#F97316;
  --teal:#EC4899;
  --sky:#06B6D4;

  --grad:#DA291C;
  --grad-txt:#DA291C;
  --grad-soft:rgba(218,41,28,.12);

  --r-s:12px; --r-m:18px; --r-l:26px; --r-xl:34px; --r-2xl:44px; --pill:999px;
  --wrap:1180px;
  --sans:"Schibsted Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  /* Wordmark. "Emirates" is Emirates' proprietary brand typeface — not
     redistributable, so it is named first and simply used if the machine has
     it installed (or if you drop in a licensed @font-face below). Jost is the
     free stand-in: same geometric, wide-tracked uppercase as the lockup. */
  --wordmark:"Emirates","Emirates Sans","Emirates Bold",Jost,"Schibsted Grotesk",
    "Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.22,.68,.32,1);
  --sh:0 2px 8px rgba(0,0,0,.55),0 30px 60px -30px rgba(0,0,0,.95);
  --sh-l:0 4px 14px rgba(0,0,0,.6),0 60px 120px -50px #000;
}

:root[data-zt="light"]{
  --bg:#FFFFFF;
  --bg-2:#EDECEC;
  --surface:#FFFFFF;
  --surface-2:#F5F4F2;
  --line:rgba(10,10,10,.13);
  --line-2:rgba(10,10,10,.07);
  --ink:#0A0A0A;
  --ink-2:#2C2C2E;
  --muted:#6B6D73;
  --faint:#98999F;

  --glacier:#1D4ED8;
  --zug:#DA291C;
  --iris:#DA291C;
  --cyan:#128FA8;
  --mint:#128FA8;
  --amber:#B57A16;
  --rose:#D9536C;
  --slate:#6D28D9;
  --claret:#B45309;
  --moss:#15803D;
  --ochre:#C2410C;
  --teal:#BE185D;
  --sky:#0E7490;

  --grad:#DA291C;
  --grad-txt:#DA291C;
  --grad-soft:rgba(218,41,28,.12);
  --sh:0 1px 3px rgba(10,10,10,.06),0 24px 48px -28px rgba(10,10,10,.3);
  --sh-l:0 2px 6px rgba(10,10,10,.06),0 60px 110px -50px rgba(10,10,10,.42);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:92px}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.55;letter-spacing:-.012em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--mono);font-weight:400;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--bg);padding:12px 18px;z-index:10000}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--zug);outline-offset:3px;border-radius:6px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:24px;width:100%;position:relative}

/* ── type ─────────────────────────────────────────────── */

.h2{font-size:clamp(2rem,4.1vw,3.3rem);line-height:1.02;font-weight:700;letter-spacing:-.042em;margin:0 0 18px}
h3{font-weight:600;letter-spacing:-.028em}
.eyebrow{font-size:11px;color:var(--muted);margin:0 0 18px}
.lede{font-size:clamp(1.04rem,1.5vw,1.22rem);color:var(--ink-2);max-width:640px;margin:0 auto 34px;line-height:1.58}
.sec__sub{color:var(--muted);max-width:600px;margin:0;font-size:1.03rem}
/* ── buttons ──────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:46px;padding:0 22px;border-radius:var(--pill);
  font-size:15px;font-weight:600;letter-spacing:-.014em;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;position:relative;
  transition:transform .2s var(--ease),background .2s,color .2s,border-color .2s,box-shadow .2s;
}
.btn svg{width:15px;height:15px}
.btn--solid{background:var(--ink);color:var(--bg);box-shadow:0 8px 30px -12px rgba(255,255,255,.35)}
.btn--solid:hover{transform:translateY(-2px);box-shadow:0 14px 40px -14px rgba(255,255,255,.45)}
:root[data-zt="light"] .btn--solid{box-shadow:0 10px 30px -14px rgba(9,11,16,.6)}
.btn--glass{background:rgba(255,255,255,.06);border-color:var(--line);color:var(--ink);backdrop-filter:blur(12px)}
:root[data-zt="light"] .btn--glass{background:rgba(9,11,16,.03)}
.btn--glass:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.2);transform:translateY(-2px)}
:root[data-zt="light"] .btn--glass:hover{background:rgba(9,11,16,.06);border-color:rgba(9,11,16,.18)}
.btn--lg{height:56px;padding:0 30px;font-size:16.5px}

/* ── bots (agent identity) ────────────────────────────── */
.bot{
  --b-eye:#DA291C;--b-edge:rgba(10,14,22,.22);
  width:46px;height:46px;flex:none;display:inline-block;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.6));
  transition:transform .25s var(--ease),filter .25s;
}
.bot--sm{width:30px;height:30px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.55))}
:root[data-zt="light"] .bot{--b-edge:rgba(10,14,22,.4);filter:drop-shadow(0 5px 12px rgba(9,11,16,.22))}
:root[data-zt="light"] .bot--sm{filter:drop-shadow(0 3px 7px rgba(9,11,16,.2))}
.bot--brand{width:64px;height:64px}
.bot--zug{--b-eye:var(--zug);--b-delay:-.7s}
.bot--slate{--b-eye:var(--slate);--b-delay:-2.9s}
.bot--claret{--b-eye:var(--claret);--b-delay:-4.3s}
.bot--moss{--b-eye:var(--moss);--b-delay:-1.8s}
.bot--ochre{--b-eye:var(--ochre);--b-delay:-5.6s}
.bot--teal{--b-eye:var(--teal);--b-delay:-3.4s}
.bot--iris{--b-eye:var(--iris);--b-delay:-6.2s}
.bot--glacier{--b-eye:var(--glacier);--b-delay:-1.2s}
.bot--sky{--b-eye:var(--sky);--b-delay:-3.9s}

/* ── the mark, alive ──────────────────────────────────────
   Two moving parts only: the antenna sways, the eyes blink.
   Both live inside <symbol id="bot">, so every <use> instance
   animates; --b-delay inherits into the shadow tree, so no two
   agents blink on the same beat. */
.b-eye{transform-box:fill-box;transform-origin:center center;
  animation:var(--b-eye-anim,b-blink) var(--b-eye-dur,7s) var(--b-delay,0s) infinite}
@keyframes b-blink{
  0%,90%,100%{transform:scaleY(1)}
  92.5%{transform:scaleY(.08)}
  95%{transform:scaleY(1)}
  96.5%{transform:scaleY(.08)}
  98%{transform:scaleY(1)}
}
.bot:hover{transform:translateY(-2px) rotate(-4deg)}
.bot--brand:hover{transform:rotate(-7deg) scale(1.05)}

.bot.is-active{filter:drop-shadow(0 0 9px var(--b-eye)) drop-shadow(0 6px 14px rgba(0,0,0,.55))}
.botline{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:38px;flex-wrap:wrap}
.botline .bot{width:68px;height:68px}
.botline--c .bot{width:52px;height:52px}
.botline .mono{font-size:10.5px;color:var(--faint);margin-left:8px}

.botline .bot{animation:bob 5.5s var(--ease) infinite}
.botline .bot:nth-child(2){animation-delay:.4s}.botline .bot:nth-child(3){animation-delay:.8s}
.botline .bot:nth-child(4){animation-delay:1.2s}.botline .bot:nth-child(5){animation-delay:1.6s}
.botline .bot:nth-child(6){animation-delay:2s}.botline .bot:nth-child(7){animation-delay:2.4s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* ── nav ──────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:900;backdrop-filter:saturate(1.7) blur(18px);
  background:color-mix(in srgb,var(--bg) 76%,transparent);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.nav.is-stuck{border-bottom-color:var(--line-2)}
.brand{display:inline-flex;align-items:center;gap:12px;font-size:17px}
.brand__wm{font-family:var(--wordmark);text-transform:uppercase;letter-spacing:.26em;font-weight:700;font-size:1.06em}
.burger{display:none;width:40px;height:40px;border:1px solid var(--line);border-radius:var(--pill);background:rgba(255,255,255,.05);cursor:pointer;flex-direction:column;gap:4px;align-items:center;justify-content:center}
.burger span{width:14px;height:1.5px;background:var(--ink);transition:transform .22s var(--ease)}
.burger[aria-expanded="true"] span:first-child{transform:translateY(2.75px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-2.75px) rotate(-45deg)}
.menu{border-top:1px solid var(--line-2);background:var(--bg);padding:8px 24px 20px;display:grid}
.menu[hidden]{display:none}
@media (min-width:1001px){.menu{display:none !important}}
.menu a{padding:12px 0;border-bottom:1px solid var(--line-2);font-size:17px}

/* ── aurora ───────────────────────────────────────────── */
.aurora{position:absolute;inset:-140px 0 auto;height:1000px;pointer-events:none;overflow:hidden;z-index:0}
.aurora i{position:absolute;display:block;border-radius:50%;filter:blur(100px);opacity:.24}
.aurora .a1{width:720px;height:620px;left:50%;top:-180px;margin-left:-620px;background:radial-gradient(circle,#DA291C,transparent 68%);animation:drift 26s var(--ease) infinite alternate}
.aurora .a2{width:660px;height:560px;left:50%;top:-120px;margin-left:-60px;background:radial-gradient(circle,#B6B3F9,transparent 68%);animation:drift2 30s var(--ease) infinite alternate}
.aurora .a3{width:520px;height:460px;left:50%;top:180px;margin-left:-280px;background:radial-gradient(circle,#DA291C,transparent 68%);opacity:.18;animation:drift 34s var(--ease) infinite alternate-reverse}
:root[data-zt="light"] .aurora i{opacity:.22;filter:blur(90px)}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(80px,50px,0) scale(1.12)}}
@keyframes drift2{from{transform:translate3d(0,0,0) scale(1.05)}to{transform:translate3d(-70px,40px,0) scale(.95)}}

.aurora--cta .a1{opacity:.26}.aurora--cta .a2{opacity:.24}
.hero .wrap{z-index:1}
.rotator{position:relative;display:inline-block;text-align:left}
.rotator__word{display:inline-block;animation:wordin .55s var(--ease) both}
@keyframes wordin{from{opacity:0;transform:translateY(.36em) rotate(1.5deg)}to{opacity:1;transform:none}}
.hero__cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.console{
  position:relative;z-index:1;display:grid;grid-template-columns:92px 1fr;margin-top:70px;text-align:left;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.028));
  border:1px solid var(--line);border-radius:var(--r-2xl);box-shadow:var(--sh-l);
  overflow:hidden;backdrop-filter:blur(24px);
}
:root[data-zt="light"] .console{background:var(--surface)}
.console__rail .bot{width:42px;height:42px}
.console__rail{border-right:1px solid var(--line-2);background:rgba(0,0,0,.18);padding:16px 0;display:flex;flex-direction:column;align-items:center;gap:13px}
:root[data-zt="light"] .console__rail{background:var(--bg-2)}
.rail__lamps{display:flex;gap:6px;margin-bottom:6px}
.lamp{width:9px;height:9px;border-radius:50%;display:inline-block}
.lamp--r{background:#E5695F}.lamp--y{background:#E3B341}.lamp--g{background:#5FB06B}
.rail__sep{width:28px;height:1px;background:var(--line);margin:2px 0}
.console__rail .bot:hover{transform:translateX(3px) scale(1.08)}
.console__body{min-width:0;display:flex;flex-direction:column}
.console__bar{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:15px 20px;border-bottom:1px solid var(--line-2);font-size:14.5px}
.console__bar strong{font-weight:600}
.thin{color:var(--faint);font-weight:400}
.status{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mint)}
.status i{width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 0 color-mix(in srgb,var(--mint) 55%,transparent);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.console__clock{margin-left:auto;font-size:11px;color:var(--faint)}

.thread{padding:24px 24px 28px;display:flex;flex-direction:column;gap:13px;max-height:640px;overflow:hidden;position:relative}
.thread::after{content:"";position:absolute;left:0;right:0;bottom:0;height:80px;background:linear-gradient(transparent,var(--bg));pointer-events:none}
.msg{max-width:76%;padding:13px 16px;border-radius:19px;font-size:15px;line-height:1.5}
.msg--bot{background:rgba(255,255,255,.06);border:1px solid var(--line-2);border-bottom-left-radius:6px;align-self:flex-start}
:root[data-zt="light"] .msg--bot{background:var(--bg-2)}
.msg--you{background:var(--grad);color:#fff;border-bottom-right-radius:6px;align-self:flex-end;box-shadow:0 10px 26px -14px var(--zug)}
.sys{align-self:center;font-family:var(--mono);font-size:10px;letter-spacing:.09em;color:var(--faint);text-transform:uppercase}
.sys b{color:var(--muted);font-weight:400}

.card{border:1px solid var(--line);border-radius:var(--r-m);padding:15px 17px;background:rgba(255,255,255,.045);align-self:flex-start;max-width:86%;backdrop-filter:blur(10px)}
:root[data-zt="light"] .card{background:var(--surface)}
.card__hd{display:flex;gap:7px;margin-bottom:10px;flex-wrap:wrap}
.chip{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;padding:5px 9px;border-radius:var(--pill);border:1px solid var(--line);color:var(--muted)}
.chip--live{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip--done{color:var(--mint);border-color:color-mix(in srgb,var(--mint) 38%,transparent)}
.chip--new{color:#fff;background:var(--grad);border-color:transparent}
.card p{margin:0;font-size:14.5px;color:var(--ink-2)}
.metrics{display:flex;gap:24px;margin-top:14px;padding-top:13px;border-top:1px solid var(--line-2);flex-wrap:wrap}
.metrics span{display:flex;flex-direction:column;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.metrics b{font-family:var(--sans);font-size:20px;letter-spacing:-.03em;color:var(--ink);font-weight:600;margin-bottom:3px}
.card--routine h4{margin:2px 0 6px;font-size:17.5px;font-weight:600;letter-spacing:-.025em}
.card--routine .mono{font-size:10px;color:var(--muted)}

.checks{align-self:flex-start;max-width:86%;background:rgba(255,255,255,.035);border:1px solid var(--line-2);border-radius:var(--r-m);padding:14px 17px;display:grid;gap:8px;font-size:14px}
:root[data-zt="light"] .checks{background:var(--bg-2)}
.checks div{display:flex;gap:9px;align-items:baseline}
.checks b{font-weight:600}
.arrow{color:var(--faint)}
.checks em{font-style:normal;color:var(--amber)}
.ok{color:var(--mint);font-weight:600}
.warn{color:var(--amber);font-weight:700}
.run{color:var(--zug)}
.handoff{align-self:center;font-size:13px;color:var(--muted)}
.who{font-weight:600}
.who--claret{color:var(--claret)}.who--iris{color:var(--iris)}
.t{opacity:0;transform:translateY(12px)}
.console.is-live .t{animation:tin .6s var(--ease) forwards;animation-delay:calc(var(--t) * 260ms)}
@keyframes tin{to{opacity:1;transform:none}}

/* ── connector strip ──────────────────────────────────── */
.strip{padding:90px 0 20px;text-align:center}
.conn{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 8px;padding:0;margin:0}
.conn li{font-family:var(--mono);font-size:11.5px;color:var(--muted);border:1px solid var(--line);border-radius:var(--pill);padding:8px 14px;background:rgba(255,255,255,.03);transition:color .2s,border-color .2s,transform .2s var(--ease),background .2s}
.conn li:hover{color:var(--ink);border-color:rgba(255,255,255,.24);transform:translateY(-2px);background:rgba(255,255,255,.07)}
:root[data-zt="light"] .conn li{background:var(--bg-2)}

/* ── sections ─────────────────────────────────────────── */
.sec{padding:118px 0;position:relative}
.sec__hd{margin-bottom:54px;max-width:780px}
.rtab .bot{width:28px;height:28px}
.rtab{display:inline-flex;align-items:center;gap:10px;padding:14px 20px;background:none;border:0;border-bottom:2px solid transparent;font:inherit;font-size:14.5px;color:var(--muted);cursor:pointer;white-space:nowrap;transition:color .2s,border-color .2s,background .2s}
.rtab:hover{color:var(--ink);background:rgba(255,255,255,.04)}
.rtab.is-on{color:var(--ink);border-bottom-color:var(--zug);font-weight:600}
.rp{display:none;grid-template-columns:1.05fr .95fr;gap:46px;padding:40px 36px}
.rp.is-on{display:grid;animation:fade .42s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.rp h3{font-size:clamp(1.7rem,2.5vw,2.2rem);margin:0 0 14px}

/* ── app + card ───────────────────────────────────────── */
.sec--app{background:var(--bg-2);border-block:1px solid var(--line-2)}
.app{display:grid;grid-template-columns:.92fr 1.08fr;gap:60px;align-items:center}
.ticks{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:12px;font-size:15.5px;color:var(--ink-2)}
.ticks li{padding-left:26px;position:relative}
.ticks li::before{content:"";position:absolute;left:0;top:.5em;width:12px;height:7px;border-left:2px solid var(--mint);border-bottom:2px solid var(--mint);transform:rotate(-45deg)}
.app__r{position:relative;display:flex;justify-content:flex-start;align-items:center;min-height:580px}
.phone{
  position:relative;width:296px;margin-left:8px;aspect-ratio:9/19.2;border-radius:46px;
  background:linear-gradient(170deg,#181B24,#0B0D12);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 0 0 9px #0A0C10,0 0 0 10px rgba(255,255,255,.09),var(--sh-l);
  padding:16px 13px;overflow:hidden;z-index:2;
}
.phone::before{content:"";position:absolute;inset:0;background:linear-gradient(150deg,rgba(255,255,255,.1),transparent 38%);pointer-events:none}
.phone__notch{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:88px;height:22px;border-radius:var(--pill);background:#05060A;z-index:3}
.phone__screen{height:100%;overflow:hidden;padding-top:38px;display:flex;flex-direction:column;gap:9px;color:#F6F7FA}
.ph__top{display:flex;align-items:center;gap:8px;font-size:9.5px;color:#7E8496;letter-spacing:.11em;padding:0 4px}
.badge{background:var(--grad);color:#fff;font-family:var(--mono);font-size:9.5px;border-radius:var(--pill);padding:3px 8px}
.ph__card .bot,.ph__lane .bot{width:26px;height:26px}
.ph__card{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.ph__card div{display:flex;flex-direction:column;min-width:0}
.ph__card b{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph__card .mono{font-size:8.5px;color:#8E93A3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph__card--hero{background:var(--grad-soft);border-color:rgba(218,41,28,.42)}
.ph__go{margin-left:auto;font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;border-radius:var(--pill);padding:6px 10px;background:#F6F7FA;color:#0B0D12;flex:none;font-weight:500}
.ph__hr{height:1px;background:rgba(255,255,255,.08);margin:6px 4px}
.ph__lane{display:flex;align-items:center;gap:9px;padding:0 4px}
.ph__lane .bar{flex:1;height:5px;border-radius:var(--pill);background:var(--grad);display:block;width:var(--w);transform-origin:left;animation:grow 1.2s var(--ease) both}
.ph__lane .mono{font-size:8.5px;color:#7E8496;width:66px;text-align:right}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.metal__top .bot{width:30px;height:30px}
.metal__top .mono{font-family:var(--wordmark);font-size:9.5px;letter-spacing:.26em;color:#9BA1B0}
.mini{background:rgba(0,0,0,.3);border:1px solid var(--line-2);border-radius:var(--r-l);padding:18px;display:flex;flex-direction:column;gap:11px;justify-content:center;min-height:180px}
:root[data-zt="light"] .mini{background:var(--bg-2)}
.mini--chat .msg{max-width:88%;font-size:14px}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}
.lane__b .bar{display:block;height:100%;width:var(--w);background:var(--grad);border-radius:inherit;transform-origin:left;animation:grow 1.2s var(--ease) both}
.rcard .mono{font-size:9px;color:var(--faint);margin-left:auto}
.memo .mono{font-size:9px;color:var(--faint)}
.memo .chip{justify-self:start}
.mini--flow{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px}
.flow{display:flex;align-items:center;gap:9px;padding:10px 14px;border-radius:var(--pill);background:rgba(255,255,255,.06);border:1px solid var(--line-2)}
.flow .mono{font-size:10.5px;color:var(--ink-2)}
.flow--you{background:var(--grad);border-color:transparent}
.flow--you .mono{color:#fff;font-weight:500}
.flow__arrow{flex:1;min-width:18px;height:1px;background:linear-gradient(90deg,var(--line),var(--zug));position:relative}
.flow__arrow::after{content:"";position:absolute;right:0;top:-3px;border-left:5px solid var(--zug);border-block:3.5px solid transparent}
/* Figures at a glance: four glass tiles, a mono label, a 900-weight number
   in the site's red-word style, a line of context under each. */
.figs__g{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:0}
.figs__g > div{padding:26px 24px 24px;border-radius:20px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh);
  display:flex;flex-direction:column;gap:6px;transition:transform .25s cubic-bezier(.2,.7,.2,1),border-color .25s}
.figs__g > div:hover{transform:translateY(-3px);border-color:var(--muted)}
.figs__g dt{font-size:10px;letter-spacing:.14em;color:var(--faint);margin:0 0 4px}
.figs__g dd{margin:0;font-size:clamp(40px,5vw,56px);font-weight:900;letter-spacing:-.05em;line-height:.95;color:var(--ink)}
.figs__g dd::after{content:".";color:var(--zug)}
.figs__g dd .figs__txt{font-size:clamp(22px,2.5vw,30px);letter-spacing:-.03em;line-height:1.1;white-space:nowrap}
.figs__g p{margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--muted)}

/* ── developers ───────────────────────────────────────── */
.dev{display:grid;grid-template-columns:.86fr 1.14fr;gap:58px;align-items:center}
.code{background:#0A0B0F;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-l);border:1px solid var(--line)}
:root[data-zt="light"] .code{border-color:rgba(9,11,16,.2)}
.code__tabs{display:flex;gap:2px;padding:10px 10px 0;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.07)}
.ctab{background:none;border:0;font:inherit;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.45);padding:10px 15px;border-radius:10px 10px 0 0;cursor:pointer;transition:color .2s,background .2s}
.ctab:hover{color:#fff}
.ctab.is-on{color:#fff;background:#0A0B0F}
.code__b{display:none;margin:0;padding:24px 26px 28px;overflow-x:auto;font-family:var(--mono);font-size:12.8px;line-height:1.78;color:#E8E9EE;font-weight:300}
.code__b.is-on{display:block}
.code .k{color:#FF9A5C}.code .s{color:#9BD6A6}.code .a{color:#DA291C}.code .c{color:#6C6F77}.code .b{color:#B6B3F9}

/* ── trust (inverted block) ───────────────────────────── */
.sec--trust{background:var(--ink);color:var(--bg);border-radius:var(--r-2xl);max-width:1340px;margin-inline:auto;padding:104px 0}
.sec--trust .h2,.sec--trust h3{color:var(--bg)}
.sec--trust .eyebrow,.sec--trust .sec__sub{color:color-mix(in srgb,var(--bg) 58%,transparent)}
.trust{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:0;margin:0}
.trust li{background:color-mix(in srgb,var(--bg) 6%,transparent);border:1px solid color-mix(in srgb,var(--bg) 12%,transparent);border-radius:var(--r-l);padding:28px 24px}
.trust .mono{font-size:9.5px;color:var(--zug);margin:0}
.trust h3{font-size:1.22rem;margin:16px 0 10px}
.trust li p:last-child{margin:0;font-size:14.5px;color:color-mix(in srgb,var(--bg) 62%,transparent);line-height:1.6}

/* ── pricing ──────────────────────────────────────────── */
.toggle{display:inline-flex;gap:3px;padding:4px;border:1px solid var(--line);border-radius:var(--pill);background:rgba(255,255,255,.04);margin-top:28px}
.tg{border:0;background:none;font:inherit;font-size:14px;color:var(--muted);padding:9px 18px;border-radius:var(--pill);cursor:pointer;transition:background .2s,color .2s;display:inline-flex;align-items:center;gap:8px}
.tg.is-on{background:var(--ink);color:var(--bg)}

.amt{font-size:3.3rem;font-weight:700;letter-spacing:-.055em;line-height:1;font-variant-numeric:tabular-nums}

.per{font-size:9.5px;color:var(--faint);margin-left:10px}

/* ── faq ──────────────────────────────────────────────── */
.faq{border-top:1px solid var(--line-2)}
.faq details{border-bottom:1px solid var(--line-2)}
.faq summary{list-style:none;cursor:pointer;padding:24px 44px 24px 0;font-size:1.1rem;font-weight:600;letter-spacing:-.025em;position:relative;transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--zug)}
.x{position:absolute;right:4px;top:50%;width:13px;height:13px;margin-top:-6px}
.x::before,.x::after{content:"";position:absolute;background:var(--muted);transition:transform .3s var(--ease)}
.x::before{left:0;top:6px;width:13px;height:1.5px}
.x::after{left:6px;top:0;width:1.5px;height:13px}
.faq details[open] .x::after{transform:rotate(90deg)}
.faq details p{margin:0 0 26px;color:var(--muted);max-width:66ch;animation:fade .35s var(--ease)}

/* ── cta / footer ─────────────────────────────────────── */

.cta .wrap{z-index:1}

.foot{border-top:1px solid var(--line-2);padding:60px 0 36px;background:var(--bg-2)}
.foot__top{display:flex;align-items:baseline;gap:28px;flex-wrap:wrap;padding-bottom:40px;border-bottom:1px solid var(--line-2)}
.foot__cols{display:grid;grid-template-columns:repeat(5,1fr);gap:26px;padding:40px 0}
.foot__cols h4{font-size:9.5px;color:var(--faint);margin:0 0 15px;font-weight:400}
.foot__cols div{display:grid;gap:10px;align-content:start}
.foot__cols a{font-size:14.5px;color:var(--muted);transition:color .18s,transform .18s var(--ease)}
.foot__cols a:hover{color:var(--ink);transform:translateX(2px)}
.foot__base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:28px;border-top:1px solid var(--line-2);font-size:9.5px;color:var(--faint)}

/* ── reveal ───────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .75s var(--ease),transform .75s var(--ease);transition-delay:var(--d,0ms)}
.reveal.in{opacity:1;transform:none}

/* ── responsive ───────────────────────────────────────── */
@media (max-width:1100px){
  .rp{grid-template-columns:1fr;gap:28px}
  .trust{grid-template-columns:repeat(2,1fr)}
  .figs__g{grid-template-columns:repeat(2,1fr);gap:14px}
  .app{grid-template-columns:1fr;gap:44px}
  .app__r{min-height:0;flex-direction:column;gap:28px}
  .phone{margin-left:0}
  .sec--trust{border-radius:0}
}
@media (max-width:1000px){
  .burger{display:flex}.dev{grid-template-columns:1fr}
  
  
  .foot__cols{grid-template-columns:repeat(2,1fr);gap:32px}
}
@media (max-width:720px){
  body{font-size:16px}
  .brand__wm{letter-spacing:.22em;font-size:21px}
  .brand{gap:9px}
  .bot--brand{width:52px;height:52px}
  .console__bar .thin,.console__clock{display:none}
  .botline .bot{width:52px;height:52px}
  .console__rail .bot{width:36px;height:36px}
  .sec{padding:82px 0}
  .console{grid-template-columns:1fr;border-radius:var(--r-xl)}
  .console__rail{flex-direction:row;border-right:0;border-bottom:1px solid var(--line-2);padding:12px 14px;overflow-x:auto;justify-content:flex-start}
  .rail__lamps{display:none}
  .rail__sep{width:1px;height:22px;margin:0 3px}
  .msg{max-width:92%}
  .card,.checks{max-width:97%}
  .thread{padding:16px 14px 20px;max-height:560px}
  .figs__g{grid-template-columns:1fr;gap:12px}
  .trust{grid-template-columns:1fr}
  .btn--lg{width:100%}
  .hero__cta{flex-direction:column}
  .mini--flow{flex-direction:column;align-items:stretch}
  .flow__arrow{width:1px;min-height:16px;height:16px;margin-inline:auto;background:linear-gradient(180deg,var(--line),var(--zug))}
  .flow__arrow::after{right:auto;left:-3px;top:auto;bottom:0;border-left:3.5px solid transparent;border-right:3.5px solid transparent;border-top:5px solid var(--zug);border-block:0}
}

@media (max-width:560px){
  .nav__act .btn--solid{display:none}
  .menu .menu__cta{margin-top:12px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  .reveal,.t{opacity:1;transform:none}.b-eye{animation:none}
  .aurora i{animation:none}
}

/* ═══════════════════════════════════════════════════════════
   SUB-PAGES — shared components across the 22 inner pages
   ═══════════════════════════════════════════════════════════ */

.nav__links a.is-on{color:var(--ink)}
.nav__links a.is-on::after{right:0;background:var(--zug)}

/* ── page hero ────────────────────────────────────────────── */
.phero{position:relative;padding:76px 0 64px;overflow:hidden}
.phero .wrap{z-index:1}
.phero .display{margin-bottom:22px}
.phero .aurora{height:560px;inset:-260px 0 auto}
.phero .aurora i{opacity:.2;filter:blur(120px)}
:root[data-zt="light"] .phero .aurora i{opacity:.13}
.lede{margin-bottom:32px}
.lede--l{margin-left:0;margin-right:0;max-width:660px;text-align:left}
.phero .hero__cta{justify-content:flex-start}
.phero .botline{justify-content:flex-start;margin-top:40px}
.crumb{display:flex;gap:9px;align-items:center;font-size:10.5px;color:var(--faint);margin:0 0 26px}
.crumb a{color:var(--muted);transition:color .18s}
.crumb a:hover{color:var(--zug)}

/* ── agent hero ───────────────────────────────────────────── */
.phero--agent{padding-top:34px}
.ahero{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:start}
.ahero__bot{display:block;padding-top:6px}
.bot--xl{width:132px;height:132px}
.h3{font-size:clamp(1.2rem,1.8vw,1.45rem);font-weight:600;letter-spacing:-.028em;margin:0 0 18px}

/* ── agent roster cards ───────────────────────────────────── */
.agrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.acard{
  border:1px solid var(--line);border-radius:var(--r-xl);padding:28px 26px 24px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.018));
  display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden;
  transition:transform .3s var(--ease),border-color .3s,background .3s;
}
:root[data-zt="light"] .acard{background:var(--surface);box-shadow:var(--sh)}
.acard:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.22)}
:root[data-zt="light"] .acard:hover{border-color:rgba(10,10,10,.24)}
.acard__bot{display:block;margin-bottom:16px}
.acard__bot .bot{width:72px;height:72px;filter:drop-shadow(0 8px 18px rgba(0,0,0,.35))}
:root[data-zt="light"] .acard__bot .bot{filter:drop-shadow(0 8px 18px rgba(10,10,10,.18))}
.acard__k{font-size:9.5px;color:var(--zug);margin:0 0 8px}
.acard h3{font-size:1.42rem;margin:0 0 8px}
.acard__d{color:var(--muted);font-size:14.8px;margin:0 0 20px;flex:1}
.acard__go{font-size:9.5px;color:var(--faint);transition:color .2s}
.acard:hover .acard__go{color:var(--zug)}

/* ── generic cards ────────────────────────────────────────── */
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card2{
  border:1px solid var(--line);border-radius:var(--r-l);padding:26px 24px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.016));
  transition:transform .3s var(--ease),border-color .3s;
}
:root[data-zt="light"] .card2{background:var(--surface);box-shadow:var(--sh)}
.card2:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.2)}
.card2 h3{font-size:1.12rem;margin:0 0 10px;letter-spacing:-.025em}
.card2 h3 a{color:inherit;border-bottom:1px solid var(--line)}
.card2 h3 a:hover{color:var(--zug);border-color:var(--zug)}
.card2 p{margin:0;color:var(--muted);font-size:14.8px;line-height:1.62}
.card2__k{font-size:9.5px;color:var(--zug);margin:0 0 10px}
.card2 a{color:var(--zug)}

/* ── steps ────────────────────────────────────────────────── */
.steps{list-style:none;padding:0;margin:0;counter-reset:s;display:grid;gap:0}
.steps li{display:grid;grid-template-columns:64px 1fr;gap:20px;padding:26px 0;border-top:1px solid var(--line-2)}
.steps li:last-child{border-bottom:1px solid var(--line-2)}
.step__n{font-size:11px;color:var(--zug);padding-top:5px}
.steps h3{font-size:1.18rem;margin:0 0 8px;letter-spacing:-.025em}
.steps p{margin:0;color:var(--muted);font-size:15.2px;max-width:62ch}

/* ── tables ───────────────────────────────────────────────── */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-l);background:rgba(255,255,255,.02)}
:root[data-zt="light"] .tablewrap{background:var(--surface)}
.matrix{width:100%;border-collapse:collapse;font-size:14.6px;min-width:640px}
.matrix th{
  text-align:left;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);font-weight:400;padding:16px 20px;border-bottom:1px solid var(--line);white-space:nowrap;
}
.matrix td{padding:15px 20px;border-bottom:1px solid var(--line-2);color:var(--ink-2);vertical-align:top}
.matrix tr:last-child td{border-bottom:0}
.matrix td:first-child{color:var(--ink);font-weight:500;white-space:nowrap}
.matrix--qa td:first-child{white-space:normal;width:34%}
.matrix code{font-family:var(--mono);font-size:12.6px;color:var(--zug);background:rgba(218,41,28,.09);padding:2px 6px;border-radius:5px}
.matrix a{color:var(--zug)}
.matrix tbody tr:hover td{background:rgba(255,255,255,.022)}
:root[data-zt="light"] .matrix tbody tr:hover td{background:rgba(10,10,10,.02)}

/* ── split lists ──────────────────────────────────────────── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:52px}
.nos{list-style:none;padding:0;margin:0;display:grid;gap:12px;font-size:15.5px;color:var(--ink-2)}
.nos li{padding-left:26px;position:relative}
.nos li::before{content:"";position:absolute;left:2px;top:.62em;width:12px;height:2px;background:var(--rose);border-radius:1px}

/* ── related agents ───────────────────────────────────────── */
.rels{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.rel .bot{width:40px;height:40px;filter:none}
.rel{display:flex;align-items:center;gap:13px;padding:15px 17px;border:1px solid var(--line);border-radius:var(--r-m);background:rgba(255,255,255,.03);transition:transform .25s var(--ease),border-color .25s}
:root[data-zt="light"] .rel{background:var(--surface)}
.rel:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.22)}
.rel span{display:flex;flex-direction:column;min-width:0}
.rel b{font-weight:600;font-size:15px}
.rel em{font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-top:3px}

/* ── solo console (agent pages) ───────────────────────────── */
.console--solo{grid-template-columns:1fr;margin-top:0}
.thread--solo{max-height:none;padding-bottom:26px}
.thread--solo::after{display:none}
.figs__g--inline{grid-template-columns:repeat(3,1fr);margin-top:36px}
.figs__g--inline dd{font-size:clamp(28px,3.4vw,40px)}

/* ── roles ────────────────────────────────────────────────── */
.role{display:flex;gap:26px;align-items:center;justify-content:space-between;padding:26px 0;border-top:1px solid var(--line-2)}
.role:last-of-type{border-bottom:1px solid var(--line-2)}
.role h3{font-size:1.2rem;margin:0 0 6px;letter-spacing:-.025em}
.role .mono{font-size:10px;color:var(--zug);display:block;margin-bottom:10px}
.role p:last-of-type{margin:0;color:var(--muted);font-size:15px;max-width:64ch}
.role .btn{flex:none}

/* ── legal / prose ────────────────────────────────────────── */
.legal{display:grid;grid-template-columns:210px 1fr;gap:60px;align-items:start}
.toc{position:sticky;top:110px;display:grid;gap:9px;align-content:start}
.toc .mono{font-size:9.5px;color:var(--faint);margin:0 0 6px}
.toc a{font-size:13.6px;color:var(--muted);line-height:1.4;transition:color .18s,transform .18s var(--ease)}
.toc a:hover{color:var(--zug);transform:translateX(2px)}
.prose{max-width:70ch}
.prose h2{font-size:clamp(1.3rem,2vw,1.6rem);font-weight:600;letter-spacing:-.03em;margin:52px 0 16px;scroll-margin-top:110px}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--ink-2);font-size:16.4px;line-height:1.72;margin:0 0 16px}
.prose b{color:var(--ink);font-weight:600}
.prose a{color:var(--zug);border-bottom:1px solid color-mix(in srgb,var(--zug) 40%,transparent)}
.prose a:hover{border-bottom-color:var(--zug)}
.prose .tablewrap{margin:24px 0}
.notice{border:1px solid color-mix(in srgb,var(--amber) 34%,transparent);background:color-mix(in srgb,var(--amber) 8%,transparent);border-radius:var(--r-l);padding:22px 24px}
.notice .mono{font-size:9.5px;color:var(--amber);margin:0 0 10px}
.notice p:last-child{margin:0;color:var(--ink-2);font-size:14.8px;line-height:1.65}

/* ── press / brand ────────────────────────────────────────── */
.quote{margin:0 0 20px;border-left:2px solid var(--zug);padding:6px 0 6px 28px}
.quote p{font-size:1.24rem;line-height:1.58;letter-spacing:-.022em;margin:0 0 14px;color:var(--ink)}
.quote--sm p{font-size:1.06rem;color:var(--ink-2)}
.quote footer{font-size:9.5px;color:var(--faint)}
.marks{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.markbox{margin:0;border:1px solid var(--line);border-radius:var(--r-l);padding:34px 20px 18px;text-align:center;background:rgba(255,255,255,.025)}
:root[data-zt="light"] .markbox{background:var(--surface)}
.markbox figcaption{font-size:9px;color:var(--faint);margin-top:22px}
.swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.swatches--sm{grid-template-columns:repeat(7,1fr)}
.sw{margin:0}
.sw__chip{display:block;height:88px;border-radius:var(--r-m);background:var(--c);border:1px solid var(--line);margin-bottom:12px}
.sw figcaption{display:grid;gap:3px}
.sw b{font-size:14px;font-weight:600}
.sw .mono{font-size:9.5px;color:var(--muted)}
.sw__var{color:var(--faint)}
.pre-sm{font-family:var(--mono);font-size:13px;border:1px solid var(--line);border-radius:var(--r-s);padding:12px 15px;margin:0 0 10px;color:var(--ink-2);background:rgba(0,0,0,.3)}
:root[data-zt="light"] .pre-sm{background:var(--bg-2)}
.trust--page{grid-template-columns:repeat(2,1fr)}
.dev .pre-sm{max-width:320px}

@media (max-width:1100px){
  .agrid,.grid3,.rels,.marks{grid-template-columns:repeat(2,1fr)}
  .swatches{grid-template-columns:repeat(3,1fr)}
  .swatches--sm{grid-template-columns:repeat(4,1fr)}
  .legal{grid-template-columns:1fr;gap:34px}
  .toc{position:static;grid-template-columns:repeat(2,1fr);gap:10px 20px}
  .toc .mono{grid-column:1/-1}
  .trust--page{grid-template-columns:1fr}
}
@media (max-width:1000px){
  .split{grid-template-columns:1fr;gap:34px}
  .figs__g--inline{grid-template-columns:1fr;gap:26px}
  .role{flex-direction:column;align-items:flex-start;gap:16px}
}
@media (max-width:720px){
  .phero{padding:44px 0 44px}
  .ahero{grid-template-columns:1fr;gap:22px}
  .bot--xl{width:96px;height:96px}
  .agrid,.grid2,.grid3,.rels,.marks{grid-template-columns:1fr}
  .swatches,.swatches--sm{grid-template-columns:repeat(2,1fr)}
  .steps li{grid-template-columns:1fr;gap:8px}
  .step__n{padding-top:0}
  .toc{grid-template-columns:1fr}
  .prose p{font-size:15.6px}
  .quote{padding-left:20px}
}

/* ═══════════════════════════════════════════════════════════
   NAV TRIM · FOOTER THEME SWITCH · BIG MARK · THE VERB
   ═══════════════════════════════════════════════════════════ */

/* ── page links centred in the header ─────────────────────── */

/* ── smaller nav controls, and a log-in link where sales used to be ── */
.btn{height:42px;padding:0 19px;font-size:14.6px}
.btn--lg{height:52px;padding:0 27px;font-size:15.8px}
.nav .btn{height:36px;padding:0 17px;font-size:13.8px}.burger{width:36px;height:36px}

/* ── footer theme switch: system / light / dark ──────────────────────────────
   A glass pill with three equal seats and one thumb that slides between them.
   The thumb is ink on the page ground (white on dark, black on light), the
   icon it carries inverts with it, and the icon pops once when chosen: the
   sun's rays turn, the moon tilts, the screen lights. The seat index comes
   from data-zt-mode on the root, which script.js sets — so the thumb knows
   where to sit before any click, and moves with a spring on each one. */
.tsw{--seat:84px;--pad:4px;position:relative;isolation:isolate;display:inline-flex;align-items:center;padding:var(--pad);
  border:1px solid var(--line);border-radius:var(--pill);background:rgba(255,255,255,.04);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 1px 2px rgba(0,0,0,.25)}
:root[data-zt="light"] .tsw{background:rgba(10,10,10,.035);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 1px 2px rgba(10,10,10,.06)}
.tsw::before{content:"";position:absolute;z-index:-1;top:var(--pad);bottom:var(--pad);left:var(--pad);width:var(--seat);border-radius:var(--pill);
  background:var(--ink);box-shadow:0 6px 18px -6px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.18);
  transform:translateX(calc(var(--i,2) * var(--seat)));
  transition:transform .55s cubic-bezier(.34,1.4,.4,1)}
:root[data-zt="light"] .tsw::before{box-shadow:0 8px 20px -8px rgba(10,10,10,.5)}
:root[data-zt-mode="system"] .tsw{--i:0}
:root[data-zt-mode="light"] .tsw{--i:1}
:root[data-zt-mode="dark"] .tsw{--i:2}
.tsw button{
  width:var(--seat);display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:0;background:none;cursor:pointer;border-radius:var(--pill);padding:8px 0;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);transition:color .3s;
}
.tsw button svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transform-origin:50% 50%;transition:transform .3s var(--ease)}
.tsw button:hover{color:var(--ink)}
.tsw button:hover svg{transform:scale(1.15)}
.tsw button.is-on{color:var(--bg)}
.tsw button.is-on svg{animation:tsw-pop .6s cubic-bezier(.34,1.4,.4,1)}
.tsw button.is-on .tsw-rays{animation:tsw-rays .9s var(--ease)}
.tsw button:focus-visible{outline:0;box-shadow:0 0 0 2px var(--zug)}
@keyframes tsw-pop{0%{transform:scale(.6) rotate(-25deg)}60%{transform:scale(1.25) rotate(6deg)}100%{transform:scale(1) rotate(0)}}
@keyframes tsw-rays{from{transform:rotate(0)}to{transform:rotate(90deg)}}
.foot__base{align-items:center}
.foot__base .tsw{margin-left:auto}
@media (max-width:720px){
  .foot__base .tsw{margin-left:0}
  .tsw{--seat:64px}
  .tsw button span{display:none}
  .tsw button svg{width:16px;height:16px}
}
@media (prefers-reduced-motion:reduce){.tsw::before,.tsw button svg{transition:none;animation:none}.tsw button.is-on .tsw-rays{animation:none}}

/* ── the motto ─────────────────────────────────────────────── */
.brand--lock{align-items:center;gap:14px}
.brand__txt{display:grid;gap:6px}
/* the footer lockup is the one place the mark gets room: 64px, wordmark 26px */
/* The mark leads: 72px, with the wordmark and motto smaller beside it,
   centred on its middle, a hairline between — a proper lockup. Sized from
   one --mk so the proportions hold at every width. */
.foot .brand--lock{--mk:72px;gap:0;align-items:center}
.foot .brand--lock .bot--brand{width:var(--mk);height:var(--mk);flex:none}
.foot .brand--lock .brand__txt{position:relative;height:calc(var(--mk) * .56);gap:0;align-content:space-between;
  margin-left:calc(var(--mk) * .3);padding-left:calc(var(--mk) * .3);border-left:1px solid var(--line)}
.foot .brand--lock .brand__wm{font-size:calc(var(--mk) * .33);line-height:.72;letter-spacing:.3em;font-weight:700}
.foot .brand--lock .motto{font-size:calc(var(--mk) * .14);line-height:.8;letter-spacing:.34em;color:var(--muted)}
@media (max-width:720px){
  .foot .brand--lock{--mk:56px}
}
.motto{
  font-family:var(--wordmark);text-transform:uppercase;font-weight:400;
  letter-spacing:.26em;font-size:10.5px;color:var(--muted);line-height:1;
}
.foot__top{align-items:center}
.lockup{display:inline-flex;align-items:center;gap:22px;padding:38px 44px;border:1px solid var(--line);border-radius:var(--r-xl);background:rgba(255,255,255,.03)}
:root[data-zt="light"] .lockup{background:var(--surface);box-shadow:var(--sh)}
.lockup .brand__wm{font-family:var(--wordmark);text-transform:uppercase;letter-spacing:.3em;font-weight:400;font-size:clamp(1.5rem,3.4vw,2.3rem)}
.lockup .motto{font-size:clamp(10px,1.2vw,13px);letter-spacing:.3em}
.lockup .brand__txt{gap:12px}
@media (max-width:720px){
  .motto{font-size:9.5px;letter-spacing:.22em}
  .lockup{padding:26px 24px;gap:16px}
}

/* ── alignment pass: roadmap, notices, four-up plans ───────── */
.acard--road{opacity:.62}
.acard--road:hover{opacity:1}
.road{display:inline-block;margin-left:8px;padding:3px 7px;border-radius:var(--pill);
  border:1px solid color-mix(in srgb,var(--amber) 42%,transparent);color:var(--amber);
  font-size:8.5px;letter-spacing:.12em}
.sec--tight{padding:0 0 26px}
.phero + .sec--tight{padding-top:8px}
.notice--road{border-color:color-mix(in srgb,var(--amber) 34%,transparent)}
.notice--build{border-color:color-mix(in srgb,var(--iris) 40%,transparent);
  background:color-mix(in srgb,var(--iris) 9%,transparent)}
.notice--build .mono{color:var(--iris)}
.notice--legal{border-color:var(--line);background:rgba(255,255,255,.03)}
:root[data-zt="light"] .notice--legal{background:var(--bg-2)}
.notice--legal .mono{color:var(--muted)}

.conn .thin{font-size:9px;letter-spacing:.06em;margin-left:5px}

/* ── nav: Tema's, measured ─────────────────────────────────────────────────
   temaschool.netlify.app: 60px fixed bar; links at 13.5/650; "Log in" as a
   99px pill; a gradient pill; a 42px burger, radius 13, three 18×2 lines that
   fold into an X (±7px, 45°). At 780px and under the links and the pill go,
   the burger appears, and a full-height drawer opens below the bar with the
   links as a divided list and the two actions pinned to the bottom, 52px
   each, radius 14. Zuger's colours, Tema's shapes. */
body{padding-top:72px}
.nav{position:fixed;top:0;left:0;right:0;z-index:900;height:72px;display:flex;align-items:center;gap:16px;
  padding:0 18px;color:var(--ink);background:transparent;border-bottom:1px solid transparent;
  transition:background .3s,border-color .3s}
.nav.open,.nav.is-stuck{background:color-mix(in srgb,var(--bg) 80%,transparent);
  backdrop-filter:blur(40px) saturate(180%);border-bottom-color:var(--line-2)}
.brand{display:inline-flex;align-items:center;gap:10px;font-size:17px;flex-shrink:0}
.brand__wm{font-family:var(--wordmark);text-transform:uppercase;letter-spacing:.26em;font-weight:700;font-size:1.4em}
.nav-links{display:flex;align-items:center;gap:2px}
.nav-link{font-size:13.5px;font-weight:650;color:var(--muted);padding:8px 11px;white-space:nowrap;border-radius:10px;transition:color .2s,background .2s}
.nav-link:hover,.nav-link.is-on{color:var(--ink);background:rgba(127,127,170,.13)}
.nav .spacer{flex:1}
.nav-signin{font-size:13.5px;font-weight:700;color:var(--ink);padding:9px 18px;border-radius:99px;flex-shrink:0;
  border:1px solid var(--line);background:rgba(255,255,255,.06);transition:background .2s,border-color .2s}
.nav-signin:hover{background:rgba(255,255,255,.12)}
.btn-pill{font-size:13.5px;font-weight:700;color:#fff;padding:10px 18px;border-radius:99px;flex-shrink:0;
  background:#DA291C;box-shadow:0 8px 22px rgba(218,41,28,.35);transition:transform .15s,box-shadow .2s}
.btn-pill:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(218,41,28,.42)}
.nav-burger{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.06);
  cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0;flex-shrink:0;
  transition:background .2s,transform .15s}
.nav-burger:active{background:rgba(255,255,255,.13);transform:scale(.94)}
.nav-burger span{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);
  transition:transform .28s cubic-bezier(.2,.7,.2,1),opacity .2s}
.nav.open .nav-burger span:first-child{transform:translateY(7px) rotate(45deg)}
.nav.open .nav-burger span:nth-child(2){opacity:0}
.nav.open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-mobile{display:none}
@media (max-width:780px){
  .nav{padding:0 14px}
  .nav-links,.nav-signin{display:none}
  .nav-burger{display:flex}
  .nav.open{background:var(--bg);backdrop-filter:none;border-bottom-color:transparent}
  .nav.open .nav-mobile{display:flex;flex-direction:column;position:fixed;inset:72px 0 0;
    padding:8px 22px calc(22px + env(safe-area-inset-bottom,0px));background:var(--bg);overflow-y:auto}
  .nav-mobile-links{display:flex;flex-direction:column}
  .nav-mobile-links a{font-size:20px;font-weight:700;color:var(--ink);padding:20px 0;border-bottom:1px solid var(--line-2)}
  .nav-mobile-actions{margin-top:auto;display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-top:16px}
  .nav-mobile-signin,.nav-mobile-cta{height:52px;display:flex;align-items:center;justify-content:center;border-radius:14px;font-size:15px;font-weight:700}
  .nav-mobile-signin{border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--ink)}
  .nav-mobile-cta{background:#DA291C;color:#fff;box-shadow:0 10px 26px rgba(218,41,28,.45)}
  body.nav-open{overflow:hidden}
}

/* ── auth block: copied from the console by build.py — do not edit here ── */
/* ── auth: the Revolut door ───────────────────────────────────────────────
   Measured from business.revolut.com/signin and /signup on desktop, iPad and
   phone: a near-black page (#020408) with a faint cool glow top-left; a 352px
   column, left-aligned; the wordmark small at the top (centred on a phone);
   a 24px/700 title, a 15px muted line; a 48px field, radius 12, white at 14%,
   no border; a 44px white pill "Continue" at 15px/500; "or continue with"
   between hairlines, then round 44px icon buttons with 12px labels; "Don't
   have an account?" at 12px over a 44px pill in #191C1F. Here the door is a
   popup, not a page: the column sits in a 400px card over a blurred backdrop
   above a phone, and fills the screen on one. Dark in both themes, as
   Revolut's is. The only edit to the recipe is the palette: Swiss red where
   Revolut has blue. */
.auth{
  position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  padding:0;background:#020408;
  --a-bg:#020408;--a-ink:#FFFFFF;--a-ink2:rgba(255,255,255,.7);--a-faint:rgba(255,255,255,.5);
  --a-line:rgba(255,255,255,.14);--a-field:rgba(255,255,255,.14);--a-field-on:rgba(255,255,255,.2);
  --a-accent:#DA291C;--a-pill:#191C1F;
  color:var(--a-ink);font-family:var(--sans);letter-spacing:-.011em
}
/* the glow is painted into the background, not blurred over it: a blurred layer bleeds square past a rounded corner */
.auth{background:#020408 radial-gradient(70% 55% at 8% 0%,rgba(88,104,140,.26),transparent 70%) no-repeat}
.auth__card{position:relative;width:100%;max-width:400px;padding:56px 24px 28px;overflow:visible;max-height:100dvh;overflow-y:auto}
.auth__in{position:relative;max-width:352px;margin:0 auto}
.auth__blob{display:none}

.auth__close{
  position:absolute;top:16px;right:16px;z-index:10;width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:rgba(255,255,255,.1);border:0;border-radius:99px;
  font-size:14px;color:var(--a-ink);transition:transform .15s,background .15s
}
.auth__close:hover{background:rgba(255,255,255,.18);transform:scale(1.05)}

.auth__brand{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 36px}
.auth__mark{width:40px;height:40px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.55));--b-eye:var(--a-accent);--b-look-anim:mark-glance;
  animation:auth-breathe 6s ease-in-out infinite}
.auth__wm{display:inline-flex;align-items:center;color:var(--a-ink)}
.auth__wm .wm-svg{height:15px;width:auto;display:block;color:currentColor}
.b-look{transform:translate(var(--b-dx,0px),var(--b-dy,0px));transition:transform .28s cubic-bezier(.2,.7,.2,1);animation:var(--b-look-anim,none) 9s ease-in-out infinite}
@keyframes mark-glance{0%,18%{transform:translate(0,0)}22%,32%{transform:translate(2.6px,-1px)}36%,48%{transform:translate(-2.4px,.6px)}52%,60%{transform:translate(.6px,2.2px)}64%,100%{transform:translate(0,0)}}
@keyframes auth-breathe{0%,100%{transform:scale(1);filter:drop-shadow(0 4px 10px rgba(0,0,0,.55))}50%{transform:scale(1.05);filter:drop-shadow(0 6px 12px rgba(0,0,0,.5)) drop-shadow(0 0 16px rgba(218,41,28,.35))}}
@media (prefers-reduced-motion:reduce){.auth__mark{animation:none}.b-look{animation:none;transition:none}}

.auth__progress{display:flex;gap:6px;margin:0 0 16px}
.auth__progress i{flex:1;height:3px;border-radius:99px;background:rgba(255,255,255,.14)}
.auth__progress i.is-on{background:#fff}

.auth__h{margin:0 0 6px;font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--a-ink);text-align:left}
.auth__sub{margin:0 0 16px;font-size:15px;font-weight:400;line-height:1.4;color:var(--a-ink2);text-align:left}

.auth__form{display:block}
.auth__input{
  display:block;width:100%;height:48px;margin:0 0 10px;padding:0 12px;box-sizing:border-box;
  font:inherit;font-size:15px;color:var(--a-ink);
  background:var(--a-field);border:0;border-radius:12px;
  transition:background .15s,box-shadow .15s
}
.auth__input::placeholder{color:var(--a-ink2)}
.auth__input:focus{outline:none;background:var(--a-field-on);box-shadow:0 0 0 1px rgba(255,255,255,.3)}

.auth__cta{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:44px;
  margin:6px 0 0;border:0;border-radius:9999px;cursor:pointer;
  background:#fff;color:#000;font:inherit;font-size:15px;font-weight:500;
  transition:transform .12s var(--ease),opacity .15s
}
.auth__cta:hover{transform:translateY(-1px)}
.auth__cta:active{transform:none}
.auth__cta:disabled{opacity:.4;cursor:wait;transform:none}

.auth__link{display:block;margin:12px 0 0;width:max-content;font-size:15px;font-weight:400;
  color:var(--a-accent);text-decoration:none;cursor:pointer;background:none;border:0;font-family:inherit}
.auth__link:hover{text-decoration:underline;text-underline-offset:3px}

.auth__or{display:flex;align-items:center;gap:12px;margin:22px 0 18px}
.auth__or i{flex:1;height:1px;background:var(--a-line)}
.auth__or span{font-size:15px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--a-ink)}

/* the passkey, as Revolut's "continue with": a round icon with its label under */
.auth__alt{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:auto;height:auto;
  margin:0 auto;padding:0;border:0;cursor:pointer;background:none;color:var(--a-ink);
  font:inherit;font-size:12px;font-weight:500;transition:transform .12s var(--ease)
}
.auth__alt svg{width:44px;height:44px;padding:12px;box-sizing:border-box;border-radius:50%;background:var(--a-pill);transition:background .15s}
.auth__alt:hover svg{background:#25292E}
.auth__alt:disabled{opacity:.6;cursor:wait}

.auth__foot{margin:22px 0 0;text-align:center;font-size:12px;font-weight:400;color:var(--a-ink2)}
.auth__foot a{display:flex;align-items:center;justify-content:center;height:44px;margin-top:10px;border-radius:9999px;
  background:var(--a-pill);color:var(--a-ink);font-size:15px;font-weight:500;text-decoration:none;transition:background .15s}
.auth__foot a:hover{background:#25292E}
.auth__terms{margin:18px 0 0;text-align:center;font-size:12px;font-weight:400;color:var(--a-ink2);line-height:1.45}
.auth__terms a{color:var(--a-accent);text-decoration:none}
.auth__terms a:hover{text-decoration:underline}
.auth__note{margin:12px 0 0;font-size:14px;line-height:1.5;color:var(--a-ink2)}
.auth__error{margin:10px 0 0;font-size:13px;line-height:1.4;color:#FF7B72;font-weight:500}

/* Above a phone: a card over the blurred page, the lockup left with the text. */
@media (min-width:720px){
  .auth{background:rgba(0,0,0,.6);backdrop-filter:blur(8px)}
  .auth__card{
    max-width:400px;padding:28px 24px 26px;overflow:hidden;border-radius:24px;
    background:var(--a-bg);border:1px solid rgba(255,255,255,.08);
    box-shadow:0 30px 80px rgba(0,0,0,.6);max-height:calc(100dvh - 48px)
  }
  .auth__card{background:var(--a-bg) radial-gradient(75% 60% at 6% -4%,rgba(88,104,140,.28),transparent 70%) no-repeat}
  .auth__brand{justify-content:flex-start;margin-bottom:28px}
  .auth__close{top:14px;right:14px;width:32px;height:32px}
}

.auth[hidden]{display:none}
body.auth-open{overflow:hidden}
/* ── /auth block ── */

/* ── nav, desktop: Tema centres the whole row as one group ───────────────── */
@media (min-width:781px){
  .nav-links{gap:2px;margin-left:clamp(28px,4vw,64px)}
  .nav-signin{margin-left:clamp(24px,8vw,240px)}
  .nav-links{flex-wrap:nowrap}
}

/* ── hero: Tema's cine stage, measured, in Swiss red ─────────────────────── */
.cine{position:relative;isolation:isolate;min-height:100svh;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:calc(78px + env(safe-area-inset-top,0px)) 20px calc(78px + env(safe-area-inset-bottom,0px));
  background:#020207;color:#fff;overflow:hidden}
.cine-bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.cine-vignette{position:absolute;inset:0;background:radial-gradient(82% 82%,transparent 48%,rgba(0,0,0,.55))}
.cine-logo-stage{position:absolute;left:50%;bottom:0;width:100vw;height:0;z-index:0;pointer-events:none;transform:translateX(-50%)}
.cine-logo-trail{position:absolute;left:50%;bottom:-26vh;width:170vw;height:62vh;border-radius:50%;transform:translateX(-50%);
  mix-blend-mode:screen;filter:blur(34px);
  background:radial-gradient(50% 52% at 50% 58%,rgba(218,41,28,.55),rgba(218,41,28,.3) 40%,rgba(255,255,255,.08) 60%,transparent 78%)}
.cine-inner{position:relative;z-index:1;max-width:860px;transform:translateY(1cm)}
@media (max-width:780px){.cine-inner{transform:translateY(.5cm)}}

.cine-pill{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:99px;margin-bottom:26px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(14px);
  font-size:12.5px;font-weight:600;color:rgba(255,255,255,.82);box-shadow:0 0 30px rgba(218,41,28,.25)}
.cine-pill .grad{color:#fff;font-weight:700}
.cine-dot{width:8px;height:8px;border-radius:50%;background:#DA291C;box-shadow:0 0 10px #DA291C;animation:cine-pulse 2s ease-in-out infinite}
.wowpill{position:relative;overflow:hidden;animation:wow-breathe 3.6s ease-in-out infinite}
.wowpill::after{content:"";position:absolute;top:-25%;left:0;width:42%;height:150%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:translateX(-230%) skewX(-16deg);
  animation:wow-shine 5s ease-in-out infinite}

.cine-title{font-family:var(--sans);font-size:clamp(48px,12.5vw,104px);font-weight:900;letter-spacing:-.058em;line-height:.93;
  margin:0 0 22px;color:#fff;text-shadow:0 2px 30px rgba(218,41,28,.35),0 0 90px rgba(255,255,255,.12)}
.cine-grad{display:inline-block;padding-right:.09em;padding-bottom:.14em;margin-bottom:-.14em;color:#DA291C;
  filter:drop-shadow(0 0 26px rgba(218,41,28,.45))}
.cine-sub{font-size:clamp(15px,2.4vw,18px);color:rgba(255,255,255,.66);max-width:540px;margin:0 auto 32px;line-height:1.55;font-weight:500}

.cine-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:34px}
.cine-cta{display:inline-flex;align-items:center;gap:8px;padding:16px 34px;border-radius:15px;font-weight:800;font-size:16px;color:#fff;
  background:#DA291C;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 12px 40px rgba(218,41,28,.55);
  transition:transform .2s,box-shadow .2s;animation:cine-glow 3s ease-in-out infinite}
.cine-cta:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 18px 54px rgba(218,41,28,.72)}
.cine-cta-ghost{display:inline-flex;align-items:center;padding:16px 28px;border-radius:15px;font-weight:700;font-size:16px;color:#fff;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(14px);transition:background .2s,border-color .2s}
.cine-cta-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3)}

.hstat{margin-top:38px;display:flex;flex-direction:column;align-items:center;gap:16px}
.hstat-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px}
.hstat-cell{min-width:96px;padding:12px 16px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(12px);display:flex;flex-direction:column;align-items:center;gap:3px}
.hstat-cell b{font-size:22px;font-weight:900;letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums;line-height:1.1}
.hstat-cell span{font-size:11.5px;font-weight:600;color:rgba(255,255,255,.55);white-space:nowrap}
.snakepill{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;padding:10px 22px;border-radius:999px;
  font-size:13px;font-weight:750;letter-spacing:-.01em;background:rgba(255,255,255,.04);backdrop-filter:blur(14px)}
.snakepill-txt{position:relative;z-index:1;color:#fff}
@property --snake{syntax:"<angle>";inherits:false;initial-value:0deg}
.snakepill::before,.snakepill::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:conic-gradient(from var(--snake),transparent 0deg,transparent 264deg,rgba(218,41,28,.55) 300deg,#DA291C 328deg,#fff 344deg,#DA291C 353deg,transparent 1turn);
  -webkit-mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:snake-run 3.6s linear infinite}
.snakepill::before{z-index:-1}.snakepill::after{z-index:-2;filter:blur(6px);opacity:.85}
.cine-scroll{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.5);font-size:20px;animation:cine-bob 2.2s ease-in-out infinite}

/* the rise on load, staggered as Tema's */
.cine-js .cine-inner:not(.cine-go) > :nth-child(n+2){opacity:0}
.cine-js .cine-logo-hero:not(.cine-go) .cine-logo-stage{opacity:0}
@media (prefers-reduced-motion:no-preference){
  .cine-inner.cine-go > :nth-child(n+2){animation:cine-rise 1s cubic-bezier(.2,.7,.2,1) both}
  .cine-inner.cine-go > :nth-child(2){animation-delay:.12s}
  .cine-inner.cine-go > :nth-child(3){animation-delay:.3s}
  .cine-inner.cine-go > :nth-child(4){animation-delay:.48s}
  .cine-inner.cine-go > :nth-child(5){animation-delay:.66s}
  .cine-logo-hero.cine-go .cine-logo-stage{animation:logo-rise 1.4s cubic-bezier(.2,.7,.2,1) both}
}
@media (prefers-reduced-motion:reduce){
  .cine-inner.cine-go > :nth-child(n+2),.cine-logo-hero.cine-go .cine-logo-stage{animation:cine-fade 1.1s ease both!important}
}
@keyframes cine-rise{0%{opacity:0;transform:translateY(22px)}100%{opacity:1;transform:translateY(0)}}
@keyframes cine-fade{0%{opacity:0}100%{opacity:1}}
@keyframes logo-rise{0%{opacity:0;transform:translateX(-50%) translateY(18vh)}100%{opacity:1;transform:translateX(-50%) translateY(0)}}
@keyframes wow-shine{0%{transform:translateX(-230%) skewX(-16deg)}28%,100%{transform:translateX(380%) skewX(-16deg)}}
@keyframes wow-breathe{0%,100%{box-shadow:0 0 0 1px rgba(255,255,255,.05),0 8px 26px rgba(218,41,28,.26)}50%{box-shadow:0 0 0 1px rgba(255,255,255,.14),0 8px 46px rgba(218,41,28,.6),0 0 64px rgba(255,255,255,.12)}}
@keyframes cine-glow{0%,100%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 12px 40px rgba(218,41,28,.5)}50%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 14px 52px rgba(218,41,28,.78)}}
@keyframes cine-pulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes cine-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes snake-run{100%{--snake:360deg}}
/* the hero is full-bleed under the fixed bar, so the body offset would double it */
body:has(.cine-logo-hero){padding-top:0}

/* ── the bar over the dark hero, in light mode ───────────────────────────────
   The hero is always near-black, so in the light theme a black-ink bar sat on
   it unreadable. Tema does what follows: while the bar is over the dark hero
   and not scrolled or open, it borrows the dark theme's ink; once it sticks,
   it takes the page theme's glass. */
body:has(.cine-logo-hero) .nav:not(.is-stuck):not(.open){
  --ink:#fff;--muted:rgba(255,255,255,.74);--line:rgba(255,255,255,.18);--line-2:rgba(255,255,255,.1);
  color:#fff}
body:has(.cine-logo-hero) .nav:not(.is-stuck):not(.open) .nav-signin{background:rgba(255,255,255,.06)}
body:has(.cine-logo-hero) .nav:not(.is-stuck):not(.open) .nav-link:hover,
body:has(.cine-logo-hero) .nav:not(.is-stuck):not(.open) .nav-link.is-on{background:rgba(255,255,255,.12)}

/* ── no sideways movement on a phone ─────────────────────────────────────────
   iOS Safari ignores overflow-x on <body> alone: the page can still pan
   sideways if anything pokes past the edge, and the hero's 170vw glow and its
   100vw stage are exactly that kind of thing. `clip` rather than `hidden`, so
   no scroll container is created and position:sticky keeps working. */
html,body{overflow-x:clip;overscroll-behavior-x:none}
.cine,.cine-bg{overflow:clip}
.cine-logo-stage{width:100%}

/* The skip-anchor before the hero is an empty inline <a>; it was rendering as
   a 26px line of nothing, and in light mode the white body showed through that
   strip. And the unstuck bar had a leftover blur that turned the strip grey. */
#top{display:block;height:0;overflow:hidden}
.nav:not(.is-stuck):not(.open){backdrop-filter:none;-webkit-backdrop-filter:none}

/* The sprite is markup, not a picture: it holds the <symbol> every <use>
   points at, and it must take no space. Its inline style went for the CSP,
   and without positioning an inline <svg> at the top of <body> renders as an
   empty 26px line above the hero — white in light mode. */
svg.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* the line under a price: the yearly rate, or what is included */

/* ── home: Tema's sections after the hero, measured ───────────────────────────
   temaschool.netlify.app runs hero → agent stage → course grid → plans →
   CTA band → footer. Zuger runs hero → agent stage → roster grid → one run →
   plans → CTA band → footer. Values below are Tema's (radii 20/30, 46px card
   icons, 44px plan icons, 30/900 amounts, 12.5px footnotes); colour is the
   site's Swiss set, and the only things that move are the pills' dots and
   the reveal on scroll. The stage and the band are dark in both themes, as
   the hero is. */
.tsec{max-width:1060px;margin:0 auto;padding:48px 16px}
.tsec-h{font-size:clamp(24px,6.5vw,34px);font-weight:900;letter-spacing:-.04em;line-height:1.08;text-align:center;margin:0 0 10px;text-wrap:balance}
.tsec-h .grad,.grad{color:var(--zug)}
.tsec-sub{font-size:15.5px;color:var(--muted);max-width:560px;margin:0 auto 28px;text-align:center;line-height:1.55;font-weight:500;text-wrap:balance}
.tsec-note{font-size:12.5px;color:var(--faint);text-align:center;margin:22px auto 0;max-width:560px;line-height:1.6}
.tsec-note a{color:var(--ink);font-weight:600}

/* the agent stage */
.ag-stage{position:relative;isolation:isolate;overflow:hidden;color:#fff;padding:clamp(118px,15vw,180px) 20px clamp(96px,14vw,150px);
  background:radial-gradient(60% 48% at 50% 39%,rgba(218,41,28,.34),rgba(218,41,28,.08) 44%,transparent 66%),linear-gradient(180deg,#020207,#070707 56%,#050505)}
.ag-stage::before,.ag-stage::after{content:"";position:absolute;left:0;right:0;z-index:0;pointer-events:none}
.ag-stage::before{top:0;height:clamp(150px,22vw,240px);background:linear-gradient(180deg,#020207,rgba(2,2,7,.86) 26%,transparent)}
.ag-stage::after{bottom:0;height:150px;background:linear-gradient(180deg,transparent,var(--bg))}
.ag-inner{position:relative;z-index:1;max-width:1080px;margin:0 auto;text-align:center}
.ag-pill{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:99px;margin-bottom:22px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);font-size:12.5px;font-weight:700;letter-spacing:-.01em;color:rgba(255,255,255,.9);backdrop-filter:blur(14px)}
.ag-dot{width:8px;height:8px;border-radius:50%;background:#DA291C;box-shadow:0 0 0 4px rgba(218,41,28,.18),0 0 12px #DA291C;animation:cine-pulse 2s ease-in-out infinite}
.ag-title{font-size:clamp(32px,7vw,60px);font-weight:900;letter-spacing:-.05em;line-height:1.02;margin:0 0 16px;color:#fff;text-wrap:balance}
.ag-sub{font-size:clamp(15px,2.5vw,18px);color:rgba(255,255,255,.66);max-width:560px;margin:0 auto;line-height:1.55;font-weight:500;text-wrap:balance}
/* The core: the mark alone, big, alive. No ring — the head floats over a
   breathing red halo with two pips in orbit (one white, one red: the on-shift
   pip from the console), a red sheen sweeps the head, the eyes look about and
   blink, a tiny glint keeps them wet, and the whole thing tilts a few degrees
   toward the pointer (script.js, hover devices only). Transform and opacity
   only; everything stops under prefers-reduced-motion. */
.ag-core{position:relative;width:clamp(230px,46vw,330px);aspect-ratio:1;margin:clamp(40px,7vw,64px) auto clamp(6px,2vw,14px);display:grid;place-items:center;perspective:900px}
.ag-halo{position:absolute;inset:-22%;border-radius:50%;background:radial-gradient(circle,rgba(218,41,28,.5),rgba(218,41,28,.12) 45%,transparent 65%);filter:blur(34px);animation:ag-breathe 5.5s ease-in-out infinite}
.ag-orbit{position:absolute;inset:-6%;border-radius:50%;pointer-events:none}
.ag-orbit i{position:absolute;top:-4px;left:50%;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:#fff;box-shadow:0 0 14px rgba(255,255,255,.9)}
.ag-orbit--1{animation:ag-spin 26s linear infinite}
.ag-orbit--2{inset:4%;animation:ag-spin 17s linear infinite reverse}
.ag-orbit--2 i{width:7px;height:7px;margin-left:-3.5px;background:#DA291C;box-shadow:0 0 0 4px rgba(218,41,28,.18),0 0 14px #DA291C}
.ag-tilt{position:relative;width:72%;aspect-ratio:1;transform-style:preserve-3d;transition:transform .35s var(--ease);will-change:transform}
.ag-float{width:100%;height:100%;animation:ag-bob 7s ease-in-out infinite}
.ag-mark{display:block;width:100%;height:100%;overflow:visible;shape-rendering:geometricPrecision;filter:drop-shadow(0 26px 40px rgba(0,0,0,.6)) drop-shadow(0 0 30px rgba(218,41,28,.35))}
.ag-core.in .ag-mark{animation:ag-enter 1.1s cubic-bezier(.34,1.5,.4,1) both}
.ag-head{fill:#fff}
.ag-shine{animation:ag-sheen 6.5s cubic-bezier(.6,0,.2,1) infinite}
.ag-eyes{fill:#DA291C;transform-box:fill-box;transform-origin:center;animation:ag-look 9s ease-in-out infinite}
.ag-eye{transform-box:fill-box;transform-origin:center;animation:b-blink 7s -1.4s infinite}
.ag-eye--r{animation-delay:-1.4s}
.ag-ground{position:absolute;bottom:2%;left:50%;width:46%;height:8%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.7),transparent);filter:blur(6px);animation:ag-ground 7s ease-in-out infinite}
.ag-beam{position:absolute;inset:-30%;border-radius:50%;z-index:-1;opacity:.55;mix-blend-mode:screen;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(218,41,28,.35) 40deg,transparent 95deg,transparent 200deg,rgba(255,255,255,.14) 250deg,transparent 300deg);
  -webkit-mask-image:radial-gradient(closest-side,#000 20%,transparent 72%);mask-image:radial-gradient(closest-side,#000 20%,transparent 72%);
  animation:ag-spin 22s linear infinite}
.ag-ping{position:absolute;inset:14%;border-radius:38%;border:1.5px solid rgba(218,41,28,.7);opacity:0;pointer-events:none;animation:ag-ping 4.6s cubic-bezier(.2,.7,.2,1) infinite}
.ag-ping--2{animation-delay:2.3s;border-color:rgba(255,255,255,.45)}
.ag-sparks{position:absolute;inset:0;pointer-events:none}
.ag-sparks i{position:absolute;bottom:22%;left:var(--x);width:4px;height:4px;border-radius:50%;background:#fff;opacity:0;box-shadow:0 0 8px rgba(255,255,255,.9);animation:ag-spark var(--t,6s) var(--s,0s) ease-out infinite}
.ag-sparks i:nth-child(1){--x:18%;--t:5.5s;--s:0s}
.ag-sparks i:nth-child(2){--x:31%;--t:7s;--s:1.6s;background:#DA291C;box-shadow:0 0 8px #DA291C}
.ag-sparks i:nth-child(3){--x:47%;--t:6.2s;--s:.7s}
.ag-sparks i:nth-child(4){--x:62%;--t:8s;--s:2.8s;width:3px;height:3px}
.ag-sparks i:nth-child(5){--x:74%;--t:5.8s;--s:3.9s;background:#DA291C;box-shadow:0 0 8px #DA291C}
.ag-sparks i:nth-child(6){--x:85%;--t:7.4s;--s:1.1s;width:3px;height:3px}
.ag-sparks i:nth-child(7){--x:8%;--t:6.6s;--s:4.6s}
@keyframes ag-ping{0%{transform:scale(.9);opacity:0}12%{opacity:.9}100%{transform:scale(1.7);opacity:0}}
@keyframes ag-spark{0%{transform:translateY(0) scale(.4);opacity:0}15%{opacity:1}100%{transform:translateY(-130%) translateY(-120px) scale(1);opacity:0}}
@keyframes ag-bob{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-4.5%) rotate(1.5deg)}}
@keyframes ag-ground{0%,100%{transform:translateX(-50%) scaleX(1);opacity:.9}50%{transform:translateX(-50%) scaleX(.78);opacity:.5}}
@keyframes ag-breathe{0%,100%{transform:scale(.92);opacity:.75}50%{transform:scale(1.08);opacity:1}}
@keyframes ag-spin{to{transform:rotate(360deg)}}
@keyframes ag-enter{0%{transform:scale(.4) rotate(-14deg);opacity:0}60%{opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes ag-sheen{0%,55%{transform:translateX(0)}100%{transform:translateX(140px)}}
@keyframes ag-look{0%,22%{transform:translateX(0)}28%,42%{transform:translateX(2.6px)}48%,64%{transform:translateX(-2.6px)}70%,100%{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){
  .ag-halo,.ag-orbit,.ag-float,.ag-shine,.ag-eyes,.ag-eye,.ag-ground,.ag-beam,.ag-ping,.ag-sparks i,.ag-core.in .ag-mark{animation:none}
  .ag-ping,.ag-sparks{display:none}
  .ag-tilt{transition:none}
}

.ag-grid-label{margin:clamp(36px,6vw,56px) 0 18px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.ag-cards{display:grid;grid-template-columns:1fr;gap:14px;max-width:980px;margin:0 auto;text-align:left}
@media (min-width:680px){.ag-cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.ag-cards{grid-template-columns:repeat(3,1fr)}}
.ag-card{padding:22px 22px 24px;border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.1);
  transition:transform .25s cubic-bezier(.2,.7,.2,1),border-color .25s,box-shadow .25s}
.ag-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.28);box-shadow:0 18px 50px rgba(0,0,0,.45)}
.ag-ic{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;background:#fff;color:#0A0A0A;box-shadow:0 8px 22px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.35)}
.ag-ic svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ag-card h3{font-size:17px;font-weight:850;letter-spacing:-.02em;margin:0 0 7px;color:#fff}
.ag-card p{font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.64);font-weight:450;margin:0}

/* the roster grid — Tema's course cards */
.rc-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:760px){.rc-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:1fr}}
.rc-link{display:flex;color:inherit}
.rc{flex:1;display:flex;flex-direction:column;padding:24px;border-radius:20px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh);
  transition:transform .25s cubic-bezier(.2,.7,.2,1),border-color .25s}
.rc-link:hover .rc{transform:translateY(-3px);border-color:var(--muted)}
.rc-head{display:flex;align-items:center;gap:18px;margin-bottom:14px}
/* The roster cards carry the mark itself, big and bare — no tile behind it. */
.rc-icon{width:76px;height:76px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--ink)}
.rc-icon .bot{width:76px;height:76px;filter:drop-shadow(0 8px 18px rgba(0,0,0,.35))}
:root[data-zt="light"] .rc-icon .bot{filter:drop-shadow(0 8px 18px rgba(10,10,10,.18))}
.rc-icon--you{color:var(--zug)}
.rc-icon--you svg{width:60px;height:60px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.rc-kicker{display:block;font-size:10.5px;color:var(--faint);letter-spacing:.12em;margin-bottom:3px}
.rc-title{font-size:18px;font-weight:900;letter-spacing:-.02em;display:flex;align-items:center;flex-wrap:wrap}
.rc-tier{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:800;padding:2px 7px;border-radius:99px;text-transform:uppercase;letter-spacing:.06em;margin-left:7px;white-space:nowrap;
  color:var(--muted);background:var(--bg-2);border:1px solid var(--line)}
.rc-tier--live{color:var(--ink);border-color:var(--ink)}
.rc-tier--live i{width:6px;height:6px;border-radius:50%;background:#DA291C}
.rc-blurb{font-size:16px;color:var(--ink-2);line-height:1.6;margin:0 0 13px;flex:1}
.rc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.rc-list li{display:flex;gap:9px;font-size:15px;color:var(--muted);line-height:1.5}
.rc-list li::before{content:"✓";color:var(--ink);font-weight:900;flex-shrink:0}
.rc--you{border-color:var(--ink)}

/* one run: the console showpiece, without its old hero wrapper */
.tsec--run{max-width:1060px}
.run-stage{position:relative;margin-top:6px}
.run-stage .console{margin:0 auto}

/* plans — Tema's */
.pp-grid{display:grid;grid-template-columns:1fr;gap:16px;max-width:1060px;margin:0 auto}
@media (min-width:720px){.pp-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:1fr}}
@media (min-width:1040px){.pp-grid{grid-template-columns:repeat(4,1fr)}}
.pp{position:relative;display:flex;flex-direction:column;padding:24px 20px;border-radius:20px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh)}
.pp-hi{border-color:var(--ink)}
.pp-badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);padding:3px 12px;border-radius:99px;background:var(--zug);color:#fff;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.pp-icon{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;background:var(--ink);color:var(--bg)}
.pp-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pp-name{font-size:19px;font-weight:900;letter-spacing:-.02em}
.pp-price{display:flex;align-items:baseline;gap:4px;margin:6px 0 2px}
.pp-amount{font-size:30px;font-weight:900;letter-spacing:-.03em}
.pp-period{font-size:14px;color:var(--faint);font-weight:600}
.pp-tag{font-size:14.5px;color:var(--ink-2);font-weight:600;margin-bottom:14px}
.pp-features{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:10px;flex:1}
.pp-features li{display:flex;gap:9px;font-size:15px;color:var(--muted);line-height:1.5}
.pp-features li::before{content:"✓";color:var(--ink);font-weight:900;flex-shrink:0}
.pp-cta{display:block;text-align:center;padding:14px 24px;border-radius:14px;font-size:15px;font-weight:700;transition:transform .15s,background .15s}
.pp-cta--glass{color:var(--ink);background:var(--bg-2);border:1px solid var(--line)}
.pp-cta--glass:hover{border-color:var(--muted)}
.pp-cta--solid{color:var(--bg);background:var(--ink)}
.pp-cta:hover{transform:translateY(-1px)}
.pp-sub{font-size:12.5px;color:var(--faint);text-align:center;margin-top:10px}

/* the CTA band */
.ctaband{max-width:1100px;margin:76px auto;padding:0 16px}
.ctaband-inner{position:relative;isolation:isolate;overflow:hidden;border-radius:30px;text-align:center;padding:clamp(48px,8vw,76px) 24px;color:#fff;
  background:radial-gradient(120% 130% at 50% -20%,#2a0c0a 0,#0d0808 52%,#050505 100%);border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 90px rgba(218,41,28,.18)}
.ctaband-inner::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(42% 60% at 12% 112%,rgba(218,41,28,.28),transparent 70%),radial-gradient(42% 60% at 88% 112%,rgba(255,255,255,.08),transparent 70%)}
.ctaband-inner>.cine-pill{margin-bottom:18px}
.ctaband-title{font-size:clamp(28px,6vw,46px);font-weight:900;letter-spacing:-.045em;color:#fff;line-height:1.04;margin:0 0 14px;text-wrap:balance}
.ctaband-sub{font-size:clamp(14px,2.4vw,17px);color:rgba(255,255,255,.66);max-width:480px;margin:0 auto 30px;line-height:1.55;font-weight:500}
.ctaband .cine-ctas{margin-bottom:0}
@media (prefers-reduced-motion:reduce){.ag-dot,.ag-card,.rc,.pp-cta{animation:none;transition:none}}

/* ── every other page, in the home's language ─────────────────────────────────
   The home is Tema's: centred 900-weight headings, glass cards at radius 20,
   16/800 CTAs at radius 15, the dark rounded band to close. This layer
   restyles the shared components every generated page is built from —
   hero, section head, cards, steps, tables, FAQ, roles, notices, buttons —
   so all 23 pages read as the same site as the home. */
.phero{padding:calc(72px + 44px) 0 30px;text-align:center}
.phero .wrap{max-width:860px}
.phero .aurora .a1{margin-left:-520px}
.phero .aurora .a2{margin-left:-160px}
.pagepill{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 11px;border-radius:99px;margin-bottom:18px;
  font-size:10.5px;letter-spacing:.14em;color:var(--ink);background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh)}
.ptitle{font-family:var(--sans);font-size:clamp(34px,6.6vw,62px);font-weight:900;letter-spacing:-.045em;line-height:1.05;margin:0 0 16px;text-wrap:balance}
.ptitle .grad{color:var(--zug)}
.psub{font-size:clamp(15px,2.4vw,18px);color:var(--muted);max-width:580px;margin:0 auto;line-height:1.55;font-weight:500;text-wrap:balance}
.phero .hero__cta{justify-content:center;margin-top:28px}
.phero .botline{justify-content:center;margin-top:34px}
.phero .crumb{justify-content:center}
.phero .ahero{display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.phero .lede--l{text-align:center;margin:0 auto}
.sec{padding:64px 0}
.sec--tight{padding:0 0 22px}
.sec__hd{margin:0 auto 32px;max-width:720px;text-align:center}
.h2{font-size:clamp(26px,4.6vw,40px);font-weight:900;letter-spacing:-.04em;line-height:1.06;margin:0 0 12px;text-wrap:balance}
.eyebrow{font-size:10.5px;letter-spacing:.14em;margin:0 0 14px}
.sec__sub{margin:0 auto;font-size:15.5px;font-weight:500;max-width:560px;text-wrap:balance}
.btn{border-radius:15px;font-weight:800;font-size:15px;letter-spacing:-.01em}
.btn--lg{height:auto;padding:16px 34px;font-size:16px}
.btn--solid{background:#DA291C;color:#fff;box-shadow:0 12px 30px rgba(218,41,28,.35)}
.btn--solid:hover{background:#C4241A;box-shadow:0 16px 36px rgba(218,41,28,.42);transform:translateY(-1px)}
:root[data-zt="light"] .btn--solid{box-shadow:0 12px 30px rgba(218,41,28,.28)}
.btn--glass{background:var(--surface);border-color:var(--line);color:var(--ink);box-shadow:var(--sh);backdrop-filter:none}
.btn--glass:hover{background:var(--surface);border-color:var(--muted);transform:translateY(-1px)}
:root[data-zt="light"] .btn--glass,:root[data-zt="light"] .btn--glass:hover{background:var(--surface)}
.grid3,.grid2,.agrid,.rels{gap:16px}
.card2,.acard,.rel,.markbox,.notice,.tablewrap,.role,.lockup{border-radius:20px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh)}
.card2{padding:24px}
.card2 h3,.acard h3{font-size:18px;font-weight:900;letter-spacing:-.02em;margin:0 0 8px}
.card2 p,.acard__d{font-size:15px;color:var(--muted);line-height:1.6}
.card2:hover,.acard:hover,.rel:hover{transform:translateY(-3px);border-color:var(--muted)}
.card2__k,.acard__k{color:var(--faint);letter-spacing:.12em}
.steps{gap:14px}
.steps li{grid-template-columns:44px 1fr;gap:18px;padding:22px 24px;border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:var(--sh)}
.steps li:last-child{border-bottom:1px solid var(--line)}
.step__n{width:44px;height:44px;border-radius:13px;background:var(--ink);color:var(--bg);display:grid;place-items:center;font-size:12px;padding:0;letter-spacing:.06em}
.steps h3{font-size:18px;font-weight:900;letter-spacing:-.02em}
.steps p{font-size:15px}
.faq{display:grid;gap:12px}
.faq details{border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:var(--sh);padding:0 22px}
.faq summary{font-size:17px;font-weight:800;letter-spacing:-.02em;padding:20px 40px 20px 0}
.faq details p{margin:0;padding-bottom:20px}
.faq details[open] summary{color:var(--ink)}
.matrix th{padding:16px 22px}
.matrix td{padding:15px 22px}
.role{padding:24px;margin-bottom:14px;border-top:1px solid var(--line)}
.role:last-of-type{border-bottom:1px solid var(--line)}
.role h3{font-size:18px;font-weight:900}
.notice{padding:22px 24px}
.notice--legal,:root[data-zt="light"] .notice--legal{background:var(--surface)}
.tablewrap,:root[data-zt="light"] .tablewrap{background:var(--surface)}
.badge,.road{background:var(--zug);color:#fff}
.quote{border-left-color:var(--zug)}
.prose h2{font-weight:800;letter-spacing:-.03em}
.split{gap:32px}

.rtab.is-on{border-bottom-color:var(--zug)}
.ctaband{margin-top:24px}
@media (max-width:720px){
  .phero{padding:calc(72px + 28px) 0 20px}
  .sec{padding:44px 0}
  .btn--lg{width:100%}
  .steps li{grid-template-columns:44px 1fr;gap:14px}
}

/* ── the console, as it is now: a messenger ───────────────────────────────────
   Mirrors apps/console: a sidebar of contacts and threads, a pane of bubbles
   grouped under a red sender name, a composer at the foot. Site tokens, so it
   reads in both themes. */
.console.ms{display:grid;grid-template-columns:236px 1fr;border-radius:20px;overflow:hidden;max-width:960px;margin:0 auto;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-l)}
.console.ms.ms--solo{grid-template-columns:1fr;max-width:720px}
.ms-side{background:var(--bg-2);border-right:1px solid var(--line-2);padding:0 8px 10px;font-size:12.5px;text-align:left}
.ms-top{display:flex;align-items:center;justify-content:space-between;padding:14px 8px 8px}
.ms-top .rail__lamps{margin:0}
.ms-plus{color:var(--muted);font-size:18px;line-height:1}
.ms-search{display:flex;align-items:center;gap:7px;margin:0 2px 8px;padding:0 10px;height:30px;border-radius:9px;background:rgba(127,127,127,.12);color:var(--faint);font-size:13px}
.ms-search svg{width:14px;height:14px}
.ms-head{margin:10px 8px 4px;font-size:9.5px;color:var(--faint);letter-spacing:.06em}
.ms-row{position:relative;display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:10px;color:var(--ink)}
.ms-row.is-on{background:var(--surface-2)}
.ms-body{flex:1;min-width:0;display:flex;flex-direction:column}
.ms-line{display:flex;align-items:center;gap:5px;min-width:0}
.ms-name{font-size:12.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-tag{flex:none;font-size:8.5px;font-weight:600;padding:2px 5px;border-radius:5px;background:rgba(127,127,127,.14);color:var(--muted);white-space:nowrap}
.ms-time{margin-left:auto;flex:none;font-size:9.5px;color:var(--faint)}
.ms-prev{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-dot{position:absolute;right:9px;bottom:10px;width:6px;height:6px;border-radius:50%;background:var(--zug)}
/* Bare marks, no tile behind them: the mark is the avatar. */
.ms-tile{flex:none;width:38px;height:38px;display:grid;place-items:center}
.ms-tile .bot{width:38px;height:38px;filter:drop-shadow(0 3px 8px rgba(0,0,0,.35))}
.ms-tile--xs{width:30px;height:30px}
.ms-tile--xs .bot{width:30px;height:30px}
.ms-stack{flex:none;width:38px;height:38px;display:grid;grid-template-columns:1fr 1fr;place-items:center;gap:1px}
.ms-stack .bot{width:16px;height:16px;filter:none}
.ms-stack .bot:nth-child(3){grid-column:1/-1}
.ms-foot{display:flex;align-items:center;gap:9px;margin-top:10px;padding:10px 9px 0;border-top:1px solid var(--line-2)}
.ms-me{width:26px;height:26px;border-radius:50%;background:var(--zug);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center}
.ms-pane{min-width:0;display:flex;flex-direction:column;text-align:left}
.ms-bar{display:flex;align-items:center;gap:9px;padding:12px 16px;border-bottom:1px solid var(--line-2);font-size:14px}
.ms-bar strong{font-weight:600}
.ms-thread{position:relative;padding:16px 18px 20px;display:flex;flex-direction:column;gap:10px;max-height:560px;overflow:hidden}
.ms-thread::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70px;background:linear-gradient(transparent,var(--surface));pointer-events:none}
.ms-day{text-align:center;font-size:10px;color:var(--faint);margin:0 0 4px}
.ms-grp{display:flex;flex-direction:column}
.ms-who{margin:0 0 4px 32px;font-size:11.5px;font-weight:600;color:var(--zug)}
.ms-grow{display:flex;align-items:flex-end;gap:8px}
.ms-msgs{display:flex;flex-direction:column;gap:6px;min-width:0;max-width:86%}
.ms-grp--you{align-items:flex-end}
.ms-grp--you .ms-msgs{max-width:76%}
.ms-msg{padding:9px 13px;border-radius:15px;background:var(--bg-2);border:1px solid var(--line-2);font-size:14px;line-height:1.45;color:var(--ink)}
.ms-grp--you .ms-msg{background:var(--surface-2)}
:root[data-zt="dark"] .ms-msg{background:#1C1C1E}
:root[data-zt="dark"] .ms-grp--you .ms-msg{background:#3A3A3C}
.ms-meta{display:block;margin-top:2px;font-size:11px;color:var(--muted)}
.ms-step--gated::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--zug);margin-right:7px;vertical-align:1px}
.ms-msg--card{padding:0;background:none!important;border:0}
.ms-card{border:1px solid var(--line);border-radius:15px;padding:13px 15px;background:var(--bg-2)}
:root[data-zt="dark"] .ms-card{background:#1C1C1E}
.ms-card__hd{display:flex;align-items:center;gap:9px;margin-bottom:8px;font-size:14px}
.ms-card__hd .chip{margin-left:auto}
.ms-card p{margin:0;font-size:13.5px;color:var(--ink-2)}
.ms-kv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:10px 0 0;font-size:13px;color:var(--muted)}
.ms-kv .mono{text-align:right;color:var(--ink);font-size:12px}
.ms-card .ms-stance{margin:10px 0 0;padding:9px 11px;border-radius:10px;background:var(--surface-2);font-size:12.5px;color:var(--muted)}
.ms-stance b{color:var(--ink);font-weight:600}
.ms-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.ms-btn{display:block;text-align:center;padding:9px 0;border-radius:99px;border:1px solid var(--line);font-size:13.5px;font-weight:500;color:var(--claret)}
.ms-btn--go{background:var(--ink);color:var(--bg);border-color:transparent;font-weight:600}
.ms-composer{display:flex;align-items:center;gap:9px;padding:10px 14px 12px;border-top:1px solid var(--line-2)}
.ms-composer .ms-plus,.ms-mic{width:28px;height:28px;border-radius:50%;background:rgba(127,127,127,.14);display:grid;place-items:center;color:var(--muted);font-size:17px}
.ms-mic svg{width:15px;height:15px}
.ms-in{flex:1;height:36px;padding:0 14px;border-radius:18px;border:1px solid var(--line);background:var(--bg-2);color:var(--faint);font-size:13.5px;display:flex;align-items:center}
@media (max-width:780px){
  .console.ms,.console.ms.ms--solo{grid-template-columns:1fr}
  .ms-side{display:none}
  .ms-msgs{max-width:92%}
}

/* ── about ────────────────────────────────────────────────────────────────── */
.manifesto{margin:0 auto;max-width:900px;text-align:center;padding:10px 0 0}
.manifesto p{margin:0 0 18px;font-size:clamp(24px,3.6vw,40px);font-weight:900;letter-spacing:-.04em;line-height:1.14;text-wrap:balance}
.manifesto footer{font-size:10px;letter-spacing:.14em;color:var(--faint)}
.peaks{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.peak{padding:22px 20px;border-radius:20px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh);
  display:flex;flex-direction:column;gap:5px;transition:transform .25s cubic-bezier(.2,.7,.2,1),border-color .25s}
.peak:hover{transform:translateY(-3px);border-color:var(--muted)}
/* The peaks and the shelf carry the bare mark, big, no tile. */
.peak__tile{width:64px;height:64px;display:grid;place-items:center;color:var(--ink);margin-bottom:8px}
.peak__tile .bot{width:64px;height:64px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.35))}
:root[data-zt="light"] .peak__tile .bot{filter:drop-shadow(0 6px 14px rgba(10,10,10,.18))}
.peak b{font-size:19px;font-weight:900;letter-spacing:-.02em}
.peak__role{font-size:9.5px;color:var(--faint);letter-spacing:.12em}
.peak p{margin:4px 0 0;font-size:14px;line-height:1.5;color:var(--muted)}
@media (max-width:980px){.peaks{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.peaks{grid-template-columns:1fr}}

/* ── marketplace shelf ────────────────────────────────────────────────────── */
.mkt{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.mkt__card{display:flex;flex-direction:column;gap:6px;padding:22px 20px;border-radius:20px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh);
  transition:transform .25s cubic-bezier(.2,.7,.2,1),border-color .25s}
.mkt__card:hover{transform:translateY(-3px);border-color:var(--muted)}
.mkt__hd{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:6px}
.mkt__hd .peak__tile{margin:0}
.mkt__card b{font-size:17px;font-weight:900;letter-spacing:-.02em;line-height:1.2}
.mkt__card p{margin:2px 0 0;font-size:14px;line-height:1.5;color:var(--muted);flex:1}
.mkt__ft{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding-top:12px;border-top:1px solid var(--line-2)}
.mkt__price{font-size:15px;font-weight:800}
.mkt__go{font-size:13px;font-weight:700;color:var(--zug)}
.tag{font-size:9.5px;font-weight:600;letter-spacing:.02em;padding:3px 7px;border-radius:6px;background:rgba(127,127,127,.14);color:var(--muted)}
@media (max-width:980px){.mkt{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.mkt{grid-template-columns:1fr}}

/* ── about: the stage and the founder ─────────────────────────────────────── */
.ag-stage--about{margin-top:10px}
.ag-title--manifesto{font-size:clamp(24px,3.6vw,42px);letter-spacing:-.04em;line-height:1.14;max-width:900px;margin:0 auto 16px;text-wrap:balance}
.founder{display:flex;gap:26px;align-items:flex-start;max-width:760px;margin:0 auto;padding:30px 32px;border-radius:24px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh)}
.founder__ava{flex:none;width:84px;height:84px;border-radius:26px;display:grid;place-items:center;background:var(--ink);color:var(--bg);font-size:38px;font-weight:900;letter-spacing:-.04em}
.founder__ava::after{content:"";position:absolute}
.founder__body{display:flex;flex-direction:column;gap:6px;min-width:0}
.founder__body b{font-size:24px;font-weight:900;letter-spacing:-.03em;line-height:1.1}
.founder__role{font-size:10px;color:var(--faint);letter-spacing:.14em}
.founder__body p{margin:6px 0 0;font-size:15.5px;line-height:1.6;color:var(--muted)}
.founder__where{color:var(--ink)!important;font-weight:600;font-size:14px!important}
@media (max-width:600px){.founder{flex-direction:column;padding:24px 22px}.founder__ava{width:64px;height:64px;border-radius:20px;font-size:28px}}

/* ── status ───────────────────────────────────────────────────────────────── */
.statusbox{max-width:640px;margin:26px auto 0;padding:24px 26px;border-radius:20px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh);text-align:left}
.statusbox__sum{margin:0 0 14px;font-size:17px;font-weight:700;letter-spacing:-.02em}
.statusbox__list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.statusbox__list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:12px;background:var(--bg-2);border:1px solid var(--line-2);font-size:15px}
.statusbox__list li span{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.statusbox__list li span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--muted)}
.statusbox__list li[data-state="operational"] span{color:var(--moss)}
.statusbox__list li[data-state="operational"] span::before{background:var(--moss);box-shadow:0 0 10px var(--moss)}
.statusbox__list li[data-state="degraded"] span{color:#E3B341}
.statusbox__list li[data-state="degraded"] span::before{background:#E3B341}
.statusbox__list li[data-state="down"] span{color:var(--zug)}
.statusbox__list li[data-state="down"] span::before{background:var(--zug);box-shadow:0 0 10px var(--zug)}
.statusbox__at{margin:14px 0 0;font-size:10px;color:var(--faint);letter-spacing:.1em}

/* ── about: three cities ──────────────────────────────────────────────────── */
.cities{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.city{position:relative;display:flex;flex-direction:column;gap:6px;padding:28px 26px 26px;border-radius:20px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh);overflow:hidden;
  transition:transform .25s cubic-bezier(.2,.7,.2,1),border-color .25s}
.city:hover{transform:translateY(-3px);border-color:var(--muted)}
.city::before{content:"";position:absolute;inset:auto -30% -50% auto;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(218,41,28,.22),transparent 65%);filter:blur(20px);pointer-events:none}
.city__tz{font-size:10px;color:var(--faint);letter-spacing:.14em}
.city b{font-size:clamp(34px,4vw,48px);font-weight:900;letter-spacing:-.05em;line-height:1}
.city b::after{content:".";color:var(--zug)}
.city__k{font-size:9.5px;color:var(--muted);letter-spacing:.14em;margin-top:2px}
.city p{margin:8px 0 0;font-size:14.5px;line-height:1.55;color:var(--muted)}
.founder__body b a{color:inherit;border-bottom:2px solid var(--zug)}
.founder__where a{color:var(--zug);font-weight:700}
@media (max-width:820px){.cities{grid-template-columns:1fr}}

/* ── investors: the euro bar and the flywheel ─────────────────────────────── */
.euro{max-width:960px;margin:0 auto}
.euro__bar{display:grid;grid-template-columns:20fr minmax(74px,5fr) 75fr;gap:6px;height:118px}
.euro__seg{position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:14px 16px;border-radius:16px;overflow:hidden;min-width:0}
.euro__seg b{font-size:clamp(22px,3vw,34px);font-weight:900;letter-spacing:-.04em;line-height:1;white-space:nowrap}
.euro__seg i{font-style:normal;font-size:11.5px;margin-top:6px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.euro__seg--model{background:var(--zug);color:#fff}
.euro__seg--ops{background:var(--surface-2);color:var(--ink);border:1px solid var(--line)}
.euro__seg--ops i{display:none}
.euro__seg--ops b{font-size:clamp(18px,2.2vw,26px)}
.euro__seg--margin{background:var(--ink);color:var(--bg)}
.euro__notes{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
.euro__notes p{margin:0;font-size:14.5px;line-height:1.55;color:var(--muted)}
.euro__notes b{color:var(--ink);font-weight:700}
.wheel{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:12px;align-items:stretch}
.wheel__t{display:flex;flex-direction:column;gap:8px;padding:24px 22px;border-radius:20px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh)}
.wheel__n{font-size:10px;color:var(--zug);letter-spacing:.14em}
.wheel__t b{font-size:19px;font-weight:900;letter-spacing:-.02em;line-height:1.15}
.wheel__t p{margin:0;font-size:14.5px;line-height:1.55;color:var(--muted)}
.wheel__arrow{align-self:center;font-size:26px;color:var(--zug);font-weight:900}
.cities--2{grid-template-columns:repeat(2,1fr);max-width:820px;margin:0 auto}
@media (max-width:900px){.wheel{grid-template-columns:1fr}.wheel__arrow{transform:rotate(90deg);justify-self:center}.euro__notes{grid-template-columns:1fr}.euro__bar{height:auto;grid-template-columns:1fr}.euro__seg--ops i{display:block}.euro__seg{padding:16px}}
@media (max-width:820px){.cities--2{grid-template-columns:1fr}}

/* ── every agent in its own colour ─────────────────────────────────────────
   Dom carries the brand red; the others take a peak each — glacier blue for
   Säntis, green for Eiger, violet for Pilatus, amber for Titlis, copper for
   Gotthard, rose for Zermatt. The tint is the eyes; the head stays white. */

.agent-tint{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--b-eye,var(--zug));margin-right:6px;vertical-align:1px}

/* ── tables on a phone: stacked, labelled rows ────────────────────────────── */
@media (max-width:720px){
  .matrix{min-width:0}
  .matrix thead{display:none}
  .matrix tr{display:block;padding:12px 16px;border-bottom:1px solid var(--line-2)}
  .matrix tr:last-child{border-bottom:0}
  .matrix td{display:grid;grid-template-columns:96px 1fr;gap:10px;padding:5px 0;border:0;white-space:normal;align-items:start}
  .matrix td:first-child{white-space:normal;font-weight:600}
  .matrix td::before{content:attr(data-label);font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding-top:3px}
  .matrix--qa td:first-child{width:auto}
  .matrix tbody tr:hover td{background:none}
}

/* ── phones: nothing inside a grid may push wider than its column ─────────── */
@media (max-width:900px){
  .dev,.app,.split,.ahero{grid-template-columns:1fr}
  .dev__l,.dev__r,.app__l,.app__r{min-width:0}
  .dev .pre-sm,.pre-sm,.code__b{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .h2{overflow-wrap:anywhere}
}

/* ── the app: liquid glass ────────────────────────────────────────────────────
   Real, not painted: four colour orbs drift behind the screen and are warped
   by an animated SVG displacement filter (the liquid); every panel is glass
   — backdrop blur and saturation, a lit top edge, a specular sheen that
   travels across it, a soft inner shadow at the foot — so the warped colour
   reads through it. Transform/opacity animations only; the filter is on one
   small layer. */
.lg-defs{position:absolute;width:0;height:0;overflow:hidden}
.phone--lg{background:#07080C;border-color:rgba(255,255,255,.22);
  box-shadow:0 0 0 9px #0A0C10,0 0 0 10px rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.06),0 40px 90px -30px rgba(0,0,0,.9),0 0 80px rgba(218,41,28,.18)}
.phone--lg::before{background:linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,255,255,.04) 30%,transparent 55%,rgba(255,255,255,.06) 100%);z-index:4}
.phone__island{position:absolute;top:13px;left:50%;transform:translateX(-50%);width:96px;height:26px;border-radius:99px;background:#000;z-index:5;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 0 0 1px rgba(0,0,0,.6)}
.lg-orbs{position:absolute;inset:-12%;z-index:0;filter:url(#lg-warp) blur(22px);opacity:.95;pointer-events:none}
.lg-orb{position:absolute;border-radius:50%;mix-blend-mode:screen;will-change:transform}
.lg-orb--1{width:62%;aspect-ratio:1;left:-8%;top:6%;background:radial-gradient(circle,#DA291C,rgba(218,41,28,0) 68%);animation:lg-drift1 14s ease-in-out infinite}
.lg-orb--2{width:54%;aspect-ratio:1;right:-14%;top:28%;background:radial-gradient(circle,#3B82F6,rgba(59,130,246,0) 68%);animation:lg-drift2 17s ease-in-out infinite}
.lg-orb--3{width:50%;aspect-ratio:1;left:14%;bottom:-4%;background:radial-gradient(circle,#EC4899,rgba(236,72,153,0) 68%);animation:lg-drift3 20s ease-in-out infinite}
.lg-orb--4{width:44%;aspect-ratio:1;right:4%;bottom:18%;background:radial-gradient(circle,#F59E0B,rgba(245,158,11,0) 68%);opacity:.8;animation:lg-drift1 23s ease-in-out infinite reverse}
@keyframes lg-drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(18%,12%) scale(1.15)}}
@keyframes lg-drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-16%,-10%) scale(.9)}}
@keyframes lg-drift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(10%,-18%) scale(1.1)}}
.phone--lg .phone__screen{position:relative;z-index:2;padding-top:46px;gap:10px}
.phone--lg .ph__top{color:rgba(255,255,255,.62)}
.ph__top--mid{margin-top:4px}
.ph__time{margin-left:auto;color:rgba(255,255,255,.55);letter-spacing:.06em}
.lg{position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.06) 55%,rgba(255,255,255,.1));
  border:1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(22px) saturate(1.7);backdrop-filter:blur(22px) saturate(1.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.25),inset 0 -14px 24px -18px rgba(0,0,0,.5),0 10px 30px -12px rgba(0,0,0,.6)}
.lg::after{content:"";position:absolute;top:-40%;left:-30%;width:45%;height:180%;pointer-events:none;z-index:1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:translateX(-160%) skewX(-18deg);
  animation:lg-sheen 7s cubic-bezier(.6,0,.2,1) infinite}
.ph__card.lg:nth-child(3)::after{animation-delay:1.2s}.ph__card.lg:nth-child(4)::after{animation-delay:2.4s}.ph__shift.lg::after{animation-delay:3.6s}
@keyframes lg-sheen{0%,60%{transform:translateX(-160%) skewX(-18deg)}100%{transform:translateX(420%) skewX(-18deg)}}
.lg--hero{background:linear-gradient(135deg,rgba(218,41,28,.42),rgba(218,41,28,.12) 60%,rgba(255,255,255,.1));border-color:rgba(255,120,110,.55)}
.phone--lg .ph__card{border-radius:18px;padding:12px 12px}
.phone--lg .ph__card .bot,.phone--lg .ph__lane .bot{width:30px;height:30px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))}
.phone--lg .ph__card b{font-size:11.5px;font-weight:700;color:#fff}
.phone--lg .ph__go{padding:5px 8px;font-size:8px}
.phone--lg .ph__card .mono{color:rgba(255,255,255,.62)}
.lg-btn{background:rgba(255,255,255,.22);color:#fff;border:1px solid rgba(255,255,255,.45);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 4px 10px -4px rgba(0,0,0,.5)}
.lg-badge{background:#fff;color:#0A0A0A;box-shadow:0 0 0 4px rgba(255,255,255,.18)}
.ph__shift{padding:12px 12px;border-radius:18px;display:flex;flex-direction:column;gap:9px}
.phone--lg .ph__lane .mono{color:rgba(255,255,255,.62)}
.phone--lg .ph__lane .bar{background:linear-gradient(90deg,#fff,rgba(255,255,255,.55));box-shadow:0 0 10px rgba(255,255,255,.35)}
.ph__tabs{margin-top:auto;display:flex;justify-content:space-around;align-items:center;padding:10px 14px;border-radius:26px}
.ph__tab{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:rgba(255,255,255,.55)}
.ph__tab svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ph__tab.is-on{color:#fff;background:rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 6px 14px -6px rgba(0,0,0,.6)}
.phone--lg .badge{font-size:9.5px}
@media (prefers-reduced-motion:reduce){.lg-orb,.lg::after{animation:none}.lg-orbs{filter:blur(22px)}}

/* ── the iPhone itself ────────────────────────────────────────────────────────
   A titanium rail with the real buttons in the real places (action, volume
   up, volume down on the left; power on the right), a thin black bezel, the
   screen with its own corner radius, the Dynamic Island with the camera, an
   iOS status bar, and the home indicator. Proportions of a 6.1" model. */
.phone--lg{width:300px;aspect-ratio:9/19.5;border-radius:56px;padding:0;overflow:visible;border:0;
  background:linear-gradient(180deg,#8E8E93,#5C5C61 12%,#3A3A3E 50%,#5C5C61 88%,#8E8E93);
  box-shadow:0 0 0 1px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.28),inset 0 0 0 2px rgba(0,0,0,.35),
    0 50px 100px -30px rgba(0,0,0,.85),0 0 90px rgba(218,41,28,.14)}
.phone--lg::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:6;
  background:linear-gradient(155deg,rgba(255,255,255,.35),rgba(255,255,255,0) 22%,rgba(255,255,255,0) 78%,rgba(255,255,255,.18))}
.phone__glass{position:absolute;inset:3px;border-radius:53px;background:#000;overflow:hidden;z-index:2;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.phone--lg .phone__screen{position:absolute;inset:8px;border-radius:46px;overflow:hidden;background:#07080C;padding:54px 12px 34px;height:auto;z-index:2;gap:10px}
.phone--lg .lg-orbs{inset:8px;border-radius:46px;filter:url(#lg-warp) blur(22px);z-index:1}
.phone__btn{position:absolute;width:3px;border-radius:2px;background:linear-gradient(90deg,#9A9A9F,#4A4A4E);z-index:1;box-shadow:0 0 0 1px rgba(0,0,0,.5)}
.phone__btn--action{left:-3px;top:104px;height:26px}
.phone__btn--up{left:-3px;top:150px;height:52px}
.phone__btn--down{left:-3px;top:212px;height:52px}
.phone__btn--power{right:-3px;top:170px;height:84px;background:linear-gradient(90deg,#4A4A4E,#9A9A9F)}
.phone__island{position:absolute;top:19px;left:50%;transform:translateX(-50%);width:104px;height:30px;border-radius:99px;background:#000;z-index:5;
  box-shadow:0 0 0 1px rgba(0,0,0,.8)}
.phone__island i{position:absolute;right:11px;top:50%;transform:translateY(-50%);width:11px;height:11px;border-radius:50%;
  background:radial-gradient(circle at 38% 38%,#2D3A55,#0B0F1A 55%,#000);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.phone__status{position:absolute;top:22px;left:32px;right:32px;height:24px;z-index:5;display:flex;align-items:center;color:#fff;font-size:14px;font-weight:600;letter-spacing:-.01em}
.phone__clock{font-family:var(--sans);font-variant-numeric:tabular-nums}
.phone__signal{margin-left:auto;display:inline-flex;align-items:flex-end;gap:1.5px;height:11px;margin-right:6px}
.phone__signal i{width:3px;background:#fff;border-radius:1px}
.phone__signal i:nth-child(1){height:4px}.phone__signal i:nth-child(2){height:6px}.phone__signal i:nth-child(3){height:8.5px}.phone__signal i:nth-child(4){height:11px}
.phone__wifi{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;margin-right:6px}
.phone__batt{position:relative;width:26px;height:12px;border:1.5px solid rgba(255,255,255,.55);border-radius:4px;padding:1.5px}
.phone__batt::after{content:"";position:absolute;right:-4px;top:3px;width:2px;height:4px;border-radius:0 2px 2px 0;background:rgba(255,255,255,.55)}
.phone__batt i{display:block;width:82%;height:100%;border-radius:2px;background:#fff}
.phone__home{position:absolute;bottom:9px;left:50%;transform:translateX(-50%);width:126px;height:5px;border-radius:99px;background:rgba(255,255,255,.9);z-index:5}
.phone--lg .ph__tabs{margin-bottom:0}
.app__r{min-height:660px}

/* ── the screen at iPhone scale ───────────────────────────────────────────────
   The frame is 300px for a 393pt phone, so everything inside is iOS at
   ×0.76: a 34pt large title becomes 26px, 17pt rows 13px, 15pt subtitles
   11.5px, 10pt tab labels 8px — in the system face, on iOS's own spacing. */
.phone--lg .phone__screen{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",Inter,"Helvetica Neue",Arial,sans-serif;padding:58px 12px 30px;gap:8px;letter-spacing:-.01em}
.ph__title{display:flex;flex-direction:column;gap:1px;padding:2px 4px 6px}
.ph__title h3{margin:0;font-size:26px;font-weight:700;letter-spacing:-.6px;line-height:1.1;color:#fff;display:flex;align-items:center;gap:8px}
.ph__title .badge{font-family:inherit;font-size:11px;font-weight:700;padding:2px 7px;letter-spacing:0}
.ph__sub{font-size:11.5px;color:rgba(255,255,255,.6)}
.phone--lg .ph__top{font-family:inherit;font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:rgba(255,255,255,.55);padding:6px 6px 2px}
.phone--lg .ph__card{padding:10px 10px 10px 11px;border-radius:16px;gap:10px}
.phone--lg .ph__card .bot,.phone--lg .ph__lane .bot{width:34px;height:34px}
.phone--lg .ph__card b{font-family:inherit;font-size:13px;font-weight:600;letter-spacing:-.2px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phone--lg .ph__card .mono{font-family:inherit;font-size:11px;letter-spacing:0;text-transform:none;color:rgba(255,255,255,.62);margin-top:1px}
.phone--lg .ph__go{font-family:inherit;font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;padding:6px 11px}
.phone--lg .ph__lane{gap:10px;padding:2px 2px}
.phone--lg .ph__lane .mono{font-family:inherit;font-size:11px;letter-spacing:0;text-transform:none;width:72px}
.phone--lg .ph__lane .bar{height:6px}
.phone--lg .ph__tabs{padding:8px 6px 6px;border-radius:24px;justify-content:space-around}
.phone--lg .ph__tab{width:auto;height:auto;border-radius:12px;padding:6px 10px 5px;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:8.5px;font-weight:600;letter-spacing:.1px;color:rgba(255,255,255,.55)}
.phone--lg .ph__tab em{font-style:normal}
.phone--lg .ph__tab svg{width:20px;height:20px}
.phone--lg .ph__tab.is-on{color:#fff;background:rgba(255,255,255,.2)}
.phone--lg .ph__top .mono{font-family:inherit;letter-spacing:.02em}
.phone--lg .ph__card b{font-size:12.5px}
.phone--lg .ph__go{padding:5px 9px;font-size:11.5px}

/* ── the screen: the app icon alone, at iPhone 17 Pro Max proportions ─────────
   440×956 points, 6.9", corner radius scaled. Nothing on the screen but the
   app icon over the liquid, and the name beneath it. */
.phone--lg{width:320px;aspect-ratio:440/956;border-radius:62px}
.phone__glass{border-radius:59px}
.phone--lg .phone__screen,.phone--lg .lg-orbs{border-radius:52px}
.phone--lg .phone__screen--icon{display:grid;place-items:center;padding:0}
.phone__btn--action{top:118px}.phone__btn--up{top:168px}.phone__btn--down{top:232px}.phone__btn--power{top:190px;height:92px}
.ph__hero{display:flex;flex-direction:column;align-items:center;gap:16px;transform:translateY(-6px)}
.ph__icon{width:120px;height:120px;border-radius:27px;display:block;
  box-shadow:0 24px 50px -16px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.35),0 0 60px rgba(218,41,28,.25)}
.ph__name{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,"Helvetica Neue",Arial,sans-serif;font-size:14px;font-weight:600;color:#fff;letter-spacing:-.01em;text-shadow:0 2px 10px rgba(0,0,0,.6)}

/* Nine roster cards: the last (You) spans the row when it would sit alone. */
.rc-grid > .rc-link:last-child:nth-child(odd){grid-column:1/-1}

/* ═══════════════════════════════════════════════════════════
   THE REVOLUT SHELL — bar, dropdowns, phone sheet, footer
   Measured from revolut.com/business and x.ai. Overrides the
   Tema shell above; the old rules stay until the next prune.
   ═══════════════════════════════════════════════════════════ */
:root{--wordmark:"Instrument Sans","Schibsted Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;--spring:cubic-bezier(.22,1.4,.36,1);--rev:cubic-bezier(.15,.5,.5,1)}
.nav{position:fixed;top:0;left:0;right:0;z-index:900;height:72px;display:flex;align-items:center;gap:8px;padding:0 32px;
  background:color-mix(in srgb,var(--bg) 70%,transparent);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);border-bottom:1px solid transparent}
.nav.is-stuck{border-bottom-color:var(--line-2)}
.nav.is-menu{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg)}
.nav{transition:background-color .35s,border-color .35s,color .35s}
/* On load the bar is painted in its final state by an inline script; nothing animates into place for the first moment. */
.nav.is-settling,.nav.is-settling .brand__wm,.nav.is-settling .wm-l,.nav.is-settling .brand__wm i{transition:none!important}
/* The home hero is black in both themes, so the bar over it is the dark bar in
   both: no fill, white ink. It takes the theme's colours only once the hero has
   scrolled past (script.js sets .is-over-hero). Light mode used to lay 70% white
   over the black hero and come out grey. */
:root[data-zt="light"] .nav.is-over-hero:not(.is-menu){--ink:#FFFFFF;--bg:#0A0A0A;--ink-2:#D5D9E2;--muted:#9598A1;--faint:#6C6F77;--surface:#1A1A1A;--surface-2:#202020;--line:#1F2228;--line-2:rgba(255,255,255,.075);color:#fff}
:root[data-zt="light"] .nav.is-over-hero:not(.is-menu) .bot{filter:drop-shadow(0 8px 18px rgba(0,0,0,.6))}
body{padding-top:72px}
.brand{display:inline-flex;align-items:center;gap:14px;flex-shrink:0;color:var(--ink)}
.brand .bot--brand{width:64px;height:64px}
.brand__wm{font-family:var(--wordmark);font-weight:700;font-size:26px;letter-spacing:.14em;text-transform:uppercase;line-height:1}
.nav .brand{margin-right:20px}
.nav-words{display:flex;align-items:center;gap:2px}
.nav-word{color:var(--ink);font-size:14.5px;font-weight:500;padding:8px 18px;border-radius:50px;white-space:nowrap;transition:color .3s var(--rev),background-color .3s var(--rev)}
.nav-word:hover,.nav-word.is-on,.dd:hover>.nav-word,.dd.is-open>.nav-word,.dd:focus-within>.nav-word{background:rgba(127,127,140,.18)}
:root[data-zt="dark"] .nav-word:hover,:root[data-zt="dark"] .dd:hover>.nav-word,:root[data-zt="dark"] .dd.is-open>.nav-word{background:rgba(255,255,255,.15)}
.nav .spacer{flex:1}
.nav-login{color:var(--ink);font-size:14.5px;font-weight:500;padding:8px 18px;border-radius:50px;white-space:nowrap;transition:background-color .3s var(--rev)}
.nav-login:hover{background:rgba(127,127,140,.18)}
.nav-pill{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 18px;border-radius:99px;font-size:14px;font-weight:600;white-space:nowrap;background:var(--ink);color:var(--bg);transition:transform .3s var(--spring),box-shadow .3s}
.nav-pill:hover{transform:translateY(-1px);box-shadow:0 10px 24px -10px rgba(0,0,0,.6)}
.nav-pill--lg{height:48px;padding:0 24px;font-size:15px}
.h-ghost{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 18px;border-radius:99px;font-size:14px;font-weight:600;white-space:nowrap;border:1px solid var(--line);color:var(--ink);transition:border-color .2s,background .2s}
.h-ghost:hover{border-color:var(--muted);background:rgba(127,127,140,.08)}
.rh__ctas .h-ghost{height:48px;padding:0 24px;font-size:15px;border-color:rgba(255,255,255,.28);color:#fff}
/* the dropdown */
.dd{display:inline-flex;position:static}
.dd__panel{position:absolute;left:50%;top:72px;width:min(1048px,calc(100vw - 48px));transform:translate(-50%,-8px);opacity:0;visibility:hidden;
  transition:opacity .3s ease-out,transform .3s ease-out,visibility .3s ease-out;
  background:color-mix(in srgb,var(--bg) 50%,transparent);-webkit-backdrop-filter:blur(85px);backdrop-filter:blur(85px);border-radius:24px;padding:24px;
  box-shadow:0 30px 80px rgba(0,0,0,.45),inset 0 0 0 1px var(--line-2);text-align:left}
.dd:hover .dd__panel,.dd.is-open .dd__panel,.dd:focus-within .dd__panel{opacity:1;visibility:visible;transform:translate(-50%,0)}
.dd__panel::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.dd__top{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:500;color:var(--ink);margin:0 0 26px}
.dd__top::after{content:"→";color:var(--muted);transition:transform .3s}.dd__top:hover::after{transform:translateX(4px)}
.dd__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 24px}
.dd__cols h5{margin:0 0 12px;font-size:12px;font-weight:500;color:var(--ink)}
.dd__cols a{display:flex;align-items:center;gap:9px;color:var(--ink);font-size:15px;line-height:1.4;padding:5px 0;opacity:.9;transition:opacity .2s}
.dd__cols a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
.dd__cols a .bot--xs,.bot--xs{width:20px;height:20px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.45))}
.dd__cols a small{color:var(--faint);font-size:12px;margin-left:auto}
/* the phone and iPad sheet */
.nav-burger{display:none;width:44px;height:44px;margin-left:auto;background:none;border:0;padding:10px;cursor:pointer;color:var(--ink);position:relative;z-index:2}
.nav-burger i{display:block;height:2px;background:currentColor;border-radius:2px;margin:5px 0;transition:transform .3s var(--rev),opacity .2s}
.nav-burger.is-x i:nth-child(1){transform:translateY(7px) rotate(45deg)}.nav-burger.is-x i:nth-child(2){opacity:0}.nav-burger.is-x i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mob{position:fixed;left:0;right:0;top:0;bottom:0;z-index:-1;background:color-mix(in srgb,var(--bg) 50%,transparent);-webkit-backdrop-filter:blur(85px);backdrop-filter:blur(85px);
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s ease-out,transform .3s ease-out,visibility .3s;display:flex;flex-direction:column;padding-top:72px}
.mob.is-open{opacity:1;visibility:visible;transform:none}
.mob__scroll{flex:1;overflow-y:auto;padding:12px 20px 20px}
.segs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin:0 -4px 22px;padding:0 4px}
.segs::-webkit-scrollbar{display:none}
.seg{flex:none;background:none;border:0;color:var(--ink);font:inherit;font-size:16px;font-weight:500;padding:8px 20px;border-radius:50px;cursor:pointer;transition:background-color .3s var(--rev)}
.seg.is-on{background:rgba(127,127,140,.22)}
.mob__group{display:none}.mob__group.is-on{display:block}
.mob__top{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:500;color:var(--ink);padding:0 0 24px}
.mob__top::after{content:"→";font-size:18px}
.mob__plain{display:grid}
.mob__plain a{font-size:16px;color:var(--ink);padding:12px 0;height:46px;display:flex;align-items:center;border-bottom:1px solid var(--line-2)}
.acc{border:0;background:none;color:var(--ink);font:inherit;font-size:16px;width:100%;display:flex;justify-content:space-between;align-items:center;padding:12px 0;height:46px;cursor:pointer;border-radius:12px;text-align:left}
.acc svg{width:16px;height:16px;transition:transform .3s var(--rev);flex:none}
.acc[aria-expanded="true"] svg{transform:rotate(180deg)}
.acc__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--rev)}
.acc[aria-expanded="true"]+.acc__body{grid-template-rows:1fr}
.acc__body>div{overflow:hidden;min-height:0}
.acc__body a{display:flex;align-items:center;gap:10px;color:var(--ink);font-size:16px;padding:12px 0 12px 12px;opacity:.85}
.acc__body a .bot{width:22px;height:22px}
.acc__body a small{color:var(--faint);font-size:12px;margin-left:auto}
.mob__foot{display:flex;justify-content:center;align-items:center;gap:28px;padding:16px 20px calc(20px + env(safe-area-inset-bottom));flex:none}
.mob__login{color:var(--ink);font-size:16px;font-weight:500}
body.menu-open{overflow:hidden}
@media (max-width:1080px){
  .nav{padding:0 20px}
  .nav-words,.nav-login,.nav>.nav-pill,.nav .spacer{display:none}
  .nav-burger{display:block}
  .dd__panel{display:none}
}
@media (max-width:720px){
  .brand{gap:11px}.brand .bot--brand{width:52px;height:52px}.brand__wm{font-size:22px;letter-spacing:.14em}
}
/* the footer */
.foot{border-top:1px solid var(--line-2);padding:56px 0 48px;background:var(--bg-2)}
.foot__grid{display:grid;grid-template-columns:260px 1fr;gap:40px}
.foot__brand{border-right:1px solid var(--line-2);padding-right:32px;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.foot__copy{margin:0;color:var(--faint);font-size:12px;line-height:1.6}
.foot__cols{display:grid;grid-template-columns:repeat(5,1fr);gap:24px 20px;padding:0}
.foot__cols h4{margin:0 0 12px;font-size:13px;color:var(--ink);font-weight:600;letter-spacing:0;text-transform:none;font-family:var(--sans)}
.foot__cols div{display:block}
.foot__cols a{display:block;color:var(--muted);font-size:13.5px;margin-bottom:9px;transition:color .18s}
.foot__cols a:hover{color:var(--ink);transform:none}
.foot .tsw{margin-top:8px}
@media (max-width:900px){
  .foot__grid{grid-template-columns:1fr}
  .foot__brand{border-right:0;padding-right:0;border-bottom:1px solid var(--line-2);padding-bottom:24px}
  .foot__cols{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:560px){.foot__cols{grid-template-columns:1fr 1fr}}

/* ═══════════════════════════════════════════════════════════
   THE HOME — Revolut's rhythm, x.ai's tiles, SwiftUI's springs
   ═══════════════════════════════════════════════════════════ */
.rh{position:relative;min-height:calc(100svh - 72px);overflow:hidden;background:#000;color:#fff;display:flex;align-items:center;margin-top:-72px;padding-top:72px}
.rh__stage{position:absolute;inset:0;pointer-events:none}
.rh__glow{position:absolute;left:50%;top:-30%;width:70%;height:60%;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(255,255,255,.12),transparent);filter:blur(30px)}
.slab{position:absolute;background:linear-gradient(160deg,#2C2E36,#0E0F13 60%,#07080A);transform-origin:center}
.slab--a{left:-6%;bottom:-24%;width:70%;height:78%;transform:skewY(-9deg);box-shadow:inset 1px 1px 0 rgba(255,255,255,.14),0 -30px 80px rgba(0,0,0,.6)}
.slab--b{right:-4%;bottom:-40%;width:56%;height:74%;transform:skewY(7deg);background:linear-gradient(200deg,#3A3C46,#15161B 55%,#0A0B0E);box-shadow:inset 1px 1px 0 rgba(255,255,255,.16)}
.mark{position:absolute;right:9%;top:50%;width:min(34vw,420px);aspect-ratio:1;transform:translateY(-52%);display:grid;place-items:center;pointer-events:none}
.mark__halo{position:absolute;inset:-18%;border-radius:50%;background:radial-gradient(circle,rgba(218,41,28,.42),rgba(218,41,28,.1) 45%,transparent 66%);filter:blur(34px);animation:h-breathe 5.5s ease-in-out infinite}
.mark__orbit{position:absolute;inset:-4%;border-radius:50%;animation:h-spin 26s linear infinite}
.mark__orbit i{position:absolute;top:-4px;left:50%;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:#fff;box-shadow:0 0 14px rgba(255,255,255,.9)}
.mark__orbit--2{inset:6%;animation:h-spin 17s linear infinite reverse}
.mark__orbit--2 i{width:7px;height:7px;background:#DA291C;box-shadow:0 0 0 4px rgba(218,41,28,.18),0 0 14px #DA291C}
.mark__float{width:70%;aspect-ratio:1;animation:h-bob 7s ease-in-out infinite}
.ball{position:relative;width:100%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#FFFFFF 0%,#F4F4F6 28%,#D9DAE0 58%,#A9ABB6 82%,#7E8090 100%);
  box-shadow:0 40px 70px -20px rgba(0,0,0,.75),inset -18px -26px 50px rgba(0,0,0,.18),inset 0 -6px 18px rgba(218,41,28,.22),0 0 44px rgba(218,41,28,.28);
  animation:h-enter 1.1s cubic-bezier(.34,1.5,.4,1) both}
.ball__shine{position:absolute;left:22%;top:14%;width:26%;height:16%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,255,255,0));transform:rotate(-24deg)}
.ball__eyes{position:absolute;inset:0;transition:transform .35s cubic-bezier(.2,.7,.2,1);animation:h-play 11s ease-in-out infinite}
.eye{position:absolute;top:44%;width:13%;aspect-ratio:1;border-radius:50%;background:#DA291C;transform-origin:center;animation:h-blink 6s -1.4s infinite}
.eye--l{left:31%}.eye--r{left:56%;width:10.5%;top:46%}
.mark__ground{position:absolute;bottom:4%;left:50%;width:44%;height:7%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.75),transparent);filter:blur(6px);animation:h-ground 7s ease-in-out infinite}
@keyframes h-play{0%,14%{transform:translate(0,0)}18%,30%{transform:translate(5%,-3%)}34%,46%{transform:translate(-6%,1%)}50%,58%{transform:translate(1%,5%)}62%,74%{transform:translate(4%,-5%)}78%,100%{transform:translate(0,0)}}
@keyframes h-bob{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-4.5%) rotate(1.5deg)}}
@keyframes h-ground{0%,100%{transform:translateX(-50%) scaleX(1);opacity:.9}50%{transform:translateX(-50%) scaleX(.78);opacity:.5}}
@keyframes h-breathe{0%,100%{transform:scale(.92);opacity:.75}50%{transform:scale(1.08);opacity:1}}
@keyframes h-spin{to{transform:rotate(360deg)}}
@keyframes h-enter{0%{transform:scale(.4) rotate(-14deg);opacity:0}60%{opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes h-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.rh__in{position:relative;width:100%;display:flex;flex-direction:column;justify-content:center;padding-bottom:40px}
.rh__h{font-family:var(--sans);font-weight:500;font-size:clamp(40px,4.4vw,58px);letter-spacing:-.02em;line-height:1.08;margin:0 0 18px;max-width:640px;color:#E9E9EC}
.rh__lede{font-size:16px;color:#A1A1A6;max-width:520px;margin:0 0 28px;line-height:1.55}
.rh__ctas{display:flex;gap:12px;flex-wrap:wrap}
.rh .nav-pill{background:#fff;color:#000}
.rh__arrow{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.22);display:grid;place-items:center;color:rgba(255,255,255,.75);background:rgba(255,255,255,.04);animation:h-arrow 2.2s ease-in-out infinite}
.rh__arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@keyframes h-arrow{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}
/* sections */
.h-sec{padding:96px 0}.h-sec--tight{padding-top:0}
.h-h2{font-family:var(--sans);font-weight:500;font-size:clamp(30px,3.4vw,46px);letter-spacing:-.02em;line-height:1.1;margin:0 0 14px;text-align:center;color:var(--ink)}
/* A heading that must stay on one line: sized by the viewport below the cap, never wrapped. */
.h-h2--one{white-space:nowrap;font-size:clamp(20px,5.2vw,46px)}
.h-h2--left{text-align:left}.h-h2--big{font-size:clamp(34px,4vw,52px)}.h-h2--big span{color:var(--faint)}
.h-sub{text-align:center;color:var(--muted);max-width:600px;margin:0 auto 26px;font-size:16px;line-height:1.55}
.h-sub--left{text-align:left;margin:0 0 22px}
.h-ctas{display:flex;justify-content:center;gap:12px;margin-bottom:56px;flex-wrap:wrap}.h-ctas--left{justify-content:flex-start;margin-bottom:0}
.h-eyebrow{font-size:12.5px;color:var(--faint);margin:0 0 10px}
.h-fine{color:var(--faint);font-size:12px;text-align:center;max-width:720px;margin:36px auto 0}
/* tiles */
.h-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px}
.h-tiles--2{grid-template-columns:1fr 1fr}
.xt{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:22px;min-height:340px;overflow:hidden;display:flex;flex-direction:column;color:var(--ink);transition:transform .4s var(--spring),border-color .2s}
.xt:hover{transform:translateY(-4px);border-color:var(--muted)}
.xt--short{min-height:260px}
.xt__body{padding:22px 22px 0;display:flex;flex-direction:column;gap:9px;flex:1}
.xt__foot{position:relative;display:flex;justify-content:space-between;align-items:center;padding:16px 22px;font-size:14px;font-weight:600}
.xt__foot::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:70px;background:linear-gradient(to bottom,transparent,var(--surface));pointer-events:none}
.xt__foot span{color:var(--muted);font-weight:500;transition:color .2s}.xt:hover .xt__foot span{color:var(--ink)}
.xt__msg{max-width:80%;padding:10px 13px;border-radius:16px;background:var(--surface-2);color:var(--ink-2);font-size:13px;line-height:1.4}
.xt__msg--me{align-self:flex-end;background:var(--ink);color:var(--bg)}
.xt__who{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--faint);margin-top:4px}
.xt__who .bot{width:20px;height:20px}
.xt__kv{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--ink-2);padding:8px 0;border-bottom:1px solid var(--line-2)}
.xt__kv b{font-weight:500;color:var(--ink)}.xt__kv i{font-style:normal;color:var(--faint)}
.xt__stamp{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-top:6px}
.xt__stamp::before{content:"";width:6px;height:6px;border-radius:50%;background:#13D1A3;box-shadow:0 0 8px #13D1A3}
.h-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line-2);font-size:12.5px;color:var(--ink)}
.h-row .bot{width:26px;height:26px}
.h-row>div{min-width:0}
.h-row b{display:block;font-weight:600;color:var(--ink)}
.h-row i{font-style:normal;color:var(--faint);font-size:11px}
.h-go{margin-left:auto;padding:5px 10px;border-radius:99px;background:var(--ink);color:var(--bg);font-weight:600;font-size:11px;flex:none}
.h-row--hi{background:rgba(218,41,28,.14);border-color:rgba(218,41,28,.45)}
.h-bar{width:110px;height:6px;border-radius:99px;background:var(--line);overflow:hidden;margin-left:auto;flex:none}
.h-bar i{display:block;height:100%;background:var(--ink);border-radius:99px}
/* split + panel */
.h-split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
/* The tick list: one line per promise, the promise in ink and the rest in muted, a hairline
   between lines. The tick sits in the margin so inline spans never break the line into columns. */
.h-ticks{list-style:none;margin:6px 0 30px;padding:0;color:var(--muted);font-size:clamp(15.5px,1.25vw,17px);line-height:1.5;letter-spacing:-.01em}
.h-ticks li{position:relative;padding:14px 0 14px 34px;border-top:1px solid var(--line-2)}
.h-ticks li:first-child{border-top:0;padding-top:4px}
.h-ticks li b{font-weight:500;color:var(--ink)}
.h-ticks li::before{content:"✓";position:absolute;left:0;top:calc(14px + .2em);width:20px;height:20px;border-radius:50%;background:var(--ink);color:var(--bg);font-size:11px;font-weight:900;display:grid;place-items:center}
.h-ticks li:first-child::before{top:calc(4px + .2em)}
@media (max-width:640px){.h-ticks{font-size:15.5px}.h-ticks li{padding:12px 0 12px 32px}.h-ticks li::before{top:calc(12px + .2em)}.h-ticks li:first-child::before{top:calc(4px + .2em)}}
.h-panel{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:22px;display:flex;flex-direction:column;gap:10px}
.h-panel__hd{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:4px}
.h-dot{width:7px;height:7px;border-radius:50%;background:#13D1A3;box-shadow:0 0 8px #13D1A3}
/* developers */
.h-dev{display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:center}
/* The three figures under the developers copy: an equal three-column strip with hairlines,
   so it reads as one row at every width instead of a wrapping line of loose cells. */
.h-mini{display:grid;grid-template-columns:repeat(3,1fr);margin-top:28px;border-top:1px solid var(--line-2)}
.h-mini>div{padding:16px 16px 0 18px;border-left:1px solid var(--line-2);min-width:0}
.h-mini>div:first-child{padding-left:0;border-left:0}
.h-mini b{display:block;font-family:var(--sans);font-weight:500;font-size:22px;color:var(--ink);letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.h-mini span{display:block;margin-top:4px;font-size:12px;line-height:1.4;color:var(--faint);text-wrap:balance}
.h-codewrap{background:linear-gradient(180deg,var(--surface-2),var(--bg-2) 70%);border-radius:24px;padding:24px;border:1px solid var(--line)}
.h-codewrap .code{border-radius:16px}
/* link cards */
.h-links{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.lk{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:22px;min-height:150px;display:flex;flex-direction:column;justify-content:space-between;color:var(--ink);transition:transform .4s var(--spring),border-color .2s}
.lk:hover{transform:translateY(-4px);border-color:var(--muted)}
.lk b{font-family:var(--sans);font-weight:500;font-size:19px;letter-spacing:-.01em}
.lk span{color:var(--muted);font-size:13.5px}.lk span::after{content:" ›";color:var(--ink)}
/* the numbers on a grid, with springs */
.gridstat{position:relative;padding:96px 0;text-align:center;
  background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);background-size:120px 120px;background-position:center}
.gridstat::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 30%,var(--bg) 78%)}
.gridstat .wrap{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.gs{opacity:0;transform:translateY(28px) scale(.86);filter:blur(6px)}
.gs b{display:block;font-family:var(--sans);font-weight:400;font-size:clamp(56px,7vw,84px);letter-spacing:-.03em;line-height:1;color:var(--ink)}
.gs b i,.gs b em{font-style:normal;font-variant-numeric:tabular-nums}.gs b em{color:var(--muted)}
.gs span{display:block;margin-top:14px;color:var(--muted);font-size:13.5px;opacity:0;transform:translateY(10px)}
.gridstat.is-in .gs{animation:h-springIn 1.1s var(--spring) both}
.gridstat.is-in .gs:nth-child(2){animation-delay:.14s}.gridstat.is-in .gs:nth-child(3){animation-delay:.28s}
.gridstat.is-in .gs span{animation:h-settle .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:.9s}
.gridstat.is-in .gs:nth-child(2) span{animation-delay:1.04s}.gridstat.is-in .gs:nth-child(3) span{animation-delay:1.18s}
.gridstat.is-in .gs b{animation:h-land .5s cubic-bezier(.3,1.6,.4,1) both;animation-delay:1.25s}
.gridstat.is-in .gs:nth-child(2) b{animation-delay:1.39s}.gridstat.is-in .gs:nth-child(3) b{animation-delay:1.53s}
@keyframes h-springIn{0%{opacity:0;transform:translateY(28px) scale(.86);filter:blur(6px)}60%{filter:blur(0)}100%{opacity:1;transform:none;filter:blur(0)}}
@keyframes h-settle{to{opacity:1;transform:none}}
@keyframes h-land{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}}
/* pricing, the SwiftUI way: cards spring in staggered, the price counts up, the card lifts on a spring */
.pp{opacity:0;transform:translateY(28px) scale(.92);transition:transform .45s var(--spring),border-color .2s,box-shadow .3s}
.pp-grid.is-in .pp{animation:h-springIn 1s var(--spring) both}
.pp-grid.is-in .pp:nth-child(2){animation-delay:.1s}.pp-grid.is-in .pp:nth-child(3){animation-delay:.2s}.pp-grid.is-in .pp:nth-child(4){animation-delay:.3s}
.pp-grid.is-in .pp{opacity:1}
.pp-grid.is-in .pp:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.pp-grid.is-in .pp-hi{animation-name:h-springHi}
@keyframes h-springHi{0%{opacity:0;transform:translateY(28px) scale(.92);filter:blur(6px)}60%{filter:blur(0)}80%{transform:translateY(0) scale(1.03)}100%{opacity:1;transform:none;filter:blur(0)}}
.pp-amount{font-variant-numeric:tabular-nums}
.pp-grid.is-in .pp-badge{animation:h-land .6s cubic-bezier(.3,1.6,.4,1) 1.1s both}
/* news */
.h-newshd{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:22px}
.h-newshd a{color:var(--muted);font-size:13px}.h-newshd a::after{content:" ›"}
.nw-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.nw{display:block;color:var(--ink)}
.nw__thumb{aspect-ratio:16/9;border-radius:16px;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;position:relative;margin-bottom:12px}
.nw__thumb--word{background:linear-gradient(135deg,var(--surface),#3A1A17 60%,#DA291C)}
.nw__thumb--word span{font-family:var(--sans);font-size:22px;font-weight:500;color:#fff}
.nw__marks{display:flex;justify-content:center;align-items:center;width:100%}.nw__marks .bot{width:34%;height:auto;aspect-ratio:1}
.nw__marks--1 .bot{width:44%}.nw__marks--2 .bot{width:38%;margin:0 -4%}.nw__marks--3 .bot{width:30%;margin:0 -3%}.nw__marks--4 .bot{width:26%;margin:0 -3%}
.nw time{display:block;font-size:11px;color:var(--faint);margin-bottom:4px}
.nw b{font-weight:500;font-size:14px;color:var(--ink);line-height:1.35}
.nw:hover b{text-decoration:underline}
.posts{display:grid;gap:18px;max-width:900px;margin:0 auto}
.post{display:grid;grid-template-columns:260px 1fr;gap:28px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:22px;scroll-margin-top:90px}
.post .nw__thumb{margin:0}
.post time{font-size:11px;color:var(--faint)}
.post h2{font-family:var(--sans);font-weight:500;font-size:22px;letter-spacing:-.01em;margin:6px 0 8px;color:var(--ink)}
.post p{margin:0;color:var(--muted);font-size:15px;line-height:1.55}
/* get started */
.h-start{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:36px}
.st{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:26px 24px 24px;display:flex;flex-direction:column}
.st h3{font-family:var(--sans);font-weight:500;font-size:20px;margin:0 0 6px;color:var(--ink)}
.st p{margin:0 0 16px;color:var(--muted);font-size:14px}
.st ul{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:9px;color:var(--ink-2);font-size:14px}
.st li{display:flex;gap:10px;align-items:flex-start}.st li::before{content:"✓";color:var(--faint);font-size:12px;margin-top:2px}
.st .nav-pill,.st .h-ghost{margin-top:auto;width:100%}
/* faq */
.h-faq{max-width:760px;margin:28px auto 0}
.h-faq details{border-bottom:1px solid var(--line-2)}
.h-faq summary{list-style:none;cursor:pointer;padding:20px 0;font-family:var(--sans);font-weight:500;font-size:18px;display:flex;justify-content:space-between;color:var(--ink)}
.h-faq summary::-webkit-details-marker{display:none}
.h-faq summary::after{content:"+";color:var(--muted)}.h-faq details[open] summary::after{content:"–"}
.h-faq p{margin:0 0 20px;color:var(--muted)}
@media (max-width:900px){
  .h-tiles{grid-template-columns:1fr 1fr}.h-split,.h-dev,.h-start{grid-template-columns:1fr}.h-links,.nw-grid{grid-template-columns:1fr 1fr}
  .gridstat .wrap{grid-template-columns:1fr;gap:56px}.gridstat{background-size:90px 90px}
  .rh{flex-direction:column;justify-content:center}.rh__in{padding-top:0}
  .mark{position:relative;right:auto;top:auto;transform:none;width:min(62vw,300px);margin:0 auto 6px;order:-1}
  .rh__h{font-size:34px}
  .post{grid-template-columns:1fr}
}
@media (max-width:560px){
  .h-tiles,.h-tiles--2,.h-links,.nw-grid{grid-template-columns:1fr}.xt{min-height:300px}.h-codewrap{padding:16px}
  .h-mini>div{padding:14px 10px 0 12px}.h-mini b{font-size:20px}.h-mini span{font-size:11.5px}
}
@media (prefers-reduced-motion:reduce){
  .gs,.gs span,.pp{opacity:1;transform:none;filter:none;animation:none!important}.gs b,.pp-badge{animation:none!important}
  .mark *,.rh__arrow,.ball{animation:none!important}
}

/* ═══════════════════════════════════════════════════════════
   THE PAGE LANGUAGE — every inner page speaks as the home does
   Weight 500 headings with tight tracking, pill buttons, flat
   surface cards with a hairline and a spring lift, x.ai's
   announcement pill, no aurora. Restyles the shared primitives
   the pages are built from, so one block covers all 24.
   ═══════════════════════════════════════════════════════════ */
/* type */
.ptitle,.h2,.tsec-h,.ag-title,.ctaband-title,.cine-title,.card2 h3,.rc-title,.wheel__t b,.acard h3,.acard__k,.mkt__card b,.peak b,.founder__body h3,.pp-name,.step h3,.steps h3,.faq summary,.statusbox__sum,.post h2,.notice p b{font-family:var(--sans);font-weight:500;letter-spacing:-.02em}
.ptitle{font-size:clamp(36px,5vw,58px);line-height:1.08;color:var(--ink)}
.h2{font-size:clamp(28px,3.4vw,44px);line-height:1.1;letter-spacing:-.02em}
.tsec-h{font-size:clamp(26px,3.4vw,40px)}
.ag-title{font-size:clamp(32px,5vw,56px);letter-spacing:-.02em}
.ctaband-title{font-size:clamp(28px,4vw,44px);letter-spacing:-.02em}
.psub,.sec__sub,.tsec-sub,.ag-sub,.ctaband-sub{font-weight:400;font-size:16px;line-height:1.55}
.eyebrow{font-family:var(--sans);font-size:12.5px;letter-spacing:0;color:var(--faint);text-transform:none;margin:0 0 12px}
.grad,.cine-grad,.tsec-h .grad{color:var(--zug)}
/* the page hero: the home's black stage in miniature, no aurora */
.phero{padding:88px 0 64px;background:var(--bg)}
.phero .aurora{display:none}
.phero::before{content:"";position:absolute;left:50%;top:-30%;width:70%;height:60%;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(218,41,28,.16),transparent);filter:blur(40px);pointer-events:none}
/* pills */
.pagepill,.cine-pill,.ag-pill{background:var(--surface);border:1px solid var(--line);color:var(--ink);font-family:var(--sans);font-size:12.5px;font-weight:500;letter-spacing:0;text-transform:none;padding:7px 14px;box-shadow:none}
.pagepill .cine-dot,.cine-pill .cine-dot,.ag-dot{background:var(--zug);box-shadow:0 0 8px var(--zug)}
/* buttons: every call to action is a pill */
.btn,.cine-cta,.cine-cta-ghost,.pp-cta,.mkt__go,.acard__go,.btn-pill{border-radius:99px;font-weight:600;font-size:14.5px;height:44px;padding:0 22px;display:inline-flex;align-items:center;justify-content:center;gap:8px;box-shadow:none;transition:transform .35s var(--spring),background .2s,border-color .2s}
.btn--lg,.cine-cta,.cine-cta-ghost{height:48px;padding:0 26px;font-size:15px}
.btn--solid,.cine-cta,.pp-cta--solid{background:var(--ink);color:var(--bg);border:1px solid var(--ink)}
.btn--solid:hover,.cine-cta:hover,.pp-cta--solid:hover{background:var(--ink);transform:translateY(-1px);box-shadow:0 10px 24px -12px rgba(0,0,0,.6)}
.btn--glass,.cine-cta-ghost,.pp-cta--glass,.mkt__go,.acard__go{background:transparent;border:1px solid var(--line);color:var(--ink);backdrop-filter:none}
.btn--glass:hover,.cine-cta-ghost:hover,.pp-cta--glass:hover,.mkt__go:hover,.acard__go:hover{background:rgba(127,127,140,.1);border-color:var(--muted);transform:translateY(-1px)}
.ctaband .cine-cta{background:#fff;color:#000;border-color:#fff}
.ctaband .cine-cta-ghost{border-color:rgba(255,255,255,.28);color:#fff}
/* cards: flat surface, a hairline, 22px corners, a spring lift where it links */
.card2,.acard,.rc,.mkt__card,.peak,.wheel__t,.founder,.statusbox,.figs__g>*,.tablewrap,.notice,.pp,.cities>*,.rcard,.rel,.markbox,.mini,.post{border-radius:22px;box-shadow:none;border:1px solid var(--line);background:var(--surface)}
.card2{padding:24px}
.card2 p,.acard p,.peak p,.mkt__card p{color:var(--muted);font-size:14.5px;line-height:1.55}
.rc-link:hover .rc,.acard:hover,.mkt__card:hover,.peak:hover,.lk:hover{transform:translateY(-4px);border-color:var(--muted);box-shadow:none;transition:transform .4s var(--spring),border-color .2s}
.notice{background:color-mix(in srgb,var(--zug) 6%,var(--surface));border-color:color-mix(in srgb,var(--zug) 30%,transparent)}
.step__n{color:var(--faint);font-family:var(--sans);font-size:12px;letter-spacing:0}
.tablewrap{background:var(--surface)}
.matrix th{font-family:var(--sans);font-size:12px;letter-spacing:0;text-transform:none;color:var(--ink);font-weight:600}
/* faq as on the home */
.faq{display:block;border-top:0}
.faq details{border-bottom:1px solid var(--line-2);background:none;border-radius:0;padding:0}
.faq summary{padding:20px 44px 20px 0;font-size:18px;color:var(--ink)}
.faq p{color:var(--muted)}
/* the closing band: x.ai's dark card */
.ctaband{max-width:1180px;margin:56px auto;padding:0 32px}
.ctaband-inner{background:#0B0B0D;border:1px solid var(--line);border-radius:24px;box-shadow:none;background-image:radial-gradient(ellipse at 50% -20%,rgba(218,41,28,.28),transparent 60%)}
:root[data-zt="light"] .ctaband-inner{background:#0B0B0D}
/* the about-page stage: the mark is the ball */
.ag-head{fill:url(#ballg)}
.ag-stage{background:#000}
/* the big figures */
.figs__g b,.figs__g strong,.hstat-cell b{font-weight:500;letter-spacing:-.03em}
@media (max-width:720px){.ptitle{font-size:34px}.h2{font-size:28px}.phero{padding:56px 0 44px}.btn--lg{width:100%}}

/* ── the hero fills the screen: the bar sits over its top 72px ── */
.rh{min-height:100svh}
/* ── the switcher, x.ai's: three small icons, the seat a 28px circle ── */
.tsw--sm{--seat:28px;--pad:3px;gap:0}
.tsw--sm button{width:28px;height:28px;padding:0;justify-content:center;gap:0}
.tsw--sm button span{display:none}
.tsw--sm button svg{width:13px;height:13px}

/* ── the bar aligns with the page column: the lockup and the actions sit where the content does ── */
.nav{padding:0 max(24px,calc((100% - 1116px) / 2));gap:12px}
.nav .brand{margin-right:28px}
.nav-login{margin-right:4px}
@media (max-width:1080px){.nav{padding:0 20px}}

/* ── the bar: left-aligned on the column, and it leaves when you scroll down ── */
.nav{justify-content:flex-start;transition:transform .35s var(--rev),background .3s,border-color .3s}
.nav>.spacer{display:block;flex:1 1 auto}
.nav.is-away{transform:translateY(-100%)}
/* the panels: nearly solid, so the page does not read through them */
.dd__panel{background:color-mix(in srgb,var(--bg) 92%,transparent)}
@media (max-width:1080px){.nav>.spacer{display:none}}

/* ═══ NEWS — revolut.com/news, measured ═══ */
.phero--left .wrap{text-align:left}
.phero--left .ptitle{max-width:760px;margin-left:0}
.phero--left .psub{margin-left:0;max-width:640px}
.nx-utils{display:grid;grid-template-columns:repeat(2,minmax(0,340px));gap:16px;justify-content:center}
.nx-util{display:flex;flex-direction:column;gap:10px;padding:26px 24px;border-radius:22px;background:var(--surface);border:1px solid var(--line);color:var(--ink);transition:transform .4s var(--spring),border-color .2s}
.nx-util:hover{transform:translateY(-4px);border-color:var(--muted)}
.nx-util__ic{width:64px;height:64px;border-radius:18px;background:var(--surface-2);border:1px solid var(--line-2);display:grid;place-items:center;margin-bottom:8px}
.nx-util__ic svg{width:28px;height:28px;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.nx-util h3{margin:0;font-family:var(--sans);font-weight:500;font-size:24px;letter-spacing:-.02em}
.nx-util p{margin:0;color:var(--muted);font-size:15px;line-height:1.55;flex:1}
.nx-util__go{font-size:15px;font-weight:500;color:var(--ink)}
.nx-h{text-align:center;margin-bottom:22px}
.nx-filters{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:32px}
.nx-filter{display:inline-flex;gap:4px;padding:4px;border-radius:99px;background:var(--surface);border:1px solid var(--line)}
.nx-pill{border:0;background:none;color:var(--muted);font:inherit;font-size:13px;font-weight:500;padding:6px 14px;border-radius:99px;cursor:pointer;transition:background-color .3s var(--rev),color .2s}
.nx-pill.is-on{background:var(--ink);color:var(--bg)}
.nx-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:1000px;margin:0 auto}
.nx-card{border-radius:22px;background:var(--surface);border:1px solid var(--line);overflow:hidden;scroll-margin-top:96px;transition:transform .4s var(--spring),border-color .2s}
.nx-card:hover{transform:translateY(-4px);border-color:var(--muted)}
.nx-card .nw__thumb{aspect-ratio:2/1;border-radius:0;border:0;border-bottom:1px solid var(--line-2);margin:0}
.nx-card__body{padding:22px 24px 24px}
.nx-card__cat{display:block;font-size:13px;font-weight:500;color:var(--muted);margin-bottom:8px}
.nx-card h2{margin:0 0 8px;font-family:var(--sans);font-weight:500;font-size:24px;letter-spacing:-.02em;line-height:1.2;color:var(--ink)}
.nx-card time{display:block;font-size:12px;color:var(--faint)}
.nx-card p{margin:14px 0 0;color:var(--muted);font-size:15px;line-height:1.55}
.nx-card.is-more{display:none}
.nx-card.is-hidden{display:none}
.nx-grid.is-all .nx-card.is-more:not(.is-hidden){display:block}
.nx-more{text-align:center;margin:28px 0 0}
.nx-grid.is-all+.nx-more{display:none}
.nx-empty{text-align:center;color:var(--muted);margin:28px 0 0}
@media (max-width:760px){.nx-utils,.nx-grid{grid-template-columns:1fr}.nx-util h3,.nx-card h2{font-size:20px}}

/* ── the bar at Revolut's sizes: a 24px-tall wordmark, 16px/500 words, 42px actions ── */
.brand__wm{font-size:34px;letter-spacing:.12em}          /* Instrument Sans caps at 34px stand 24px tall, as Revolut's wordmark does */
.brand .bot--brand{width:44px;height:44px}
.brand{gap:12px}
.nav-word{font-size:16px;font-weight:500;padding:8px 20px}
.nav-login{font-size:16px;font-weight:500;padding:10px 24px}
.nav>.nav-pill,.mob__foot .nav-pill{font-size:16px;font-weight:500;height:42px;padding:0 24px}
@media (max-width:720px){.brand{gap:10px}.brand .bot--brand{width:40px;height:40px}.brand__wm{font-size:30px;letter-spacing:.12em}}

/* ── the wordmark as Revolut sets theirs: a capital, then lowercase, tight, at the same 24px cap height ── */
.brand__wm{text-transform:none;letter-spacing:-.02em;font-size:34px}
@media (max-width:720px){.brand__wm{font-size:30px;letter-spacing:-.02em}}

/* ── the burger as Revolut's: a bare 24px icon, three 16px lines, an X when open ── */
.nav-burger{width:44px;height:44px;padding:10px 14px;margin-right:-14px}
.nav-burger i{width:16px;height:2px;margin:3px 0;margin-left:auto;transition:transform .25s var(--rev),opacity .15s,width .25s}
.nav-burger i:nth-child(2){width:16px}
.nav-burger.is-x i{width:18px;margin-left:-1px}
.nav-burger.is-x i:nth-child(1){transform:translateY(5px) rotate(45deg)}.nav-burger.is-x i:nth-child(2){opacity:0}.nav-burger.is-x i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.mob__foot{gap:16px}
.mob__login{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 24px;border-radius:99px;background:#191C1F;color:#fff;font-size:16px;font-weight:500}
.mob__foot .nav-pill{height:44px;background:#fff;color:#000}

/* ── the wordmark as x.ai's: the letters live in the mark. They spring out of the ball on load,
      fold back into it as you scroll, and the ball grows with a glow when it stands alone. ── */
.nav .brand__wm{display:inline-flex;overflow:visible;max-width:200px;transition:max-width .5s var(--rev),margin .5s var(--rev)}
.nav .brand__wm i{font-style:normal;display:inline-block;transition:transform .55s var(--spring),opacity .3s ease;transition-delay:calc(var(--i) * 45ms)}
.nav.is-mark .brand__wm{max-width:0;margin-left:-12px}
.nav.is-mark .brand__wm i{transform:translateX(calc(-28px - var(--i) * 14px)) scale(.4);opacity:0;transition-delay:calc((4 - var(--i)) * 40ms)}
.nav .brand .bot--brand{transition:transform .6s var(--spring),filter .4s}
.nav.is-mark .brand .bot--brand{transform:scale(1.32);filter:drop-shadow(0 6px 14px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(218,41,28,.45))}
.nav.is-mark .brand:hover .bot--brand{transform:scale(1.32) rotate(-6deg)}
.nav.is-boot .brand__wm i{transform:translateX(calc(-28px - var(--i) * 14px)) scale(.4);opacity:0;transition:none}
@media (prefers-reduced-motion:reduce){.nav .brand__wm i,.nav .brand .bot--brand,.nav .brand__wm{transition:none}}

/* ── the wordmark: a full capital Z, then UGER as small capitals, a step below it ── */
.brand__wm,.auth__wm{text-transform:none;font-variant-caps:small-caps;letter-spacing:.02em}

/* ── the wordmark, drawn: a Z with a slice through its diagonal, then UGER as small capitals ── */
.brand__wm{display:inline-flex;align-items:baseline;gap:.04em;font-variant-caps:normal}
.wm-z{height:.72em;width:auto;display:inline-block;flex:none;align-self:center;transform:translateY(.02em);color:currentColor;overflow:visible}
.wm-rest{font-variant-caps:small-caps;letter-spacing:.03em}
.auth__wm .wm-z{height:.72em}
/* the letters that live in the mark: the Z is letter 0, the rest are split by script.js */
.nav .brand__wm .wm-z{transition:transform .55s var(--spring),opacity .3s ease}
.nav.is-mark .brand__wm .wm-z{transform:translateX(-28px) scale(.4);opacity:0;transition-delay:200ms}
.nav.is-boot .brand__wm .wm-z{transform:translateX(-28px) scale(.4);opacity:0;transition:none}
/* the mark, bigger, alive: it breathes with a faint red halo and springs when you reach for it */
.brand .bot--brand{width:52px;height:52px;animation:mark-breathe 6s ease-in-out infinite;transform-origin:center}
.brand:hover .bot--brand{animation:none;transform:scale(1.14) rotate(-6deg);filter:drop-shadow(0 8px 16px rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(218,41,28,.55))}
.nav.is-mark .brand .bot--brand{animation:none}
@keyframes mark-breathe{0%,100%{transform:scale(1);filter:drop-shadow(0 4px 8px rgba(0,0,0,.5)) drop-shadow(0 0 0 rgba(218,41,28,0))}50%{transform:scale(1.04);filter:drop-shadow(0 6px 12px rgba(0,0,0,.5)) drop-shadow(0 0 16px rgba(218,41,28,.35))}}
@media (max-width:720px){.brand .bot--brand{width:46px;height:46px}}
@media (prefers-reduced-motion:reduce){.brand .bot--brand{animation:none}}

/* ── the wordmark, Tesla's manner: ZUGER in capitals, wide, light, the E as three bars ── */
.brand__wm{font-weight:600;letter-spacing:.26em;gap:0;align-items:center}
.wm-rest{font-variant-caps:normal;text-transform:uppercase;letter-spacing:.26em}
.wm-rest--r{letter-spacing:0}
.wm-z,.wm-e{height:.7em;width:auto;transform:none;margin-right:.26em}
.wm-e{margin-left:0}
.nav .brand__wm .wm-e{transition:transform .55s var(--spring),opacity .3s ease;transition-delay:calc(3 * 45ms)}
.nav.is-mark .brand__wm .wm-e{transform:translateX(calc(-28px - 3 * 14px)) scale(.4);opacity:0;transition-delay:40ms}
.nav.is-boot .brand__wm .wm-e{transform:translateX(calc(-28px - 3 * 14px)) scale(.4);opacity:0;transition:none}

/* ── the wordmark, drawn: ZUGER in one stroke, Tesla's manner, smaller, on one baseline ── */
.brand__wm{display:inline-flex;align-items:center;gap:0;letter-spacing:0;font-size:0;max-width:none}
.wm-svg{height:20px;width:auto;display:block;overflow:visible;color:currentColor}
.auth__wm .wm-svg{height:17px}
@media (max-width:720px){.wm-svg{height:17px}}
.wm-l{transform-box:fill-box;transform-origin:center}
.nav .wm-l{transition:transform .55s var(--spring),opacity .3s ease;transition-delay:calc(var(--i) * 45ms)}
.nav.is-mark .brand__wm{max-width:0;margin-left:-12px}
.nav.is-mark .wm-l{transform:translateX(calc(-40px - var(--i) * 16px)) scale(.4);opacity:0;transition-delay:calc((4 - var(--i)) * 40ms)}
.nav.is-boot .wm-l{transform:translateX(calc(-40px - var(--i) * 16px)) scale(.4);opacity:0;transition:none}
@media (prefers-reduced-motion:reduce){.nav .wm-l{transition:none}}

/* ── the mark in motion: the eyes look. They follow the pointer on the bar's mark and the
      hero ball; left alone they glance about now and then; the mark breathes and springs. ── */
.b-look{transform:translate(var(--b-dx,0px),var(--b-dy,0px));transition:transform .28s cubic-bezier(.2,.7,.2,1);animation:var(--b-look-anim,none) 9s var(--b-delay,0s) ease-in-out infinite}
.bot--brand{--b-look-anim:mark-glance}
.bot--brand.is-looking{--b-look-anim:none}
@keyframes mark-glance{0%,18%{transform:translate(0,0)}22%,32%{transform:translate(2.6px,-1px)}36%,48%{transform:translate(-2.4px,.6px)}52%,60%{transform:translate(.6px,2.2px)}64%,100%{transform:translate(0,0)}}
.nav .brand .bot--brand{animation:mark-breathe 6s ease-in-out infinite,mark-bob 7s ease-in-out infinite}
@keyframes mark-bob{0%,100%{translate:0 0;rotate:-1deg}50%{translate:0 -2px;rotate:1.5deg}}
.brand:hover .bot--brand{animation:none;transform:scale(1.14) rotate(-6deg)}
.nav.is-mark .brand .bot--brand{animation:mark-breathe 6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.b-look{animation:none;transition:none}}
/* the three words sit a step further from the lockup */
.nav .brand{margin-right:52px}
/* the wordmark a step smaller: 17px on the bar, 15 on a phone and in the popup */
.wm-svg{height:17px}
.auth__wm .wm-svg{height:15px}
@media (max-width:720px){.wm-svg{height:15px}}

/* ═══════════════════════════════════════════════════════════
   THE PAGES AS REVOLUT BUSINESS'S — measured on /business/,
   /business-account-plans/, /expense-management/, /contact-sales-home/:
   pure black; a full-height hero, left-aligned, a 16px eyebrow, a 57px/500
   title, one line, two pills; sections at 120px with 48px/500 titles;
   dark-grey cards (#141416, 24px corners); a comparison table; FAQs.
   ═══════════════════════════════════════════════════════════ */
.phero{min-height:calc(100svh - 72px);display:flex;align-items:center;padding:96px 0 72px}
.phero .wrap{text-align:left;width:100%}
.pagepill{display:block;background:none;border:0;padding:0;margin:0 0 20px;font-size:16px;font-weight:400;color:var(--ink);box-shadow:none;letter-spacing:0;text-transform:none}
.pagepill .cine-dot{display:none}
.ptitle{font-size:clamp(40px,4.4vw,57px);font-weight:500;letter-spacing:-.02em;line-height:1.06;margin:0 0 20px;max-width:780px;text-align:left}
.psub{font-size:16px;color:var(--muted);max-width:640px;margin:0 0 30px;text-align:left;line-height:1.55}
.hero__cta{justify-content:flex-start;gap:12px}
.hero__cta--c{justify-content:center;margin:0 0 40px}
.btn--lg{height:46px;padding:0 24px;font-size:16px}
.phero--agent .wrap{text-align:left}
.sec{padding:120px 0}
.sec--tight{padding-top:0}
.sec__hd{text-align:left;max-width:760px;margin:0 0 40px}
.sec__hd .eyebrow{font-size:16px;color:var(--ink)}
.h2{font-size:clamp(32px,3.6vw,48px);font-weight:500;letter-spacing:-.02em;line-height:1.1;text-align:left}
.h2--c{text-align:center;margin-bottom:36px}
.sec__sub{font-size:16px;color:var(--muted);max-width:640px}
.card2,.acard,.rc,.mkt__card,.peak,.wheel__t,.founder,.statusbox,.st,.xt,.lk,.nx-util,.nx-card,.post{border-radius:24px}
:root[data-zt="dark"] .card2,:root[data-zt="dark"] .acard,:root[data-zt="dark"] .rc,:root[data-zt="dark"] .mkt__card,:root[data-zt="dark"] .peak,:root[data-zt="dark"] .wheel__t{background:#141416;border-color:rgba(255,255,255,.08)}
.card2{padding:26px 24px}
.card2 h3{font-size:16px;font-weight:500;margin:0 0 8px}
.card2 p{font-size:13.5px;color:var(--muted);line-height:1.55}
.card2__k{font-size:12px;color:var(--faint);margin:0 0 12px;font-family:var(--sans);letter-spacing:0}
.ctaband-inner{text-align:center}
.ctaband-title{font-size:clamp(32px,3.6vw,48px)}
/* find your perfect fit */
.fit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.fit{display:flex;flex-direction:column;gap:6px;padding:26px 24px;border-radius:24px;background:var(--surface);border:1px solid var(--line);color:var(--ink);transition:transform .4s var(--spring),border-color .2s}
:root[data-zt="dark"] .fit{background:#141416;border-color:rgba(255,255,255,.08)}
.fit:hover{transform:translateY(-4px);border-color:var(--muted)}
.fit--hi{border-color:var(--ink)}
.fit__ic{width:24px;height:24px;margin-bottom:8px}
.fit__ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fit b{font-family:var(--sans);font-weight:500;font-size:24px;letter-spacing:-.02em}
.fit__price{font-size:15px;color:var(--ink)}
.fit p{margin:8px 0 0;font-size:13.5px;color:var(--muted);line-height:1.5}
/* dive into the details */
.cmp{border-radius:24px;background:var(--surface);border:1px solid var(--line);overflow:hidden}
:root[data-zt="dark"] .cmp{background:#141416;border-color:rgba(255,255,255,.08)}
.cmp__head,.cmp__row{display:grid;grid-template-columns:1.6fr repeat(4,1fr);align-items:center}
.cmp__head{position:sticky;top:72px;z-index:5;background:var(--surface);border-bottom:1px solid var(--line-2)}
:root[data-zt="dark"] .cmp__head{background:#141416}
.cmp__plan{padding:22px 16px;border-left:1px solid var(--line-2)}
.cmp__plan b{display:block;font-family:var(--sans);font-weight:500;font-size:18px;letter-spacing:-.01em}
.cmp__plan span{display:block;font-size:14px;color:var(--ink);margin-top:2px}
.cmp__plan small{display:block;font-size:11.5px;color:var(--faint);margin-top:4px}
.cmp__plan--hi{background:rgba(255,255,255,.04)}
.cmp__group{padding:26px 20px 8px;font-size:15px;font-weight:500;color:var(--ink);border-top:1px solid var(--line-2)}
.cmp__row{border-top:1px solid var(--line-2)}
.cmp__k{padding:14px 20px}
.cmp__k b{display:block;font-weight:500;font-size:14px;color:var(--ink)}
.cmp__k span{display:block;font-size:12px;color:var(--faint);margin-top:2px;line-height:1.4}
.cmp__v{text-align:center;padding:14px 12px;font-size:14px;color:var(--ink);border-left:1px solid var(--line-2);align-self:stretch;display:flex;align-items:center;justify-content:center}
.cmp__yes{font-style:normal;color:var(--ink)}.cmp__no{font-style:normal;color:var(--faint)}
/* contact: the split */
.phero--split{align-items:center}
.csplit{display:grid;grid-template-columns:1fr 420px;gap:64px;align-items:center}
.cform{display:grid;gap:10px;padding:24px;border-radius:24px;background:var(--surface);border:1px solid var(--line)}
:root[data-zt="dark"] .cform{background:#141416;border-color:rgba(255,255,255,.08)}
.cform__row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cform__in{width:100%;height:48px;padding:0 12px;box-sizing:border-box;border:0;border-radius:12px;background:rgba(127,127,140,.16);color:var(--ink);font:inherit;font-size:15px;appearance:none}
:root[data-zt="dark"] .cform__in{background:rgba(255,255,255,.14)}
.cform__in::placeholder{color:var(--muted)}
.cform__in:focus{outline:none;box-shadow:0 0 0 1px rgba(127,127,140,.5)}
.cform__in--area{height:auto;min-height:88px;padding:12px;resize:vertical}
select.cform__in{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 20px) 21px,calc(100% - 15px) 21px;background-size:5px 5px;background-repeat:no-repeat}
.cform__terms{margin:4px 0 0;font-size:12px;color:var(--faint);text-align:center}
.cform__terms a{color:var(--ink)}
.cform__go{height:46px;border:0;border-radius:9999px;background:var(--ink);color:var(--bg);font:inherit;font-size:15px;font-weight:500;cursor:pointer;transition:transform .3s var(--spring)}
.cform__go:hover{transform:translateY(-1px)}
.cform__hp{display:none}
@media (max-width:1000px){.fit-grid{grid-template-columns:1fr 1fr}.csplit{grid-template-columns:1fr;gap:40px}}
@media (max-width:760px){
  .phero{min-height:auto;padding:64px 0 48px}.sec{padding:80px 0}
  .fit-grid{grid-template-columns:1fr}
  .cmp__head{position:static}.cmp__head,.cmp__row{grid-template-columns:1fr repeat(4,minmax(52px,1fr))}
  .cmp__plan{padding:14px 6px;text-align:center}.cmp__plan b{font-size:13px}.cmp__plan span,.cmp__plan small{display:none}
  .cmp__k{padding:12px 14px}.cmp__k span{display:none}.cmp__v{padding:12px 4px;font-size:12px}
  .cform__row{grid-template-columns:1fr}
}

/* ── no sideways give on a phone or iPad: grid items may shrink below their content, code scrolls inside its box ── */
html,body{overflow-x:hidden;max-width:100%}
.h-dev>*,.dev>*,.h-split>*,.h-start>*,.csplit>*,.h-tiles>*,.wrap{min-width:0}
.h-codewrap,.code{min-width:0;max-width:100%}
.code pre,.code__b{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.pre-sm{overflow-x:auto}
.rh,.phero,.gridstat,.ag-stage{overflow-x:clip}
/* no hairline under the bar on a phone or iPad */
@media (max-width:1080px){.nav,.nav.is-stuck,.nav.is-menu{border-bottom-color:transparent;box-shadow:none}}

/* ── the mark, soft: slower cycles, smaller travel, no overshoot, top and footer alike ── */
:root{--soft:cubic-bezier(.22,.8,.24,1)}
.brand .bot--brand{animation:mark-breathe-soft 9s ease-in-out infinite;transition:transform .9s var(--soft),filter .9s var(--soft)}
.nav .brand .bot--brand{animation:mark-breathe-soft 9s ease-in-out infinite,mark-bob-soft 11s ease-in-out infinite}
@keyframes mark-breathe-soft{0%,100%{transform:scale(1);filter:drop-shadow(0 4px 8px rgba(0,0,0,.5)) drop-shadow(0 0 0 rgba(218,41,28,0))}50%{transform:scale(1.025);filter:drop-shadow(0 5px 10px rgba(0,0,0,.5)) drop-shadow(0 0 12px rgba(218,41,28,.22))}}
@keyframes mark-bob-soft{0%,100%{translate:0 0;rotate:-.6deg}50%{translate:0 -1.5px;rotate:.8deg}}
.brand:hover .bot--brand{animation:none;transform:scale(1.07) rotate(-3deg);filter:drop-shadow(0 6px 12px rgba(0,0,0,.5)) drop-shadow(0 0 16px rgba(218,41,28,.35))}
.nav.is-mark .brand .bot--brand{animation:mark-breathe-soft 9s ease-in-out infinite;transform:scale(1.24)}
.nav.is-mark .brand:hover .bot--brand{transform:scale(1.24) rotate(-3deg)}
.b-look{transition:transform .5s var(--soft);animation-duration:14s}
.rl-chip .b-look{transition:transform 1.2s ease-in-out}
@keyframes mark-glance{0%,22%{transform:translate(0,0)}27%,36%{transform:translate(1.6px,-.6px)}41%,52%{transform:translate(-1.5px,.4px)}57%,64%{transform:translate(.4px,1.3px)}70%,100%{transform:translate(0,0)}}
.nav .wm-l{transition:transform .7s var(--soft),opacity .35s ease}
.nav .brand__wm{transition:max-width .7s var(--soft),margin .7s var(--soft)}
.foot .brand .bot--brand{animation:mark-breathe-soft 9s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.brand .bot--brand,.nav .brand .bot--brand,.foot .brand .bot--brand{animation:none;transition:none}}
/* no line after the switcher in the footer */
@media (max-width:900px){.foot__brand{border-bottom:0;padding-bottom:8px}}

/* ── a click on the mark: one full, soft turn ── */
/* ── a press on the mark: the eyes bounce, gladly — a big hop with a squash and a stretch, a small second hop,
   the eyes leaning in a touch at the top. The large eye goes first; the small one follows a beat later, not as high. ── */
.b-eye-l,.b-eye-r{transform-box:fill-box;transform-origin:center bottom}
.b-eye-l{animation:var(--b-hop-l,none) .95s cubic-bezier(.3,1.35,.55,1) both}
.b-eye-r{animation:var(--b-hop-r,none) .95s .09s cubic-bezier(.3,1.35,.55,1) both}
.bot--brand.is-hop{--b-hop-l:b-hop-l;--b-hop-r:b-hop-r}
@keyframes b-hop-l{0%{transform:none}10%{transform:translateY(1.4px) scale(1.2,.74)}34%{transform:translateY(-8px) scale(.88,1.22) rotate(8deg)}52%{transform:translateY(.9px) scale(1.16,.82)}66%{transform:translateY(-3.6px) scale(.95,1.1) rotate(4deg)}80%{transform:translateY(.5px) scale(1.08,.92)}100%{transform:none}}
@keyframes b-hop-r{0%{transform:none}10%{transform:translateY(1.1px) scale(1.18,.76)}36%{transform:translateY(-5.5px) scale(.9,1.18) rotate(-8deg)}54%{transform:translateY(.7px) scale(1.14,.84)}68%{transform:translateY(-2.4px) scale(.96,1.08) rotate(-4deg)}82%{transform:translateY(.4px) scale(1.06,.94)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.b-eye-l,.b-eye-r{animation:none}}

/* ── the living ball on a stage (investors): the home hero's mark, centred in the flow, entering when it comes into view ── */
.mark--stage{position:relative;right:auto;top:auto;transform:none;width:min(46vw,340px);margin:clamp(40px,7vw,64px) auto clamp(6px,2vw,14px);opacity:1}
.mark--stage.reveal{transform:none}
.mark--stage .ball{animation:none;opacity:0}
.mark--stage.in .ball{animation:h-enter 1.1s cubic-bezier(.34,1.5,.4,1) both}
@media (max-width:900px){.mark--stage{width:min(62vw,300px);order:0;margin:36px auto 8px}}
/* the brand page's lockups: the ball at 132px beside the wordmark at 44px */
.lockup{display:flex;align-items:center;gap:28px;justify-content:center}
.brand__wm--big .wm-svg{height:44px}
@media (max-width:600px){.lockup{gap:16px}.brand__wm--big .wm-svg{height:30px}.lockup .bot--xl{width:88px;height:88px}}

/* ── tables and FAQs in the page language: sans labels, neutral chips, hairline rows, no card shadows ── */
.matrix{font-size:14.5px}
.matrix th{font-family:var(--sans);font-size:13px;letter-spacing:0;text-transform:none;color:var(--muted);font-weight:500;padding:16px 20px}
.matrix td{padding:15px 20px;color:var(--ink-2);line-height:1.5}
.matrix td:first-child{color:var(--ink);font-weight:500}
.matrix code{font-family:var(--mono);font-size:12.5px;color:var(--ink);background:rgba(127,127,140,.16);padding:2px 7px;border-radius:6px}
:root[data-zt="dark"] .matrix code{background:rgba(255,255,255,.08)}
.matrix a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.matrix tbody tr:hover td{background:rgba(127,127,140,.06)}
.tablewrap{border-radius:24px}
@media (max-width:720px){
  .matrix tr{padding:14px 18px}
  .matrix td{grid-template-columns:104px 1fr;padding:6px 0}
  .matrix td::before{font-family:var(--sans);font-size:12px;letter-spacing:0;text-transform:none;color:var(--faint);padding-top:1px}
}
.faq details{box-shadow:none;border:0;border-bottom:1px solid var(--line-2)}
.faq summary{font-weight:500;letter-spacing:-.01em}
.faq summary:hover{color:var(--ink)}
.faq details p{color:var(--muted);font-size:15px;line-height:1.55;padding:0 0 22px;max-width:70ch}
.faq .x::before,.faq .x::after{background:var(--muted)}

/* ═══ THE FOUNDER — the story left, a living card right ═══ */
.fd{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.fd__text .h2{margin-bottom:16px}
.fd__text .sec__sub{margin-bottom:26px}
.fd__card{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:26px;display:flex;flex-direction:column;gap:18px;position:relative;overflow:hidden;
  transition:transform .5s var(--spring),border-color .2s}
:root[data-zt="dark"] .fd__card{background:#141416 radial-gradient(70% 60% at 100% 0%,rgba(218,41,28,.14),transparent 70%) no-repeat;border-color:rgba(255,255,255,.08)}
.fd__card:hover{transform:translateY(-4px);border-color:var(--muted)}
.fd__who{display:flex;align-items:center;gap:14px}
.fd__ava{width:56px;height:56px;flex:none;animation:mark-breathe-soft 9s ease-in-out infinite;--b-look-anim:mark-glance}
.fd__who b{display:block;font-family:var(--sans);font-weight:500;font-size:22px;letter-spacing:-.02em;line-height:1.1}
.fd__who b a{color:var(--ink)}
.fd__who span{display:block;font-size:13px;color:var(--muted);margin-top:4px}
.fd__cities{display:grid;gap:8px}
.fd__city{display:grid;grid-template-columns:10px 1fr auto auto;gap:14px;align-items:center;padding:14px 16px;border-radius:14px;background:rgba(127,127,140,.08);border:1px solid var(--line-2);
  opacity:0;transform:translateY(14px) scale(.98)}
.fd__card.in .fd__city{animation:h-springIn .9s var(--spring) both;animation-delay:calc(.25s + var(--i) * .12s)}
.fd__city b{display:block;font-weight:500;font-size:15px;color:var(--ink)}
.fd__city>div>span{display:block;font-size:12px;color:var(--faint);margin-top:2px}
.fd__city small{font-size:12px;color:var(--muted);text-align:right}
.fd__clock{font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums;min-width:52px;text-align:right;letter-spacing:.02em}
.fd__dot{width:10px;height:10px;border-radius:50%;background:var(--zug);box-shadow:0 0 0 0 rgba(218,41,28,.5);animation:fd-pulse 2.6s ease-out infinite}
.fd__dot--glacier{background:var(--glacier);box-shadow:0 0 0 0 rgba(59,130,246,.5);animation-delay:.9s}
.fd__dot--sky{background:var(--sky);box-shadow:0 0 0 0 rgba(6,182,212,.5);animation-delay:1.8s}
.fd__dot--iris{animation-delay:0s}
@keyframes fd-pulse{0%{box-shadow:0 0 0 0 currentColor}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
.fd__dot{color:rgba(218,41,28,.45)}.fd__dot--glacier{color:rgba(59,130,246,.45)}.fd__dot--sky{color:rgba(6,182,212,.45)}
.fd__foot{margin:4px 0 0;font-size:12.5px;color:var(--faint)}
@media (max-width:900px){.fd{grid-template-columns:1fr;gap:36px}}
@media (max-width:560px){.fd__city{grid-template-columns:10px 1fr auto}.fd__city small{display:none}.fd__card{padding:20px}}
@media (prefers-reduced-motion:reduce){.fd__city{opacity:1;transform:none;animation:none!important}.fd__dot,.fd__ava{animation:none}}

/* ── the closing band in the page language: a dark card, no bloom, no glow, a plain eyebrow, two pills ── */
.ctaband{max-width:1180px;margin:0 auto 120px;padding:0 32px}
.ctaband-inner{background:var(--surface);background-image:none;border:1px solid var(--line);border-radius:24px;box-shadow:none;padding:clamp(56px,7vw,88px) 24px;color:var(--ink)}
:root[data-zt="dark"] .ctaband-inner{background:#141416;border-color:rgba(255,255,255,.08)}
.ctaband-inner::after{display:none}
.ctaband-inner>.cine-pill{background:none;border:0;padding:0;margin:0 0 18px;font-size:16px;font-weight:400;color:var(--ink);box-shadow:none}
.ctaband .cine-pill .cine-dot{display:none}
.ctaband-title{font-size:clamp(32px,3.6vw,48px);font-weight:500;letter-spacing:-.02em;line-height:1.1;color:var(--ink);margin:0 0 14px}
.ctaband-sub{font-size:16px;color:var(--muted);max-width:560px;margin:0 auto 28px;font-weight:400}
.ctaband .cine-ctas{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.ctaband .cine-cta,.ctaband .cine-cta-ghost{height:46px;padding:0 24px;border-radius:9999px;font-size:16px;font-weight:500;animation:none;box-shadow:none;transition:transform .3s var(--spring),background .2s,border-color .2s}
.ctaband .cine-cta{background:var(--ink);color:var(--bg);border:1px solid var(--ink)}
.ctaband .cine-cta:hover{transform:translateY(-1px);box-shadow:none;background:var(--ink)}
.ctaband .cine-cta-ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.ctaband .cine-cta-ghost:hover{border-color:var(--muted);background:rgba(127,127,140,.1)}
@media (max-width:720px){.ctaband{padding:0 20px;margin-bottom:80px}.ctaband-inner{padding:48px 20px}.ctaband .cine-ctas{flex-direction:column}.ctaband .cine-cta,.ctaband .cine-cta-ghost{width:100%}}

/* ── laser beams on the slabs' lit edges: a point of light, red with a white core, runs along the top edge of each stone slab ── */
.slab{overflow:visible}
.slab::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent 0 38%,rgba(218,41,28,.35) 44%,#DA291C 48%,#FFFFFF 50%,#DA291C 52%,rgba(218,41,28,.35) 56%,transparent 62% 100%);
  background-size:260% 100%;background-repeat:no-repeat;animation:slab-beam 7s cubic-bezier(.45,0,.55,1) infinite;
  filter:drop-shadow(0 0 6px rgba(218,41,28,.9)) drop-shadow(0 0 14px rgba(218,41,28,.5))}
.slab--b::before{animation-duration:8.5s;animation-delay:-3.2s;animation-direction:reverse}
@keyframes slab-beam{0%{background-position:130% 0}100%{background-position:-130% 0}}
@media (prefers-reduced-motion:reduce){.slab::before{animation:none;background:none}}

/* ═══ THE HOME IN THE HERO'S LANGUAGE — black ground, stone slabs with a lit edge, a beam on hover, the red bloom behind titles ═══ */
:root[data-zt="dark"] body.home{background:#000}
:root[data-zt="dark"] body.home .h-sec,:root[data-zt="dark"] body.home .gridstat,:root[data-zt="dark"] body.home .tsec{background:#000}
:root[data-zt="dark"] body.home .tsec--run{background:#000}
:root[data-zt="dark"] body.home .h-sec{position:relative}
:root[data-zt="dark"] body.home .h-sec::before{content:"";position:absolute;left:50%;top:0;width:60%;height:340px;transform:translateX(-50%);pointer-events:none;z-index:0;
  background:radial-gradient(closest-side,rgba(218,41,28,.12),transparent);filter:blur(40px)}
:root[data-zt="dark"] body.home .h-sec>.wrap{position:relative;z-index:1}
/* the stone: the slab's material on every card */
:root[data-zt="dark"] body.home .xt,:root[data-zt="dark"] body.home .lk,:root[data-zt="dark"] body.home .st,:root[data-zt="dark"] body.home .h-panel,
:root[data-zt="dark"] body.home .h-codewrap,:root[data-zt="dark"] body.home .pp,:root[data-zt="dark"] body.home .nw__thumb,:root[data-zt="dark"] body.home .console.ms{
  background:linear-gradient(160deg,#1E1F26,#101116 55%,#08090C);border:0;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.14),inset -1px -1px 0 rgba(255,255,255,.03),0 30px 60px -30px rgba(0,0,0,.9)}
:root[data-zt="dark"] body.home .xt__foot::before{background:linear-gradient(to bottom,rgba(11,12,15,0),#0A0B0E)}
:root[data-zt="dark"] body.home .xt__msg,:root[data-zt="dark"] body.home .h-row{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.06)}
:root[data-zt="dark"] body.home .h-row--hi{background:rgba(218,41,28,.14);border-color:rgba(218,41,28,.45)}
:root[data-zt="dark"] body.home .pp-hi{box-shadow:inset 1px 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.14),0 0 44px rgba(218,41,28,.18),0 30px 60px -30px rgba(0,0,0,.9)}
:root[data-zt="dark"] body.home .h-faq details{border-bottom-color:rgba(255,255,255,.08)}
/* the beam: on hover a point of light runs the card's lit top edge, as it runs the slabs' */
body.home .xt,body.home .lk,body.home .st,body.home .pp,body.home .h-panel,body.home .h-codewrap{position:relative;overflow:hidden}
body.home .xt::after,body.home .lk::after,body.home .st::after,body.home .pp::after,body.home .h-panel::after,body.home .h-codewrap::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;pointer-events:none;opacity:0;transition:opacity .3s;
  background:linear-gradient(90deg,transparent 0 38%,rgba(218,41,28,.35) 44%,#DA291C 48%,#fff 50%,#DA291C 52%,rgba(218,41,28,.35) 56%,transparent 62% 100%);
  background-size:260% 100%;background-repeat:no-repeat;filter:drop-shadow(0 0 6px rgba(218,41,28,.9))}
body.home .xt:hover::after,body.home .lk:hover::after,body.home .st:hover::after,body.home .pp:hover::after,body.home .h-panel:hover::after,body.home .h-codewrap:hover::after{opacity:1;animation:slab-beam 2.4s cubic-bezier(.45,0,.55,1) infinite}
:root[data-zt="dark"] body.home .foot{background:#000;border-top-color:rgba(255,255,255,.06)}
@media (prefers-reduced-motion:reduce){body.home .xt::after,body.home .lk::after,body.home .st::after,body.home .pp::after{animation:none!important;opacity:0!important}}
:root[data-zt="dark"] body.home .xt__msg--me{background:var(--ink);color:var(--bg);border-color:transparent}

/* ═══ THE STONE, EVERYWHERE — the hero's material on every page's cards, a black ground, the bloom behind every section head ═══ */
.pp-badge{top:14px;left:auto;right:14px;transform:none}
:root[data-zt="dark"] body,:root[data-zt="dark"] .sec,:root[data-zt="dark"] .sec--tint,:root[data-zt="dark"] .phero,:root[data-zt="dark"] .foot,:root[data-zt="dark"] .gridstat,:root[data-zt="dark"] .tsec,:root[data-zt="dark"] .ag-stage{background:#000}
:root[data-zt="dark"] .sec{position:relative}
:root[data-zt="dark"] .sec::before{content:"";position:absolute;left:50%;top:0;width:60%;height:320px;transform:translateX(-50%);pointer-events:none;z-index:0;
  background:radial-gradient(closest-side,rgba(218,41,28,.11),transparent);filter:blur(40px)}
:root[data-zt="dark"] .sec>.wrap{position:relative;z-index:1}
:root[data-zt="dark"] .card2,:root[data-zt="dark"] .acard,:root[data-zt="dark"] .rc,:root[data-zt="dark"] .mkt__card,:root[data-zt="dark"] .peak,:root[data-zt="dark"] .wheel__t,
:root[data-zt="dark"] .fd__card,:root[data-zt="dark"] .statusbox,:root[data-zt="dark"] .fit,:root[data-zt="dark"] .cmp,:root[data-zt="dark"] .tablewrap,:root[data-zt="dark"] .nx-util,
:root[data-zt="dark"] .nx-card,:root[data-zt="dark"] .post,:root[data-zt="dark"] .cform,:root[data-zt="dark"] .ctaband-inner,:root[data-zt="dark"] .pp,:root[data-zt="dark"] .st,
:root[data-zt="dark"] .xt,:root[data-zt="dark"] .lk,:root[data-zt="dark"] .h-panel,:root[data-zt="dark"] .h-codewrap,:root[data-zt="dark"] .console.ms,:root[data-zt="dark"] .cities>*,
:root[data-zt="dark"] .rel,:root[data-zt="dark"] .markbox,:root[data-zt="dark"] .mini,:root[data-zt="dark"] .quote{
  background:linear-gradient(160deg,#1E1F26,#101116 55%,#08090C);border:0;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.14),inset -1px -1px 0 rgba(255,255,255,.03),0 30px 60px -30px rgba(0,0,0,.9)}
:root[data-zt="dark"] .cmp__head{background:#1B1C22}
:root[data-zt="dark"] .cmp__plan--hi{background:rgba(255,255,255,.04)}
:root[data-zt="dark"] .fit--hi,:root[data-zt="dark"] .pp-hi{box-shadow:inset 1px 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.14),0 0 44px rgba(218,41,28,.18),0 30px 60px -30px rgba(0,0,0,.9)}
:root[data-zt="dark"] .fd__city,:root[data-zt="dark"] .h-row,:root[data-zt="dark"] .xt__msg,:root[data-zt="dark"] .nx-util__ic{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.06)}
:root[data-zt="dark"] .h-row--hi{background:rgba(218,41,28,.14);border-color:rgba(218,41,28,.45)}
:root[data-zt="dark"] .xt__msg--me{background:var(--ink);color:var(--bg);border-color:transparent}
:root[data-zt="dark"] .xt__foot::before{background:linear-gradient(to bottom,rgba(11,12,15,0),#0A0B0E)}
:root[data-zt="dark"] .cform__in{background:rgba(255,255,255,.1)}
:root[data-zt="dark"] .nw__thumb{background:linear-gradient(160deg,#1E1F26,#101116 55%,#08090C);border:0}
:root[data-zt="dark"] .foot{border-top-color:rgba(255,255,255,.06)}
/* the beam on a card's top edge, on hover */
.card2,.acard,.rc,.mkt__card,.peak,.fit,.nx-util,.nx-card,.lk,.xt,.st,.pp,.h-panel,.h-codewrap,.fd__card,.wheel__t,.cities>*{position:relative;overflow:hidden}
.card2::after,.acard::after,.rc::after,.mkt__card::after,.peak::after,.fit::after,.nx-util::after,.nx-card::after,.lk::after,.xt::after,.st::after,.pp::after,.h-panel::after,.h-codewrap::after,.fd__card::after,.wheel__t::after,.cities>*::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;pointer-events:none;opacity:0;transition:opacity .3s;
  background:linear-gradient(90deg,transparent 0 38%,rgba(218,41,28,.35) 44%,#DA291C 48%,#fff 50%,#DA291C 52%,rgba(218,41,28,.35) 56%,transparent 62% 100%);
  background-size:260% 100%;background-repeat:no-repeat;filter:drop-shadow(0 0 6px rgba(218,41,28,.9))}
.card2:hover::after,.acard:hover::after,.rc-link:hover .rc::after,.mkt__card:hover::after,.peak:hover::after,.fit:hover::after,.nx-util:hover::after,.nx-card:hover::after,.lk:hover::after,.xt:hover::after,.st:hover::after,.pp:hover::after,.h-panel:hover::after,.h-codewrap:hover::after,.fd__card:hover::after,.wheel__t:hover::after,.cities>*:hover::after{opacity:1;animation:slab-beam 2.4s cubic-bezier(.45,0,.55,1) infinite}
@media (prefers-reduced-motion:reduce){.card2::after,.acard::after,.rc::after,.mkt__card::after,.peak::after,.fit::after,.nx-util::after,.nx-card::after,.lk::after,.xt::after,.st::after,.pp::after{animation:none!important;opacity:0!important}}

/* the hero's beams, more often: a pass every 3.2s on one slab, 3.9s on the other */
.slab::before{animation-duration:3.2s}
.slab--b::before{animation-duration:3.9s;animation-delay:-1.6s}

/* ═══ THE NUMBERS — three figures on three slabs, each with its own laser, the bloom behind, the spring and the count-up kept ═══ */
.gridstat{padding:120px 0;background-image:none}
.gridstat::before{background:radial-gradient(60% 70% at 50% 50%,rgba(218,41,28,.14),transparent 70%);filter:blur(30px)}
.gridstat .wrap{gap:16px}
.gs{position:relative;overflow:hidden;border-radius:28px;padding:56px 28px 48px;text-align:left;
  background:linear-gradient(160deg,#1E1F26,#101116 55%,#08090C);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.14),inset -1px -1px 0 rgba(255,255,255,.03),0 40px 80px -30px rgba(0,0,0,.9);
  transition:transform .5s var(--spring)}
:root[data-zt="light"] .gs{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.gs:hover{transform:translateY(-6px)}
.gs::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 60% at 100% 0%,rgba(218,41,28,.16),transparent 70%)}
.gs::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent 0 38%,rgba(218,41,28,.35) 44%,#DA291C 48%,#fff 50%,#DA291C 52%,rgba(218,41,28,.35) 56%,transparent 62% 100%);
  background-size:260% 100%;background-repeat:no-repeat;filter:drop-shadow(0 0 6px rgba(218,41,28,.9));animation:slab-beam 4.8s cubic-bezier(.45,0,.55,1) infinite}
.gs:nth-child(2)::after{animation-delay:-1.6s}.gs:nth-child(3)::after{animation-delay:-3.2s}
.gs b{font-size:clamp(64px,7.6vw,104px);font-weight:400;letter-spacing:-.04em;line-height:.95;color:var(--ink);position:relative;
  text-shadow:0 0 40px rgba(218,41,28,0)}
.gridstat.is-in .gs b{animation:h-land .5s cubic-bezier(.3,1.6,.4,1) both,gs-glow 1.6s ease-out both;animation-delay:1.25s}
.gridstat.is-in .gs:nth-child(2) b{animation-delay:1.39s}.gridstat.is-in .gs:nth-child(3) b{animation-delay:1.53s}
@keyframes gs-glow{0%{text-shadow:0 0 0 rgba(218,41,28,0)}30%{text-shadow:0 0 44px rgba(218,41,28,.55)}100%{text-shadow:0 0 18px rgba(218,41,28,.12)}}
.gs b em{color:var(--muted);font-size:.5em;vertical-align:baseline;margin-left:.06em}
.gs span{margin-top:22px;font-size:15px;color:var(--muted);max-width:26ch;position:relative}
.gs .gs__k{display:block;position:relative;font-style:normal;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin:0 0 26px;opacity:1;transform:none}
.gs .gs__dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--zug);box-shadow:0 0 12px var(--zug);margin-right:10px;vertical-align:1px;animation:cine-pulse 2.4s ease-in-out infinite}
@media (max-width:900px){.gs{padding:40px 24px 36px}.gs b{font-size:64px}}
@media (prefers-reduced-motion:reduce){.gs::after,.gs .gs__dot{animation:none!important}}

/* ═══ THE NUMBERS, open again — three figures on the faint grid, with the atmosphere built around them:
      a spotlight under the pointer that lights the grid, lasers travelling the hairlines between the figures,
      and the bloom that flares as each number lands ═══ */
.gridstat{padding:140px 0;position:relative;overflow:hidden;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:120px 120px;background-position:center}
.gridstat::before{background:radial-gradient(ellipse at center,transparent 28%,#000 80%)}
:root[data-zt="light"] .gridstat::before{background:radial-gradient(ellipse at center,transparent 28%,var(--bg) 80%)}
.gridstat__spot{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:0;transition:opacity .6s;
  background-image:linear-gradient(rgba(255,255,255,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.22) 1px,transparent 1px);background-size:120px 120px;background-position:center;
  -webkit-mask:radial-gradient(260px 260px at var(--mx,50%) var(--my,50%),#000 0%,transparent 70%);mask:radial-gradient(260px 260px at var(--mx,50%) var(--my,50%),#000 0%,transparent 70%)}
.gridstat.is-lit .gridstat__spot{opacity:1}
.gridstat .wrap{gap:0;position:relative;z-index:1}
.gs{position:static;overflow:visible;border-radius:0;padding:28px 24px;text-align:center;background:none;box-shadow:none;transition:none}
:root[data-zt="light"] .gs{background:none;box-shadow:none}
.gs:hover{transform:none}
.gs::before{display:none}
.gs::after{display:none}
.gs b{font-size:clamp(64px,8vw,112px);font-weight:400;letter-spacing:-.04em;line-height:.95;text-shadow:none;display:block;position:relative}
.gs b em{font-size:.5em;color:var(--muted);margin-left:.04em}
.gs span{margin:18px auto 0;font-size:14px;color:var(--muted);max-width:26ch;display:block}
.gridstat.is-in .gs b{animation:h-land .5s cubic-bezier(.3,1.6,.4,1) both,gs-glow 1.8s ease-out both;animation-delay:1.25s}
.gridstat.is-in .gs:nth-child(3) b{animation-delay:1.39s}.gridstat.is-in .gs:nth-child(4) b{animation-delay:1.53s}
.gridstat.is-in .gs:nth-child(3){animation-delay:.14s}.gridstat.is-in .gs:nth-child(4){animation-delay:.28s}
.gridstat.is-in .gs:nth-child(3) span{animation-delay:1.04s}.gridstat.is-in .gs:nth-child(4) span{animation-delay:1.18s}
/* the hairlines between the figures, each with a laser travelling it */
.gs+.gs{position:relative}
.gs+.gs::before{content:"";display:block;position:absolute;left:0;top:10%;bottom:10%;width:1px;background:rgba(255,255,255,.08)}
.gs+.gs::after{content:"";display:block;position:absolute;left:-1px;top:10%;bottom:10%;width:3px;pointer-events:none;
  background:linear-gradient(180deg,transparent 0 38%,rgba(218,41,28,.35) 44%,#DA291C 48%,#fff 50%,#DA291C 52%,rgba(218,41,28,.35) 56%,transparent 62% 100%);
  background-size:100% 260%;background-repeat:no-repeat;filter:drop-shadow(0 0 6px rgba(218,41,28,.9));animation:gs-beam 5.2s cubic-bezier(.45,0,.55,1) infinite}
.gs:nth-child(4)::after{animation-delay:-2.6s}
@keyframes gs-beam{0%{background-position:0 130%}100%{background-position:0 -130%}}
/* the bloom that flares as a number lands */
.gs b::before{content:"";position:absolute;left:50%;top:50%;width:140%;height:140%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:-1;opacity:0;
  background:radial-gradient(closest-side,rgba(218,41,28,.4),transparent);filter:blur(24px)}
.gridstat.is-in .gs b::before{animation:gs-flare 2.2s ease-out both;animation-delay:1.25s}
.gridstat.is-in .gs:nth-child(3) b::before{animation-delay:1.39s}.gridstat.is-in .gs:nth-child(4) b::before{animation-delay:1.53s}
@keyframes gs-flare{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}100%{opacity:.28;transform:translate(-50%,-50%) scale(1)}}
@media (max-width:900px){.gridstat{padding:96px 0;background-size:90px 90px}.gridstat__spot{background-size:90px 90px;-webkit-mask:radial-gradient(200px 200px at var(--mx,50%) var(--my,50%),#000 0%,transparent 70%);mask:radial-gradient(200px 200px at var(--mx,50%) var(--my,50%),#000 0%,transparent 70%)}.gridstat .wrap{gap:24px}.gs{padding:20px 8px}.gs b{font-size:72px}.gs+.gs::before,.gs+.gs::after{left:20%;right:20%;top:-12px;bottom:auto;width:auto;height:1px}.gs+.gs::after{height:3px;top:-13px;background:linear-gradient(90deg,transparent 0 38%,rgba(218,41,28,.35) 44%,#DA291C 48%,#fff 50%,#DA291C 52%,rgba(218,41,28,.35) 56%,transparent 62% 100%);background-size:260% 100%;animation-name:slab-beam}}
@media (prefers-reduced-motion:reduce){.gs+.gs::after,.gs b::before{animation:none!important;opacity:0}.gridstat__spot{display:none}}
.gridstat.is-in .gs:nth-child(2){animation-delay:0s}.gridstat.is-in .gs:nth-child(2) span{animation-delay:.9s}.gridstat.is-in .gs:nth-child(2) b,.gridstat.is-in .gs:nth-child(2) b::before{animation-delay:1.25s}

/* ── the ambient in the menus, nothing else changed: the glass stays; a faint red bloom lies over it and a laser runs the top edge ── */
:root[data-zt="dark"] .dd__panel{background-image:radial-gradient(60% 50% at 100% 0%,rgba(218,41,28,.14),transparent 70%)}
:root[data-zt="dark"] .dd__panel::after{content:"";position:absolute;left:24px;right:24px;top:0;height:2px;pointer-events:none;border-radius:2px;
  background:linear-gradient(90deg,transparent 0 38%,rgba(218,41,28,.35) 44%,#DA291C 48%,#fff 50%,#DA291C 52%,rgba(218,41,28,.35) 56%,transparent 62% 100%);
  background-size:260% 100%;background-repeat:no-repeat;filter:drop-shadow(0 0 6px rgba(218,41,28,.9));animation:slab-beam 6s cubic-bezier(.45,0,.55,1) infinite}
:root[data-zt="dark"] .mob{background-image:radial-gradient(70% 45% at 85% 0%,rgba(218,41,28,.18),transparent 70%)}
:root[data-zt="dark"] .mob::before{content:"";position:absolute;left:20px;right:20px;top:72px;height:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent 0 38%,rgba(218,41,28,.35) 44%,#DA291C 48%,#fff 50%,#DA291C 52%,rgba(218,41,28,.35) 56%,transparent 62% 100%);
  background-size:260% 100%;background-repeat:no-repeat;filter:drop-shadow(0 0 6px rgba(218,41,28,.9));animation:slab-beam 6s cubic-bezier(.45,0,.55,1) infinite}
@media (prefers-reduced-motion:reduce){:root[data-zt="dark"] .dd__panel::after,:root[data-zt="dark"] .mob::before{animation:none;background:none}}
/* the menus' ground is the hero's black, the bloom the hero's red — no grey under the red, so nothing reads brown */
:root[data-zt="dark"] .dd__panel{background-color:rgba(0,0,0,.94);background-image:radial-gradient(48% 42% at 100% 0%,rgba(218,41,28,.26),transparent 70%),radial-gradient(40% 30% at 0% 100%,rgba(218,41,28,.08),transparent 70%)}
:root[data-zt="dark"] .mob{background-color:rgba(0,0,0,.96);background-image:radial-gradient(60% 34% at 85% 0%,rgba(218,41,28,.28),transparent 70%),radial-gradient(50% 30% at 10% 100%,rgba(218,41,28,.1),transparent 70%)}

/* ── the numbers: no lines between the figures; the grid lights on its own as the section comes into view ── */
.gs+.gs::before,.gs+.gs::after{display:none}
.gridstat__spot{transition:opacity 1.2s ease}
/* ── the hidden mark before the footer: the ball, almost invisible, found with the same press-and-hold spotlight ── */
.hid{position:relative;overflow:hidden;height:min(70vh,640px);background:#000;display:grid;place-items:center;user-select:none;-webkit-user-select:none;touch-action:pan-y}
:root[data-zt="light"] .hid{background:var(--bg)}
.hid__mark{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.hid__mark .bot{width:min(64vh,520px);height:min(64vh,520px);filter:none;animation:none;transform:none}
.hid__mark--dim{opacity:.045}
.hid__mark--lit{opacity:0;transition:opacity .35s;
  -webkit-mask:radial-gradient(240px 240px at var(--mx,50%) var(--my,50%),#000 0%,rgba(0,0,0,.6) 45%,transparent 72%);mask:radial-gradient(240px 240px at var(--mx,50%) var(--my,50%),#000 0%,rgba(0,0,0,.6) 45%,transparent 72%)}
.hid__mark--lit .bot{filter:drop-shadow(0 0 60px rgba(218,41,28,.45))}
.hid.is-lit .hid__mark--lit{opacity:1}
.hid__spot{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;
  background-image:linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px);background-size:120px 120px;background-position:center;
  -webkit-mask:radial-gradient(300px 300px at var(--mx,50%) var(--my,50%),#000 0%,transparent 70%);mask:radial-gradient(300px 300px at var(--mx,50%) var(--my,50%),#000 0%,transparent 70%)}
.hid.is-lit .hid__spot{opacity:1}
.hid__hint{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);margin:0;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);transition:opacity .35s;pointer-events:none}
.hid.is-lit .hid__hint{opacity:0}
@media (prefers-reduced-motion:reduce){.hid__mark--dim{opacity:.12}.hid__hint{display:none}}
/* six footer columns now that Social has joined */
.foot__cols{grid-template-columns:repeat(6,1fr)}
@media (max-width:900px){.foot__cols{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.foot__cols{grid-template-columns:1fr 1fr}}

/* ── the hidden mark, drawn in lines: a wire sphere that draws itself and turns, its eyes outlined in red ── */
.hid__mark .wire{width:min(64vh,520px);height:min(64vh,520px);overflow:visible}
.wire ellipse,.wire circle{fill:none;stroke:#fff;stroke-width:.7;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1}
.hid.in .wire ellipse,.hid.in .wire circle{animation:wire-draw 2.4s cubic-bezier(.2,.8,.2,1) forwards}
.hid.in .wire__lat ellipse:nth-child(2){animation-delay:.15s}.hid.in .wire__lat ellipse:nth-child(3){animation-delay:.3s}
.hid.in .wire__lon ellipse:nth-child(1){animation-delay:.45s}.hid.in .wire__lon ellipse:nth-child(2){animation-delay:.6s}.hid.in .wire__lon ellipse:nth-child(3){animation-delay:.75s}
.hid.in .wire__rim{animation-delay:.9s}.hid.in .wire__eye{animation-delay:1.3s}
@keyframes wire-draw{to{stroke-dashoffset:0}}
.wire__lon{transform-box:fill-box;transform-origin:center;animation:wire-turn 36s linear infinite}
.wire__lat{transform-box:fill-box;transform-origin:center;animation:wire-tilt 14s ease-in-out infinite}
@keyframes wire-turn{to{transform:rotate(360deg)}}
@keyframes wire-tilt{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
.wire__eye{stroke:#DA291C;stroke-width:1.6;filter:drop-shadow(0 0 6px rgba(218,41,28,.8))}
.wire__eyes{transform-box:fill-box;transform-origin:center;animation:h-play 11s ease-in-out infinite}
.hid__mark--dim{opacity:.16}
.hid__mark--dim .wire__eye{stroke:rgba(218,41,28,.9)}
.hid__mark--lit .wire ellipse,.hid__mark--lit .wire circle{stroke-width:1}
.hid__mark--lit .wire__rim{filter:drop-shadow(0 0 18px rgba(255,255,255,.5))}
.hid__mark--lit .wire__eye{fill:rgba(218,41,28,.9);filter:drop-shadow(0 0 22px rgba(218,41,28,.9))}
@media (prefers-reduced-motion:reduce){.wire ellipse,.wire circle{stroke-dashoffset:0;animation:none!important}.wire__lon,.wire__lat,.wire__eyes{animation:none}}

/* ── the wire mark, fully lit: it tilts toward the pointer, three sparks orbit it, a red bloom breathes behind.
      No filters on the SVG and no forced layer, so the lines stay vector-sharp at every tilt ── */
.hid{cursor:default;perspective:1200px}
.hid__bloom{position:absolute;left:50%;top:50%;width:min(90vh,760px);height:min(90vh,760px);transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(218,41,28,.28),rgba(218,41,28,.06) 50%,transparent 70%);filter:blur(30px);animation:h-breathe 7s ease-in-out infinite}
.hid__stage{position:relative;transform:rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg));transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.hid__stage .wire{width:min(64vh,520px);height:min(64vh,520px);overflow:visible;display:block;shape-rendering:geometricPrecision}
.wire ellipse,.wire circle{stroke:rgba(255,255,255,.82);stroke-width:.9}
.wire .wire__rim{stroke:#fff;stroke-width:1.1;filter:none}
.wire .wire__eye{fill:none;stroke:#fff;stroke-width:1.1;filter:none}
.wire__orb{transform-origin:100px 100px;transform-box:view-box}
.wire__orb--1{animation:wire-turn 9s linear infinite}
.wire__orb--2{animation:wire-turn 14s linear infinite reverse}
.wire__orb--3{animation:wire-turn 21s linear infinite}
.wire .wire__orb circle{fill:#fff;stroke:none;stroke-dasharray:none;animation:none}
.wire .wire__orb .wire__glow{fill:url(#wire-spark)}
.wire .wire__orb--2 circle{fill:#DA291C}
.wire .wire__orb--2 .wire__glow{fill:url(#wire-spark-r)}
@media (prefers-reduced-motion:reduce){.hid__bloom,.wire__orb{animation:none}.hid__stage{transform:none}}

/* ── menus: the columns fit the panel, so a fifth column (Social, under Company) sits beside the others ── */
.dd__cols{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}

/* ── light mode: the effects drawn in white on the black ground are drawn in ink on the white one ── */
:root[data-zt="light"] .wire ellipse,:root[data-zt="light"] .wire circle{stroke:rgba(0,0,0,.72)}
:root[data-zt="light"] .wire .wire__rim,:root[data-zt="light"] .wire .wire__eye{stroke:#000}
:root[data-zt="light"] .wire .wire__orb circle{fill:#0A0A0A;stroke:none}
:root[data-zt="light"] .wire .wire__orb .wire__glow{fill:url(#wire-spark-ink)}
:root[data-zt="light"] .wire .wire__orb--2 circle{fill:#DA291C}
:root[data-zt="light"] .wire .wire__orb--2 .wire__glow{fill:url(#wire-spark-r)}
:root[data-zt="light"] .hid__bloom{opacity:.7}
:root[data-zt="light"] .gridstat{background-image:linear-gradient(rgba(0,0,0,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.07) 1px,transparent 1px)}
:root[data-zt="light"] .gridstat__spot{background-image:linear-gradient(rgba(0,0,0,.3) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.3) 1px,transparent 1px)}

/* ── agents menu: the role labels, smaller, so the longest fits on one line ── */
.dd__cols a small{font-size:10.5px;letter-spacing:.01em;white-space:nowrap;padding-left:8px}

/* ═══ THE STONE IN DAYLIGHT — light mode carries every effect the black ground has: a pale stone on the cards with a lit edge,
      the red bloom behind section heads, the ambient and the laser in the menus, the glow on the highlighted plan ═══ */
:root[data-zt="light"] .sec,:root[data-zt="light"] body.home .h-sec{position:relative}
:root[data-zt="light"] .sec::before,:root[data-zt="light"] body.home .h-sec::before{content:"";position:absolute;left:50%;top:0;width:60%;height:320px;transform:translateX(-50%);pointer-events:none;z-index:0;
  background:radial-gradient(closest-side,rgba(218,41,28,.10),transparent);filter:blur(40px)}
:root[data-zt="light"] .sec>.wrap,:root[data-zt="light"] body.home .h-sec>.wrap{position:relative;z-index:1}
:root[data-zt="light"] .card2,:root[data-zt="light"] .acard,:root[data-zt="light"] .rc,:root[data-zt="light"] .mkt__card,:root[data-zt="light"] .peak,:root[data-zt="light"] .wheel__t,
:root[data-zt="light"] .fd__card,:root[data-zt="light"] .statusbox,:root[data-zt="light"] .fit,:root[data-zt="light"] .cmp,:root[data-zt="light"] .tablewrap,:root[data-zt="light"] .nx-util,
:root[data-zt="light"] .nx-card,:root[data-zt="light"] .post,:root[data-zt="light"] .cform,:root[data-zt="light"] .ctaband-inner,:root[data-zt="light"] .pp,:root[data-zt="light"] .st,
:root[data-zt="light"] .xt,:root[data-zt="light"] .lk,:root[data-zt="light"] .h-panel,:root[data-zt="light"] .h-codewrap,:root[data-zt="light"] .console.ms,:root[data-zt="light"] .cities>*,
:root[data-zt="light"] .rel,:root[data-zt="light"] .markbox,:root[data-zt="light"] .mini,:root[data-zt="light"] .quote,:root[data-zt="light"] .nw__thumb,:root[data-zt="light"] .rl-stage{
  background:linear-gradient(160deg,#FFFFFF,#F4F5F8 55%,#E8EAEF);border:0;
  box-shadow:inset 1px 1px 0 #fff,inset 0 0 0 1px rgba(10,10,10,.08),0 30px 60px -30px rgba(10,10,20,.28)}
:root[data-zt="light"] .fd__card{background:linear-gradient(160deg,#FFFFFF,#F4F5F8 55%,#E8EAEF),radial-gradient(70% 60% at 100% 0%,rgba(218,41,28,.10),transparent 70%)}
:root[data-zt="light"] .cmp__head{background:#F4F5F8}
:root[data-zt="light"] .cmp__plan--hi{background:rgba(218,41,28,.04)}
:root[data-zt="light"] .fit--hi,:root[data-zt="light"] .pp-hi{box-shadow:inset 1px 1px 0 #fff,inset 0 0 0 1px rgba(218,41,28,.35),0 0 44px rgba(218,41,28,.16),0 30px 60px -30px rgba(10,10,20,.28)}
:root[data-zt="light"] .fd__city,:root[data-zt="light"] .h-row,:root[data-zt="light"] .xt__msg,:root[data-zt="light"] .nx-util__ic{background:rgba(10,10,10,.04);border-color:rgba(10,10,10,.06)}
:root[data-zt="light"] .h-row--hi{background:rgba(218,41,28,.10);border-color:rgba(218,41,28,.4)}
:root[data-zt="light"] .xt__msg--me{background:var(--ink);color:var(--bg);border-color:transparent}
:root[data-zt="light"] .xt__foot::before{background:linear-gradient(to bottom,rgba(244,245,248,0),#EEF0F4)}
:root[data-zt="light"] .cform__in{background:rgba(10,10,10,.05)}
:root[data-zt="light"] .foot{border-top-color:rgba(10,10,10,.08)}
/* the menus: white glass, a faint red bloom over it, the laser on the top edge */
:root[data-zt="light"] .dd__panel{background-color:rgba(255,255,255,.94);background-image:radial-gradient(48% 42% at 100% 0%,rgba(218,41,28,.14),transparent 70%),radial-gradient(40% 30% at 0% 100%,rgba(218,41,28,.05),transparent 70%)}
:root[data-zt="light"] .dd__panel::after{content:"";position:absolute;left:24px;right:24px;top:0;height:2px;pointer-events:none;border-radius:2px;
  background:linear-gradient(90deg,transparent 0 38%,rgba(218,41,28,.35) 44%,#DA291C 48%,#fff 50%,#DA291C 52%,rgba(218,41,28,.35) 56%,transparent 62% 100%);
  background-size:260% 100%;background-repeat:no-repeat;filter:drop-shadow(0 0 6px rgba(218,41,28,.7));animation:slab-beam 6s cubic-bezier(.45,0,.55,1) infinite}
:root[data-zt="light"] .mob{background-color:rgba(255,255,255,.96);background-image:radial-gradient(60% 34% at 85% 0%,rgba(218,41,28,.16),transparent 70%),radial-gradient(50% 30% at 10% 100%,rgba(218,41,28,.06),transparent 70%)}
:root[data-zt="light"] .mob::before{content:"";position:absolute;left:20px;right:20px;top:72px;height:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent 0 38%,rgba(218,41,28,.35) 44%,#DA291C 48%,#fff 50%,#DA291C 52%,rgba(218,41,28,.35) 56%,transparent 62% 100%);
  background-size:260% 100%;background-repeat:no-repeat;filter:drop-shadow(0 0 6px rgba(218,41,28,.7));animation:slab-beam 6s cubic-bezier(.45,0,.55,1) infinite}
@media (prefers-reduced-motion:reduce){:root[data-zt="light"] .dd__panel::after,:root[data-zt="light"] .mob::before{animation:none;background:none}}

/* ═══ THE BEAM, ONE RULE FOR EVERY CARD ON EVERY PAGE, IN BOTH MODES — a point of light, red with a white core,
      runs the card's top edge on hover, exactly as it runs the hero's slabs ═══ */
.card2,.acard,.rc,.mkt__card,.peak,.fit,.nx-util,.nx-card,.lk,.xt,.st,.pp,.h-panel,.h-codewrap,.fd__card,.wheel__t,.cities>*,
.cmp,.cform,.post,.quote,.mini,.rel,.markbox,.statusbox,.tablewrap,.ctaband-inner,.console.ms,.nw__thumb{position:relative;overflow:hidden}
.card2::after,.acard::after,.rc::after,.mkt__card::after,.peak::after,.fit::after,.nx-util::after,.nx-card::after,.lk::after,.xt::after,.st::after,.pp::after,.h-panel::after,.h-codewrap::after,.fd__card::after,.wheel__t::after,.cities>*::after,
.cmp::after,.cform::after,.post::after,.quote::after,.mini::after,.rel::after,.markbox::after,.statusbox::after,.tablewrap::after,.ctaband-inner::after,.console.ms::after,.nw__thumb::after{
  content:"";display:block;position:absolute;bottom:auto;width:auto;height:2px;z-index:3;pointer-events:none;opacity:0;transition:opacity .3s;border-radius:2px;transform:none;inset:auto;left:var(--beam-r,24px);right:var(--beam-r,24px);top:0;
  background:linear-gradient(90deg,transparent 0 38%,rgba(218,41,28,.35) 44%,#DA291C 48%,#fff 50%,#DA291C 52%,rgba(218,41,28,.35) 56%,transparent 62% 100%);
  background-size:260% 100%;background-repeat:no-repeat;background-position:130% 0;filter:drop-shadow(0 0 6px rgba(218,41,28,.9))}
.card2:hover::after,.acard:hover::after,.rc-link:hover .rc::after,.rc:hover::after,.mkt__card:hover::after,.peak:hover::after,.fit:hover::after,.nx-util:hover::after,.nx-card:hover::after,.lk:hover::after,.xt:hover::after,.st:hover::after,.pp:hover::after,.h-panel:hover::after,.h-codewrap:hover::after,.fd__card:hover::after,.wheel__t:hover::after,.cities>*:hover::after,
.cmp:hover::after,.cform:hover::after,.post:hover::after,.quote:hover::after,.mini:hover::after,.rel:hover::after,.markbox:hover::after,.statusbox:hover::after,.tablewrap:hover::after,.ctaband-inner:hover::after,.console.ms:hover::after,.nw__thumb:hover::after{
  opacity:1;animation:slab-beam 2.4s cubic-bezier(.45,0,.55,1) infinite}
@media (prefers-reduced-motion:reduce){.card2::after,.acard::after,.rc::after,.mkt__card::after,.peak::after,.fit::after,.nx-util::after,.nx-card::after,.lk::after,.xt::after,.st::after,.pp::after,.h-panel::after,.h-codewrap::after,.fd__card::after,.wheel__t::after,.cities>*::after,
.cmp::after,.cform::after,.post::after,.quote::after,.mini::after,.rel::after,.markbox::after,.statusbox::after,.tablewrap::after,.ctaband-inner::after,.console.ms::after,.nw__thumb::after{animation:none!important;opacity:0!important}}

/* ── the wordmark comes and goes gently: no spring, no shrink — the letters drift a few pixels and fade, one after the other ── */
.nav .wm-l{transition:transform .7s var(--soft),opacity .55s ease;transition-delay:calc(var(--i) * 50ms)}
.nav.is-mark .wm-l{transform:translateX(calc(-8px - var(--i) * 3px));opacity:0;transition:transform .5s var(--soft),opacity .35s ease;transition-delay:calc((4 - var(--i)) * 30ms)}
.nav.is-boot .wm-l{transform:translateX(calc(-8px - var(--i) * 3px));opacity:0;transition:none}
.nav .brand__wm{transition:max-width .8s var(--soft),margin .8s var(--soft)}
.nav .brand .bot--brand{transition:transform .8s var(--soft),filter .8s ease}
@media (prefers-reduced-motion:reduce){.nav .wm-l,.nav .brand__wm,.nav .brand .bot--brand{transition:none}}
/* the home's cards obey the same inset (their older rule outranked the shared one) */
body.home .xt::after,body.home .lk::after,body.home .st::after,body.home .pp::after,body.home .h-panel::after,body.home .h-codewrap::after{left:var(--beam-r,24px);right:var(--beam-r,24px);border-radius:2px}

/* ═══ THE WIRE MARK BREATHES — it draws itself in, line after line, holds while it turns and a light passes over it,
      then unwinds from where it began and is gone, and begins again. Nothing is ever simply shown or hidden. ═══ */
.hid{perspective:1400px}
.hid__stage{transform-style:preserve-3d}
.hid.in .wire{animation:wire-swing 32s ease-in-out infinite,wire-float 11s ease-in-out infinite;transform-style:preserve-3d}
/* a swing, not a spin: the sphere never goes edge-on, so it is always a sphere */
@keyframes wire-swing{0%,100%{transform:rotateY(-32deg) rotateX(6deg)}50%{transform:rotateY(32deg) rotateX(-6deg)}}
@keyframes wire-float{0%,100%{translate:0 0}50%{translate:0 -10px}}
/* one life: draw (0–32%), live (32–64%), unwind (64–88%), dark (88–100%); every line keeps its own delay so the sphere knits and unknits */
.hid.in .wire ellipse,.hid.in .wire circle{animation:wire-life 16s cubic-bezier(.4,0,.2,1) infinite}
@keyframes wire-life{
  0%{stroke-dashoffset:1;opacity:.2}
  32%{stroke-dashoffset:0;opacity:1}
  64%{stroke-dashoffset:0;opacity:1}
  88%{stroke-dashoffset:-1;opacity:.35}
  100%{stroke-dashoffset:-1;opacity:0}
}
.hid.in .wire__lat ellipse:nth-child(1){animation-delay:0s}
.hid.in .wire__lat ellipse:nth-child(2){animation-delay:.25s}
.hid.in .wire__lat ellipse:nth-child(3){animation-delay:.5s}
.hid.in .wire__lon ellipse:nth-child(1){animation-delay:.75s}
.hid.in .wire__lon ellipse:nth-child(2){animation-delay:1s}
.hid.in .wire__lon ellipse:nth-child(3){animation-delay:1.25s}
.hid.in .wire__rim{animation-delay:1.6s}
.hid.in .wire__eye{animation-delay:2.1s}
.hid.in .wire__eye--r{animation-delay:2.3s}
/* the sparks live only while the sphere does */
.hid.in .wire__orb circle{animation:wire-spark 16s ease-in-out infinite}
.hid.in .wire__orb--2 circle{animation-delay:.4s}
.hid.in .wire__orb--3 circle{animation-delay:.8s}
@keyframes wire-spark{0%,26%{opacity:0;r:0}34%,66%{opacity:1}90%,100%{opacity:0}}
/* the bloom breathes with the same life */
.hid.in .hid__bloom{animation:wire-bloom 16s ease-in-out infinite}
@keyframes wire-bloom{0%{opacity:.15;scale:.7}36%{opacity:1;scale:1.05}62%{opacity:.85;scale:1}92%,100%{opacity:.1;scale:.75}}
/* a light passes over the sphere while it is whole: a soft band, masked to the disc, travelling twice per life */
.hid__stage::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:50%;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.18) 48%,rgba(255,255,255,.34) 50%,rgba(255,255,255,.18) 52%,transparent 70%);
  background-size:300% 100%;mix-blend-mode:screen;opacity:0;
  -webkit-mask:radial-gradient(circle at 50% 50%,#000 0 44%,transparent 46%);mask:radial-gradient(circle at 50% 50%,#000 0 44%,transparent 46%)}
.hid.in .hid__stage::after{animation:wire-sweep 16s ease-in-out infinite}
@keyframes wire-sweep{0%,30%{opacity:0;background-position:120% 0}40%{opacity:1}48%{background-position:-20% 0;opacity:0}52%{opacity:0;background-position:120% 0}58%{opacity:.9}66%{background-position:-20% 0;opacity:0}100%{opacity:0}}
:root[data-zt="light"] .hid__stage::after{background:linear-gradient(115deg,transparent 30%,rgba(218,41,28,.10) 48%,rgba(218,41,28,.2) 50%,rgba(218,41,28,.10) 52%,transparent 70%);background-size:300% 100%;mix-blend-mode:multiply}
@media (prefers-reduced-motion:reduce){
  .hid.in .wire,.hid.in .wire ellipse,.hid.in .wire circle,.hid.in .wire__orb circle,.hid.in .hid__bloom,.hid.in .hid__stage::after{animation:none!important}
  .hid.in .wire ellipse,.hid.in .wire circle{stroke-dashoffset:0;opacity:1}
}

/* ── the circle keeps its shape: no swing, no tilt; and no glare inside it. It still knits, lives, unwinds. ── */
.hid{perspective:none}
.hid__stage{transform:none!important;transition:none}
.hid.in .wire{animation:wire-float 11s ease-in-out infinite;transform:none}
.hid__stage::after{display:none}

/* ── the trust band inverts on the light page (black band, white text); on the black page it is stone like every other section,
      so its text is ink, not the page background it was borrowing ── */
:root[data-zt="dark"] .sec--trust{color:var(--ink)}
:root[data-zt="dark"] .sec--trust .h2,:root[data-zt="dark"] .sec--trust h3{color:var(--ink)}
:root[data-zt="dark"] .sec--trust .eyebrow,:root[data-zt="dark"] .sec--trust .sec__sub{color:var(--muted)}
:root[data-zt="dark"] .trust li{background:linear-gradient(160deg,#1E1F26,#101116 55%,#08090C);border:0;box-shadow:inset 1px 1px 0 rgba(255,255,255,.14),inset -1px -1px 0 rgba(255,255,255,.03),0 30px 60px -30px rgba(0,0,0,.9);position:relative;overflow:hidden}
:root[data-zt="dark"] .trust li p:last-child{color:var(--muted)}

/* ── Part B: the line under the Runs line, and the connector registry on /trust ── */
.pp-note{display:block;margin-top:1px;font-size:.78em;line-height:1.35;opacity:.62;font-weight:400}
.cmp__v .pp-note{margin-left:0}
.tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-top:18px}
.tools__count{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;opacity:.7;margin:0 0 6px}
.tools__h{margin:34px 0 0}
.tool{position:relative;padding:18px 18px 16px;border-radius:var(--r,18px);background:var(--card,rgba(255,255,255,.035));border:1px solid var(--line,rgba(255,255,255,.09))}
.tool--pending{opacity:.72}
.tool__head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tool__head h3{margin:0;font-size:1.02rem}
.tool__badge{font:600 .66rem/1 var(--mono,ui-monospace,monospace);letter-spacing:.08em;text-transform:uppercase;padding:5px 8px;border-radius:999px;background:rgba(84,199,138,.16);color:#54c78a;border:1px solid rgba(84,199,138,.35)}
.tool__badge--pending{background:rgba(233,178,72,.14);color:#e9b248;border-color:rgba(233,178,72,.35)}
.tool__k,.tool__regions{font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;opacity:.62;margin:8px 0 0}
.tool__scopes{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:7px}
.tool__scopes li{display:grid;gap:2px;font-size:.84rem;line-height:1.4}
.tool__scopes code{font-family:var(--mono,ui-monospace,monospace);font-size:.74rem;opacity:.85;word-break:break-all}
.tool__scopes span{opacity:.72}
.tool__prep{font-style:normal;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;opacity:.75}
[data-zt="light"] .tool{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.09)}
[data-zt="light"] .tool__badge{background:rgba(20,140,80,.1);color:#157a48;border-color:rgba(20,140,80,.3)}
[data-zt="light"] .tool__badge--pending{background:rgba(180,120,20,.1);color:#8a5a0a;border-color:rgba(180,120,20,.3)}

/* ── Bernina: the guard strip on /trust, the band under the hero, the naming tile ── */
.h-band{padding:0 0 8px}
.h-band__p{margin:0 auto;max-width:720px;text-align:center;font-size:15px;color:var(--muted)}
.h-band__p a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.guard{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
@media(max-width:760px){.guard{grid-template-columns:1fr}}
.guard__i{padding:18px 18px 16px;border-radius:var(--r,18px);background:var(--card,rgba(255,255,255,.035));border:1px solid var(--line,rgba(255,255,255,.09))}
.guard__i p{margin:8px 0 0;font-size:.92rem;line-height:1.5}
.guard__k{font-size:.68rem;letter-spacing:.08em;opacity:.7}
.guard__close{margin:18px 0 0;font-size:.92rem;opacity:.8}
.guard__tile{width:64px;height:64px;color:var(--ink);opacity:.9}
[data-zt="light"] .guard__i{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.09)}

/* Over the black home hero the bar is the dark bar in light mode too (see .is-over-hero),
   so its dropdown must be the dark panel as well — the light panel put white text on white. */
:root[data-zt="light"] .nav.is-over-hero:not(.is-menu) .dd__panel{background-color:rgba(0,0,0,.94);background-image:radial-gradient(48% 42% at 100% 0%,rgba(218,41,28,.26),transparent 70%),radial-gradient(40% 30% at 0% 100%,rgba(218,41,28,.08),transparent 70%)}
/* ═══════════════════════ THE RELAY (home) ═══════════════════════
   A row of overlapping chips on the Zuger mark. One chip at a time opens into a pill
   (dots while working, a tick and a result when settled); a packet in the sender's
   colour rides the thread to the next chip and the two glance at each other
   (--b-dx into the mark's .b-look). Ends on "You · Approve". Runs only in view. */
.rl{text-align:center}
.rl .h-sub{margin-bottom:44px}.rl .h-sub b{color:var(--ink);font-weight:500}
.rl-stage{position:relative;margin:0 auto;max-width:980px;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:74px 24px 56px;overflow:hidden}
.rl-stage::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 55%,var(--rl-glow,rgba(218,41,28,.10)),transparent 70%);pointer-events:none;transition:opacity .6s}
.rl-run,.rl-clock{position:absolute;top:18px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.rl-run{left:22px;display:inline-flex;align-items:center;gap:8px}
.rl-run::before{content:"";width:6px;height:6px;border-radius:50%;background:#13D1A3;box-shadow:0 0 8px #13D1A3}
.rl-clock{right:22px;font-variant-numeric:tabular-nums}
.rl-row{--size:52px;--overlap:2px;position:relative;display:flex;justify-content:center;align-items:center;isolation:isolate;list-style:none;margin:0;padding:0}
.rl-chip{position:relative;display:flex;align-items:center;height:calc(var(--size) + 10px);padding:5px;border-radius:999px;background:transparent;box-shadow:none;transition:background 1s ease-in-out,box-shadow 1s ease-in-out}
.rl-chip .bot{filter:none}
.rl-chip + .rl-chip{margin-left:calc(var(--overlap) * -1)}
.rl-chip .bot{width:var(--size);height:var(--size)}
.rl-chip--iris{--c:var(--iris)}.rl-chip--glacier{--c:var(--glacier)}.rl-chip--claret{--c:var(--claret)}.rl-chip--moss{--c:var(--moss)}.rl-chip--ink{--c:var(--ink)}
.rl-chip.is-open{z-index:5;background:color-mix(in srgb,var(--c) 14%,var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 45%,transparent),0 14px 34px -16px rgba(0,0,0,.25)}
.rl-spread{display:grid;grid-template-columns:0px;transition:grid-template-columns 1s cubic-bezier(.45,0,.15,1)}
.rl-spread > div{overflow:hidden;min-width:0}
.rl-label{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;padding:0 16px 0 12px;font-size:14px;font-weight:500;color:color-mix(in srgb,var(--c) 80%,var(--ink));line-height:1;transition:color .6s ease}
.rl-dots{display:inline-flex;gap:3px}.rl-dots i{width:5px;height:5px;border-radius:50%;background:var(--c);animation:rl-dot 1.8s ease-in-out infinite}
.rl-dots i:nth-child(2){animation-delay:.3s}.rl-dots i:nth-child(3){animation-delay:.6s}
@keyframes rl-dot{0%,100%{opacity:.25}50%{opacity:1}}
.rl-t{transition:opacity .6s ease-in-out}.rl-chip.is-swapping .rl-t{opacity:0}
.rl-tick{display:none;width:14px;height:14px}
.rl-chip.is-settled .rl-dots{display:none}.rl-chip.is-settled .rl-tick{display:inline-block}.rl-chip.is-settled .rl-label{color:var(--ink)}
.rl-shield{width:var(--size);height:var(--size);border-radius:50%;background:var(--surface-2);display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line)}
.rl-shield svg{width:55%;height:55%;fill:none;stroke:var(--ink);stroke-width:1.9;stroke-linejoin:round;stroke-linecap:round}
.rl-you{width:var(--size);height:var(--size);border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;font-size:13px;font-weight:600;letter-spacing:.02em}
.rl-chip--you.is-open{background:var(--ink);color:var(--bg);box-shadow:0 16px 40px -14px rgba(0,0,0,.8)}
.rl-chip--you.is-open .rl-label{color:var(--bg)}.rl-chip--you.is-open .rl-dots i{background:var(--bg)}
.rl-chip--you .rl-btn{display:inline-block;padding:7px 12px;border-radius:999px;background:var(--bg);color:var(--ink);font-size:13px;font-weight:600}
.rl-cap{margin:52px auto 0;min-height:24px;font-size:15px;color:var(--muted);transition:opacity .8s ease-in-out}
.rl-cap b{color:var(--ink);font-weight:500}.rl-cap.is-fading{opacity:0}
.rl-names{display:flex;justify-content:center;gap:22px;margin-top:26px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);flex-wrap:wrap}
.rl-names span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--c);margin-right:6px;vertical-align:1px}
.rl-foot{margin:26px 0 0;font-size:14px;color:var(--faint)}
@media (max-width:640px){
  .code__b{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;padding:20px 18px 24px}
  .rl-row{--size:34px;--overlap:1px}
  .rl-chip{padding:4px;height:calc(var(--size) + 8px)}
  .rl-label{font-size:12px;padding:0 10px 0 8px;gap:6px}
  .rl-stage{padding:60px 10px 42px;border-radius:20px}
  .rl-cap{font-size:13px;margin-top:38px;padding:0 8px}
  .rl-names{gap:12px 14px}.rl-clock{display:none}
}
@media (prefers-reduced-motion:reduce){.rl-dots i{animation:none}.rl-chip,.rl-spread,.rl-t{transition:none}}

/* ═══════════════════════ BERNINA — the stage ═══════════════════════
   The shield with a slow breathing ring, the three checkpoints on one rail,
   a soft sweep that walks the rail as a Run passes, and a case strip that
   replays real verdicts. Bernina is a layer: no face, no colour of its own. */
.bst{position:relative;margin-top:34px;padding:34px 34px 30px;border-radius:26px;background:var(--surface);border:1px solid var(--line);overflow:hidden}
.bst::before{content:"";position:absolute;inset:-40% -20% auto;height:120%;background:radial-gradient(40% 40% at 18% 30%,color-mix(in srgb,var(--ink) 7%,transparent),transparent 70%);pointer-events:none}
.bst__top{position:relative;display:flex;align-items:center;gap:22px;margin-bottom:30px}
.bst__mark{position:relative;width:84px;height:84px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line)}
.bst__shield{width:44px;height:44px;color:var(--ink)}
.bst__ring{position:absolute;inset:-1px;border-radius:50%;border:1px solid color-mix(in srgb,var(--ink) 35%,transparent);animation:bst-ring 4.8s ease-in-out infinite;pointer-events:none}
@keyframes bst-ring{0%{transform:scale(1);opacity:.7}70%{transform:scale(1.55);opacity:0}100%{transform:scale(1.55);opacity:0}}
.bst__eyebrow{font-size:10px;letter-spacing:.12em;color:var(--faint);margin:0 0 6px}
.bst__line{margin:0;font-size:clamp(17px,1.6vw,21px);font-weight:500;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.bst__rail{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding-top:22px}
.bst__rail::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line-2)}
.bst__sweep{position:absolute;left:0;top:0;height:1px;width:33.333%;background:linear-gradient(90deg,transparent,var(--ink),transparent);opacity:0;transition:transform 1.1s cubic-bezier(.4,0,.2,1),opacity .5s}
.bst.is-live .bst__sweep{opacity:.9}
.bst__pt{position:relative;padding:18px 18px 16px;border-radius:18px;background:color-mix(in srgb,var(--ink) 3%,transparent);border:1px solid var(--line-2);transition:border-color .6s,background .6s}
.bst__pt.is-on{border-color:color-mix(in srgb,var(--ink) 28%,transparent);background:color-mix(in srgb,var(--ink) 6%,transparent)}
.bst__k{display:block;font-size:10px;letter-spacing:.12em;color:var(--faint)}
.bst__pt p{margin:12px 0 0;font-size:14px;line-height:1.55;color:var(--ink-2)}
.bst__v{position:absolute;right:14px;top:14px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:999px;color:var(--faint);background:color-mix(in srgb,var(--ink) 5%,transparent);opacity:0;transform:translateY(3px);transition:opacity .5s ease,transform .5s ease,color .5s,background .5s}
.bst__v.is-in{opacity:1;transform:none}
.bst__v[data-d="pass"]{color:#13D1A3;background:rgba(19,209,163,.12)}
.bst__v[data-d="redact"]{color:var(--claret);background:color-mix(in srgb,var(--claret) 14%,transparent)}
.bst__v[data-d="block"]{color:var(--zug);background:color-mix(in srgb,var(--zug) 14%,transparent)}
.bst__v[data-d="escalate"]{color:var(--ink);background:color-mix(in srgb,var(--ink) 12%,transparent)}
.bst__case{display:flex;align-items:baseline;gap:18px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line-2);transition:opacity .5s ease}
.bst__case.is-fading{opacity:0}
.bst__case-k{flex:none;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding-top:3px}
.bst__case p{margin:0;font-size:15px;color:var(--ink-2)}
.bst--compact{padding:28px 28px 24px}
.bst--compact .bst__pt{padding:16px 18px 14px}
.bst--compact .bst__rail{padding-top:18px}
.guard__close a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
@media (max-width:760px){
  .bst{padding:24px 18px 20px;border-radius:20px}
  .bst__top{gap:16px;margin-bottom:22px}.bst__mark{width:64px;height:64px}.bst__shield{width:34px;height:34px}
  .bst__rail{grid-template-columns:1fr;gap:10px;padding-top:0;padding-left:18px}
  .bst__rail::before{left:0;right:auto;top:0;bottom:0;width:1px;height:auto}
  .bst__sweep{width:1px;height:33.333%;background:linear-gradient(180deg,transparent,var(--ink),transparent)}
  .bst__case{flex-direction:column;gap:6px}
}
@media (prefers-reduced-motion:reduce){.bst__ring{animation:none}.bst__sweep{transition:none}}

/* ═══════════════════════ CONNECTED TOOLS — the hub ═══════════════════════
   The Zuger ball in the centre, the tools on a ring around it. Every few seconds
   the ball turns to a tool, its eyes take the reading agent's colour, and one
   thread draws to that tool while the caption says what is read and why. Tap a
   tool and its scopes unfold beneath. On a phone the ring is a grid. */
.hub{margin-top:26px;padding:26px 28px 24px;border-radius:26px;background:var(--surface);border:1px solid var(--line)}
.sw__hd{display:flex;flex-wrap:wrap;gap:8px 26px;padding-bottom:20px;border-bottom:1px solid var(--line-2);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.sw__hd b{color:var(--ink);font-weight:500;margin-right:4px}
.sw__src{margin-left:auto}
.hub__stage{position:relative;height:560px;margin-top:10px}
.hub__wire{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.hub__line{stroke:var(--wire,var(--ink));stroke-width:1;opacity:0;transition:opacity .8s ease}
.hub.is-live .hub__line{opacity:.55}
.hub__ring{position:absolute;inset:0}
.hub__core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:10px;pointer-events:none}
.hub__core::before{content:"";position:absolute;left:50%;top:48px;width:200px;height:200px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,var(--hub-glow,transparent) 0%,transparent 62%);opacity:.6;filter:blur(8px);transition:background 1.2s ease;z-index:-1}
.hub__ball{width:96px;height:96px;filter:drop-shadow(0 14px 30px rgba(0,0,0,.45))}
.hub__ball .b-look{transition:transform 1.1s cubic-bezier(.45,0,.15,1)}
.hub__who{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);transition:opacity .6s}
.hub__t{position:absolute;left:var(--x,50%);top:var(--y,50%);transform:translate(-50%,-50%);display:grid;justify-items:center;gap:7px;width:104px;padding:0;background:none;border:0;color:var(--ink);font:inherit;cursor:pointer;transition:transform 1s cubic-bezier(.45,0,.15,1),opacity .6s}
.hub__m{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:color-mix(in srgb,var(--ink) 6%,transparent);box-shadow:inset 0 0 0 1px var(--line);font-size:15px;font-weight:500;letter-spacing:0;color:var(--ink);transition:background 1s ease,box-shadow 1s ease,color 1s ease,transform 1s cubic-bezier(.45,0,.15,1)}
.hub__t.is-read .hub__m,.hub__t.is-on .hub__m{background:var(--ink);color:var(--bg);box-shadow:0 12px 30px -10px rgba(0,0,0,.6);transform:scale(1.08)}
.hub__n{font-size:12.5px;font-weight:500;letter-spacing:-.01em;line-height:1.15;text-align:center;color:var(--ink-2)}
.hub__t.is-read .hub__n,.hub__t.is-on .hub__n{color:var(--ink)}
/* The lock: a small badge on the tile's corner, a filled padlock on a disc with a keyhole. Mint while the tool is being read. */
.hub__lock{--lock-bg:var(--surface);position:absolute;top:-6px;right:20px;width:22px;height:22px;border-radius:50%;background:var(--lock-bg);box-shadow:0 0 0 1.5px var(--surface),inset 0 0 0 1px var(--line);display:grid;place-items:center;color:var(--muted);transition:color .6s,background .6s,box-shadow .6s}
.hub__lock svg{width:12px;height:12px}
.hub__t.is-read .hub__lock,.hub__t.is-on .hub__lock{--lock-bg:#13D1A3;color:#0A0A0A;box-shadow:0 0 0 1.5px var(--surface),0 0 14px rgba(19,209,163,.55)}
.hub__t--pending{opacity:.5}
.hub__t:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:12px}
.hub__cap{display:flex;align-items:baseline;gap:18px;margin:8px 0 0;padding-top:18px;border-top:1px solid var(--line-2);min-height:48px;transition:opacity .6s ease}
.hub__cap.is-fading{opacity:0}
.hub__cap .mono{flex:none;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding-top:3px}
.hub__cap span:last-child{font-size:15px;color:var(--ink-2)}
.sw__d{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s cubic-bezier(.4,0,.2,1)}
.sw__d.is-open{grid-template-rows:1fr}
.sw__d>div{overflow:hidden;min-width:0}
.sw__panel{margin-top:14px;padding:18px 20px 16px;border-radius:16px;background:color-mix(in srgb,var(--ink) 4%,transparent);border:1px solid var(--line-2);opacity:0;transform:translateY(-4px);transition:opacity .5s ease .1s,transform .5s ease .1s}
.sw__d.is-open .sw__panel{opacity:1;transform:none}
.sw__k{font-size:10px;letter-spacing:.1em;color:var(--faint);margin:0 0 12px}
.sw__regions{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin:-4px 0 12px}
.sw__scopes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px 28px}
.sw__scopes li{display:grid;gap:3px;font-size:14px;line-height:1.5;color:var(--ink-2)}
.sw__scopes code{font-family:var(--mono);font-size:12px;color:var(--ink);word-break:break-all}
.sw__prep{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.sw__foot{margin:24px 0 0;font-size:14px;color:var(--muted);max-width:640px}
@media (max-width:900px){
  .hub{padding:18px 14px 16px;border-radius:20px}
  .sw__hd{gap:6px 16px}.sw__src{margin-left:0;flex-basis:100%}
  .hub__stage{height:auto;margin-top:18px;display:flex;flex-direction:column}
  .hub__wire{display:none}
  .hub__core{position:relative;left:auto;top:auto;transform:none;margin:0 auto 26px;order:-1}
  .hub__core::before{top:36px;width:160px;height:160px}
  .hub__ball{width:72px;height:72px}
  .hub__ring{position:static;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 8px;padding-bottom:18px}
  .hub__t{position:relative;left:auto;top:auto;transform:none;width:100%;min-width:0}
  .hub__n{overflow-wrap:anywhere}
  .hub__m{width:46px;height:46px;font-size:13px}.hub__n{font-size:11px}
  .hub__lock{right:calc(50% - 34px);top:-6px;width:20px;height:20px}.hub__lock svg{width:11px;height:11px}
  .hub__cap{flex-direction:column;gap:6px}
  .sw__scopes{grid-template-columns:1fr}
}
@media (max-width:560px){.hub__ring{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 10px}.hub__lock{right:calc(50% - 32px)}}
@media (prefers-reduced-motion:reduce){.hub__t,.hub__m,.hub__ball .b-look,.hub__core::before,.sw__d,.sw__panel{transition:none}}

/* ═══════════════════════ NEWS — the story page ═══════════════════════
   revolut.com/news/<story>: a black media panel carrying the lockup, then a narrow
   column — title at weight 500, "Topic · date", the story. */
.sec--art{padding-top:24px}
.art__media{aspect-ratio:2.2/1;max-height:520px;border-radius:22px;background:#000;display:grid;place-items:center;border:1px solid var(--line);overflow:hidden}
.art__lockup{display:inline-flex;align-items:center;gap:22px;color:#fff;transform:scale(1.9)}
.art__lockup .bot{width:52px;height:52px}
.art__lockup .brand__wm{color:#fff}
.art__col{max-width:720px;margin:0 auto;padding:48px 0 8px}
.art__meta{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin:0 0 18px}
.art__h{font-family:var(--sans);font-weight:500;font-size:clamp(28px,4vw,42px);letter-spacing:-.025em;line-height:1.12;margin:0 0 28px;text-wrap:balance}
.art__body p{font-size:18px;line-height:1.65;color:var(--ink-2);margin:0 0 20px}
.art__about{margin-top:36px;padding-top:26px;border-top:1px solid var(--line-2)}
.art__k{font-size:10px;letter-spacing:.12em;color:var(--faint);margin:0 0 12px}
.art__about p{font-size:15px;line-height:1.6;color:var(--muted);margin:0 0 12px}
.art__about a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.nx-card{display:block;color:inherit}
.nx-card__go{display:inline-block;margin-top:10px;font-size:9.5px;letter-spacing:.1em;color:var(--faint);transition:color .2s}
.nx-card:hover .nx-card__go{color:var(--ink)}
@media (max-width:640px){.art__media{aspect-ratio:16/10;border-radius:18px}.art__lockup{transform:scale(1.2)}.art__col{padding-top:30px}.art__body p{font-size:16.5px}}

/* ═══════════════════════ COOKIES — revolut.com's card ═══════════════════════
   Bottom right, one title, one paragraph, one link, two full-width buttons.
   Shown once; the choice is kept on this device. */
.ck{position:fixed;right:20px;bottom:20px;z-index:950;width:min(340px,calc(100vw - 40px));padding:22px 22px 18px;border-radius:20px;background:var(--surface);border:1px solid var(--line);box-shadow:0 30px 70px -20px rgba(0,0,0,.6);transform:translateY(12px);opacity:0;transition:opacity .5s ease,transform .5s ease}
.ck.is-in{opacity:1;transform:none}
.ck h2{margin:0 0 8px;font-family:var(--sans);font-weight:500;font-size:17px;letter-spacing:-.01em;color:var(--ink)}
.ck p{margin:0 0 16px;font-size:13.5px;line-height:1.5;color:var(--muted)}
.ck p a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.ck button{display:block;width:100%;height:42px;border-radius:999px;font:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:transform .2s var(--spring),background .2s}
.ck button:active{transform:scale(.98)}
.ck__yes{background:var(--ink);color:var(--bg);border:0;margin-bottom:8px}
.ck__no{background:transparent;color:var(--ink);border:1px solid var(--line)}
.ck__no:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
:root[data-zt="light"] .ck{box-shadow:0 30px 70px -24px rgba(10,10,20,.35)}
@media (max-width:640px){.ck{right:12px;left:12px;bottom:12px;width:auto}}
@media (prefers-reduced-motion:reduce){.ck{transition:none}}

/* Light mode repaints every thumbnail white; the word thumbnails ("Zug", "Free") keep
   their dark plate so the white word on them stays readable. */
:root[data-zt="light"] .nw__thumb--word{background:linear-gradient(135deg,#1A1A1A,#3A1A17 60%,#DA291C)}
:root[data-zt="light"] .nx-card__go,:root[data-zt="light"] .nx-card time{color:var(--muted)}

/* ═══════════════════════ THE MOMENT — an approval card you can answer ═══════════════════════ */
.am{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:28px;align-items:start;margin-top:30px}
.am__card{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:24px 24px 22px;min-height:380px;transition:border-color .6s ease}
.am__hd{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.am__hd .bot{width:44px;height:44px}
.am__who{flex:1;min-width:0}.am__who b{display:block;font-weight:500;font-size:17px;letter-spacing:-.01em;color:var(--ink)}.am__who i{display:block;font-style:normal;font-size:12.5px;color:var(--faint);margin-top:3px}
.am__pill{flex:none;font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:6px 10px;border-radius:999px;background:color-mix(in srgb,var(--glacier) 14%,transparent);color:var(--glacier);transition:background .5s,color .5s}
.am__kv{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-top:1px solid var(--line-2);font-size:14px}
.am__kv span{color:var(--muted)}.am__kv b{font-weight:500;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.am__bernina{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:12px 0 0;border-top:1px solid var(--line-2);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.am__bernina i{font-style:normal;padding:4px 9px;border-radius:999px;background:rgba(19,209,163,.12);color:#13D1A3}
.am__shield{display:inline-flex;align-items:center;gap:7px;color:var(--ink)}
.am__shield svg{width:16px;height:16px}
.am__actions{display:flex;gap:10px;margin-top:20px}
.am__btn{flex:1;height:44px;border-radius:999px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;background:transparent;color:var(--ink);border:1px solid var(--line);transition:transform .2s var(--spring),background .2s}
.am__btn:active{transform:scale(.98)}
.am__btn--ok{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--glacier);color:#fff;border-color:transparent}
.am__btn--ok svg{width:17px;height:17px;flex:none}
.am__btn--ok:hover{filter:brightness(1.08)}
.am__btn--no{color:var(--claret);border-color:color-mix(in srgb,var(--claret) 45%,transparent)}
.am__btn--no:hover{background:color-mix(in srgb,var(--claret) 10%,transparent)}
.am__reasons{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px}
.am__reasons[hidden]{display:none}
.am__reasons span{font-size:10px;letter-spacing:.1em;color:var(--faint);margin-right:4px}
.am__reasons button{font:inherit;font-size:13px;padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer}
.am__reasons button:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
/* the passkey: the ball rises in the middle of the card with a ring sweeping around it */
.am__key{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .5s ease,visibility 0s linear .5s}
.am__orb{position:relative;width:128px;height:128px;display:grid;place-items:center}
.am__key .bot{width:88px;height:88px;position:relative;z-index:1}
.am__key b{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);display:inline-flex;align-items:center;gap:8px}
.am__key b svg{width:16px;height:16px;color:var(--ink)}
.am__keyglyph{position:absolute;z-index:2;left:calc(50% + 18px);top:calc(50% - 40px);width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;box-shadow:0 0 0 3px var(--surface);animation:am-glyph .5s var(--spring) .25s both}
.am__keyglyph svg{width:16px;height:16px}
@keyframes am-glyph{from{transform:scale(0)}to{transform:scale(1)}}
.am__ring{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,var(--glacier) 0 var(--sweep,0%),color-mix(in srgb,var(--ink) 10%,transparent) var(--sweep,0%) 100%);-webkit-mask:radial-gradient(circle,transparent 60px,#000 61px,#000 64px,transparent 65px);mask:radial-gradient(circle,transparent 60px,#000 61px,#000 64px,transparent 65px)}
.am__card[data-state="keying"] .am__key{opacity:1;visibility:visible;transition:opacity .5s ease,visibility 0s}
.am__card[data-state="keying"] .am__ring{animation:am-sweep 1.4s cubic-bezier(.4,0,.2,1) forwards}
@property --sweep{syntax:"<percentage>";inherits:false;initial-value:0%}
@keyframes am-sweep{to{--sweep:100%}}
/* done: the card settles into its answer */
.am__done{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;gap:10px;padding:24px;text-align:center;background:var(--surface);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .6s ease .1s,visibility 0s linear .7s}
.am__done .am__tick{width:56px;height:56px;border-radius:50%;background:#13D1A3;color:#0A0A0A;display:grid;place-items:center;transform:scale(.6);transition:transform .6s var(--spring) .15s}
.am__tick svg{width:28px;height:28px}
.am__card[data-state="rejected"] .am__tick{background:var(--claret)}
.am__card[data-state="rejected"] .am__tick svg{display:none}
.am__done b{font-weight:500;font-size:24px;letter-spacing:-.02em;color:var(--ink)}
.am__done span{font-size:14.5px;color:var(--muted);max-width:34ch}
.am__hash{font-size:11px;letter-spacing:.06em;color:var(--faint);min-height:16px}
.am__again{margin-top:8px;font:inherit;font-size:13px;color:var(--ink);background:transparent;border:0;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.am__card[data-state="approved"] .am__done,.am__card[data-state="rejected"] .am__done{opacity:1;visibility:visible;pointer-events:auto;position:relative;inset:auto;padding:36px 16px 28px;transition:opacity .6s ease .1s,visibility 0s}
/* Try it again: the card returns to waiting at once, nothing fades across it */
.am__card.is-resetting,.am__card.is-resetting *{transition:none!important;animation:none!important}
.am__card[data-state="approved"]>:not(.am__done),.am__card[data-state="rejected"]>:not(.am__done){display:none}
.am__card[data-state="approved"] .am__tick,.am__card[data-state="rejected"] .am__tick{transform:none}
.am__card[data-state="approved"]{border-color:rgba(19,209,163,.45)}
.am__card[data-state="rejected"]{border-color:color-mix(in srgb,var(--claret) 45%,transparent)}
/* the four steps light in turn */
.am__steps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.am__steps li{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-radius:16px;border:1px solid var(--line-2);background:color-mix(in srgb,var(--ink) 2%,transparent);opacity:.55;transition:opacity .6s ease,border-color .6s ease,background .6s ease}
.am__steps li.is-on{opacity:1;border-color:color-mix(in srgb,var(--ink) 25%,transparent);background:color-mix(in srgb,var(--ink) 5%,transparent)}
.am__steps li>span{font-size:10px;letter-spacing:.12em;color:var(--faint);padding-top:4px}
.am__steps b{display:block;font-weight:500;font-size:15px;color:var(--ink)}.am__steps i{display:block;font-style:normal;font-size:13px;color:var(--muted);margin-top:3px;line-height:1.45}
@media (max-width:900px){.am{grid-template-columns:1fr;gap:16px}}
@media (max-width:560px){.am__card{padding:20px 16px 18px;min-height:0}.am__btn{font-size:13px;padding:8px 10px;height:auto;min-height:44px;line-height:1.2}.am__kv b{max-width:58%}.am__hd{flex-wrap:wrap;gap:10px 12px}.am__hd .bot{width:38px;height:38px}.am__who{flex:1 1 60%}.am__who b{font-size:15.5px}.am__pill{order:4;margin-left:50px}}
@media (prefers-reduced-motion:reduce){.am__key,.am__done,.am__tick,.am__steps li{transition:none}.am__ring{animation:none!important;--sweep:100%}}

/* ═══════════════════════ THE SCREENS, in action (Console page) ═══════════════════════
   The three tiles play once they are in view: approval rows arrive and the live
   row's button breathes; the thread's messages land one after another; the
   shift bars fill to their value and keep a faint shimmer. */
.xt--live .h-row,.xt--live .xt__msg,.xt--live .xt__who,.xt--live .xt__kv,.xt--live .xt__stamp{opacity:0;transform:translateY(8px)}
.xt--live.in .h-row,.xt--live.in .xt__msg,.xt--live.in .xt__who,.xt--live.in .xt__kv,.xt--live.in .xt__stamp{animation:xt-land .7s var(--ease) both}
.xt--live.in > .xt__body > :nth-child(1){animation-delay:.15s}.xt--live.in > .xt__body > :nth-child(2){animation-delay:.55s}.xt--live.in > .xt__body > :nth-child(3){animation-delay:.95s}.xt--live.in > .xt__body > :nth-child(4){animation-delay:1.35s}.xt--live.in > .xt__body > :nth-child(5){animation-delay:1.75s}.xt--live.in > .xt__body > :nth-child(6){animation-delay:2.1s}
/* a chat tile's reply is typed: the dots first, then the bubble */
.xt--chat .xt__msg:not(.xt__msg--me){position:relative}
.xt--chat.in .xt__msg:not(.xt__msg--me)::before{content:"";position:absolute;left:13px;top:12px;width:28px;height:8px;background:radial-gradient(circle,var(--muted) 2.5px,transparent 3px) 0 0/10px 8px repeat-x;animation:xt-dots .9s steps(3,end) 2 both;animation-delay:.55s;opacity:0}
@keyframes xt-dots{0%{opacity:1}100%{opacity:1}}
.xt--chat.in .xt__msg:not(.xt__msg--me){animation-delay:1.3s!important}
.xt--chat.in .xt__msg:not(.xt__msg--me)::before{display:none}
/* the mobile moment keeps the desktop's side-by-side buttons */

@keyframes xt-land{to{opacity:1;transform:none}}
.xt--queue.in .h-row--hi .h-go{animation:xt-breathe 2.6s ease-in-out 1.6s infinite}
@keyframes xt-breathe{0%,100%{box-shadow:0 0 0 0 rgba(218,41,28,0)}50%{box-shadow:0 0 0 6px rgba(218,41,28,.18)}}
.xt--thread.in .xt__msg:not(.xt__msg--me){position:relative}
.xt--shift .h-bar i{transform-origin:left center;transform:scaleX(0)}
.xt--shift.in .h-bar i{animation:xt-fill 1.6s cubic-bezier(.4,0,.2,1) both}
.xt--shift.in > .xt__body > :nth-child(1) .h-bar i{animation-delay:.5s}.xt--shift.in > .xt__body > :nth-child(2) .h-bar i{animation-delay:.9s}.xt--shift.in > .xt__body > :nth-child(3) .h-bar i{animation-delay:1.3s}
@keyframes xt-fill{to{transform:scaleX(1)}}
.xt--shift.in .h-bar{position:relative;overflow:hidden}
.xt--shift.in .h-bar::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0 40%,rgba(255,255,255,.35) 50%,transparent 60% 100%);transform:translateX(-100%);animation:xt-shimmer 3.2s ease-in-out 2.4s infinite}
@keyframes xt-shimmer{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.xt--live .h-row,.xt--live .xt__msg,.xt--live .xt__who,.xt--live .xt__stamp{opacity:1;transform:none;animation:none!important}.xt--shift .h-bar i{transform:none;animation:none!important}.xt--shift.in .h-bar::after,.xt--queue.in .h-row--hi .h-go{animation:none!important}}

/* ═══════════════════════ ONE RUN, in action ═══════════════════════
   The console mock plays like a live thread: Säntis types before each message,
   each tool step reports running and then succeeds, the approval card's button
   breathes until you answer, the sidebar preview follows, and the thread scrolls
   to keep the newest line in view. Loops with a pause. */
/* while playing, a message that has not landed takes no space, so the thread never scrolls into emptiness; a group shows once its first line is on its way */
.console.is-play .t{display:none;animation:none!important}
.console.is-play .t.is-in{display:block;animation:tin .55s var(--ease) both!important}
.console.is-play .ms-grp:not(.is-in){display:none}
.ms-typing{display:inline-flex;gap:4px;align-items:center;padding:11px 13px;border-radius:16px;background:var(--surface-2);width:max-content;animation:ms-typing-in .35s ease both}
.ms-typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:ms-typing 1.2s ease-in-out infinite}
.ms-typing i:nth-child(2){animation-delay:.2s}.ms-typing i:nth-child(3){animation-delay:.4s}
@keyframes ms-typing{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}
@keyframes ms-typing-in{from{opacity:0;transform:translateY(6px)}}
.ms-meta{transition:color .5s ease}
.ms-meta.is-running{color:var(--faint)}
.ms-meta.is-flash{color:#13D1A3}
.ms-btn--go.is-breathing{animation:xt-breathe 2.4s ease-in-out infinite}
.console.is-play .ms-thread{scroll-behavior:smooth;min-height:560px;justify-content:flex-end}
@media (max-width:900px){.console.is-play .ms-thread{min-height:440px}}
@media (prefers-reduced-motion:reduce){.console.is-play .t{opacity:1;transform:none;transition:none}.ms-typing,.ms-btn--go.is-breathing{animation:none}}

.am__signed{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.am__signed svg{width:16px;height:16px;color:var(--ink)}
.am__card[data-state="rejected"] .am__signed{display:none}

/* the home "On shift now" panel plays as the Console tiles do: rows land in turn, bars fill, the waiting row's button breathes */
.h-panel--live .h-panel__hd,.h-panel--live .h-row{opacity:0;transform:translateY(8px)}
.h-panel--live.in .h-panel__hd,.h-panel--live.in .h-row{animation:xt-land .7s var(--ease) both}
.h-panel--live.in > :nth-child(1){animation-delay:.1s}.h-panel--live.in > :nth-child(2){animation-delay:.4s}.h-panel--live.in > :nth-child(3){animation-delay:.7s}.h-panel--live.in > :nth-child(4){animation-delay:1s}.h-panel--live.in > :nth-child(5){animation-delay:1.4s}.h-panel--live.in > :nth-child(6){animation-delay:1.7s}
.h-panel--live .h-bar i{transform-origin:left center;transform:scaleX(0)}
.h-panel--live.in .h-bar i{animation:xt-fill 1.6s cubic-bezier(.4,0,.2,1) both}
.h-panel--live.in > :nth-child(2) .h-bar i{animation-delay:.9s}.h-panel--live.in > :nth-child(3) .h-bar i{animation-delay:1.2s}.h-panel--live.in > :nth-child(4) .h-bar i{animation-delay:1.5s}
.h-panel--live.in .h-bar{position:relative;overflow:hidden}
.h-panel--live.in .h-bar::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0 40%,rgba(255,255,255,.35) 50%,transparent 60% 100%);transform:translateX(-100%);animation:xt-shimmer 3.2s ease-in-out 2.6s infinite}
.h-panel--live.in .h-row--hi .h-go{animation:xt-breathe 2.6s ease-in-out 2.2s infinite}
@media (prefers-reduced-motion:reduce){.h-panel--live .h-panel__hd,.h-panel--live .h-row{opacity:1;transform:none;animation:none!important}.h-panel--live .h-bar i{transform:none;animation:none!important}.h-panel--live.in .h-bar::after,.h-panel--live.in .h-row--hi .h-go{animation:none!important}}

/* ═══════════════════════ BILLING — Monthly | Annual ═══════════════════════
   x.ai/bot's toggle: two options in a pill, a thumb that slides under the choice,
   the saving in small type on the annual side. One choice drives every price on the page. */
.bill{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;align-items:stretch;margin:-28px auto 34px;padding:4px;border-radius:999px;background:var(--surface);border:1px solid var(--line);isolation:isolate}
.h-sec .bill,.sec .bill{display:inline-grid}
.bill__wrap{text-align:center}
/* SwiftUI's springs: the thumb overshoots and settles, an option presses in, the prices pop, the cards breathe */
.bill__thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:var(--ink);transition:transform .6s cubic-bezier(.34,1.45,.5,1);z-index:0}
.bill[data-on="annual"] .bill__thumb{transform:translateX(100%)}
.bill__opt{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:132px;height:40px;padding:0 18px;border:0;background:transparent;border-radius:999px;font:inherit;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;transition:color .35s ease}
.bill__opt.is-on{color:var(--bg)}
.bill__opt small{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border-radius:999px;background:rgba(19,209,163,.16);color:#13D1A3;transition:background .35s,color .35s}
.bill__opt.is-on small{background:rgba(19,209,163,.22)}
.bill__opt:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
/* the price swaps with a small settle */
/* SwiftUI's numericText transition: the old figure slides up and out as the new one slides in from below, and the digits count to the new value on the way */
/* the roll keeps the figure's own line box, so nothing below it moves while the digits change */
.bill-roll{position:relative;display:inline-block;overflow:visible;clip-path:inset(-4px 0);vertical-align:baseline;line-height:inherit}
.bill-roll__out,.bill-roll__in{display:inline-block;white-space:nowrap;line-height:inherit;vertical-align:baseline}
.bill-roll__out{position:absolute;left:0;top:0;animation:bill-out .5s cubic-bezier(.4,0,.2,1) both}
.bill-roll__in{animation:bill-in .6s cubic-bezier(.34,1.3,.5,1) both}
@keyframes bill-out{to{opacity:0;transform:translateY(-70%);filter:blur(3px)}}
@keyframes bill-in{from{opacity:0;transform:translateY(70%);filter:blur(3px)}60%{filter:blur(0)}to{opacity:1;transform:none;filter:blur(0)}}
.pp-amount .bill-roll{vertical-align:baseline}
.bill__opt{transition:color .35s ease,transform .35s cubic-bezier(.34,1.45,.5,1)}
.bill__opt:active{transform:scale(.94)}
.bill.is-bounce .bill__thumb{animation:bill-thumb .6s cubic-bezier(.34,1.45,.5,1)}
@keyframes bill-thumb{0%{scale:1}35%{scale:1.06 .9}100%{scale:1}}
.pp-grid{position:relative}
#pricing .bill,.sec .bill{position:relative;left:50%;transform:translateX(-50%)}
.cmp .bill{margin:0 0 18px}
@media (max-width:640px){.bill{margin:-16px auto 26px}.bill__opt{min-width:0;flex:1;height:38px;font-size:13.5px;padding:0 14px}.bill__opt small{font-size:9px;padding:3px 6px}}
@media (prefers-reduced-motion:reduce){.bill__thumb,.bill__opt{transition:none}.bill-roll__out,.bill-roll__in,.bill.is-bounce .bill__thumb{animation:none!important}.bill-roll__out{display:none}}
/* ═══════════════════════ BERNINA'S SIGN ═══════════════════════
   The shield, inline, wherever Bernina is named: sized by the text, sat on the baseline. */
.bsign{width:1.05em;height:1.05em;flex:none;vertical-align:-.16em;margin-right:.3em;color:currentColor}
.bname{white-space:nowrap}
.eyebrow .bsign{width:1.25em;height:1.25em;vertical-align:-.3em;margin-right:.1em}
.rl-names .bname::before{display:none}
.xt__foot .bname{color:inherit}
.faq__q{flex:1;min-width:0}

/* the closing band's line stays one line on a desktop, on every page */
@media (min-width:1000px){.ctaband-sub{max-width:none;white-space:nowrap}}
.bill-fade{animation:bill-fade .45s ease}
@keyframes bill-fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.bill-fade{animation:none}}
/* the plan card's note keeps one line's height whichever billing is shown, so the row never re-flows */
.pp-sub{min-height:20px}

/* ═══════════════════════ THE FOUNDER, richer ═══════════════════════ */
.fd__why{color:var(--ink-2)}
.fd__facts{display:grid;grid-template-columns:repeat(3,auto);gap:0 28px;margin:0 0 28px;padding:18px 0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);justify-content:start}
.fd__facts dt{font-size:10px;letter-spacing:.12em;color:var(--faint);margin:0 0 4px}
.fd__facts dd{margin:0;font-size:15px;font-weight:500;color:var(--ink);letter-spacing:-.01em}
.fd__links{gap:10px}
.fd__soc{display:inline-flex;align-items:center;gap:8px}
.fd__soc svg{width:15px;height:15px;flex:none}
.fd__now{display:block;margin-top:6px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);line-height:1.5}
.fd__now b{display:inline;font-family:var(--mono);font-size:inherit;line-height:inherit;color:var(--ink);font-weight:500;letter-spacing:.02em}
.fd__who{align-items:flex-start}
.fd__who .fd__ava{margin-top:2px}
.fd__who>div{min-width:0}
.fd__city{transition:background .4s ease,border-color .4s ease}
.fd__city.is-now{background:color-mix(in srgb,var(--ink) 7%,transparent);border-color:color-mix(in srgb,var(--ink) 18%,transparent)}
/* one day, three office hours: a track from 00:00 to 24:00 UTC, a band per city, night shaded, a line for now */
.fd__day{margin-top:4px}
.fd__track{position:relative;height:34px;border-radius:10px;background:color-mix(in srgb,var(--ink) 4%,transparent);border:1px solid var(--line-2);overflow:hidden}
.fd__night{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 6px,color-mix(in srgb,var(--ink) 3%,transparent) 6px 7px);pointer-events:none}
.fd__band{position:absolute;top:6px;height:6px;border-radius:999px;opacity:.9;transition:left .8s var(--ease),width .8s var(--ease)}
.fd__band--iris{background:var(--iris);top:5px}.fd__band--glacier{background:var(--glacier);top:14px}.fd__band--sky{background:var(--sky);top:23px}
.fd__band[data-wrap]{border-radius:0 999px 999px 0}
.fd__nowline{position:absolute;top:0;bottom:0;width:2px;background:var(--ink);box-shadow:0 0 10px color-mix(in srgb,var(--ink) 60%,transparent);transform:translateX(-1px);transition:left 1s var(--ease)}
.fd__nowline::after{content:"now";position:absolute;top:-1px;left:6px;font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.fd__axis{display:flex;justify-content:space-between;margin-top:6px;font-size:9px;letter-spacing:.08em;color:var(--faint)}
@media (max-width:640px){.fd__facts{grid-template-columns:repeat(3,1fr);gap:0 12px}.fd__facts dd{font-size:13.5px}.fd__links .btn{flex:1 1 calc(50% - 5px)}.fd__nowline::after{display:none}}
@media (prefers-reduced-motion:reduce){.fd__band,.fd__nowline{transition:none}}

/* the founder's own mark and wordmark, as abduramanov.com sets them: the //A in tiffany on black, the name in tracked capitals */
.fd__amark{width:56px;height:56px;flex:none;border-radius:14px;box-shadow:0 8px 20px rgba(0,0,0,.45)}
:root[data-zt="light"] .fd__amark{box-shadow:0 8px 20px rgba(9,11,16,.22)}
.fd__wm{display:block;font-family:var(--sans)!important;font-weight:500!important;font-size:15px!important;letter-spacing:.44em!important;text-transform:uppercase;line-height:1.3!important;color:var(--ink)}
.fd__wm a{color:inherit}
@media (max-width:640px){.fd__wm{font-size:13px!important;letter-spacing:.26em!important}}
/* ═══════════════════════ THE CONSOLE MOCK — sidebar, redrawn ═══════════════════════
   Quieter and more legible: a monogram tile for the company, one system tile for
   Approvals, group heads with counts, tags in the agent's colour, the open row
   marked by a bar in that colour, and a foot that carries Bernina and the person. */
.ms-side{padding:0 10px 12px;background:color-mix(in srgb,var(--bg-2) 70%,var(--surface));}
.ms-search{height:32px;border-radius:10px;background:color-mix(in srgb,var(--ink) 6%,transparent);gap:8px;padding:0 10px 0 11px}
.ms-search kbd{margin-left:auto;font-size:9px;letter-spacing:.06em;color:var(--faint);padding:2px 5px;border-radius:5px;border:1px solid var(--line-2)}
.ms-head{display:flex;align-items:center;justify-content:space-between;margin:14px 10px 6px;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.ms-head span{color:var(--faint);opacity:.75;letter-spacing:.04em;text-transform:none}
.ms-row{gap:10px;padding:8px 10px;border-radius:12px;border:1px solid transparent;transition:background .25s,border-color .25s}
.ms-row.is-on{background:color-mix(in srgb,var(--ac,var(--ink)) 10%,transparent);border-color:color-mix(in srgb,var(--ac,var(--ink)) 28%,transparent)}
.ms-row.is-on::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--ac,var(--ink))}
.ms-tile{width:36px;height:36px;border-radius:12px}
.ms-tile .bot{width:34px;height:34px;filter:drop-shadow(0 3px 8px rgba(0,0,0,.35))}
.ms-tile--co{background:var(--ink);color:var(--bg);font-size:14px;font-weight:600;letter-spacing:0;border-radius:12px}
.ms-tile--sys{background:color-mix(in srgb,var(--ink) 7%,transparent);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.ms-sysic{width:17px;height:17px}
.ms-name{font-size:12.5px;font-weight:600}
.ms-tag{font-size:8.5px;font-weight:600;padding:2px 6px;border-radius:999px;background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--muted)}
.ms-tag--iris{background:color-mix(in srgb,var(--iris) 16%,transparent);color:var(--iris)}
.ms-tag--glacier{background:color-mix(in srgb,var(--glacier) 16%,transparent);color:var(--glacier)}
.ms-tag--moss{background:color-mix(in srgb,var(--moss) 16%,transparent);color:var(--moss)}
.ms-tag--claret{background:color-mix(in srgb,var(--claret) 16%,transparent);color:var(--claret)}
.ms-tag--hot{background:color-mix(in srgb,var(--zug) 14%,transparent);color:var(--zug)}
.ms-tag--on{background:rgba(19,209,163,.14);color:#13D1A3;text-transform:uppercase;letter-spacing:.08em}
.ms-prev{font-size:11.5px;color:var(--muted)}
.ms-row.is-on .ms-prev{color:var(--ink-2)}
.ms-dot{right:10px;bottom:11px;box-shadow:0 0 8px var(--zug)}
.ms-foot{display:block;margin-top:12px;padding:10px 0 0;border-top:1px solid var(--line-2)}
.ms-guardrow,.ms-merow{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px}
.ms-guardrow{background:color-mix(in srgb,var(--ink) 4%,transparent);border:1px solid var(--line-2);margin-bottom:4px}
.ms-guardorb{position:relative;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);flex:none;isolation:isolate}
.ms-guardorb svg{width:16px;height:16px;color:var(--ink);position:relative;z-index:1}
.ms-guardorb::before{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);animation:ms-guard-breathe 4.8s ease-in-out infinite}
.ms-guardsweep{position:absolute;inset:-1px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 70%,rgba(19,209,163,.85) 92%,transparent 100%);-webkit-mask:radial-gradient(circle,transparent 15px,#000 16px);mask:radial-gradient(circle,transparent 15px,#000 16px);animation:ms-guard-sweep 6s linear infinite}
.ms-guardorb--sm{width:22px;height:22px}.ms-guardorb--sm svg{width:11px;height:11px}
.ms-guardorb--sm .ms-guardsweep{-webkit-mask:radial-gradient(circle,transparent 9px,#000 10px);mask:radial-gradient(circle,transparent 9px,#000 10px)}
@keyframes ms-guard-breathe{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.3);opacity:0}}
@keyframes ms-guard-sweep{to{transform:rotate(360deg)}}
.ms-me{width:36px;height:36px;border-radius:12px;font-size:14px}
/* the bar: Bernina beside the clock, as in the Console */
.ms-guard{margin-left:auto;display:inline-flex;align-items:center;gap:7px;padding:3px 9px 3px 3px;border-radius:999px;background:color-mix(in srgb,var(--ink) 5%,transparent);border:1px solid var(--line-2);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.ms-guard b{color:#13D1A3;font-weight:600}
.ms-bar .console__clock{margin-left:0}
/* the verdict strip at the top of the thread */
.ms-bstrip{display:grid;grid-template-columns:auto 1fr 1fr 1fr;gap:8px;align-items:stretch;margin:2px 0 6px;padding:9px 12px;border-radius:12px;background:color-mix(in srgb,var(--ink) 3%,transparent);border:1px solid var(--line-2)}
.ms-bstrip__k{display:inline-flex;align-items:center;gap:6px;padding-right:10px;border-right:1px solid var(--line-2);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.ms-bstrip__k svg{width:13px;height:13px}
.ms-bstrip__c{display:flex;flex-direction:column;gap:2px;font-size:9px;letter-spacing:.08em;text-transform:uppercase}
.ms-bstrip__c i{font-style:normal;color:var(--faint)}.ms-bstrip__c b{font-weight:600;color:#13D1A3;letter-spacing:.04em}
@media (max-width:900px){.ms-guard span:not(.ms-guardorb),.ms-guard b{display:none}.ms-guard{padding:3px;gap:0}.ms-bstrip{grid-template-columns:auto 1fr 1fr 1fr;gap:6px;padding:8px 10px}}
@media (prefers-reduced-motion:reduce){.ms-guardorb::before,.ms-guardsweep{animation:none}}

/* ═══════════════════════ THE CONSOLE MOCK — the composer as liquid glass, the dots, the gear ═══════════════════════ */
.ms-pane{position:relative}
.ms-composer{position:absolute;left:0;right:0;bottom:0;display:block;padding:0 16px 14px;border-top:0;background:none;pointer-events:none}
.ms-glass{display:flex;align-items:center;gap:10px;width:100%;padding:8px 8px 8px 10px;border-radius:999px;pointer-events:auto;
  background:linear-gradient(135deg,color-mix(in srgb,var(--ink) 9%,transparent),color-mix(in srgb,var(--ink) 4%,transparent));
  -webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);
  border:1px solid color-mix(in srgb,var(--ink) 14%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 28%,transparent),inset 0 -1px 0 color-mix(in srgb,#000 25%,transparent),0 18px 40px -18px rgba(0,0,0,.7),0 2px 8px rgba(0,0,0,.25)}
:root[data-zt="light"] .ms-glass{background:linear-gradient(135deg,rgba(255,255,255,.75),rgba(255,255,255,.5));border-color:rgba(10,10,10,.1);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(10,10,10,.05),0 18px 40px -20px rgba(10,10,20,.35),0 2px 8px rgba(10,10,20,.08)}
.ms-glass .ms-in{height:34px;padding:0 6px;border:0;background:transparent;color:var(--muted);font-size:14px}
.ms-glass .ms-plus,.ms-glass .ms-mic{width:32px;height:32px;background:color-mix(in srgb,var(--ink) 9%,transparent);color:var(--ink);box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 18%,transparent)}
.ms-glass .ms-mic{background:var(--ink);color:var(--bg)}
/* the thread fills the pane and keeps its newest line just above the floating pill */
.ms-thread{padding-bottom:78px;max-height:none;flex:1;min-height:0}
.console.is-play .ms-thread{min-height:0}
.ms-pane{min-height:100%}
/* the unread dot: a bead with a glow, not a speck */
.ms-dot{width:9px;height:9px;right:10px;bottom:12px;background:radial-gradient(circle at 35% 35%,#FF6B5E,var(--zug) 60%);box-shadow:0 0 0 2px var(--surface),0 0 10px rgba(218,41,28,.7);animation:ms-dot 2.6s ease-in-out infinite}
@keyframes ms-dot{0%,100%{box-shadow:0 0 0 2px var(--surface),0 0 8px rgba(218,41,28,.55)}50%{box-shadow:0 0 0 2px var(--surface),0 0 14px rgba(218,41,28,.95)}}
/* the person's row: a settings gear at the right */
.ms-merow{position:relative;padding-right:40px}
.ms-gear{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--ink) 6%,transparent);border:1px solid var(--line-2);color:var(--muted);transition:transform 1.2s cubic-bezier(.34,1.3,.5,1),color .3s,background .3s}
.ms-gear svg{width:15px;height:15px}
.console.ms:hover .ms-gear{transform:translateY(-50%) rotate(90deg);color:var(--ink);background:color-mix(in srgb,var(--ink) 10%,transparent)}
@media (prefers-reduced-motion:reduce){.ms-dot,.ms-gear{animation:none;transition:none}}

@media (max-width:900px){.ms-thread{padding-bottom:70px}}
/* the console keeps one height: the sidebar's own, and the thread scrolls inside it. The pane is
   taken out of the grid's height calculation (absolute) so it can never stretch the frame. */
.console.ms{position:relative;align-items:stretch}
.console.ms .ms-side{position:relative;z-index:1;overflow:visible}
.console.ms .ms-pane{position:absolute;top:0;bottom:0;left:236px;right:0;min-height:0;height:auto}
.ms-thread{overflow:hidden;min-height:0}
@media (max-width:900px){.console.ms{height:600px}.console.ms .ms-pane{left:0}}