/* The new brand side (features/brand). A record shop, not a dashboard: white paper, black ink, one orange, and every
   song gets a coloured sleeve. Light and dark follow the visitor's setting. Sleeve colours are album art, not UI.

   One system for every page here and every room (room.css only adds what a room has):
   - Space comes from eight steps and nothing else. Small steps hold a group together, big steps split groups apart,
     so how far apart two things sit says how related they are.
       --s1 4  hairline nudges     --s2 8   inside a control      --s3 12  label to its thing   --s4 16  item to item
       --s5 24 card padding, grid gutter      --s6 32  group to group       --s7 48  head to body      --s8 64 section
   - Every section is a head (eyebrow, title, one line under it) above a body that runs the full width. On a wide screen
     the page splits in halves and nothing else: the title takes the left half and its line the right, a two-part body
     splits on the same line, a list of three or four splits it evenly. A heading never sits alone beside long content,
     so no column stays empty for most of a section (Paul, 2026-09-25, on the old heading-left rail: "weird spacing").
   - Text comes in a few sizes and nothing between them: display (h1, h2 and big numbers, which share a size), 24 for
     titles and sung lines, 20 for the line under a title, 17 for reading, 15 for notes, mono 13 for labels. */
:root{
  --paper:#ffffff;--paper-2:#f3f3f1;--paper-3:#e9e9e6;--ink:#111111;--ink-2:#45454a;--ink-3:#6b6b70;
  --line:rgba(17,17,17,.12);--line-2:rgba(17,17,17,.22);--accent:#ff5a1f;--accent-ink:#c2410c;
  --btn:#111111;--btn-ink:#ffffff;--shadow:0 1px 2px rgba(0,0,0,.06),0 12px 32px -16px rgba(0,0,0,.28);
  --display:'Bricolage Grotesque','Figtree',system-ui,sans-serif;--body:'Figtree',system-ui,sans-serif;--mono:'IBM Plex Mono',ui-monospace,monospace;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;
  --sec:var(--s7);--head-gap:var(--s6);
  --r1:12px;--r2:20px;--pill:999px;
  --t-hero:clamp(44px,11.6vw,84px);--t-h1:clamp(40px,10vw,72px);--t-h2:clamp(32px,8vw,48px);--t-num:clamp(32px,8vw,48px);--t-h3:24px;--t-lead:20px;--t-body:17px;--t-small:15px;--t-label:13px;
  --wrap:1180px;--gut:20px;--col-gap:var(--s5);--ease:cubic-bezier(.22,1,.36,1);
  color-scheme:light dark;
}
@media (min-width:900px){:root{--sec:var(--s8);--head-gap:var(--s7);--gut:32px}}
@media (prefers-color-scheme:dark){:root{
  --paper:#0e0e0f;--paper-2:#18181a;--paper-3:#232326;--ink:#f4f4f1;--ink-2:#c3c3be;--ink-3:#9a9a95;
  --line:rgba(255,255,255,.1);--line-2:rgba(255,255,255,.2);--accent:#ff6a33;--accent-ink:#ff8a5c;
  --btn:#f4f4f1;--btn-ink:#111111;--shadow:0 1px 2px rgba(0,0,0,.4),0 16px 40px -18px rgba(0,0,0,.8);
}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--body);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
button,input,textarea{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.04em;line-height:.95;margin:0;text-wrap:balance}
h2{font-size:var(--t-h2);letter-spacing:-.045em;line-height:.98}
h3{font-size:var(--t-h3);letter-spacing:-.03em;line-height:1.08}
p,li{text-wrap:pretty}
p{margin:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:12px;top:-60px;z-index:50;padding:10px 14px;border-radius:var(--pill);background:var(--btn);color:var(--btn-ink);font-weight:700;text-decoration:none}.skip:focus{top:12px}
main{display:block;overflow-x:clip}
main>section{width:min(100% - 2*var(--gut),var(--wrap));margin-inline:auto}

/* ---------- sections: one anatomy everywhere ---------- */
main>section+section{border-top:1px solid var(--line)}
.sec{padding-block:var(--sec)}
.sec-head{margin-bottom:var(--head-gap)}
.sec-head .sub{margin-top:var(--s4);font-size:var(--t-lead);line-height:1.45;color:var(--ink-2);max-width:32em}
.eyebrow{font:600 var(--t-label)/1.2 var(--mono);letter-spacing:.02em;color:var(--accent-ink);text-transform:uppercase;margin-bottom:var(--s3)}
.lead{font-size:var(--t-lead);line-height:1.45;color:var(--ink-2);max-width:32em}
.list-label{font:600 var(--t-label)/1.3 var(--mono);text-transform:uppercase;color:var(--ink-3);margin-bottom:var(--s3)}
.fine,.made-up,.prices-more,.lib-fine,.order-fine,.price-fine{font-size:var(--t-small);line-height:1.45;color:var(--ink-3)}
@media (min-width:900px){
  .sec-head{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--col-gap);align-items:end}
  .sec-head>*{grid-column:1/-1}
  .sec-head>h2{grid-column:1}
  .sec-head:not(:has(.sub))>h2{grid-column:1/-1;max-width:24em}
  .sec-head>.sub{grid-column:2;margin:0;padding-bottom:.2em}
  .halves{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--col-gap);align-items:start}
}

/* ---------- the bar ---------- */
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s2) max(var(--gut),calc((100% - var(--wrap))/2));background:var(--paper);border-bottom:1px solid var(--line)}
.bar-home{display:flex;align-items:center;min-height:44px;color:var(--ink)}.logo{height:22px;width:auto}
.bar-links{display:flex;align-items:center;gap:var(--s1);margin-right:calc(-1*var(--s3))}
.bar-links a{display:flex;align-items:center;min-height:44px;padding:0 var(--s3);border-radius:var(--pill);font-size:var(--t-small);font-weight:600;text-decoration:none;color:var(--ink-2)}
.bar-links a:hover{color:var(--ink);background:var(--paper-2)}
.bar-links a[aria-current]{color:var(--ink)}
.bar-login{box-shadow:inset 0 0 0 1px var(--line-2);margin-left:var(--s1)}
.bar-links .bar-login{margin-right:var(--s3)}
@media (max-width:480px){.bar-links a{padding:0 10px}.bar-links a[href*="library"]{display:none}.logo{height:20px}}

/* ---------- links and buttons ---------- */
.link{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:700;text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:2px}
.link svg{width:18px;height:18px;transition:transform .2s var(--ease)}.link:hover svg{transform:translateX(3px)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 10px 0 22px;border-radius:var(--pill);border:0;font-weight:700;font-size:17px;text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .12s var(--ease),box-shadow .2s var(--ease),background .2s}
.btn svg{width:32px;height:32px;padding:7px;border-radius:50%;flex:none;transition:transform .2s var(--ease)}
.btn:hover svg{transform:translateX(2px)}
.btn:active{transform:scale(.97)}
.btn-go{background:var(--btn);color:var(--btn-ink);box-shadow:0 10px 24px -14px rgba(0,0,0,.6)}
.btn-go svg{background:var(--accent);color:#111}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.btn-ghost svg{background:var(--paper-2)}
.btn-wide{width:100%;padding:0 22px}
.btn[disabled],.btn.is-busy{opacity:.7;cursor:progress}

/* ---------- the song maker ---------- */
.maker{margin-top:var(--s5)}
.maker-label{display:block;font-weight:700;font-size:var(--t-small);margin-bottom:var(--s2)}
.maker-row{display:flex;gap:var(--s2);padding:6px;border-radius:var(--pill);background:var(--paper);box-shadow:inset 0 0 0 2px var(--ink),var(--shadow)}
.maker-row input{flex:1;min-width:0;border:0;background:transparent;padding:0 var(--s2) 0 var(--s4);font-size:17px;outline:none}
.maker-row input::placeholder{color:var(--ink-3)}
.maker-row:focus-within{box-shadow:inset 0 0 0 2px var(--ink),0 0 0 5px color-mix(in srgb,var(--accent) 28%,transparent),var(--shadow)}
.maker .btn{min-height:48px;padding-left:18px}
.maker .btn svg{width:30px;height:30px;padding:7px}
.maker-note{margin-top:var(--s3);font-size:var(--t-small);line-height:1.45;color:var(--ink-3)}
.maker-error{margin-top:var(--s3);font-size:var(--t-small);font-weight:600;color:var(--accent-ink)}
.sec-body>.maker:first-child{margin-top:0}
@media (max-width:420px){.maker-row{flex-direction:column;border-radius:var(--r2);padding:6px}.maker-row input{min-height:50px}.maker .btn{width:100%}}

/* ---------- a record sleeve ---------- */
.sleeve{position:relative;aspect-ratio:1;width:var(--w,240px);container-type:inline-size;flex:none}
.sleeve.is-lg{--w:min(78vw,420px)}.sleeve.is-md{--w:min(58vw,260px)}
.sleeve-face{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:space-between;padding:8cqi;border-radius:5px;overflow:hidden;background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,0) 42%),var(--sl);color:var(--sl-ink);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),0 2px 4px rgba(0,0,0,.08),0 24px 48px -22px rgba(0,0,0,.55)}
.sleeve-face::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 80% at 0% 0%,rgba(255,255,255,.14),transparent 60%);mix-blend-mode:soft-light}
.sleeve-genre{font:600 5.2cqi/1.2 var(--mono);text-transform:uppercase;letter-spacing:.02em;opacity:.85}
.sleeve-title{font:800 13cqi/.9 var(--display);letter-spacing:-.045em;text-wrap:balance;overflow-wrap:anywhere}
.sleeve-brand{font:700 6.5cqi/1.1 var(--body)}
.disc{position:absolute;z-index:0;top:3%;left:3%;width:94%;aspect-ratio:1;border-radius:50%;transform:translateX(24%);transition:transform .9s var(--ease);
  background:radial-gradient(circle,var(--sl) 0 15%,#0b0b0b 15.5% 16.5%,transparent 17%),repeating-radial-gradient(circle,#161616 0 1.5px,#0c0c0c 1.5px 3px);box-shadow:0 12px 30px -14px rgba(0,0,0,.7)}
.disc i{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 20deg,rgba(255,255,255,0) 0deg,rgba(255,255,255,.12) 30deg,rgba(255,255,255,0) 70deg,rgba(255,255,255,0) 180deg,rgba(255,255,255,.1) 210deg,rgba(255,255,255,0) 250deg)}
.disc i::after{content:"";position:absolute;left:50%;top:50%;width:3%;aspect-ratio:1;margin:-1.5%;border-radius:50%;background:var(--paper)}
.is-playing>.disc,.sleeve.is-playing .disc{transform:translateX(42%)}
.is-playing>.disc i,.sleeve.is-playing .disc i{animation:spin 1.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.sleeve.has-media .sleeve-face{padding:0;background:#111}
/* No sheen over a playing video: a blended layer on top of video is repainted every frame. */
.sleeve.has-media .sleeve-face::after{display:none}
.sleeve.has-media video,.sleeve.has-media img{width:100%;height:100%;object-fit:cover;object-position:50% 58%}
.sleeve.is-blank .sleeve-face{background:repeating-linear-gradient(-45deg,transparent 0 10px,var(--line) 10px 11px),var(--paper-2);color:var(--ink-3);box-shadow:inset 0 0 0 2px var(--line-2)}
.sleeve.is-blank .disc{background:radial-gradient(circle,var(--paper-3) 0 15%,transparent 16%),repeating-radial-gradient(circle,var(--paper-3) 0 1.5px,var(--paper-2) 1.5px 3px);box-shadow:inset 0 0 0 2px var(--line-2)}

/* ---------- the hero ---------- */
/* Phone: title, then the song, then the words and the box, so the song is on the first screen. Wide: the words on the
   left six columns, the song on the right six, both centred on one line. */
.hero{display:grid;padding:var(--s5) 0 var(--sec);align-items:center}
.hero-copy{display:contents}
.hero .eyebrow{order:1}.hero h1{order:2}.hero .stage{order:3;margin:0 0 var(--s5)}
.hero .maker-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.hero .lead{order:4}.hero .maker{order:5}
.hero h1{font-size:var(--t-hero);letter-spacing:-.05em;line-height:.9;margin-bottom:var(--s5)}
.stage{position:relative;margin:0;display:grid;justify-items:start}
.stage-sleeves{position:absolute;inset:0 0 auto;aspect-ratio:1;width:var(--front-w);display:flex;justify-content:center;align-items:center;pointer-events:none}
.stage-sleeves .sleeve{position:absolute;top:8%;--w:calc(var(--front-w)*.56)}
.stage-sleeves .is-back .sleeve-face>*{display:none}
.stage-sleeves .is-left{left:-8%;transform:rotate(-8deg)}
.stage-sleeves .is-right{right:-14%;transform:rotate(7deg);top:14%}
.stage{--front-w:min(calc(100vw - 2*var(--gut) - 44px),400px)}
.stage .is-front{--w:var(--front-w);z-index:2}
.stage .is-front .disc{transform:translateX(10%)}.stage .is-front.is-playing .disc{transform:translateX(22%)}
.stage-sound{position:absolute;left:var(--s3);top:var(--s3);display:flex;align-items:center;gap:var(--s2);min-height:44px;padding:0 var(--s4) 0 var(--s3);border:0;border-radius:var(--pill);background:rgba(10,10,10,.74);color:#fff;font-weight:700;font-size:var(--t-small);cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);white-space:nowrap}
.stage-sound svg{width:22px;height:22px}
.stage-sound .on{display:none}.stage-sound[aria-pressed="true"] .on{display:flex;align-items:center;gap:var(--s2)}.stage-sound[aria-pressed="true"] .off{display:none}.stage-sound .off{display:flex;align-items:center;gap:var(--s2)}
.stage-sound[aria-pressed="false"]{animation:nudge 2.6s var(--ease) 1.2s 2}
@keyframes nudge{0%,100%{transform:none}8%{transform:scale(1.08)}16%{transform:none}}
.stage figcaption{margin-top:var(--s3);font-size:var(--t-small);line-height:1.4;color:var(--ink-3)}
.stage figcaption b{color:var(--ink)}.stage figcaption span{display:block}
@media (min-width:900px){
  .hero{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);padding:var(--s7) 0 var(--sec);align-items:start}
  .hero{align-items:center}
  .hero-copy{display:block;grid-column:1/8}.hero .stage{grid-column:8/13;margin:0;justify-items:center;--front-w:min(36vw,420px)}
  .hero .stage figcaption{text-align:center}
  .stage-sleeves{left:50%;transform:translateX(-50%)}
}

/* ---------- a founder's result ---------- */
.result{display:grid;gap:var(--s6);padding:var(--s5) 0 var(--sec);align-items:center;scroll-margin-top:80px}
.result[hidden]{display:none}
.result-stage{position:relative;display:grid;justify-items:start}
.result-stage .sleeve{--w:min(66vw,380px);margin-right:14%}
.sleeve.is-yours .sleeve-title{font-size:14cqi}
.is-writing .sleeve.is-yours .sleeve-face{animation:breathe 1.4s ease-in-out infinite}
.is-writing .sleeve.is-yours .disc{transform:translateX(42%)}.is-writing .sleeve.is-yours .disc i{animation:spin 1.8s linear infinite}
@keyframes breathe{50%{filter:brightness(1.08) saturate(1.1)}}
.play-yours[hidden]{display:none!important}
.play-yours{position:absolute;z-index:3;right:calc(14% + 14px);bottom:14px;width:64px;height:64px;border-radius:50%;border:0;background:var(--btn);color:var(--btn-ink);cursor:pointer;box-shadow:0 12px 30px -10px rgba(0,0,0,.6);display:grid;place-items:center}
.play-yours svg{width:30px;height:30px}.play-yours .i-p{display:none}
.play-yours svg:last-child{display:none}.play-yours.is-on svg:first-child{display:none}.play-yours.is-on svg:last-child{display:block}
.result-status{font:600 var(--t-label)/1.3 var(--mono);color:var(--accent-ink);text-transform:uppercase;margin-bottom:var(--s3);display:flex;align-items:center;gap:10px}
.result-status::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 25%,transparent)}
.is-writing .result-status::before{animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
.result-h{font-size:var(--t-h1);margin-bottom:var(--s4)}
.lyric{list-style:none;margin:0 0 var(--s4);padding:0;font:800 clamp(24px,5.6vw,36px)/1.12 var(--display);letter-spacing:-.03em}
.lyric li{opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease),color .3s}
.lyric li.is-in,.lyric.is-shown li{opacity:1;transform:none}
.lyric li.is-dim{color:var(--ink-3)}
.result-draft{font-size:var(--t-small);color:var(--ink-3);margin-bottom:var(--s4)}
.result-state{font-size:var(--t-lead);font-weight:600;margin-bottom:var(--s4)}
.result-more{margin-top:var(--s5);color:var(--ink-2)}
.ask{margin-top:var(--s2);padding:var(--s5);border-radius:var(--r2);background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line)}
.ask h3{margin-bottom:var(--s2)}
.ask p{color:var(--ink-2)}
.ask .maker-label{margin-top:var(--s4)!important}
.ask .maker-row{margin-top:var(--s2)}
.ask .fine{margin-top:var(--s3)}
.ask-done{display:flex;gap:var(--s3);align-items:flex-start}.ask-done svg{width:28px;height:28px;flex:none;color:var(--accent-ink)}
@media (min-width:900px){.result{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--col-gap);padding:var(--s5) 0 var(--sec);align-items:center}.result-stage{justify-items:center}.result-stage .sleeve{--w:min(78%,400px);margin-right:14%}.result.is-page{padding-top:var(--s7)}}

/* ---------- the record wall ---------- */
/* Side A as a wall of sleeves: two across on a phone, four across in the body column when wide. Tap one and it takes
   four tiles, the rest pack around it (dense flow), and it plays. Every tile is the same square, so the wall has one
   gutter and one edge, and the open one lines up with the grid it grew from. */
.side .sec-body{container-type:inline-size}
.wall{--cols:2;--gap:var(--s3);list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));grid-auto-rows:calc((100cqw - (var(--cols) - 1)*var(--gap))/var(--cols));gap:var(--gap);grid-auto-flow:row dense}
@media (min-width:640px){.wall{--cols:4;--gap:var(--s4)}}
.tile{position:relative;container-type:size;border-radius:6px;background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,0) 42%),var(--sl);color:var(--sl-ink);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),0 2px 4px rgba(0,0,0,.08),0 18px 36px -22px rgba(0,0,0,.5);overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.tile.is-open{grid-column:span 2;grid-row:span 2}
.tile-face{position:absolute;inset:0;z-index:2;display:grid;grid-template-rows:auto 1fr auto;align-items:start;gap:var(--s1);width:100%;padding:9cqmin;border:0;background:none;color:inherit;text-align:left;text-decoration:none;cursor:pointer;font:inherit}
.tile-top{display:flex;justify-content:space-between;gap:var(--s2);font:600 max(13px,6cqmin)/1.2 var(--mono);text-transform:uppercase;letter-spacing:.02em;opacity:.85}
.tile-time svg{width:1.4em;height:1.4em}
.tile-title{align-self:center;font:800 max(17px,12.5cqmin)/.95 var(--display);letter-spacing:-.045em;text-wrap:balance;overflow-wrap:anywhere;padding-right:4cqmin}
.tile-by{font:700 max(13px,6.4cqmin)/1.2 var(--body);padding-right:26cqmin}
@container (max-width:220px){.tile-time{display:none}.tile-top{letter-spacing:0}}
.tile-why{display:none}
/* The mini record: play on a closed tile, a spinning disc with pause on the open one. */
.tile-disc{position:absolute;right:7cqmin;bottom:7cqmin;display:grid;place-items:center;width:max(40px,20cqmin);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--sl) 0 31%,#0b0b0b 32% 34%,transparent 35%),repeating-radial-gradient(circle,#1b1b1b 0 1.5px,#0d0d0d 1.5px 3px);color:var(--sl-ink);box-shadow:0 6px 14px -6px rgba(0,0,0,.6);transition:transform .25s var(--ease)}
.tile-disc svg{width:34%;height:34%}.tile-disc svg:last-child{display:none}
.tile-bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:currentColor;opacity:.9;transform-origin:left;transform:scaleX(var(--p,0));transition:transform .2s linear}
.tile:not(.is-playing) .tile-bar{display:none}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.tile:not(.is-open):hover{transform:translateY(-3px) rotate(-1deg);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),0 4px 8px rgba(0,0,0,.1),0 26px 44px -22px rgba(0,0,0,.6)}.tile:not(.is-open):hover .tile-disc{transform:rotate(-30deg) scale(1.06)}}
.tile-face:focus-visible{outline:3px solid var(--ink);outline-offset:-6px;border-radius:6px}
/* Open: the words or the footage take the middle, the title and its one line sit at the foot. */
.tile.is-open .tile-face{padding:6cqmin}
.tile.is-open .tile-top{font-size:max(13px,3.2cqmin)}
.tile.is-open .tile-title{align-self:end;font-size:max(18px,6cqmin);padding-right:16cqmin}
.tile.is-open .tile-by{display:none}
.tile.is-open .tile-why{display:block;font:600 max(13px,3.4cqmin)/1.3 var(--body);opacity:.85;padding-right:16cqmin}
.tile.is-open .tile-disc{right:5cqmin;bottom:5cqmin;width:max(44px,11cqmin)}
.tile.is-playing .tile-disc svg:first-child{display:none}.tile.is-playing .tile-disc svg:last-child{display:block}
@media (prefers-reduced-motion:no-preference){.tile.is-playing .tile-disc{animation:spin 1.8s linear infinite}}
.tile-open{position:absolute;inset:0;z-index:1;display:grid;place-items:center;padding:16cqmin 6cqmin 24cqmin}
.tile-open[hidden]{display:none}
.tile-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 58%;background:#111}
.tile[data-kind="video"].is-open{color:#fff}
.tile[data-kind="video"].is-open .tile-face{background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0) 22%,rgba(0,0,0,0) 62%,rgba(0,0,0,.75));text-shadow:0 1px 2px rgba(0,0,0,.5)}
.karaoke{list-style:none;margin:0;padding:0;width:100%;font:800 max(22px,7.4cqmin)/1.08 var(--display);letter-spacing:-.03em;min-height:2.2em}
.karaoke li{display:none}.karaoke li.is-now,.karaoke li.is-next{display:block}
.karaoke li.is-next{opacity:.45}
.karaoke span{opacity:.5;transition:opacity .12s}.karaoke span.is-sung{opacity:1}
/* The ninth sleeve is theirs: blank, striped, a question mark, and it goes to the store box. */
.tile.tile-you{background:repeating-linear-gradient(-45deg,transparent 0 10px,var(--line) 10px 11px),var(--paper-2);color:var(--ink-2);box-shadow:inset 0 0 0 2px var(--line-2)}
.tile.tile-you .tile-time svg{color:var(--accent-ink)}
.wall:has(.is-open)>.tile-you{grid-column:span 2}
.tile-q{position:absolute;right:7cqmin;bottom:5cqmin;font:800 30cqmin/1 var(--display);color:var(--ink-3);opacity:.35}
::view-transition-group(*){animation-duration:.42s;animation-timing-function:var(--ease)}
.made-up{margin-top:var(--s4);max-width:46em}

/* ---------- how ---------- */
.how-grid{display:grid;gap:var(--s6)}
@media (min-width:640px){.how-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--col-gap)}}
.how-art{aspect-ratio:1;border-radius:var(--r2);margin-bottom:var(--s4);overflow:hidden;position:relative;container-type:inline-size}
.how h3{margin-bottom:var(--s2)}
.how article>p{color:var(--ink-2)}
.how-quote{background:linear-gradient(135deg,rgba(255,255,255,.25),rgba(255,255,255,0) 45%),#f5b700;color:#1a1300;padding:clamp(var(--s3),10cqi,var(--s5));display:flex;flex-direction:column;justify-content:space-between}
.how-quote small{font:600 var(--t-label) var(--mono);text-transform:uppercase;opacity:.8}
.how-quote p{font:800 clamp(15px,10cqi,var(--t-h3))/1.08 var(--display);letter-spacing:-.03em}
.how-frames{background:var(--paper-2);display:flex;justify-content:center;align-items:center}
.how-frames img{height:78%;width:auto;aspect-ratio:9/16;object-fit:cover;border-radius:var(--r1);box-shadow:var(--shadow);margin:0 -10px}
.how-frames img:nth-child(1){transform:rotate(-6deg) translateY(8px)}.how-frames img:nth-child(2){z-index:1;transform:scale(1.06)}.how-frames img:nth-child(3){transform:rotate(6deg) translateY(8px)}
.how-check{background:var(--ink);color:var(--paper);display:flex;flex-direction:column;justify-content:center;gap:clamp(var(--s2),5cqi,var(--s3));padding:clamp(var(--s3),10cqi,var(--s5))}
.how-check span{display:flex;align-items:center;gap:var(--s3);font:800 clamp(15px,10cqi,var(--t-h3))/1 var(--display);letter-spacing:-.03em}
.how-check svg{width:clamp(22px,12cqi,30px);height:clamp(22px,12cqi,30px);flex:none;padding:5px;border-radius:50%;background:var(--accent);color:#111}
@media (max-width:639px){.how-art{aspect-ratio:auto;height:220px}}
@media (min-width:900px){.how-art{aspect-ratio:4/3}}

/* ---------- proof ---------- */
.proof-big{container-type:inline-size}
/* Sized to its own column, so the number never runs into the words beside it. */
.proof-n{font:800 clamp(56px,21cqi,152px)/.85 var(--display);letter-spacing:-.06em;font-variant-numeric:tabular-nums}
.proof-what{margin-top:var(--s3);font-size:var(--t-lead);color:var(--ink-2);max-width:24em}
.proof-copy{margin-top:var(--s6)}
@media (min-width:900px){.halves>.proof-copy{margin-top:0}.lib-cta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--col-gap);align-items:end}.lib-cta>.sec-head{display:block;margin:0}.lib-cta>.sec-head>.sub{margin-top:var(--s4)}}
.proof-copy>p{color:var(--ink-2);margin-bottom:var(--s3);max-width:36em}
.proof-copy b{color:var(--ink)}
.promises{list-style:none;margin:var(--s5) 0 0;padding:0;display:grid;gap:var(--s2)}
.promises li{padding:var(--s3) var(--s4);border-radius:var(--r1);background:var(--paper-2);font-size:var(--t-small);color:var(--ink-2)}
@media (min-width:640px){.promises{grid-template-columns:1fr 1fr;column-gap:var(--col-gap)}}

/* ---------- pricing ---------- */
.prices{display:grid;gap:var(--s4);align-items:stretch}
@media (min-width:640px){.prices{grid-template-columns:1fr 1fr;gap:var(--col-gap)}}
.price{display:flex;flex-direction:column;gap:var(--s4);padding:var(--s5);border-radius:var(--r2);background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.price header{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3)}
.price header h2{font-size:var(--t-h3);letter-spacing:-.03em;line-height:1.08}
.price-tag{display:flex;align-items:baseline;gap:6px}.price-tag b{font:800 var(--t-num)/1 var(--display);letter-spacing:-.04em;font-variant-numeric:tabular-nums}.price-tag span{font-size:var(--t-small);color:inherit;opacity:.7}
.price.is-paid{background:var(--ink);color:var(--paper);box-shadow:var(--shadow)}
.price.is-paid .btn-go{background:var(--paper);color:var(--ink)}
.price-founding{padding:var(--s3) var(--s4);border-radius:var(--r1);background:color-mix(in srgb,var(--accent) 22%,transparent);font-size:var(--t-small)}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.ticks li{display:flex;gap:10px;align-items:flex-start;line-height:1.4}
.ticks svg{width:20px;height:20px;flex:none;margin-top:1px;color:var(--accent)}
.price .price-fine{color:inherit;opacity:.75}
.price .btn{align-self:flex-start;margin-top:auto}
.prices-more{margin-top:var(--s4)}

/* ---------- encore ---------- */
.encore{display:grid;gap:var(--s6);align-items:center}
.encore .sleeve{--w:min(56vw,260px);margin-right:12%}
.encore-copy .maker{margin-top:var(--s5)}
@media (min-width:900px){.encore{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--col-gap)}.encore .sleeve{justify-self:end;margin-right:30%}}

/* ---------- inner pages ---------- */
.page-head{padding:var(--s7) 0 var(--sec)}
.page-head h1{font-size:var(--t-h1);letter-spacing:-.05em;line-height:.92;margin-bottom:var(--s4);max-width:14em}
.page-head .maker{margin-top:var(--s5)}
.page-head.is-tight{padding-bottom:var(--head-gap)}
.page-sleeve{display:none}
@media (min-width:900px){
  /* A page head is one column: the title runs full width, the line under it up to 40em, and any numbers across the
     full width beneath. The song page alone puts its sleeve beside the words. */
  .page-head .lead{max-width:40em}
  .page-head>h1{margin-bottom:var(--s5)}
  .page-head.is-song{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--col-gap);align-items:start}
  .page-head.is-song>*{grid-column:1}
  .page-head.is-song>h1{grid-column:1/-1}
  .page-head.is-song>.page-sleeve{display:block;grid-column:2;grid-row:3/span 4;justify-self:center;align-self:center;--w:min(70%,300px);margin-right:14%}
}
.notice{width:min(100% - 2*var(--gut),var(--wrap));margin:0 auto var(--s5);padding:var(--s3) var(--s4);border-radius:var(--r1);background:var(--paper-2);font-weight:600}
.pricing.is-page{padding:0 0 var(--sec);border-top:0}
.page-head.is-tight+.pricing.is-page{padding-top:0}
.order-form{display:grid;gap:var(--s4)}
@media (min-width:900px){.order .order-form{grid-template-columns:1fr 1fr;column-gap:var(--col-gap)}.order .order-form>*{grid-column:1/-1}.order .order-form>.field:nth-of-type(-n+2){grid-column:auto}.order .order-form>.btn:not(.btn-wide){justify-self:start}}
.field{display:grid;gap:6px}
.field>span{font-weight:700;font-size:var(--t-small)}.field em{font-style:normal;font-weight:500;color:var(--ink-3)}
.field input,.field textarea{width:100%;padding:14px var(--s4);border-radius:var(--r1);border:0;background:var(--paper-2);box-shadow:inset 0 0 0 1.5px var(--line-2);font-size:17px;outline:none}
.field input:focus,.field textarea:focus{box-shadow:inset 0 0 0 2px var(--ink),0 0 0 4px color-mix(in srgb,var(--accent) 25%,transparent)}
.field small{font-size:var(--t-small);color:var(--ink-3)}
.consent{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s3) var(--s4);border-radius:var(--r1);background:color-mix(in srgb,var(--accent) 14%,transparent);font-size:var(--t-small);line-height:1.45;cursor:pointer}
.consent input{width:22px;height:22px;flex:none;margin:1px 0 0;accent-color:var(--accent)}
.faq details{border-top:1px solid var(--line)}.faq details:first-child{border-top:0}
.faq summary{padding-block:var(--s2)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);min-height:60px;cursor:pointer;list-style:none;font:700 var(--t-body)/1.3 var(--body)}
.faq.sec{padding-bottom:calc(var(--sec) - var(--s4))}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 28px/1 var(--body);color:var(--ink-3);transition:transform .2s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 var(--s4);color:var(--ink-2);max-width:40em}
@media (min-width:900px){.faq .sec-body{columns:2;column-gap:var(--col-gap)}.faq details{break-inside:avoid}.faq details:nth-child(5){border-top:0}}

/* ---------- the library ---------- */
.lib-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2);margin:var(--s6) 0 var(--s3)}
.lib-stats div{padding:var(--s3);border-radius:var(--r2);background:var(--paper-2);display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:var(--s1)}
.lib-stats dt{font-size:var(--t-label);color:var(--ink-3);line-height:1.3}
.lib-stats dd{margin:0;font:800 clamp(20px,5.6vw,48px)/1 var(--display);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
@media (min-width:900px){.lib-stats{gap:var(--col-gap)}.lib-stats div{padding:var(--s5)}}
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(46%,210px),1fr));gap:var(--s2)}
@media (min-width:900px){.cats{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}}
.cat{display:grid;gap:var(--s3);padding:var(--s4);align-content:start;border-radius:var(--r2);background:var(--paper-2);text-decoration:none;transition:transform .15s var(--ease),box-shadow .2s}
.cat:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.cat-name{font:800 var(--t-lead)/1.1 var(--display);letter-spacing:-.03em}.cat-name::first-letter{text-transform:uppercase}
.bars{display:flex;align-items:flex-end;gap:2px;height:44px}
.bars i{flex:1;height:var(--h);border-radius:3px 3px 1px 1px;background:var(--ink);opacity:.2}
.bars i:first-child{background:var(--accent);opacity:1}
.cat-n{font-size:var(--t-small);color:var(--ink-3)}.cat-n b{color:var(--ink);font-variant-numeric:tabular-nums}
.back{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;margin:calc(-1*var(--s3)) 0 var(--s3);font-weight:600;text-decoration:none;color:var(--ink-2)}
.back svg{width:18px;height:18px;transform:rotate(180deg)}
.facts{list-style:none;margin:var(--s5) 0 0;padding:0;display:grid;gap:var(--s2)}
.facts li{color:var(--ink-2)}.facts b{color:var(--ink)}
@media (min-width:900px){.facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--col-gap)}.facts li{padding-top:var(--s3);border-top:1px solid var(--line)}}
.runs-sec{padding-bottom:var(--sec)}
main>section.page-head+section.runs-sec{border-top:0}
.runs{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.run{display:grid;grid-template-columns:32px 1fr;gap:var(--s3);padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.run-n{font:400 var(--t-small)/1.6 var(--mono);color:var(--ink-3)}
@media (min-width:900px){.run{grid-template-columns:48px 1fr;column-gap:var(--s4)}.run-n{font:800 var(--t-h3)/1 var(--display);letter-spacing:-.03em;color:var(--ink-3)}}
.run-top{display:flex;justify-content:space-between;gap:var(--s3);align-items:baseline}
.run-top>b{font:800 var(--t-lead)/1.15 var(--display);letter-spacing:-.025em}
.run-days{font-size:var(--t-small);color:var(--ink-3);white-space:nowrap}.run-days b{font:800 var(--t-lead) var(--display);color:var(--ink);font-variant-numeric:tabular-nums}
.run-bar{display:block;height:8px;margin:var(--s2) 0;border-radius:4px;background:var(--paper-2)}
.run-bar i{display:block;width:var(--w);height:100%;border-radius:4px;background:var(--ink)}
.run:first-child .run-bar i{background:var(--accent)}
.run-meta{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);font-size:var(--t-small);color:var(--ink-3)}
.run-meta a{display:inline-flex;align-items:center;gap:var(--s1);min-height:44px;margin:-10px 0;font-weight:600;color:var(--ink-2)}
.run-meta svg{width:14px;height:14px}
.run-note{margin-top:var(--s1);font-size:var(--t-small);color:var(--ink-3)}
.runs-sec .lib-fine{margin-top:var(--s4)}


/* ---------- footer ---------- */
.foot{width:min(100% - 2*var(--gut),var(--wrap));margin:0 auto;padding:var(--s7) 0 calc(var(--s6) + env(safe-area-inset-bottom));border-top:1px solid var(--line);display:grid;gap:var(--s4)}
.foot-top{display:grid;gap:var(--s2)}.foot-top p{color:var(--ink-3);font-size:var(--t-small);max-width:30em}
.foot-home{color:var(--ink);width:max-content;display:flex;align-items:center;min-height:44px}
.foot-links{display:flex;flex-wrap:wrap;gap:0 var(--s4)}
.foot-links a{display:inline-flex;align-items:center;min-height:44px;font-size:var(--t-small);color:var(--ink-2);text-decoration:none}.foot-links a:hover{color:var(--ink);text-decoration:underline}
.foot-fine{font-size:var(--t-label);color:var(--ink-3)}
@media (min-width:900px){.foot{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--col-gap);align-items:start}.foot>*{grid-column:2}.foot>.foot-top{grid-column:1;grid-row:1/span 3}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ---------- dark: the records need a rim to show on a dark page ---------- */
@media (prefers-color-scheme:dark){.tile{box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 18px 36px -22px rgba(0,0,0,.8)}.tile-disc{box-shadow:0 0 0 1px rgba(255,255,255,.18),0 6px 14px -6px rgba(0,0,0,.6)}}
@media (prefers-color-scheme:dark){.disc{box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 12px 30px -14px rgba(0,0,0,.7);background:radial-gradient(circle,var(--sl) 0 15%,#0b0b0b 15.5% 16.5%,transparent 17%),repeating-radial-gradient(circle,#26262a 0 1.5px,#161618 1.5px 3px)}.sleeve.is-blank .disc{background:radial-gradient(circle,var(--paper-3) 0 15%,transparent 16%),repeating-radial-gradient(circle,var(--paper-3) 0 1.5px,var(--paper-2) 1.5px 3px)}}

/* ---------- the hero's second door: for a founder who already wants to buy ---------- */
.hero .hero-order{order:6;margin-top:var(--s4);font-size:var(--t-small);color:var(--ink-3)}
.hero .hero-order .link{font-size:inherit}
@media (min-width:900px){.hero .hero-order{margin-top:var(--s5)}}

/* ---------- real brands: their ad beside ours, and their words (only with their yes, features/proof) ---------- */
.pairs{list-style:none;margin:0;padding:0;display:grid;gap:var(--s6)}
@media (min-width:900px){.pairs{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--col-gap)}}
.pair-ads{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.pair-ads figure{margin:0;display:grid;gap:var(--s2)}
.pair-ads figcaption{font:600 var(--t-label)/1.3 var(--mono);text-transform:uppercase;color:var(--ink-3)}
.pair-by{margin-top:var(--s3);font-size:var(--t-small);color:var(--ink-3)}.pair-by b{color:var(--ink)}
.ad-frame{position:relative;aspect-ratio:9/16;border-radius:var(--r2);overflow:hidden;background:#111;box-shadow:var(--shadow)}
.ad-frame video,.ad-frame img{width:100%;height:100%;object-fit:cover}
.ad-play{position:absolute;inset:0;display:grid;place-items:end start;padding:var(--s4);border:0;background:none;cursor:pointer;color:#111}
.ad-play svg{width:56px;height:56px;padding:16px;border-radius:50%;background:var(--accent);box-shadow:0 10px 24px -10px rgba(0,0,0,.6)}
.ad-play svg:last-child{display:none}
.ad.is-playing .ad-play{place-items:start end}
.ad.is-playing .ad-play svg{width:44px;height:44px;padding:12px;background:rgba(10,10,10,.7);color:#fff}
.ad.is-playing .ad-play svg:first-child{display:none}.ad.is-playing .ad-play svg:last-child{display:block}
.ad-play:focus-visible{outline:3px solid var(--accent);outline-offset:-3px;border-radius:var(--r2)}
.said-h{margin:var(--s7) 0 var(--s4)}
.saids{list-style:none;margin:0 0 var(--s5);padding:0;display:grid;gap:var(--s4)}
@media (min-width:640px){.saids{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--col-gap)}}
.said{padding:var(--s5);border-radius:var(--r2);background:var(--paper-2)}
.said blockquote{margin:0;font:800 var(--t-h3)/1.15 var(--display);letter-spacing:-.03em}
.said-by{margin-top:var(--s3);display:grid;font-size:var(--t-small);color:var(--ink-3)}.said-by b{color:var(--ink)}
.brands .sec-body>.link{margin-top:var(--s5)}

/* ---------- who you are buying from, under the prices ---------- */
.trust{list-style:none;margin:var(--s5) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);font-size:var(--t-small);color:var(--ink-3)}
.trust a{color:var(--ink-2);font-weight:600}

.proof-cats{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--s4);color:var(--ink-2)}
.prices-need{margin-top:var(--s2);font-size:var(--t-small);color:var(--ink-2)}

/* ---------- the For brands / For creators switch, on the front door only (lib/page.mjs sideSwitch) ---------- */
.side-switch{display:flex;gap:var(--s1);width:min(100% - 2*var(--gut),var(--wrap));margin:var(--s3) auto 0;font-size:var(--t-small)}
.side-switch a{display:inline-flex;align-items:center;min-height:36px;padding:0 var(--s4);border-radius:var(--pill);color:var(--ink-2);text-decoration:none;box-shadow:inset 0 0 0 1px var(--line-2)}
.side-switch a[aria-current="page"]{background:var(--ink);color:var(--paper);box-shadow:none;font-weight:700}
.proof-own{margin-top:var(--s4);color:var(--ink-2)}