/* ============ TOKENS ============ Two-hue system: foil GOLD is a premium *material* (price, CTA, the card itself); starlight BLUE is the interactive/structural hue (links, guides, the constellation that stitches the How-it-works steps). Background is a layered celestial dome, never flat black. Structural devices borrow from engraved star atlases (plate rules + ticks). */ :root{ --ink:#070a15; --ground:#0a0e1c; --panel:#141c31; --panel-2:#0f1626; --panel-3:#1a2440; --line:#25314f; --line-2:#33436a; --accent:#ecc178; --accent-2:#f9e2b0; --accent-deep:#b78d45; /* warm foil gold */ --cool:#9fb6ff; --cool-2:#c6d4ff; --cool-deep:#6b8bea; /* periwinkle starlight */ --violet:#b7a0ff; --violet-2:#d3c6ff; --rose:#f4ab90; /* friendly warmth */ --text:#eef1fc; --text-2:#cfd7ec; --muted:#94a0bd; --star:#fbf7ea; --disc-1:#16203c; --disc-2:#0c1327; --disc-3:#070b16; --sky-line:rgba(201,162,75,0.42); --font-display:"Quicksand","Segoe UI Variable Display","Segoe UI",-apple-system,system-ui,sans-serif; --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif; --font-plate:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif; --radius:20px; --maxw:1200px; color-scheme:dark; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0;background:var(--ground);color:var(--text); font-family:var(--font-body);-webkit-font-smoothing:antialiased;line-height:1.62; overflow-x:hidden; } /* MOTION IS ALWAYS ON — deliberate product decision (Joseph, 2026-09-08). We do NOT honour `prefers-reduced-motion:reduce`. That preference is off by default on a large share of Windows machines (Settings > Accessibility > Visual effects > Animation effects, and most "best performance" tweaks flip it), which meant the living sky — the whole point of this product — silently died for a big slice of visitors. The motion here is slow, small-amplitude and local: gentle opacity twinkles, a ~9px hero float, a scale-1.03 glow, short fade-and-rise reveals. No parallax, no scroll- jacking, no large zooms, nothing fast or full-screen — i.e. none of the patterns the preference exists to suppress. TO RESTORE PREFERENCE-HONOURING BEHAVIOUR: re-add a `@media (prefers-reduced-motion:reduce)` block here that sets `*{animation:none}` and limits transitions to opacity/colour. A user-facing motion toggle would be the better version of that — see GO-LIVE.md. */ h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1.08;letter-spacing:-.02em;text-wrap:balance;margin:0} a{color:inherit} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(16px,4vw,32px)} /* Legacy eyebrow kept for the studio-embedded section; the redesigned public sections use the celestial "kicker" instead (a hairline + star glyph, not a tracked ALL-CAPS label). */ .eyebrow{color:var(--accent);font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;margin:0 0 .5rem;font-weight:600} .muted{color:var(--muted)} /* section kicker — a single star between two hairlines. Reads as a chart plate marker, not the generic tracked-caps label stacked above every heading. */ .kicker{display:inline-flex;align-items:center;gap:12px;margin:0 auto .9rem;color:var(--cool); font-size:.82rem;letter-spacing:.02em;font-weight:500} .kicker::before,.kicker::after{content:"";width:34px;height:1px; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--cool) 60%,transparent))} .kicker::after{transform:scaleX(-1)} .kicker .k-star{color:var(--accent);font-size:.7rem} /* layered celestial backdrop: a dawn dome up top, deep space below, faint coordinate haze */ .sky-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none; background: radial-gradient(1200px 720px at 78% -12%, #1a2748 0%, rgba(26,39,72,0) 60%), radial-gradient(900px 560px at 12% 4%, #141d38 0%, rgba(20,29,56,0) 58%), linear-gradient(180deg,#080c18 0%,#070a13 46%,#05070d 100%); transition:background .6s ease} .sky-bg i{position:absolute;width:2px;height:2px;border-radius:50%;background:#cdd6ea;opacity:.5; box-shadow:0 0 4px rgba(205,214,234,.5);animation:tw 4s ease-in-out infinite} @keyframes tw{0%,100%{opacity:.14}50%{opacity:.72}} /* ============ NAV ============ */ /* SCOPED TO #nav on purpose. This was a bare `nav{}` rule, so it also styled the three