/* Homepage sections. Tokens come from site.css. */
.hero { position: relative; padding: clamp(48px, 8vw, 112px) 0 40px; text-align: center; }
.hero .display { max-width: 15ch; margin: 0 auto; }
.hero .lede { margin: 28px auto 0; }
.hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }

/* The object cluster: the reel in a phone, its readout and its stamp floating around it. */
.stage { position: relative; height: clamp(520px, 62vw, 760px); margin-top: 56px; perspective: 1200px; }
.phone {
  position: absolute; left: 50%; top: 0; width: clamp(240px, 26vw, 340px); aspect-ratio: 9 / 16;
  transform: translateX(-50%); border-radius: 40px; padding: 10px; background: var(--card); box-shadow: var(--shadow-high);
  transition: transform 0.6s var(--ease);
}
.phone video { width: 100%; height: 100%; object-fit: cover; border-radius: 30px; }
.float-a { position: absolute; right: calc(50% + clamp(140px, 15vw, 200px)); top: 22%; width: max-content; text-align: left; animation: bob 6s ease-in-out infinite; }
.float-b { position: absolute; left: calc(50% + clamp(150px, 16vw, 210px)); top: 50%; animation: bob 7s ease-in-out infinite reverse; }
@keyframes bob { 50% { transform: translateY(-14px); } }

/* Episodes rail: tall poster cards, scrolled sideways, a slight curve from perspective. */
.episodes { padding: 160px 0 40px; }
.episodes-head { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: end; }
.rail {
  display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 56px var(--margin) 72px; scrollbar-width: none; perspective: 1400px;
}
.rail::-webkit-scrollbar { display: none; }
.poster {
  flex: 0 0 clamp(250px, 24vw, 320px); aspect-ratio: 3 / 4.2; scroll-snap-align: center;
  border-radius: var(--r-l); background: var(--card); box-shadow: var(--shadow-mid);
  display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: 24px;
  text-decoration: none; position: relative; overflow: hidden;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.poster:hover { transform: translateY(-8px) rotateY(-4deg); box-shadow: var(--shadow-high); }
.poster.live img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.poster.live .poster-meta { position: relative; background: var(--card); border-radius: var(--r-m); padding: 16px 18px 18px; }
.poster.soon { background: linear-gradient(160deg, #ffffff, #ecebfb); }
.poster.soon .h3 { color: var(--ink-2); }
/* Poster art for episodes not out yet: the episode number, huge and pale. */
.poster .num { position: absolute; left: 18px; top: 10px; font: 700 clamp(96px, 10vw, 140px)/1 var(--f-mono); letter-spacing: -0.06em; color: #e3e3f6; }
.small-stamp { position: absolute; right: 16px; top: -38px; font-size: 22px; padding: 2px 10px 4px; border-width: 4px; border-radius: 8px; }

/* Calculator. */
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; padding: 96px 0 160px; }
.calc-box { padding: 32px; display: grid; gap: 22px; }
.calc-box label { display: grid; gap: 8px; font: 700 13px/1 var(--f-mono); letter-spacing: 0.03em; color: var(--muted); }
.calc-box label span { display: flex; align-items: center; gap: 10px; font: 500 18px/1 var(--f-body); color: var(--ink); }
.calc-box input[type="number"] { width: 130px; padding: 12px 16px; border: 0; border-radius: 999px; background: var(--ground); font: 700 18px/1 var(--f-body); color: var(--ink); }
.calc-box input[type="range"] { flex: 1; accent-color: var(--blue); }
.calc-box output { font: 700 18px/1 var(--f-mono); min-width: 52px; }
.calc-out { padding: 22px 24px; border-radius: var(--r-m); background: var(--ground); }
.calc-out b { display: block; margin: 8px 0 4px; font: 700 clamp(44px, 5vw, 64px)/1 var(--f-mono); letter-spacing: -0.05em; color: var(--blue); }

/* Method: rules left, reel frames right. */
.method { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 6vw, 96px); align-items: center; padding: 40px 0 160px; }
.rules { list-style: none; counter-reset: r; display: grid; gap: 22px; margin-top: 40px; }
.rules li { font-size: 19px; color: var(--ink-2); }
.rules b { color: var(--ink); }
.frames { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.frames img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--r-m); box-shadow: var(--shadow-mid); }
.frames img:nth-child(2) { transform: translateY(40px); }

/* Packs. */
.packs { padding: 40px 0 120px; }
.packs .lede { margin-top: 20px; }
.pack-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 56px; }
.pack { padding: 36px; display: flex; flex-direction: column; gap: 16px; }
.pack ul { list-style: none; display: grid; gap: 10px; color: var(--ink-2); }
.pack li::before { content: "✓"; color: var(--blue); font-weight: 700; margin-right: 10px; }
.pack .price { font: 700 15px/1 var(--f-mono); color: var(--muted); margin-top: auto; }
.pack .btn { align-self: flex-start; }

@media (max-width: 900px) {
  .episodes-head, .calc, .method, .pack-row { grid-template-columns: 1fr; }
  .stage { height: 560px; }
  .float-a { display: none; } /* the phone already shows the readout */
  .float-b { left: auto; right: 0; top: 74%; }
  .frames img:nth-child(2) { transform: none; }
}
@media (max-width: 640px) {
  .hero .lede { font-size: 17px; }
  .float-a .readout b, .readout b { font-size: 52px; }
  .episodes { padding: 96px 0 0; }
  .calc { padding: 72px 0 96px; }
  .method { padding: 0 0 96px; }
  .packs { padding: 0 0 72px; }
  .rail { padding-bottom: 40px; }
}