/*
 * Korps.ai preview: one dark environment, lit differently per chapter, with
 * the product drawn as responsive HTML so it can move. Tokens first, then the
 * grid and type, then the product components (ring, rows, cards, windows),
 * then the thirteen scenes in order, then responsive and reduced motion.
 *
 * Motion rules: entrances are class toggles (.in) with one 600 ms ease-out
 * transition of transform and opacity; state changes inside product UI are
 * 240 ms; rings 400 ms. Pinned scenes are driven by site.js and only ever set
 * data-state, toggle classes or tween transforms and opacity.
 */

:root {
  --ground-deep: #0B0C0F;
  --ground: #101217;
  --panel: #161920;
  --raised: #1D2129;
  --border: #1A1E26;
  --border-strong: #262B35;
  --text: #F2EFE8;
  --text-2: #B8B4AB;
  --text-3: #8B8981;
  --gold: #E2A93B;
  --gold-hover: #F0BC58;
  --gold-deep: #8A6420;
  --working: #39C173;
  --waiting: #E2A93B;
  --blocked: #E5484D;
  --blocked-text: #F2646A;
  --info: #4C8DFF;
  --idle: #5B6068;
  --paper: #EFEBE3;
  --ink: #15171B;
  --ink-2: #4A4D55;
  --display: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter: 56px;
  --max: 1280px;
  --scene-gap: 160px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-window: 0 40px 80px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.03) inset;
  --shadow-card: 0 24px 48px rgba(0, 0, 0, 0.28);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --paper-rule: #D9D2C4;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
strong { font-weight: 600; }

/* ---------------------------------------------------------------- atmosphere
   One fixed radial gold light whose position and strength follow the story
   (a class on body, set by site.js), and a static grain so the dark never
   reads as flat digital black. Both are transform and opacity only. */
.light {
  position: fixed; left: 0; top: 0;
  width: 1000px; height: 1000px;
  margin: -500px 0 0 -500px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(226, 169, 59, 0.22) 0%, rgba(226, 169, 59, 0.08) 30%, rgba(226, 169, 59, 0) 62%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
  transform: translate3d(72vw, 42vh, 0);
  transition: transform 1400ms var(--ease-out), opacity 1400ms ease;
}
body.at-s01 .light { transform: translate3d(74vw, 46vh, 0); opacity: 0.6; }
body.at-s02 .light { transform: translate3d(64vw, 60vh, 0); opacity: 0.45; }
body.at-s03 .light { transform: translate3d(36vw, 40vh, 0); opacity: 0.5; }
body.at-s04 .light { transform: translate3d(28vw, 66vh, 0); opacity: 0.4; }
body.at-s05 .light { transform: translate3d(76vw, 52vh, 0); opacity: 0.9; }
body.at-s06 .light { transform: translate3d(50vw, 50vh, 0); opacity: 0.5; }
body.at-s07 .light { transform: translate3d(50vw, 22vh, 0); opacity: 0.55; }
body.at-s08 .light { transform: translate3d(30vw, 60vh, 0); opacity: 0.7; }
body.at-s09 .light { transform: translate3d(70vw, 70vh, 0); opacity: 0.4; }
body.at-s10 .light { transform: translate3d(30vw, 50vh, 0); opacity: 0.35; }
body.at-s11 .light { transform: translate3d(66vw, 44vh, 0); opacity: 0.5; }
body.at-s12 .light { transform: translate3d(50vw, 55vh, 0); opacity: 0.8; }
body.at-s13 .light { transform: translate3d(24vw, 40vh, 0); opacity: 0.4; }
body.at-s14 .light { opacity: 0; }
body.at-s15 .light { transform: translate3d(50vw, 80vh, 0); opacity: 0.3; }
body.at-s16 .light { transform: translate3d(38vw, 48vh, 0); opacity: 1; }
body.at-s17 .light { transform: translate3d(50vw, 30vh, 0); opacity: 0.45; }
body.at-s18 .light { transform: translate3d(50vw, 40vh, 0); opacity: 0.7; }
.grain {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 1;
  opacity: 0.03;
  background-image: var(--grain);
  background-size: 240px 240px;
}
main { position: relative; z-index: 2; overflow-x: clip; }
.chrome { z-index: 70; }

/* ---------------------------------------------------------------- grid, type */
.wrap {
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
}
.cols {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 24px;
}
.c1-5 { grid-column: 1 / 6; }
.c1-4 { grid-column: 1 / 5; }
.c1-6 { grid-column: 1 / 7; }
.c1-7 { grid-column: 1 / 8; }
.c1-8 { grid-column: 1 / 9; }
.c9-13 { grid-column: 9 / 13; }
.c5-13 { grid-column: 5 / 13; }
.c6-13 { grid-column: 6 / 13; }
.c7-13 { grid-column: 7 / 13; }
.c8-13 { grid-column: 8 / 13; }
.c8-12 { grid-column: 8 / 12; }
.c1-13 { grid-column: 1 / 13; }
.c4-13 { grid-column: 4 / 13; }

.scene {
  position: relative;
  padding: calc(var(--scene-gap) / 2) 0;
  scroll-margin-top: 88px;
}
.pinpair { scroll-margin-top: 88px; }
.scene + .scene { padding-top: calc(var(--scene-gap) / 2); }

.display, .h-hero, .h-section, .h-sub, .h-tiny {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 580;
  letter-spacing: -0.028em;
  line-height: 0.98;
  text-wrap: balance;
  color: var(--text);
}
.h-hero { font-size: 88px; letter-spacing: -0.034em; font-weight: 600; }
.h-section { font-size: 56px; }
.h-sub { font-size: 40px; line-height: 1.02; }
.h-tiny { font-size: 28px; line-height: 1.1; letter-spacing: -0.02em; }
.lede {
  font-size: 19px; line-height: 1.55; color: var(--text-2);
  max-width: 34em;
}
.lede.big { font-size: 21px; }
.small-line { font-size: 17px; color: var(--text-2); }
.quiet-link {
  color: var(--text-2); text-decoration: underline; text-underline-offset: 0.2em;
  text-decoration-color: var(--border-strong);
  display: inline-flex; align-items: center; min-height: 44px;
  transition: color 150ms ease, text-decoration-color 150ms ease;
}
.quiet-link:hover, .quiet-link:focus-visible { color: var(--text); text-decoration-color: var(--text); }
.quiet-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.actions { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }
.head-row { align-items: end; margin-bottom: 48px; }
.head-row .lede { padding-bottom: 6px; }

/* Entrances: one per scene, applied to .reveal children via .in on the scene. */
.reveal {
  opacity: 0; transform: translate3d(0, 24px, 0);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
.in .reveal, .reveal.in { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- the ring
   A 2.5 px SVG circle around a portrait or an initials disc. State is a
   data-state attribute so scenes can flip it; the stroke colour transitions
   in 400 ms. Working breathes, waiting pulses once every 3 s, blocked holds,
   idle is thin and grey, info is blue. */
.ring {
  --size: 40px;
  --state: var(--idle);
  position: relative;
  display: inline-block;
  width: var(--size); height: var(--size);
  flex: none;
  border-radius: 50%;
}
.ring svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ring circle {
  fill: none;
  stroke: var(--state);
  stroke-width: 2.5;
  transition: stroke 400ms ease, stroke-width 400ms ease, opacity 400ms ease;
  transform-origin: 50% 50%;
  transform: rotate(-90deg);
}
.ring img, .ring .initials {
  --inset: calc(var(--size) * 0.075 + 2.5px);
  position: absolute; left: var(--inset); top: var(--inset);
  width: calc(var(--size) - 2 * var(--inset)); height: calc(var(--size) - 2 * var(--inset));
  border-radius: 50%;
  object-fit: cover;
  background: var(--raised);
}
.ring .initials {
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--size) * 0.3); font-weight: 600; letter-spacing: 0.01em;
  color: var(--text-2);
  background: linear-gradient(160deg, #2A2F3A, #1A1E26);
}
.ring[data-state="working"] { --state: var(--working); }
.ring[data-state="waiting"] { --state: var(--waiting); }
.ring[data-state="blocked"] { --state: var(--blocked); }
.ring[data-state="info"] { --state: var(--info); }
.ring[data-state="idle"] { --state: var(--idle); }
.ring[data-state="idle"] circle { stroke-width: 1.5; }
/* The breathing and the pulse animate the svg element's opacity, not the
   circle's: an animated opacity on an element is composited on its own layer,
   so a breathing ring never repaints the window it sits in. */
.ring[data-state="working"] svg { animation: breathe 4s ease-in-out infinite; }
.ring[data-state="waiting"] svg { animation: pulse 3s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.75; } }
/* Breathing is for the rings the eye rests on: the hero, the cards, the
   roster rows in the frames. Clusters, stacks, message rings and the tree hold
   still, so a page with a hundred rings animates a dozen layers, not a hundred. */
.att-rings .ring svg, .eco-cluster .ring svg, .stack .ring svg, .stack-rings .ring svg, .tree-groups .ring svg, .tree-top .ring svg,
.left-depts .ring svg, .msg .ring svg, .phone-roster .ring svg, .open-desktop .rail .ring svg, .flow .ring svg, .chip-worker .ring svg,
.room-mini .ring svg, .dept-grid .ring svg { animation: none; }
@keyframes pulse { 0%, 70%, 100% { opacity: 1; } 78% { opacity: 0.45; } 86% { opacity: 1; } }

/* State colour on text: the status word and the current work share the
   ring's colour so a row reads at a glance. */
[data-state="working"] .state-text { color: var(--working); }
[data-state="waiting"] .state-text { color: var(--waiting); }
[data-state="blocked"] .state-text { color: var(--blocked-text); }
[data-state="info"] .state-text { color: var(--info); }
[data-state="idle"] .state-text { color: var(--text-3); }
.state-text { transition: color 400ms ease; }

.badge {
  display: inline-flex; align-items: center;
  height: 20px; padding: 0 8px;
  border-radius: 999px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.01em; line-height: 1;
  vertical-align: middle;
  margin-left: 8px;
}
.badge-manager { background: var(--gold); color: #1A1305; }
.badge-lead { border: 1px solid var(--border-strong); color: var(--text-2); }

/* ---------------------------------------------------------------- rows, cards */
.row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  min-width: 0;
}
.row-main { min-width: 0; display: grid; gap: 1px; }
.row-name { font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.35; }
.row-title { font-size: 12.5px; color: var(--text-2); }
.row-status { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.card {
  --pad: 28px;
  position: relative;
  display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center;
  padding: var(--pad);
  background: linear-gradient(180deg, #1B1F27, #161920);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  width: 520px; max-width: 100%;
}
.card-body { display: grid; gap: 4px; min-width: 0; }
.card-name { font-size: 28px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.1; color: var(--text); }
.card-title { font-size: 16px; color: var(--text-2); }
.card-status { font-size: 15px; margin-top: 6px; }
.card-reports { font-size: 13px; color: var(--text-3); margin-top: 10px; }
.card-reports b { font-weight: 500; color: var(--text-2); }
.card.small { --pad: 20px; width: 420px; gap: 18px; }
.card.small .card-name { font-size: 22px; }

/* Two texts stacked in one slot so a scene can cross-fade the work line
   without the row changing height. */
.swap { position: relative; display: inline-grid; }
.swap > span { grid-area: 1 / 1; transition: opacity 240ms ease; white-space: nowrap; }
.swap > .alt { opacity: 0; }
.swap.on > .alt { opacity: 1; }
.swap.on > .base { opacity: 0; }

/* ---------------------------------------------------------------- windows */
.window {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: var(--shadow-window);
  overflow: hidden;
  font-size: 14px;
  color: var(--text);
}
.window-head {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: rgba(29, 33, 41, 0.5);
}
.window-title { font-size: 16px; font-weight: 600; }
.window-sub { font-size: 12.5px; color: var(--text-3); }
.window-tabs { display: flex; gap: 2px; margin-left: auto; }
.window-tabs span { padding: 6px 10px; font-size: 12.5px; color: var(--text-3); border-radius: 6px; }
.window-tabs span.on { color: var(--text); background: var(--raised); }
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  font-size: 14px;
}
.panel-title {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 13px; font-weight: 600; color: var(--text-2);
  padding: 4px 12px 10px;
}
.panel-title .count { font-weight: 500; color: var(--text-3); font-size: 12.5px; }
.panel-title .count.working { color: var(--working); }
.panel-title .count.waiting { color: var(--waiting); }
.panel-title .count.blocked { color: var(--blocked-text); }
.pill {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  height: 26px; padding: 0 10px;
  border: 1px solid var(--border-strong); border-radius: 999px;
  font-size: 12px; color: var(--text-2);
  transition: color 240ms ease, border-color 240ms ease, background-color 240ms ease;
}
.pill.gold { color: var(--gold); border-color: rgba(226, 169, 59, 0.5); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--idle); flex: none; transition: background-color 240ms ease; }
.dot.working, .dot.connected { background: var(--working); }
.dot.waiting, .dot.unverified { background: var(--waiting); }
.dot.blocked, .dot.exhausted { background: var(--blocked); }
.dot.info { background: var(--info); }
.dot.signin, .dot.idle { background: var(--idle); }

/* buttons drawn inside product windows: demonstration only, never focusable */
.ui-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 30px; padding: 0 12px;
  border-radius: 8px; font-size: 12.5px; font-weight: 600;
  background: var(--raised); color: var(--text); border: 1px solid var(--border-strong);
  white-space: nowrap;
  transition: background-color 240ms ease, color 240ms ease, transform 160ms var(--ease-out), border-color 240ms ease;
}
.ui-btn.gold { background: var(--gold); color: #1A1305; border-color: transparent; }
.ui-btn.quiet { background: transparent; color: var(--text-2); }

/* ---------------------------------------------------------------- messages */
.msg {
  display: grid; grid-template-columns: 32px 1fr; gap: 12px;
  padding: 8px 0;
  align-items: start;
}
.msg-head { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; }
.msg-name { font-weight: 600; color: var(--text); }
.msg-time { color: var(--text-3); font-size: 12px; }
.msg-body { font-size: 14px; line-height: 1.5; color: var(--text); margin-top: 2px; }
.msg-body .state-text { font-weight: 600; }
.mcard {
  margin-top: 8px;
  background: var(--raised);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 12px 14px;
  max-width: 440px;
  display: grid; gap: 6px;
}
.mcard-title { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.mcard-detail { font-size: 12.5px; color: var(--text-2); }
.mcard-label { font-size: 12px; color: var(--text-3); }
.check { width: 18px; height: 18px; border-radius: 50%; background: var(--working); color: #062A15; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.check svg { width: 11px; height: 11px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--text-2); }
.chips b { font-weight: 600; color: var(--text); }
.mcard-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; align-items: center; }
.mcard-label { display: flex; align-items: center; gap: 8px; min-height: 18px; }
.mcard-label .check { visibility: hidden; }
.mcard.done .mcard-label { color: var(--working); font-weight: 600; }
.mcard.done .mcard-label .check { visibility: visible; }
.mcard.done .ui-btn.gold { background: var(--raised); color: var(--text-2); border-color: var(--border-strong); }

/* Entrance of a message on the scrubbed timeline: 16 px rise, 240 ms. */
.beat { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity 240ms ease, transform 240ms var(--ease-out); }
.beat.in { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- needs you */
.needs {
  display: inline-flex; align-items: center; gap: 10px;
  height: 40px; padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  color: var(--text-2);
  font-size: 13.5px; font-weight: 600;
  transition: border-color 240ms ease, color 240ms ease, background-color 240ms ease, box-shadow 400ms ease;
}
.needs-count {
  min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12.5px;
  background: var(--raised); color: var(--text-2);
  transition: background-color 240ms ease, color 240ms ease;
}
.needs.on { border-color: var(--gold); color: var(--gold); background: rgba(226, 169, 59, 0.08); box-shadow: 0 0 0 4px rgba(226, 169, 59, 0.12); }
.needs.on .needs-count { background: var(--gold); color: #1A1305; }

/* ---------------------------------------------------------------- activity */
.activity { display: grid; gap: 2px; }
.act {
  display: grid; grid-template-columns: 8px 1fr auto; gap: 10px; align-items: center;
  padding: 8px 12px; border-radius: 8px;
  font-size: 13px;
}
.act-text { color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-status { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.act.working .act-status { color: var(--working); }
.act.waiting .act-status { color: var(--waiting); }
.act.blocked .act-status { color: var(--blocked-text); }
.act.info .act-status { color: var(--info); }

/* ---------------------------------------------------------------- department summary */
.dept { padding: 8px 0 4px; }
.dept-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 12px; }
.dept-lead { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dept-name { font-size: 13px; font-weight: 600; color: var(--text); }
.dept-sum { font-size: 12px; color: var(--text-3); white-space: nowrap; transition: color 240ms ease; }
.dept-sum.working { color: var(--working); }
.dept-sum.waiting { color: var(--waiting); }
.dept-sum.blocked { color: var(--blocked-text); }
.dept .row { padding: 6px 12px; }
.stack { display: inline-flex; align-items: center; }
.stack .ring { margin-left: -8px; box-shadow: 0 0 0 2px var(--panel); border-radius: 50%; }
.stack .ring:first-child { margin-left: 0; }

/* ---------------------------------------------------------------- compute pools */
.pool {
  display: grid; grid-template-columns: 12px 24px minmax(0, 1fr) auto auto auto auto; gap: 14px; align-items: center;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(29, 33, 41, 0.35);
  min-height: 56px;
  position: relative;
}
.pool + .pool { margin-top: 6px; }
.pool > .brand-mark { color: var(--text-2); }
.pool-slot:empty { width: 0; margin-left: -14px; }
.pool-name { font-size: 15px; font-weight: 600; color: var(--text); }
.pool-via { font-size: 12.5px; color: var(--text-3); }
.pool-state { font-size: 13px; color: var(--text-2); text-align: right; white-space: nowrap; transition: color 240ms ease; }
.pool-note { font-size: 12px; color: var(--text-3); display: block; min-height: 16px; }
.pool[data-state="exhausted"] .pool-state { color: var(--blocked-text); }
.pool[data-state="unverified"] .pool-state { color: var(--waiting); }
.pool-workers { font-size: 13px; color: var(--text-2); text-align: right; white-space: nowrap; min-width: 82px; }
.pool-slot { display: flex; gap: 6px; min-height: 26px; align-items: center; }
.chip-worker {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 8px 0 3px;
  border-radius: 999px;
  background: var(--raised); border: 1px solid var(--border-strong);
  font-size: 12px; white-space: nowrap;
  will-change: transform;
}
.chip-worker .ring { --size: 20px; }
.chip-worker .ring img, .chip-worker .ring .initials { --inset: 3px; }
.chip-worker .ring .initials { font-size: 8px; }

/* ---------------------------------------------------------------- org tree */
.tree { position: relative; }
.tree-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.tree-lines path {
  fill: none; stroke: var(--border-strong); stroke-width: 1.5;
  stroke-dasharray: var(--len, 1000); stroke-dashoffset: var(--len, 1000);
  transition: stroke-dashoffset 1200ms var(--ease-out);
  transition-delay: var(--delay, 0ms);
}
.in .tree-lines path { stroke-dashoffset: 0; }
.tree-top { display: flex; justify-content: center; gap: 24px; margin-bottom: 96px; position: relative; z-index: 1; }
.tree-top .node { width: 300px; }
.node {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--panel); border: 1px solid var(--border-strong); border-radius: 12px;
  position: relative; z-index: 1;
}
.tree-groups { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; position: relative; z-index: 1; }
.group { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 6px; }
.row-status.stacked { white-space: normal; overflow: visible; }
.row-status.stacked .work { display: block; font-size: 12px; line-height: 1.3; color: var(--text-2); }
.group .panel-title { padding: 6px 8px 8px; }
.group .row { padding: 6px 8px; }
.group .row-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------------------------------------------------------------- phone */
.phone {
  width: 390px; max-width: 100%;
  aspect-ratio: 390 / 780;
  border-radius: 44px;
  background: var(--ground-deep);
  border: 1px solid var(--border-strong);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35), 0 0 0 6px #050608, 0 0 0 7px #2A2F3A;
  padding: 18px 14px;
  color: var(--text);
  font-size: 14px;
  overflow: hidden;
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
}
.phone-bar { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-2); padding: 0 8px; }
.phone-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 2px; font-weight: 600; font-size: 15px; }
.phone-needs { margin: 0 4px; }
.phone .needs { width: 100%; justify-content: space-between; }
.phone-roster { display: grid; gap: 2px; overflow: hidden; }
.phone-roster .dept-name { font-size: 12px; text-transform: none; color: var(--text-3); }
.phone-update { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 12px; display: grid; gap: 6px; font-size: 13px; }
.phone-update .msg-head { font-size: 13px; }
.phone-update ul { padding-left: 14px; list-style: disc; color: var(--text-2); display: grid; gap: 2px; font-size: 12.5px; }
.phone-update ul li::marker { color: var(--text-3); }
.phone-tabs { margin-top: auto; display: flex; justify-content: space-around; padding: 10px 0 2px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text-3); }
.phone-tabs span.on { color: var(--text); }

/* ================================================================ SCENES */

/* 1. One worker. Emptiness used once, deliberately. */
.scene-hero { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding-top: 24px; padding-bottom: 80px; }
.hero { align-items: center; }
.hero-copy { display: grid; gap: 28px; }
.hero-copy .h-hero { max-width: 9.2em; }
.hero-copy .lede { max-width: 28em; }
.hero-stage { display: grid; justify-items: end; align-content: center; position: relative; min-height: 500px; }
.hero-stage .card { position: relative; z-index: 2; transform: translateX(24px); }
.hero-stage .card .ring { --size: 128px; }
.hero-glow {
  position: absolute; width: 760px; height: 760px; right: -170px; top: 50%; margin-top: -380px;
  border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(226, 169, 59, 0.25), rgba(226, 169, 59, 0.08) 36%, rgba(226, 169, 59, 0) 64%);
}
/* Two ghost cards behind the first worker: the manager he reports to and the
   team he is on, so the organisation is hinted at before it is shown. */
.ghost {
  position: absolute; z-index: 1;
  display: flex; align-items: center; gap: 12px;
  width: 300px; padding: 14px 16px;
  background: var(--panel); border: 1px solid var(--border-strong); border-radius: 12px;
  opacity: 0.4; filter: blur(1.5px); pointer-events: none;
}
.ghost .row-main { gap: 2px; }
/* decorative, behind a blur: painted with a gradient so a contrast checker reviews it rather than scoring it as text */
.ghost .badge { background-image: linear-gradient(var(--gold), var(--gold)); }
.ghost-manager { right: -44px; top: 0; }
.ghost-team { left: 36px; bottom: 26px; }
.hero-activity {
  position: relative; z-index: 2;
  width: 520px; max-width: 100%; margin-top: 14px; transform: translateX(24px);
  background: rgba(22, 25, 32, 0.75); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 14px;
}

/* 2. The worker works (pinned). Copy left in four columns, a chat window that
   bleeds off the right edge. */
.scene-pin { min-height: 100vh; display: flex; align-items: center; padding: 68px 0 0; }
.scene-pin .will { will-change: transform, opacity; }
.wake { align-items: center; }
.wake-copy { display: grid; gap: 20px; }
.wake-stage { position: relative; }
.wake .window { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 280px; }
.wake-chat { padding: 24px 28px; display: grid; gap: 14px; align-content: start; min-height: 470px; }
.wake-chat .card { width: 100%; box-shadow: none; background: var(--raised); }
.wake-chat .card .ring { --size: 96px; }
.wake-rail { border-left: 1px solid var(--border); padding: 20px 16px; background: rgba(16, 18, 23, 0.4); display: grid; gap: 6px; align-content: start; }
.wake-rail .act { opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity 240ms ease, transform 240ms var(--ease-out); }
.wake-rail .act.in { opacity: 1; transform: none; }
.msg.you .ring .initials { background: linear-gradient(160deg, #3A3222, #241E12); color: var(--gold); }
.msg.you .ring { --state: var(--gold); }
.msg.slide { opacity: 0; transform: translate3d(-32px, 0, 0); transition: opacity 320ms ease, transform 420ms var(--ease-out); }
.msg.slide.in { opacity: 1; transform: none; }

/* 3. Reports to: the worker slides down and left, the manager appears above. */
.reports-stage { position: relative; height: 500px; }
.reports-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.reports-stage path { fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: var(--len, 900); stroke-dashoffset: var(--len, 900); transition: stroke-dashoffset 1200ms var(--ease-out) 500ms; opacity: 0.9; }
.in .reports-stage path { stroke-dashoffset: 0; }
.reports-stage .card { position: absolute; }
.reports-stage .card.worker { left: 50%; top: 100px; margin-left: -210px; transition: transform 900ms var(--ease-out); }
.in .reports-stage .card.worker { transform: translate3d(-220px, 230px, 0); }
.reports-stage .card.manager { left: 50%; top: 0; margin-left: 30px; opacity: 0; transform: translate3d(0, -24px, 0); transition: opacity 600ms var(--ease-out) 350ms, transform 600ms var(--ease-out) 350ms; }
.in .reports-stage .card.manager { opacity: 1; transform: none; }
.reports-stage .label { position: absolute; font-size: 12.5px; color: var(--gold); background: var(--ground); padding: 2px 8px; border-radius: 6px; left: 50%; top: 50%; margin: 40px 0 0 40px; opacity: 0; transition: opacity 400ms ease 1300ms; }
.in .reports-stage .label { opacity: 1; }

/* 4. The team: a Platform roster left, the team room overlapping right. */
.team-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 520px; align-items: start; }
.team-roster { grid-column: 2; grid-row: 1; z-index: 2; margin-left: -116px; margin-top: 136px; box-shadow: var(--shadow-card); background: var(--raised); }
.team-roster .row { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
.team-roster .row:nth-child(2) { transition-delay: 60ms; }
.team-roster .row:nth-child(3) { transition-delay: 120ms; }
.team-roster .row:nth-child(4) { transition-delay: 180ms; }
.team-roster .row:nth-child(5) { transition-delay: 240ms; }
.in .team-roster .row { opacity: 1; transform: none; }
.team-roster .row:first-child { transition-delay: 0ms; }
.team-room { grid-column: 1; grid-row: 1; z-index: 1; min-height: 480px; }
.team-room .msg-body { max-width: 520px; }
.team-room .window-body { padding: 8px 24px 20px; }

/* 5. The room (pinned, the centrepiece) and 6, the pull back, share one pin. */
.pinpair { position: relative; }
.pinpair .scene-room { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 68px 0 0; }
.room-copy { align-items: center; margin-bottom: 14px; }
.room-intro { display: grid; gap: 2px; }
.room-intro .lede { font-size: 15px; line-height: 1.45; }
.pinpair .scene-room .h-section { font-size: 44px; }
.pinpair .scene-room { padding-top: 76px; }
.room-strip { display: none; }
.room-copy .lede { padding-bottom: 6px; }
.room { width: 1180px; max-width: 100%; margin-inline: auto; height: min(580px, calc(100vh - 260px)); min-height: 400px; display: grid; grid-template-columns: 232px minmax(0, 1fr) 300px; transform-origin: 0 0; }
/* left: the workforce roster, as the application draws it */
.room-left { border-right: 1px solid var(--border); background: rgba(16, 18, 23, 0.4); padding: 10px 10px; display: grid; gap: 6px; align-content: start; overflow: hidden; min-height: 0; }
.room-left-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 6px 6px; }
.app-mark { display: inline-flex; align-items: center; gap: 7px; font-family: var(--display); font-weight: 600; font-size: 14px; color: var(--text); }
.app-glyph { width: 17px; height: 17px; flex: none; }
.app-mark .ai { color: var(--text-2); font-weight: 500; }
.rail-label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); padding: 0 6px; }
.room-left .needs { width: 100%; justify-content: space-between; height: 36px; }
.org-line { display: grid; gap: 1px; padding: 6px 6px 2px; font-size: 13px; }
.org-line b { font-weight: 600; }
.org-sub { font-size: 12px; color: var(--text-3); }
.left-depts { display: grid; gap: 2px; overflow: hidden; }
.left-depts .dept { padding: 4px 0 2px; }
.left-depts .dept-head { padding: 4px 6px; }
.left-depts .dept-name { font-size: 12.5px; }
.left-depts .dept-sum { font-size: 11.5px; }
.left-depts .row { padding: 3px 6px; gap: 8px; }
.left-depts .row-name { font-size: 13px; }
.left-depts .row-status { font-size: 11.5px; }
/* centre: the room */
.room-centre { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
.room-chat { display: flex; flex-direction: column; padding: 8px 24px 16px; overflow: hidden; min-height: 0; }
.room-chat .msg:not(.in) { visibility: hidden; }
.room-chat .room-compose { margin-top: auto; }
.room-compose { margin-top: 10px; height: 40px; border: 1px solid var(--border-strong); border-radius: 10px; display: flex; align-items: center; padding: 0 14px; color: var(--text-3); font-size: 13px; flex: none; }
/* right: Details, worker activity, approvals, routines, Activity */
.room-rail { border-left: 1px solid var(--border); background: rgba(16, 18, 23, 0.4); padding: 14px 14px; display: grid; gap: 10px; align-content: start; overflow: hidden; min-height: 0; }
.room-rail .act:not(.in) { visibility: hidden; }
.rail-title { font-size: 12.5px; font-weight: 600; color: var(--text-3); padding: 6px 6px 2px; display: flex; justify-content: space-between; align-items: baseline; }
.rail-count { font-weight: 500; font-size: 12px; color: var(--text-3); }
.details-head { display: flex; justify-content: space-between; align-items: center; }
.details-goal { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 6px; }
.details-title { font-size: 15px; font-weight: 600; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 0 4px; }
.tile { border: 1px solid var(--border); border-radius: 8px; padding: 8px 6px; text-align: center; display: grid; gap: 2px; background: rgba(29, 33, 41, 0.35); }
.tile b { font-family: var(--display); font-size: 20px; font-weight: 600; line-height: 1; letter-spacing: -0.02em; transition: color 240ms ease; }
.tile span { font-size: 11px; color: var(--text-3); }
.tile.working b { color: var(--working); }
.tile.waiting b { color: var(--info); }
.tile.blocked b { color: var(--blocked-text); }
.tile.approval b { color: var(--waiting); }
.pending { display: grid; grid-template-columns: 8px 1fr auto; gap: 10px; align-items: center; padding: 8px 8px; margin: 0 4px; border-radius: 8px; border: 1px solid rgba(226, 169, 59, 0.35); background: rgba(226, 169, 59, 0.06); opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity 240ms ease, transform 240ms var(--ease-out); }
.pending.in { opacity: 1; transform: none; }
.pending-title { font-size: 13px; font-weight: 600; }
.pending-sub { font-size: 11.5px; color: var(--text-3); }
.rail-routines { display: grid; gap: 2px; padding: 0 4px; }
.rail-routine { display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; align-items: center; font-size: 12.5px; padding: 5px 4px; }
.routine-glyph { width: 14px; height: 14px; border-radius: 3px; border: 1.5px solid var(--text-3); position: relative; }
.routine-glyph::after { content: ''; position: absolute; left: 3px; top: 3px; width: 4px; height: 4px; border-radius: 1px; background: var(--text-3); }
.routine-n { color: var(--text); }
.routine-c { color: var(--text-3); font-size: 11.5px; white-space: nowrap; }
.needs.flash { animation: flash 900ms ease-out 1; }
@keyframes flash { 0% { box-shadow: 0 0 0 0 rgba(226, 169, 59, 0.55); } 100% { box-shadow: 0 0 0 18px rgba(226, 169, 59, 0); } }

/* 6. Pull back: the room shrinks into a grid of unequal cells. */
.scene-depts { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 68px 0 0; opacity: 0; pointer-events: none; }
.scene-depts.on { opacity: 1; pointer-events: auto; }
.dept-grid { display: grid; grid-template-columns: 378px repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.dept-cell { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 18px; display: grid; gap: 10px; align-content: start; min-height: 190px; }
.dept-cell.room-cell { padding: 0; border-color: transparent; background: transparent; position: relative; overflow: visible; }
.dept-cell .h-tiny { font-size: 20px; }
.dept-cell .count { font-size: 13px; color: var(--text-3); }
.dept-cell .sum { font-size: 14px; margin-top: auto; }
.dept-cell .sum.working { color: var(--working); }
.dept-cell .sum.waiting { color: var(--waiting); }
.dept-cell .sum.blocked { color: var(--blocked-text); }
.room-mini { transform-origin: 0 0; position: absolute; left: 0; top: 0; width: 1180px; pointer-events: none; }

/* 7. The organization: the one centred scene. */
.scene-org { text-align: center; }
.scene-org .h-section { max-width: 12em; margin-inline: auto; }
.scene-org .lede { margin-inline: auto; text-align: center; }
.scene-org .tree { margin-top: 72px; text-align: left; }

/* 8. Work continues: routines left, activity right, the summary below. */
.routines { display: grid; gap: 6px; }
.routine { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px; border-radius: 10px; border: 1px solid var(--border); background: rgba(29, 33, 41, 0.35); }
.routine-name { font-weight: 600; font-size: 14px; }
.routine-cad { font-size: 12.5px; color: var(--text-3); grid-column: 1; }
.routine-last { font-size: 12.5px; color: var(--working); text-align: right; grid-row: 1 / 3; align-self: center; display: flex; align-items: center; gap: 6px; }
.summary-msg { margin-top: 24px; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 20px 24px; }
.summary-msg .msg { grid-template-columns: 40px 1fr; gap: 14px; }
.summary-msg .msg-body { display: grid; gap: 12px; }
.summary-body h3 { font-size: 14px; font-weight: 600; margin-bottom: 2px; display: flex; align-items: center; gap: 8px; }
.summary-body ul { padding-left: 16px; list-style: disc; color: var(--text-2); font-size: 13.5px; display: grid; gap: 2px; }
.summary-body li::marker { color: var(--text-3); }
.summary-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; }

/* 10. AI Compute (pinned): heading left in three columns, Settings in nine. */
.compute { align-items: center; }
.compute-copy { display: grid; gap: 18px; }
.settings { display: grid; grid-template-rows: auto auto minmax(0, 1fr); }
.settings-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 24px 6px; }
.settings-title { font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: -0.01em; }
.settings-x { width: 14px; height: 14px; position: relative; opacity: 0.6; }
.settings-x::before, .settings-x::after { content: ''; position: absolute; left: 6px; top: -1px; width: 1.5px; height: 16px; background: var(--text); transform: rotate(45deg); }
.settings-x::after { transform: rotate(-45deg); }
.settings-tabs { display: flex; gap: 4px; padding: 0 16px; border-bottom: 1px solid var(--border); }
.settings-tabs span { padding: 8px 10px 10px; font-size: 13px; color: var(--text-3); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.settings-tabs span.on { color: var(--text); border-bottom-color: var(--gold); }
.compute-panel { padding: 16px 24px 16px; }
.compute-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 10px; }
.compute-head .h-tiny { font-size: 22px; }
.compute-head p { font-size: 13px; color: var(--text-2); max-width: 48em; margin-top: 4px; line-height: 1.45; }
.compute-head .actions { gap: 8px; flex: none; }
.compute-status { display: flex; align-items: center; gap: 12px; padding: 5px 8px 5px 14px; border: 1px solid var(--border); border-radius: 10px; font-size: 13px; color: var(--text-2); margin-bottom: 10px; }
.compute-status .rebalanced { margin-left: auto; color: var(--working); opacity: 0; transition: opacity 400ms ease; padding-right: 6px; }
.compute-status .rebalanced.in { opacity: 1; }
.compute-avail { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.avail-title { font-size: 14px; font-weight: 600; }
.compute-avail p { font-size: 12.5px; color: var(--text-3); margin: 2px 0 8px; max-width: 60em; }
.avail-row { display: flex; align-items: center; gap: 12px; padding: 6px 14px; border: 1px solid var(--border); border-radius: 10px; font-size: 13.5px; }
.avail-state { color: var(--text-3); font-size: 12.5px; }
.avail-link { color: var(--gold); font-size: 12.5px; text-decoration: underline; text-underline-offset: 0.15em; }

/* 11. Bring your AI agents: three worker columns, then the agents and providers. */
.stack-stage { display: grid; gap: 40px; }
.flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.flow-col { display: grid; justify-items: stretch; gap: 0; }
.flow-step { background: var(--panel); border: 1px solid var(--border-strong); border-radius: 12px; padding: 12px 14px; display: grid; gap: 8px; transition: border-color 400ms ease, box-shadow 400ms ease, opacity 400ms ease; opacity: 0.55; }
.flow-step.worker { padding: 12px 14px 10px; }
.flow-step .row { padding: 0; }
.flow-step .bchip { border: 0; padding: 0; height: auto; font-size: 15px; }
.flow-k { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.flow-link { display: block; width: 1.5px; height: 28px; margin: 0 auto; background: linear-gradient(var(--border-strong), var(--gold)); opacity: 0.4; transition: opacity 400ms ease; }
.flow-col.lit .flow-step { opacity: 1; border-color: rgba(226, 169, 59, 0.45); box-shadow: 0 0 0 1px rgba(226, 169, 59, 0.08), var(--shadow-card); }
.flow-col.lit .flow-link { opacity: 1; }
.eco-row { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start; padding-top: 24px; border-top: 1px solid var(--border); }
.eco-label { font-family: var(--display); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; display: grid; gap: 4px; }
.eco-label span { font-family: var(--sans); font-weight: 400; font-size: 14px; color: var(--text-3); letter-spacing: 0; }
.eco-chips { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.eco-families { flex-basis: 100%; display: grid; gap: 8px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.eco-families-k { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.eco-family-marks { display: flex; flex-wrap: wrap; gap: 8px; }
.eco-families-note { font-size: 13px; color: var(--text-3); }
.eco-note { font-size: 14px; color: var(--text-3); max-width: 60em; }

/* 12. The ecosystem: three layers into Korps, and out as one workforce. */
.eco-stage { position: relative; display: grid; grid-template-columns: 300px minmax(0, 1fr) 320px; gap: 72px; align-items: center; min-height: 520px; }
.eco-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.eco-lines path { fill: none; stroke: var(--gold); stroke-width: 1.25; opacity: 0.6; stroke-dasharray: var(--len, 800); stroke-dashoffset: var(--len, 800); transition: stroke-dashoffset 1400ms var(--ease-out); transition-delay: var(--delay, 0ms); }
.in .eco-lines path { stroke-dashoffset: 0; }
.eco-layers { display: grid; gap: 18px; position: relative; z-index: 1; }
.eco-layer { background: var(--panel); border: 1px solid var(--border-strong); border-radius: 12px; padding: 12px 14px; display: grid; gap: 10px; opacity: 0; transform: translate3d(-24px, 0, 0); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.eco-layer:nth-child(2) { transition-delay: 120ms; }
.eco-layer:nth-child(3) { transition-delay: 240ms; }
.in .eco-layer { opacity: 1; transform: none; }
.eco-layer-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14px; }
.eco-layer-head b { font-weight: 600; }
.eco-layer-head span { font-size: 12.5px; color: var(--text-3); }
.eco-marks { display: flex; flex-wrap: wrap; gap: 6px; }
.eco-mark { width: 36px; height: 36px; border-radius: 8px; background: var(--raised); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; color: var(--text-2); }
.eco-core { position: relative; z-index: 1; justify-self: center; width: 100%; max-width: 360px; display: grid; gap: 10px; padding: 24px 24px 20px; border-radius: 16px; background: linear-gradient(180deg, #22201A, #161920); border: 1px solid rgba(226, 169, 59, 0.55); box-shadow: 0 0 90px rgba(226, 169, 59, 0.22), 0 24px 48px rgba(0, 0, 0, 0.3); text-align: center; opacity: 0; transform: scale(0.96); transition: opacity 700ms var(--ease-out) 300ms, transform 700ms var(--ease-out) 300ms; }
.in .eco-core { opacity: 1; transform: none; }
.eco-core .app-mark { justify-content: center; font-size: 26px; }
.eco-core .app-glyph { width: 30px; height: 30px; }
.eco-core-sub { font-size: 14px; color: var(--text-2); }
.eco-core-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 6px; }
.eco-core-list span { font-size: 12.5px; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--text-2); }
.eco-out { position: relative; z-index: 1; display: grid; gap: 12px; opacity: 0; transform: translate3d(24px, 0, 0); transition: opacity 600ms var(--ease-out) 700ms, transform 600ms var(--ease-out) 700ms; }
.in .eco-out { opacity: 1; transform: none; }
.eco-out-head { display: grid; gap: 2px; font-size: 14px; }
.eco-out-head b { font-family: var(--display); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.eco-out-head span { color: var(--text-3); font-size: 13px; }
.eco-cluster { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* 13. Connected to your business: tools and apps, then one action end to end. */
.apps-stage { display: grid; gap: 24px; }
.apps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.apps .bchip { height: 62px; padding: 0 14px; border-radius: 12px; background: var(--panel); font-size: 14px; justify-content: flex-start; gap: 12px; width: 100%; opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
.in .apps .bchip { opacity: 1; transform: none; }
.apps .bchip:nth-child(n+2) { transition-delay: 40ms; }
.apps .bchip:nth-child(n+5) { transition-delay: 100ms; }
.apps .bchip:nth-child(n+9) { transition-delay: 160ms; }
.apps .bchip:nth-child(n+13) { transition-delay: 220ms; }
.apps .bchip:nth-child(n+17) { transition-delay: 280ms; }
.apps .bchip .bchip-name { overflow: hidden; text-overflow: ellipsis; }
.apps-more { display: flex; align-items: center; gap: 12px; font-size: 17px; color: var(--text); flex-wrap: wrap; }
.apps-more-marks { display: inline-flex; gap: 8px; color: var(--text-2); }
.apps-legend { font-size: 14px; color: var(--text-3); max-width: 60em; }
.action-window { max-width: 760px; }
.action-body { padding: 8px 24px 20px; display: grid; gap: 4px; }
.action-trail { margin: 8px 0 0 44px; display: grid; gap: 2px; border-left: 1px solid var(--border-strong); padding-left: 12px; }
.action-trail .act { grid-template-columns: 16px 1fr auto; padding: 6px 8px; }
.action-trail .brand-mark { color: var(--text-2); }

/* 11. Open source: the one paper passage, with bands in and out. */
.scene.scene-open { background: var(--paper); color: var(--ink); padding: 0; margin-top: 40px; }
/* The paper starts and ends on a crisp warm rule, and the light falls inward
   from both edges (an inset shadow) rather than fading outside the section. */
.band { display: none; }
.scene.scene-open {
  border-top: 1px solid var(--paper-rule); border-bottom: 1px solid var(--paper-rule);
  box-shadow: inset 0 24px 32px -24px rgba(21, 23, 27, 0.18), inset 0 -24px 32px -24px rgba(21, 23, 27, 0.18);
}
.open-body { padding: 88px 0 88px; }
.scene-open .h-section, .scene-open .h-sub { color: var(--ink); }
.scene-open .lede { color: var(--ink-2); }
.open-copy { display: grid; gap: 28px; align-content: start; }
.open-clients { display: grid; gap: 28px; }
.client h3 { font-family: var(--display); font-weight: 600; font-size: 24px; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 8px; }
.client p { font-size: 17px; color: var(--ink-2); line-height: 1.5; }
.open-mark { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ink); font-weight: 500; }
.open-mark svg { width: 28px; height: 28px; }
.open-stage { position: relative; min-height: 720px; }
.open-stage .phone { position: absolute; left: 0; bottom: 0; z-index: 2; width: 260px; }
.open-desktop { position: absolute; right: 0; top: 0; width: 640px; max-width: 100%; }
.open-desktop .window { box-shadow: 0 40px 80px rgba(21, 23, 27, 0.25); }
.open-desktop .window-body { display: grid; grid-template-columns: 200px minmax(0, 1fr) 190px; min-height: 420px; }
.open-desktop .rail { display: grid; gap: 4px; align-content: start; }
.open-desktop .rail .needs { width: 100%; justify-content: space-between; height: 34px; font-size: 12.5px; margin-bottom: 4px; }
.open-desktop .side { border-left: 1px solid var(--border); padding: 10px 8px; display: grid; gap: 4px; align-content: start; font-size: 12.5px; }
.open-desktop .side .act { grid-template-columns: 8px minmax(0, 1fr); }
.open-desktop .side .act-status { display: none; }
.open-desktop .side .act { padding: 5px 6px; font-size: 12px; }
.open-desktop .rail { border-right: 1px solid var(--border); padding: 12px 8px; }
.open-desktop .rail .row { padding: 5px 8px; }
.open-desktop .rail .row-title { display: none; }
.open-desktop .main { padding: 16px 20px; display: grid; gap: 12px; align-content: start; }

/* 12. Korps Cloud: back in the dark, lit gold, the system view. */
.scene-cloud { padding-top: 40px; }
.cloud { align-items: start; }
.cloud-copy { display: grid; gap: 24px; }
.cloud-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px; font-size: 16px; color: var(--text-2); }
.cloud-list li { padding: 6px 0; border-bottom: 1px solid var(--border); }
.system { position: relative; width: 640px; max-width: 100%; height: 620px; margin: 24px 0 0 auto; }
.system svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.system path { fill: none; stroke: var(--gold); stroke-width: 1.25; opacity: 0.7; stroke-dasharray: var(--len, 600); stroke-dashoffset: var(--len, 600); transition: stroke-dashoffset 1200ms var(--ease-out); transition-delay: var(--delay, 0ms); }
.in .system path { stroke-dashoffset: 0; }
.sys-node { position: absolute; transform: translate(-50%, -50%); padding: 10px 16px; border-radius: 10px; background: var(--panel); border: 1px solid var(--border-strong); font-size: 14px; font-weight: 500; white-space: nowrap; display: flex; align-items: center; gap: 8px; }
.sys-node .dot { width: 6px; height: 6px; }
.sys-core { left: 50%; top: 50%; width: 264px; display: grid; gap: 2px; white-space: normal; padding: 18px 20px 16px; border-radius: 14px; background: linear-gradient(180deg, #22201A, #161920); border-color: rgba(226, 169, 59, 0.55); box-shadow: 0 0 80px rgba(226, 169, 59, 0.22), 0 24px 48px rgba(0, 0, 0, 0.3); }
.sys-core .h-tiny { font-size: 22px; }
.sys-core small { font-size: 13px; color: var(--text-2); }
.sys-counts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-top: 12px; font-size: 12.5px; color: var(--text-2); }
.sys-counts b { display: block; font-family: var(--display); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; color: var(--text); line-height: 1; margin-bottom: 2px; }

/* 12. Get Korps: two platforms with their own light, and a quiet row for iOS. */
.scene-get { padding-top: 40px; }
.platforms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.platform { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 28px; align-items: start; padding: 32px; background: var(--panel); border: 1px solid var(--border-strong); border-radius: 14px; overflow: hidden; }
.platform::before { content: ''; position: absolute; left: -80px; top: -120px; width: 360px; height: 360px; border-radius: 50%; pointer-events: none; }
.platform.windows::before { background: radial-gradient(circle, rgba(76, 141, 255, 0.12), rgba(76, 141, 255, 0) 65%); }
.platform.android::before { background: radial-gradient(circle, rgba(61, 220, 132, 0.2), rgba(61, 220, 132, 0) 65%); }
.platform-mark { width: 72px; height: 72px; position: relative; }
.platform-mark.small { width: 48px; height: 48px; }
.platform-body { display: grid; gap: 8px; position: relative; }
.platform-role { color: var(--text-2); font-size: 17px; }
.platform-version { font-size: 15px; color: var(--text); margin-top: 6px; }
.platform-version a { color: var(--text-2); }
.platform-note { font-size: 14px; color: var(--waiting); }
.platform-req { font-size: 14px; color: var(--text-3); }
.platform-body .btn { margin-top: 6px; }
.platform.ios { grid-column: 1 / -1; grid-template-columns: 48px minmax(0, 1fr); align-items: center; padding: 20px 32px; background: transparent; border-color: var(--border); }
.platform.ios .platform-body { display: flex; gap: 16px; align-items: baseline; }
.platform.ios .h-tiny { font-size: 22px; }
.sha { font-size: 13px; color: var(--text-3); }
.sha summary { cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; color: var(--text-2); list-style: none; }
.sha summary::-webkit-details-marker { display: none; }
.sha summary::before { content: ''; width: 7px; height: 7px; margin-right: 10px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform 200ms ease; }
.sha[open] summary::before { transform: rotate(45deg); }
.sha summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.sha-field { display: block; width: 100%; min-height: 40px; padding: 8px 12px; background: var(--ground); border: 1px solid var(--border-strong); border-radius: 8px; color: var(--text-2); font-family: var(--sans); font-size: 13px; line-height: 1.45; word-break: break-all; resize: none; }
.sha-field:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.get-line { margin-top: 32px; font-size: 17px; color: var(--text-2); }
.get-links { display: flex; flex-wrap: wrap; gap: 0 28px; align-items: center; margin-top: 4px; font-size: 16px; }
.get-links li { display: inline-flex; align-items: baseline; gap: 10px; }
.get-note { font-size: 13px; color: var(--text-3); }
.end-downloads { margin-top: -8px; }

/* 14. Under command: the whole workforce, loosely gathered, three of them breathing. */
.scene-end { padding-bottom: 96px; }
.scene-end .cols { align-items: center; }
.end-copy { display: grid; gap: 32px; }
.end-downloads { margin-top: -12px; margin-left: -0.6rem; }
.workforce { position: relative; height: 440px; }
.workforce-inner { position: absolute; inset: 0; }
.workforce .ring { position: absolute; transform: translate(-50%, -50%); }

/* ---------------------------------------------------------------- brands and technical cues */
.brand-mark { display: inline-flex; align-items: center; justify-content: center; width: var(--bsize, 20px); height: var(--bsize, 20px); flex: none; color: currentColor; }
.brand-mark svg { width: 100%; height: 100%; display: block; }
/* A brand with no usable public mark is set as type, in the display face, so
   it reads as a considered wordmark rather than an initials box. */
.bchip.wordmark .bchip-name { font-family: var(--display); font-weight: 600; letter-spacing: -0.01em; }
.bchip.wordmark::before { content: ''; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.45; flex: none; }
.bchip { display: inline-flex; align-items: center; gap: 9px; flex: none; height: 40px; padding: 0 14px 0 10px; border-radius: 10px; border: 1px solid var(--border-strong); background: rgba(29, 33, 41, 0.35); color: var(--text); font-size: 14px; font-weight: 500; white-space: nowrap; }
.bchip .brand-mark { color: var(--text); }
.bchip-status { font-size: 11.5px; font-weight: 500; color: var(--text-3); padding-left: 8px; margin-left: 2px; border-left: 1px solid var(--border-strong); }
.bchip.st-byo .bchip-status { color: var(--text-2); }
.bchip.st-korps .bchip-status { color: var(--gold); }

.bchip.big { height: 52px; padding: 0 20px 0 14px; font-size: 17px; gap: 12px; border-radius: 12px; }
.bchip.big .bchip-status { font-size: 12.5px; padding-left: 12px; }
.bchip.quiet { height: 32px; padding: 0 10px 0 8px; font-size: 13px; color: var(--text-2); background: transparent; border-color: var(--border); gap: 7px; }
.bchip.quiet .brand-mark { color: var(--text-2); }
.bchip.inline { height: 24px; padding: 0 8px 0 6px; font-size: 13px; gap: 6px; vertical-align: middle; }
.tech { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--text-2); }
.tech-item { display: inline-flex; align-items: center; gap: 6px; }
.tech-k { color: var(--text-3); }
.tech-v { color: var(--text); font-weight: 500; }
.tech .brand-mark { color: var(--text-2); }
.card-tech { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.ai-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; margin-left: 8px; border-radius: 999px; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--info); border: 1px solid rgba(76, 141, 255, 0.45); vertical-align: middle; }
.card-name .ai-tag { position: relative; top: -3px; }
.stack-rings { display: inline-flex; align-items: center; }
.stack-rings .ring { margin-left: -8px; box-shadow: 0 0 0 2px var(--panel); border-radius: 50%; }
.stack-rings .ring:first-child { margin-left: 0; }

/* 1b. the hero's line and its stack strip */
.hero-line { font-family: var(--display); font-weight: 600; font-size: 22px; letter-spacing: -0.01em; color: var(--text-2); margin-top: -8px; }
.hero-copy .actions .btn-glyph { width: 14px; height: 14px; margin-right: 8px; }
.hero-stack { display: grid; gap: 12px; margin-top: 72px; justify-items: center; text-align: center; }
.stack-label { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.stack-row { display: flex; flex-wrap: wrap; gap: 10px; border-radius: 8px; justify-content: center; }
.hero-stack .bchip.big { background: rgba(29, 33, 41, 0.5); }
.stack-row:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.hero-media, .scene-media { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero-media img, .hero-media video, .scene-media img, .scene-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.34; mask-image: linear-gradient(180deg, rgba(0,0,0,0.85), rgba(0,0,0,0) 88%); -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.85), rgba(0,0,0,0) 88%); }
/* The still holds the frame; the loop fades in over it once it is actually
   playing, so a blocked or slow video is never a black rectangle. */
.hero-media video, .scene-media video { opacity: 0; transition: opacity 1600ms ease; }
.hero-media.playing video, .scene-media.playing video { opacity: 0.34; }
.hero-media.playing img, .scene-media.playing img { opacity: 0; transition: opacity 1600ms ease; }
.scene-media { opacity: 0.7; mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 22%, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%); -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 22%, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%); }
.scene-cloud { position: relative; }
.scene-cloud .wrap { position: relative; z-index: 1; }
.scene-hero { position: relative; }
.scene-hero .wrap { position: relative; z-index: 1; }
.card-name .badge { position: relative; top: -3px; }

/* 8. Needs You and manager attention */
.att-stage { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: start; }
.att-board { background: var(--panel); border: 1px solid var(--border-strong); border-radius: 14px; padding: 24px; display: grid; gap: 20px; }
.att-figures { display: flex; gap: 40px; align-items: flex-end; }
.fig { display: grid; gap: 4px; }
.fig b { font-family: var(--display); font-weight: 600; font-size: 72px; line-height: 0.9; letter-spacing: -0.04em; }
.fig span { font-size: 14px; color: var(--text-2); }
.fig.working b { color: var(--working); }
.fig.waiting b { color: var(--gold); }
.att-rings { display: flex; flex-wrap: wrap; gap: 8px; }
.att-needs { display: grid; gap: 10px; }
.att-needs .needs { width: 100%; justify-content: space-between; }
.att-needs .pending { margin: 0; }
.att-list { display: grid; gap: 4px; align-content: start; }
.att-row { display: grid; grid-template-columns: 8px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); }
.att-label { font-size: 14px; font-weight: 600; }
.att-example { font-size: 12.5px; color: var(--text-3); }
.att-to { display: grid; text-align: right; font-size: 12px; color: var(--text-3); }
.att-to b { font-size: 13px; color: var(--text); font-weight: 600; }
.att-row[data-state="needs_you"] { border-color: rgba(226, 169, 59, 0.45); background: rgba(226, 169, 59, 0.05); }
.att-row[data-state="needs_you"] .att-to b { color: var(--gold); }

/* 9b. routines carry their own actions, as the panel does */
.routine-actions { grid-column: 1 / -1; display: flex; gap: 6px; margin-top: 4px; }
.routine-actions .ui-btn { height: 26px; font-size: 12px; padding: 0 8px; }

/* 17. Plans */
.plans-stage { display: grid; gap: 40px; }
.tiers { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.tier { position: relative; display: grid; gap: 10px; align-content: start; padding: 24px 20px; background: var(--panel); border: 1px solid var(--border-strong); border-radius: 14px; }
.tier.popular { border-color: rgba(226, 169, 59, 0.6); background: linear-gradient(180deg, #1D1B16, #161920); box-shadow: 0 0 60px rgba(226, 169, 59, 0.12); }
.tier-flag { position: absolute; top: -12px; left: 20px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #1A1305; background: var(--gold); padding: 4px 9px; border-radius: 999px; }
.tier-name { font-family: var(--display); font-weight: 600; font-size: 24px; letter-spacing: -0.02em; }
.tier-price b { font-family: var(--display); font-weight: 600; font-size: 34px; letter-spacing: -0.03em; }
.tier-price span { color: var(--text-3); font-size: 14px; }
.tier-workers { font-size: 15px; color: var(--text); }
.tier-workers b { font-weight: 600; }
.tier-line { font-size: 13.5px; color: var(--text-2); min-height: 3.2em; }
.tier .btn { justify-self: start; margin-top: 6px; }
.plan-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 48px; }
.plan-fact .h-tiny { font-size: 22px; margin-bottom: 12px; }
.plan-fact ul { display: grid; gap: 6px; font-size: 15px; color: var(--text-2); }
.plan-fact li { padding-left: 16px; position: relative; }
.plan-fact li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.byo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.byo-panel { padding: 24px; display: grid; gap: 10px; align-content: start; }
.byo-k { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.byo-panel .h-tiny { font-size: 24px; }
.byo-panel p { font-size: 15px; color: var(--text-2); }
.byo-marks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.byo-usage { display: grid; gap: 8px; margin-top: 6px; padding: 14px; border: 1px solid var(--border); border-radius: 10px; }
.usage-row { display: flex; justify-content: space-between; font-size: 14px; }
.usage-row b { font-family: var(--display); font-weight: 600; font-size: 18px; }
.usage-row.small { font-size: 12.5px; color: var(--text-3); }
.usage-bar { height: 6px; border-radius: 3px; background: var(--raised); overflow: hidden; }
.usage-bar span { display: block; height: 100%; background: var(--gold); border-radius: 3px; }
.plan-note { font-size: 14px; color: var(--text-2); max-width: 64em; line-height: 1.7; }
.plan-foot { margin-top: 24px; font-size: 14px; color: var(--text-3); max-width: 60em; }

/* ---------------------------------------------------------------- entrances shared by every width
   Each is one transition of transform and opacity, triggered by the scene's
   .in class, with a small stagger so a group arrives as a group. */
.hero-stage .card, .hero-stage .hero-activity { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.hero-stage .hero-activity { transition-delay: 160ms; }
.in .hero-stage .card, .in .hero-stage .hero-activity { opacity: 1; transform: none; }
.hero-stack .bchip { opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
.in .hero-stack .bchip { opacity: 1; transform: none; }
.hero-stack .stack-row:nth-child(2) .bchip:nth-child(n+2) { transition-delay: 60ms; }
.hero-stack .stack-row:nth-child(2) .bchip:nth-child(n+4) { transition-delay: 120ms; }
.hero-stack .stack-row:nth-child(3) .bchip { transition-delay: 200ms; }
.hero-stack .stack-row:nth-child(3) .bchip:nth-child(n+3) { transition-delay: 280ms; }
.tree-groups .group, .tree-top .node { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.in .tree-groups .group, .in .tree-top .node { opacity: 1; transform: none; }
.tree-groups .group:nth-child(2) { transition-delay: 70ms; }
.tree-groups .group:nth-child(3) { transition-delay: 140ms; }
.tree-groups .group:nth-child(4) { transition-delay: 210ms; }
.tree-groups .group:nth-child(5) { transition-delay: 280ms; }
.tree-groups .group:nth-child(6) { transition-delay: 350ms; }
.tree-groups .group:nth-child(7) { transition-delay: 420ms; }
.att-rings .ring { opacity: 0; transform: scale(0.6); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
.in .att-rings .ring { opacity: 1; transform: none; }
.att-rings .ring:nth-child(n+4) { transition-delay: 60ms; }
.att-rings .ring:nth-child(n+7) { transition-delay: 120ms; }
.att-rings .ring:nth-child(n+10) { transition-delay: 180ms; }
.att-rings .ring:nth-child(n+13) { transition-delay: 240ms; }
.att-rings .ring:nth-child(n+16) { transition-delay: 300ms; }
.att-row { opacity: 0; transform: translate3d(12px, 0, 0); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
.in .att-row { opacity: 1; transform: none; }
.att-row:nth-child(3) { transition-delay: 80ms; }
.att-row:nth-child(4) { transition-delay: 160ms; }
.att-row:nth-child(5) { transition-delay: 240ms; }
.att-row:nth-child(6) { transition-delay: 320ms; }
.eco-chips .bchip { opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
.in .eco-chips .bchip { opacity: 1; transform: none; }
.eco-chips .bchip:nth-child(2) { transition-delay: 60ms; }
.eco-chips .bchip:nth-child(3) { transition-delay: 120ms; }
.eco-chips .bchip:nth-child(4) { transition-delay: 180ms; }
.eco-chips .bchip:nth-child(5) { transition-delay: 240ms; }
.eco-chips .bchip:nth-child(6) { transition-delay: 300ms; }
.eco-cluster .ring { opacity: 0; transform: scale(0.5); transition: opacity 500ms var(--ease-out) 800ms, transform 500ms var(--ease-out) 800ms; }
.in .eco-cluster .ring { opacity: 1; transform: none; }
.eco-cluster .ring:nth-child(n+4) { transition-delay: 900ms; }
.eco-cluster .ring:nth-child(n+7) { transition-delay: 1000ms; }
.eco-cluster .ring:nth-child(n+10) { transition-delay: 1100ms; }
.workforce .ring { opacity: 0; transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.in .workforce .ring { opacity: 1; }
.workforce .ring:nth-child(n+2) { transition-delay: 80ms; }
.workforce .ring:nth-child(n+8) { transition-delay: 220ms; }
.workforce .ring:nth-child(n+13) { transition-delay: 360ms; }
.scene .tiers .tier { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.scene.in .tiers .tier { opacity: 1; transform: none; }
.tiers .tier:nth-child(2) { transition-delay: 70ms; }
.tiers .tier:nth-child(3) { transition-delay: 140ms; }
.tiers .tier:nth-child(4) { transition-delay: 210ms; }
.tiers .tier:nth-child(5) { transition-delay: 280ms; }
.platforms .platform { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.in .platforms .platform { opacity: 1; transform: none; }
.platforms .platform:nth-child(2) { transition-delay: 100ms; }
.platforms .platform:nth-child(3) { transition-delay: 200ms; }
/* The pull back is drawn by GSAP at desktop; on a phone the cards arrive in turn. */
@media (max-width: 900px) {
  .scene-depts .dept-cell { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
  .scene-depts.in .dept-cell { opacity: 1; transform: none; }
  .scene-depts .dept-cell:nth-child(3) { transition-delay: 60ms; }
  .scene-depts .dept-cell:nth-child(4) { transition-delay: 120ms; }
  .scene-depts .dept-cell:nth-child(5) { transition-delay: 180ms; }
  .scene-depts .dept-cell:nth-child(6) { transition-delay: 240ms; }
  .scene-depts .dept-cell:nth-child(7) { transition-delay: 300ms; }
  .scene-depts .dept-cell:nth-child(8) { transition-delay: 360ms; }
  .room-left, .room-rail { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
  .in .room-left, .in .room-rail { opacity: 1; transform: none; }
  .team-room { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity 600ms var(--ease-out) 200ms, transform 600ms var(--ease-out) 200ms; }
  .in .team-room { opacity: 1; transform: none; }
  .open-stage .phone, .open-desktop { opacity: 0; transform: translate3d(0, 20px, 0); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
  .open-desktop { transition-delay: 200ms; }
  .in .open-stage .phone, .in .open-desktop { opacity: 1; transform: none; }
}
/* the message-to-action window: chat left, the systems it touched right */
.action-window { max-width: none; }
.action-body { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 8px 32px; align-items: start; }
.action-msgs { display: grid; gap: 4px; }
.action-trail { margin: 8px 0 0; padding-left: 16px; }
@media (max-width: 900px) { .action-body { grid-template-columns: 1fr; } .action-trail { padding-left: 12px; } }

/* ---------------------------------------------------------------- the player
   The demo's controls: one button, a line that fills as the objective moves,
   and a caption that names the step. */
.player { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; align-items: center; margin-top: 10px; }
.player-btn { justify-self: start; gap: 10px; min-height: 40px; }
.player-glyph { width: 0; height: 0; border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.player.playing .player-glyph { width: 9px; height: 12px; border: 0; background: linear-gradient(90deg, currentColor 0 3px, transparent 3px 6px, currentColor 6px 9px); }
.player-track { height: 3px; border-radius: 2px; background: var(--border-strong); overflow: hidden; }
.player-fill { display: block; height: 100%; width: 0; background: var(--gold); border-radius: 2px; transition: width 500ms linear; }
.player-caption { grid-column: 1 / -1; font-size: 13.5px; color: var(--text-2); min-height: 1.4em; }
.player.playing .player-caption { color: var(--gold); }
.details-goal .goal-word { font-size: 12.5px; }

/* ---------------------------------------------------------------- why Korps */
.why-stage { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1.15fr); gap: 0 20px; align-items: stretch; }
.why-col { border: 1px solid var(--border); border-radius: 14px; padding: 24px; display: grid; gap: 14px; align-content: start; }
.why-col.alone { background: rgba(22, 25, 32, 0.5); }
.why-col.with { background: linear-gradient(180deg, #1B1A16, #161920); border-color: rgba(226, 169, 59, 0.4); }
.why-k { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.why-col.with .why-k { color: var(--gold); }
.why-col ul { display: grid; gap: 8px; font-size: 16px; color: var(--text-2); }
.why-col.with li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; color: var(--text); }
.why-col.with .check { width: 16px; height: 16px; margin-top: 3px; }
.why-col.alone li { padding-left: 18px; position: relative; }
.why-col.alone li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 6px; height: 1.5px; background: var(--text-3); }
.why-foot { margin-top: auto; padding-top: 20px; font-size: 14px; color: var(--text-3); font-style: normal; }
.why-arrow { align-self: center; height: 1.5px; background: linear-gradient(90deg, var(--border-strong), var(--gold)); position: relative; }
.why-arrow::after { content: ''; position: absolute; right: 0; top: -4px; border-left: 8px solid var(--gold); border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }

/* the ladder: the shape grows, the person's job does not */
.scale-stage { margin-top: 64px; display: grid; gap: 20px; }
.scale-head { font-size: 26px; }
.scale-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.scale-step { border-top: 1px solid var(--border-strong); padding-top: 16px; display: grid; gap: 6px; align-content: start; }
.scale-n { font-family: var(--display); font-weight: 600; font-size: 44px; line-height: 0.95; letter-spacing: -0.03em; }
.scale-w { font-size: 13px; color: var(--text-3); margin-top: -4px; }
.scale-dots { display: flex; flex-wrap: wrap; gap: 3px; margin: 8px 0 4px; max-width: 140px; }
.scale-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--working); opacity: 0.85; }
.scale-shape { font-size: 15px; color: var(--text); }
.scale-you { font-size: 13.5px; color: var(--text-3); }
.scale-step:last-child .scale-you { color: var(--gold); }

/* ---------------------------------------------------------------- use cases */
.cases-stage { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.case { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 20px 18px; display: grid; gap: 10px; align-content: start; }
.case-name { font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: -0.02em; }
.case-lead { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-2); }
.case-objective { font-size: 13.5px; color: var(--text-2); display: grid; gap: 2px; }
.case-k { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.case-roles { display: grid; gap: 5px; margin-top: 2px; }
.case-role { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); }
.case-ring svg circle { stroke-width: 2; }

/* ---------------------------------------------------------------- open source, expanded */
.open-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #8A6420; }
.open-list { display: grid; gap: 6px; font-size: 16px; color: var(--ink-2); }
.open-list li { padding-left: 20px; position: relative; }
.open-list li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid #8A6420; }
.open-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-top: 20px; border-top: 1px solid var(--paper-rule); }
.split-half h3 { color: var(--ink); margin-bottom: 4px; font-size: 20px; }
.split-half p { font-size: 15px; color: var(--ink-2); }
.open-actions { margin-top: 4px; }
.btn-dark { background: var(--ink); color: var(--paper); }
.btn-dark:hover, .btn-dark:focus-visible { background: #2A2D33; }
.btn-light { background: transparent; color: var(--ink); border-color: rgba(21, 23, 27, 0.28); }
.btn-light:hover, .btn-light:focus-visible { border-color: var(--ink); background: rgba(21, 23, 27, 0.05); }
.scene-open .btn:focus-visible { outline-color: var(--ink); }
.open-github { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; align-items: start; padding: 18px 20px; border: 1px solid var(--paper-rule); border-radius: 12px; background: rgba(21, 23, 27, 0.03); }
.gh-mark { color: var(--ink); }
.gh-title { font-size: 15px; font-weight: 600; color: var(--ink); }
.gh-note { font-size: 14px; color: var(--ink-2); margin-top: 2px; }

/* the three clients, front to back */
.open-stage { position: relative; min-height: 700px; }
.open-stage .phone { position: absolute; left: 0; bottom: 0; z-index: 3; width: 238px; aspect-ratio: 238 / 476; padding: 13px 10px; border-radius: 32px; }
.open-stage .phone .phone-update { font-size: 11.5px; padding: 8px; }
.open-stage .phone .phone-update ul { font-size: 11px; }
.open-stage .phone .row-name { font-size: 12px; }
.open-stage .phone .row-title, .open-stage .phone .row-status { display: none; }
.tablet { position: absolute; left: 96px; top: 196px; z-index: 2; width: 430px; }
.tablet .window { box-shadow: 0 30px 60px rgba(21, 23, 27, 0.22); border-radius: 16px; }
.tablet .window-body { display: grid; grid-template-columns: 176px minmax(0, 1fr); min-height: 300px; }
.tablet .rail { border-right: 1px solid var(--border); padding: 10px 8px; display: grid; gap: 4px; align-content: start; }
.tablet .rail .needs { width: 100%; justify-content: space-between; height: 32px; font-size: 12.5px; }
.tablet .main { padding: 12px 16px; display: grid; gap: 8px; align-content: start; }
.tablet .mcard { max-width: 100%; }
.tablet .mcard-actions { flex-wrap: wrap; }
.open-desktop { position: absolute; right: 0; top: 0; z-index: 1; width: 620px; max-width: 100%; }
.open-desktop .window-body { max-height: 460px; overflow: hidden; }
.tablet .window-body { max-height: 320px; overflow: hidden; }
/* they arrive front to back, one after another */
.open-stage .phone, .tablet, .open-desktop { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.in .open-stage .phone { opacity: 1; transform: none; }
.in .tablet { opacity: 1; transform: none; transition-delay: 180ms; }
.in .open-desktop { opacity: 1; transform: none; transition-delay: 360ms; }

/* ---------------------------------------------------------------- what it costs */
.scene-price { padding-top: 40px; }
.price-teaser { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; padding: 40px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.price-copy { display: grid; gap: 20px; }
.price-rail { display: grid; gap: 2px; }
.price-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; align-items: baseline; padding: 12px 14px; border-radius: 10px; font-size: 15px; }
.price-row.popular { background: rgba(226, 169, 59, 0.07); border: 1px solid rgba(226, 169, 59, 0.35); }
.price-name { font-weight: 600; }
.price-workers { color: var(--text-3); font-size: 13.5px; }
.price-figure { font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: -0.02em; }
.price-row.popular .price-figure { color: var(--gold); }

/* ---------------------------------------------------------------- downloads, before launch */
.btn[disabled] { cursor: not-allowed; }
.platform .btn-primary[disabled] { background: var(--raised); color: var(--text-2); border-color: var(--border-strong); }
.platform .btn-primary[disabled]::before { content: ''; width: 12px; height: 12px; margin-right: 9px; border: 1.5px solid currentColor; border-bottom: 0; border-radius: 5px 5px 0 0; opacity: 0.8; }
.get-note-line { margin-top: 28px; font-size: 16px; color: var(--text-2); }

/* the deployment flow, on the pricing page */
.deploy { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 24px 0 8px; }
@media (max-width: 1100px) { .deploy { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.deploy-step { border: 1px solid var(--border-strong); border-radius: 14px; padding: 20px; display: grid; gap: 8px; align-content: start; position: relative; background: var(--panel); }
.deploy-n { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; background: var(--gold); color: #1A1305; }
.deploy-step h3 { font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: -0.02em; }
.deploy-step p { font-size: 14px; color: var(--text-2); }
.deploy-marks { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.deploy-time { display: flex; align-items: baseline; gap: 12px; margin-top: 12px; font-size: 15px; color: var(--text-2); }
.deploy-time b { font-family: var(--display); font-weight: 600; font-size: 28px; letter-spacing: -0.02em; color: var(--text); }

/* the questions, on the pricing page */
.faq { display: grid; gap: 0; margin-top: 8px; max-width: 62em; }
.faq details { border-top: 1px solid var(--border); }
.faq details:last-of-type { border-bottom: 1px solid var(--border); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 0; font-size: 17px; font-weight: 600; display: flex; align-items: center; gap: 14px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: ''; flex: none; width: 9px; height: 9px; border-right: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold); transform: rotate(45deg) translateY(-2px); transition: transform 200ms ease; }
.faq details[open] summary::before { transform: rotate(225deg) translateY(-2px); }
.faq summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.faq p { padding: 0 0 18px 23px; font-size: 16px; color: var(--text-2); max-width: 58em; }

/* ================================================================ responsive */
@media (max-width: 1340px) {
  .hero-stage .card { width: 460px; transform: none; }
  .hero-stage .card .ring { --size: 112px; }
  .hero-activity { width: 460px; transform: none; }
  .ghost { width: 260px; }
  .ghost-manager { right: 0; top: 8px; }
  .ghost-team { left: 0; bottom: 30px; }
  .hero-glow { right: -120px; }
  .team-stage { grid-template-columns: minmax(0, 1fr) 480px; }
  .open-desktop { width: 560px; }
}
@media (max-width: 1200px) {
  .cases-stage { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .apps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .h-hero { font-size: 72px; }
  .h-section { font-size: 48px; }
  .h-sub { font-size: 34px; }
  .hero-stage .card { width: 460px; }
  .hero-stage .card .ring { --size: 112px; }
  .room { grid-template-columns: 200px minmax(0, 1fr) 260px; }
  .eco-stage { grid-template-columns: 260px minmax(0, 1fr) 260px; gap: 48px; }
  .tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .att-stage { grid-template-columns: 1fr; }
  .dept-grid { grid-template-columns: 300px repeat(3, minmax(0, 1fr)); gap: 16px; }
  .tree-groups { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .team-stage { grid-template-columns: minmax(0, 1fr) 440px; }
  .open-stage .phone { width: 280px; }
  .open-desktop { width: 100%; }
  .system { height: 560px; }
}
@media (max-width: 900px) {
  :root { --gutter: 24px; --scene-gap: 96px; }
  body { font-size: 17px; }
  .h-hero { font-size: 56px; }
  .h-section { font-size: 40px; }
  .h-sub { font-size: 30px; }
  .h-tiny { font-size: 24px; }
  .lede { font-size: 17px; }
  .cols { row-gap: 16px; }
  .cols > * { grid-column: 1 / 13; }
  .head-row { margin-bottom: 32px; }
  .scene-hero { min-height: 0; padding-top: 20px; padding-bottom: 48px; }
  .hero { row-gap: 20px; }
  .hero-copy { display: contents; }
  .hero .hero-copy > * { grid-column: 1 / 13; }
  .hero .small-line { order: 1; }
  .hero .h-hero { order: 2; }
  .hero-stage { order: 3; }
  .hero .lede { order: 4; }
  .hero .actions { order: 5; }
  .hero .lede .more { display: none; }
  .hero .hero-line { order: 4; }
  .card-tech { flex-direction: column; gap: 4px; }
  .tech-item { white-space: nowrap; }
  .hero-media img, .scene-media img { opacity: 0.26; }
  .hero-stage { justify-items: stretch; min-height: 0; }
  .hero-stage .card { transform: none; width: 100%; }
  .hero-stage .card .ring { --size: 96px; }
  .hero-glow, .ghost { display: none; }
  .hero-activity { transform: none; width: 100%; margin-top: 10px; }
  .card { width: 100%; --pad: 20px; gap: 16px; }
  .card-name { font-size: 22px; }
  .card.small { width: 100%; }

  .scene-pin { min-height: 0; display: block; padding: calc(var(--scene-gap) / 2) 0; }
  .wake-stage { overflow: hidden; }
  .wake .window { width: 100%; grid-template-columns: 1fr; }
  .wake-chat { min-height: 0; padding: 16px; }
  .wake-rail { border-left: 0; border-top: 1px solid var(--border); }

  .reports-stage { height: auto; display: grid; gap: 20px; }
  .reports-stage svg, .reports-stage .label { display: none; }
  .reports-stage .card, .reports-stage .card.worker, .reports-stage .card.manager { position: static; margin: 0; }
  .reports-stage .card.worker, .in .reports-stage .card.worker { transform: none; }
  .reports-stage .card.manager { order: -1; }

  .team-stage { grid-template-columns: 1fr; gap: 16px; }
  .team-roster { margin: 0; grid-column: 1; grid-row: 1; }
  .team-room { margin: 0; min-height: 0; grid-column: 1; grid-row: 2; }
  .team-room .window-body { padding: 8px 16px 16px; }

  .pinpair .scene-room { min-height: 0; display: block; padding: calc(var(--scene-gap) / 2) 0; }
  .room-copy { margin-bottom: 20px; }
  .room { height: auto; min-height: 0; grid-template-columns: 1fr; }
  .room-left { border-right: 0; border-bottom: 1px solid var(--border); padding: 12px; }
  .room-left .left-depts .dept:nth-child(n+3) { display: none; }
  .room-left .needs { display: none; }
  .room-rail { border-left: 0; border-top: 1px solid var(--border); padding: 12px; }
  .room-rail .act:not(.in) { visibility: visible; }
  .room-rail .act { opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity 240ms ease, transform 240ms var(--ease-out); }
  .room-rail .act.in { opacity: 1; transform: none; }
  .room-chat { padding: 8px 16px 16px; }
  .room-chat .msg:not(.in) { visibility: visible; }
  .room-strip { display: block; position: sticky; top: 64px; z-index: 5; padding: 8px 0; background: var(--ground); }
  .room-strip .needs { width: 100%; justify-content: space-between; }
  .window-tabs { display: none; }
  .window-title { font-size: 15px; word-break: break-word; }
  .window-head { padding: 12px 16px; gap: 10px; }

  .scene-depts { position: static; opacity: 1; pointer-events: auto; padding: calc(var(--scene-gap) / 2) 0; display: block; }
  .dept-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
  .dept-cell { min-height: 0; padding: 14px; }
  .dept-cell.room-cell { display: none; }

  .scene-org .tree { margin-top: 40px; }
  .tree-lines { display: none; }
  .tree-top { flex-direction: column; margin-bottom: 16px; gap: 8px; }
  .tree-top .node { width: 100%; }
  .tree-groups { grid-template-columns: 1fr; gap: 8px; }

  .summary-cols { grid-template-columns: 1fr; }
  .routine { grid-template-columns: 1fr; }
  .routine-last { grid-row: auto; text-align: left; }

  .compute-panel { padding: 16px; }
  .compute-head { flex-direction: column; gap: 8px; }
  .pool { grid-template-columns: 10px 22px minmax(0, 1fr) auto; gap: 4px 10px; padding: 12px; }
  .pool .dot { grid-row: 1; }
  .pool > .brand-mark { grid-row: 1; grid-column: 2; }
  .pool > div:nth-child(3) { grid-column: 3 / 5; }
  .pool-state { grid-column: 3; grid-row: 2; text-align: left; }
  .pool-workers { min-width: 0; grid-column: 4; grid-row: 2; }
  .pool-slot { grid-column: 3 / 5; grid-row: 3; }
  .pool-slot:empty { display: none; }
  .pool-state .pill { display: none; }
  .pool .ui-btn { display: none; }
  .pool.extra { display: none; }

  .flow { grid-template-columns: 1fr; gap: 28px; }
  .eco-row { grid-template-columns: 1fr; gap: 12px; }
  .eco-stage { grid-template-columns: 1fr; gap: 20px; min-height: 0; }
  .eco-lines { display: none; }
  .eco-layer { transform: translate3d(0, 20px, 0); }
  .eco-out { transform: translate3d(0, 20px, 0); }
  .eco-core { max-width: none; }
  .apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .apps .bchip { height: 44px; padding: 0 10px; font-size: 13px; overflow: hidden; }
  .apps .bchip .bchip-status { display: none; }
  .action-trail { margin-left: 0; }
  .att-board { padding: 16px; }
  .fig b { font-size: 52px; }
  .att-figures { gap: 24px; }
  .hero-line { font-size: 18px; }
  /* The stack strip is built by the script, so on a narrow screen it has to
     occupy its space before it arrives or the hero grows under the reader.
     One non-wrapping row per layer, scrolled sideways inside its own box,
     makes that height the same every time: label, then two 32 px rows. */
  .hero-stack { order: 6; min-height: 98px; }
  .hero-stack .stack-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .hero-stack .stack-row::-webkit-scrollbar { display: none; }
  .hero-stack .bchip { flex: none; }
  .tiers { grid-template-columns: 1fr; }
  .scale-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
  .cases-stage { grid-template-columns: 1fr; }
  .why-stage { grid-template-columns: 1fr; gap: 14px; }
  .why-arrow { display: none; }
  .apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deploy { grid-template-columns: 1fr; }
  .price-teaser { grid-template-columns: 1fr; gap: 28px; }
  .plan-facts, .byo { grid-template-columns: 1fr; }
  .settings-tabs span { padding: 8px 8px 10px; font-size: 12.5px; }
  .compute-avail .avail-row { flex-wrap: wrap; }
  .compute-status { flex-wrap: wrap; row-gap: 6px; }
  .compute-status .ui-btn { display: none; }
  .compute-status .rebalanced { flex-basis: 100%; margin-left: 20px; }

  .open-body { padding: 56px 0 56px; }
  .open-copy { order: 2; }
  /* The phone mock is 560px tall once drawn; reserving it keeps the scene
     below from jumping when the stage fills in, which is a layout shift on
     a page that now opens with this scene. */
  .open-stage { order: 1; min-height: 560px; display: grid; gap: 16px; }
  .open-stage .phone { position: static; width: 100%; max-width: 320px; margin-inline: auto; aspect-ratio: auto; order: -1; padding: 16px 12px; border-radius: 34px; }
  .open-stage .phone .row-title, .open-stage .phone .row-status { display: block; }
  .tablet { position: static; width: 100%; }
  .tablet .window-body { grid-template-columns: 150px minmax(0, 1fr); min-height: 0; }
  .open-desktop { position: static; width: 100%; }
  .open-desktop .window-body { grid-template-columns: 1fr; min-height: 0; }
  .open-desktop .rail { border-right: 0; border-bottom: 1px solid var(--border); }
  .open-desktop .side { border-left: 0; border-top: 1px solid var(--border); }

  .platforms { grid-template-columns: 1fr; gap: 12px; }
  .platform { grid-template-columns: 56px minmax(0, 1fr); gap: 16px; padding: 20px; }
  .platform-mark { width: 56px; height: 56px; }
  .platform.android { order: -1; }
  .platform.ios { padding: 16px 20px; }
  .platform.ios .platform-body { flex-wrap: wrap; gap: 4px 12px; }
  .get-links { gap: 0 20px; }
  .system { height: 460px; width: 100%; margin-left: 0; }
  .sys-core { width: 200px; padding: 14px; }
  .sys-core .h-tiny { font-size: 18px; }
  .sys-counts b { font-size: 18px; }
  .workforce { height: 320px; margin-top: 40px; }
  .workforce-inner { inset: 34px 36px; }
  .end-downloads { flex-direction: column; align-items: flex-start; gap: 0; }
  /* 4. the links row: the source link on its own line with its note beneath, then the rest as a wrapped row */
  .get-links { gap: 0 12px; }
  .get-links li:first-child { flex-basis: 100%; flex-direction: column; align-items: flex-start; gap: 0; margin-bottom: 8px; }
  .get-links li:first-child .get-note { font-size: 13px; margin-top: -6px; }
  .sys-node { font-size: 12.5px; padding: 8px 12px; }
  .cloud-list { grid-template-columns: 1fr; font-size: 15px; }
  .scene-end { padding-bottom: 64px; }
}
@media (max-width: 480px) {
  .h-hero { font-size: 44px; letter-spacing: -0.036em; }
  .h-section { font-size: 34px; }
  .h-sub { font-size: 27px; }
  .chip { height: 32px; padding: 0 11px; font-size: 13px; }
  .system { height: 420px; }
}

/* ================================================================ reduced motion
   Every pinned scene is rendered by site.js as a static composition of its
   final state; nothing here creates a ScrollTrigger. Rings do not breathe,
   the light holds still, the transition bands stay. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ring svg, .needs.flash { animation: none; }
  .light { transition: none; }
  .reveal, .team-roster .row, .msg.slide, .wake-rail .act, .beat, .reports-stage .card.manager, .reports-stage .label,
  .compute-status .rebalanced, .pending, .eco-layer, .eco-core, .eco-out, .apps .bchip, .flow-step { opacity: 1; transform: none; transition: none; }
  .eco-lines path { stroke-dashoffset: 0; transition: none; }
  .flow-col .flow-step { opacity: 1; }
  .hero-stage .card, .hero-stage .hero-activity, .hero-stack .bchip, .tree-groups .group, .tree-top .node, .att-rings .ring, .att-row,
  .eco-chips .bchip, .eco-cluster .ring, .workforce .ring, .tiers .tier, .platforms .platform, .scene-depts .dept-cell, .room-left, .room-rail,
  .team-room, .open-stage .phone, .open-desktop { opacity: 1; transform: none; transition: none; }
  .reports-stage .card.worker { transform: translate3d(-220px, 230px, 0); transition: none; }
  .reports-stage path, .tree-lines path, .system path { stroke-dashoffset: 0; transition: none; }
  .scene-pin, .pinpair .scene-room { min-height: 0; display: block; padding: calc(var(--scene-gap) / 2) 0; }
  .scene-depts { position: static; opacity: 1; pointer-events: auto; padding: calc(var(--scene-gap) / 2) 0; display: block; }
  .room-chat .msg:not(.in) { visibility: visible; }
  .room-rail .act:not(.in) { visibility: visible; }
  .room { height: auto; }
    .wake-chat { min-height: 0; }
}
body.reduce .ring svg { animation: none; }

/* ================================================================ pricing and docs
   The same chrome, type and colour as the homepage, laid out as one column of
   prose with the plans and the API reference rendered from the control plane. */
.page main { padding: 56px 0 112px; }
.page-head { display: grid; gap: 20px; max-width: 40em; margin-bottom: 48px; }
.page main a:not(.btn), .page-body a:not(.btn) { color: var(--text); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-color: var(--border-strong); }
.page-body a:not(.btn):hover, .page-body a:not(.btn):focus-visible { text-decoration-color: var(--text); }
.page-body a:not(.btn):focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
/* Links inside prose keep their rhythm and still meet a 40 px touch box. */
.page-body p a, .page-body li a { display: inline-block; padding: 0.65rem 0; margin: -0.65rem 0; }
.plans { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin: 0 0 40px; }
.plan { display: grid; gap: 6px; align-content: start; padding: 24px; background: var(--panel); border: 1px solid var(--border-strong); border-radius: 14px; }
.plan h2 { font-family: var(--display); font-weight: 600; font-size: 28px; letter-spacing: -0.02em; }
.plan .price { font-size: 18px; color: var(--text-2); }
.plan ul { margin-top: 10px; display: grid; gap: 4px; font-size: 15px; color: var(--text-2); }
.plan li { padding-left: 16px; position: relative; }
.plan li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.note { color: var(--text-2); font-size: 16px; max-width: 46em; }
.empty { color: var(--text-3); padding: 16px 0; }
.doc h2 { font-family: var(--display); font-weight: 600; font-size: 32px; letter-spacing: -0.02em; margin: 48px 0 12px; }
.doc ol { display: grid; gap: 8px; max-width: 46em; counter-reset: step; }
.doc ol li { padding-left: 28px; position: relative; font-size: 17px; color: var(--text-2); }
.doc ol li strong { color: var(--text); }
.doc ol li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0.15em; font-size: 13px; color: var(--text-3); font-weight: 600; }
.api { display: grid; gap: 0; margin-top: 12px; }
.api li { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid var(--border); }
.api .key { font-weight: 600; font-size: 15px; }
.api code, .doc code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.88em; color: var(--text-2); white-space: pre-wrap; word-break: break-word; }
.page-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
@media (max-width: 900px) { .page main { padding: 32px 0 80px; } .doc h2 { font-size: 26px; } }

/* pricing.html carries the plans stage on a page, not a scene */
.page .plans-stage { display: grid; gap: 40px; margin-bottom: 24px; }
.page .doc .note { margin-bottom: 8px; }

/* releases.html */
.release { display: grid; gap: 8px; padding: 24px; background: var(--panel); border: 1px solid var(--border-strong); border-radius: 14px; margin-bottom: 16px; }
.release h2 { font-family: var(--display); font-weight: 600; font-size: 28px; letter-spacing: -0.02em; }
.release dl { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 6px 16px; font-size: 15px; margin: 8px 0; }
.release dt { color: var(--text-3); }
.release dd { margin: 0; color: var(--text); word-break: break-all; }
.release dd a { display: inline-block; padding: 0.65rem 0; margin: -0.65rem 0; color: var(--text); }
.release dd code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.88em; color: var(--text-2); }
.release .btn { justify-self: start; }
@media (max-width: 600px) { .release dl { grid-template-columns: 1fr; gap: 2px 0; } .release dt { margin-top: 8px; } }

/* ================================================================ contact
   Six mailboxes, each one saying who reads it and what to put in the first
   message. The enterprise plan used to point at an anchor that did not exist,
   so "Talk to Korps" was a link to the top of the documentation page. */
.contact-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(23rem, 1fr)); margin-bottom: 8px; }
.contact-card {
  display: grid; gap: 10px; align-content: start;
  padding: 24px; background: var(--panel); border: 1px solid var(--border-strong); border-radius: 14px;
}
.contact-card p { color: var(--text-2); font-size: 16px; margin: 0; }
.contact-card .contact-do { margin-top: 4px; }
.contact-card .btn { justify-self: start; }
.contact-card .note { font-size: 14.5px; }
@media (max-width: 600px) { .contact-card { padding: 20px; } }

/* ================================================================ the homepage
   The root used to be a splash: a logo, one line of copy and a promise that
   signing up would be possible later. Signing up works now, so the first
   viewport says what Korps is, offers the two things a reader might want next,
   and the rest of the page is the evidence for the first sentence. */

.home main { padding: 0; }
.home a { color: inherit; text-decoration: none; }
.home .note a, .home .home-words a { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-color: var(--border-strong); }

.home-hero { padding: clamp(56px, 9vw, 120px) 0 clamp(48px, 7vw, 96px); }
.home-kicker { display: flex; align-items: center; gap: 12px; color: var(--text-2); margin-bottom: 28px; }
.home-mark { width: 26px; height: 26px; flex: none; color: var(--text); }
.home-mark .u1 { color: var(--gold); fill: var(--gold); }
.home-hero .h-hero { margin-bottom: 28px; }
.home-hero .lede { max-width: 36em; }
.home-actions { margin-top: 36px; }
.home-under { margin-top: 24px; color: var(--text-3); font-size: 15.5px; max-width: 42em; }
/* Windows and Android are a fact about the roadmap, not somewhere to click.
   They used to look like buttons and do nothing, which is the one thing a
   platform name on a homepage must never do. */
.home-plat {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  border: 1px solid var(--border-strong); color: var(--text-2); font-size: 14px;
}

.home-band { padding: clamp(48px, 6vw, 88px) 0; }
.home-band-lines { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.home-head { display: grid; gap: 16px; max-width: 42em; margin-bottom: 40px; }

.home-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.home-grid-3 { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.home-card {
  display: grid; gap: 10px; align-content: start; padding: 24px;
  background: var(--panel); border: 1px solid var(--border-strong); border-radius: 14px;
}
.home-card p { color: var(--text-2); font-size: 16px; margin: 0; }
.home-card-quiet { background: transparent; }

.home-words { display: grid; gap: 0; margin: 0; }
.home-words > div {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 9fr); gap: 8px 32px;
  padding: 18px 0; border-top: 1px solid var(--border); align-items: baseline;
}
.home-words dt { font-family: var(--display); font-weight: 600; font-size: 21px; letter-spacing: -0.02em; }
.home-words dd { margin: 0; color: var(--text-2); font-size: 16.5px; }
.home-note { margin-top: 26px; }

.home-steps { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); list-style: none; padding: 0; margin: 0 0 34px; }
.home-steps li {
  display: grid; gap: 10px; align-content: start; padding: 24px;
  background: var(--panel); border: 1px solid var(--border-strong); border-radius: 14px;
}
.home-steps p { color: var(--text-2); font-size: 16px; margin: 0; }
.home-step-n {
  width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; font-size: 13px; font-weight: 600; background: var(--gold); color: #1A1305;
}

.home-price { display: grid; gap: 2px; margin-bottom: 30px; }
.home-price-row {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) auto auto;
  gap: 10px 24px; align-items: center; padding: 16px 18px; border-radius: 12px;
  border: 1px solid transparent; text-decoration: none; color: var(--text);
  transition: background 150ms ease, border-color 150ms ease;
}
.home-price-row:hover, .home-price-row:focus-visible { background: var(--panel); border-color: var(--border-strong); }
.home-price-row:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.home-price-row.popular { background: rgba(226, 169, 59, 0.07); border-color: rgba(226, 169, 59, 0.35); }
.home-price-name { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.home-price-name b { font-size: 17px; }
.home-price-flag { font-size: 12px; color: var(--gold); }
.home-price-workers { color: var(--text-3); font-size: 13.5px; }
.home-price-line { color: var(--text-2); font-size: 15px; }
.home-price-figure { font-family: var(--display); font-weight: 600; font-size: 21px; letter-spacing: -0.02em; white-space: nowrap; }
.home-price-figure small { font-family: var(--sans); font-weight: 400; font-size: 13px; color: var(--text-3); letter-spacing: 0; }
.home-price-go { font-size: 14.5px; color: var(--text-2); white-space: nowrap; text-align: right; }
.home-price-row:hover .home-price-go { color: var(--text); }

.home-end { padding-bottom: clamp(64px, 8vw, 120px); }
.home-end .lede { margin: 18px 0 32px; }

/* ---- 390 px is the width the whole page has to survive ------------------- */
@media (max-width: 900px) {
  .home-words > div { grid-template-columns: 1fr; gap: 4px; padding: 16px 0; }
  .home-price-row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; padding: 16px 14px; }
  .home-price-line { grid-column: 1 / -1; font-size: 14.5px; }
  .home-price-go { grid-column: 1 / -1; text-align: left; }
}
@media (max-width: 600px) {
  .home-hero { padding-top: 28px; }
  .home-hero .h-hero { font-size: clamp(38px, 12vw, 52px); margin-bottom: 20px; }
  /* The break becomes an ordinary space rather than nothing, or the two
     halves of the headline run together into one word. */
  .home-hero .h-hero br { display: none; }
  .home-kicker { margin-bottom: 18px; font-size: 15px; }
  .home-actions { margin-top: 26px; }
  .home-actions .btn { width: 100%; justify-content: center; }
  /* Eight bordered cards stacked one above another is eight boxes of padding
     a phone has to scroll past. Same words, hairline rules instead of chrome. */
  .home-grid { gap: 0; }
  .home-card {
    background: none; border: 0; border-top: 1px solid var(--border);
    border-radius: 0; padding: 18px 0 20px; gap: 6px;
  }
  .home-card .h-tiny { font-size: 21px; }
  .home-card p { font-size: 15.5px; }
  .home-steps li { padding: 18px; }
  .home-head { margin-bottom: 28px; }
  .home-band .actions .btn { width: 100%; justify-content: center; }
}

/* Releases: a staged build is a fact, not an offer. The page used to carry a
   live download button while /product/ said downloads open at launch, so a
   reader got a different answer depending which page they were on. */
.release-soon {
  justify-self: start; margin: 4px 0 0; padding: 10px 14px; border-radius: 10px;
  background: var(--raised); border: 1px solid var(--border-strong);
  color: var(--text-2); font-size: 14.5px;
}

/* Docs: a jump strip at the top, because the page is two documents and most
   readers want the first one. Without it the page opened on prose and the API
   dump below it was the loudest thing on screen. */
.doc-jump { display: flex; gap: 10px; flex-wrap: wrap; }
.doc h2[id] { scroll-margin-top: 88px; }
@media (max-width: 600px) { .doc-jump .btn { flex: 1 1 auto; justify-content: center; } }

/* ================================================================ finding your way
   Twenty scenes is a long argument, and a reader landing in the middle of one
   had nothing telling them which part of it they were in or how much was left.
   The chapter name is an attribute on the heading rather than an element, so it
   cannot take a cell away from a heading that is already placed in the grid. */
.scene .h-section[data-chapter]::before,
.scene .h-hero[data-chapter]::before {
  content: attr(data-chapter);
  display: block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 16px;
}

/* The route through the page: understand, see it work, check the price, start. */
.scene-path { padding: 8px 0 clamp(32px, 5vw, 64px); }
.scene-path ol {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.scene-path a {
  display: grid; gap: 4px; align-content: start; padding: 20px 18px 22px;
  text-decoration: none; color: var(--text); border-radius: 10px;
  transition: background 150ms ease;
}
.scene-path a:hover, .scene-path a:focus-visible { background: var(--panel); }
.scene-path a:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.scene-path b { font-size: 16.5px; font-weight: 600; }
.scene-path span { color: var(--text-3); font-size: 14px; }
.scene-path li { position: relative; }
.scene-path li + li::before {
  content: ''; position: absolute; left: -1px; top: 18px; bottom: 18px; width: 1px; background: var(--border);
}

@media (max-width: 900px) {
  .scene-path ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scene-path li + li::before { display: none; }
  .scene-path a { padding: 16px 12px 18px; }
  .scene .h-section[data-chapter]::before, .scene .h-hero[data-chapter]::before { margin-bottom: 10px; font-size: 12px; }
}
@media (max-width: 600px) {
  .scene-path ol { grid-template-columns: 1fr; gap: 0; }
  .scene-path li + li { border-top: 1px solid var(--border); }
}

/* The homepage hero is two columns on a wide screen: the argument on the left,
   and a still of what the argument produces on the right. The right half was
   empty at 1440 px, which reads as a page that has not been finished. */
.home-hero-cols { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center; }
.home-stage { display: grid; gap: 12px; }
.home-panel { padding: 14px 12px; }
.home-panel .panel-title { padding: 4px 12px 10px; }
.home-row { padding: 8px 12px; }
.home-panel-act { gap: 2px; }
@media (max-width: 1100px) {
  .home-hero-cols { grid-template-columns: 1fr; gap: 40px; }
  .home-stage { max-width: 30rem; }
}
/* The status is a column of its own, at the right edge, not a phrase that
   crowds the name it belongs to. */
.home-row .row-status { margin-left: auto; text-align: right; }

/* ---- the product page on a phone -----------------------------------------
   Thirty-one thousand pixels is thirty-seven screens of scrolling, and most of
   the excess was three device mockups stacked one above another to say one
   thing, plus scene padding sized for a desktop. Nothing is removed from the
   argument here; the same claims are made in less height. */
@media (max-width: 700px) {
  :root { --scene-gap: 72px; }
  /* Korps runs on every screen. On a phone that is said by the phone, which is
     the mockup the reader is already holding one of. */
  .open-stage .tablet, .open-stage .open-desktop { display: none; }
  .open-stage .phone { max-height: 560px; overflow: hidden; position: relative; }
  .open-stage .phone::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 90px;
    background: linear-gradient(to bottom, transparent, var(--ground));
    pointer-events: none;
  }
}

/* ================================================================ the homepage, second pass
   The first screen has to answer what Korps does, what it is for and where to
   click, in the order a first-time visitor asks. The demo sits beside the
   argument rather than under it, drawn complete, so nothing on the first
   screen waits for a script or a scroll. */
.home-line { margin-top: 18px; font-family: var(--display); font-weight: 600; font-size: 21px; letter-spacing: -0.015em; color: var(--text); }
.home-under a { color: var(--text-2); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-color: var(--border-strong); }
.home-under a:hover, .home-under a:focus-visible { color: var(--text); }
.home-hero-cols { grid-template-columns: minmax(0, 6fr) minmax(0, 7fr); gap: 48px; align-items: start; }
.home-hero .h-hero { font-size: clamp(44px, 5.6vw, 76px); }
.home-hero .lede.big { font-size: 19.5px; }
.home-stage { gap: 10px; scroll-margin-top: 80px; }

/* The label is part of the demo, not a footnote under it: a visitor reads
   what the window is before they read the window. */
.home-demo-label { margin: 0; font-size: 13.5px; color: var(--text-3); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.home-demo-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; border: 1px solid rgba(226, 169, 59, 0.5); color: var(--gold); font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.home-demo-text { margin: 8px 0 0; padding-left: 1.2em; color: var(--text-2); font-size: 14.5px; display: grid; gap: 6px; }

/* The window: the room in the middle, progress on the right, in the app's
   own proportions. Heights are fixed so the frame never jumps as beats land. */
.window.hd { display: grid; grid-template-columns: minmax(0, 1fr) 236px; height: 600px; }
.hd-centre { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; border-right: 1px solid var(--border); }
.hd .window-head { padding: 12px 16px; }
.hd .window-title { font-size: 14.5px; }
.hd .window-sub { font-size: 12px; }
.hd .window-tabs span { padding: 5px 8px; font-size: 12px; }
.hd-chat { display: grid; align-content: end; gap: 2px; padding: 8px 16px 12px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.hd-chat .msg { padding: 7px 0; }
.hd-chat .msg-body { font-size: 13.5px; line-height: 1.45; }
.hd-chat .mcard { padding: 10px 12px; max-width: 400px; }
.hd .room-compose { margin-top: 8px; padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: 9px; color: var(--text-3); font-size: 13px; }
.hd .mcard.result .mcard-title { color: var(--text); }
.hd .mcard.result .check { color: #062A15; }
.hd-rail { display: grid; align-content: start; gap: 6px; padding: 12px 10px; background: rgba(29, 33, 41, 0.35); overflow: hidden; }
.hd-rail .details-head { padding: 0 6px; }
.hd-rail .rail-label { font-size: 12px; font-weight: 600; color: var(--text-2); }
.hd-rail .needs { height: 30px; padding: 0 9px; font-size: 12px; gap: 6px; }
.hd-rail .needs-count { min-width: 18px; height: 18px; font-size: 11px; }
.hd-rail .details-goal { padding: 2px 6px 4px; }
.hd-rail .details-title { font-size: 13.5px; }
.hd-rail .pill { height: 24px; font-size: 11.5px; }
.hd-tasks { display: grid; gap: 2px; }
.hd-task { padding: 6px 6px; gap: 9px; align-items: start; flex-wrap: wrap; }
.hd-task .row-main { flex: 1 1 8rem; min-width: 0; }
.hd-task .row-name { font-size: 12.5px; line-height: 1.3; white-space: normal; }
.hd-task .row-title { font-size: 11.5px; }
.hd-task .row-status { flex-basis: 100%; padding-left: 37px; font-size: 11.5px; white-space: normal; }
.hd-task[data-state="done"] .row-status { color: var(--working); }
.hd-acts { gap: 1px; }
.hd-acts .act { padding: 6px 6px; font-size: 12px; grid-template-columns: 7px 1fr; gap: 6px 8px; }
.hd-acts .act-text { white-space: normal; line-height: 1.35; }
.hd-acts .act-status { grid-column: 2; font-size: 11px; }
/* Beats not yet reached are hidden outright, so the static frame and reduced
   motion both show exactly the beats that have happened. The entrance is one
   short rise that reduced motion removes. */
.hd-beat.hd-in { animation: hd-rise 260ms var(--ease-out); }
@keyframes hd-rise { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } }
.hd-player { grid-template-columns: auto auto minmax(0, 1fr); margin-top: 2px; }
.hd-step { min-height: 40px; padding: 0 0.9rem; }
.hd-player .player-caption { font-size: 13px; }

/* Use cases: an assignment in quotes, then the team, the result and the
   moment it asks you, as a small table rather than a paragraph. */
.home-cases { gap: 14px; }
.home-case { display: grid; gap: 12px; align-content: start; padding: 24px; background: var(--panel); border: 1px solid var(--border-strong); border-radius: 14px; }
.home-case-k { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.home-case .h-tiny { font-size: 24px; }
.home-case dl { margin: 6px 0 0; display: grid; gap: 0; }
.home-case dl > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); font-size: 15px; }
.home-case dt { color: var(--text-3); font-weight: 500; }
.home-case dd { margin: 0; color: var(--text-2); }

/* How it works: four steps, each saying whether it is open today. */
.home-steps-4 { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.home-step-state { margin-top: auto; padding-top: 6px; font-size: 13.5px; color: var(--text-3); }
.home-step-state.is-open { color: var(--working); font-weight: 600; }
.home-step-state a { color: var(--text-2); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-color: var(--border-strong); }

/* The tools: names, not marks. What matters here is recognising a name;
   how each one is connected is a paragraph on the product tour. */
.home-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.home-tool-group { display: grid; gap: 10px; align-content: start; padding: 24px; background: var(--panel); border: 1px solid var(--border-strong); border-radius: 14px; }
.home-tool-group p { margin: 0; color: var(--text-2); font-size: 15.5px; }
.home-tool-wide { grid-column: 1 / -1; }
.home-chips { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.home-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--text); font-size: 14px; }
.home-chip small { font-size: 11.5px; color: var(--gold); font-weight: 600; letter-spacing: 0.02em; }
.home-chip-included { border-color: rgba(226, 169, 59, 0.5); }

/* Pricing: the three things that exist, then the Cloud plans as a strip, then
   the three facts a buyer needs before the plan. */
.home-price-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.home-tier { display: grid; gap: 8px; align-content: start; padding: 24px; background: var(--panel); border: 1px solid var(--border-strong); border-radius: 14px; }
.home-tier p { margin: 0; color: var(--text-2); font-size: 15.5px; }
.home-tier a { color: var(--text); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-color: var(--border-strong); }
.home-tier-price { font-family: var(--display); font-weight: 600; font-size: 30px; letter-spacing: -0.02em; color: var(--text) !important; }
.home-tier-price small { font-family: var(--sans); font-weight: 400; font-size: 14px; color: var(--text-3); letter-spacing: 0; }
.home-tier-cloud { border-color: rgba(226, 169, 59, 0.35); }
.home-facts { margin-top: 22px; margin-bottom: 30px; }
.home-faq .faq details { border-top: 1px solid var(--border); }
.home-faq details { border-top: 1px solid var(--border); }
.home-faq details:last-child { border-bottom: 1px solid var(--border); }
.home-faq summary { cursor: pointer; padding: 16px 0; font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: -0.015em; }
.home-faq summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.home-faq details > p { margin: 0 0 18px; color: var(--text-2); font-size: 16px; max-width: 46em; }
.home-faq details a { color: var(--text); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-color: var(--border-strong); }

@media (max-width: 1100px) {
  .home-hero-cols { grid-template-columns: 1fr; gap: 36px; }
  .home-stage { max-width: none; }
  .home-tools { grid-template-columns: 1fr; }
  .home-price-tiers { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .window.hd { grid-template-columns: 1fr; height: auto; }
  .hd-centre { border-right: 0; border-bottom: 1px solid var(--border); }
  .hd-chat { max-height: 520px; }
  .hd-rail { background: none; }
  .hd-player { grid-template-columns: auto auto; }
  .hd-player .player-track { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .home-hero .h-hero { font-size: clamp(38px, 11vw, 48px); }
  .home-line { font-size: 18px; }
  .home-case { padding: 18px; }
  .home-case dl > div { grid-template-columns: 1fr; gap: 2px; }
  .home-tool-group, .home-tier { padding: 18px; }
  .home-tier-price { font-size: 26px; }
  .hd-chat .mcard { max-width: none; }
}

/* ================================================================ third pass: pages
   The story is split across dedicated pages and the homepage opens with the
   product itself. Everything below is layout for those pages; the scenes,
   the rings and the windows are the same components as before. */

/* ---- inner page heroes: kicker, headline, lede, actions, one visual ---- */
.page-hero { padding: clamp(40px, 6vw, 88px) 0 clamp(24px, 4vw, 48px); }
.page-hero .cols { align-items: center; }
.page-hero-copy { display: grid; gap: 22px; }
.page-hero-copy .h-hero { font-size: clamp(44px, 5.4vw, 72px); max-width: 11em; }
.page-hero-copy .lede { max-width: 32em; }
.page-hero-visual { position: relative; min-height: 320px; display: grid; align-content: center; justify-items: end; }
.kicker-line { display: flex; align-items: center; gap: 12px; color: var(--text-2); font-size: 16px; }
.kicker-line .home-mark { width: 24px; height: 24px; color: var(--text); }
.kicker-line .home-mark .u1 { fill: var(--gold); }

/* ---- the homepage hero: the original worker card beside the new sentence ---- */
.scene-hero.home-open { min-height: 0; padding-top: clamp(32px, 5vw, 72px); padding-bottom: clamp(32px, 4vw, 56px); }
.home-open .hero-copy .h-hero { max-width: 10em; font-size: clamp(48px, 6.2vw, 92px); }
.home-open .hero-line { font-family: var(--display); font-weight: 600; font-size: 21px; letter-spacing: -0.015em; color: var(--text); margin-top: -4px; }
.home-open .hero-under { color: var(--text-3); font-size: 15px; max-width: 36em; margin-top: -8px; }
.home-open .hero-under a { color: var(--text-2); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-color: var(--border-strong); }
.hero-stage .card-tech { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; }

/* ---- the demonstration: the room beside the team board ---- */
.scene-demo { padding-top: 24px; }
.demo-head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 32px; align-items: end; margin-bottom: 28px; }
.demo-head .lede { max-width: 34em; }
.demo-tag { display: inline-flex; align-items: center; gap: 10px; height: 26px; padding: 0 10px 0 4px; border-radius: 999px; border: 1px solid rgba(226, 169, 59, 0.5); color: var(--gold); font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.demo-tag::before { content: ''; width: 16px; height: 16px; border-radius: 50%; background: rgba(226, 169, 59, 0.16); border: 1px solid rgba(226, 169, 59, 0.5); }
.demo-note { font-size: 13.5px; color: var(--text-3); margin-top: 8px; }
.window.hd { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); min-height: 620px; }
.hd-centre { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; border-right: 1px solid var(--border); }
.hd .window-head { padding: 14px 20px; }
.hd-chat { display: grid; align-content: end; gap: 2px; padding: 8px 20px 14px; max-height: 560px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.hd-chat .msg { padding: 8px 0; }
.hd-chat .msg-body { font-size: 14px; line-height: 1.5; }
.hd-chat .msg.you .msg-body { color: var(--text); }
.hd-chat .msg-head .badge { height: 18px; font-size: 10.5px; }
.hd-chat .mcard { max-width: 420px; }
.hd .room-compose { margin-top: 8px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 9px; color: var(--text-3); font-size: 13px; }
.hd .mcard.result { border-color: rgba(226, 169, 59, 0.45); background: linear-gradient(180deg, #221F18, var(--raised)); }
.hd .mcard.result .mcard-title { color: var(--text); font-size: 14px; }
.doc-icon { width: 20px; height: 20px; color: var(--gold); flex: none; }
.hd-board { display: grid; align-content: start; gap: 14px; padding: 18px 18px 20px; background: rgba(29, 33, 41, 0.35); }
.board-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.board-k { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.board-goal { font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: -0.02em; }
.board-needs { display: flex; }
.board-tree { position: relative; display: grid; gap: 0; justify-items: center; }
.board-node { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--border-strong); width: 100%; transition: border-color 400ms ease, box-shadow 400ms ease; }
.board-node[data-state="working"] { border-color: rgba(57, 193, 115, 0.35); }
.board-node[data-state="waiting"] { border-color: rgba(226, 169, 59, 0.6); box-shadow: 0 0 0 4px rgba(226, 169, 59, 0.1); }
.board-node[data-state="done"] { border-color: rgba(57, 193, 115, 0.5); }
.board-manager { max-width: 360px; }
.board-body { display: grid; gap: 2px; min-width: 0; }
.board-name { font-size: 14.5px; font-weight: 600; display: flex; align-items: center; flex-wrap: wrap; gap: 2px 0; }
.board-title { font-size: 12.5px; color: var(--text-2); }
.board-task { font-size: 13px; color: var(--text); margin-top: 4px; }
.board-work { font-size: 12.5px; margin-top: 2px; }
.board-node[data-state="done"] .board-work { color: var(--working); }
.board-fork { display: block; width: 100%; height: 34px; position: relative; }
.board-fork::before { content: ''; position: absolute; left: 50%; top: 0; width: 1.5px; height: 16px; background: var(--gold); opacity: 0.7; }
.board-fork::after { content: ''; position: absolute; left: 25%; right: 25%; top: 16px; height: 1.5px; background: var(--gold); opacity: 0.7; border-left: 1.5px solid var(--gold); border-right: 1.5px solid var(--gold); box-sizing: border-box; height: 18px; border-top: 1.5px solid var(--gold); background: none; border-bottom: 0; }
.board-workers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; }
.board-worker { grid-template-columns: 1fr; justify-items: start; align-content: start; gap: 8px; padding: 14px; }
.board-result { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px; border-radius: 12px; border: 1px solid rgba(226, 169, 59, 0.5); background: linear-gradient(180deg, #24201A, #161920); box-shadow: 0 0 40px rgba(226, 169, 59, 0.12); }
.board-result-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(226, 169, 59, 0.14); display: inline-flex; align-items: center; justify-content: center; }
.board-result-icon .doc-icon { width: 22px; height: 22px; }
.board-result-title { font-weight: 600; font-size: 14.5px; }
.board-result-sub { font-size: 12.5px; color: var(--text-2); }
.hd-beat.hd-in { animation: hd-rise 260ms var(--ease-out); }
@keyframes hd-rise { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } }
.hd-player { grid-template-columns: auto auto minmax(0, 1fr); margin-top: 14px; }
.hd-step { min-height: 40px; padding: 0 0.9rem; }

/* ---- what would you build: five teams, the roles as rings ---- */
.scene-cases .head-row { margin-bottom: 36px; }
.case { padding: 22px 20px; gap: 12px; transition: border-color 200ms ease, transform 300ms var(--ease-out); }
.case:hover, .case:focus-within { border-color: rgba(226, 169, 59, 0.45); transform: translateY(-2px); }
.case-name { font-size: 21px; }
.case-lead { font-size: 14px; }
.case-objective { font-size: 14px; padding: 10px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.case-roles { gap: 7px; }
.case-role { font-size: 13.5px; }
.case-link { margin-top: auto; padding-top: 10px; font-size: 13.5px; color: var(--gold); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; }
.case-link::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg); }
.case-link:hover, .case-link:focus-visible { color: var(--gold-hover); text-decoration: underline; text-underline-offset: 0.2em; }
.case-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.cases-note { margin-top: 20px; font-size: 14px; color: var(--text-3); }

/* ---- the logo wall ---- */
.logo-stage { display: grid; gap: 28px; }
.logo-stage .eco-row:first-child { border-top: 0; padding-top: 0; }
.apps-wall { display: grid; gap: 16px; }
.apps .bchip.app.agent { border-style: dashed; background: transparent; }
.apps .bchip.app.service { border-color: rgba(226, 169, 59, 0.35); }
.apps-key { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 13.5px; color: var(--text-2); }
.apps-key-item { display: inline-flex; align-items: center; gap: 8px; }
.apps-key-item b { color: var(--text); font-weight: 600; }
.apps-key-swatch { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--border-strong); background: var(--panel); flex: none; }
.apps-key-swatch.agent { border-style: dashed; background: transparent; }
.apps-key-swatch.service { border-color: rgba(226, 169, 59, 0.5); }

/* ---- the clients, on the dark ground ---- */
.scene-clients .open-stage { min-height: 700px; }
.scene-clients .open-desktop .window, .scene-clients .tablet .window { box-shadow: var(--shadow-window); }
.clients-copy { display: grid; gap: 20px; align-content: start; }
.clients-list { display: grid; gap: 8px; font-size: 16px; color: var(--text-2); }
.clients-list li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; }
.clients-list .check { width: 16px; height: 16px; margin-top: 3px; }
.clients-plat { display: flex; flex-wrap: wrap; gap: 8px; }
.clients-plat .plat { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 999px; border: 1px solid var(--border-strong); font-size: 14px; color: var(--text-2); }
.clients-plat .plat .brand-mark { color: var(--text); }

/* ---- how it works ---- */
.approval-stage { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 32px; align-items: start; }
.approval-left { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: start; }
.approval-roster { padding: 12px; display: grid; gap: 2px; align-content: start; }
.approval-roster .panel-title { padding: 4px 8px 10px; }
.approval-roster .needs { height: 30px; padding: 0 9px; font-size: 12px; }
.approval-window .approval-body { padding: 16px 20px 20px; }
.approval-window .mcard { max-width: 100%; }
.approval-right { display: grid; justify-items: center; }
.approval-phone { width: 250px; padding: 12px 10px; }
.phone-approval { padding: 10px 6px; }
.phone-approval .pending { opacity: 1; transform: none; background: var(--raised); border-radius: 10px; padding: 10px; }
.phone-approval .pending.resolved { opacity: 0.6; }
.phone-approval .pending.resolved .ui-btn { background: var(--raised); color: var(--working); border-color: rgba(57, 193, 115, 0.4); }
.approval-controls { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.approval-note { font-size: 15px; color: var(--text-2); margin: 0; }
.how-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.scene-continue .summary-msg { margin-top: 20px; }

/* ---- runtimes: where a worker runs ---- */
.run-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.run-option { position: relative; display: grid; gap: 12px; align-content: start; padding: 26px 24px 24px; border-radius: 16px; background: var(--panel); border: 1px solid var(--border-strong); overflow: hidden; }
.run-option::before { content: ''; position: absolute; left: -60px; top: -100px; width: 320px; height: 320px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(57, 193, 115, 0.12), rgba(57, 193, 115, 0) 65%); }
.run-option.soon::before { background: radial-gradient(circle, rgba(226, 169, 59, 0.14), rgba(226, 169, 59, 0) 65%); }
.run-option > * { position: relative; }
.run-option .h-tiny { font-size: 26px; }
.run-option p { color: var(--text-2); font-size: 15.5px; }
.run-option ul { display: grid; gap: 6px; color: var(--text-2); font-size: 14.5px; padding-left: 18px; }
.avail { justify-self: start; display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; border: 1px solid rgba(57, 193, 115, 0.5); color: var(--working); }
.avail.soon { border-color: rgba(226, 169, 59, 0.5); color: var(--gold); }
.avail::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.run-devices { display: flex; gap: 12px; align-items: center; color: var(--text-2); }
.run-devices .brand-mark { color: var(--text); }
.pairing { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: center; }
.pairing-window { width: 100%; }
.pairing-body { padding: 18px 20px; display: grid; gap: 10px; }
.pair-row { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--raised); border: 1px solid var(--border); font-size: 13.5px; }
.pair-row .pair-sub { font-size: 12px; color: var(--text-3); }
.pair-row .ui-btn { justify-self: end; }
.pair-code { font-family: var(--display); font-weight: 600; font-size: 24px; letter-spacing: 0.18em; color: var(--gold); padding: 8px 12px; border: 1px dashed rgba(226, 169, 59, 0.5); border-radius: 10px; justify-self: start; }

/* ---- Korps Cloud ---- */
.scene-cloud.page-hero { padding-top: clamp(40px, 6vw, 88px); }
.cloud-today { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cloud-col { display: grid; gap: 14px; align-content: start; padding: 26px; border-radius: 16px; border: 1px solid var(--border-strong); background: var(--panel); }
.cloud-col.soon { border-color: rgba(226, 169, 59, 0.35); background: linear-gradient(180deg, #1B1912, var(--panel)); }
.cloud-col ul { display: grid; gap: 8px; }
.cloud-col li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; color: var(--text-2); font-size: 15.5px; }
.cloud-col li .check { width: 16px; height: 16px; margin-top: 3px; }
.cloud-col.soon li .check { background: var(--gold); color: #1A1305; }
.compare { width: 100%; border-collapse: collapse; font-size: 15px; }
.compare th, .compare td { padding: 14px 16px; text-align: left; border-top: 1px solid var(--border); vertical-align: top; }
.compare th { font-weight: 600; color: var(--text); font-family: var(--display); font-size: 17px; letter-spacing: -0.01em; }
.compare td { color: var(--text-2); }
.compare td b { color: var(--text); font-weight: 600; }
.compare thead th { border-top: 0; color: var(--text-3); font-family: var(--sans); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; }
.compare .yes { color: var(--working); font-weight: 600; }
.compare .soon { color: var(--gold); font-weight: 600; }
.compare-wrap { overflow-x: auto; }
.iso { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.iso-cell { display: grid; gap: 10px; align-content: start; padding: 22px; border-radius: 14px; border: 1px solid var(--border); background: rgba(22, 25, 32, 0.6); }
.iso-cell .h-tiny { font-size: 22px; }
.iso-cell p { color: var(--text-2); font-size: 15px; }

/* ---- Get Korps ---- */
.platform-mark { display: inline-flex; align-items: center; justify-content: center; border-radius: 18px; background: var(--raised); border: 1px solid var(--border-strong); color: var(--text); }
.platform-mark .brand-mark { --bsize: 40px; }
.platform-mark.small .brand-mark { --bsize: 26px; }
.platform-state { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--text-2); font-size: 13.5px; justify-self: start; }
.platform-state::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--waiting); }
.release { margin-top: 0; }
.get-what { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.get-what .home-card p { font-size: 15.5px; }

/* ---- a quieter band for prose sections on the dark pages ---- */
.band-copy { max-width: 42em; display: grid; gap: 14px; }
.band-copy p { color: var(--text-2); font-size: 17px; }
.two-up { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; align-items: center; }

/* ---- legacy anchors: the tour used to hold every scene ---- */
.scene-path ol { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1100px) {
  .window.hd { grid-template-columns: 1fr; min-height: 0; }
  .hd-centre { border-right: 0; border-bottom: 1px solid var(--border); }
  .hd-chat { max-height: 480px; }
  .demo-head { grid-template-columns: 1fr; gap: 12px; }
  .cases-stage { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
  .approval-stage { grid-template-columns: 1fr; }
  .approval-left { grid-template-columns: 1fr; }
  .approval-roster { max-width: 26rem; }
  .run-options { grid-template-columns: 1fr; }
  .cloud-today { grid-template-columns: 1fr; }
  .iso { grid-template-columns: 1fr; }
  .get-what { grid-template-columns: 1fr; }
  .how-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pairing { grid-template-columns: 1fr; }
  .two-up { grid-template-columns: 1fr; }
  .page-hero-visual { justify-items: start; min-height: 0; }
}
@media (max-width: 900px) {
  .scene-hero.home-open .hero-stage { order: 3; }
  .home-open .hero-line { order: 4; }
  .home-open .hero-under { order: 6; }
  .board-workers { grid-template-columns: 1fr; }
  .board-fork::after { display: none; }
  .scene-clients .open-stage { min-height: 560px; }
  .how-steps { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .hd-player { grid-template-columns: auto auto; }
  .hd-player .player-track { grid-column: 1 / -1; }
  .hd-chat .mcard { max-width: none; }
  .hd-board { padding: 14px; }
  .home-open .hero-copy .h-hero { font-size: clamp(38px, 11vw, 48px); }
  .approval-controls { flex-direction: column; align-items: flex-start; }
}
.byo-usage { position: relative; }
.byo-illus { position: absolute; right: 10px; top: 8px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
/* A beat that has not happened is not on the page at all, whatever display
   the component would otherwise have. */
.hd-beat[hidden], .board-result[hidden] { display: none !important; }
/* The light follows the named scenes on the dedicated pages the way it
   follows the numbered ones on the tour. */
body.at-assign .light { transform: translate3d(64vw, 60vh, 0); opacity: 0.45; }
body.at-delegation .light { transform: translate3d(36vw, 40vh, 0); opacity: 0.5; }
body.at-demo .light { transform: translate3d(76vw, 52vh, 0); opacity: 0.9; }
body.at-departments .light { transform: translate3d(50vw, 50vh, 0); opacity: 0.5; }
body.at-progress .light { transform: translate3d(30vw, 60vh, 0); opacity: 0.7; }
body.at-approvals .light { transform: translate3d(70vw, 46vh, 0); opacity: 0.95; }
body.at-routines .light { transform: translate3d(70vw, 70vh, 0); opacity: 0.4; }
body.at-setup .light { transform: translate3d(50vw, 30vh, 0); opacity: 0.45; }
body.at-stack .light { transform: translate3d(66vw, 44vh, 0); opacity: 0.5; }
body.at-compute .light { transform: translate3d(30vw, 50vh, 0); opacity: 0.35; }
body.at-execution .light { transform: translate3d(50vw, 55vh, 0); opacity: 0.6; }
body.at-pairing .light { transform: translate3d(28vw, 66vh, 0); opacity: 0.4; }
body.at-today .light { transform: translate3d(50vw, 40vh, 0); opacity: 0.7; }
body.at-isolation .light { transform: translate3d(24vw, 40vh, 0); opacity: 0.4; }
body.at-sync .light { transform: translate3d(70vw, 60vh, 0); opacity: 0.5; }
body.at-end .light { transform: translate3d(50vw, 40vh, 0); opacity: 0.7; }
/* The system view's nodes are placed by script once fonts are in; until
   then they are not painted, so placing them is not a layout shift. */
.system .sys-node:not(.sys-core):not(.placed) { visibility: hidden; }
.compare-wrap:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 8px; }
/* A mark named in markup is drawn by script; its slot holds its size from
   the first paint so the line around it never reflows. */
[data-brand-mark] { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.tech [data-brand-mark] { min-width: 16px; min-height: 16px; }
.clients-plat .plat [data-brand-mark] { min-width: 18px; min-height: 18px; }
.run-devices [data-brand-mark] { min-width: 22px; min-height: 22px; }
.platform-mark [data-brand-mark] { min-width: 40px; min-height: 40px; }
/* Use cases: every role is a person. The portrait sits in the ring at a size
   the face reads at, the role beside it, the name for a screen reader. */
.case-roles { gap: 8px; }
.case-role { gap: 10px; min-height: 34px; }
.case-role .ring { flex: none; }
.case-role .ring img, .case-role .ring .initials { --inset: calc(var(--size) * 0.075 + 2.5px); }
.case-role-name { font-size: 13.5px; color: var(--text); }
.case-roles .ring svg { animation: none; }
/* The missing-page cards are links: the same card, with a hover the eye can read. */
a.home-card { color: inherit; text-decoration: none; transition: border-color 200ms ease, transform 300ms var(--ease-out); }
a.home-card:hover, a.home-card:focus-visible { border-color: rgba(226, 169, 59, 0.45); transform: translateY(-2px); }
a.home-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
a.home-card .h-tiny { display: block; font-family: var(--display); font-weight: 600; }

/* ================================================================ phones and folding phones
   The Galaxy Fold's closed screen is about 344 CSS pixels wide and its open
   screen about 673; the site has to read on both, and keep its state when
   one becomes the other. Nothing here changes the desktop. */

/* ---- the hero on a phone: headline, benefit, actions, then a compact
   visual of a manager coordinating workers toward a result ---- */
.hero-mini { display: none; }
@media (max-width: 900px) {
  .scene-hero.home-open { padding-top: 16px; padding-bottom: 32px; }
  .home-open .hero-stage { display: none; }
  .home-open .hero-copy .h-hero { order: 2; margin-bottom: 0; }
  .home-open .lede { order: 3; margin: 0; }
  .home-open .hero-line { order: 4; margin: 0; font-size: 18px; }
  .home-open .actions { order: 5; margin-top: 4px; }
  .home-open .hero-under { order: 6; margin: 0; }
  .home-open .hero-mini { order: 7; display: grid; }
  .home-open .hero { row-gap: 14px; }
}
.hero-mini {
  gap: 8px; margin-top: 8px; padding: 14px;
  background: var(--panel); border: 1px solid var(--border-strong); border-radius: 14px;
  box-shadow: var(--shadow-card);
}
.mini-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 0 2px 6px; }
.mini-k { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.mini-goal { font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: -0.015em; }
.mini-head .demo-tag { margin-left: auto; height: 22px; font-size: 10.5px; }
.mini-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--raised); border: 1px solid var(--border); }
.mini-manager { border-color: rgba(226, 169, 59, 0.45); }
.mini-body { min-width: 0; display: grid; gap: 1px; }
.mini-name { font-size: 14px; font-weight: 600; display: flex; align-items: center; flex-wrap: wrap; gap: 2px 0; }
.mini-name .badge { height: 18px; font-size: 10.5px; }
.mini-sub { font-size: 12.5px; color: var(--text-2); }
.mini-sub .state-text { color: var(--working); font-weight: 600; margin-left: 6px; }
.mini-workers { display: grid; gap: 6px; margin-left: 18px; padding-left: 12px; border-left: 1.5px solid rgba(226, 169, 59, 0.55); }
.mini-result { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(226, 169, 59, 0.5); background: linear-gradient(180deg, #24201A, #161920); }
.mini-result .board-result-icon { width: 36px; height: 36px; }
.mini-result .board-result-title { font-size: 14px; }
.mini-result .board-result-sub { font-size: 12px; }
.hero-mini .ring svg { animation: none; }

/* ---- the demo: stages and playback above the window ---- */
.hd-controls { display: grid; gap: 12px; margin-bottom: 14px; }
.hd-stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.hd-stage {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 10px;
  border-radius: 10px; border: 1px solid var(--border-strong); background: var(--panel);
  color: var(--text-2); font: 600 13.5px/1.2 var(--sans); text-align: left; cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease, background-color 200ms ease;
}
.hd-stage-n { width: 22px; height: 22px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; border: 1.5px solid var(--border-strong); }
.hd-stage.done { color: var(--text-2); }
.hd-stage.done .hd-stage-n { background: var(--working); border-color: var(--working); color: #062A15; }
.hd-stage[aria-current="step"] { color: var(--text); border-color: rgba(226, 169, 59, 0.6); background: rgba(226, 169, 59, 0.08); }
.hd-stage[aria-current="step"] .hd-stage-n { background: var(--gold); border-color: var(--gold); color: #1A1305; }
.hd-stage:hover { color: var(--text); border-color: var(--text-3); }
.hd-stage:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.hd-player { margin-top: 0; }
.scene-demo { padding-top: 24px; }
.demo-head { margin-bottom: 20px; }

/* ---- the demo on a phone: one stage at a time, no inner scrolling, a
   board of compact rows, and no line that points at nothing ---- */
@media (max-width: 760px) {
  .window.hd { min-height: 0; }
  .hd-chat { max-height: none; overflow: visible; min-height: 200px; align-content: start; padding: 10px 14px 12px; }
  .hd-chat .msg-body { font-size: 14px; }
  .hd-chat .mcard { max-width: none; }
  .hd .room-compose { display: none; }
  .hd-board { padding: 12px 12px 14px; gap: 10px; }
  .board-head { align-items: flex-start; }
  .board-goal { font-size: 17px; }
  .board-tree { gap: 6px; justify-items: stretch; }
  .board-manager { max-width: none; padding: 10px 12px; gap: 12px; }
  .board-manager .ring { --size: 44px !important; }
  .board-fork { display: none; }
  .board-workers { grid-template-columns: 1fr; gap: 6px; margin-left: 18px; padding-left: 12px; border-left: 1.5px solid rgba(226, 169, 59, 0.55); }
  .board-worker { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 10px; }
  .board-worker .ring { --size: 36px !important; }
  .board-worker .board-body { gap: 0; }
  .board-worker .board-name { font-size: 13.5px; }
  .board-worker .board-title { display: none; }
  .board-task { margin-top: 0; font-size: 13px; }
  .board-work { font-size: 12px; }
  .board-result { grid-template-columns: 36px minmax(0, 1fr); gap: 10px 12px; }
  .board-result .ui-btn { grid-column: 2; justify-self: start; }
  .hd-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hd-player { grid-template-columns: auto auto; }
  .hd-player .player-track { grid-column: 1 / -1; }
}
@media (max-width: 400px) {
  .hd-stage { padding: 6px 8px; font-size: 13px; gap: 6px; }
  .hd-player .player-btn, .hd-player .hd-step { min-height: 42px; padding: 0 0.85rem; font-size: 0.9rem; }
}

/* ---- use cases: two columns where they fit, a disclosure on a phone ---- */
.case-toggle { display: none; }
.case-preview { display: inline-flex; align-items: center; gap: 10px; }
.case-preview .stack .ring { box-shadow: 0 0 0 2px var(--panel); }
.case-preview-n { font-size: 13px; color: var(--text-2); }
@media (min-width: 601px) and (max-width: 1100px) {
  .cases-stage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .cases-stage { grid-template-columns: 1fr; gap: 10px; }
  .case { padding: 18px 16px; gap: 10px; }
  .case-name { font-size: 20px; }
  .case-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; min-height: 48px; padding: 6px 10px 6px 6px;
    border: 1px solid var(--border-strong); border-radius: 10px; background: var(--raised);
    color: var(--text); font: 600 13.5px/1.2 var(--sans); cursor: pointer; text-align: left;
  }
  .case-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
  .case-toggle-word { color: var(--gold); display: inline-flex; align-items: center; gap: 6px; }
  .case-toggle-word::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 200ms ease; }
  .case[class~="open"] .case-toggle-word::after { transform: rotate(-135deg); }
  .case:not(.open) .case-roles { display: none; }
  .case.open .case-toggle .case-preview { opacity: 0.6; }
  .case-roles { margin-top: 4px; }
  .case-link { min-height: 44px; }
}

/* ---- the showcase ---- */
.showcase { display: grid; gap: 14px; }
.show-row {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 16px 32px; align-items: center;
  padding: 22px 24px; border-radius: 14px; background: var(--panel); border: 1px solid var(--border-strong);
}
.show-copy { display: grid; gap: 6px; }
.show-copy .h-tiny { font-size: 22px; }
.show-copy p { font-size: 15px; color: var(--text-2); margin: 0; }
.show-marks { display: flex; flex-wrap: wrap; gap: 8px; }
.show-mark { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 14px 0 10px; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--text); font-size: 14px; }
.show-mark .brand-mark { color: var(--text); }
.show-more { color: var(--text-2); border-style: dashed; padding: 0 14px; }
.show-link { grid-column: 2; justify-self: start; font-size: 14.5px; color: var(--gold); text-decoration: none; min-height: 40px; display: inline-flex; align-items: center; gap: 6px; }
.show-link::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg); }
.show-link:hover, .show-link:focus-visible { color: var(--gold-hover); text-decoration: underline; text-underline-offset: 0.2em; }
.show-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
@media (max-width: 900px) {
  .show-row { grid-template-columns: 1fr; gap: 12px; padding: 18px; }
  .show-link { grid-column: 1; }
  .show-mark { min-height: 40px; font-size: 13.5px; }
}

/* ---- density on narrow and intermediate screens: less air, same type ---- */
@media (max-width: 900px) {
  .head-row { margin-bottom: 22px; }
  .scene-demo .demo-head { margin-bottom: 14px; }
  .scene-clients .open-stage { min-height: 560px; }
  .scene-end { padding-bottom: 48px; }
  .clients-copy { gap: 14px; }
}
@media (max-width: 600px) {
  :root { --scene-gap: 64px; }
  .h-section { font-size: 34px; }
  .lede { font-size: 16.5px; }
  .home-open .hero-copy .h-hero { font-size: clamp(36px, 10.5vw, 46px); }
  .home-open .lede.big { font-size: 17px; }
  .home-open .hero-under { font-size: 14px; }
  .actions { gap: 10px; }
  .actions .btn { width: 100%; justify-content: center; }
  .scene .h-section[data-chapter]::before { margin-bottom: 8px; }
}
@media (max-width: 400px) {
  :root { --gutter: 18px; }
  .home-open .hero-copy .h-hero { font-size: clamp(32px, 10.5vw, 40px); }
  .mini-row { padding: 7px 8px; }
  .mini-workers { margin-left: 14px; padding-left: 10px; }
}
@media (max-width: 380px) { .case-preview-n { display: none; } .case-toggle { padding-right: 8px; } }
.case-toggle-word { white-space: nowrap; }

/* ================================================================ pricing offerings
   Three offerings, three pages, one tab bar. Every block sits on an explicit
   panel background so the copy reads on the dark ground at any width. */
.offer-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 32px; padding: 6px; background: var(--panel); border: 1px solid var(--border-strong); border-radius: 14px; width: fit-content; max-width: 100%; }
.page main .offer-tabs a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 9px; font-size: 15px; font-weight: 600; color: var(--text-2); text-decoration: none; white-space: nowrap; }
.page main .offer-tabs a:hover { color: var(--text); background: var(--raised); }
.page main .offer-tabs a[aria-current="page"] { color: #1A1305; background: var(--gold); }
.page main .offer-tabs a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.offer-tabs .tab-n { font-size: 12px; opacity: 0.7; margin-right: 8px; font-weight: 500; }
.offer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; margin: 8px 0 24px; }
.offer { position: relative; display: grid; gap: 12px; align-content: start; padding: 28px 24px; background: var(--panel); border: 1px solid var(--border-strong); border-radius: 16px; min-width: 0; }
.offer-cloud { border-color: rgba(226, 169, 59, 0.6); background: linear-gradient(180deg, #1D1B16, #161920); box-shadow: 0 0 60px rgba(226, 169, 59, 0.12); }
.offer-flag { position: absolute; top: -12px; left: 20px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #1A1305; background: var(--gold); padding: 4px 9px; border-radius: 999px; }
.offer-name { font-family: var(--display); font-weight: 600; font-size: 26px; letter-spacing: -0.02em; }
.offer-price b { font-family: var(--display); font-weight: 600; font-size: 38px; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.offer-price span { color: var(--text-3); font-size: 14px; }
.offer-for { font-size: 15px; color: var(--text); }
.offer-line { font-size: 15px; color: var(--text-2); }
.offer-setup, .offer-commit { font-size: 15px; color: var(--text-2); }
.offer-setup b, .offer-commit b { color: var(--text); font-weight: 600; }
.offer-list { display: grid; gap: 8px; padding: 0; margin: 4px 0; list-style: none; }
.offer-list li { position: relative; padding-left: 20px; font-size: 14.5px; color: var(--text-2); }
.offer-list li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.offer .btn { justify-self: start; margin-top: 6px; }
.offer-foot { font-size: 13.5px; color: var(--text-3); }
.offer-example { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: rgba(0, 0, 0, 0.18); }
.offer-example p { font-size: 15px; color: var(--text); }
.offer-scope { border-top: 1px solid var(--border); padding-top: 4px; }
.offer-scope summary { cursor: pointer; list-style: none; padding: 10px 0; font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 12px; }
.offer-scope summary::-webkit-details-marker { display: none; }
.offer-scope summary::before { content: ''; flex: none; width: 8px; height: 8px; border-right: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold); transform: rotate(45deg) translateY(-2px); transition: transform 200ms ease; }
.offer-scope[open] summary::before { transform: rotate(225deg) translateY(-2px); }
.offer-scope summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.offer-scope ul { display: grid; gap: 6px; padding: 0 0 10px 20px; margin: 0; }
.offer-scope li { font-size: 14px; color: var(--text-2); }
.offer.custom { border-style: dashed; }
.cap-label { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin-top: 4px; }
.cap-select { display: flex; flex-wrap: wrap; gap: 6px; padding: 5px; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--border-strong); border-radius: 12px; }
.cap-option { flex: 1 1 auto; min-width: 0; min-height: 44px; display: inline-flex; align-items: baseline; justify-content: center; gap: 5px; padding: 8px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--text-2); font: inherit; font-size: 14px; cursor: pointer; }
.cap-option b { font-family: var(--display); font-weight: 600; font-size: 18px; color: var(--text); }
.cap-option:hover { background: var(--raised); color: var(--text); }
.cap-option[aria-checked="true"] { background: var(--gold); color: #1A1305; }
.cap-option[aria-checked="true"] b { color: #1A1305; }
.cap-option:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.cap-note { font-size: 14px; color: var(--text-2); padding: 10px 12px; border-left: 2px solid var(--gold); background: rgba(226, 169, 59, 0.06); border-radius: 0 8px 8px 0; }
.estimate { padding: 24px; display: grid; gap: 10px; align-content: start; }
.estimate .h-tiny { font-size: 24px; }
.estimate > p { font-size: 15px; color: var(--text-2); }
.budget-select .cap-option b { font-size: 15px; }
.est-sum { display: grid; gap: 8px; margin-top: 8px; padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: rgba(0, 0, 0, 0.18); }
.est-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--text-2); }
.est-row b { color: var(--text); font-weight: 600; text-align: right; }
.est-total { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding-top: 8px; border-top: 1px solid var(--border-strong); font-size: 14px; color: var(--text); }
.est-total b { font-family: var(--display); font-weight: 600; font-size: 24px; letter-spacing: -0.02em; text-align: right; }
.est-note { font-size: 13.5px; color: var(--text-3); }
.offer-band { margin: 56px 0 8px; padding: 32px 28px; display: grid; gap: 14px; align-content: start; justify-items: start; background: var(--panel); border: 1px solid var(--border-strong); border-radius: 16px; }
.offer-band h2 { font-family: var(--display); font-weight: 600; font-size: 30px; letter-spacing: -0.02em; }
.offer-band p { font-size: 16px; color: var(--text-2); max-width: 46em; }
.resp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 8px 0 24px; }
.resp-col { padding: 24px; background: var(--panel); border: 1px solid var(--border-strong); border-radius: 16px; display: grid; gap: 8px; align-content: start; }
.resp-col.korps { border-color: rgba(226, 169, 59, 0.45); }
.resp-col p { font-size: 16px; color: var(--text); }
.req-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 8px 0 24px; }
.req-item { padding: 20px; background: var(--panel); border: 1px solid var(--border-strong); border-radius: 14px; display: grid; gap: 6px; align-content: start; }
.req-item h3 { font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: -0.02em; }
.req-item p { font-size: 14.5px; color: var(--text-2); }
.statement { padding: 20px 24px; border-left: 3px solid var(--gold); background: rgba(226, 169, 59, 0.06); border-radius: 0 12px 12px 0; font-size: 17px; color: var(--text); max-width: 46em; margin: 8px 0 24px; }
.engage { display: grid; gap: 10px; padding: 0; margin: 8px 0 24px; list-style: none; max-width: 46em; }
.engage li { position: relative; padding: 12px 14px 12px 34px; font-size: 15.5px; color: var(--text-2); background: var(--panel); border: 1px solid var(--border); border-radius: 10px; }
.engage li::before { content: ''; position: absolute; left: 14px; top: 1.05em; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.engage li strong { color: var(--text); }
@media (max-width: 1100px) { .offer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .offer-cloud { grid-column: 1 / -1; } }
@media (max-width: 900px) {
  .offer-tabs { width: 100%; }
  .offer-tabs a { flex: 1 1 auto; justify-content: center; padding: 0 12px; }
  .resp, .req-grid, .byo { grid-template-columns: 1fr; }
  .offer-band { padding: 24px 20px; }
  .offer-band h2 { font-size: 26px; }
}
@media (max-width: 640px) {
  .offer-grid { grid-template-columns: 1fr; }
  .offer { padding: 24px 18px; }
  .offer-price b { font-size: 34px; }
  .offer-tabs { flex-direction: column; }
  .offer-tabs a { white-space: normal; text-align: center; }
}
@media (max-width: 360px) {
  .offer { padding: 20px 14px; }
  .offer-price b { font-size: 30px; }
  .cap-option { padding: 8px 6px; font-size: 13px; }
  .cap-option b { font-size: 16px; }
  .est-row, .est-total { flex-direction: column; gap: 2px; }
  .est-row b, .est-total b { text-align: left; }
}

/* download page: why a build is or is not offered */
.platform-why { display: block; margin-top: 8px; font-size: 13.5px; color: var(--text-3); }
.release-reasons { margin: 4px 0 0; padding-left: 18px; font-size: 14px; color: var(--text-3); }
.release[data-offerable="true"] .release-soon { color: var(--working); }

/* ================================================================ what is an AI agent
   The explainer page: an employee-shaped profile card, a labelled conversation
   with a deliverable, twelve role tabs, a sample weekly review, the agent
   directory and the FAQ. Same tokens as the rest of the site. */
.aiq-hero { display: grid; gap: 16px; max-width: 46em; margin-bottom: 48px; }
.aiq-sub { font-family: var(--display); font-weight: 600; font-size: 26px; letter-spacing: -0.02em; color: var(--gold); }
.aiq-section { margin: 0 0 56px; }
.aiq-section > h2, .aiq-cta h2 { font-family: var(--display); font-weight: 600; font-size: 34px; letter-spacing: -0.02em; margin: 0 0 14px; max-width: 26em; }
.aiq-section > p { font-size: 17px; line-height: 1.6; color: var(--text-2); max-width: 46em; margin: 0 0 14px; }
.aiq-section > p.note { font-size: 15px; }
.aiq-two { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.aiq-two > div > p { font-size: 17px; line-height: 1.6; color: var(--text-2); margin: 0 0 14px; }
.aiq-two-tight { margin-top: 20px; }
.aiq-panel { padding: 24px; background: var(--panel); border: 1px solid var(--border-strong); border-radius: 16px; display: grid; gap: 10px; align-content: start; }
.aiq-panel h3 { font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: -0.02em; }
.aiq-panel p { font-size: 15.5px; line-height: 1.55; color: var(--text-2); }
.aiq-card { margin: 0; padding: 24px; background: linear-gradient(180deg, #1D1B16, #161920); border: 1px solid rgba(226, 169, 59, 0.5); border-radius: 18px; box-shadow: 0 0 60px rgba(226, 169, 59, 0.1); display: grid; gap: 16px; }
.aiq-card-top { display: flex; gap: 16px; align-items: center; }
.aiq-ring { position: relative; flex: none; width: 72px; height: 72px; border-radius: 50%; }
.aiq-ring::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--working); }
.aiq-ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.aiq-card-name { font-family: var(--display); font-weight: 600; font-size: 24px; letter-spacing: -0.02em; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.aiq-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border-radius: 999px; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #1A1305; background: var(--gold); }
.aiq-card-role { font-size: 15px; color: var(--text-2); margin-top: 2px; }
.aiq-card-facts { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 8px 14px; margin: 0; font-size: 14.5px; }
.aiq-card-facts dt { color: var(--text-3); }
.aiq-card-facts dd { margin: 0; color: var(--text); }
.aiq-card figcaption { font-size: 13px; color: var(--text-3); border-top: 1px solid var(--border); padding-top: 12px; }
.aiq-steps { counter-reset: aiq; display: grid; gap: 10px; padding: 0; margin: 0 0 20px; list-style: none; max-width: 46em; }
.aiq-steps li { position: relative; display: grid; gap: 4px; padding: 16px 16px 16px 56px; background: var(--panel); border: 1px solid var(--border-strong); border-radius: 12px; }
.aiq-steps li::before { counter-increment: aiq; content: counter(aiq); position: absolute; left: 16px; top: 16px; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; background: var(--gold); color: #1A1305; }
.aiq-steps b { font-family: var(--display); font-weight: 600; font-size: 18px; letter-spacing: -0.01em; }
.aiq-steps span { font-size: 15.5px; color: var(--text-2); line-height: 1.55; }
.aiq-convo { display: grid; gap: 12px; padding: 18px; background: var(--ground-deep); border: 1px solid var(--border-strong); border-radius: 16px; max-width: 52em; }
.aiq-convo-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.aiq-channel { font-weight: 600; }
.aiq-illus { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.aiq-msg { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--border); }
.aiq-msg.ai { border-color: rgba(226, 169, 59, 0.45); }
.aiq-msg p { font-size: 15px; line-height: 1.55; color: var(--text); margin: 0; }
.aiq-who { font-size: 13px; font-weight: 600; display: flex; gap: 8px; align-items: center; }
.aiq-who em { font-style: normal; font-weight: 500; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); padding: 1px 7px; border: 1px solid var(--border-strong); border-radius: 999px; }
.aiq-who em.ai { color: #1A1305; background: var(--gold); border-color: var(--gold); }
.aiq-deliverable { padding: 18px; border-radius: 12px; background: var(--paper); color: var(--ink); border: 1px solid var(--paper-rule); }
.aiq-deliverable-head { display: grid; gap: 4px; margin-bottom: 12px; }
.aiq-deliverable .byo-k { color: var(--gold-deep); }
.aiq-deliverable h3 { font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: -0.02em; color: var(--ink); }
.aiq-deliverable dl { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 10px 14px; margin: 0; font-size: 14.5px; }
.aiq-deliverable dt { color: var(--ink-2); font-weight: 600; }
.aiq-deliverable dd { margin: 0; color: var(--ink); line-height: 1.5; }
.aiq-src { display: block; font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
.aiq-flag { display: inline-block; font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #1A1305; background: var(--gold); padding: 1px 7px; border-radius: 999px; margin-right: 6px; }
.aiq-roles { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 14px; }
.aiq-tab { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border-strong); background: transparent; color: var(--text-2); font: inherit; font-size: 14.5px; font-weight: 500; cursor: pointer; }
.aiq-tab:hover { color: var(--text); border-color: var(--text-3); }
.aiq-tab[aria-selected="true"] { color: #1A1305; background: var(--gold); border-color: var(--gold); font-weight: 600; }
.aiq-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.aiq-role-panel { display: grid; gap: 16px; padding: 24px; background: var(--panel); border: 1px solid var(--border-strong); border-radius: 16px; }
.aiq-role-panel:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.aiq-role-head { display: grid; gap: 4px; }
.aiq-role-head h3 { font-family: var(--display); font-weight: 600; font-size: 26px; letter-spacing: -0.02em; }
.aiq-ask { padding: 14px 16px; border-left: 3px solid var(--gold); background: rgba(226, 169, 59, 0.06); border-radius: 0 12px 12px 0; display: grid; gap: 4px; }
.aiq-ask-k { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.aiq-ask p { font-size: 17px; color: var(--text); line-height: 1.5; margin: 0; }
.aiq-role-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.aiq-role-cell { padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; display: grid; gap: 6px; align-content: start; }
.aiq-role-cell h4 { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.aiq-role-cell p, .aiq-role-cell li { font-size: 15px; line-height: 1.55; color: var(--text-2); margin: 0; }
.aiq-role-cell ul { padding-left: 18px; margin: 0; display: grid; gap: 4px; }
.aiq-sample { font-size: 13.5px; color: var(--text-3); margin: 0; }
.aiq-review h3 { margin-top: 2px; }
.aiq-kpis { list-style: none; padding: 0; margin: 4px 0; display: grid; gap: 8px; }
.aiq-kpis li { display: flex; gap: 12px; align-items: baseline; }
.aiq-kpis b { font-family: var(--display); font-weight: 600; font-size: 28px; letter-spacing: -0.03em; color: var(--text); min-width: 5.2em; }
.aiq-kpis span { font-size: 15px; color: var(--text-2); }
.aiq-defs { padding: 0; margin: 0 0 18px; list-style: none; display: grid; gap: 8px; max-width: 46em; }
.aiq-defs li { padding: 12px 14px 12px 34px; position: relative; font-size: 16px; line-height: 1.55; color: var(--text-2); background: var(--panel); border: 1px solid var(--border); border-radius: 10px; }
.aiq-defs li::before { content: ''; position: absolute; left: 14px; top: 1.1em; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.aiq-defs b { color: var(--text); }
.aiq-agents { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 8px 0 14px; }
.aiq-agent { padding: 20px; background: var(--panel); border: 1px solid var(--border-strong); border-radius: 14px; display: grid; gap: 8px; align-content: start; }
.aiq-agent-head { display: flex; gap: 10px; align-items: center; }
.aiq-agent h3 { font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: -0.02em; }
.aiq-agent p { font-size: 14.5px; line-height: 1.55; color: var(--text-2); margin: 0; }
.aiq-agent p b { color: var(--text); }
.aiq-avail { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border-strong); }
.aiq-avail.available { border-color: rgba(226, 169, 59, 0.5); }
.aiq-avail.planned { border-color: rgba(76, 141, 255, 0.5); }
.aiq-cta { margin: 64px 0 8px; padding: 32px 28px; background: var(--panel); border: 1px solid var(--border-strong); border-radius: 16px; display: grid; gap: 12px; }
.aiq-cta p { font-size: 17px; color: var(--text-2); max-width: 46em; }
.aiq .page-actions { margin-top: 8px; }
@media (max-width: 1100px) { .aiq-agents { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .aiq-two { grid-template-columns: 1fr; }
  .aiq-section > h2, .aiq-cta h2 { font-size: 28px; }
  .aiq-sub { font-size: 22px; }
  .aiq-role-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .aiq-agents { grid-template-columns: 1fr; }
  .aiq-card-facts, .aiq-deliverable dl { grid-template-columns: 1fr; gap: 2px 0; }
  .aiq-card-facts dt, .aiq-deliverable dt { margin-top: 8px; }
  .aiq-convo { padding: 14px; }
  .aiq-kpis b { min-width: 0; }
  .hero .actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* ================================================================ agent catalogue
   The five general-purpose agents, their badge, the "?" control and its panel.
   The panel floats under the chip on a wide screen and stacks inline on a
   phone; it opens by click or keyboard, never by hover alone. */
.brand-mark-img img { width: var(--bsize); height: var(--bsize); object-fit: contain; display: block; border-radius: 4px; }
.agent-entry { position: relative; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.agent-badge { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 999px; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #1A1305; background: var(--gold); white-space: nowrap; }
.bchip .agent-badge { margin-left: 6px; }
.agent-help-wrap { position: relative; display: inline-flex; }
.agent-help { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--panel); color: var(--text-2); font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.agent-help:hover { color: var(--text); border-color: var(--text-3); }
.agent-help[aria-expanded="true"] { color: #1A1305; background: var(--gold); border-color: var(--gold); }
.agent-help:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.agent-info { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; width: min(380px, calc(100vw - 2 * var(--gutter))); padding: 18px; background: var(--ground-deep); border: 1px solid rgba(226, 169, 59, 0.5); border-radius: 14px; box-shadow: var(--shadow-card); display: grid; gap: 10px; text-align: left; font-size: 14px; color: var(--text-2); }
.agent-info[hidden] { display: none; }
.agent-help-wrap.right .agent-info, .show-mark .agent-info { left: auto; right: 0; }
.agent-info-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--text); }
.agent-info-head b { font-family: var(--display); font-weight: 600; font-size: 18px; letter-spacing: -0.01em; }
.agent-info-by { color: var(--text-3); font-size: 13px; }
.agent-info-what { color: var(--text); line-height: 1.5; margin: 0; }
.agent-info-sec { display: grid; gap: 4px; }
.agent-info-k { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.agent-info ul { margin: 0; padding-left: 18px; display: grid; gap: 3px; line-height: 1.45; }
.agent-info p { margin: 0; line-height: 1.5; }
.agent-status { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid var(--border-strong); color: var(--text); }
.agent-status.st-launch { color: #1A1305; background: var(--gold); border-color: var(--gold); }
.agent-status.st-planned { border-color: rgba(76, 141, 255, 0.5); background: rgba(76, 141, 255, 0.14); }
.agent-status.st-scope { color: var(--text-2); }
.agent-info-ev { display: block; margin-top: 4px; font-size: 13px; color: var(--text-3); }
.agent-info-more a { color: var(--gold); }
.agent-info-close { justify-self: start; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border-strong); background: transparent; color: var(--text); font: inherit; font-size: 13.5px; cursor: pointer; }
.agent-info-close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.eco-chips.agents { align-items: center; }
.eco-sub { display: grid; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.eco-sub-k { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.show-marks.agents .show-mark { position: relative; gap: 8px; }
.show-mark .agent-help { width: 32px; height: 32px; font-size: 13px; margin-left: 2px; }
.show-mark.recommended { border-color: rgba(226, 169, 59, 0.6); }
.show-fine { font-size: 13.5px; color: var(--text-3); margin: 0; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.show-inline { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); }
@media (max-width: 700px) {
  .agent-help, .show-mark .agent-help { width: 40px; height: 40px; font-size: 15px; }
  .agent-info, .show-mark .agent-info, .agent-help-wrap.right .agent-info { position: static; width: 100%; margin-top: 8px; box-shadow: none; }
  .agent-entry, .show-marks.agents .show-mark { flex-wrap: wrap; width: 100%; }
  .agent-help-wrap { width: 100%; flex-wrap: wrap; }
  .show-mark.agent { flex-direction: row; flex-wrap: wrap; height: auto; padding: 8px 12px; }
}

.aiq-agent.recommended { border-color: rgba(226, 169, 59, 0.55); }
.aiq-agent-tag { color: var(--text) !important; font-weight: 500; }
.aiq-more-btn { justify-self: start; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border-strong); background: transparent; color: var(--text); font: inherit; font-size: 13.5px; cursor: pointer; }
.aiq-more-btn[aria-expanded="true"] { color: #1A1305; background: var(--gold); border-color: var(--gold); }
.aiq-more-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.aiq-agent-more { display: grid; gap: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.aiq-agent-more[hidden] { display: none; }