/* VSETS. Hand-written, no build step. Strict CSP: no inline styles anywhere.
   Motion rules (the box's Safari lesson, memory/the-phone-pays-in-frames.md):
   animate transform, opacity and the individual translate only. No filter, backdrop-filter,
   mix-blend-mode or background-attachment:fixed. Infinite animations run only under .play.
   One canvas exception: the WebGL swarm (assets/swarm.js), which runs only while on screen and steps itself down. */

@font-face { font-family: "Bricolage"; src: url(/assets/fonts/bricolage-grotesque-latin-wght-normal.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Inter"; src: url(/assets/fonts/inter-latin-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url(/assets/fonts/instrument-serif-latin-400-normal.woff2) format("woff2"); font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url(/assets/fonts/instrument-serif-latin-400-italic.woff2) format("woff2"); font-style: italic; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(/assets/fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(/assets/fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }

:root {
  /* Depth without blur. A blurred box-shadow was the largest paint cost on WebKit while scrolling (measured, tools/perf-find.mjs). */
  --sheet: 0 1px 0 rgb(20 20 31 / .08), 0 11px 0 -6px rgb(30 25 90 / .07);
  --paper: #FBFAF6; --paper2: #F4F1E8; --card: #FFFFFF;
  --ink: #14141F; --ink2: #3A3C4C; --mut: #5C5F73; --line: #E4E1D8; --line2: #D4D0C4;
  /* The colour rule of the brand: amber is the human, violet is the virtual. */
  --amber: #F2890D; --amber-ink: #A85700; --amber-bg: #FFF2DF;
  --violet: #5B4FE9; --violet-ink: #4438D1; --violet-bg: #EEECFF;
  --teal: #0BA58F; --teal-ink: #07766A; --teal-bg: #E2F6F2;
  --sky: #1C8FDB; --sky-ink: #0F6AA8; --sky-bg: #E4F2FC;
  --rose: #DC3F67; --rose-ink: #B02A4E; --rose-bg: #FDE9EE;
  --display: "Bricolage", ui-sans-serif, system-ui, sans-serif;
  --body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", ui-serif, Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --pad: clamp(20px, 4.5vw, 64px);
  --wide: 1240px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --spring: cubic-bezier(.3, 1.4, .5, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 68px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.55 var(--body); -webkit-font-smoothing: antialiased; }
html, body { overflow-x: clip; }
h1, h2, h3, p, ul, ol, dl, dd, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
a { color: inherit; }
img, svg { display: block; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; }
:focus-visible { outline: 2.5px solid var(--violet); outline-offset: 2px; border-radius: 6px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: 12px; z-index: 100; padding: 10px 14px; background: var(--ink); color: #fff; border-radius: 10px; translate: 0 -200%; }
.skip:focus { translate: 0 0; }

/* ── type ── */
h1, h2 { font-family: var(--display); font-weight: 700; letter-spacing: -.028em; line-height: 1.02; text-wrap: balance; }
h1 { font-size: clamp(2.7rem, 4.9vw, 4.4rem); }
h2 { font-size: clamp(2.15rem, 4.6vw, 4rem); }
h1 em, h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.015em; }
h1 em { color: var(--amber-ink); }
h2 em { color: var(--violet-ink); }
h3 { font-family: var(--display); font-weight: 650; letter-spacing: -.012em; line-height: 1.2; }
.eyebrow { font: 500 .78rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--violet-ink); margin-bottom: 18px; }
.eyebrow b { font-weight: 500; color: var(--amber-ink); }
.lede { font-size: clamp(1.06rem, 1.45vw, 1.22rem); line-height: 1.55; color: var(--ink2); max-width: 58ch; text-wrap: pretty; }
.tag { display: inline-block; font: 500 .66rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 5px 7px; border-radius: 6px; color: var(--mut); background: var(--paper2); border: 1px solid var(--line); white-space: nowrap; }
.tag-road { color: var(--amber-ink); background: var(--amber-bg); border-color: #F6D9AE; }

/* ── buttons ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; flex: none; white-space: nowrap; min-height: 50px; padding: 0 22px; border-radius: 13px; font: 600 1rem/1 var(--body); text-decoration: none; transition: transform .22s var(--ease), background-color .2s; }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn:active { transform: scale(.97); }
.btn-go { background: var(--violet); color: #fff; }
.btn-ink { background: var(--ink); color: #fff; }
.btn-line { color: var(--ink); background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line2); }
.btn-text { color: var(--violet-ink); min-height: 44px; }
.wide { width: 100%; }
@media (hover: hover) and (pointer: fine) {
  .btn-go:hover { background: var(--violet-ink); transform: translateY(-2px); }
  .btn-ink:hover { background: #2A2A3D; transform: translateY(-2px); }
  .btn-line:hover { transform: translateY(-2px); }
  .btn-go:hover svg, .btn-ink:hover svg { transform: translateX(3px); }
  .btn svg { transition: transform .22s var(--ease); }
}

/* ── nav ── */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 68px; padding: 0 var(--pad); transition: background-color .25s; }
.scrolled .nav { background: var(--paper); }
.nav::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: var(--line); opacity: 0; transition: opacity .25s; }
.scrolled .nav::after { opacity: 1; }
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.brand-m { width: 30px; height: 30px; }
.brand-w { font: 800 1.26rem/1 var(--display); letter-spacing: .015em; }
.nav-links { display: none; gap: 28px; font-size: .94rem; }
.nav-links a { text-decoration: none; color: var(--ink2); padding: 8px 0; }
.nav-cta { min-height: 42px; padding: 0 16px; font-size: .92rem; border-radius: 11px; }
@media (min-width: 1040px) { .nav-links { display: flex; } }
@media (hover: hover) and (pointer: fine) { .nav-links a:hover { color: var(--violet-ink); } }

/* ── sky: small radial gradients, scaled up by transform so the GPU never rasterises a huge soft area ── */
.sky { position: absolute; inset: 0; pointer-events: none; overflow: hidden; overflow: clip; z-index: 0; }
.orb { position: absolute; display: block; width: 260px; height: 260px; border-radius: 50%; will-change: translate; }
.orb-a { left: 54%; top: 2%; transform: scale(3); background: radial-gradient(closest-side, rgb(91 79 233 / .17), rgb(91 79 233 / 0)); }
.orb-b { left: 8%; top: 56%; transform: scale(2.6); background: radial-gradient(closest-side, rgb(242 137 13 / .17), rgb(242 137 13 / 0)); }
.orb-c { left: 82%; top: 62%; transform: scale(1.9); background: radial-gradient(closest-side, rgb(11 165 143 / .15), rgb(11 165 143 / 0)); }

/* ── parallax: one custom property per depth. The browser's scroll timeline runs it where it can;
      site.js runs a small rAF only where it cannot. ── */
.p-slow { --d: 10px; } .p-mid { --d: 18px; } .p-fast { --d: 28px; }
.orb.p-slow { --d: 50px; } .orb.p-mid { --d: 90px; } .orb.p-fast { --d: 130px; }
.fin-m.p-mid { --d: 36px; }
@keyframes plx { from { translate: 0 calc(var(--d) * -1); } to { translate: 0 var(--d); } }
@supports (animation-timeline: view()) {
  html:not(.plx-js) .plx { animation: plx linear both; animation-timeline: view(); animation-range: cover; }
}

/* ── load-in ── */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.load { animation: rise .75s var(--ease) both; }
.l2 { animation-delay: .05s; } .l3 { animation-delay: .12s; } .l4 { animation-delay: .18s; } .l5 { animation-delay: .25s; }

/* ── scroll reveal: a state, set once by IntersectionObserver ── */
.js .rv { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--rd, 0s); }
.js .rv.in { opacity: 1; transform: none; }
@media (max-width: 700px) { .js .rv { transform: translateY(14px); transition-duration: .42s; } }

/* ═══ HERO ═══ */
.hero { position: relative; overflow: hidden; overflow: clip; padding: 108px var(--pad) 40px; }
.hero-in { position: relative; z-index: 1; max-width: var(--wide); margin: 0 auto; display: grid; gap: 40px; align-items: center; }
.hero .lede { margin-top: 22px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.price-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 36px; border-top: 1px solid var(--line2); }
.price-strip > div { padding: 15px 14px 0 0; }
.price-strip > div + div { padding-left: 14px; border-left: 1px solid var(--line); }
.price-strip dt { font-size: .76rem; line-height: 1.25; color: var(--mut); min-height: 2.5em; }
.price-strip dd { font: 700 clamp(1.3rem, 2.2vw, 1.85rem)/1.1 var(--display); letter-spacing: -.02em; margin-top: 3px; }
.price-strip dd span { display: block; font: 400 .76rem/1.3 var(--body); letter-spacing: 0; color: var(--mut); margin-top: 5px; }
.price-strip .hot dd { color: var(--amber-ink); }

/* the deck: a dark instrument panel. The swarm draws on the canvas; every word on it is real text. */
.deck { position: relative; width: 100%; max-width: 620px; margin-inline: auto; aspect-ratio: 1 / 1.08; min-height: 400px; border-radius: 28px; overflow: hidden; overflow: clip; background: radial-gradient(ellipse at 50% 55%, #27254A, var(--ink) 68%); color: #fff; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.swarm-cv { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .6s var(--ease); touch-action: pan-y; }
.swarm-cv.on { opacity: 1; }
.deck-poster { position: absolute; left: 50%; top: 47%; width: 34%; aspect-ratio: 1; height: auto; transform: translate(-50%, -50%); }
.deck-lead { position: absolute; left: 16px; top: 16px; display: flex; align-items: center; gap: 11px; pointer-events: none; }
.deck-lead p { display: grid; gap: 1px; }
.deck-lead b { font: 650 .96rem/1.2 var(--display); }
.deck-lead small { font-size: .74rem; line-height: 1.25; color: #C8C9D6; }
.lead-av { position: relative; display: grid; place-items: center; width: 42px; aspect-ratio: 1; flex: none; border-radius: 50%; background: var(--amber); color: #fff; }
.lead-av svg { width: 62%; height: 62%; }
.deck .tag { position: absolute; right: 14px; top: 16px; color: #C8C9D6; background: rgb(255 255 255 / .07); border-color: rgb(255 255 255 / .16); pointer-events: none; }
.deck-now { position: absolute; left: 16px; right: 16px; bottom: 14px; display: grid; gap: 10px; }
.deck-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; pointer-events: none; }
.deck-role { font: 700 clamp(1.5rem, 2.6vw, 1.9rem)/1.1 var(--display); letter-spacing: -.02em; }
.deck-status { font: 500 .76rem/1.2 var(--mono); color: #C8C9D6; }
@keyframes swap { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
.deck-line.swap { animation: swap .4s var(--ease) both; }
.deck-rail { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.deck-rail li { position: relative; display: grid; place-items: center; height: 40px; border-radius: 11px; color: #A8A9BB; background: rgb(255 255 255 / .07); overflow: hidden; overflow: clip; cursor: pointer; transition: background-color .3s, color .3s; }
.deck-rail svg { width: 19px; height: 19px; }
.deck-rail li.on { color: var(--ink); background: #fff; }
@media (hover: hover) and (pointer: fine) { .deck-rail li:hover:not(.on) { background: rgb(255 255 255 / .16); color: #fff; } }
.chart-tag { position: absolute; right: 0; bottom: -2px; }

/* On a phone the deck comes straight after the headline, so it is in the first screen. */
@media (max-width: 1039px) {
  .hero { padding-top: 92px; }
  .hero-in { gap: 0; }
  .hero-copy { display: contents; }
  .hero-copy .eyebrow { order: 1; margin-bottom: 12px; }
  #hero-h { order: 2; font-size: clamp(1.9rem, 9.7vw, 3.4rem); }
  .deck { order: 3; margin-top: 22px; aspect-ratio: auto; max-width: none; height: clamp(410px, 58svh, 560px); }
  .hero .lede { order: 4; margin-top: 26px; }
  .cta-row { order: 5; }
  .price-strip { order: 6; }
}
@media (max-width: 700px) {
  .deck { width: calc(100% + var(--pad) * 2); max-width: none; margin-inline: calc(var(--pad) * -1); border-radius: 0; }
}

@media (min-width: 1040px) {
  .hero { min-height: 100svh; padding-top: 110px; display: flex; align-items: center; }
  .hero-in { width: 100%; grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); gap: 56px; }
}
@media (max-width: 480px) {
  .price-strip > div { padding-right: 8px; } .price-strip > div + div { padding-left: 10px; }
  .price-strip dt { font-size: .7rem; } .price-strip dd span { font-size: .7rem; }
  .cta-row .btn { flex: 1 0 auto; }
  .nav-cta svg { display: none; }
}

/* ═══ sections ═══ */
.sec { padding: clamp(72px, 10vw, 140px) var(--pad); }
.sec-head { max-width: var(--wide); margin: 0 auto clamp(36px, 5vw, 64px); }
.sec-head h2 { max-width: 20ch; }
.sec-head .lede { margin-top: 18px; }
.sec-head.center { text-align: center; }
.sec-head.center h2, .sec-head.center .lede { margin-inline: auto; }

/* ═══ THE UPGRADE ═══ */
.up-grid { max-width: var(--wide); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); }
.up-stage-wrap { position: sticky; top: max(90px, calc(50svh - 270px)); align-self: start; }
.up-stage { --tile: 60%; position: relative; max-width: 500px; margin-inline: auto; }
.tks { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; aspect-ratio: 1; }
/* Every tile sits on the centre of its square cell, so the lines and the rails meet the tiles with no offset. */
.up-lines { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 1; }
/* Each seat keeps its own colour, from the same family as the hero's fleet tones. A pale face with a person badge is a human seat. A solid face with a fleet badge is a virtual seat. Amber stays the Lead's, so no seat uses it. */
.up-stage .t1 { --c: #5B4FE9; --ci: #4438D1; --cb: #EEECFF; --cl: #CCC7FB; }
.up-stage .t2 { --c: #068874; --ci: #045D50; --cb: #E3F9F3; --cl: #96E3D1; }
.up-stage .t3 { --c: #2072D5; --ci: #094D9A; --cb: #EDF4FE; --cl: #B4D4FE; }
.up-stage .t4 { --c: #017FAB; --ci: #055777; --cb: #E7F6FF; --cl: #9BDBFD; }
.up-stage .t5 { --c: #9550BB; --ci: #693386; --cb: #F8F0FF; --cl: #E3C2F8; }
.up-stage .t6 { --c: #C23D61; --ci: #8B2241; --cb: #FEEFF1; --cl: #FFBCC7; }
.up-stage .t7 { --c: #278B1E; --ci: #0E6106; --cb: #EBF8E9; --cl: #B4DFAE; }
.up-stage .t8 { --c: #8D7102; --ci: #614E00; --cb: #F9F3E2; --cl: #E4D094; }
.ul { stroke: var(--cl); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; transition: stroke .5s var(--ease); }
.ul.virt { stroke: var(--c); }
.up-stage .t1 { --pd: 0s; } .up-stage .t2 { --pd: -1.7s; } .up-stage .t3 { --pd: -.6s; } .up-stage .t4 { --pd: -2.2s; } .up-stage .t5 { --pd: -.9s; } .up-stage .t6 { --pd: -1.3s; } .up-stage .t7 { --pd: -2.5s; } .up-stage .t8 { --pd: -.4s; }
.t2 .tk-in { --fd: .05s; } .t3 .tk-in { --fd: .1s; } .t4 .tk-in { --fd: .15s; } .t5 .tk-in { --fd: .2s; } .t6 .tk-in { --fd: .25s; } .t7 .tk-in { --fd: .3s; } .t8 .tk-in { --fd: .35s; }
/* Packets: a rail runs from the Lead to a tile, and a dot moves by the rail's own width. The order goes out in the Lead's amber, the result comes back in the seat's colour. */
.rail { position: absolute; left: 50%; top: 50%; width: 33.333%; height: 0; transform-origin: 0 0; }
.rail.t1, .rail.t3, .rail.t6, .rail.t8 { width: 47.14%; }
.rail.t1 { transform: rotate(-135deg); } .rail.t2 { transform: rotate(-90deg); } .rail.t3 { transform: rotate(-45deg); } .rail.t4 { transform: rotate(180deg); }
.rail.t6 { transform: rotate(135deg); } .rail.t7 { transform: rotate(90deg); } .rail.t8 { transform: rotate(45deg); }
.rail b { position: absolute; left: 0; top: 0; width: 100%; height: 0; opacity: 0; }
.rail b::after { content: ""; position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.rail .ret::after { background: var(--c); }
.play .rail .out { animation: pk-out 4.6s linear var(--pd, 0s) infinite; }
.play .rail.virt .out { animation-duration: 2.6s; }
.play .rail.virt .ret { animation: pk-ret 2.6s linear var(--pd, 0s) infinite; }
@keyframes pk-out { 0% { transform: translateX(14%); opacity: 0; } 8%, 42% { opacity: 1; } 50%, 100% { transform: translateX(86%); opacity: 0; } }
@keyframes pk-ret { 0%, 50% { transform: translateX(86%); opacity: 0; } 58%, 92% { opacity: 1; } 100% { transform: translateX(14%); opacity: 0; } }
.tk { position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tk small { position: absolute; left: 50%; top: calc(50% + var(--tile) / 2 + 5px); translate: -50% 0; padding: 1px 4px; border-radius: 4px; background: var(--paper); font: 500 .72rem/1 var(--mono); color: var(--ci); }
.tk.tk-lead small { top: calc(50% + var(--tile) * .59 + 4px); color: var(--amber-ink); }
.tk-in { position: relative; flex: none; width: var(--tile); aspect-ratio: 1; transition: transform .2s var(--ease); }
.tk.busy .tk-in { animation: busy .6s var(--ease); }
@keyframes busy { 40% { transform: scale(1.07); } }
/* A tile turns in 2D: one face narrows to nothing, then the other opens. It needs no 3D space, so every browser paints it the same. */
.face { position: absolute; inset: 0; border-radius: 28%; transition: transform .2s ease-in var(--fd, 0s); }
.face.h { --t: 4.8s; color: var(--ci); background: var(--cb); box-shadow: inset 0 0 0 1.5px var(--cl); transform: scaleX(1); transition: transform .42s var(--spring) calc(var(--fd, 0s) + .2s); }
.face.v { --t: 2.6s; color: #fff; background: var(--c); transform: scaleX(0); box-shadow: 0 5px 0 -3px var(--cl); }
.tk.virt .face.h { transform: scaleX(0); transition: transform .2s ease-in var(--fd, 0s); }
.tk.virt .face.v { transform: scaleX(1); transition: transform .42s var(--spring) calc(var(--fd, 0s) + .2s); }
/* The Lead stays human in every state. */
.tk-lead .face.h { color: #fff; background: var(--amber); box-shadow: 0 5px 0 -3px rgb(242 137 13 / .35); border-radius: 50%; }
.lead-i { position: absolute; left: 20%; top: 18%; width: 60%; height: 60%; }
.ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--amber); opacity: 0; }
.play .ring { animation: ring-s 2.6s var(--ease) infinite; }
@keyframes ring-s { 0% { transform: scale(1); opacity: .9; } 80%, 100% { transform: scale(1.3); opacity: 0; } }
.lead-orbit { position: absolute; inset: -9%; border-radius: 50%; border: 2px dashed #EDBE82; }
.play .lead-orbit { animation: spin 16s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.lead-ok { position: absolute; right: -6%; top: -6%; width: 34%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; color: var(--amber-ink); background: #fff; box-shadow: 0 0 0 1.5px var(--amber); transform: scale(0); }
.lead-ok svg { width: 72%; height: 72%; }
.tk-lead.ok .lead-ok { animation: ok-pop 1.3s var(--spring); }
@keyframes ok-pop { 0% { transform: scale(0); } 18%, 82% { transform: scale(1); } 100% { transform: scale(0); } }
/* Who holds the seat: a person, or a fleet. */
.seat { position: absolute; right: -8%; top: -8%; width: 32%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; box-shadow: 0 0 0 2px var(--paper); }
.seat svg { width: 68%; height: 68%; }
.face.h .seat { color: #fff; background: var(--c); }
.face.v .seat { color: var(--c); background: #fff; }
.g-spin { transform-origin: 50% 55%; }
.play .tk.virt .g-spin { animation: spin 7s linear infinite; }
/* The role icons: one 24-unit box, one stroke weight. Each moving part is an HTML-level element, so Safari composites it. Only the visible face runs, slower for a person than for a fleet. With no animation, every icon is complete. */
.glyph { position: absolute; left: 23%; top: 23%; width: 54%; aspect-ratio: 1; }
.glyph svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.play :is(.tk:not(.virt) .face.h, .tk.virt .face.v) .ga { animation-duration: var(--t, 2.6s); animation-delay: calc(var(--pd, 0s) + var(--ad, 0s)); animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
.g-br-l { animation-name: g-br-l; }
.g-br-r { animation-name: g-br-r; }
@keyframes g-br-l { 50% { transform: translateX(-7%); } }
@keyframes g-br-r { 50% { transform: translateX(7%); } }
.g-node { position: absolute; left: 68.75%; top: 18.75%; width: 12.5%; aspect-ratio: 1; border-radius: 50%; background: currentColor; animation-name: g-node; }
@keyframes g-node { 0%, 100% { transform: scale(.35); } 50% { transform: scale(1); } }
.g-cur { animation-name: g-cur; }
@keyframes g-cur { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.g-tick { transform-origin: 38% 46%; animation-name: g-tick; }
.g-tick.g-t2 { --ad: -.5s; transform-origin: 38% 69%; }
@keyframes g-tick { 0%, 10% { transform: scale(0); } 26%, 90% { transform: scale(1); } 100% { transform: scale(0); } }
.g-arrow { animation-name: g-arrow; }
@keyframes g-arrow { 0% { transform: translateY(12%); opacity: 0; } 25%, 70% { opacity: 1; } 100% { transform: translateY(-10%); opacity: 0; } }
.g-voice { position: absolute; left: 38%; top: 40%; width: 24%; height: 28%; display: flex; align-items: center; justify-content: space-between; }
.g-voice i { width: 19%; height: 100%; border-radius: 99px; background: currentColor; transform: scaleY(.55); animation-name: g-voice; }
.g-voice i:nth-child(2) { --ad: -.6s; transform: none; } .g-voice i:nth-child(3) { --ad: -1.1s; transform: scaleY(.75); }
@keyframes g-voice { 0%, 100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }
.g-line { position: absolute; left: 39.5%; width: 21%; top: 29%; height: 6.2%; border-radius: 99px; background: currentColor; transform-origin: 0 50%; animation-name: g-line; }
.g-line.l2 { --ad: -.5s; top: 44%; width: 14%; }
@keyframes g-line { 0% { transform: scaleX(0); } 55%, 100% { transform: scaleX(1); } }
.g-bars { position: absolute; left: 31%; width: 52%; top: 25%; bottom: 25%; display: flex; align-items: flex-end; gap: 13%; }
.g-bars i { flex: 1; height: 100%; border-radius: 1.5px 1.5px 0 0; background: currentColor; transform-origin: 50% 100%; transform: scaleY(.55); animation-name: g-bar; }
.g-bars i:nth-child(2) { --ad: -.6s; transform: scaleY(.8); } .g-bars i:nth-child(3) { --ad: -1.2s; transform: none; }
@keyframes g-bar { 0%, 100% { transform: scaleY(.55); } 50% { transform: scaleY(1); } }
/* One ring when a seat turns virtual. */
.burst { position: absolute; inset: 0; border-radius: 28%; box-shadow: 0 0 0 2px var(--c); opacity: 0; }
.tk.virt .burst { animation: burst .7s var(--ease) calc(var(--fd, 0s) + .3s) both; }
@keyframes burst { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.28); opacity: 0; } }
/* One status chip that moves between the tiles. JS writes its place once per tick, only while the stage is on screen. */
/* One status line in a fixed slot above the top row, so it never hides a label. The margin percentage is of the stage width. */
.up-chip { position: absolute; left: 50%; top: 0; translate: -50% -100%; margin-top: calc((100% - var(--tile)) / 6 - var(--tile) * .027 - 3px); z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 99px; background: #fff; box-shadow: 0 0 0 1px var(--line2), 0 3px 0 rgb(20 20 31 / .08); font: 500 .7rem/1 var(--mono); color: var(--ink); white-space: nowrap; opacity: 0; pointer-events: none; }
.up-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--amber)); }
.up-chip.show { animation: chip 2.4s var(--ease) both; }
@keyframes chip { 0% { opacity: 0; transform: translateY(6px) scale(.86); } 10%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-4px); } }
/* The mix: the violet part grows from the right. */
.mix { display: block; width: 86%; height: 6px; margin: 16px auto 0; overflow: hidden; border-radius: 6px; background: var(--amber); }
.mix-v { display: block; height: 100%; background: var(--violet); transform-origin: 100% 50%; transform: scaleX(0); transition: transform .7s var(--spring); }
.s1 .mix-v { transform: scaleX(.333); }
.s2 .mix-v { transform: scaleX(.889); }
.up-count { display: flex; justify-content: center; gap: 22px; margin-top: 12px; font-size: .96rem; color: var(--ink2); }
.up-count span { display: inline-flex; align-items: center; gap: 8px; }
.up-count i { width: 11px; height: 11px; border-radius: 3px; }
.up-count b { display: inline-block; font: 700 1.25rem/1 var(--display); min-width: 1.1em; }
.up-count b.pop { animation: tick .5s var(--ease); }
.c-h i { background: var(--amber-bg); box-shadow: inset 0 0 0 1.5px var(--amber); } .c-v i { background: var(--violet); }
@media (hover: hover) and (pointer: fine) {
  .tk:hover .tk-in { transform: translateY(-3px); }
}
.up-head { margin-bottom: clamp(20px, 5vw, 60px); }
.up-head h2 { max-width: 15ch; }
.up-head h2 em { white-space: nowrap; }
.up-head .lede { margin-top: 18px; }
.up-step { display: flex; flex-direction: column; justify-content: center; min-height: 58svh; padding: 20px 0; }
.js .up-step { opacity: .34; transition: opacity .45s var(--ease); }
.js .up-step.on { opacity: 1; }
.up-n { font: 500 .78rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--amber-ink); margin-bottom: 12px; }
.up-step h3 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.12; }
.up-step p { margin-top: 12px; color: var(--ink2); max-width: 46ch; }
.up-step:last-child { min-height: 46svh; }
@media (max-width: 859px) {
  .up-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .up-copy { display: contents; }
  .up-head { order: 1; margin-bottom: 26px; }
  .up-stage-wrap { order: 2; top: 68px; z-index: 5; background: var(--paper); padding: 12px 0 10px; }
  .up-step { order: 3; min-height: 50svh; }
  .up-stage { --tile: 64%; max-width: min(84vw, 38svh); }
  
  .tk small { top: calc(50% + var(--tile) / 2 + 3px); font-size: .62rem; }
  .tk.tk-lead small { top: calc(50% + var(--tile) * .59 + 2px); }
  .up-chip { padding: 4px 7px; gap: 5px; font-size: .62rem; }
  .rail b::after { left: -3px; top: -3px; width: 6px; height: 6px; }
  .mix { height: 5px; margin-top: 8px; }
  .up-count { margin-top: 6px; font-size: .86rem; }
}
@media (max-width: 859px) and (max-height: 480px) {
  .tk small, .up-chip { display: none; }
}

/* ═══ TEAM BUILDER ═══ */
.team { position: relative; padding-top: clamp(48px, 5.4vw, 72px); background: var(--paper2); background-image: radial-gradient(rgb(20 20 31 / .055) 1px, transparent 1.2px); background-size: 22px 22px; }
.team .sec-head { margin-bottom: 20px; }
.team .eyebrow { margin-bottom: 10px; }
.team h2 { max-width: none; font-size: clamp(1.95rem, 3.5vw, 3.1rem); }
.team .sec-head .lede { margin-top: 10px; font-size: 1.04rem; }
.presets { scroll-margin-top: 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: var(--wide); margin: 0 auto 18px; }
.pre { display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 44px; padding: 0 14px; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line2); font-size: .92rem; font-weight: 550; white-space: nowrap; transition: transform .18s var(--ease), background-color .2s, color .2s; }
.pre small { font: 500 .72rem/1 var(--mono); color: var(--mut); transition: color .2s; }
.pre[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.pre[aria-pressed="true"] small { color: #C8C9D6; }
.pre:active { transform: scale(.96); }
.builder { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; max-width: var(--wide); margin: 0 auto; align-items: start; }
@media (min-width: 1040px) { .builder { grid-template-columns: minmax(0, 1fr) 410px; gap: 36px; } }

/* the menu */
.menu { background: var(--card); border-radius: 24px; padding: clamp(14px, 2.6vw, 30px); box-shadow: var(--sheet); }
.menu-group + .menu-group { margin-top: 26px; }
.menu-group h3 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; font-size: 1.3rem; padding: 0 8px 9px; border-bottom: 2px solid var(--ink); }
.menu-group h3 small { font: 400 .78rem/1.2 var(--body); letter-spacing: 0; color: var(--mut); }
.mi { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; column-gap: 13px; row-gap: 2px; align-items: start; padding: 13px 8px; border-bottom: 1px solid var(--line); border-radius: 10px; transition: background-color .25s; }
.mi:last-child { border-bottom: 0; }
.mi.has { background: #F6F4FF; }
.mi-i { grid-row: 1 / span 2; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; }
.mi-i svg { width: 22px; height: 22px; }
.mi-t { display: contents; }
.mi-n { grid-column: 2; display: flex; align-items: baseline; gap: 7px; font-size: 1rem; line-height: 1.25; }
.mi-n b { font-weight: 620; }
.mi-n i { flex: 1 1 12px; min-width: 12px; border-bottom: 1.5px dotted var(--line2); translate: 0 -3px; }
.mi-p { font: 500 .92rem/1.2 var(--mono); white-space: nowrap; }
.mi-p s { color: var(--mut); font-weight: 400; margin-right: 5px; font-size: .84em; }
.mi-p.deal b { color: var(--violet-ink); font-weight: 500; }
.mi-d { grid-column: 2; font-size: .86rem; line-height: 1.4; color: var(--mut); }
.burn { display: inline-flex; align-items: center; gap: 5px; font: 500 .68rem/1 var(--mono); color: var(--mut); white-space: nowrap; margin-left: 4px; }
.burn i { width: 7px; height: 7px; border-radius: 50%; background: var(--line2); }
.burn.light i { background: var(--teal); } .burn.standard i { background: var(--amber); } .burn.heavy i { background: var(--rose); }
.mi-more { padding: 12px 8px 0; font-size: .88rem; color: var(--mut); }
.mi-more a { color: var(--violet-ink); }
.stp { grid-column: 3; grid-row: 1 / span 2; align-self: center; display: flex; align-items: center; gap: 2px; margin-left: 4px; }
.stp-b { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; flex: none; transition: transform .16s var(--ease), background-color .15s, opacity .15s; }
.stp-b svg { width: 16px; height: 16px; }
.stp-b.p { background: var(--violet); color: #fff; }
.stp-b.m { background: var(--paper2); color: var(--ink); }
.stp-b:active { transform: scale(.88); }
.stp-b[disabled] { opacity: .3; cursor: default; }
.stp-n { min-width: 26px; text-align: center; font: 700 1.12rem/1 var(--display); }
.mi:not(.has) .stp-b.m, .mi:not(.has) .stp-n { visibility: hidden; }
@keyframes tick { 40% { transform: scale(1.32); } }
.stp-n.tick { animation: tick .26s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .pre:hover { transform: translateY(-2px); }
  .stp-b.p:hover { background: var(--violet-ink); }
  .mi:hover { background: #FAF9F4; } .mi.has:hover { background: #F1EEFF; }
}
@media (max-width: 620px) {
  .mi { grid-template-columns: 38px minmax(0, 1fr) auto; column-gap: 11px; row-gap: 6px; padding: 12px 4px; }
  .mi-i { width: 38px; height: 38px; grid-row: 1 / span 2; }
  .mi-n { grid-column: 2 / 4; }
  .mi-d { grid-column: 2; font-size: .82rem; }
  .stp { grid-column: 3; grid-row: 2; align-self: end; margin-left: 0; }
  .stp-n { min-width: 24px; }
  .burn { display: flex; margin: 4px 0 0; }
}

/* the ticket */
.ticket { position: relative; }
@media (min-width: 1040px) { .ticket { position: sticky; top: 84px; } }
.tt { display: flex; flex-direction: column; background: var(--card); border-radius: 22px; box-shadow: var(--sheet); }
.tt-scroll { padding: 22px 22px 8px; }
.tt-foot { padding: 14px 22px 18px; background: #FDFCF8; border-top: 1.5px dashed var(--line2); border-radius: 0 0 22px 22px; }
@media (min-width: 1040px) {
  .tt { max-height: calc(100svh - 158px); }
  .tt-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
  .tt-foot { flex: none; }
}
.tt-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.tt-h h3 { font-size: 1.32rem; }
.tt-c { font: 500 .8rem/1 var(--mono); color: var(--mut); }

/* how they connect */
.flow { position: relative; padding: 12px; border-radius: 16px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.flow-lead { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; width: max-content; max-width: 100%; margin: 0 auto 22px; padding: 6px 12px 6px 6px; background: var(--ink); color: #fff; border-radius: 999px; font-size: .78rem; line-height: 1.15; }
.flow-lead b { font-weight: 600; }
.flow-lead::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1.5px; height: 12px; background: var(--amber); }
.fl-av { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--amber); }
.fl-av svg { width: 15px; height: 15px; }
.flow-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr) 16px minmax(0, 1fr); align-items: stretch; }
.flow-row::before { content: ""; position: absolute; left: 16.6%; right: 16.6%; top: -10px; height: 1.5px; background: var(--amber); }
.fs { position: relative; padding: 7px 5px 8px; min-height: 66px; border-radius: 11px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); text-align: center; transition: box-shadow .25s; }
.fs::before { content: ""; position: absolute; left: 50%; top: -10px; width: 1.5px; height: 10px; background: var(--amber); }
.fs small { display: block; font: 500 .66rem/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--mut); margin-bottom: 6px; }
.fs-build.on { box-shadow: inset 0 0 0 1.5px var(--violet); } .fs-assure.on { box-shadow: inset 0 0 0 1.5px var(--teal); } .fs-run.on { box-shadow: inset 0 0 0 1.5px var(--sky); }
.fs-t { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; }
.fk { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; color: var(--tone); background: var(--tone-bg); }
.fk svg { width: 13px; height: 13px; }
.fk.in { animation: pop .36s var(--spring); }
@keyframes pop { from { transform: scale(.2); opacity: 0; } }
.fa { align-self: center; justify-self: center; display: block; width: 0; height: 0; border-block: 4px solid transparent; border-left: 6px solid var(--line2); transition: opacity .2s; opacity: .55; }
.fa.on { border-left-color: var(--ink); opacity: 1; }
.flow-loop { margin-top: 9px; font-size: .77rem; line-height: 1.35; color: var(--mut); text-align: center; min-height: 2.7em; }

/* lines */
.lines { margin-top: 14px; }
.ln, .lead-ln { display: flex; align-items: baseline; gap: 7px; padding: 5px 0; font-size: .92rem; line-height: 1.3; }
.ln span, .lead-ln > span { min-width: 0; }
.ln i, .lead-ln > i { flex: 1 1 10px; min-width: 10px; border-bottom: 1.5px dotted var(--line2); translate: 0 -3px; }
.ln b, .lead-ln > b { font: 500 .88rem/1.2 var(--mono); white-space: nowrap; }
.ln.in { animation: print .32s var(--ease); }
@keyframes print { from { opacity: 0; transform: translateY(-8px); } }
.ln.empty { color: var(--mut); }
.lead-ln { padding: 7px 10px; margin: 6px -10px 0; background: var(--amber-bg); border-radius: 10px; }
.lead-ln svg { width: 13px; height: 13px; flex: none; color: var(--amber-ink); align-self: center; }
.lead-ln > b { color: var(--amber-ink); }
.team-ln { margin-top: 8px; font-size: .84rem; line-height: 1.35; color: var(--violet-ink); }
.team-ln[hidden], .lead-ln[hidden] { display: none; }

/* capacity + models + pilot: they scroll with the team on a laptop, so the price and the buttons stay on screen */
.tt-opts { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.tt-opts .sw-row { margin-bottom: 8px; }
.tt-sum { display: none; }
@media (min-width: 1040px) and (max-height: 1220px) {
  .tt-sum { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 30px; margin: -5px 0 7px; padding: 0; border: 0; background: none; font: inherit; font-size: .76rem; line-height: 1.25; text-align: left; color: var(--mut); cursor: pointer; }
  .tt-sum b { display: inline-flex; align-items: center; gap: 4px; flex: none; font-weight: 620; color: var(--violet-ink); }
  .tt-sum svg { width: 12px; height: 12px; rotate: 90deg; }
  .tt-sum:focus-visible { outline: 2.5px solid var(--violet); outline-offset: 2px; border-radius: 6px; }
}
.cap + .cap { margin-top: 10px; }
.cap-note { margin-top: 6px; font-size: .74rem; line-height: 1.3; color: var(--ink2); }
.cap-note[hidden] { display: none; }
.cap { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cap legend { font: 500 .72rem/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--mut); margin-bottom: 7px; padding: 0; }
.cap label { position: relative; cursor: pointer; }
.cap input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cap label > span { display: block; height: 100%; padding: 7px 10px; border-radius: 11px; box-shadow: inset 0 0 0 1.5px var(--line2); transition: box-shadow .15s, background-color .15s; }
.cap b { display: block; font-size: .9rem; font-weight: 620; line-height: 1.2; }
.cap small { display: block; font-size: .72rem; line-height: 1.25; color: var(--mut); margin-top: 2px; }
.cap input:checked + span { box-shadow: inset 0 0 0 2px var(--violet); background: #F6F4FF; }
.cap input:focus-visible + span { outline: 2.5px solid var(--violet); outline-offset: 2px; }
.sw-row { position: relative; display: flex; align-items: center; gap: 11px; min-height: 44px; margin: 6px 0 0; cursor: pointer; }
.sw-row input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.sw { position: relative; flex: none; width: 44px; height: 26px; border-radius: 999px; background: var(--line2); transition: background-color .2s; }
.sw::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 0 rgb(0 0 0 / .22); transition: transform .24s var(--spring); }
.sw-row input:checked + .sw { background: var(--amber); }
.sw-row input:checked + .sw::after { transform: translateX(18px); }
.sw-row input:focus-visible + .sw { outline: 2.5px solid var(--violet); outline-offset: 2px; }
.sw-row b { display: block; font-size: .9rem; font-weight: 620; line-height: 1.2; }
.sw-row small { display: block; font-size: .74rem; line-height: 1.25; color: var(--mut); }

/* total */
.tot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 14px; }
.tot-l { font: 500 .72rem/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--mut); }
.tot-v { display: flex; font: 750 clamp(2.5rem, 5vw, 3.05rem)/1.08 var(--display); letter-spacing: -.03em; margin-top: 3px; font-variant-numeric: tabular-nums lining-nums; }
.o-c { display: inline-block; }
.o-d { display: inline-block; height: 1.08em; overflow: hidden; overflow: clip; width: .62em; text-align: center; }
.o-r { display: block; transition: transform .6s cubic-bezier(.2, .9, .25, 1); will-change: transform; }
.still .o-r { transition: none; }
.o-r > span { display: block; height: 1.08em; }
.tot-s { display: grid; gap: 3px; text-align: right; }
.tot-s > div { font-size: .74rem; line-height: 1.25; }
.tot-s > div[hidden] { display: none; }
.tot-s dt { color: var(--mut); }
.tot-s dd { font: 500 .8rem/1.25 var(--mono); white-space: nowrap; }
.tot-h { margin-top: 5px; font-size: .78rem; line-height: 1.35; color: var(--mut); }
.tt-cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.tt-cta .btn { min-height: 48px; padding: 0 14px; font-size: .96rem; }
.tt-cta .btn-go { flex: 1 1 auto; }
#r-pilot dd { color: var(--amber-ink); }
.tip { margin: 9px 0 6px; padding: 8px 11px; font-size: .82rem; line-height: 1.35; border-radius: 10px; color: var(--violet-ink); background: var(--violet-bg); }
.tip:empty { display: none; }
.fine { margin-top: 10px; font-size: .72rem; line-height: 1.35; color: var(--mut); text-align: center; }
.fly { position: fixed; left: 0; top: 0; z-index: 60; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--violet); color: #fff; pointer-events: none; will-change: transform, opacity; }
.fly svg { width: 18px; height: 18px; }

/* phone: the ticket total stays in reach */
.t-bar { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; padding: 8px 14px 8px 16px; color: #fff; background: var(--ink); border-radius: 16px; text-decoration: none; box-shadow: 0 0 0 1px rgb(255 255 255 / .14); transform: translateY(170%); transition: transform .34s var(--ease); }
.t-bar.show { transform: none; }
.t-bar b { display: block; font: 700 1rem/1.15 var(--display); }
.t-bar small { display: block; font-size: .72rem; line-height: 1.2; color: #C8C9D6; }
.t-bar-v { margin-left: auto; text-align: right; }
.t-bar-v b { font-size: 1.22rem; }
.t-bar svg { width: 18px; height: 18px; flex: none; rotate: 90deg; }
@media (min-width: 1040px) { .t-bar { display: none; } }

/* ═══ WHAT'S INSIDE ═══ */
.in-grid { max-width: var(--wide); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.in-copy { display: contents; }
.in-head { order: 1; margin: 0; }
.iso-wrap { order: 2; }
.layers { order: 3; }
.iso-wrap { position: relative; height: 430px; overflow: hidden; overflow: clip; }
/* Each plate is drawn flat and lifted on the screen, so the stack needs no shared 3D space. Safari paints that faster. */
.iso { --gap: 36px; --lie: rotateX(58deg) rotateZ(-40deg) scale(.86); position: absolute; left: 50%; top: 71%; width: 250px; height: 160px; margin: -80px 0 0 -125px; }
.plate { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 10px; padding: 0 18px 13px; border-radius: 20px; background: var(--card); font: 650 1.05rem/1 var(--display); box-shadow: inset 0 0 0 2px var(--c, var(--line2)), -7px 7px 0 0 var(--c2, #D8D5EE); z-index: var(--n); transform: translateY(calc(var(--n) * var(--gap) * -1)) var(--lie); transition: background-color .25s; }
/* Scroll drives the stack. Each plate has its own speed, so the layers part as the stack rises through the screen. The top plates move ahead of the page and the bottom ones lag. --d stays a literal, because the fallback in site.js parses it. */
.pl-0 { --d: -55px; } .pl-1 { --d: -33px; } .pl-2 { --d: -11px; } .pl-3 { --d: 11px; } .pl-4 { --d: 33px; } .pl-5 { --d: 55px; }
.plate svg { width: 36px; height: 36px; flex: none; }
.plate span i { font-style: normal; color: #B8700C; }
.pl-0 { --n: 5; --c: #8B7CFF; --c2: #D9D3FF; } .pl-1 { --n: 4; --c: #0AA6BD; --c2: #BCE7ED; } .pl-2 { --n: 3; --c: #0F9E86; --c2: #BEE7DF; }
.pl-3 { --n: 2; --c: #B0763A; --c2: #EBD8C2; } .pl-4 { --n: 1; --c: #2563EB; --c2: #C7D8FA; } .pl-5 { --n: 0; --c: #A98307; --c2: #EADFB5; }
.plate.hi { background: #F6F4FF; }
.layers { display: grid; gap: 6px; }
.layers a { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 14px; border-radius: 16px; text-decoration: none; transition: background-color .2s; }
.lg { width: 38px; height: 38px; margin-top: 2px; }
.ly-k { font: 500 .7rem/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--mut); margin-bottom: 5px; }
.layers h3 { font-size: 1.14rem; }
.layers h3 span { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.1em; color: var(--violet-ink); letter-spacing: 0; margin-left: 2px; }
.layers a p:last-child { font-size: .92rem; line-height: 1.42; color: var(--ink2); margin-top: 3px; text-wrap: pretty; }
.st { font: 500 .64rem/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; padding: 5px 7px; border-radius: 6px; white-space: nowrap; margin-top: 2px; }
.st-p { color: var(--teal-ink); background: var(--teal-bg); }
.st-b { color: var(--violet-ink); background: var(--violet-bg); }
@media (hover: hover) and (pointer: fine) { .layers a:hover { background: var(--card); } }
@media (min-width: 1040px) {
  .in-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 56px; align-items: start; }
  .in-copy { display: block; }
  .in-head { margin-bottom: 26px; }
  .iso-wrap { height: 640px; position: sticky; top: max(76px, calc(50svh - 320px)); }
  .iso { --gap: 60px; --lie: rotateX(58deg) rotateZ(-40deg) scale(1.22); top: 73%; }
  .pl-0 { --d: -75px; } .pl-1 { --d: -45px; } .pl-2 { --d: -15px; } .pl-3 { --d: 15px; } .pl-4 { --d: 45px; } .pl-5 { --d: 75px; }
}
@supports (animation-timeline: view()) {
  @media (min-width: 1040px) {
    /* The wrap is sticky here, and a stuck element does not move through the view. So the grid, which scrolls, drives the plates. */
    .in-grid { view-timeline: --inside block; }
    html:not(.plx-js) .plate.plx { animation-timeline: --inside; animation-range: cover 20% cover 80%; }
  }
}
@media (max-width: 560px) { .layers a { grid-template-columns: 34px minmax(0, 1fr); gap: 11px; padding: 12px 6px; position: relative; } .lg { width: 32px; height: 32px; } .st { position: absolute; right: 6px; top: 11px; margin: 0; } }

/* ═══ SECURITY ═══ */
.safe { background: var(--card); border-block: 1px solid var(--line); }
.modes { max-width: var(--wide); margin: 0 auto; display: grid; gap: 18px; }
@media (min-width: 860px) { .modes { grid-template-columns: 1fr 1fr; } }
.mode { display: flex; flex-direction: column; padding: clamp(20px, 2.6vw, 30px); border-radius: 22px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.mode-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.mode-h h3 { font-size: 1.45rem; }
.mode > p { margin-top: 10px; color: var(--ink2); text-wrap: pretty; }
.cham, .camo { position: relative; margin-top: auto; }
.cham { display: grid; grid-template-columns: auto minmax(40px, 1fr) auto; align-items: center; padding: 18px 16px 36px; margin-top: 18px; border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.ch-src b { display: block; font: 500 .84rem/1.2 var(--mono); }
.ch-src small { font-size: .72rem; color: var(--mut); }
.ch-p { width: 100%; height: 70px; }
.ch-p path { fill: none; stroke-width: 2.4; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.ch-p .a { stroke: var(--line2); stroke-dasharray: 3 6; }
.ch-p .b { stroke: var(--teal); }
.ch-d { display: grid; gap: 22px; }
.ch-f, .ch-l { font-size: .82rem; font-weight: 600; padding: 8px 11px; border-radius: 10px; white-space: nowrap; text-align: center; }
.ch-f { color: var(--mut); background: var(--paper2); }
.ch-l { color: var(--teal-ink); background: var(--teal-bg); }
.chart-tag.tag, .cham .tag, .camo > .tag { position: absolute; }
.cham .tag, .camo > .tag { right: 10px; bottom: 10px; }
.camo { margin-top: 18px; padding: 16px 16px 44px; border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); font-size: .98rem; line-height: 1.7; }
.sw-t { display: inline-grid; vertical-align: baseline; }
.sw-t b { grid-area: 1 / 1; font-weight: 600; padding: 0 5px; border-radius: 6px; white-space: nowrap; transition: opacity .55s var(--ease), transform .55s var(--ease); }
.sw-t .r { color: var(--amber-ink); background: var(--amber-bg); }
.sw-t .f { color: var(--violet-ink); background: var(--violet-bg); opacity: 0; transform: translateY(7px); }
.camo.swap .r { opacity: 0; transform: translateY(-7px); }
.camo.swap .f { opacity: 1; transform: none; }
.sw-t:nth-of-type(2) b { transition-delay: .08s; } .sw-t:nth-of-type(3) b { transition-delay: .16s; }
.camo-k { position: absolute; left: 14px; bottom: 12px; display: grid; grid-template-columns: auto auto; align-items: center; justify-content: start; font: 500 .72rem/1 var(--mono); column-gap: 7px; }
.camo-k > i { width: 9px; height: 9px; border-radius: 50%; background: var(--amber); transition: background-color .4s; }
.camo.swap .camo-k > i { background: var(--violet); }
.k-r, .k-f { grid-area: 1 / 2; color: var(--ink2); transition: opacity .4s; white-space: nowrap; }
.k-f { opacity: 0; }
.camo.swap .k-f { opacity: 1; } .camo.swap .k-r { opacity: 0; }
/* The one security promise that holds today. It sits between the planned modes and the beta list. */
.notrain { max-width: var(--wide); margin: 18px auto 0; display: grid; gap: 12px 30px; padding: clamp(20px, 2.6vw, 30px); border-radius: 22px; background: var(--violet-bg); box-shadow: inset 0 0 0 1.5px rgb(91 79 233 / .3); }
@media (min-width: 860px) { .notrain { grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); align-items: start; } }
.nt-h { display: flex; gap: 13px; align-items: flex-start; }
.nt-h svg { width: 34px; height: 34px; flex: none; color: var(--violet-ink); }
.notrain h3 { font-size: clamp(1.3rem, 2.1vw, 1.62rem); line-height: 1.16; text-wrap: balance; }
.notrain h3 em { display: block; color: var(--violet-ink); }
.nt-b p { color: var(--ink); text-wrap: pretty; }
.nt-b .nt-s { margin-top: 10px; font-size: .84rem; line-height: 1.42; color: var(--ink2); }
.guards { max-width: var(--wide); margin: 30px auto 0; padding-top: 6px; }
.guards h3 { font-size: 1.14rem; margin-bottom: 12px; }
.guards ul { display: grid; gap: 8px 22px; }
@media (min-width: 720px) { .guards ul { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .guards ul { grid-template-columns: 1fr 1fr 1fr; } }
.guards li { display: flex; gap: 9px; font-size: .94rem; line-height: 1.4; }
.guards li svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--teal-ink); }
.guards-f { margin-top: 18px; color: var(--ink2); max-width: 74ch; }
.guards-f a { color: var(--violet-ink); }

/* ═══ CASES ═══ */
.case-grid { max-width: var(--wide); margin: 0 auto; display: grid; gap: 16px; }
@media (min-width: 720px) { .case-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1320px) { .case-grid { grid-template-columns: repeat(4, 1fr); } }
.case { display: flex; flex-direction: column; padding: clamp(22px, 2.4vw, 30px); border-radius: 22px; background: var(--card); box-shadow: var(--sheet); }
.case-k { font: 500 .74rem/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--amber-ink); }
.case h3 { font-size: 1.42rem; margin-top: 10px; }
.case-v { font: 750 2.5rem/1 var(--display); letter-spacing: -.03em; margin-top: 16px; }
.case-v small { font: 400 .86rem/1 var(--body); letter-spacing: 0; color: var(--mut); margin-left: 6px; }
.case ul { margin: 16px 0 18px; display: grid; gap: 9px; }
.case li { position: relative; padding-left: 15px; font-size: .94rem; line-height: 1.42; color: var(--ink2); text-wrap: pretty; }
.case li::before { content: ""; position: absolute; left: 0; top: .58em; width: 6px; height: 6px; border-radius: 50%; background: var(--violet); }
.case-l { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; margin-top: auto; font-weight: 600; font-size: .94rem; color: var(--violet-ink); text-decoration: none; }
.case-l svg { width: 15px; height: 15px; }
.case-src { max-width: var(--wide); margin: 18px auto 0; font-size: .78rem; line-height: 1.45; color: var(--mut); }
.case-src a { color: inherit; }

/* ═══ DEAL ═══ */
.sec.deal { background: var(--paper2); }
.deal-grid { max-width: var(--wide); margin: 0 auto; display: grid; gap: 26px 40px; }
@media (min-width: 720px) { .deal-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .deal-grid { grid-template-columns: repeat(3, 1fr); } }
.deal-grid article { padding-top: 14px; border-top: 2px solid var(--ink); }
.deal-grid h3 { font-size: 1.2rem; }
.deal-grid p { margin-top: 8px; font-size: .96rem; line-height: 1.5; color: var(--ink2); text-wrap: pretty; }

/* ═══ FINALE ═══ */
.finale { position: relative; overflow: hidden; overflow: clip; padding: clamp(90px, 13vw, 170px) var(--pad); text-align: center; }
.finale > *:not(.sky) { position: relative; z-index: 1; }
.fin-m { width: 76px; height: 76px; margin: 0 auto 22px; }
.finale h2 { font-size: clamp(2.6rem, 7vw, 6rem); }
.finale .lede { margin: 18px auto 0; }
.finale .cta-row { justify-content: center; }
.finale .orb-a { left: 16%; top: -10%; } .finale .orb-b { left: 64%; top: 56%; }

/* ═══ FOOTER ═══ */
.foot { padding: 48px var(--pad) 36px; background: var(--ink); color: #D5D6E0; font-size: .92rem; }
.foot a { color: #fff; text-decoration: none; }
.foot-in { max-width: var(--wide); margin: 0 auto; display: grid; gap: 28px; }
@media (min-width: 860px) { .foot-in { grid-template-columns: 1.6fr 1fr 1fr; } }
.foot-b .brand-w { color: #fff; }
.foot-b p { margin-top: 12px; max-width: 42ch; }
.foot-c p + p { margin-top: 6px; }
.d1 { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; padding: 8px 12px; background: #fff; border-radius: 10px; color: var(--mut) !important; font-size: .78rem; }
.d1 img { height: 20px; width: auto; }
.foot-f { max-width: var(--wide); margin: 30px auto 0; padding-top: 18px; border-top: 1px solid #33344A; font-size: .78rem; line-height: 1.45; color: #A9ABBD; }
@media (hover: hover) and (pointer: fine) { .foot a:hover { text-decoration: underline; } .d1:hover { text-decoration: none !important; } }

/* phones keep the bottom bar clear of the footer text */
@media (max-width: 1039px) { body.has-bar .foot { padding-bottom: 96px; } }

/* ═══ small error page ═══ */
.oops { min-height: 100svh; display: grid; place-content: center; justify-items: center; gap: 18px; padding: 40px var(--pad); text-align: center; }
.oops .brand-m { width: 56px; height: 56px; }

/* ═══ agile, not change requests ═══ */
.agile { padding-top: clamp(64px, 8vw, 112px); padding-bottom: clamp(56px, 7vw, 96px); }
.agile .sec-head h2 { max-width: 22ch; }
.agile .sec-head .lede { max-width: 66ch; }
.lanes { max-width: var(--wide); margin: 0 auto; padding: clamp(18px, 2.6vw, 32px); border-radius: 22px; background: var(--card); box-shadow: var(--sheet); display: grid; gap: clamp(14px, 2vw, 20px); }
.lane { display: grid; gap: 10px; }
.lane-s > span { display: none; }
@media (min-width: 820px) {
  .lane { grid-template-columns: 240px 1fr; gap: 28px; align-items: center; }
  .lane-s > span { display: block; }
}
.l-name b { display: block; font: 650 1.04rem/1.2 var(--display); }
.l-name small { display: block; margin-top: 3px; font-size: .84rem; line-height: 1.35; color: var(--mut); }
.track { position: relative; height: 118px; background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 16.6667%); box-shadow: inset 0 -1px 0 var(--line); }
.lane-vs .track { height: 78px; }
.lane-fx .track { color: var(--rose); }
.lane-vs .track { color: var(--violet); }
.n1 { --n: 1; } .n2 { --n: 2; } .n3 { --n: 3; } .n4 { --n: 4; } .n5 { --n: 5; } .n6 { --n: 6; }
.y0 { --y: 0; } .y1 { --y: 1; } .y2 { --y: 2; } .y3 { --y: 3; }
.seg, .rise { position: absolute; display: block; background: currentColor; border-radius: 2px; }
.seg { left: calc((var(--n) - 1) * 100% / 6); width: calc(100% / 6 + 2px); bottom: calc(10px + var(--y) * 24px); height: 4px; transform-origin: 0 50%; transition: transform .3s linear calc(var(--n) * .24s); }
.rise { left: calc(var(--n) * 100% / 6 - 1px); width: 4px; height: 28px; bottom: calc(10px + var(--y) * 24px); transform-origin: 50% 100%; transition: transform .14s linear calc(var(--n) * .24s + .3s); }
.cr { position: absolute; display: grid; place-items: center; left: calc(var(--n) * 100% / 6 + 1px); bottom: calc(22px + var(--y) * 24px); width: 30px; height: 22px; margin-left: -15px; border-radius: 7px; background: var(--rose-bg); color: var(--rose-ink); font: 500 .68rem/1 var(--mono); font-style: normal; box-shadow: inset 0 0 0 1px rgb(220 63 103 / .3); transition: transform .34s var(--ease) calc(var(--n) * .24s + .36s), opacity .2s linear calc(var(--n) * .24s + .36s); }
.tiks { position: absolute; inset: 0 0 20px 0; display: grid; grid-template-columns: repeat(6, 1fr); align-items: end; }
.tik-c { display: grid; justify-items: center; gap: 4px; }
.tik { display: block; width: min(64%, 62px); height: 11px; border-radius: 4px; background: var(--violet-bg); box-shadow: inset 0 0 0 1px rgb(91 79 233 / .22); transition: transform .3s var(--ease) calc(var(--n) * .24s), opacity .2s linear calc(var(--n) * .24s); }
.tik.ch { background: var(--teal-bg); box-shadow: inset 0 0 0 1px rgb(11 165 143 / .55); }
.js .lanes.rv:not(.in) .seg { transform: scaleX(0); }
.js .lanes.rv:not(.in) .rise { transform: scaleY(0); }
.js .lanes.rv:not(.in) .cr, .js .lanes.rv:not(.in) .tik { transform: scale(.5); opacity: 0; }
.sprints { display: grid; grid-template-columns: repeat(6, 1fr); font: 500 .7rem/1 var(--mono); color: var(--mut); text-align: center; }
.sprints span { display: none; }
@media (min-width: 620px) { .sprints span { display: inline; } }
.lanes-key { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: .8rem; color: var(--mut); }
.lanes-key > span { display: inline-flex; align-items: center; gap: 7px; }
.lanes-key .tag { margin-left: auto; }
.k-cr { display: grid; place-items: center; width: 26px; height: 18px; border-radius: 6px; background: var(--rose-bg); color: var(--rose-ink); font: 500 .62rem/1 var(--mono); font-style: normal; }
.k-t { display: block; width: 22px; height: 11px; border-radius: 4px; background: var(--teal-bg); box-shadow: inset 0 0 0 1px rgb(11 165 143 / .55); }
.stand-h { max-width: var(--wide); margin: clamp(30px, 4vw, 48px) auto 14px; font-size: clamp(1.2rem, 2vw, 1.5rem); }
.stand { max-width: var(--wide); margin: 0 auto; display: grid; gap: 10px; }
@media (min-width: 820px) { .stand { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
.st-i { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink); text-decoration: none; transition: box-shadow .2s, transform .2s var(--ease); }
.st-i:active { transform: scale(.985); }
.st-t b { display: block; font-size: .98rem; font-weight: 640; line-height: 1.25; }
.st-t small { display: block; margin-top: 3px; font-size: .86rem; line-height: 1.38; color: var(--mut); }
@media (hover: hover) and (pointer: fine) { .st-i:hover { box-shadow: inset 0 0 0 2px var(--violet); transform: translateY(-2px); } }

/* ═══ the 404 page ═══ */
.is-lost { min-height: 100svh; display: grid; place-items: center; background: radial-gradient(60% 50% at 80% 12%, var(--violet-bg), transparent), radial-gradient(50% 40% at 12% 90%, var(--amber-bg), transparent), var(--paper); }
.lost { width: min(100%, 680px); padding: 40px var(--pad); }
.lost .brand { margin-bottom: clamp(48px, 10vh, 96px); }
.lost h1 { font-size: clamp(2.6rem, 8vw, 4.6rem); }
.lost .lede { margin: 20px 0 30px; }

/* ═══ motion off ═══ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js .rv { opacity: 1; transform: none; }
  .plx { translate: none !important; }
}