/* Arbiter Research. Palette B in tokens.css, the engine floor in
   scrollcraft.css. Nothing here restyles a [data-sc-*] selector. */

html { scroll-behavior: auto; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.skip {
  position: absolute; left: var(--sc-4); top: -40px; z-index: 70;
  padding: var(--sc-2) var(--sc-4);
  background: var(--alloy); color: var(--hardlight);
  clip-path: var(--clip-cell); text-decoration: none;
}
.skip:focus { top: var(--sc-4); }

/* ------------------------------------------------ nav: quiet top bar -- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  height: var(--nav-h);
  background: color-mix(in oklab, var(--void) 86%, transparent);
  border-bottom: 1px solid var(--edge);
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sc-6); height: 100%;
  max-width: var(--wide); margin: 0 auto; padding: 0 var(--sc-gutter);
}
.wordmark {
  font-family: var(--font-display); font-weight: 700; font-size: var(--sc-t-lg);
  letter-spacing: var(--sc-track-snug); color: var(--text); text-decoration: none;
}
.wordmark:hover, .wordmark:focus-visible { color: var(--hardlight); }
.nav nav { display: flex; align-items: center; gap: var(--sc-6); font-size: var(--sc-t-sm); color: var(--text-dim); }
.nav nav a { text-decoration: none; }
.nav nav a:hover, .nav nav a:focus-visible { color: var(--hardlight); }
.nav__account { cursor: default; }

/* Compact nav: primary trio + More panel (tablet / narrow). */
.nav__links { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--sc-5); }
.nav__more { position: relative; }
.nav__more > summary {
  list-style: none; cursor: pointer;
  color: var(--text-dim); font-size: var(--sc-t-sm);
  min-height: 44px; display: inline-flex; align-items: center;
}
.nav__more > summary::-webkit-details-marker { display: none; }
.nav__more > summary:hover,
.nav__more[open] > summary { color: var(--hardlight); }
.nav__panel {
  position: absolute; right: 0; top: calc(100% + 0.35rem);
  min-width: 11rem;
  background: color-mix(in oklab, var(--alloy) 94%, var(--void));
  border: 1px solid var(--edge);
  clip-path: var(--clip-cell);
  padding: 0.7rem 0.9rem;
  display: grid; gap: 0.55rem;
  z-index: 70;
  box-shadow: 0 12px 40px color-mix(in oklab, var(--void) 55%, transparent);
}
.nav__panel a { color: var(--text-dim); text-decoration: none; font-size: var(--sc-t-sm); }
.nav__panel a:hover, .nav__panel a:focus-visible, .nav__panel a[aria-current="page"] { color: var(--hardlight); }

@media (max-width: 1100px) {
  .nav__inner { gap: var(--sc-4); }
  .nav__links { gap: var(--sc-4); }
}



/* --------------------------------------------------------- layout -- */
.wrap { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: var(--sc-gutter); }
[id] { scroll-margin-top: calc(var(--nav-h) + var(--sc-6)); }

/* ------------------------------------- material: texture, never scene -- */
.tex { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.tex img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.tex--paper img { opacity: 0.78; }
.tex--ink img { opacity: 0.85; }
/* Fade the stage floor and the band under the nav to the page ground so the
   texture never shows a hard edge at either end of the stage. */
.tex::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--sc-canvas) 60%, transparent) 0%,
    transparent 22%, transparent 76%,
    color-mix(in oklab, var(--sc-canvas) 78%, transparent) 100%);
}

/* ------------------------------------------------------ buttons -- */
.cta { display: flex; flex-wrap: wrap; gap: var(--sc-3); }
.btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 20px; white-space: nowrap;
  font-family: var(--font-display); font-size: var(--sc-t-sm); font-weight: 600;
  color: var(--hardlight); text-decoration: none;
  transition: color var(--sc-d-fast) var(--sc-ease-out);
}
.btn::before, .btn::after { content: ""; position: absolute; inset: 0; clip-path: var(--clip-cell); }
.btn::before { z-index: -2; background: color-mix(in oklab, var(--hardlight) 34%, var(--edge)); transition: background var(--sc-d-fast) var(--sc-ease-out); }
.btn::after { z-index: -1; inset: 1px; background: var(--alloy); }
.btn:hover::before, .btn:focus-visible::before { background: var(--hardlight); }
.btn:active { translate: 0 1px; }
.btn--primary::before { background: color-mix(in oklab, var(--hardlight) 72%, var(--edge)); }
.btn--primary::after { background: color-mix(in oklab, var(--alloy) 68%, var(--stone)); }

/* ------------------------------------------------- act 1: the hero -- */
/* No position/height override here: .sc-stage (scrollcraft.css) already sets
   position: sticky; height: 100svh, which is what makes the act pin. An
   earlier same-specificity override on this selector silently un-pinned
   every stage on the page; see HANDOFF.md, Known defects #1. */
/* .hero__stage[data-sc-spotlight]::after, .hero__title h1, .hero__lede .cta:
   these three were ".hero ..." descendant selectors. No element on the page
   carries a bare class="hero" (the stage is "hero__stage", BEM-scoped like
   everything else in it), so all three were dead: the spotlight glow this
   page doesn't want was never actually hidden, and the h1 had no font-size,
   font-family or color of its own and fell back to the UA default heading
   style at settled scale — the CHECKPOINT 2 review's hero finding. */
.hero__stage[data-sc-spotlight]::after { display: none; }
.tex--paper img {
  transform: translate3d(calc((var(--sc-mx, 0.5) - 0.5) * -14px), calc((var(--sc-my, 0.5) - 0.5) * -10px), 0) scale(1.03);
  transition: transform 420ms var(--sc-ease-out);
}
/* h1 and the lede are independent grid children stacked in the same cell
   (grid-area: 1/1), each aligned on its own axis, rather than one flow block
   anchored to the bottom. That is what makes "h1 alone, vertically centered,
   at poster scale" and "the lede arrives later, at the bottom" two facts
   that can both be true without one fighting the other's position. */
.hero__stage { display: grid; }
.hero__title, .hero__lede {
  grid-area: 1 / 1; position: relative; z-index: 20;
  margin-inline: var(--sc-gutter);
}
.hero__title { align-self: center; justify-self: start; max-width: 62rem; }
.hero__lede { align-self: end; justify-self: start; max-width: 36rem; padding-bottom: clamp(3rem, 11vh, 8rem); }
/* Poster scale to settled scale, driven off the act's own progress. The
   transform lives on the title wrapper, not on the cue element, because the
   cue writes transform inline and would win. Origin is left-middle, not
   bottom-left: the title's grid position (vertically centered, left-anchored)
   is what "vertically centered" means at scale 1; shrinking from its own
   left-middle keeps that anchor as it settles, instead of the visual pivot
   living at a corner the layout no longer treats as one. */
.hero__title {
  transform-origin: 0 50%;
  transform: scale(calc(1 - var(--hero-shrink) * min(1, var(--sc-p, 0) / 0.7)));
  will-change: transform;
}
.hero__title h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(3.2rem, 9.4vw, 9.6rem);
  line-height: 0.94; letter-spacing: -0.035em;
  color: var(--hardlight); max-width: 14ch; text-wrap: balance;
}
.subhead {
  font-size: var(--sc-t-lg); line-height: 1.45; letter-spacing: var(--sc-track-snug);
  color: var(--text); text-wrap: pretty;
}
.hero__lede .cta { margin-top: var(--sc-6); }

/* ------------------------------------------- act 2: the claims (flow) -- */
.act--claims { padding-top: var(--sc-10); }
.claim {
  position: relative; min-height: 52vh;
  display: flex; align-items: center;
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--sc-t-2xl); line-height: 1.06; letter-spacing: var(--sc-track-snug);
  color: var(--hardlight); max-width: 22ch; text-wrap: balance;
}
.claim--2 { margin-left: 16%; }
/* The adversary's mark on the claim it answered. Gold, because it is the
   adversary's. */
.claim::before {
  content: attr(data-ord);
  position: absolute; left: calc(-1 * var(--sc-7)); top: 50%; translate: 0 -50%;
  font-family: var(--font-serif); font-style: italic; font-weight: 600;
  font-size: var(--sc-t-base); color: var(--gold);
  opacity: 0; transition: opacity 400ms var(--sc-ease-out);
}
.claim.is-answered::before { opacity: 1; }
.silence { height: 40vh; }

/* -------------------------------------------- act 3: the peak (pin) -- */
.peak__grid {
  position: absolute; z-index: 20;
  inset: calc(var(--nav-h) + var(--sc-6)) var(--sc-gutter) clamp(2.5rem, 8vh, 6rem);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  column-gap: var(--sc-8); row-gap: var(--sc-5);
  align-content: start;
}
.peak__setup {
  grid-column: 1 / -1;
  font-family: var(--font-display); font-weight: 600; font-size: var(--sc-t-lg);
  letter-spacing: var(--sc-track-snug); color: var(--hardlight);
}
.peak__objection {
  grid-column: 1 / -1; align-self: center;
  font-family: var(--font-serif); font-style: italic; font-weight: 600;
  font-size: clamp(2rem, 5.6vw, 5.4rem); line-height: 0.98; letter-spacing: -0.02em;
  color: var(--gold); max-width: 18ch; text-wrap: balance;
}
/* Spans both columns: the verdict fragment that used to sit in column 2 is
   gone until there is a real specimen, and a half-width answer would leave
   the peak's closing line lopsided. */
.peak__answer { grid-column: 1 / -1; align-self: end; }
.peak__answer p {
  font-size: var(--sc-t-lg); line-height: 1.45; letter-spacing: var(--sc-track-snug);
  color: var(--text); max-width: 46ch; text-wrap: pretty;
}

/* --------------------------------------------- act 4: prices (flow) -- */
.act--prices { padding: var(--sc-9) 0 var(--sc-10); }
.prices__title {
  font-family: var(--font-display); font-weight: 600; font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: var(--text-dim); margin-bottom: var(--sc-6);
}
.menu { border-top: 1px solid var(--edge); }
.row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sc-3) var(--sc-8); align-items: baseline;
  padding: var(--sc-5) 0; border-bottom: 1px solid var(--edge);
}
.row h3 {
  font-family: var(--font-display); font-weight: 700; font-size: var(--sc-t-xl);
  line-height: 1.15; letter-spacing: var(--sc-track-snug); color: var(--text);
}
.row p { margin-top: var(--sc-2); color: var(--text-dim); max-width: 48ch; text-wrap: pretty; }
.row__price { text-align: right; }
.price {
  display: block; font-family: var(--font-mono); font-weight: 500;
  font-size: var(--sc-t-xl); line-height: 1; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.price-sub { display: block; margin-top: var(--sc-2); font-family: var(--font-mono); font-size: var(--sc-t-xs); color: var(--text-dim); }

/* The lock's one sample slot. Frozen text, no card, no invented sample.
   Anchored #sample: the nav's Library link and the close's Open library.
   button both resolve here until a real specimen exists. */
.sample-note {
  margin-top: var(--sc-6); padding-top: var(--sc-5);
  border-top: 1px solid var(--edge);
  font-family: var(--font-display); font-weight: 600; font-size: var(--sc-t-sm);
  letter-spacing: var(--sc-track-snug); color: var(--text-dim);
}

/* ---------------------------------------------- act 5: the close (pin) -- */
/* The body and the footer are centered as ONE group with a capped gap
   between them, not two independently auto-centered blocks: margin-block:auto
   on .close__body alone gave it equal free space above AND below, which on a
   tall viewport left the CTA sitting in a large empty field over a footer
   that read as an afterthought. CHECKPOINT 2 review. */
.close__inner {
  position: absolute; z-index: 20;
  inset: calc(var(--nav-h) + var(--sc-6)) var(--sc-gutter) var(--sc-6);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  justify-content: center; gap: clamp(2.5rem, 6vh, 4.5rem);
}
.close__body { display: flex; flex-direction: column; align-items: center; gap: var(--sc-6); }
.close__line {
  font-family: var(--font-display); font-weight: 600; font-size: var(--sc-t-base);
  letter-spacing: var(--sc-track-snug); color: var(--hardlight);
}
.close .cta { justify-content: center; }
.footer {
  width: 100%; max-width: 46rem;
  padding-top: var(--sc-5); border-top: 1px solid var(--edge);
  font-size: var(--sc-t-xs); line-height: 1.5; color: var(--text-dim);
  overflow-wrap: anywhere;
}
.footer a { color: var(--text); }
/* The harness grades contrast at the cue element (.close__inner, which
   inherits --sc-ink and reads bright); it never sees this override, so it
   was reporting a passing number for a color nobody actually paints here.
   Measured directly against the real composited background: --text-dim at
   this size cleared 4.5:1 by 0.23 — the thinnest margin on the page, on the
   one line that is a legal requirement. Full --text ink removes the doubt. */
.footer__legal { margin-top: var(--sc-2); color: var(--text); }

/* ----------------------- peak explain (in-flow WHAT / DOES / WHY) --
   Lives inside .peak__grid under "The Devil's Advocate is named." — document
   flow on the peak stage, not a fixed right rail or mobile bottom overlay. */
.peak__explain {
  grid-column: 1 / -1;
  position: relative;
  width: auto;
  max-width: 54rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sc-4) var(--sc-6);
  pointer-events: auto;
  opacity: 1;
  transform: none;
  background: none;
}
.peak__block { min-width: 0; }
.peak__label {
  font-family: var(--font-display); font-weight: 600; font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: var(--text-dim); margin-bottom: var(--sc-2);
}
.peak__block p {
  font-size: var(--sc-t-sm); line-height: 1.4; letter-spacing: var(--sc-track-snug);
  color: var(--text); text-wrap: pretty;
}
.peak__points {
  grid-column: 1 / -1;
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sc-3) var(--sc-6);
}
.peak__points li {
  position: relative; padding-left: var(--sc-5);
  font-family: var(--font-serif); font-style: italic; font-weight: 600;
  font-size: var(--sc-t-sm); line-height: 1.35; color: var(--gold); text-wrap: pretty;
}
.peak__points li::before {
  content: "•";
  position: absolute; left: 0; top: 0;
  color: var(--gold);
}

/* Peak readability fallback (site.js toggles .is-peak-readable). Keeps the
   Devil's Advocate confrontation on the stage when kinetic/cue progress lags
   on touch — never leave explain + objection + answer blank. */
.act--peak.is-peak-readable .peak__explain,
.act--peak.is-peak-readable .peak__objection,
.act--peak.is-peak-readable .peak__objection .sc-split__i,
.act--peak.is-peak-readable .peak__answer {
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
  clip-path: none !important;
}

/* ---------------------------------------------------------- phone -- */
@media (max-width: 860px) {
  :root { --hero-shrink: 0.34; }
  .hero__title h1 { font-size: clamp(2.6rem, 13.5vw, 4.6rem); max-width: none; }
  .hero__lede { padding-bottom: clamp(2rem, 8vh, 4rem); }
  .cta { flex-direction: column; }
  .btn { width: 100%; }

  .claim { min-height: 42vh; font-size: var(--sc-t-xl); max-width: none; display: block; padding-top: 12vh; }
  .claim--2 { margin-left: 0; }
  .claim::before { position: static; translate: none; display: block; margin-bottom: var(--sc-2); }

  .peak__grid {
    grid-template-columns: 1fr; grid-template-rows: auto auto minmax(0, 1fr) auto;
    row-gap: var(--sc-4);
  }
  .peak__objection { font-size: clamp(1.85rem, 9.5vw, 3.4rem); max-width: none; }
  .peak__answer { grid-column: 1; justify-self: start; text-align: left; }
  .peak__answer p { max-width: none; }

  .row { grid-template-columns: 1fr; }
  .row__price { text-align: left; }

  .close__inner { padding-bottom: 7.5rem; }

  .peak__explain { grid-template-columns: 1fr; gap: var(--sc-3); }
  .peak__points { grid-template-columns: 1fr; gap: var(--sc-2); }
  .peak__points li { font-size: var(--sc-t-xs); }
}

/* ---------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .hero__title { transform: none; }
  .hero__title h1 { font-size: clamp(2.2rem, 4.2vw, 3.8rem); }
  /* The engine gates this cue on scroll progress. Without motion the hero
     should be complete on the first screen: headline, subhead, the action. */
  .hero__lede { opacity: 1 !important; transform: none !important; }
  .tex--paper img { transform: none; transition: none; }
  .btn, .btn::before { transition: none; }
  .peak__explain { opacity: 1; }
  .claim::before { transition: none; }
  .peak__setup,
  .peak__explain,
  .peak__objection,
  .peak__objection .sc-split__i,
  .peak__answer {
    opacity: 1 !important;
    transform: none !important;
  }
}