/* KoraBridge public site. Tokens follow DESIGN.md (mission control dark).
   The CSS 3D pieces (word prism, exploded plates, tile flip, layered cards, exploded
   dashboard) adapt techniques from the CSS 3D Lab examples (MIT licence).
   Colour carries meaning: mint = source, blue = destination, violet = security,
   teal = wellness, the logo gradient (teal, blue, violet) = yours. Every glow and
   pattern belongs to an object from the subject: pitch, samples, rows, plates. */
@font-face { font-family: "Geist"; src: url("/fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@property --pool { syntax: "<color>"; inherits: true; initial-value: #00e59a; }

:root {
  --bg: #07090d;
  --bg-2: #0c1016;
  --wash: linear-gradient(135deg, #141924 0%, #07090d 100%);
  --surface: hsl(223 22% 11%);
  --surface-card: hsl(223 22% 13.5%);
  --surface-hover: hsl(223 22% 16.5%);
  --chip: hsl(223 20% 15%);
  --shadow: 0 18px 50px hsl(210 55% 2% / .7);
  --fg: #d7dfe6;
  --fg-strong: #eef3f7;
  --muted: #8a95a8;
  --telemetry: #6f7a8f;
  --mint: #00e59a;
  --mint-ink: #08120f;
  --blue: hsl(212 100% 60%);
  --violet: hsl(274 85% 63%);
  --teal: hsl(180 80% 50%);
  --crimson: #f0526b;
  --ok: hsl(152 70% 45%);
  --amber: hsl(38 95% 52%);
  --logo-grad: linear-gradient(90deg, var(--teal), var(--blue) 50%, var(--violet));
  --r: 6px;
  --max: 1240px;
  --pad: clamp(16px, 4vw, 48px);
  --section: clamp(72px, 9vw, 128px);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-width: thin; scrollbar-gutter: stable; scrollbar-color: hsl(220 14% 30%) transparent; } /* Chrome has no overlay scrollbars on Windows or Linux: keep the bar slim, and reserve its gutter so pages that do not scroll (the app sign-in) line up with ones that do. Mirror any change in frontend/src/index.css */
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 400 16px/1.6 "Geist", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; color: var(--fg-strong); font-weight: 620; }
p, figure { margin: 0; }
code, pre { font-family: var(--mono); }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; border-radius: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 30; background: var(--mint); color: var(--mint-ink); padding: 8px 12px; border-radius: var(--r); }
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--pad)); margin-inline: auto; padding-inline: var(--pad); }
section { position: relative; }

/* Caps labels: DESIGN.md heavy Geist with wide tracking */
.eyebrow, .step-label, .sys-label, .foot h2, .card figcaption {
  font: 800 11.5px/1 "Geist", sans-serif; letter-spacing: .16em; text-transform: uppercase;
}
.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--mint); margin-bottom: 22px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(0, 229, 154, .15); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  height: 38px; padding: 0 16px; border-radius: var(--r); font-weight: 560; font-size: 15px; text-decoration: none;
  transition: transform .15s ease, background-color .16s ease, box-shadow .16s ease, color .16s ease;
}
.btn:active { transform: translateY(1px); }
.btn-lg { height: 46px; padding: 0 22px; font-size: 16px; }
.btn-primary { background: var(--mint); color: var(--mint-ink); }
.btn-primary:hover { background: #3cf0b3; box-shadow: 0 0 0 4px rgba(0, 229, 154, .15), 0 8px 24px rgba(0, 229, 154, .22); }
.btn-ghost { color: var(--fg-strong); background: var(--chip); }
.btn-ghost:hover { background: hsl(223 20% 19%); }
.link { text-decoration: none; color: var(--fg); font-size: 15px; }
.link:hover { color: var(--fg-strong); }

/* Nav: transparent over the hero, solid once the page scrolls */
.nav { position: fixed; inset: 0 0 auto; z-index: 20; transition: background-color .2s ease-out, box-shadow .2s ease-out; }
.nav-inner { height: 64px; display: flex; align-items: center; gap: 36px; transition: height .2s ease-out; }
.nav.is-scrolled { background: var(--bg-2); box-shadow: 0 1px 0 hsl(223 20% 12%); }
.nav.is-scrolled .nav-inner { height: 56px; }
.nav-logo img { height: 26px; width: auto; }
.nav nav { display: flex; gap: 28px; }
.nav nav a { position: relative; text-decoration: none; color: var(--muted); font-size: 15px; }
.nav nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--mint); transform: scaleX(0); transform-origin: left; transition: transform .2s var(--ease-out); }
.nav nav a:hover { color: var(--fg-strong); }
.nav nav a:hover::after { transform: scaleX(1); }
.nav-cta { display: flex; align-items: center; gap: 20px; margin-left: auto; }

/* Hero: floodlit pitch with mowing stripes, live tracking, the copy on calm ground */
.hero {
  min-height: min(92dvh, 860px); display: flex; align-items: flex-end; padding: 96px 0 clamp(56px, 8vh, 88px); overflow: hidden;
  background: radial-gradient(55% 60% at 74% 22%, hsl(158 100% 45% / .09), transparent 70%), var(--wash);
}
.hero::before, .pitch {
  position: absolute; inset: 0; width: 100%; height: 100%;
  -webkit-mask-image: radial-gradient(115% 95% at 78% 22%, #000 38%, transparent 76%);
  mask-image: radial-gradient(115% 95% at 78% 22%, #000 38%, transparent 76%);
}
.hero::before { content: ""; background: repeating-linear-gradient(82deg, hsl(223 24% 8% / .7) 0 72px, hsl(223 24% 10% / .7) 72px 144px); }
.hero::after { /* touchline: bookend A of the logo gradient */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; opacity: .45;
  background: linear-gradient(90deg, transparent, var(--mint) 15%, var(--blue) 55%, var(--violet) 85%, transparent);
}
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: end; }
.hero h1 { font-size: clamp(38px, 5.6vw, 84px); font-weight: 640; line-height: 1.02; letter-spacing: -.042em; }
.lede { margin-top: 24px; max-width: 46ch; font-size: clamp(17px, 1.4vw, 19px); color: var(--muted); }
.lede-punch { font-weight: 500; color: var(--fg-strong); }
.actions { display: flex; align-items: center; gap: 12px; margin-top: 34px; flex-wrap: wrap; }
.hero-offer { margin-top: 18px; font: 400 13px/1 var(--mono); }
.hero-offer a { color: var(--muted); text-decoration: none; border-bottom: 1px solid hsl(158 100% 45% / .35); padding-bottom: 3px; }
.hero-offer a:hover { color: var(--fg-strong); }
.hero-offer b { color: var(--mint); font-weight: 600; }

/* The word prism: GPS, tracking, medical then "performance", on a slow loop.
   It always ends its line, so its changing width never reflows the sentence. */
.prism { position: relative; display: inline-block; width: var(--w, 5.5em); height: 1.1em; vertical-align: -.27em; perspective: 9em; clip-path: inset(-.06em -.4em -.12em); transition: width .7s var(--ease-io); }
.prism-in { position: absolute; inset: 0; transform-style: preserve-3d; transform: translateZ(-.55em) rotateX(calc(var(--step, 3) * 90deg)); transition: transform 1s var(--ease-io); }
.face { position: absolute; left: 0; top: 0; height: 1.1em; line-height: 1.1em; white-space: nowrap; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: rotateX(calc(var(--i) * -90deg)) translateZ(.55em); opacity: 0; transition: color .6s ease, opacity .45s ease; }
.face.is-front, .face:last-child:not(.is-off) { opacity: 1; }
.face:nth-child(1) { --i: 0; color: var(--mint); } .face:nth-child(2) { --i: 1; color: var(--blue); } .face:nth-child(3) { --i: 2; color: var(--violet); }
.face:nth-child(4) { --i: 3; }
.prism.no-anim, .prism.no-anim .prism-in { transition: none; }

/* Live table the tracking samples land in */
.feed { padding: 16px 18px 12px; border-radius: var(--r); background: hsl(223 22% 11% / .86); box-shadow: 0 0 0 1px hsl(212 100% 60% / .18), var(--shadow); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
/* The destination: the club's warehouse, one table open, its siblings counting up */
.feed-head { display: flex; justify-content: space-between; gap: 12px; font: 500 12px/1 var(--mono); color: var(--telemetry); margin-bottom: 14px; }
.wh { white-space: nowrap; }
.wh-name { display: inline-block; color: var(--blue); font-weight: 600; transition: opacity .3s ease, transform .3s ease; }
.wh-name.is-swap { opacity: 0; transform: translateY(-4px); }
.synced { display: inline-flex; align-items: center; gap: 6px; }
.synced i { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 8px var(--mint); }
.sync-t { color: var(--fg); }
.tbl, .tbls li { display: flex; justify-content: space-between; gap: 12px; font: 400 12px/1 var(--mono); font-variant-numeric: tabular-nums; }
.tbl { padding: 8px 10px; margin: 0 -10px 6px; border-radius: 4px; background: hsl(212 100% 60% / .08); color: var(--fg-strong); }
.tbl em, .tbls em { font-style: normal; color: var(--muted); border-radius: 3px; }
.tbls { list-style: none; margin: 8px 0 0; padding: 0; }
.tbls li { padding: 7px 0; border-top: 1px solid hsl(223 20% 15%); color: var(--telemetry); }
.tbls li::before { content: "›"; margin-right: -4px; color: hsl(223 15% 40%); }
.tbls li span { margin-right: auto; }
.bump { animation: row-in .6s var(--ease-out); }
.feed table { width: 100%; border-collapse: collapse; font: 400 12px/1 var(--mono); font-variant-numeric: tabular-nums; }
.feed th { text-align: right; font-weight: 500; color: var(--telemetry); padding: 0 0 8px; }
.feed td { text-align: right; color: var(--fg); padding: 6px 0; border-top: 1px solid hsl(223 20% 15%); }
.feed th:first-child, .feed td:first-child { text-align: left; }
.feed td:first-child { color: var(--blue); }
.feed tr.is-new td { animation: row-in .6s var(--ease-out); }
.story-src, .story-band, .sync-stack, .lede-short, .sys-flow { display: none; }
/* Phones: the morning's syncs arrive as a stack of notifications, newest on top */
.sync-stack ol { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; gap: 8px; }
.sync-stack li {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px;
  background: hsl(223 22% 13% / .92); box-shadow: 0 0 0 1px hsl(223 20% 20%);
}
.sync-stack { --tone: var(--mint); --tone-bg: hsl(158 100% 45% / .10); }
.sync-stack .logo-box { width: 32px; height: 32px; border-radius: 8px; font: 700 11px/1 var(--mono); color: var(--mint); }
.sync-stack .logo-box::before { width: 18px; height: 18px; }
.sync-stack .logo-box:not([data-l])::before { content: none; }
.sync-stack li p { font-size: 14px; line-height: 1.3; color: var(--fg-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sync-stack li p + p { font: 400 12px/1.3 var(--mono); color: var(--muted); }
.sync-stack li p + p::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 6px var(--ok); vertical-align: 1px; }
.sync-stack li b { font-weight: 600; }
.sync-stack li b + b, .sync-stack li p b:last-child { color: var(--blue); }
.sync-stack li p b:first-child { color: var(--fg-strong); }
.sync-stack time { align-self: start; font: 400 11px/1 var(--mono); color: var(--telemetry); }
/* the cards arrive oldest first (bottom up), straight from first paint, so nothing is shown and then taken away */
.sync-stack li { animation: ss-in .55s var(--ease-out) both; }
.is-still .sync-stack li, .sync-stack li.is-live { animation: none; } /* later arrivals animate from script */
.sync-stack li:nth-child(3) { animation-delay: .3s; } .sync-stack li:nth-child(2) { animation-delay: 1s; } .sync-stack li:nth-child(1) { animation-delay: 1.7s; }
@keyframes ss-in { from { opacity: 0; transform: translateY(-14px) scale(.97); } }
@keyframes row-in { from { background: hsl(212 100% 60% / .18); color: var(--fg-strong); } }

.motion-toggle {
  position: absolute; right: var(--pad); bottom: 18px; z-index: 2; display: inline-flex; align-items: center; gap: 8px;
  font: 500 12px/1 var(--mono); color: var(--muted); background: var(--chip); border: 0; border-radius: 99px; padding: 7px 12px; cursor: pointer;
}
.motion-toggle[hidden] { display: none; }
.motion-toggle span { font-size: 9px; letter-spacing: -.1em; }
.motion-toggle:hover { color: var(--fg-strong); background: hsl(223 20% 19%); }

/* Supported systems: a recessed band, marks tinted by direction (DESIGN.md logo box) */
.systems { background: hsl(223 30% 6%); padding-block: 26px; }
.systems .wrap { display: grid; gap: 16px; }
.sys-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); align-items: center; gap: 24px; }
.sys-label { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.sys-label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 8px var(--mint); }
.sys-dst::before { background: var(--blue); box-shadow: 0 0 8px var(--blue); }
.systems ul { --tone: var(--mint); --tone-bg: hsl(158 100% 45% / .10); list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 30px; }
.systems ul.dst { --tone: var(--blue); --tone-bg: hsl(212 100% 60% / .10); }
.systems li { display: flex; align-items: center; gap: 10px; color: var(--fg); font-size: 15px; font-weight: 500; }
.logo-box { width: 28px; height: 28px; border-radius: var(--r); background: var(--tone-bg); display: grid; place-items: center; }
.logo-box::before { content: ""; width: 16px; height: 16px; background: var(--tone); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat var(--mm, alpha); }
.systems li.sys-more { color: var(--telemetry); font-weight: 400; }
/* Desktop: bigger ringed marks and a lifted band, so the strip reads as part of the first screen, not a footer */
@media (min-width: 768px) {
  .systems { background: linear-gradient(180deg, hsl(223 26% 9%), hsl(223 30% 6%)); padding-block: 34px; }
  .systems .wrap { gap: 18px; }
  .sys-label { color: var(--fg); }
  .systems ul { gap: 14px 36px; }
  .systems li { gap: 12px; font-size: 16px; color: var(--fg-strong); }
  .systems .logo-box { width: 36px; height: 36px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 30%, transparent); }
  .systems .logo-box::before { width: 20px; height: 20px; }
}
/* hero plus the strip fill the first screen at any desktop height; 158px is the strip's measured height */
@media (min-width: 961px) { .hero { min-height: max(600px, calc(100dvh - 158px)); } }
[data-l="catapult"] { --m: url("/brand/catapult.svg"); } [data-l="kitman"] { --m: url("/brand/kitman_labs.svg"); }
[data-l="skillcorner"] { --m: url("/brand/skillcorner.svg"); } [data-l="secondspectrum"] { --m: url("/brand/second_spectrum.svg"); }
[data-l="garmin"] { --m: url("/brand/garmin.svg"); } [data-l="postgresql"] { --m: url("/brand/postgresql.svg"); }
[data-l="databricks"] { --m: url("/brand/databricks.svg"); } [data-l="snowflake"] { --m: url("/brand/snowflake.svg"); }
[data-l="bigquery"] { --m: url("/brand/bigquery.svg"); } [data-l="s3"] { --m: url("/brand/s3-mask.svg"); --mm: luminance; } /* facets as greys, read by brightness */

/* Silos: the statement lights word by word while coloured vendor plates merge into yours */
.silos { overflow-x: clip; height: 180vh; --q: clamp(0, calc((var(--p, 0) - .35) / .5), 1); }
.silos-pin { position: sticky; top: 0; min-height: 100vh; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; }
.statement { margin: 0; font-size: clamp(26px, 3vw, 40px); font-weight: 500; line-height: 1.22; letter-spacing: -.028em; color: var(--fg-strong); max-width: 26ch; }
.statement .w { opacity: clamp(.2, calc(var(--p, 0) * 1.25 * var(--n) - var(--i)), 1); transition: opacity .12s linear; }
.silos-lede { opacity: clamp(0, calc((var(--p, 0) - .76) * 10), 1); translate: 0 calc((1 - clamp(0, calc((var(--p, 0) - .76) * 10), 1)) * 12px); } /* fades in as the last words light (they finish at p .8) */
.plates { --u: min(3.4px, .7vw); position: relative; display: grid; place-items: center; height: calc(150 * var(--u)); perspective: calc(900 * var(--u)); }
.plates::before { /* 10 Hz sample grid */
  content: ""; position: absolute; inset: -20% -30%;
  background: radial-gradient(circle, hsl(223 20% 26%) 1px, transparent 1.5px) 0 0 / 22px 22px;
  -webkit-mask-image: radial-gradient(closest-side, #000, transparent); mask-image: radial-gradient(closest-side, #000, transparent);
}
.plates::after { /* pool of light that turns into the logo gradient as the plates merge */
  content: ""; position: absolute; inset: 10% 0; border-radius: 50%; opacity: calc(.25 + var(--q) * .75); filter: blur(40px);
  background: linear-gradient(120deg, hsl(180 80% 50% / .18), hsl(212 100% 60% / .22), hsl(274 85% 63% / .18));
}
.plates-3d { position: relative; z-index: 1; width: calc(88 * var(--u)); height: calc(88 * var(--u)); transform-style: preserve-3d; transform: rotateX(58deg) rotateZ(-40deg); }
.plate {
  --h: 158 100% 45%; --bgc: hsl(158 40% 11%);
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: calc(2 * var(--u));
  padding: calc(9 * var(--u)); border-radius: calc(5 * var(--u));
  background: var(--bgc); box-shadow: inset 0 0 0 1px hsl(var(--h) / .5), 0 0 calc(14 * var(--u)) hsl(var(--h) / .12);
  transform: translateZ(calc((var(--i) - 1.5) * var(--gap, 26) * var(--u) * (1 - var(--q))));
  opacity: calc(1 - max(0, (var(--q) - .85) * 6.6));
}
.plate:nth-child(1) { --i: 0; --h: 180 80% 50%; --bgc: hsl(180 40% 10%); }
.plate:nth-child(2) { --i: 1; --h: 274 85% 63%; --bgc: hsl(274 32% 13%); }
.plate:nth-child(3) { --i: 2; --h: 212 100% 60%; --bgc: hsl(212 40% 13%); }
.plate:nth-child(4) { --i: 3; }
.plate b { font: 800 calc(5.5 * var(--u))/1 "Geist", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: hsl(var(--h)); }
.plate span { font: 400 calc(4.6 * var(--u))/1 var(--mono); color: var(--fg); opacity: .7; }
.plate-home {
  transform: translateZ(0); opacity: clamp(0, calc((var(--q) - .8) * 5), 1);
  border: 1px solid transparent; box-shadow: 0 0 calc(30 * var(--u)) hsl(212 100% 60% / .3);
  background: linear-gradient(hsl(223 30% 10%), hsl(223 30% 10%)) padding-box, linear-gradient(135deg, var(--teal), var(--blue), var(--violet)) border-box;
}
.plate-logos { --tone: var(--fg); --tone-bg: hsl(223 30% 16%); display: flex; gap: calc(2.5 * var(--u)); }
.plate-logos .logo-box { width: calc(10 * var(--u)); height: calc(10 * var(--u)); border-radius: calc(2 * var(--u)); }
.plate-logos .logo-box::before { width: calc(6 * var(--u)); height: calc(6 * var(--u)); }
.plate-home b { background: var(--logo-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* How it works: steps on the left, a layered stack of app cards on a lit floor */
.how { --pool: var(--mint); padding-block: var(--section); overflow-x: clip; transition: --pool .6s ease; }
/* mint while the step is on the vendor side, blue once it reaches the warehouse (same as the systems strip) */
.how:has(.rail[data-active="2"]), .how:has(.rail[data-active="4"]) { --pool: var(--blue); }
/* one soft mint glow, pinned to the screen (it stays put while the section scrolls over it),
   faded in and out at the section edges so there are no seams */
.how::after {
  content: ""; position: absolute; inset: -240px 0; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 55% at 72% 50%, hsl(158 100% 45% / .07), transparent 70%), hsl(160 60% 14% / .12);
  background-attachment: fixed;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 400px, #000 calc(100% - 400px), transparent);
  mask-image: linear-gradient(180deg, transparent, #000 400px, #000 calc(100% - 400px), transparent);
}
.section-title { font-size: clamp(32px, 4vw, 56px); letter-spacing: -.035em; line-height: 1.06; max-width: 20ch; }
.how-lede { margin-top: 20px; max-width: 56ch; }
.rail { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 56px; }
/* a progress line down the steps: the track, then a fill that reaches the active step */
/* --t, --h and --f (top, length, filled length) are measured from the step dots in site.js */
.steps { list-style: none; margin: 0; padding: 0 0 0 36px; position: relative; }
.steps::before, .steps::after { content: ""; position: absolute; left: 3px; top: var(--t, 0); width: 1px; height: var(--h, 0); background: hsl(223 20% 18%); }
.steps::after { height: var(--f, 0); background: var(--pool); transition: height .6s var(--ease-out), background-color .6s; }
.step:last-child { min-height: 46vh; }
.step { min-height: 60vh; display: grid; align-content: center; opacity: .36; transition: opacity .4s ease; }
.rail[data-active="1"] .step[data-step="1"], .rail[data-active="2"] .step[data-step="2"],
.rail[data-active="3"] .step[data-step="3"], .rail[data-active="4"] .step[data-step="4"] { opacity: 1; }
.step-label { position: relative; color: var(--telemetry); transition: color .4s; }
.step-label::before { content: ""; position: absolute; left: -36px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: hsl(223 20% 24%); transition: background-color .4s, box-shadow .4s; z-index: 1; }
.rail[data-active="1"] .step[data-step="1"] .step-label, .rail[data-active="2"] .step[data-step="2"] .step-label,
.rail[data-active="3"] .step[data-step="3"] .step-label, .rail[data-active="4"] .step[data-step="4"] .step-label { color: var(--pool); }
.rail[data-active="1"] .step[data-step="1"] .step-label::before, .rail[data-active="2"] .step[data-step="2"] .step-label::before,
.rail[data-active="3"] .step[data-step="3"] .step-label::before, .rail[data-active="4"] .step[data-step="4"] .step-label::before { background: var(--pool); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pool) 18%, transparent); }
.step h3 { font-size: 28px; font-weight: 600; letter-spacing: -.025em; margin: 14px 0 12px; }
.step > p:not(.step-label) { color: var(--muted); max-width: 42ch; font-size: 17px; }

.stage { position: sticky; top: calc(50vh - 270px); height: 540px; align-self: start; display: grid; place-items: center; perspective: 1500px; }
.stage::before { /* isometric floor grid under the stack */
  content: ""; position: absolute; width: 760px; height: 760px; transform: rotateX(54deg) rotateZ(-36deg) translateZ(-150px);
  background: repeating-linear-gradient(0deg, hsl(223 20% 18%) 0 1px, transparent 1px 40px), repeating-linear-gradient(90deg, hsl(223 20% 18%) 0 1px, transparent 1px 40px);
  -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent); mask-image: radial-gradient(closest-side, #000 20%, transparent);
}
.stack { position: relative; z-index: 1; width: 400px; height: 300px; transform-style: preserve-3d; transform: rotateX(54deg) rotateZ(-36deg); }
.card {
  --z: 0px; position: absolute; inset: 0; padding: 20px 22px; border-radius: 10px;
  background: var(--surface-card); box-shadow: 0 0 0 1px hsl(223 20% 18%), var(--shadow);
  transform: translateZ(var(--z)) rotateZ(0deg) rotateX(0deg) translateZ(0px) scale(1);
  transition: transform .6s cubic-bezier(.2, .8, .2, 1), opacity .5s ease, box-shadow .5s ease;
}
.stack .card:not(.is-active) { opacity: .35; }
.stack .card:not(.is-active) > * { opacity: .12; }
.card > * { transition: opacity .4s ease; }
.card[data-card="1"] { --z: 90px; } .card[data-card="2"] { --z: 30px; } .card[data-card="3"] { --z: -30px; } .card[data-card="4"] { --z: -90px; }
.card.is-active { transform: translateZ(var(--z)) rotateZ(36deg) rotateX(-54deg) translateZ(280px) scale(.84); box-shadow: 0 0 0 1px color-mix(in srgb, var(--pool) 45%, transparent), 0 30px 80px hsl(210 55% 2% / .8); }
.card figcaption { font-size: 11px; color: var(--telemetry); margin-bottom: 16px; }
.conn { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.conn li { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--r); background: var(--chip); font-size: 14px; color: var(--fg-strong); }
.conn img { width: 20px; height: 20px; object-fit: contain; filter: brightness(0) invert(1); opacity: .85; }
.conn em { display: flex; align-items: center; gap: 6px; font: normal 500 11px/1 var(--mono); color: var(--ok); }
.conn-foot, .run-now { margin-top: 14px; font-size: 12.5px; color: var(--telemetry); }
/* a tick (the app's Lucide circle-check), staggered in when its card comes forward */
.tick { --i: 0; width: 15px; height: 15px; }
li:nth-child(2) > .tick, li:nth-child(2) > em > .tick { --i: 1; } li:nth-child(3) > .tick, li:nth-child(3) > em > .tick { --i: 2; } li:nth-child(4) > em > .tick { --i: 3; }
.card.is-active .tick, .slot .card.is-played .tick { animation: tick-in .45s var(--ease-out) both; animation-delay: calc(var(--i) * 220ms + 300ms); }
@keyframes tick-in { from { opacity: 0; transform: scale(.4); } }

.dest-head { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r); background: var(--chip); color: var(--fg-strong); font-size: 14px; }
.dest-head img { width: 20px; height: 20px; filter: brightness(0) invert(1); opacity: .85; }
.dest-head b { font-weight: 560; }
.checks { list-style: none; margin: 18px 0 0; padding: 0 2px; display: grid; gap: 14px; }
.checks li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--fg); }
.checks .tick { color: var(--blue); }

.sched { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r); background: var(--chip); }
.sched-when b { display: block; font-weight: 560; font-size: 14px; color: var(--fg-strong); }
.sched-when span, .sched code { font: 400 11px/1.6 var(--mono); color: var(--telemetry); }
.sched code { color: var(--mint); }
.sets { list-style: none; margin: 16px 0 0; padding: 0 2px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font: 400 12px/1 var(--mono); color: var(--fg); }
.sets li { display: flex; align-items: center; gap: 8px; }
.sets .off { color: var(--telemetry); }
.sets em { font: 500 10px/1 var(--mono); font-style: normal; color: var(--amber); margin-left: auto; }
.box { flex: none; width: 13px; height: 13px; border-radius: 3px; box-shadow: inset 0 0 0 1.5px hsl(223 20% 30%); }
.box.on { background: var(--mint); box-shadow: none; }
.run-now { display: flex; justify-content: space-between; align-items: center; }
.run-now b { font-weight: 560; color: var(--mint-ink); background: var(--mint); padding: 6px 12px; border-radius: var(--r); }


.run { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--r); background: var(--chip); }
.run b { display: block; font-weight: 560; font-size: 14px; color: var(--fg-strong); }
.run div span { font: 400 11px/1.6 var(--mono); color: var(--telemetry); }
.status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 99px; font: 500 11px/1 var(--mono); }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status[data-s="pending"] { color: var(--amber); background: hsl(38 95% 52% / .12); }
.status[data-s="running"] { color: var(--blue); background: hsl(212 100% 60% / .12); }
.status[data-s="running"]::before { animation: pulse 1.2s ease-in-out infinite; }
.status[data-s="ok"] { color: var(--ok); background: hsl(152 70% 45% / .12); }
@keyframes pulse { 50% { opacity: .3; } }
.run-rows { margin: 12px 2px 10px; font-size: 13px; color: var(--muted); }
.tables { list-style: none; margin: 0; padding: 4px 12px; border-radius: var(--r); background: hsl(212 30% 6%); font: 400 12px/1 var(--mono); }
.tables li { display: flex; justify-content: space-between; padding: 7px 0; color: var(--muted); }
.tables li + li { border-top: 1px solid hsl(223 20% 13%); }
.tables b { font-weight: 500; color: var(--blue); font-variant-numeric: tabular-nums; }
.count { font: 600 15px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--fg-strong); }

/* Console: the dashboard rebuilt in HTML, exploding into depth on approach.
   Each layer sits at translateZ(--z * --k); --k is 0 at rest (flat, crisp text). */
.console { overflow-x: clip; padding-block: var(--section); background: radial-gradient(50% 45% at 50% 62%, hsl(212 100% 60% / .08), transparent 70%); }
.console::before { /* a faint halfway line and centre circle behind the board */
  content: ""; position: absolute; inset: 0; opacity: .06; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 75%, transparent); mask-image: linear-gradient(180deg, transparent, #000 18%, #000 75%, transparent);
  background: radial-gradient(circle at 50% 62%, transparent 0 239px, #d7dfe6 240px 241px, transparent 242px), linear-gradient(90deg, transparent calc(50% - .5px), #d7dfe6 calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px));
}
.console-lede { margin-top: 18px; color: var(--muted); font-size: 18px; max-width: 48ch; }
.console-cap { margin-top: 26px; text-align: center; font: 400 12px/1.4 var(--mono); color: var(--telemetry); }
.dash-stage { margin-top: 48px; perspective: 1800px; display: grid; justify-items: center; }
.dash {
  --k: 0; --rx: 0deg; --ry: 0deg; width: min(1100px, 100%);
  -webkit-user-select: none; user-select: none; /* a picture of the app, not copyable text */
  transform-style: preserve-3d; transform: rotateX(calc(12deg * var(--k) + var(--rx))) rotateY(var(--ry));
  transition: transform .7s cubic-bezier(.3, 1.3, .5, 1);
}
.dash.is-tracking { transition: none; transform: rotateX(var(--rx)) rotateY(var(--ry)); }
.dash *, .dash-base { transform-style: preserve-3d; }
.dash-base {
  display: grid; grid-template-columns: 200px minmax(0, 1fr); border-radius: 12px; overflow: visible;
  background: var(--wash); box-shadow: 0 0 0 1px hsl(223 20% 15%), 0 40px 100px hsl(210 55% 2% / .8);
}
.dash [data-z], .pg-search, .pg-new, .pl, .pt, .pl-run {
  --lift: calc(var(--z, 0) * var(--k) * 1px);
  transform: translateZ(var(--lift));
  box-shadow: 0 calc(var(--lift) * .35) calc(var(--lift) * .9) hsl(210 55% 2% / .55);
  transition: transform .7s cubic-bezier(.3, 1.3, .5, 1), box-shadow .7s ease;
  transition-delay: calc(var(--z, 0) * 2ms);
}
/* sidebar and header sit on the base plate, as in the app: one surface, no split */
.dash-side { display: flex; flex-direction: column; gap: 22px; padding: 22px 14px; }
.dash-side img { width: 112px; height: auto; margin-left: 8px; }
.dash-side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.dash-side li { padding: 8px 10px; border-radius: var(--r); }
.dash-side li.on { color: var(--mint); background: hsl(158 100% 45% / .10); }
.dash-online { margin-top: auto; display: flex; align-items: center; gap: 8px; font: 400 11px/1 var(--mono); color: var(--telemetry); }
.live { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 6px var(--mint); }
.dash-main { padding: 24px 26px; display: grid; gap: 16px; }
.dash-head { display: flex; justify-content: space-between; align-items: center; }
.dash-eyebrow { display: flex; align-items: center; gap: 8px; font: 800 10px/1 "Geist", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--mint); }
.dash-title { margin-top: 8px; font-size: 22px; font-weight: 620; letter-spacing: -.02em; color: var(--fg-strong); }
/* Pipelines screen header: search lifts first, then the filters, then the rows */
.pg-act { display: flex; align-items: center; gap: 16px; }
.pg-live { display: flex; align-items: center; gap: 6px; font: 400 12px/1 var(--mono); color: var(--blue); }
.pg-new { --z: 16; display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 6px; font-size: 13px; font-weight: 600; color: hsl(223 30% 6%); background: var(--mint); }
.pg-search { --z: 8; display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: var(--r); background: hsl(223 30% 6%); box-shadow: inset 0 0 0 1px hsl(223 20% 17%); font-size: 13px; color: var(--telemetry); }
.pg-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.pg-filters span { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 6px; }
.pg-filters span.on { color: var(--mint); background: hsl(158 100% 45% / .1); }
.pg-filters i { font: normal 400 10px/1 var(--mono); color: var(--telemetry); }
.pg-filters span.on i { color: var(--mint); }
.pg-filters em { font: normal 700 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--telemetry); margin-inline: 6px 2px; }
.pg-filters b { width: 16px; height: 16px; border-radius: 4px; background: hsl(158 100% 45% / .1); box-shadow: inset 0 0 0 1px hsl(158 100% 45% / .35); display: grid; place-items: center; }
.pg-filters b::before { content: ""; width: 10px; height: 10px; background: var(--mint); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat var(--mm, alpha); }
/* Pipeline inventory, as on the app's Pipelines page. Rows lift a little; tiles and Run a little more. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.inv { display: grid; gap: 8px; }
.inv-title { margin: 6px 0 2px 4px; font: 600 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--telemetry); }
.pl { --z: 22; position: relative; display: grid; grid-template-columns: 30px 12px 30px minmax(0, 1fr) 128px 64px 84px auto auto; align-items: center; gap: 0 10px; padding: 10px 14px; border-radius: var(--r); background: var(--surface-card); }
.pl-fail { --z: 30; }
.pl-fail::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: var(--crimson); box-shadow: 0 0 calc(14px * var(--k)) hsl(350 85% 60% / .6); }
.pt { --z: 8; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: hsl(158 100% 45% / .08); box-shadow: inset 0 0 0 1px hsl(158 100% 45% / .35); font: 700 11px/1 var(--mono); color: var(--mint); }
.pt[data-l]::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat var(--mm, alpha); }
.pl-to { font-style: normal; font-size: 11px; color: var(--telemetry); text-align: center; }
.pl-name { min-width: 0; padding-left: 4px; }
.pl-name b { display: block; font-size: 13.5px; font-weight: 520; color: var(--fg-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-name span { display: block; margin-top: 3px; font: 400 11px/1.3 var(--mono); color: var(--telemetry); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-st { display: flex; align-items: center; gap: 6px; font: 400 11px/1 var(--mono); color: var(--telemetry); }
.pl-st .ic, .pl-st b { color: var(--ok); } .pl-st b { font-weight: 600; }
.pl-st.is-fail .ic, .pl-st.is-fail b { color: var(--crimson); }
.pl-meta { display: flex; align-items: center; gap: 6px; font: 400 11px/1 var(--mono); color: var(--telemetry); white-space: nowrap; }
.pl-meta .ic { width: 13px; height: 13px; }
.pl-run { --z: 8; display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--mint); background: hsl(158 100% 45% / .08); box-shadow: inset 0 0 0 1px hsl(158 100% 45% / .4); }
.pl-run .ic { width: 11px; height: 11px; }
.pl-act { display: flex; gap: 12px; color: var(--telemetry); opacity: .7; }

/* Security: violet territory, rows ruled behind the grid like a database table */
.proof { padding-block: var(--section) calc(var(--section) * .7); }
/* the violet field reaches past the section edges and fades out, so there is no seam with the neighbours */
.proof::after {
  content: ""; position: absolute; inset: -320px 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 45% at 18% 42%, hsl(274 85% 63% / .10), transparent 70%), linear-gradient(180deg, transparent, hsl(272 50% 12% / .25) 50%, transparent);
}
.proof::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(180deg, hsl(274 60% 60% / .05) 0 1px, transparent 1px 32px);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 55%, #000, transparent); mask-image: radial-gradient(70% 60% at 50% 55%, #000, transparent);
}
.proof .lede { margin: 16px 0 44px; max-width: 62ch; }
.bento { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.tile {
  --h: 158 100% 45%; grid-column: span 5; position: relative; padding: 24px; border-radius: var(--r);
  background: var(--surface-card); box-shadow: 0 0 0 1px hsl(223 20% 18%), var(--shadow); display: flex; flex-direction: column; gap: 8px;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.tile[data-h="blue"] { --h: 212 100% 60%; } .tile[data-h="violet"] { --h: 274 85% 63%; } .tile[data-h="teal"] { --h: 180 80% 50%; }
.tile:hover { transform: translateY(-1px); background: var(--surface-hover); box-shadow: 0 0 0 1px hsl(var(--h) / .35), var(--shadow); }
.tile-main { grid-column: span 7; padding: 32px; background: hsl(262 26% 12.5%); }
.tile h3 { font-size: 18px; font-weight: 600; letter-spacing: -.015em; }
.tile-main h3 { font-size: 26px; line-height: 1.2; letter-spacing: -.025em; }
.tile p { color: var(--muted); font-size: 15px; max-width: 46ch; }
.tile-med { grid-column: span 5; } .tile-match, .tile-key { grid-column: span 6; }

/* Where: a ledger. KoraBridge's bar is short on purpose; the club's runs the full width */
.ledger { margin-top: auto; padding-top: 22px; display: grid; gap: 22px; }
.lg-row { --h: 212 100% 60%; display: grid; gap: 10px; }
.lg-you { --h: 158 100% 45%; }
.tile .lg-label { font: 600 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: hsl(var(--h)); }
.lg-bar { display: block; height: 8px; border-radius: 99px; background: hsl(var(--h) / .08); overflow: hidden; }
.lg-bar i { display: block; height: 100%; width: var(--w, 12%); border-radius: inherit; background: linear-gradient(90deg, hsl(var(--h) / .5), hsl(var(--h))); box-shadow: 0 0 14px hsl(var(--h) / .5); transform-origin: left; transition: transform .8s var(--ease-out); }
.lg-you .lg-bar i { --w: 100%; transition-delay: .18s; }
.ledger.is-waiting .lg-bar i { transform: scaleX(0); }
.lg-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.lg-chips li { font: 500 11.5px/1 var(--mono); padding: 6px 9px; border-radius: 99px; color: hsl(var(--h)); background: hsl(var(--h) / .10); }
.tree { margin: 2px 0 0; padding: 16px 18px; border-radius: var(--r); background: hsl(var(--h) / .06); box-shadow: inset 0 0 0 1px hsl(var(--h) / .14); font: 400 13px/1.75 var(--mono); color: var(--muted); white-space: pre; overflow: hidden; }
.tree b { font-weight: 500; color: hsl(var(--h)); } .tree em { font-style: normal; color: var(--fg); }

/* Medical: the run row the app shows, above the record it never shows */
.med { flex: 1; padding-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.tile .med-run { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; max-width: none; padding: 11px 14px; border-radius: var(--r); background: var(--surface); font: 400 12px/1.3 var(--mono); color: var(--telemetry); }
.med-run i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.med-run b { font: 600 13px/1.3 "Geist", sans-serif; color: var(--fg-strong); margin-right: auto; }
.med-run span:last-child { color: var(--ok); }
.med-rec { flex: 1; display: grid; align-content: space-evenly; gap: 10px; padding: 14px; border-radius: var(--r); background: hsl(var(--h) / .05); box-shadow: inset 0 0 0 1px hsl(var(--h) / .12); }
.tile .med-rec p { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; max-width: none; font: 400 11.5px/1 var(--mono); color: var(--telemetry); }
.med-rec i { height: 12px; border-radius: 3px; background: repeating-linear-gradient(135deg, hsl(var(--h) / .55) 0 6px, hsl(var(--h) / .38) 6px 12px); }
.med-rec i { width: var(--w); } .med-rec p:nth-child(1) { --w: 58%; } .med-rec p:nth-child(2) { --w: 30%; } .med-rec p:nth-child(3) { --w: 82%; } .med-rec p:nth-child(4) { --w: 44%; }
.med-rec p:nth-child(5) { --w: 96%; } .med-rec p:nth-child(6) { --w: 52%; } .med-rec p:nth-child(7) { --w: 34%; }
.tile .med-cap { font: 400 12px/1.4 var(--mono); color: hsl(var(--h)); }

/* Matching: each table's count at the vendor beside the count in your warehouse, ticked row by row */
.match { margin-top: auto; padding-top: 18px; }
.m-tbl { width: 100%; border-collapse: collapse; border-radius: var(--r); background: hsl(var(--h) / .05); box-shadow: inset 0 0 0 1px hsl(var(--h) / .14); font: 400 13px/1 var(--mono); font-variant-numeric: tabular-nums; }
.m-tbl th, .m-tbl td { padding: 12px 14px; text-align: right; }
.m-tbl th:first-child { text-align: left; }
.m-tbl thead th { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--telemetry); }
.m-tbl tbody th { font-weight: 400; color: var(--fg); }
.m-tbl td { color: var(--fg-strong); }
.m-tbl tbody tr { border-top: 1px solid hsl(var(--h) / .12); }
.m-tbl td:last-child { width: 1%; padding-left: 4px; }
.m-tbl td i { display: inline-block; width: 14px; height: 8px; border: solid hsl(var(--h)); border-width: 0 0 2px 2px; transform: translateY(-3px) rotate(-45deg); transition: opacity .3s var(--ease-out); }
.m-tbl tr:nth-child(2) i { transition-delay: .15s; } .m-tbl tr:nth-child(3) i { transition-delay: .3s; } .m-tbl tr:nth-child(4) i { transition-delay: .45s; }
.match.is-waiting .m-tbl td i { opacity: 0; transition-delay: 0s; }

/* Leaving: your club's key beside the steps of closing an account. The key goes dark as step two lights */
.leave { --step: 4; flex: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 28px; padding-top: 18px; }
.keycard-scene { --u: min(1.7px, .4vw); }
.keycard { all: unset; display: block; cursor: pointer; border-radius: calc(8 * var(--u)); perspective: calc(700 * var(--u)); }
.keycard:focus-visible { outline: 2px solid var(--mint); outline-offset: 6px; }
.kc-float { position: relative; display: block; width: calc(150 * var(--u)); height: calc(94 * var(--u)); transform-style: preserve-3d; transform: rotateX(calc(var(--ty, 6) * 1deg)) rotateY(calc(var(--tx, -12) * 1deg)); transition: transform .4s var(--ease-out); }
.kc-face {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: calc(11 * var(--u)) calc(13 * var(--u));
  border-radius: calc(8 * var(--u)); text-align: left; box-shadow: 0 calc(16 * var(--u)) calc(40 * var(--u)) hsl(160 80% 3% / .7);
}
.kc-live {
  background: radial-gradient(120% 90% at var(--gx, 30%) var(--gy, 20%), hsl(158 100% 70% / .30), transparent 55%),
    repeating-linear-gradient(135deg, hsl(158 100% 80% / .05) 0 1px, transparent 1px 6px), linear-gradient(135deg, hsl(160 55% 16%), hsl(170 45% 9%));
  box-shadow: inset 0 0 0 1px hsl(158 100% 60% / .45), 0 calc(16 * var(--u)) calc(40 * var(--u)) hsl(160 80% 3% / .7);
}
/* the dead key wipes in over the live one, left to right */
.kc-dead {
  background: repeating-linear-gradient(135deg, hsl(0 0% 100% / .025) 0 1px, transparent 1px 6px), hsl(223 22% 8%);
  box-shadow: inset 0 0 0 1px hsl(223 15% 30%), 0 calc(16 * var(--u)) calc(40 * var(--u)) hsl(160 80% 3% / .7);
  clip-path: inset(0 0 0 0 round calc(8 * var(--u))); transition: clip-path .9s var(--ease-io);
}
.leave[data-step="0"] .kc-dead, .leave[data-step="1"] .kc-dead { clip-path: inset(0 100% 0 0 round calc(8 * var(--u))); }
.kc-face small { font: 600 calc(6 * var(--u))/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.kc-live small { color: var(--mint); } .kc-dead small { color: var(--telemetry); }
.kc-face strong { font: 600 calc(11 * var(--u))/1.15 "Geist", sans-serif; letter-spacing: -.01em; color: var(--fg-strong); max-width: 14ch; }
.kc-dead strong { color: var(--muted); }
.kc-face em { align-self: flex-start; font: 500 calc(6 * var(--u))/1 var(--mono); font-style: normal; padding: calc(3 * var(--u)) calc(6 * var(--u)); border-radius: 99px; }
.kc-live em { color: var(--mint); background: hsl(158 100% 45% / .14); }
.kc-dead em { color: var(--telemetry); background: hsl(223 15% 20%); }
/* the steps light in order; the last one, your data, is always lit */
.leave-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: s; }
.leave-steps li { counter-increment: s; display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 12px; font-size: 14.5px; color: var(--fg); transition: color .4s ease, opacity .4s ease; }
.leave-steps li::before { content: counter(s); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font: 600 11px/1 var(--mono); color: var(--telemetry); box-shadow: inset 0 0 0 1px hsl(223 15% 30%); transition: color .4s ease, box-shadow .4s ease; }
.leave-steps li:nth-child(-n + 3)::before { color: var(--fg); box-shadow: inset 0 0 0 1px hsl(223 15% 45%); }
.leave[data-step="0"] .leave-steps li:nth-child(-n + 3), .leave[data-step="1"] .leave-steps li:nth-child(n + 2):nth-child(-n + 3), .leave[data-step="2"] .leave-steps li:nth-child(3) { opacity: .35; }
.leave-steps li.leave-keep { color: var(--mint); }
.leave-steps .leave-keep::before { content: ""; width: 10px; height: 10px; margin-left: 7px; background: var(--mint); box-shadow: 0 0 10px var(--mint); }

/* Pricing: matchweek ticks along the floor, bookend B of the logo gradient */
.pricing { padding-block: var(--section) calc(var(--section) * 1.2); background: radial-gradient(40% 60% at 25% 60%, hsl(158 100% 45% / .07), transparent 70%); }
.pricing::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; opacity: .35; background: linear-gradient(90deg, transparent, var(--mint) 15%, var(--blue) 55%, var(--violet) 85%, transparent); }
.pricing::after { content: ""; position: absolute; left: var(--pad); right: var(--pad); bottom: 40px; height: 8px; background: repeating-linear-gradient(90deg, hsl(223 20% 20%) 0 1px, transparent 1px calc(100% / 38)); }
.pricing-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: center; }
.pricing h2 { font-size: clamp(32px, 4vw, 56px); line-height: 1.06; letter-spacing: -.035em; max-width: 16ch; }
.pricing-copy .eyebrow { margin-bottom: 18px; }
.price-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 18px; }
.cur { display: inline-flex; padding: 3px; border-radius: 99px; background: var(--chip); }
.cur button { all: unset; cursor: pointer; min-width: 30px; height: 26px; padding: 0 8px; border-radius: 99px; text-align: center; font: 600 12px/26px var(--mono); color: var(--muted); }
.cur button:hover { color: var(--fg-strong); }
.cur button[aria-pressed="true"] { color: var(--mint-ink); background: var(--mint); }
.cur button:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.pricing-copy .price { margin-top: 0; font-size: clamp(20px, 1.8vw, 24px); color: var(--fg); letter-spacing: -.01em; }
.price b { color: var(--mint); font-weight: 650; font-size: 1.35em; letter-spacing: -.02em; }
.pricing-copy .price-row + p { color: var(--muted); font-size: 17px; max-width: 46ch; margin-top: 14px; }
.pilot-terms { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.pilot-terms li { position: relative; padding-left: 18px; font-size: 15px; color: var(--fg); }
.pilot-terms li::before { content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border-radius: 2px; background: var(--mint); }
.pricing .actions { margin-top: 30px; }
.note { margin-top: 14px; font: 400 12px/1.4 var(--mono); color: var(--telemetry); }
/* The pilot: six weeks on a ruler, then the done bar as ten daily-load tiles that light in turn */
.pilot { --c: 0; padding: 26px; border-radius: var(--r); background: var(--surface); box-shadow: 0 0 0 1px hsl(223 20% 18%), var(--shadow); }
.pilot-weeks { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px 6px; font: 400 11px/1 var(--mono); color: var(--telemetry); }
.pilot-weeks > span { padding-bottom: 8px; border-bottom: 1px solid hsl(223 20% 18%); }
.ph { grid-row: 2; display: block; padding: 10px 12px; border-radius: var(--r); font: 600 13px/1 "Geist", sans-serif; }
.ph-live { grid-column: 1 / 5; color: var(--mint); background: hsl(158 100% 45% / .12); box-shadow: inset 0 0 0 1px hsl(158 100% 45% / .3); }
.ph-care { grid-column: 5 / 7; color: var(--blue); background: hsl(212 100% 60% / .12); box-shadow: inset 0 0 0 1px hsl(212 100% 60% / .3); }
.pm { grid-row: 3; font-style: normal; color: var(--muted); white-space: nowrap; }
.pm::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: currentColor; opacity: .6; vertical-align: 1px; }
.pm-1 { grid-column: 1; } .pm-2 { grid-column: 2 / 4; } .pm-3 { grid-column: 4 / 6; } .pm-4 { grid-column: 6; }
.done { margin-top: 26px; padding-top: 22px; border-top: 1px dashed hsl(223 20% 20%); }
.done-head { display: flex; justify-content: space-between; font: 600 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mint); }
.done-n { color: var(--fg); letter-spacing: 0; }
.done-ticks { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; margin-top: 14px; perspective: 600px; }
.done-ticks i { position: relative; height: 34px; border-radius: 4px; transform-style: preserve-3d; background: repeating-linear-gradient(45deg, hsl(223 20% 17%) 0 2px, transparent 2px 6px); }
.done-ticks i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: hsl(152 70% 45% / .75); box-shadow: inset 0 0 0 1px hsl(152 80% 70% / .45), 0 0 10px hsl(152 70% 45% / .25); }
.pilot.is-on .done-ticks i { animation: tile-flip .6s var(--ease-out) both; animation-delay: calc(var(--i) * 110ms + 200ms); }
.pilot.is-on .done-ticks i::after { animation: tile-lit .6s var(--ease-out) both; animation-delay: calc(var(--i) * 110ms + 200ms); }
.pilot.is-waiting .done-ticks i::after { opacity: 0; }
.done-ticks i:nth-child(1) { --i: 0; } .done-ticks i:nth-child(2) { --i: 1; } .done-ticks i:nth-child(3) { --i: 2; } .done-ticks i:nth-child(4) { --i: 3; } .done-ticks i:nth-child(5) { --i: 4; } .done-ticks i:nth-child(6) { --i: 5; } .done-ticks i:nth-child(7) { --i: 6; } .done-ticks i:nth-child(8) { --i: 7; } .done-ticks i:nth-child(9) { --i: 8; } .done-ticks i:nth-child(10) { --i: 9; }
.done-cap { margin-top: 12px; font-size: 14px; color: var(--muted); }

/* Subscription plans. Each card's slab stack has one slab per included connector */
.plans { padding-block: 0 var(--section); }
.plans h2 { font-size: clamp(32px, 4vw, 56px); line-height: 1.06; letter-spacing: -.035em; max-width: 18ch; }
.plans-lede { margin-top: 18px; max-width: 52ch; }
.plan-bar { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 32px; }
.bill button { padding: 0 12px; }
.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 22px; align-items: stretch; }
.plan { display: flex; flex-direction: column; padding: 24px; border-radius: var(--r); background: var(--surface); box-shadow: 0 0 0 1px hsl(223 20% 18%), var(--shadow); }
.plan-club { background: var(--surface-card); box-shadow: 0 0 0 1px hsl(158 100% 45% / .35), 0 0 40px hsl(158 100% 45% / .07), var(--shadow); }
.plan-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.plan h3 { font-size: 20px; font-weight: 620; color: var(--fg-strong); }
.plan-price { margin-top: 8px; color: var(--muted); font-size: 15px; white-space: nowrap; }
.plan-price b { color: var(--fg-strong); font-size: 34px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-right: 2px; }
.plan-price .from { margin-right: 4px; }
.plan-club .plan-price b { color: var(--mint); }
.plan-rate { margin-top: 4px; font: 400 12px/1.4 var(--mono); color: var(--telemetry); }
.plan-what { margin-top: 18px; min-height: 48px; color: var(--fg); font-size: 15px; }
.stepper { display: flex; align-items: center; gap: 10px; }
.stepper span { margin-right: auto; font: 500 12px/1 var(--mono); color: var(--muted); }
.stepper button { all: unset; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r); cursor: pointer; color: var(--fg-strong); background: var(--chip); box-shadow: inset 0 0 0 1px hsl(223 20% 22%); transition: background-color .15s, box-shadow .15s; }
.stepper button:hover:not([aria-disabled="true"]) { background: hsl(223 20% 19%); box-shadow: inset 0 0 0 1px hsl(158 100% 45% / .5); }
.stepper button:active:not([aria-disabled="true"]) { transform: translateY(1px); }
.stepper button:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.stepper button[aria-disabled="true"] { cursor: default; color: var(--telemetry); opacity: .5; }
.stepper .ic { width: 16px; height: 16px; }
.stepper output { min-width: 2ch; text-align: center; font: 600 20px/1 var(--mono); color: var(--mint); font-variant-numeric: tabular-nums; }
@media (pointer: coarse) { .stepper button { width: 44px; height: 44px; } }
.lims { margin: 18px 0 24px; display: grid; }
.lims div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid hsl(223 20% 16%); font-size: 14px; }
.lims dt { color: var(--muted); }
.lims dd { margin: 0; color: var(--fg-strong); font-variant-numeric: tabular-nums; text-align: right; }
.plan .btn { margin-top: auto; justify-content: center; }
.plans .note { margin-top: 22px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.slabs { --gap: 12px; width: 116px; margin: -4px -6px 0 0; display: grid; justify-items: center; }
.slab-stack { position: relative; width: 60px; height: 60px; margin-top: 118px; transform-style: preserve-3d; transform: rotateX(58deg) rotateZ(-45deg); }
.slabs figcaption { margin-top: 16px; font: 400 11px/1.3 var(--mono); color: var(--telemetry); text-align: center; }
.slab-stack i {
  position: absolute; inset: 0; border-radius: 5px; transform: translateZ(calc(var(--i) * var(--gap)));
  background: color-mix(in srgb, var(--mint) calc(var(--i) * 5% + 6%), var(--surface-card));
  box-shadow: inset 0 0 0 1px hsl(158 100% 45% / .45), 0 0 0 1px hsl(223 30% 6% / .6);
  transition: transform .45s var(--ease-out);
}
.slab-stack i:last-child { box-shadow: inset 0 0 0 1px hsl(158 100% 60% / .9), 0 0 18px hsl(158 100% 45% / .25); }
.slab-stack i.ghost { background: transparent; box-shadow: inset 0 0 0 1px hsl(158 100% 45% / .25); }
.slab-stack i.ghost:last-child { opacity: .5; }
.slab-stack i.is-new { animation: slab-in .45s var(--ease-out) both; }
/* Enterprise stands on its own server: a blue plinth under the stack */
.plan-ent .slab-stack { --gap: 7px; }
.plan-ent .slab-stack::before { content: ""; position: absolute; inset: -9px; border-radius: 7px; transform: translateZ(-10px); background: hsl(212 100% 60% / .14); box-shadow: inset 0 0 0 1px hsl(212 100% 60% / .6), 0 0 22px hsl(212 100% 60% / .18); }
.plan:hover .slabs { --gap: 16px; } .plan-ent:hover .slab-stack { --gap: 9px; }
.slab-stack i:nth-child(1) { --i: 0; } .slab-stack i:nth-child(2) { --i: 1; } .slab-stack i:nth-child(3) { --i: 2; } .slab-stack i:nth-child(4) { --i: 3; }
.slab-stack i:nth-child(5) { --i: 4; } .slab-stack i:nth-child(6) { --i: 5; } .slab-stack i:nth-child(7) { --i: 6; } .slab-stack i:nth-child(8) { --i: 7; }
.slab-stack i:nth-child(9) { --i: 8; } .slab-stack i:nth-child(10) { --i: 9; } .slab-stack i:nth-child(11) { --i: 10; } .slab-stack i:nth-child(12) { --i: 11; }
@keyframes slab-in { from { opacity: 0; transform: translateZ(calc(var(--i) * var(--gap) + 40px)); } }
.lg { display: inline-flex; align-items: center; gap: 8px; }
.lg::before { content: ""; width: 14px; height: 2px; background: var(--blue); }
.lg-price::before { background: var(--mint); }
.lg-x { margin-left: auto; color: var(--telemetry); }

/* Footer */
.foot { position: relative; padding-block: 56px 32px; font-size: 14px; }
.foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--logo-grad); opacity: .35; }
.foot-grid { display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 32px; }
.foot-brand img { height: 22px; width: auto; }
.foot-brand p { margin-top: 14px; color: var(--muted); max-width: 26ch; }
.foot-col { display: grid; align-content: start; gap: 10px; }
.foot h2 { color: var(--telemetry); margin-bottom: 6px; }
.foot-col p, .foot-col a { color: var(--muted); text-decoration: none; }
.foot-col a:hover { color: var(--fg-strong); }
.foot-legal { margin-top: 48px; color: var(--telemetry); font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .motion-toggle { display: none; }
}

/* Tablet */
@keyframes tile-flip { from { transform: rotateX(-180deg); } }
@keyframes tile-lit { 0%, 49% { opacity: 0; } }

@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) 260px; gap: 32px; }
  .rail { gap: 0 32px; }
  .stack { width: 360px; height: 300px; }
}
@media (max-width: 960px) {
  .nav nav { display: none; }
  .hero-grid { grid-template-columns: 1fr; }
  /* Phones and tablets: the same story read top to bottom. Sources, then the pitch in its own band, then the warehouse */
  .story { position: relative; margin-top: 36px; padding-top: 4px; }
  .story > :not(.pitch) { position: relative; z-index: 1; }
  .story .pitch { z-index: 2; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  .story-src { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
  .story-src li { padding: 6px 10px; border-radius: 99px; font: 500 11px/1 var(--mono); color: hsl(158 100% 45% / .75); background: hsl(223 22% 11% / .85); box-shadow: inset 0 0 0 1px hsl(158 100% 45% / .35); transition: color .3s ease, box-shadow .3s ease; }
  .story-src li.is-lit { color: var(--mint); box-shadow: inset 0 0 0 1px hsl(158 100% 45% / .7), 0 0 12px hsl(158 100% 45% / .25); }
  .story-band { display: block; height: clamp(170px, 34vw, 300px); }
  .story .motion-toggle { position: static; display: flex; margin: 10px 0 0 auto; }
  .feed { max-width: 460px; margin: 0 auto; }
  .feed tbody tr:nth-child(n + 3) { display: none; }
  .story .motion-toggle { max-width: max-content; }
  .story .motion-toggle[hidden] { display: none; }
  .leave { grid-template-columns: 1fr; justify-items: center; gap: 22px; }
  .leave-steps { justify-self: stretch; }
  .silos-pin { top: 56px; min-height: calc(100vh - 56px); grid-template-columns: 1fr; align-content: center; gap: 12px; }
  .plates { --u: min(2.6px, .7vw); height: calc(120 * var(--u)); }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile { grid-column: span 1; }
  .tile-main, .tile-med { grid-column: span 2; }
  .pricing-grid { grid-template-columns: 1fr; }
  .pilot { max-width: 560px; }
  .plan-grid { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
  .slabs { width: 84px; }
  .slab-stack { width: 44px; height: 44px; margin-top: 96px; }
  .slabs .slab-stack { --gap: 9px; } .plan-ent .slab-stack { --gap: 5px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: span 2; }
  .dash-base { grid-template-columns: minmax(0, 1fr); }
  .dash-side { display: none; }
  .pl-cron, .pl-act { display: none; }
  .pl { grid-template-columns: 30px 12px 30px minmax(0, 1fr) 128px 64px auto; }
  /* Steps stack, each followed by its own card, flat */
  .rail { display: block; }
  .stage { display: none; }
  .step { min-height: 0; padding: 40px 0 8px; opacity: 1; }
  .step-label { color: var(--pool); }
  .slot .card { position: relative; margin-top: 22px; transform: none; max-width: 460px; }
  .steps { padding-left: 0; } .steps::before, .steps::after, .step-label::before { display: none; }
  .slot .card:not(.is-played) .tick { opacity: 0; }
}
@media (min-width: 768px) and (max-width: 960px) {
  .hero-copy { max-width: 600px; margin: 0 auto; text-align: center; }
  .hero-copy .eyebrow, .hero-copy .actions { justify-content: center; }
  .hero-copy .lede { margin-inline: auto; }
}
@media (max-width: 430px) {
  .story-src .sfx { display: none; }
}
@media (max-width: 767px) {
  .nav-inner { gap: 12px; }
  .nav-cta .link { display: none; }
  .nav-logo img { height: 22px; }
  .hero { padding-bottom: 64px; }
  .hero::before { -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 62%); mask-image: linear-gradient(180deg, #000 30%, transparent 62%); }
  .hero h1 br { display: none; }
  .prism { display: block; } /* own line: its width change pushes nothing */
  .motion-toggle { bottom: 14px; }
  /* phones: the hero ends on its gradient line at the bottom of the screen; sources and destinations fill the next screen */
  .hero { min-height: 100svh; padding-top: 84px; }
  /* The systems screen as a mirrored ledger: five sources, KoraBridge down the seam, five destinations */
  /* no solid band on phones: only the two glows, faded at top and bottom, so the screen blends into its neighbours */
  .systems { position: relative; min-height: 100svh; display: flex; align-items: center; padding-block: 72px 32px; background: none; }
  .systems::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(60% 45% at 18% 50%, hsl(158 100% 45% / .06), transparent 70%), radial-gradient(60% 45% at 82% 50%, hsl(212 100% 60% / .07), transparent 70%);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
  }
  .systems .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); column-gap: 8px; align-items: start; gap: 0 8px; width: 100%; padding-bottom: 34px; }
  .sys-row { display: contents; }
  .sys-src { grid-area: 1 / 1; } .sys-dst { grid-area: 1 / 3; }
  .sys-label { justify-content: center; align-self: center; font-size: 12px; }
  .systems ul { grid-area: 2 / 1; display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 14px; }
  .systems ul.dst { grid-area: 2 / 3; }
  .systems li {
    flex-direction: column; justify-content: center; gap: 9px; padding: clamp(12px, 3.2svh, 30px) 0; text-align: center;
    font-size: 14px; line-height: 1.25; font-weight: 500; border-top: 1px solid hsl(223 20% 15%);
  }
  .systems li:last-child { border-bottom: 1px solid hsl(223 20% 15%); }
  .systems .logo-box { width: auto; height: auto; background: none; }
  .systems .logo-box::before { width: clamp(26px, 4.2svh, 40px); height: clamp(26px, 4.2svh, 40px); }
  .systems li.sys-more { font-size: 14px; font-weight: 500; }
  .systems li.sys-more::before {
    content: "+"; display: grid; place-items: center; width: clamp(26px, 4.2svh, 40px); aspect-ratio: 1; border-radius: 50%;
    box-shadow: 0 0 0 1px hsl(158 100% 45% / .4); color: var(--mint); font: 500 16px/1 var(--mono);
  }
  .sys-flow { position: relative; grid-area: 1 / 2 / 3 / 3; align-self: stretch; display: flex; flex-direction: column; align-items: center; }
  .sys-flow span { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: hsl(223 22% 11%); box-shadow: 0 0 0 1px hsl(212 100% 60% / .35), 0 0 22px hsl(170 100% 50% / .18); }
  .sys-flow span img { width: 18px; height: 18px; }
  .sys-flow::after { content: ""; flex: 1; width: 1px; margin-top: 8px; background: linear-gradient(180deg, hsl(158 100% 45% / .5), hsl(212 100% 60% / .5)); }
  .sys-flow em { position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%); white-space: nowrap; font: 400 11px/1 var(--mono); font-style: normal; color: var(--telemetry); }
  @media (prefers-reduced-motion: no-preference) {
    /* a glint travels down the seam, source to destination */
    .sys-flow::before { content: ""; position: absolute; left: 50%; top: 44px; width: 2px; height: 28px; margin-left: -1px; border-radius: 2px; background: linear-gradient(180deg, transparent, var(--mint), var(--blue)); opacity: 0; animation: seam 6s var(--ease-io) infinite 1s; }
    @keyframes seam { 0% { top: 44px; opacity: 0; } 8% { opacity: 1; } 30% { opacity: 1; } 38%, 100% { top: calc(100% - 28px); opacity: 0; } } /* the seam is short, so animating top is cheap */
  }
  .silos { height: 140vh; }
  .silos-pin { align-content: start; padding-top: 40px; grid-template-rows: auto 1fr; } /* plates centre in what the statement leaves */
  .silos-lede { display: none; }
  .plates { align-self: center; --gap: 36; } /* wider spread so every vendor label shows at phone size */
  .bento { grid-template-columns: minmax(0, 1fr); }
  .tile, .tile-main, .tile-med, .tile-match, .tile-key { grid-column: auto; }
  .pilot { padding: 20px; }
  .ph { font-size: 12px; padding: 9px 10px; }
  .pm-1 { grid-column: 1 / 4; } .pm-2 { grid-column: 4 / 7; } .pm-3 { grid-column: 1 / 4; grid-row: 4; } .pm-4 { grid-column: 4 / 7; grid-row: 4; }
  .tree { font-size: 12px; padding: 14px; }
  .m-tbl { font-size: 12px; }
  .m-tbl th, .m-tbl td { padding: 10px 8px; }
  .keycard-scene { --u: 1.6px; }
  .story { display: none; }
  .lede-long { display: none; }
  .lede-short { display: inline; } /* the stack above already names the vendors */
  /* phones: the eyebrow, then the morning's syncs as proof, then the pitch for it */
  .hero-grid { display: flex; flex-direction: column; align-items: stretch; align-self: stretch; gap: 0; }
  .hero-copy { display: contents; }
  .hero h1 { margin-top: auto; } /* the copy sits low; spare height opens between the syncs and the headline */
  .hero-copy .eyebrow { order: -2; }
  .sync-stack { display: block; order: -1; margin: 0 0 44px; }
  .story-band { height: clamp(150px, 46vw, 240px); }
  .pl:nth-child(n + 7), .pl-meta, .pl-act, .pl-run, .pg-live { display: none; }
  .pg-filters { flex-wrap: nowrap; overflow: hidden; mask-image: linear-gradient(90deg, #000 80%, transparent); }
  .dash-main { padding: 16px; }
  .pl { grid-template-columns: 30px 10px 30px minmax(0, 1fr); padding: 10px; }
  .pl-st { grid-column: 4; padding: 6px 0 0 4px; }
}

/* Contact page: what happens next on the left, the form on a card on the right */
.contact { padding-block: calc(64px + clamp(40px, 6vw, 88px)) var(--section); background: radial-gradient(60% 50% at 80% 20%, hsl(158 100% 45% / .06), transparent 70%); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.contact h1 { font-size: clamp(36px, 4.4vw, 60px); line-height: 1.04; letter-spacing: -.04em; max-width: 13ch; }
.contact-copy { position: sticky; top: 104px; }
.contact-next { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 0; counter-reset: n; }
.contact-next li { counter-increment: n; position: relative; display: grid; gap: 2px; padding: 0 0 22px 44px; }
.contact-next li::before { content: counter(n); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 500 12px/1 var(--mono); color: var(--mint); box-shadow: inset 0 0 0 1px hsl(158 100% 45% / .4); }
.contact-next li:not(:last-child)::after { content: ""; position: absolute; left: 13px; top: 32px; bottom: 6px; width: 1px; background: hsl(158 100% 45% / .2); }
.contact-next b { font-weight: 600; color: var(--fg-strong); line-height: 26px; }
.contact-next span { color: var(--muted); font-size: 15px; line-height: 1.45; }
.contact-next span a { color: var(--mint); text-underline-offset: 3px; }
.contact-alt { margin-top: 12px; color: var(--muted); font-size: 15px; }
.contact-alt a { color: var(--mint); text-underline-offset: 3px; }

.contact-card { padding: clamp(22px, 3vw, 36px); border-radius: calc(var(--r) * 2); background: var(--surface-card); box-shadow: 0 0 0 1px hsl(223 20% 18%), var(--shadow); }
.cform { display: grid; gap: 20px; }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cf-field { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.cf-field > span, .cf-field legend { padding: 0; font-size: 14px; font-weight: 500; color: var(--fg); }
.cf-field em { font-style: normal; font: 400 12px/1 var(--mono); color: var(--telemetry); margin-left: 6px; }
.cf-field legend { margin-bottom: 8px; }
.cform input:not([type=radio]), .cform textarea {
  width: 100%; padding: 12px 14px; border: 0; border-radius: var(--r); background: var(--surface); color: var(--fg-strong);
  font: 400 16px/1.4 "Geist", system-ui, sans-serif; box-shadow: inset 0 0 0 1px hsl(223 20% 22%); transition: box-shadow .15s ease;
}
.cform textarea { resize: vertical; min-height: 112px; }
.cform textarea::placeholder { color: var(--telemetry); }
.cform input:not([type=radio]):hover, .cform textarea:hover { box-shadow: inset 0 0 0 1px hsl(223 20% 30%); }
.cform input:not([type=radio]):focus, .cform textarea:focus { outline: none; box-shadow: inset 0 0 0 1px var(--mint), 0 0 0 3px hsl(158 100% 45% / .15); }
.cform.is-checked :is(input, textarea):invalid { box-shadow: inset 0 0 0 1px var(--crimson); }
.cf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cf-chips label { position: relative; }
.cf-chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cf-chips span { display: block; padding: 8px 14px; border-radius: 99px; background: var(--chip); color: var(--muted); font-size: 14px; box-shadow: inset 0 0 0 1px hsl(223 20% 20%); transition: color .15s, background-color .15s, box-shadow .15s; }
.cf-chips label:hover span { color: var(--fg-strong); }
.cf-chips input:checked + span { color: var(--mint); background: hsl(158 100% 45% / .10); box-shadow: inset 0 0 0 1px hsl(158 100% 45% / .5); }
.cf-chips input:focus-visible + span { outline: 2px solid var(--mint); outline-offset: 2px; }
.cf-hp { position: absolute; left: -9999px; }
.cf-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 4px; }
.cf-note { color: var(--telemetry); font-size: 13px; }
.cf-note a { color: var(--muted); }
.cf-status:empty { display: none; }
.cf-status { margin-top: -8px; color: var(--crimson); font-size: 14px; }
.cform .btn { border: 0; font-family: inherit; cursor: pointer; }
.cform .btn:disabled { opacity: .6; cursor: progress; }
.cf-done { display: grid; justify-items: start; gap: 12px; padding: 24px 0; outline: none; }
.cf-done[hidden], .cform[hidden] { display: none; }
.cf-done h2 { font-size: 28px; letter-spacing: -.025em; }
.cf-done p { color: var(--muted); }
.cf-done b { color: var(--fg-strong); font-weight: 500; }
.cf-done-mark { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: hsl(158 100% 45% / .12); box-shadow: inset 0 0 0 1px hsl(158 100% 45% / .45); }
.cf-done-mark::before { content: ""; width: 16px; height: 9px; border: solid var(--mint); border-width: 0 0 2px 2px; transform: translateY(-2px) rotate(-45deg); }
@media (max-width: 960px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .contact-copy { position: static; }
  .contact-card { max-width: 640px; }
}
@media (max-width: 767px) {
  .contact { padding-top: 104px; }
  .cf-row { grid-template-columns: 1fr; }
  .contact-copy { display: contents; } /* phones: the form right after the pitch, the steps below it */
  .contact-grid { gap: 0; }
  .contact .lede { margin-bottom: 28px; }
  .contact-next { order: 1; margin-top: 36px; }
  .contact-alt { order: 2; }
}

/* Privacy notice: one readable column */
.legal { padding-block: calc(64px + clamp(40px, 6vw, 88px)) var(--section); }
.legal-wrap { max-width: calc(68ch + 2 * var(--pad)); }
.legal h1 { font-size: clamp(34px, 4vw, 52px); line-height: 1.06; letter-spacing: -.035em; max-width: 18ch; }
.legal .lede { margin-top: 20px; max-width: none; }
.legal h2 { margin-top: 44px; font-size: 20px; font-weight: 620; color: var(--fg-strong); letter-spacing: -.01em; }
.legal p, .legal li { color: var(--fg); font-size: 16px; line-height: 1.65; }
.legal h2 + p, .legal p + p, .legal p + ul, .legal ul + p { margin-top: 12px; }
.legal ul { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.legal a { color: var(--mint); }
.legal-updated { margin-top: 44px; font: 400 12px/1.4 var(--mono); color: var(--telemetry) !important; }
.legal-draft { margin-top: 22px; display: inline-block; padding: 6px 12px; border-radius: var(--r); font: 500 12px/1.4 var(--mono); color: var(--amber) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 50%, transparent); }
mark.todo { background: transparent; color: var(--amber); box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--amber) 60%, transparent); }