/* ==========================================================================
   Mind Links — site layer, on top of the v8 brand system.

   Rules the brand system states, obeyed here:
     · No borders. Surfaces separate by a step in ground value.
     · --hairline is the only line in the system.
     · The icon is the wordmark cropped. Never place them side by side.
     · Below --logo-min-width (104px) use the icon instead of the wordmark.
   Logical properties throughout, so Arabic needs only dir="rtl".
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-family);
  font-size: var(--font-base);
  line-height: var(--leading-normal);
  font-weight: 350;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-family-display);
  font-weight: 500;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-display);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1 { font-size: clamp(var(--font-2xl), 6.4vw, var(--font-4xl)); line-height: var(--leading-tight); }
h2 { font-size: clamp(var(--font-xl), 3.6vw, var(--font-3xl)); }
h3 { font-size: var(--font-lg); letter-spacing: -0.015em; }
h4 { font-size: var(--font-base); letter-spacing: 0; font-weight: 500; }

p  { margin: 0 0 var(--space-4); max-width: var(--measure); }
ul, ol { margin: 0 0 var(--space-4); padding-inline-start: var(--space-6); max-width: var(--measure); }
li { margin-bottom: var(--space-2); }
strong { font-weight: 600; color: var(--foreground); }
em { font-style: italic; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--primary-hover); }

:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: var(--radius-sm); }

img, svg { max-width: 100%; height: auto; display: block; }

/* ── layout ─────────────────────────────────────────────────────────── */
.wrap { max-width: var(--layout-max); margin-inline: auto; padding-inline: clamp(var(--space-4), 5vw, var(--space-12)); }
.hairline { height: 1px; background: var(--hairline); border: 0; margin: 0; }

.lede { font-size: var(--font-md); color: var(--muted-foreground); max-width: 54ch; font-weight: 300;
  line-height: 1.55; }

.label {
  font-family: var(--font-family-mono);
  font-size: var(--font-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--space-3);
}
.label.quiet { color: var(--subtle-foreground); }

/* ── header ─────────────────────────────────────────────────────────── */
.masthead {
  position: sticky; inset-block-start: 0; z-index: 50;
  background: color-mix(in srgb, var(--background) 88%, transparent);
  backdrop-filter: blur(12px);
}
.masthead::after { content: ""; display: block; height: 1px; background: var(--hairline); }
.masthead .wrap { display: flex; align-items: center; gap: var(--space-6); min-height: 72px; }

.brandmark { display: inline-flex; align-items: center; color: var(--logo-ink); flex: none; }
.brandmark svg, .brandmark img { inline-size: 132px; }
.brandmark .icon { display: none; inline-size: 26px; }
@media (max-width: 560px) {
  .brandmark .word { display: none; }
  .brandmark .icon { display: block; }
}

.mainnav { margin-inline-start: auto; display: flex; align-items: center; gap: var(--space-6); }
.mainnav a { color: var(--muted-foreground); text-decoration: none; font-size: var(--font-sm); }
.mainnav a:hover, .mainnav a[aria-current="page"] { color: var(--foreground); }
.mainnav a[aria-current="page"] { color: var(--accent); }
@media (max-width: 900px) { .mainnav .hide-sm { display: none; } }

.themetoggle {
  background: none; border: 0; padding: var(--space-2); cursor: pointer;
  color: var(--subtle-foreground); border-radius: var(--radius-sm); line-height: 0;
}
.themetoggle:hover { color: var(--foreground); }

/* ── buttons ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-pill);
  background: var(--primary); color: var(--primary-foreground);
  font-size: var(--font-sm); font-weight: 500; text-decoration: none;
  transition: background 160ms var(--ease);
}
.btn:hover { background: var(--primary-hover); color: var(--primary-foreground); }
.btn-quiet { background: var(--raised); color: var(--foreground); }
.btn-quiet:hover { background: var(--muted); color: var(--foreground); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-8); }

/* ── hero ───────────────────────────────────────────────────────────── */
.hero { padding-block: clamp(var(--space-16), 9vw, var(--space-24)) var(--space-section); }
.hero h1 { max-width: 18ch; }
.hero .lede { margin-block-start: var(--space-6); }
.hero-em { color: var(--accent); }

/* ── cards & grids ──────────────────────────────────────────────────── */
.grid { display: grid; gap: var(--space-4); }
.g2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }

.card {
  background: var(--card); color: var(--card-foreground);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.card > :last-child { margin-bottom: 0; }
.card h3, .card h4 { margin-bottom: var(--space-2); }
.card p { color: var(--muted-foreground); }
.card-accent { background: var(--raised); }
.card-link { text-decoration: none; color: inherit; display: block; transition: background 160ms var(--ease); }
.card-link:hover { background: var(--raised); color: inherit; }
.card .num {
  font-family: var(--font-family-mono); font-size: var(--font-xs);
  letter-spacing: var(--tracking-label); color: var(--accent);
  display: block; margin-bottom: var(--space-3);
}

.pull {
  font-family: var(--font-family-display);
  font-size: clamp(var(--font-lg), 2.6vw, var(--font-xl));
  line-height: var(--leading-snug); letter-spacing: -0.02em;
  color: var(--foreground); max-width: 46ch;
  padding-inline-start: var(--space-6);
  box-shadow: inset 2px 0 0 0 var(--accent);
  margin-block: var(--space-12);
}
:where([dir="rtl"]) .pull { box-shadow: inset -2px 0 0 0 var(--accent); }

.chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-family-mono); font-size: var(--font-xs);
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--accent-muted); color: var(--accent);
}
[data-theme="light"] .chip { color: var(--brand-800); }

/* ── definition rows ────────────────────────────────────────────────── */
.rows { display: grid; gap: 1px; background: var(--hairline); border-radius: var(--radius-md); overflow: hidden; }
.rows > div { background: var(--background); padding: var(--space-5) var(--space-4); display: grid; gap: var(--space-2); }
.rows dt, .rows .k {
  font-family: var(--font-family-mono); font-size: var(--font-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--subtle-foreground); margin: 0;
}
.rows dd, .rows .v { margin: 0; color: var(--foreground); }
@media (min-width: 640px) { .rows > div { grid-template-columns: 16rem 1fr; align-items: baseline; gap: var(--space-8); } }

/* ── tables ─────────────────────────────────────────────────────────── */
.tablewrap { overflow-x: auto; margin-block: var(--space-8); border-radius: var(--radius-md); }
table { border-collapse: collapse; inline-size: 100%; min-inline-size: 34rem; font-size: var(--font-sm); }
th, td { text-align: start; padding: var(--space-5) var(--space-5); vertical-align: top; line-height: 1.55; }
thead th {
  font-family: var(--font-family-mono); font-size: var(--font-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--subtle-foreground); font-weight: 400; background: var(--card);
}
tbody tr { box-shadow: inset 0 -1px 0 0 var(--hairline); }
tbody tr:last-child { box-shadow: none; }

/* ── steps ──────────────────────────────────────────────────────────── */
.steps { counter-reset: s; list-style: none; padding: 0; max-width: var(--measure); }
.steps > li { counter-increment: s; position: relative; padding-inline-start: var(--space-12); margin-bottom: var(--space-6); }
.steps > li::before {
  content: counter(s, decimal-leading-zero);
  position: absolute; inset-inline-start: 0; inset-block-start: 2px;
  font-family: var(--font-family-mono); font-size: var(--font-xs);
  letter-spacing: 0.1em; color: var(--accent);
}

/* ── gates ──────────────────────────────────────────────────────────── */
.gates { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); margin-block: var(--space-8); }
.gate { background: var(--card); border-radius: var(--radius-md); padding: var(--space-4); }
.gate.now { background: var(--accent-muted); }
.gate .gate-no { font-family: var(--font-family-mono); font-size: var(--font-xs); letter-spacing: 0.12em; color: var(--subtle-foreground); }
.gate.now .gate-no { color: var(--accent); }
.gate .gate-name { display: block; font-weight: 500; margin-block-start: var(--space-1); }
.gate .gate-sub { display: block; font-size: var(--font-sm); color: var(--subtle-foreground); margin-block-start: var(--space-1); }

/* ── figures ────────────────────────────────────────────────────────── */
figure { margin: var(--space-8) 0; }
figure img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
figcaption { font-size: var(--font-sm); color: var(--subtle-foreground); margin-block-start: var(--space-3); max-width: var(--measure); }

/* ── notice ─────────────────────────────────────────────────────────── */
.notice { background: var(--card); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: inset 2px 0 0 0 var(--accent); }
:where([dir="rtl"]) .notice { box-shadow: inset -2px 0 0 0 var(--accent); }
.notice > :last-child { margin-bottom: 0; }
.notice h3 { color: var(--accent); }

/* ── work index ─────────────────────────────────────────────────────── */
.worklist { display: grid; gap: var(--space-4); }
.workcard { background: var(--card); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: inherit; display: grid; transition: background 160ms var(--ease); }
.workcard:hover { background: var(--raised); color: inherit; }
.workcard img { inline-size: 100%; }
.workcard .body { padding: var(--space-6); }
.workcard h3 { margin-bottom: var(--space-2); }
.workcard p { color: var(--muted-foreground); margin-bottom: 0; }
@media (min-width: 800px) { .workcard { grid-template-columns: 24rem 1fr; align-items: center; } }
.workcard img { block-size: 100%; object-fit: cover; object-position: left top; }
.soon { background: var(--card); border-radius: var(--radius-lg); padding: var(--space-8); text-align: center; color: var(--subtle-foreground); }

/* ── footer ─────────────────────────────────────────────────────────── */
.sitefoot { padding-block: var(--space-16) var(--space-12); margin-block-start: var(--space-section); }
.sitefoot::before { content: ""; display: block; height: 1px; background: var(--hairline); margin-block-end: var(--space-12); }
.footgrid { display: grid; gap: var(--space-8); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.footgrid h4 { font-family: var(--font-family-mono); font-size: var(--font-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--subtle-foreground); font-weight: 400; margin-bottom: var(--space-3); }
.footgrid ul { list-style: none; padding: 0; margin: 0; }
.footgrid li { margin-bottom: var(--space-2); }
.footgrid a { color: var(--muted-foreground); text-decoration: none; font-size: var(--font-sm); }
.footgrid a:hover { color: var(--foreground); }
.footbase { margin-block-start: var(--space-12); display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8); justify-content: space-between; font-size: var(--font-sm); color: var(--subtle-foreground); }

/* ── needs marker — editorial, must not survive to production ───────── */
.needs {
  display: block; font-family: var(--font-family-mono); font-size: var(--font-xs);
  line-height: var(--leading-normal); color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3);
  margin-block: var(--space-3);
}

/* ── photography ─────────────────────────────────────────────────────
   One treatment for every photograph on the site, declared once so the
   hero and the bands cannot drift apart:

     · a side gradient — dense where the type sits, opening toward the
       far edge so the photograph is actually visible
     · a light bottom wash, because the credit line sits there
     · the same desaturation on all of them

   The system supplies a white wordmark "reversed out of photography", so
   reversed type is sanctioned. The scrim is what makes it legible.
   Direction is a variable, so RTL flips the gradient with the layout.
   ------------------------------------------------------------------- */
:root {
  --photo-dir: 90deg;          /* dense side → open side */
  /* Steps the brand primitives do not carry. Derived here rather than editing
     the copied system file. Declare before use — an undefined token inside a
     shorthand makes the whole declaration invalid at computed-value time, which
     resolves to zero rather than falling back. That bug cost an afternoon
     twice: once as zero section padding, once as zero table padding. */
  --space-5: calc(var(--grid-unit) * 5);
  --space-20: calc(var(--grid-unit) * 20);
}
[dir="rtl"] { --photo-dir: 270deg; }

.band,
.hero.hero-photo { position: relative; isolation: isolate; overflow: hidden; }

.band > img,
.hero.hero-photo > img {
  position: absolute; inset: 0; z-index: -2;
  inline-size: 100%; block-size: 100%; object-fit: cover;
  filter: saturate(0.68) contrast(1.05);
}

.band::after,
.hero.hero-photo::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(var(--photo-dir),
      rgb(11 18 26 / 94%) 0%,
      rgb(11 18 26 / 78%) 34%,
      rgb(11 18 26 / 34%) 72%,
      rgb(11 18 26 / 16%) 100%),
    linear-gradient(to top, rgb(11 18 26 / 62%) 0%, transparent 55%);
}
[data-theme="light"] .band::after,
[data-theme="light"] .hero.hero-photo::after {
  background:
    linear-gradient(var(--photo-dir),
      rgb(228 240 253 / 95%) 0%,
      rgb(228 240 253 / 84%) 34%,
      rgb(228 240 253 / 45%) 72%,
      rgb(228 240 253 / 26%) 100%),
    linear-gradient(to top, rgb(228 240 253 / 70%) 0%, transparent 55%);
}
[data-theme="light"] .band { background: var(--neutral-100); }
[data-theme="light"] .band p { color: var(--neutral-900); }
[data-theme="light"] .band p em { color: var(--brand-800); }
[data-theme="light"] .band .credit { color: var(--neutral-700); }

/* the band: a full-bleed strip, one per page, punctuation not decoration */
.band {
  min-block-size: clamp(15rem, 32vw, 24rem);
  display: grid; align-content: end;
  margin-block: var(--space-section);
  padding-block: var(--space-8);
  background: var(--neutral-950);
}
.band > .wrap {
  position: relative;
  /* A grid item with margin-inline:auto does not stretch — it shrinks to
     fit-content and centres. Without this the band ignores the page grid. */
  inline-size: 100%;
}
.band > img { border-radius: 0; box-shadow: none; }   /* undo the figure defaults */
.band p {
  font-family: var(--font-family-display);
  font-size: clamp(var(--font-lg), 2.8vw, var(--font-2xl));
  line-height: var(--leading-snug); letter-spacing: -0.02em;
  color: var(--neutral-50); max-width: 24ch; margin: 0;
}
.band p em { font-style: normal; color: var(--brand-400); }
.band .credit {
  display: block; margin-block-start: var(--space-6);
  font-family: var(--font-family-mono); font-size: var(--font-xs);
  letter-spacing: 0.04em; color: rgb(255 255 255 / 42%); max-width: none;
}
.band .credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.band .credit a:hover { color: rgb(255 255 255 / 80%); }

/* the hero photograph sits behind the first screen rather than beside it */
.hero.hero-photo > img { object-position: 50% 58%; }
.hero.hero-photo .credit {
  display: block; margin-block-start: var(--space-12);
  font-family: var(--font-family-mono); font-size: var(--font-xs);
  color: var(--subtle-foreground);
}
.hero.hero-photo .credit a { color: inherit; }

/* ── gate rail ───────────────────────────────────────────────────────
   The brandbook's own component. Its prose states the rule:
   "A filled dot is a machine gate; a ring is a gate where a named human
   signs. The distinction is shape, not colour — so it survives one-colour
   print, a photocopy and a colour-blind reader."
   Its CSS distinguishes them by colour instead. The prose is right, so the
   ring is implemented here. Worth telling Vitali.
   ------------------------------------------------------------------- */
.gaterail { overflow-x: auto; padding-block: var(--space-6) var(--space-2); }
.gaterail ol {
  display: flex; align-items: flex-start; min-inline-size: 44rem;
  list-style: none; margin: 0; padding: 0; max-width: none;
}
.gaterail li {
  flex: 1; position: relative; display: flex; flex-direction: column;
  gap: var(--space-2); padding-inline-end: var(--space-3); margin: 0;
}
.gaterail .dot {
  inline-size: 18px; block-size: 18px; border-radius: 50%;
  background: var(--brand-400); position: relative; z-index: 1;
}
.gaterail .human .dot {
  background: transparent;
  box-shadow: inset 0 0 0 3px var(--brand-400);   /* a ring, not a colour change */
}
.gaterail .rail {
  position: absolute; inset-block-start: 8px; inset-inline-start: 9px;
  inline-size: 100%; block-size: 2px; background: var(--neutral-800);
}
[data-theme="light"] .gaterail .rail { background: var(--neutral-300); }
.gaterail li:last-child .rail { display: none; }
.gaterail .no {
  font-family: var(--font-family-mono); font-size: 0.5625rem;
  letter-spacing: var(--tracking-label); color: var(--subtle-foreground);
}
.gaterail .nm { font-size: var(--font-sm); line-height: var(--leading-snug); }
.gaterail .by {
  font-family: var(--font-family-mono); font-size: 0.5625rem;
  letter-spacing: 0.08em; color: var(--subtle-foreground); text-transform: uppercase;
}
.gaterail .human .by { color: var(--accent); }
.railkey {
  display: flex; flex-wrap: wrap; gap: var(--space-6);
  font-size: var(--font-sm); color: var(--muted-foreground);
  margin-block-start: var(--space-4);
}
.railkey span { display: inline-flex; align-items: center; gap: var(--space-2); }
.railkey i { inline-size: 13px; block-size: 13px; border-radius: 50%; background: var(--brand-400); }
.railkey i.ring { background: transparent; box-shadow: inset 0 0 0 2.5px var(--brand-400); }

/* work cards without a screenshot: type only, no grey placeholder */
.workcard.notext { grid-template-columns: 1fr; }
.workcard .body .chip + .chip { margin-inline-start: var(--space-2); }
.workcard .sector {
  margin-block-start: var(--space-3); margin-bottom: 0;
  color: var(--subtle-foreground); font-size: var(--font-sm);
}
@media (min-width: 800px) { .workcard.notext .body { padding-block: var(--space-8); } }


/* ══════════════════════════════════════════════════════════════════════
   Structure, second pass.

   The first version boxed every idea. Sixteen cards on a home page of 827
   words: a three-word point and a forty-word point drew the same weight, so
   nothing led and the page ran four and a half screens. These three patterns
   replace most of that.
   ══════════════════════════════════════════════════════════════════════ */

/* ── editorial: label and heading hold a column, content sits beside ── */
.ed { display: grid; gap: var(--space-8); align-items: start; }
@media (min-width: 1080px) {
  .ed { grid-template-columns: 19rem 1fr; gap: var(--space-16); }
  .ed > .ed-head { position: sticky; inset-block-start: 104px; }
}
/* a section title, not a page title — the full display size wraps to four
   lines in a column this width and stops reading as a label */
.ed-head h2 { margin-bottom: var(--space-3); font-size: clamp(1.35rem, 2.3vw, 1.85rem); }
.ed-head p { color: var(--subtle-foreground); font-size: var(--font-sm); max-width: 30ch; }
.ed-body > :last-child { margin-bottom: 0; }

/* ── rulelist: a set of points, separated by rules, not by boxes ────── */
.rulelist { list-style: none; margin: 0; padding: 0; max-width: none; }
.rulelist > li {
  display: grid; gap: var(--space-1) var(--space-8); margin: 0;
  padding-block: var(--space-4);
  box-shadow: inset 0 -1px 0 0 var(--hairline);
}
.rulelist > li:first-child { padding-block-start: 0; }
.rulelist > li:last-child { box-shadow: none; padding-block-end: 0; }
@media (min-width: 780px) { .rulelist > li { grid-template-columns: 21rem 1fr; } }
/* inside the editorial frame the list is already in a column — splitting it
   again squeezes the text into a ribbon */
.ed .rulelist > li { grid-template-columns: 1fr; gap: var(--space-1); }
.rulelist .h { font-weight: 500; color: var(--foreground); }
.rulelist .d { color: var(--muted-foreground); }
.rulelist .d:only-child { grid-column: 1 / -1; }

/* ── offer: the three services, given the weight they earn ──────────── */
.offers { display: grid; gap: 1px; background: var(--hairline);
  border-radius: var(--radius-lg); overflow: hidden; margin-block-start: var(--space-8); }
.offer {
  background: var(--background); padding: var(--space-8) var(--space-6);
  display: grid; gap: var(--space-3); align-content: start;
  text-decoration: none; color: inherit; transition: background 160ms var(--ease);
}
.offer:hover { background: var(--card); color: inherit; }
.offer .no {
  font-family: var(--font-family-mono); font-size: var(--font-xs);
  letter-spacing: var(--tracking-label); color: var(--accent);
}
.offer h3 { margin: 0; font-size: clamp(1.15rem, 1.9vw, 1.45rem); }
.offer p { margin: 0; color: var(--muted-foreground); }
.offer .go { color: var(--accent); font-size: var(--font-sm); }
@media (min-width: 900px) { .offers { grid-template-columns: repeat(3, 1fr); } }

/* a grid, table, figure or list-of-cards that follows prose is a new block,
   not a continuation of the paragraph above it */
.section p + .grid, .section ul + .grid, .section p + .gates,
.section p + .rulelist, .section p + .tablewrap, .section p + .offers,
.section h2 + .grid, .section h3 + .grid { margin-block-start: var(--space-8); }
.section .grid + h2, .section .grid + h3,
.section .tablewrap + h2, .section .tablewrap + h3,
.section .rulelist + h2, .section .rulelist + h3 { margin-block-start: var(--space-16); }
.label { margin-block-end: var(--space-4); }
h2 + p, h2 + .lede { margin-block-start: var(--space-4); }

/* ── section rhythm: chapters, not a continuous scroll ──────────────── */
/* chapters. Every section is separated by a rule and equal air, so the page
   reads as parts rather than as one continuous scroll. */
.section { padding-block: clamp(var(--space-12), 5.5vw, var(--space-20)); }
.section + .section,
.section.ruled {
  box-shadow: inset 0 1px 0 0 color-mix(in srgb, var(--foreground) 11%, transparent);
}
.hero + .section, .hero + hr + .section { box-shadow: none; }

/* cards keep their job — parallel objects — but stop carrying essays */
.card p { font-size: var(--font-sm); }
.card h4 + p, .card h3 + p { margin-block-start: var(--space-1); }


/* ── stack: what a thing is built on, stated as chips ────────────────── */
.stack { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block: var(--space-4) 0;
  padding: 0; list-style: none; max-width: none; }
.stack li {
  margin: 0; font-family: var(--font-family-mono); font-size: var(--font-xs);
  letter-spacing: 0.03em; padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm); background: var(--card); color: var(--muted-foreground);
}
.stack li.live { color: var(--accent); background: var(--accent-muted); }
[data-theme="light"] .stack li.live { color: var(--brand-800); }
.stack-label {
  font-family: var(--font-family-mono); font-size: var(--font-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--subtle-foreground); margin-block-start: var(--space-12); margin-bottom: 0;
}