/* ============================================================
   LOOPYLICIOUS - product site
   Visual system derived from the app's own DNA:
   near-black canvas, glowing loop-dials, mono labels,
   semantic state colors (play/dub/rec), pastel-neon accents.
   ============================================================ */

:root{
  /* surfaces */
  --bg:        #09090f;
  --bg-2:      #0c0c14;
  --surface:   #14141e;
  --surface-2: #1a1a26;
  --surface-3: #20202e;
  --border:        rgba(255,255,255,.07);
  --border-strong: rgba(255,255,255,.13);

  /* text */
  --text:   #ECECF3;
  --dim:    #9B9BAE;
  --faint:  #66667A;

  /* semantic state colors (the product's language - kept fixed) */
  --play:  #6FE6A0;  --play-soft: rgba(111,230,160,.55);
  --dub:   #F5A65B;  --dub-soft:  rgba(245,166,91,.5);
  --rec:   #FF6E8E;  --rec-soft:  rgba(255,110,142,.5);
  --que:   #7FA6FF;  --que-soft:  rgba(127,166,255,.5);
  --arm:   #A78BFA;  --arm-soft:  rgba(167,139,250,.5);

  /* pastel-neon accent family (Ice: cyan → periwinkle → violet) */
  --neon-a: #7DE0F0;  /* cyan       */
  --neon-b: #8FB0FF;  /* periwinkle */
  --neon-c: #B79CFF;  /* violet     */
  --accent: var(--neon-b);
  --accent-grad: linear-gradient(100deg, var(--neon-a), var(--neon-b) 52%, var(--neon-c));
  --accent-grad-2: linear-gradient(100deg, #FFA6D4, var(--neon-c));  /* rose -> violet, for the buy CTA */
  --accent-2: #FFA6D4;  /* rose, buy CTA glow */

  --maxw: 1180px;
  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 10px;

  --ff-disp: "Space Grotesk", system-ui, sans-serif;
  --ff-body: "Hanken Grotesk", system-ui, sans-serif;
  --ff-mono: "Space Mono", ui-monospace, monospace;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--ff-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* ambient neon glow washes behind the page */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(60vw 50vw at 78% -8%, color-mix(in oklab, var(--neon-b) 22%, transparent), transparent 60%),
    radial-gradient(46vw 42vw at 8% 4%,  color-mix(in oklab, var(--neon-a) 14%, transparent), transparent 60%),
    radial-gradient(50vw 50vw at 50% 108%, color-mix(in oklab, var(--neon-c) 14%, transparent), transparent 62%);
  filter:saturate(1.05);
}
body::after{ /* subtle film grain / vignette */
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(120vw 120vh at 50% 30%, transparent 55%, rgba(0,0,0,.55) 100%);
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
::selection{ background:color-mix(in oklab, var(--accent) 40%, transparent); color:#fff; }

.wrap{ width:min(var(--maxw), 92vw); margin-inline:auto; }
.eyebrow{
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--dim);
}
.mono{ font-family:var(--ff-mono); }
.grad-text{
  background:var(--accent-grad); -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

h1,h2,h3{ font-family:var(--ff-disp); font-weight:600; line-height:1.05; letter-spacing:-.02em; margin:0; }
p{ margin:0; text-wrap:pretty; }
.lead{ font-size:clamp(17px,1.6vw,20px); color:var(--dim); line-height:1.55; }

/* ── buttons ──────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  font-family:var(--ff-disp); font-weight:600; font-size:15px;
  padding:13px 22px; border-radius:999px; border:1px solid transparent;
  transition:transform .15s ease, box-shadow .25s ease, background .2s, border-color .2s;
  white-space:nowrap; max-width:100%; text-align:center;
}
/* on narrow screens, let long button labels wrap rather than overflow the viewport */
@media (max-width:520px){ .btn{ white-space:normal; } }
.btn:active{ transform:translateY(1px); }
.btn-primary{
  color:#0a0a10; background:var(--accent-grad);
  box-shadow:0 0 0 1px rgba(255,255,255,.12) inset, 0 8px 30px -8px var(--accent);
}
.btn-primary:hover{ box-shadow:0 0 0 1px rgba(255,255,255,.2) inset, 0 12px 40px -8px var(--accent); transform:translateY(-1px); }
.btn-buy{
  color:#0a0a10; background:var(--accent-grad-2);
  box-shadow:0 0 0 1px rgba(255,255,255,.12) inset, 0 8px 30px -8px var(--accent-2);
}
.btn-buy:hover{ box-shadow:0 0 0 1px rgba(255,255,255,.2) inset, 0 12px 40px -8px var(--accent-2); transform:translateY(-1px); }
.btn-ghost{ color:var(--text); border-color:var(--border-strong); background:rgba(255,255,255,.02); }
.btn-ghost:hover{ border-color:var(--accent); color:#fff; background:rgba(255,255,255,.05); }
.btn svg{ width:17px; height:17px; }

/* ── nav ──────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  background:color-mix(in oklab, var(--bg) 72%, transparent);
  border-bottom:1px solid transparent; transition:border-color .3s, background .3s;
}
/* (nav border-on-scroll removed - SEB-171) */
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:68px; }
.brand{ display:flex; align-items:center; gap:11px; }
.brand-logo{ height:30px; width:auto; display:block; }
.brand .mark{ width:30px; height:30px; flex:none; }
.brand .name{ font-family:var(--ff-mono); font-weight:700; letter-spacing:.18em; font-size:15px; }
.nav-links{ display:flex; align-items:center; gap:26px; }
.nav-links a{ font-size:14.5px; color:var(--dim); transition:color .2s; white-space:nowrap; }
.nav-links a:hover{ color:var(--text); }
.nav-cta{ display:flex; align-items:center; gap:14px; }
/* hamburger machinery (CSS-only) - hidden on desktop */
.nav-toggle{ display:none; }
.nav-burger{ display:none; }
.nav-links-cta{ display:none; }
@media (max-width:1140px){
  .nav-inner{ position:relative; }
  .nav-cta{ display:none; }
  .nav-burger{
    display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
    width:44px; height:44px; padding:0 12px; cursor:pointer; border-radius:10px;
    border:1px solid var(--border-strong); background:rgba(255,255,255,.02);
  }
  .nav-burger span{ display:block; height:2px; width:100%; background:var(--text); border-radius:2px; transition:transform .2s ease, opacity .2s ease; }
  .nav-links{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    position:absolute; top:calc(100% + 10px); left:0; right:0; z-index:60;
    background:var(--bg-2); border:1px solid var(--border); border-radius:var(--r-md);
    padding:8px; box-shadow:0 30px 60px -30px #000;
    max-height:0; opacity:0; overflow:hidden; pointer-events:none;
    transition:max-height .25s ease, opacity .2s ease;
  }
  .nav-links a{ padding:13px 14px; border-radius:10px; font-size:16px; }
  .nav-links a:hover{ background:rgba(255,255,255,.05); color:var(--text); }
  .nav-links-cta{ display:inline-flex; justify-content:center; margin-top:8px; }
  /* the dropdown's `.nav-links a` rule forces dim text; restore the button's dark label */
  .nav-links a.nav-links-cta,
  .nav-links a.nav-links-cta:hover{ color:#0a0a10; }
  .nav-toggle:checked ~ .nav-links{ max-height:80vh; opacity:1; pointer-events:auto; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-burger span:nth-child(2){ opacity:0; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}

/* ── section rhythm ───────────────────────────────────── */
section{ position:relative; }
.section-pad{ padding:clamp(72px,11vw,140px) 0; }
.sec-head{ max-width:680px; margin-bottom:54px; }
.sec-head h2{ font-size:clamp(30px,4.4vw,52px); margin:14px 0 18px; }
.center{ text-align:center; margin-inline:auto; }

/* ── hero ─────────────────────────────────────────────── */
.hero{ padding-top:clamp(40px,7vw,84px); padding-bottom:clamp(40px,6vw,72px); }
.hero-grid{ display:grid; gap:clamp(40px,5vw,72px); align-items:center; position:relative; z-index:1; }
.hero h1{ font-size:clamp(44px,7.2vw,92px); letter-spacing:-.035em; }
.hero h1 .line{ display:block; }
.hero .lead{ margin-top:24px; max-width:34ch; font-size:clamp(17px,1.5vw,20px); }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.hero-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.chip{ display:inline-flex; align-items:center; gap:8px; font-family:var(--ff-mono); font-size:12px; letter-spacing:.01em;
  color:var(--dim); border:1px solid var(--border); background:rgba(255,255,255,.025); padding:7px 13px; border-radius:999px; }
.chip svg{ width:14px; height:14px; color:var(--accent); flex:none; }
.uni-line{ display:flex; align-items:flex-start; gap:11px; margin-top:30px; max-width:46ch;
  padding:13px 16px; border-radius:14px;
  border:1px solid color-mix(in oklab, var(--accent) 32%, transparent);
  background:color-mix(in oklab, var(--accent) 8%, transparent);
  font-size:14.5px; line-height:1.5; color:var(--dim); }
.uni-line svg{ width:19px; height:19px; color:var(--accent); flex:none; margin-top:1px; }
.uni-line b{ color:var(--text); font-weight:600; }
.hero-badges{ display:flex; flex-wrap:wrap; gap:18px 26px; margin-top:32px; align-items:center; }
.plat{ display:flex; align-items:center; gap:8px; font-family:var(--ff-mono); font-size:12.5px; color:var(--dim); }
.plat svg{ width:16px; height:16px; opacity:.85; }
.plat.soon{ color:var(--faint); }
.plat .tag{ font-size:10px; letter-spacing:.1em; color:var(--faint); border:1px solid var(--border); padding:1px 6px; border-radius:5px; }
.plat.live .dot{ width:7px; height:7px; border-radius:50%; background:var(--play); box-shadow:0 0 10px var(--play); }

/* hero screenshot: real app shot in a translucent, rounded, glowing frame */
.hero-shot{ display:block; width:100%; height:auto; box-sizing:border-box;
  background:rgba(255,255,255,.045); padding:14px; border-radius:18px;
  object-fit:contain; }
.hero-shot-desktop{ max-width:430px; margin-inline:auto;
  box-shadow:0 40px 100px -50px var(--accent); }
/* mobile-only: a small product shot slotted between the two hero paragraphs */
.hero-shot-mobile{ display:none; }
@media (max-width:920px){
  .hero-stage{ display:none; }                 /* drop the bottom shot - shown inline instead */
  .hero-shot-mobile{ display:block; max-width:300px; margin:26px auto 8px;
    box-shadow:0 26px 64px -42px var(--accent); }
}

/* hero layout variants (driven by [data-hero] on .hero) */
[data-hero="rack"]   .hero-grid{ grid-template-columns:1fr; justify-items:start; }
[data-hero="rack"]   .hero-stage{ width:100%; margin-top:8px; }
[data-hero="split"]  .hero-grid{ grid-template-columns:1.05fr 1fr; }
[data-hero="ambient"] .hero-grid{ grid-template-columns:1fr; justify-items:center; text-align:center; position:relative; }
[data-hero="ambient"] .hero-copy{ position:relative; z-index:2; }
[data-hero="ambient"] .hero-stage{ position:absolute; inset:-6% -10% auto; z-index:1; opacity:.5; filter:blur(.4px); }
[data-hero="ambient"] .hero .lead{ margin-inline:auto; }
[data-hero="ambient"] .hero-cta,[data-hero="ambient"] .hero-badges{ justify-content:center; }
@media (max-width:920px){
  [data-hero="split"] .hero-grid{ grid-template-columns:1fr; }
  [data-hero="ambient"] .hero-stage{ position:relative; inset:auto; opacity:.85; }
}

/* ── dial component (the signature element) ───────────── */
.dial-rack{ display:flex; gap:18px; flex-wrap:wrap; }
.dial-card{
  position:relative; flex:1 1 0; min-width:150px;
  background:linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
  border:1px solid var(--border); border-radius:var(--r-md);
  padding:16px 14px 16px; overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 24px 50px -30px #000;
}
.dial-card::before{ /* state-tinted top edge bloom */
  content:""; position:absolute; inset:0 0 auto; height:120px; pointer-events:none;
  background:radial-gradient(120px 70px at 50% -20px, var(--state-soft,transparent), transparent 70%);
  opacity:.9;
}
.dial-head{ display:flex; align-items:center; gap:8px; font-family:var(--ff-mono); font-size:12px; color:var(--dim); margin-bottom:10px; position:relative; }
.dial-head .id{ color:var(--text); font-weight:700; }
.dial-head .dot{ width:8px; height:8px; border-radius:50%; background:var(--faint); box-shadow:0 0 8px var(--state, transparent); }
.dial-head .meta{ margin-left:auto; opacity:.85; letter-spacing:.04em; font-size:10.5px; padding:3px 9px; border-radius:7px; background:rgba(255,255,255,.04); border:1px solid var(--border); color:var(--dim); }
.dial-body{ display:flex; align-items:center; gap:10px; }
.vu{ display:flex; flex-direction:column-reverse; gap:2px; width:7px; flex:none; }
.vu i{ height:3px; border-radius:1px; background:var(--state, var(--neon-a)); opacity:.18; transition:opacity .08s; }
.dial-ring{ position:relative; flex:1; aspect-ratio:1; display:grid; place-items:center; }
.dial-ring svg{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); overflow:visible; }
.dial-ring .track{ fill:none; stroke:rgba(255,255,255,.06); stroke-width:4; }
.dial-ring .arc{
  fill:none; stroke:var(--state, var(--neon-a)); stroke-width:4; stroke-linecap:round;
  filter:drop-shadow(0 0 5px var(--state-soft, transparent)) drop-shadow(0 0 10px var(--state-soft, transparent));
  transition:stroke .35s ease;
}
/* raised, beveled inner disc */
.dial-disc{
  position:absolute; inset:14%; border-radius:50%;
  background:radial-gradient(120% 120% at 50% 18%, #14141f 0%, #0a0a11 55%, #06060b 100%);
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,.06),
    inset 0 -6px 14px rgba(0,0,0,.6),
    0 10px 24px -8px rgba(0,0,0,.8);
  border:1px solid rgba(255,255,255,.04);
}
/* glowing head dot at the arc's leading edge */
.arc-head-layer{ position:absolute; inset:0; pointer-events:none; transition:transform .05s linear; }
.arc-head{
  position:absolute; left:50%; top:7%; width:9px; height:9px; margin-left:-4.5px;
  border-radius:50%; background:var(--state, #fff);
  box-shadow:0 0 6px 1px var(--state, #fff), 0 0 14px 3px var(--state-soft, transparent);
}
.dial-card[data-empty="1"] .arc-head{ display:none; }
.dial-center{ position:absolute; inset:0; display:grid; place-content:center; text-align:center; gap:3px; z-index:1; }
.dial-state{ font-family:var(--ff-mono); font-size:11.5px; font-weight:700; letter-spacing:.12em; color:var(--state, var(--dim)); }
.dial-state.empty{ color:var(--faint); }
.dial-time{ font-family:var(--ff-mono); font-size:13px; color:var(--dim); }
.dial-foot{ display:flex; gap:6px; margin-top:14px; }
.dial-foot button{
  flex:1; height:30px; border-radius:8px; border:1px solid var(--border);
  background:rgba(255,255,255,.02); color:var(--dim); display:grid; place-items:center; cursor:default;
}
.dial-foot button svg{ width:14px; height:14px; }

/* ── trust strip ──────────────────────────────────────── */
.trust{ border-block:1px solid var(--border); background:var(--bg-2); }
.trust-inner{ display:flex; flex-wrap:wrap; gap:14px 38px; justify-content:center; padding:22px 0; }
.trust-item{ display:flex; align-items:center; gap:9px; font-size:14px; color:var(--dim); font-family:var(--ff-mono); letter-spacing:.02em; }
.trust-item svg{ width:16px; height:16px; color:var(--play); }

/* ── manifesto ────────────────────────────────────────── */
.manifesto{ background:var(--bg-2); border-block:1px solid var(--border); }
.manifesto-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(36px,6vw,80px); align-items:start; }
.manifesto blockquote{ margin:0; font-family:var(--ff-disp); font-weight:500; font-size:clamp(22px,2.7vw,30px); line-height:1.32; letter-spacing:-.015em; }
.manifesto .body p{ color:var(--dim); margin-bottom:18px; font-size:17px; }
.manifesto .body p strong{ color:var(--text); font-weight:600; }
.sig{ display:flex; align-items:center; gap:14px; margin-top:30px; }
.sig .avatar{ width:46px; height:46px; border-radius:50%; background:var(--surface-2); border:1px solid var(--border-strong); display:grid; place-items:center; font-family:var(--ff-mono); color:var(--dim); }
.sig .who b{ display:block; font-family:var(--ff-disp); }
.sig .who span{ color:var(--faint); font-size:13.5px; }
@media (max-width:820px){ .manifesto-grid{ grid-template-columns:1fr; } }

/* ── spotlight (loop now, DAW later) ──────────────────── */
.spotlight-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,70px); align-items:center; }
@media (max-width:880px){ .spotlight-grid{ grid-template-columns:1fr; } }
.flow{ display:flex; flex-direction:column; gap:14px; }
.flow-card{
  border:1px solid var(--border); border-radius:var(--r-md); padding:18px 20px;
  background:linear-gradient(180deg, var(--surface), var(--bg-2));
  position:relative;
}
.flow-card .k{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); }
.flow-card h4{ font-family:var(--ff-disp); font-size:19px; margin:6px 0 4px; font-weight:600; }
.flow-card p{ color:var(--dim); font-size:14.5px; }
.flow-arrow{ display:grid; place-items:center; color:var(--accent); }
.flow-arrow svg{ width:22px; height:22px; }

/* ── feature grid ─────────────────────────────────────── */
.feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:920px){ .feat-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .feat-grid{ grid-template-columns:1fr; } }
.feat{
  border:1px solid var(--border); border-radius:var(--r-md); padding:26px 24px;
  background:linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
  transition:border-color .25s, transform .25s, box-shadow .25s; position:relative; overflow:hidden;
}
.feat:hover{ border-color:var(--border-strong); transform:translateY(-3px); box-shadow:0 30px 60px -40px var(--accent); }
.feat .ico{ width:42px; height:42px; border-radius:11px; display:grid; place-items:center; margin-bottom:18px;
  background:color-mix(in oklab, var(--accent) 14%, transparent); border:1px solid color-mix(in oklab, var(--accent) 30%, transparent); color:var(--accent); }
.feat .ico svg{ width:21px; height:21px; }
.feat h3{ font-size:19px; margin-bottom:8px; font-weight:600; }
.feat p{ color:var(--dim); font-size:15px; }
.feat.wide{ grid-column:span 2; }
@media (max-width:560px){ .feat.wide{ grid-column:span 1; } }

/* ── pad sequencer ────────────────────────────────────── */
.pad-grid-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,70px); align-items:center; }
@media (max-width:880px){ .pad-grid-wrap{ grid-template-columns:1fr; } }
.pad-board{
  --gap:12px; display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap);
  padding:22px; border-radius:var(--r-md); border:1px solid var(--border);
  background:radial-gradient(120% 120% at 50% 0%, var(--surface-2), var(--bg-2));
  aspect-ratio:1; box-shadow:0 30px 80px -50px #000, 0 1px 0 rgba(255,255,255,.04) inset;
}
.pad{ border-radius:12px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.05); aspect-ratio:1; cursor:pointer; transition:background .08s, box-shadow .25s, transform .08s, border-color .25s; position:relative; }
.pad::after{ content:""; position:absolute; inset:0; border-radius:inherit; background:var(--pad-c); opacity:.1; transition:opacity .25s; }
.pad:hover{ border-color:color-mix(in oklab, var(--pad-c) 50%, transparent); }
.pad:hover::after{ opacity:.2; }
.pad.glow::after{ opacity:.4; }
.pad.glow{ box-shadow:0 0 14px -2px var(--pad-c); }
.pad.hit{ transform:scale(.9); background:var(--pad-c); box-shadow:0 0 22px 1px var(--pad-c); border-color:var(--pad-c); transition:transform .04s, box-shadow .04s, background .04s; }
.pad.hit::after{ opacity:.9; }

/* ── platforms matrix ─────────────────────────────────── */
.matrix{ border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; background:var(--bg-2); }
.matrix .row{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:0; border-top:1px solid var(--border); }
.matrix .row:first-child{ border-top:0; }
.matrix .cell{ padding:18px 22px; display:flex; align-items:center; gap:12px; }
.matrix .cell.h{ font-family:var(--ff-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
.matrix .os{ display:flex; align-items:center; gap:11px; font-family:var(--ff-disp); font-weight:500; }
.matrix .os svg{ width:20px; height:20px; opacity:.9; }
/* on mobile the 3-col table can't fit - restack each platform as a card */
@media (max-width:600px){
  .matrix{ border:0; background:transparent; overflow:visible; }
  .matrix .row{ grid-template-columns:1fr; border:1px solid var(--border); border-radius:var(--r-md); background:var(--bg-2); margin-bottom:12px; padding:4px 0; }
  .matrix .row:first-child{ display:none; }            /* header row - labels move inline below */
  .matrix .row:last-child{ margin-bottom:0; }
  .matrix .cell{ padding:11px 18px; }
  .matrix .cell.os{ font-size:17px; padding-top:14px; }
  .matrix .cell[data-label]::before{
    content:attr(data-label); margin-right:auto;
    font-family:var(--ff-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint);
  }
}
.pill{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.08em; padding:4px 10px; border-radius:999px; }
.pill.now{ color:var(--play); background:color-mix(in oklab, var(--play) 14%, transparent); }
.pill.soon{ color:var(--dub); background:color-mix(in oklab, var(--dub) 13%, transparent); }
.pill.no{ color:var(--faint); background:rgba(255,255,255,.04); }

/* ── roadmap ──────────────────────────────────────────── */
.road{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:880px){ .road{ grid-template-columns:1fr; } }
.lane{ border:1px solid var(--border); border-radius:var(--r-md); background:linear-gradient(180deg,var(--surface),var(--bg-2)); padding:22px 22px 10px; }
.lane-h{ display:flex; align-items:center; gap:10px; margin-bottom:4px; }
.lane-h .d{ width:9px; height:9px; border-radius:50%; flex:none; }
.lane-h b{ font-family:var(--ff-disp); font-weight:600; font-size:17px; }
.lane-h .c{ margin-left:auto; font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.08em; color:var(--faint); text-transform:uppercase; }
.lane ul{ list-style:none; margin:8px 0 0; padding:0; }
.lane li{ padding:13px 0; border-top:1px solid var(--border); display:flex; gap:11px; align-items:flex-start; font-size:15px; color:var(--text); }
.lane li .ic{ flex:none; width:17px; height:17px; margin-top:2px; }
.lane li small{ display:block; color:var(--faint); font-size:13px; margin-top:2px; line-height:1.4; }
.lane.shipped .d{ background:var(--play); box-shadow:0 0 10px var(--play); } .lane.shipped .ic{ color:var(--play); }
.lane.building .d{ background:var(--dub); box-shadow:0 0 10px var(--dub); } .lane.building .ic{ color:var(--dub); }
.lane.horizon .d{ background:var(--que); box-shadow:0 0 10px var(--que); } .lane.horizon .ic{ color:var(--que); }

/* ── pricing ──────────────────────────────────────────── */
.price-card{
  max-width:560px; margin-inline:auto; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--border-strong);
  background:linear-gradient(180deg, var(--surface-2), var(--bg-2));
  box-shadow:0 40px 120px -50px var(--accent);
}
.price-top{ padding:32px 34px 26px; text-align:center; border-bottom:1px solid var(--border); }
.price-top .name{ font-family:var(--ff-mono); letter-spacing:.16em; text-transform:uppercase; font-size:12px; color:var(--accent); }
.price-top h3{ font-size:28px; margin:8px 0 6px; }
.price-amt{ font-family:var(--ff-disp); font-weight:700; font-size:64px; line-height:1; letter-spacing:-.04em; margin:18px 0 4px; }
.price-amt .cur{ font-size:30px; vertical-align:super; color:var(--dim); }
.price-slider{ width:100%; margin:18px 0 6px; -webkit-appearance:none; appearance:none; height:6px; border-radius:999px;
  background:linear-gradient(90deg, var(--accent) var(--pct,40%), rgba(255,255,255,.1) var(--pct,40%)); outline:none; }
.price-slider::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:#fff; cursor:pointer; box-shadow:0 0 0 4px color-mix(in oklab, var(--accent) 40%, transparent), 0 4px 12px rgba(0,0,0,.5); }
.price-slider::-moz-range-thumb{ width:22px; height:22px; border:0; border-radius:50%; background:#fff; cursor:pointer; box-shadow:0 0 0 4px color-mix(in oklab, var(--accent) 40%, transparent); }
.price-scale{ display:flex; justify-content:space-between; font-family:var(--ff-mono); font-size:11px; color:var(--faint); }
.price-hint{ color:var(--dim); font-size:14px; margin-top:14px; min-height:20px; }
.price-body{ padding:28px 34px 32px; }
.price-feats{ display:grid; gap:13px; margin:0 0 24px; }
.price-feats li{ display:flex; gap:11px; align-items:flex-start; list-style:none; font-size:15px; color:var(--text); }
.price-feats svg{ width:18px; height:18px; color:var(--play); flex:none; margin-top:2px; }
.price-feats .sub{ color:var(--faint); font-size:13px; }
.pay-row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:center; margin-top:20px; }
.pay-row .lbl{ width:100%; text-align:center; font-family:var(--ff-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-bottom:4px; }
.pay-chip{ height:34px; padding:0 12px; display:flex; align-items:center; gap:7px; border-radius:8px; border:1px solid var(--border); background:rgba(255,255,255,.03); font-family:var(--ff-mono); font-size:12px; color:var(--dim); }
.pay-chip svg{ width:16px; height:16px; }
.price-foot{ text-align:center; margin-top:22px; font-size:14px; color:var(--dim); }
.price-foot a{ color:var(--accent); border-bottom:1px solid color-mix(in oklab, var(--accent) 40%, transparent); }

/* two side cards under main price card */
.alt-cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:18px; max-width:560px; margin:18px auto 0; }
@media (max-width:560px){ .alt-cards{ grid-template-columns:1fr; } }
.alt{ border:1px dashed var(--border-strong); border-radius:var(--r-md); padding:20px; background:rgba(255,255,255,.015); }
.alt h4{ font-family:var(--ff-disp); font-size:17px; margin-bottom:6px; display:flex; align-items:center; gap:8px; }
.alt p{ color:var(--dim); font-size:14px; }

/* ── songs / hear it ──────────────────────────────────── */
.songs{ position:relative; overflow:hidden; }
.songs-card{ display:grid; grid-template-columns:1fr auto; gap:26px; align-items:center;
  border:1px solid var(--border); border-radius:var(--r-lg); padding:28px 32px;
  background:linear-gradient(110deg, var(--surface-2), var(--bg-2)); }
@media (max-width:720px){ .songs-card{ grid-template-columns:1fr; text-align:center; justify-items:center; } }

/* ── faq ──────────────────────────────────────────────── */
.faq{ max-width:820px; margin-inline:auto; }
.qa{ border-top:1px solid var(--border); }
.qa:last-child{ border-bottom:1px solid var(--border); }
.qa summary{ cursor:pointer; list-style:none; padding:22px 4px; display:flex; align-items:center; justify-content:space-between; gap:20px; font-family:var(--ff-disp); font-weight:500; font-size:clamp(17px,2vw,21px); }
.qa summary::-webkit-details-marker{ display:none; }
.qa summary .plus{ flex:none; width:24px; height:24px; position:relative; transition:transform .25s; color:var(--accent); }
.qa summary .plus::before,.qa summary .plus::after{ content:""; position:absolute; inset:0; margin:auto; background:currentColor; }
.qa summary .plus::before{ width:14px; height:2px; }
.qa summary .plus::after{ width:2px; height:14px; transition:opacity .2s; }
.qa[open] summary .plus{ transform:rotate(90deg); }
.qa[open] summary .plus::after{ opacity:0; }
.qa .ans{ padding:0 4px 24px; color:var(--dim); font-size:16px; max-width:68ch; }
.qa .ans a{ color:var(--accent); }

/* ── footer ───────────────────────────────────────────── */
footer{ border-top:1px solid var(--border); background:var(--bg-2); padding:56px 0 40px; }
.foot-grid{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:30px; }
.foot-cols{ display:flex; gap:60px; flex-wrap:wrap; }
.foot-col h5{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin:0 0 14px; }
.foot-col a{ display:block; color:var(--dim); font-size:14.5px; margin-bottom:10px; transition:color .2s; }
.foot-col a:hover{ color:var(--text); }
.foot-bottom{ display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center; margin-top:46px; padding-top:24px; border-top:1px solid var(--border); color:var(--faint); font-size:13px; font-family:var(--ff-mono); }

@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

/* emphasised words inside lead paragraphs (from CMS **bold**) */
.lead strong{ color:var(--text); font-weight:600; }

/* ── legal pages (privacy / eula) ─────────────────────── */
.legal{ max-width:760px; margin-inline:auto; }
.legal h1{ font-size:clamp(30px,5vw,46px); margin:0 0 8px; }
.legal .updated{ font-family:var(--ff-mono); font-size:12.5px; color:var(--faint); letter-spacing:.04em; margin-bottom:34px; }
.legal h2{ font-size:21px; margin:34px 0 10px; }
.legal p, .legal li{ color:var(--dim); line-height:1.7; font-size:15.5px; }
.legal ul{ padding-left:20px; }
.legal li{ margin:6px 0; }
.legal a{ color:var(--accent); }
.legal strong{ color:var(--text); font-weight:600; }
.back{ display:inline-flex; align-items:center; gap:8px; margin-bottom:30px; font-family:var(--ff-mono); font-size:12.5px; color:var(--faint); }

/* ── changelog ────────────────────────────────────────── */
.changelog{ max-width:760px; margin-inline:auto; }
.changelog h1{ font-size:clamp(30px,5vw,46px); margin:0 0 8px; }
.changelog .updated{ font-family:var(--ff-mono); font-size:12.5px; color:var(--faint); letter-spacing:.04em; margin-bottom:34px; }
.changelog .empty{ color:var(--dim); }
.release{ padding:26px 0; border-top:1px solid var(--border); }
.release:first-of-type{ border-top:0; }
.release-h{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.release-h h1{ margin:0; }
.release-h h2{ font-family:var(--ff-disp); font-size:24px; font-weight:600; margin:0; }
.release-h h2 a{ color:var(--text); }
.release-h h2 a:hover{ color:var(--accent); }
.release-h .ver{ font-family:var(--ff-mono); font-size:12px; letter-spacing:.06em; color:var(--accent); border:1px solid color-mix(in oklab, var(--accent) 30%, transparent); padding:2px 9px; border-radius:999px; }
.release-date{ font-family:var(--ff-mono); font-size:12.5px; color:var(--faint); margin:6px 0 14px; }
.release-body{ color:var(--dim); line-height:1.7; font-size:15.5px; }
.release-body p{ margin:0 0 12px; }
.release-body ul{ padding-left:20px; margin:0 0 12px; }
.release-body li{ margin:6px 0; }
.release-body a{ color:var(--accent); }
.release-body strong{ color:var(--text); font-weight:600; }
.release-dl{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:18px; }
.dl-note{ font-family:var(--ff-mono); font-size:12.5px; color:var(--faint); }

/* ── user guide / docs (SEB-268) ──────────────────────── */
.docs-intro{ max-width:880px; margin-inline:auto; }
.docs-intro h1{ font-size:clamp(30px,5vw,46px); margin:0 0 8px; }
.docs-intro .updated{ font-family:var(--ff-mono); font-size:12.5px; color:var(--faint); letter-spacing:.04em; margin-bottom:34px; }
.docs-intro .empty{ color:var(--dim); }
.docs-cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:18px; }
.doc-card{ display:flex; flex-direction:column; padding:22px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--bg-2); transition:border-color .2s, transform .2s; }
.doc-card:hover{ border-color:color-mix(in oklab, var(--accent) 45%, var(--border)); transform:translateY(-2px); }
.doc-card h2{ font-family:var(--ff-disp); font-size:19px; font-weight:600; margin:0 0 8px; color:var(--text); }
.doc-card p{ color:var(--dim); line-height:1.6; font-size:14.5px; margin:0 0 16px; flex:1; }
.doc-card-go{ display:inline-flex; align-items:center; gap:7px; font-family:var(--ff-mono); font-size:12.5px; letter-spacing:.04em; color:var(--accent); }
.doc-card-go svg{ width:15px; height:15px; }

.docs-layout{ display:grid; grid-template-columns:230px minmax(0,1fr); gap:48px; align-items:start; }
.docs-side{ position:sticky; top:90px; }
.docs-nav{ display:flex; flex-direction:column; margin-top:18px; border-left:1px solid var(--border); }
.docs-nav a{ padding:8px 14px; font-size:14.5px; color:var(--dim); border-left:2px solid transparent; margin-left:-1px; transition:color .2s, border-color .2s; }
.docs-nav a:hover{ color:var(--text); }
.docs-nav a.active{ color:var(--text); border-left-color:var(--accent); font-weight:600; }

.docs-article{ max-width:760px; min-width:0; }
.docs-article h1{ font-size:clamp(28px,4.4vw,42px); margin:0 0 10px; }
.docs-summary{ color:var(--faint); font-size:16px; line-height:1.6; margin:0 0 28px; }
.docs-toc{ border:1px solid var(--border); border-radius:var(--r-md); background:var(--bg-2); padding:16px 20px; margin:0 0 30px; }
.docs-toc h2{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin:0 0 10px; }
.docs-toc ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:7px; }
.docs-toc a{ color:var(--dim); font-size:14px; }
.docs-toc a:hover{ color:var(--accent); }

.docs-body{ color:var(--dim); line-height:1.75; font-size:15.5px; }
.docs-body h2{ font-family:var(--ff-disp); font-size:24px; font-weight:600; color:var(--text); margin:38px 0 12px; scroll-margin-top:90px; }
.docs-body h3{ font-family:var(--ff-disp); font-size:18px; font-weight:600; color:var(--text); margin:26px 0 10px; scroll-margin-top:90px; }
.docs-body p{ margin:0 0 14px; }
.docs-body ul, .docs-body ol{ padding-left:22px; margin:0 0 14px; }
.docs-body li{ margin:7px 0; }
.docs-body a{ color:var(--accent); }
.docs-body strong{ color:var(--text); font-weight:600; }
.docs-body code{ font-family:var(--ff-mono); font-size:.86em; background:color-mix(in oklab, var(--accent) 12%, var(--bg-2)); border:1px solid var(--border); border-radius:6px; padding:2px 6px; color:var(--text); }
.docs-body pre{ background:var(--bg-2); border:1px solid var(--border); border-radius:var(--r-md); padding:16px 18px; overflow:auto; margin:0 0 16px; }
.docs-body pre code{ background:none; border:0; padding:0; font-size:13px; color:var(--dim); }
.docs-body blockquote{ border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:var(--r-md); background:color-mix(in oklab, var(--accent) 7%, var(--bg-2)); padding:4px 18px; margin:0 0 18px; }
.docs-body blockquote p{ margin:12px 0; color:var(--text); }
.docs-body img{ max-width:100%; height:auto; display:block; border:1px solid var(--border); border-radius:var(--r-md); margin:6px 0 18px; }
.docs-body figure{ margin:0 0 18px; }
.docs-body figcaption{ font-family:var(--ff-mono); font-size:12px; color:var(--faint); margin-top:8px; letter-spacing:.03em; }
.docs-body table{ width:100%; border-collapse:collapse; margin:0 0 18px; font-size:14.5px; }
.docs-body th, .docs-body td{ border:1px solid var(--border); padding:8px 12px; text-align:left; }
.docs-body th{ color:var(--text); font-weight:600; background:var(--bg-2); }
.docs-body hr{ border:0; border-top:1px solid var(--border); margin:28px 0; }

.docs-prevnext{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:48px; padding-top:24px; border-top:1px solid var(--border); }
.docs-prevnext .pn{ display:flex; flex-direction:column; gap:4px; padding:12px 18px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--bg-2); transition:border-color .2s; max-width:48%; }
.docs-prevnext .pn:hover{ border-color:color-mix(in oklab, var(--accent) 45%, var(--border)); }
.docs-prevnext .pn.next{ text-align:right; margin-left:auto; align-items:flex-end; }
.docs-prevnext .pn-dir{ font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.05em; color:var(--faint); }
.docs-prevnext .pn-title{ color:var(--text); font-size:15px; font-weight:600; }

@media (max-width:860px){
  .docs-layout{ grid-template-columns:1fr; gap:24px; }
  .docs-side{ position:static; }
  .docs-nav{ flex-flow:row wrap; border-left:0; gap:6px; }
  .docs-nav a{ border:1px solid var(--border); border-radius:999px; padding:6px 13px; margin-left:0; }
  .docs-nav a.active{ border-color:var(--accent); }
}