/* ============================================================================
   Marginry — premium specialist operational diagnostics
   One dark ground the whole way down. Depth comes from layered surfaces, real
   ambient light and tonal steps, never from gradients or glass.
   ========================================================================== */

@property --sc-p   { syntax: "<number>"; inherits: true;  initial-value: 0; }
@property --v      { syntax: "<number>"; inherits: true;  initial-value: 0; }
@property --vo     { syntax: "<number>"; inherits: true;  initial-value: 0; }
/* Four-point timeline per text state: a=enter, b=full, c=start exit, d=gone.
   Splitting enter and exit from the hold is the whole point: a single symmetric
   ramp spends most of a state's scroll at partial opacity, which is the state
   being half-readable rather than being read. */
@property --a      { syntax: "<number>"; inherits: true;  initial-value: 0; }
@property --b      { syntax: "<number>"; inherits: true;  initial-value: 0; }
@property --c      { syntax: "<number>"; inherits: true;  initial-value: 2; }
@property --d      { syntax: "<number>"; inherits: true;  initial-value: 3; }
@property --in     { syntax: "<number>"; inherits: true;  initial-value: 0; }
@property --out    { syntax: "<number>"; inherits: true;  initial-value: 0; }
@property --settle { syntax: "<number>"; inherits: true;  initial-value: 0; }
@property --scan   { syntax: "<number>"; inherits: true;  initial-value: 0; }
@property --split  { syntax: "<number>"; inherits: true;  initial-value: 0; }
@property --lift   { syntax: "<number>"; inherits: true;  initial-value: 0; }
@property --lit    { syntax: "<number>"; inherits: true;  initial-value: 0; }

/* ------------------------------------------------------------- tokens ---- */
:root {
  --sc-canvas:     #14161A;   /* one step under brand charcoal, so surfaces
                                 have somewhere to rise to */
  --ground-deep:   #0F1114;
  --sc-surface:    #1C1F25;   /* raised */
  --surface-2:     #23272E;   /* raised twice, nothing rises further */
  --sc-ink:        #F7F4EE;
  --sc-ink-soft:   #A9A69E;
  --ink-dim:       #85827B;   /* 4.8:1 on canvas, 5.0:1 on the deep ground */
  --sc-accent:     #A89470;
  --gold-hi:       #C0AC85;   /* the lit edge of the same bronze */
  --sc-accent-ink: #14171A;

  --sc-hairline:        color-mix(in oklab, var(--sc-ink) 9%, transparent);
  --sc-hairline-strong: color-mix(in oklab, var(--sc-ink) 17%, transparent);

  --sc-font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --sc-font-text:    "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --sc-r-sm: 8px; --sc-r-md: 14px; --sc-r-lg: 20px;
  --r-panel: 22px;

  --sc-maxw: 78rem;
  --sc-shadow-color: 220 30% 3%;

  --track-cap: 0.16em;
  --track-mark: 0.32em;

  --edge: inset 0 1px 0 color-mix(in oklab, var(--sc-ink) 9%, transparent);
}

body { font-weight: 400; background: var(--sc-canvas); }

/* ---------------------------------------------------------- primitives -- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  padding: 0.75rem 1.25rem; border-radius: var(--sc-r-sm);
}
.skip:focus { left: 1rem; top: 1rem; }

.kicker, .plate__k, .rstage__k, .band, .panel__listk, .topbar__price,
.q__n, .get__n, .foot__legal, .book__price {
  font-family: var(--sc-font-text);
  font-size: var(--sc-t-xs);
  font-weight: 500;
  letter-spacing: var(--track-cap);
  text-transform: uppercase;
  margin: 0;
}
.kicker { color: var(--sc-accent); }
.kicker__dot { color: var(--ink-dim); margin-inline: 0.5em; }

/* the mark ---------------------------------------------------------------- */
.mark {
  display: inline-flex; align-items: center; gap: 0.7rem;
  text-decoration: none; color: inherit;
}
.mark__glyph { height: 1.3rem; width: auto; overflow: visible; }
.mark__m     { fill: currentColor; }
.mark__facet { fill: var(--sc-accent); transition: fill var(--sc-d-fast) var(--sc-ease-out); }
.mark__type {
  font-family: var(--sc-font-text);
  font-size: var(--sc-t-xs);
  font-weight: 400;
  letter-spacing: var(--track-mark);
  text-transform: uppercase;
  margin-right: calc(var(--track-mark) * -1);
}
.mark--hero .mark__glyph { height: 1.75rem; }
.mark--hero .mark__type { font-size: var(--sc-t-sm); }

/* buttons ----------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sc-font-text);
  /* Uppercase and tracked. On a page set in a high-contrast serif this is what
     separates a control from a link, and it is most of the perceived weight. */
  font-size: var(--sc-t-sm);
  font-weight: 500;
  letter-spacing: 0.085em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  padding: 1.15rem 2.1rem;
  border-radius: var(--sc-r-md);
  transition: transform 150ms var(--sc-ease-out),
              box-shadow 200ms var(--sc-ease-out),
              background-color 150ms var(--sc-ease-out),
              border-color 150ms var(--sc-ease-out),
              color 150ms var(--sc-ease-out);
}
/* Tactile, not glowing: a top-lit face, a hairline lip, and a shadow with real
   offset. The lift on hover is what sells it, not a halo. */
/* The face is lit from above and the shadow it throws is warm, because the
   thing throwing it is warm. Offset and blur, never a zero-offset ring. */
.btn--gold {
  color: var(--sc-accent-ink);
  background: linear-gradient(177deg, #CDB98F 0%, var(--sc-accent) 55%, #A08B66 100%);
  box-shadow: inset 0 1px 0 color-mix(in oklab, #FFF 34%, transparent),
              0 1px 2px hsl(var(--sc-shadow-color) / 0.55),
              0 10px 24px -12px color-mix(in oklab, var(--sc-accent) 55%, transparent),
              0 14px 30px -14px hsl(var(--sc-shadow-color) / 0.85);
}
.btn--ghost {
  color: var(--sc-ink);
  background: color-mix(in oklab, var(--sc-ink) 4%, transparent);
  border: 1px solid var(--sc-hairline-strong);
  box-shadow: var(--edge);
}
.btn--sm { padding: 0.7rem 1.2rem; font-size: var(--sc-t-xs); border-radius: 10px; letter-spacing: 0.07em; }
.btn--lg { padding: 1.35rem 2.75rem; font-size: var(--sc-t-base); }
.btn:active { transform: translateY(1px); }
.btn--gold:focus-visible { outline-color: var(--sc-ink); }

@media (hover: hover) and (pointer: fine) {
  .btn--gold:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 color-mix(in oklab, #FFF 42%, transparent),
                0 2px 3px hsl(var(--sc-shadow-color) / 0.55),
                0 16px 34px -14px color-mix(in oklab, var(--sc-accent) 70%, transparent),
                0 22px 44px -16px hsl(var(--sc-shadow-color) / 0.9);
  }
  .btn--ghost:hover {
    background: color-mix(in oklab, var(--sc-ink) 8%, transparent);
    border-color: color-mix(in oklab, var(--sc-accent) 55%, transparent);
    transform: translateY(-2px);
  }
  .mark:hover .mark__facet { fill: var(--gold-hi); }
}

/* ══════════════════════════════════════════════════════════ top bar ═══ */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  background: color-mix(in oklab, var(--ground-deep) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--sc-hairline);
  transform: translateY(-101%);
  opacity: 0;
  transition: transform 420ms var(--sc-ease-out), opacity 260ms var(--sc-ease-out);
}
.topbar.is-on { transform: none; opacity: 1; }
.topbar__in {
  max-width: var(--sc-maxw); margin-inline: auto;
  padding: 0.72rem var(--sc-gutter);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sc-4);
}
.topbar__right { display: flex; align-items: center; gap: 1.35rem; }
/* Transparent, but it must not compete with the action beside it. */
.topbar__price { color: var(--ink-dim); letter-spacing: 0.1em; font-weight: 400; }

/* ═══════════════════════════════════════════════════════════ 1 · HERO ═══ */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid; align-items: center;
  overflow: clip;
  padding-block: 5.25rem 3rem;
  background: var(--ground-deep);
  text-align: center;
}
/* One warm source, high and behind the type. This is the whole reason the
   ground reads as a room rather than a fill. */
.hero__light {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(58% 46% at 50% 6%,
      color-mix(in oklab, var(--sc-accent) 26%, transparent) 0%,
      color-mix(in oklab, var(--sc-accent) 7%, transparent) 42%,
      transparent 72%),
    radial-gradient(120% 80% at 50% 44%,
      color-mix(in oklab, #2A2F38 70%, transparent) 0%, transparent 68%);
}
/* A field of records receding into the dark under the headline. Atmosphere and
   subject at the same time. */
.hero__field {
  position: absolute; inset: 34% -30% -12% -30%; pointer-events: none;
  background: repeating-linear-gradient(
    0deg, transparent 0 25px, var(--sc-ink) 25px 26px);
  opacity: 0.07;
  transform: perspective(760px) rotateX(74deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: radial-gradient(74% 88% at 50% 100%, #000 6%, transparent 68%);
          mask-image: radial-gradient(74% 88% at 50% 100%, #000 6%, transparent 68%);
}
.hero__vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(96% 74% at 50% 42%, transparent 44%,
              color-mix(in oklab, #000 62%, transparent) 100%);
}
.hero .sc-grain { position: absolute; opacity: 0.05; }
.hero__in { position: relative; z-index: 2; }

.hero__title {
  font-family: var(--sc-font-display);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: clamp(2.5rem, 1.1rem + 4.6vw, 4.7rem);
  line-height: 1.05;
  letter-spacing: -0.024em;
  text-wrap: balance;
  max-width: 20ch;
  margin: clamp(1rem, 2.2vh, 1.5rem) auto 0;
}
.hero__title em {
  font-style: italic;
  color: color-mix(in oklab, var(--gold-hi) 78%, var(--sc-ink));
}
.hero__lede {
  margin: clamp(1.3rem, 3vh, 1.9rem) auto 0;
  max-width: 54ch;
  font-size: var(--sc-t-lg);
  line-height: 1.52;
  letter-spacing: -0.012em;
  color: var(--sc-ink-soft);
  text-wrap: pretty;
}
.actions {
  margin-top: clamp(1.9rem, 4.2vh, 2.9rem);
  display: flex; justify-content: center; flex-wrap: wrap; gap: 0.85rem;
}
.hero .kicker { margin-top: clamp(1.8rem, 4.4vh, 2.9rem); }

/* the fact plate: one raised surface, three facts, hairline dividers */
.plate {
  margin: clamp(2rem, 4.6vh, 3rem) auto 0;
  max-width: 46rem;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: linear-gradient(180deg,
              color-mix(in oklab, var(--sc-surface) 92%, transparent),
              color-mix(in oklab, var(--ground-deep) 70%, transparent));
  border: 1px solid var(--sc-hairline);
  border-radius: var(--sc-r-lg);
  box-shadow: var(--edge), 0 22px 48px -26px hsl(var(--sc-shadow-color) / 0.9);
}
.plate__cell {
  display: grid; gap: 0.4rem; justify-items: center;
  padding: 1.15rem 1rem;
}
.plate__cell + .plate__cell { border-left: 1px solid var(--sc-hairline); }
.plate__k { color: var(--ink-dim); }
.plate__v {
  font-size: var(--sc-t-sm);
  color: var(--sc-ink);
  letter-spacing: -0.008em;
}
.plate__cell:first-child .plate__v { color: var(--gold-hi); }

/* ═══════════════════════════════════════ 2 · PROBLEM RECOGNITION ═══ */
.ask { position: relative; background: var(--sc-canvas); }
.ask__stage { display: grid; align-items: center; }
.ask__in { text-align: center; }

.ask__lead {
  margin: 0 auto;
  max-width: 40ch;
  font-size: var(--sc-t-base);
  color: var(--ink-dim);
  text-wrap: pretty;
}
.ask__lead-turn { display: block; margin-top: 0.55rem; color: var(--sc-ink); }

/* One question at a time, all five stacked in one cell so the slot never
   changes height and nothing below it moves. */
.ask__slot {
  display: grid;
  margin-top: clamp(2rem, 5vh, 3.2rem);
  min-height: clamp(9rem, 22vh, 12rem);
  align-items: center;
}
.q {
  --in:  clamp(0, calc((var(--sc-p) - var(--a)) / (var(--b) - var(--a))), 1);
  --out: clamp(0, calc((var(--sc-p) - var(--c)) / (var(--d) - var(--c))), 1);
  grid-area: 1 / 1;
  margin: 0 auto;
  max-width: 22ch;
  font-family: var(--sc-font-display);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: clamp(1.85rem, 0.95rem + 2.5vw, 3.15rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  text-wrap: balance;
  opacity: calc(var(--in) - var(--out));
  translate: 0 calc((1 - var(--in)) * 14px);
}
.q__n {
  display: block;
  color: var(--sc-accent);
  margin-bottom: 1rem;
}

/* enter .028 | hold .105 | exit .028 | gap .014 of the act.
   Q5 never exits: it holds to the end of the pin so the act resolves on a
   readable statement, and the concluding paragraph enters only after the
   stage has unpinned. */
.q:nth-child(1), .ask__tick:nth-child(1) { --a: .040; --b: .068; --c: .173; --d: .201; }
.q:nth-child(2), .ask__tick:nth-child(2) { --a: .215; --b: .243; --c: .348; --d: .376; }
.q:nth-child(3), .ask__tick:nth-child(3) { --a: .390; --b: .418; --c: .523; --d: .551; }
.q:nth-child(4), .ask__tick:nth-child(4) { --a: .565; --b: .593; --c: .698; --d: .726; }
.q:nth-child(5), .ask__tick:nth-child(5) { --a: .740; --b: .768; --c: 2;    --d: 3;    }

.ask__rail {
  margin: clamp(2rem, 5vh, 3rem) auto 0;
  display: flex; justify-content: center; gap: 0.5rem;
}
.ask__tick {
  --in:  clamp(0, calc((var(--sc-p) - var(--a)) / (var(--b) - var(--a))), 1);
  --out: clamp(0, calc((var(--sc-p) - var(--c)) / (var(--d) - var(--c))), 1);
  display: block; height: 2px; width: 2.4rem; border-radius: 2px;
  background: color-mix(in oklab, var(--sc-ink) 20%, transparent);
  position: relative; overflow: hidden;
}
.ask__tick::after {
  content: ""; position: absolute; inset: 0;
  background: var(--sc-accent);
  /* fills while its question is up, then settles back to a read marker */
  transform: scaleX(calc(var(--in) - var(--out) * 0.55));
  transform-origin: 0 50%;
}

.bridge { padding-block: clamp(3.5rem, 10vh, 7rem) clamp(4.5rem, 12vh, 9rem); }
.bridge p {
  margin: 0 auto; max-width: 34ch; text-align: center;
  font-family: var(--sc-font-display);
  font-optical-sizing: auto;
  font-size: var(--sc-t-xl);
  line-height: 1.3;
  letter-spacing: -0.016em;
  text-wrap: balance;
}

/* ═══════════════════════════════════ 3 · HOW MARGINRY EXAMINES ═══ */
.exam { position: relative; background: var(--ground-deep); }
.exam__stage { display: grid; align-items: center; overflow: clip; }
.exam__light {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(52% 42% at 50% 30%,
    color-mix(in oklab, var(--sc-accent) calc(9% + var(--lift, 0) * 8%), transparent) 0%,
    transparent 70%);
  --lift: clamp(0, calc((var(--sc-p) - 0.76) / 0.07), 1);
}
.exam__in { position: relative; z-index: 2; }

/* the four stage captions, stacked in one cell */
.rstack {
  display: grid;
  min-height: clamp(6.5rem, 15vh, 8.5rem);
  text-align: center;
  margin-bottom: clamp(1.75rem, 4vh, 2.75rem);
}
.rstage {
  --in:  clamp(0, calc((var(--sc-p) - var(--a)) / (var(--b) - var(--a))), 1);
  --out: clamp(0, calc((var(--sc-p) - var(--c)) / (var(--d) - var(--c))), 1);
  grid-area: 1 / 1;
  opacity: calc(var(--in) - var(--out));
  translate: 0 calc((1 - var(--in)) * 10px);
}
/* enter .030 | hold .150 | exit .030 | gap .018. Every record beat below is
   timed to land inside the matching caption's hold, so the figure and the words
   describing it are never out of step. */
.rstage:nth-child(1) { --a: .020; --b: .050; --c: .200; --d: .230; }
.rstage:nth-child(2) { --a: .248; --b: .278; --c: .428; --d: .458; }
.rstage:nth-child(3) { --a: .476; --b: .506; --c: .656; --d: .686; }
.rstage:nth-child(4) { --a: .704; --b: .734; --c: 2;    --d: 3;    }
.rstage__k { color: var(--sc-accent); }
.rstage__d {
  margin: 0.85rem auto 0;
  max-width: 44ch;
  font-family: var(--sc-font-display);
  font-optical-sizing: auto;
  font-size: var(--sc-t-lg);
  line-height: 1.4;
  letter-spacing: -0.014em;
  text-wrap: pretty;
}

/* ── the field of records ── */
.field {
  /* each beat sits inside its caption's full-opacity hold */
  --settle: clamp(0, calc((var(--sc-p) - 0.06) / 0.13), 1);   /* caption 1 */
  --scan:   clamp(0, calc((var(--sc-p) - 0.30) / 0.12), 1);   /* caption 2 */
  --split:  clamp(0, calc((var(--sc-p) - 0.51) / 0.13), 1);   /* caption 3 */
  --lift:   clamp(0, calc((var(--sc-p) - 0.76) / 0.07), 1);   /* caption 4 */
  --row: 26px; --gap: 34px; --h: 420px;
  --top: calc((var(--h) - 12 * var(--row) - 2 * var(--gap)) / 2);

  position: relative;
  height: var(--h);
  max-width: 46rem;
  margin-inline: auto;
}

.slab {
  /* y1 = settled column, y2 = the same order pushed apart into three bands */
  --y0: calc(var(--top) + var(--i) * var(--row) + var(--gap) + var(--sy));
  --y1: calc(var(--top) + var(--i) * var(--row) + var(--gap));
  --y2: calc(var(--top) + var(--i) * var(--row) + var(--band) * var(--gap));
  --yA: calc(var(--y0) + (var(--y1) - var(--y0)) * var(--settle));
  --y:  calc(var(--yA) + (var(--y2) - var(--yA)) * var(--split));
  /* each slab lights as the scan line reaches its row */
  --lit: clamp(0, calc((var(--scan) - var(--i) / 13) * 9), 1);

  position: absolute; left: 0; top: 0;
  /* scaled down so the band labels get a clean right gutter to live in */
  width: calc(var(--w) * 0.62); height: 10px;
  border-radius: 3px;
  background: color-mix(in oklab, var(--sc-ink) calc(20% + var(--lit) * 16%), transparent);
  box-shadow: inset 0 1px 0 color-mix(in oklab, #FFF 12%, transparent),
              0 2px 6px -2px hsl(var(--sc-shadow-color) / 0.75);
  opacity: calc(0.5 + 0.5 * var(--settle));
  translate: calc(var(--sx) * (1 - var(--settle))) var(--y);
  rotate: calc(var(--sr) * (1 - var(--settle)));
}
/* "evidence insufficient" is drawn as an outline with nothing in it. The
   metaphor is the finding, so it should not need a legend. */
.slab--thin {
  background: transparent;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sc-ink) calc(22% + var(--lit) * 14%), transparent);
}
/* band 0 is the priority queue: it takes the gold and rises off the ground */
.slab--p {
  background: color-mix(in oklab, var(--sc-accent)
              calc(26% + var(--lit) * 14% + var(--split) * 40% + var(--lift) * 20%), transparent);
  translate: calc(var(--sx) * (1 - var(--settle)))
             calc(var(--y) - var(--lift) * 6px);
  box-shadow: inset 0 1px 0 color-mix(in oklab, #FFF calc(12% + var(--lift) * 18%), transparent),
              0 calc(2px + var(--lift) * 6px) calc(6px + var(--lift) * 16px) -2px
                color-mix(in oklab, var(--sc-accent) calc(var(--lift) * 45%), hsl(var(--sc-shadow-color) / 0.75));
}

.field__scan {
  position: absolute; left: -4%; right: -4%; height: 1px;
  top: calc(var(--top) + var(--gap) + var(--scan) * 12 * var(--row));
  background: linear-gradient(90deg, transparent,
              var(--gold-hi) 18%, var(--gold-hi) 82%, transparent);
  opacity: calc(min(var(--scan), 1 - var(--scan)) * 4);
  box-shadow: 0 0 14px color-mix(in oklab, var(--sc-accent) 45%, transparent);
}

/* Each label centres on its own band, in the gutter the slabs leave free. */
.band {
  --v: clamp(0, calc((var(--sc-p) - 0.58) / 0.08), 1);
  position: absolute; left: 66%; width: 34%;
  color: var(--ink-dim);
  opacity: var(--v);
  translate: calc((1 - var(--v)) * 10px) -50%;
  text-align: left;
  line-height: 1.3;
}
.band--0 { top: calc(var(--top) + 1.5 * var(--row)); color: var(--sc-accent); }
.band--1 { top: calc(var(--top) + 6 * var(--row) + var(--gap)); }
.band--2 { top: calc(var(--top) + 10 * var(--row) + 2 * var(--gap)); }

/* ══════════════════════════════════════ 4 · THE $500 DIAGNOSTIC ═══ */
.offer { background: var(--sc-canvas); padding-block: clamp(5rem, 13vh, 9.5rem); }
.panel {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  padding: clamp(2rem, 4.5vw, 3.6rem);
  border-radius: var(--r-panel);
  border: 1px solid var(--sc-hairline-strong);
  background:
    radial-gradient(70% 90% at 8% 0%,
      color-mix(in oklab, var(--sc-accent) 8%, transparent) 0%, transparent 62%),
    linear-gradient(168deg, var(--surface-2) 0%, var(--sc-surface) 58%, var(--ground-deep) 100%);
  box-shadow: var(--edge), 0 34px 70px -40px hsl(var(--sc-shadow-color) / 1);
}
/* The diagnostic is the object in this section. It carries the display size. */
.panel__title {
  font-family: var(--sc-font-display);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: clamp(1.9rem, 1.1rem + 1.9vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -0.022em;
  margin: 0.9rem 0 0;
  text-wrap: balance;
}
.panel__sub { color: var(--sc-ink-soft); }
.panel__body {
  margin: 1.15rem 0 0;
  max-width: 40ch;
  color: var(--sc-ink-soft);
  text-wrap: pretty;
}
/* A fee line on a hairline, at body scale: transparent and easy to find,
   subordinate to the diagnostic name and the deliverables opposite it. */
.fee {
  margin: 1.6rem 0 1.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--sc-hairline);
  display: flex; align-items: baseline; gap: 0.85rem; flex-wrap: wrap;
}
.fee__k {
  font-family: var(--sc-font-text);
  font-size: var(--sc-t-xs);
  font-weight: 500;
  letter-spacing: var(--track-cap);
  text-transform: uppercase;
  color: var(--ink-dim);
}
.fee__v {
  font-size: var(--sc-t-base);
  letter-spacing: -0.008em;
  color: var(--gold-hi);
}
.panel__list { align-self: center; }
.panel__listk { color: var(--ink-dim); }
.gets { list-style: none; margin: 1rem 0 0; padding: 0; }
.get {
  display: grid; grid-template-columns: 3rem 1fr;
  align-items: baseline;
  padding: 0.95rem 0;
  border-top: 1px solid var(--sc-hairline);
  font-size: var(--sc-t-base);
  letter-spacing: -0.008em;
}
.get:last-child { border-bottom: 1px solid var(--sc-hairline); }
.get__n { color: var(--sc-accent); font-variant-numeric: tabular-nums; }

/* ═════════════════════ 5 · EVIDENCE DISCIPLINE + FINAL CTA ═══ */
.creed { background: var(--sc-canvas); padding-block: clamp(4rem, 11vh, 8rem); }
.creed__title {
  margin: 0 auto;
  max-width: 20ch;
  text-align: center;
  font-family: var(--sc-font-display);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: clamp(2rem, 1.05rem + 3.1vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.creed__title em { font-style: italic; color: var(--gold-hi); }

.tenets {
  list-style: none; margin: clamp(3rem, 7vh, 5rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--sc-hairline);
  border: 1px solid var(--sc-hairline);
  border-radius: var(--sc-r-lg);
  overflow: hidden;
}
.tenet {
  display: grid; gap: 0.55rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: color-mix(in oklab, var(--sc-surface) 62%, var(--sc-canvas));
}
.tenet__k {
  font-family: var(--sc-font-display);
  font-optical-sizing: auto;
  font-size: var(--sc-t-lg);
  line-height: 1.25;
  letter-spacing: -0.014em;
}
.tenet__d { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.55; text-wrap: pretty; }

.creed__bound {
  margin: clamp(2rem, 5vh, 3rem) auto 0;
  max-width: 56ch; text-align: center;
  color: var(--ink-dim);
  font-size: var(--sc-t-sm);
  text-wrap: pretty;
}

.book {
  position: relative; overflow: clip;
  background: var(--ground-deep);
  padding-block: clamp(5rem, 14vh, 10rem);
  text-align: center;
}
.book__light {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50% 62% at 50% 78%,
    color-mix(in oklab, var(--sc-accent) 18%, transparent) 0%, transparent 68%);
}
.book__in { position: relative; z-index: 2; }
.book__title {
  margin: 0 auto clamp(2.25rem, 5vh, 3.25rem);
  max-width: 17ch;
  font-family: var(--sc-font-display);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: clamp(2.15rem, 1.05rem + 3.6vw, 4.1rem);
  line-height: 1.06;
  letter-spacing: -0.024em;
  text-wrap: balance;
}
.book__title em { font-style: italic; color: var(--gold-hi); }
.book__price { margin-top: 1.35rem; color: var(--sc-ink-soft); }

.foot {
  background: var(--ground-deep);
  border-top: 1px solid var(--sc-hairline);
  padding-block: clamp(2.75rem, 6vh, 4rem) clamp(2rem, 4vh, 2.75rem);
}
.foot__top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem var(--sc-6); flex-wrap: wrap;
}
.foot__line {
  margin: 0; max-width: 46ch;
  color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.55;
  text-wrap: pretty;
}
/* The rule spans the footer; the copy inside keeps a readable measure. */
.foot__mid {
  margin-top: clamp(1.75rem, 4vh, 2.5rem);
  padding-top: 1.15rem;
  border-top: 1px solid var(--sc-hairline);
}
.foot__data {
  margin: 0;
  max-width: 76ch;
  color: var(--ink-dim); font-size: var(--sc-t-sm); line-height: 1.6;
  text-wrap: pretty;
}
.foot__datak {
  display: block;
  font-size: var(--sc-t-xs); font-weight: 500;
  letter-spacing: var(--track-cap); text-transform: uppercase;
  color: var(--sc-ink-soft);
  margin-bottom: 0.4rem;
}
.foot__bar {
  margin-top: clamp(1.5rem, 3.5vh, 2.25rem);
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.75rem var(--sc-5); flex-wrap: wrap;
}
.foot__links { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.foot__links a {
  color: var(--sc-ink-soft);
  font-size: var(--sc-t-sm);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--sc-accent) 45%, transparent);
  padding-bottom: 1px;
  transition: color var(--sc-d-fast) var(--sc-ease-out),
              border-color var(--sc-d-fast) var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .foot__links a:hover { color: var(--sc-ink); border-bottom-color: var(--sc-accent); }
}
.foot__legal { color: var(--ink-dim); }

/* ══════════════════════════════════════════════════════════ mobile ═══ */
@media (max-width: 900px) {
  .panel { grid-template-columns: 1fr; gap: 2.5rem; }
  .tenets { grid-template-columns: 1fr; }
  .plate { grid-template-columns: 1fr; max-width: 26rem; }
  .plate__cell + .plate__cell { border-left: 0; border-top: 1px solid var(--sc-hairline); }
  .plate__cell { padding: 0.95rem 1rem; }

  .field { --row: 19px; --gap: 25px; --h: 320px; max-width: none; }
  .slab { height: 8px; width: calc(var(--w) * 0.58); }
  .band { left: 62%; width: 38%; }
  .band--0 { top: calc(var(--top) + 1.5 * var(--row)); }
  .band--1 { top: calc(var(--top) + 6 * var(--row) + var(--gap)); }
  .band--2 { top: calc(var(--top) + 10 * var(--row) + 2 * var(--gap)); }
}

@media (max-width: 700px) {
  .hero { padding-block: 5.5rem 3rem; }
  /* the qualifier is the half that has to survive; the standfirst carries the
     rest, and a two-line tracked kicker reads as a wrapping accident */
  .kicker__tail { display: none; }
  .actions { flex-direction: column; align-items: stretch; }
  .actions .btn { width: 100%; }
  /* The bar keeps the full CTA label rather than a shortened one, so the
     wordmark gives up its text and keeps the glyph. */
  .topbar__price { display: none; }
  .topbar .mark__type { display: none; }
  .topbar__in { padding-inline: 1rem; }
  .btn--sm { padding: 0.66rem 1rem; letter-spacing: 0.05em; }
  .foot__in { justify-content: flex-start; }
  .ask__slot { min-height: 13rem; }
  .q { max-width: 18ch; }
  .ask__tick { width: 1.6rem; }

  /* A question that wraps to three lines needs longer at full strength than the
     same question on one line. Buy that dwell out of the ramps and the gaps
     rather than out of the span: enter .022 | hold .125 | exit .022 | gap .012. */
  .q:nth-child(1), .ask__tick:nth-child(1) { --a: .035; --b: .057; --c: .182; --d: .204; }
  .q:nth-child(2), .ask__tick:nth-child(2) { --a: .216; --b: .238; --c: .363; --d: .385; }
  .q:nth-child(3), .ask__tick:nth-child(3) { --a: .397; --b: .419; --c: .544; --d: .566; }
  .q:nth-child(4), .ask__tick:nth-child(4) { --a: .578; --b: .600; --c: .725; --d: .747; }
  .q:nth-child(5), .ask__tick:nth-child(5) { --a: .759; --b: .781; --c: 2;    --d: 3;    }

  /* enter .024 | hold .170 | exit .024 | gap .014. The record beats are unchanged
     and still land inside every one of these holds. */
  .rstage:nth-child(1) { --a: .015; --b: .039; --c: .209; --d: .233; }
  .rstage:nth-child(2) { --a: .247; --b: .271; --c: .441; --d: .465; }
  .rstage:nth-child(3) { --a: .479; --b: .503; --c: .673; --d: .697; }
  .rstage:nth-child(4) { --a: .711; --b: .735; --c: 2;    --d: 3;    }
  .get { grid-template-columns: 2.4rem 1fr; padding: 0.8rem 0; }
}

/* ═══════════════════════════════════════════════ reduced motion ═══ */
@media (prefers-reduced-motion: reduce) {
  /* Fewer and gentler, not zero. Every beat still resolves, and nothing that
     carries meaning is dropped; only the travel is. */
  .q, .rstage { translate: none !important; }
  /* Collapsing the scatter into the settled position removes the travel while
     leaving every later beat intact: the bands still separate, band 0 still
     lights. Zeroing the whole transform would delete the finding. */
  .slab, .slab--p { --y0: var(--y1); translate: 0 var(--y) !important; rotate: none !important; }
  .field__scan { display: none; }
  .band { translate: 0 -50% !important; }
  .topbar { transition-duration: 1ms; }
  .btn { transition-duration: 1ms; }
}

/* ═══════════════════════════════════════════════ legal page ═══ */
.legal-page { min-height: 100vh; background: #0f1114; color: #e9e4da; }
.legal-shell { width: min(760px, calc(100% - 2rem)); margin-inline: auto; padding: 4rem 0 6rem; }
.legal-back { display: inline-block; margin-bottom: 4rem; color: #c79a5b; text-decoration: none; }
.legal-shell h1 { max-width: 12ch; margin: 0.35rem 0 0.5rem; font-size: clamp(3rem, 8vw, 6rem); line-height: 0.95; }
.legal-updated { color: #9e9a92; margin-bottom: 4rem; }
.legal-shell section { padding: 1.75rem 0; border-top: 1px solid rgba(233, 228, 218, 0.14); }
.legal-shell h2 { margin: 0 0 0.75rem; font-size: 1.15rem; }
.legal-shell p { max-width: 68ch; color: #c7c2b8; line-height: 1.7; }
.legal-shell a { color: #d2a666; }