/* AntBox. One stylesheet: tokens, base, layout, components, sections, the stream, motion.
   Five colours only (beige, white, purple, deep purple, ink), at any alpha.
   The direction: a warm ink page. The network lives in framed panels (windows onto a
   fixed atmosphere of soft purple light and a faint grid); everything else is quiet type
   on ink. Purple marks the accent line, the call to action and active states. */

/* ---------- 1. Tokens ---------- */
@font-face { font-family: "Questrial"; src: url("/fonts/questrial-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/fonts/poppins-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/fonts/poppins-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/fonts/poppins-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Questrial Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"); size-adjust: 101.5%; ascent-override: 97%; descent-override: 25%; line-gap-override: 0%; }
@font-face { font-family: "Poppins Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"); size-adjust: 112.5%; ascent-override: 93%; descent-override: 31%; line-gap-override: 9%; }

:root {
  --beige: #f7f5ee;
  --white: #ffffff;
  --purple: #bb62de;
  --purple-deep: #8a3cb0;
  --ink: #1a1a1a;

  /* theme: white glass by default; [data-theme="dark"] keeps the ink version */
  --fg-rgb: 26 26 26;
  --bg-rgb: 255 255 255;
  --bg: var(--white);
  --fg: var(--ink);
  --fg-2: rgb(var(--fg-rgb) / .74);
  --fg-3: rgb(var(--fg-rgb) / .6);
  --rule: rgb(var(--fg-rgb) / .1);
  --rule-2: rgb(var(--fg-rgb) / .18);
  --surface: rgb(var(--bg-rgb) / .5);
  --surface-2: rgb(var(--bg-rgb) / .72);

  --font-display: "Questrial", "Questrial Fallback", "Poppins", sans-serif;
  --font-body: "Poppins", "Poppins Fallback", system-ui, sans-serif;
  --t-hero: clamp(3.75rem, 1.6rem + 7.4vw, 8.25rem);
  --t-h2: clamp(2.25rem, 1.5rem + 2.6vw, 3.75rem);
  --t-h3: clamp(1.5rem, 1.3rem + .8vw, 2rem);
  --t-lede: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  --t-body: 1rem;
  --t-small: .9375rem;
  --t-label: .75rem;

  --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px; --s-24: 96px;
  --section: clamp(96px, 11vw, 168px);
  --max: 1240px;
  --gutter: 20px;
  --frame: 12px;
  --r-panel: 28px;
  --r-card: 24px;
  --r-pill: 999px;

  --t-fast: .35s;
  --t-base: .8s;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.7, 0, .15, 1);
  color-scheme: light;
}
:root[data-theme="dark"] { --fg-rgb: 247 245 238; --bg-rgb: 26 26 26; --bg: var(--ink); --fg: var(--beige); --fg-3: rgb(247 245 238 / .58); --rule: rgb(247 245 238 / .12); --rule-2: rgb(247 245 238 / .22); --surface: rgb(247 245 238 / .04); --surface-2: rgb(247 245 238 / .07); color-scheme: dark; }
@media (min-width: 768px) { :root { --gutter: 32px; --frame: 16px; } }
@media (min-width: 1280px) { :root { --gutter: 40px; --frame: 20px; } }

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 120px; background: var(--bg); }
body { margin: 0; min-height: 100svh; color: var(--fg); font: 400 var(--t-body)/1.65 var(--font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; text-wrap: balance; }
p { text-wrap: pretty; }
b { font-weight: 500; color: var(--fg); }
::selection { background: rgb(187 98 222 / .4); color: var(--white); }
:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; border-radius: 4px; }
main:focus { outline: none; }
.skip { position: fixed; left: 16px; top: -80px; z-index: 1200; padding: 10px 18px; border-radius: var(--r-pill); background: var(--purple); color: var(--ink); text-decoration: none; font-weight: 500; transition: top var(--t-fast) var(--ease-out); }
.skip:focus { top: 16px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:root[data-aud="student"] .only-company, :root[data-aud="company"] .only-student { display: none !important; }
.hint-touch-only, .hint-touch { display: none; }
@media (pointer: coarse) { .hint-touch-only, .hint-touch { display: inline; } .hint-fine-only, .hint-fine { display: none; } }

/* the atmosphere: fixed light and a faint grid, seen only through the network's panels */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(rgb(var(--fg-rgb) / .045) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(90deg, rgb(var(--fg-rgb) / .045) 1px, transparent 1px) 0 0 / 64px 64px,
    radial-gradient(70% 60% at 85% 20%, rgb(138 60 176 / .42), transparent 70%),
    radial-gradient(60% 55% at 10% 95%, rgb(187 98 222 / .18), transparent 70%),
    var(--ink);
}

/* ---------- 3. Layout ---------- */
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.section { position: relative; padding-block: var(--section); background: var(--bg); }
main, .footer { position: relative; z-index: 10; }
/* a panel is a window: transparent inside (the network shows through), ink all around */
.panel { position: relative; border-radius: var(--r-panel); box-shadow: 0 0 0 1px var(--rule), 0 0 0 200vmax var(--bg); }
.kicker { font: 500 var(--t-label)/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--purple); margin-bottom: var(--s-4); }
.sec-title { font-size: var(--t-h2); line-height: 1.04; letter-spacing: -.03em; max-width: 18ch; }
.sec-lede { margin-top: var(--s-6); font-size: var(--t-lede); line-height: 1.6; color: var(--fg-2); max-width: 48ch; }
.center { text-align: center; margin-inline: auto; }
.wrap > .kicker:first-child { text-align: center; }
.acc { color: var(--purple); }

/* ---------- 4. Components ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 26px; border-radius: var(--r-pill); border: 0; font: 500 .9375rem/1 var(--font-body); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); touch-action: manipulation; }
.btn:active { transform: scale(.98); }
.arr { flex: none; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--t-fast) var(--ease-out); }
.btn:hover .arr, a:hover .arr { transform: translateX(3px); }
.btn-pill { background: var(--purple); color: var(--ink); box-shadow: 0 10px 30px -12px rgb(187 98 222 / .7); }
.btn-pill:hover, .btn-pill:focus-visible { background: var(--fg); color: var(--bg); }
.btn-ghost { background: var(--surface); color: var(--fg); box-shadow: inset 0 0 0 1px var(--rule-2); }
.btn-ghost:hover, .btn-ghost:focus-visible { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--fg-3); }
.btn-sm { min-height: 42px; padding: 0 20px; font-size: .875rem; }
.link { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; text-decoration: none; }

/* announcement + nav */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: transform var(--t-fast) var(--ease-out); }
.nav.is-hidden { transform: translateY(-100%); }
.annc { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 38px; padding: 6px 48px; background: var(--bg); color: var(--fg-2); box-shadow: inset 0 -1px 0 var(--rule); font-size: .8125rem; text-align: center; position: relative; }
.annc a { font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.annc-x { position: absolute; right: 12px; top: 50%; translate: 0 -50%; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--fg-2); cursor: pointer; }
.annc-x svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.annc-x:hover { background: var(--surface-2); }
.annc a { color: var(--fg); }
.annc-node { display: inline-block; width: 6px; height: 6px; margin-right: 10px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 0 3px rgb(187 98 222 / .2); vertical-align: middle; animation: blip 2.4s var(--ease-in-out) infinite; }
@keyframes blip { 50% { box-shadow: 0 0 0 6px rgb(187 98 222 / 0); } }
.annc-off .annc { display: none; }
.nav-bar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; height: 76px; padding: 0 var(--gutter); }
.nav-bar::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; background: rgb(var(--bg-rgb) / .82); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 1px 0 var(--rule); opacity: 0; transition: opacity var(--t-fast) var(--ease-out); }
.nav.is-scrolled .nav-bar::before, .nav.menu-open .nav-bar::before { opacity: 1; }
.logo { flex: none; display: inline-flex; align-items: center; color: var(--fg); text-decoration: none; }
.logo-img { height: 24px; width: auto; }
:root[data-theme="dark"] .logo-img { filter: invert(1) brightness(1.04); }
.logo-svg { height: 24px; width: auto; }
.nav-links ul { display: flex; gap: 4px; }
.nav-links a { display: block; padding: 10px 12px; color: var(--fg-2); font-size: .875rem; text-decoration: none; transition: color var(--t-fast) var(--ease-out); }
.nav-links a:hover { color: var(--fg); }
.nav-right { display: flex; align-items: center; gap: 8px; }
.menu-only { display: none; }
.nav-toggle { display: none; min-height: 40px; padding: 0 16px; border: 0; border-radius: var(--r-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule-2); font-weight: 500; font-size: .875rem; cursor: pointer; }
@media (min-width: 980px) {
  .nav-aud { position: absolute; left: 50%; translate: -50% 0; }
  .nav-links { margin-left: auto; }
}
@media (max-width: 979px) {
  .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; padding: 8px var(--gutter) 24px; background: var(--bg); box-shadow: 0 1px 0 var(--rule); }
  .nav.menu-open .nav-links { display: block; }
  .nav-links ul { flex-direction: column; gap: 0; }
  .nav-links li + li { border-top: 1px solid var(--rule); }
  .nav-links a { font-family: var(--font-display); font-size: 1.625rem; color: var(--fg); padding: 14px 0; }
  .menu-only { display: block; }
  .nav-cta { display: none; }
  .nav-toggle { display: inline-flex; align-items: center; }
  .nav-aud { margin-left: auto; }
}
@media (max-width: 520px) {
  .nav-bar { gap: 10px; }
  .nav-aud { padding: 3px; }
  .nav-aud button { min-height: 32px; padding: 0 8px; font-size: .75rem; }
  .nav-aud .switch-thumb { top: 3px; bottom: 3px; left: 3px; }
  .nav-toggle { width: 40px; padding: 0; justify-content: center; font-size: 0; }
  .nav-toggle::before { content: ""; width: 16px; height: 10px; background: linear-gradient(currentColor, currentColor) top / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) bottom / 100% 1.5px no-repeat; }
  .logo-img { height: 18px; }
  .nav-bar { padding-inline: 16px; }
  .annc { font-size: .75rem; padding-inline: 40px; }
}

/* the audience switch */
.switch { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 4px; border-radius: var(--r-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); width: max-content; }
.switch button { position: relative; z-index: 1; min-height: 36px; padding: 0 16px; border: 0; border-radius: var(--r-pill); background: none; font-weight: 500; font-size: .875rem; color: var(--fg-2); cursor: pointer; white-space: nowrap; transition: color var(--t-base) var(--ease-out); }
.switch button[aria-pressed="true"] { color: var(--bg); }
.switch-thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 5px); border-radius: var(--r-pill); background: var(--beige); transition: transform var(--t-base) var(--ease-out), background-color var(--t-base) var(--ease-out); }
:root[data-aud="company"] .switch-thumb { transform: translateX(calc(100% + 2px)); background: var(--purple); }

/* chapter marker + pause */
.chapter { position: fixed; right: calc(var(--frame) + 8px + env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 50; display: flex; align-items: center; gap: 0; padding: 3px; border-radius: var(--r-pill); background: rgb(var(--bg-rgb) / .9); box-shadow: inset 0 0 0 1px var(--rule-2); font: 500 .6875rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); transition: opacity var(--t-fast) var(--ease-out); }
.chapter[hidden] { display: none; }
.at-hero .chapter:not(:focus-within), .at-end .chapter:not(:focus-within) { opacity: 0; pointer-events: none; }
.chapter-label { display: none; }
.chapter-n { color: var(--purple); font-variant-numeric: tabular-nums; overflow: hidden; }
.chapter-n span { display: block; }
.chapter-pause { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.chapter-pause:hover { background: var(--surface-2); }
.chapter-pause svg { fill: none; stroke: var(--fg); stroke-width: 1.6; stroke-linecap: round; }
.chapter-pause .i-play { display: none; fill: var(--fg); stroke: none; }
.chapter-pause[aria-pressed="true"] .i-pause { display: none; }
.chapter-pause[aria-pressed="true"] .i-play { display: block; }


/* ---------- 5. Sections ---------- */
.stage-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; opacity: 0; transition: opacity var(--t-base) var(--ease-out); }
.stage-on .stage-canvas { opacity: 1; }

/* hero: one framed panel */
.hero { position: relative; overflow: clip; padding: calc(114px + var(--frame)) var(--frame) var(--frame); }
.annc-off .hero { padding-top: calc(76px + var(--frame)); }
.hero-panel { min-height: calc(100svh - 116px - 2 * var(--frame)); display: flex; }
.hero-grid { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-8); align-items: center; width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding: clamp(32px, 5vw, 72px) var(--gutter) clamp(40px, 5vw, 72px); }
.hero-copy { display: flex; flex-direction: column; gap: var(--s-6); position: relative; z-index: 2; }
.hero-badge { display: inline-flex; align-items: center; gap: 10px; width: max-content; padding: 6px 14px 6px 10px; border-radius: var(--r-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); font-size: .8125rem; color: var(--fg-2); }
.hero-badge span:last-child { color: var(--fg-3); }
.hero-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 0 4px rgb(187 98 222 / .2); }
.hero-title { font-size: var(--t-hero); line-height: .92; letter-spacing: -.045em; }
.ht-line { display: block; padding-bottom: .04em; }
.ht-word { display: inline-block; }
.hero-sub { font-size: var(--t-lede); line-height: 1.6; color: var(--fg-2); max-width: 40ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--s-2); }
.hero-stage { position: relative; width: min(100%, 560px); aspect-ratio: 1; justify-self: center; touch-action: pan-y; }
.stage-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.js .stage-poster { display: none; }
.js.stage-failed .stage-poster { display: block; }
@media (hover: hover) and (pointer: fine) { .hero-stage { cursor: grab; } .is-grabbing, .is-grabbing * { cursor: grabbing !important; user-select: none; } }
.fig-cap { position: absolute; left: 0; bottom: -10px; max-width: 290px; display: grid; grid-template-columns: auto 1fr; gap: 0 12px; font-size: .8125rem; line-height: 1.5; color: var(--fg-2); pointer-events: none; }
.fig-n { font: 500 .6875rem/1.9 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--purple); }
.fig-a { display: none; }
.brain-on .fig-a { display: inline; }
.brain-on .fig-b { display: none; }
.js .fig-cap, .js .legend { opacity: 0; transition: opacity var(--t-base) var(--ease-out); }
.stage-on .fig-cap, .stage-on.brain-done .legend { opacity: 1; }
.legend { position: absolute; right: 0; bottom: -8px; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; font: 500 .6875rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); pointer-events: none; }
.legend li, .net-key span { display: inline-flex; align-items: center; gap: 8px; }
.lg-face, .lg-you, .lg-ring, .lg-glow { flex: none; width: 12px; height: 12px; border-radius: 50%; }
.lg-face { background: url("/images/network/faces.webp") 0 0 / 1600% 1000%; box-shadow: 0 0 0 1.5px rgb(var(--fg-rgb) / .8); }
.lg-line { flex: none; position: relative; width: 22px; height: 1px; background: var(--rule-2); overflow: hidden; }
.lg-line::after { content: ""; position: absolute; top: 0; left: -40%; width: 40%; height: 100%; background: var(--purple); animation: lg-run 2.2s var(--ease-in-out) infinite; }
@keyframes lg-run { to { left: 100%; } }
.lg-you { box-shadow: inset 0 0 0 3px var(--purple); }
.lg-ring { box-shadow: inset 0 0 0 1px var(--purple); }
.lg-glow { background: var(--white); box-shadow: 0 0 10px 2px rgb(var(--fg-rgb) / .5); }
.motion-paused .lg-line::after { animation-play-state: paused; }
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .hero-copy { grid-column: 1 / 7; }
  .hero-stage { grid-column: 7 / 13; width: min(100%, 62svh); justify-self: end; }
}
@media (max-width: 767px) { .legend { display: none; } .hero-panel { --r-panel: 22px; } }

/* proof strip */
.strip { position: relative; padding: var(--s-16) 0 var(--s-8); background: var(--bg); }
.strip-title { text-align: center; font-size: .8125rem; color: var(--fg-3); margin-bottom: var(--s-6); }
.ticker { position: relative; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, var(--ink) 12%, var(--ink) 88%, transparent); mask: linear-gradient(90deg, transparent, var(--ink) 12%, var(--ink) 88%, transparent); }
.ticker-track { display: flex; width: max-content; will-change: transform; }
.ticker-group { display: flex; align-items: center; gap: 36px; padding: 6px 18px; white-space: nowrap; font-size: .9375rem; color: var(--fg-2); }
.ticker-group b { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; letter-spacing: -.02em; color: var(--fg); margin-right: 6px; }
.ticker-group i { flex: none; width: 4px; height: 4px; border-radius: 50%; background: var(--purple); }
.no-js .ticker-track, .reduce .ticker-track { flex-wrap: wrap; width: auto; justify-content: center; }
.no-js .ticker-group + .ticker-group, .reduce .ticker-group + .ticker-group { display: none; }

/* carousels: a 3D fan of cards (how it works) and a flat row (stories) */
.how .sec-title, .stories .sec-title { max-width: 20ch; }
.car { position: relative; margin-top: var(--s-12); overflow-x: clip; padding-block: 24px; }
.car-track { position: relative; height: 470px; perspective: 1800px; }
.car-card { position: absolute; left: 50%; top: 0; width: min(340px, 78vw); height: 440px; margin-left: calc(min(340px, 78vw) / -2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 36px 30px; border-radius: var(--r-card); text-align: center; transition: transform .9s var(--ease-out), opacity .9s var(--ease-out), filter .9s var(--ease-out); will-change: transform; user-select: none; }
.car-card::after { display: none; content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .5; mix-blend-mode: overlay; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.55'/></svg>"); }
.cc-n { font: 500 .6875rem/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--purple); }
.car-card h3 { font-size: var(--t-h3); line-height: 1.1; letter-spacing: -.025em; }
.car-card p { color: var(--fg-2); font-size: var(--t-small); line-height: 1.6; max-width: 30ch; }
.car-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: var(--s-8); }
.car-btn { width: 46px; height: 46px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--rule-2); cursor: pointer; transition: background-color var(--t-fast) var(--ease-out); }
.car-btn:hover { background: var(--fg); color: var(--bg); }
.car-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.car-count { min-width: 48px; text-align: center; font-size: .8125rem; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.no-js .car-track { height: auto; display: flex; gap: 16px; overflow-x: auto; padding: 0 var(--gutter); }
.no-js .car-card { position: static; margin: 0; flex: none; }
/* stories: photograph on top, the placard below */
.car-flat .car-track { height: 500px; perspective: none; }
.story { width: min(400px, 82vw); height: 480px; margin-left: calc(min(400px, 82vw) / -2); padding: 0; justify-content: flex-start; align-items: stretch; text-align: left; background: linear-gradient(rgb(var(--fg-rgb) / .035), rgb(var(--fg-rgb) / .035)), var(--ink); box-shadow: inset 0 0 0 1px var(--rule-2); overflow: hidden; }
.story::after { display: none; }
.story-img { flex: none; height: 56%; background: var(--img) var(--pos) / var(--zoom, 200%) no-repeat; border-bottom: 1px solid var(--rule); }
.story blockquote { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; flex: 1; padding: 24px 26px 26px; }
.story blockquote p { font-family: var(--font-display); font-size: clamp(1.375rem, 1.2rem + .5vw, 1.625rem); line-height: 1.2; letter-spacing: -.02em; color: var(--fg); }
.story footer { font-size: .8125rem; color: var(--fg-3); }

/* the network: a framed panel, pinned */
.network { position: relative; overflow: clip; }
.net-pin { position: relative; height: 100svh; padding: calc(84px + var(--frame)) var(--frame) var(--frame); }
.net-panel { height: 100%; display: flex; flex-direction: column; justify-content: center; padding: clamp(72px, 9vh, 96px) clamp(28px, 4vw, 56px) clamp(28px, 4vw, 48px); }
.net-panel > .kicker { position: absolute; top: clamp(24px, 3vw, 40px); left: clamp(28px, 4vw, 56px); }
.net-seq { position: relative; display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 22px; max-width: 640px; isolation: isolate; }
.net-seq::before { content: ""; position: absolute; inset: -30% -25% -30% -40%; z-index: -1; background: radial-gradient(closest-side, rgb(var(--bg-rgb) / .96), rgb(var(--bg-rgb) / .8) 55%, rgb(var(--bg-rgb) / 0)); pointer-events: none; }
.net-fibre { position: relative; width: 1px; justify-self: center; background: var(--rule-2); }
.net-fibre i { position: absolute; inset: 0; background: linear-gradient(var(--purple), var(--purple-deep)); transform-origin: 50% 0; transform: scaleY(1); }
.net-lines { display: grid; gap: clamp(10px, 1.6vh, 18px); counter-reset: beat; }
.net-line { position: relative; font-family: var(--font-display); font-size: clamp(1.375rem, 1.05rem + 1.2vw, 2.25rem); line-height: 1.15; max-width: 22ch; letter-spacing: -.025em; color: var(--fg); transition: color .5s var(--ease-out), opacity .5s var(--ease-out), transform .6s var(--ease-out); counter-increment: beat; }
.net-line::before { content: ""; position: absolute; left: -33.5px; top: .42em; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1px var(--fg-3); transition: background-color .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.js-motion .net-line { opacity: .28; transform: translateX(0); }
.js-motion .net-line.done { opacity: .5; }
.js-motion .net-line.on { opacity: 1; transform: translateX(6px); }
.js-motion .net-line.on::before { background: var(--purple); box-shadow: 0 0 0 5px rgb(187 98 222 / .2), 0 0 14px rgb(187 98 222 / .8); }
.js-motion .net-line.done::before { background: var(--purple-deep); box-shadow: none; }
.net-cta { margin-top: var(--s-8); }
.net-key { position: absolute; right: clamp(28px, 4vw, 56px); bottom: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; align-items: flex-end; gap: 10px; font: 500 .6875rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
@media (max-width: 767px) { .net-key { display: none; } }
.no-js .net-lines, .reduce .net-lines { gap: var(--s-6); }


/* questions */
.faq-grid { display: grid; gap: var(--s-12); }
.faq-list { border-top: 1px solid var(--rule); }
.faq-list details { border-bottom: 1px solid var(--rule); overflow: hidden; }
.faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s-6); padding: 24px 0; font-size: 1.0625rem; font-weight: 500; line-height: 1.4; transition: color var(--t-fast) var(--ease-out); }
.faq-list summary:hover { color: var(--purple); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; flex: none; width: 13px; height: 13px; background: linear-gradient(currentColor, currentColor) center / 13px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 13px no-repeat; transition: transform var(--t-fast) var(--ease-out); }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.answer { padding: 0 0 26px; }
.answer p { color: var(--fg-2); max-width: 60ch; }
@media (min-width: 900px) { .faq-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(48px, 7vw, 120px); align-items: start; } .faq-head { position: sticky; top: 140px; } .answer { padding-right: 12%; } }

/* the team in one photograph */
.media { padding-top: 0; }
.media-card { position: relative; display: block; border-radius: var(--r-panel); overflow: hidden; text-decoration: none; box-shadow: 0 0 0 1px var(--rule), 0 50px 120px -50px rgb(138 60 176 / .6); }
.media-card img { width: 100%; height: auto; aspect-ratio: 16 / 8; object-fit: cover; object-position: 50% 75%; transition: transform 1.4s var(--ease-out); }
.media-card:hover img { transform: scale(1.025); }
.media-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgb(var(--bg-rgb) / .85)); pointer-events: none; }
.media-cap { position: absolute; z-index: 1; left: clamp(20px, 4vw, 48px); right: clamp(20px, 4vw, 48px); bottom: clamp(20px, 4vw, 40px); display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 16px; }
.media-cap .kicker { flex-basis: 100%; margin: 0; }
.media-title { font-family: var(--font-display); font-size: var(--t-h3); letter-spacing: -.02em; line-height: 1.1; }
.media-cap .arr { width: 18px; height: 18px; margin-bottom: .45em; }
@media (max-width: 599px) { .media-card img { aspect-ratio: 4 / 3; } }


/* footer: a card resting on the horizon */
:root { --overlap: clamp(90px, 12vw, 180px); }
.footer { padding: 0 var(--frame) calc(var(--frame) + env(safe-area-inset-bottom, 0px)); background: linear-gradient(transparent calc(var(--overlap) - 40px), var(--bg) calc(var(--overlap) + 40px)); }
/* the horizon runs on behind the top of the footer card */
.closing { margin-bottom: calc(-1 * var(--overlap)); }
.foot-card { margin-top: 0 !important; }
.foot-card { position: relative; margin-top: clamp(-180px, -12vw, -90px); max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding: clamp(28px, 4vw, 48px); border-radius: var(--r-panel); background: var(--bg); box-shadow: inset 0 0 0 1px var(--rule); }
.foot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8) var(--s-6); }
.foot-about { grid-column: 1 / -1; }
.foot-about p { color: var(--fg-3); font-size: .875rem; margin-top: 14px; max-width: 34ch; }
.foot-col h2 { margin-bottom: 12px; font: 500 .875rem/1.4 var(--font-body); color: var(--fg); }
.foot-col ul { display: flex; flex-direction: column; gap: 2px; }
.foot-col a { display: inline-block; padding: 4px 0; font-size: .875rem; color: var(--fg-2); text-decoration: none; transition: color var(--t-fast) var(--ease-out); }
.foot-col a:hover { color: var(--fg); }
.footer .logo-img { height: 26px; }
.foot-base { margin-top: var(--s-12); padding-top: 20px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: .8125rem; color: var(--fg-3); }
.foot-legal { display: flex; gap: 20px; }
.foot-legal a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule-2); }
.foot-legal a:hover { color: var(--fg); }
@media (min-width: 900px) { .foot-grid { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); } .foot-about { grid-column: auto; } }

/* 404 */
.nf { min-height: 80svh; display: flex; align-items: center; padding-top: 180px; }
.nf-actions { margin-top: var(--s-8); display: flex; flex-wrap: wrap; gap: 10px; }
.btn-line { background: var(--surface); color: var(--fg); box-shadow: inset 0 0 0 1px var(--rule-2); }
.btn-ink { background: var(--purple); color: var(--ink); }

/* ---------- 6. The stream's labels ---------- */
.stream-labels { position: fixed; inset: 0; z-index: 9; overflow: hidden; pointer-events: none; }
.stream-label { position: absolute; left: 0; top: 0; padding: 4px 8px; border-radius: 6px; background: rgb(var(--bg-rgb) / .78); box-shadow: inset 0 0 0 1px var(--rule); font: 500 .6875rem/1.3 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-2); white-space: nowrap; opacity: 0; transition: opacity var(--t-fast) var(--ease-out); will-change: transform; }
.you-tag { position: absolute; left: 0; top: 0; font: 600 10px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--purple); white-space: nowrap; opacity: 0; transform: translate3d(-100px, -100px, 0); will-change: transform, opacity; }
@media (pointer: coarse) { .you-tag { display: none; } }

/* ---------- 7. Motion ---------- */
.js-motion [data-reveal] { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
.js-motion [data-reveal].in { opacity: 1; transform: none; }
.ht-line.is-masked { clip-path: inset(-0.25em -0.2em -0.3em -0.2em); }
.pre .nav-bar, .pre .hero-copy { opacity: 0; }
.brain-on .legend { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
  .js-motion [data-reveal] { opacity: 1; transform: none; }
  .js-motion .dots-fig:not(.grown) .dr-dots i { transform: none; opacity: 1; }
}

/* ---------- Revision 10: our own marks on this structure ---------- */
/* section numbers, as in the notebook build */
.kn { margin-right: 12px; padding-right: 12px; border-right: 1px solid var(--rule-2); color: var(--fg-3); font-variant-numeric: tabular-nums; }
/* crop marks on the network's windows, like a proof sheet */
.marked::before, .marked::after { content: ""; position: absolute; z-index: 3; width: 14px; height: 14px; pointer-events: none; opacity: .7; }
.marked::before { left: 14px; top: 14px; border-left: 1px solid var(--purple); border-top: 1px solid var(--purple); }
.marked::after { right: 14px; bottom: 14px; border-right: 1px solid var(--purple); border-bottom: 1px solid var(--purple); }
/* hero: the switch lives at the top of the hero, with the place beside it */
.hero-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.hero-top .switch button { min-height: 38px; }

/* how it works: cards on one fibre, a node per step, each card with its own small figure */
.car-line .car-track { height: 440px; perspective: none; }
.car-line .car-card { width: min(320px, 80vw); height: 410px; margin-left: calc(min(320px, 80vw) / -2); align-items: flex-start; justify-content: flex-start; text-align: left; gap: 12px; padding: 26px 26px 28px; background: radial-gradient(120% 70% at 0% 0%, rgb(187 98 222 / .14), transparent 60%), linear-gradient(rgb(var(--fg-rgb) / .03), rgb(var(--fg-rgb) / .03)), var(--ink); box-shadow: inset 0 0 0 1px var(--rule-2); }
.car-line .car-card[aria-hidden="false"] { box-shadow: inset 0 0 0 1px rgb(187 98 222 / .55), 0 30px 80px -40px rgb(187 98 222 / .6); }
.cc-fig { width: 100%; height: 132px; margin: -2px 0 10px; border-radius: 14px; background: linear-gradient(rgb(var(--fg-rgb) / .045) 1px, transparent 1px) 0 0 / 16px 16px, linear-gradient(90deg, rgb(var(--fg-rgb) / .045) 1px, transparent 1px) 0 0 / 16px 16px; box-shadow: inset 0 0 0 1px var(--rule); padding: 18px 10px; overflow: visible; }
.cc-fig .n { fill: rgb(var(--fg-rgb) / .55); }
.cc-fig .n.hot { fill: var(--purple); filter: drop-shadow(0 0 6px rgb(187 98 222 / .9)); }
.cc-fig .f { fill: none; stroke: rgb(var(--fg-rgb) / .35); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.cc-fig .f.hotf { stroke: var(--purple); stroke-width: 1.5; }
.cc-fig .ring { fill: none; stroke: rgb(187 98 222 / .7); stroke-width: 1; vector-effect: non-scaling-stroke; }
.car-card[aria-hidden="false"] .cc-fig .hot { animation: blip-r 2.4s var(--ease-in-out) infinite; }
@keyframes blip-r { 50% { opacity: .55; } }
.cc-n { display: flex; align-items: baseline; gap: 10px; }
.cc-n b { font: 400 1.75rem/1 var(--font-display); letter-spacing: -.03em; color: var(--fg); }
.car-line .car-card p { max-width: none; }
.car-fibre { position: relative; width: min(560px, 80vw); height: 14px; margin: 18px auto 0; display: flex; justify-content: space-between; align-items: center; }
.car-fibre::before, .cf-fill { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 1px; background: var(--rule-2); }
.cf-fill { right: auto; width: calc((100% - 12px) * var(--p, 0)); background: linear-gradient(90deg, var(--purple-deep), var(--purple)); transition: width .9s var(--ease-out); }
.car-fibre i { position: relative; z-index: 1; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1px var(--rule-2); transition: background-color .6s var(--ease-out), box-shadow .6s var(--ease-out); }
.car-fibre i.on { background: var(--purple); box-shadow: 0 0 0 4px rgb(187 98 222 / .18); }
.car-fibre i.done { background: var(--purple-deep); box-shadow: none; }
.car-line .car-nav { margin-top: var(--s-6); }

/* proof: every dot is one product shipped */
.proof-grid { display: grid; gap: var(--s-12); align-items: center; }
.proof-note { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--rule); color: var(--fg-2); max-width: 44ch; }
.dots-fig { margin: 0; padding: clamp(22px, 3vw, 36px); border-radius: var(--r-card); background: linear-gradient(rgb(var(--fg-rgb) / .03) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgb(var(--fg-rgb) / .03) 1px, transparent 1px) 0 0 / 24px 24px; box-shadow: inset 0 0 0 1px var(--rule); }
.dots-plot { display: grid; gap: 22px; }
.dots-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 48px; align-items: center; gap: 16px; }
.dr-l { font-size: .8125rem; color: var(--fg-2); }
.dr-v { font: 400 1.375rem/1 var(--font-display); letter-spacing: -.02em; text-align: right; }
.dr-dots { display: flex; flex-wrap: wrap; gap: 9px; }
.dr-dots i { width: 11px; height: 11px; border-radius: 50%; background: rgb(var(--fg-rgb) / .5); box-shadow: 0 0 0 3px rgb(var(--fg-rgb) / .04); transition: transform .6s var(--ease-out), opacity .6s var(--ease-out); transition-delay: calc(var(--k, 0) * 22ms); }
.dr-dots i.hot { background: var(--purple); box-shadow: 0 0 10px rgb(187 98 222 / .55); }
.js-motion .dots-fig:not(.grown) .dr-dots i { transform: scale(0); opacity: 0; }
.dots-fig figcaption { display: grid; grid-template-columns: auto 1fr; gap: 12px; margin-top: var(--s-8); padding-top: var(--s-4); border-top: 1px solid var(--rule); font-size: .8125rem; color: var(--fg-3); }
.dots-fig figcaption b { color: var(--fg-2); }
@media (min-width: 960px) { .proof-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(48px, 7vw, 120px); } }

/* close: pick your side, in a window onto the network, over a horizon of nodes */
.closing { position: relative; padding: var(--section) var(--frame) 0; background: transparent; overflow: clip; }
.close-panel { padding: clamp(28px, 5vw, 72px); }
.close-title { margin-bottom: clamp(32px, 5vw, 64px); }
.doors { display: grid; gap: 16px; }
.door { position: relative; display: flex; flex-direction: column; gap: 14px; min-height: 320px; padding: clamp(24px, 3vw, 40px); border-radius: var(--r-card); text-decoration: none; background: rgb(var(--bg-rgb) / .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px var(--rule-2); transition: box-shadow var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); }
.door:hover { box-shadow: inset 0 0 0 1px rgb(187 98 222 / .6), 0 30px 80px -40px rgb(187 98 222 / .6); transform: translateY(-2px); }
.door-tag { display: inline-flex; align-items: center; gap: 10px; font: 500 .75rem/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--purple); }
.door-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 0 4px rgb(187 98 222 / .18); }
.door-co .door-tag { color: var(--fg-2); }
.door-co .door-tag i { background: var(--beige); box-shadow: 0 0 0 4px rgb(var(--fg-rgb) / .12); }
.door-title { font-family: var(--font-display); font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem); line-height: 1.05; letter-spacing: -.03em; max-width: 14ch; }
.door-copy { color: var(--fg-2); max-width: 36ch; }
.door .btn { margin-top: auto; align-self: flex-start; }
@media (min-width: 768px) { .doors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.node-horizon { position: relative; height: clamp(220px, 26vw, 380px); margin: var(--s-12) calc(-1 * var(--frame)) 0; background: var(--bg); }
.node-horizon svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.nh-f { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.nh-n { transform-box: fill-box; transform-origin: center; }
.nh-n.pulse { animation: nh-pulse 3.2s var(--ease-in-out) infinite; animation-delay: var(--d, 0s); }
@keyframes nh-pulse { 50% { opacity: .35; transform: scale(.7); } }
.motion-paused .nh-n.pulse, .motion-paused .annc-node, .motion-paused .cc-fig .hot { animation-play-state: paused; }
:root { --overlap: clamp(90px, 10vw, 150px); }

/* autoplay: the active card shows its own countdown, a thin line along its foot */
.car[data-autoplay] .car-card[aria-hidden="false"]::before { content: ""; position: absolute; left: 22px; right: 22px; bottom: 14px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--purple) calc(var(--t, 0) * 100%), var(--rule) 0); z-index: 2; }
.story[aria-hidden="false"]::before { bottom: 12px; }
.car-fibre i.on { position: relative; }

/* hero: light behind the brain while it's on, and a quiet footer row in the panel */
.hero-stage::before { content: ""; position: absolute; inset: -12%; border-radius: 50%; background: radial-gradient(closest-side, rgb(187 98 222 / .32), rgb(138 60 176 / .12) 55%, transparent 75%); opacity: 0; transition: opacity 1.6s var(--ease-out); pointer-events: none; }
.brain-on .hero-stage::before { opacity: 1; }
.hero-panel { flex-direction: column; }
.hero-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 0 clamp(20px, 3vw, 40px) 22px; font: 500 .6875rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.hero-foot b { font-weight: 500; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.hf-time { display: inline-flex; align-items: center; gap: 8px; }
.hf-time i { width: 6px; height: 6px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 0 3px rgb(187 98 222 / .2); animation: blip 2.4s var(--ease-in-out) infinite; }
.hf-scroll { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; }
.hf-scroll i { position: relative; width: 1px; height: 28px; background: var(--rule-2); overflow: hidden; }
.hf-scroll i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--purple); animation: drip 2s var(--ease-in-out) infinite; }
@keyframes drip { to { top: 100%; } }
.motion-paused .hf-scroll i::after, .motion-paused .hf-time i { animation-play-state: paused; }
@media (max-width: 767px) { .hf-coord, .hf-scroll { display: none; } }
.hero-grid { padding-bottom: clamp(16px, 2vw, 28px); }

/* how it works, pinned: the whole section fits one screen while the track slides */
.how { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(72px, 9vh, 120px) clamp(32px, 5vh, 64px); }
.how .car { margin-top: clamp(24px, 4vh, 48px); }
.car-line .car-card { transition: none; }
.car[data-scroll] .car-nav { margin-top: var(--s-4); }
.car[data-scroll] .car-btn { width: 40px; height: 40px; }

/* ---------- Revision 13: what we do, why it works, two sides, universities ---------- */
/* bento: one card per thing we run, each with a small true visual */
.bento { margin-top: clamp(40px, 6vw, 72px); display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.bx { position: relative; display: flex; flex-direction: column; gap: 10px; padding: clamp(22px, 2.4vw, 32px); border-radius: var(--r-card); text-decoration: none; overflow: hidden; background: radial-gradient(120% 80% at 100% 0%, rgb(187 98 222 / .1), transparent 55%), linear-gradient(rgb(var(--fg-rgb) / .03), rgb(var(--fg-rgb) / .03)), var(--ink); box-shadow: inset 0 0 0 1px var(--rule); transition: box-shadow var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); }
.bx:hover { box-shadow: inset 0 0 0 1px rgb(187 98 222 / .5), 0 30px 70px -40px rgb(187 98 222 / .55); transform: translateY(-2px); }
.bx-tag { font: 500 .6875rem/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--purple); }
.bx h3 { font-size: var(--t-h3); line-height: 1.08; letter-spacing: -.025em; }
.bx p { color: var(--fg-2); font-size: var(--t-small); max-width: 42ch; }
.bx .link { margin-top: auto; padding-top: 8px; font-size: .875rem; color: var(--fg); }
.bx-vis { margin-top: 8px; }
.big { font-size: 1.6em; color: var(--purple); letter-spacing: -.04em; }
/* academy: a day ring (7 of 24 hours) and the six tracks */
.academy-vis { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.day-ring { width: 120px; height: 120px; flex: none; }
.dr-track, .dr-fill { fill: none; stroke-width: 6; }
.dr-track { stroke: var(--rule); }
.dr-fill { stroke: var(--purple); stroke-linecap: round; stroke-dasharray: 7 24; transform: rotate(-90deg); transform-origin: 60px 60px; filter: drop-shadow(0 0 6px rgb(187 98 222 / .7)); transition: stroke-dasharray 1.6s var(--ease-out); }
.js-motion .bx-academy:not(.seen) .dr-fill { stroke-dasharray: 0 24; }
.day-ring text { fill: var(--fg); font: 400 20px var(--font-display); text-anchor: middle; }
.day-ring .dr-s { fill: var(--fg-3); font: 500 9px var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
.tracks { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 200px; }
.tracks li { padding: 6px 12px; border-radius: var(--r-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule-2); font-size: .8125rem; color: var(--fg-2); }
/* metrics: a hundred dots, lighting up in sequence */
.metric-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 7px; max-width: 240px; }
.metric-grid i { aspect-ratio: 1; border-radius: 50%; background: rgb(var(--fg-rgb) / .14); transition: background-color .4s var(--ease-out), box-shadow .4s var(--ease-out); }
.metric-grid i.lit { background: var(--purple); box-shadow: 0 0 8px rgb(187 98 222 / .7); }
/* sprint: a spike trace */
.sprint-vis { width: 100%; height: 70px; overflow: visible; }
.sv-base { stroke: var(--rule); fill: none; }
.sv-line { fill: none; stroke: var(--purple); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 700; stroke-dashoffset: 0; transition: stroke-dashoffset 2s var(--ease-out); filter: drop-shadow(0 0 5px rgb(187 98 222 / .6)); }
.js-motion .bx-sprint:not(.seen) .sv-line { stroke-dashoffset: 700; }
.sv-cap { display: block; margin-top: 8px; font-size: .75rem; color: var(--fg-3); }
/* capsule: twelve months, six of them required */
.months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.months i { height: 22px; border-radius: 4px; background: var(--beige); transform-origin: 0 100%; transition: transform .6s var(--ease-out); transition-delay: calc(var(--k, 0) * 60ms); }
.months i.opt { background: transparent; box-shadow: inset 0 0 0 1px rgb(187 98 222 / .7); }
.js-motion .st-pane:not(.on) .months i { transform: scaleY(.15); }
.months-l { display: flex; justify-content: space-between; margin-top: 8px; font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
/* iaas modes */
.iaas-modes { display: grid; gap: 8px; }
.iaas-modes li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); font-size: .875rem; color: var(--fg); }
.iaas-modes b { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--purple); color: var(--ink); font-size: .75rem; }
.bx-svc { grid-column: 1 / -1; background: radial-gradient(90% 90% at 0% 100%, rgb(187 98 222 / .22), transparent 60%), linear-gradient(rgb(var(--fg-rgb) / .03), rgb(var(--fg-rgb) / .03)), var(--ink); }
@media (min-width: 760px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bx-academy { grid-column: 1 / -1; } }
@media (min-width: 1080px) {
  .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .bx-academy { grid-column: 1 / 5; } .bx-metrics { grid-column: 5 / 7; }
  .bx-sprint { grid-column: 1 / 3; } .bx-capsule { grid-column: 3 / 5; } .bx-iaas { grid-column: 5 / 7; }
  .bx-svc { grid-column: 1 / -1; }
}

/* why it works: the loop closes as you arrive */
.why-grid { display: grid; gap: var(--s-12); align-items: center; }
.why-list { margin-top: var(--s-8); display: grid; gap: 0; border-top: 1px solid var(--rule); }
.why-list li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.why-list b { font: 500 .75rem/1.8 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--purple); }
.why-list span { color: var(--fg-2); font-size: var(--t-small); }
.loop-fig { margin: 0; }
.loop { width: 100%; max-width: 520px; margin-inline: auto; overflow: visible; }
.lp-broken { fill: none; stroke: var(--fg-3); stroke-width: 1.5; stroke-dasharray: 6 9; }
.lp-fixed { fill: none; stroke: var(--purple); stroke-width: 2.5; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 2.2s var(--ease-out); filter: drop-shadow(0 0 8px rgb(187 98 222 / .7)); }
.loop-fig.seen .lp-fixed { stroke-dashoffset: 0; }
.lp-spoke { fill: none; stroke: var(--rule-2); stroke-width: 1; stroke-dasharray: 2 5; }
.lp-glow { opacity: 0; transition: opacity 1.4s var(--ease-out) .8s; }
.loop-fig.seen .lp-glow { opacity: 1; }
.lp-core { fill: var(--purple); }
.lp-core-t { fill: var(--ink); font: 600 12px var(--font-body); text-anchor: middle; }
.lp-node circle { fill: var(--bg); stroke: var(--rule-2); stroke-width: 1; }
.loop-fig.seen .lp-node circle { stroke: rgb(187 98 222 / .7); transition: stroke 1s var(--ease-out) 1.4s; }
.lp-node text { fill: var(--fg); font: 500 11px var(--font-body); text-anchor: middle; }
.lp-pulse { fill: var(--white); filter: drop-shadow(0 0 6px rgb(var(--fg-rgb) / .9)); opacity: 0; transition: opacity .6s var(--ease-out) 2s; }
.loop-fig.seen .lp-pulse { opacity: 1; }
.loop-fig figcaption { display: grid; grid-template-columns: auto 1fr; gap: 12px; max-width: 460px; margin: var(--s-6) auto 0; font-size: .8125rem; color: var(--fg-3); }
@media (min-width: 960px) { .why-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 7vw, 110px); } }

/* two sides: a quiet table, the reader's side lit */
.sides-table { margin-top: clamp(40px, 5vw, 64px); border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--rule); overflow: hidden; }
.st-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 24px; padding: 18px clamp(18px, 2.4vw, 28px); border-top: 1px solid var(--rule); }
.st-row:first-child { border-top: 0; }
.st-head { background: var(--surface); font: 500 .6875rem/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.st-row [role="rowheader"] { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 1.25rem; letter-spacing: -.02em; color: var(--fg); }
.st-row [role="rowheader"] i { width: 7px; height: 7px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 0 4px rgb(187 98 222 / .16); }
.st-row [role="cell"] { color: var(--fg-3); font-size: var(--t-small); transition: color .5s var(--ease-out); }
:root[data-aud="student"] .st-row [role="cell"]:nth-child(2), :root[data-aud="company"] .st-row [role="cell"]:nth-child(3) { color: var(--fg); }
:root[data-aud="student"] .st-head .st-s, :root[data-aud="company"] .st-head .st-c { color: var(--purple); }
@media (min-width: 860px) { .st-row { grid-template-columns: 180px minmax(0, 1fr) minmax(0, 1fr); align-items: baseline; } }
@media (max-width: 859px) { .st-head { display: none; } .st-row [role="cell"]:nth-child(2)::before { content: "Student · "; color: var(--purple); } .st-row [role="cell"]:nth-child(3)::before { content: "Company · "; color: var(--fg-3); } }

/* universities */
.uni-card { display: grid; gap: var(--s-12); padding: clamp(28px, 5vw, 64px); border-radius: var(--r-panel); background: radial-gradient(80% 120% at 100% 100%, rgb(138 60 176 / .35), transparent 60%), linear-gradient(rgb(var(--fg-rgb) / .03), rgb(var(--fg-rgb) / .03)), var(--ink); box-shadow: inset 0 0 0 1px var(--rule); }
.uni-copy .btn { margin-top: var(--s-8); }
.uni-steps { position: relative; display: grid; gap: 0; }
.uni-steps::before { content: ""; position: absolute; left: 15px; top: 16px; bottom: 16px; width: 1px; background: linear-gradient(var(--purple), var(--rule-2)); }
.uni-steps li { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 18px; row-gap: 2px; padding: 0 0 26px; }
.uni-steps li:last-child { padding-bottom: 0; }
.us-n { grid-row: span 2; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); box-shadow: inset 0 0 0 1px rgb(187 98 222 / .7); font-size: .75rem; color: var(--purple); z-index: 1; }
.uni-steps b { font: 400 1.375rem/1.2 var(--font-display); letter-spacing: -.02em; }
.uni-steps span:last-child { color: var(--fg-2); font-size: var(--t-small); }
@media (min-width: 960px) { .uni-card { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; } }
.svc-row { display: grid; gap: 14px; margin-top: 10px; }
.svc { display: flex; flex-direction: column; gap: 6px; padding: 18px 0 0; border-top: 1px solid var(--rule); text-decoration: none; }
.svc b { font: 400 1.25rem/1.2 var(--font-display); letter-spacing: -.02em; color: var(--fg); }
.svc > span:last-child { color: var(--fg-2); font-size: var(--t-small); }
.svc .big { font: 400 2.5rem/1 var(--font-display); }
.svc-ico { width: 44px; height: 32px; fill: none; stroke: var(--purple); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 4px; }
.svc-ico circle { fill: var(--purple); stroke: none; }
.svc:hover b { color: var(--purple); }
@media (min-width: 860px) { .svc-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } .svc { padding-top: 22px; } }
.bx-svc:hover { transform: none; }

/* ---------- Revision 14: each side its own page, and a little honest urgency ---------- */
.hero-fomo { margin-top: 4px; font-size: .8125rem; color: var(--fg-3); }
.hero-fomo b { font-weight: 500; color: var(--fg-2); }
.close-stake { margin: calc(-1 * clamp(16px, 3vw, 40px)) 0 clamp(28px, 4vw, 48px); max-width: 40ch; font-size: var(--t-lede); color: var(--fg-2); }
/* student bento: the batch comparison */
.bx-batch { background: radial-gradient(100% 90% at 100% 100%, rgb(187 98 222 / .18), transparent 60%), linear-gradient(rgb(var(--fg-rgb) / .03), rgb(var(--fg-rgb) / .03)), var(--ink); }
.batch { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bt-col { padding: 14px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--rule); }
.bt-h { display: block; margin-bottom: 8px; font: 500 .6875rem/1.4 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.bt-col li { position: relative; padding: 5px 0 5px 16px; font-size: .8125rem; color: var(--fg-3); }
.bt-col li::before { content: ""; position: absolute; left: 0; top: .95em; width: 6px; height: 6px; border-radius: 50%; background: var(--rule-2); }
.bt-col:not(.bt-you) li:nth-child(n+2) { text-decoration: line-through; text-decoration-color: rgb(var(--fg-rgb) / .25); }
.bt-you { box-shadow: inset 0 0 0 1px rgb(187 98 222 / .55); background: rgb(187 98 222 / .06); }
.bt-you .bt-h { color: var(--purple); }
.bt-you li { color: var(--fg); }
.bt-you li::before { background: var(--purple); box-shadow: 0 0 6px rgb(187 98 222 / .8); }
@media (min-width: 1080px) { .bento.only-student .bx-batch { grid-column: 5 / 7; } }
/* company bento */
.bento-co { grid-template-columns: minmax(0, 1fr); }
.ramp { display: grid; gap: 14px; margin-top: 14px; }
.rp-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 4px; align-items: center; }
.rp-l { grid-row: span 2; font-size: .8125rem; color: var(--fg-2); }
.rp-bar { position: relative; height: 10px; border-radius: 6px; background: var(--surface-2); overflow: hidden; }
.rp-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 6px; transform-origin: 0 50%; transition: transform 1.6s var(--ease-out); }
.rp-wait { width: 100%; background: repeating-linear-gradient(90deg, rgb(var(--fg-rgb) / .28) 0 6px, transparent 6px 10px); }
.rp-go { width: 4%; min-width: 10px; background: var(--purple); box-shadow: 0 0 10px rgb(187 98 222 / .8); }
.js-motion .bx-ramp:not(.seen) .rp-bar i { transform: scaleX(0); }
.rp-v { font-size: .75rem; color: var(--fg-3); }
.rp-row:last-child .rp-v { color: var(--purple); }
.bx-pool .tracks { flex: none; align-items: flex-start; margin: 6px 0 4px; }
@media (min-width: 760px) { .bento-co { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bx-ramp, .bento-co .bx-svc { grid-column: 1 / -1; } }
@media (min-width: 1080px) {
  .bento-co { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .bx-ramp { grid-column: 1 / 5; } .bento-co .bx-iaas { grid-column: 5 / 7; grid-row: auto; }
  .bx-pool { grid-column: 1 / 4; } .bx-metrics-co { grid-column: 4 / 7; }
  .bento-co .bx-svc { grid-column: 1 / -1; }
}
/* the nudge */
.nudge { position: fixed; z-index: 60; left: calc(var(--frame) + 8px); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 14px; max-width: min(520px, calc(100vw - 2 * var(--frame) - 70px)); padding: 10px 10px 10px 16px; border-radius: 18px; background: rgb(var(--bg-rgb) / .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgb(187 98 222 / .45), 0 20px 60px -20px rgb(187 98 222 / .5); font-size: .8125rem; line-height: 1.4; color: var(--fg-2); opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.nudge.on { opacity: 1; transform: none; }
.nudge.on.quiet { opacity: 0; transform: translateY(12px); pointer-events: none; }
.nudge b { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.nudge .btn { flex: none; }
.nudge-x { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--fg-3); cursor: pointer; }
.nudge-x svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.nudge-x:hover { background: var(--surface-2); color: var(--fg); }
@media (max-width: 600px) { .nudge { flex-wrap: wrap; gap: 10px; } .nudge p { flex-basis: calc(100% - 40px); } }

/* ---------- Revision 15: white, with iOS-style glass ---------- */
/* Light is the default. The page sits on a soft fixed mesh of orchid, lavender and warm
   white, so frosted panels have colour to blur. The network is drawn only inside its
   panels (the engine clips to them), so sections can be fully transparent. */
:root:not([data-theme="dark"]) {
  --glass-bg: linear-gradient(140deg, rgb(255 255 255 / .66), rgb(255 255 255 / .34));
  --glass-blur: blur(28px) saturate(185%);
  --glass-edge: inset 0 0 0 1px rgb(255 255 255 / .75), inset 0 1px 0 rgb(255 255 255 / .95), inset 0 -1px 0 rgb(255 255 255 / .35);
  --glass-shadow: 0 24px 60px -30px rgb(138 60 176 / .38), 0 2px 8px rgb(26 26 26 / .04);
}
:root:not([data-theme="dark"]) body::before {
  background:
    radial-gradient(42% 38% at 88% 8%, rgb(187 98 222 / .42), transparent 70%),
    radial-gradient(38% 34% at 6% 36%, rgb(138 60 176 / .22), transparent 70%),
    radial-gradient(40% 40% at 70% 62%, rgb(187 98 222 / .26), transparent 70%),
    radial-gradient(50% 40% at 18% 96%, rgb(187 98 222 / .3), transparent 70%),
    radial-gradient(60% 50% at 50% 40%, rgb(247 245 238 / 1), transparent 80%),
    var(--white);
}
:root:not([data-theme="dark"]) :is(.section, .strip, .closing, .network, .hero) { background: transparent; }
:root:not([data-theme="dark"]) .panel { box-shadow: var(--glass-edge), var(--glass-shadow); background: linear-gradient(rgb(26 26 26 / .035) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(90deg, rgb(26 26 26 / .035) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(160deg, rgb(255 255 255 / .55), rgb(255 255 255 / .2)); }
:root:not([data-theme="dark"]) :is(.bx, .bx-svc, .bx-batch, .car-line .car-card, .story, .dots-fig, .sides-table, .uni-card, .door, .foot-card, .faq-list, .voice, .loop-fig .loop-glass) {
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), var(--glass-shadow);
}
:root:not([data-theme="dark"]) :is(.switch, .hero-badge, .chapter, .nudge, .car-btn, .btn-ghost, .iaas-modes li, .tracks li, .bt-col, .stream-label, .nav-toggle, .annc) {
  background: rgb(255 255 255 / .55); -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .8), 0 8px 24px -14px rgb(138 60 176 / .35);
}
:root:not([data-theme="dark"]) .nav-bar::before { background: rgb(255 255 255 / .55); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); box-shadow: 0 1px 0 rgb(255 255 255 / .8), 0 10px 30px -20px rgb(138 60 176 / .3); }
:root:not([data-theme="dark"]) .annc { box-shadow: inset 0 -1px 0 rgb(255 255 255 / .8); }
:root:not([data-theme="dark"]) .switch-thumb { background: var(--ink); }
:root:not([data-theme="dark"])[data-aud="company"] .switch-thumb { background: var(--purple); }
:root[data-aud="company"]:not([data-theme="dark"]) .switch button[aria-pressed="true"] { color: var(--ink); }
:root:not([data-theme="dark"]) .car-line .car-card[aria-hidden="false"], :root:not([data-theme="dark"]) .door:hover, :root:not([data-theme="dark"]) .bx:hover { box-shadow: inset 0 0 0 1.5px rgb(187 98 222 / .6), inset 0 1px 0 rgb(255 255 255 / .95), 0 30px 70px -30px rgb(187 98 222 / .55); }
:root:not([data-theme="dark"]) .cc-fig { background: linear-gradient(rgb(26 26 26 / .04) 1px, transparent 1px) 0 0 / 16px 16px, linear-gradient(90deg, rgb(26 26 26 / .04) 1px, transparent 1px) 0 0 / 16px 16px, rgb(255 255 255 / .4); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .8); }
:root:not([data-theme="dark"]) .bt-you { background: rgb(187 98 222 / .1); box-shadow: inset 0 0 0 1px rgb(187 98 222 / .5); }
:root:not([data-theme="dark"]) .media-card::after { background: linear-gradient(transparent 50%, rgb(255 255 255 / .9)); }
:root:not([data-theme="dark"]) .lp-pulse { fill: var(--purple); filter: drop-shadow(0 0 6px rgb(187 98 222 / .9)); }
:root:not([data-theme="dark"]) .node-horizon { background: transparent; }
:root:not([data-theme="dark"]) .faq-list { border-top: 0; border-radius: var(--r-card); padding: 4px 24px; }
:root:not([data-theme="dark"]) .faq-list details:last-child { border-bottom: 0; }
:root:not([data-theme="dark"]) .ticker-group b, :root:not([data-theme="dark"]) .kicker, :root:not([data-theme="dark"]) .bx-tag, :root:not([data-theme="dark"]) .cc-n { color: var(--purple-deep); }
:root:not([data-theme="dark"]) .cc-n b { color: var(--fg); }
:root:not([data-theme="dark"]) .acc { background: linear-gradient(100deg, var(--purple-deep), var(--purple) 60%); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root:not([data-theme="dark"]) .btn-pill { box-shadow: inset 0 1px 0 rgb(255 255 255 / .4), 0 12px 30px -10px rgb(187 98 222 / .75); }
:root:not([data-theme="dark"]) .us-n { background: var(--white); }
:root:not([data-theme="dark"]) .net-seq::before { background: radial-gradient(closest-side, rgb(255 255 255 / .92), rgb(255 255 255 / .7) 55%, rgb(255 255 255 / 0)); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root:not([data-theme="dark"]) :is(.bx, .car-line .car-card, .story, .dots-fig, .sides-table, .uni-card, .door, .foot-card, .faq-list, .voice) { background: rgb(255 255 255 / .9); }
}

/* in their words: two rows of quotes drifting in opposite directions */
.words { overflow-x: clip; }
.wall { display: grid; gap: 16px; margin-top: clamp(36px, 5vw, 60px); -webkit-mask: linear-gradient(90deg, transparent, var(--ink) 8%, var(--ink) 92%, transparent); mask: linear-gradient(90deg, transparent, var(--ink) 8%, var(--ink) 92%, transparent); }
.wall-row { display: flex; width: max-content; animation: wall 90s linear infinite; }
.wall-rev { animation-direction: reverse; animation-duration: 110s; }
.wall:hover .wall-row, .motion-paused .wall-row { animation-play-state: paused; }
@keyframes wall { to { transform: translateX(-50%); } }
.wall-track { display: flex; gap: 16px; padding-right: 16px; }
.voice { width: 340px; flex: none; margin: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 22px 22px 18px; border-radius: 22px; box-shadow: inset 0 0 0 1px var(--rule); background: var(--surface); }
.voice blockquote p { font: 400 1.0625rem/1.4 var(--font-display); letter-spacing: -.01em; color: var(--fg); }
.voice blockquote p::before { content: "\201C"; color: var(--purple); margin-right: 2px; }
.voice figcaption { display: flex; align-items: center; gap: 12px; }
.v-av, .vp-av { flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: rgb(187 98 222 / .18); box-shadow: 0 0 0 2px rgb(255 255 255 / .9), 0 0 0 3px rgb(187 98 222 / .45); font: 600 .75rem var(--font-body); color: var(--purple-deep); }
.v-av img, .vp-av img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.v-who { display: grid; line-height: 1.3; }
.v-who b { font-size: .875rem; font-weight: 600; }
.v-who small, .vp-body small { font-size: .75rem; color: var(--fg-3); }
@media (prefers-reduced-motion: reduce) { .wall-row { animation: none; } .wall { overflow-x: auto; } }

/* the popup */
.voice-pop { position: fixed; z-index: 61; right: calc(var(--frame) + 8px); bottom: calc(70px + env(safe-area-inset-bottom, 0px)); width: min(360px, calc(100vw - 2 * var(--frame) - 16px)); display: flex; align-items: flex-start; gap: 14px; padding: 16px 14px 16px 16px; border-radius: 20px; background: rgb(var(--bg-rgb) / .72); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); box-shadow: inset 0 0 0 1px rgb(var(--bg-rgb) / .8), 0 30px 60px -28px rgb(138 60 176 / .55); opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .55s var(--ease-out), transform .55s var(--ease-out); pointer-events: none; }
.voice-pop.on { opacity: 1; transform: none; pointer-events: auto; }
.vp-body { display: grid; gap: 4px; min-width: 0; }
.vp-body q { quotes: none; font: 400 .9375rem/1.4 var(--font-display); color: var(--fg); }
.vp-body q::before { content: "\201C"; color: var(--purple); }
.vp-body b { margin-top: 4px; font-size: .8125rem; font-weight: 600; }
.vp-x { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--fg-3); cursor: pointer; }
.vp-x svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.vp-x:hover { background: var(--surface-2); color: var(--fg); }
.voice-on .nudge.on { opacity: 0; pointer-events: none; }
@media (max-width: 600px) { .voice-pop { right: var(--frame); left: var(--frame); width: auto; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); } .voice { width: 280px; } }
:root:not([data-theme="dark"]) .fig-n { color: var(--purple-deep); }

/* ================= Revision 16: alternating bands, one network, one call to action ================= */
/* --- the bands: white, then black, then white... The black is painted behind the network
   (in .bands, positioned by JS), so the network runs through every band without a break. */
.bands { position: absolute; left: 0; top: 0; width: 100%; height: 0; z-index: -1; pointer-events: none; }
.bands i { position: absolute; left: 0; right: 0; background:
  radial-gradient(60% 50% at 85% 10%, rgb(187 98 222 / .22), transparent 70%),
  radial-gradient(50% 45% at 8% 90%, rgb(138 60 176 / .2), transparent 70%),
  var(--ink);
  left: var(--frame); right: var(--frame); border-radius: 40px;
  box-shadow: inset 0 1px 0 rgb(247 245 238 / .08), 0 50px 90px -50px rgb(26 26 26 / .45); }
@media (max-width: 767px) { .bands i { border-radius: 28px; } }
.band-dark, .nav.on-dark {
  --fg-rgb: 247 245 238; --bg-rgb: 26 26 26;
  --fg: var(--beige); --fg-2: rgb(247 245 238 / .76); --fg-3: rgb(247 245 238 / .6);
  --rule: rgb(247 245 238 / .12); --rule-2: rgb(247 245 238 / .22);
  --surface: rgb(247 245 238 / .05); --surface-2: rgb(247 245 238 / .09); --bg: var(--ink);
  --glass-bg: linear-gradient(140deg, rgb(247 245 238 / .1), rgb(247 245 238 / .03));
  --glass-edge: inset 0 0 0 1px rgb(247 245 238 / .14), inset 0 1px 0 rgb(247 245 238 / .22);
  --glass-shadow: 0 30px 70px -30px rgb(26 26 26 / .9);
  color: var(--fg);
}
:root:not([data-theme="dark"]) .band-dark :is(.tracks li, .bt-col, .iaas-modes li, .car-btn) { background: rgb(247 245 238 / .06); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgb(247 245 238 / .12); }
:root:not([data-theme="dark"]) .band-dark :is(.kicker, .bx-tag, .cc-n) { color: var(--purple); }
:root:not([data-theme="dark"]) .band-dark .panel { box-shadow: inset 0 0 0 1px rgb(247 245 238 / .12); background: linear-gradient(rgb(247 245 238 / .03) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(90deg, rgb(247 245 238 / .03) 1px, transparent 1px) 0 0 / 56px 56px; }
:root:not([data-theme="dark"]) .band-dark .net-seq::before { background: radial-gradient(closest-side, rgb(26 26 26 / .85), rgb(26 26 26 / .5) 55%, rgb(26 26 26 / 0)); }
:root:not([data-theme="dark"]) .footer { background: transparent; }
:root:not([data-theme="dark"]) .band-dark .bt-you { background: rgb(187 98 222 / .14); box-shadow: inset 0 0 0 1px rgb(187 98 222 / .5); }
.band-dark .months i:not(.opt) { background: linear-gradient(var(--purple), var(--purple-deep)); box-shadow: 0 0 10px rgb(187 98 222 / .45); }
/* sections no longer carry eyebrow headers */
.kicker, .kn { display: none; }

/* --- the loading moment: two seconds on black */
.boot-veil { position: fixed; inset: 0; z-index: 70; background: var(--ink); opacity: 0; pointer-events: none; transition: opacity .7s var(--ease-out); }
.boot .boot-veil { opacity: 1; }
.boot .stage-canvas { z-index: 71; opacity: 1; }
.boot main, .boot .nav, .boot .footer { opacity: 0; }
main, .nav, .footer { transition: opacity .6s var(--ease-out); }
.boot { overflow: hidden; }
/* the legend appears with the people, then steps aside */
.js .legend { opacity: 0; transform: translateY(6px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.legend-on .legend { opacity: 1; transform: none; }

/* --- the nav stays put */
.nav { transform: none !important; }
.nav-bar::before { opacity: 1; }
.hero { padding-top: calc(76px + var(--frame)); }
.hero-panel { min-height: calc(100svh - 76px - 2 * var(--frame)); }

/* --- the one call to action, with a little life: a sheen that sweeps, a soft pulse ring */
.btn-cta { position: relative; overflow: visible; isolation: isolate; }
.btn-cta .cta-shine { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: -1; }
.btn-cta .cta-shine::before { content: ""; position: absolute; top: -20%; bottom: -20%; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgb(255 255 255 / .55), transparent); transform: skewX(-20deg); animation: shine 3.2s var(--ease-in-out) infinite; }
.btn-cta::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgb(187 98 222 / .55); animation: ring 2.6s var(--ease-out) infinite; pointer-events: none; z-index: -2; }
.btn-cta .arr { animation: nudge-arr 2.6s var(--ease-in-out) infinite; }
@keyframes shine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgb(187 98 222 / .5); } 70%, 100% { box-shadow: 0 0 0 14px rgb(187 98 222 / 0); } }
@keyframes nudge-arr { 0%, 70%, 100% { transform: none; } 80% { transform: translateX(4px); } 90% { transform: translateX(0); } }
.motion-paused .btn-cta::after, .motion-paused .btn-cta .cta-shine::before, .motion-paused .btn-cta .arr { animation-play-state: paused; }

/* --- Proof of Work, as a brand mark wherever it appears in text */
.pow { font-weight: 600; white-space: nowrap; background: linear-gradient(100deg, var(--purple-deep), var(--purple)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pow::before { content: ""; display: inline-block; width: .5em; height: .5em; margin: 0 .3em .08em 0; border-radius: 2px; background: var(--purple); box-shadow: 0 0 0 2px rgb(187 98 222 / .2); transform: rotate(45deg); }
.band-dark .pow { background: linear-gradient(100deg, var(--purple), #f7f5ee 160%); -webkit-background-clip: text; background-clip: text; }

/* --- section 2 */
.what { padding-top: clamp(56px, 7vw, 96px); }
.what .ticker { margin-bottom: clamp(56px, 7vw, 96px); }
.ticker-group b { font-family: var(--font-display); font-weight: 400; }
.band-dark .ticker-group b { color: var(--purple); }
/* academy: a real day, with a now line */
.day { position: relative; margin-top: 12px; padding: 14px 16px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); overflow: hidden; }
.day-head { display: flex; justify-content: space-between; margin-bottom: 8px; font: 500 .6875rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.day-clock { color: var(--purple); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.day-list li { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--rule); font-size: .8125rem; color: var(--fg-3); transition: color .4s; }
.day-list li:first-child { border-top: 0; }
.day-list span { font-variant-numeric: tabular-nums; }
.day-list b { font-weight: 500; }
.day-list em { font-style: normal; font-size: .75rem; }
.day-list li.done { color: var(--fg-2); }
.day-list li.on { color: var(--fg); }
.day-list li.on em { color: var(--purple); }
.day-now { position: absolute; left: 0; right: 0; top: calc(34px + var(--now, 0) * (100% - 44px)); height: 1px; background: linear-gradient(90deg, var(--purple), transparent); box-shadow: 0 0 8px rgb(187 98 222 / .8); }
.bx-academy .tracks { margin-top: 12px; }
/* metrics: a dashboard cycling through metrics */
.mt { margin-top: 10px; padding: 14px 16px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); }
.mt-head { display: flex; justify-content: space-between; font: 500 .6875rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.mt-live { display: inline-flex; align-items: center; gap: 8px; }
.mt-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--purple); animation: blip 1.6s var(--ease-in-out) infinite; }
.mt-list { position: relative; height: 92px; margin-top: 10px; }
.mt-list li { position: absolute; inset: 0; display: grid; grid-template-rows: auto auto auto; align-content: center; opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.mt-list li.on { opacity: 1; transform: none; }
.mt-l { font-size: .8125rem; color: var(--fg-2); }
.mt-v { font: 400 2.25rem/1.1 var(--font-display); letter-spacing: -.03em; color: var(--fg); }
.mt-d { font-size: .75rem; color: var(--purple); }
.mt-spark { display: flex; align-items: flex-end; gap: 4px; height: 36px; margin-top: 8px; }
.mt-spark i { flex: 1; height: var(--h); border-radius: 3px 3px 1px 1px; background: linear-gradient(var(--purple), rgb(187 98 222 / .25)); transform-origin: 50% 100%; animation: spark 2.2s var(--ease-in-out) infinite alternate; }
.mt-spark i:nth-child(odd) { animation-delay: -.7s; }
@keyframes spark { to { transform: scaleY(.72); } }
.motion-paused .mt-spark i { animation-play-state: paused; }
.metric-grid { display: none; }
/* sprint: a board with a card sliding to Shipped */
.kb { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.kb-col { min-height: 120px; padding: 8px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); display: flex; flex-direction: column; gap: 6px; }
.kb-col span { font: 500 .625rem/1.4 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.kb-done span { color: var(--purple); }
.kb-c, .kb-fly { display: block; padding: 7px 8px; border-radius: 8px; font-size: .6875rem; font-style: normal; line-height: 1.3; color: var(--fg); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--rule); }
.kb-c.c4 { box-shadow: inset 0 0 0 1px rgb(187 98 222 / .6); }
.kb-c.c3 { animation: kb-hide 5s var(--ease-in-out) infinite; }
.kb-fly { position: absolute; left: calc(33.3% + 8px); top: 30px; width: calc(33.3% - 22px); opacity: 0; animation: kb-fly 5s var(--ease-in-out) infinite; box-shadow: inset 0 0 0 1px var(--purple), 0 10px 24px -10px rgb(187 98 222 / .8); }
@keyframes kb-hide { 0%, 35% { opacity: 1; } 40%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes kb-fly { 0%, 35% { opacity: 0; transform: none; } 40% { opacity: 1; transform: translate(0, -4px); } 70% { opacity: 1; transform: translate(calc(100% + 16px), 30px); } 95% { opacity: 1; transform: translate(calc(100% + 16px), 30px); } 100% { opacity: 0; transform: translate(calc(100% + 16px), 30px); } }
.motion-paused .kb-fly, .motion-paused .kb-c.c3 { animation-play-state: paused; }
/* capsule: a team you join, months filling */
.cap { margin-top: 10px; }
.cap-team { display: flex; align-items: center; margin-bottom: 14px; }
.face { display: inline-block; width: 30px; height: 30px; border-radius: 50%; background-image: url("/images/network/faces.webp"); background-size: 1600% 1000%; box-shadow: 0 0 0 2px var(--bg); flex: none; }
.cap-team .face { margin-left: -6px; }
.cap-team .face:first-child { margin-left: 0; }
.cap-team span { margin-left: 8px; padding: 4px 10px; border-radius: var(--r-pill); font-size: .75rem; color: var(--purple); box-shadow: inset 0 0 0 1px rgb(187 98 222 / .6); animation: blip-r 2.4s var(--ease-in-out) infinite; }
/* pool: a shortlist that reorders */
.pool { display: grid; gap: 8px; margin-top: 8px; }
.pc { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.pc.out { opacity: 0; transform: translateY(-8px); }
.pc .face { width: 34px; height: 34px; }
.pc b { display: block; font-size: .8125rem; font-weight: 500; }
.pc small { font-size: .6875rem; color: var(--fg-3); }
.pc em { font-style: normal; font-size: .6875rem; color: var(--purple); }
.sample-note { margin-top: 6px; font-size: .6875rem; color: var(--fg-3); }
/* iaas: the three ways in, taking turns */
.iaas-modes li { align-items: flex-start; transition: box-shadow .4s, background-color .4s; }
.iaas-modes li span { display: grid; gap: 2px; }
.iaas-modes li small { font-size: .75rem; color: var(--fg-3); max-height: 0; overflow: hidden; transition: max-height .5s var(--ease-out); }
.iaas-modes li.on { box-shadow: inset 0 0 0 1px rgb(187 98 222 / .7) !important; }
.iaas-modes li.on small { max-height: 3em; }
.js-motion .bx-ramp:not(.seen) .rp-bar i { transform: scaleX(0); }
/* bento layouts, both sides */
@media (min-width: 1080px) {
  .bento.only-student { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .bento.only-student .bx-academy { grid-column: 1 / 4; grid-row: span 2; }
  .bento.only-student .bx-metrics { grid-column: 4 / 7; }
  .bento.only-student .bx-sprint { grid-column: 4 / 7; }
  .bento.only-student .bx-capsule { grid-column: 1 / 4; }
  .bento.only-student .bx-batch { grid-column: 4 / 7; }
  .bento-co .bx-ramp { grid-column: 1 / 5; } .bento-co .bx-metrics { grid-column: 5 / 7; grid-row: span 2; }
  .bento-co .bx-pool { grid-column: 1 / 3; } .bento-co .bx-iaas { grid-column: 3 / 5; }
}

/* --- how it works: the mini interfaces inside each step */
.how { min-height: 100svh; }
.cc-ui { width: 100%; height: 150px; margin-bottom: 10px; border-radius: 14px; background: linear-gradient(rgb(26 26 26 / .035) 1px, transparent 1px) 0 0 / 16px 16px, linear-gradient(90deg, rgb(26 26 26 / .035) 1px, transparent 1px) 0 0 / 16px 16px, rgb(255 255 255 / .45); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .85); position: relative; overflow: hidden; display: grid; place-items: center; }
.car-line .car-card { height: 440px; }
.car-line .car-track { height: 470px; }
.car-card[aria-hidden="true"] .cc-ui * { animation-play-state: paused !important; }
/* 1 train */
.u-train { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; width: 88%; position: relative; }
.u-train svg { width: 96px; height: 96px; transform: rotate(-90deg); }
.ut-track, .ut-fill { fill: none; stroke-width: 8; }
.ut-track { stroke: rgb(26 26 26 / .08); }
.ut-fill { stroke: var(--purple); stroke-linecap: round; stroke-dasharray: 7 24; animation: ut 3s var(--ease-out) infinite; }
@keyframes ut { 0% { stroke-dasharray: 0 24; } 60%, 100% { stroke-dasharray: 7 24; } }
.ut-c { position: absolute; left: 0; width: 96px; display: grid; place-items: center; text-align: center; }
.ut-c b { font: 400 1.4rem/1 var(--font-display); }
.ut-c small { font-size: .625rem; color: var(--fg-3); text-transform: uppercase; letter-spacing: .1em; }
.ut-bars { display: grid; gap: 8px; font-size: .6875rem; color: var(--fg-3); }
.ut-bars i { display: block; height: 6px; margin-bottom: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--purple-deep), var(--purple)) 0 0 / var(--w) 100% no-repeat, rgb(26 26 26 / .08); animation: grow 3s var(--ease-out) infinite; }
@keyframes grow { 0% { background-size: 0 100%, auto; } 60%, 100% { background-size: var(--w) 100%, auto; } }
/* 2 sprint */
.u-sprint { width: 86%; display: grid; gap: 10px; }
.us-timer { display: flex; align-items: center; gap: 8px; font: 500 1.1rem/1 var(--font-body); font-variant-numeric: tabular-nums; }
.us-timer i { width: 8px; height: 8px; border-radius: 50%; background: var(--purple); animation: blip 1s infinite; }
.us-tasks { display: grid; gap: 5px; }
.us-tasks li { position: relative; padding-left: 20px; font-size: .75rem; color: var(--fg-3); animation: task 6s infinite; }
.us-tasks li::before { content: ""; position: absolute; left: 0; top: .25em; width: 11px; height: 11px; border-radius: 3px; box-shadow: inset 0 0 0 1.5px rgb(26 26 26 / .25); }
.us-tasks li:nth-child(1) { animation-delay: 0s; } .us-tasks li:nth-child(2) { animation-delay: .9s; } .us-tasks li:nth-child(3) { animation-delay: 1.8s; } .us-tasks li:nth-child(4) { animation-delay: 2.7s; }
@keyframes task { 0%, 15% { color: var(--fg-3); } 20%, 85% { color: var(--fg); text-decoration: line-through; text-decoration-color: rgb(187 98 222 / .7); } 100% { color: var(--fg-3); } }
.us-tasks li { --c: 0; }
/* 3 capsule */
.u-cap { width: 88%; display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; }
.uc-ring { position: relative; width: 96px; height: 96px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(187 98 222 / .6); animation: spin 18s linear infinite; }
.uc-f { position: absolute; width: 26px; height: 26px; }
.uc-f.f1 { left: 35px; top: -13px; } .uc-f.f2 { right: -13px; top: 35px; } .uc-f.f3 { left: 35px; bottom: -13px; } .uc-f.f4 { left: -13px; top: 35px; }
.uc-you { position: absolute; inset: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--purple); color: var(--ink); font-size: .625rem; font-weight: 600; animation: spin 18s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.uc-graph { display: flex; align-items: flex-end; gap: 4px; height: 80px; }
.uc-graph i { flex: 1; height: var(--h); border-radius: 3px; background: linear-gradient(var(--purple), rgb(187 98 222 / .3)); transform-origin: 50% 100%; animation: rise 3.4s var(--ease-out) infinite; animation-delay: var(--d); }
@keyframes rise { 0% { transform: scaleY(0); } 40%, 100% { transform: none; } }
/* 4 proof of work */
.u-pow { width: 86%; display: grid; gap: 8px; position: relative; }
.up-head { display: flex; gap: 10px; align-items: center; }
.up-head b { display: block; font-size: .8125rem; }
.up-head small { font-size: .6875rem; color: var(--fg-3); }
.up-list li { padding: 5px 0 5px 18px; position: relative; font-size: .75rem; border-top: 1px solid var(--rule); opacity: 0; animation: appear 5s var(--ease-out) infinite; }
.up-list li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 8px; height: 8px; border-radius: 50%; background: var(--purple); }
.up-list li:nth-child(2) { animation-delay: .6s; } .up-list li:nth-child(3) { animation-delay: 1.2s; }
@keyframes appear { 0% { opacity: 0; transform: translateX(-6px); } 15%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.up-badge { position: absolute; right: 0; top: 2px; padding: 4px 9px; border-radius: var(--r-pill); font-size: .625rem; font-weight: 600; background: var(--purple); color: var(--ink); animation: blip-r 2.4s infinite; }
/* 5 day 0 */
.u-day0 { position: relative; width: 86%; display: flex; gap: 14px; align-items: center; }
.ud-cal { width: 78px; height: 86px; border-radius: 14px; background: var(--white); box-shadow: 0 10px 30px -14px rgb(138 60 176 / .5), inset 0 0 0 1px rgb(26 26 26 / .06); display: grid; place-items: center; align-content: center; overflow: hidden; }
.ud-cal span { width: 100%; text-align: center; padding: 3px 0; font-size: .625rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--white); background: var(--purple); }
.ud-cal b { font: 400 2.6rem/1.2 var(--font-display); }
.ud-card { flex: 1; display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; background: rgb(255 255 255 / .7); box-shadow: inset 0 0 0 1px rgb(187 98 222 / .5); }
.ud-card b { display: block; font-size: .8125rem; }
.ud-card small { font-size: .6875rem; color: var(--fg-3); }
.ud-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 0 4px rgb(187 98 222 / .2); flex: none; }
.ud-burst { position: absolute; left: 39px; top: 50%; pointer-events: none; }
.ud-burst i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--purple); transform: rotate(var(--a)) translateX(0); animation: burst 2.4s var(--ease-out) infinite; }
@keyframes burst { 0% { transform: rotate(var(--a)) translateX(0); opacity: 1; } 70%, 100% { transform: rotate(var(--a)) translateX(64px); opacity: 0; } }
/* company: call, shortlist, model, tools, ramp */
.u-call { width: 86%; display: flex; gap: 12px; align-items: center; position: relative; }
.uq-cal { width: 64px; height: 70px; border-radius: 12px; background: var(--white); box-shadow: inset 0 0 0 1px rgb(26 26 26 / .08); display: grid; place-items: center; align-content: center; }
.uq-cal span { font-size: .625rem; color: var(--purple-deep); font-weight: 600; text-transform: uppercase; }
.uq-cal b { font: 400 1.8rem/1 var(--font-display); }
.uq-slot b { display: block; font-size: .8125rem; }
.uq-slot small { font-size: .6875rem; color: var(--fg-3); }
.uq-ok { position: absolute; right: 0; top: -10px; padding: 3px 9px; border-radius: var(--r-pill); font-size: .625rem; font-weight: 600; background: var(--purple); color: var(--ink); animation: pop 3s var(--ease-out) infinite; }
@keyframes pop { 0%, 30% { transform: scale(0); } 40% { transform: scale(1.15); } 50%, 100% { transform: none; } }
.u-short { width: 88%; display: grid; gap: 6px; }
.u-short li { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 10px; background: rgb(255 255 255 / .7); box-shadow: inset 0 0 0 1px rgb(26 26 26 / .06); opacity: 0; animation: appear 4.5s var(--ease-out) infinite; animation-delay: var(--d); }
.u-short .face { width: 28px; height: 28px; }
.u-short b { font-size: .75rem; display: block; } .u-short small { font-size: .625rem; color: var(--fg-3); }
.u-short em { font-style: normal; font-size: .75rem; font-weight: 600; color: var(--purple-deep); }
.u-model { width: 88%; display: grid; gap: 8px; }
.um-o { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; font-size: .75rem; background: rgb(255 255 255 / .7); box-shadow: inset 0 0 0 1px rgb(26 26 26 / .06); animation: pick 6s infinite; }
.um-o b { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: rgb(187 98 222 / .2); font-size: .6875rem; }
.um-o.o2 { animation-delay: 2s; } .um-o.o3 { animation-delay: 4s; }
@keyframes pick { 0%, 30% { box-shadow: inset 0 0 0 1.5px var(--purple); } 34%, 100% { box-shadow: inset 0 0 0 1px rgb(26 26 26 / .06); } }
.u-tools { position: relative; width: 88%; height: 120px; }
.u-tools svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.u-tools path { fill: none; stroke: var(--purple); stroke-width: 1.2; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; animation: dash 1.2s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -18; } }
.ut-t { position: absolute; z-index: 1; padding: 4px 9px; border-radius: 8px; font-size: .6875rem; background: var(--white); box-shadow: inset 0 0 0 1px rgb(26 26 26 / .08); }
.ut-t.t1 { left: 0; top: 6px; } .ut-t.t2 { right: 0; top: 6px; } .ut-t.t3 { left: 0; bottom: 6px; } .ut-t.t4 { right: 0; bottom: 6px; }
.ut-core { position: absolute; z-index: 1; left: 50%; top: 50%; translate: -50% -50%; padding: 8px 12px; border-radius: var(--r-pill); background: var(--purple); color: var(--ink); font-style: normal; font-size: .75rem; font-weight: 600; animation: blip-r 2s infinite; }
.u-ramp { position: relative; width: 88%; height: 120px; }
.u-ramp svg { width: 100%; height: 100%; }
.ur-fresh, .ur-ab { fill: none; stroke-width: 2.4; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 320; animation: drawl 3.4s var(--ease-out) infinite; }
.ur-fresh { stroke: rgb(26 26 26 / .3); stroke-dasharray: 4 6; animation: none; }
.ur-ab { stroke: var(--purple); }
@keyframes drawl { 0% { stroke-dashoffset: 320; } 60%, 100% { stroke-dashoffset: 0; } }
.ur-l1, .ur-l2 { position: absolute; font-size: .625rem; }
.ur-l1 { left: 18%; top: 6%; color: var(--purple-deep); font-weight: 600; } .ur-l2 { right: 2%; bottom: 46%; color: var(--fg-3); }
.motion-paused .cc-ui * { animation-play-state: paused !important; }

/* --- the network: a timeline, one line arriving at a time */
.js-motion .net-line.wait { opacity: 0; transform: translateY(14px); }
.net-key { display: none; }

/* --- the three-body problem */
.tb-grid { display: grid; gap: var(--s-12); align-items: center; }
.tb-list { margin-top: var(--s-8); display: grid; gap: 0; border-top: 1px solid var(--rule); }
.tb-list li { display: grid; grid-template-columns: 14px 110px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.tb-list b { font-weight: 600; font-size: .875rem; }
.tb-list span { color: var(--fg-2); font-size: var(--t-small); }
.tb-k { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 3px rgb(187 98 222 / .15); }
.tb-k.k1 { background: var(--purple); } .tb-k.k2 { background: var(--ink); } .tb-k.k3 { background: var(--purple-deep); }
.tb-stage { position: relative; aspect-ratio: 1.15; width: 100%; max-width: 620px; justify-self: center; border-radius: var(--r-panel); background: var(--glass-bg); box-shadow: var(--glass-edge), var(--glass-shadow); }
.tb-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.tb-core { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; translate: -50% -50%; border-radius: 16px; box-shadow: 0 0 0 10px rgb(187 98 222 / .14), 0 0 40px 10px rgb(187 98 222 / .35); animation: core 3.2s var(--ease-in-out) infinite; }
@keyframes core { 50% { box-shadow: 0 0 0 18px rgb(187 98 222 / .06), 0 0 60px 16px rgb(187 98 222 / .45); } }
@media (min-width: 960px) { .tb-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(48px, 6vw, 96px); } }

/* --- proof: the sample profile */
.pf { padding: clamp(20px, 2.6vw, 30px); border-radius: var(--r-card); background: var(--glass-bg); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); box-shadow: var(--glass-edge), var(--glass-shadow); }
.pf-head { display: flex; align-items: center; gap: 14px; }
.pf-av { width: 52px; height: 52px; box-shadow: 0 0 0 2px var(--purple); }
.pf-who { flex: 1; display: grid; }
.pf-who b { font: 400 1.5rem/1.1 var(--font-display); }
.pf-who small { font-size: .8125rem; color: var(--fg-3); }
.pf-ready { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--r-pill); font-size: .75rem; font-weight: 600; color: var(--ink); background: var(--purple); }
.pf-ready i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); animation: blip 1.6s infinite; }
.pf-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0; }
.pf-stat { padding: 12px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); }
.pf-stat b { display: block; font: 400 1.6rem/1.1 var(--font-display); color: var(--fg); }
.pf-stat small { font-size: .75rem; color: var(--fg-3); }
.pf-feed li { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 11px 0; border-top: 1px solid var(--rule); font-size: .875rem; opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.pf.seen .pf-feed li { opacity: 1; transform: none; }
.pf-feed li:nth-child(2) { transition-delay: .15s; } .pf-feed li:nth-child(3) { transition-delay: .3s; } .pf-feed li:nth-child(4) { transition-delay: .45s; }
.pf-d { font-size: .75rem; color: var(--fg-3); }
.pf-feed b { font-weight: 500; }
.pf-feed em { font-style: normal; font-size: .6875rem; color: var(--purple); }
.pf-heat { display: grid; grid-template-columns: repeat(28, 1fr); gap: 3px; margin-top: 14px; }
.pf-heat i { aspect-ratio: 1; border-radius: 2px; background: rgb(247 245 238 / .08); }
.pf-heat .h1 { background: rgb(187 98 222 / .25); } .pf-heat .h2 { background: rgb(187 98 222 / .45); } .pf-heat .h3 { background: rgb(187 98 222 / .7); } .pf-heat .h4 { background: var(--purple); }
.pf-note { margin-top: 14px; font-size: .75rem; color: var(--fg-3); }
.proof-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: var(--s-8); }
.proof-nums b { display: block; font: 400 clamp(2.4rem, 2rem + 2vw, 3.6rem)/1 var(--font-display); letter-spacing: -.04em; color: var(--purple); }
.proof-nums span { font-size: .875rem; color: var(--fg-2); }
.dots-fig figcaption { display: block; }

/* --- your path: a line with a travelling marker */
.path-track { position: relative; margin-top: clamp(40px, 6vw, 72px); --p: 0; }
.pt-line { position: absolute; left: 12.5%; right: 12.5%; top: 9px; height: 2px; border-radius: 2px; background: var(--rule-2); }
.pt-fill { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--p)); background: linear-gradient(90deg, var(--purple-deep), var(--purple)); border-radius: 2px; }
.pt-you { position: absolute; top: 50%; left: calc(var(--p) * 100%); translate: -50% -50%; padding: 4px 10px; border-radius: var(--r-pill); font-size: .6875rem; font-weight: 600; color: var(--ink); background: var(--purple); box-shadow: 0 0 0 5px rgb(187 98 222 / .2), 0 8px 20px -6px rgb(187 98 222 / .8); white-space: nowrap; z-index: 2; }
.pt-stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ps { position: relative; display: grid; justify-items: center; text-align: center; gap: 8px; padding-top: 40px; opacity: .45; transform: translateY(8px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.ps.on { opacity: 1; transform: none; }
.ps-node { position: absolute; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 2px var(--rule-2); transition: background-color .4s, box-shadow .4s; }
.ps.on .ps-node { background: var(--purple); box-shadow: 0 0 0 5px rgb(187 98 222 / .2); }
.ps-ill { width: 100%; max-width: 220px; aspect-ratio: 4 / 3; display: grid; place-items: center; border-radius: 18px; background: var(--glass-bg); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); box-shadow: var(--glass-edge), var(--glass-shadow); }
.ps-ill svg { width: 70%; overflow: visible; }
.pi-loop, .pi-line, .pi-ring, .pi-up { fill: none; stroke: var(--purple); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pi-loop { stroke: rgb(26 26 26 / .25); stroke-dasharray: 3 4; }
.pi-dot { fill: var(--purple); }
.pi-line, .pi-up { stroke-dasharray: 200; stroke-dashoffset: 200; transition: stroke-dashoffset 1.4s var(--ease-out); }
.ps.on .pi-line, .ps.on .pi-up { stroke-dashoffset: 0; }
.pi-ring { stroke: rgb(187 98 222 / .5); stroke-width: 1.2; }
.pi-n { fill: rgb(26 26 26 / .5); } .pi-you { fill: var(--purple); }
.ps.on .pi-you { animation: blip-r 2s infinite; }
.ps-k { font-size: .6875rem; letter-spacing: .12em; color: var(--fg-3); }
.ps b { font: 400 1.5rem/1.1 var(--font-display); letter-spacing: -.02em; }
.ps p { font-size: .875rem; color: var(--fg-2); max-width: 28ch; }
@media (max-width: 860px) {
  .pt-line { left: 7px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .pt-fill { transform-origin: 50% 0; transform: scaleY(var(--p)); }
  .pt-you { left: 50%; top: calc(var(--p) * 100%); }
  .pt-stages { grid-template-columns: 1fr; padding-left: 36px; }
  .ps { justify-items: start; text-align: left; padding-top: 0; }
  .ps-node { left: -36px; top: 0; }
  .ps-ill { max-width: 180px; }
}

/* --- closing: the team as nodes around the call to action */
.closing { padding: var(--section) 0; text-align: center; }
.vnet { position: relative; height: clamp(560px, 70vw, 720px); margin-top: clamp(24px, 4vw, 48px); }
.vnet-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vnet-lines line { stroke: rgb(247 245 238 / .1); stroke-width: 1; transition: stroke .5s; }
.vnet-lines line.ring { stroke: rgb(187 98 222 / .25); stroke-dasharray: 2 4; }
.vnet-lines line.on { stroke: var(--purple); stroke-width: 1.5; }
.vn { position: absolute; width: 56px; height: 56px; translate: -50% -50%; padding: 0; border: 0; border-radius: 50%; overflow: hidden; cursor: pointer; background: rgb(187 98 222 / .25); box-shadow: 0 0 0 2px rgb(247 245 238 / .2); transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out); animation: floaty 6s var(--ease-in-out) infinite; }
.vn:nth-child(odd) { animation-duration: 7.5s; animation-delay: -2s; }
.vn img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: grayscale(.5); transition: filter .4s; }
.vn span { display: grid; place-items: center; height: 100%; font-size: .75rem; font-weight: 600; color: var(--beige); }
.vn.on, .vn:hover { transform: scale(1.25); box-shadow: 0 0 0 3px var(--purple), 0 0 30px 6px rgb(187 98 222 / .5); z-index: 2; }
.vn.on img, .vn:hover img { filter: none; }
@keyframes floaty { 50% { margin-top: -8px; } }
.motion-paused .vn { animation-play-state: paused; }
.vnet-core { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: min(440px, 64%); display: grid; justify-items: center; gap: 18px; padding: 26px; border-radius: 28px; background: var(--glass-bg); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); box-shadow: var(--glass-edge), var(--glass-shadow); }
.vq-wrap { position: relative; width: 100%; min-height: 150px; }
.vq { position: absolute; inset: 0; margin: 0; display: grid; align-content: center; gap: 10px; opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.vq.on { opacity: 1; transform: none; }
.vq p { font: 400 clamp(1.05rem, .95rem + .4vw, 1.3rem)/1.4 var(--font-display); color: var(--fg); }
.vq p::before { content: "\201C"; color: var(--purple); }
.vq footer { font-size: .75rem; color: var(--fg-3); }
.vq footer b { display: block; font-size: .875rem; color: var(--fg); font-weight: 600; }
.close-stake { margin: 0; font-size: .9375rem; color: var(--fg-2); }
@media (max-width: 700px) { .vnet { height: 680px; } .vn { width: 40px; height: 40px; } .vnet-core { width: 76%; padding: 18px; } .vq-wrap { min-height: 190px; } }

/* --- the reminder: translucent, so it never hides the page */
:root:not([data-theme="dark"]) .nudge { background: rgb(255 255 255 / .42); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .7), 0 16px 40px -20px rgb(138 60 176 / .45); color: var(--ink); }
.nudge b { color: var(--ink); }
.nudge .pow, .nudge b:first-of-type { color: var(--purple-deep); }

/* --- footer, clearer */
.foot-card { margin-top: var(--s-12) !important; }
.foot-top { display: grid; gap: 24px; padding-bottom: var(--s-8); margin-bottom: var(--s-8); border-bottom: 1px solid var(--rule); }
.foot-about p { max-width: 46ch; color: var(--fg-2); }
.foot-cta { display: grid; gap: 12px; justify-items: start; }
.foot-cta p { font: 400 1.5rem/1.2 var(--font-display); letter-spacing: -.02em; }
.foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.foot-col h2 { color: var(--fg); }
.foot-col a { color: var(--fg-2); }
@media (min-width: 900px) { .foot-top { grid-template-columns: 1.4fr 1fr; align-items: end; } .foot-cta { justify-items: end; text-align: right; } }
@media (max-width: 600px) { .foot-grid { grid-template-columns: 1fr 1fr !important; } }

/* --- polish: chips keep their height, the nav turns dark glass over the black bands */
.bx-academy .tracks { flex: none; align-items: flex-start; }
:root:not([data-theme="dark"]) .nav.on-dark .nav-bar::before { background: rgb(26 26 26 / .6); box-shadow: 0 1px 0 rgb(247 245 238 / .1); }
.nav.on-dark .logo-img { filter: invert(1) brightness(1.04); }
.nav .nav-bar::before, .nav .logo-img, .nav-links a { transition: background .4s var(--ease-out), filter .4s var(--ease-out), color .4s var(--ease-out); }
.footer { padding-top: clamp(48px, 6vw, 88px); }
.footer .foot-card { margin-top: 0; }
.pf-stat small { display: block; margin-top: 4px; line-height: 1.35; }
@media (max-width: 600px) { .voice-pop { display: none; } .pf-stat { padding: 10px; } .pf-stat b { font-size: 1.35rem; } }

/* ================= Revision 17 ================= */
/* the loading moment: while the network loads, one neuron pulses where the brain will appear */
.boot-pulse { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 24px 6px rgb(187 98 222 / .55); opacity: 0; }
.boot:not(.brain-on) .boot-pulse { opacity: 1; animation: boot-pulse 1.1s var(--ease-out) infinite; }
@keyframes boot-pulse { 0% { transform: scale(.6); opacity: .4; } 50% { transform: scale(1.25); opacity: 1; } 100% { transform: scale(.6); opacity: .4; } }
/* the network timeline: dots sit exactly on the rail; only the words move */
.net-seq { --rail: 24px; --gap: 30px; grid-template-columns: var(--rail) minmax(0, 1fr); gap: var(--gap); }
.net-fibre { width: 2px; border-radius: 2px; background: rgb(var(--fg-rgb) / .14); }
.net-fibre i { border-radius: 2px; box-shadow: 0 0 12px rgb(187 98 222 / .7); }
.js-motion .net-line, .js-motion .net-line.on, .js-motion .net-line.done, .js-motion .net-line.wait { opacity: 1; transform: none; }
.net-line > span { display: block; transition: opacity .6s var(--ease-out), transform .6s var(--ease-out), color .6s var(--ease-out); }
.js-motion .net-line > span { opacity: .3; }
.js-motion .net-line.done > span { opacity: .55; }
.js-motion .net-line.on > span { opacity: 1; transform: translateX(4px); }
.js-motion .net-line.wait > span { opacity: 0; transform: translateY(12px); }
.net-line::before { left: calc(-1 * (var(--gap) + var(--rail) / 2) - 7px); top: calc(.575em - 7px); width: 14px; height: 14px; background: var(--bg); box-shadow: inset 0 0 0 2px rgb(var(--fg-rgb) / .28); }
.js-motion .net-line.wait::before { box-shadow: inset 0 0 0 2px rgb(var(--fg-rgb) / .14); }
.js-motion .net-line.done::before { background: var(--purple-deep); box-shadow: inset 0 0 0 2px var(--purple-deep); }
.js-motion .net-line.on::before { background: var(--purple); box-shadow: 0 0 0 6px rgb(187 98 222 / .18), 0 0 18px rgb(187 98 222 / .9); animation: rail-pulse 1.8s var(--ease-out) infinite; }
@keyframes rail-pulse { 50% { box-shadow: 0 0 0 11px rgb(187 98 222 / .06), 0 0 24px rgb(187 98 222 / .9); } }
.tb-stage { aspect-ratio: 1.25; overflow: hidden; }

/* ---------- shared: an app window (title bar, three dots, body) ---------- */
.win { position: relative; border-radius: 16px; overflow: hidden; color: var(--fg); font-size: .8125rem; background: rgb(var(--bg-rgb) / .78); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); box-shadow: inset 0 0 0 1px var(--rule), 0 1px 0 rgb(255 255 255 / .6), 0 28px 60px -34px rgb(26 26 26 / .4); }
.band-dark .win, .band-dark .pw, .band-dark .tr { background: linear-gradient(rgb(247 245 238 / .065), rgb(247 245 238 / .025)); box-shadow: inset 0 0 0 1px rgb(247 245 238 / .1), inset 0 1px 0 rgb(247 245 238 / .12), 0 30px 70px -36px rgb(26 26 26 / .7); }
.win-bar { position: relative; display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 14px; border-bottom: 1px solid var(--rule); background: rgb(var(--fg-rgb) / .025); }
.win-dots { display: inline-flex; gap: 6px; flex: none; }
.win-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgb(var(--fg-rgb) / .16); }
.win-dots i:first-child { background: var(--purple); } .win-dots i:nth-child(2) { background: var(--purple-deep); opacity: .7; }
.win-t { position: absolute; left: 50%; translate: -50% 0; max-width: 62%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .71875rem; letter-spacing: .01em; color: var(--fg-3); }
.win-step { margin-left: auto; font-size: .6875rem; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.win-body { position: relative; padding: 16px; }
.ck, .cx { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.burst i { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--purple); opacity: 0; transform: rotate(var(--a)) translateY(0); }
.burst i:nth-child(3n) { background: var(--purple-deep); width: 4px; height: 4px; }
@keyframes burst { 0% { opacity: 0; transform: rotate(var(--a)) translateY(0) scale(.4); } 20% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-70px) scale(1); } }
.tg { display: inline-block; padding: 2px 7px; border-radius: 6px; font: 600 .625rem/1.5 var(--font-body); letter-spacing: .06em; text-transform: uppercase; font-style: normal; }
.tg.t1 { background: rgb(187 98 222 / .16); color: var(--purple-deep); } .tg.t2 { background: rgb(var(--fg-rgb) / .08); color: var(--fg-2); } .tg.t3 { background: rgb(138 60 176 / .16); color: var(--purple-deep); }
.band-dark .tg.t1, .band-dark .tg.t3 { color: var(--purple); }

/* ---------- 1b. the plain-English explainer ---------- */
.simple { padding-top: clamp(72px, 9vw, 128px); }
.sx-wrap { position: relative; margin-top: clamp(40px, 6vw, 72px); --sx: 0; }
.sx { display: grid; gap: 18px; counter-reset: sx; }
.sx-step { position: relative; display: grid; align-content: start; gap: 8px; padding: 14px 14px 26px; border-radius: 28px; background: var(--glass-bg); box-shadow: var(--glass-edge), var(--glass-shadow); transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out), opacity .6s var(--ease-out); }
.sx-step h3 { padding: 0 12px; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); letter-spacing: -.03em; line-height: 1.05; }
.sx-step p { padding: 0 12px; color: var(--fg-2); font-size: 1.0625rem; line-height: 1.55; max-width: 32ch; }
.sx-n { position: absolute; top: 24px; right: 24px; z-index: 2; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 1px var(--rule-2); font: 400 1rem/1 var(--font-display); color: var(--fg-2); transition: background-color .5s, color .5s, box-shadow .5s; }
.sx-step.on .sx-n { background: var(--purple); color: var(--ink); box-shadow: 0 0 0 6px rgb(187 98 222 / .18); }
.sx-step.on { transform: translateY(-6px); box-shadow: var(--glass-edge), inset 0 0 0 1px rgb(187 98 222 / .45), 0 40px 80px -40px rgb(138 60 176 / .55); }
.sx-vis { position: relative; height: 230px; margin-bottom: 14px; border-radius: 20px; overflow: hidden; background: radial-gradient(80% 70% at 70% 0%, rgb(187 98 222 / .16), transparent 70%), linear-gradient(rgb(26 26 26 / .03) 1px, transparent 1px) 0 0 / 20px 20px, linear-gradient(90deg, rgb(26 26 26 / .03) 1px, transparent 1px) 0 0 / 20px 20px, rgb(255 255 255 / .6); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .9); display: grid; place-items: center; }
.sxv { position: relative; width: min(84%, 300px); }
.sx-rail { display: none; }
@media (min-width: 900px) {
  .sx { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
  .sx-step:not(.on) { opacity: .72; }
  .sx-rail { display: block; position: relative; height: 2px; margin: 0 16.66% 34px; border-radius: 2px; background: rgb(26 26 26 / .1); }
  .sx-fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--sx) * 100%); border-radius: 2px; background: linear-gradient(90deg, var(--purple-deep), var(--purple)); box-shadow: 0 0 10px rgb(187 98 222 / .7); transition: width .9s var(--ease-out); }
  .sx-you { position: absolute; top: 50%; left: calc(var(--sx) * 100%); translate: -50% -50%; padding: 5px 12px; border-radius: 999px; background: var(--purple); color: var(--ink); font: 600 .6875rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 0 0 6px rgb(187 98 222 / .2), 0 8px 20px -6px rgb(138 60 176 / .7); transition: left .9s var(--ease-out); }
}
/* learn: a lesson, a chart drawing itself, a skill popping out */
.sl-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: .75rem; color: var(--fg-3); }
.sl-chip { padding: 4px 10px; border-radius: 999px; background: var(--ink); color: var(--beige); font-size: .6875rem; font-weight: 500; }
.sl-screen { position: relative; height: 110px; border-radius: 14px; background: var(--white); box-shadow: inset 0 0 0 1px var(--rule), 0 14px 30px -18px rgb(26 26 26 / .35); overflow: hidden; }
.sl-screen svg { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); }
.sl-grid { stroke: rgb(26 26 26 / .07); fill: none; }
.sl-line { fill: none; stroke: var(--purple); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 300; stroke-dashoffset: 300; vector-effect: non-scaling-stroke; }
.sl-area { fill: rgb(187 98 222 / .12); opacity: 0; }
.sl-play { position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; translate: -50% -50%; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 8px rgb(26 26 26 / .06); transition: opacity .4s, transform .4s; }
.sl-play::after { content: ""; position: absolute; left: 15px; top: 12px; border-left: 11px solid var(--beige); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.sl-prog { height: 6px; margin-top: 10px; border-radius: 6px; background: rgb(26 26 26 / .08); overflow: hidden; }
.sl-prog i { display: block; height: 100%; width: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--purple-deep), var(--purple)); transform: scaleX(0); transform-origin: 0 50%; }
.sl-pop { position: absolute; right: -6px; top: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 999px; background: var(--ink); color: var(--beige); font-size: .71875rem; box-shadow: 0 14px 30px -12px rgb(26 26 26 / .6); opacity: 0; transform: translateY(8px) scale(.9); }
.sl-pop .ck { color: var(--purple); }
.sx-step.on .sl-play { opacity: 0; transform: scale(.6); transition-delay: .2s; }
.sx-step.on .sl-line { animation: sl-draw 1.6s .5s var(--ease-out) forwards; }
.sx-step.on .sl-area { animation: fade-in .8s 1.6s forwards; }
.sx-step.on .sl-prog i { animation: grow-x 2.2s .4s var(--ease-out) forwards; }
.sx-step.on .sl-pop { animation: pop-in .6s 2.3s var(--ease-out) forwards; }
@keyframes sl-draw { to { stroke-dashoffset: 0; } }
@keyframes fade-in { to { opacity: 1; } }
@keyframes grow-x { to { transform: scaleX(1); } }
@keyframes pop-in { to { opacity: 1; transform: none; } }
/* do real work: a task card ticks itself off and is stamped */
.sw-card { padding: 14px 16px; border-radius: 14px; background: var(--white); box-shadow: inset 0 0 0 1px var(--rule), 0 14px 30px -18px rgb(26 26 26 / .35); }
.sw-tag { display: inline-block; padding: 3px 8px; border-radius: 6px; background: rgb(187 98 222 / .16); color: var(--purple-deep); font: 600 .625rem/1.4 var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
.sw-card > b { display: block; margin: 8px 0 10px; font: 500 .9375rem/1.3 var(--font-body); }
.sw-card ul { display: grid; gap: 7px; }
.sw-card li { display: flex; align-items: center; gap: 9px; font-size: .8125rem; color: var(--fg-2); }
.sw-card li i { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 6px; box-shadow: inset 0 0 0 1.5px rgb(26 26 26 / .2); color: transparent; transition: background-color .3s, color .3s, box-shadow .3s; }
.sx-step.on .sw-card li i { animation: tick .35s var(--ease-out) forwards; }
.sx-step.on .sw-card li:nth-child(1) i { animation-delay: .5s; } .sx-step.on .sw-card li:nth-child(2) i { animation-delay: 1.1s; } .sx-step.on .sw-card li:nth-child(3) i { animation-delay: 1.7s; }
@keyframes tick { to { background: var(--purple); color: var(--ink); box-shadow: none; } }
.sw-stamp { position: absolute; right: -4px; top: -12px; padding: 6px 12px; border-radius: 8px; border: 2px solid var(--purple-deep); color: var(--purple-deep); font: 700 .75rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; background: rgb(255 255 255 / .9); transform: rotate(-8deg) scale(1.6); opacity: 0; }
.sw-plus { position: absolute; left: 50%; bottom: -18px; translate: -50% 0; padding: 6px 12px; border-radius: 999px; background: var(--ink); color: var(--beige); font-size: .71875rem; white-space: nowrap; opacity: 0; }
.sx-step.on .sw-stamp { animation: stamp .45s 2.2s var(--ease-out) forwards; }
.sx-step.on .sw-plus { animation: plus-up 1.6s 2.6s var(--ease-out) forwards; }
@keyframes stamp { to { opacity: 1; transform: rotate(-8deg) scale(1); } }
@keyframes plus-up { 0% { opacity: 0; transform: translateY(8px); } 25% { opacity: 1; transform: none; } 100% { opacity: 1; transform: none; } }
/* get hired: an offer card, a burst */
.sxv-hire { display: grid; place-items: center; }
.sh-card { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; border-radius: 16px; background: var(--white); box-shadow: inset 0 0 0 1px var(--rule), 0 18px 40px -20px rgb(138 60 176 / .5); transform: scale(.92); opacity: .6; transition: transform .6s var(--ease-out), opacity .6s; }
.sh-av { width: 44px !important; height: 44px !important; box-shadow: 0 0 0 3px var(--purple) !important; }
.sh-t { flex: 1; display: grid; }
.sh-t b { font: 400 1.15rem/1.2 var(--font-display); }
.sh-t small { font-size: .71875rem; color: var(--fg-3); }
.sh-day { display: grid; place-items: center; width: 52px; height: 56px; border-radius: 12px; background: var(--ink); color: var(--beige); }
.sh-day small { font-size: .5625rem; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.sh-day b { font: 400 1.5rem/1 var(--font-display); color: var(--purple); }
.sh-note { margin-top: 14px; display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; color: var(--fg-2); opacity: 0; }
.sh-note .ck { color: var(--purple-deep); }
.sx-step.on .sh-card { transform: none; opacity: 1; transition-delay: .3s; }
.sx-step.on .sxv-hire .burst i { animation: burst 1.1s .7s var(--ease-out) forwards; }
.sx-step.on .sh-note { animation: pop-in .5s 1.2s forwards; }
/* company: a brief typed in, people trained, a team grows */
.sb-f { display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 10px; padding: 9px 12px; margin-bottom: 7px; border-radius: 12px; background: var(--white); box-shadow: inset 0 0 0 1px var(--rule); font-size: .8125rem; }
.sb-f span { color: var(--fg-3); font-size: .71875rem; }
.sb-f b { font-weight: 500; overflow: hidden; white-space: nowrap; }
.sb-f em { display: inline-block; font-style: normal; clip-path: inset(0 100% 0 0); border-right: 1.5px solid var(--purple); padding-right: 2px; }
.sx-step.on .sb-f em { animation: type 1s steps(18) forwards; }
.sx-step.on .sb-f:nth-child(2) em { animation-delay: .9s; } .sx-step.on .sb-f:nth-child(3) em { animation-delay: 1.8s; }
@keyframes type { to { clip-path: inset(0 0 0 0); border-color: transparent; } }
.sb-btn { display: block; margin-top: 10px; padding: 10px; border-radius: 999px; text-align: center; background: var(--ink); color: var(--beige); font-size: .78125rem; font-weight: 500; }
.sx-step.on .sb-btn { animation: press .5s 2.7s var(--ease-out); }
@keyframes press { 40% { transform: scale(.94); background: var(--purple); color: var(--ink); } 100% { transform: none; } }
.st-r { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 7px; border-radius: 12px; background: var(--white); box-shadow: inset 0 0 0 1px var(--rule); }
.st-r .face { width: 34px; height: 34px; }
.st-b { height: 6px; border-radius: 6px; background: rgb(26 26 26 / .08); overflow: hidden; }
.st-b i { display: block; height: 100%; width: var(--w); border-radius: 6px; background: linear-gradient(90deg, var(--purple-deep), var(--purple)); transform: scaleX(0); transform-origin: 0 50%; }
.st-r em { font-style: normal; font-size: .6875rem; font-weight: 600; color: var(--purple-deep); opacity: 0; }
.sx-step.on .st-b i { animation: grow-x 1.4s calc(var(--d) + .3s) var(--ease-out) forwards; }
.sx-step.on .st-r em { animation: fade-in .4s calc(var(--d) + 1.6s) forwards; }
.st-l { display: block; text-align: center; font-size: .71875rem; color: var(--fg-3); }
.tm-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.tm-h b { font: 400 1.1rem/1 var(--font-display); }
.tm-h span { font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--purple-deep); }
.tm-row { display: flex; align-items: center; padding: 12px; border-radius: 14px; background: var(--white); box-shadow: inset 0 0 0 1px var(--rule); }
.tm-row .face { width: 40px; height: 40px; margin-right: -8px; box-shadow: 0 0 0 3px var(--white); }
.tm-new { display: inline-flex; }
.tm-new .face { box-shadow: 0 0 0 3px var(--purple); opacity: 0; transform: translateX(20px) scale(.6); }
.sx-step.on .tm-new .face { animation: join .6s var(--ease-out) forwards; }
.sx-step.on .tm-new .face:nth-child(1) { animation-delay: .5s; } .sx-step.on .tm-new .face:nth-child(2) { animation-delay: .8s; }
@keyframes join { to { opacity: 1; transform: none; } }
.tm-task { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--white); box-shadow: inset 0 0 0 1px var(--rule); font-size: .8125rem; opacity: 0; transform: translateY(8px); }
.tm-task i { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 6px; background: var(--purple); color: var(--ink); }
.tm-task span { margin-left: auto; font-size: .6875rem; color: var(--fg-3); }
.sx-step.on .tm-task { animation: pop-in .5s 1.5s var(--ease-out) forwards; }

/* ---------- 2. everything between you and Day 0: cards with real-looking app windows ---------- */
.what .bento { gap: 16px; }
.what .bx { gap: 18px; padding: clamp(22px, 2.4vw, 30px); border-radius: 28px; background: radial-gradient(90% 60% at 100% 0%, rgb(187 98 222 / .12), transparent 60%), linear-gradient(rgb(247 245 238 / .045), rgb(247 245 238 / .015)); box-shadow: inset 0 0 0 1px rgb(247 245 238 / .09), inset 0 1px 0 rgb(247 245 238 / .1); grid-row: auto !important; }
.what .bx > .win { margin-top: auto; }
.bx-copy { display: grid; gap: 8px; }
.bx-copy p { color: var(--fg-2); font-size: var(--t-small); line-height: 1.55; max-width: 46ch; }
@media (min-width: 1080px) {
  .what .bento.only-student, .what .bento-co { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .what .bento.only-student .bx-academy { grid-column: 1 / 5; } .what .bento.only-student .bx-metrics { grid-column: 5 / 7; }
  .what .bento.only-student .bx-sprint { grid-column: 1 / 4; } .what .bento.only-student .bx-capsule { grid-column: 4 / 7; }
  .what .bento.only-student .bx-batch { grid-column: 1 / -1; }
  .what .bento-co .bx-ramp { grid-column: 1 / 5; } .what .bento-co .bx-metrics { grid-column: 5 / 7; }
  .what .bento-co .bx-pool { grid-column: 1 / 4; } .what .bento-co .bx-iaas { grid-column: 4 / 7; }
  .what .bento-co .bx-svc { grid-column: 1 / -1; }
}
/* academy: tracks, the day, today's score */
.ac { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.ac-side { display: none; }
.ac .day { margin: 0; padding: 0 0 4px; background: none; box-shadow: none; }
.ac-score { position: relative; display: none; place-items: center; align-content: center; gap: 2px; }
.ac-score svg { width: 92px; height: 92px; transform: rotate(-90deg); }
.ac-score .r0, .pt-ring .r0 { fill: none; stroke: var(--rule); stroke-width: 7; }
.ac-score .r1, .pt-ring .r1 { fill: none; stroke: var(--purple); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 86 100; filter: drop-shadow(0 0 6px rgb(187 98 222 / .6)); transition: stroke-dasharray 1.6s var(--ease-out); }
.js-motion .bx-academy:not(.seen) .ac-score .r1 { stroke-dasharray: 0 100; }
.ac-score b { position: absolute; top: 30px; font: 400 1.6rem/1 var(--font-display); }
.ac-score small { font-size: .6875rem; color: var(--fg-3); }
@media (min-width: 700px) {
  .ac { grid-template-columns: 128px minmax(0, 1fr) 110px; }
  .ac-side { display: grid; align-content: start; gap: 2px; padding-right: 12px; border-right: 1px solid var(--rule); }
  .ac-side li { padding: 7px 10px; border-radius: 8px; font-size: .75rem; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ac-side li.ac-h { padding-top: 0; font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; }
  .ac-side li.on { background: rgb(187 98 222 / .14); color: var(--fg); box-shadow: inset 2px 0 0 var(--purple); }
  .ac-score { display: grid; padding-left: 12px; border-left: 1px solid var(--rule); }
}
/* metrics: one big live number, a chart under it */
.what .mt { margin: 0; padding: 0; background: none; box-shadow: none; }
.mt-top { display: flex; justify-content: space-between; font-size: .6875rem; color: var(--fg-3); }
.mt-live { font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--purple); }
.what .mt-list { height: 96px; margin-top: 8px; }
.what .mt-list li { transition: opacity .55s var(--ease-out), transform .55s var(--ease-out); }
.what .mt-v { font-size: 2.6rem; }
.mt-d { justify-self: start; margin-top: 2px; padding: 2px 8px; border-radius: 999px; background: rgb(187 98 222 / .16); }
.mt-chart { display: block; width: 100%; height: 70px; margin-top: 10px; }
.mt-a { fill: rgb(187 98 222 / .14); }
.mt-p { fill: none; stroke: var(--purple); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 420; stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s var(--ease-out); }
.js-motion .bx:not(.seen) .mt-p { stroke-dashoffset: 420; }
.mt-axis { display: flex; justify-content: space-between; margin-top: 4px; font-size: .625rem; color: var(--fg-3); }
/* sprint board */
.kb-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; font-size: .71875rem; color: var(--fg-3); }
.kb-top b { font: 400 1.15rem/1 var(--font-display); color: var(--fg); font-variant-numeric: tabular-nums; }
.what .kb { margin: 0; }
.what .kb-col { min-height: 132px; padding: 8px; gap: 7px; background: rgb(247 245 238 / .03); }
.kb-h { display: flex; justify-content: space-between; font: 500 .625rem/1.4 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
.kb-h em { font-style: normal; opacity: .7; }
.what .kb-c { position: relative; display: grid; gap: 6px; padding: 8px 9px 9px; border-radius: 9px; background: rgb(247 245 238 / .07); box-shadow: inset 0 0 0 1px rgb(247 245 238 / .08); font-size: .71875rem; line-height: 1.3; animation: none; }
.what .kb-c .tg { justify-self: start; }
.what .kb-c .face { position: absolute; right: 7px; bottom: 7px; width: 18px; height: 18px; box-shadow: 0 0 0 1.5px var(--ink); }
.what .kb-done .kb-c { box-shadow: inset 0 0 0 1px rgb(187 98 222 / .55); }
.kb-move { animation: kb-move 6s var(--ease-in-out) infinite !important; }
@keyframes kb-move { 0%, 30% { transform: none; } 45%, 85% { transform: translateX(calc(100% + 15px)); box-shadow: inset 0 0 0 1px var(--purple), 0 12px 28px -10px rgb(187 98 222 / .6); } 100% { transform: none; } }
/* capsule: the team, a message thread, the months */
.cp-team { display: flex; gap: 14px; margin-bottom: 12px; }
.cp-m { display: grid; justify-items: center; gap: 4px; font-size: .625rem; color: var(--fg-3); }
.cp-m .face { width: 36px; height: 36px; box-shadow: 0 0 0 2px rgb(247 245 238 / .2); }
.cp-you .face { box-shadow: 0 0 0 2px var(--purple), 0 0 14px rgb(187 98 222 / .6); }
.cp-you small { color: var(--purple); font-weight: 600; }
.chat { display: grid; gap: 8px; margin-bottom: 14px; }
.chat .m { display: flex; align-items: flex-end; gap: 8px; max-width: 86%; }
.chat .m .face { width: 22px; height: 22px; }
.chat .m > span { padding: 8px 11px; border-radius: 14px 14px 14px 4px; background: rgb(247 245 238 / .08); font-size: .75rem; line-height: 1.35; }
.chat .me { justify-self: end; position: relative; min-height: 32px; }
.chat .me .msg { display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px; border-radius: 14px 14px 4px 14px; background: var(--purple); color: var(--ink); font-size: .75rem; opacity: 0; transform: translateY(6px); }
.chat .typing { position: absolute; right: 0; bottom: 0; display: inline-flex; gap: 3px; padding: 11px 12px; border-radius: 14px 14px 4px 14px; background: rgb(247 245 238 / .08); }
.chat .typing i { width: 5px; height: 5px; border-radius: 50%; background: rgb(247 245 238 / .6); animation: dots 1s infinite; }
.chat .typing i:nth-child(2) { animation-delay: .15s; } .chat .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dots { 50% { transform: translateY(-3px); opacity: .4; } }
:is(.st-pane.on, .st-inline) .typing { animation: chat-typing 6s infinite; }
:is(.st-pane.on, .st-inline) .msg { animation: chat-msg 6s infinite; }
@keyframes chat-typing { 0%, 8% { opacity: 0; } 12%, 38% { opacity: 1; } 42%, 100% { opacity: 0; } }
@keyframes chat-msg { 0%, 40% { opacity: 0; transform: translateY(6px); } 46%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* batch: a clean comparison */
.vs { display: grid; gap: 12px; align-items: stretch; }
.vs-col { padding: 16px 18px; border-radius: 18px; background: rgb(247 245 238 / .04); box-shadow: inset 0 0 0 1px rgb(247 245 238 / .09); }
.vs-h { display: block; margin-bottom: 10px; font: 600 .6875rem/1.4 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.vs-col li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid rgb(247 245 238 / .07); font-size: .875rem; color: var(--fg-2); }
.vs-col li:first-child { border-top: 0; }
.vs-col .cx { color: rgb(247 245 238 / .45); } .vs-col .ck { color: rgb(247 245 238 / .45); }
.vs-you { background: linear-gradient(140deg, rgb(187 98 222 / .2), rgb(138 60 176 / .08)); box-shadow: inset 0 0 0 1px rgb(187 98 222 / .45), 0 20px 50px -30px rgb(187 98 222 / .7); }
.vs-you .vs-h { color: var(--purple); }
.vs-you li { color: var(--fg); }
.vs-you .ck { color: var(--purple); }
.vs-mid { justify-self: center; align-self: center; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); box-shadow: inset 0 0 0 1px rgb(247 245 238 / .2); font: 400 .875rem/1 var(--font-display); color: var(--fg-3); }
@media (min-width: 760px) { .vs { grid-template-columns: 1fr auto 1fr; } }
/* company: the ramp chart, the shortlist, the models */
.rc svg { display: block; width: 100%; height: 170px; overflow: visible; }
.rc-grid { fill: none; stroke: rgb(var(--fg-rgb) / .07); }
.rc-fresh, .rc-ab { fill: none; stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 600; stroke-dashoffset: 0; transition: stroke-dashoffset 2s var(--ease-out); }
.rc-fresh { stroke: rgb(var(--fg-rgb) / .4); stroke-dasharray: 5 6; }
.rc-ab { stroke: var(--purple); filter: drop-shadow(0 0 6px rgb(187 98 222 / .6)); }
.js-motion .bx:not(.seen) .rc-ab { stroke-dashoffset: 600; }
.rc-d1 { fill: var(--purple); } .rc-d2 { fill: rgb(var(--fg-rgb) / .5); }
.rc-x { display: flex; justify-content: space-between; padding-left: 10%; margin-top: 6px; font-size: .625rem; color: var(--fg-3); }
.rc-key { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; font-size: .75rem; color: var(--fg-2); }
.rc-key i { display: inline-block; width: 14px; height: 3px; margin-right: 7px; vertical-align: middle; border-radius: 2px; }
.k-ab i { background: var(--purple); } .k-fr i { background: rgb(var(--fg-rgb) / .4); }
.pl-h { display: grid; grid-template-columns: 1fr 90px 30px; gap: 10px; padding: 0 10px 8px; font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
.pl-h span:first-child { padding-left: 44px; }
.what .pool { margin: 0; }
.what .pc { grid-template-columns: 34px 1fr 90px 30px; background: rgb(247 245 238 / .04); }
.pc-bar { height: 5px; border-radius: 5px; background: rgb(var(--fg-rgb) / .1); overflow: hidden; }
.pc-bar i { display: block; height: 100%; width: var(--w); border-radius: 5px; background: linear-gradient(90deg, var(--purple-deep), var(--purple)); }
.what .pc em { text-align: right; font: 400 1rem/1 var(--font-display); color: var(--fg); }
.what .iaas-modes { display: grid; gap: 8px; }
.what .iaas-modes li { position: relative; padding: 12px 14px; background: rgb(247 245 238 / .04); }
.iaas-modes .rd { position: absolute; right: 14px; top: 14px; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgb(var(--fg-rgb) / .3); transition: box-shadow .4s; }
.iaas-modes li.on .rd { box-shadow: inset 0 0 0 5px var(--purple); }
.what .iaas-modes li.on { background: rgb(187 98 222 / .1); }

/* ---------- 3. five steps: list + one big screen ---------- */
.how { display: block; min-height: 0; padding-block: var(--section); }
.stp { margin-top: clamp(32px, 5vw, 64px); }
.stp-list { display: grid; gap: 10px; }
.stp-i { position: relative; border-radius: 22px; background: var(--glass-bg); box-shadow: var(--glass-edge); overflow: hidden; }
.stp-btn { display: grid; grid-template-columns: 44px 1fr; gap: 12px; width: 100%; padding: 18px 20px; border: 0; background: none; text-align: left; color: inherit; font: inherit; cursor: pointer; }
.stp-n { font: 400 1.25rem/1.3 var(--font-display); color: var(--fg-3); transition: color .4s; }
.stp-txt small { display: block; font: 600 .6875rem/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--purple-deep); }
.stp-txt b { display: block; margin-top: 2px; font: 400 1.35rem/1.2 var(--font-display); letter-spacing: -.02em; }
.stp-p { display: block; margin-top: 6px; color: var(--fg-2); font-size: var(--t-small); line-height: 1.55; }
.stp-bar { position: absolute; left: 20px; right: 20px; bottom: 0; height: 2px; background: transparent; }
.stp-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--purple-deep), var(--purple)); transform: scaleX(var(--f, 0)); transform-origin: 0 50%; }
.stp-i.on { box-shadow: var(--glass-edge), inset 0 0 0 1px rgb(187 98 222 / .45), 0 30px 60px -36px rgb(138 60 176 / .5); }
.stp-i.on .stp-n, .stp-i.done .stp-n { color: var(--purple); }
.stp-screen { display: none; }
.stp-inline { margin: 0 16px 16px; height: 300px; border-radius: 16px; overflow: hidden; background: rgb(255 255 255 / .7); box-shadow: inset 0 0 0 1px var(--rule); }
.stp-pane { position: absolute; inset: 0; display: grid; place-items: center; padding: 22px; opacity: 0; visibility: hidden; transform: translateY(12px) scale(.98); transition: opacity .5s var(--ease-out), transform .6s var(--ease-out), visibility 0s .5s; }
.stp-pane.on { opacity: 1; visibility: visible; transform: none; transition: opacity .5s var(--ease-out), transform .6s var(--ease-out), visibility 0s; }
.stp-inline.stp-pane { position: relative; inset: auto; opacity: 1; visibility: visible; transform: none; }
@media (min-width: 960px) {
  .stp { height: 400vh; }
  .stp-sticky { position: sticky; top: 12vh; height: 76vh; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 3vw, 48px); align-items: center; }
  .stp-list { gap: 8px; }
  .stp-i:not(.on) .stp-p { display: none; }
  .stp-i:not(.on) { background: transparent; box-shadow: none; }
  .stp-i:not(.on) .stp-btn { padding-block: 12px; }
  .stp-i:not(.on) .stp-txt b { color: var(--fg-2); font-size: 1.15rem; }
  .stp-inline { display: none; }
  .stp-screen { display: block; height: 100%; max-height: 560px; }
  .stp-win { height: 100%; display: flex; flex-direction: column; border-radius: 22px; }
  .stp-win .win-body { flex: 1; padding: 0; }
}
/* the panes */
.pn { position: relative; width: min(100%, 560px); font-size: .875rem; }
.pn-train { display: grid; grid-template-columns: 140px 1fr; gap: 20px 28px; align-items: center; }
.pt-ring { position: relative; width: 140px; height: 140px; }
.pt-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pt-ring .r1 { stroke-dasharray: 0 100; }
.stp-pane.on .pt-ring .r1 { stroke-dasharray: 72 100; transition-delay: .2s; }
.pt-ring span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.pt-ring b { font: 400 2.2rem/1 var(--font-display); }
.pt-ring small { font-size: .6875rem; color: var(--fg-3); }
.pt-bars { display: grid; gap: 12px; }
.pt-bars li { display: grid; grid-template-columns: 1fr 34px; gap: 4px 10px; align-items: center; font-size: .78125rem; color: var(--fg-2); }
.pt-bars i { grid-column: 1; grid-row: 2; height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--purple-deep), var(--purple)) 0 0 / var(--w) 100% no-repeat, rgb(var(--fg-rgb) / .08); background-size: 0 100%, 100% 100%; transition: background-size 1.2s var(--ease-out); }
.stp-pane.on .pt-bars i, .stp-inline .pt-bars i { background-size: var(--w) 100%, 100% 100%; }
.pt-bars b { grid-row: span 2; align-self: end; font: 400 1.05rem/1 var(--font-display); color: var(--fg); text-align: right; }
.pt-today { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; }
.pt-today li { padding: 6px 12px; border-radius: 999px; font-size: .75rem; background: rgb(var(--fg-rgb) / .05); color: var(--fg-3); }
.pt-today li.done { color: var(--fg-2); text-decoration: line-through; text-decoration-color: rgb(187 98 222 / .7); }
.pt-today li.now { background: var(--ink); color: var(--beige); box-shadow: 0 0 0 4px rgb(187 98 222 / .2); }
.pn-sprint { display: grid; gap: 14px; }
.ps-timer { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 18px; border-radius: 16px; background: var(--ink); color: var(--beige); }
.ps-timer small { font-size: .75rem; opacity: .7; }
.ps-timer b { font: 400 2rem/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--purple); }
.ps-brief { display: grid; gap: 6px; justify-items: start; padding: 14px 16px; border-radius: 16px; background: var(--white); box-shadow: inset 0 0 0 1px var(--rule); }
.ps-brief b { font: 500 1rem/1.35 var(--font-body); }
.ps-brief small { font-size: .75rem; color: var(--fg-3); }
.ps-check { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ps-check li { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 12px; background: var(--white); box-shadow: inset 0 0 0 1px var(--rule); font-size: .8125rem; }
.ps-check i { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 6px; box-shadow: inset 0 0 0 1.5px rgb(26 26 26 / .2); color: transparent; }
.stp-pane.on .ps-check i, .stp-inline .ps-check i { animation: tick .35s calc(var(--d) + .4s) var(--ease-out) forwards; }
.ps-stamp { position: absolute; right: -6px; top: 70px; padding: 6px 12px; border: 2px solid var(--purple-deep); border-radius: 8px; color: var(--purple-deep); background: rgb(255 255 255 / .92); font: 700 .75rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; opacity: 0; transform: rotate(-8deg) scale(1.6); }
.stp-pane.on .ps-stamp, .stp-inline .ps-stamp { animation: stamp .45s 2.6s var(--ease-out) forwards; }
.pn-cap { display: grid; grid-template-columns: 200px 1fr; gap: 28px; align-items: center; }
.pc-ring { position: relative; width: 200px; height: 200px; }
.pc-ring svg { position: absolute; inset: 0; fill: none; stroke: rgb(187 98 222 / .45); stroke-dasharray: 3 6; animation: spin 40s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.pcr-f { position: absolute; width: 46px !important; height: 46px !important; margin: -23px; box-shadow: 0 0 0 3px var(--white), 0 8px 20px -8px rgb(26 26 26 / .4) !important; }
.pcr-f.f0 { left: 50%; top: 11%; } .pcr-f.f1 { left: 89%; top: 50%; } .pcr-f.f2 { left: 50%; top: 89%; } .pcr-f.f3 { left: 11%; top: 50%; }
.pcr-you { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: var(--purple); color: var(--ink); font-weight: 600; font-size: .8125rem; box-shadow: 0 0 0 8px rgb(187 98 222 / .18), 0 0 30px rgb(187 98 222 / .6); animation: core 3.2s var(--ease-in-out) infinite; }
.pc-out small { font-size: .75rem; color: var(--fg-3); }
.pc-graph { display: flex; align-items: flex-end; gap: 6px; height: 150px; margin-top: 10px; padding-bottom: 2px; border-bottom: 1px solid var(--rule); }
.pc-graph i { flex: 1; height: var(--h); border-radius: 5px 5px 2px 2px; background: linear-gradient(var(--purple), rgb(187 98 222 / .3)); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .8s var(--ease-out) var(--d); }
.pn-pow { display: grid; gap: 12px; }
.pp-head { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; background: var(--white); box-shadow: inset 0 0 0 1px var(--rule); }
.pp-head .face { width: 46px; height: 46px; box-shadow: 0 0 0 3px var(--purple); }
.pp-head span { display: grid; flex: 1; }
.pp-head b { font: 400 1.15rem/1.2 var(--font-display); }
.pp-head small { font-size: .75rem; color: var(--fg-3); }
.pp-badge, .pw-ready { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: var(--purple); color: var(--ink); font-size: .75rem; font-weight: 600; white-space: nowrap; }
.pp-badge i, .pw-ready i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); animation: blip 1.6s var(--ease-in-out) infinite; }
.pp-list { display: grid; gap: 8px; }
.pp-list li { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: var(--white); box-shadow: inset 0 0 0 1px var(--rule); opacity: 0; transform: translateX(-12px); transition: opacity .5s var(--ease-out) var(--d), transform .5s var(--ease-out) var(--d); }
.stp-pane.on .pp-list li, .stp-inline .pp-list li { opacity: 1; transform: none; }
.pp-list b { font-weight: 500; font-size: .875rem; }
.pp-list em { font-style: normal; font-size: .6875rem; font-weight: 600; color: var(--purple-deep); }
.pp-ico, .pw-th { width: 34px; height: 34px; border-radius: 10px; background: rgb(187 98 222 / .14); position: relative; overflow: hidden; }
.pp-ico::after, .pw-th::after { content: ""; position: absolute; inset: 9px; background: linear-gradient(transparent 60%, var(--purple) 60% 75%, transparent 75%), linear-gradient(90deg, var(--purple-deep) 0 3px, transparent 3px); opacity: .8; }
.pp-ico.i1::after, .pw-th.i-auto::after { inset: 10px; border-radius: 50%; background: none; box-shadow: inset 0 0 0 2.5px var(--purple); }
.pp-ico.i2::after, .pw-th.i-deck::after { background: linear-gradient(var(--purple) 0 3px, transparent 3px 6px, rgb(138 60 176 / .7) 6px 9px, transparent 9px 12px, var(--purple) 12px 15px); }
.pp-ico.i3::after, .pw-th.i-sprint::after { background: linear-gradient(135deg, transparent 45%, var(--purple) 45% 58%, transparent 58%); }
.pn-day0 { display: grid; grid-template-columns: 150px 1fr; gap: 28px; align-items: center; }
.pd-cal { display: grid; place-items: center; width: 150px; height: 160px; border-radius: 24px; background: var(--ink); color: var(--beige); box-shadow: 0 30px 60px -30px rgb(138 60 176 / .7); }
.pd-cal span { font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; opacity: .7; }
.pd-cal b { font: 400 5rem/1 var(--font-display); color: var(--purple); }
.pd-notes { display: grid; gap: 10px; }
.pd-notes li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--white); box-shadow: inset 0 0 0 1px var(--rule), 0 16px 30px -24px rgb(26 26 26 / .4); opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease-out) calc(var(--d) + .3s), transform .5s var(--ease-out) calc(var(--d) + .3s); }
.pd-notes i { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: var(--purple); color: var(--ink); flex: none; }
.pd-notes span { display: grid; } .pd-notes b { font-weight: 500; } .pd-notes small { font-size: .75rem; color: var(--fg-3); }
.pn-day0 .burst { left: 75px; top: 50%; }
.stp-pane.on .pn-day0 .burst i { animation: burst 1.2s 1.6s var(--ease-out) forwards; }
.pn-book { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: center; }
.bk-cal { padding: 16px; border-radius: 18px; background: var(--white); box-shadow: inset 0 0 0 1px var(--rule); }
.bk-m { font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.bk-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 10px 0 14px; }
.bk-days span { display: grid; justify-items: center; padding: 8px 0; border-radius: 12px; font-size: .6875rem; color: var(--fg-3); }
.bk-days b { font: 400 1.1rem/1.2 var(--font-display); color: var(--fg); }
.bk-days span.on { background: var(--ink); color: var(--beige); } .bk-days span.on b { color: var(--purple); }
.bk-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bk-slots span { padding: 8px; border-radius: 10px; text-align: center; font-size: .78125rem; box-shadow: inset 0 0 0 1px var(--rule); }
.bk-slots span.on { box-shadow: inset 0 0 0 1.5px var(--purple); background: rgb(187 98 222 / .1); font-weight: 600; }
.bk-sum { display: grid; gap: 8px; justify-items: start; }
.bk-sum b { font: 400 1.35rem/1.2 var(--font-display); }
.bk-sum small { color: var(--fg-2); font-size: .8125rem; }
.bk-ok { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: var(--purple); color: var(--ink); font-size: .78125rem; font-weight: 600; opacity: 0; transform: scale(.8); }
.stp-pane.on .bk-ok, .stp-inline .bk-ok { animation: pop-in .5s 1s var(--ease-out) forwards; }
.pn-short .sh-list { display: grid; gap: 10px; }
.sh-list li { display: grid; grid-template-columns: 42px 1fr 110px 34px; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--white); box-shadow: inset 0 0 0 1px var(--rule); opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease-out) var(--d), transform .5s var(--ease-out) var(--d); }
.stp-pane.on .sh-list li, .stp-inline .sh-list li { opacity: 1; transform: none; }
.sh-list li:first-child { box-shadow: inset 0 0 0 1.5px var(--purple), 0 16px 30px -20px rgb(187 98 222 / .7); }
.sh-list .face { width: 42px; height: 42px; }
.sh-list span { display: grid; } .sh-list b { font-weight: 500; } .sh-list small { font-size: .71875rem; color: var(--fg-3); }
.sh-list em { font: 400 1.15rem/1 var(--font-display); font-style: normal; text-align: right; }
.pn-model { display: grid; gap: 10px; }
.md-o { position: relative; display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; background: var(--white); box-shadow: inset 0 0 0 1px var(--rule); }
.md-o > b { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--beige); font-weight: 500; }
.md-o span { display: grid; font-weight: 500; } .md-o small { font-weight: 400; font-size: .75rem; color: var(--fg-3); }
.md-o .rd { position: absolute; right: 18px; top: 50%; margin-top: -9px; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgb(26 26 26 / .25); }
.stp-pane.on .md-o, .stp-inline .md-o { animation: md-pick 6s infinite; }
.md-o.o1 { animation-delay: 2s !important; } .md-o.o2 { animation-delay: 4s !important; }
.stp-pane.on .md-o .rd, .stp-inline .md-o .rd { animation: md-rd 6s infinite; animation-delay: inherit; }
@keyframes md-pick { 0%, 30% { box-shadow: inset 0 0 0 1.5px var(--purple), 0 16px 30px -20px rgb(187 98 222 / .7); background: rgb(255 255 255); } 34%, 100% { box-shadow: inset 0 0 0 1px var(--rule); } }
@keyframes md-rd { 0%, 30% { box-shadow: inset 0 0 0 5px var(--purple); } 34%, 100% { box-shadow: inset 0 0 0 1.5px rgb(26 26 26 / .25); } }
.pn-tools { height: 280px; }
.pn-tools svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tl-l { fill: none; stroke: rgb(187 98 222 / .5); stroke-width: 1.5; stroke-dasharray: 4 5; }
.tl-p { fill: var(--purple); filter: drop-shadow(0 0 4px rgb(187 98 222 / .9)); }
.tl-t, .tl-core { position: absolute; translate: -50% -50%; padding: 10px 16px; border-radius: 14px; background: var(--white); box-shadow: inset 0 0 0 1px var(--rule), 0 14px 30px -20px rgb(26 26 26 / .45); font-weight: 500; font-size: .8125rem; }
.tl-t.t1 { left: 18.75%; top: 22%; } .tl-t.t2 { left: 81.25%; top: 22%; } .tl-t.t3 { left: 18.75%; top: 78%; } .tl-t.t4 { left: 81.25%; top: 78%; }
.tl-core { left: 50%; top: 50%; background: var(--ink); color: var(--beige); padding: 14px 22px; box-shadow: 0 0 0 8px rgb(187 98 222 / .16), 0 20px 40px -18px rgb(138 60 176 / .8); }
.tl-note { position: absolute; left: 0; right: 0; bottom: -8px; text-align: center; font-size: .75rem; color: var(--fg-3); }
.pn-ramp svg { display: block; width: 100%; height: 220px; }
@media (max-width: 600px) {
  .pn-train, .pn-cap, .pn-day0, .pn-book { grid-template-columns: 1fr; justify-items: center; gap: 14px; }
  .pt-ring { width: 110px; height: 110px; } .pc-ring { width: 160px; height: 160px; } .pd-cal { width: 120px; height: 120px; } .pd-cal b { font-size: 3.6rem; }
  .pt-bars, .pd-notes, .pc-out { width: 100%; }
  .stp-inline { height: auto; min-height: 300px; padding: 18px 12px; }
  .ps-check { grid-template-columns: 1fr; }
  .sh-list li { grid-template-columns: 36px 1fr 30px; } .sh-list .pc-bar { display: none; }
  .pn-tools { height: 240px; }
}

/* ---------- 6. Proof of Work: the profile ---------- */
.proof .proof-copy { display: grid; justify-items: center; }
.proof .proof-copy .sec-lede { margin-inline: auto; }
.pw, .tr { position: relative; max-width: 1040px; margin: clamp(36px, 5vw, 64px) auto 0; border-radius: 26px; overflow: hidden; }
.pw-share { margin-left: auto; padding: 4px 10px; border-radius: 999px; font-size: .6875rem; box-shadow: inset 0 0 0 1px rgb(247 245 238 / .2); color: var(--fg-2); }
.pw-cover { position: relative; height: clamp(90px, 12vw, 140px); background: radial-gradient(60% 120% at 20% 0%, rgb(187 98 222 / .65), transparent 70%), radial-gradient(60% 120% at 90% 100%, rgb(138 60 176 / .7), transparent 70%), var(--ink); overflow: hidden; }
.pw-cover svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pw-cover path { fill: none; stroke: rgb(247 245 238 / .22); stroke-width: 1; stroke-dasharray: 2 6; animation: drift 14s linear infinite; }
@keyframes drift { to { stroke-dashoffset: -160; } }
.pw-id { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 18px; padding: 0 clamp(18px, 3vw, 32px); margin-top: -34px; position: relative; }
.pw-av { width: 84px !important; height: 84px !important; box-shadow: 0 0 0 4px var(--ink), 0 0 0 6px var(--purple) !important; }
.pw-who { flex: 1; min-width: 200px; display: grid; gap: 2px; padding-bottom: 4px; }
.pw-who b { display: inline-flex; align-items: center; gap: 8px; font: 400 1.6rem/1.1 var(--font-display); }
.pw-ver { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--purple); color: var(--ink); }
.pw-who small { color: var(--fg-3); font-size: .8125rem; }
.pw-ready { margin-bottom: 8px; box-shadow: 0 0 0 6px rgb(187 98 222 / .18), 0 10px 30px -8px rgb(187 98 222 / .8); }
.pw-tabs { display: flex; gap: 4px; margin: 20px clamp(18px, 3vw, 32px) 0; border-bottom: 1px solid rgb(247 245 238 / .1); overflow-x: auto; }
.pw-tabs span { padding: 10px 14px; font-size: .8125rem; color: var(--fg-3); white-space: nowrap; }
.pw-tabs span.on { color: var(--fg); box-shadow: inset 0 -2px 0 var(--purple); }
.pw-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 18px clamp(18px, 3vw, 32px) 0; }
.pw-stats > div { padding: 14px 16px; border-radius: 16px; background: rgb(247 245 238 / .045); box-shadow: inset 0 0 0 1px rgb(247 245 238 / .08); }
.pw-stats b { display: block; font: 400 2rem/1 var(--font-display); letter-spacing: -.03em; }
.pw-stats > div:first-child b { color: var(--purple); }
.pw-stats small { font-size: .75rem; color: var(--fg-3); }
.pw-grid { display: grid; gap: 14px; padding: 16px clamp(18px, 3vw, 32px) 0; }
.pw-work { display: grid; gap: 8px; align-content: start; }
.pw-card { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: rgb(247 245 238 / .04); box-shadow: inset 0 0 0 1px rgb(247 245 238 / .08); }
.pw-card .pw-th { width: 40px; height: 40px; }
.pw-t { display: grid; min-width: 0; } .pw-t b { font-weight: 500; font-size: .875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pw-t small { font-size: .71875rem; color: var(--fg-3); }
.pw-card em { font-style: normal; padding: 3px 9px; border-radius: 999px; font-size: .6875rem; font-weight: 600; background: rgb(247 245 238 / .08); color: var(--fg-2); }
.pw-card em.st-live, .pw-card em.st-new { background: var(--purple); color: var(--ink); }
.pw-card em.st-shipped { background: rgb(187 98 222 / .18); color: var(--purple); }
.pw-d { display: none; }
.pw-new { position: relative; height: 66px; }
.pw-new .pw-card { position: absolute; inset: 0; opacity: 0; transform: translateY(-14px) scale(.98); background: linear-gradient(120deg, rgb(187 98 222 / .22), rgb(138 60 176 / .08)); box-shadow: inset 0 0 0 1px rgb(187 98 222 / .55), 0 18px 40px -24px rgb(187 98 222 / .9); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.pw-new .pw-card.on { opacity: 1; transform: none; }
.pw-new .pw-card.out { opacity: 0; transform: translateY(14px) scale(.98); }
.pw-side { display: grid; gap: 10px; align-content: start; }
.pw-box { padding: 16px; border-radius: 16px; background: rgb(247 245 238 / .04); box-shadow: inset 0 0 0 1px rgb(247 245 238 / .08); }
.pw-bh { display: flex; justify-content: space-between; margin-bottom: 12px; font: 600 .6875rem/1.4 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.pw-bh em { font-style: normal; color: var(--purple); letter-spacing: .04em; text-transform: none; }
.pw-sk { display: grid; grid-template-columns: 1fr 30px; gap: 4px 10px; align-items: center; margin-top: 10px; font-size: .78125rem; color: var(--fg-2); }
.pw-sk i { grid-column: 1; height: 5px; border-radius: 5px; background: linear-gradient(90deg, var(--purple-deep), var(--purple)) 0 0 / var(--w) 100% no-repeat, rgb(247 245 238 / .08); transition: background-size 1.4s var(--ease-out); }
.js-motion .pw:not(.seen) .pw-sk i { background-size: 0 100%, 100% 100%; }
.pw-sk b { grid-row: span 2; align-self: end; text-align: right; font: 400 1rem/1 var(--font-display); color: var(--fg); }
.pw-heat { display: grid; grid-template-columns: repeat(21, 1fr); gap: 3px; }
.pw-heat i { aspect-ratio: 1; border-radius: 3px; background: rgb(187 98 222 / calc(.06 + var(--l) * .22)); transition: opacity .3s; }
.js-motion .pw.seen .pw-heat i { animation: heat-in .5s both; }
.pw-heat i:nth-child(3n) { animation-delay: .1s; } .pw-heat i:nth-child(5n) { animation-delay: .25s; } .pw-heat i:nth-child(7n) { animation-delay: .4s; }
@keyframes heat-in { from { opacity: 0; transform: scale(.4); } }
.pw-note { padding: 18px clamp(18px, 3vw, 32px) 22px; font-size: .75rem; color: var(--fg-3); }
@media (min-width: 760px) { .pw-stats { grid-template-columns: repeat(4, 1fr); } .pw-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .pw-d { display: block; font-size: .6875rem; color: var(--fg-3); white-space: nowrap; } .pw-card:not(.fresh) { grid-template-columns: 40px 1fr auto 56px; } }
/* company: track record window */
.tr-body { display: grid; gap: 24px; padding: clamp(18px, 3vw, 32px); }
.tr-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.tr-nums > div { padding: 18px; border-radius: 16px; background: rgb(247 245 238 / .045); box-shadow: inset 0 0 0 1px rgb(247 245 238 / .08); }
.tr-nums b, .tr-nums > div > span { font: 400 clamp(2.4rem, 2rem + 1.4vw, 3.2rem)/1 var(--font-display); letter-spacing: -.04em; color: var(--purple); }
.tr-nums small { display: block; margin-top: 6px; font-size: .8125rem; color: var(--fg-2); }
.tr .dots-fig { padding: 0; background: none; box-shadow: none; }

/* ---------- 7. your path: the map ---------- */
.map { position: relative; margin-top: clamp(40px, 6vw, 72px); }
.map-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.map-road { fill: none; stroke: rgb(26 26 26 / .07); stroke-width: 22; stroke-linecap: round; }
.map-dash { fill: none; stroke: rgb(26 26 26 / .22); stroke-width: 2; stroke-dasharray: 2 10; stroke-linecap: round; animation: drift 6s linear infinite; }
.map-done { fill: none; stroke: var(--purple); stroke-width: 6; stroke-linecap: round; filter: drop-shadow(0 0 8px rgb(187 98 222 / .7)); }
.map-you { position: absolute; left: 0; top: 0; z-index: 3; width: 0; height: 0; pointer-events: none; will-change: transform; }
.map-you .face { position: absolute; left: -24px; top: -24px; width: 48px; height: 48px; box-shadow: 0 0 0 3px var(--white), 0 0 0 6px var(--purple), 0 12px 30px -6px rgb(138 60 176 / .8); }
.map-you em { position: absolute; left: 30px; top: -12px; padding: 4px 10px; border-radius: 999px; background: var(--purple); color: var(--ink); font: 600 .6875rem/1.4 var(--font-body); font-style: normal; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.map-lv { position: relative; z-index: 2; display: grid; gap: 40px; padding: 40px 0; }
.lv { position: relative; min-height: 180px; }
.lv-stop { position: absolute; left: 24px; top: 50%; width: 22px; height: 22px; margin: -11px; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 3px rgb(26 26 26 / .2); transition: box-shadow .4s, background-color .4s, transform .4s var(--ease-out); }
.lv.on .lv-stop { background: var(--purple); box-shadow: 0 0 0 7px rgb(187 98 222 / .2), 0 0 18px rgb(187 98 222 / .8); transform: scale(1.15); }
.lv-card { position: relative; margin-left: 64px; display: grid; grid-template-columns: 64px 1fr; gap: 4px 16px; align-items: start; padding: 20px; border-radius: 24px; background: var(--glass-bg); box-shadow: var(--glass-edge), var(--glass-shadow); opacity: .55; transform: scale(.97); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out), box-shadow .6s; }
.lv.on .lv-card { opacity: 1; transform: none; box-shadow: var(--glass-edge), inset 0 0 0 1px rgb(187 98 222 / .4), 0 40px 70px -40px rgb(138 60 176 / .55); }
.lv-ic { grid-row: span 3; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 18px; background: rgb(26 26 26 / .05); transition: background-color .5s; }
.lv.on .lv-ic { background: var(--ink); }
.lv-ic svg { width: 44px; height: 44px; }
.ic-l { fill: none; stroke: rgb(26 26 26 / .45); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transition: stroke .5s; }
.ic-f { fill: rgb(26 26 26 / .3); } .ic-f2 { fill: rgb(26 26 26 / .25); } .ic-d { fill: var(--purple); }
.lv.on .ic-l { stroke: var(--beige); } .lv.on .ic-f { fill: var(--beige); } .lv.on .ic-f2 { fill: var(--purple); }
.lv.on .lv-ic svg { animation: wob 2.4s var(--ease-in-out) infinite; }
@keyframes wob { 50% { transform: rotate(-6deg) scale(1.06); } }
.lv-k { font: 600 .6875rem/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--purple-deep); }
.lv-card b { font: 400 clamp(1.4rem, 1.2rem + .6vw, 1.75rem)/1.1 var(--font-display); letter-spacing: -.02em; }
.lv-card p { color: var(--fg-2); font-size: var(--t-small); line-height: 1.55; }
.lv-ok { position: absolute; right: 16px; top: 16px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: var(--purple); color: var(--ink); font-size: .6875rem; font-weight: 600; opacity: 0; transform: scale(.6); transition: opacity .4s, transform .5s var(--ease-out); }
.lv.on .lv-ok { opacity: 1; transform: none; transition-delay: .2s; }
.lv-card .burst { left: 32px; top: 32px; }
.lv.on .lv-card .burst i { animation: burst 1s .1s var(--ease-out) forwards; }
@media (min-width: 760px) {
  .map-lv { gap: 56px; padding: 60px 0; }
  .lv { min-height: 200px; }
  .lv:nth-child(odd) .lv-stop { left: 30%; } .lv:nth-child(even) .lv-stop { left: 70%; }
  .lv-card { position: absolute; top: 50%; translate: 0 -50%; width: min(44%, 460px); margin: 0; }
  .lv:nth-child(odd) .lv-card { left: calc(30% + 40px); } .lv:nth-child(even) .lv-card { right: calc(30% + 40px); }
  .lv.on .lv-card { transform: none; }
}

/* ---------- 8. the people, as a network ---------- */
.closing .sec-lede.center { margin-inline: auto; }
.pnet { position: relative; height: clamp(560px, 62vw, 700px); margin-top: clamp(24px, 4vw, 48px); }
.pnet-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pnet-lines line { stroke: rgb(247 245 238 / .13); stroke-width: 1; transition: stroke .5s, stroke-width .5s; }
.pnet-lines line.on { stroke: var(--purple); stroke-width: 1.6; stroke-dasharray: 4 6; animation: flow 1.2s linear infinite; filter: drop-shadow(0 0 4px rgb(187 98 222 / .9)); }
@keyframes flow { to { stroke-dashoffset: -20; } }
.pn-node { position: absolute; z-index: 1; width: calc(64px * var(--s, 1)); height: calc(64px * var(--s, 1)); translate: -50% -50%; padding: 0; border: 0; border-radius: 50%; overflow: hidden; cursor: pointer; background: var(--ink); box-shadow: 0 0 0 2px rgb(247 245 238 / .25), 0 14px 30px -12px rgb(26 26 26 / .8); animation: float 6s var(--ease-in-out) infinite; animation-delay: calc(var(--fl) * -1); transition: transform .5s var(--ease-out), box-shadow .5s, filter .5s; filter: grayscale(.35) brightness(.8); }
.pn-node img { width: 100%; height: 100%; object-fit: cover; }
.pn-node.near { filter: none; box-shadow: 0 0 0 2px rgb(187 98 222 / .7), 0 14px 30px -12px rgb(26 26 26 / .8); }
.pn-node.on { z-index: 3; filter: none; transform: scale(1.35); box-shadow: 0 0 0 3px var(--purple), 0 0 0 10px rgb(187 98 222 / .2), 0 0 40px rgb(187 98 222 / .6); animation-play-state: paused; }
.pn-node:focus-visible { outline: 2px solid var(--purple); outline-offset: 4px; }
@keyframes float { 50% { translate: -50% calc(-50% - 5px); } }
.pnet-cards { position: absolute; inset: 0; pointer-events: none; }
.pn-card { position: absolute; left: 0; top: 0; z-index: 4; width: 360px; margin: 0; display: grid; grid-template-columns: 132px 1fr; gap: 0; border-radius: 22px; overflow: hidden; text-align: left; background: rgb(26 26 26 / .82); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); box-shadow: inset 0 0 0 1px rgb(247 245 238 / .14), 0 40px 80px -30px rgb(26 26 26 / .9), 0 0 60px -20px rgb(187 98 222 / .5); opacity: 0; visibility: hidden; transform: translateX(-12px) scale(.94); transition: opacity .45s var(--ease-out), transform .5s var(--ease-out), visibility 0s .45s; }
.pn-card.from-left { transform: translateX(12px) scale(.94); }
.pn-card.on { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity .45s var(--ease-out) .1s, transform .5s var(--ease-out) .1s, visibility 0s; }
.pn-card img { width: 132px; height: 100%; min-height: 176px; object-fit: cover; }
.pn-card figcaption { display: grid; align-content: center; gap: 4px; padding: 16px 18px; }
.pn-card blockquote { margin: 0 0 6px; }
.pn-card p { font: 400 1rem/1.4 var(--font-display); color: var(--beige); }
.pn-card p::before { content: "\201C"; color: var(--purple); }
.pn-card b { font-size: .8125rem; font-weight: 600; color: var(--beige); }
.pn-card small { font-size: .71875rem; color: rgb(247 245 238 / .6); }
.close-cta { display: grid; justify-items: center; gap: 18px; margin-top: clamp(16px, 3vw, 32px); }
@media (max-width: 699px) {
  .pnet { height: 600px; }
  .pn-node { width: calc(48px * var(--s, 1)); height: calc(48px * var(--s, 1)); }
  .pnet-cards { top: auto; height: 230px; }
  .pn-card { left: 0 !important; right: 0; top: 10px !important; width: auto; grid-template-columns: 120px 1fr; }
  .pn-card img { width: 120px; min-height: 200px; }
  .pn-card p { font-size: .9375rem; }
}
.close-cta.vnet-core { position: relative; left: auto; top: auto; translate: none; width: auto; padding: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (min-width: 760px) { .map-lv { gap: 120px; } }
.ac .day { padding: 2px 4px 4px; overflow: visible; }
.ac-ring { position: relative; width: 92px; height: 92px; }
.ac-ring b { position: absolute; inset: 0; top: 0; display: grid; place-items: center; }
.tr .dots-fig { margin: 0; padding: 6px 2px 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.pl-h { grid-template-columns: 1fr 110px 34px; }
.what .pc { grid-template-columns: 34px 1fr 110px 34px; }
.sw-stamp { right: 44px; }
@media (max-width: 759px) { .lv-card { grid-template-columns: 48px 1fr; padding: 16px; gap: 4px 12px; } .lv-ic { width: 48px; height: 48px; border-radius: 14px; } .lv-ic svg { width: 34px; height: 34px; } .lv-ok { top: -10px; right: 12px; } }

/* ================= Revision 18 ================= */
/* the nav carries the switch, so either side is one tap away anywhere on the page */
.nav-aud { flex: none; }
.nav-aud button { min-height: 32px; padding: 0 14px; font-size: .8125rem; }
.nav-aud .switch-thumb { top: 4px; bottom: 4px; }
@media (min-width: 980px) and (max-width: 1239px) { .nav-aud { position: static; translate: none; margin-left: 20px; } }
.nav.on-dark .switch { background: rgb(247 245 238 / .08); box-shadow: inset 0 0 0 1px rgb(247 245 238 / .16); }
.nav.on-dark .switch button { color: rgb(247 245 238 / .75); }
.nav.on-dark .switch button[aria-pressed="true"] { color: var(--ink); }
.nav.on-dark .switch-thumb { background: var(--beige); }
:root[data-aud="company"] .nav.on-dark .switch-thumb { background: var(--purple); }

/* the opening question, asked while the brain holds on black */
.gate { position: fixed; z-index: 75; left: 50%; bottom: max(6vh, 32px); width: min(620px, calc(100vw - 32px)); translate: -50% 0; display: grid; justify-items: center; gap: 10px; text-align: center; color: var(--beige); opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease-out), transform .7s var(--ease-out); }
.gate.on { opacity: 1; transform: none; }
.gate-hi { font: 600 .6875rem/1.4 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--purple); }
.gate-q { font: 400 clamp(1.9rem, 1.4rem + 2vw, 3rem)/1.05 var(--font-display); letter-spacing: -.03em; color: var(--beige); }
.gate-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; margin-top: 14px; }
.gate-o { position: relative; display: grid; justify-items: start; gap: 6px; padding: 20px 22px; border: 0; border-radius: 22px; text-align: left; cursor: pointer; color: var(--beige); background: linear-gradient(140deg, rgb(247 245 238 / .1), rgb(247 245 238 / .03)); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: inset 0 0 0 1px rgb(247 245 238 / .16), inset 0 1px 0 rgb(247 245 238 / .2); transition: transform .4s var(--ease-out), box-shadow .4s, background-color .4s; font: inherit; }
.gate-o:hover, .gate-o:focus-visible { outline: none; transform: translateY(-3px); background-color: rgb(187 98 222 / .18); box-shadow: inset 0 0 0 1.5px var(--purple), 0 20px 50px -20px rgb(187 98 222 / .8); }
.go-k { font: 400 1.4rem/1.1 var(--font-display); }
.gate-o small { font-size: .8125rem; color: rgb(247 245 238 / .7); }
.go-arr { position: absolute; right: 20px; top: 20px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--purple); color: var(--ink); font-weight: 600; transition: transform .4s var(--ease-out); }
.gate-o:hover .go-arr { transform: translateX(3px); }
.gate-x { margin-top: 6px; padding: 8px 14px; border: 0; border-radius: 999px; background: none; color: rgb(247 245 238 / .8); font: inherit; font-size: .875rem; cursor: pointer; }
.gate-x u { text-decoration-color: var(--purple); text-underline-offset: 4px; color: var(--beige); }
.gate-x:hover u, .gate-x:focus-visible u { color: var(--purple); }
.gate-note { font-size: .75rem; color: rgb(247 245 238 / .5); }
@media (max-width: 560px) { .gate-opts { grid-template-columns: 1fr; } .gate-o { padding: 16px 18px; } }
.pick-toast { position: fixed; z-index: 62; top: 84px; left: 50%; translate: -50% 0; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: var(--beige); font-size: .8125rem; box-shadow: 0 20px 40px -16px rgb(26 26 26 / .6); opacity: 0; transform: translateY(-8px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.pick-toast.on { opacity: 1; transform: none; }
.pick-toast b { color: var(--purple); }
.pt-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 0 4px rgb(187 98 222 / .25); }

/* the "You" avatar used wherever the visitor appears */
.you-av { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(120% 120% at 30% 20%, var(--purple), var(--purple-deep)); color: var(--white); font: 600 .75rem/1 var(--font-body); letter-spacing: .02em; box-shadow: 0 0 0 2px var(--white), 0 8px 20px -8px rgb(138 60 176 / .8); }
.band-dark .you-av { box-shadow: 0 0 0 2px var(--ink), 0 8px 20px -8px rgb(187 98 222 / .8); }

/* ---------- scenes: a cursor, presses, drags ---------- */
.scene { position: relative; }
.cur { position: absolute; left: 0; top: 0; z-index: 20; width: 22px; height: 22px; margin: -4px 0 0 -5px; pointer-events: none; opacity: 0; transition: transform .85s cubic-bezier(.6, 0, .2, 1), opacity .4s; filter: drop-shadow(0 4px 6px rgb(26 26 26 / .35)); }
.cur svg { display: block; width: 100%; height: 100%; fill: var(--ink); stroke: var(--white); stroke-width: 1.6; stroke-linejoin: round; }
.band-dark .cur svg { fill: var(--white); stroke: var(--ink); }
.scene.s1 > .cur { opacity: 1; }
.cur::after { content: ""; position: absolute; left: 5px; top: 4px; width: 28px; height: 28px; margin: -14px; border-radius: 50%; background: rgb(187 98 222 / .5); opacity: 0; }
.cur.tap::after { animation: tap .55s var(--ease-out); }
.cur.tap svg { animation: cur-press .3s var(--ease-out); }
@keyframes tap { 0% { opacity: .9; transform: scale(.2); } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes cur-press { 50% { transform: scale(.84); } }
.scene.rs, .scene.rs * { transition: none !important; animation: none !important; }
[data-dragged] { position: relative; z-index: 10; transition: transform .85s cubic-bezier(.6, 0, .2, 1), box-shadow .3s; box-shadow: 0 22px 40px -16px rgb(138 60 176 / .6) !important; }
.ui { position: relative; border-radius: 14px; background: var(--white); color: var(--ink); font-size: .75rem; box-shadow: inset 0 0 0 1px rgb(26 26 26 / .08), 0 18px 40px -24px rgb(26 26 26 / .45); }
.chip-ink { padding: 3px 9px; border-radius: 999px; background: var(--ink); color: var(--beige); font-size: .65rem; font-weight: 500; }
.you-av.sm { width: 20px; height: 20px; font-size: .45rem; box-shadow: none; }
.you-av.lg { width: 72px; height: 72px; font-size: 1rem; }
@keyframes type-in { to { clip-path: inset(0 0 0 0); } }
@keyframes slide-in { from { opacity: 0; transform: translateY(-10px); } }
@keyframes pop { from { opacity: 0; transform: scale(.7); } }

/* ---------- 1b. the explainer scenes ---------- */
.sx-vis { height: 290px; padding: 0; place-items: stretch; }
.sx-vis > .scene { display: grid; align-content: center; gap: 10px; padding: 16px; }
.sx-you .you-av { width: 32px; height: 32px; font-size: .6rem; }
.sx-you { padding: 0; background: none; box-shadow: none; }
/* learn */
.lx-player { display: grid; gap: 9px; padding: 11px; }
.lx-top { display: flex; justify-content: space-between; align-items: center; }
.lx-mod { color: rgb(26 26 26 / .68); font-size: .66rem; }
.lx-code { display: grid; gap: 2px; min-height: 82px; padding: 10px 12px; border-radius: 10px; background: var(--ink); font: 500 .66rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: rgb(247 245 238 / .85); }
.lx-code b { color: var(--purple); font-weight: 600; } .lx-code em { font-style: normal; color: var(--beige); }
.lx-code .ln { white-space: nowrap; overflow: hidden; clip-path: inset(0 100% 0 0); }
.lx.s1 .ln { animation: type-in .4s steps(22) forwards; }
.lx.s1 .l2 { animation-delay: .35s; } .lx.s1 .l3 { animation-delay: .7s; } .lx.s1 .l4 { animation-delay: 1.05s; }
.lx-bar { height: 5px; border-radius: 5px; background: rgb(26 26 26 / .08); overflow: hidden; }
.lx-bar i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--purple-deep), var(--purple)); transform: scaleX(.12); transform-origin: 0 50%; transition: transform .9s var(--ease-out); }
.lx.s2 .lx-bar i { transform: scaleX(1); }
.lx-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.lx-m { display: flex; align-items: center; gap: 7px; } .lx-m .face { width: 24px; height: 24px; } .lx-m span { display: grid; } .lx-m b { font-size: .66rem; } .lx-m small { font-size: .6rem; color: rgb(26 26 26 / .68); }
.lx-btn, .fx-btn, .ac-sub, .sp-sub, .bk-go, .md-go, .tx-send { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: 999px; background: var(--ink); color: var(--beige); font-weight: 600; font-size: .68rem; white-space: nowrap; transition: background-color .3s, color .3s, transform .2s; }
.lx-btn .b, .fx-btn .b, .ac-sub .b, .sp-sub .b, .bk-go .b, .md-go .b { display: none; align-items: center; gap: 5px; }
.lx.s4 .lx-btn, .fx.s5 .fx-btn, .p-ac.s3 .ac-sub, .p-sp.s6 .sp-sub, .c-bk.s6 .bk-go, .c-md.s4 .md-go { background: var(--purple); color: var(--ink); }
.lx.s4 .lx-btn .a, .fx.s5 .fx-btn .a, .p-ac.s3 .ac-sub .a, .p-sp.s6 .sp-sub .a, .c-bk.s6 .bk-go .a, .c-md.s4 .md-go .a { display: none; }
.lx.s4 .lx-btn .b, .fx.s5 .fx-btn .b, .p-ac.s3 .ac-sub .b, .p-sp.s6 .sp-sub .b, .c-bk.s6 .bk-go .b, .c-md.s4 .md-go .b { display: inline-flex; }
.lx-skills { display: flex; flex-wrap: wrap; gap: 5px; }
.lx-skills span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 999px; background: rgb(255 255 255 / .9); box-shadow: inset 0 0 0 1px rgb(26 26 26 / .1); font-size: .64rem; color: rgb(26 26 26 / .7); }
.lx-skills .new { display: none; background: var(--purple); color: var(--ink); box-shadow: 0 0 0 4px rgb(187 98 222 / .2); font-weight: 600; }
.lx.s5 .lx-skills .new { display: inline-flex; animation: pop .5s var(--ease-out); }
/* work: drag a card to Shipped */
.wx-board { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 9px; }
.wx-3 { grid-template-columns: repeat(3, 1fr); }
.wx-col { display: grid; align-content: start; gap: 6px; min-height: 150px; padding: 7px; border-radius: 10px; background: rgb(26 26 26 / .035); }
.wx-h { display: flex; justify-content: space-between; font: 600 .58rem/1.4 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: rgb(26 26 26 / .68); }
.wx-h em { font-style: normal; }
.wx-ship .wx-h { color: var(--purple-deep); }
.wx-card { display: grid; gap: 5px; justify-items: start; padding: 8px 9px; border-radius: 9px; background: var(--white); box-shadow: inset 0 0 0 1px rgb(26 26 26 / .08), 0 4px 10px -6px rgb(26 26 26 / .25); }
.wx-card b { font-weight: 500; font-size: .68rem; line-height: 1.3; }
.wx-meta { display: flex; width: 100%; justify-content: space-between; align-items: center; font-size: .58rem; color: rgb(26 26 26 / .68); }
.wx-meta .face { width: 18px; height: 18px; box-shadow: none; }
.wx-slot { height: 66px; border-radius: 9px; box-shadow: inset 0 0 0 1.5px rgb(187 98 222 / 0); transition: box-shadow .4s; }
.wx.s2 .wx-slot { box-shadow: inset 0 0 0 1.5px rgb(187 98 222 / .5); background: rgb(187 98 222 / .06); }
.wx.s4 .wx-drag { box-shadow: inset 0 0 0 1.5px var(--purple), 0 0 24px -4px rgb(187 98 222 / .6) !important; }
.wx-toast { position: absolute; left: 50%; bottom: 12px; translate: -50% 0; z-index: 12; display: flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; background: var(--ink); color: var(--beige); font-size: .68rem; white-space: nowrap; opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .5s var(--ease-out); }
.wx-toast strong { color: var(--purple); font-weight: 600; }
.wx.s5 .wx-toast { opacity: 1; transform: none; }
.wx-n { display: inline-grid; font-weight: 700; } .wx-n b { grid-area: 1 / 1; color: var(--purple); transition: opacity .4s, transform .4s; }
.wx-n .c1 { opacity: 0; transform: translateY(8px); }
.wx.s5 .wx-n .c0 { opacity: 0; transform: translateY(-8px); } .wx.s5 .wx-n .c1 { opacity: 1; transform: none; transition-delay: .5s; }
/* hire: an inbox */
.hx-mail { height: 214px; overflow: hidden; }
.hx-top { display: flex; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid rgb(26 26 26 / .07); font-size: .72rem; }
.hx-n { color: var(--purple-deep); font-weight: 600; font-size: .64rem; opacity: 0; transition: opacity .4s; } .hx.s1 .hx-n { opacity: 1; }
.hx-row { display: grid; grid-template-columns: 10px 1fr auto; column-gap: 7px; padding: 8px 12px; border-bottom: 1px solid rgb(26 26 26 / .06); }
.hx-row > span:first-child { grid-column: 2; }
.hx-from { font-weight: 600; font-size: .68rem; } .hx-sub { grid-column: 2; font-size: .66rem; color: rgb(26 26 26 / .6); } .hx-time { grid-column: 3; grid-row: 1; font-size: .58rem; color: rgb(26 26 26 / .68); }
.hx-dot { grid-row: span 2; align-self: center; width: 7px; height: 7px; border-radius: 50%; background: var(--purple); }
.hx-new { max-height: 0; opacity: 0; padding-block: 0; overflow: hidden; background: rgb(187 98 222 / .08); transition: max-height .6s var(--ease-out), opacity .5s, padding .6s; }
.hx.s1 .hx-new { max-height: 60px; opacity: 1; padding-block: 8px; }
.hx-open { position: absolute; inset: 37px 0 0; display: grid; align-content: start; gap: 8px; padding: 14px; background: var(--white); transform: translateX(102%); transition: transform .55s var(--ease-out); }
.hx.s3 .hx-open { transform: none; }
.hx-open b { font: 400 1.15rem/1.2 var(--font-display); } .hx-open p { font-size: .72rem; line-height: 1.45; color: rgb(26 26 26 / .7); }
.hx-btns { display: flex; gap: 8px; margin-top: 4px; }
.hx-acc, .hx-rep { padding: 7px 14px; border-radius: 999px; font-weight: 600; font-size: .68rem; }
.hx-acc { background: var(--ink); color: var(--beige); transition: background-color .3s, color .3s; } .hx-rep { box-shadow: inset 0 0 0 1px rgb(26 26 26 / .15); }
.hx.s5 .hx-acc { background: var(--purple); color: var(--ink); }
.hx-day { position: absolute; right: 22px; bottom: 22px; z-index: 13; display: grid; place-items: center; padding: 9px 16px; border-radius: 14px; background: var(--ink); color: var(--beige); box-shadow: 0 20px 40px -14px rgb(138 60 176 / .8); opacity: 0; transform: scale(.6) rotate(-6deg); transition: opacity .4s, transform .6s var(--ease-out); }
.hx-day small { font-size: .55rem; letter-spacing: .14em; text-transform: uppercase; opacity: .7; } .hx-day b { font: 400 1.35rem/1.1 var(--font-display); color: var(--purple); }
.hx.s6 .hx-day { opacity: 1; transform: rotate(-3deg); }
.hx .burst { left: auto; top: auto; right: 70px; bottom: 50px; z-index: 12; }
.hx.s6 .burst i { animation: burst 1.1s var(--ease-out) forwards; }
/* company: brief, cohort, channel */
.fx-form { display: grid; gap: 7px; padding: 12px; }
.fx-h { display: flex; justify-content: space-between; align-items: baseline; } .fx-h b { font: 400 1.05rem/1 var(--font-display); } .fx-h small { color: rgb(26 26 26 / .68); font-size: .64rem; }
.fx-f { display: grid; grid-template-columns: 46px 1fr; align-items: center; padding: 8px 10px; border-radius: 9px; box-shadow: inset 0 0 0 1px rgb(26 26 26 / .1); }
.fx-f span { font-size: .62rem; color: rgb(26 26 26 / .68); } .fx-f b { font-weight: 500; font-size: .72rem; overflow: hidden; white-space: nowrap; }
.fx-f em { display: inline-block; font-style: normal; clip-path: inset(0 100% 0 0); }
.fx.s1 .f1 em, .fx.s2 .f2 em, .fx.s3 .f3 em { animation: type-in .8s steps(18) forwards; }
.fx.s1 .f1, .fx.s2:not(.s3) .f2, .fx.s3:not(.s4) .f3 { box-shadow: inset 0 0 0 1.5px var(--purple); }
.fx-btn { justify-content: center; margin-top: 2px; padding: 9px; }
.tx-dash { display: grid; gap: 6px; padding: 11px; }
.tx-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2px; } .tx-h b { font-size: .72rem; } .tx-h small { font-size: .6rem; color: rgb(26 26 26 / .68); }
.tx-r { display: grid; grid-template-columns: 16px 26px 1fr 60px auto; align-items: center; gap: 7px; padding: 6px 8px; border-radius: 9px; box-shadow: inset 0 0 0 1px rgb(26 26 26 / .08); transition: background-color .3s, box-shadow .3s; }
.tx-r .face { width: 26px; height: 26px; box-shadow: none; }
.tx-n { display: grid; } .tx-n b { font-size: .66rem; } .tx-n small { font-size: .58rem; color: rgb(26 26 26 / .68); }
.tx-ck { width: 16px; height: 16px; display: grid; place-items: center; border-radius: 5px; box-shadow: inset 0 0 0 1.5px rgb(26 26 26 / .2); color: transparent; transition: background-color .25s, color .25s; }
.tx-b { height: 5px; border-radius: 5px; background: rgb(26 26 26 / .08); overflow: hidden; }
.tx-b i { display: block; height: 100%; width: var(--w); background: linear-gradient(90deg, var(--purple-deep), var(--purple)); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.2s var(--ease-out); }
.tx.s1 .tx-b i { transform: none; }
.tx-r em { font-style: normal; font-size: .58rem; font-weight: 700; color: var(--purple-deep); opacity: 0; transition: opacity .4s; } .tx.s2 .tx-r em { opacity: 1; }
.tx.s4 .tx-r1 .tx-ck, .tx.s6 .tx-r2 .tx-ck { background: var(--purple); color: var(--ink); box-shadow: none; }
.tx.s4 .tx-r1, .tx.s6 .tx-r2 { background: rgb(187 98 222 / .08); box-shadow: inset 0 0 0 1px rgb(187 98 222 / .45); }
.tx-send { justify-self: end; }
.tx.s8 .tx-send { background: var(--purple); color: var(--ink); }
.tx-toast, .cx-toast { justify-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; background: var(--ink); color: var(--beige); font-size: .68rem; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .5s var(--ease-out); }
.tx-toast .ck { color: var(--purple); }
.tx.s9 .tx-toast { opacity: 1; transform: none; }
.cx-chan { display: grid; gap: 8px; padding: 0 0 10px; overflow: hidden; }
.cx-h { display: flex; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid rgb(26 26 26 / .07); } .cx-h b { font-size: .72rem; } .cx-h span { font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--purple-deep); }
.cx-sys { display: flex; align-items: center; gap: 4px; margin: 0 12px; padding: 7px 10px; border-radius: 9px; background: rgb(187 98 222 / .08); font-size: .66rem; color: rgb(26 26 26 / .7); opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .5s var(--ease-out); }
.cx-sys .face { width: 20px; height: 20px; margin-right: -2px; box-shadow: 0 0 0 2px var(--white); }
.cx-sys span { margin-left: 8px; }
.cx-msg { display: flex; gap: 8px; margin: 0 12px; padding: 4px; border-radius: 10px; opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .5s var(--ease-out), background-color .3s; }
.cx-msg .face { width: 28px; height: 28px; box-shadow: none; }
.cx-msg > span { display: grid; } .cx-msg b { font-size: .68rem; } .cx-msg small { font-size: .56rem; color: rgb(26 26 26 / .68); } .cx-msg > span > span { font-size: .7rem; line-height: 1.4; }
.chx.s1 .cx-sys, .chx.s2 .cx-msg { opacity: 1; transform: none; }
.chx.s4 .cx-msg { background: rgb(26 26 26 / .04); }
.cx-re { margin: 0 12px 0 48px; height: 22px; }
.cx-rx { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: rgb(187 98 222 / .15); box-shadow: inset 0 0 0 1px rgb(187 98 222 / .5); color: var(--purple-deep); font-size: .64rem; opacity: 0; }
.chx.s5 .cx-rx { opacity: 1; animation: pop .45s var(--ease-out); }
.cx-in { margin: 0 12px; padding: 8px 10px; border-radius: 9px; box-shadow: inset 0 0 0 1px rgb(26 26 26 / .12); font-size: .64rem; color: rgb(26 26 26 / .68); }

/* ---------- 2. people strip and the reworked bento ---------- */
.ticker { display: none; }
.pstrip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; margin-top: 28px; }
.pp-row { position: relative; display: flex; align-items: center; }
.pp-row::before { content: ""; position: absolute; left: 20px; right: 20px; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, rgb(187 98 222 / .7), transparent); }
.pp-n { position: relative; margin-left: -6px; animation: float2 5s var(--ease-in-out) infinite; animation-delay: calc(var(--i) * -.8s); }
.pp-n:first-child { margin-left: 0; }
.pp-n .ph { display: block; width: 46px; height: 46px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--ink), 0 0 0 3.5px rgb(187 98 222 / .6); transition: transform .4s var(--ease-out); }
.pp-n:hover .ph { transform: scale(1.25); position: relative; z-index: 2; }
.pp-tip { position: absolute; left: 50%; bottom: calc(100% + 10px); translate: -50% 0; z-index: 3; display: grid; padding: 7px 11px; border-radius: 10px; background: var(--beige); color: var(--ink); white-space: nowrap; font-size: .72rem; opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .3s, transform .3s; }
.pp-tip small { color: rgb(26 26 26 / .6); font-size: .66rem; }
.pp-n:hover .pp-tip { opacity: 1; transform: none; }
@keyframes float2 { 50% { transform: translateY(-4px); } }
.pp-cap { max-width: 34ch; font-size: .875rem; color: var(--fg-2); text-align: left; }
.band-dark .ui { background: rgb(247 245 238 / .05); color: var(--beige); box-shadow: inset 0 0 0 1px rgb(247 245 238 / .08); }
.wx-dark .wx-col { background: rgb(247 245 238 / .03); }
.wx-dark .wx-h { color: rgb(247 245 238 / .55); } .wx-dark .wx-ship .wx-h { color: var(--purple); }
.wx-dark .wx-card { background: rgb(247 245 238 / .07); box-shadow: inset 0 0 0 1px rgb(247 245 238 / .08); }
.wx-dark .wx-meta { color: rgb(247 245 238 / .55); }
.wx-dark .wx-toast { background: var(--purple); color: var(--ink); } .wx-dark .wx-toast .wx-n b { color: var(--ink); }
.wx-dark .wx-slot { height: 64px; }
.what .kb-top { margin-bottom: 10px; }
/* proof feed */
.pf2-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pf2-top > span:nth-child(2) { display: grid; flex: 1; } .pf2-top b { font-weight: 500; } .pf2-top small { font-size: .7rem; color: var(--fg-3); }
.pf2-n { display: grid; justify-items: end; } .pf2-n b { font: 400 2rem/1 var(--font-display); color: var(--purple); }
.pf2-n b.bump { animation: bump .5s var(--ease-out); }
@keyframes bump { 40% { transform: scale(1.25); } }
.pf2-feed { display: grid; gap: 6px; height: 200px; overflow: hidden; mask: linear-gradient(var(--ink) 70%, transparent); -webkit-mask: linear-gradient(var(--ink) 70%, transparent); }
.pf2-feed li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 11px; background: rgb(247 245 238 / .05); box-shadow: inset 0 0 0 1px rgb(247 245 238 / .08); font-size: .75rem; }
.pf2-feed li b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf2-feed li em { color: var(--purple); }
.pf2-feed li.in { animation: slide-in .6s var(--ease-out); background: rgb(187 98 222 / .14); box-shadow: inset 0 0 0 1px rgb(187 98 222 / .5); }
/* shortlist scene */
.px { min-height: 230px; }
.px-list { padding: 4px 0; background: none !important; box-shadow: none !important; display: grid; gap: 7px; }
.px-r { display: grid; grid-template-columns: 30px 1fr 70px 26px auto; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 11px; background: rgb(247 245 238 / .04); box-shadow: inset 0 0 0 1px rgb(247 245 238 / .08); }
.px-r .face { width: 30px; height: 30px; box-shadow: none; }
.px-r > span:nth-child(2) { display: grid; } .px-r b { font-weight: 500; font-size: .75rem; } .px-r small { font-size: .62rem; color: var(--fg-3); }
.px-r em { font: 400 1rem/1 var(--font-display); font-style: normal; text-align: right; }
.px-view { padding: 5px 9px; border-radius: 999px; font-size: .62rem; font-weight: 600; box-shadow: inset 0 0 0 1px rgb(247 245 238 / .2); white-space: nowrap; }
.px.s2 .px-r1 .px-view { background: var(--purple); color: var(--ink); box-shadow: none; }
.px-peek { position: absolute; right: 0; top: 0; bottom: 18px; z-index: 5; width: min(240px, 70%); padding: 14px; border-radius: 14px; background: var(--ink); box-shadow: inset 0 0 0 1px rgb(187 98 222 / .5), -20px 0 50px -20px rgb(26 26 26 / .9); transform: translateX(110%); opacity: 0; transition: transform .55s var(--ease-out), opacity .4s; }
.px.s2 .px-peek { transform: none; opacity: 1; }
.px-ph { display: flex; gap: 9px; align-items: center; margin-bottom: 10px; } .px-ph .face { width: 34px; height: 34px; } .px-ph > span { display: grid; } .px-ph b { font-size: .78rem; } .px-ph small { font-size: .64rem; color: var(--fg-3); }
.px-peek ul, .sh2-peek ul { display: grid; gap: 7px; } .px-peek li, .sh2-peek li { display: flex; gap: 7px; align-items: center; font-size: .72rem; } .px-peek .ck, .sh2-peek .ck { color: var(--purple); }

/* ---------- 3. five steps: weight ---------- */
.how .sec-lede.center { margin-inline: auto; }
.stp-left { display: grid; align-content: center; gap: 18px; }
.stp-meter { display: none; align-items: baseline; gap: 10px; }
.stp-meter b { font: 400 clamp(4rem, 3rem + 4vw, 7rem)/.9 var(--font-display); letter-spacing: -.05em; background: linear-gradient(160deg, var(--purple), var(--purple-deep)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stp-meter span { font: 400 1.4rem/1 var(--font-display); color: var(--fg-3); }
.stp-win { box-shadow: inset 0 0 0 1px var(--rule), 0 1px 0 rgb(255 255 255 / .6), 0 60px 120px -50px rgb(138 60 176 / .55), 0 30px 60px -40px rgb(26 26 26 / .4); }
.stp-panes { background: radial-gradient(70% 60% at 80% 0%, rgb(187 98 222 / .1), transparent 70%), linear-gradient(rgb(26 26 26 / .025) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgb(26 26 26 / .025) 1px, transparent 1px) 0 0 / 24px 24px; }
.stp-pane > .pn { width: min(100%, 600px); }
.stp-pane .scene { display: grid; gap: 14px; }
.pane-h { display: block; margin-bottom: 8px; font: 600 .6875rem/1.4 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
@media (min-width: 960px) { .stp-meter { display: flex; } .how .sec-title { font-size: clamp(2.6rem, 1.6rem + 3vw, 4.4rem); max-width: 22ch; } }
/* academy */
.ac2 { display: grid; grid-template-columns: 180px 1fr; gap: 18px 24px; align-items: center; }
.ac2-day { display: grid; gap: 6px; }
.ac2-day li { padding: 8px 12px; border-radius: 10px; background: var(--white); box-shadow: inset 0 0 0 1px var(--rule); font-size: .78rem; color: var(--fg-2); }
.ac2-day li.d { color: var(--fg-3); text-decoration: line-through; text-decoration-color: rgb(187 98 222 / .7); }
.ac2-day li.n { background: var(--ink); color: var(--beige); box-shadow: 0 0 0 4px rgb(187 98 222 / .18); }
.ac2-r { display: grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: center; }
.ac2-r .pt-ring { width: 120px; height: 120px; }
.p-ac.s1 .pt-ring .r1 { stroke-dasharray: 72 100; } .p-ac.s1 .pt-bars i { background-size: var(--w) 100%, 100% 100%; }
.ac2-f { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--rule); }
.ac-sub { padding: 10px 16px; font-size: .78rem; }
.ac-rev { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-radius: 12px; background: var(--white); box-shadow: inset 0 0 0 1px rgb(187 98 222 / .45), 0 14px 30px -18px rgb(138 60 176 / .6); opacity: 0; transform: translateX(-10px); transition: opacity .5s, transform .5s var(--ease-out); }
.ac-rev .face { width: 30px; height: 30px; } .ac-rev > span { display: grid; } .ac-rev b { font-size: .78rem; } .ac-rev small { font-size: .7rem; color: var(--fg-3); }
.p-ac.s4 .ac-rev { opacity: 1; transform: none; }
/* sprint */
.sp2 { display: grid; gap: 12px; }
.ps-check li i { transition: background-color .25s, color .25s, box-shadow .25s; }
.p-sp.s1 .c1 i, .p-sp.s2 .c2 i, .p-sp.s3 .c3 i, .p-sp.s4 .c4 i { background: var(--purple); color: var(--ink); box-shadow: none; }
.p-sp.s1 .c1, .p-sp.s2 .c2, .p-sp.s3 .c3, .p-sp.s4 .c4 { color: var(--fg); }
.sp-f { display: flex; align-items: center; gap: 12px; }
.sp-sub { padding: 10px 18px; font-size: .78rem; }
.sp-sel { padding: 8px 14px; border-radius: 999px; background: rgb(187 98 222 / .14); box-shadow: inset 0 0 0 1px var(--purple); color: var(--purple-deep); font-weight: 600; font-size: .78rem; opacity: 0; transform: scale(.8); transition: opacity .4s, transform .5s var(--ease-out); }
.p-sp.s7 .sp-sel { opacity: 1; transform: none; }
.ps-check li { animation: none !important; } .ps-check i { animation: none !important; }
/* capsule */
.cp2 { display: grid; gap: 16px; }
.cp2-team { display: flex; align-items: flex-end; gap: 14px; }
.cp2-team .cp-m .face { width: 40px; height: 40px; }
.cp2-team .cp-you .you-av { width: 40px; height: 40px; }
.cp2-mo { margin-left: auto; padding: 6px 12px; border-radius: 999px; background: var(--ink); color: var(--beige); font-size: .72rem; }
.cp2 .pc-out { position: relative; }
.cp2 .pc-graph i { transform: scaleY(0); }
.p-cp.s1 .pc-graph i { transform: none; }
.p-cp.s3 .pc-graph i:nth-child(10) { background: var(--ink); }
.cp-tip { position: absolute; right: 18%; top: 18px; padding: 6px 10px; border-radius: 9px; background: var(--ink); color: var(--beige); font-size: .72rem; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .4s var(--ease-out); }
.cp-tip b { color: var(--purple); }
.p-cp.s3 .cp-tip { opacity: 1; transform: none; }
.cp-msg { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--white); box-shadow: inset 0 0 0 1px var(--rule); font-size: .8rem; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .5s var(--ease-out); }
.cp-msg .face { width: 28px; height: 28px; } .cp-msg span { display: grid; } .cp-msg b { font-size: .7rem; color: var(--fg-3); font-weight: 600; }
.p-cp.s4 .cp-msg { opacity: 1; transform: none; }
/* proof of work: everything counts */
.pw2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.pw2-src { display: grid; gap: 7px; }
.src { display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; align-items: center; padding: 9px 11px; border-radius: 12px; background: var(--white); box-shadow: inset 0 0 0 1px var(--rule); }
.src .tg { grid-column: 1; justify-self: start; } .src b { grid-column: 1; font-weight: 500; font-size: .76rem; }
.src-add { grid-column: 2; grid-row: 1 / span 2; padding: 6px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgb(26 26 26 / .2); font-size: .68rem; font-weight: 600; white-space: nowrap; transition: background-color .3s, color .3s; }
.p-pw.s2 .src1 .src-add, .p-pw.s4 .src2 .src-add, .p-pw.s6 .src3 .src-add, .p-pw.s7 .src4 .src-add { background: var(--purple); color: var(--ink); box-shadow: none; }
.p-pw.s2 .src1, .p-pw.s4 .src2, .p-pw.s6 .src3, .p-pw.s7 .src4 { opacity: .55; }
.pw2-card { padding: 14px; border-radius: 16px; background: var(--ink); color: var(--beige); box-shadow: 0 30px 60px -30px rgb(138 60 176 / .7); }
.pw2-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pw2-h > span:nth-child(2) { display: grid; flex: 1; } .pw2-h b { font-weight: 500; font-size: .85rem; } .pw2-h small { font-size: .68rem; color: rgb(247 245 238 / .6); }
.pw2-n { display: inline-grid; } .pw2-n b { grid-area: 1 / 1; font: 400 1.9rem/1 var(--font-display); color: var(--purple); opacity: 0; transition: opacity .3s; }
.pw2-n .n0 { opacity: 1; }
.p-pw.s2 .n0 { opacity: 0; } .p-pw.s2 .n1 { opacity: 1; }
.p-pw.s4 .n1 { opacity: 0; } .p-pw.s4 .n2 { opacity: 1; }
.p-pw.s6 .n2 { opacity: 0; } .p-pw.s6 .n3 { opacity: 1; }
.p-pw.s7 .n3 { opacity: 0; } .p-pw.s7 .n4 { opacity: 1; }
.pw2-feed { display: flex; flex-direction: column-reverse; gap: 6px; }
.pw2-feed li { display: none; grid-template-columns: auto 1fr; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: rgb(247 245 238 / .06); font-size: .74rem; }
.pw2-feed li b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw2-feed .f0, .pw2-feed .f1 { display: grid; }
.p-pw.s2 .f2, .p-pw.s4 .f3, .p-pw.s6 .f4, .p-pw.s7 .f5 { display: grid; animation: slide-in .5s var(--ease-out); background: rgb(187 98 222 / .2); }
.pw2-ready { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; padding: 6px 12px; border-radius: 999px; background: rgb(247 245 238 / .1); font-size: .72rem; font-weight: 600; transition: background-color .4s, color .4s, box-shadow .4s; }
.pw2-ready i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.p-pw.s8 .pw2-ready { background: var(--purple); color: var(--ink); box-shadow: 0 0 0 6px rgb(187 98 222 / .2); }
/* day 0 */
.d02 { position: relative; display: grid; grid-template-columns: 150px 1fr; gap: 28px; align-items: center; }
.d02 .pd-cal { transform: rotateX(80deg); opacity: 0; transition: transform .7s var(--ease-out), opacity .4s; }
.p-d0.s1 .pd-cal { transform: none; opacity: 1; }
.d02 .pd-notes li { transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.p-d0.s2 .n1, .p-d0.s3 .n2, .p-d0.s4 .n3 { opacity: 1; transform: none; }
.d02 .burst { left: 75px; top: 50%; }
.p-d0.s5 .burst i { animation: burst 1.2s var(--ease-out) forwards; }
/* company panes */
.bk2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: center; }
.bk-days span, .bk-slots span { transition: background-color .3s, color .3s, box-shadow .3s; }
.c-bk.s2 .bk-days span:nth-child(4) { background: var(--ink); color: var(--beige); } .c-bk.s2 .bk-days span:nth-child(4) b { color: var(--purple); }
.c-bk.s4 .bk-slots span:nth-child(2) { box-shadow: inset 0 0 0 1.5px var(--purple); background: rgb(187 98 222 / .1); font-weight: 600; }
.bk-go { justify-self: start; padding: 10px 18px; font-size: .8rem; }
.sh2wrap { position: relative; min-height: 260px; }
.sh2 { display: grid; gap: 10px; }
.sh2 li { display: grid; grid-template-columns: 42px 1fr 34px auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--white); box-shadow: inset 0 0 0 1px var(--rule); opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .5s var(--ease-out); }
.sh2 li:nth-child(2) { transition-delay: .15s; } .sh2 li:nth-child(3) { transition-delay: .3s; }
.c-sh.s1 .sh2 li { opacity: 1; transform: none; }
.sh2 .face { width: 42px; height: 42px; } .sh2 li > span:nth-child(2) { display: grid; } .sh2 b { font-weight: 500; } .sh2 small { font-size: .72rem; color: var(--fg-3); }
.sh2 em { font: 400 1.15rem/1 var(--font-display); font-style: normal; text-align: right; }
.sh2 .px-view { box-shadow: inset 0 0 0 1px rgb(26 26 26 / .2); }
.c-sh.s3 .sh2 li:first-child .px-view { background: var(--purple); box-shadow: none; }
.sh2-peek { position: absolute; right: -8px; top: -8px; bottom: -8px; width: 56%; padding: 18px; border-radius: 18px; background: var(--ink); color: var(--beige); box-shadow: -30px 0 60px -30px rgb(26 26 26 / .6); transform: translateX(30px); opacity: 0; transition: transform .55s var(--ease-out), opacity .4s; display: grid; align-content: start; gap: 12px; }
.c-sh.s3 .sh2-peek { transform: none; opacity: 1; }
.sh2-peek .px-ph small { color: rgb(247 245 238 / .6); }
.sh2-ok { justify-self: start; padding: 8px 14px; border-radius: 999px; background: var(--purple); color: var(--ink); font-weight: 600; font-size: .75rem; }
.md2 { display: grid; gap: 10px; }
.md2 .md-o, .md2 .md-o .rd { animation: none !important; transition: box-shadow .3s, background-color .3s; }
.c-md.s2 .md-o.o2 { box-shadow: inset 0 0 0 1.5px var(--purple), 0 16px 30px -20px rgb(187 98 222 / .7); }
.c-md.s2 .md-o.o2 .rd { box-shadow: inset 0 0 0 5px var(--purple); }
.md-go { justify-self: end; padding: 10px 18px; font-size: .8rem; }
.tl2 { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; align-items: center; }
.tl2 .pn-tools { position: relative; height: 240px; }
.tl-feed { display: grid; gap: 8px; }
.tl-feed li { display: grid; grid-template-columns: 22px 1fr; gap: 0 10px; align-items: center; padding: 9px 12px; border-radius: 12px; background: var(--white); box-shadow: inset 0 0 0 1px var(--rule); font-size: .78rem; opacity: 0; transform: translateX(12px); transition: opacity .4s, transform .5s var(--ease-out); }
.tl-feed i { grid-row: span 2; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; background: var(--purple); color: var(--ink); }
.tl-feed small { font-size: .66rem; color: var(--fg-3); }
.c-tl.s1 .a1, .c-tl.s2 .a2, .c-tl.s3 .a3, .c-tl.s4 .a4 { opacity: 1; transform: none; }
.rp2 { position: relative; }
.rp2 svg { display: block; width: 100%; height: 240px; overflow: visible; }
.rp2 .rc-ab, .rp2 .rc-fresh { stroke-dashoffset: 600; transition: stroke-dashoffset 1.6s var(--ease-out); }
.c-d0.s1 .rc-ab, .c-d0.s1 .rc-fresh { stroke-dashoffset: 0; }
.rp2-tag { position: absolute; left: 8%; top: 12%; padding: 7px 12px; border-radius: 10px; background: var(--ink); color: var(--beige); font-size: .75rem; opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .5s var(--ease-out); }
.c-d0.s2 .rp2-tag { opacity: 1; transform: none; }
@media (max-width: 600px) {
  .ac2, .ac2-r, .pw2, .d02, .bk2, .tl2 { grid-template-columns: 1fr; }
  .ac2-r { justify-items: center; } .ac2-r .pt-bars { width: 100%; }
  .sh2-peek { width: 80%; }
  .tl2 .pn-tools { height: 200px; }
}

/* ---------- 4. the network: one line at a time ---------- */
.net-seq { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.net-lines { display: grid; }
.net-line { grid-area: 1 / 1; font-size: clamp(2rem, 1.3rem + 2.8vw, 3.6rem); line-height: 1.05; max-width: 18ch; letter-spacing: -.035em; }
.net-line::before { display: none; }
.js-motion .net-line > span { transition: opacity .7s var(--ease-out), transform .8s var(--ease-out), filter .7s var(--ease-out); }
.js-motion .net-line.wait > span { opacity: 0; transform: translateY(40px); filter: blur(6px); }
.js-motion .net-line.done > span { opacity: 0; transform: translateY(-40px); filter: blur(6px); }
.js-motion .net-line.on > span { opacity: 1; transform: none; filter: none; }
.net-prog { display: flex; gap: 8px; margin-top: 32px; }
.net-prog i { width: 40px; height: 3px; border-radius: 3px; background: rgb(247 245 238 / .18); transition: background-color .5s; }
.net-prog i.on { background: var(--purple); box-shadow: 0 0 10px rgb(187 98 222 / .6); }

/* ---------- 5. three-body: the problem, then the fix ---------- */
.tb-mode { position: absolute; left: 16px; top: 16px; z-index: 2; display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: rgb(255 255 255 / .8); box-shadow: inset 0 0 0 1px var(--rule); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.tb-mode button { min-height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: none; font: 500 .78rem/1 var(--font-body); color: var(--fg-2); cursor: pointer; transition: background-color .4s, color .4s; }
.tb-mode button[aria-pressed="true"] { background: var(--ink); color: var(--beige); }
.is-order .tb-mode button[aria-pressed="true"] { background: var(--purple); color: var(--ink); }
.tb-cap { position: absolute; left: 0; right: 0; bottom: 16px; z-index: 2; text-align: center; font: 400 1.05rem/1.2 var(--font-display); color: var(--fg); }
.tb-cap span { display: inline-block; padding: 7px 14px; border-radius: 999px; background: rgb(255 255 255 / .85); box-shadow: inset 0 0 0 1px var(--rule); }
.tb-stage .c-order, .tb-stage.is-order .c-chaos { display: none; }
.tb-stage.is-order .c-order { display: inline-block; }
.tb-list li { grid-template-columns: 14px 110px minmax(0, 1fr); }
.tb-list .tb-s { display: none; color: var(--purple-deep); font-weight: 500; }
.tb-list.is-order .tb-p { display: none; } .tb-list.is-order .tb-s { display: block; }
.tb-stage { aspect-ratio: 1.15; }

/* ---------- 6. Proof of Work, as an actual product ---------- */
.pw3 { position: relative; max-width: 1120px; margin: clamp(36px, 5vw, 64px) auto 0; border-radius: 22px; overflow: hidden; background: linear-gradient(rgb(247 245 238 / .065), rgb(247 245 238 / .025)); box-shadow: inset 0 0 0 1px rgb(247 245 238 / .1), 0 60px 120px -50px rgb(187 98 222 / .35), 0 30px 70px -36px rgb(26 26 26 / .9); }
.pw3-app { display: grid; grid-template-columns: minmax(0, 1fr); }
.pw3-side { display: none; }
.pw3-main { padding: 18px; display: grid; gap: 16px; }
.pw3-top { display: flex; align-items: center; gap: 12px; font-size: .78rem; }
.pw3-crumb { color: var(--fg-3); } .pw3-crumb i { font-style: normal; margin: 0 6px; opacity: .5; }
.pw3-search { display: none; margin-left: auto; padding: 7px 14px; border-radius: 999px; background: rgb(247 245 238 / .05); box-shadow: inset 0 0 0 1px rgb(247 245 238 / .1); color: var(--fg-3); min-width: 200px; }
.pw3-share { margin-left: auto; padding: 8px 14px; border-radius: 999px; background: var(--purple); color: var(--ink); font-weight: 600; transition: transform .2s; }
.pw3.s3 .pw3-share { transform: scale(.95); }
.pw3-id { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.pw3-who { flex: 1; min-width: 180px; display: grid; gap: 3px; }
.pw3-who b { display: inline-flex; align-items: center; gap: 8px; font: 400 1.6rem/1.1 var(--font-display); }
.pw3-who small { color: var(--fg-3); font-size: .82rem; }
.pw3-kpi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pw3-kpi > div { position: relative; padding: 14px 16px; border-radius: 14px; background: rgb(247 245 238 / .045); box-shadow: inset 0 0 0 1px rgb(247 245 238 / .08); overflow: hidden; }
.pw3-kpi small { font-size: .72rem; color: var(--fg-3); }
.pw3-kpi b { display: block; margin-top: 4px; font: 400 1.9rem/1 var(--font-display); letter-spacing: -.03em; }
.pw3-kpi svg { position: absolute; right: 12px; bottom: 14px; width: 60px; height: 18px; fill: none; stroke: var(--purple); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-dasharray: 90; stroke-dashoffset: 90; transition: stroke-dashoffset 1.4s var(--ease-out) .3s; }
.pw3.seen .pw3-kpi svg { stroke-dashoffset: 0; }
.pw3-grid { display: grid; gap: 12px; }
.pw3-panel { position: relative; padding: 16px; border-radius: 16px; background: rgb(247 245 238 / .04); box-shadow: inset 0 0 0 1px rgb(247 245 238 / .08); }
.pw3-bars { display: flex; align-items: flex-end; gap: 6px; height: 140px; padding-top: 10px; border-bottom: 1px solid rgb(247 245 238 / .1); }
.pw3-bars i { position: relative; flex: 1; height: var(--h); border-radius: 5px 5px 2px 2px; background: linear-gradient(var(--purple), rgb(187 98 222 / .25)); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .8s var(--ease-out) var(--d), background-color .3s; }
.pw3.seen .pw3-bars i { transform: none; }
.pw3-bars i span { position: absolute; left: 50%; top: -18px; translate: -50% 0; font-size: .6rem; color: var(--fg-3); opacity: 0; transition: opacity .3s; }
.pw3-bars i:last-child span { opacity: 1; color: var(--purple); }
.pw3-tip { position: absolute; right: 16px; top: 46px; padding: 6px 10px; border-radius: 9px; background: var(--beige); color: var(--ink); font-size: .72rem; font-weight: 500; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .4s var(--ease-out); }
.pw3.s5 .pw3-tip { opacity: 1; transform: none; }
.pw3.s5 .pw3-bars i:nth-child(12) { background: var(--beige); }
.pw3-sr { display: grid; grid-template-columns: 110px 1fr 24px; align-items: center; gap: 10px; margin-top: 10px; font-size: .78rem; }
.pw3-sr .tg { justify-self: start; }
.pw3-sr i { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--purple-deep), var(--purple)) 0 0 / var(--w) 100% no-repeat, rgb(247 245 238 / .08); transition: background-size 1.4s var(--ease-out); }
.js-motion .pw3:not(.seen) .pw3-sr i { background-size: 0 100%, 100% 100%; }
.pw3-sr b { text-align: right; font: 400 1rem/1 var(--font-display); }
.pw3-live { display: inline-flex; align-items: center; gap: 6px; } .pw3-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--purple); animation: blip 1.6s var(--ease-in-out) infinite; }
.pw3-feed { display: grid; gap: 8px; align-content: start; }
.pw3-feed .pw-card { grid-template-columns: auto 1fr auto; padding: 10px 12px; }
.pw3-feed .pw-new { height: 58px; }
.pw3-sh { margin-top: 18px; }
.pw3-toast { position: absolute; right: 18px; top: 92px; z-index: 6; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; background: var(--beige); color: var(--ink); font-size: .8rem; font-weight: 500; box-shadow: 0 20px 40px -14px rgb(26 26 26 / .8); opacity: 0; transform: translateY(-8px); transition: opacity .4s, transform .5s var(--ease-out); }
.pw3-toast .ck { color: var(--purple-deep); }
.pw3.s3:not(.s5) .pw3-toast { opacity: 1; transform: none; }
.pw3 .pw-note { padding: 0 18px 18px; }
@media (min-width: 760px) {
  .pw3-kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pw3-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .pw3-search { display: block; } .pw3-share { margin-left: 0; }
}
@media (min-width: 1000px) {
  .pw3-app { grid-template-columns: 190px minmax(0, 1fr); }
  .pw3-side { display: flex; flex-direction: column; gap: 4px; padding: 18px 14px; border-right: 1px solid rgb(247 245 238 / .08); background: rgb(26 26 26 / .3); }
  .pw3-mark { width: 28px; height: 28px; margin: 0 6px 18px; filter: invert(1); }
  .pw3-side > span { padding: 9px 12px; border-radius: 10px; font-size: .82rem; color: var(--fg-3); }
  .pw3-side > span.on { background: rgb(187 98 222 / .14); color: var(--fg); box-shadow: inset 2px 0 0 var(--purple); }
  .pw3-me { margin-top: auto; display: flex; align-items: center; gap: 8px; }
  .pw3-main { padding: 22px 24px; }
}

/* ---------- 7. your path, horizontal ---------- */
.hp-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px 40px; }
.hp-xp { display: grid; gap: 8px; min-width: 240px; }
.hp-xp-l { font-size: .85rem; color: var(--fg-2); } .hp-xp-l b { color: var(--fg); font-weight: 600; }
.hp-xp-bar { height: 8px; border-radius: 8px; background: rgb(26 26 26 / .08); overflow: hidden; }
.hp-xp-bar i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--purple-deep), var(--purple)); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease-out); }
.hp { position: relative; margin-top: clamp(28px, 4vw, 48px); }
.hp-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hp-road { fill: none; stroke: rgb(26 26 26 / .06); stroke-width: 20; stroke-linecap: round; }
.hp-dash { fill: none; stroke: rgb(26 26 26 / .22); stroke-width: 2; stroke-dasharray: 2 10; stroke-linecap: round; animation: drift 6s linear infinite; }
.hp-done { fill: none; stroke: var(--purple); stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 8px rgb(187 98 222 / .7)); }
.hp-you { position: absolute; left: 0; top: 0; z-index: 4; width: 0; height: 0; pointer-events: none; will-change: transform; }
.hp-you .you-av { position: absolute; left: -23px; top: -23px; width: 46px; height: 46px; font-size: .75rem; box-shadow: 0 0 0 3px var(--white), 0 0 0 6px rgb(187 98 222 / .35), 0 14px 30px -8px rgb(138 60 176 / .8); }
.hp-lv { position: relative; z-index: 2; display: grid; gap: 16px; }
.hl { position: relative; min-height: 150px; }
.hl-stop { position: absolute; left: 20px; top: 50%; width: 20px; height: 20px; margin: -10px; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 3px rgb(26 26 26 / .2); transition: box-shadow .4s, background-color .4s, transform .4s var(--ease-out); }
.hl.on .hl-stop { background: var(--purple); box-shadow: 0 0 0 7px rgb(187 98 222 / .2), 0 0 18px rgb(187 98 222 / .8); transform: scale(1.15); }
.hl-card { position: relative; margin-left: 52px; display: grid; grid-template-columns: 48px 1fr; gap: 3px 12px; align-items: start; padding: 16px; border-radius: 20px; background: var(--glass-bg); box-shadow: var(--glass-edge), var(--glass-shadow); opacity: .5; transform: scale(.97); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out), box-shadow .6s; }
.hl.on .hl-card { opacity: 1; transform: none; box-shadow: var(--glass-edge), inset 0 0 0 1px rgb(187 98 222 / .4), 0 30px 60px -36px rgb(138 60 176 / .55); }
.hl-card .lv-ic { width: 48px; height: 48px; border-radius: 14px; } .hl-card .lv-ic svg { width: 34px; height: 34px; }
.hl-card b { font: 400 1.3rem/1.1 var(--font-display); letter-spacing: -.02em; }
.hl-card p { color: var(--fg-2); font-size: .875rem; line-height: 1.5; }
.hl-card .lv-ok { top: -10px; right: 12px; }
.hl.on .lv-ok { opacity: 1; transform: none; transition-delay: .2s; }
.hl.on .hl-card .burst i { animation: burst 1s .1s var(--ease-out) forwards; }
.hl.on .lv-ic { background: var(--ink); } .hl.on .ic-l { stroke: var(--beige); } .hl.on .ic-f { fill: var(--beige); } .hl.on .ic-f2 { fill: var(--purple); }
@media (min-width: 760px) {
  .hp-lv { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; height: 460px; }
  .hl { min-height: 0; }
  .hl-stop { left: 50%; }
  .hl:nth-child(odd) .hl-stop { top: 44%; } .hl:nth-child(even) .hl-stop { top: 56%; }
  .hl-card { position: absolute; left: 0; right: 0; margin: 0; grid-template-columns: 1fr; justify-items: start; }
  .hl:nth-child(odd) .hl-card { bottom: calc(56% + 30px); } .hl:nth-child(even) .hl-card { top: calc(56% + 30px); }
}
@media (min-width: 980px) { .nav-aud { position: static; translate: none; margin-left: 28px; margin-right: auto; } .nav-links { margin-left: 0; } }
.pw2-card .tg { background: rgb(247 245 238 / .12); color: var(--beige); }
.pw2-card .tg.t1, .pw2-card .tg.t3 { background: rgb(187 98 222 / .22); color: var(--purple); }
.pw2-feed li { color: var(--beige); }
.pw2-card b, .pw2-h b { color: var(--beige); } .pw2-card .pw2-n b { color: var(--purple); }

.sh2-peek b, .px-peek b { color: var(--beige); }
@media (max-width: 600px) { .cp2-team { flex-wrap: wrap; gap: 10px; } .cp2-team .cp-m .face, .cp2-team .cp-you .you-av { width: 34px; height: 34px; } .cp2-mo { margin-left: 0; } .cp2 .pc-graph { height: 120px; } }

.sx-step:not(.on) { opacity: .9; }
.win-t, .win-step { color: var(--fg-2); }
.tx-send { background: var(--ink); color: var(--beige); }
.cx-h span, .wx-ship .wx-h, .tg.t1, .tg.t3 { color: var(--purple-deep); }
.cx-in { color: rgb(26 26 26 / .62); }
.band-dark .tg.t1, .band-dark .tg.t3, .wx-dark .wx-ship .wx-h { color: var(--purple); }
.hx-sub { color: rgb(26 26 26 / .72); } .cx-in { color: rgb(26 26 26 / .72); }
.tg.t1 { background: rgb(187 98 222 / .1); } .tg.t3 { background: rgb(138 60 176 / .09); }
.band-dark .tg.t1, .band-dark .tg.t3 { background: rgb(187 98 222 / .18); }

/* ================= Revision 19 ================= */
/* the footer sits on its own, below the last black sheet */
.closing { margin-bottom: 0 !important; }
.footer { padding-top: clamp(56px, 7vw, 104px); }
.pick-toast { top: 88px; }
/* heavier iOS glass */
:root:not([data-theme="dark"]) {
  --glass-bg: linear-gradient(150deg, rgb(255 255 255 / .74), rgb(255 255 255 / .26) 58%, rgb(255 255 255 / .44));
  --glass-blur: blur(38px) saturate(210%);
  --glass-edge: inset 0 0 0 1px rgb(255 255 255 / .85), inset 0 1.5px 0 rgb(255 255 255 / 1), inset 0 -1px 0 rgb(255 255 255 / .45), inset 0 0 32px rgb(255 255 255 / .28);
  --glass-shadow: 0 34px 80px -34px rgb(138 60 176 / .48), 0 2px 10px rgb(26 26 26 / .05);
}
:root:not([data-theme="dark"]) :is(.sx-step, .hl-card, .stp-i.on, .tb-stage, .tb-mode, .tb-cap span) { -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.band-dark :is(.bx, .win, .pw3, .tr) { -webkit-backdrop-filter: blur(34px) saturate(170%); backdrop-filter: blur(34px) saturate(170%); }
.what .bx { background: radial-gradient(90% 60% at 100% 0%, rgb(187 98 222 / .16), transparent 60%), linear-gradient(160deg, rgb(247 245 238 / .09), rgb(247 245 238 / .02) 55%, rgb(247 245 238 / .05)); box-shadow: inset 0 0 0 1px rgb(247 245 238 / .12), inset 0 1.5px 0 rgb(247 245 238 / .2), inset 0 0 40px rgb(247 245 238 / .03), 0 40px 80px -40px rgb(26 26 26 / .8); }
.band-dark .win { background: linear-gradient(160deg, rgb(247 245 238 / .1), rgb(247 245 238 / .03) 60%, rgb(247 245 238 / .06)); box-shadow: inset 0 0 0 1px rgb(247 245 238 / .13), inset 0 1.5px 0 rgb(247 245 238 / .22), 0 30px 70px -36px rgb(26 26 26 / .8); }
.win { -webkit-backdrop-filter: blur(30px) saturate(190%); backdrop-filter: blur(30px) saturate(190%); background: linear-gradient(160deg, rgb(255 255 255 / .86), rgb(255 255 255 / .62)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .9), inset 0 1.5px 0 rgb(255 255 255 / 1), 0 30px 70px -34px rgb(138 60 176 / .45), 0 2px 8px rgb(26 26 26 / .05); }

/* initials avatars for the named sample people */
.ini { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; font: 600 .62rem/1 var(--font-body); letter-spacing: .02em; color: var(--white); background: radial-gradient(120% 120% at 30% 20%, var(--purple), var(--purple-deep)); }
.ini.t1 { background: radial-gradient(120% 120% at 30% 20%, rgb(26 26 26 / .78), var(--ink)); }
.ini.t2 { background: radial-gradient(120% 120% at 30% 20%, var(--beige), rgb(187 98 222 / .45)); color: var(--ink); }
.ini.t3 { background: radial-gradient(120% 120% at 30% 20%, var(--purple-deep), var(--ink)); }
.tx-r .ini, .wx-meta .ini { width: 26px; height: 26px; font-size: .56rem; }
.px-r .ini { width: 30px; height: 30px; } .px-ph .ini, .sh2 .ini { width: 40px; height: 40px; font-size: .75rem; }
.cx-msg .ini { width: 28px; height: 28px; }

/* ---------- five steps: the stage ---------- */
.stg { position: relative; --si: 0; }
.stg-rail { display: none; }
.stg-copy { display: grid; gap: 18px; }
.stg-c { display: grid; gap: 10px; padding: 22px; border-radius: 26px; background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), var(--glass-shadow); }
.stg-k { font: 400 3.2rem/.9 var(--font-display); letter-spacing: -.05em; background: linear-gradient(160deg, var(--purple), var(--purple-deep)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stg-k em { font-style: normal; font-size: 1rem; letter-spacing: 0; color: var(--fg-3); -webkit-text-fill-color: var(--fg-3); margin-left: 6px; }
.stg-tag { font: 600 .72rem/1.4 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--purple-deep); }
.stg-c h3 { font: 400 clamp(1.8rem, 1.3rem + 1.8vw, 2.9rem)/1.02 var(--font-display); letter-spacing: -.035em; }
.stg-c p { color: var(--fg-2); font-size: 1.0625rem; line-height: 1.6; max-width: 40ch; }
.stg-b { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.stg-b li { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; font-size: .84rem; background: rgb(255 255 255 / .7); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .9), 0 8px 20px -12px rgb(138 60 176 / .4); }
.stg-b .ck { color: var(--purple-deep); }
.stg-dev { display: none; }
.stg .stp-inline { margin: 6px 0 0; }
@media (min-width: 960px) {
  .stg { height: 460vh; }
  .stg .stp-sticky { top: 9vh; height: 84vh; display: grid; grid-template-columns: none; grid-template-rows: auto minmax(0, 1fr); gap: clamp(18px, 3vh, 32px); align-items: stretch; }
  .stg::before { content: ""; position: sticky; top: 20vh; display: block; height: 0; }
  .stg-rail { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
  .stg-rail .stp-i { border-radius: 18px; background: rgb(255 255 255 / .45); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .8); transition: background-color .5s, box-shadow .5s, transform .5s var(--ease-out); }
  .stg-rail .stp-btn { grid-template-columns: 30px 1fr; gap: 8px; padding: 12px 14px 14px; align-items: center; }
  .stg-rail .stp-n { font-size: 1rem; }
  .stg-rail .stp-txt small { font-size: .62rem; }
  .stg-rail .stp-i .stp-txt b { font-size: .95rem; color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .stg-rail .stp-i.on { background: var(--ink); box-shadow: 0 20px 40px -20px rgb(138 60 176 / .8); transform: translateY(-2px); }
  .stg-rail .stp-i.on .stp-txt b { color: var(--beige); } .stg-rail .stp-i.on .stp-txt small, .stg-rail .stp-i.on .stp-n { color: var(--purple); }
  .stg-rail .stp-i.done .stp-txt b { color: var(--fg); }
  .stg-rail .stp-bar { left: 14px; right: 14px; bottom: 6px; height: 3px; border-radius: 3px; background: rgb(26 26 26 / .08); overflow: hidden; }
  .stg-rail .stp-i.on .stp-bar { background: rgb(247 245 238 / .14); }
  .stg-main { display: grid; grid-template-columns: minmax(0, 4.2fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: center; min-height: 0; }
  .stg-copy { position: relative; display: block; height: 100%; min-height: 380px; }
  .stg-c { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; opacity: 0; transform: translateY(24px); filter: blur(6px); pointer-events: none; transition: opacity .6s var(--ease-out), transform .7s var(--ease-out), filter .6s var(--ease-out); padding: 28px; }
  .stg-c.on { opacity: 1; transform: none; filter: none; pointer-events: auto; }
  .stg-c .stp-inline { display: none; }
  .stg-k { font-size: clamp(3.6rem, 2.6rem + 3vw, 5.6rem); }
  .stg-dev { position: relative; display: block; height: 100%; min-height: 0; }
  .stg-dev::before { content: ""; position: absolute; inset: -12% -8%; z-index: -1; background: radial-gradient(50% 50% at calc(30% + var(--si) * 10%) 40%, rgb(187 98 222 / .45), transparent 70%), radial-gradient(40% 40% at 80% 80%, rgb(138 60 176 / .25), transparent 70%); filter: blur(10px); transition: background .8s; }
  .dev { position: relative; height: calc(100% - 18px); display: flex; flex-direction: column; }
  .dev-screen { flex: 1; min-height: 0; padding: 12px; border-radius: 28px; background: linear-gradient(160deg, rgb(26 26 26 / .92), var(--ink)); box-shadow: inset 0 0 0 1px rgb(247 245 238 / .14), inset 0 1.5px 0 rgb(247 245 238 / .2), 0 60px 120px -50px rgb(138 60 176 / .7), 0 30px 60px -30px rgb(26 26 26 / .5); }
  .dev-base { height: 16px; margin: 0 -5% 0; border-radius: 0 0 22px 22px; background: linear-gradient(rgb(247 245 238), rgb(26 26 26 / .18)); box-shadow: inset 0 1px 0 rgb(255 255 255), 0 20px 30px -18px rgb(26 26 26 / .5); position: relative; }
  .dev-base::after { content: ""; position: absolute; left: 50%; top: 0; width: 18%; height: 6px; translate: -50% 0; border-radius: 0 0 10px 10px; background: rgb(26 26 26 / .12); }
  .stg .stp-screen, .stg .stp-win { height: 100%; max-height: none; }
  .stg .stp-win { border-radius: 18px; }
  .stg-floats { position: absolute; inset: 0; pointer-events: none; }
  .stg-fl { position: absolute; inset: 0; }
  .fl { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 10px; padding: 11px 15px; border-radius: 18px; font-size: .8rem; background: rgb(255 255 255 / .72); -webkit-backdrop-filter: blur(26px) saturate(200%); backdrop-filter: blur(26px) saturate(200%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .95), inset 0 1.5px 0 rgb(255 255 255 / 1), 0 26px 50px -22px rgb(138 60 176 / .6); opacity: 0; transform: translateY(16px) scale(.94); transition: opacity .5s var(--ease-out), transform .7s var(--ease-out); }
  .fl > span { display: grid; } .fl b { font-weight: 600; } .fl small { font-size: .7rem; color: var(--fg-3); }
  .fl .face { width: 32px; height: 32px; }
  .fl.f0 { left: -7%; top: 14%; } .fl.f1 { right: -5%; bottom: 16%; }
  .fl-ink { background: rgb(26 26 26 / .86); color: var(--beige); box-shadow: inset 0 0 0 1px rgb(247 245 238 / .14), 0 26px 50px -22px rgb(26 26 26 / .7); }
  .fl-ink b { color: var(--purple); font: 400 1.4rem/1 var(--font-display); } .fl-ink small { color: rgb(247 245 238 / .7); }
  .fl-ic { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: var(--purple); color: var(--ink); }
  .fl-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 0 5px rgb(187 98 222 / .2); animation: blip 1.6s infinite; }
  .fl-faces { display: inline-flex; } .fl-faces > * { margin-left: -8px; box-shadow: 0 0 0 2px var(--white); } .fl-faces > :first-child { margin-left: 0; }
  .fl-faces .face, .fl-faces .ini { width: 28px; height: 28px; }
  .fl-tags { gap: 6px; }
  .stg-fl.on .fl { opacity: 1; transform: none; animation: bob 6s var(--ease-in-out) infinite; }
  .stg-fl.on .fl.f0 { transition-delay: .25s; } .stg-fl.on .fl.f1 { transition-delay: .45s; animation-delay: -3s; }
}
@keyframes bob { 50% { translate: 0 -7px; } }
@media (max-width: 959px) { .stg .stp-sticky { display: block; } .stg-c .stp-inline { display: block; } .stg .stp-list { display: none; } }

/* ---------- trained talent and teams: the race, the report, three ways in, services ---------- */
.race { display: grid; gap: 14px; padding: 4px 2px; }
.rc-lane { display: grid; grid-template-columns: 170px 1fr; gap: 14px; align-items: center; }
.rc-who { display: flex; align-items: center; gap: 10px; } .rc-who > span { display: grid; } .rc-who b { font-size: .82rem; font-weight: 500; } .rc-who small { font-size: .68rem; color: var(--fg-3); }
.rc-who .ini { width: 34px; height: 34px; }
.rc-track { position: relative; height: 44px; border-radius: 12px; background: rgb(247 245 238 / .04); box-shadow: inset 0 0 0 1px rgb(247 245 238 / .08); overflow: hidden; }
.rc-fill { position: absolute; inset: 0 auto 0 0; width: 100%; transform: scaleX(0); transform-origin: 0 50%; }
.l-fr .rc-fill { background: repeating-linear-gradient(90deg, rgb(247 245 238 / .1) 0 8px, rgb(247 245 238 / .04) 8px 14px); }
.l-ab .rc-fill { background: linear-gradient(90deg, rgb(187 98 222 / .5), rgb(138 60 176 / .35)); box-shadow: inset -2px 0 0 var(--purple); }
:is(.st-pane.on, .st-inline) .rc-fill { animation: race 8s linear infinite; }
@keyframes race { 0% { transform: scaleX(0); } 88% { transform: scaleX(1); } 100% { transform: scaleX(1); } }
.rc-st { position: absolute; top: 50%; translate: 0 -50%; padding: 4px 9px; border-radius: 999px; font-size: .64rem; font-weight: 600; white-space: nowrap; background: rgb(26 26 26 / .7); color: rgb(247 245 238 / .8); box-shadow: inset 0 0 0 1px rgb(247 245 238 / .14); opacity: 0; }
.st1 { left: 3%; } .st2 { left: 24%; } .st3 { left: 46%; } .st4 { left: 72%; background: var(--purple); color: var(--ink); }
.st0 { left: 12px; background: var(--purple); color: var(--ink); opacity: 1; }
:is(.st-pane.on, .st-inline) .st1 { animation: st-in 8s infinite; } :is(.st-pane.on, .st-inline) .st2 { animation: st-in 8s infinite; animation-delay: 1.6s; } :is(.st-pane.on, .st-inline) .st3 { animation: st-in 8s infinite; animation-delay: 3.2s; }
:is(.st-pane.on, .st-inline) .st4 { animation: st-in2 8s infinite; }
@keyframes st-in { 0%, 4% { opacity: 0; } 8%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes st-in2 { 0%, 68% { opacity: 0; transform: scale(.8); } 74%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.rc-tick { position: absolute; left: var(--x); top: 50%; width: 20px; height: 20px; margin-top: -10px; display: grid; place-items: center; border-radius: 6px; background: var(--purple); color: var(--ink); opacity: 0; }
.rc-tick:first-of-type { display: none; }
:is(.st-pane.on, .st-inline) .rc-tick { animation: tick-in 8s infinite; animation-delay: var(--d); }
@keyframes tick-in { 0% { opacity: 0; transform: scale(.4); } 4%, 80% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; } }
.rc-axis { display: flex; justify-content: space-between; padding-left: 184px; font-size: .62rem; color: var(--fg-3); }
.crp-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid rgb(247 245 238 / .08); }
.crp-top > span:nth-child(2) { display: grid; flex: 1; } .crp-top b { font-size: .82rem; font-weight: 500; } .crp-top small { font-size: .68rem; color: var(--fg-3); }
.crp-team { display: inline-flex; } .crp-team .face { width: 28px; height: 28px; margin-left: -8px; box-shadow: 0 0 0 2px var(--ink); } .crp-team .face:first-child { margin-left: 0; }
.crp-ring { position: relative; width: 52px; height: 52px; display: grid; place-items: center; }
.crp-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.crp-ring .r0 { fill: none; stroke: rgb(247 245 238 / .1); stroke-width: 4; } .crp-ring .r1 { fill: none; stroke: var(--purple); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 97 100; }
.crp-ring b { font-size: .7rem; font-weight: 600; }
.iaas2 { display: grid; gap: 10px; }
.iaas2 li { display: grid; grid-template-columns: 120px 1fr auto; align-items: center; gap: 14px; padding: 12px 14px !important; border-radius: 18px; background: rgb(247 245 238 / .04) !important; box-shadow: inset 0 0 0 1px rgb(247 245 238 / .09) !important; transition: background-color .5s, box-shadow .5s, transform .5s var(--ease-out); }
.iaas2 li.on { background: linear-gradient(120deg, rgb(187 98 222 / .2), rgb(138 60 176 / .08)) !important; box-shadow: inset 0 0 0 1px rgb(187 98 222 / .6), 0 20px 40px -24px rgb(187 98 222 / .7) !important; transform: translateX(4px); }
.iaas2 li > span:nth-child(2) { display: grid; gap: 3px; font-size: .9rem; font-weight: 500; }
.iaas2 li small { max-height: none !important; font-weight: 400; }
.md-l { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-bottom: 2px; border-radius: 50%; background: var(--purple); color: var(--ink); font-size: .68rem; }
.iaas2 .rd { position: static; }
.md-vis svg { display: block; width: 120px; height: 64px; }
.md-pool circle { fill: rgb(247 245 238 / .45); }
.md-box { fill: rgb(247 245 238 / .05); stroke: rgb(247 245 238 / .25); stroke-width: 1; }
.md-box.ab { stroke: var(--purple); fill: rgb(187 98 222 / .12); }
.md-t { fill: rgb(247 245 238 / .7); font: 600 7px var(--font-body); text-anchor: middle; }
.md-mv, .md-core { fill: var(--purple); }
.md-doc { fill: var(--beige); }
.md-w { fill: var(--purple); animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .25; } }
.md-orbit { transform-origin: 60px 30px; animation: spin 8s linear infinite; } .md-orbit circle { fill: var(--beige); }
.svc2 { display: grid; gap: 14px; margin-top: 8px; }
.sv { display: grid; align-content: start; gap: 6px; padding: 16px; border-radius: 20px; background: rgb(247 245 238 / .04); box-shadow: inset 0 0 0 1px rgb(247 245 238 / .09); }
.sv b { font: 400 1.2rem/1.2 var(--font-display); } .sv > span:last-child { color: var(--fg-2); font-size: .875rem; line-height: 1.5; }
.sv .big { font: 400 2.4rem/1 var(--font-display); color: var(--purple); }
.sv-vis { position: relative; height: 120px; margin-bottom: 8px; border-radius: 14px; background: rgb(26 26 26 / .5); box-shadow: inset 0 0 0 1px rgb(247 245 238 / .08); overflow: hidden; }
.sv-pipe { display: flex; align-items: center; justify-content: space-around; padding: 0 12px; }
.sv-pipe::before { content: ""; position: absolute; left: 18%; right: 18%; top: 50%; height: 2px; background: rgb(247 245 238 / .15); }
.sv-pipe span { position: relative; z-index: 1; padding: 6px 10px; border-radius: 10px; background: var(--ink); box-shadow: inset 0 0 0 1px rgb(247 245 238 / .2); font-size: .68rem; font-weight: 600; }
.pp-dot { position: absolute; z-index: 2; left: 18%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 12px var(--purple); animation: pipe 3s var(--ease-in-out) infinite; }
@keyframes pipe { 0% { left: 18%; } 45% { left: 50%; } 85%, 100% { left: 82%; } }
.pp-live { position: absolute; right: 10px; top: 10px; padding: 3px 8px; border-radius: 999px; background: var(--purple); color: var(--ink); font-style: normal; font-size: .62rem; font-weight: 700; animation: st-in2 3s infinite; }
.sv-demo { padding: 10px; }
.dm-bar { display: flex; gap: 4px; margin-bottom: 8px; } .dm-bar i { width: 6px; height: 6px; border-radius: 50%; background: rgb(247 245 238 / .25); }
.dm-chart { display: flex; align-items: flex-end; gap: 6px; height: 54px; }
.dm-chart i { flex: 1; height: 20%; border-radius: 4px 4px 1px 1px; background: rgb(247 245 238 / .2); animation: dm 4s var(--ease-out) infinite; }
.dm-chart i:nth-child(2) { --to: 55%; animation-delay: .1s; } .dm-chart i:nth-child(3) { --to: 40%; animation-delay: .2s; } .dm-chart i:nth-child(4) { --to: 75%; animation-delay: .3s; } .dm-chart i:nth-child(5) { --to: 95%; animation-delay: .4s; } .dm-chart i:nth-child(1) { --to: 30%; }
@keyframes dm { 0%, 40% { height: 20%; background: rgb(247 245 238 / .2); } 60%, 92% { height: var(--to); background: var(--purple); } 100% { height: 20%; } }
.dm-btn { position: absolute; right: 10px; bottom: 10px; padding: 5px 10px; border-radius: 999px; background: var(--beige); color: var(--ink); font-size: .64rem; font-weight: 700; animation: dm-press 4s infinite; }
@keyframes dm-press { 0%, 33% { transform: none; } 36% { transform: scale(.9); background: var(--purple); } 40%, 100% { transform: none; } }
.dm-cur { position: absolute; width: 16px; height: 16px; right: 30px; bottom: 6px; animation: dm-cur 4s infinite; } .dm-cur svg { width: 100%; height: 100%; fill: var(--white); stroke: var(--ink); stroke-width: 1.5; }
@keyframes dm-cur { 0% { transform: translate(-60px, -50px); } 30%, 40% { transform: none; } 70%, 100% { transform: translate(-60px, -50px); } }
.sv-fun { display: grid; justify-items: center; align-content: center; gap: 4px; }
.fn { display: block; height: 22px; border-radius: 6px; background: rgb(187 98 222 / .2); box-shadow: inset 0 0 0 1px rgb(187 98 222 / .45); font-size: .62rem; font-weight: 600; text-align: center; line-height: 22px; }
.fn.f1 { width: 80%; } .fn.f2 { width: 56%; } .fn.f3 { width: 32%; background: var(--purple); color: var(--ink); }
.fd { position: absolute; left: 50%; top: 4px; width: 6px; height: 6px; margin-left: var(--x); border-radius: 50%; background: var(--beige); opacity: 0; animation: fall 3.6s infinite; animation-delay: var(--d); }
@keyframes fall { 0% { opacity: 0; transform: translateY(0); } 10% { opacity: 1; } 70% { opacity: 1; transform: translateY(80px) translateX(calc(var(--x) * -1)); } 100% { opacity: 0; transform: translateY(100px) translateX(calc(var(--x) * -1)); } }
@media (min-width: 760px) { .svc2 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1080px) {
  .what .bento-co .bx-ramp { grid-column: 1 / 5; } .what .bento-co .bx-metrics { grid-column: 5 / 7; }
  .what .bento-co .bx-pool { grid-column: 1 / 4; } .what .bento-co .bx-iaas { grid-column: 4 / 7; }
}
@media (max-width: 600px) { .rc-lane { grid-template-columns: 1fr; gap: 6px; } .rc-axis { padding-left: 0; } .iaas2 li { grid-template-columns: 1fr auto; } .md-vis { display: none; } }

/* ---------- the Proof of Work app ---------- */
.pw4 .win-bar { position: relative; }
.pw4-try { margin-left: auto; padding: 4px 10px; border-radius: 999px; background: rgb(187 98 222 / .2); color: var(--purple); font-size: .68rem; font-weight: 600; animation: blip 2s infinite; }
.pw4.live .pw4-try { animation: none; opacity: .6; }
.pw4.live > .cur { opacity: 0 !important; }
.pw3-side button { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 9px 12px; border: 0; border-radius: 10px; background: none; text-align: left; font: inherit; font-size: .82rem; color: var(--fg-3); cursor: pointer; transition: background-color .3s, color .3s; }
.pw3-side button:hover { background: rgb(247 245 238 / .05); color: var(--fg); }
.pw3-side button.on { background: rgb(187 98 222 / .14); color: var(--fg); box-shadow: inset 2px 0 0 var(--purple); }
.pw3-side button em { font-style: normal; font-size: .68rem; padding: 1px 7px; border-radius: 999px; background: rgb(247 245 238 / .08); }
.pw3-tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid rgb(247 245 238 / .1); }
.pw3-tabs button { padding: 9px 12px; border: 0; background: none; color: var(--fg-3); font: inherit; font-size: .82rem; cursor: pointer; white-space: nowrap; }
.pw3-tabs button.on { color: var(--fg); box-shadow: inset 0 -2px 0 var(--purple); }
@media (min-width: 1000px) { .pw3-tabs { display: none; } }
.pw3-search { position: relative; }
.pw3-search input { width: 100%; padding: 7px 14px; border: 0; border-radius: 999px; background: rgb(247 245 238 / .05); box-shadow: inset 0 0 0 1px rgb(247 245 238 / .12); color: var(--fg); font: inherit; font-size: .78rem; }
.pw3-search input::placeholder { color: var(--fg-3); }
.pw3-search input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--purple); }
.pw3-share { border: 0; font: inherit; font-size: .78rem; cursor: pointer; }
.pw3-share:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgb(187 98 222 / .9); }
.pw4-view { display: none; }
.pw4-view.on { display: grid; gap: 14px; animation: view-in .45s var(--ease-out); }
@keyframes view-in { from { opacity: 0; transform: translateY(8px); } }
.pw4-kpi { position: relative; text-align: left; border: 0; font: inherit; color: inherit; cursor: pointer; padding: 14px 16px; border-radius: 14px; background: rgb(247 245 238 / .045); box-shadow: inset 0 0 0 1px rgb(247 245 238 / .08); overflow: hidden; transition: transform .3s var(--ease-out), box-shadow .3s; }
.pw4-kpi:hover, .pw4-kpi:focus-visible { outline: none; transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgb(187 98 222 / .5), 0 14px 30px -18px rgb(187 98 222 / .8); }
.pw4-kpi small { font-size: .72rem; color: var(--fg-3); } .pw4-kpi b { display: block; margin-top: 4px; font: 400 1.9rem/1 var(--font-display); }
.pw4-kpi svg { position: absolute; right: 12px; bottom: 14px; width: 60px; height: 18px; fill: none; stroke: var(--purple); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.pw3-bars i { cursor: pointer; outline: none; }
.pw3-bars i.hot, .pw3-bars i:focus-visible { background: var(--beige); }
.pw4.tip-on .pw3-tip { opacity: 1; transform: none; }
.pw3-sr { width: 100%; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; padding: 4px 6px; margin-left: -6px; border-radius: 8px; transition: background-color .3s; }
.pw3-sr:hover { background: rgb(247 245 238 / .05); }
.pw4-card { width: 100%; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: transform .3s var(--ease-out), box-shadow .3s, background-color .3s; }
.pw4-card:hover, .pw4-card:focus-visible { outline: none; transform: translateX(3px); background: rgb(187 98 222 / .1); box-shadow: inset 0 0 0 1px rgb(187 98 222 / .5); }
.pw4-card[hidden] { display: none; }
.pw4-more { justify-self: start; margin-top: 4px; padding: 7px 12px; border: 0; border-radius: 999px; background: rgb(247 245 238 / .08); color: var(--fg); font: inherit; font-size: .75rem; cursor: pointer; }
.pw4-more:hover { background: rgb(187 98 222 / .2); }
.pw4-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.pw4-filters button { padding: 7px 13px; border: 0; border-radius: 999px; background: rgb(247 245 238 / .06); box-shadow: inset 0 0 0 1px rgb(247 245 238 / .1); color: var(--fg-2); font: inherit; font-size: .78rem; cursor: pointer; transition: background-color .3s, color .3s; }
.pw4-filters button.on { background: var(--purple); color: var(--ink); box-shadow: none; }
.pw4-list { display: grid; gap: 8px; }
.pw4-list .pw-card { grid-template-columns: auto 1fr auto auto; }
.pw4-empty { padding: 20px; text-align: center; color: var(--fg-3); font-size: .85rem; }
.pw4-reviews { display: grid; gap: 10px; }
.pw4-rev { display: flex; gap: 12px; padding: 16px; border-radius: 16px; background: rgb(247 245 238 / .045); box-shadow: inset 0 0 0 1px rgb(247 245 238 / .08); }
.pw4-rev .ini { width: 40px; height: 40px; font-size: .75rem; }
.pw4-rev > div { display: grid; gap: 4px; } .pw4-rev b { font-weight: 500; } .pw4-rev small { font-size: .72rem; color: var(--fg-3); } .pw4-rev p { font: 400 1.05rem/1.4 var(--font-display); }
.stars { display: inline-flex; gap: 3px; } .stars i { width: 10px; height: 10px; clip-path: polygon(50% 0, 62% 35%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 35%); background: rgb(247 245 238 / .2); } .stars i.on { background: var(--purple); }
.pw4-fine { font-size: .72rem; color: var(--fg-3); }
.pw4-skills { display: grid; gap: 10px; }
.pw4-sk { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: rgb(247 245 238 / .045); box-shadow: inset 0 0 0 1px rgb(247 245 238 / .08); }
.pw4-ring { position: relative; width: 52px; height: 52px; display: grid; place-items: center; } .pw4-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.pw4-ring .r0 { fill: none; stroke: rgb(247 245 238 / .1); stroke-width: 4; } .pw4-ring .r1 { fill: none; stroke: var(--purple); stroke-width: 4; stroke-linecap: round; }
.pw4-ring b { font: 400 1rem/1 var(--font-display); }
.pw4-sk > span { display: grid; } .pw4-sk > span b { font-weight: 500; } .pw4-sk small { font-size: .72rem; color: var(--fg-3); }
@media (min-width: 760px) { .pw4-reviews, .pw4-skills { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pw3-main { position: relative; }
.pw4-drawer { position: absolute; z-index: 8; top: 12px; right: 12px; bottom: 12px; width: min(340px, calc(100% - 24px)); display: grid; align-content: start; gap: 10px; padding: 22px; border-radius: 20px; background: rgb(26 26 26 / .9); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); box-shadow: inset 0 0 0 1px rgb(187 98 222 / .5), -30px 0 80px -30px rgb(26 26 26 / .9); transform: translateX(20px); opacity: 0; transition: transform .45s var(--ease-out), opacity .35s; }
.pw4-drawer.on { transform: none; opacity: 1; }
.pw4-drawer .tg { justify-self: start; }
.pw4-drawer > b { font: 400 1.5rem/1.15 var(--font-display); } .pw4-drawer > small { color: var(--fg-3); font-size: .78rem; } .pw4-drawer p { color: var(--fg-2); font-size: .9rem; line-height: 1.55; }
.pw4-score { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 14px; border-radius: 14px; background: rgb(187 98 222 / .12); } .pw4-score span { font-size: .78rem; color: var(--fg-2); } .pw4-score b { font: 400 1.4rem/1 var(--font-display); color: var(--purple); }
.pw4-st { justify-self: start; padding: 4px 10px; border-radius: 999px; background: var(--purple); color: var(--ink); font-size: .72rem; font-weight: 600; }
.pw4-x { position: absolute; right: 12px; top: 12px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgb(247 245 238 / .08); color: var(--fg); font-size: 1.1rem; cursor: pointer; }
.pw3-toast.show { opacity: 1; transform: none; }
.pw3.s3:not(.s5) .pw3-toast { opacity: 1; transform: none; }
.stg .stp-win { background: var(--white); -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (min-width: 960px) { .stg .stp-sticky { top: calc(76px + 3vh); height: calc(94vh - 76px); } }
.rc-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
.rc-sum > div { display: grid; gap: 2px; padding: 14px 16px; border-radius: 14px; background: rgb(247 245 238 / .04); box-shadow: inset 0 0 0 1px rgb(247 245 238 / .08); }
.rc-sum small { font-size: .7rem; color: var(--fg-3); } .rc-sum b { font: 400 clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem)/1.05 var(--font-display); letter-spacing: -.03em; color: rgb(247 245 238 / .55); text-decoration: line-through; text-decoration-color: rgb(187 98 222 / .7); text-decoration-thickness: 2px; } .rc-sum span { font-size: .75rem; color: var(--fg-3); }
.rc-sum .on { background: linear-gradient(120deg, rgb(187 98 222 / .22), rgb(138 60 176 / .08)); box-shadow: inset 0 0 0 1px rgb(187 98 222 / .55); } .rc-sum .on b { color: var(--purple); text-decoration: none; }
.pw3-feed .pw4-card { grid-template-columns: auto minmax(0, 1fr) auto; } .pw3-feed .pw4-card .pw-d { display: none; }
.bx-ramp .win { margin-top: auto; }
.pw4-drawer { background: rgb(26 26 26 / .97); }
@media (max-width: 600px) { .rc-axis span:nth-child(2), .rc-axis span:nth-child(3), .rc-axis span:nth-child(5), .rc-axis span:nth-child(6) { display: none; } }
/* the quote pop-up reads cleanly over black sheets too */
.voice-pop { background: rgb(255 255 255 / .94); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .9), 0 30px 60px -24px rgb(26 26 26 / .45); }

/* ================= Revision 20: heavy glass, one job per section ================= */
:root:not([data-theme="dark"]) {
  --glass-bg: linear-gradient(155deg, rgb(255 255 255 / .62), rgb(255 255 255 / .16) 52%, rgb(255 255 255 / .36));
  --glass-blur: blur(46px) saturate(230%);
  --glass-edge: inset 0 0 0 1px rgb(255 255 255 / .9), inset 0 2px 0 rgb(255 255 255 / 1), inset 0 -1px 0 rgb(255 255 255 / .5), inset 0 0 44px rgb(255 255 255 / .3);
  --glass-shadow: 0 40px 90px -36px rgb(138 60 176 / .55), 0 2px 12px rgb(26 26 26 / .05);
  --dglass-bg: linear-gradient(155deg, rgb(247 245 238 / .13), rgb(247 245 238 / .03) 55%, rgb(247 245 238 / .08));
  --dglass-edge: inset 0 0 0 1px rgb(247 245 238 / .16), inset 0 1.5px 0 rgb(247 245 238 / .28), inset 0 0 40px rgb(247 245 238 / .04);
}
/* more colour behind the glass, so the frosting has something to show */
:root:not([data-theme="dark"]) body::before {
  background:
    radial-gradient(38% 34% at 88% 6%, rgb(187 98 222 / .55), transparent 70%),
    radial-gradient(34% 30% at 4% 30%, rgb(138 60 176 / .32), transparent 70%),
    radial-gradient(36% 36% at 72% 58%, rgb(187 98 222 / .36), transparent 70%),
    radial-gradient(46% 40% at 14% 92%, rgb(187 98 222 / .4), transparent 70%),
    radial-gradient(60% 50% at 50% 40%, rgb(247 245 238 / 1), transparent 80%),
    var(--white);
}
.bands i { background:
  radial-gradient(42% 36% at 86% 8%, rgb(187 98 222 / .38), transparent 70%),
  radial-gradient(40% 40% at 6% 92%, rgb(138 60 176 / .34), transparent 70%),
  radial-gradient(30% 30% at 40% 50%, rgb(187 98 222 / .12), transparent 70%),
  var(--ink); }
.band-dark .win, .band-dark .ui { background: var(--dglass-bg); -webkit-backdrop-filter: blur(40px) saturate(180%); backdrop-filter: blur(40px) saturate(180%); box-shadow: var(--dglass-edge), 0 40px 90px -40px rgb(26 26 26 / .9); }

/* ---------- 1b. explainer, held while you scroll ---------- */
@media (min-width: 900px) {
  .sx-wrap[data-sx-scroll] { height: 230vh; margin-top: 0; }
  .sx-wrap[data-sx-scroll] > * { position: sticky; }
  .sx-wrap[data-sx-scroll] .sx-rail { top: calc(76px + 6vh); margin-top: clamp(32px, 4vw, 56px); }
  .sx-wrap[data-sx-scroll] .sx { top: calc(76px + 6vh + 60px); }
  .sx-fill, .sx-you { transition: none !important; }
  .sx-step { transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out), opacity .6s var(--ease-out); }
  .sx-step:not(.on) { opacity: .6; transform: scale(.97); }
}

/* ---------- 2. a week at AntBox ---------- */
.what .wrap > .sec-lede { margin-inline: auto; }
.wkst { position: relative; margin-top: clamp(40px, 6vw, 80px); }
.st-text { display: grid; gap: 28px; }
.st-ch { display: grid; gap: 10px; }
.st-k { font: 400 1rem/1 var(--font-display); color: var(--purple); }
.st-tag { font: 600 .7rem/1.4 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--purple); }
.st-ch h3 { font: 400 clamp(1.9rem, 1.3rem + 2vw, 3.1rem)/1.04 var(--font-display); letter-spacing: -.035em; max-width: 16ch; }
.st-ch p { color: var(--fg-2); font-size: 1.0625rem; line-height: 1.65; max-width: 40ch; }
.st-stick { display: none; }
.st-inline { margin-top: 14px; border-radius: 18px; padding: 14px; background: var(--dglass-bg); box-shadow: var(--dglass-edge); }
.st-pane { position: relative; }
@media (min-width: 960px) {
  .wkst { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 5vw, 88px); }
  .st-text { gap: 0; }
  .st-ch { min-height: 78vh; align-content: center; opacity: .28; transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); transform: translateX(-6px); }
  .st-ch.on { opacity: 1; transform: none; }
  .st-ch .st-inline { display: none; }
  .st-stick { display: block; position: sticky; top: calc(76px + 9vh); height: calc(82vh - 76px); align-self: start; }
  .st-screen { position: relative; height: 100%; }
  .st-screen::before { content: ""; position: absolute; inset: -10% -6%; z-index: -1; background: radial-gradient(45% 45% at 60% 40%, rgb(187 98 222 / .45), transparent 70%); filter: blur(20px); }
  .st-win { height: 100%; display: flex; flex-direction: column; border-radius: 24px; }
  .st-panes { position: relative; flex: 1; padding: 0; }
  .st-pane { position: absolute; inset: 0; display: grid; align-content: center; padding: clamp(18px, 2.4vw, 32px); opacity: 0; visibility: hidden; transform: translateY(18px) scale(.98); transition: opacity .55s var(--ease-out), transform .65s var(--ease-out), visibility 0s .55s; }
  .st-pane.on { opacity: 1; visibility: visible; transform: none; transition: opacity .55s var(--ease-out), transform .65s var(--ease-out), visibility 0s; }
}
.st-dots { margin-left: auto; display: inline-flex; gap: 5px; }
.st-dots i { width: 18px; height: 3px; border-radius: 3px; background: rgb(247 245 238 / .2); transition: background-color .4s; }
.st-dots i.on { background: var(--purple); }
.pf2-big .pf2-feed { height: 300px; }
.st-pane .race, .st-pane .crp, .st-pane .px { width: 100%; }
.st-pane .iaas2 li { padding: 14px 16px !important; }
.svc-wrap { margin-top: clamp(40px, 6vw, 80px); }
.svc-wrap .bx-svc { background: var(--dglass-bg) !important; box-shadow: var(--dglass-edge), 0 40px 90px -40px rgb(26 26 26 / .9) !important; -webkit-backdrop-filter: blur(40px) saturate(180%); backdrop-filter: blur(40px) saturate(180%); border-radius: 28px; padding: clamp(22px, 2.6vw, 34px); }

/* ---------- 3. five steps in a row ---------- */
.how { padding-block: clamp(80px, 9vw, 140px); }
.fw { position: relative; margin-top: clamp(36px, 5vw, 64px); --p: 0; }
.fw-row { display: grid; gap: 12px; }
.fw-t { position: relative; display: grid; gap: 6px; align-content: start; padding: 22px 20px 24px; border-radius: 26px; background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), var(--glass-shadow); opacity: .55; transform: translateY(14px); transition: opacity .6s var(--ease-out), transform .7s var(--ease-out), box-shadow .6s; }
.fw-t.on { opacity: 1; transform: none; box-shadow: var(--glass-edge), inset 0 0 0 1px rgb(187 98 222 / .35), 0 40px 80px -40px rgb(138 60 176 / .7); }
.fw-ic { width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: 8px; border-radius: 18px; background: rgb(255 255 255 / .7); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .95), 0 10px 24px -14px rgb(138 60 176 / .6); transition: background-color .5s; }
.fw-t.on .fw-ic { background: var(--ink); }
.fw-ic svg { width: 32px; height: 32px; }
.i-l { fill: none; stroke: rgb(26 26 26 / .5); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: stroke .5s; }
.i-a { fill: none; stroke: var(--purple); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; transition: stroke-dashoffset 1s var(--ease-out) .2s; }
.i-f { fill: rgb(26 26 26 / .35); transition: fill .5s; } .i-c { fill: var(--purple); } .i-c2 { fill: rgb(26 26 26 / .25); transition: fill .5s; } .i-c3 { fill: rgb(187 98 222 / .35); stroke: var(--purple); stroke-width: 1.5; }
.fw-t.on .i-l { stroke: var(--beige); } .fw-t.on .i-f { fill: var(--beige); } .fw-t.on .i-c2 { fill: var(--purple); } .fw-t.on .i-a { stroke-dashoffset: 0; }
.fw-t.on .fw-ic svg { animation: wob 3s var(--ease-in-out) infinite; }
.fw-n { font: 400 .95rem/1 var(--font-display); color: var(--purple-deep); }
.fw-t b { font: 400 1.55rem/1.1 var(--font-display); letter-spacing: -.025em; }
.fw-t p { color: var(--fg-2); font-size: .95rem; line-height: 1.5; }
.fw-line { display: none; }
.fw-counts { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 26px; font-size: .9rem; color: var(--fg-2); }
.fw-counts > span:first-child { margin-right: 4px; font-weight: 500; color: var(--fg); }
@media (min-width: 960px) {
  .fw-row { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
  .fw-line { display: block; position: absolute; left: 10%; right: 10%; top: 50px; height: 2px; border-radius: 2px; background: rgb(26 26 26 / .08); z-index: 0; }
  .fw-line i { position: absolute; inset: 0; transform: scaleX(var(--p)); transform-origin: 0 50%; background: linear-gradient(90deg, var(--purple-deep), var(--purple)); box-shadow: 0 0 12px rgb(187 98 222 / .7); }
  .fw-row { position: relative; z-index: 1; }
  .fw-t:nth-child(even) { margin-top: 36px; }
}

/* ---------- 5. three-body side by side ---------- */
.tb .wrap > .sec-lede { margin-inline: auto; }
.tb2 { position: relative; display: grid; gap: 16px; margin-top: clamp(32px, 5vw, 56px); }
.tb2-p { position: relative; margin: 0; aspect-ratio: 1.15; border-radius: 30px; overflow: hidden; background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), var(--glass-shadow); }
.tb2-p .tb-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.tb2-h { position: absolute; left: 18px; top: 18px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-size: .85rem; font-weight: 600; background: rgb(255 255 255 / .82); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .95), 0 10px 24px -14px rgb(26 26 26 / .3); }
.tb2-h i { width: 8px; height: 8px; border-radius: 50%; background: rgb(26 26 26 / .4); }
.tb2-order .tb2-h { background: var(--ink); color: var(--beige); } .tb2-order .tb2-h i { background: var(--purple); box-shadow: 0 0 0 4px rgb(187 98 222 / .25); }
.tb2-p figcaption { position: absolute; left: 0; right: 0; bottom: 16px; z-index: 2; text-align: center; }
.tb2-p figcaption { font: 400 1.05rem/1.2 var(--font-display); }
.tb2-chaos figcaption { color: var(--fg-2); }
.tb2-order { box-shadow: var(--glass-edge), inset 0 0 0 1px rgb(187 98 222 / .3), 0 50px 100px -40px rgb(138 60 176 / .7); }
.tb2-vs { justify-self: center; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--beige); font: 400 .95rem/1 var(--font-display); box-shadow: 0 0 0 8px rgb(255 255 255 / .6), 0 14px 30px -10px rgb(26 26 26 / .4); z-index: 3; }
.tb2-list { display: grid; gap: 10px; margin-top: 22px; }
.tb2-list li { display: grid; grid-template-columns: 14px 90px 1fr; gap: 6px 12px; align-items: baseline; padding: 16px 20px; border-radius: 20px; background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge); }
.tb2-list .tb-p { color: var(--fg-3); text-decoration: line-through; text-decoration-color: rgb(187 98 222 / .6); }
.tb2-list .tb-arr { display: none; }
.tb2-list .tb-s { grid-column: 3; color: var(--fg); font-weight: 500; }
@media (min-width: 900px) {
  .tb2 { grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0; }
  .tb2-vs { margin: 0 -23px; }
  .tb2-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .tb2-list li { grid-template-columns: 14px 1fr; }
  .tb2-list .tb-p, .tb2-list .tb-s { grid-column: 2; }
}

/* ---------- 6. Proof of Work, white glass, one screen ---------- */
.p5 { position: relative; max-width: 1140px; height: min(78vh, 720px); min-height: 560px; margin: clamp(28px, 4vw, 48px) auto 0; display: flex; flex-direction: column; border-radius: 26px; overflow: hidden; color: var(--ink);
  background: linear-gradient(160deg, rgb(255 255 255 / .9), rgb(255 255 255 / .72)); -webkit-backdrop-filter: blur(50px) saturate(200%); backdrop-filter: blur(50px) saturate(200%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .9), inset 0 2px 0 rgb(255 255 255), 0 80px 160px -60px rgb(187 98 222 / .8), 0 40px 80px -40px rgb(26 26 26 / .9); }
.p5 { --fg: var(--ink); --fg-2: rgb(26 26 26 / .72); --fg-3: rgb(26 26 26 / .62); --rule: rgb(26 26 26 / .1); }
.p5-bar { display: flex; align-items: center; gap: 14px; height: 38px; padding: 0 16px; background: rgb(26 26 26 / .03); border-bottom: 1px solid rgb(26 26 26 / .07); }
.p5-url { flex: 1; max-width: 360px; margin: 0 auto; padding: 4px 14px; border-radius: 999px; background: rgb(26 26 26 / .05); text-align: center; font-size: .74rem; color: var(--fg-3); }
.p5-try { padding: 4px 10px; border-radius: 999px; background: rgb(187 98 222 / .14); color: var(--purple-deep); font-size: .7rem; font-weight: 600; animation: blip 2s infinite; }
.p5.live .p5-try { animation: none; opacity: .6; }
.p5-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 16px 22px; }
.p5-head .you-av.lg { width: 56px; height: 56px; font-size: .85rem; }
.p5-who { display: grid; gap: 2px; } .p5-who b { display: inline-flex; align-items: center; gap: 7px; font: 400 1.35rem/1.1 var(--font-display); } .p5-who small { font-size: .78rem; color: var(--fg-3); }
.p5-kpis { display: flex; gap: 22px; margin-left: auto; } .p5-kpis span { display: grid; } .p5-kpis b { font: 400 1.5rem/1 var(--font-display); } .p5-kpis small { font-size: .7rem; color: var(--fg-3); }
.p5 .pw-ready { margin: 0; }
.p5-share { padding: 9px 16px; border: 0; border-radius: 999px; background: var(--ink); color: var(--beige); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
.p5-share:hover { background: var(--purple); color: var(--ink); }
.p5-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 0 22px; border-bottom: 1px solid rgb(26 26 26 / .08); }
.p5-tabs > button { padding: 10px 12px; border: 0; background: none; font: inherit; font-size: .85rem; color: var(--fg-3); cursor: pointer; }
.p5-tabs > button em { font-style: normal; margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: rgb(26 26 26 / .06); font-size: .7rem; }
.p5-tabs > button.on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--purple); }
.p5-filters { display: none; margin-left: auto; gap: 5px; padding: 6px 0; }
.p5.on-work .p5-filters { display: flex; flex-wrap: wrap; }
.p5-filters button { padding: 5px 11px; border: 0; border-radius: 999px; background: rgb(26 26 26 / .05); font: inherit; font-size: .74rem; color: var(--fg-2); cursor: pointer; }
.p5-filters button.on { background: var(--ink); color: var(--beige); }
.p5-body { position: relative; flex: 1; min-height: 0; }
.p5-v { display: none; height: 100%; }
.p5-v.on { display: grid; animation: view-in .4s var(--ease-out); }
.p5-v[data-p5-v="work"] { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); min-height: 0; }
.p5-list { display: grid; align-content: start; gap: 6px; padding: 14px; overflow: auto; border-right: 1px solid rgb(26 26 26 / .07); }
.p5-it { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border: 0; border-radius: 14px; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; transition: background-color .3s, box-shadow .3s; }
.p5-it:hover { background: rgb(26 26 26 / .04); }
.p5-it.on { background: rgb(255 255 255 / .9); box-shadow: inset 0 0 0 1px rgb(187 98 222 / .45), 0 12px 26px -16px rgb(138 60 176 / .6); }
.p5-it[hidden] { display: none; }
.p5-th { width: 40px; height: 40px; border-radius: 11px; background: linear-gradient(140deg, rgb(187 98 222 / .25), rgb(138 60 176 / .1)); position: relative; overflow: hidden; }
.p5-th::after { content: ""; position: absolute; inset: 10px; border-radius: 3px; background: linear-gradient(transparent 55%, var(--purple) 55% 72%, transparent 72%), linear-gradient(90deg, var(--purple-deep) 0 3px, transparent 3px); }
.th-revenue::after { background: repeating-linear-gradient(transparent 0 4px, rgb(138 60 176 / .6) 4px 5px); }
.th-market::after { border-radius: 50%; background: conic-gradient(var(--purple) 0 40%, var(--purple-deep) 40% 70%, rgb(26 26 26 / .2) 70%); }
.th-deck::after { background: linear-gradient(var(--purple-deep) 0 30%, transparent 30%); box-shadow: inset 0 0 0 1.5px var(--purple-deep); }
.th-hack::after { background: repeating-linear-gradient(transparent 0 4px, var(--purple) 4px 6px, transparent 6px 8px); }
.th-pricing::after { background: linear-gradient(90deg, rgb(138 60 176 / .5) 0 30%, transparent 30% 35%, var(--purple) 35% 65%, transparent 65% 70%, rgb(138 60 176 / .5) 70%); }
.p5-tt { display: grid; gap: 3px; min-width: 0; } .p5-tt b { font-weight: 500; font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .p5-tt small { display: flex; align-items: center; gap: 6px; font-size: .7rem; color: var(--fg-3); white-space: nowrap; overflow: hidden; }
.p5-it em { font-style: normal; padding: 3px 9px; border-radius: 999px; font-size: .66rem; font-weight: 600; background: rgb(26 26 26 / .06); color: var(--fg-2); }
.p5-it em.st-live { background: var(--purple); color: var(--ink); } .p5-it em.st-selected, .p5-it em.st-finalist { background: var(--ink); color: var(--beige); }
.p5-prev { position: relative; min-height: 0; }
.p5-pv { position: absolute; inset: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 14px; padding: 18px 22px 20px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .45s var(--ease-out), transform .5s var(--ease-out), visibility 0s .45s; }
.p5-pv.on { opacity: 1; visibility: visible; transform: none; transition: opacity .45s var(--ease-out), transform .5s var(--ease-out), visibility 0s; }
.p5-art { min-height: 0; display: grid; place-items: center; padding: 18px; border-radius: 20px; background: radial-gradient(70% 70% at 70% 0%, rgb(187 98 222 / .14), transparent 70%), rgb(247 245 238 / .7); box-shadow: inset 0 0 0 1px rgb(26 26 26 / .06); overflow: hidden; }
.p5-meta { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: end; }
.p5-meta > div:first-child { display: grid; gap: 5px; justify-items: start; } .p5-meta b { font: 400 1.35rem/1.15 var(--font-display); } .p5-meta p { font-size: .88rem; line-height: 1.5; color: var(--fg-2); max-width: 52ch; } .p5-meta small { font-size: .74rem; color: var(--fg-3); }
.p5-score { display: grid; justify-items: end; padding: 12px 16px; border-radius: 16px; background: var(--ink); color: var(--beige); } .p5-score span { font-size: .68rem; opacity: .7; } .p5-score b { font: 400 2rem/1 var(--font-display); color: var(--purple); } .p5-score small { font-size: .68rem; opacity: .6; }
.p5-revs, .p5-sks { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-content: start; gap: 12px; padding: 20px 22px; overflow: auto; }
.p5-revs article { display: flex; gap: 12px; padding: 16px; border-radius: 18px; background: rgb(255 255 255 / .85); box-shadow: inset 0 0 0 1px rgb(26 26 26 / .06); }
.p5-revs article > div { display: grid; gap: 4px; } .p5-revs b { font-weight: 500; } .p5-revs small { font-size: .74rem; color: var(--fg-3); } .p5-revs p { font: 400 1.02rem/1.4 var(--font-display); }
.p5-revs .ini { width: 40px; height: 40px; font-size: .75rem; }
.p5 .stars i { background: rgb(26 26 26 / .15); } .p5 .stars i.on { background: var(--purple); }
.p5-sks > div { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 18px; background: rgb(255 255 255 / .85); box-shadow: inset 0 0 0 1px rgb(26 26 26 / .06); }
.p5-sks .pw4-ring .r0 { stroke: rgb(26 26 26 / .1); } .p5-sks span { display: grid; } .p5-sks span b { font-weight: 500; } .p5-sks small { font-size: .74rem; color: var(--fg-3); }
.p5-toast { position: absolute; right: 18px; top: 56px; z-index: 6; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; background: var(--ink); color: var(--beige); font-size: .8rem; box-shadow: 0 20px 40px -14px rgb(26 26 26 / .6); opacity: 0; transform: translateY(-8px); transition: opacity .4s, transform .5s var(--ease-out); pointer-events: none; }
.p5-toast.show { opacity: 1; transform: none; } .p5-toast .ck { color: var(--purple); }
.p5-note { margin-top: 14px; text-align: center; font-size: .78rem; color: var(--fg-3); }
.p5 .tg.t1, .p5 .tg.t3 { color: var(--purple-deep); }
/* the work itself */
.art { width: 100%; max-width: 560px; font-size: .78rem; color: var(--ink); }
.art-dash { display: grid; gap: 12px; padding: 16px; border-radius: 14px; background: var(--white); box-shadow: 0 20px 40px -24px rgb(26 26 26 / .4); }
.ad-top { display: flex; justify-content: space-between; } .ad-top span { color: rgb(26 26 26 / .6); }
.ad-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .ad-kpis span { display: grid; gap: 2px; padding: 10px; border-radius: 10px; background: rgb(247 245 238 / .9); }
.ad-kpis small { font-size: .65rem; color: rgb(26 26 26 / .62); } .ad-kpis b { font: 400 1.25rem/1 var(--font-display); } .ad-kpis em { font-style: normal; font-size: .64rem; color: var(--purple-deep); font-weight: 600; }
.ad-chart { width: 100%; height: 90px; } .ad-chart .g { stroke: rgb(26 26 26 / .07); fill: none; } .ad-chart .a { fill: rgb(187 98 222 / .14); } .ad-chart .l { fill: none; stroke: var(--purple); stroke-width: 2.4; vector-effect: non-scaling-stroke; stroke-dasharray: 500; stroke-dashoffset: 500; }
.p5-pv.on .ad-chart .l, .p5-pv.on .pr-chart .l, .p5-pv.on .pr-chart .l2 { animation: draw-l 1.4s var(--ease-out) forwards; }
@keyframes draw-l { to { stroke-dashoffset: 0; } }
.ad-cohort { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; } .ad-cohort i { aspect-ratio: 1; border-radius: 3px; background: rgb(187 98 222 / var(--o)); }
.art-sheet { padding: 14px; border-radius: 14px; background: var(--white); box-shadow: 0 20px 40px -24px rgb(26 26 26 / .4); }
.as-bar { display: flex; justify-content: space-between; margin-bottom: 10px; } .as-bar span { color: rgb(26 26 26 / .6); }
.art-sheet table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.art-sheet th, .art-sheet td { padding: 7px 8px; border-bottom: 1px solid rgb(26 26 26 / .07); text-align: right; } .art-sheet th:first-child, .art-sheet td:first-child { text-align: left; }
.art-sheet th { font-size: .66rem; font-weight: 600; color: rgb(26 26 26 / .62); text-transform: uppercase; letter-spacing: .06em; }
.art-sheet .up { color: var(--purple-deep); font-weight: 600; } .art-sheet .dn { color: rgb(26 26 26 / .62); }
.art-sheet tr.tot td { font-weight: 600; border-bottom: 0; background: rgb(187 98 222 / .08); }
.as-note { display: block; margin-top: 10px; font-size: .7rem; color: rgb(26 26 26 / .62); }
.art-doc { display: grid; gap: 10px; padding: 18px; border-radius: 14px; background: var(--white); box-shadow: 0 20px 40px -24px rgb(26 26 26 / .4); }
.doc-k { font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--purple-deep); font-weight: 600; } .doc-t { font: 400 1.15rem/1.25 var(--font-display); }
.doc-row { display: grid; grid-template-columns: 1fr 90px; gap: 16px; align-items: center; }
.doc-p { display: grid; gap: 7px; } .doc-p i { display: block; height: 7px; width: 100%; border-radius: 4px; background: rgb(26 26 26 / .08); }
.doc-pie { width: 90px; height: 90px; transform: rotate(-90deg); } .doc-pie circle { fill: none; stroke-width: 10; } .doc-pie .p0 { stroke: rgb(26 26 26 / .1); } .doc-pie .p1 { stroke: var(--purple); stroke-dasharray: 46 100; } .doc-pie .p2 { stroke: var(--purple-deep); stroke-dasharray: 22 100; stroke-dashoffset: -46; }
.doc-tags { display: flex; gap: 6px; } .doc-tags span { padding: 3px 9px; border-radius: 999px; background: rgb(187 98 222 / .12); color: var(--purple-deep); font-size: .66rem; font-weight: 600; }
.art-slide { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; padding: 22px; border-radius: 14px; aspect-ratio: 16 / 9; background: radial-gradient(80% 80% at 90% 10%, rgb(138 60 176 / .5), transparent 70%), var(--ink); color: var(--beige); box-shadow: 0 20px 40px -20px rgb(26 26 26 / .6); }
.sl2-l { display: grid; align-content: center; gap: 8px; } .sl2-k { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--purple); } .sl2-l b { font: 400 1.35rem/1.15 var(--font-display); } .sl2-s { font-size: .74rem; color: rgb(247 245 238 / .7); }
.sl2-tiers { display: grid; align-content: center; gap: 6px; } .sl2-tiers span { display: flex; justify-content: space-between; padding: 8px 10px; border-radius: 9px; background: rgb(247 245 238 / .08); } .sl2-tiers small { color: rgb(247 245 238 / .7); } .sl2-tiers .hi { background: var(--purple); color: var(--ink); } .sl2-tiers .hi small { color: var(--ink); }
.art-code { display: grid; grid-template-columns: 1.2fr 1fr; gap: 10px; }
.cd-ed { padding: 12px; border-radius: 12px; background: var(--ink); color: rgb(247 245 238 / .85); font: 500 .7rem/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; } .cd-ed b { color: var(--purple); font-weight: 600; } .cd-ed em { font-style: normal; color: var(--beige); }
.cd-tab { display: inline-block; margin-bottom: 8px; padding: 2px 8px; border-radius: 6px; background: rgb(247 245 238 / .1); font-size: .62rem; }
.cd-app { display: grid; align-content: start; gap: 7px; padding: 12px; border-radius: 12px; background: var(--white); box-shadow: 0 20px 40px -24px rgb(26 26 26 / .4); }
.cd-h { font-weight: 600; } .cd-r { display: grid; grid-template-columns: 1fr 26px; align-items: center; gap: 8px; } .cd-r i { height: 7px; border-radius: 4px; background: linear-gradient(90deg, var(--purple-deep), var(--purple)) 0 0 / var(--w) 100% no-repeat, rgb(26 26 26 / .07); } .cd-r b { text-align: right; }
.cd-badge { justify-self: start; margin-top: 4px; padding: 3px 9px; border-radius: 999px; background: var(--ink); color: var(--beige); font-size: .64rem; font-weight: 600; }
.art-price { display: grid; gap: 12px; padding: 16px; border-radius: 14px; background: var(--white); box-shadow: 0 20px 40px -24px rgb(26 26 26 / .4); }
.pr-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .pr-cards span { display: grid; gap: 2px; padding: 12px; border-radius: 12px; background: rgb(247 245 238 / .9); } .pr-cards small { font-size: .66rem; color: rgb(26 26 26 / .62); } .pr-cards b { font: 400 1.4rem/1 var(--font-display); } .pr-cards em { font-style: normal; font-size: .66rem; color: rgb(26 26 26 / .62); }
.pr-cards .hi { background: var(--ink); color: var(--beige); } .pr-cards .hi small, .pr-cards .hi em { color: rgb(247 245 238 / .7); }
.pr-chart { width: 100%; height: 70px; } .pr-chart .g { stroke: rgb(26 26 26 / .07); fill: none; } .pr-chart .l { fill: none; stroke: var(--purple); stroke-width: 2.4; vector-effect: non-scaling-stroke; stroke-dasharray: 500; stroke-dashoffset: 500; } .pr-chart .l2 { fill: none; stroke: rgb(26 26 26 / .3); stroke-width: 2; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.pr-k { display: flex; align-items: center; gap: 6px; font-size: .66rem; color: rgb(26 26 26 / .62); } .pr-k i { width: 12px; height: 3px; border-radius: 2px; background: var(--purple); } .pr-k i.o { background: rgb(26 26 26 / .3); }
@media (max-width: 899px) {
  .p5 { height: auto; min-height: 0; }
  .p5-kpis { margin-left: 0; width: 100%; }
  .p5-v[data-p5-v="work"] { grid-template-columns: 1fr; }
  .p5-list { display: flex; gap: 8px; overflow-x: auto; border-right: 0; border-bottom: 1px solid rgb(26 26 26 / .07); }
  .p5-it { flex: none; width: 240px; }
  .p5-prev { min-height: 520px; }
  .p5-meta { grid-template-columns: 1fr; }
  .art-slide, .art-code { grid-template-columns: 1fr; aspect-ratio: auto; }
  .p5-filters { margin-left: 0; }
}

/* ---------- 7. you vs your batch ---------- */
.path { padding-block: 0; }
.path-pin { display: flex; flex-direction: column; justify-content: center; min-height: 100vh; padding-block: clamp(80px, 9vw, 120px) 60px; }
.path .wrap > .sec-lede { margin-inline: auto; }
.lanes { --p: 0; display: grid; gap: 14px; margin-top: clamp(28px, 4vw, 48px); }
.ln-head { display: none; }
.lane { display: grid; gap: 12px; padding: 18px; border-radius: 28px; background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), var(--glass-shadow); }
.ln-who { display: flex; align-items: center; gap: 12px; } .ln-who > span:last-child { display: grid; } .ln-who b { font-weight: 600; } .ln-who small { font-size: .78rem; color: var(--fg-3); }
.ln-who .you-av, .ln-who .ini { width: 44px; height: 44px; font-size: .75rem; }
.ln-who .you-av img { width: 24px; height: 24px; filter: brightness(0) invert(1); }
.ln-track { position: relative; display: grid; gap: 8px; }
.ln-fill { display: none; }
.ln-cell { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; background: rgb(255 255 255 / .55); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .9); font-size: .9rem; opacity: .4; transform: translateY(8px); transition: opacity .5s var(--ease-out), transform .6s var(--ease-out), background-color .5s, box-shadow .5s; }
.ln-cell.on { opacity: 1; transform: none; }
.ln-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: rgb(26 26 26 / .2); }
.ln-you .ln-cell.on .ln-dot { background: var(--purple); box-shadow: 0 0 0 5px rgb(187 98 222 / .2); }
.ln-you .ln-cell.now { background: var(--ink); color: var(--beige); box-shadow: 0 20px 40px -20px rgb(138 60 176 / .8); }
.ln-them .ln-cell { color: var(--fg-2); }
.ln-them .ln-cell.now { background: rgb(255 255 255 / .85); box-shadow: inset 0 0 0 1px rgb(26 26 26 / .12); }
.ln-end { justify-self: start; padding: 8px 14px; border-radius: 999px; font-weight: 600; font-size: .85rem; opacity: 0; transform: scale(.8); transition: opacity .5s, transform .6s var(--ease-out); }
.ln-you .ln-end { background: var(--purple); color: var(--ink); box-shadow: 0 0 0 8px rgb(187 98 222 / .2), 0 20px 40px -12px rgb(187 98 222 / .9); }
.ln-them .ln-end { background: rgb(26 26 26 / .08); color: var(--fg-2); }
.lanes.done .ln-end { opacity: 1; transform: none; }
.ln-them { opacity: .92; }
@media (min-width: 900px) {
  .path-pin { height: 100vh; padding-block: 90px 40px; }
  .ln-head { display: grid; grid-template-columns: 200px 1fr; gap: 18px; padding: 0 18px; }
  .ln-cols { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 10px; padding-right: 110px; }
  .ln-c { font: 600 .72rem/1.4 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); transition: color .4s; }
  .ln-c.on { color: var(--purple-deep); }
  .lane { grid-template-columns: 200px 1fr; align-items: center; gap: 18px; }
  .ln-track { grid-template-columns: repeat(var(--n), minmax(0, 1fr)) 100px; gap: 10px; align-items: stretch; }
  .ln-cell { flex-direction: column; align-items: flex-start; gap: 8px; min-height: 96px; font-size: .86rem; line-height: 1.35; }
  .ln-fill { display: block; position: absolute; left: 0; right: 110px; top: -10px; height: 3px; border-radius: 3px; background: rgb(26 26 26 / .07); }
  .ln-fill::after { content: ""; position: absolute; inset: 0; transform: scaleX(var(--p)); transform-origin: 0 50%; border-radius: 3px; }
  .ln-you .ln-fill::after { background: linear-gradient(90deg, var(--purple-deep), var(--purple)); box-shadow: 0 0 10px rgb(187 98 222 / .7); }
  .ln-them .ln-fill::after { background: rgb(26 26 26 / .3); }
  .ln-end { align-self: center; justify-self: center; text-align: center; }
}

/* ---------- 8. the people wall ---------- */
.closing .wrap > .sec-lede { margin-inline: auto; }
.pw-wall { position: relative; height: clamp(640px, 64vw, 780px); margin-top: clamp(28px, 4vw, 48px); }
.pw-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pw-lines line { stroke: rgb(247 245 238 / .12); stroke-width: 1; }
.pw-lines line.to-feat { stroke: var(--purple); stroke-width: 1.6; stroke-dasharray: 4 6; animation: flow 1.2s linear infinite; filter: drop-shadow(0 0 4px rgb(187 98 222 / .9)); }
.pw-n { position: absolute; z-index: 1; width: var(--d, 72px); height: var(--d, 72px); translate: -50% -50%; padding: 0; border: 0; border-radius: 50%; overflow: hidden; cursor: pointer; background: var(--ink); box-shadow: 0 0 0 2px rgb(247 245 238 / .22), 0 18px 34px -14px rgb(26 26 26 / .9); animation: float 7s var(--ease-in-out) infinite; animation-delay: calc(var(--fl) * -1); transition: transform .5s var(--ease-out), box-shadow .5s, filter .5s; filter: saturate(.85) brightness(.92); }
.pw-n img { width: 100%; height: 100%; object-fit: cover; }
.pw-n:hover { transform: scale(1.12); filter: none; }
.pw-n.on { z-index: 3; filter: none; transform: scale(1.18); box-shadow: 0 0 0 3px var(--purple), 0 0 0 12px rgb(187 98 222 / .2), 0 0 50px rgb(187 98 222 / .7); animation-play-state: paused; }
.pw-n:focus-visible { outline: 2px solid var(--purple); outline-offset: 4px; }
.pw-feat { position: absolute; z-index: 4; left: 50%; top: 50%; translate: -50% -50%; width: min(560px, 46%); margin: 0; display: grid; grid-template-columns: 46% 1fr; border-radius: 30px; overflow: hidden;
  background: var(--dglass-bg); -webkit-backdrop-filter: blur(40px) saturate(180%); backdrop-filter: blur(40px) saturate(180%);
  box-shadow: var(--dglass-edge), 0 60px 120px -40px rgb(26 26 26 / .95), 0 0 80px -20px rgb(187 98 222 / .6); }
.pf-img { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.pf-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); }
.pf-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 60%, rgb(26 26 26 / .35)); }
.pw-feat figcaption { display: grid; align-content: center; gap: 8px; padding: 26px 24px; }
.pf-q { font: 400 clamp(1.1rem, .95rem + .5vw, 1.4rem)/1.35 var(--font-display); color: var(--beige); }
.pf-q::before { content: "\201C"; color: var(--purple); }
.pf-n { margin-top: 6px; font-weight: 600; color: var(--beige); } .pf-r { font-size: .78rem; color: rgb(247 245 238 / .65); }
.pf-count { position: absolute; right: 16px; top: 14px; padding: 3px 10px; border-radius: 999px; background: rgb(247 245 238 / .1); color: rgb(247 245 238 / .7); font-size: .68rem; }
.pw-feat.in .pf-img img { animation: feat-img .9s var(--ease-out); }
.pw-feat.in figcaption > * { animation: feat-txt .7s var(--ease-out) both; }
.pw-feat.in .pf-n { animation-delay: .08s; } .pw-feat.in .pf-r { animation-delay: .14s; }
@keyframes feat-img { from { opacity: 0; transform: scale(1.18); } }
@keyframes feat-txt { from { opacity: 0; transform: translateY(10px); } }
.close-cta { display: grid; justify-items: center; gap: 18px; margin-top: clamp(24px, 3vw, 40px); }
@media (max-width: 759px) {
  .pw-wall { height: 820px; }
  .pw-feat { top: auto; bottom: 0; left: 0; right: 0; translate: none; width: auto; grid-template-columns: 40% 1fr; }
  .pw-feat figcaption { padding: 18px 16px; }
}
.p5 { background: linear-gradient(160deg, rgb(255 255 255 / .97), rgb(255 255 255 / .88)); }
.p5-list { background: rgb(247 245 238 / .5); }
@media (min-width: 900px) { .sx-step:not(.on) { opacity: .86; transform: scale(.97); } .sx-step:not(.on) .sx-vis { filter: saturate(.6); } }

/* ================= Revision 21: final pass ================= */
.ini.lg { width: 56px; height: 56px; font-size: .95rem; }
.tr-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 1140px; margin: clamp(24px, 3vw, 40px) auto 0; }
.tr-strip > div { display: grid; gap: 2px; padding: 16px 18px; border-radius: 20px; background: var(--dglass-bg); -webkit-backdrop-filter: blur(30px) saturate(170%); backdrop-filter: blur(30px) saturate(170%); box-shadow: var(--dglass-edge); }
.tr-strip b { font: 400 clamp(1.8rem, 1.3rem + 1.4vw, 2.6rem)/1 var(--font-display); letter-spacing: -.035em; color: var(--purple); }
.tr-strip small { font-size: .8rem; color: var(--fg-2); }
@media (min-width: 760px) { .tr-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tr-strip + .p5 { margin-top: 14px; }
/* the week screen: a calm, centred window the content actually fills */
@media (min-width: 960px) {
  .st-stick { top: max(96px, calc(50vh - 290px + 38px)); height: min(580px, calc(100vh - 140px)); }
  .st-pane { padding: clamp(22px, 2.6vw, 36px); align-content: center; }
  .st-pane > * { width: 100%; }
  .st-pane .ac .day-list li { padding: 9px 0; font-size: .875rem; }
  .st-pane .kb-top { font-size: .8rem; } .st-pane .kb-top b { font-size: 1.4rem; }
  .st-pane .wx-col { min-height: 210px; }
  .st-pane .wx-card b { font-size: .78rem; }
  .st-pane .cp-team { gap: 18px; margin-bottom: 18px; } .st-pane .cp-m .face, .st-pane .cp-you .you-av { width: 46px; height: 46px; }
  .st-pane .chat .m > span, .st-pane .chat .msg { font-size: .85rem; padding: 10px 14px; }
  .st-pane .chat { margin-bottom: 22px; }
  .st-pane .months i { height: 30px; }
  .st-ch { min-height: 70vh; }
}
.st-inline .wx-col { min-height: 140px; }
/* the reminder: one slim glass line */
.nudge { max-width: min(420px, calc(100vw - 32px)); }
.nudge.quiet { opacity: 0 !important; pointer-events: none; transform: translateY(10px); }
.voice-pop { display: none !important; }
.pw-wall { height: clamp(600px, 56vw, 700px); }
@media (max-width: 759px) { .pf-count { position: static; justify-self: start; order: -1; margin: 14px 0 0 16px; grid-column: 2; } .pw-feat { grid-template-rows: auto 1fr; } .pw-feat .pf-img { grid-row: 1 / span 2; } .pw-feat figcaption { padding-top: 6px; } }
@media (max-width: 899px) { .tb2-p { aspect-ratio: .92; } .tb2-vs { margin: -10px 0; } }

/* ================= Revision 22: team feedback ================= */
/* explainer: solid cards, and the whole block (heading, rail, cards) pins as one */
.sx-step { background: linear-gradient(165deg, var(--white), rgb(247 245 238) 140%); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 1px rgb(26 26 26 / .06), 0 30px 70px -36px rgb(138 60 176 / .5), 0 2px 8px rgb(26 26 26 / .04); }
.sx-vis { background: radial-gradient(80% 70% at 70% 0%, rgb(187 98 222 / .14), transparent 70%), linear-gradient(rgb(26 26 26 / .03) 1px, transparent 1px) 0 0 / 20px 20px, linear-gradient(90deg, rgb(26 26 26 / .03) 1px, transparent 1px) 0 0 / 20px 20px, rgb(247 245 238); }
@media (min-width: 900px) {
  .simple[data-sx-pin] { height: 280vh; padding: 0; }
  .simple .sx-pin { position: sticky; top: 76px; height: calc(100vh - 76px); display: flex; flex-direction: column; justify-content: center; }
  .simple .sec-title { font-size: clamp(2.2rem, 1.4rem + 2.4vw, 3.4rem); }
  .simple .sec-lede { margin-top: 10px; }
  .sx-wrap[data-sx-scroll] { height: auto; margin-top: 0; }
  .sx-wrap[data-sx-scroll] > * { position: relative; top: auto !important; }
  .sx-wrap[data-sx-scroll] .sx-rail { margin-top: clamp(18px, 3vh, 34px); margin-bottom: 26px; }
  .sx-vis { height: clamp(210px, 30vh, 270px); }
  .sx-step h3 { font-size: clamp(1.4rem, 1.1rem + .8vw, 1.8rem); }
  .sx-step p { font-size: .95rem; }
}
@media (min-width: 900px) and (max-height: 760px) { .simple .sec-lede { display: none; } .sx-step p { display: none; } }

/* five steps: pinned while they connect */
@media (min-width: 900px) {
  .how[data-fw-pin] { padding: 0; }
  .how .fw-pin { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-top: 76px; }
  .fw-t { transition: opacity .8s var(--ease-out), transform .9s var(--ease-out), box-shadow .8s; }
  .fw-line i { transition: transform .35s linear; }
}

/* the manager's dashboard */
.md6 { position: relative; max-width: 1140px; height: min(76vh, 680px); min-height: 540px; margin: 14px auto 0; display: flex; flex-direction: column; border-radius: 26px; overflow: hidden; color: var(--ink);
  background: linear-gradient(160deg, rgb(255 255 255 / .97), rgb(255 255 255 / .88)); -webkit-backdrop-filter: blur(50px) saturate(200%); backdrop-filter: blur(50px) saturate(200%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .9), inset 0 2px 0 rgb(255 255 255), 0 80px 160px -60px rgb(187 98 222 / .8), 0 40px 80px -40px rgb(26 26 26 / .9);
  --fg: var(--ink); --fg-2: rgb(26 26 26 / .72); --fg-3: rgb(26 26 26 / .62); }
.md6.live .p5-try { animation: none; opacity: .6; }
.md6-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 16px 22px; }
.md6-ttl { display: grid; } .md6-ttl b { font: 400 1.4rem/1.1 var(--font-display); } .md6-ttl small { font-size: .78rem; color: var(--fg-3); }
.md6-kpis { display: flex; gap: 10px; margin-left: auto; }
.md6-kpis span { display: grid; padding: 8px 14px; border-radius: 14px; background: rgb(247 245 238 / .9); box-shadow: inset 0 0 0 1px rgb(26 26 26 / .05); }
.md6-kpis b { font: 400 1.35rem/1.05 var(--font-display); } .md6-kpis small { font-size: .68rem; color: var(--fg-3); }
.md6-kpis span:last-child { background: var(--ink); color: var(--beige); } .md6-kpis span:last-child b { color: var(--purple); } .md6-kpis span:last-child small { color: rgb(247 245 238 / .7); }
.md6-tabs { display: flex; gap: 4px; padding: 0 22px; border-bottom: 1px solid rgb(26 26 26 / .08); }
.md6-tabs button { padding: 10px 12px; border: 0; background: none; font: inherit; font-size: .85rem; color: var(--fg-3); cursor: pointer; }
.md6-tabs button em { font-style: normal; margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: rgb(26 26 26 / .06); font-size: .7rem; }
.md6-tabs button.on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--purple); }
.md6-body { position: relative; flex: 1; min-height: 0; }
.md6-v { display: none; height: 100%; } .md6-v.on { display: grid; animation: view-in .4s var(--ease-out); }
.md6-v[data-md6-v="team"] { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
.md6-team { display: grid; align-content: start; gap: 6px; padding: 14px; overflow: auto; border-right: 1px solid rgb(26 26 26 / .07); background: rgb(247 245 238 / .5); }
.md6-m { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 9px 11px; border: 0; border-radius: 14px; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; transition: background-color .3s, box-shadow .3s; }
.md6-m:hover { background: rgb(26 26 26 / .04); }
.md6-m.on { background: var(--white); box-shadow: inset 0 0 0 1px rgb(187 98 222 / .45), 0 12px 26px -16px rgb(138 60 176 / .6); }
.md6-m .ini { width: 36px; height: 36px; font-size: .68rem; }
.md6-mt { display: grid; min-width: 0; } .md6-mt b { font-weight: 500; font-size: .86rem; } .md6-mt small { font-size: .7rem; color: var(--fg-3); }
.md6-m em { font-style: normal; padding: 3px 9px; border-radius: 999px; font-size: .64rem; font-weight: 600; white-space: nowrap; }
.st-w { background: rgb(187 98 222 / .14); color: var(--purple-deep); } .st-r { background: rgb(26 26 26 / .07); color: var(--fg-2); } .st-l { background: var(--ink); color: var(--beige); }
.md6-main { display: grid; grid-template-rows: auto 1fr; gap: 14px; padding: 18px 22px; min-height: 0; overflow: auto; }
.md6-perf { display: grid; gap: 7px; }
.md6-bar { display: grid; grid-template-columns: 64px 1fr 26px; align-items: center; gap: 10px; font-size: .78rem; cursor: pointer; padding: 2px 4px; border-radius: 8px; }
.md6-bar i { height: 9px; border-radius: 6px; background: linear-gradient(90deg, var(--purple-deep), var(--purple)) 0 0 / var(--w) 100% no-repeat, rgb(26 26 26 / .06); transition: background-size 1s var(--ease-out); }
.md6-bar.on { background: rgb(187 98 222 / .08); } .md6-bar.on span { font-weight: 600; }
.md6-bar b { text-align: right; font: 400 .95rem/1 var(--font-display); }
.md6-det { position: relative; min-height: 180px; }
.md6-d { position: absolute; inset: 0; display: grid; align-content: start; gap: 12px; padding: 16px; border-radius: 18px; background: rgb(247 245 238 / .9); box-shadow: inset 0 0 0 1px rgb(26 26 26 / .05); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .4s, transform .45s var(--ease-out), visibility 0s .4s; }
.md6-d.on { opacity: 1; visibility: visible; transform: none; transition: opacity .4s, transform .45s var(--ease-out), visibility 0s; }
.md6-dh { display: flex; align-items: center; gap: 10px; } .md6-dh .ini { width: 40px; height: 40px; font-size: .72rem; } .md6-dh > span:last-child { display: grid; } .md6-dh b { font: 400 1.15rem/1.1 var(--font-display); } .md6-dh small { font-size: .72rem; color: var(--fg-3); }
.md6-ds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .md6-ds span { display: grid; padding: 9px 11px; border-radius: 12px; background: var(--white); } .md6-ds b { font: 400 1.25rem/1 var(--font-display); color: var(--purple-deep); } .md6-ds small { font-size: .66rem; color: var(--fg-3); }
.md6-d ul { display: grid; gap: 6px; } .md6-d li { display: flex; align-items: center; gap: 8px; font-size: .82rem; } .md6-d .ck { color: var(--purple-deep); }
.md6-tk { padding: 16px 22px; overflow: auto; }
.md6-flt { display: flex; gap: 6px; margin-bottom: 12px; }
.md6-flt button { padding: 6px 12px; border: 0; border-radius: 999px; background: rgb(26 26 26 / .05); font: inherit; font-size: .76rem; color: var(--fg-2); cursor: pointer; }
.md6-flt button.on { background: var(--ink); color: var(--beige); }
.md6-tk table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.md6-tk th { text-align: left; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid rgb(26 26 26 / .08); }
.md6-tk td { padding: 11px 10px; border-bottom: 1px solid rgb(26 26 26 / .06); }
.md6-tk td:first-child { font-variant-numeric: tabular-nums; color: var(--fg-3); }
.md6-tk tr[hidden] { display: none; }
.md6-tk em { font-style: normal; padding: 3px 9px; border-radius: 999px; font-size: .68rem; font-weight: 600; }
.tk-resolved { background: rgb(187 98 222 / .14); color: var(--purple-deep); } .tk-in { background: rgb(26 26 26 / .07); color: var(--fg-2); } .tk-open { background: var(--ink); color: var(--beige); }
.md6-lv { padding: 18px 22px; overflow: auto; }
.md6-cal { display: grid; grid-template-columns: 90px repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.md6-cal .ch { font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); text-align: center; }
.md6-cal .cn { align-self: center; font-size: .82rem; }
.md6-cal .cc { height: 38px; display: grid; place-items: center; border-radius: 10px; background: rgb(247 245 238 / .9); font-size: .68rem; font-weight: 600; }
.md6-cal .cc.lv { background: var(--ink); color: var(--beige); }
.md6-cal .cc.today { box-shadow: inset 0 0 0 1.5px var(--purple); }
.md6-note { margin-top: 14px; font-size: .8rem; color: var(--fg-3); }
@media (max-width: 899px) {
  .md6 { height: auto; min-height: 0; }
  .md6-kpis { margin-left: 0; flex-wrap: wrap; }
  .md6-v[data-md6-v="team"] { grid-template-columns: 1fr; }
  .md6-team { display: flex; overflow-x: auto; border-right: 0; } .md6-m { flex: none; width: 230px; }
  .md6-det { min-height: 230px; }
  .md6-tk { overflow-x: auto; } .md6-tk table { min-width: 560px; }
}

/* lead forms */
.page-form main, .page-legal main { padding-top: 76px; }
.fp { padding-block: clamp(56px, 7vw, 110px); }
.fp-grid { display: grid; gap: clamp(32px, 5vw, 72px); align-items: start; }
.fp-k { font: 600 .72rem/1.4 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--purple-deep); margin-bottom: 14px; }
.fp-copy .sec-title { max-width: 14ch; }
.fp-list { display: grid; gap: 10px; margin-top: 28px; }
.fp-list li { display: grid; padding: 14px 18px; border-radius: 18px; background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge); }
.fp-list b { font: 400 1.3rem/1.15 var(--font-display); } .fp-list span { font-size: .875rem; color: var(--fg-2); }
.fp-form { position: relative; display: grid; gap: 14px; padding: clamp(22px, 3vw, 36px); border-radius: 28px; background: linear-gradient(165deg, rgb(255 255 255 / .92), rgb(255 255 255 / .74)); -webkit-backdrop-filter: blur(40px) saturate(200%); backdrop-filter: blur(40px) saturate(200%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .95), inset 0 2px 0 rgb(255 255 255), 0 50px 100px -50px rgb(138 60 176 / .6); }
.fp-row { display: grid; gap: 6px; }
.fp-row label { font-size: .82rem; font-weight: 500; } .fp-row label small { font-weight: 400; color: var(--fg-3); }
.fp-row input, .fp-row select, .fp-row textarea { width: 100%; padding: 12px 14px; border: 0; border-radius: 14px; background: rgb(247 245 238 / .9); box-shadow: inset 0 0 0 1px rgb(26 26 26 / .1); font: inherit; font-size: .95rem; color: var(--ink); transition: box-shadow .2s; }
.fp-row textarea { resize: vertical; }
.fp-row input:focus, .fp-row select:focus, .fp-row textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--purple), 0 0 0 5px rgb(187 98 222 / .15); }
.fp-form.tried :invalid { box-shadow: inset 0 0 0 2px var(--purple-deep); }
.fp-two { display: grid; gap: 14px; }
@media (min-width: 640px) { .fp-two { grid-template-columns: 1fr 1fr; } }
.fp-go { justify-self: start; margin-top: 6px; }
.fp-go.busy { opacity: .6; pointer-events: none; }
.fp-fine { font-size: .78rem; color: var(--fg-3); } .fp-fine a { color: var(--purple-deep); }
.fp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fp-done { display: grid; gap: 10px; justify-items: start; padding: 10px 0; } .fp-done b { font: 400 1.8rem/1.1 var(--font-display); } .fp-done p { color: var(--fg-2); }
.fp-err { padding: 12px 14px; border-radius: 14px; background: rgb(187 98 222 / .12); color: var(--ink); font-size: .85rem; }
@media (min-width: 960px) { .fp-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } .fp-copy { position: sticky; top: 120px; } }
/* legal pages */
.legal { padding-block: clamp(56px, 7vw, 110px); }
.lg-wrap { max-width: 760px; }
.lg-date { margin-top: 12px; font-size: .85rem; color: var(--fg-3); }
.lg-body { margin-top: 32px; padding: clamp(22px, 3vw, 40px); border-radius: 28px; background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), var(--glass-shadow); display: grid; gap: 14px; line-height: 1.65; }
.lg-body h2 { margin-top: 14px; font: 400 1.4rem/1.2 var(--font-display); }
.lg-body ul { display: grid; gap: 8px; padding-left: 20px; list-style: disc; }
.lg-body p, .lg-body li { color: var(--fg-2); }
.lg-body b { color: var(--fg); font-weight: 600; }
@media (min-width: 900px) {
  .how[data-fw-pin] { height: 260vh; }
  .how .fw-pin { position: sticky; top: 0; height: 100vh; min-height: 0; }
}
.fp-done[hidden], .fp-err[hidden], .fp-form [hidden] { display: none !important; }
.page-form .nav-bar, .page-legal .nav-bar { opacity: 1 !important; }
.hw { display: inline-block; }

/* ================= Revision 23 ================= */
/* explainer: a curved thread instead of a straight rail */
.sx-wrap { position: relative; }
.sx-thread { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; display: none; }
.th-base { fill: none; stroke: rgb(26 26 26 / .12); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; }
.th-fill { fill: none; stroke: var(--purple); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 6px rgb(187 98 222 / .7)); }
.sx-comet { position: absolute; left: 0; top: 0; z-index: 4; width: 0; height: 0; pointer-events: none; display: none; will-change: transform; }
.sx-comet .you-av { position: absolute; left: -17px; top: -17px; width: 34px !important; height: 34px !important; font-size: .55rem; box-shadow: 0 0 0 3px var(--white), 0 0 0 7px rgb(187 98 222 / .25), 0 10px 24px -6px rgb(138 60 176 / .8); }
@media (min-width: 900px) {
  .sx-thread, .sx-comet { display: block; }
  .sx-wrap[data-sx-scroll] { padding-top: 64px; }
  .sx-step .sx-n { z-index: 5; }
  .sx-step.on .sx-n, .sx-step.past .sx-n { background: var(--purple); color: var(--ink); }
}

/* five steps: the arc */
.arc { position: relative; margin-top: clamp(20px, 3vh, 36px); }
.arc-svg, .arc-comet, .arc-nodes { display: none; }
.arc-core { display: grid; gap: 14px; }
.arc-p { display: grid; gap: 8px; justify-items: start; padding: 22px; border-radius: 26px; background: var(--white); box-shadow: inset 0 0 0 1px rgb(26 26 26 / .06), 0 30px 70px -36px rgb(138 60 176 / .5); }
.arc-big { position: relative; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 20px; background: var(--ink); }
.arc-big svg { width: 36px; height: 36px; position: relative; z-index: 1; }
.arc-big .i-l { stroke: var(--beige); } .arc-big .i-f { fill: var(--beige); } .arc-big .i-c2 { fill: var(--purple); } .arc-big .i-a { stroke-dashoffset: 0; }
.arc-ring { position: absolute; inset: -8px; border-radius: 26px; border: 1.5px dashed rgb(187 98 222 / .6); animation: spin 14s linear infinite; }
.arc-k { font: 600 .7rem/1.4 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--purple-deep); }
.arc-p h3 { font: 400 clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem)/1.05 var(--font-display); letter-spacing: -.035em; }
.arc-p p { color: var(--fg-2); font-size: 1rem; line-height: 1.6; max-width: 40ch; }
.arc-b { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.arc-b li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; background: rgb(187 98 222 / .1); font-size: .8rem; }
.arc-b .ck { color: var(--purple-deep); }
@media (min-width: 900px) {
  .how .fw-pin { justify-content: flex-start; padding-top: calc(76px + 4vh); }
  .how .sec-lede { margin-top: 8px; }
  .arc { height: min(560px, calc(100vh - 76px - 4vh - 190px)); min-height: 420px; }
  .arc-svg { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
  .arc-base { fill: none; stroke: rgb(26 26 26 / .1); stroke-width: 2; stroke-dasharray: 2 8; stroke-linecap: round; }
  .arc-fill { fill: none; stroke: var(--purple); stroke-width: 3.5; stroke-linecap: round; filter: drop-shadow(0 0 8px rgb(187 98 222 / .8)); }
  .arc-comet { display: block; position: absolute; left: 0; top: 0; z-index: 3; width: 0; height: 0; pointer-events: none; will-change: transform; }
  .arc-comet::before { content: ""; position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 5px var(--purple), 0 0 30px 8px rgb(187 98 222 / .8); }
  .arc-comet::after { content: ""; position: absolute; left: -26px; top: -26px; width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid rgb(187 98 222 / .5); animation: ping 1.8s var(--ease-out) infinite; }
  @keyframes ping { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }
  .arc-nodes { display: block; position: absolute; inset: 0; pointer-events: none; }
  .arc-n { position: absolute; z-index: 2; width: 0; height: 0; pointer-events: auto; cursor: pointer; }
  .arc-ic { position: absolute; left: -30px; top: -30px; width: 60px; height: 60px; display: grid; place-items: center; border-radius: 20px; background: rgb(255 255 255 / .85); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .95), 0 14px 30px -14px rgb(138 60 176 / .6); transition: background-color .5s, transform .5s var(--ease-out), box-shadow .5s; }
  .arc-ic svg { width: 32px; height: 32px; }
  .arc-n.done .arc-ic { background: rgb(187 98 222 / .18); }
  .arc-n.on .arc-ic { background: var(--ink); transform: scale(1.18); box-shadow: 0 0 0 8px rgb(187 98 222 / .18), 0 20px 40px -14px rgb(138 60 176 / .9); }
  .arc-n.on .i-l { stroke: var(--beige); } .arc-n.on .i-f { fill: var(--beige); } .arc-n.on .i-c2 { fill: var(--purple); } .arc-n.on .i-a, .arc-n.done .i-a { stroke-dashoffset: 0; }
  .arc-lb { position: absolute; left: 50%; top: 40px; translate: -50% 0; display: grid; justify-items: center; white-space: nowrap; font: 500 .95rem/1.2 var(--font-display); color: var(--fg-2); transition: color .4s; }
  .arc-lb em { font: 600 .66rem/1.4 var(--font-body); font-style: normal; letter-spacing: .14em; color: var(--purple-deep); }
  .arc-n.on .arc-lb { color: var(--fg); }
  .arc-core { position: absolute; left: 50%; top: 56%; translate: -50% -50%; width: min(460px, 44%); display: block; }
  .arc-p { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; justify-items: center; text-align: center; padding: 26px 28px; background: linear-gradient(165deg, rgb(255 255 255 / .9), rgb(255 255 255 / .7)); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .95), 0 40px 90px -40px rgb(138 60 176 / .6); opacity: 0; transform: translateY(18px) scale(.96); filter: blur(4px); transition: opacity .5s var(--ease-out), transform .6s var(--ease-out), filter .5s; pointer-events: none; }
  .arc-p.on { opacity: 1; transform: none; filter: none; pointer-events: auto; }
  .arc-b { justify-content: center; }
  .arc-p p { margin-inline: auto; }
}
@media (min-width: 900px) and (max-height: 820px) { .arc-b { display: none; } .arc-p { padding: 20px 22px; } }

/* three-body: one stage with a toggle */
.tb3 { position: relative; margin-top: clamp(28px, 4vw, 48px); aspect-ratio: 16 / 9; max-height: 640px; width: 100%; border-radius: 32px; overflow: hidden;
  background: radial-gradient(70% 70% at 50% 45%, rgb(255 255 255 / .55), rgb(255 255 255 / .2)), var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), var(--glass-shadow); transition: box-shadow .8s; }
.tb3.is-order { box-shadow: var(--glass-edge), inset 0 0 0 1px rgb(187 98 222 / .35), 0 60px 120px -50px rgb(138 60 176 / .75); }
.tb3 .tb-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.tb3-toggle { position: absolute; z-index: 2; left: 50%; top: 18px; translate: -50% 0; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 5px; border-radius: 999px; background: rgb(255 255 255 / .82); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .95), 0 14px 30px -16px rgb(26 26 26 / .35); }
.tb3-toggle button { position: relative; z-index: 1; min-height: 40px; padding: 0 20px; border: 0; border-radius: 999px; background: none; font: 600 .86rem/1 var(--font-body); color: var(--fg-2); cursor: pointer; transition: color .5s; white-space: nowrap; }
.tb3-toggle button[aria-pressed="true"] { color: var(--beige); }
.tb3-thumb { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 999px; background: var(--ink); transition: transform .6s var(--ease-out), background-color .6s; }
.tb3.is-order .tb3-thumb { transform: translateX(100%); background: var(--purple); }
.tb3.is-order .tb3-toggle button[aria-pressed="true"] { color: var(--ink); }
.tb3-cap { position: absolute; z-index: 2; left: 0; right: 0; bottom: 18px; text-align: center; }
.tb3-cap span { display: inline-block; padding: 8px 16px; border-radius: 999px; font: 400 1.05rem/1.2 var(--font-display); background: rgb(255 255 255 / .85); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .95); animation: view-in .5s var(--ease-out); }
.tb3 .c-order, .tb3.is-order .c-chaos { display: none; } .tb3.is-order .c-order { display: inline-block; }
.tb2-list .tb-p, .tb2-list .tb-s { transition: opacity .5s; }
.tb2-list .tb-s { opacity: .35; }
.tb2-list.is-order .tb-s { opacity: 1; } .tb2-list.is-order .tb-p { opacity: .5; }
@media (max-width: 760px) { .tb3 { aspect-ratio: .8; } .tb3-toggle button { padding: 0 13px; font-size: .78rem; } }

/* Proof of Work: invite the touch */
.try-pill { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 9px 16px; border-radius: 999px; background: rgb(187 98 222 / .16); box-shadow: inset 0 0 0 1px rgb(187 98 222 / .5); color: var(--beige); font-size: .88rem; font-weight: 500; }
.try-pill i { width: 9px; height: 9px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 0 0 rgb(187 98 222 / .7); animation: pulse-ring 1.8s infinite; }
@keyframes pulse-ring { 70% { box-shadow: 0 0 0 10px rgb(187 98 222 / 0); } 100% { box-shadow: 0 0 0 0 rgb(187 98 222 / 0); } }
.coach { position: absolute; left: 0; top: 0; z-index: 30; width: 0; height: 0; pointer-events: none; opacity: 0; transition: opacity .35s, transform .7s var(--ease-out); }
.coach.on { opacity: 1; }
.coach-ping { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--purple); animation: ping 1.5s var(--ease-out) infinite; }
.coach-hand { position: absolute; left: -4px; top: 2px; width: 30px; height: 30px; animation: tap-hand 1.5s var(--ease-in-out) infinite; filter: drop-shadow(0 6px 10px rgb(26 26 26 / .35)); }
.coach-hand svg { width: 100%; height: 100%; fill: var(--white); stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
@keyframes tap-hand { 0%, 100% { transform: translate(4px, 6px); } 50% { transform: translate(0, 0) scale(.92); } }
.coach-tip { position: absolute; left: 30px; top: 30px; display: grid; gap: 3px; width: 230px; padding: 12px 14px; border-radius: 16px; background: var(--ink); color: var(--beige); box-shadow: 0 24px 50px -18px rgb(26 26 26 / .8), 0 0 0 1px rgb(187 98 222 / .5); pointer-events: auto; }
.coach.flip .coach-tip { left: auto; right: 22px; }
.coach.up .coach-tip { top: auto; bottom: 26px; }
.coach-tip b { font: 400 1.02rem/1.2 var(--font-display); color: var(--white); }
.coach-tip > span { font-size: .78rem; color: rgb(247 245 238 / .75); line-height: 1.4; }
.coach-foot { display: flex !important; justify-content: space-between; align-items: center; margin-top: 6px; }
.coach-foot em { font-style: normal; font-size: .68rem; color: var(--purple); font-weight: 600; }
.coach-skip { padding: 3px 9px; border: 0; border-radius: 999px; background: rgb(247 245 238 / .1); color: var(--beige); font: inherit; font-size: .7rem; cursor: pointer; }

/* your path: roads, not bars */
.ln-road, .ln-tok { display: none; }
@media (min-width: 900px) {
  .ln-track { position: relative; }
  .ln-road { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
  .rd-base { fill: none; stroke: rgb(26 26 26 / .14); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; }
  .rd-fill { fill: none; stroke-width: 3.5; stroke-linecap: round; }
  .ln-you .rd-fill { stroke: var(--purple); filter: drop-shadow(0 0 6px rgb(187 98 222 / .8)); }
  .ln-them .rd-fill { stroke: rgb(26 26 26 / .45); }
  .ln-tok { display: block; position: absolute; left: 0; top: 0; z-index: 4; width: 0; height: 0; pointer-events: none; will-change: transform; }
  .ln-tok > * { position: absolute; left: -19px; top: -19px; width: 38px !important; height: 38px !important; font-size: .6rem !important; box-shadow: 0 0 0 3px var(--white), 0 12px 24px -8px rgb(26 26 26 / .5); }
  .ln-you .ln-tok > * { box-shadow: 0 0 0 3px var(--white), 0 0 0 8px rgb(187 98 222 / .25), 0 12px 24px -8px rgb(138 60 176 / .8); }
  .ln-tok.wait::after { content: "waiting\2026"; position: absolute; left: 50%; top: 24px; translate: -50% 0; padding: 3px 9px; border-radius: 999px; background: var(--ink); color: var(--beige); font-size: .66rem; font-weight: 600; white-space: nowrap; animation: blink 1.2s infinite; }
  .ln-dot { position: relative; z-index: 1; width: 14px !important; height: 14px !important; transition: background-color .4s, box-shadow .4s, transform .4s var(--ease-out); }
  .ln-cell { opacity: .45; transform: none; transition: opacity .5s, background-color .5s, box-shadow .5s, color .5s; padding-top: 30px; }
  .ln-cell .ln-dot { position: absolute; left: 14px; top: 12px; }
  .ln-cell.on { opacity: 1; }
  .ln-you .ln-cell.on .ln-dot { transform: scale(1.2); }
  .ln-you .ln-cell.now { background: var(--ink); color: var(--beige); }
  .ln-them .ln-cell.now { background: var(--white); box-shadow: inset 0 0 0 1px rgb(26 26 26 / .12); }
}

/* the people: settle in one by one, crossfade the photo */
.pw-n { opacity: 0; transform: scale(.6); transition: opacity .6s var(--ease-out), transform .7s var(--ease-out), box-shadow .5s, filter .5s; transition-delay: calc(var(--i, 0) * 45ms); }
.pw-wall.in .pw-n { opacity: 1; transform: none; }
.pw-wall.in .pw-n.on { transform: scale(1.18); transition-delay: 0s; }
.pw-wall.in .pw-n:hover { transform: scale(1.12); transition-delay: 0s; }
.pw-n { animation-duration: 9s; }
.pw-feat { opacity: 0; transform: translateY(16px) scale(.97); transition: opacity .7s var(--ease-out) .3s, transform .8s var(--ease-out) .3s; }
.pw-wall.in .pw-feat { opacity: 1; transform: none; }
.pf-img img { position: absolute; inset: 0; opacity: 0; transition: opacity .5s var(--ease-out), transform 1.2s var(--ease-out); transform: scale(1.08); }
.pf-img img.top { opacity: 1; transform: scale(1.02); }
.pw-feat.in .pf-img img { animation: none; }
.pw-lines line.to-feat { stroke-dasharray: 5 6; }
@media (min-width: 900px) {
  .sx-wrap[data-sx-scroll] > .sx-thread { position: absolute !important; inset: 0; width: 100%; height: 100%; }
  .sx-wrap[data-sx-scroll] > .sx-comet { position: absolute !important; left: 0; top: 0 !important; }
  .arc-core { top: 63%; width: min(440px, 40%); }
  .arc-p { padding: 22px 26px; }
  .arc-big { width: 54px; height: 54px; border-radius: 17px; } .arc-big svg { width: 30px; height: 30px; }
  .arc-p h3 { font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.2rem); }
}
@media (min-width: 900px) {
  .ln-cell { padding-top: 40px; }
  .ln-cell .ln-dot { top: 14px; }
  .lane { padding-top: 26px; }
}
@media (min-width: 900px) { .arc-p .arc-big { display: none; } .arc-core { top: 64%; width: min(480px, 42%); } }

/* ================= Revision 24: the classy pass ================= */
/* glowing paths: light flows along what has been drawn, sparks trail the head */
.gp-flow { fill: none; stroke: var(--white); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1 22; animation: gp-flow 1.4s linear infinite; opacity: .9; }
@keyframes gp-flow { to { stroke-dashoffset: -23; } }
.gp-tail circle { fill: var(--purple); filter: drop-shadow(0 0 4px rgb(187 98 222 / .9)); }
.ln-them .gp-tail circle { fill: rgb(26 26 26 / .5); filter: none; }
.ln-them .gp-flow { opacity: .5; }
.th-fill, .arc-fill, .rd-fill { stroke-width: 4; }
.th-base, .arc-base, .rd-base { stroke: rgb(138 60 176 / .22); }
.sx-comet .you-av { animation: comet-pulse 2.2s var(--ease-in-out) infinite; }
@keyframes comet-pulse { 50% { box-shadow: 0 0 0 3px var(--white), 0 0 0 12px rgb(187 98 222 / .12), 0 0 30px 6px rgb(187 98 222 / .55); } }
.sx-step { transition: transform .8s var(--ease-out), box-shadow .8s var(--ease-out), opacity .8s var(--ease-out), filter .8s; }
@media (min-width: 900px) {
  .sx-step:not(.on) { filter: saturate(.75); }
  .sx-step.on { transform: translateY(-10px); box-shadow: inset 0 0 0 1px rgb(187 98 222 / .35), 0 50px 90px -40px rgb(138 60 176 / .65), 0 2px 8px rgb(26 26 26 / .04); }
  .sx-step.on .sx-n { animation: badge-pop .6s var(--ease-out); }
}
@keyframes badge-pop { 40% { transform: scale(1.35); } }

/* the arc: a halo follows the comet, a dial of ticks, ripples on arrival, chips that settle in */
.arc-halo { position: absolute; left: 0; top: 0; z-index: 0; width: 0; height: 0; pointer-events: none; display: none; }
.arc-halo::before { content: ""; position: absolute; left: -170px; top: -170px; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(closest-side, rgb(187 98 222 / .32), transparent); filter: blur(8px); }
.arc-tick { fill: rgb(138 60 176 / .35); }
@media (min-width: 900px) {
  .arc-halo { display: block; transition: transform .25s linear; }
  .arc-ic::after { content: ""; position: absolute; inset: -6px; border-radius: 24px; border: 2px solid var(--purple); opacity: 0; }
  .arc-n.on .arc-ic::after { animation: ripple 1.6s var(--ease-out) infinite; }
  @keyframes ripple { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
  .arc-n.done .arc-ic { background: linear-gradient(140deg, rgb(187 98 222 / .3), rgb(255 255 255 / .8)); }
  .arc-p { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .95), inset 0 2px 0 rgb(255 255 255), 0 50px 100px -40px rgb(138 60 176 / .7), 0 0 0 1px rgb(187 98 222 / .12); }
  .arc-p .arc-k, .arc-p h3, .arc-p p, .arc-p .arc-b li { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease-out), transform .6s var(--ease-out); }
  .arc-p.on .arc-k, .arc-p.on h3, .arc-p.on p, .arc-p.on .arc-b li { opacity: 1; transform: none; }
  .arc-p.on h3 { transition-delay: .06s; } .arc-p.on p { transition-delay: .12s; }
  .arc-p.on .arc-b li:nth-child(1) { transition-delay: .2s; } .arc-p.on .arc-b li:nth-child(2) { transition-delay: .27s; } .arc-p.on .arc-b li:nth-child(3) { transition-delay: .34s; }
  .arc-p h3 { background: linear-gradient(120deg, var(--ink) 40%, var(--purple-deep)); -webkit-background-clip: text; background-clip: text; color: transparent; }
}

/* three-body: a night sky */
.tb3 { aspect-ratio: 16 / 8.6; max-height: 680px; background:
  radial-gradient(45% 55% at 50% 52%, rgb(138 60 176 / .38), transparent 70%),
  radial-gradient(30% 40% at 18% 20%, rgb(187 98 222 / .16), transparent 70%),
  radial-gradient(35% 40% at 85% 85%, rgb(138 60 176 / .22), transparent 70%),
  var(--ink);
  box-shadow: inset 0 0 0 1px rgb(247 245 238 / .1), inset 0 1.5px 0 rgb(247 245 238 / .14), 0 60px 120px -50px rgb(138 60 176 / .75), 0 30px 60px -40px rgb(26 26 26 / .6); }
.tb3.is-order { box-shadow: inset 0 0 0 1px rgb(187 98 222 / .3), inset 0 1.5px 0 rgb(247 245 238 / .14), 0 70px 140px -50px rgb(187 98 222 / .85), 0 30px 60px -40px rgb(26 26 26 / .6); }
.tb3-toggle { background: rgb(247 245 238 / .08); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); box-shadow: inset 0 0 0 1px rgb(247 245 238 / .16), 0 14px 30px -16px rgb(26 26 26 / .6); }
.tb3-toggle button { color: rgb(247 245 238 / .75); }
.tb3-toggle button[aria-pressed="true"] { color: var(--ink); }
.tb3-thumb { background: var(--beige); }
.tb3-cap span { background: rgb(247 245 238 / .08); color: var(--beige); box-shadow: inset 0 0 0 1px rgb(247 245 238 / .14); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
@media (max-width: 760px) { .tb3 { aspect-ratio: .78; } }

/* your path: a check pops into each milestone you pass */
@media (min-width: 900px) {
  .ln-you .ln-cell.on .ln-dot { background: var(--purple); box-shadow: 0 0 0 5px rgb(187 98 222 / .2), 0 0 14px rgb(187 98 222 / .8); }
  .ln-you .ln-cell.on .ln-dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--white); animation: badge-pop .5s var(--ease-out); }
  .ln-cell.now { transform: translateY(-4px); }
  .lanes.done .ln-you .ln-end { animation: end-glow 2s var(--ease-in-out) infinite; }
  @keyframes end-glow { 50% { box-shadow: 0 0 0 12px rgb(187 98 222 / .12), 0 20px 40px -12px rgb(187 98 222 / 1); } }
}

/* the people: parallax, and a spark on the link */
.pw-n { translate: calc(-50% + var(--px, 0px)) calc(-50% + var(--py, 0px)); }
@keyframes float { 50% { translate: calc(-50% + var(--px, 0px)) calc(-50% + var(--py, 0px) - 6px); } }
.pw-spark { fill: var(--white); filter: drop-shadow(0 0 6px rgb(187 98 222 / 1)); }
.pw-lines line.to-feat { stroke: var(--purple); stroke-width: 1.8; }
.pw-n.on::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; box-shadow: 0 0 0 2px var(--purple); animation: ripple-c 1.8s var(--ease-out) infinite; }
@keyframes ripple-c { from { transform: scale(1); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }
.pw-n { overflow: visible; } .pw-n img { border-radius: 50%; }


/* ================= Revision 25: cards, not paths ================= */
/* In three steps: three separate cards. No thread, no marker. The active card turns ink and comes forward */
.simple .sx-thread, .simple .sx-comet { display: none !important; }
.simple .sx-step { transform-origin: 50% 55%; transition: transform .9s var(--ease-out), background-color .6s var(--ease-out), box-shadow .8s var(--ease-out), opacity .6s var(--ease-out), filter .6s var(--ease-out); }
.simple .sx-step > h3, .simple .sx-step > p { transition: color .5s var(--ease-out); }
.simple .sx-step.on { z-index: 2; background: var(--ink); box-shadow: 0 44px 80px -40px rgb(26 26 26 / .6), 0 2px 8px rgb(26 26 26 / .08); }
.simple .sx-step.on > h3 { color: var(--beige); }
.simple .sx-step.on > p { color: rgb(247 245 238 / .72); }
.simple .sx-step.on .sx-vis { box-shadow: none; }
.simple .sx-step .sx-n, .simple .sx-step.past .sx-n { background: var(--white); color: var(--fg-2); box-shadow: inset 0 0 0 1px var(--rule-2); }
.simple .sx-step.on .sx-n { background: var(--beige); color: var(--ink); box-shadow: none; animation: none; }
.simple .sx-step:not(.on) { transform: scale(.97); opacity: .82; }
.simple .sx-step.on { transform: scale(1.02); opacity: 1; }
@media (min-width: 900px) {
  .simple .sx-wrap[data-sx-scroll] { padding-top: 28px; }
  .simple .sx-step:not(.on) { transform: scale(.95); opacity: .7; filter: saturate(.7); }
  .simple .sx-step.on { transform: scale(1.05); filter: none; }
}

/* Your path: no road, no travelling token, no week header. The cards carry the story */
#path .ln-road, #path .ln-tok, #path .ln-dot, #path .ln-fill { display: none !important; }
#path .lanes.only-company .ln-head { display: none !important; }
#path .ln-cell { padding: 14px 16px; transform-origin: 50% 50%; transition: transform .7s var(--ease-out), opacity .5s var(--ease-out), background-color .5s var(--ease-out), color .5s var(--ease-out), box-shadow .6s var(--ease-out); }
#path .ln-cell.now { z-index: 3; transform: scale(1.03); }
#path .ln-you .ln-cell.now { background: var(--ink); color: var(--beige); box-shadow: 0 24px 44px -22px rgb(26 26 26 / .6); }
@media (min-width: 900px) {
  #path .lane { padding-top: 18px; }
  #path .ln-cell { justify-content: center; padding: 16px 18px; }
  #path .ln-cell.now { transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .simple .sx-step, .simple .sx-step.on, .simple .sx-step:not(.on), #path .ln-cell, #path .ln-cell.now { transform: none !important; transition: none !important; }
}

/* Footer: the logo, one line about AntBox, one call to action */
.foot-min .foot-top { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.foot-min .logo { pointer-events: none; }

/* ================= Revision 26: go-live ================= */
/* Questions, answered: two quiet columns of glass accordions */
.faq { padding-block: clamp(80px, 9vw, 130px) clamp(40px, 5vw, 70px); }
.faq-grid { display: grid; gap: 28px; margin-top: clamp(32px, 4vw, 56px); }
.faq-h { margin-bottom: 12px; font: 600 .74rem/1.4 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--purple-deep); }
.faq-col { display: grid; align-content: start; gap: 10px; }
.faq-i { border-radius: 20px; background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge); transition: box-shadow .4s, background-color .4s; }
.faq-i[open] { box-shadow: var(--glass-edge), inset 0 0 0 1px rgb(187 98 222 / .35), 0 30px 60px -36px rgb(138 60 176 / .55); }
.faq-i summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; cursor: pointer; list-style: none; font: 400 1.15rem/1.3 var(--font-display); letter-spacing: -.01em; }
.faq-i summary::-webkit-details-marker { display: none; }
.faq-i summary i { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; background: rgb(255 255 255 / .8); box-shadow: inset 0 0 0 1px rgb(26 26 26 / .1); transition: background-color .4s, transform .5s var(--ease-out); }
.faq-i summary i::before, .faq-i summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.6px; margin: -.8px 0 0 -5.5px; border-radius: 2px; background: var(--ink); transition: transform .4s var(--ease-out), background-color .4s; }
.faq-i summary i::after { transform: rotate(90deg); }
.faq-i[open] summary i { background: var(--ink); transform: rotate(180deg); }
.faq-i[open] summary i::before, .faq-i[open] summary i::after { background: var(--beige); }
.faq-i[open] summary i::after { transform: rotate(0deg); }
.faq-i summary:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; border-radius: 20px; }
.faq-i p { padding: 0 20px 20px; color: var(--fg-2); font-size: .98rem; line-height: 1.65; max-width: 60ch; animation: view-in .4s var(--ease-out); }
@media (min-width: 900px) { .faq-grid { grid-template-columns: 1fr 1fr; gap: 28px 40px; } }
.faq + .footer, .faq ~ .footer { padding-top: 20px; }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rule); font-size: .8rem; color: var(--fg-3); }
.foot-legal { display: inline-flex; gap: 18px; } .foot-legal a { color: var(--fg-2); text-decoration: none; } .foot-legal a:hover { color: var(--purple-deep); }
.faq { padding-bottom: clamp(24px, 3vw, 40px); }
.faq ~ .footer { padding-top: 0; }
@media (min-width: 900px) { :root[data-aud="company"] .faq-col:first-child { order: 2; } }
@media (max-width: 899px) { :root[data-aud="company"] .faq-grid > .faq-col:first-child { order: 2; } .faq-grid { display: flex; flex-direction: column; } }
.faq-i:hover { box-shadow: var(--glass-edge), inset 0 0 0 1px rgb(187 98 222 / .25); }


/* ================= Revision 27: focus pass on the original network ================= */
/* three-body: the heading and its words on one side, the sky on the other */
.tb-split { display: grid; gap: clamp(28px, 4vw, 44px); align-items: center; }
.tb-copy .sec-title { text-align: left; margin-inline: 0; }
.tb-copy .sec-lede { text-align: left; margin-inline: 0; max-width: 40ch; }
.tb-split .tb3 { margin-top: 0; aspect-ratio: 1 / .9; max-height: none; }
.tb-split .tb2-list { grid-template-columns: 1fr !important; gap: 10px; margin-top: clamp(20px, 3vw, 30px); }
.tb-split .tb2-list li { grid-template-columns: 14px 96px 1fr; }
.tb-split .tb2-list li .tb-p, .tb-split .tb2-list li .tb-s { grid-column: 3; }
.tb-split .tb2-list li .tb-s { grid-row: 1; }
.tb-split .tb2-list li .tb-p { grid-row: 1; }
.tb-split .tb2-list.is-order li .tb-p { display: none; }
.tb-split .tb2-list:not(.is-order) li .tb-s { display: none; }
@media (min-width: 960px) { .tb-split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 5vw, 80px); } }
@media (max-width: 760px) { .tb-split .tb3 { aspect-ratio: .92; } .tb-split .tb2-list li { grid-template-columns: 14px 84px 1fr; padding: 13px 16px; } }

/* your path: two lives side by side, playing on a loop. Tap any stage to stop and compare */
#path .path-pin { height: auto; min-height: 100vh; }
.duel { display: grid; gap: 16px; margin-top: clamp(26px, 4vw, 44px); }
.dl-sides { display: grid; gap: 16px; }
.dl-side { position: relative; display: grid; gap: 14px; align-content: start; padding: 14px 14px 18px; border-radius: 28px; background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), var(--glass-shadow); }
.dl-you { background: var(--ink); color: var(--beige); box-shadow: 0 44px 80px -40px rgb(26 26 26 / .6), 0 2px 8px rgb(26 26 26 / .08); -webkit-backdrop-filter: none; backdrop-filter: none; }
.dl-who { display: flex; align-items: center; gap: 12px; padding: 4px 6px 0; }
.dl-who > span:nth-child(2) { display: grid; line-height: 1.3; }
.dl-who b { font-weight: 600; }
.dl-who small { font-size: .78rem; color: var(--fg-3); }
.dl-you .dl-who small { color: rgb(247 245 238 / .62); }
.dl-you .dl-who b, .dl-you .dl-meter b, .dl-you .dl-cap { color: var(--beige); }
.dl-who .you-av, .dl-who .ini { flex: none; width: 40px; height: 40px; font-size: .72rem; }
.dl-who .you-av img { width: 22px; height: 22px; filter: brightness(0) invert(1); }
.dl-end { margin-left: auto; padding: 8px 13px; border-radius: 999px; font: 600 .8rem/1 var(--font-body); font-style: normal; white-space: nowrap; opacity: 0; transform: scale(.85); transition: opacity .5s var(--ease-out), transform .6s var(--ease-out); }
.dl-them .dl-end { background: rgb(26 26 26 / .08); color: var(--fg-2); }
.dl-you .dl-end { background: var(--purple); color: var(--ink); }
.duel.at-end .dl-end { opacity: 1; transform: none; }
.dl-screen { position: relative; height: 230px; border-radius: 20px; overflow: hidden; color: var(--ink); background: radial-gradient(80% 70% at 70% 0%, rgb(187 98 222 / .14), transparent 70%), linear-gradient(rgb(26 26 26 / .03) 1px, transparent 1px) 0 0 / 20px 20px, linear-gradient(90deg, rgb(26 26 26 / .03) 1px, transparent 1px) 0 0 / 20px 20px, rgb(247 245 238); box-shadow: inset 0 0 0 1px rgb(26 26 26 / .05); }
.dl-scene { position: absolute; inset: 0; display: grid; place-items: center; padding: 18px; opacity: 0; transform: translateY(12px) scale(.98); transition: opacity .55s var(--ease-out), transform .75s var(--ease-out); }
.dl-scene.on { opacity: 1; transform: none; }
.dl-cap { position: relative; min-height: 2.5em; margin: 0 6px; font: 400 clamp(1.15rem, 1rem + .5vw, 1.45rem)/1.22 var(--font-display); letter-spacing: -.02em; }
.dl-cap span { position: absolute; inset: 0; opacity: 0; transform: translateY(8px); transition: opacity .45s var(--ease-out), transform .55s var(--ease-out); }
.dl-cap span.on { opacity: 1; transform: none; }
.dl-meter { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: center; margin: 0 6px; font-size: .82rem; }
.dl-meter small { font: 600 .66rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.dl-you .dl-meter small { color: rgb(247 245 238 / .6); }
.dl-meter b { justify-self: end; font-weight: 600; }
.dl-track { grid-column: 1 / -1; height: 6px; border-radius: 6px; overflow: hidden; background: rgb(26 26 26 / .08); }
.dl-you .dl-track { background: rgb(247 245 238 / .14); }
.dl-track i { display: block; height: 100%; width: var(--w, 0%); border-radius: inherit; background: rgb(26 26 26 / .32); transition: width 1.2s var(--ease-out); }
.dl-you .dl-track i { background: var(--purple); }
.dl-bar { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; padding: 10px 18px 10px 10px; border-radius: 999px; background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), var(--glass-shadow); }
.dl-play { flex: none; width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--ink); color: var(--beige); cursor: pointer; transition: transform .3s var(--ease-out); }
.dl-play:hover { transform: scale(1.06); }
.dl-play svg { width: 14px; height: 14px; fill: currentColor; }
.dl-play .i-play, .duel.is-paused .dl-play .i-pause { display: none; }
.duel.is-paused .dl-play .i-play { display: block; }
.dl-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.dl-steps button { width: 100%; display: grid; gap: 8px; padding: 6px 2px; border: 0; background: none; cursor: pointer; text-align: left; font: 600 .7rem/1.25 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); transition: color .4s; }
.dl-steps button:hover, .dl-steps button.on { color: var(--fg); }
.dl-steps button i { display: block; height: 4px; border-radius: 4px; overflow: hidden; background: rgb(26 26 26 / .1); }
.dl-steps button i::after { content: ""; display: block; height: 100%; width: calc(var(--f, 0) * 100%); border-radius: inherit; background: var(--ink); }
.dl-steps button:focus-visible, .dl-play:focus-visible { outline: 2px solid var(--purple-deep); outline-offset: 3px; border-radius: 8px; }
@media (min-width: 900px) { .dl-sides { grid-template-columns: 1fr 1fr; gap: 22px; } .dl-screen { height: 250px; } }
@media (max-width: 600px) { .dl-screen { height: 210px; } .dl-bar { border-radius: 22px; padding: 10px 12px 10px 10px; gap: 10px; } .dl-steps { gap: 4px; } .dl-steps button { font-size: .56rem; letter-spacing: .04em; } }

/* the little screens inside each life */
.dv { width: min(100%, 320px); display: grid; gap: 10px; justify-items: center; text-align: center; font-size: .82rem; color: var(--ink); }
.dv small { font: 600 .66rem/1.3 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: rgb(26 26 26 / .55); }
.dv b { font-weight: 600; }
.dv-paper { position: relative; width: 100%; display: grid; gap: 8px; justify-items: start; text-align: left; padding: 14px 16px; border-radius: 14px; background: var(--white); box-shadow: inset 0 0 0 1px rgb(26 26 26 / .07), 0 16px 30px -20px rgb(26 26 26 / .4); }
.dv-paper > b { font-size: .92rem; }
.dv-paper > i { display: block; width: 100%; height: 6px; border-radius: 4px; background: rgb(26 26 26 / .09); transform-origin: 0 50%; }
.dv-paper > i:nth-of-type(2) { width: 84%; } .dv-paper > i:nth-of-type(3) { width: 92%; } .dv-paper > i:nth-of-type(4) { width: 66%; } .dv-paper > i:nth-of-type(5) { width: 76%; }
.dl-scene.on .dv-paper > i { animation: dv-grow .7s var(--ease-out) both; }
.dl-scene.on .dv-paper > i:nth-of-type(2) { animation-delay: .25s; } .dl-scene.on .dv-paper > i:nth-of-type(3) { animation-delay: .5s; } .dl-scene.on .dv-paper > i:nth-of-type(4) { animation-delay: .75s; } .dl-scene.on .dv-paper > i:nth-of-type(5) { animation-delay: 1s; }
@keyframes dv-grow { from { transform: scaleX(0); } }
@keyframes dv-pop { from { opacity: 0; transform: scale(.6); } }
@keyframes dv-up { from { opacity: 0; transform: translateY(10px); } }
@keyframes dv-stamp { 0% { opacity: 0; transform: scale(1.8) rotate(-12deg); } 70% { opacity: 1; transform: scale(.94) rotate(-8deg); } 100% { opacity: 1; transform: rotate(-8deg); } }
@keyframes dv-blink { 50% { opacity: .25; } }
.dv-grade { position: absolute; right: 16px; top: 12px; font: 400 1.7rem/1 var(--font-display); color: rgb(26 26 26 / .7); }
.dl-scene.on .dv-grade { animation: dv-pop .5s 1.3s var(--ease-out) both; }
.dv-cv .dv-paper { padding-left: 64px; }
.dv-av { position: absolute; left: 16px; top: 16px; width: 34px; height: 34px; border-radius: 50%; background: rgb(26 26 26 / .1); }
.dv-dots { display: inline-flex; gap: 5px; }
.dv-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgb(26 26 26 / .4); animation: dv-blink 1.2s infinite; }
.dv-dots i:nth-child(2) { animation-delay: .2s; } .dv-dots i:nth-child(3) { animation-delay: .4s; }
.dv-clock { position: relative; width: 64px; height: 64px; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 3px var(--ink), 0 16px 30px -20px rgb(26 26 26 / .4); }
.dv-clock i { position: absolute; left: calc(50% - 1.5px); bottom: 50%; width: 3px; height: 22px; border-radius: 3px; background: var(--ink); transform-origin: 50% 100%; }
.dv-clock i + i { height: 15px; background: rgb(26 26 26 / .55); }
.dl-scene.on .dv-clock i { animation: dv-spin 1.6s linear infinite; }
.dl-scene.on .dv-clock i + i { animation-duration: 9s; }
@keyframes dv-spin { to { transform: rotate(360deg); } }
.dv-rounds { gap: 9px; }
.dv-rounds > span { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; border-radius: 12px; background: var(--white); box-shadow: inset 0 0 0 1px rgb(26 26 26 / .07); font-weight: 500; }
.dv-rounds em { font-style: normal; font-size: .72rem; font-weight: 600; color: rgb(26 26 26 / .55); }
.dv-rounds .hold em { animation: dv-blink 1.4s infinite; }
.dl-scene.on .dv-rounds > span { animation: dv-up .5s var(--ease-out) both; }
.dl-scene.on .dv-rounds > span:nth-child(2) { animation-delay: .6s; } .dl-scene.on .dv-rounds > span:nth-child(3) { animation-delay: 1.2s; }
.dv-ramp, .dv-acad .dv-paper { justify-items: stretch; }
.dv-bar { display: block; width: 100%; height: 8px; border-radius: 8px; overflow: hidden; background: rgb(26 26 26 / .08); }
.dv-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: rgb(26 26 26 / .4); }
.dl-scene.on .dv-ramp .dv-bar i { animation: dv-ramp 2.6s .3s var(--ease-out) forwards; }
@keyframes dv-ramp { to { width: 16%; } }
.dv-ramp b { font: 400 1.2rem/1.2 var(--font-display); }
.dv-acad .dv-bar i { background: var(--purple); }
.dl-scene.on .dv-acad .dv-bar i { animation: dv-learn 2s .3s var(--ease-out) forwards; }
@keyframes dv-learn { to { width: 74%; } }
.dv-acad small em { font-style: normal; color: var(--purple-deep); }
.dv-sprint { position: relative; }
.dv-stamp { position: absolute; right: -6px; top: -10px; padding: 6px 12px; border-radius: 8px; border: 2px solid var(--purple-deep); background: rgb(255 255 255 / .9); color: var(--purple-deep); font: 700 .74rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; transform: rotate(-8deg); }
.dl-scene.on .dv-stamp { animation: dv-stamp .55s 1.1s var(--ease-out) both; }
.dv-ship { grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.dv-col { display: grid; gap: 8px; padding: 10px; border-radius: 14px; background: rgb(26 26 26 / .04); text-align: left; }
.dv-card { display: block; min-height: 46px; padding: 10px 11px; border-radius: 10px; background: var(--white); box-shadow: inset 0 0 0 1px rgb(26 26 26 / .07); font-size: .76rem; font-weight: 500; text-align: left; }
.dv-slot { background: none; box-shadow: inset 0 0 0 1.5px rgb(187 98 222 / .45); border: 0; }
.dv-move { position: relative; z-index: 1; box-shadow: inset 0 0 0 1.5px var(--purple), 0 14px 26px -16px rgb(138 60 176 / .7); }
.dl-scene.on .dv-move { animation: dv-move 1.1s 1s var(--ease-out) both; }
@keyframes dv-move { to { transform: translateX(calc(100% + 32px)); } }
.dv-grid { display: grid; grid-template-columns: repeat(8, 22px); gap: 6px; }
.dv-grid i { width: 22px; height: 22px; border-radius: 6px; background: var(--purple); opacity: .9; }
.dv-grid i:nth-child(3n) { background: var(--purple-deep); } .dv-grid i:nth-child(4n + 1) { background: rgb(187 98 222 / .5); }
.dl-scene.on .dv-grid i { animation: dv-pop .35s calc(var(--k) * 55ms + .2s) var(--ease-out) both; }
.dv-tiles b { font-size: .9rem; } .dv-tiles em { font: 400 1.6rem/1 var(--font-display); font-style: normal; color: var(--purple-deep); margin-right: 4px; }
.dl-scene.on .dv-tiles b { animation: dv-up .5s 1.6s var(--ease-out) both; }
.dv-offer { position: relative; }
.dv-acc { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: var(--ink); color: var(--beige); font-size: .74rem; font-weight: 600; }
.dv-acc .ck { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; }
.dl-scene.on .dv-acc { animation: dv-pop .45s 1s var(--ease-out) both; }
.dv-day { position: absolute; right: -8px; bottom: -14px; display: grid; padding: 9px 14px; border-radius: 12px; background: var(--purple); color: var(--ink); font: 400 1.35rem/1 var(--font-display); text-align: left; transform: rotate(-4deg); box-shadow: 0 16px 30px -16px rgb(138 60 176 / .8); }
.dv-day small { font-size: .56rem; color: rgb(26 26 26 / .7); }
.dl-scene.on .dv-day { animation: dv-pop .5s 1.5s var(--ease-out) both; }
.dv-pill { position: absolute; right: 14px; top: 12px; padding: 5px 10px; border-radius: 999px; background: rgb(26 26 26 / .08); font-size: .7rem; font-weight: 600; }
.dl-scene.on .dv-pill { animation: dv-pop .45s 1.1s var(--ease-out) both; }
.dv-stack { position: relative; width: 210px; height: 130px; }
.dv-stack .dv-paper { position: absolute; inset: 0; }
.dv-stack .p1 { transform: rotate(-6deg) translate(-10px, 4px); } .dv-stack .p2 { transform: rotate(4deg) translate(8px, -2px); }
.dl-scene.on .dv-stack .p3 { animation: dv-shuffle 1.8s .6s var(--ease-in-out) infinite; }
@keyframes dv-shuffle { 0%, 20% { transform: none; } 50% { transform: translate(120px, -10px) rotate(10deg); opacity: 0; } 51% { transform: translate(-60px, 10px); opacity: 0; } 80%, 100% { transform: none; opacity: 1; } }
.dv-call .dv-paper, .dv-cand .dv-paper { justify-items: start; }
.dv-row { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.dv-row span { padding: 6px 10px; border-radius: 999px; background: rgb(26 26 26 / .06); font-size: .72rem; font-weight: 600; }
.dl-scene.on .dv-row span { animation: dv-pop .4s var(--ease-out) both; }
.dl-scene.on .dv-row span:nth-child(2) { animation-delay: .2s; } .dl-scene.on .dv-row span:nth-child(3) { animation-delay: .4s; }
.dv-who2 { display: flex; align-items: center; gap: 10px; } .dv-who2 > span:last-child { display: grid; gap: 2px; }
.dv-who2 .ini { width: 36px; height: 36px; font-size: .68rem; }
.dv-mini { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; width: 100%; }
.dv-mini i { height: 34px; border-radius: 8px; background: linear-gradient(rgb(187 98 222 / .22), rgb(187 98 222 / .08)); box-shadow: inset 0 0 0 1px rgb(187 98 222 / .25); }
.dl-scene.on .dv-mini i { animation: dv-pop .35s calc(var(--k) * 120ms + .4s) var(--ease-out) both; }
.dv-model { gap: 8px; }
.dv-model span { width: 100%; padding: 12px 14px; border-radius: 12px; background: var(--white); box-shadow: inset 0 0 0 1px rgb(26 26 26 / .07); font-weight: 500; text-align: left; }
.dl-scene.on .dv-model .pick { animation: dv-pick .45s 1s var(--ease-out) both; }
@keyframes dv-pick { to { background: var(--ink); color: var(--beige); box-shadow: 0 14px 26px -14px rgb(26 26 26 / .6); } }
.dv-tools b { font: 400 1.2rem/1.2 var(--font-display); }
.dv-faces { display: inline-flex; } .dv-faces .ini { width: 34px; height: 34px; margin-left: -8px; font-size: .64rem; box-shadow: 0 0 0 2px var(--white); }
.dl-scene.on .dv-faces .ini { animation: dv-pop .4s var(--ease-out) both; }
.dl-scene.on .dv-faces .ini:nth-child(1) { animation-delay: .7s; } .dl-scene.on .dv-faces .ini:nth-child(2) { animation-delay: .9s; } .dl-scene.on .dv-faces .ini:nth-child(3) { animation-delay: 1.1s; }
.dv-tix { gap: 8px; }
.dv-tix span { width: 100%; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--white); box-shadow: inset 0 0 0 1px rgb(26 26 26 / .07); font-size: .78rem; text-align: left; }
.dv-tix b { color: rgb(26 26 26 / .5); font-weight: 600; }
.dv-tix em { margin-left: auto; padding: 3px 8px; border-radius: 999px; background: rgb(187 98 222 / .16); color: var(--purple-deep); font-style: normal; font-size: .68rem; font-weight: 600; }
.dl-scene.on .dv-tix em { animation: dv-pop .4s var(--ease-out) both; }
.dl-scene.on .dv-tix span:nth-child(1) em { animation-delay: .5s; } .dl-scene.on .dv-tix span:nth-child(2) em { animation-delay: 1s; } .dl-scene.on .dv-tix span:nth-child(3) em { animation-delay: 1.5s; }
.dv-wait b, .dv-wait2 b { font-size: .92rem; }
.motion-paused .duel *, .motion-paused .duel *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .duel *, .duel *::after { animation: none !important; transition: none !important; }
  .dv-ramp .dv-bar i { width: 16%; } .dv-acad .dv-bar i { width: 74%; }
  .dv-move { transform: translateX(calc(100% + 32px)); } .dv-model .pick { background: var(--ink); color: var(--beige); }
}


/* ================= Revision 28 ================= */
/* the opening: the brain sits inside two slow orbits, with the four things AntBox is about */
.boot-orbit { position: absolute; left: 50%; top: 50%; width: 0; height: 0; opacity: 0; transition: opacity .9s var(--ease-out) .25s; }
.asking .boot-orbit { top: 36%; }
.brain-on .boot-orbit { opacity: 1; }
.bo-glow { position: absolute; left: -260px; top: -220px; width: 520px; height: 440px; border-radius: 50%; background: radial-gradient(closest-side, rgb(187 98 222 / .32), rgb(138 60 176 / .12) 55%, transparent); filter: blur(10px); animation: bo-breathe 3.2s var(--ease-in-out) infinite; }
@keyframes bo-breathe { 50% { transform: scale(1.08); opacity: .8; } }
.bo-ring { position: absolute; border-radius: 50%; border: 1px solid rgb(247 245 238 / .14); }
.bo-ring.r1 { left: -250px; top: -150px; width: 500px; height: 300px; transform: rotate(-12deg); }
.bo-ring.r2 { left: -320px; top: -190px; width: 640px; height: 380px; transform: rotate(10deg); border-style: dashed; border-color: rgb(187 98 222 / .3); }
.bo-ring::after { content: ""; position: absolute; left: 50%; top: -4px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 14px 3px rgb(187 98 222 / .8); transform-origin: 4px calc(50% + 4px); }
.bo-ring.r1::after { transform-origin: 4px 154px; animation: bo-spin 7s linear infinite; }
.bo-ring.r2::after { transform-origin: 4px 194px; animation: bo-spin 11s linear infinite reverse; background: var(--beige); box-shadow: 0 0 12px 2px rgb(247 245 238 / .6); }
@keyframes bo-spin { to { transform: rotate(360deg); } }
.bo-chip { position: absolute; padding: 7px 13px; border-radius: 999px; font: 600 .74rem/1 var(--font-body); letter-spacing: .06em; white-space: nowrap; color: var(--beige); background: rgb(247 245 238 / .08); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgb(247 245 238 / .18), 0 10px 30px -10px rgb(187 98 222 / .6); opacity: 0; transform: translateY(8px) scale(.9); }
.brain-on .bo-chip { animation: bo-chip-in .7s var(--ease-out) forwards, bo-float 5s var(--ease-in-out) infinite; }
.bo-chip.c1 { left: -300px; top: -110px; animation-delay: .5s, 1.2s !important; }
.bo-chip.c2 { left: 210px; top: -140px; animation-delay: .7s, 1.4s !important; }
.bo-chip.c3 { left: -330px; top: 90px; animation-delay: .9s, 1.6s !important; }
.bo-chip.c4 { left: 230px; top: 70px; animation-delay: 1.1s, 1.8s !important; background: var(--purple); color: var(--ink); box-shadow: 0 0 0 6px rgb(187 98 222 / .2), 0 10px 30px -8px rgb(187 98 222 / .9); }
@keyframes bo-chip-in { to { opacity: 1; transform: none; } }
@keyframes bo-float { 50% { translate: 0 -7px; } }
@media (max-width: 760px) { .bo-ring.r1 { left: -170px; top: -110px; width: 340px; height: 220px; } .bo-ring.r1::after { transform-origin: 4px 114px; } .bo-ring.r2 { left: -200px; top: -140px; width: 400px; height: 280px; } .bo-ring.r2::after { transform-origin: 4px 144px; } .bo-chip.c1 { left: -170px; top: -150px; } .bo-chip.c2 { left: 90px; top: -160px; } .bo-chip.c3 { left: -175px; top: 110px; } .bo-chip.c4 { left: 100px; top: 115px; } }

/* the question: two cards with a little preview each, and a five-second clock */
.gate { width: min(720px, calc(100vw - 32px)); bottom: max(5vh, 26px); gap: 12px; }
.gate-hi { display: inline-flex; align-items: center; gap: 8px; }
.gate-hi i { width: 7px; height: 7px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 0 0 rgb(187 98 222 / .7); animation: pulse-ring 1.8s infinite; }
.gate-q { font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.4rem); }
.gate-opts { gap: 14px; margin-top: 10px; }
.gate-o { grid-template-columns: 1fr; padding: 14px 14px 18px; gap: 12px; border-radius: 26px; overflow: hidden; transition: transform .5s var(--ease-out), box-shadow .5s, background-color .5s; }
.gate-o:hover, .gate-o:focus-visible { transform: translateY(-5px); }
.go-art { position: relative; display: grid; place-items: center; height: 104px; border-radius: 18px; background: radial-gradient(70% 90% at 50% 0%, rgb(187 98 222 / .35), transparent 70%), rgb(247 245 238 / .04); box-shadow: inset 0 0 0 1px rgb(247 245 238 / .1); overflow: hidden; }
.go-txt { display: grid; gap: 4px; padding: 0 6px; }
.go-arr { top: auto; bottom: 18px; right: 18px; }
.ga-card { position: relative; display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; gap: 8px 10px; width: 190px; padding: 12px; border-radius: 14px; background: var(--white); box-shadow: 0 18px 30px -16px rgb(26 26 26 / .7); transition: transform .6s var(--ease-out); }
.ga-av { grid-row: span 1; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(120% 120% at 30% 20%, var(--purple), var(--purple-deep)); color: var(--white); font: 600 .55rem/1 var(--font-body); font-style: normal; }
.ga-lines { display: grid; align-content: center; gap: 5px; } .ga-lines i { height: 5px; border-radius: 3px; background: rgb(26 26 26 / .14); } .ga-lines i + i { width: 60%; }
.ga-bars { grid-column: 1 / -1; display: flex; align-items: flex-end; gap: 5px; height: 26px; }
.ga-bars i { flex: 1; border-radius: 3px 3px 1px 1px; background: linear-gradient(var(--purple), rgb(187 98 222 / .35)); transform-origin: 50% 100%; animation: ga-grow 2.4s var(--ease-out) infinite; }
.ga-bars i:nth-child(1) { height: 35%; } .ga-bars i:nth-child(2) { height: 55%; animation-delay: .15s; } .ga-bars i:nth-child(3) { height: 70%; animation-delay: .3s; } .ga-bars i:nth-child(4) { height: 100%; animation-delay: .45s; }
@keyframes ga-grow { 0% { transform: scaleY(.15); } 45%, 100% { transform: none; } }
.ga-card em { position: absolute; right: -10px; top: -10px; padding: 4px 8px; border-radius: 999px; background: var(--purple); color: var(--ink); font: 700 .55rem/1 var(--font-body); font-style: normal; letter-spacing: .04em; box-shadow: 0 8px 16px -6px rgb(187 98 222 / .9); }
.go-s:hover .ga-card { transform: translateY(-3px) rotate(-1.5deg); }
.ga-team { display: flex; align-items: center; }
.ga-team i { width: 40px; height: 40px; margin-left: -10px; border-radius: 50%; border: 2px solid var(--ink); background: url(/images/network/faces.webp) 0 0 / 1600% 1000%; }
.ga-team i:nth-child(1) { margin-left: 0; background-position: 6.67% 0%; } .ga-team i:nth-child(2) { background-position: 33.3% 11.1%; } .ga-team i:nth-child(3) { background-position: 60% 22.2%; } .ga-team i:nth-child(4) { background-position: 86.7% 33.3%; }
.ga-team b { margin-left: 10px; padding: 6px 10px; border-radius: 999px; background: var(--purple); color: var(--ink); font: 700 .62rem/1 var(--font-body); white-space: nowrap; animation: bo-float 3s var(--ease-in-out) infinite; }
.go-c:hover .ga-team i { animation: ga-join .6s var(--ease-out) both; } .go-c:hover .ga-team i:nth-child(2) { animation-delay: .06s; } .go-c:hover .ga-team i:nth-child(3) { animation-delay: .12s; } .go-c:hover .ga-team i:nth-child(4) { animation-delay: .18s; }
@keyframes ga-join { from { transform: translateX(10px); opacity: .4; } }
.go-timer { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgb(247 245 238 / .08); }
.go-timer i { display: block; height: 100%; background: linear-gradient(90deg, var(--purple-deep), var(--purple)); transform-origin: 0 50%; box-shadow: 0 0 10px rgb(187 98 222 / .8); }
.go-s { box-shadow: inset 0 0 0 1px rgb(187 98 222 / .45), inset 0 1px 0 rgb(247 245 238 / .2); }
.gate-note { font-size: .8rem; color: rgb(247 245 238 / .6); }
.gate-note b { color: var(--purple); font-variant-numeric: tabular-nums; }
.gate-note span { display: block; margin-top: 4px; color: rgb(247 245 238 / .42); }
.gate.held .gate-note { opacity: .5; }
@media (max-width: 560px) { .go-art { height: 84px; } .ga-card { width: 160px; } }
@media (max-height: 760px) { .go-art { display: none; } }

/* the hero network caption, shown while the people draw a Proof of Work */
.hero-stage .form-cap { position: absolute; left: 50%; bottom: 6%; z-index: 3; translate: -50% 0; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgb(255 255 255 / .82); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .95), 0 14px 30px -14px rgb(138 60 176 / .6); font-size: .8rem; white-space: nowrap; opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease-out), transform .7s var(--ease-out); pointer-events: none; }
.hero-stage .form-cap i { width: 8px; height: 8px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 10px rgb(187 98 222 / .9); }
.hero-stage .form-cap b { color: var(--purple-deep); font-weight: 600; }
.forming .hero-stage .form-cap { opacity: 1; transform: none; }
/* the card the people draw: a faint glass outline with its labels, timed to the formation */
.hero-stage { container-type: size; }
.form-card { --fk: 0; position: absolute; left: 50%; top: 50%; z-index: 1; width: calc(min(100cqw, 100cqh) * .836); height: calc(min(100cqw, 100cqh) * .563); translate: -50% -50%; border-radius: calc(min(100cqw, 100cqh) * .056); background: linear-gradient(155deg, rgb(255 255 255 / .55), rgb(255 255 255 / .18)); box-shadow: inset 0 0 0 1.5px rgb(187 98 222 / .35), 0 40px 80px -40px rgb(138 60 176 / .5); opacity: calc(var(--fk) * .95); transform: scale(calc(.94 + var(--fk) * .06)); pointer-events: none; }
.form-card span { position: absolute; font: 600 calc(min(100cqw, 100cqh) * .022) / 1 var(--font-body); white-space: nowrap; color: var(--purple-deep); letter-spacing: .02em; }
.fc-name { left: 26%; top: 9%; color: var(--ink) !important; }
.fc-pill { right: 7%; top: 13%; padding: .4em .8em; border-radius: 999px; background: var(--purple); color: var(--ink) !important; }
.fc-work { left: 15%; top: 40%; letter-spacing: .14em !important; text-transform: uppercase; color: rgb(26 26 26 / .55) !important; }
.fc-chart { right: 7%; top: 44%; font-family: var(--font-display) !important; font-weight: 400 !important; font-size: calc(min(100cqw, 100cqh) * .04) !important; }

/* the people: a wall of story cards */
.stories { position: relative; display: grid; gap: 18px; margin: clamp(28px, 4vw, 48px) calc(-1 * var(--gutter)) 0; padding: 14px 0; -webkit-mask: linear-gradient(90deg, transparent, var(--ink) 8%, var(--ink) 92%, transparent); mask: linear-gradient(90deg, transparent, var(--ink) 8%, var(--ink) 92%, transparent); }
.st-row { overflow: hidden; padding: 16px 0; }
.st-track { display: flex; gap: 18px; width: max-content; will-change: transform; }
.sc { position: relative; flex: none; width: 290px; height: 370px; margin: 0; border-radius: 26px; overflow: hidden; background: var(--ink); box-shadow: inset 0 0 0 1px rgb(247 245 238 / .12), 0 40px 70px -40px rgb(26 26 26 / .9); transition: transform .6s var(--ease-out), box-shadow .6s; }
.sc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.2s var(--ease-out), filter .6s; filter: saturate(.92); }
.sc::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgb(26 26 26 / .55) 55%, rgb(26 26 26 / .96) 100%); }
.sc figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: grid; gap: 6px; padding: 20px 20px 22px; }
.sc blockquote { margin: 0 0 6px; font: 400 1.06rem/1.35 var(--font-display); color: var(--beige); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.sc blockquote::before { content: "\201C"; color: var(--purple); }
.sc b { font-size: .86rem; font-weight: 600; color: var(--beige); }
.sc small { font-size: .72rem; color: rgb(247 245 238 / .62); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.sc:hover { transform: translateY(-10px) rotate(-.6deg); box-shadow: inset 0 0 0 1.5px rgb(187 98 222 / .7), 0 50px 90px -40px rgb(187 98 222 / .7); }
.sc:hover img { transform: scale(1.1); filter: saturate(1.05); }
.st-row[data-dir="-1"] .sc:hover { transform: translateY(-10px) rotate(.6deg); }
.sc-open { position: absolute; inset: 0; z-index: 2; border: 0; background: none; cursor: pointer; border-radius: inherit; }
.sc-open:focus-visible { outline: 2px solid var(--purple); outline-offset: -4px; }
.st-count { margin-top: 18px; text-align: center; font-size: .9rem; color: rgb(247 245 238 / .72); }
.st-count b { font: 400 1.4rem/1 var(--font-display); color: var(--purple); }
.st-count span { color: rgb(247 245 238 / .45); margin-left: 6px; }
.sc-modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; background: rgb(26 26 26 / .6); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; transition: opacity .35s var(--ease-out); }
.sc-modal.on { opacity: 1; }
.scm-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); width: min(820px, 100%); border-radius: 30px; overflow: hidden; background: var(--ink); color: var(--beige); box-shadow: inset 0 0 0 1px rgb(247 245 238 / .14), 0 60px 120px -40px rgb(187 98 222 / .6); transform: translateY(16px) scale(.97); transition: transform .5s var(--ease-out); }
.sc-modal.on .scm-card { transform: none; }
.scm-card img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; }
.scm-txt { display: grid; align-content: center; gap: 10px; padding: clamp(24px, 4vw, 44px); }
.scm-txt blockquote { margin: 0 0 10px; font: 400 clamp(1.4rem, 1.1rem + 1.2vw, 2rem)/1.3 var(--font-display); }
.scm-txt blockquote::before { content: "\201C"; color: var(--purple); }
.scm-txt b { font-weight: 600; } .scm-txt small { color: rgb(247 245 238 / .62); }
.scm-x { position: absolute; right: 14px; top: 14px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgb(247 245 238 / .12); color: var(--beige); font-size: 1.3rem; cursor: pointer; }
@media (max-width: 760px) { .sc { width: 230px; height: 310px; } .scm-card { grid-template-columns: 1fr; } .scm-card img { min-height: 240px; max-height: 300px; } }
@media (prefers-reduced-motion: reduce) { .st-row { overflow-x: auto; } }
.sc figcaption, .scm-txt { text-align: left; }
.scm-txt b { display: block; color: var(--beige); font-size: 1rem; }
.closing { padding-bottom: clamp(56px, 7vw, 96px); }
.closing .close-cta { margin-top: clamp(20px, 3vw, 36px); }
.closing + .footer, main + .footer { padding-top: clamp(28px, 4vw, 56px); }
/* the network follows "a week at AntBox" on the same black sheet: give it room to breathe */
.what + .network, .what + .pin-spacer .network { margin-top: 0; }
.asking .boot-orbit { top: 33%; }
.dv small { color: rgb(26 26 26 / .68); }
@media (max-width: 560px) {
  .asking .boot-orbit { top: 22%; }
  .bo-chip.c3, .bo-chip.c4 { display: none; }
  .bo-chip.c1 { left: -150px; top: -120px; } .bo-chip.c2 { left: 80px; top: -130px; }
  .go-art { display: none; }
  .gate { bottom: 18px; gap: 8px; } .gate-q { font-size: 2rem; } .gate-o { padding: 14px 16px 16px; }
  .pick-toast { left: 16px; right: 16px; translate: none; justify-content: center; border-radius: 18px; padding: 10px 14px; font-size: .78rem; text-align: center; }
}
/* one caption per formation */
.form-cap .fs { display: none; }
:root[data-form-shape="0"] .form-cap .fs0, :root[data-form-shape="1"] .form-cap .fs1, :root[data-form-shape="2"] .form-cap .fs2, :root[data-form-shape="3"] .form-cap .fs3 { display: inline; }
.form-cap { transition: opacity .45s var(--ease-out), transform .55s var(--ease-out); }
.form-card { transition: none; }

/* ================= Revision 29 ================= */
/* the people: two slow orbits of faces around one story card */
.ow { position: relative; height: clamp(600px, 52vw, 720px); margin-top: clamp(24px, 3vw, 40px); }
.ow-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ow-ring { fill: none; stroke: rgb(247 245 238 / .1); stroke-width: 1; }
.ow-ring.r1 { stroke-dasharray: 2 7; stroke: rgb(187 98 222 / .32); }
.ow-link { stroke: var(--purple); stroke-width: 1.6; stroke-dasharray: 5 6; animation: flow 1.2s linear infinite; filter: drop-shadow(0 0 4px rgb(187 98 222 / .9)); }
.ow-spark { fill: var(--white); filter: drop-shadow(0 0 6px rgb(187 98 222 / 1)); }
.ow-nodes { position: absolute; inset: 0; }
.ow-n { position: absolute; left: 0; top: 0; width: 76px; height: 76px; padding: 0; border: 0; border-radius: 50%; background: var(--ink); cursor: pointer; box-shadow: 0 0 0 2px rgb(247 245 238 / .2), 0 18px 34px -14px rgb(26 26 26 / .9); will-change: transform; opacity: 0; transition: opacity .8s var(--ease-out), box-shadow .5s, filter .5s; filter: saturate(.85) brightness(.9); }
.ow.in .ow-n { opacity: 1; }
.ow-n img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.ow-n:hover { filter: none; box-shadow: 0 0 0 2px rgb(187 98 222 / .8), 0 18px 34px -14px rgb(26 26 26 / .9); }
.ow-n.on { filter: none; box-shadow: 0 0 0 10px rgb(187 98 222 / .16), 0 0 46px rgb(187 98 222 / .65); }
.ow-n:focus-visible { outline: 2px solid var(--purple); outline-offset: 4px; }
.ow-prog { position: absolute; inset: -5px; width: calc(100% + 10px); height: calc(100% + 10px); transform: rotate(-90deg); opacity: 0; }
.ow-prog circle { fill: none; stroke: var(--purple); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.ow-n.on .ow-prog { opacity: 1; }
.ow-n.on .ow-prog circle { animation: ow-prog 4.2s linear forwards; }
.ow.held .ow-n.on .ow-prog circle { animation-play-state: paused; }
@keyframes ow-prog { to { stroke-dashoffset: 0; } }
.ow-tag { position: absolute; left: 50%; top: calc(100% + 10px); translate: -50% 0; padding: 5px 11px; border-radius: 999px; background: rgb(247 245 238 / .12); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgb(247 245 238 / .18); color: var(--beige); font: 600 .7rem/1 var(--font-body); white-space: nowrap; opacity: 0; transform: translateY(-4px); transition: opacity .4s, transform .5s var(--ease-out); pointer-events: none; }
.ow-n.on .ow-tag, .ow-n:hover .ow-tag { opacity: 1; transform: none; }
.ow-feat { position: absolute; left: 50%; top: 50%; z-index: 120; width: min(560px, 46%); translate: -50% -50%; margin: 0; display: grid; grid-template-columns: 42% 1fr; border-radius: 30px; overflow: hidden; text-align: left;
  background: linear-gradient(155deg, rgb(247 245 238 / .13), rgb(247 245 238 / .04) 60%, rgb(247 245 238 / .08)); -webkit-backdrop-filter: blur(40px) saturate(180%); backdrop-filter: blur(40px) saturate(180%);
  box-shadow: inset 0 0 0 1px rgb(247 245 238 / .16), inset 0 1.5px 0 rgb(247 245 238 / .26), 0 60px 120px -40px rgb(26 26 26 / .95), 0 0 90px -20px rgb(187 98 222 / .55); }
.owf-img { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.owf-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity .6s var(--ease-out), transform 1.4s var(--ease-out); }
.owf-img img.top { opacity: 1; transform: scale(1.02); }
.owf-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 60%, rgb(26 26 26 / .35)); }
.ow-feat figcaption { display: grid; align-content: center; gap: 8px; padding: 26px 24px; }
.owf-n { font: 600 .66rem/1 var(--font-body); letter-spacing: .16em; color: var(--purple); }
.owf-q { margin: 0 0 6px; font: 400 clamp(1.1rem, .95rem + .5vw, 1.42rem)/1.35 var(--font-display); color: var(--beige); }
.owf-q::before { content: "\201C"; color: var(--purple); }
.owf-name { font-weight: 600; color: var(--beige); } .owf-role { font-size: .78rem; color: rgb(247 245 238 / .62); }
.ow-feat.in figcaption > * { animation: feat-txt .6s var(--ease-out) both; }
.ow-feat.in .owf-q { animation-delay: .05s; } .ow-feat.in .owf-name { animation-delay: .1s; } .ow-feat.in .owf-role { animation-delay: .14s; }
@media (max-width: 759px) {
  .ow { height: 860px; }
  .ow-n { width: 50px; height: 50px; } .ow-tag { display: none; }
  .ow-feat { top: auto; bottom: 0; translate: -50% 0; width: calc(100% - 8px); grid-template-columns: 38% 1fr; }
  .ow-feat figcaption { padding: 18px 16px; }
}
.ow { height: clamp(640px, 56vw, 760px); }
/* your path is driven by scroll: no play button, and the bars follow the scroll exactly */
.duel.is-scroll .dl-play { display: none; }
.duel.is-scroll .dl-bar { grid-template-columns: 1fr; padding-left: 18px; }
@media (min-width: 900px) { #path .path-pin { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-block: 84px 28px; } #path .sec-lede { margin-top: 10px; } }
@media (min-width: 900px) and (max-height: 820px) { #path .dl-screen { height: 200px; } #path .sec-title { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); } }

/* ===== Revision 30: motion performance =====
   Blur cost grows with panel area times radius, and every frame the live network behind it
   changes, so the big panels re-blur constantly. Large panels keep the glass at a lighter
   radius (they are mostly opaque, so it reads the same); the boot orbit stops compositing
   once the opening is over. */
.p5, .md6, .st-win, .win, .tb3, .dl-side, .ow-feat, .footer .foot-card { -webkit-backdrop-filter: blur(22px) saturate(190%) !important; backdrop-filter: blur(22px) saturate(190%) !important; }
.brain-done .boot-orbit { visibility: hidden; }
.brain-done .boot-orbit .bo-chip { -webkit-backdrop-filter: none; backdrop-filter: none; }
.ow-n { will-change: transform; }

/* ===== Revision 31: the product demos as a real app =====
   One app shell for both sides: browser chrome, a sidebar (workspace, search, sections, a status
   card), a top bar (breadcrumb, actions), a header with live numbers, and four views. Built from
   tools/apps.py. Light app on the black band; every colour is from the palette. */
.ax { --fg: var(--ink); --fg-2: rgb(26 26 26 / .72); --fg-3: rgb(26 26 26 / .56); --fg-rgb: 26 26 26; --rule: rgb(26 26 26 / .08);
  --mut: rgb(26 26 26 / .56); --line: rgb(26 26 26 / .075);
  position: relative; display: flex; flex-direction: column; max-width: 1180px; height: 744px; margin: clamp(28px, 4vw, 48px) auto 0;
  border-radius: 18px; overflow: hidden; background: var(--white); color: var(--ink); font: 400 13px/1.45 var(--font-body); text-align: left;
  box-shadow: 0 0 0 1px rgb(247 245 238 / .14), 0 2px 0 rgb(255 255 255 / .2) inset, 0 60px 120px -50px rgb(26 26 26 / .9), 0 40px 90px -60px rgb(187 98 222 / .7); }
.ax .i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ax button { font: inherit; color: inherit; }
.ax button:focus-visible { outline: 2px solid var(--purple); outline-offset: 1px; }
.ax .tg.t1, .ax .tg.t3 { color: var(--purple-deep); }

/* chrome */
.ax-chrome { flex: none; display: flex; align-items: center; gap: 14px; height: 42px; padding: 0 14px; background: var(--beige); border-bottom: 1px solid var(--line); }
.ax-dots { display: flex; gap: 7px; } .ax-dots i { width: 11px; height: 11px; border-radius: 50%; background: rgb(26 26 26 / .13); box-shadow: inset 0 0 0 .5px rgb(26 26 26 / .1); }
.ax-arrows { display: flex; gap: 6px; color: rgb(26 26 26 / .3); } .ax-arrows .i { width: 15px; height: 15px; }
.ax-url { flex: 0 1 440px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 6px; height: 27px; border-radius: 8px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); font-size: 12px; color: rgb(26 26 26 / .5); white-space: nowrap; overflow: hidden; }
.ax-url .i { width: 12px; height: 12px; } .ax-url b { color: var(--ink); font-weight: 500; }
.ax-demo { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 999px; background: rgb(187 98 222 / .13); color: var(--purple-deep); font: 600 11px/1 var(--font-body); }
.ax-demo i { width: 6px; height: 6px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 0 3px rgb(187 98 222 / .25); }

.ax-shell { flex: 1; min-height: 0; display: grid; grid-template-columns: 224px 1fr; }

/* sidebar */
.ax-side { display: flex; flex-direction: column; gap: 12px; min-height: 0; padding: 14px 12px; background: var(--beige); border-right: 1px solid var(--line); }
.ax-ws { display: flex; align-items: center; gap: 10px; padding: 2px 6px; }
.ax-ws b { display: block; font-weight: 600; font-size: 13px; line-height: 1.2; } .ax-ws small { display: block; font-size: 11px; color: var(--mut); }
.ax-logo { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(140deg, var(--purple), var(--purple-deep)); color: var(--white); font: 400 17px/1 var(--font-display); box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 2px 6px -2px rgb(138 60 176 / .6); }
.ax-search { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 9px; border-radius: 8px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); color: rgb(26 26 26 / .45); font-size: 12.5px; }
.ax-search .i { width: 14px; height: 14px; }
.ax-search kbd { margin-left: auto; padding: 3px 5px; border-radius: 5px; background: rgb(26 26 26 / .05); font: 500 10.5px/1 var(--font-body); color: rgb(26 26 26 / .5); }
.ax-menu { display: flex; flex-direction: column; gap: 1px; }
.ax-mh { padding: 12px 8px 6px; font: 600 10.5px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: rgb(26 26 26 / .42); }
.ax-menu button, .ax-mi { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 8px; border: 0; border-radius: 8px; background: none; text-align: left; font-size: 13px; }
.ax-menu button { font-weight: 500; color: rgb(26 26 26 / .7); cursor: pointer; transition: background .15s, color .15s; }
.ax-menu button:hover { background: rgb(26 26 26 / .045); color: var(--ink); }
.ax-menu button.on { background: var(--white); color: var(--ink); box-shadow: 0 1px 2px rgb(26 26 26 / .06), inset 0 0 0 1px rgb(26 26 26 / .06); }
.ax-menu button.on .i { color: var(--purple-deep); }
.ax-menu em { margin-left: auto; padding: 3px 6px; border-radius: 6px; background: rgb(26 26 26 / .05); font: 500 11px/1 var(--font-body); font-style: normal; color: rgb(26 26 26 / .55); }
.ax-mi { color: rgb(26 26 26 / .55); }
.ax-ready { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line), 0 6px 16px -10px rgb(26 26 26 / .25); }
.ax-ready b { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.25; } .ax-ready small { display: block; font-size: 11px; color: var(--mut); }
.ax-ring { display: block; flex: none; width: 34px; height: 34px; }
.ax-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ax-ring .r0 { fill: none; stroke: rgb(26 26 26 / .08); stroke-width: 3.5; }
.ax-ring .r1 { fill: none; stroke: var(--purple); stroke-width: 3.5; stroke-linecap: round; }
.ax-ring.lg { width: 56px; height: 56px; }

/* main */
.ax-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--white); }
.ax-top { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 52px; padding: 0 22px; border-bottom: 1px solid var(--line); }
.ax-crumb { display: flex; align-items: center; gap: 6px; min-width: 0; color: rgb(26 26 26 / .5); white-space: nowrap; }
.ax-crumb .i { width: 13px; height: 13px; color: rgb(26 26 26 / .28); } .ax-crumb b { color: var(--ink); font-weight: 500; }
.ax-actions { display: flex; align-items: center; gap: 8px; }
.ax-ghost { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgb(26 26 26 / .1); font-size: 12.5px; font-weight: 500; color: rgb(26 26 26 / .72); white-space: nowrap; }
.ax-ghost .i { width: 14px; height: 14px; }
.ax-btn { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px; border: 0; border-radius: 8px; background: var(--ink); color: var(--white) !important; font-size: 12.5px !important; font-weight: 500; white-space: nowrap; cursor: pointer; box-shadow: 0 1px 2px rgb(26 26 26 / .25), inset 0 1px 0 rgb(255 255 255 / .14); transition: transform .15s, background .15s; }
.ax-btn .i { width: 14px; height: 14px; } .ax-btn:hover { background: rgb(26 26 26 / .86); } .ax-btn:active { transform: scale(.97); }
.ax-mtabs { display: none; }

.ax-hero { flex: none; display: flex; align-items: center; gap: 14px; padding: 16px 22px; border-bottom: 1px solid var(--line); }
.ax-av { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: radial-gradient(120% 120% at 30% 20%, var(--purple), var(--purple-deep)); color: var(--white); font: 600 13px/1 var(--font-body); box-shadow: 0 0 0 3px var(--white), 0 0 0 4.5px rgb(187 98 222 / .45); }
.ax-avs { display: flex; flex: none; } .ax-avs .ini { width: 32px; height: 32px; margin-left: -5px; font-size: 10px; box-shadow: 0 0 0 2.5px var(--white); } .ax-avs .ini:first-child { margin-left: 0; }
.ax-who { min-width: 0; }
.ax-who b { display: flex; align-items: center; gap: 6px; font: 400 21px/1.15 var(--font-display); white-space: nowrap; }
.ax-who small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-ver { width: 17px; height: 17px; flex: none; } .ax-ver path { fill: var(--purple); } .ax-ver .t { fill: none; stroke: var(--white); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ax-kpis { margin-left: auto; display: grid; grid-template-columns: repeat(4, minmax(108px, auto)); gap: 8px; }
.ax-kpis > span { display: grid; align-content: start; gap: 1px; min-width: 108px; padding: 9px 12px 10px; border-radius: 11px; box-shadow: inset 0 0 0 1px rgb(26 26 26 / .085); }
.ax-kpis small { font-size: 11px; color: var(--mut); }
.ax-kpis b { font: 400 21px/1.15 var(--font-display); font-variant-numeric: tabular-nums; }
.ax-kpis .dark { background: var(--ink); box-shadow: none; } .ax-kpis .dark small { color: rgb(247 245 238 / .6); }
.ax-ok { display: flex; align-items: center; gap: 7px; color: var(--purple); font-size: 15px !important; line-height: 1.6 !important; white-space: nowrap; }
.ax-ok i { width: 7px; height: 7px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 0 3px rgb(187 98 222 / .28); }
.ax-spark { width: 64px; height: 14px; margin-top: 3px; overflow: visible; } .ax-spark path { fill: none; stroke: var(--purple); stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ax-mini { display: block; height: 4px; margin-top: 8px; border-radius: 4px; background: rgb(26 26 26 / .08); overflow: hidden; }
.ax-mini i { display: block; width: var(--w); height: 100%; border-radius: inherit; background: var(--purple); }
.ax-stars { display: flex; gap: 2px; margin-top: 6px; }
.ax-stars i { width: 10px; height: 10px; background: rgb(26 26 26 / .14); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.ax-stars i.on { background: var(--purple); }

/* views */
.ax-views { position: relative; flex: 1; min-height: 0; }
.ax-v { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px; padding: 14px 22px 18px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .25s, visibility 0s .25s; }
.ax-v.on { opacity: 1; visibility: visible; transform: none; transition: opacity .3s, transform .4s var(--ease-out); }
.ax-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ax-seg { display: flex; gap: 2px; max-width: 100%; padding: 3px; border-radius: 9px; background: rgb(26 26 26 / .05); overflow-x: auto; scrollbar-width: none; }
.ax-seg button { flex: none; height: 26px; padding: 0 11px; border: 0; border-radius: 7px; background: none; font-size: 12px; font-weight: 500; color: rgb(26 26 26 / .6); cursor: pointer; transition: background .15s, color .15s; }
.ax-seg button:hover { color: var(--ink); }
.ax-seg button.on { background: var(--white); color: var(--ink); box-shadow: 0 1px 2px rgb(26 26 26 / .12), 0 0 0 .5px rgb(26 26 26 / .06); }
.ax-count { font-size: 12px; color: var(--mut); white-space: nowrap; } .ax-count b { color: var(--ink); font-weight: 600; }

.ax-work { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(300px, 372px) 1fr; gap: 16px; }
.ax-list { display: flex; flex-direction: column; gap: 2px; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.ax-row { display: grid; grid-template-columns: 34px auto 1fr auto; grid-template-areas: "ic b b sc" "ic tg s st"; align-items: center; gap: 2px 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: none; text-align: left; cursor: pointer; transition: background .2s, box-shadow .2s; }
.ax-row:hover { background: rgb(26 26 26 / .035); }
.ax-row.on { background: rgb(187 98 222 / .08); box-shadow: inset 0 0 0 1px rgb(187 98 222 / .32); }
.ax-row[hidden] { display: none; }
.ax-rt { display: contents; }
.ax-rt b { grid-area: b; font-weight: 500; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-rt small { grid-area: s; font-size: 11.5px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-row > .tg { grid-area: tg; }
.ax-ic { grid-area: ic; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: rgb(26 26 26 / .05); color: rgb(26 26 26 / .6); transition: background .2s, color .2s; }
.ax-row.on .ax-ic { background: var(--white); color: var(--purple-deep); box-shadow: 0 1px 3px rgb(26 26 26 / .1); }
.ax-row > .ax-st { grid-area: st; }
.ax-sc { grid-area: sc; justify-self: end; font: 400 15px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.ax-st { display: inline-flex; align-items: center; gap: 5px; justify-self: end; padding: 4px 8px; border-radius: 999px; font: 500 11px/1 var(--font-body); white-space: nowrap; }
.ax-st::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.ax-st.live { background: rgb(187 98 222 / .13); color: var(--purple-deep); }
.ax-st.done { background: rgb(26 26 26 / .06); color: rgb(26 26 26 / .64); }
.ax-st.fin { background: rgb(138 60 176 / .14); color: var(--purple-deep); }
.ax-st.sel { background: var(--ink); color: var(--white); }
.ax-st.off { background: rgb(26 26 26 / .05); color: rgb(26 26 26 / .5); }
.ax-st.open { box-shadow: inset 0 0 0 1px rgb(187 98 222 / .55); color: var(--purple-deep); }

.ax-detail { position: relative; min-width: 0; min-height: 0; border-radius: 14px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.ax-pv { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }
.ax-pv.on { opacity: 1; visibility: visible; transition: opacity .35s; }
.ax-art { flex: 1; min-height: 0; display: grid; place-items: center; padding: 18px 22px; overflow: hidden;
  background: radial-gradient(80% 70% at 75% 0%, rgb(187 98 222 / .16), transparent 70%), linear-gradient(rgb(26 26 26 / .035) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, rgb(26 26 26 / .035) 1px, transparent 1px) 0 0 / 22px 22px, var(--beige); }
.ax-art .art { max-width: 520px; }
.js-motion .ax-pv.on .art { animation: ax-in .55s var(--ease-out) both; }
@keyframes ax-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }
.ax-meta { flex: none; display: flex; align-items: flex-start; gap: 16px; padding: 14px 16px; background: var(--white); border-top: 1px solid var(--line); }
.ax-mt { flex: 1; min-width: 0; display: grid; gap: 4px; }
.ax-mk { display: flex; align-items: center; gap: 8px; } .ax-mk small { font-size: 11.5px; color: var(--mut); }
.ax-mt > b { font: 400 18px/1.2 var(--font-display); }
.ax-mt p { margin: 0; font-size: 12.5px; line-height: 1.5; color: rgb(26 26 26 / .72); }
.ax-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.ax-chips span { padding: 3px 8px; border-radius: 6px; background: rgb(26 26 26 / .05); font-size: 11px; color: rgb(26 26 26 / .7); }
.ax-score { position: relative; flex: none; display: grid; justify-items: center; gap: 3px; width: 78px; }
.ax-score b { position: absolute; top: 0; left: 50%; width: 56px; height: 56px; margin-left: -28px; display: grid; place-items: center; font: 400 18px/1 var(--font-display); }
.ax-score small { font-size: 10.5px; color: var(--mut); text-align: center; white-space: nowrap; }
.js-motion .ax-pv.on .ax-ring .r1 { animation: ax-ring 1s var(--ease-out) both; }
@keyframes ax-ring { from { stroke-dasharray: 0 100; } }

.ax-card { padding: 14px 16px; border-radius: 14px; background: var(--white); box-shadow: inset 0 0 0 1px rgb(26 26 26 / .085); }
.ax-ch { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ax-ch b { font-size: 13px; font-weight: 600; } .ax-ch small { font-size: 11.5px; color: var(--mut); }

/* reviews */
.ax-revs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-content: start; }
.ax-rev { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 14px; box-shadow: inset 0 0 0 1px rgb(26 26 26 / .085); }
.ax-rev header { display: flex; align-items: center; gap: 10px; }
.ax-rev header b { display: block; font-size: 13px; font-weight: 600; } .ax-rev header small { display: block; font-size: 11.5px; color: var(--mut); }
.ax-rev header .ax-stars { margin: 0 0 0 auto; align-self: flex-start; }
.ax-rev p { flex: 1; margin: 0; font: 400 16px/1.45 var(--font-display); }
.ax-rev footer { display: flex; align-items: center; gap: 6px; padding-top: 10px; border-top: 1px solid rgb(26 26 26 / .06); font-size: 11.5px; color: var(--mut); }
.ax-rev footer .i { width: 13px; height: 13px; } .ax-rev footer b { color: var(--ink); font-weight: 500; }

/* skills */
.ax-sks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; align-content: start; }
.ax-sk { position: relative; display: grid; grid-template-columns: 56px 1fr auto; grid-template-areas: "r t l" "r bar bar"; align-items: center; gap: 8px 14px; padding: 16px; border-radius: 14px; box-shadow: inset 0 0 0 1px rgb(26 26 26 / .085); }
.ax-sk .ax-ring { grid-area: r; }
.ax-skv { position: absolute; left: 16px; top: 50%; width: 56px; transform: translateY(-50%); text-align: center; font: 400 18px/1 var(--font-display); }
.ax-skt { grid-area: t; } .ax-skt b { display: block; font-size: 14px; font-weight: 500; } .ax-skt small { font-size: 11.5px; color: var(--mut); }
.ax-lvl { grid-area: l; padding: 4px 8px; border-radius: 6px; background: rgb(187 98 222 / .12); color: var(--purple-deep); font: 600 10.5px/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; }
.ax-bar { grid-area: bar; height: 5px; border-radius: 5px; background: rgb(26 26 26 / .07); overflow: hidden; }
.ax-bar i { display: block; width: var(--w); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--purple), var(--purple-deep)); transform-origin: left; }
.js-motion .ax-v.on .ax-bar i { animation: ax-grow .9s var(--ease-out) both; }
.js-motion .ax-v.on .ax-sk .r1 { animation: ax-ring 1s var(--ease-out) both; }
@keyframes ax-grow { from { transform: scaleX(0); } }

/* activity */
.ax-act { display: grid; grid-template-columns: 1.55fr 1fr; gap: 12px; align-content: start; }
.ax-heat { display: grid; grid-template-rows: repeat(7, 1fr); grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; }
.ax-heat i, .ax-legend i { aspect-ratio: 1; border-radius: 3px; background: rgb(26 26 26 / .06); }
.ax-heat .l1, .ax-legend .l1 { background: rgb(187 98 222 / .28); }
.ax-heat .l2, .ax-legend .l2 { background: rgb(187 98 222 / .5); }
.ax-heat .l3, .ax-legend .l3 { background: rgb(187 98 222 / .8); }
.ax-heat .l4, .ax-legend .l4 { background: var(--purple-deep); }
.ax-legend { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 10px; font-size: 11px; color: var(--mut); }
.ax-legend i { width: 10px; }
.ax-feed { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ax-feed li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; }
.ax-fi { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: rgb(187 98 222 / .12); color: var(--purple-deep); } .ax-fi .i { width: 14px; height: 14px; }
.ax-ft { display: block; font-size: 12.5px; line-height: 1.4; } .ax-ft b { font-weight: 600; }
.ax-feed small { font-size: 11px; color: var(--mut); }

/* the capsule dashboard */
.ax-co .ax-row { grid-template-columns: 32px 1fr auto 26px; grid-template-areas: none; gap: 10px; }
.ax-co .ax-rt { display: grid; min-width: 0; } .ax-co .ax-rt b, .ax-co .ax-rt small { grid-area: auto; }
.ax-co .ax-row > .ini { width: 32px; height: 32px; font-size: 10px; }
.ax-lh { display: grid; grid-template-columns: 1fr auto 52px; gap: 10px; padding: 2px 10px 8px 52px; font: 500 10.5px/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: rgb(26 26 26 / .42); }
.ax-lh span:last-child { text-align: right; }
.ax-co .ax-detail { box-shadow: none; overflow: visible; }
.ax-co .ax-pv { gap: 10px; overflow-y: auto; scrollbar-width: none; }
.ax-ph { display: flex; align-items: center; gap: 12px; padding: 2px 2px 4px; }
.ax-ph .ini.lg { width: 40px; height: 40px; font-size: 12px; }
.ax-ph b { display: block; font: 400 18px/1.2 var(--font-display); } .ax-ph small { display: block; font-size: 12px; color: var(--mut); }
.ax-ph .ax-st { margin-left: auto; }
.ax-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ax-stats span { padding: 10px 12px; border-radius: 11px; background: var(--beige); }
.ax-stats b { display: block; font: 400 21px/1.15 var(--font-display); font-variant-numeric: tabular-nums; } .ax-stats small { font-size: 11px; color: var(--mut); }
.ax-done { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.ax-done li { display: flex; align-items: center; gap: 9px; font-size: 12.5px; } .ax-done .i { width: 15px; height: 15px; color: var(--purple-deep); stroke-width: 2.2; }
.ax-cbars { display: grid; gap: 7px; }
.ax-cb { display: grid; grid-template-columns: 54px 1fr 22px; align-items: center; gap: 10px; font-size: 11.5px; color: var(--mut); }
.ax-cb i { height: 6px; border-radius: 6px; background: linear-gradient(90deg, rgb(26 26 26 / .16) var(--w), rgb(26 26 26 / .05) var(--w)); }
.ax-cb.me i { background: linear-gradient(90deg, var(--purple) var(--w), rgb(187 98 222 / .14) var(--w)); }
.ax-cb b { text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; } .ax-cb.me small, .ax-cb.me b { color: var(--ink); font-weight: 600; }
.ax-tablewrap { padding: 0; overflow: auto; }
.ax-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ax-table th { padding: 10px 14px; background: var(--beige); border-bottom: 1px solid var(--line); text-align: left; font: 500 11px/1 var(--font-body); color: var(--mut); white-space: nowrap; }
.ax-table td { padding: 11px 14px; border-bottom: 1px solid rgb(26 26 26 / .06); white-space: nowrap; }
.ax-table tr:last-child td { border-bottom: 0; } .ax-table tbody tr:hover { background: rgb(26 26 26 / .02); }
.ax-table .mono { color: var(--mut); font-variant-numeric: tabular-nums; } .ax-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.ax-own { display: inline-flex; align-items: center; gap: 7px; }
.ax .ini.sm { width: 22px; height: 22px; font-size: 8.5px; }
.ax-cal { display: grid; grid-template-columns: 130px repeat(5, 1fr); gap: 6px; }
.ax-cal .ch { padding-bottom: 4px; text-align: center; font: 500 11px/1 var(--font-body); color: var(--mut); } .ax-cal .ch.today { color: var(--purple-deep); font-weight: 600; }
.ax-cal .cn { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.ax-cal .cc { display: grid; place-items: center; height: 34px; border-radius: 8px; background: rgb(26 26 26 / .035); font-size: 11px; font-weight: 500; }
.ax-cal .cc.today { box-shadow: inset 0 0 0 1px rgb(187 98 222 / .45); } .ax-cal .cc.lv { background: rgb(187 98 222 / .16); color: var(--purple-deep); }
.ax-note { margin: 12px 0 0; font-size: 12px; color: var(--mut); }

.ax-toast { position: absolute; left: 50%; bottom: 18px; z-index: 40; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 10px; background: var(--ink); color: var(--white); font-size: 12.5px; white-space: nowrap; box-shadow: 0 16px 40px -12px rgb(26 26 26 / .55); opacity: 0; transform: translate(-50%, 8px); transition: opacity .3s, transform .3s var(--ease-out); pointer-events: none; }
.ax-toast.show { opacity: 1; transform: translate(-50%, 0); }
.ax-toast .ck { width: 14px; height: 14px; fill: none; stroke: var(--purple); stroke-width: 2; }
.ax .coach-tip { width: 214px; }

@media (max-width: 1080px) {
  .ax-shell { grid-template-columns: 1fr; }
  .ax-side { display: none; }
  .ax-mtabs { display: flex; flex: none; gap: 4px; padding: 8px 16px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
  .ax-mtabs button { flex: none; height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: none; font-size: 12.5px; font-weight: 500; color: rgb(26 26 26 / .6); cursor: pointer; }
  .ax-mtabs button.on { background: rgb(26 26 26 / .06); color: var(--ink); }
}
@media (max-width: 860px) {
  .ax { height: auto; border-radius: 16px; }
  .ax-arrows, .ax-demo, .ax-ghost { display: none; }
  .ax-url { font-size: 11px; }
  .ax-top { height: 48px; padding: 0 14px; }
  .ax-crumb { font-size: 12.5px; overflow: hidden; }
  .ax-hero { flex-wrap: wrap; padding: 14px; }
  .ax-kpis { width: 100%; margin-left: 0; grid-template-columns: repeat(2, 1fr); }
  .ax-kpis > span { min-width: 0; }
  .ax-views { position: static; }
  .ax-v { position: static; display: none; padding: 12px 14px 16px; transform: none; }
  .ax-v.on { display: flex; }
  .ax-toolbar { flex-direction: column; align-items: stretch; }
  .ax-work { grid-template-columns: 1fr; }
  .ax-list { max-height: none; overflow: visible; }
  .ax-pv { position: static; display: none; }
  .ax-pv.on { display: flex; }
  .ax-art { min-height: 240px; padding: 16px; }
  .ax-art .art { font-size: .7rem; }
  .ax-revs, .ax-sks, .ax-act { grid-template-columns: 1fr; }
  .ax-cal { grid-template-columns: 82px repeat(5, 1fr); gap: 4px; }
  .ax-cal .cn .ini { display: none; }
  .ax-cal .cc { font-size: 9.5px; }
}
.ax-cal .cc.lv { min-height: 0; }
.ax-co .ax-row > * { grid-area: auto !important; }
.ax-avs .ini.more { background: var(--beige); color: rgb(26 26 26 / .75); font-weight: 600; }
.ax-art { padding: 14px 18px; }
.ax-art .art { zoom: .86; }
.ax-rsum { display: grid; grid-template-columns: auto 1fr 1fr; gap: 28px; align-items: center; padding: 16px 20px; margin-bottom: 0; }
.ax-big { display: grid; justify-items: start; gap: 2px; } .ax-big b { font: 400 40px/1 var(--font-display); } .ax-big small { margin-top: 4px; font-size: 11.5px; color: var(--mut); }
.ax-dist { display: grid; gap: 5px; }
.ax-dr { display: grid; grid-template-columns: 12px 1fr 14px; align-items: center; gap: 10px; font-size: 11px; color: var(--mut); }
.ax-dr i { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--purple) var(--w), rgb(26 26 26 / .06) var(--w)); }
.ax-dr b { text-align: right; font-weight: 500; color: var(--ink); }
.ax-crit { display: grid; gap: 8px; align-content: center; } .ax-crit > small { font-size: 11.5px; color: var(--mut); }
.ax-hstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.ax-hstats span { padding: 10px 12px; border-radius: 10px; background: var(--beige); } .ax-hstats b { display: block; font: 400 20px/1.15 var(--font-display); } .ax-hstats small { font-size: 11px; color: var(--mut); }
@media (max-width: 860px) { .ax-rsum { grid-template-columns: 1fr; gap: 14px; } .ax-art .art { zoom: 1; } }

/* ===== Revision 32: smoother scrolling =====
   The live network is drawn behind the page, so any panel that blurs what is behind it has to
   blur again on every frame. In-page panels now carry "baked" glass: the same gradients and
   edges over a solid base, with no live blur. Live blur stays on small floating chrome only. */
.band-dark :is(.win, .ui), .st-win, .wx-board, .px-list, .iaas-modes li, .bx, .tr-strip > div, .ow-feat, .tb2-list li, .tb3, .tb2-p,
.dl-side, .dl-bar, .footer .foot-card, .lane, .fw-t, .stg-c, .sx-step, .hl-card, .stp-i, .tb-stage, .tb-mode, .tb-cap span, .ow-tag, .c-chaos, .c-order, .tb3-toggle {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.band-dark :is(.win, .ui, .bx, .ow-feat, .iaas-modes li), .tr-strip > div, .px-list { background-color: var(--ink) !important; }
.tb2-list li, .dl-them, .dl-bar, .footer .foot-card { background-color: var(--white) !important; }
.ow-tag { background: rgb(26 26 26 / .85) !important; }
.tb3-toggle { background-color: rgb(26 26 26 / .7) !important; }
.is-off *, .is-off *::before, .is-off *::after { animation-play-state: paused !important; }
.bands i { will-change: transform; box-shadow: inset 0 1px 0 rgb(247 245 238 / .08); }
@media (min-width: 960px) {
  /* the week window fits its screens: no tall empty glass, centred under the nav */
  .st-stick { height: min(calc(82vh - 76px), 460px); top: calc(38px + (100vh - min(calc(82vh - 76px), 460px)) / 2); }
  .st-screen::before { filter: none; background: radial-gradient(45% 45% at 60% 40%, rgb(187 98 222 / .32), transparent 75%); }
}
/* scroll-driven text moves and fades; it no longer blurs (a filter on big type repaints every frame) */
.js-motion .net-line.wait > span, .js-motion .net-line.done > span, .stg-c { filter: none !important; }
/* app text contrast: every muted label clears 4.5:1 on white and on beige */
.ax { --mut: rgb(26 26 26 / .68); }
.ax-url, .ax-search, .ax-search kbd, .ax-menu em, .ax-mi, .ax-crumb, .ax-mh, .ax-lh, .ax-seg button, .ax-menu button, .ax-st.done, .ax-st.off, .ax-ghost, .ax-cal .ch, .ax-chips span, .ax-dr small { color: rgb(26 26 26 / .68); }
.ax-menu button.on, .ax-menu button:hover, .ax-seg button.on, .ax-seg button:hover, .ax-crumb b, .ax-url b { color: var(--ink); }
.ax-search kbd, .ax-menu em { background: rgb(26 26 26 / .06); }

/* ===== Revision 33: the comparison as real screens =====
   Every step of "Same degree. Different Day 0." (and the hiring version) is a small app window:
   the usual way in plain grey tools, the AntBox way in the AntBox app. Built by tools/duels.py. */
.dl-scene { padding: 14px 16px; }
.mw { position: relative; width: min(100%, 410px); max-height: 100%; display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: var(--white); color: var(--ink); text-align: left; font: 400 11.5px/1.35 var(--font-body);
  box-shadow: 0 0 0 1px rgb(26 26 26 / .08), 0 18px 40px -22px rgb(26 26 26 / .45); }
.mw-bar { flex: none; display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; background: rgb(26 26 26 / .035); border-bottom: 1px solid rgb(26 26 26 / .07); }
.mw-dots { display: flex; gap: 4px; } .mw-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgb(26 26 26 / .16); }
.mw-logo { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 5px; background: linear-gradient(140deg, var(--purple), var(--purple-deep)); color: var(--white); font: 400 11px/1 var(--font-display); }
.mw-t { font-weight: 500; font-size: 11px; color: rgb(26 26 26 / .7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw-bar .mw-p { margin-left: auto; }
.mw-ab .mw-bar { background: linear-gradient(90deg, rgb(187 98 222 / .1), rgb(187 98 222 / .03)); }
.mw-b { position: relative; display: grid; gap: 6px; padding: 10px 12px 12px; min-height: 0; }
.mw-r { display: flex; align-items: center; gap: 8px; min-height: 28px; padding: 4px 8px; border-radius: 8px; background: rgb(26 26 26 / .03); }
.mw-r b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw-r small { margin-left: auto; font-size: 10.5px; color: rgb(26 26 26 / .6); white-space: nowrap; }
.mw-r .mw-p, .mw-r .mw-bar2 { margin-left: auto; } .mw-r small + .mw-p, .mw-r .mw-bar2 + small { margin-left: 6px; }
.mw-p { display: inline-flex; align-items: center; padding: 3px 7px; border-radius: 999px; font: 600 10px/1 var(--font-body); font-style: normal; white-space: nowrap; background: rgb(26 26 26 / .07); color: rgb(26 26 26 / .68); }
.mw-p.pp { background: rgb(187 98 222 / .14); color: var(--purple-deep); }
.mw-foot { margin: 2px 2px 0; font-size: 10.5px; color: rgb(26 26 26 / .62); display: flex; align-items: center; gap: 6px; }
.mw-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .mw-hd b { font-weight: 600; font-size: 12px; }
.mw-f { display: grid; place-items: center; width: 24px; height: 18px; border-radius: 4px; background: rgb(26 26 26 / .1); font: 700 7.5px/1 var(--font-body); color: rgb(26 26 26 / .6); }
.mw-u { width: 7px; height: 7px; border-radius: 50%; background: rgb(26 26 26 / .45); flex: none; } .mw-u.o { background: transparent; box-shadow: inset 0 0 0 1px rgb(26 26 26 / .3); }
.mw-dots2 { display: inline-flex; gap: 3px; } .mw-dots2 i { width: 4px; height: 4px; border-radius: 50%; background: rgb(26 26 26 / .4); }
.mw-c, .mw-o { display: grid; place-items: center; flex: none; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgb(26 26 26 / .2); }
.mw-c .ck, .mw-o .ck, .mw-acc .ck, .mw-s .ck { width: 10px; height: 10px; fill: none; stroke: var(--white); stroke-width: 2; }
.mw-c.on { background: rgb(26 26 26 / .55); box-shadow: none; } .mw-ab .mw-c.on, .mw-o.on { background: var(--purple); box-shadow: none; }
.mw-c.half { background: conic-gradient(rgb(26 26 26 / .4) 0 50%, transparent 0); }
.mw-tm { margin: 0 !important; width: 34px; font-variant-numeric: tabular-nums; }
.mw-bar2 { display: block; height: 5px; flex: 1; min-width: 60px; border-radius: 5px; background: rgb(26 26 26 / .08); overflow: hidden; }
.mw-bar2 i { display: block; width: var(--w); height: 100%; border-radius: inherit; background: var(--purple); transform-origin: left; }
.mw-bar2.slow i { background: rgb(26 26 26 / .4); }
.mw-sc { margin-left: 6px !important; font: 400 13px/1 var(--font-display) !important; color: var(--ink) !important; }
.mw-r .mw-bar2 { max-width: 120px; }
.mw-stamp { position: absolute; right: 14px; top: 8px; padding: 5px 10px; border-radius: 8px; border: 2px solid var(--purple); color: var(--purple-deep); font: 700 11px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; transform: rotate(-8deg); background: rgb(255 255 255 / .9); }
.mw-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 8px 0 4px; }
.mw-s { position: relative; display: grid; justify-items: center; gap: 4px; text-align: center; }
.mw-s:not(:last-child)::after { content: ""; position: absolute; top: 11px; left: calc(50% + 16px); right: calc(-50% + 16px); height: 2px; background: rgb(26 26 26 / .15); }
.mw-s i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgb(26 26 26 / .55); }
.mw-s.hold i { background: transparent; box-shadow: inset 0 0 0 2px rgb(26 26 26 / .25); }
.mw-s b { font-weight: 600; } .mw-s small { font-size: 10.5px; color: rgb(26 26 26 / .6); } .mw-s.hold small { color: var(--ink); font-weight: 600; }
.mw-kb { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mw-col { position: relative; display: grid; align-content: start; gap: 6px; min-height: 104px; padding: 8px; border-radius: 9px; background: rgb(26 26 26 / .04); }
.mw-col small { font: 600 9.5px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: rgb(26 26 26 / .6); }
.mw-card { display: block; min-height: 30px; padding: 8px 9px; border-radius: 7px; background: var(--white); box-shadow: 0 1px 3px rgb(26 26 26 / .12); font-weight: 500; }
.mw-card.slot { background: transparent; box-shadow: inset 0 0 0 1.5px rgb(187 98 222 / .35); }
.mw-card.mv { position: relative; z-index: 2; box-shadow: 0 0 0 1.5px var(--purple), 0 10px 20px -10px rgb(138 60 176 / .6); }
.mw-tiles { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.mw-tiles i { aspect-ratio: 1; border-radius: 3px; background: var(--purple); opacity: .85; }
.mw-tiles i:nth-child(3n) { opacity: .55; } .mw-tiles i:nth-child(5n) { opacity: 1; background: var(--purple-deep); }
.mw-offer { display: grid; gap: 4px; padding: 10px 12px; border-radius: 9px; background: rgb(26 26 26 / .03); }
.mw-offer small { font-size: 10.5px; color: rgb(26 26 26 / .6); } .mw-offer b { font: 400 16px/1.2 var(--font-display); }
.mw-acc { display: inline-flex; align-items: center; gap: 6px; justify-self: start; margin-top: 4px; padding: 5px 10px; border-radius: 999px; background: var(--purple); color: var(--white); font-weight: 600; font-size: 11px; }
.mw-day { position: absolute; right: 14px; bottom: 14px; display: grid; justify-items: center; padding: 8px 12px; border-radius: 10px; background: var(--ink); color: var(--purple); font: 400 18px/1 var(--font-display); }
.mw-day small { font: 600 9px/1.4 var(--font-body); color: rgb(247 245 238 / .7); text-transform: uppercase; letter-spacing: .08em; }
.mw-form { display: grid; gap: 6px; } .mw-form span { display: flex; justify-content: space-between; padding: 7px 9px; border-radius: 7px; box-shadow: inset 0 0 0 1px rgb(26 26 26 / .1); }
.mw-form small { color: rgb(26 26 26 / .6); font-size: 10.5px; } .mw-form b { font-weight: 500; }
.mw-b > .mw-p.pop { justify-self: end; }
.mw-cal { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: 16px repeat(3, 30px); gap: 4px; }
.mw-cal .h { text-align: center; font: 600 9.5px/16px var(--font-body); color: rgb(26 26 26 / .6); }
.mw-cal .ev { grid-column: var(--c); grid-row: calc(var(--r) + 1); display: grid; place-items: center; padding: 2px; border-radius: 6px; background: rgb(26 26 26 / .1); font-size: 9.5px; font-weight: 600; text-align: center; line-height: 1.15; }
.mw-cal .ev.hold { background: transparent; box-shadow: inset 0 0 0 1.5px rgb(26 26 26 / .3); text-decoration: line-through; }
.mw-doc { display: grid; gap: 7px; padding: 6px 2px; } .mw-doc i { display: block; height: 7px; border-radius: 4px; background: rgb(26 26 26 / .09); }
.mw-ramp { width: 100%; height: 86px; } .mw-ramp .g { stroke: rgb(26 26 26 / .07); stroke-width: 1; fill: none; } .mw-ramp .l { fill: none; stroke: rgb(26 26 26 / .25); stroke-width: 2; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; } .mw-ramp .now { fill: none; stroke: var(--ink); stroke-width: 3; vector-effect: non-scaling-stroke; }
.mw-axis { display: flex; justify-content: space-between; font-size: 10px; color: rgb(26 26 26 / .6); }
.mw-chips { display: flex; gap: 6px; } .mw-chips span { padding: 4px 9px; border-radius: 6px; background: rgb(187 98 222 / .12); color: var(--purple-deep); font-weight: 600; font-size: 10.5px; }
.mw-team { display: flex; gap: 6px; } .mw-team .ini { width: 34px; height: 34px; font-size: 10.5px; }
.mw-big { font: 400 17px/1.2 var(--font-display); }
.mw-kpi { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .mw-kpi span { padding: 6px 9px; border-radius: 8px; background: var(--ink); color: var(--white); }
.mw-kpi b { font: 400 16px/1.1 var(--font-display); color: var(--purple); margin-right: 5px; } .mw-kpi small { font-size: 10px; color: rgb(247 245 238 / .7); }
.dl-them .mw { filter: saturate(.6); }

/* motion: rows arrive in turn; the AntBox side does its one thing (fills, moves, stamps) */
@keyframes mw-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes mw-pop { from { opacity: 0; transform: scale(.85); } }
@keyframes mw-grow { from { transform: scaleX(0); } }
@keyframes mw-stamp { from { opacity: 0; transform: rotate(-8deg) scale(1.6); } }
@keyframes mw-mv { 0%, 20% { transform: none; } 100% { transform: translate(calc(100% + 24px), 0); } }
@keyframes mw-blink { 50% { opacity: .25; } }
.js-motion .dl-scene.on :is(.mw-r, .mw-s, .mw-form span, .mw-cal .ev, .mw-chips span, .mw-team .ini) { animation: mw-in .45s calc(var(--k, 0) * .16s + .15s) var(--ease-out) both; }
.js-motion .dl-scene.on .mw-tiles i { animation: mw-pop .3s calc(var(--k) * 45ms + .15s) var(--ease-out) both; }
.js-motion .dl-scene.on .mw-bar2 i { animation: mw-grow 1.1s .35s var(--ease-out) both; }
.js-motion .dl-scene.on .mw-stamp { animation: mw-stamp .45s .9s var(--ease-out) both; }
.js-motion .dl-scene.on :is(.mw-acc, .mw-day, .mw-p.pop, .mw-o.on) { animation: mw-pop .45s .8s var(--ease-out) both; }
.js-motion .dl-scene.on .mw-card.mv { animation: mw-mv 1s .7s var(--ease-in-out) both; }
.js-motion .dl-scene.on .mw-dots2 i { animation: mw-blink 1.2s calc(var(--i, 0) * .2s) infinite; }
.mw-dots2 i:nth-child(2) { --i: 1; } .mw-dots2 i:nth-child(3) { --i: 2; }
.js-motion .dl-scene.on .mw-ramp .now { stroke-dasharray: 80; animation: mw-ramp 1.4s .3s var(--ease-out) both; }
@keyframes mw-ramp { from { stroke-dashoffset: 80; } }
@media (max-width: 600px) { .mw { font-size: 10.5px; } .mw-b { padding: 8px 10px 10px; gap: 5px; } .mw-r { min-height: 24px; } .mw-col { min-height: 84px; } .mw-day { right: 10px; bottom: 10px; } }

/* ===== Revision 34: the hiring side has its own face =====
   A dark hero, the track record under the call to action, and a live shortlist over the network. */
.hero-proof, .hire-console { display: none; }
:root[data-aud="company"] .hero-proof { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; margin: 26px 0 0; padding: 20px 0 0; list-style: none; border-top: 1px solid rgb(247 245 238 / .12); }
.hero-proof li { padding: 0 22px; border-left: 1px solid rgb(247 245 238 / .12); } .hero-proof li:first-child { padding-left: 0; border-left: 0; }
.hero-proof b { display: block; font: 400 clamp(20px, 1.9vw, 28px)/1.1 var(--font-display); color: var(--white); }
.hero-proof small { display: block; margin-top: 4px; max-width: 120px; font-size: 11.5px; line-height: 1.3; color: rgb(247 245 238 / .66); }
:root[data-aud="company"] .hero .switch { background: rgb(247 245 238 / .07); box-shadow: inset 0 0 0 1px rgb(247 245 238 / .14); }
:root[data-aud="company"] .hero .switch button[aria-pressed="false"] { color: rgb(247 245 238 / .72); }
:root[data-aud="company"] .hero-badge { background: rgb(247 245 238 / .07); box-shadow: inset 0 0 0 1px rgb(247 245 238 / .14); color: rgb(247 245 238 / .78); }
:root[data-aud="company"] .hero-fomo { color: rgb(247 245 238 / .7); }
@media (min-width: 900px) {
  :root[data-aud="company"] .hire-console { display: block; position: absolute; left: -4%; bottom: 4%; z-index: 3; width: 300px; animation: hc-in .8s 1.2s var(--ease-out) both; }
  .hire-console .mw { width: 100%; box-shadow: 0 0 0 1px rgb(247 245 238 / .12), 0 30px 60px -24px rgb(26 26 26 / .9), 0 20px 50px -30px rgb(187 98 222 / .6); }
  .hire-console .mw-r small:not(.mw-sc) { margin-left: 4px; }
  .hire-console .mw-bar2 { max-width: 54px; min-width: 40px; margin-left: auto; }
  .hire-console .mw-foot { justify-content: space-between; } .hire-console .mw-acc { margin: 0; padding: 4px 8px; font-size: 10px; }
  :root[data-aud="company"] .hero .legend { display: none; }
}
@keyframes hc-in { from { opacity: 0; transform: translateY(16px); } }
@media (max-width: 899px) { :root[data-aud="company"] .hero-proof { grid-template-columns: repeat(2, auto); row-gap: 16px; } .hero-proof li:nth-child(3) { padding-left: 0; border-left: 0; } }
.mw, .mw b, .mw .mw-big { color: var(--ink); }
:root[data-aud="company"] .hero .hero-badge { background: rgb(247 245 238 / .07) !important; box-shadow: inset 0 0 0 1px rgb(247 245 238 / .16) !important; color: rgb(247 245 238 / .8) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
:root[data-aud="company"] .hero-fomo { display: none; }
:root[data-aud="company"] .hero-proof { margin-top: 30px; padding-top: 18px; }
@media (min-width: 900px) {
  :root[data-aud="company"] .hire-console { left: -15%; bottom: 17%; width: 284px; }
  :root[data-aud="company"] .hero-title { font-size: clamp(64px, 7.6vw, 118px); }
}
:root[data-aud="company"] .form-card { background: linear-gradient(155deg, rgb(247 245 238 / .1), rgb(247 245 238 / .03)); box-shadow: inset 0 0 0 1.5px rgb(187 98 222 / .5), 0 40px 80px -40px rgb(26 26 26 / .8); }
:root[data-aud="company"] .form-card .fc-name, :root[data-aud="company"] .form-card .fc-work { color: rgb(247 245 238 / .85) !important; }
:root[data-aud="company"] .form-cap { background: rgb(26 26 26 / .82) !important; box-shadow: inset 0 0 0 1px rgb(247 245 238 / .14) !important; color: rgb(247 245 238 / .82) !important; }
:root[data-aud="company"] .form-cap b { color: var(--purple); }

/* ===== Revision 35: the three-body problem, redrawn =====
   Three lit worlds. Without AntBox they drift apart, grey, linked by broken lines around an empty
   centre. With AntBox a glowing core appears, the worlds lock into one orbit, beams of light run
   from the core to each, and what each one gets replaces what it lacks. */
.tbx { position: absolute; inset: 64px 0 64px; container-type: size; }
.tbx-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tbx-svg * { vector-effect: non-scaling-stroke; fill: none; }
.tbx-orbit { stroke: rgb(247 245 238 / .12); stroke-width: 1; stroke-dasharray: 2 5; opacity: 0; transition: opacity .9s var(--ease-out); }
.tbx-brk { stroke: rgb(247 245 238 / .28); stroke-width: 1.2; stroke-dasharray: 6 10; transition: opacity .6s var(--ease-out); animation: tbx-flick 2.6s steps(2) infinite; }
.tbx-brk:nth-of-type(2) { animation-delay: .7s; } .tbx-brk:nth-of-type(3) { animation-delay: 1.4s; }
@keyframes tbx-flick { 50% { opacity: .25; } }
.tbx-tri { stroke: rgb(187 98 222 / .35); stroke-width: 1; opacity: 0; transition: opacity .9s .5s var(--ease-out); }
.tbx-beam { stroke: var(--purple); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 3 9; opacity: 0; transition: opacity .7s .35s var(--ease-out); filter: drop-shadow(0 0 4px rgb(187 98 222 / .9)); }
.is-order .tbx-orbit, .is-order .tbx-tri { opacity: 1; }
.is-order .tbx-beam { opacity: 1; animation: tbx-flow 1.2s linear infinite; }
.is-order .tbx-brk { opacity: 0; animation: none; }
@keyframes tbx-flow { to { stroke-dashoffset: -24; } }

.tbx-void { position: absolute; left: 50%; top: 52%; width: 130px; height: 130px; translate: -50% -50%; display: grid; place-items: center; border-radius: 50%; border: 1.5px dashed rgb(247 245 238 / .22); font: 500 11px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: rgb(247 245 238 / .5); transition: opacity .5s, transform .7s var(--ease-out); }
.is-order .tbx-void { opacity: 0; transform: scale(.6); }
.tbx-core { position: absolute; left: 50%; top: 52%; width: 92px; height: 92px; translate: -50% -50%; opacity: 0; transform: scale(.4); transition: opacity .6s var(--ease-out), transform .9s var(--ease-out); }
.tbx-core::before { content: ""; position: absolute; inset: -110%; border-radius: 50%; background: radial-gradient(closest-side, rgb(187 98 222 / .55), rgb(138 60 176 / .18) 50%, transparent 72%); }
.tbx-core span { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(120% 120% at 30% 25%, var(--white), var(--beige)); box-shadow: 0 0 0 6px rgb(187 98 222 / .25), 0 0 60px 10px rgb(187 98 222 / .55); }
.tbx-core img { width: 46px; height: 46px; }
.tbx-core i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgb(187 98 222 / .7); }
.is-order .tbx-core { opacity: 1; transform: none; }
.is-order .tbx-core i { animation: tbx-ring 2.4s var(--ease-out) infinite; } .is-order .tbx-core i + i { animation-delay: 1.2s; }
@keyframes tbx-ring { from { transform: scale(1); opacity: .9; } to { transform: scale(2.4); opacity: 0; } }

.tbx-w { --x: var(--cx); --y: var(--cy); position: absolute; left: 0; top: 0; display: grid; justify-items: center; gap: 8px; text-align: center;
  transform: translate(calc(var(--x) * 1cqw - 50%), calc(var(--y) * 1cqh - 42px)); transition: transform 1.3s var(--ease-in-out); }
.is-order .tbx-w { --x: var(--ox); --y: var(--oy); }
.tbx-orb { position: relative; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; color: var(--white);
  background: radial-gradient(110% 110% at 30% 22%, rgb(255 255 255 / .55), transparent 38%), radial-gradient(120% 120% at 35% 30%, var(--c1), var(--c2));
  box-shadow: inset -8px -10px 20px rgb(26 26 26 / .45), 0 0 0 1px rgb(255 255 255 / .12), 0 14px 40px -10px var(--c3);
  filter: grayscale(.85) brightness(.75); transition: filter .9s var(--ease-out), box-shadow .9s; animation: tbx-drift var(--d, 7s) var(--ease-in-out) infinite alternate; }
.tbx-orb svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tbx-w.w1 { --c1: var(--purple); --c2: var(--purple-deep); --c3: rgb(187 98 222 / .8); --d: 6.5s; }
.tbx-w.w2 { --c1: var(--white); --c2: rgb(247 245 238 / .55); --c3: rgb(247 245 238 / .5); --d: 8s; } .tbx-w.w2 .tbx-orb { color: var(--ink); }
.tbx-w.w3 { --c1: var(--purple-deep); --c2: var(--ink); --c3: rgb(138 60 176 / .9); --d: 7.2s; }
@keyframes tbx-drift { from { transform: translate(-10px, 6px) rotate(-3deg); } to { transform: translate(12px, -8px) rotate(3deg); } }
.is-order .tbx-orb { filter: none; animation: tbx-float 4s var(--ease-in-out) infinite alternate; box-shadow: inset -8px -10px 20px rgb(26 26 26 / .35), 0 0 0 1px rgb(255 255 255 / .2), 0 0 0 8px rgb(187 98 222 / .12), 0 18px 50px -8px var(--c3); }
@keyframes tbx-float { from { transform: translateY(-3px); } to { transform: translateY(3px); } }
.tbx-w b { font: 600 13px/1 var(--font-body); color: var(--white); letter-spacing: .01em; }
.tbx-chip { grid-area: 3 / 1; padding: 6px 11px; border-radius: 999px; font: 500 11.5px/1 var(--font-body); white-space: nowrap; transition: opacity .5s var(--ease-out), transform .6s var(--ease-out); }
.tbx-chip.need { background: rgb(247 245 238 / .08); box-shadow: inset 0 0 0 1px rgb(247 245 238 / .18); color: rgb(247 245 238 / .78); }
.tbx-chip.get { background: var(--purple); color: var(--ink); font-weight: 600; opacity: 0; transform: translateY(6px) scale(.95); box-shadow: 0 8px 24px -8px rgb(187 98 222 / .9); }
.is-order .tbx-chip.need { opacity: 0; transform: translateY(-6px); }
.is-order .tbx-chip.get { opacity: 1; transform: none; transition-delay: .7s; }
.tb3 { background: radial-gradient(60% 70% at 50% 52%, rgb(138 60 176 / .32), transparent 70%), radial-gradient(1px 1px at 12% 18%, rgb(247 245 238 / .7), transparent), radial-gradient(1px 1px at 72% 12%, rgb(247 245 238 / .6), transparent), radial-gradient(1.5px 1.5px at 88% 64%, rgb(247 245 238 / .6), transparent), radial-gradient(1px 1px at 24% 86%, rgb(247 245 238 / .5), transparent), radial-gradient(1px 1px at 58% 92%, rgb(247 245 238 / .5), transparent), radial-gradient(1px 1px at 40% 8%, rgb(247 245 238 / .6), transparent), var(--ink) !important; }
.tb3.is-order { background: radial-gradient(45% 55% at 50% 52%, rgb(187 98 222 / .38), transparent 70%), radial-gradient(1px 1px at 12% 18%, rgb(247 245 238 / .7), transparent), radial-gradient(1px 1px at 72% 12%, rgb(247 245 238 / .6), transparent), radial-gradient(1.5px 1.5px at 88% 64%, rgb(247 245 238 / .6), transparent), radial-gradient(1px 1px at 24% 86%, rgb(247 245 238 / .5), transparent), radial-gradient(1px 1px at 58% 92%, rgb(247 245 238 / .5), transparent), radial-gradient(1px 1px at 40% 8%, rgb(247 245 238 / .6), transparent), var(--ink) !important; }
@media (max-width: 760px) { .tbx { inset: 60px 0 56px; } .tbx-orb { width: 62px; height: 62px; } .tbx-orb svg { width: 26px; height: 26px; } .tbx-chip { font-size: 10.5px; padding: 5px 9px; } .tbx-core { width: 70px; height: 70px; } .tbx-core img { width: 36px; height: 36px; } .tbx-void { width: 96px; height: 96px; font-size: 9.5px; } }
@media (max-width: 760px) { .tb3 { aspect-ratio: .78 !important; max-height: none; } .tbx { inset: 66px 6px 64px; } .tbx-w { transform: translate(clamp(52px, calc(var(--x) * 1cqw), calc(100cqw - 52px)), calc(var(--y) * 1cqh - 32px)) translateX(-50%); } }
@media (max-width: 760px) { .tbx-w { transform: translate(clamp(66px, calc(var(--x) * 1cqw), calc(100cqw - 70px)), calc(var(--y) * 1cqh - 34px)) translateX(-50%); } .tbx { inset: 70px 6px 78px; } .tb3-cap { font-size: .82rem; } }

/* ===== Revision 36: the people (and the customers) as a living network ===== */
.nw { position: relative; display: grid; grid-template-columns: minmax(320px, 420px) 1fr; gap: 0; align-items: center; margin-top: clamp(36px, 5vw, 64px); height: clamp(560px, 46vw, 680px); }
.nw-field { position: relative; height: 100%; }
.nw-cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.nw-nodes { position: absolute; inset: 0; }
.nw-n { --d: 60px; position: absolute; left: 0; top: 0; width: var(--d); height: var(--d); padding: 0; border: 0; border-radius: 50%; background: var(--ink); cursor: pointer; will-change: transform;
  box-shadow: 0 0 0 1.5px rgb(247 245 238 / .22), 0 12px 30px -10px rgb(26 26 26 / .9); transition: box-shadow .4s var(--ease-out); }
.nw-n img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 30%; filter: saturate(.85) brightness(.9); transition: filter .4s, transform .5s var(--ease-out); }
.nw-n::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid var(--purple); opacity: 0; transform: scale(.85); transition: opacity .4s, transform .5s var(--ease-out); }
.nw-n.on { z-index: 3; box-shadow: 0 0 0 2px var(--purple), 0 0 40px 6px rgb(187 98 222 / .55); }
.nw-n.on::after { opacity: 1; transform: none; animation: nw-ring 2.2s var(--ease-out) infinite; }
@keyframes nw-ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
.nw-n.on img, .nw-n:hover img { filter: none; transform: scale(1.06); }
.nw-n:focus-visible { outline: 2px solid var(--purple); outline-offset: 4px; }
.nw-tag { position: absolute; left: 50%; top: calc(100% + 8px); translate: -50% 0; padding: 4px 9px; border-radius: 999px; background: rgb(26 26 26 / .9); box-shadow: inset 0 0 0 1px rgb(247 245 238 / .16); color: var(--beige); font: 500 11px/1 var(--font-body); white-space: nowrap; opacity: 0; transform: translateY(-4px); transition: opacity .3s, transform .4s var(--ease-out); pointer-events: none; }
.nw-n.on .nw-tag, .nw-n:hover .nw-tag { opacity: 1; transform: none; }
.nw-co .nw-n { background: radial-gradient(110% 110% at 30% 22%, rgb(255 255 255 / .35), transparent 40%), radial-gradient(120% 120% at 35% 30%, var(--purple), var(--purple-deep)); }
.nw-co .nw-n:nth-child(3n) { background: radial-gradient(110% 110% at 30% 22%, rgb(255 255 255 / .3), transparent 40%), radial-gradient(120% 120% at 35% 30%, var(--purple-deep), var(--ink)); }
.nw-co .nw-n:nth-child(4n) { background: radial-gradient(110% 110% at 30% 22%, rgb(255 255 255 / .6), transparent 40%), radial-gradient(120% 120% at 35% 30%, var(--white), var(--beige)); }
.nw-g { display: grid; place-items: center; width: 100%; height: 100%; font: 400 calc(var(--d) * .3)/1 var(--font-display); color: var(--white); letter-spacing: -.02em; }
.nw-co .nw-n:nth-child(4n) .nw-g { color: var(--ink); }

.nw-card { position: relative; z-index: 2; margin: 0; padding: 0; border-radius: 26px; overflow: hidden; background: linear-gradient(160deg, rgb(247 245 238 / .1), rgb(247 245 238 / .03)), var(--ink);
  box-shadow: inset 0 0 0 1px rgb(247 245 238 / .14), inset 0 1px 0 rgb(247 245 238 / .18), 0 40px 90px -40px rgb(26 26 26 / .95), 0 30px 80px -50px rgb(187 98 222 / .7); }
.nwc-img { position: relative; aspect-ratio: 16 / 11; overflow: hidden; }
.nwc-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; opacity: 0; transition: opacity .6s var(--ease-out); }
.nwc-img img.top { opacity: 1; }
.nwc-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgb(26 26 26 / .85)); }
.nw-card figcaption { display: grid; gap: 8px; padding: 20px 24px 24px; }
.nwc-n { font: 600 11px/1 var(--font-body); letter-spacing: .14em; color: var(--purple); }
.nwc-q { margin: 0; font: 400 clamp(17px, 1.45vw, 21px)/1.4 var(--font-display); color: var(--white); }
.nwc-name { font-weight: 600; color: var(--white); } .nwc-role { color: rgb(247 245 238 / .66); font-size: 12.5px; line-height: 1.4; }
.nw:not(.nw-co) .nwc-n { position: absolute; left: 22px; top: 18px; z-index: 2; padding: 5px 9px; border-radius: 999px; background: rgb(26 26 26 / .7); }
.nw-co .nw-card figcaption { padding: 30px 30px 28px; gap: 10px; }
.nwc-tag { justify-self: start; padding: 5px 10px; border-radius: 999px; background: rgb(187 98 222 / .16); color: var(--purple); font: 600 11px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
.nwc-k { font: 400 clamp(46px, 5vw, 68px)/1 var(--font-display); letter-spacing: -.03em; background: linear-gradient(120deg, var(--white), var(--purple)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 4px; }
.nwc-t { font: 400 21px/1.25 var(--font-display); color: var(--white); }
.nwc-d { margin: 0; font-size: 14px; line-height: 1.55; color: rgb(247 245 238 / .72); }
.nw-co .nwc-n { margin-top: 8px; color: rgb(247 245 238 / .5); }
.js-motion .nw-card.in figcaption > *, .js-motion .nw-card.in .nwc-n { animation: nw-in .55s var(--ease-out) both; }
.js-motion .nw-card.in figcaption > :nth-child(2) { animation-delay: .06s; } .js-motion .nw-card.in figcaption > :nth-child(3) { animation-delay: .12s; } .js-motion .nw-card.in figcaption > :nth-child(4) { animation-delay: .18s; }
@keyframes nw-in { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 760px) {
  .nw { grid-template-columns: 1fr; height: auto; }
  .nw-field { order: -1; height: 380px; }
  .nw-card { margin-top: 8px; }
  .nwc-img { aspect-ratio: 16 / 10; }
}
.nw-card { text-align: left; }
.nw-co .nw-tag { opacity: .7; transform: none; background: rgb(26 26 26 / .75); }
.nw-co .nw-n.on .nw-tag { opacity: 1; background: var(--purple); color: var(--ink); box-shadow: none; font-weight: 600; }
.nw-g { font-size: calc(var(--d) * .27); }

/* ===== Revision 37: the hiring side is a dark page =====
   No white page showing between or beside the black sections: the page itself is ink, with the
   same purple light, and the light sections sit on it as cream cards. */
:root[data-aud="company"], :root[data-aud="company"] body { background: var(--ink); }
:root[data-aud="company"]:not([data-theme="dark"]) body::before {
  background:
    radial-gradient(42% 38% at 88% 8%, rgb(138 60 176 / .38), transparent 70%),
    radial-gradient(38% 34% at 6% 40%, rgb(187 98 222 / .16), transparent 70%),
    radial-gradient(50% 40% at 30% 96%, rgb(138 60 176 / .28), transparent 70%),
    var(--ink);
}
:root[data-aud="company"] main .band-light:not(.hero) {
  position: relative; margin-inline: var(--frame); border-radius: 40px; color: var(--ink);
  background: radial-gradient(60% 50% at 85% 0%, rgb(187 98 222 / .14), transparent 70%), radial-gradient(50% 50% at 0% 100%, rgb(187 98 222 / .1), transparent 70%), var(--beige);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .8), 0 40px 90px -50px rgb(26 26 26 / .9);
}
:root[data-aud="company"] .bands i { left: 0 !important; right: 0 !important; border-radius: 0; clip-path: none !important; }
:root[data-aud="company"] .chapter { background: rgb(26 26 26 / .85); color: rgb(247 245 238 / .7); box-shadow: inset 0 0 0 1px rgb(247 245 238 / .14); }
:root[data-aud="company"] .footer { color: var(--beige); }
@media (max-width: 760px) { :root[data-aud="company"] main .band-light:not(.hero) { border-radius: 28px; } .nw-co .nw-n:not(.on) .nw-tag { opacity: 0; } }

/* ===== Revision 38: Day 0 comparison you can drive =====
   No pinned scrolling. A bar on top of the comparison: play/pause, five steps you can tap (the
   current one fills as it plays), previous and next. Arrow keys and swipes work too. */
.duel { display: flex; flex-direction: column; }
.duel .dl-bar { order: -1; grid-template-columns: auto 1fr auto; margin: 0 0 18px; padding: 8px 8px 8px 8px; }
.duel .dl-play { display: grid !important; }
.duel .dl-steps button { padding: 8px 6px 6px; border-radius: 10px; transition: background .2s, color .2s; }
.duel .dl-steps button:hover { background: rgb(26 26 26 / .04); }
.duel .dl-steps button.on { background: rgb(187 98 222 / .1); color: var(--purple-deep); }
.duel .dl-steps button.on i::after, .duel .dl-steps button.done i::after { background: var(--purple-deep); }
.dl-nav { display: flex; gap: 6px; }
.dl-nav button { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: rgb(26 26 26 / .06); color: var(--ink); cursor: pointer; transition: background .2s, transform .2s; }
.dl-nav button:hover { background: rgb(26 26 26 / .12); } .dl-nav button:active { transform: scale(.94); }
.dl-nav svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dl-nav button:focus-visible { outline: 2px solid var(--purple-deep); outline-offset: 2px; }
.duel .dl-sides { touch-action: pan-y; }
#path .path-pin { min-height: 0 !important; }
@media (max-width: 600px) { .duel .dl-bar { grid-template-columns: auto 1fr; row-gap: 8px; border-radius: 22px; } .dl-nav { grid-column: 1 / -1; justify-content: space-between; } .dl-nav button { width: 100%; height: 36px; border-radius: 12px; } .duel .dl-steps button span { font-size: .52rem; } }

/* ===== Revision 39: the three-body problem as three circles that finally overlap =====
   Built by tools/threebody.py. The circles blend where they meet (screen), so every overlap lights
   up by itself; AntBox lands in the middle, where all three meet. */
.tbv { position: absolute; inset: 64px 0 60px; display: grid; place-items: center; }
.tbv-box { position: relative; height: 100%; max-width: 100%; aspect-ratio: 600 / 520; container-type: inline-size; }
.tbv-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tbv-c { mix-blend-mode: screen; transform: translate(var(--cx), var(--cy)) scale(.66); opacity: .62; transition: transform 1.4s var(--ease-in-out), opacity 1s var(--ease-out); }
.tbv-c .rim { fill: none; stroke: rgb(247 245 238 / .35); stroke-width: 1.5; stroke-dasharray: 4 6; transition: stroke-dasharray .8s; }
.tbv-d { animation: tbv-drift 6s var(--ease-in-out) infinite alternate; }
.c-u .tbv-d { animation-duration: 7.4s; animation-delay: -2s; } .c-c .tbv-d { animation-duration: 6.8s; animation-delay: -4s; }
@keyframes tbv-drift { from { transform: translate(-9px, 6px); } to { transform: translate(10px, -7px); } }
.is-order .tbv-c { transform: translate(var(--ox), var(--oy)) scale(1); opacity: 1; }
.is-order .tbv-c .rim { stroke-dasharray: none; stroke: rgb(247 245 238 / .28); }
.is-order .tbv-d { animation: tbv-breathe 4s var(--ease-in-out) infinite alternate; }
@keyframes tbv-breathe { from { transform: scale(.985); } to { transform: scale(1.015); } }
.tbv-gap { fill: none; stroke: rgb(247 245 238 / .3); stroke-width: 1.5; stroke-dasharray: 3 9; animation: tbx-flick 2.4s steps(2) infinite; transition: opacity .5s; }
.is-order .tbv-gap { opacity: 0; animation: none; }
.tbv-halo { fill: rgb(187 98 222 / .45); opacity: 0; transform-origin: 300px 287px; transform: scale(.3); transition: opacity .8s .6s, transform 1.2s .6s var(--ease-out); }
.is-order .tbv-halo { opacity: 1; transform: scale(1); animation: tbv-halo 2.6s 1.8s var(--ease-in-out) infinite alternate; }
@keyframes tbv-halo { to { transform: scale(1.25); opacity: .55; } }
.tbv-core { position: absolute; left: 50%; top: 55.2%; width: 15cqw; height: 15cqw; max-width: 74px; max-height: 74px; translate: -50% -50%; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(120% 120% at 30% 25%, var(--white), var(--beige)); box-shadow: 0 0 0 5px rgb(187 98 222 / .35), 0 0 50px 12px rgb(187 98 222 / .6); opacity: 0; transform: scale(.3); transition: opacity .6s .9s, transform .8s .9s var(--ease-out); }
.tbv-core img { width: 55%; height: auto; }
.is-order .tbv-core { opacity: 1; transform: none; }
.tbv-n { position: absolute; left: calc(var(--cx) * 1%); top: calc(var(--cy) * 1%); translate: -50% -50%; display: grid; justify-items: center; gap: .6cqw; text-align: center; color: var(--white); transition: left 1.4s var(--ease-in-out), top 1.4s var(--ease-in-out); }
.tbv-n svg { width: 5cqw; height: 5cqw; max-width: 28px; max-height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tbv-n b { font: 600 clamp(12px, 2.6cqw, 16px)/1 var(--font-body); }
.tbv-n small { font-size: clamp(10px, 2cqw, 12.5px); color: rgb(247 245 238 / .72); transition: opacity .4s; }
.n-u { color: var(--white); }
.is-order .tbv-n { left: calc(var(--ox) * 1%); top: calc(var(--oy) * 1%); }
.is-order .tbv-n small { opacity: 0; }
.tbv-p { position: absolute; left: calc(var(--cx) * 1%); top: calc(var(--cy) * 1%); translate: -50% -50%; display: grid; place-items: center; transition: left 1.4s var(--ease-in-out), top 1.4s var(--ease-in-out); }
.tbv-p em { grid-area: 1 / 1; padding: .9cqw 1.8cqw; border-radius: 999px; font: 500 clamp(10px, 2.1cqw, 13px)/1 var(--font-body); font-style: normal; white-space: nowrap; transition: opacity .5s, transform .6s var(--ease-out); }
.tbv-p .gap { background: rgb(26 26 26 / .85); box-shadow: inset 0 0 0 1px rgb(247 245 238 / .2); color: rgb(247 245 238 / .8); }
.tbv-p .lap { background: var(--white); color: var(--purple-deep); font-weight: 600; box-shadow: 0 8px 30px -6px rgb(187 98 222 / .9); opacity: 0; transform: scale(.85); }
.is-order .tbv-p { left: calc(var(--ox) * 1%); top: calc(var(--oy) * 1%); }
.is-order .tbv-p .gap { opacity: 0; transform: scale(.9); }
.is-order .tbv-p .lap { opacity: 1; transform: none; transition-delay: 1s; }
.tb3 .tbx { display: none; }
@media (max-width: 760px) { .tbv { inset: 66px 4px 70px; } }
.tbv-n b, .tbv-n svg { color: var(--white) !important; text-shadow: 0 1px 12px rgb(26 26 26 / .6); }
.tbv-n small { color: rgb(247 245 238 / .8) !important; }
.tbv-c { opacity: .82; }
.is-order .tbv-c { opacity: 1; }
@media (max-width: 760px) { .tbv-box { width: 100%; height: auto; max-height: 100%; } }
@media (max-width: 899px) { .duel .dl-bar { position: sticky; top: 72px; z-index: 5; box-shadow: 0 14px 30px -18px rgb(26 26 26 / .45); } }

/* ===== Revision 40: the Venn, redrawn crisp =====
   Rings, not blended blobs. Apart: dashed, dim, drifting, with each gap named. Together: the rings
   turn solid, each overlap fills in as its real lens shape one after another, the centre lights
   last, and a small AntBox mark sits in it. */
.tbv-c { mix-blend-mode: normal !important; opacity: 1 !important; transform: translate(var(--cx), var(--cy)) scale(.62); }
.is-order .tbv-c { transform: translate(var(--ox), var(--oy)) scale(1); }
.tbv-c .fill { fill: rgb(247 245 238 / .035); transition: fill .8s; }
.c-s .fill { fill: rgb(187 98 222 / .07); } .c-c .fill { fill: rgb(138 60 176 / .08); }
.tbv-c .rim { fill: none; stroke-width: 1.6; stroke-dasharray: 5 7; stroke: rgb(247 245 238 / .4) !important; transition: stroke .8s, stroke-dasharray .8s; }
.is-order .tbv-c .rim { stroke-dasharray: 1000 0; }
.is-order .c-s .rim { stroke: rgb(187 98 222 / .9) !important; } .is-order .c-u .rim { stroke: rgb(247 245 238 / .75) !important; } .is-order .c-c .rim { stroke: rgb(138 60 176 / 1) !important; }
.is-order .c-s .fill { fill: rgb(187 98 222 / .1); }
.tbv-l circle { fill: url(#lg); }
.tbv-l.l-all circle { fill: url(#la); }
.tbv-l { opacity: 0; transition: opacity .7s var(--ease-out); }
.is-order .tbv-l { opacity: 1; }
.is-order .l-su { transition-delay: 1.1s; } .is-order .l-sc { transition-delay: 1.35s; } .is-order .l-uc { transition-delay: 1.6s; } .is-order .l-all { transition-delay: 1.95s; }
.is-order .l-all { animation: tbv-glow 2.4s 2.6s var(--ease-in-out) infinite alternate; }
@keyframes tbv-glow { to { opacity: .78; } }
.tbv-halo { display: none; }
.tbv-core { width: 9.5cqw; height: 9.5cqw; max-width: 50px; max-height: 50px; top: 56.5%; background: var(--white); box-shadow: 0 0 0 3px rgb(26 26 26 / .25), 0 10px 30px -6px rgb(26 26 26 / .7); transition: opacity .5s 2.2s, transform .6s 2.2s var(--ease-out); }
.tbv-p .lap { background: rgb(26 26 26 / .78); color: var(--white); box-shadow: inset 0 0 0 1px rgb(247 245 238 / .25); font-weight: 600; }
.is-order .p-su .lap { transition-delay: 1.3s; } .is-order .p-sc .lap { transition-delay: 1.55s; } .is-order .p-uc .lap { transition-delay: 1.8s; }
.tbv-n small { font-size: clamp(10px, 1.9cqw, 12px); }

/* ===== Revision 41: hiring-only sections ===== */
.tz-head { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: end; }
.tz-head .sec-title { margin: 8px 0 0; }
.tz-head .sec-lede { margin: 0; }
.tz-k, .wh-k { margin: 0; font: 600 12px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--purple-deep); }
.tz-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: clamp(32px, 4vw, 52px); }
.tz-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px 20px 20px; border-radius: 22px; background: var(--white); box-shadow: 0 0 0 1px rgb(26 26 26 / .07), 0 20px 40px -30px rgb(26 26 26 / .35); transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.tz-card:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgb(187 98 222 / .45), 0 30px 50px -28px rgb(138 60 176 / .5); }
.tz-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: linear-gradient(140deg, var(--purple), var(--purple-deep)); color: var(--white); box-shadow: inset 0 1px 0 rgb(255 255 255 / .3), 0 8px 18px -8px rgb(138 60 176 / .8); }
.tz-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tz-card h3 { margin: 6px 0 0; font: 400 20px/1.2 var(--font-display); color: var(--ink); }
.tz-card p { margin: 0; font-size: 14px; line-height: 1.5; color: rgb(26 26 26 / .7); flex: 1; }
.tz-tools { display: flex; flex-wrap: wrap; gap: 5px; } .tz-tools span { padding: 4px 8px; border-radius: 6px; background: rgb(26 26 26 / .05); font-size: 11.5px; color: rgb(26 26 26 / .72); }
.tz-proof { display: flex; align-items: center; gap: 7px; padding-top: 12px; border-top: 1px solid rgb(26 26 26 / .07); font-size: 12.5px; font-weight: 600; color: var(--purple-deep); }
.tz-proof .ck { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; flex: none; }
.tz-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 28px; padding: 18px 18px 18px 26px; border-radius: 999px; background: var(--white); box-shadow: 0 0 0 1px rgb(26 26 26 / .07); }
.tz-foot p { margin: 0; color: rgb(26 26 26 / .72); }
.js-motion .tz-card { opacity: 0; transform: translateY(18px); transition: opacity .6s calc(var(--k) * 60ms) var(--ease-out), transform .7s calc(var(--k) * 60ms) var(--ease-out), box-shadow .35s; }
.js-motion .tz.seen .tz-card { opacity: 1; transform: none; }
.js-motion .tz.seen .tz-card:hover { transform: translateY(-4px); }

.wh-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; margin-top: clamp(32px, 4vw, 52px); align-items: stretch; }
.wh-card { position: relative; margin: 0; padding: 26px 26px 22px; border-radius: 28px; background: linear-gradient(160deg, rgb(247 245 238 / .09), rgb(247 245 238 / .02)), var(--ink); box-shadow: inset 0 0 0 1px rgb(247 245 238 / .12), 0 40px 80px -50px rgb(187 98 222 / .6); }
.wh-card figcaption { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--white); }
.wh-card figcaption b { font: 400 20px/1.2 var(--font-display); }
.wh-key { display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgb(247 245 238 / .7); }
.wh-key i { width: 18px; height: 3px; border-radius: 3px; margin-left: 8px; } .wh-key i.hi { background: var(--purple); } .wh-key i.lo { background: rgb(247 245 238 / .45); }
.wh-chart { display: block; width: 100%; height: auto; margin-top: 18px; overflow: visible; }
.wh-chart .g { stroke: rgb(247 245 238 / .06); fill: none; } .wh-chart .ax { stroke: rgb(247 245 238 / .2); fill: none; }
.wh-chart path.hi { fill: none; stroke: var(--purple); stroke-width: 3.5; stroke-linecap: round; filter: drop-shadow(0 0 8px rgb(187 98 222 / .8)); stroke-dasharray: 600; stroke-dashoffset: 600; }
.wh-chart path.lo { fill: none; stroke: rgb(247 245 238 / .5); stroke-width: 2.5; stroke-dasharray: 6 7; }
.wh-chart circle.hi { fill: var(--purple); } .wh-chart circle.lo { fill: rgb(247 245 238 / .7); }
.wh.seen .wh-chart path.hi { animation: wh-draw 1.8s .3s var(--ease-out) forwards; }
@keyframes wh-draw { to { stroke-dashoffset: 0; } }
.wh-x { display: flex; justify-content: space-between; padding-left: 7.5%; margin-top: 6px; font-size: 11.5px; color: rgb(247 245 238 / .6); }
.wh-tag { position: absolute; padding: 6px 11px; border-radius: 999px; font: 600 12px/1 var(--font-body); }
.wh-tag.hi { left: 13%; top: 23%; background: var(--purple); color: var(--ink); box-shadow: 0 10px 24px -8px rgb(187 98 222 / .9); }
.wh-tag.lo { left: 55%; top: 66%; background: rgb(26 26 26 / .9); color: rgb(247 245 238 / .85); box-shadow: inset 0 0 0 1px rgb(247 245 238 / .2); }
.wh-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wh-col { display: grid; gap: 10px; align-content: start; padding: 22px; border-radius: 26px; background: linear-gradient(160deg, rgb(247 245 238 / .07), rgb(247 245 238 / .02)), var(--ink); box-shadow: inset 0 0 0 1px rgb(247 245 238 / .1); }
.wh-col .wh-k { color: var(--purple); margin-bottom: 4px; }
.wh-s { display: grid; gap: 4px; padding: 12px 0; border-top: 1px solid rgb(247 245 238 / .08); }
.wh-s b { font: 400 26px/1.1 var(--font-display); color: var(--white); }
.wh-s span { font-size: 13.5px; line-height: 1.5; color: rgb(247 245 238 / .7); }
.wh-cta { display: flex; justify-content: center; margin-top: 32px; }
@media (max-width: 1080px) { .tz-grid { grid-template-columns: repeat(2, 1fr); } .wh-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .tz-head { grid-template-columns: 1fr; } .tz-grid { grid-template-columns: 1fr; } .tz-foot { flex-direction: column; align-items: flex-start; border-radius: 22px; } .wh-cols { grid-template-columns: 1fr; } .wh-tag { font-size: 10.5px; } }


/* ================= Revision 28: clarity pass (grid, gate, journey, hiring) ================= */
/* the question at the start: two drawn ideas in AntBox navy and purple, no countdown */
.go-art.ga-s, .go-art.ga-h { background: #F7F5EE; }
.ga-svg { width: min(100%, 236px); height: auto; overflow: visible; }
.ga-faint { fill: none; stroke: rgb(0 33 71 / .24); stroke-width: 1.5; stroke-linecap: round; }
.ga-leaf { fill: rgb(0 33 71 / .38); }
.ga-trail { fill: none; stroke: #002147; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; }
.ga-n { fill: #F7F5EE; stroke: #002147; stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.ga-goal, .ga-hub { fill: #8E43AC; }
.ga-ring { fill: none; stroke: #8E43AC; stroke-width: 1.5; transform-box: fill-box; transform-origin: center; opacity: 0; }
.gate.on .ga-trail { animation: ga-draw 1.4s .2s var(--ease-out) both; }
.gate.on .ga-n { animation: ga-pop .45s var(--ease-out) both; animation-delay: calc(var(--d) + .2s); }
.gate.on .ga-ring { animation: ga-ring 2.6s 1.4s ease-out infinite; }
.gate.on .ga-h .ga-w { animation: ga-pop .45s var(--ease-out) both, ga-fill 3.6s ease-in-out infinite; animation-delay: calc(var(--d) + .2s), calc(var(--d) + 1.2s); }
@keyframes ga-draw { from { stroke-dashoffset: 1; } }
@keyframes ga-pop { from { transform: scale(0); } }
@keyframes ga-ring { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes ga-fill { 0%, 100% { fill: #F7F5EE; stroke: #002147; } 22%, 48% { fill: #8E43AC; stroke: #8E43AC; } }
.gate-note span { display: inline; margin: 0 0 0 4px; }

/* hero: one message, one action, the network on the same 12-column grid */
.hero-copy { justify-content: center; gap: clamp(20px, 2.2vw, 30px); }
.hero-title { margin: 0; }
.hero-sub { max-width: 36ch; margin: 0; }
.hero-actions { margin-top: 2px; }

/* the network: role names as plain words in the network, no boxes around them */
.stream-label { padding: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; color: rgb(247 245 238 / .6) !important; font-size: .625rem !important; letter-spacing: .16em !important; }

/* the learning journey: each stage drawn in nodes, for the stage it describes */
.jv .st-panes { position: absolute; inset: 0; }
.jv .st-pane { place-items: center; }
.jv-svg { display: block; width: 100%; height: 100%; max-height: 420px; overflow: visible; }
.st-inline .jv-svg { height: auto; max-height: 280px; }
.jv-l { fill: none; stroke: rgb(247 245 238 / .5); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.jv-faint { stroke: rgb(247 245 238 / .16); stroke-dasharray: 3 6; }
.jv-draw { stroke-dasharray: 1; }
.jv-n { fill: #1A1A1A; stroke: rgb(247 245 238 / .82); stroke-width: 1.6; transform-box: fill-box; transform-origin: center; }
.jv-n.jv-p { stroke: var(--purple); stroke-width: 2.2; }
.jv-n.jv-goal { fill: var(--purple); stroke: none; }
.jv-n.jv-small { fill: rgb(247 245 238 / .7); stroke: none; }
.jv-n.jv-ring { fill: none; stroke: rgb(247 245 238 / .35); }
.jv-ck { fill: none; stroke: var(--purple); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.jv-t { fill: rgb(247 245 238 / .6); font: 600 10.5px var(--font-body); letter-spacing: .14em; text-transform: uppercase; }
.jv-t.jv-tp { fill: var(--purple); }
.jv-pulse { fill: var(--purple); opacity: 0; }
:is(.st-pane.on, .st-inline) .jv-draw { animation: jv-draw 1.1s var(--ease-out) both; animation-delay: var(--d, 0s); }
:is(.st-pane.on, .st-inline) .jv-n { animation: jv-pop .5s var(--ease-out) both; animation-delay: var(--d, 0s); }
:is(.st-pane.on, .st-inline) .jv-pulse { animation: jv-flow 3.2s 1.8s linear infinite; }
@keyframes jv-draw { from { stroke-dashoffset: 1; } }
@keyframes jv-pop { from { transform: scale(0); opacity: 0; } }
@keyframes jv-flow { 0% { transform: translateX(0); opacity: 0; } 8%, 88% { opacity: 1; } 100% { transform: translateX(320px); opacity: 0; } }

/* your path: the phases sit on one connected line, a node for each */
.dl-steps { gap: 0 !important; }
.dl-steps button { position: relative; }
.dl-steps button i { border-radius: 0 !important; }
.dl-steps li:first-child button i { border-radius: 4px 0 0 4px !important; }
.dl-steps li:last-child button i { border-radius: 0 4px 4px 0 !important; }
.dl-steps button::before { content: ""; position: absolute; left: 0; top: var(--node-y, 3px); z-index: 1; width: 12px; height: 12px; border-radius: 50%; background: var(--beige); box-shadow: inset 0 0 0 2px rgb(26 26 26 / .25); transition: box-shadow .4s var(--ease-out); }
.dl-steps button.on::before, .dl-steps button.done::before { box-shadow: inset 0 0 0 6px var(--purple-deep); }
.dl-steps button span { padding-top: 6px; }

/* hiring: the illustrative chart says so */
.wh-note { display: block; margin-top: 12px; font-size: .75rem; color: rgb(247 245 238 / .5); position: static !important; }

/* tell us about your team: an editorial list, no cards */
.tz2 { display: grid; gap: clamp(32px, 5vw, 64px); }
.tz2-head .sec-title { margin: 12px 0 0; max-width: 14ch; }
.tz2-head .sec-lede { margin: 18px 0 0; max-width: 42ch; }
.tz2-head .btn { margin-top: 28px; }
.tz2-note { margin: 14px 0 0; font-size: .875rem; color: var(--fg-3); }
.tz2-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.tz2-list li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: clamp(18px, 2vw, 26px) 0; border-bottom: 1px solid var(--rule); }
.tz2-n { font: 600 .75rem/2.2 var(--font-body); letter-spacing: .14em; color: var(--purple-deep); }
.tz2-b h3 { margin: 0; font: 400 clamp(1.3rem, 1.05rem + .8vw, 1.75rem)/1.15 var(--font-display); letter-spacing: -.02em; }
.tz2-b p { margin: 8px 0 0; color: var(--fg-2); max-width: 52ch; }
.tz2-b .tz2-meta { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 12px; font-size: .8125rem; }
.tz2-meta span:first-child { color: var(--fg-3); }
.tz2-proof { color: var(--purple-deep); font-weight: 500; }
@media (min-width: 960px) { .tz2 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } .tz2-head { position: sticky; top: 132px; } }

/* client logos (hiring): monochrome, moving right to left; hover or tap brings back the colour */
.logos { position: relative; margin: 0 0 clamp(48px, 6vw, 88px); padding-bottom: clamp(28px, 3vw, 40px); border-bottom: 1px solid var(--rule); }
.lg-k { margin: 0 0 20px; font: 600 12px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); }
.lg-strip { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.lg-track { display: flex; width: max-content; margin: 0; padding: 0; list-style: none; will-change: transform; }
.lg-track li { flex: none; display: flex; align-items: center; height: 56px; padding-right: clamp(40px, 5vw, 76px); }
.lg-track img { display: block; height: 32px; width: auto; max-width: 168px; object-fit: contain; filter: grayscale(1) brightness(.4); opacity: .72; transition: filter .6s var(--ease-out), opacity .6s var(--ease-out); }
.lg-track li:hover img, .lg-track li.lit img { filter: none; opacity: 1; }
.lg-strip.still { -webkit-mask-image: none; mask-image: none; }
.lg-strip.still .lg-track { flex-wrap: wrap; width: auto; row-gap: 8px; }
@media (hover: none) { .lg-track li { cursor: pointer; } }

@media (prefers-reduced-motion: reduce) {
  .gate .ga-svg *, .jv-svg *, .lg-track { animation: none !important; transition: none !important; }
  .ga-ring { opacity: .45; }
}
.pow::before { content: none !important; display: none !important; }

/* ================= Revision 29 ================= */
/* the opening question: node drawings on the dark card itself, looping gently */
.go-art.ga-s, .go-art.ga-h { background: rgb(247 245 238 / .04) !important; box-shadow: inset 0 0 0 1px rgb(247 245 238 / .08); }
.gs-links path { fill: none; stroke: rgb(247 245 238 / .55); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.gs-n { fill: #1A1A1A; stroke: rgb(247 245 238 / .85); stroke-width: 1.8; transform-box: fill-box; transform-origin: center; transform: scale(0); }
.gs-goal { fill: var(--purple); transform-box: fill-box; transform-origin: center; transform: scale(0); }
.gs-ring { fill: none; stroke: var(--purple); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.gate.on .gs-links path { animation: gs-draw 6s var(--ease-out) infinite; animation-delay: var(--d); }
.gate.on .gs-n { animation: gs-pop 6s var(--ease-out) infinite; animation-delay: var(--d); }
.gate.on .gs-goal { animation: gs-pop 6s var(--ease-out) infinite; animation-delay: 2s; }
.gate.on .gs-ring { animation: gs-ring 6s ease-out infinite; animation-delay: 2.2s; }
@keyframes gs-draw { 0% { stroke-dashoffset: 1; opacity: 1; } 12% { stroke-dashoffset: 0; } 78% { stroke-dashoffset: 0; opacity: 1; } 90%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes gs-pop { 0% { transform: scale(0); opacity: 1; } 7% { transform: scale(1.2); } 11% { transform: scale(1); } 78% { transform: scale(1); opacity: 1; } 90%, 100% { transform: scale(1); opacity: 0; } }
@keyframes gs-ring { 0% { transform: scale(.6); opacity: .8; } 28% { transform: scale(1.6); opacity: 0; } 100% { opacity: 0; } }
.gh-team { fill: none; stroke: rgb(247 245 238 / .32); stroke-width: 1.4; stroke-linejoin: round; }
.gh-route { fill: none; stroke: rgb(247 245 238 / .16); stroke-width: 1.4; stroke-dasharray: 3 5; }
.gh-links path { fill: none; stroke: var(--purple); stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.gh-n { fill: #1A1A1A; stroke: rgb(247 245 238 / .85); stroke-width: 1.8; }
.gh-slot { fill: none; stroke: rgb(247 245 238 / .35); stroke-width: 1.4; stroke-dasharray: 2 3; }
.gh-new { fill: var(--purple); opacity: 0; }
.gate.on .gh-new { opacity: 1; }
.gate.on .gh-links path { animation: gh-link 6s ease-out infinite; }
.gate.on .gh-n { animation: gh-lit 6s ease-in-out infinite; }
@keyframes gh-link { 0%, 38% { stroke-dashoffset: 1; opacity: 1; } 48% { stroke-dashoffset: 0; } 84% { stroke-dashoffset: 0; opacity: 1; } 94%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes gh-lit { 0%, 42% { stroke: rgb(247 245 238 / .85); } 50%, 82% { stroke: #BB62DE; } 92%, 100% { stroke: rgb(247 245 238 / .85); } }

/* the week at AntBox, right-hand screens: a course, a build, a release */
.kx { display: grid; gap: 14px; width: 100%; max-width: 460px; margin-inline: auto; color: var(--beige); }
.kx-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kx-chip { padding: 6px 11px; border-radius: 999px; background: rgb(187 98 222 / .18); color: var(--purple); font: 600 .7rem/1 var(--font-body); letter-spacing: .06em; }
.kx-head small { font-size: .75rem; color: rgb(247 245 238 / .55); }
.kx-title { font: 400 clamp(1.3rem, 1.1rem + .8vw, 1.7rem)/1.15 var(--font-display); letter-spacing: -.02em; }
.kx-list, .kx-checks { list-style: none; margin: 0; padding: 0; display: grid; }
.kx-list li { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid rgb(247 245 238 / .08); font-size: .875rem; }
.kx-list li i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgb(247 245 238 / .35); }
.kx-list li.done i { background: var(--purple); box-shadow: none; }
.kx-list li.now i { box-shadow: inset 0 0 0 3.5px var(--purple); }
.kx-list li em { font-style: normal; font-size: .75rem; color: rgb(247 245 238 / .5); }
.kx-list li:not(.done):not(.now) span { color: rgb(247 245 238 / .5); }
.kx-bar { display: block; width: 84px; height: 5px; border-radius: 5px; background: rgb(247 245 238 / .1); overflow: hidden; }
.kx-bar b { display: block; height: 100%; width: 62%; border-radius: inherit; background: var(--purple); }
:is(.st-pane.on, .st-inline) .kx-bar b { animation: kx-fill 2.4s .4s var(--ease-out) both; }
@keyframes kx-fill { from { width: 0; } }
.kx-foot { display: flex; justify-content: space-between; gap: 12px; margin: 2px 0 0; padding-top: 12px; border-top: 1px solid rgb(247 245 238 / .08); font-size: .75rem; color: rgb(247 245 238 / .55); }
.kx-checks li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid rgb(247 245 238 / .08); font-size: .875rem; color: rgb(247 245 238 / .82); }
.kx-checks i { position: relative; flex: none; width: 16px; height: 16px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px rgb(247 245 238 / .35); }
.kx-checks i::after { content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid #1A1A1A; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); }
:is(.st-pane.on, .st-inline) .kx-checks i { animation: kx-tick .35s var(--ease-out) both; animation-delay: calc(.5s + var(--k) * .6s); }
:is(.st-pane.on, .st-inline) .kx-checks i::after { animation: kx-mark .35s var(--ease-out) both; animation-delay: calc(.6s + var(--k) * .6s); }
@keyframes kx-tick { to { background: var(--purple); box-shadow: none; } }
@keyframes kx-mark { to { transform: rotate(45deg) scale(1); } }
.kx-stamp { justify-self: start; padding: 8px 14px; border-radius: 999px; background: var(--purple); color: #1A1A1A; font: 600 .78rem/1 var(--font-body); }
:is(.st-pane.on, .st-inline) .kx-stamp { animation: kx-pop .5s 3.1s var(--ease-out) both; }
@keyframes kx-pop { from { opacity: 0; transform: scale(.8); } }
.kx-pipe { display: grid; grid-template-columns: repeat(3, 1fr); padding: 6px 0 4px; }
.kx-pipe span { position: relative; display: grid; gap: 10px; justify-items: start; font-size: .8rem; color: rgb(247 245 238 / .72); }
.kx-pipe span:not(:last-child)::after { content: ""; position: absolute; left: 18px; right: 2px; top: 7px; height: 2px; background: rgb(247 245 238 / .14); }
.kx-pipe i { position: relative; z-index: 1; width: 16px; height: 16px; border-radius: 50%; background: #1A1A1A; box-shadow: inset 0 0 0 2px rgb(247 245 238 / .35); }
:is(.st-pane.on, .st-inline) .kx-pipe i { animation: kx-tick .4s var(--ease-out) both; animation-delay: calc(.4s + var(--k) * .7s); }
.kx-team { display: flex; align-items: center; }
.kx-team .ini, .kx-team .you-av { width: 32px; height: 32px; margin-left: -6px; font-size: .62rem; box-shadow: 0 0 0 2px #1A1A1A; }
.kx-team .ini:first-child { margin-left: 0; }
.kx-team small { margin-left: 12px; font-size: .75rem; color: rgb(247 245 238 / .55); }
.kx-toast { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgb(247 245 238 / .06); box-shadow: inset 0 0 0 1px rgb(187 98 222 / .5); font-size: .8rem; }
.kx-toast::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--purple); }
:is(.st-pane.on, .st-inline) .kx-toast { animation: kx-pop .5s 2.6s var(--ease-out) both; }

/* tell us about your team: scroll, and one role at a time comes forward */
.tz2-prog { display: none; }
@media (min-width: 960px) {
  .tz2-head { top: 20vh; }
  .tz2-prog { display: flex; align-items: baseline; gap: 8px; margin-top: 36px; }
  .tz2-prog b { font: 400 3rem/1 var(--font-display); color: var(--fg); font-variant-numeric: tabular-nums; }
  .tz2-prog > span:not(.tz2-ticks) { font-size: .9rem; color: var(--fg-3); }
  .tz2-ticks { display: flex; gap: 6px; margin-left: 16px; align-self: center; }
  .tz2-ticks i { width: 18px; height: 3px; border-radius: 3px; background: rgb(26 26 26 / .12); transition: background .4s; }
  .tz2-ticks i.on { background: var(--purple-deep); }
  .tz2-list { border-top: 0; padding: 14vh 0 20vh; }
  .tz2-list li { min-height: 36vh; align-content: center; border-bottom: 0; opacity: .2; transform: translateY(10px); transition: opacity .5s var(--ease-out), transform .6s var(--ease-out); }
  .tz2-list li.on { opacity: 1; transform: none; }
  .tz2-b h3 { font-size: clamp(1.8rem, 1.3rem + 1.4vw, 2.6rem); }
}
@media (prefers-reduced-motion: reduce) {
  .gate .ga-svg *, .kx * , .kx *::after { animation: none !important; }
  .gs-links path, .gh-links path { stroke-dashoffset: 0; } .gs-n, .gs-goal { transform: none; } .gh-new { display: none; } .gh-slot { fill: #BB62DE; stroke: none; }
  .tz2-list li { opacity: 1 !important; transform: none !important; }
}

/* ================= Revision 30: final pass ================= */
/* the opening question: small and calm. Nothing is lit until you point at it */
.gate { width: min(600px, calc(100vw - 32px)) !important; gap: 6px !important; }
.gate-hi { font-size: .625rem !important; letter-spacing: .22em !important; }
.gate-q { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.05rem) !important; }
.gate-opts { gap: 12px !important; margin-top: 16px !important; }
.gate-o, .go-s, .go-c { padding: 12px 12px 14px !important; gap: 10px !important; border-radius: 18px !important; background: rgb(247 245 238 / .035) !important; box-shadow: inset 0 0 0 1px rgb(247 245 238 / .1) !important; transform: none !important; transition: background-color .35s var(--ease-out), box-shadow .35s var(--ease-out) !important; }
.gate-o:hover, .gate-o:focus-visible { background: rgb(247 245 238 / .09) !important; box-shadow: inset 0 0 0 1px rgb(247 245 238 / .3) !important; transform: none !important; outline: none; }
.gate-o:focus-visible { outline: 2px solid rgb(247 245 238 / .7) !important; outline-offset: 3px; }
.gate:focus { outline: none; }
.go-k { font-size: 1.1rem !important; }
.gate-o small { font-size: .75rem !important; color: rgb(247 245 238 / .55) !important; transition: color .35s; }
.gate-o:hover small, .gate-o:focus-visible small { color: rgb(247 245 238 / .85) !important; }
.go-arr { width: 26px !important; height: 26px !important; bottom: 14px !important; right: 14px !important; background: rgb(247 245 238 / .1) !important; color: var(--beige) !important; font-size: .8rem; transition: background-color .35s, color .35s, transform .35s !important; }
.gate-o:hover .go-arr, .gate-o:focus-visible .go-arr { background: var(--beige) !important; color: var(--ink) !important; }
.go-art.gp-art { height: auto !important; padding: 12px !important; border-radius: 12px !important; background: rgb(247 245 238 / .04) !important; box-shadow: none !important; display: block !important; opacity: .72; filter: saturate(.4); transition: opacity .35s, filter .35s; }
.gate-o:hover .gp-art, .gate-o:focus-visible .gp-art { opacity: 1; filter: none; }
.gate-note { margin-top: 10px; font-size: .72rem !important; color: rgb(247 245 238 / .45) !important; }
/* the little profiles: a student's, and a hiring team's */
.gp { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 8px 10px; text-align: left; color: var(--beige); }
.gp-av { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: rgb(187 98 222 / .3); font: 600 .62rem/1 var(--font-body); }
.gp-co { border-radius: 8px; background: rgb(247 245 238 / .14); }
.gp-id { display: grid; min-width: 0; line-height: 1.25; }
.gp-id b { font-size: .78rem; font-weight: 600; }
.gp b, .gp-stat b { color: var(--beige) !important; }
.gp-id small, .gp-row small, .gp-stat small { font-size: .62rem !important; color: rgb(247 245 238 / .6) !important; }
.gp-stat { display: grid; justify-items: end; line-height: 1.1; }
.gp-stat b { font: 400 1.1rem/1 var(--font-display); }
.gp-row { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; }
.gp-bar { flex: 1; height: 4px; border-radius: 4px; background: rgb(247 245 238 / .1); overflow: hidden; }
.gp-bar i { display: block; height: 100%; width: 70%; border-radius: inherit; background: var(--purple); }
.gate.on .gp-bar i { animation: gp-fill 3.2s var(--ease-out) infinite; }
@keyframes gp-fill { 0% { width: 18%; } 60%, 100% { width: 78%; } }
.gp-team { display: flex; }
.gp-team i { width: 24px; height: 24px; margin-left: -6px; display: grid; place-items: center; border-radius: 50%; background: rgb(247 245 238 / .16); box-shadow: 0 0 0 2px #232323; font: 600 .5rem/1 var(--font-body); font-style: normal; color: var(--beige); }
.gp-team i:first-child { margin-left: 0; }
.gp-team .gp-new { background: rgb(187 98 222 / .45); }
.gate.on .gp-new { animation: gp-join 3.2s var(--ease-out) infinite; }
@keyframes gp-join { 0%, 20% { opacity: 0; transform: translateX(14px); } 40%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
.gp-chip { padding: 4px 8px; border-radius: 999px; background: rgb(247 245 238 / .1); font-size: .62rem; font-weight: 600; white-space: nowrap; }

/* hero: one line of text under the shape the people are drawing */
.shape-say { position: absolute; left: 50%; bottom: 3%; z-index: 3; translate: -50% 6px; margin: 0; font: 500 .8125rem/1.3 var(--font-body); color: var(--fg-2); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .5s var(--ease-out), translate .5s var(--ease-out); }
:root.forming .shape-say { opacity: 1; translate: -50% 0; }
:root[data-aud="company"] .shape-say { color: rgb(247 245 238 / .78); }
.shape-say .ss { display: none; }
:root[data-form-shape="0"] .shape-say .ss0, :root[data-form-shape="1"] .shape-say .ss1, :root[data-form-shape="2"] .shape-say .ss2, :root[data-form-shape="3"] .shape-say .ss3 { display: inline; }

/* same start, different Day 0: one shared timeline, the growth on your side */
.dl-growth { margin: clamp(18px, 3vw, 30px) auto 6px; max-width: 980px; }
.dl-growth svg { display: block; width: 100%; height: auto; overflow: visible; }
.dg-grid { stroke: var(--rule); stroke-width: 1.5; }
.dg-m { font: 600 11px var(--font-body); letter-spacing: .1em; text-transform: uppercase; fill: var(--fg-3); }
.dg-them { fill: none; stroke: rgb(26 26 26 / .3); stroke-width: 2.5; stroke-dasharray: 6 7; }
.dg-you { fill: none; stroke: var(--purple-deep); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - .06 - var(--p, 0) * .94); transition: stroke-dashoffset .9s var(--ease-out); }
.dg-mark { transition: transform .9s var(--ease-out); }
.dg-mark path { stroke: rgb(26 26 26 / .18); stroke-width: 1.5; stroke-dasharray: 3 4; }
.dg-mark circle { transition: cy .9s var(--ease-out); }
.dg-dy { fill: var(--purple-deep); stroke: var(--beige); stroke-width: 3; }
.dg-dt { fill: var(--beige); stroke: rgb(26 26 26 / .45); stroke-width: 2.5; }
.dg-l { font: 600 13px var(--font-body); }
.dg-ly { fill: var(--purple-deep); } .dg-lt { fill: var(--fg-3); }
@media (max-width: 600px) { .dg-m { font-size: 20px; } .dg-l { font-size: 22px; } }
@media (prefers-reduced-motion: reduce) { .gp *, .dg-you, .dg-mark, .dg-mark circle { animation: none !important; transition: none !important; } }

/* ================= Revision 31: the comparison fits on one screen ================= */
/* on a desktop screen the heading, the timeline and both sides of the comparison are all
   visible at once: the heading never scrolls away while you are looking at the comparison */
@media (min-width: 900px) {
  #path { padding-block: 0 !important; scroll-margin-top: 0; }
  #path .path-pin { min-height: 100vh !important; height: auto !important; display: flex !important; flex-direction: column; justify-content: center; padding: 92px 0 20px !important; box-sizing: border-box; }
  #path .sec-title { max-width: none !important; margin: 0 !important; font-size: clamp(1.9rem, 1rem + 2.3vw, 2.9rem) !important; line-height: 1.04 !important; }
  #path .sec-title > span { display: inline; }
  #path .sec-lede { margin: 10px auto 0 !important; max-width: 62ch !important; font-size: clamp(.95rem, .85rem + .3vw, 1.05rem) !important; }
  #path .duel { margin-top: clamp(14px, 2.4vh, 26px) !important; gap: 12px !important; }
  #path .dl-sides { gap: 16px !important; }
  #path .dl-side { padding: 12px 12px 14px !important; gap: 10px !important; }
  #path .dl-screen { height: clamp(150px, calc(100vh - 575px), 250px) !important; }
  #path .dl-cap { min-height: 1.3em !important; font-size: clamp(1rem, .85rem + .45vw, 1.3rem) !important; }
  #path .dl-bar { padding-block: 6px !important; }
}

/* ===== Revision 42: an overload of voices (65 people) ===== */
.nw:not(.nw-co) { height: clamp(640px, 54vw, 800px); }
.nw-ini { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(110% 110% at 30% 22%, rgb(255 255 255 / .3), transparent 40%), radial-gradient(120% 120% at 35% 30%, var(--purple), var(--purple-deep)); color: var(--white); font: 600 calc(var(--d) * .3)/1 var(--font-body); letter-spacing: .02em; }
.nw-n:nth-child(3n) .nw-ini { background: radial-gradient(110% 110% at 30% 22%, rgb(255 255 255 / .25), transparent 40%), radial-gradient(120% 120% at 35% 30%, var(--purple-deep), var(--ink)); }
.nwc-ini { position: absolute; inset: 0; display: none; place-items: center; z-index: 1; background: radial-gradient(80% 80% at 30% 20%, rgb(187 98 222 / .9), transparent 70%), linear-gradient(140deg, var(--purple-deep), var(--ink)); color: var(--white); font: 400 clamp(56px, 6vw, 88px)/1 var(--font-display); letter-spacing: -.02em; }
.nwc-img.no-img .nwc-ini { display: grid; }
.nwc-img.no-img img { opacity: 0 !important; }
.nwc-role:empty { display: none; }
@media (max-width: 760px) { .nw:not(.nw-co) .nw-field { height: 640px; } }
@media (max-width: 760px) { .nw:not(.nw-co) { height: auto; } }
/* the opening question never blocks the page once it is gone (display: grid was overriding [hidden]) */
.gate[hidden] { display: none !important; }
.gate:not(.on) { pointer-events: none; }

/* ===== Revision 43: the whole photo, in every bubble =====
   Bubble images are baked (tools/voices_bubbles.py): the full photo framed over a soft blur of
   itself. Bubbles are larger so the photo reads; the card shows the full photo the same way. */
.nw:not(.nw-co) { height: clamp(760px, 64vw, 960px); }
.nw:not(.nw-co) .nw-n img { object-fit: cover; object-position: 50% 50%; filter: none; }
.nw:not(.nw-co) .nw-n { box-shadow: 0 0 0 1.5px rgb(247 245 238 / .26), 0 12px 30px -10px rgb(26 26 26 / .9); }
.nw:not(.nw-co) .nw-n.on img, .nw:not(.nw-co) .nw-n:hover img { transform: scale(1.04); }
.nwc-bg { position: absolute; inset: -30px; background: center / cover no-repeat; filter: blur(22px) brightness(.6) saturate(1.1); transform: scale(1.1); }
.nwc-img img { z-index: 1; object-fit: contain !important; object-position: 50% 50% !important; padding: 14px 0 0; }
.nwc-img::after { z-index: 2; }
.nwc-img { background: var(--ink); }
@media (max-width: 760px) { .nw:not(.nw-co) .nw-field { height: 760px; } .nwc-img { aspect-ratio: 4 / 4.2; } }
@media (max-width: 760px) { .nw:not(.nw-co) { height: auto; } }
/* anything hidden is really hidden: no invisible layer ever takes a tap */
[hidden] { display: none !important; }
.nudge:not(.on), .voice-pop:not(.on) { pointer-events: none; }

/* ===== Revision 44: the opening question, clear again =====
   Two big choices with real faces (students) and real-looking hiring teams (companies), a button
   on each, and the five-second clock that opens the student page if nobody picks. */
.gate { width: min(760px, calc(100vw - 32px)) !important; }
.gate-q { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.8rem) !important; }
.gx { grid-template-columns: 1fr 1fr; gap: 14px !important; margin-top: 18px !important; }
.gx-o { position: relative; display: grid; align-content: start; justify-items: start; gap: 8px; padding: 14px 14px 18px; border: 0; border-radius: 22px; overflow: hidden; text-align: left; cursor: pointer; color: var(--beige);
  background: linear-gradient(160deg, rgb(247 245 238 / .09), rgb(247 245 238 / .03)); box-shadow: inset 0 0 0 1px rgb(247 245 238 / .16); transition: transform .35s var(--ease-out), box-shadow .35s, background .35s; }
.gx-o:hover, .gx-o:focus-visible { outline: none; transform: translateY(-3px); background: linear-gradient(160deg, rgb(187 98 222 / .2), rgb(187 98 222 / .06)); box-shadow: inset 0 0 0 1.5px var(--purple), 0 24px 50px -24px rgb(187 98 222 / .8); }
.gx-art { display: grid; gap: 10px; justify-items: center; width: 100%; padding: 16px 12px 14px; border-radius: 16px; background: radial-gradient(80% 90% at 50% 0%, rgb(187 98 222 / .22), transparent 70%), rgb(26 26 26 / .55); box-shadow: inset 0 0 0 1px rgb(247 245 238 / .08); }
.gx-art > small { font-size: .72rem; color: rgb(247 245 238 / .7); }
.gx-faces { display: flex; }
.gx-faces img { width: 52px; height: 52px; margin-left: -12px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--ink); }
.gx-faces img:first-child { margin-left: 0; }
.gate.on .gx-faces img { animation: gx-pop .5s var(--ease-out) both; }
.gate.on .gx-faces img:nth-child(2) { animation-delay: .08s; } .gate.on .gx-faces img:nth-child(3) { animation-delay: .16s; } .gate.on .gx-faces img:nth-child(4) { animation-delay: .24s; } .gate.on .gx-faces img:nth-child(5) { animation-delay: .32s; }
@keyframes gx-pop { from { opacity: 0; transform: translateY(8px) scale(.8); } }
.gx-cos { display: grid; gap: 6px; width: 100%; }
.gx-co { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; padding: 7px 10px 7px 7px; border-radius: 11px; background: rgb(247 245 238 / .06); }
.gx-co i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: rgb(247 245 238 / .12); color: var(--beige); }
.gx-co svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.gx-co b { display: block; font-size: .78rem; font-weight: 600; line-height: 1.2; } .gx-co small { display: block; font-size: .66rem; color: rgb(247 245 238 / .6); }
.gx-co em { font-style: normal; font-size: .62rem; font-weight: 600; padding: 4px 8px; border-radius: 999px; background: rgb(187 98 222 / .25); color: var(--beige); white-space: nowrap; }
.gate.on .gx-co { animation: gx-pop .5s var(--ease-out) both; } .gate.on .gx-co:nth-child(2) { animation-delay: .1s; } .gate.on .gx-co:nth-child(3) { animation-delay: .2s; }
.gx-k { margin-top: 4px; font: 400 1.35rem/1.15 var(--font-display); color: var(--white); }
.gx-sub { font-size: .8rem; line-height: 1.45; color: rgb(247 245 238 / .72); }
.gx-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 10px 16px; border-radius: 999px; background: var(--purple); color: var(--ink); font: 600 .82rem/1 var(--font-body); box-shadow: 0 10px 24px -10px rgb(187 98 222 / .9); transition: transform .3s var(--ease-out); }
.gx-c .gx-cta { background: var(--beige); }
.gx-o:hover .gx-cta { transform: translateX(3px); }
.gx-timer { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgb(247 245 238 / .08); }
.gx-timer i { display: block; height: 100%; background: linear-gradient(90deg, var(--purple-deep), var(--purple)); transform-origin: 0 50%; box-shadow: 0 0 10px rgb(187 98 222 / .8); }
.gate-note { font-size: .78rem !important; color: rgb(247 245 238 / .7) !important; }
.gate-note b { color: var(--purple); }
.gate.held .gate-note b { opacity: .5; }
@media (max-width: 560px) { .gx { grid-template-columns: 1fr; } .gx-art { padding: 10px; } .gx-co:nth-child(3) { display: none; } .gx-faces img { width: 40px; height: 40px; } }
@media (max-height: 760px) { .gx-art { display: none; } }
/* bubbles and the card: the largest circle that fits in each photo, nothing shrunk */
.nwc-bg { display: none; }
.nwc-img { aspect-ratio: 1 / .82 !important; background: none; }
.nwc-img img { object-fit: cover !important; object-position: 50% 38% !important; padding: 0 !important; }
.nw:not(.nw-co) .nw-n { background: var(--ink); box-shadow: 0 0 0 2px rgb(247 245 238 / .3), 0 14px 30px -12px rgb(26 26 26 / .9); }
.nw:not(.nw-co) .nw-n:hover { box-shadow: 0 0 0 2px var(--purple), 0 14px 30px -12px rgb(26 26 26 / .9); }
/* the black sections run edge to edge: no white strips beside them */
.bands i { left: 0 !important; right: 0 !important; border-radius: 0 !important; clip-path: none !important; }
.gx-co b, .gx-k { color: var(--white) !important; }
.gx-art { padding: 10px; gap: 6px; }
.gx-faces img { width: 42px; height: 42px; margin-left: -10px; }
.gx-co { padding: 5px 8px 5px 5px; } .gx-co i { width: 26px; height: 26px; }
.gx-co:nth-child(3) { display: none; }
.gx-o { padding: 12px 12px 14px; gap: 6px; }
.gx-k { font-size: 1.2rem; margin-top: 2px; }
.gx-sub { font-size: .76rem; }
.gx-cta { padding: 9px 14px; font-size: .78rem; margin-top: 4px; }
.gate { bottom: max(3vh, 18px) !important; }
@media (max-width: 560px) { .gx-art { display: none; } .gx-o { padding: 14px 14px 16px; } }
/* client logos: clean, transparent, in grey that isn't muddy; colour on hover */
.lg-track img { filter: grayscale(1) contrast(1.05) !important; opacity: .6 !important; mix-blend-mode: multiply; }
.lg-track li:hover img { filter: none !important; opacity: 1 !important; }

/* ===== Revision 45: the Proof of Work card pops up over the people (students) =====
   About a third of the people draw a Proof of Work card; a small glass card fades in on top of
   them with what the work is: the name, Day 0 ready, three pieces of shipped work and the chart. */
.hero-stage .form-card { -webkit-backdrop-filter: blur(6px) saturate(1.4); backdrop-filter: blur(6px) saturate(1.4); background: linear-gradient(155deg, rgb(255 255 255 / .62), rgb(255 255 255 / .2)); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .8), inset 0 0 0 2.5px rgb(187 98 222 / .25), 0 40px 80px -40px rgb(138 60 176 / .55); }
.form-card .fc-r { left: 17%; color: var(--ink) !important; font-weight: 500 !important; display: flex; align-items: center; gap: .6em; opacity: calc((var(--fk) - .4) * 1.7); transform: translateX(calc((1 - var(--fk)) * -10px)); }
.form-card .fc-r i { font-style: normal; padding: .3em .6em; border-radius: .5em; background: rgb(187 98 222 / .16); color: var(--purple-deep); font-weight: 600; letter-spacing: .04em; }
.form-card .r0 { top: 47%; } .form-card .r1 { top: 63%; } .form-card .r2 { top: 79%; }
.form-card .fc-chart { right: 7%; bottom: 30%; color: var(--purple-deep) !important; }
.form-card .fc-name { font-size: 1.25em !important; }
/* the call to action reads: white, bold, on a deeper purple */
.btn-cta, .btn-cta:visited, .nav .btn-cta { color: var(--white) !important; font-weight: 600 !important; background: linear-gradient(135deg, var(--purple) 0%, var(--purple-deep) 100%) !important; text-shadow: 0 1px 1px rgb(26 26 26 / .25); }
.btn-cta .arr { stroke: var(--white) !important; }
.btn-cta:hover { filter: brightness(1.08); }
/* the glass seams between white and black sections */
.seams { position: absolute; left: 0; top: 0; width: 100%; height: 0; z-index: 4; pointer-events: none; }
.seams i { position: absolute; left: 0; right: 0; height: 72px; translate: 0 -50%;
  background: linear-gradient(180deg, rgb(255 255 255 / 0), rgb(255 255 255 / .16) 46%, rgb(255 255 255 / .34) 50%, rgb(255 255 255 / .1) 54%, rgb(255 255 255 / 0));
  -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 38%, #000 62%, transparent); mask-image: linear-gradient(180deg, transparent, #000 38%, #000 62%, transparent); }
.seams i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, rgb(255 255 255 / .7) 20%, rgb(255 255 255 / .7) 80%, transparent); }
:root[data-aud="company"] .seams { display: none; }
@media (prefers-reduced-transparency: reduce) { .seams { display: none; } }

/* ===== Revision 46: which team are you hiring for? All roles on one screen ===== */
.tz2-prog { display: none !important; }
.tz2-list { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 !important; border: 0 !important; }
.tz2-list li { min-height: 0 !important; opacity: 1 !important; transform: none !important; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; align-content: start; padding: 16px 16px 14px !important; border: 0 !important; border-radius: 18px; cursor: pointer;
  background: var(--white); box-shadow: 0 0 0 1px rgb(26 26 26 / .08), 0 14px 30px -24px rgb(26 26 26 / .35); transition: box-shadow .3s, transform .3s var(--ease-out), background .3s !important; }
.tz2-list li:hover { transform: translateY(-2px) !important; box-shadow: 0 0 0 1.5px rgb(187 98 222 / .6), 0 18px 34px -22px rgb(138 60 176 / .55); }
.tz2-list li.on { background: linear-gradient(150deg, rgb(187 98 222 / .16), rgb(255 255 255 / 1) 70%); box-shadow: 0 0 0 2px var(--purple), 0 18px 34px -20px rgb(138 60 176 / .6); }
.tz2-list li:focus-visible { outline: 2px solid var(--purple-deep); outline-offset: 2px; }
.tz2-n { line-height: 1.6 !important; font-size: .7rem !important; }
.tz2-b h3 { font-size: clamp(1.05rem, .95rem + .35vw, 1.25rem) !important; line-height: 1.2 !important; }
.tz2-b p { margin-top: 4px !important; font-size: .82rem; line-height: 1.45; }
.tz2-b .tz2-meta { margin-top: 8px !important; gap: 2px 14px !important; font-size: .72rem !important; }
.tz2-head { position: static !important; }
@media (min-width: 960px) { .tz2 { align-items: center !important; } }
@media (max-width: 640px) { .tz2-list { grid-template-columns: 1fr; } .tz2-b p { display: none; } }

/* ===== Revision 47: the endorsements, alive ===== */
.nw:not(.nw-co) .nw-field::before { content: ""; position: absolute; left: var(--gx, 50%); top: var(--gy, 50%); width: 520px; height: 520px; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(187 98 222 / .28), rgb(138 60 176 / .1) 55%, transparent); transition: left 1.2s var(--ease-in-out), top 1.2s var(--ease-in-out); }
.nw:not(.nw-co) .nw-n { box-shadow: 0 0 0 2px rgb(187 98 222 / .32), 0 0 22px -4px rgb(187 98 222 / .45), 0 14px 30px -12px rgb(26 26 26 / .9) !important; }
.nw:not(.nw-co) .nw-n img { animation: nw-breathe 5s var(--ease-in-out) infinite alternate; animation-delay: calc(var(--i, 0) * -.37s); }
@keyframes nw-breathe { from { transform: scale(1); } to { transform: scale(1.06); } }
.nw:not(.nw-co) .nw-n.on { box-shadow: 0 0 0 3px var(--purple), 0 0 50px 8px rgb(187 98 222 / .6) !important; z-index: 4; }
.nw-n.blip::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--purple); animation: nw-blip 1.1s var(--ease-out) forwards; pointer-events: none; }
@keyframes nw-blip { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }
.nw:not(.nw-co) .nw-card { box-shadow: inset 0 0 0 1px rgb(247 245 238 / .16), 0 0 0 1px rgb(187 98 222 / .25), 0 40px 90px -40px rgb(26 26 26 / .95), 0 30px 90px -40px rgb(187 98 222 / .8); }

/* ===== Revision 48: work our customers can point to — the work as tiles in the network ===== */
.nw-co .nw-n { width: auto !important; height: auto !important; min-width: calc(var(--d) * 1.05); max-width: 190px; padding: 12px 14px 12px; border-radius: 18px !important; display: grid; gap: 4px; text-align: left;
  background: linear-gradient(150deg, rgb(247 245 238 / .12), rgb(247 245 238 / .04)), rgb(26 26 26 / .82) !important;
  box-shadow: inset 0 0 0 1px rgb(247 245 238 / .18), inset 0 1px 0 rgb(247 245 238 / .25), 0 18px 40px -18px rgb(26 26 26 / .95) !important;
  transition: box-shadow .4s, background .4s; }
.nw-co .nw-n:nth-child(n) { background: linear-gradient(150deg, rgb(247 245 238 / .12), rgb(247 245 238 / .04)), rgb(26 26 26 / .82) !important; }
.nw-co .nw-n::after { border-radius: 22px !important; inset: -6px !important; }
.nw-co .nw-g { width: auto; height: auto; display: block; font: 400 clamp(22px, 2vw, 30px)/1 var(--font-display) !important; letter-spacing: -.02em; color: var(--white) !important;
  background: linear-gradient(120deg, var(--white), var(--purple)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.nw-co .nw-tag { position: static !important; translate: none !important; opacity: 1 !important; transform: none !important; padding: 0 !important; background: none !important; box-shadow: none !important;
  white-space: normal !important; font: 500 11.5px/1.3 var(--font-body) !important; color: rgb(247 245 238 / .72) !important; }
.nw-co .nw-n.on { background: linear-gradient(150deg, rgb(187 98 222 / .45), rgb(138 60 176 / .25)), rgb(26 26 26 / .9) !important; box-shadow: inset 0 0 0 1.5px var(--purple), 0 0 50px 4px rgb(187 98 222 / .45) !important; }
.nw-co .nw-n.on .nw-tag { color: var(--white) !important; }
.nw-co .nw-n:hover { box-shadow: inset 0 0 0 1.5px rgb(187 98 222 / .7), 0 18px 40px -18px rgb(26 26 26 / .95) !important; }
.nw-co .nw-field::before { content: ""; position: absolute; left: var(--gx, 50%); top: var(--gy, 50%); width: 560px; height: 560px; translate: -50% -50%; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgb(187 98 222 / .3), transparent); transition: left 1.2s var(--ease-in-out), top 1.2s var(--ease-in-out); }
.nw-co .nwc-k { font-size: clamp(56px, 6vw, 84px) !important; }
@media (max-width: 760px) { .nw-co .nw-field { height: 560px !important; } .nw-co .nw-n { max-width: 140px; padding: 9px 11px; } }
.form-card .fc-chart { top: auto !important; bottom: 9% !important; right: 8% !important; font-size: 1em !important; }
.nw-co { height: clamp(640px, 54vw, 760px) !important; }
.nw-co .nw-field { margin-block: 30px; height: calc(100% - 60px) !important; }

/* ===== Revision 49: the quote in the middle, everyone circling it ===== */
@media (min-width: 761px) {
  .nw:not(.nw-co) { display: block !important; position: relative; height: clamp(860px, 76vw, 1040px) !important; }
  .nw:not(.nw-co) .nw-field { position: absolute; inset: 0; height: auto !important; }
  .nw:not(.nw-co) .nw-card { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 3; width: 380px; height: 470px; display: flex; flex-direction: column; }
  .nw:not(.nw-co) .nwc-img { aspect-ratio: auto !important; height: 228px; flex: none; }
  .nw:not(.nw-co) .nw-card figcaption { flex: 1; overflow: hidden; align-content: start; }
  .nw:not(.nw-co) .nwc-q { font-size: 17px !important; }
}

/* ===== Revision 50: six kinds of Proof of Work in the hero ===== */
:root[data-form-shape="4"] .shape-say .ss4, :root[data-form-shape="5"] .shape-say .ss5 { display: inline-flex; }
:root[data-form-shape] .shape-say .ss { align-items: center; gap: 8px; }
:root[data-form-shape="0"] .shape-say .ss0, :root[data-form-shape="1"] .shape-say .ss1, :root[data-form-shape="2"] .shape-say .ss2, :root[data-form-shape="3"] .shape-say .ss3 { display: inline-flex; }
.shape-say { padding: 8px 14px 8px 8px; border-radius: 999px; background: rgb(255 255 255 / .82); box-shadow: 0 0 0 1px rgb(187 98 222 / .25), 0 12px 30px -14px rgb(138 60 176 / .5); white-space: nowrap; }
.shape-say .ss i { font-style: normal; padding: 4px 9px; border-radius: 999px; background: var(--purple); color: var(--white); font-weight: 600; font-size: .72rem; letter-spacing: .02em; }
:root[data-aud="company"] .shape-say { background: rgb(26 26 26 / .7); box-shadow: inset 0 0 0 1px rgb(247 245 238 / .14); }
/* your tag rides above every section's content, dark ones included */
.stream-labels { z-index: 45 !important; }

/* ===== Revision 51: a full footer, blended into the closing black ===== */
.footer.ft2 { position: relative; padding: clamp(56px, 6vw, 88px) var(--gutter) calc(28px + env(safe-area-inset-bottom, 0px)) !important; margin: 0 !important; background: var(--ink) !important; color: var(--beige); }
.footer.ft2::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgb(187 98 222 / .45), transparent); }
.ft2-wrap { max-width: var(--max); margin: 0 auto; }
.ft2-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr); gap: clamp(32px, 5vw, 80px); }
.ft2-logo .logo-img, .ft2-logo .logo-svg { height: 30px !important; width: auto; filter: brightness(0) invert(.96); }
.ft2-brand p { margin: 18px 0 0; max-width: 36ch; font-size: .92rem; line-height: 1.6; color: rgb(247 245 238 / .7); }
.ft2-cta { margin-top: 24px; }
.ft2-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.ft2-h { margin: 0 0 14px; font: 600 .7rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--purple); }
.ft2-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ft2-cols a { color: rgb(247 245 238 / .78); text-decoration: none; font-size: .9rem; transition: color .2s; }
.ft2-cols a:hover, .ft2-cols a:focus-visible { color: var(--white); }
.ft2-base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; margin-top: clamp(40px, 5vw, 64px); padding-top: 20px; border-top: 1px solid rgb(247 245 238 / .1); font-size: .78rem; color: rgb(247 245 238 / .55); }
.ft2-tag { color: rgb(247 245 238 / .75); }
@media (max-width: 900px) { .ft2-top { grid-template-columns: 1fr; } .ft2-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#wh-title .wh-l { display: block; } #wh-title .acc { color: var(--purple); }
#wh-title { word-spacing: .08em; }
.lg-track img { max-width: none !important; max-height: none !important; }

/* ===== Revision 52: which team? the roles orbit the one you pick ===== */
.tzv { position: relative; height: clamp(480px, 42vw, 580px); }
.tzv-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tzv-svg line { stroke: rgb(138 60 176 / .22); stroke-width: 1.2; stroke-dasharray: 3 7; animation: tzv-flow 1.6s linear infinite; }
.tzv-svg line.on { stroke: var(--purple); stroke-width: 2; stroke-dasharray: 6 6; filter: drop-shadow(0 0 4px rgb(187 98 222 / .8)); }
@keyframes tzv-flow { to { stroke-dashoffset: -20; } }
.tzv-n { position: absolute; left: 0; top: 0; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 9px; border: 0; border-radius: 999px; cursor: pointer; white-space: nowrap; font: 500 .84rem/1 var(--font-body); color: var(--ink);
  background: var(--white); box-shadow: 0 0 0 1px rgb(26 26 26 / .08), 0 10px 24px -14px rgb(26 26 26 / .4); transition: box-shadow .3s, background .3s, color .3s; will-change: transform; }
.tzv-n i { font-style: normal; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgb(187 98 222 / .14); color: var(--purple-deep); font-size: .62rem; font-weight: 700; }
.tzv-n:hover { box-shadow: 0 0 0 1.5px var(--purple), 0 12px 26px -12px rgb(138 60 176 / .6); }
.tzv-n.on { background: linear-gradient(135deg, var(--purple), var(--purple-deep)); color: var(--white); box-shadow: 0 14px 30px -10px rgb(138 60 176 / .8); }
.tzv-n.on i { background: rgb(255 255 255 / .22); color: var(--white); }
.tzv-n:focus-visible { outline: 2px solid var(--purple-deep); outline-offset: 3px; }
.tzv-hub { position: absolute; left: 50%; top: 50%; z-index: 1; translate: -50% -50%; width: min(300px, 62%); display: grid; gap: 6px; padding: 22px 24px; border-radius: 26px; text-align: left;
  background: linear-gradient(160deg, rgb(255 255 255 / .96), rgb(255 255 255 / .82)); box-shadow: 0 0 0 1px rgb(187 98 222 / .3), 0 0 0 10px rgb(187 98 222 / .06), 0 30px 60px -30px rgb(138 60 176 / .6); }
.tzv-k { font: 600 .68rem/1 var(--font-body); letter-spacing: .14em; color: var(--purple-deep); }
.tzv-h { font: 400 1.45rem/1.15 var(--font-display); color: var(--ink); }
.tzv-p { margin: 2px 0 0; font-size: .86rem; line-height: 1.5; color: rgb(26 26 26 / .72); }
.tzv-t { font-size: .74rem; color: rgb(26 26 26 / .6); }
.tzv-pr { font-size: .78rem; font-weight: 600; color: var(--purple-deep); }
.tzv-hub.in > * { animation: nw-in .45s var(--ease-out) both; }
.tzv-hub.in > :nth-child(2) { animation-delay: .04s; } .tzv-hub.in > :nth-child(3) { animation-delay: .08s; } .tzv-hub.in > :nth-child(4) { animation-delay: .12s; } .tzv-hub.in > :nth-child(5) { animation-delay: .16s; }
@media (max-width: 640px) { .tzv { height: 520px; } .tzv-n { font-size: .72rem; padding: 7px 10px 7px 7px; } .tzv-n i { width: 20px; height: 20px; } .tzv-hub { width: 64%; padding: 16px; } .tzv-h { font-size: 1.15rem; } .tzv-p { display: none; } }
.lg-track img[alt="Qapita"] { filter: grayscale(1) brightness(.45) !important; }
/* headings: the tight tracking never swallows the gap between words */
.sec-title, .hero-title, h1, h2 { word-spacing: .12em; }
/* the team picker: a row of chips under the card when there's no room to orbit */
.tzv.stacked { height: auto !important; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding-top: 4px; }
.tzv.stacked .tzv-svg { display: none; }
.tzv.stacked .tzv-hub { position: relative; left: auto; top: auto; translate: none; width: 100%; order: -1; margin-bottom: 10px; }
.tzv.stacked .tzv-n { position: relative; transform: none !important; }
.tzv-hub { width: min(320px, 48%) !important; }
.tzv-hub { width: 280px !important; padding: 20px 22px !important; }
.tzv-n { font-size: .8rem; }
.tzv.stacked { align-items: flex-start; align-content: flex-start; }
.tzv.stacked .tzv-hub { width: 100% !important; flex: 0 0 100%; }

/* ===== Revision 53: the node segue into the network ===== */
#what-we-do { position: relative; }
#what-we-do > :not(.nseg) { position: relative; z-index: 1; }
.nseg { position: absolute; left: 0; right: 0; z-index: 0; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%); mask-image: linear-gradient(180deg, transparent 0%, #000 45%); }
.nseg-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.nseg-svg .far circle { fill: rgb(247 245 238 / .22); filter: blur(2.5px); }
.nseg-svg .mid circle { fill: rgb(247 245 238 / .5); }
.nseg-svg .lines line { stroke: rgb(247 245 238 / .1); stroke-width: 1; }
.nseg-f { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: url("/images/network/faces.webp") calc(var(--fx) * 100% / 15) calc(var(--fy) * 100% / 9) / 1600% 1000%; box-shadow: 0 0 0 1.5px rgb(187 98 222 / .45); opacity: .8; animation: nseg-drift 7s var(--ease-in-out) infinite alternate; animation-delay: var(--dl); }
@keyframes nseg-drift { from { transform: translate(-4px, 3px); } to { transform: translate(4px, -3px); } }
.only-company ~ .nseg, :root[data-aud="company"] .nseg { display: none; }

/* ===== Revision 54: the people, as a river ===== */
.rv { position: relative; height: clamp(680px, 58vw, 800px); margin: clamp(28px, 4vw, 48px) calc(-1 * var(--gutter)) 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.rv::before { content: ""; position: absolute; left: 50%; top: 50%; width: 900px; height: 520px; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgb(138 60 176 / .35), transparent); pointer-events: none; }
.rv-cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.rv-nodes { position: absolute; inset: 0; }
.rv-p { --s: 64px; position: absolute; left: 0; top: 0; width: var(--s); height: var(--s); padding: 0; border: 0; border-radius: 50%; background: var(--ink); cursor: pointer; will-change: transform;
  box-shadow: 0 0 0 1.5px rgb(247 245 238 / .3), 0 10px 24px -10px rgb(26 26 26 / .9); transition: box-shadow .4s; }
.rv-p img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.rv-p[data-d="0"] { opacity: .5; filter: blur(1.4px) saturate(.7); z-index: 0; }
.rv-p[data-d="1"] { opacity: .85; z-index: 1; }
.rv-p[data-d="2"] { z-index: 2; box-shadow: 0 0 0 2px rgb(187 98 222 / .45), 0 0 24px -4px rgb(187 98 222 / .5), 0 12px 28px -10px rgb(26 26 26 / .9); }
.rv-p:hover { box-shadow: 0 0 0 2px var(--purple), 0 0 30px 2px rgb(187 98 222 / .55); filter: none; opacity: 1; }
.rv-p.on { z-index: 4; opacity: 1; filter: none; box-shadow: 0 0 0 3px var(--purple), 0 0 46px 8px rgb(187 98 222 / .7); }
.rv-p.on::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--purple); animation: nw-ring 2s var(--ease-out) infinite; }
.rv-p:focus-visible { outline: 2px solid var(--purple); outline-offset: 4px; }
.rv-stage { position: absolute; left: 50%; top: 50%; z-index: 3; translate: -50% -50%; width: min(640px, 82%); margin: 0; display: grid; justify-items: center; gap: 12px; text-align: center; pointer-events: none; }
.rv-face { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px var(--purple), 0 0 0 9px rgb(187 98 222 / .18), 0 0 60px 6px rgb(187 98 222 / .5); }
.rv-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rv-q { margin: 6px 0 0; font: 400 clamp(20px, 2vw, 28px)/1.38 var(--font-display); color: var(--white); text-wrap: balance; text-shadow: 0 2px 24px rgb(26 26 26 / .9); }
.rv-stage figcaption { display: grid; gap: 2px; }
.rv-name { font-weight: 600; color: var(--white); }
.rv-role { font-size: 12.5px; color: rgb(247 245 238 / .62); } .rv-role:empty { display: none; }
.rv-n { font: 600 11px/1 var(--font-body); letter-spacing: .14em; color: var(--purple); }
.rv-stage.in > * { animation: nw-in .6s var(--ease-out) both; }
.rv-stage.in > :nth-child(2) { animation-delay: .06s; } .rv-stage.in > :nth-child(3) { animation-delay: .14s; } .rv-stage.in > :nth-child(4) { animation-delay: .2s; }
.rv-hint { position: absolute; left: 0; right: 0; bottom: 10px; margin: 0; text-align: center; font-size: 12px; color: rgb(247 245 238 / .5); }
@media (max-width: 700px) { .rv { height: 660px; } .rv-q { font-size: 18px; } .rv-face { width: 64px; height: 64px; } .rv-stage { width: 88%; } }

/* ===== Revision 55: Foundation Day banner (above the nav; scoped to .fdb) ===== */
.fdb { --fdb-bg: #002147; --fdb-accent: #8E43AC; position: relative; z-index: 52; display: block; overflow: hidden; color: #ffffff; text-decoration: none; background: var(--fdb-bg); font-family: Poppins, system-ui, sans-serif; isolation: isolate; }
.fdb::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 220% at 50% 0%, rgb(142 67 172 / .45), transparent 70%); }
.fdb::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; z-index: -1; background: linear-gradient(100deg, transparent, rgb(255 255 255 / .16), transparent); transform: skewX(-18deg); animation: fdb-sweep 6.5s ease-in-out 1.2s infinite; }
@keyframes fdb-sweep { 0% { left: -40%; } 45%, 100% { left: 130%; } }
.fdb-in { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 1.6vw, 22px); max-width: calc(var(--max) + 2 * var(--gutter)); min-height: 42px; margin: 0 auto; padding: 8px var(--gutter); }
.fdb-k { display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px; border-radius: 999px; background: var(--fdb-accent); font: 600 11px/1 Poppins, sans-serif; letter-spacing: .16em; white-space: nowrap; }
.fdb-k i { width: 6px; height: 6px; border-radius: 50%; background: #ffffff; box-shadow: 0 0 0 0 rgb(255 255 255 / .7); animation: fdb-pulse 2s ease-out infinite; }
@keyframes fdb-pulse { 70% { box-shadow: 0 0 0 7px rgb(255 255 255 / 0); } 100% { box-shadow: 0 0 0 0 rgb(255 255 255 / 0); } }
.fdb-t { font-size: 14px; color: rgb(255 255 255 / .9); }
.fdb-cta { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; white-space: nowrap; padding-bottom: 1px; background: linear-gradient(#ffffff, #ffffff) 0 100% / 0 1px no-repeat; transition: background-size .35s ease; }
.fdb-arr { display: inline-block; transition: transform .35s ease; }
.fdb:hover .fdb-cta, .fdb:focus-visible .fdb-cta { background-size: 100% 1px; }
.fdb:hover .fdb-arr, .fdb:focus-visible .fdb-arr { transform: translateX(4px); }
.fdb:hover::before { background: radial-gradient(60% 220% at 50% 0%, rgb(142 67 172 / .65), transparent 70%); }
.fdb:focus-visible { outline: 2px solid #ffffff; outline-offset: -4px; }
@media (max-width: 640px) { .fdb-in { gap: 10px; min-height: 40px; } .fdb-t { display: none; } .fdb-k { font-size: 10px; padding: 5px 9px; } .fdb-cta { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .fdb::after, .fdb-k i { animation: none; } .fdb-arr, .fdb-cta { transition: none; } }

/* customer work on phones: a clean two-column grid of tiles instead of a crowded network */
@media (max-width: 760px) {
  .nw-co { height: auto !important; }
  .nw-co .nw-field { height: auto !important; margin: 0 0 14px !important; order: -1; }
  .nw-co .nw-cv, .nw-co .nw-field::before { display: none !important; }
  .nw-co .nw-nodes { position: static !important; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .nw-co .nw-n { position: relative !important; transform: none !important; width: auto !important; max-width: none !important; min-width: 0 !important; }
  .nw-co .nw-n::after { display: none; }
}
/* panels that slide in from the side never widen the page while they wait */
.px, .sh2, .scene { overflow-x: clip; }
html, body { overflow-x: clip; }

/* ===== Revision 57: the river, back, calmer and full width ===== */
.rv { width: 100vw; margin-left: calc(50% - 50vw) !important; margin-right: 0 !important; }
.rv-p { transition: box-shadow .5s, opacity .6s, filter .6s; }
.rv-stage { transition: opacity .4s; }
.rv-stage.in > * { animation-duration: .8s !important; }
.rv-n { display: none !important; }