/* Pennyproof: calm and precise, like a well-kept ledger. One accent for faults and scores. */
:root {
  /* Industrial dark, the only theme (Rahul, 12 Nov): near-black plane, steel panels, one safety-orange accent */
  --paper: #14171b; --ink: #f2efea; --muted: #b6bbc2; --rule: #4a525c; --card: #232930;
  --accent: #ff8248; --accent-soft: #46261a; --ok: #74cba0; --ok-soft: #173024;
  --sheet: #f1eee7; --sheet-ink: #16181b; --sheet-rule: #d6d1c6; /* printed paper: the receipt */
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --w: 1200px; --t: 260ms;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--paper) linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 100% 32px, var(--paper) linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 32px 100%; background-color: var(--paper); color: var(--ink); font: 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.mono, code { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 12px; top: 12px; background: var(--card); padding: 8px 12px; z-index: 10; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
[hidden] { display: none !important; }

.top { position: sticky; top: 0; z-index: 100; display: flex; justify-content: space-between; align-items: center;
       padding: 14px max(20px, calc((100vw - var(--w)) / 2)); background: var(--paper);
       backdrop-filter: blur(6px); border-bottom: 1px solid var(--rule); }
.brand { font-weight: 650; letter-spacing: -0.01em; text-decoration: none; display: inline-flex; align-items: center; }
.brand img, .foot-mark img { display: block; height: auto; }
.top nav { display: flex; gap: 20px; align-items: center; font-size: 15px; }
.top nav a { text-decoration: none; color: var(--muted); } .top nav a:hover { color: var(--ink); }
.top .nav-cta { color: var(--ink); border: 1px solid var(--rule); padding: 6px 12px; border-radius: 6px; }

.btn { display: inline-block; padding: 11px 18px; border-radius: 7px; border: 1px solid var(--rule); background: var(--card);
       text-decoration: none; font: 600 15px var(--sans); color: var(--ink); cursor: pointer; }
.btn.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn:hover { filter: brightness(1.06); }

.hero { max-width: var(--w); margin: 0 auto; padding: 96px 20px 72px; display: grid; gap: 48px; grid-template-columns: 1.1fr 1fr; align-items: center; }
h1 { font-size: clamp(36px, 5vw, 58px); line-height: 1.05; letter-spacing: -0.025em; margin: 0 0 20px; font-weight: 680; }
.sub { font-size: 19px; color: var(--muted); max-width: 34em; margin: 0 0 28px; }
.ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-visual { margin: 0; }
.ledger-line { background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 8px 20px; }
.ll-row { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px dashed var(--rule); }
.ll-row:last-child { border-bottom: 0; }
.ll-k { color: var(--muted); }
.ll-v { font-size: 20px; }
.ll-diff .ll-v { color: var(--accent); font-weight: 650; transition: color var(--t); }
.ll-diff.done .ll-v { color: var(--ok); }
.cap { color: var(--muted); font-size: 13px; margin-top: 10px; }

/* Beats: one per screen. Each beat's panel pins while its steps play (scroll progress, see site.js), then the
   next beat slides up over it. --n (steps) is set by site.js; --s is the scroll per step. */
.beats { --hdr: 57px; --s: 26vh; }
.beat { position: relative; height: calc(200vh + var(--n, 1) * var(--s)); }
.beat + .beat { margin-top: -100vh; }
.beat:last-child { height: calc(100vh + var(--n, 1) * var(--s)); } /* nothing slides over the last one: no hold */
.pin { position: sticky; top: var(--hdr); height: calc(100vh - var(--hdr)); background: var(--paper);
       border-top: 1px solid var(--rule); box-shadow: 0 -18px 40px -24px rgba(0, 0, 0, 0.18); overflow: hidden; }
.pin > .copy, .pin > .stage { max-width: var(--w); }
.pin { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 56px; align-items: center;
       padding: 0 max(20px, calc((100vw - var(--w)) / 2)); }
.copy > p, .copy > h2 { max-width: 30em; }
.kicker { font: 13px var(--mono); color: var(--accent); margin: 0 0 10px; letter-spacing: 0.02em; }
h2 { font-size: clamp(26px, 3vw, 38px); line-height: 1.12; letter-spacing: -0.018em; margin: 0 0 14px; font-weight: 650; }
.copy p { color: var(--muted); font-size: 17px; }
.stage { display: flex; flex-direction: column; justify-content: center; max-height: calc(100vh - var(--hdr) - 48px); }
.cap:empty { display: none; }

/* Beat backgrounds: a still from the same compute hall as the hero film, behind each beat's panel. A gradient keeps the
   copy side dark for contrast and lets the hall show toward the right; the panels on the right stay solid. Once a beat
   pins, its still eases in (a slow push-in); with reduced motion it simply sits still. Loaded only near the viewport. */
.has-bg .pin { isolation: isolate; }
.has-bg .pin::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--bg-img, none) center / cover no-repeat;
  filter: brightness(.62); transform: scale(1.08); transition: transform 1600ms var(--ease, ease); }
.has-bg .pin::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, var(--paper) 0%, color-mix(in srgb, var(--paper) 92%, transparent) 30%,
                                     color-mix(in srgb, var(--paper) 62%, transparent) 58%, color-mix(in srgb, var(--paper) 40%, transparent) 100%),
              linear-gradient(180deg, color-mix(in srgb, var(--paper) 55%, transparent) 0%, transparent 25%, transparent 75%, color-mix(in srgb, var(--paper) 70%, transparent) 100%); }
.has-bg.live .pin::before { transform: scale(1); }
@media (max-width: 900px) {
  .has-bg .pin { position: relative; }
  .has-bg .pin::after { background: linear-gradient(180deg, var(--paper) 0%, color-mix(in srgb, var(--paper) 90%, transparent) 40%,
                                                       color-mix(in srgb, var(--paper) 70%, transparent) 100%); }
}

/* Beat in focus at full strength: while the next beat slides over, the one underneath fades back toward the page. */
.pin > .copy, .pin > .stage { opacity: calc(1 - var(--cover, 0) * 0.9); }
.has-bg .pin::before { opacity: calc(1 - var(--cover, 0) * 0.85); }

/* Why now. Split into pieces that each do one job, revealed in order once the section arrives (.in):
   headline in two beats (the second gets an orange sweep) → the lead → the figures ($81.4B counts up from $53.7B) →
   the clock (a marker runs from 2026 to the pilot date and stamps "Fixed by law") → the relay (partners build, team
   runs, Pennyproof grades). The 2x2 reveals on its own: plain squares, then they dim, a dot travels to the top-right
   square, and it lights: the payoff. A faint grid and one orange glow give depth without a photo. Reduced motion: final
   state. Curves: --ease to settle, --pop for markers and stamps. */
.why { --e: cubic-bezier(.2, .7, .2, 1); --p: cubic-bezier(.2, .8, .2, 1.3);
       max-width: var(--w); margin: 0 auto; padding: 96px 20px 48px; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
       gap: 56px; align-items: center; position: relative; z-index: 1; isolation: isolate; }
.why::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; pointer-events: none;
  background: radial-gradient(520px 380px at 76% 42%, rgba(255, 130, 72, .10), transparent 70%),
              linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 40px 40px,
              linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 35%, transparent 85%);
          mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 35%, transparent 85%); }
.why h2 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.08; margin-bottom: 16px; }
.wl { display: block; }
.sweep { background: linear-gradient(var(--accent), var(--accent)) left 100% / 0 3px no-repeat; padding-bottom: 4px; transition: background-size 700ms var(--e) 1000ms; }
.why-lead { color: var(--muted); font-size: 18px; max-width: 32em; margin: 0 0 22px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 22px; }
.st { border-top: 2px solid var(--accent); padding-top: 10px; }
.stats dt { font: 600 30px var(--mono); letter-spacing: -.02em; white-space: nowrap; }
.stats dd { margin: 4px 0 0; font-size: 13px; color: var(--muted); line-height: 1.4; }
.clock { position: relative; margin: 34px 0 26px; padding-top: 6px; }
.clock-track { position: relative; height: 4px; border-radius: 2px; background: var(--rule); }
.clock-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 2px; background: var(--accent); transition: width 1100ms var(--e) 1500ms; }
.clock-dot { position: absolute; top: 50%; left: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--accent);
             box-shadow: 0 0 0 4px rgba(255, 130, 72, .25); transition: left 1100ms var(--e) 1500ms; }
.clock-ends { display: flex; justify-content: space-between; margin-top: 10px; font-size: 13px; color: var(--muted); }
.clock-ends span { display: grid; } .clock-ends span:last-child { text-align: right; }
.clock-ends b { font: 600 14px var(--mono); color: var(--ink); }
.clock-stamp { position: absolute; right: 0; top: -26px; font: 700 11px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--accent);
               border: 1.5px solid var(--accent); border-radius: 4px; padding: 2px 7px; transform: rotate(-4deg) scale(1.6); opacity: 0;
               transition: opacity 200ms var(--e) 2600ms, transform 380ms var(--p) 2600ms; }
.relay { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; font-size: 18px; }
.relay li { display: flex; align-items: center; gap: 12px; opacity: 0; transform: translateX(-12px); transition: opacity 360ms var(--e), transform 360ms var(--e); }
.relay li::before { content: ""; width: 18px; height: 2px; background: var(--rule); flex: none; }
.relay li:nth-child(1) { transition-delay: 2900ms; } .relay li:nth-child(2) { transition-delay: 3150ms; } .relay li:nth-child(3) { transition-delay: 3400ms; }
.relay li:last-child { color: var(--accent); } .relay li:last-child::before { background: var(--accent); width: 28px; }
.why-text .src { font: 12px var(--mono); color: var(--muted); opacity: .8; margin: 0; }
/* entrance of the text pieces */
.why-text .kicker, .wl, .why-lead, .st, .clock, .why-text .src { opacity: 0; transform: translateY(10px); transition: opacity 420ms var(--e), transform 420ms var(--e); }
.wl-2 { transition-delay: 380ms; } .why-lead { transition-delay: 650ms; } .st:nth-child(1) { transition-delay: 900ms; } .st:nth-child(2) { transition-delay: 1050ms; }
.clock { transition-delay: 1300ms; } .why-text .src { transition-delay: 3600ms; }
.why-text.in .kicker, .why-text.in .wl, .why-text.in .why-lead, .why-text.in .st, .why-text.in .clock, .why-text.in .relay li { opacity: 1; transform: none; }
.why-text.in .src { opacity: .8; transform: none; }
.why-text.in .sweep { background-size: 100% 3px; }
.why-text.in .clock-fill { width: 100%; } .why-text.in .clock-dot { left: 100%; }
.why-text.in .clock-stamp { opacity: 1; transform: rotate(-4deg) scale(1); }

/* the 2x2: squares in, then the dot crosses to the top-right square, which lights */
.quad { margin: 0; display: grid; grid-template-columns: 26px 1fr; grid-template-rows: 1fr auto; gap: 8px; }
.quad-y { grid-row: 1; display: flex; align-items: center; justify-content: center; }
.quad-y span { writing-mode: vertical-rl; transform: rotate(180deg); font: 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.quad-x { grid-column: 2; display: flex; justify-content: space-between; font: 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.quad-x span:last-child::after, .quad-y span::after { content: " \2192"; }
.quad-grid { grid-column: 2; position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; aspect-ratio: 1.25; }
.q { border: 1px solid var(--rule); border-radius: 10px; padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 6px; background: color-mix(in srgb, var(--card) 70%, transparent);
     opacity: 0; transform: scale(.96); transition: opacity 420ms var(--ease, ease), transform 420ms var(--ease, ease), border-color 500ms, background-color 500ms, box-shadow 700ms; }
.q b { font-size: 15px; } .q span { color: var(--muted); font-size: 14px; line-height: 1.4; }
.q-bl { transition-delay: 0ms; } .q-tl { transition-delay: 140ms; } .q-br { transition-delay: 280ms; } .q-tr { transition-delay: 420ms; }
.q-tr em { margin-top: auto; font: 600 12px var(--mono); font-style: normal; color: var(--accent); text-transform: uppercase; letter-spacing: .06em; opacity: 0; transition: opacity 400ms 2100ms; }
.q-tr em::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 8px; vertical-align: 1px; animation: pp-beacon 1.8s ease-in-out infinite; }
.quad-dot { position: absolute; left: 25%; top: 75%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--accent);
            box-shadow: 0 0 0 6px rgba(255, 130, 72, .22), 0 0 24px rgba(255, 130, 72, .7); opacity: 0; z-index: 2; pointer-events: none; }
.quad.in .q { opacity: 1; transform: none; }
.quad.in .q:not(.q-tr) { opacity: .5; transition-delay: 1100ms; }
.quad.in .q-tr { background: color-mix(in srgb, var(--accent) 14%, var(--card)); border-color: var(--accent);
                 box-shadow: 0 0 0 1px var(--accent), 0 18px 50px -20px rgba(255, 130, 72, .6); transition-delay: 420ms, 420ms, 1900ms, 1900ms, 1900ms; }
.quad.in .q-tr em { opacity: 1; }
.quad.in .quad-dot { animation: pp-cross 900ms var(--ease, ease) 1100ms both; }
@keyframes pp-cross { 0% { opacity: 0; left: 25%; top: 75%; } 15% { opacity: 1; } 85% { opacity: 1; left: 75%; top: 25%; transform: scale(1); }
                      100% { opacity: 0; left: 75%; top: 25%; transform: scale(2.4); } }
@keyframes pp-beacon { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.sets { max-width: var(--w); margin: 0 auto; padding: 48px 20px 96px; position: relative; z-index: 1; }
.sets h2 { max-width: 24em; }
.chain { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: 1fr 1.15fr 1.45fr 1.2fr 1fr; gap: 28px; position: relative; }
.ch { position: relative; border: 1px solid var(--rule); border-radius: 12px; padding: 16px 16px 18px; background: var(--card); display: flex; flex-direction: column; gap: 8px;
      opacity: 0; transform: translateX(-10px); transition: opacity 420ms var(--ease, ease), transform 420ms var(--ease, ease); transition-delay: calc(var(--k) * 260ms); }
.ch::after { content: ""; position: absolute; top: 50%; left: 100%; width: 28px; height: 2px; background: var(--accent); transform-origin: left; transform: scaleX(0);
             transition: transform 300ms var(--ease, ease); transition-delay: calc(var(--k) * 260ms + 300ms); }
.ch:last-child::after { display: none; }
.ch-tag { font: 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
.ch-big { font: 600 22px/1.15 var(--mono); letter-spacing: -.01em; }
.ch > span:last-child:not(.ch-tag) { color: var(--muted); font-size: 13px; }
.ch ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.ch ul li { padding-left: 14px; position: relative; } .ch ul li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; background: var(--rule); border-radius: 1px; }
.ch .verbs { display: flex; flex-wrap: wrap; gap: 6px; } .ch .verbs li { padding: 3px 9px; border: 1px solid var(--rule); border-radius: 999px; font: 12px var(--mono); }
.ch .verbs li::before { display: none; }
.ch-end { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--card)); }
.ch-end .ch-big { font-size: 26px; white-space: nowrap; }
.sets.in .ch { opacity: 1; transform: none; } .sets.in .ch::after { transform: scaleX(1); }
.sets-stake { margin: 26px 0 0; font-size: 17px; color: var(--ink); max-width: 46em; border-left: 3px solid var(--accent); padding-left: 14px;
              opacity: 0; transition: opacity 500ms var(--ease, ease) 1500ms; }
.sets.in .sets-stake { opacity: 1; }
@media (max-width: 900px) {
  .why { grid-template-columns: 1fr; padding: 64px 20px 24px; gap: 32px; }
  .quad-grid { aspect-ratio: auto; grid-template-rows: auto auto; } .q { min-height: 0; }
  .stats { grid-template-columns: 1fr; }
  .relay { font-size: 17px; }
  .chain { grid-template-columns: 1fr; gap: 22px; }
  .ch { transform: translateY(8px); }
  .ch::after { top: 100%; left: 24px; width: 2px; height: 22px; transform: scaleY(0); transform-origin: top; }
  .sets.in .ch::after { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) { .q, .ch, .ch::after, .sets-stake, .q-tr em { opacity: 1 !important; transform: none !important; } .q-tr em::before { animation: none; }
  .quad-dot { display: none; } }

/* The pilot, priced (Rahul, 12 Nov 2026): in the how-to-buy beat and beside the form, so nobody requests access blind. */
.pilot-card { margin-top: 20px; border: 1px solid var(--accent); border-radius: 12px; padding: 14px 16px; background: color-mix(in srgb, var(--accent) 10%, var(--card));
              display: grid; grid-template-columns: auto auto 1fr; column-gap: 10px; align-items: baseline; max-width: 30em; }
.pc-label { font: 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--accent); grid-column: 1 / -1; }
.pc-price { font: 600 28px var(--mono); letter-spacing: -.02em; }
.pc-note { color: var(--muted); font-size: 14px; }
.pilot-card p { grid-column: 1 / -1; margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.pilot-strip { margin: 26px 0 8px; border: 1px solid var(--rule); border-radius: 12px; padding: 16px 18px; background: var(--card); display: grid; grid-template-columns: auto 1fr; gap: 10px 28px; align-items: center; }
.pilot-strip .pc-label { display: block; } .pilot-strip .pc-price { font-size: 24px; }
.pilot-strip ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; font-size: 14px; }
.pilot-strip li::before { content: "\2713"; color: var(--accent); margin-right: 8px; font-weight: 700; }
@media (max-width: 900px) { .pilot-strip { grid-template-columns: 1fr; } .pilot-strip ul { grid-template-columns: 1fr; } }

/* Beat 6, the money beat: a leaderboard. One square for each task makes "0.96" legible as "wrong books on 4 of 12". */
.lb { display: grid; gap: 0; }
.lb-head, .lb-row { display: grid; grid-template-columns: 10.5em 1fr 4.4em 4.2em; column-gap: 16px; align-items: center; }
.lb-head { font: 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.lb-head span:nth-child(n+3), .lb-val, .lb-perf { text-align: right; }
.lb-perf { font: 500 15px var(--mono); color: var(--ink); opacity: .8; } .lb-perf.zero, .tr-perf.zero { color: var(--accent); opacity: 1; }
.lb-note { font-size: 12.5px; color: var(--muted); margin: 6px 0 0; max-width: 46em; }
.lb-row { padding: 11px 0 10px; border-bottom: 1px dashed var(--rule); row-gap: 4px; opacity: 0; transform: translateY(6px);
          transition: opacity var(--t) var(--ease, ease), transform var(--t) var(--ease, ease); transition-delay: calc(var(--r) * 90ms); }
.lb-row.on { opacity: 1; transform: none; }
.lb-name { font-weight: 600; font-size: 15px; }
.lb-val { font: 600 22px var(--mono); letter-spacing: -.02em; }
.lb-cells { display: flex; gap: 4px; flex-wrap: wrap; }
.lb-cells i, .lb-key i { display: inline-block; width: 14px; height: 14px; border-radius: 2px; }
.lb .ok { background: var(--ink); }
.lb .miss { background: var(--ink); }
.lb-row .lb-cells i { opacity: 0; transform: scale(.4); transition: opacity 220ms var(--ease, ease), transform 320ms var(--pop, ease); transition-delay: calc(var(--i) * 28ms + 120ms); }
.lb-row.on .lb-cells i { opacity: 1; transform: none; }
.lb-trap { grid-column: 2 / 5; font-size: 13px; color: var(--accent); opacity: 0; transition: opacity var(--t) var(--ease, ease); transition-delay: calc(var(--r) * 90ms); }
.lb-trap.on { opacity: 1; }
.lb-row:has(.miss) .lb-trap { color: var(--accent); } .lb-row:not(:has(.miss)) .lb-trap { color: var(--muted); }
.lb-key { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin: 14px 0 0; }
.lb-key span { display: inline-flex; align-items: center; gap: 7px; } .lb-key i { width: 10px; height: 10px; }
.lb .legend { margin-top: 6px; }
.lb-cta { justify-self: start; margin-top: 16px; opacity: 0; transform: translateY(6px); transition: opacity var(--t) var(--ease, ease), transform var(--t) var(--ease, ease); }
.lb-cta.on { opacity: 1; transform: none; }
@media (max-width: 900px) { .lb-head, .lb-row { grid-template-columns: 1fr auto auto; } .lb-head span:nth-child(2) { display: none; }
  .lb-cells { grid-column: 1 / -1; order: 3; } .lb-trap { grid-column: 1 / -1; order: 4; } .lb-cells i { width: 16px; height: 16px; } }
@media (prefers-reduced-motion: reduce) { .lb-row, .lb-row .lb-cells i, .lb-trap, .lb-cta { opacity: 1; transform: none; } }

/* The scoreboard sits on its own panel, like every other beat's visual, so it reads clearly over the background still */
#v-score, #v-buy { background: color-mix(in srgb, var(--card) 94%, transparent); border: 1px solid var(--rule); border-radius: 12px; padding: 22px 24px; }

.hero-points { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 0; margin: 0 0 26px; font: 13px var(--mono); color: var(--ink); }
.hero-points li { display: inline-flex; align-items: center; gap: 8px; }
.hero-points li::before { content: ""; width: 7px; height: 7px; background: var(--accent); border-radius: 1px; }

/* Trust: what it is, what you get, what we never take. A plain band right after the hero, before the beats. */
/* In plain terms: the three cards are the flow itself. From us → on your machines → with you, packets travel along the
   pipes (three runs, then rest), and a dashed return line is crossed out: nothing flows back. Reduced motion: still. */
.trust { --e: cubic-bezier(.2, .7, .2, 1); max-width: var(--w); margin: 0 auto; padding: 72px 20px 88px; position: relative; z-index: 1; }
.trust h2 { max-width: 22em; }
.flow1 { display: grid; grid-template-columns: 1fr 64px 1fr 64px 1fr; align-items: stretch; margin-top: 28px; }
.tcard { background: var(--card); border: 1px solid var(--rule); border-radius: 12px; padding: 20px 22px 22px;
         opacity: 0; transform: translateY(12px); transition: opacity 420ms var(--e), transform 420ms var(--e); transition-delay: calc(var(--c) * 220ms); }
.tcard h3 { margin: 8px 0 8px; font-size: 18px; }
.tcard p { margin: 0; color: var(--muted); font-size: 15px; }
.tstep { font: 600 11px var(--mono); color: var(--accent); letter-spacing: .1em; text-transform: uppercase; }
.tcard-end { border-color: color-mix(in srgb, var(--accent) 55%, var(--rule)); background: color-mix(in srgb, var(--accent) 8%, var(--card)); }
.pipe { position: relative; align-self: center; height: 2px; margin: 0 6px; background: var(--rule); overflow: visible; }
.pipe::after { content: ""; position: absolute; right: -2px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-top: 2px solid var(--rule); border-right: 2px solid var(--rule); transform: rotate(45deg); }
.pipe i { position: absolute; top: 50%; left: 0; width: 6px; height: 6px; margin-top: -3px; border-radius: 1px; background: var(--accent); opacity: 0; }
.trust.in .pipe i { animation: pp-packet 1400ms linear 3 both; }
.trust.in .pipe i:nth-child(2) { animation-delay: 450ms; } .trust.in .pipe i:nth-child(3) { animation-delay: 900ms; }
.trust.in .pipe[style*="--c:1"] i { animation-delay: 500ms; } .trust.in .pipe[style*="--c:1"] i:nth-child(2) { animation-delay: 950ms; } .trust.in .pipe[style*="--c:1"] i:nth-child(3) { animation-delay: 1400ms; }
.trust.in .pipe[style*="--c:3"] i { animation-delay: 950ms; } .trust.in .pipe[style*="--c:3"] i:nth-child(2) { animation-delay: 1400ms; } .trust.in .pipe[style*="--c:3"] i:nth-child(3) { animation-delay: 1850ms; }
@keyframes pp-packet { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 6px); opacity: 0; } }
.noreturn { display: flex; align-items: center; gap: 12px; margin: 22px 0 0; font: 600 14px var(--mono); color: var(--ink);
            opacity: 0; transition: opacity 500ms var(--e) 1500ms; }
.nr-line { flex: 1; max-width: 420px; height: 0; border-top: 2px dashed var(--rule); position: relative; }
.nr-line::before { content: "\2190"; position: absolute; left: -4px; top: -13px; color: var(--muted); font-size: 16px; }
.nr-x { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--accent); color: var(--accent); font-size: 15px; line-height: 1;
        transform: scale(0); transition: transform 380ms cubic-bezier(.2, .8, .2, 1.3) 1900ms; }
.trust.in .tcard { opacity: 1; transform: none; } .trust.in .noreturn { opacity: 1; } .trust.in .nr-x { transform: none; }
@media (max-width: 900px) { .flow1 { grid-template-columns: 1fr; } .pipe { width: 2px; height: 34px; margin: 4px auto; }
  .pipe::after { right: auto; top: auto; bottom: -2px; left: 50%; margin: 0 0 0 -4px; transform: rotate(135deg); }
  .pipe i { left: 50%; top: 0; margin: 0 0 0 -3px; } .trust.in .pipe i { animation-name: pp-packet-v; } .nr-line { max-width: 120px; } }
@keyframes pp-packet-v { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: calc(100% - 6px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tcard, .noreturn, .nr-x { opacity: 1 !important; transform: none !important; } .pipe i { display: none; } }
@media (max-width: 900px) { .trust { padding: 48px 20px 56px; } .trust-grid { grid-template-columns: 1fr; } }

/* Cards and records */
.card { background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 14px 16px; font-size: 14px; }
.card h4 { margin: 0 0 8px; font: 600 12px var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.hl { border-radius: 4px; padding: 0 4px; margin: 0 -4px; transition: background var(--t), color var(--t); }
.hl.on { background: var(--accent-soft); color: var(--accent); }
.stack { display: grid; gap: 0; perspective: 1400px; }
.stack .card { box-shadow: 0 18px 40px -26px rgba(0, 0, 0, 0.35); }
.stack .card:nth-child(1) { transform-origin: left; }
.stack .card:nth-child(2) { margin: -10px 0 0 28px; position: relative; z-index: 1; }
.stack .card:nth-child(3) { margin: -10px 0 0 56px; position: relative; z-index: 2; }
.fade { opacity: 0.25; transform: translateY(6px); transition: opacity var(--t), transform var(--t); }
.fade.on { opacity: 1; transform: none; }

.office { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.tbl { position: relative; background: var(--card); border: 1px solid var(--rule); border-radius: 8px; padding: 10px 12px; font-size: 13px; }
.tbl b { font: 600 13px var(--mono); display: block; }
.tbl span { color: var(--muted); font-size: 12px; }
.tbl i { display: block; height: 4px; margin-top: 8px; border-radius: 2px; background: var(--rule); position: relative; overflow: hidden; }
.tbl i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w, 30%); background: var(--muted); opacity: 0.55;
                transform: scaleX(0); transform-origin: left; transition: transform 700ms cubic-bezier(.2, .7, .2, 1); }
.tbl.on i::after { transform: scaleX(1); }
.office { background-image: linear-gradient(var(--rule) 1px, transparent 1px); background-size: 100% 28px; padding: 6px; border-radius: 12px; }
.marker { position: absolute; right: 8px; top: 8px; font: 11px var(--mono); color: var(--accent); background: var(--accent-soft);
          padding: 2px 6px; border-radius: 4px; opacity: 0; transform: translateY(-4px); transition: opacity var(--t), transform var(--t); }
.marker.on { opacity: 1; transform: none; }

.log { font: 13px/1.55 var(--mono); background: #0f1113; color: #e9e7e2; border: 1px solid #2a2e33; border-radius: 12px; padding: 0; overflow: hidden;
       box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.55); }
.log .bar-top { display: flex; gap: 6px; padding: 10px 14px; border-bottom: 1px solid #2a2e33; color: #9aa0a8; font-size: 12px; align-items: center; }
.log .bar-top b { width: 9px; height: 9px; border-radius: 50%; background: #2a2e33; display: inline-block; }
.log .bar-top span { margin-left: 8px; }
.log .lines { padding: 10px 14px 14px; }
.log .ln { display: grid; grid-template-columns: 1.6em 1fr; gap: 8px; padding: 5px 0; opacity: 0.12; transition: opacity var(--t); }
.log .ln.on { opacity: 1; }
.log .ln .n { color: #646a72; }
.log .ln .what { overflow-wrap: anywhere; }
.log .ln .what::before { content: "$ "; color: #ee7b4c; }
.log .ln .res { grid-column: 2; display: block; color: #8fd0b0; font-size: 12px; margin-top: -4px; }
.log .ln .typing::after { content: "▍"; color: #ee7b4c; animation: pp-blink 1s steps(1) infinite; }
@keyframes pp-blink { 50% { opacity: 0; } }

.scores { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--card); border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; }
.scores th, .scores td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.scores th { font: 600 12px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.scores td.s { font-family: var(--mono); text-align: right; white-space: nowrap; }
.scores tr.row { opacity: 0.18; transition: opacity var(--t); } .scores tr.row.on { opacity: 1; }
.pos { color: var(--ok); } .neg { color: var(--accent); }
.scores td.s span { display: inline-block; padding: 2px 8px; border: 2px solid currentColor; border-radius: 4px; font-weight: 700;
                    letter-spacing: .02em; transform: rotate(-3deg); } /* a rubber stamp's mark sits a little askew, and stays put */
.scores tr.row.on td.s span { animation: pp-stamp 380ms cubic-bezier(.3, 0, .2, 1) both; }
@keyframes pp-stamp { /* straight down onto the paper, a short press, then the ink rests. No spin, no bounce. */
  0%   { opacity: 0; transform: translateY(-22px) scale(1.25) rotate(-3deg); filter: drop-shadow(0 14px 10px rgba(0,0,0,.45)); }
  55%  { opacity: 1; transform: translateY(0) scale(.93, .9) rotate(-3deg); filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
  75%  { transform: translateY(0) scale(1.02) rotate(-3deg); filter: none; }
  100% { opacity: 1; transform: rotate(-3deg); filter: none; } }
.gate { margin-top: 10px; font: 13px var(--mono); padding: 10px 12px; border-radius: 8px; border: 1px dashed var(--rule); opacity: 0.18; transition: opacity var(--t); }
.gate.on { opacity: 1; border-style: solid; border-color: var(--ok); color: var(--ok); }

.receipt { background: var(--sheet); color: var(--sheet-ink); border: 1px solid var(--sheet-rule); border-radius: 10px 10px 0 0; font: 13px/1.5 var(--mono); position: relative;
           box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.4); margin-bottom: 10px; }
.receipt::after { content: ""; position: absolute; left: -1px; right: -1px; bottom: -9px; height: 10px; background: var(--sheet);
                  clip-path: polygon(0 0, 100% 0, 100% 40%, 97% 100%, 94% 40%, 91% 100%, 88% 40%, 85% 100%, 82% 40%, 79% 100%, 76% 40%, 73% 100%, 70% 40%, 67% 100%, 64% 40%, 61% 100%, 58% 40%, 55% 100%, 52% 40%, 49% 100%, 46% 40%, 43% 100%, 40% 40%, 37% 100%, 34% 40%, 31% 100%, 28% 40%, 25% 100%, 22% 40%, 19% 100%, 16% 40%, 13% 100%, 10% 40%, 7% 100%, 4% 40%, 1% 100%, 0 40%); }
.receipt { --muted: #5d636b; --rule: var(--sheet-rule); } /* gray text that reads on paper */
.receipt header { padding: 12px 16px; border-bottom: 1px dashed var(--sheet-rule); font: 600 13px var(--mono); display: flex; justify-content: space-between; }
.receipt .sec { padding: 0 16px; max-height: 0; overflow: hidden; transition: max-height 420ms ease, padding var(--t); border-bottom: 1px solid transparent; }
.receipt .sec.on { max-height: 260px; padding: 12px 16px; border-bottom-color: var(--rule); }
.receipt .sec h4 { margin: 0 0 6px; font: 600 12px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.receipt ul { margin: 0; padding-left: 18px; } .receipt li { margin: 2px 0; }

.bars { display: grid; gap: 14px; }
.bar { display: grid; grid-template-columns: 9.5em 1fr 3.4em; gap: 12px; align-items: center; font-size: 14px; }
.bar .track { display: block; height: 12px; background: var(--rule); border-radius: 6px; overflow: hidden; }
.bar .fill { display: block; height: 100%; width: 0; background: var(--ink); border-radius: 6px; transition: width 700ms ease; }
.bar .val { font-family: var(--mono); text-align: right; }
.trap { font-size: 13px; color: var(--accent); grid-column: 2 / 4; margin-top: -8px; opacity: 0; transition: opacity var(--t); }
.trap.on { opacity: 1; }
.legend { font-size: 13px; color: var(--muted); margin-top: 14px; }

.cards3 { display: grid; gap: 12px; }
.pcard { background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 16px 18px; }
.pcard h3 { margin: 0 0 4px; font-size: 16px; } .pcard p { margin: 0; color: var(--muted); font-size: 15px; }
.dia { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13px; }
.dia .box { border: 1px solid var(--rule); border-radius: 6px; padding: 4px 8px; }
.dia .arr { color: var(--muted); }

/* The form: its own full-width sand panel with dark type, so it reads as the place you act, not another beat. The
   palette tokens flip inside it, so labels, fields and the button all follow. Sand, not white: no glare after the dark. */
.close { --paper: #ece4d6; --ink: #1d1a16; --muted: #4f473d; --rule: #a89a82; --card: #ece4d6; --accent: #b4531f;
         color: var(--ink); max-width: 860px; margin: 0 auto; padding: 112px 20px 104px; position: relative; isolation: isolate; }
.close::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; background: #d8ccb6; }
.close input:focus, .close textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(180, 83, 31, .18); }
.close a { color: var(--ink); } .close > p { color: var(--muted); }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
.field { display: grid; gap: 6px; } .wide { grid-column: 1 / -1; }
label { font-size: 14px; font-weight: 600; }
input, textarea { font: 16px var(--sans); color: var(--ink); background: var(--card); border: 1px solid var(--rule); border-radius: 7px; padding: 10px 12px; width: 100%; }
input:focus, textarea:focus { border-color: var(--ink); outline: none; }
.hp { position: absolute; left: -9999px; }
.privacy { font-size: 13px; color: var(--muted); margin: 0; }
.form-foot { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.form-status { margin: 0; font-size: 14px; }
/* How to buy: the menu as chips (the pilot first and required), the steps as a numbered track */
.menu { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 18px 0 0; }
.menu li { font-size: 13px; border: 1px solid var(--rule); border-radius: 999px; padding: 5px 12px; background: var(--card); }
.menu li.req { border-color: var(--ink); font-weight: 600; }
.buy { list-style: none; counter-reset: buy; margin: 0; padding: 0; display: grid; gap: 0; }
.buy li { counter-increment: buy; display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; padding: 12px 0; border-bottom: 1px dashed var(--rule); position: relative; }
.buy li:last-child { border-bottom: 0; }
.buy li::before { content: counter(buy); grid-row: 1 / span 2; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--ink);
                  display: grid; place-items: center; font: 600 13px var(--mono); background: var(--card); }
.buy li:first-child::before { background: var(--ink); color: var(--paper); }
.buy b { font-size: 16px; } .buy span { color: var(--muted); font-size: 14px; }

/* Footer: a dark plane. Desktop: the logo sits level with the © line, the email below it; then one note that every
   record shown is synthetic. */
.foot { background: #0f1113; color: #ece9e3; border-top: 1px solid rgba(236, 233, 227, 0.1); }
.foot-in { max-width: var(--w); margin: 0 auto; padding: 56px 20px 40px; display: grid; grid-template-columns: 1fr auto;
           align-items: center; gap: 14px 48px; }
.foot-mark img { display: block; }
.foot-mail { color: #ee7b4c; font-weight: 600; font-size: 15px; text-decoration: underline; text-decoration-color: rgba(238, 123, 76, 0.4); text-underline-offset: 3px; justify-self: start; }
.foot-mail:hover { text-decoration-color: #ee7b4c; }
.foot-addr { grid-column: 1; margin-top: -6px; font-style: normal; font-size: 13px; color: rgba(236, 233, 227, 0.68); }
.foot-legal { margin: 0; font-size: 13px; color: rgba(236, 233, 227, 0.68); text-align: right; }
.foot-place { white-space: nowrap; margin-left: 8px; }
.foot-place .star { color: #ee7b4c; margin-right: 4px; }
.foot-link { color: inherit; margin-left: 14px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(236, 233, 227, 0.35); }
.foot-link:hover { color: #fff; }
.foot-note { grid-column: 1 / -1; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid rgba(236, 233, 227, 0.1); font-size: 12px; color: rgba(236, 233, 227, 0.68); }
@media (max-width: 900px) { .foot-in { grid-template-columns: 1fr; padding: 44px 20px 32px; gap: 10px; } .foot-legal { text-align: left; }
  .foot-mail, .foot-addr { order: 1; } .foot-addr { margin-top: -4px; } .foot-mark { order: 0; } .foot-c { order: 2; margin-top: 12px; } .foot-dba { order: 3; } .foot-note { order: 4; } }

/* Footer grid: a canvas (footer-grid.js) where lines draw in, cross into squares and erase. Behind the text. */
.foot { position: relative; overflow: hidden; isolation: isolate; }
.foot-grid { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 80% 95% at 50% 45%, #000 40%, transparent 92%);
          mask-image: radial-gradient(ellipse 80% 95% at 50% 45%, #000 40%, transparent 92%); }

/* Phone and narrow tablets: no pinning or stacking; each beat is text, then visual, and plays once on arrival */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding: 56px 20px 48px; gap: 32px; }
  .beat, .beat:last-child { height: auto; }   /* :last-child too, or the desktop scroll room under beat 8 stays as a gap */
  .beat + .beat { margin-top: 0; }
  .pin { position: static; height: auto; display: block; padding: 56px 20px 48px; box-shadow: none; overflow: visible; }
  .stage { max-height: none; padding-top: 16px; }
  .stack .card:nth-child(2), .stack .card:nth-child(3) { margin-left: 12px; }
  .office { grid-template-columns: 1fr 1fr; }
  .bar { grid-template-columns: 7.5em 1fr 3em; }
  .form { grid-template-columns: 1fr; }
}

/* ══ Motion: the cascade, the beats and the payoff (house motion grammar, 2026-11-12) ══════════════
   Appended to the existing site.css; changes no color, font or layout. Every rule keys off the classes site.js
   already toggles (.on, .done, .fill's width), so the scroll steps are unchanged; what changes is how each step lands.
   Rules: one settle curve and one pop curve; a step's items arrive in a cascade (index × 80ms), never all at once;
   delays apply only on the way in (scrolling back is instant); each beat ends on a payoff (a stamp, a settle);
   reduced motion keeps the existing kill-switch above, so every visual shows its final state. */
:root {
  --ease: cubic-bezier(.2, .7, .2, 1);        /* settle: arrivals, fills, dims */
  --pop: cubic-bezier(.2, .8, .2, 1.3);       /* pop: small markers and stamps, a touch of overshoot */
  --gap: 80ms;                                /* the cascade step */
}

/* 1. Pending items wait dimmed and slightly low; arriving items rise into place on the settle curve. */
.fade, .log .ln, .scores tr.row, .gate { transition: opacity var(--t) var(--ease), transform var(--t) var(--ease),
  border-color var(--t) var(--ease), color var(--t) var(--ease), background-color var(--t) var(--ease); }
.log .ln { transform: translateX(-6px); }
.log .ln.on { transform: none; }
.scores tr.row { transform: translateY(6px); }
.scores tr.row.on { transform: none; }

/* 2. The cascade: siblings that turn on in the same step arrive one after another, on the way in only. */
.stack > .on:nth-child(2), .office > .on:nth-child(2) { transition-delay: calc(1 * var(--gap)); }
.stack > .on:nth-child(3), .office > .on:nth-child(3) { transition-delay: calc(2 * var(--gap)); }
.office > .on:nth-child(4) { transition-delay: calc(3 * var(--gap)); }
.office > .on:nth-child(5) { transition-delay: calc(4 * var(--gap)); }
.office > .on:nth-child(6) { transition-delay: calc(5 * var(--gap)); }
.office > .on:nth-child(7) { transition-delay: calc(6 * var(--gap)); }
.office > .on:nth-child(8) { transition-delay: calc(7 * var(--gap)); }
.receipt .sec.on li { animation: pp-rise 360ms var(--ease) both; }
.receipt .sec.on li:nth-child(2) { animation-delay: calc(1 * var(--gap)); }
.receipt .sec.on li:nth-child(3) { animation-delay: calc(2 * var(--gap)); }
.receipt .sec.on li:nth-child(4) { animation-delay: calc(3 * var(--gap)); }

/* 3. Faults are marked like a highlighter pen: the tint sweeps left to right, then the text takes the accent. */
.hl { background-image: linear-gradient(var(--accent-soft), var(--accent-soft)); background-repeat: no-repeat;
      background-size: 0% 100%; background-position: 0 0;
      transition: background-size 420ms var(--ease), color var(--t) var(--ease) 180ms; }
.hl.on { background-color: transparent; background-image: linear-gradient(var(--accent-soft), var(--accent-soft));
                  background-repeat: no-repeat; background-size: 100% 100%; }

/* 4. Markers and the gate pop, the one small overshoot in the system. */
.marker { transform: translateY(-4px) scale(.9); transition: opacity var(--t) var(--ease), transform 380ms var(--pop); }
.marker.on { transform: none; }
.gate { transform: scale(.98); }
.gate.on { transform: none; transition: opacity var(--t) var(--ease), transform 380ms var(--pop), border-color var(--t) var(--ease), color var(--t) var(--ease); }

/* 5. The newest line of the agent's log carries a cursor rule, so the eye follows the agent, not the list. */
.log .ln { box-shadow: inset 2px 0 0 transparent; transition-property: opacity, transform, box-shadow; }
.log .ln.on:not(:has(~ .ln.on)) { box-shadow: inset 2px 0 0 var(--ink); }

/* 6. A score row that loses money flashes its tint once as it lands. */
.scores tr.row.on td.neg { animation: pp-flash 900ms var(--ease) 120ms both; }

/* 7. The scoreboard fills one model after another, and each trap note lands after its bar. */
.bar .fill { transition: width 700ms var(--ease); }
.bar:nth-child(2) .fill { transition-delay: calc(1.5 * var(--gap)); }
.bar:nth-child(3) .fill { transition-delay: calc(3 * var(--gap)); }
.bar:nth-child(4) .fill { transition-delay: calc(4.5 * var(--gap)); }
.bar:nth-child(5) .fill { transition-delay: calc(6 * var(--gap)); }
.bar:nth-child(6) .fill { transition-delay: calc(7.5 * var(--gap)); }
.trap.on { transition-delay: 760ms; }

/* 8. The hero's payoff: when the difference reaches $0.00 the row settles with one soft pulse. */
.ll-diff.done { animation: pp-settle 900ms var(--ease) both; }

@keyframes pp-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pp-flash { 0% { background: transparent; } 30% { background: var(--accent-soft); } 100% { background: transparent; } }
@keyframes pp-settle { 0% { transform: scale(1); } 35% { transform: scale(1.015); } 100% { transform: scale(1); } }

/* ══ Hero: the background film and the environment loop (2026-11-12) ══════════
   The film is atmosphere (decoration is allowed); the wiring diagram is the explanation, and every wire maps to a real
   step of an episode. Rust appears only when a packet carries a fault. Reduced motion: poster only, wires still. */
.hero { position: relative; isolation: isolate; }
.hero-bg { position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); overflow: hidden;
           background: var(--paper) center / cover no-repeat; background-image: url("/assets/media/hero-poster.jpg"); }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The scrim: paper over the film, densest behind the copy and the panel, so text keeps its contrast on every frame. */
.hero-scrim { position: absolute; inset: 0;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--paper) 90%, transparent) 0%, color-mix(in srgb, var(--paper) 88%, transparent) 46%,
                    color-mix(in srgb, var(--paper) 45%, transparent) 72%, color-mix(in srgb, var(--paper) 62%, transparent) 100%),
    linear-gradient(0deg, var(--paper) 0%, transparent 18%); }
/* Over the film the subhead takes a deeper gray than body muted text, and the caption sits on its own paper plate:
   both measured on every frame of the loop (see the hand-off note). */
.hero .sub { color: color-mix(in srgb, var(--ink) 72%, var(--muted)); }
.hero .cap { display: inline-block; background: color-mix(in srgb, var(--paper) 92%, transparent); padding: 4px 8px; border-radius: 3px; }
@media all {
  .hero .sub { color: var(--muted); }
  .hero-bg { filter: brightness(.68); } /* the rendered hall: dimmed for the copy, colour kept so the fault lights stay orange */
  .hero-scrim { background:
    linear-gradient(90deg, color-mix(in srgb, var(--paper) 92%, transparent) 0%, color-mix(in srgb, var(--paper) 84%, transparent) 46%,
                    color-mix(in srgb, var(--paper) 40%, transparent) 72%, color-mix(in srgb, var(--paper) 55%, transparent) 100%),
    linear-gradient(0deg, var(--paper) 0%, transparent 18%); }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* The panel: modules on a faint engineering grid, wired with hairlines. */
.flow { position: relative; display: grid; gap: 44px; padding: 22px 34px 4px 4px;
        background-image: linear-gradient(color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px),
                          linear-gradient(90deg, color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px);
        background-size: 22px 22px; background-position: -1px -1px; }
.flow-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.flow > :not(svg) { position: relative; z-index: 1; }
.fn-envs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.fn { display: grid; gap: 2px; padding: 9px 12px 10px; border: 1px solid color-mix(in srgb, var(--ink) 26%, transparent); border-radius: 3px;
      background: color-mix(in srgb, var(--card) 88%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
      transition: border-color 260ms var(--ease, ease), box-shadow 260ms var(--ease, ease); }
/* corner ticks, the registration marks of a panel */
.fn::before, .fn::after { content: ""; position: absolute; width: 7px; height: 7px; border: 0 solid var(--ink); }
.fn::before { left: -1px; top: -1px; border-left-width: 2px; border-top-width: 2px; }
.fn::after { right: -1px; bottom: -1px; border-right-width: 2px; border-bottom-width: 2px; }
.fn-tag { font: 600 10.5px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.fn-name { font-weight: 650; font-size: 15px; line-height: 1.25; }
.fn-agent, .fn-grader { justify-self: center; min-width: 44%; text-align: center; }
/* the grader flashes once when it catches a wrong call (every third episode), then settles */
@keyframes pp-catch { 0% { border-color: color-mix(in srgb, var(--ink) 26%, transparent); box-shadow: 0 0 0 0 rgba(255, 130, 72, 0); }
  22% { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), 0 0 22px rgba(255, 130, 72, .45); }
  100% { border-color: color-mix(in srgb, var(--ink) 26%, transparent); box-shadow: 0 0 0 0 rgba(255, 130, 72, 0); } }
.flow.caught .fn-grader { animation: pp-catch 1100ms var(--ease) both; }
.flow .ledger-line { margin-top: 0; }
.wire { fill: none; stroke: color-mix(in srgb, var(--ink) 38%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.wire-loop { stroke-dasharray: 3 4; stroke: color-mix(in srgb, var(--ink) 30%, transparent); }
.port { fill: var(--paper); stroke: color-mix(in srgb, var(--ink) 55%, transparent); stroke-width: 1; }
.pkt { fill: var(--ink); }
.pkt-fault { fill: var(--accent); }
.wire-label { font: 600 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; fill: var(--muted);
              paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }
@media (max-width: 900px) {
  .flow { gap: 36px; padding-right: 30px; }
  .fn { padding: 8px 9px 9px; }
  .fn-name { font-size: 13.5px; }
  .hero-scrim { background: linear-gradient(180deg, color-mix(in srgb, var(--paper) 88%, transparent) 0%, color-mix(in srgb, var(--paper) 88%, transparent) 30%,
                                color-mix(in srgb, var(--paper) 72%, transparent) 40%, color-mix(in srgb, var(--paper) 80%, transparent) 100%); }
}
@media (max-width: 900px) {
  .hero-scrim { background: linear-gradient(0deg, color-mix(in srgb, var(--paper) 92%, transparent), color-mix(in srgb, var(--paper) 86%, transparent)); }
}

/* the film is 100vw wide; clip it so a classic scrollbar never causes sideways scroll */
body { overflow-x: clip; }

/* Scoreboard teaser under the hero (13 Nov): squares cascade in neutral, misses turn orange, then the headline underlines */
.tease { max-width: var(--w); margin: 0 auto; padding: 40px 20px 56px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 48px; align-items: center; position: relative; z-index: 1; border-top: 1px solid var(--rule); }
.tease h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.15; margin: 0 0 12px; }
.tease-text p { color: var(--muted); margin: 0 0 18px; max-width: 30em; }
.tease-sweep { background: linear-gradient(var(--accent), var(--accent)) left 100% / 0 3px no-repeat; padding-bottom: 3px;
  transition: background-size 600ms var(--ease) calc(var(--n, 70) * 14ms + 900ms); }
.tease.in .tease-sweep { background-size: 100% 3px; }
.tease-link { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 2px; }
.tease-link:hover { color: var(--accent); }
.tease-link span { display: inline-block; transition: transform var(--t) var(--ease); } .tease-link:hover span { transform: translateY(3px); }
.tease-board { background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 14px 18px; }
.tr { display: grid; grid-template-columns: 9.5em 1fr 68px 68px; gap: 12px; align-items: center; padding: 7px 0; border-bottom: 1px dashed var(--rule); }
.tr:last-child { border-bottom: 0; }
.tr-head { font: 10.5px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 0 0 8px; border-bottom: 1px solid var(--rule); }
.tr-head span:nth-child(n+3), .tr-perf { text-align: right; }
.tr-perf { font: 500 14px var(--mono); opacity: 0; transition: opacity 300ms var(--ease) calc(var(--r) * 60ms + 400ms); }
.tease.in .tr-perf { opacity: .8; } .tease.in .tr-perf.zero { opacity: 1; }
.tr-name { font-size: 14px; font-weight: 600; white-space: nowrap; }
.tr-val { font: 600 16px var(--mono); text-align: right; opacity: 0; transition: opacity 300ms var(--ease) calc(var(--r) * 60ms + 400ms); }
.tr-cells { display: flex; gap: 3px; }
.tr-cells i { width: 12px; height: 12px; border-radius: 2px; background: var(--ink); opacity: 0; transform: scale(.4);
  transition: opacity 200ms var(--ease) calc(var(--i) * 14ms), transform 300ms var(--pop) calc(var(--i) * 14ms),
              background-color 260ms var(--ease) calc(var(--n, 70) * 14ms + 300ms + var(--r) * 70ms),
              box-shadow 260ms var(--ease) calc(var(--n, 70) * 14ms + 300ms + var(--r) * 70ms); }
.tease.in .tr-cells i { opacity: 1; transform: none; }
.tease.in .tr-val { opacity: 1; }
@media (max-width: 900px) {
  .tease { grid-template-columns: 1fr; gap: 24px; padding: 32px 20px 40px; }
  .tr { grid-template-columns: 1fr auto auto; row-gap: 6px; } .tr-cells { grid-column: 1 / -1; order: 3; }
  .tr-head span:nth-child(2) { display: none; }
  .tr-cells i { width: 14px; height: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .tr-cells i, .tr-val, .tease-sweep { transition: none !important; }
  .tr-cells i, .tr-val, .tr-perf { opacity: 1; transform: none; }
  .tease-sweep { background-size: 100% 3px; }
}
/* Header logo matches the footer's size (13 Nov); on small phones the button tightens so the two never touch */
@media (max-width: 420px) { .top .nav-cta { font-size: 14px; padding: 6px 10px; } }
@media (max-width: 360px) { .top .brand img { width: 118px; } .top .nav-cta { font-size: 13px; padding: 5px 8px; white-space: nowrap; } }

/* Header CTA pops (13 Nov, Rahul): the site's orange, dark type for contrast, rounder corners (not a pill) */
.top .nav-cta { background: var(--accent); color: #16181b; border-color: var(--accent); border-radius: 10px; font-weight: 600;
  padding: 8px 16px; transition: background-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease); }
.top .nav-cta:hover { background: #ff9562; color: #16181b; box-shadow: 0 0 18px rgba(255, 130, 72, .35); transform: translateY(-1px); }
@media (max-width: 420px) { .top .nav-cta { font-size: 13.5px; padding: 7px 10px; } }
@media (max-width: 360px) { .top .brand img { width: 106px; } .top .nav-cta { font-size: 12.5px; padding: 6px 8px; } }
/* The hero's "Request Demo Access" matches the header button (13 Nov, Rahul) */
.btn.cta { background: var(--accent); color: #16181b; border-color: var(--accent); border-radius: 10px; font-weight: 600;
  transition: background-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease); }
.btn.cta:hover { background: #ff9562; color: #16181b; box-shadow: 0 0 18px rgba(255, 130, 72, .35); transform: translateY(-1px); filter: none; }

/* Task bars (13 Nov, Rahul: make the contrast clear). Each bar is one task, white up to the task's score; an orange cap
   is the share it got wrong (a zero is all orange). Perfect bars carry a still, soft glow. The cap lands after the bars
   cascade in (the payoff); reduced motion shows everything at once. */
.lb-cells, .tr-cells { align-items: flex-end; }
.lb-cells i, .tr-cells i, .lb-key i { position: relative; background: var(--ink); border-radius: 2px; }
.lb-cells i { width: 10px; height: 24px; } .tr-cells i { width: 9px; height: 19px; } .lb-key i { width: 7px; height: 14px; }
.lb-cells i.miss::before, .tr-cells i.miss::before, .lb-key i.miss::before { content: ""; position: absolute; left: 0; right: 0;
  top: 0; height: calc((1 - var(--s, 0)) * 100%); background: var(--accent); border-radius: 2px 2px 0 0; }
.lb-cells i.miss::before { opacity: 0; transition: opacity 260ms var(--ease) calc(var(--i) * 28ms + 420ms); }
.lb-row.on .lb-cells i.miss::before { opacity: 1; }
.tr-cells i.miss::before { opacity: 0; transition: opacity 260ms var(--ease) calc(var(--n, 70) * 14ms + 300ms + var(--r) * 70ms); }
.tease.in .tr-cells i.miss::before { opacity: 1; }
.lb-cells i.ok::after, .tr-cells i.ok::after, .lb-key i.ok::after { content: ""; position: absolute; inset: -2px; border-radius: 4px;
  pointer-events: none; box-shadow: 0 0 9px 1px rgba(242, 239, 234, .45); }
.lb-cells i.ok::after { opacity: 0; transition: opacity 400ms var(--ease) calc(var(--i) * 28ms + 500ms); } .lb-row.on .lb-cells i.ok::after { opacity: 1; }
.tr-cells i.ok::after { opacity: 0; transition: opacity 400ms var(--ease) calc(var(--n, 70) * 14ms + 400ms); } .tease.in .tr-cells i.ok::after { opacity: 1; }
@media (max-width: 900px) { .lb-cells i { width: 12px; height: 26px; } .tr-cells i { width: 11px; height: 22px; } }
@media (prefers-reduced-motion: reduce) {
  .lb-cells i::before, .lb-cells i::after, .tr-cells i::before, .tr-cells i::after { transition: none !important; opacity: 1 !important; }
}

/* Balanced columns (13 Nov, Rahul: the two sides of a section must match in height, always). Wide screens only.
   Why Now: the 2x2 stretches to the text column's height. Beat 6: the copy spans the scoreboard's height, headline
   level with the table's top and the reading key level with its bottom. tests/test_site.py guards both. */
.read-key { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--rule); max-width: 30em; }
.read-key .lb-key { margin: 0; } .read-key .lb-note { margin: 8px 0 0; font-size: 13.5px; }
@media (min-width: 901px) {
  .why { align-items: stretch; }
  .quad { grid-template-rows: 1fr auto; }
  .quad-grid { aspect-ratio: auto; min-height: 100%; }
  #scoreboard .pin { align-items: stretch; align-content: center; }
  #scoreboard .pin > .copy { display: flex; flex-direction: column; justify-content: flex-start; }
  #scoreboard .pin > .copy > .read-key { margin-top: auto; }
  #scoreboard .stage { justify-content: flex-start; }
}
@media (max-width: 900px) { .read-key { margin: 18px 0 22px; } .read-key .lb-key { gap: 6px 18px; } .read-key .lb-key span { font-size: 13px; } }
.read-key p.lb-key { font-size: 13px; color: var(--muted); }
/* Short laptop screens (768–860px tall) with seven scoreboard rows: tighter rows so the board, its caption and the
   button fit inside the pinned panel (measured at 1366x768, 13 Nov). */
@media (min-width: 901px) and (max-height: 860px) {
  .lb-row { padding: 7px 0 6px; row-gap: 2px; } .lb-cells i { height: 20px; } .lb-trap { font-size: 12.5px; }
  .lb-head { padding-bottom: 6px; } .lb .legend { margin-top: 4px; font-size: 12.5px; } .lb-cta { margin-top: 10px; }
}
/* Teaser: same balance rule. The text column spans the board, the link level with its bottom (wide screens). */
@media (min-width: 901px) {
  .tease { align-items: stretch; }
  .tease-text { display: flex; flex-direction: column; }
  .tease-text .tease-link { margin-top: auto; align-self: flex-start; }
}

/* Merged fix list (13 Nov, from an outside review, Rahul's go). Zero-score rule in the hero; Why Now as two
   balanced columns (2x2 removed); a plain-HTML scoreboard for no-JS readers; failure counts lead, averages follow;
   shorter scroll per beat (page about 30% shorter). */
.hero-zero { font: 600 15px var(--mono); color: var(--ink); border-left: 3px solid var(--accent); padding: 2px 0 2px 12px; margin: 0 0 20px; max-width: 34em; }
.why-text { display: grid; gap: 56px; }
@media (min-width: 901px) {
  .why { grid-template-columns: 1fr; }
  .why-text { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .why-b { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }
}
@media (max-width: 900px) { .why-text { gap: 28px; } }
.lb-static { margin: 0; padding: 18px 20px 18px 38px; background: var(--card); border: 1px solid var(--rule); border-radius: 12px; font-size: 14px; color: var(--ink); }
.lb-static li { margin: 6px 0; } .lb-static + .legend { margin-top: 8px; }
.lb-trap { color: var(--ink) !important; font-size: 13.5px; opacity: .92; }
.lb-row:has(.miss) .lb-trap::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 8px; vertical-align: middle; }
.lb-perf { font: 600 16px var(--mono); opacity: 1; }
.lb-val { font: 500 16px var(--mono); color: var(--muted); }
.tr-val { font: 500 14px var(--mono); color: var(--muted); } .tr-perf { font-weight: 600; }
/* Wide screens only: on phones and tablets (900px and under) beats stack normally, with no overlap and no pinning
   (a 13 Nov regression applied the overlap to phones too; test_beats_overlap_only_on_wide_screens guards it). */
@media (min-width: 901px) {
  .beats { --s: 13vh; }
  .beat { height: calc(184vh + var(--n, 1) * var(--s)); } /* the next beat arrives just after the last step */
  .beat + .beat { margin-top: -100vh; }
  .beat:last-child { height: calc(100vh + var(--n, 1) * var(--s)); }
}
/* The scoreboard is the payoff: it holds its finished state for a third of a screen before the next beat arrives. */
@media (min-width: 901px) { #scoreboard.beat { height: calc(214vh + var(--n, 1) * var(--s)); } }

/* Phones and tablets: no backdrop blur while scrolling (costly on mobile GPUs; the header is solid anyway). */
@media (max-width: 900px) { .top { backdrop-filter: none; -webkit-backdrop-filter: none; } }
@media (max-width: 900px) { .tcard { transition-delay: calc(var(--c) * 90ms); } }   /* stacked cards: a quick cascade */
html { overflow-x: clip; }   /* full-bleed section backgrounds (50vw maths) must never make the page scroll sideways on a phone */

.field select { font: 16px var(--sans); color: var(--ink); background: var(--card); border: 1px solid var(--rule); border-radius: 7px; padding: 10px 12px; width: 100%; }
.field .hint { display: block; font-size: 12.5px; color: var(--muted); margin-top: 6px; }

/* Footer with the thesis and the Environments column (13 Nov 2026): identity | environments | legal; one column on phones */
.foot-in { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: start; gap: 18px 48px; }
.foot-thesis { grid-column: 1 / -1; margin: 0 0 18px; padding-bottom: 22px; border-bottom: 1px solid rgba(236, 233, 227, 0.1);
  font-size: 19px; line-height: 1.4; color: #ece9e3; max-width: 46em; }
.foot-id { display: grid; gap: 10px; align-content: start; } .foot-id .foot-addr { grid-column: auto; margin-top: 0; }
.foot-h { font: 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: rgba(236, 233, 227, 0.6); margin: 0 0 10px; }
.foot-envs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 14px; color: #ece9e3; }
.foot-envs li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.foot-envs a { color: #ece9e3; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(236, 233, 227, 0.35); }
.tag { font: 10.5px var(--mono); text-transform: uppercase; letter-spacing: .06em; padding: 1px 6px; border-radius: 4px;
  border: 1px solid rgba(236, 233, 227, 0.25); color: rgba(236, 233, 227, 0.7); }
.tag-live { border-color: #74cba0; color: #74cba0; }
.foot-more { display: inline-block; margin-top: 12px; font-size: 13px; color: #ee7b4c; }
.foot-in .foot-legal { text-align: right; } .foot-legal .foot-link:first-of-type { margin-left: 10px; }
@media (max-width: 900px) {
  .foot-in { grid-template-columns: 1fr; gap: 22px; }
  .foot-thesis { font-size: 17px; margin: 0; padding-bottom: 18px; }
  .foot-in .foot-legal { text-align: left; } .foot-envs, .foot-id, .foot-legal { order: 0; }
}

/* Secondary pages (/environments, /privacy): the site's width (--w) and the main page's background language: the 40px
   grid, an orange glow, and a faded compute-hall still behind the opening band (Rahul, 13 Nov 2026). */
.doc { max-width: var(--w); margin: 0 auto; padding: 72px 20px 104px; position: relative; isolation: isolate; }
.doc::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -2; pointer-events: none;
  background: radial-gradient(760px 460px at 82% 6%, rgba(255, 130, 72, .14), transparent 70%),
              radial-gradient(640px 520px at 8% 62%, rgba(116, 203, 160, .06), transparent 70%),
              linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 40px 40px,
              linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 40px 40px; }
.doc::after { content: ""; position: absolute; left: calc(50% - 50vw); right: calc(50% - 50vw); top: 0; height: 620px; z-index: -1;
  pointer-events: none; background: var(--doc-img, url("/assets/media/beats/desk.jpg")) center 35% / cover no-repeat; opacity: .22;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .6) 45%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .6) 45%, transparent 100%); }
.doc h1 { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.06; letter-spacing: -0.02em; margin: 0 0 18px; max-width: 18em; }
.doc h2 { font-size: clamp(22px, 2.2vw, 28px); margin: 56px 0 16px; }
@media (max-width: 700px) { .doc { padding: 48px 20px 80px; } .doc::after { height: 420px; } }
.wire-label-bg { fill: #14171b; stroke: rgba(242, 239, 234, .14); stroke-width: 1; }   /* RECORDS backing on the bus */