/* NightShift — craft base (extracted from the V4 single page). brand.css layers on top. */
@font-face {
  font-family: "Fraunces Fallback";
  src: local("Georgia");
  size-adjust: 94%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}
:root {
  --ink: #1a2332;
  --mut: #5b6575;
  --faint: #66707f;
  --line: #d8dee7;
  --line-soft: #e6eaef;
  --ac: #0f7b52;
  --ac-deep: #0a5c3d;
  --acbg: #e9f5ef;
  --amber: #7a4f0b;
  --amber-mid: #b07a1a;
  --amberbg: #faf3e3;
  --paper: #fafbfc;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
  --disp: "Fraunces", "Fraunces Fallback", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --out: cubic-bezier(.19, 1, .22, 1);
  --spring: cubic-bezier(.34, 1.45, .38, 1);
  --io: cubic-bezier(.65, .05, .36, 1);
  --shadow-1: 0 1px 2px rgba(26, 35, 50, .05), 0 8px 28px rgba(26, 35, 50, .07);
  --shadow-2: 0 2px 4px rgba(26, 35, 50, .05), 0 30px 80px rgba(26, 35, 50, .13);
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #fff; font: 16px/1.6 var(--sans); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
::selection { background: var(--acbg); color: var(--ac-deep); }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }

.grain { position: fixed; inset: -50%; z-index: 60; pointer-events: none; opacity: .035; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.progress { position: fixed; top: 0; left: 0; z-index: 90; width: 100%; height: 2px; background: linear-gradient(90deg, var(--ac), var(--ac-deep)); transform-origin: 0 50%; transform: scaleX(0); }
.skip { position: fixed; top: 10px; left: 10px; z-index: 100; padding: 9px 14px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 13px; text-decoration: none; transform: translateY(-250%); transition: transform .25s var(--out); }
.skip:focus { transform: none; }

/* ============ Nav ============ */
nav { position: fixed; z-index: 80; top: 14px; left: 50%; transform: translateX(-50%); width: min(calc(100% - 28px), 1060px); display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 9px 10px 9px 14px; border: 1px solid rgba(216, 222, 231, .8); border-radius: 14px; background: rgba(255, 255, 255, .72); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); transition: box-shadow .35s, background .35s, border-color .35s; }
nav.scrolled { background: rgba(255, 255, 255, .9); box-shadow: var(--shadow-1); border-color: var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 650; font-size: 16px; letter-spacing: -.02em; text-decoration: none; }
.brand img { width: 27px; height: 27px; border-radius: 7px; box-shadow: 0 2px 8px rgba(15, 123, 82, .25); }
.nav-links { display: flex; gap: 22px; }
.nav-links a { font-size: 13.5px; color: var(--mut); text-decoration: none; }
.u { background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .35s var(--out), color .2s; padding-bottom: 2px; }
.u:hover, .u:focus-visible { background-size: 100% 1px; color: var(--ink); }
.btn { position: relative; display: inline-flex; align-items: center; gap: 9px; padding: 11px 20px; border: 0; border-radius: 10px; background: var(--ac); color: #fff; font: 600 14px/1 var(--sans); text-decoration: none; cursor: pointer; box-shadow: 0 1px 2px rgba(10, 92, 61, .4), inset 0 1px rgba(255, 255, 255, .18); transition: transform .25s var(--spring), background .25s, box-shadow .25s; will-change: transform; }
.btn:hover { background: var(--ac-deep); box-shadow: 0 6px 20px rgba(10, 92, 61, .28), inset 0 1px rgba(255,255,255,.18); }
.btn:active { transform: scale(.97); }
.btn .arr { display: inline-block; transition: transform .25s var(--spring); }
.btn:hover .arr { transform: translateX(4px); }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
.btn.ghost:hover { border-color: var(--ac); color: var(--ac-deep); background: rgba(15, 123, 82, .04); }
.btn.ghost:hover .arr { transform: translateY(3px); }
:focus-visible { outline: 2px solid var(--ac); outline-offset: 3px; border-radius: 4px; }

/* ============ Hero ============ */
.hero { position: relative; padding: clamp(120px, 16vh, 170px) 24px 0; isolation: isolate; }
.hero-bg { position: absolute; inset: 0; z-index: -2; background-image: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 90% 78% at 50% 0%, black 30%, transparent 78%); -webkit-mask-image: radial-gradient(ellipse 90% 78% at 50% 0%, black 30%, transparent 78%); }
.hero-glow { position: absolute; z-index: -1; width: 640px; height: 640px; border-radius: 50%; background: radial-gradient(circle, rgba(15, 123, 82, .09), rgba(15, 123, 82, .02) 55%, transparent 70%); pointer-events: none; opacity: 0; transition: opacity .8s; transform: translate(-50%, -50%); }
.hero-head { width: min(100%, var(--max)); margin: 0 auto; }
.hero-in { width: min(100%, var(--max)); margin: clamp(34px, 4vw, 54px) auto 0; display: grid; grid-template-columns: minmax(0, .85fr) minmax(430px, 1.15fr); gap: clamp(40px, 6vw, 84px); align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 26px; padding: 7px 13px 7px 10px; border: 1px solid rgba(15, 123, 82, .25); border-radius: 999px; background: rgba(233, 245, 239, .55); color: var(--ac-deep); font: 600 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.pip { width: 7px; height: 7px; border-radius: 50%; background: var(--ac); box-shadow: 0 0 0 4px rgba(15, 123, 82, .12); animation: pip 2.4s ease-in-out infinite; }
@keyframes pip { 0%, 100% { transform: scale(.8); opacity: .6; } 50% { transform: scale(1); opacity: 1; } }
h1 { font-family: var(--disp); font-size: clamp(34px, 5.7vw, 76px); font-weight: 560; line-height: 1.05; letter-spacing: -.028em; margin: 0; font-variation-settings: "opsz" 100; }
h1 em, .flourish { font-style: italic; font-weight: 480; color: var(--ac-deep); letter-spacing: -.015em; }
.sub { max-width: 480px; margin-bottom: 32px; color: var(--mut); font-size: 17px; line-height: 1.65; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.hero-note { margin-top: 22px; color: var(--faint); font-size: 12.5px; }
.hero-note b { color: var(--mut); font-weight: 600; }
.clip { display: block; overflow: hidden; }
.clip > span { display: block; white-space: nowrap; transform: translateY(112%); transition: transform 1.05s var(--out); }
.played .clip > span { transform: none; }
.clip:nth-child(2) > span { transition-delay: .09s; }

/* ============ The vignette — cinema grade ============ */
.vg { position: relative; opacity: 0; transform: translateY(26px) scale(.985); transition: opacity 1.1s var(--out) .25s, transform 1.1s var(--out) .25s; perspective: 1400px; }
.played .vg { opacity: 1; transform: none; }
/* overflow: clip (not hidden) — the glass pseudo-elements extend past the box, and a hidden-overflow
   box would become a scroll container that scrollIntoView/focus could scroll, cropping the top. */
.vg-window { position: relative; overflow: hidden; overflow: clip; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255,255,255,.9), -24px 0 70px -40px rgba(15, 123, 82, .28); transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transition: transform .7s var(--out); transform-style: preserve-3d; }
/* glass: a specular band that drifts with the tilt, plus a slow ambient sheen */
/* (plain alpha, no blend mode — Chrome drops blend modes inside 3D-transformed parents and paints the band opaque) */
.vg-window::before { content: ""; position: absolute; inset: -40% -60%; z-index: 7; pointer-events: none; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.22) 47%, rgba(255,255,255,.06) 51%, transparent 58%); transform: translate(var(--gx, 0px), var(--gy, 0px)); transition: transform .9s var(--out); }
.vg-window::after { content: ""; position: absolute; inset: 0; z-index: 7; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.35) 45%, transparent 60%); transform: translateX(-130%); animation: sheen 11s var(--io) infinite; }
@keyframes sheen { 0%, 62% { transform: translateX(-130%); } 90%, 100% { transform: translateX(130%); } }
.vg-bar { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--line-soft); background: var(--paper); }
.vg-dots { display: flex; gap: 6px; }
.vg-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.vg-app { color: var(--mut); font: 500 11.5px var(--sans); }
.vg-sess { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--ac-deep); font: 600 9.5px var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.vg-sess::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ac); animation: pip 2.4s ease-in-out infinite; }
.vg-body { display: grid; grid-template-columns: 194px 1fr; }
.vg-queue { border-right: 1px solid var(--line-soft); background: var(--paper); padding: 12px; display: flex; flex-direction: column; gap: 7px; }
.vg-qhead { display: flex; justify-content: space-between; color: var(--faint); font: 600 9.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 2px 2px 5px; }
.vg-item { padding: 9px 10px; border: 1px solid var(--line-soft); border-radius: 9px; background: #fff; font-size: 11.5px; line-height: 1.35; transition: border-color .3s, box-shadow .3s, transform .55s var(--io), opacity .55s var(--io), background .3s; }
.vg-item small { display: block; color: var(--faint); font-size: 10px; }
.vg-item.hover { border-color: var(--ac); box-shadow: 0 2px 10px rgba(15, 123, 82, .12); }
.vg-item.active { border-color: var(--ac); background: var(--acbg); }
.vg-item.gone { opacity: 0; transform: translateX(-14px); }
.vg-bins { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding-top: 9px; }
.vg-bin { padding: 8px 9px; border-radius: 9px; font: 600 10px var(--sans); }
.vg-bin b { display: block; font: 700 16px var(--mono); letter-spacing: -.02em; transition: transform .3s var(--spring); }
.vg-bin.pop b { transform: scale(1.25); }
.vg-bin.ok { background: var(--acbg); color: var(--ac-deep); }
.vg-bin.rev { background: var(--amberbg); color: var(--amber); }
.vg-detail { padding: 16px 18px 14px; display: flex; flex-direction: column; min-height: 246px; }
.vg-dhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 13px; }
.vg-dhead b { font-size: 13.5px; letter-spacing: -.01em; }
.vg-chip { padding: 4px 9px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line-soft); color: var(--faint); font: 600 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; transition: background .3s, color .3s, border-color .3s; }
.vg-chip.on { background: var(--acbg); border-color: rgba(15,123,82,.3); color: var(--ac-deep); }
.vg-chip.warn { background: var(--amberbg); border-color: rgba(122,79,11,.3); color: var(--amber); }
.vg-rows { display: grid; gap: 8px; }
.vg-row { display: grid; grid-template-columns: 84px 1fr 16px; align-items: center; gap: 10px; }
.vg-row label { color: var(--faint); font: 500 10.5px var(--sans); }
.vg-field { position: relative; min-height: 29px; display: flex; align-items: center; padding: 0 9px; border: 1px solid var(--line); border-radius: 7px; background: #fff; font: 500 12px var(--mono); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; transition: border-color .25s, background .25s; }
.vg-field.focus { border-color: var(--ac); background: #fdfefd; box-shadow: 0 0 0 3px rgba(15, 123, 82, .09); }
.vg-field.sweep::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(15,123,82,.12), transparent 70%); animation: sweep .55s var(--io); }
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.vg-caret { display: none; width: 1.5px; height: 14px; margin-left: 2px; background: var(--ac); animation: blink 1s steps(1) infinite; }
.vg-field.focus .vg-caret { display: block; }
@keyframes blink { 50% { opacity: 0; } }
.vg-check { width: 15px; height: 15px; opacity: 0; transform: scale(.4); transition: opacity .3s, transform .35s var(--spring); }
.vg-check.on { opacity: 1; transform: none; }
.vg-check path { stroke: var(--ac); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.vg-foot { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 14px; }
.vg-file { padding: 9px 18px; border-radius: 8px; background: var(--ink); color: #fff; font: 600 12px var(--sans); transition: transform .2s var(--spring), background .3s, box-shadow .2s; box-shadow: 0 2px 6px rgba(26,35,50,.25); }
.vg-file.press { transform: scale(.94) translateY(1px); box-shadow: 0 1px 2px rgba(26,35,50,.25); }
.vg-file.warn { background: var(--amber-mid); }
.vg-verify { color: var(--faint); font: 500 10.5px var(--mono); }
.vg-verify.ok { color: var(--ac-deep); }
.vg-rule { margin-top: 12px; padding: 8px 11px; border-left: 3px solid var(--amber-mid); border-radius: 0 8px 8px 0; background: var(--amberbg); color: var(--amber); font: 500 11px var(--sans); opacity: 0; transform: translateY(4px); transition: opacity .4s, transform .4s var(--out); }
.vg-rule.on { opacity: 1; transform: none; }
.vg-log { border-top: 1px solid var(--line-soft); background: var(--paper); padding: 9px 14px; height: 58px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; }
.vg-log div { color: var(--faint); font: 400 9.5px/1.5 var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vg-log div:last-child { color: var(--mut); }
.vg-log em { color: var(--ac-deep); font-style: normal; }
.vg-log .warnl em { color: var(--amber); }
/* the cursor has weight: eased travel, a settle, a press */
.vg-cursor { position: absolute; z-index: 5; left: 0; top: 0; width: 17px; filter: drop-shadow(0 3px 5px rgba(26, 35, 50, .38)); transition-property: transform, filter; transition-timing-function: cubic-bezier(.2, .75, .25, 1); pointer-events: none; transform-origin: 2px 2px; }
.vg-cursor.hide { opacity: 0; }
.vg-cursor.press { filter: drop-shadow(0 1px 2px rgba(26, 35, 50, .45)); }
.vg-ripple { position: absolute; z-index: 4; width: 30px; height: 30px; margin: -15px 0 0 -15px; border: 2px solid var(--ac); border-radius: 50%; opacity: 0; pointer-events: none; }
.vg-ripple.go { animation: ripple .5s var(--out); }
@keyframes ripple { from { opacity: .7; transform: scale(.25); } to { opacity: 0; transform: scale(1); } }
.vg-stamp { position: absolute; z-index: 6; right: 26px; bottom: 112px; padding: 7px 13px; border: 2.5px solid var(--ac); border-radius: 8px; color: var(--ac); background: rgba(255, 255, 255, .88); font: 800 13px var(--mono); letter-spacing: .14em; transform: rotate(-8deg) scale(1.6); opacity: 0; pointer-events: none; }
.vg-stamp.go { animation: stamp 1.5s var(--out); }
.vg-stamp.warn { border-color: var(--amber-mid); color: var(--amber); }
@keyframes stamp { 0% { opacity: 0; transform: rotate(-8deg) scale(1.6); } 12% { opacity: 1; transform: rotate(-8deg) scale(.96); } 18% { transform: rotate(-8deg) scale(1.04); } 24%, 78% { opacity: 1; transform: rotate(-8deg) scale(1); } 100% { opacity: 0; transform: rotate(-8deg) scale(1); } }
/* the scrubber: hover the window, drag the playhead through the 16 frames */
.vg-scrub { position: relative; height: 30px; border-top: 1px solid var(--line-soft); background: #fff; display: grid; grid-template-columns: repeat(4, 1fr); cursor: ew-resize; touch-action: none; user-select: none; opacity: .55; transition: opacity .3s; }
.vg:hover .vg-scrub, .vg-scrub:focus-visible { opacity: 1; }
.vg-scrub:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ac); }
.vg-ch { position: relative; display: flex; align-items: center; padding-left: 10px; border-right: 1px solid var(--line-soft); color: var(--faint); font: 600 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
.vg-ch:last-child { border-right: 0; }
.vg-ch i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line-soft); }
.vg-ch i:nth-child(1) { left: 25%; } .vg-ch i:nth-child(2) { left: 50%; } .vg-ch i:nth-child(3) { left: 75%; }
.vg-head { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--ac); box-shadow: 0 0 0 3px rgba(15,123,82,.12); transform: translateX(var(--x, 0px)); transition: transform .25s var(--out); pointer-events: none; }
.vg-head::after { content: ""; position: absolute; top: -4px; left: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--ac); }
.vg-scrub.scrubbing .vg-head { transition: none; }
.vg-tag { position: absolute; left: -14px; bottom: -16px; z-index: 8; padding: 9px 13px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); box-shadow: var(--shadow-1); font: 500 11px var(--sans); color: var(--mut); }
.vg-tag b { color: var(--ink); }

/* ============ Principles strip ============ */
.stats { width: min(100%, var(--max)); margin: clamp(64px, 9vw, 104px) auto 0; padding: 0 24px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.stat { padding: 26px 22px 8px 0; border-right: 1px solid var(--line-soft); margin-right: 22px; }
.stat:last-child { border-right: 0; margin-right: 0; }
.stat b { display: block; font-family: var(--disp); font-size: clamp(34px, 3.6vw, 52px); font-weight: 500; letter-spacing: -.03em; line-height: 1; margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.stat span { color: var(--mut); font-size: 13px; line-height: 1.5; display: block; }

/* ============ Sections ============ */
section { padding: clamp(88px, 12vw, 150px) 24px 0; }
.sec-in { width: min(100%, var(--max)); margin: 0 auto; }
.label { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; color: var(--ac); font: 600 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.label::before { content: ""; width: 26px; height: 1px; background: currentColor; }
h2 { font-family: var(--disp); font-size: clamp(34px, 4.2vw, 58px); font-weight: 540; line-height: 1.06; letter-spacing: -.025em; max-width: 680px; }
.lede { margin-top: 18px; max-width: 520px; color: var(--mut); font-size: 16px; }

.beats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 64px; position: relative; }
.beats::before { content: ""; position: absolute; top: 26px; left: 0; right: 12%; height: 1px; background: var(--line); }
.beat { position: relative; padding-top: 54px; }
.beat::before { content: ""; position: absolute; top: 20px; left: 0; width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 2px solid var(--ac); box-shadow: 0 0 0 5px #fff; }
.beat i { position: absolute; top: -22px; left: 22px; font: italic 400 84px/1 var(--disp); color: transparent; -webkit-text-stroke: 1px var(--line); pointer-events: none; }
.beat h3 { font-size: 19px; letter-spacing: -.01em; margin-bottom: 10px; }
.beat p { color: var(--mut); font-size: 14.5px; max-width: 300px; }

/* ============ Try it ============ */
.try-form { display: flex; gap: 10px; margin-top: 34px; max-width: 640px; }
.try-form input { flex: 1; min-width: 0; padding: 13px 16px; border: 1px solid var(--line); border-radius: 10px; font: 500 16px var(--sans); color: var(--ink); background: #fff; transition: border-color .25s, box-shadow .25s; }
.try-form input:focus { outline: none; border-color: var(--ac); box-shadow: 0 0 0 4px rgba(15, 123, 82, .1); }
.try-form input::placeholder { color: var(--faint); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip { padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--mut); font: 500 12.5px var(--sans); cursor: pointer; transition: border-color .2s, color .2s, transform .2s var(--spring); }
.chip:hover { border-color: var(--ac); color: var(--ac-deep); transform: translateY(-1px); }
.board { margin-top: 44px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.frame { position: relative; min-height: 236px; padding: 14px 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow-1); display: flex; flex-direction: column; opacity: .38; transform: translateY(10px) scale(.985); transition: opacity .55s var(--out), transform .55s var(--out), border-color .4s; }
.frame.on { opacity: 1; transform: none; border-color: rgba(15, 123, 82, .35); }
.frame small { color: var(--ac); font: 600 9.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.frame .art { flex: 1; margin: 12px 0; position: relative; min-height: 96px; }
.frame p { color: var(--mut); font-size: 12.5px; line-height: 1.5; }
.frame p b { color: var(--ink); font-weight: 600; }
.art .win { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--paper); }
.art .win .tb { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--line-soft); background: #fff; }
.art .win .tb i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.art .win .tb span { margin-left: 4px; font: 600 9px var(--mono); color: var(--mut); letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.art .win .rows { padding: 8px; display: grid; gap: 5px; }
.art .win .rows i { display: block; height: 7px; border-radius: 3px; background: var(--line-soft); }
.frame.on .art .win .rows i { animation: rowin .6s var(--out) both; }
.art .win .rows i:nth-child(2) { width: 70%; animation-delay: .12s; } .art .win .rows i:nth-child(3) { width: 85%; animation-delay: .24s; }
@keyframes rowin { from { transform: scaleX(0); transform-origin: 0 50%; } to { transform: none; } }
.art .fields { display: grid; gap: 6px; }
.art .fields div { display: grid; grid-template-columns: 52px 1fr; gap: 6px; align-items: center; font: 500 10px var(--mono); }
.art .fields div span:first-child { color: var(--faint); font: 500 9.5px var(--sans); }
.art .fields div span:last-child { padding: 4px 6px; border: 1px solid var(--line); border-radius: 5px; background: #fff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ink); }
.frame.on .art .fields span:last-child { animation: fieldin .5s var(--out) both; }
.art .fields div:nth-child(2) span:last-child { animation-delay: .25s !important; } .art .fields div:nth-child(3) span:last-child { animation-delay: .5s !important; }
@keyframes fieldin { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } }
.art .rule { padding: 9px 10px; border-left: 3px solid var(--ac); border-radius: 0 8px 8px 0; background: var(--acbg); color: var(--ac-deep); font: 500 11px/1.4 var(--sans); }
.art .rule b { display: block; font: 600 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 3px; color: var(--ac); }
.art .move { position: relative; height: 100%; min-height: 96px; }
.art .move .doc { position: absolute; left: 6px; top: 22px; width: 38px; height: 46px; border: 1px solid var(--line); border-radius: 5px; background: #fff; box-shadow: var(--shadow-1); }
.art .move .doc::before, .art .move .doc::after { content: ""; position: absolute; left: 7px; right: 7px; height: 3px; border-radius: 2px; background: var(--line-soft); top: 10px; }
.art .move .doc::after { top: 18px; right: 14px; }
.frame.on .art .move .doc { animation: slide 1.1s var(--io) .2s both; }
@keyframes slide { to { transform: translateX(78px) scale(.85); opacity: .0; } }
.art .move .tray { position: absolute; right: 6px; top: 26px; width: 58px; height: 42px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); display: grid; place-items: center; font: 600 9px var(--mono); color: var(--mut); letter-spacing: .06em; text-transform: uppercase; overflow: hidden; }
.frame.on .art .move .tray { animation: trayglow .5s var(--out) 1.2s both; }
@keyframes trayglow { to { border-color: var(--ac); background: var(--acbg); color: var(--ac-deep); } }
.art .checks { display: grid; gap: 7px; }
.art .checks div { display: flex; align-items: center; gap: 8px; font: 500 10.5px var(--mono); color: var(--ink); }
.art .checks svg { width: 15px; height: 15px; opacity: 0; transform: scale(.4); }
.art .checks path { stroke: var(--ac); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.frame.on .art .checks svg { animation: checkin .4s var(--spring) both; }
.art .checks div:nth-child(2) svg { animation-delay: .3s !important; } .art .checks div:nth-child(3) svg { animation-delay: .6s !important; }
@keyframes checkin { to { opacity: 1; transform: none; } }
.art .count { display: grid; gap: 4px; align-content: center; height: 100%; }
.art .count b { font: 500 44px/1 var(--disp); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
.art .count span { color: var(--faint); font: 600 9.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.art .count .zero { margin-top: 8px; padding: 5px 8px; border-radius: 6px; background: var(--acbg); color: var(--ac-deep); font: 600 10px var(--mono); width: max-content; }
.try-foot { margin-top: 22px; color: var(--faint); font-size: 13px; }
.try-foot a { color: var(--ac-deep); font-weight: 600; text-decoration: none; }

/* ============ Proof ============ */
.proof-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin-top: 54px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ptile { padding: 34px 28px 30px 0; border-right: 1px solid var(--line-soft); margin-right: 28px; }
.ptile:last-child { border-right: 0; margin-right: 0; }
.ptile b { display: block; font: 500 clamp(44px, 5vw, 72px)/1 var(--disp); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.ptile b small { font-size: .42em; letter-spacing: 0; color: var(--ac-deep); margin-left: 4px; font-style: italic; font-weight: 480; }
.ptile span { display: block; margin-top: 10px; color: var(--mut); font-size: 14px; }
.proof-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 18px; color: var(--faint); font-size: 12.5px; }
.tag { padding: 3px 9px; border: 1px dashed var(--amber-mid); border-radius: 999px; color: var(--amber); font: 600 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }

/* ============ THE NIGHT SHIFT — scroll-scrubbed ============ */
.night { padding-top: clamp(88px, 12vw, 150px); }
.night-track { position: relative; height: 320vh; }
.night-stage { position: sticky; top: 0; height: 100vh; min-height: 640px; overflow: hidden; display: grid; align-items: center; padding: 0 24px; background: linear-gradient(180deg, var(--sky-a, #fff) 0%, var(--sky-b, #fff) 100%); transition: background 1.2s linear; }
.night-in { width: min(100%, var(--max)); margin: 0 auto; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 84px); align-items: center; }
.clock { font: 500 clamp(72px, 12vw, 168px)/.95 var(--disp); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.clock small { display: block; font: 600 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ac); margin-bottom: 18px; }
.clock i { font-style: normal; font-size: .38em; color: var(--mut); letter-spacing: -.01em; margin-left: 8px; }
.office { margin-top: 26px; color: var(--mut); font-size: 15px; max-width: 360px; }
.office b { color: var(--ink); font-weight: 600; }
.ledger { border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.86); backdrop-filter: blur(6px); box-shadow: var(--shadow-2); overflow: hidden; }
.ledger-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--line-soft); background: var(--paper); font: 600 9.5px var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--faint); }
.ledger-head span:last-child { color: var(--ac-deep); }
.ledger-lines { height: 300px; padding: 10px 18px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; overflow: hidden; }
/* off lines take no space, so the lit ones always sit at the bottom like a terminal */
.ll { display: none; grid-template-columns: 62px 1fr; gap: 12px; font: 400 12px/1.5 var(--mono); color: var(--mut); }
.ll.on { display: grid; animation: llin .5s var(--out) both; }
@keyframes llin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ll b { color: var(--faint); font-weight: 500; }
.ll em { font-style: normal; color: var(--ac-deep); }
.ll.warn em { color: var(--amber); }
.ll.morning { color: var(--ink); font-weight: 600; }
.tally { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-soft); }
.tally div { padding: 12px 16px; border-right: 1px solid var(--line-soft); }
.tally div:last-child { border-right: 0; }
.tally small { display: block; color: var(--faint); font: 600 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 3px; }
.tally b { font: 600 20px var(--disp); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tally .ok b { color: var(--ac-deep); } .tally .rev b { color: var(--amber); }
.morning-card { position: absolute; left: 50%; bottom: 8%; transform: translate(-50%, 20px); opacity: 0; padding: 16px 22px; border: 1px solid rgba(15,123,82,.3); border-radius: 14px; background: rgba(255,255,255,.95); box-shadow: var(--shadow-2); font: 500 15px var(--sans); color: var(--ink); transition: opacity .6s var(--out), transform .6s var(--out); white-space: nowrap; }
.morning-card.on { opacity: 1; transform: translate(-50%, 0); }
.morning-card em { font: italic 500 1.25em var(--disp); color: var(--ac-deep); margin-right: 8px; }
.night-hint { position: absolute; right: 24px; bottom: 18px; color: var(--faint); font: 600 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }

/* ============ Why it's safe ============ */
.safe-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(40px, 6vw, 84px); margin-top: 58px; align-items: start; }
.planks { display: grid; }
.plank { padding: 24px 0; border-top: 1px solid var(--line); }
.plank:last-child { border-bottom: 1px solid var(--line); }
.plank h3 { display: flex; align-items: baseline; gap: 12px; font-size: 17px; letter-spacing: -.01em; margin-bottom: 7px; }
.plank h3 i { font: italic 500 13px var(--disp); color: var(--ac); }
.plank p { color: var(--mut); font-size: 14.5px; max-width: 400px; }
.rules-demo { border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--shadow-1); overflow: hidden; }
.rules-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 18px; border-bottom: 1px solid var(--line-soft); background: var(--paper); }
.rules-head b { font-size: 13px; }
.rules-head span { color: var(--faint); font: 600 9.5px var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.rules-list { padding: 8px 18px; }
.rule-row { display: flex; align-items: center; gap: 13px; padding: 11px 0; border-bottom: 1px dashed var(--line-soft); }
.rule-row:last-child { border-bottom: 0; }
.rule-sw { flex: none; width: 38px; height: 22px; border: 0; border-radius: 999px; background: #c4ccd6; position: relative; cursor: pointer; transition: background .3s; }
.rule-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(26, 35, 50, .3); transition: transform .3s var(--spring); }
.rule-sw[aria-pressed="true"] { background: var(--ac); }
.rule-sw[aria-pressed="true"]::after { transform: translateX(16px); }
.rule-text { font: 500 13px/1.45 var(--sans); color: var(--ink); }
.rule-text em { font-style: normal; color: var(--ac-deep); font-weight: 650; }
.rule-row.off .rule-text, .rule-row.off .rule-text em { color: var(--faint); }
.rule-row.flash .rule-text em { animation: flash .8s var(--out); }
@keyframes flash { 30% { background: var(--acbg); } }
.flow { position: relative; height: 210px; border-top: 1px solid var(--line-soft); background: var(--paper); overflow: hidden; overflow: clip; }
.flow-item { position: absolute; top: 16px; left: 50%; padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; background: #fff; box-shadow: 0 2px 8px rgba(26, 35, 50, .08); font: 600 11px var(--mono); letter-spacing: -.01em; white-space: nowrap; transform: translate(-50%, -60px); transition: transform 2.1s var(--io), opacity .5s; will-change: transform; }
.flow-item.team { border-color: rgba(122, 79, 11, .45); color: var(--amber); }
.flow-item.auto { border-color: rgba(15, 123, 82, .45); color: var(--ac-deep); }
.flow-bins { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line-soft); }
.fbin { padding: 13px 18px; background: #fff; }
.fbin + .fbin { border-left: 1px solid var(--line-soft); }
.fbin small { display: block; color: var(--faint); font: 600 9.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 3px; }
.fbin b { font: 650 21px var(--disp); letter-spacing: -.02em; transition: transform .3s var(--spring); display: inline-block; }
.fbin.pop b { transform: scale(1.3); }
.fbin.ok b { color: var(--ac-deep); } .fbin.rev b { color: var(--amber); }
.rules-cap { padding: 11px 18px; border-top: 1px solid var(--line-soft); color: var(--faint); font-size: 12px; }

/* ============ CTA + footer ============ */
.cta-wrap { padding: clamp(88px, 12vw, 150px) 24px; }
.cta-card { position: relative; width: min(100%, var(--max)); margin: 0 auto; padding: clamp(56px, 8vw, 96px) clamp(28px, 6vw, 88px); border: 1px solid rgba(15, 123, 82, .22); border-radius: 24px; background: radial-gradient(ellipse 70% 90% at 85% 10%, rgba(15, 123, 82, .1), transparent 60%), linear-gradient(165deg, #f2f9f5, var(--acbg)); overflow: hidden; }
.cta-card::before { content: ""; position: absolute; inset: 0; opacity: .5; background-image: linear-gradient(rgba(15, 123, 82, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 123, 82, .05) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(ellipse at 80% 0%, black, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at 80% 0%, black, transparent 70%); pointer-events: none; }
.cta-card h2 { max-width: 560px; margin-bottom: 18px; }
.cta-card p { position: relative; max-width: 460px; color: var(--mut); font-size: 16px; margin-bottom: 32px; }
.cta-row { position: relative; display: flex; flex-wrap: wrap; gap: 12px; }
footer { border-top: 1px solid var(--line); padding: 30px 24px 40px; }
.foot-in { width: min(100%, var(--max)); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; color: var(--faint); font-size: 12.5px; }
.foot-brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); font-weight: 650; font-size: 14px; }
.foot-brand img { width: 22px; height: 22px; border-radius: 6px; }
.foot-in .steps { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }

.rv { opacity: 0; transform: translateY(26px); transition: opacity .95s var(--out), transform .95s var(--out); }
.rv.in { opacity: 1; transform: none; }
.rv[data-d="1"] { transition-delay: .1s; } .rv[data-d="2"] { transition-delay: .2s; } .rv[data-d="3"] { transition-delay: .3s; }

@media (max-width: 1000px) {
  .nav-links { display: none; }
  .hero-in { grid-template-columns: 1fr; }
  .vg { max-width: 640px; margin: 0 auto; width: 100%; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(2) { border-right: 0; }
  .beats { grid-template-columns: 1fr; gap: 30px; }
  .beats::before { top: 0; bottom: 26px; left: 6px; right: auto; width: 1px; height: auto; }
  .beat { padding: 0 0 0 38px; }
  .beat::before { top: 5px; }
  .beat i { left: auto; right: 0; top: -10px; font-size: 64px; }
  .board { grid-template-columns: repeat(3, 1fr); }
  .safe-grid, .night-in { grid-template-columns: 1fr; }
  .night-in { align-content: center; gap: 28px; }
  .clock { font-size: clamp(64px, 16vw, 110px); }
  .ledger-lines { height: 220px; }
  .morning-card { white-space: normal; width: calc(100% - 48px); text-align: center; }
  .proof-grid { grid-template-columns: 1fr; }
  .ptile { border-right: 0; margin-right: 0; border-bottom: 1px solid var(--line-soft); padding: 26px 0; }
  .ptile:last-child { border-bottom: 0; }
}
@media (max-width: 620px) {
  .vg-body { grid-template-columns: 1fr; }
  .vg-queue { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .vg-qhead { width: 100%; }
  .vg-item { flex: 1 1 40%; }
  .vg-bins { margin: 0; width: 100%; }
  .vg-tag { left: 8px; }
  .stats-grid { grid-template-columns: 1fr; }
  .stat { border-right: 0; margin-right: 0; padding-right: 0; }
  .hero { padding-top: 104px; }
  .try-form { flex-direction: column; }
  .board { grid-template-columns: 1fr 1fr; }
  .tally { grid-template-columns: 1fr 1fr; }
  .tally div:nth-child(2) { border-right: 0; }
  .tally div:nth-child(-n+2) { border-bottom: 1px solid var(--line-soft); }
  .night-stage { min-height: 560px; }
  .night-hint { display: none; }
}
@media (max-width: 540px) {
  h1 { font-size: clamp(30px, 9.4vw, 40px); opacity: 0; transform: translateY(18px); transition: opacity .9s var(--out) .1s, transform .9s var(--out) .1s; }
  .played h1 { opacity: 1; transform: none; }
  .clip, .clip > span { display: inline; white-space: normal; transform: none; transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .rv, .vg, .clip > span, .frame, .ll, .morning-card { opacity: 1; transform: none; }
  .frame .art .win .rows i, .frame .art .fields span:last-child, .frame .art .checks svg { animation: none !important; opacity: 1; transform: none; }
  .art .move .doc { display: none; }
  .hero-glow, .vg-cursor, .vg-window::after, .night-hint { display: none; }
  .vg-window { transform: none !important; }
  /* no scroll theater: the night reads as one finished ledger */
  .night-track { height: auto; }
  .night-stage { display: block; position: static; height: auto; min-height: 0; padding: 48px 24px 120px; }
  /* (width:auto + normal wrapping — a max-content card is a grid/flow item that would widen the whole stage on phones) */
  .morning-card { position: static; transform: none; margin: 28px auto 0; width: auto; max-width: 560px; white-space: normal; text-align: center; }
}