/* =====================================================================
   BOUNCE PATROL — brand site
   Design base: the media-kit deck (Design.pdf) — flat sky blue,
   illustrated farm world, frosted-glass cards, Baloo 2 + Nunito,
   colour-coded highlights. White text on blue; artwork carries colour.
   ===================================================================== */

/* ------------------------------ tokens ----------------------------- */
:root {
  --bg: #047ac4;
  --ink: #ffffff;
  /* pure white, not near-white: on this blue, white is 4.58:1 (AA) and every
     alpha below 1 drops under the 4.5 threshold. Hierarchy comes from size
     and weight instead of opacity. */
  --text-soft: #ffffff;
  --muted: #ffffff;

  /* Liquid glass: a gradient fill (light falls off across the panel), a
     specular highlight along the top lip, and a saturation boost so colour
     blooms through the blur. Tinted blue rather than white so it darkens the
     artwork behind it and keeps white text legible. */
  --glass: linear-gradient(135deg, rgba(10,101,170,0.40), rgba(4,64,113,0.54));
  --glass-brd: rgba(255,255,255,0.42);
  --glass-solid: rgba(6,80,138,0.5); /* flat equivalent for color-mix() */
  --glass-blur: blur(22px) saturate(1.45);
  --glass-specular: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -1px 0 rgba(255,255,255,0.07);
  --line: rgba(255,255,255,0.28);

  --yellow: #fbcf3f;
  --green: #9be15d;
  --pink: #ff7ec2;
  --skylight: #9adcff;
  --btn-ink: #1c2b36;

  --font-title: "Baloo 2", "Trebuchet MS", sans-serif;
  --font-body: "Nunito", "Trebuchet MS", sans-serif;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 22px;

  --shadow-card: 0 10px 30px rgba(0,40,80,0.22);
  --shadow-pop: 0 16px 40px rgba(3,50,90,0.35);
  --title-shadow: 0 2px 0 rgba(3,60,100,0.35);

  --content: 1180px;
}

/* ------------------------------ base ------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { overflow-x: clip; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }

body {
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 600;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column; min-height: 100vh;
}
main { flex: 1; }

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--skylight); text-decoration: none; }
a:hover { color: #ffffff; }
ul, ol { list-style: none; }

a:focus-visible, button:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; border-radius: 6px; }

h1, h2, h3 { font-family: var(--font-title); font-weight: 700; line-height: 1.12; color: #fff; text-shadow: var(--title-shadow), 0 0 18px rgba(3,60,100,0.45); text-wrap: balance; }

/* white text must survive the artwork's green as well as the sky:
   a soft blue glow, invisible on blue, carries the contrast on green */
p, li, .lede, .fineprint, .home-line, .card-title, .album-title, .more,
.stat-chip span, .eyebrow, .nav > a, .footer-grid ul a, .footer-bottom {
  text-shadow: 0 1px 2px rgba(3,60,100,0.55), 0 2px 12px rgba(3,60,100,0.4);
}
.btn-primary, .btn-primary * { text-shadow: none; }
h1 { font-size: clamp(2.4rem, 4.6vw, 3.9rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
h3 { font-size: 1.5rem; }
h4 { font-weight: 800; }
p { color: var(--text-soft); }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--yellow); color: var(--btn-ink); padding: .7rem 1.2rem;
  border-radius: 0 0 var(--r-sm) 0; font-weight: 800;
}
.skip-link:focus { left: 0; }

/* ----------------------------- layout ------------------------------ */
.content { max-width: var(--content); width: 100%; margin: 0 auto; padding: 0 32px; }
.section { padding-block: 46px; } /* block-only: must not clobber .content's side padding */
.section--flush { padding-top: 0; }
.section-head { margin-bottom: 20px; }
.section-head p { color: var(--muted); max-width: 62ch; margin-top: 6px; }
/* An intro line that should sit on one line rather than break mid-clause. */
.section-head p.wide { max-width: none; }
.section-head--split { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
/* "All the videos" and friends are navigation, not prose, so they get a
   real target rather than the height of their own text. */
.more {
  font-weight: 800; font-size: .95rem; white-space: nowrap;
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 4px;
}

.lede { color: var(--text-soft); max-width: 56ch; font-size: 1.12rem; }
/* 56ch is a reading measure for paragraphs. A one-sentence hero line is
   not a paragraph, and wrapping it mid-clause reads as an accident. */
.lede--wide { max-width: none; }
/* A page intro has nothing beside it, so 56ch leaves half the row empty and
   the wrap looks like a bug rather than a decision. 78ch is the upper end of
   comfortable reading and fills the space without running the eye too far. */
.page-hero .lede { max-width: 78ch; }
.page-hero .lede--wide { max-width: none; }
.center { text-align: center; }

.eyebrow {
  display: inline-block; color: var(--skylight); font-weight: 900;
  font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 12px;
}

.glass {
  background: var(--glass); border: 1px solid var(--glass-brd);
  border-radius: var(--r-lg);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-card), var(--glass-specular);
}

/* The app's own world artwork is the backdrop — self-contained scene
   (sky, clouds, globe hill, house) pinned to the viewport bottom; the
   page's flat blue only shows above where the artwork runs out. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: var(--bg) url("/assets/img/deck/world.jpg?v=6") no-repeat bottom center;
  background-size: 100% auto;
}
/* desktop: sink the globe partly below the fold — more blue, less green,
   so text over the backdrop keeps contrast without needing a box */
@media (min-width: 900px) {
  body::before { background-position: center bottom -260px; }
}
/* phones: size the world by HEIGHT — bigger globe, and the image is wider
   than the screen so its edges can never show (no blue side-bands) */
@media (max-width: 760px) {
  body::before { background-size: auto 48vh; background-position: center bottom; }
}
/* a fixed veil between artwork and content: sky untouched, the world dims
   toward the viewport bottom so text scrolling over it stays legible */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(4,122,196,0) 38%,
    rgba(4,80,145,0.55) 70%,
    rgba(3,68,128,0.75) 100%);
}

.c-yellow { color: var(--yellow); }
.c-green { color: var(--green); }
.c-pink { color: var(--pink); }

/* ----------------------------- topbar ------------------------------ */
.topbar { position: relative; z-index: 20; }
.topbar-inner {
  max-width: var(--content); margin: 0 auto; padding: 18px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.wordmark { display: flex; align-items: center; flex-shrink: 0; }
.wordmark img { height: 60px; width: auto; }
.site-footer .wordmark img { height: 50px; }

.nav { display: flex; align-items: center; gap: 26px; }
.nav > a { color: #ffffff; font-weight: 800; font-size: 1rem; }
.nav > a:hover, .nav > a.is-active { color: var(--yellow); }
.nav .btn-primary { font-size: .95rem; padding: 11px 24px; }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--glass-brd); border-radius: var(--r-sm);
  width: 44px; height: 40px; cursor: pointer; position: relative;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; height: 2.4px;
  background: #ffffff; border-radius: 2px;
}
.nav-toggle span { top: 19px; left: 11px; right: 11px; }
.nav-toggle span::before { top: -6px; left: 0; right: 0; }
.nav-toggle span::after { top: 6px; left: 0; right: 0; }

/* ----------------------------- buttons ----------------------------- */
.btn-primary {
  display: inline-block; background: var(--yellow); color: var(--btn-ink);
  font-weight: 900; padding: 14px 30px; border-radius: 999px;
  border: 0; cursor: pointer; font-family: var(--font-body); font-size: 1.05rem;
  box-shadow: 0 8px 24px rgba(3,60,100,0.3);
}
.btn-primary:hover { background: #ffdd66; color: var(--btn-ink); }
.btn-outline {
  display: inline-block; color: #ffffff; font-weight: 800;
  padding: 13px 26px; border-radius: 999px;
  background: var(--glass); border: 1px solid rgba(255,255,255,0.4);
  font-size: 1rem;
  /* no backdrop-filter on small rounded controls: WebKit paints the blur
     as an unclipped rectangle on hover */
}
.btn-outline:hover { border-color: #ffffff; color: #ffffff; }
.btn-sm { padding: 10px 22px; font-size: .95rem; box-shadow: none; }
.btn-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.btn-back { font-weight: 800; font-size: .92rem; }

/* ------------------------------ hero ------------------------------- */
.hero { padding: 30px 0 40px; }
/* The photo matches the height of the words beside it. Stretch plus cover
   rather than a fixed ratio, because the text block's height moves with the
   copy; the image follows it instead of the other way round. */
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: stretch; }
.hero-photo {
  border-radius: var(--r-lg); border: 2px solid rgba(255,255,255,0.5); box-shadow: var(--shadow-pop);
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}
/* One column on phones: let it keep its own proportions again. */
@media (max-width: 900px) { .hero-photo { height: auto; } }

.page-hero { padding-block: 30px 6px; } /* block-only, same reason */
.page-hero h1 { max-width: 18ch; }
.page-hero .lede { margin-top: 10px; }

/* --------------------------- stat chips ---------------------------- */
.stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding-bottom: 40px; }
/* stacked on purpose: number over label, identical at every width */
.stat-chip {
  background: var(--glass); border: 1px solid var(--glass-brd); border-radius: 20px;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  padding: 18px 26px; display: flex; flex-direction: column; justify-content: center; gap: 2px;
  box-shadow: var(--shadow-card), var(--glass-specular);
}
.stat-chip b { font-family: var(--font-title); font-weight: 800; font-size: 1.9rem; line-height: 1.15; }
.stat-chip span { font-weight: 700; font-size: .95rem; color: var(--text-soft); }

/* -------------------------- catalogue rows ------------------------- */
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.home-line { color: var(--text-soft); font-weight: 700; font-size: .95rem; padding-top: 16px; }

.row { margin-bottom: 30px; }
.row h2 { font-size: 1.6rem; margin-bottom: 14px; }
.row-wrap { position: relative; }
.row-scroller {
  display: flex; gap: 16px; overflow-x: auto; padding: 4px 4px 10px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.row-scroller::-webkit-scrollbar { display: none; }
.row-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--glass-brd); background: rgba(255,255,255,0.22);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  color: #fff; font-size: 24px; line-height: 1; cursor: pointer;
  display: none; align-items: center; justify-content: center;
  box-shadow: var(--shadow-card);
}
.row-nav:hover { border-color: #fff; }
.row-nav.prev { left: -16px; }
.row-nav.next { right: -16px; }
@media (hover: hover) and (pointer: fine) {
  .row-nav { display: flex; }
  .row-nav[hidden] { display: none; }
}

.card { flex: 0 0 232px; scroll-snap-align: start; color: #ffffff; }
.card:hover { color: #ffffff; }
.card img {
  width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; display: block;
  border-radius: var(--r-md); border: 1px solid rgba(255,255,255,0.4);
  box-shadow: var(--shadow-card);
  transition: transform .15s ease, border-color .15s ease;
}
.card:hover img { transform: translateY(-2px); border-color: rgba(255,255,255,0.75); }
/* Reserve both lines whatever the title needs, so a row of cards keeps one
   baseline instead of stepping up and down with the length of each name. */
.card-title {
  display: block; padding: 9px 2px 0; font-weight: 800; font-size: .92rem;
  line-height: 1.35; min-height: calc(2 * 1.35em + 9px);
}
.chip {
  display: inline-block; background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.3);
  border-radius: 999px; padding: 5px 15px; font-size: .82rem; font-weight: 800; color: #ffffff;
}
a.chip:hover { border-color: #ffffff; color: #ffffff; }
.card .chip { font-size: .66rem; padding: 1px 8px; vertical-align: 2px; background: var(--green); border: 0; color: #14351f; }
.chip-free { background: var(--green); border: 0; color: #14351f; }
.chip-row { display: flex; gap: 10px; flex-wrap: wrap; }

.cat-jump { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 30px; }

.card--sq { flex-basis: 168px; }
.card--sq img { aspect-ratio: 1/1; }


/* --------------------------- printables ---------------------------- */
.sheet-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.sheet { color: #ffffff; display: block; }
.sheet:hover { color: #ffffff; }
.sheet-paper {
  position: relative; background: #ffffff;
  border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-card);
  transition: transform .15s ease, box-shadow .15s ease;
}
.sheet-paper img { width: 100%; height: 100%; }
/* Card aspect ratios match the artwork so `cover` fills edge to edge without
   cropping anything: A4 portrait for posters/workbooks, US Letter for the
   worksheets, A4 landscape for the colouring sheets. */
.sheet-paper--fill { aspect-ratio: 1 / 1.414; }
.sheet-paper--fill img { object-fit: cover; object-position: center; }
.sheet-paper--page { aspect-ratio: 1 / 1.294; }
.sheet-paper--page img { object-fit: cover; object-position: center; }
.sheet-paper--wide { aspect-ratio: 1.414 / 1; }
.sheet-paper--wide img { object-fit: cover; object-position: center; }
.sheet:hover .sheet-paper { transform: translateY(-3px); box-shadow: var(--shadow-pop); }
.sheet-get {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  background: var(--yellow); color: var(--btn-ink); font-weight: 900; font-size: .82rem;
  padding: 6px 18px; border-radius: 999px; opacity: 0; transition: opacity .15s ease;
}
.sheet:hover .sheet-get, .sheet:focus-visible .sheet-get { opacity: 1; }
.sheet-title { font-weight: 800; font-size: .92rem; padding: 10px 2px 0; }
.sheet-cell { display: flex; flex-direction: column; }
.sheet-inapp { padding: 3px 2px 0; font-weight: 700; font-size: .82rem; color: var(--skylight); }
.sheet-inapp:hover { color: #ffffff; }

/* "+N more in the app" tile that closes each row */
.sheet-paper--more {
  background: var(--glass); border: 1px dashed var(--glass-brd);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; box-shadow: none;
}
.sheet--more:hover .sheet-paper--more { border-color: rgba(255,255,255,0.75); }
.more-count { font-family: var(--font-title); font-weight: 800; font-size: 2.1rem; color: var(--yellow); line-height: 1; }
.more-label { font-weight: 700; font-size: .88rem; color: var(--text-soft); line-height: 1.4; }

@media (max-width: 900px) { .sheet-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .sheet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  /* The "more" tile counts as a cell, so a section with an even number of
     sheets is odd once it is added. Rather than hold the sheet count hostage
     to that, the tile takes the whole row when it would sit alone. */
  .sheet--more-span { grid-column: 1 / -1; }
  .sheet--more-span .sheet-paper { aspect-ratio: auto; min-height: 128px; }
}

/* ------------------------------- 404 ------------------------------- */
/* Will is a cutout with transparency, so he stands on the page itself
   rather than sitting in a box */
.lost { display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center; padding-top: 30px; }
.lost-will { width: min(300px, 34vw); height: auto; filter: drop-shadow(0 18px 30px rgba(3,50,90,0.35)); }
.lost-copy { max-width: 52ch; }
@media (max-width: 760px) {
  .lost { grid-template-columns: 1fr; gap: 18px; justify-items: center; text-align: center; }
  .lost-will { width: 200px; }
  .lost .btn-row { justify-content: center; }
}

/* ------------------------------ legal ------------------------------ */
.legal { padding: 30px 34px; max-width: 78ch; }
.legal h2 { margin-bottom: 14px; }
.legal p { margin-bottom: 14px; }
.legal p:last-child { margin-bottom: 0; }
.legal .fineprint { margin-top: -6px; }

/* ------------------------------ plans ------------------------------ */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.plans--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plan {
  background: var(--glass); border: 1px solid var(--glass-brd); border-radius: var(--r-lg);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-card), var(--glass-specular);
  padding: 26px 26px 24px; display: flex; flex-direction: column; gap: 10px; position: relative;
}
/* the one we want chosen: brighter glass, yellow edge, lifted */
.plan--feature {
  border-color: var(--yellow);
  box-shadow: var(--shadow-pop), var(--glass-specular), 0 0 0 1px rgba(251,207,63,0.35);
  transform: translateY(-8px);
}
.plan-flag {
  position: absolute; top: -13px; left: 26px;
  background: var(--yellow); color: var(--btn-ink); font-weight: 900; font-size: .74rem;
  letter-spacing: .04em; text-transform: uppercase; padding: 5px 14px; border-radius: 999px;
}
.plan-name { font-weight: 900; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--skylight); }
.plan-price { font-family: var(--font-title); font-weight: 700; font-size: 2.3rem; line-height: 1.05; }
.plan-price span { font-family: var(--font-body); font-weight: 700; font-size: .95rem; opacity: .85; }
.plan-list { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 4px; flex: 1; }
.plan-list li { display: flex; gap: 9px; font-size: .95rem; font-weight: 600; }
.plan-list li::before { content: "✓"; color: var(--green); font-weight: 900; flex-shrink: 0; }
.plan .btn-sm { align-self: flex-start; margin-top: 4px; }

@media (max-width: 900px) {
  .plans { grid-template-columns: 1fr; }
  .plan--feature { transform: none; }
}

/* ------------------------------ shop ------------------------------- */
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.product { color: #ffffff; display: block; }
.product:hover { color: #ffffff; }
.product-shot {
  position: relative; aspect-ratio: 1 / 1; background: #ffffff;
  border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-card);
  transition: transform .15s ease, box-shadow .15s ease;
}
.product-shot img { width: 100%; height: 100%; object-fit: cover; }
.product:hover .product-shot { transform: translateY(-3px); box-shadow: var(--shadow-pop); }
.product-out {
  position: absolute; inset: auto 10px 10px auto;
  background: rgba(3,60,100,0.82); color: #fff; font-weight: 800; font-size: .74rem;
  padding: 4px 12px; border-radius: 999px;
}
.product-title { font-weight: 800; font-size: .92rem; padding: 10px 2px 0; line-height: 1.35; }
.product-price { font-weight: 800; font-size: .92rem; color: var(--yellow); padding: 2px 2px 0; }

@media (max-width: 900px) { .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }

/* --------------------------- episode page -------------------------- */
.ep-thumb {
  width: 100%; max-width: 720px; border-radius: var(--r-lg);
  border: 2px solid rgba(255,255,255,0.5); box-shadow: var(--shadow-pop);
}
/* The container owns the rounding and does the clipping: Safari won't clip a
   <video> (or its native controls) to a parent radius without overflow +
   its own radius + a compositing hint, so all three are set here. */
.ep-player {
  position: relative; max-width: 720px;
  border-radius: var(--r-lg); overflow: hidden; isolation: isolate;
  transform: translateZ(0);
  border: 2px solid rgba(255,255,255,0.5); box-shadow: var(--shadow-pop);
  background: #000; line-height: 0;
}
.ep-video { width: 100%; display: block; background: #000; border-radius: var(--r-lg); }
/* inside the player the wrapper draws the frame, so the poster goes flat */
.ep-player .ep-thumb { border: 0; border-radius: var(--r-lg); box-shadow: none; max-width: none; }
/* Four across on the app page rather than one big player: smaller frame, and
   a play button sized to the card instead of to a 720px hero. */
.ep-player--sm { max-width: none; border-width: 1px; }
.ep-player--sm .ep-play { width: 52px; height: 52px; }
.ep-player--sm .ep-play svg { margin-left: 2px; }
.ep-play {
  position: absolute; inset: 0; margin: auto; width: 86px; height: 86px;
  border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(251,207,63,0.95); color: #1c2b36;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-pop);
}
.ep-play:hover { background: #ffdd66; }
.ep-play svg { margin-left: 4px; }
.ep-play[hidden], .ep-tag[hidden], .ep-thumb[hidden] { display: none; }
.ep-tag {
  position: absolute; top: 14px; right: 14px;
  background: rgba(3,60,100,0.75); color: #fff; font-weight: 800; font-size: 0.8rem;
  border-radius: 999px; padding: 4px 12px;
}
.ep-endcard {
  position: absolute; inset: 0; border-radius: var(--r-lg); line-height: 1.6;
  background: rgba(4,90,150,0.92);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 20px; text-align: center;
  animation: endcard-in 0.5s ease both;
}
@keyframes endcard-in { from { opacity: 0; } to { opacity: 1; } }
.ep-endcard[hidden] { display: none; }
.ep-endcard p { font-family: var(--font-title); font-weight: 700; font-size: 1.4rem; }

/* ---------------------------- split rows --------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
/* Panel matches the photo's height rather than hugging its own text, and
   centres its content so a short panel beside a tall photo doesn't read
   as top-heavy. */
.split--stretch { align-items: stretch; }
.split--stretch .split-panel { display: flex; flex-direction: column; justify-content: center; }
.split-photo {
  border-radius: var(--r-lg); border: 2px solid rgba(255,255,255,0.5); box-shadow: var(--shadow-pop);
  width: 100%; aspect-ratio: 4/3; object-fit: cover; object-position: center top;
}
/* square artwork shown whole, and it sets the shape the gift-card tile
   matches so both media boxes on Gifts are the same size */
.split-photo--square { aspect-ratio: 1/1; object-position: center; }
/* the full cast shot is 2.17:1; cropping it to 4/3 pushes the outer two
   performers out of frame, so this one keeps its own proportions */
.split-photo--wide { aspect-ratio: auto; }

/* ---------------------------- album grid --------------------------- */
.album-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.album { color: #ffffff; }
.album img {
  border-radius: var(--r-md); border: 1px solid rgba(255,255,255,0.4); aspect-ratio: 1/1; object-fit: cover;
  box-shadow: var(--shadow-card); transition: transform .15s ease, border-color .15s ease;
}
.album a:hover img, a.album:hover img { transform: translateY(-2px); border-color: rgba(255,255,255,0.75); }
.album-title { font-weight: 800; font-size: .95rem; padding: 9px 2px 1px; }
.album-links { font-size: .84rem; font-weight: 800; }
.album-links span { color: var(--muted); padding: 0 4px; }

.feature-album {
  display: grid; grid-template-columns: .72fr 1.28fr; gap: 32px; align-items: center;
  background: var(--glass); border: 1px solid var(--glass-brd); border-radius: var(--r-lg);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  padding: 28px; box-shadow: var(--shadow-card), var(--glass-specular);
}
.feature-album img { border-radius: var(--r-md); border: 1px solid rgba(255,255,255,0.4); box-shadow: var(--shadow-card); }
.tracklist { columns: 2; column-gap: 28px; margin: 14px 0 4px; }
.tracklist li {
  break-inside: avoid; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.22);
  display: flex; gap: 10px; font-size: .95rem; color: var(--text-soft); font-weight: 700;
}
.tracklist li span { color: var(--yellow); font-weight: 800; min-width: 1.3rem; }

/* --------------------------- music player -------------------------- */
.player {
  background: var(--glass); border: 1px solid var(--glass-brd); border-radius: var(--r-lg);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  padding: 20px; box-shadow: var(--shadow-card), var(--glass-specular);
}
.player__now { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.player__art { width: 62px; height: 62px; border-radius: 10px; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.4); background: rgba(3,60,100,0.3) center/cover; }
.player__eyebrow { font-size: .72rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--skylight); }
.player__title { font-weight: 800; }
.player__progress { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.player__time { font-size: .8rem; color: var(--muted); font-weight: 700; min-width: 38px; }
.player__bar { flex: 1; height: 7px; border-radius: 999px; background: rgba(3,60,100,0.35); cursor: pointer; }
.player__fill { height: 100%; width: 0; border-radius: 999px; background: var(--yellow); }
.player__controls { display: flex; justify-content: center; gap: 12px; margin-bottom: 14px; }
.player__btn {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.4);
  background: none; color: #ffffff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.player__btn svg { width: 20px; height: 20px; }
.player__btn:hover { border-color: #ffffff; }
.player__play { background: var(--yellow); border-color: var(--yellow); color: var(--btn-ink); width: 54px; height: 54px; }
.player__play:hover { background: #ffdd66; color: var(--btn-ink); }
.tracklist2 { display: flex; flex-direction: column; }
.track {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: none; border: 0; border-top: 1px solid rgba(255,255,255,0.22);
  padding: 11px 6px; cursor: pointer; text-align: left;
  color: #ffffff; font-family: var(--font-body); font-size: .95rem; font-weight: 700;
}
.track:hover { color: var(--yellow); }
.track.is-active { color: var(--yellow); }
.track__idx { color: var(--muted); font-weight: 700; min-width: 1.3rem; }
.track__title { flex: 1; }
.track__dur { color: var(--muted); font-size: .85rem; font-weight: 700; }

/* the "where do you listen" row: official badges first, then the rest as
   pills, all on one line so it reads as one set of choices */
.services { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.platforms { display: flex; gap: 10px; flex-wrap: wrap; }

/* ------------------------------ gifts ------------------------------ */
.gift-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.gift-panel {
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
  background: var(--glass); border: 1px solid var(--glass-brd); border-radius: var(--r-lg);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  padding: 28px 30px; color: #ffffff; box-shadow: var(--shadow-card), var(--glass-specular);
}
.gift-panel h3 { margin: 0; }
.gift-panel p { color: var(--text-soft); font-size: .98rem; }
.gift-panel .btn-primary, .gift-panel .btn-outline { margin-top: 6px; }
.gift-label { font-weight: 900; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; }

/* a real gift card: the cast cut out of the studio white and set on brand
   blue, with the left third kept clear so the type never lands on a face */
.giftcard {
  aspect-ratio: 16/9; border-radius: var(--r-lg); position: relative; overflow: hidden;
  background: #047ac4 url("/assets/img/deck/giftcard-cast.jpg") center/cover;
  border: 2px solid rgba(255,255,255,0.55);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 24px;
  box-shadow: var(--shadow-pop);
}
/* No scrim any more: the artwork carries its own clear ground on the left.
   A blanket darkening would only mute the cast for nothing. */
.giftcard > * { position: relative; z-index: 1; }
.giftcard-brand { display: flex; align-items: center; gap: 11px; font-family: var(--font-title); font-weight: 700; color: #fff; font-size: 1.2rem; position: absolute; top: 18px; left: 22px; }
.giftcard-brand img { width: 40px; border-radius: 9px; }
.giftcard-label { font-size: .72rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--yellow); }
/* Capped short of where the cast starts in the artwork (48%), so the type
   can never run onto a face however long the line gets. */
.giftcard-value { font-family: var(--font-title); font-weight: 700; font-size: 1.9rem; color: #fff; line-height: 1.12; max-width: 45%; }
.giftcard-price {
  position: absolute; top: 16px; right: 18px;
  background: var(--yellow); color: var(--btn-ink); font-weight: 900; font-size: .85rem;
  padding: 4px 12px; border-radius: 999px;
}
/* Actual gift-card proportions (85.6 x 54mm, the credit-card ratio). The
   artwork is built at exactly 1.586:1, so cover neither crops nor letterboxes
   it. The previous source was a crop that had already cut the cast's heads
   off, which no anchoring could put back. */
.giftcard--lg {
  padding: 26px; aspect-ratio: 1.586/1;
  background-size: cover; background-repeat: no-repeat; background-position: center;
}
.giftcard--lg .giftcard-value { font-size: 2.2rem; }

/* On a phone the card is ~311px wide, where 2.2rem wrapped "One year of the
   app" onto a second line that filled 40% of the card. */
@media (max-width: 560px) {
  .giftcard--lg {
    padding: 18px;
    background-image: url("/assets/img/deck/giftcard-cast-sm.jpg");
  }
  .giftcard--lg .giftcard-value { font-size: 1.2rem; }
  .giftcard-value { max-width: 48%; }
  .giftcard-brand { top: 13px; left: 15px; font-size: .95rem; gap: 8px; }
  .giftcard-brand img { width: 29px; border-radius: 7px; }
}

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
/* inside a half-width column three across is too tight — read them as a list */
.split .steps { grid-template-columns: 1fr; gap: 10px; }
.split .step { display: flex; align-items: baseline; gap: 12px; padding: 12px 16px; }
.split .step span { margin-bottom: 0; flex-shrink: 0; }
.split .step b { display: inline; margin-bottom: 0; white-space: nowrap; flex-shrink: 0; }
.split .step p { flex: 1; min-width: 0; }
.step {
  background: var(--glass); border: 1px solid var(--glass-brd); border-radius: var(--r-md);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); padding: 16px;
}
.step b { display: block; color: #ffffff; margin-bottom: 2px; }
.step span { display: inline-block; color: var(--skylight); font-weight: 900; font-size: .78rem; letter-spacing: .08em; margin-bottom: 8px; }
.step p { color: var(--text-soft); font-size: .9rem; line-height: 1.5; }

.faq { display: flex; flex-direction: column; gap: 10px; max-width: 680px; }
.faq details {
  background: var(--glass); border: 1px solid var(--glass-brd); border-radius: var(--r-md);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); padding: 14px 18px;
}
.faq summary { cursor: pointer; font-weight: 800; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--yellow); font-size: 1.3rem; font-weight: 700; }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--text-soft); margin-top: 8px; font-size: .95rem; }

.fineprint { color: var(--muted); font-size: .85rem; margin-top: 12px; }

/* --------------------------- archive band -------------------------- */
.archive { padding: 30px 34px; display: flex; flex-direction: column; gap: 12px; }
.archive p { max-width: 88ch; }

/* ---------------------------- app page ----------------------------- */
.feature-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 28px; }
.feature-list li { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.22); color: var(--text-soft); font-size: .95rem; }
.feature-list b { color: #ffffff; display: block; }
.shot-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.shot-strip img { border-radius: var(--r-md); border: 1px solid rgba(255,255,255,0.4); box-shadow: var(--shadow-card); }

.badges { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.badges img { display: block; }
/* Three store badges at 44px total ~406px plus gaps, so on a phone the third
   wrapped onto a line of its own. They come down to a height that fits all
   three across. Equal HEIGHT, not equal width: the three have different
   aspect ratios, so equal columns would have made them different sizes. */
@media (max-width: 560px) {
  .badges { gap: 8px; flex-wrap: nowrap; }
  .badges img { height: 34px; width: auto; }
}

/* "Watch on YouTube" — badge-styled to sit beside the store badges */
.yt-badge {
  display: inline-flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 16px; border-radius: 8px;
  background: #000000; border: 1px solid rgba(255,255,255,0.3); color: #ffffff;
}
.yt-badge:hover { color: #ffffff; border-color: rgba(255,255,255,0.7); }
.yt-badge img { display: block; width: auto; }
/* our own app badge — matched to the 44px badge-row height */
.app-badge { display: inline-block; }
.app-badge img { display: block; height: 44px; width: auto; }

.btn-yt { display: inline-flex; align-items: center; gap: 10px; }
.btn-yt svg { flex-shrink: 0; }

/* --------------------------- crew / about -------------------------- */
.crew-names { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

/* ----------------------------- contact ----------------------------- */
.contact-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 32px; align-items: start; }
.form-card {
  background: var(--glass); border: 1px solid var(--glass-brd); border-radius: var(--r-lg);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); padding: 24px;
  box-shadow: var(--shadow-card), var(--glass-specular);
}
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 800; font-size: .88rem; margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; background: rgba(3,50,90,0.35); border: 1px solid rgba(255,255,255,0.35);
  border-radius: var(--r-sm); color: #ffffff; font-family: var(--font-body);
  font-size: .95rem; padding: 11px 12px;
}
.field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,0.72); }
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--yellow); }
.field select option { color: #17222c; }
.aside-card {
  background: var(--glass); border: 1px solid var(--glass-brd); border-radius: var(--r-md);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  padding: 16px 18px; margin-bottom: 12px;
}
.aside-card h4 { margin-bottom: 2px; }
.aside-card p { color: var(--text-soft); font-size: .92rem; }

/* ---------------------------- store band --------------------------- */
.store-band { padding: 0 32px; margin: 6px 0 0; }
.store {
  /* matches a .content child: --content minus its 32px side padding, so
     this band lines up with the columns above it rather than 64px wider */
  max-width: calc(var(--content) - 64px); margin: 0 auto;
  background: var(--glass); border: 1px solid var(--glass-brd); border-radius: var(--r-lg);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  padding: 28px 34px; box-shadow: var(--shadow-card), var(--glass-specular);
  display: flex; gap: 28px; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.store-app { display: flex; gap: 16px; align-items: center; flex: 1 1 420px; max-width: 560px; }
.store-icon { border-radius: 22%; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.4); }
.store-app h3 { font-size: 1.3rem; margin-bottom: 2px; }
.store-app p { color: var(--text-soft); font-size: .92rem; }
.store-get { min-width: 0; }
.store-get .platforms-note { color: var(--muted); font-size: .85rem; font-weight: 700; margin-top: 10px; }

/* ---------------------------- newsletter --------------------------- */
.newsletter { padding: 0 32px; margin-top: 26px; }
.newsletter-in {
  /* matches a .content child: --content minus its 32px side padding, so
     this band lines up with the columns above it rather than 64px wider */
  max-width: calc(var(--content) - 64px); margin: 0 auto;
  background: var(--glass); border: 1px solid var(--glass-brd); border-radius: var(--r-lg);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  padding: 26px 34px; box-shadow: var(--shadow-card), var(--glass-specular);
  display: flex; gap: 28px; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.newsletter-in h3 { font-size: 1.3rem; margin-bottom: 2px; }
.newsletter-in > div > p { color: var(--text-soft); font-size: .92rem; }
.newsletter-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.newsletter-form input {
  min-width: 260px; background: rgba(3,50,90,0.35); border: 1px solid rgba(255,255,255,0.35);
  border-radius: 999px; color: #ffffff; font-family: var(--font-body);
  font-size: .95rem; font-weight: 700; padding: 13px 20px;
}
.newsletter-form input::placeholder { color: rgba(255,255,255,0.72); }
.newsletter-form input:focus { outline: none; border-color: var(--yellow); }
.newsletter-form .btn-primary { padding: 12px 26px; font-size: .95rem; }
.newsletter-status { width: 100%; font-weight: 800; font-size: .9rem; margin: 0; min-height: 1.2em; }

/* ------------------------------ footer ----------------------------- */
.site-footer {
  margin-top: 40px;
  background: linear-gradient(rgba(4,90,150,0.35), rgba(3,70,120,0.55));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,0.25);
}
.footer-grid {
  max-width: var(--content); margin: 0 auto; padding: 8px 32px 24px;
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 28px;
}
.footer-grid h4 { font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--skylight); margin-bottom: 10px; }
.footer-grid ul li { margin-bottom: 2px; }
/* A 20px-tall link is a thumb's-width miss on a phone. Padding rather than
   font-size, so the footer looks the same and only the target grows. */
.footer-grid ul a {
  color: #ffffff; font-weight: 700; font-size: .92rem;
  display: inline-flex; align-items: center; min-height: 34px;
}
.footer-grid ul a:hover { color: var(--yellow); }
.footer-blurb { color: var(--muted); font-size: .92rem; max-width: 30ch; margin-top: 10px; }
.socials { display: flex; gap: 10px; margin-top: 14px; }
/* each social takes a colour from the logo's palette (--c set per link) */
.socials a {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--c, #fff) 55%, transparent);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c, #ffffff);
  background: color-mix(in srgb, var(--c, #fff) 14%, var(--glass-solid));
  transition: transform .15s ease, background .15s ease;
}
.socials a:hover {
  border-color: var(--c, #fff);
  background: color-mix(in srgb, var(--c, #fff) 26%, var(--glass-solid));
  transform: translateY(-2px);
}
.socials svg { width: 17px; height: 17px; }
.ack {
  max-width: var(--content); margin: 0 auto; padding: 6px 32px 26px;
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
}
.ack svg { border-radius: 3px; }
.ack p { color: var(--muted); font-size: .88rem; max-width: 58ch; }

.footer-bottom {
  max-width: var(--content); margin: 0 auto; padding: 0 32px 28px;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  color: var(--muted); font-size: .85rem; font-weight: 700;
}

.site-footer .footer-grid { padding-top: 26px; }

/* --------------------------- responsive ---------------------------- */
@media (max-width: 900px) {
  .hero-grid, .split, .contact-layout, .feature-album { grid-template-columns: 1fr; }
  .hero { padding-top: 20px; }
  .stat-row { grid-template-columns: 1fr; gap: 12px; }
  .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .split > .split-photo:last-child { order: -1; }
  .album-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  /* Scoped to .js: without JavaScript there is nothing to open the menu, so
     the nav must not be hidden in the first place. It falls back to a plain
     stacked list under the logo. This also covers the second or two before
     main.js runs on a slow connection, when the toggle would do nothing. */
  .js .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #036aab; border-bottom: 1px solid var(--glass-brd); padding: 8px 24px 16px;
    box-shadow: var(--shadow-pop);
  }
  .js .nav.is-open { display: flex; }
  .nav > a { padding: 12px 2px; border-bottom: 1px solid rgba(255,255,255,0.18); }
  .nav .btn-primary { margin-top: 12px; text-align: center; }
  .js .nav-toggle { display: block; }
  .gift-duo, .feature-list, .shot-strip { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr; }
  .tracklist { columns: 1; }
  /* Centred on a phone. With the menu collapsed to a toggle the logo is the
     only thing left on this row, and hard against the left edge it read as an
     afterthought rather than the brand. Scoped to .js for the same reason the
     nav is: without it the nav is still a static row here, and centring the
     row would drag it along too. */
  .js .topbar-inner { position: relative; justify-content: center; }
  .js .nav-toggle { position: absolute; right: 32px; top: 50%; transform: translateY(-50%); }
  .wordmark img { height: 56px; }
}
@media (max-width: 560px) {
  .feature-list { grid-template-columns: 1fr 1fr; }
  /* Covers are square and read fine small: three across on a phone shows
     a catalogue rather than a list. Video cards are 16:9 with a title, so
     they take two. */
  .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  /* The Listen page's 13 covers go three across; the home page's four stay
     two, because three would leave one orphan on its own row. */
  .album-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .gift-duo { grid-template-columns: 1fr; }
  /* Square album covers read fine two-up on a phone; the 16:9 episode
     cards in a plain .grid4 do not, which is why this is opt-in. */
  .shot-strip { grid-template-columns: 1fr 1fr; }
  .card { flex-basis: 196px; }
  .footer-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card img, .album img { transition: none; }
}

/* --------------------------- album pages --------------------------- */
.album-hero { display: grid; grid-template-columns: 300px 1fr; gap: 34px; align-items: center; }
.album-hero img { border-radius: var(--r-lg); box-shadow: var(--shadow-pop); border: 1px solid rgba(255,255,255,0.4); }
.tracklist-full { display: flex; flex-direction: column; counter-reset: t; }
.tracklist-full li {
  display: flex; align-items: baseline; gap: 14px; padding: 11px 2px;
  border-bottom: 1px solid rgba(255,255,255,0.18); font-weight: 700;
}
.tracklist-full li:last-child { border-bottom: 0; }
.tracklist-full .tn { color: var(--skylight); width: 1.6rem; flex: none; font-weight: 800; }
/* min-width:0 or a long title (flex items don't shrink below content by
   default) pushes the duration off the right edge on a phone */
.tracklist-full .tt { flex: 1; min-width: 0; }
.tracklist-full .td { flex: none; font-size: .88rem; opacity: .85; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .album-hero { grid-template-columns: 1fr; gap: 20px; }
  .album-hero img { max-width: 260px; }
  .tracklist-full li { gap: 10px; }
}

/* The app page's subscription price line, under the plan list. */
.plan-price { color: #fff; font-weight: 800; font-size: .92rem; margin: 4px 0 14px; }

/* Track previews on album pages. Apple serves the audio; we only play it. */
/* 26px was fine under a mouse and far too small under a thumb: this is the
   one thing you actually do on an album page. Grows on touch-sized screens. */
@media (max-width: 760px) {
  .tplay { width: 44px !important; height: 44px !important; }
}
.tplay {
  width: 26px; height: 26px; flex: none; padding: 0; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.45); border-radius: 999px;
  background: rgba(3,50,90,0.35); position: relative;
}
.tplay::before {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 0; height: 0; border-style: solid;
  border-width: 5px 0 5px 8px; border-color: transparent transparent transparent #fff;
  transform: translateX(1px);
}
.tplay:hover { border-color: var(--yellow); }
.tplay[aria-pressed="true"] { background: var(--yellow); border-color: var(--yellow); }
/* playing: the triangle becomes a pause bar pair */
.tplay[aria-pressed="true"]::before {
  width: 8px; height: 9px; border: 0; transform: none;
  background: linear-gradient(90deg, var(--btn-ink) 0 3px, transparent 3px 5px, var(--btn-ink) 5px 8px);
}

/* A pulled quote. Used sparingly: one on the app page, next to the safety
   argument it supports. */
.pull { margin: 22px 0 0; padding: 0 0 0 20px; border-left: 3px solid var(--yellow); }
.pull p {
  font-family: var(--font-title); font-weight: 700; font-size: 1.25rem;
  line-height: 1.35; color: #fff; margin: 0; text-shadow: var(--title-shadow);
}
.pull cite { display: block; margin-top: 10px; font-style: normal; font-weight: 700; font-size: .88rem; color: var(--skylight); }

/* Platform marks. Each sits on its own white chip: the brands supply full
   colour for light grounds, and Prime's blue and YouTube Kids' near-black
   would both disappear against ours.

   THE CHIPS ARE A FIXED WIDTH, not sized by their contents. The wordmarks run
   from 1.7:1 (prime) to 5.7:1 (YouTube Kids), so equal logo heights produced
   chips three times wider than each other. Constraining each mark by BOTH
   width and height instead lets a wide one cap on width and a narrow one cap
   on height, so they read as the same visual weight in identical boxes. */
.platforms { display: flex; flex-wrap: wrap; gap: 12px; }
.platforms li {
  background: #fff; border-radius: var(--r-md);
  width: 188px; height: 62px; padding: 0 18px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-card);
}
.platforms img { max-width: 100%; max-height: 30px; width: auto; height: auto; }
/* YouTube's official full-colour-on-dark mark, used as supplied. The margin
   baked into the file is the clear space their brand guidelines require, so
   it is deliberately not trimmed and the box looks larger than the ink. */
.yt-mark {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; box-sizing: border-box; padding: 0 5px; border-radius: 8px;
  background: #000000; border: 1px solid rgba(255,255,255,0.3);
}
.yt-mark img { display: block; height: 40px; width: auto; }

/* Three across on a phone rather than a fixed width that fits two and orphans
   the third onto a row of its own. A grid because equal columns cannot leave
   a stray, whatever the chips are. */
@media (max-width: 560px) {
  .platforms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .platforms li { width: auto; height: 54px; padding: 0 8px; }
  .platforms img { max-height: 24px; }
}

/* Privacy page: sub-headings inside the legal panels. */
.legal h3 { font-size: 1.15rem; margin: 22px 0 6px; }
.legal h3:first-of-type { margin-top: 16px; }

/* The app tour sits in the hero slot the screenshot used to. object-fit
   so it fills the frame the same way the photo did. */
video.hero-photo { width: 100%; height: 100%; object-fit: cover; background: #04456f; }
@media (max-width: 900px) { video.hero-photo { height: auto; } }

/* Three steps left to right, with a yellow arrow in each gap. Full width
   rather than inside a split column, where three across would be 178px each. */
.flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 46px; counter-reset: flow; }
.flow li {
  position: relative; counter-increment: flow;
  background: var(--glass); border: 1px solid var(--glass-brd); border-radius: var(--r-lg);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-card), var(--glass-specular);
  padding: 22px 24px 20px;
}
.flow li::before {
  content: counter(flow);
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin-bottom: 10px;
  background: var(--yellow); color: var(--btn-ink);
  border-radius: 999px; font-weight: 900; font-size: .95rem;
}
.flow li b { display: block; font-size: 1.05rem; margin-bottom: 4px; }
.flow li p { color: var(--text-soft); font-size: .95rem; margin: 0; }
/* the arrow, sitting in the gap between cards */
.flow li:not(:last-child)::after {
  content: ""; position: absolute; right: -31px; top: 50%; transform: translateY(-50%);
  width: 0; height: 0; border: 10px solid transparent; border-left-color: var(--yellow);
  filter: drop-shadow(0 2px 4px rgba(3,60,100,.35));
}
@media (max-width: 760px) {
  .flow { grid-template-columns: 1fr; gap: 34px; }
  /* stacked: the arrow turns to point down the page */
  .flow li:not(:last-child)::after {
    right: auto; left: 50%; top: auto; bottom: -28px;
    transform: translateX(-50%);
    border: 10px solid transparent; border-top-color: var(--yellow);
  }
}

/* Service links: the platform's own icon on a white chip. The marks are
   supplied on transparent grounds, so on blue the Apple Music gradient floats
   and Amazon's black mark all but vanishes; the chip is the ground they were
   drawn for. */
.svc {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; padding: 9px;
  background: #fff; border-radius: 15px; box-shadow: var(--shadow-card);
  transition: transform .15s ease;
}
.svc:hover { transform: translateY(-2px); }
.svc img { display: block; width: 100%; height: 100%; }
/* Album pages carry the same row at a smaller size. */
.svc--sm { width: 42px; height: 42px; padding: 7px; border-radius: 12px; }
@media (max-width: 560px) { .svc { width: 46px; height: 46px; padding: 8px; } }

/* A platform chip can carry a wordmark instead of a logo (our own app). */
.platforms li a { display: flex; align-items: center; justify-content: center; width: 100%; }
/* No text shadow on a white chip: the global rule that glows white text over
   the artwork was landing on chip labels too. */
.platforms li, .platforms li b { text-shadow: none; }

/* A platform chip can carry a wordmark instead of a logo (our own app). */
.platforms li a { display: flex; align-items: center; justify-content: center; width: 100%; }
/* No text shadow on a white chip: the global rule that glows white text over
   the artwork was landing on chip labels too. */
.platforms li, .platforms li b { text-shadow: none; }

/* Lists inside a legal/statement panel need markers back: the global reset
   strips them, which turned the seven commitments into one wall of text. */
.legal ul { margin: 0 0 16px; padding-left: 2px; }
.legal li { position: relative; padding-left: 26px; margin: 10px 0; }
.legal li::before {
  content: ""; position: absolute; left: 4px; top: .62em;
  width: 9px; height: 9px; border-radius: 50%; background: var(--yellow);
}

/* Album pages carry the same service row at a smaller size. */
.svc-row--sm .svc { width: 42px; height: 42px; padding: 7px; border-radius: 12px; }

/* Where our music is, said in words. See components.mjs for why this is not
   the services' own artwork. */
.svc-pill {
  display: inline-flex; align-items: center; height: 42px; padding: 0 20px;
  border-radius: 999px; color: #ffffff; font-weight: 800; font-size: .95rem;
  background: var(--glass); border: 1px solid var(--glass-brd);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  text-shadow: none; transition: background .15s ease, transform .15s ease;
}
.svc-pill:hover { background: rgba(255, 255, 255, 0.20); transform: translateY(-2px); }
.svc-row--sm .svc-pill { height: 36px; padding: 0 15px; font-size: .85rem; }
@media (max-width: 560px) { .svc-pill { height: 38px; padding: 0 16px; font-size: .9rem; } }

/* The initiative's partner list: names, so two columns rather than one long
   run down the page. */
.partners { columns: 2; column-gap: 34px; }
.partners li { break-inside: avoid; margin: 7px 0; }
@media (max-width: 560px) { .partners { columns: 1; } }

/* INTERIM branch (interim-site): the old homepage's three tiles, About Us,
   Listen and Watch. Three across; one column on a phone. */
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 900px) { .grid3 { grid-template-columns: 1fr; } }

/* INTERIM branch: the About page photo grid. Three across; two on a phone. */
.gallery img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; object-position: center top; border-radius: var(--r-lg); border: 2px solid rgba(255,255,255,0.5); box-shadow: var(--shadow-card); }
@media (max-width: 900px) { .grid3.gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

/* INTERIM branch: the homepage app section (variant B, 2026-09-12). Centred, over a
   row of app screens; drop-shadow rather than box-shadow so it follows the art. */
.home-app { text-align: center; }
.home-app .lede { margin: 8px auto 0; }
.home-app-badges { display: flex; justify-content: center; margin-top: 20px; }
.home-app-shots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; max-width: 820px; margin: 30px auto 0; }
.home-app-shots img { display: block; width: 100%; height: auto; border-radius: 20px; filter: drop-shadow(0 12px 22px rgba(3, 40, 70, .4)); }
@media (max-width: 900px) { .home-app-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 440px; } }

/* INTERIM branch: where to watch. The old Watch page's platform logos, turned white
   with their white backgrounds removed (2026-09-14), on glass tiles. No
   backdrop-filter: on hover-lifted rounded tiles WebKit paints it unclipped. */
.watch-logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; max-width: 960px; }
.watch-logos a { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; padding: 12% 14%; border-radius: var(--r-md); background: var(--glass); border: 1px solid var(--glass-brd); box-shadow: var(--shadow-card); transition: transform .15s ease, background .15s ease; }
.watch-logos a:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.18); }
.watch-logos img { display: block; width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 900px) { .watch-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (prefers-reduced-motion: reduce) { .watch-logos a { transition: none; } }

/* Gift thank-you page: the code, big enough to read out or copy. White only:
   on this blue, anything lighter or tinted fails contrast. */
.gift-code { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 18px 0 4px; padding: 16px 20px; border-radius: var(--r-md); background: rgba(255, 255, 255, 0.12); border: 2px dashed rgba(255, 255, 255, 0.6); }
.gift-code-label { flex-basis: 100%; font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #ffffff; }
.gift-code-value { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.9rem; font-weight: 800; letter-spacing: .06em; color: #ffffff; }
.gift-code-value--note { font-family: inherit; font-size: 1.05rem; font-weight: 700; letter-spacing: 0; }