/* Buy buttons (#pricing) scroll smoothly to the pricing table */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ==========================================
   RocketToons special page
   Component styles that Tailwind utilities can't express cleanly.
   Sizes in px follow the 1920px Figma frame.
   ========================================== */

/* ============ SHOWCASE VIDEOS (js/videos.js) ============ */

/* Muted loops and click-to-play films fill their slot like the pictures they replace.
   Each slot's own class sets the size and position. */
.rt-loop { display: block; object-fit: cover; }
.rt-play, .rt-play button { cursor: pointer; }



/* ============ BUTTONS (Figma "Button states — default & hover") ============
   Hover: lifts 4px, brighter gradient, stronger glow, the arrow circle slides right
   (gap +4px header / +8px CTA). 200ms ease-out. The hover gradient is a ::before layer
   that fades in, because gradients themselves don't animate. */
.btn-buy,
.btn-cta {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, gap 0.2s ease-out;
}
.btn-buy::before,
.btn-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.2s ease-out;
}
.btn-buy__arrow,
.btn-cta__arrow {
  display: grid;
  flex: none;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  transition: background-color 0.2s ease-out;
}

/* Header "Buy Now": gold like the main CTA, extra-bold dark text, dark arrow circle (40px on desktop) */
.btn-buy {
  gap: 10px;
  padding: 5px 5px 5px 16px;
  border: 0.93px solid rgba(255, 243, 196, 0.9);
  background: linear-gradient(180deg, #ffe08a 0%, #ffc94d 55%, #f5a623 100%);
  box-shadow: 0 9.92px 24.8px rgba(15, 31, 115, 0.45), inset 0 1.24px 1.24px rgba(255, 255, 255, 0.55);
  color: #141826;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.btn-buy::before { background: linear-gradient(180deg, #fff0b8 0%, #ffd666 50%, #ffae1f 100%); }
.btn-buy .btn-buy__arrow { background: #141826; }
.btn-buy__arrow { width: 30px; height: 30px; }
.btn-buy__arrow img { width: 13px; height: 13px; }
@media (min-width: 640px) {
  .btn-buy { gap: 12px; padding: 6px 6px 6px 22px; font-size: 16px; }
  .btn-buy__arrow { width: 34px; height: 34px; }
  .btn-buy__arrow img { width: 14px; height: 14px; }
}
@media (min-width: 1024px) {
  .btn-buy { gap: 14px; padding: 8px 8px 8px 28px; font-size: 18px; }
  .btn-buy__arrow { width: 40px; height: 40px; }
  .btn-buy__arrow img { width: 16px; height: 16px; }
}

/* Main CTA "Get Instant Access": blue by default; .btn-cta--gold for the hero */
.btn-cta {
  gap: 12px;
  padding: 8px 8px 8px 20px;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  background: linear-gradient(180deg, #2994ff, #1a1fd9);
  box-shadow: 0 16px 40px rgba(13, 64, 242, 0.45), inset 0 2px 2px rgba(255, 255, 255, 0.45);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.btn-cta::before { background: linear-gradient(180deg, #5fb0ff, #2a3cff); }
.btn-cta__arrow { width: 44px; height: 44px; }
.btn-cta__arrow img { width: 20px; height: 20px; }
@media (min-width: 640px) {
  .btn-cta { gap: 18px; padding: 12px 12px 12px 44px; }
  .btn-cta__arrow { width: 60px; height: 60px; }
  .btn-cta__arrow img { width: 26px; height: 26px; }
}
.btn-cta--gold {
  border-color: rgba(255, 243, 196, 0.9);
  background: linear-gradient(180deg, #ffe08a 0%, #ffc94d 55%, #f5a623 100%);
  box-shadow: 0 16px 36px rgba(15, 31, 115, 0.45), inset 0 2px 2px rgba(255, 255, 255, 0.55);
  color: #141826;
  font-weight: 700;
}
.btn-cta--gold::before { background: linear-gradient(180deg, #fff0b8 0%, #ffd666 50%, #ffae1f 100%); }
.btn-cta--gold .btn-cta__arrow { background: #141826; }

@media (hover: hover) {
  .btn-buy:hover,
  .btn-cta:hover { transform: translateY(-4px); }
  .btn-buy:hover::before,
  .btn-cta:hover::before { opacity: 1; }
  .btn-buy:hover {
    gap: 14px;
    box-shadow: 0 12px 26px rgba(15, 31, 115, 0.35), 0 10px 30px rgba(255, 178, 31, 0.55), inset 0 2px 2px rgba(255, 255, 255, 0.7);
  }
  .btn-buy:hover .btn-buy__arrow { background: #0b1a6b; }
  .btn-cta:hover {
    gap: 20px;
    box-shadow: 0 22px 44px rgba(61, 123, 255, 0.6), inset 0 2px 2px rgba(255, 255, 255, 0.55);
  }
  .btn-cta--gold:hover {
    box-shadow: 0 22px 40px rgba(15, 31, 115, 0.35), 0 18px 44px rgba(255, 178, 31, 0.55), inset 0 2px 2px rgba(255, 255, 255, 0.7);
  }
  .btn-cta--gold:hover .btn-cta__arrow { background: #0b1a6b; }
}
@media (hover: hover) and (min-width: 640px) {
  .btn-buy:hover { gap: 16px; }
  .btn-cta:hover { gap: 26px; }
}
@media (hover: hover) and (min-width: 1024px) {
  .btn-buy:hover { gap: 18px; }
}
.btn-buy:focus-visible,
.btn-cta:focus-visible { outline: 3px solid #ffd666; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .btn-buy, .btn-cta, .btn-buy::before, .btn-cta::before { transition: none; }
  .btn-buy:hover, .btn-cta:hover { transform: none; }
}


/* ============ HERO ============ */

/* Sky: Figma's gradient runs over 2292px, the hero clips it at 1980px,
   so the last stop is where that gradient sits at the hero's bottom edge. */
/* Night-to-day sky, matching the pre-launch page hero */
.hero-sky {
  background-color: #ffffff;
  background-image: linear-gradient(180deg, #040428 0%, #0a0852 10%, #121ea0 22%, #0b50e1 38%, #3a8cff 58%, #a6cbff 80%, #d8f2ff 100%);
}

/* Jellyfish drifting in the night sky (pre-launch page sizes, scaled to the screen width) */
.hero-jelly { max-width: none; height: auto; animation: hero-bob 7s ease-in-out infinite; }
.hero-jelly--left  { left: 10.73vw; top: 16.35vw; width: 7.53vw; }
.hero-jelly--right { left: 85.16vw; top: 21.88vw; width: 5.16vw; animation-duration: 8.5s; animation-delay: -3s; }
@media (max-width: 1023.98px) {
  .hero-jelly--left  { left: 3vw; top: 84px; width: 52px; }
  .hero-jelly--right { left: auto; right: 5vw; top: 120px; width: 36px; }
}
@keyframes hero-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
@media (prefers-reduced-motion: reduce) { .hero-jelly { animation: none; } }

/* Carousel cards behind the video. Built in HTML/CSS (not an image) so the
   pictures can become looping videos and the rows an infinite carousel.

   The stage is the Figma "Mask group": 1762x875, placed relative to the
   950x543 video card. Everything inside is sized in cqw of the stage, so the
   whole cluster scales with the video card. 1cqw = 17.62px at full size. */
.hero-cards {
  position: absolute;
  left: -42.74%;
  top: -33.52%;
  width: 185.47%;
  height: 161.14%;
  container-type: inline-size;
  /* Ellipse 1: solid to 80.4% of its radius, fading out at the edge */
  -webkit-mask-image: radial-gradient(44.55% 44.55% at 50% 50%, #000 80.4%, transparent 100%);
          mask-image: radial-gradient(44.55% 44.55% at 50% 50%, #000 80.4%, transparent 100%);
}

/* Two rows run the full width of the stage, behind the video; the mask fades
   their ends. Rows sit at Figma's card tops (695 / 870 minus the stage's 408). */
.hero-cards__row {
  position: absolute;
  left: 0;
  width: 100%;
}
.hero-cards__row--1 { top: 32.8%; }
.hero-cards__row--2 { top: 52.8%; }

/* Infinite carousel: the track holds its set of cards twice (the copy is added
   by script), so sliding it by exactly half loops without a jump. Each card
   carries its own right margin instead of a flex gap so the halves match. */
.hero-cards__track {
  display: flex;
  width: max-content;
  animation: marquee 70s linear infinite;
}
/* Same direction, slower, so the rows drift past each other */
.hero-cards__row--2 .hero-cards__track {
  animation-duration: 105s;
  animation-delay: -30s;
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}

.hero-card {
  flex: none;
  width: 8.967cqw;             /* 158px */
  aspect-ratio: 1;
  margin-right: 1.249cqw;      /* 22px gap */
  padding: 0.434cqw;           /* 7.65px */
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  border-radius: 1.703cqw;     /* 30px */
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 0.795cqw 1.703cqw rgba(10, 51, 153, 0.22); /* 0 14px 30px */
}

/* Holds an <img> today, a <video> later */
.hero-card > img,
.hero-card > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1.362cqw;     /* 24px */
}

/* Clouds drift sideways, paper planes bob along their trails */
.hero-drift {
  animation: hero-drift 14s ease-in-out infinite alternate;
}
.hero-drift--slow {
  animation-duration: 18s;
  animation-delay: -6s;
}
.hero-float {
  animation: hero-float 6s ease-in-out infinite;
}
.hero-float--late {
  animation-delay: -3s;
}

@keyframes hero-drift {
  from { transform: translateX(-28px); }
  to   { transform: translateX(28px); }
}
@keyframes hero-float {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(6px, -12px) rotate(-2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-cards__track,
  .hero-drift,
  .hero-float { animation: none; }
}


/* ============ GALLERY ============ */

/* Three rows of toon cards sliding behind the wordmark. Card widths come from
   Figma's 300px-tall tiles (240 / 300 / 420 / 520), kept as ratios of the row
   height so the grid scales down on smaller screens. */
.gallery {
  --toon-h: 150px;
  --toon-gap: 10px;
  --toon-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: var(--toon-gap);
}
@media (min-width: 768px) {
  .gallery { --toon-h: 220px; --toon-gap: 14px; --toon-radius: 16px; }
}
@media (min-width: 1024px) {
  .gallery { --toon-h: 300px; --toon-gap: 16px; --toon-radius: 20px; }
}

/* Same loop as the hero cards: the script appends a copy, the track slides by half */
.gallery__track {
  display: flex;
  width: max-content;
  animation: marquee 110s linear infinite;
}
/* Rows alternate: 1 and 3 slide left, 2 slides right */
.gallery__track--2 { animation-duration: 140s; animation-delay: -40s; animation-direction: reverse; }
.gallery__track--3 { animation-duration: 125s; animation-delay: -80s; }

.toon {
  flex: none;
  height: var(--toon-h);
  margin-right: var(--toon-gap);
  overflow: hidden;
  border-radius: var(--toon-radius);
}
.toon--portrait  { width: calc(var(--toon-h) * 0.8); }    /* 240 */
.toon--square    { width: var(--toon-h); }                 /* 300 */
.toon--landscape { width: calc(var(--toon-h) * 1.4); }    /* 420 */
.toon--wide      { width: calc(var(--toon-h) * 1.7333); } /* 520 */

/* Holds an <img> today, a <video> later */
.toon > img,
.toon > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* "Overlay / center radial": 1500x760 over the 1920x932 grid, darkest in the middle */
.gallery__glow {
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.65) 45%, transparent 100%);
}

@media (prefers-reduced-motion: reduce) {
  .gallery__track { animation: none; }
}


/* ============ WHY ROCKETTOONS (Figma "05b Studio — a whole animation studio (3×3)", 1920 x 2182) ============
   Nine dark tiles on black, between the gallery and how it works. --sf is one pixel of the
   1920px Figma frame (max 1px). */
.studio {
  --sf: min(1px, 100cqw / 1920);
  position: relative;
  container-type: inline-size;
  padding: max(72px, calc(110 * var(--sf))) 0 max(80px, calc(110 * var(--sf)));
  background: #000;
  color: #fff;
}

/* Heading: two-line title (the second line handwritten), one line under it */
.studio__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 16px;
  text-align: center;
}
.studio__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  color: #fff;
}
.studio__title-a {
  font-size: max(34px, calc(72 * var(--sf)));
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.04em;
}
.studio__title-b {
  margin-top: -0.125em;
  font-family: var(--font-script);
  font-size: max(42px, calc(80 * var(--sf)));
  font-weight: 400;
  line-height: 1.24;
}
.studio__sub {
  max-width: 42em;
  margin: max(6px, calc(9 * var(--sf))) 0 0;
  font-size: max(16px, calc(20 * var(--sf)));
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.6);
}

/* Grid (Figma "05b Studio (3×3)"): one column on phones, two on tablets, three 464 x 460
   tiles with a 24px gap on desktop (1440px wide at 1920). */
.studio__grid {
  display: grid;
  gap: 16px;
  max-width: 520px;
  margin: 40px auto 0;
  padding: 0 16px;
}
@media (min-width: 760px) {
  .studio__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 1000px;
    padding: 0 24px;
  }
}
@media (min-width: 1100px) {
  .studio__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1504px;
    margin-top: max(48px, calc(67 * var(--sf)));
    padding: 0 32px;
  }
}

/* ---- Tile: dark card, title and text on top, the picture at the bottom.
   The picture (.st__art) is the Figma tile from just under the text down: the accent glow
   and the visual on the tile's own gradient, --sh Figma px tall of the 462 inner width.
   The tile reserves that height at the bottom, so longer text pushes the tile taller
   instead of running into the picture. Sizes in cqw are Figma px / 462 (inner width). ---- */
.st {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  container-type: inline-size;
  aspect-ratio: 464 / 460;
  padding-bottom: calc(var(--sh) / 462 * (100% - 2px));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 32px;
  background: linear-gradient(180deg, #17191f, #0f1014);
  color: #fff;
}
.st__title,
.st__text { position: relative; z-index: 1; padding: 0 6.71cqw; }
.st__title {
  margin: 0;
  padding-top: 7.14cqw;
  font-size: clamp(21px, 6.494cqw, 30px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.st__text {
  margin: max(8px, 2.165cqw) 0 0;
  font-size: clamp(14px, 3.463cqw, 16px);
  line-height: 1.4;
  color: #a3a9b6;
}
.st__art {
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  pointer-events: none;
  /* soft top edge, so the cut never shows against the tile's gradient */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%);
          mask-image: linear-gradient(180deg, transparent 0, #000 9%);
}


/* ============ HOW IT WORKS ============ */

/* Light sheet with rounded corners laid over the black page */
.steps-sheet {
  background: #f4f4f6;
  border-radius: 32px;
}

/* Frosted chips on the step cards ("Step 01", "Play") */
.glass-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.2px solid rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18), inset 0 -14px 34px rgba(255, 255, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  color: #fff;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.step-chip { height: 44px; padding: 0 22px 0 20px; font-size: 15px; letter-spacing: -0.005em; }
.play-chip { height: 52px; padding: 0 22px 0 18px; font-size: 17px; letter-spacing: -0.005em; cursor: pointer; }
.play-chip img { width: 20px; height: 20px; }

/* Phones and tablets ("07 Steps — mobile"): the art fills the card; chips, number,
   the mockup, then title and text stack on top of it over a bottom scrim. */
.step {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 16px 20px 28px;
  border-radius: 28px;
  background: #000;
  color: #fff;
  box-shadow: 0 36px 80px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.06);
}
.step__body { display: contents; }
.step__chips,
.step__num,
.step__text { position: relative; z-index: 2; }
.step__chips { order: 1; display: flex; align-items: center; gap: 8px; height: 52px; }
.step__num {
  order: 2;
  margin: 6px 0 0 -3px;
  font-family: var(--font-serif);
  font-size: 96px;
  line-height: 1;
  letter-spacing: -0.04em;
}
.step__stage { order: 3; }
.step__text { order: 4; display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
.step__title {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.step__desc {
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.003em;
  color: rgba(255, 255, 255, 0.86);
}

/* Background layers, placed on the card */
.step__bg {
  position: absolute;
  left: -112.14%;                  /* -392.5 / 350 */
  top: -20px;
  width: 419.8%;                   /* 1469.3 / 350 */
  max-width: none;
  height: auto;
}
.step__dim   { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.25); }
.step__scrim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: 263px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0.75) 100%);
}
.step--2 .step__scrim { height: 296px; }
.step--3 .step__scrim { height: 239px; }

/* ---- Stage: holds the mockup. --px is one desktop-Figma pixel; on phones the
   stage is just the mockup box (Figma scales it to 48.4%: 640 units = 310px). ---- */
.step__stage {
  position: relative;
  margin-top: 12px;
  container-type: inline-size;
}
.step--1 .step__stage { aspect-ratio: 640 / 224; }
.step--2 .step__stage { aspect-ratio: 640 / 470; }
.step--3 .step__stage { aspect-ratio: 640 / 560; }
.step__stage * { --px: calc(100cqw / 640); }

/* Frosted glass used by the mockups */
.glass-panel {
  position: absolute;
  border: 1.2px solid rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.22), inset 0 -12px 30px rgba(255, 255, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  color: #fff;
}

/* ---- Step 01: prompt composer ---- */
.composer {
  left: 0;
  top: 0;
  width: calc(640 * var(--px));
  height: calc(224 * var(--px));
  border-radius: calc(34 * var(--px));
}
.composer__prompt {
  position: absolute;
  left: calc(34.8 * var(--px));
  top: calc(32.8 * var(--px));
  width: calc(568 * var(--px));
  font-size: calc(28 * var(--px));
  font-weight: 500;
  line-height: 1.36;
  letter-spacing: -0.02em;
}
.composer__caret {
  display: inline-block;
  width: max(1.5px, calc(2 * var(--px)));
  height: 1.1em;
  margin-left: 1px;
  vertical-align: -0.15em;
  background: rgba(255, 255, 255, 0.7);
  animation: caret-blink 1s steps(1) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }
.composer__caret.is-typing { animation: none; } /* solid while typing, blinks when idle */
.composer__meta {
  position: absolute;
  left: calc(34.8 * var(--px));
  top: calc(168.8 * var(--px));
  font-size: calc(15 * var(--px));
  font-weight: 500;
  line-height: 1;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
}
.composer__create {
  position: absolute;
  left: calc(493.8 * var(--px));
  top: calc(150.8 * var(--px));
  display: flex;
  align-items: center;
  gap: calc(8 * var(--px));
  height: calc(48 * var(--px));
  padding: 0 calc(18 * var(--px)) 0 calc(22 * var(--px));
  border-radius: 999px;
  background: #fff;
  color: #0a0a0a;
  font-size: calc(16 * var(--px));
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.composer__create img { width: calc(16 * var(--px)); height: calc(16 * var(--px)); }

/* ---- Step 02: storyboard picker ---- */
.storyboard {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(640 * var(--px));
  height: calc(470 * var(--px));
}
/* Every card is the selected scene's size (260x350 at x 190) and reaches its
   slot with translate + scale: all slots share the same centre line, so moving
   between them is a pure transform. Values from Figma:
   far 170x230 at x -65 / 535, near 215x290 at x 38 / 388. */
.scene {
  position: absolute;
  left: calc(190 * var(--px));
  top: 0;
  width: calc(260 * var(--px));
  height: calc(350 * var(--px));
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: calc(26 * var(--px));
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.25);
  transition: box-shadow 0.8s ease;
  will-change: transform, opacity;
}
.scene img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The selected scene's 4px white frame, faded in and out */
.scene__ring {
  position: absolute;
  inset: 0;
  border: calc(4 * var(--px)) solid #fff;
  border-radius: inherit;
  opacity: 0;
}

/* Starting slots (the script takes over from these) */
.scene[data-slot="-3"] { transform: translateX(-161.5%) scale(0.5);   opacity: 0;   z-index: 1; }
.scene[data-slot="-2"] { transform: translateX(-115.4%) scale(0.654); opacity: 0.3; z-index: 2; }
.scene[data-slot="-1"] { transform: translateX(-67.3%)  scale(0.827); opacity: 0.6; z-index: 3; }
.scene[data-slot="0"]  { opacity: 1; z-index: 4; box-shadow: 0 24px 56px rgba(0, 0, 0, 0.35); }
.scene[data-slot="0"] .scene__ring { opacity: 1; }
.scene[data-slot="1"]  { transform: translateX(67.3%)   scale(0.827); opacity: 0.6; z-index: 3; }
.scene[data-slot="2"]  { transform: translateX(115.4%)  scale(0.654); opacity: 0.3; z-index: 2; }
.scene[data-slot="3"]  { transform: translateX(161.5%)  scale(0.5);   opacity: 0;   z-index: 1; }

.storyboard__approve {
  z-index: 5;
  left: calc(208 * var(--px));
  top: calc(390 * var(--px));
  display: flex;
  align-items: center;
  gap: calc(8 * var(--px));
  height: calc(52 * var(--px));
  padding: 0 calc(20 * var(--px)) 0 calc(22 * var(--px));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(9px);
          backdrop-filter: blur(9px);
  font-size: calc(16 * var(--px));
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.storyboard__approve img { width: calc(16 * var(--px)); height: calc(16 * var(--px)); }

/* ---- Step 03: export panel ("Export — v2", 640x560) ---- */
.export {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(640 * var(--px));
  height: calc(560 * var(--px));
}
.export__stack {
  position: absolute;
  max-width: none;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: calc(22 * var(--px));
}
.export__stack--1 { left: calc(141.3 * var(--px)); top: calc(-20.6 * var(--px)); width: calc(397.4 * var(--px)); height: calc(180.6 * var(--px)); opacity: 0.25; }
.export__stack--2 { left: calc(105.2 * var(--px)); top: calc(1.1 * var(--px));   width: calc(469.7 * var(--px)); height: calc(216.8 * var(--px)); opacity: 0.45; }
.export__player {
  position: absolute;
  left: calc(60 * var(--px));
  top: calc(30 * var(--px));
  width: calc(560 * var(--px));
  height: calc(316 * var(--px));
  overflow: hidden;
  isolation: isolate;              /* keep its play icon and progress bar under the export card */
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-radius: calc(24 * var(--px));
  box-shadow: 0 calc(30 * var(--px)) calc(60 * var(--px)) calc(-10 * var(--px)) rgba(0, 0, 0, 0.5);
}
.export__player > img:first-child,
.export__player > video:first-child { width: 100%; height: 100%; object-fit: cover; }
.export__player::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.55) 100%);
}
.export__play {
  position: absolute;
  z-index: 1;
  left: calc(244.5 * var(--px));
  top: calc(122.5 * var(--px));
  width: calc(68 * var(--px));
  height: calc(68 * var(--px));
}
.export__time {
  position: absolute;
  z-index: 1;
  left: calc(512.5 * var(--px));
  top: calc(279.5 * var(--px));
  font-size: calc(13 * var(--px));
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}
.export__progress {
  position: absolute;
  z-index: 1;
  left: calc(18.5 * var(--px));
  top: calc(287.5 * var(--px));
  width: calc(480 * var(--px));
  height: calc(3 * var(--px));
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.9);
}
/* Small frosted cards: the "Episode ready" card and the three platform chips */
.export__card,
.export__chip {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  box-shadow: 0 calc(16 * var(--px)) calc(18 * var(--px)) rgba(0, 0, 0, 0.25);
  color: #fff;
  white-space: nowrap;
}
.export__card {
  left: 0;
  top: calc(286 * var(--px));
  width: calc(330 * var(--px));
  height: calc(196 * var(--px));
  border-radius: calc(26 * var(--px));
}
.export__check { position: absolute; left: calc(23 * var(--px)); top: calc(23 * var(--px)); width: calc(34 * var(--px)); height: calc(34 * var(--px)); }
.export__card b { position: absolute; left: calc(69 * var(--px)); top: calc(23 * var(--px)); font-size: calc(19 * var(--px)); font-weight: 700; line-height: 1.2; }
.export__card small { position: absolute; left: calc(69 * var(--px)); top: calc(47 * var(--px)); font-size: calc(13 * var(--px)); line-height: 1.2; color: rgba(255, 255, 255, 0.6); }
.export__bar { position: absolute; left: calc(23 * var(--px)); top: calc(87 * var(--px)); width: calc(282 * var(--px)); height: calc(6 * var(--px)); border-radius: 3px; background: rgba(255, 255, 255, 0.85); }
.export__btn {
  position: absolute;
  top: calc(121 * var(--px));
  display: flex;
  align-items: center;
  gap: calc(8 * var(--px));
  height: calc(48 * var(--px));
  padding-left: calc(22 * var(--px));
  border-radius: 999px;
  font-size: calc(15 * var(--px));
  font-weight: 700;
  line-height: 1;
}
.export__btn img { width: calc(18 * var(--px)); height: calc(18 * var(--px)); }
.export__btn--download { left: calc(23 * var(--px)); width: calc(150 * var(--px)); padding-left: calc(24 * var(--px)); background: #fff; color: #121014; }
.export__btn--publish  { left: calc(181 * var(--px)); width: calc(124 * var(--px)); padding-left: calc(20 * var(--px)); border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.12); }
.export__chip {
  width: calc(200 * var(--px));
  height: calc(58 * var(--px));
  border-radius: calc(20 * var(--px));
}
.export__chip--yt { left: calc(440 * var(--px)); top: calc(10 * var(--px)); }
.export__chip--tt { left: calc(470 * var(--px)); top: calc(102 * var(--px)); }
.export__chip--ig { left: calc(440 * var(--px)); top: calc(194 * var(--px)); }
.export__chip img { position: absolute; left: calc(13 * var(--px)); top: calc(13 * var(--px)); width: calc(30 * var(--px)); height: calc(30 * var(--px)); }
.export__chip b { position: absolute; left: calc(55 * var(--px)); top: calc(10 * var(--px)); font-size: calc(15 * var(--px)); font-weight: 700; line-height: 1.2; }
.export__chip small { position: absolute; left: calc(55 * var(--px)); top: calc(30 * var(--px)); font-size: calc(12 * var(--px)); font-weight: 600; line-height: 1.2; color: rgba(255, 255, 255, 0.6); }

/* Desktop: Figma's 1440x680 card. Text is sized in cqw of the column
   (1cqw = 14.4px at full size); the stage covers the right 740px and its
   background, dim and scrim spill left under the text. */
@media (min-width: 1024px) {
  .steps-sheet { border-radius: 64px; }

  .steps-wrap { container-type: inline-size; gap: 2.778cqw; } /* 40px */

  .step {
    display: block;
    aspect-ratio: 1440 / 680;
    padding: 0;
    border-radius: 5cqw;                 /* 72px */
  }
  .step__chips,
  .step__num,
  .step__text { z-index: auto; }

  /* Background, dim and left scrim in card terms (bg 1670x932 at -225, -44) */
  .step__bg {
    left: -15.625%;
    top: -6.471%;
    width: 115.972%;
    height: 137.059%;
    object-fit: cover;
  }
  .step__dim { background: rgba(0, 0, 0, 0.18); }
  .step .step__scrim {
    left: 0;
    top: 0;
    bottom: auto;
    z-index: auto;
    width: 62.5%;                        /* 900 / 1440 */
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0));
  }
  .step--1 .step__scrim { background: linear-gradient(90deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.25) 60%, rgba(0, 0, 0, 0) 100%); }

  /* Stage: the right 740px of the card, mockups at their Figma spots */
  .step .step__stage {
    position: absolute;
    top: 0;
    right: 0;
    width: 51.389%;                      /* 740 / 1440 */
    height: 100%;
    margin: 0;
    aspect-ratio: auto;
  }
  .step__stage * { --px: calc(100cqw / 740); }
  .composer   { left: calc(40 * var(--px)); top: calc(228 * var(--px)); }
  .storyboard { left: calc(40 * var(--px)); top: calc(111 * var(--px)); }
  .export     { left: calc(40 * var(--px)); top: calc(110 * var(--px)); }

  .step__chips {
    position: absolute;
    left: 4.444cqw;                      /* 64 */
    top: 4.167cqw;                       /* 60 */
    height: auto;
    gap: 0.694cqw;                       /* 10 */
  }
  .step-chip { height: 3.056cqw; padding: 0 1.528cqw 0 1.389cqw; font-size: max(12px, 1.042cqw); }
  .play-chip { height: 3.611cqw; padding: 0 1.528cqw 0 1.25cqw; font-size: max(13px, 1.181cqw); gap: 0.556cqw; }
  .play-chip img { width: 1.389cqw; height: 1.389cqw; }

  .step__num {
    position: absolute;
    left: 4.028cqw;                      /* 58 */
    top: 8.889cqw;                       /* 128 */
    margin: 0;
    font-size: 12.5cqw;                  /* 180 */
  }

  /* Title + description sit 64px off the bottom, as every card does in Figma */
  .step__text {
    position: absolute;
    left: 4.444cqw;
    bottom: 4.444cqw;
    gap: 1.25cqw;                        /* 18 */
    margin: 0;
  }
  .step__title { max-width: 36.111cqw; font-size: 3.889cqw; }           /* 520 / 56px */
  .step__desc  { max-width: 31.944cqw; font-size: max(14px, 1.528cqw); } /* 460 / 22px */
}

@media (prefers-reduced-motion: reduce) {
  .composer__caret { animation: none; }
}


/* ============ WHY CARTOONS ============ */

/* ---- Intro. Desktop: a 1920px-wide stage (--px = one Figma pixel) with the four
   card clusters placed around the headline. Phones/tablets: Figma's 390px mobile frame,
   the headline then the four tiles stacked, each with its stat chip on a corner. ---- */
.why-intro { container-type: inline-size; max-width: 1920px; margin: 0 auto; }
.why-intro__inner {
  display: flex;
  flex-direction: column;
  padding: 64px 0 0;
}
.why-intro__copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}
.why-headline {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 700;
  line-height: 0.96;
  letter-spacing: -0.045em;
  white-space: nowrap;
}
.why-headline > span { margin-bottom: -0.107em; }
.why-headline__script {
  display: flex;
  align-items: center;
  gap: 0.114em;
  margin: 0;
  font-family: var(--font-script);
  font-size: 80px;
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: 0;
}
.why-headline__script img { width: 0.657em; height: 0.657em; rotate: 8deg; }

/* Phones/tablets: the tiles part of Figma's mobile frame (from y 425.7), drawn in --m,
   one px of that 390px frame (the stage is at most 480px wide). Inside a tile or a chip
   --c is one Figma px of the desktop tile, so their contents scale as Figma scaled them:
   portrait tiles 0.767, landscape tiles 0.789, chips 0.88. */
.why-clusters {
  --m: calc(min(100cqw, 480px) / 390);
  order: 2;
  position: relative;
  width: calc(390 * var(--m));
  height: calc(1306.13 * var(--m));
  margin: calc(54 * var(--m)) auto 0;
}
.why-cluster { display: contents; }
.why-cluster .why-card { --c: calc(0.7667 * var(--m)); width: calc(230 * var(--m)); height: calc(285.2 * var(--m)); }
.why-cluster--faith .why-card,
.why-cluster--growth .why-card { --c: calc(0.7895 * var(--m)); width: calc(300 * var(--m)); height: calc(205.26 * var(--m)); }
.why-cluster .why-stat { --c: calc(0.88 * var(--m)); }
.why-cluster--channels .why-card { left: calc(60 * var(--m));    top: calc(5.82 * var(--m));    rotate: 3deg; }
.why-cluster--channels .why-stat { left: calc(86.48 * var(--m)); top: calc(265.76 * var(--m)); }
.why-cluster--faith .why-card    { left: calc(65 * var(--m));    top: calc(363.92 * var(--m));  rotate: -3deg; }
.why-cluster--faith .why-stat    { left: calc(16 * var(--m));    top: calc(545.82 * var(--m)); }
.why-cluster--growth .why-card   { left: calc(25 * var(--m));    top: calc(643.98 * var(--m));  rotate: 3deg; }
.why-cluster--growth .why-stat   { left: calc(136.48 * var(--m)); top: calc(825.87 * var(--m)); }
.why-cluster--global .why-card   { left: calc(100 * var(--m));   top: calc(924.03 * var(--m));  rotate: -3deg; }
.why-cluster--global .why-stat   { left: calc(16 * var(--m));    top: calc(1183.97 * var(--m)); }

/* Tiles: a picture (later a video) with a genre tag and a play button */
.why-card {
  position: absolute;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: calc(22 * var(--c));
  background: #14141a;
  box-shadow: 0 calc(24 * var(--c)) calc(48 * var(--c)) calc(-6 * var(--c)) rgba(0, 0, 0, 0.55);
}
.why-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.45));
  pointer-events: none;
}
.why-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.why-card__tag,
.why-card__play,
.why-card__sub { position: absolute; z-index: 1; }
.why-card__tag {
  left: calc(13 * var(--c));
  top: calc(13 * var(--c));
  padding: calc(6 * var(--c)) calc(12 * var(--c));
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.38);
  -webkit-backdrop-filter: blur(7px);
          backdrop-filter: blur(7px);
  font-size: calc(13 * var(--c));
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.why-card__play {
  left: 50%;
  top: 50%;
  width: calc(52 * var(--c));
  height: calc(52 * var(--c));
  translate: -50% -50%;
}
/* Subtitle pills on the "Every language" tile */
.why-card__sub {
  left: calc(58 * var(--c));
  display: flex;
  align-items: center;
  gap: calc(8 * var(--c));
  padding: calc(6 * var(--c)) calc(12 * var(--c)) calc(6 * var(--c)) calc(6 * var(--c));
  border-radius: calc(10 * var(--c));
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  font-size: calc(14 * var(--c));
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.why-card__sub.is-dim { opacity: 0.75; }
.why-card__sub i {
  padding: calc(2 * var(--c)) calc(6 * var(--c));
  border-radius: calc(5 * var(--c));
  background: #fff;
  font-size: calc(11 * var(--c));
  font-style: normal;
  font-weight: 700;
  color: #120f14;
}

/* Stat chips: frosted white glass */
.why-stat {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: calc(12 * var(--c));
  padding: calc(10 * var(--c)) calc(20 * var(--c)) calc(10 * var(--c)) calc(10 * var(--c));
  border: 1.5px solid #fff;
  border-radius: calc(18 * var(--c));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(236, 238, 243, 0.92));
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  box-shadow:
    inset 0 calc(-4 * var(--c)) calc(12 * var(--c)) #c9ceda,
    inset 0 1.5px 0 #fff,
    0 calc(16 * var(--c)) calc(32 * var(--c)) calc(-6 * var(--c)) rgba(0, 0, 0, 0.45);
  color: #121014;
  white-space: nowrap;
}
.why-stat__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(34 * var(--c));
  height: calc(34 * var(--c));
  border-radius: 50%;
  background: rgba(18, 16, 20, 0.07);
}
.why-stat__icon img { width: calc(16 * var(--c)); height: calc(16 * var(--c)); }
.why-stat b {
  display: block;
  font-size: calc(16 * var(--c));
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.004em;
}
.why-stat small {
  display: block;
  margin-top: calc(4 * var(--c));
  font-size: calc(12 * var(--c));
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.001em;
  color: rgba(18, 16, 20, 0.55);
}

@media (min-width: 640px) {
  .why-headline__script { font-size: 90px; }
}
@media (min-width: 768px) {
  .why-headline__script { font-size: 110px; }
}

@media (min-width: 1024px) {
  .why-intro__inner {
    --px: calc(100cqw / 1920);
    position: relative;
    display: block;
    min-height: calc(1288 * var(--px));
    padding: calc(367 * var(--px)) 0 0;
  }
  .why-intro__copy { gap: calc(24 * var(--px)); }
  .why-headline__script { font-size: 120px; }

  .why-clusters { display: contents; }
  /* each cluster is its own container; --c is one Figma pixel of that cluster */
  .why-cluster {
    display: block;
    position: absolute;
    width: calc(var(--w) * var(--px));
    aspect-ratio: var(--w) / var(--h);
    container-type: inline-size;
  }
  .why-cluster > *,
  .why-cluster .why-card,
  .why-cluster .why-stat { --c: calc(100cqw / var(--w)); }
  .why-cluster .why-card { width: calc(300 * var(--c)); height: calc(372 * var(--c)); }
  .why-cluster--faith .why-card,
  .why-cluster--growth .why-card { width: calc(380 * var(--c)); height: calc(260 * var(--c)); }
  .why-cluster--channels .why-card { left: calc(9.53 * var(--c));   top: calc(7.6 * var(--c));    rotate: 3deg; }
  .why-cluster--channels .why-stat { left: calc(48.53 * var(--c));  top: calc(349.6 * var(--c)); }
  .why-cluster--faith .why-card    { left: calc(90 * var(--c));     top: calc(6.55 * var(--c));   rotate: -2deg; }
  .why-cluster--faith .why-stat    { left: 0;                       top: calc(236.55 * var(--c)); }
  .why-cluster--growth .why-card   { left: calc(4.42 * var(--c));   top: calc(6.55 * var(--c));   rotate: 2deg; }
  .why-cluster--growth .why-stat   { left: calc(178.42 * var(--c)); top: calc(236.55 * var(--c)); }
  .why-cluster--global .why-card   { left: calc(90 * var(--c));     top: calc(7.6 * var(--c));    rotate: -3deg; }
  .why-cluster--global .why-stat   { left: 0;                       top: calc(349.6 * var(--c)); }
  /* Cluster origins in the 1920px frame */
  .why-cluster--channels { left: calc(256 * var(--px));  top: calc(182 * var(--px)); }
  .why-cluster--faith    { left: calc(1260 * var(--px)); top: calc(236.45 * var(--px)); }
  .why-cluster--growth   { left: calc(268 * var(--px));  top: calc(835 * var(--px)); }
  .why-cluster--global   { left: calc(1290 * var(--px)); top: calc(792.4 * var(--px)); }
}
@media (min-width: 1280px) {
  .why-headline__script { font-size: 140px; }
}

/* ---- Cartoon wall behind 17.2B: six static rows; rows 2, 4, 6 start half a tile in ---- */
.why-wall {
  --tile-w: 100px;
  --tile-h: 63px;
  --tile-gap: 6px;
  position: relative;
  height: calc(6 * var(--tile-h) + 5 * var(--tile-gap));
  margin-top: 40px;
  overflow: hidden;
}
.why-wall__rows {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: var(--tile-gap);
}
.why-wall__track {
  display: flex;
  width: max-content;
}
.why-wall__track--2,
.why-wall__track--4,
.why-wall__track--6 { margin-left: calc(var(--tile-w) / -2); }
.why-tile {
  flex: none;
  width: var(--tile-w);
  height: var(--tile-h);
  margin-right: var(--tile-gap);
  border-radius: 12px;
  object-fit: cover;
  opacity: 0.8;
}
.why-wall__dim,
.why-wall__centre,
.why-wall__top,
.why-wall__bottom { position: absolute; left: 0; right: 0; pointer-events: none; }
.why-wall__dim    { inset: 0; background: rgba(0, 0, 0, 0.35); }
.why-wall__centre { inset: 0; background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.97) 0%, rgba(0, 0, 0, 0.85) 45%, rgba(0, 0, 0, 0.1) 100%); }
.why-wall__top    { top: 0; height: 25.6%; background: linear-gradient(180deg, #000, rgba(0, 0, 0, 0)); }
.why-wall__bottom { bottom: 0; height: 53.5%; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.82) 40%, #000 100%); }
.why-wall__copy {
  position: absolute;
  top: 14px;
  left: 16px;
  right: 16px;
  text-align: center;
}
.why-big {
  font-family: var(--font-script);
  font-size: 110px;
  line-height: 0.84;
  text-shadow: 0 0 60px rgba(255, 179, 107, 0.35);
}
@media (min-width: 640px) {
  .why-wall { --tile-w: 124px; --tile-h: 78px; --tile-gap: 7px; }
  .why-big { font-size: 160px; }
}
@media (min-width: 1024px) {
  .why-wall { --tile-w: 152px; --tile-h: 96px; --tile-gap: 8px; margin-top: 100px; }
  .why-wall__copy { top: 22px; }
  .why-big { font-size: 230px; margin-bottom: 10px; }
}

/* ---- Scale bars ---- */
.why-bars {
  --bar-h: 72px;
  --thumb: 60px;
  position: relative;
  z-index: 1;
  max-width: 1504px;
  margin: -150px auto 0;
  padding: 0 16px;
}
.why-bar {
  position: relative;
  flex: none;
  height: var(--bar-h);
  overflow: hidden;
  border-radius: 999px;
}
.why-bar--shark {
  border: 1.5px solid rgba(255, 179, 207, 0.9);
  background: #1a0a00;
  box-shadow: 0 16px 60px rgba(255, 106, 90, 0.45);
}
.why-bar--despacito,
.why-bar--people {
  border: 1.2px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.why-bar--despacito { width: 52.71%; } /* 759 / 1440: 9.1B against 17.2B */
.why-bar--people    { width: 48.26%; } /* 695 / 1440: 8.3B */
.why-bar__film {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: calc(var(--thumb) / 14);
  padding-left: calc(var(--thumb) / 14);
}
.why-bar__film img {
  flex: none;
  width: var(--thumb);
  height: var(--thumb);
  border-radius: calc(var(--thumb) * 0.16);
  object-fit: cover;
}
/* Despacito: four frames sitting toward the right end, faded under the label */
.why-bar__film--end {
  justify-content: flex-end;
  padding: 0 calc(var(--thumb) * 0.43) 0 0;
}
@media (max-width: 639px) {
  .why-bar__film--end img:nth-child(-n+3) { display: none; } /* phones: one frame, clear of the label */
}
.why-bar__fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #121214 0%, rgba(18, 18, 20, 0.85) 32%, rgba(18, 18, 20, 0.25) 55%, rgba(18, 18, 20, 0.1) 100%);
}
.why-bar__glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 61, 127, 0.96) 0%, rgba(255, 106, 90, 0.55) 34%, rgba(255, 154, 61, 0.18) 60%, rgba(42, 15, 0, 0.25) 82%, rgba(42, 15, 0, 0.7) 100%);
}
.why-bar__people {
  position: absolute;
  left: 0.3%;
  top: 13.3%;
  width: 98.85%;
  height: auto;
}
.why-bar__label {
  position: absolute;
  left: 20px;
  top: 50%;
  translate: 0 -50%;
  white-space: nowrap;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.why-bar__label b { display: block; font-size: 17px; font-weight: 600; line-height: 1; letter-spacing: -0.015em; }
.why-bar__label small { display: block; margin-top: 5px; font-size: 11px; font-weight: 500; line-height: 1; color: rgba(255, 255, 255, 0.55); }
.why-bar--shark .why-bar__label small { color: rgba(255, 255, 255, 0.85); }
.why-bar__value {
  font-family: var(--font-script);
  font-size: 44px;
  line-height: 0.88;
  white-space: nowrap;
}
.why-bar__value--in {
  position: absolute;
  right: 18px;
  top: 50%;
  translate: 0 -50%;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.why-bars__row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
}
.why-callout { margin-top: 28px; }
.why-callout__big {
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #ffd24a;
}
.why-callout__text {
  max-width: 360px;
  margin-top: 10px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.8);
}
.why-sources {
  margin-top: 28px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.32);
}
.why-closing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 72px 16px 32px;
  text-align: center;
}

@media (min-width: 640px) {
  .why-bars { --bar-h: 100px; --thumb: 86px; margin-top: -190px; padding: 0 32px; }
  .why-bar__label { left: 32px; }
  .why-bar__label b { font-size: 22px; }
  .why-bar__label small { margin-top: 7px; font-size: 14px; }
  .why-bar__value { font-size: 64px; }
  .why-bar__value--in { right: 24px; font-size: 72px; }
  .why-bars__row { gap: 24px; margin-top: 16px; }
}
@media (min-width: 1024px) {
  .why-bars { --bar-h: 128px; --thumb: 112px; margin-top: -232px; } /* bars start 392px into the 624px wall */
  .why-bar__label { left: 42.5px; }
  .why-bar__label b { font-size: 28px; }
  .why-bar__label small { margin-top: 8px; font-size: 16px; }
  .why-bar__value { font-size: 80px; }
  .why-bar__value--in { right: 28px; font-size: 96px; }
  .why-bars__row { gap: 32px; margin-top: 20px; }
  .why-callout {
    position: absolute;
    top: 160px;
    left: calc(32px + 75%);
    margin: 0;
    width: 360px;
  }
  .why-bars .why-callout { left: auto; right: 32px; }
  .why-callout__big { font-size: 64px; }
  .why-callout__text { font-size: 18px; }
  .why-sources { font-size: 12px; }
  .why-closing {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 125px 32px 32px;
  }
}



/* ============ GENRES ============ */

/* ---- Film strips: two tilted strips (Figma 2358 × 324, rotated 3.5° and -3°).
   --u is one Figma pixel: 1px at 1920 wide, never under 0.5px so frames stay
   readable on phones. Each unit is 442u (13 sprocket holes), so the hole
   pattern stays continuous when the track loops. ---- */
.genres {
  --u: clamp(0.5px, 100cqw / 1920, 1px);
  container-type: inline-size;
  padding-bottom: calc(80 * var(--u));
}
.genres-strips {
  position: relative;
  height: calc(830 * var(--u));
}
.film {
  position: absolute;
  left: calc(-300 * var(--u));
  right: calc(-300 * var(--u));
  height: calc(324 * var(--u));
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: calc(6 * var(--u));
  background: linear-gradient(180deg, #26262b 0%, #17171b 50%, #26262b 100%);
  box-shadow: 0 calc(30 * var(--u)) calc(60 * var(--u)) rgba(0, 0, 0, 0.6);
}
.film--a { top: calc(215 * var(--u)); translate: 0 -50%; rotate: 3.5deg; }
.film--b { top: calc(625 * var(--u)); translate: 0 -50%; rotate: -3deg; }

.film__track {
  display: flex;
  width: max-content;
  height: 100%;
  background: url("../images/film-sprockets.svg") 0 0 / calc(34 * var(--u)) 100% repeat-x;
  animation: marquee 80s linear infinite;
}
.film--b .film__track { animation-direction: reverse; }

.film__unit {
  position: relative;
  flex: none;
  width: calc(442 * var(--u));
  height: 100%;
}
.film__frame {
  position: absolute;
  left: calc(11 * var(--u));
  top: calc(42 * var(--u));
  width: calc(420 * var(--u));
  height: calc(236 * var(--u));
  overflow: hidden;
  border-radius: calc(6 * var(--u));
  background: #222;
}
.film__frame > img,
.film__frame > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.film__frame::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(110 * var(--u));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.72));
}
.film__play {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: calc(52 * var(--u));
  height: calc(52 * var(--u));
  translate: -50% -50%;
  border: 1.2px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(7px);
          backdrop-filter: blur(7px);
}
.film__play img { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.film__frame b {
  position: absolute;
  z-index: 1;
  left: calc(18 * var(--u));
  top: calc(194 * var(--u));
  font-size: calc(24 * var(--u));
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* "+ your story" closing frame */
.film__frame--yours {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(6 * var(--u));
  background: linear-gradient(143.16deg, #fff0c2 0%, #f6c95a 35.714%, #e3a52c 71.429%);
  color: #3a2200;
}
.film__frame--yours::after { content: none; }
.film__frame--yours b {
  position: static;
  font-family: var(--font-script);
  font-size: calc(60 * var(--u));
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: 0;
}
.film__frame--yours small {
  font-size: calc(15 * var(--u));
  font-weight: 600;
  line-height: 1;
  color: rgba(58, 34, 0, 0.75);
}

/* Edge captions sit on the sprocket rows and blank out the holes behind them */
.film__brand,
.film__label {
  position: absolute;
  left: calc(9 * var(--u));
  height: calc(22 * var(--u));
  padding: 0 calc(6 * var(--u));
  background: #24242a;
  font-weight: 600;
  line-height: calc(22 * var(--u));
  white-space: pre;
}
.film__brand {
  top: calc(11 * var(--u));
  font-size: calc(10 * var(--u));
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.18);
}
.film__label {
  top: calc(289 * var(--u));
  font-size: calc(11 * var(--u));
  letter-spacing: 0.12em;
  color: #ffb347;
}
.film__label--yours { color: #ffd46b; }

@media (prefers-reduced-motion: reduce) {
  .film__track { animation: none; }
}

/* ---- Headline ---- */
.genres-head { gap: 20px; margin-top: calc(90 * var(--u)); }
.genres-head__title { line-height: 1; }
.genres-head__title > span:first-child { margin-bottom: -0.125em; }
@media (min-width: 1024px) {
  .genres-head { gap: 22px; }
}

/* ---- Genre carousel. All slides share one grid cell; script slides them sideways
   by whole slide widths (plus the 44/1120 gap) and dims the ones off-centre. ---- */
.gcarousel {
  --slide-w: 84cqw;
  margin-top: calc(130 * var(--u));
}
.gcarousel__stage {
  display: grid;
  touch-action: pan-y;
  user-select: none;
}
.gslide {
  grid-area: 1 / 1;
  justify-self: center;
  width: var(--slide-w);
}
.gslide:not(.is-active) { cursor: pointer; }
.gslide img { -webkit-user-drag: none; } /* let a mouse drag swipe instead of dragging the picture */
.gslide { will-change: transform, opacity; } /* moved by GSAP: keep it on its own layer */
.gcarousel { position: relative; }

/* Prev / next chevrons at the video's mid-height, --arrow-gap outside the active slide's edges */
.gcarousel__arrow {
  --arrow-gap: 4px;
  position: absolute;
  z-index: 2;
  top: calc(var(--slide-w) * 0.28125); /* half the 1120 x 630 video's height */
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  translate: -50% -50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: rgba(14, 14, 18, 0.45);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: background-color 0.2s, scale 0.2s;
}
.gcarousel__arrow:hover { background: rgba(255, 255, 255, 0.18); scale: 1.06; }
.gcarousel__arrow:active { scale: 0.96; }
.gcarousel__arrow img { width: 20px; height: 20px; }
.gcarousel__arrow--prev { left: calc(50% - var(--slide-w) / 2 - var(--arrow-gap)); }
.gcarousel__arrow--next { left: calc(50% + var(--slide-w) / 2 + var(--arrow-gap)); }
@media (min-width: 768px) {
  .gcarousel__arrow { --arrow-gap: 40px; }
}
.gslide__video {
  position: relative;
  aspect-ratio: 1120 / 630;
  overflow: hidden;
  border-radius: 20px;
  background: #1a1a1a;
  box-shadow: 0 40px 90px -10px rgba(0, 0, 0, 0.22), 0 4px 10px rgba(0, 0, 0, 0.12);
}
.gslide__video > img,
.gslide__video > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.gslide__pill {
  position: absolute;
  left: 14px;
  top: 14px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.32);
  -webkit-backdrop-filter: blur(7px);
          backdrop-filter: blur(7px);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.gslide__play {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  translate: -50% -50%;
  border: 1.2px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.gslide__play img { width: 22px; height: 22px; }
.gslide__info {
  margin-top: 18px;
  padding: 0 4px;
}
.gslide__info h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.018em;
  white-space: nowrap;
}
.gslide__info h3 img { width: 26px; height: 26px; }
.gslide__info p {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: -0.003em;
  color: #a0a0a0;
}
.gcarousel__pager {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 32px;
}
.gcarousel__dot {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.18);
  cursor: pointer;
  transition: width 0.45s cubic-bezier(0.32, 0.72, 0, 1), background-color 0.45s;
}
.gcarousel__dot::after { content: ""; position: absolute; inset: -8px -4px; } /* bigger tap target */
.gcarousel__dot[aria-current="true"] { width: 44px; background: #fff; }

@media (min-width: 768px) {
  .gcarousel { --slide-w: 76cqw; }
  .gslide__video { border-radius: 26px; }
  .gslide__pill { left: 20px; top: 20px; font-size: 13px; }
  .gslide__play { width: 80px; height: 80px; }
  .gslide__play img { width: 26px; height: 26px; }
  .gslide__info { margin-top: 24px; }
  .gslide__info h3 { gap: 12px; font-size: 32px; }
  .gslide__info h3 img { width: 34px; height: 34px; }
  .gslide__info p { margin-top: 18px; font-size: 17px; }
}
@media (min-width: 1024px) {
  .gcarousel { --slide-w: min(1120px, 58.333cqw); }
  .gslide__video { border-radius: 32px; }
  .gslide__pill { left: 24px; top: 24px; }
  .gslide__play { width: 92px; height: 92px; }
  .gslide__play img { width: 30px; height: 30px; }
  .gslide__info { margin-top: 30px; }
  .gslide__info h3 { gap: 14px; font-size: 40px; }
  .gslide__info h3 img { width: 40px; height: 40px; }
  .gslide__info p { margin-top: 24px; font-size: 19px; }
  .gcarousel__pager { margin-top: 64px; }
  .gcarousel__arrow { --arrow-gap: 72px; width: 60px; height: 60px; }
  .gcarousel__arrow img { width: 26px; height: 26px; }
}


/* ============ INTRODUCING ROCKETTOONS ============ */

/* Background (cloud sea, colour grade, god rays, bloom, shades) is one picture.
   Phones: copy in normal flow, then the scene showing the middle 1100px of the
   1920px Figma frame. Desktop: the whole section is the 1920 x 1700 frame in --px. */
.intro {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  background: #05070c;
}
.intro__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.intro__copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 16px 0;
  text-align: center;
}
.intro__eyebrow {
  padding-left: 0.46em; /* balances the trailing letter-spacing */
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.46em;
  text-shadow: 0 2px 12px rgba(26, 18, 51, 0.45);
}
.intro__logo {
  width: 270px;
  margin-top: 16px;
  filter: drop-shadow(0 8px 30px rgba(0, 0, 0, 0.35));
}
.intro__headline {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 14px;
  font-size: 40px;
  font-weight: 700;
  line-height: 0.96;
  letter-spacing: -0.042em;
  white-space: nowrap;
  text-shadow: 0 6px 24px rgba(20, 13, 46, 0.35);
}
.intro__headline > span:first-child { margin-bottom: -0.125em; }
.intro__headline-script {
  font-family: var(--font-script);
  font-size: 1em;
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: 0;
}

.intro__scene {
  --px: calc(100cqw / 1100);
  position: relative;
  margin-top: 24px;
  height: calc(900 * var(--px));
  pointer-events: none;
}
.intro__stage {
  position: absolute;
  left: 50%;
  top: 0;
  width: calc(1920 * var(--px));
  height: 100%;
  translate: -50% 0;
}
.intro__ribbons {
  position: absolute;
  left: 0;
  top: calc(-700 * var(--px));
  width: calc(1920 * var(--px));
  height: calc(1700 * var(--px));
  max-width: none;
}
.intro__ribbons--glow { left: calc(-34 * var(--px)); width: calc(1988 * var(--px)); }
.intro__sparkles {
  position: absolute;
  left: calc(-92.4 * var(--px));
  top: calc(80.3 * var(--px));
  width: calc(2063.3 * var(--px));
  height: calc(386.2 * var(--px));
  max-width: none;
  mix-blend-mode: screen;
}

/* App screens in frosted glass frames */
.intro-card {
  position: absolute;
  padding: calc(10.6 * var(--px));
  border: 1.4px solid rgba(255, 255, 255, 0.8);
  border-radius: calc(26 * var(--px));
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.5);
}
.intro-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(16 * var(--px));
}
.intro-card--back {
  opacity: 0.9;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  filter: blur(2.5px) drop-shadow(0 calc(36 * var(--px)) calc(40 * var(--px)) rgba(26, 15, 46, 0.45));
}
.intro-card--hero {
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.5),
    0 0 calc(70 * var(--px)) rgba(255, 201, 138, 0.35),
    0 calc(36 * var(--px)) calc(80 * var(--px)) rgba(26, 15, 46, 0.45);
}
.intro-card--front {
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.5),
    0 calc(36 * var(--px)) calc(40 * var(--px)) rgba(26, 15, 46, 0.45);
}

/* Episode stills riding the ribbons */
.intro-frame {
  position: absolute;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 calc(16 * var(--px)) calc(30 * var(--px)) rgba(0, 0, 0, 0.45), 0 0 calc(28 * var(--px)) rgba(255, 179, 107, 0.45);
}
.intro-frame img { width: 100%; height: 100%; object-fit: cover; }

.intro__box {
  position: absolute;
  left: calc(1262 * var(--px));
  top: calc(315 * var(--px));
  width: calc(430 * var(--px));
  height: calc(427 * var(--px));
  max-width: none;
  filter: drop-shadow(0 0 calc(50 * var(--px)) rgba(255, 201, 138, 0.35)) drop-shadow(0 calc(30 * var(--px)) calc(60 * var(--px)) rgba(26, 15, 46, 0.55));
}
.intro__shade {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(500 * var(--px));
  height: calc(420 * var(--px));
  background: linear-gradient(180deg, rgba(14, 11, 30, 0) 0%, rgba(14, 11, 30, 0.7) 60%, #0e0b1e 100%);
}

@media (min-width: 640px) {
  .intro__copy { padding-top: 64px; }
  .intro__logo { width: 380px; margin-top: 20px; }
  .intro__headline { margin-top: 18px; font-size: 64px; }
}
@media (min-width: 1024px) {
  .intro { --px: calc(100cqw / 1920); }
  .intro__copy {
    height: calc(620 * var(--px));
    padding-top: calc(70 * var(--px));
  }
  .intro__eyebrow { font-size: max(11px, calc(14 * var(--px))); }
  .intro__logo { width: calc(560 * var(--px)); margin-top: calc(26 * var(--px)); }
  .intro__headline { margin-top: calc(22 * var(--px)); font-size: calc(96 * var(--px)); }
  .intro__headline-script { font-size: 1.2083em; } /* 116 / 96 */
  .intro__scene { --px: calc(100cqw / 1920); margin-top: 0; }
  .intro__bg img { top: calc(-80 * var(--px)); height: calc(1700 * var(--px)); }
}


/* ============ DEMO + STEPS RECAP ============ */

/* One section that starts in deep night, holds the demo player, then fades from
   near-black to light grey behind the three recap cards (into "Video types"). */
.demo {
  position: relative;
  overflow: hidden;
  --night: 700px; /* where the night blue has settled to near-black: the start of the recap */
  container-type: inline-size;
  background: linear-gradient(180deg, #0e0b1e 0, #0a0a0b var(--night));
}
.demo__stars {
  position: absolute;
  left: 50%;
  top: 8px;
  width: max(100%, 1200px);
  max-width: none;
  translate: -50% 0;
  pointer-events: none;
}
.demo__head { position: relative; gap: 20px; padding-top: 24px; }
.demo-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 16px 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
}
.demo-chip img { width: 24px; height: 24px; margin: -8px; } /* 8px dot with its glow */

/* Player and the glows around it, all placed in % of the 1200 x 686.67 player */
.demo__stage {
  position: relative;
  width: min(1200px, 100% - 32px);
  margin: 48px auto 0;
}
.demo__glow {
  position: absolute;
  max-width: none;
  pointer-events: none;
}
.demo__glow--violet { left: -33.33%; top: -40.19%; width: 166.67%; height: 195.15%; }
.demo__glow--warm   { left: 0;       top: 3.5%;    width: 100%;    height: 133.98%; }
.demo__glow--halo   { left: -12.5%;  top: -7.28%;  width: 125%;    height: 126.21%; }
.demo__glow--floor  { left: -5%;     top: 85.44%;  width: 110%;    height: 55.34%; }

.demo-player {
  position: relative;
  padding: clamp(5px, 1.007%, 12.08px);
  border: 1.25px solid rgba(255, 255, 255, 0.7);
  border-radius: clamp(14px, 2.78vw, 33.33px);
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(12.5px);
          backdrop-filter: blur(12.5px);
  box-shadow: inset 0 1.25px 0 rgba(255, 255, 255, 0.4), 0 42px 46px rgba(0, 0, 0, 0.6);
}
/* Inside the screen, --p is one Figma pixel of the 1173.33px-wide video */
.demo-player__screen {
  --p: calc(100cqw / 1173.33);
  position: relative;
  aspect-ratio: 1173.33 / 660;
  overflow: hidden;
  container-type: inline-size;
  border-radius: clamp(9px, 1.8vw, 21.67px);
  background: #0b0b12;
}
.demo-player__screen > * { --p: calc(100cqw / 1173.33); }
.demo-player__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.demo-player__dim {
  position: absolute;
  inset: 0;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.25), rgba(5, 3, 15, 0.75));
}
.demo-player__cta {
  --size: max(56px, calc(120 * var(--p)));
  position: absolute;
  left: 50%;
  top: 47.47%;
  width: var(--size);
  height: var(--size);
  translate: -50% -50%;
}
.demo-player__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: none;
  translate: -50% -50%;
  animation: demo-pulse 2.8s ease-in-out infinite;
}
.demo-player__ring--outer { width: 180.56%; height: 180.56%; }
.demo-player__ring--inner { width: 138.89%; height: 138.89%; animation-delay: -1.4s; }
@keyframes demo-pulse {
  0%, 100% { scale: 1;    opacity: 1; }
  50%      { scale: 1.06; opacity: 0.6; }
}
.demo-player__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 1.25px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(7.5px);
          backdrop-filter: blur(7.5px);
  box-shadow: 0 0 calc(16.67 * var(--p)) rgba(140, 123, 255, 0.5);
}
.demo-player__play img { width: 34.7%; height: 34.7%; margin-left: 3%; }
.demo-player__label {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(438.33 * var(--p));
  font-size: max(11px, calc(16.67 * var(--p)));
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.003em;
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
}
.demo-player__shade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 21.46%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));
}
/* Chapter bars along the bottom */
.demo-chapter {
  position: absolute;
  top: calc(586.67 * var(--p));
  height: calc(29.17 * var(--p));
}
.demo-chapter span {
  display: none;
  align-items: center;
  gap: calc(6.67 * var(--p));
  font-size: calc(11.67 * var(--p));
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.7);
}
.demo-chapter.is-current span { color: #fff; }
.demo-chapter b {
  font-size: calc(10 * var(--p));
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #ffd46b;
}
.demo-chapter i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: max(2px, calc(4.17 * var(--p)));
  overflow: hidden;
  border-radius: 2.5px;
  background: rgba(255, 255, 255, 0.28);
}
.demo-chapter em {
  position: absolute;
  inset: 0 auto 0 0;
  width: 55.06%; /* 81.67 / 148.33 */
  border-radius: inherit;
  background: linear-gradient(90deg, #8c7bff, #ffd46b);
}
@media (min-width: 640px) {
  .demo-chapter span { display: flex; }
}
.demo__tagline {
  position: relative;
  margin-top: 48px;
  padding: 0 16px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.003em;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
}

/* ---- Recap: headline, then three tall cards. Its top stays transparent so the demo's
   glows fade out underneath instead of being cut.
   Phones/tablets (Figma's mobile frame): the cards stacked, 350px wide on a 390px screen
   (the desktop card at 0.833), black behind them, fading to light grey over the last
   470px. Desktop: the cards in one row, the fade running behind them. ---- */
.recap {
  --r: min(1px, (100cqw - 40px) / 420);
  position: relative;
  margin-top: 96px;
  padding-bottom: 60px;
  background: linear-gradient(180deg,
    rgba(10, 10, 11, 0) 0,
    rgba(10, 10, 11, 0) 112px,
    #050505 280px,
    #050505 calc(100% - 470px),
    #3c3c40 calc(100% - 320px),
    #b4b4b9 calc(100% - 200px),
    #ececee calc(100% - 70px),
    #f4f4f6 100%);
}
.recap__head { gap: 14px; }
.recap__cards {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(24 * var(--r));
  margin-top: 40px;
  padding: 0 20px;
}
.recap__connector { display: none; }

.recap-card {
  position: relative;
  flex: none;
  width: calc(420 * var(--r));
  aspect-ratio: 420 / 747;
  overflow: hidden;
  border: 1.4px solid rgba(255, 255, 255, 0.45);
  border-radius: calc(32 * var(--r));
  background: #0a090f;
  box-shadow: 0 calc(30 * var(--r)) calc(70 * var(--r)) rgba(20, 14, 51, 0.35);
}
.recap-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.recap-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(8, 5, 20, 0.65));
}
/* Everything but the photo sits above the shade */
.recap-card__glow,
.recap-card__prompt,
.recap-board,
.recap-card__sprockets,
.recap-card__tag,
.recap-card__info { position: absolute; z-index: 1; }

.recap-card__glow { max-width: none; pointer-events: none; }
.recap-card__glow--a     { left: calc(18.6 * var(--r));   top: calc(428.6 * var(--r)); width: calc(380 * var(--r)); height: calc(280 * var(--r)); }
.recap-card__glow--b     { left: calc(-161.4 * var(--r)); top: calc(338.6 * var(--r)); width: calc(740 * var(--r)); height: calc(500 * var(--r)); }
.recap-card__glow--board { left: calc(-101.4 * var(--r)); top: calc(138.6 * var(--r)); width: calc(620 * var(--r)); height: calc(460 * var(--r)); }

/* 01: the prompt with a static caret (no animation) */
.recap-card__prompt {
  left: calc(32.6 * var(--r));
  top: calc(90.6 * var(--r));
  font-family: var(--font-script);
  font-size: calc(70 * var(--r));
  line-height: 0.96;
  white-space: pre-line;
}
.recap-card__caret {
  display: inline-block;
  width: calc(4 * var(--r));
  height: calc(60 * var(--r));
  margin-left: calc(6 * var(--r));
  vertical-align: -0.12em;
  border-radius: 2px;
  background: #ffd959;
}

/* 02: six storyboard stills and the approval stamp */
.recap-board {
  left: calc(16.6 * var(--r));
  top: calc(68.6 * var(--r));
  display: grid;
  grid-template-columns: repeat(2, calc(186 * var(--r)));
  grid-auto-rows: calc(140 * var(--r));
  gap: calc(12 * var(--r));
}
.recap-board__shot {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: calc(12 * var(--r));
}
.recap-board__shot img { width: 100%; height: 100%; object-fit: cover; }
.recap-board__shot i {
  position: absolute;
  left: calc(7 * var(--r));
  top: calc(7 * var(--r));
  padding: calc(3 * var(--r)) calc(7 * var(--r));
  border-radius: calc(6 * var(--r));
  background: rgba(0, 0, 0, 0.5);
  font-size: max(9px, calc(11 * var(--r)));
  font-style: normal;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.08em;
}
.recap-board__stamp {
  position: absolute;
  left: calc(320.8 * var(--r));
  top: calc(384.9 * var(--r));
  width: calc(58 * var(--r));
  height: calc(58 * var(--r));
  rotate: 6deg;
}

/* 03: the finished episode framed as film, sprocket holes down both edges */
.recap-card__sprockets {
  inset: 0;
  background:
    url("../images/recap-sprockets.svg") left top / calc(22 * var(--r)) calc(30 * var(--r)) repeat-y,
    url("../images/recap-sprockets.svg") right top / calc(22 * var(--r)) calc(30 * var(--r)) repeat-y;
}
.recap-card--export .recap-card__tag { left: calc(31.2 * var(--r)); }
.recap-card__tag {
  left: calc(15.2 * var(--r));
  top: calc(15.2 * var(--r));
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(7px);
          backdrop-filter: blur(7px);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.1em;
}
.recap-card__tag img { width: 6px; height: 6px; }
.recap-card__info {
  left: calc(11.2 * var(--r));
  right: calc(11.2 * var(--r));
  bottom: calc(11.2 * var(--r));
  display: flex;
  align-items: center;
  gap: calc(14 * var(--r));
  height: calc(150 * var(--r));
  padding: 0 calc(14 * var(--r)) 0 calc(18 * var(--r));
  border: 1.2px solid rgba(255, 255, 255, 0.7);
  border-radius: calc(24 * var(--r));
  background: rgba(13, 10, 26, 0.55);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.recap-card__num {
  flex: none;
  width: calc(60 * var(--r));
  font-family: var(--font-script);
  font-size: calc(64 * var(--r));
  line-height: 0.9;
}
.recap-card__info h3 {
  font-size: calc(26 * var(--r)); /* Figma mobile: 21.67px on a 350px card */
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.recap-card__info p {
  max-width: calc(258 * var(--r));
  margin-top: calc(8 * var(--r));
  font-size: calc(17 * var(--r));
  line-height: 1.4;
  letter-spacing: -0.002em;
  color: rgba(255, 255, 255, 0.9);
}

@media (min-width: 640px) {
  .demo__head { gap: 24px; padding-top: 40px; }
  .demo__stage { margin-top: 72px; }
  .demo__tagline { margin-top: 56px; }
}
@media (min-width: 1024px) {
  .demo { --night: 67.7vw; } /* 1300 / 1920 */
  .demo__head { gap: 26px; padding-top: calc(50 * 100vw / 1920); }
  .demo__stage { margin-top: 90px; }
  .demo__tagline { margin-top: 60px; }
  /* Desktop: the cards fit in one row, scaled to the width (1316 = 3 cards + gaps) */
  .recap {
    --r: min(1px, (100cqw - 64px) / 1316);
    --fade: calc(343 * var(--r));
    margin-top: calc(110 * var(--r));
    padding-bottom: calc(110 * var(--r)); /* just room for the 2→3 arrow under the cards */
    background: linear-gradient(180deg,
      rgba(10, 10, 11, 0) 0,
      rgba(10, 10, 11, 0) calc(140 * var(--r)),
      #050505 calc(343 * var(--r)),
      #3c3c40 calc(597 * var(--r)),
      #b4b4b9 calc(797 * var(--r)),
      #ececee calc(1010 * var(--r)),
      #f4f4f6 calc(1110 * var(--r)));
  }
  .recap__head { gap: 16px; }
  .recap__cards {
    flex-direction: row;
    align-items: normal;
    justify-content: center;
    gap: calc(28 * var(--r));
    margin-top: calc(100 * var(--r));
    padding: 0;
  }
  .recap-card__info h3 { font-size: calc(24 * var(--r)); }
  .recap__connector {
    display: block;
    position: absolute;
    width: calc(311.2 * var(--r));
    height: calc(180 * var(--r));
    pointer-events: none;
  }
  /* Figma: connectors at (580, 129) and (1028, 1044); the card row starts at (302, 303) */
  .recap__connector--top    { left: calc(50% - 658 * var(--r) + 278 * var(--r)); top: calc(-174 * var(--r)); }
  .recap__connector--bottom { left: calc(50% - 658 * var(--r) + 726 * var(--r)); top: calc(741 * var(--r)); z-index: 1; }
  .recap-card__tag { padding: 7px 14px 7px 12px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .demo-player__ring { animation: none; }
}


/* ============ VIDEO TYPES ============ */

/* Light grey that fades to near-black at the bottom (into the dark features).
   --v is one Figma pixel of a desktop card: the row's scale on desktop; on phones each
   card's own scale (its width in the grid / its desktop width), so frames, play buttons
   and bars shrink as in Figma's mobile frame. */
.vtypes {
  --v: 0.8px;
  position: relative;
  container-type: inline-size;
  padding: 64px 0 460px;
  overflow: hidden;
  background: #f4f4f6;
  color: #0e0b1e;
}
/* Figma's "Aurora" (1920 x 1203) sits on the section's bottom edge; its top fades into
   the light grey and its bottom into near-black, so both ends are seamless */
.vtypes__aurora img {
  position: absolute;
  left: 50%;
  bottom: -96px; /* phones: Figma's full 1920px aurora, centred, a little past the bottom */
  width: 1920px;
  max-width: none;
  height: auto;
  translate: -50% 0;
  pointer-events: none;
}
.vtypes__head,
.vtypes__row { position: relative; }
.vtypes__head { gap: 18px; }
.vtypes-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 16px 0 14px;
  border: 1px solid #e2e1ea;
  border-radius: 20px;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.12em;
}
.vtypes__head h2 > span:first-child { margin-bottom: 0.02em; }

/* Phones/tablets: the playing card on top (240px on a 390px screen), then two columns
   (165px cards, 20px apart). The track is a container so cards can size from it. */
.vtypes__row { margin-top: 16px; }
.vtypes__track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px 20px;
  max-width: 460px;
  margin: 0 auto;
  padding: 0 20px;
  container-type: inline-size;
}
.vtypes__floor {
  display: none;
  position: absolute;
  left: calc(180 * var(--v));
  top: calc(568 * var(--v));
  width: calc(1560 * var(--v));
  height: calc(120 * var(--v));
  max-width: none;
  pointer-events: none;
}

.vtype {
  --v: calc((100cqw - 20px) / 2 / var(--w));
  position: relative;
  width: calc(var(--w) * var(--v));
  text-align: center;
}
.vtype--featured {
  --v: calc((100cqw - 20px) / 2 / 165 * 240 / 340);
  grid-column: 1 / -1;
  order: -1;
  justify-self: center;
}
.vtype__video {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: max(3px, calc(5 * var(--v))) solid #fff;
  border-radius: calc(30 * var(--v));
  background: #0e0b1e;
  box-shadow: 0 2px 6px rgba(14, 11, 30, 0.05), 0 calc(20 * var(--v)) calc(40 * var(--v)) rgba(14, 11, 30, 0.18);
}
.vtype__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vtype__video::before,
.vtype__video::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}
.vtype__video::before { top: 0; height: 30%; background: linear-gradient(180deg, rgba(14, 11, 30, 0.45), rgba(14, 11, 30, 0)); }
.vtype__video::after  { bottom: 0; height: 40%; background: linear-gradient(180deg, rgba(14, 11, 30, 0), rgba(14, 11, 30, 0.55)); }
.vtype__bars,
.vtype__sound,
.vtype__play,
.vtype__playing { position: absolute; z-index: 1; }
/* Story-style progress segments. Each fills to --p (0-1): the first is full on the
   waiting cards; on the playing card the script fills them with the clip. */
.vtype__bars {
  left: calc(9 * var(--v));
  right: calc(9 * var(--v));
  top: calc(9 * var(--v));
  display: flex;
  gap: calc(4 * var(--v));
}
.vtype__bars i {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #fff calc(var(--p, 0) * 100%), rgba(255, 255, 255, 0.35) 0);
}
.vtype__bars i:first-child { --p: 1; }
.vtype__sound {
  right: calc(9 * var(--v));
  top: calc(21 * var(--v));
  width: calc(28 * var(--v));
  height: calc(28 * var(--v));
}
.vtype__play {
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: calc(var(--pl) * var(--v));
  height: calc(var(--pl) * var(--v));
  translate: -50% -50%;
  border: 1.2px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  box-shadow: 0 calc(8 * var(--v)) calc(18 * var(--v)) rgba(14, 11, 30, 0.25);
}
.vtype__play img { width: 33%; height: auto; margin-left: 6%; }
/* Waiting cards show the play button, the playing card the "Playing" badge; they cross-fade
   as the carousel moves (js/animations.js, data-vcarousel) */
.vtype__play,
.vtype__playing { transition: opacity 0.5s ease; }
.vtype__playing,
.vtype--featured .vtype__play { opacity: 0; }
.vtype--featured .vtype__playing { opacity: 1; }
.vtype__video { transition: border-color 0.6s ease, border-width 0.6s ease, border-radius 0.6s ease, box-shadow 0.6s ease; }
.vtype h3 { transition: color 0.6s ease; }
.vtype h3 {
  margin-top: 12px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.vtype--muted h3 { color: rgba(14, 11, 30, 0.55); } /* the outer four cards' titles are greyed */
/* the card leaving on the left and the one coming in on the right, while they're squeezed */
.vtype--edge { overflow: hidden; }
.vtype p {
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.3;
  color: rgba(14, 11, 30, 0.55);
}
/* The middle card is "playing": lime frame and glow */
.vtype--featured .vtype__video {
  border: max(4px, calc(6 * var(--v))) solid #d4ff3f;
  border-radius: calc(38 * var(--v));
  box-shadow: 0 0 calc(34 * var(--v)) rgba(212, 255, 63, 0.45), 0 calc(30 * var(--v)) calc(60 * var(--v)) rgba(14, 11, 30, 0.28);
}
.vtype--featured .vtype__bars { left: calc(14 * var(--v)); right: calc(14 * var(--v)); top: calc(14 * var(--v)); }
.vtype--featured .vtype__sound { right: calc(14 * var(--v)); top: calc(26 * var(--v)); width: calc(34 * var(--v)); height: calc(34 * var(--v)); }
.vtype__playing {
  left: calc(14 * var(--v));
  bottom: calc(14 * var(--v));
  display: flex;
  align-items: center;
  gap: calc(7 * var(--v));
  padding: calc(8 * var(--v)) calc(14 * var(--v)) calc(8 * var(--v)) calc(12 * var(--v));
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: calc(16 * var(--v));
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(7px);
          backdrop-filter: blur(7px);
  font-size: calc(13 * var(--v));
  font-weight: 600;
  line-height: 1;
  color: #fff;
}
.vtype__playing img { width: calc(17 * var(--v)); height: calc(16 * var(--v)); }

@media (min-width: 640px) {
  .vtypes__head { gap: 22px; }
}
@media (min-width: 1024px) {
  /* Whole row fits: 1880 Figma px plus 20px each side */
  .vtypes {
    --v: min(1px, 100cqw / 1920);
    padding: calc(40 * var(--v)) 0 max(260px, calc(470 * var(--v)));
  }
  /* keep the aurora at the row's scale; past 1920px wide it only stretches sideways */
  .vtypes__aurora img { bottom: 0; width: 100%; height: calc(1203 * var(--v)); object-fit: fill; }
  .vtypes__row { margin-top: calc(90 * var(--v)); }
  .vtypes__track {
    display: flex;
    gap: calc(18 * var(--v));
    width: max-content;
    max-width: none;
    padding: 0 calc(20 * var(--v)) 24px;
    container-type: normal;
  }
  .vtypes__floor { display: block; }
  .vtype,
  .vtype--featured {
    --v: inherit;
    order: 0;
    margin-top: calc((604 - var(--w) * 16 / 9) / 2 * var(--v)); /* centre the cards on one line */
  }
  .vtype h3 {
    margin-top: calc(18 * var(--v));
    font-size: max(12px, calc(var(--t) * var(--v)));
    white-space: nowrap;
  }
  /* the subtitle grows with the title: 12.5 at --t 15, 14 at --t 20 (the playing card) */
  .vtype p { font-size: max(10.5px, calc((8 + var(--t) * 0.3) * var(--v))); white-space: nowrap; }
  .vtype__playing { gap: 7px; padding: 8px 14px 8px 12px; border-radius: 16px; font-size: 13px; }
  .vtype__playing img { width: 17px; height: 16px; }
}


/* ============ FEATURES (dark, Figma 11 "Features — dark (v2 stages, compare)") ============ */

/* Ten rows: a "stage" (a squircle picture with app cards on it) on one side, the copy on
   the other, alternating. Figma's layout note for this section:
     desktop  content 1400 wide, centred: stage 720 x 640, 120 gap, copy 560 (Figma's
              note says 1280 / 640 / 520; widened on request);
              rows 180 apart, copy centred on its stage
     phones   stage on top (full width, max 640, same shape), copy under it
   Stages are drawn in Figma at 760 x 676. Inside a stage, --f is one of those Figma
   pixels, and every piece is placed with calc(N * var(--f)). Nothing inside may set
   container-type, or --f would resolve against the wrong box. */
.features {
  --sf: min(1px, 100cqw / 1920);
  position: relative;
  container-type: inline-size;
  overflow-x: clip;
  padding: 72px 0 96px;
  /* Figma: flat violet-black. The first 160px blends from the section above (#0d0d0f) */
  background: linear-gradient(180deg, #0d0d0f 0, #060508 160px) #060508;
}
.features__head { gap: 20px; }
.features-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.09);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.18), 0 8px 18px rgba(0, 0, 0, 0.6);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
}

.frow {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  margin-top: 72px;
  padding: 0 16px;
}
.frow:first-of-type { margin-top: 48px; }

/* ---- copy ---- */
.fcopy { position: relative; width: 100%; max-width: 640px; }
.fcopy__num {
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.1em;
  color: var(--c, #7a5cf0);
}
.fcopy__title {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.028em;
}
.fcopy__script {
  font-family: var(--font-script);
  font-size: 1.1667em; /* 56 / 48 */
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.92);
}
.fcopy__text {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.003em;
  color: rgba(255, 255, 255, 0.66);
}

/* ---- stage ---- */
.fvis {
  --f: calc(min(640px, 100cqw - 32px) / 760);
  position: relative;
  flex: none;
  width: calc(760 * var(--f));
  height: calc(676 * var(--f));
  /* read as a picture: no selecting text or dragging the pieces */
  -webkit-user-select: none;
          user-select: none;
  cursor: default;
}
/* Soft violet glow under the stage (Figma: a 960 x 541 ellipse, #7c5cff at 14%, blur 140) */
.fvis::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(1240 * var(--f));
  height: calc(821 * var(--f));
  translate: -50% calc(-50% + 34 * var(--f));
  background: radial-gradient(closest-side, rgba(124, 92, 255, 0.14), rgba(124, 92, 255, 0.11) 45%, rgba(124, 92, 255, 0) 100%);
  pointer-events: none;
}
.fstage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* Figma's squircle: radius 101, corner smoothing 100% (images/icons/fs-squircle.svg, inlined
     so the mask also works when the page is opened from disk) */
  -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 760 676" preserveAspectRatio="none"><path d="M557.34 0 c95.53 0 143.3 0 172.98 29.68 c29.68 29.68 29.68 77.45 29.68 172.98 L760 473.34 c0 95.53 0 143.3 -29.68 172.98 c-29.68 29.68 -77.45 29.68 -172.98 29.68 L202.66 676 c-95.53 0 -143.3 0 -172.98 -29.68 c-29.68 -29.68 -29.68 -77.45 -29.68 -172.98 L0 202.66 c0 -95.53 0 -143.3 29.68 -172.98 c29.68 -29.68 77.45 -29.68 172.98 -29.68 Z"/></svg>') 0 0 / 100% 100% no-repeat;
          mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 760 676" preserveAspectRatio="none"><path d="M557.34 0 c95.53 0 143.3 0 172.98 29.68 c29.68 29.68 29.68 77.45 29.68 172.98 L760 473.34 c0 95.53 0 143.3 -29.68 172.98 c-29.68 29.68 -77.45 29.68 -172.98 29.68 L202.66 676 c-95.53 0 -143.3 0 -172.98 -29.68 c-29.68 -29.68 -29.68 -77.45 -29.68 -172.98 L0 202.66 c0 -95.53 0 -143.3 29.68 -172.98 c29.68 -29.68 77.45 -29.68 172.98 -29.68 Z"/></svg>') 0 0 / 100% 100% no-repeat;
  isolation: isolate;
}
.fstage img { -webkit-user-drag: none; }
.fstage__bg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* ---- the animated background layer of each stage (Figma layers named "… (animate)") ----
   .fx is the layer's box; each <i> is one bar with its Figma box in --x/--y/--w/--h
   and its strength (white alpha) in --o; gradient bars fade to --e at both ends.
   They move only while the stage is on screen (.fvis.is-live, set by animations.js). */
.fx {
  position: absolute;
  left: calc(var(--x) * var(--f));
  top: calc(var(--y) * var(--f));
  width: calc(var(--w) * var(--f));
  height: calc(var(--h) * var(--f));
  overflow: hidden;
  pointer-events: none;
}
.fx i {
  position: absolute;
  display: block;
  left: calc(var(--x) * var(--f));
  top: calc(var(--y, 0) * var(--f));
  width: calc(var(--w) * var(--f));
  height: calc(var(--h) * var(--f));
  border-radius: calc(var(--w) * var(--f) / 2);
  background: linear-gradient(180deg, rgba(255, 255, 255, var(--e, var(--o))), rgba(255, 255, 255, var(--o)) 50%, rgba(255, 255, 255, var(--e, var(--o))));
}

/* Bars: rows of white blocks drifting sideways, each row the other way */
.fx__row {
  position: absolute;
  left: 0;
  top: calc(var(--y) * var(--f));
  display: flex;
  height: calc(var(--h) * var(--f));
  animation: fx-slide 48s linear infinite;
}
.fx__row:nth-child(even) { animation-direction: reverse; }
.fx__run { position: relative; flex: none; width: calc(760 * var(--f)); height: 100%; }
.fx--bars i { top: 0; height: 100%; border-radius: 0; }
@keyframes fx-slide { to { transform: translateX(-50%); } }

/* Fringe: a comb of thin lines, every fourth one brighter, drifting sideways */
.fx__comb {
  --s: calc(var(--step) * var(--f));
  --l: calc(var(--lw) * var(--f));
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--x0) * var(--f));
  width: calc(100% + 4 * var(--s));
  background: repeating-linear-gradient(90deg,
    rgba(255, 255, 255, var(--hi)) 0 var(--l), transparent 0 var(--s),
    rgba(255, 255, 255, var(--lo)) 0 calc(var(--s) + var(--l)), transparent 0 calc(2 * var(--s)),
    rgba(255, 255, 255, var(--lo)) 0 calc(2 * var(--s) + var(--l)), transparent 0 calc(3 * var(--s)),
    rgba(255, 255, 255, var(--lo)) 0 calc(3 * var(--s) + var(--l)), transparent 0 calc(4 * var(--s)));
  -webkit-mask: linear-gradient(180deg, rgba(0, 0, 0, var(--e)), #000 50%, rgba(0, 0, 0, var(--e)));
          mask: linear-gradient(180deg, rgba(0, 0, 0, var(--e)), #000 50%, rgba(0, 0, 0, var(--e)));
  animation: fx-comb 7s linear infinite;
}
@keyframes fx-comb { to { transform: translateX(calc(-4 * var(--s))); } }

/* Keys: tall rounded keys breathing in a slow wave */
.fx--keys i { animation: fx-breathe 3.6s ease-in-out calc(var(--k) * -0.3s) infinite alternate; }
@keyframes fx-breathe { from { transform: scaleY(0.78); } to { transform: scaleY(1); } }

/* Equalizer: levels bouncing to the music */
.fx--equalizer i {
  animation: fx-level calc(1.1s + mod(var(--k), 3) * 0.28s) cubic-bezier(0.45, 0, 0.55, 1) calc(var(--k) * -0.37s) infinite alternate;
}
@keyframes fx-level { from { transform: scaleY(0.42); } to { transform: scaleY(1); } }

/* Rods: three light rods each side, glowing in turn */
.fx--rods i { animation: fx-glow 4.2s ease-in-out calc(mod(var(--k), 3) * -1.4s) infinite alternate; }
@keyframes fx-glow { from { opacity: 0.45; transform: scaleY(0.86); } to { opacity: 1; transform: scaleY(1); } }

.fx i, .fx__row, .fx__comb { animation-play-state: paused; }
.fvis.is-live .fx i,
.fvis.is-live .fx__row,
.fvis.is-live .fx__comb { animation-play-state: running; }

/* ---- shared card styles (Figma: tinted white glass, white 95% to the tint at 90%,
   backdrop blur 24, a 1.5px white inner stroke; behind big cards a "Glass rim": a white
   35% plate 8px bigger all round) ---- */
.fs-rim {
  position: absolute;
  border-radius: calc(var(--r, 45.6) * var(--f));
  background: rgba(255, 255, 255, 0.35);
}
.fs-glass {
  position: absolute;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), var(--tint, rgba(224, 240, 255, 0.9)));
  -webkit-backdrop-filter: blur(calc(24 * var(--f)));
          backdrop-filter: blur(calc(24 * var(--f)));
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.9), 0 calc(16 * var(--f)) calc(42 * var(--f)) rgba(15, 40, 90, 0.16);
}

@media (min-width: 640px) {
  .features { padding-top: 96px; }
  .frow { gap: 36px; margin-top: 96px; padding: 0 32px; }
  .fvis { --f: calc(min(640px, 100cqw - 64px) / 760); }
  .fcopy__title { font-size: 42px; }
  .fcopy__text { font-size: 18px; }
}

/* Desktop: the Figma layout, scaled with the 1920 frame (--sf is one Figma px) */
@media (min-width: 1024px) {
  .features { padding: calc(110 * var(--sf)) 0 calc(180 * var(--sf)); }
  .features__head { gap: calc(26 * var(--sf)); }
  .frow {
    display: grid;
    grid-template-columns: calc(720 * var(--sf)) calc(560 * var(--sf));
    grid-template-areas: "vis copy";
    column-gap: calc(120 * var(--sf));
    justify-content: center;
    align-items: center;
    margin: calc(180 * var(--sf)) 0 0;
    padding: 0;
  }
  .frow:first-of-type { margin-top: calc(108 * var(--sf)); }
  .frow--vis-right { grid-template-columns: calc(560 * var(--sf)) calc(720 * var(--sf)); grid-template-areas: "copy vis"; }
  .fvis { --f: calc(var(--sf) * 720 / 760); grid-area: vis; }
  .fcopy { grid-area: copy; width: calc(560 * var(--sf)); max-width: none; }
  .fcopy__num { font-size: calc(15 * var(--sf)); }
  .fcopy__title { margin-top: calc(20 * var(--sf)); font-size: calc(48 * var(--sf)); }
  .fcopy__text { margin-top: calc(22 * var(--sf)); font-size: calc(20 * var(--sf)); }
}

@media (prefers-reduced-motion: reduce) {
  .fx i, .fx__row, .fx__comb { animation: none; }
}

/* ---- stage 01 ---- */
/* -- fs-01: "Type one line. Get a whole screenplay." --
   Figma 540:128 (drawn 760 x 659; every y here is Figma's + 8 to sit in the 676 stage).
   A prompt bar over a screenplay card, and a "Writing scene 4 of 6" pill. Animated by
   js/animations.js (data-screenplay); this markup is the resting / reduced-motion frame. */
.fs-01 p { margin: 0; }
.fs-01 img { display: block; max-width: none; }

/* Glass rims: white 35% plates behind the bar and the card */
.fs-01 .fs01-rim {
  position: absolute;
  box-sizing: border-box;
  border: 0.844px solid rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.35);
}
.fs-01 .fs01-rim--script {
  left: calc(143.555 * var(--f)); top: calc(227.555 * var(--f));
  width: calc(523.556 * var(--f)); height: calc(380 * var(--f));
  border-radius: calc(45.6 * var(--f));
}
.fs-01 .fs01-rim--prompt {
  left: calc(85.289 * var(--f)); top: calc(127.068 * var(--f));
  width: calc(555.644 * var(--f)); height: calc(86.133 * var(--f));
  border-radius: calc(43.067 * var(--f));
}

/* ---- screenplay card ---- */
.fs-01 .fs01-script {
  position: absolute;
  left: calc(152 * var(--f)); top: calc(236 * var(--f));
  width: calc(506.667 * var(--f)); height: calc(363.111 * var(--f));
  overflow: hidden;
  border-radius: calc(37.156 * var(--f));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.93), rgba(224, 240, 255, 0.9));
  -webkit-backdrop-filter: blur(calc(10.133 * var(--f)));
          backdrop-filter: blur(calc(10.133 * var(--f)));
  box-shadow: 0 calc(20.267 * var(--f)) calc(42.222 * var(--f)) calc(-10.133 * var(--f)) rgba(11, 27, 51, 0.22),
              inset 0 calc(1.689 * var(--f)) calc(1.689 * var(--f)) rgba(255, 255, 255, 0.9);
}
.fs-01 .fs01-title {
  position: absolute;
  left: calc(33.779 * var(--f)); top: calc(30.4 * var(--f));
  font-size: calc(25.333 * var(--f));
  font-weight: 700;
  line-height: calc(32 * var(--f));
  letter-spacing: -0.02em;
  color: #0f1a2e;
  white-space: nowrap;
}
.fs-01 .fs01-chips {
  position: absolute;
  left: calc(33.779 * var(--f)); top: calc(70.932 * var(--f));
  display: flex;
  gap: calc(4.711 * var(--f));
}
.fs-01 .fs01-chip {
  padding: calc(5.067 * var(--f)) calc(10.133 * var(--f));
  border-radius: calc(83.6 * var(--f));
  background: rgba(0, 0, 0, 0.05);
  font-size: calc(10.978 * var(--f));
  font-weight: 600;
  line-height: calc(14 * var(--f));
  color: #6b7585;
  white-space: nowrap;
}
.fs-01 .fs01-chip--blue { background: rgba(46, 125, 215, 0.12); color: #1f5fb0; }
.fs-01 .fs01-rule {
  position: absolute;
  left: calc(33.779 * var(--f)); top: calc(106.4 * var(--f));
  width: calc(439.111 * var(--f)); height: calc(0.844 * var(--f));
  background: rgba(0, 0, 0, 0.08);
}

/* the screenplay itself: Courier Prime in Figma (not loaded by the page, so a Courier stack) */
.fs-01 .fs01-mono {
  position: absolute;
  left: calc(33.779 * var(--f));
  font-family: "Courier Prime", "Courier New", Courier, monospace;
  font-size: calc(12.667 * var(--f));
  font-weight: 400;
  line-height: 1.5;
  color: #3a4352;
}
.fs-01 .fs01-head { line-height: calc(14 * var(--f)); font-weight: 700; color: #0f1a2e; white-space: nowrap; }
.fs-01 .fs01-head--3 { top: calc(126.666 * var(--f)); }
.fs-01 .fs01-head--4 { top: calc(292.178 * var(--f)); }
.fs-01 .fs01-action { top: calc(153.688 * var(--f)); width: calc(439.111 * var(--f)); }
.fs-01 .fs01-name,
.fs-01 .fs01-line { left: calc(109.779 * var(--f)); width: calc(287.111 * var(--f)); text-align: center; }
.fs-01 .fs01-name { top: calc(212.799 * var(--f)); }
.fs-01 .fs01-line { top: calc(233.068 * var(--f)); }
/* the line being written: it wraps on into the fade at the card's foot */
.fs-01 .fs01-typing {
  top: calc((319.201 - 2.5) * var(--f));
  width: calc(439.111 * var(--f));
  line-height: calc(19 * var(--f));
}
/* block caret: takes no room in the line (so it never wraps on its own) and sits above the fade */
.fs-01 .fs01-block {
  position: relative;
  z-index: 1;
  display: inline-block;
  width: 0;
  height: calc(15.2 * var(--f));
  vertical-align: calc(-3.4 * var(--f));
}
.fs-01 .fs01-block::before {
  content: "";
  position: absolute;
  left: calc(1.689 * var(--f));
  top: 0;
  width: calc(7.6 * var(--f));
  height: 100%;
  border-radius: calc(0.844 * var(--f));
  background: #2e7dd7;
}
.fs-01 .fs01-fade {
  position: absolute;
  left: 0; top: calc(320.889 * var(--f));
  width: 100%; height: calc(42.222 * var(--f));
  background: linear-gradient(180deg, rgba(224, 240, 255, 0), #e3f1ff);
}

/* ---- prompt bar ---- */
.fs-01 .fs01-prompt {
  position: absolute;
  left: calc(92.889 * var(--f)); top: calc(134.666 * var(--f));
  width: calc(540.444 * var(--f)); height: calc(70.933 * var(--f));
  border-radius: calc(35.467 * var(--f));
  background: #fff;
  box-shadow: 0 calc(15.2 * var(--f)) calc(33.778 * var(--f)) calc(-8.444 * var(--f)) rgba(11, 27, 51, 0.25);
}
.fs-01 .fs01-search {
  position: absolute;
  left: calc(25.333 * var(--f)); top: calc(21.113 * var(--f));
  width: calc(28.711 * var(--f)); height: calc(28.711 * var(--f));
}
.fs-01 .fs01-prompt-text {
  position: absolute;
  left: calc(65.868 * var(--f)); top: calc(23.646 * var(--f));
  display: flex;
  height: calc(23.644 * var(--f));
  font-size: calc(18.578 * var(--f));
  font-weight: 400;
  line-height: calc(23.644 * var(--f));
  color: #0f1a2e;
  white-space: pre;
}
.fs-01 .fs01-caret {
  flex: none;
  width: calc(1.689 * var(--f));
  height: 100%;
  margin-left: calc(2.4 * var(--f));
  background: #2e7dd7;
}
.fs-01 .fs01-send {
  position: absolute;
  left: calc(481.333 * var(--f)); top: calc(16.045 * var(--f));
  width: calc(38.844 * var(--f)); height: calc(38.844 * var(--f));
}

/* ---- "Writing scene 4 of 6" ---- */
.fs-01 .fs01-status {
  position: absolute;
  left: calc(496.533 * var(--f)); top: calc(570.4 * var(--f));
  display: flex;
  align-items: center;
  gap: calc(10.133 * var(--f));
  padding: calc(10.133 * var(--f)) calc(15.2 * var(--f)) calc(10.133 * var(--f)) calc(11.822 * var(--f));
  border-radius: calc(21.956 * var(--f));
  background: #fff;
  box-shadow: 0 calc(11.822 * var(--f)) calc(25.333 * var(--f)) calc(-6.756 * var(--f)) rgba(11, 27, 51, 0.25);
}
.fs-01 .fs01-spark {
  flex: none;
  width: calc(25.333 * var(--f)); height: calc(25.333 * var(--f));
  border-radius: 50%;
  background: #2e7dd7;
}
.fs-01 .fs01-spark img {
  width: 100%; height: 100%;
  transform-origin: 50% 45%; /* the star's own centre (it sits a little high in the disc) */
}
.fs-01 .fs01-status-body { display: flex; flex-direction: column; gap: calc(5.911 * var(--f)); }
.fs-01 .fs01-status-text {
  font-size: calc(11.822 * var(--f));
  font-weight: 600;
  line-height: calc(15 * var(--f));
  color: #0f1a2e;
  white-space: nowrap;
}
.fs-01 .fs01-num { display: inline-block; }
.fs-01 .fs01-bar { display: flex; gap: calc(3.378 * var(--f)); }
.fs-01 .fs01-bar i {
  width: calc(18.578 * var(--f)); height: calc(4.222 * var(--f));
  border-radius: calc(2.533 * var(--f));
  background: #2e7dd7;
  opacity: 0.15;
}
.fs-01 .fs01-bar i:nth-child(-n + 3) { opacity: 1; }
.fs-01 .fs01-bar i.is-half { opacity: 0.45; }

/* Endless bits (only while the stage is on screen: animations.js sets .is-on).
   Carets blink when idle and stay solid while typing; the spark turns slowly. */
.fs-01.is-on .fs01-caret:not(.is-typing),
.fs-01.is-on .fs01-block:not(.is-typing)::before { animation: fs01-blink 1s steps(1) infinite; }
.fs-01.is-on .fs01-spark img { animation: fs01-spin 6s linear infinite; }
@keyframes fs01-blink { 50% { opacity: 0; } }
@keyframes fs01-spin { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .fs-01.is-on .fs01-caret:not(.is-typing),
  .fs-01.is-on .fs01-block:not(.is-typing)::before,
  .fs-01.is-on .fs01-spark img { animation: none; }
}
/* -- /fs-01 -- */

/* ---- stage 02 ---- */
/* -- fs-02 -- */
/* Feature 02 stage (Figma 542:128): "Same Pip, every scene". Four scene cards on the left,
   a tilted face-scan card on the right. Figma draws the pieces inside a 532-wide "Content"
   frame at (110.62, 107.24); everything here is in stage coordinates. */
.fs-02 :where(p, span, i) { margin: 0; }
.fs-02 :where(img, video) { display: block; max-width: none; }

/* Header chip "Same Pip · 12 scenes" */
.fs-02 .fs02-caption {
  position: absolute;
  left: calc(110.62 * var(--f));
  top: calc(129.71 * var(--f));
  display: flex;
  align-items: center;
  gap: calc(4.729 * var(--f));
  padding: calc(3.547 * var(--f)) calc(8.276 * var(--f)) calc(3.547 * var(--f)) calc(4.729 * var(--f));
  border: calc(0.591 * var(--f)) solid rgba(255, 255, 255, 0.1);
  border-radius: calc(10.64 * var(--f));
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(calc(4.138 * var(--f)));
          backdrop-filter: blur(calc(4.138 * var(--f)));
  font-size: calc(7.684 * var(--f));
  font-weight: 600;
  line-height: normal;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
}
.fs-02 .fs02-caption img {
  flex: none;
  width: calc(14.187 * var(--f));
  height: calc(14.187 * var(--f));
  border-radius: 50%;
}

/* Scene cards */
.fs-02 .fs02-scene {
  position: absolute;
  box-sizing: border-box;
  width: calc(118.222 * var(--f));
  height: calc(153.689 * var(--f));
  overflow: hidden;
  border: calc(0.591 * var(--f)) solid rgba(255, 255, 255, 0.12);
  border-radius: calc(23.644 * var(--f));
  box-shadow: 0 calc(14.187 * var(--f)) calc(28.373 * var(--f)) rgba(0, 0, 0, 0.5);
}
.fs-02 .fs02-scene--rainy { left: calc(110.62 * var(--f)); top: calc(160.44 * var(--f)); height: calc(195.067 * var(--f)); }
.fs-02 .fs02-scene--fort  { left: calc(110.62 * var(--f)); top: calc(367.33 * var(--f)); }
.fs-02 .fs02-scene--road  { left: calc(240.67 * var(--f)); top: calc(107.24 * var(--f)); }
.fs-02 .fs02-scene--apple { left: calc(240.67 * var(--f)); top: calc(272.76 * var(--f)); height: calc(206.889 * var(--f)); }
.fs-02 .fs02-scene__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* data-face-scan lays a blurred copy over each picture and fades it out to "sharpen" it */
.fs-02 .fs02-scene__blur {
  filter: blur(calc(7 * var(--f)));
  transform: scale(1.06);   /* keeps the blurred edge from showing a light rim */
  will-change: opacity;
}
.fs-02 .fs02-scene__fade {
  position: absolute;
  left: calc(-0.59 * var(--f));
  top: calc(91.62 * var(--f));
  width: calc(118.222 * var(--f));
  height: calc(61.476 * var(--f));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.35));
}
.fs-02 .fs02-scene--rainy .fs02-scene__fade { top: calc(116.45 * var(--f)); height: calc(78.027 * var(--f)); }
.fs-02 .fs02-scene--apple .fs02-scene__fade { top: calc(123.54 * var(--f)); height: calc(82.756 * var(--f)); }

/* Glass bar on each scene: kicker, title, Pip's face with a check */
.fs-02 .fs02-bar {
  --tint: rgba(45, 140, 255, 0.18);
  position: absolute;
  box-sizing: border-box;
  left: calc(5.32 * var(--f));
  top: calc(112.9 * var(--f));
  width: calc(106.4 * var(--f));
  height: calc(34.284 * var(--f));
  overflow: hidden;
  border: calc(0.591 * var(--f)) solid rgba(255, 255, 255, 0.32);
  border-radius: calc(14.187 * var(--f));
  background: linear-gradient(var(--tint), var(--tint)), rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(calc(6.502 * var(--f)));
          backdrop-filter: blur(calc(6.502 * var(--f)));
  box-shadow: inset 0 calc(0.591 * var(--f)) calc(0.591 * var(--f)) rgba(255, 255, 255, 0.28);
  line-height: normal;
  white-space: nowrap;
}
.fs-02 .fs02-scene--rainy .fs02-bar { top: calc(154.28 * var(--f)); }
.fs-02 .fs02-scene--apple .fs02-bar { top: calc(166.1 * var(--f)); --tint: rgba(255, 90, 78, 0.18); }
.fs-02 .fs02-scene--fort .fs02-bar { --tint: rgba(245, 158, 11, 0.18); }
.fs-02 .fs02-scene--road .fs02-bar { --tint: rgba(18, 184, 134, 0.18); }
.fs-02 .fs02-bar__kicker {
  position: absolute;
  left: calc(8.87 * var(--f));
  top: calc(6.5 * var(--f));
  font-size: calc(5.911 * var(--f));
  font-weight: 600;
  letter-spacing: calc(0.5911 * var(--f));
  color: rgba(255, 255, 255, 0.75);
}
.fs-02 .fs02-bar__title {
  position: absolute;
  left: calc(8.87 * var(--f));
  top: calc(15.37 * var(--f));
  font-size: calc(8.276 * var(--f));
  font-weight: 600;
  color: #fff;
}
.fs-02 .fs02-face {
  position: absolute;
  box-sizing: border-box;
  left: calc(76.25 * var(--f));
  top: calc(4.14 * var(--f));
  width: calc(24.827 * var(--f));
  height: calc(24.827 * var(--f));
  border: calc(1.182 * var(--f)) solid #2d8cff;
  border-radius: 50%;
  background: #bfe5e0;
}
.fs-02 .fs02-scene--fort .fs02-face { border-color: #f59e0b; }
.fs-02 .fs02-scene--road .fs02-face { border-color: #12b886; }
.fs-02 .fs02-scene--apple .fs02-face { border-color: #ff5a4e; }
.fs-02 .fs02-face__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.fs-02 .fs02-face__check {
  position: absolute;
  left: calc(14.19 * var(--f));
  top: calc(14.19 * var(--f));
  width: calc(10.64 * var(--f));
  height: calc(10.64 * var(--f));
}

/* Scan card: tilted 3deg, a white 55% rim (Figma: an 8.4 outside stroke) round a mint glass card */
.fs-02 .fs02-scan {
  position: absolute;
  left: calc(364.8 * var(--f));
  top: calc(118.77 * var(--f));
  width: calc(271.911 * var(--f));
  height: calc(449.836 * var(--f));
  rotate: 3deg;
  color: #0e0b1e;
}
.fs-02 .fs02-scan__rim {
  position: absolute;
  inset: calc(-8.444 * var(--f));
  border-radius: calc(41.546 * var(--f));
  background: rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 calc(1.689 * var(--f)) calc(1.689 * var(--f)) rgba(255, 255, 255, 0.9),
              0 calc(17.733 * var(--f)) calc(17.733 * var(--f)) rgba(0, 0, 0, 0.55);
}
.fs-02 .fs02-scan__card {
  position: absolute;
  inset: 0;
  border-radius: calc(33.102 * var(--f));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.93), rgba(219, 247, 245, 0.9));
  -webkit-backdrop-filter: blur(calc(10.133 * var(--f)));
          backdrop-filter: blur(calc(10.133 * var(--f)));
}
.fs-02 .fs02-camera {
  position: absolute;
  left: calc(11.82 * var(--f));
  top: calc(11.82 * var(--f));
  width: calc(248.267 * var(--f));
  height: calc(332.796 * var(--f));
  overflow: hidden;
  border-radius: calc(26.009 * var(--f));
  background: #3a3530;
}
.fs-02 .fs02-camera__video,
.fs-02 .fs02-camera__overlay,
.fs-02 .fs02-ring,
.fs-02 .fs02-camera__vignette {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* the clip (and its poster) frames Pip tighter than Figma's still; as in the old version the
   ring is drawn a little larger, about its centre, so his whole face fits inside it */
.fs-02 .fs02-camera__video { object-fit: cover; object-position: 50% 45%; }
.fs-02 .fs02-ring { overflow: visible; transform: scale(1.12); transform-origin: 50% 41.5%; }
.fs-02 .fs02-camera__vignette {
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.28) 100%);
}
.fs-02 .fs02-callout {
  position: absolute;
  left: calc(11.47 * var(--f));
  top: calc(40.09 * var(--f));
  display: flex;
  align-items: center;
  gap: calc(2.956 * var(--f));
  padding: calc(2.364 * var(--f)) calc(5.911 * var(--f)) calc(2.364 * var(--f)) calc(4.729 * var(--f));
  border: calc(0.591 * var(--f)) solid rgba(255, 255, 255, 0.22);
  border-radius: calc(5.911 * var(--f));
  background: rgba(0, 0, 0, 0.42);
  -webkit-backdrop-filter: blur(calc(4.138 * var(--f)));
          backdrop-filter: blur(calc(4.138 * var(--f)));
  font-size: calc(6.502 * var(--f));
  font-weight: 600;
  line-height: normal;
  color: #fff;
  white-space: nowrap;
}
.fs-02 .fs02-callout i {
  flex: none;
  width: calc(3.547 * var(--f));
  height: calc(3.547 * var(--f));
  border-radius: 50%;
  background: #0e8f8c;
}
.fs-02 .fs02-scan__text {
  position: absolute;
  left: calc(23.645 * var(--f));
  top: calc(361.17 * var(--f));
  width: calc(224.622 * var(--f));
  font-size: calc(13.596 * var(--f));
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: calc(-0.2039 * var(--f));
  text-align: center;
  color: rgba(14, 11, 30, 0.38);
}
.fs-02 .fs02-scan__strong { color: #0e0b1e; }

/* "Locking face 86%" pill (centred, so the label can change without it drifting) */
.fs-02 .fs02-progress {
  position: absolute;
  left: calc(135.956 * var(--f));
  top: calc(408.46 * var(--f));
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: calc(5.911 * var(--f));
  padding: calc(5.911 * var(--f)) calc(10.64 * var(--f)) calc(5.911 * var(--f)) calc(8.276 * var(--f));
  border: calc(0.591 * var(--f)) solid rgba(14, 11, 30, 0.08);
  border-radius: calc(14.187 * var(--f));
  background: rgba(14, 11, 30, 0.05);
  font-size: calc(9.458 * var(--f));
  line-height: normal;
  white-space: nowrap;
}
.fs-02 .fs02-progress__dot {
  flex: none;
  width: calc(7.093 * var(--f));
  height: calc(7.093 * var(--f));
  border-radius: 50%;
  background: #7dbe00;
  box-shadow: 0 0 calc(4.729 * var(--f)) rgba(155, 203, 0, 0.6);
}
.fs-02 .fs02-progress__label { font-weight: 500; color: rgba(14, 11, 30, 0.38); }
.fs-02 .fs02-progress__value {
  min-width: 2.3em;                 /* counting doesn't shift the pill */
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* -- /fs-02 -- */

/* ---- stage 03 ---- */
/* -- fs-03: cartoon yourself (a photo of Leo becomes the Pixar-style toon, in every episode) -- */
.fs-03 p { margin: 0; white-space: nowrap; }
.fs-03 img { display: block; max-width: none; }
.fs-03__boxshade,
.fs-03__box,
.fs-03__polaroid,
.fs-03__tape,
.fs-03__arrow,
.fs-03__feet,
.fs-03__leo,
.fs-03__spark,
.fs-03__toolbar,
.fs-03__chip,
.fs-03__ep,
.fs-03__prod { position: absolute; }

/* Stage box: a clear glass plate behind Leo, a soft violet glow at its foot */
.fs-03__box {
  left: calc(162.72 * var(--f));
  top: calc(226.65 * var(--f));
  width: calc(431.17 * var(--f));
  height: calc(324.94 * var(--f));
  overflow: hidden;
  border-radius: calc(33.78 * var(--f));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.18));
  -webkit-backdrop-filter: blur(calc(8.44 * var(--f)));
          backdrop-filter: blur(calc(8.44 * var(--f)));
}
/* its drop shadow (spread -8.44, y 16.89, blur 33.78), visible through the clear glass */
.fs-03__boxshade {
  position: absolute;
  left: calc(171.16 * var(--f));
  top: calc(251.98 * var(--f));
  width: calc(414.29 * var(--f));
  height: calc(308.06 * var(--f));
  border-radius: calc(25.34 * var(--f));
  background: rgba(11, 61, 34, 0.18);
  filter: blur(calc(16.89 * var(--f)));
}
.fs-03__box::after {
  content: "";
  position: absolute;
  inset: 0;
  border: calc(1.27 * var(--f)) solid rgba(255, 255, 255, 0.75);
  border-radius: inherit;
}
.fs-03__glow {
  position: absolute;
  left: calc(40.62 * var(--f));
  top: calc(143.72 * var(--f));
  width: calc(349.94 * var(--f));
  height: calc(224.96 * var(--f));
  background: radial-gradient(closest-side, rgba(156, 140, 255, 0.28), rgba(156, 140, 255, 0));
  filter: blur(calc(12.5 * var(--f)));
}

/* Polaroid of the real Leo, taped on, tilted 7deg */
.fs-03__polaroid {
  left: calc(127.43 * var(--f));
  top: calc(188.18 * var(--f));
  width: calc(126.83 * var(--f));
  height: calc(156.92 * var(--f));
  overflow: hidden;
  rotate: 7deg;
  border-radius: calc(4.3 * var(--f));
  background: #fff;
  box-shadow: 0 calc(10.75 * var(--f)) calc(21.5 * var(--f)) rgba(0, 0, 0, 0.55);
}
.fs-03__photo {
  position: absolute;
  left: calc(6.45 * var(--f));
  top: calc(6.45 * var(--f));
  width: calc(113.93 * var(--f));
  height: calc(124.68 * var(--f));
  overflow: hidden;
  border-radius: calc(1.61 * var(--f));
}
.fs-03__photo img {
  position: absolute;
  left: -2.5%;
  top: 0;
  width: 105%;
  height: 119.11%;
}
.fs-03__name {
  position: absolute;
  left: calc(41.65 * var(--f));
  top: calc(134.35 * var(--f));
  font-family: "Rancho", cursive;
  font-size: calc(13.97 * var(--f));
  line-height: calc(22.24 * var(--f));
  color: rgba(14, 11, 30, 0.85);
}
.fs-03__tape {
  left: calc(154.6 * var(--f));
  top: calc(181.65 * var(--f));
  width: calc(59.99 * var(--f));
  height: calc(17.5 * var(--f));
  rotate: -5deg;
  box-sizing: border-box;
  border: 0.625px solid rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(calc(2.5 * var(--f)));
          backdrop-filter: blur(calc(2.5 * var(--f)));
  box-shadow: 0 calc(0.625 * var(--f)) calc(1.875 * var(--f)) rgba(0, 0, 0, 0.08);
}

/* Dashed arrow from the photo to the toon */
.fs-03__arrow {
  left: calc(254.58 * var(--f));
  top: calc(192.9 * var(--f));
  width: calc(74.99 * var(--f));
  height: calc(37.49 * var(--f));
  clip-path: inset(0% 0% 0% 0%);
}

/* Leo, the toon. --rv is the reveal edge (in % of his width): JS sweeps it from the
   photo's side; at rest (130) he is fully shown. The scan is a light band riding just
   behind that edge, cut to his silhouette. */
.fs-03__feet {
  left: calc(313.94 * var(--f));
  top: calc(534.09 * var(--f));
  width: calc(153.72 * var(--f));
  height: calc(23.75 * var(--f));
}
.fs-03__leo {
  --rv: 130;
  left: calc(253.02 * var(--f));
  top: calc(180.41 * var(--f));
  width: calc(275.58 * var(--f));
  height: calc(368.68 * var(--f));
  transform-origin: 50% 96%;
}
.fs-03__leo img {
  width: 100%;
  height: 100%;
  -webkit-mask: linear-gradient(90deg, #000 calc((var(--rv) - 18) * 1%), transparent calc(var(--rv) * 1%));
          mask: linear-gradient(90deg, #000 calc((var(--rv) - 18) * 1%), transparent calc(var(--rv) * 1%));
}
.fs-03__scan {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) calc((var(--rv) - 24) * 1%), rgba(255, 255, 255, 0.5) calc((var(--rv) - 11) * 1%), rgba(255, 255, 255, 0) calc((var(--rv) - 3) * 1%));
  /* Leo's silhouette (the alpha of images/feat-03-leo.webp at 160px), inlined so the mask also
     works when the page is opened from disk */
  --sil: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAADWCAQAAAD8vUF6AAASiElEQVR42u2deZRW5X3HP89z7yzMDDAgsolhEVkkwSgRxZCTWjFqpXWP2iVUE03UtMeqSYxt2rRJ6+6pTTT15KQm2uXk2CaNS1pPwB73BSLEhUUCwQVlR2Sf99777R/vnWEGZuB93/vc5SXzzDkcBmbe+9zv8/s9v/33M6J/JVm2H4J+APsB7AewH8D+1Q9gP4D9APYD2L/6Acx8+QXbj+FA29IDhCik1WkKtyuDwRBB/Gd3bin/i/oB7Hu1sWM/0IZwAZtZzDp2dwEc9bPwgXRniZjLbbzM/7GW5wkYzloidnI0/8AudrOcBfyC5QhbHIbOmwINFgERHiF3cT0AISt4n/F8wDLWsZuzmUQrFniX+dzLIsAWhA5VjC8joyG6WaFKirT/ihQpUEmBJOl9/a1ahXyZ/HeeNwWO5RSGMpxRDGEUkzkS03WqZUYtC5V95x3hAc9wPYvwUO50mNvZWRnN1HJVvyIFknboWvmyeVOhzfXuO5/JhESEhIREFQoGg0dIK9/lVlp60OdvjSViMQQ0MI0Ig8XDw8NWAYWHCLmBGzGARwM+Xi5vkwPZe0LoUi2WehEYla9QkT7U6aIHG5vDW4gYLCHHcgfnAkrIfhGW1/gG4/gIO3iDJaxE2So42QJYlrDncy+jCDEOWE4YSjTE3y3mZ3yf9zKFMFO5izzdLUmxRudiRZJCBQoVSpLma3LXNXFYsbBBDOF+LiZyLLz2XQTlT36Jq3g1KyrMCkCDGMqPmUOAl6riEeLxJuezNBsIswHQAJaf8xmCDNwXEZbXOTObuzAbzckCt2cEX9nNMJkbaIyPru4BtIRcxHWEeJndtz7ncwnR4QCgRYzhDmyGRpcBxnIhI4jSfkObiab0Vcam/yoHvNlpnJF+AMBmcB/N4LLM/ceGiEH8Lo2JrZ2cARTwCQbl5LY4jWlpCxKbAS2cRWMObk+LGMfpaTOxzeAlZuVEfwJOxkuXiW3q0nAawyAnpy2cyBH1LoXH4xHm5jU+iqnpvmX6AA4mz7WHhnRvwfQB3JsrgEH9K9JH5prN0orqmQIFTMnCpO/ThdYce4LqGMAjyTdZbk/9UqBBtNOcGwWWgdtb73eglyMFRhim1LcaI47IkQIBxtUzC0M7bbnegbC+vvXAvewi37UhXQ6wKd9A61gYhxvzECGWDt7vNXG9DgA0+PjAqtwUaQGbWIPSDKT6KaowAdDEm7nlgAl4h51AKb2U4HTiwgbRxJc5lzE0MCbHG3AXm9jC49zNlnQgTANAS8QIfsosirNW8PusTANC9wAaDD4LmE0H3n4Zzvko0xDQyFJOZpf78gibguUR8TlmU6KxyqzTtMSkpZESx3F1nKBecAAjDF/IPApcSUrwPHzCogNoiTiK6diCAWgxTOFY92n1NgXj6RgGpB3OrokzPCa6t0psKlEQFakcsJtW2FYfAO7KXfLSZ4iJokthAe8SxiWERavNf7v4trCANbxTtLJohGE9K907NtwD6LGH5wp3C4aIF/jQPWeko2z8u5MaENf20UNpvG8aphz4/JKPpqH3J8jcf50ZlIovRMpuzBI3pevGrOFmvpGONESbTem8f84/49NRCPg68PkOT+C5N+TS8wdaPB5nDqWcilD32R8RPo9wIaq4HrkAQkREdHAeD9OARYQEGTO0CAkBi88PubiKcu6CxESEYSef5U/5FQYPP2PbxODhEfIyl3I5HenppWmWeplYpMxgGpavpeEL6dOhtpq/wGMlb8SJxqrHxjsCPEIWshBo5Z8IMwLQ5yEepdMTGNZ3saHB4CFaWcqoDGhQiO1MZSOG8HAoNhQRJcQ2vplJ16sQy628jygdPuWunbGSJzgj5YrNAJ+X+VR6Ujc/AC1iFC9zVIpVmyEeG5jF6uy6JtgMVVrLe/wBW/AIUqI+j+2cx2q87HxBNmOT/hXO5F185xCKAJ8NnM0LacvdPDsXhXgsYjZPO78HDT4v8imeyxa+7NN+Qjze4tPcyG6HbBaxnTs4jTezhi/7DpYGQzNz+LjDwFME/Bk/ivOxM3ajZdu5qNzv75v8jXOLZx0P8mMWZ2F75NW5qNxLqEmX6W2F6pD7FWqBPitPyMhm9V5ZNfgsv9blek3prEil+G+LdEl8YOZwAbBMDb+j5+OuWVFqIAZxT64ndUq3J9c5gJ5Qs+6KwQuV9goVSAp0u5qzaEKWthDxCZjIv3JyV/vYbJQli2ER81iagtKeoRT2CZjFfzEqo6ZP+7sVNnMp89OFME0AfQLO4L9pybDp0/5KewcX8HiaEKYHoEfIbJ7IDb5OCPdwFk+lpxumBaAl4lieZ1iO8HX6gLbySZbVW52IpZnnmZ4zfJ1U+Aaz2JlOaMmmxr7fZTpBAbJjPAKmcV9aOkAaFOgR8of8Ww6S92ASeR4PpnETGqXhuh/Nq7QXaGKTENv4GO+5D2vZVOrk7mFojn36++og/I9p1A64pkCPkHN4rADCozdhMpfHXbOxWwANhkYWM7lAyZXdzbvlnEiHW2lsnWt/VzGlgPCV49JTudJ1EZpLCjTAYJYyslD3X8+ko/Ucxwcuc7WsY4f9lxhVuELD7vwxkmuQS/5wR4EGGMRyRhSU/jppcANTXdKgdUp/lzOysPS3r5b+Cpc06IoCDdDM64wvMP110uBbHOeuas46pL/zmFBo+uukwXFc5I4GrcOT/fNizl/txbD7MsaVOm2d0d+pnOJWvqUY3J/JJ131lXMH4NW5tXiqJRXkald2sQshUpZtq2jJudFdNakgu5jBChd5NNZJ2/8v8gitdQJf2WJv4Vl+4CLBKSkFWiKO4w0HM+KyL8CGk3k5qXfGOqDgP0J01BV8YCgRcUlyrklGgQZo4FUmF17/6z1et4pp7E12E9rE7vtZdQlf+fI5hlOTYmATG3Dn1o360ps6MzcpE9uEXl6YncXsLNLyUn8s6fEnp8Bt2KwTux3JYR+PJ/KlQDBcyys01iF8hq1cz11Jjz+pHlhu+H8j19NeN4p02fWxjLN5O7ktYh306NjDt1mZSSWmW2vkbRfuBDcjkodzbIHyECpt0jfBxagi6yTqP5YhdWXKGSIaGe/i0rFOaHhK3emCETC5GAACTC1ct7ZK1uRiOFQ7x/5QZ84EONYF31gH2rxhfF2JkE4AP4JNbkVZJ+H0UXWkA+7b9wgXM+9cADg87fGLKa0hjEx+8C4APAq/zvzRZUXGc8E5bgCsR4dWBIxJHhWxTgaA1qMSAzA2Oee4AHA09bomMjRpEZh1oAWOrEvwfOBi3uTOZCi4AHB43SkxnWsAR/DHtCTRBm1iWUbuo/eS1Y+0MSzJ/q2DUxx80AawRVenW5KNT00O4KCD+KIDnqboYaUomTZoHeTlt/Z5O65nY8F1RB/L6CQA+okBHNaHHRLh8RpBoXVEsZU1PJPkkJOz8LA+Hi/gOVoKHlq6nBksyw/Ask+jdxrzgIWMKbCEFtACNOQrREb2GWraxhoX/o5UAUxshqYHIKyj5MLj5gCmanefGYCdQ+hNH8OZB9GUswg5lLPgyPwBHNanjTKCITyQa8A9wrCCR/sQEgYYmm9yUQR9qtERcA7XMj/7rpLd4FvOObQchJGH5HkHlvNTBx7kf08G1uSmCUYY5rOK4/t4TwO05i1EGmk+CICjkioJDiz1FgYc0pAwxRwRXp4kGJCvstxE0yFltPIDsHRQf0uDu5q0mo+xoc8cLAG780ywFNDB9oP8RDNN7M2ZAgdiumabHLg255uhaoENB2xtX1eMFtrZRb4DqUZ1KSqmFwJYm2+WvgVWHgCgic88BCbxYa4A7ubjXQD2dpkszT835uUeZxsBP+NhRIiA03Jm4QZO6zrMv2dBD7XZA17MV42JgKfYg9e1iQh4hnswsRE1I6HHMcmMTgMMYUrMEwHf63HdlIv/l+RtiVjW8Ey31yyrzy/xFj4dhAwhSHRNm8SXTDshHVj+k3Wc2m0vEfBIj8PPLbXj3m657gY4kYA/YRcD8HiMLTUzSQQ8y09rphEBK/lfPJr5NdcwkjFdzgXFNEneWfohlkd4uqvNq0WM43v8ipn8NVdxWwIWLgP4k0RMVuIqruAaTmEIP8J2ARjgcT/Lko9u8Z24jK7kJdrjkkOD4UtM4nTeAMpjuWtn4W1sTfT7ISEPAB4vMrGrKDKggVf5uou+qtZJ2eibnMeHXTU/hoBTmYjPAGBHok/fyDuJdtmBoRWfOUwk6ILPZylz2e7CzWGdaPseT3EW2+JpSQZo5AICIiwf1kxBBtjIOqIE9UQ7MQQEXBEfrijhs5QzeMdNX1/rKDzt8wLnsAkfERDGwJFoOJkF3mczWxIIuE537m48AgIMDSzmTN5zNrjK6dCBSfpJPG7gSQ2UJ6Pp+o2imuY3RJJ26mihhVI8paHaTwi1UafLyNN4LZEkbdYdGuRyzoP7sRcn6k7drVYhX+ixGl9eCiUtlxW6X+qaFlLdCiQtkZUVGqxbdJ1Gux6T4bYFqO2mclgifJYxocaLQohdnM0rLGJqjU0FBGxhElu6hRU8tzMPfed5xxYLsSXcxqCa55obQtq4gIFMTdDS1tBGO1sQBi9Wayj2VK8opkGLaOsj8ajy1czABPRigKY4aqN0fOPp1hc1JY6I7GFvIoengKY0syNsyi3Yk943u9id2FZPNUPMppoTsI61mASso1gLNDVfJyE7eadeAbTs5StAA2EsVKo/gmWsIqqpdXZEgMHjXjYmdVnlN5jPCp2lV7tpdpVrgR2SVqhN6CFJQVWaYBir7nt0izzZNCfMZTFTrlEX6mFtrFoN/qU+KmTVpgdrsGVW6x5NO1zmyiE0TF+oEIZQkRboIjWKLtqZoTu1p6LfDyU9qU+rrcfT63qyoZEnX6hFW2Ib99AQzBaxCdY5WBItr+gaKEm6TsjKy2KyYRZ15iIkxFDqJYbcu/AJ2YLX5UkRIT4e6yqSpgZYh4clzCKxzmaYJ1pifYUKxWbW7vf6IqxQHbHA2pqkfsEnXNs4D0AVQL2Wbfv9pKGcKFeJ6hNUfFB1BaDBsK5CWn2r1y7Payp80gdsOjwBFOsrBPD1A6wPYVhRQfNsARv5ILv3spnBFwITKrRep/eSWa2KSxKa8DJsCpnRhGsrX48qrMgaCSSd30OHMzJq028qUmMiRXpFE7IZz5zV6ApLxFeYWzHFi8/3oDaLmMO4ivzSBnEC/0GjizbbxWDh8qDSb1TcbM5iOInB3djQAL9XcaKRpcRMvk6YxdvZjMTH7Qyo2C1lgCM5ptvPh8AJVSQa+UTcwOgsOMxmMH4iZA7nVRXXCDF8pAtAgxhYVdmiIWIgN2XR39pmQH0tfKfK/iwCxnYDEIYztOopcldlMV/WpgyfR8R9TKmBFsbs15+rsapDKIeTHqQlbSq0KcMX8C3m1UQHI3vI4WFVJ7lZQo7nQZRuwa1NeTTyX/JXNcwZNnE3Gh2yrPtQz7+QHxKlqdDYFNs5BHyVb9ccFG/vAdnQmvcwj39JE0KbInw3cxshtoatl7uBmG63XnOCfVzOD4hq2kduppwndKWkUk15WWWvdKDZ8ScZeXqx5iQlqUPSrWm5921Kmt9J3EuIlyCi68UVHhYxiZkJxpj5BHyNuekMjbYpXQz30ZBY+g3pYucjEvW8Lx/C3VUqQrkB6BEyj084OO/AWQeusjV+bRo6oSWN2ZV3O9nq9m41oUmp2RJyKye5Z2ObglS6hfbEzCIiNnR9t4NSwjSlcuL7t1yM4ksTQEPEUM5KKJwiAhqwvBIrCYa1vIclSJQcaRGzGeHaV22dl/kPo7XmLYqQCIvPDm5iIZYQYdjN51kd154HNdOQYUCyZovZsHBzzfI3wuBhWc7fcTy3dcVFIgwLOIEv8izg19iJxiBsCgMsnacSTa9ReQ4k7dQD+oyaeslqsV05MndpU81lD5Fmulao3QM4QZFKVdkgUZy89pKOiz/H7yUgZOTHqUZj9aykDgVVHVWokhTnexUWQCOjRj3bA5iSAgUKFSrq9hUqjP+3M872mAYL+fIOms1n1SDUrl90g6XUy+d3PqFzB+W1SgNl3GYLug9goqG6Wc9pa8W0sVX/o8uqSEazQkaf03xtq4IC1+j7mtgtYa6QhTbd1wgmMInxHM1w2mmnjaZYjooSu9nBJt5mGUtYEqd8VK6jdf7kaKZzAlM5imG0MwA/VpNDSuxlB9v4gHWsZiXL+DU7q3oG2U247s0THR7QyaOJhm4A7mXPfoHMsAb7NurR5Kl5PwD37ietvUQdGDIEcN8rGjorNtVH/NegBDZG+RnqExgTf1FjonquAB6oYlfXW7J4T8gVwMN22X4I+gHsB7AfwN/i9f8ANUhBIhlGJAAAAABJRU5ErkJggg==");
  -webkit-mask: var(--sil) 0 0 / 100% 100% no-repeat;
          mask: var(--sil) 0 0 / 100% 100% no-repeat;
}

.fs-03__spark--1 { left: calc(298.32 * var(--f)); top: calc(229.15 * var(--f)); width: calc(16.25 * var(--f)); height: calc(16.25 * var(--f)); }
.fs-03__spark--2 { left: calc(489.54 * var(--f)); top: calc(214.15 * var(--f)); width: calc(11.25 * var(--f)); height: calc(11.25 * var(--f)); }
.fs-03__spark--3 { left: calc(497.04 * var(--f)); top: calc(376.62 * var(--f)); width: calc(8.75 * var(--f)); height: calc(8.75 * var(--f)); }

/* Toolbar: tools, the style picker and the lime "Animate" button */
.fs-03__toolbar,
.fs-03__chip {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  border: 0.75px solid #fff;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(calc(6.25 * var(--f)));
          backdrop-filter: blur(calc(6.25 * var(--f)));
  box-shadow: 0 calc(8.75 * var(--f)) calc(18.75 * var(--f)) rgba(0, 0, 0, 0.45), inset 0 calc(0.625 * var(--f)) calc(0.625 * var(--f)) #fff;
  font-weight: 600;
  color: #0e0b1e;
  white-space: nowrap;
}
.fs-03__toolbar {
  left: calc(242.9 * var(--f));
  top: calc(111.67 * var(--f));
  gap: calc(3.75 * var(--f));
  padding: calc(5 * var(--f));
  border-radius: calc(12.5 * var(--f));
  font-size: calc(8.75 * var(--f));
  line-height: calc(11 * var(--f));
}
.fs-03__tool {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(23.75 * var(--f));
  height: calc(23.75 * var(--f));
  border-radius: calc(6.87 * var(--f));
}
.fs-03__tool.is-on { background: rgba(14, 11, 30, 0.07); }
.fs-03__tool img { width: calc(12.5 * var(--f)); height: calc(12.5 * var(--f)); }
.fs-03__div {
  flex: none;
  width: calc(0.625 * var(--f));
  height: calc(15 * var(--f));
  background: rgba(14, 11, 30, 0.12);
}
.fs-03__style {
  display: flex;
  align-items: center;
  gap: calc(5 * var(--f));
  padding: calc(5.62 * var(--f)) calc(6.25 * var(--f)) calc(5.62 * var(--f)) calc(7.5 * var(--f));
  border-radius: calc(6.87 * var(--f));
  background: rgba(14, 11, 30, 0.05);
}
.fs-03__dot {
  width: calc(5.62 * var(--f));
  height: calc(5.62 * var(--f));
  border-radius: 50%;
  background: #fff;
}
.fs-03__style img { width: calc(6.25 * var(--f)); height: calc(3.75 * var(--f)); }
.fs-03__animate {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(4.37 * var(--f));
  padding: calc(6.25 * var(--f)) calc(10 * var(--f));
  border-radius: calc(8.12 * var(--f));
  background: #d4ff3f;
  box-shadow: 0 calc(3.75 * var(--f)) calc(10 * var(--f)) rgba(155, 203, 0, 0.45), inset 0 calc(0.625 * var(--f)) calc(0.625 * var(--f)) rgba(255, 255, 255, 0.6);
}
.fs-03__animate img { width: calc(8.75 * var(--f)); height: calc(8.75 * var(--f)); }
.fs-03__ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 calc(1.5 * var(--f)) rgba(212, 255, 63, 0.9);
  opacity: 0;
}

/* "Now in every episode" chip */
.fs-03__chip {
  left: calc(520.53 * var(--f));
  top: calc(157.91 * var(--f));
  gap: calc(5 * var(--f));
  padding: calc(3.75 * var(--f)) calc(7.5 * var(--f)) calc(3.75 * var(--f)) calc(3.75 * var(--f));
  border-radius: calc(10 * var(--f));
  font-size: calc(8.12 * var(--f));
  line-height: calc(10 * var(--f));
}
.fs-03__chip img { width: calc(16.25 * var(--f)); height: calc(16.25 * var(--f)); border-radius: 50%; }

/* Episode cards and the product card: green-tinted glass with a 55% white rim outside
   the Figma box (the element is Figma's box, so children use Figma coordinates). Figma's
   drop shadow also shows through the see-through rim, so it is a blurred plate (.fs-03__shade)
   under the rim rather than a box-shadow. */
.fs-03__ep,
.fs-03__prod { --o: 6.756; isolation: isolate; }
.fs-03__ep::before,
.fs-03__prod::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: calc(var(--r) * var(--f));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.93), rgba(229, 250, 224, 0.9));
  -webkit-backdrop-filter: blur(calc(10.13 * var(--f)));
          backdrop-filter: blur(calc(10.13 * var(--f)));
}
.fs-03__ep::after,
.fs-03__prod::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: calc(var(--o) * -1 * var(--f));
  padding: calc(var(--o) * var(--f));
  border-radius: calc((var(--r) + var(--o)) * var(--f));
  background: rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 calc(1.69 * var(--f)) calc(1.69 * var(--f)) rgba(255, 255, 255, 0.9);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.fs-03__shade {
  position: absolute;
  z-index: -1;
  inset: calc(var(--o) * -1 * var(--f));
  border-radius: calc((var(--r) + var(--o)) * var(--f));
  background: rgba(0, 0, 0, var(--sa));
  filter: blur(calc(var(--sb) / 2 * var(--f)));
  translate: 0 calc(var(--sb) * var(--f));
}
.fs-03__ep {
  --r: 21.25;
  --sa: 0.5;
  --sb: 13.75;
  width: calc(122.48 * var(--f));
  height: calc(172.47 * var(--f));
}
.fs-03__ep--a { left: calc(529.54 * var(--f)); top: calc(187.9 * var(--f)); rotate: -4deg; }
.fs-03__ep--b { left: calc(516.47 * var(--f)); top: calc(357.84 * var(--f)); rotate: 3deg; }
.fs-03__shot {
  position: absolute;
  left: calc(5 * var(--f));
  top: calc(5 * var(--f));
  width: calc(112.48 * var(--f));
  height: calc(127.48 * var(--f));
  overflow: hidden;
  border-radius: calc(16.87 * var(--f));
  background: #fff;
  box-shadow: 0 calc(3.75 * var(--f)) calc(8.75 * var(--f)) rgba(0, 0, 0, 0.18);
}
.fs-03__shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
}
.fs-03__shot .fs-03__alt { opacity: 0; }
.fs-03__shot::after {
  content: "";
  position: absolute;
  inset: 0;
  border: calc(2.5 * var(--f)) solid #fff;
  border-radius: inherit;
}
.fs-03__lbl { position: absolute; inset: 0; }
.fs-03__num,
.fs-03__title,
.fs-03__arrows { position: absolute; left: calc(11.25 * var(--f)); }
.fs-03__num {
  top: calc(139.97 * var(--f));
  font-size: calc(6.25 * var(--f));
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: 0.1em;
  color: rgba(14, 11, 30, 0.6);
}
.fs-03__title {
  top: calc(148.72 * var(--f));
  font-size: calc(9.37 * var(--f));
  font-weight: 700;
  line-height: 1.26;
  color: #0e0b1e;
}
.fs-03__arrows {
  left: calc(86.24 * var(--f));
  top: calc(149.97 * var(--f));
  width: calc(25 * var(--f));
  height: calc(8.75 * var(--f));
}

/* Product card: the sneaker as a toon prop, the real photo pinned on its corner */
.fs-03__prod {
  --r: 18.9;
  --sa: 0.55;
  --sb: 12.6;
  left: calc(113.36 * var(--f));
  top: calc(385.12 * var(--f));
  width: calc(135.43 * var(--f));
  height: calc(188.97 * var(--f));
  color: #0e0b1e;
}
.fs-03__toon {
  position: absolute;
  left: calc(5.25 * var(--f));
  top: calc(5.25 * var(--f));
  width: calc(124.93 * var(--f));
  height: calc(110.23 * var(--f));
  overflow: hidden;
  border-radius: calc(14.7 * var(--f));
  background: #e9e9ec;
}
.fs-03__toon > img {
  position: absolute;
  left: -6%;
  top: -16.01%;
  width: 112%;
  height: 126.93%;
}
.fs-03__toon .fs-03__real { opacity: 0; }
.fs-03__toon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.06);
}
.fs-03__tog {
  position: absolute;
  z-index: 1;
  left: calc(60.36 * var(--f));
  top: calc(6.3 * var(--f));
  display: flex;
  gap: calc(1.05 * var(--f));
  padding: calc(1.575 * var(--f));
  border-radius: calc(7.35 * var(--f));
  background: rgba(31, 31, 35, 0.85);
  -webkit-backdrop-filter: blur(calc(3.15 * var(--f)));
          backdrop-filter: blur(calc(3.15 * var(--f)));
  font-size: calc(5.77 * var(--f));
  font-weight: 600;
  line-height: 1.26;
  white-space: nowrap;
}
.fs-03__opt {
  position: relative;
  padding: calc(2.625 * var(--f)) calc(5.25 * var(--f));
  border-radius: calc(5.77 * var(--f));
  color: rgba(255, 255, 255, 0.7);
}
.fs-03__opt.is-on { background: #d4ff3f; color: #0e0b1e; }
/* The sliding lime thumb (shown once the JS takes over the toggle) */
.fs-03__thumb {
  position: absolute;
  top: calc(1.575 * var(--f));
  bottom: calc(1.575 * var(--f));
  display: none;
  border-radius: calc(5.77 * var(--f));
  background: #d4ff3f;
}
.fs-03__tog.is-live .fs-03__thumb { display: block; }
.fs-03__tog.is-live .fs-03__opt.is-on { background: none; }
.fs-03__yours {
  position: absolute;
  left: calc(90.28 * var(--f));
  top: calc(88.18 * var(--f));
  width: calc(44.09 * var(--f));
  height: calc(44.09 * var(--f));
  overflow: hidden;
  rotate: -6deg;
  border-radius: calc(11.55 * var(--f));
  background: #efeff2;
  box-shadow: 0 calc(4.2 * var(--f)) calc(9.45 * var(--f)) rgba(0, 0, 0, 0.35);
}
.fs-03__yours img {
  position: absolute;
  left: -12.5%;
  top: -15%;
  width: 125%;
  height: 125%;
}
.fs-03__yours::after {
  content: "";
  position: absolute;
  inset: 0;
  border: calc(1.575 * var(--f)) solid #fff;
  border-radius: inherit;
}
.fs-03__badge {
  position: absolute;
  left: calc(1.05 * var(--f));
  top: calc(28.34 * var(--f));
  padding: calc(1.575 * var(--f)) calc(4.2 * var(--f)) calc(1.575 * var(--f)) calc(3.67 * var(--f));
  border-radius: calc(4.72 * var(--f));
  background: rgba(14, 11, 30, 0.8);
  font-size: calc(5.25 * var(--f));
  font-weight: 600;
  line-height: 1.26;
  color: #fff;
  white-space: nowrap;
}
.fs-03__ptitle,
.fs-03__psub,
.fs-03__peyebrow,
.fs-03__pbig { position: absolute; left: calc(9.45 * var(--f)); line-height: 1.26; }
.fs-03__ptitle { top: calc(123.88 * var(--f)); font-size: calc(9.97 * var(--f)); font-weight: 600; letter-spacing: -0.01em; }
.fs-03__psub { top: calc(137.53 * var(--f)); font-size: calc(6.82 * var(--f)); color: rgba(14, 11, 30, 0.5); }
.fs-03__peyebrow { top: calc(156.42 * var(--f)); font-size: calc(5.25 * var(--f)); font-weight: 600; letter-spacing: 0.1em; color: rgba(14, 11, 30, 0.5); }
.fs-03__pbig { top: calc(164.29 * var(--f)); font-size: calc(10.5 * var(--f)); font-weight: 700; letter-spacing: -0.015em; }
.fs-03__convert {
  position: absolute;
  left: calc(96.58 * var(--f));
  top: calc(150.12 * var(--f));
  display: grid;
  place-items: center;
  width: calc(29.4 * var(--f));
  height: calc(29.4 * var(--f));
  border-radius: calc(9.45 * var(--f));
  background: #0e0b1e;
  box-shadow: 0 calc(3.15 * var(--f)) calc(7.35 * var(--f)) rgba(0, 0, 0, 0.25);
}
.fs-03__convert img { width: calc(13.65 * var(--f)); height: calc(13.65 * var(--f)); }

/* ---- stage 04 ---- */
/* -- fs-04: take stack + 3D scene carousel (Figma 547:128) -- */
.fs-04 .fs4-peek,
.fs-04 .fs4-card,
.fs-04 .fs4-peek__shot,
.fs-04 .fs4-peek__take,
.fs-04 .fs4-peek__bar,
.fs-04 .fs4-peek__depth,
.fs-04 .fs4-card__shot,
.fs-04 .fs4-pill,
.fs-04 .fs4-card__cap,
.fs-04 .fs4-card__actions,
.fs-04 .fs4-floor,
.fs-04 .fs4-ring,
.fs-04 .fs4-item,
.fs-04 .fs4-num,
.fs-04 .fs4-haze,
.fs-04 .fs4-label {
  position: absolute;
  box-sizing: border-box;
  margin: 0;
}
.fs-04 img {
  display: block;
  max-width: none;
}
.fs-04 .fs4-dot {
  display: block;
  flex: none;
  border-radius: 50%;
}

/* ---- the take stack. Takes 1 and 3 are the same card as take 2, tilted 10 and 5 degrees
   round their centres. Children sit in the padding box, as in Figma. ---- */
.fs-04 .fs4-peek {
  width: calc(373.847 * var(--f));
  height: calc(327.784 * var(--f));
  overflow: hidden;
  border: 1.267px solid rgba(255, 255, 255, 0.8);
  border-radius: calc(34.714 * var(--f));
  background: linear-gradient(180deg, rgba(237, 250, 255, 0.6), rgba(191, 229, 255, 0.45));
  -webkit-backdrop-filter: blur(calc(7.6 * var(--f)));
          backdrop-filter: blur(calc(7.6 * var(--f)));
  box-shadow: 0 calc(16.416 * var(--f)) calc(32.832 * var(--f)) calc(-4.378 * var(--f)) rgba(0, 0, 0, 0.55);
}
.fs-04 .fs4-peek--1 {
  left: calc(132.33 * var(--f));
  top: calc(90.79 * var(--f));
  rotate: 10deg;
}
.fs-04 .fs4-peek--3 {
  left: calc(171.73 * var(--f));
  top: calc(78.75 * var(--f));
  rotate: 5deg;
}
.fs-04 .fs4-peek__shot {
  left: calc(12.08 * var(--f));
  top: calc(12.08 * var(--f));
  width: calc(347.144 * var(--f));
  height: calc(195.602 * var(--f));
  overflow: hidden;
  border-radius: calc(24.033 * var(--f));
}
.fs-04 .fs4-peek__shot img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100.95%;
  height: 100%;
}
.fs-04 .fs4-peek--3 .fs4-peek__shot img {
  left: -22.69%;
  top: -14%;
  width: 161.53%;
  height: 160%;
}
.fs-04 .fs4-peek__take {
  left: calc(23.03 * var(--f));
  top: calc(23.03 * var(--f));
  display: flex;
  align-items: center;
  gap: calc(3.283 * var(--f));
  padding: calc(4.378 * var(--f)) calc(7.661 * var(--f)) calc(4.378 * var(--f)) calc(6.566 * var(--f));
  border-radius: calc(8.755 * var(--f));
  background: rgba(0, 0, 0, 0.42);
  -webkit-backdrop-filter: blur(calc(3.283 * var(--f)));
          backdrop-filter: blur(calc(3.283 * var(--f)));
  color: #fff;
  font-size: calc(8.208 * var(--f));
  font-weight: 600;
  line-height: normal;
  white-space: nowrap;
}
.fs-04 .fs4-peek__take .fs4-dot {
  width: calc(4.378 * var(--f));
  height: calc(4.378 * var(--f));
  background: rgba(255, 255, 255, 0.6);
}
.fs-04 .fs4-peek__bar {
  display: block;
  height: calc(7.661 * var(--f));
  border-radius: calc(3.83 * var(--f));
  background: rgba(14, 11, 30, 0.08);
}
.fs-04 .fs4-peek__bar--a {
  left: calc(54.81 * var(--f));
  top: calc(229.57 * var(--f));
  width: calc(261.693 * var(--f));
}
.fs-04 .fs4-peek__bar--b {
  left: calc(101.54 * var(--f));
  top: calc(249.28 * var(--f));
  width: calc(168.231 * var(--f));
}
/* Figma "Depth": black 22% (take 1) / 10% (take 3) at 50% opacity over the whole card */
.fs-04 .fs4-peek__depth {
  display: block;
  inset: -1.267px;
  background: rgba(0, 0, 0, 0.11);
}
.fs-04 .fs4-peek--3 .fs4-peek__depth {
  background: rgba(0, 0, 0, 0.05);
}

/* ---- take 2: the scene card ---- */
.fs-04 .fs4-card {
  left: calc(214.409 * var(--f));
  top: calc(66.711 * var(--f));
  width: calc(373.847 * var(--f));
  height: calc(327.784 * var(--f));
  overflow: hidden;
  border: 1.267px solid rgba(255, 255, 255, 0.95);
  border-radius: calc(34.714 * var(--f));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.93), rgba(224, 242, 255, 0.9));
  -webkit-backdrop-filter: blur(calc(10.133 * var(--f)));
          backdrop-filter: blur(calc(10.133 * var(--f)));
  box-shadow:
    inset 0 calc(1.689 * var(--f)) calc(1.689 * var(--f)) rgba(255, 255, 255, 0.9),
    0 calc(20.028 * var(--f)) calc(40.055 * var(--f)) calc(-5.341 * var(--f)) rgba(0, 0, 0, 0.55);
}
.fs-04 .fs4-card__shot {
  left: calc(12.08 * var(--f));
  top: calc(12.09 * var(--f));
  width: calc(347.144 * var(--f));
  height: calc(195.602 * var(--f));
  overflow: hidden;
  border-radius: calc(24.033 * var(--f));
}
.fs-04 .fs4-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fs-04 .fs4-pill {
  top: calc(10.68 * var(--f));
  display: flex;
  align-items: center;
  gap: calc(4.006 * var(--f));
  padding: calc(4.006 * var(--f)) calc(6.676 * var(--f));
  border: 0.668px solid rgba(255, 255, 255, 0.22);
  border-radius: calc(8.679 * var(--f));
  background: rgba(0, 0, 0, 0.42);
  -webkit-backdrop-filter: blur(calc(4.673 * var(--f)));
          backdrop-filter: blur(calc(4.673 * var(--f)));
  color: #fff;
  font-size: calc(8.011 * var(--f));
  font-weight: 600;
  line-height: normal;
  white-space: nowrap;
}
.fs-04 .fs4-pill--take {
  left: calc(10.68 * var(--f));
  padding-right: calc(8.011 * var(--f));
}
.fs-04 .fs4-pill--dur {
  left: calc(305.09 * var(--f));
}
.fs-04 .fs4-pill .fs4-dot {
  width: calc(4.673 * var(--f));
  height: calc(4.673 * var(--f));
  background: #7dbe00;
}
.fs-04 .fs4-card__cap {
  left: calc(25.44 * var(--f));
  top: calc(225.04 * var(--f));
  width: calc(320.44 * var(--f));
  color: #0e0b1e;
  font-size: calc(15.354 * var(--f));
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: calc(-0.2303 * var(--f));
  text-align: center;
}
.fs-04 .fs4-card__cap span {
  color: rgba(14, 11, 30, 0.4);
}
/* Figma draws a faint #bfe6f7 hairline round the button row (and clips to it) */
.fs-04 .fs4-card__actions {
  left: calc(90.86 * var(--f));
  top: calc(278.45 * var(--f));
  display: flex;
  align-items: center;
  gap: calc(8.011 * var(--f));
}
.fs-04 .fs4-btn {
  display: flex;
  align-items: center;
  gap: calc(5.341 * var(--f));
  padding: calc(8.011 * var(--f)) calc(13.352 * var(--f)) calc(8.011 * var(--f)) calc(12.017 * var(--f));
  border-radius: calc(16.022 * var(--f));
  font-size: calc(10.681 * var(--f));
  font-weight: 600;
  line-height: normal;
  white-space: nowrap;
}
.fs-04 .fs4-btn img {
  width: calc(10.681 * var(--f));
  height: calc(10.681 * var(--f));
}
.fs-04 .fs4-btn--swap {
  border: 0.668px solid rgba(14, 11, 30, 0.08);
  background: rgba(14, 11, 30, 0.06);
  color: rgba(14, 11, 30, 0.85);
}
.fs-04 .fs4-btn--approve {
  background: #16181d;
  color: #fff;
  box-shadow: 0 calc(4.006 * var(--f)) calc(10.681 * var(--f)) rgba(155, 203, 0, 0.4);
}

/* ---- scene carousel: a real 3D cylinder, fitted to Figma's drawing. Slots are 13.33deg apart
   (27 round), radius 447.6, seen through a 489 perspective from above (tilted 10.76deg).
   Each card turns round the axis by its --a (slots from the front, set by data-reel);
   the front card centre is at 379.67, 515.9. Cards past 5 slots face away (hidden). ---- */
.fs-04 .fs4-floor {
  display: block;
  left: calc(166.25 * var(--f));
  top: calc(571.24 * var(--f));
  width: calc(426.816 * var(--f));
  height: calc(28.454 * var(--f));
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.36);
  filter: blur(calc(7.114 * var(--f)));
}
.fs-04 .fs4-ring {
  inset: 0;
  perspective: calc(488.95 * var(--f));
  perspective-origin: calc(379.67 * var(--f)) calc(515.9 * var(--f));
  pointer-events: none;
}
.fs-04 .fs4-item {
  --far: max(var(--a), -1 * var(--a));            /* slots from the front, either side */
  left: calc(332.485 * var(--f));                  /* 379.67 - 94.37 / 2 */
  top: calc(466.8 * var(--f));                     /* 515.9 - 98.2 / 2 */
  width: calc(94.37 * var(--f));
  height: calc(98.2 * var(--f));
  overflow: hidden;
  border-radius: calc(17.2 * var(--f));
  background: #2c6fc4;
  outline: calc(1.642 * var(--f)) solid rgba(255, 255, 255, 0.24);
  outline-offset: calc(-0.821 * var(--f));
  box-shadow: 0 calc(6.566 * var(--f)) calc(9.85 * var(--f)) rgba(0, 0, 0, 0.338);
  transform: rotateX(-10.755deg) translateZ(calc(-447.64 * var(--f))) rotateY(calc(var(--a) * 13.3333deg)) translateZ(calc(447.64 * var(--f)));
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transition: outline-color 0.35s ease, outline-width 0.35s ease, outline-offset 0.35s ease, box-shadow 0.35s ease;
}
.fs-04 .fs4-item.is-front {
  outline: calc(2.462 * var(--f)) solid #fff;
  outline-offset: calc(-1.231 * var(--f));
  box-shadow: 0 calc(6.566 * var(--f)) calc(15.322 * var(--f)) rgba(0, 0, 0, 0.6), 0 0 calc(12.038 * var(--f)) rgba(212, 255, 63, 0.5);
}
.fs-04 .fs4-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Figma "Depth haze": white, 10% more per slot from the front */
.fs-04 .fs4-haze {
  display: block;
  inset: 0;
  background: #fff;
  opacity: min(0.4, var(--far) * 0.1);
}
.fs-04 .fs4-num {
  left: calc(9.7 * var(--f));
  top: calc(9.7 * var(--f));
  padding: calc(1.642 * var(--f)) calc(4.378 * var(--f));
  border: 0.547px solid rgba(255, 255, 255, 0.3);
  border-radius: calc(4.925 * var(--f));
  background: rgba(255, 255, 255, 0.09);
  -webkit-backdrop-filter: blur(calc(4.378 * var(--f)));
          backdrop-filter: blur(calc(4.378 * var(--f)));
  box-shadow: inset 0 0.547px 0.547px rgba(255, 255, 255, 0.18), 0 calc(4.378 * var(--f)) calc(9.85 * var(--f)) rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: calc(6.019 * var(--f));
  font-weight: 600;
  line-height: normal;
  white-space: nowrap;
  transition: background-color 0.35s ease, color 0.35s ease;
}
.fs-04 .fs4-item.is-front .fs4-num {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: none;
  color: #0e0b1e;
}

.fs-04 .fs4-label {
  left: calc(298.677 * var(--f));
  top: calc(601.882 * var(--f));
  display: flex;
  align-items: center;
  gap: calc(4.378 * var(--f));
  color: rgba(255, 255, 255, 0.85);
  font-size: calc(7.661 * var(--f));
  font-weight: 500;
  line-height: normal;
  white-space: nowrap;
}
.fs-04 .fs4-label .fs4-dot {
  width: calc(3.83 * var(--f));
  height: calc(3.83 * var(--f));
  background: #7dbe00;
}

/* ---- stage 05 ---- */
/* Feature 05 stage: you're the director (Figma 548:128). Three reference cards, the shot
   editor with its rich-text prompt, and the finished shot. Moved by data-mentions. */
.fs-05 * { box-sizing: border-box; }
.fs-05 img { display: block; max-width: none; }
.fs-05 span, .fs-05 div { line-height: normal; }

/* Shared card: tinted white glass, blur 10, a white edge and a soft drop shadow */
.fs-05 .fs-05__card {
  position: absolute;
  overflow: hidden;
  border: calc(1.267 * var(--f)) solid rgba(255, 255, 255, 0.95);
  border-radius: calc(19.388 * var(--f));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.93), rgba(229, 245, 255, 0.9));
  -webkit-backdrop-filter: blur(calc(10.133 * var(--f)));
          backdrop-filter: blur(calc(10.133 * var(--f)));
  box-shadow: 0 calc(12.464 * var(--f)) calc(24.928 * var(--f)) calc(-5.54 * var(--f)) rgba(0, 0, 0, 0.45);
  color: #0e0b1e;
}
.fs-05 .fs-05__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 calc(1.689 * var(--f)) calc(1.689 * var(--f)) rgba(255, 255, 255, 0.9);
}

/* ---- reference cards (tilted about their centres) ---- */
.fs-05 .fs-05__ref { width: calc(109.406 * var(--f)); height: calc(135.719 * var(--f)); }
.fs-05 .fs-05__ref--theo { left: calc(119.75 * var(--f)); top: calc(96.4 * var(--f)); rotate: 7deg; }
.fs-05 .fs-05__ref--muffin { left: calc(237.48 * var(--f)); top: calc(88.1 * var(--f)); rotate: -5deg; }
.fs-05 .fs-05__ref--kitchen { left: calc(355.19 * var(--f)); top: calc(95.02 * var(--f)); rotate: 3deg; }
.fs-05 .fs-05__ref-pic {
  position: absolute;
  left: calc(3.58 * var(--f));
  top: calc(3.58 * var(--f));
  width: calc(99.712 * var(--f));
  height: calc(101.097 * var(--f));
  overflow: hidden;
  border-radius: calc(15.234 * var(--f));
}
.fs-05 .fs-05__ref-pic img { position: absolute; left: -7.5%; width: 115%; height: 169.07%; }
.fs-05 .fs-05__ref--theo .fs-05__ref-pic img { top: -5.79%; }
.fs-05 .fs-05__ref--muffin .fs-05__ref-pic img { top: -17.63%; }
.fs-05 .fs-05__ref--kitchen .fs-05__ref-pic img { left: -81.88%; top: -10%; width: 199.82%; height: 110%; }
.fs-05 .fs-05__ref-name {
  position: absolute;
  left: calc(9.81 * var(--f));
  top: calc(109.52 * var(--f));
  font-size: calc(10.387 * var(--f));
  font-weight: 600;
  white-space: nowrap;
}
.fs-05 .fs-05__ref-kind {
  position: absolute;
  left: calc(58.28 * var(--f));
  top: calc(112.29 * var(--f));
  font-size: calc(7.617 * var(--f));
  font-weight: 500;
  color: rgba(14, 11, 30, 0.45);
  white-space: nowrap;
}
.fs-05 .fs-05__ref--kitchen .fs-05__ref-kind { left: calc(76.29 * var(--f)); }

/* ---- shot editor ---- */
.fs-05 .fs-05__editor {
  left: calc(91.37 * var(--f));
  top: calc(222.43 * var(--f));
  width: calc(540.107 * var(--f));
  height: calc(224.352 * var(--f));
  border-radius: calc(23.543 * var(--f));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.93), rgba(222, 247, 242, 0.9));
  box-shadow: 0 calc(20.773 * var(--f)) calc(41.547 * var(--f)) calc(-5.54 * var(--f)) rgba(0, 0, 0, 0.55);
}
.fs-05 .fs-05__head {
  position: absolute;
  left: calc(20.89 * var(--f));
  top: calc(18.12 * var(--f));
  display: flex;
  align-items: center;
  gap: calc(6.924 * var(--f));
  font-size: calc(10.387 * var(--f));
  white-space: nowrap;
}
.fs-05 .fs-05__spark { width: calc(11.079 * var(--f)); height: calc(11.079 * var(--f)); }
.fs-05 .fs-05__shot { font-weight: 600; }
.fs-05 .fs-05__title { font-weight: 400; color: rgba(14, 11, 30, 0.5); }
.fs-05 .fs-05__dur {
  position: absolute;
  left: calc(479.98 * var(--f));
  top: calc(15.35 * var(--f));
  padding: calc(4.155 * var(--f)) calc(8.309 * var(--f));
  border-radius: calc(8.309 * var(--f));
  background: rgba(14, 11, 30, 0.06);
  font-size: calc(9.002 * var(--f));
  font-weight: 600;
  color: rgba(14, 11, 30, 0.8);
}

/* the prompt: words, @-mention chips, a place chip and option tags, wrapping like rich text */
.fs-05 .fs-05__prompt {
  position: absolute;
  left: calc(20.89 * var(--f));
  top: calc(47.9 * var(--f));
  width: calc(495.79 * var(--f));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  gap: calc(8.309 * var(--f)) calc(4.847 * var(--f));
  white-space: nowrap;
}
.fs-05 .fs-05__w { font-size: calc(17.311 * var(--f)); font-weight: 500; color: #0e0b1e; }
.fs-05 .fs-05__tok,
.fs-05 .fs-05__place {
  display: flex;
  align-items: center;
  gap: calc(5.54 * var(--f));
  padding: calc(3.462 * var(--f)) calc(9.694 * var(--f)) calc(3.462 * var(--f)) calc(3.462 * var(--f));
  font-size: calc(13.156 * var(--f));
  font-weight: 600;
}
.fs-05 .fs-05__tok { border-radius: calc(15.234 * var(--f)); background: #0e0b1e; color: #fff; }
.fs-05 .fs-05__tok img { width: calc(20.773 * var(--f)); height: calc(20.773 * var(--f)); border-radius: 50%; }
.fs-05 .fs-05__place {
  border: calc(0.692 * var(--f)) solid rgba(14, 11, 30, 0.12);
  border-radius: calc(8.309 * var(--f));
  background: #fff;
  box-shadow: 0 calc(1.385 * var(--f)) calc(4.155 * var(--f)) rgba(0, 0, 0, 0.06);
  color: #0e0b1e;
}
.fs-05 .fs-05__place-pic {
  position: relative;
  flex: none;
  width: calc(26.313 * var(--f));
  height: calc(20.773 * var(--f));
  overflow: hidden;
  border-radius: calc(5.54 * var(--f));
}
.fs-05 .fs-05__place-pic img { position: absolute; left: -64.01%; top: -21.5%; width: 183.88%; height: 130%; }
.fs-05 .fs-05__opt {
  padding: calc(5.54 * var(--f)) calc(9.694 * var(--f)) calc(5.54 * var(--f)) calc(8.309 * var(--f));
  border-radius: calc(8.309 * var(--f));
  background: rgba(14, 11, 30, 0.06);
  font-size: calc(12.464 * var(--f));
  font-weight: 600;
  color: rgba(14, 11, 30, 0.8);
}
.fs-05 .fs-05__opt--on { background: #d4ff3f; color: #0e0b1e; }

/* typing caret (moved by data-mentions); solid while typing, blinks when idle */
.fs-05 .fs-05__caret {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(1.5 * var(--f));
  height: calc(19.4 * var(--f));
  border-radius: calc(1 * var(--f));
  background: #0e0b1e;
  opacity: 0;
  animation: fs05-blink 1s steps(1) infinite;
}
.fs-05 .fs-05__caret.is-typing { animation: none; }
@keyframes fs05-blink { 50% { visibility: hidden; } }

.fs-05 .fs-05__rule {
  position: absolute;
  left: calc(20.89 * var(--f));
  top: calc(166.31 * var(--f));
  width: calc(495.79 * var(--f));
  height: calc(0.692 * var(--f));
  background: rgba(14, 11, 30, 0.08);
}
.fs-05 .fs-05__foot {
  position: absolute;
  left: calc(20.89 * var(--f));
  top: calc(180.15 * var(--f));
  display: flex;
  align-items: center;
  gap: calc(5.54 * var(--f));
}
.fs-05 .fs-05__pill {
  padding: calc(5.54 * var(--f)) calc(9.002 * var(--f));
  border-radius: calc(9.002 * var(--f));
  background: rgba(14, 11, 30, 0.06);
  font-size: calc(9.694 * var(--f));
  font-weight: 600;
  color: rgba(14, 11, 30, 0.8);
  white-space: nowrap;
}
.fs-05 .fs-05__gen {
  position: absolute;
  left: calc(390.66 * var(--f));
  top: calc(175.31 * var(--f));
  display: flex;
  align-items: center;
  gap: calc(6.924 * var(--f));
  padding: calc(5.54 * var(--f)) calc(5.54 * var(--f)) calc(5.54 * var(--f)) calc(13.849 * var(--f));
  border-radius: calc(13.849 * var(--f));
  background: #d4ff3f;
  box-shadow: 0 calc(5.54 * var(--f)) calc(13.849 * var(--f)) rgba(155, 203, 0, 0.45);
  font-size: calc(11.079 * var(--f));
  font-weight: 600;
  color: #0e0b1e;
  white-space: nowrap;
}
.fs-05 .fs-05__gen img { width: calc(22.158 * var(--f)); height: calc(22.158 * var(--f)); }

/* ---- the finished shot ---- */
.fs-05 .fs-05__result {
  left: calc(465.28 * var(--f));
  top: calc(429.47 * var(--f));
  width: calc(207.733 * var(--f));
  height: calc(148.183 * var(--f));
  rotate: -4deg;
}
.fs-05 .fs-05__result-pic {
  position: absolute;
  left: calc(3.58 * var(--f));
  top: calc(3.58 * var(--f));
  width: calc(198.039 * var(--f));
  height: calc(111.484 * var(--f));
  overflow: hidden;
  border-radius: calc(15.234 * var(--f));
}
.fs-05 .fs-05__result-pic img { position: absolute; left: -0.43%; top: 0; width: 100.86%; height: 100%; }
.fs-05 .fs-05__label {
  position: absolute;
  left: calc(9.81 * var(--f));
  top: calc(124.76 * var(--f));
  display: flex;
  align-items: center;
  gap: calc(5.54 * var(--f));
  font-size: calc(9.694 * var(--f));
  white-space: nowrap;
}
.fs-05 .fs-05__dot { width: calc(5.54 * var(--f)); height: calc(5.54 * var(--f)); border-radius: 50%; background: #7dbe00; }
.fs-05 .fs-05__ready { font-weight: 600; }
.fs-05 .fs-05__time { font-weight: 400; color: rgba(14, 11, 30, 0.5); }

.fs-05 .fs-05__ref, .fs-05 .fs-05__result, .fs-05 .fs-05__tok, .fs-05 .fs-05__place,
.fs-05 .fs-05__opt, .fs-05 .fs-05__gen { will-change: transform; }

/* ---- stage 06 ---- */
/* -- fs-06: voices & languages (Figma "Feature 06 / visual (stage)", 550:128) -- */
.fs-06 * { box-sizing: border-box; }
.fs-06 img { display: block; max-width: none; }
.fs-06 span, .fs-06 div { line-height: normal; }

/* Rolling languages. --i is a name's row (2 = the middle, lit). Without JS (and with reduced
   motion) the rows sit flat, 101.33 apart, as in Figma. The script adds .is-drum: the names
   then sit on the face of a drum that turns toward you, like a picker wheel (each row 16deg
   round a drum of radius 371, so neighbours stay 101 apart). The middle one is lit (white,
   with Figma's glow); the others fade with distance (.is-near, .is-far); rows further out
   are clear. */
.fs-06__langs {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  perspective: calc(1669 * var(--f));
  perspective-origin: calc(240 * var(--f)) calc(338 * var(--f));
}
.fs-06__langs li {
  position: absolute;
  left: calc(82.75 * var(--f));
  top: calc((281.71 + var(--dy, 0)) * var(--f));
  transform: translateY(calc((var(--i) - 2) * 101.335 * var(--f)));
  transform-origin: 0 50%;
  backface-visibility: hidden;
  font-size: calc(89.173 * var(--f));
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.04em;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0);
  text-shadow: 0 0 calc(20.267 * var(--f)) rgba(255, 255, 255, 0), 0 calc(4.053 * var(--f)) calc(10.809 * var(--f)) rgba(10, 64, 115, 0);
  transition: color 0.6s ease, text-shadow 0.6s ease;
}
.fs-06__langs.is-drum li {
  transform: translateZ(calc(-371 * var(--f))) rotateX(calc((var(--i) - 2) * -16deg)) translateZ(calc(371 * var(--f)));
}
.fs-06__langs li.is-far { color: rgba(255, 255, 255, 0.22); }
.fs-06__langs li.is-near { color: rgba(255, 255, 255, 0.42); }
.fs-06__langs li.is-on {
  color: #fff;
  text-shadow: 0 0 calc(20.267 * var(--f)) rgba(255, 255, 255, 0.55), 0 calc(4.053 * var(--f)) calc(10.809 * var(--f)) rgba(10, 64, 115, 0.25);
}
.fs-06__langs li:lang(hi) { --dy: -2.36; font-family: "Noto Sans Devanagari", sans-serif; font-weight: 600; }
.fs-06__langs li:lang(ja) { --dy: -11.63; font-family: "Noto Sans JP", sans-serif; }

/* Shared frosted card (white 94% to the tint at 90%, blur 8, a 1px white stroke) */
.fs-06__card {
  position: absolute;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), var(--tint));
  -webkit-backdrop-filter: blur(calc(8.107 * var(--f)));
          backdrop-filter: blur(calc(8.107 * var(--f)));
  color: #0e0b1e;
}
.fs-06__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.95), inset 0 calc(1.351 * var(--f)) calc(1.351 * var(--f)) rgba(255, 255, 255, 0.9);
}

/* Voice cast card (under the phone) */
.fs-06__cast {
  --tint: rgba(224, 247, 242, 0.9);
  left: calc(498.89 * var(--f));
  top: calc(464.84 * var(--f));
  width: calc(214.827 * var(--f));
  height: calc(149.973 * var(--f));
  border-radius: calc(21.618 * var(--f));
  box-shadow: 0 calc(17.564 * var(--f)) calc(35.129 * var(--f)) calc(-4.053 * var(--f)) rgba(0, 0, 0, 0.55);
}
/* Figma fills this title with the card's own gradient, so it barely shows */
.fs-06__cast-title {
  position: absolute;
  left: calc(13.85 * var(--f));
  top: calc(13.85 * var(--f));
  font-size: calc(11.484 * var(--f));
  font-weight: 700;
  white-space: nowrap;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(224, 247, 242, 0.9));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.fs-06__auto {
  position: absolute;
  left: calc(144.91 * var(--f));
  top: calc(13.85 * var(--f));
  padding: calc(3.378 * var(--f)) calc(6.756 * var(--f));
  border-radius: calc(8.107 * var(--f));
  background: #d4ff3f;
  font-size: calc(8.107 * var(--f));
  font-weight: 600;
  white-space: nowrap;
}
.fs-06__av {
  position: absolute;
  top: calc(43.57 * var(--f));
  width: calc(37.831 * var(--f));
  height: calc(37.831 * var(--f));
  border-radius: 50%;
  box-shadow: 0 0 0 calc(1.689 * var(--f)) #fff, 0 calc(2.027 * var(--f)) calc(5.404 * var(--f)) calc(1.689 * var(--f)) rgba(0, 0, 0, 0.12);
}
.fs-06__av--ollie {
  left: calc(13.85 * var(--f));
  box-shadow: 0 0 0 calc(2.027 * var(--f)) #1e8fd4, 0 0 calc(9.458 * var(--f)) calc(2.027 * var(--f)) rgba(124, 92, 255, 0.36);
}
.fs-06__av--gran { left: calc(62.94 * var(--f)); }
.fs-06__av--pickle { left: calc(112.03 * var(--f)); }
/* Figma draws the avatar's drop shadow through its see-through fill, so the inside reads darker */
.fs-06__av--narrator { left: calc(161.12 * var(--f)); background: linear-gradient(rgba(14, 11, 30, 0.06), rgba(14, 11, 30, 0.06)), rgba(0, 0, 0, 0.12); }
.fs-06__av--narrator img {
  position: absolute;
  left: calc(11.49 * var(--f));
  top: calc(11.49 * var(--f));
  width: calc(14.862 * var(--f));
  height: calc(14.862 * var(--f));
}
.fs-06__speaking {
  position: absolute;
  left: calc(38.17 * var(--f));
  top: calc(66.54 * var(--f));
  width: calc(17.564 * var(--f));
  height: calc(17.564 * var(--f));
}
.fs-06__lbl {
  position: absolute;
  left: calc(var(--x) * var(--f));
  top: calc(88.16 * var(--f));
  font-size: calc(8.782 * var(--f));
  font-weight: 500;
  color: rgba(14, 11, 30, 0.6);
  white-space: nowrap;
}
.fs-06__lbl--on { font-weight: 600; color: #0e0b1e; }
.fs-06__rule {
  position: absolute;
  left: calc(13.85 * var(--f));
  top: calc(112.48 * var(--f));
  width: calc(185.102 * var(--f));
  height: calc(0.676 * var(--f));
  background: rgba(14, 11, 30, 0.08);
}
.fs-06__foot {
  position: absolute;
  left: calc(13.85 * var(--f));
  top: calc(123.29 * var(--f));
  font-size: calc(8.782 * var(--f));
  font-weight: 500;
  color: rgba(14, 11, 30, 0.55);
  white-space: nowrap;
}

/* Speaking card (phone) */
.fs-06__phone {
  --tint: rgba(224, 242, 255, 0.9);
  left: calc(415.13 * var(--f));
  top: calc(116.93 * var(--f));
  width: calc(261.035 * var(--f));
  height: calc(387.823 * var(--f));
  border-radius: calc(28.59 * var(--f));
  box-shadow: 0 calc(18.645 * var(--f)) calc(37.291 * var(--f)) calc(-3.729 * var(--f)) rgba(0, 0, 0, 0.55);
}
.fs-06__shot {
  position: absolute;
  left: calc(7.69 * var(--f));
  top: calc(7.69 * var(--f));
  width: calc(243.632 * var(--f));
  height: calc(302.676 * var(--f));
  border-radius: calc(21.131 * var(--f));
  overflow: hidden;
}
.fs-06__shot-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fs-06__fade {
  position: absolute;
  left: 0;
  top: calc(197.02 * var(--f));
  width: 100%;
  height: calc(105.657 * var(--f));
  background: linear-gradient(180deg, rgba(14, 11, 30, 0), rgba(14, 11, 30, 0.6));
}
.fs-06__chip {
  position: absolute;
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.42);
  -webkit-backdrop-filter: blur(calc(4.351 * var(--f)));
          backdrop-filter: blur(calc(4.351 * var(--f)));
  box-shadow: inset 0 0 0 calc(0.622 * var(--f)) rgba(255, 255, 255, 0.22);
  color: #fff;
  white-space: nowrap;
}
.fs-06__lip {
  left: calc(9.94 * var(--f));
  top: calc(9.95 * var(--f));
  gap: calc(3.729 * var(--f));
  padding: calc(3.729 * var(--f)) calc(7.458 * var(--f)) calc(3.729 * var(--f)) calc(6.215 * var(--f));
  border-radius: calc(8.08 * var(--f));
  font-size: calc(7.458 * var(--f));
  font-weight: 600;
}
.fs-06__dot { flex: none; width: calc(4.351 * var(--f)); height: calc(4.351 * var(--f)); border-radius: 50%; background: #7dbe00; }
/* the language code: pinned to the right edge, so a wider code grows leftward */
.fs-06__code {
  right: calc(9.94 * var(--f));
  top: calc(9.95 * var(--f));
  padding: calc(3.729 * var(--f)) calc(6.215 * var(--f));
  border-radius: calc(8.08 * var(--f));
  font-size: calc(7.458 * var(--f));
  font-weight: 600;
}
/* The karaoke caption, centred. Every word carries the lit pill's padding (so the line keeps
   its width as the pill moves); the negative margin takes it back out of Figma's gap. */
.fs-06__cap {
  left: 50%;
  translate: -50% 0;
  top: calc(257.93 * var(--f));
  padding: calc(6.215 * var(--f)) calc(5.593 * var(--f));
  border-radius: calc(11.187 * var(--f));
  font-size: calc(13.673 * var(--f));
  font-weight: 700;
}
.fs-06__cap span {
  padding: calc(0.622 * var(--f)) calc(4.351 * var(--f));
  border-radius: calc(4.972 * var(--f));
  transition: background-color 0.2s ease, color 0.2s ease;
}
.fs-06__cap span + span { margin-left: calc(-0.622 * var(--f)); }
.fs-06__cap .is-now { background: #d4ff3f; color: #0e0b1e; }
.fs-06__cap:lang(hi) { font-family: "Noto Sans Devanagari", sans-serif; font-weight: 600; }
.fs-06__cap:lang(ja) { font-family: "Noto Sans JP", sans-serif; }

.fs-06__voice {
  position: absolute;
  left: calc(13.9 * var(--f));
  top: calc(321.55 * var(--f));
  display: flex;
  align-items: center;
  gap: calc(8.701 * var(--f));
}
.fs-06__pause { width: calc(28.59 * var(--f)); height: calc(28.59 * var(--f)); }
.fs-06__wave {
  display: flex;
  align-items: center;
  gap: calc(2.175 * var(--f));
  width: calc(169.051 * var(--f));
  height: calc(22.374 * var(--f));
}
.fs-06__wave i {
  flex: none;
  width: calc(2.797 * var(--f));
  height: calc(var(--b) * var(--f));
  border-radius: calc(1.367 * var(--f));
  background: rgba(14, 11, 30, 0.9);
}
.fs-06__wave i.is-rest { background: rgba(14, 11, 30, 0.18); }
.fs-06__name { position: absolute; left: calc(13.9 * var(--f)); top: calc(358.84 * var(--f)); font-size: calc(10.566 * var(--f)); font-weight: 600; white-space: nowrap; }
.fs-06__desc { position: absolute; left: calc(41.25 * var(--f)); top: calc(360.08 * var(--f)); font-size: calc(9.323 * var(--f)); font-weight: 400; color: rgba(14, 11, 30, 0.5); white-space: nowrap; }
.fs-06__time { position: absolute; left: calc(199.11 * var(--f)); top: calc(360.08 * var(--f)); font-size: calc(8.701 * var(--f)); font-weight: 500; color: rgba(14, 11, 30, 0.5); white-space: nowrap; }
/* -- /fs-06 -- */

/* ---- stage 07 ---- */
/* Feature 07 — flipbook stage (Figma 551:128): an open book with a page mid-turn, a stack of
   page edges either side, a floor shadow, and two badges. js/animations.js (data-flipbook)
   turns the page by setting --a on .fs07-book (the turning page's angle: 0 flat on the right,
   180 flat on the left; Figma's still is 57.66) and draws the clips onto canvases in the faces.
   Book geometry from Figma: pages 297.53 x 335.11, spine at x 379.81; the turning page grows to
   375.83 tall at its outer edge, which is a perspective of 2320 seen from the book's centre. */
.fs-07 img { display: block; max-width: none; }
.fs-07 p { margin: 0; }

.fs-07 .fs07-floor {
  position: absolute;
  left: calc(-28.896 * var(--f));
  top: calc(486.99 * var(--f));
  width: calc(817.42 * var(--f));
  height: calc(81.429 * var(--f));
  pointer-events: none;
}

/* ---- the book ---- */
.fs-07 .fs07-book {
  --lift: clamp(0, min(var(--a) / 57.66, (180 - var(--a)) / 122.34), 1);
  position: absolute;
  inset: 0;
  perspective: calc(2320 * var(--f));
  perspective-origin: calc(379.81 * var(--f)) calc(341.36 * var(--f));
}

/* page edges: flat cards stepping outwards, each a little shorter, tinted brown */
.fs-07 .fs07-edge {
  position: absolute;
  box-sizing: border-box;
  left: calc(var(--x) * var(--f));
  top: calc(var(--y) * var(--f));
  width: calc(163.64 * var(--f));
  height: calc(var(--h) * var(--f));
  overflow: hidden;
  border: 0.783px solid rgba(255, 255, 255, 0.07);
}
.fs-07 .fs07-edge img { position: absolute; top: 0; width: 200%; height: 100%; object-fit: cover; }
.fs-07 .fs07-edge::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(58, 31, 5, var(--d));
}
.fs-07 .fs07-edge--l {
  border-radius: calc(10.962 * var(--f)) 0 0 calc(10.962 * var(--f));
  box-shadow: calc(-4.698 * var(--f)) 0 calc(12.528 * var(--f)) rgba(0, 0, 0, 0.45);
}
.fs-07 .fs07-edge--l img { left: 0; }
.fs-07 .fs07-edge--r {
  border-radius: 0 calc(10.962 * var(--f)) calc(10.962 * var(--f)) 0;
  box-shadow: calc(4.698 * var(--f)) 0 calc(12.528 * var(--f)) rgba(0, 0, 0, 0.45);
}
.fs-07 .fs07-edge--r img { left: -100%; }

/* the spread and the turning page */
.fs-07 .fs07-page,
.fs-07 .fs07-leaf {
  position: absolute;
  top: calc(173.81 * var(--f));
  width: calc(297.53 * var(--f));
  height: calc(335.11 * var(--f));
}
.fs-07 .fs07-page--l { left: calc(82.28 * var(--f)); }
.fs-07 .fs07-page--r,
.fs-07 .fs07-leaf { left: calc(379.81 * var(--f)); }
.fs-07 .fs07-leaf {
  transform-origin: 0 50%;
  transform-style: preserve-3d;
  transform: rotateY(calc(var(--a) * -1deg));
}
.fs-07 .fs07-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #111;
  box-shadow: 0 calc(20.357 * var(--f)) calc(39.148 * var(--f)) calc(-9.396 * var(--f)) rgba(0, 0, 0, 0.5);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.fs-07 .fs07-face--l { border-radius: calc(12.528 * var(--f)) 0 0 calc(12.528 * var(--f)); }
.fs-07 .fs07-face--r { border-radius: 0 calc(12.528 * var(--f)) calc(12.528 * var(--f)) 0; }
.fs-07 .fs07-face img,
.fs-07 .fs07-face canvas {
  position: absolute;
  top: 0;
  height: 100%;
}
.fs-07 .fs07-face img { width: 200%; object-fit: cover; }
.fs-07 .fs07-face--l img { left: 0; }
.fs-07 .fs07-face--r img { left: -100%; }
.fs-07 .fs07-face canvas { left: 0; display: block; width: 100%; }
/* the gutter: a soft shadow down the spine */
.fs-07 .fs07-face::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.fs-07 .fs07-face--l::after { background: linear-gradient(90deg, rgba(0, 0, 0, 0) 88%, rgba(0, 0, 0, 0.35)); }
.fs-07 .fs07-face--front::after { background: linear-gradient(270deg, rgba(0, 0, 0, 0) 88%, rgba(0, 0, 0, 0.35)); }
.fs-07 .fs07-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
/* the right page darkens under the lifted page (Figma's "clip B (under)" at full --lift) */
.fs-07 .fs07-face--r .fs07-shade {
  opacity: var(--lift);
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.12) 55%, rgba(0, 0, 0, 0));
}
/* the turning page darkens towards the spine as it stands up */
.fs-07 .fs07-face--front .fs07-shade {
  opacity: calc(min(var(--a) / 90, 1) * 0.45);
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.fs-07 .fs07-face--back .fs07-shade {
  opacity: calc(clamp(0, (180 - var(--a)) / 90, 1) * 0.45);
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.fs-07 .fs07-face--front,
.fs-07 .fs07-face--back {
  box-shadow:
    0 calc(20.357 * var(--f)) calc(39.148 * var(--f)) calc(-9.396 * var(--f)) rgba(0, 0, 0, 0.5),
    calc(-14.093 * var(--f)) calc(7.83 * var(--f)) calc(15.659 * var(--f)) rgba(0, 0, 0, calc(0.55 * var(--lift)));
}
.fs-07 .fs07-face--back { transform: rotateY(180deg); }
.fs-07 .fs07-spine {
  position: absolute;
  left: calc(378.637 * var(--f));
  top: calc(173.81 * var(--f));
  width: calc(2.349 * var(--f));
  height: calc(335.11 * var(--f));
  background: rgba(0, 0, 0, 0.45);
}

/* ---- badges (white glass pills) ---- */
.fs-07 .fs07-badge {
  position: absolute;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: calc(10.133 * var(--f));
  padding: calc(10.133 * var(--f)) calc(18.578 * var(--f)) calc(10.133 * var(--f)) calc(10.133 * var(--f));
  translate: -50% 0;
  overflow: hidden;
  white-space: nowrap;
  border: max(1px, calc(1.267 * var(--f))) solid #fff;
  border-radius: calc(25.333 * var(--f));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(224, 240, 255, 0.92));
  -webkit-backdrop-filter: blur(calc(8.444 * var(--f)));
          backdrop-filter: blur(calc(8.444 * var(--f)));
  box-shadow: 0 calc(11.822 * var(--f)) calc(25.333 * var(--f)) calc(-6.756 * var(--f)) rgba(11, 27, 51, 0.25);
}
/* Figma boxes: 249.11, 62.49, 266.16 wide / 260.09, 564.93, 247.09 wide; centred on them */
.fs-07 .fs07-badge--still { left: calc(382.19 * var(--f)); top: calc(62.49 * var(--f)); }
.fs-07 .fs07-badge--now { left: calc(383.63 * var(--f)); top: calc(564.93 * var(--f)); }
.fs-07 .fs07-badge__play {
  flex: none;
  width: calc(33.778 * var(--f));
  height: calc(33.778 * var(--f));
}
.fs-07 .fs07-badge__text {
  display: flex;
  flex-direction: column;
  gap: calc(1.689 * var(--f));
}
.fs-07 .fs07-badge__title {
  font-size: calc(15.2 * var(--f));
  font-weight: 600;
  line-height: calc(19 * var(--f));
  color: #0f1a2e;
}
.fs-07 .fs07-badge__sub {
  font-size: calc(10.978 * var(--f));
  font-weight: 400;
  line-height: calc(14 * var(--f));
  color: #5b6675;
}
.fs-07 .fs07-badge__eq {
  position: relative;
  flex: none;
  width: calc(28.711 * var(--f));
  height: calc(28.711 * var(--f));
}
.fs-07 .fs07-badge__eq img { position: relative; width: 100%; height: 100%; }
/* a soft ring breathing out of the icon while the book plays */
.fs-07 .fs07-badge__eq::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(22, 24, 29, 0.22);
  opacity: 0;
}
.fs-07 .fs07-num {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}
.fs-07.is-playing .fs07-badge__eq img { animation: fs07-beat 2s ease-in-out infinite; }
.fs-07.is-playing .fs07-badge__eq::before { animation: fs07-ring 2s ease-out infinite; }
@keyframes fs07-beat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.92); }
}
@keyframes fs07-ring {
  0% { opacity: 0.9; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(1.5); }
}
@media (prefers-reduced-motion: reduce) {
  .fs-07.is-playing .fs07-badge__eq img,
  .fs-07.is-playing .fs07-badge__eq::before { animation: none; }
}

/* ---- stage 08 ---- */
/* -- fs-08: AI music (mood bar, track card, auto-mix card) -- */
.fs-08 p { margin: 0; line-height: normal; white-space: nowrap; }
.fs-08 img { position: absolute; display: block; }

/* Glass rims (white 32% plates behind the mood bar and the track card) */
.fs-08 .fs8-rim {
  position: absolute;
  box-sizing: border-box;
  border: 0.844px solid rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.32);
}
.fs-08 .fs8-rim--mood {
  left: calc(110.62 * var(--f));
  top: calc(85.29 * var(--f));
  width: calc(538.756 * var(--f));
  height: calc(82.756 * var(--f));
  border-radius: calc(41.378 * var(--f));
}
.fs-08 .fs8-rim--track {
  left: calc(135.11 * var(--f));
  top: calc(202.67 * var(--f));
  width: calc(489.778 * var(--f));
  height: calc(287.111 * var(--f));
  border-radius: calc(42.222 * var(--f));
}

/* Cards: white 95% glass to a tint, backdrop blur, white stroke + top highlight */
.fs-08 .fs8-card {
  position: absolute;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), var(--tint));
  -webkit-backdrop-filter: blur(calc(10.133 * var(--f)));
          backdrop-filter: blur(calc(10.133 * var(--f)));
  box-shadow:
    inset 0 0 0 1.267px rgba(255, 255, 255, 0.95),
    inset 0 calc(1.689 * var(--f)) calc(1.689 * var(--f)) rgba(255, 255, 255, 0.9),
    0 calc(18.578 * var(--f)) calc(38.844 * var(--f)) calc(-10.133 * var(--f)) rgba(11, 42, 61, 0.2);
}

/* ---- mood bar ---- */
.fs-08 .fs8-mood {
  --tint: rgba(237, 252, 247, 0.93);
  left: calc(118.22 * var(--f));
  top: calc(92.89 * var(--f));
  width: calc(523.556 * var(--f));
  height: calc(67.556 * var(--f));
  border-radius: calc(33.778 * var(--f));
}
.fs-08 .fs8-mood__icon {
  left: calc(23.646 * var(--f));
  top: calc(21.111 * var(--f));
  width: calc(25.333 * var(--f));
  height: calc(25.333 * var(--f));
}
.fs-08 .fs8-mood__line {
  position: absolute;
  left: calc(59.113 * var(--f));
  top: calc(23.644 * var(--f));
  display: flex;
  align-items: center;
  font-size: calc(16.044 * var(--f));
  font-weight: 400;
  color: #0f1a2e;
}
.fs-08 .fs8-mood__caret {
  display: block;
  flex: none;
  width: calc(1.689 * var(--f));
  height: calc(21.956 * var(--f));
  margin-left: calc(1 * var(--f));
  background: #0e8f8c;
  animation: fs08-blink 1.05s steps(1, end) infinite;
}
.fs-08 .fs8-mood__caret.is-typing { animation: none; }
@keyframes fs08-blink { 50% { opacity: 0; } }
.fs-08 .fs8-mood__btn {
  position: absolute;
  left: calc(414.624 * var(--f));
  top: calc(17.312 * var(--f));
  display: flex;
  align-items: center;
  gap: calc(5.067 * var(--f));
  height: calc(32.889 * var(--f));
  padding: 0 calc(13.511 * var(--f)) 0 calc(11.822 * var(--f));
  border-radius: calc(20.267 * var(--f));
  background: #0e8f8c;
  color: #fff;
  font-size: calc(12.667 * var(--f));
  font-weight: 600;
  line-height: normal;
  white-space: nowrap;
}
.fs-08 .fs8-mood__spark { font-size: calc(11.822 * var(--f)); font-weight: 700; }

/* ---- track card ---- */
.fs-08 .fs8-track {
  --tint: rgba(224, 247, 245, 0.92);
  left: calc(143.555 * var(--f));
  top: calc(211.111 * var(--f));
  width: calc(472.889 * var(--f));
  height: calc(270.222 * var(--f));
  border-radius: calc(33.778 * var(--f));
}
.fs-08 .fs8-track__thumb {
  left: calc(23.646 * var(--f));
  top: calc(23.645 * var(--f));
  width: calc(101.333 * var(--f));
  height: calc(101.333 * var(--f));
  border-radius: calc(20.267 * var(--f));
  object-fit: cover;
}
.fs-08 .fs8-chip {
  position: absolute;
  padding: calc(4.222 * var(--f)) calc(8.444 * var(--f));
  border-radius: calc(83.6 * var(--f));
  font-size: calc(10.133 * var(--f));
  font-weight: 600;
}
.fs-08 .fs8-chip--score {
  left: calc(143.556 * var(--f));
  top: calc(27.022 * var(--f));
  background: rgba(14, 143, 140, 0.14);
  color: #0e8f8c;
}
.fs-08 .fs8-chip--fits {
  left: calc(322.578 * var(--f));
  top: calc(226.311 * var(--f));
  background: rgba(0, 0, 0, 0.05);
  color: #5b6675;
}
.fs-08 .fs8-track__title {
  position: absolute;
  left: calc(143.556 * var(--f));
  top: calc(54.044 * var(--f));
  font-size: calc(25.333 * var(--f));
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0f1a2e;
}
.fs-08 .fs8-track__sub {
  position: absolute;
  left: calc(143.556 * var(--f));
  top: calc(87.821 * var(--f));
  font-size: calc(12.667 * var(--f));
  font-weight: 400;
  color: #5b6675;
}
/* the waveform: 44 bars, the played ones teal */
.fs-08 .fs8-wave,
.fs-08 .fs8-lane {
  position: absolute;
  left: calc(23.646 * var(--f));
  top: calc(148.622 * var(--f));
  width: calc(425.6 * var(--f));
  height: calc(54.044 * var(--f));
}
.fs-08 .fs8-wave {
  display: flex;
  align-items: center;
  gap: calc(4.644 * var(--f));
}
.fs-08 .fs8-wave i {
  display: block;
  flex: none;
  width: calc(5.067 * var(--f));
  height: calc(var(--h) * var(--f));
  border-radius: calc(2.533 * var(--f));
  background: rgba(159, 179, 186, 0.5);
  transition: background-color 0.3s ease;
}
.fs-08 .fs8-wave i.is-on { background: #0e8f8c; }
.fs-08 .fs8-playhead {
  left: 39.385%; /* 0:09 of 0:24, on bar 18 */
  top: calc(21.111 * var(--f));
  width: calc(11.822 * var(--f));
  height: calc(11.822 * var(--f));
  margin-left: calc(-5.911 * var(--f));
}
.fs-08 .fs8-track__pause {
  left: calc(23.646 * var(--f));
  top: calc(216.178 * var(--f));
  width: calc(40.533 * var(--f));
  height: calc(40.533 * var(--f));
}
.fs-08 .fs8-track__time {
  position: absolute;
  left: calc(76 * var(--f));
  top: calc(228 * var(--f));
  font-size: calc(11.822 * var(--f));
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #5b6675;
}

/* ---- auto-mix card (tilted 2deg) ---- */
.fs-08 .fs8-mix {
  --tint: rgba(229, 242, 255, 0.93);
  left: calc(406.11 * var(--f));
  top: calc(465.48 * var(--f));
  width: calc(304 * var(--f));
  height: calc(143.556 * var(--f));
  border-radius: calc(27.022 * var(--f));
  rotate: 2deg;
}
.fs-08 .fs8-mix__dot {
  left: calc(18.577 * var(--f));
  top: calc(22.807 * var(--f));
  width: calc(6.756 * var(--f));
  height: calc(6.756 * var(--f));
}
.fs-08 .fs8-mix__title {
  position: absolute;
  left: calc(32.087 * var(--f));
  top: calc(16.887 * var(--f));
  font-size: calc(12.667 * var(--f));
  font-weight: 600;
  color: #0f1a2e;
}
.fs-08 .fs8-mix__label {
  position: absolute;
  left: calc(18.577 * var(--f));
  font-size: calc(9.289 * var(--f));
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #5b6675;
}
.fs-08 .fs8-mix__label--voice { top: calc(59.107 * var(--f)); }
.fs-08 .fs8-mix__label--music { top: calc(101.337 * var(--f)); }
.fs-08 .fs8-mix__bars {
  position: absolute;
  left: calc(72.627 * var(--f));
  display: flex;
  align-items: center;
  gap: calc(3.0405 * var(--f));
  height: calc(32 * var(--f));
}
.fs-08 .fs8-mix__bars--voice { top: calc(48.18 * var(--f)); }
.fs-08 .fs8-mix__bars--music { top: calc(90.41 * var(--f)); }
.fs-08 .fs8-mix__bars i {
  display: block;
  flex: none;
  width: calc(3.378 * var(--f));
  height: calc(var(--h) * var(--f));
  border-radius: calc(1.689 * var(--f));
}
.fs-08 .fs8-mix__bars--voice i { background: #16181d; }
.fs-08 .fs8-mix__bars--music i { background: #0e8f8c; }

@media (prefers-reduced-motion: reduce) {
  .fs-08 .fs8-mood__caret { animation: none; }
}

/* ---- stage 09 ---- */
/* -- fs-09: series. Cast pill, the season card, and the "next episodes" card -- */
.fs-09 p { margin: 0; }
.fs-09 p,
.fs-09 span { line-height: normal; white-space: nowrap; }
.fs-09 img { display: block; max-width: none; }

/* Glass rims: white 30% plates with a hairline, behind the cast pill and the season card */
.fs-09 .fs-09__rim {
  position: absolute;
  border: 0.844px solid rgba(255, 255, 255, 0.7);
  border-radius: calc(42.222 * var(--f));
  background: rgba(255, 255, 255, 0.3);
}
.fs-09 .fs-09__rim--cast {
  left: calc(195.912 * var(--f));
  top: calc(37.156 * var(--f));
  width: calc(368.178 * var(--f));
  height: calc(84.444 * var(--f));
}
.fs-09 .fs-09__rim--season {
  left: calc(92.889 * var(--f));
  top: calc(131.734 * var(--f));
  width: calc(574.222 * var(--f));
  height: calc(337.778 * var(--f));
}

/* Cards: white glass with a green tint, blur 10, a 1.27px white edge and a top highlight.
   Children are placed from the card's outer top-left. */
.fs-09 .fs-09__card {
  position: absolute;
  overflow: hidden;
  border-radius: calc(var(--r) * var(--f));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), var(--tint));
  -webkit-backdrop-filter: blur(calc(10.133 * var(--f)));
          backdrop-filter: blur(calc(10.133 * var(--f)));
  box-shadow: 0 calc(18.578 * var(--f)) calc(38.844 * var(--f)) calc(-10.133 * var(--f)) rgba(11, 51, 34, 0.2);
  color: #0f1a2e;
  font-weight: 600;
}
.fs-09 .fs-09__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 1.267px solid rgba(255, 255, 255, 0.95);
  border-radius: inherit;
  box-shadow: inset 0 calc(1.689 * var(--f)) calc(1.689 * var(--f)) rgba(255, 255, 255, 0.9);
  pointer-events: none;
}
.fs-09 .fs-09__card > *,
.fs-09 .fs-09__line > * { position: absolute; }

/* ---- Your cast ---- */
.fs-09 .fs-09__cast {
  --r: 35.467;
  --tint: rgba(237, 252, 242, 0.93);
  left: calc(202.666 * var(--f));
  top: calc(43.912 * var(--f));
  width: calc(354.667 * var(--f));
  height: calc(70.933 * var(--f));
}
.fs-09 .fs-09__kicker {
  left: calc(25.334 * var(--f));
  top: calc(18.578 * var(--f));
  font-size: calc(9.289 * var(--f));
  letter-spacing: 0.12em;
  color: #5b6675;
}
.fs-09 .fs-09__ready {
  left: calc(25.334 * var(--f));
  top: calc(33.776 * var(--f));
  font-size: calc(12.667 * var(--f));
}
.fs-09 .fs-09__av {
  left: calc(var(--x) * var(--f));
  top: calc(13.51 * var(--f));
  width: calc(43.911 * var(--f));
  height: calc(43.911 * var(--f));
}

/* ---- Season card ---- */
.fs-09 .fs-09__season {
  --r: 33.778;
  --tint: rgba(229, 250, 237, 0.92);
  left: calc(101.334 * var(--f));
  top: calc(140.178 * var(--f));
  width: calc(557.333 * var(--f));
  height: calc(320.889 * var(--f));
}
.fs-09 .fs-09__cover,
.fs-09 .fs-09__fade {
  left: 0;
  top: 0;
  width: 100%;
  height: calc(168.889 * var(--f));
}
.fs-09 .fs-09__cover { object-fit: cover; }
.fs-09 .fs-09__fade { background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05) 45%, rgba(5, 26, 15, 0.75)); }
.fs-09 .fs-09__title {
  left: calc(27.023 * var(--f));
  top: calc(99.644 * var(--f));
  font-size: calc(28.711 * var(--f));
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}
.fs-09 .fs-09__meta {
  left: calc(27.023 * var(--f));
  top: calc(136.8 * var(--f));
  font-size: calc(12.667 * var(--f));
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
}
/* the episode count: "4" rolls up to "5" when the new episode lands */
.fs-09 .fs-09__count {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
.fs-09 .fs-09__n { display: inline-block; }
.fs-09 .fs-09__n--next {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
.fs-09 .fs-09__friday {
  left: calc(411.244 * var(--f));
  top: calc(18.578 * var(--f));
  padding: calc(5.067 * var(--f)) calc(9.289 * var(--f));
  border-radius: calc(83.6 * var(--f));
  background: rgba(255, 255, 255, 0.92);
  font-size: calc(10.978 * var(--f));
  color: #1f9d5c;
}
.fs-09 .fs-09__play {
  left: calc(493.156 * var(--f));
  top: calc(106.4 * var(--f));
  width: calc(43.911 * var(--f));
  height: calc(43.911 * var(--f));
}

/* episode row: a window over a track that slides one slot left when Ep 5 arrives */
.fs-09 .fs-09__row {
  left: calc(27.023 * var(--f));
  top: calc(197.601 * var(--f));
  width: calc(503.287 * var(--f));
  height: calc(115 * var(--f));
  overflow: hidden;
}
.fs-09 .fs-09__track { position: absolute; inset: 0; }
.fs-09 .fs-09__ep {
  position: absolute;
  left: calc(var(--x) * var(--f));
  top: 0;
  width: calc(118.222 * var(--f));
  height: 100%;
}
.fs-09 .fs-09__ep > * { position: absolute; }
.fs-09 .fs-09__thumb {
  left: 0;
  top: 0;
  width: 100%;
  height: calc(76 * var(--f));
  border-radius: calc(13.511 * var(--f));
  object-fit: cover;
}
.fs-09 .fs-09__epn {
  left: calc(1.688 * var(--f));
  top: calc(84.442 * var(--f));
  font-size: calc(9.289 * var(--f));
  color: #5b6675;
}
.fs-09 .fs-09__ept {
  left: calc(1.688 * var(--f));
  top: calc(97.111 * var(--f));
  font-size: calc(11.822 * var(--f));
}
/* Ep 5 has no picture yet: a snowy tile with a "New" tag */
.fs-09 .fs-09__snow {
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 30%, #fff 0 calc(2.2 * var(--f)), transparent calc(2.8 * var(--f))),
    radial-gradient(circle at 42% 62%, rgba(255, 255, 255, 0.9) 0 calc(1.6 * var(--f)), transparent calc(2.2 * var(--f))),
    radial-gradient(circle at 66% 24%, rgba(255, 255, 255, 0.95) 0 calc(1.8 * var(--f)), transparent calc(2.4 * var(--f))),
    radial-gradient(circle at 84% 56%, #fff 0 calc(2.4 * var(--f)), transparent calc(3 * var(--f))),
    radial-gradient(circle at 30% 82%, rgba(255, 255, 255, 0.85) 0 calc(1.5 * var(--f)), transparent calc(2.1 * var(--f))),
    radial-gradient(circle at 74% 86%, rgba(255, 255, 255, 0.9) 0 calc(1.8 * var(--f)), transparent calc(2.4 * var(--f))),
    linear-gradient(180deg, #bfdcf2 0%, #dcecf8 62%, #f4f9fd 62.5%, #ffffff 100%);
}
.fs-09 .fs-09__tag {
  position: absolute;
  left: calc(8 * var(--f));
  top: calc(8 * var(--f));
  padding: calc(3.5 * var(--f)) calc(7 * var(--f));
  border-radius: calc(83.6 * var(--f));
  background: rgba(255, 255, 255, 0.92);
  font-size: calc(9.289 * var(--f));
  color: #1f9d5c;
}

/* ---- Next episodes (Figma: rotated 2°) ---- */
.fs-09 .fs-09__next {
  --r: 28.711;
  --tint: rgba(242, 252, 229, 0.93);
  left: calc(309.5 * var(--f));
  top: calc(484.69 * var(--f));
  width: calc(388.45 * var(--f));
  height: calc(152 * var(--f));
  rotate: 2deg;
}
.fs-09 .fs-09__nexthead {
  left: calc(21.957 * var(--f));
  top: calc(18.577 * var(--f));
  font-size: calc(12.667 * var(--f));
}
.fs-09 .fs-09__line { inset: 0; }
.fs-09 .fs-09__hl {
  left: calc(10.137 * var(--f));
  top: calc(45.597 * var(--f));
  width: calc(368.178 * var(--f));
  height: calc(40.533 * var(--f));
  border-radius: calc(13.511 * var(--f));
  background: rgba(31, 157, 92, 0.12);
}
.fs-09 .fs-09__lnum {
  left: calc(23.637 * var(--f));
  top: calc(59.107 * var(--f));
  font-size: calc(10.133 * var(--f));
  color: #1f9d5c;
}
.fs-09 .fs-09__lname {
  left: calc(64.177 * var(--f));
  top: calc(56.577 * var(--f));
  font-size: calc(13.511 * var(--f));
}
.fs-09 .fs-09__line--6 .fs-09__lnum { top: calc(104.717 * var(--f)); color: #5b6675; }
.fs-09 .fs-09__line--6 .fs-09__lname { top: calc(102.177 * var(--f)); color: rgba(15, 26, 46, 0.75); }
.fs-09 .fs-09__write {
  left: calc(303.157 * var(--f));
  top: calc(53.197 * var(--f));
  display: flex;
  padding: calc(5.067 * var(--f)) calc(9.289 * var(--f));
  border-radius: calc(83.6 * var(--f));
  background: #16181d;
  font-size: calc(10.978 * var(--f));
  color: #fff;
}
.fs-09 .fs-09__wl--done {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}

/* ---- stage 10 ---- */
/* Feature 10 stage: Faith Story (Figma 559:128). A "Story format" card with two toggles,
   a scene of young David with his verse on it, and a "Kid-safe check passed" pill. */
.fs-10 p { margin: 0; }
.fs-10 img { display: block; max-width: none; }
.fs-10 .fs-10__rim, .fs-10 .fs-10__scene, .fs-10 .fs-10__scene > *, .fs-10 .fs-10__card, .fs-10 .fs-10__card > *, .fs-10 .fs-10__check {
  position: absolute;
  box-sizing: border-box;
  margin: 0;
}

/* ---- scene ---- */
.fs-10 .fs-10__rim {
  left: calc(329.33 * var(--f));
  top: calc(118.22 * var(--f));
  width: calc(388.44 * var(--f));
  height: calc(456 * var(--f));
  border: 0.844px solid rgba(255, 255, 255, 0.7);
  border-radius: calc(45.6 * var(--f));
  background: rgba(255, 255, 255, 0.3);
}
.fs-10 .fs-10__scene {
  left: calc(337.78 * var(--f));
  top: calc(126.67 * var(--f));
  width: calc(371.56 * var(--f));
  height: calc(439.11 * var(--f));
  overflow: hidden;
  border-radius: calc(37.156 * var(--f));
  box-shadow: 0 calc(21.956 * var(--f)) calc(42.222 * var(--f)) calc(-8.444 * var(--f)) rgba(11, 42, 61, 0.3);
}
.fs-10 .fs-10__pic { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fs-10 .fs-10__shade {
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05) 55%, rgba(8, 15, 26, 0.82));
}
.fs-10 .fs-10__ref {
  left: calc(20.27 * var(--f));
  top: calc(20.27 * var(--f));
  padding: calc(5.911 * var(--f)) calc(10.133 * var(--f));
  border-radius: calc(83.6 * var(--f));
  background: rgba(255, 255, 255, 0.92);
  font-size: calc(10.978 * var(--f));
  font-weight: 600;
  line-height: normal;
  white-space: nowrap;
  color: #0f1a2e;
}
.fs-10 .fs-10__verse {
  left: calc(20.27 * var(--f));
  top: calc(366.49 * var(--f));
  width: calc(331.022 * var(--f));
  font-family: "Instrument Serif", serif;
  font-size: calc(21.956 * var(--f));
  font-weight: 400;
  line-height: 1.18;
  color: #fff;
}
.fs-10 .fs-10__verse em { font-style: italic; color: #ffe3a0; }
.fs-10 .fs-10__verse b { font-style: normal; font-weight: 400; color: #fff; }
.fs-10 .fs-10__w { display: inline-block; }

/* ---- story format card (tinted glass, tilted 2deg) ---- */
.fs-10 .fs-10__card {
  left: calc(63.44 * var(--f));
  top: calc(163.5 * var(--f));
  width: calc(304 * var(--f));
  height: calc(253.33 * var(--f));
  rotate: -2deg;
  border: 1.267px solid rgba(255, 255, 255, 0.95);
  border-radius: calc(30.4 * var(--f));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(229, 247, 250, 0.93));
  -webkit-backdrop-filter: blur(calc(10.133 * var(--f)));
          backdrop-filter: blur(calc(10.133 * var(--f)));
  box-shadow:
    inset 0 calc(1.689 * var(--f)) calc(1.689 * var(--f)) rgba(255, 255, 255, 0.9),
    0 calc(18.578 * var(--f)) calc(38.844 * var(--f)) calc(-10.133 * var(--f)) rgba(11, 42, 61, 0.22);
}
.fs-10 .fs-10__card > span { line-height: normal; white-space: nowrap; }
.fs-10 .fs-10__eyebrow {
  left: calc(20.69 * var(--f));
  top: calc(19 * var(--f));
  font-size: calc(9.289 * var(--f));
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #5b6675;
}
.fs-10 .fs-10__icon {
  left: calc(20.69 * var(--f));
  top: calc(40.96 * var(--f));
  width: calc(33.778 * var(--f));
  height: calc(33.778 * var(--f));
}
.fs-10 .fs-10__title {
  left: calc(64.6 * var(--f));
  top: calc(46.02 * var(--f));
  font-size: calc(20.267 * var(--f));
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0f1a2e;
}
.fs-10 .fs-10__rule {
  left: calc(20.69 * var(--f));
  top: calc(91.62 * var(--f));
  width: calc(260.089 * var(--f));
  height: 0.844px;
  background: rgba(0, 0, 0, 0.08);
}
.fs-10 .fs-10__label, .fs-10 .fs-10__sub { left: calc(20.69 * var(--f)); top: calc(var(--y) * var(--f)); }
.fs-10 .fs-10__label { font-size: calc(13.511 * var(--f)); font-weight: 600; color: #0f1a2e; }
.fs-10 .fs-10__sub { font-size: calc(10.978 * var(--f)); font-weight: 400; color: #5b6675; }

/* Toggle: --on goes 0 (off, grey) to 1 (on, its colour); the JS tweens it */
.fs-10 .fs-10__tog {
  --on: 1;
  left: calc(240.24 * var(--f));
  top: calc(var(--y) * var(--f));
  width: calc(40.533 * var(--f));
  height: calc(23.644 * var(--f));
  border-radius: calc(11.822 * var(--f));
  background: color-mix(in srgb, var(--c) calc(var(--on) * 100%), #c7d0d9);
}
.fs-10 .fs-10__tog i {
  position: absolute;
  left: calc(2.533 * var(--f));
  top: calc(2.533 * var(--f));
  width: calc(18.578 * var(--f));
  height: calc(18.578 * var(--f));
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 calc(1 * var(--f)) calc(2.5 * var(--f)) rgba(11, 42, 61, calc(0.12 + 0.06 * (1 - var(--on))));
  translate: calc(var(--on) * 16.889 * var(--f)) 0;
}

/* ---- safety check pill ---- */
.fs-10 .fs-10__check {
  left: calc(92.89 * var(--f));
  top: calc(472.89 * var(--f));
  display: flex;
  align-items: center;
  gap: calc(8.444 * var(--f));
  width: calc(231.18 * var(--f));
  height: calc(52.8 * var(--f));
  padding: 0 calc(16.889 * var(--f)) 0 calc(10.133 * var(--f));
  border: 0.844px solid #fff;
  border-radius: calc(23.644 * var(--f));
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 calc(11.822 * var(--f)) calc(25.333 * var(--f)) calc(-6.756 * var(--f)) rgba(11, 42, 61, 0.25);
}
.fs-10 .fs-10__shield { flex: none; width: calc(27.022 * var(--f)); height: calc(27.022 * var(--f)); }
.fs-10 .fs-10__checktext {
  display: flex;
  flex-direction: column;
  gap: calc(0.844 * var(--f));
  line-height: normal;
  white-space: nowrap;
}
.fs-10 .fs-10__checktitle { font-size: calc(13.511 * var(--f)); font-weight: 600; color: #0f1a2e; }
.fs-10 .fs-10__checksub { font-size: calc(10.133 * var(--f)); font-weight: 400; color: #5b6675; }

/* ============ MORE FEATURES (bento, Figma 12 "bento-final") ============ */

/* Dark at the top, a lit horizon rising out of it, then the white floor the tiles sit on.
   --sf is one pixel of the 1920px Figma frame (max 1px); the sky pieces are placed from
   the centre so they stay centred on wider screens. The bottom fades to the feature grid's grey. */
.more {
  --sf: min(1px, 100cqw / 1920);
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  overflow-x: clip;
  padding: max(88px, calc(410 * var(--sf))) 0 max(72px, calc(140 * var(--sf)));
  background: #fff;
  color: #0f1a2e;
}
.more::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  height: max(72px, calc(140 * var(--sf)));
  background: linear-gradient(180deg, rgba(244, 244, 246, 0), #f4f4f6);
  pointer-events: none;
}
.more__sky {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(180deg, #060508 0, #08060c calc(420 * var(--sf)), #fff calc(700 * var(--sf)));
}
.more__sky img {
  position: absolute;
  display: block;
  max-width: none;
}
.more__halo    { left: calc(50% - 2460 * var(--sf)); top: calc(-20 * var(--sf));  width: calc(4920 * var(--sf)); height: calc(2020 * var(--sf)); }
.more__violet  { left: calc(50% - 790 * var(--sf));  top: calc(50 * var(--sf));   width: calc(1580 * var(--sf)); height: calc(440 * var(--sf)); }
.more__horizon { left: calc(50% - 2132 * var(--sf)); top: calc(222 * var(--sf));  width: calc(4264 * var(--sf)); height: calc(1564 * var(--sf)); }
.more__floor {
  position: absolute;
  inset: calc(1010 * var(--sf)) 0 0;
  background: #fff;
}

/* Heading: kicker, two-line title (the second line handwritten), one line under it */
.more__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 16px;
  text-align: center;
}
.more__kicker {
  margin: 0;
  font-size: max(12px, calc(16 * var(--sf)));
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.18em;
  color: #5b6675;
}
.more__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: max(12px, calc(18 * var(--sf))) 0 0;
  color: #0f1a2e;
}
.more__title-a {
  font-size: max(36px, calc(72 * var(--sf)));
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.04em;
}
.more__title-b {
  margin-top: -0.143em;
  font-family: var(--font-script);
  font-size: max(44px, calc(84 * var(--sf)));
  font-weight: 400;
  line-height: 1.24;
}
.more__sub {
  margin: max(4px, calc(6 * var(--sf))) 0 0;
  font-size: max(16px, calc(20 * var(--sf)));
  line-height: 1.25;
  color: #5b6675;
}

/* Grid: one column on phones, two on tablets, Figma's three (464 + 24 gap) on desktop.
   Wide tiles take two columns from tablets up. */
.more__grid {
  display: grid;
  gap: 16px;
  max-width: 520px;
  margin: 40px auto 0;
  padding: 0 16px;
}

/* ---- Tile. The tile is a container; its children get --f, one Figma px of the tile,
   so the tile keeps Figma's proportions at any width (aspect-ratio W / H).
     .bt__copy   title and text at the Figma --x/--y, --cw wide
     .bt__art    everything else: a stage W x H in --f with the texture and the pieces
     .bt__tint   the tile's colour wash (one SVG from Figma), stretched to the tile ---- */
.bt {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  aspect-ratio: var(--w) / var(--h);
  border-radius: max(20px, calc(32 * var(--sf)));
  background: #f6f4f1;
  color: #0f1a2e;
}
.bt > * { --f: calc(100cqw / var(--w)); }
.bt__tint {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;          /* phones: the tile is taller than Figma's, so cover, don't letterbox */
  pointer-events: none;
}
.bt__art {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.bt__stage {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--w) * var(--f));
  height: calc(var(--h) * var(--f));
}
.bt__copy {
  position: absolute;
  z-index: 2;
  left: calc(var(--x) * var(--f));
  top: calc(var(--y) * var(--f));
  width: calc(var(--cw, 400) * var(--f));
}
.bt__title {
  margin: 0;
  font-size: max(16px, calc(26 * var(--f)));
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #0f1a2e;
}
.bt__text {
  margin: calc(10 * var(--f)) 0 0;
  font-size: max(12px, calc(16 * var(--f)));
  font-weight: 400;
  line-height: 1.4;
  color: #5b6675;
}
.bt--wide .bt__title { font-size: max(20px, calc(36 * var(--f))); line-height: 1.08; }
.bt--wide .bt__text  { margin-top: calc(14 * var(--f)); font-size: max(13px, calc(18 * var(--f))); }

@media (min-width: 760px) {
  .more__grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: dense;
    max-width: 1100px;
    padding: 0 24px;
  }
  .bt--wide { grid-column: span 2; }
  /* the tiles leave one cell over: the last tile sits centred on its own row */
  .bt:last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 8px);
  }
}

/* Desktop: Figma's grid, scaled with the 1920px frame like the sections above */
@media (min-width: 1280px) {
  .more__grid {
    grid-template-columns: repeat(3, calc(464 * var(--sf)));
    gap: calc(24 * var(--sf));
    justify-content: center;
    max-width: none;
    margin-top: calc(69 * var(--sf));
    padding: 0;
  }
  .bt:last-child { grid-column: auto; width: auto; }
}

/* Phones: title and text as normal text on top; under them the picture part, the box
   --ax/--ay (--aw x --ah) cut from the tile with 24 Figma px of air around it, scaled to
   the tile's width. */
@media (max-width: 759px) {
  .bt {
    display: flex;
    flex-direction: column;
    aspect-ratio: auto;
    border-radius: 24px;
  }
  .bt__copy {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    padding: 24px 22px 0;
  }
  .bt__title,
  .bt--wide .bt__title { font-size: 22px; line-height: 1.15; }
  .bt__text,
  .bt--wide .bt__text { margin-top: 8px; font-size: 15px; }
  .bt__art {
    --f: calc(100cqw / (var(--aw) + 48));
    position: relative;
    inset: auto;
    overflow: hidden;
    height: calc((var(--ah) + 48) * var(--f));
    margin-top: 4px;
  }
  .bt__stage {
    left: calc((24 - var(--ax)) * var(--f));
    top: calc((24 - var(--ay)) * var(--f));
  }
}

/* -- tile: styles -- */
/* Tile: 14 animation styles (Figma 520:133), wide */
.bt--styles { background: #f1f3f6; }
.bt--styles .sty-tx i {
  position: absolute;
  left: calc(340 * var(--f));
  top: calc(var(--y) * var(--f));
  width: calc(612 * var(--f));
  height: calc(9 * var(--f));
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, #fff 25%, #fff 85%, rgba(255,255,255,0) 100%);
}
.bt--styles .sty-tx i.is-dim {
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 25%, rgba(255,255,255,.55) 85%, rgba(255,255,255,0) 100%);
}
.bt--styles .sty-card {
  position: absolute;
  left: calc(var(--x) * var(--f));
  top: calc(var(--y) * var(--f));
  width: calc(140 * var(--f));
  height: calc(144 * var(--f));
  margin: 0;
  overflow: hidden;
  border-radius: calc(22 * var(--f));
  box-shadow: 0 calc(12 * var(--f)) calc(26 * var(--f)) calc(-6 * var(--f)) rgba(27,42,68,.16);
}
.bt--styles .sty-card--big {
  width: calc(210 * var(--f));
  height: calc(300 * var(--f));
}
.bt--styles .sty-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border: calc(4 * var(--f)) solid #fff;
  border-radius: inherit;
}
.bt--styles .sty-card img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.bt--styles .sty-label {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: calc(109 * var(--f));
  translate: -50% 0;
  padding: calc(5 * var(--f)) calc(10 * var(--f));
  border-radius: calc(99 * var(--f));
  background: rgba(255,255,255,.95);
  white-space: nowrap;
  font-size: calc(12 * var(--f));
  font-weight: 600;
  line-height: calc(15 * var(--f));
  color: #0f1a2e;
}
.bt--styles .sty-card--big .sty-label {
  top: calc(262 * var(--f));
  font-size: calc(14 * var(--f));
  line-height: calc(18 * var(--f));
}
.bt--styles .sty-pill {
  position: absolute;
  left: calc(584 * var(--f));
  top: calc(388 * var(--f));
  display: flex;
  align-items: center;
  gap: calc(7 * var(--f));
  height: calc(40 * var(--f));
  box-sizing: border-box;
  padding: 0 calc(15 * var(--f)) 0 calc(9 * var(--f));
  border: 1px solid #e3e7ed;
  border-radius: calc(99 * var(--f));
  background: #fff;
  filter: drop-shadow(0 calc(8 * var(--f)) calc(10 * var(--f)) rgba(27,42,68,.12));
  white-space: nowrap;
  font-size: calc(14 * var(--f));
  font-weight: 600;
  line-height: calc(18 * var(--f));
  color: #0f1a2e;
}
.bt--styles .sty-pill img {
  display: block;
  width: calc(22 * var(--f));
  height: calc(22 * var(--f));
}

/* -- tile: captions -- */
/* Tile: Auto captions (Figma 520:164) */
.bt--captions .bt-tx i {
  position: absolute;
  left: calc(var(--x) * var(--f));
  top: calc(var(--y) * var(--f));
  width: calc(14 * var(--f));
  height: calc(var(--h) * var(--f));
  border-radius: calc(7 * var(--f));
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 50%, rgba(255,255,255,0) 100%);
}
.bt--captions .bt-tx i.is-dim {
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 100%);
}
.bt--captions .cap-frame {
  position: absolute;
  left: calc(24 * var(--f));
  top: calc(152 * var(--f));
  width: calc(416 * var(--f));
  height: calc(216 * var(--f));
  box-sizing: border-box;
  border: 1px solid #fff;
  border-radius: calc(28 * var(--f));
  background: rgba(255,255,255,.7);
  box-shadow: 0 calc(6 * var(--f)) calc(16 * var(--f)) calc(-4 * var(--f)) rgba(27,42,68,.06);
}
.bt--captions .cap-scene {
  position: absolute;
  left: calc(32 * var(--f));
  top: calc(160 * var(--f));
  width: calc(400 * var(--f));
  height: calc(200 * var(--f));
  max-width: none;
  display: block;
  object-fit: cover;
  border-radius: calc(22 * var(--f));
  box-shadow: 0 calc(12 * var(--f)) calc(26 * var(--f)) calc(-6 * var(--f)) rgba(27,42,68,.16);
}
.bt--captions .cap-bar {
  position: absolute;
  left: calc(232 * var(--f));
  top: calc(306 * var(--f));
  translate: -50% 0;
  margin: 0;
  display: flex;
  align-items: center;
  height: calc(40 * var(--f));
  box-sizing: border-box;
  padding: calc(8 * var(--f)) calc(7 * var(--f));
  border-radius: calc(12 * var(--f));
  background: rgba(0,0,0,.55);
  white-space: nowrap;
  font-size: calc(16 * var(--f));
  font-weight: 700;
  line-height: calc(20 * var(--f));
  color: #fff;
}
/* Every word carries the pill's padding, so the line keeps its width as the pill moves */
.bt--captions .cap-word {
  display: block;
  padding: calc(2 * var(--f)) calc(5 * var(--f));
  border-radius: calc(6 * var(--f));
  transition: background-color 0.18s ease;
}
.bt--captions .cap-word.is-on { background: #e8790f; }
.bt--captions .cap-pill {
  position: absolute;
  left: calc(232 * var(--f));
  top: calc(392 * var(--f));
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: calc(7 * var(--f));
  height: calc(40 * var(--f));
  box-sizing: border-box;
  padding: 0 calc(15 * var(--f)) 0 calc(9 * var(--f));
  border: 1px solid #e3e7ed;
  border-radius: calc(99 * var(--f));
  background: #fff;
  filter: drop-shadow(0 calc(8 * var(--f)) calc(10 * var(--f)) rgba(27,42,68,.12));
  white-space: nowrap;
  font-size: calc(13 * var(--f));
  font-weight: 600;
  line-height: calc(16 * var(--f));
  color: #0f1a2e;
}
.bt--captions .cap-pill img {
  display: block;
  width: calc(22 * var(--f));
  height: calc(22 * var(--f));
}

/* -- tile: score -- */
/* Tile: AI background score (Figma 520:205) */
.bt--score { background: #f1f3f6; }
.bt--score .bt-tx i {
  position: absolute;
  left: calc(var(--x) * var(--f));
  top: calc(var(--y) * var(--f));
  width: calc(14 * var(--f));
  height: calc(var(--h) * var(--f));
  border-radius: calc(7 * var(--f));
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 50%, rgba(255,255,255,0) 100%);
}
.bt--score .bt-tx i.is-dim {
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 100%);
}
.bt--score .sc-frame {
  position: absolute;
  left: calc(24 * var(--f));
  top: calc(160 * var(--f));
  width: calc(416 * var(--f));
  height: calc(116 * var(--f));
  box-sizing: border-box;
  border: 1px solid #fff;
  border-radius: calc(26 * var(--f));
  background: rgba(255,255,255,.7);
  box-shadow: 0 calc(6 * var(--f)) calc(16 * var(--f)) calc(-4 * var(--f)) rgba(27,42,68,.06);
}
.bt--score .sc-card {
  position: absolute;
  left: calc(32 * var(--f));
  top: calc(168 * var(--f));
  width: calc(400 * var(--f));
  height: calc(100 * var(--f));
  overflow: hidden;
  border-radius: calc(20 * var(--f));
  background: #fff;
  box-shadow: 0 calc(12 * var(--f)) calc(30 * var(--f)) calc(-8 * var(--f)) rgba(27,42,68,.12);
  font-weight: 600;
}
.bt--score .sc-card__label {
  position: absolute;
  left: calc(20 * var(--f));
  top: calc(18 * var(--f));
  margin: 0;
  font-size: calc(11 * var(--f));
  line-height: calc(14 * var(--f));
  letter-spacing: 0.12em;
  color: #5b6675;
  white-space: nowrap;
}
.bt--score .sc-card__mood {
  position: absolute;
  left: calc(20 * var(--f));
  top: calc(38 * var(--f));
  width: calc(360 * var(--f));
  margin: 0;
  font-size: calc(17 * var(--f));
  line-height: 1.25;
  color: #0f1a2e;
}
.bt--score .sc-pill {
  position: absolute;
  left: calc(308 * var(--f));
  top: calc(250 * var(--f));
  display: flex;
  align-items: center;
  gap: calc(7 * var(--f));
  height: calc(40 * var(--f));
  box-sizing: border-box;
  padding: 0 calc(15 * var(--f)) 0 calc(9 * var(--f));
  border: 1px solid #e3e7ed;
  border-radius: calc(99 * var(--f));
  background: #fff;
  filter: drop-shadow(0 calc(8 * var(--f)) calc(10 * var(--f)) rgba(27,42,68,.12));
  white-space: nowrap;
  font-size: calc(14 * var(--f));
  font-weight: 600;
  line-height: calc(18 * var(--f));
  color: #0f1a2e;
}
.bt--score .sc-pill img {
  display: block;
  width: calc(22 * var(--f));
  height: calc(22 * var(--f));
}
.bt--score .sc-wave {
  position: absolute;
  left: calc(32 * var(--f));
  top: calc(318 * var(--f));
  width: calc(400 * var(--f));
  height: calc(64 * var(--f));
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bt--score .sc-wave i {
  display: block;
  flex: none;
  width: calc(11 * var(--f));
  height: calc(var(--h) * var(--f));
  border-radius: calc(6 * var(--f));
  background: #cbd3de;
}
.bt--score .sc-wave i.is-on { background: #2e7dd7; }
.bt--score .sc-more {
  position: absolute;
  left: calc(232 * var(--f));
  top: calc(404 * var(--f));
  translate: -50% 0;
  margin: 0;
  white-space: nowrap;
  font-size: calc(14 * var(--f));
  font-weight: 600;
  line-height: calc(18 * var(--f));
  color: #5b6675;
}

/* -- tile: enhancer -- */
.bt--enhancer { background: #f1f3f6; }
.bt--enhancer .enhancer__tex { position: absolute; inset: 0; overflow: hidden; }
.bt--enhancer .enhancer__tex i {
  position: absolute;
  left: calc(var(--x) * var(--f));
  top: calc(var(--y) * var(--f));
  width: calc(14 * var(--f));
  height: calc(var(--h) * var(--f));
  border-radius: calc(7 * var(--f));
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 50%, rgba(255,255,255,0) 100%);
}
.bt--enhancer .enhancer__tex i:nth-child(even) {
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%);
}
.bt--enhancer .enhancer__idea {
  position: absolute;
  box-sizing: border-box;
  left: calc(32 * var(--f));
  top: calc(176 * var(--f));
  width: calc(217 * var(--f));
  height: calc(41 * var(--f));
  padding: calc(11 * var(--f)) 0 0 calc(16 * var(--f));
  border-radius: calc(16 * var(--f));
  background: #fff;
  filter: drop-shadow(0 calc(8 * var(--f)) calc(9 * var(--f)) rgba(27, 42, 68, 0.1));
  font-size: calc(15 * var(--f));
  font-weight: 600;
  line-height: calc(19 * var(--f));
  color: #0f1a2e;
  white-space: nowrap;
}
.bt--enhancer .enhancer__pill {
  position: absolute;
  box-sizing: border-box;
  left: calc(316 * var(--f));
  top: calc(226 * var(--f));
  width: calc(116 * var(--f));
  height: calc(40 * var(--f));
  border: 1px solid #e3e7ed;
  border-radius: calc(99 * var(--f));
  background: #fff;
  filter: drop-shadow(0 calc(8 * var(--f)) calc(10 * var(--f)) rgba(27, 42, 68, 0.12));
}
.bt--enhancer .enhancer__pill-icon {
  position: absolute;
  left: calc(9 * var(--f));
  top: calc(8 * var(--f));
  display: block;
  width: calc(22 * var(--f));
  height: calc(22 * var(--f));
  max-width: none;
}
.bt--enhancer .enhancer__pill-label {
  position: absolute;
  left: calc(38 * var(--f));
  top: calc(10 * var(--f));
  font-size: calc(14 * var(--f));
  font-weight: 600;
  line-height: calc(18 * var(--f));
  color: #0f1a2e;
  white-space: nowrap;
}
.bt--enhancer .enhancer__glass {
  position: absolute;
  box-sizing: border-box;
  left: calc(24 * var(--f));
  top: calc(276 * var(--f));
  width: calc(416 * var(--f));
  height: calc(186 * var(--f));
  border: 1px solid #fff;
  border-radius: calc(26 * var(--f));
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 calc(6 * var(--f)) calc(16 * var(--f)) calc(-4 * var(--f)) rgba(27, 42, 68, 0.06);
}
.bt--enhancer .enhancer__card {
  position: absolute;
  left: calc(32 * var(--f));
  top: calc(284 * var(--f));
  width: calc(400 * var(--f));
  height: calc(170 * var(--f));
  overflow: hidden;
  border-radius: calc(20 * var(--f));
  background: #fff;
  box-shadow: 0 calc(12 * var(--f)) calc(30 * var(--f)) calc(-8 * var(--f)) rgba(27, 42, 68, 0.12);
}
.bt--enhancer .enhancer__script {
  position: absolute;
  left: calc(20 * var(--f));
  top: calc(18 * var(--f));
  width: calc(360 * var(--f));
  margin: 0;
  font-size: calc(15 * var(--f));
  font-weight: 400;
  line-height: 1.5;
  color: rgba(15, 26, 46, 0.85);
}

/* -- tile: ideas -- */
.bt--ideas { background: #f1f3f6; }
.bt--ideas .ideas__tex { position: absolute; inset: 0; overflow: hidden; }
.bt--ideas .ideas__tex i {
  position: absolute;
  left: calc(var(--x) * var(--f));
  top: calc(var(--y) * var(--f));
  width: calc(14 * var(--f));
  height: calc(var(--h) * var(--f));
  border-radius: calc(7 * var(--f));
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 50%, rgba(255,255,255,0) 100%);
}
.bt--ideas .ideas__tex i:nth-child(even) {
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%);
}
.bt--ideas .ideas__num {
  position: absolute;
  left: calc(28 * var(--f));
  top: calc(140 * var(--f));
  height: calc(130 * var(--f));
  font-size: calc(104 * var(--f));
  font-weight: 700;
  line-height: calc(130 * var(--f));
  letter-spacing: -0.05em;
  color: #2e7dd7;
  white-space: nowrap;
}
.bt--ideas .ideas__num-label,
.bt--ideas .ideas__label {
  position: absolute;
  font-weight: 600;
  color: #5b6675;
  white-space: nowrap;
}
.bt--ideas .ideas__num-label {
  left: calc(157 * var(--f));
  top: calc(222 * var(--f));
  font-size: calc(17 * var(--f));
  line-height: calc(21 * var(--f));
}
.bt--ideas .ideas__label {
  left: calc(32 * var(--f));
  top: calc(282 * var(--f));
  font-size: calc(14 * var(--f));
  line-height: calc(18 * var(--f));
}
.bt--ideas .ideas__chip {
  position: absolute;
  box-sizing: border-box;
  left: calc(var(--x) * var(--f));
  top: calc(var(--y) * var(--f));
  width: calc(var(--cw) * var(--f));
  height: calc(36 * var(--f));
  padding: calc(8 * var(--f)) 0 0 calc(14 * var(--f));
  border: 1px solid #e3e7ed;
  border-radius: calc(99 * var(--f));
  background: #fff;
  filter: drop-shadow(0 calc(8 * var(--f)) calc(10 * var(--f)) rgba(27, 42, 68, 0.12));
  font-size: calc(14 * var(--f));
  font-weight: 600;
  line-height: calc(18 * var(--f));
  color: #0f1a2e;
  white-space: nowrap;
}

/* -- tile: hear -- */
.bt--hear .hear__tex { position: absolute; inset: 0; overflow: hidden; }
.bt--hear .hear__tex i {
  position: absolute;
  left: calc(var(--x) * var(--f));
  top: calc(var(--y) * var(--f));
  width: calc(14 * var(--f));
  height: calc(var(--h) * var(--f));
  border-radius: calc(7 * var(--f));
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 50%, rgba(255,255,255,0) 100%);
}
.bt--hear .hear__tex i:nth-child(even) {
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%);
}
.bt--hear .hear__glass {
  position: absolute;
  box-sizing: border-box;
  border: 1px solid #fff;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 calc(6 * var(--f)) calc(16 * var(--f)) calc(-4 * var(--f)) rgba(27, 42, 68, 0.06);
}
.bt--hear .hear__glass--pic {
  left: calc(24 * var(--f));
  top: calc(168 * var(--f));
  width: calc(416 * var(--f));
  height: calc(196 * var(--f));
  border-radius: calc(28 * var(--f));
}
.bt--hear .hear__glass--card {
  left: calc(48 * var(--f));
  top: calc(310 * var(--f));
  width: calc(368 * var(--f));
  height: calc(100 * var(--f));
  border-radius: calc(26 * var(--f));
}
.bt--hear .hear__pic {
  position: absolute;
  left: calc(32 * var(--f));
  top: calc(176 * var(--f));
  display: block;
  width: calc(400 * var(--f));
  height: calc(180 * var(--f));
  max-width: none;
  object-fit: cover;
  border-radius: calc(22 * var(--f));
  box-shadow: 0 calc(12 * var(--f)) calc(26 * var(--f)) calc(-6 * var(--f)) rgba(27, 42, 68, 0.16);
}
.bt--hear .hear__card {
  position: absolute;
  left: calc(56 * var(--f));
  top: calc(318 * var(--f));
  width: calc(352 * var(--f));
  height: calc(84 * var(--f));
  overflow: hidden;
  border-radius: calc(20 * var(--f));
  background: #fff;
  box-shadow: 0 calc(12 * var(--f)) calc(30 * var(--f)) calc(-8 * var(--f)) rgba(27, 42, 68, 0.12);
}
.bt--hear .hear__play {
  position: absolute;
  left: calc(16 * var(--f));
  top: calc(20 * var(--f));
  display: block;
  width: calc(44 * var(--f));
  height: calc(44 * var(--f));
  max-width: none;
}
.bt--hear .hear__who {
  position: absolute;
  left: calc(72 * var(--f));
  top: calc(16 * var(--f));
  font-size: calc(10 * var(--f));
  font-weight: 600;
  line-height: calc(13 * var(--f));
  letter-spacing: 0.12em;
  color: #5b6675;
  white-space: nowrap;
}
.bt--hear .hear__quote {
  position: absolute;
  left: calc(72 * var(--f));
  top: calc(32 * var(--f));
  font-size: calc(16 * var(--f));
  font-weight: 700;
  line-height: calc(20 * var(--f));
  color: #0f1a2e;
  white-space: nowrap;
}
.bt--hear .hear__wave i {
  position: absolute;
  left: calc(var(--x) * var(--f));
  top: calc(var(--y) * var(--f));
  width: calc(3 * var(--f));
  height: calc(var(--h) * var(--f));
  border-radius: calc(2 * var(--f));
  background: #e8790f;
}
.bt--hear .hear__wave i.is-off { background: rgba(232, 121, 15, 0.3); }

/* -- tile: ratios -- */
.bt--ratios { background: #f1f3f6; }

.bt--ratios .ra-texture i {
  position: absolute;
  left: calc(340 * var(--f));
  top: calc(var(--y) * var(--f));
  width: calc(612 * var(--f));
  height: calc(9 * var(--f));
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 25%, #fff 85%, rgba(255, 255, 255, 0) 100%);
}
.bt--ratios .ra-texture i:nth-child(even) { opacity: 0.55; }

.bt--ratios .ra-frame {
  position: absolute;
  display: block;
  box-sizing: border-box;
  max-width: none;
  object-fit: cover;
  /* Figma draws the 4px white stroke inside, over the image */
  outline: calc(4 * var(--f)) solid #fff;
  outline-offset: calc(-4 * var(--f));
  border-radius: calc(20 * var(--f));
  box-shadow: 0 calc(12 * var(--f)) calc(26 * var(--f)) calc(-6 * var(--f)) rgba(27, 42, 68, 0.16);
}
.bt--ratios .ra-frame--wide {
  left: calc(470 * var(--f));
  top: calc(64 * var(--f));
  width: calc(380 * var(--f));
  height: calc(214 * var(--f));
  border-radius: calc(22 * var(--f));
}
.bt--ratios .ra-frame--tall {
  left: calc(400 * var(--f));
  top: calc(180 * var(--f));
  width: calc(128 * var(--f));
  height: calc(228 * var(--f));
}
.bt--ratios .ra-frame--square {
  left: calc(730 * var(--f));
  top: calc(230 * var(--f));
  width: calc(170 * var(--f));
  height: calc(170 * var(--f));
}

.bt--ratios .ra-pill {
  position: absolute;
  left: calc(var(--x) * var(--f));
  top: calc(var(--y) * var(--f));
  display: flex;
  align-items: center;
  gap: calc(7 * var(--f));
  padding: calc(8 * var(--f)) calc(15 * var(--f)) calc(8 * var(--f)) calc(9 * var(--f));
  background: #fff;
  border: 1px solid #e3e7ed;
  border-radius: calc(99 * var(--f));
  filter: drop-shadow(0 calc(8 * var(--f)) calc(10 * var(--f)) rgba(27, 42, 68, 0.12));
  font-size: calc(13 * var(--f));
  font-weight: 600;
  line-height: normal;
  color: #0f1a2e;
  white-space: nowrap;
}
.bt--ratios .ra-pill img {
  display: block;
  flex: none;
  width: calc(22 * var(--f));
  height: calc(22 * var(--f));
}

/* -- tile: rewrite -- */
.bt--rewrite { background: #f1f3f6; }

.bt--rewrite .rw-texture i {
  position: absolute;
  left: calc(340 * var(--f));
  top: calc(var(--y) * var(--f));
  width: calc(612 * var(--f));
  height: calc(9 * var(--f));
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 25%, #fff 85%, rgba(255, 255, 255, 0) 100%);
}
.bt--rewrite .rw-texture i:nth-child(even) { opacity: 0.55; }

.bt--rewrite .rw-glass {
  position: absolute;
  left: calc(412 * var(--f));
  top: calc(54 * var(--f));
  width: calc(476 * var(--f));
  height: calc(332 * var(--f));
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid #fff;
  border-radius: calc(26 * var(--f));
  box-shadow: 0 calc(6 * var(--f)) calc(16 * var(--f)) calc(-4 * var(--f)) rgba(27, 42, 68, 0.06);
}

/* Scene list card; rows are positioned in card coordinates */
.bt--rewrite .rw-scenes {
  position: absolute;
  left: calc(420 * var(--f));
  top: calc(62 * var(--f));
  width: calc(460 * var(--f));
  height: calc(316 * var(--f));
  overflow: hidden;
  background: #fff;
  border-radius: calc(20 * var(--f));
  box-shadow: 0 calc(12 * var(--f)) calc(30 * var(--f)) calc(-8 * var(--f)) rgba(27, 42, 68, 0.12);
}
.bt--rewrite .rw-highlight {
  position: absolute;
  left: calc(10 * var(--f));
  top: calc(128 * var(--f));
  width: calc(440 * var(--f));
  height: calc(54 * var(--f));
  background: rgba(14, 143, 140, 0.1);
  border-radius: calc(14 * var(--f));
}
.bt--rewrite .rw-row {
  position: absolute;
  left: calc(20 * var(--f));
  top: calc((14 + 59 * var(--i)) * var(--f));
  width: calc(420 * var(--f));
  height: calc(46 * var(--f));
}
.bt--rewrite .rw-thumb {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: calc(72 * var(--f));
  height: calc(46 * var(--f));
  max-width: none;
  object-fit: cover;
  border-radius: calc(10 * var(--f));
}
.bt--rewrite .rw-num,
.bt--rewrite .rw-name {
  position: absolute;
  left: calc(88 * var(--f));
  line-height: normal;
  white-space: nowrap;
}
.bt--rewrite .rw-num {
  top: calc(5 * var(--f));
  font-size: calc(12 * var(--f));
  font-weight: 700;
  color: #5b6675;
}
.bt--rewrite .rw-name {
  top: calc(21 * var(--f));
  font-size: calc(16 * var(--f));
  font-weight: 600;
  color: #0f1a2e;
}
.bt--rewrite .rw-row--active .rw-num { color: #0e8f8c; }

.bt--rewrite .rw-pill {
  position: absolute;
  left: calc(var(--x) * var(--f));
  top: calc(var(--y) * var(--f));
  display: flex;
  align-items: center;
  gap: calc(7 * var(--f));
  padding: calc(8 * var(--f)) calc(15 * var(--f)) calc(8 * var(--f)) calc(9 * var(--f));
  background: #fff;
  border: 1px solid #e3e7ed;
  border-radius: calc(99 * var(--f));
  filter: drop-shadow(0 calc(8 * var(--f)) calc(10 * var(--f)) rgba(27, 42, 68, 0.12));
  font-size: calc(13 * var(--f));
  font-weight: 600;
  line-height: normal;
  color: #0f1a2e;
  white-space: nowrap;
}
.bt--rewrite .rw-pill img {
  display: block;
  flex: none;
  width: calc(22 * var(--f));
  height: calc(22 * var(--f));
}

/* -- tile: camera -- */
.bt--camera { background: #f1f3f6; }
/* Texture: rows of white gradient bars */
.bt--camera .tx { position: absolute; inset: 0; overflow: hidden; }
.bt--camera .tx i {
  position: absolute;
  left: calc(var(--x) * var(--f));
  top: calc(var(--y) * var(--f));
  width: calc(14 * var(--f));
  height: calc(var(--h) * var(--f));
  border-radius: calc(7 * var(--f));
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 50%, rgba(255,255,255,0));
}
.bt--camera .tx i:nth-child(even) {
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.6) 50%, rgba(255,255,255,0));
}
/* Picture card: frosted holder, still, dashed crop frame */
.bt--camera .cam-glass {
  position: absolute;
  left: calc(24 * var(--f));
  top: calc(172 * var(--f));
  width: calc(416 * var(--f));
  height: calc(242 * var(--f));
  box-sizing: border-box;
  background: rgba(255,255,255,0.7);
  border: 1px solid #fff;
  border-radius: calc(28 * var(--f));
  box-shadow: 0 calc(6 * var(--f)) calc(16 * var(--f)) calc(-4 * var(--f)) rgba(27,42,68,0.06);
}
.bt--camera .cam-shot {
  position: absolute;
  left: calc(32 * var(--f));
  top: calc(180 * var(--f));
  width: calc(400 * var(--f));
  height: calc(226 * var(--f));
  overflow: hidden;
  border-radius: calc(22 * var(--f));
  box-shadow: 0 calc(12 * var(--f)) calc(26 * var(--f)) calc(-6 * var(--f)) rgba(27,42,68,0.16);
}
/* The shot slowly pushes in toward the dashed frame and eases back out */
.bt--camera .cam-shot img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  animation: cam-push 6s ease-in-out infinite alternate;
}
@keyframes cam-push { from { transform: scale(1); } to { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .bt--camera .cam-shot img { animation: none; } }
.bt--camera .cam-crop {
  position: absolute;
  left: calc(72 * var(--f));
  top: calc(215 * var(--f));
  width: calc(320 * var(--f));
  height: calc(156 * var(--f));
  box-sizing: border-box;
  border: calc(2 * var(--f)) dashed #fff;
  border-radius: calc(12 * var(--f));
}
/* Pills */
.bt--camera .cam-pill {
  position: absolute;
  display: flex;
  align-items: center;
  gap: calc(7 * var(--f));
  padding: calc(8 * var(--f)) calc(15 * var(--f)) calc(8 * var(--f)) calc(9 * var(--f));
  background: #fff;
  border: 1px solid #e3e7ed;
  border-radius: calc(99 * var(--f));
  box-shadow: 0 calc(8 * var(--f)) calc(10 * var(--f)) rgba(27,42,68,0.12);
  font-size: calc(12 * var(--f));
  font-weight: 600;
  line-height: calc(15 * var(--f));
  color: #0f1a2e;
  white-space: nowrap;
}
.bt--camera .cam-pill img {
  display: block;
  flex: none;
  width: calc(22 * var(--f));
  height: calc(22 * var(--f));
  max-width: none;
}
.bt--camera .cam-pill--push { left: calc(48 * var(--f)); top: calc(196 * var(--f)); }
.bt--camera .cam-pill--pan  { left: calc(336 * var(--f)); top: calc(362 * var(--f)); }

/* -- tile: takes -- */
.bt--takes { background: #f1f3f6; }
/* Texture: rows of white gradient bars */
.bt--takes .tx { position: absolute; inset: 0; overflow: hidden; }
.bt--takes .tx i {
  position: absolute;
  left: calc(var(--x) * var(--f));
  top: calc(var(--y) * var(--f));
  width: calc(14 * var(--f));
  height: calc(var(--h) * var(--f));
  border-radius: calc(7 * var(--f));
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 50%, rgba(255,255,255,0));
}
.bt--takes .tx i:nth-child(even) {
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.6) 50%, rgba(255,255,255,0));
}
/* Stacked takes: unrotated boxes centred in Figma's rotated bounding boxes */
.bt--takes .tk-take {
  position: absolute;
  display: block;
  max-width: none;
  box-sizing: border-box;
  object-fit: cover;
  border: calc(4 * var(--f)) solid #fff;
  border-radius: calc(18 * var(--f));
  box-shadow: 0 calc(12 * var(--f)) calc(26 * var(--f)) calc(-6 * var(--f)) rgba(27,42,68,0.16);
}
.bt--takes .tk-take--1 {
  left: calc(77.976 * var(--f));
  top: calc(150.056 * var(--f));
  width: calc(220 * var(--f));
  height: calc(130 * var(--f));
  rotate: -8deg;
  opacity: 0.55;
}
.bt--takes .tk-take--2 {
  left: calc(99.649 * var(--f));
  top: calc(189.362 * var(--f));
  width: calc(250 * var(--f));
  height: calc(146 * var(--f));
  rotate: -3deg;
  opacity: 0.8;
}
.bt--takes .tk-take--3 {
  left: calc(92 * var(--f));
  top: calc(236 * var(--f));
  width: calc(280 * var(--f));
  height: calc(164 * var(--f));
  border-radius: calc(20 * var(--f));
}
/* Pills */
.bt--takes .tk-pill {
  position: absolute;
  display: flex;
  align-items: center;
  gap: calc(7 * var(--f));
  padding: calc(8 * var(--f)) calc(15 * var(--f)) calc(8 * var(--f)) calc(9 * var(--f));
  background: #fff;
  border: 1px solid #e3e7ed;
  border-radius: calc(99 * var(--f));
  box-shadow: 0 calc(8 * var(--f)) calc(10 * var(--f)) rgba(27,42,68,0.12);
  font-size: calc(13 * var(--f));
  font-weight: 600;
  line-height: calc(16 * var(--f));
  color: #0f1a2e;
  white-space: nowrap;
}
.bt--takes .tk-pill img {
  display: block;
  flex: none;
  width: calc(22 * var(--f));
  height: calc(22 * var(--f));
  max-width: none;
}
.bt--takes .tk-pill--now     { left: calc(262 * var(--f)); top: calc(222 * var(--f)); }
.bt--takes .tk-pill--restore { left: calc(250 * var(--f)); top: calc(406 * var(--f)); }

/* -- tile: export -- */
.bt--export { background: #f1f3f6; }
/* Texture: rows of white gradient bars */
.bt--export .tx { position: absolute; inset: 0; overflow: hidden; }
.bt--export .tx i {
  position: absolute;
  left: calc(var(--x) * var(--f));
  top: calc(var(--y) * var(--f));
  width: calc(14 * var(--f));
  height: calc(var(--h) * var(--f));
  border-radius: calc(7 * var(--f));
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 50%, rgba(255,255,255,0));
}
.bt--export .tx i:nth-child(even) {
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.6) 50%, rgba(255,255,255,0));
}
/* Frosted holder + white card (card children use card-relative Figma coords) */
.bt--export .ex-glass {
  position: absolute;
  left: calc(24 * var(--f));
  top: calc(164 * var(--f));
  width: calc(416 * var(--f));
  height: calc(216 * var(--f));
  box-sizing: border-box;
  background: rgba(255,255,255,0.7);
  border: 1px solid #fff;
  border-radius: calc(26 * var(--f));
  box-shadow: 0 calc(6 * var(--f)) calc(16 * var(--f)) calc(-4 * var(--f)) rgba(27,42,68,0.06);
}
.bt--export .ex-card {
  position: absolute;
  left: calc(32 * var(--f));
  top: calc(172 * var(--f));
  width: calc(400 * var(--f));
  height: calc(200 * var(--f));
  overflow: hidden;
  background: #fff;
  border-radius: calc(20 * var(--f));
  box-shadow: 0 calc(12 * var(--f)) calc(30 * var(--f)) calc(-8 * var(--f)) rgba(27,42,68,0.12);
}
/* Progress ring: r=52, circumference 326.73. A 78% arc from 12 o'clock (the dash offset
   is the unfilled 22%; data-ring fills it from empty the first time it's seen). */
.bt--export .ex-ring {
  position: absolute;
  left: calc(24 * var(--f));
  top: calc(35 * var(--f));
  width: calc(130 * var(--f));
  height: calc(130 * var(--f));
  display: block;
  overflow: visible;
}
.bt--export .ex-ring circle { fill: none; stroke-width: 11.8182; }
.bt--export .ex-ring__track { stroke: #e7eef0; }
.bt--export .ex-ring__bar {
  stroke: #1f9d5c;
  stroke-linecap: round;
  stroke-dasharray: 326.73;
  stroke-dashoffset: 71.88;
  transform: rotate(-90deg);
  transform-origin: 65px 65px;
}
.bt--export .ex-pct {
  position: absolute;
  left: calc(24 * var(--f));
  top: calc(82 * var(--f));
  width: calc(130 * var(--f));
  text-align: center;
  font-size: calc(30 * var(--f));
  font-weight: 700;
  line-height: calc(38 * var(--f));
  color: #0f1a2e;
}
.bt--export .ex-fmt {
  position: absolute;
  left: calc(184 * var(--f));
  top: calc(44 * var(--f));
  font-size: calc(26 * var(--f));
  font-weight: 700;
  line-height: calc(33 * var(--f));
  color: #0f1a2e;
  white-space: nowrap;
}
.bt--export .ex-status {
  position: absolute;
  left: calc(184 * var(--f));
  top: calc(76 * var(--f));
  font-size: calc(14 * var(--f));
  font-weight: 400;
  line-height: calc(18 * var(--f));
  color: #5b6675;
  white-space: nowrap;
}
.bt--export .ex-chips {
  position: absolute;
  left: calc(184 * var(--f));
  top: calc(110 * var(--f));
  display: flex;
  gap: calc(6 * var(--f));
}
.bt--export .ex-chip {
  padding: calc(5 * var(--f)) calc(10 * var(--f));
  background: rgba(31,157,92,0.12);
  border-radius: calc(99 * var(--f));
  font-size: calc(12 * var(--f));
  font-weight: 600;
  line-height: calc(15 * var(--f));
  color: #1f9d5c;
  white-space: nowrap;
}

/* -- tile: post -- */
.bt--post { background: #f1f3f6; }
/* Texture: rows of white gradient bars */
.bt--post .tx { position: absolute; inset: 0; overflow: hidden; }
.bt--post .tx i {
  position: absolute;
  left: calc(var(--x) * var(--f));
  top: calc(var(--y) * var(--f));
  width: calc(14 * var(--f));
  height: calc(var(--h) * var(--f));
  border-radius: calc(7 * var(--f));
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 50%, rgba(255,255,255,0));
}
.bt--post .tx i:nth-child(even) {
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.6) 50%, rgba(255,255,255,0));
}
/* Four posts: thumbnail, platform logo, check badge, name, meta (tile coords via --x/--y) */
.bt--post .ps-post > * { position: absolute; }
.bt--post .ps-post > img { display: block; max-width: none; }
.bt--post .ps-thumb {
  left: calc(var(--x) * var(--f));
  top: calc(var(--y) * var(--f));
  width: calc(var(--w) * var(--f));
  height: calc(var(--h) * var(--f));
  box-sizing: border-box;
  object-fit: cover;
  border: calc(4 * var(--f)) solid #fff;
  border-radius: calc(14 * var(--f));
  box-shadow: 0 calc(12 * var(--f)) calc(26 * var(--f)) calc(-6 * var(--f)) rgba(27,42,68,0.16);
}
.bt--post .ps-logo {
  left: calc(var(--x) * var(--f));
  top: calc(var(--y) * var(--f));
  width: calc(30 * var(--f));
  height: calc(30 * var(--f));
}
.bt--post .ps-check {
  left: calc(var(--x) * var(--f));
  top: calc(var(--y) * var(--f));
  width: calc(20 * var(--f));
  height: calc(20 * var(--f));
}
.bt--post .ps-name,
.bt--post .ps-meta {
  left: calc(var(--x) * var(--f));
  white-space: nowrap;
}
.bt--post .ps-name {
  top: calc(356 * var(--f));
  font-size: calc(13 * var(--f));
  font-weight: 700;
  line-height: calc(16 * var(--f));
  color: #0f1a2e;
}
.bt--post .ps-meta {
  top: calc(374 * var(--f));
  font-size: calc(11 * var(--f));
  font-weight: 400;
  line-height: calc(14 * var(--f));
  color: #5b6675;
}

/* ============ OPPORTUNITY (Figma 13b, 1920 x 2812) ============
   Dark stage with rounded top corners over the light feature grid. --sf is one Figma px.
   The board (--b) and ticket (--k) keep a minimum size on phones; the board then
   scrolls sideways. */
.opp {
  --sf: min(1px, 100cqw / 1920);
  background: #f4f4f6;             /* shows behind the stage's rounded corners */
  color: #fff;
}
.opp__stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: calc(180 * var(--sf)) 0 calc(170 * var(--sf));
  border-radius: calc(56 * var(--sf)) calc(56 * var(--sf)) 0 0;
  background: linear-gradient(180deg, #0b0b16 0%, #000 35%, #050508 100%);
}
.opp__decor { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.opp__decor img { position: absolute; display: block; max-width: none; }
.opp__glow  { left: calc(50% - 770 * var(--sf)); top: calc(310 * var(--sf)); width: calc(1540 * var(--sf)); height: calc(660 * var(--sf)); }
.opp__spot  { top: calc(-96 * var(--sf)); width: calc(1100 * var(--sf)); height: calc(1172 * var(--sf)); }
.opp__spot--left  { left: calc(50% - 1100 * var(--sf)); }
.opp__spot--right { left: calc(50% + 0 * var(--sf)); }
.opp__dust  { left: calc(50% - 961 * var(--sf)); top: 0; width: calc(1922 * var(--sf)); height: calc(895 * var(--sf)); }

.opp__wrap {
  width: min(calc(1440 * var(--sf)), 100% - 32px);
  margin: 0 auto;
}
.opp p { margin: 0; }

.opp-title { display: flex; flex-direction: column; align-items: flex-start; margin: 0; }
.opp-title__main {
  font-size: max(28px, calc(56 * var(--sf)));
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.025em;
}
.opp-title__script {
  margin-top: -0.06em;
  font-family: var(--font-script);
  font-size: max(32px, calc(64 * var(--sf)));
  line-height: 0.88;
  color: rgba(255, 255, 255, 0.6);
}
.opp-title--bridge { align-items: center; margin-top: calc(170 * var(--sf)); text-align: center; }
.opp-title--bridge .opp-title__main { line-height: 0.96; }

/* ---- Departures board ---- */
.opp-board-scroll { margin: calc(60 * var(--sf)) 0 0 calc(8 * var(--sf)); }
.opp-board {
  --b: var(--sf);
  position: relative;
  box-sizing: border-box;
  width: calc(1424 * var(--b));
  height: calc(530 * var(--b));
  border: 1.2px solid rgba(255, 255, 255, 0.18);
  border-radius: calc(28 * var(--b));
  background: linear-gradient(180deg, #17171b, #0b0b0d);
  box-shadow: 0 calc(40 * var(--b)) calc(40 * var(--b)) rgba(0, 0, 0, 0.7);
}
.opp-board__head span {
  position: absolute;
  left: calc(var(--x) * var(--b));
  top: calc(46.8 * var(--b));
  font-size: calc(12 * var(--b));
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.45);
  white-space: nowrap;
}
.opp-board__head .opp-board__live { display: flex; align-items: center; gap: calc(8 * var(--b)); top: calc(44.8 * var(--b)); letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.6); }
.opp-board__live img { width: calc(8 * var(--b)); height: calc(8 * var(--b)); transform: scale(3); animation: opp-live 2s ease-in-out infinite; }
@keyframes opp-live { 50% { opacity: 0.35; } }

.opp-board__rows {
  position: absolute;
  left: calc(38.8 * var(--b));
  top: calc(94.8 * var(--b));
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--b));
}
.flap-row { position: relative; display: flex; gap: calc(40 * var(--b)); }
.flap-row + .flap-row::before {      /* hairline between rows */
  content: "";
  position: absolute;
  left: 0;
  top: calc(-8 * var(--b));
  width: calc(1344 * var(--b));
  height: 1px;
  background: rgba(255, 255, 255, 0.04);
}
.flap-group { display: flex; gap: calc(4 * var(--b)); font-size: calc(30 * var(--b)); font-weight: 700; line-height: 1; color: #f4f1ea; }
.flap-group--status { color: #3ddc84; }
.flap {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(40 * var(--b));
  height: calc(54 * var(--b));
  padding-top: calc(2 * var(--b));
  box-sizing: border-box;
  overflow: hidden;
  border-radius: calc(6 * var(--b));
  background: linear-gradient(180deg, #2a2a2e 0%, #1e1e22 50%, #18181b 50%, #111113 100%);
  box-shadow: 0 calc(2 * var(--b)) calc(3 * var(--b)) rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  perspective: calc(160 * var(--b));
}
.flap::after {                         /* the split between the two flaps */
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: calc(27 * var(--b));
  height: 1px;
  background: rgba(0, 0, 0, 0.7);
}
.flap__ch { display: block; backface-visibility: hidden; }
.flap-row--yours .flap-group { color: #ffd24a; }
.flap-row--yours .flap {
  border: 1px solid rgba(255, 210, 74, 0.45);
  background: linear-gradient(180deg, #2e2610 0%, #231d0b 50%, #1c1708 50%, #14110a 100%);
  box-shadow: 0 calc(2 * var(--b)) calc(3 * var(--b)) rgba(0, 0, 0, 0.6), 0 0 calc(15 * var(--b)) rgba(255, 210, 74, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.flap-row--yours .flap::after { top: calc(26 * var(--b)); }
.flap-row--yours.is-landed .flap-group--status { animation: opp-boarding 1.6s steps(1) infinite; }
@keyframes opp-boarding { 50% { opacity: 0.35; } }

.opp-note {
  margin-top: calc(28 * var(--sf)) !important;
  margin-left: calc(8 * var(--sf)) !important;
  font-size: max(10px, calc(12 * var(--sf)));
  font-weight: 500;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.32);
}
.opp-note--center { margin: calc(66 * var(--sf)) auto 0 !important; max-width: 60em; text-align: center; color: rgba(255, 255, 255, 0.3); }

/* ---- 66.5B ---- */
.opp-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: calc(170 * var(--sf));
}
.opp-stat__label { font-size: max(11px, calc(13 * var(--sf))); font-weight: 600; letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.5); }
.opp-stat__pill {
  margin-right: calc(-5 * var(--sf)) !important;
  padding: max(6px, calc(9 * var(--sf))) max(12px, calc(16 * var(--sf))) max(6px, calc(9 * var(--sf))) max(10px, calc(14 * var(--sf)));
  border: 1px solid rgba(61, 220, 132, 0.5);
  border-radius: 999px;
  background: rgba(61, 220, 132, 0.14);
  font-size: max(12px, calc(15 * var(--sf)));
  font-weight: 600;
  line-height: 1;
  color: #7cf2a9;
  white-space: nowrap;
}
.opp-big {
  margin: calc(15 * var(--sf)) 0 0 calc(-6 * var(--sf)) !important;
  width: max-content;
  font-size: max(44px, calc(206 * var(--sf)));   /* Figma 213; the web font sets digits ~3% wider */
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  white-space: nowrap;
  padding-right: 0.06em;           /* room for the last digit, which the tight spacing pushes out */
  background: linear-gradient(180deg, #fff, rgba(255, 255, 255, 0.35));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.opp-sub {
  margin-top: calc(22 * var(--sf)) !important;
  font-size: max(16px, calc(22 * var(--sf)));
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}

/* ---- Your slice ---- */
.opp-slice {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-top: calc(64 * var(--sf));
  min-height: calc(230 * var(--sf));
  box-sizing: border-box;
  padding: calc(42.8 * var(--sf)) calc(64 * var(--sf)) 0 calc(46.8 * var(--sf));
  border: 1.2px solid rgba(255, 212, 107, 0.5);
  border-radius: calc(36 * var(--sf));
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.opp-slice__title { font-family: var(--font-script); font-size: max(36px, calc(64 * var(--sf))); line-height: 0.9; color: #ffd46b; }
.opp-slice__value { display: flex; align-items: baseline; gap: calc(14 * var(--sf)); margin-top: calc(22 * var(--sf)) !important; line-height: 1; white-space: nowrap; }
.opp-slice__value [data-slice-out] { font-size: max(32px, calc(56 * var(--sf))); font-weight: 700; letter-spacing: -0.024em; font-variant-numeric: tabular-nums; }
.opp-slice__unit { font-size: max(14px, calc(18 * var(--sf))); font-weight: 500; color: rgba(255, 255, 255, 0.6); }

.opp-slice__control { width: calc(736 * var(--sf)); padding-top: calc(30 * var(--sf)); }
.opp-slice__hint { font-size: max(12px, calc(13 * var(--sf))); font-weight: 500; line-height: 1; color: rgba(255, 255, 255, 0.4); }
.opp-slice__track {
  position: relative;
  height: max(6px, calc(8 * var(--sf)));
  margin-top: calc(36 * var(--sf));
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.1);
}
.opp-slice__tick {
  position: absolute;
  left: calc(var(--at) * 100% - 1px);
  top: 50%;
  width: 2px;
  height: max(12px, calc(16 * var(--sf)));
  translate: 0 -50%;
  background: rgba(255, 255, 255, 0.35);
}
.opp-slice__fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: calc(var(--p) * 100%);
  border-radius: inherit;
  background: linear-gradient(90deg, #ffb347, #ffe38a);
  box-shadow: 0 0 12px rgba(255, 212, 107, 0.6);
}
.opp-slice__knob {                     /* the SVG is 74 square with a 34 knob in the middle */
  position: absolute;
  left: calc(var(--p) * 100%);
  top: 50%;
  width: max(56px, calc(74 * var(--sf)));
  height: max(56px, calc(74 * var(--sf)));
  max-width: none;
  translate: -50% -50%;
  pointer-events: none;
}
.opp-slice__track input {
  position: absolute;
  left: calc(-1 * max(14px, calc(17 * var(--sf))));
  right: calc(-1 * max(14px, calc(17 * var(--sf))));
  top: 50%;
  height: 44px;
  margin: 0;
  translate: 0 -50%;
  opacity: 0;
  cursor: grab;
  touch-action: pan-y;
}
.opp-slice__track input:active { cursor: grabbing; }
.opp-slice__track:has(input:focus-visible) .opp-slice__knob { filter: drop-shadow(0 0 0 #fff) drop-shadow(0 0 6px #ffd46b); }
.opp-slice__marks { position: relative; height: calc(40 * var(--sf) + 24px); margin-top: calc(22 * var(--sf)); }
.opp-slice__mark {
  position: absolute;
  left: calc(var(--at) * 100%);
  translate: calc(var(--at) * -100%) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(9 * var(--sf) + 1px);
  font-size: max(11px, calc(13 * var(--sf)));
  font-weight: 500;
  line-height: 1;
  color: rgba(255, 255, 255, 0.4);
  white-space: nowrap;
  transition: color 0.2s;
}
.opp-slice__mark[style*="--at: 0;"] { align-items: flex-start; }
.opp-slice__mark[style*="--at: 1;"] { align-items: flex-end; }
.opp-slice__mark b { font-size: max(12px, calc(15 * var(--sf))); font-weight: 600; color: rgba(255, 255, 255, 0.55); transition: color 0.2s; }
.opp-slice__mark.is-on { color: rgba(255, 255, 255, 0.8); }
.opp-slice__mark.is-on b { color: #fff; }

/* ---- Golden ticket (1120 x 420, tilted 2.5deg) ---- */
.opp-ticket-wrap { margin: calc(174 * var(--sf)) 0 0 calc(168.6 * var(--sf)); }
.opp-ticket {
  --k: max(0.31px, var(--sf));
  position: relative;
  width: calc(1120 * var(--k));
  height: calc(420 * var(--k));
  overflow: hidden;
  border-radius: calc(28 * var(--k));
  rotate: 2.5deg;
  color: #3a2200;
  background: linear-gradient(153.43deg, #fff0c2 0%, #f6c95a 20%, #e3a52c 39.3%, #ffe29a 55.7%, #d9921c 71.4%);
  box-shadow: 0 calc(30 * var(--k)) calc(80 * var(--k)) rgba(245, 184, 61, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.7);
}
.opp-ticket > * { position: absolute; margin: 0; }
.opp-ticket__sheen {
  left: calc(327 * var(--k));
  top: calc(-126 * var(--k));
  width: calc(260 * var(--k));
  height: calc(672 * var(--k));
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0));
  filter: blur(calc(10 * var(--k)));
  transform: translateX(0) rotate(24deg);
  animation: opp-sheen 7s ease-in-out infinite;
  will-change: transform;
}
@keyframes opp-sheen {           /* rests where Figma has it, sweeps across every few seconds */
  0%, 55%  { transform: translateX(0) rotate(24deg); }
  75%      { transform: translateX(calc(900 * var(--k))) rotate(24deg); opacity: 1; }
  76%      { transform: translateX(calc(900 * var(--k))) rotate(24deg); opacity: 0; }
  77%      { transform: translateX(calc(-700 * var(--k))) rotate(24deg); opacity: 0; }
  78%      { opacity: 1; }
  100%     { transform: translateX(0) rotate(24deg); }
}
.opp-ticket__border {
  left: calc(16 * var(--k)); top: calc(16 * var(--k));
  width: calc(1088 * var(--k)); height: calc(388 * var(--k));
  box-sizing: border-box;
  border: 1.5px dashed rgba(122, 74, 0, 0.35);
  border-radius: calc(18 * var(--k));
}
.opp-ticket__perf { left: calc(818 * var(--k)); top: 0; width: calc(4 * var(--k)); height: calc(420 * var(--k)); }
.opp-ticket__notch { left: calc(798 * var(--k)); width: calc(44 * var(--k)); height: calc(44 * var(--k)); }
.opp-ticket__notch--top { top: calc(-22 * var(--k)); }
.opp-ticket__notch--bottom { top: calc(398 * var(--k)); }
.opp-ticket__main { left: 0; top: 0; width: calc(800 * var(--k)); height: 100%; }
.opp-ticket__main > *, .opp-ticket__stub > * { position: absolute; margin: 0; line-height: 1; white-space: nowrap; }
.opp-ticket__kicker { left: calc(56 * var(--k)); top: calc(52 * var(--k)); font-size: calc(14 * var(--k)); font-weight: 700; letter-spacing: 0.14em; white-space: pre !important; color: rgba(58, 34, 0, 0.75); }
.opp-ticket__title { left: calc(52 * var(--k)); top: calc(82 * var(--k)); font-family: var(--font-script); font-size: calc(96 * var(--k)); line-height: 0.88 !important; }
.opp-ticket__text { left: calc(56 * var(--k)); top: calc(174 * var(--k)); width: calc(640 * var(--k)); font-size: calc(19 * var(--k)); font-weight: 500; line-height: 1.4 !important; white-space: normal !important; color: rgba(58, 34, 0, 0.8); }
.opp-ticket__stats { left: calc(56 * var(--k)); top: calc(272 * var(--k)); display: flex; }
.opp-ticket__stats > div { position: relative; width: calc(238.67 * var(--k)); }
.opp-ticket__stats > div + div { padding-left: calc(14 * var(--k)); margin-left: calc(-14 * var(--k)); }
.opp-ticket__stats > div + div::before { content: ""; position: absolute; left: 0; top: calc(6 * var(--k)); width: 1.5px; height: calc(80 * var(--k)); background: rgba(58, 34, 0, 0.25); }
.opp-ticket__stats p { margin: 0; line-height: 1; white-space: nowrap; }
.opp-ticket__grab { font-size: calc(12 * var(--k)); font-weight: 700; letter-spacing: 0.1em; color: rgba(58, 34, 0, 0.6); }
.opp-ticket__num { margin: calc(10 * var(--k)) 0 0 calc(-2 * var(--k)) !important; font-size: calc(44 * var(--k)); font-weight: 700; letter-spacing: -0.02em; }
.opp-ticket__per { margin-top: calc(8 * var(--k)) !important; font-size: calc(13 * var(--k)); font-weight: 500; color: rgba(58, 34, 0, 0.65); }
.opp-ticket__stub { left: calc(820 * var(--k)); top: 0; width: calc(300 * var(--k)); height: 100%; text-align: center; }
.opp-ticket__brand { left: 0; right: 0; top: calc(52 * var(--k)); font-size: calc(13 * var(--k)); font-weight: 700; letter-spacing: 0.16em; color: rgba(58, 34, 0, 0.7); }
.opp-ticket__growth { left: 0; right: 0; top: calc(88 * var(--k)); font-family: var(--font-script); font-size: calc(104 * var(--k)); line-height: 0.88 !important; }
.opp-ticket__growth-label { left: 0; right: 0; top: calc(186 * var(--k)); font-size: calc(12 * var(--k)); font-weight: 700; letter-spacing: 0.12em; color: rgba(58, 34, 0, 0.65); }
.opp-ticket__barcode { left: calc(50 * var(--k)); top: calc(278 * var(--k)); width: calc(200 * var(--k)); height: calc(64 * var(--k)); }
.opp-ticket__no { left: 0; right: 0; top: calc(352 * var(--k)); font-size: calc(12 * var(--k)); font-weight: 500; letter-spacing: 0.06em; color: rgba(58, 34, 0, 0.6); }

/* ---- Phones and tablets ---- */
@media (max-width: 1023px) {
  .opp__stage { padding: 72px 0 80px; border-radius: 28px 28px 0 0; }
  .opp__wrap { width: calc(100% - 32px); }
  .opp-title--bridge { margin-top: 72px; }
  .opp-board-scroll {
    margin: 28px -16px 0;
    padding: 0 16px 32px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .opp-board-scroll::-webkit-scrollbar { display: none; }
  .opp-board { --b: max(0.5px, var(--sf)); }
  .opp-note { margin: 0 !important; }
  .opp-stat { margin-top: 64px; }
  .opp-big { margin: 10px 0 0 !important; font-size: min(calc((100vw - 32px) / 7.3), 190px); }
  .opp-sub { margin-top: 12px !important; }
  .opp-slice { flex-direction: column; gap: 20px; margin-top: 32px; padding: 24px 22px 8px; border-radius: 24px; }
  .opp-slice__value { margin-top: 10px !important; gap: 10px; }
  .opp-slice__control { width: 100%; padding-top: 0; }
  .opp-slice__track { margin-top: 30px; }
  .opp-slice__marks { height: 50px; margin-top: 18px; }
  .opp-ticket-wrap { margin: 56px 0 0; display: flex; justify-content: center; }
  .opp-ticket { --k: min(1px, (100vw - 48px) / 1120); }
  .opp-note--center { margin-top: 32px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .opp-ticket__sheen, .opp-board__live img, .flap-row--yours.is-landed .flap-group--status { animation: none; }
}

/* ============ BIG SCREEN (Figma 14, 1920 x 1720) ============
   A cinema: ceiling grid, the main screen with two angled side screens, the film's
   caption, then rows of seats fading into the light section below. --sf is one Figma px. */
.big {
  --sf: min(1px, 100cqw / 1920);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: calc(140 * var(--sf));
  background: #08080a;
  color: #fff;
}
.big p { margin: 0; }
.big__decor { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.big__decor > * { position: absolute; display: block; max-width: none; }
.big__grid  { left: calc(50% - 960 * var(--sf)); top: 0; width: calc(1920 * var(--sf)); height: calc(900 * var(--sf)); }
.big__haze  {
  left: calc(50% - 720 * var(--sf)); top: calc(420 * var(--sf));
  width: calc(1440 * var(--sf)); height: calc(858 * var(--sf));
  border-radius: calc(200 * var(--sf));
  background: rgba(242, 180, 138, 0.16);
  filter: blur(calc(60 * var(--sf)));
}
.big__spill { left: calc(50% - 910 * var(--sf)); top: calc(978 * var(--sf)); width: calc(1820 * var(--sf)); height: calc(640 * var(--sf)); }

.big__head { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 16px; }
.big__pill {
  padding: max(7px, calc(9 * var(--sf))) max(16px, calc(20 * var(--sf)));
  border-radius: 99px;
  background: linear-gradient(180deg, #ffe46e, #ffd02b);
  box-shadow: 0 calc(6 * var(--sf)) calc(18 * var(--sf)) rgba(255, 196, 0, 0.3), inset 0 1.5px 0 rgba(255, 255, 255, 0.6);
  font-size: max(14px, calc(18 * var(--sf)));
  font-weight: 700;
  line-height: normal;
  color: #0e0b1e;
}
.big__title { display: flex; flex-direction: column; align-items: center; margin: calc(15 * var(--sf)) 0 0; }
.big__title-main {
  font-size: max(40px, calc(96 * var(--sf)));
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.04em;
}
.big__title-script {
  margin-top: calc(-6 * var(--sf));
  font-family: var(--font-script);
  font-size: max(40px, calc(96 * var(--sf)));
  line-height: 1.24;
}

/* ---- Screens ---- */
.big__theatre {
  position: relative;
  width: min(calc(1240 * var(--sf)), 100% - 32px);
  margin: calc(71 * var(--sf)) auto 0;
}
.big-screen {
  position: relative;
  aspect-ratio: 1240 / 698;
  overflow: hidden;
  border-radius: calc(16 * var(--sf));
  background: #000;
  box-shadow: 0 calc(30 * var(--sf)) calc(60 * var(--sf)) rgba(0, 0, 0, 0.5), 0 0 calc(120 * var(--sf)) rgba(255, 185, 137, 0.35);
}
.big-screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.big-screen__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 78%, rgba(0, 0, 0, 0.65)); }
.big-screen__player {
  position: absolute;
  left: 2.258%; right: 2.258%;
  bottom: calc(22 * var(--sf));
  height: max(26px, calc(30 * var(--sf)));
}
.big-screen__bar { position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.3); }
.big-screen__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 37%; border-radius: inherit; background: #fff; }
.big-screen__pause { position: absolute; left: 0; bottom: 1px; width: max(12px, calc(14 * var(--sf))); height: max(12px, calc(14 * var(--sf))); }
.big-screen__time {
  position: absolute;
  left: max(22px, calc(26 * var(--sf)));
  bottom: 0;
  font-size: max(11px, calc(12 * var(--sf)));
  font-weight: 600;
  line-height: normal;
  white-space: pre;
  color: rgba(255, 255, 255, 0.8);
  font-variant-numeric: tabular-nums;
}
.big-screen__tools { position: absolute; right: 0; bottom: 0; width: max(38px, calc(44 * var(--sf))); height: max(14px, calc(16 * var(--sf))); }

/* Side screens: a 560 x 599 picture turned away from the middle (Figma draws them as slices) */
.big-side {
  position: absolute;
  top: calc(49.5 * var(--sf));
  width: calc(560 * var(--sf));
  height: calc(599 * var(--sf));
  overflow: hidden;
}
.big-side img { display: block; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.75); }
.big-side--left  { right: calc(100% + 21 * var(--sf)); transform-origin: 100% 50%; transform: perspective(calc(1369 * var(--sf))) rotateY(-41.6deg); }
.big-side--right { left: calc(100% + 22 * var(--sf));  transform-origin: 0 50%;    transform: perspective(calc(1369 * var(--sf))) rotateY(41.6deg); }

/* Next / previous film: round glass chevrons over the side screens, level with the
   middle of the main screen (same look as the genre carousel's arrows) */
.big-arrow {
  position: absolute;
  z-index: 3;
  top: calc(349 * var(--sf));
  display: grid;
  place-items: center;
  width: max(44px, calc(60 * var(--sf)));
  height: max(44px, calc(60 * var(--sf)));
  translate: -50% -50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: rgba(14, 14, 18, 0.45);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: background-color 0.2s, scale 0.2s;
}
.big-arrow:hover { background: rgba(255, 255, 255, 0.18); scale: 1.06; }
.big-arrow:active { scale: 0.96; }
.big-arrow:focus-visible { outline: 2px solid #ffe46e; outline-offset: 3px; }
.big-arrow img { width: max(20px, calc(26 * var(--sf))); height: max(20px, calc(26 * var(--sf))); }
.big-arrow--prev { left: calc(-80 * var(--sf)); }
.big-arrow--next { left: calc(100% + 80 * var(--sf)); }
.big-screen__next { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; }
/* Cube turn between films: the stage gives depth, the cube turns, each screen is a face */
.big-cube-stage { position: relative; perspective: calc(2600 * var(--sf) + 400px); }
.big-cube { position: relative; transform-style: preserve-3d; }
.big-cube .big-screen { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.big-screen--incoming { position: absolute; inset: 0; }
.big-screen__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.big-screen__dim { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }
.big-screen__next:not([src]) { display: none; }

/* ---- Caption ---- */
.big-caption { display: flex; margin-top: calc(34 * var(--sf)); }
.big-caption__film { width: calc(644.8 * var(--sf)); flex: none; }
.big-caption__title { font-family: "Cinzel", serif; font-size: max(22px, calc(30 * var(--sf))); font-weight: 700; line-height: normal; }
.big-caption__byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: max(8px, calc(10 * var(--sf)));
  margin-top: calc(10 * var(--sf));
  font-size: max(13px, calc(15 * var(--sf)));
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
}
.big-caption__byline img { width: max(20px, calc(24 * var(--sf))); height: max(20px, calc(24 * var(--sf))); border-radius: 50%; }
.big-caption__tag {
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}
.big-caption__prompt {
  margin-top: calc(4 * var(--sf));
  padding-left: calc(36 * var(--sf));
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  min-height: calc(74 * var(--sf));
}
.big-caption__label { font-size: max(11px, calc(12 * var(--sf))); font-weight: 700; letter-spacing: 0.14em; line-height: normal; color: #ffe46e; }
.big-caption__quote { margin-top: calc(9 * var(--sf)) !important; font-size: max(17px, calc(22 * var(--sf))); font-weight: 600; line-height: 1.36; color: rgba(255, 255, 255, 0.92); }

/* ---- Seats, fading out at the sides and into the light section below ---- */
.big__seats {
  position: relative;
  height: calc(350 * var(--sf));
  margin-top: calc(50 * var(--sf));
}
.big__seats img,
.big__seats::before {
  position: absolute;
  top: 0;
  height: calc(330 * var(--sf));
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 35%);
          mask-image: linear-gradient(180deg, transparent, #000 35%);
}
.big__seats img { left: calc(50% - 780 * var(--sf)); width: calc(1560 * var(--sf)); max-width: none; object-fit: cover; }
.big__seats::before {
  content: "";
  left: calc(50% - 782 * var(--sf));
  width: calc(1564 * var(--sf));
  background: linear-gradient(90deg, #08080a, rgba(8, 8, 10, 0) calc(420 * var(--sf))),
              linear-gradient(270deg, #08080a, rgba(8, 8, 10, 0) calc(420 * var(--sf)));
  z-index: 1;
}
.big__seats::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: calc(50 * var(--sf));
  bottom: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(244, 244, 246, 0) 0%, rgba(244, 244, 246, 0.28) 42%, rgba(244, 244, 246, 0.8) 74.7%, #f4f4f6 93.3%);
}

@media (max-width: 1023px) {
  .big { padding-top: 72px; }
  .big__title { margin-top: 14px; }
  .big__title-script { margin-top: 0; line-height: 1.05; }
  .big__haze { left: -10%; width: 120%; top: 300px; height: 420px; border-radius: 120px; filter: blur(40px); }
  .big__spill { display: none; }
  .big__theatre { width: calc(100% - 32px); margin-top: 36px; }
  .big-side { display: none; }
  .big-arrow { top: calc((100vw - 32px) * 0.5629 / 2); }   /* middle of the full-width screen */
  .big-arrow--prev { left: 34px; }
  .big-arrow--next { left: calc(100% - 34px); }
  .big-screen { border-radius: 12px; }
  .big-screen__player { bottom: 10px; }
  .big-caption { flex-direction: column; gap: 22px; margin-top: 22px; }
  .big-caption__film { width: auto; }
  .big-caption__prompt { margin: 0; padding: 0 0 0 16px; min-height: 0; }
  .big__seats { height: 160px; margin-top: 24px; }
  .big__seats img, .big__seats::before { height: 150px; }
  .big__seats img { left: 50%; width: 720px; translate: -50% 0; }
  .big__seats::before { display: none; }
  .big__seats::after { top: 20px; }
}

/* ============ COMPARE (Figma 15, 1920 x 1674) ============
   Light dotted backdrop, the heading with a yellow marker, and the comparison table
   (1640 wide) with the dark RocketToons column standing out of it. The table keeps
   at least 0.6 of its size (--t) and scrolls sideways on small screens. */
.cmp {
  --sf: min(1px, 100cqw / 1920);
  --t: max(0.6px, var(--sf));
  position: relative;
  isolation: isolate;
  padding: calc(150 * var(--sf)) 0 calc(170 * var(--sf));
  background: url("../images/cmp-dot.png") 0 0 / 28px 28px, #f4f4f6;
  color: #0e0b1e;
}
.cmp::before {                         /* dots fade out towards the edges */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, rgba(244, 244, 246, 0), #f4f4f6);
}
.cmp p { margin: 0; }
.cmp__head { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 16px; }
.cmp__title {
  margin: 0;
  font-size: max(34px, calc(84 * var(--sf)));
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.04em;
}
.cmp__mark { position: relative; white-space: nowrap; }
.cmp__mark::before {                   /* yellow marker stroke behind the word */
  content: "";
  position: absolute;
  z-index: -1;
  left: -0.14em;
  right: -0.05em;
  bottom: 0.13em;
  height: 0.45em;
  border-radius: 0.12em;
  background: linear-gradient(90deg, #ffe46e, #ffd02b);
  rotate: -1.2deg;
}
.cmp__sub {
  margin-top: calc(7 * var(--sf)) !important;
  font-family: var(--font-script);
  font-size: max(28px, calc(60 * var(--sf)));
  line-height: 1.25;
  color: rgba(14, 11, 30, 0.75);
}

.cmp__scroll { margin-top: calc(83 * var(--sf)); }
.cmp__frame {
  --feat: calc(640 * var(--t));        /* features column */
  --rt: calc(230 * var(--t));          /* RocketToons column */
  position: relative;
  width: calc(1640 * var(--t));
  margin: 0 auto;
}
.cmp-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid rgba(14, 11, 30, 0.07);
  border-radius: calc(32 * var(--t));
  background: #fff;
  box-shadow: 0 calc(24 * var(--t)) calc(60 * var(--t)) calc(-10 * var(--t)) rgba(14, 11, 30, 0.06);
}
.cmp-col-feat { width: var(--feat); }
.cmp-col-rt   { width: var(--rt); }
.cmp-table thead th {
  height: calc(99 * var(--t));
  padding: 0;
  border-bottom: 1px solid rgba(14, 11, 30, 0.08);
  font-size: calc(18 * var(--t));
  font-weight: 700;
  text-align: center;
}
.cmp-table thead th:first-child { padding-left: calc(43 * var(--t)); text-align: left; }
.cmp-table tbody tr { height: calc(82 * var(--t)); }
.cmp-table tbody tr:nth-child(odd) { background: #f6f6f9; }
.cmp-table tbody th {
  position: relative;
  padding: 0 0 0 calc(64 * var(--t));
  text-align: left;
  font-weight: inherit;
}
.cmp-table tbody th::before {          /* yellow bullet */
  content: "";
  position: absolute;
  left: calc(44 * var(--t));
  top: calc(24 * var(--t));
  width: calc(8 * var(--t));
  height: calc(8 * var(--t));
  background: url("../images/icons/cmp-bullet.svg") center / contain no-repeat;
}
.cmp-feat { display: block; font-size: calc(19 * var(--t)); font-weight: 700; line-height: 1.26; white-space: nowrap; }
.cmp-sub  { display: block; margin-top: calc(3 * var(--t)); font-size: calc(14 * var(--t)); line-height: 1.3; color: rgba(14, 11, 30, 0.55); white-space: nowrap; }
.cmp-table td { padding: 0; text-align: center; vertical-align: middle; }
.cmp-table td img { display: inline-block; vertical-align: middle; }
.cmp-no  { width: calc(26 * var(--t)); height: calc(26 * var(--t)); }
.cmp-yes { width: calc(42 * var(--t)); height: calc(42 * var(--t)); margin: calc(-2 * var(--t)) calc(-5 * var(--t)) calc(-8 * var(--t)); }

/* The dark RocketToons column, 22 above and below the table */
.cmp-pillar {
  position: absolute;
  left: var(--feat);
  top: calc(-22 * var(--t));
  width: var(--rt);
  height: calc(100% + 44 * var(--t));
  box-sizing: border-box;
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  border-radius: calc(26 * var(--t));
  background: linear-gradient(180deg, #2a2a2d 0%, #141416 12%, #0b0b0c 100%);
  box-shadow: 0 calc(30 * var(--t)) calc(50 * var(--t)) calc(-6 * var(--t)) rgba(0, 0, 0, 0.35), inset 0 1.5px 0 rgba(255, 255, 255, 0.18);
  color: #fff;
}
.cmp-pillar__glow { position: absolute; left: calc(50% - 214 * var(--t)); top: calc(-141.5 * var(--t)); width: calc(428 * var(--t)); height: calc(240 * var(--t)); max-width: none; }
.cmp-pillar__name { position: absolute; left: 0; right: 0; top: calc(56.5 * var(--t)); font-size: calc(21 * var(--t)); font-weight: 700; line-height: normal; text-align: center; }
.cmp-pillar__ticks {
  position: absolute;
  left: 0; right: 0;
  top: calc(130.7 * var(--t));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(20.4 * var(--t));
}
.cmp-pillar__ticks img { display: block; width: calc(61.6 * var(--t)); height: calc(61.6 * var(--t)); }

@media (max-width: 1023px) {
  .cmp { padding: 72px 0 64px; }
  .cmp__sub { margin-top: 6px !important; }
  .cmp__scroll {
    margin-top: 32px;
    padding: calc(24 * var(--t)) 16px calc(48 * var(--t));
    overflow-x: auto;
    scrollbar-width: none;
  }
  .cmp__scroll::-webkit-scrollbar { display: none; }
  /* narrower features column so the RocketToons column shows without scrolling */
  .cmp__frame { --feat: 260px; --rt: 92px; width: calc(260px + 92px + 5 * 72px); }
  .cmp-table thead th:first-child { padding-left: 24px; }
  .cmp-table tbody th { padding-left: 38px; }
  .cmp-table tbody th::before { left: 22px; }
  .cmp-sub { overflow: hidden; text-overflow: ellipsis; padding-right: 8px; }
}

/* ============ COMMERCIAL LICENSE (Figma 16, 1920 x 1240) ============
   Copy on the left; on the right a tilted license certificate, three client orders
   and a gold coin, drawn in Figma px (--f) on a 930 x 810 stage. The orders and the
   coin float gently. */
.lic {
  --sf: min(1px, 100cqw / 1920);
  position: relative;
  overflow: hidden;
  background: #08080a;
  color: #fff;
}
.lic p { margin: 0; }
.lic__inner {
  display: flex;
  align-items: flex-start;
  width: calc(1920 * var(--sf));
  margin: 0 auto;
  padding: calc(237 * var(--sf)) 0 calc(195 * var(--sf));
}

/* ---- Copy ---- */
.lic-copy { flex: none; width: calc(660 * var(--sf)); margin: calc(69 * var(--sf)) 0 0 calc(220 * var(--sf)); }
.lic-copy__pill {
  display: inline-block;
  padding: max(6px, calc(8 * var(--sf))) max(14px, calc(18 * var(--sf)));
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.1);
  font-size: max(13px, calc(16 * var(--sf)));
  font-weight: 700;
  line-height: normal;
}
.lic-copy__title {
  margin: calc(26 * var(--sf)) 0 0;
  font-size: max(36px, calc(76 * var(--sf)));
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.04em;
}
.lic-copy__script {
  margin-top: calc(7 * var(--sf)) !important;
  font-family: var(--font-script);
  font-size: max(36px, calc(70 * var(--sf)));
  line-height: 1.24;
}
.lic-copy__text {
  max-width: calc(600 * var(--sf));
  margin-top: calc(22 * var(--sf)) !important;
  font-size: max(16px, calc(20 * var(--sf)));
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.68);
}
.lic-copy__list { display: flex; flex-direction: column; gap: calc(20 * var(--sf)); margin: calc(34 * var(--sf)) 0 0; padding: 0; list-style: none; }
.lic-copy__list li {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--sf));
  font-size: max(15px, calc(19 * var(--sf)));
  font-weight: 600;
  line-height: 1.26;
  color: rgba(255, 255, 255, 0.95);
}
.lic-copy__list img { flex: none; width: max(22px, calc(26 * var(--sf))); height: max(22px, calc(26 * var(--sf))); }

/* ---- Visual (930 x 810 Figma px) ---- */
.lic-vis {
  --f: var(--sf);
  position: relative;
  flex: none;
  width: calc(930 * var(--f));
  height: calc(810 * var(--f));
  margin-left: calc(60 * var(--sf));
  color: #0e0b1e;
}
.lic-vis > *, .lic-cert > *, .lic-order > * { position: absolute; margin: 0; }
.lic-vis__glow { left: calc(-60 * var(--f)); top: calc(-57 * var(--f)); width: calc(1020 * var(--f)); height: calc(880 * var(--f)); max-width: none; }

.lic-cert, .lic-order {
  box-sizing: border-box;
  border: 1.5px solid #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(236, 238, 243, 0.9));
  box-shadow: 0 calc(30 * var(--f)) calc(60 * var(--f)) rgba(0, 0, 0, 0.55),
              inset 0 calc(-8 * var(--f)) calc(24 * var(--f)) #c9ceda, inset 0 1.5px 0 #fff;
}
.lic-cert {
  left: calc(200 * var(--f));
  top: calc(53 * var(--f));
  width: calc(500 * var(--f));
  height: calc(640 * var(--f));
  border-radius: calc(30 * var(--f));
  rotate: 4deg;
}
.lic-cert__dash { left: calc(14.5 * var(--f)); top: calc(14.5 * var(--f)); width: calc(468 * var(--f)); height: calc(608 * var(--f)); box-sizing: border-box; border: 1px dashed rgba(14, 11, 30, 0.1); border-radius: calc(20 * var(--f)); }
.lic-cert__kicker { left: 0; right: 0; top: calc(56.5 * var(--f)); text-align: center; font-size: calc(13 * var(--f)); font-weight: 700; letter-spacing: 0.22em; color: rgba(14, 11, 30, 0.55); white-space: nowrap; }
.lic-cert__brand { left: 0; right: 0; top: calc(80.5 * var(--f)); text-align: center; font-family: "Cinzel", serif; font-size: calc(46 * var(--f)); font-weight: 700; line-height: normal; white-space: nowrap; }
.lic-cert__rule { left: calc(178.5 * var(--f)); top: calc(152.5 * var(--f)); width: calc(140 * var(--f)); height: calc(2 * var(--f)); border-radius: 1px; background: rgba(14, 11, 30, 0.15); }
.lic-cert__to { left: 0; right: 0; top: calc(174.5 * var(--f)); text-align: center; font-size: calc(13 * var(--f)); line-height: normal; color: rgba(14, 11, 30, 0.5); }
.lic-cert__who { left: 0; right: 0; top: calc(194.5 * var(--f)); text-align: center; font-size: calc(18 * var(--f)); font-weight: 600; line-height: normal; white-space: nowrap; }
.lic-cert__rights { left: calc(58.5 * var(--f)); top: calc(256.5 * var(--f)); display: flex; flex-direction: column; gap: calc(8 * var(--f)); padding: 0; list-style: none; }
.lic-cert__rights li {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--f));
  width: calc(380 * var(--f));
  height: calc(40 * var(--f));
  box-sizing: border-box;
  padding-left: calc(12 * var(--f));
  border-radius: calc(12 * var(--f));
  background: rgba(14, 11, 30, 0.04);
  font-size: calc(16 * var(--f));
  font-weight: 600;
  white-space: nowrap;
}
.lic-cert__rights img { width: calc(22.1 * var(--f)); height: calc(22.1 * var(--f)); }
.lic-cert__sign { left: calc(62.5 * var(--f)); top: calc(520.5 * var(--f)); font-family: var(--font-script); font-size: calc(30 * var(--f)); line-height: normal; color: rgba(14, 11, 30, 0.8); }
.lic-cert__line { left: calc(58.5 * var(--f)); top: calc(558.5 * var(--f)); width: calc(170 * var(--f)); height: 1.5px; background: rgba(14, 11, 30, 0.3); }
.lic-cert__issued { left: calc(58.5 * var(--f)); top: calc(568.5 * var(--f)); font-size: calc(12 * var(--f)); line-height: normal; color: rgba(14, 11, 30, 0.5); white-space: nowrap; }

.lic-order {
  width: calc(330 * var(--f));
  height: calc(92 * var(--f));
  border-radius: calc(24 * var(--f));
  animation: lic-float 6s ease-in-out infinite;
  will-change: transform;
}
.lic-order--kids   { left: calc(5 * var(--f));   top: calc(17 * var(--f));  rotate: 6deg; }
.lic-order--bakery { left: calc(595 * var(--f)); top: calc(277 * var(--f)); rotate: -5deg; animation-delay: -2s; }
.lic-order--church { left: calc(5 * var(--f));   top: calc(647 * var(--f)); rotate: -4deg; animation-delay: -4s; }
.lic-order img { left: calc(14.5 * var(--f)); top: calc(14.5 * var(--f)); width: calc(60 * var(--f)); height: calc(60 * var(--f)); border-radius: calc(16 * var(--f)); object-fit: cover; }
.lic-order__name { left: calc(90.5 * var(--f)); top: calc(20.5 * var(--f)); font-size: calc(16 * var(--f)); font-weight: 700; line-height: normal; white-space: nowrap; }
.lic-order__what { left: calc(90.5 * var(--f)); top: calc(44.5 * var(--f)); font-size: calc(13 * var(--f)); line-height: normal; color: rgba(14, 11, 30, 0.55); white-space: nowrap; }
.lic-order__fee { right: calc(17 * var(--f)); top: calc(30.5 * var(--f)); font-size: calc(20 * var(--f)); font-weight: 700; line-height: normal; color: #0e9f6e; white-space: nowrap; }
.lic-coin {
  left: calc(525 * var(--f));
  top: calc(478 * var(--f));
  width: calc(330 * var(--f));
  height: calc(330 * var(--f));
  max-width: none;
  filter: drop-shadow(calc(-6 * var(--f)) calc(22 * var(--f)) calc(17 * var(--f)) rgba(0, 0, 0, 0.55));
  animation: lic-float 7s ease-in-out -1s infinite;
  will-change: transform;
}
@keyframes lic-float { 50% { transform: translateY(calc(-10 * var(--f))); } }

@media (max-width: 1023px) {
  .lic__inner { flex-direction: column; align-items: center; width: auto; padding: 72px 16px 64px; }
  .lic-copy { width: 100%; max-width: 600px; margin: 0; }
  .lic-copy__title { margin-top: 18px; }
  .lic-copy__text { max-width: none; }
  .lic-copy__list { gap: 12px; }
  .lic-vis { --f: min(1px, (100vw - 40px) / 930); margin: 40px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lic-order, .lic-coin { animation: none; }
}

/* ============ BONUSES (Figma 17, 1920 x 2767) ============
   A glowing horizon, the heading, then three bonus rows. Each row is drawn on a
   1920-wide stage in Figma px (--sf): the glass panel and the box picture sit where
   Figma has them, and the copy alternates sides. */
.bonuses {
  --sf: min(1px, 100cqw / 1920);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: calc(240 * var(--sf)) 0 calc(90 * var(--sf));
  background: #08080a;
  color: #fff;
}
.bonuses p, .bonuses h2, .bonuses h3, .bonuses ul { margin: 0; }
.bonuses__sky { position: absolute; inset: 0 0 auto; height: calc(900 * var(--sf)); overflow: hidden; z-index: -1; pointer-events: none; } /* only the top of the horizon ellipse */
.bonuses__sky img { position: absolute; display: block; max-width: none; }
.bonuses__haze    { left: calc(50% - 960 * var(--sf));  top: calc(-110 * var(--sf)); width: calc(1920 * var(--sf)); height: calc(540 * var(--sf)); }
.bonuses__glow    { left: calc(50% - 1828 * var(--sf)); top: calc(42 * var(--sf));   width: calc(3656 * var(--sf)); height: calc(1556 * var(--sf)); }
.bonuses__horizon { left: calc(50% - 1800 * var(--sf)); top: calc(70 * var(--sf));   width: calc(3600 * var(--sf)); height: calc(1500 * var(--sf)); }

.bonuses__head { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 16px; }
.bonuses__pill {
  padding: max(6px, calc(8 * var(--sf))) max(14px, calc(18 * var(--sf)));
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.1);
  font-size: max(13px, calc(17 * var(--sf)));
  font-weight: 700;
  line-height: normal;
}
.bonuses__title {
  margin-top: calc(11 * var(--sf)) !important;
  font-size: max(36px, calc(84 * var(--sf)));
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.04em;
}
.bonuses__script { margin-top: calc(1 * var(--sf)) !important; font-family: var(--font-script); font-size: max(32px, calc(70 * var(--sf))); line-height: 1.24; color: rgba(255, 255, 255, 0.9); }

.bonuses__list { margin-top: calc(137 * var(--sf)); }
.bonus {
  position: relative;
  width: calc(1920 * var(--sf));
  height: calc(680 * var(--sf));
  margin: 0 auto;
}
.bonus--3 { height: calc(649 * var(--sf)); }
.bonus__panel { position: absolute; left: calc(150 * var(--sf)); top: calc(90 * var(--sf)); width: calc(1620 * var(--sf)); height: calc(560 * var(--sf)); max-width: none; }
.bonus--3 .bonus__panel { height: calc(529 * var(--sf)); }
.bonus__box { position: absolute; display: block; max-width: none; left: calc(344.7 * var(--sf)); top: calc(35.4 * var(--sf)); width: calc(550 * var(--sf)); height: calc(590 * var(--sf)); }
.bonus--2 .bonus__box { left: calc(1107.5 * var(--sf)); top: calc(47.5 * var(--sf)); width: calc(533.5 * var(--sf)); height: calc(615 * var(--sf)); }
.bonus--3 .bonus__box { top: calc(19.9 * var(--sf)); }

.bonus__copy { position: absolute; top: calc(170 * var(--sf)); left: calc(920 * var(--sf)); width: calc(640 * var(--sf)); }
.bonus--copy-left .bonus__copy { left: calc(300 * var(--sf)); }
.bonus__tag {
  display: inline-block;
  padding: max(5px, calc(7 * var(--sf))) max(12px, calc(14 * var(--sf)));
  border-radius: 99px;
  background: var(--tint);
  font-size: max(12px, calc(14 * var(--sf)));
  font-weight: 700;
  line-height: normal;
}
.bonus__title {
  margin-top: calc(14 * var(--sf)) !important;
  font-size: max(28px, calc(44 * var(--sf)));
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.bonus__text { max-width: calc(580 * var(--sf)); margin-top: calc(10 * var(--sf)) !important; font-size: max(16px, calc(20 * var(--sf))); line-height: 1.55; color: rgba(255, 255, 255, 0.65); }
.bonus__list { display: flex; flex-direction: column; gap: calc(12 * var(--sf)); margin-top: calc(20 * var(--sf)) !important; padding: 0; list-style: none; }
.bonus__list li { display: flex; align-items: center; gap: calc(14 * var(--sf)); font-size: max(15px, calc(18 * var(--sf))); font-weight: 600; line-height: 1.3; color: rgba(255, 255, 255, 0.92); }
.bonus__list img { flex: none; width: max(20px, calc(24 * var(--sf))); height: max(20px, calc(24 * var(--sf))); }
.bonus__price { display: flex; align-items: center; gap: calc(16 * var(--sf)); margin-top: calc(24 * var(--sf)) !important; }
.bonus__worth { font-size: max(16px, calc(20 * var(--sf))); font-weight: 600; color: rgba(255, 255, 255, 0.45); }
.bonus__free {
  padding: max(6px, calc(8 * var(--sf))) max(14px, calc(16 * var(--sf)));
  border-radius: 99px;
  background: #fff;
  font-size: max(14px, calc(16 * var(--sf)));
  font-weight: 700;
  line-height: normal;
  color: #0e0b1e;
}
.bonuses__total { margin-top: calc(20 * var(--sf)) !important; padding: 0 16px; text-align: center; font-size: max(17px, calc(22 * var(--sf))); font-weight: 600; line-height: normal; color: rgba(255, 255, 255, 0.75); }
.bonuses__total b { font-weight: inherit; color: #fff; }

@media (max-width: 1023px) {
  .bonuses { padding: 88px 0 64px; }
  .bonuses__list { display: flex; flex-direction: column; gap: 24px; margin-top: 40px; padding: 0 16px; }
  .bonus, .bonus--3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: auto;
    height: auto;
    padding: 0 22px 28px;
    border: 1.5px solid rgba(255, 255, 255, 0.14);
    border-radius: 28px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
                radial-gradient(80% 50% at 50% 20%, color-mix(in srgb, var(--tint) 22%, transparent), transparent);
  }
  .bonus__panel { display: none; }
  .bonus__box, .bonus--2 .bonus__box, .bonus--3 .bonus__box { position: static; width: min(300px, 80%); height: auto; margin-top: -8px; }
  .bonus__copy, .bonus--copy-left .bonus__copy { position: static; width: 100%; margin-top: 8px; }
  .bonus__text { max-width: none; }
  .bonus__list { gap: 10px; }
  .bonuses__total { margin-top: 32px !important; }
}

/* ============ GUARANTEE (Figma 18, 1920 x 1180) ============
   The coin photo fills the section (2781 wide, placed as in Figma), fading in from
   the dark bonuses above; the copy sits on the right. */
.gua {
  --sf: min(1px, 100cqw / 1920);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #e4dace;                 /* the photo's tone, behind its edges on very wide screens */
  color: #1a1612;
}
.gua p, .gua h2, .gua ul { margin: 0; }
.gua__photo {
  position: absolute;
  z-index: -2;
  left: min(calc(50% - 1100 * var(--sf)), 0px);   /* as in Figma, but never short of the left edge */
  top: 0;
  width: calc(2781 * var(--sf));
  height: calc(1180 * var(--sf));
  max-width: none;
  object-fit: cover;
}
.gua__fade {
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: calc(600 * var(--sf));
  background: linear-gradient(180deg, #08080a 0%, rgba(8, 8, 10, 0.85) 30%, rgba(8, 8, 10, 0.3) 65%, rgba(8, 8, 10, 0) 100%);
}
.gua__inner { width: calc(1920 * var(--sf)); height: calc(1180 * var(--sf)); margin: 0 auto; box-sizing: border-box; padding: calc(412 * var(--sf)) 0 0 calc(1040 * var(--sf)); }
.gua-copy { width: calc(700 * var(--sf)); }
.gua-copy__pill {
  display: inline-block;
  padding: max(6px, calc(8 * var(--sf))) max(14px, calc(18 * var(--sf)));
  border-radius: 99px;
  background: #1a1612;
  font-size: max(13px, calc(16 * var(--sf)));
  font-weight: 700;
  line-height: normal;
  color: #f3d57e;
}
.gua-copy__title { margin-top: calc(24 * var(--sf)) !important; font-size: max(36px, calc(72 * var(--sf))); font-weight: 700; line-height: 1.02; letter-spacing: -0.04em; }
.gua-copy__script { margin-top: calc(3 * var(--sf)) !important; font-family: var(--font-script); font-size: max(32px, calc(64 * var(--sf))); line-height: 1.24; color: #9a6b1f; }
.gua-copy__text { max-width: calc(620 * var(--sf)); margin-top: calc(20 * var(--sf)) !important; font-size: max(16px, calc(20 * var(--sf))); line-height: 1.6; color: rgba(26, 22, 18, 0.7); }
.gua-trust { display: flex; flex-wrap: wrap; gap: max(8px, calc(12 * var(--sf))); margin-top: calc(34 * var(--sf)) !important; padding: 0; list-style: none; }
.gua-trust li {
  display: flex;
  align-items: center;
  gap: max(10px, calc(12 * var(--sf)));
  padding: max(10px, calc(12 * var(--sf))) max(14px, calc(18 * var(--sf))) max(10px, calc(12 * var(--sf))) max(12px, calc(14 * var(--sf)));
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: max(14px, calc(18 * var(--sf)));
  background: rgba(255, 255, 255, 0.62);
  box-shadow: 0 calc(8 * var(--sf)) calc(20 * var(--sf)) rgba(107, 86, 54, 0.1);
  font-size: max(13px, calc(14 * var(--sf)));
  line-height: normal;
  color: rgba(26, 22, 18, 0.6);
  white-space: nowrap;
}
.gua-trust li > span:last-child { display: flex; flex-direction: column; gap: 1px; }
.gua-trust b { font-weight: 700; color: #1a1612; }
.gua-trust__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: max(32px, calc(36 * var(--sf)));
  height: max(32px, calc(36 * var(--sf)));
  border-radius: max(10px, calc(11 * var(--sf)));
  background: linear-gradient(180deg, #f6e2a6, #e0b860);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.gua-trust__icon img { width: max(18px, calc(20 * var(--sf))); height: max(18px, calc(20 * var(--sf))); }
.gua-sign {
  display: flex;
  align-items: baseline;
  gap: calc(12 * var(--sf));
  margin-top: calc(39 * var(--sf)) !important;
  font-family: var(--font-script);
  font-size: max(32px, calc(46 * var(--sf)));
  line-height: 1.24;
  color: rgba(26, 22, 18, 0.9);
  white-space: nowrap;
}
.gua-sign__and { font-size: 0.74em; opacity: 0.5; }
.gua-sign__team { margin-top: calc(2 * var(--sf)) !important; font-size: max(13px, calc(15 * var(--sf))); font-weight: 600; line-height: normal; color: rgba(26, 22, 18, 0.55); }

@media (max-width: 1023px) {
  .gua { background: #e8ddd0; }
  .gua__photo { position: relative; z-index: -2; left: 0; display: block; width: 100%; height: min(90vw, 520px); object-position: 18% 70%; }
  .gua__fade { height: 180px; }
  .gua__inner { width: auto; height: auto; padding: 8px 16px 72px; }
  .gua-copy { width: 100%; max-width: 640px; margin: 0 auto; }
  .gua-copy__text { max-width: none; }
  .gua-trust li { flex: 1 1 auto; }
}

/* ============ PRICING (Figma 19 v2, 1920 x 4328) ============
   Two plan cards (680 wide, white and black) with the product boxes standing on
   them, the guarantee line, then the testimonials wall. --sf is one Figma px; text
   keeps a minimum size on small screens. */
.price {
  --sf: min(1px, 100cqw / 1920);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: calc(170 * var(--sf)) 0 calc(180 * var(--sf));
  background: linear-gradient(180deg, #ede7dd 0%, #f3f1ec 22%, #eceff4 100%);
  color: #121014;
}
.price p, .price h2, .price h3, .price ul, .price figure, .price blockquote { margin: 0; }
.price__halo { position: absolute; z-index: -1; left: calc(50% - 850 * var(--sf)); top: calc(420 * var(--sf)); width: calc(1700 * var(--sf)); height: calc(900 * var(--sf)); max-width: none; pointer-events: none; }
.price__head, .testis { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 16px; }
.price__title, .testis__title { font-size: max(36px, calc(88 * var(--sf))); font-weight: 700; line-height: 1.25; letter-spacing: -0.04em; }
.price__script, .testis__script { margin-top: calc(-0 * var(--sf)) !important; font-family: var(--font-script); font-size: max(32px, calc(72 * var(--sf))); line-height: 1.24; color: rgba(18, 16, 20, 0.72); }

/* ---- Plans ---- */
.price__plans {
  display: grid;
  grid-template-columns: repeat(2, calc(680 * var(--sf)));
  justify-content: center;
  gap: calc(40 * var(--sf));
  margin-top: calc(291 * var(--sf));
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(190 * var(--sf)) calc(56 * var(--sf)) calc(46 * var(--sf));
  border-radius: calc(40 * var(--sf));
  background: #fff;
  box-shadow: 0 calc(40 * var(--sf)) calc(80 * var(--sf)) rgba(58, 42, 18, 0.1), 0 2px 3px rgba(58, 42, 18, 0.05);
  text-align: center;
}
.plan--bundle { background: #111113; color: #fff; box-shadow: 0 calc(40 * var(--sf)) calc(80 * var(--sf)) rgba(0, 0, 0, 0.25), 0 2px 3px rgba(0, 0, 0, 0.12); }
.plan__boxes { position: absolute; left: 0; right: 0; top: 0; height: 0; pointer-events: none; }
.plan__box { position: absolute; display: block; max-width: none; height: auto; }
.plan__box--solo { left: calc(50% - 180 * var(--sf)); top: calc(-191.4 * var(--sf)); width: calc(360 * var(--sf)); }
.plan__box--1 { left: calc(50% - 285 * var(--sf)); top: calc(-32.75 * var(--sf)); width: calc(170 * var(--sf)); }
.plan__box--2 { left: calc(50% + 115 * var(--sf)); top: calc(-32.75 * var(--sf)); width: calc(170 * var(--sf)); }
.plan__box--3 { left: calc(50% - 218 * var(--sf)); top: calc(-66.4 * var(--sf)); width: calc(220 * var(--sf)); }
.plan__box--4 { left: calc(50% - 2 * var(--sf));   top: calc(-66.4 * var(--sf)); width: calc(220 * var(--sf)); }
.plan__box--5 { left: calc(50% - 165 * var(--sf)); top: calc(-161.6 * var(--sf)); width: calc(330 * var(--sf)); }

.plan__kicker { font-size: max(11px, calc(13 * var(--sf))); font-weight: 700; letter-spacing: 0.18em; line-height: normal; color: #0740df; }
.plan--bundle .plan__kicker { color: #6fb2ff; }
.plan__name { margin-top: calc(10 * var(--sf)) !important; font-size: max(28px, calc(40 * var(--sf))); font-weight: 700; line-height: 1.25; letter-spacing: -0.03em; }
.plan__sub { margin-top: calc(4 * var(--sf)) !important; font-size: max(15px, calc(17 * var(--sf))); line-height: normal; color: rgba(18, 16, 20, 0.55); }
.plan--bundle .plan__sub { color: rgba(255, 255, 255, 0.55); }
.plan__price { display: flex; align-items: baseline; justify-content: center; gap: calc(14 * var(--sf)); margin-top: calc(17 * var(--sf)) !important; line-height: 1.25; }
.plan__price s { font-size: max(20px, calc(30 * var(--sf))); font-weight: 600; color: rgba(18, 16, 20, 0.3); }
.plan__price strong { font-size: max(72px, calc(120 * var(--sf))); font-weight: 700; letter-spacing: -0.06em; }
.plan__price span { font-size: max(15px, calc(18 * var(--sf))); color: rgba(18, 16, 20, 0.5); }
.plan--bundle .plan__price s { color: rgba(255, 255, 255, 0.3); }
.plan--bundle .plan__price span { color: rgba(255, 255, 255, 0.5); }
.plan__credits { margin-top: calc(-4 * var(--sf)) !important; font-size: max(14px, calc(16 * var(--sf))); line-height: normal; color: rgba(18, 16, 20, 0.55); }
.plan--bundle .plan__credits { color: rgba(255, 255, 255, 0.55); }
.plan__label {
  align-self: stretch;
  margin-top: calc(22 * var(--sf)) !important;
  padding-top: calc(30 * var(--sf));
  border-top: 1px solid rgba(18, 16, 20, 0.08);
  font-size: max(11px, calc(13 * var(--sf)));
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: normal;
  text-align: left;
  color: rgba(18, 16, 20, 0.45);
}
.plan--bundle .plan__label { border-top-color: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.45); }

.plan__list { align-self: stretch; display: flex; flex-direction: column; gap: calc(23 * var(--sf)); margin-top: calc(24 * var(--sf)) !important; padding: 0; list-style: none; text-align: left; }
.plan__list li {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--sf));
  font-size: max(15px, calc(18 * var(--sf)));
  line-height: 1.28;
  color: rgba(18, 16, 20, 0.86);
}
.plan__list li::before, .plan__rows li::before {
  content: "";
  flex: none;
  width: max(16px, calc(18 * var(--sf)));
  height: max(16px, calc(18 * var(--sf)));
  background: url("../images/icons/price-check.svg") center / contain no-repeat;
}
.plan__rows { align-self: stretch; margin-top: calc(23 * var(--sf)) !important; padding: 0; list-style: none; text-align: left; }
.plan__rows li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  column-gap: calc(16 * var(--sf));
  align-items: center;
  padding: calc(27.5 * var(--sf)) 0 calc(25 * var(--sf));
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.plan__rows li::before { grid-row: 1; background-image: url("../images/icons/price-check-dark.svg"); }
.plan__rows b { grid-column: 2; font-size: max(16px, calc(19 * var(--sf))); font-weight: 600; line-height: 1.26; }
.plan__rows span { grid-column: 2; margin-top: calc(4 * var(--sf)); font-size: max(13px, calc(15 * var(--sf))); line-height: 1.26; color: rgba(255, 255, 255, 0.5); }
.plan__rows em { grid-column: 3; grid-row: 1; font-style: normal; font-size: max(13px, calc(15 * var(--sf))); font-weight: 600; color: rgba(255, 255, 255, 0.45); white-space: nowrap; }
.plan__rows em.is-in { color: #6fb2ff; }

.plan__bottom { align-self: stretch; display: flex; flex-direction: column; align-items: center; margin-top: auto; padding-top: calc(28 * var(--sf)); }
.plan__guarantee {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: calc(12 * var(--sf));
  min-height: calc(64 * var(--sf));
  padding: 10px calc(20 * var(--sf));
  box-sizing: border-box;
  border-radius: calc(16 * var(--sf));
  background: rgba(18, 16, 20, 0.04);
  font-size: max(14px, calc(17 * var(--sf)));
  font-weight: 600;
  line-height: normal;
  text-align: left;
  color: rgba(18, 16, 20, 0.8);
}
.plan__guarantee img { flex: none; width: max(20px, calc(22 * var(--sf))); height: max(20px, calc(22 * var(--sf))); }
.plan__buy {
  align-self: stretch;
  display: grid;
  place-items: center;
  height: max(60px, calc(76 * var(--sf)));
  margin-top: calc(32 * var(--sf));
  border-radius: 99px;
  background: linear-gradient(180deg, #ffe46e, #ffc21a);
  box-shadow: 0 calc(12 * var(--sf)) calc(28 * var(--sf)) rgba(224, 164, 0, 0.35), inset 0 -3px 6px rgba(199, 138, 0, 0.45), inset 0 1.5px 0 rgba(255, 255, 255, 0.6);
  font-size: max(18px, calc(22 * var(--sf)));
  font-weight: 700;
  color: #121014;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.plan__buy:hover { transform: translateY(-2px); box-shadow: 0 calc(16 * var(--sf)) calc(32 * var(--sf)) rgba(224, 164, 0, 0.45), inset 0 -3px 6px rgba(199, 138, 0, 0.45), inset 0 1.5px 0 rgba(255, 255, 255, 0.6); }
.plan__secure { margin-top: calc(16 * var(--sf)) !important; font-size: max(13px, calc(14 * var(--sf))); line-height: normal; white-space: pre; color: rgba(18, 16, 20, 0.45); }
.plan--bundle .plan__secure { color: rgba(255, 255, 255, 0.45); }

.plan__savings { align-self: stretch; padding: calc(22 * var(--sf)) calc(28 * var(--sf)); border-radius: calc(20 * var(--sf)); background: rgba(255, 255, 255, 0.05); text-align: left; }
.plan__savings p { display: flex; justify-content: space-between; align-items: center; }
.plan__savings p:first-child { font-size: max(15px, calc(17 * var(--sf))); font-weight: 600; color: rgba(255, 255, 255, 0.6); }
.plan__savings s { font-size: max(18px, calc(22 * var(--sf))); font-weight: 700; color: rgba(255, 255, 255, 0.45); }
.plan__savings b { font-size: max(18px, calc(22 * var(--sf))); }
.plan__savings strong { font-size: max(32px, calc(40 * var(--sf))); line-height: 1.1; }

.coupon {
  position: relative;
  display: flex;
  width: calc(470 * var(--sf));
  min-width: min(100%, 320px);
  height: max(84px, calc(100 * var(--sf)));
  margin-top: calc(24 * var(--sf));
  padding: 0;
  border: 0;
  border-radius: calc(20 * var(--sf));
  /* notches (circles in the card's colour) at both ends of the perforation and at each side */
  background:
    radial-gradient(circle at 58.3% 0, #111113 11px, transparent 11.5px),
    radial-gradient(circle at 58.3% 100%, #111113 11px, transparent 11.5px),
    radial-gradient(circle at 0 50%, #111113 11px, transparent 11.5px),
    radial-gradient(circle at 100% 50%, #111113 11px, transparent 11.5px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, #7cf05a, #3fcb2e);
  box-shadow: 0 calc(12 * var(--sf)) calc(26 * var(--sf)) calc(-8 * var(--sf)) rgba(63, 203, 46, 0.25);
  color: #0e2a0a;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.coupon__left, .coupon__right { display: flex; flex-direction: column; justify-content: center; line-height: normal; }
.coupon__left { width: 58.3%; box-sizing: border-box; padding-left: calc(30 * var(--sf) + 4px); border-right: 2px dashed rgba(14, 42, 10, 0.3); margin: calc(17 * var(--sf)) 0; }
.coupon__left small { font-size: max(10px, calc(11 * var(--sf))); font-weight: 700; letter-spacing: 0.14em; color: rgba(14, 42, 10, 0.6); }
.coupon__left b { font-size: max(20px, calc(24 * var(--sf))); }
.coupon__left span { font-size: max(12px, calc(13 * var(--sf))); color: rgba(14, 42, 10, 0.7); }
.coupon__right { flex: 1; align-items: center; }
.coupon__right b { display: flex; align-items: center; gap: 6px; font-size: max(15px, calc(17 * var(--sf))); letter-spacing: 0.06em; }
.coupon__right img { width: max(14px, calc(16 * var(--sf))); height: max(14px, calc(16 * var(--sf))); }
.coupon__right span { font-size: max(11px, calc(12 * var(--sf))); color: rgba(14, 42, 10, 0.6); }
.coupon:focus-visible { outline: 2px solid #121014; outline-offset: 3px; }

.price__note { margin-top: calc(56 * var(--sf)) !important; padding: 0 16px; text-align: center; font-size: max(14px, calc(17 * var(--sf))); font-weight: 600; line-height: 1.4; white-space: pre-wrap; color: rgba(18, 16, 20, 0.55); }

/* ---- Testimonials ---- */
.testis { margin-top: calc(220 * var(--sf)); }
.testis__script { font-size: max(30px, calc(64 * var(--sf))); }
.testis__grid { display: flex; justify-content: center; gap: calc(40 * var(--sf)); margin-top: calc(80 * var(--sf)); text-align: left; }
.testis__col { display: flex; flex-direction: column; gap: calc(40 * var(--sf)); width: calc(520 * var(--sf)); }
.testis__col:nth-child(2) { margin-top: calc(60 * var(--sf)); }
.testi {
  padding: calc(12 * var(--sf)) calc(12 * var(--sf)) calc(30 * var(--sf));
  border-radius: calc(28 * var(--sf));
  background: #fff;
  box-shadow: 0 calc(24 * var(--sf)) calc(50 * var(--sf)) rgba(58, 42, 18, 0.08), 0 2px 3px rgba(58, 42, 18, 0.05);
}
.testi__media { position: relative; aspect-ratio: 496 / 220; overflow: hidden; border-radius: calc(20 * var(--sf)); }
.testi__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.testi__media .testi__play { position: absolute; left: 50%; top: 50%; width: max(44px, calc(56 * var(--sf))); height: max(44px, calc(56 * var(--sf))); translate: -50% -50%; }
.testi__stars { display: block; width: max(90px, calc(104 * var(--sf))); height: auto; margin: calc(24 * var(--sf)) 0 0 calc(20 * var(--sf)); }
.testi--text .testi__stars { margin-top: calc(16 * var(--sf)); }
.testi blockquote { margin: calc(16 * var(--sf)) calc(20 * var(--sf)) 0 !important; font-size: max(16px, calc(19 * var(--sf))); font-weight: 600; line-height: 1.45; color: rgba(18, 16, 20, 0.92); }
.testi--text blockquote { font-size: max(17px, calc(22 * var(--sf))); }
.testi figcaption {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: calc(14 * var(--sf));
  align-items: center;
  margin: calc(22 * var(--sf)) calc(20 * var(--sf)) 0;
  font-size: max(14px, calc(15 * var(--sf)));
  line-height: normal;
  color: rgba(18, 16, 20, 0.55);
}
.testi__avatar {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: max(40px, calc(46 * var(--sf)));
  height: max(40px, calc(46 * var(--sf)));
  border-radius: 50%;
  background: color-mix(in srgb, var(--tint) 16%, transparent);
  font-size: max(16px, calc(18 * var(--sf)));
  font-weight: 700;
  color: var(--tint);
}
.testi figcaption b { align-self: end; font-size: max(15px, calc(17 * var(--sf))); color: #121014; }
.testi figcaption span:last-child { align-self: start; }

@media (max-width: 1023px) {
  .price { padding: 72px 0 72px; }
  .price__plans { grid-template-columns: minmax(0, 560px); gap: 150px; margin-top: 150px; padding: 0 16px; }
  .plan { --sf: 0.75px; padding: 128px 22px 32px; }
  .plan__box { --sf: 0.6px; }
  .plan__price strong { font-size: 68px; }
  .plan__price span { white-space: nowrap; }
  .plan__list li, .plan__rows li { text-align: left; }
  .testis { margin-top: 96px; }
  .testis__grid { flex-direction: column; gap: 20px; margin-top: 32px; width: 100%; max-width: 560px; }
  .testis__col { width: auto; gap: 20px; }
  .testis__col:nth-child(2) { margin-top: 0; }
}

/* ============ FAQ (Figma 20, 1920 x 1741) ============
   White, with a short blend from the pricing section's grey at the top. */
.faq {
  --sf: min(1px, 100cqw / 1920);
  padding: calc(170 * var(--sf)) 16px calc(170 * var(--sf));
  background: linear-gradient(180deg, #eceff4 0, #fff calc(300 * var(--sf))) #fff;
  color: #121014;
}
.faq p, .faq h2, .faq h3 { margin: 0; }
.faq__head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.faq__title { font-size: max(36px, calc(84 * var(--sf))); font-weight: 700; line-height: 1.25; letter-spacing: -0.04em; }
.faq__script { margin-top: calc(1 * var(--sf)) !important; font-family: var(--font-script); font-size: max(28px, calc(64 * var(--sf))); line-height: 1.24; color: rgba(18, 16, 20, 0.72); }
.faq__cols {
  display: grid;
  grid-template-columns: repeat(2, calc(760 * var(--sf)));
  justify-content: center;
  column-gap: calc(80 * var(--sf));
  margin-top: calc(84 * var(--sf));
}
.faq__col { border-bottom: 1px solid rgba(18, 16, 20, 0.1); }
.faq__item {
  display: grid;
  grid-template-columns: calc(56 * var(--sf) + 8px) 1fr;
  padding: calc(32 * var(--sf)) 0 calc(40 * var(--sf));
  border-top: 1px solid rgba(18, 16, 20, 0.1);
}
.faq__num { grid-row: span 2; padding-top: calc(6 * var(--sf)); font-size: max(13px, calc(15 * var(--sf))); font-weight: 600; line-height: normal; color: #0740df; }
.faq__item h3 { font-size: max(19px, calc(24 * var(--sf))); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.faq__item p { margin-top: calc(12 * var(--sf)) !important; font-size: max(16px, calc(18 * var(--sf))); line-height: 1.55; color: rgba(18, 16, 20, 0.62); }
.faq__more { margin-top: calc(60 * var(--sf)) !important; text-align: center; font-size: max(16px, calc(18 * var(--sf))); font-weight: 600; line-height: 1.4; white-space: pre-wrap; color: rgba(18, 16, 20, 0.6); }

@media (max-width: 1023px) {
  .faq { padding: 72px 16px 72px; }
  /* one column, read in order 01 to 12 (each item's inline order) */
  .faq__cols { display: flex; flex-direction: column; max-width: 640px; margin: 32px auto 0; border-bottom: 1px solid rgba(18, 16, 20, 0.1); }
  .faq__col { display: contents; }
  .faq__item { grid-template-columns: 36px 1fr; padding: 22px 0 24px; }
  .faq__more { margin-top: 36px !important; }
}

/* JVZoo buy button (JVZoo's own embed: a link wrapping their button image) */
.jvzoo-buy { display: block; width: min(100%, 380px); margin: 28px auto 0; line-height: 0; }
.jvzoo-buy img { display: block; width: 100%; height: auto; border: 0; }


/* ============ STARRING YOU (Figma "09b Starring you — cartoon yourself", 1920 x 1733) ============
   Between the genres and "Introducing RocketToons". Dark purple, copy on the left, the cartoon
   under a spotlight on the right, a tilted film strip of episodes across the bottom.
   --sf is one pixel of the 1920px Figma frame (max 1px). The stage uses its own unit --k
   (one Figma px of the stage), so the character art scales as one piece on every screen.
   Phones (below 1024px): copy, then the character, then a vertical film strip. */
.starring {
  --sf: min(1px, 100cqw / 1920);
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  padding: 72px 0 64px;
  background: linear-gradient(180deg, #000 0%, #1c0e32 32%, #120a22 72%, #05070c 100%);
  color: #fff;
}
/* Top fade (black into the section) and bottom fade (into the next section) */
.starring::before,
.starring::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
}
.starring::before { top: 0; height: max(140px, calc(260 * var(--sf))); background: linear-gradient(180deg, #000, rgba(0, 0, 0, 0)); }
.starring::after { bottom: 0; height: max(140px, calc(240 * var(--sf))); background: linear-gradient(180deg, rgba(0, 0, 0, 0), #020203); }

.starring__wrap { position: relative; }
.starring__copy,
.starring__stage,
.starring__same,
.starring__strip { position: relative; z-index: 2; }

/* Violet glow behind the copy */
.starring__glow {
  position: absolute;
  left: -440px;
  top: -60px;
  width: 1580px;
  max-width: none;
  height: auto;
  pointer-events: none;
}

/* ---- Copy ---- */
.starring__copy { max-width: 640px; margin: 0 auto; padding: 0 20px; }
.starring__eyebrow {
  margin: 0;
  font-size: max(13px, calc(16 * var(--sf)));
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.14em;
  color: #ffc94d;
}
.starring__title { display: flex; flex-direction: column; margin: max(10px, calc(12 * var(--sf))) 0 0; }
.starring__title-a {
  font-size: max(40px, calc(80 * var(--sf)));
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
}
.starring__title-b {
  margin-top: max(4px, calc(4 * var(--sf)));
  font-family: var(--font-script);
  font-size: max(40px, calc(76 * var(--sf)));
  font-weight: 400;
  line-height: 0.88;
  color: #ffcc73;
}
.starring__desc {
  max-width: 660px;
  margin: max(18px, calc(28 * var(--sf))) 0 0;
  font-size: max(17px, calc(24 * var(--sf)));
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.003em;
  color: #d9dbe6;
}
.starring__cast-label {
  margin: max(26px, calc(42 * var(--sf))) 0 0;
  font-size: max(13px, calc(15 * var(--sf)));
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.14em;
  color: #9ea1b2;
}
/* Static tags (labels, not buttons) */
.starring__cast {
  display: flex;
  flex-wrap: wrap;
  gap: max(8px, calc(12 * var(--sf)));
  margin: max(12px, calc(14 * var(--sf))) 0 0;
  padding: 0;
  list-style: none;
}
.starring__cast li {
  padding: max(9px, calc(14 * var(--sf))) max(16px, calc(24 * var(--sf)));
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  font-size: max(15px, calc(20 * var(--sf)));
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.003em;
  white-space: nowrap;
  color: #fff;
}
.starring__cast li.is-on {
  border-color: transparent;
  background: linear-gradient(90deg, #ffe08a, #f5a623);
  color: #1a1206;
}

/* ---- Stage: the cartoon in a spotlight, the polaroid, the note.
   Figma px of a 1100 x 1180 stage that starts at x 790, y -60 of the section.
   --cw is how many stage px are visible across, --ox / --oy crop the stage on phones. ---- */
.starring__stage {
  --cw: 960;
  --ox: 110;
  --oy: 200;
  --k: calc(100cqw / var(--cw));
  width: 100%;
  max-width: 560px;
  aspect-ratio: 960 / 980;
  margin: 28px auto 0;
  container-type: inline-size;
}
.starring__canvas {
  position: absolute;
  left: calc(var(--ox) * -1 * var(--k));
  top: calc(var(--oy) * -1 * var(--k));
  width: calc(1100 * var(--k));
  height: calc(1180 * var(--k));
}
.starring__canvas > * { position: absolute; max-width: none; margin: 0; }
.starring__glow2 { left: calc(-30 * var(--k)); top: calc(80 * var(--k)); width: calc(1060 * var(--k)); height: calc(1260 * var(--k)); }
/* The cone fades in from the top (the Figma "Top fade" sits over it) */
.starring__cone {
  left: calc(-40 * var(--k));
  top: calc(-40 * var(--k));
  width: calc(1080 * var(--k));
  height: calc(1160 * var(--k));
  -webkit-mask-image: linear-gradient(180deg, transparent 12%, #000 31%);
  mask-image: linear-gradient(180deg, transparent 12%, #000 31%);
}
.starring__pool { left: calc(50 * var(--k)); top: calc(1000 * var(--k)); width: calc(900 * var(--k)); height: calc(180 * var(--k)); }
.starring__ring { left: calc(190 * var(--k)); top: calc(1040 * var(--k)); width: calc(620 * var(--k)); height: calc(100 * var(--k)); }
.starring__feet { left: calc(262 * var(--k)); top: calc(1042 * var(--k)); width: calc(476 * var(--k)); height: calc(86 * var(--k)); }
.starring__toon { left: calc(170 * var(--k)); top: calc(235 * var(--k)); width: calc(660 * var(--k)); height: calc(884 * var(--k)); }

/* Polaroid with the real photo, tilted 7deg, a strip of tape on top */
.starring__polaroid {
  left: calc(749.24 * var(--k));
  top: calc(265.88 * var(--k));
  width: calc(281.25 * var(--k));
  height: calc(337.5 * var(--k));
  border-radius: calc(6.75 * var(--k));
  background: #faf7f2;
  box-shadow: 0 calc(22.5 * var(--k)) calc(22.5 * var(--k)) rgba(0, 0, 0, 0.6);
  transform: rotate(7deg);
}
.starring__polaroid img {
  position: absolute;
  left: calc(13.5 * var(--k));
  top: calc(13.5 * var(--k));
  width: calc(254.25 * var(--k));
  height: calc(254.25 * var(--k));
  object-fit: cover;
}
.starring__polaroid figcaption {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(274.5 * var(--k));
  font-family: var(--font-script);
  font-size: calc(33.75 * var(--k));
  line-height: 0.88;
  text-align: center;
  white-space: nowrap;
  color: #262633;
}
.starring__tape {
  position: absolute;
  left: calc(85.3 * var(--k));
  top: calc(-12 * var(--k));
  width: calc(108 * var(--k));
  height: calc(33.75 * var(--k));
  background: rgba(255, 237, 178, 0.75);
  transform: rotate(4deg);
}
.starring__arrow { left: calc(730 * var(--k)); top: calc(660 * var(--k)); width: calc(170 * var(--k)); height: calc(120 * var(--k)); }
.starring__note {
  left: calc(807.5 * var(--k));
  top: calc(758.4 * var(--k));
  font-family: var(--font-script);
  font-size: calc(36 * var(--k));
  line-height: 0.88;
  white-space: nowrap;
  color: #ffcc73;
  transform: rotate(4deg);
}

/* ---- "Same face. Every episode." ---- */
.starring__same {
  max-width: 640px;
  margin: 8px auto 0;
  padding: 0 20px;
  font-family: var(--font-script);
  font-size: max(40px, calc(76 * var(--sf)));
  line-height: 0.88;
  color: #ffcf73;
}

/* ---- Film strip. Phones: a vertical strip, the episodes stacked, sprocket holes down both sides. ---- */
.starring__strip {
  width: calc(100% - 40px);
  max-width: 460px;
  margin: 28px auto 0;
  padding: 16px 44px;
  background:
    url("../images/starring/sprocket-v.svg") left 12px top 10px / 18px 48px repeat-y,
    url("../images/starring/sprocket-v.svg") right 12px top 10px / 18px 48px repeat-y,
    #0f0f14;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.6);
  transform: rotate(1deg);
}
.starring__reel { display: flex; flex-direction: column; gap: 14px; }
.starring__ep {
  position: relative;
  aspect-ratio: 488 / 273.28;
  margin: 0;
  overflow: hidden;
  border: 2px solid rgba(255, 207, 115, 0.9);
  border-radius: 8px;
}
.starring__ep img { display: block; width: 100%; height: 100%; object-fit: cover; }
.starring__ep figcaption {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
  color: #fff;
}
.starring__ep--next,
.starring__ep--slot {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.05);
}
.starring__ep--next span {
  font-family: var(--font-script);
  font-size: 28px;
  line-height: 0.88;
  color: rgba(255, 255, 255, 0.55);
}
.starring__ep--ghost,
.starring__ep--slot { display: none; }

/* Tablets: the same strip, two episodes per row */
@media (min-width: 600px) and (max-width: 1023px) {
  .starring__strip { max-width: 680px; }
  .starring__reel { display: grid; grid-template-columns: 1fr 1fr; }
}

/* ---- Desktop (1024px and up): the Figma frame, scaled by --sf ---- */
@media (min-width: 1024px) {
  .starring { padding: 0; }
  .starring__wrap { max-width: calc(1920 * var(--sf)); height: calc(1733 * var(--sf)); margin: 0 auto; }
  .starring__glow { left: calc(-440 * var(--sf)); top: calc(10 * var(--sf)); width: calc(1580 * var(--sf)); }

  .starring__copy { position: absolute; left: calc(160 * var(--sf)); top: calc(250 * var(--sf)); width: calc(700 * var(--sf)); max-width: none; margin: 0; padding: 0; }
  .starring__desc { max-width: calc(660 * var(--sf)); }

  .starring__stage {
    --cw: 1100;
    --ox: 0;
    --oy: 0;
    position: absolute;
    left: calc(790 * var(--sf));
    top: calc(-60 * var(--sf));
    width: calc(1100 * var(--sf));
    max-width: none;
    margin: 0;
    aspect-ratio: 1100 / 1180;
  }

  .starring__same { position: absolute; left: calc(160 * var(--sf)); top: calc(1110 * var(--sf)); max-width: none; margin: 0; padding: 0; white-space: nowrap; }

  /* The strip: 2928 x 366, tilted 2deg, running off both edges */
  .starring__strip {
    position: absolute;
    left: calc(-267.3 * var(--sf));
    top: calc(1268 * var(--sf));
    width: calc(2928 * var(--sf));
    max-width: none;
    height: calc(366 * var(--sf));
    margin: 0;
    padding: 0;
    overflow: hidden;
    background:
      url("../images/starring/sprocket.svg") left calc(24.4 * var(--sf)) top calc(17.08 * var(--sf)) / calc(58.56 * var(--sf)) calc(21.96 * var(--sf)) repeat-x,
      url("../images/starring/sprocket.svg") left calc(24.4 * var(--sf)) top calc(326.96 * var(--sf)) / calc(58.56 * var(--sf)) calc(21.96 * var(--sf)) repeat-x,
      #0f0f14;
    box-shadow: 0 calc(29.28 * var(--sf)) calc(61 * var(--sf)) rgba(0, 0, 0, 0.6);
    transform: rotate(2deg);
  }
  .starring__reel {
    position: absolute;
    left: calc(-183 * var(--sf));
    top: calc(46.36 * var(--sf));
    flex-direction: row;
    gap: calc(48.8 * var(--sf));
  }
  .starring__ep {
    flex: none;
    width: calc(488 * var(--sf));
    height: calc(273.28 * var(--sf));
    border-width: max(2px, calc(3 * var(--sf)));
    border-radius: calc(9.76 * var(--sf));
  }
  .starring__ep figcaption {
    left: calc(14.08 * var(--sf));
    bottom: calc(14.08 * var(--sf));
    padding: calc(7.32 * var(--sf)) calc(14.64 * var(--sf));
    font-size: max(12px, calc(18.3 * var(--sf)));
    letter-spacing: -0.003em;
  }
  .starring__ep--ghost,
  .starring__ep--slot { display: flex; }
  .starring__ep--ghost { border: max(2px, calc(3 * var(--sf))) dashed rgba(255, 207, 115, 0.9); background: rgba(255, 255, 255, 0.05); }
  .starring__ep--next,
  .starring__ep--slot { border-width: max(2px, calc(2.44 * var(--sf))); }
  .starring__ep--next span { font-size: calc(41.48 * var(--sf)); }
}

/* ============ FEATURE GRID (Figma 13 "Feature grid — every tool", 1920 x 1720) ============
   "Every tool. Built in." and its sub line on top, then five rows of 236px photo tiles on
   Figma's 256px pitch, each row drifting slowly, in turn left and right (CSS marquee;
   data-loop repeats the tiles). Each row starts where Figma has it on the 1920 frame
   (--x, Figma px from the frame's left edge), centred on the screen. --sf is one Figma px;
   --g is the tile unit: it follows the frame but never drops below 140/236 px, so on
   phones the tiles are 140px. --t keeps the headline readable on phones. Hovering a row
   pauses it. */
.fgrid {
  --sf: min(1px, 100cqw / 1920);
  --g: max(0.5932px, var(--sf));
  --t: max(0.56px, var(--sf));
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: max(56px, calc(110 * var(--sf))) 0 max(56px, calc(140 * var(--sf)));
  background: #f4f4f6;
  color: #1b1a22;
}

/* Headline and sub line, centred over the wall */
.fgrid__head {
  position: relative;
  z-index: 3;
  padding: 0 20px;
  text-align: center;
}
.fgrid__title {
  margin: 0;
  font-size: calc(64 * var(--t));
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.04em;
  color: #1b1a22;
}
.fgrid__title em {
  font-family: var(--font-serif);
  font-size: calc(76 * var(--t));
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.fgrid__sub {
  max-width: 42em;
  margin: calc(-3 * var(--sf)) auto 0;   /* Figma tucks it 3px into the headline's line box */
  font-size: max(15px, calc(20 * var(--sf)));
  line-height: 1.25;
  color: #5b6675;
}

/* The rows */
.fgrid__rows {
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--g));
  margin-top: max(36px, calc(89 * var(--sf)));
}
.fgrid__track {
  display: flex;
  width: max-content;
  margin: 0;
  /* the row's Figma x on the centred 1920 frame, one 10-tile loop (2560px) further left */
  margin-left: calc(50% + (var(--x) - 960 - 2560) * var(--g));
  padding: 0;
  list-style: none;
  animation: marquee 380s linear infinite;
}
.fgrid__row:nth-child(even) .fgrid__track { animation-direction: reverse; animation-duration: 440s; }
.fgrid__row:hover .fgrid__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .fgrid__track { animation: none; }
}

/* A tile: the picture full-bleed in a 6px white frame, a dark fade at the bottom,
   a round icon top left and the label in white at the bottom */
.fcell {
  position: relative;
  flex: none;
  width: calc(236 * var(--g));
  height: calc(236 * var(--g));
  margin-right: calc(20 * var(--g));      /* margin, not gap, so -50% lands on a whole tile */
  box-sizing: border-box;
  overflow: hidden;
  border: calc(6 * var(--g)) solid #fff;
  border-radius: calc(54 * var(--g));
  background: #fff;
  box-shadow: 0 calc(2 * var(--g)) calc(6 * var(--g)) rgba(11, 22, 34, 0.06),
              0 calc(16 * var(--g)) calc(34 * var(--g)) calc(-8 * var(--g)) rgba(11, 22, 34, 0.16);
}
.fcell::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: calc(54 * var(--g));
  background: linear-gradient(180deg, rgba(6, 18, 28, 0.1) 0%, rgba(6, 18, 28, 0.15) 42%,
                                      rgba(6, 18, 28, 0.62) 72%, rgba(6, 18, 28, 0.9) 100%);
}
.fcell__pic {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  border-radius: calc(54 * var(--g));
}
.fcell__icon {
  position: absolute;
  z-index: 1;
  left: calc(14 * var(--g));
  top: calc(14 * var(--g));
  width: calc(40 * var(--g));
  height: calc(40 * var(--g));
  max-width: none;
}
.fcell span {
  position: absolute;
  z-index: 1;
  left: calc(16 * var(--g));
  bottom: calc(17.5 * var(--g));
  width: calc(192 * var(--g));
  font-size: max(12px, calc(19 * var(--g)));
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: #fff;
}
.fcell--blank {
  border: 0;
  background: linear-gradient(180deg, #ebebee, #e5e5e9);
  box-shadow: none;
}
.fcell--blank::after { content: none; }

/* Edge fades: the rows melt into the page at both sides (Figma: 260px) */
.fgrid__fade {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: min(calc(260 * var(--g)), 12vw);
  pointer-events: none;
}
.fgrid__fade--left  { left: 0;  background: linear-gradient(90deg, #f4f4f6, rgba(244, 244, 246, 0)); }
.fgrid__fade--right { right: 0; background: linear-gradient(270deg, #f4f4f6, rgba(244, 244, 246, 0)); }



/* ============ STEPS (inside .demo, replaces the old .recap) ============ */

/* Figma "10c Steps — one shot, three stages" (1920 x 1080). It sits inside .demo, on the
   dark-to-light fade: transparent at the top (the demo's glows fade out under it), dark
   behind the pictures, light grey (#f4f4f6, the top of "Video types") behind the step text.
   --sf is one Figma px. Each picture (.steps3__art) has its own box and unit --u: on
   desktop --u = --sf; on phones/tablets each picture scales to fit the screen width.
   Picture parts are placed with --x / --y (Figma px inside the picture box, set inline). */
.steps3 {
  --sf: min(1px, 100cqw / 1920);
  position: relative;
  isolation: isolate; /* keeps the phone ribbon slices (z-index -1) above this background */
  margin-top: 96px;
  padding-bottom: 190px;
  container-type: inline-size;
  /* phones/tablets: dark behind all three steps, light grey only below the last one */
  background: linear-gradient(180deg,
    rgba(10, 10, 14, 0) 0,
    #0a0a0e 130px,
    #0b0b12 216px,
    #0b0b12 calc(100% - 190px),
    #5d5a6b calc(100% - 110px),
    #f3f3f6 calc(100% - 30px),
    #f4f4f6 100%);
}

/* Head: "Three steps." with the handwritten line under it, one line of text */
.steps3__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 16px;
  text-align: center;
}
.steps3__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  white-space: nowrap;
}
.steps3__title-a {
  margin-bottom: -0.12em;
  font-size: max(50px, calc(84 * var(--sf)));
  font-weight: 700;
  line-height: 0.96;
  letter-spacing: -0.04em;
}
.steps3__title-b {
  font-family: var(--font-script);
  font-size: max(60px, calc(100 * var(--sf)));
  font-weight: 400;
  line-height: 0.88;
}
.steps3__sub {
  max-width: 320px;
  margin-top: 14px;
  font-size: max(16px, calc(22 * var(--sf)));
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.003em;
  color: rgba(255, 255, 255, 0.75);
}

/* Track: the ribbon (desktop only) behind three columns */
.steps3__track { position: relative; margin-top: 48px; }
.steps3__ribbon { display: none; }
.steps3__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 72px;
  padding: 0 16px;
  list-style: none;
}
.steps3__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
}

/* ---- Pictures ---- */
.steps3__art {
  position: relative;
  flex: none;
  width: calc(var(--w) * var(--u));
  height: calc(var(--hh) * var(--u));
}
/* Phones/tablets: each picture as wide as the screen allows, never above Figma size */
.steps3__art--1 { --w: 460; --hh: 277; --u: min(1px, (100cqw - 32px) / 460); }
.steps3__art--2 { --w: 540; --hh: 389; --u: min(1px, (100cqw - 24px) / 540); }
.steps3__art--2 .steps3__conn { /* shorter line on phones: the top 82px of it */
  height: calc(82 * var(--u));
  object-fit: cover;
  object-position: top;
}
.steps3__art--3 { --w: 580; --hh: 421; --u: min(1px, (100cqw - 16px) / 580); }
.steps3__art > * { position: absolute; }

/* Dotted line from each picture down to its node */
.steps3__conn {
  left: calc(var(--x) * var(--u));
  bottom: calc(5 * var(--u));
  width: calc(12 * var(--u));
  height: calc(var(--h) * var(--u));
}

/* 01: the typed line with a blinking caret */
.steps3__eyebrow {
  left: calc(22 * var(--u));
  top: calc(6 * var(--u));
  font-size: max(11px, calc(13 * var(--u)));
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.14em;
  color: #ffc94d;
}
.steps3__prompt {
  left: calc(20 * var(--u));
  top: calc(40 * var(--u));
  font-family: var(--font-script);
  font-size: calc(72 * var(--u));
  line-height: 0.95;
  white-space: nowrap;
  text-align: left;
  color: #fff;
}
.steps3__caret {
  display: inline-block;
  width: calc(5 * var(--u));
  height: calc(70 * var(--u));
  margin-left: calc(8 * var(--u));
  vertical-align: -0.2em;
  background: #ffc94d;
  animation: steps3-blink 1.1s steps(1) infinite;
}
@keyframes steps3-blink { 50% { opacity: 0; } }

/* 02: storyboard stills fanned out, gold ticks, the swap pill */
.steps3__still {
  left: calc((var(--x) - 75) * var(--u));
  top: calc((var(--y) - 50) * var(--u));
  width: calc(150 * var(--u));
  height: calc(100 * var(--u));
  overflow: hidden;
  border: calc(3 * var(--u)) solid rgba(255, 255, 255, 0.85);
  border-radius: calc(12 * var(--u));
  box-shadow: 0 calc(12 * var(--u)) calc(24 * var(--u)) rgba(0, 0, 0, 0.55);
  rotate: var(--rot);
}
.steps3__still img { width: 100%; height: 100%; object-fit: cover; }
.steps3__still b {
  position: absolute;
  left: calc(5 * var(--u));
  top: calc(5 * var(--u));
  padding: calc(3 * var(--u)) calc(7 * var(--u));
  border-radius: calc(8 * var(--u));
  background: rgba(0, 0, 0, 0.55);
  font-size: calc(12 * var(--u));
  font-weight: 700;
  line-height: 1.25;
}
.steps3__tick {
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
}
.steps3__pill {
  left: calc(420 * var(--u));
  top: calc(4 * var(--u));
  padding: calc(6 * var(--u)) calc(12 * var(--u));
  border-radius: calc(14 * var(--u));
  background: #fff;
  font-size: calc(13 * var(--u));
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  color: #141826;
}

/* 03: the episode playing, its soundtrack, the "posted" toasts */
.steps3__episode {
  left: calc(70 * var(--u));
  top: calc(64 * var(--u));
  width: calc(440 * var(--u));
  height: calc(260 * var(--u));
  overflow: hidden;
  border: calc(3 * var(--u)) solid rgba(255, 255, 255, 0.9);
  border-radius: calc(20 * var(--u));
  box-shadow: 0 calc(18 * var(--u)) calc(50 * var(--u)) rgba(255, 122, 26, 0.35);
}
.steps3__episode img { width: 100%; height: 100%; object-fit: cover; }
.steps3__episode::after { /* shade under the player bar */
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: calc(90 * var(--u));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75));
}
.steps3__time,
.steps3__bar { position: absolute; z-index: 1; }
.steps3__time {
  left: calc(18 * var(--u));
  top: calc(200 * var(--u));
  font-size: calc(13 * var(--u));
  font-weight: 600;
  line-height: 1.25;
  white-space: pre;
}
.steps3__bar {
  left: calc(18 * var(--u));
  top: calc(226 * var(--u));
  width: calc(392 * var(--u));
  height: calc(5 * var(--u));
  border-radius: calc(3 * var(--u));
  background: rgba(255, 255, 255, 0.35);
}
.steps3__bar i { /* played part, with the knob at its end */
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(250 * var(--u));
  border-radius: inherit;
  background: #ffb347;
}
.steps3__bar i::after {
  content: "";
  position: absolute;
  right: calc(-7 * var(--u));
  top: 50%;
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
  translate: 0 -50%;
  border-radius: 50%;
  background: #fff;
}
.steps3__wave {
  left: calc(80 * var(--u));
  top: calc(338 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(5 * var(--u));
  height: calc(52 * var(--u));
}
.steps3__wave i {
  width: calc(6 * var(--u));
  height: calc(var(--h) * var(--u));
  border-radius: calc(3 * var(--u));
  background: rgba(255, 179, 71, 0.9);
}
.steps3__music {
  left: calc(245 * var(--u));
  top: calc(354 * var(--u));
  font-size: calc(15 * var(--u));
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  color: #ffe2b0;
}
.steps3__toast {
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  padding: calc(8 * var(--u)) calc(16 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u));
  border-radius: calc(24 * var(--u));
  background: #fff;
  box-shadow: 0 calc(10 * var(--u)) calc(24 * var(--u)) rgba(0, 0, 0, 0.35);
  font-size: calc(15 * var(--u));
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  color: #141826;
  translate: -50% -50%;
  rotate: var(--rot);
}
.steps3__toast i {
  display: grid;
  place-items: center;
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
  border-radius: 50%;
  font-size: calc(14 * var(--u));
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  color: #fff;
}
.steps3__toast--yt i { background: #ff0033; }
.steps3__toast--ig i { background: #d62976; }

/* ---- Node: white disc, orange ring, soft orange halo ---- */
.steps3__hub {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
}
.steps3__node {
  --n: 0.84px; /* 72px on phones */
  position: relative;
  display: grid;
  place-items: center;
  width: calc(86 * var(--n));
  height: calc(86 * var(--n));
  padding-top: calc(4 * var(--n));
  border: calc(4 * var(--n)) solid #ffb347;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 calc(8 * var(--n)) calc(24 * var(--n)) rgba(255, 122, 26, 0.5), 0 0 calc(28 * var(--n)) calc(22 * var(--n)) rgba(255, 179, 71, 0.35);
  font-family: var(--font-script);
  font-size: calc(46 * var(--n));
  line-height: 1;
  color: #141826;
}
/* Phones/tablets: a short slice of the glowing ribbon runs through each node */
.steps3__hub::before,
.steps3__hub::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: min(100cqw, 560px);
  translate: -50% -50%;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(255, 122, 26, 0), #ff7a1a 22%, #ffb347 50%, #ffd36b 78%, rgba(255, 211, 107, 0));
}
.steps3__hub::before { height: 40px; opacity: 0.45; filter: blur(14px); }
.steps3__hub::after  { height: 12px; }

/* ---- Step text ---- */
.steps3__label {
  margin-top: 28px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.14em;
  color: #ffa04d;
}
.steps3__name {
  margin-top: 6px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #fff;
}
.steps3__text {
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
}

/* ---- Desktop: Figma's layout. Head at the top of the 1080 frame, the track from y 280:
   three 600px columns centred on the ribbon's nodes (x 360 / 960 / 1560), each picture
   ending at its node, the step text in the light part of the fade. ---- */
@media (min-width: 1024px) {
  .steps3 {
    margin-top: calc(110 * var(--sf));
    padding-bottom: calc(92 * var(--sf));
    background: linear-gradient(180deg,
      rgba(10, 10, 14, 0) 0,
      #0a0a0e calc(130 * var(--sf)),
      #0b0b12 calc(216 * var(--sf)),
      #0b0b12 calc(626 * var(--sf)),
      #5d5a6b calc(799 * var(--sf)),
      #f3f3f6 calc(929 * var(--sf)),
      #f4f4f6 100%);
  }
  .steps3__sub { max-width: none; margin-top: calc(16 * var(--sf)); }
  .steps3__track { margin-top: calc(77 * var(--sf)); }
  .steps3__ribbon {
    display: block;
    position: absolute;
    /* Figma's 2040px ribbon (x -60), drawn 400px longer at both ends for wide screens */
    left: calc(50% - 1420 * var(--sf));
    top: calc(300 * var(--sf)); /* Figma y 600, less the 20px of glow above the frame */
    width: calc(2840 * var(--sf));
    max-width: none;
    height: calc(360 * var(--sf));
    pointer-events: none;
    /* soft ends, only seen on screens wider than 2560 */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 calc(60 * var(--sf)), #000 calc(100% - 60 * var(--sf)), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 calc(60 * var(--sf)), #000 calc(100% - 60 * var(--sf)), transparent);
  }
  .steps3__list {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, calc(600 * var(--sf)));
    justify-content: center;
    align-items: start;
    gap: 0;
    padding: 0;
  }
  .steps3__art { --u: var(--sf); }
  .steps3__art--1 { margin-top: calc(160 * var(--sf)); }
  .steps3__art--2 { --hh: 461; }
  .steps3__art--2 .steps3__conn { height: calc(154 * var(--sf)); }
  .steps3__art--2,
  .steps3__art--3 { margin-top: calc(16 * var(--sf)); }
  .steps3__hub::before,
  .steps3__hub::after { display: none; }
  .steps3__node { --n: var(--sf); }
  .steps3__label {
    margin-top: calc(49 * var(--sf));
    font-size: max(11px, calc(13 * var(--sf)));
    color: #e8590c;
  }
  .steps3__step--2 .steps3__label { margin-top: calc(23 * var(--sf)); }
  .steps3__name {
    font-size: max(20px, calc(32 * var(--sf)));
    color: #141826;
  }
  .steps3__text {
    font-size: max(14px, calc(18 * var(--sf)));
    color: #4b4f5c;
  }
}
@media (prefers-reduced-motion: reduce) {
  .steps3__caret { animation: none; }
}


/* ---- Studio tiles with a Bunny loop (js/videos.js). The layer sits exactly over the tile's
   picture (same box as .st__art), so a 924-wide Figma px is 100cqw / 924. If Bunny can't be
   reached the layer is removed and the picture under it shows as before. ---- */
.st__live {
  --u: calc(100cqw / 924);
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  pointer-events: none;
}
.st__live > * { position: absolute; display: block; max-width: none; }
.st__live--talk { aspect-ratio: 924 / 660; }
.st__live--talk > img {
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%);
          mask-image: linear-gradient(180deg, transparent 0, #000 9%);
}
/* the speaking face, framed like the chat avatars */
.st__live--talk video {
  left: calc(292 * var(--u));
  top: calc(70 * var(--u));
  width: calc(340 * var(--u));
  height: calc(340 * var(--u));
  object-fit: cover;
  border: calc(6 * var(--u)) solid #fff;
  border-radius: calc(36 * var(--u));
  background: #0f1014;
}
/* the Claymation slot of the styles picture plays a claymation film */
.st__live--styles { aspect-ratio: 924 / 616; }
.st__live--styles video {
  left: calc(423 * var(--u));
  top: calc(268 * var(--u));
  width: calc(198 * var(--u));
  height: calc(204 * var(--u));
  object-fit: cover;
  border-radius: calc(17 * var(--u));
  background: #17191f;
}
.st__live--styles span {
  left: calc(456 * var(--u));
  top: calc(425 * var(--u));
  width: calc(139 * var(--u));
  height: calc(39 * var(--u));
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #fff;
  font-size: calc(19 * var(--u));
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #1f2a44;
}

/* ---- Starring you: a real clip turned cartoon, under the note (Bunny only) ---- */
.starring__clip {
  left: calc(790 * var(--k));
  top: calc(852 * var(--k));
  width: calc(280 * var(--k));
  padding: calc(9 * var(--k)) calc(9 * var(--k)) 0;
  border-radius: calc(6.75 * var(--k));
  background: #faf7f2;
  box-shadow: 0 calc(18 * var(--k)) calc(22 * var(--k)) rgba(0, 0, 0, 0.55);
  transform: rotate(-4deg);
}
.starring__clip video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #1a1a22;
}
.starring__clip figcaption {
  padding: calc(8 * var(--k)) 0 calc(10 * var(--k));
  font-family: var(--font-script);
  font-size: calc(26 * var(--k));
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  color: #262633;
}

/* ---- Play/pause toggles (js/animations.js): the button shows what a click will do ---- */
.gslide__play { padding: 0; color: #fff; cursor: pointer; }
.gslide.is-active .gslide__video { cursor: default; }
.gslide__play .i-pause,
.gslide__play.is-playing .i-play { display: none; }
.gslide__play.is-playing .i-pause { display: block; }

.big-screen { cursor: pointer; }
.big-screen__pause {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.big-screen__pause::before { content: ""; position: absolute; inset: -10px; }   /* bigger tap area */
.big-screen__pause img { width: 100%; height: 100%; }
.big-screen__pause .i-play,
.big-screen__pause.is-paused .i-pause { display: none; }
.big-screen__pause.is-paused .i-play { display: block; }

/* ---- Video types: prev / next arrows centred under the row; cards are clickable ---- */
.vtype { cursor: pointer; }
.vtypes__arrow {
  position: absolute;
  z-index: 3;
  top: calc(100% + 20px);
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(14, 11, 30, 0.1);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #0e0b1e;
  box-shadow: 0 6px 18px rgba(14, 11, 30, 0.16);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.vtypes__arrow:hover { transform: scale(1.08); box-shadow: 0 8px 24px rgba(14, 11, 30, 0.22); }
.vtypes__arrow--prev { right: calc(50% + 8px); }
.vtypes__arrow--next { left: calc(50% + 8px); }
@media (min-width: 1024px) {
  .vtypes__arrow { top: calc(100% + 12px); width: 56px; height: 56px; }
}

/* Feature grid: the tiles that were grey in Figma show another tile's picture, without label */
.fcell--extra::after { content: none; }

/* ============ COUPON STRIP: floating glass bar at the bottom, as wide as its content, at most 80% (js/coupon-strip.js) ============
   Coupon code(s) (click to copy), the Launch Kit "rockettoons" countdown and a buy button.
   It slides up once the hero is scrolled past. The countdown part hides itself while the
   timer isn't running (timer.js keeps [data-lk-timer] hidden). Not shown on phones for now. */
.cstrip {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 900;
  width: max-content;
  max-width: 80vw;
  padding: 12px 14px 12px 22px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(14, 16, 36, 0.55);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
          backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: #fff;
  font-family: inherit;
  transform: translate(-50%, calc(100% + 40px));
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cstrip.is-on { transform: translate(-50%, 0); }
.cstrip__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
}
.cstrip__codes { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 8px; }
.cstrip__label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.cstrip__code {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 10px;
  border: 1.5px dashed rgba(255, 214, 102, 0.8);
  border-radius: 10px;
  background: rgba(255, 214, 102, 0.1);
  color: #fff;
  font: inherit;
  font-size: 13px;
  line-height: 1.1;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease;
}
.cstrip__code:hover { background: rgba(255, 214, 102, 0.2); }
.cstrip__code b { font-weight: 800; letter-spacing: 0.04em; color: #ffd666; }
.cstrip__code small { font-size: 12px; color: rgba(255, 255, 255, 0.8); }
.cstrip__code.is-copied b { color: #7dffa8; }
.cstrip__time { display: flex; align-items: center; gap: 8px; }
.cstrip__time:has([data-lk-timer][hidden]) { display: none; }
.cstrip__time-label { font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, 0.85); white-space: nowrap; }
.cstrip .lk-cd { gap: 10px; align-items: baseline; }
.cstrip .lk-cd__unit { flex-direction: row; align-items: baseline; gap: 1px; min-width: 0; }
.cstrip .lk-cd__num {
  min-width: 0;
  padding: 0;
  background: none;
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  color: #ffd666;
}
.cstrip .lk-cd__label { margin-left: 2px; font-size: 14px; font-weight: 700; text-transform: lowercase; letter-spacing: 0; opacity: 0.7; }
.cstrip__buy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 10px 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe08a 0%, #ffc94d 55%, #f5a623 100%);
  color: #141826;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(245, 166, 35, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cstrip__buy:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(245, 166, 35, 0.45); }
.cstrip__buy i {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #141826;
  color: #ffd666;
  font-style: normal;
  font-size: 13px;
}
/* phones and small tablets: not shown for now */
@media (max-width: 899px) {
  .cstrip { display: none; }
}
/* the page can scroll to its very end without the strip covering it */
@media (min-width: 900px) {
  body.has-cstrip { padding-bottom: calc(var(--cstrip-h, 0px) + 32px); }
}
@media (min-width: 900px) {
  /* coupon and countdown sit together on the left, a thin line between them; the button on the right */
  .cstrip__in { flex-wrap: nowrap; justify-content: flex-start; gap: 28px; }
  .cstrip__time { padding-left: 28px; border-left: 1px solid rgba(255, 255, 255, 0.18); }
  .cstrip__buy { margin-left: 8px; }
  .cstrip__codes { justify-content: flex-start; flex-wrap: nowrap; }
  .cstrip__code { font-size: 16px; padding: 8px 14px; }
  .cstrip__time-label { font-size: 16px; }
  .cstrip .lk-cd__num { font-size: 30px; }
  .cstrip__buy { font-size: 16px; padding: 11px 12px 11px 22px; }
}

/* ---- Pricing: one plan on its own (.price__plans--single) on a dark card (.plan--dark) ---- */
@media (min-width: 1024px) {
  .price__plans--single { grid-template-columns: calc(720 * var(--sf)); }
}
.plan--dark { background: #111113; color: #fff; box-shadow: 0 calc(40 * var(--sf)) calc(80 * var(--sf)) rgba(0, 0, 0, 0.25), 0 2px 3px rgba(0, 0, 0, 0.12); }
.plan--dark .plan__kicker { color: #6fb2ff; }
.plan--dark .plan__sub,
.plan--dark .plan__credits { color: rgba(255, 255, 255, 0.55); }
.plan--dark .plan__price span { color: rgba(255, 255, 255, 0.5); }
.plan--dark .plan__label { border-top-color: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.45); }
.plan--dark .plan__list li { color: rgba(255, 255, 255, 0.86); }
.plan--dark .plan__list li::before { background-image: url("../images/icons/price-check-dark.svg"); }
.plan--dark .plan__guarantee { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.85); }
.plan--dark .plan__secure { color: rgba(255, 255, 255, 0.45); }