/* SpaceCell site design system.
   Navy-black surfaces, brand gold as the single accent, Merriweather headings,
   Open Sans body text and Fira Code for data, code and labels. Colour and
   type values come from the Premium theme in theme.css. */

@import url('theme.css');

:root {
  --bg: var(--sc-navy-black);
  --bg-raised: var(--sc-midnight);
  --bg-card: var(--sc-slate);
  --bg-inset: var(--sc-abyss);
  --line: var(--sc-hairline);
  --line-strong: var(--sc-rule);

  --ink: var(--sc-text-primary);
  --ink-2: var(--sc-text-body);
  --ink-3: var(--sc-text-muted);

  --gold: var(--sc-gold);
  --gold-hover: var(--sc-gold-light);
  --gold-soft: var(--sc-gold-wash);
  --navy: var(--sc-navy);
  --navy-deep: var(--sc-navy-deep);
  --deep-navy: var(--sc-deep-navy);
  --ink-navy: var(--sc-ink-navy);

  --series-1: var(--sc-series-gold);
  --series-1-deep: var(--sc-series-gold-deep);
  --series-2: var(--sc-series-blue);
  --diverging-mid: var(--sc-diverging-mid);
  --line-tint: var(--sc-line-tint);
  --on-accent: var(--sc-on-accent);
  --code-keyword: var(--sc-code-keyword);
  --code-type: var(--sc-code-type);
  --code-string: var(--sc-code-string);
  --up: var(--sc-signal-green);
  --down: var(--sc-signal-red);

  --serif: var(--sc-serif);
  --sans: var(--sc-sans);
  --mono: var(--sc-mono);

  --frame: 1408px;
  --pad: 48px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, video, canvas { display: block; }
::selection { background: var(--gold); color: var(--bg); }

h1, h2, h3 { font-family: var(--serif); color: var(--ink); font-weight: 700; letter-spacing: -0.015em; }
h1 { font-size: clamp(2.6rem, 4.6vw, 4.25rem); line-height: 1.1; }
h2 { font-size: clamp(2rem, 3.4vw, 3.1rem); line-height: 1.15; }
h3 { font-size: 1.3rem; line-height: 1.35; }
.accent { color: var(--gold); }
p.lead { font-size: 1.2rem; line-height: 1.6; color: var(--ink-2); max-width: 36em; }

/* ── Frame ──
   Pages sit inside a fixed-width frame with hairline edges. Sections are
   separated by hairline rules and ruler bands rather than background changes. */
.frame {
  max-width: var(--frame);
  margin: 0 auto;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  position: relative;
}
.section { border-bottom: 1px solid var(--line); position: relative; }
.pad { padding: 112px var(--pad); }
.pad-sm { padding: 72px var(--pad); }
.center { text-align: center; }
.center p.lead { margin-left: auto; margin-right: auto; }

/* Ruler band: chart-axis tick marks with a gold major tick every 120px. */
.ruler {
  height: 64px;
  border-bottom: 1px solid var(--line);
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--gold) 45%, transparent) 0 1px, transparent 1px 120px) left bottom / 100% 22px no-repeat,
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--line-tint) 22%, transparent) 0 1px, transparent 1px 12px) left bottom / 100% 9px no-repeat;
}

/* ── Labels ── */
.label {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-block;
  margin-bottom: 22px;
}
.label .num { color: var(--ink-3); margin-right: 10px; }

/* ── Buttons ──
   The gold rule under each button extends across the full width on hover. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 15px 26px;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  transition: border-color 0.25s, background 0.25s, color 0.25s;
  cursor: pointer;
}
.btn::after {
  content: '';
  position: absolute;
  left: -1px; bottom: -1px;
  width: 28px; height: 2px;
  background: var(--gold);
  transition: width 0.35s ease;
}
.btn:hover { border-color: color-mix(in srgb, var(--gold) 50%, transparent); }
.btn:hover::after { width: calc(100% + 2px); }
.btn .arrow { font-family: var(--mono); color: var(--gold); transition: transform 0.25s; }
.btn:hover .arrow { transform: translateX(3px); }
.btn.primary { background: var(--gold); color: var(--on-accent); border-color: var(--gold); }
.btn.primary::after { display: none; }
.btn.primary .arrow { color: var(--on-accent); }
.btn.primary:hover { background: var(--gold-hover); border-color: var(--gold-hover); }
.btn.small { padding: 10px 18px; font-size: 0.86rem; }
.actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 40px; }
.center .actions { justify-content: center; }

/* ── Announcement bar ── */
.announce {
  background: linear-gradient(90deg, var(--ink-navy), var(--navy) 50%, var(--ink-navy));
  text-align: center;
  font-size: 0.88rem;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.announce a { color: var(--ink); display: inline-flex; align-items: center; gap: 12px; }
.announce a span { border-bottom: 1px solid color-mix(in srgb, var(--ink) 40%, transparent); }
.announce a:hover span { border-bottom-color: var(--gold); }
.announce .chip {
  width: 22px; height: 22px;
  display: inline-grid; place-items: center;
  background: var(--gold); color: var(--on-accent);
  font-family: var(--mono); font-size: 0.8rem;
}

/* ── Navigation ── */
nav.top {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--navy-deep) 97%, transparent);
  border-bottom: 1px solid var(--line);
}
nav.top .inner {
  max-width: var(--frame); margin: 0 auto;
  height: 80px;
  padding: 0 32px;
  display: flex; align-items: center; gap: 56px;
  border-left: 1px solid var(--line); border-right: 1px solid var(--line);
}
nav.top .logo { font-family: var(--serif); font-weight: 900; font-size: 25px; color: var(--ink); letter-spacing: -0.01em; }
nav.top .links { display: flex; gap: 34px; align-items: center; flex: 1; }
nav.top .links > a, nav.top .dropdown > span {
  color: var(--ink-2); font-size: 0.92rem; font-weight: 600; cursor: pointer; transition: color 0.2s;
}
nav.top .links > a:hover, nav.top .dropdown:hover > span { color: var(--ink); }
nav.top .dropdown { position: relative; }
nav.top .dropdown > span::after { content: '⌄'; margin-left: 7px; font-size: 0.8rem; position: relative; top: -3px; color: var(--ink-3); }
nav.top .menu {
  position: absolute; top: calc(100% + 18px); left: -20px;
  min-width: 280px;
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  padding: 10px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}
nav.top .dropdown::before { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 22px; }
nav.top .dropdown:hover .menu { opacity: 1; visibility: visible; transform: none; }
nav.top .menu a { display: block; padding: 10px 14px; font-size: 0.9rem; color: var(--ink-2); border-left: 2px solid transparent; }
nav.top .menu a:hover { color: var(--ink); border-left-color: var(--gold); background: color-mix(in srgb, var(--line-tint) 5%, transparent); }
nav.top .menu a.featured { color: var(--ink); }
nav.top .links a.current { color: var(--ink); }

/* ── Hero (split) ── */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.55;
}
.hero .veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--bg) 94%, transparent) 0%, color-mix(in srgb, var(--bg) 78%, transparent) 45%, color-mix(in srgb, var(--bg) 55%, transparent) 100%),
    linear-gradient(0deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 0%, transparent) 30%);
}
.hero .frame { display: grid; grid-template-columns: 1fr 1fr; min-height: 720px; }
.hero .copy { position: relative; padding: 120px var(--pad) 96px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--line); }
.hero .copy p.lead { margin-top: 28px; max-width: 30em; }
.hero .visual { position: relative; padding: 64px 40px; display: flex; align-items: center; justify-content: center; }

/* ── Live panels ── */
.panel {
  position: relative;
  width: 100%;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  border: 1px solid var(--line-strong);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(0, 0, 0, 0.4);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-2);
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.panel-head .title { color: var(--ink-2); }
.panel-head .title b { color: var(--ink); font-weight: 500; }
.live-pill { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 11px; letter-spacing: 0.12em; }
.live-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 0 color-mix(in srgb, var(--up) 60%, transparent); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--up) 55%, transparent); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.panel-foot {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 11px;
}
.panel-foot code { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sim-note { color: var(--ink-3); white-space: nowrap; }

/* Hero market panel */
.tickers { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.ticker { padding: 12px 14px; border-right: 1px solid var(--line); cursor: pointer; transition: background 0.2s; position: relative; }
.ticker:last-child { border-right: 0; }
.ticker:hover { background: color-mix(in srgb, var(--line-tint) 4%, transparent); }
.ticker.active { background: color-mix(in srgb, var(--gold) 6%, transparent); }
.ticker.active::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--gold); }
.ticker .sym { color: var(--ink); font-weight: 500; }
.ticker .px { color: var(--ink); font-size: 14px; margin-top: 4px; }
.ticker .chg { font-size: 11px; }
.ticker canvas { width: 100%; height: 26px; margin-top: 6px; }
.up { color: var(--up); }
.down { color: var(--down); }
.chart-wrap { position: relative; padding: 14px 16px 6px; }
.chart-wrap .chart-title { display: flex; justify-content: space-between; color: var(--ink-3); margin-bottom: 8px; }
.chart-wrap .chart-title b { color: var(--ink); font-weight: 500; }
.chart-wrap canvas { width: 100%; height: 200px; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.metric { padding: 12px 14px; border-right: 1px solid var(--line); }
.metric:last-child { border-right: 0; }
.metric .k { color: var(--ink-3); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; }
.metric .v { color: var(--ink); font-size: 17px; margin-top: 4px; transition: color 0.4s; }
.metric .v.flash { color: var(--gold); transition: none; }
.metric .v small { color: var(--ink-3); font-size: 11px; margin-left: 3px; }

/* Crosshair tooltip shared by line charts */
.tip {
  position: absolute; pointer-events: none;
  background: var(--bg-inset);
  border: 1px solid var(--line-strong);
  padding: 6px 9px;
  font-family: var(--mono); font-size: 11px; color: var(--ink);
  white-space: nowrap;
  opacity: 0; transition: opacity 0.15s;
  z-index: 3;
}
.tip span { color: var(--ink-3); }

/* ── Proof tiles ──
   A row of key figures. The active tile shows a gold progress rule and
   selects the statement shown beneath the row. */
.proof { border-bottom: 1px solid var(--line); }
.proof-tiles { display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 1px solid var(--line); }
.proof-tile {
  position: relative;
  padding: 30px 28px;
  border-right: 1px solid var(--line);
  cursor: pointer;
  transition: background 0.25s;
  text-align: left;
  background: none; border-top: 0; border-left: 0; border-bottom: 0;
  font: inherit; color: inherit;
}
.proof-tile:last-child { border-right: 0; }
.proof-tile:hover { background: color-mix(in srgb, var(--line-tint) 3.5%, transparent); }
.proof-tile .fig { font-family: var(--mono); font-size: 1.85rem; color: var(--ink); letter-spacing: -0.02em; line-height: 1.2; }
.proof-tile .cap { font-size: 0.86rem; color: var(--ink-3); margin-top: 6px; }
.proof-tile::before { content: ''; position: absolute; top: -1px; left: 0; height: 2px; width: 0; background: var(--gold); }
.proof-tile.active { background: color-mix(in srgb, var(--gold) 5%, transparent); }
.proof-tile.active .fig { color: var(--gold); }
.proof-tile.active::before { animation: tile-progress var(--cycle, 7s) linear forwards; }
.proof.paused .proof-tile.active::before { animation: none; width: 100%; }
@keyframes tile-progress { from { width: 0; } to { width: 100%; } }
.proof-stage { display: grid; grid-template-columns: 360px 1fr; min-height: 280px; }
.proof-stage .aside { border-right: 1px solid var(--line); padding: 44px 40px; display: flex; flex-direction: column; justify-content: space-between; }
.proof-stage .aside .big { font-family: var(--mono); font-size: 3.4rem; color: var(--gold); line-height: 1; letter-spacing: -0.03em; }
.proof-stage .aside .src { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.proof-stage .body { padding: 44px 56px; display: flex; flex-direction: column; justify-content: center; }
.proof-stage blockquote { font-family: var(--serif); font-size: 1.65rem; line-height: 1.45; color: var(--ink); max-width: 30em; }
.proof-stage .more { margin-top: 26px; font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.proof-stage .more:hover { color: var(--gold-hover); }
.proof-stage .swap { transition: opacity 0.35s, transform 0.35s; }
.proof-stage .swap.out { opacity: 0; transform: translateY(6px); }

/* ── Scroll-revealed statement ── */
.statement { padding: 150px var(--pad); text-align: center; }
.statement p {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(2rem, 3.6vw, 3.3rem);
  line-height: 1.25;
  color: var(--ink);
  letter-spacing: -0.015em;
}
.statement p.final { color: var(--gold); }
.statement p.quote { font-style: italic; font-weight: 400; font-size: clamp(1.7rem, 2.8vw, 2.6rem); max-width: 26em; margin: 0 auto; }
.statement p.who { font-family: var(--mono); font-weight: 400; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin: 26px 0 44px; }
.statement p.quote + p.who + p.final { font-style: italic; }
.reveal .w { opacity: 0.16; transition: opacity 0.25s linear; }
.reveal .w.on { opacity: 1; }

/* ── Live texture field ──
   Stands in the visual half of feature rows. A canvas of faint scrolling
   market traces sits behind the foreground panel. */
.field { position: relative; overflow: hidden; background: var(--bg-inset); }
.field > canvas.tape { position: absolute; inset: 0; width: 100%; height: 100%; }
.field::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--bg-inset) 0%, transparent) 30%, color-mix(in srgb, var(--bg-inset) 75%, transparent) 100%); }
.field > .panel, .field > .stack { position: relative; z-index: 1; }
.field.wide { padding: 80px 10%; }

/* ── Column grids ── */
.cols { display: grid; border-top: 1px solid var(--line); }
.cols.three { grid-template-columns: repeat(3, 1fr); }
.cols.four { grid-template-columns: repeat(4, 1fr); }
.cols.five { grid-template-columns: repeat(5, 1fr); }
.cols.five .col { padding: 40px 30px 48px; }
.cols.five h3 { font-size: 1.1rem; }
.col { padding: 44px 40px 52px; border-right: 1px solid var(--line); }
.col:last-child { border-right: 0; }
.col h3 { margin-bottom: 14px; }
.col p { font-size: 0.98rem; color: var(--ink-2); }
.col .ico { width: 34px; height: 34px; margin-bottom: 26px; color: var(--gold); }
.col .ico svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.5; }
.col .meta { font-family: var(--mono); font-size: 0.74rem; color: var(--ink-3); letter-spacing: 0.06em; margin-top: 20px; }

.section-head { padding: 112px var(--pad) 72px; }
.section-head.split { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: end; }
.section-head p.lead { margin-top: 22px; }

/* ── Centrepiece with surrounding cards ── */
.orbit { position: relative; padding: 40px var(--pad) 120px; }
.orbit .stage { position: relative; height: 640px; }
.orbit canvas.centre { position: absolute; inset: 0; width: 100%; height: 100%; }
.orbit .card {
  position: absolute; width: 330px;
  background: color-mix(in srgb, var(--bg-card) 92%, transparent);
  border: 1px solid var(--line);
  padding: 26px 28px;
  z-index: 1;
}
.orbit .card h3 { font-size: 1.08rem; margin-bottom: 10px; }
.orbit .card p { font-size: 0.92rem; }
.orbit .card.tl { left: 0; top: 0; }
.orbit .card.tr { right: 0; top: 0; }
.orbit .card.bl { left: 0; bottom: 0; }
.orbit .card.br { right: 0; bottom: 0; }

/* ── Alternating rows ── */
.row { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); min-height: 600px; }
.row .text { padding: 96px 72px; display: flex; flex-direction: column; justify-content: center; }
.row .text h2 { font-size: clamp(1.9rem, 2.8vw, 2.6rem); }
.row .text p { margin-top: 22px; max-width: 32em; }
.row .text .actions { margin-top: 34px; }
.row .visual { border-right: 1px solid var(--line); padding: 64px 48px; display: flex; align-items: center; }
.row.flip .visual { order: 2; border-right: 0; border-left: 1px solid var(--line); }
.row .visual.field { display: flex; }
.stat { display: flex; align-items: center; gap: 22px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); max-width: 32em; }
.stat .n { font-family: var(--mono); font-size: 2.6rem; color: var(--gold); letter-spacing: -0.03em; line-height: 1; white-space: nowrap; }
.stat .d { font-size: 0.95rem; color: var(--ink-2); line-height: 1.5; }

/* Panels used in rows */
.viz canvas { width: 100%; height: 260px; }
.viz.tall canvas { height: 320px; }
.legend { display: flex; gap: 18px; padding: 0 16px 12px; color: var(--ink-3); font-size: 11px; flex-wrap: wrap; }
.legend i { display: inline-block; width: 14px; height: 2px; vertical-align: middle; margin-right: 7px; }
.legend i.dash { background: repeating-linear-gradient(90deg, var(--ink-3) 0 4px, transparent 4px 7px); }
.log { border-top: 1px solid var(--line); height: 112px; overflow: hidden; padding: 8px 16px; }
.log div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.85; color: var(--ink-3); animation: log-in 0.4s ease; }
.log div b { font-weight: 500; }
.log .t { color: var(--ink-3); margin-right: 10px; }
.log .alert { color: var(--down); }
.log .act { color: var(--gold); }
.log .ok { color: var(--up); }
@keyframes log-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.counters { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.counters > div { padding: 12px 16px; border-right: 1px solid var(--line); }
.counters > div:last-child { border-right: 0; }
.counters .k { font-size: 10.5px; color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase; }
.counters .v { font-size: 16px; color: var(--ink); margin-top: 3px; }
.seg-tabs { display: flex; gap: 0; }
.seg-tabs button {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  background: transparent; color: var(--ink-3);
  border: 1px solid var(--line-strong); border-right: 0;
  padding: 5px 11px; cursor: pointer; transition: color 0.2s, background 0.2s;
}
.seg-tabs button:last-child { border-right: 1px solid var(--line-strong); }
.seg-tabs button:hover { color: var(--ink); }
.seg-tabs button.on { background: var(--gold-soft); color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.seg-tabs button.on + button { border-left-color: color-mix(in srgb, var(--gold) 45%, transparent); }

/* Retail segment bars */
.seg-list { padding: 18px 16px 10px; }
.seg-row { display: grid; grid-template-columns: 150px 1fr 62px 70px; gap: 14px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); }
.seg-row:last-child { border-bottom: 0; }
.seg-row .name { color: var(--ink-2); }
.seg-row .track { height: 10px; background: color-mix(in srgb, var(--line-tint) 6%, transparent); position: relative; }
.seg-row .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--series-1); border-radius: 0 3px 3px 0; }
.seg-row .val { color: var(--ink); text-align: right; }
.seg-row .adj { text-align: right; color: var(--ink-3); }
.seg-row .adj.gold { color: var(--gold); }
.seg-row .adj.up { color: var(--up); }
.seg-row .adj.down { color: var(--down); }
.seg-row .lim { position: absolute; top: -4px; bottom: -4px; width: 1px; background: color-mix(in srgb, var(--down) 70%, transparent); }
.seg-row .fill { transition: width 0.45s ease, background 0.3s; }
canvas.auth { width: 100%; height: 230px; }

/* Stream, Compute, Act hero loop */
canvas.sca { width: 100%; height: 420px; }

/* Development loop terminals */
.terms { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; width: 100%; }
.term .body { font-family: var(--mono); font-size: 12px; line-height: 1.8; padding: 14px 16px; height: 345px; overflow: hidden; color: var(--ink-2); white-space: pre; }
.term .body .t { color: var(--ink-3); }
.term .body .bad { color: var(--down); }
.term .body .ok { color: var(--up); }
.term .body .gold { color: var(--gold); }
.term .body .mrow { color: var(--ink); }
.term .clock { color: var(--ink-3); }

/* Positioning matrix */
.matrix th:last-child, .matrix td:last-child { background: color-mix(in srgb, var(--gold) 5%, transparent); border-left: 2px solid var(--gold); color: var(--ink); }
.matrix th:last-child { color: var(--gold); }
.matrix td { font-size: 0.92rem; }
.matrix .y { color: var(--gold); font-family: var(--mono); margin-right: 8px; }
.matrix-note { font-size: 0.82rem; color: var(--ink-3); padding-top: 14px; }
.matrix .x { color: color-mix(in srgb, var(--down) 75%, transparent); font-family: var(--mono); }

/* Compatibility tick groups */
.compat { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.compat > div { padding: 34px 36px 38px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.compat > div:nth-child(3n) { border-right: 0; }
.compat h4 { font-family: var(--mono); font-weight: 400; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.compat ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.compat li { font-size: 0.88rem; color: var(--ink); border: 1px solid var(--line-strong); padding: 5px 10px 5px 8px; display: inline-flex; gap: 7px; align-items: center; }
.compat li::before { content: '✓'; font-family: var(--mono); color: var(--gold); font-size: 0.8rem; }

/* Cost cards */
.costs { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.costs > div { padding: 40px 34px 44px; border-right: 1px solid var(--line); }
.costs > div:last-child { border-right: 0; }
.costs h3 { font-size: 1.1rem; margin-bottom: 12px; }
.costs p { font-size: 0.93rem; }
.costs .amt { font-family: var(--mono); color: var(--gold); font-size: 1.05rem; margin-top: 18px; }
.costs-note { padding: 18px var(--pad) 28px; color: var(--ink-3); font-size: 0.85rem; border-top: 1px solid var(--line); }

/* Pattern comparison: ETL, ELT and SCA */
.flows { padding: 0 var(--pad) 40px; display: flex; flex-direction: column; gap: 14px; }
.flow { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 20px; }
.flow .tag { font-family: var(--mono); color: var(--ink-3); letter-spacing: 0.1em; }
.flow .steps { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.flow .steps span { font-family: var(--mono); font-size: 0.85rem; padding: 10px 16px; border: 1px solid var(--line-strong); color: var(--ink-2); background: var(--bg-raised); }
.flow .steps i { color: var(--ink-3); font-style: normal; font-family: var(--mono); }
.flow .steps em { font-style: normal; color: var(--ink-3); font-size: 0.85rem; margin-left: 8px; }
.flow.sca .tag { color: var(--gold); }
.flow.sca .steps span { color: var(--ink); border-color: color-mix(in srgb, var(--gold) 60%, transparent); animation: sca-pulse 2.4s infinite; }
.flow.sca .steps span:nth-of-type(2) { animation-delay: 0.4s; }
.flow.sca .steps span:nth-of-type(3) { animation-delay: 0.8s; }
@keyframes sca-pulse { 0%, 60%, 100% { background: var(--bg-raised); } 20% { background: color-mix(in srgb, var(--gold) 16%, transparent); } }

/* Compatibility hub: sources on the left, storage, tools and actions on the
   right, connected to Lightning in the centre */
.hub { display: grid; grid-template-columns: 1fr 240px 1fr; align-items: center; padding: 8px var(--pad) 88px; }
.hub-title { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.hub-side.right .hub-title { padding-left: 40px; }
.hub-row { position: relative; display: grid; grid-template-columns: 150px 1fr; gap: 14px; padding: 12px 0; }
.hub-side.left .hub-row { padding-right: 40px; }
.hub-side.right .hub-row { padding-left: 40px; }
.hub-row .k { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); padding-top: 2px; }
.hub-row .items { font-size: 0.9rem; color: var(--ink); line-height: 1.5; }
.hub-row::after {
  content: ''; position: absolute; top: 50%; width: 32px; height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 15%, transparent) 0%, var(--gold) 50%, color-mix(in srgb, var(--gold) 15%, transparent) 100%) 0 0 / 200% 100%;
  animation: hub-flow 2.4s linear infinite;
}
.hub-side.left .hub-row::after { right: 0; }
.hub-side.right .hub-row::after { left: 0; animation-direction: reverse; }
.hub-side.left { border-right: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); }
.hub-side.right { border-left: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); }
@keyframes hub-flow { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.hub-core { display: flex; justify-content: center; position: relative; }
.hub-core::before, .hub-core::after { content: ''; position: absolute; top: 50%; width: 40px; height: 1px; background: var(--gold); }
.hub-core::before { left: 0; }
.hub-core::after { right: 0; }
.hub-box { position: relative; z-index: 1; border: 1px solid var(--gold); background: var(--bg-card); padding: 26px 22px; text-align: center; box-shadow: 0 0 60px -10px color-mix(in srgb, var(--gold) 35%, transparent); }
.hub-box .k { display: block; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.hub-box b { display: block; font-family: var(--serif); font-size: 1.6rem; color: var(--ink); margin: 4px 0 8px; }
.hub-box .sub { font-family: var(--mono); font-size: 0.72rem; color: var(--gold); }
@media (prefers-reduced-motion: reduce) { .hub-row::after { animation: none; } }
@media (max-width: 1100px) {
  .hub { grid-template-columns: 1fr; gap: 20px; }
  .hub-side.left, .hub-side.right { border: 0; }
  .hub-row::after, .hub-core::before, .hub-core::after { display: none; }
  .hub-side.right .hub-title, .hub-side.right .hub-row, .hub-side.left .hub-row { padding-left: 0; padding-right: 0; }
}

/* Caption explaining a live panel: what it shows, the benefit, and why
   Lightning makes it possible */
.explain { border-top: 1px solid var(--line); padding: 6px 16px 8px; font-family: var(--sans); }
.explain > div { display: grid; grid-template-columns: 112px 1fr; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.explain > div:last-child { border-bottom: 0; }
.explain .k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); padding-top: 3px; }
.explain p { font-size: 13px; line-height: 1.5; color: var(--ink-2); }

/* In-session decisioning rows: customer, basket, abandonment risk,
   predicted uplift and the action taken */
.dec-rows { padding: 6px 16px; }
.dec-row, .dec-head { display: grid; grid-template-columns: 84px 46px 1fr 48px 168px; gap: 12px; align-items: center; }
.dec-head { padding: 10px 16px 0; color: var(--ink-3); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.dec-row { padding: 11px 0; border-bottom: 1px solid var(--line); }
.dec-row:last-child { border-bottom: 0; }
.dec-row .id { color: var(--ink); }
.dec-row .bk { color: var(--ink-2); text-align: right; }
.dec-row .track { height: 8px; background: color-mix(in srgb, var(--line-tint) 6%, transparent); position: relative; }
.dec-row .track::after { content: ''; position: absolute; left: 55%; top: -4px; bottom: -4px; width: 1px; background: color-mix(in srgb, var(--gold) 50%, transparent); }
.dec-row .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--series-2); transition: width 0.45s, background 0.3s; }
.dec-row .up { color: var(--ink-2); text-align: right; }
.dec-row .act { color: var(--ink-3); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dec-row .act.nudge { color: var(--gold); }
.dec-row .act.hold { color: var(--series-2); }

/* Live experiment rows: variant, visitors, conversion with 95% interval,
   probability to be best and traffic share */
.ab-rows { padding: 8px 16px 6px; }
.ab-row, .ab-head { display: grid; grid-template-columns: 26px 54px 1fr 62px 48px 46px; gap: 12px; align-items: center; }
.ab-head { padding: 10px 16px 0; color: var(--ink-3); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.ab-head span:nth-child(n+4) { text-align: right; }
.ab-row { padding: 12px 0; border-bottom: 1px solid var(--line); transition: background 0.4s, opacity 0.4s; }
.ab-row:last-child { border-bottom: 0; }
.ab-row .id { color: var(--ink); font-weight: 500; }
.ab-row .n { color: var(--ink-3); }
.ab-row .rate, .ab-row .pb, .ab-row .tr { text-align: right; color: var(--ink); }
.ab-row .pb { color: var(--ink-2); }
.ci-track { position: relative; height: 14px; background: linear-gradient(var(--line), var(--line)) center / 100% 1px no-repeat; }
.ci-track .ci { position: absolute; top: 3px; height: 8px; background: color-mix(in srgb, var(--series-2) 35%, transparent); border-left: 1px solid var(--series-2); border-right: 1px solid var(--series-2); transition: left 0.4s, width 0.4s; }
.ci-track .pt { position: absolute; top: 2px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--series-2); border: 2px solid var(--bg); transition: left 0.4s; }
.ab-row.win { background: color-mix(in srgb, var(--gold) 7%, transparent); }
.ab-row.win .id, .ab-row.win .pb { color: var(--gold); }
.ab-row.win .ci-track .pt { background: var(--gold); }
.ab-row.win .ci-track .ci { background: color-mix(in srgb, var(--gold) 30%, transparent); border-color: var(--gold); }
.ab-row.out { opacity: 0.45; }
.ab-scale { display: flex; justify-content: space-between; padding: 0 16px 10px calc(16px + 26px + 54px + 24px); margin-right: calc(62px + 48px + 46px + 36px); color: var(--ink-3); font-size: 10px; }

/* Split hero with the visual on the left */
.hero.plain.reverse .copy { order: 2; border-right: 0; border-left: 1px solid var(--line); }
.stat-band.three { grid-template-columns: repeat(3, 1fr); }
.stat-band.five { grid-template-columns: repeat(5, 1fr); }
.stat-band.five > div { padding: 36px 26px 40px; }
.stat-band.five .fig { font-size: 2rem; }

/* ── Code and printed tables ── */
.code-split { display: grid; grid-template-columns: 1fr 1fr; }
.code-split > div { min-width: 0; }
.code-split > div:first-child { border-right: 1px solid var(--line); }
pre.code {
  font-family: var(--mono); font-size: 13px; line-height: 1.75;
  color: var(--ink-2);
  padding: 22px 22px;
  overflow-x: auto;
}
pre.code .kw { color: var(--code-keyword); }
pre.code .ty { color: var(--code-type); }
pre.code .fn { color: var(--ink); }
pre.code .st { color: var(--code-string); }
pre.code .cm { color: var(--ink-3); }
pre.code .hl { color: var(--gold); }
pre.table-out { font-family: var(--mono); font-size: 12px; line-height: 1.6; color: var(--ink-2); padding: 22px; white-space: pre; overflow-x: auto; }
pre.table-out .chg { color: var(--gold); transition: color 1.2s; }
pre.table-out .hd { color: var(--ink); }
.out-meta { padding: 0 22px 18px; color: var(--ink-3); font-size: 11px; }

.code-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--line); }
.code-pair > div { border-right: 1px solid var(--line); }
.code-pair > div:last-child { border-right: 0; }
.code-pair .cap { padding: 28px 28px 0; }
.code-pair .cap h3 { font-size: 1.1rem; }
.code-pair .cap p { font-size: 0.92rem; color: var(--ink-3); margin-top: 6px; }
.code-pair pre.code { padding: 22px 28px 36px; }

/* ── Points list (objection handling) ── */
.points { display: flex; flex-direction: column; }
.points > div { padding: 48px 56px; border-bottom: 1px solid var(--line); }
.points > div:last-child { border-bottom: 0; }
.points h3 { font-size: 1.2rem; margin-bottom: 12px; }
.points p { font-size: 0.98rem; }

/* ── Articles ── */
.articles { display: grid; grid-template-columns: 1fr 1fr; }
.articles .featured { border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.articles .featured .txt { padding: 44px 48px; flex: 1; }
.articles .featured .fv { height: 300px; border-top: 1px solid var(--line); }
.articles .featured h3 { font-size: 1.85rem; line-height: 1.3; margin: 14px 0 18px; }
.article { display: block; padding: 40px 48px; border-bottom: 1px solid var(--line); transition: background 0.25s; position: relative; }
.article:last-child { border-bottom: 0; }
.article:hover, .articles .featured:hover { background: color-mix(in srgb, var(--line-tint) 3%, transparent); }
.article h3 { font-size: 1.3rem; margin: 12px 0 14px; max-width: 24em; }
.article p, .articles .featured p { font-size: 0.95rem; color: var(--ink-3); }
.tag { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.article .go, .articles .featured .go { font-family: var(--mono); color: var(--gold); margin-top: 22px; display: inline-block; }
.articles-head { display: flex; justify-content: space-between; align-items: end; padding: 96px var(--pad) 56px; border-bottom: 1px solid var(--line); }

/* ── Closing call to action ── */
.closing { position: relative; overflow: hidden; padding: 170px var(--pad); text-align: center; border-bottom: 1px solid var(--line); }
.closing canvas.tape { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.8; }
.closing::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--bg) 88%, transparent) 25%, color-mix(in srgb, var(--bg) 35%, transparent) 100%); }
.closing > * { position: relative; z-index: 1; }
.closing p.lead { margin: 22px auto 0; }
.closing .actions { justify-content: center; }

/* ── Footer ── */
footer .grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); }
footer .grid > div { padding: 56px 36px 64px; border-right: 1px solid var(--line); }
footer .grid > div:last-child { border-right: 0; }
footer .brand .logo { font-family: var(--serif); font-weight: 900; font-size: 26px; color: var(--ink); }
footer .brand p { font-size: 0.92rem; margin-top: 16px; color: var(--ink-3); max-width: 22em; }
footer h4 { font-family: var(--mono); font-weight: 400; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 20px; }
footer ul { list-style: none; }
footer li { margin-bottom: 12px; }
footer li a { font-size: 0.93rem; color: var(--ink-2); transition: color 0.2s; }
footer li a:hover { color: var(--gold); }
footer .legal { display: flex; justify-content: space-between; padding: 22px 36px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 0.74rem; color: var(--ink-3); letter-spacing: 0.04em; }

/* ── Entrance motion ── */
.rise { opacity: 0; transform: translateY(18px); transition: opacity 0.8s ease, transform 0.8s ease; }
.rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; transition: none; }
  .reveal .w { opacity: 1; }
  .proof-tile.active::before { animation: none; width: 100%; }
  html { scroll-behavior: auto; }
}

/* ── Trading page ── */
.hero-center { position: relative; overflow: hidden; text-align: center; padding: 130px var(--pad) 90px; border-bottom: 1px solid var(--line); }
.hero-center h1 { max-width: 15em; margin: 0 auto; font-size: clamp(2.6rem, 4.8vw, 4.5rem); }
.hero-center p.lead { margin: 28px auto 0; }
.console-field { padding: 80px 7% 96px; border-bottom: 1px solid var(--line); }
.console { display: grid; grid-template-columns: 210px 1fr 270px; min-height: 560px; }
.console .side { border-right: 1px solid var(--line); padding: 16px 0; }
.console .side h5 { font-family: var(--mono); font-weight: 400; font-size: 10px; letter-spacing: 0.14em; color: var(--ink-3); padding: 14px 18px 8px; text-transform: uppercase; }
.console .side a { display: flex; justify-content: space-between; padding: 8px 18px; color: var(--ink-2); border-left: 2px solid transparent; cursor: pointer; }
.console .side a.on { color: var(--ink); border-left-color: var(--gold); background: color-mix(in srgb, var(--gold) 6%, transparent); }
.console .side a i { font-style: normal; color: var(--ink-3); }
.console .main { display: flex; flex-direction: column; min-width: 0; }
.console .main canvas { flex: 1; width: 100%; min-height: 420px; }
.console .stats { border-left: 1px solid var(--line); }
.console .stats > div { padding: 14px 18px; border-bottom: 1px solid var(--line); }
.console .stats .k { font-size: 10.5px; color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase; }
.console .stats .v { font-size: 18px; color: var(--ink); margin: 3px 0 6px; }
.console .stats canvas { width: 100%; height: 34px; }
.console .crumbs { display: flex; gap: 22px; padding: 12px 18px; border-bottom: 1px solid var(--line); color: var(--ink-3); }
.console .crumbs span.on { color: var(--ink); border-bottom: 1px solid var(--gold); padding-bottom: 2px; }
.heat-legend { display: flex; align-items: center; gap: 10px; padding: 0 16px 14px; color: var(--ink-3); font-size: 11px; }
.heat-legend .bar { flex: 0 0 160px; height: 8px; background: linear-gradient(90deg, var(--series-2), var(--diverging-mid) 50%, var(--series-1-deep) 67.5%, var(--series-1)); }
.book-wrap { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); border-bottom: 1px solid var(--line); }
.book-wrap > div:first-child { border-right: 1px solid var(--line); }
.book-wrap canvas { width: 100%; height: 250px; }

.console-field { position: relative; }
.console-field > .panel { max-width: 1180px; margin: 0 auto; }
.strip-head { display: flex; justify-content: space-between; align-items: baseline; padding: 22px 40px; border-top: 1px solid var(--line); }
.strip-head .label { margin: 0; }
.strip-head h3 { font-size: 1.05rem; }

/* Two-column block: visual on the left, stacked points on the right */
.split-block { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.split-block > .visual { border-right: 1px solid var(--line); padding: 56px 44px; display: flex; align-items: center; }
.viz canvas.merge { height: 360px; }
.stack { display: flex; flex-direction: column; gap: 18px; width: 100%; }

/* Scope table */
.scope { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.scope th {
  font-family: var(--mono); font-weight: 400; font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3); text-align: left; padding: 16px 24px; border-bottom: 1px solid var(--line-strong);
}
.scope td { padding: 16px 24px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }
.scope td:first-child { color: var(--ink); width: 26%; }
.scope td.yes { color: var(--ink); border-left: 2px solid var(--gold); background: color-mix(in srgb, var(--gold) 4%, transparent); }
.scope td.no { color: var(--ink-3); }
.scope tr:hover td { background: color-mix(in srgb, var(--line-tint) 3%, transparent); }
.scope-wrap { padding: 0 var(--pad) 72px; }
.scope-note { padding: 28px var(--pad) 96px; color: var(--ink-2); max-width: 52em; }
.scope-note h3 { margin-bottom: 12px; }

/* FAQ */
.faq { padding: 0 var(--pad) 104px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 26px 4px;
  font-family: var(--serif); font-weight: 700; font-size: 1.15rem; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--mono); font-weight: 400; color: var(--gold); font-size: 1.3rem; transition: transform 0.25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 4px 28px; max-width: 52em; }

/* Split hero without video, with a live field behind the visual half */
.hero.plain .frame { min-height: 760px; }
.hero.plain .visual.field { padding: 56px 36px; background: color-mix(in srgb, var(--bg-inset) 45%, transparent); }
.hero.plain .visual.field > canvas.tape { opacity: 0.6; }

/* Treated hero videos are pre-darkened into the navy palette, so they play
   at full opacity under a light veil that fades into the page at the base. */
.hero.plain video { opacity: 1; }
.hero.plain .veil {
  background:
    linear-gradient(0deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 0%, transparent) 28%),
    linear-gradient(90deg, color-mix(in srgb, var(--bg) 35%, transparent) 0%, color-mix(in srgb, var(--bg) 0%, transparent) 55%);
}

/* Factory floor */
.floor { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.mc { background: var(--bg-inset); padding: 10px 10px 9px; transition: background 0.4s; }
.mc .id { color: var(--ink); font-size: 11.5px; display: flex; justify-content: space-between; }
.mc .id span { color: var(--ink-3); font-size: 10px; }
.mc .u { color: var(--ink); font-size: 15px; margin-top: 6px; }
.mc .bar { height: 3px; background: color-mix(in srgb, var(--line-tint) 10%, transparent); margin-top: 6px; }
.mc .bar i { display: block; height: 100%; background: var(--series-1); transition: width 0.45s; }
.mc .st { font-size: 10px; color: var(--ink-3); margin-top: 6px; letter-spacing: 0.04em; }
.mc.idle .u, .mc.maint .u { color: var(--ink-3); }
.mc.drift .st { color: var(--gold); }
.mc.drift .bar i { background: var(--gold); }
.mc.alert { background: color-mix(in srgb, var(--down) 12%, transparent); }
.mc.alert .st { color: var(--down); font-weight: 500; }
.mc.alert .bar i { background: var(--down); }
.mc.maint .st { color: var(--series-2); }

/* Static figure band */
.stat-band { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.stat-band > div { padding: 40px 36px 44px; border-right: 1px solid var(--line); }
.stat-band > div:last-child { border-right: 0; }
.stat-band .fig { font-family: var(--mono); font-size: 2.3rem; color: var(--gold); letter-spacing: -0.02em; line-height: 1.1; }
.stat-band .cap { color: var(--ink); font-weight: 600; margin-top: 14px; }
.stat-band p { font-size: 0.92rem; color: var(--ink-3); margin-top: 6px; }

/* Two-column scope block */
.scope-split { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.scope-split > div { padding: 52px var(--pad) 64px; }
.scope-split > div:first-child { border-right: 1px solid var(--line); border-top: 2px solid var(--gold); margin-top: -1px; }
.scope-split h3 { margin-bottom: 16px; }
.scope-split ul { list-style: none; margin-top: 22px; }
.scope-split li { padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: 0.96rem; display: flex; gap: 14px; }
.scope-split li::before { content: '✓'; font-family: var(--mono); color: var(--gold); }
.scope-split > div:last-child li::before { content: '·'; color: var(--ink-3); }

.split-block.flip > .visual { order: 2; border-right: 0; border-left: 1px solid var(--line); }
canvas.boundary { width: 100%; height: 300px; }
canvas.journey { width: 100%; height: 580px; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  :root { --pad: 28px; }
  .hero .frame, .row, .section-head.split, .articles, .code-split, .code-pair, .proof-stage { grid-template-columns: 1fr; }
  .hero .copy { border-right: 0; padding-top: 90px; }
  .row.flip .visual { order: 0; border-left: 0; }
  .row .visual { border-right: 0; border-bottom: 1px solid var(--line); }
  .row .text { padding: 64px var(--pad); }
  .proof-tiles { grid-template-columns: repeat(3, 1fr); }
  .proof-stage .aside { border-right: 0; border-bottom: 1px solid var(--line); }
  .cols.three, .cols.four, .cols.five { grid-template-columns: 1fr 1fr; }
  .orbit .stage { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .orbit canvas.centre { position: relative; grid-column: 1 / -1; height: 360px; order: -1; }
  .orbit .card { position: static; width: auto; }
  .split-block, .scope-split { grid-template-columns: 1fr; }
  .hero.plain.reverse .copy { order: 0; border-left: 0; }
  .terms, .compat, .costs { grid-template-columns: 1fr; }
  .compat > div { border-right: 0; }
  .scope-wrap { overflow-x: auto; }
  .split-block.flip > .visual { order: 0; border-left: 0; }
  .stat-band { grid-template-columns: 1fr 1fr; }
  .floor { grid-template-columns: repeat(4, 1fr); }
  .split-block > .visual { border-right: 0; border-bottom: 1px solid var(--line); }
  .console { grid-template-columns: 1fr; }
  .console .side, .console .stats { display: none; }
  footer .grid { grid-template-columns: 1fr 1fr; }
  nav.top .links { display: none; }
}

/* ── Products page ── */
canvas.stack { width: 100%; height: 450px; }
canvas.align { width: 100%; height: 300px; }
.prod-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.prod { padding: 40px 32px 44px; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.prod:last-child { border-right: 0; }
.prod .badge { align-self: flex-start; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); padding: 4px 9px; margin-bottom: 22px; }
.prod .badge.open { color: var(--series-2); border-color: color-mix(in srgb, var(--series-2) 50%, transparent); }
.prod h3 { font-size: 1.25rem; margin-bottom: 12px; }
.prod > p { font-size: 0.94rem; flex: 0 0 auto; }
.prod dl { margin: 22px 0 26px; border-top: 1px solid var(--line); }
.prod dl div { padding: 10px 0; border-bottom: 1px solid var(--line); }
.prod dt { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.prod dd { font-size: 0.9rem; color: var(--ink); margin-top: 3px; }
.prod .more { margin-top: auto; font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.06em; color: var(--gold); }
.iface { display: grid; grid-template-columns: 1.3fr 1fr; gap: 0; border-top: 1px solid var(--line); }
.iface > .panel { margin: 48px var(--pad); width: auto; }
.iface .code { min-height: 170px; }
.iface-notes { border-left: 1px solid var(--line); }
.iface-notes > div { padding: 34px 40px; border-bottom: 1px solid var(--line); }
.iface-notes > div:last-child { border-bottom: 0; }
.iface-notes h3 { font-size: 1.1rem; margin-bottom: 8px; }
.iface-notes p { font-size: 0.95rem; }
.bench { padding: 24px 18px 8px; font-family: var(--mono); }
.bench-row { display: grid; grid-template-columns: 110px 1fr 90px; gap: 14px; align-items: center; }
.bench-row .k { color: var(--ink-2); font-size: 12px; }
.bench-row .v { color: var(--gold); text-align: right; font-size: 13px; }
.bench-row .bars { position: relative; height: 34px; }
.bench-row .bar { position: absolute; left: 0; height: 12px; border-radius: 0 3px 3px 0; }
.bench-row .bar.gold { top: 2px; background: var(--series-1); }
.bench-row .bar.blue { top: 20px; background: color-mix(in srgb, var(--series-2) 45%, transparent); border-left: 1px solid var(--series-2); border-right: 1px solid var(--series-2); border-radius: 0; }
.bench-legend { display: flex; gap: 22px; margin: 14px 0 6px 124px; color: var(--ink-3); font-size: 11px; flex-wrap: wrap; }
.bench-legend i { display: inline-block; width: 12px; height: 8px; margin-right: 7px; vertical-align: middle; }
.bench-legend i.g { background: var(--series-1); }
.bench-legend i.b { background: color-mix(in srgb, var(--series-2) 45%, transparent); border: 1px solid var(--series-2); }
.bench-figs { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); margin-top: 20px; }
.bench-figs > div { padding: 16px 12px 12px 0; }
.bench-figs .fig { color: var(--gold); font-size: 1.35rem; }
.bench-figs .cap { color: var(--ink-3); font-size: 11px; margin-top: 4px; line-height: 1.5; }
@media (max-width: 1100px) {
  .prod-grid, .iface { grid-template-columns: 1fr; }
  .prod { border-right: 0; border-bottom: 1px solid var(--line); }
  .iface-notes { border-left: 0; }
}

/* ── Articles ──
   Long-form reading column inside the frame. The benchmark article reuses
   its original chart script, which reads the chart theme variables below. */
:root {
  --surface: var(--bg-raised);
  --text-primary: var(--ink);
  --text-secondary: var(--ink-2);
  --text-muted: var(--ink-3);
  --gridline: color-mix(in srgb, var(--line-tint) 12%, transparent);
  --baseline: color-mix(in srgb, var(--line-tint) 30%, transparent);
  --font-ui: 'Open Sans', Helvetica, Arial, sans-serif;
  /* One hue per product, rising in strength with stream count. */
  --ls-1: color-mix(in srgb, var(--series-1) 35%, var(--ink)); --ls-4: color-mix(in srgb, var(--series-1) 60%, var(--ink));
  --ls-8: color-mix(in srgb, var(--series-1) 80%, var(--ink)); --ls-16: var(--series-1);
  --af-1: color-mix(in srgb, var(--series-2) 35%, var(--ink)); --af-4: color-mix(in srgb, var(--series-2) 60%, var(--ink));
  --af-8: color-mix(in srgb, var(--series-2) 80%, var(--ink)); --af-16: var(--series-2);
  --ls-head: var(--series-1); --af-head: var(--series-2);
}
.article-hero { padding: 110px var(--pad) 70px; }
.article-hero h1 { max-width: 18em; }
.article-hero p.lead { margin-top: 22px; }
.back { display: inline-block; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.06em; color: var(--ink-3); margin-bottom: 28px; }
.back:hover { color: var(--gold); }
.article-meta { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-3); margin-top: 28px; letter-spacing: 0.04em; }
.article { padding: 72px var(--pad) 110px; }
.bench-article { padding-top: 90px; }
.article-body { max-width: 760px; margin: 0 auto; }
.article-body.wide { max-width: 1080px; }
.article-body p, .article-body li { font-size: 1.07rem; line-height: 1.8; color: var(--ink-2); margin: 0 0 22px; }
.article-body b, .article-body strong { color: var(--ink); font-weight: 600; }
.article-body h2 { font-size: 1.75rem; margin: 64px 0 22px; padding-top: 28px; border-top: 1px solid var(--line); }
.article-body h3 { font-size: 1.2rem; margin: 40px 0 14px; }
.article-body a { color: var(--gold); border-bottom: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); }
.article-body hr { border: 0; border-top: 1px solid var(--line); margin: 48px 0; }
.article-body code { font-family: var(--mono); font-size: 0.88em; color: var(--ink); background: var(--bg-raised); border: 1px solid var(--line); padding: 1px 6px; }
.article-body pre { font-family: var(--mono); font-size: 13px; line-height: 1.75; color: var(--ink-2); background: var(--bg-inset); border: 1px solid var(--line-strong); padding: 20px 22px; margin: 26px 0 30px; overflow-x: auto; }
.article-body pre .kw { color: var(--code-keyword); }
.article-body pre .ty { color: var(--code-type); }
.article-body pre .fn { color: var(--ink); }
.article-body pre .str, .article-body pre .num { color: var(--code-string); }
.article-body pre .cm { color: var(--ink-3); }
.article-body pre .punct { color: var(--ink-3); }
.article-body figure { margin: 40px 0; }
.article-body figure img { width: 100%; height: auto; border: 1px solid var(--line); }
.article-body figcaption { font-size: 0.88rem; color: var(--ink-3); margin-top: 12px; }
/* Benchmark article content */
.article-body .kick { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.article-body h1 { font-size: clamp(2.3rem, 4vw, 3.4rem); margin: 10px 0 28px; }
.article-body .sub { font-size: 1.12rem; }
.article-body .meta-line { font-family: var(--mono); font-size: 0.8rem; color: var(--ink-3); }
.article-body .stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); margin: 28px 0; }
.article-body .stat { display: block; margin: 0; padding: 24px 22px; border-top: 0; max-width: none; border-right: 1px solid var(--line); }
.article-body .stat:last-child { border-right: 0; }
.article-body .stat .val { font-family: var(--mono); font-size: 1.9rem; color: var(--gold); }
.article-body .stat .lbl { color: var(--ink); font-weight: 600; margin: 10px 0 4px; }
.article-body .stat .desc { font-size: 0.88rem; color: var(--ink-3); line-height: 1.55; }
.article-body .card { background: var(--surface); border: 1px solid var(--line-strong); padding: 24px 26px 12px; margin: 32px 0; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.7); }
.article-body .chart { width: 100%; height: 420px; }
.article-body .chart.tall { height: 480px; }
.article-body .note, .article-body .tblnote { font-size: 0.88rem; color: var(--ink-3); font-style: italic; }
.article-body table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 0.92rem; }
.article-body th { font-family: var(--mono); font-weight: 400; font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line-strong); }
.article-body td { padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: top; }
.article-body caption { caption-side: top; text-align: left; font-family: var(--serif); color: var(--ink); font-size: 1.05rem; padding: 18px 0 8px; }
.article-body .win { color: var(--gold); font-weight: 600; }
.article-body .loss { color: var(--series-2); font-weight: 600; }
.article-body .cmp td:first-child { color: var(--ink); width: 22%; }
.article-body ul.method { padding-left: 22px; }
.article-body .disclaimer { font-size: 0.82rem; color: var(--ink-3); }
.article-body .section-number { display: block; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.14em; color: var(--gold); text-transform: uppercase; margin-bottom: 8px; }
@media (max-width: 1100px) { .article-body .stats { grid-template-columns: 1fr 1fr; } }

/* ── About ── */
.mission p { margin-top: 18px; }
.mission p.lead { margin-top: 0; }
.founder { display: grid; grid-template-columns: 260px 1fr; gap: 64px; padding: 96px var(--pad) 104px; }
.founder-photo img { width: 100%; height: auto; display: block; border: 1px solid var(--line-strong); filter: grayscale(0.15); }
.founder-links { display: flex; gap: 24px; margin-top: 18px; font-family: var(--mono); font-size: 0.82rem; }
.founder-links a { color: var(--gold); }
.founder-role { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.06em; color: var(--ink-3); margin: 10px 0 26px; }
.founder-text p { margin-bottom: 18px; max-width: 40em; }
.founder-text b { color: var(--ink); font-weight: 600; }
.company-meta { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.06em; color: var(--ink-3); text-transform: uppercase; }
.company-meta a { color: var(--gold); text-transform: none; }

/* ── Contact ── */
.contact { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.contact-copy { padding: 110px var(--pad) 90px; border-right: 1px solid var(--line); }
.contact-copy p.lead { margin-top: 24px; }
.expect { margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--line); }
.expect h3 { font-size: 1.1rem; margin-bottom: 14px; }
.expect p { font-size: 0.97rem; margin-bottom: 14px; max-width: 34em; }
.contact-form-wrap { padding: 110px var(--pad) 90px; display: flex; align-items: flex-start; }
.contact-panel { font-family: var(--sans); }
.contact-form { padding: 26px 24px 28px; display: flex; flex-direction: column; gap: 20px; }
.contact-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.contact-form label { display: flex; flex-direction: column; gap: 8px; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea {
  font-family: var(--sans); font-size: 0.98rem; letter-spacing: 0; text-transform: none;
  color: var(--ink); background: var(--bg-inset); border: 1px solid var(--line-strong);
  padding: 13px 14px; outline: none; transition: border-color 0.2s; resize: vertical;
}
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--gold); }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--ink-3); }
.contact-form label.check { flex-direction: row; align-items: center; gap: 12px; text-transform: none; letter-spacing: 0; font-family: var(--sans); font-size: 0.92rem; color: var(--ink-2); }
.contact-form label.check input { accent-color: var(--gold); width: 16px; height: 16px; }
.contact-form button { align-self: flex-start; font-family: var(--sans); }
.contact-thanks { padding: 30px 24px; }
.contact-thanks h3 { margin-bottom: 10px; }
@media (max-width: 1100px) {
  .founder, .contact { grid-template-columns: 1fr; }
  .contact-copy { border-right: 0; border-bottom: 1px solid var(--line); }
  .contact-form .form-row { grid-template-columns: 1fr; }
}

/* Treated hero videos on the homepage and centred heroes. The clips are
   pre-darkened into the navy palette, so they play at full opacity. */
.hero.treated video { opacity: 1; }
.hero.treated .veil, .hero-center .veil {
  background:
    linear-gradient(0deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 0%, transparent) 30%),
    radial-gradient(ellipse at center, color-mix(in srgb, var(--bg) 55%, transparent) 0%, color-mix(in srgb, var(--bg) 0%, transparent) 70%);
}
.hero-center video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-center .veil { position: absolute; inset: 0; }
.hero-center > :not(video):not(.veil) { position: relative; z-index: 1; }
.hero.plain.reverse video { object-position: center 42%; }