/* ============================================================
   Bella Veronica — mobile
   Layout language from the SIDE A app: oversized two tone
   headlines, chip rows, collage stickers, full width pill CTAs,
   a thumb rail. Palette from Moon Play: lavender, plum, pink.
   The chrome crest only ever sits on a plum block, because a
   neon glow needs darkness to be a glow.
   ============================================================ */

:root{
  --lav-50:#F7F3FE;
  --lav-100:#EFE8FB;
  --lav-200:#DED2F5;
  --lav-300:#C6B1ED;

  --violet:#6D4BC7;        /* white on this is 6.07:1 */
  --violet-lt:#8B6BE0;
  --pink:#FF6EC7;          /* ink on this is 6.6:1, white would be 2.5 */
  --pink-soft:#F9B6E4;

  --plum-900:#1B1236;
  --plum-800:#271A4D;
  --plum-700:#3A2870;

  --ink:#1A1030;
  --ink-2:#5B4A7D;         /* 7.0:1 on lav-50 */
  --on-dark:#FFFFFF;
  --on-dark-2:#B9A8DC;     /* 7.3:1 on plum-900 */

  --line:rgba(26,16,48,.10);
  --line-dark:rgba(255,255,255,.14);

  --ui:"Schibsted Grotesk",system-ui,-apple-system,sans-serif;
  --display:"Bricolage Grotesque","Schibsted Grotesk",system-ui,sans-serif;
  --hand:"Caveat",cursive;

  --pad:20px;
  --r-lg:26px;
  --r-md:18px;
  --r-sm:12px;

  /* 3D lighting (owner, 2026-09-29): a white lit edge on top, soft light from
     the top left, a lavender tinted shade below. Every box and button uses one
     of these three stacks. */
  --lift:inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(39,26,77,.06), -6px -6px 16px rgba(255,255,255,.75), 0 10px 22px -6px rgba(39,26,77,.2), 0 26px 52px -18px rgba(39,26,77,.28);
  --lift-hi:inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(39,26,77,.06), -6px -6px 18px rgba(255,255,255,.8), 0 14px 30px -8px rgba(39,26,77,.26), 0 34px 70px -22px rgba(39,26,77,.34);
  --lift-dark:inset 0 1px 0 rgba(255,255,255,.35), inset 0 -3px 0 rgba(0,0,0,.16), 0 4px 10px rgba(0,0,0,.32), 0 14px 30px rgba(0,0,0,.28);
  --surf:linear-gradient(160deg,#FFFFFF 0%,#F4EFFC 100%);
  --surf-edge:1px solid rgba(255,255,255,.9);
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,ul,ol,dl,dd{margin:0}
ul,ol{list-style:none;padding:0}
img,svg{display:block;max-width:100%}
img{height:auto}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}

body{
  font-family:var(--ui);
  font-size:15px;
  line-height:1.55;
  color:var(--ink);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  padding-bottom:calc(96px + env(safe-area-inset-bottom,0px));
}

::selection{background:var(--pink);color:var(--ink)}
:root{caret-color:var(--violet)}
::-webkit-scrollbar{width:0;height:0}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:6px}

/* ---------- type ---------- */
.h-xl{
  font-family:var(--display);
  font-size:clamp(34px,10.2vw,46px);
  font-weight:800;
  line-height:.98;
  letter-spacing:-.035em;
  text-wrap:balance;
}
.h-lg{font-family:var(--display);font-size:27px;font-weight:800;line-height:1.05;letter-spacing:-.03em}
.h-md{font-family:var(--display);font-size:19px;font-weight:700;line-height:1.15;letter-spacing:-.02em}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.sec-h a{font-size:13px;font-weight:600;color:var(--violet);
  display:inline-block;padding:6px 8px;margin:-6px -8px}
.muted{color:var(--ink-2)}
.hand{font-family:var(--hand);font-size:19px;line-height:1.2}

.wrap{padding-inline:var(--pad)}
.sec{padding-block:26px}

/* ---------- top bar ---------- */
.bar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:10px var(--pad);
  padding-top:calc(10px + env(safe-area-inset-top,0px));
  background:rgba(255,255,255,.84);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
}
.bar__brand{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:800;letter-spacing:-.03em;font-size:16px}
.bar__brand img{width:26px;height:26px;object-fit:contain}
.icon-btn{
  display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:var(--surf);box-shadow:var(--lift);color:var(--ink);
  border:var(--surf-edge);border-bottom-color:rgba(39,26,77,.12);
}
.icon-btn .i{width:19px;height:19px}

.i{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ============================================================
   HERO — the SIDE A opener, in plum
   ============================================================ */
.hero{
  position:relative;
  margin:6px var(--pad) 0;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--plum-900);
  color:var(--on-dark);
  isolation:isolate;
  border:1px solid rgba(255,255,255,.06);
  border-top-color:rgba(255,255,255,.3);
  border-bottom-color:rgba(0,0,0,.6);
  box-shadow:0 26px 54px -16px rgba(27,18,54,.55), 0 8px 18px -8px rgba(27,18,54,.4);
}
.hero__ph{position:absolute;inset:0;z-index:0}
/* The photo and the crest sit on different depths. js writes finished pixel
   lengths into --px/--cx; never add a transition here, Chrome will refuse to
   apply a custom-property-driven transform while one is set. */
.hero__ph img{
  width:100%;height:100%;object-fit:cover;object-position:52% 22%;opacity:.5;
  transform:translate3d(var(--px,0px),var(--py,0px),0) scale(1.1);
  will-change:transform;
}
.hero__ph::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to top, var(--plum-900) 16%, rgba(27,18,54,.78) 46%, rgba(27,18,54,.25) 78%),
    radial-gradient(70% 50% at 78% 12%, rgba(255,110,199,.34), transparent 70%);
}
.hero__in{position:relative;z-index:2;padding:22px 20px 20px}
/* No glow here. The crest artwork already carries its own neon; stacking a
   pink CSS halo on top of it just muddies the chrome. */
.hero__crest{
  width:min(62%,210px);margin:2px auto 18px;
  transform:translate3d(var(--cx,0px),var(--cy,0px),0);
  will-change:transform;
}
.hero h1{margin-bottom:10px}
.hero h1 em{font-style:normal;color:var(--pink)}
.hero__sub{color:var(--on-dark-2);font-size:14.5px;max-width:30ch;margin-bottom:18px}

/* full width pill, the SIDE A "Start listening" move */
.cta{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:54px;padding:0 20px;
  border-radius:99px;
  background:linear-gradient(180deg,#FF93D6 0%,var(--pink) 46%,#F25CB9 100%);color:var(--ink);
  font-size:15.5px;font-weight:700;letter-spacing:-.01em;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.6), inset 0 -4px 0 rgba(0,0,0,.16), inset 0 0 0 1px rgba(26,16,48,.12), 0 12px 24px -8px rgba(255,110,199,.7), 0 16px 32px -12px rgba(39,26,77,.3);
  transition:transform .2s var(--ease),filter .2s var(--ease),box-shadow .2s var(--ease);
}
.cta:hover{transform:translateY(-1px);filter:brightness(1.03)}
.cta:active{transform:translateY(1px) scale(.985);box-shadow:inset 0 3px 8px rgba(0,0,0,.22), inset 0 0 0 1px rgba(26,16,48,.12), 0 4px 10px -6px rgba(39,26,77,.3)}
.cta .i{width:19px;height:19px;stroke-width:2}
.cta--violet{background:linear-gradient(180deg,#9A7BEA 0%,var(--violet) 48%,#5A3BAE 100%);color:#fff;box-shadow:inset 0 2px 0 rgba(255,255,255,.3), inset 0 -4px 0 rgba(0,0,0,.28), inset 0 0 0 1px rgba(26,16,48,.2), 0 12px 24px -8px rgba(109,75,199,.6), 0 16px 32px -12px rgba(39,26,77,.3)}
.cta--ghost{background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.07));color:var(--on-dark);border:1px solid rgba(255,255,255,.16);border-top-color:rgba(255,255,255,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.2), inset 0 -3px 0 rgba(0,0,0,.35), 0 12px 26px -10px rgba(0,0,0,.6)}

/* collage stickers, the thing that makes SIDE A feel made by hand */
.sticker{
  position:absolute;z-index:3;
  padding:8px 13px;border-radius:3px;
  font-family:var(--hand);font-size:17px;line-height:1.15;
  box-shadow:var(--lift-dark);
}
.sticker--note{top:14px;left:14px;background:var(--lav-100);color:var(--ink);transform:rotate(-7deg);max-width:132px}
.badge-round{
  position:absolute;z-index:3;right:12px;top:96px;
  width:84px;height:84px;border-radius:50%;
  background:var(--pink);color:var(--ink);
  display:grid;place-items:center;text-align:center;
  font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;line-height:1.22;
  transform:rotate(-11deg);
  box-shadow:var(--lift-dark);
}

/* ---------- chips ---------- */
.chips{
  display:flex;gap:8px;overflow-x:auto;
  padding:2px var(--pad) 2px;
  margin-inline:0;
  scrollbar-width:none;
}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:none;min-height:38px;padding:0 17px;
  display:inline-flex;align-items:center;
  border-radius:99px;
  background:var(--surf);color:var(--ink-2);
  font-size:13.5px;font-weight:600;
  border:var(--surf-edge);border-bottom-color:rgba(39,26,77,.14);
  box-shadow:inset 0 1px 0 #fff, 0 6px 14px -6px rgba(39,26,77,.22), -3px -3px 8px rgba(255,255,255,.7);
  transition:background-color .2s var(--ease),color .2s var(--ease);
}
.chip[aria-pressed="true"]{background:var(--ink);color:#fff}

/* ---------- featured card ---------- */
.feat{
  position:relative;
  border-radius:var(--r-lg);overflow:hidden;
  background:var(--lav-200);
  border:var(--surf-edge);border-bottom-color:rgba(39,26,77,.14);
  box-shadow:var(--lift);
}
.feat__ph{aspect-ratio:16/11}
.feat__ph img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.feat__body{padding:15px 17px 17px;background:var(--pink-soft)}
.feat__kind{font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--plum-700)}
.feat__body h3{margin:5px 0 3px}
.feat__body p{font-size:13.5px;color:var(--plum-700)}
.feat__play{
  position:absolute;right:15px;top:calc(16/11 * 0px + 0px);
  transform:translateY(-50%);
  width:56px;height:56px;border-radius:50%;
  background:linear-gradient(180deg,#2E2058 0%,var(--ink) 100%);color:#fff;
  display:grid;place-items:center;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.22), inset 0 -3px 0 rgba(0,0,0,.4), 0 14px 30px -8px rgba(27,18,54,.5), 0 6px 14px -6px rgba(0,0,0,.4);
}
.feat__play{top:auto;bottom:74px}
.feat__play .i{width:22px;height:22px;fill:currentColor;stroke:none;margin-left:2px}

/* ---------- 2 up grid ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{
  position:relative;border-radius:var(--r-md);overflow:hidden;
  background:var(--surf);box-shadow:var(--lift);
  border:var(--surf-edge);border-bottom-color:rgba(39,26,77,.14);
}
.tile__ph{aspect-ratio:1;overflow:hidden}
.tile__ph img{
  width:100%;height:100%;object-fit:cover;
  object-position:var(--focus,50% 50%);
  transform:scale(var(--zoom,1));
}
.tile__body{padding:11px 12px 13px}
.tile__n{font-size:14px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.tile__m{font-size:12px;color:var(--ink-2);margin-top:2px}
.tile__play{
  position:absolute;right:9px;top:9px;
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(180deg,#FFFFFF 0%,#EFE8FB 100%);color:var(--ink);
  display:grid;place-items:center;
  box-shadow:inset 0 1px 0 #fff, inset 0 -2px 0 rgba(39,26,77,.14), 0 8px 18px -6px rgba(39,26,77,.4);
}
.tile__play .i{width:15px;height:15px;fill:currentColor;stroke:none;margin-left:1px}

/* ---------- track list ---------- */
.tracks{display:grid;gap:2px}
.trk{
  display:grid;grid-template-columns:22px 1fr auto;
  align-items:center;gap:13px;
  padding:11px 12px;border-radius:var(--r-sm);
  transition:background-color .2s var(--ease);
}
.trk:active{background:#fff}
.trk__i{font-size:12.5px;font-weight:700;color:var(--lav-300);font-variant-numeric:tabular-nums}
.trk__n{display:block;font-size:14.5px;font-weight:650;letter-spacing:-.01em}
.trk__m{display:block;font-size:12px;color:var(--ink-2);margin-top:1px}
.trk__go{width:34px;height:34px;border-radius:50%;background:var(--surf);display:grid;place-items:center;border:var(--surf-edge);border-bottom-color:rgba(39,26,77,.14);box-shadow:inset 0 1px 0 #fff, 0 6px 14px -5px rgba(39,26,77,.3), -3px -3px 8px rgba(255,255,255,.7)}
.trk__go .i{width:14px;height:14px;fill:var(--ink);stroke:none;margin-left:1px}

/* ---------- momday, the warm block ---------- */
.momday{
  margin-inline:var(--pad);
  border-radius:var(--r-lg);
  background:linear-gradient(160deg,#FFE9F7 0%,var(--lav-100) 62%);
  border:var(--surf-edge);border-bottom-color:rgba(39,26,77,.14);
  box-shadow:var(--lift);
  overflow:hidden;
}
.momday__in{padding:22px 20px}
.momday h2{margin-bottom:8px}
.momday p{font-size:14px;color:var(--plum-700);max-width:34ch}
.momday p.momday__note{margin-top:10px;font-size:12.5px;max-width:44ch}
.momday__note a{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:2px}
.progs{display:grid;gap:10px;margin-top:16px}
.progs{gap:0;margin-top:14px;border-top:1px solid rgba(58,40,112,.14)}
.prog{
  display:grid;grid-template-columns:56px 1fr;gap:13px;align-items:center;
  padding:12px 0;
  border-bottom:1px solid rgba(58,40,112,.14);
}
.prog img{width:56px;height:56px;border-radius:12px;object-fit:cover;
  object-position:var(--focus,50% 50%)}
.prog__n{font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.prog__d{font-size:12.5px;color:var(--ink-2);margin-top:1px}
.momday__acts{display:flex;gap:9px;margin-top:16px}
/* .cta is width:100% by default, which fights flex sizing in this row */
.momday__acts .cta{width:auto;min-height:48px;font-size:14.5px;white-space:nowrap}
.momday__acts .cta:first-child{flex:0 0 auto;padding-inline:26px}
.momday__acts .cta:last-child{flex:1 1 auto;min-width:0}

/* ---------- merch shelf ---------- */
.shelf{
  display:grid;grid-auto-flow:column;grid-auto-columns:63%;
  gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:2px var(--pad) 6px;scrollbar-width:none;
}
.shelf::-webkit-scrollbar{display:none}
.prod{scroll-snap-align:start;background:var(--surf);border-radius:var(--r-md);overflow:hidden;border:var(--surf-edge);border-bottom-color:rgba(39,26,77,.14);box-shadow:var(--lift)}
.prod__ph{aspect-ratio:4/5;background:var(--lav-100)}
.prod__ph img{width:100%;height:100%;object-fit:cover}

/* the empty slot. The mark is square and must stay square: setting only a
   width here would leave height:100% above in force and smear it. */
.prod__ph--empty{
  display:grid;place-items:center;
  background:linear-gradient(160deg,#FFE9F7,#EFE8FB);
}
.prod__ph--empty img{
  width:56%;height:auto;aspect-ratio:1;
  object-fit:contain;
  opacity:.34;
}
.prod__body{padding:11px 13px 14px}
.prod__n{font-size:14px;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.prod__p{font-size:12.5px;color:var(--ink-2);margin-top:2px}
.pill{
  display:inline-block;margin-top:9px;padding:6px 13px;border-radius:99px;
  background:linear-gradient(180deg,#2E2058 0%,var(--ink) 100%);color:#fff;font-size:12.5px;font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), inset 0 -2px 0 rgba(0,0,0,.35), 0 6px 14px -6px rgba(27,18,54,.5);
}
.pill--soft{background:linear-gradient(180deg,#F0E9FC 0%,var(--lav-200) 100%);color:var(--plum-700);box-shadow:inset 0 1px 0 #fff, inset 0 -2px 0 rgba(39,26,77,.1), 0 6px 14px -6px rgba(39,26,77,.25)}

/* ---------- press / booking, plum again ---------- */
.dark{
  margin-inline:var(--pad);
  border-radius:var(--r-lg);
  background:linear-gradient(170deg,#2F2059 0%,var(--plum-800) 40%,#1F1540 100%);
  color:var(--on-dark);
  padding:24px 20px;
  position:relative;overflow:hidden;
  border:1px solid rgba(255,255,255,.06);border-top-color:rgba(255,255,255,.28);border-bottom-color:rgba(0,0,0,.6);
  box-shadow:0 22px 46px -14px rgba(27,18,54,.55), 0 8px 18px -8px rgba(27,18,54,.4);
}
.dark::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 50% at 88% 0%, rgba(255,110,199,.22), transparent 70%);
}
.dark > *{position:relative;z-index:1}
.dark p{color:var(--on-dark-2);font-size:14px;margin-top:8px;max-width:32ch}
.dark__acts{display:grid;gap:9px;margin-top:18px}

/* ---------- foot ---------- */
.foot{padding:26px var(--pad) 10px;text-align:center;color:var(--ink-2);font-size:12.5px}
.foot img{width:38px;margin:0 auto 10px;opacity:.5}
.foot a{color:var(--violet);font-weight:600;
  display:inline-block;padding:7px 10px;margin:-7px -10px}

/* ---------- thumb rail ---------- */
.rail{
  position:fixed;z-index:50;
  left:0;right:0;bottom:0;
  display:grid;grid-template-columns:repeat(5,1fr);align-items:end;
  padding:8px 6px calc(8px + env(safe-area-inset-bottom,0px));
  border-radius:24px 24px 0 0;
  background:linear-gradient(180deg,#FFFFFF 0%,#F3EEFC 100%);
  border-top:1px solid #fff;
  box-shadow:inset 0 1px 0 #fff, 0 -1px 0 rgba(39,26,77,.1), 0 -18px 40px -12px rgba(39,26,77,.32);
}
.rail a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:54px;border-radius:16px;
  font-size:11px;font-weight:700;color:var(--ink-2);
  transition:color .2s var(--ease);
}
.rail a .i{width:21px;height:21px}
.rail a[aria-current="page"]{color:var(--violet)}
.rail a[aria-current="page"] .i{stroke-width:2.1}
/* the centre: her EPK, raised out of the dock like an app's main action */
.rail__epk{color:var(--ink);font-weight:800}
.rail__disc{
  width:62px;height:62px;border-radius:50%;margin-top:-30px;
  display:grid;place-items:center;
  background:linear-gradient(180deg,#FF93D6 0%,var(--pink) 46%,#F25CB9 100%);color:var(--ink);
  border:4px solid var(--lav-50);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.6), inset 0 -4px 0 rgba(0,0,0,.16), 0 0 0 1px rgba(39,26,77,.08), 0 14px 28px -6px rgba(255,110,199,.75), 0 12px 22px rgba(39,26,77,.28);
  transition:transform .18s var(--ease);
}
.rail__disc .i{width:24px;height:24px;stroke-width:2}
.rail__epk:active .rail__disc{transform:translateY(1px) scale(.96)}

.skip{
  position:absolute;left:10px;top:10px;z-index:99;
  transform:translateY(-180%);
  padding:11px 18px;border-radius:12px;
  background:var(--violet);color:#fff;font-weight:700;
  transition:transform .2s var(--ease);
}
.skip:focus{transform:translateY(0)}
/* the panes are mutually exclusive views; keep hidden honest */
.pane[hidden]{display:none}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}
.num,.tabular{font-variant-numeric:tabular-nums}
.mt-s{margin-top:8px}.mt-m{margin-top:16px}.mt-l{margin-top:26px}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .hero__ph img,.hero__crest{transform:none!important}
}

/* desktop just centres the phone column; the real design is the phone */
/* ============================================================
   SIDE A patterns, part two
   The big photo card with a sticker and an edge tab, the prose
   that sits between cards, the statement, the waveform row, and
   a full width pill paired with a circular secondary.
   ============================================================ */

/* small caps corner note, sits in a card corner, never above a heading */
.note-caps{
  position:absolute;z-index:3;right:16px;top:16px;
  max-width:104px;text-align:right;
  font-size:11px;font-weight:800;line-height:1.3;
  letter-spacing:.09em;text-transform:uppercase;
  color:var(--on-dark);
}
.note-caps::after{
  content:"";display:block;height:2px;width:34px;margin:6px 0 0 auto;
  background:var(--pink);border-radius:2px;
}

/* the big photo card: sticker, edge tab, torn corner */
.bigcard{
  position:relative;
  border-radius:var(--r-lg);overflow:hidden;
  background:var(--plum-900);
  border:1px solid rgba(255,255,255,.06);border-top-color:rgba(255,255,255,.3);border-bottom-color:rgba(0,0,0,.6);
  box-shadow:0 26px 54px -16px rgba(27,18,54,.5), 0 8px 18px -8px rgba(27,18,54,.4);
  aspect-ratio:4/5;
}
.bigcard > img{width:100%;height:100%;object-fit:cover}
.bigcard::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(27,18,54,.62) 0%,transparent 42%);
}
.vtab{
  position:absolute;z-index:3;right:0;top:34px;
  padding:13px 7px;
  border-radius:8px 0 0 8px;
  background:var(--pink);color:var(--ink);
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  writing-mode:vertical-rl;
}
.tornr{
  position:absolute;z-index:3;left:0;bottom:0;
  width:0;height:0;
  border-style:solid;border-width:0 0 42px 42px;
  border-color:transparent transparent #fff transparent;
}
.sticker--card{
  left:14px;top:14px;background:#fff;color:var(--ink);
  transform:rotate(-5deg);max-width:150px;
}
.sticker--right{left:auto;right:16px;top:auto;bottom:16px;transform:rotate(4deg)}

/* prose that sits between the cards */
.prose{font-size:15px;line-height:1.66;color:var(--plum-700);max-width:60ch}
.prose + .prose{margin-top:12px}
.prose strong{color:var(--ink);font-weight:700}

/* the one line that carries a section */
.statement{
  font-family:var(--display);
  font-size:clamp(27px,8vw,37px);
  font-weight:800;line-height:1.04;letter-spacing:-.035em;
  color:var(--ink);
  text-wrap:balance;
  max-width:16ch;
}

/* waveform row */
.wave{display:grid;gap:7px;margin-top:16px}
.wave svg{width:100%;height:42px;display:block}
.wave__t{
  display:flex;justify-content:space-between;
  font-size:12px;font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums;
}

/* a full width pill beside a circular secondary */
.actrow{display:flex;gap:10px;align-items:stretch;margin-top:16px}
.actrow .cta{flex:1;min-width:0;white-space:nowrap;padding-inline:14px}
.circ{
  flex:none;width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(180deg,#F0E9FC 0%,var(--lav-200) 100%);color:var(--plum-700);
  border:var(--surf-edge);border-bottom-color:rgba(39,26,77,.16);
  box-shadow:inset 0 1px 0 #fff, inset 0 -3px 0 rgba(39,26,77,.12), 0 10px 22px -8px rgba(39,26,77,.35), -4px -4px 10px rgba(255,255,255,.7);
  transition:background-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease);
}
.circ:active{transform:translateY(1px) scale(.96);box-shadow:inset 0 3px 8px rgba(39,26,77,.25)}
.circ .i{width:20px;height:20px}
.circ--dark{background:linear-gradient(180deg,#2E2058 0%,var(--ink) 100%);color:#fff;border-color:rgba(255,255,255,.12);border-top-color:rgba(255,255,255,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 -3px 0 rgba(0,0,0,.4), 0 12px 26px -8px rgba(27,18,54,.55)}

/* meta line under a title */
.metaline{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:13.5px;color:var(--ink-2);margin-top:4px;
}
.metaline b{color:var(--ink);font-weight:700}
.dotsep{width:3px;height:3px;border-radius:50%;background:var(--lav-300)}

/* title row with a heart or save on the right */
.titlerow{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.titlerow .circ{width:44px;height:44px}
.titlerow .circ .i{width:18px;height:18px}

/* ============================================================
   DESKTOP
   Not a phone column floating in a field. The same card language
   given room: the hero goes landscape, the photo cards pair with
   their prose in two columns, the shelves become grids, and the
   thumb rail hands over to a real nav.
   ============================================================ */
.topnav{display:none}

@media (min-width:900px){
  body{padding-bottom:0}
  .app{max-width:1180px;margin-inline:auto}
  :root{--pad:34px}

  /* nav */
  .rail{display:none}
  .bar{padding-block:16px}
  .bar__brand{font-size:18px}
  .bar__brand img{width:30px;height:30px}
  .topnav{display:flex;align-items:center;gap:4px;margin-left:auto;margin-right:14px}
  .topnav a{
    padding:9px 15px;border-radius:99px;
    font-size:14.5px;font-weight:600;color:var(--ink-2);
    transition:background-color .18s var(--ease),color .18s var(--ease);
  }
  .topnav a:hover{background:#fff;color:var(--ink)}

  /* hero goes landscape, content on the left, her on the right */
  .hero{min-height:580px;display:grid;align-items:end}
  .hero__ph img{object-position:74% 20%}
  .hero__ph::after{
    background:
      linear-gradient(to right, var(--plum-900) 4%, rgba(27,18,54,.86) 38%, rgba(27,18,54,.16) 72%),
      radial-gradient(48% 62% at 84% 18%, rgba(255,110,199,.3), transparent 72%);
  }
  .hero__in{padding:44px 44px 40px;max-width:640px}
  .hero__crest{margin:0 0 22px;width:250px}
  .hero .h-xl{font-size:64px}
  .hero__sub{font-size:16.5px;max-width:38ch;margin-bottom:24px}
  .hero__acts,.hero .cta{width:auto}
  .hero .cta{display:inline-flex;min-width:250px}
  .note-caps{right:34px;top:34px;max-width:none;width:auto;font-size:12px}
  .sticker--note{top:30px;left:34px;font-size:19px;max-width:none;white-space:nowrap}
  .badge-round{width:104px;height:104px;right:38px;top:auto;bottom:44px;font-size:12px}

  /* chips centre */
  .chips{justify-content:center;flex-wrap:wrap;padding-block:6px}
  .chip{min-height:42px;font-size:14.5px}

  /* section rhythm */
  .sec{padding-block:52px}
  .sec-h{margin-bottom:22px}
  .h-lg{font-size:36px}

  /* the photo card pairs with its prose */
  .split{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:48px;align-items:center;
  }
  .split--flip .split__media{order:2}
  .split__body{min-width:0}
  .bigcard{aspect-ratio:4/5;max-height:620px}
  #story .bigcard{aspect-ratio:1}
  .vtab{top:44px;font-size:12px;padding:16px 9px}
  .sticker--card{font-size:19px;max-width:180px}

  .titlerow{margin-top:0!important}
  .titlerow .h-xl{font-size:52px!important}
  .statement{font-size:44px;max-width:14ch}
  .prose{font-size:16.5px}
  .wave svg{height:58px}
  .actrow .cta{flex:0 1 280px}

  /* shelves become grids */
  .duo{grid-template-columns:repeat(2,1fr);gap:22px}
  .tile__n{font-size:17px}
  .tile__m{font-size:13.5px}
  .tile__body{padding:15px 17px 18px}
  .tile__play{width:46px;height:46px;right:13px;top:13px}
  .tile__play .i{width:18px;height:18px}

  .tracks{grid-template-columns:1fr 1fr;column-gap:26px}
  .trk{padding:14px 14px}
  .trk__n{font-size:16px}

  .momday{margin-inline:0}
  .momday__in{padding:40px 44px}
  .progs{grid-template-columns:repeat(3,1fr);gap:0 26px;border-top:0}
  .prog{grid-template-columns:1fr;gap:12px;align-items:start;padding:0;border-bottom:0}
  .prog img{width:100%;height:210px;border-radius:14px}
  .momday__acts{margin-top:26px}
  .momday__acts .cta:last-child{flex:0 0 auto;padding-inline:34px}

  .shelf{
    grid-auto-flow:row;grid-template-columns:repeat(3,1fr);grid-auto-columns:auto;
    overflow:visible;gap:18px;margin-inline:0;padding-inline:0;
  }

  .dark{margin-inline:0;padding:40px 44px}
  .dark p{font-size:16px;max-width:46ch}
  .dark__acts{display:flex;gap:12px;margin-top:22px}
  .dark__acts .cta{width:auto;min-width:260px}

  .foot{padding-block:44px 34px}
}

@media (min-width:1180px){
  .hero .h-xl{font-size:74px}
  .split{gap:64px}
}

/* ============================================================
   INSTALL AS APP
   Chrome and Android get the real prompt. Safari has no install
   API at all, so it gets the instruction sheet instead. Already
   installed, the button is not rendered.
   ============================================================ */
.install{
  display:inline-flex;align-items:center;gap:7px;
  min-height:40px;padding:0 15px;
  border-radius:99px;
  background:linear-gradient(180deg,#2E2058 0%,var(--ink) 100%);color:#fff;
  font-size:13px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 -3px 0 rgba(0,0,0,.4), 0 12px 26px -8px rgba(27,18,54,.5);
  transition:transform .18s var(--ease),background-color .18s var(--ease);
}
.install:active{transform:scale(.96)}
.install:hover{background:linear-gradient(180deg,#9A7BEA 0%,var(--violet) 48%,#5A3BAE 100%)}
.install .i{width:17px;height:17px;stroke-width:1.9}
.install[hidden]{display:none}
@media (min-width:900px){
  .install{min-height:44px;padding:0 18px;font-size:14px}
  .install .i{width:18px;height:18px}
}

/* the iOS instruction sheet */
.sheet{
  position:fixed;inset:0;z-index:90;
  display:grid;place-items:end center;
  background:rgba(27,18,54,.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  padding:16px;
}
.sheet[hidden]{display:none}
.sheet__card{
  position:relative;
  width:100%;max-width:430px;
  background:var(--lav-50);
  border-radius:24px;
  padding:26px 22px calc(24px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -6px 24px rgba(27,18,54,.3), 0 -20px 60px rgba(27,18,54,.3);
  animation:sheetup .28s var(--ease);
}
@keyframes sheetup{from{transform:translateY(18px);opacity:0}to{transform:translateY(0);opacity:1}}
@media (prefers-reduced-motion:reduce){ .sheet__card{animation:none} }
@media (min-width:900px){ .sheet{place-items:center} }
.sheet__x{
  position:absolute;right:14px;top:14px;
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--lav-200);color:var(--plum-700);
}
.sheet__icon{width:62px;height:62px;border-radius:15px;margin-bottom:14px}
.sheet__steps{display:grid;gap:11px;margin-top:14px;counter-reset:s;list-style:none;padding:0}
.sheet__steps li{
  position:relative;padding-left:32px;
  font-size:14.5px;line-height:1.5;color:var(--plum-700);
  counter-increment:s;
}
.sheet__steps li::before{
  content:counter(s);
  position:absolute;left:0;top:1px;
  width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--violet);color:#fff;
  font-size:12px;font-weight:800;
}
.sheet__steps strong{color:var(--ink);font-weight:700}
.sheet__inline{
  width:16px;height:16px;vertical-align:-3px;
  display:inline-block;color:var(--violet);
}
.sheet__note{margin-top:14px;font-size:13px;color:var(--ink-2)}