@font-face {
  font-family:"Bricolage Grotesque";
  /* Partial instance: wdth 96-100, wght 600-800, latin glyphs only - the
     only ranges this stylesheet uses (.h1 760/96 ... .q-a p 600). 116KB
     instead of 204KB; opsz is kept so every size renders as before. */
  src:url("/assets/fonts/BricolageGrotesque-latin.woff2") format("woff2");
  font-weight:600 800; font-stretch:96% 100%; font-style:normal; font-display:swap;
}
@font-face {
  font-family:"DM Sans";
  src:url("/assets/fonts/DMSans-latin.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:"Geist Mono";
  src:url("/assets/fonts/GeistMono-latin.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  --bg:#FFFFFF;
  --surface:#F5F5F2;
  --surface-2:#ECECE7;
  --line:rgba(12,12,14,.08);
  --line-strong:rgba(12,12,14,.14);
  --ink:#0C0C0E;
  --ink-2:#4F4F56;
  --ink-3:#6A6A72;       /* 5.3:1 on white */
  --dark:#0C0C0E;
  /* The app's five screen palettes (DesignTokens.Palettes) — used as
     accents only, never as text on white. */
  --lime:#D8F24B; --blue:#2F45FF; --orange:#F2542D; --purple:#7A5AF8; --green:#0F3B33;
  --radius:28px;
  --radius-sm:18px;
  --navH:72px;
  --shadow-sm:0 1px 2px rgba(12,12,14,.04), 0 4px 14px rgba(12,12,14,.05);
  --shadow-md:0 2px 6px rgba(12,12,14,.04), 0 18px 48px rgba(12,12,14,.10);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);   /* long, soft settle — the apple.com feel */
  --display:"Bricolage Grotesque", "DM Sans", system-ui, sans-serif;
  --text:"DM Sans", system-ui, -apple-system, sans-serif;
  --mono:"Geist Mono", ui-monospace, Menlo, monospace;
}

*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--navH) + 12px); }
main { overflow-x:clip; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--text); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
:focus-visible { outline:2.5px solid var(--ink); outline-offset:3px; border-radius:8px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.skip { position:absolute; left:-9999px; }
.skip:focus { left:20px; top:14px; z-index:80; background:var(--ink); color:#fff; padding:12px 18px; border-radius:999px; font-weight:600; }

.wrap { width:100%; max-width:1200px; margin:0 auto; padding:0 24px; }
.sec { padding:clamp(80px,10vw,140px) 0; }
.sec--surface { background:var(--surface); }

/* ── Type ───────────────────────────────────────────────────────────────── */
h1,h2,h3 { font-family:var(--display); font-weight:700; margin:0; text-wrap:balance; }
.h1 { font-size:clamp(46px,6.6vw,92px); line-height:.98; letter-spacing:-.04em;
      font-variation-settings:"wdth" 96, "wght" 760; }
.h2 { font-size:clamp(36px,4.6vw,62px); line-height:1.02; letter-spacing:-.035em;
      font-variation-settings:"wdth" 96, "wght" 740; }
.h3 { font-size:clamp(22px,1.9vw,27px); line-height:1.15; letter-spacing:-.022em;
      font-variation-settings:"wdth" 100, "wght" 700; }
.sub { font-size:clamp(18px,1.5vw,21px); line-height:1.55; color:var(--ink-2); max-width:56ch; margin:20px 0 0; text-wrap:pretty; }
.muted { color:var(--ink-3); }
.kicker {
  display:inline-flex; align-items:center; gap:8px; margin:0 0 20px;
  font-size:14px; font-weight:600; letter-spacing:-.005em; color:var(--ink-2);
}
.kicker::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 3px rgba(216,242,75,.35); }
.sec-head { max-width:760px; margin-bottom:clamp(40px,5vw,64px); }
.sec-head--center { margin-left:auto; margin-right:auto; text-align:center; }
.sec-head--center .sub { margin-left:auto; margin-right:auto; }
.sec-head--row { max-width:none; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.sec-head--row > div { max-width:720px; }
/* Lime marker behind a phrase — the one bit of colour in a headline. */
.hl { background:linear-gradient(transparent 58%, var(--lime) 58%, var(--lime) 92%, transparent 92%) no-repeat left / 100% 100%;
      padding:0 .06em; -webkit-box-decoration-break:clone; box-decoration-break:clone; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--text); font-weight:600; font-size:16.5px; letter-spacing:-.01em; line-height:1.2;
  padding:16px 26px; border-radius:999px; border:1px solid transparent; cursor:pointer;
  transition:transform .18s var(--ease), background-color .18s, border-color .18s, box-shadow .18s;
  white-space:nowrap;
}
.btn svg { width:18px; height:18px; flex:none; }
.btn--primary { background:var(--ink); color:#fff; box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 8px 22px rgba(12,12,14,.18); }
.btn--primary:hover { transform:translateY(-1px); box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 12px 30px rgba(12,12,14,.26); }
.btn--ghost { background:#fff; color:var(--ink); border-color:var(--line-strong); }
.btn--ghost:hover { background:var(--surface); transform:translateY(-1px); }
.btn--lime { background:var(--lime); color:var(--ink); }
.btn--lime:hover { transform:translateY(-1px); box-shadow:0 12px 30px rgba(216,242,75,.35); }
.btn--sm { padding:11px 18px; font-size:15px; }
.btn--wide { width:100%; }

/* Official Apple badge, native aspect ratio, never restyled. */
.badge-link { display:inline-flex; border-radius:12px; transition:transform .18s var(--ease); }
.badge-link:hover { transform:translateY(-1px); }
.appstore-badge { display:block; width:180px; height:60px; }

/* ── Nav ────────────────────────────────────────────────────────────────── */
.nav { position:fixed; top:0; left:0; right:0; z-index:50; height:var(--navH);
  transition:background-color .25s, box-shadow .25s, border-color .25s; border-bottom:1px solid transparent; }
.nav.stuck { background:rgba(255,255,255,.78); border-bottom-color:var(--line);
  -webkit-backdrop-filter:saturate(180%) blur(18px); backdrop-filter:saturate(180%) blur(18px); }
.nav-in { height:var(--navH); display:flex; align-items:center; justify-content:space-between; gap:24px; }
.nav-logo img { height:34px; width:auto; }
.nav-links { display:flex; align-items:center; gap:6px; }
.nav-links a:not(.btn) { padding:9px 14px; border-radius:999px; font-size:15px; font-weight:500; color:var(--ink-2); transition:color .15s, background-color .15s; }
.nav-links a:not(.btn):hover { color:var(--ink); background:var(--surface); }
.nav-links a.active { color:var(--ink); background:var(--surface); }
.nav-links .btn { margin-left:10px; }
.nav-burger { display:none; width:44px; height:44px; border-radius:999px; border:1px solid var(--line-strong); background:#fff; color:var(--ink); cursor:pointer; place-items:center; }
.nav-sheet { display:none; }
@media (max-width:880px) {
  .nav-links { display:none; }
  .nav-burger { display:grid; }
  .nav-sheet { position:absolute; left:16px; right:16px; top:calc(var(--navH) - 4px);
    display:flex; flex-direction:column; gap:2px; padding:10px; border-radius:22px; background:#fff;
    box-shadow:var(--shadow-md); border:1px solid var(--line);
    opacity:0; transform:translateY(-8px); pointer-events:none; visibility:hidden;
    transition:opacity .2s, transform .2s var(--ease), visibility 0s .2s; }
  .nav-sheet.open { opacity:1; transform:none; pointer-events:auto; visibility:visible; transition:opacity .2s, transform .2s var(--ease); }
  .nav-sheet a:not(.btn) { padding:14px 16px; border-radius:14px; font-size:17px; font-weight:500; }
  .nav-sheet a:not(.btn):hover { background:var(--surface); }
  .nav-sheet .btn { margin-top:6px; }
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero { position:relative; padding:calc(var(--navH) + clamp(28px,5vw,64px)) 0 clamp(56px,7vw,96px); overflow:hidden; isolation:isolate; }
/* Soft palette mesh behind the phone — the app's own five colours, blurred. */
.hero::before { content:""; position:absolute; z-index:-1; inset:-20% -10% auto auto; width:min(900px,90vw); height:900px;
  background:
    radial-gradient(closest-side at 62% 38%, rgba(216,242,75,.55), transparent 70%),
    radial-gradient(closest-side at 38% 58%, rgba(122,90,248,.22), transparent 72%),
    radial-gradient(closest-side at 72% 72%, rgba(47,69,255,.16), transparent 70%),
    radial-gradient(closest-side at 30% 25%, rgba(242,84,45,.14), transparent 70%);
  filter:blur(20px); pointer-events:none; }
.hero-grid { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(32px,5vw,72px); align-items:center; }
.hero-pill { display:inline-flex; align-items:center; gap:10px; padding:6px 14px 6px 6px; border-radius:999px;
  background:#fff; border:1px solid var(--line-strong); box-shadow:var(--shadow-sm);
  font-size:14px; font-weight:500; color:var(--ink-2); margin-bottom:28px; }
/* Crimson (2026-09-23, direct instruction) — white on #DC143C is 4.7:1. */
.hero-pill b { background:#DC143C; color:#fff; box-shadow:0 4px 12px rgba(220,20,60,.28); font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px; letter-spacing:.01em; }
.hero .sub { font-size:clamp(18px,1.55vw,21px); margin-top:26px; max-width:40ch; }
.hero-cta { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:36px; }
.hero-cta .btn { height:60px; padding:0 26px; }
.trust { display:flex; flex-wrap:wrap; gap:10px 22px; margin:28px 0 0; padding:0; list-style:none; font-size:15px; color:var(--ink-2); }
.trust li { display:inline-flex; align-items:center; gap:8px; }
.trust svg { width:18px; height:18px; flex:none; padding:3px; border-radius:50%; background:var(--ink); color:var(--lime); }
.hero-stage { position:relative; display:flex; flex-direction:column; align-items:center; }
/* Floating context chips around the phone — they narrate the product
   ("lyrics first", "their name in the chorus") without another section. */
.chip-float { position:absolute; z-index:4; display:flex; align-items:center; gap:10px; padding:10px 14px 10px 10px; border-radius:18px;
  background:rgba(255,255,255,.86); border:1px solid rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 10px 30px rgba(12,12,14,.12); font-size:13.5px; line-height:1.3; color:var(--ink-2); white-space:nowrap; }
.chip-float b { display:block; color:var(--ink); font-size:14.5px; font-weight:600; }
.chip-float i { width:34px; height:34px; border-radius:11px; display:grid; place-items:center; flex:none; font-style:normal; }
.chip-float svg { width:18px; height:18px; }
.chip-float--a { top:24%; left:-8%; }
.chip-float--a i { background:var(--lime); color:var(--ink); }
.chip-float--b { top:56%; right:-8%; }
.chip-float--b i { background:var(--purple); color:#fff; }
html.js .chip-float { animation:floaty 6s ease-in-out infinite; }
html.js .chip-float--b { animation-delay:-3s; }
@keyframes floaty { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }
@media (max-width:1100px) { .chip-float--a { left:-2%; } .chip-float--b { right:-2%; } }
@media (max-width:960px) {
  .hero-grid { grid-template-columns:minmax(0,1fr); text-align:center; }
  .hero-copy { display:flex; flex-direction:column; align-items:center; }
  .hero .sub { margin-left:auto; margin-right:auto; }
  .hero-cta, .trust { justify-content:center; }
  .hero::before { inset:30% -30% auto -30%; width:auto; }
}
@media (max-width:520px) {
  .chip-float { display:none; }
  .hero-cta { flex-direction:column; gap:12px; }
  .hero-cta .btn { height:52px; }
}

/* ── Device frame ─────────────────────────────────────────────────────────
   The real iPhone bezel (assets/iphone-bezel.webp, transparent screen)
   laid OVER a screen box. Measured off the bezel: screen inset 75/1470 at
   the sides and 66/3000 top and bottom, 14.4% x 6.63% corner radius.
   container-type lets the player inside size itself in cqw. */
:root { --device-w:min(300px, 74vw); }
@media (min-width:961px) { :root { --device-w:min(330px, calc((100vh - var(--navH) - 172px) * .49)); } }
.device { position:relative; width:var(--device-w); max-width:100%; aspect-ratio:1470/3000; margin:0 auto; }
.device-screen { position:absolute; left:5.03%; right:5.03%; top:2.17%; bottom:2.17%;
  border-radius:14.4% / 6.63%; overflow:hidden; background:#000; isolation:isolate; container-type:inline-size; }
.device-bezel { position:absolute; inset:0; width:100%; height:100%; z-index:3; pointer-events:none; user-select:none; }
.hero .device { filter:drop-shadow(0 40px 60px rgba(12,12,14,.22)) drop-shadow(0 8px 16px rgba(12,12,14,.10)); }

/* ── Song player (inside the hero device) ─────────────────────────────── */
.sp-frame {
  position:absolute; inset:0; display:flex; flex-direction:column;
  padding:15cqw 6.5cqw 7cqw;
  background:var(--sp-bg); color:var(--sp-fg); text-align:left;
  transition:background .3s ease, color .3s ease;
}
.sp-status { position:absolute; left:0; right:0; top:4.6cqw; height:5.6cqw; padding:0 7.5cqw 0 10cqw;
  display:flex; align-items:center; justify-content:space-between;
  font-size:4.7cqw; font-weight:600; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.sp-status-r { display:flex; align-items:center; gap:1.6cqw; }
.sp-status-r svg { height:3.5cqw; width:auto; display:block; }
.sp-top { display:flex; align-items:center; justify-content:space-between; flex:none; }
.sp-logo { height:8.6cqw; width:auto; display:block; }
.sp-art { flex:none; aspect-ratio:1/1; margin-top:6cqw; border-radius:7.5cqw; overflow:hidden; position:relative;
  background:color-mix(in srgb, var(--sp-fg) 8%, transparent); }
.sp-art img { width:100%; height:100%; object-fit:cover; display:block; }
.sp-art::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28), inset 0 1.5px 0 rgba(255,255,255,.5);
  background:linear-gradient(150deg, rgba(255,255,255,.20), transparent 36%); }
.sp-wave { flex:none; display:flex; align-items:flex-end; gap:.35cqw; height:10.5cqw; margin-top:7cqw; cursor:pointer; touch-action:none; user-select:none; }
.sp-bar { flex:1; border-radius:999px; background:color-mix(in srgb, var(--sp-fg) 24%, transparent);
  pointer-events:none; transform-origin:bottom; will-change:transform; }
.sp-bar.played { background:var(--sp-fg); }
.sp-time { flex:none; display:flex; justify-content:space-between; font-family:var(--mono); font-size:3.4cqw; letter-spacing:.04em; opacity:.6; margin-top:2.4cqw; font-variant-numeric:tabular-nums; }
.sp-row { flex:none; display:flex; align-items:center; gap:3cqw; margin-top:4.5cqw; }
.sp-play { position:relative; flex:0 0 auto; width:13cqw; height:17cqw; margin-left:-3cqw;
  border:0; background:none; padding:0; cursor:pointer; color:var(--sp-fg);
  display:flex; align-items:center; justify-content:flex-start; }
.sp-play svg { width:15cqw; height:15cqw; }
.sp-titleblock { flex:1; min-width:0; text-align:left; }
.sp-title { margin:0; font-family:var(--display); font-size:6.1cqw; font-weight:700; letter-spacing:-.02em; line-height:1.15;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sp-for { margin:1.2cqw 0 0; font-size:4.6cqw; opacity:.55; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* "Open the full song" as a round glass icon in the top bar, where the app
   keeps its own circle buttons. */
.sp-full { flex:none; width:11cqw; height:11cqw; border-radius:50%; display:grid; place-items:center; color:var(--sp-fg);
  background:rgba(255,255,255,.24);
  -webkit-backdrop-filter:blur(12px) saturate(180%); backdrop-filter:blur(12px) saturate(180%);
  border:1px solid rgba(255,255,255,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 4px 12px rgba(0,0,0,.12);
  transition:transform .18s var(--ease), background-color .18s; }
.sp-full svg { width:5.4cqw; height:5.4cqw; }
.sp-full:hover { transform:scale(1.08); background:rgba(255,255,255,.36); }

/* Carousel strip under the phone: prev/next + round cover thumbnails. */
.sp-nav { display:flex; align-items:center; justify-content:center; width:min(440px,100%); margin:22px auto 0; }
.sp-dots { flex:1; min-width:0; display:flex; justify-content:center; align-items:center; gap:10px; padding:4px 2px; }
/* JS shows five at a time (see setActiveDot); without JS the strip just
   scrolls. Neighbours fade with distance from the middle. */
html:not(.js) .sp-dots { justify-content:flex-start; overflow-x:auto; scrollbar-width:none; }
.sp-dot[hidden] { display:none; }
.sp-dot[data-off="1"] { opacity:.75; }
.sp-dot[data-off="2"] { opacity:.5; transform:scale(.92); }
.sp-dot[data-off="3"] { opacity:.28; transform:scale(.84); }
@media (max-width:420px) { .sp-dots { gap:6px; } .sp-dot { width:38px; height:38px; } }
.sp-dots::-webkit-scrollbar { display:none; }
.sp-dot { flex:0 0 auto; width:46px; height:46px; border-radius:50%; padding:0; border:2px solid #fff;
  overflow:hidden; cursor:pointer; opacity:.55; scroll-snap-align:center; box-shadow:0 0 0 1px var(--line-strong);
  transition:opacity .18s, box-shadow .18s, transform .18s; background:var(--surface); }
.sp-dot img { width:100%; height:100%; object-fit:cover; display:block; }
.sp-dot:hover { opacity:.85; }
.sp-dot.active { opacity:1; box-shadow:0 0 0 2px var(--ink); transform:scale(1.14); }

/* ── Occasion marquee ──────────────────────────────────────────────────── */
.ticker { border-block:1px solid var(--line); padding:22px 0; overflow:hidden; display:flex; align-items:center; gap:28px; }
.ticker-label { flex:none; padding-left:max(24px, calc((100vw - 1200px) / 2 + 24px)); font-size:14px; font-weight:600; color:var(--ink-3); white-space:nowrap; }
.ticker-mask { flex:1; min-width:0; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker-track { display:flex; width:max-content; animation:tick 40s linear infinite; }
.ticker-set { display:flex; }
.ticker-item { display:inline-flex; align-items:center; gap:28px; padding-right:28px; font-family:var(--display);
  font-size:clamp(20px,2vw,26px); font-weight:650; letter-spacing:-.02em; white-space:nowrap; color:var(--ink); }
.ticker-dot { width:6px; height:6px; border-radius:50%; background:var(--ink); opacity:.2; }
@keyframes tick { to { transform:translateX(-50%); } }
@media (max-width:640px) { .ticker-label { display:none; } }

/* ── How it works ──────────────────────────────────────────────────────── */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; counter-reset:step; }
.step { position:relative; display:flex; flex-direction:column; background:var(--surface); border-radius:var(--radius); overflow:hidden; padding:30px 30px 0; min-height:560px; }
.step-n { display:inline-grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--ink); color:#fff;
  font-family:var(--mono); font-size:13px; font-weight:600; margin-bottom:22px; }
.step p { margin:10px 0 0; color:var(--ink-2); font-size:16.5px; max-width:34ch; }
.step-shot { margin-top:auto; padding-top:32px; display:flex; justify-content:center; }
.step-shot img { width:74%; border-radius:26px 26px 0 0; border:7px solid #111; border-bottom:0;
  box-shadow:0 -6px 40px rgba(12,12,14,.14); height:auto; aspect-ratio:690/960; object-fit:cover; object-position:top; }
.step:nth-child(1) .step-shot { background:linear-gradient(180deg, transparent 30%, rgba(216,242,75,.35)); }
.step:nth-child(2) .step-shot { background:linear-gradient(180deg, transparent 30%, rgba(122,90,248,.18)); }
.step:nth-child(3) .step-shot { background:linear-gradient(180deg, transparent 30%, rgba(242,84,45,.16)); }
.step-shot { margin-left:-30px; margin-right:-30px; }
@media (max-width:960px) {
  .steps { grid-template-columns:1fr; max-width:520px; margin:0 auto; }
  .step { min-height:0; }
}

/* ── Song gallery ──────────────────────────────────────────────────────── */
.rail-ctrl { display:flex; gap:8px; }
.rail-ctrl button { width:48px; height:48px; border-radius:50%; border:1px solid var(--line-strong); background:#fff; color:var(--ink);
  cursor:pointer; display:grid; place-items:center; transition:background .15s, transform .15s; }
.rail-ctrl button:hover:not(:disabled) { background:var(--surface); transform:scale(1.04); }
.rail-ctrl button:disabled { opacity:.35; cursor:default; }
.rail { display:grid; grid-auto-flow:column; grid-auto-columns:clamp(236px,22vw,272px); gap:20px;
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain;
  padding:4px max(24px, calc((100vw - 1200px) / 2 + 24px)) 12px;
  scroll-padding-inline:max(24px, calc((100vw - 1200px) / 2 + 24px)); }
.rail::-webkit-scrollbar { display:none; }
.song { scroll-snap-align:start; position:relative; }
.song-art { cursor:pointer; position:relative; aspect-ratio:1/1; border-radius:22px; overflow:hidden; background:var(--surface); box-shadow:var(--shadow-sm); }
.song-art img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.song:hover .song-art img { transform:scale(1.04); }
.song-play { position:absolute; right:14px; bottom:14px; width:56px; height:56px; padding:0; border-radius:50%; border:0; cursor:pointer;
  display:grid; place-items:center; background:var(--sg-cbg); color:var(--sg-cfg);
  box-shadow:0 8px 20px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.25); transition:transform .18s var(--ease); }
.song-play:hover { transform:scale(1.08); }
/* Icons sit in block-level spans (an inline span adds a baseline gap that
   pushed the glyph off-centre). The play path is already drawn right of
   its viewBox centre (x 8-19 of 24), which lands its centroid on the
   button's centre — so no extra nudge. */
.song-play .i-play, .song-play .i-pause { display:grid; place-items:center; width:34px; height:34px; }
.song-play svg { width:34px; height:34px; display:block; }
.song-play .i-pause { display:none; }
.song.playing .song-play .i-play { display:none; }
.song.playing .song-play .i-pause { display:grid; }
.song.playing .song-art { box-shadow:0 0 0 3px var(--ink), var(--shadow-md); }
.song-meta { padding:14px 4px 0; }
.song-t { display:block; font-weight:600; font-size:16.5px; letter-spacing:-.01em; line-height:1.3; }
.song-t:hover { text-decoration:underline; text-underline-offset:3px; }
.song-f { margin:4px 0 0; font-size:14.5px; color:var(--ink-3); }
.eq { display:none; gap:2px; align-items:flex-end; height:12px; margin-right:6px; vertical-align:-1px; }
.eq i { width:3px; background:var(--ink); border-radius:2px; animation:eq 1s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay:-.4s; } .eq i:nth-child(3) { animation-delay:-.7s; }
.song.playing .eq { display:inline-flex; }
@keyframes eq { 0%,100% { height:30%; } 50% { height:100%; } }

/* ── Bento features ────────────────────────────────────────────────────── */
.bento { display:grid; grid-template-columns:repeat(6,1fr); gap:20px; }
.tile { position:relative; overflow:hidden; border-radius:var(--radius); padding:clamp(26px,3vw,40px); background:var(--surface); min-height:300px;
  display:flex; flex-direction:column; }
.tile p { margin:12px 0 0; color:var(--ink-2); font-size:16.5px; max-width:40ch; }
.tile--text { min-height:0; }
.tile--4 { grid-column:span 4; } .tile--3 { grid-column:span 3; } .tile--2 { grid-column:span 2; }
.tile--dark { background:var(--dark); color:#fff; }
.tile--dark p { color:rgba(255,255,255,.7); }
.tile--lime { background:var(--lime); }
.tile--lime p { color:rgba(12,12,14,.72); }
.tile-visual { margin-top:auto; padding-top:28px; }
.name-demo { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.name-demo .nm { font-family:var(--display); font-size:clamp(40px,5vw,68px); font-weight:760; letter-spacing:-.04em; line-height:1; }
.name-demo { flex-wrap:nowrap; gap:14px; }
.name-demo .wv { flex:1; min-width:0; height:88px; overflow:visible; }
@media (max-width:640px) { .name-demo { flex-wrap:wrap; } .name-demo .wv { flex-basis:100%; height:72px; } }
.name-demo .wv path { fill:none; vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round; }
.name-demo .wv path:nth-child(2) { opacity:.85; } .name-demo .wv path:nth-child(3) { opacity:.75; }
.langs { display:flex; flex-wrap:wrap; gap:8px; }
.langs span { padding:8px 14px; border-radius:999px; background:rgba(255,255,255,.62); font-size:15px; font-weight:500; }
/* Share-link preview, the way the link unfurls in a chat. */
.share-card { padding:12px; border-radius:18px; background:#fff; box-shadow:var(--shadow-sm); }
.sc-row { display:flex; align-items:center; gap:12px; }
.keep-edit { margin-top:12px; }
.lyric-edit span { display:inline-flex; align-items:center; gap:6px; }
.lyric-edit svg { width:15px; height:15px; }
/* "Your song" card: a bar that fills on reveal, then the check lands. */
.gen-bar { display:block; height:8px; margin:6px 0 14px; border-radius:99px; background:rgba(12,12,14,.08); overflow:hidden; }
.gen-bar i { display:block; height:100%; width:100%; border-radius:inherit; background:linear-gradient(90deg, var(--lime), #B6D82E); transform-origin:left; }
.gen-time { display:flex; align-items:center; gap:8px; font-size:15px; font-weight:600; color:var(--ink); }
.gen-time svg { width:20px; height:20px; padding:4px; border-radius:50%; background:var(--ink); color:var(--lime); flex:none; }
html.js .gen-bar i { transform:scaleX(0); transition:transform 1.8s var(--ease-out) .3s; }
html.js .tile.in .gen-bar i { transform:none; }
html.js .gen-time { opacity:0; transform:translateY(6px); transition:opacity .5s var(--ease-out) 1.6s, transform .6s var(--ease-out) 1.6s; }
html.js .tile.in .gen-time { opacity:1; transform:none; }
.share-card img { width:56px; height:56px; border-radius:12px; object-fit:cover; flex:none; }
.sc-t { flex:1; min-width:0; line-height:1.3; }
.sc-t b { display:block; font-size:15px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sc-t span { font-size:13px; color:var(--ink-3); }
.sc-play { width:38px; height:38px; border-radius:50%; flex:none; display:grid; place-items:center; background:var(--purple); color:#fff; }
.sc-play svg { width:16px; height:16px; }
html.js .share-card { opacity:0; transform:translateY(16px) scale(.97); transition:opacity .6s var(--ease-out) .2s, transform .9s var(--ease-out) .2s; }
html.js .tile.in .share-card { opacity:1; transform:none; }

.lyric-card { background:#fff; border-radius:18px; padding:18px 20px; box-shadow:var(--shadow-sm); font-size:15px; line-height:1.55; color:var(--ink-2); }
.lyric-card b { display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:500; margin-bottom:6px; }
/* One line, always — ellipsis if a narrow card ever squeezes it. */
.lyric-line { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lyric-card mark { background:linear-gradient(var(--lime),var(--lime)) no-repeat left / 100% 100%; color:var(--ink); padding:0 3px; border-radius:4px; }
.lyric-edit { margin-top:10px; display:flex; gap:8px; }
.lyric-edit span { padding:7px 12px; border-radius:999px; font-size:13.5px; font-weight:600; background:var(--ink); color:#fff; }
.lyric-edit span + span { background:#fff; color:var(--ink); border:1px solid var(--line-strong); }
@media (max-width:960px) {
  .bento { grid-template-columns:1fr 1fr; }
  .tile--4, .tile--3 { grid-column:span 2; } .tile--2 { grid-column:span 1; }
}
@media (max-width:640px) {
  .bento { grid-template-columns:1fr; }
  .tile--4, .tile--3, .tile--2 { grid-column:span 1; }
  .tile { min-height:0; }
}

/* ── Song builder ──────────────────────────────────────────────────────── */
.builder { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(24px,4vw,56px); align-items:start; }
.controls { display:flex; flex-direction:column; gap:26px; }
.grp { border:0; margin:0; padding:0; min-width:0; }
.grp-name { display:block; font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-bottom:12px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chips input { position:absolute; opacity:0; pointer-events:none; }
.chip { display:inline-flex; align-items:center; padding:10px 16px; border-radius:999px; font-size:15px; font-weight:500; cursor:pointer;
  background:#fff; border:1px solid var(--line-strong); color:var(--ink); user-select:none;
  transition:background .15s, color .15s, border-color .15s, transform .15s; }
.chip:hover { border-color:var(--ink); }
.chips input:checked + .chip { background:var(--ink); color:#fff; border-color:var(--ink); }
.chips input:focus-visible + .chip { outline:2.5px solid var(--ink); outline-offset:2px; }
.name-in { width:100%; max-width:420px; font:inherit; font-size:20px; font-weight:500; padding:16px 20px; border-radius:16px;
  border:1px solid var(--line-strong); background:#fff; color:var(--ink); transition:border-color .15s, box-shadow .15s; }
.name-in::placeholder { color:var(--ink-3); }
.name-in:focus { outline:none; border-color:var(--ink); box-shadow:0 0 0 4px rgba(12,12,14,.08); }
.preview { position:sticky; top:calc(var(--navH) + 24px); background:var(--dark); color:#fff; border-radius:var(--radius); padding:28px; box-shadow:var(--shadow-md); }
.pv-top { display:flex; align-items:center; gap:18px; }
.pv-cover { width:88px; height:88px; border-radius:20px; overflow:hidden; flex:none; transition:transform .19s var(--ease); }
.pv-cover.bump { transform:scale(1.06); }
.pv-art { width:100%; height:100%; background:
  radial-gradient(circle at 30% 25%, rgba(255,255,255,.35), transparent 45%),
  linear-gradient(135deg, var(--c1,#E03820), var(--c2,#6D28D9)); transition:background .3s; }
.pv-style { font-family:var(--display); font-size:26px; font-weight:700; letter-spacing:-.025em; line-height:1.1; }
.pv-sub { margin-top:4px; font-size:15px; color:rgba(255,255,255,.62); }
.wave { display:flex; align-items:center; justify-content:space-between; height:88px; margin:26px 0 0; }
.wave i { flex:none; width:3px; border-radius:3px; transition:height .6s var(--ease-out), background .4s; }
.pv-brief { margin:22px 0 0; font-size:17px; line-height:1.5; color:rgba(255,255,255,.86); min-height:3em; }
.pv-meta { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.pv-tag { padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.1); font-size:13.5px; color:rgba(255,255,255,.82); }
.pv-foot { margin-top:26px; display:flex; flex-direction:column; gap:12px; }
.pv-count { font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:rgba(255,255,255,.5); text-align:center; }


/* ── Testimonials ──────────────────────────────────────────────────────── */
.quotes { display:grid; grid-template-columns:repeat(12,1fr); gap:20px; }
.quote { margin:0; border-radius:var(--radius); padding:clamp(26px,3vw,36px); background:#fff; border:1px solid var(--line);
  display:flex; flex-direction:column; justify-content:space-between; gap:28px; }
.quote p { margin:0; font-size:19px; line-height:1.45; letter-spacing:-.01em; }
.quote figcaption { display:flex; align-items:center; gap:12px; font-size:14.5px; color:var(--ink-3); line-height:1.35; }
.quote-who { color:var(--ink); font-weight:600; }
.q-av { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-weight:700; background:var(--surface); flex:none; }
.q-a { grid-column:span 6; grid-row:span 2; background:var(--dark); color:#fff; border-color:transparent; }
.q-a p { font-family:var(--display); font-size:clamp(26px,2.6vw,36px); line-height:1.18; letter-spacing:-.025em; font-weight:600; }
.q-a figcaption { color:rgba(255,255,255,.6); } .q-a .quote-who { color:#fff; } .q-a .q-av { background:var(--lime); color:var(--ink); }
.q-b { grid-column:span 6; }
.q-c { grid-column:span 3; background:var(--lime); border-color:transparent; }
.q-c figcaption { color:rgba(12,12,14,.65); } .q-c .q-av { background:#fff; }
.q-d { grid-column:span 3; }
.q-note { margin:18px 0 0; font-size:13.5px; color:var(--ink-3); }
@media (max-width:900px) { .q-a, .q-b { grid-column:span 12; grid-row:auto; } .q-c, .q-d { grid-column:span 6; } }
@media (max-width:600px) { .q-c, .q-d { grid-column:span 12; } }

/* ── Pricing ───────────────────────────────────────────────────────────── */
.free-banner { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  padding:clamp(24px,3vw,32px) clamp(24px,3vw,40px); border-radius:var(--radius); background:var(--lime); margin-bottom:20px; }
.free-banner h3 { font-size:clamp(24px,2.4vw,32px); letter-spacing:-.03em; }
.free-banner p { margin:6px 0 0; color:rgba(12,12,14,.72); }
.tiers { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.tier { position:relative; border-radius:var(--radius); padding:32px; background:#fff; border:1px solid var(--line-strong); display:flex; flex-direction:column; }
.tier-n { margin:0; font-size:16px; font-weight:600; color:var(--ink-2); }
.tier-p { margin:18px 0 0; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.tier-p b { font-family:var(--display); font-size:54px; font-weight:750; letter-spacing:-.045em; line-height:1; }
.tier-p span { font-size:15px; color:var(--ink-3); }
/* Every description is written to wrap to two lines; the min-height keeps
   the three cards level even if one wraps shorter, and pretty wrapping
   avoids a lone word on the last line. */
.tier-note { margin:14px 0 0; color:var(--ink-2); font-size:16px; line-height:1.55; min-height:3.1em; text-wrap:pretty; }
.tier ul { list-style:none; margin:24px 0 0; padding:24px 0 0; border-top:1px solid var(--line); display:grid; gap:10px; font-size:15.5px; }
.tier li { display:flex; gap:10px; align-items:center; }
.tier li svg { width:16px; height:16px; flex:none; }
.tier--best { background:var(--dark); color:#fff; border-color:transparent; box-shadow:0 30px 60px rgba(12,12,14,.22); }
.tier--best .tier-n, .tier--best .tier-note { color:rgba(255,255,255,.72); }
.tier--best .tier-p span { color:rgba(255,255,255,.55); }
.tier--best ul { border-top-color:rgba(255,255,255,.14); }
.tier--best li svg { color:var(--lime); }
.tier-badge { position:absolute; top:28px; right:28px; padding:5px 12px; border-radius:999px; background:var(--lime); color:var(--ink); font-size:13px; font-weight:700; }
.pricing-foot { margin:26px 0 0; text-align:center; font-size:15px; color:var(--ink-3); }
@media (max-width:900px) { .tiers { grid-template-columns:1fr; max-width:480px; margin:0 auto; } }

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.faq { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(32px,6vw,96px); align-items:start; }
.faq-head { position:sticky; top:calc(var(--navH) + 32px); }
.faq-head p { margin:18px 0 0; color:var(--ink-2); }
.faq-head a { font-weight:600; color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.qa { border-bottom:1px solid var(--line-strong); }
.qa:first-child { border-top:1px solid var(--line-strong); }
.qa summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 0; }
.qa summary::-webkit-details-marker { display:none; }
.qa h3 { font-family:var(--text); font-size:18.5px; font-weight:600; letter-spacing:-.012em; line-height:1.35; }
.qa-ico { width:32px; height:32px; border-radius:50%; flex:none; display:grid; place-items:center; background:var(--surface); transition:transform .25s var(--ease), background .2s; }
.qa-ico svg { width:14px; height:14px; }
.qa[open] .qa-ico { transform:rotate(45deg); background:var(--lime); }
.qa p { margin:0; padding:0 48px 26px 0; color:var(--ink-2); font-size:16.5px; }
@media (max-width:900px) { .faq { grid-template-columns:1fr; } .faq-head { position:static; } }

/* ── Closing CTA ───────────────────────────────────────────────────────── */
.close-sec { padding:0 0 clamp(64px,8vw,112px); }
.close { position:relative; overflow:hidden; isolation:isolate; border-radius:clamp(28px,3vw,40px); background:var(--dark); color:#fff;
  padding:clamp(56px,8vw,112px) clamp(24px,5vw,80px); text-align:center; }
.close-bg { position:absolute; inset:0; z-index:-2; background:url("/assets/band-close.jpg") center/cover no-repeat; opacity:.82; filter:saturate(1.08) brightness(1.1); transform:scale(1.15); will-change:transform; }
.close::after { content:""; position:absolute; inset:0; z-index:-1;
  /* Lighter than before (2026-09-24, "this image is too dark"): the photo
     shows through, and a soft oval scrim sits only behind the text to keep
     it readable. */
  background:radial-gradient(55% 60% at 50% 48%, rgba(12,12,14,.5), rgba(12,12,14,.12) 75%),
             linear-gradient(180deg, rgba(12,12,14,.05), rgba(12,12,14,.35)); }
.close .h2, .close-fine { text-shadow:0 2px 24px rgba(0,0,0,.45); }
.close .h2 { max-width:16ch; margin:0 auto; }
.close .sub { color:rgba(255,255,255,.76); margin-left:auto; margin-right:auto; text-align:center; }
.close-cta { margin-top:36px; display:flex; justify-content:center; }
.close .appstore-badge { width:210px; height:70px; }
.close-fine { margin:24px 0 0; font-size:14.5px; color:rgba(255,255,255,.85); }

/* ── Footer ────────────────────────────────────────────────────────────── */
.foot { border-top:1px solid var(--line); padding:40px 0 48px; }
.foot-in { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.foot-links, .foot-legal { display:flex; flex-wrap:wrap; gap:6px 24px; font-size:15px; color:var(--ink-2); }
.foot-links a:hover, .foot-legal a:hover { color:var(--ink); }
.foot-base { margin-top:28px; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.foot-fine { margin:0; font-size:14px; color:var(--ink-3); }
.foot-legal { font-size:14px; }

/* ── Sticky mobile CTA ─────────────────────────────────────────────────── */
.sticky-cta { position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); z-index:40; display:none;
  padding:8px; border-radius:999px; background:rgba(255,255,255,.82); border:1px solid var(--line);
  -webkit-backdrop-filter:blur(16px) saturate(180%); backdrop-filter:blur(16px) saturate(180%);
  box-shadow:0 12px 32px rgba(12,12,14,.16);
  transform:translateY(140%); transition:transform .3s var(--ease); }
.sticky-cta.show { transform:none; }
@media (max-width:880px) { .sticky-cta { display:block; } }


/* ── Section CTAs, pulse, close pill ──────────────────────────────────── */
.sec-cta { margin-top:clamp(36px,4vw,52px); display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px 18px; font-size:15px; }
/* "Hear an example" never changes size: the icon has a fixed box and both
   labels are stacked in one grid cell, the hidden one keeping its width. */
.hl-ico { position:relative; display:grid; place-items:center; width:18px; height:18px; flex:none; }
.hl-lbl { display:grid; }
.hl-lbl > span { grid-area:1 / 1; text-align:center; }
.hl-pause, #hero-listen.is-playing .hl-play { visibility:hidden; }
#hero-listen.is-playing .hl-pause { visibility:visible; }
/* Draws the eye to "Hear an example" until the first play. */
html.js .pulse > span:first-child::after { content:""; position:absolute; inset:-7px; border-radius:50%; border:2px solid var(--lime); animation:ring 2s ease-out infinite; }
@keyframes ring { 0% { transform:scale(.6); opacity:1; } 100% { transform:scale(1.5); opacity:0; } }
.close-pill { display:inline-block; margin:0 0 22px; padding:7px 14px; border-radius:999px; background:var(--lime); color:var(--ink); font-size:14px; font-weight:600; }

/* ── Mini player ───────────────────────────────────────────────────────
   Appears while a song is playing (or paused mid-song) and the hero phone
   is off screen, so a visitor can always pause without scrolling back. */
.mini { position:fixed; z-index:45; left:24px; bottom:24px; width:min(360px, calc(100vw - 24px)); overflow:hidden;
  display:flex; align-items:center; gap:12px; padding:10px 10px 12px; border-radius:20px;
  background:rgba(12,12,14,.92); color:#fff; box-shadow:0 18px 44px rgba(12,12,14,.28);
  -webkit-backdrop-filter:blur(16px) saturate(160%); backdrop-filter:blur(16px) saturate(160%);
  transform:translateY(calc(100% + 40px)); opacity:0; visibility:hidden;
  transition:transform .35s var(--ease), opacity .25s, visibility 0s .35s; }
.mini.show { transform:none; opacity:1; visibility:visible; transition:transform .35s var(--ease), opacity .25s; }
.mini-art { width:48px; height:48px; border-radius:12px; object-fit:cover; flex:none; }
.mini-t { flex:1; min-width:0; line-height:1.3; }
.mini-t b { display:block; font-size:15px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini-t span { display:block; font-size:13.5px; color:rgba(255,255,255,.6); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini-btn { flex:none; width:44px; height:44px; border-radius:50%; border:0; cursor:pointer; display:grid; place-items:center; background:var(--lime); color:var(--ink); }
.mini-btn svg { width:22px; height:22px; }
.mini-x { background:transparent; color:rgba(255,255,255,.7); width:36px; }
.mini-x svg { width:18px; height:18px; }
.mini-x:hover { color:#fff; }
.mini .mi-pause { display:none; }
.mini.playing .mi-pause { display:block; }
.mini.playing .mi-play { display:none; }
.mini-prog { position:absolute; left:0; bottom:0; height:3px; width:100%; background:var(--lime); transform-origin:left; transform:scaleX(0); }
@media (max-width:880px) {
  .mini { left:12px; right:12px; width:auto; bottom:calc(88px + env(safe-area-inset-bottom)); }
  body { padding-bottom:88px; }
}

/* ── Builder, compact sticky preview on small screens ─────────────────
   On a phone the preview would otherwise sit below every chip, so a tap
   changed nothing visible. It becomes a slim bar pinned under the nav. */
.build-cta-m { display:none; }
@media (max-width:960px) {
  .builder { display:flex; flex-direction:column; }
  .preview { order:-1; position:sticky; top:calc(var(--navH) + 8px); z-index:5; padding:14px 16px; border-radius:22px; }
  .pv-cover { width:56px; height:56px; border-radius:14px; }
  .pv-style { font-size:20px; }
  .pv-sub { font-size:14px; }
  .preview .wave { height:40px; margin-top:12px; }
  .preview .wave i { width:2px; }
  .pv-brief { font-size:14.5px; margin-top:10px; min-height:0; }
  .pv-meta, .pv-foot { display:none; }
  .build-cta-m { display:flex; margin-top:6px; }
}
@media (max-width:900px) { .tier--best { order:-1; } }

/* ── Motion ────────────────────────────────────────────────────────────────
   Apple-style: soft blur-to-sharp reveals, a few scroll-linked moves
   (driven from js.py's single update()), and small loops only where
   something is "live" (the waveform). Every hidden start state is under
   html.js, and everything is switched off for prefers-reduced-motion at
   the bottom of this block. */

/* Hero headline, split into words by js.py. */
.h1 .w { display:inline-block; }
html.js .h1[data-words] .w { opacity:0; transform:translateY(.4em); filter:blur(12px);
  transition:opacity .9s var(--ease-out), transform 1.1s var(--ease-out), filter .9s var(--ease-out); transition-delay:var(--d,0ms); }
html.js .h1.words-in .w { opacity:1; transform:none; filter:none; }
html.js .h1[data-words] .hl { background-size:0% 100%; transition:background-size .9s var(--ease-out) .75s; }
html.js .h1.words-in .hl { background-size:100% 100%; }

/* Hero phone: rises and settles; the two labels pop in after it. */
html.js .hero-stage.reveal { transform:translateY(64px) scale(.94); transition:opacity 1.2s var(--ease-out), transform 1.6s var(--ease-out); transition-delay:.2s; }
html.js .hero-stage.reveal.in { transform:none; }
.stage-in { position:relative; width:100%; display:flex; flex-direction:column; align-items:center; will-change:transform; transform-origin:50% 30%; }
html.js .chip-float { opacity:0; scale:.8; transition:opacity .6s var(--ease-out), scale .8s var(--ease-out); }
html.js .hero-stage.in .chip-float--a { opacity:1; scale:1; transition-delay:1s; }
html.js .hero-stage.in .chip-float--b { opacity:1; scale:1; transition-delay:1.25s; }
/* The glow behind the phone drifts slowly. */
html.js .hero::before { animation:drift 22s ease-in-out infinite alternate; }
@keyframes drift { 0% { transform:translate(0,0) rotate(0deg); } 100% { transform:translate(-6%,4%) rotate(14deg); } }

/* How it works: screenshots are slid by js.py as each card scrolls in. */
.step-shot img { will-change:transform; }

/* Gallery cards arrive one after another. */
html.js .rail .song { opacity:0; transform:translateY(32px); transition:opacity .8s var(--ease-out), transform 1s var(--ease-out); transition-delay:calc(var(--k,0) * 90ms); }
html.js .rail.in .song { opacity:1; transform:none; }
html.js .rail.reveal { opacity:1; transform:none; filter:none; }

/* Statement: words light up as the paragraph scrolls through. */
/* A dark band with editorial body type (DM Sans, medium) — deliberately
   not the display face, so it reads as a statement, not another heading. */
.statement { background:var(--dark); color:#fff; padding:clamp(96px,12vw,170px) 0; }
.scrub { margin:0 auto; max-width:30ch; text-align:center; font-family:var(--text); font-weight:500;
  font-size:clamp(26px,3.3vw,44px); line-height:1.32; letter-spacing:-.02em; color:#fff; }
html.js .scrub .sw { color:rgba(255,255,255,.42); transition:color .4s ease; }
html.js .scrub .sw.lit { color:rgba(255,255,255,.94); }
html.js .scrub .sw.key.lit { color:var(--lime); }

/* Bento: live waveform, filling ring, sweeping highlight, cascading chips. */
/* The waves draw themselves in from the name on reveal (js.py then drifts
   their phase slowly while the card is on screen). */
html.js .name-demo .wv { clip-path:inset(-20% 100% -20% 0); transition:clip-path 1.8s var(--ease-out) .2s; }
html.js .tile.in .name-demo .wv { clip-path:inset(-20% 0 -20% 0); }
html.js .lyric-card mark { background-size:0% 100%; transition:background-size .9s var(--ease-out) .6s; }
html.js .tile.in .lyric-card mark { background-size:100% 100%; }
html.js .langs span { opacity:0; transform:translateY(10px) scale(.96); transition:opacity .5s var(--ease-out), transform .7s var(--ease-out); transition-delay:calc(var(--k,0) * 60ms + 250ms); }
html.js .tile.in .langs span { opacity:1; transform:none; }

/* Pricing: the best-value card lifts a little further. */
html.js .tier--best.reveal { transform:translateY(44px) scale(.97); }
html.js .tier--best.reveal.in { transform:none; }

/* Buttons: arrow nudges on hover. */
.btn svg { transition:transform .25s var(--ease-out); }
.btn:hover svg { transform:translateX(3px); }
#hero-listen:hover svg { transform:none; }

@media (prefers-reduced-motion: reduce) {
  html.js .h1[data-words] .w, html.js .rail .song, html.js .langs span, html.js .chip-float
    { opacity:1 !important; transform:none !important; filter:none !important; scale:1 !important; transition:none !important; }
  html.js .h1[data-words] .hl, html.js .lyric-card mark { background-size:100% 100% !important; transition:none !important; }
  html.js .hero-stage.reveal, .stage-in, .step-shot img, .close-bg { transform:none !important; transition:none !important; }
  html.js .hero::before { animation:none !important; }
  html.js .name-demo .wv { clip-path:none !important; transition:none !important; }
  html.js .scrub .sw { color:#fff !important; }
  html.js .share-card, html.js .gen-bar i, html.js .gen-time { opacity:1 !important; transform:none !important; transition:none !important; }
  html.js .h2.reveal, html.js .kicker.reveal { filter:none !important; }
}

/* ── Squircle corners (2026-09-24, direct instruction) ──────────────────
   True superellipse corners via corner-shape, on every rounded RECTANGLE.
   Circles (play buttons, avatars, cover dots) and capsule pills stay as
   they are — a squircled circle turns into a rounded square. A squircle
   reads tighter than a circular arc at the same radius, so radii are
   raised to compensate. Browsers without corner-shape keep the ordinary
   rounded corners, so nothing breaks. */
@supports (corner-shape: squircle) {
  :root { --radius:44px; --radius-sm:26px; }
  .tile, .step, .quote, .tier, .free-banner, .close, .preview, .nav-sheet, .mini,
  .song-art, .lyric-card, .share-card, .share-card img, .mini-art, .pv-cover,
  .name-in, .chip-float, .chip-float i, .sp-art, .sp-art::after, .step-shot img {
    corner-shape:squircle;   /* corner-shape is NOT inherited: the ::after highlight ring must set it itself or its corners won't match .sp-art's */
  }
  .song-art { border-radius:34px; }
  .lyric-card, .share-card { border-radius:28px; }
  .share-card img, .mini-art { border-radius:18px; }
  .pv-cover { border-radius:30px; }
  .name-in { border-radius:24px; }
  .chip-float { border-radius:26px; }
  .chip-float i { border-radius:16px; }
  .sp-art { border-radius:11cqw; }
  .step-shot img { border-radius:40px 40px 0 0; }
  .close { border-radius:clamp(40px,4.5vw,60px); }
  .mini { border-radius:30px; }
  .nav-sheet { border-radius:32px; }
}

/* ── Reveal ───────────────────────────────────────────────────────────────
   Hidden start state only under html.js, so no-JS visitors see everything. */
html.js .reveal { opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease-out), transform 1.1s var(--ease-out), filter 1s var(--ease-out); transition-delay:calc(var(--i,0) * 80ms); }
html.js .h2.reveal, html.js .kicker.reveal { filter:blur(10px); }
html.js .reveal.in { filter:none; }
html.js .reveal.in { opacity:1; transform:none; }
/* Above the fold the hero copy IS the LCP element (Lighthouse: p.sub on
   mobile, h1 on desktop). It must be painted on the first frame, so the
   hero never starts from opacity:0 - it only rises / sharpens. Higher
   specificity than `html.js .reveal`, and placed after `.h1[data-words] .w`,
   so both win without !important. js.py flips `.hero .reveal` to `in` on
   the first frames instead of waiting for the IntersectionObserver. */
html.js .hero .reveal { opacity:1; }
html.js .h1[data-words] .w { opacity:1; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  html.js .reveal { opacity:1 !important; transform:none !important; transition:none !important; }
  html.js .chip-float, .ticker-track, .eq i, html.js .pulse > span:first-child::after { animation:none !important; }
  .mini { transition:none !important; }
  .wave i { transition:none !important; }
  .sp-bar { transform:none !important; }
  .btn, .badge-link, .song-art img, .song-play { transition:none !important; }
}

.co { display:grid; grid-template-columns:max-content 1fr; gap:8px 22px; margin:0; }
.co dt { font-weight:600; color:var(--ink); }
.co dd { margin:0; color:var(--ink-2); }
@media (max-width:520px) { .co { grid-template-columns:1fr; gap:2px; } .co dd { margin-bottom:10px; } }
/* ── Multi-page site (SEO-AEO-PLAN-2026-10-24). Nothing here starts hidden: no .reveal on these pages. ── */
.pg-main { padding-top:calc(var(--navH) + 28px); }
.pg-hero { padding:clamp(28px,5vw,56px) 0 clamp(20px,4vw,40px); }
.pg-hero .h1 { margin:14px 0 0; max-width:18ch; }
.pg-hero .h1.wide { max-width:24ch; }
.crumbs { display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:14px; color:var(--ink-3); }
.crumbs a { color:var(--ink-2); text-decoration:underline; text-underline-offset:3px; }
.crumb-sep { color:var(--line-strong); }
.answer { margin:22px 0 0; padding:20px 24px; max-width:68ch; background:var(--surface); border-left:4px solid var(--lime);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0; font-size:clamp(17px,2.2vw,19px); line-height:1.55; color:var(--ink); }
.updated { margin:14px 0 0; font-size:14px; color:var(--ink-3); }
.pg-sec { padding:clamp(32px,6vw,64px) 0; }
.pg-sec--surface { background:var(--surface); }
.pg-sec .h2 { margin:8px 0 0; max-width:28ch; }
.pg-sec p.lead { margin:14px 0 0; color:var(--ink-2); max-width:62ch; }

/* two buttons, equal weight; an iPhone puts the App Store first (head script adds html.ios) */
.cta-pair { display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px; margin-top:26px; }
html.ios .cta-pair [data-store-cta] { order:-1; }
html.ios .cta-pair [data-web-cta] { background:#fff; color:var(--ink); border:1px solid var(--line-strong); }
.cta-fine { margin:12px 0 0; font-size:14px; color:var(--ink-3); max-width:60ch; }
.badge-link--sm img { height:44px; width:auto; }

.fact-chips { display:flex; flex-wrap:wrap; gap:10px 12px; list-style:none; padding:0; margin:22px 0 0; }
.fact-chips li { display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; background:var(--surface);
  font-size:14.5px; font-weight:500; color:var(--ink-2); }
.fact-chips svg { width:14px; height:14px; color:var(--ink); }

.ways { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:26px; }
.way { padding:26px; border-radius:var(--radius); background:#fff; border:1px solid var(--line-strong); box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.way p { margin:0; color:var(--ink-2); }
.way .way-fine { color:var(--ink-3); font-size:14.5px; }
.way .btn, .way .badge-link { margin-top:auto; }
.way-note { margin:16px 0 0; font-size:14px; color:var(--ink-3); }
@media (max-width:760px) { .ways { grid-template-columns:1fr; } }

.pg-steps { list-style:none; padding:0; margin:28px 0 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; counter-reset:none; }
.pg-step { padding:24px; border-radius:var(--radius); background:var(--surface); display:flex; flex-direction:column; gap:8px; }
.pg-step-n { width:34px; height:34px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; font:600 15px var(--mono); }
.pg-step .h3 { margin:6px 0 0; }
.pg-step p { margin:0; color:var(--ink-2); }
@media (max-width:860px) { .pg-steps { grid-template-columns:1fr; } }

.shots { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:26px; }
.shot { margin:0; border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--line-strong); box-shadow:var(--shadow-sm); background:#fff; }
.shot img { display:block; width:100%; height:auto; }
.shot figcaption { padding:12px 14px; font-size:14px; color:var(--ink-3); border-top:1px solid var(--line); }
@media (max-width:860px) { .shots { grid-template-columns:1fr; } }

.pg-table-wrap { margin-top:24px; overflow-x:auto; border:1px solid var(--line-strong); border-radius:var(--radius-sm); }
.pg-table { width:100%; border-collapse:collapse; font-size:16px; background:#fff; }
.pg-table caption { text-align:left; padding:14px 18px 0; font-weight:600; }
.pg-table th, .pg-table td { padding:14px 18px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; }
.pg-table thead th { background:var(--surface); font-size:14px; color:var(--ink-2); font-weight:600; }
.pg-table tbody th { font-weight:600; white-space:nowrap; }
.pg-table tr:last-child th, .pg-table tr:last-child td { border-bottom:0; }

.packs { list-style:none; padding:0; margin:26px 0 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.pack { position:relative; padding:24px; border-radius:var(--radius); border:1px solid var(--line-strong); background:#fff; text-align:left; }
.pack--best { border-color:var(--ink); box-shadow:var(--shadow-md); }
.pack p { margin:0; }
.pack-name { font-weight:600; color:var(--ink-2); }
.pack-price { font:700 clamp(32px,5vw,44px) var(--display); letter-spacing:-.02em; margin-top:6px !important; }
.pack-each { color:var(--ink-3); font-size:15px; margin-top:4px !important; }
.pack-flag { position:absolute; top:16px; right:16px; padding:4px 10px; border-radius:999px; background:var(--lime); font-size:13px; font-weight:600; color:var(--ink); }
@media (max-width:760px) { .packs { grid-template-columns:1fr; } }

.pg-faq { max-width:820px; margin-top:22px; }
.prose { max-width:68ch; font-size:17.5px; line-height:1.65; color:var(--ink-2); }
.prose h3 { color:var(--ink); margin:28px 0 6px; }
.prose p { margin:0 0 14px; }
.prose ul, .prose ol { margin:0 0 16px; padding-left:22px; }
.prose li { margin:6px 0; }
.prose a, .answer a, .way-note a, .lead a { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }

.pg-foot { margin-top:clamp(28px,5vw,56px); }
.pg-foot-top { display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px; padding-bottom:22px; }
.pg-foot-def { margin:0; color:var(--ink-3); max-width:52ch; font-size:15px; }
.pg-foot-cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:24px; padding:22px 0; border-top:1px solid var(--line); }
.pg-foot-col { display:flex; flex-direction:column; gap:8px; }
.pg-foot-h { margin:0 0 4px; font:600 13px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.pg-foot-col a { color:var(--ink-2); font-size:15px; }
.pg-foot-col a:hover { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
@media (max-width:760px) { .pg-foot-cols { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* examples */
.ex-grid { list-style:none; padding:0; margin:26px 0 0; display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:18px; }
.ex-card { display:flex; flex-direction:column; border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--line-strong); background:#fff; box-shadow:var(--shadow-sm); height:100%; }
.ex-card a.ex-link { display:block; color:inherit; }
.ex-card img { display:block; width:100%; aspect-ratio:1/1; object-fit:cover; background:var(--surface); }
.ex-card .ex-body { padding:14px 16px 16px; }
.ex-card .ex-title { margin:0; font:600 17px var(--display); }
.ex-card .ex-meta { margin:4px 0 0; font-size:14px; color:var(--ink-3); }
.ex-hero { display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:clamp(20px,4vw,48px); align-items:start; margin-top:26px; }
.ex-hero > img { width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow-md); }
.ex-player { display:flex; align-items:center; gap:14px; margin-top:16px; }
.ex-play { width:56px; height:56px; border-radius:50%; border:0; background:var(--ink); color:#fff; display:grid; place-items:center; cursor:pointer; }
.ex-play svg { width:24px; height:24px; }
.ex-play .ico-pause { display:none; }
.ex-play[aria-pressed="true"] .ico-play { display:none; }
.ex-play[aria-pressed="true"] .ico-pause { display:block; }
.ex-bar { flex:1; height:8px; border-radius:999px; background:var(--surface-2); overflow:hidden; }
.ex-bar > i { display:block; height:100%; width:0; background:var(--ink); }
.ex-told { margin:22px 0 0; padding:20px 22px; border-radius:var(--radius-sm); background:var(--surface); }
.ex-told dl { margin:0; display:grid; grid-template-columns:max-content 1fr; gap:6px 18px; font-size:16px; }
.ex-told dt { color:var(--ink-3); } .ex-told dd { margin:0; color:var(--ink); }
.lyrics { margin:26px 0 0; padding:24px 26px; border-radius:var(--radius); background:var(--surface); max-width:68ch; }
.lyrics h3 { margin:18px 0 6px; font:600 13px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.lyrics h3:first-child { margin-top:0; }
.lyrics p { margin:0; font-size:18px; line-height:1.6; white-space:pre-line; }
@media (max-width:760px) { .ex-hero { grid-template-columns:1fr; } .ex-hero > img { max-width:320px; } }
.pillrail { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.pillrail a { padding:8px 14px; border-radius:999px; background:var(--surface); font-size:15px; font-weight:500; color:var(--ink-2); }
.pillrail a:hover { color:var(--ink); background:var(--surface-2); }
.occ-examples { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; margin-top:28px; }
.occ-example { display:flex; gap:16px; align-items:center; padding:14px; border-radius:var(--radius-sm); background:var(--surface); }
.occ-example img { width:96px; height:96px; border-radius:16px; object-fit:cover; flex:none; }
.occ-example-t { margin:0; font-weight:600; } .occ-example-t a { text-decoration:underline; text-underline-offset:3px; }
.occ-example-m { margin:2px 0 0; font-size:14px; color:var(--ink-3); }
.occ-example .ex-player { margin-top:10px; } .occ-example .ex-play { width:44px; height:44px; } .occ-example .ex-play svg { width:20px; height:20px; }
.idea-cards { list-style:none; padding:0; margin:22px 0 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; }
.idea-cards li { padding:16px 18px; border-radius:var(--radius-sm); background:var(--surface); font-weight:500; color:var(--ink); line-height:1.4; }
.occ-grid { list-style:none; padding:0; margin:28px 0 0; display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; }
.occ-tile a { display:block; position:relative; border-radius:var(--radius-sm); overflow:hidden; background:var(--surface); aspect-ratio:1/1; }
.occ-tile img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.occ-tile-l { position:absolute; left:0; right:0; bottom:0; padding:28px 14px 12px; color:#fff; font:600 17px var(--display); background:linear-gradient(transparent,rgba(12,12,14,.78)); }
.occ-tile a:not(:has(img)) .occ-tile-l { position:static; color:var(--ink); background:none; padding:18px; display:block; }
.pillrail--filter { display:none; }
html.js .pillrail--filter { display:flex; }
.chipbtn { padding:8px 14px; border-radius:999px; border:0; background:var(--surface); font:500 15px var(--text); color:var(--ink-2); cursor:pointer; }
.chipbtn:hover { background:var(--surface-2); color:var(--ink); }
.chipbtn[aria-pressed="true"] { background:var(--ink); color:#fff; }
.ex-card[hidden] { display:none; }
@media print { .nav, .nav-sheet, .cta-pair { display:none !important; } }

/* ── Analytics choice (consent module) ── */
.ck { position:fixed; z-index:60; left:12px; right:12px; bottom:max(12px, env(safe-area-inset-bottom)); max-width:560px;
  padding:12px 14px; background:#fff; color:var(--ink); border:1px solid var(--line-strong); border-radius:16px;
  box-shadow:0 10px 36px rgba(15,23,16,.16); }
.ck[hidden] { display:none; }
.ck-p { margin:0 0 10px; font-size:13.5px; line-height:1.4; color:var(--ink-2); }
.ck-p strong { color:var(--ink); font-weight:600; }
.ck-p a { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.ck-b { display:flex; gap:10px; }
.ck-btn { flex:1 1 0; min-height:44px; padding:0 14px; border-radius:999px; border:1.5px solid var(--ink); background:#fff; color:var(--ink);
  font:inherit; font-size:15px; font-weight:600; cursor:pointer; }
.ck-btn:hover { background:rgba(15,23,16,.06); }
.ck-btn:focus-visible { outline:3px solid var(--ink); outline-offset:2px; }
.ck-btn[data-consent="granted"] { background:var(--ink); color:#fff; }
.ck-btn[data-consent="granted"]:hover { background:var(--ink); opacity:.88; }
@media (min-width:700px) { .ck { left:20px; right:auto; bottom:20px; } }
@media (prefers-reduced-motion:no-preference) { .ck:not([hidden]) { animation:ck-in .25s ease-out; } }
@keyframes ck-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.foot-cookie { display:none; padding:0; border:0; background:none; font:inherit; color:inherit; cursor:pointer; text-decoration:underline;
  text-underline-offset:3px; }
html.js .foot-cookie { display:inline; }
.foot-cookie:focus-visible { outline:2px solid currentColor; outline-offset:3px; }