:root {
  /* ─────────── COLOR — Core (use these first) ─────────── */
  --ds-black:        #000000;
  --ds-white:        #FFFFFF;
  --ds-cream:        #EFEFE5; /* aka "Paper" — workhorse background */
  --ds-red:          #EE272A; /* d. Dot Red — accent, never full bg */
  --ds-cardinal:     #8C1515; /* Stanford Cardinal — deep red overlap */
  --ds-aqua:         #8CDEE3; /* d.school aqua — full-bleed alternative bg */

  /* ─────────── COLOR — Secondary "Colors Beyond" ───────────
     For FROM / WITH / AROUND tiers. Pick 2–3 per artifact. */
  --ds-mustard:      #D9A521; /* mustard / ochre */
  --ds-salmon:       #F08A7E; /* salmon / coral */
  --ds-terracotta:   #B2533C; /* burnt terracotta / brick */
  --ds-olive:        #5C6B2E; /* olive / forest */
  --ds-slate:        #4A6B7C; /* slate / dusty teal */
  --ds-butter:       #F4D35E; /* soft yellow (disco) */
  --ds-sky:          #7FB3C8; /* dusty sky */
  --ds-plum:         #6B2C5F; /* deep plum */

  /* ─────────── Semantic surface / ink ─────────── */
  --ds-bg:           var(--ds-cream);
  --ds-bg-inverse:   var(--ds-black);
  --ds-surface:      var(--ds-cream);
  --ds-surface-2:    #E7E6DA;             /* slightly darker cream */
  --ds-ink:          var(--ds-black);
  --ds-ink-mute:     #4A4A45;             /* warm-leaning gray on cream */
  --ds-ink-faint:    #8A8A82;
  --ds-ink-inverse:  var(--ds-cream);
  --ds-accent:       var(--ds-red);
  --ds-accent-deep:  var(--ds-cardinal);
  --ds-line:         var(--ds-black);     /* hairline borders are black */
  --ds-line-soft:    rgba(0,0,0,0.12);

  /* ─────────── TYPE — Families ─────────── */
  /* Primary (paid, "as-needed") → mapped to Google fallbacks */
  --ds-font-signifier:  "Gloock", "Playfair Display", Georgia, serif;          /* hearty display serif */
  --ds-font-gt-america: "Inter", system-ui, -apple-system, Segoe UI, sans-serif; /* workhorse sans */
  --ds-font-the-future: "Poppins", "Ojuju", system-ui, sans-serif;             /* geometric display */

  /* Semantic font roles */
  --ds-font-display: "Gloock", "Playfair Display", Georgia, serif;
  --ds-font-display-fat: "Alfa Slab One", "Ultra", Georgia, serif;
  --ds-font-display-condensed: "Ultra", "Alfa Slab One", Impact, serif;
  --ds-font-display-geo: "Poppins", "Ojuju", system-ui, sans-serif;
  --ds-font-display-activist: "Climate Crisis", "Alfa Slab One", Impact, serif;
  --ds-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ds-font-mono: "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ─────────── TYPE — Scale (50%+ rule between levels) ─────────── */
  /* Each step is ≥ 50% jump from the next. Pick wide-apart steps; don't crowd. */
  --ds-fs-mega:    clamp(64px, 10vw, 160px); /* Hero / poster */
  --ds-fs-display: clamp(48px, 6.5vw, 96px); /* Section opener */
  --ds-fs-h1:      clamp(36px, 4.5vw, 64px);
  --ds-fs-h2:      clamp(28px, 3vw, 40px);
  --ds-fs-h3:      22px;
  --ds-fs-body:    17px;
  --ds-fs-small:   14px;
  --ds-fs-caption: 12px; /* ALL CAPS attribution / labels */

  /* Line heights — tight on display, loose on body */
  --ds-lh-display: 0.95;
  --ds-lh-heading: 1.08;
  --ds-lh-body:    1.5;
  --ds-lh-caption: 1.25;

  /* Tracking */
  --ds-tr-display: -0.02em;
  --ds-tr-tight:   -0.01em;
  --ds-tr-body:    0;
  --ds-tr-caption: 0.08em; /* for tiny ALL CAPS labels */

  /* ─────────── SPACE — 4-base scale ─────────── */
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 24px;
  --ds-space-6: 32px;
  --ds-space-7: 48px;
  --ds-space-8: 64px;
  --ds-space-9: 96px;
  --ds-space-10: 128px;

  /* ─────────── RADIUS ───────────
     Few rounded things. Pills for small buttons + chips only.
     "Don't pill-shape large buttons." */
  --ds-radius-0: 0px;
  --ds-radius-1: 2px;
  --ds-radius-2: 6px;
  --ds-radius-pill: 999px;
  --ds-radius-card: 14px; /* photo cards — gentle, not glossy */

  /* ─────────── BORDERS ─────────── */
  --ds-border-hair: 1px solid var(--ds-line);
  --ds-border-bold: 2px solid var(--ds-line);
  --ds-border-thicc: 3px solid var(--ds-line); /* for outlined buttons */

  /* ─────────── SHADOW ───────────
     Used sparingly — brand prefers flat + overprint. Mostly for photos
     and lifted cards in disco-mode contexts. */
  --ds-shadow-0: none;
  --ds-shadow-1: 0 1px 0 rgba(0,0,0,0.06);
  --ds-shadow-2: 0 4px 16px rgba(0,0,0,0.08);
  --ds-shadow-photo: 0 18px 40px -16px rgba(0,0,0,0.35);

  /* ─────────── EASING / MOTION ───────────
     Subtle, expressive. Bounces are fine when they're earned. */
  --ds-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ds-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ds-ease-bouncy: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ds-dur-fast: 120ms;
  --ds-dur: 220ms;
  --ds-dur-slow: 420ms;

  /* ─────────── LAYOUT ─────────── */
  --ds-page-max: 1280px;
  --ds-side-rail: 56px; /* vertical sidebar / sideways labels */
}

/* ─────────────────────────────────────────────────────────────
   GLOBAL — body baseline
   ───────────────────────────────────────────────────────────── */
html, body {
  background: var(--ds-bg);
  color: var(--ds-ink);
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body);
  line-height: var(--ds-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ─────────────────────────────────────────────────────────────
   TYPE — Semantic classes
   Use .ds-mega / .ds-display for poster-scale headlines.
   Use .ds-h1..h3 for in-page hierarchy.
   ───────────────────────────────────────────────────────────── */
.ds-mega {
  font-family: var(--ds-font-display);
  font-size: var(--ds-fs-mega);
  line-height: var(--ds-lh-display);
  letter-spacing: var(--ds-tr-display);
  font-weight: 400;
  text-wrap: balance;
}
.ds-mega--fat {
  font-family: var(--ds-font-display-fat);
}
.ds-mega--condensed {
  font-family: var(--ds-font-display-condensed);
}
.ds-mega--activist {
  font-family: var(--ds-font-display-activist);
}

.ds-display {
  font-family: var(--ds-font-display);
  font-size: var(--ds-fs-display);
  line-height: var(--ds-lh-display);
  letter-spacing: var(--ds-tr-display);
  font-weight: 400;
  text-wrap: balance;
}
.ds-display--italic {
  font-style: italic;
}

.ds-h1 {
  font-family: var(--ds-font-display);
  font-size: var(--ds-fs-h1);
  line-height: var(--ds-lh-heading);
  letter-spacing: var(--ds-tr-tight);
  font-weight: 400;
}
.ds-h2 {
  font-family: var(--ds-font-body);
  font-weight: 700;
  font-size: var(--ds-fs-h2);
  line-height: var(--ds-lh-heading);
  letter-spacing: var(--ds-tr-tight);
}
.ds-h3 {
  font-family: var(--ds-font-body);
  font-weight: 600;
  font-size: var(--ds-fs-h3);
  line-height: 1.2;
}

.ds-body {
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body);
  line-height: var(--ds-lh-body);
}
.ds-small {
  font-size: var(--ds-fs-small);
  line-height: 1.4;
}
.ds-caption {
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-caption);
  letter-spacing: var(--ds-tr-caption);
  text-transform: uppercase;
  font-weight: 600;
  line-height: var(--ds-lh-caption);
}
.ds-mono {
  font-family: var(--ds-font-mono);
  font-size: 14px;
}

/* Hand-drawn aside / margin note — playful, italic serif */
.ds-aside {
  font-family: var(--ds-font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--ds-ink);
}

/* Sideways label (vertical bar / sidebar) */
.ds-sidelabel {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--ds-font-body);
  font-weight: 600;
  font-size: var(--ds-fs-caption);
  letter-spacing: var(--ds-tr-caption);
  text-transform: uppercase;
}

/* ─────────────────────────────────────────────────────────────
   ELEMENT defaults (raw h1/h2/p — opt in by wrapping in .ds-prose)
   ───────────────────────────────────────────────────────────── */
.ds-prose h1 { font: 400 var(--ds-fs-h1)/var(--ds-lh-heading) var(--ds-font-display); letter-spacing: var(--ds-tr-tight); margin: 0 0 var(--ds-space-5); }
.ds-prose h2 { font: 700 var(--ds-fs-h2)/var(--ds-lh-heading) var(--ds-font-body); letter-spacing: var(--ds-tr-tight); margin: var(--ds-space-7) 0 var(--ds-space-3); }
.ds-prose h3 { font: 600 var(--ds-fs-h3)/1.2 var(--ds-font-body); margin: var(--ds-space-6) 0 var(--ds-space-2); }
.ds-prose p  { margin: 0 0 var(--ds-space-4); max-width: 62ch; }
.ds-prose a  { color: var(--ds-ink); text-decoration: underline; text-underline-offset: 3px; }
.ds-prose a:hover { color: var(--ds-red); }

/* ─────────────────────────────────────────────────────────────
   OVERPRINT — paint two color fields and let the overlap mix.
   `mix-blend-mode: multiply` gives the silkscreen / riso feel.
   ───────────────────────────────────────────────────────────── */
.ds-overprint { mix-blend-mode: multiply; }

/* ─────────────────────────────────────────────────────────────
   UTILITIES
   ───────────────────────────────────────────────────────────── */
.ds-cream { background: var(--ds-cream); color: var(--ds-black); }
.ds-black { background: var(--ds-black); color: var(--ds-cream); }
.ds-red   { background: var(--ds-red);   color: var(--ds-black); }
.ds-cardinal { background: var(--ds-cardinal); color: var(--ds-cream); }

/* The "d. dot" — drop one anywhere as an accent */
.ds-dot {
  display: inline-block;
  width: 0.7em; height: 0.7em;
  background: var(--ds-red);
  border-radius: 50%;
  vertical-align: -0.05em;
  margin-left: 0.05em;
}


/* Register --t so calc() can use it inside transforms / lengths.
   Without this, `calc(var(--t) * 100%)` is treated as invalid and the
   browser silently drops the transform. */
@property --t {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

/* ===== Page tokens (driven by JS via --t in [0..1]) ===== */
:root {
  --t: 0;
  --bg: #EFEFE5;          /* cream → black */
  --ink: #000000;         /* black → cream */
  --ink-mute: #4A4A45;
  --surface-2: #E7E6DA;
  --line-soft: rgba(0,0,0,0.12);
  --accent: var(--ds-red);
  --accent-deep: var(--ds-cardinal);

  --display-font: var(--ds-font-display); /* Gloock by default */
  --density: 1;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ds-font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background 320ms var(--ds-ease-in-out), color 320ms var(--ds-ease-in-out);
}

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

a { color: inherit; text-decoration: none; }

/* ============== TOP RAIL — the Riff⇄Firr slider ============== */
.rail {
  position: sticky; top: 0; z-index: 80;
  background: var(--bg);
  border-bottom: 1px solid var(--line-soft);
  padding: 14px 28px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  transition: background 320ms var(--ds-ease-in-out), border-color 320ms var(--ds-ease-in-out);
}

.rail-logo {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-family: var(--ds-font-display);
  font-size: 22px; letter-spacing: -0.02em;
  color: var(--ink);
  cursor: pointer;
}
.rail-logo .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent);
  display: inline-block;
  transform: translateY(-1px);
}
.rail-logo small {
  font-family: var(--ds-font-body);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid var(--line-soft);
}

.rail-nav {
  justify-self: end;
  display: flex; gap: 22px; align-items: center;
}
.rail-nav a {
  font-size: 13px; font-weight: 500;
  color: var(--ink); opacity: 0.85;
  cursor: pointer;
  transition: opacity .15s, color .15s;
}
.rail-nav a:hover { color: var(--accent); opacity: 1; }
.rail-nav .login {
  padding: 8px 16px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em;
  transition: background .15s, color .15s;
}
.rail-nav .login:hover { background: var(--ink); color: var(--bg); }

/* The slider — center column of the rail.
   Flat: thin ink stroke, no gradient sheen, no glow.
   Pill reveals/replaces text underneath rather than carrying its own. */
.flipper {
  position: relative;
  width: min(520px, 60vw);
  height: 46px;
  background: transparent;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  user-select: none;
  touch-action: none;
  cursor: grab;
  transition: border-color 320ms var(--ds-ease-in-out);
  overflow: hidden;
}
.flipper.dragging { cursor: grabbing; }

/* Two identical label layers stacked. Static = ink color (behind pill).
   Inverse = white, inside the pill, counter-translated so the right label
   stays visually pinned over the static one when the pill slides. */
.flipper-labels {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  pointer-events: none;
}
.flipper-labels--inverse {
  width: 200%;
  left: 0;
}
.flipper-label {
  font-family: var(--display-font);
  font-size: 19px;
  text-align: center;
  letter-spacing: -0.01em;
  line-height: 1;
  transition: color 320ms;
}
.flipper-labels--static .flipper-label { color: var(--ink); }
.flipper-labels--inverse .flipper-label { color: #FFFFFF; }

/* The sliding red pill — clips the inverse-label layer.
   3px padding on all sides keeps stroke breathing room. */
.flipper-pill {
  position: absolute;
  top: 3px; bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  background: var(--accent);
  border-radius: 999px;
  transform: translateX(0%);
  transition: transform 380ms var(--ds-ease-bouncy);
  overflow: hidden;
  pointer-events: none;
}
.flipper.dragging .flipper-pill { transition: none; }
.flipper-pill .flipper-labels {
  transition: transform 380ms var(--ds-ease-bouncy);
}
.flipper.dragging .flipper-pill .flipper-labels { transition: none; }

/* Invisible click halves so single-clicks snap to a side. */
.flipper-half {
  position: absolute;
  top: 0; bottom: 0;
  width: 50%;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: inherit;
  z-index: 4;
}
.flipper-half--l { left: 0; }
.flipper-half--r { right: 0; }

/* tiny help text under flipper, absolute */
.flipper-hint {
  position: absolute;
  top: 100%; left: 50%;
  transform: translate(-50%, 8px);
  font-size: 11px; font-weight: 500;
  color: var(--ink-mute);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.7;
  pointer-events: none;
}

/* ============== HERO ============== */
.hero {
  position: relative;
  padding: calc(96px * var(--density)) 64px calc(120px * var(--density));
  max-width: 1480px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  column-gap: 48px;
  align-items: start;
}
.hero-text {
  position: relative;
  min-width: 0;
}
.hero .sidelabel {
  position: absolute;
  left: -36px; top: 8px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.hero .sidelabel::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
  margin-bottom: 12px;
  transform: rotate(180deg);
}

.hero h1 {
  font-family: var(--display-font);
  font-size: clamp(44px, 5.6vw, 92px);
  line-height: 1.0;
  letter-spacing: -0.028em;
  font-weight: 400;
  margin: 0;
  /* natural three-line wrap on big viewports without forced <br> */
  max-width: 12ch;
  text-wrap: balance;
  hyphens: none;
  word-break: normal;
  overflow-wrap: break-word;
}
.hero h1 em {
  font-style: italic;
}
.hero h1 .swap-line {
  display: block;
}
.hero h1 .red {
  color: var(--accent);
  position: relative;
}

.hero .lede {
  margin: 32px 0 0;
  font-family: var(--ds-font-body);
  font-size: clamp(17px, 1.25vw, 20px);
  line-height: 1.5;
  max-width: 42ch;
  color: var(--ink-mute);
  font-style: normal;
  font-weight: 400;
}

.hero .meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 44px;
}
.hero .meta .btn {
  padding: 14px 22px;
  font-weight: 600; font-size: 14px;
  letter-spacing: 0.01em;
  border-radius: 4px;
  cursor: pointer;
  transition: transform .12s, background .15s, color .15s;
}
.hero .meta .btn-primary {
  background: var(--ink); color: var(--bg);
}
.hero .meta .btn-primary:hover { transform: translateY(-1px); background: var(--accent); color: #fff; }
.hero .meta .btn-ghost {
  background: transparent; color: var(--ink);
  border: 1.5px solid var(--ink);
}
.hero .meta .btn-ghost:hover { transform: translateY(-1px); background: var(--ink); color: var(--bg); }

.hero .footnote {
  margin-top: 28px;
  font-size: 13px;
  color: var(--ink-mute);
  font-style: italic;
}
.hero .footnote sup {
  color: var(--accent);
  font-weight: 700;
}

/* Hero artwork — transparent PNG floating on page bg.
   No card chrome, no shadow. A diagonal gradient and a bottom fade
   in page-bg color clip the artwork visually when it scales up in Ffir
   mode, so the big cube fades into the section instead of bleeding. */
.hero-art {
  position: relative;
  container-type: inline-size;
  container-name: art;
  width: 100%;
  max-width: 620px;
  aspect-ratio: 1 / 1;
  margin-top: 0;
  justify-self: end;
  align-self: start;
  /* Clip the transformed image so it stays within the hero section
     and never bleeds into the next. */
  overflow: hidden;
}
.hero-art-stage {
  position: absolute;
  inset: 0;
  /* keep clipped slightly past the box so adjacent sections never see the
     transformed image edge mid-toggle. Achieved with a soft bg-fade ::before
     (kept inside, since the parent is visible). */
}
.hero-art-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  background-image: url("hero-riff.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform-origin: 38% 0%;
  transform: scale(1);
  transition: transform 800ms var(--ds-ease-bouncy);
  will-change: transform;
}
/* When Ffir is active, zoom into the small red-top cube */
[data-mode="firr"] .hero-art-img {
  transform: scale(2.4);
}

/* Diagonal wipe mask — only present in Ffir mode. Sits above the
   image, fades the big cube into the page bg along a diagonal seam. */
.hero-art-mask {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms var(--ds-ease-in-out);
  background: linear-gradient(
    160deg,
    transparent 0%,
    transparent 58%,
    var(--bg) 78%,
    var(--bg) 100%
  );
}
[data-mode="firr"] .hero-art-mask { opacity: 1; }

/* "Meet Riff / Ffir" handwritten note + curved arrow.
   Scales with .hero-art via container query units. Arrow sits BELOW the text. */
.meet-note {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 0.8cqw;
  color: var(--ink);
  width: 30cqw;
}
.meet-note--riff { top: 6cqw; left: 2cqw; text-align: left; align-items: flex-start; }
.meet-note--firr { top: 6cqw; right: 2cqw; text-align: right; align-items: flex-end; }

.meet-text em {
  display: block;
  font-family: var(--display-font);
  font-style: italic;
  font-size: 4.4cqw;
  line-height: 1;
  letter-spacing: -0.02em;
}
.meet-text small {
  display: block;
  font-family: var(--ds-font-body);
  font-style: normal;
  font-size: 1.5cqw;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 0.6cqw;
}

.meet-note--firr .meet-text em { font-size: 5.4cqw; }
.meet-note--firr .meet-text small { font-size: 1.8cqw; }

/* Arrow lives directly below the text block, sized to it. */
.meet-arrow {
  display: block;
  width: 22cqw;
  height: 15cqw;
  color: var(--accent);
  overflow: visible;
}
.meet-note--firr .meet-arrow { /* arrow reads right-to-left; flip into right column */ }

/* draw-on once per mode-change (key={mode} remounts) */
.ma-curve, .ma-head {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  animation: draw-on 900ms var(--ds-ease-out) forwards;
}
.ma-head {
  animation-delay: 700ms;
}
@keyframes draw-on {
  to { stroke-dashoffset: 0; }
}

/* ============== SECTION SHELL ============== */
.section {
  padding: calc(96px * var(--density)) 80px;
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
}
.section + .section { padding-top: 0; }

.section-kicker {
  display: flex; align-items: center; gap: 12px;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 28px;
}
.section-kicker::before {
  content: "";
  width: 36px; height: 1.5px;
  background: var(--accent);
}

.section h2 {
  font-family: var(--display-font);
  font-size: clamp(40px, 5.4vw, 78px);
  line-height: 1.02;
  letter-spacing: -0.024em;
  font-weight: 400;
  margin: 0 0 28px;
  max-width: 18ch;
  text-wrap: balance;
}
.section h2 em { font-style: italic; }
.section h2 .red { color: var(--accent); }

.section .lede {
  font-family: var(--display-font);
  font-style: italic;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.45;
  max-width: 42ch;
  color: var(--ink);
  margin: 0 0 56px;
}

/* ============== MECHANIC — the two-panel diagram ============== */
.mechanic {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 32px;
  align-items: stretch;
  margin-top: 24px;
}
.mech-panel {
  border: 1px solid var(--line-soft);
  padding: 36px 32px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--surface-2);
  transition: background 320ms, border-color 320ms;
  position: relative;
}
.mech-panel.is-active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.mech-panel.is-active .mech-role { color: var(--bg); }
.mech-panel.is-active .mech-label { color: var(--accent); }

.mech-name {
  font-family: var(--display-font);
  font-size: 56px;
  line-height: 0.95;
  letter-spacing: -0.02em;
}
.mech-label {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.mech-role {
  font-family: var(--display-font);
  font-style: italic;
  font-size: 22px;
  line-height: 1.4;
  margin: 0;
  color: var(--ink);
}
.mech-flow {
  display: flex; gap: 10px;
  align-items: center;
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: auto;
  flex-wrap: wrap;
}
.mech-flow .pill {
  padding: 6px 12px;
  border: 1px solid currentColor;
  border-radius: 999px;
  opacity: 0.85;
}
.mech-flow .arrow {
  color: var(--accent);
  font-weight: 700;
  font-size: 16px;
}

.mech-switch {
  align-self: center;
  font-family: var(--display-font);
  font-style: italic;
  font-size: 22px;
  color: var(--ink-mute);
  padding: 0 8px;
}

/* ============== CHAT DEMO ============== */
/* Extra vertical breathing room from neighbours. */
.chat-section {
  padding-top: calc(120px * var(--density));
  padding-bottom: calc(120px * var(--density));
}

.chat-wrap {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: start;
  margin-top: 8px;
}
.chat-wrap .copy h3 {
  font-family: var(--display-font);
  font-size: clamp(28px, 2.8vw, 42px);
  letter-spacing: -0.015em;
  margin: 0 0 18px;
  line-height: 1.05;
  font-weight: 400;
}
.chat-wrap .copy p {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.55;
  max-width: 48ch;
  color: var(--ink);
}
.chat-wrap .copy .aside {
  margin-top: 22px;
  padding: 14px 16px;
  border-left: 3px solid var(--accent);
  font-family: var(--display-font);
  font-style: italic;
  font-size: 17px;
  line-height: 1.45;
  color: var(--ink);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.chat {
  border: 1px solid var(--line-soft);
  background: var(--surface-2);
  border-radius: 8px;
  overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 460px;
}
.chat-head {
  padding: 14px 18px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg);
  transition: background 320ms;
}
.chat-head .who {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600;
}
.chat-head .who .badge {
  width: 28px; height: 28px;
  border-radius: 50%;
  background-color: #99dbda;
  background-image: url("riff-badge.png");
  background-repeat: no-repeat;
  background-size: 190% 190%;
  background-position: 52% 72%; /* big cube — Riff */
  transition: background-size 500ms var(--ds-ease-bouncy), background-position 500ms var(--ds-ease-bouncy);
  border: 1.5px solid var(--bg);
}
[data-mode="firr"] .chat-head .who .badge {
  background-size: 460% 460%;
  background-position: 37% 16%; /* small cube — Firr */
}
.chat-head .mode-tag {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.chat-body {
  flex: 1;
  padding: 22px 20px;
  overflow-y: auto;
  display: flex; flex-direction: column;
  gap: 14px;
  background: var(--surface-2);
  font-size: 15px;
  line-height: 1.5;
}
.msg {
  max-width: 86%;
  padding: 12px 16px;
  border-radius: 14px;
  position: relative;
  animation: msg-in 380ms var(--ds-ease-out);
}
@keyframes msg-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.msg.bot {
  align-self: flex-start;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line-soft);
  border-bottom-left-radius: 4px;
}
.msg.you {
  align-self: flex-end;
  background: var(--ink);
  color: var(--bg);
  border-bottom-right-radius: 4px;
}
.msg .who-tag {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  display: block;
  margin-bottom: 4px;
  opacity: 0.55;
}
.msg.bot .who-tag { color: var(--accent); opacity: 1; }

.typing {
  display: inline-flex; gap: 4px; padding: 4px 0;
}
.typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-mute);
  animation: blink 1.2s infinite;
}
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .30s; }
@keyframes blink { 0%,100%{opacity:0.2} 50%{opacity:1} }

.chat-input {
  display: flex; gap: 8px;
  padding: 14px;
  border-top: 1px solid var(--line-soft);
  background: var(--bg);
}
.chat-input input {
  flex: 1;
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 12px 18px;
  font-family: var(--ds-font-body);
  font-size: 14px;
  color: var(--ink);
  outline: none;
  transition: border-color .15s;
}
.chat-input input::placeholder { color: var(--ink-mute); font-style: italic; }
.chat-input input:focus { border-color: var(--accent); }
.chat-input button {
  background: var(--ink); color: var(--bg);
  border: 0;
  padding: 0 22px;
  border-radius: 999px;
  font-weight: 600; font-size: 14px;
  cursor: pointer;
  transition: background .15s;
}
.chat-input button:hover { background: var(--accent); color: #fff; }
.chat-input button:disabled { opacity: 0.4; cursor: not-allowed; }
.chat-input button.reset {
  background: transparent;
  color: var(--ink-mute);
  padding: 0 14px;
  font-size: 18px;
}
.chat-input button.reset:hover { color: var(--accent); background: transparent; }

.chat-suggestions {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 0 14px 12px;
  background: var(--bg);
}
.chat-suggestions button {
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--ds-font-body);
  transition: background .15s, color .15s, border-color .15s;
}
.chat-suggestions button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ============== FOR LEARNERS / EDUCATORS ============== */
.audiences-section h2.audiences-h {
  font-family: var(--display-font);
  font-size: clamp(56px, 7vw, 104px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin: 0 0 64px;
  font-weight: 400;
  max-width: none;
  text-wrap: pretty;
}
.audiences-section h2.audiences-h em {
  font-style: italic;
  color: var(--accent);
}
.audiences-section h2.audiences-h .amp {
  font-family: var(--display-font);
  font-style: italic;
  color: var(--ink-mute);
  font-weight: 400;
}

.audiences {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0 64px;
  align-items: start;
  margin-top: 8px;
}

/* Two-column row grid. Subgrid lets each column inherit the same
   row tracks from .audiences, so feature rows line up horizontally
   even when copy length differs. */
.audiences {
  /* corner, h3, lede, then one auto row per feature */
  grid-template-rows: auto auto auto auto auto auto;
}

.aud-col {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 6;
}
.aud-col--learners { grid-column: 1; }
.aud-col--educators { grid-column: 3; }
.aud-divider { grid-column: 2; grid-row: 1 / -1; }
.aud-feats {
  display: contents;
}
.aud-feat {
  /* each feat occupies one of the subgrid rows */
}

.aud-corner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 28px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--ink);
}
.aud-corner-tag {
  font-family: var(--ds-font-body);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
}
.aud-corner-role {
  font-family: var(--display-font);
  font-style: italic;
  font-size: 18px;
  color: var(--accent);
  white-space: nowrap;
}
.aud-corner-role .arrow {
  font-family: var(--ds-font-body);
  font-style: normal;
  display: inline-block;
  margin: 0 4px;
}

.aud-col h3 {
  font-family: var(--display-font);
  font-size: clamp(32px, 3.4vw, 48px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  font-weight: 400;
}
.aud-col h3 em { font-style: italic; color: var(--accent); }
.aud-col .aud-lede {
  margin: 0 0 36px;
  font-family: var(--display-font);
  font-style: italic;
  font-size: 20px;
  line-height: 1.4;
  max-width: 38ch;
  color: var(--ink);
  opacity: 0.92;
}
.aud-col .aud-lede em { font-style: italic; color: var(--accent); }

.aud-divider {
  position: relative;
  background: var(--line-soft);
  width: 1px;
  align-self: stretch;
}
.aud-dot {
  position: absolute;
  top: 96px;
  left: 50%;
  transform: translate(-50%, 0);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
}

.aud-feats {
  list-style: none;
  margin: 0;
  padding: 0;
}
.aud-feat {
  display: grid;
  grid-template-columns: 64px 1fr;
  column-gap: 20px;
  padding: 24px 0;
  border-top: 1px solid var(--line-soft);
  align-items: start;
}
.aud-feat:last-child { border-bottom: 1px solid var(--line-soft); }
.aud-num {
  font-family: var(--display-font);
  font-style: italic;
  font-size: 52px;
  line-height: 1;
  color: var(--accent);
  font-weight: 400;
  text-align: left;
  /* Nudge cap-height of the italic digit up to match h4 text top */
  margin-top: -0.12em;
}
.aud-feat-body h4 {
  font-family: var(--ds-font-body);
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 8px;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.aud-feat-body p {
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
  max-width: 52ch;
  color: var(--ink);
  opacity: 0.85;
}

/* ============== USE CASES (Firr-side, sibling positioning) ============== */
.usecases {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 8px;
}
.usecase {
  border: 1px solid var(--line-soft);
  padding: 24px 22px;
  border-radius: 4px;
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 240px;
  transition: transform .15s, background .15s, color .15s, border-color .15s;
  position: relative;
  overflow: hidden;
}
.usecase:hover {
  transform: translateY(-3px);
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.usecase:hover .uc-num { color: var(--accent); }
.uc-num {
  font-family: var(--display-font);
  font-style: italic;
  font-size: 18px;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
}
.uc-title {
  font-family: var(--display-font);
  font-size: 26px;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0;
  font-weight: 400;
}
.uc-body {
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  opacity: 0.85;
  margin-top: auto;
}
.uc-tag {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ============== RESEARCH & ROOTS ============== */
.research {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.read-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 28px 32px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  transition: transform 220ms var(--ds-ease-out), background 220ms, color 220ms, border-color 220ms;
  position: relative;
  overflow: hidden;
}
.read-card::after {
  content: "";
  position: absolute;
  right: 18px; top: 18px;
  width: 14px; height: 14px;
  border-radius: 999px;
  background: var(--accent);
  opacity: 0;
  transition: opacity 220ms;
}
.read-card:hover {
  transform: translateY(-3px);
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.read-card:hover::after { opacity: 1; }
.read-card:hover .read-kind { color: var(--accent); }
.read-card:hover .read-cta { color: var(--accent); }
.read-card:hover .read-venue { color: var(--bg); opacity: 0.7; }

.read-meta {
  display: flex; align-items: baseline; gap: 12px;
  font-family: var(--ds-font-body);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.read-kind { color: var(--accent); }
.read-year { color: var(--ink-mute); }
.read-title {
  margin: 6px 0 0;
  font-family: var(--display-font);
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 400;
  text-wrap: balance;
}
.read-venue {
  font-family: var(--display-font);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-mute);
}
.read-blurb {
  margin: 4px 0 0;
  font-size: 15px;
  line-height: 1.55;
  max-width: 46ch;
}
.read-cta {
  margin-top: auto;
  padding-top: 10px;
  font-family: var(--display-font);
  font-style: italic;
  font-size: 18px;
  color: var(--accent);
  transition: color 220ms;
}

.research-foot {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: start;
  border-top: 1px solid var(--line-soft);
  padding-top: 40px;
}
.lineage-title {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--ds-font-body);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 18px;
}
.lineage-asterisk {
  font-family: var(--display-font);
  font-style: italic;
  font-size: 24px;
  color: var(--accent);
  line-height: 0.8;
  position: relative;
  top: 4px;
}
.lineage-list {
  list-style: none;
  margin: 0; padding: 0;
}
.lineage-list li {
  display: grid;
  grid-template-columns: minmax(120px, 160px) 1fr auto;
  gap: 18px;
  padding: 16px 0;
  border-top: 1px solid var(--line-soft);
  align-items: baseline;
}
.lineage-list li:last-child { border-bottom: 1px solid var(--line-soft); }
.lin-who {
  font-family: var(--display-font);
  font-style: italic;
  font-size: 20px;
  letter-spacing: -0.01em;
}
.lin-what {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink);
}
.lin-cite {
  font-family: var(--ds-font-body);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  white-space: nowrap;
}
.research-note .rn-eyebrow {
  font-family: var(--ds-font-body);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.research-note .rn-title {
  font-family: var(--display-font);
  font-style: italic;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 10px;
  font-weight: 400;
}
.research-note p {
  margin: 0;
  font-family: var(--ds-font-body);
  font-style: normal;
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: 0;
  max-width: 52ch;
  color: var(--ink);
  opacity: 0.88;
}

/* Body-text variant of section lede (no italic display font) */
.section .lede.lede--body {
  font-family: var(--ds-font-body);
  font-style: normal;
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--ink);
  opacity: 0.85;
}

/* ============== FAQ ============== */
.faq {
  max-width: 920px;
  margin: 0 auto;
}
.faq .qa {
  border-top: 1px solid var(--line-soft);
  padding: 22px 0;
  cursor: pointer;
  transition: padding .2s;
}
.faq .qa:last-child { border-bottom: 1px solid var(--line-soft); }
.faq .qa-q {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 24px;
}
.faq .qa-q h4 {
  font-family: var(--display-font);
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.2;
  margin: 0;
  font-weight: 400;
  letter-spacing: -0.015em;
}
.faq .qa-toggle {
  flex-shrink: 0;
  color: var(--accent);
  font-size: 22px;
  font-weight: 400;
  font-family: var(--display-font);
  transition: transform .25s var(--ds-ease-bouncy);
}
.faq .qa.open .qa-toggle { transform: rotate(45deg); }
.faq .qa-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s var(--ds-ease-in-out), margin-top .25s, opacity .25s;
  opacity: 0;
}
.faq .qa.open .qa-a {
  max-height: 400px;
  margin-top: 14px;
  opacity: 1;
}
.faq .qa-a p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  max-width: 62ch;
  color: var(--ink);
  opacity: 0.85;
}

/* ============== CTA ============== */
.cta-block {
  margin: 64px auto 0;
  padding: 80px 80px;
  max-width: 1280px;
  background: var(--accent);
  color: #fff;
  border-radius: 4px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.cta-block > * { position: relative; z-index: 1; }
.cta-block h2 {
  font-family: var(--display-font);
  font-size: clamp(36px, 4.6vw, 64px);
  line-height: 1.0;
  letter-spacing: -0.022em;
  margin: 0 0 12px;
  font-weight: 400;
  max-width: 18ch;
  color: #fff;
}
.cta-block p {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
  max-width: 42ch;
  opacity: 0.95;
}
.cta-actions {
  display: flex; flex-direction: column; gap: 12px;
}
.cta-actions .btn {
  padding: 16px 26px;
  border-radius: 4px;
  font-weight: 600; font-size: 15px;
  text-align: center;
  cursor: pointer;
  transition: transform .12s, background .15s;
}
.cta-actions .btn-solid {
  background: #000; color: #fff;
}
.cta-actions .btn-solid:hover { background: #fff; color: #000; }
.cta-actions .btn-line {
  background: transparent;
  border: 2px solid #fff;
  color: #fff;
}
.cta-actions .btn-line:hover { background: #fff; color: var(--accent); }
.cta-block::before {
  content: "";
  position: absolute;
  right: -120px; bottom: -120px;
  width: 360px; height: 360px;
  border-radius: 50%;
  border: 28px solid rgba(0,0,0,0.18);
  pointer-events: none;
  z-index: 0;
}

/* ============== FOOTER ============== */
.footer {
  margin-top: 80px;
  padding: 80px 80px 40px;
  background: var(--ink);
  color: var(--bg);
  transition: background 320ms, color 320ms;
}
.footer .inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px;
}
.footer h5 {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 18px;
}
.footer .brand h2 {
  font-family: var(--display-font);
  font-size: 48px;
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin: 0 0 14px;
  font-weight: 400;
  color: var(--bg);
}
.footer .brand p {
  font-size: 14px;
  line-height: 1.55;
  max-width: 38ch;
  color: var(--bg);
  opacity: 0.75;
  margin: 0;
}
.footer ul {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.footer ul a {
  font-size: 14px;
  color: var(--bg);
  opacity: 0.85;
  transition: color .15s, opacity .15s;
}
.footer ul a:hover { color: var(--accent); opacity: 1; }
.footer .meta {
  max-width: 1280px;
  margin: 56px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(239,239,229,0.12);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px;
  color: var(--bg);
  opacity: 0.6;
}

/* ============== Decorative bits ============== */
.d-dot-accent {
  display: inline-block;
  width: 0.6em; height: 0.6em;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: 0.05em;
  margin-left: 2px;
}

/* ============== Stat strip ============== */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  margin: 32px 0 0;
}
.stat {
  padding: 28px 24px;
  border-right: 1px solid var(--line-soft);
}
.stat:last-child { border-right: 0; }
.stat .n {
  font-family: var(--display-font);
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);
}
.stat .n sup { font-size: 0.6em; }
.stat .l {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ============== utility ============== */
.swap-fade {
  display: inline-block;
  transition: opacity .25s, color .25s;
}
.swap-fade.is-out { opacity: 0; }

/* ============== RESPONSIVE ============== */

/* Large desktop → narrower desktop: tighten gaps, ease the column ratio */
@media (max-width: 1180px) {
  .hero {
    padding-left: 64px;
    padding-right: 64px;
    column-gap: 40px;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
  .hero h1 { font-size: clamp(44px, 6.2vw, 88px); }
  .section { padding-left: 64px; padding-right: 64px; }
  .cta-block { padding: 64px; }
  .footer { padding-left: 64px; padding-right: 64px; }
  .footer .inner { gap: 36px; }
  .chat-wrap { gap: 40px; }
  .research-foot { gap: 48px; }
  .audiences { gap: 0 40px; }
}

/* Tablet landscape: hero stacks (art below), other multi-col layouts hold */
@media (max-width: 960px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    padding: 72px 48px 88px;
    column-gap: 0;
  }
  .hero h1 {
    font-size: clamp(52px, 9vw, 96px);
    max-width: 14ch;
  }
  .hero-art {
    justify-self: start;
    width: 100%;
    max-width: 520px;
    margin: 40px 0 0;
  }
  .hero .sidelabel { left: -28px; }
  .section { padding: 80px 48px; }
  .cta-block { padding: 56px 48px; }
  .footer { padding: 64px 48px 36px; }
  .footer .inner { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer .brand { grid-column: 1 / -1; }
  .usecases { grid-template-columns: repeat(2, 1fr); }
  .research { grid-template-columns: 1fr; }
}

/* Tablet portrait / large phone */
@media (max-width: 760px) {
  .rail {
    grid-template-columns: 1fr auto;
    padding: 12px 20px;
    gap: 16px;
  }
  .rail-nav { display: none; }
  .flipper { grid-column: 1 / -1; grid-row: 2; width: 100%; height: 42px; }
  .flipper-label { font-size: 17px; }
  .rail-logo { font-size: 20px; }
  .rail-logo small {
    display: none;
  }

  .hero { padding: 56px 24px 72px; }
  .hero .sidelabel { display: none; }
  .hero h1 {
    font-size: clamp(44px, 11vw, 72px);
    max-width: none;
  }
  .hero .lede {
    font-size: clamp(16px, 4vw, 19px);
    margin-top: 28px;
    max-width: none;
  }
  .hero .meta { margin-top: 32px; }
  .hero .meta .btn { padding: 13px 20px; flex: 1 1 auto; text-align: center; }
  .hero-art {
    max-width: none;
    margin-top: 32px;
  }

  .section {
    padding: 64px 24px;
  }
  .section h2 { font-size: clamp(34px, 8vw, 52px); }
  .section .lede { font-size: clamp(18px, 4.2vw, 22px); margin-bottom: 40px; }

  .mechanic { grid-template-columns: 1fr; gap: 16px; }
  .mech-switch { display: none; }
  .mech-panel { padding: 28px 24px; }
  .mech-name { font-size: 44px; }
  .mech-role { font-size: 19px; }

  .chat-wrap { grid-template-columns: 1fr; gap: 32px; }
  .chat { min-height: 420px; }

  .audiences-section h2.audiences-h { font-size: clamp(40px, 10vw, 64px); margin-bottom: 40px; }
  .audiences { grid-template-columns: 1fr; grid-template-rows: none; gap: 48px; }
  .aud-divider { display: none; }
  .aud-col { display: block; grid-row: auto; }
  .aud-feats { display: block; }
  .aud-col h3 { font-size: clamp(28px, 6.8vw, 38px); }
  .aud-feat { grid-template-columns: 48px 1fr; column-gap: 14px; padding: 20px 0; }
  .aud-num { font-size: 40px; }

  .usecases { grid-template-columns: 1fr; }
  .usecase { min-height: 0; padding: 22px 20px; }

  .research { grid-template-columns: 1fr; }
  .read-card { padding: 24px 22px 28px; }
  .research-foot { grid-template-columns: 1fr; gap: 36px; padding-top: 32px; margin-top: 36px; }
  .lineage-list li { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; }
  .lin-cite { justify-self: start; }
  .lin-who { font-size: 18px; }

  .faq .qa { padding: 18px 0; }

  .cta-block {
    margin-top: 48px;
    grid-template-columns: 1fr;
    padding: 44px 28px;
    gap: 28px;
  }
  .cta-block h2 { font-size: clamp(32px, 8vw, 48px); }
  .cta-block::before {
    right: -150px; bottom: -150px;
    width: 280px; height: 280px;
    border-width: 22px;
  }

  .footer { margin-top: 64px; padding: 56px 24px 32px; }
  .footer .inner { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer .brand { grid-column: 1 / -1; }
  .footer .brand h2 { font-size: 40px; }
  .footer .meta { flex-direction: column; gap: 8px; align-items: flex-start; }

  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat { border-bottom: 1px solid var(--line-soft); padding: 22px 18px; }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-last-child(-n+2) { border-bottom: 0; }
  .stat .n { font-size: 36px; }
}

/* Small phone — tighten further */
@media (max-width: 420px) {
  .hero { padding: 48px 20px 64px; }
  .hero h1 { font-size: clamp(40px, 12vw, 56px); }
  .hero .meta { flex-direction: column; align-items: stretch; }
  .hero .meta .btn { width: 100%; }
  .section { padding: 56px 20px; }
  .footer { padding: 48px 20px 28px; }
  .footer .inner { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .stat { border-right: 0; }
  .stat:not(:last-child) { border-bottom: 1px solid var(--line-soft); }
  .cta-block { padding: 36px 22px; }
}
/* ── v2 additions ─────────────────────────────── */
:root{--t:0;--bg:var(--ds-cream);--ink:var(--ds-black);--ink-mute:#4A4A45;--surface-2:#E7E6DA;--line-soft:rgba(0,0,0,0.12);--accent:var(--ds-red);--display-font:var(--ds-font-display);--density:1}
a{color:var(--ink)}a:hover{color:var(--accent)}
.rail-nav .rail-cta{background:var(--ink);color:var(--bg);padding:8px 18px;border-radius:var(--ds-radius-pill);font-size:13.5px;font-weight:600;cursor:pointer;transition:transform 160ms var(--ds-ease-out),background 160ms,color 160ms}
.rail-nav .rail-cta:hover{transform:translateY(-1px);background:var(--accent);color:#fff}
.chat--embed .chat-frame,.bot-modal .chat-frame{flex:1;width:100%;border:0;display:block;min-height:620px;background:#fff}
.bot-modal-overlay{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,0.55);display:flex;align-items:center;justify-content:center;padding:24px;animation:bm-fade 220ms var(--ds-ease-out)}
.bot-modal{width:min(520px,100%);max-height:min(780px,calc(100vh - 48px));display:flex;flex-direction:column;background:var(--surface-2);border:1px solid var(--ds-line);border-radius:8px;overflow:hidden;box-shadow:var(--ds-shadow-photo);animation:bm-pop 320ms var(--ds-ease-bouncy)}
.bot-modal .chat-frame{min-height:520px}
.bot-modal-actions{display:flex;align-items:center;gap:12px}
.bot-modal-close{border:0;background:transparent;font-size:26px;line-height:1;cursor:pointer;color:var(--ink);padding:0 2px;font-family:inherit}
.bot-modal-close:hover{color:var(--accent)}
.bot-modal-empty{flex:1;min-height:320px;display:flex;align-items:center;justify-content:center;text-align:center;padding:32px;font-size:15px;color:var(--ink-mute);background:var(--surface-2)}
/* Access application form */
.access-form{padding:22px;display:flex;flex-direction:column;gap:14px;overflow-y:auto;background:var(--surface-2)}
.af-intro{font-size:13.5px;line-height:1.5;color:var(--ink-mute)}
.af-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.af-field{display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-mute)}
.af-field input,.af-field textarea{border:1px solid var(--ds-line);background:var(--bg);padding:11px 12px;font:15px/1.4 var(--ds-font-body);color:var(--ink);border-radius:2px;outline:none}
.af-field input:focus,.af-field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.af-field textarea{resize:vertical;min-height:76px}
.af-field.is-err input,.af-field.is-err textarea{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.af-roles{display:flex;flex-wrap:wrap;gap:8px}
.af-role{border:1px solid var(--ds-line);background:var(--bg);color:var(--ink);padding:8px 14px;border-radius:var(--ds-radius-pill);font:500 13.5px var(--ds-font-body);cursor:pointer;transition:background 140ms,color 140ms,transform 140ms var(--ds-ease-out)}
.af-role:hover{transform:translateY(-1px)}
.af-role.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.af-err{font-size:13px;color:var(--accent);font-weight:600}
.af-submit{border:0;background:var(--ink);color:var(--bg);padding:14px 22px;font:600 15px var(--ds-font-body);cursor:pointer;transition:transform 160ms var(--ds-ease-out),background 160ms,color 160ms;align-self:flex-start}
.af-submit:hover{transform:translateY(-1px);background:var(--accent);color:#fff}
.af-fine{font-size:12px;color:var(--ink-mute)}
.af-success{flex:1;min-height:380px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:12px;padding:36px;background:var(--surface-2)}
.af-success .af-dot{width:16px;height:16px;border-radius:50%;background:var(--accent);margin-bottom:6px}
.af-success h4{font-family:var(--display-font);font-size:30px;font-weight:400;color:var(--ink)}
.af-success p{font-size:15px;line-height:1.55;color:var(--ink-mute);max-width:38ch}
@keyframes bm-fade{from{opacity:0}}
@keyframes bm-pop{from{opacity:0;transform:translateY(14px) scale(0.98)}}
/* Access ticket — launcher card */
.access-ticket{cursor:pointer;background:var(--bg);border:1px solid var(--ds-line);display:flex;flex-direction:column;min-height:460px;transform:rotate(-1.2deg);transition:transform 220ms var(--ds-ease-bouncy),box-shadow 220ms;box-shadow:var(--ds-shadow-2)}
.access-ticket:hover{transform:rotate(0deg) translateY(-2px);box-shadow:var(--ds-shadow-photo)}
.at-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;border-bottom:1px solid var(--ds-line)}
.at-brand{font-family:var(--display-font);font-size:20px;color:var(--ink);display:inline-flex;align-items:center;gap:9px}
.at-brand .at-dot{width:10px;height:10px;border-radius:50%;background:var(--accent)}
.at-no{font-family:var(--ds-font-mono);font-size:13px;letter-spacing:0.12em;color:var(--ink-mute)}
.at-no em{font-style:normal;color:var(--ink)}
.at-asks{padding:28px 22px;display:flex;flex-direction:column;gap:18px;flex:1;justify-content:center}
.at-caption{font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:4px}
.at-ask{display:flex;gap:14px;font-size:16.5px;line-height:1.35;align-items:baseline;color:var(--ink)}
.at-ask .at-num{font-family:var(--display-font);color:var(--accent);font-size:19px}
.at-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 22px;border-top:1px dashed var(--ds-line)}
.at-note{font-size:13px;line-height:1.4;color:var(--ink-mute);max-width:24ch}
.at-btn{display:inline-block;background:var(--ink);color:var(--bg);padding:13px 22px;font-size:15px;font-weight:600;white-space:nowrap;cursor:pointer;transition:transform 160ms var(--ds-ease-out),background 160ms,color 160ms}
.access-ticket:hover .at-btn{transform:translateY(-1px);background:var(--accent);color:#fff}
/* ── production adaptations (riffbot.ai) ─────────────── */
.bot-modal-overlay[hidden]{display:none}
.footer .meta a{color:var(--bg)}
.footer .meta a:hover{color:var(--accent)}
.access-ticket .at-btn{color:var(--bg)}
html{scroll-behavior:smooth}