/* Premiere Sans (d97, research/flashstar/design-directions-2026-09-28-r7): the one look of the brand door. Every page a
   founder can reach from our Reels and DMs wears it: /, the song page, the rooms, /hi, /pricing, the legal pages, sign-in
   and the 404. lib/page.mjs premiere() is the frame that loads it.

   The rules, so nothing drifts:
     near-black with a subtle grain; the ad is always the hero
     one amber accent, only on the buyer's own words (<m> or <mark>): the review-to-lyric highlight
     one button style, warm white (.pm-btn); everything else is a text link or a row
     Funnel Display / Funnel Sans at four sizes: t1 24 (headline, price), t2 17 (sung lines, reviews, button, input),
     t3 15 (body), t4 13 (fine print, labels). Inputs stay at 17 so iOS doesn't zoom. One wordmark, "Cracked."
     no script or italic type, no uppercase labels, no timecodes or mono metadata, one message per screen */
@font-face{font-family:'Funnel Display';font-style:normal;font-weight:300 800;font-display:swap;src:url(/fonts/FunnelDisplay-300-800-latin.woff2) format('woff2');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:'Funnel Sans';font-style:normal;font-weight:300 800;font-display:swap;src:url(/fonts/FunnelSans-300-800-latin.woff2) format('woff2');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}

:root{color-scheme:dark;
 --bg:#080807;--sheet:#121211;--field:#141413;--ink:#f3eee6;--dim:rgba(243,238,230,.66);--faint:rgba(243,238,230,.5);
 --line:rgba(243,238,230,.12);--line-2:rgba(243,238,230,.16);--on-btn:#0a0a09;--err:#ff8f7a;
 --amber:#f7b24a;--amber-hi:#ffc977;--amber-w:rgba(247,178,74,.18);
 --disp:"Funnel Display",system-ui,-apple-system,sans-serif;--sans:"Funnel Sans",system-ui,-apple-system,sans-serif;
 --t1:24px;--t2:17px;--t3:15px;--t4:13px;--gut:20px;--col:440px}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip}
body{margin:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);
 font:400 var(--t3)/1.45 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"tnum" 1;overflow-x:clip}
/* the grain: an SVG noise tile over everything, the same in every browser */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.09;mix-blend-mode:overlay;
 background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
h1,h2,h3,p,ol,ul,dl,dd,figure,blockquote,fieldset{margin:0;padding:0}
ol,ul{list-style:none}
fieldset{border:0;min-width:0}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
button,input,textarea,select{font:inherit;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 14px;border-radius:10px;background:var(--ink);color:var(--on-btn);font:600 var(--t4) var(--sans);text-decoration:none}
.skip:focus{top:12px}
.nw{white-space:nowrap}
b,strong{font-weight:600}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- the wordmark and the bar ---------- */
.pm-mark{display:inline-flex;align-items:center;gap:3px;font:620 19px/1 var(--disp);letter-spacing:-.03em;color:var(--ink);text-decoration:none}
.pm-mark::after{content:"";width:5px;height:5px;margin-top:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 8px 2px rgba(247,178,74,.65)}
.pm-bar{position:relative;z-index:10;height:54px;flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;max-width:var(--col);margin:0 auto;padding:0 var(--gut)}
.pm-bar.is-over{position:absolute;top:0;left:0;right:0}
.pm-bar.is-over .pm-mark,.pm-bar.is-over .pm-barlink{text-shadow:0 1px 10px rgba(0,0,0,.5)}
.pm-barlink{font:500 var(--t4)/1 var(--sans);color:var(--dim);text-decoration:none;padding:12px 0}
.pm-nav{display:flex;gap:20px}
.pm-nav .pm-barlink{display:inline-flex;align-items:center;min-height:44px;padding:0;font-size:var(--t3)}
.pm-nav .pm-barlink:hover{color:var(--ink)}

/* ---------- a page's column ---------- */
.pm-main{flex:1;width:100%;max-width:var(--col);margin:0 auto;padding:8px var(--gut) 40px}

/* ---------- type: four sizes ---------- */
.pm-h1{font:520 var(--t1)/1.16 var(--disp);letter-spacing:-.022em;text-wrap:balance}
.pm-h2{font:520 var(--t2)/1.3 var(--disp);letter-spacing:-.012em;text-wrap:balance}
.pm-sub{margin-top:6px;font:400 var(--t3)/1.45 var(--sans);color:var(--dim);text-wrap:pretty}
.pm-body{font:400 var(--t3)/1.45 var(--sans);color:var(--ink);text-wrap:pretty}
.pm-body+.pm-body{margin-top:10px}
.pm-fine{margin-top:11px;font:400 var(--t4)/1.4 var(--sans);color:var(--faint);text-wrap:pretty}
.pm-fine.is-c{text-align:center}
.pm-lab{font:400 var(--t4)/1.4 var(--sans);color:var(--faint)}
.pm-err{margin-top:12px;font:500 var(--t4)/1.4 var(--sans);color:var(--err)}
.pm-note{margin-top:14px;padding:12px 14px;border-radius:13px;background:var(--field);box-shadow:inset 0 0 0 1px var(--line);font:400 var(--t3)/1.45 var(--sans);color:var(--ink)}
/* the one accent: the buyer's own words */
m,mark{color:var(--amber-hi);background:var(--amber-w);box-shadow:inset 0 -1.5px 0 var(--amber);border-radius:3px;padding:0 2px;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ---------- the one button, the field, the form ---------- */
.pm-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:52px;padding:0 18px;border:0;border-radius:13px;background:var(--ink);color:var(--on-btn);
 font:600 var(--t2)/1 var(--sans);letter-spacing:-.01em;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;
 box-shadow:0 14px 40px -16px rgba(247,178,74,.5),inset 0 -1px 0 rgba(0,0,0,.12);transition:transform .12s,opacity .12s}
.pm-btn:active{transform:scale(.985)}
.pm-btn:disabled,.pm-btn[aria-busy="true"],.pm-btn[data-busy]{opacity:.6;cursor:progress}
.pm-btn svg{width:18px;height:18px;flex:none}
.pm-input{display:block;width:100%;height:52px;padding:0 16px;border-radius:13px;border:1px solid var(--line-2);background:var(--field);color:var(--ink);font:400 var(--t2)/1 var(--sans);outline:none;-webkit-appearance:none;appearance:none}
.pm-input::placeholder{color:var(--faint)}
.pm-input:focus{border-color:rgba(243,238,230,.46)}
.pm-gap{margin-top:16px}
.pm-label{display:block;margin-bottom:8px;font:400 var(--t4)/1.4 var(--sans);color:var(--faint)}
.pm-form{margin-top:20px}
.pm-form .pm-btn{margin-top:9px}
.pm-form .cf-turnstile{margin-top:9px}
.pm-link{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(243,238,230,.35)}
.pm-text{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0;border:0;background:none;font:500 var(--t3)/1.2 var(--sans);color:var(--ink);text-decoration:underline;text-decoration-color:rgba(243,238,230,.35);cursor:pointer}

/* ---------- the ad: sound mark, who, progress ---------- */
.pm-who{display:flex;justify-content:space-between;align-items:center;gap:12px;font:500 var(--t4)/1.35 var(--sans);color:rgba(255,255,255,.9);text-shadow:0 1px 10px rgba(0,0,0,.6)}
.pm-who svg{width:20px;height:20px;flex:none}
.pm-snd{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:-12px -12px -12px 0;padding:0;border:0;background:none;color:#fff;cursor:pointer}
.pm-snd .is-p,.is-sound .pm-snd .is-s{display:none}
.is-sound .pm-snd .is-p{display:block}
.pm-prog{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.25);z-index:3;pointer-events:none}
.pm-prog i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--p,0)*100%);background:#fff}
.pm-sung{font:520 var(--t2)/1.32 var(--disp);letter-spacing:-.012em}
.pm-sung m,.pm-sung mark{background:rgba(247,178,74,.24);box-shadow:inset 0 -2px 0 var(--amber),0 0 18px rgba(247,178,74,.2)}
.pm-round{display:flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:50%;padding:0;border:1px solid rgba(255,255,255,.55);background:rgba(0,0,0,.35);color:#fff;
 -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer}
.pm-round svg{width:20px;height:20px}
.pm-chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:99px;border:1px solid rgba(255,255,255,.28);background:rgba(0,0,0,.4);color:#fff;
 font:500 var(--t3)/1 var(--sans);text-decoration:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.pm-chip svg{width:16px;height:16px}

.pm-below{width:100%;max-width:var(--col);margin:0 auto;padding:0 var(--gut) 40px}

/* ---------- the song page (B2): the ad fills the screen, the price in a bottom sheet ---------- */
.pm-stage{position:relative;height:100vh;height:100svh;min-height:520px;width:100%;max-width:var(--col);margin:0 auto;overflow:hidden;background:#000}
/* the whole 9:16 frame, never cropped: cover cut ~40px off each side of a 1080x1920 ad on a 375x812 phone, its own title with it */
.pm-stage .pm-screen{position:absolute;inset:0}
.pm-screen>video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.pm-stage::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,.18) 16%,rgba(0,0,0,.06) 50%,rgba(0,0,0,.55) 100%)}
.pm-stage .pm-vprog{position:absolute;left:0;right:0;top:0;height:2px;z-index:4;background:rgba(255,255,255,.22)}
.pm-stage .pm-vprog i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--p,0)*100%);background:#fff}
.pm-stage .pm-mid{position:absolute;left:50%;top:44%;z-index:4;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none}
/* before the first tap, "Tap for sound" sits low, just above the headline, off the ad's own title card (it sat mid-frame,
   on it: site review 2026-09-29). --cap-h is the headline block's height (public/liner.js), 150px without a script. */
.pm-stage:not(.is-sound):not(.is-locked):not(.is-open) .pm-mid{top:auto;bottom:calc(var(--cap-h,150px) + 40px);transform:translateX(-50%)}
.pm-stage .pm-hit{position:absolute;inset:0;z-index:2;width:100%;border:0;padding:0;background:none;cursor:pointer}
.pm-stage .pm-cap{position:absolute;left:var(--gut);right:var(--gut);bottom:26px;z-index:3}
.pm-stage .pm-cap .pm-h1{color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.6);margin-top:6px}
.pm-stage.is-sound .pm-mid .is-idle,.pm-stage:not(.is-sound) .pm-mid .is-play{display:none}
.pm-stage:is(.is-locked,.is-open) .pm-mid .is-idle{display:none}.pm-stage:is(.is-locked,.is-open) .pm-mid .is-play{display:flex}
.pm-stage.is-sound:not(.is-paused):not(.is-locked) .pm-mid{opacity:0;pointer-events:none}
.pm-stage .pm-mid{transition:opacity .2s}
/* the sheet: shown from the start without a script; with one, it rises when the free seconds end */
.pm-sheet{position:absolute;left:0;right:0;bottom:0;z-index:6;max-height:calc(100% - 64px);overflow:auto;overscroll-behavior:contain;display:flex;flex-direction:column;
 padding:10px var(--gut) calc(34px + env(safe-area-inset-bottom));border-radius:24px 24px 0 0;background:var(--sheet);
 box-shadow:0 -24px 60px -10px rgba(0,0,0,.7),0 -1px 0 rgba(243,238,230,.1);transition:transform .42s cubic-bezier(.2,.8,.2,1)}
.pm-sheet::before{content:"";position:absolute;left:10%;right:10%;top:-30px;height:60px;background:rgba(247,178,74,.14);filter:blur(34px);z-index:-1;border-radius:50%}
/* With a script, the sheet waits below the screen until the preview ends (liner.js adds is-live, is-locked, is-open).
   If the script never arrives, it rises by itself after the preview's length, so the price is never out of reach. */
@media (scripting:enabled){.pm-stage.is-preview:not(.is-locked):not(.is-open) .pm-sheet{transform:translateY(calc(100% + 40px));animation:pm-rise .42s 20s forwards}}
.pm-stage.is-live .pm-sheet{animation:none}
@keyframes pm-rise{to{transform:none}}
.pm-cap{transition:opacity .2s}
.pm-stage.is-locked .pm-cap,.pm-stage.is-open .pm-cap{opacity:0;pointer-events:none}
.pm-stage.is-locked .pm-mid,.pm-stage.is-open .pm-mid{top:calc((100% - var(--sheet-h,380px)) * .64)}
.pm-grab{flex:none;align-self:center;width:36px;height:5px;border-radius:3px;background:rgba(243,238,230,.25)}
.pm-sheet .pm-ended{margin-top:16px}
.pm-price{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:4px}
.pm-price b{font:520 var(--t2)/1.2 var(--disp);letter-spacing:-.012em}
.pm-price .p{font:520 var(--t1)/1 var(--disp);letter-spacing:-.03em}
.pm-kit{margin-top:6px;font:400 var(--t3)/1.45 var(--sans);color:var(--dim)}
.pm-guar{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font:400 var(--t3)/1.45 var(--sans);color:var(--ink);text-wrap:balance}
.pm-sheet>.pm-btn,.pm-sheet form>.pm-btn{margin-top:18px}
.pm-sheet .pm-fine{text-align:center}
/* paying right in the sheet (public/pay.js): the wallet, the Safari hand-off, the card, our Pay button */
.pay{display:grid;gap:12px;margin-top:18px}
.pay-wallet{min-height:52px}
.pay-say{font:400 var(--t4)/1.4 var(--sans);color:var(--faint);text-align:center;margin-top:-4px}
.pay-or{display:flex;align-items:center;gap:10px;color:var(--faint);font:400 var(--t4)/1 var(--sans)}
.pay-or::before,.pay-or::after{content:"";flex:1;height:1px;background:var(--line)}
.pay-card{min-height:120px}

/* ---------- a section under the hero ---------- */
.pm-sec{padding-top:28px;margin-top:28px;border-top:1px solid var(--line)}
.pm-sec:first-child{border-top:0;margin-top:0}
.pm-sec>.pm-h2+.pm-sub{margin-top:4px}
.pm-lede{padding-top:22px}
.pm-flash{margin-top:12px;font:500 var(--t3)/1.45 var(--sans);color:var(--ink)}
.pm-flash.is-quiet{color:var(--dim)}
/* rows: the kit, the steps, a list with a hairline between */
.pm-rows{margin-top:12px}
.pm-rows>li{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:52px;padding:10px 0;border-bottom:1px solid var(--line);font:400 var(--t3)/1.4 var(--sans)}
.pm-rows>li:last-child{border-bottom:0}
.pm-rows a{flex:none;font:500 var(--t3)/1 var(--sans);color:var(--ink);text-decoration:underline;text-decoration-color:rgba(243,238,230,.35);padding:12px 0}
.pm-rows a+a{margin-left:14px}
.pm-steps{margin-top:18px}
.pm-steps>li{display:flex;align-items:center;gap:12px;padding:9px 0;font:400 var(--t3)/1.35 var(--sans);color:var(--faint)}
.pm-steps>li i{flex:none;width:8px;height:8px;margin:0 5px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--faint)}
.pm-steps>li svg{flex:none;width:18px;height:18px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pm-steps>li.is-done{color:var(--dim)}
.pm-steps>li.is-now{color:var(--ink)}
.pm-steps>li.is-now i{background:var(--ink);box-shadow:0 0 0 4px rgba(243,238,230,.12);animation:pm-pulse 1.4s ease-in-out infinite alternate}
@keyframes pm-pulse{to{box-shadow:0 0 0 7px rgba(243,238,230,.04)}}
.pm-when{margin-top:10px;font:520 var(--t1)/1.16 var(--disp);letter-spacing:-.022em}

/* ---------- the song, line by line: each sung line over the words it came from ---------- */
.pm-lines{margin-top:14px}
.pm-lines>li{padding:16px 0;border-bottom:1px solid var(--line)}
.pm-lines>li:last-child{border-bottom:0}
.pm-lines .is-on .pm-sung{color:#fff}
.pm-lines q,.pm-quote{display:block;margin-top:6px;font:400 var(--t3)/1.45 var(--sans);color:var(--dim);quotes:none}
.pm-lines .pm-lab{margin-top:6px}
.pm-rest{margin-top:8px}
.pm-rest i{display:block;height:12px;width:var(--w,60%);margin:10px 0;border-radius:6px;background:rgba(243,238,230,.08)}
.pm-rest p{margin-top:12px}

/* ---------- the paid ad, and one of the 3 more ---------- */
.pm-reel{position:relative;width:min(100%,calc(72svh * 9 / 16));aspect-ratio:9/16;margin:0 auto;border-radius:16px;overflow:hidden;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 30px 60px -30px rgba(247,178,74,.35)}
.pm-reel video{width:100%;height:100%;object-fit:cover}
.pm-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pm-pair .pm-reel{width:100%}
.pm-pair figcaption{margin-top:6px;text-align:center}
.pm-fine b+span::before{content:", "}
/* the paid ad plays in the preview's player (tap for sound, a thin progress line), smaller on a phone so "It's yours"
   and Download sit on the first screen; the files come next, then the 3 more */
.pm-paid .pm-reel{width:min(100%,calc(54svh * 9 / 16))}
.pm-player .pm-hit{position:absolute;inset:0;z-index:2;width:100%;border:0;padding:0;background:none;cursor:pointer}
.pm-player .pm-vprog{position:absolute;left:12px;right:12px;bottom:10px;height:2px;z-index:4;border-radius:2px;background:rgba(255,255,255,.22)}
.pm-player .pm-vprog i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--p,0)*100%);background:#fff}
.pm-player .pm-mid{position:absolute;left:50%;top:50%;z-index:4;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none;transition:opacity .2s}
.pm-player:not(.is-sound) .pm-mid{top:auto;bottom:24px;transform:translateX(-50%)}
.pm-player.is-sound .pm-mid .is-idle,.pm-player:not(.is-sound) .pm-mid .is-play{display:none}
.pm-player.is-sound:not(.is-paused) .pm-mid{opacity:0}
.pm-paid .pm-lede .pm-form{margin-top:14px}
/* the price under the headline from the first second, on a phone too (it used to wait for the sheet, which rises only when
   the free seconds end: a founder who scrolled or left first never saw a price) */
.pm-capbuy{margin-top:14px}
.pm-capbuy .pm-btn{height:48px}
.pm-kitbox .pm-sub{margin-top:12px}
.pm-rows>li.is-soon{color:var(--dim)}
.pm-rows>li.is-soon>span:last-child{flex:none;font:500 var(--t4)/1 var(--sans);color:var(--faint)}
.pm-more{margin-top:28px;padding:20px;border-radius:20px;background:var(--sheet);box-shadow:0 0 0 1px var(--line)}
.pm-more .pm-btn{margin-top:18px}
.pm-slots{margin-top:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pm-slots li{display:flex;flex-direction:column;gap:6px;min-width:0;font:400 var(--t4)/1.35 var(--sans);color:var(--faint)}
.pm-slots li>a,.pm-slots li>span{display:flex;flex-direction:column;gap:6px;color:var(--ink);text-decoration:none}
.pm-slots img,.pm-slots .ph{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:10px;background:var(--field);box-shadow:0 0 0 1px var(--line)}

/* ---------- choices: the 2 picks, the lab's sounds, a room's 3 reviews ---------- */
.pm-legend{display:block;margin:22px 0 10px;font:520 var(--t2)/1.3 var(--disp);letter-spacing:-.012em}
.pm-prods{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.pm-prod input,.pm-chip-r input,.pm-pick input{position:absolute;opacity:0;pointer-events:none}
.pm-prod span{display:flex;flex-direction:column;gap:8px;padding:8px;border-radius:14px;background:var(--field);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;font:500 var(--t4)/1.3 var(--sans)}
.pm-prod img,.pm-prod i{width:100%;aspect-ratio:1;object-fit:cover;border-radius:9px;background:#1c1c1a}
.pm-prod input:checked+span{box-shadow:inset 0 0 0 1.5px var(--ink)}
.pm-chips{display:flex;flex-wrap:wrap;gap:8px}
.pm-chip-r span{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:99px;background:var(--field);box-shadow:inset 0 0 0 1px var(--line-2);font:500 var(--t4)/1 var(--sans);cursor:pointer}
.pm-chip-r input:checked+span{background:var(--ink);color:var(--on-btn);box-shadow:none}
.pm-chip-r input:focus-visible+span,.pm-prod input:focus-visible+span,.pm-pick input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
.pm-picks{margin-top:4px}
.pm-pick{position:relative;display:block;border-bottom:1px solid var(--line)}
.pm-pick>span{display:flex;gap:12px;align-items:flex-start;padding:14px 0;font:400 var(--t3)/1.45 var(--sans);color:var(--ink);cursor:pointer}
.pm-pick>span::before{content:"";flex:none;width:20px;height:20px;margin-top:1px;border-radius:6px;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.pm-pick input:checked+span::before{background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%230a0a09' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;box-shadow:none}
.pm-pick input:disabled+span{opacity:.45;cursor:default}
.pm-pick small{display:block;margin-top:4px;font-size:var(--t4);color:var(--faint)}

/* ---------- questions (details) ---------- */
.pm-qs{margin-top:10px}
.pm-qs details{border-bottom:1px solid var(--line)}
.pm-qs summary{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:52px;padding:12px 0;font:500 var(--t3)/1.4 var(--sans);cursor:pointer;list-style:none}
.pm-qs summary::-webkit-details-marker{display:none}
.pm-qs summary::after{content:"+";flex:none;font:400 var(--t2)/1 var(--sans);color:var(--faint)}
.pm-qs details[open] summary::after{content:"–"}
.pm-qs details>p{padding:0 0 16px;color:var(--dim)}

/* ---------- /pricing: the ladder as three rows ---------- */
.pm-ladder{margin-top:22px}
.pm-ladder>li{padding:18px 0;border-bottom:1px solid var(--line)}
.pm-ladder>li:first-child{padding-top:0}
.pm-ladder .pm-price{margin-top:0}
.pm-ladder>li:last-child{border-bottom:0}
.pm-ladder .pm-kit{margin-top:6px}

/* ---------- the legal pages: plain and readable ---------- */
.pm-prose{margin-top:8px}
.pm-prose section{padding-top:24px}
.pm-prose h2{font:520 var(--t2)/1.3 var(--disp);letter-spacing:-.012em;scroll-margin-top:20px}
.pm-prose p{margin-top:8px;color:var(--dim)}
.pm-prose a{color:var(--ink)}

/* ---------- the footer ---------- */
.pm-foot{width:100%;max-width:var(--col);margin:0 auto;padding:28px var(--gut) calc(28px + env(safe-area-inset-bottom));border-top:1px solid var(--line);font:400 var(--t4)/1.5 var(--sans);color:var(--faint)}
.pm-foot p{margin-top:10px}
.pm-foot nav{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:12px}
.pm-foot nav a{color:var(--dim);text-decoration:none;padding:6px 0}
.pm-foot a{color:var(--dim)}

/* ---------- a room (features/rooms/liner-room.mjs, 2026-09-30): their whole ad first, then the one next step ----------
   The frame is always the full 9:16, never cropped, with its own poster blurred around it; the wordmark and "For <brand>"
   sit above it, never on its captions. On a phone the frame leaves room for the line under it, so the first screen says
   whose ad this is. Before the first tap it plays muted with "Play with sound" low on the frame, off its title cards. */
.rm-bar{height:48px}
.rm-for{min-width:0;font:500 var(--t4)/1.2 var(--sans);color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm-stage{position:relative;width:100%;max-width:var(--col);margin:0 auto;overflow:hidden;background:#000;isolation:isolate}
.rm-stage::before{content:"";position:absolute;inset:-40px;z-index:-1;background:var(--rm-poster,none) center/cover no-repeat;filter:blur(30px) brightness(.42) saturate(1.1)}
.rm-frame{position:relative;height:clamp(360px,calc(100svh - 176px),calc(100vw * 16 / 9));aspect-ratio:9/16;max-width:100%;margin:0 auto}
.rm-frame video{width:100%;height:100%;object-fit:contain;background:#000}
.rm-frame .pm-hit{position:absolute;inset:0;z-index:2;width:100%;border:0;padding:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.rm-cue,.pm-cue{display:inline-flex;align-items:center;gap:9px;height:48px;padding:0 20px;border-radius:99px;white-space:nowrap;
 background:rgba(10,10,9,.62);color:#fff;font:600 var(--t2)/1 var(--sans);letter-spacing:-.01em;box-shadow:0 0 0 1px rgba(255,255,255,.24),0 12px 30px -10px rgba(0,0,0,.7);
 -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:opacity .2s}
.rm-cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%)}
.rm-cue svg,.pm-cue svg{flex:none;width:20px;height:20px;max-width:none}
.rm-stage:is([data-state="playing"],[data-state="paused"]) .rm-cue{opacity:0}
.rm-snd.pm-snd{position:absolute;right:6px;bottom:8px;z-index:4;margin:0;border-radius:50%;background:rgba(10,10,9,.45);opacity:0;transition:opacity .2s}
.rm-snd svg{width:20px;height:20px}
.rm-stage:is([data-state="playing"],[data-state="paused"]) .rm-snd{opacity:1}
.rm-stage .pm-prog{z-index:3}
.rm-lede{max-width:var(--col);margin:0 auto;padding:18px var(--gut) 0}
.rm-who{margin-bottom:6px;font:500 var(--t4)/1.35 var(--sans);color:var(--faint)}
.rm-acts{margin-top:18px}
.rm-acts>.pm-btn{margin-top:10px}
.rm-acts>.pm-btn:first-child{margin-top:0}
.rm-acts .pm-fine{margin-top:8px}
.rm-acts .rm-when{margin-top:8px;text-align:center}
.rm-yours .pm-h2{margin-bottom:2px}
.pm-btn.is-quiet{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.rm-mail,.rm-rest,.om-swap{margin-top:8px}
.rm-mail>summary,.rm-rest>summary,.om-swap>summary{display:flex;align-items:center;min-height:44px;font:500 var(--t4)/1.3 var(--sans);color:var(--dim);cursor:pointer;list-style:none;
 text-decoration:underline;text-decoration-color:rgba(243,238,230,.3);text-underline-offset:3px}
.rm-mail>summary::-webkit-details-marker,.rm-rest>summary::-webkit-details-marker,.om-swap>summary::-webkit-details-marker{display:none}
.rm-mail[open]>summary,.rm-rest[open]>summary,.om-swap[open]>summary{display:none}
.rm-mail .pm-form{margin-top:4px}
.rm-rest{margin-top:0}
.om-swap{margin:0}
.pm-card-src{margin-top:6px}
.pm-card-src .pm-lab{margin-top:6px}
.pm-aside{margin-top:8px;font:400 var(--t4)/1.4 var(--sans);color:var(--faint)}
.pm-seek{display:block;width:100%;padding:0;border:0;background:none;text-align:left;cursor:pointer;color:var(--ink)}
.pm-seek .pm-sung{display:block}
.pm-lines .pm-own{margin-top:6px;font:400 var(--t4)/1.4 var(--sans);color:var(--faint)}
/* the ask */
.pm-ask{margin-top:28px;padding-top:28px;border-top:1px solid var(--line)}
.pm-ask .pm-btn{margin-top:20px}
.pm-ask .pm-state{margin-top:12px;color:var(--ink)}
.pm-ask .pm-got{margin-top:12px}
.pm-ask .pm-got li{padding:10px 0;border-bottom:1px solid var(--line)}
.pm-ticks{margin-top:12px}
.pm-ticks li{position:relative;padding:5px 0 5px 26px;font:400 var(--t3)/1.4 var(--sans);color:var(--dim)}
.pm-ticks li::before{content:"";position:absolute;left:2px;top:9px;width:14px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23f3eee6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.pm-ask form{margin-top:4px}
/* the bar that follows the song once it's scrolled away (sing-along.js) */
.pm-now{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:40;display:flex;align-items:center;gap:12px;max-width:416px;margin:0 auto;padding:8px 8px 8px 16px;
 border-radius:16px;background:rgba(18,18,17,.92);box-shadow:0 0 0 1px var(--line),0 16px 40px -12px rgba(0,0,0,.8);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.pm-now p{flex:1;min-width:0;font:520 var(--t3)/1.3 var(--disp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-now button{flex:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:0;border-radius:12px;background:var(--ink);color:var(--on-btn)}
.pm-now svg{width:18px;height:18px}

/* the room's player: its state lives on the hero (public/brand/room.js) */
[data-state="playing"] .pm-snd .is-s{display:none}
[data-state="playing"] .pm-snd .is-p{display:block}
.pm-snd[aria-busy="true"]{animation:pm-wait .7s ease-in-out infinite alternate}
@keyframes pm-wait{to{opacity:.35}}
/* a room's lines: each card is a few sung lines over the review they came from */
.pm-card>.pm-lab:first-child{margin-bottom:8px}
.pm-cl>li+li{margin-top:4px}
.pm-cl .pm-seek{padding:2px 0}
.pm-cl .pm-sung{transition:color .2s}
html.is-singing .pm-cl>li:not(.is-on) .pm-sung{color:var(--dim)}
.pm-cl>li.is-on .pm-sung{color:#fff}
.pm-card-src{margin-top:8px}
.pm-card-src .pm-h2{margin-top:4px}
.pm-got{margin-top:10px}
.pm-got li{padding:10px 0;border-bottom:1px solid var(--line)}

/* ---------- /hi, sign-in, the 404: one question on the screen ---------- */
.pm-one{flex:1;display:flex;flex-direction:column;justify-content:center;width:100%;max-width:var(--col);margin:0 auto;padding:12px var(--gut) 40px}
.pm-one .pm-h1{margin-top:6px}
.pm-one details{margin-top:18px}
.pm-one details>summary{color:var(--dim);font:500 var(--t4)/1.4 var(--sans);cursor:pointer;min-height:44px;display:flex;align-items:center;text-decoration:underline;text-decoration-color:rgba(243,238,230,.35);text-underline-offset:3px}
.pm-one .pm-rows{margin-top:22px}

/* ---------- a laptop (d97, desktop pass): the phone design, held at a real size ----------
   The column widens to a reading width, the type goes up one step at most, and the ad sits beside the words at a real
   size instead of filling the screen: the page reads as a spread, not a stretched phone. */
@media (min-width:1024px){
 :root{--col:600px;--t1:28px}
 .pm-bar{max-width:var(--col);padding:0 var(--gut)}
 .pm-stage .pm-bar.is-over{max-width:980px;padding:0 40px}
 body{background:radial-gradient(90% 60% at 50% 0%,#141210,var(--bg) 70%) fixed var(--bg)}
 .pm-bar{height:72px}
 .pm-main{padding-top:32px}
 .pm-below{max-width:var(--col);padding-bottom:40px}
 /* the song page: the preview left, kept in view while the page scrolls; the headline and price on the right, the sheet
    in their place once the free seconds end, and every line under them in the same column (site review 2026-09-29:
    the lines sat in a narrow column of their own under the ad) */
 .pm-pre{display:grid;grid-template-columns:auto 420px;grid-template-rows:auto 1fr;justify-content:center;align-items:start;column-gap:72px;
  position:relative;max-width:1120px;margin:0 auto;padding:88px 40px 48px}
 .pm-stage{display:contents}
 .pm-stage::after{display:none}
 .pm-stage .pm-screen{grid-column:1;grid-row:1 / span 2;position:sticky;top:24px;inset:auto;height:min(calc(100vh - 150px),740px);aspect-ratio:9/16;border-radius:20px;overflow:hidden;
  background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 40px 90px -40px rgba(247,178,74,.35)}
 .pm-stage:not(.is-sound):not(.is-locked):not(.is-open) .pm-mid{bottom:30px}
 .pm-stage.is-locked .pm-mid,.pm-stage.is-open .pm-mid{top:50%}
 .pm-stage .pm-vprog{top:auto;bottom:12px;left:14px;right:14px;border-radius:2px}
 .pm-stage .pm-bar.is-over{position:absolute;left:0;right:0;margin:0 auto}
 .pm-stage .pm-cap,.pm-stage .pm-sheet{grid-column:2;grid-row:1;position:relative;left:auto;right:auto;bottom:auto}
 .pm-pre>.pm-below{grid-column:2;grid-row:2;max-width:none;margin:0;padding:8px 0 0}
 .pm-stage .pm-cap .pm-h1{color:var(--ink);text-shadow:none}
 .pm-stage .pm-cap .pm-who{color:var(--dim);text-shadow:none}
 .pm-stage .pm-capbuy{display:block;margin-top:22px;max-width:320px}
 .pm-sheet{max-height:none;overflow:visible;border-radius:20px;padding:22px 24px 24px;box-shadow:0 0 0 1px var(--line),0 40px 80px -40px rgba(0,0,0,.9)}
 .pm-sheet .pm-grab{display:none}
 .pm-sheet .pm-ended{margin-top:0}
 /* until the free seconds end the sheet takes no room, so the lines sit right under the headline, not under a blank sheet */
 @media (scripting:enabled){.pm-stage.is-preview:not(.is-locked):not(.is-open) .pm-sheet{display:none}}
 .pm-stage.is-locked .pm-sheet,.pm-stage.is-open .pm-sheet{opacity:1;visibility:visible;transition:opacity .35s}
 .pm-now{left:auto;right:32px;width:380px;margin:0}
 /* the paid ad: a spread like the preview and the rooms, the ad left at a real size and sticky, what they bought and
    the 3 more beside it (money-pages walk, 2026-09-28: the paid page was one narrow column with the browser's controls) */
 .pm-reel{width:min(360px,100%)}
 .pm-paid{max-width:1120px;display:grid;grid-template-columns:auto 520px;justify-content:center;column-gap:72px;align-items:start;padding:16px 40px 40px}
 .pm-paid>.pm-reel{grid-column:1;grid-row:1 / span 6;position:sticky;top:24px;width:auto;height:min(calc(100vh - 150px),740px);margin:0;border-radius:20px}
 .pm-paid>:not(.pm-reel){grid-column:2}
 .pm-paid>.pm-lede{padding-top:0}
 .pm-paid .pm-lede .pm-form{max-width:320px}
 .pm-foot{display:grid;grid-template-columns:auto 1fr;column-gap:40px;align-items:start}
 .pm-foot>*{grid-column:2}.pm-foot>.pm-mark{grid-column:1;grid-row:1 / span 3}
 .pm-foot nav{margin-top:0}
 .pm-one{max-width:520px}
}
/* a room from 860px: the ad left at a real size and sticky, what it is and the ask beside it, first screen */
@media (min-width:860px){
 .rm{display:grid;grid-template-columns:auto minmax(0,500px);justify-content:center;column-gap:clamp(40px,5vw,72px);width:100%;max-width:1160px;margin:0 auto;padding:0 40px 40px;align-items:start}
 .rm>.rm-bar{grid-column:1 / -1;max-width:none;height:72px;padding:0}
 .rm-for{font-size:var(--t3)}
 .rm-stage{grid-column:1;grid-row:2 / span 2;position:sticky;top:24px;width:auto;max-width:none;margin:0;background:none;overflow:visible}
 .rm-stage::before{display:none}
 .rm-frame{height:min(calc(100vh - 120px),760px);min-height:480px;border-radius:20px;overflow:hidden;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 40px 90px -40px rgba(247,178,74,.35)}
 .rm>.rm-lede,.rm>.pm-below{grid-column:2;max-width:none;padding:0;margin:0}
 .rm>.rm-lede{padding-top:8px}
 .rm .pm-ask{margin-top:32px}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}