/* ==========================================================================
   Splitscreen — shared design system
   ==========================================================================

   Night editorial. Lifted from the marketing site's palette, which moved to
   dark first and was written to be adopted here wholesale.

   The rules of the house style survive the move:
     · flat — colour arrives as solid blocks and hairline rules, never glow
     · two-tone — Player 1 (cobalt) and Player 2 (vermilion) carry equal weight
     · the seam — the name is two halves, so the layout keeps splitting in two

   Deliberately NOT neon: no coloured box-shadows, no saturated backgrounds, no
   text glow. On black, a 1px vermilion rule reads louder than a lit sign does.

   The light theme's drama device was a dark panel on a pale page. Inverted, it
   becomes a BONE panel on the void — see .band and .b below. Anything that
   used to set `background: var(--ink)` had to be looked at individually rather
   than swapped, because ink is now the text colour, not a surface.
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  /* surfaces — warm near-blacks, never #000; pure black flattens the grain */
  --void:      #0B0C0E;   /* page */
  --panel:     #111319;   /* cards */
  --panel-2:   #161920;   /* raised / hovered */
  --band:      #0E1014;   /* alternating sections, rails */

  /* ink on dark — warm off-whites */
  --bone:      #F2EFE8;
  --bone-2:    #B7BBC3;
  --bone-3:    #838994;
  --bone-4:    #5B616C;

  /* rules */
  --line:      #23262E;
  --line-soft: #191C22;
  --line-hard: #333844;

  /* players — lifted off their print values, which go muddy on black.
     `-t` variants are the contrast-safe text values for small type. */
  --p1:        #5B79FF;   /* cobalt   — Groups / teammates */
  --p1-t:      #93A6FF;
  --p1-deep:   #1F3FD4;
  --p1-wash:   #141A33;

  --p2:        #FF6A4D;   /* vermilion — Dating */
  --p2-t:      #FF9A85;
  --p2-deep:   #E23F22;
  --p2-wash:   #2A150F;

  --p3:        #35C39C;   /* pine — verified / trust, semantic only */
  --p3-t:      #6FD9BC;
  --p3-wash:   #0F2620;

  --gold:      #E0B457;
  --gold-wash: #241C0E;

  /* ---------- mark surfaces ----------
     The tile a member, game or community is painted on.

     These exist because the vocabulary STORED in the database — p1, p1-ink,
     ink, ink-2, ink-3, gold — was written for the light theme, where `ink`
     was a dark surface you could put white type on. On this theme --ink is
     the TEXT colour, so `background: var(--ink)` paints a near-white tile and
     the white label on it disappears completely. That is not hypothetical:
     every member whose accent was `ink` had an invisible monogram, and the
     note at the top of this file warned about exactly this when the palette
     was inverted.

     A mark is always a dark block carrying white type, so it gets its own
     tokens and stops borrowing the text palette. Same names, so the stored
     values still line up; different values, because a surface and a text
     colour are different jobs.

     p3 and gold are darkened here rather than passed through: both are tuned
     to be READ on black, and white type on either of them at their published
     value is unreadable. --p3 and --gold themselves are untouched. */
  --mk-p1:     var(--p1);      /* cobalt */
  --mk-p1-ink: var(--p1-deep); /* deep cobalt */
  --mk-p2:     var(--p2);      /* vermilion */
  --mk-p3:     #1B8467;        /* pine, dropped to carry white */
  --mk-gold:   #8F6B20;        /* likewise */
  --mk-ink:    #3D4657;        /* slate — what `ink` meant as a tile */
  --mk-ink-2:  #2F4858;        /* teal slate */
  --mk-ink-3:  #4A3A5A;        /* aubergine */

  /* Compatibility aliases. The app was built against the light vocabulary and
     these keep three thousand lines of component CSS meaning what they always
     meant — `--ink` was always "the text colour", it is simply pale now. */
  --ink:       var(--bone);
  --ink-2:     var(--bone-2);
  --ink-3:     var(--bone-3);
  --ink-4:     var(--bone-4);
  --paper:     var(--panel);
  --paper-2:   var(--panel-2);
  --bone-alt:  var(--band);
  --p1-ink:    var(--p1-t);
  --p2-ink:    var(--p2-t);
  --p3-ink:    var(--p3-t);

  /* text sitting ON an inverted (bone) panel */
  --on-ink:    var(--void);
  --on-ink-2:  #4A4F58;

  /* type */
  --font-display: 'Clash Display', 'Trebuchet MS', ui-sans-serif, sans-serif;
  --font-body:    'Switzer', 'Helvetica Neue', ui-sans-serif, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* rhythm */
  --measure: 66ch;
  --radius:    14px;
  --radius-sm:  9px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* The `hidden` attribute has to beat our own layout rules.
   Any author rule that sets `display` — `.b { display: inline-flex }` is the
   one that bit us — outranks the UA stylesheet's `[hidden] { display: none }`,
   because author beats UA no matter the specificity. The result is an element
   that JS believes it hid and the browser still paints: the voice room showed
   Join, Mute and Leave all at once, on every state. deck.css was already
   patching this per-component (`.sw-controls[hidden]`); this does it once, for
   everything, so `el.hidden = true` means what it says. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(15.5px, 0.55vw + 13.6px, 17.5px);
  line-height: 1.62;
  color: var(--ink);
  background: var(--void);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  word-spacing: 0.05em;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--p1); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Typography
   ========================================================================== */

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.758rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 0.7em;
}
.eyebrow::before {
  content: '';
  width: 1.6em;
  height: 2px;
  background: var(--p1);
  flex: none;
}
.eyebrow--plain::before { display: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.022em;
  word-spacing: 0.09em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

.display, .thesis, .lede, .brand,
.cover__sub, .cover__title, .closer__title,
.band__q, .s-title, .s-lede, .statement,
.cover-slide__title, .cover-slide__sub { word-spacing: 0.09em; }

.display { font-size: clamp(2.6rem, 6.4vw, 5.1rem); line-height: 0.98; letter-spacing: -0.034em; }
.h1 { font-size: clamp(2.1rem, 4.4vw, 3.5rem); }
.h2 { font-size: clamp(1.55rem, 2.5vw, 2.15rem); letter-spacing: -0.018em; }
.h3 { font-size: 1.06rem; font-weight: 600; letter-spacing: -0.008em; line-height: 1.28; }

.thesis {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.3rem, 2.1vw, 1.85rem);
  line-height: 1.24;
  letter-spacing: -0.018em;
  margin: 0;
  text-wrap: balance;
}

.lede {
  font-size: clamp(1.02rem, 1.1vw, 1.16rem);
  line-height: 1.56;
  color: var(--ink-2);
  max-width: 54ch;
  text-wrap: pretty;
}

p { margin: 0 0 1.05em; max-width: var(--measure); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.muted { color: var(--ink-2); }
.small { font-size: 0.875rem; line-height: 1.55; }
.mono  { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; }

.hl    { color: var(--p1-ink); font-weight: 500; }
.hl-p2 { color: var(--p2-ink); font-weight: 500; }
.hl-p3 { color: var(--p3-ink); font-weight: 500; }

/* ==========================================================================
   Surfaces — flat: solid fill, solid 1px rule, no blur, no shadow
   ========================================================================== */

.card {
  position: relative;
  padding: 1.55rem 1.6rem 1.7rem;
  border-radius: var(--radius);
  background: var(--paper);
  border: 1px solid var(--line);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.card:hover { border-color: var(--line-hard); transform: translateY(-2px); }

/* A card whose contents are a stack of unrelated blocks — identity, standing,
   bio, handles, the way out — rather than a title and a body.

   `.card` is a plain block, so spacing between those used to be whatever each
   block brought with it: an inline margin-bottom on the name, nothing at all
   between the standing tag and the handles, and a margin-top on the report
   link. Three ad-hoc values reading as one uneven column. One gap here means
   adding a block cannot get it wrong, and there is nothing left to remember. */
.card--stack { display: grid; gap: 0.75rem; align-content: start; }
.card--stack > .card__report { margin-top: 0; justify-self: start; }

.card__title {
  font-family: var(--font-display);
  font-size: 1.14rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  margin: 0 0 0.5rem;
}
.card__body { color: var(--ink-2); font-size: 0.94rem; line-height: 1.55; }

/* solid rail down the left edge */
.card--rail { padding-left: 1.85rem; }
.card--rail::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  border-radius: var(--radius) 0 0 var(--radius);
  background: var(--rail, var(--p1));
}
.card--p1 { --rail: var(--p1); }
.card--p2 { --rail: var(--p2); }
.card--p3 { --rail: var(--p3); }
.card--gold { --rail: var(--gold); }
.card--ink { --rail: var(--ink-4); }

/* recessed variant for dense spec content */
.card--flat { background: var(--paper-2); }

/* ---------- pillar: solid colour header block instead of a tint wash ---------- */
.pillar { padding: 0; overflow: hidden; }
.pillar:hover { transform: translateY(-2px); }

.pillar__head {
  background: var(--fill, var(--p1));
  padding: 0.85rem 1.35rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.pillar__head span {
  font-family: var(--font-body);
  font-size: 0.700rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #fff;
}
.pillar__head b {
  font-family: var(--font-mono);
  font-size: 0.63rem;
  letter-spacing: 0.12em;
  font-weight: 400;
  color: rgba(255,255,255,0.72);
}
.pillar__body { padding: 1.35rem 1.35rem 1.5rem; }

.pillar--p1 { --fill: var(--p1); }
.pillar--p2 { --fill: var(--p2); }
.pillar--p3 { --fill: var(--p3); }

/* ---------- inverted ink panel: the main "drama" device now ---------- */
.band {
  position: relative;
  padding: clamp(1.8rem, 4vw, 2.8rem) clamp(1.5rem, 4vw, 2.8rem);
  border-radius: var(--radius);
  background: var(--bone);
  color: var(--void);
}
.band__q {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.35rem, 2.7vw, 2rem);
  line-height: 1.16;
  letter-spacing: -0.024em;
  margin: 0;
  max-width: 24ch;
  color: var(--on-ink);
  text-wrap: balance;
}
.band__q em { font-style: normal; color: var(--p2-deep); }
.band__foot { margin-top: 1rem; font-size: 0.92rem; color: var(--on-ink-2); max-width: 48ch; }

/* ==========================================================================
   Lists
   ========================================================================== */

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.62rem; }
.ticks li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--ink-2);
  font-size: 0.945rem;
  line-height: 1.5;
}
.ticks li::before {
  content: '';
  position: absolute;
  left: 0.15rem;
  top: 0.56em;
  width: 8px;
  height: 8px;
  background: var(--dot, var(--p1));
}
.ticks--p2 { --dot: var(--p2); }
.ticks--p3 { --dot: var(--p3); }
.ticks--ink { --dot: var(--ink-4); }
.ticks--gold { --dot: var(--gold); }
.ticks li strong { color: var(--ink); font-weight: 600; }

.ticks--split { grid-template-columns: 1fr; }
@media (min-width: 720px) { .ticks--split { grid-template-columns: 1fr 1fr; column-gap: 1.6rem; } }

/* numbered spec list */
.specs { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: spec; }
/* NOT a grid: each li holds a <strong> plus a bare text node, and a bare text
   node inside a grid container becomes an anonymous grid item — it would land in
   the narrow counter column and wrap one word per line. Absolute counter + flow. */
.specs li {
  counter-increment: spec;
  position: relative;
  padding: 0.7rem 0 0.7rem 2.85rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.93rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.specs li:first-child { border-top: 0; }
.specs li::before {
  content: counter(spec, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.7rem;
  padding-top: 0.3em;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--p1-ink);
}
.specs li strong { color: var(--ink); font-weight: 600; display: block; }

/* ==========================================================================
   Chips
   ========================================================================== */

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  font-family: var(--font-body);
  font-size: 0.800rem;
  font-weight: 500;
  letter-spacing: 0;
  padding: 0.44em 0.8em;
  border-radius: 5px;
  border: 1px solid var(--line-hard);
  background: var(--paper);
  color: var(--ink-2);
  white-space: nowrap;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.chip:hover { border-color: var(--p1); color: var(--p1-ink); }

.chip--solid { background: var(--bone); border-color: var(--bone); color: var(--void); }
.chip--solid:hover { color: var(--void); border-color: var(--bone); }
.chip--p1 { background: var(--p1); border-color: var(--p1); color: #fff; }
.chip--p2 { background: var(--p2); border-color: var(--p2); color: #fff; }
.chip--p3 { background: var(--p3); border-color: var(--p3); color: #fff; }
.chip--p1:hover, .chip--p2:hover, .chip--p3:hover { color: #fff; }

/* ==========================================================================
   Callouts
   ========================================================================== */

.note {
  padding: 1.05rem 1.25rem 1.1rem 1.3rem;
  border-radius: var(--radius-sm);
  background: var(--gold-wash);
  border-left: 4px solid var(--gold);
  font-size: 0.9rem;
  line-height: 1.56;
  color: var(--ink-2);
}
.note__label {
  font-family: var(--font-body);
  font-size: 0.710rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--gold);
  display: block;
  margin-bottom: 0.4rem;
}
.note strong { color: var(--ink); font-weight: 600; }

/* constraint / risk flavour */
.note--risk { background: var(--p2-wash); border-left-color: var(--p2); }
.note--risk .note__label { color: var(--p2-ink); }
.note--safe { background: var(--p3-wash); border-left-color: var(--p3); }
.note--safe .note__label { color: var(--p3-ink); }

/* ==========================================================================
   Coverage matrix
   ========================================================================== */

.matrix {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--paper);
  overflow: hidden;
}
.matrix__row {
  display: grid;
  grid-template-columns: minmax(9.5rem, 1.5fr) repeat(3, minmax(4.4rem, 1fr));
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.1rem;
  border-top: 1px solid var(--line-soft);
}
.matrix__row:first-child { border-top: 0; }
.matrix__head { background: var(--paper-2); padding-top: 0.8rem; padding-bottom: 0.7rem; }
.matrix__head span {
  font-family: var(--font-body);
  font-size: 0.690rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink-3);
  text-align: center;
}
.matrix__head span:first-child { text-align: left; }

.matrix__name { font-size: 0.92rem; font-weight: 500; color: var(--ink); line-height: 1.3; }
.matrix__name em {
  display: block;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  margin-top: 0.18rem;
}

.cell { display: flex; justify-content: center; }
.cell i { width: 26px; height: 8px; background: var(--line); display: block; }
.cell--yes i  { background: var(--p1); }
.cell--part i { background: linear-gradient(90deg, var(--p1) 50%, var(--line) 50%); }

.matrix__row--us { background: var(--bone); border-top: 1px solid var(--bone); }
.matrix__row--us .matrix__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--void);
}
.matrix__row--us .cell--yes i { background: var(--void); height: 9px; }

@media (max-width: 620px) {
  .matrix__row {
    grid-template-columns: minmax(7rem, 1.4fr) repeat(3, minmax(2.3rem, 1fr));
    gap: 0.35rem;
    padding: 0.8rem 0.75rem;
  }
  .matrix__head span { font-size: 0.55rem; letter-spacing: 0.07em; }
  .matrix__name, .slide .matrix__name { font-size: 0.85rem; }
  .matrix__name em { font-size: 0.55rem; }
  .cell i { width: 20px; height: 7px; }
  .matrix__row--us .cell--yes i { height: 8px; }
}

/* ==========================================================================
   Tier / plan comparison table
   ========================================================================== */

.tiers {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
}
.tiers__row {
  display: grid;
  grid-template-columns: minmax(9rem, 1.7fr) repeat(3, minmax(4.5rem, 1fr));
  gap: 0.5rem;
  padding: 0.72rem 1.1rem;
  border-top: 1px solid var(--line-soft);
  align-items: center;
  font-size: 0.9rem;
}
.tiers__row:first-child { border-top: 0; }
.tiers__head { background: var(--bone); padding: 0.85rem 1.1rem; }
.tiers__head span {
  font-family: var(--font-body);
  font-size: 0.700rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-align: center;
  color: var(--void);
}
.tiers__head span:first-child { text-align: left; color: var(--on-ink-2); }
.tiers__feat { color: var(--ink-2); }
.tiers__feat strong { color: var(--ink); font-weight: 600; }
.tiers__v {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink);
}
.tiers__v--no { color: var(--ink-4); }
.tiers__v--yes { color: var(--p3-ink); font-weight: 500; }
.tiers__price { background: var(--paper-2); }
.tiers__price .tiers__v { font-size: 0.86rem; font-weight: 500; }

@media (max-width: 640px) {
  .tiers__row {
    grid-template-columns: minmax(6.5rem, 1.5fr) repeat(3, minmax(2.2rem, 1fr));
    padding: 0.66rem 0.7rem;
    font-size: 0.82rem;
    gap: 0.3rem;
  }
  .tiers__head span { font-size: 0.54rem; letter-spacing: 0.05em; }
  .tiers__v { font-size: 0.66rem; }
}

/* ==========================================================================
   Progressive identity reveal
   ========================================================================== */

.reveal-chain { display: grid; gap: 0.75rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 780px) { .reveal-chain { grid-template-columns: repeat(4, 1fr); } }

.stage {
  position: relative;
  padding: 1.1rem 1rem 1.15rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--paper);
  overflow: hidden;
}
/* the identity "portrait": solid bars that sharpen stage by stage */
.stage__glyph {
  height: 46px;
  margin-bottom: 0.85rem;
  background:
    linear-gradient(90deg, var(--p1) 0 38%, transparent 38%) 0 6px  / 100% 8px no-repeat,
    linear-gradient(90deg, var(--ink-3) 0 68%, transparent 68%) 0 22px / 100% 8px no-repeat,
    linear-gradient(90deg, var(--p2) 0 52%, transparent 52%) 0 38px / 100% 8px no-repeat;
  filter: blur(var(--blur)) saturate(var(--sat, 1));
  opacity: var(--clarity);
}
.stage:nth-child(1) .stage__glyph { --blur: 7px;   --clarity: 0.30; --sat: 0.15; }
.stage:nth-child(2) .stage__glyph { --blur: 4px;   --clarity: 0.52; --sat: 0.45; }
.stage:nth-child(3) .stage__glyph { --blur: 1.6px; --clarity: 0.76; --sat: 0.78; }
.stage:nth-child(4) .stage__glyph { --blur: 0px;   --clarity: 1;    --sat: 1; }
.stage:nth-child(4) { border-color: var(--p1); border-width: 2px; }

.stage__n {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.13em;
  color: var(--ink-4);
  display: block;
  margin-bottom: 0.3rem;
}
.stage__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: -0.008em;
  margin-bottom: 0.28rem;
}
.stage__desc { font-size: 0.8rem; line-height: 1.45; color: var(--ink-3); }

/* ==========================================================================
   Flow steps
   ========================================================================== */

.flow { display: grid; gap: 0.55rem; counter-reset: step; }
.flow__item {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.9rem;
  align-items: start;
  padding: 0.9rem 1.1rem 0.95rem 0.9rem;
  border-radius: var(--radius-sm);
  background: var(--paper);
  border: 1px solid var(--line-soft);
}
.flow__item::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--p1-ink);
  padding-top: 0.22em;
}
.flow__item h4 { font-size: 0.97rem; font-weight: 600; margin: 0 0 0.22rem; letter-spacing: -0.008em; }
.flow__item p { font-size: 0.875rem; color: var(--ink-3); margin: 0; line-height: 1.5; }

/* ==========================================================================
   Revenue streams
   ========================================================================== */

.streams { display: grid; gap: 0.8rem; }
@media (min-width: 700px)  { .streams { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .streams { grid-template-columns: repeat(3, 1fr); } }

.stream {
  position: relative;
  padding: 1.3rem 1.35rem 1.4rem;
  border-radius: var(--radius-sm);
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 5px solid var(--sw, var(--p1));
  transition: transform 0.3s var(--ease);
}
.stream:hover { transform: translateY(-2px); }
.stream:nth-child(1) { --sw: var(--p2); }
.stream:nth-child(2) { --sw: var(--p3); }
.stream:nth-child(3) { --sw: var(--p1); }
.stream:nth-child(4) { --sw: var(--gold); }
.stream:nth-child(5) { --sw: var(--ink); }

.stream__n {
  font-family: var(--font-mono);
  font-size: 0.63rem;
  letter-spacing: 0.14em;
  color: var(--ink-4);
  display: block;
  margin-bottom: 0.55rem;
}
.stream h4 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  margin: 0 0 0.6rem;
}

/* ==========================================================================
   Stats / benchmarks
   ========================================================================== */

.stat-row { display: grid; gap: 0.9rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 820px) { .stat-row { grid-template-columns: repeat(4, 1fr); } }

.stat {
  padding: 1.1rem 1.1rem 1.2rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--paper);
}
.stat__v {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.4vw, 2.05rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 0.45rem;
}
.stat__k {
  font-family: var(--font-body);
  font-size: 0.710rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink-3);
  line-height: 1.4;
}
.stat__src { font-size: 0.68rem; color: var(--ink-4); margin-top: 0.4rem; line-height: 1.35; }
.stat--p1 .stat__v { color: var(--p1-ink); }
.stat--p2 .stat__v { color: var(--p2-ink); }
.stat--p3 .stat__v { color: var(--p3-ink); }
.stat--ink { background: var(--bone); border-color: var(--bone); }
.stat--ink .stat__v { color: var(--void); }
.stat--ink .stat__k { color: var(--on-ink-2); }

/* ==========================================================================
   Roadmap
   ========================================================================== */

.phases { display: grid; gap: 0.8rem; }
@media (min-width: 900px) { .phases { grid-template-columns: repeat(4, 1fr); } }

.phase {
  padding: 1.2rem 1.2rem 1.3rem;
  border-radius: var(--radius-sm);
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 5px solid var(--ph, var(--ink-4));
}
.phase:nth-child(1) { --ph: var(--p1); }
.phase:nth-child(2) { --ph: var(--p2); }
.phase:nth-child(3) { --ph: var(--p3); }
.phase:nth-child(4) { --ph: var(--gold); }

.phase__n {
  font-family: var(--font-body);
  font-size: 0.690rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink-3);
  display: block;
  margin-bottom: 0.5rem;
}
.phase h4 {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  margin: 0 0 0.7rem;
  letter-spacing: -0.01em;
}

/* ==========================================================================
   Utilities
   ========================================================================== */

.stack    { display: grid; gap: 1rem; }
.stack-sm { display: grid; gap: 0.6rem; }
.stack-lg { display: grid; gap: 1.9rem; }

.grid-2 { display: grid; gap: 0.9rem; }
.grid-3 { display: grid; gap: 0.9rem; }
@media (min-width: 700px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.divider { height: 1px; background: var(--line); border: 0; margin: 0; }
.sub {
  font-family: var(--font-body);
  font-size: 0.730rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink-3);
  margin: 0 0 0.9rem;
  padding-bottom: 0.55rem;
  border-bottom: 2px solid var(--line);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- brand lockup ---------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.012em;
  color: var(--ink);
}
/* the mark is the name: one screen, two players' halves. Flat, no gradient. */
.brand__mark {
  width: 1.45em;
  height: 1.45em;
  flex: none;
  border-radius: 0.3em;
  background: var(--p1);
  position: relative;
  overflow: hidden;
}
.brand__mark::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 46%;
  background: var(--p2);
}
.brand__mark::before {
  content: '';
  position: absolute;
  top: -6%; bottom: -6%;
  left: 50%;
  width: 9%;
  transform: translateX(-50%);
  background: var(--void);
  z-index: 2;
}

/* ---------- convergence mark ---------- */
.venn { width: 100%; height: auto; overflow: visible; }
.venn__label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  fill: var(--ink-3);
}
.venn__core {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  fill: #fff;
}

/* ---------- entrance choreography ---------- */
[data-anim] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.7s var(--ease) var(--d, 0ms),
    transform 0.7s var(--ease) var(--d, 0ms);
}
.is-in [data-anim], [data-anim].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-anim] { opacity: 1; transform: none; } }