.hero {
  position: relative;
  /* svh, not dvh: dvh changes every frame the mobile URL bar slides, resizing the hero
     (and everything under it) mid-scroll */
  min-height: 100vh;
  min-height: 100svh;
  background: var(--orangish);
  color: var(--creamish);
  display: flex;
  align-items: center;
  padding: calc(var(--header-h) + 24px) 0 96px;
}

.hero > .wrap {
  position: relative;
  z-index: 1;
}

/* Arcs echoing the logo mark, radiating out from the lower left, plus a ripple from each
   tap (drawn by js/site.js). A canvas is its own GPU surface: redrawing it every frame
   repaints nothing else. Animated SVG repainted the whole hero-sized layer every frame,
   which starved the rest of the page of paint time on phones */
.hero-arcs {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(300px, 1.15fr);
  gap: 64px;
  align-items: center;
}

.hero-wordmark {
  display: block;
  height: clamp(56px, 7.2vw, 76px);
  width: auto;
  max-width: none;
  margin-bottom: clamp(16px, 2.2vw, 24px);
}

/* Masthead rule: a change of rhythm between the wordmark and the headline */
.hero-rule {
  display: block;
  width: 56px;
  height: 2px;
  border-radius: 1px;
  background: rgba(42, 35, 32, 0.3);
  margin-bottom: clamp(18px, 2.6vw, 28px);
}

/* Sits with the title it introduces: the rule's space above, a tight gap below */
.hero-label {
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 500;
  color: var(--ink-warm);
  opacity: 0.85;
  margin-bottom: clamp(10px, 1.2vw, 14px);
}

.hero h1 {
  color: var(--creamish);
  font-size: clamp(2.6rem, 6.4vw, 5.1rem);
  line-height: 1.05;
  letter-spacing: -0.028em;
  max-width: 13ch;
  margin-bottom: clamp(18px, 2.2vw, 26px);
}

.hero-sub {
  max-width: 34ch;
  font-size: 1.12rem;
  line-height: 1.6;
  font-weight: 500;
  color: var(--ink-warm);
  margin-bottom: 32px;
}

/* Hero entrance: the rest of the page reveals on scroll, so the hero reveals on load */
@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes hero-rule-in {
  from {
    opacity: 0;
    transform: scaleX(0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Fill backwards only: the end frame matches the resting style, and a finished animation
   left filling forwards keeps the element on its own layer (Safari) for no reason */
.hero-copy > *,
.hero-visual {
  animation: hero-rise 0.72s var(--ease) backwards;
}

.hero-wordmark {
  animation-delay: 60ms;
}

.hero-label {
  animation-delay: 170ms;
}

.hero-rule {
  transform-origin: left center;
  animation: hero-rule-in 0.56s var(--ease) 150ms backwards;
}

.hero h1 {
  animation-delay: 190ms;
}

.hero-sub {
  animation-delay: 290ms;
}

.hero-copy .store-row,
.hero-copy .waitlist-row {
  animation-delay: 380ms;
}

.hero-visual {
  animation-delay: 300ms;
}

/* The cards share one grid cell, so the stage is as tall as its tallest card and holds
   that height as cards rotate through. Three card elements are built once and cycle
   through the slots (js/marketing.js), and every move is transform and opacity only:
   no card is rebuilt, resized or re-decoded mid-animation, so none of them flash */
.card-stage {
  --next-opacity: 0.42;
  --swipe-ms: 320ms;
  position: relative;
  display: grid;
  width: min(100%, 380px);
  margin-inline: auto;
  user-select: none;
  -webkit-user-select: none;
}

.stack-card {
  grid-area: 1 / 1;
  display: flex;
  min-width: 0;
  will-change: transform, opacity;
  transition:
    transform var(--swipe-ms) cubic-bezier(0.22, 0.7, 0.3, 1),
    opacity var(--swipe-ms) ease;
}

/* --drag (px, unitless) and --lift (0-1) are set on the stage while a card is dragged */
.stack-card[data-slot="front"] {
  z-index: 3;
  transform: translateX(calc(var(--drag, 0) * 1px)) rotate(calc(var(--drag, 0) * 1deg / 42));
  opacity: calc(1 - var(--lift, 0) * 0.18);
}

/* Tucked behind the front card with its bottom edge peeking out 10px below it; rises to
   full size as the front card is dragged away */
.stack-card[data-slot="next"] {
  z-index: 2;
  transform: translateY(calc((1 - var(--lift, 0)) * (5% + 10px))) scale(calc(0.9 + var(--lift, 0) * 0.1));
  opacity: calc(var(--next-opacity) + (1 - var(--next-opacity)) * var(--lift, 0));
  pointer-events: none;
}

/* The card after that waits out of sight behind the next one */
.stack-card[data-slot="back"],
.stack-card[data-slot="none"] {
  z-index: 1;
  transform: translateY(calc(8% + 16px)) scale(0.84);
  opacity: 0;
  pointer-events: none;
}

/* No episode left for this slot (the end of a list that doesn't wrap) */
.stack-card[data-slot="none"] {
  visibility: hidden;
}

/* On its way out, over the others; the exit transform is set inline */
.stack-card[data-slot="out"] {
  z-index: 4;
  opacity: 0;
  pointer-events: none;
}

.stack-card.is-parked {
  transition: none;
}

.stack-card > .episode-card {
  flex: 1;
  min-width: 0;
}

.episode-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  color: var(--grayish);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(17, 19, 24, 0.08);
  overflow: hidden;
}

.episode-cover {
  position: relative;
  margin: 12px;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 1;
  height: auto;
  flex-shrink: 0;
  background: var(--onboarding);
}

.episode-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

.category-pill {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--orangish);
  color: var(--surface);
  border-radius: 12px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.play-disc {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--orangish);
  display: grid;
  place-items: center;
}

.play-disc svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.duration-badge {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(62, 57, 53, 0.5);
  color: var(--surface);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 0.78rem;
  font-weight: 500;
}

.duration-badge svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.episode-body {
  flex: 1;
  padding: 4px 16px 18px;
}

.episode-title {
  font-family: var(--episode);
  font-weight: 700;
  font-size: 1.28rem;
  line-height: 1.2;
  color: var(--grayish);
}

.episode-sub {
  margin-top: 6px;
  font-size: 0.88rem;
  color: rgba(62, 57, 53, 0.6);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Hero fan: the three cards share one grid cell and move by transform only. At rest they
   fan out as on the link preview image; hovering or focusing the fan, or scrolling past the
   wordmark, lays them side by side, scaled to fit (--spread-scale, from js/marketing.js) */
.hero-fan {
  --card-w: clamp(230px, 19vw, 270px);
  --spread-scale: 0.8;
  --spread-gap: 14px;
  display: grid;
  justify-content: center;
  width: 100%;
  padding-block: 12px 36px;
  user-select: none;
  -webkit-user-select: none;
}

.fan-card {
  --o: 0;
  grid-area: 1 / 1;
  display: flex;
  width: var(--card-w);
  cursor: pointer;
  outline: none;
  transition: transform 0.5s var(--ease);
}

.fan-card > .episode-card {
  flex: 1;
  min-width: 0;
  box-shadow: 0 22px 44px -22px rgba(42, 35, 32, 0.5);
  transition:
    transform 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}

.fan-card[data-pos="center"] {
  z-index: 3;
}

.fan-card[data-pos="left"] {
  --o: -1;
  z-index: 2;
  transform: translate(-44%, 6%) rotate(-8deg) scale(0.9);
}

.fan-card[data-pos="right"] {
  --o: 1;
  z-index: 2;
  transform: translate(44%, 6%) rotate(8deg) scale(0.9);
}

/* Spread on scroll too, once the hero wordmark has handed off to the topbar logo and the fan
   is in view (js/site.js), so the side cards show they're there to tap where there's no hover */
.hero-fan.is-spread .fan-card {
  transform: translateX(calc(var(--o) * (var(--spread-scale) * 100% + var(--spread-gap))))
    scale(var(--spread-scale));
}

@media (hover: hover) and (pointer: fine) {
  .hero-fan:hover .fan-card,
  .hero-fan:focus-within .fan-card {
    transform: translateX(calc(var(--o) * (var(--spread-scale) * 100% + var(--spread-gap))))
      scale(var(--spread-scale));
  }

  .hero-fan:hover .fan-card:hover > .episode-card {
    transform: translateY(-6px);
    box-shadow: 0 28px 52px -24px rgba(42, 35, 32, 0.55);
  }
}

.fan-card:focus-visible > .episode-card {
  outline: 2px solid var(--ink-warm);
  outline-offset: 3px;
}

.play-disc .pause-icon,
.fan-card.is-playing .play-disc svg:first-child {
  display: none;
}

.fan-card.is-playing .play-disc .pause-icon {
  display: block;
}

/* Play disc: white with an orange play icon; orange with a cream icon on hover and while
   playing */
.play-disc {
  transition:
    background-color 0.2s var(--ease),
    color 0.2s var(--ease);
}

.fan-card.is-playing .play-disc {
  background: var(--orangish);
  color: var(--creamish);
}

@media (hover: hover) and (pointer: fine) {
  .fan-card:hover .play-disc {
    background: var(--orangish);
    color: var(--creamish);
  }
}

.duration-badge {
  font-variant-numeric: tabular-nums;
}

/* Progress, as on the app's cards: a thin bar along the cover's bottom edge, once started */
.cover-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(62, 57, 53, 0.25);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}

.cover-progress.is-visible {
  opacity: 1;
}

.cover-progress-fill {
  display: block;
  width: 0%;
  height: 100%;
  background: var(--orangish);
  transition: width 0.25s linear;
}

/* "Learn more": at the bottom right, where the eye lands after the copy and the cards; it
   fades in once the hero has settled, and fades out once the page scrolls (the topbar's
   "scrolled" state, js/site.js) */
.hero-more-row {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(20px, 3.4vh, 34px);
  z-index: 1;
  pointer-events: none;
}

.hero-more-row .wrap {
  display: flex;
  justify-content: flex-end;
}

.hero-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--creamish);
  text-decoration: none;
  opacity: 0.85;
  animation: more-in 0.7s var(--ease) 2.4s backwards;
  transition: opacity 0.3s var(--ease);
}

.hero-more-arrow {
  width: 10px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s var(--ease);
}

.hero-more:hover,
.hero-more:focus-visible {
  opacity: 1;
}

.hero-more:hover .hero-more-arrow,
.hero-more:focus-visible .hero-more-arrow {
  transform: translateY(3px);
}

@keyframes more-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

header.scrolled ~ main .hero-more {
  opacity: 0;
  pointer-events: none;
}

.section {
  padding: 108px 0;
}

.section-worldview {
  background: var(--creamish);
  color: var(--grayish);
}

.worldview-visual {
  max-width: 920px;
}

.section h2 {
  font-size: clamp(2rem, 4.2vw, 3.15rem);
  max-width: 16ch;
  margin-bottom: 22px;
}

.worldview-head h2 {
  max-width: none;
  margin-bottom: 14px;
  text-align: center;
}

.worldview-sub {
  margin: 0 auto 44px;
  text-align: center;
  font-size: clamp(1.1rem, 1.6vw, 1.28rem);
  line-height: 1.55;
  font-weight: 500;
  color: rgba(62, 57, 53, 0.82);
}

.category-scene {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 280px) minmax(0, 1fr);
  grid-template-areas: "left card right";
  column-gap: 28px;
  align-items: stretch;
  width: 100%;
}

.category-stage {
  --next-opacity: 0.36;
  --swipe-ms: 420ms;
  grid-area: card;
  width: 100%;
  margin-inline: 0;
}

/* The auto swipe flicks the front card away faster than the next one rises */
.category-stage .stack-card[data-slot="out"] {
  transition:
    transform 0.22s cubic-bezier(0.4, 0, 1, 1),
    opacity 0.18s ease;
}

/* Pills sit one per row, rows evenly spaced down the card's height,
   staggered horizontally so the columns read as loose drifts. */
.pill-field--right .category-pill:nth-child(6n + 1) { margin-left: 8%; }
.pill-field--right .category-pill:nth-child(6n + 2) { margin-left: 30%; }
.pill-field--right .category-pill:nth-child(6n + 3) { margin-left: 14%; }
.pill-field--right .category-pill:nth-child(6n + 4) { margin-left: 36%; }
.pill-field--right .category-pill:nth-child(6n + 5) { margin-left: 2%; }
.pill-field--right .category-pill:nth-child(6n) { margin-left: 24%; }

.pill-field--left .category-pill:nth-child(6n + 1) { margin-right: 22%; }
.pill-field--left .category-pill:nth-child(6n + 2) { margin-right: 4%; }
.pill-field--left .category-pill:nth-child(6n + 3) { margin-right: 32%; }
.pill-field--left .category-pill:nth-child(6n + 4) { margin-right: 12%; }
.pill-field--left .category-pill:nth-child(6n + 5) { margin-right: 28%; }
.pill-field--left .category-pill:nth-child(6n) { margin-right: 0; }

/* Every category card is the same size as they cycle: the body has room for a three-line
   title (1.28rem at 1.2) and a two-line subtitle (0.88rem at 1.65), and the subtitle follows
   the title directly, any spare room falling below it */
.category-stage .episode-title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.category-stage .episode-body {
  min-height: calc(3 * 1.28rem * 1.2 + 2 * 0.88rem * 1.65 + 28px);
}

.pill-field {
  display: grid;
  grid-template-rows: repeat(var(--pill-rows, 6), minmax(0, 1fr));
  align-items: center;
  pointer-events: none;
}

.pill-field--left {
  grid-area: left;
  justify-items: end;
}

.pill-field--right {
  grid-area: right;
  justify-items: start;
}

.pill-field .category-pill {
  position: relative;
  inset: auto;
  z-index: 6;
}

/* Topic pills: every topic from the start. Upcoming ones are outlined in grey, the card's
   current topic in orange, and topics already shown are solid. The border stays on in every
   state so a pill keeps its size as it changes */
.topic-pill {
  border: 1.5px solid transparent;
  transition:
    transform 0.46s cubic-bezier(0.22, 0.7, 0.3, 1),
    background-color 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease,
    box-shadow 0.3s ease;
}

.topic-pill.is-upcoming {
  background: transparent;
  border-color: rgba(62, 57, 53, 0.24);
  color: rgba(62, 57, 53, 0.55);
}

.topic-pill.is-current {
  background: transparent;
  border-color: var(--orangish);
  color: var(--grayish);
}

.topic-pill.is-done {
  background: var(--orangish);
  border-color: var(--orangish);
  color: var(--surface);
  box-shadow: 0 6px 16px rgba(17, 19, 24, 0.14);
}

/* The solid copy that flies from the card to the topic's place (js/marketing.js) */
.topic-pill-flying {
  position: fixed;
  z-index: 50;
  margin: 0;
  pointer-events: none;
  transition: transform 0.46s cubic-bezier(0.22, 0.7, 0.3, 1);
}

/* Phones: the same pills in one wrapped row under the card (the side columns are hidden) */
.pill-row {
  display: none;
}

@media (max-width: 900px) {
  .category-scene {
    grid-template-columns: minmax(0, 340px);
    grid-template-areas:
      "card"
      "pills";
    justify-content: center;
  }

  .category-stage {
    width: min(100%, 280px);
    margin-inline: auto;
  }

  .pill-field {
    display: none;
  }

  .pill-row {
    grid-area: pills;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 32px;
  }

  .pill-row .category-pill {
    position: static;
    padding: 3px 10px;
    font-size: 10px;
  }
}

.section-pricing {
  background: var(--grayish);
  color: var(--creamish);
}

.section-pricing h2 {
  max-width: none;
  color: var(--creamish);
}

.pricing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(240px, 0.8fr);
  gap: 56px;
  align-items: start;
  margin-top: 48px;
}

.plan-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.plan {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
  align-content: start;
  background: rgba(240, 238, 225, 0.06);
  border-radius: 20px;
  padding: 28px 26px 30px;
}

.plan h3 {
  font-family: var(--wordmark);
  font-weight: 500;
  font-size: 1.7rem;
  color: var(--creamish);
  letter-spacing: -0.03em;
}

.plan h3 em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--orangish);
  font-weight: 700;
}

/* The plan's terms, under its name: no prices (the stores show them, in local currency) */
.plan-price {
  margin: 6px 0 24px;
  font-size: 1.05rem;
  color: rgba(240, 238, 225, 0.72);
}

.plan ul {
  list-style: none;
  display: grid;
  align-content: start;
  gap: 12px;
}

.plan li {
  position: relative;
  padding-left: 20px;
  font-size: 0.98rem;
}

.plan li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orangish);
}

.plan li.plan-includes {
  padding-left: 0;
}

.plan li.plan-includes::before {
  content: none;
}

.plan li span {
  color: var(--orangish);
}

.count-panel {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 8px;
}

.count-kicker {
  font-size: 1.05rem;
  max-width: 18ch;
}

.count-number {
  font-family: var(--serif);
  font-size: clamp(5rem, 12vw, 8.5rem);
  line-height: 0.86;
  letter-spacing: -0.04em;
  color: var(--orangish);
  margin: 10px 0 8px;
}

.count-caption {
  font-size: 1.05rem;
  color: rgba(240, 238, 225, 0.72);
}

.count-link {
  align-self: flex-start;
  margin-top: 22px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid rgba(240, 238, 225, 0.32);
  color: var(--creamish);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition:
    background-color 0.22s var(--ease),
    border-color 0.22s var(--ease),
    color 0.22s var(--ease);
}

@media (hover: hover) {
  .count-link:hover {
    background: var(--creamish);
    border-color: var(--creamish);
    color: var(--grayish);
  }
}

.count-link:focus-visible {
  outline: 2px solid var(--orangish);
  outline-offset: 3px;
}

.section-cta {
  background: var(--creamish);
  padding: 120px 0;
}

.cta-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  grid-template-areas:
    "tagline figure"
    "action figure";
  column-gap: 64px;
  row-gap: 40px;
  align-items: center;
}

.cta-tagline {
  grid-area: tagline;
  align-self: end;
  font-family: var(--serif);
  font-size: clamp(2.4rem, 5.5vw, 4.4rem);
  line-height: 1.05;
  max-width: 10ch;
}

.cta-kicker {
  display: block;
  font-size: 0.36em;
  font-weight: 400;
  color: var(--mute);
  margin-bottom: 0.5em;
}

.cta-tagline em {
  font-style: italic;
  color: var(--orangish);
}

.cta-action {
  grid-area: action;
  align-self: start;
}

.cta-heading {
  font-family: var(--sans);
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  letter-spacing: -0.01em;
  margin-bottom: 20px;
}

.compound-figure {
  grid-area: figure;
  position: relative;
  overflow: hidden;
  background: var(--grayish);
  color: var(--creamish);
  border-radius: 28px;
  padding: clamp(28px, 4vw, 48px);
  box-shadow: 0 24px 56px -24px rgba(17, 19, 24, 0.45);
}

/* Echoes the arcs in the logo */
.compound-figure::before {
  content: "";
  position: absolute;
  top: -150px;
  right: -150px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    transparent 0 90px,
    rgba(233, 137, 80, 0.1) 90px 97px,
    transparent 97px 115px,
    rgba(233, 137, 80, 0.16) 115px 127px,
    transparent 127px 145px,
    rgba(233, 137, 80, 0.22) 145px 162px,
    transparent 162px
  );
  pointer-events: none;
}

.compound-eq {
  position: relative;
  font-family: var(--sans);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

#eq-exp .digit,
#eq-result .digit,
#eq-day .digit {
  display: inline-block;
  width: 0.62em;
  text-align: center;
}

.compound-eq .eq-base {
  display: block;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  color: rgba(240, 238, 225, 0.72);
  margin-bottom: 8px;
}

.compound-eq .pow {
  font-size: 0.55em;
  vertical-align: super;
}

.compound-eq .result {
  display: block;
  font-size: clamp(4.2rem, 11vw, 7.5rem);
  color: var(--orangish);
}

.compound-eq .times {
  font-size: 0.5em;
  margin-left: 4px;
  opacity: 0.8;
}

.compound-track {
  position: relative;
  height: 6px;
  margin-top: 32px;
  border-radius: 3px;
  background: rgba(240, 238, 225, 0.14);
  overflow: hidden;
}

.compound-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 3px;
  background: var(--orangish);
}

.compound-day {
  position: relative;
  margin-top: 12px;
  font-size: 0.88rem;
  font-weight: 500;
  color: rgba(240, 238, 225, 0.62);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .hero-grid,
  .pricing-grid,
  .cta-row {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .hero-copy {
    order: 0;
  }

  .hero h1 {
    max-width: none;
  }

  .hero-visual {
    order: 1;
  }

  /* Phones and tablets: the cards keep their fan, and taps play; the cue isn't needed where
     the cards already show below the fold */
  .hero-more-row {
    display: none;
  }

  .hero {
    padding-bottom: 64px;
  }

  /* Narrow screens: the side cards tuck in closer so less of them falls off the edge */
  .fan-card[data-pos="left"] {
    transform: translate(-32%, 6%) rotate(-7deg) scale(0.9);
  }

  .fan-card[data-pos="right"] {
    transform: translate(32%, 6%) rotate(7deg) scale(0.9);
  }

  .cta-row {
    grid-template-areas:
      "tagline"
      "figure"
      "action";
    align-items: start;
  }
}

@media (max-width: 640px) {
  .plan-table {
    grid-template-columns: 1fr;
  }

  .plan-spacer {
    display: none;
  }

  .section {
    padding: 84px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-copy > *,
  .hero-visual,
  .hero-rule,
  .hero-more {
    animation: none;
  }

  .fan-card,
  .fan-card > .episode-card {
    transition: none;
  }
}

@media (max-height: 640px) {
  .hero-more-row {
    display: none;
  }
}