/* Serenada website.
   Warm charcoal, sepia photography fading in from the dark, Mundial Bold set
   against Mundial Thin Italic, orange as the highlighter. Real product screens
   live in 3D devices that rise, fan out and tilt as you scroll. */

@font-face { font-family: "Mundial"; src: url("fonts/MundialThin.woff2") format("woff2"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Mundial"; src: url("fonts/MundialThinItalic.woff2") format("woff2"); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: "Mundial"; src: url("fonts/MundialLight.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Mundial"; src: url("fonts/MundialLightItalic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Mundial"; src: url("fonts/MundialRegular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Mundial"; src: url("fonts/MundialItalic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Mundial"; src: url("fonts/MundialDemibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Mundial"; src: url("fonts/MundialBold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Mundial"; src: url("fonts/MundialBoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Mundial"; src: url("fonts/MundialBlack.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  color-scheme: dark;
  --ground: #0d0a08;
  --ground-deep: #080605;
  --raised: #17120f;
  --raised-2: #221b17;
  --ink: #f5f0e8;
  --ink-muted: #d3cbbf;
  --ink-subtle: #a89f92;
  --rule: rgba(245, 240, 232, 0.10);
  --orange: #cb6650;
  --orange-text: #e58d76;
  --orange-soft: rgba(203, 102, 80, 0.16);
  --font: "Mundial", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --col: 1240px;
  --gutter: clamp(16px, 4vw, 48px);
  --nav-h: 72px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io: cubic-bezier(0.645, 0.045, 0.355, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0; background: var(--ground); color: var(--ink-muted);
  font-family: var(--font); font-size: 17px; line-height: 1.65; font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%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");
}
img, video { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { color: var(--ink); margin: 0; font-weight: 700; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--orange-text); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--orange); color: #fff; padding: 8px 14px; border-radius: 999px; z-index: 200; }
.skip:focus { left: 16px; }
.wrap { width: 100%; max-width: calc(var(--col) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.deep { background: var(--ground-deep); }
.center { text-align: center; margin-inline: auto; align-items: center; }

/* Type */
.hl { color: var(--orange); }
.thin { font-weight: 200; font-style: italic; letter-spacing: -0.01em; }
.kicker { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--orange-text); }
.kicker::before { content: ""; width: 28px; height: 2px; background: var(--orange); }
.center .kicker::after { content: ""; width: 28px; height: 2px; background: var(--orange); }
.display { font-size: clamp(50px, 8.6vw, 132px); line-height: .92; letter-spacing: -0.035em; }
.h2 { font-size: clamp(38px, 5.6vw, 80px); line-height: .98; letter-spacing: -0.025em; }
.h3 { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.15; letter-spacing: -0.01em; }
.lead { font-size: clamp(18px, 1.7vw, 22px); line-height: 1.55; color: var(--ink-muted); max-width: 52ch; font-weight: 300; }
.body { max-width: 58ch; }
.small { font-size: 14px; color: var(--ink-subtle); line-height: 1.55; }
.stack { display: flex; flex-direction: column; gap: 22px; }
.stack-sm { display: flex; flex-direction: column; gap: 10px; }
.statement { font-size: clamp(42px, 6.6vw, 104px); line-height: .96; letter-spacing: -0.03em; color: var(--ink); font-weight: 700; max-width: 15ch; text-wrap: balance; }
.statement .thin { color: var(--orange); }
.quote { font-size: clamp(30px, 3.8vw, 54px); line-height: 1.1; font-weight: 200; font-style: italic; color: var(--ink); letter-spacing: -0.01em; text-wrap: balance; max-width: 20ch; }
.quote b { font-weight: 700; font-style: normal; }

/* Word reveal: each word sits in a mask */
.w-mask { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.w-in { display: inline-block; will-change: transform; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px; border-radius: 999px; font: 700 15px/1 var(--font); letter-spacing: .3px; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .2s var(--ease-out), background-color .2s ease, border-color .2s ease; white-space: nowrap; }
.btn:active { scale: .97; }
.btn-primary { background: var(--orange-fill, #b85a46); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); border-color: rgba(245,240,232,.38); }
@media (hover: hover) and (pointer: fine) { .btn-primary:hover { background: #d8745e; } .btn-ghost:hover { border-color: var(--ink); } }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.store { display: inline-flex; line-height: 0; transition: transform .2s var(--ease-out), opacity .2s ease; }
.store:active { scale: .97; }
@media (hover: hover) and (pointer: fine) { .store:hover { opacity: .88; } }
.store img { height: 52px; width: auto; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; }
.chips li { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 16px; border-radius: 999px; background: rgba(245,240,232,.06); box-shadow: inset 0 0 0 1px var(--rule); font-size: 14px; color: var(--ink-muted); }
.chips li::before { content: ""; width: 7px; height: 7px; border-radius: 3px; background: var(--orange); flex: none; }

/* Top strip and nav */
.strip { background: var(--orange); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .3px; position: relative; z-index: 60; }
.strip .wrap { display: flex; justify-content: center; align-items: center; gap: 10px; min-height: 38px; text-align: center; }
.strip a { color: #fff; text-underline-offset: 3px; }
.strip .tag { font-weight: 700; letter-spacing: 2px; text-transform: uppercase; font-size: 11px; }
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: rgba(13,10,8,.72); backdrop-filter: saturate(140%) blur(18px); -webkit-backdrop-filter: saturate(140%) blur(18px); box-shadow: 0 1px 0 var(--rule); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--nav-h); }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); font-weight: 700; letter-spacing: 4px; font-size: 16px; }
.brand img { width: 28px; height: auto; }
.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-links a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; text-decoration: none; font-size: 15px; font-weight: 600; color: var(--ink-muted); position: relative; border-radius: 999px; transition: color .2s ease, background-color .2s ease; }
.nav-links a[aria-current="page"] { color: var(--ink); background: rgba(245,240,232,.08); }
@media (hover: hover) and (pointer: fine) { .nav-links a:hover { color: var(--ink); } }
.nav-cta { display: flex; gap: 8px; align-items: center; }
.nav-cta .btn { min-height: 42px; padding: 0 20px; font-size: 14px; box-shadow: none; }
.menu-btn { display: none; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--rule); background: transparent; color: var(--ink); cursor: pointer; align-items: center; justify-content: center; }
.menu-btn svg { width: 20px; height: 20px; }
@media (max-width: 860px) {
  .menu-btn { display: inline-flex; }
  .nav-links { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 20px; background: var(--ground); box-shadow: 0 1px 0 var(--rule); }
  .nav-links a { min-height: 56px; font-size: 18px; padding: 0 4px; border-radius: 0; background: none !important; box-shadow: 0 1px 0 var(--rule); }
  .nav-links a[aria-current="page"] { color: var(--orange-text); }
  .nav:not(.open) .nav-links { display: none; }
  .nav-cta .btn-ghost { display: none; }
  .strip .hide-sm { display: none; }
}

/* Photography */
.photo { position: relative; margin: 0; overflow: hidden; background: radial-gradient(120% 90% at 70% 30%, #2e2018 0%, #1a120e 50%, var(--ground) 100%); }
.photo img, .photo video { width: 100%; height: 100%; object-fit: cover; filter: sepia(.3) saturate(.82) contrast(1.04) brightness(.95); }
.photo video { filter: sepia(.15) saturate(.95) contrast(1.05); }
.photo .slot { display: none; }
.photo.missing img { display: none; }
.photo.pos-top img { object-position: center 30%; }
.photo.pos-right img { object-position: 70% center; }
.fade-l { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%); mask-image: linear-gradient(90deg, transparent 0%, #000 38%); }
.fade-b { -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
.fade-soft { -webkit-mask-image: radial-gradient(90% 85% at 50% 45%, #000 55%, transparent 100%); mask-image: radial-gradient(90% 85% at 50% 45%, #000 55%, transparent 100%); }

/* Hero */
.hero { position: relative; min-height: min(90vh, 900px); display: flex; align-items: flex-end; padding-block: 120px 72px; isolation: isolate; overflow: hidden; }
.hero .photo { position: absolute; inset: 0 0 0 auto; width: min(72%, 1120px); height: 100%; z-index: -1; }
.hero .photo.wide { width: 100%; }
.hero .photo img { transform-origin: 60% 40%; will-change: transform; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(0deg, var(--ground) 0%, transparent 34%), linear-gradient(90deg, var(--ground) 14%, rgba(13,10,8,.5) 46%, transparent 72%); }
.hero .wrap { display: flex; flex-direction: column; gap: 28px; }
.hero .display { max-width: 11ch; }
@media (max-width: 860px) {
  .hero { min-height: 0; padding-block: 0 48px; flex-direction: column; align-items: stretch; }
  .hero .photo { position: relative; inset: auto; width: 100%; height: 58vh; max-height: 480px; }
  .hero::after { background: linear-gradient(0deg, var(--ground) 28%, transparent 62%); height: 58vh; max-height: 480px; }
  .hero .wrap { margin-top: -120px; }
}

.section { padding-block: clamp(88px, 11vw, 168px); position: relative; }
.section-tight { padding-block: clamp(56px, 7vw, 104px); position: relative; }
.section-head { display: flex; flex-direction: column; gap: 22px; max-width: 860px; margin-bottom: clamp(40px, 5vw, 72px); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 100px); align-items: center; }
.split > * { min-width: 0; }
.split.rev > :first-child { order: 2; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split.rev > :first-child { order: 0; } }

/* ---------- The device: a real product screen in a 3D phone ---------- */
.device {
  --w: 300px;
  position: relative; width: var(--w); aspect-ratio: 374 / 810; border-radius: calc(var(--w) * .17);
  padding: calc(var(--w) * .033); background: linear-gradient(145deg, #2a2724, #0d0c0b 45%, #1b1916);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    inset 0 0 0 calc(var(--w) * .012) #050505,
    0 1px 1px rgba(0,0,0,.3),
    0 30px 60px -20px rgba(0,0,0,.7),
    0 60px 120px -40px rgba(0,0,0,.6);
  transform-style: preserve-3d; will-change: transform;
}
.device::before, .device::after { content: ""; position: absolute; width: 3px; border-radius: 3px; background: linear-gradient(#3b3733, #191715); }
.device::before { left: -3px; top: 22%; height: 9%; box-shadow: 0 calc(var(--w) * .2) 0 #2a2724; }
.device::after { right: -3px; top: 28%; height: 14%; }
.device-screen { position: relative; height: 100%; border-radius: calc(var(--w) * .137); overflow: hidden; background: #131211; transform: translateZ(1px); }
.device-screen::after { content: ""; position: absolute; inset: auto 0 0 0; height: 12%; background: linear-gradient(transparent, #131211); pointer-events: none; z-index: 3; }
.device .glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 32%); mix-blend-mode: screen; z-index: 4; }
.device-screen .scr { position: absolute; left: 0; right: 0; top: 0; opacity: 0; transform: scale(1.03); transition: opacity .6s var(--ease-out), transform .8s var(--ease-out); }
.device-screen .scr.on { opacity: 1; transform: none; }
.device-screen .scr > img { position: relative; width: 100%; height: auto; }

/* Live video inside the real screens */
.ov-hdr { position: absolute; left: 0; right: 0; top: 0; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%); mask-image: linear-gradient(180deg, transparent 0%, #000 12%); }
.ov-hdr video { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; filter: saturate(.9) contrast(1.05); }
.ov-hdr::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,.6) 100%); }
.ov-name { position: absolute; z-index: 2; left: 5.6%; top: 72.6%; font: 700 calc(var(--w) * .07)/1 var(--font); color: #fff; letter-spacing: -.01em; }
.ov-pill { position: absolute; z-index: 2; left: 5.6%; top: 85.4%; height: calc(var(--w) * .088); padding: 0 calc(var(--w) * .042); display: inline-flex; align-items: center; border-radius: 999px; font: 700 calc(var(--w) * .031)/1 var(--font); letter-spacing: .05em; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.7); background: rgba(0,0,0,.15); }
.ov-pill.solid { background: #de4e2b; box-shadow: none; }
.ov-back { position: absolute; z-index: 2; left: 6.6%; top: 19.5%; width: calc(var(--w) * .026); height: calc(var(--w) * .026); border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); }
.ov-media { position: absolute; overflow: hidden; border-radius: calc(var(--w) * .028); background: #222; }
.ov-media.top { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.ov-media video { width: 100%; height: 100%; object-fit: cover; }

/* Discover: swipe through real artist videos, as in the product */
.swipe-device { --w: 330px; margin-inline: auto; }
.swipe-device .device-screen { background: #121110; }
.sw-top { position: absolute; z-index: 5; left: 0; right: 0; top: 0; padding: calc(var(--w) * .17) 6.5% 0; display: flex; justify-content: space-between; align-items: center; color: #fff; pointer-events: none; }
.sw-top b { font-size: calc(var(--w) * .068); letter-spacing: -.01em; }
.sw-filter { width: calc(var(--w) * .07); height: calc(var(--w) * .07); color: #fff; display: grid; }
.sw-card { position: absolute; left: 3.5%; right: 3.5%; top: 18%; bottom: 15.5%; border-radius: calc(var(--w) * .05); overflow: hidden; background: #1a1816; will-change: transform; transform-origin: 50% 110%; }
.sw-card video { width: 100%; height: 100%; object-fit: cover; }
.sw-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 70%, rgba(0,0,0,.35) 100%); pointer-events: none; }
.sw-head { position: absolute; z-index: 2; left: 5%; right: 4%; top: 3.5%; display: flex; align-items: center; gap: calc(var(--w) * .025); color: #fff; }
.sw-av { width: calc(var(--w) * .085); height: calc(var(--w) * .085); border-radius: 50%; object-fit: cover; outline: 1px solid rgba(255,255,255,.2); }
.sw-who { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; flex: 1; }
.sw-who small { font-size: calc(var(--w) * .03); opacity: .7; }
.sw-who b { font-size: calc(var(--w) * .042); font-weight: 600; display: flex; align-items: center; gap: 5px; }
.sw-who b i { width: 6px; height: 6px; border-radius: 50%; background: #de4e2b; }
.sw-more { width: calc(var(--w) * .05); height: calc(var(--w) * .05); opacity: .9; }
.sw-acts { position: absolute; z-index: 2; left: 0; right: 0; bottom: 5%; display: flex; justify-content: center; align-items: center; gap: calc(var(--w) * .085); }
.sw-btn { width: calc(var(--w) * .135); height: calc(var(--w) * .135); border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(60,58,55,.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background-color .25s ease, transform .25s var(--ease-out); }
.sw-btn svg { width: 44%; height: 44%; }
.sw-btn.boost { width: calc(var(--w) * .195); height: calc(var(--w) * .195); background: rgba(80,78,74,.6); }
.sw-btn.boost svg { width: 42%; height: 42%; }
.sw-card.liked .sw-btn.up { background: #de4e2b; transform: scale(1.12); }
.sw-progress { position: absolute; z-index: 4; left: 3.5%; right: 3.5%; top: 84.8%; height: 3px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.sw-progress i { display: block; height: 100%; width: 30%; background: #de4e2b; border-radius: 3px; }
.sw-tabs { position: absolute; z-index: 4; left: 13%; right: 13%; bottom: 3.5%; height: calc(var(--w) * .16); border-radius: 999px; background: #1c1b19; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; padding: 0 calc(var(--w) * .015); }
.sw-tabs span { height: calc(var(--w) * .13); border-radius: 999px; display: grid; place-items: center; color: rgba(255,255,255,.55); }
.sw-tabs span svg { width: calc(var(--w) * .075); height: calc(var(--w) * .075); }
.sw-tabs span img { width: calc(var(--w) * .07); opacity: .7; }
.sw-tabs span.on { background: #de4e2b; color: #fff; }
.discover-stage { position: relative; display: grid; place-items: center; perspective: 1600px; min-height: 760px; }
.discover-stage .swipe-device { position: relative; z-index: 1; }
@media (max-width: 900px) { .discover-stage { min-height: 0; padding-block: 20px; } .swipe-device { --w: min(300px, 74vw); } }

/* Ambient light taken from the video playing on screen */
.ambient { position: absolute; left: 50%; top: 50%; width: 70%; height: 80%; transform: translate(-50%, -50%); filter: blur(60px) saturate(1.4); opacity: .55; pointer-events: none; z-index: 0; border-radius: 50%; }

/* Fan of devices, animated in 3D on scroll */
.stage { position: relative; perspective: 1800px; display: grid; place-items: center; height: calc(650px * var(--fs, 1) + 140px); }
.stage .scale { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(var(--fs, 1)); transform-origin: center center; perspective: 1800px; z-index: 1; }
.fan { position: relative; width: 300px; height: 650px; transform-style: preserve-3d; }
.fan .device { position: absolute; inset: 0; }
html:not(.motion) .fan .d-l { transform: translateX(-74%) rotateY(22deg) rotateZ(-5deg) scale(.86); }
html:not(.motion) .fan .d-r { transform: translateX(74%) rotateY(-22deg) rotateZ(5deg) scale(.86); }
html:not(.motion) .fan.row .d-l { transform: translateX(-112%) rotateY(14deg) scale(.92); }
html:not(.motion) .fan.row .d-r { transform: translateX(112%) rotateY(-14deg) scale(.92); }
.fan .d-c { z-index: 2; }
.fan-labels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: 1000px; margin: 28px auto 0; text-align: center; }
.fan-labels div { display: flex; flex-direction: column; gap: 6px; }
.fan-labels b { color: var(--ink); font-size: clamp(24px, 2.6vw, 36px); line-height: 1; letter-spacing: -.02em; }
.fan-labels b .thin { color: var(--orange); }
.fan-labels > div > span { font-size: 15px; max-width: 30ch; margin-inline: auto; }
@media (max-width: 1100px) { .stage { --fs: .78; } }
@media (max-width: 760px) { .stage { --fs: .6; } }
@media (max-width: 760px) { .stage.row { --fs: .38; } .fan-labels { grid-template-columns: 1fr; gap: 22px; } }
@media (max-width: 420px) { .stage { --fs: .5; } .stage.row { --fs: .32; } }

/* Orange sound field behind device scenes */
.wave { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.stage > .fan { position: relative; z-index: 1; }
.glow { position: absolute; left: 50%; top: 50%; width: min(900px, 90vw); aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(203,102,80,.28) 0%, rgba(203,102,80,0) 62%); pointer-events: none; z-index: 0; }

/* Feature row under a scene */
.feature-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); margin-top: clamp(48px, 6vw, 88px); }
.feature-row > div { display: flex; flex-direction: column; gap: 8px; padding-top: 22px; box-shadow: 0 -1px 0 var(--rule); }
.feature-row b { color: var(--ink); font-size: 20px; line-height: 1.25; }
.feature-row p { font-size: 15.5px; line-height: 1.6; }
.feature-row .ico { width: 40px; height: 40px; border-radius: 13px; background: var(--orange-soft); color: var(--orange-text); display: grid; place-items: center; margin-bottom: 8px; }
.feature-row .ico svg { width: 20px; height: 20px; }
@media (max-width: 860px) { .feature-row { grid-template-columns: 1fr; } }

/* Marquee */
.marquee { overflow: hidden; padding-block: clamp(28px, 4vw, 48px); box-shadow: 0 -1px 0 var(--rule), 0 1px 0 var(--rule); background: var(--ground-deep); }
.marquee-track { display: flex; width: max-content; will-change: transform; }
.marquee-group { display: flex; align-items: center; gap: clamp(28px, 4vw, 56px); padding-right: clamp(28px, 4vw, 56px); }
.marquee-group span { font-size: clamp(48px, 8vw, 120px); line-height: 1; font-weight: 700; letter-spacing: -.035em; color: var(--ink); white-space: nowrap; }
.marquee-group span.o { color: transparent; -webkit-text-stroke: 1.5px rgba(245,240,232,.55); font-weight: 900; }
.marquee-group span.t { font-weight: 200; font-style: italic; color: var(--orange); }
.marquee-group img { width: clamp(36px, 5vw, 64px); height: auto; opacity: .9; }

/* Story: sticky device, text panels scroll past */
.story { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 100px); }
.story > * { min-width: 0; }
.story-text { display: flex; flex-direction: column; }
.story-panel { min-height: 88vh; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding-block: 40px; }
.story-panel:first-child { min-height: 70vh; }
.story-panel .h2 { font-size: clamp(36px, 4.6vw, 66px); }
.story-pin { position: sticky; top: calc(var(--nav-h) + 6vh); height: calc(100vh - var(--nav-h) - 12vh); min-height: 560px; display: grid; place-items: center; perspective: 1600px; }
.story-pin .device { --w: min(320px, 24vw, calc((100vh - var(--nav-h) - 16vh) * .46)); }
.story-dots { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; }
.story-dots i { width: 6px; height: 22px; border-radius: 6px; background: rgba(245,240,232,.2); transition: background-color .4s ease, height .4s var(--ease-out); }
.story-dots i.on { background: var(--orange); height: 40px; }
.story-inline { display: none; }
@media (max-width: 900px) {
  .story { grid-template-columns: 1fr; }
  .story-pin { display: none; }
  .story-panel, .story-panel:first-child { min-height: 0; padding-block: 36px; }
  .story-inline { display: block; margin: 12px auto 0; --w: min(280px, 70vw); }
}
/* Reaction burst over the chat screen */
.burst { position: absolute; left: 77%; top: 72%; width: 0; height: 0; z-index: 4; pointer-events: none; }
.burst span { position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; display: grid; place-items: center; font-size: 18px; opacity: 0; }
.device.verdict .burst span { animation: pop 2.4s var(--ease-out) infinite; }
.device.verdict .burst span:nth-child(2) { animation-delay: .25s; }
.device.verdict .burst span:nth-child(3) { animation-delay: .5s; }
.device.verdict .burst span:nth-child(4) { animation-delay: .75s; }
.device.verdict .burst span:nth-child(5) { animation-delay: 1s; }
@keyframes pop {
  0% { opacity: 0; transform: translate(0,0) scale(.6); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx, -30px), -150px) scale(1.25) rotate(var(--r, -12deg)); }
}
.burst span:nth-child(1) { --dx: -36px; --r: -14deg; }
.burst span:nth-child(2) { --dx: 10px; --r: 10deg; }
.burst span:nth-child(3) { --dx: -64px; --r: -20deg; }
.burst span:nth-child(4) { --dx: 26px; --r: 16deg; }
.burst span:nth-child(5) { --dx: -16px; --r: -6deg; }

/* Tilt cards */
.tilt-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 16px; perspective: 1400px; }
.tilt { position: relative; border-radius: 28px; overflow: hidden; min-height: 520px; display: flex; flex-direction: column; justify-content: flex-end; padding: 30px; isolation: isolate; transform-style: preserve-3d; will-change: transform; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.06); transition: box-shadow .3s ease; }
.tilt .photo { position: absolute; inset: -6%; z-index: -2; }
.tilt::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(13,10,8,0) 30%, rgba(13,10,8,.92) 88%); }
.tilt .k { font-size: 12px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--orange-text); }
.tilt h3 { font-size: clamp(28px, 2.8vw, 40px); line-height: 1.02; letter-spacing: -.02em; margin: 10px 0 10px; }
.tilt p { font-size: 15.5px; max-width: 34ch; }
.tilt .shine { position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0; background: radial-gradient(500px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.14), transparent 40%); transition: opacity .3s ease; }
@media (hover: hover) and (pointer: fine) { .tilt:hover .shine { opacity: 1; } }
@media (max-width: 960px) { .tilt-grid { grid-template-columns: 1fr; } .tilt { min-height: 420px; } }

/* Big photo band with parallax */
.band { position: relative; min-height: min(92vh, 860px); display: flex; align-items: flex-end; padding-block: 120px 80px; overflow: hidden; isolation: isolate; }
.band .photo { position: absolute; inset: -12% 0; z-index: -1; }
.band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, var(--ground) 4%, rgba(13,10,8,0) 45%), linear-gradient(90deg, rgba(13,10,8,.88) 0%, rgba(13,10,8,.55) 42%, rgba(13,10,8,0) 70%), linear-gradient(180deg, var(--ground) 0%, rgba(13,10,8,0) 22%); }
.band .wrap { display: flex; flex-direction: column; gap: 24px; }

/* Three words */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); align-items: start; }
.trio > div { display: flex; flex-direction: column; gap: 16px; padding-top: 28px; box-shadow: 0 -2px 0 var(--ink); min-width: 0; }
.trio .w { font-size: clamp(34px, 3.6vw, 56px); line-height: 1; color: var(--ink); font-weight: 700; letter-spacing: -0.03em; white-space: nowrap; }
.trio .w .thin { color: var(--orange); }
.trio p:not(.w) { font-size: 16px; line-height: 1.6; max-width: 34ch; }
@media (max-width: 860px) { .trio { grid-template-columns: 1fr; } .trio .w { font-size: clamp(40px, 11vw, 56px); } }

/* Device duo with floating reactions */
.duo { position: relative; height: 720px; perspective: 1600px; }
.duo .device { position: absolute; }
.duo .back { --w: 270px; left: 4%; top: 30px; }
html:not(.motion) .duo .back { transform: rotateY(18deg) rotateZ(-4deg); }
.duo .front { --w: 300px; right: 6%; top: 60px; z-index: 2; }
html:not(.motion) .duo .front { transform: rotateY(-14deg) rotateZ(3deg); }
.float-chip { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 12px; border-radius: 999px; background: rgba(23,18,15,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 16px 40px -12px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.1); color: var(--ink); font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; will-change: transform; }
.float-chip.hot { background: var(--orange); }
.float-chip .e { font-size: 18px; }
@media (max-width: 1100px) { .duo { transform: scale(.85); transform-origin: top center; height: 620px; } }
@media (max-width: 560px) { .duo { transform: scale(.62); height: 460px; margin-inline: -20%; } }

/* Referral calculator */
.numbers { position: relative; overflow: hidden; background: var(--raised); border-radius: 32px; padding: clamp(28px, 4vw, 56px); display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 40px 80px -40px rgba(0,0,0,.6); }
.numbers::before { content: ""; position: absolute; left: -10%; top: -40%; width: 70%; aspect-ratio: 1; background: radial-gradient(circle, rgba(203,102,80,.25), transparent 65%); pointer-events: none; }
.numbers > * { min-width: 0; position: relative; }
.numbers .big { font-size: clamp(68px, 10vw, 148px); line-height: .88; font-weight: 200; color: var(--ink); letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.numbers .big .cur { color: var(--orange); }
.numbers .per { font-size: 15px; color: var(--ink-muted); margin-top: 14px; }
.numbers .yr { display: flex; gap: 32px; margin-top: 24px; padding-top: 18px; box-shadow: 0 -1px 0 var(--rule); flex-wrap: wrap; }
.numbers .yr div { display: flex; flex-direction: column; gap: 2px; }
.numbers .yr b { color: var(--ink); font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.numbers .yr span { font-size: 13px; color: var(--ink-subtle); }
.numbers label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--orange-text); }
.numbers .fans { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 18px; flex-wrap: wrap; }
.numbers .fans output { font-size: 48px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; }
.numbers input[type=range] { width: 100%; accent-color: var(--orange); height: 28px; cursor: pointer; }
.numbers .scale-l { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-subtle); margin-top: 4px; font-variant-numeric: tabular-nums; }
.numbers .note { font-size: 12.5px; color: var(--ink-subtle); line-height: 1.5; margin-top: 18px; }
.cur-switch { display: inline-flex; gap: 4px; margin-left: auto; }
.cur-switch button { min-width: 40px; min-height: 40px; padding: 0 12px; border-radius: 999px; border: 0; box-shadow: inset 0 0 0 1px var(--rule); background: transparent; color: var(--ink-muted); font: 600 14px var(--font); cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.cur-switch button[aria-pressed="true"] { background: var(--ink); color: var(--ground); }
@media (max-width: 860px) { .numbers { grid-template-columns: 1fr; } }

.cols2 { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); margin-bottom: clamp(36px, 5vw, 56px); }
.cols2 > div { display: flex; flex-direction: column; gap: 10px; padding-top: 22px; box-shadow: 0 -1px 0 var(--rule); }
.cols2 .k { font-size: 12px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--orange-text); }
.cols2 h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.15; }
.cols2 p { font-size: 15.5px; }
@media (max-width: 860px) { .cols2 { grid-template-columns: 1fr; } }

/* S.I.D. linking diagram */
.sid { position: relative; max-width: 520px; margin-inline: auto; width: 100%; }
.sid-track { position: relative; z-index: 2; display: flex; align-items: center; gap: 16px; padding: 14px 18px 14px 14px; border-radius: 24px; background: var(--raised-2); box-shadow: 0 30px 60px -30px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.08); max-width: 380px; margin-inline: auto; }
.sid-track img { width: 72px; height: 72px; border-radius: 14px; object-fit: cover; outline: 1px solid rgba(255,255,255,.1); outline-offset: -1px; }
.sid-track b { color: var(--ink); font-size: 18px; display: block; }
.sid-track small { color: var(--ink-subtle); font-size: 13px; }
.sid-code { margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #fff; background: var(--orange); padding: 6px 10px; border-radius: 999px; white-space: nowrap; }
.sid svg { display: block; width: 100%; height: 130px; overflow: visible; }
.sid path { fill: none; stroke: var(--orange); stroke-width: 2; stroke-linecap: round; }
.sid-ends { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sid-card { display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: 22px; background: var(--raised); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); text-align: center; }
.sid-card .k { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--orange-text); }
.sid-card b { color: var(--ink); font-size: 17px; }
.sid-card span { font-size: 13px; color: var(--ink-subtle); }
@media (max-width: 480px) { .sid-code { display: none; } }

/* Journey path, drawn as you scroll */
.path { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; padding-top: 34px; }
.path-line { position: absolute; left: 22px; right: 22px; top: 54px; height: 2px; background: var(--rule); }
.path-fill { position: absolute; inset: 0; background: var(--orange); transform-origin: left center; transform: scaleX(var(--p, 1)); }
.path-node { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.path-node .ico { width: 44px; height: 44px; border-radius: 15px; display: grid; place-items: center; background: var(--raised-2); color: var(--ink); box-shadow: 0 0 0 6px var(--ground); margin-bottom: 14px; position: relative; z-index: 1; transition: background-color .4s ease, color .4s ease; }
.path-node.on .ico { background: var(--orange); color: #fff; }
.path-node .ico svg { width: 20px; height: 20px; }
.path-node b { color: var(--ink); font-size: 18px; line-height: 1.25; }
.path-node span { font-size: 15px; line-height: 1.55; }
@media (max-width: 900px) {
  .path { grid-template-columns: 1fr; gap: 28px; padding-top: 0; padding-left: 0; }
  .path-line { left: 21px; right: auto; top: 10px; bottom: 10px; width: 2px; height: auto; }
  .path-fill { transform-origin: center top; transform: scaleY(var(--p, 1)); }
  .path-node { display: grid; grid-template-columns: 44px 1fr; column-gap: 18px; }
  .path-node .ico { grid-row: span 2; margin: 0; }
}

/* CTA panel */
.cta-panel { position: relative; overflow: hidden; border-radius: 36px; background: var(--orange); color: #fff; padding: clamp(44px, 7vw, 104px); display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: end; isolation: isolate; box-shadow: 0 40px 80px -40px rgba(0,0,0,.8); }
.cta-panel h2 { color: #fff; font-size: clamp(40px, 5.6vw, 84px); line-height: .96; letter-spacing: -.03em; }
.cta-panel p { color: rgba(255,255,255,.94); font-size: 18px; max-width: 44ch; }
.cta-panel .btn-row { justify-content: flex-end; }
.cta-panel .btn-dark { background: var(--ground); color: #fff; }
.cta-panel .btn-line { color: #fff; border-color: rgba(255,255,255,.6); }
@media (hover: hover) and (pointer: fine) { .cta-panel .btn-dark:hover { background: #1c1612; } .cta-panel .btn-line:hover { border-color: #fff; } }
.cta-panel .mark { position: absolute; right: -60px; bottom: -90px; width: 380px; opacity: .16; pointer-events: none; z-index: -1; will-change: transform; }
@media (max-width: 860px) { .cta-panel { grid-template-columns: 1fr; } .cta-panel .btn-row { justify-content: flex-start; } }

/* Sign-up */
.seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--ground); box-shadow: inset 0 0 0 1px var(--rule); gap: 4px; flex-wrap: wrap; }
.seg button { min-height: 40px; padding: 0 18px; border-radius: 999px; border: 0; background: transparent; color: var(--ink-muted); font: 600 14px var(--font); cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.seg button[aria-pressed="true"] { background: var(--orange); color: #fff; }
.panel { background: var(--raised); border-radius: 32px; padding: clamp(24px, 4vw, 44px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 40px 80px -40px rgba(0,0,0,.6); }
.mini { background: var(--raised-2); border-radius: 18px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.form { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 13px; font-weight: 600; color: var(--ink); }
.field input { height: 54px; border-radius: 16px; border: 1px solid #3d342d; background: var(--ground); color: var(--ink); padding: 0 16px; font: 400 16px var(--font); transition: border-color .2s ease; width: 100%; }
.field input::placeholder { color: #8a8378; }
.field input:focus { outline: none; border-color: var(--orange); }
.field .hint { font-size: 12.5px; color: var(--ink-subtle); }
.field .err { font-size: 12.5px; color: #f2a08c; }
.field.bad input { border-color: #e07a62; }
.check { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 14px; line-height: 1.5; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--orange); }
.check a { color: var(--ink); }
.form .btn { width: 100%; min-height: 56px; font-size: 16px; }
.err-text { color: #f2a08c; font-size: 13px; }
.progress { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.progress li { display: flex; flex-direction: column; gap: 8px; font-size: 12px; font-weight: 600; color: var(--ink-subtle); }
.progress li::before { content: ""; height: 4px; border-radius: 999px; background: var(--rule); transition: background-color .4s ease; }
.progress li.on { color: var(--ink); }
.progress li.on::before { background: var(--orange); }
.signup-side { position: sticky; top: calc(var(--nav-h) + 32px); display: flex; flex-direction: column; gap: 26px; }
.signup-side .device { --w: 230px; margin: 10px 0 0 6px; }
html:not(.motion) .signup-side .device { transform: rotateY(16deg) rotateZ(-3deg); }
.signup-side .stagewrap { perspective: 1400px; display: flex; gap: 28px; align-items: center; }
@media (max-width: 900px) { .signup-side { position: static; } .signup-side .stagewrap { display: none; } }

/* Footer */
.foot { padding-block: 80px 40px; margin-top: 64px; background: var(--ground-deep); box-shadow: 0 -1px 0 var(--rule); }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.foot-grid > * { min-width: 0; }
.foot h4 { font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--orange-text); margin-bottom: 16px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.foot a { text-decoration: none; color: var(--ink-muted); font-size: 15px; }
@media (hover: hover) and (pointer: fine) { .foot a:hover { color: var(--ink); } }
.foot-logo { width: 96px; height: auto; }
.foot .tagline { color: var(--ink); font-weight: 700; font-size: 24px; line-height: 1.15; max-width: 14ch; margin: 22px 0 10px; }
.foot .tagline .thin { color: var(--orange); }
.foot .stores { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.foot .stores img { height: 40px; }
.foot .legal { margin-top: 56px; padding-top: 24px; box-shadow: 0 -1px 0 var(--rule); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: 13px; color: var(--ink-subtle); }
.foot .tm { margin-top: 10px; font-size: 11.5px; color: #8f877b; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-grid > :first-child { grid-column: 1 / -1; } }

[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .device.verdict .burst span { animation: none; }
  .device-screen img, .btn, .store, .tilt { transition: none; }
}

/* A fan inside a half-width column */
.stage.inset { --fs: .72; }
@media (max-width: 1100px) { .stage.inset { --fs: .6; } }
@media (max-width: 900px) { .stage.inset { --fs: .66; } }
@media (max-width: 560px) { .stage.inset { --fs: .44; } }

/* Marquee without the motion script */
@keyframes mq { to { transform: translateX(-50%); } }
html:not(.motion) .marquee-track { animation: mq 30s linear infinite; }
@media (prefers-reduced-motion: reduce) { html:not(.motion) .marquee-track { animation: none; } }
html:not(.motion) .path-node .ico { background: var(--orange); color: #fff; }
@media (max-width: 760px) { .stage { height: calc(650px * var(--fs) + 180px); } .fan-labels { margin-top: 8px; } }
.path-line { right: calc(20% - 2px); }
@media (max-width: 900px) { .path-line { right: auto; } }

/* ---------- Opener: through the crowd to the chrome S ---------- */
.intro { display: none; }
html.intro-on .intro { display: block; position: fixed; inset: 0; z-index: 400; background: var(--ground-deep); overflow: hidden; }
html.intro-on, html.intro-on body { overflow: hidden; }
.crowd { position: absolute; inset: 0; perspective: 900px; perspective-origin: 50% 50%; z-index: 2; }
.crowd .tile { position: absolute; left: 50%; top: 50%; border-radius: 28px; overflow: hidden; background: #1a120e; box-shadow: 0 40px 80px -30px rgba(0,0,0,.8); will-change: transform, opacity; }
.crowd .tile img, .crowd .tile video { width: 100%; height: 100%; object-fit: cover; filter: sepia(.3) saturate(.85) brightness(.9); }
.intro-gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.intro-flash { position: absolute; left: 50%; top: 50%; width: 30vmax; height: 30vmax; margin: -15vmax 0 0 -15vmax; border-radius: 50%; background: radial-gradient(circle, rgba(255,240,230,1) 0%, rgba(229,141,118,.9) 30%, rgba(203,102,80,0) 70%); opacity: 0; z-index: 3; pointer-events: none; }
.intro-fallback { position: absolute; left: 50%; top: 50%; width: 22vmin; margin: -11vmin 0 0 -11vmin; z-index: 1; opacity: 0; filter: drop-shadow(0 20px 40px rgba(0,0,0,.6)); }
.intro-word { position: absolute; left: 16px; right: 16px; bottom: 15vh; text-align: center; z-index: 3; color: var(--ink); font-size: 13px; font-weight: 700; letter-spacing: .5em; text-transform: uppercase; opacity: 0; }
.intro-skip { position: absolute; right: 24px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 5; min-height: 44px; padding: 0 20px; border-radius: 999px; border: 0; background: rgba(245,240,232,.1); box-shadow: inset 0 0 0 1px rgba(245,240,232,.3); color: var(--ink); font: 600 14px var(--font); cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* ---------- Page transition curtain ---------- */
.curtain { position: fixed; inset: 0; z-index: 350; background: var(--orange); display: grid; place-items: center; transform: translateY(100%); pointer-events: none; }
.curtain img { width: 72px; opacity: .95; }
html.arriving .curtain { transform: translateY(0); }
.curtain.go { transition: transform .55s cubic-bezier(.77,0,.175,1); }

/* ---------- Cursor ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 500; opacity: 0; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(245,240,232,.7); pointer-events: none; transition: width .3s var(--ease-out), height .3s var(--ease-out), margin .3s var(--ease-out), background-color .3s ease, box-shadow .3s ease; display: grid; place-items: center; font: 700 11px var(--font); letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.cursor.big { width: 84px; height: 84px; margin: -42px 0 0 -42px; background: rgba(203,102,80,.92); box-shadow: none; }
.cursor.link { width: 56px; height: 56px; margin: -28px 0 0 -28px; background: rgba(245,240,232,.12); }
.cursor span { opacity: 0; transition: opacity .2s ease; }
.cursor.big span { opacity: 1; }
@media not all and (hover: hover) and (pointer: fine) { .cursor { display: none; } }
@media (prefers-reduced-motion: reduce) { .curtain { display: none; } .cursor { display: none; } }

@media (max-width: 600px) { .intro-word { letter-spacing: .28em; font-size: 11px; } }

/* Boost, as in the product */
.sw-boost { width: calc(var(--w) * .13); height: calc(var(--w) * .13); border-radius: 50%; display: grid; place-items: center; font-size: calc(var(--w) * .062); background: rgba(20,18,16,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }

/* Opener: a real crowd behind the tiles */
.intro-crowd { position: absolute; inset: -6%; z-index: 0; opacity: 0; }
.intro-crowd video { width: 100%; height: 100%; object-fit: cover; filter: sepia(.25) saturate(.8) brightness(.55); }
.intro-crowd::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 70% at 50% 50%, rgba(13,10,8,.2), rgba(13,10,8,.9)); }

.ov-hdr.tall video { object-position: center 18%; }
.ov-media video { object-position: center 30%; }

.ov-label { position: absolute; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding-left: 2%; }
.ov-label b { color: #fff; font: 700 calc(var(--w) * .043)/1.15 var(--font); }
.ov-label span { color: rgba(255,255,255,.6); font: 400 calc(var(--w) * .036)/1.2 var(--font); }
.cursor { display: none !important; }

/* Discover phone built on the real Figma screen: only the card area is live */
.sw-base { position: absolute; inset: 0; width: 100%; height: auto; }
.swipe-device .sw-card { left: 3.1%; right: 3.1%; top: 14.7%; bottom: 11.4%; border-radius: calc(var(--w) * .055); }
.swipe-device .sw-progress { top: 88.55%; left: 3.1%; right: 3.1%; height: 3px; background: #131211; }
.swipe-device .sw-head { top: 3.2%; left: 4.6%; }
.swipe-device .sw-acts { bottom: 4.6%; gap: calc(var(--w) * .075); }
.swipe-device .sw-btn { width: calc(var(--w) * .13); height: calc(var(--w) * .13); background: rgba(70,68,64,.62); }
.swipe-device .sw-btn.boost { width: calc(var(--w) * .19); height: calc(var(--w) * .19); background: rgba(90,88,84,.55); }
.swipe-device .device-screen::after { display: none; }

/* Banner: one bold style, My in white, the word in brand orange */
.marquee-group span b { font-weight: 700; color: var(--orange); }

/* Boost: the player and the Serenada Top Ten */
.boost-stage { position: relative; display: flex; align-items: center; justify-content: center; gap: clamp(20px, 3vw, 40px); perspective: 1600px; min-height: 720px; }
.player-device { --w: 300px; flex: none; z-index: 2; }
.pl-flame { position: absolute; z-index: 5; left: 50%; top: 88.15%; width: 19.5%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(.9); border-radius: 50%; display: grid; place-items: center; color: #fff; background: #de4e2b; opacity: 0; box-shadow: 0 0 0 0 rgba(222,78,43,.6); }
.pl-flame svg { width: 42%; height: 42%; }
.player-device.boosted .pl-flame { animation: plb 1.1s var(--ease-out) both; }
@keyframes plb { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.8); } 20% { opacity: 1; transform: translate(-50%,-50%) scale(1.12); box-shadow: 0 0 0 0 rgba(222,78,43,.6); } 60% { box-shadow: 0 0 0 22px rgba(222,78,43,0); } 100% { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
.pl-rise { position: absolute; z-index: 6; left: 50%; top: 86%; width: 0; height: 0; }
.pl-rise i { position: absolute; left: -12px; top: -12px; font-style: normal; font-size: 22px; animation: flame-up 1.4s var(--ease-out) forwards; }
@keyframes flame-up { 0% { opacity: 0; transform: translate(0,0) scale(.6); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), -190px) scale(1.3); } }
.topten { width: min(340px, 100%); background: #15110e; border-radius: 28px; padding: 22px 18px 16px; box-shadow: 0 40px 80px -40px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.07); z-index: 1; }
.tt-head { display: flex; flex-direction: column; gap: 2px; padding: 0 6px 12px; }
.tt-head b { color: #fff; font-size: 22px; letter-spacing: -.01em; }
.tt-head span { font-size: 12px; color: var(--ink-subtle); }
.tt-list { list-style: none; margin: 0; padding: 0; position: relative; counter-reset: tt; }
.tt-row { display: grid; grid-template-columns: 22px 38px 1fr auto; align-items: center; gap: 10px; padding: 7px 6px; border-radius: 14px; will-change: transform; }
.tt-n { color: var(--ink-subtle); font-weight: 700; font-size: 14px; text-align: center; font-variant-numeric: tabular-nums; }
.tt-row img { width: 38px; height: 38px; border-radius: 9px; object-fit: cover; }
.tt-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.tt-t b { color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-t small { color: var(--ink-subtle); font-size: 11.5px; }
.tt-b { font-size: 12px; color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tt-b i { font-style: normal; }
.tt-row.me { background: rgba(222,78,43,.14); box-shadow: inset 0 0 0 1px rgba(222,78,43,.5); }
.tt-row.me .tt-n { color: #de4e2b; }
.tt-row.me .tt-b { color: #fff; font-weight: 700; }
.tt-row.up .tt-n::after { content: "▲"; font-size: 8px; color: #de4e2b; margin-left: 2px; vertical-align: 2px; }
.tt-foot { margin: 10px 6px 0; font-size: 12px; color: var(--ink-subtle); }
@media (max-width: 1100px) { .boost-stage { flex-direction: column; min-height: 0; } .player-device { --w: min(280px, 70vw); } }
@media (prefers-reduced-motion: reduce) { .player-device.boosted .pl-flame { animation: none; opacity: 1; } .pl-rise i { display: none; } }
.boost-split { grid-template-columns: 4.6fr 7.4fr; }
.boost-split .player-device { --w: 270px; }
.topten { width: 390px; flex: none; }
.tt-t small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1200px) { .boost-split { grid-template-columns: 1fr; } }
@media (max-width: 500px) { .topten { width: 100%; } }
@media (max-width: 1100px) { .boost-stage { gap: 64px; padding-top: 10px; } }
.how-works { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px; border-radius: 22px; background: var(--raised); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); max-width: 52ch; }
.how-works b { color: var(--ink); font-size: 16px; }
.how-works p { font-size: 15px; line-height: 1.6; }
.cta-panel .cta-note { font-size: 15px; font-weight: 600; color: #fff; opacity: .95; }
.numbers .scale-l .unl { color: var(--orange-text); font-weight: 700; letter-spacing: .3px; }
.numbers .scale-l .unl i { font-style: normal; }
.numbers .keep { margin-top: 10px; font-size: 13px; color: var(--orange-text); font-weight: 600; opacity: .55; transition: opacity .3s ease; }
.numbers .keep.on { opacity: 1; }
.numbers .big, .numbers .yr b, .numbers .fans output { font-variant-numeric: tabular-nums; }
.numbers .big { font-size: clamp(56px, 8.5vw, 136px); overflow-wrap: anywhere; }

/* ---------- Darker palette, after the "Just got social" reel ----------
   Warm near-black ground, a soft orange glow behind each phone, and a
   brighter rim so the devices hold their shape against the dark. */
body::before { opacity: .045; mix-blend-mode: soft-light; }
.glow { background: radial-gradient(circle, rgba(203,102,80,.24) 0%, rgba(203,102,80,.08) 34%, rgba(203,102,80,0) 64%); }
.story-pin::before, .boost-stage::before, .discover-stage::before, .duo::before, .signup-side .stagewrap::before, .sid::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: min(760px, 110%); aspect-ratio: 1; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(203,102,80,.2) 0%, rgba(203,102,80,.06) 36%, rgba(203,102,80,0) 64%);
  pointer-events: none; z-index: 0;
}
.boost-stage > *, .discover-stage > *, .sid > *, .signup-side .stagewrap > * { position: relative; z-index: 1; }
.signup-side .stagewrap { position: relative; }
.device {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.16),
    inset 0 0 0 calc(var(--w) * .012) #050505,
    0 0 0 1px rgba(0,0,0,.6),
    0 30px 60px -20px rgba(0,0,0,.85),
    0 60px 120px -40px rgba(203,102,80,.18);
}
.device { background: linear-gradient(145deg, #34302c, #0d0c0b 45%, #221f1c); }
.numbers, .panel, .how-works, .topten, .sid-card, .mini {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 0 1px rgba(255,255,255,.06), 0 40px 80px -40px rgba(0,0,0,.9);
}
.tilt { box-shadow: 0 30px 60px -30px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.07); }
.tt-row img, .sid-track img { outline: 1px solid rgba(255,255,255,.08); outline-offset: -1px; }
.marquee { background: var(--ground-deep); }
.foot { background: var(--ground-deep); }

/* Scroll progress: a thin orange line under the nav */
.nav-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--orange); transform-origin: left center; transform: scaleX(0); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .nav-progress { display: none; } }
.btn { transition: scale .2s var(--ease-out), background-color .2s ease, border-color .2s ease; }
.tt-row { position: relative; }
.tt-row.me { z-index: 2; background: #32211a; box-shadow: inset 0 0 0 1px rgba(222,78,43,.55), 0 12px 30px -12px rgba(0,0,0,.9); }

/* ---------- The brand squarcle ----------
   Traced from the Serenada logo tile: three tight corners and one wide sweep at the
   bottom left. Used as soft background tiles behind the phones, as outlines here and
   there, and as the corner shape of panels, cards and icon tiles. */
:root {
  --sq-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M 4.54 0.02 C 2.57 0.29 0.86 1.73 0.20 3.66 L 0 4.25 0 42.65 C 0 84.03 0 81.42 0.38 83.42 C 2.05 91.74 8.87 98.31 17.25 99.68 C 19.11 99.98 18.89 99.98 57.91 99.96 C 93.62 99.94 95.56 99.93 95.98 99.80 C 98.14 99.17 99.65 97.42 99.89 95.24 C 100 94.36 100 11.71 99.90 10.47 C 99.66 7.61 98.62 5.35 96.60 3.33 C 94.92 1.63 93.02 0.62 90.60 0.13 C 90.01 0.01 87.42 0.01 47.37 0 C 23.93 0 4.66 0 4.54 0.02 Z'/%3E%3C/svg%3E");
  --sq-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 102 102' preserveAspectRatio='none'%3E%3Cpath d='M 4.54 0.02 C 2.57 0.29 0.86 1.73 0.20 3.66 L 0 4.25 0 42.65 C 0 84.03 0 81.42 0.38 83.42 C 2.05 91.74 8.87 98.31 17.25 99.68 C 19.11 99.98 18.89 99.98 57.91 99.96 C 93.62 99.94 95.56 99.93 95.98 99.80 C 98.14 99.17 99.65 97.42 99.89 95.24 C 100 94.36 100 11.71 99.90 10.47 C 99.66 7.61 98.62 5.35 96.60 3.33 C 94.92 1.63 93.02 0.62 90.60 0.13 C 90.01 0.01 87.42 0.01 47.37 0 C 23.93 0 4.66 0 4.54 0.02 Z' fill='none' stroke='%23f5f0e8' stroke-opacity='.14' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --sq-line-o: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 102 102' preserveAspectRatio='none'%3E%3Cpath d='M 4.54 0.02 C 2.57 0.29 0.86 1.73 0.20 3.66 L 0 4.25 0 42.65 C 0 84.03 0 81.42 0.38 83.42 C 2.05 91.74 8.87 98.31 17.25 99.68 C 19.11 99.98 18.89 99.98 57.91 99.96 C 93.62 99.94 95.56 99.93 95.98 99.80 C 98.14 99.17 99.65 97.42 99.89 95.24 C 100 94.36 100 11.71 99.90 10.47 C 99.66 7.61 98.62 5.35 96.60 3.33 C 94.92 1.63 93.02 0.62 90.60 0.13 C 90.01 0.01 87.42 0.01 47.37 0 C 23.93 0 4.66 0 4.54 0.02 Z' fill='none' stroke='%23cb6650' stroke-opacity='.45' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
/* Corner shape for panels, in the logo's proportions (1 : 2.1 : 1 : 4) */
.sq-corners, .numbers, .panel, .cta-panel, .tilt, .topten, .how-works, .mini {
  border-radius: var(--sq) calc(var(--sq) * 2.1) var(--sq) calc(var(--sq) * 4);
}
.cta-panel { --sq: 30px; }
.numbers { --sq: 24px; }
.tilt { --sq: 20px; }
.panel { --sq: 18px; }
.topten { --sq: 16px; }
.how-works { --sq: 13px; }
.sid-track { --sq: 14px; }
.sid-card { --sq: 12px; }
.mini { --sq: 10px; }
@media (max-width: 600px) { .cta-panel { --sq: 22px; } .numbers { --sq: 18px; } .panel { --sq: 14px; } }
.topten { padding-bottom: 22px; }
.how-works { padding-bottom: 24px; }

/* Icon tiles and bullets take the exact squarcle */
.feature-row .ico, .path-node .ico, .chips li::before {
  border-radius: 0; -webkit-mask: var(--sq-mask) center / 100% 100% no-repeat; mask: var(--sq-mask) center / 100% 100% no-repeat;
}
.path-node .ico { box-shadow: none; outline: 6px solid var(--ground); outline-offset: -1px; }
.deep .path-node .ico { outline-color: var(--ground-deep); }
.chips li::before { width: 8px; height: 8px; }

/* Background tiles behind the phones */
.story-pin, .boost-stage, .discover-stage, .duo, .sid, .stage, .signup-side .stagewrap { isolation: isolate; }
.story-pin::before, .boost-stage::before, .discover-stage::before, .duo::before, .signup-side .stagewrap::before, .sid::before { z-index: -2; }
.story-pin::after, .boost-stage::after, .discover-stage::after, .duo::after, .sid::after, .stage::after, .signup-side .stagewrap::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; aspect-ratio: 1;
}
/* filled tiles: a warm, barely-there surface with the orange catching the wide corner */
.story-pin::after, .duo::after, .signup-side .stagewrap::after, .boost-stage::after {
  -webkit-mask: var(--sq-mask) center / 100% 100% no-repeat; mask: var(--sq-mask) center / 100% 100% no-repeat;
  background:
    radial-gradient(120% 120% at 0% 100%, rgba(203,102,80,.22), rgba(203,102,80,0) 55%),
    linear-gradient(160deg, rgba(245,240,232,.07), rgba(245,240,232,.02) 60%);
}
/* outline tiles */
.discover-stage::after, .sid::after, .stage::after { background: var(--sq-line) center / 100% 100% no-repeat; }
.discover-stage::after { background-image: var(--sq-line-o); }

.story-pin::after { width: min(78%, 74vh, 560px); left: 50%; top: 50%; transform: translate(-46%, -46%) rotate(-7deg); }
.duo::after { width: 66%; left: 18%; top: 14%; transform: rotate(6deg); }
.boost-stage::after { width: min(440px, 60%); left: 6%; top: 50%; transform: translateY(-50%) rotate(-5deg); }
.discover-stage::after { width: min(560px, 92%); left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(8deg); }
.sid::after { width: 118%; left: -9%; top: 50%; transform: translateY(-50%) rotate(-4deg); }
.stage::after { width: min(760px, 86%); left: 50%; top: 50%; transform: translate(-50%, -50%); }
.stage.inset::after { width: min(520px, 96%); }
.signup-side .stagewrap::after { width: 300px; left: -40px; top: 50%; transform: translateY(-50%) rotate(-6deg); }
@media (max-width: 1100px) { .boost-stage::after { left: 50%; top: 4%; transform: translateX(-50%) rotate(-5deg); width: min(400px, 90%); } }

/* A large outline squarcle sits off the corner of the footer */
.foot { position: relative; overflow: hidden; isolation: isolate; }
.foot::after { content: ""; position: absolute; z-index: -1; pointer-events: none; width: 620px; aspect-ratio: 1; right: -180px; bottom: -260px; transform: rotate(-10deg); background: var(--sq-line) center / 100% 100% no-repeat; }
/* Squarcle tuning after review */
.story-pin::after, .duo::after, .signup-side .stagewrap::after, .boost-stage::after, .sid::after {
  -webkit-mask: var(--sq-mask) center / 100% 100% no-repeat; mask: var(--sq-mask) center / 100% 100% no-repeat;
  background:
    radial-gradient(120% 120% at 0% 100%, rgba(203,102,80,.32), rgba(203,102,80,0) 55%),
    linear-gradient(160deg, rgba(245,240,232,.09), rgba(245,240,232,.025) 60%);
}
.sid::after { width: 78%; left: 11%; top: 50%; transform: translateY(-50%) rotate(-5deg); }
.duo::after { width: 58%; left: -2%; top: 30%; transform: rotate(-6deg); }
.boost-stage { justify-content: center; }
.boost-stage::after { width: min(380px, 46%); left: -4%; top: 58%; transform: translateY(-50%) rotate(-8deg); }
@media (max-width: 1100px) { .boost-stage::after { left: 50%; top: 2%; transform: translateX(-62%) rotate(-8deg); width: min(340px, 80%); } }

/* No squarcle shapes behind the product demonstrations: the phones keep just their glow */
.story-pin::after, .boost-stage::after, .discover-stage::after, .duo::after, .sid::after, .stage::after, .signup-side .stagewrap::after { content: none; }

/* ---------- Audit pass (Impeccable, Taste, Apple) ---------- */
/* 1. Orange fills that carry text use a deeper orange so white text passes WCAG AA (4.6:1).
      The brighter brand orange stays for headlines, lines and highlights. */
:root { --orange-fill: #b85a46; --orange-fill-hover: #ad523f; }
.skip, .btn-primary, .strip, .float-chip.hot, .sid-code, .seg button[aria-pressed="true"], .cta-panel { background-color: var(--orange-fill); }
@media (hover: hover) and (pointer: fine) { .btn-primary:hover { background: var(--orange-fill-hover); } }

/* 2. No coloured glow under buttons or panels; shadow is kept for the product only */
.btn-primary, .nav-cta .btn { box-shadow: none; }
.cta-panel { box-shadow: 0 40px 80px -40px rgba(0,0,0,.8); }
.device {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.16),
    inset 0 0 0 calc(var(--w) * .012) #050505,
    0 0 0 1px rgba(0,0,0,.6),
    0 30px 60px -20px rgba(0,0,0,.85),
    0 60px 120px -40px rgba(0,0,0,.6);
}

/* 8. Sign-up: the "can't see it?" note sits in the panel, not as a box inside a box */
.panel .mini { background: none; padding: 14px 0 0; border-radius: 0; box-shadow: 0 -1px 0 var(--rule); }

/* 3. Page openings start with the headline */
.hero .wrap { gap: 26px; }

/* 4. A quieter top: clear nav at the top of the page, frosted once you scroll */
.nav { transition: background-color .35s ease, box-shadow .35s ease, backdrop-filter .35s ease; background: rgba(13,10,8,.6); backdrop-filter: saturate(160%) blur(22px); -webkit-backdrop-filter: saturate(160%) blur(22px); }
.nav.top:not(.open) { background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.nav.top .nav-progress { opacity: 0; }
.nav-progress { height: 1.5px; opacity: .85; transition: opacity .3s ease; }

/* 6. Room for the full-screen phone moment on Home */
@media (min-width: 901px) { #social .stage.hero-moment { height: calc(650px * var(--fs, 1) + 240px); } }

/* Remaining contrast: full-white text on the orange fills, and a stronger "keep holding" hint */
.cta-panel p, .cta-panel .cta-note, .float-chip.hot, .strip, .strip a { color: #fff; opacity: 1; }
.numbers .keep { opacity: .85; }

/* S.I.D. diagram keeps its original rounded corners */
.sid-track { border-radius: 24px; }
.sid-card { border-radius: 22px; }

/* ---------- Second trope pass ---------- */
/* 2. Fewer equal boxes.
   Home: each line sits under the phone it describes, as on the Artists page */
.home-labels { margin-top: clamp(20px, 3vw, 36px); }
.home-labels b { font-size: clamp(20px, 2vw, 26px); }
/* Artists and Labels: the earning points read as rows, title on the left and detail on the right */
.cols2 { grid-template-columns: 1fr; gap: 0; }
.cols2 > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); column-gap: clamp(24px, 5vw, 72px); padding: 26px 0; box-shadow: 0 -1px 0 var(--rule); align-items: start; }
.cols2 > div:last-child { box-shadow: 0 -1px 0 var(--rule), 0 1px 0 var(--rule); }
.cols2 .k { display: none; }
.cols2 h3 { font-size: clamp(22px, 2.2vw, 30px); }
@media (max-width: 760px) { .cols2 > div { grid-template-columns: 1fr; row-gap: 10px; } }
/* 3. The app's own icons: Boost droplet in the Top Ten and the rise, reactions in the chat */
.tt-ico { display: inline-grid; width: 13px; height: 13px; vertical-align: -2px; color: var(--orange); }
.tt-ico svg { width: 100%; height: 100%; }
.pl-rise i { width: 24px; height: 24px; color: var(--orange); display: grid; }
.pl-rise i svg { width: 100%; height: 100%; }
.burst span { border-radius: 50%; background: #de4e2b; color: #fff; padding: 6px; }
.burst span svg { width: 100%; height: 100%; }
.burst span.r-boost { background: #1c1b19; color: #de4e2b; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }

/* 5. Points under the page openings as one plain line, not pill chips */
.hero .chips, .stack > .chips { gap: 6px 0; }
.hero .chips li, .stack > .chips li { min-height: 0; padding: 0; background: none; box-shadow: none; font-size: 14px; color: var(--ink-subtle); }
.hero .chips li::before, .stack > .chips li::before { content: none; }
.hero .chips li + li::before, .stack > .chips li + li::before { content: "·"; width: auto; height: auto; background: none; border-radius: 0; -webkit-mask: none; mask: none; margin: 0 .7em; color: var(--ink-subtle); }

/* 6. One button per moment: the second action is a text link */
.btn-row .btn-ghost, .nav-cta .btn-ghost, .cta-panel .btn-line {
  background: none; border-color: transparent; padding: 0 6px; min-height: 44px; box-shadow: none;
  text-decoration: underline; text-decoration-color: rgba(245,240,232,.35); text-underline-offset: 5px; text-decoration-thickness: 1px;
  transition: text-decoration-color .2s ease, color .2s ease;
}
.cta-panel .btn-line { color: #fff; text-decoration-color: rgba(255,255,255,.55); }
@media (hover: hover) and (pointer: fine) { .btn-row .btn-ghost:hover, .nav-cta .btn-ghost:hover, .cta-panel .btn-line:hover { border-color: transparent; text-decoration-color: currentColor; } }

/* 7. The browser's own surfaces carry the brand */
::selection { background: rgba(203,102,80,.9); color: #fff; }
html { scrollbar-color: #3a322b var(--ground-deep); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ground-deep); }
::-webkit-scrollbar-thumb { background: #3a322b; border-radius: 10px; border: 2px solid var(--ground-deep); }
::-webkit-scrollbar-thumb:hover { background: #4a4038; }
input, textarea { caret-color: var(--orange); }
.cols2 p { font-size: 17px; line-height: 1.6; }
@media (min-width: 901px) { .home-labels { max-width: 700px; gap: 18px; margin-top: -70px; position: relative; z-index: 2; } }
@media (min-width: 901px) and (max-width: 1100px) { .home-labels { max-width: 560px; } }
@media (min-width: 1101px) { .home-labels { max-width: 800px; } .home-labels b { white-space: nowrap; } }

/* ---------- Readability pass ---------- */
/* 3. One reading size for body text, as Apple does (17px); fine print stays at 14px */
.fan-labels > div > span, .feature-row p, .path-node span, .how-works p, .trio p:not(.w), .tilt p, .numbers .per, .cols2 p { font-size: 17px; line-height: 1.55; }
.fan-labels > div > span { max-width: 32ch; }
.numbers .note, .numbers .keep, .field .hint, .hero .chips li, .stack > .chips li { font-size: 14px; }
.small { font-size: 15px; }

/* 4. Opening paragraphs keep clear of the photo: a narrower column and a deeper fade behind the text */
@media (min-width: 861px) {
  .hero .lead { max-width: 40ch; }
  .hero::after { background: linear-gradient(0deg, var(--ground) 0%, transparent 34%), linear-gradient(90deg, var(--ground) 18%, rgba(13,10,8,.78) 40%, rgba(13,10,8,.25) 60%, transparent 76%); }
}

/* ---------- Artists: the people who love your music ----------
   One fan listening, graded and faded into the dark like the other photos */
.earn-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; margin-bottom: clamp(40px, 5vw, 72px); }
.earn-head .section-head { margin-bottom: 0; }
.earn-head .fan-photo { width: 100%; max-width: 560px; aspect-ratio: 4 / 5; justify-self: end; background: none; }
.earn-head .fan-photo img { object-position: 40% 30%; }
@media (max-width: 900px) {
  .earn-head { grid-template-columns: 1fr; }
  .earn-head .fan-photo { justify-self: center; max-width: 440px; aspect-ratio: 1 / 1; }
}
.earn-head .fan-photo { -webkit-mask-image: radial-gradient(68% 62% at 56% 44%, #000 42%, transparent 100%); mask-image: radial-gradient(68% 62% at 56% 44%, #000 42%, transparent 100%); }
.earn-head .fan-photo img { filter: sepia(.38) saturate(.78) contrast(1.06) brightness(.88); }
@media (max-width: 900px) { .earn-head .fan-photo { -webkit-mask-image: radial-gradient(70% 66% at 50% 46%, #000 45%, transparent 100%); mask-image: radial-gradient(70% 66% at 50% 46%, #000 45%, transparent 100%); } }

/* ---------- One headline voice ----------
   The orange second phrase stays; it is set in the same bold, upright Mundial as the
   rest of the headline. Italic is kept only for the pull quote. */
h1 .thin, h2 .thin, h3 .thin, .statement .thin, .fan-labels .thin, .trio .w .thin, .foot .tagline .thin, .cta-panel .thin, .display .thin {
  font-weight: inherit; font-style: normal; letter-spacing: inherit;
}
.cta-panel h2 .thin { color: rgba(255,255,255,.82); }
/* Points line: the separator follows each point, so a wrapped line never starts with a dot */
.hero .chips li + li::before, .stack > .chips li + li::before { content: none; }
.hero .chips li:not(:last-child)::after, .stack > .chips li:not(:last-child)::after { content: "·"; margin: 0 .7em; color: var(--ink-subtle); }

/* Live reaction counts inside the My World post, replacing the floating bubbles */
.ov-counts { position: absolute; left: 0; right: 0; z-index: 2; pointer-events: none; }
.ov-count { position: absolute; top: 0; height: 100%; display: flex; align-items: center; color: #fff; font: 600 calc(var(--w) * .0335)/1 var(--font); letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; transform-origin: left center; }
.ov-count.tick { animation: tick .5s cubic-bezier(.2, .9, .3, 1.4); }
@keyframes tick { 0% { transform: scale(1); } 40% { transform: scale(1.22); color: #ffd9cf; } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .ov-count.tick { animation: none; } }

/* ---------- Sign-up: the product on one side, the action on the other (Apple's buy-page layout) ---------- */
.signup-page { padding-top: clamp(32px, 5vw, 64px); }
.signup-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.signup-product { position: sticky; top: calc(var(--nav-h) + 40px); display: flex; flex-direction: column; align-items: center; gap: 28px; perspective: 1400px; padding-top: 12px; isolation: isolate; }
.signup-product .glow { z-index: -1; }
.signup-product .device { --w: min(330px, 26vw); }
.signup-caption { justify-content: center; }
.signup-caption li { min-height: 0; padding: 0; background: none; box-shadow: none; font-size: 14px; color: var(--ink-subtle); }
.signup-caption li::before { content: none; }
.signup-caption li:not(:last-child)::after { content: "·"; margin: 0 .7em; color: var(--ink-subtle); }
.signup-main { display: flex; flex-direction: column; gap: 24px; }
.signup-main .h2 { font-size: clamp(42px, 5vw, 72px); }
.signup-main .panel { margin-top: 8px; }
.signup-main .how-works { max-width: none; }
@media (max-width: 900px) {
  .signup-grid { grid-template-columns: 1fr; }
  .signup-main { order: -1; }
  .signup-product { position: static; padding-top: 24px; }
  .signup-product .device { --w: min(260px, 66vw); }
}

/* Label profile header on the sign-up phone: the night bus, its name sprayed on the side, traffic streaking past */
.ov-lhdr { position: absolute; left: 0; right: 0; top: 0; overflow: hidden; background: #07070a; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%); mask-image: linear-gradient(180deg, transparent 0%, #000 12%); }
.nb-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 45%; animation: nb-push 18s ease-in-out infinite alternate; }
@keyframes nb-push { from { transform: scale(1); } to { transform: scale(1.06); } }
.nb-scene { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; display: block; }
.ov-lhdr::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 62%, rgba(7,7,10,.72) 100%); }
.ov-kick { position: absolute; z-index: 3; left: 5.6%; top: 67%; font: 700 calc(var(--w) * .026)/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: #d7ff3d; }
.ov-lhdr .ov-name, .ov-lhdr .ov-pill { z-index: 3; }
@media (prefers-reduced-motion: reduce) { .nb-photo { animation: none; } }

/* Subscribe straight from the sign-up page */
.how-works .btn { align-self: flex-start; margin-top: 8px; }

/* Clips fade in once they are playing; until then their poster shows behind them */
video.fade { opacity: 0; transition: opacity .45s ease; }
video.fade.live { opacity: 1; }
.ov-media, .ov-hdr, .sw-card, .photo, .tile, .intro-crowd { background-size: cover; background-position: center; }

/* ---------- FAQs: topics on the left, questions on the right (Apple support layout) ---------- */
.faq-page { padding-top: clamp(32px, 5vw, 64px); }
.faq-grid { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); column-gap: clamp(32px, 6vw, 96px); row-gap: 48px; align-items: start; }
.faq-head { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 20px; max-width: 760px; }
.faq-head .h2 { font-size: clamp(42px, 5vw, 72px); }
.faq-search { display: flex; align-items: center; gap: 12px; margin-top: 8px; max-width: 520px; height: 54px; padding: 0 20px; border-radius: 999px; background: var(--raised); box-shadow: inset 0 0 0 1px var(--rule); color: var(--ink-subtle); transition: box-shadow .2s var(--ease-out); }
.faq-search:focus-within { box-shadow: inset 0 0 0 1.5px var(--orange); }
.faq-search svg { width: 20px; height: 20px; flex: none; }
.faq-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--ink); font: 400 17px/1 var(--font); outline: none; }
.faq-search input::placeholder { color: var(--ink-subtle); }
.faq-search input::-webkit-search-cancel-button { filter: invert(1) opacity(.5); }
.faq-index { position: sticky; top: calc(var(--nav-h) + 32px); }
.faq-index ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.faq-index a { display: block; padding: 9px 0 9px 16px; border-left: 2px solid var(--rule); color: var(--ink-subtle); font-size: 15px; line-height: 1.35; text-decoration: none; transition: color .2s, border-color .2s; }
.faq-index a:hover { color: var(--ink); }
.faq-index a[aria-current="true"] { color: var(--ink); border-left-color: var(--orange); }
.faq-list { display: flex; flex-direction: column; gap: 56px; min-width: 0; }
.faq-sec { scroll-margin-top: calc(var(--nav-h) + 24px); }
.faq-sec > .h3 { margin: 0 0 8px; }
.faq-q { border-bottom: 1px solid var(--rule); scroll-margin-top: calc(var(--nav-h) + 24px); }
.faq-q summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; cursor: pointer; list-style: none; font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.faq-q summary::-webkit-details-marker { display: none; }
.faq-q summary:hover span { color: var(--orange-text); }
.faq-q summary:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; border-radius: 6px; }
.faq-q summary i { position: relative; flex: none; width: 14px; height: 14px; }
.faq-q summary i::before, .faq-q summary i::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; border-radius: 2px; background: var(--ink-subtle); transition: transform .3s var(--ease-out), background .2s; }
.faq-q summary i::after { transform: rotate(90deg); }
.faq-q[open] summary i::after { transform: rotate(0deg); }
.faq-q[open] summary i::before, .faq-q[open] summary i::after { background: var(--orange); }
.faq-a { padding: 0 48px 26px 0; display: flex; flex-direction: column; gap: 14px; }
.faq-a p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink-muted); max-width: 68ch; }
.faq-a b { color: var(--ink); }
.faq-a a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(229,141,118,.6); text-underline-offset: 3px; }
.faq-a a:hover { color: var(--orange-text); }
.faq-q[open] .faq-a { animation: faq-in .35s var(--ease-out); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.faq-q mark { background: var(--orange-soft); color: inherit; border-radius: 3px; padding: 0 2px; }
.faq-empty a { color: var(--ink); }
.faq-more { max-width: none; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.faq-more .btn { margin: 0; }
@media (max-width: 900px) {
  .faq-grid { grid-template-columns: 1fr; row-gap: 32px; }
  .faq-index { position: static; overflow-x: auto; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); scrollbar-width: none; }
  .faq-index::-webkit-scrollbar { display: none; }
  .faq-index ul { flex-direction: row; gap: 8px; width: max-content; }
  .faq-index a { border: 0; padding: 10px 16px; border-radius: 999px; background: var(--raised); box-shadow: inset 0 0 0 1px var(--rule); white-space: nowrap; font-size: 14px; }
  .faq-index a[aria-current="true"] { box-shadow: inset 0 0 0 1.5px var(--orange); }
  .faq-q summary { font-size: 17px; padding: 20px 0; }
  .faq-a { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) { .faq-q[open] .faq-a { animation: none; } }

/* A line picked out in a lead paragraph */
.lead-hl { display: block; margin-top: .7em; font-weight: 600; color: var(--orange); white-space: nowrap; }
@media (max-width: 640px) { .lead-hl { white-space: normal; text-wrap: balance; } }