/* ═══════════════════════════════════════════════════════════════════════
   CODELIONS DESIGN SYSTEM — "Instrument"
   ───────────────────────────────────────────────────────────────────────
   One visual language across codelions.com, /overcli and /overgit.

   The idea: these are precision instruments for engineers, so the site
   reads like a well-set technical manual — warm paper, hairline rules,
   square corners, a strict mono/serif/sans split — and the product
   itself appears as a dark instrument slab dropped into that page.

   LAYERING
   Product pages load their own styles.css FIRST (it owns ~2–3k lines of
   hand-built app-mock chrome) and this file LAST. This file is therefore
   authoritative for every shared surface. Anything inside `.terminal`
   opts back into the dark product palette, so the legacy mock CSS keeps
   working untouched — that is the seam, and it is deliberate.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Paper ──
     Warm bone, pulled back a touch from the original #f7f5f0 so it reads as
     paper rather than cream. The warmth is the brand; the restraint is what
     keeps it from looking boutique. */
  --paper:      #f8f7f4;
  --paper-2:    #ffffff;   /* raised cell */
  --paper-3:    #eeece6;   /* sunken / alt fill */
  --paper-4:    #e6e3da;   /* deepest paper */

  /* ── Ink ──
     --ink-muted carries every eyebrow, chip and meta row, so it has to clear
     AA on paper: #8b8794 only managed 3.7:1 and read as washed out. */
  --ink:        #14141a;
  --ink-dim:    #55525f;   /* ~7:1 on paper, ~6.4:1 on paper-3 */
  --ink-muted:  #67646f;   /* ~5.3:1 on paper, ~4.9:1 on paper-3 */

  /* ── Rules (hairlines do the work that shadows would) ── */
  --line:        #e2ded6;
  --line-strong: #cbc6bb;

  /* ── Brand ──
     Deepened from #4f46c8. That violet read as consumer-AI and only cleared
     6.2:1; this sits in the same family as the app's own accent but at
     9.8:1 on paper, which is what makes it feel considered rather than
     bright. Ink stays the primary — the indigo is a signature, not a UI. */
  --accent:      #332ba0;
  --accent-hot:  #241d7d;
  --accent-wash: #eae8f8;
  --signal:      #b03c0a;   /* burnt orange — numerals + live state only.
                               Darkened from #c2410c so the section numerals
                               clear AA on the sunken --paper-3 bands too. */
  --signal-bright: #fb8b3c; /* same hue tuned for ink surfaces */
  --add:         #15803d;
  --rem:         #b91c1c;

  /* ── Product hues (shared with the apps) ── */
  --claude:  #b587ff;
  --codex:   #5b9cff;
  --gemini:  #3dced7;
  --copilot: #f471b5;
  --ollama:  #f29e4c;

  /* ── Legacy surface aliases ──
     Product stylesheets reference these by name. Light values here mean
     any rule we haven't restyled degrades onto paper instead of going
     dark-on-light. `.terminal` overrides them back to the app palette. */
  --bg:      var(--paper);
  --bg-lift: var(--paper-2);
  --bg-card: var(--paper-2);
  --bg-deep: var(--paper-3);

  /* ── Type ── */
  --f-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --f-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* ── Rhythm ──
     ONE content width for every page and every section — nav, hero, feature
     grids and the dark showcase slabs all sit on it. Long-form text is held
     back separately by per-element ch limits, so a wide column costs nothing
     in readability but stops the page looking narrow on a 1600px+ display. */
  --maxw:  1560px;
  --pad:   clamp(20px, 4vw, 60px);
  /* The measured content column — --maxw with both gutters removed. Use this
     for anything inside a full-bleed section so it lines up with the rest. */
  --col:   calc(var(--maxw) - var(--pad) * 2);
  --r:     4px;    /* square-ish. we are not a consumer app. */
  --r-lg:  6px;
}

/* Dark product palette. Everything inside a `.terminal` renders as the
 * app does — that contrast is the point, and it keeps ~3k lines of
 * existing mock CSS valid without edits. */
.terminal {
  --bg:          #141419;
  --bg-lift:     #1f1f27;
  --bg-card:     #272730;
  --bg-deep:     #0d0d11;
  --ink:         #f0f0f5;
  /* Brighter than the app's own dark theme on purpose. A dark panel sitting
   * in a bright page is read by an eye adapted to paper, so the values that
   * work in a full-screen dark UI look washed out here. Every step below
   * clears WCAG AA against its own surface. */
  --ink-dim:     #babac6;   /* ~9:1  */
  --ink-muted:   #9a9aa8;   /* ~6:1 — was #6b6b76 at 3.4:1 */
  --line:        #31313b;
  --line-strong: #45454f;
  --accent:      #96a2ff;
  --accent-hot:  #7c8bff;
  --add:         #5ee68f;
  --rem:         #ff8a8a;
  color: var(--ink);
}

/* ═══════════════════════════════ BASE ═══════════════════════════════ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.6;
  font-feature-settings: "cv05", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
}

/* The grain overlay belonged to the dark site. On paper it reads as dirt. */
.grain { display: none !important; }

::selection { background: var(--accent); color: #fff; }

/* Keyboard focus. Visible on both paper and slab, and never on mouse click. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
.terminal :focus-visible { outline-color: #8f9bff; }

/* Every in-page target clears the sticky bar when jumped to. */
[id] { scroll-margin-top: 84px; }

a { color: var(--accent); text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; }
code, kbd, pre, samp { font-family: var(--f-mono); }

code { font-size: 0.9em; }

kbd {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--paper-2);
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  font-size: 11px;
  color: var(--ink-dim);
  margin: 0 1px;
}
.terminal kbd { background: var(--bg-lift); }

.shell { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); }

/* ══════════════════════════ TYPE PRIMITIVES ══════════════════════════ */

/* Mono eyebrow with a leading tick — the recurring "label on a drawing". */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--line-strong);
  flex-shrink: 0;
}
.eyebrow .n { color: var(--signal); font-weight: 700; }
.terminal .eyebrow { color: var(--ink-muted); }

/* Full-bleed ruled section header: 01 ── LABEL ───────────────────── */
.rule-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 28px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.rule-head .n {
  color: var(--signal);
  font-weight: 700;
}
.rule-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.display {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(38px, 5.2vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 0;
}
.display .em {
  font-style: italic;
  color: var(--accent);
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.display-sm {
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.06;
  letter-spacing: -0.025em;
}

.lede {
  margin: 20px 0 0;
  font-size: clamp(16px, 1.35vw, 18.5px);
  line-height: 1.62;
  color: var(--ink-dim);
  max-width: 60ch;
}
.lede strong { color: var(--ink); font-weight: 600; }

/* ═══════════════════════════════ BUTTONS ═══════════════════════════════
   Square, mono, bracketed. The bracket is the wordmark's DNA and the
   single cheapest way to not look like every other SaaS pill. */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border: 1px solid transparent;
  border-radius: var(--r);
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 160ms, color 160ms, border-color 160ms, transform 160ms;
}
.btn-primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn-primary:hover { background: var(--accent-hot); border-color: var(--accent-hot); transform: translateY(-1px); }
.btn-accent {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn-accent:hover { background: var(--accent-hot); border-color: var(--accent-hot); transform: translateY(-1px); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-ghost:hover { border-color: var(--ink); background: var(--paper-2); transform: translateY(-1px); }
.btn .bk { color: currentColor; opacity: 0.42; font-weight: 400; }

.terminal .btn-ghost { color: var(--ink); border-color: var(--line-strong); }
.terminal .btn-ghost:hover { background: var(--bg-lift); border-color: var(--accent); }

/* A quiet tertiary link with a moving underline. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--f-mono);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 2px;
  transition: color 150ms, border-color 150ms, gap 150ms;
}
.link-arrow:hover { color: var(--accent); border-color: var(--accent); gap: 11px; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 32px;
}

/* ═══════════════════════════════ CHIPS ═══════════════════════════════ */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--paper-2);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
  white-space: nowrap;
}
.terminal .chip { background: var(--bg-lift); border-color: var(--line-strong); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

.dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink-muted);
  flex-shrink: 0;
}
.dot-ready { background: var(--add); box-shadow: 0 0 0 3px color-mix(in srgb, var(--add) 18%, transparent); }

/* ═══════════════════════════════ CARDS ═══════════════════════════════
   Hairline + square corner. No shadow. Hover promotes the rule to brand
   and slides a 2px marker down the left edge. */

.cell {
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 24px 24px 26px;
  transition: border-color 180ms, transform 180ms;
}
.cell::before {
  content: "";
  position: absolute;
  left: -1px; top: -1px; bottom: -1px;
  width: 2px;
  background: var(--accent);
  opacity: 0;
  transition: opacity 180ms;
}
.cell:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.cell:hover::before { opacity: 1; }

.cell-title {
  margin: 0 0 8px;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.cell-body {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-dim);
}
.cell-body code { color: var(--ink); background: var(--paper-3); padding: 1px 5px; border-radius: 3px; }
.cell-n {
  position: absolute;
  top: 20px; right: 20px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--line-strong);
}

/* ══════════════════════════════ SLABS ══════════════════════════════
   Full-bleed dark bands. This is where the product lives. */

.slab {
  position: relative;
  background: var(--bg);
  border-top: 1px solid #26262d;
  border-bottom: 1px solid #26262d;
  padding: clamp(56px, 8vw, 104px) 0;
  margin: clamp(56px, 8vw, 104px) 0;
}
.slab::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--claude) 45%, transparent 92%);
}
.slab-tight { padding: clamp(40px, 5vw, 68px) 0; }
.slab .display { color: var(--ink); }
.slab .lede { color: var(--ink-dim); }
.slab .rule-head { color: var(--ink-muted); }
.slab .rule-head::after { background: var(--line-strong); }
.slab .eyebrow::before { background: var(--line-strong); }

/* ══════════════════════════ SPEC / DATA PLATE ══════════════════════════
   Mono key–value rows. Reads as a machine plate, ties to the tmux
   status line in the footer. */

.plate {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper-2);
  overflow: hidden;
}
.terminal .plate { background: var(--bg-lift); border-color: var(--line-strong); }
.plate-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--paper-3);
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.terminal .plate-head { background: var(--bg-deep); border-color: var(--line-strong); }
.spec {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 12.5px;
}
.spec:last-child { border-bottom: 0; }
.spec dt, .spec .k {
  min-width: 88px;
  color: var(--ink-muted);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
}
.spec dd, .spec .v { margin: 0; color: var(--ink); }
.spec .v em { font-style: normal; color: var(--accent); }

/* ═══════════════════════════════ NAV ═══════════════════════════════ */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 28px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
  height: 62px;
  /* The surface lives on ::before; clear the product pages' own bar so it
   * doesn't paint a --maxw-wide band on top of the full-bleed one. */
  background: none;
  border-bottom: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* The nav bar is capped to --maxw so the wordmark lines up with the content
 * column, but its surface has to run the full viewport — otherwise a dark
 * slab scrolling underneath shows past the ends of the bar. */
.site-nav::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  transform: translateX(-50%);
  top: 0; bottom: 0;
  width: 100vw;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
  flex-shrink: 0;
}
.brand-bracket { color: var(--accent); font-weight: 500; margin: 0; }
/* The product icons are a black glyph on a transparent field, so the chip
 * behind them has to stay light — on an ink chip the mark disappears.
 * (Don't reach for filter: invert() here; it would invert the chip too.) */
.brand-mark {
  width: 26px; height: 26px;
  padding: 4px;
  border-radius: 5px;
  background: var(--paper-2);
  border: 1px solid var(--line-strong);
  box-shadow: none;
  object-fit: contain;
  flex-shrink: 0;
}
.brand-name {
  font-family: var(--f-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink);
  font-variation-settings: normal;
}
.brand-ver {
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-left: 10px;
  border-left: 1px solid var(--line);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
  list-style: none;
  margin: 0 0 0 auto;
  padding: 0;
}
.nav-links a {
  position: relative;
  font-family: var(--f-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-dim);
  text-decoration: none;
  white-space: nowrap;
  transition: color 150ms;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a::before {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -6px;
  height: 1px;
  background: var(--accent);
  transition: right 220ms cubic-bezier(.2,.8,.2,1);
}
.nav-links a:hover::before { right: 0; }
.nav-repo { color: var(--accent) !important; }
.nav-back {
  padding: 5px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  color: var(--ink-dim) !important;
  background: transparent;
  transition: border-color 150ms, color 150ms;
}
.nav-back::before { display: none; }
.nav-back:hover { border-color: var(--accent); color: var(--accent) !important; }

.nav-cta { margin-left: 4px; padding: 9px 14px; }
/* `.nav-links a` is more specific than `.btn-primary`, so without these the
 * nav CTA's label inherits --ink-dim and sits at 2.4:1 on the ink fill. */
.nav-links a.btn-primary { color: var(--paper); }
.nav-links a.btn-accent  { color: #fff; }
.nav-links a.btn-ghost   { color: var(--ink); }
.nav-links a.btn::before { display: none; }

/* The product navs carry eight section links plus an action, so they run out
 * of room well before phone widths. Tighten, then drop to brand + action. */
@media (max-width: 1240px) {
  .site-nav { gap: 18px; }
  .nav-links { gap: 15px; }
  .nav-links a { font-size: 12px; }
}
@media (max-width: 1120px) {
  .nav-links li:not(.nav-keep) { display: none; }
  .nav-links { margin-left: auto; gap: 12px; }
}
@media (max-width: 560px) {
  .brand-ver { display: none; }
}

/* ═════════════════════════ RELEASE RIBBON ═════════════════════════ */

/* Full-bleed ink band, but the row inside lines up with the nav below it.
 * The old `justify-content: center` + `max-width: 88ch` on the text left a
 * ~600px column marooned in the middle of a wide display. */
.release-ribbon {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 11px max(var(--pad), calc((100% - var(--maxw)) / 2 + var(--pad)));
  background: var(--ink);
  border-bottom: 0;
  color: #cfcdd8;
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 1.5;
  text-decoration: none;
  transition: background 180ms;
}
.release-ribbon:hover { background: #1e1e26; }
.release-ribbon strong { color: #fff; font-weight: 600; }
/* The one place the signal orange earns its keep at full size.
 * `border: 0` matters — the product pages ship a pale outlined pill here,
 * which otherwise draws a ring around the solid badge. */
.rr-badge {
  padding: 3px 9px;
  border: 0;
  border-radius: 2px;
  background: var(--signal-bright);
  color: #1a0d05;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.rr-text { flex: 1 1 32ch; min-width: 0; text-align: left; }
.rr-cta { color: #a9a4ff; white-space: nowrap; margin-left: auto; }

/* ═══════════════════════════════ HERO ═══════════════════════════════ */

.hero {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(44px, 5.5vw, 76px) var(--pad) clamp(40px, 5vw, 72px);
  background: none;
}
.hero-inner {
  max-width: none;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.26fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
}
@media (max-width: 1000px) {
  .hero-inner { grid-template-columns: 1fr; }
}

/* Legacy hero copy elements, restyled onto paper. */
.kicker {
  display: block;
  max-width: 62ch;
  text-wrap: balance;   /* stops the last word orphaning onto its own line */
  margin: 0 0 22px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.headline {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  /* Sized to hold "Five coding agents." on one line in the hero's left
   * column at desktop width; the app mock takes the rest. */
  font-size: clamp(38px, 4.4vw, 60px);
  line-height: 1.03;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 0;
}
.headline .em,
.headline-line.em {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.headline-line { display: block; }

.hero .lede,
.hero-left .lede {
  margin: 22px 0 0;
  font-family: var(--f-sans);
  font-size: clamp(15.5px, 1.25vw, 17.5px);
  line-height: 1.62;
  color: var(--ink-dim);
  max-width: 58ch;
}
.hero .lede code,
.hero-left .lede code {
  color: var(--ink);
  background: var(--paper-3);
  border: 1px solid var(--line);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 0.86em;
}
.lede-pun {
  margin: 14px 0 0;
  font-family: var(--f-mono);
  font-size: 12.5px;
  color: var(--ink-muted);
  letter-spacing: 0.01em;
  font-style: normal;
}
.lede-pun .pun-over { color: var(--ink); font-weight: 600; }
.lede-pun .pun-dot  { color: var(--accent); }
.lede-pun .pun-cli  { color: var(--accent); font-weight: 700; letter-spacing: 0.08em; }
.lede-pun em { font-style: italic; color: var(--ink-dim); }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 32px 0 0;
}

/* Legacy button classes → new system. */
.btn-bracket { color: currentColor; opacity: 0.42; font-weight: 400; }
.btn-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r);
  background: transparent;
  color: var(--ink-dim);
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 150ms, color 150ms;
}
.btn-chip:hover { border-color: var(--accent); color: var(--accent); }

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  line-height: 1.4;
}
.hero-meta li { display: inline-flex; align-items: center; gap: 7px; }
.hero-meta .meta-sep { color: var(--line-strong); }
.hero-meta .dot { width: 6px; height: 6px; border-radius: 50%; margin: 0; }
.hero-meta .dot-ready { background: var(--add); box-shadow: 0 0 0 3px color-mix(in srgb, var(--add) 18%, transparent); }

/* The app mock sits in a dark frame that bleeds slightly out of the grid. */
.hero-right { position: relative; }
.app-window.terminal,
.terminal .app-window {
  border-radius: var(--r-lg);
  border: 1px solid #2b2b34;
  box-shadow: 0 40px 80px -32px rgba(20, 20, 26, 0.45),
              0 2px 0 0 rgba(255, 255, 255, 0.04) inset;
  animation: none;
  transform: none;
}
/* The mock was sized for a full-bleed dark hero. On paper it only has to
 * out-weigh the copy beside it — 640px left a dead band above the headline. */
.terminal .app-body { height: 588px; }
@media (max-width: 1000px) { .terminal .app-body { height: 520px; } }

/* The hero demo clears the transcript between backends (app.js empties
 * [data-chat-cards]), which left a tall void under a half-filled pane.
 * Anchor the transcript to the composer the way a real chat does, so the
 * empty space sits above the messages and reads as scrolled-off history. */
.terminal .chat-scroll { display: flex; flex-direction: column; }
.terminal .chat-cards { margin-top: auto; }

/* Caption sits on paper, below the window — paper ink, not slab ink. */
.hero-caption {
  margin: 16px 2px 0 0;
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-style: normal;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  text-align: right;
}

/* ═══════════════════════════ SECTION HEADS ═══════════════════════════ */

.features,
.download,
.story,
.colosseum {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(56px, 8vw, 104px) var(--pad);
  background: none;
  border: 0;
}
/* A showcase section that carries product UI becomes a full-bleed dark
 * slab. Its inner grids constrain themselves to --maxw already. */
.colosseum.terminal {
  position: relative;
  max-width: none;
  background: var(--bg);
  border-top: 1px solid #26262d;
  border-bottom: 1px solid #26262d;
  padding: clamp(56px, 8vw, 104px) var(--pad);
  margin: clamp(48px, 6vw, 88px) 0;
}
.colosseum.terminal::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--claude) 45%, transparent 92%);
}
.colosseum.terminal + .colosseum.terminal { margin-top: calc(clamp(48px, 6vw, 88px) * -1); }
/* Everything sits on the same column.
 * A `.colosseum.terminal` is full-bleed and supplies the gutter itself, so
 * its children have to stop at --maxw MINUS both gutters to line up with
 * sections whose gutter is inside their max-width. Getting this wrong is
 * what made the page look like it got wider further down. */
.colosseum.terminal > *,
.colosseum.terminal .col-grid,
.colosseum.terminal .flows-featured,
.colosseum.terminal .orch-batch { max-width: var(--col); }

/* Five backends, five columns. A 4-up grid strands ollama on its own row,
 * and "five coding agents" side by side is the whole point of the section. */
.col-grid {
  max-width: var(--maxw);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 1560px) { .col-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (max-width: 1040px) { .col-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px)  { .col-grid { grid-template-columns: 1fr; } }

.terminal .section-title,
.terminal .display-title { color: var(--ink); }
.terminal .section-lede,
.terminal .colosseum-lede { color: var(--ink-dim); }
.terminal .kicker { color: var(--ink-muted); }

.section-head {
  max-width: 760px;
  margin: 0 0 clamp(28px, 4vw, 52px);
}
.section-head.centered { margin-inline: auto; text-align: center; }
.section-title {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(30px, 3.8vw, 50px);
  line-height: 1.04;
  letter-spacing: -0.028em;
  color: var(--ink);
  font-variation-settings: "opsz" 144, "SOFT" 30;
}
.section-lede {
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 1.62;
  color: var(--ink-dim);
  max-width: 62ch;
}
.display-title {
  margin: 0 0 18px;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(30px, 4vw, 54px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variation-settings: "opsz" 144, "SOFT" 30;
}
.display-title .em {
  font-style: italic;
  color: var(--accent);
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.display-title span { display: block; }
@media (min-width: 760px) {
  .display-title span { display: inline; }
  .display-title span:not(:last-child)::after { content: " "; }
}
.slab .display-title,
.terminal .display-title { color: var(--ink); }
.colosseum-head { max-width: 820px; margin: 0 auto clamp(32px, 5vw, 60px); text-align: center; }
.colosseum-lede { margin: 0 auto; color: var(--ink-dim); font-size: 16px; max-width: 62ch; }

/* ══════════════════════════ FEATURE GRID ══════════════════════════
   Hairline lattice: one shared 1px grid, cells sit on paper. */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
@media (max-width: 1000px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .feature-grid { grid-template-columns: 1fr; } }

.feature {
  position: relative;
  background: var(--paper-2);
  padding: 26px 24px 28px;
  min-height: 178px;
  transition: background 180ms;
}
.feature:hover { background: var(--paper); }
.feature-num {
  position: absolute;
  top: 20px; right: 22px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--line-strong);
  transition: color 180ms;
}
.feature:hover .feature-num { color: var(--signal); }
.feature h3 {
  margin: 0 0 10px;
  padding-right: 46px;
  font-family: var(--f-mono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--accent);
  font-variation-settings: normal;
}
.feature p {
  margin: 0;
  font-family: var(--f-sans);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-dim);
}
.feature code { color: var(--ink); background: var(--paper-3); padding: 1px 5px; border-radius: 3px; font-size: 0.88em; }
.feature em { color: var(--ink); font-style: italic; font-family: var(--f-sans); }
.feature kbd { font-size: 10.5px; }
/* Secondary note under a feature, split off by a dashed rule. Lives here
 * with the rest of .feature — it was previously only in overcli's sheet,
 * so the same markup rendered unstyled on the overgit page. */
.feature p.feature-note {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  font-size: 12.5px;
  color: var(--ink-muted);
  font-style: normal;
}
.feature p.feature-note em { color: var(--ink-dim); font-style: italic; }

.feat-link { color: var(--accent); border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.feat-link:hover { border-color: var(--accent); }

/* ═════════════════════════════ DOWNLOAD ═════════════════════════════ */

/* minmax(0,…): a <table> refuses to shrink below its min-content width, so
 * a plain 1.7fr track lets it overflow and sit under the note beside it. */
.dl-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
@media (max-width: 900px) { .dl-wrap { grid-template-columns: 1fr; } }
.dl-table { table-layout: fixed; }
.dl-format { white-space: nowrap; }
.dl-size { white-space: nowrap; width: 92px; }
.dl-action { width: 136px; }

.dl-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--paper-2);
}
.dl-table td {
  padding: 18px 16px;
  border-top: 1px solid var(--line);
  vertical-align: middle;
}
.dl-table tr:first-child td { border-top: 0; }
.dl-table tr:hover { background: var(--paper); }
/* Stay a real table-cell — the product pages force `display:flex` here,
 * which drops the cell out of the row and leaves ragged row rules. */
.dl-platform { display: table-cell !important; white-space: nowrap; }
.dl-platform > span:last-child { display: inline-block; vertical-align: middle; }
.dl-glyph {
  width: 34px; height: 34px;
  display: inline-grid;
  place-items: center;
  vertical-align: middle;
  margin-right: 13px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--paper-3);
  font-family: var(--f-mono);
  font-size: 15px;
  color: var(--ink-dim);
}
.dl-platform strong {
  display: block;
  font-family: var(--f-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.dl-platform em {
  font-style: normal;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.dl-format, .dl-size {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}
.dl-size { text-align: right; }
.dl-action { text-align: right; }
.dl-btn {
  display: inline-flex;
  align-items: center;
  padding: 9px 14px;
  border: 1px solid var(--ink);
  border-radius: var(--r);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 160ms, border-color 160ms;
}
.dl-btn:hover { background: var(--accent-hot); border-color: var(--accent-hot); }
.dl-btn .btn-bracket { opacity: 0.45; }

.dl-note {
  padding: 22px 22px 24px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left: 2px solid var(--signal);
  border-radius: var(--r);
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-dim);
}
.dl-note p { margin: 0 0 12px; }
.dl-note p:last-child { margin-bottom: 0; }
.note-tag {
  font-family: var(--f-mono);
  font-size: 10.5px !important;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signal) !important;
}
.dl-note em { font-style: italic; color: var(--ink); }
.dl-note strong { color: var(--ink); }
.note-snippet {
  margin-top: 16px !important;
  padding: 12px 14px;
  background: var(--ink);
  border: 0;
  border-radius: 3px;
  font-family: var(--f-mono);
  font-size: 11px;
  color: #dcdae6;
  overflow-x: auto;
  white-space: nowrap;
}
.snippet-prompt { color: #8b93ff; margin-right: 10px; user-select: none; }
.note-foot { font-size: 12px !important; color: var(--ink-muted) !important; font-style: italic; }

/* ══════════════════════════════ STORY ══════════════════════════════ */

.story-body { max-width: 68ch; margin: 0 auto; }
.story-body p {
  margin: 0 0 20px;
  font-size: 17px;
  line-height: 1.78;
  color: var(--ink-dim);
  text-align: left;
}
.story-body p strong { color: var(--ink); font-weight: 600; }
.story-body a { color: var(--accent); border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.story-title { margin-bottom: 28px; }
.story-sig {
  margin-top: 32px !important;
  padding-top: 20px;
  border-top: 1px solid var(--line) !important;
  font-family: var(--f-mono) !important;
  font-size: 12.5px !important;
  letter-spacing: 0.04em;
  color: var(--ink-muted) !important;
  text-align: center !important;
}

/* ══════════════════════════════ FAQ ══════════════════════════════ */

/* Product-page FAQ: sticky title on the left, questions on the right. */
.faq-section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(56px, 8vw, 104px) var(--pad);
}
.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr; gap: 20px; } }
@media (min-width: 901px) { .faq-grid .section-head { position: sticky; top: 96px; } }
.faq-grid .section-head { margin-bottom: 0; }

.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--f-sans);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: color 150ms;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 18px;
  font-weight: 400;
  color: var(--ink-muted);
  transition: color 150ms, transform 200ms;
}
.faq-item[open] summary { color: var(--accent); }
.faq-item[open] summary::after { content: "−"; color: var(--accent); }
.faq-item summary:hover { color: var(--accent); }
.faq-item p {
  margin: 0 0 22px;
  max-width: 74ch;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-dim);
}

/* ══════════════════════════ FOOTER / STATUS LINE ══════════════════════════
   The tmux status line is the most Codelions thing on the site. Keep it,
   invert it onto ink so it reads as a terminal strip on paper. */

.site-footer {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 88px) var(--pad) 48px;
  background: none;
  border: 0;
}
.status-line {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  overflow-x: auto;
  white-space: nowrap;
  background: var(--ink);
  border-radius: var(--r);
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: #9d99ab;
  scrollbar-width: none;
  border-bottom: 0;
  padding: 0;
}
.status-line::-webkit-scrollbar { display: none; }
.sl-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 14px;
  border-right: 1px solid #26262d;
  color: #9d99ab;
}
.sl-cell:last-child { border-right: 0; }
.sl-cell a { color: #cfcdd8; text-decoration: none; transition: color 150ms; }
.sl-cell a:hover { color: #a9a4ff; }
.sl-brand {
  background: var(--accent);
  color: #fff !important;
  font-weight: 700;
  border-right-color: var(--accent);
}
.sl-brand a { color: #fff; }
.sl-mark { width: 14px; height: 14px; border-radius: 3px; background: #fff; padding: 1px; object-fit: contain; }
.sl-spacer { flex: 1; border-right: 0; min-width: 12px; }
.sl-clock { color: #fff; background: #26262d; font-variant-numeric: tabular-nums; }

.footer-fine {
  max-width: 96ch;
  margin: 20px 0 0;
  padding: 0;
  font-family: var(--f-mono);
  font-size: 11.5px;
  line-height: 1.85;
  color: var(--ink-muted);
}
.footer-fine code { color: var(--ink-dim); background: var(--paper-3); padding: 0 4px; border-radius: 3px; }
.footer-dogfood { color: var(--ink-dim); }
.footer-dogfood a { color: var(--accent); }
.footer-hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--ink-muted);
  cursor: pointer;
  transition: color 150ms;
}
.footer-hint:hover { color: var(--accent); }
.footer-hint kbd { padding: 0 5px; font-size: 10px; }

/* ════════════════════════════ STORY MODAL ════════════════════════════ */

.story-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(28px, 6vh, 80px) var(--pad);
  background: color-mix(in srgb, var(--ink) 55%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow-y: auto;
  transition: opacity .18s ease, visibility 0s linear .18s;
}
.story-overlay[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .18s ease;
}
.story-modal {
  width: 100%;
  max-width: 720px;
  background: var(--paper-2);
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--accent);
  border-radius: var(--r-lg);
  box-shadow: 0 40px 90px -30px rgba(20, 20, 26, 0.45);
  transform: translateY(-8px);
  transition: transform .22s ease;
}
.story-overlay[aria-hidden="false"] .story-modal { transform: translateY(0); }
.story-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--paper-3);
}
.story-modal-tag {
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.story-modal-close {
  padding: 5px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: var(--paper-2);
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  cursor: pointer;
  transition: color 150ms, border-color 150ms;
}
.story-modal-close:hover { color: var(--accent); border-color: var(--accent); }
.story-modal-body { padding: 30px 34px 26px; }
@media (max-width: 720px) { .story-modal-body { padding: 22px 22px 18px; } }
.story-modal-title {
  margin: 0 0 22px !important;
  font-family: var(--f-display);
  font-size: clamp(24px, 3.2vw, 36px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.story-modal-title span { display: block; }
.story-modal-title .em {
  font-style: italic;
  color: var(--accent);
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.story-modal-body p {
  margin: 0 0 16px;
  font-family: var(--f-sans);
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--ink-dim);
}
.story-modal-body p em { color: var(--ink); font-style: italic; }
.story-modal-body p code { background: var(--paper-3); border: 1px solid var(--line); padding: 0 5px; border-radius: 3px; color: var(--ink); font-size: 12.5px; }
.story-modal-body p a { color: var(--accent); border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.story-modal-sig {
  margin-top: 26px !important;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-family: var(--f-mono) !important;
  font-size: 12px !important;
  color: var(--ink-muted) !important;
}
.story-modal-sig a { color: var(--ink-dim); border-bottom: 1px solid var(--line-strong); }
.story-modal-foot {
  padding: 12px 22px;
  border-top: 1px solid var(--line);
  background: var(--paper-3);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  text-align: center;
}
.story-modal-foot kbd { font-size: 10px; padding: 0 5px; }

/* ════════════════════════════ ⌘P PALETTE ════════════════════════════ */

.palette-overlay { background: color-mix(in srgb, var(--ink) 55%, transparent); }
.palette {
  background: var(--paper-2);
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--accent);
  border-radius: var(--r-lg);
  box-shadow: 0 40px 90px -30px rgba(20, 20, 26, 0.45);
}
.palette-head { background: var(--paper-3); border-bottom: 1px solid var(--line); }
.palette-caret {
  background: var(--paper-2);
  border: 1px solid var(--line-strong);
  color: var(--accent);
  border-radius: 3px;
}
#palette-input { color: var(--ink); }
#palette-input::placeholder { color: var(--ink-muted); }
.palette-close { background: var(--paper-2); border: 1px solid var(--line-strong); color: var(--ink-dim); border-radius: 3px; }
.palette-close:hover { color: var(--accent); border-color: var(--accent); }
.palette-results li { color: var(--ink-dim); border-radius: 3px; }
.palette-results li.hi { background: var(--accent-wash); color: var(--ink); }
.palette-results li .hit { color: var(--accent); }
.palette-results li .dir { color: var(--ink-muted); }
.palette-foot { border-top: 1px solid var(--line); color: var(--ink-dim); background: var(--paper-3); }

/* ══════════════════════════ NARROW SCREENS ══════════════════════════
   Kept at the end of the file on purpose: @media adds no specificity,
   so these have to come after the component rules they override. */

/* Narrow screens: the showcase diagrams were laid out for desktop only and
 * had no breakpoints, so a 5-step chain (min-width:132px each) forced the
 * overcli page to 805px wide on a 390px phone. Stack the two-column
 * builders, and let the horizontal chains scroll inside their own rail
 * rather than stretching the document. */
@media (max-width: 900px) {
  .flow-builder,
  .flows-featured,
  .dl-wrap { grid-template-columns: 1fr; }
  .flow-builder > *,
  .orch-stages > * { min-width: 0; }
  .orch-stages { grid-template-columns: 1fr; }
  .orch-arrow { display: none; }
}
@media (max-width: 760px) {
  .flow-builder-rail,
  .frun-chain,
  .flow-run-head { overflow-x: auto; scrollbar-width: none; }
  .flow-builder-rail::-webkit-scrollbar,
  .frun-chain::-webkit-scrollbar { display: none; }
  .flow-step { min-width: 118px; }

  /* 84px + 1fr + auto + auto never fits a phone; wrap it into two rows. */
  .orch-lane { grid-template-columns: auto 1fr; row-gap: 6px; }
  .orch-lane .ol-title { grid-column: 2; white-space: normal; }
  .orch-lane .ol-flow,
  .orch-lane .ol-meta { grid-column: 2; justify-self: start; }
}

/* The download table's secondary columns are the first thing to go. */
@media (max-width: 680px) {
  .dl-table, .dl-table tbody, .dl-table tr { display: block; width: 100%; }
  .dl-table td { display: block; border-top: 0; padding: 6px 16px; }
  /* the base rule forces table-cell with !important — match it to unstack */
  .dl-platform { display: block !important; white-space: normal; }
  .dl-table tr { border-top: 1px solid var(--line); padding: 14px 0; }
  .dl-table tr:first-child { border-top: 0; }
  .dl-format, .dl-size, .dl-action { width: auto; text-align: left; }
  .dl-action { padding-top: 12px; }
  .note-snippet { white-space: pre-wrap; word-break: break-all; }
}


/* ════════════════════════════ MOTION ════════════════════════════ */

.reveal { opacity: 0; transform: translateY(16px); transition: opacity 600ms cubic-bezier(.2,.8,.2,1), transform 600ms cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}