/* Base styles + components. Tokens live in tokens.css.
   Inter Variable self-hosted (wght 100..900, slnt -10..0) — Google Fonts
   does not expose Inter's slnt axis, so we ship the variable woff2 directly
   to keep the role-mark slnt italic working. Gentona Light used only on hero
   headline, matching levibahn.com (portfolio-site/src/scss/_fonts.scss). */

@font-face {
  font-family: "Inter";
  font-style: oblique 0deg 10deg;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/InterVariable.woff2") format("woff2-variations");
}

@font-face {
  font-display: optional;
  font-family: "GentonaLight";
  src: url("../fonts/Gentona_Light.woff2") format("woff2");
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg, video { display: block; max-width: 100%; }
button { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

html {
  scroll-behavior: smooth;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  /* No html bg. Lets Chrome promote body's bg to canvas-bg — one paint
     surface for the entire page (canvas paint extends through overscroll
     too). No html-canvas-vs-body-element-box boundary at footer/doc end. */
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body-base-size);
  line-height: var(--text-body-base-line);
  font-weight: var(--font-regular);
  color: var(--fg-primary);
  background-color: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
  font-optical-sizing: none;
  letter-spacing: 0;
  min-height: 100vh;
  min-height: 100dvh;
  transition: background-color var(--dur-standard) var(--ease-standard),
              color var(--dur-standard) var(--ease-standard);
}

/* Focus — visible 2px, 2px offset, primary fg */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--fg-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Type utilities */
.t-hero {
  font-family: var(--font-display);
  font-weight: var(--font-light);
  font-size: var(--text-hero-size);
  line-height: var(--text-hero-line);
  letter-spacing: var(--tracking-hero);
}
.t-display {
  font-family: var(--font-display);
  font-weight: var(--font-light);
  font-size: var(--text-display-size);
  line-height: var(--text-display-line);
  letter-spacing: var(--tracking-display);
}
/* Light mode: bump display weight one step up (100 → 200). Inter Variable
   serves the in-between weight from the wght axis. Dark stays at 100. */
.t-display:not(.dark *) { font-weight: var(--font-extralight); }
.t-body-lg {
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line);
}

/* Layout containers */
.container {
  max-width: var(--container-page);
  margin-inline: auto;
  padding-inline: var(--pad-h);
  width: 100%;
}

/* Skip link — visible on focus only. Owner reported a black pill briefly
   appearing top-left on scroll-back-to-top in light mode. Root cause: the
   prior position: absolute + transform: translateY(-100%) parked the link
   above document-top, which iOS Safari's overscroll/rubber-band exposes
   during the rebound when the address bar settles. Switching to position:
   fixed anchors it to the viewport so it can't be revealed by document-
   level bounce, and the visually-hidden pattern keeps it out of layout
   for AT users until they tab to it. */
.skip-link {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  background: var(--fg-primary);
  color: var(--bg-base);
  font-size: var(--text-link-sm-size);
  font-weight: var(--font-medium);
  z-index: var(--z-overlay);
}
.skip-link:focus-visible {
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
  padding: var(--space-3) var(--space-4);
  outline-offset: -2px;
}

/* ===== Nav — desktop sticky =====
   Figma 57:11410 — height 64, bg --bg-nav, bottom hairline divider, brand sits
   24px from frame edge (not aligned with the 128 content gutter at 1440). */
.nav {
  height: var(--nav-h-desktop);
  display: none;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-nav);
}
@media (min-width: 768px) {
  .nav { display: block; }
}
.nav__inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  /* Nav uses a fixed 24px gutter on all breakpoints so the brand reads as
     chrome, not as part of the 128px content column. */
  padding-inline: var(--space-6);
}
.nav__brand {
  font-family: var(--font-body);
  font-weight: var(--font-medium);
  font-size: var(--text-link-sm-size);
  letter-spacing: -0.005em;
  color: var(--fg-primary);
}
.nav__brand .nav__brand-dim { color: var(--fg-tertiary); }
.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
}
.nav__sep {
  color: var(--fg-quiet);
  font-size: var(--text-link-sm-size);
  line-height: 1;
  user-select: none;
  pointer-events: none;
}
.nav__link {
  font-size: var(--text-link-sm-size);
  line-height: var(--text-link-sm-line);
  font-weight: var(--font-medium);
  color: var(--fg-primary);
  padding: var(--space-2) 0;
  position: relative;
  transition: color var(--dur-fast) var(--ease-standard);
}
.nav__link.is-active {
  color: var(--accent-primary);
}
.nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--accent-primary);
  border-radius: var(--radius-xs);
}

/* ===== Bottom tab bar removed per MOBILE-UPDATE-SPEC §6.1 (approved 2026-05-21).
   Tabbar was mobile-only (display:none ≥ 768px); desktop layout untouched.
   --tabbar-h-mobile token retained in tokens.css for historical refs. ===== */

/* ===== Theme toggle visual structure (matches Tailwind classes from live) ===== */
.theme-toggle {
  position: fixed;
  left: 12px;
  z-index: var(--z-nav);
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-full);
  padding: 8px;
  cursor: pointer;
  border: 0;
  font-family: var(--font-body);
}
@media (min-width: 768px) { .theme-toggle { left: 24px; } }
@media (min-width: 1024px) { .theme-toggle { left: 32px; } }
.theme-toggle:focus-visible {
  outline: 2px solid var(--fg-primary);
  outline-offset: 4px;
}

.theme-toggle__label {
  position: relative;
  z-index: 1;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  color: var(--fg-primary);
}

.theme-toggle__pill {
  position: relative;
  z-index: 2;
  display: inline-flex;
  height: 24px;
  width: 50px;
  align-items: center;
  border-radius: var(--radius-full);
  padding: 0 3px;
  background-color: var(--border-subtle);
  transition: background-color var(--dur-fast) var(--ease-out-strong);
}

.theme-toggle__knob {
  display: block;
  height: 18px;
  width: 18px;
  border-radius: var(--radius-full);
  background: var(--surface-toggle-knob);
  transform: translateX(0);
  transition: transform var(--dur-standard) var(--ease-figma-gentle);
}
[aria-checked="true"] .theme-toggle__knob {
  transform: translateX(26px);
}

/* ===== Dark mode toggle — replicated 1:1 from live levibahn.com =====
   Source: /_next/static/chunks/app/page-*.js (DarkModeToggle component).
   Behavior:
     - Fixed bottom-left. Bottom is computed at runtime (footer-aware).
     - Initial state: container off-screen left (translateX(-100% - 28px))
       AND pill shifted left by --label-shift, so on appear the pill
       slides over and covers the "Dark Mode" label.
     - On first scroll: data-toggle-shown=true → container slides in,
       pill simultaneously returns to natural position revealing label.
     - When scrollY > innerHeight: data-toggle-label-hidden=true →
       label collapses (max-width:0, opacity:0), pill stays put. Because
       z-index(pill)=2 > z-index(label)=1, the pill visually covers the
       label as it collapses behind it.
     - Storage key: color-scheme. Class on documentElement: dark. */
[data-toggle-container] {
  transform: translateX(calc(-100% - 28px));
  transition: transform var(--dur-figma-slide) var(--ease-figma-gentle);
}
[data-toggle-container][data-toggle-shown="true"] {
  transform: translateX(0);
}
[data-toggle-slide="label"] {
  max-width: var(--label-width, 200px);
  margin-right: 8px;
  opacity: 1;
  transition: max-width var(--dur-figma-slide) var(--ease-figma-gentle),
              margin-right var(--dur-figma-slide) var(--ease-figma-gentle),
              opacity var(--dur-figma-slide) var(--ease-figma-gentle);
}
[data-toggle-label-hidden="true"] [data-toggle-slide="label"] {
  max-width: 0;
  margin-right: 0;
  opacity: 0;
}
[data-toggle-slide="pill"] {
  transform: translateX(calc(-1 * var(--label-shift, 78px)));
  transition: transform var(--dur-figma-slide) var(--ease-figma-gentle);
}
[data-toggle-container][data-toggle-shown="true"] [data-toggle-slide="pill"] {
  transform: translateX(0);
}
@media (prefers-reduced-motion: reduce) {
  [data-toggle-container],
  [data-toggle-slide="pill"] {
    transition: none !important;
    transform: none !important;
  }
  [data-toggle-slide="label"] {
    transition: opacity var(--dur-fast) var(--ease-out-strong) !important;
  }
}

/* ===== Hero =====
   Figma 55:9572 — Composite/Hero is 358px tall at 1440 (64 top + 230 content + 64 bottom).
   Dropped the prior min-height:100vh so overview rows fall within the first viewport. */
.hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* Mobile py-56 — Figma 40 + 16 owner-requested breathing room above
     eyebrow and below CTA. Desktop keeps space-16 (64px). */
  padding-block: calc(var(--space-10) + var(--space-4));
  position: relative;
}
@media (min-width: 768px) {
  .hero { padding-block: var(--space-16); }
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-12);
}
@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-20);
  }
}

/* Figma "Hero/Copy" (55:9574) fixes the column at 600px.
   Mobile: gap-24 between eyebrow, headline group, actions per Figma
   `I142:4357;14:21` (MOBILE-UPDATE-SPEC §1.1). Margin-based stack on the
   children below collapses to this gap on mobile. Hero/CTAs gap → 0 on
   mobile per audit (Figma `Hero/CTAs gap: 0`). */
.hero__copy { max-width: 600px; min-width: 0; }
@media (max-width: 767px) {
  /* Figma 142:5608 Hero/Copy spacing (mobile):
       eyebrow → heading-group: 24
       heading-group internal:    8
       heading-group → CTAs:      24
     Live markup is flat (no wrapping group), so the parent flex gap of
     24 applies between all 4 children. Negative margin-top on .hero__subline
     pulls it 16 closer to .hero__headline so the effective gap = 24 - 16 = 8. */
  .hero__copy {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);                                 /* 24 between sibling rows */
  }
  .hero__copy > .hero__eyebrow,
  .hero__copy > .hero__headline,
  .hero__copy > .hero__subline,
  .hero__copy > .hero__actions { margin-bottom: 0; }
  .hero__copy > .hero__subline {
    margin-top: calc(var(--space-2) - var(--space-6));   /* -16 → effective 8px */
  }
  .hero__actions { gap: 0; }
  /* Mobile headline + subtext typography (Figma 142:4357 / 142:5608).
     Heading 28/35 -0.28; subtext 16/24 -0.16. Desktop unchanged. */
  .hero__headline {
    font-size: 28px;
    line-height: 35px;
    letter-spacing: -0.28px;
  }
  .hero__subline {
    line-height: 24px;
    letter-spacing: -0.16px;
  }
}
.hero__visual { min-width: 0; }
html, body { overflow-x: clip; }
.hero__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  color: var(--text-accent);                          /* semantic/text/accent — swaps via .dark */
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.hero__eyebrow .hero__eyebrow-dot {
  /* 12s loop: 2s yellow hold → 4s ease to mint → 2s mint hold → 4s ease back
     to yellow. Holds short, transitions slow + deliberate. Favicon SMIL in
     icon.svg uses the same keyTimes. */
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--accent-primary);
  margin-right: var(--space-2);
  vertical-align: 2px;
  animation: hero-dot-pulse 12s linear infinite;
}
@keyframes hero-dot-pulse {
  0%, 16.67%  { background: var(--accent-primary); } /* 0–2s hold yellow */
  50%, 66.67% { background: var(--hover-mint); }     /* 6–8s hold mint */
  100%        { background: var(--accent-primary); } /* 12s back to yellow */
}
@media (prefers-reduced-motion: reduce) {
  .hero__eyebrow .hero__eyebrow-dot {
    animation: none;
    background: var(--accent-primary);
  }
}
/* Hero headline — Gentona Light. Sole use of Gentona on the site.
   CSS matches portfolio-site/src/scss/_homepage.scss h1: family, sizes,
   weight, line-heights all carried over from levibahn.com.
   Figma "Frame 15" (55:9578) — 8px gap between headline + subline. */
.hero__headline {
  font-family: "GentonaLight", sans-serif;
  font-weight: 100;
  margin-bottom: var(--space-2);
}
.hero__subline {
  font-size: var(--text-subline-size);
  line-height: var(--text-subline-line);
  color: var(--fg-secondary);
  margin-bottom: var(--space-6);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}
.hero__skip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-button);
  /* MOBILE-UPDATE-SPEC §6.3 — owner updating Figma to pill; code keeps
     --radius-full on both breakpoints. */
  border-radius: var(--radius-full);
  font-size: var(--text-link-sm-size);
  font-weight: var(--font-medium);
  transition: border-color var(--dur-fast) var(--ease-standard),
              background-color var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
/* Mobile shows "See it at your company"; desktop shows the longer
   "Skip to: ..." variant. Figma `I142:4357;14:28`. MOBILE-UPDATE-SPEC §5.1. */
.hero__skip-label--mobile { display: none; }
.hero__skip-label--desktop { display: inline; }
@media (max-width: 767px) {
  .hero__skip-label--mobile { display: inline; }
  .hero__skip-label--desktop { display: none; }
}
.hero__skip .hero__arrow {
  transition: transform var(--dur-fast) var(--ease-standard);
}
/* ===== Section foundation (shared across Sections 2-6) ===== */
.section {
  padding-block: var(--space-20);
  position: relative;
}
@media (min-width: 768px) {
  .section { padding-block: var(--space-24); }
}
.section:last-of-type { padding-bottom: var(--space-20); }
@media (min-width: 768px) {
  .section:last-of-type { padding-bottom: var(--space-24); }
}
.section__header { margin-bottom: var(--space-12); max-width: var(--container-prose); }
.section__eyebrow {
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  letter-spacing: var(--tracking-eyebrow-strong);
  text-transform: uppercase;
  color: var(--fg-tertiary);
  margin-bottom: var(--space-3);
}

/* Eyebrow breadcrumb — all 4 deep-dive sections, current highlighted in mint */
.section__crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.section__crumbs a {
  color: var(--fg-tertiary);
  transition: color var(--dur-fast) var(--ease-out-strong);
  padding: 2px 0;
}
.section__crumbs a[aria-current="page"] {
  color: var(--accent-mint, var(--hover-mint));
}
.section__crumbs-sep {
  color: var(--fg-muted);
  letter-spacing: 0;
  position: relative;
  /* Center the two colons vertically against uppercase text */
  top: -1px;
}
.section__title {
  font-family: var(--font-body);
  font-weight: var(--font-light);
  font-size: var(--text-display-size);
  line-height: var(--text-display-line);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-4);
}
/* Light mode: bump section title weight one step up (100 → 200). Dark stays
   at 100 to preserve the original display weight on the dark composite. */
.section__title:not(.dark *) { font-weight: var(--font-extralight); }
.section__lede {
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line);
  color: var(--fg-secondary);
  max-width: 56ch;
}

/* ===== Section 2 — Cards ===== */
.cards {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}
@media (min-width: 768px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
}
@media (min-width: 1024px) {
  .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.cards > li { display: flex; }
.card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  text-align: left;
  width: 100%;
  height: 100%;
  padding: var(--space-6) var(--space-6) var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: inherit;
  /* Lift above the fixed grain canvas (scripts/grain.js renders at z=9999
     with mix-blend-mode: soft-light) so the card surface paints opaquely
     and the noise texture doesn't render inside the card. */
  position: relative;
  z-index: 10000;
  transition: border-color var(--dur-fast) var(--ease-out-strong),
              background-color var(--dur-fast) var(--ease-out-strong),
              box-shadow var(--dur-fast) var(--ease-out-strong),
              transform var(--dur-fast) var(--ease-out-strong);
}
/* Light mode card (audit pass 2026-05-22): fill --bg-card (#ebeae7),
   no border (Figma). Dark default keeps the 1px border with no fill via
   the .dark scope below. */
.card:not(.dark *) {
  background: var(--bg-card);
  border-color: transparent;
}

/* MOBILE-UPDATE-SPEC §4.6 — CORRECTION via resolution log 2026-05-21.
   Dark Sheet2 frame shows ALL 4 cards with border-only, including the card
   that triggered the sheet. The bg-fill (#121110) is the transient
   tap/spring state, NOT a sticky open-state. State machine:
     - default                     → border (no fill)
     - [data-tap-active="true"]    → fill #121110, no border (during press spring)
     - .is-open                    → border (re-asserts default; tracked for future hooks) */
.dark .card[data-tap-active="true"] {
  background: var(--bg-card-dark);
  border-color: transparent;
}
/* Explicit no-op rule for .is-open so the state class round-trips cleanly
   even if a future hook attaches behavior to it. */
.dark .card.is-open {
  background: transparent;
  border-color: var(--border-subtle);
}
@media (max-width: 1023px) { .card { min-height: 220px; } }
.card:focus-visible {
  outline: 2px solid var(--fg-primary);
  outline-offset: 4px;
}
/* Dark mode: hover mirrors the open state — border + index + CTA fade to
   accent. Title + summary stay. Light mode handles hover via bg swap only
   (no font color shifts) — rule below. Press-scale handled by .btn-press. */
@media (hover: hover) and (pointer: fine) {
  .dark .card:hover { border-color: var(--accent-primary); }
  .dark .card:hover .card__index,
  .dark .card:hover .card__cta { color: var(--accent-primary); }
  /* Light mode hover: swap bg to the lighter --bg-card surface, render a 2px
     yellow border (1px border + 1px inset shadow = 2px effective ring, no
     layout shift). Index weight pinned to 400, CTA to 500. No font color shifts. */
  .card:not(.dark *):hover {
    background: var(--bg-card);
    border-color: var(--accent-primary);
    box-shadow: inset 0 0 0 1px var(--accent-primary);
  }
  .card:not(.dark *):hover .card__index { font-weight: var(--font-regular); }
  .card:not(.dark *):hover .card__cta { font-weight: var(--font-medium); }
}
.card__index {
  font-size: 12px;
  line-height: var(--text-body-sm-line);
  letter-spacing: 0.08em;
  color: var(--fg-tertiary);
  font-weight: var(--font-regular);
  font-feature-settings: "tnum";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  transition: color var(--dur-fast) var(--ease-out-strong);
}
/* Lock weight across all states. The accent-yellow color perceptually reads
   thicker on dark bg than the muted gray default; explicit weight on every
   state prevents any synthesized weight change. */
.card:hover .card__index,
.card[aria-expanded="true"] .card__index,
.card:focus-visible .card__index,
.card:active .card__index {
  font-weight: var(--font-regular);
  -webkit-text-stroke: 0;
}
.card__title {
  font-size: 18px;
  line-height: 18.2px;
  font-weight: var(--font-medium);
  color: var(--fg-primary);
}
.card__summary {
  font-size: var(--text-body-base-size);
  line-height: var(--text-body-base-line);
  color: var(--fg-secondary);
  flex: 1;
}
@media (min-width: 1024px) {
  .card__summary { font-size: 14px; line-height: 21px; }
}
.card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-link-sm-size);
  font-weight: var(--font-medium);
  color: var(--fg-secondary);
  margin-top: var(--space-4);
  transition: color var(--dur-fast) var(--ease-out-strong);
}
.card__arrow {
  transition: transform var(--dur-fast) var(--ease-out-strong);
  display: inline-block;
}

/* ===== Card mobile reconciliation (Figma 149:8751 Card/Overview/01) =====
   Layout: grid with number+title inline on row 1, body on row 2, CTA on
   row 3. Card body = flex column; outer gap 10 between content frame and
   CTA; content frame gap 4 between title-row and body. */
@media (max-width: 767px) {
  /* Cards/Stack mobile: pt 8 pb 72, px 24, gap 16. 72px below the last
     card per owner spec 2026-05-22 — matches the ~36px horizontal
     padding visual rhythm at 2× vertical.
     Selector includes the [aria-expanded="true"] + adjacent match so it
     beats the unscoped base rule's specificity (0,1,2) → ours is (0,3,1).
     Scoped via :has(> .cards) so workflow / brain / tools rows keep
     their default --space-12 bottom padding. */
  .overview-row[aria-expanded="true"] + .overview-row__open:has(> .cards) {
    padding-bottom: 0;
  }
  .overview-row__open > .cards {
    padding-block: var(--space-2) 72px;               /* 8 / 72 */
    gap: var(--space-4);                              /* 16 */
  }
  .card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "idx  title"
      "sum  sum"
      "cta  cta";
    column-gap: 4px;                                  /* number ↔ title */
    row-gap: 4px;                                     /* 4 inside content frame */
    align-items: baseline;
    padding: 18px 20px;
    border-radius: 12px;
    /* Override the desktop min-height: 220px @ max-width: 1023 rule. Figma
       mobile card is 130px (or 111px for #04). Min-height was inflating
       internal whitespace and pushing CTA away from body. */
    min-height: 0;
  }
  /* Dark card surface (Figma 149:8751): solid #121110 fill, no border,
     overflow:clip. Applies to every card in the expanded stack — no
     active/inactive distinction in this frame. Overrides the global
     §4.6 state machine on mobile so all states (default, .is-open,
     [data-tap-active]) stay filled. Tap state still wins the 2px yellow
     border via the data-tap-active rule above. */
  .dark .card,
  .dark .card.is-open,
  .dark .card[data-tap-active="true"] {
    background: var(--bg-card-dark);                  /* #121110 */
    border-color: transparent;
    overflow: clip;
  }
  .dark .card[data-tap-active="true"] {
    border-color: var(--accent-primary);              /* 2px yellow on tap, set above */
  }
  .card__index {
    grid-area: idx;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 16px;
    line-height: 18px;
    font-weight: 300;                                 /* Inter Light */
    font-variation-settings: "wght" 300;
    letter-spacing: 0;
    color: var(--fg-muted);
    /* Inherited from .card__index base rule:
       - font-feature-settings: "tnum"
       - text-rendering: geometricPrecision
       - -webkit-font-smoothing: antialiased
       - -moz-osx-font-smoothing: grayscale
       These collectively make Safari iOS render the "1" as a tighter,
       wider-stroked glyph than the section row number (which has none
       of them). Reset everything to the defaults that .overview-row__index
       uses so both numbers render with the same Inter Light face. */
    font-feature-settings: normal;
    font-variant-numeric: normal;
    text-rendering: auto;
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
  }
  .card__title {
    grid-area: title;
    font-size: 16px;
    line-height: 24px;
    font-weight: var(--font-semibold);
    margin-left: 0;
  }
  .card__summary {
    grid-area: sum;
    font-size: 13px;
    line-height: 19px;
    margin-top: 0;                                    /* parent row-gap handles 4 */
  }
  .card__cta {
    grid-area: cta;
    gap: 6px;
    margin-top: 6px;                                  /* outer gap 10 = 4 row + 6 mt */
    color: var(--text-accent);
    font-size: 13px;
    line-height: 18px;
    overflow: clip;
  }
  /* "Open" label = 13/Medium; arrow = 14/Regular per Figma. The base
     .card__cta size 13 already covers "Open"; bump the arrow specifically. */
  .card__cta svg,
  .card__cta .icon {
    width: 14px;
    height: 14px;
  }
}
/* ===== Section 3 — Timeline / steps ===== */
.timeline {
  max-width: none;
}
.timeline__toolbar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  padding-bottom: 0;
  /* Single divider on .steps top-border handles the visual rule.
     Mobile + desktop both use a single-row layout per Figma 150:10319. */
}
.timeline__actions { display: flex; gap: var(--space-3); }
.timeline__btn,
.timeline__show-all {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-link-sm-size);
  font-weight: var(--font-medium);
  color: var(--fg-secondary);
  background: transparent;
  border: 1px solid var(--border-button);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out-strong),
              border-color var(--dur-fast) var(--ease-out-strong),
              box-shadow var(--dur-fast) var(--ease-out-strong),
              transform 160ms var(--ease-out-strong);
}
@media (hover: hover) and (pointer: fine) {
  /* Dark mode: hover flips both text and border to accent. */
  .dark .timeline__btn:hover,
  .dark .timeline__show-all:hover {
    color: var(--accent-primary);
    border-color: var(--accent-primary);
  }
  /* Light mode: 2px yellow border on hover (1px border + 1px inset shadow,
     no layout shift). Text color stays. */
  .timeline__btn:not(.dark *):hover,
  .timeline__show-all:not(.dark *):hover {
    border-color: var(--accent-primary);
    box-shadow: inset 0 0 0 1px var(--accent-primary);
  }
}
.timeline__show-all-wrap {
  padding-top: var(--space-4);
}
.timeline__progress {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-body-sm-size);
  color: var(--fg-secondary);
}
.timeline__progress-num { font-variant-numeric: tabular-nums; }
.timeline__progress-bar {
  display: inline-block;
  width: 140px;
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--border-subtle);
  overflow: hidden;
  position: relative;
}
.timeline__progress-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--accent-primary);
  transition: width var(--dur-standard) var(--ease-out-strong);
}

.timeline__planning {
  max-width: var(--container-prose);
  margin: 0 0 var(--space-8);
  padding-left: var(--space-4);
  border-left: 2px solid var(--border-subtle);
  display: grid;
  gap: var(--space-2);
}
.timeline__planning p {
  margin: 0;
  color: var(--fg-secondary);
  font-size: var(--text-body-base-size);
  line-height: var(--text-body-base-line);
}
.timeline__planning strong { color: var(--fg-primary); font-weight: var(--font-medium); }

.steps {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border-subtle);
}
.step { border-bottom: 1px solid var(--border-subtle); position: relative; }
.step__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "num main meta";
  align-items: center;
  column-gap: var(--space-4);
  row-gap: var(--space-2);
  width: 100%;
  padding: var(--space-5) 0;
  text-align: left;
  color: inherit;
  transition: background-color var(--dur-fast) var(--ease-out-strong);
}
@media (min-width: 768px) {
  .step__head {
    grid-template-columns: 56px 1fr auto;
    column-gap: var(--space-6);
    padding: var(--space-6) 0;
  }
}
.step__head:focus-visible { outline: 2px solid var(--fg-primary); outline-offset: -2px; }

.step__num {
  grid-area: num;
  font-size: var(--text-body-sm-size);
  font-feature-settings: "tnum";
  letter-spacing: 0.05em;
  color: var(--fg-tertiary);
  padding-top: 2px;
}
.step__main { grid-area: main; min-width: 0; }
.step__title {
  display: block;
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line);
  font-weight: var(--font-medium);
  color: var(--fg-primary);
  margin-bottom: var(--space-1);
}
.step__summary {
  display: block;
  font-size: var(--text-body-base-size);
  line-height: var(--text-body-base-line);
  color: var(--fg-secondary);
}
.step__meta {
  grid-area: meta;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  min-width: 120px;
}
.step__badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: var(--font-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle);
  color: var(--fg-secondary);
  white-space: nowrap;
}
/* Badge tints per Figma 54:7438. Borders track text color for hairline reads. */
.step__badge--you { color: var(--badge-you); border-color: var(--badge-you); }
.step__badge--prompt { color: var(--badge-prompt); border-color: var(--badge-prompt); }
.step__badge--mixed { color: var(--badge-mixed); border-color: var(--badge-mixed); }
.step__tool {
  font-size: var(--text-body-sm-size);
  color: var(--fg-tertiary);
  font-feature-settings: "tnum";
}

/* ===== Steps mobile reconciliation (audit 2026-05-22) =====
   Figma Step row 142:4469+. Structural change vs desktop:
   - Desktop: grid auto/1fr/auto with meta in its own right column
   - Mobile:  grid auto/1fr with main column holding meta below title+desc
   No HTML change — grid-template-areas swap moves .step__meta into the
   main column visually. */
@media (max-width: 767px) {
  /* Hide Expand all / Collapse all on mobile per owner direction
     2026-05-22. Only the Show all 13 ↔ Collapse rows button remains
     (lives outside the toolbar in .timeline__show-all-wrap). */
  .timeline__actions { display: none; }
  .timeline__btn,
  .timeline__show-all {
    padding: var(--space-2) var(--space-3-5);     /* 8 14 */
    font-size: 12px;
    line-height: 16px;
    font-weight: var(--font-regular);
  }
  /* Toolbar indented to line up with the row 02 header text column
     (number column width + gap on the .overview-row grid). Progress
     group then takes the rest of the row; the bar fills any remaining
     space so the indicator stretches to the container's right edge
     regardless of viewport width. */
  .timeline__toolbar { padding-left: 36px; }   /* 24px num col + 12px gap → title left edge */
  .timeline__progress {
    flex: 1;
    font-size: 11px;
    line-height: 14px;
    color: var(--fg-quiet);
    gap: var(--space-2);                          /* 8 between label + bar */
  }
  .timeline__progress-bar {
    flex: 1;
    width: auto;
    height: 4px;
    border-radius: var(--radius-xs);
  }
  /* Mobile step row — Figma:
     - top divider 1px var(--border-subtle), padding-block 18
     - flex row: num (left, top-aligned) + main (flex-col gap 8)
       main = title-block (flex-col gap 4) + meta row (flex gap 8) */
  .step__head {
    /* Fixed 24px num column + 12 gap so step numbers right-align under
       the overview row numbers above, and step titles share the same
       left edge as the row title. */
    grid-template-columns: 24px 1fr;
    grid-template-areas:
      "num main"
      "num meta";
    align-items: start;
    padding: 18px 0;
    column-gap: var(--space-3);                    /* 12 */
    row-gap: var(--space-2);                       /* 8 between main + meta */
  }
  .step__main {
    /* Title + summary already inside .step__main; the existing
       margin-bottom:4 on .step__title preserves the 4px title→desc gap. */
    display: flex;
    flex-direction: column;
  }
  .step__meta {
    grid-area: meta;
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);                           /* 8 */
    min-width: 0;
  }
  .step__num {
    /* Match the title's font size on mobile so num + title share a single
       baseline. Force Inter and reset the tabular/geometric features
       inherited from the desktop base rule — they swap the "1" glyph to
       a variant that reads as a different family on mobile. Right-align
       so digits stack vertically under the overview row number above. */
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 20px;
    font-weight: 300;                              /* Inter Light */
    letter-spacing: 0;
    color: var(--fg-quiet);
    padding-top: 0;
    justify-self: end;
    text-align: right;
  }
  .step__title {
    font-size: 15px;
    line-height: 20px;
    font-weight: var(--font-semibold);
    margin-bottom: var(--space-1);                 /* 4 */
  }
  .step__summary {
    font-size: 12px;
    line-height: 17px;
  }
  .step__badge {
    padding: 4px 8px;
    font-size: 9px;
    line-height: 14px;
    letter-spacing: 0.8px;
  }
  .step__tool {
    font-size: 11px;
    line-height: 14px;
    color: var(--fg-quiet);
  }
}
/* Open row: number + title hold accent (matches Figma 54:7438 step 09 open). */
.step__head[aria-expanded="true"] .step__num,
.step__head[aria-expanded="true"] .step__title { color: var(--accent-primary); }
/* Light mode: title stays at --fg-primary when expanded. Num still flips to
   accent via the row-accent system. */
.step__head[aria-expanded="true"]:not(.dark *) .step__title { color: var(--fg-primary); }

.step__body {
  /* Top padding removed per spec — body sits flush under the step head. */
  padding: 0 0 var(--space-8) 0;
  font-size: var(--text-body-base-size);
  line-height: var(--text-body-base-line);
  color: var(--fg-secondary);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  animation: step-body-in var(--dur-expand) var(--ease-out-strong);
}
.step__body[hidden] { display: none; }
@media (min-width: 768px) {
  .step__body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-6);
    padding-left: calc(56px + var(--space-6));
    padding-right: var(--space-4);
    align-items: start;
  }
}
@media (max-width: 767px) {
  .step__body { padding-left: 0; padding-right: 0; }
}
.step__body-text {
  font-size: 14px;
  line-height: 21px;
  color: var(--fg-secondary);
}
.step__body-text p + p { margin-top: var(--space-3); }
/* Inline .md filenames carry the body color, only the bg distinguishes them. */
/* Inline <code> chip — shared base. Background + color vary per context;
   declared via :where() (0 specificity) so per-context selectors below
   still win for bg/color without cascade gymnastics. */
:where(
  .step__body-text code,
  .gates__lede code,
  .brain-row__desc code,
  .brain-row__prompt code,
  .tool-table__scroll table code,
  .hiring__brain-text code,
  .sheet__body code
) {
  font-family: var(--font-mono);
  font-size: 0.92em;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
}
.step__body-text code {
  background: var(--bg-surface-2);
  color: var(--fg-secondary);
}
.step__body-text strong { color: var(--fg-primary); font-weight: var(--font-semibold); }

@keyframes step-body-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .step__body { animation: none; }
}

/* Rows 4–13 collapse out of layout until [data-show-all="true"] flips on the
   timeline. When revealed they cascade in with the same load-row animation
   used by the initial 3 rows. --reveal-i (0..9) on each hidden row drives a
   60ms stagger. */
.step[data-step-hidden] { display: none; }
.timeline[data-show-all="true"] .step[data-step-hidden] {
  display: list-item;
  animation: load-row var(--load-row-dur) ease-out both;
  animation-delay: calc(var(--reveal-i, 0) * 60ms);
}
@keyframes step-row-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .timeline[data-show-all="true"] .step[data-step-hidden] {
    animation: none;
  }
}

/* ===== Approval gates table ===== */
.gates {
  /* 32px above (gap from Show all 13 button). 16px below stacks with the
     open container's 48px padding-bottom to land 64px after the gates. */
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
  padding: var(--space-8) var(--space-6);
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
}
/* Dark gates panel — audit resolution 2026-05-22 (§4.3 closed). Solid
   --bg-gates-dark fill (#121110), no border. Cascades to desktop. */
.dark .gates {
  background: var(--bg-gates-dark);
  border: 0;
}
@media (min-width: 768px) {
  .gates { padding: var(--space-12); }
}
.gates__head { margin-bottom: var(--space-8); max-width: 56ch; }
.gates__eyebrow {
  font-size: var(--text-body-sm-size);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
  margin-bottom: var(--space-2);
}
.gates__title {
  font-family: var(--font-body);
  font-weight: var(--font-light);
  font-size: 28px;
  line-height: 34px;
  letter-spacing: -0.005em;
  margin-bottom: var(--space-3);
  color: var(--fg-primary);
}
@media (min-width: 768px) {
  .gates__title { font-size: 36px; line-height: 42px; }
}
.gates__lede {
  color: var(--fg-secondary);
  font-size: var(--text-body-base-size);
}
.gates__lede code {
  background: transparent;
  color: inherit;
}
.gates__scroll { width: 100%; overflow-x: auto; }
.gates__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-body-base-size);
}
.gates__table th,
.gates__table td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}
.gates__table thead th {
  font-size: var(--text-body-sm-size);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
  font-weight: var(--font-medium);
  padding-top: 0;
}
.gates__table tbody tr:last-child th,
.gates__table tbody tr:last-child td { border-bottom: 0; }
.gates__table tbody th {
  font-weight: var(--font-medium);
  color: var(--fg-primary);
  white-space: nowrap;
}
.gates__num {
  display: inline-block;
  margin-right: var(--space-2);
  color: var(--fg-tertiary);
  font-feature-settings: "tnum";
  font-weight: var(--font-medium);
}
.gates__table td { color: var(--fg-secondary); }

/* ===== Mobile-only flat gates list (Figma 142:4522 Gates/Stack) =====
   Mutually exclusive with the desktop .gates__scroll table. Layout +
   typography match Figma exactly; padding, gaps, borders, fonts all
   spec-locked. */
.gates__list { display: none; }                /* hidden on desktop */
[data-mobile-only] { display: none; }          /* generic mobile-only opt-in */
@media (max-width: 767px) {
  [data-desktop-only] { display: none !important; }
  [data-mobile-only] { display: block; }
  .gates__list {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .gates__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);                       /* 8 between head and text */
    padding-block: var(--space-4);             /* 16 */
    border-bottom: 1px solid var(--border-subtle);
  }
  .gates__item:last-child { border-bottom: 0; }
  .gates__item-head {
    display: flex;
    align-items: center;
    gap: var(--space-1);                       /* 4 */
  }
  .gates__item-num {
    font-weight: 300;                          /* Inter Light */
    font-size: 16px;
    line-height: 18px;
    color: var(--fg-secondary);                /* text/body */
  }
  .gates__item-name {
    font-weight: var(--font-semibold);
    font-size: 16px;
    line-height: 24px;
    color: var(--fg-primary);                  /* text/heading */
  }
  .gates__item-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);                       /* 4 between after + desc */
  }
  .gates__item-after,
  .gates__item-desc {
    margin: 0;
    font-size: 12px;
    line-height: 19.5px;
  }
  .gates__item-after {
    color: var(--fg-secondary);                /* text/body for "Planner" etc */
  }
  .gates__item-after-label {
    color: var(--fg-tertiary);                 /* text/muted for "After:" prefix */
  }
  .gates__item-desc {
    color: var(--fg-secondary);                /* text/body */
  }
  /* Mobile gates container: 8 gap between label, heading, list */
  .gates {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-8);
    margin-bottom: var(--space-4);
  }
  .gates__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: 0;
  }
  .gates__eyebrow,
  .gates__title { margin-bottom: 0; }
  .gates__eyebrow {
    font-size: 10px;
    line-height: 19.5px;
    font-weight: var(--font-semibold);
    letter-spacing: 0.8px;
    color: var(--fg-tertiary);                 /* = Figma text/muted in light */
  }
  .gates__title {
    font-family: var(--font-display);
    font-weight: var(--font-light);
    font-size: var(--text-display-size);         /* match section title — owner direction 2026-05-22 */
    line-height: var(--text-display-line);
    letter-spacing: 0;
  }
  /* Light mode follows .section__title — extralight for the extra-thin
     display weight pairing. */
  .gates__title:not(.dark *) {
    font-weight: var(--font-extralight);
  }
}

/* ===== Section 3 — Studio Brain rows (Figma 55:9391) =====
   Same row+accordion pattern as workflow steps, but no meta/summary column
   and a 22px title per Figma "Brain/Panel" spec. */
.brain-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Brain list spans the full container width (no inner indent) so the expanded
   body left-aligns with the section header copy, matching Section 4 tools-list. */
.brain-row {
  position: relative;
  border-bottom: 1px solid var(--border-subtle);
}
/* Top divider sits on the first row so it left-aligns with the row dividers
   below (inside .brain-list's padding-inline, not at the outer container edge). */
.brain-row:first-child { border-top: 1px solid var(--border-subtle); }

/* Cascade brain rows in on parent open. Same spec as .overview > li:
   translateX(-32) + opacity, --load-row-dur (700ms), ease-out, 120ms stagger.
   Animation property only applies once the parent overview row is expanded,
   so it triggers each time the row opens, not on initial page load. */
.overview-row[aria-expanded="true"] + .overview-row__open [data-brain-list] > .brain-row {
  animation: load-row var(--load-row-dur) ease-out both;
}
.overview-row[aria-expanded="true"] + .overview-row__open [data-brain-list] > .brain-row:nth-child(1) { animation-delay: 0ms; }
.overview-row[aria-expanded="true"] + .overview-row__open [data-brain-list] > .brain-row:nth-child(2) { animation-delay: var(--load-row-stagger); }
.overview-row[aria-expanded="true"] + .overview-row__open [data-brain-list] > .brain-row:nth-child(3) { animation-delay: calc(var(--load-row-stagger) * 2); }
.overview-row[aria-expanded="true"] + .overview-row__open [data-brain-list] > .brain-row:nth-child(4) { animation-delay: calc(var(--load-row-stagger) * 3); }

/* Section 2 — workflow timeline initial cascade (first 3 visible rows only).
   Rows 4–13 stay [data-step-hidden] until "Show all 13" or "Expand all"
   flips data-show-all="true", which triggers a second cascade in the rule
   defined further down (.timeline[data-show-all="true"] .step[data-step-hidden]). */
.overview-row[aria-expanded="true"] + .overview-row__open [data-timeline] .steps > .step:not([data-step-hidden]) {
  animation: load-row var(--load-row-dur) ease-out both;
}
.overview-row[aria-expanded="true"] + .overview-row__open [data-timeline] .steps > .step:not([data-step-hidden]):nth-child(1) { animation-delay: 0ms; }
.overview-row[aria-expanded="true"] + .overview-row__open [data-timeline] .steps > .step:not([data-step-hidden]):nth-child(2) { animation-delay: 60ms; }
.overview-row[aria-expanded="true"] + .overview-row__open [data-timeline] .steps > .step:not([data-step-hidden]):nth-child(3) { animation-delay: 120ms; }
@media (prefers-reduced-motion: reduce) {
  .overview-row[aria-expanded="true"] + .overview-row__open [data-timeline] .steps > .step:not([data-step-hidden]) {
    animation: none;
  }
}
.brain-row__head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: var(--space-4);
  width: 100%;
  padding: var(--space-5) 0;
  text-align: left;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
}
@media (min-width: 768px) {
  .brain-row__head {
    grid-template-columns: 56px 1fr;
    column-gap: var(--space-6);
    padding: var(--space-8) 0;
  }
}
.brain-row__head:focus-visible {
  outline: 2px solid var(--fg-primary);
  outline-offset: -2px;
}
.brain-row__num {
  font-size: var(--text-body-sm-size);
  font-feature-settings: "tnum";
  letter-spacing: 0.05em;
  color: var(--fg-tertiary);
  padding-top: 2px;
}
.brain-row__main { min-width: 0; }
.brain-row__title {
  display: block;
  font-family: var(--font-body);
  font-weight: var(--font-medium);
  font-size: var(--text-row-title-size);
  line-height: var(--text-row-title-lh);
  color: var(--fg-primary);
  letter-spacing: var(--text-row-title-tracking);
  transition: color var(--dur-fast) var(--ease-out-strong);
}

/* ===== Brain rows mobile reconciliation (audit 2026-05-22) =====
   Figma BrainRow 142:4570+. Mobile-only overrides; desktop spec unchanged. */
@media (max-width: 767px) {
  /* Lock brain row to the same 24px num column + 12 gap as the section 2
     step rows so all expanded-row numbers right-align and all titles
     share one left edge. Owner direction 2026-05-22. */
  .brain-row__head {
    grid-template-columns: 24px 1fr;
    padding: 18px 0;
    column-gap: var(--space-3);                /* 12 */
  }
  .brain-row__num {
    /* Inter Light + feature reset kills the "tnum" glyph swap that made
       the "1" read as a different family on mobile. */
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 24px;
    font-weight: 300;                          /* Inter Light */
    letter-spacing: 0;
    color: var(--fg-quiet);
    padding-top: 0;
    justify-self: end;
    text-align: right;
  }
  .brain-row__title {
    font-weight: var(--font-semibold);
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0;
  }
}
/* Open state: number + title turn accent (Figma 55:9391 "Brain/Panel" active style). */
.brain-row__head[aria-expanded="true"] .brain-row__num,
.brain-row__head[aria-expanded="true"] .brain-row__title {
  color: var(--accent-primary);
}
/* Light mode: title stays at --fg-primary when expanded. Num still flips via
   row-accent system. */
.brain-row__head[aria-expanded="true"]:not(.dark *) .brain-row__title {
  color: var(--fg-primary);
}
/* Open: tighten head's bottom padding so the gap from title to expanded body
   (head padding-bottom + body padding-top 0) lands at 16px. */
@media (min-width: 768px) {
  .brain-row__head[aria-expanded="true"] { padding-bottom: var(--space-4); }
}
/* Open body: Figma 55:9702 "Open" — two columns (Description + CC Prompt).
   Left: pl 80, body-sm copy. Right: dark prompt surface holds the per-row
   rich content (learnings, tree, criteria, defaults). Stacks on mobile. */
.brain-row__body {
  padding: 0 0 var(--space-8) 0;
  color: var(--fg-secondary);
  font-size: var(--text-description-size);
  line-height: var(--text-description-line);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  animation: step-body-in var(--dur-expand) var(--ease-out-strong);
}
.brain-row__body[hidden] { display: none; }
@media (min-width: 768px) {
  .brain-row__body {
    flex-direction: row;
    align-items: flex-start;
    /* Left-align the expanded body with the row title (which sits after the
       56px number column + 24px gap). Matches section 4 tools-row__body
       which uses the same 80px padding-inline. */
    padding-left: calc(56px + var(--space-6));
  }
}
@media (prefers-reduced-motion: reduce) {
  .brain-row__body { animation: none; }
}
.brain-row__desc {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  color: var(--fg-secondary);
}
/* Align desc's first text line to prompt's first content line (prompt has
   padding-top 24, so desc carries the same to keep first baselines flush).
   No left padding here — the body wrapper handles indent so desc left-aligns
   with the row title. */
@media (min-width: 768px) {
  .brain-row__desc {
    padding-top: var(--space-6);
  }
}
.brain-row__desc code {
  background: var(--bg-subtle);
  color: inherit;
}
.brain-row__desc strong { color: var(--fg-primary); font-weight: var(--font-semibold); }
.brain-row__desc a {
  color: var(--fg-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Prompt surface (Figma 55:9705) — mode-following surface, holds per-row
   content stack. Light: #ebeae6 via --bg-prompt. Dark: inherits the dark
   palette through the .dark scope below so list components still read
   correctly on dark. */
.brain-row__prompt {
  flex: 1 1 0;
  min-width: 0;
  min-height: 104px;
  padding: var(--space-6);
  background: var(--bg-prompt);
  border-radius: var(--radius-prompt);
  color: var(--fg-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
}
/* .dark .brain-row__prompt token overrides relocated to tokens.css under
   "Component-scoped token variants" (2026-05-22). All raw hex now lives
   in tokens.css. */
.brain-row__prompt > :first-child { margin-top: 0; }
.brain-row__prompt > :last-child { margin-bottom: 0; }
.brain-row__prompt code {
  background: var(--bg-subtle);
  color: inherit;
}
.brain-row__prompt strong { color: var(--fg-primary); font-weight: var(--font-semibold); }
.brain-row__prompt a {
  color: var(--fg-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.brain-row__eyebrow {
  margin: 0 0 var(--space-3);
  color: var(--fg-tertiary);
  font-family: var(--font-body);
  font-size: var(--text-body-sm-size);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Accumulated learnings list */
.learnings { display: flex; flex-direction: column; gap: var(--space-5); }
/* Filled-card treatment confirmed 2026-05-22. Match the overview cards'
   surface in both modes via --bg-callout (#ebeae6 light / #121110 dark);
   border dropped so the card reads as a flat plane. */
.learning {
  padding: var(--space-4) var(--space-5);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--bg-callout);
}
.learning__head {
  font-family: var(--font-body);
  font-size: var(--text-body-base-size);
  color: var(--fg-primary);
  margin-bottom: var(--space-2);
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.learning__date {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
  font-feature-settings: "tnum";
  white-space: nowrap;
  margin: 0 0 var(--space-1) 0;
}

/* Criteria + defaults shared list style. Outline only (matches .learning in
   Studio Memory) — hairline border, no fill, so the card reads as a quiet
   container against the prompt surface. Weight chip uses the workflow
   step__badge pill style. */
.criteria, .defaults {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.criteria > li, .defaults > li {
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: transparent;
}
.criteria__head, .defaults__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
  font-family: var(--font-body);
}
.criteria__head strong, .defaults__head strong { color: var(--fg-primary); font-size: var(--text-body-lg-size); }
.criteria__weight {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--font-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-secondary);
  padding: 4px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.criteria__weight--required {
  color: var(--fg-accent);
  border-color: currentColor;
}

/* Folder tree (nested <details>) */
.tree {
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-body-sm-size);
  line-height: 1.6;
  color: var(--fg-secondary);
}
.tree__node summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: 2px 0;
  border-radius: var(--radius-sm);
}
.tree__node summary::-webkit-details-marker { display: none; }
.tree__node summary:focus-visible { outline: 2px solid var(--fg-primary); outline-offset: -2px; }
.tree__icon {
  display: inline-block;
  width: 16px;
  color: var(--fg-tertiary);
  transition: transform var(--dur-fast) var(--ease-out-strong);
}
.tree__node[open] > summary .tree__icon::before { content: "▾"; }
.tree__name {
  color: var(--fg-primary);
  font-weight: var(--font-medium);
}
.tree__note {
  color: var(--fg-tertiary);
  margin-left: var(--space-3);
  font-weight: var(--font-regular);
}
.tree__children {
  padding-left: var(--space-6);
  border-left: 1px solid var(--border-subtle);
  margin-left: var(--space-2);
  margin-top: 4px;
}
.tree__leaf {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: 2px 0;
}
.tree__leaf::before {
  content: "";
  display: inline-block;
  width: 16px;
}

/* ===== Section 4 — Tools rows (Figma 55:9840) =====
   Same row+accordion pattern as Section 3 (Brain). The expanded body holds the
   `If I need to / Use this / Why` table. Single-open behavior is enforced in
   app.js (clicking a closed row closes the others). */
.tools-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border-subtle);
}
.tools-row {
  position: relative;
  border-bottom: 1px solid var(--border-subtle);
}
.tools-row__head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: var(--space-4);
  width: 100%;
  min-height: 64px;
  padding: var(--space-5) 0;
  text-align: left;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
}
@media (min-width: 768px) {
  .tools-row__head {
    grid-template-columns: 56px 1fr;
    column-gap: var(--space-6);
    min-height: 80px;
    padding: 0;
  }
}
.tools-row__head:focus-visible {
  outline: 2px solid var(--fg-primary);
  outline-offset: -2px;
}
.tools-row__num {
  font-family: var(--font-body);
  font-weight: var(--font-regular);
  font-size: 12px;
  line-height: 19.5px;
  letter-spacing: 0.05em;
  color: var(--fg-tertiary);
  font-feature-settings: "tnum";
}
.tools-row__main { min-width: 0; }
.tools-row__title {
  display: block;
  font-family: var(--font-body);
  font-weight: var(--font-medium);
  font-size: var(--text-row-title-size);
  line-height: var(--text-row-title-lh);
  color: var(--fg-primary);
  letter-spacing: var(--text-row-title-tracking);
  transition: color var(--dur-fast) var(--ease-out-strong);
}
/* Tools row mobile — same 24px num column + 12 gap as section 2 / 3
   so the expanded-row number stacks right-aligned and the title shares
   one left edge across all expanded sections. Owner direction
   2026-05-22. */
@media (max-width: 767px) {
  .tools-row__head {
    grid-template-columns: 24px 1fr;
    padding: 18px 0;
    column-gap: var(--space-3);                /* 12 */
    min-height: 0;
  }
  .tools-row__num {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 24px;
    font-weight: 300;                          /* Inter Light */
    letter-spacing: 0;
    color: var(--fg-quiet);
    justify-self: end;
    text-align: right;
  }
  .tools-row__title {
    /* Explicit 1:1 mirror of .brain-row__title mobile — owner direction
       2026-05-22. font-family kept on the body sans-serif. */
    font-family: var(--font-body);
    font-weight: var(--font-semibold);
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0;
    color: var(--fg-primary);
  }
  /* iOS tnum-swap reset — shared across the three row-number columns so the
     "1" doesn't render as a different glyph family on mobile. .card__index
     has its own variant with additional smoothing resets. */
  .step__num,
  .brain-row__num,
  .tools-row__num {
    font-feature-settings: normal;
    font-variant-numeric: normal;
    text-rendering: auto;
  }
}
.tools-row__head[aria-expanded="true"] .tools-row__num,
.tools-row__head[aria-expanded="true"] .tools-row__title {
  color: var(--accent-primary);
}
/* Light mode: title stays at --fg-primary when expanded. Num still flips via
   row-accent system. */
.tools-row__head[aria-expanded="true"]:not(.dark *) .tools-row__title {
  color: var(--fg-primary);
}
.tools-row__body {
  padding: 0 0 var(--space-8) 0;
  animation: step-body-in var(--dur-expand) var(--ease-out-strong);
}
.tools-row__body[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .tools-row__body { animation: none; }
}
@media (min-width: 1024px) {
  .tools-row__body { padding-inline: var(--space-12); }
}
@media (min-width: 1440px) {
  .tools-row__body { padding-inline: var(--space-20); }
}
/* Body children cascade in on expand — matches step-row-in stagger from the
   workflow timeline. Thead leads, tbody rows follow at 60ms intervals so the
   table reads as a sequence rather than a slab. */
.tools-row__head[aria-expanded="true"] + .tools-row__body thead,
.tools-row__head[aria-expanded="true"] + .tools-row__body tbody tr {
  animation: step-row-in 520ms var(--ease-out-strong) both;
}
.tools-row__head[aria-expanded="true"] + .tools-row__body thead { animation-delay: 0ms; }
.tools-row__head[aria-expanded="true"] + .tools-row__body tbody tr:nth-child(1) { animation-delay: 60ms; }
.tools-row__head[aria-expanded="true"] + .tools-row__body tbody tr:nth-child(2) { animation-delay: 120ms; }
.tools-row__head[aria-expanded="true"] + .tools-row__body tbody tr:nth-child(3) { animation-delay: 180ms; }
.tools-row__head[aria-expanded="true"] + .tools-row__body tbody tr:nth-child(4) { animation-delay: 240ms; }
.tools-row__head[aria-expanded="true"] + .tools-row__body tbody tr:nth-child(5) { animation-delay: 300ms; }
.tools-row__head[aria-expanded="true"] + .tools-row__body tbody tr:nth-child(6) { animation-delay: 360ms; }
.tools-row__head[aria-expanded="true"] + .tools-row__body tbody tr:nth-child(7) { animation-delay: 420ms; }
@media (prefers-reduced-motion: reduce) {
  .tools-row__head[aria-expanded="true"] + .tools-row__body thead,
  .tools-row__head[aria-expanded="true"] + .tools-row__body tbody tr {
    animation: none;
  }
}

/* Tool table styling (rendered inside each tools-row__body).
   Figma 55:10432 — col widths 315 / 275 / 1fr at desktop, gap-16 via cell
   padding-right, body rows 14px with border-b only; header row 12px medium
   uppercase tracking 0.06em, 40px height. */
.tool-table__scroll { width: 100%; }
.tool-table__scroll table { width: 100%; border-collapse: collapse; }
.tool-table__scroll table code {
  background: var(--bg-subtle);
  color: inherit;
}
.tool-table__star { color: var(--accent-primary); }
.tool-table__scroll thead { display: none; }
@media (min-width: 768px) {
  .tool-table__scroll thead { display: table-header-group; }
  .tool-table__scroll thead th {
    text-align: left;
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 19.5px;
    color: var(--fg-tertiary);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: var(--font-medium);
    padding: 0 var(--space-4) var(--space-3) 0;
    border-bottom: 1px solid var(--border-subtle);
    height: 40px;
    vertical-align: bottom;
  }
  .tool-table__scroll thead th:first-child { width: 315px; }
  .tool-table__scroll thead th:nth-child(2) { width: 275px; }
}
@media (max-width: 767px) {
  .tool-table__scroll tbody tr {
    display: block;
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--border-subtle);
  }
  .tool-table__scroll tbody td {
    display: grid;
    grid-template-columns: 96px 1fr;
    column-gap: var(--space-3);
    align-items: baseline;
    padding: var(--space-1) 0;
  }
  .tool-table__scroll tbody td::before {
    content: attr(data-label);
    color: var(--fg-tertiary);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
}
@media (min-width: 768px) {
  .tool-table__scroll tbody td {
    padding: var(--space-4) var(--space-4) var(--space-4) 0;
    vertical-align: top;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 14px;
    line-height: 21px;
  }
  .tool-table__scroll tbody td:first-child {
    width: 315px;
    color: var(--fg-primary);
    font-weight: var(--font-medium);
  }
  .tool-table__scroll tbody td:nth-child(2) {
    width: 275px;
    color: var(--fg-primary);
    font-weight: var(--font-medium);
  }
  .tool-table__scroll tbody td:nth-child(3) {
    color: var(--fg-secondary);
    font-weight: var(--font-regular);
    padding-right: 0;
  }
}

/* ===== Section 6 — For Hiring Managers =====
   Follows the page register (light or dark) so the toggle controls the whole
   page uniformly. The Von Restorff break is now structural (top border + the
   accent CTA + the dashed bullet rule), not chromatic. */
.section--hiring {
  color: var(--fg-primary);
  margin-top: 0;
  padding-top: var(--space-12);
  /* Divider above hiring section is rendered by .overview > li#tools::after
     (the overview list's bottom edge). Keeping a border-top here would stack
     two 1px lines and prevent the li::after cascade animation from being
     visible (the static line would dominate). */
}
.section--hiring .section__eyebrow { color: var(--fg-tertiary); }
/* Figma 57:11618: Inter ExtraLight 200, distinct from Gentona hero.
   Tighter tracking than base display via --tracking-hiring-title;
   applies in both modes (logged in decisions/decisions.md). */
.section--hiring .section__title {
  color: var(--fg-primary);
  font-family: var(--font-body);
  font-weight: 200;
  letter-spacing: var(--tracking-hiring-title);
  font-style: normal;
}
.section--hiring .section__lede { color: var(--fg-secondary); }

.hiring { max-width: none; }
/* Figma 56:10489 — header sits 24px above the tabs row, not the default 48. */
.section--hiring .section__header { margin-bottom: var(--space-6); }
.hiring__tabs {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
}
/* MOBILE-UPDATE-SPEC §3.5 + §6.6 — Figma 142:4702 "Hiring/Tabs/Scroll" — tabs
   span 410px (wider than 327 content column). Switch to horizontal scroll
   with snap on mobile. Desktop tabs row stays flex-wrap. */
@media (max-width: 767px) {
  .hiring__tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* Hide native scrollbar — taps are the affordance. */
    scrollbar-width: none;
    /* Bleed to viewport edges so the first/last tab can dock against gutter. */
    margin-inline: calc(-1 * var(--pad-h));
    padding-inline: var(--pad-h);
  }
  .hiring__tabs::-webkit-scrollbar { display: none; }
  .hiring__tab {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
}

/* Figma 56:10494 (Tab/Startup selected) — accent border + accent label, with
   the prefix number dimmed to 50% opacity for hierarchy. Hover mirrors active
   (border + label flip to accent) without dimming the number. */
.hiring__tab {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--border-button);
  border-radius: var(--radius-full);
  color: var(--fg-secondary);
  background: transparent;
  transition: color var(--dur-fast) var(--ease-out-strong),
              border-color var(--dur-fast) var(--ease-out-strong),
              background-color var(--dur-fast) var(--ease-out-strong),
              box-shadow var(--dur-fast) var(--ease-out-strong),
              transform var(--dur-fast) var(--ease-out-strong);
}
.hiring__tab:active { transform: scale(0.97); }
.hiring__tab[aria-selected="true"] {
  color: var(--accent-primary);
  border-color: var(--accent-primary);
  background: transparent;
}
.hiring__tab[aria-selected="true"] .hiring__tab-label { color: var(--accent-primary); }
/* Light mode: active tab keeps the accent border but the text color stays
   at --fg-secondary (no yellow flip). */
.hiring__tab:not(.dark *)[aria-selected="true"] { color: var(--fg-secondary); }
.hiring__tab:not(.dark *)[aria-selected="true"] .hiring__tab-label { color: var(--fg-secondary); }
.hiring__tab:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 4px;
}
.hiring__tab-size {
  font-size: var(--text-body-sm-size);
  font-feature-settings: "tnum";
  letter-spacing: var(--tracking-eyebrow);
  color: var(--fg-tertiary);
}
.hiring__tab-size--mobile { display: none; }
@media (max-width: 767px) {
  .hiring__tab-size--desktop { display: none; }
  .hiring__tab-size--mobile { display: inline; }
}
.hiring__tab-label {
  font-size: var(--text-link-sm-size);
  font-weight: var(--font-medium);
  color: var(--fg-secondary);
  transition: color var(--dur-standard) var(--ease-out-strong);
}

.hiring__panels { position: relative; }
.hiring__panel {
  animation: hiring-panel-in var(--dur-expand) var(--ease-out-strong);
}
@media (prefers-reduced-motion: reduce) {
  .hiring__panel { animation: none; }
}
@keyframes hiring-panel-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.hiring__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
  margin-bottom: var(--space-2);
}
.hiring__eyebrow s {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* ===== Hiring mobile reconciliation (audit 2026-05-22) =====
   Figma 142:4698+ Section/Hiring. Mobile-only overrides; desktop spec
   unchanged. */
@media (max-width: 767px) {
  .section--hiring {
    padding-block: var(--space-12);             /* 48 */
  }
  .section--hiring .section__header {
    margin-bottom: 28px;
  }
  .hiring__eyebrow {
    /* Panel-level eyebrow ("It's rocket AI science") per Figma
       150:17949 — 14/18 not the section-eyebrow 10/14 scale. The
       section header eyebrow lives on .section__eyebrow, not this
       selector, so this rule applies to the inside-panel eyebrow only. */
    font-size: 14px;
    line-height: 18px;
    font-weight: var(--font-regular);
    letter-spacing: 0;
    color: var(--text-accent);
    margin-bottom: var(--space-1);              /* 4 → role */
    text-transform: none;                       /* override base uppercase */
  }
  .section--hiring .section__title {
    font-size: 28px;
    line-height: 34px;
    letter-spacing: -1.12px;
  }
  .hiring__tab {
    padding: 10px 16px;
  }
  .hiring__tab-size {
    font-size: 11px;
    line-height: 14px;
    letter-spacing: 0.4px;
    color: var(--fg-quiet);
  }
  .hiring__tab-label {
    font-size: 13px;
    line-height: 16px;
    font-weight: var(--font-semibold);
    color: var(--fg-primary);
  }
  /* Panel-level mobile overrides live in a second @media block AFTER
     the base .hiring__brain-card / .hiring__points rules below, because
     their base declarations would otherwise win on source order. */
}

.hiring__role {
  font-family: var(--font-body);
  font-weight: var(--font-medium);
  font-size: var(--text-row-title-size);
  /* Distinct from --text-row-title-lh (28px) — hiring role uses tighter
     25.6px per Figma "Hiring" frame. Kept inline to preserve the variant. */
  line-height: 25.6px;
  letter-spacing: var(--text-row-title-tracking);
  color: var(--fg-primary);
  margin-bottom: var(--space-6);
}
/* Emphasis underline + slant on the key verb/noun in each role line
   (am / lead / function). Applied in both modes so the treatment stays
   consistent across light and dark — see decisions.md 2026-05-20 ADR.
   The underline rides 5px below the baseline via an ::after pseudo (so
   the line can carry a corner radius — native text-decoration draws flat
   ends). Slant uses the Inter Variable `slnt` axis so the glyphs lean
   correctly instead of being sheared. Font color is unchanged. */
.hiring__role-mark {
  position: relative;
  /* Belt-and-suspenders: `font-style: oblique 5deg` matches the standard
     CSS syntax iOS Safari honors reliably; font-variation-settings
     drives Inter's slnt axis where supported. With both declared, modern
     browsers use the variation-settings value while Safari falls back to
     the oblique angle so the slant renders on mobile. */
  font-style: oblique 4deg;
  font-variation-settings: "slnt" var(--text-emphasis-slant);
}
.hiring__role-mark::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-1 * var(--underline-emphasis-offset));
  height: var(--underline-emphasis-thickness);
  background: var(--underline-emphasis-color);
  border-radius: var(--underline-emphasis-radius);
}

/* Brain callout — inset card with 48px Phosphor icon + label + body copy.
   Uses --bg-callout (Figma 57:11619 dark composite #121110) so the card
   reads as a distinct surface from --bg-recessed. 16px corner radius
   matches the Figma spec for this card specifically. */
.hiring__brain-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--bg-callout);
  border-radius: var(--radius-lg);
  color: var(--fg-secondary);
  margin-bottom: var(--space-8);
}
.hiring__brain-icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-brain-icon);
}
.hiring__brain-icon .icon { width: 48px; height: 48px; }
.hiring__brain-text {
  flex: 1 1 0;
  min-width: 0;
  font-size: var(--text-body-base-size);
  line-height: 21px;
}
.hiring__brain-label {
  font-weight: var(--font-medium);
  color: var(--fg-primary);
}
.hiring__brain-text code {
  background: var(--bg-code-inline);
  color: inherit;
}

/* Bullet table — → marker + body copy. Desktop keeps dividers + heavier
   padding; mobile (rule further down) drops dividers + tightens spacing. */
.hiring__points {
  display: flex;
  flex-direction: column;
  /* 48px gap between the last bullet row and the CTA row. */
  margin-bottom: var(--space-12);
  padding-inline: var(--space-6);
}
.hiring__points li {
  display: flex;
  gap: var(--space-8);
  padding: var(--space-4) 0;
  padding-left: var(--space-16);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--text-link-sm-size);
  line-height: 21px;
  color: var(--fg-secondary);
}
.hiring__points li::before {
  content: "→";
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-weight: var(--font-medium);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-base-line);
  letter-spacing: 0;
  color: var(--fg-tertiary);
  white-space: nowrap;
}

/* ===== Hiring expanded panel mobile overrides (Figma 150:17592 light /
   151:18015 dark). Placed AFTER the base hiring__* rules above so source
   order makes the mobile values win at <=767px — the earlier @media
   block tried to override base, but source order let base reclaim the
   cascade. Owner audit 2026-05-22. */
@media (max-width: 767px) {
  .hiring__role { margin-bottom: var(--space-4); }     /* 16 */

  .hiring__brain-card {
    padding: var(--space-4);                           /* 16 */
    gap: var(--space-3);                               /* 12 */
    margin-bottom: var(--space-4);                     /* 16 to first bullet */
    align-items: flex-start;                           /* top-align icon when text wraps */
  }
  .hiring__brain-icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
  }
  .hiring__brain-icon .icon { width: 32px; height: 32px; }
  .hiring__brain-label {
    display: block;
    font-size: 14px;
    line-height: 17px;
    margin-bottom: var(--space-1);                     /* 4 */
  }
  .hiring__brain-text {
    font-size: 13px;
    line-height: 17px;
  }

  .hiring__points {
    padding-inline: 0;
    margin-bottom: 0;
    gap: var(--space-3);                               /* 12 between bullets */
  }
  .hiring__points li {
    padding: 0;
    padding-left: 0;
    border-bottom: 0;
    gap: var(--space-3);                               /* 12 between arrow + body */
    font-size: 14px;
    line-height: 19px;
  }
  .hiring__points li::before {
    content: "→";
    font-size: 14px;
    line-height: 19px;
    color: var(--fg-quiet);
    width: 13px;
  }
}

.hiring__cta {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  /* Previously: margin-top 24px + padding-top 32px + 1px divider = 57px gap.
     Per fix: divider removed, row flush against the points list (0px gap). */
  margin-top: 0;
  padding-top: 0;
}
.hiring__cta[hidden] { display: none; }
@media (min-width: 768px) {
  .hiring__cta { flex-direction: row; justify-content: space-between; align-items: center; }
}
/* Mobile: 24px above the CTA copy so it doesn't sit flush against the
   last bullet. Owner direction 2026-05-22. */
@media (max-width: 767px) {
  .hiring__cta { margin-top: var(--space-6); }
}
.hiring__cta-text {
  color: var(--fg-secondary);
  font-size: var(--text-body-base-size);
  max-width: 56ch;
}
.hiring__cta-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: transparent;
  color: var(--fg-primary);
  border: 1px solid var(--border-button);
  border-radius: var(--radius-full);
  font-size: var(--text-link-sm-size);
  line-height: var(--text-link-sm-line);
  font-weight: var(--font-medium);
  align-self: flex-start;
  /* Press scale + transform/color/border-color transitions are supplied
     by .btn-press + .btn-trace shared rules. Arrow translate on hot state
     comes from .btn-trace[data-btn-state="hot"] [data-btn-arrow]. */
}
/* Hover state — mirrors the hero button's orbit comet + arrow translate.
   Dark keeps the yellow text/icon fade; light drops the color shift and
   relies on the orbit comet + arrow translate alone. */
.dark .hiring__cta-link[data-btn-state="hot"] {
  color: var(--accent-primary);
}
.hiring__cta-arrow {
  display: inline-block;
}
/* ===== Back to top ===== */
.back-to-top {
  position: fixed;
  right: var(--space-6);
  bottom: 24px;
  z-index: var(--z-nav);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-secondary);
  background: color-mix(in srgb, var(--bg-base) 88%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--border-button);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity var(--dur-standard) var(--ease-out-strong),
              transform var(--dur-standard) var(--ease-out-strong),
              color var(--dur-fast) var(--ease-out-strong),
              border-color var(--dur-fast) var(--ease-out-strong);
}
.back-to-top[data-shown="true"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.back-to-top:active { transform: scale(0.92); }
@media (max-width: 767px) {
  /* Tabbar removed per §6.1 — back-to-top sits 16px above safe-area bottom. */
  .back-to-top { bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); }
}
.back-to-top svg { width: 16px; height: 16px; }

/* Reveal-on-mount for hero copy */
/* Reveal pattern — opacity 0 + 8px lift, settles via spring overshoot.
   Delay = group base + sibling step. --reveal-base is set per-scope (hero,
   hiring); --reveal-step is set per element (nth-child or explicit). */
.reveal {
  opacity: 0;
  transform: translateY(-8px);
  animation: reveal-in var(--dur-reveal) var(--ease-spring) both;
  animation-delay: calc(var(--reveal-base, 0ms) + var(--reveal-step, 0ms));
}
.reveal:nth-child(1) { --reveal-step: 0ms; }
.reveal:nth-child(2) { --reveal-step: var(--stagger-section); }
.reveal:nth-child(3) { --reveal-step: calc(var(--stagger-section) * 2); }
.reveal:nth-child(4) { --reveal-step: calc(var(--stagger-section) * 3); }
.reveal:nth-child(5) { --reveal-step: calc(var(--stagger-section) * 4); }

/* Per-scope bases. Hiring eyebrow/title/tabs share the same reveal-in but
   fire after the overview rows have settled. */
.hero .reveal { --reveal-base: var(--load-hero-base); }
.section--hiring .reveal { --reveal-base: var(--load-hiring-base); }
.section--hiring .section__eyebrow.reveal { --reveal-step: 0ms; }
.section--hiring .section__title.reveal { --reveal-step: var(--load-hiring-stagger); }
.section--hiring .hiring__tabs.reveal { --reveal-step: calc(var(--load-hiring-stagger) * 2); }

@keyframes reveal-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Nav unit — fades + slides down 8px as one block, ahead of everything. */
.nav {
  animation: load-nav var(--load-nav-dur) var(--ease-out-strong) var(--load-nav-delay) both;
}
@keyframes load-nav {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Overview rows — slide in from -32px left to 0, fading. Stagger 120ms.
   Targets each <li> so the divider pseudo-elements move with the row.
   Plain ease-out (no overshoot, no asymptotic creep). will-change stays
   permanent — li is transparent, so no compositor-layer color drift. */
.overview > li {
  animation: load-row var(--load-row-dur) ease-out both;
  will-change: transform, opacity;
}
.overview > li:nth-child(1) { animation-delay: var(--load-row-base); }
.overview > li:nth-child(2) { animation-delay: calc(var(--load-row-base) + var(--load-row-stagger)); }
.overview > li:nth-child(3) { animation-delay: calc(var(--load-row-base) + var(--load-row-stagger) * 2); }
.overview > li:nth-child(4) { animation-delay: calc(var(--load-row-base) + var(--load-row-stagger) * 3); }

@keyframes load-row {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Reduced motion — opacity only, no translates/scales/overshoot */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: var(--dur-fast) !important;
    animation-iteration-count: 1 !important;
    transition-duration: var(--dur-fast) !important;
    scroll-behavior: auto;
  }
  .reveal,
  .nav,
  .overview > li {
    transform: none !important;
  }
}

/* Hover-only states — fire only on devices with a real pointer.
   Per fixes: NO background-color, NO border-color, NO text-color changes on hover.
   The comet system (.hover-trace) + arrow translate provide the only hover signal. */
@media (hover: hover) and (pointer: fine) {
  .nav__link:hover { color: var(--accent-primary); }
  .hero__skip:hover .hero__arrow { transform: translateX(4px); }
  .card:hover .card__arrow { transform: translateX(4px); }
  .hiring__cta-link:hover .hiring__cta-arrow { transform: translateX(4px); }
  /* Hiring tab hover — border-color fades to accent. Selected state still wins
     via [aria-selected="true"] rules earlier. */
  .hiring__tab:not([aria-selected="true"]):hover {
    border-color: var(--accent-primary);
  }
  /* Light mode only: 2px effective border via inset shadow (no layout shift),
     and no label color flip. */
  .hiring__tab:not([aria-selected="true"]):not(.dark *):hover {
    box-shadow: inset 0 0 0 1px var(--accent-primary);
  }
  /* Dark mode keeps the label color flip to accent. */
  .dark .hiring__tab:not([aria-selected="true"]):hover .hiring__tab-label {
    color: var(--accent-primary);
  }
}

/* ===== Hero — single-column when the visual is hidden (On Load layout) ===== */
@media (min-width: 1024px) {
  .hero__inner:has(> .hero__visual[hidden]) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ===== Overview accordion (Figma 52:5705 — full-bleed numbered rows) =====
   Rows live outside .container so dividers span the full 1440 layout. */
.section--overview {
  padding-block: 0;
  border-top: 0;
}
.overview {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--container-page);
  width: 100%;
}
.overview > li { display: block; }

.overview-row {
  width: 100%;
  /* Suppress the default iOS Safari tap highlight (semi-transparent grey
     overlay) — owner direction 2026-05-22: rows should not flash a bg
     fill on tap in either mode. */
  -webkit-tap-highlight-color: transparent;
  display: grid;
  grid-template-columns: auto 1fr;
  /* Figma 52:5710-5716 uses gap 24 across rows 02-04; row 01 shows 32 (likely
     a Figma oversight). Normalized to 24 for visual consistency. */
  column-gap: var(--space-6);
  /* Figma 52:5535 — "01" number top-aligns with eyebrow cap height in the expanded
     row. Top-align both states so the number stays anchored to the row's top edge. */
  align-items: start;
  padding: var(--space-8) var(--pad-h);
  background: transparent;
  border: 0;
  color: inherit;
  text-align: left;
  font: inherit;
  appearance: none;
  cursor: pointer;
}
.overview-row[disabled] { cursor: default; opacity: 1; }
/* Bottom padding on the expanded row sets the gap between the lede text
   and the open drawer content. */
.overview-row[aria-expanded="true"] { padding-bottom: var(--space-8); }

/* Dividers between rows are drawn as full-viewport-width pseudo-elements on each li
   so the line extends beyond the .overview ul's 1440px max-width. We use ::after on
   EACH row (not ::before on the next) so the divider lives in the same stacking
   context as the comet — z-index on .hover-trace then keeps the pinhead on top.
   First-child gets ::before for the top edge above row 01. */
.overview > li::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  height: 1px;
  background: var(--border-subtle);
  pointer-events: none;
}
.overview > li:first-child::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  height: 1px;
  background: var(--border-subtle);
  pointer-events: none;
}
.overview-row:focus-visible {
  outline: 2px solid var(--fg-primary);
  outline-offset: -2px;
}

.overview-row__index {
  font-family: var(--font-body);
  font-weight: var(--font-light);
  font-size: var(--text-overview-num-size);
  line-height: var(--text-overview-num-line);
  letter-spacing: var(--tracking-overview-num);
  color: var(--fg-muted);
  /* Proportional numbers (no tnum) — Figma uses Inter's default proportional metrics
     so the "1" reads narrower than a tabular figure. */
  font-feature-settings: "lnum", "pnum";
  min-width: 44px;
}
.overview-row__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}
.overview-row__title {
  font-family: var(--font-body);
  font-weight: var(--font-regular);
  font-size: var(--text-display-size);
  line-height: var(--text-display-line);
  letter-spacing: var(--tracking-display);
  color: var(--fg-primary);
}

/* Crumbs sit ABOVE the title inside the button's main column. Figma 55:9631 —
   Inter 12px (Figma's `--family/mono` var resolves to Inter, not a real
   monospace), 0.96px tracking, 8px gap between every crumb/separator. */
.overview-row__crumbs {
  display: none;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: var(--tracking-eyebrow-strong);
  text-transform: uppercase;
  color: var(--fg-tertiary);
}
.overview-row[aria-expanded="true"] .overview-row__crumbs {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  max-height: 30px;
  overflow: hidden;
  animation: overview-eyebrow-in 640ms var(--ease-out-strong) both;
}
.overview-row__crumb.is-active { color: var(--accent-primary); }
/* Light mode: active crumb renders as a yellow pill — fg-primary text on
   accent surface, 3px radius, 6/6/4 padding. Asymmetric vertical padding
   compensates for the all-caps text having no descenders. line-height: 1
   collapses the inherited 12px/~18px line-box. Dark mode keeps text-only
   accent. */
.overview-row__crumb.is-active:not(.dark *) {
  color: var(--fg-primary);
  background: var(--accent-primary);
  border-radius: var(--radius-sm);
  padding: var(--space-1-5) var(--space-1-5) var(--space-1);
  line-height: 1;
}
.overview-row__crumb-sep { color: var(--fg-muted); }

/* Number stays vertically centered against the main column. When expanded the main
   column grows taller (crumbs above title), so the number's center sits near the
   title midpoint — matches Figma 52:5535. */

@media (max-width: 767px) {
  /* Audit reconciliation 2026-05-22 — Figma 142:5607 (Dark expanded
     mobile) OverviewRow/Head py 22, gap 14. NO crumbs in mobile
     expanded state. Subcopy (.overview-row__lede) on expand: 13/19
     body, 8px gap from heading. */
  .overview-row {
    /* Fixed number column + 12px gap on mobile. The section row's
       number left-aligns inside the 24px box so its left edge sits at
       --pad-h (flush with the hero text and CTA pill above). The title
       then lands at x = pad-h + 24 + 12 = 60 from the viewport, which
       is the column expanded-state content stacks against. Step rows
       below keep their own right-aligned 24px col — they live inside
       the drawer and align their TITLES (not numbers) to the section
       title column. Owner direction 2026-05-22: section numbers should
       never be indented from the page margin. */
    grid-template-columns: 24px 1fr;
    column-gap: var(--space-3);              /* 12px */
    padding-block: 22px;
  }
  .overview-row__main {
    gap: var(--space-2);                     /* 8 between heading + lede */
  }
  /* Hide crumbs entirely on mobile (Figma 142:5610 expanded shows
     no crumbs above heading — desktop continues to render them). */
  .overview-row__crumbs,
  .overview-row[aria-expanded="true"] .overview-row__crumbs {
    display: none !important;
  }
  .overview-row__index {
    font-size: 18px;
    line-height: 24px;
    font-weight: 300;                        /* Inter Light, not --font-light (=100/Thin) */
    color: var(--fg-quiet);
    /* Left-align inside the 24px column so the digit glyph's left edge
       sits at --pad-h — same x as the hero text + CTA pill. Reverted
       from the right-align experiment that tried to stack section nums
       under step nums; owner wants page-margin parity instead. */
    justify-self: start;
    text-align: left;
  }
  .overview-row__title {
    font-size: 18px;
    line-height: 24px;
    font-weight: var(--font-semibold);
  }
  .overview-row[aria-expanded="true"] .overview-row__lede {
    font-size: 13px;
    line-height: 19px;
    color: var(--fg-secondary);
    margin-top: 0;
  }
}

/* ===== Page footer (Figma 57:11700) — centered breadcrumb + © year.
   Audit pass 2026-05-22:
   - padding: 24 all sides (was 24/0)
   - gap: 16 (was 32)
   - font: 11/14 (was --text-body-sm 12/19.5)
   - crumb color: --fg-tertiary (= Figma text/muted)
   - arrows: --fg-quiet (unchanged)
   - copyright: --fg-quiet
   Mobile + desktop both follow Figma footer spec — applied globally. */
.page-footer {
  padding: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: 0 auto;
  color: var(--fg-tertiary);
}
.page-footer__crumb {
  margin: 0;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: 11px;
  line-height: 14px;
}
.page-footer__sep { color: var(--fg-quiet); }
.page-footer__copy {
  margin: 0;
  font-size: 11px;
  line-height: 14px;
  color: var(--fg-quiet);
  font-feature-settings: "tnum";
}

/* ============================================================
   Hover comet system
   Figma proto 57:10951 (start) → 57:11158 (end).
   - Dividers: SVG line + glowing dot travels left → right at 240 px/s linear.
     Loops on right-edge cross; on mouseleave, keeps moving while opacity fades.
   - Buttons: same comet traces clockwise around the perimeter (rect path).
   - Row title color shift fades in AND out via CSS transition.
   ============================================================ */

/* Position context so the absolute .hover-trace renders relative to the host. */
[data-hover="divider"],
[data-hover="button"] {
  position: relative;
}

.hover-trace {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out-strong);
  /* Promote above the row's ::after divider pseudo so the trail + pinhead render on top. */
  z-index: 2;
}
.hover-trace[data-active="true"] { opacity: 1; }

/* Divider comet only renders when the row is collapsed. Scoped to the host's
   immediate row button so nested expanded items inside folded sections (e.g.
   brain-row__head, tools-row__head inside row 03/04) don't suppress the comet. */
[data-hover="divider"]:has(> [aria-expanded="true"]) .hover-trace--divider {
  display: none;
}

.hover-trace--divider {
  /* Sits on the divider line at the row's bottom edge. The trail's 1px line aligns
     with the divider via the row's ::after pseudo at the same y. The 4×4 glow dot
     centers vertically on the line via top: -1.5px. */
  bottom: 0;
  top: auto;
  left: 0;
  height: 1px;
  width: 100%;
  overflow: visible;
}
.hover-trace--divider .hover-trace__line {
  /* Fixed 200px width slid along the bottom edge by JS via transform.
     Initial transform places it off-canvas left so it can't flash at left:0 on mount. */
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  width: 200px;
  transform: translateX(-100vw);
  background: linear-gradient(90deg, rgba(var(--accent-primary-rgb), 0) 0%, var(--accent-primary) 100%);
}
.hover-trace--divider .hover-trace__head {
  position: absolute;
  left: 0;
  top: -1.5px;       /* centers 4px dot vertically on the 1px line */
  width: var(--hover-comet-head);
  height: var(--hover-comet-head);
  transform: translateX(-100vw);
  background: var(--accent-primary);
  border-radius: 3px;
  box-shadow: var(--hover-comet-glow);
}

/* Button perimeter orbit. SVG fills the button's box; the rounded-rect path
   is stroked with a dasharray that exposes only the trail segment, and a
   separate circle <head> rides the same path via getPointAtLength. */
.hover-trace--button-orbit {
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.hover-trace--button-orbit .orbit-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.hover-trace--button-orbit .orbit-trail {
  filter: drop-shadow(0 0 4px rgba(var(--accent-primary-rgb), 0.6));
}
.hover-trace--button-orbit .orbit-head {
  filter: drop-shadow(0 0 4px var(--accent-primary));
}

/* Row title accent shift — fades both directions, independent from comet.
   Generic via [data-row-accent] so any row pattern (overview, step, brain) opts in.
   Scoped to `> button [data-row-accent]` so a hot outer row doesn't bleed accent
   into nested rows (e.g. brain rows inside the open overview row 03).
   Gated to (hover: hover) — on touch devices, [data-row-state="hot"] from
   hover.js can stick past pointerup, keeping the number yellow even after
   a row collapses. Touch path uses the tap-state rule above instead, which
   clears on pointerup. */
[data-row-hover] > button [data-row-accent] {
  transition: color var(--dur-standard) var(--ease-out-strong);
}
@media (hover: hover) and (pointer: fine) {
  [data-row-hover][data-row-state="hot"] > button [data-row-accent] {
    color: var(--accent-primary);
  }
  /* Light mode only: bump overview row number weight from 100 → 400 on hover. */
  [data-row-hover][data-row-state="hot"] > button .overview-row__index:not(.dark *) {
    font-weight: var(--font-regular);
  }
}

/* Button: ONLY the arrow translates on hover. No text color shift, no border change. */
.btn-trace {
  position: relative;
}
.btn-trace [data-btn-arrow] {
  transition: transform var(--dur-fast) var(--ease-out-strong);
}
.btn-trace[data-btn-state="hot"] [data-btn-arrow] {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .hover-trace { display: none !important; }
  [data-row-hover] .overview-row__index,
  .btn-trace,
  .btn-trace [data-btn-arrow] {
    transition: color var(--dur-fast) var(--ease-out-strong) !important;
  }
  .btn-trace[data-btn-state="hot"] [data-btn-arrow] { transform: none; }
}

/* ============================================================
   Press / release scale — match levibahn.com convention.
   Buttons (0.985), tap-targets (0.92). Released with --ease-out-strong over --dur-micro.
   NOTE: row buttons (.overview-row, .step__head) do NOT press-scale — per fix,
   row hover is comet + index accent only, no scaling.
   ============================================================ */
.btn-press,
.btn-trace,
.copy-btn {
  /* 160ms transform — Emil review: 120ms felt too snappy for press feedback;
     140–160ms reads as deliberate without losing the responsive bias. */
  transition: transform 160ms var(--ease-out-strong),
              color var(--dur-standard) var(--ease-out-strong),
              border-color var(--dur-fast) var(--ease-out-strong);
}
.btn-press:active,
.btn-trace:active,
.copy-btn:active {
  transform: scale(var(--press-scale-button));
}
[data-tap]:active {
  transform: scale(var(--press-scale-tap));
}

@media (prefers-reduced-motion: reduce) {
  .btn-press:active,
  .btn-trace:active,
  .copy-btn:active,
  [data-tap]:active {
    transform: none;
  }
}

/* ============================================================
   Phosphor icons — sizing helpers
   ============================================================ */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  vertical-align: -0.125em;
  fill: none;
  stroke: currentColor;
}
.icon--md { width: 16px; height: 16px; }

/* ============================================================
   Step prompt panel — Figma 54:7438 step 09 open state.
   Dark slab, mono code, copy icon top-right. Height capped to the
   left description column via JS (--prompt-max-h). Hugs content
   when shorter. Empty variant for steps with no prompt — invisible
   placeholder that preserves the 2-column rhythm so the description
   keeps a comfortable measure.
   ============================================================ */
.step__prompt {
  position: relative;
  /* Mode-following via --bg-prompt-deep (tokens.css): light maps to
     --bg-subtle (gates-panel parity), dark keeps the deeper #080707
     plane so the mono slab reads distinct from --bg-base. */
  background: var(--bg-prompt-deep);
  border-radius: var(--radius-lg, 16px);
  padding: var(--space-4) var(--space-6);
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: clip;
  max-height: var(--prompt-max-h, none);
}
.step__prompt--empty {
  background: transparent;
  padding: 0;
}
.step__prompt pre {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 18px;
  color: var(--prompt-code-fg);
  background: transparent;
  white-space: pre-wrap;
  word-break: break-word;
  overflow: hidden;
  flex: 1 1 auto;
  padding-right: var(--space-4);
  tab-size: 2;
  -moz-tab-size: 2;
}
.copy-btn {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  color: var(--fg-tertiary);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  z-index: 1;
}
@media (hover: hover) and (pointer: fine) {
  .copy-btn:hover { color: var(--accent-primary); }
}
.copy-btn[data-copy-state="copied"] { color: var(--accent-primary); }
.copy-btn .icon { width: 16px; height: 16px; }

/* Inline code inside body — switch from generic monospace to Cascadia Mono */
.step__body code,
.brain-row__body code,
.drawer code {
  font-family: var(--font-mono);
}

/* ============================================================
   Section 1 — Overview accordion expanded content (Figma 52:5535 + 57:10767)
   Row 01 expands to show crumbs + lede + 4 cards + inline open-card panel.
   ============================================================ */
/* Open container grows on aria-expanded="true" so the page content below
   slides down with the height change. Open uses Ionic drawer curve for
   cinematic reveal. Close uses pure ease-out — single smooth motion,
   sequenced in JS to fire after a 240ms fade phase. */
.overview-row__open {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 520ms var(--ease-collapse),
              padding 520ms var(--ease-collapse);
}
.overview-row[aria-expanded="true"] + .overview-row__open {
  /* Large cap so the workflow row can fully expand all 13 steps + gates table
     without clipping. Animation completes well before reaching the cap because
     content stops growing at its natural height. */
  max-height: 20000px;
  padding: 0 0 var(--space-12);
  transition: max-height 760ms cubic-bezier(0.32, 0.72, 0, 1),
              padding 760ms cubic-bezier(0.32, 0.72, 0, 1);
}
.overview-row__open > .cards,
.overview-row__open > .overview-row__panel {
  padding-inline: var(--pad-h);
}
/* Folded section content (workflow timeline + gates, brain rows, tools rows)
   needs its inner container indented so toolbar/steps/gates left-align with
   the lede + title text rather than the index column. Cards + panel get the
   same treatment. */
@media (min-width: 1440px) {
  .overview-row__open > .cards,
  .overview-row__open > .container,
  .overview-row__open > .overview-row__panel {
    padding-left: calc(var(--pad-h) + 44px + var(--space-6));
    padding-right: 192px;
  }
}

/* Lede sits in the main column directly under the title (Figma 53:6489 —
   16px gap, left-aligned to title). Hidden when the row is collapsed; revealed
   with the expand animation. */
.overview-row__lede {
  display: none;
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line);
  color: var(--fg-secondary);
  max-width: 60ch;
}
.overview-row[aria-expanded="true"] .overview-row__lede {
  display: block;
  max-height: 60px;
  overflow: hidden;
}

/* ============================================================
   Expand reveal sequence.
   Title still uses a keyframe (slides down each open; nothing to fade on close).
   Eyebrow + lede use CSS transitions so the close fade can run before the
   drawer drops — driven by the .is-closing class set in JS.
   ============================================================ */
/* Title stays put on expand — owner direction 2026-05-22. Only the
   new revealed content (lede + cards / step list / brain list / tools list)
   animates in. Collapse path (.is-closing) is untouched and still uses
   its own transition rules further down this file. */
.overview-row[aria-expanded="true"] .overview-row__lede {
  animation: overview-lede-slide 720ms var(--ease-out-strong) 160ms both;
}
/* Content beneath the lede (cards grid, panel, folded section content like
   the workflow timeline + gates) fades in and slides down after the lede
   has begun resolving. 320ms delay = lede animation has cleared its first
   third before content starts arriving. */
.overview-row[aria-expanded="true"] + .overview-row__open > .container,
.overview-row[aria-expanded="true"] + .overview-row__open > .overview-row__panel {
  animation: overview-content-slide 720ms var(--ease-out-strong) 320ms both;
}
@keyframes overview-content-slide {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .overview-row[aria-expanded="true"] + .overview-row__open > .container,
  .overview-row[aria-expanded="true"] + .overview-row__open > .overview-row__panel {
    animation: overview-eyebrow-in 200ms ease both;
  }
}

/* Tools — divider above row 01 joins the lede's earlier wave so it isn't the
   last element to settle. Container fades only (no translate), bringing the
   .tools-list border-top in at lede timing. Row contents (.tools-row) then
   stagger in just after with the original slide. */
li#tools .overview-row[aria-expanded="true"] + .overview-row__open > .container {
  animation: overview-eyebrow-in 480ms var(--ease-out-strong) 160ms both;
}
/* Tools rows cascade in like brain-rows: translateX(-32) + opacity, load-row
   keyframes, 120ms stagger between rows. Base delay 380ms keeps the wave
   trailing the lede + container divider that fire earlier. */
li#tools .overview-row[aria-expanded="true"] + .overview-row__open [data-tools-list] > .tools-row {
  animation: load-row var(--load-row-dur) ease-out both;
}
li#tools .overview-row[aria-expanded="true"] + .overview-row__open [data-tools-list] > .tools-row:nth-child(1) { animation-delay: 380ms; }
li#tools .overview-row[aria-expanded="true"] + .overview-row__open [data-tools-list] > .tools-row:nth-child(2) { animation-delay: calc(380ms + var(--load-row-stagger)); }
li#tools .overview-row[aria-expanded="true"] + .overview-row__open [data-tools-list] > .tools-row:nth-child(3) { animation-delay: calc(380ms + var(--load-row-stagger) * 2); }
@media (prefers-reduced-motion: reduce) {
  li#tools .overview-row[aria-expanded="true"] + .overview-row__open [data-tools-list] > .tools-row {
    animation: overview-eyebrow-in 200ms ease both;
  }
}
/* Bottom divider under section 4 (the .overview > li#tools::after at the li's
   bottom edge) joins the row cascade. Currently it sits static while the rest
   of the panel slides in. Animate opacity + translateY so it slides in as the
   trailing element of the wave, just after the last tools-row.
   When collapsed: divider stays visible at default state.
   When expanded: animation backwards fill makes it start at opacity 0 / -12,
   then slide in to opacity 1 / 0. */
.overview > li#tools:has(> .overview-row[aria-expanded="true"])::after {
  animation: overview-content-slide 600ms var(--ease-out-strong) 440ms both;
}
@media (prefers-reduced-motion: reduce) {
  .overview > li#tools:has(> .overview-row[aria-expanded="true"])::after {
    animation: overview-eyebrow-in 200ms ease both;
  }
}
/* Single-phase close. Every transition fires on click — no delay. Opacity,
   max-height, main gap, and drawer max-height all start collapsing at t=0
   and finish at ~360ms. Title moves UP naturally via flex layout as
   crumbs/lede max-height + gap collapse. When .is-closing is removed,
   layout is already at collapsed values — no jump. */
/* All four properties run on the same 520ms ease-collapse curve so the
   crumbs, lede, main-gap, cards-fade, and open-container max-height resolve
   together as one motion. Mismatched durations read as a hiccup. */
.overview > li.is-closing .overview-row__crumbs {
  display: inline-flex;
  animation: none;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 520ms var(--ease-collapse),
              max-height 520ms var(--ease-collapse);
}
.overview > li.is-closing .overview-row__lede {
  display: block;
  animation: none;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 520ms var(--ease-collapse),
              max-height 520ms var(--ease-collapse);
}
.overview > li.is-closing .overview-row__main {
  gap: 0;
  transition: gap 520ms var(--ease-collapse);
}
.overview > li.is-closing .overview-row__title {
  animation: none;
}
/* Cards animate DOWN: start at translateY(-12) (above natural), settle at 0.
   Open uses spring overshoot. Close uses opacity-only via .is-closing (no
   transform animation on the way out, so cards don't slide back up before
   the drawer drops). 2x durations from prior pass. */
.overview-row + .overview-row__open .cards > li {
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 480ms var(--ease-out-strong);
}
.overview-row[aria-expanded="true"] + .overview-row__open .cards > li {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 640ms var(--ease-spring),
              transform 640ms var(--ease-spring);
}
.overview-row[aria-expanded="true"] + .overview-row__open .cards > li:nth-child(1) { transition-delay: 280ms; }
.overview-row[aria-expanded="true"] + .overview-row__open .cards > li:nth-child(2) { transition-delay: 400ms; }
.overview-row[aria-expanded="true"] + .overview-row__open .cards > li:nth-child(3) { transition-delay: 520ms; }
.overview-row[aria-expanded="true"] + .overview-row__open .cards > li:nth-child(4) { transition-delay: 640ms; }
@starting-style {
  .overview-row[aria-expanded="true"] + .overview-row__open .cards > li {
    opacity: 0;
    transform: translateY(-12px);
  }
}
/* .is-closing phase: aria-expanded still "true" so cards are visible. Force
   opacity to 0 (no transform change — they don't slide back up). When the
   class is added, all 4 cards start fading concurrently, no stagger. */
.overview > li.is-closing .overview-row[aria-expanded="true"] + .overview-row__open .cards > li {
  opacity: 0;
  transition: opacity 520ms var(--ease-collapse);
  transition-delay: 0ms;
}

@keyframes overview-eyebrow-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes overview-lede-slide {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Reduced motion: keep identity via opacity fade with ease, drop transforms.
   Emil review: "Reduced motion means less motion, not erase identity." */
@media (prefers-reduced-motion: reduce) {
  .overview-row[aria-expanded="true"] .overview-row__crumbs,
  .overview-row[aria-expanded="true"] .overview-row__title,
  .overview-row[aria-expanded="true"] .overview-row__lede {
    animation: overview-eyebrow-in 200ms ease both;
  }
  .overview-row + .overview-row__open .cards > li,
  .overview-row[aria-expanded="true"] + .overview-row__open .cards > li {
    transform: none;
    transition: opacity 200ms ease;
    transition-delay: 0ms;
  }
}

/* Card "open" state — dark keeps the accent border + index/title color shift;
   light renders the lighter --bg-card surface with no border, no color shifts. */
.dark .card[aria-expanded="true"] {
  border-color: var(--accent-primary);
}
.dark .card[aria-expanded="true"] .card__index { color: var(--accent-primary); }
.dark .card[aria-expanded="true"] .card__title { color: var(--accent-primary); }
.card:not(.dark *)[aria-expanded="true"] {
  background: var(--bg-card);
}

.card .card__arrow { transition: transform var(--dur-fast) var(--ease-out-strong); }
@media (hover: hover) and (pointer: fine) {
  .card:hover .card__arrow { transform: translateX(4px); }
}

/* ===== Inline panel for the open card =====
   Sits below the 4-card grid. Click another card → swap content. */
.overview-row__panel {
  padding: var(--space-8) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.overview-row__panel[hidden] { display: none; }
.overview-row__panel-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
/* Cascade panel contents in when card is clicked. Each child slides + fades in
   with a 80ms stagger. Uses step-row-in keyframe (opacity 0/translateY -8 → 1/0). */
.overview-row__panel:not([hidden]) > .overview-row__panel-inner > * {
  animation: step-row-in 600ms var(--ease-out-strong) both;
}
.overview-row__panel:not([hidden]) > .overview-row__panel-inner > *:nth-child(1) { animation-delay: 80ms; }
.overview-row__panel:not([hidden]) > .overview-row__panel-inner > *:nth-child(2) { animation-delay: 160ms; }
.overview-row__panel:not([hidden]) > .overview-row__panel-inner > *:nth-child(3) { animation-delay: 240ms; }
@media (prefers-reduced-motion: reduce) {
  .overview-row__panel:not([hidden]) > .overview-row__panel-inner > * {
    animation: none;
  }
}
.overview-row__panel-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.overview-row__panel-icon {
  width: 32px;
  height: 32px;
  /* Desktop card-expanded panel icon shares the mobile sheet icon token
     (--fg-icon-sheet → --color-warm-icon: #AEA7A0 light / #2B2722 dark)
     so the same brain/kanban/etc glyph reads the same in both surfaces.
     Owner direction 2026-05-22. */
  color: var(--fg-icon-sheet);
  flex-shrink: 0;
}
.overview-row__panel-title {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: var(--text-display-size);
  line-height: var(--text-display-line);
  color: var(--fg-primary);
  letter-spacing: -0.01em;
}
.overview-row__panel-divider {
  height: 1px;
  background: var(--border-subtle);
  width: 100%;
}
.overview-row__panel-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: start;
}
@media (min-width: 1024px) {
  .overview-row__panel-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
}
.overview-row__panel-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.overview-row__panel-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  font-size: var(--text-body-base-size);
  line-height: var(--text-body-base-line);
  color: var(--fg-secondary);
  max-width: 56ch;
}
.overview-row__panel-body p { margin: 0; }
.overview-row__panel-body strong { color: var(--fg-primary); }
.overview-row__panel-body code { font-family: var(--font-mono); }

.overview-row__panel-stats {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2) 0 var(--space-1) var(--space-4);
  list-style: none;
  margin: 0;
  padding-inline-start: var(--space-4);
}
.overview-row__panel-stats li {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.overview-row__panel-stat-num {
  font-family: var(--font-body);
  font-weight: 100;
  font-size: 34px;
  line-height: 1.1;
  color: var(--fg-primary);
  letter-spacing: -0.01em;
}
.overview-row__panel-stat-label {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--fg-tertiary);
}

@media (prefers-reduced-motion: reduce) {
  .overview-row__open { animation: none; }
}

/* ============================================================
   Tier-3 bottom sheet (mobile only)
   MOBILE-UPDATE-SPEC §3.1 — definitive values supplied by owner 2026-05-21.
   Sheet markup is injected by scripts/sheet.js into [data-sheet-root]. All
   transform animation happens via popmotion in JS (spring + inertia); CSS
   here covers static surface + initial off-screen state.
   ============================================================ */
/* Sheet activation overlay — owner spec 2026-05-22.
   Full-viewport scrim under the sheet at site bg / 80% opacity + 12px
   backdrop blur, plus z-stack high enough to cover the theme toggle
   (z-nav 20) and the grain canvas (z 9999). Replaces the prior
   "no overlay" decision from resolution log 2026-05-21. */

/* Hide grain while a sheet is mounted. iOS Safari's GPU compositor
   re-rasterizes the noise canvas with a much heavier alpha during the
   overlay's backdrop-blur transition (mid-dismiss). Cleanest fix is to
   take the grain out of paint for the sheet's full lifecycle — open
   through finalize-close — and restore it after. */
html[data-sheet-open="true"] canvas[data-grain] {
  opacity: 0 !important;
}
.sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: color-mix(in srgb, var(--bg-base) 15%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  /* Open: --dur-fast (180ms). Close: --dur-micro (120ms) so the scrim +
     blur clear faster than the sheet's spring return, removing the
     lingering haze owner reported 2026-05-22. backdrop-filter is on a
     parallel transition so the blur unwinds together with the opacity. */
  transition: opacity var(--dur-micro) var(--ease-out-strong),
              backdrop-filter var(--dur-micro) var(--ease-out-strong),
              -webkit-backdrop-filter var(--dur-micro) var(--ease-out-strong);
}
.sheet-overlay[data-active="true"] {
  opacity: 1;
  pointer-events: auto;
  transition: opacity var(--dur-fast) var(--ease-standard),
              backdrop-filter var(--dur-fast) var(--ease-standard),
              -webkit-backdrop-filter var(--dur-fast) var(--ease-standard);
}

.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* Sit above grain canvas (z 9999) and theme toggle (z-nav 20) — owner
     spec 2026-05-22: sheet is always the topmost surface. */
  z-index: 10001;
  width: 100vw;
  /* Max height = max snap visible-from-bottom value (660px per resolution log). */
  max-height: var(--sheet-snap-max);
  height: var(--sheet-snap-max);
  background: var(--surface-sheet-bg);
  border-top-left-radius: var(--sheet-radius);
  border-top-right-radius: var(--sheet-radius);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  filter: var(--sheet-shadow);
  padding: var(--sheet-pad-top) var(--sheet-pad-inline) var(--sheet-pad-bottom);
  display: flex;
  flex-direction: column;
  gap: var(--sheet-gap);
  /* Start fully below the viewport. sheet.js spring-animates translateY
     to the snap point on open. */
  transform: translateY(100%);
  /* Scroll lock until .sheet--expanded (max snap reached, set by sheet.js). */
  overflow: hidden;
  touch-action: none;
}
.sheet.sheet--expanded {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

/* Drag handle — 34×5 with 8px radius. Touch target 28px tall around it. */
.sheet__handle-area {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 28px;
  margin: calc(-1 * var(--sheet-pad-top)) calc(-1 * var(--sheet-pad-inline)) 0;
  padding: var(--sheet-pad-top) var(--sheet-pad-inline) 0;
  cursor: grab;
  touch-action: none;
}
.sheet__handle-area:active { cursor: grabbing; }
.sheet__handle {
  display: block;
  width: var(--sheet-handle-width);
  height: var(--sheet-handle-height);
  border-radius: var(--sheet-handle-radius);
  background: var(--sheet-handle-color);
  /* Resolution log 2026-05-21 — dark handle darkens at max snap. Smooth
     it so the spring + color transitions land together. */
  transition: background-color 150ms var(--ease-out-strong);
}
/* Dark + expanded → handle darkens from --fg-secondary (#98938d) to
   --color-fg-tertiary (#545352). Light handle stays white in both states. */
.dark .sheet.sheet--expanded .sheet__handle {
  background-color: var(--color-fg-tertiary);
}

/* Sheet title region — Figma 148:7760 / 148:8254:
   - Icon (32×32) + Title inline, gap 8
   - Divider 1px below row, gap 8 from row
   - Title: Inter Regular 28 / 38.8 / -0.28 / heading color
   Achieved with padding-bottom 8 + border-bottom 1px on the row. */
.sheet__title-row {
  display: flex;
  /* Default: center-align num/icon against a single-line title so the
     glyph optical-centers with the cap height. When sheet.js detects the
     title has wrapped to 2+ lines, .sheet__title-row--multi flips this
     to flex-start so the glyph hugs the first line instead of floating
     to the vertical middle of the wrapped block. */
  align-items: center;
  gap: var(--space-2);                                /* 8 — Figma */
  padding-bottom: var(--space-2);                     /* 8 — Figma */
  border-bottom: 1px solid var(--border-subtle);
  margin: 0;
  width: 100%;
}
.sheet__title-row--multi { align-items: flex-start; }
.sheet__title-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  color: var(--fg-icon-sheet);                        /* swaps via .dark */
}
/* Step-sheet variant — number takes the place of the icon. Owner
   direction 2026-05-22: match the card-sheet title treatment exactly
   (divider underneath, same display-scale type) with the number sized
   to the title. */
.sheet__num {
  font-family: var(--font-body);
  font-weight: 300;                                   /* Inter Light, matches expanded step head */
  font-size: 28px;
  line-height: 38.8px;
  letter-spacing: -0.28px;
  color: var(--fg-quiet);                             /* matches expanded step head contrast */
  flex-shrink: 0;
}
.sheet__title-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.sheet__title {
  font-family: var(--font-body);
  font-weight: var(--font-regular);
  font-size: 28px;
  line-height: 38.8px;
  letter-spacing: -0.28px;
  color: var(--fg-primary);
  margin: 0;
}

/* Sheet body-section wraps the prose + stats group per Figma
   148:8260 / 148:7766 with a 32px internal gap. */
.sheet__body-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);                              /* 32 */
  width: 100%;
}

/* Stats group — only a TOP divider (Figma originally had top + bottom;
   owner spec 2026-05-22 drops the bottom horizontal line). */
.sheet__stats-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);                              /* 16 */
  width: 100%;
  border-top: 1px solid var(--sheet-stats-divider);
  padding-top: var(--space-4);
}

/* Stats inner — 3 equal-width cols, gap 8. Horizontal padding is symmetric
   so column centers stay fixed regardless of label length, and the same
   columns line up across all four sheets. */
.sheet__stats {
  display: flex;
  gap: var(--space-2);                              /* 8 between cols */
  padding: var(--space-2) 0 var(--space-1);
  list-style: none;
  margin: 0;
}
.sheet__stats > li {
  flex: 1 1 0;
  min-width: 0;                                     /* prevent intrinsic width from expanding cols */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;                      /* top-align so wrapped labels start on same line */
  gap: var(--space-2);                              /* 8 between number + label */
}
.sheet__stat-num {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 100;                                  /* Inter Thin */
  font-variation-settings: "wght" 100;
  font-size: 34px;
  line-height: 24px;
  color: var(--fg-primary);                         /* heading, both modes */
  letter-spacing: -0.34px;
  width: 100%;
  text-align: center;
}
.sheet__stat-label {
  font-family: var(--font-body);
  font-weight: var(--font-regular);
  font-size: 12px;
  line-height: normal;
  letter-spacing: -0.12px;
  color: var(--sheet-stats-label);                  /* text/muted */
  width: 100%;
  text-align: center;
}

/* Sheet body — audit pass 2026-05-22 supersedes the earlier two-state
   typography swap. Figma sheet body is always 13/19.5 -0.13 regardless
   of snap; the prior 16/24 reading was page body, not sheet body. */
.sheet__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  color: var(--fg-secondary);
  font-size: 13px;
  line-height: 19.5px;
  letter-spacing: -0.13px;
}
.sheet__body p { margin: 0; }
.sheet__body code {
  background: var(--bg-subtle);
  color: inherit;
}
/* Inside a prompt container the <pre><code> body should not pick up the
   inline-code background chip — that styling is reserved for markdown
   filenames in prose. Owner direction 2026-05-22: in dark mode, strip
   the background, padding, and radius so the prompt reads as one
   surface. Light mode keeps its existing treatment. */
.dark .sheet__body pre code,
.dark .step__prompt pre code {
  background: transparent;
  padding: 0;
  border-radius: 0;
}
.sheet__body strong { color: var(--fg-primary); font-weight: var(--font-semibold); }

/* Sheet is mobile-only — desktop keeps the inline tier-2 expansion pattern.
   Forcing display:none in case sheet.js misfires on a resized window. */
@media (min-width: 768px) {
  .sheet { display: none !important; }
}

/* ============================================================
   Tap states (mobile / touch) — revised per owner feedback 2026-05-22.
   Buttons: 2px solid yellow border on tap + subtle scale (0.96 in tap.js).
     No yellow background overlay (was reading muddy under 18% accent).
   Section rows: ONLY number font color flips to solid yellow on tap; no
     scale, no border, no bg.
   On close (aria-expanded → false) the number returns to default — the
     hover-row-accent rule is gated to (hover: hover) so touch never
     leaves a stuck "hot" state.
   ============================================================ */
@media (max-width: 767px) {
  /* Buttons (hero CTA, overview cards, timeline buttons, hiring tabs,
     hiring CTA) — tap state = 2px accent border. Keep prior border-color
     intact at rest. */
  .hero__skip[data-tap-active="true"],
  .card[data-tap-active="true"],
  .timeline__btn[data-tap-active="true"],
  .timeline__show-all[data-tap-active="true"],
  .hiring__tab[data-tap-active="true"],
  .hiring__cta-link[data-tap-active="true"] {
    border-width: 2px;
    border-color: var(--accent-primary);
    border-style: solid;
  }

  /* Dark overview cards previously got a #121110 bg fill on tap via the
     §4.6 state machine. On mobile, override that — tap = 2px yellow
     border only, no fill. Desktop §4.6 cascade unchanged. */
  .dark .card[data-tap-active="true"] {
    background: transparent;
    border-color: var(--accent-primary);
  }

  /* Section rows — tap state only flips the number color. */
  .overview-row[data-tap-active="true"] .overview-row__index,
  .step__head[data-tap-active="true"] .step__num,
  .brain-row__head[data-tap-active="true"] .brain-row__num,
  .tools-row__head[data-tap-active="true"] .tools-row__num {
    color: var(--accent-primary);
  }
}

/* Expanded overview row — number stays yellow while open (matches the
   step/brain/tools heads which already set this via their own
   aria-expanded rules). Applied globally so desktop + mobile share the
   same expanded-state visual. */
.overview-row[aria-expanded="true"] .overview-row__index {
  color: var(--accent-primary);
}

/* Light mode: any section number rendered in accent (expanded row, tapped
   row, or hover-hot row) renders SemiBold so the yellow weight reads at
   the same density Figma shows. Dark numbers stay at their default thin
   weight per Figma dark composite. */
.overview-row[aria-expanded="true"]:not(.dark *) .overview-row__index,
.overview-row[data-tap-active="true"]:not(.dark *) .overview-row__index,
.step__head[aria-expanded="true"]:not(.dark *) .step__num,
.step__head[data-tap-active="true"]:not(.dark *) .step__num,
.brain-row__head[aria-expanded="true"]:not(.dark *) .brain-row__num,
.brain-row__head[data-tap-active="true"]:not(.dark *) .brain-row__num,
.tools-row__head[aria-expanded="true"]:not(.dark *) .tools-row__num,
.tools-row__head[data-tap-active="true"]:not(.dark *) .tools-row__num {
  font-weight: var(--font-semibold);
}

/* Suppress hover-comet on touch devices — MOBILE-UPDATE-SPEC §3.4.
   .hover-trace + comet system are decorative; touch users get tap-scale +
   yellow flash instead. */
@media (hover: none) and (pointer: coarse) {
  .hover-trace { display: none !important; }
}