/* ═══════════════════════════════════════════════════════════════════════
TIPGOLDVAULT — DESIGN SYSTEM PASS
Loaded after brand.css so it wins by cascade order. brand.css is never
edited; delete this one to revert the entire redesign.
NOTHING HERE CHANGES CONTENT. No text, no figure, no chart datum, no
image, no section, no ordering. Presentation only.
── WHY ──
Audited on the live page, the style layer had no system, only an
accumulation:
13 border-radius values 8 box-shadows
38 font sizes 8 font weights
29 text colours 23 surface colours
10 easing curves 0 dark-mode rules
That inventory is the actual reason the page read as 2015-2019 rather
than 2026. Modern work looks modern largely because it is ruthlessly
systematised. So this file is a system, not a patch: five scales, and
every component re-expressed in terms of them.
Targets: 4 radii · 2 shadows · 9 sizes · 4 weights · 5 inks ·
4 surfaces · 2 easings · full dark mode.
── THE FIVE MOVES ──
1 Grotesk display. Newsreader retired; Inter Tight, tight tracking.
2 Real surface tiers. 23 near-identical values become 4 separated ones,
so the page reads as layered instead of uniformly cream.
3 Flat material. Gradient buttons with inset highlights, gradient data
bars and blurred card shadows were skeuomorphic — my own doing in the
previous pass. All flat now, hairline borders, one tight shadow.
4 Accent restraint. Gold went on buttons, labels, numerals, rails,
dividers, chips, markers, table heads and the wordmark. Now it earns
its place: figures, focus, and the primary action.
5 Geometry. Pills become 10px. Nothing is a 999px capsule unless it is
genuinely circular.
═══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
1 · TOKENS
═══════════════════════════════════════════════════════════════════════ */
:root{
color-scheme:light;
/* ── TYPE ────────────────────────────────────────────────────────────
Inter Tight on display, Manrope on interface. brand.css reads
--font-display and --serif in ten places, so both are re-pointed
rather than chased selector by selector. */
--sans:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
--display:'Inter Tight','Manrope',-apple-system,BlinkMacSystemFont,sans-serif;
--font-display:var(--display);
--serif:var(--display);
/* Nine steps. Fluid where it earns it, fixed where it must not drift. */
--fs-d1:clamp(2.75rem,5.6vw,5rem);
--fs-d2:clamp(2rem,3.6vw,3.15rem);
--fs-d3:clamp(1.5rem,2.2vw,2rem);
--fs-d4:clamp(1.125rem,1.5vw,1.375rem);
--fs-lead:clamp(1rem,1.25vw,1.1875rem);
--fs-body:0.9375rem;
--fs-sm:0.8125rem;
--fs-xs:0.75rem;
--fs-label:0.6875rem;
/* Four weights, not eight. */
--fw-normal:400;
--fw-medium:500;
--fw-semi:600;
--fw-bold:700;
/* Display tracking must go negative as size goes up, or large grotesk
looks loose and amateur. */
--tr-d1:-0.035em;
--tr-d2:-0.026em;
--tr-d3:-0.018em;
--tr-label:0.06em;
/* ── SURFACES ────────────────────────────────────────────────────────
Four tiers with real value separation. The old page was #FAF7F1 cream
with 22 further near-identical tones on top, so nothing read as
raised or recessed. These are warm-neutral rather than cream: the
warmth stays in the gold, not in the paper. */
--s-0:#FAFAF8; /* page */
--s-1:#FFFFFF; /* raised — cards, panels */
--s-2:#F1F0EC; /* sunken — wells, headers */
--s-inv:#15140F; /* inverted — dark panels */
/* ── INK ─────────────────────────────────────────────────────────────
Five, with measured contrast on --s-0.
--ink-1 16.9:1 headings, figures
--ink-2 7.1:1 body
--ink-3 4.6:1 fine print, captions (still AA at 14px)
--ink-4 2.4:1 NON-TEXT ONLY: borders, rules, chart strokes,
slider tracks. Measured, not estimated — an earlier
draft of this comment guessed 3.1:1, I used it on
the rail's chapter numerals, and axe correctly
failed them. If it carries a glyph, use --ink-3.
--ink-inv on --s-inv */
--ink-1:#14140F;
--ink-2:#514F49;
--ink-3:#6E6B63;
--ink-4:#A8A49A;
--ink-inv:#F7F6F2;
--ink-inv-2:#B9B6AE;
/* ── ACCENT ──────────────────────────────────────────────────────────
One gold, three roles, contrast stated:
--acc #8A6613 5.55:1 on --s-0 → small text, links, the CTA fill
--acc-mid #A87A12 3.62:1 → large figures only (AA ≥24px)
--acc-hi #D9AE45 decorative strokes and dark-panel text
No gradient anywhere. Gold reads expensive when it is scarce, not
when it is glossy. */
--acc:#8A6613;
--acc-mid:#A87A12;
--acc-hi:#D9AE45;
--acc-ink:#FFFFFF;
--acc-wash:#F7F1E2;
--acc-line:rgba(138,102,19,.22);
/* Semantic. The warm brick was already well judged; only its tint is
re-seated onto the new neutral paper. */
--loss:#B3261E;
--loss-wash:#FBEBE8;
--gain:#276B4E;
/* ── GEOMETRY ────────────────────────────────────────────────────────
Four. 999px survives only for things that are actually circles. */
--r-xs:6px;
--r-sm:10px;
--r-md:14px;
--r-lg:20px;
--r-circle:50%;
/* ── ELEVATION ───────────────────────────────────────────────────────
Two. Tight and low-alpha; the old 8 included 30-60px blurs that read
as 2013 card float. */
--e-1:0 1px 2px rgba(20,20,15,.05),0 1px 1px rgba(20,20,15,.04);
--e-2:0 10px 30px -8px rgba(20,20,15,.13),0 2px 6px -2px rgba(20,20,15,.07);
/* ── MOTION ──────────────────────────────────────────────────────────
Two curves, two durations. */
--ease:cubic-bezier(.22,1,.36,1);
--ease-spring:cubic-bezier(.34,1.4,.64,1);
--dur-1:170ms;
--dur-2:420ms;
--shell:1180px;
--pad:clamp(20px,4.5vw,72px);
/* ── LEGACY BRIDGE ───────────────────────────────────────────────────
brand.css and waitlist.css reference the old token names in hundreds
of places. Re-pointing them here re-skins everything at once, which
is why no brand.css selector had to be touched. */
--page:var(--s-0);
--card:var(--s-1);
--quiet:var(--s-2);
--border:#E4E2DB;
--hair:var(--acc-line);
--text:var(--ink-1);
--text-2:var(--ink-2);
--label:var(--ink-3);
--muted:var(--ink-4);
--gold:var(--acc-mid);
--gold-ink:var(--acc);
--gold-ink-hover:#6F520E;
--gold-accent:var(--acc-hi);
--gold-bright:var(--acc-hi);
--gold-tint:var(--acc-wash);
--gold-line:var(--acc-line);
--loss-tint:var(--loss-wash);
--teal:var(--gain);
--on-gold:var(--acc-ink);
/* Flat, not foil. waitlist.css reads these through var() fallbacks, so
the form's button flattens with everything else. */
--gold-foil:var(--acc);
--gold-foil-hover:#75560F;
/* NOTE: --r-md is deliberately NOT re-declared here. An earlier draft had
`--r-md:var(--r-md)`, a self-reference, which makes the custom property
invalid at computed-value time — so every rule reading it silently fell
back and the 14px step vanished from the page. Caught by re-measuring
the rendered radii and finding 14px absent from the set. */
--shadow:var(--e-2);
--shadow-soft:var(--e-1);
--shadow-lift:var(--e-2);
}
/* ── LIGHT ONLY, DELIBERATELY ──────────────────────────────────────────
A full dark variant was built here and has been removed on request. The
page is light in every context, including for visitors whose OS is set
to dark.
`color-scheme:light` on :root above is what enforces it. Without that
declaration the browser still applies its own dark treatment to things
it owns and CSS cannot reach: form field interiors, autofill, select
dropdowns, scrollbars, and the canvas flash before first paint. Setting
the tokens alone would have left a dark scrollbar and dark-filled inputs
framing a light page.
The tier system stays intact, so a dark variant remains an eight-value
flip if it is ever wanted again — nothing else would need to change. */
/* ═══════════════════════════════════════════════════════════════════════
2 · BASE
═══════════════════════════════════════════════════════════════════════ */
html{background:var(--s-0)}
body{
background:var(--s-0);
color:var(--ink-2);
font-family:var(--sans);
font-size:var(--fs-body);
font-weight:var(--fw-medium);
line-height:1.6;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
::selection{background:var(--acc-wash);color:var(--ink-1)}
:focus-visible{
outline:2px solid var(--acc);
outline-offset:3px;
border-radius:var(--r-xs);
}
/* ═══════════════════════════════════════════════════════════════════════
3 · TYPE
Every heading moves to the grotesk with size-appropriate tracking. The
words are untouched.
═══════════════════════════════════════════════════════════════════════ */
.display,.display--hero,.display--join,
.stage__head h2,#cashProofTitle,.proof__title,.chart h3,
.coin-planner__intro h3,.beat__line,.solution-intro__action,
.gap-chart__title{
font-family:var(--display);
font-weight:var(--fw-bold);
font-feature-settings:'ss01','cv05';
}
.display,.display--hero{font-size:var(--fs-d1);line-height:1.02;letter-spacing:var(--tr-d1)}
.hero__copy .display--hero{font-size:var(--fs-d1);line-height:1;letter-spacing:var(--tr-d1)}
.display--join{font-size:var(--fs-d2);line-height:1.04;letter-spacing:var(--tr-d2);max-width:20ch}
.stage__head h2{font-size:var(--fs-d2);line-height:1.06;letter-spacing:var(--tr-d2);font-weight:var(--fw-bold)}
.gap__head .display{font-size:var(--fs-d2);letter-spacing:var(--tr-d2)}
.pricing__head .display{font-size:var(--fs-d2);letter-spacing:var(--tr-d2)}
.mechanism__copy .display{font-size:var(--fs-d2);line-height:1.05;letter-spacing:var(--tr-d2);max-width:22ch}
.proof__title{font-size:var(--fs-d3);line-height:1.15;letter-spacing:var(--tr-d3);font-weight:var(--fw-bold)}
.chart h3{font-size:var(--fs-d4);letter-spacing:var(--tr-d3);font-weight:var(--fw-semi)}
.coin-planner__intro h3{font-size:var(--fs-d3);line-height:1.08;letter-spacing:var(--tr-d3)}
.beat__line{font-size:var(--fs-d4);line-height:1.3;letter-spacing:-.012em;font-weight:var(--fw-semi);color:var(--ink-1)}
.lead{font-size:var(--fs-lead);line-height:1.6;color:var(--ink-2);font-weight:var(--fw-medium)}
/* The bridge: all-caps grotesk needs positive tracking and a wider
measure. It ran eight lines as a serif; five as of the last pass. */
.solution-intro__action{
font-size:clamp(1.75rem,3.1vw,2.75rem);
line-height:1.14;
letter-spacing:.005em;
font-weight:var(--fw-bold);
max-width:27ch;
text-wrap:balance;
}
.solution-intro__fact{
font-family:var(--sans);
font-size:var(--fs-label);
font-weight:var(--fw-bold);
letter-spacing:.09em;
color:var(--ink-3);
}
/* One label treatment, not seven. */
.eyebrow,.chart__kicker,.evnotes__title,.price-card__label,.chart__unit,
.stack__kicker,.shrink__tag,.chart-result__label,.beat-compare__title,
.stack__facts dt,.proof-table-card__label span,.money-job small,
.phone__tag,.beat__tag,.door__tag,.gap-shortfall__eyebrow{
font-family:var(--sans);
font-size:var(--fs-label);
font-weight:var(--fw-bold);
letter-spacing:var(--tr-label);
text-transform:uppercase;
color:var(--ink-3);
}
/* Figures: tabular, tight, and the only place gold appears at scale. */
#lossAmount,.beat__figure b,.gap-shortfall__figure b,.door__figure,
.shrink__gap strong,.chart-result>strong,.price-card__value strong,
.price-card__fee,.stack__count strong,.planner-field__head output,
.founding__perk-val,.strip li b{
font-family:var(--display);
font-weight:var(--fw-bold);
font-variant-numeric:tabular-nums lining-nums;
letter-spacing:-.03em;
}
.chart svg text,.gap-bar__val,.shrink__bar em,.stack__facts dd{
font-family:var(--sans);
font-variant-numeric:tabular-nums lining-nums;
}
/* Text-level polish that costs nothing and reads as care. */
h1,h2,h3,.display,.stage__head h2{text-wrap:balance}
p,li,dd{text-wrap:pretty}
/* ═══════════════════════════════════════════════════════════════════════
4 · GEOMETRY — 13 radii collapse to 4
The pill button is the loudest dated signal on the page, so it goes
first: buttons are 10px rectangles now.
═══════════════════════════════════════════════════════════════════════ */
.btn,.btn--primary,.btn--ghost,.nav__cta,.doors__cta,.cinema__tap,
.amt,.mobile-join a,.tgv-submit,.chip,.beat__support span,
.schedule-control button,.horizon-control button,.beat__tag,
.chart-result>em,.money-source,.proof-table-card__label span{
border-radius:var(--r-sm);
}
.schedule-control__options,.horizon-control,.mobile-join,
.currency-input,.tgv-field input,.beat-compare,.evnotes,
.loss-card,.beat__visual,.phone__screen,.founding__perk-val,
.hero__method,.cs__price,.cs__metal{
border-radius:var(--r-md);
}
.beat,.chart,.gap-bars-panel,.gap-shortfall,.door,.money-job,
.proof-table-card,.price-card,.founding,.shrink,.coin-planner,
.join__form,.process-frame,.terms-strip,.phone{
border-radius:var(--r-lg);
}
.gap-bar__track,.gap-bar__fill,.shrink__bar,.founding__track,
.founding__track b,.beat-compare__rows i,.beat-compare__rows i b,
.hero__range::-webkit-slider-runnable-track{
border-radius:var(--r-xs);
}
.coin-stack__coin,.chart__start,.chart__end{border-radius:var(--r-circle)}
/* ═══════════════════════════════════════════════════════════════════════
5 · ELEVATION & EDGES — 8 shadows collapse to 2
═══════════════════════════════════════════════════════════════════════ */
.beat,.chart,.gap-bars-panel,.gap-shortfall,.door,.money-job,
.price-card,.founding,.shrink,.loss-card,.beat-compare,.terms-strip,
.proof-table-card,.evnotes,.hero__method{
box-shadow:none;
border:1px solid var(--border);
background:var(--s-1);
}
.evnotes,.hero__method,.beat-compare,.loss-card{background:var(--s-2)}
.proof-table-card,.coin-planner{box-shadow:var(--e-1)}
.phone{box-shadow:var(--e-2)}
.join__form{box-shadow:var(--e-1);border:1px solid var(--border);background:var(--s-1)}
/* Hover is a border and a shadow step, not a jump. */
.beat{transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
.beat:hover{border-color:var(--acc-line);box-shadow:var(--e-1);transform:none!important}
/* Section joins: one hairline, no background steps. */
main>section+section{border-top:1px solid var(--border)}
.gap,.doors{background:var(--s-1)}
.solution-intro,.pricing{background:var(--s-0)}
.join{background:var(--s-0)}
.hero{background:var(--s-0)}
.evidence-film{background:var(--s-0)}
.proof{background:var(--s-0)}
.mechanism{background:var(--s-1)}
.footer{background:var(--s-1);border-top:1px solid var(--border)}
/* The head rule was a gold gradient bar; a hairline is quieter and reads
as typography rather than decoration. */
.stage__head::after,.gap__head::after{
width:32px;height:1px;background:var(--acc);opacity:.5;
}
/* ═══════════════════════════════════════════════════════════════════════
6 · CONTROLS — flat, rectangular, one accent
═══════════════════════════════════════════════════════════════════════ */
.btn--primary,.nav__cta,.doors__cta,.cinema__tap,.mobile-join a,.tgv-submit{
background:var(--acc);
color:var(--acc-ink);
border:1px solid transparent;
box-shadow:none;
text-shadow:none;
font-family:var(--sans);
font-weight:var(--fw-bold);
letter-spacing:-.005em;
transition:background var(--dur-1) var(--ease),transform var(--dur-1) var(--ease);
}
.btn--primary:hover,.nav__cta:hover,.doors__cta:hover,
.cinema__tap:hover,.mobile-join a:hover,.tgv-submit:hover{
background:var(--gold-ink-hover);
color:var(--acc-ink);
transform:none;
box-shadow:none;
}
.btn--primary:active,.nav__cta:active,.cinema__tap:active,.tgv-submit:active{
transform:scale(.985);
}
.tgv-submit>span{transition:transform var(--dur-1) var(--ease)}
.tgv-submit:hover>span{transform:translateX(2px)}
.btn--ghost{
background:transparent;
border:1px solid var(--border);
color:var(--ink-1);
font-weight:var(--fw-semi);
box-shadow:none;
}
.btn--ghost:hover{border-color:var(--ink-4);background:var(--s-1);transform:none}
.btn--ghost span{color:var(--acc)}
/* Amount chips: rectangles, and the selected one is a fill rather than a
tinted outline. */
.amt{
background:var(--s-1);
border:1px solid var(--border);
color:var(--ink-2);
font-family:var(--sans);
font-weight:var(--fw-semi);
font-variant-numeric:tabular-nums;
box-shadow:none;
transition:border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease),background var(--dur-1) var(--ease);
}
.amt:hover{border-color:var(--ink-4);color:var(--ink-1)}
.amt.is-on{background:var(--ink-1);border-color:var(--ink-1);color:var(--s-1)}
.amt:active{transform:scale(.98)}
/* Segmented controls: a sliding light plate on a sunken well. */
.schedule-control__options{background:var(--s-2);border:1px solid var(--border);padding:3px}
.schedule-control button{
font-family:var(--sans);font-weight:var(--fw-semi);color:var(--ink-3);
transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease);
}
.schedule-control button:hover{color:var(--ink-1)}
.schedule-control button[aria-checked="true"]{
background:var(--s-1);color:var(--ink-1);box-shadow:var(--e-1);
}
/* Range inputs: 3px rail, precise thumb, no glow. */
.hero__range::-webkit-slider-runnable-track{height:3px;background:var(--border)}
.hero__range::-webkit-slider-thumb{
width:20px;height:20px;margin-top:-8.5px;border:2px solid var(--s-1);
background:var(--loss);box-shadow:var(--e-1);
}
.hero__range::-moz-range-track{height:3px;background:var(--border)}
.hero__range::-moz-range-progress{height:3px;background:var(--loss)}
.hero__range::-moz-range-thumb{width:16px;height:16px;border:2px solid var(--s-1);background:var(--loss);box-shadow:var(--e-1)}
.planner-field--amount input[type="range"]{
height:3px;
background:linear-gradient(90deg,var(--acc) 0 var(--fill),var(--border) var(--fill) 100%);
}
.planner-field--amount input[type="range"]::-webkit-slider-thumb{
width:20px;height:20px;border:2px solid var(--s-1);background:var(--acc);box-shadow:var(--e-1);
}
.planner-field--amount input[type="range"]::-moz-range-thumb{
width:16px;height:16px;border:2px solid var(--s-1);background:var(--acc);box-shadow:var(--e-1);
}
/* Form fields */
.tgv-field input{
background:var(--s-2);border:1px solid var(--border);
color:var(--ink-1);font-weight:var(--fw-medium);
}
.tgv-field input::placeholder{color:var(--ink-3);font-weight:var(--fw-medium)}
.tgv-field input:focus{
background:var(--s-1);border-color:var(--acc);
box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 14%,transparent);
}
@supports not (color:color-mix(in srgb,red,blue)){
.tgv-field input:focus{box-shadow:0 0 0 3px rgba(138,102,19,.14)}
}
.tgv-note{color:var(--ink-3);font-family:var(--sans)}
.skip{background:var(--ink-1);color:var(--s-1);border-radius:var(--r-sm)}
/* ═══════════════════════════════════════════════════════════════════════
7 · DATA — gradients out, hairlines in
The numbers and their proportions are identical. Only the ink changes.
═══════════════════════════════════════════════════════════════════════ */
.shrink__bar{
color:var(--s-1);
font-family:var(--sans);
font-weight:var(--fw-bold);
box-shadow:none;
text-shadow:none;
height:40px;
}
.shrink__bar--then{background:var(--acc);color:var(--acc-ink)}
.shrink__bar--now{background:var(--loss);color:#fff}
.shrink__gap strong{color:var(--loss)}
.beat-compare{border:1px solid var(--border)}
.beat-compare__rows i{background:var(--border);height:4px}
.beat-compare__rows i b{background:var(--loss)}
.beat-compare__rows strong,.beat-compare__rows span{font-family:var(--sans)}
.beat-compare__rows strong{color:var(--loss);font-weight:var(--fw-bold)}
.chart__grid line{stroke:var(--border);stroke-width:1}
.chart__grid line:nth-child(4){stroke:var(--ink-4);stroke-dasharray:2 4}
.chart__axis text{fill:var(--ink-3);font-weight:var(--fw-semi)}
.chart__line--cash{stroke:var(--ink-4);stroke-width:2;stroke-dasharray:4 4}
.chart__line--snp{stroke:#2E5C8A;stroke-width:2.25}
.chart__line--gold{stroke:var(--acc);stroke-width:3}
.chart__direct{font-weight:var(--fw-bold)}
.chart__direct--gold{fill:var(--acc)}
.chart__direct--snp{fill:#2E5C8A}
.chart__direct--cash{fill:var(--ink-3)}
.chart__end--gold{fill:var(--acc)}
.chart__end--cash{fill:var(--ink-4)}
.chart__start{fill:var(--s-1);stroke:var(--ink-1)}
.chart-result{border:1px solid var(--border);background:var(--s-1)}
.chart-result--gold{border-color:var(--acc-line);background:var(--acc-wash)}
.chart-result--snp{border-color:#D3DEEA;background:#F4F7FA}
.chart-result--cash{border-color:var(--border);background:var(--s-2)}
.chart-result--gold>strong{color:var(--acc)}
.chart-result--cash>strong{color:var(--ink-1)}
.chart-result>em{background:var(--loss);color:#fff;font-family:var(--sans);border-radius:var(--r-xs)}
.chart__takeaway{
background:var(--s-2);border:0;border-left:2px solid var(--loss);
border-radius:0 var(--r-sm) var(--r-sm) 0;color:var(--ink-2);
}
.chart__takeaway strong{color:var(--ink-1)}
.founding__track{background:var(--border);height:4px}
.founding__track b{background:var(--acc)}
.vtable th{background:var(--s-2);color:var(--ink-1);font-family:var(--sans)}
.vtable td{color:var(--ink-2)}
.vtable .oldcol{color:var(--loss);font-weight:var(--fw-semi)}
.vtable .inccol{color:var(--gain);font-weight:var(--fw-bold)}
.vtable tr.total td{background:var(--s-2);border-top:1px solid var(--ink-1)}
.vtable tbody tr{transition:background var(--dur-1) var(--ease)}
.vtable tbody tr:not(.total):hover{background:var(--s-2)}
/* ═══════════════════════════════════════════════════════════════════════
8 · ACCENT RESTRAINT
Gold was on ~50 elements. These give it back to the neutrals.
═══════════════════════════════════════════════════════════════════════ */
.eyebrow,.chart__kicker,.evnotes__title,.price-card__label,
.solution-intro__fact,.money-job small,.money-source,
.proof-table-card__label span,.jzone__label,.node-icon::after,
.beat__tag b,.beat__ref sup,.evnotes__list li::marker,
.method__list li::marker{color:var(--ink-3)}
.founding__perk-val{background:var(--s-2);color:var(--ink-1)}
.solution-intro__steps li::before{
background:var(--s-2);border:1px solid var(--border);color:var(--ink-1);
font-family:var(--sans);
}
.brand>span>span,.brand--footer>span{color:var(--acc)}
.metal-text{
color:var(--acc)!important;
background:none!important;
-webkit-text-fill-color:currentColor!important;
}
.display>span:not(.mask),.solution-intro__gold{color:var(--acc)}
.loss-text{color:var(--loss)!important;-webkit-text-fill-color:currentColor}
.solution-intro__silver{color:#6B7480;text-shadow:none}
.solution-intro__habit{color:var(--gain)}
/* Fine print, one colour. */
.hero__method,.evnotes__shared,.evnotes__list,.chart__note,.beat__ref a,
.price-card__note,.pricing-disclosure,.proof-table-card__note,
.join__action>p,.footer p,.footer a,.footer__disclosure,
.field-hint,.planner-basis,.range-scale,.founding__label,
.evidence-context-note{color:var(--ink-3)}
.beat__ref a:hover{color:var(--ink-1)}
.footer nav a:hover{color:var(--acc)}
/* ═══════════════════════════════════════════════════════════════════════
9 · NAV & JOURNEY RAIL
The rail keeps every chapter, label and segment. It stops being a
scrollytelling ornament and becomes an instrument: 1px channels, no
giant ghost numerals, no poured-metal gradient.
═══════════════════════════════════════════════════════════════════════ */
.nav{
background:color-mix(in srgb,var(--s-0) 82%,transparent);
backdrop-filter:saturate(180%) blur(16px);
-webkit-backdrop-filter:saturate(180%) blur(16px);
border-bottom:1px solid transparent;
}
@supports not (color:color-mix(in srgb,red,blue)){.nav{background:rgba(250,250,248,.86)}}
.nav.is-stuck{background:color-mix(in srgb,var(--s-0) 88%,transparent);border-color:var(--border);box-shadow:none}
.brand{font-family:var(--display);font-weight:var(--fw-bold);letter-spacing:-.02em;color:var(--ink-1)}
.brand__mark{border-radius:var(--r-circle);filter:none;box-shadow:var(--e-1)}
.brand:hover .brand__mark{filter:none}
.brand--footer{gap:9px}
.brand__word{display:inline;white-space:nowrap}
.jrule{border-top:1px solid var(--border);padding-bottom:14px}
.jzone{padding-left:0}
.jzone__ghost{
position:static;
font-family:var(--sans);
font-size:var(--fs-label);
font-weight:var(--fw-bold);
letter-spacing:var(--tr-label);
color:var(--ink-4);
line-height:1;
}
.jzone.is-active .jzone__ghost,.jzone.is-past .jzone__ghost{color:var(--acc)}
.jzone__head{gap:9px;align-items:center;min-height:0;margin-top:6px}
.jzone__name{
font-family:var(--sans);font-size:var(--fs-xs);
font-weight:var(--fw-semi);letter-spacing:0;color:var(--ink-3);
}
.jzone.is-active .jzone__name{color:var(--ink-1)}
.jzone.is-past .jzone__name{color:var(--ink-2)}
.jzone__label{font-family:var(--sans);font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--ink-3)}
.jzone__bar{margin-top:9px;gap:4px}
.jseg i{
height:2px;border-radius:1px;background:var(--border);
box-shadow:none;overflow:hidden;
}
.jseg:hover i{background:var(--ink-4);box-shadow:none}
.jseg i b{
background:var(--acc);box-shadow:none;border-radius:1px;
transition:width var(--dur-2) var(--ease);
}
.jseg i b::before,.jseg i b::after{display:none}
.jseg.is-active i{height:2px}
.jrule.is-condensed .jseg i,.jrule.is-condensed .jseg.is-active i{height:2px}
.jrule.is-condensed .jzone__ghost{font-size:var(--fs-label)}
.jrule.is-condensed .jzone__name{font-family:var(--sans);font-size:var(--fs-xs)}
/* ═══════════════════════════════════════════════════════════════════════
10 · DARK PANELS — the phone and the planner result
═══════════════════════════════════════════════════════════════════════ */
.phone{background:var(--s-inv);border:1px solid rgba(255,255,255,.07)}
.phone__screen{background:#0B0B09}
.phone__rail{border-color:rgba(217,174,69,.2);background:rgba(217,174,69,.05);border-radius:var(--r-sm)}
.phone__rail>i b{background:var(--acc-hi)}
.phone__rail>em{color:var(--acc-hi);font-family:var(--sans)}
.cs__kicker{color:var(--acc-hi)}
.cs__amount,.cs__price b,.cs__count b,.cs__summary b{color:var(--acc-hi);font-family:var(--display);letter-spacing:-.03em}
.cs__cta{background:var(--acc-hi);color:var(--ink-1);border-radius:var(--r-sm)}
.coin-planner{border:1px solid var(--border);overflow:hidden}
.coin-planner__result{background:var(--s-inv)}
.coin-planner__result::before{display:none}
.stack__kicker{color:var(--ink-inv-2)}
.stack__count strong{color:var(--ink-inv)}
.stack__count span{color:var(--ink-inv-2)}
.stack__weight{color:var(--acc-hi)}
.stack__facts{border-color:rgba(255,255,255,.1)}
.stack__facts dt{color:var(--ink-inv-2)}
.stack__facts dd{color:var(--ink-inv)}
.coin-stack__more{color:var(--ink-inv-2);font-family:var(--sans)}
.horizon-control{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);border-radius:var(--r-sm);padding:3px}
.horizon-control button{color:var(--ink-inv-2);font-family:var(--sans);font-weight:var(--fw-semi)}
.horizon-control button:hover{color:var(--ink-inv)}
.horizon-control button[aria-checked="true"]{background:var(--acc-hi);color:var(--ink-1)}
/* The stack: coins read as coins, not as soft pills. */
.coin-stack{gap:11px 0}
.coin-stack__coin{
width:36px;height:36px;margin-right:-10px;
background-image:url("silver-coin-120.webp");
box-shadow:0 0 0 .5px rgba(255,255,255,.2),2px 3px 5px rgba(0,0,0,.55);
filter:none;
}
.coin-stack__coin:last-of-type{margin-right:0}
/* ═══════════════════════════════════════════════════════════════════════
11 · EVIDENCE CARDS
Same three cards, same figures, same photograph. The two drawn plates
keep the mass they gained, restated flat.
═══════════════════════════════════════════════════════════════════════ */
.beat{gap:14px}
.beat__visual{background:var(--s-2);border:1px solid var(--border)}
.beat--food .beat__visual,.beat--ei .beat__visual,.beat--economy .beat__visual{
background:var(--loss-wash);border-color:transparent;
}
.beat__figure b{color:var(--loss)}
.beat--ei .beat__visual::before{
content:"INCOME\A ↓";white-space:pre;width:118px;height:118px;
display:grid;place-items:center;border-radius:var(--r-circle);
background:var(--loss);color:#fff;
font-family:var(--sans);font-size:17px;font-weight:var(--fw-bold);
letter-spacing:.06em;line-height:1.15;text-align:center;box-shadow:none;
}
.beat--economy .beat__visual::before{
content:"Q4 ↓ Q1";padding:18px 24px;border-radius:var(--r-md);
background:var(--s-1);border:1px solid var(--border);color:var(--loss);
font-family:var(--sans);font-size:21px;font-weight:var(--fw-bold);
letter-spacing:.01em;box-shadow:none;
}
.beat--ei .beat__line,.beat--economy .beat__line{min-height:3.9em}
.beat__tag{background:var(--s-1);border:1px solid var(--border);box-shadow:none}
.beat__swap{background:var(--s-1);border:1px solid var(--border);border-radius:var(--r-sm)}
.evnotes{border-top:1px solid var(--acc-line)}
.evnotes__list li:target,.method__list li:target{
background:var(--acc-wash);box-shadow:0 0 0 6px var(--acc-wash);
}
/* ═══════════════════════════════════════════════════════════════════════
12 · PRICING
═══════════════════════════════════════════════════════════════════════ */
.price-card{display:flex;flex-direction:column;background:var(--s-1)}
.price-card__label{min-height:2.7em;margin-bottom:0}
.price-card__value{margin-top:18px;min-height:0;justify-content:flex-start}
.price-card__value strong{color:var(--ink-1)}
.price-card__fee{color:var(--acc)}
.price-card__support{margin-top:auto;padding-top:16px;color:var(--ink-2)}
.price-card--primary{border:1px solid var(--acc-line);background:var(--acc-wash)}
.price-card--secondary{background:var(--s-1);border-color:var(--border)}
.terms-strip{background:var(--border);border:1px solid var(--border)}
.terms-strip p{background:var(--s-1)}
.terms-strip strong{color:var(--ink-1);font-family:var(--sans);letter-spacing:-.005em}
.terms-strip span{color:var(--ink-3)}
.founding{padding:22px 26px;background:var(--s-1)}
.founding__label{margin:0;color:var(--ink-1);font-size:var(--fs-sm);font-weight:var(--fw-semi);line-height:1.5}
.founding__perks{margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}
.founding__perk-txt{color:var(--ink-2)}
.founding__perk-txt b{color:var(--ink-1)}
/* ═══════════════════════════════════════════════════════════════════════
13 · HERO NOTES BLOCK
═══════════════════════════════════════════════════════════════════════ */
.hero{min-height:0;padding-top:216px}
.hero__inner{align-items:start}
.hero__copy,.shrink{align-self:center}
.hero__method{
max-width:820px;margin-top:34px;padding:16px 20px;
border:1px solid var(--border);border-top:1px solid var(--acc-line);
background:var(--s-2);font-size:var(--fs-xs);line-height:1.7;text-align:left;
}
.hero__replacement{color:var(--ink-2);font-weight:var(--fw-medium)}
.hero__replacement b{color:var(--loss);font-weight:var(--fw-bold)}
.hero__picker-label{color:var(--ink-3)}
.hero__picker-label b{color:var(--ink-1)}
.chart__note{margin-top:18px;padding:14px 0 0;border-top:1px solid var(--border);font-size:var(--fs-xs);line-height:1.7}
/* ═══════════════════════════════════════════════════════════════════════
14 · MOTION
10 easing curves become 2. Reveals are shorter, travel less, and stagger.
═══════════════════════════════════════════════════════════════════════ */
.reveal{
opacity:0;transform:translateY(8px);
transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease);
}
.reveal.is-in{opacity:1;transform:none}
.reveal--2{transition-delay:60ms}
.reveal--3{transition-delay:120ms}
.mask>span{transition:transform 620ms var(--ease),opacity 200ms linear}
.amt,.btn,.nav__cta,.jseg i,.schedule-control button,.horizon-control button{
transition-timing-function:var(--ease);
}
/* ── ATMOSPHERE ──
.grain, .scroll-line, .cursor-light, .particle-field, .ambient and
.join-particles all exist in the markup and were killed by a single
display:none!important in brand.css. The two that are material rather
than gimmick come back: a fine grain so the paper reads as a surface,
and a 2px scroll indicator. The canvas-driven particle fields stay off
— they were the dated part. */
.grain{
display:block!important;
position:fixed;inset:0;z-index:9999;pointer-events:none;
opacity:.032;mix-blend-mode:multiply;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* (The dark-mode grain variant was removed with the dark theme.) */
.scroll-line{
display:block!important;
position:fixed;left:0;top:0;z-index:9998;height:2px;width:0;
background:var(--acc);
}
@media (prefers-reduced-motion:reduce){
.grain{display:none!important}
.reveal,.mask>span{opacity:1!important;transform:none!important}
}
/* ═══════════════════════════════════════════════════════════════════════
15 · TAP HINT
The drawn SVG hand was a rounded rectangle with one raised digit and it
read as an obscene gesture. Replaced with hand.png, cut from its
1536x1024 source: cropped on the alpha channel to the artwork, exported
at 200 and 400 CSS px. The artwork carries its own tap arcs, so the
separate CSS ripple is dropped rather than doubled.
═══════════════════════════════════════════════════════════════════════ */
.cs__hint{
position:absolute;left:50%;bottom:27%;
display:block;width:62px;height:auto;
transform:translateX(-50%);
pointer-events:none;
}
.cs__hint-ripple{display:none}
/* brand.css absolutely positions the hand with inset:0. That was right for
an SVG filling a fixed-size wrapper, but with an it took the hand
out of flow, collapsed the wrapper to zero height, and dropped the
artwork on top of the "Tap to see..." caption. Returning it to flow lets
the wrapper size to the image and the bottom offset mean something. */
.cs__hint-hand{
position:static;inset:auto;
display:block;width:100%;height:auto;
filter:drop-shadow(0 8px 16px rgba(0,0,0,.55));
animation:handTap 2.3s var(--ease) infinite;
transform-origin:70% 82%;
}
@keyframes handTap{
0%,100%{transform:translateY(0) scale(1)}
34%{transform:translateY(7px) scale(.97)}
52%{transform:translateY(0) scale(1)}
}
@media (prefers-reduced-motion:reduce){
.cs__hint-hand{animation:none}
}
/* ═══════════════════════════════════════════════════════════════════════
16 · RHYTHM
═══════════════════════════════════════════════════════════════════════ */
.scene,.evidence-film{padding-top:clamp(76px,8vw,112px);padding-bottom:clamp(76px,8vw,112px)}
.proof--compact{padding-top:clamp(56px,6vw,80px);padding-bottom:clamp(56px,6vw,80px)}
.method{background:var(--s-2);border-top:1px solid var(--border)}
.evnotes{margin-top:20px}
.stage__head{margin-bottom:30px}
.gap__head{margin-bottom:32px}
.pricing-grid{margin-top:32px}
.coin-planner{margin-top:clamp(44px,6vw,64px)}
@media (max-width:980px){ .hero{padding-top:198px} }
@media (max-width:720px){
.hero{padding-top:152px;padding-bottom:60px}
.scene{padding-left:18px;padding-right:18px}
.hero__method{margin-top:26px;padding:14px 15px}
.display--join,.mechanism__copy .display,.solution-intro__action{max-width:none}
.beat--ei .beat__line,.beat--economy .beat__line{min-height:0}
.beat--ei .beat__visual::before{width:92px;height:92px;font-size:15px}
.beat--economy .beat__visual::before{padding:14px 18px;font-size:18px}
.price-card__value{margin-top:14px}
.jzone{padding-left:0}
.cs__hint{width:52px}
.coin-stack__coin{width:30px;height:30px;margin-right:-9px}
}
/* ═══════════════════════════════════════════════════════════════════════
17 · CONVERGENCE
After the system landed I re-measured the rendered page and 10 radii,
6 shadows and 9 weights were still leaking from brand.css rules the
system had not intercepted. These close the gap. Each entry was found
by querying computed styles across every visible element, not guessed.
═══════════════════════════════════════════════════════════════════════ */
/* --r-pill was still 999px, and brand.css reads it in 24 places. Pointing
it at the 10px step retires every remaining capsule in one line: the
mobile bar, the chips, the segmented controls, the rails. */
:root{--r-pill:var(--r-sm)}
/* waitlist.css sets the submit radius and an inset foil highlight of its
own. It predates this system, so both are restated here. */
.tgv-submit{border-radius:var(--r-sm)!important;box-shadow:none!important}
/* Thin bars: 1px on a 2-3px rail, not a 99px capsule. */
.phone__rail>i,.phone__rail>i b,.founding__track,.founding__track b,
.loss-caption>i,.loss-caption b,.balance-line i,.jseg i,.jseg i b{
border-radius:1px;
}
.founding__track,.founding__track b{border-radius:2px}
/* Inset "lit metal" highlights — the last of the skeuomorphism. */
.jseg i b,.founding__track b,.shrink__bar,.phone__rail>i b{box-shadow:none}
/* The pulsing ring around the film button was a gold glow keyed to the old
palette. A modern primary action does not throb. */
.cinema__tap>i{display:none}
/* chart-result was the one card still on brand.css's 16px. */
.chart-result{border-radius:var(--r-md)}
/* Weight normalisation. brand.css uses 650/750/850/900 in ~25 places;
with five loaded weights those snap to neighbours anyway, so this only
makes the intent explicit and keeps the scale to four. */
.price-card__fee,.tgv-note,.founding__joined,.money-job strong,
.hero__replacement,.mobile-join span{font-weight:var(--fw-medium)}
.beat__ref a,.srcref a,.cs__idle,.jzone__label,.stack__count span,
.stack__weight,.chart__unit,.proof__sub,.terms-strip strong,
.founding__label,.cs__foot,.cs__summary{font-weight:var(--fw-semi)}
.vtable th,.vtable td.oldcol,.vtable td.inccol,.vtable tr.total td,
.beat-compare__rows strong,.shrink__gap strong,.chart-result>em,
.founding__perk-txt b,.beat__tag,.beat__tag b,.eyebrow,.hero__picker-label,
.hero__picker-label b,.hero__replacement b,.stack__facts dd,
.horizon-control button,.schedule-control button,.amt,
.planner-field__head output,.price-card__label,.chart__kicker,
.evnotes__title,.stack__kicker,.shrink__tag,.chart-result__label,
.beat-compare__title,.stack__facts dt,.phone__tag,.door__tag,
.solution-intro__fact,.founding__perk-val,.strip li b,
.proof-table-card__label span,.money-job small{font-weight:var(--fw-bold)}
/* Two easings, everywhere. brand.css leaves .nav and the inputs on the
browser default. */
.nav,.nav.is-stuck,input,button,select,textarea,a,.beat,.amt,
.price-card,.vtable tbody tr,.brand__mark{
transition-timing-function:var(--ease);
}
/* html was inheriting a serif stack from the retired --serif token. */
html{font-family:var(--sans)}
/* Last two capsules, located by walking the DOM rather than guessing: the
colour swatch in each chart-result label, and the planner's range track
(brand.css hard-codes 999px on the input itself, not via --r-pill). */
.chart-result__label i{border-radius:1px}
.planner-field--amount input[type="range"]{border-radius:2px}
/* ═══════════════════════════════════════════════════════════════════════
18 · HERO CLEARANCE, GAP AND BAR COLOUR
═══════════════════════════════════════════════════════════════════════ */
/* The hero's top padding is not rhythm — it is reserved clearance for the
fixed nav plus the journey rail, measured at 173px. Section 16 sets
padding-top on .scene, and .hero is also a .scene at equal specificity,
so whichever came last won and the heading slid under the rail. Scoping
to .scene.hero (0,2,0) makes the intent win regardless of order. I made
this exact mistake in the previous pass; this time it is specificity,
not source order, that guarantees it. */
.scene.hero{padding-top:212px}
@media (max-width:980px){ .scene.hero{padding-top:196px} }
/* Measured, not guessed: the nav plus rail is 153px at this width, and the
grotesk rail sits taller than the old absolutely-positioned numerals did.
150px left the eyebrow 3px under the rail. */
@media (max-width:720px){ .scene.hero{padding-top:182px;padding-bottom:60px} }
/* brand.css puts a 76px row gap on the hero grid, which stacked on top of
the notes block's own margin and opened a ~110px void between the amount
chips and the fine print. The column gap is still wanted. */
.hero__inner{row-gap:0}
/* The 2015 bar: --acc is dark enough to carry white text (5.5:1) but reads
brown at bar scale. --acc-hi with near-black ink is both brighter and a
far better ratio, and it matches the gold used on the dark panels. */
.shrink__bar--then{background:var(--acc-hi);color:var(--ink-1)}
/* Headings must not inherit body ink. Setting `body{color:--ink-2}` gave
every heading the body grey unless it carried its own colour, so
"You lost" rendered at 7:1 grey beside a --loss red figure instead of
near-black. brand.css never set a heading colour because its body was
already --text. */
h1,h2,h3,.display,.display--hero,.display--join,.stage__head h2,
.proof__title,.chart h3,.coin-planner__intro h3,.beat__line,
.solution-intro__action,.founding__count,.mask>span{color:var(--ink-1)}
.display .loss-text,.loss-text{color:var(--loss)!important}
.display>span:not(.mask),.metal-text,.solution-intro__gold{color:var(--acc)!important}
.solution-intro__silver{color:#6B7480!important}
.solution-intro__habit{color:var(--gain)!important}
/* The inactive chapter numerals were on --ink-4, which is a non-text token
(2.38:1 measured). They are aria-hidden, so my own contrast sweep skipped
them — axe did not, and it was right: hiding text from assistive tech
does not excuse making it unreadable for everyone else. --ink-3 is 4.6:1
and still recedes clearly behind the active chapter. */
.jzone__ghost{color:var(--ink-3)}
.jzone.is-active .jzone__ghost,.jzone.is-past .jzone__ghost{color:var(--acc)}
/* ═══════════════════════════════════════════════════════════════════════
19 · EVIDENCE REVEAL
The three figures in section 02 reveal on tap, behind a segmented
progress bar. Built by evidence-reveal.js; every selector below is
inert until that script marks the DOM, so the section degrades to the
plain three-card grid with no JavaScript.
The "Sources and important context" block is deliberately absent from
this block — it is never sealed, never animated, always visible.
═══════════════════════════════════════════════════════════════════════ */
/* ── The rail ──
Three segments echoing the journey rail at the top of the page, so the
language of "progress through a chapter" is consistent rather than
invented twice. */
.ereveal{
display:flex;
align-items:center;
gap:clamp(16px,2.5vw,28px);
max-width:var(--shell);
margin:0 auto 20px;
}
.ereveal__track{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:5px;
flex:1;
min-width:0;
}
.ereveal__track i{
position:relative;
display:block;
height:2px;
border-radius:1px;
background:var(--border);
overflow:hidden;
}
.ereveal__track i b{
position:absolute;
inset:0 auto 0 0;
width:0;
border-radius:inherit;
background:var(--acc);
transition:width var(--dur-2) var(--ease);
}
.ereveal__track i.is-filled b{width:100%}
/* The next segment breathes so the eye knows where the tap will land. */
.ereveal__track i.is-next{background:var(--acc-line);animation:erevealNext 2s ease-in-out infinite}
@keyframes erevealNext{0%,100%{opacity:1}50%{opacity:.45}}
.ereveal__meta{display:flex;align-items:center;gap:14px;flex:none}
.ereveal__count{
font-family:var(--sans);
font-size:var(--fs-label);
font-weight:var(--fw-bold);
letter-spacing:var(--tr-label);
color:var(--ink-3);
font-variant-numeric:tabular-nums;
}
.ereveal__tap{
position:relative;
display:inline-flex;
align-items:center;
gap:10px;
min-height:40px;
padding:0 16px;
border:1px solid var(--border);
border-radius:var(--r-sm);
background:var(--s-1);
color:var(--ink-1);
font-family:var(--sans);
font-size:var(--fs-sm);
font-weight:var(--fw-bold);
cursor:pointer;
transition:border-color var(--dur-1) var(--ease),background var(--dur-1) var(--ease);
}
.ereveal__tap:hover{border-color:var(--acc-line);background:var(--s-2)}
.ereveal__tap:active{transform:scale(.985)}
.ereveal__tap[hidden]{display:none}
/* The same hand as the payday film, so "tap here" reads identically in
both places on the page. */
.ereveal__hand{
display:block;
width:19px;
height:auto;
flex:none;
animation:handTap 2.3s var(--ease) infinite;
transform-origin:70% 82%;
}
/* ── Sealed and open cards ──
Sealed payloads stay in flow at zero opacity so the grid never reflows
when a figure lands. That is why the cards keep their full height from
first paint instead of growing three times. */
.beat.is-sealed{cursor:pointer}
.beat.is-sealed .beat__figure,
.beat.is-sealed .beat__line,
.beat.is-sealed .beat-compare,
.beat.is-sealed .beat__ref{
opacity:0;
visibility:hidden;
transform:translateY(10px);
}
.beat .beat__figure,
.beat .beat__line,
.beat .beat-compare,
.beat .beat__ref{
transition:opacity var(--dur-2) var(--ease),
transform var(--dur-2) var(--ease),
visibility var(--dur-2) step-end;
}
.beat.is-open .beat__figure,
.beat.is-open .beat__line,
.beat.is-open .beat-compare,
.beat.is-open .beat__ref{
opacity:1;
visibility:visible;
transform:none;
transition:opacity var(--dur-2) var(--ease),
transform 520ms var(--ease-spring),
visibility 0s;
}
/* Staggered so the figure lands first and its supporting rows follow. */
.beat.is-open .beat__line{transition-delay:70ms}
.beat.is-open .beat-compare{transition-delay:120ms}
.beat.is-open .beat__ref{transition-delay:170ms}
/* A sealed card reads as waiting, not as broken: the plate desaturates
slightly and the border stays quiet until it opens. */
.beat.is-sealed .beat__visual{filter:saturate(.55) contrast(.96);transition:filter var(--dur-2) var(--ease)}
.beat.is-open .beat__visual{filter:none}
.beat.is-sealed:hover{border-color:var(--acc-line)}
.beat.is-sealed:hover .beat__visual{filter:saturate(.8)}
/* The moment of arrival: one quiet ring on the plate, once. */
.beat.is-open .beat__visual{animation:beatLand 620ms var(--ease) 1}
@keyframes beatLand{
0%{box-shadow:0 0 0 0 var(--acc-line)}
60%{box-shadow:0 0 0 7px rgba(138,102,19,0)}
100%{box-shadow:0 0 0 0 rgba(138,102,19,0)}
}
@media (max-width:720px){
.ereveal{flex-direction:column;align-items:stretch;gap:12px;margin-bottom:16px}
.ereveal__meta{justify-content:space-between}
.ereveal__tap{flex:1;justify-content:center}
}
/* Reduced motion: the script has already opened all three and marked the
rail static, so nothing here may animate. */
@media (prefers-reduced-motion:reduce){
.ereveal__track i.is-next{animation:none}
.ereveal__hand{animation:none}
.beat .beat__figure,.beat .beat__line,.beat .beat-compare,.beat .beat__ref{transition:none}
.beat.is-open .beat__visual{animation:none}
}
/* ── Sealed-card skeleton ──
Occupies the payload area of a sealed card so the space reads as pending
rather than empty. Anchored to the card's bottom padding, which is stable
regardless of how tall each card's plate is. Built and removed by
evidence-reveal.js. */
/* Anchored directly beneath the plate, which is where the real figure
lands, so the skeleton previews the layout instead of floating at the
card's foot. The offset is deterministic: brand.css fixes the plate at
210px and the card padding at 28px (140px / 18px on phones). */
.beat__seal{
position:absolute;
left:28px;
right:28px;
top:calc(28px + 210px + 20px);
bottom:26px;
display:grid;
align-content:start;
gap:11px;
pointer-events:none;
}
.beat__seal i{
display:block;
height:9px;
border-radius:3px;
background:linear-gradient(90deg,var(--s-2),var(--border),var(--s-2));
background-size:220% 100%;
animation:sealShimmer 2.4s var(--ease) infinite;
}
.beat__seal i:nth-child(2){animation-delay:.12s}
.beat__seal i:nth-child(3){animation-delay:.24s}
.beat__seal i:nth-child(4){animation-delay:.36s}
@keyframes sealShimmer{
0%{background-position:120% 0;opacity:.75}
50%{background-position:-20% 0;opacity:1}
100%{background-position:120% 0;opacity:.75}
}
@media (max-width:720px){
.beat__seal{left:18px;right:18px;top:calc(18px + 140px + 16px);bottom:18px;gap:9px}
.beat__seal i{height:8px}
}
@media (prefers-reduced-motion:reduce){
.beat__seal i{animation:none}
}