/* ---------------------------------------------------------------- fonts (self-hosted)
   Inter and Space Grotesk (variable, latin) from avlory.com instead of Google Fonts, so nothing on another
   server blocks the first paint. The "Fallback" faces are local fonts resized to the same metrics, so text
   doesn't move when the real font arrives (layout shift). Licences: /assets/fonts/LICENSE-* */
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-latin-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/assets/fonts/space-grotesk-latin-var.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Fallback"; src: local("Arial"), local("ArialMT"), local("Roboto"), local("Helvetica Neue"); size-adjust: 107.48%; ascent-override: 90.13%; descent-override: 22.44%; line-gap-override: 0%; }
@font-face { font-family: "Space Grotesk Fallback"; src: local("Arial"), local("ArialMT"), local("Roboto"), local("Helvetica Neue"); size-adjust: 111.34%; ascent-override: 88.38%; descent-override: 26.23%; line-gap-override: 0%; }

/* ---------------------------------------------------------------- icons (Font Awesome 6.4 Free, subset)
   Only the icons these pages use (about 7 KB instead of the full 360 KB set). Fixed width, so icons never
   change size when the font loads. Font Awesome Free: icons CC BY 4.0, font SIL OFL 1.1. */
@font-face { font-family: "Waverate Icons"; src: url("/assets/fonts/waverate-icons-solid.woff2") format("woff2"); font-weight: 900; font-display: block; }
@font-face { font-family: "Waverate Brands"; src: url("/assets/fonts/waverate-icons-brands.woff2") format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "Waverate Regular"; src: url("/assets/fonts/waverate-icons-regular.woff2") format("woff2"); font-weight: 400; font-display: block; }
.fas, .fa-solid, .fab, .fa-brands, .far, .fa-regular { display: inline-block; width: 1.25em; text-align: center; font-style: normal; font-variant: normal; line-height: 1; text-rendering: auto; -webkit-font-smoothing: antialiased; }
.fas, .fa-solid { font-family: "Waverate Icons"; font-weight: 900; }
.fab, .fa-brands { font-family: "Waverate Brands"; font-weight: 400; }
.far, .fa-regular { font-family: "Waverate Regular"; font-weight: 400; }
.fa-spin { animation: fa-spin 1s linear infinite; }
@keyframes fa-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fa-spin { animation: none; } }
.fa-align-left::before { content: "\f036"; }
.fa-arrow-right-from-bracket::before { content: "\f08b"; }
.fa-arrow-trend-up::before { content: "\e098"; }
.fa-bars::before { content: "\f0c9"; }
.fa-bookmark::before { content: "\f02e"; }
.fa-bug::before { content: "\f188"; }
.fa-building-columns::before { content: "\f19c"; }
.fa-bullseye::before { content: "\f140"; }
.fa-chart-area::before { content: "\f1fe"; }
.fa-chart-column::before { content: "\e0e3"; }
.fa-chart-line::before { content: "\f201"; }
.fa-check::before { content: "\f00c"; }
.fa-circle-check::before { content: "\f058"; }
.fa-clock::before { content: "\f017"; }
.fa-compact-disc::before { content: "\f51f"; }
.fa-file-shield::before { content: "\e4f0"; }
.fa-file-signature::before { content: "\f573"; }
.fa-fingerprint::before { content: "\f577"; }
.fa-fire::before { content: "\f06d"; }
.fa-flag::before { content: "\f024"; }
.fa-gavel::before { content: "\f0e3"; }
.fa-hand-pointer::before { content: "\f25a"; }
.fa-headphones::before { content: "\f025"; }
.fa-heart::before { content: "\f004"; }
.fa-image::before { content: "\f03e"; }
.fa-layer-group::before { content: "\f5fd"; }
.fa-mobile-screen::before { content: "\f3cf"; }
.fa-paper-plane::before { content: "\f1d8"; }
.fa-people-arrows::before { content: "\e068"; }
.fa-play::before { content: "\f04b"; }
.fa-plug-circle-xmark::before { content: "\e560"; }
.fa-plus::before { content: "\2b"; }
.fa-receipt::before { content: "\f543"; }
.fa-robot::before { content: "\f544"; }
.fa-rotate::before { content: "\f2f1"; }
.fa-route::before { content: "\f4d7"; }
.fa-scale-balanced::before { content: "\f24e"; }
.fa-seedling::before { content: "\f4d8"; }
.fa-share-nodes::before { content: "\f1e0"; }
.fa-shield-alt::before { content: "\f3ed"; }
.fa-shield-halved::before { content: "\f3ed"; }
.fa-shoe-prints::before { content: "\f54b"; }
.fa-sliders::before { content: "\f1de"; }
.fa-star::before { content: "\f005"; }
.fa-star-half-stroke::before { content: "\f5c0"; }
.fa-stopwatch::before { content: "\f2f2"; }
.fa-thumbs-up::before { content: "\f164"; }
.fa-trophy::before { content: "\f091"; }
.fa-unlock::before { content: "\f09c"; }
.fa-user-check::before { content: "\f4fc"; }
.fa-user-lock::before { content: "\f502"; }
.fa-user-pen::before { content: "\f4ff"; }
.fa-user-shield::before { content: "\f505"; }
.fa-user-slash::before { content: "\f506"; }
.fa-wave-square::before { content: "\f83e"; }
.fa-xmark::before { content: "\f00d"; }
.fab.fa-apple::before, .fa-brands.fa-apple::before { content: "\f179"; }

/* Waverate web: "Night Session".
   The old site's aubergine night graded toward the app's charcoal, the app's magenta-pink as the live
   accent, violet as glow. Space Grotesk + Inter (the app's own fonts). Hand-written, no Tailwind.
   Motion: one hero moment (record slides out of its sleeve) + scroll/pointer-driven depth, all off
   under prefers-reduced-motion. */

:root {
    --night: #120a1b;
    --night-2: #17111d;
    --charcoal: #1c1c1f;
    --surface: #211a27;
    --surface-2: #2a2331;
    --surface-3: #342b3c;
    --cream: #fdfbf7;
    --muted: rgba(253, 251, 247, .7);
    --faint: rgba(253, 251, 247, .5);
    --line: rgba(253, 251, 247, .1);
    --line-strong: rgba(253, 251, 247, .18);
    --pink: #d65db1;
    --pink-hi: #e47cc4;
    --pink-soft: rgba(214, 93, 177, .16);
    --pink-ink: #1d0b18;
    --violet: #9333ea;
    --violet-glow: rgba(147, 51, 234, .32);
    --brass: #d9b779;
    --ok: #4ade80;
    --warn: #f5c451;
    --bad: #ff6b6b;
    --r-device: 44px;
    --r-card: 20px;
    --r-inner: 14px;
    --ease: cubic-bezier(.16, 1, .3, 1);
    --ease-in-out: cubic-bezier(.77, 0, .175, 1);
    --display: "Space Grotesk", "Space Grotesk Fallback", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --body: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html, body { overflow-x: clip; }
body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: var(--cream);
    background-color: var(--night);
    background-image:
        radial-gradient(1100px 680px at 82% -8%, var(--violet-glow), transparent 62%),
        radial-gradient(760px 520px at -6% 14%, rgba(214, 93, 177, .12), transparent 62%),
        linear-gradient(180deg, var(--night) 0, var(--night-2) 1400px, #151318 100%);
    background-repeat: no-repeat;
    font: 400 17px/1.6 var(--body);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: rgba(214, 93, 177, .2);
    touch-action: manipulation;
}
main { flex: 1; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 700; letter-spacing: -.025em; line-height: 1.05; text-wrap: balance; }
.hidden, [hidden] { display: none !important; }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.num { font-family: var(--display); font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 10px; z-index: 200; background: var(--pink); color: var(--pink-ink); font-weight: 700; padding: 10px 16px; border-radius: 12px; text-decoration: none; }
.skip:focus { left: 10px; }
:focus-visible { outline: 2px solid var(--pink-hi); outline-offset: 3px; border-radius: 8px; }
.text-link { color: var(--pink-hi); text-decoration: underline; text-decoration-color: rgba(228, 124, 196, .45); text-underline-offset: 3px; }
.text-link:hover { text-decoration-color: currentColor; }

/* ---------------------------------------------------------------- nav */
.nav { position: sticky; top: 0; z-index: 60; background: rgba(18, 10, 27, .78); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: center; gap: 16px; height: 66px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 700 1.22rem var(--display); letter-spacing: -.02em; }
.brand img { width: 32px; height: 32px; border-radius: 50%; box-shadow: 0 0 0 1px var(--line-strong), 0 0 18px rgba(214, 93, 177, .35); }
.brand small { font: 500 .8rem var(--body); color: var(--faint); letter-spacing: 0; margin-left: 2px; }
.nav-links { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav-links a { text-decoration: none; color: var(--muted); font-weight: 500; font-size: .93rem; padding: 9px 13px; border-radius: 999px; transition: color .15s, background-color .15s; }
.nav-links a:hover { color: var(--cream); background: rgba(253, 251, 247, .06); }
.nav-links a[aria-current="page"] { color: var(--cream); background: rgba(253, 251, 247, .08); }
.nav-links .btn { margin-left: 8px; color: var(--pink-ink); }
.nav-links .btn:hover { color: var(--pink-ink); background: var(--pink-hi); }
.menu-toggle { display: none; margin-left: auto; width: 44px; height: 44px; border-radius: 14px; border: 1px solid var(--line-strong); background: rgba(253, 251, 247, .04); color: var(--cream); font-size: 1.05rem; cursor: pointer; }
@media (max-width: 900px) {
    .menu-toggle { display: inline-grid; place-items: center; }
    .nav-links { display: none; position: absolute; top: 66px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; padding: 10px 16px 18px; background: rgba(18, 10, 27, .97); border-bottom: 1px solid var(--line); max-height: calc(100vh - 66px); overflow-y: auto; overscroll-behavior: contain; }
    .nav.open .nav-links { display: flex; }
    .nav-links a { padding: 13px 14px; font-size: 1rem; }
    .nav-links .btn { margin: 8px 0 0; }
}

/* ---------------------------------------------------------------- buttons, chips */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 12px 22px; border: 0; border-radius: 999px; cursor: pointer; text-decoration: none; font: 600 .97rem var(--body); background: var(--pink); color: var(--pink-ink); box-shadow: 0 10px 30px -10px rgba(214, 93, 177, .7); transition: background-color .15s, transform .15s var(--ease), box-shadow .15s; }
.btn:hover { background: var(--pink-hi); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn.ghost { background: transparent; color: var(--cream); border: 1px solid var(--line-strong); box-shadow: none; }
.btn.ghost:hover { background: rgba(253, 251, 247, .06); }
.btn.quiet { background: rgba(253, 251, 247, .06); color: var(--cream); box-shadow: none; }
.btn.quiet:hover { background: rgba(253, 251, 247, .1); }
.btn.small { min-height: 38px; padding: 8px 15px; font-size: .88rem; }
.btn.block { width: 100%; }
.store { display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 9px 22px 9px 18px; border-radius: 16px; background: var(--cream); color: #140b18; text-decoration: none; box-shadow: 0 14px 40px -14px rgba(253, 251, 247, .45); transition: transform .15s var(--ease); }
.store:hover { transform: translateY(-1px); }
.store i { font-size: 1.75rem; }
.store span { display: grid; line-height: 1.12; font: 600 1.12rem var(--display); letter-spacing: -.01em; }
.store small { font: 500 .7rem var(--body); letter-spacing: .02em; opacity: .7; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: .8rem; font-weight: 600; background: var(--pink-soft); color: var(--pink-hi); white-space: nowrap; }
.chip.soon { background: rgba(245, 196, 81, .14); color: var(--warn); }
.chip.ok { background: rgba(74, 222, 128, .14); color: var(--ok); }
.chip.plain { background: rgba(253, 251, 247, .07); color: var(--muted); }

/* ---------------------------------------------------------------- sections */
.band { padding: clamp(72px, 11vw, 136px) 0; position: relative; }
.band.tight { padding: clamp(56px, 8vw, 96px) 0; }
.band + .band { border-top: 1px solid var(--line); }
.h2 { font-size: clamp(2.1rem, 5vw, 3.6rem); }
.h3 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); letter-spacing: -.02em; }
.lede { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--muted); max-width: 60ch; text-wrap: pretty; }
.prose { display: grid; gap: 18px; align-content: start; }
.prose > .chip { justify-self: start; }
.duo.top { align-items: start; }
.prose > p { color: var(--muted); max-width: 58ch; text-wrap: pretty; }
.prose strong { color: var(--cream); font-weight: 600; }
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.duo.flip > :first-child { order: 2; }
@media (max-width: 900px) { .duo { grid-template-columns: 1fr; } .duo.flip > :first-child { order: 0; } }

/* Feature list: term + one line, separated by hairlines (not cards). */
.terms { display: grid; gap: 0; margin: 6px 0 0; padding: 0; }
.terms > div { display: grid; grid-template-columns: 34px 1fr; gap: 4px 14px; padding: 16px 0; border-top: 1px solid var(--line); }
.terms > div:last-child { border-bottom: 1px solid var(--line); }
.terms i { grid-row: span 2; color: var(--pink-hi); font-size: 1.05rem; margin-top: 4px; text-align: center; }
.terms dt { font: 600 1.04rem var(--display); letter-spacing: -.01em; }
.terms dd { margin: 0; color: var(--muted); font-size: .96rem; }

/* ---------------------------------------------------------------- devices (real screenshots) */
.device { position: relative; margin: 0; width: min(300px, 72vw); padding: 9px; border-radius: var(--r-device); background: linear-gradient(145deg, #2b2430, #09070b 40%, #050406); box-shadow: inset 0 0 0 1.5px rgba(253, 251, 247, .14), 0 40px 80px -30px rgba(0, 0, 0, .85), 0 0 90px -30px var(--violet-glow); }
.device img { width: 100%; aspect-ratio: 720 / 1564; border-radius: calc(var(--r-device) - 9px); background: var(--charcoal); }
.device.sm { width: min(240px, 60vw); --r-device: 36px; padding: 7px; }
.device.sm img { border-radius: 29px; }
.device figcaption { position: absolute; left: 50%; bottom: -38px; translate: -50% 0; white-space: nowrap; font-size: .82rem; color: var(--faint); }

/* Depth: a resting perspective tilt that settles flat when you point at it. */
.tilt { transform: perspective(1400px) rotateY(var(--ry, -14deg)) rotateX(var(--rx, 4deg)) rotateZ(var(--rz, 0deg)); transition: transform .5s var(--ease); }
.tilt.r { --ry: 14deg; }
@media (hover: hover) and (pointer: fine) { .tilt:hover { transform: perspective(1400px) rotateY(0) rotateX(0) rotateZ(0) translateY(-6px); } }

.pair { position: relative; display: grid; place-items: center; min-height: 600px; }
.pair .device:first-child { position: relative; z-index: 2; }
.pair .device + .device { position: absolute; z-index: 1; }
.pair.fan .device:first-child { translate: -22% 0; }
.pair.fan .device + .device { translate: 30% 5%; --ry: -24deg; opacity: .92; }
@media (max-width: 560px) {
    .pair { min-height: 0; padding-bottom: 20px; }
    .pair.fan .device:first-child { translate: -16% 0; }
    .pair.fan .device + .device { translate: 24% 4%; width: min(220px, 56vw); }
}

/* Horizontal shelf of devices: a row on desktop, swipeable on phones. */
.rail { display: flex; gap: clamp(20px, 4vw, 48px); justify-content: center; align-items: flex-start; padding: 24px 4px 56px; }
.rail .device:nth-child(2) { margin-top: -28px; }
@media (max-width: 900px) {
    .rail { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; padding: 24px 20px 56px; margin: 0 -20px; scrollbar-width: none; overscroll-behavior-x: contain; }
    .rail::-webkit-scrollbar { display: none; }
    .rail .device { flex: 0 0 auto; scroll-snap-align: center; width: min(250px, 66vw); }
    .rail .device:nth-child(2) { margin-top: 0; }
    .rail .tilt { --ry: 0deg; --rx: 0deg; }
}
.rail-hint { display: none; text-align: center; font-size: .85rem; color: var(--faint); margin-top: -36px; }
@media (max-width: 900px) { .rail-hint { display: block; } }

/* ---------------------------------------------------------------- hero */
.hero { padding: clamp(36px, 6vw, 72px) 0 clamp(16px, 3vw, 40px); position: relative; isolation: isolate; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 24px; align-items: center; }
.hero h1 { font-size: clamp(3rem, 7.6vw, 6.1rem); letter-spacing: -.045em; line-height: .96; }
.hero h1 .score-word { font-variant-numeric: tabular-nums; color: var(--pink); }
.hero .copy { display: grid; gap: 26px; justify-items: start; }
.hero .lede { max-width: 34rem; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
/* Android visitors get the beta form instead of the App Store button, decided before first paint (waverate-platform.js) */
.is-android #ios-cta, .is-android #app-store-stats-container { display: none !important; }
.is-android #android-beta-ui.hidden { display: block !important; }

/* Space is reserved from the start (hidden, not removed) so the rating appearing doesn't push the page down */
.store-rating { display: inline-flex; visibility: hidden; min-height: 1.5em; align-items: center; gap: 8px; font-size: .9rem; color: var(--muted); }
.store-rating.on { visibility: visible; }
.store-rating .stars { color: #f5b301; display: inline-flex; gap: 2px; font-size: .85rem; }
.made-by { font-size: .9rem; color: var(--faint); }
.made-by a { color: var(--muted); }
@media (max-width: 960px) { .hero .wrap { grid-template-columns: 1fr; gap: 8px; } }

/* The turntable: plain CSS 3D. Units scale with --u so it fits any width. */
.stage { --u: 1px; position: relative; height: calc(580 * var(--u)); perspective: 1600px; perspective-origin: 40% 30%; }
@media (min-width: 1240px) { .stage { margin-right: -70px; } }
.deck { position: absolute; left: calc(-6 * var(--u)); top: calc(96 * var(--u)); width: calc(430 * var(--u)); height: calc(350 * var(--u)); transform-style: preserve-3d; transform: rotateX(56deg) rotateZ(-22deg); }
.deck > * { position: absolute; }
.plinth { inset: 0; border-radius: calc(22 * var(--u)); transform-style: preserve-3d;
    background:
        radial-gradient(120% 90% at 20% 10%, rgba(253, 251, 247, .09), transparent 55%),
        linear-gradient(135deg, #3a2a44, #23182b 55%, #1a1220); box-shadow: inset 0 0 0 1px rgba(253, 251, 247, .12); }
.plinth::before, .plinth::after { content: ""; position: absolute; background: linear-gradient(180deg, #2a1d33, #120c17); }
.plinth::before { left: calc(22 * var(--u)); right: calc(22 * var(--u)); bottom: 0; height: calc(30 * var(--u)); transform-origin: bottom; transform: rotateX(-90deg); }
.plinth::after { top: calc(22 * var(--u)); bottom: calc(22 * var(--u)); right: 0; width: calc(30 * var(--u)); transform-origin: right; transform: rotateY(90deg); background: linear-gradient(90deg, #1d1424, #0d0910); }
.deck-shadow { inset: calc(-30 * var(--u)); border-radius: 50px; background: radial-gradient(closest-side, rgba(0, 0, 0, .7), transparent); transform: translateZ(calc(-34 * var(--u))); filter: blur(10px); }
.platter { left: calc(24 * var(--u)); top: calc(24 * var(--u)); width: calc(302 * var(--u)); height: calc(302 * var(--u)); border-radius: 50%; transform: translateZ(calc(4 * var(--u)));
    background: conic-gradient(from 10deg, #6d6774, #2c2830, #77707e, #2c2830, #6d6774); box-shadow: 0 0 0 calc(2 * var(--u)) #0b080d, 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, .6); }
.sleeve { left: calc(150 * var(--u)); top: calc(-118 * var(--u)); width: calc(270 * var(--u)); height: calc(270 * var(--u)); border-radius: calc(6 * var(--u)); transform: translateZ(calc(3 * var(--u))) rotateZ(9deg); overflow: hidden;
    background:
        repeating-radial-gradient(circle at 100% 100%, transparent 0 calc(13 * var(--u)), rgba(253, 251, 247, .07) calc(13 * var(--u)) calc(14 * var(--u))),
        linear-gradient(140deg, #d65db1 0%, #9333ea 58%, #3b1460 100%);
    box-shadow: 0 calc(16 * var(--u)) calc(40 * var(--u)) rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(253, 251, 247, .2); }
.sleeve b { position: absolute; left: calc(18 * var(--u)); bottom: calc(14 * var(--u)); font: 700 calc(30 * var(--u))/1 var(--display); letter-spacing: -.03em; color: var(--cream); }
.sleeve i { position: absolute; left: calc(20 * var(--u)); top: calc(18 * var(--u)); font: 500 calc(12 * var(--u))/1.2 var(--body); font-style: normal; color: rgba(253, 251, 247, .8); }
.record-slide { left: calc(30 * var(--u)); top: calc(30 * var(--u)); width: calc(290 * var(--u)); height: calc(290 * var(--u)); transform: translateZ(calc(9 * var(--u))); }
.record { position: absolute; inset: 0; border-radius: 50%; transform: rotate(var(--spin, 0deg));
    background:
        radial-gradient(circle, transparent 0 32%, rgba(0, 0, 0, .0) 32%),
        repeating-radial-gradient(circle, #121014 0 calc(1.6 * var(--u)), #1d1a20 calc(1.6 * var(--u)) calc(3.2 * var(--u)));
    box-shadow: inset 0 0 0 calc(4 * var(--u)) #0a090b, 0 0 0 1px rgba(253, 251, 247, .06); }
.record::before { content: ""; position: absolute; inset: 31%; border-radius: 50%; box-shadow: 0 0 0 calc(10 * var(--u)) #0d0b0e; }
.rec-label { position: absolute; inset: 33%; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 50%, #0d0b0e 0 6%, transparent 6.5%), linear-gradient(150deg, #e47cc4, #d65db1 45%, #9a3a85); overflow: hidden; }
.rec-label::before { content: ""; position: absolute; left: 50%; top: 14%; width: 46%; height: 9%; translate: -50% 0; border-radius: 99px; background: rgba(29, 11, 24, .55); }
.rec-label::after { content: "33\2153"; position: absolute; bottom: 14%; font: 700 calc(11 * var(--u)) var(--display); color: rgba(29, 11, 24, .7); }
.sheen { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: conic-gradient(from 200deg, transparent 0 8%, rgba(253, 251, 247, .13) 13%, transparent 19% 52%, rgba(253, 251, 247, .08) 60%, transparent 66%); mix-blend-mode: screen; }
.tonearm { left: calc(380 * var(--u)); top: calc(150 * var(--u)); width: 0; height: 0; transform-style: preserve-3d; translate: 0 0 calc(34 * var(--u)); rotate: 0deg; }
.needle-down .tonearm { translate: 0 0 calc(10 * var(--u)); rotate: 38deg; }
.tonearm .base { position: absolute; left: calc(-26 * var(--u)); top: calc(-26 * var(--u)); width: calc(52 * var(--u)); height: calc(52 * var(--u)); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3d6, var(--brass) 40%, #6e5428); box-shadow: 0 0 0 calc(5 * var(--u)) #1a1220, 0 calc(8 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, .55); }
.tonearm .arm { position: absolute; left: calc(-4 * var(--u)); top: 0; width: calc(8 * var(--u)); height: calc(240 * var(--u)); border-radius: 99px; background: linear-gradient(90deg, #8a6c37, #f6e2b3 45%, #a5864c); transform-origin: top center; transform: rotate(14deg); box-shadow: calc(8 * var(--u)) calc(12 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, .45); }
.tonearm .head { position: absolute; left: calc(-14 * var(--u)); bottom: calc(-26 * var(--u)); width: calc(30 * var(--u)); height: calc(38 * var(--u)); border-radius: calc(5 * var(--u)); background: linear-gradient(180deg, #2c2430, #120d15); box-shadow: inset 0 0 0 1px rgba(253, 251, 247, .2); transform: rotate(-24deg); }
.hero-phone { position: absolute; right: 0; bottom: 0; width: calc(236 * var(--u)); padding: calc(8 * var(--u)); --r-device: calc(40 * var(--u)); transform: perspective(1400px) rotateY(calc(-20deg + var(--px, 0) * 6deg)) rotateX(calc(6deg - var(--py, 0) * 5deg)) rotateZ(3deg); transition: transform .4s var(--ease); }
.hero-phone img { border-radius: calc(32 * var(--u)); }
/* "Drop the needle": a real button over the tonearm (both poses). Needs JS, so it only shows with .js. */
.needle-btn { display: none; position: absolute; left: calc(196 * var(--u)); top: calc(150 * var(--u)); width: calc(236 * var(--u)); height: calc(236 * var(--u)); padding: 0; border: 0; border-radius: 24px; background: none; color: var(--cream); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.js .needle-btn { display: block; }
.needle-pill { position: absolute; left: calc(160 * var(--u)); bottom: calc(-6 * var(--u)); translate: -50% 0; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 7px 14px; border-radius: 999px; white-space: nowrap; font: 600 .84rem/1 var(--body); background: color-mix(in srgb, var(--night) 86%, transparent); border: 1px solid var(--line-strong); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .8); transition: border-color .15s ease, background-color .15s ease; }
.needle-pill i { color: var(--brass); }
.needle-btn:active .needle-pill { background: var(--surface-2); }
@media (hover: hover) and (pointer: fine) { .needle-btn:hover .needle-pill { border-color: var(--pink-hi); background: var(--surface-2); } }
.needle-btn:focus-visible { outline-offset: 0; }
@media (max-width: 640px) { .needle-pill { left: calc(20 * var(--u)); bottom: calc(-64 * var(--u)); } }
@media (max-width: 1180px) { .stage { --u: .86px; } }
@media (max-width: 960px) { .stage { --u: .9px; margin: 8px auto 0; width: calc(640 * var(--u)); max-width: 100%; } }
@media (max-width: 640px) { .stage { --u: .6px; width: 100%; height: calc(620 * var(--u)); margin-top: 12px; } .deck { left: calc(-30 * var(--u)); } }
@media (max-width: 380px) { .stage { --u: .54px; } }

/* The one orchestrated moment: the record slides out of its sleeve onto the platter. */
@media (prefers-reduced-motion: no-preference) {
    .record-slide { animation: slide-out 1.4s .25s var(--ease) both; }
    .sleeve { animation: sleeve-in 1.1s var(--ease) both; }
    .hero-phone { animation: phone-in 1.1s .45s var(--ease) both; }
    @keyframes slide-out { from { translate: calc(190 * var(--u)) calc(-10 * var(--u)); } to { translate: 0 0; } }
    @keyframes sleeve-in { from { translate: calc(40 * var(--u)) 0; } to { translate: 0 0; } }
    @keyframes phone-in { from { translate: 0 40px; } to { translate: 0 0; } }
    /* Needle drop (feedback): swing over the record, then lower. Lifting reverses it: up, then back.
       Transitions, not keyframes, so a second tap mid-move retargets from where the arm is. */
    .tonearm { transition: translate .2s var(--ease), rotate .45s var(--ease-in-out) .14s; }
    .needle-down .tonearm { transition: rotate .45s var(--ease-in-out), translate .22s var(--ease) .4s; }
}

/* ---------------------------------------------------------------- rating demo */
.rater { position: relative; border-radius: 28px; padding: clamp(24px, 4vw, 40px); background: linear-gradient(180deg, #2a2230, #1f1924); border: 1px solid var(--line); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9); display: grid; gap: 22px; max-width: 520px; }
.rater-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.rater-head h3 { font-size: 1.15rem; letter-spacing: -.01em; }
.rater-score { font: 700 clamp(4.4rem, 13vw, 7.4rem)/.9 var(--display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; color: var(--score-color, var(--pink)); text-align: center; transition: color .12s linear; }
.rater-meta { display: flex; justify-content: center; gap: 10px; min-height: 30px; flex-wrap: wrap; }
.range { --pct: 75%; width: 100%; height: 44px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; touch-action: pan-y; }
.range:focus-visible { outline-offset: 2px; }
.range::-webkit-slider-runnable-track { height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--score-color, var(--pink)) var(--pct), #3a3340 var(--pct)); }
.range::-moz-range-track { height: 8px; border-radius: 99px; background: #3a3340; }
.range::-moz-range-progress { height: 8px; border-radius: 99px; background: var(--score-color, var(--pink)); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -10px; border-radius: 50%; background: var(--cream); border: 0; box-shadow: 0 0 0 6px color-mix(in srgb, var(--score-color, #d65db1) 35%, transparent), 0 4px 12px rgba(0, 0, 0, .5); }
.range::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: var(--cream); border: 0; box-shadow: 0 0 0 6px rgba(214, 93, 177, .35); }
.scale-ends { display: flex; justify-content: space-between; font-size: .8rem; color: var(--faint); margin-top: -12px; font-variant-numeric: tabular-nums; }
.steps { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.steps button { min-width: 64px; min-height: 40px; border-radius: 12px; border: 1px solid var(--line-strong); background: rgba(253, 251, 247, .04); color: var(--cream); font: 600 .92rem var(--display); font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color .15s; }
.steps button:hover { background: rgba(253, 251, 247, .1); }
.rater-foot { font-size: .84rem; color: var(--faint); text-align: center; }
.rate-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 80px); align-items: center; }
.rate-layout .prose { grid-column: 1 / -1; max-width: 760px; }
.rate-side { display: grid; justify-items: center; }
@media (max-width: 900px) { .rate-layout { grid-template-columns: 1fr; } .rater { margin: 0 auto; width: 100%; } .rate-side { display: none; } }

/* ---------------------------------------------------------------- fused */
.match-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.match-strip .chip { font-size: .86rem; padding: 7px 13px; }

/* ---------------------------------------------------------------- analytics glossary */
.gloss { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin: 0; }
.gloss div { padding: 18px 0; border-top: 1px solid var(--line); }
.gloss dt { font: 600 1.05rem var(--display); color: var(--cream); display: flex; align-items: center; gap: 10px; }
.gloss dt i { color: var(--pink-hi); font-size: .95rem; width: 18px; text-align: center; }
.gloss dd { margin: 6px 0 0 28px; color: var(--muted); font-size: .95rem; }
@media (max-width: 640px) { .gloss { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- listening room */
.room { position: relative; overflow: clip; background: radial-gradient(900px 500px at 50% 110%, rgba(147, 51, 234, .25), transparent 70%), #0f0a14; }

/* ---------------------------------------------------------------- artists teaser */
.teaser { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; padding: clamp(24px, 4vw, 40px); border-radius: 28px; background: linear-gradient(120deg, rgba(147, 51, 234, .22), rgba(214, 93, 177, .12) 60%, rgba(253, 251, 247, .03)); border: 1px solid var(--line-strong); }
.teaser .disc { width: 96px; height: 96px; border-radius: 50%; background: radial-gradient(circle, var(--pink) 0 22%, #0d0b0e 22.5% 25%, transparent 25.5%), repeating-radial-gradient(circle, #121014 0 2px, #211d24 2px 4px); box-shadow: 0 12px 30px rgba(0, 0, 0, .5); }
.teaser h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-top: 8px; }
.teaser p { color: var(--muted); margin-top: 8px; max-width: 62ch; }
@media (max-width: 760px) { .teaser { grid-template-columns: 1fr; } .teaser .disc { width: 72px; height: 72px; } }

/* ---------------------------------------------------------------- pricing */
.plans { display: grid; grid-template-columns: 1fr 1.08fr 1fr; gap: 0; border: 1px solid var(--line-strong); border-radius: 28px; overflow: hidden; background: rgba(23, 17, 29, .7); }
.plan { padding: clamp(24px, 3vw, 36px); display: grid; gap: 16px; align-content: start; }
.plan + .plan { border-left: 1px solid var(--line-strong); }
.plan h3 { font-size: 1.35rem; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.plan .price { font: 700 clamp(2.4rem, 4vw, 3rem)/1 var(--display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.plan .price small { font: 500 .95rem var(--body); color: var(--muted); letter-spacing: 0; }
.plan > p { color: var(--muted); font-size: .96rem; }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.plan li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: .95rem; color: var(--muted); }
.plan li i { color: var(--pink-hi); margin-top: 5px; font-size: .8rem; }
.plan li strong { color: var(--cream); font-weight: 600; }
.plan .btn, .plan .store { margin-top: 6px; justify-self: start; }
.plan.featured { background: linear-gradient(180deg, rgba(214, 93, 177, .16), rgba(147, 51, 234, .08)); box-shadow: inset 0 3px 0 var(--pink); }
.plan.later { background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(253, 251, 247, .018) 14px 28px); }
.fine { margin-top: 22px; font-size: .86rem; color: var(--faint); max-width: 80ch; }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; } .plan + .plan { border-left: 0; border-top: 1px solid var(--line-strong); } }

/* ---------------------------------------------------------------- FAQ (native details) */
.faq { display: grid; max-width: 820px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 2px; font: 600 1.1rem var(--display); letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: rgba(253, 251, 247, .06); color: var(--pink-hi); font: 500 1.3rem var(--body); transition: transform .2s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--pink-hi); }
.faq details p { padding: 0 2px 22px; color: var(--muted); max-width: 70ch; }

/* ---------------------------------------------------------------- footer */
.site-foot { border-top: 1px solid var(--line); padding: 56px 0 36px; background: rgba(10, 6, 14, .6); margin-top: auto; }
.foot-cols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.foot-cols p { color: var(--faint); font-size: .92rem; margin-top: 12px; max-width: 36ch; }
.foot-cols h2 { font: 600 .95rem var(--display); color: var(--cream); margin-bottom: 12px; letter-spacing: 0; }
.foot-cols ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.foot-cols li { display: flex; flex-wrap: wrap; align-items: center; }
.foot-cols li > #avlory-cookie-choices-link { flex-basis: 100%; }
.foot-cols li a { display: inline-block; padding: 5px 0; color: var(--muted); text-decoration: none; font-size: .94rem; }
.foot-cols li a:hover { color: var(--pink-hi); }
.foot-cols .chip { font-size: .7rem; padding: 2px 8px; margin-left: 6px; vertical-align: 1px; }
.foot-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); font-size: .84rem; color: var(--faint); }
@media (max-width: 800px) { .foot-cols { grid-template-columns: 1fr 1fr; } .foot-cols > :first-child { grid-column: 1 / -1; } }

/* ---------------------------------------------------------------- page heads (inner pages) */
.page-head { padding: clamp(48px, 8vw, 104px) 0 clamp(32px, 5vw, 56px); }
.page-head h1 { font-size: clamp(2.6rem, 6.4vw, 4.8rem); letter-spacing: -.04em; line-height: .98; max-width: 16ch; }
.page-head .lede { margin-top: 22px; }
.page-head .chip { margin-bottom: 20px; }

/* ---------------------------------------------------------------- panels, forms */
.panel { background: linear-gradient(180deg, #251d2b, #1e1823); border: 1px solid var(--line); border-radius: 24px; padding: clamp(22px, 4vw, 36px); box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .9); }
.field-group { display: grid; gap: 7px; }
.label { font-size: .9rem; font-weight: 600; color: var(--cream); }
.hint { font-size: .82rem; color: var(--faint); }
.field { width: 100%; min-height: 48px; padding: 12px 14px; border-radius: var(--r-inner); border: 1px solid var(--line-strong); background: #17111c; color: var(--cream); font: 400 1rem var(--body); transition: border-color .15s, box-shadow .15s; }
.field::placeholder { color: rgba(253, 251, 247, .38); }
.field:hover { border-color: rgba(253, 251, 247, .28); }
.field:focus { outline: none; border-color: var(--pink); box-shadow: 0 0 0 3px rgba(214, 93, 177, .28); }
.field[aria-invalid="true"] { border-color: var(--bad); }
textarea.field { resize: vertical; min-height: 140px; line-height: 1.5; }
select.field { background-color: #17111c; color: var(--cream); }
.form { display: grid; gap: 18px; }
.status { padding: 12px 14px; border-radius: 12px; font-size: .94rem; font-weight: 500; }
.status.ok, #statusMessage.text-green-400 { background: rgba(74, 222, 128, .1); color: var(--ok); border: 1px solid rgba(74, 222, 128, .25); }
.status.err, #statusMessage.text-red-400 { background: rgba(255, 107, 107, .1); color: var(--bad); border: 1px solid rgba(255, 107, 107, .25); }
#statusMessage { padding: 12px 14px; border-radius: 12px; font-size: .94rem; font-weight: 500; text-align: center; }
.field-error { color: var(--bad); font-size: .86rem; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--faint); font-size: .84rem; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---------------------------------------------------------------- vinyl loader (app's loading pattern) */
.spinner-disc { width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle, var(--pink) 0 18%, #0d0b0e 19% 22%, transparent 23%), repeating-radial-gradient(circle, #121014 0 2px, #29242c 2px 4px); box-shadow: 0 0 0 1px var(--line); }
@media (prefers-reduced-motion: no-preference) { .spinner-disc { animation: disc 1.6s linear infinite; } @keyframes disc { to { rotate: 360deg; } } }
.state { display: grid; justify-items: center; text-align: center; gap: 14px; padding: 48px 20px; color: var(--muted); }
.state h2, .state h3 { color: var(--cream); font-size: 1.35rem; }
.state .icon-ring { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--pink-soft); color: var(--pink-hi); font-size: 1.4rem; }

/* ---------------------------------------------------------------- legal documents */
.doc-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 56px; align-items: start; padding-bottom: 96px; }
.toc { position: sticky; top: 90px; max-height: calc(100vh - 110px); overflow-y: auto; padding-right: 8px; }
.toc h2 { font: 600 .92rem var(--display); color: var(--cream); margin-bottom: 10px; letter-spacing: 0; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.toc a { display: block; padding: 6px 10px; border-radius: 10px; font-size: .88rem; color: var(--muted); text-decoration: none; line-height: 1.35; }
.toc a:hover { background: rgba(253, 251, 247, .05); color: var(--cream); }
.doc { max-width: 72ch; }
.doc-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.doc section { padding-top: 34px; scroll-margin-top: 90px; }
.doc h2 { font-size: 1.5rem; letter-spacing: -.02em; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 14px; display: flex; gap: 12px; align-items: baseline; }
.doc h2 .n { color: var(--pink-hi); font-variant-numeric: tabular-nums; min-width: 2.6ch; }
.doc p { color: rgba(253, 251, 247, .78); margin: 12px 0 0; font-size: 1rem; line-height: 1.7; text-wrap: pretty; overflow-wrap: anywhere; }
.doc p .m { color: var(--cream); font-weight: 600; margin-right: .35em; font-variant-numeric: tabular-nums; }
.doc p.l2 { padding-left: 1.6em; }
.doc p.l3 { padding-left: 3.2em; }
@media (max-width: 900px) { .doc-layout { grid-template-columns: 1fr; gap: 24px; } .toc { position: static; max-height: none; border: 1px solid var(--line); border-radius: 18px; padding: 16px; } .toc ol { grid-template-columns: 1fr; } .doc p.l3 { padding-left: 2.4em; } }

/* ---------------------------------------------------------------- bug board */
.board-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; }
.board-bar .who { color: var(--muted); font-size: .95rem; }
.board-bar .who b { color: var(--cream); }
.board-tools { display: flex; gap: 10px; flex-wrap: wrap; }
.bug-list { display: grid; gap: 12px; }
.bug { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: start; padding: 20px 22px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); }
.bug-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bug-title h3 { font-size: 1.12rem; letter-spacing: -.01em; overflow-wrap: anywhere; min-width: 0; }
.bug-desc { color: var(--muted); margin-top: 8px; font-size: .95rem; white-space: pre-line; overflow-wrap: anywhere; }
.bug-meta { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-size: .82rem; color: var(--faint); }
.bug-meta i { margin-right: 5px; }
.bug-actions { display: grid; gap: 8px; justify-items: end; }
.vote { display: inline-grid; justify-items: center; gap: 2px; min-width: 56px; min-height: 56px; padding: 8px; border-radius: 16px; border: 1px solid var(--line-strong); background: rgba(253, 251, 247, .03); color: var(--muted); font: 600 .95rem var(--display); cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
.vote:hover { color: var(--cream); border-color: rgba(253, 251, 247, .3); }
.vote[aria-pressed="true"] { background: var(--pink-soft); color: var(--pink-hi); border-color: rgba(214, 93, 177, .5); }
.vote:disabled { opacity: .6; cursor: progress; }
.skeleton { height: 112px; border-radius: var(--r-card); background: linear-gradient(90deg, var(--surface) 0, var(--surface-2) 50%, var(--surface) 100%); background-size: 200% 100%; border: 1px solid var(--line); }
@media (prefers-reduced-motion: no-preference) { .skeleton { animation: shimmer 1.4s linear infinite; } @keyframes shimmer { to { background-position: -200% 0; } } }
@media (max-width: 600px) { .bug { grid-template-columns: 1fr; } .bug-actions { grid-auto-flow: column; justify-content: start; align-items: center; } .vote { grid-auto-flow: column; gap: 8px; min-height: 44px; } }

dialog.sheet { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 1px solid var(--line-strong); border-radius: 24px; background: linear-gradient(180deg, #2a2230, #1f1924); color: var(--cream); box-shadow: 0 40px 100px rgba(0, 0, 0, .7); overscroll-behavior: contain; }
dialog.sheet::backdrop { background: rgba(8, 4, 12, .72); backdrop-filter: blur(6px); }
dialog.sheet .sheet-body { padding: clamp(22px, 4vw, 32px); display: grid; gap: 18px; }
dialog.sheet h2 { font-size: 1.5rem; }
.sheet-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- inner pages */
.display-1 { font-size: clamp(2.6rem, 6.4vw, 4.8rem); letter-spacing: -.04em; line-height: .98; }
.gloss-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 32px; }
@media (max-width: 900px) { .gloss-3 { grid-template-columns: 1fr; } }
.center-stack { display: grid; justify-items: center; text-align: center; gap: 18px; }
.support-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: clamp(32px, 6vw, 80px); align-items: start; padding-bottom: clamp(56px, 8vw, 104px); }
.support-grid .page-head h1 { max-width: 12ch; }
.support-links { margin-top: 32px; }
.support-form { margin-top: clamp(0px, 6vw, 104px); }
.support-form h2 { margin-bottom: 18px; }
@media (max-width: 900px) { .support-grid { grid-template-columns: 1fr; } .support-form { margin-top: 0; } }
.steps-list { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 0; }
.steps-list li { counter-increment: step; display: grid; grid-template-columns: 48px 1fr; gap: 4px 16px; padding: 18px 0; border-top: 1px solid var(--line); }
.steps-list li:last-child { border-bottom: 1px solid var(--line); }
.steps-list li::before { content: counter(step); grid-row: span 2; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--pink-soft); color: var(--pink-hi); font: 700 1rem var(--display); }
.steps-list h3 { font-size: 1.08rem; letter-spacing: -.01em; }
.steps-list p { color: var(--muted); font-size: .95rem; }
.notice { padding: 16px 18px; border-radius: 16px; background: rgba(245, 196, 81, .08); border: 1px solid rgba(245, 196, 81, .22); color: var(--muted); font-size: .95rem; }
.notice strong { color: var(--cream); }
.artist-hero { padding-top: clamp(40px, 7vw, 88px); }

/* The board swaps "Checking your sign-in" for the sign-in form or the list once it knows: at least a screen tall,
   so the footer never starts on screen and jumps down when it does (layout shift). */
.board { padding-bottom: clamp(56px, 8vw, 104px); min-height: 100svh; }
.board-gate { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.board-gate .panel { width: 100%; }
@media (max-width: 860px) { .board-gate { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .nav-links.nav-inline { display: flex; position: static; flex-direction: row; align-items: center; padding: 0; background: none; border: 0; max-height: none; } .nav-links.nav-inline a { padding: 9px 10px; font-size: .9rem; } }
@media (max-width: 480px) { .nav-links.nav-inline a:first-child { display: none; } .brand small { display: none; } }
.nav-links.nav-inline a, .nav-links.nav-inline .btn { white-space: nowrap; }

/* ---------------------------------------------------------------- reduced motion: everything still, depth stays as a static pose */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
    .hero-phone { --px: 0; --py: 0; }
    .tonearm { transition-delay: 0s !important; }
}


/* ---------------------------------------------------------------- payout breakdown (artist page) */
.payflow { display: grid; gap: 18px; }
.payflow-title { font: 600 1.15rem var(--display); letter-spacing: -.01em; }
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.flow-step { position: relative; display: grid; gap: 6px; padding: 18px; border-radius: var(--r-inner); background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); font-size: .92rem; }
.flow-step + .flow-step::before { content: "\2192"; position: absolute; left: -14px; top: 50%; translate: -50% -50%; color: var(--faint); font-weight: 700; }
.flow-amount { font: 700 clamp(1.8rem, 3.4vw, 2.4rem)/1 var(--display); letter-spacing: -.04em; color: var(--cream); }
.flow-artist { background: var(--pink-soft); border-color: rgba(214, 93, 177, .35); }
.flow-artist .flow-amount { color: var(--pink-hi); }
.paybar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--surface-3); }
.paybar-artists, .dot-artists { background: var(--pink); }
.paybar-net, .dot-net { background: rgba(253, 251, 247, .38); }
.paybar-fees, .dot-fees { background: rgba(253, 251, 247, .16); }
.paybar-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .86rem; color: var(--muted); margin: -4px 0 0; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 7px; vertical-align: -1px; }
@media (max-width: 640px) {
    .flow { grid-template-columns: 1fr; }
    .flow-step + .flow-step::before { content: "\2193"; left: 50%; top: -14px; translate: -50% -50%; }
}