/* KeyStride Bridge 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: hsl(160.3 100% 44.9%); }

:root {
  --bg: hsl(220 30% 3.9%);
  --bg-2: hsl(216 29.4% 6.7%);
  --wash: linear-gradient(135deg, hsl(221.2 28.6% 11%) 0%, hsl(220 30% 3.9%) 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: hsl(208 23.1% 87.3%);
  --fg-strong: hsl(206.7 36% 95.1%);
  --muted: hsl(218 14.7% 60%);
  --telemetry: hsl(219.4 12.6% 49.8%);
  --mint: hsl(160.3 100% 44.9%);
  --mint-ink: hsl(162 38.5% 5.1%);
  --blue: hsl(212 100% 60%);
  --violet: hsl(274 85% 63%);
  --teal: hsl(180 80% 50%);
  --crimson: hsl(350.5 84% 63.1%);
  --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; }
.nobr { white-space: nowrap; } /* keeps "30-minute" from breaking at the hyphen */
.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 hsl(160.3 100% 44.9% / .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: hsl(159.7 85.7% 58.8%); box-shadow: 0 0 0 4px hsl(160.3 100% 44.9% / .15), 0 8px 24px hsl(160.3 100% 44.9% / .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: 18px; 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%, hsl(0 0% 0%) 38%, transparent 76%);
  mask-image: radial-gradient(115% 95% at 78% 22%, hsl(0 0% 0%) 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; }

/* 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, hsl(0 0% 0%), transparent); mask-image: radial-gradient(closest-side, hsl(0 0% 0%), 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; }
/* Desktop: the network (network.js) replaces the plates; phones and tablets keep the plates merging into one */
.network-wrap { display: none; }
@media (min-width: 961px) {
  .silos .plates { display: none; }
  .network-wrap { display: block; width: calc(100% + 32px); margin-left: -32px; } /* reaches into the column gap, so it sits close to the statement */
}
@media (min-width: 1280px) { .network-wrap { width: calc(112% + 56px); margin-left: -56px; margin-right: -12%; } } /* and into the empty right margin */
@media (min-width: 1600px) { .network-wrap { width: calc(128% + 56px); margin-right: -28%; } }
.network svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.net-top { stroke-width: .6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.net-shadow { fill: hsl(220 60% 1% / .55); }
.net-floor { fill: none; stroke: hsl(223 22% 22% / .55); stroke-width: .5; vector-effect: non-scaling-stroke; }
.net-link { fill: none; stroke: hsl(218 15% 34%); stroke-width: 1.6; stroke-dasharray: .1 3.2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.net-link-on { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset .55s var(--ease-out); }
.net-link-on.src { stroke: var(--mint); color: var(--mint); } .net-link-on.dst { stroke: var(--blue); color: var(--blue); }
.net-link-on.on { stroke-dashoffset: 0; filter: drop-shadow(0 0 2px currentColor); }
.net-packet { opacity: 0; transition: opacity .3s; } .net-packet.on { opacity: 1; }
.net-packet.src { fill: var(--mint); } .net-packet.dst { fill: var(--blue); }
.net-label { font: 500 6.4px/1 var(--mono); fill: var(--telemetry); letter-spacing: .02em; }
.net-logo { fill: var(--fg-strong); opacity: .85; }
.net-cap { fill: hsl(220 30% 5% / .88); }
.net-device-shadow { fill: hsl(220 60% 1% / .6); }
.network-read { margin-top: 10px; min-height: 1.4em; font: 500 13px/1.4 var(--mono); color: var(--muted); text-align: center; }
.network-read .m { color: var(--mint); } .network-read .b { color: var(--blue); }

/* 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, hsl(0 0% 0%) 400px, hsl(0 0% 0%) calc(100% - 400px), transparent);
  mask-image: linear-gradient(180deg, transparent, hsl(0 0% 0%) 400px, hsl(0 0% 0%) 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, hsl(0 0% 0%) 20%, transparent); mask-image: radial-gradient(closest-side, hsl(0 0% 0%) 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, hsl(0 0% 0%) 18%, hsl(0 0% 0%) 75%, transparent); mask-image: linear-gradient(180deg, transparent, hsl(0 0% 0%) 18%, hsl(0 0% 0%) 75%, transparent);
  background: radial-gradient(circle at 50% 62%, transparent 0 239px, hsl(208 23.1% 87.3%) 240px 241px, transparent 242px), linear-gradient(90deg, transparent calc(50% - .5px), hsl(208 23.1% 87.3%) 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, .pl-stop {
  --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 { flex: none; height: 22px; width: auto; align-self: flex-start; 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 100px 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-cron.is-manual { opacity: .45; } /* as in the app: no schedule reads quieter */
.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; }
/* Running now: the same row, its status columns replaced by live telemetry, as in the app */
.inv-live { display: flex; align-items: center; gap: 8px; }
.run-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: hsl(212 100% 65%); animation: run-pulse 1.5s ease-in-out infinite; }
@keyframes run-pulse { 50% { opacity: .6; transform: scale(1.3); } }
.pl-live { background: hsl(212 42% 12%); }
.pl-live::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: var(--blue); }
.pl-run-live { grid-column: 5 / -2; display: grid; gap: 6px; min-width: 0; }
.pl-live-head { display: flex; align-items: center; gap: 8px; padding: 2px; margin: -2px; font: 400 11px/1 var(--mono); white-space: nowrap; overflow: hidden; } /* the padding leaves room for the dot to pulse */
.pl-live-head > b { font: 600 11px/1 "Geist", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: hsl(212 100% 74%); }
.pl-time { color: hsl(212 100% 64%); opacity: .85; }
.pl-phase { display: flex; align-items: center; gap: 2px; letter-spacing: .04em; text-transform: uppercase; color: var(--telemetry); }
.pl-phase b { font-weight: 400; opacity: .7; } .pl-phase b.on { font-weight: 600; opacity: 1; color: var(--mint); }
.pl-phase .ic { width: 12px; height: 12px; opacity: .5; }
.pl-bar { position: relative; height: 3px; border-radius: 3px; overflow: hidden; background: hsl(212 100% 60% / .14); }
.pl-bar i { position: absolute; inset: 0 auto 0 0; width: 28%; background: linear-gradient(90deg, transparent, hsl(212 100% 66%), transparent); animation: run-scan 1.8s cubic-bezier(.4, 0, .6, 1) infinite; }
.is-queued .pl-bar i { animation-duration: 2.6s; opacity: .7; }
@keyframes run-scan { from { transform: translateX(-200%); } to { transform: translateX(500%); } }
.pl-stop { --z: 8; grid-column: -2; justify-self: end; display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--crimson); background: hsl(350.5 84% 63.1% / .08); box-shadow: inset 0 0 0 1px hsl(350.5 84% 63.1% / .4); }
.pl-stop .ic { width: 10px; height: 10px; fill: currentColor; stroke: none; }

/* 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%, hsl(0 0% 0%), transparent); mask-image: radial-gradient(70% 60% at 50% 55%, hsl(0 0% 0%), 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. KeyStride Bridge'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); }

/* Separators. The faded line is bookend B of the logo gradient (bookend A is the hero's touchline).
   .tick-rule (matchweek ticks along the floor) is unused for now, kept to reuse: put it on a positioned element */
.rule-fade::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); }
.tick-rule::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)); }
.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; }
.note { margin-top: 14px; font: 400 12px/1.4 var(--mono); color: var(--telemetry); }

/* Subscription plans. Each card's slab stack has one slab per included connector */
.plans { padding-block: 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-cta { margin-top: auto; display: grid; gap: 4px; justify-items: stretch; }
.plan .btn { justify-content: center; }
.plan-q { justify-self: center; padding: 10px 6px; color: var(--muted); font-size: 14px; text-decoration: underline; text-decoration-color: hsl(223 20% 30%); text-underline-offset: 3px; transition: color .15s var(--ease-out), text-decoration-color .15s var(--ease-out); }
.plan-q:hover { color: var(--fg-strong); text-decoration-color: currentColor; }
.plan-q:focus-visible { outline: 2px solid var(--mint); outline-offset: 0; border-radius: var(--r); color: var(--fg-strong); }
.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 { width: 122px; height: 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 */

@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, hsl(0 0% 0%) 8%, hsl(0 0% 0%) 92%, transparent); mask-image: linear-gradient(90deg, transparent, hsl(0 0% 0%) 8%, hsl(0 0% 0%) 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; }
  .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: 18px; }
  .hero { padding-bottom: 64px; }
  .hero::before { -webkit-mask-image: linear-gradient(180deg, hsl(0 0% 0%) 30%, transparent 62%); mask-image: linear-gradient(180deg, hsl(0 0% 0%) 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, KeyStride Bridge 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, hsl(0 0% 0%) 25%, hsl(0 0% 0%) 75%, transparent); mask-image: linear-gradient(180deg, transparent, hsl(0 0% 0%) 25%, hsl(0 0% 0%) 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: 44px; height: 44px; 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); }
  /* the device is centred by its clear-space box (1 head left, 1.5 heads right), so it sits half a head left of the disc centre: 24 px tall, head 6.3 px */
  .sys-flow span img { height: 24px; width: auto; margin-right: 3.2px; }
  .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: 52px; 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: 52px; 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; }
  .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, hsl(0 0% 0%) 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; }
  .pl-stop, .pl-phase { display: none; }
  .pl-run-live { grid-column: 4; padding: 8px 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); }

/* Booking (/book and /booking): the contact page's two columns, the card holding one state at
   a time. Day cells are navigation (mint tint when chosen); a time is the decision (filled mint).
   Times and dates are mono telemetry. DESIGN.md "Booking pages". */
.book { min-height: 100svh; } /* short states keep the footer below the first screen */
.book-card { min-height: 0; }
.bk-view, .bk-panel { display: grid; gap: 20px; align-content: start; }
.bk-view[hidden], .bk-panel[hidden], .bk-copy[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .bk-view:not([hidden]), .bk-panel:not([hidden]), .bk-copy:not([hidden]) { animation: bk-in .32s var(--ease-out); }
}
@keyframes bk-in { from { opacity: 0; transform: translateY(6px); } }
[data-picker] { display: grid; gap: 18px; }
[data-picker]:empty { display: none; }
.bk-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.bk-title { font-size: 20px; letter-spacing: -.02em; outline: none; }
.bk-state { justify-items: start; padding-block: 8px; }
.bk-state > .bk-title { font-size: 28px; letter-spacing: -.025em; line-height: 1.15; text-wrap: balance; }
.bk-state > p { color: var(--muted); max-width: 52ch; }
.bk-state > p b { color: var(--fg-strong); font-weight: 500; }
.bk-state > p a, .bk-fine a { color: var(--mint); text-underline-offset: 3px; }
.bk-state .bk-when { justify-self: stretch; }
.bk-fine { color: var(--telemetry); font-size: 14px; line-height: 1.5; max-width: 56ch; }
.bk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.book-card button.btn { border: 0; font-family: inherit; cursor: pointer; }
.book-card .btn:disabled { background: var(--chip); color: var(--telemetry); cursor: not-allowed; box-shadow: none; transform: none; }
.book-card .btn-primary.is-busy:disabled { background: hsl(160.3 100% 44.9% / .7); color: var(--mint-ink); cursor: progress; }
.btn-quiet { background: transparent; color: var(--muted); }
.btn-quiet:hover { color: var(--fg-strong); background: var(--chip); }
.btn-danger { background: transparent; color: hsl(350 85% 70%); box-shadow: inset 0 0 0 1px hsl(350 85% 62% / .55); }
.btn-danger:hover { background: hsl(350 85% 62% / .12); box-shadow: inset 0 0 0 1px hsl(350 85% 62% / .8); }
.bk-textbtn { padding: 4px 0; border: 0; background: none; font: 500 14.5px/1.4 "Geist", system-ui, sans-serif; color: var(--mint); cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color .15s var(--ease-out); }
.bk-textbtn:hover { text-decoration-color: currentColor; }

/* The calendar: weekday columns, one row per week, a cell per day */
.bk-cal-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; }
.bk-cal-month { font-size: 16px; letter-spacing: -.02em; }
.bk-tz { color: var(--muted); font-size: 13px; }
.bk-tz span { font-family: var(--mono); font-size: 12.5px; color: var(--fg); }
.bk-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: -4px; }
.bk-days-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.bk-wd { padding-bottom: 2px; text-align: center; font: 800 11px/1 "Geist", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: hsl(210 14% 68%); }
.bk-day {
  position: relative; display: grid; place-items: center; align-content: center; gap: 3px; height: 58px; padding: 0;
  border: 0; border-radius: var(--r); background: var(--surface); color: var(--fg-strong); cursor: pointer;
  box-shadow: inset 0 0 0 1px hsl(223 20% 20%); font-family: inherit;
  transition: background-color .15s var(--ease-out), box-shadow .15s var(--ease-out), color .15s var(--ease-out);
}
.bk-day-num { font-size: 18px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.bk-day-count { font: 500 11px/1 var(--mono); color: var(--telemetry); }
.bk-day:hover:not(:disabled) { background: var(--surface-hover); box-shadow: inset 0 0 0 1px hsl(223 20% 30%); }
.bk-day[aria-pressed=true] { background: hsl(158 100% 45% / .10); color: var(--mint); box-shadow: inset 0 0 0 1px hsl(158 100% 45% / .55); }
.bk-day[aria-pressed=true] .bk-day-count { color: hsl(158 100% 45% / .8); }
.bk-day:disabled { background: transparent; color: hsl(219 15% 60% / .38); box-shadow: inset 0 0 0 1px hsl(223 20% 14%); cursor: default; }
.bk-day:focus-visible, .bk-time:focus-visible { outline-offset: 2px; }

/* The chosen day's times, split into morning and afternoon in the visitor's zone */
.bk-day-title { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 16px; flex-wrap: wrap; padding-top: 4px; }
.bk-day-title h3 { font-size: 16px; letter-spacing: -.02em; }
.bk-day-open { font: 400 12px/1 var(--mono); color: var(--telemetry); }
.bk-times { display: grid; gap: 18px; margin-top: -6px; }
.bk-part { display: grid; gap: 10px; }
.bk-part-label { font: 800 11px/1 "Geist", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: hsl(210 14% 68%); }
.bk-part-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.bk-time {
  height: 42px; padding: 0; border: 0; border-radius: var(--r); background: var(--surface); color: var(--fg);
  font: 500 15px/1 var(--mono); font-variant-numeric: tabular-nums; cursor: pointer; box-shadow: inset 0 0 0 1px hsl(223 20% 22%);
  transition: background-color .15s var(--ease-out), box-shadow .15s var(--ease-out), color .15s var(--ease-out), transform .15s var(--ease-out);
}
.bk-time:hover { color: var(--fg-strong); box-shadow: inset 0 0 0 1px hsl(158 100% 45% / .45); }
.bk-time:active { transform: translateY(1px); }
.bk-time[aria-pressed=true] { background: var(--mint); color: var(--mint-ink); box-shadow: 0 0 0 4px hsl(160.3 100% 44.9% / .14); }

/* The bar under the picker: what you chose, and the way on */
.bk-bar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; padding-top: 20px; margin-top: 4px; }
.bk-bar::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: hsl(223 20% 18%); }
.bk-choice { color: var(--telemetry); font-size: 14.5px; }
.bk-choice.is-set { display: grid; gap: 4px; }
.bk-choice-label { font: 800 11px/1 "Geist", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: hsl(210 14% 68%); }
.bk-choice b { font: 500 15px/1.3 var(--mono); color: var(--fg-strong); }

/* Notices and the time card */
.bk-notice { padding: 11px 14px; border-radius: 8px; font-size: 14.5px; line-height: 1.45; color: hsl(38 95% 62%); background: hsl(38 95% 52% / .08); box-shadow: inset 0 0 0 1px hsl(38 95% 52% / .35); }
.bk-notice[hidden] { display: none; }
.bk-when { display: grid; margin: 0; padding: 4px 16px; border-radius: 8px; background: var(--surface); box-shadow: inset 0 0 0 1px hsl(223 20% 20%); }
.bk-when-row { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 4px 16px; align-items: baseline; padding: 12px 0; }
.bk-when dt { font: 800 11px/1.4 "Geist", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: hsl(210 14% 68%); }
.bk-when dd { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.bk-when-date { width: 100%; color: var(--fg-strong); font-size: 14.5px; }
.bk-when-time { color: var(--fg-strong); font-size: 14.5px; }
.bk-when-tz { color: var(--muted); font-size: 12px; } /* the only zone on the page, so it must clear AA */
.bk-when-time { color: var(--mint); }
.bk-when-struck dd span:not(.bk-when-tz) { color: var(--muted); text-decoration: line-through; text-decoration-color: hsl(219 15% 60% / .6); }
.bk-when-struck .bk-when-time { color: var(--muted); }
.bk-meet { justify-self: stretch; display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 4px 16px; align-items: baseline; padding: 14px 16px; border-radius: 8px; background: hsl(158 100% 45% / .07); box-shadow: inset 0 0 0 1px hsl(158 100% 45% / .3); }
.bk-meet[hidden] { display: none; }
.bk-meet-label { font: 800 11px/1.4 "Geist", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: hsl(210 14% 68%); }
.bk-meet a { font: 500 14.5px/1.4 var(--mono); color: var(--mint); text-underline-offset: 3px; overflow-wrap: anywhere; }
/* the cancel step tints the card itself, so the warning has one surface, not a box in a box */
.book-card.is-danger { background: color-mix(in srgb, var(--surface-card) 93%, var(--crimson)); box-shadow: 0 0 0 1px hsl(350 85% 62% / .35), var(--shadow); transition: background-color .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.bk-danger > p:not(.cf-status) { color: var(--muted); font-size: 15px; }
.book-card .cf-status { margin-top: -6px; }
.cform [aria-invalid=true] { box-shadow: inset 0 0 0 1px var(--crimson) !important; }

/* Where you are on /booking: picked, checked, confirm */
.bk-steps { list-style: none; margin: 0; padding: 0; display: grid; }
.bk-steps li { position: relative; display: grid; gap: 2px; padding: 0 0 20px 44px; }
.bk-steps li::before { content: ""; position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1px hsl(158 100% 45% / .4); }
.bk-steps li:not(:last-child)::after { content: ""; position: absolute; left: 13px; top: 32px; bottom: 6px; width: 1px; background: hsl(158 100% 45% / .25); }
.bk-steps li.is-done::before { background: hsl(158 100% 45% / .12) no-repeat center / 12px 9px; box-shadow: inset 0 0 0 1px hsl(158 100% 45% / .45); }
.bk-steps li.is-done > b::before { content: ""; position: absolute; left: 8px; top: 8px; width: 10px; height: 5px; border: solid var(--mint); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.bk-steps li.is-now::before { background: var(--mint); box-shadow: 0 0 0 4px hsl(160.3 100% 44.9% / .15); }
.bk-steps b { font-weight: 600; color: var(--fg-strong); line-height: 26px; }
.bk-steps li.is-done b { color: var(--fg); }
.bk-steps span { color: var(--muted); font-size: 15px; line-height: 1.45; }
.bk-steps li:last-child { padding-bottom: 4px; }

/* State marks: a ringed circle with a drawn glyph, as on the contact page */
.bk-mark { position: relative; 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); }
.bk-mark::before, .bk-mark::after { content: ""; position: absolute; }
.bk-mark-check::before { width: 16px; height: 9px; border: solid var(--mint); border-width: 0 0 2px 2px; transform: translateY(-2px) rotate(-45deg); }
.bk-mark-mail::before { width: 18px; height: 13px; border: 2px solid var(--mint); border-radius: 2px; }
.bk-mark-mail::after { width: 9px; height: 9px; border: solid var(--mint); border-width: 0 2px 2px 0; transform: translateY(-4px) rotate(45deg); }
.bk-mark-cal::before { width: 18px; height: 16px; border: 2px solid var(--mint); border-top-width: 5px; border-radius: 3px; transform: translateY(1px); }
.bk-mark-warn, .bk-mark-pause { background: hsl(38 95% 52% / .10); box-shadow: inset 0 0 0 1px hsl(38 95% 52% / .45); }
.bk-mark-warn::before { width: 2px; height: 11px; border-radius: 1px; background: var(--amber); transform: translateY(-3px); }
.bk-mark-warn::after { width: 3px; height: 3px; border-radius: 50%; background: var(--amber); transform: translateY(7px); }
.bk-mark-pause::before { width: 12px; height: 14px; border: solid var(--amber); border-width: 0 3px; }
.bk-mark-x { background: var(--chip); box-shadow: inset 0 0 0 1px hsl(223 20% 24%); }
.bk-mark-x::before, .bk-mark-x::after { width: 16px; height: 2px; border-radius: 1px; background: var(--muted); transform: rotate(45deg); }
.bk-mark-x::after { transform: rotate(-45deg); }

/* Loading: the picker's own shape, shimmering */
.bk-skel, .bk-skel-grid span, .bk-skel-times span, .bk-skel-when span, .bk-skel-actions span { display: block; border-radius: var(--r); background: linear-gradient(90deg, hsl(223 22% 12%) 0%, hsl(223 22% 16%) 50%, hsl(223 22% 12%) 100%) 0 0 / 200% 100%; }
@media (prefers-reduced-motion: no-preference) {
  .bk-skel, .bk-skel-grid span, .bk-skel-times span, .bk-skel-when span, .bk-skel-actions span { animation: bk-shimmer 1.4s var(--ease-io) infinite; }
}
@keyframes bk-shimmer { to { background-position: -200% 0; } }
.bk-skel { height: 14px; }
.bk-skel-s { width: 110px; } .bk-skel-m { width: 150px; }
.bk-skel-title { width: 200px; height: 18px; }
.bk-skel-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.bk-skel-grid span { height: 58px; }
.bk-skel-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.bk-skel-times span { height: 42px; }
.bk-skel-when span { height: 78px; border-radius: 8px; } /* one row, the height of the time card */
.bk-skel-actions { display: flex; gap: 12px; }
.bk-skel-actions span { width: 150px; height: 46px; }

@media (pointer: coarse) {
  .bk-time { height: 48px; }
  .bk-textbtn { padding-block: 10px; }
}
@media (max-width: 767px) {
  .book { min-height: 100svh; } /* short states keep the footer below the first screen */
.book-card { min-height: 0; }
  .book .lede { margin-bottom: 28px; }
  .bk-days { gap: 6px; }
  .bk-day { height: 54px; }
  .bk-part-times { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
  .bk-bar .btn { flex: 1 1 100%; }
  .bk-when-row, .bk-meet { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .bk-skel-when span { height: 122px; } /* the stacked phone card: label, date, time, zone */
  .bk-state > .bk-title { font-size: 24px; }
  .bk-actions .btn { flex: 1 1 auto; }
}
@media (max-width: 767px) {
  /* phones: the choice and Continue stay in reach while the times scroll */
  .bk-bar { position: sticky; bottom: 0; z-index: 2; margin-inline: calc(-1 * clamp(22px, 3vw, 36px)); padding: 14px clamp(22px, 3vw, 36px) 16px; background: var(--surface-card); }
  .bk-bar::before { inset: 0 0 auto; }
}
@media (max-width: 419px) {
  .bk-day-count { display: none; }
  .bk-day { height: 46px; }
  .bk-day-num { font-size: 17px; }
}

/* Round 2: field help, submit messages, the optional tag, phone and tablet flow */
.book .cf-field em { font: 400 12.5px/1 "Geist", system-ui, sans-serif; color: var(--muted); }
.cf-help { font-size: 13px; line-height: 1.4; color: hsl(350 85% 72%); }
.cf-help[hidden] { display: none; }
.cf-count { font: 400 12px/1 var(--mono); color: var(--telemetry); justify-self: end; }
.bk-submit-msg { display: grid; gap: 8px; margin-top: -4px; outline: none; }
.bk-submit-msg[hidden] { display: none; }
.bk-submit-msg .cf-status { margin: 0; }
.bk-alt-links { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14.5px; }
.bk-alt-links[hidden], .bk-alt-links a[hidden] { display: none; }
.bk-alt-links a { color: var(--mint); text-underline-offset: 3px; }
.bk-nobreak { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
.bk-choice { min-width: 0; }
@media (min-width: 768px) {
  .bk-bar { flex-wrap: nowrap; }
  .bk-bar .btn { flex: none; }
}
/* Tablets read like phones: the card straight after the lede, full width, steps below it */
@media (max-width: 960px) {
  .book .contact-copy, .book .bk-copy:not([hidden]) { display: contents; }
  .book .contact-grid { gap: 0; }
  .book .lede { margin-bottom: 28px; }
  .book .contact-next { order: 1; margin-top: 36px; }
  .book .contact-alt { order: 2; }
  .book .contact-card { max-width: none; }
}
@media (max-width: 767px) {
  /* one rule for every state: actions are full width on phones */
  .book-card .btn { width: 100%; }
  .book .cf-foot { display: grid; justify-items: stretch; }
  .bk-when-tz { width: 100%; }
}
.book .cf-field { align-content: start; } /* a help line under one field of a row must not push its neighbour down */

/* Signup (/signup): the booking pages' two columns. The copy and the live price panel sit on the
   left (sticky on desktop), the step card on the right: a numbered rail, one step at a time,
   Back and Continue under a hairline. Controls reuse the contact form (.cform, .cf-chips) and
   the landing pricing pieces (.stepper, .cur). DESIGN.md "Signup form". */
.signup { min-height: 100svh; }
.signup .cf-field em { font: 400 12.5px/1 "Geist", system-ui, sans-serif; color: var(--muted); }
.signup .cf-field { align-content: start; }
.su-card { display: grid; gap: 24px; align-content: start; scroll-margin-top: 80px; }
.su-cap { font: 800 11px/1.2 "Geist", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: hsl(210 14% 68%); }
.su-hint { font-size: 13px; line-height: 1.45; color: var(--muted); }
.su-hint a { color: var(--mint); text-underline-offset: 3px; }
.su-noscript { color: var(--muted); }
.su-noscript a { color: var(--mint); }

/* The price panel: plan, connectors, the price for the interval, then the VAT line */
.su-price { display: grid; gap: 4px; margin-top: 36px; max-width: 440px; padding: 20px 22px 18px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px hsl(223 20% 20%); }
.su-price[hidden] { display: none; }
.su-price-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.su-price-units { font: 500 12px/1.2 var(--mono); color: var(--muted); text-align: right; }
.su-price-name { margin-top: 10px; font-size: 18px; font-weight: 620; letter-spacing: -.02em; color: var(--fg-strong); }
.su-price-amount { color: var(--muted); font-size: 15px; }
.su-price-amount:has(b:empty) { display: none; }
.su-price-amount b { color: var(--mint); font-size: 34px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-right: 2px; }
.su-price-sub { color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.su-vat { position: relative; margin-top: 14px; padding-top: 14px; color: var(--fg); font-size: 14px; line-height: 1.5; text-wrap: pretty; }
.su-vat::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: hsl(223 20% 20%); }
.su-price-fine { margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.45; }

/* The rail: a dot per step joined by a track; done steps are clickable */
.su-rail { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.su-rail[hidden] { display: none; }
.su-rail li { position: relative; }
.su-rail li:not(:last-child)::after { content: ""; position: absolute; top: 12px; left: 36px; right: 10px; height: 2px; border-radius: 1px; background: hsl(223 20% 20%); transition: background-color .2s var(--ease-out); }
.su-rail li.is-done:not(:last-child)::after { background: hsl(158 100% 45% / .5); }
.su-rail-btn { all: unset; box-sizing: border-box; display: grid; justify-items: start; gap: 8px; padding: 0 4px 2px 0; border-radius: var(--r); cursor: pointer; }
.su-rail-btn:disabled { cursor: default; }
.su-rail-btn:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
.su-rail-dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 500 12px/1 var(--mono); color: var(--muted); background: var(--chip); box-shadow: inset 0 0 0 1px hsl(223 20% 24%); transition: background-color .2s var(--ease-out), box-shadow .2s var(--ease-out), color .2s var(--ease-out); }
.su-rail-label { font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--muted); }
.su-rail li.is-now .su-rail-dot { background: var(--mint); color: var(--mint-ink); box-shadow: 0 0 0 4px hsl(160.3 100% 44.9% / .15); }
.su-rail li.is-now .su-rail-label { color: var(--fg-strong); }
.su-rail li.is-done .su-rail-dot { position: relative; font-size: 0; background: hsl(158 100% 45% / .14); box-shadow: inset 0 0 0 1px hsl(158 100% 45% / .5); }
.su-rail li.is-done .su-rail-dot::before { content: ""; width: 10px; height: 5px; border: solid var(--mint); border-width: 0 0 2px 2px; transform: translate(1px, 1px) rotate(-45deg); }
.su-rail li.is-done .su-rail-label { color: var(--fg); }
.su-rail-btn:not(:disabled):hover .su-rail-label { color: var(--fg-strong); }
.su-rail-btn:not(:disabled):hover .su-rail-dot { box-shadow: inset 0 0 0 1px var(--mint); }

/* A step: title and one line, then its fields; groups inside Billing sit under a hairline */
.su-form { gap: 24px; }
.su-form[hidden] { display: none; }
.su-step { display: grid; gap: 20px; min-width: 0; }
.su-step[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .su-step:not([hidden]) { animation: bk-in .32s var(--ease-out); }
}
.su-step-head { display: grid; gap: 4px; }
.su-step-head h2 { outline: none; }
.su-step-head p { color: var(--muted); font-size: 15px; }
.su-group { position: relative; display: grid; gap: 18px; min-width: 0; padding-top: 22px; }
.su-group::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: hsl(223 20% 18%); }
.su-step-head + .su-group { padding-top: 4px; }
.su-step-head + .su-group::before { display: none; }
.su-group-note { margin-top: -8px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.su-sub { display: grid; gap: 16px; padding-left: 16px; box-shadow: inset 1px 0 0 hsl(223 20% 24%); }
.su-form [hidden] { display: none; } /* fields shown by an answer: [hidden] must beat .cf-field's grid */
.su-narrow { max-width: 240px; }
.su-mini > span { font-size: 13px; color: var(--muted); }
.su-address { display: grid; gap: 12px; }

/* Native selects drawn as the site's field, with a drawn chevron */
.su-select { position: relative; display: block; }
.su-select::after { content: ""; position: absolute; right: 17px; top: 50%; width: 7px; height: 7px; border: solid var(--muted); border-width: 0 1.5px 1.5px 0; transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.cform select {
  appearance: none; width: 100%; padding: 12px 42px 12px 14px; border: 0; border-radius: var(--r); background: var(--surface); color: var(--fg-strong); cursor: pointer;
  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 select:hover { box-shadow: inset 0 0 0 1px hsl(223 20% 30%); }
.cform select:focus { outline: none; box-shadow: inset 0 0 0 1px var(--mint), 0 0 0 3px hsl(158 100% 45% / .15); }
.cform select:has(option[value=""]:checked) { color: var(--telemetry); }
.cform select option { background: var(--surface-card); color: var(--fg-strong); }

/* The searchable picker over a select (site/assets/combobox.js): the site's version of the
   dashboard combobox (DESIGN.md "Combobox family"). A button in the field recipe shows the value
   (a flag and the name for countries); the popup is the popover surface with a search box over the
   list. Highlight is the hairline fill, the chosen row mint with a drawn check. */
.cbx { position: relative; display: block; min-width: 0; }
.su-select:has(.cbx)::after { content: none; }
.cbx-native { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 0; pointer-events: none; }
.cbx-trigger {
  position: relative; display: flex; align-items: center; width: 100%; min-height: 46px; padding: 12px 42px 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; text-align: left; cursor: pointer;
  box-shadow: inset 0 0 0 1px hsl(223 20% 22%); transition: box-shadow .15s ease;
}
.cbx-trigger::after { content: ""; position: absolute; right: 17px; top: 50%; width: 7px; height: 7px; border: solid var(--muted); border-width: 0 1.5px 1.5px 0; transform: translateY(-70%) rotate(45deg); transition: transform .2s var(--ease-out); pointer-events: none; }
.cbx.is-open .cbx-trigger::after { transform: translateY(-25%) rotate(-135deg); }
.cbx-trigger:hover { box-shadow: inset 0 0 0 1px hsl(223 20% 30%); }
.cbx-trigger:focus { outline: none; }
.cbx-trigger:focus-visible, .cbx.is-open .cbx-trigger { box-shadow: inset 0 0 0 1px var(--mint), 0 0 0 3px hsl(158 100% 45% / .15); }
.cbx-trigger[aria-invalid=true] { box-shadow: inset 0 0 0 1px var(--crimson); }
.cbx-trigger[aria-invalid=true]:focus-visible { box-shadow: inset 0 0 0 1px var(--crimson), 0 0 0 3px hsl(350 85% 60% / .15); }
.cbx-trigger:disabled { opacity: .6; cursor: not-allowed; }
.cbx-value { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.cbx-value-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbx-placeholder { color: var(--telemetry); }
.cbx-flag { flex: none; width: 18px; height: 13.5px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px hsl(223 20% 24%); background: hsl(223 20% 18%); }

.cbx-pop {
  position: absolute; z-index: 20; top: calc(100% + 6px); left: var(--cbx-x, 0px); width: 100%; min-width: min(16rem, var(--cbx-maxw, 100vw)); max-width: min(calc(100vw - 24px), var(--cbx-maxw, 100vw));
  display: flex; flex-direction: column; max-height: var(--cbx-room, 380px); overflow: hidden; border-radius: 8px;
  background: var(--surface-card); color: var(--fg); box-shadow: 0 0 0 1px hsl(223 20% 22%), 0 18px 50px hsl(210 55% 2% / .7);
}
.cbx-pop[hidden] { display: none; }
.cbx.is-up .cbx-pop { top: auto; bottom: calc(100% + 6px); }
@media (prefers-reduced-motion: no-preference) {
  .cbx-pop:not([hidden]) { animation: cbx-in .12s ease-out; }
  .cbx.is-up .cbx-pop:not([hidden]) { animation-name: cbx-in-up; }
}
@keyframes cbx-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes cbx-in-up { from { opacity: 0; transform: translateY(4px); } }
.cbx-search { position: relative; flex: none; display: flex; align-items: center; padding: 0 12px 0 36px; box-shadow: inset 0 -1px 0 hsl(223 20% 18%); transition: box-shadow .15s; }
.cbx-search:focus-within { box-shadow: inset 0 -1px 0 var(--mint); }
/* a drawn magnifier: a ring and its handle */
.cbx-search::before { content: ""; position: absolute; left: 13px; top: 50%; width: 9px; height: 9px; border: 1.5px solid hsl(210 14% 68%); border-radius: 50%; transform: translateY(-62%); }
.cbx-search::after { content: ""; position: absolute; left: 23px; top: 50%; width: 5px; height: 1.5px; border-radius: 1px; background: hsl(210 14% 68%); transform: translate(-1px, 3px) rotate(45deg); }
.cform .cbx .cbx-search .cbx-q, .cbx .cbx-search .cbx-q {
  width: 100%; height: 42px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none;
  color: var(--fg-strong); font: 400 16px/1.4 "Geist", system-ui, sans-serif;
}
.cbx .cbx-q::placeholder { color: var(--telemetry); }
@media (pointer: fine) { .cform .cbx .cbx-search .cbx-q, .cbx .cbx-search .cbx-q { height: 38px; font-size: 14px; } }
.cbx-list { flex: 1 1 auto; min-height: 0; max-height: 22rem; overflow-y: auto; padding: 4px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: hsl(223 20% 26%) transparent; }
.cbx-list[hidden], .cbx-group[hidden], .cbx-item[hidden] { display: none; }
.cbx-group-label { padding: 9px 8px 4px; font: 600 12px/1.3 "Geist", sans-serif; color: var(--muted); }
.cbx-group + .cbx-group { margin-top: 2px; }
.cbx-item { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 32px 8px 8px; border-radius: 6px; font-size: 14px; line-height: 1.35; color: var(--fg); cursor: pointer; user-select: none; }
.cbx-item.is-active { background: hsl(223 20% 18%); color: var(--fg-strong); }
.cbx-item.is-selected, .cbx-item.is-selected.is-active { color: var(--mint); }
.cbx-item.is-selected::after { content: ""; position: absolute; right: 12px; top: 50%; width: 9px; height: 5px; border: solid var(--mint); border-width: 0 0 2px 2px; transform: translateY(-70%) rotate(-45deg); }
.cbx-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbx-item-meta { flex: none; font: 500 12px/1 var(--mono); color: hsl(210 14% 68%); }
.cbx-item.is-selected .cbx-item-meta { color: hsl(160.3 100% 44.9% / .85); }
/* Country rows wrap a long name ("United States Minor Outlying Islands") instead of cutting it,
   and the list is a little wider than a half-width field */
.cbx-countries .cbx-pop { min-width: min(20rem, var(--cbx-maxw, 100vw)); }
.cbx-countries .cbx-item { align-items: flex-start; }
.cbx-countries .cbx-item .cbx-flag { margin-top: 3px; }
.cbx-countries .cbx-item-name { white-space: normal; overflow: visible; text-overflow: clip; text-wrap: pretty; }
.cbx-empty { padding: 18px 12px; text-align: center; font-size: 14px; color: hsl(210 14% 68%); }
.cbx-empty:empty { display: none; }
@media (pointer: coarse) { .cbx-item { padding-block: 11px; } }

/* Chip groups and the plan group: an invalid group rings its choices, not the fieldset */
.cform fieldset[aria-invalid=true], .cform .su-group[aria-invalid=true] { box-shadow: none !important; }
.cform [aria-invalid=true] .cf-chips span, .cform [aria-invalid=true] .su-plan { box-shadow: inset 0 0 0 1px var(--crimson); }
/* Systems and destination: choice tiles, the dashboard's connector tile without its blurb (DESIGN.md
   "Choice tiles"). A 6px tile about 44px tall on the hairline ring, three columns (two on a phone);
   a 24px logo box at 4px (the dashboard's .sb-connector-logo: mint tint, the mark painted mint
   through a mask, or a Geist monogram); the name; and a drawn 15px checkbox, or a radio dot for the
   destination, at the right. Chosen is the mint tint and ring, the box solid mint. The native input
   covers the tile. Other and Not sure yet carry a neutral glyph and a muted name. */
.su-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.su-opt { position: relative; display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 8px 10px 8px 9px; border-radius: var(--r);
  background: var(--chip); box-shadow: inset 0 0 0 1px hsl(223 20% 21%); cursor: pointer;
  transition: background-color .15s var(--ease-out), box-shadow .15s var(--ease-out); }
.cform .su-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.su-opt:hover { background: var(--surface-hover); box-shadow: inset 0 0 0 1px hsl(223 20% 30%); }
.su-opt:active { transform: translateY(1px); }
.su-opt-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 500; line-height: 1.25; color: var(--fg); }
.su-opt.is-quiet .su-opt-name { color: var(--muted); }
.su-opt-box { flex: none; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 4px; background: var(--chip); box-shadow: inset 0 0 0 1px hsl(223 20% 32%); }
.su-opt:has(input[type=radio]) .su-opt-box { border-radius: 50%; }
.su-opt:has(input:checked) { background: hsl(158 100% 45% / .10); box-shadow: inset 0 0 0 1px hsl(158 100% 45% / .5); }
.su-opt:has(input:checked) .su-opt-name { color: var(--fg-strong); }
.su-opt:has(input:checked) .su-opt-box { background: var(--mint); box-shadow: none; }
.su-opt:has(input[type=checkbox]:checked) .su-opt-box::before { content: ""; width: 8px; height: 4.5px; border: solid var(--mint-ink); border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
.su-opt:has(input[type=radio]:checked) .su-opt-box::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mint-ink); }
.su-opt:has(input:focus-visible) { outline: 2px solid var(--mint); outline-offset: 2px; }
.cform [aria-invalid=true] .su-opt { box-shadow: inset 0 0 0 1px var(--crimson); }
.su-logo { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 4px; font: 700 10.5px/1 "Geist", sans-serif; font-style: normal; letter-spacing: .02em; color: var(--mint); background: hsl(158 100% 45% / .10); box-shadow: inset 0 0 0 1px hsl(158 100% 45% / .25); }
.su-logo[data-logo]::before { content: ""; width: 14px; height: 14px; background: var(--mint); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat var(--mm, alpha); }
.su-logo[data-glyph] { position: relative; color: var(--muted); background: hsl(223 20% 18%); box-shadow: inset 0 0 0 1px hsl(223 20% 26%); }
.su-opt:has(input:checked) .su-logo[data-glyph] { color: var(--mint); }
.su-logo[data-glyph=unsure]::before { content: "?"; font: 650 12px/1 "Geist", sans-serif; }
.su-logo[data-glyph=other]::before, .su-logo[data-glyph=other]::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; border-radius: 1px; background: currentColor; transform: translate(-50%, -50%); }
.su-logo[data-glyph=other]::after { transform: translate(-50%, -50%) rotate(90deg); }
.su-opt-skel { display: block; height: 44px; border-radius: var(--r); background: linear-gradient(90deg, hsl(223 22% 12%) 0%, hsl(223 22% 16%) 50%, hsl(223 22% 12%) 100%) 0 0 / 200% 100%; }
@media (max-width: 767px) { .su-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .su-opt { gap: 8px; } }
[data-logo="catapult"] { --m: url("/brand/catapult.svg"); } [data-logo="kitman_labs"] { --m: url("/brand/kitman_labs.svg"); }
[data-logo="skillcorner"] { --m: url("/brand/skillcorner.svg"); } [data-logo="second_spectrum"] { --m: url("/brand/second_spectrum.svg"); }
[data-logo="postgresql"] { --m: url("/brand/postgresql.svg"); }
[data-logo="databricks"], [data-logo="lakebase"] { --m: url("/brand/databricks.svg"); } [data-logo="snowflake"] { --m: url("/brand/snowflake.svg"); }
[data-logo="bigquery"] { --m: url("/brand/bigquery.svg"); } [data-logo="duckdb"] { --m: url("/brand/duckdb.svg"); }
[data-logo="google_sheets"] { --m: url("/brand/google_sheets.svg"); } [data-logo="s3"] { --m: url("/brand/s3-mask.svg"); --mm: luminance; }

/* Plan tiles: choice tiles, the chosen one in the mint tint (DESIGN.md 5.3) */
.su-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.su-plan { position: relative; display: block; padding: 14px 16px; border-radius: 8px; background: var(--surface); box-shadow: inset 0 0 0 1px hsl(223 20% 20%); cursor: pointer; transition: background-color .15s var(--ease-out), box-shadow .15s var(--ease-out); }
.cform .su-plan input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.su-plan:hover { background: var(--surface-hover); box-shadow: inset 0 0 0 1px hsl(223 20% 30%); }
.su-plan:has(input:checked) { background: hsl(158 100% 45% / .10); box-shadow: inset 0 0 0 1px hsl(158 100% 45% / .5); }
.su-plan:has(input:focus-visible) { outline: 2px solid var(--mint); outline-offset: 2px; }
.su-plan:active { transform: translateY(1px); }
.su-plan-body { display: grid; gap: 4px; }
.su-plan-name { font-size: 15.5px; font-weight: 620; letter-spacing: -.01em; color: var(--fg-strong); }
.su-plan:has(input:checked) .su-plan-name { color: var(--mint); }
.su-plan-price { color: var(--muted); font-size: 14px; }
.su-plan-price b { font: 600 16px/1.2 var(--mono); color: var(--fg-strong); font-variant-numeric: tabular-nums; }
.su-plan-units { font: 500 12px/1.3 var(--mono); color: var(--muted); }
.su-plan-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.su-stepper { gap: 10px; }
.su-stepper[hidden] { display: none; }
.su-stepper span { margin-right: 6px; font: 500 14px/1.2 "Geist", sans-serif; color: var(--fg); }
/* The interval and currency pills take the chip "selected" recipe in the form, so the Continue
   button stays the only solid mint element on the Billing step (the landing keeps its solid pill) */
.signup .cur button[aria-pressed="true"] { color: var(--mint); background: hsl(158 100% 45% / .10); box-shadow: inset 0 0 0 1px hsl(158 100% 45% / .5); }
.su-toggles { display: flex; flex-wrap: wrap; gap: 10px; }
.su-count { display: grid; gap: 4px; margin-top: 4px; }
.su-count[hidden] { display: none; }
.su-count:focus-visible { outline: 2px solid var(--mint); outline-offset: 6px; border-radius: 6px; }
.su-count-line { font-size: 14px; line-height: 1.45; color: var(--fg); }
.su-count-line b { font: 600 14px/1.45 var(--mono); color: var(--fg-strong); font-variant-numeric: tabular-nums; }
.su-count[aria-invalid="true"] .su-count-line b { color: hsl(350 85% 72%); }

/* Ticks: the site's drawn checkbox, mint when ticked */
.su-tick { display: flex; align-items: flex-start; gap: 12px; color: var(--fg); font-size: 15px; line-height: 1.45; cursor: pointer; }
.su-tick > span { display: grid; gap: 2px; }
.cform .su-tick input {
  appearance: none; flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin: 2px 0 0; padding: 0; border-radius: 4px; cursor: pointer;
  background: var(--chip); box-shadow: inset 0 0 0 1px hsl(223 20% 32%); transition: background-color .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
.cform .su-tick input:hover { box-shadow: inset 0 0 0 1px hsl(223 20% 42%); }
.cform .su-tick input:focus { outline: none; }
.cform .su-tick input:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.cform .su-tick input:checked { background: var(--mint); box-shadow: none; }
.cform .su-tick input:checked::before { content: ""; width: 9px; height: 5px; border: solid var(--mint-ink); border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
.su-ticks { display: grid; gap: 12px; }
.su-ticks .cf-help { margin: -6px 0 0 30px; }

/* Terms: each document folds open in a recessed, scrollable well */
.su-docs { display: grid; gap: 10px; }
.su-docs[hidden], .su-docs-error[hidden] { display: none; }
.su-doc { border-radius: 8px; background: var(--surface); box-shadow: inset 0 0 0 1px hsl(223 20% 20%); }
.su-doc summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 14px 44px 14px 16px; position: relative; list-style: none; border-radius: 8px; cursor: pointer; }
.su-doc summary::-webkit-details-marker { display: none; }
.su-doc summary::after { content: ""; position: absolute; right: 18px; top: 20px; width: 7px; height: 7px; border: solid var(--muted); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .2s var(--ease-out); }
.su-doc[open] summary::after { transform: translateY(3px) rotate(-135deg); }
.su-doc summary:hover .su-doc-title { color: var(--mint); }
.su-doc summary:focus-visible { outline: 2px solid var(--mint); outline-offset: -2px; }
.su-doc-title { font-size: 15px; font-weight: 600; color: var(--fg-strong); transition: color .15s var(--ease-out); }
.su-doc-ver { font: 500 12px/1 var(--mono); color: var(--muted); }
.su-doc-tag { font: 500 11.5px/1 var(--mono); color: hsl(38 95% 62%); padding: 3px 8px; border-radius: 99px; background: hsl(38 95% 52% / .10); box-shadow: inset 0 0 0 1px hsl(38 95% 52% / .35); }
.su-doc-body { display: grid; gap: 10px; max-height: 280px; overflow: auto; margin: 0 6px 6px; padding: 4px 10px 12px; border-radius: 6px; color: var(--fg); font-size: 14.5px; line-height: 1.6; scrollbar-width: thin; }
.su-doc-body:focus-visible { outline: 2px solid var(--mint); outline-offset: -2px; }
.su-doc-skel { height: 52px; border-radius: 8px; }
.su-docs-error { display: grid; justify-items: start; gap: 10px; }
.su-docs-error .cf-status { margin: 0; }
.su-docs-error .btn { border: 0; font-family: inherit; cursor: pointer; }
.su-draft { font-size: 14px; }
.su-when { display: grid; gap: 6px; padding: 14px 16px; border-radius: 8px; background: var(--surface); box-shadow: inset 0 0 0 1px hsl(223 20% 20%); color: var(--muted); font-size: 14px; line-height: 1.5; }
.su-when p + p { color: var(--fg); }

/* Back and Continue under a hairline */
.su-foot { position: relative; display: flex; align-items: center; gap: 12px 20px; padding-top: 20px; margin-top: 4px; }
.su-foot::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: hsl(223 20% 18%); }
.su-foot .btn { margin-left: auto; }
.su-foot .btn:disabled { background: var(--chip); color: var(--muted); box-shadow: none; opacity: 1; cursor: not-allowed; }
.su-foot .bk-textbtn[hidden] { display: none; }
.su-status { margin-top: -12px; }

/* Loading: the card's own shape */
.su-skel-fields { display: grid; gap: 14px; }
.su-skel-fields span { display: block; height: 48px; border-radius: var(--r); background: linear-gradient(90deg, hsl(223 22% 12%) 0%, hsl(223 22% 16%) 50%, hsl(223 22% 12%) 100%) 0 0 / 200% 100%; }
@media (prefers-reduced-motion: no-preference) {
  .su-opt-skel, .su-skel-fields span { animation: bk-shimmer 1.4s var(--ease-io) infinite; }
}

@media (pointer: coarse) {
  .signup .cf-chips span { padding: 11px 16px; }
  .su-opt { min-height: 48px; }
  .cform .su-tick input { width: 22px; height: 22px; margin-top: 0; }
  .su-ticks .cf-help { margin-left: 34px; }
}
@media (max-width: 960px) {
  .signup .contact-card, .su-price { max-width: none; }
  .su-price { margin-top: 28px; }
}
@media (max-width: 767px) {
  .signup .lede { margin-bottom: 28px; }
  /* phones: the form straight after the lede; the price panel follows the card */
  .signup .contact-card { order: 1; }
  .su-price { order: 2; margin: 28px 0 0; padding: 16px 18px; }
  .su-price-amount b { font-size: 30px; }
  .su-foot { flex-direction: column-reverse; align-items: stretch; }
  .su-foot .btn { width: 100%; margin-left: 0; }
  .su-foot .bk-textbtn { align-self: center; }
  .su-plan-tools { align-items: flex-start; }
  .su-narrow { max-width: none; }
  .signup .bk-actions .btn { width: 100%; }
}

/* Signup, step 5 and the outcomes (T34). The rail grows to five dots (Call); the slot step is
   the booking picker and choice bar inside the step card, with its own action and a Back text
   button in its head, so the form footer steps aside. When booking cannot offer a time the
   picker gives way to a calendar mark, one line and "Continue without a time". The same parts
   build /signup-confirm, which wears the booking pages' frame. DESIGN.md "Signup form". */
.su-rail { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.su-slot > .bk-head { align-items: flex-start; flex-wrap: nowrap; }
.su-slot > .bk-head .bk-textbtn { flex: none; }
.su-slot-loading, .su-slot-pick, .su-slot-off { display: grid; gap: 18px; min-width: 0; }
.su-slot-loading[hidden], .su-slot-pick[hidden], .su-slot-off[hidden], .bk-when[hidden], .bk-submit-msg[hidden] { display: none; }
.su-slot-off { justify-items: start; gap: 14px; padding-top: 4px; }
.su-slot-off h3 { font-size: 20px; letter-spacing: -.02em; line-height: 1.2; text-wrap: balance; }
.su-slot-off > p:not(.bk-mark) { color: var(--muted); max-width: 52ch; }
.su-slot-off .bk-bar, .su-slot-off .bk-actions { justify-self: stretch; }
/* The Call step: a tighter picker inside the step card, and the choice bar sticky at the foot of
   the viewport at every width, so "Send application" is in reach without scrolling */
@media (min-width: 768px) and (pointer: fine) { .su-slot .bk-day { height: 50px; } .su-slot .bk-time { height: 38px; } }
.su-slot .bk-bar { position: sticky; bottom: 0; z-index: 2; margin-inline: calc(-1 * clamp(22px, 3vw, 36px)); padding: 16px clamp(22px, 3vw, 36px); background: var(--surface-card); }
.su-slot .btn:disabled, .signup-confirm .btn:disabled { background: var(--chip); color: var(--muted); box-shadow: none; opacity: 1; cursor: not-allowed; transform: none; }
.su-slot .btn-primary.is-busy:disabled, .signup-confirm .btn-primary.is-busy:disabled { background: hsl(160.3 100% 44.9% / .7); color: var(--mint-ink); cursor: progress; }
.su-slot .bk-submit-msg { margin-top: 0; }
/* The zone beside the month is a picker (T45): "Times in" then a compact field with the zone in mono
   and its offset, opening the zone list. Same combobox as the country fields, sized to a label. */
.su-tz { display: flex; align-items: center; gap: 8px; min-width: 0; }
.su-tz span:not(.cbx-item-meta) { font: inherit; color: inherit; } /* undo .bk-tz span, which styles the plain zone line */
.su-tz span.su-tz-label { flex: none; font-size: 13px; color: var(--muted); }
.cbx-inline { display: inline-block; min-width: 0; }
.cbx-inline .cbx-trigger { min-height: 32px; width: auto; max-width: 100%; padding: 5px 30px 5px 10px; font-size: 13px; line-height: 1.4; }
.cbx-inline .cbx-trigger::after { right: 12px; width: 6px; height: 6px; }
.cbx-inline .cbx-value { gap: 8px; }
.su-tz span.su-tz-id { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 12.5px/1.4 var(--mono); color: var(--fg); }
.su-tz span.su-tz-off { flex: none; font: 400 12px/1.4 var(--mono); color: var(--muted); }
.cbx-inline .cbx-pop { width: 22rem; }
.su-tz .cbx-pop { text-align: left; }
@media (pointer: coarse) { .cbx-inline .cbx-trigger { min-height: 40px; } }

/* /signup-confirm: one state at a time in the booking card */
.signup h1, .signup-confirm h1 { text-wrap: balance; } /* no one-word last line ("in.", "club.") */
.su-lead { color: var(--muted); font-size: 15px; line-height: 1.5; max-width: 52ch; }
.signup-confirm .su-ticks { gap: 12px; }
.signup-confirm .su-when { margin: 0; }
.signup-confirm [data-view="pick"] > .bk-title { margin-bottom: -4px; }

@media (max-width: 419px) {
  .su-rail-label { font-size: 12px; }
  .su-rail li:not(:last-child)::after { left: 32px; right: 4px; }
}
@media (max-width: 767px) {
  .su-slot > .bk-head { flex-wrap: wrap; }
  .su-slot-off .btn, .signup-confirm .bk-actions .btn { width: 100%; }
  /* nothing scrolls under the no-times panel, so its bar stays in the flow */
  .su-slot-off .bk-bar { position: relative; margin-inline: 0; padding: 20px 0 0; background: none; }
}