/* ── Vig, landing ─────────────────────────────────────────────────────
   The payoff curve is the page. Everything else is set against it, and the
   one authored motion moment is the curve drawing itself on arrival —
   after that, the only thing that moves is what the visitor moves.
   Tokens, reset and browser surfaces come from tokens.css.
   ------------------------------------------------------------------- */

/* ── Tape ─────────────────────────────────────────────────────────────
   Live account figures along the top edge. A strip, not a hero-metric
   block: these are conditions, and the page's subject is the curve. */
.tape {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center; gap: 22px;
  padding: 11px 22px;
  background: color-mix(in oklab, var(--ground) 88%, transparent);
  border-bottom: 1px solid var(--hair);
  backdrop-filter: blur(8px);
  font-size: var(--t-2);
}
.tape .mark {
  font-weight: 700; font-size: var(--t-5); letter-spacing: 0.2em;
  text-transform: uppercase; margin-right: 4px;
}
.tape-item { display: inline-flex; align-items: baseline; gap: 7px; }
.tape .k { color: var(--ink-mute); letter-spacing: 0.1em; text-transform: uppercase; font-size: var(--t-1); }
.tape b { font-weight: 400; font-size: var(--t-4); color: var(--ink-dim); }
.tape b.res { color: var(--reserved); }
.tape-live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; color: var(--ink-mute); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-mute); }
.tape-live.on .dot { background: var(--credit); }
.tape-live.off .dot { background: var(--breached); }

/* ── Hero ───────────────────────────────────────────────────────────── */
/* Copy above, curve below. The contract put the claim over the corridor, but
   at desktop width the plateau lands exactly where the headline sits and the
   two collide: the marker line cuts through the type and the dot vanishes
   behind it. Legibility outranks the literal overlay, so the curve takes the
   lower half outright — still the largest thing on the page, still the
   argument, and now readable at every width. */
/* The hero is exactly one viewport. The scrub is the signature interaction and
   has to be reachable without scrolling, so the curve takes whatever height is
   left after the claim and the control have theirs. */
.hero {
  position: relative;
  height: 100svh; min-height: 620px;
  display: grid; grid-template-rows: auto minmax(180px, 1fr) auto;
  padding: 78px 0 0;
  overflow: hidden;
}
.curve {
  position: relative; display: block; width: 100%;
  height: 100%; min-height: 0;
  align-self: stretch;
}
.curve .line   { stroke: var(--credit); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.curve .zero   { stroke: var(--hair-lit); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
/* The floors are the argument, so they are drawn heavier than the ramps. */
.curve .floor  { stroke: var(--reserved); stroke-width: 3; vector-effect: non-scaling-stroke; opacity: .85; }
.curve .mark-line { stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.curve .mark-dot  { fill: var(--credit); }
.hero.breach .curve .mark-dot { fill: var(--breached); }
.hero.breach .curve .mark-line { stroke: var(--breached); }

.hero-copy {
  position: relative; z-index: 2;
  max-width: 1180px; margin: 0 auto; padding: 2.4vh 24px 2.8vh;
  align-self: start; width: 100%;
}

/* The claim is the product. At 60px it was a headline; at full strength it is
   the thing the page is for, and everything else can afford to be quiet. */
h1 {
  margin: 0 0 20px;
  font-size: var(--d-claim);
  line-height: 0.94; letter-spacing: -0.045em; font-weight: 700;
  max-width: 13ch; text-wrap: balance;
}
.lede {
  margin: 0 0 30px; max-width: 52ch;
  font-size: clamp(var(--t-5), 1.55vw, 18px); line-height: 1.55; color: var(--ink-dim);
}
.lede em { color: var(--ink); font-style: normal; }

.actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cta {
  display: inline-flex; align-items: center;
  padding: 11px 20px; text-decoration: none;
  background: var(--reserved); color: var(--ground);
  font-weight: 600; font-size: var(--t-4); letter-spacing: 0.02em;
  border: 1px solid var(--reserved);
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.cta:hover { background: var(--reserved-lit); transform: translateY(-1px); }
.cta:active { transform: none; }
.cta.ghost { background: none; color: var(--ink-dim); border-color: var(--hair-lit); }
.cta.ghost:hover { background: none; color: var(--ink); border-color: var(--ink-mute); }

/* ── Reserved field ───────────────────────────────────────────────────
   Brass at region scale, and the region is not decorative: everything
   below the floor line is loss that cannot happen, because the capital
   for it is already set aside. That field is the product's whole claim,
   so it gets the product's colour at field strength rather than as a rule.
   ------------------------------------------------------------------- */
.curve .reserved-field { fill: color-mix(in oklab, var(--reserved) 22%, transparent); }

/* ── Live figures ─────────────────────────────────────────────────────
   A ruled list, not a metric card: one type size throughout, no framed
   accent, no headline figure restating the Cover Sheet one click away.
   On desktop it occupies the quadrant right of the claim; on a phone it
   flows after the scrub so the control keeps the first viewport.
   ------------------------------------------------------------------- */
.ledger-col {
  position: absolute; z-index: 2; margin: 0;
  top: calc(78px + 2.4vh); right: max(24px, calc((100% - 1180px) / 2 + 24px));
  width: 290px;
}
.ledger-col > div {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 18px; padding: 8px 0; border-bottom: 1px solid var(--hair);
}
.ledger-col > div:first-child { border-top: 1px solid var(--hair); }
.ledger-col dt { color: var(--ink-mute); font-size: var(--t-2); }
.ledger-col dd { margin: 0; color: var(--ink-dim); font-size: var(--t-2); }
.ledger-col dd.res { color: var(--reserved); }

/* ── The scrub ────────────────────────────────────────────────────────
   The governing control. Drag price and the loss stops deepening at the
   floor; the corridor marks where the structure pays. */
/* The scrub sits directly under the curve it drives — the rail's price axis
   and the curve's price axis are the same axis, so they share an edge. */
.scrub {
  position: relative; z-index: 2;
  max-width: none; margin: 0; width: 100%;
  padding: 0 24px 30px;
}
.scrub-inner { max-width: 1180px; margin: 0 auto; }
.scrub-rail {
  position: relative; height: 34px; cursor: ew-resize;
  border-top: 1px solid var(--hair);
  touch-action: none;
}
.scrub-corridor {
  position: absolute; top: -1px; height: 3px;
  background: var(--credit); opacity: .55;
}
.scrub-knob {
  position: absolute; top: -9px; left: 0; width: 19px; height: 19px;
  margin-left: -9.5px; padding: 0; cursor: grab;
  touch-action: none;
  background: var(--ink); border: 0; border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0,0,0,.55);
  transition: transform .16s ease, background .16s ease;
}
/* The visible knob stays 19px; the touch target is 44. A control this small
   is fine to look at and impossible to grab with a thumb. */
.scrub-knob::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}
.scrub-knob:hover { transform: scale(1.14); }
.scrub-knob:active { cursor: grabbing; transform: scale(1.06); }
.hero.breach .scrub-knob { background: var(--breached); }

.scrub-read {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 18px; margin-top: 11px; flex-wrap: wrap;
}
.scrub-hint { color: var(--ink-mute); font-size: var(--t-2); }
.scrub-hint.used { opacity: 0; transition: opacity .4s ease; }
.scrub-out { display: inline-flex; gap: 16px; align-items: baseline; }
.scrub-out .k { color: var(--ink-mute); font-size: var(--t-1); letter-spacing: 0.1em; text-transform: uppercase; margin-right: 6px; }
.scrub-out b { font-weight: 400; font-size: var(--t-5); }
#s-pnl.win  { color: var(--credit); }
#s-pnl.lose { color: var(--breached); }

/* ── Bands ────────────────────────────────────────────────────────── */
.band { border-top: 1px solid var(--hair); padding: clamp(64px, 9vh, 118px) 0; }

/* Brass at region scale. The gates are where the reserve does its work —
   eight ways of saying no — so the section that lists them is the one the
   product's colour for standing capital actually owns. */
.band.reserve {
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--reserved) 13%, var(--ground)),
      color-mix(in oklab, var(--reserved) 6%, var(--ground)));
  border-top-color: var(--reserved);
}
.band.reserve h2 { color: var(--ink); }
.band.reserve .sub { color: color-mix(in oklab, var(--reserved) 44%, var(--ink)); }

/* The peak. One band runs reversed — black on bone — because the section
   stating what we do NOT claim should read like the plain page of a
   prospectus rather than another dark panel. It is the only light surface
   on either page, which is what makes it land. */
.band.plain {
  background: var(--paper); color: var(--paper-ink);
  border-top-color: var(--paper);
}
.band.plain h2 { color: var(--paper-ink); }
.band.plain p { color: var(--paper-dim); }
.band.plain p em { color: var(--paper-ink); }
.band.plain .cta { background: var(--paper-ink); color: var(--paper); border-color: var(--paper-ink); }
.band.plain .cta:hover { background: #000; }
.band.plain ::selection { background: var(--paper-ink); color: var(--paper); }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
/* Narrow measure, same left edge. Centring the column shifted this band off
   the spine every other band shares, which reads as a different page. */
.wrap.narrow > * { max-width: 68ch; }
.wrap.narrow h2 { max-width: 22ch; }
h2 {
  margin: 0 0 18px; font-size: var(--d-band);
  line-height: 1.02; letter-spacing: -0.035em; font-weight: 700; max-width: 20ch;
  text-wrap: balance;
}
.band p { max-width: 62ch; color: var(--ink-dim); line-height: 1.62; font-size: clamp(var(--t-5), 1.35vw, 17px); margin: 0 0 17px; }
.band p em { color: var(--ink); font-style: normal; }
.band .sub { margin-bottom: 26px; }
.band code { font-family: var(--mono); color: var(--reserved); font-size: .92em; }

.two { display: grid; grid-template-columns: minmax(0,0.9fr) minmax(0,1.1fr); gap: 52px; align-items: start; }
.cmd {
  margin: 0; padding: 26px 26px; overflow-x: auto;
  background: #07070a; border: 1px solid var(--hair);
  border-left: 1px solid var(--reserved);
  font-family: var(--mono); font-size: var(--t-3); line-height: 1.8;
  color: var(--ink-dim); white-space: pre;
}
.cmd .c { color: var(--reserved); }

/* The gates are a list of refusals, not feature cards: one rule per row,
   the name carrying weight and the reason carrying the explanation. */
/* Eight refusals, read as a sequence rather than a paragraph list. The rule
   between rows is brass because the rule IS the gate: the line a structure
   does not get past. Hovering a row brings its threshold forward. */
.gates { list-style: none; margin: 0; padding: 0; counter-reset: gate; }
.gates li {
  counter-increment: gate;
  display: grid; grid-template-columns: 2.6ch 230px minmax(0,1fr); gap: 22px;
  padding: 18px 0 18px 0; align-items: baseline;
  border-bottom: 1px solid color-mix(in oklab, var(--reserved) 26%, transparent);
  /* Indent on hover via transform, not padding: animating padding relayouts
     the row and everything under it on every frame. */
  transition: background .18s ease, transform .18s ease;
}
.gates li:first-child { border-top: 1px solid color-mix(in oklab, var(--reserved) 26%, transparent); }
.gates li::before {
  content: counter(gate, decimal-leading-zero);
  font-family: var(--mono); font-size: var(--t-2);
  color: color-mix(in oklab, var(--reserved) 55%, transparent);
}
.gates li:hover {
  background: color-mix(in oklab, var(--reserved) 9%, transparent);
  transform: translateX(10px);
}
.gates b {
  font-family: var(--mono); font-weight: 500; color: var(--reserved);
  font-size: clamp(var(--t-4), 1.5vw, 19px); letter-spacing: -0.01em;
}
.gates span { color: color-mix(in oklab, var(--reserved) 30%, var(--ink)); font-size: clamp(var(--t-4), 1.15vw, 15px); }
/* Armed = the gate has not been applied yet. Its rule is drawn from the left
   as the check runs, so the section arrives as a sequence of decisions rather
   than as a list that faded in. */
.gates li { position: relative; }
.gates li::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--reserved); transform: scaleX(1); transform-origin: left center;
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.gates li.armed::after { transform: scaleX(0); }
.gates li.armed b, .gates li.armed span, .gates li.armed::before {
  opacity: 0; transition: opacity .4s ease .12s;
}
.gates li b, .gates li span, .gates li::before { opacity: 1; transition: opacity .4s ease .12s; }

/* The action fills from the left, the way the reserve does. */
.cta { position: relative; overflow: hidden; }
.cta.ghost::before {
  content: ""; position: absolute; inset: 0;
  background: color-mix(in oklab, var(--reserved) 16%, transparent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .28s cubic-bezier(.22,.61,.36,1);
}
.cta.ghost:hover::before { transform: scaleX(1); }
.cta > * , .cta { z-index: 0; }

@media (prefers-reduced-motion: reduce) {
  .gates li, .gates li::after, .gates li b, .gates li span, .cta.ghost::before { transition: none; }
  .gates li.armed::after { transform: scaleX(1); }
  .gates li.armed b, .gates li.armed span, .gates li.armed::before { opacity: 1; }
}

.foot {
  border-top: 1px solid var(--hair); padding: 26px 24px 40px;
  max-width: 1180px; margin: 0 auto;
  display: flex; gap: 20px; flex-wrap: wrap;
  color: var(--ink-mute); font-size: var(--t-2);
}

/* ── Responsive ───────────────────────────────────────────────────────
   The curve keeps the viewport on every size — it is the argument — but
   below 820 the copy stops overlaying it and sits beneath, because at
   phone width there is no plateau wide enough to hold a headline. */
@media (max-width: 980px) {
  /* Below this the figures stop floating beside the claim and take their
     place in the flow, after the control. The scrub must not be displaced:
     it is the one thing on this page that proves the claim. */
  .ledger-col {
    position: static; width: auto;
    max-width: 1180px; margin: 0 auto; padding: 0 24px 30px;
  }
}

@media (max-width: 820px) {
  /* The desktop hero is locked to one viewport so the scrub stays reachable.
     At phone width the claim alone needs most of that height, and locking it
     clipped the headline outright — so here the hero grows and the page
     scrolls, which is the native behaviour on a phone anyway. */
  .hero { height: auto; min-height: 0; padding-top: 78px; overflow: visible; }
  .hero .lede { margin-bottom: 22px; }
  .hero-copy { padding-bottom: 1.6vh; }
  .curve { height: clamp(190px, 34svh, 300px); }
  .hero-copy { padding-top: 26px; }
  h1 { max-width: 100%; }
  .two { grid-template-columns: 1fr; gap: 24px; }
  /* The command is the evidence in a section titled "the proof and the order
     are the same request", so no part of it may be clipped at 390px. Wrapping
     beats shrinking: an off-ramp font size would buy the fit by breaking the
     type scale, and a horizontal scrollbar hides the evidence behind a gesture
     nobody performs. The legs wrap with a hanging indent; nothing is lost. */
  .cmd {
    font-size: var(--t-1); padding: 15px 14px; line-height: 1.7;
    white-space: pre-wrap; text-indent: -1.4em; padding-left: calc(14px + 1.4em);
  }
  .gates li { grid-template-columns: 1fr; gap: 3px; }
  .band { padding: 54px 0; }
  /* The strip carried five items into 390px and the live status slid over the
     figures. Fewer items, no overlap: the account number is on the Cover Sheet
     one tap away, and what matters at a glance is what is reserved, what is
     uncovered, and whether this is live at all. */
  .tape { gap: 14px; padding: 9px 16px; }
  .tape-item.secondary { display: none; }
  .tape-live { margin-left: auto; }
}

@media (max-width: 560px) {
  /* Stripping the labels left three unlabelled figures side by side, which is
     less useful than one labelled figure. Keep the number the product exists
     to show, keep its label, drop the rest. */
  .tape { gap: 12px; padding: 8px 14px; }
  .tape .mark { font-size: var(--t-4); margin-right: 0; }
  .tape-item.compact-hide { display: none; }
  .tape-live span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cta, .scrub-knob { transition: none; }
}