/* Ripper: brand tokens mirror the app's Theme.swift */
:root {
  --canvas: #000;
  --surface: #161616;
  --line: rgba(255, 255, 255, .1);
  --ink: #f5f5f7;
  --ink-2: rgba(245, 245, 247, .66);
  --stone: #8E8E93;
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "Inter", system-ui, -apple-system, sans-serif;
  --gutter: clamp(16px, 4vw, 40px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--canvas);
  color: var(--ink);
  font: 400 17px/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid #4A80FF; outline-offset: 3px; border-radius: 6px; }

/* ---------- nav: logo left, overflow menu right ---------- */
.nav {
  position: relative; z-index: 10;
  width: 100%; padding: 16px var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
}
.logo { font: 900 22px/1 var(--display); letter-spacing: .03em; }
.menu { position: relative; }
.menu summary {
  list-style: none; cursor: pointer;
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center;
  transition: background .2s;
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover, .menu[open] summary { background: rgba(255, 255, 255, .1); }
.menu summary svg { width: 22px; height: 22px; fill: var(--ink); }
.menu-list {
  position: absolute; right: 0; top: calc(100% + 6px);
  min-width: 160px; padding: 6px;
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .6);
}
.menu-list a { padding: 10px 12px; border-radius: 9px; font-size: 15px; text-align: left; }
.menu-list a:hover { background: rgba(255, 255, 255, .08); }

/* ---------- the whole page is one hero ---------- */
.hero {
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: radial-gradient(60% 50% at 50% 0%, rgba(45, 105, 255, .22), transparent 70%);
}
.hero-copy {
  position: relative; z-index: 1; /* above the wall, whose edges climb up beside it */
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(8px, 3svh, 48px) var(--gutter) 0;
}
.hero h1 {
  font: 900 clamp(40px, min(10.5vw, 9.5svh), 120px)/.9 var(--display);
  text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center;
  white-space: nowrap;
}
.hero h1 .bury { color: var(--stone); }
/* centered above the headline: pops in, then waves every few seconds */
.hero-shaka {
  width: clamp(64px, 11svh, 116px); height: auto;
  margin-bottom: 2px;
  animation: pop .7s var(--ease) both, wave 4s ease-in-out .7s infinite;
  transform-origin: 30% 85%;
  cursor: pointer;
}
@keyframes pop { from { opacity: 0; transform: translateY(24px) scale(.6) rotate(-20deg); } }
@keyframes wave {
  0%, 60%, 100% { transform: rotate(0); }
  10% { transform: rotate(12deg); }
  20% { transform: rotate(-8deg); }
  30% { transform: rotate(10deg); }
  40% { transform: rotate(-4deg); }
}
.lede { color: var(--ink-2); font-size: clamp(16px, 1.4vw, 19px); margin: 16px 0 22px; }

/* chunky like the app's ChunkyLabel: 62pt tall */
.btn-store {
  display: inline-flex; align-items: center; gap: 10px;
  height: 62px; padding: 0 40px 0 34px;
  border-radius: 16px;
  background: #fff; color: #000;
  font: 600 19px/1 var(--body); letter-spacing: -.01em;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .5);
  transition: transform .2s var(--ease);
}
.btn-store svg { width: 22px; height: 22px; margin-top: -2px; }
.btn-store:hover { transform: translateY(-2px); }
.btn-store:active { transform: scale(.96); }

/* App Store button + square QR button beside it */
.store-row { display: flex; align-items: center; gap: 10px; }
.qr { position: relative; }
.qr-btn {
  width: 62px; height: 62px; border: 0; border-radius: 16px; cursor: pointer;
  display: grid; place-items: center;
  /* dark and quiet, so the App Store button stays the one white call to action */
  background: rgba(255, 255, 255, .08); color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  transition: transform .2s var(--ease), background .2s;
}
.qr-btn svg { width: 24px; height: 24px; }
.qr-btn:hover, .qr-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .14); transform: translateY(-2px); }
.qr-btn:active { transform: scale(.96); }
/* the popover: big enough to scan from a desk */
.qr-pop {
  position: absolute; z-index: 20; left: 50%; top: calc(100% + 14px);
  padding: 18px; border-radius: 22px;
  background: #fff; color: #000; text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
  transform: translateX(-50%);
  animation: qr-in .22s var(--ease);
}
.qr-pop.up { top: auto; bottom: calc(100% + 14px); }
.qr-pop[hidden] { display: none; }
.qr-pop::before { /* pointer back to the button */
  content: ""; position: absolute; left: 50%; top: -6px; width: 14px; height: 14px;
  background: #fff; border-radius: 3px; transform: translateX(-50%) rotate(45deg);
}
.qr-pop.up::before { top: auto; bottom: -6px; }
.qr-code svg { display: block; width: 200px; height: 200px; }
@keyframes qr-in { from { opacity: 0; transform: translateX(-50%) scale(.94); } }
/* phones: you'd just tap the App Store button, and can't scan your own screen */
@media (max-width: 640px) { .qr { display: none; } }

/* ---------- podcast art: a tight wall curved into a U ---------- */
.shelf {
  --tile: clamp(108px, min(12vw, 16svh), 168px); --gap: 4px;
  --overlap: calc(var(--tile) * -.1);   /* each row tucks 10% under the row below it */
  /* fills whatever height is left under the button; the bottom row runs off the screen */
  flex: 1 1 0; min-height: 200px;
  /* --climb (set by script.js) is how high the U's edges rise. The shelf reaches up by that much behind the
     copy, so the edges climb beside the headline while the center stays below the button. */
  --climb: 56px;
  width: 100%; margin-top: calc(clamp(64px, 11svh, 112px) - var(--climb)); padding-top: var(--climb);
  overflow: hidden; /* clip the wall here, not the whole hero, so the menu is never cut off */
  pointer-events: none;
  display: flex; flex-direction: column; align-items: center;
}
.shelf-row { display: flex; justify-content: center; gap: var(--gap); width: 100%; flex: none; }
.shelf-row + .shelf-row { margin-top: var(--overlap); }
.tile {
  flex: none;
  /* --d = distance from the center; --k is set by script.js so the curve spans the screen */
  transform: translateY(calc(var(--d) * var(--d) * var(--k, 3px) * -1));
}
.float { animation: float 7s ease-in-out infinite; animation-delay: calc(var(--d) * -.6s); }
@keyframes float { 50% { transform: translateY(-6px); } }
.pod {
  position: relative;
  width: var(--tile); height: var(--tile);
  border-radius: 10px; overflow: hidden;
  background: var(--surface);
  box-shadow: 0 -6px 20px rgba(0, 0, 0, .55), 0 14px 28px -8px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.pod img { width: 100%; height: 100%; object-fit: cover; }
/* a dark layer fades tiles toward the edges while keeping them opaque */
.pod::after { content: ""; position: absolute; inset: 0; background: #000; opacity: min(calc(var(--d) * .06), .5); pointer-events: none; }

@media (max-width: 640px) {
}

@media (prefers-reduced-motion: reduce) {
  .float, .hero-shaka, .fan img, .cta-shaka.in { animation: none; }
}

/* ---------- footer (features page) ---------- */
.site-footer {
  padding: 28px var(--gutter) 40px; /* full width, lined up with the header's edges */
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  border-top: 1px solid var(--line);
  color: var(--stone); font-size: 13px;
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: 20px; }
.site-footer a:hover { color: var(--ink); }

/* ---------- privacy / terms ---------- */
.legal { max-width: 680px; margin: 0 auto; padding: 24px var(--gutter) 96px; }
.legal h1 { font: 900 clamp(44px, 7vw, 64px)/.9 var(--display); text-transform: uppercase; margin-bottom: 24px; }
.legal h2 { font: 900 26px/1 var(--display); text-transform: uppercase; margin: 36px 0 12px; }
.legal p, .legal li { color: var(--ink-2); margin-bottom: 12px; }
.legal ul { padding-left: 20px; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal a { text-decoration: underline; }

/* ---------- nav link (Features) ---------- */
.nav-right { display: flex; align-items: center; gap: 8px; }
.nav-link { padding: 8px 12px; border-radius: 10px; font-size: 15px; font-weight: 500; color: var(--ink-2); transition: color .2s, background .2s; }
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--ink); }

/* ---------- features page ---------- */
.page { max-width: 1080px; margin: 0 auto; padding: 0 var(--gutter); }
.muted { color: var(--stone); }
/* all caps only for the page headline and the closing line; everything else is sentence case in Inter */
.f-intro h1, .f-cta h2 { font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: .92; }

.f-intro { text-align: center; padding: clamp(40px, 7vh, 88px) 0 clamp(56px, 10vh, 104px); }

/* Top 4 fan, like the profile in the app: -9/-3/3/9 degrees, #1 on top; fans out on load */
.fan { --card: clamp(92px, 17vw, 156px); position: relative; height: calc(var(--card) + 28px); margin-bottom: clamp(28px, 5vh, 48px); }
.fan img {
  position: absolute; left: 50%; top: 0;
  width: var(--card); height: var(--card); margin-left: calc(var(--card) / -2);
  border-radius: calc(var(--card) * .16); object-fit: cover;
  border: 1.5px solid rgba(255, 255, 255, .6);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .55);
  transform-origin: 50% 100%;
  transform: translate(calc(var(--x) * var(--card) * .8), var(--y)) rotate(var(--r));
  animation: fan-out .9s var(--ease) both;
  animation-delay: calc(.15s + var(--i) * .05s);
}
@keyframes fan-out { from { transform: translate(0, 16px) rotate(0); opacity: 0; } }
.f-intro h1 { font-size: clamp(40px, 7vw, 88px); display: flex; flex-direction: column; }
.f-lede { color: var(--ink-2); font-size: clamp(16px, 1.4vw, 19px); margin-top: 18px; }

.feature {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px 72px; align-items: center;
  padding: clamp(56px, 9vh, 96px) 0;
  border-top: 1px solid var(--line);
}
.feature h2 { font: 600 clamp(26px, 2.8vw, 36px)/1.15 var(--body); letter-spacing: -.025em; margin-bottom: 14px; }
.feature p { color: var(--ink-2); font-size: 17px; max-width: 440px; }
.feature p + p { margin-top: 12px; }
.feature .fine { font-size: 14px; color: var(--stone); margin-top: 20px; }

/* example app screens */
.mock { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 18px; }
/* app-style section header: icon + heavy condensed caps */
.mock-head { display: flex; align-items: center; gap: 7px; font: 900 19px/1 var(--display); text-transform: uppercase; margin: 4px 4px 14px; }
.mh-icon { width: 16px; height: 16px; fill: var(--ink); flex: none; }
.queue { list-style: none; display: grid; gap: 4px; }
.queue li { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; }
.cover { width: 52px; height: 52px; flex: none; border-radius: 9px; object-fit: cover; background: #222; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.name { display: flex; flex-direction: column; gap: 3px; font-weight: 600; font-size: 15px; line-height: 1.25; min-width: 0; }
.name small { font-weight: 400; font-size: 13px; color: var(--stone); display: flex; align-items: center; gap: 6px; }
.name b { font-weight: 600; }
.name > span { font-weight: 400; color: var(--ink-2); }
.queue .name + .cover { margin-left: auto; } /* a trailing cover (friends list) sits at the right edge */
.avatar { width: 44px; height: 44px; flex: none; border-radius: 50%; background: #2a2a2d; padding: 3px; object-fit: contain; }

.heatmap { display: grid; grid-template-columns: auto repeat(10, 1fr); gap: 5px; }
.heatmap .lbl { color: var(--stone); display: grid; place-items: center start; padding-right: 6px; font: 900 13px/1 var(--display); }
.heatmap .cell { aspect-ratio: 1; border-radius: 7px; display: grid; place-items: center; font: 900 clamp(11px, 1.2vw, 14px)/1 var(--display); }

.tiers { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
/* every card shares the same rows (art, label, threshold) so the three line up exactly */
.tiers li {
  --pad: 12px; --art: 76px;
  display: grid; grid-template-rows: var(--art) 32px auto; row-gap: 10px; justify-items: center; align-items: center;
  text-align: center;
  padding: 22px var(--pad) 20px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line);
}
.tiers img { width: var(--art); height: var(--art); object-fit: contain; }
/* the trophy art is drawn leaning left; stand it up */
.tiers li.cert img { transform: translate(-4px, 4px) rotate(12deg) scale(.95); } /* nudged left: the upright trophy's weight sits right of the image's center */
.tiers b { font: 600 15px/1 var(--body); }
.tiers li > span { color: var(--stone); font-size: 14px; line-height: 1; } /* the threshold under each label */
/* Certified Ripper: film-festival laurels around the label */
.tiers li.cert { border-color: rgba(230, 200, 130, .35); }
.tiers .laurel { display: flex; align-items: center; gap: 3px; font: 600 12.5px/1.08 var(--body); color: #E8C872; }
.laurel svg { width: 14px; height: 30px; flex: none; color: #D9B45A; }
.laurel svg.flip { transform: scaleX(-1); }

.f-cta { text-align: center; padding: clamp(72px, 12vh, 128px) 0 clamp(88px, 14vh, 144px); border-top: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 32px; }
.f-cta h2 { font-size: clamp(40px, 6vw, 80px); }
.cta-shaka { width: clamp(72px, 10vw, 116px); height: auto; margin-bottom: -16px; transform-origin: 30% 85%; }
/* hidden only while the script is waiting to pop it in, so it still shows if the script never runs */
.cta-shaka.waiting { opacity: 0; }
.cta-shaka.in { animation: pop .7s var(--ease) both, wave 4s ease-in-out .7s infinite; }

/* Make it yours: one big stack, paged with arrows and dots */
.pager-stage { display: grid; }
.stack {
  grid-area: 1 / 1; margin: 0;
  display: flex; flex-direction: column; align-items: center;
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.stack.on { opacity: 1; pointer-events: auto; }
.stack .mock-head { align-self: flex-start; }
.stack .deck { --c: clamp(150px, 16vw, 188px); margin: 14px 0 6px; perspective: 900px; }
.stack .deck-card { border-radius: 18px; }
.stack .coll-cover svg { width: 44px; height: 44px; }
.stack .coll-cover b { font-size: 19px; }
.pager-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 10px; }
.pager-arrow {
  width: 36px; height: 36px; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: var(--ink);
  background: rgba(255, 255, 255, .08); transition: background .2s;
}
.pager-arrow:hover { background: rgba(255, 255, 255, .16); }
.pager-arrow svg { width: 18px; height: 18px; }
.lib-dots { display: flex; justify-content: center; gap: 6px; }
/* a true pill needs a real width change; for four 6px dots the layout cost is negligible */
.lib-dots button { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .25); cursor: pointer; transition: width .3s var(--ease), background .3s; }
.lib-dots button[aria-selected="true"] { width: 18px; background: var(--ink); }
.coll-cover {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  width: 100%; height: 100%; padding: 4px; text-align: center; color: #fff;
  background: linear-gradient(160deg, color-mix(in srgb, var(--col) 80%, white), var(--col));
}
.coll-cover svg { width: 20px; height: 20px; fill: currentColor; }
.coll-cover b { font: 900 10px/1 var(--display); text-transform: uppercase; }

/* the deck: front card drawn last so it sits on top */
.deck { --c: clamp(68px, 8vw, 104px); position: relative; flex: none; width: calc(var(--c) + 36px); height: calc(var(--c) + 16px); perspective: 500px; }
.deck-card {
  position: absolute; left: 0; bottom: 4px; width: var(--c); height: var(--c);
  border-radius: 10px; overflow: hidden;
  background: linear-gradient(135deg, #2a2a2d, #232326);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 2px 3px 8px rgba(0, 0, 0, .35);
  transform: translate(calc(var(--i) * 7px), calc(var(--i) * -3px)) rotateY(-18deg);
}
.deck-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.deck-card .pl-cover { width: 100%; height: 100%; border-radius: 0; }
.pl-cover { width: 52px; height: 52px; flex: none; display: grid; grid-template-columns: 1fr 1fr; border-radius: 9px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.pl-cover img { width: 100%; height: 100%; object-fit: cover; }

/* stars + like, as in the app */
.stars { display: inline-flex; gap: 1px; }
.stars svg { width: var(--s); height: var(--s); }
.heart { width: 14px; height: 14px; flex: none; }

/* Scorecard section: tiers above the heat map */
.score-visual { display: grid; gap: 12px; }

/* your rating */
.rate-top { display: flex; align-items: center; gap: 12px; padding: 4px; }
/* show progress, like the app's podcast page: a blue bar and the percentage */
.progress { margin-left: auto; display: flex; align-items: center; gap: 8px; font: 600 14px/1 var(--body); }
.progress .bar { width: 64px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.progress .bar i { display: block; height: 100%; border-radius: inherit; background: #2D69FF; }
.rate-label { margin: 22px 4px 8px; font-size: 13px; color: var(--stone); }
.rate-row { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; }
.rate-row .heart { width: 30px; height: 30px; }
.rate-review { margin: 18px 4px 4px; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .05); color: var(--ink); font-size: 15px; }

/* Bury animation */
.bury-demo { position: relative; overflow: hidden; }
.bury-demo li { display: grid; grid-template-rows: 1fr; align-items: stretch; overflow: hidden; padding: 0; transition: grid-template-rows .45s var(--ease), opacity .35s, transform .35s; }
.bury-demo li.gone { grid-template-rows: 0fr; opacity: 0; transform: scale(.96); }
.bury-demo .clip { min-height: 0; overflow: hidden; }
.bury-demo .row { display: flex; align-items: center; gap: 12px; padding: 8px; }
.dots { margin-left: auto; width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .08); border: 0; }
.dots svg { width: 16px; height: 16px; fill: var(--ink-2); }
.ctx-menu {
  position: absolute; z-index: 2; min-width: 170px; padding: 6px;
  display: flex; flex-direction: column;
  background: #252527; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .6);
  opacity: 0; transform: scale(.9); transform-origin: top right;
  transition: opacity .2s, transform .25s var(--ease);
  pointer-events: none;
}
.ctx-menu.open { opacity: 1; transform: none; }
.ctx-menu span { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 9px; font-size: 15px; transition: background .15s; }
.ctx-menu .danger { color: #FF453A; }
.ctx-menu .danger svg { width: 17px; height: 17px; }
.ctx-menu .hit { background: rgba(255, 69, 58, .16); }
.toast {
  position: absolute; left: 50%; bottom: 16px; z-index: 2;
  display: flex; align-items: center; gap: 8px; white-space: nowrap; width: max-content;
  padding: 8px 14px 8px 8px; border-radius: 999px;
  background: #fff; color: #000; font-size: 14px; font-weight: 600;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  opacity: 0; transform: translate(-50%, 16px);
  transition: opacity .3s, transform .4s var(--ease);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast img { width: 22px; height: 22px; }
.toast b { color: #2D69FF; margin-left: 6px; }
/* the fingertip: a soft circle like iOS screen recordings */
.touch {
  position: absolute; left: 0; top: 0; z-index: 3;
  width: 34px; height: 34px;
  opacity: 0; pointer-events: none;
  /* ease-in-out like a real fingertip: it speeds up, then settles, instead of lunging and crawling */
  transition: transform .9s cubic-bezier(.65, 0, .35, 1), opacity .35s ease;
  will-change: transform;
}
/* the circle itself; the press shrinks only this, so it never pulls the fingertip off its spot */
.touch::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .35); border: 2px solid rgba(255, 255, 255, .85);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
  transition: transform .18s ease, background .18s ease;
}
.touch.show { opacity: 1; }
.touch.down::before { transform: scale(.75); background: rgba(255, 255, 255, .6); }

@media (max-width: 800px) {
  .feature { grid-template-columns: 1fr; gap: 32px; }
  .tiers { gap: 8px; }
  .tiers li { --pad: 6px; --art: 58px; padding-top: 18px; padding-bottom: 16px; }
  .tiers b { font-size: 14px; }
}