/* ============================================================
   GPTMini — Infer Local
   Review build · v6 · 2026-09-23
   ============================================================ */

:root {
  --paper:        #F7F7F2;
  --ink:          #17191C;
  --muted:        #626870;
  --accent:       #216B58;
  --line:         #DFE3DF;
  --dark:         #171D22;
  --on-dark:      #F7F7F2;

  /* the spec tokens fail contrast on the dark surface, so it gets lightened
     variants of the same hues: 7.84:1 and 6.71:1 against #171D22 */
  --accent-on-dark: #6FBFA6;
  --muted-on-dark:  #9AA4AD;
  --line-on-dark:   #2C343B;
  --panel-on-dark:  #10161A;
  --line-strong:    #7F857F;   /* 3.51:1 on paper — form control edges */

  --shell:      1240px;
  --gutter:     clamp(1rem, 3.4vw, 2.5rem);
  --radius:     10px;
  --radius-lg:  16px;
  --section-y:  clamp(3.5rem, 2rem + 6.4vw, 7rem);
  --ease:       cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 4.5rem;   /* exactly the sticky nav, so sections land flush */
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.035em; line-height: 1.08; }
p { margin: 0; }
ul, ol, dl { margin: 0; padding: 0; list-style: none; }
img, svg { max-width: 100%; }
img { display: block; height: auto; }
a { color: inherit; }
button { font: inherit; }

.mono {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.04em;
}

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

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.stage :focus-visible, .stage-section :focus-visible { outline-color: var(--accent-on-dark); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 0.75rem 1.25rem; background: var(--ink); color: var(--paper);
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }


/* ---------------------------------------------------------- nav */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247, 247, 242, 0.9);
  border-bottom: 1px solid var(--line);
}
@supports (backdrop-filter: blur(12px)) {
  .site-nav { backdrop-filter: blur(12px) saturate(1.4); }
}
.nav-inner { display: flex; align-items: center; gap: 1.25rem; min-height: 4.5rem; }
.brand-link { display: block; margin-right: auto; line-height: 0; }
.brand-link img { width: auto; height: 30px; }
.nav-links { display: flex; gap: 1.5rem; font-size: 0.9375rem; font-weight: 500; }
.nav-links a {
  color: var(--muted); text-decoration: none; padding-block: 0.25rem;
  border-bottom: 1px solid transparent;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.nav-links a:hover { color: var(--ink); border-bottom-color: var(--accent); }
.nav-links a[aria-current='page'] { color: var(--ink); border-bottom-color: var(--accent); }

/* ---------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3rem; padding: 0.7rem 1.5rem;
  border: 1px solid var(--accent); border-radius: 999px;
  background: var(--accent); color: var(--paper);
  font-weight: 700; font-size: 1rem; text-decoration: none; text-align: center;
  cursor: pointer;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease);
}
.btn:hover { background: #1A5647; border-color: #1A5647; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-sm { min-height: 2.625rem; padding: 0.5rem 1.125rem; font-size: 0.9375rem; }
.btn-block { width: 100%; }
/* the second named destination: equal weight to the first, quieter fill */
.btn-secondary {
  background: transparent; color: var(--ink); border-color: var(--line-strong);
}
.btn-secondary:hover { background: rgba(23,25,28,0.04); border-color: var(--ink); }

.btn-quiet {
  background: transparent; color: var(--accent-on-dark);
  border-color: var(--line-on-dark); font-weight: 700;
  min-height: 2.75rem; padding: 0.55rem 1.1rem; font-size: 0.9375rem;
}
.btn-quiet:hover { background: rgba(111,191,166,0.1); border-color: var(--accent-on-dark); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-weight: 700; color: var(--accent); text-decoration: none;
  padding-block: 0.4rem; border-bottom: 1px solid transparent;
  transition: border-color 0.18s var(--ease);
}
.link-arrow::after { content: '\2192'; transition: transform 0.18s var(--ease); }
.link-arrow:hover { border-bottom-color: var(--accent); }
.link-arrow:hover::after { transform: translateX(3px); }

/* ---------------------------------------------------------- hero
   Deliberately compact: the demonstration has to start inside the
   opening viewport, so this gives up the old editorial whitespace
   rather than shrinking the stage. */
.hero-section { padding-top: clamp(1.75rem, 1rem + 2vw, 2.75rem); padding-bottom: clamp(1.5rem, 1rem + 1.6vw, 2.25rem); }
.hero-title {
  font-size: clamp(2.75rem, 1rem + 6.6vw, 6rem);
  line-height: 0.93; letter-spacing: -0.055em; white-space: nowrap;
  margin-bottom: clamp(0.75rem, 1.4vw, 1.25rem);
}
.hero-promise {
  font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem);
  line-height: 1.5; color: var(--muted); max-width: 56ch;
}
.cta-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.875rem 1.5rem; margin-top: clamp(1.25rem, 2vw, 1.75rem);
}

/* ============================================================
   HOW IT WORKS — its own compact animation

   A process composition, not four paragraphs that change colour:
   the machine is chosen, a model family travels into it, the
   systems connect to it, and then a question is answered on it.
   ============================================================ */
.section-title {
  font-size: clamp(1.75rem, 1.2rem + 2.1vw, 3.125rem);
  letter-spacing: -0.04em; text-wrap: balance;
  margin-bottom: clamp(1.25rem, 2.4vw, 2rem);
}

.section-sub {
  margin-top: -0.6rem; margin-bottom: clamp(0.9rem, 1.8vw, 1.4rem);
  max-width: 58ch;
  font-size: clamp(1rem, 0.96rem + 0.3vw, 1.1875rem);
  line-height: 1.6; color: var(--muted);
}
.section-title + .section-sub { margin-top: -0.75rem; }

.how-section { padding-bottom: clamp(2.5rem, 4vw, 4rem); }

/* which illustrative business is being configured */
.howto-who {
  font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 0.85rem;
}
.howto-who span { color: var(--ink); font-weight: 700; }

.howto {
  position: relative;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: #FFFEFB;
  padding: clamp(1.1rem, 2.4vw, 1.9rem);
}

.howto-flow {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.9rem, 2vw, 1.75rem);
  align-items: start;
}

.hstep {
  position: relative;
  display: grid; gap: 0.6rem; align-content: start;
  padding-top: 0.6rem;
  border-top: 2px solid var(--line);
  opacity: 0.38;
  transition: opacity 0.4s var(--ease), border-color 0.4s var(--ease);
}
.hstep.is-on { opacity: 1; border-top-color: var(--accent); }
.hstep.is-done { opacity: 0.92; border-top-color: var(--line-strong); }
.howto.is-complete .hstep { opacity: 1; border-top-color: var(--line-strong); }

/* the connector between one stage of the process and the next */
.hstep + .hstep::before {
  content: ''; position: absolute;
  left: calc(clamp(0.9rem, 2vw, 1.75rem) / -2 - 3px);
  top: -5px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--line-strong);
}

.hstep-cap {
  font-size: clamp(0.9375rem, 0.9rem + 0.25vw, 1.0625rem);
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.25;
}

/* ---- 1. hardware ---- */
.hw-pair { display: flex; gap: 0.5rem; align-items: stretch; }
.hw-card {
  flex: 1 1 0; min-width: 0;
  display: grid; justify-items: center; gap: 0.25rem;
  padding: 0.5rem 0.35rem; border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: opacity 0.4s var(--ease), border-color 0.4s var(--ease),
              background-color 0.4s var(--ease);
}
/* The machine that was not chosen is still a legible option, not a ghost:
   only the drawing recedes, and its name keeps readable contrast. */
.hw-card.is-chosen { border-color: var(--accent); background: rgba(33,107,88,0.06); }
.hw-card.is-passed .hw-art { opacity: 0.6; }
/* sized by height so the laptop and the tower carry similar visual mass */
.hw-art { height: clamp(40px, 4vw, 52px); width: auto; max-width: 100%; }
.hw-card[data-hw-card='nvidia'] .hw-art { height: clamp(46px, 4.6vw, 60px); }
.hw-name { font-size: 0.75rem; line-height: 1.25; text-align: center; color: var(--muted); }
.hw-card.is-chosen .hw-name { color: var(--ink); font-weight: 700; }

.hw-slot {
  margin-top: 0.2rem; min-height: 1.5rem;
  display: flex; align-items: center; justify-content: center;
}
.hw-badge {
  opacity: 0; transform: scale(0.9);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  padding: 0.18rem 0.55rem; border-radius: 999px;
  background: var(--accent); color: var(--on-dark);
  font-size: 0.75rem; font-weight: 700;
}
.hw-slot.is-filled .hw-badge, .howto.is-complete .hw-badge { opacity: 1; transform: none; }
/* the machine that was not chosen has no model on it, so it carries no pill */
.hw-badge:empty { display: none; }

/* ---- 2. models ---- */
.hmodels { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.hmodel {
  padding: 0.22rem 0.5rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--paper);
  font-size: 0.75rem; color: var(--ink);
  opacity: 0; transform: translateY(5px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease),
              color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.hmodel.is-in, .howto.is-complete .hmodel { opacity: 1; transform: none; }
.hmodel.is-chosen { border-color: var(--accent); color: var(--accent); font-weight: 700; }
/* the families not chosen recede in colour, not in opacity — they stay read */
.hmodel.is-taken:not(.is-chosen) { color: var(--muted); border-color: var(--line); }

/* ---- 3. systems ---- */
.hsystems { display: grid; gap: 0.3rem; }
.hsystem {
  position: relative; padding: 0.3rem 0.6rem 0.3rem 1.3rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--paper); font-size: 0.8125rem;
  transition: border-color 0.35s var(--ease), background-color 0.35s var(--ease);
}
.hsystem::before {
  content: ''; position: absolute; left: 0.55rem; top: 50%;
  width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
  background: var(--line-strong); transition: background-color 0.35s var(--ease);
}
.hsystem.is-linked { border-color: var(--accent); background: rgba(33,107,88,0.05); }
.hsystem.is-linked::before { background: var(--accent); }

/* ---- 4. you ask ---- */
.hask {
  display: grid; gap: 0.4rem; align-content: start;
  padding: 0.7rem 0.8rem; border-radius: var(--radius-sm);
  background: var(--dark); color: var(--on-dark);
  min-height: 5.5rem;
}
.hask-q { font-size: 0.8125rem; color: var(--muted-on-dark); line-height: 1.4; }
.hask-a {
  font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.35; color: var(--accent-on-dark);
}

/* the travelling chip: the chosen model family, then each system, moving
   into the machine that was chosen */
.flier {
  position: absolute; z-index: 3; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  padding: 0.22rem 0.5rem; border-radius: 999px;
  font-size: 0.75rem; font-weight: 700; white-space: nowrap;
  transition: transform 0.46s var(--ease), opacity 0.46s var(--ease);
}
.flier--model { background: var(--accent); color: var(--on-dark); }
.flier--system { background: var(--ink); color: var(--paper); }

.howto-end {
  margin: 0;
  font-size: clamp(1.0625rem, 0.95rem + 0.6vw, 1.375rem);
  font-weight: 700; letter-spacing: -0.03em;
  opacity: 0; transition: opacity 0.4s var(--ease);
}
.howto-close {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.5rem clamp(1rem, 2.4vw, 2rem);
  opacity: 0; transition: opacity 0.4s var(--ease);
}
.howto-close.is-in, .howto.is-complete .howto-close { opacity: 1; }
.howto-end.is-in, .howto.is-complete .howto-end { opacity: 1; }
.howto-bridge { font-size: 0.9375rem; }

/* the crossfade between one illustrative business and the next — the frame
   itself does not move */
.howto.is-turning .howto-flow,
.howto.is-turning .howto-who,
.howto.is-turning .howto-close { opacity: 0; transition: opacity 0.3s var(--ease); }

.howto-label {
  margin-top: 0.4rem;
  font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
}
.howto-controls {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin-top: clamp(0.9rem, 1.8vw, 1.25rem);
  padding-top: clamp(0.75rem, 1.5vw, 1rem);
  border-top: 1px solid var(--line);
}
.howto-close { margin-top: clamp(0.9rem, 1.8vw, 1.4rem); }
.howto-controls .ctrl { border-color: var(--line); color: var(--muted); background: transparent; }
.howto-controls .ctrl:hover:not(:disabled) { color: var(--ink); border-color: var(--ink); }
.howto-controls .ctrl:disabled { opacity: 0.45; cursor: default; }

/* ============================================================
   EXAMPLES — the reel
   ============================================================ */
.ex-section { padding-bottom: var(--section-y); }
/* The chooser sits above the player at every width. Collapsed it costs one
   line, so the player is still what a visitor arrives at. */

/* The frame is the stage. Its outer height, its header and its controls hold
   still for a given viewport; everything that happens, happens inside it. The
   height is per breakpoint, not per story — a tall artifact scrolls rather
   than stretching the page underneath it. */
.stage {
  --stage-h: 740px;
  height: min(var(--stage-h), calc(100dvh - 7rem));
  min-height: 460px;
  display: flex; flex-direction: column;
  background: var(--dark); color: var(--on-dark);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: 0 28px 70px rgba(20,20,20,0.16);
}

.stage-body {
  position: relative;
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
}

/* the one scrollable region — category above it and controls below it are
   outside, and nothing scrolls inside it */
.stage-scroll {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(0.9rem, 1.7vw, 1.15rem) clamp(1rem, 2.2vw, 1.5rem);
  display: grid; gap: 0.9rem; align-content: start;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.stage-scroll::-webkit-scrollbar { width: 12px; }
.stage-scroll::-webkit-scrollbar-track { background: transparent; }
.stage-scroll::-webkit-scrollbar-thumb {
  background: #3A444C; border-radius: 6px;
  border: 3px solid transparent; background-clip: content-box;
}
.stage-scroll.can-scroll::-webkit-scrollbar-thumb { background-clip: content-box; }
.stage-scroll:focus-visible { outline-offset: -3px; }

/* an edge cue, so a frame with more below it does not look finished */
.scroll-cue {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2.75rem;
  pointer-events: none; opacity: 0;
  transition: opacity 0.25s var(--ease);
  background: linear-gradient(to bottom, rgba(23,29,34,0), var(--dark) 92%);
}
.scroll-cue.is-on { opacity: 1; }
.stage.is-swapping .convo { animation: swapIn 0.4s var(--ease); }
@keyframes swapIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* The category identity lives at the upper left and stays put while the
   questions and the source states change under it. The counter keeps the
   upper right. */
.stage-bar {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 0.6rem 1.25rem;
  padding: clamp(0.85rem, 1.8vw, 1.15rem) clamp(1rem, 2.2vw, 1.6rem);
  border-bottom: 1px solid var(--line-on-dark); background: #131A1F;
}
.story-id {
  display: flex; align-items: center; gap: clamp(0.6rem, 1.2vw, 0.9rem);
  min-width: 0; transition: opacity 0.3s var(--ease);
}
.story-id.is-hidden { opacity: 0; }
.story-id.is-arriving { animation: idArrive 0.32s var(--ease) both; }
@keyframes idArrive {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
.story-icon {
  width: clamp(28px, 2.6vw, 36px); height: auto; flex: none;
  color: var(--accent-on-dark);
}
.story-id-text { display: grid; gap: 0.1rem; min-width: 0; }
.story-name {
  font-size: clamp(1.5625rem, 1.2rem + 1.1vw, 2.5rem);
  font-weight: 800; letter-spacing: -0.035em; line-height: 1.08;
  text-wrap: balance;
}
.story-desc {
  font-size: clamp(0.8125rem, 0.78rem + 0.2vw, 0.9375rem);
  line-height: 1.35; color: var(--muted-on-dark);
}
.story-desc--flow { display: none; }   /* only on phones — see the strip below */
.stage-meta {
  flex: none; text-align: right; display: grid; gap: 0.15rem; padding-top: 0.2rem;
}
.qcounter { color: var(--accent-on-dark); }
.stage-label {
  font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted-on-dark);
}
.counter { font-size: 0.6875rem; font-weight: 500; color: var(--muted-on-dark); }

/* ---- the category entrance card ----
   Inside the frame, over the example content only: the playback controls
   stay reachable throughout. */
/* An explicit display:none wherever a rule sets a display value — the
   [hidden] attribute on its own loses to it. */
.story-card[hidden], .stage-signature[hidden],
.ctrl[hidden], .cat-now[hidden] { display: none; }

.story-card {
  position: absolute; inset: 0; z-index: 4;
  display: grid; place-content: center; justify-items: center;
  gap: 0.6rem; padding: clamp(1.5rem, 4vw, 3rem); text-align: center;
  background: var(--panel-on-dark);
  opacity: 0; transition: opacity 0.3s var(--ease);
}
.story-card.is-in { opacity: 1; }
.story-card.is-out { opacity: 0; }
.card-icon { width: clamp(40px, 5vw, 60px); height: auto; color: var(--accent-on-dark); }
.card-label {
  font-size: clamp(1.375rem, 1rem + 1.7vw, 2.375rem);
  font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  line-height: 1.1;
}
.card-desc {
  font-size: clamp(0.9375rem, 0.9rem + 0.35vw, 1.125rem);
  color: var(--muted-on-dark); max-width: 36ch; line-height: 1.45;
}

/* ---- the configuration, compacted ----
   A small machine, its hardware and model inline, then the systems connected
   to it. No large empty space around a standalone drawing. */
.summary {
  flex: none;
  padding: clamp(0.7rem, 1.4vw, 0.9rem) clamp(1rem, 2.2vw, 1.6rem);
  border-bottom: 1px solid var(--line-on-dark); background: #131A1F;
}
.sum-line {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 0.4rem clamp(0.6rem, 1.4vw, 1rem);
}
.machine { position: relative; width: 46px; flex: none; line-height: 0; }
.machine-art { width: 100%; height: auto; display: none; }
.machine[data-hardware='mac'] .machine-art--mac { display: block; }
.machine[data-hardware='nvidia'] .machine-art--nvidia { display: block; }
.pulse-bar { fill: #2B3942; }
.machine.has-model .pulse-bar { fill: #35505a; }

.sum-spec {
  font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.02em;
  white-space: nowrap;
}
.sum-dot { color: var(--muted-on-dark); margin-inline: 0.2rem; }

.sum-sources { display: flex; flex-wrap: wrap; gap: 0.3rem; min-width: 0; }
.sum-source {
  padding: 0.16rem 0.5rem; border-radius: 999px;
  border: 1px solid var(--line-on-dark); background: rgba(247,247,242,0.03);
  font-size: 0.75rem; color: var(--muted-on-dark);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease),
              background-color 0.3s var(--ease);
}
.sum-source.is-active {
  color: var(--accent-on-dark); border-color: var(--accent-on-dark);
  background: rgba(111,191,166,0.1);
}

/* ---- conversation ---- */
/* the scrolling region carries the padding now */
.convo { display: grid; gap: 0.85rem; }
.turns { display: grid; }
.turn { display: grid; gap: 0.55rem; }
.q {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); font-weight: 700;
  padding: 0.6rem 0.9rem; border-radius: var(--radius);
  border: 1px solid var(--line-on-dark); background: rgba(247,247,242,0.03);
}
.a { position: relative; padding-left: 1rem; border-left: 2px solid var(--accent-on-dark); }
.a-text { font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem); line-height: 1.55; }

/* The full text is laid out first, invisible, and the streaming copy is drawn
   on top of it. The lines it will occupy are therefore already reserved: text
   arriving cannot reflow what is beneath it. */
.text-stack { display: grid; }
.text-stack > * { grid-area: 1 / 1; }
.a-ghost, .q-ghost { visibility: hidden; }
.a-ghost { font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem); line-height: 1.55; }

.cites { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.cite {
  border: 1px solid var(--line-on-dark); border-radius: var(--radius);
  background: rgba(247,247,242,0.02); max-width: 100%;
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
}
/* Being consulted: one soft rise and fall, never repeated flashing. */
.cite[data-state='checking'] {
  border-color: var(--accent-on-dark);
  background: rgba(111,191,166,0.12);
  animation: citeRise 0.5s var(--ease);
}
.cite[data-state='consulted'] {
  border-color: rgba(111,191,166,0.55);
  background: rgba(111,191,166,0.05);
}
@keyframes citeRise {
  from { background: rgba(111,191,166,0.02); }
  60%  { background: rgba(111,191,166,0.2); }
  to   { background: rgba(111,191,166,0.12); }
}
.cite-status {
  margin-left: auto; font-size: 0.6875rem; letter-spacing: 0.06em;
  color: var(--muted-on-dark); display: inline-flex; align-items: center; gap: 0.35rem;
}
.cite[data-state='checking'] .cite-status { color: var(--accent-on-dark); }
.cite[data-state='checking'] .cite-status::before {
  content: ''; width: 0.4rem; height: 0.4rem; border-radius: 999px;
  background: currentColor; animation: dotMove 1.1s ease-in-out infinite;
}
@keyframes dotMove { 0%,100% { opacity: 0.25; transform: translateX(-2px); }
                     50% { opacity: 1; transform: translateX(2px); } }
.cite[data-state='consulted'] .cite-status { color: rgba(111,191,166,0.8); }
.cite-preview {
  font-size: 0.72rem; color: var(--muted-on-dark);
  padding: 0 0.7rem 0.45rem; margin-top: -0.15rem;
}
.cite-preview:empty { display: none; }
/* an opened disclosure takes the whole row rather than stretching its
   neighbours, and stops repeating the query it already shows inside */
.cites { align-items: start; }
.cites > li { min-width: 0; }
.cites > li:has(.cite[open]) { flex: 1 0 100%; }
.cite[open] .cite-preview { display: none; }
.globe { width: 0.9rem; height: 0.9rem; flex: none; color: var(--accent-on-dark); }
.cite--web .cite-name { color: var(--accent-on-dark); }

.web-line {
  margin-top: 0.6rem; font-size: 0.8125rem; color: var(--muted-on-dark);
}
.web-pages { display: grid; gap: 0.45rem; margin-top: 0.4rem; }
.web-page {
  padding: 0.45rem 0.6rem; border-radius: 6px;
  border: 1px dashed var(--line-on-dark); background: rgba(111,191,166,0.04);
}
.web-page-title { font-size: 0.78125rem; font-weight: 700; }
.web-page-finding { font-size: 0.75rem; color: var(--muted-on-dark); margin-top: 0.1rem; }
.cite--web.is-reading .web-page { animation: cardIn 0.3s var(--ease) both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* the matching summary chip lifts while its system is being checked */
.sum-source { transition: background 0.3s var(--ease), color 0.3s var(--ease); }
.sum-source.is-active {
  background: var(--accent-on-dark); color: var(--dark);
}
.cite > summary {
  display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
  padding: 0.45rem 0.7rem; min-height: 2.3rem;
  font-size: 0.875rem; cursor: pointer; list-style: none;
}
.cite > summary::-webkit-details-marker { display: none; }
.cite > summary::after { content: '+'; color: var(--accent-on-dark); margin-left: 0.2rem; }
.cite[open] > summary::after { content: '\2013'; }
.cite-name { font-weight: 700; }
.cite-role { font-size: 0.75rem; color: var(--muted-on-dark); }
.cite-body { padding: 0 0.7rem 0.65rem; }
.record-title { font-size: 0.8125rem; font-weight: 700; margin-bottom: 0.35rem; }
.record-rows { display: grid; gap: 0.2rem; font-size: 0.78125rem; }
.record-rows > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 0.75rem; }
.record-rows dt { color: var(--muted-on-dark); }
.record-rows dd { margin: 0; font-weight: 600; text-align: right; }
.record-note { margin-top: 0.35rem; font-size: 0.72rem; color: var(--muted-on-dark); }

.result { margin-top: 0; }
/* held invisible until the answer lands — its space is already taken */
.result-card.is-reserved { visibility: hidden; }
.result-card {
  border: 1px solid var(--line-on-dark); border-radius: var(--radius);
  padding: clamp(0.8rem, 1.5vw, 1rem); background: rgba(247,247,242,0.02);
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.42s var(--ease), transform 0.42s var(--ease);
}
.result-card.is-in { opacity: 1; transform: none; }
.result-caption {
  font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-on-dark); margin-bottom: 0.75rem;
}
.result-note { margin-top: 0.75rem; font-size: 0.75rem; color: var(--muted-on-dark); }

.stage-signature {
  margin-top: clamp(1rem, 2vw, 1.5rem);
  font-size: clamp(1.0625rem, 0.95rem + 0.55vw, 1.375rem);
  font-weight: 700; letter-spacing: -0.025em; color: var(--accent-on-dark);
}
.transition {
  margin-top: 1rem; font-size: 1.0625rem; font-weight: 700;
  color: var(--muted-on-dark); animation: swapIn 0.4s var(--ease);
}

/* ---- ecosystem row ---- */
.eco[hidden] { display: none; }
.eco {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.7rem;
  padding-top: 0.85rem; border-top: 1px solid var(--line-on-dark);
}
.eco-label { font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-on-dark); }
.eco-name { font-size: 0.8125rem; color: var(--muted-on-dark); }

/* ---- playback controls ---- */
/* Playback first, then the quieter business of moving within one example. */
.stage-controls {
  flex: none;
  display: grid; gap: 0.1rem;
  padding: 0.7rem clamp(1rem, 2.2vw, 1.6rem) 0.75rem;
  border-top: 1px solid var(--line-on-dark); background: #131A1F;
}
.ctrl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.ctrl-row--sub {
  gap: 0.4rem 0.7rem;
  padding-top: 0.6rem; margin-top: 0.45rem;
  border-top: 1px solid var(--line-on-dark);
}
.ctrl-row--sub .stage-label { margin: 0; }
/* The under-reel copy of the label exists only for narrow widths, where the
   in-frame one is hidden. The 861px query below turns this one off, so exactly
   one is rendered at any width and the caveat is never shown twice. */
.stage-label--under {
  margin: 0.75rem 0 0; text-align: center; color: var(--muted);
}
/* Show answer and Watch again appear and disappear during a turn. The slot
   they live in keeps its width, so the row never rewraps under the reader. */
.ctrl-slot { display: flex; min-width: 8.75rem; min-height: 2.5rem; }
.ctrl-div {
  width: 1px; align-self: stretch; margin-inline: 0.35rem;
  background: var(--line-on-dark);
}
.ctrl-sm { min-height: 2rem; padding: 0.25rem 0.7rem; font-size: 0.75rem; }

/* With room, everything sits on one line: playback on the left, the quieter
   within-this-example controls on the right. Two rows only when it is tight. */
@media (min-width: 861px) {
  /* with room, the label belongs in the frame with the controls */
  .stage-label--under { display: none; }
  .stage-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
  .ctrl-row { order: 1; }
  .ctrl-row--sub { display: contents; }
  .ctrl-row--sub .stage-label { order: 2; margin-left: 0.75rem; margin-right: auto; }
  .ctrl-div { order: 3; height: 1.4rem; align-self: center; }
  [data-prev-q] { order: 4; }
  [data-next-q] { order: 5; }
}
.ctrl:disabled { opacity: 0.4; cursor: default; }
.ctrl:disabled:hover { color: var(--muted-on-dark); border-color: var(--line-on-dark); }
.ctrl {
  min-height: 2.5rem; padding: 0.4rem 0.9rem;
  border: 1px solid var(--line-on-dark); border-radius: 999px;
  background: transparent; color: var(--muted-on-dark);
  font-size: 0.8125rem; font-weight: 600; cursor: pointer;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.ctrl:hover { color: var(--on-dark); border-color: var(--muted-on-dark); }
.ctrl-accent { color: var(--accent-on-dark); border-color: var(--accent-on-dark); }

/* ---- results ---- */
.data-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.data-table th, .data-table td { padding: 0.5rem 0.4rem; text-align: left; }
.data-table th {
  font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted-on-dark); font-weight: 600; border-bottom: 1px solid var(--line-on-dark);
}
.data-table td { border-bottom: 1px solid rgba(44,52,59,0.55); }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .is-key { font-weight: 700; color: var(--accent-on-dark); }
.data-table tbody tr:last-child td { border-bottom: 0; }

.bar-list { display: grid; gap: 0.6rem; }
.bar-row { display: grid; grid-template-columns: minmax(0,1fr) 9rem auto; gap: 0.75rem; align-items: center; font-size: 0.875rem; }
.bar-name { color: var(--muted-on-dark); }
.bar-row.is-short .bar-name { color: var(--on-dark); font-weight: 700; }
.bar-track { position: relative; height: 0.6rem; border-radius: 999px; background: rgba(247,247,242,0.07); overflow: hidden; }
.bar-need { position: absolute; inset: 0 auto 0 0; width: var(--pct); background: rgba(247,247,242,0.16); }
.bar-have { position: absolute; inset: 0 auto 0 0; width: var(--pct); background: var(--muted-on-dark); }
.bar-row.is-short .bar-have { background: #E08A7E; }
.bar-val { font-size: 0.75rem; color: var(--muted-on-dark); }
.bar-key { margin-top: 0.5rem; font-size: 0.6875rem; color: var(--muted-on-dark); }

.slot-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.slot {
  display: grid; gap: 0.3rem; justify-items: center;
  padding: 0.7rem 0.9rem; border-radius: var(--radius);
  border: 1px solid var(--line-on-dark); min-width: 5.5rem;
}
.slot-dot { width: 1.5rem; height: 1.5rem; border-radius: 999px; background: var(--muted-on-dark); }
.slot.is-open { border-color: #E08A7E; }
.slot.is-open .slot-dot { background: transparent; border: 2px dashed #E08A7E; }
.slot-label { font-size: 0.75rem; color: var(--muted-on-dark); }
.slot.is-open .slot-label { color: #E08A7E; font-weight: 700; }

.card-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.mini-card {
  flex: 1 1 11rem; padding: 0.7rem 0.85rem; border-radius: var(--radius);
  border: 1px solid var(--line-on-dark); display: grid; gap: 0.15rem;
}
.mini-title { font-size: 0.75rem; color: var(--muted-on-dark); }
.mini-value { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; }
.mini-sub { font-size: 0.75rem; color: var(--muted-on-dark); }
.mini-card.is-ok { border-color: var(--accent-on-dark); }
.mini-card.is-ok .mini-value { color: var(--accent-on-dark); }
.mini-card.is-warn .mini-value { color: #E08A7E; }
.mini-card.is-draft { border-style: dashed; }

.chain { display: grid; gap: 0.4rem; }
.chain-item {
  display: grid; grid-template-columns: 5.5rem 1fr; gap: 0.75rem; align-items: baseline;
  padding: 0.55rem 0.7rem; border-radius: var(--radius);
  border: 1px solid var(--line-on-dark); font-size: 0.875rem;
}
.chain-id { font-size: 0.75rem; color: var(--muted-on-dark); }
.chain-item.is-blocked { border-left: 3px solid #E08A7E; }
.chain-item.is-outcome { background: rgba(224,138,126,0.1); font-weight: 700; }
.chain-item.is-outcome .chain-id { color: #E08A7E; }

.tee-strip { display: grid; gap: 0.25rem; }
.tee-slot, .tee-event {
  display: grid; grid-template-columns: 3.5rem auto 1fr; gap: 0.75rem;
  align-items: center; padding: 0.4rem 0.5rem; border-radius: 6px;
  font-size: 0.875rem; color: var(--muted-on-dark);
}
.tee-slot.is-open { background: rgba(111,191,166,0.12); color: var(--on-dark); font-weight: 600; }
.tee-time { font-size: 0.8125rem; }
.tee-seats { display: inline-flex; gap: 0.2rem; }
.seat { width: 0.6rem; height: 0.6rem; border-radius: 2px; border: 1px solid var(--line-on-dark); }
.seat.is-filled { background: var(--muted-on-dark); border-color: var(--muted-on-dark); }
.tee-slot.is-open .seat { border-color: var(--accent-on-dark); }
.tee-event { margin-top: 0.4rem; border-top: 1px dashed var(--line-on-dark); padding-top: 0.6rem; color: var(--on-dark); }

.skill-chart { display: grid; gap: 0.5rem; }
.skill-row { display: grid; grid-template-columns: minmax(0,1fr) 7rem auto; gap: 0.75rem; align-items: center; font-size: 0.875rem; }
.skill-name { color: var(--muted-on-dark); }
.skill-row.is-focus .skill-name { color: var(--on-dark); font-weight: 700; }
.skill-track { height: 0.5rem; border-radius: 999px; background: rgba(247,247,242,0.08); overflow: hidden; }
.skill-bar { display: block; height: 100%; width: var(--pct); background: var(--muted-on-dark); }
.skill-row.is-focus .skill-bar { background: var(--accent-on-dark); }
.skill-val { font-size: 0.75rem; color: var(--muted-on-dark); }
.lesson-steps { display: grid; gap: 0.4rem; margin-top: 1rem; }
.lesson-steps li { display: flex; gap: 0.6rem; align-items: baseline; font-size: 0.875rem; }
.lesson-n {
  flex: none; width: 1.25rem; height: 1.25rem; border-radius: 999px;
  display: inline-grid; place-items: center; font-size: 0.6875rem;
  background: rgba(111,191,166,0.16); color: var(--accent-on-dark);
}

.regime-bars { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.regime { flex: 1 1 8rem; padding: 0.6rem 0.75rem; border-radius: var(--radius); border: 1px solid var(--line-on-dark); display: grid; gap: 0.1rem; }
.regime-val { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; }
.regime.is-up .regime-val { color: var(--accent-on-dark); }
.regime.is-down .regime-val { color: #E08A7E; }
.regime-name { font-size: 0.75rem; color: var(--muted-on-dark); }
.equity-chart { width: 100%; max-width: 46rem; height: auto; display: block; }
.equity-chart .axis { stroke: var(--line-on-dark); stroke-dasharray: 3 4; }
.equity-chart .split { stroke: var(--line-on-dark); }
.equity-chart .curve { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.equity-chart .curve.up { stroke: var(--accent-on-dark); }
.equity-chart .curve.down { stroke: #E08A7E; }
.equity-chart .c-lab { fill: var(--muted-on-dark); font-size: 12px; font-family: 'IBM Plex Mono', monospace; }

.node-map { display: grid; grid-template-columns: auto 1fr auto; gap: 0.75rem; align-items: center; }
.node { padding: 0.6rem 0.7rem; border-radius: var(--radius); border: 1px solid var(--line-on-dark); display: grid; gap: 0.1rem; font-size: 0.8125rem; min-width: 6.5rem; }
.node-col { display: grid; gap: 0.4rem; }
.node-name { font-weight: 700; }
.node-state { font-size: 0.6875rem; color: var(--muted-on-dark); }
.node.is-used { border-color: var(--accent-on-dark); background: rgba(111,191,166,0.1); }
.node.is-used .node-state { color: var(--accent-on-dark); }
.node.is-idle { opacity: 0.55; }
.result-card.is-in .node { animation: nodeIn 0.34s var(--ease) both; }
.result-card.is-in .node.coord { animation-delay: 0s; }
.result-card.is-in .node-col .node:nth-child(1) { animation-delay: 0.22s; }
.result-card.is-in .node-col .node:nth-child(2) { animation-delay: 0.44s; }
.result-card.is-in .node-col .node:nth-child(3) { animation-delay: 0.60s; }
.result-card.is-in .node.out { animation-delay: 0.80s; }
@keyframes nodeIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.result-card.is-in .node.is-idle { animation-name: nodeInIdle; }
@keyframes nodeInIdle { from { opacity: 0; transform: translateX(-6px); } to { opacity: 0.55; transform: none; } }

.event-line { display: grid; gap: 0.4rem; }
.event { display: grid; grid-template-columns: 3.5rem 1fr; gap: 0.75rem; align-items: baseline; padding: 0.35rem 0.4rem; border-radius: 6px; font-size: 0.875rem; }
.event-date { font-size: 0.75rem; color: var(--muted-on-dark); }
.event.is-primary { background: rgba(111,191,166,0.12); font-weight: 700; }
.event.is-primary .event-date { color: var(--accent-on-dark); }
.event.is-muted { color: var(--muted-on-dark); }
.event.is-struck .event-label { text-decoration: line-through; opacity: 0.6; }
.event.is-struck { color: var(--muted-on-dark); }

/* position / action-plan artifact */
.pos-list { display: grid; gap: 0.5rem; }
.pos-card {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: 0.75rem; align-items: baseline;
  padding: 0.55rem 0.7rem; border-radius: var(--radius);
  border: 1px solid var(--line-on-dark);
}
.pos-label { font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-on-dark); }
.pos-text { font-size: 0.9375rem; }
.compare-strip { margin-top: 0.9rem; }
.compare-title { font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-on-dark); margin-bottom: 0.45rem; }
.compare-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.compare-item {
  flex: 1 1 7rem; display: grid; gap: 0.1rem; padding: 0.5rem 0.7rem;
  border-radius: var(--radius); border: 1px solid var(--line-on-dark);
}
.compare-item.is-ours { border-color: var(--accent-on-dark); background: rgba(111,191,166,0.1); }
.compare-val { font-size: 1.125rem; font-weight: 800; letter-spacing: -0.02em; }
.compare-item.is-ours .compare-val { color: var(--accent-on-dark); }
.compare-name { font-size: 0.75rem; color: var(--muted-on-dark); }
.draft-line {
  margin-top: 0.9rem; padding: 0.6rem 0.75rem; border-radius: var(--radius);
  border: 1px dashed var(--line-on-dark);
}
.draft-label { font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-on-dark); }
.draft-text { margin-top: 0.15rem; font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; }

/* ---- waterfall: a change broken into its parts ---- */
.wfall { display: grid; gap: 0.35rem; }
.wfall-end {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 0.35rem 0; border-bottom: 1px solid var(--line-on-dark);
  font-size: 0.875rem; color: var(--muted-on-dark);
}
.wfall-end.is-total {
  border-bottom: 0; border-top: 1px solid var(--line-strong);
  margin-top: 0.2rem; color: var(--on-dark); font-weight: 700;
}
.wfall-end-val { font-size: 1rem; }
.wfall-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 7rem auto;
  align-items: center; gap: 0.75rem; padding: 0.2rem 0;
}
/* the annual charge is set apart from the recurring ones, never folded in */
.wfall-row.is-apart {
  border-left: 2px solid var(--accent-on-dark);
  padding-left: 0.6rem; margin-left: -0.6rem;
}
.wfall-name { font-size: 0.9375rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.45rem; }
.wfall-tag {
  font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted-on-dark); border: 1px solid var(--line-on-dark);
  border-radius: 999px; padding: 0.05rem 0.4rem;
}
.wfall-track { height: 8px; border-radius: 4px; background: rgba(247,247,242,0.07); overflow: hidden; }
.wfall-bar { display: block; height: 100%; width: var(--pct); background: var(--accent-on-dark); border-radius: 4px; }
.wfall-row.is-apart .wfall-bar { background: var(--on-dark); }
.wfall-val { font-size: 0.875rem; font-weight: 700; }

/* ---- checklist: what a record asks for, in its stated state ---- */
.check-label {
  margin-top: 0.9rem; margin-bottom: 0.4rem;
  font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted-on-dark);
}
.check-list { display: grid; gap: 0.35rem; list-style: none; padding: 0; margin: 0; }
.check-item {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem 0.6rem;
  padding: 0.4rem 0.6rem; border-radius: var(--radius-sm);
  border: 1px solid var(--line-on-dark); font-size: 0.9375rem;
}
.check-box {
  width: 15px; height: 15px; flex: none; border-radius: 3px;
  border: 1.5px solid var(--muted-on-dark);
}
.check-item.is-done .check-box {
  background: var(--accent-on-dark); border-color: var(--accent-on-dark);
}
.check-text { flex: 1 1 auto; min-width: 0; }
.check-note {
  font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted-on-dark);
}
.check-item.is-todo { border-color: var(--line-strong); }

/* ---- schedule: one afternoon on one axis, so an overlap is visible ---- */
.sched { display: grid; gap: 0.3rem; }
.sched-axis {
  display: flex; justify-content: space-between;
  font-size: 0.625rem; letter-spacing: 0.06em; color: var(--muted-on-dark);
  padding-left: 11rem; margin-bottom: 0.15rem;
}
.sched-row {
  display: grid; grid-template-columns: 10.25rem minmax(0, 1fr) 5.5rem;
  align-items: center; gap: 0.75rem;
}
.sched-name { font-size: 0.875rem; display: grid; gap: 0.05rem; }
.sched-who { font-size: 0.625rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-on-dark); }
.sched-track {
  position: relative; height: 18px; border-radius: 4px;
  background: rgba(247,247,242,0.05);
}
.sched-block {
  position: absolute; top: 3px; bottom: 3px;
  left: var(--start); width: var(--len); min-width: 4px;
  border-radius: 3px; background: var(--muted-on-dark);
}
.sched-row.is-clash .sched-block { background: var(--accent-on-dark); }
.sched-row.is-clash .sched-name { font-weight: 700; }
.sched-time { font-size: 0.75rem; color: var(--muted-on-dark); text-align: right; }
.sched-row.is-clash .sched-time { color: var(--on-dark); }

/* ---- FREE TOKENS ----
   A reserved block: its height does not depend on the number inside it, so a
   value changing cannot move the frame, the controls or the page. The answer
   above stays the loud thing; this is deliberately quiet. */
.tokens {
  margin-top: clamp(1.25rem, 2.2vw, 1.75rem);
  padding: clamp(0.85rem, 1.6vw, 1.1rem) clamp(1rem, 2vw, 1.4rem);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #FFFEFB;
  min-height: 5.25rem;              /* reserved */
}
.tokens-title {
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 0.3rem;
}
.tokens-figure {
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
  line-height: 1.45; color: var(--ink);
  font-variant-numeric: tabular-nums;   /* digits do not jitter as they change */
}
.tokens-figure span { font-weight: 700; }

/* ---- choose an example ----
   Seventeen buttons, above the player so nobody has to watch the reel to find
   their own industry. The accent on the current one is backed by the visible
   "Now showing" label rather than by colour alone. */
.cat-block { margin-bottom: clamp(0.9rem, 1.6vw, 1.25rem); }
.cat-summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem;
  cursor: pointer; width: max-content; max-width: 100%;
  padding: 0.45rem 0.9rem 0.45rem 0.75rem;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.02em;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.cat-summary::-webkit-details-marker { display: none; }
.cat-summary::marker { content: ''; }
.cat-summary::before {
  content: ''; width: 0; height: 0; flex: none;
  border-left: 5px solid currentColor;
  border-block: 4px solid transparent;
  transition: transform 0.2s var(--ease);
}
.cat-block[open] .cat-summary::before { transform: rotate(90deg); }
.cat-summary:hover { border-color: var(--ink); background: rgba(23,25,28,0.03); }
.cat-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cat-block[open] .cat-summary { margin-bottom: 0.85rem; }
.cat-now {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); font-weight: 500;
}
.cat-now-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.cat-grid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(0.45rem, 1.1vw, 0.8rem);
  list-style: none; padding: 0; margin: 0;
}
.cat { display: grid; }
.cat-btn {
  display: grid; justify-items: center; gap: 0.45rem; text-align: center;
  width: 100%; padding: 0.7rem 0.45rem;
  background: transparent; border: 1px solid transparent;
  border-radius: var(--radius); cursor: pointer; font: inherit;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease),
              transform 0.2s var(--ease);
}
.cat-icon {
  width: 28px; height: 28px; flex: none;
  color: var(--ink); opacity: 0.7;
  transition: color 0.2s var(--ease), opacity 0.2s var(--ease);
}
.cat-label {
  font-size: 0.875rem; line-height: 1.25; color: var(--muted);
  transition: color 0.2s var(--ease);
}

.cat-btn:hover { background: rgba(23,25,28,0.04); border-color: var(--line); }
.cat-btn:hover .cat-icon { color: var(--accent); opacity: 1; }
.cat-btn:hover .cat-label { color: var(--ink); }
.cat-btn:active { transform: translateY(1px); }
.cat-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.cat-btn.is-showing { border-color: var(--accent); background: rgba(33,107,88,0.06); }
.cat-btn.is-showing .cat-icon { color: var(--accent); opacity: 1; }
.cat-btn.is-showing .cat-label { color: var(--accent); font-weight: 700; }

.examples-note { margin-top: clamp(1.25rem, 2.2vw, 1.75rem); font-size: 0.8125rem; color: var(--muted); }

/* ---------------------------------------------------------- quote band
   Two industry statements, set as editorial lines rather than two heavy
   testimonial cards. They are not GPTMini customer testimonials. */
/* The two statements are composed as a pair: equal columns, one type scale,
   and a shared quotation row so the attributions sit on the same line whether
   a quote runs to one line or two. */
/* One continuous charcoal band across the page, breaking up the long off-white
   opening without taking the lead away from Infer Local. No cards, no shadows,
   no borders inside it — the band itself is the device. */
.quote-band {
  background: var(--dark);
  margin-top: clamp(1.5rem, 2.6vw, 2.25rem);
  padding-block: clamp(2.25rem, 4.5vw, 3.75rem);
}
.quote-band-inner {
  display: grid; grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 0.75rem clamp(2rem, 4vw, 4rem);
}
/* the hero actions pick up again under the band */
.hero-actions .cta-row { margin-top: clamp(1.5rem, 2.6vw, 2.25rem); }
/* No word-icon slot and no logo: each company is named once, as the first
   part of its own attribution, and the full column width goes to the
   quotation. */
.quote {
  margin: 0; display: grid; gap: 0.6rem;
  grid-row: span 2; grid-template-rows: subgrid;
  text-align: center; justify-items: center;
}
@supports not (grid-template-rows: subgrid) {
  .quote { grid-row: auto; grid-template-rows: none; align-content: start; }
}
.quote blockquote {
  margin: 0; align-self: center;
  /* 26–28px across wide desktop, 21–23px on a phone; one scale for both */
  font-size: clamp(1.3125rem, 1rem + 0.8vw, 1.75rem);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1.24;
  text-wrap: balance;
  color: var(--on-dark);          /* warm white */
}
.quote figcaption {
  display: grid; gap: 0.2rem; font-size: 0.875rem;
  justify-items: center; align-self: start;
}
.quote-who { font-weight: 700; letter-spacing: -0.01em; color: #FFFFFF; }
.quote-src {
  color: var(--accent-on-dark);   /* the green used on dark surfaces */
  text-decoration: underline; text-underline-offset: 2px;
  display: inline-flex; align-items: center; gap: 0.3rem;
}
.quote-src:hover { text-decoration-thickness: 2px; }
.ext { width: 0.7em; height: 0.7em; flex: none; }

/* ---------------------------------------------------------- contact */
.section--contact { border-top: 1px solid var(--line); }
.contact-grid {
  display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: start;
}
.contact-copy h2 {
  font-size: clamp(2rem, 1.15rem + 2.65vw, 3.5rem); letter-spacing: -0.045em;
  margin-bottom: 1.25rem; text-wrap: balance;
}
.lede { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); line-height: 1.62; color: var(--muted); max-width: 62ch; }
.signature { margin-top: clamp(1.75rem, 2.8vw, 2.5rem); font-weight: 700; letter-spacing: -0.025em; color: var(--accent); font-size: clamp(1.125rem, 0.95rem + 0.7vw, 1.5rem); }
.signature--two-line { display: grid; gap: 0.1em; line-height: 1.2; }
.signature--two-line span { display: block; }
.signature--two-line span:last-child { font-weight: 600; opacity: 0.85; }

.contact-form-wrap {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: #FFFFFF; padding: clamp(1.25rem, 2.6vw, 2.25rem);
}
.form-preview-notice {
  font-size: 0.875rem; line-height: 1.55; color: var(--muted);
  padding: 0.875rem 1rem; margin-bottom: 1.5rem;
  border: 1px solid var(--line-strong); border-left-width: 3px; border-left-color: var(--accent);
  border-radius: var(--radius); background: var(--paper);
}
.form-preview-notice strong { color: var(--ink); font-weight: 700; }
.contact-form { display: grid; gap: 1.125rem; }
.field { display: grid; gap: 0.4rem; }
.field label { font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.01em; }
.req { color: var(--accent); }
.opt { display: inline-block; margin-left: 0.4em; font-weight: 500; font-size: 0.8125rem; color: var(--muted); letter-spacing: 0; }
.field input, .field textarea {
  width: 100%; min-height: 3rem; padding: 0.75rem 0.875rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: #FFFFFF; color: var(--ink); font: inherit; font-size: 1rem; line-height: 1.5;
}
.field textarea { min-height: 7.5rem; resize: vertical; }
.field input::placeholder { color: var(--muted); }
.field input:focus, .field textarea:focus { border-color: var(--accent); }
.field input[aria-invalid='true'], .field textarea[aria-invalid='true'] { border-color: #A32E23; border-width: 2px; }
.field-err { font-size: 0.8125rem; font-weight: 600; line-height: 1.45; color: #A32E23; }
.form-status { font-size: 0.9375rem; line-height: 1.55; }
.form-status:empty { display: none; }
.form-status.is-error { color: #A32E23; font-weight: 600; }
.form-status.is-success { color: var(--accent); font-weight: 600; }
.form-status.is-preview {
  color: var(--ink); font-weight: 600; padding: 0.75rem 0.875rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--paper);
}
/* The line that introduces the two optional questions. */
.form-optional-intro {
  margin-top: 0.35rem; padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.9375rem; font-weight: 700; color: var(--ink);
}

/* Not for people: off-screen rather than display:none, kept out of the tab
   order and out of the accessibility tree by the markup. */
.hp-field {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.form-helper, .form-privacy { font-size: 0.8125rem; line-height: 1.55; color: var(--muted); }

/* ============================================================
   FOUNDER PAGE
   One founder letter: a single centred reading column, everything
   left-aligned to the same edge, the portrait modest and in the
   flow. No timeline, no stat cards, no second demo.
   ============================================================ */
.founder {
  padding-block: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem)
                 clamp(2.5rem, 2rem + 3vw, 4.5rem);
}

/* The column hugs the reading measure rather than standing wider than it.
   A 730px wrapper left the prose ending ~80px short of its own right edge, so
   a portrait centred in the wrapper floated right of the text it belongs to.
   fit-content takes the measure from the prose at every breakpoint, so the
   column, the biography and the portrait share one axis — and that axis is
   the centre of the viewport. */
.founder-letter {
  width: fit-content; max-width: 100%;
  margin-inline: auto;
}

.about-title {
  font-size: clamp(0.6875rem, 0.66rem + 0.15vw, 0.75rem);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); font-weight: 700; margin-bottom: 0.75rem;
}
.founder-label {
  font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 0.75rem;
}
.founder-name {
  letter-spacing: -0.05em; line-height: 1;
}
.founder-role {
  margin-top: 0.5rem; font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  font-weight: 700; color: var(--accent);
}
.founder-name {
  font-size: clamp(2.25rem, 1.7rem + 2.3vw, 3.5rem);
}
.founder-lede {
  margin-top: 0.9rem; max-width: 42ch;
  font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.3125rem);
  line-height: 1.45; letter-spacing: -0.02em; color: var(--muted);
}

/* The photograph is finished rather than cropped out of its setting: a warm
   paper mat, a fine rule, and a shadow soft enough to read as a print resting
   on the page. 300x200 on desktop over the picture's own 3:2 composition.

   It sits on the column's left edge, not centred in it. Centred, it was the
   only centred thing in a page that is otherwise hard left — the label, the
   name, the role, the biography and the signature all start at the same edge —
   so it read as floating however exact the arithmetic was. One left edge for
   everything is the composition. */
.founder-figure {
  margin: 1.5rem 0;               /* 24px above and below, flush left */
  width: max-content; max-width: 100%;
  padding: 8px;
  background: #FFFEFB;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(23,25,28,0.08), 0 1px 2px rgba(23,25,28,0.04);
}
.founder-figure img {
  width: 300px; max-width: 100%; height: auto; display: block;
  border-radius: 6px;             /* inner corners inside the mat's 12px */
  background: var(--line);
}

/* the prose is the point: one measure, even rhythm, nothing interrupting it */
.founder-body {
  /* collapses with the portrait's own 24px, so the gap stays 24px either side */
  margin-top: 1.5rem;
  /* the ch unit is the width of "0", narrower than the average letter — 55ch
     measures out at roughly 64 characters a line */
  max-width: 55ch;
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.25rem);
  line-height: 1.66;
}
.founder-body p + p { margin-top: 1.35em; }

.founder-sign {
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
  padding-top: clamp(1.5rem, 2.4vw, 2rem);
  border-top: 1px solid var(--line);
  /* the column is the measure now, so the rule spans it rather than stopping
     short of its own right edge */
}
.founder-signature {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  font-weight: 800; letter-spacing: -0.03em;
}
.founder-email { margin-top: 0.35rem; font-size: 1.0625rem; }
.founder-email a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.founder-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.875rem 1.5rem;
  margin-top: clamp(1.25rem, 2vw, 1.75rem);
}

/* ---------------------------------------------------------- footer */
.site-footer { border-top: 1px solid var(--line); padding-block: clamp(2.25rem, 3.5vw, 3.25rem); }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.5rem 2.5rem; }
.footer-brand { display: grid; gap: 0.875rem; justify-items: start; }
.footer-brand img { width: auto; height: 62px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; font-size: 0.875rem; }
.footer-links a {
  color: var(--muted); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.footer-links a:hover { color: var(--ink); border-bottom-color: var(--accent); }
.footer-links a[aria-current='page'] { color: var(--ink); font-weight: 700; }
.footer-meta a { color: var(--accent); }
.footer-meta { display: grid; gap: 0.4rem; font-size: 0.8125rem; line-height: 1.55; color: var(--muted); text-align: right; }
.membership { font-size: 0.75rem; letter-spacing: 0.04em; color: var(--ink); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .contact-grid { grid-template-columns: 1fr; }
  .node-map { grid-template-columns: 1fr; }
  .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* the process wraps to two rows rather than squeezing four narrow columns */
  .howto-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hstep + .hstep::before { display: none; }
}

@media (max-width: 860px) {
  .founder-body { font-size: 1.0625rem; }
  /* two control rows here, and every pixel of chrome is a pixel the example
     does not get, so the label comes out of the frame. It is not dropped:
     .stage-label--under carries it directly beneath the reel at these widths. */
  .stage-controls { padding: 0.55rem 1rem 0.6rem; }
  .stage-controls .ctrl { min-height: 2.15rem; padding: 0.3rem 0.7rem; font-size: 0.75rem; }
  .stage-controls .ctrl-sm { min-height: 1.9rem; font-size: 0.6875rem; }
  .ctrl-row--sub { padding-top: 0.5rem; margin-top: 0.35rem; }
  .ctrl-row--sub .stage-label, .ctrl-div { display: none; }
  /* the slot is reserved here too: the row may wrap, but it wraps the same
     way whether or not Show answer is on screen, so the height never changes */
  .ctrl-slot { min-width: 6.9rem; min-height: 2.15rem; }
}
@media (max-width: 760px) {
  .founder-figure img { width: 270px; }
}
@media (max-width: 360px) {
  .founder-figure img { width: 240px; }
}

@media (max-width: 900px) {
  .quote-band-inner { grid-template-columns: 1fr; grid-template-rows: none; gap: 2rem; }
  .quote { grid-row: auto; grid-template-rows: none; }
}

@media (max-width: 760px) {
  .pos-card { grid-template-columns: 1fr; gap: 0.15rem; }
  .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* The frame holds one screen on a phone, so the category header is always
     in view without sticky positioning — and cannot overlap anything. */
  .stage { --stage-h: 700px; }
  /* Small means small: the header carries the icon and the category, and the
     descriptor moves into normal flow below it. */
  .stage-bar .story-desc { display: none; }
  .story-desc--flow { display: block; margin-bottom: 0.5rem; font-size: 0.8125rem; }
  /* every pixel of chrome here is a pixel the example does not get */
  .machine { width: 36px; }
  .sum-source { font-size: 0.6875rem; padding: 0.12rem 0.45rem; }
  /* the configuration reads as two predictable rows rather than reflowing */
  .sum-line { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.6rem; }
  .sum-spec { align-self: center; }
  .sum-sources { grid-column: 1 / -1; }
  /* the in-frame label only; .stage-label--under still carries it below */
  .ctrl-row--sub .stage-label { display: none; }
  .sched-axis { padding-left: 0; }
  .sched-row { grid-template-columns: minmax(0, 1fr) 5.5rem; row-gap: 0.15rem; }
  .sched-track { grid-column: 1 / -1; }
  .wfall-row { grid-template-columns: minmax(0, 1fr) 4.5rem auto; gap: 0.5rem; }
}

@media (max-width: 720px) {
  .nav-links { display: none; }          /* wordmark + Let's talk retained */
  .nav-inner { min-height: 4rem; gap: 0.75rem; }
  .brand-link img { height: 26px; }
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn { width: 100%; }
  .link-arrow { justify-content: center; }
  .stage-meta { padding-top: 0.35rem; }
  .howto-flow { grid-template-columns: 1fr; gap: 1rem; }
  .hask { min-height: 0; }
  /* the machine becomes a small header item, not a full-height illustration */
  .machine { width: 74px; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .footer-meta { text-align: left; }
  .founder-actions { flex-direction: column; align-items: stretch; }
  .founder-actions .btn { width: 100%; }
  .founder-actions .link-arrow { justify-content: center; }
  .footer-brand img { height: 52px; }
  .skill-row { grid-template-columns: minmax(0,1fr) 4.5rem auto; }
  .bar-row { grid-template-columns: minmax(0,1fr) 5.5rem auto; }
}

@media (max-width: 420px) {
  .data-table { font-size: 0.8125rem; }
  .data-table th, .data-table td { padding: 0.45rem 0.25rem; }
  .tee-slot, .tee-event { grid-template-columns: 3rem auto 1fr; gap: 0.5rem; font-size: 0.8125rem; }
  .record-rows > div { grid-template-columns: 1fr; gap: 0.05rem; }
  .record-rows dd { text-align: left; }
  .skill-row, .bar-row { grid-template-columns: 1fr; gap: 0.2rem; }
  .skill-track, .bar-track { width: 100%; }
  .chain-item { grid-template-columns: 1fr; gap: 0.15rem; }
  .contact-form-wrap { padding: 1.25rem; }
  .field input::placeholder { font-size: 0.875rem; }
  .regime, .mini-card { flex-basis: 100%; }
  .machine { width: 64px; }
  .wfall-row { grid-template-columns: minmax(0, 1fr) auto; }
  .wfall-track { display: none; }
}

/* long labels get two columns rather than a smaller type size */
@media (max-width: 360px) {
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   NO JAVASCRIPT — the default food-service story and both quotes
   are already in the markup, so the page still shows one complete
   example and a working contact form.
   ============================================================ */
html:not(.js) .stage-controls,
html:not(.js) .howto-controls,
html:not(.js) .story-card { display: none; }
/* Without JavaScript nothing is being replaced, so the frame has no reason to
   be a fixed height: the example simply runs to its natural length. */
html:not(.js) .stage { height: auto; min-height: 0; }
html:not(.js) .stage-scroll { overflow: visible; }
html:not(.js) .scroll-cue { display: none; }
html:not(.js) .turns { gap: clamp(1.1rem, 2.2vw, 1.75rem); }
html:not(.js) .summary[hidden] { display: block; }
html:not(.js) .result-card { opacity: 1; transform: none; }
html:not(.js) .a-ghost { display: none; }
html:not(.js) .cite-status, html:not(.js) .cite-preview { display: none; }
html:not(.js) .examples-note::after {
  content: ' The full reel needs JavaScript; this is the food-service example.';
}
/* the composition above is authored complete, so it reads without scripting */
html:not(.js) .howto { }

/* ============================================================
   MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* settled sources, no pulses, no animated searching */
  .cite[data-state='checking'] .cite-status::before { animation: none; opacity: 1; transform: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}