/* FollowThruOps fresh build. Design system: Ventriloc (primary reference), Workflow review motifs (secondary).
   See design/references/. Fonts: Space Grotesk substitutes for PolySans per the reference's own fallback rule. */

:root {
  --color-graphite: #202020;
  --color-canvas-white: #ffffff;
  --color-ash: #efefef;
  --color-fog: #f5f5f5;
  --color-ivory: #ebe6dd;
  --color-steel: #4d4d4d;
  --color-slate: #828282;
  --color-mist: #e8e8e8;
  --color-ember: #ff682c;
  --color-brass: #816729;

  --font-display: 'Space Grotesk', 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;

  --text-caption: 14px;
  --text-subheading: 18px;
  --text-heading: 32px;
  --text-heading-lg: 40px;
  --text-display: 66px;

  --page-max-width: 1200px;
  --section-gap: 80px;
  --card-padding: 40px;
  --element-gap: 20px;

  --radius-tags: 20px;
  --radius-cards: 8px;
  --radius-buttons: 0px;
  --radius-nav-pills: 200px;
  --radius-asym: 6px 0 0 0;
  --radius-data: 20px;

  --wash-color: var(--color-brass);
  --header-veil: rgba(255, 255, 255, 0.92);
}

/* FTO colorway: cream field, navy as the dark, gold as the single accent.
   Same structural system; only the ten color tokens re-map. */
[data-theme="fto"] {
  --color-graphite: #123C69;
  --color-canvas-white: #FBF8F2;
  --color-ash: #F0E9DC;
  --color-fog: #F5EFE4;
  --color-ivory: #EAE0CC;
  --color-steel: #44546A;
  --color-slate: #686D76;
  --color-mist: #E2DACB;
  --color-ember: #CE9528;
  --color-brass: #816729;
  --wash-color: #123C69;
  --header-veil: rgba(251, 248, 242, 0.92);
}

[data-font="tight"] {
  --font-display: 'Inter Tight', 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-graphite);
  background: var(--color-canvas-white);
  -webkit-font-smoothing: antialiased;
}

.container {
  --container-pad: 32px;
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* Typography */
h1, h2, h3, .display-face {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.02em;
}

h1 {
  font-size: clamp(52px, 7.5vw, 88px);
  line-height: 0.95;
  letter-spacing: -0.025em;
}

h2 {
  font-size: clamp(32px, 4.6vw, 56px);
  line-height: 1.08;
}

h3 {
  font-size: 22px;
  line-height: 1.19;
}

.lede {
  font-size: var(--text-subheading);
  line-height: 1.45;
  color: var(--color-steel);
}

.eyebrow {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brass);
  display: block;
  margin-bottom: 16px;
}

.accent { color: var(--color-ember); }
h1 .ghost { color: var(--color-slate); }

a.text-link {
  color: var(--color-graphite);
  text-decoration: none;
  border-bottom: 1px solid var(--color-ember);
  padding-bottom: 2px;
}

/* Buttons: sharp corners, whisper-weight display face */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: -0.02em;
  line-height: 1;
  padding: 14px 24px;
  border-radius: var(--radius-buttons);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.btn-primary {
  background: var(--color-graphite);
  color: var(--color-canvas-white);
  border: 1px solid var(--color-graphite);
}
.btn-primary:hover { background: #000; }

.btn-ghost {
  background: transparent;
  color: var(--color-graphite);
  border: 1px solid var(--color-graphite);
}
.btn-ghost:hover { background: var(--color-fog); }

/* Header: floating pill nav */
header.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-veil);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-mist);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 32px;
  max-width: var(--page-max-width);
  margin: 0 auto;
}

.wordmark {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--color-graphite);
  text-decoration: none;
}
.wordmark .thru { color: var(--color-ember); }

nav.pill-nav {
  background: var(--color-ash);
  border-radius: var(--radius-nav-pills);
  padding: 8px 18px;
  display: flex;
  gap: 24px;
}

nav.pill-nav a {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: -0.02em;
  color: var(--color-graphite);
  text-decoration: none;
}
nav.pill-nav a:hover { color: var(--color-ember); }

.header-cta { flex-shrink: 0; }
.header-cta .btn { padding: 10px 20px; font-size: 15px; }

/* Sections */
section { padding: var(--section-gap) 0; }
.band-ash { background: var(--color-ash); }
.band-ivory { background: var(--color-ivory); }

/* Hero */
.hero { padding: 96px 0 var(--section-gap); }

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: center;
}

.hero-copy .lede { margin: 28px 0 36px; max-width: 46ch; }

.cta-row { display: flex; gap: 16px; flex-wrap: wrap; }

.hero-visual { position: relative; min-height: 420px; }

/* Data-card cluster (the charts ARE the imagery) */
.data-card {
  background: var(--color-canvas-white);
  border: 1px solid var(--color-mist);
  border-radius: var(--radius-data);
  padding: 24px;
  position: absolute;
  font-size: 13px;
}

.data-card .card-title {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.data-card .card-meta { color: var(--color-slate); font-size: 12px; }

.queue-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  border-top: 1px solid var(--color-fog);
  gap: 16px;
}
.queue-row .who { color: var(--color-steel); }
.queue-row .what { color: var(--color-graphite); }

.pill {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.02em;
  padding: 3px 10px;
  border-radius: var(--radius-tags);
  white-space: nowrap;
}
/* Chips stay ink-and-slate; gold is reserved for illustrations and links.
   The review line escalates from machine-run to never-automated, so the chips
   carry that ramp by WEIGHT: faint outline, firm outline, then solid fills.
   Read down the column and the handover to a person is visible before the
   words are. */
.pill-done { color: var(--color-steel); border: 1px solid var(--color-mist); }
.pill-review { color: var(--color-graphite); border: 1px solid var(--color-graphite); }
.pill-owner {
  color: var(--color-canvas-white);
  background: var(--color-steel);
  border: 1px solid var(--color-steel);
}
.pill-queued {
  color: var(--color-canvas-white);
  background: var(--color-graphite);
  border: 1px solid var(--color-graphite);
}

/* The line where automation stops and a person takes over. */
.review-gate {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 0 6px;
}
.review-gate::before, .review-gate::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--color-mist);
}
.review-gate span {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-steel);
  white-space: nowrap;
}
.review-gate + .review-item { border-top: none; }

.spark {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 56px;
  margin-top: 10px;
}
.spark i {
  flex: 1;
  background: var(--color-mist);
  border-radius: 2px 2px 0 0;
}
.spark i.hot { background: var(--color-ember); }

.illustrative {
  position: absolute;
  bottom: -28px;
  right: 0;
  font-size: 11px;
  color: var(--color-slate);
}

/* Journey timeline */
.journey {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--element-gap);
  margin-top: 48px;
  counter-reset: step;
}

.step {
  background: var(--color-canvas-white);
  border-radius: var(--radius-cards);
  padding: 28px 24px;
  position: relative;
}

.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--color-brass);
  display: block;
  margin-bottom: 14px;
}

.step-art {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-cards);
  margin-bottom: 18px;
  display: block;
}

/* Featured door: the flagship gets the asymmetric corner and the ivory wash */
.door-featured {
  background: var(--color-ivory) !important;
  border-radius: var(--radius-asym);
}

.step h3 { font-size: 19px; margin-bottom: 10px; }
.step p { font-size: 14.5px; color: var(--color-steel); line-height: 1.45; }
.step p + p { margin-top: 8px; }
.step p strong { color: var(--color-graphite); }

/* Review section: motifs borrowed from Workflow reference, restyled into Ventriloc tokens */
.review-panel {
  background: var(--color-canvas-white);
  border: 1px solid var(--color-mist);
  border-radius: var(--radius-cards);
  padding: 24px;
}

.review-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--color-fog);
  font-size: 14px;
}
.review-item:first-child { border-top: none; }
.review-item .desc { color: var(--color-steel); font-size: 12.5px; }

/* Keep/guarantee cards stand as clean ivory statements (Zac 2026-08-26:
   pilot-3 texture retired as the last sparse-vocabulary asset). Any future
   art here must be machine-canon and must never touch the text column. */

/* Featured asymmetric card */
.asym-card {
  background: var(--color-ash);
  border-radius: var(--radius-asym);
  padding: 70px 60px 60px;
}
.band-ash .asym-card { background: var(--color-canvas-white); }

/* Seam bleed: an asset straddles the band boundary so no dead gutter forms */
.band-flush { padding-bottom: 0; }
.seam-bleed { position: relative; z-index: 2; margin-bottom: -70px; }
.seam-after { padding-top: calc(var(--section-gap) + 90px); }

/* Fit check: gauge composition, ledger beside family art */
.fit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  align-items: start;
  margin-top: 48px;
}

.fit-ledger {
  background: var(--color-canvas-white);
  border-radius: var(--radius-cards);
  padding: 24px;
  margin-top: 0;
}

.fit-ledger .group-label {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-slate);
  padding: 16px 0 6px;
}
.fit-ledger .group-label:first-child { padding-top: 0; }

.fit-row {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 10px 0;
  border-top: 1px solid var(--color-fog);
  font-size: 14.5px;
  color: var(--color-steel);
}

.fit-mark { flex: 0 0 14px; height: 14px; position: relative; top: 2px; }
.fit-row.yes .fit-mark::before {
  content: '';
  position: absolute;
  left: 1px;
  top: 3px;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--color-graphite);
  border-bottom: 2px solid var(--color-graphite);
  transform: rotate(-45deg);
}
.fit-row.no .fit-mark::before {
  content: '';
  position: absolute;
  left: 1px;
  top: 6px;
  width: 10px;
  height: 2px;
  background: var(--color-slate);
}

.fit-col {
  background: var(--color-canvas-white);
  border-radius: var(--radius-cards);
  padding: var(--card-padding);
}
.band-ash .fit-col { border: none; }

.fit-col h3 { margin-bottom: 18px; }
.fit-col ul { list-style: none; }
.fit-col li {
  padding: 10px 0 10px 24px;
  border-top: 1px solid var(--color-fog);
  font-size: 15px;
  color: var(--color-steel);
  position: relative;
}
.fit-col li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 17px;
  width: 10px;
  height: 2px;
  background: var(--color-graphite);
}
.fit-col.fit-not li::before { background: var(--color-slate); }

/* Closing */
.closing { text-align: center; padding: 120px 0; }
.closing h2 { max-width: 22ch; margin: 0 auto 20px; }
.closing .lede { max-width: 52ch; margin: 0 auto 36px; }

/* Footer */
footer {
  border-top: 1px solid var(--color-mist);
  padding: 40px 0;
  font-size: 14px;
  color: var(--color-slate);
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
footer a { color: var(--color-slate); text-decoration: none; }
footer a:hover { color: var(--color-graphite); }

/* Two-column narrative rows */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.split .lede { margin-top: 20px; }

/* Motion system. Signature moves from the gold standard: intro color wash,
   word-by-word hero reveal, staggered scroll-triggered rises. */

.intro-wash {
  position: fixed;
  inset: 0;
  background: var(--wash-color);
  z-index: 200;
  pointer-events: none;
}

/* Text animation system, matched to the gold standard's measured spec:
   slide 2em over 1.2s on cubic-bezier(0.55,0.21,0.07,0.87), 250ms fade,
   per-LINE stagger at 140ms, paused until the block enters the viewport. */
.ta { --ta-delay: 0ms; }
.ta .word { display: inline-flex; }
.ta .wordText { display: inline-block; }

@media (prefers-reduced-motion: no-preference) {
  .intro-wash { animation: washUp 0.8s cubic-bezier(0.76, 0, 0.24, 1) 0.15s forwards; }
  .intro-wash.exit { animation: washDown 0.5s cubic-bezier(0.55, 0.21, 0.07, 0.87) forwards; }

  @keyframes washUp {
    to { transform: translateY(-100%); }
  }
  @keyframes washDown {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }

  .ta .wordText {
    translate: 0 2em;
    opacity: 0;
    animation: taSlide 1.2s cubic-bezier(0.55, 0.21, 0.07, 0.87) both,
               taFade 250ms linear both;
    animation-play-state: paused, paused;
    animation-delay: calc(var(--line-index, 0) * 140ms + var(--ta-delay)),
                     calc(var(--line-index, 0) * 140ms + var(--ta-delay));
  }
  .ta.is-inview .wordText { animation-play-state: running, running; }

  @keyframes taSlide { to { translate: 0 0; } }
  @keyframes taFade { to { opacity: 1; } }

  /* Accent underline draws after the lines land (left origin, like the reference) */
  .ta .accent {
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 96%;
    background-size: 0% 2px;
  }
  .ta.is-inview .accent {
    transition: background-size 0.7s cubic-bezier(0.55, 0.21, 0.07, 0.87);
    transition-delay: calc((var(--line-total, 1) + 1) * 140ms + var(--ta-delay) + 300ms);
    background-size: 100% 2px;
  }

  /* Panel reveals via clip-path inset, the reference's clipPath keyframe */
  .clip-reveal {
    clip-path: inset(12% 8% 12% 8% round var(--radius-data));
    opacity: 0;
    transition: clip-path 1s cubic-bezier(0.55, 0.21, 0.07, 0.87), opacity 0.4s linear;
    transition-delay: var(--rd, 0s);
  }
  .clip-reveal.in, .in .clip-reveal, .revealed .clip-reveal {
    clip-path: inset(0 0 0 0 round var(--radius-data));
    opacity: 1;
  }

  .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--rd, 0s);
  }
  .reveal.in { opacity: 1; transform: none; }

  /* Children stagger inside revealed blocks */
  .step, .fit-col { transition-delay: calc(var(--si, 0) * 0.1s); }

  .queue-row {
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    transition-delay: calc(1.3s + var(--si, 0) * 0.12s);
  }
  .in .queue-row, .revealed .queue-row { opacity: 1; transform: none; }

  .spark i {
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(1.5s + var(--si, 0) * 0.08s);
  }
  .in .spark i, .revealed .spark i { transform: none; }

  /* floats via `translate` so it composes with inline parallax `transform` */
  .float-card { animation: floatDrift 7s ease-in-out 3s infinite; }

  @keyframes floatDrift {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -8px; }
  }

  .btn { transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; }
  .btn:active { transform: scale(0.98); }

  .data-card, .review-panel, .step {
    transition-property: opacity, transform, border-color;
  }
  .step:hover, .review-panel:hover { transform: translateY(-4px); }
  .data-card { transition: border-color 0.3s ease; }
  .data-card:hover { border-color: var(--color-slate); }
}

@media (prefers-reduced-motion: reduce) {
  .intro-wash { display: none; }
  .w { opacity: 1; }
}

/* Draft-compare control (removed before ship) */
.variant-dock {
  position: fixed;
  bottom: 18px;
  left: 18px;
  z-index: 120;
  background: var(--color-graphite);
  color: var(--color-canvas-white);
  border-radius: var(--radius-nav-pills);
  padding: 8px 16px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: -0.01em;
  display: flex;
  gap: 14px;
  align-items: center;
  opacity: 0.92;
}
.variant-dock a { color: inherit; text-decoration: none; opacity: 0.55; }
.variant-dock a.on { opacity: 1; border-bottom: 1px solid var(--color-ember); }
.variant-dock .sep { opacity: 0.3; }

/* Responsive */
@media (max-width: 900px) {
  .hero-grid, .split { grid-template-columns: 1fr; }
  .journey { grid-template-columns: 1fr 1fr; }
  .fit-grid { grid-template-columns: 1fr; }
  .seam-bleed { margin-bottom: -36px; }
  .seam-after { padding-top: calc(var(--section-gap) + 48px); }
  nav.pill-nav { display: none; }
  .hero-visual { min-height: 480px; }
}

@media (max-width: 560px) {
  .journey { grid-template-columns: 1fr; }
  .asym-card { padding: 40px 28px; }
  .container { --container-pad: 20px; }
}

/* Content round 2026-08-25: additive components (guarantee, proof strip, founder note, FAQ) */
.guarantee-line {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--color-graphite);
  margin-top: 22px;
  padding: 14px 20px;
  border-left: 3px solid var(--color-ember);
  background: var(--color-ivory);
  border-radius: 0 var(--radius-cards) var(--radius-cards) 0;
  max-width: 46ch;
}
.closing .guarantee-line {
  max-width: 52ch;
  margin: 0 auto 28px;
  border-left: none;
  border-top: 3px solid var(--color-ember);
  border-radius: 0 0 var(--radius-cards) var(--radius-cards);
  text-align: center;
}

.door-kicker {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--color-graphite);
}
.door-roadmap { border-top: 1px solid var(--color-mist); padding-top: 12px; margin-top: 12px; font-size: 13px; }
.door-roadmap .roadmap-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brass);
  margin-bottom: 4px;
}
.fork-advisory { margin-top: 28px; font-size: 15px; color: var(--color-steel); }

.proof-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--element-gap);
  margin-top: 48px;
}
.proof-card {
  background: var(--color-canvas-white);
  border-radius: var(--radius-cards);
  padding: 36px 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.proof-card h3 { font-size: 18px; margin-top: 14px; }
.proof-card p { font-size: 14.5px; color: var(--color-steel); line-height: 1.45; }
.proof-card .stat-num {
  font-family: var(--font-display);
  font-size: clamp(48px, 5vw, 68px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--color-graphite);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.proof-card .stat-num .stat-unit {
  font-size: 17px;
  letter-spacing: 0;
  color: var(--color-steel);
}
.proof-card .stat-metric {
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-slate);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-fog);
}
.proof-card .stat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
}
.proof-card .stat-chips span {
  font-size: 12px;
  color: var(--color-graphite);
  background: var(--color-fog);
  border-radius: 999px;
  padding: 4px 12px;
  white-space: nowrap;
}

.founder-grid {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 60px;
  align-items: center;
}
.founder-photo {
  aspect-ratio: 4 / 5;
  background: var(--color-ash);
  border-radius: var(--radius-asym);
  display: flex;
  align-items: flex-end;
  padding: 24px;
}
.founder-photo span {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-slate);
}
img.founder-photo {
  padding: 0;
  width: 100%;
  object-fit: cover;
  display: block;
}
.founder-note h2 { margin-bottom: 20px; }
.founder-note p { color: var(--color-steel); max-width: 58ch; }
.founder-note p + p { margin-top: 14px; }
.founder-note .founder-sig {
  font-family: var(--font-display);
  color: var(--color-graphite);
  margin-top: 22px;
}

.fit-note { margin-top: 18px; font-size: 14.5px; color: var(--color-steel); max-width: 52ch; }

.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 56px;
  align-items: start;
  margin-top: 24px;
}
@media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr; gap: 36px; } }
.faq { max-width: 720px; border-top: 1px solid var(--color-mist); }
.faq details { border-bottom: 1px solid var(--color-mist); }
.faq summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  color: var(--color-graphite);
  padding: 18px 36px 18px 0;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  width: 14px;
  height: 1.5px;
  background: var(--color-graphite);
  transition: transform 0.4s cubic-bezier(0.55, 0.21, 0.07, 0.87);
}
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details[open] summary::before { transform: rotate(-45deg); }
.faq details p { color: var(--color-steel); font-size: 15px; line-height: 1.5; padding: 0 0 20px; max-width: 56ch; }
.faq details p + p { padding-top: 0; }

@media (prefers-reduced-motion: no-preference) {
  .proof-card { transition-delay: calc(var(--si, 0) * 0.1s); }
}

@media (max-width: 900px) {
  .proof-grid { grid-template-columns: 1fr 1fr; }
  .founder-grid { grid-template-columns: 1fr; gap: 40px; }
  .founder-photo { max-width: 320px; width: 100%; }
  /* The #fork grid carries an inline 3-col override, so the responsive
     collapse needs !important to reach it on narrow viewports. */
  #fork .journey { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 560px) {
  .proof-grid { grid-template-columns: 1fr; }
  #fork .journey { grid-template-columns: 1fr !important; }
}


/* Stage 2 (2026-08-26): Assessment page + Blueprint sample components */

/* Sub-page hero: smaller headline, same whisper (per /system sub-page pattern) */
.subhero h1 { font-size: clamp(42px, 5.6vw, 72px); line-height: 1.0; }

/* Label chips: SAMPLE, CLIENT-CONFIRMED ASSUMPTIONS, PROJECTION */
.chip-label {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--radius-tags);
  border: 1px solid var(--color-graphite);
  color: var(--color-graphite);
  white-space: nowrap;
}
.chip-label.chip-muted { border-color: var(--color-slate); color: var(--color-slate); }

/* Redaction bar: a figure sits here in the real Blueprint. Solid ink, no fake numbers. */
.redact {
  display: inline-block;
  width: 4.5em;
  height: 1em;
  vertical-align: text-bottom;
  background: var(--color-graphite);
  border-radius: 2px;
  opacity: 0.85;
}
.redact.redact-wide { width: 7em; }

/* Blueprint viewer: anchor pills over stacked static sections (no JS state) */
.bp-nav {
  position: sticky;
  top: 56px; /* rendered .site-header height; keeps the pills from sliding under it */
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 0;
  background: var(--header-veil);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-mist);
}
.bp-nav a {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--color-graphite);
  text-decoration: none;
  padding: 6px 14px;
  border: 1px solid var(--color-mist);
  border-radius: var(--radius-nav-pills);
  background: var(--color-canvas-white);
}
.bp-nav a:hover { border-color: var(--color-graphite); }
.bp-nav a.active {
  background: var(--color-graphite);
  border-color: var(--color-graphite);
  color: var(--color-canvas-white);
}

.bp-section { padding: 56px 0; border-bottom: 1px solid var(--color-mist); }
.bp-section:last-of-type { border-bottom: none; }
.bp-footer-line { margin-top: 24px; font-size: 13.5px; color: var(--color-slate); max-width: 64ch; }

/* Opportunity map cards */
.opp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--element-gap);
  margin-top: 32px;
}
.opp-card {
  background: var(--color-fog);
  border-radius: var(--radius-cards);
  padding: 22px 20px;
  font-size: 14px;
}
.opp-card h3 { font-size: 17px; margin-bottom: 12px; }
.opp-row { display: grid; grid-template-columns: 84px 1fr; gap: 10px; padding: 7px 0; border-top: 1px solid var(--color-mist); color: var(--color-steel); }
.opp-row .opp-key {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brass);
  padding-top: 2px;
}
.opp-stat { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--color-mist); font-size: 12px; color: var(--color-slate); }

/* Priority matrix: static 2x2 */
.matrix {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--color-mist);
  border: 1px solid var(--color-mist);
  border-radius: var(--radius-cards);
  overflow: hidden;
  margin-top: 32px;
}
.matrix .quad { background: var(--color-canvas-white); padding: 20px; min-height: 150px; }
.matrix .quad.quad-hot { background: var(--color-fog); }
.matrix .quad-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brass);
  display: block;
  margin-bottom: 10px;
}
.matrix .quad li { font-size: 13.5px; color: var(--color-steel); margin-left: 16px; padding: 2px 0; }
.matrix-axes { display: flex; justify-content: space-between; margin-top: 10px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-slate); }

/* Priority matrix: one instrument-styled graph, data and labels inside it.
   Hairline navy monoline on cream paper, gold do-first pair only, quadrant
   spotlight on the do-first zone. Duplicated on assessment.html (accepted
   dual edit, same as the native sample section). */
.matrix-graph {
  margin-top: 32px;
  background: var(--color-canvas-white);
  border: 1px solid var(--color-mist);
  border-radius: var(--radius-data);
  padding: 22px 20px 10px;
  overflow-x: auto;
}
.matrix-graph svg { width: 100%; min-width: 640px; height: auto; display: block; }
.matrix-graph .axis { stroke: var(--color-graphite); stroke-width: 1.2; fill: none; }
.matrix-graph .tick { stroke: var(--color-graphite); stroke-width: 1; opacity: 0.45; }
.matrix-graph .midline { stroke: var(--color-slate); stroke-width: 1; stroke-dasharray: 4 7; opacity: 0.6; fill: none; }
.matrix-graph .zone { fill: var(--color-fog); }
.matrix-graph .dot-ring { fill: none; stroke: var(--color-graphite); stroke-width: 1.2; }
.matrix-graph .dot-core { fill: var(--color-graphite); }
.matrix-graph .dot-ring.first { stroke: var(--color-ember); }
.matrix-graph .rev-ring {
  fill: none;
  stroke: var(--color-brass);
  stroke-width: 1;
  stroke-dasharray: 3 4;
  opacity: 0.85;
}
.matrix-graph .dot-core.first { fill: var(--color-ember); }
.matrix-graph .dot-label {
  font-family: var(--font-body);
  font-size: 13px;
  fill: var(--color-graphite);
  paint-order: stroke;
  stroke: var(--color-canvas-white);
  stroke-width: 4px;
  stroke-linejoin: round;
}
.matrix-graph .dot-hrs { fill: var(--color-steel); }
.matrix-graph .quad-tag {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  fill: var(--color-brass);
}
.matrix-graph .axis-cue {
  font-family: var(--font-body);
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  fill: var(--color-slate);
}
.matrix-graph .axis-cue.strong { fill: var(--color-steel); }
.matrix-notes {
  margin-top: 20px;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  border-top: 1px solid var(--color-mist);
}
@media (max-width: 900px) { .matrix-notes { grid-template-columns: 1fr; gap: 0; } }
.matrix-notes li {
  font-size: 13.5px;
  color: var(--color-steel);
  padding: 14px 0 0 22px;
  position: relative;
}
@media (max-width: 900px) { .matrix-notes li { padding-top: 10px; } }
.matrix-notes li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 22px;
  width: 10px;
  height: 2px;
  background: var(--color-brass);
}

/* Shared table idiom (tool verdicts, financial impact) */
.data-table { width: 100%; border-collapse: collapse; margin-top: 32px; font-size: 14px; }
.data-table th {
  text-align: left;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.02em;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-graphite);
}
.data-table td { padding: 12px; border-bottom: 1px solid var(--color-mist); color: var(--color-steel); vertical-align: top; }
.data-table td:first-child { white-space: nowrap; }

.verdict {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: var(--radius-tags);
  border: 1px solid var(--color-steel);
  color: var(--color-steel);
}
.verdict.verdict-keep { border-color: var(--color-graphite); color: var(--color-graphite); }
.verdict.verdict-kill { border-color: var(--color-slate); color: var(--color-slate); }

/* Build sequence */
.seq { list-style: none; counter-reset: seq; margin-top: 32px; max-width: 640px; }
.seq li { counter-increment: seq; display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 14px 0; border-top: 1px solid var(--color-mist); }
.seq li::before {
  content: counter(seq, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--color-brass);
  padding-top: 2px;
}
.seq h3 { font-size: 17px; margin-bottom: 4px; }
.seq p { font-size: 14px; color: var(--color-steel); }

.callout {
  background: var(--color-ivory);
  border-radius: var(--radius-asym);
  padding: 24px 28px;
  margin-top: 28px;
  max-width: 640px;
}
.callout .callout-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brass);
  margin-bottom: 8px;
}

/* Financial impact rows */
.impact-row { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--color-mist); font-size: 14.5px; color: var(--color-steel); }
.impact-row .impact-figure { font-family: var(--font-display); color: var(--color-graphite); }
.impact-row.impact-projection {
  margin-top: 18px;
  border-top: 1px dashed var(--color-slate);
  padding: 20px 18px 16px;
  background: var(--color-fog);
  border-radius: var(--radius-cards);
}

/* Assessment page: the sample rendered natively as a document sheet.
   Sections 1 and 2 live on the page (readers read pages, not frames);
   sections 3 to 5 continue on blueprint-sample.html. Word content is a
   deliberate dual edit with blueprint-sample.html; keep them in sync. */
.sample-doc {
  margin-top: 40px;
  border: 1px solid var(--color-mist);
  border-radius: var(--radius-data);
  background: var(--color-canvas-white);
  overflow: hidden;
}
.sample-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--color-mist);
  font-size: 13px;
}
.sample-bar a { margin-left: auto; font-size: 13px; }
.sample-doc-body { padding: 30px 34px 38px; }
.sample-doc-body + .sample-doc-body { border-top: 1px solid var(--color-mist); }
.sample-doc-body > h3 { font-family: var(--font-display); font-weight: 400; font-size: 30px; letter-spacing: -0.015em; margin-top: 6px; }
.sample-doc-body .opp-grid { margin-top: 24px; }
.opp-grid.opp-solo { grid-template-columns: minmax(0, 480px); }
.sample-doc-body .matrix-plot { margin-top: 24px; }
.sample-continue {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-top: 1px solid var(--color-mist);
  font-size: 13.5px;
  color: var(--color-steel);
}
.sample-continue a { margin-left: auto; font-size: 13.5px; }
.sample-open-line { margin-top: 14px; font-size: 14px; color: var(--color-steel); }
/* Gold ration: this viewport already carries the wordmark's gold and the
   continue bar's gold link; the share link underlines in ink instead. */
.sample-open-line .text-link { border-bottom-color: var(--color-graphite); }
@media (max-width: 700px) {
  .sample-doc-body { padding: 22px 18px 28px; }
}

/* A straight read: two-column self-qualification stop before the CTA */
.read-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--element-gap);
  margin-top: 36px;
}
.read-col { background: var(--color-fog); border-radius: var(--radius-cards); padding: 26px 28px; }
.read-col .read-key {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brass);
  margin-bottom: 10px;
}
.read-col p { font-size: 15px; color: var(--color-steel); max-width: 52ch; }
.read-col.read-not { background: var(--color-canvas-white); border: 1px solid var(--color-mist); }
.read-col.read-not .read-key { color: var(--color-slate); }
@media (max-width: 900px) {
  .read-cols { grid-template-columns: 1fr; }
}

/* Anatomy: list beside the read-back printer, no half-empty viewport */
.anatomy-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: center;
}

/* Pricing stays quiet: one small instrument beside the paragraph */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 60px;
  align-items: center;
}
.pricing-art { max-width: 300px; }

@media (max-width: 900px) {
  .anatomy-grid { grid-template-columns: 1fr; gap: 32px; }
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-art { max-width: 220px; }
}

@media (max-width: 900px) {
  .opp-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .opp-grid { grid-template-columns: 1fr; }
  .matrix { grid-template-columns: 1fr; }
  .data-table { display: block; overflow-x: auto; }
}

/* Stage 3 case pages: shared skeleton (case-proposals, case-visibility,
   case-leads, case-advisory). Header order per content-lane spec:
   eyebrow, shape line, slice line, h1, provenance. */
.case-shape { font-size: var(--text-subheading); line-height: 1.45; color: var(--color-steel); max-width: 58ch; }
.case-slice { margin-top: 10px; font-size: 13px; color: var(--color-slate); max-width: 64ch; }
.case-hero h1 { margin-top: 22px; max-width: 20ch; }
.case-provenance {
  margin-top: 16px;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-slate);
  max-width: 72ch;
}
.case-prose p { color: var(--color-steel); max-width: 62ch; }
.case-prose p + p { margin-top: 14px; }
.case-prose .lede { color: var(--color-steel); }

/* Numbered systems reuse .seq; the human-stays sub-block sits inside each item */
.human-stays {
  margin-top: 10px;
  padding: 10px 14px;
  border-left: 2px solid var(--color-brass);
  background: var(--color-fog);
  border-radius: 0 var(--radius-cards) var(--radius-cards) 0;
  font-size: 13.5px;
  color: var(--color-steel);
  max-width: 56ch;
}
.human-stays .hs-key {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brass);
  margin-bottom: 4px;
}
.case-seq { max-width: 720px; }
.case-seq h3 { font-size: 20px; }
.case-seq p { font-size: 14.5px; }

/* Results: labeled rows, chip carries the provenance label */
.result-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: start;
  padding: 16px 0;
  border-top: 1px solid var(--color-mist);
  font-size: 15px;
  color: var(--color-steel);
  max-width: 860px;
}
.result-row .chip-label { justify-self: end; }
@media (max-width: 700px) {
  .result-row { grid-template-columns: 1fr; gap: 8px; }
  .result-row .chip-label { justify-self: start; }
}

/* Proof cards ARE the case links: whole card clickable, explicit Read-the-case
   affordance, hover lift. Navy furniture only, gold ration untouched. */
a.proof-card {
  text-decoration: none;
  color: inherit;
  border: 1px solid transparent;
  transition: border-color 0.25s ease, transform 0.3s ease;
}
a.proof-card:hover { border-color: var(--color-graphite); transform: translateY(-3px); }
.proof-card .proof-cta {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-fog);
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--color-graphite);
  display: flex;
  align-items: center;
  gap: 8px;
}
.proof-card .proof-cta .arrow { transition: transform 0.3s ease; }
a.proof-card:hover .proof-cta .arrow { transform: translateX(4px); }

/* Long booking CTA collapses to a short label on narrow viewports */
.header-cta .cta-short { display: none; }
@media (max-width: 760px) {
  .header-cta .cta-full { display: none; }
  .header-cta .cta-short { display: inline; }
}


/* Responsive and accessibility hardening — 2026-08-30 */
:root,
[data-theme="fto"] {
  --color-brass-text: #6e561d;
}

img {
  max-width: 100%;
  height: auto;
}

section[id] {
  scroll-margin-top: 82px;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-graphite);
  outline-offset: 3px;
}

main:focus:not(:focus-visible),
section:focus:not(:focus-visible) {
  outline: none;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 12px;
  z-index: 200;
  padding: 12px 16px;
  background: var(--color-graphite);
  color: var(--color-canvas-white);
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform 0.15s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.eyebrow,
.step::before,
.fit-ledger .group-label {
  color: var(--color-brass-text);
}

.data-card .card-meta,
.proof-card .stat-metric {
  color: var(--color-steel);
}

.header-inner {
  gap: 20px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  flex-shrink: 0;
}

nav.pill-nav {
  padding: 0 18px;
}

nav.pill-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

nav.pill-nav a:hover {
  color: var(--color-brass-text);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.header-cta .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}

.mobile-menu {
  display: none;
  position: relative;
}

.mobile-menu summary {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--color-graphite);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 14px;
  cursor: pointer;
  list-style: none;
}

.mobile-menu summary::-webkit-details-marker {
  display: none;
}

.mobile-menu summary::after {
  content: '+';
  font-size: 18px;
  line-height: 1;
}

.mobile-menu[open] summary::after {
  content: '−';
}

.mobile-menu nav {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 236px;
  padding: 10px;
  display: grid;
  background: var(--color-canvas-white);
  border: 1px solid var(--color-mist);
  box-shadow: 0 18px 40px rgba(18, 60, 105, 0.16);
}

.mobile-menu nav a {
  min-height: 44px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  color: var(--color-graphite);
  text-decoration: none;
  font-family: var(--font-display);
}

.mobile-menu nav a:hover {
  background: var(--color-fog);
}

.hero-note {
  max-width: 58ch;
  margin-top: 12px;
  color: var(--color-steel);
  font-size: 13px;
}

.motion-frame {
  position: relative;
}

.motion-frame video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-data);
}
.hero-machine-frame {
  overflow: hidden;
  border-radius: var(--radius-data);
  background: #f8f4ea;
  isolation: isolate;
}

.hero-machine-picture,
.hero-machine-image {
  display: block;
  width: 100%;
}

.hero-machine-image {
  height: auto;
}

/* The machine loop sits exactly over the still. It fades in on its first
   frame, so visitors never see a hard swap. Phones and reduced-motion
   visitors keep the still: the shared loader never attaches the MP4. */
.hero-machine-frame .hero-machine-video {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}

.hero-machine-frame .hero-machine-video.is-running {
  opacity: 1;
}

@media (max-width: 760px), (prefers-reduced-motion: reduce) {
  .hero-machine-frame .hero-machine-video {
    display: none;
  }
}


.review-panel .card-title {
  padding-bottom: 14px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--color-fog);
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: -0.02em;
}

.review-panel .card-meta {
  color: var(--color-steel);
  font-size: 12px;
}

footer,
footer a {
  color: var(--color-steel);
}

.header-cta .cta-short,
.header-cta .cta-tiny,
.hero-cta .cta-short {
  display: none;
}

@media (max-width: 1120px) {
  .header-cta .cta-full {
    display: none;
  }

  .header-cta .cta-short {
    display: inline;
  }

  .hero {
    padding-top: 64px;
  }

  .hero-grid {
    gap: 40px;
  }

  .hero-copy .lede {
    margin: 24px 0 28px;
  }
}

@media (max-width: 900px) {
  .mobile-menu {
    display: block;
  }

  .hero {
    padding-top: 64px;
  }
}

@media (max-width: 560px) {
  :root {
    --section-gap: 56px;
    --card-padding: 28px;
  }

  .header-inner {
    gap: 8px;
    padding: 10px 16px;
  }

  .hero {
    padding: 56px 0 var(--section-gap);
  }

  h1 {
    font-size: clamp(44px, 14vw, 50px);
    line-height: 0.98;
  }

  h2 {
    font-size: clamp(30px, 9vw, 38px);
  }

  .hero-copy .lede {
    margin: 22px 0 26px;
    font-size: 17px;
  }

  .hero-cta {
    width: 100%;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.2;
  }

  .journey,
  .proof-grid {
    gap: 16px;
  }

  .step,
  .proof-card,
  .review-panel {
    padding: 24px 20px;
  }

  .guarantee-line {
    padding: 14px 16px;
    font-size: 19px;
  }

  .closing {
    padding: 72px 0;
  }

  section[id] {
    scroll-margin-top: 76px;
  }
}

@media (max-width: 360px) {
  .header-inner {
    gap: 6px;
    padding: 10px 12px;
  }

  .wordmark {
    font-size: 17px;
  }

  .mobile-menu summary {
    padding: 0 9px;
    font-size: 13px;
  }

  .header-cta .cta-short {
    display: none;
  }

  .header-cta .cta-tiny {
    display: inline;
  }

  .header-cta .btn {
    padding-right: 14px;
    padding-left: 14px;
  }

  .hero-cta .cta-full {
    display: none;
  }

  .hero-cta .cta-short {
    display: inline;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}


/* Keep the compact navigation inside the viewport when disclosed. */
.mobile-menu:not([open]) nav {
  display: none;
}

@media (max-width: 900px) {
  .mobile-menu nav {
    position: fixed;
    top: 65px;
    right: 16px;
    left: 16px;
    min-width: 0;
  }
}

@media (max-width: 360px) {
  .mobile-menu nav {
    right: 12px;
    left: 12px;
  }
}


@media (max-width: 360px) {
  .hero {
    padding-top: 40px;
  }

  h1 {
    font-size: 40px;
  }

  .hero-copy .lede {
    margin: 18px 0 20px;
    font-size: 16px;
  }
}


/* Reviewer follow-up: preserve compact-header gutters and clear both header heights. */
@media (max-width: 900px) {
  .mobile-menu nav {
    top: 73px;
  }
}

@media (max-width: 560px) {
  .mobile-menu nav {
    top: 65px;
  }
}

@media (max-width: 420px) {
  .header-cta .cta-short {
    display: none;
  }

  .header-cta .cta-tiny {
    display: inline;
  }

  .header-cta .btn {
    padding-right: 14px;
    padding-left: 14px;
  }
}


/* pill-queued is now a solid graphite fill (see the chip ramp above); cream on
   graphite measures 10.56:1, so it needs no contrast correction here. */

/* Blueprint sample: components mirrored from the deliverable itself. */
.bp-builtfrom {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-top: 22px;
  font-size: 13.5px;
  color: var(--color-steel);
}
.bp-builtfrom-key {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brass-text);
}
.bp-builtfrom span[aria-hidden] { color: var(--color-slate); }

.bp-table-wrap { overflow-x: auto; margin-top: 32px; }
.bp-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.bp-table th {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-brass-text);
  text-align: left;
  padding: 0 16px 10px 0;
  border-bottom: 1px solid var(--color-mist);
  white-space: nowrap;
}
.bp-table td {
  padding: 14px 16px 14px 0;
  border-bottom: 1px solid var(--color-fog);
  color: var(--color-steel);
  vertical-align: top;
  line-height: 1.45;
}
.bp-table td:first-child { color: var(--color-graphite); white-space: nowrap; }
.bp-table td.num {
  color: var(--color-graphite);
  font-family: var(--font-display);
  text-align: right;
  white-space: nowrap;
}
.bp-table tbody tr:last-child td { border-bottom: 0; }
.bp-table-note, .bp-worked {
  font-size: 13.5px;
  color: var(--color-slate);
  margin-top: 14px;
}
.bp-worked {
  margin-top: 40px;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brass-text);
}
@media (max-width: 760px) {
  .bp-table { font-size: 13px; }
  .bp-table th, .bp-table td { padding-right: 12px; }
}

/* Held-back Blueprint sections: three up, collapsing on the same
   breakpoints as the fork. An inline grid override here would beat the
   media queries and push the page sideways on a phone. */
#held-sections .journey { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  #held-sections .journey { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  #held-sections .journey { grid-template-columns: 1fr; }
}

/* Privacy, terms and the 404: plain reading pages, narrower measure than the
   marketing sections, same type scale. */
.legal { padding: 96px 0 120px; }
.legal .container { max-width: 760px; }
.legal h1 { margin-top: 10px; }
.legal .legal-date {
  font-size: 13px;
  color: var(--color-steel);
  margin-top: 14px;
}
.legal .lede { margin-top: 32px; }
.legal h2 {
  font-size: 20px;
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid var(--color-mist);
}
.legal p { margin-top: 14px; line-height: 1.6; color: var(--color-steel); }
.legal ul { margin-top: 14px; padding-left: 22px; }
.legal li {
  line-height: 1.6;
  color: var(--color-steel);
  padding: 5px 0;
}
.legal strong { color: var(--color-graphite); font-weight: 500; }
@media (max-width: 760px) { .legal { padding: 64px 0 88px; } }

/* The intake band is 2.33:1 artwork. At a phone's 335px that is a 144px
   strip and the heap of paperwork turns to mush. On small screens the frame
   takes a 3:2 box and the media fills it, cropped toward the heap and the
   press, which is the part that carries "the workload has not changed".
   object-fit applies to the poster and the loop alike, so the still and the
   motion can never diverge here. gap-intake mobile crop */
/* The drawing sits low in its own canvas: 48px of blank above it and 63px
   below. Trimming the 15px surplus off the bottom makes the two equal, so the
   machine reads as centred instead of sagging. The artwork ends at y=622 and
   this reaches y=671, so only blank is removed. object-fit applies to the
   poster and the loop through one element, so the still and the motion stay
   identical. */
.gap-intake-frame {
  aspect-ratio: 1600 / 671;
  overflow: hidden;
  border-radius: var(--radius-data);
}
.gap-intake-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: 0;
}

/* Crop only where the drawing is genuinely too short to read. At 480px the
   whole thing is 206px tall; below that it falls away fast (167px at 390px)
   and the 2:1 crop buys real height back. Above it, cropping is pure loss:
   at 630px the uncropped drawing is already 270px, taller than the crop
   would ever make it. */
@media (max-width: 480px) {
  .gap-intake-frame {
    /* Width is the scarce resource on a phone, so this band runs to both
       edges: the negative margins mirror the container's own padding via
       --container-pad, so it stays flush at every width without 100vw, which
       would overshoot by the scrollbar. 2:1 then buys height back. At 390px
       that is 195px tall showing 86% of the drawing, against 167px for the
       whole thing. Cropped toward the heap and the press, the part that
       carries "the workload has not changed". object-fit applies to the
       poster and the loop through one element, so the still and the motion
       cannot diverge. gap-intake mobile crop */
    margin-left: calc(-1 * var(--container-pad));
    margin-right: calc(-1 * var(--container-pad));
    aspect-ratio: 2 / 1;
    overflow: hidden;
    border-radius: 0;
  }
  .gap-intake-frame video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 45% center;
    border-radius: 0;
  }
}