/* ===========================================================================
REVOCLE v2 — homepage
---------------------------------------------------------------------------
Seven full-height colour plates in service-priority order, then a footer.
Graphics are music-native: a groove fan, an audio-fingerprint match, a
channel EQ, a record label. Records, not diagrams.
Above-the-fold content never depends on JS: the hidden state is gated on
html.js, and the hero animates on load in CSS alone.
The nav mark hue-rotates plate by plate and returns to brand orange at
the CTA. The wordmark is unsaturated, so only the mark shifts.
=========================================================================== */
/* ── REVOCLE'S TYPE ───────────────────────────────────────────────────────
Three families from the Indian Type Foundry, all variable — every weight
in one file — plus Instrument Serif, which we already owned, kept for one
job only.
Cabinet Grotesk headlines and the footer wordmark. A display grotesque
with character in the shoulders; carries a 5rem
statement without reading as a template.
Switzer everything structural: body, nav, buttons, labels,
steps, tables. Nine weights and a true italic.
Pally the numbers. 200+, the prices, the hero stats, the
station markers. Warm, slightly quirky figures — this
is the face people will remember.
Instrument Serif italic accent phrases inside headlines, nothing else.
Ahmedabad-drawn type for a Jaipur company, licensed for commercial use.
────────────────────────────────────────────────────────────────────── */
@font-face{font-family:'Cabinet Grotesk';font-style:normal;font-weight:100 900;
font-display:swap;src:url('assets/fonts/CabinetGrotesk-Variable.woff2') format('woff2')}
@font-face{font-family:'Switzer';font-style:normal;font-weight:100 900;
font-display:swap;src:url('assets/fonts/Switzer-Variable.woff2') format('woff2')}
@font-face{font-family:'Switzer';font-style:italic;font-weight:100 900;
font-display:swap;src:url('assets/fonts/Switzer-VariableItalic.woff2') format('woff2')}
@font-face{font-family:'Pally';font-style:normal;font-weight:400 700;
font-display:swap;src:url('assets/fonts/Pally-Variable.woff2') format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;
src:url('assets/fonts/instrumentserif-italic-400-latin.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;
src:url('assets/fonts/instrumentserif-italic-400-latinext.woff2') format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
--display:'Switzer',system-ui,-apple-system,'Segoe UI',sans-serif;
--head:'Cabinet Grotesk','Switzer',system-ui,sans-serif;
--num:'Pally','Switzer',system-ui,sans-serif;
--body:'Pally','Switzer',system-ui,sans-serif;
--serif:'Instrument Serif',Georgia,'Times New Roman',serif;
--mono:var(--display); /* labels run in the sans now, not a mono */
--ink:#141109; --ink-2:#4a4335; --paper:#FFF7EA;
--p-hero:#130A2C; --p-hero-2:#26105A; --hero-ink:#F2EEFF; --hero-dim:#B4A6E4;
--lime:#CCFF44;
--p-dist:#FFF7EA; --blue:#1F49FF; --blue-soft:#E7ECFF;
--vio:#4C1FD6; --vio-l:#DCD3FF; /* identity accent */
--p-cms:#210711; --cms-ink:#FFEFF1; --cms-dim:#D9A3AC; --coral:#FF5C6B;
/* Promotions is the LIME ROOM — the loud one. Ink on lime measures 16.12,
ink-2 on lime 8.9, indigo on lime 7.26: full muted tier available,
unlike the old magenta field which had none. */
--p-promo:#CCFF44; --promo-ink:#141109; --promo-dim:#4a4335;
--pop:#4C1FD6; --pop-ink:#F2EEFF;
--p-fund:#16110C; --fund-ink:#F5EFE2; --fund-dim:#A99C86;
--gold:#EFD9A8; --gold-line:rgba(239,217,168,.34);
--p-price:#0F2BD6;--yellow:#FFDA47; --price-ink:#FFFFFF; --price-dim:#C3CEFF;
--p-cta:#CCFF44;
--p-foot:#0E0C08; --foot-ink:#F6F3EA; --foot-dim:#A9A296;
--r-m:14px; --r-l:22px; --r-pill:999px;
--gut:clamp(18px,4.6vw,64px);
--maxw:1440px; --nav-h:80px;
--pr:clamp(20px,2.6vw,42px);
--ease:cubic-bezier(.22,1,.36,1);
--tone:#CCFF44; --logo-rot:0deg;
}
/* Cross-document cross-fade on internal navigation (View Transitions API).
With hover-prefetch warming the next page, navigation reads as one
continuous surface. Browsers without support ignore this entirely. */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){
@view-transition{navigation:none}
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;
/* ASSISTED scroll, not presentation scroll.
This was `y mandatory` with `scroll-snap-stop:always`, which meant one
gesture moved exactly one plate and the page could never be scrolled
through freely — it read as a slide deck rather than a website, which is
the complaint that changed it.
`proximity` only pulls when the reader has already come to rest near an
edge, so a long flick travels as far as it was thrown and a short nudge
still lands square. Removing snap-stop is the other half: it is what
forced every single plate to be visited on the way past. */
scroll-snap-type:y proximity;scroll-padding-top:0}
body{font-family:var(--display);font-size:clamp(15px,1.06vw,17.5px);line-height:1.65;
font-weight:450;color:var(--ink);background:var(--paper);
-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--tone);color:var(--ink)}
/* ink on the blue tone measures 3.10 — selected text in the distribution
plate takes white (6.08) instead */
#dist ::selection{background:var(--blue);color:#fff}
:focus-visible{outline:3px solid var(--tone);outline-offset:3px;border-radius:4px}
/* ── 2026-08-18 phase-2 polish ──────────────────────────────────────────────
Pressed state for everything button-shaped: the element sinks into the
paper like a press hitting type. The `translate` property (not transform)
so the .mag magnetic-hover inline transform cannot override it. */
.btn:active,.nav-cta:active,.hero-path a:active,.m-more:active,
.socials a:active,.go:active{translate:2px 2px}
/* widow guard: browsers that know text-wrap:pretty stop leaving a lone word
on the last line; everyone else is unaffected. h1/h2 already balance. */
p,li,.lede{text-wrap:pretty}
/* the delivery pipe: an arrow may never dangle at a line end — each arrow
travels with the step it points to */
.pipe .pn{white-space:nowrap}
.pipe .pn i{margin-right:8px}
/* ── ambient ─────────────────────────────────────────────────────────────── */
.grain{position:fixed;inset:-60%;width:220%;height:220%;z-index:95;pointer-events:none;
opacity:.026;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
animation:grain 7s steps(8) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-4%,3%)}
50%{transform:translate(3%,-4%)}75%{transform:translate(-2%,-2%)}100%{transform:translate(2%,3%)}}
.glow{position:fixed;width:480px;height:480px;border-radius:50%;pointer-events:none;z-index:1;
background:radial-gradient(circle,var(--tone),transparent 62%);opacity:.08;
transform:translate(-50%,-50%);left:-999px;top:-999px;
transition:opacity .4s,background .6s}
.progress{position:fixed;inset:0 0 auto;height:3px;z-index:130}
.progress i{display:block;height:100%;width:0;background:var(--tone);
transition:background .5s;box-shadow:0 0 14px var(--tone)}
/* ── nav ─────────────────────────────────────────────────────────────────── */
.nav{position:fixed;inset:0 0 auto;z-index:120;height:var(--nav-h);
display:flex;align-items:center;gap:20px;padding-inline:var(--gut);
transition:transform .45s var(--ease),background .5s,backdrop-filter .5s,border-color .5s;
border-bottom:1px solid transparent}
.nav.hide{transform:translateY(-102%)}
.nav.solid{backdrop-filter:blur(16px)}
.nav[data-ink="light"]{color:#fff}
.nav[data-ink="light"].solid{background:rgba(10,6,26,.62);border-color:rgba(255,255,255,.13)}
.nav[data-ink="dark"]{color:var(--ink)}
.nav[data-ink="dark"].solid{background:rgba(252,248,240,.78);border-color:rgba(20,17,9,.12)}
.brand{display:flex;align-items:center;flex:0 0 auto}
/* ── THE LOCKUP ──────────────────────────────────────────────────────────────
Inlined SVG, not an , so the letters can take currentColor and the
sparkles can take the plate's accent.
The letters inheriting their colour is not a nicety — it is what makes the
dark-on-dark bug impossible. Choosing a black or white variant by hand for
each placement is how the CTA plate ended up with a black logo on an indigo
field and kept it through an entire redesign.
THE EFFECT lives in the block further down — see THE ANIMATION. The short
version: the sparkles take the section's accent as you scroll, and the
logo's own parts do the moving.
────────────────────────────────────────────────────────────────────────── */
.brand .wm{height:clamp(36px,4vw,54px);width:auto;display:block;overflow:visible}
.wm-l{fill:currentColor}
.wm-s{fill:var(--tone,var(--lime));transition:fill .7s var(--ease);
transform-box:fill-box;transform-origin:center}
/* ── THE ANIMATION ───────────────────────────────────────────────────────────
Three things, all built out of the logo's own parts rather than bolted on.
1. THE WINDOW. The star in the "o" is a hole, so a shape drawn behind the
letters shows through it and the letterforms mask it perfectly. A glow
sits there and breathes, drifting magenta -> lime -> magenta. It reads
as light coming through the mark, and it needs no clip path, no mask and
no element ids — which matters, because the lockup appears two or three
times per page and duplicate ids would make every copy share one.
2. THE SPARKLES fire in sequence rather than together — right one, then
left, then a pause — each with a small counter-rotation. Choreographed,
not blinking.
3. THE PRINT SNAP, on hover. Two ghost copies of the letters sit exactly
under them in magenta and lime, invisible because they line up. On hover
they jump out of register and snap back, which is this site's own
misregistration device performed by the logo itself.
Cost: transform and opacity everywhere except the glow, which also animates
`fill` — that is a paint property, not a composited one, but it is a single
circle roughly 20px across and it repaints inside the letterform mask. The
hover snap animates `filter`, which is also paint, and only runs for 620ms
on deliberate interaction. Nothing here triggers layout.
All of it stops for prefers-reduced-motion.
────────────────────────────────────────────────────────────────────────── */
.wm-glow{fill:var(--vio);opacity:0}
/* the glow through the o's star-hole — indigo to lavender, never green */
@keyframes wm-breathe{
0%,100%{opacity:.85;transform:scale(.72);fill:var(--vio)}
38% {opacity:1; transform:scale(1.06);fill:var(--vio-l)}
70% {opacity:.9; transform:scale(.86);fill:var(--vio)}
}
.js .wm-glow{transform-box:fill-box;transform-origin:center;
animation:wm-breathe 6.5s var(--ease) infinite}
.js .foot-brand .wm-glow{animation-delay:2.2s}
.js .cta-mark .wm-glow{animation-delay:1.1s}
.brand:hover .wm-glow{animation:wm-breathe 1.4s var(--ease) 1}
@keyframes wm-spark{
0%,58%,100%{transform:scale(1) rotate(0deg);opacity:.9}
66%{transform:scale(.4) rotate(-25deg);opacity:.5}
74%{transform:scale(1.3) rotate(14deg);opacity:1}
82%{transform:scale(1) rotate(0deg);opacity:.9}
}
.js .wm-s{transform-box:fill-box;transform-origin:center;
animation:wm-spark 6.5s var(--ease) infinite}
/* out of phase, so they read as a sequence rather than a blink */
.js .wm-s1{animation-delay:0s}
.js .wm-s2{animation-delay:.85s}
/* and each placement runs on its own clock */
.js .foot-brand .wm-s{animation-delay:2.2s}
.js .cta-mark .wm-s{animation-delay:1.1s}
/* 4. THE PRINT SNAP, on hover — the site's misregistration device performed
by the logo itself: two colour passes jump out of register and settle. */
@keyframes wm-snap{
0% {filter:drop-shadow(0 0 0 var(--vio)) drop-shadow(0 0 0 var(--lime))}
25% {filter:drop-shadow(-3px 2px 0 var(--vio)) drop-shadow(2.6px -2px 0 var(--lime))}
55% {filter:drop-shadow(2px -1.4px 0 var(--vio)) drop-shadow(-1.8px 1.6px 0 var(--lime))}
100%{filter:drop-shadow(0 0 0 var(--vio)) drop-shadow(0 0 0 var(--lime))}
}
/* 4b. THE SIGNATURE — on load the letterforms write themselves on: every
letter draws at once as an ink stroke, then the fill blooms in beneath
and the stroke evaporates. currentColor, so it is correct over any band. */
@keyframes wm-write{
0% {fill-opacity:0;stroke-opacity:.95;stroke-dashoffset:700}
62% {fill-opacity:0;stroke-opacity:.95;stroke-dashoffset:0}
86% {fill-opacity:1;stroke-opacity:.5}
100%{fill-opacity:1;stroke-opacity:0;stroke-dashoffset:0}
}
.brand .wm-l{stroke:currentColor;stroke-width:2;stroke-opacity:0;
stroke-dasharray:700 700}
.js .brand .wm-l{animation:wm-write 1.2s var(--ease) .08s both}
.brand:hover .wm-l{animation:wm-snap .62s var(--ease) 1}
.brand:hover .wm-s{animation:wm-spark 1s var(--ease) 1}
/* 5. THE NEON MARQUEE — the closing lockup runs a perpetual rim of lime
light along the OUTLINES of the letterforms, a highlight circulating
through every letter at once, with the glow breathing through the star
hole beneath. stroke-dashoffset only: cheap, seamless (the shift equals
one dash period), and it stops under prefers-reduced-motion. Hovering
speeds the light up — the sign wakes. */
@keyframes wm-neon{to{stroke-dashoffset:-590}}
.cta-mark .wm-l{
stroke:var(--vio);stroke-width:4;stroke-linecap:round;
stroke-dasharray:110 480;
animation:wm-neon 4.5s linear infinite}
.cta-mark:hover .wm-l{animation-duration:1.6s}
/* Only where the BACKGROUND is the same lime the sparkles use would they
vanish. #cta and #promo were wrongly listed here — lime is their accent,
not their field, and listing them killed the effect on the two plates that
show it best. */
.band--lime .wm-s{fill:currentColor;opacity:.85}
.brand .on-light{display:none}
.nav[data-ink="dark"] .brand .on-dark{display:none}
.nav[data-ink="dark"] .brand .on-light{display:block}
.links{display:flex;gap:2px;margin-left:auto;align-items:center}
.links a{font-size:14.5px;font-weight:650;padding:9px 14px;border-radius:var(--r-pill);
opacity:.82;transition:opacity .25s,background .25s;white-space:nowrap}
.nav[data-ink="light"] .links a:hover{opacity:1;background:rgba(255,255,255,.14)}
.nav[data-ink="dark"] .links a:hover{opacity:1;background:rgba(20,17,9,.08)}
.nav-cta{flex:0 0 auto;font-size:14.5px;font-weight:700;padding:12px 22px;
border-radius:var(--r-pill);background:var(--tone);color:#141109;white-space:nowrap;
transition:box-shadow .3s,background .6s}
.nav-cta:hover{box-shadow:0 10px 26px -8px var(--tone)}
.burger{display:none;margin-left:auto;flex:0 0 auto;width:44px;height:44px;border:0;
background:transparent;color:inherit;cursor:pointer;
align-items:center;justify-content:center;flex-direction:column;gap:5px}
.burger i{display:block;width:20px;height:2px;background:currentColor;
transition:transform .35s var(--ease),opacity .25s}
.menu-open .burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-open .burger i:nth-child(2){opacity:0}
.menu-open .burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.sheet-menu{position:fixed;inset:0;z-index:115;background:var(--p-hero);color:var(--hero-ink);
padding:calc(var(--nav-h) + 20px) var(--gut) 28px;display:flex;flex-direction:column;
transform:translateY(-100%);transition:transform .5s var(--ease);overflow-y:auto}
.menu-open .sheet-menu{transform:none}
.sheet-menu a{font-weight:800;font-size:clamp(1.5rem,7vw,2.2rem);letter-spacing:-.03em;
padding:12px 0;border-bottom:1px solid rgba(246,242,255,.14)}
.sheet-menu a:last-of-type{border-bottom:0}
.sheet-menu .go{margin-top:22px;align-self:flex-start;background:var(--lime);color:#14110D;
font-size:15px;font-weight:700;padding:14px 26px;border-radius:var(--r-pill)}
/* ── plate scaffold ──────────────────────────────────────────────────────── */
.plate{position:relative;isolation:isolate;display:grid;align-content:center;
grid-template-columns:minmax(0,1fr);
min-height:100svh;
padding-block:calc(var(--nav-h) + clamp(18px,2.6vh,34px)) clamp(26px,3.6vh,44px);
scroll-snap-align:start}
/* A plate taller than the screen must never snap — that is what made the
scroll feel stuck. Container queries would be cleaner; this is the
portable version. */
/* an escape hatch: if the screen is too short for a plate to fit, snapping
would trap the scroll, so it turns itself off */
@media (max-height:700px){html{scroll-snap-type:none}.plate{min-height:auto}}
/* Touch: snapping and momentum scrolling fight each other, and on a phone the
plates stop being one viewport tall anyway (see the mobile section), so the
precondition for snapping at all is gone. Off entirely. */
@media (max-width:820px),(hover:none){html{scroll-snap-type:none}}
.foot{scroll-snap-align:end}
.wrap{width:min(var(--maxw),100% - var(--gut)*2);margin-inline:auto;position:relative;z-index:2;
min-width:0}
/* ── HOW PLATES MEET ──────────────────────────────────────────────────────
Nothing. A plain hard edge. While you are on a plate you see that plate's
colour and nothing else — the next colour arrives only as you scroll into
it. Every device tried before this (wave, bleed, grid, ticker, stacked
shoulders) leaked the neighbouring section into the current one, which is
exactly what should not happen.
────────────────────────────────────────────────────────────────────── */
.eyebrow{font-family:var(--mono);font-size:clamp(9.5px,1vw,11.5px);font-weight:600;
letter-spacing:.19em;text-transform:uppercase;display:inline-flex;align-items:center;
gap:11px;margin-bottom:clamp(7px,1.2vh,17px)}
.eyebrow::before{content:"";width:34px;height:2px;background:currentColor}
/* Headlines are Instrument Serif — high-contrast, editorial, and already in
assets/fonts. Everything structural stays Archivo, so the page reads as a
serif voice over a grotesque system rather than one face doing both. */
h1,h2{font-family:var(--head);font-weight:700;font-stretch:100%;
line-height:.94;letter-spacing:-.035em;text-wrap:balance}
h1{font-size:clamp(2.1rem,min(6.4vw,8.6vh),5.5rem)}
h2{font-size:clamp(1.65rem,min(4.3vw,5.8vh),3.8rem)}
h3{font-size:1rem;font-weight:800;letter-spacing:-.02em}
.it{font-family:var(--serif);font-style:italic;font-weight:400;font-stretch:100%;
letter-spacing:-.005em}
.lede{font-family:var(--body);font-weight:450;
font-size:clamp(.95rem,min(1.34vw,1.85vh),1.24rem);line-height:1.58;max-width:58ch;
margin-top:clamp(8px,1.4vh,17px);letter-spacing:-.004em}
.btn{position:relative;display:inline-flex;align-items:center;gap:9px;font-weight:700;
font-size:clamp(13px,min(1.05vw,1.5vh),15px);padding:clamp(10px,1.4vh,15px) clamp(17px,2vw,27px);
border-radius:var(--r-pill);border:2px solid transparent;cursor:pointer;will-change:transform;
transition:box-shadow .3s var(--ease),background .25s,color .25s,border-color .25s}
.btn .ar{transition:transform .3s var(--ease)}
.btn:hover .ar{transform:translateX(5px)}
.btn-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(10px,2vh,26px)}
.head{max-width:64ch}
.body>*{min-width:0}
.body{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
gap:clamp(24px,3.6vw,58px);align-items:center;margin-top:clamp(22px,3.4vh,44px)}
.art{position:relative}
/* how it works */
.steps{display:grid;gap:0}
.steps div{display:grid;grid-template-columns:32px minmax(0,1fr);gap:13px;
padding:12px 0;border-top:1px solid var(--hair)}
.steps div:last-child{border-bottom:1px solid var(--hair)}
.steps em{font-style:normal;font-family:var(--mono);font-size:11px;font-weight:700;
letter-spacing:.09em;padding-top:3px}
.steps b{display:block;font-size:clamp(13px,min(1.1vw,1.6vh),15px);font-weight:800;letter-spacing:-.02em;margin-bottom:2px}
.steps p{font-family:var(--body);font-weight:450;
font-size:clamp(12px,min(1.06vw,1.56vh),14.5px);line-height:1.55;opacity:.88}
/* four-up fact strip */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;
margin-top:clamp(16px,2.4vh,28px)}
.facts div{padding:13px 15px;border-radius:var(--r-m);border:1px solid var(--hair);
transition:transform .3s var(--ease),border-color .3s}
.facts div:hover{transform:translateY(-3px)}
.facts span{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.13em;
text-transform:uppercase;opacity:.7;margin-bottom:5px}
.facts b{font-size:clamp(12.5px,min(1.1vw,1.6vh),14.5px);font-weight:800;letter-spacing:-.02em}
/* the honest limit every service carries */
.limit{margin-top:clamp(10px,1.8vh,24px);padding:11px 15px;border-radius:var(--r-m);
border:1px dashed var(--hair);font-family:var(--body);font-weight:450;
font-size:clamp(12.5px,min(1.1vw,1.62vh),15px);line-height:1.6;opacity:.95}
.limit b.k{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
display:block;margin-bottom:4px;opacity:1}
/* ── 1 · HERO ────────────────────────────────────────────────────────────── */
#hero{background:radial-gradient(115% 80% at 80% 2%,var(--p-hero-2),transparent 60%),
radial-gradient(85% 66% at 4% 98%,#3A16A8,transparent 56%),var(--p-hero);
color:var(--hero-ink)}
#hero .lede{color:var(--hero-dim)}
#hero h1 .it{color:var(--lime)}
.hero-grid>*{min-width:0}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
gap:clamp(24px,4vw,64px);align-items:center}
.badge{display:inline-flex;align-items:center;gap:9px;margin-bottom:clamp(11px,1.6vh,17px);
padding:6px 14px 6px 6px;border-radius:var(--r-pill);background:rgba(204,255,68,.12);
border:1px solid rgba(204,255,68,.3);font-family:var(--mono);font-size:9.5px;
letter-spacing:.13em;text-transform:uppercase;color:var(--lime)}
.badge b{background:var(--lime);color:#14110D;padding:3px 8px;border-radius:var(--r-pill);
font-weight:800}
.btn-lime{background:var(--lime);color:#14110D}
.btn-lime:hover{box-shadow:0 18px 46px -12px rgba(204,255,68,.6)}
.btn-ghost-l{border-color:rgba(246,242,255,.34);color:var(--hero-ink)}
.btn-ghost-l:hover{border-color:var(--lime);color:var(--lime)}
/* THE SOUND FIELD — a canvas behind the hero where the halftone comes alive:
waves travel across the dot grid, lime crests ride them, the pointer
carries a halo and a click drops a ripple. Painted by revocle-v2.js;
removed entirely under prefers-reduced-motion. */
/* canvas is a replaced element: inset alone does NOT stretch it the way it
stretches a div — explicit width/height or it stays 300x150 forever */
.hero-field{display:block;position:absolute;inset:0;width:100%;height:100%;
z-index:0;pointer-events:none;opacity:.92}
#hero .wrap{position:relative;z-index:1}
.deck{padding:clamp(16px,2vw,26px);border-radius:var(--r-l);background:rgba(255,255,255,.05);
border:1px solid rgba(204,255,68,.22);backdrop-filter:blur(8px)}
/* THE RECORD — flat by choice, polished hard. A print-style sticker of a
record: crisp grooves, a lit lime label with a real centre hole and a
dead-wax ring, a hard offset shadow (the site's own shadow device), and
the rotating sheen that keeps the spin readable. */
.deck-top{display:flex;align-items:center;gap:clamp(12px,1.6vw,20px);
margin-bottom:clamp(12px,1.8vh,18px)}
.tt{position:relative;flex:0 0 auto;width:clamp(96px,11vw,126px);aspect-ratio:1}
.disc{position:absolute;inset:0;border-radius:50%;cursor:pointer;
background:
repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.085) 0 1px,transparent 1px 3.6px),
conic-gradient(from 40deg,#261544,#130A28,#2F1B56,#130A28,#261544);
box-shadow:7px 8px 0 rgba(0,0,0,.35),
inset 0 0 0 2px rgba(220,211,255,.18);
animation:spin 7s linear infinite}
/* the label: lit from top-left, dead-wax ring around it, a real centre hole */
.disc::after{content:"";position:absolute;inset:33%;border-radius:50%;
background:
radial-gradient(circle at 50% 50%,var(--p-hero) 0 11%,transparent 12%),
radial-gradient(circle at 36% 32%,#E7FF8A,var(--lime) 62%);
box-shadow:0 0 0 3px rgba(14,8,24,.85),0 0 0 5px rgba(220,211,255,.12)}
.disc::before{content:"";position:absolute;inset:0;border-radius:50%;
background:conic-gradient(from 210deg,transparent 0 38%,rgba(255,255,255,.2) 48%,transparent 58%)}
@keyframes spin{to{transform:rotate(360deg)}}
/* Rest state = PLAYING (needle on the record). On load the needle drops in;
grabbing the deck lifts it, the way a hand on a deck lifts the arm. */
.arm{position:absolute;top:2%;right:-8%;width:54%;height:4px;border-radius:99px;
background:linear-gradient(90deg,rgba(246,242,255,.16),var(--hero-dim));
transform-origin:right center;transform:rotate(14deg);transition:transform .8s var(--ease)}
@keyframes arm-drop{from{transform:rotate(27deg)}}
.js .arm{animation:arm-drop 1s var(--ease) .9s backwards}
.arm::before{content:"";position:absolute;left:-4px;top:-4px;width:12px;height:12px;
border-radius:2px;background:var(--lime)}
.arm::after{content:"";position:absolute;right:-9px;top:-7px;width:18px;height:18px;
border-radius:50%;background:var(--hero-dim)}
.deck:hover .arm{transform:rotate(27deg)}
.deck:hover{border-color:rgba(204,255,68,.5);
box-shadow:0 30px 70px -30px rgba(76,31,214,.7)}
.deck-meta b{display:block;font-weight:800;font-size:clamp(.95rem,1.4vw,1.18rem);
letter-spacing:-.02em}
.deck-meta span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;
text-transform:uppercase;color:var(--hero-dim);margin-top:5px}
.deck-meta .tagline{color:var(--lime);margin-top:8px}
.wave{display:flex;align-items:center;gap:3px;height:clamp(52px,7vh,88px)}
.wave i{flex:1;background:var(--lime);border-radius:2px;min-height:4px;transform-origin:center;
animation:wv 1.5s var(--ease) infinite alternate;opacity:.85}
@keyframes wv{from{transform:scaleY(.2)}to{transform:scaleY(1)}}
.wave-bar{display:flex;align-items:center;gap:12px;margin-top:13px;font-family:var(--mono);
font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--hero-dim)}
.wave-bar .track{flex:1;height:3px;border-radius:99px;background:rgba(246,242,255,.18);
overflow:hidden}
.wave-bar .track i{display:block;height:100%;width:64%;background:var(--lime)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
margin-top:clamp(18px,2.8vh,36px);border-top:1px solid rgba(246,242,255,.16);
padding-top:clamp(13px,2vh,22px)}
.stats b{display:block;font-weight:900;font-size:clamp(1.3rem,2.4vw,2.1rem);
letter-spacing:-.045em;color:var(--lime);font-variant-numeric:tabular-nums;line-height:1}
.stats span{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;
text-transform:uppercase;color:var(--hero-dim)}
.marq{margin-top:clamp(18px,2.8vh,32px);overflow:hidden;max-width:100%;
mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marq-in{display:flex;gap:clamp(20px,3vw,38px);width:max-content;
animation:marq 44s linear infinite}
.marq span{font-weight:900;font-size:clamp(1rem,2vw,1.6rem);letter-spacing:-.035em;
color:rgba(246,242,255,.22);white-space:nowrap;transition:color .3s}
.marq:hover .marq-in{animation-play-state:paused}
.marq span:hover{color:var(--lime)}
@keyframes marq{to{transform:translateX(-50%)}}
/* ── 2 · DISTRIBUTION ────────────────────────────────────────────────────── */
#dist{color:var(--ink);--hair:rgba(20,17,9,.15);
background-color:var(--p-dist)}
/* distribution carries the biggest headline on the page — it is the lead
service and should read that way */
#dist h2{font-size:clamp(1.8rem,min(4.9vw,6.6vh),4.4rem)}
#dist .eyebrow,#dist h2 .it,#dist .steps em,#dist .limit b.k{color:var(--blue)}
#dist .facts div:hover{border-color:var(--blue)}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{box-shadow:0 18px 46px -12px rgba(31,73,255,.55)}
.btn-ink-o{border-color:rgba(20,17,9,.26);color:var(--ink)}
.btn-ink-o:hover{border-color:var(--blue);color:var(--blue)}
.grec{fill:#1a1a1e}
.ggroove{fill:none;stroke:rgba(255,255,255,.14);stroke-width:1}
.glabel{fill:var(--blue)}
.ghole{fill:var(--p-dist)}
.grtxt{fill:#4a4335;font-family:var(--mono);font-size:10px;font-weight:700;
letter-spacing:.16em}
.gpath{fill:none;stroke:var(--blue);stroke-opacity:.3;stroke-width:1.5}
.gnode{fill:var(--p-dist);stroke:var(--blue);stroke-width:2}
.gdot{fill:var(--blue)}
.gtxt{fill:#141109;font-size:13.5px;font-weight:600;font-family:var(--display)}
/* THE DELIVERY LINE — distribution is a journey, so the section reads
left to right as one object: the record, four stations on a track, and
the 200+ store terminus. The step text sits under its own station, so
the copy and the graphic are the same element rather than neighbours. */
.dist-head{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
gap:clamp(18px,3vw,48px);align-items:end;
padding-bottom:clamp(10px,1.8vh,26px);border-bottom:1px solid rgba(20,17,9,.16)}
.dist-head>*{min-width:0}
.dist-head .lede{margin-top:0}
.dist-meta{display:flex;flex-wrap:wrap;gap:7px 16px;margin-top:14px;
font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
color:var(--ink-2)}
.dist-meta b{color:var(--blue);font-weight:700}
.dl{--rec:clamp(58px,min(7.6vw,10vh),118px);--dot:clamp(26px,min(2.4vw,3.6vh),34px);
display:grid;grid-template-columns:auto minmax(0,1fr) auto;
gap:clamp(14px,1.8vw,26px);align-items:start;
margin-top:calc(clamp(14px,2.6vh,46px) + var(--rec) / 2)}
.dl-mid{min-width:0}
.dl-rec{display:block;width:var(--rec);height:var(--rec);border-radius:50%;position:relative;
margin-top:calc((var(--dot) - var(--rec)) / 2);
background:repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.15) 0 1px,transparent 1px 4px),
radial-gradient(circle at 50% 50%,#26262e,#0f0f13);
box-shadow:0 18px 40px -16px rgba(20,17,9,.6),0 0 0 1px rgba(20,17,9,.08);
animation:spin 9s linear infinite}
.dl-rec::after{content:"";position:absolute;inset:35%;border-radius:50%;background:var(--blue)}
.dl-rec::before{content:"";position:absolute;inset:47%;border-radius:50%;
background:var(--p-dist);z-index:2}
.dl-arm{display:block;position:absolute;top:6%;right:-14%;width:56%;height:3px;border-radius:99px;
background:linear-gradient(90deg,rgba(20,17,9,.25),rgba(20,17,9,.6));
transform-origin:right center;transform:rotate(28deg);
transition:transform .8s var(--ease);z-index:3}
.dl-arm::before{content:"";position:absolute;left:-3px;top:-3px;width:9px;height:9px;
border-radius:2px;background:var(--blue)}
.dl-arm::after{content:"";position:absolute;right:-7px;top:-5px;width:14px;height:14px;
border-radius:50%;background:rgba(20,17,9,.55)}
.dl:hover .dl-arm{transform:rotate(16deg)}
.dl-wrap-rec{display:block;position:relative;width:var(--rec);height:var(--rec);
margin-top:calc((var(--dot) - var(--rec)) / 2)}
.dl-wrap-rec .dl-rec{margin-top:0}
.dl-track{position:relative;height:var(--dot)}
.dl-track::before{content:"";position:absolute;left:0;right:0;top:calc(var(--dot)/2 - 1px);
height:2px;background:linear-gradient(90deg,rgba(31,73,255,.42),rgba(31,73,255,.12))}
.dl-track i{position:absolute;top:0;left:var(--p);
width:var(--dot);height:var(--dot);border-radius:50%;background:var(--p-dist);
border:2px solid var(--blue);color:var(--blue);display:grid;place-items:center;
font-family:var(--mono);font-size:11px;font-weight:700;font-style:normal}
.dl-track i{transition:background .3s,color .3s,transform .3s var(--ease)}
.dl-track i:hover{background:var(--blue);color:#fff;transform:scale(1.08)}
.dl-run{position:absolute;top:calc(var(--dot)/2 - 5px);left:0;width:10px;height:10px;
z-index:0;
border-radius:50%;background:var(--blue);box-shadow:0 0 0 5px rgba(31,73,255,.16);
animation:dlrun 3.6s linear infinite}
@keyframes dlrun{0%{left:0;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:100%;opacity:0}}
/* each station lights as the pulse reaches it — one machine, in sync */
@keyframes dlhit{
0%,100%{background:var(--paper);color:var(--ink)}
4%,12%{background:var(--blue);color:#fff;transform:scale(1.12)}
18%{background:var(--paper);color:var(--ink);transform:scale(1)}
}
.js .dl-track i:nth-child(1){animation:dlhit 3.6s linear infinite .45s}
.js .dl-track i:nth-child(2){animation:dlhit 3.6s linear infinite 1.35s}
.js .dl-track i:nth-child(3){animation:dlhit 3.6s linear infinite 2.25s}
.js .dl-track i:nth-child(4){animation:dlhit 3.6s linear infinite 3.15s}
.dl-steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
gap:0;margin-top:15px;counter-reset:dl}
.dl-steps li{position:relative;padding-right:clamp(16px,2vw,32px)}
.dl-steps li::before{content:"";position:absolute;left:calc(var(--dot) / 2);top:-15px;
width:1px;height:15px;background:rgba(31,73,255,.34)}
.dl-steps b{display:block;font-size:clamp(13px,min(1.15vw,1.7vh),17px);font-weight:800;
letter-spacing:-.025em;margin-bottom:4px}
.dl-steps p{font-family:var(--body);font-weight:450;
font-size:clamp(12px,min(1.06vw,1.56vh),14.6px);line-height:1.55;color:var(--ink-2)}
.dl-end{--eh:clamp(50px,4.8vw,72px);margin-top:calc((var(--dot) - var(--eh)) / 2);
text-align:right;white-space:nowrap}
.dl-end b{display:block;font-weight:900;font-size:clamp(2.1rem,3.4vw,3.5rem);
letter-spacing:-.055em;line-height:.86;color:var(--blue)}
.dl-end em{display:block;font-style:normal;font-family:var(--mono);font-size:8.5px;
letter-spacing:.15em;text-transform:uppercase;color:var(--ink-2);margin-top:6px}
.dist-foot{display:grid;grid-template-columns:minmax(0,1.15fr) auto;
gap:clamp(20px,3vw,46px);align-items:center;margin-top:clamp(18px,2.8vh,34px)}
.dist-foot>*{min-width:0}
/* LOGO WALL. Tiles are sized and aligned for official brand assets: drop an
SVG into assets/logos/ and swap the for an — no layout change.
Until then the wordmark is set as text, deliberately. We do not
approximate another company's mark. */
/* the CMS room's value cards — dark variant of .rc */
.creal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
gap:clamp(12px,1.6vw,22px);margin-top:clamp(14px,2.4vh,24px)}
.rc2{border:2px solid rgba(255,239,241,.32);background:rgba(255,255,255,.045);
padding:clamp(13px,1.5vw,19px);
transition:transform .25s var(--ease),border-color .25s,background .25s}
.rc2:hover{transform:translateY(-4px);border-color:var(--coral);
background:rgba(255,92,107,.08)}
.rc2 svg{width:25px;height:25px;fill:none;stroke:var(--coral);stroke-width:1.8;
stroke-linecap:round;stroke-linejoin:round;margin-bottom:10px}
.rc2 b{font-family:var(--head);font-weight:800;letter-spacing:-.02em;display:block;
font-size:clamp(.95rem,1.1vw,1.08rem);margin-bottom:5px}
.rc2 p{font-size:clamp(11.5px,.88vw,13px);line-height:1.5;color:var(--cms-dim)}
@media (max-width:1024px){.creal{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){.creal{grid-template-columns:minmax(0,1fr);gap:10px}}
/* the whole pipeline as one printed line */
.pipe{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
margin-top:clamp(14px,2.4vh,24px);padding:13px 18px;border:2px solid var(--ink);
background:#fff;box-shadow:4px 4px 0 rgba(20,17,9,.25);
font-family:var(--head);font-weight:800;letter-spacing:-.01em;
font-size:clamp(13px,1.05vw,15.5px)}
.pipe i{font-style:normal;color:var(--pipa,var(--blue));font-weight:800}
.dist-foot-slim{margin-top:clamp(14px,2.4vh,24px);display:flex;justify-content:center}
/* ── PRICING psychology: reassurance chips, per-day reframe, the maths ──── */
.assure{display:flex;flex-wrap:wrap;gap:7px 14px;margin-top:14px}
.assure span{border:1px solid rgba(255,255,255,.32);padding:6px 12px;
font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.13em;
text-transform:uppercase;color:var(--price-dim)}
.assure b{color:var(--yellow)}
.pday{margin-top:2px;font-family:var(--mono);font-size:10.5px;font-weight:700;
letter-spacing:.1em;text-transform:uppercase;color:var(--yellow)}
.plan.best .pday{color:#4A3F13}
#price .real-strip{color:rgba(255,255,255,.75)}
#price .real-strip i{background:#fff;opacity:.3}
.stampM{color:var(--yellow);border:2px solid var(--yellow);padding:7px 13px;
transform:rotate(-1.4deg);box-shadow:3px 3px 0 rgba(0,0,0,.35);white-space:nowrap}
.price-foot{display:flex;justify-content:center;margin-top:clamp(12px,2vh,22px)}
@media (max-width:820px){.stampM{white-space:normal}}
/* ── THE VAULT — money drawn in the print language ───────────────────────────
The centrepiece is a Revocle banknote whose denomination is 0% — clearly
stylised brand art, never an imitation of currency. A fan of notes, and
small notes and coins drifting through the room. */
#fund .wrap{position:relative;z-index:1}
.rn-bg{fill:#221909;stroke:var(--gold);stroke-width:3}
.rn-in{fill:none;stroke:var(--gold);stroke-width:1;stroke-dasharray:5 4;opacity:.55}
.rn-g{fill:none;stroke:var(--gold);stroke-width:1;opacity:.22}
.rn-rec{fill:none;stroke:var(--gold);stroke-width:1.6;opacity:.75}
.rn-star{fill:var(--lime)}
.rn-dot{fill:var(--gold);opacity:.6}
.rn-amt{font-family:var(--head);font-weight:850;font-size:44px;fill:var(--gold)}
.rn-sub{font-family:var(--mono);font-weight:700;font-size:8.5px;letter-spacing:.16em;fill:var(--fund-dim)}
.rn-micro{font-family:var(--mono);font-weight:700;font-size:6px;letter-spacing:.12em;fill:var(--gold);opacity:.7}
.fund-stage{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr);
gap:clamp(16px,2.2vw,30px);align-items:center;margin-top:clamp(12px,2.2vh,24px)}
.money{position:relative;display:grid;justify-items:center}
.bignote{width:clamp(260px,24vw,360px);aspect-ratio:300/140}
.bignote.b0{position:relative;transform:rotate(-4deg);
filter:drop-shadow(8px 9px 0 rgba(0,0,0,.45))}
.bignote.b1,.bignote.b2{position:absolute;top:0;left:50%;margin-left:calc(clamp(260px,24vw,360px)/-2)}
.bignote.b1{transform:rotate(3.5deg) translateY(-7px);opacity:.55}
.bignote.b2{transform:rotate(-11deg) translateY(6px);opacity:.35}
.money-cap{margin-top:16px;font-family:var(--serif);font-style:italic;
font-size:clamp(.95rem,1.2vw,1.15rem);color:var(--gold);text-align:center}
/* the drifting money — ornament, so phones drop it */
.fnote,.fcoin{position:absolute;z-index:0;pointer-events:none;opacity:.32;
animation:mfloat var(--fd,9s) ease-in-out infinite alternate}
.fnote{width:clamp(70px,7vw,104px);aspect-ratio:300/140}
.fcoin{width:clamp(30px,3vw,44px);aspect-ratio:1}
.f1{left:4%;top:16%;--fd:9s;transform:rotate(-10deg)}
.f2{right:3%;top:12%;--fd:11s;transform:rotate(8deg)}
.f3{left:6%;bottom:10%;--fd:10s;transform:rotate(6deg)}
.c1{right:8%;bottom:16%;--fd:7s}
.c2{left:38%;top:8%;--fd:8s}
@keyframes mfloat{
from{translate:0 -10px;rotate:-3deg}
to {translate:0 12px;rotate:3deg}
}
.led-line{display:flex;flex-wrap:wrap;gap:8px 10px;justify-content:center;
margin-top:clamp(14px,2.4vh,24px)}
.led-line span{border:2px solid var(--gold-line);padding:7px 13px;
font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;color:var(--gold)}
@media (max-width:1024px){
.fund-stage{grid-template-columns:repeat(2,minmax(0,1fr))}
.money{grid-column:1 / -1}
}
@media (max-width:820px){
.fnote,.fcoin{display:none}
.fund-stage{grid-template-columns:minmax(0,1fr)}
.led-line span{padding:6px 10px;font-size:9.5px}
}
/* the lime room re-inks the shared components indigo */
#promo .rc{--rca:var(--vio);--rcs:rgba(76,31,214,.22)}
#promo .pipe{--pipa:var(--vio)}
#promo .real-strip{color:rgba(20,17,9,.68)}
#promo .real-strip i{background:var(--ink);opacity:.3}
.stampNo{color:var(--vio);border:2px solid var(--vio);padding:7px 13px;
transform:rotate(1.6deg);box-shadow:3px 3px 0 rgba(76,31,214,.25);
white-space:nowrap;background:rgba(255,255,255,.55)}
/* ── THE BASELINE STRIP + WHAT ACTUALLY MATTERS ──────────────────────────────
200+ stores is infrastructure, not a selling point — the strip says so
out loud, once, small. The grid underneath carries the parts artists
actually weigh in 2026. */
.real-strip{display:flex;align-items:center;gap:14px;margin-top:clamp(14px,2.4vh,26px);
font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.18em;
text-transform:uppercase;color:var(--ink-2)}
.real-strip i{flex:1;height:2px;background:var(--ink);opacity:.22}
.stamp200{color:var(--blue);border:2px solid var(--blue);padding:7px 13px;
transform:rotate(-1.6deg);box-shadow:3px 3px 0 rgba(31,73,255,.22);white-space:nowrap}
.real{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
gap:clamp(12px,1.6vw,22px);margin-top:clamp(14px,2.4vh,24px)}
.rc{border:2px solid var(--ink);background:#fff;padding:clamp(14px,1.6vw,20px);
box-shadow:4px 4px 0 rgba(20,17,9,.25);display:flex;flex-direction:column;
transition:transform .25s var(--ease),box-shadow .25s,border-color .25s}
.rc:hover{transform:translateY(-4px);border-color:var(--rca,var(--blue));
box-shadow:6px 6px 0 var(--rcs,var(--blue-soft))}
.rc svg{width:26px;height:26px;fill:none;stroke:var(--rca,var(--blue));stroke-width:1.8;
stroke-linecap:round;stroke-linejoin:round;margin-bottom:10px}
.rc b{font-family:var(--head);font-weight:800;letter-spacing:-.02em;
font-size:clamp(.98rem,1.15vw,1.12rem);margin-bottom:6px}
.rc p{font-size:clamp(12px,.9vw,13.5px);line-height:1.55;color:var(--ink-2)}
.rc-link{margin-top:auto;padding-top:10px;font-family:var(--mono);font-size:10px;
font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--rca,var(--blue))}
.rc-link .ar{display:inline-block;transition:transform .25s var(--ease)}
.rc-link:hover .ar{transform:translateX(4px)}
@media (max-width:1024px){.real{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){
.real{grid-template-columns:minmax(0,1fr);gap:10px}
.real-strip{flex-wrap:wrap;gap:8px}
.real-strip i{display:none}
}
.wall{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
gap:clamp(5px,.6vw,9px);margin-top:clamp(10px,2vh,32px);
padding-block:clamp(9px,1.6vh,22px);
border-top:1px solid rgba(20,17,9,.16);border-bottom:1px solid rgba(20,17,9,.16)}
.wall .tile{display:grid;place-items:center;height:clamp(34px,min(4.4vw,6vh),62px);
border:1px solid rgba(20,17,9,.13);border-radius:11px;
background:rgba(255,255,255,.55);padding:6px 8px;
transition:border-color .25s,background .25s,transform .3s var(--ease),box-shadow .3s}
.wall .tile:hover{border-color:var(--blue);background:#fff;transform:translateY(-3px);
box-shadow:0 14px 28px -16px rgba(31,73,255,.55)}
.wall .tile b{font-weight:800;font-size:clamp(11px,.92vw,13.5px);letter-spacing:-.022em;
color:rgba(20,17,9,.66);text-align:center;line-height:1.15;transition:color .25s}
.wall .tile:hover b{color:var(--blue)}
.wall .tile img{max-height:clamp(18px,1.7vw,24px);width:auto;opacity:.72;transition:opacity .25s}
.wall .tile:hover img{opacity:1}
.wall .tile.more{border-style:dashed;background:transparent}
.wall .tile.more b{color:var(--blue);font-family:var(--mono);font-size:10px;
letter-spacing:.09em;text-transform:uppercase}
#dist .limit{margin-top:0;border:0;padding:0;font-size:14px;max-width:62ch}
#dist .limit b.k{color:var(--blue)}
#dist .btn-row{margin-top:0}
/* ── 3 · YOUTUBE CMS — the scan ──────────────────────────────────────────
A monitor rather than a document: faint scanlines, one full-width master
waveform, a sweep running across it, and the uploads Content ID found
pinned above the point where they matched.
──────────────────────────────────────────────────────────────────────── */
#cms{color:var(--cms-ink);--hair:rgba(255,239,241,.18);
background-color:var(--p-cms);
background-image:radial-gradient(88% 62% at 78% 10%,rgba(255,92,107,.17),transparent 62%),
repeating-linear-gradient(180deg,rgba(255,239,241,.03) 0 1px,transparent 1px 4px)}
#cms h2{font-size:clamp(1.8rem,min(4.9vw,6.6vh),4.4rem)}
#cms .eyebrow,#cms h2 .it,#cms .limit b.k{color:var(--coral)}
#cms .lede{color:var(--cms-dim)}
.btn-coral{background:var(--coral);color:#2B0710}
.btn-coral:hover{box-shadow:0 18px 46px -12px rgba(255,92,107,.55)}
.btn-ghost-c{border-color:rgba(255,239,241,.32);color:var(--cms-ink)}
.btn-ghost-c:hover{border-color:var(--coral);color:var(--coral)}
.cms-head{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
gap:clamp(18px,3vw,48px);align-items:end;
padding-bottom:clamp(10px,1.8vh,26px);border-bottom:1px solid rgba(255,239,241,.16)}
.cms-head>*{min-width:0}
.cms-head .lede{margin-top:0}
.cms-meta{display:flex;flex-wrap:wrap;gap:7px 16px;margin-top:14px;
font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
color:var(--cms-dim)}
.cms-meta b{color:var(--coral);font-weight:700}
.scan{--cyc:4.6s;position:relative;
margin-top:clamp(14px,3vh,26px)}
.scan-rail{position:relative;height:clamp(58px,min(12.5vh,9vw),152px);display:flex;align-items:center;
gap:1px;padding-inline:2px;
border-top:1px solid rgba(255,92,107,.3);border-bottom:1px solid rgba(255,92,107,.3)}
.scan-rail i{flex:1;min-width:0;border-radius:1px;background:var(--coral);opacity:.24;
animation:scanlit var(--cyc) linear infinite}
@keyframes scanlit{0%{opacity:.24}2.5%{opacity:1}10%{opacity:.24}100%{opacity:.24}}
.scan-sweep{position:absolute;top:-1px;bottom:-1px;width:3px;left:0;z-index:2;
background:linear-gradient(180deg,transparent,#fff 18%,var(--coral) 50%,#fff 82%,transparent);
box-shadow:0 0 30px 8px rgba(255,92,107,.55);
animation:scansweep var(--cyc) linear infinite}
@keyframes scansweep{from{left:0}to{left:100%}}
.scan-live{position:absolute;right:0;bottom:calc(100% + 12px);z-index:4;
display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:var(--r-pill);
border:1px solid rgba(255,92,107,.4);background:rgba(58,15,28,.7);
font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.16em;
text-transform:uppercase;color:var(--coral)}
.scan-live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--coral);
animation:livedot 1.6s ease-in-out infinite}
@keyframes livedot{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(255,92,107,.55)}
60%{opacity:.45;box-shadow:0 0 0 7px rgba(255,92,107,0)}}
.pin-wave{display:flex;align-items:center;gap:1.5px;height:16px;margin-top:8px}
.pin-wave i{flex:1;background:var(--coral);opacity:.5;border-radius:1px}
.pin-mark{position:absolute;left:50%;bottom:-4px;width:7px;height:7px;border-radius:50%;
background:var(--coral);transform:translateX(-50%);
box-shadow:0 0 0 4px rgba(255,92,107,.2)}
.scan-foot{display:flex;justify-content:space-between;gap:16px;margin-top:11px;
font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
color:var(--cms-dim)}
.scan-foot b{color:var(--cms-ink)}
.scan-foot .out{color:var(--coral)}
.pin{position:absolute;left:var(--x);bottom:100%;transform:translateX(-50%);
width:clamp(148px,13.6vw,192px);z-index:3}
.pin-stem{display:block;position:relative;height:clamp(18px,2.2vh,26px);width:1px;margin:0 auto;
background:linear-gradient(180deg,rgba(255,92,107,.75),rgba(255,92,107,.12))}
.pin-card{display:block;border:1px solid rgba(255,92,107,.34);border-radius:12px;
background:rgba(58,15,28,.82);padding:10px 12px;
transition:transform .3s var(--ease),border-color .3s,background .3s}
.pin:hover .pin-card{transform:translateY(-4px);border-color:var(--coral);
background:rgba(76,20,36,.96)}
.pin-card b{display:block;font-size:clamp(11.5px,min(1vw,1.5vh),13px);font-weight:800;letter-spacing:-.02em;
color:var(--cms-ink);line-height:1.2}
.pin-card small{display:block;font-size:clamp(10px,min(.9vw,1.3vh),11px);color:var(--cms-dim);margin-top:2px;line-height:1.3}
.pin-row{display:flex;align-items:center;gap:8px;margin-top:9px}
.pin-row em{font-style:normal;font-family:var(--mono);font-size:14px;font-weight:700;
color:var(--coral);letter-spacing:-.02em}
.pin-tag{margin-left:auto;font-family:var(--mono);font-size:8.5px;font-weight:700;
letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;border-radius:var(--r-pill);
background:var(--coral);color:#2B0710}
.pin.review .pin-tag{background:transparent;border:1px solid var(--coral);color:var(--coral)}
.cms-run{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
gap:clamp(12px,1.6vw,26px);margin-top:clamp(14px,2.8vh,46px)}
.cms-run div{padding-top:12px;border-top:1px solid rgba(255,239,241,.22);
transition:border-color .3s}
.cms-run div:hover{border-color:var(--coral)}
.cms-run b{display:block;font-size:clamp(14px,1.1vw,16px);font-weight:800;
letter-spacing:-.02em;margin-bottom:3px}
.cms-run p{font-family:var(--body);font-weight:450;
font-size:clamp(12px,min(1.06vw,1.56vh),14.2px);line-height:1.55;color:var(--cms-dim)}
.cms-foot{display:grid;grid-template-columns:minmax(0,1.15fr) auto;
gap:clamp(20px,3vw,46px);align-items:center;margin-top:clamp(18px,2.6vh,32px)}
#cms .limit{margin-top:0;border:0;padding:0;font-size:14px;max-width:64ch;color:var(--cms-dim)}
#cms .btn-row{margin-top:0}
/* ── 4 · PROMOTIONS — the sticker wall ───────────────────────────────────
Promotion is the fun half of the job and the ruled ledger dressed it as a
contract. Vivid orange, and the five things become chunky cards knocked
slightly off-square, like flyers pinned to a wall. Hover straightens one.
──────────────────────────────────────────────────────────────────────── */
#promo{color:var(--promo-ink);--hair:rgba(20,17,9,.22);
background-color:var(--p-promo);
background-image:radial-gradient(62% 50% at 86% 0%,rgba(255,255,255,.28),transparent 60%),
radial-gradient(54% 46% at 4% 100%,rgba(76,31,214,.13),transparent 62%)}
#promo ::selection{background:var(--pop);color:#fff}
/* On the lime room: indigo italic (7.26) for the headline, full ink for
the small eyebrow. */
#promo h2 .it{color:var(--pop)}
#promo .eyebrow{color:var(--promo-ink)}
#promo .lede{color:var(--promo-dim)}
.btn-pop{background:var(--pop);color:var(--pop-ink)}
.btn-pop:hover{box-shadow:0 18px 46px -12px rgba(76,31,214,.45)}
.promo-head{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
gap:clamp(18px,3vw,48px);align-items:end;
padding-bottom:clamp(10px,1.8vh,26px);border-bottom:2px solid rgba(246,240,255,.34)}
.promo-head>*{min-width:0}
.promo-head .lede{margin-top:0}
.promo-meta{display:flex;flex-wrap:wrap;gap:7px 16px;margin-top:12px;
font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
color:var(--promo-dim)}
.promo-meta b{color:var(--pop);font-weight:700}
.stk{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
gap:clamp(10px,1.4vw,20px);margin-top:clamp(14px,2.6vh,34px)}
.stk div{grid-column:span 2;border:2px solid rgba(20,17,9,.55);border-radius:20px;
padding:clamp(13px,1.7vw,22px);display:flex;flex-direction:column;
transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.stk div:nth-child(4),.stk div:nth-child(5){grid-column:span 3}
.stk div:nth-child(1){transform:rotate(-1.5deg)}
.stk div:nth-child(2){transform:rotate(1.1deg)}
.stk div:nth-child(3){transform:rotate(-.7deg)}
.stk div:nth-child(4){transform:rotate(.9deg)}
.stk div:nth-child(5){transform:rotate(-1.2deg)}
.stk div:hover{transform:rotate(0) translateY(-6px);border-color:var(--vio);
box-shadow:0 18px 44px -16px rgba(26,10,56,.7)}
.stk .fill{background:var(--paper);color:var(--ink);border-color:var(--ink)}
.stk .pop{background:var(--pop);color:var(--pop-ink);border-color:var(--pop)}
.stk .n{font-family:var(--num);font-weight:700;
font-size:clamp(1.4rem,min(2.4vw,3.4vh),2.3rem);line-height:1;letter-spacing:-.03em}
.stk b{display:block;font-family:var(--head);font-weight:700;letter-spacing:-.03em;
font-size:clamp(1.05rem,min(1.9vw,2.7vh),1.6rem);line-height:1.05;margin:10px 0 6px}
.stk p{font-family:var(--body);font-weight:450;
font-size:clamp(12px,min(1.06vw,1.56vh),14.2px);line-height:1.5;opacity:.86}
.stk em{font-style:normal;margin-top:auto;padding-top:12px;font-family:var(--mono);
font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
color:var(--vio);opacity:.9}
.promo-foot{display:grid;grid-template-columns:minmax(0,1.15fr) auto;
gap:clamp(20px,3vw,46px);align-items:center;margin-top:clamp(12px,2.2vh,30px)}
#promo .limit{margin-top:0;border:0;padding:0;max-width:66ch;color:var(--promo-dim)}
#promo .limit b.k{color:var(--pop)}
#promo .btn-row{margin-top:0}
/* ── 5 · FUNDING — the two routes ────────────────────────────────────────
The serious plate. Espresso and champagne, and a layout built around the
one decision that matters: which route. Two large cards, the 0% set as
type rather than a graphic, and a ledger of what we never take.
──────────────────────────────────────────────────────────────────────── */
#fund{color:var(--fund-ink);--hair:rgba(245,239,226,.2);
background-color:var(--p-fund);
background-image:radial-gradient(64% 52% at 86% 4%,rgba(239,217,168,.11),transparent 62%)}
#fund h2{font-size:clamp(1.7rem,min(4.3vw,5.8vh),3.9rem)}
#fund .eyebrow,#fund h2 .it,#fund .limit b.k{color:var(--gold)}
#fund .lede{color:var(--fund-dim)}
.btn-gold{background:var(--gold);color:#16110C}
.btn-gold:hover{box-shadow:0 18px 46px -12px rgba(239,217,168,.45)}
.btn-gold-o{border-color:var(--gold-line);color:var(--gold)}
.btn-gold-o:hover{background:rgba(239,217,168,.1)}
.fund-head{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
gap:clamp(18px,3vw,48px);align-items:end;
padding-bottom:clamp(10px,1.8vh,26px);border-bottom:1px solid rgba(245,239,226,.2)}
.fund-head>*{min-width:0}
.fund-head .lede{margin-top:0}
.routes{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);
gap:clamp(16px,2.4vw,38px);align-items:stretch;margin-top:clamp(14px,2.6vh,36px)}
.routes>*{min-width:0}
.zero{display:flex;flex-direction:column;justify-content:center;
padding-right:clamp(14px,2vw,30px);border-right:1px solid rgba(245,239,226,.2)}
.zero b{display:block;font-family:var(--num);font-weight:700;color:var(--gold);
font-size:clamp(3rem,min(7vw,9.5vh),5.6rem);line-height:.82;letter-spacing:-.05em}
.zero span{display:block;font-family:var(--mono);font-size:9.5px;font-weight:600;
letter-spacing:.2em;text-transform:uppercase;color:var(--fund-dim);margin-top:10px}
.zero em{font-style:normal;display:block;font-family:var(--body);font-weight:450;
font-size:clamp(12px,min(1.05vw,1.55vh),14px);line-height:1.5;
color:var(--fund-dim);margin-top:12px;max-width:22ch}
.route{border:1px solid rgba(245,239,226,.22);border-radius:16px;
padding:clamp(15px,1.9vw,26px);display:flex;flex-direction:column;
transition:border-color .3s,background .3s,transform .35s var(--ease)}
.route:hover{border-color:var(--gold);background:rgba(239,217,168,.05);
transform:translateY(-4px)}
.route .tag{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.16em;
text-transform:uppercase;color:var(--gold)}
.route h3{font-family:var(--head);font-weight:700;letter-spacing:-.03em;
font-size:clamp(1.15rem,min(2vw,2.8vh),1.7rem);line-height:1.05;margin:9px 0 8px}
.route p{font-family:var(--body);font-weight:450;
font-size:clamp(12px,min(1.06vw,1.56vh),14.4px);line-height:1.55;color:var(--fund-dim)}
.route ul{list-style:none;margin-top:auto;padding-top:13px;display:grid;gap:5px}
.route li{display:flex;gap:8px;font-family:var(--body);
font-size:clamp(11.5px,min(1vw,1.48vh),13.5px);line-height:1.4}
.route li::before{content:"";flex:0 0 auto;width:5px;height:5px;border-radius:50%;
background:var(--gold);margin-top:7px}
.ledger{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
gap:clamp(10px,1.4vw,22px);margin-top:clamp(14px,2.4vh,32px);
padding-top:clamp(12px,2vh,22px);border-top:1px solid rgba(245,239,226,.2)}
.ledger div{font-family:var(--body);font-weight:450;
font-size:clamp(11.5px,min(1.02vw,1.5vh),13.8px);line-height:1.45;color:var(--fund-dim)}
.ledger b{display:block;font-family:var(--display);font-weight:700;color:var(--fund-ink);
font-size:clamp(12.5px,min(1.1vw,1.6vh),15px);letter-spacing:-.02em;margin-bottom:3px}
.fund-foot{display:grid;grid-template-columns:minmax(0,1.15fr) auto;
gap:clamp(20px,3vw,46px);align-items:center;margin-top:clamp(12px,2.2vh,28px)}
#fund .limit{margin-top:0;border:0;padding:0;max-width:66ch;color:var(--fund-dim)}
#fund .btn-row{margin-top:0}
/* ── 6 · PRICING — pick one ──────────────────────────────────────────────
Chunky cards knocked off-square with a rotated sticker on the one most
people should take. Prices set huge in Pally. Hover straightens a card
and lifts it — picking a plan should feel like reaching for something,
not reading a table.
──────────────────────────────────────────────────────────────────────── */
#price{background:var(--p-price);color:var(--price-ink);--hair:rgba(255,255,255,.26)}
#price h2 .it{color:var(--yellow)}
#price .eyebrow,#price .limit b.k{color:var(--yellow)}
#price .lede{color:var(--price-dim)}
.btn-yellow{background:var(--yellow);color:#101010}
.btn-yellow:hover{box-shadow:0 18px 46px -12px rgba(255,218,71,.55)}
.btn-ghost-y{border-color:rgba(255,255,255,.4);color:#fff}
.btn-ghost-y:hover{border-color:var(--yellow);color:var(--yellow)}
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
gap:clamp(10px,1.3vw,18px);margin-top:clamp(16px,2.8vh,38px)}
.plan{position:relative;border:2px solid rgba(255,255,255,.3);border-radius:20px;
padding:clamp(14px,1.7vw,24px);display:flex;flex-direction:column;
background:rgba(255,255,255,.06);
transition:transform .35s var(--ease),box-shadow .35s var(--ease),
background .3s,border-color .3s}
.plan:nth-child(1){transform:rotate(-1.3deg)}
.plan:nth-child(2){transform:rotate(1deg)}
.plan:nth-child(3){transform:rotate(-.8deg)}
.plan:nth-child(4){transform:rotate(1.2deg)}
.plan:hover{transform:rotate(0) translateY(-8px);background:rgba(255,255,255,.12);
border-color:#fff;box-shadow:0 22px 50px -20px rgba(0,0,0,.6)}
.plan.best{background:var(--yellow);color:#101010;border-color:var(--yellow)}
.plan.best:hover{background:var(--yellow);border-color:#fff}
.plan .sticker{position:absolute;top:-13px;right:-9px;background:#101010;color:var(--yellow);
font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:.13em;
text-transform:uppercase;padding:6px 11px;border-radius:var(--r-pill);
transform:rotate(6deg);white-space:nowrap;box-shadow:0 6px 14px -6px rgba(0,0,0,.7)}
.plan h3{font-family:var(--head);font-weight:700;letter-spacing:-.03em;
font-size:clamp(1rem,min(1.6vw,2.3vh),1.35rem)}
.plan .amt{font-family:var(--num);font-weight:700;
font-size:clamp(1.8rem,min(3.2vw,4.4vh),3rem);letter-spacing:-.05em;
line-height:.9;margin:10px 0 4px}
.plan .per{font-family:var(--mono);font-size:8.5px;font-weight:600;letter-spacing:.15em;
text-transform:uppercase;color:var(--price-dim)}
.plan.best .per{color:#4A3F13}
.plan ul{list-style:none;margin-top:14px;display:grid;gap:6px;font-family:var(--body);
font-weight:450;font-size:clamp(11.5px,min(1.02vw,1.5vh),13.6px);line-height:1.4}
.plan li{display:flex;gap:8px;align-items:flex-start}
.plan li::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;
background:var(--yellow);margin-top:6px}
.plan.best li::before{background:#101010}
.plan .pick{margin-top:auto;padding-top:14px;font-family:var(--mono);font-size:9px;
font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--yellow);
display:flex;align-items:center;gap:7px;transition:gap .3s var(--ease)}
.plan.best .pick{color:#101010}
.plan:hover .pick{gap:13px}
#price .limit{color:var(--price-dim);margin-top:clamp(12px,2vh,24px)}
/* ── 7 · CTA — the page closes where it opened ───────────────────────────
Same indigo and lime as the hero, deliberately. You arrive on it, travel
through five rooms, and land back in the first one — so the last thing
you see is the thing you first recognised.
──────────────────────────────────────────────────────────────────────── */
#cta{color:var(--hero-ink);text-align:center;
background:radial-gradient(112% 78% at 78% 4%,var(--p-hero-2),transparent 60%),
radial-gradient(84% 64% at 6% 98%,#3A16A8,transparent 56%),var(--p-hero)}
#cta h2{font-size:clamp(2.5rem,min(7.2vw,9.6vh),6rem)}
#cta h2 .it{color:var(--lime)}
#cta .lede{margin-inline:auto;max-width:48ch;color:var(--hero-dim)}
#cta .btn-row{justify-content:center}
.btn-lime{background:var(--lime);color:#14110D}
.btn-lime:hover{box-shadow:0 18px 46px -12px rgba(204,255,68,.6)}
.btn-ghost-l{border-color:rgba(246,242,255,.36);color:var(--hero-ink)}
.btn-ghost-l:hover{border-color:var(--lime);color:var(--lime)}
/* .cta-mark is now a wrapper round an inline