/* FreeTA app. Sits on base.css (tokens, type, buttons, chips, the Wallet card). Light only.
   Phones: top bar + bottom tabs. Wide screens (900 px and up): side rail + content, radio docked right. */

:root{--tabs-h:62px;--bar-h:54px;--rail-w:0px;--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);
  --fr-bottom:var(--tabs-h)}
html{scroll-behavior:auto;-webkit-tap-highlight-color:transparent}
body.app{min-height:100vh;min-height:100dvh;background:var(--paper);overscroll-behavior-y:none;
  padding:0 var(--sar) calc(var(--tabs-h) + var(--sab) + var(--fr-h,0px) + 16px) var(--sal)}
.app a{text-decoration:none}
.app p a,.note a{text-decoration:underline;text-underline-offset:3px}
.skip{position:fixed;left:12px;top:-80px;z-index:200;background:var(--ink);color:#fff;padding:10px 14px;border-radius:12px;font-weight:700}
.skip:focus{top:calc(12px + var(--sat))}
.view:focus{outline:none}
.view{overflow-x:clip}   /* a screen sliding in must never widen the page */
.center{text-align:center;justify-content:center}
.pad{padding:24px}

/* ---------- top bar (phones) ---------- */
.bar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:10px;height:calc(var(--bar-h) + var(--sat));padding:var(--sat) 14px 0 18px;
  background:rgba(255,249,240,.9);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.bar .wordmark{font-size:25px;color:var(--ink)}
.bar-cta{margin-left:auto}
.bar-sub{padding-left:6px}
.bar-back{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--ink)}
.bar-back:active{background:var(--t-lilac)}
.bar-title{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-.012em}

/* ---------- bottom tabs (phones) ---------- */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:repeat(5,1fr);height:calc(var(--tabs-h) + var(--sab));
  padding:0 max(6px,var(--sal)) var(--sab) max(6px,var(--sar));background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);box-shadow:0 -10px 30px -18px rgba(60,20,90,.35)}
.tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--ink-2);font-family:var(--ui);font-weight:700;font-size:11.5px;min-width:0;-webkit-touch-callout:none;user-select:none}
.tab svg{width:26px;height:26px;padding:2px 14px;box-sizing:content-box;border-radius:999px;transition:background-color .2s,color .2s,transform .25s var(--ease)}
.tab[aria-current]{color:var(--ink)}
.tab[aria-current] svg{background:var(--pink);color:#fff;transform:translateY(-1px)}
.tab:nth-child(2)[aria-current] svg{background:var(--violet)}
.tab:nth-child(3)[aria-current] svg{background:var(--teal)}
.tab:nth-child(4)[aria-current] svg{background:var(--orange)}
.tab:nth-child(5)[aria-current] svg{background:var(--ink)}
.tab:active svg{transform:scale(.92)}

/* ---------- side rail (wide screens) ---------- */
.rail{display:none}

/* ---------- demo ribbon: shown only when the server runs in demo mode. Sits under the top bar, never over the tabs or the radio. ---------- */
.demo-ribbon{position:sticky;top:calc(var(--bar-h) + var(--sat));z-index:39;background:var(--t-butter);color:var(--ink);border-bottom:1px solid var(--line);text-align:center;font-family:var(--ui);font-weight:700;font-size:12.5px;line-height:1;letter-spacing:.01em;padding:7px 12px}
.demo-ribbon[hidden]{display:none}
/* policy site.notice: the ribbon's type, quieter and not sticky */
.site-notice{position:static;background:var(--paper-2);color:var(--ink-2);font-weight:600;line-height:1.35}

/* ---------- offline ---------- */
.offline{background:var(--ink);color:#fff;text-align:center;font-weight:600;font-size:14px;padding:8px 16px}
.offline[hidden]{display:none}

/* ---------- screens ---------- */
.screen{max-width:680px;margin:0 auto}
.block{padding:22px 18px 4px}
.block > .h2{margin-bottom:12px}
.app .h1{font-size:clamp(38px,10.5vw,56px);line-height:.98}
.app .h2{font-size:clamp(26px,6.6vw,34px);line-height:1.04}
.app .h3{font-size:21px;line-height:1.1}
.app .lede{font-size:18px;line-height:1.4;color:var(--ink-2);margin-top:10px;max-width:32em}
.lede-s{color:var(--ink-2);margin:-4px 0 14px}
.note{font-size:13.5px;line-height:1.45;color:var(--ink-2);margin-top:14px}
.empty{color:var(--ink-2);padding:18px 0}
.app .sample{display:inline-block;font-family:var(--ui);font-weight:700;font-size:11.5px;letter-spacing:.02em;color:var(--ink-2);background:rgba(29,18,51,.07);padding:3px 9px;border-radius:999px;margin:0}
.row-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.row-h .h2{margin:0}
.more-link{display:inline-flex;align-items:center;gap:2px;font-family:var(--ui);font-weight:700;font-size:15px;color:var(--violet);white-space:nowrap}
.more-link svg{width:18px;height:18px}
.t-pink{--tint:var(--t-pink)}.t-peach{--tint:var(--t-peach)}.t-butter{--tint:var(--t-butter)}.t-mint{--tint:var(--t-mint)}.t-lilac{--tint:var(--t-lilac)}.t-sky{--tint:var(--t-sky)}
.app .btn-row{margin-top:16px}

/* screen header: one strong picture, then the words */
.top{background:var(--tint);border-radius:0 0 var(--r-l) var(--r-l);overflow:hidden}
.top-art{margin:0;aspect-ratio:16/10;overflow:hidden}
.top-art img{width:100%;height:100%;object-fit:cover}
.top-copy{padding:18px 18px 24px}
.plain-top{padding:22px 18px 0}

/* ---------- Home ---------- */
.hero-home{position:relative;border-radius:0 0 var(--r-l) var(--r-l);overflow:hidden;background:var(--t-peach)}
.hero-home-art{margin:0;aspect-ratio:4/3;overflow:hidden}
.hero-home-art img{width:100%;height:100%;object-fit:cover}
.hero-home-copy{padding:16px 18px 24px}
.count{display:inline-flex;align-items:baseline;gap:5px;background:var(--ink);color:#fff;border-radius:999px;padding:7px 16px 7px 14px;margin-bottom:14px;font-family:var(--ui);font-weight:700;font-size:13px}
.count b{font-family:var(--display);font-weight:800;font-size:22px;line-height:1;color:var(--sun);font-variant-numeric:tabular-nums}
.count span{margin-right:7px;opacity:.85}
.count span:last-child{margin-right:0}
.count .count-out{opacity:1;font-size:15px}
.home-card{padding-top:22px}
.home-card-in{background:var(--tint);border-radius:var(--r-l);padding:22px 18px 20px;display:grid;gap:18px;justify-items:center;text-align:center}
.home-card-copy p{color:var(--ink-2);margin-top:6px}
.home-card .btn-row{justify-content:center}
.home-card .sample{margin-top:14px}
.fcard.fcard-s{width:min(250px,70vw);border-radius:22px}
.fcard-s .fcard-amt b{font-size:30px}
.fcard-s .fcard-top{padding:10px 13px}
.fcard-s .fcard-main{padding:10px 13px 13px}
/* Home leads with the card, then one compact countdown strip (no art) */
.home-lead{padding-top:16px}
.home-lead .home-card-in{box-shadow:inset 0 0 0 1px rgba(107,75,255,.12)}
.home-lead .lede{margin-top:8px}
.home-strip{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--tint);border-radius:var(--r);padding:14px 16px}
.home-strip .count{margin:0;flex:none}
.home-strip-copy{display:grid;gap:2px;min-width:0;flex:1 1 200px}
.home-strip-copy b{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.012em;line-height:1.1}
.home-strip-copy span{color:var(--ink-2);font-size:15px;line-height:1.35}
/* radio rows: the 30-second preview plays on tap; Full song opens the whole track */
.song-row{display:flex;align-items:center;gap:6px}
.song-row .song{flex:1 1 auto;min-width:0}
.song-full{flex:none;min-height:38px;padding:0 13px;font-size:13.5px}
.radio-links{display:flex;flex-wrap:wrap;gap:8px 18px}
.radio-links a{display:inline-flex;align-items:center;gap:3px;font-weight:700;color:var(--violet)}
.radio-links svg{width:15px;height:15px}
.next{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--tint);border-radius:var(--r);padding:16px 18px}
.next p{color:var(--ink-2);font-size:15.5px;margin-top:3px}
.next .btn{flex:none}
.radio-card{display:grid;grid-template-columns:minmax(0,1fr) 128px;align-items:center;gap:8px;background:var(--tint);border-radius:var(--r-l);padding:18px 0 18px 18px;overflow:hidden}
.radio-card p{color:var(--ink-2);margin-top:6px;font-size:15.5px}
.radio-card p b{color:var(--ink)}
.radio-card-art{margin:0;align-self:stretch;min-height:150px;border-radius:var(--r) 0 0 var(--r);overflow:hidden}
.radio-card-art img{width:100%;height:100%;object-fit:cover;object-position:30% 50%}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{display:block;background:var(--tint);border-radius:var(--r);overflow:hidden;color:var(--ink);transition:transform .25s var(--ease)}
.tile figure{margin:0;aspect-ratio:4/3;overflow:hidden}
.tile img{width:100%;height:100%;object-fit:cover}
.tile b{display:block;padding:10px 14px 13px;font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.012em}
.tile:active{transform:scale(.97)}

/* ---------- stories ---------- */
.stories{display:grid;gap:10px}
.story{position:relative;display:grid;gap:5px;background:var(--white);border-radius:var(--r);padding:14px 44px 15px 16px;box-shadow:0 0 0 1px var(--line);color:var(--ink);transition:transform .2s var(--ease)}
.story:active{transform:scale(.985)}
.story-meta{font-size:13px;color:var(--ink-2)}
.story-meta b{color:var(--pink);font-weight:700}
.story:nth-child(4n+2) .story-meta b{color:var(--violet)}
.story:nth-child(4n+3) .story-meta b{color:var(--teal)}
.story:nth-child(4n+4) .story-meta b{color:var(--orange)}
.story-t{font-weight:700;font-size:17px;line-height:1.28}
.story > svg{position:absolute;right:14px;top:14px;width:18px;height:18px;color:var(--ink-2)}
.skel{min-height:74px}
.skel span{display:block;height:12px;border-radius:6px;background:rgba(29,18,51,.08);width:30%}
.skel span + span{width:85%;height:16px;margin-top:6px}
.seg{display:grid;grid-template-columns:1fr 1fr;background:rgba(29,18,51,.07);border-radius:999px;padding:4px;margin-bottom:14px}
.seg a{display:grid;place-items:center;min-height:42px;border-radius:999px;font-family:var(--ui);font-weight:700;font-size:15.5px;color:var(--ink-2)}
.seg a[aria-selected="true"]{background:var(--white);color:var(--ink);box-shadow:0 2px 8px rgba(60,20,90,.14)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips-s .chip{min-height:38px;padding:0 14px;font-size:14px}
.scroll-x{flex-wrap:nowrap;overflow-x:auto;margin:0 -18px 14px;padding:2px 18px;scrollbar-width:none}
.scroll-x::-webkit-scrollbar{display:none}
.scroll-x .chip{flex:none}

/* ---------- videos ---------- */
.vids{display:grid;gap:20px}
.vid-frame{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:var(--t-lilac);border:0}
.vid-frame img{width:100%;height:100%;object-fit:cover}
.vid-play{position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;background:var(--pink);color:#fff;display:grid;place-items:center;box-shadow:0 10px 24px -8px rgba(120,0,40,.6)}
.vid-play svg{width:30px;height:30px}
.vid-len{position:absolute;right:10px;bottom:10px;background:rgba(29,18,51,.82);color:#fff;font-size:12.5px;font-weight:700;padding:2px 8px;border-radius:8px}
.vid-t{font-family:var(--body);font-weight:700;font-size:17px;line-height:1.28;margin-top:10px}
.vid-m{font-size:13px;color:var(--ink-2);margin-top:3px}
.vid.skel{min-height:240px;border-radius:var(--r);background:rgba(29,18,51,.05)}
.vid.skel span{display:none}

/* ---------- Card ---------- */
.card-stage{display:grid;justify-items:center;gap:14px}
.card-stage .chips{justify-content:center}
.flip{perspective:1400px;width:min(330px,82vw)}
.flip-in{display:grid;transform-style:preserve-3d;transition:transform .7s var(--ease)}
.flip-front,.flip-back{grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flip-back{transform:rotateY(180deg)}
.flip[data-side="back"] .flip-in{transform:rotateY(180deg)}
.flip .fcard{width:100%}
.reduce .flip-in{transition:none}
.pback{height:100%;background:var(--white);border-radius:26px;box-shadow:var(--shadow-pop),0 0 0 1px var(--line);overflow:hidden}
.pback-top{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--line)}
.pback-top .wordmark{font-size:19px}
.pb-list{list-style:none;margin:0;padding:2px 16px 8px}
.pb-row{display:grid;gap:1px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.35}
.pb-row:last-child{border-bottom:0}
.pb-l{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.pb-l .sample{text-transform:none;letter-spacing:0;font-size:10.5px;padding:1px 7px}
.pb-l svg{width:15px;height:15px;color:var(--teal);stroke-width:3}
.pb-v a{color:#0A6CFF;font-weight:600}
.pb-done .pb-v{color:var(--ink-2)}
.fill-l{display:block;text-align:center;font-family:var(--ui);font-weight:700;font-size:14px;color:var(--ink-2);margin-bottom:8px}
.front-only,.back-only{width:min(330px,82vw)}
.back-only .chips{justify-content:center}
.fill{-webkit-appearance:none;appearance:none;display:block;width:100%;height:32px;background:none;margin:0}
.fill::-webkit-slider-runnable-track{height:12px;border-radius:999px;background:linear-gradient(90deg,var(--orange),var(--pink)) 0/var(--v,32%) 100% no-repeat,rgba(29,18,51,.1)}
.fill::-moz-range-track{height:12px;border-radius:999px;background:linear-gradient(90deg,var(--orange),var(--pink)) 0/var(--v,32%) 100% no-repeat,rgba(29,18,51,.1)}
.fill::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;margin-top:-9px;border-radius:50%;background:#fff;border:4px solid var(--pink);box-shadow:0 4px 10px rgba(120,0,40,.3)}
.fill::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:4px solid var(--pink)}
.steps,.tips{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.steps li,.tip{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;background:var(--white);border-radius:var(--r);padding:16px;box-shadow:0 0 0 1px var(--line)}
.steps p,.tip p{color:var(--ink-2);margin-top:3px;font-size:15.5px}
.step-n{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--violet);color:#fff;font-family:var(--display);font-weight:800;font-size:20px}
li:nth-child(3n+2) > .step-n{background:var(--pink)}
li:nth-child(3n+3) > .step-n{background:var(--teal)}

/* ---------- Friends ---------- */
.seats{list-style:none;display:flex;justify-content:center;gap:10px;margin:6px 0 0;padding:0}
.seat{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:22px;color:var(--ink-2);border:2.5px dashed rgba(29,18,51,.28);background:var(--white)}
.seats-note{color:var(--ink-2);margin-top:12px}

/* ---------- More ---------- */
.menu{display:grid;gap:10px}
.menu-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;width:100%;text-align:left;background:var(--white);border-radius:var(--r);padding:10px 14px 10px 10px;box-shadow:0 0 0 1px var(--line);color:var(--ink);transition:transform .2s var(--ease)}
.menu-row:active{transform:scale(.985)}
.menu-row figure{margin:0;width:68px;height:68px;border-radius:16px;overflow:hidden;background:var(--tint)}
.menu-row figure img{width:100%;height:100%;object-fit:cover}
.menu-row b{display:block;font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:-.012em;line-height:1.1}
.menu-row small{display:block;font-size:14px;color:var(--ink-2);margin-top:2px}
.menu-row > svg{width:20px;height:20px;color:var(--ink-2)}
.menu-ic{display:grid;place-items:center;width:48px;height:48px;margin:0 10px;border-radius:14px;background:var(--t-lilac);color:var(--violet)}
.menu-plain .menu-row b{font-family:var(--body);font-size:17px;letter-spacing:0}

/* ---------- Radio ---------- */
.now{display:grid;gap:14px;background:var(--tint);border-radius:var(--r-l);padding:18px}
.now-l{font-family:var(--ui);font-weight:700;font-size:13px;color:var(--ink-2)}
.now-t{font-family:var(--display);font-weight:800;font-size:28px;line-height:1.05;letter-spacing:-.012em;margin-top:2px}
.now-a{color:var(--ink-2);margin-top:2px}
.now-ctl{display:flex;gap:10px;flex-wrap:wrap}
.songs{list-style:none;margin:0;padding:0}
.songs-h{font-family:var(--ui);font-weight:700;font-size:13px;color:var(--ink-2);padding:14px 4px 6px}
.song{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:8px;width:100%;text-align:left;padding:9px 10px 9px 4px;border-radius:14px;min-height:54px}
.song i{font-style:normal;text-align:center;font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.song b{display:block;font-weight:700;font-size:16px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.song small{display:block;font-size:13.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.song em{font-style:normal;font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.song.on{background:var(--t-pink)}
.song.on i{color:var(--pink);font-weight:800}
.song:active{background:var(--t-lilac)}

/* ---------- Launch night ---------- */
.poll{background:var(--tint);border-radius:var(--r-l);padding:18px}
.poll-opts{display:grid;gap:8px;margin-top:12px}
.poll-opt{display:flex;align-items:center;justify-content:space-between;min-height:50px;padding:0 16px;border-radius:16px;background:var(--white);font-weight:700;font-size:16px;box-shadow:0 0 0 1.5px rgba(29,18,51,.16);text-align:left}
.poll-opt svg{width:20px;height:20px;opacity:0;stroke-width:3}
.poll-opt[aria-pressed="true"]{background:var(--ink);color:#fff;box-shadow:none}
.poll-opt[aria-pressed="true"] svg{opacity:1;color:var(--sun)}
.threads{display:grid;gap:10px}
.thread{position:relative;background:var(--tint);border-radius:var(--r);padding:15px 16px 16px}
.thread p{color:var(--ink-2);font-size:15.5px;margin-top:3px;max-width:30em}
.thread .sample{position:absolute;right:12px;top:12px;background:rgba(255,255,255,.7)}
.thread .h3{padding-right:70px}

/* ---------- Tips + deals ---------- */
.tip-f{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:8px !important}
.tip-f:empty{display:none}
.tag{display:inline-block;font-family:var(--ui);font-weight:700;font-size:12px;padding:3px 9px;border-radius:999px;background:var(--t-butter);color:#6A4B00}
.tag-confirmed{background:var(--t-mint);color:#06594F}
.src{display:inline-flex;align-items:center;gap:3px;font-size:13.5px;font-weight:600;color:var(--ink-2);text-decoration:underline !important;text-underline-offset:3px}
.src svg{width:13px;height:13px}
.facts{margin:0;display:grid;gap:0;background:var(--white);border-radius:var(--r);box-shadow:0 0 0 1px var(--line);padding:4px 16px}
.facts > div{padding:12px 0;border-bottom:1px solid var(--line)}
.facts > div:last-child{border-bottom:0}
.facts dt{font-size:13px;font-weight:700;color:var(--ink-2)}
.facts dd{margin:2px 0 0;display:grid;gap:6px}
.facts dd b{font-size:17px}
.facts dd span{display:flex;align-items:center;gap:10px}
.deal{background:var(--tint);border-radius:var(--r-l);padding:20px 18px}
.deal .h2{margin:10px 0 8px}
.deal p{color:var(--ink-2)}
.prices{list-style:none;margin:0;padding:4px 16px;background:var(--white);border-radius:var(--r);box-shadow:0 0 0 1px var(--line)}
.prices li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.prices li:last-child{border-bottom:0}
.prices small{display:block;font-size:13.5px;color:var(--ink-2)}
.prices .num{font-family:var(--display);font-weight:800;font-size:24px}

/* ---------- Help ---------- */
.faq{display:grid;gap:10px}
.faq details{background:var(--white);border-radius:var(--r);box-shadow:0 0 0 1px var(--line);padding:0 16px}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;font-weight:700;font-size:17px}
.faq summary::-webkit-details-marker{display:none}
/* plus and minus are drawn bars, not type: a soft circle with two pink bars; open hides the upright one */
.faq summary::after{content:"";flex:none;width:28px;height:28px;border-radius:50%;
  background:linear-gradient(var(--pink),var(--pink)) center/14px 2.5px no-repeat,linear-gradient(var(--pink),var(--pink)) center/2.5px 14px no-repeat,var(--paper-2);transition:background-size .2s var(--ease)}
.faq details[open] summary::after{background-size:14px 2.5px,0 0}
.faq details p{color:var(--ink-2);padding:0 0 16px;max-width:36em}
.fine{color:var(--ink-2);font-size:13.5px;line-height:1.5;padding-bottom:10px;scroll-margin-top:calc(var(--bar-h) + var(--sat) + 10px)}
.fine .h3{color:var(--ink);margin-bottom:8px}
.fine p + p{margin-top:8px}

/* ---------- toast + sheet ---------- */
.toast{position:fixed;left:50%;bottom:calc(var(--tabs-h) + var(--sab) + var(--fr-h,0px) + 14px);z-index:90;transform:translate(-50%,12px);opacity:0;background:var(--ink);color:#fff;font-weight:700;font-size:15px;padding:11px 18px;border-radius:999px;max-width:calc(100vw - 32px);transition:opacity .2s,transform .25s var(--ease);pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast[hidden]{display:none}
.sheet-bg{position:fixed;inset:0;z-index:100;background:rgba(29,18,51,.4)}
.sheet-bg[hidden],.sheet-up[hidden]{display:none}
.sheet-up{position:fixed;left:0;right:0;bottom:0;z-index:101;background:var(--paper);border-radius:var(--r-l) var(--r-l) 0 0;padding:26px 22px calc(24px + var(--sab));max-width:520px;margin:0 auto;text-align:center;animation:sheetUp .35s var(--ease)}
.sheet-up p{color:var(--ink-2);margin-top:6px}
.sheet-up .btn{margin-top:18px;width:100%}
.sheet-icon{width:72px;height:72px;border-radius:18px;margin:0 auto 14px;box-shadow:var(--shadow)}
.sheet-x{position:absolute;right:12px;top:12px;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;color:var(--ink-2)}
.a2hs{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px;text-align:left}
.a2hs li{display:flex;align-items:center;gap:12px;background:var(--white);border-radius:16px;padding:12px 14px;box-shadow:0 0 0 1px var(--line)}
.a2hs i{font-style:normal;display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--violet);color:#fff;font-weight:800;font-size:15px}
.a2hs span{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.a2hs svg{width:20px;height:20px;color:#0A6CFF}
@keyframes sheetUp{from{transform:translateY(40px);opacity:0}}
.sheet-open{overflow:hidden}
/* the radio must never sit under a sheet: it steps aside while one is open (the player stays in place and visible when open) */
.sheet-open .fr[data-state="collapsed"]{visibility:hidden}

/* ---------- screen changes ---------- */
@keyframes tabIn{from{opacity:0;transform:translateY(8px)}}
@keyframes pushIn{from{opacity:0;transform:translateX(26px)}}
@keyframes pushOut{from{opacity:0;transform:translateX(-26px)}}
.enter-tab{animation:tabIn .26s var(--ease) both}
.enter-in{animation:pushIn .3s var(--ease) both}
.enter-out{animation:pushOut .3s var(--ease) both}
.view{view-transition-name:view}
::view-transition-group(root){animation:none}
::view-transition-old(root),::view-transition-new(root){animation:none}
::view-transition-old(view){animation:vtOut .16s ease both}
::view-transition-new(view){animation:tabIn .28s var(--ease) both}
html[data-nav="in"]::view-transition-new(view){animation-name:pushIn}
html[data-nav="out"]::view-transition-new(view){animation-name:pushOut}
@keyframes vtOut{to{opacity:0}}
@media (prefers-reduced-motion: reduce){ .enter-tab,.enter-in,.enter-out,.sheet-up{animation:none} ::view-transition-old(view),::view-transition-new(view){animation:none} }

/* the app radio: no CTA inside, and on phones the button sits just above the tabs */
.app .fr{z-index:45}

/* ---------- small phones ---------- */
@media (max-width:359px){ .tab{font-size:10.5px} .tab svg{padding:2px 10px} .radio-card{grid-template-columns:minmax(0,1fr) 96px} }

/* ---------- two columns on big phones and small tablets ---------- */
@media (min-width:620px){
  .vids,.threads,.tiles{grid-template-columns:1fr 1fr}
  .tiles{grid-template-columns:repeat(4,1fr)}
}

/* ================= wide screens: side rail + content ================= */
@media (min-width:900px){
  :root{--tabs-h:0px;--rail-w:236px;--fr-bottom:0px}
  body.app{padding:0 0 calc(var(--fr-h,0px) + 40px) var(--rail-w)}
  .tabs,.bar{display:none}
  .demo-ribbon{top:0;border-radius:0 0 12px 12px;border:1px solid var(--line);border-top:0;max-width:max-content;margin:-28px auto 0}
  .rail{display:flex;flex-direction:column;gap:6px;position:fixed;left:0;top:0;bottom:0;width:var(--rail-w);z-index:50;padding:26px 16px 22px;background:var(--white);border-right:1px solid var(--line);overflow-y:auto}
  .rail-logo{font-size:32px;color:var(--ink);padding:0 12px 14px}
  .rail-list{display:grid;gap:2px}
  .rail-item{display:flex;align-items:center;gap:12px;min-height:46px;padding:0 12px;border-radius:14px;font-family:var(--ui);font-weight:700;font-size:16px;color:var(--ink-2);transition:background-color .15s,color .15s}
  .rail-item svg{width:22px;height:22px;flex:none}
  .rail-item:hover{background:var(--paper-2);color:var(--ink)}
  .rail-item[aria-current]{background:var(--t-pink);color:var(--ink)}
  .rail-item[aria-current] svg{color:var(--pink)}
  .rail-cta{margin-top:auto}
  .shell{padding:28px clamp(24px,3.4vw,56px) 0}
  .screen{max-width:1040px}
  .block{padding:30px 0 4px}
  .app .h1{font-size:clamp(46px,4.6vw,72px)}
  .app .h2{font-size:34px}
  .top,.hero-home{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;border-radius:var(--r-l);min-height:340px}
  .top-art,.hero-home-art{order:2;aspect-ratio:auto;height:100%;min-height:340px}
  .top-copy,.hero-home-copy{padding:36px clamp(28px,3.4vw,52px)}
  .plain-top{padding:8px 0 0}
  .home-card-in{grid-template-columns:auto minmax(0,1fr);justify-items:start;text-align:left;gap:36px;padding:34px 40px;align-items:center}
  .home-card .btn-row{justify-content:flex-start}
  .stories{grid-template-columns:1fr 1fr;gap:12px}
  .screen-home .stories{grid-template-columns:repeat(3,1fr)}
  .vids{grid-template-columns:repeat(2,1fr);gap:26px 22px}
  .seg{display:none}
  .threads{grid-template-columns:repeat(2,1fr)}
  .steps,.tips{grid-template-columns:repeat(3,1fr)}
  .tips{grid-template-columns:repeat(2,1fr)}
  .menu{grid-template-columns:repeat(2,1fr)}
  .card-stage{grid-template-columns:auto minmax(0,360px);grid-template-areas:"flip chips" "flip ctl" "flip btns" "note btns2";justify-content:center;justify-items:start;column-gap:56px;align-content:center}
  .card-stage > .chips{grid-area:chips;justify-content:flex-start;align-self:end}
  .card-stage > .flip{grid-area:flip;grid-row:1 / span 3}
  .card-stage > [data-side-note]{grid-area:note;justify-self:center}
  .card-stage > .front-only,.card-stage > .back-only{grid-area:ctl;width:100%}
  .card-stage > .btn-row{grid-area:btns;justify-content:flex-start;margin-top:0}
  .card-stage > .note{grid-area:btns2;text-align:left;margin-top:0}
  .card-stage .fill-l,.card-stage .back-only .chips{text-align:left;justify-content:flex-start}
  .faq,.facts,.prices,.poll,.deal,.now{max-width:720px}
  .songs{columns:2;column-gap:28px}
  .songs li{break-inside:avoid}
  .radio-card{grid-template-columns:minmax(0,1fr) 300px;padding:30px 0 30px 40px}
  .radio-card-art{min-height:200px}
  .next{padding:22px 26px}
  .toast{bottom:28px;left:calc(50% + var(--rail-w)/2)}
  .sheet-up{bottom:auto;top:50%;transform:translateY(-50%);border-radius:var(--r-l)}
  .fine{max-width:720px}
}
@media (min-width:1500px){
  .screen-home .tiles{gap:18px}
  .vids{grid-template-columns:repeat(3,1fr)}
}