/* ==========================================
   RocketToons OTO3 — Studio v2 (Figma 787:128, 1920 wide)
   Component styles that Tailwind utilities can't express cleanly.
   Sizes in px follow the 1920px Figma frame; content is 1360 wide (x 280–1640).
   Shared components (order bar, buy box, vs-Commercial table, low payment, guarantee,
   pricing) are the same code as elite/ and pro/; only the PAGE THEME values differ. The
   hero board, the bento grid, the "What you can make" bento and the FAQ are Studio's
   own. The Introducing section, the ten bento tiles and the showcase are merged in at
   the end (PARTS).
   ========================================== */

/* ============ PAGE THEME ============ */
:root {
  --page: #fbfaf7;
  --ink: #0e1726;
  --ink-2: #16181d;
  --body: #3f4757;
  --muted: #545c6b;
  --accent: #0e9f7e;                 /* script lines, dots */
  --studio-ink: #121614;             /* Studio headlines */
  --lime: #d9f99d;                   /* highlight boxes, chips, node dots */
  --step-done: #1f9d5c;

  /* hero board (Figma "Hero board" 1808 x 1476.5) */
  --board-bg: #0d1512;

  /* buy box + CTA */
  --name-grad: linear-gradient(90deg, #0e9f7e, #2d7dd2);
  --cta-ink: #0b1f5c;
  --cta-sub: rgba(11, 31, 92, 0.7);
  --cta-arrow-bg: #0b1f5c;

  /* section headlines with a gradient second line (pricing) */
  --head-grad: linear-gradient(90deg, #0b8a6e, #12a98a);

  /* 05 guarantee */
  --gtee-bg: linear-gradient(155.13deg, #0a5d50 0%, #0e9f7e 39.286%, #35c9a6 71.429%);
  --gtee-hl-ink: #145345;
  --gtee-strong: #fff;
  --shield-shadow: drop-shadow(0 30px 30px rgba(16, 12, 51, 0.35));
  --gtee-body-mt: 32px;              /* art top 294, headline at 90 */
  --gtee-text-mt: 54px;              /* text top 348 */

  /* 06 pricing */
  --price-head: linear-gradient(160.85deg, #0a5d50 0%, #0e9f7e 42.857%, #7fe3d0 71.429%);
  --price-blob: rgba(217, 249, 157, 0.55);
  --price-chip: #b1f8e8;
  --price-shadow: 0 40px 80px -20px rgba(24, 21, 82, 0.16), 0 2px 6px rgba(24, 21, 82, 0.06);

  /* 02 urgency (Studio vs Commercial) */
  --elig-hl: linear-gradient(90deg, #e9ffb8, #c6f99a);
  --row-dot: #0e9f7e;
  --plan-bg: linear-gradient(170deg, #2bd3ae 0%, #0b8a6e 100%);
  --plan-shadow: 0 20px 50px -10px rgba(14, 159, 126, 0.3);
  --card-shadow: 0 20px 40px -12px rgba(27, 36, 64, 0.06);

  /* 03b what you can make + 07 FAQ highlight boxes */
  --lime-grad: linear-gradient(90deg, #e9ffb8, #c6f99a);

  /* 04 low payment */
  --lowpay-grad: linear-gradient(90deg, #22c3a0, #0b8a6e);
  --lead-strong: #0b8a6e;
  --lead-rest: #0b8a6e;
  --lowpay-blob: rgba(11, 138, 110, 0.25);
  --app-shadow: 0 30px 60px -12px rgba(24, 21, 82, 0.22);
  --timeline-a: #0b8a6e;
  --timeline-b: #d9f5ec;
  --tag-bg: linear-gradient(160.68deg, #22c3a0 0%, #0b8a6e 100%);
  --tag-shadow: rgba(61, 44, 179, 0.3);
  --tag-big: #fff;
}
/* the pricing card's CTA uses the deep violet ink (Figma) */
.price-card { --cta-ink: #1b1552; --cta-sub: rgba(27, 21, 82, 0.7); --cta-arrow-bg: #1b1552; }
.price-card__note { color: #3e5852; }


/* ============ BASE ============ */
body { background: var(--page); color: var(--ink); }
.wrap { width: 100%; max-width: 1392px; margin: 0 auto; padding: 0 16px; }
img { -webkit-user-drag: none; }

/* Showcase videos (js/videos.js) */
.rt-play, .rt-play button { cursor: pointer; }

/* Blurred ellipses (Figma "Ellipse" layers with a layer blur). Each <i> carries its Figma
   box in the parent's px (--x --y --w --h), the parent's Figma size in --W/--H, its
   colour in --c and its blur in --b. Positions are % so the mesh stretches with the box. */
.blobs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  container-type: inline-size;
}
.blobs i {
  position: absolute;
  left: calc(var(--x) / var(--W) * 100%);
  top: calc(var(--y) / var(--H) * 100%);
  width: calc(var(--w) / var(--W) * 100%);
  height: calc(var(--h) / var(--H) * 100%);
  border-radius: 50%;
  background: var(--c);
  filter: blur(max(calc(var(--b) * 100cqw / var(--W)), calc(var(--b) * 0.4px)));
}
/* single soft glow placed in Figma px of its section (scaled with --u) */
.glow {
  position: absolute;
  left: calc(var(--x) * var(--u, 1px));
  top: calc(var(--y) * var(--u, 1px));
  width: calc(var(--w) * var(--u, 1px));
  height: calc(var(--h) * var(--u, 1px));
  border-radius: 50%;
  background: var(--c);
  filter: blur(calc(var(--b) * var(--u, 1px)));
  pointer-events: none;
}


/* ============ ORDER STATUS BAR + ORDER STEPS (Figma "Order status bar" 1920 x 52, "Order steps" 496 x 52) ============ */
.order-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  min-height: 52px;
  padding: 10px 16px;
  background: #0e1726;
  font-size: 16px;
  text-align: center;
}
.order-bar img { width: 20px; height: 20px; flex: none; }
.order-bar strong { font-weight: 600; color: #ffd36b; }
.order-bar span { color: rgba(255, 255, 255, 0.8); }

.order-steps {
  display: flex;
  width: max-content;
  max-width: calc(100% - 32px);
  margin: 16px auto 0;
  gap: 4px;
  padding: 6px;
  border: 1px solid rgba(14, 23, 38, 0.1);
  border-radius: 12px;
  background: #fff;
}
.order-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 10px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  color: rgba(14, 23, 38, 0.7);
  white-space: nowrap;
}
.order-step__num {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 11px;
  background: rgba(14, 23, 38, 0.08);
  font-size: 12px;
  font-weight: 700;
  color: rgba(14, 23, 38, 0.6);
}
.order-step__num img { width: 12px; height: 12px; }
.order-step--done .order-step__num { background: var(--step-done); }
.order-step--now { background: #0e1726; font-weight: 600; color: #fff; }
.order-step--now .order-step__num { background: #fff; color: #0e1726; }
@media (max-width: 639px) {
  .order-steps { max-width: calc(100% - 24px); gap: 2px; padding: 4px; }
  .order-step { padding: 5px 7px 5px 5px; gap: 5px; font-size: 11px; }
  .order-step__num { width: 16px; height: 16px; font-size: 9px; }
  .order-step__num img { width: 10px; height: 10px; }
}



/* ============ HERO BOARD (Figma "Hero board" 1808 x 1476.5 + "Video card" 1140 x 650) ============
   A dark canvas card: dot grid, four soft glows, chip, headline, sub line, then the node
   graph (prompt -> five clips, four floating pills). The video card is pulled up into the
   board: 292.5 of its 650px (25.66% of its width) overlap the board, as in Figma.

   The graph is drawn in Figma px of the board: --g is one Figma px (board width / 1808).
   It never drops below 0.5px, so on phones the graph is cropped at the sides (centre
   nodes stay readable) instead of shrinking to nothing. */
.hero {
  --vid-w: min(1140px, 100cqw - 32px);
  position: relative;
  container-type: inline-size;
  margin-top: 16px;
}
.board {
  --bw: calc(100cqw - 24px);
  --g: max(calc(var(--bw) / 1808), 0.5px);
  position: relative;
  margin: 0 12px;
  overflow: hidden;
  border-radius: 28px;
  background-color: var(--board-bg);
  padding: 40px 16px calc(39 * var(--g) + var(--vid-w) * 0.2566);
  color: #fff;
  text-align: center;
}
@media (min-width: 1024px) {
  .board { --bw: calc(100cqw - 112px); margin: 0 56px; border-radius: 48px; padding: 70px 24px calc(39 * var(--g) + var(--vid-w) * 0.2566); }
}
/* Figma "Dot grid (canvas)": 2.8px white dots at 11%, every 28px, first one at 12.6 */
.board::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 14px 14px, rgba(255, 255, 255, 0.11) 1.4px, transparent 1.9px);
  background-size: 28px 28px;
  pointer-events: none;
}
.board > :not(.blobs) { position: relative; z-index: 1; }

.board-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.25;
}
.board-chip__icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--lime); }
.board-chip__icon img { width: 16px; height: 16px; }
.board-chip__tag { padding: 6px 12px; border-radius: 99px; background: var(--lime); font-size: 13px; font-weight: 700; line-height: 1.25; color: var(--studio-ink); }
@media (max-width: 639px) {
  .board-chip { gap: 8px; padding: 6px 12px 6px 6px; font-size: 16px; }
  .board-chip__tag { padding: 4px 10px; font-size: 12px; }
}

/* 80px at 1920; the second line is 1405px wide there, so the size follows the viewport */
.board-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.175em;                      /* 14px */
  margin-top: 24px;
  font-size: clamp(30px, 5.4vw - 8px, 80px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.board-title__line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.175em 0.25em; }
.board-title .hl {
  display: inline-block;
  padding: 0.1em 0.325em 0.15em;     /* 8 / 26 / 12 at 80px */
  border-radius: 0.325em;
  background: var(--lime);
  color: var(--studio-ink);
}

.board-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
  margin-top: 30px;
  font-size: clamp(16px, 1.45vw, 26px);
  font-weight: 500;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.9);
}
.board-sub .hl {
  padding: 0.23em 0.54em 0.27em;     /* 6 / 14 / 7 at 26px */
  border-radius: 12px;
  background: var(--lime);
  font-size: 0.923em;                /* 24 / 26 */
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--studio-ink);
}

/* ---- node graph: board y 478 to 1145 ---- */
.board-graph {
  position: relative;
  left: 50%;
  width: calc(1808 * var(--g));
  height: calc(667 * var(--g));
  margin-top: calc(70 * var(--g));
  translate: -50% 0;
  text-align: left;
}
@media (max-width: 1023px) { .board-graph { margin-top: 40px; } }
.board-graph > * { position: absolute; }
.board-links { inset: 0; width: 100%; height: 100%; overflow: visible; }
.board-links path {
  fill: none;
  stroke: var(--lime);
  stroke-opacity: 0.55;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 3 8;
}
.board-graph.is-live .board-links path { animation: board-dash 0.9s linear infinite; }
@keyframes board-dash { to { stroke-dashoffset: -11; } }

/* Prompt node (Figma "Prompt node" 640 x 96 at 584, 478) */
.board-prompt {
  left: calc(584 * var(--g));
  top: 0;
  width: calc(640 * var(--g));
  height: calc(96 * var(--g));
  border-radius: calc(28 * var(--g));
  background: #fff;
  box-shadow: 0 0 calc(40 * var(--g)) rgba(14, 159, 126, 0.5), 0 calc(24 * var(--g)) calc(60 * var(--g)) rgba(0, 0, 0, 0.45);
}
.board-prompt > * { position: absolute; }
.board-prompt__icon {
  left: calc(22 * var(--g));
  top: calc(22 * var(--g));
  display: grid;
  place-items: center;
  width: calc(52 * var(--g));
  height: calc(52 * var(--g));
  border-radius: calc(16 * var(--g));
  background: linear-gradient(135deg, #1fb58f 0%, #0b4f44 71.429%);
}
.board-prompt__icon img { width: calc(26 * var(--g)); height: calc(26 * var(--g)); }
.board-prompt__text {
  left: calc(92 * var(--g));
  top: calc(33 * var(--g));
  font-size: calc(22 * var(--g));
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
  color: #121714;
  max-width: calc(421 * var(--g)); /* stops short of the Generate button */
  overflow: hidden;
}
.board-prompt__caret { color: #0d9e7d; }
@media (max-width: 639px) { .board-prompt__text { font-size: calc(20.5 * var(--g)); } } /* the line just fits at the phone minimum scale */
.board-graph.is-live .board-prompt__caret { animation: board-caret 1s steps(1) infinite; }
@keyframes board-caret { 50% { opacity: 0; } }
.board-prompt__btn {
  left: calc(515 * var(--g));
  top: calc(26.5 * var(--g));
  padding: calc(12 * var(--g)) calc(16 * var(--g));
  border-radius: calc(16 * var(--g));
  background: #121614;
  font-size: calc(15 * var(--g));
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
  transition: scale 0.15s;
}
.board-prompt__btn.is-pressed { scale: 0.92; }

/* Clip nodes (Figma "Clip node — …"): --x --y --w --h the node in board px (y from 478),
   --iw --ih the picture, --px --py the play button, --ly the label */
.board-node {
  left: calc(var(--x) * var(--g));
  top: calc(var(--y) * var(--g));
  width: calc(var(--w) * var(--g));
  height: calc(var(--h) * var(--g));
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: calc(22 * var(--g));
  background: #1a2420;
  box-shadow: 0 calc(20 * var(--g)) calc(40 * var(--g)) calc(-8 * var(--g)) rgba(0, 0, 0, 0.5);
}
.board-node > * { position: absolute; }
.board-node__img {
  left: calc(5 * var(--g));
  top: calc(5 * var(--g));
  width: calc(var(--iw) * var(--g));
  height: calc(var(--ih) * var(--g));
  border-radius: calc(16 * var(--g));
  object-fit: cover;
}
.board-node__play {
  left: calc(var(--px) * var(--g));
  top: calc(var(--py) * var(--g));
  width: calc(40 * var(--g));
  height: calc(40 * var(--g));
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
}
.board-node__play img { position: absolute; left: calc(15 * var(--g)); top: calc(12 * var(--g)); width: calc(13 * var(--g)); height: calc(15 * var(--g)); }
.board-node__ratio {
  left: calc(13 * var(--g));
  top: calc(13 * var(--g));
  padding: calc(6 * var(--g)) calc(12 * var(--g));
  border-radius: 99px;
  background: rgba(18, 22, 20, 0.75);
  font-size: calc(11 * var(--g));
  font-weight: 700;
  line-height: 1.25;
}
.board-node__label {
  left: calc(11 * var(--g));
  top: calc(var(--ly) * var(--g));
  font-size: calc(13 * var(--g));
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.9);
}
/* Node inputs (Figma 12px ellipses: lime dot with a 3px ring of the board colour) */
.board-dot {
  left: calc(var(--x) * var(--g));
  top: calc(var(--y) * var(--g));
  width: calc(12 * var(--g));
  height: calc(12 * var(--g));
  border: calc(3 * var(--g)) solid var(--board-bg);
  border-radius: 50%;
  background: var(--lime);
}
/* Floating pills (Figma "Pill — …") */
.board-pill {
  left: calc(var(--x) * var(--g));
  top: calc(var(--y) * var(--g));
  padding: calc(10 * var(--g)) calc(16 * var(--g));
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(7px);
          backdrop-filter: blur(7px);
  font-size: calc(15 * var(--g));
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}

/* Video card: pulled 25.66% of its width up into the board (Figma: 292.5 of 1140) */
.hero .video-card { margin-top: calc(var(--vid-w) * -0.2566); }


/* Video card (Figma "Video card": white frame 10px, video 1120 x 630) */
.video-card {
  position: relative;
  z-index: 2;
  width: var(--vid-w);
  margin: calc(var(--vid-w) * -0.3136) auto 0;
  padding: 6px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 40px 45px rgba(11, 31, 58, 0.22), 0 2px 3px rgba(11, 31, 58, 0.1);
}
.video-card .rt-play {
  position: relative;
  aspect-ratio: 1120 / 630;
  overflow: hidden;
  border-radius: 15px;
  background: #0e1726;
}
@media (min-width: 1024px) {
  .video-card { padding: 10px; border-radius: 30px; }
  .video-card .rt-play { border-radius: 22px; }
}
.video-card .rt-play button { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.video-card .rt-play button > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.play-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
  translate: -50% -50%;
  transition: scale 0.2s;
}
.play-btn img { width: 24px; height: 24px; }
.rt-play button:hover .play-btn { scale: 1.06; }
@media (min-width: 1024px) {
  .play-btn { width: 92px; height: 92px; }
  .play-btn img { width: 34px; height: 34px; }
}



/* ============ BUY BOX (Figma "Buy box" 600 x 617) ============ */
.buy-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin-top: 48px;
  padding: 0 16px;
  text-align: center;
}
@media (min-width: 1024px) { .buy-box { gap: 28px; margin-top: 72px; } }

.timer { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.timer__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  color: #a86a00;
}
.timer__label img { width: 18px; height: 18px; }
.timer__units { display: flex; align-items: flex-start; gap: 10px; }
.timer__unit { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.timer__box {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border: 1px solid rgba(14, 23, 38, 0.08);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 10px 24px -6px rgba(11, 42, 92, 0.08);
  font-size: 52px;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: #0e1726;
}
.timer__cap { font-size: 13px; font-weight: 500; letter-spacing: 0.1em; color: rgba(14, 23, 38, 0.55); }
.timer__colon {
  width: 16px;
  height: 96px;
  font-size: 40px;
  font-weight: 700;
  line-height: 96px;
  text-align: center;
  color: rgba(14, 23, 38, 0.3);
}
@media (max-width: 639px) {
  .timer__box { width: 72px; height: 72px; border-radius: 18px; font-size: 38px; }
  .timer__colon { height: 72px; line-height: 72px; font-size: 30px; }
}

.buy-box__title {
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--studio-ink);
}
.grad-text {
  background: var(--name-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* CTA with its soft ring (Figma "CTA — Buy (ring)") */
.cta {
  display: inline-flex;
  max-width: 100%;
  padding: 8px;
  border-radius: 999px;
  background: rgba(242, 179, 61, 0.22);
  text-decoration: none;
}
.cta__btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 12px 12px 12px 24px;
  border: 1.5px solid #d98f12;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe08a 0%, #f7be45 55%, #efa52a 100%);
  box-shadow: inset 0 -5px 6px rgba(184, 110, 0, 0.35), inset 0 3px 2px rgba(255, 255, 255, 0.8), 0 20px 22px rgba(194, 122, 0, 0.4);
  text-align: left;
  transition: transform 0.2s, filter 0.2s;
}
.cta:hover .cta__btn { transform: translateY(-2px); filter: brightness(1.04); }
.cta__label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cta__main { font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; color: var(--cta-ink); }
.cta__sub { font-size: 13px; font-weight: 500; line-height: 1.25; color: var(--cta-sub); }
.cta__arrow {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--cta-arrow-bg);
}
.cta__arrow img { width: 24px; height: 24px; }
@media (min-width: 640px) {
  .cta { padding: 12px; }
  .cta__btn { gap: 22px; padding: 18px 18px 18px 64px; }
  .cta__main { font-size: 34px; white-space: nowrap; }
  .cta__sub { font-size: 16px; }
  .cta__arrow { width: 76px; height: 76px; }
  .cta__arrow img { width: 32px; height: 32px; }
}

.payments { display: block; width: 567px; max-width: 100%; height: auto; }

.trust-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 12px;
  padding: 10px 22px;
  border: 1px solid rgba(14, 23, 38, 0.08);
  border-radius: 999px;
  background: #fff;
  font-size: 15px;
  font-weight: 500;
  color: rgba(14, 23, 38, 0.75);
}
.trust-row strong { font-weight: 700; color: #0e1726; }
.trust-row i { width: 4px; height: 4px; border-radius: 50%; background: rgba(14, 23, 38, 0.3); }


/* Section headline with a gradient second line (low payment, pricing) */
.big-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-align: center;
  color: var(--ink-2);
}
.big-head__grad {
  background: var(--head-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* Down chevrons (Figma "Down chevrons (animate)" 56 x 64) */
.chevrons {
  display: block;
  width: 44px;
  height: auto;
  margin: 48px auto 0;
  animation: chevrons 1.8s ease-in-out infinite;
}
@media (min-width: 1024px) { .chevrons { width: 56px; margin-top: 50px; } }
@keyframes chevrons {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%      { transform: translateY(10px); opacity: 0.6; }
}



/* Studio's CTA label is longer: less left padding inside the 594-wide price card foot */
@media (min-width: 640px) { .price-card .cta__btn { padding-left: 40px; } }


/* ============ 02 URGENCY — STUDIO VS COMMERCIAL (Figma "02 Urgency — Studio vs Commercial" 1920 x 1194) ============
   Headline, lead and eligibility line, then the compare table: a 1280-wide grid (x 320–1600) of
   the white feature panel (780), the Studio column (210) and the Commercial column (210), 35px
   apart. Header row 72, thirteen feature rows of 60, 20 below; both columns run the full height. */
.vs { padding: 80px 0 96px; text-align: center; }
@media (min-width: 1024px) { .vs { padding: 180px 0; } }
.vs__title {
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.03em;
  color: #161829;
}
.vs__offer { position: relative; display: inline-block; }
.vs__swoosh {
  position: absolute;
  left: 50%;
  top: calc(100% - 0.1em);
  width: 2.217em;          /* 133 at 60px */
  height: auto;
  translate: -50% 0;
}
.vs__lead { margin-top: 30px; font-weight: 700; line-height: 1.25; color: #161829; }
.vs__elig { margin-top: 12px; line-height: 1.6; color: var(--muted); }
.vs__elig mark {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 8px;
  background: var(--elig-hl);
  font-size: 0.78em;        /* 14 at 18px */
  font-weight: 700;
  line-height: 1.3;
  color: #161829;
  white-space: nowrap;
}

/* Compare table: a grid of rows. The feature panel, the Studio column and the Commercial
   column are absolutely placed in their grid areas, so the cells line up on the same row tracks. */
.cmp {
  --rows: 13;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px 64px;
  grid-template-rows: 56px repeat(var(--rows), minmax(52px, auto)) 14px;
  column-gap: 8px;
  width: min(1312px, 100%);
  margin: 40px auto 0;
  padding: 0 16px;
  text-align: left;
}
@media (min-width: 1024px) {
  .cmp {
    grid-template-columns: minmax(0, 1fr) 210px 210px;
    grid-template-rows: 72px repeat(var(--rows), 60px) 20px;
    column-gap: 35px;
    margin-top: 38px;
  }
}
.cmp__panel, .cmp__plan, .cmp__com { position: absolute; inset: 0; pointer-events: none; }
.cmp__panel {
  grid-column: 1 / 2;
  grid-row: 2 / -2;
  border: 1px solid rgba(22, 24, 41, 0.06);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--card-shadow);
}
.cmp__plan {
  grid-column: 2 / 3;
  grid-row: 1 / -1;
  border-radius: 18px;
  background: var(--plan-bg);
  box-shadow: var(--plan-shadow);
}
.cmp__com {
  grid-column: 3 / 4;
  grid-row: 1 / -1;
  border: 1px solid rgba(22, 24, 41, 0.06);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--card-shadow);
}
@media (min-width: 1024px) {
  .cmp__panel { border-radius: 24px; }
  .cmp__plan { border-radius: 28px; }
  .cmp__com { border-radius: 32px; }
}

.cmp__cell { position: relative; display: flex; align-items: center; justify-content: center; }
.cmp__head { font-weight: 700; line-height: 1.25; letter-spacing: 0.12em; text-align: center; }
.cmp__head--plan { font-size: 11px; color: #fff; }
.cmp__head--com { font-size: 9px; letter-spacing: 0.05em; color: rgba(22, 24, 41, 0.5); }
@media (min-width: 1024px) {
  .cmp__head--plan { font-size: 18px; }
  .cmp__head--com { font-size: 15px; letter-spacing: 0.12em; }
}

.cmp__feat {
  justify-content: flex-start;
  gap: 10px;
  padding: 8px 10px 8px 14px;
  font-size: 14px;
  line-height: 1.3;
  color: var(--muted);
}
.cmp__feat::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--row-dot);
}
.cmp__feat b { font-weight: 700; color: #161829; }
/* row separators inside the panel (24px in from its edges) */
.cmp__feat:not(.cmp__feat--first)::after {
  content: "";
  position: absolute;
  top: 0;
  left: 14px;
  right: 10px;
  height: 1px;
  background: rgba(22, 24, 41, 0.06);
}
@media (min-width: 1024px) {
  .cmp__feat { gap: 17px; padding: 0 16px 0 28px; font-size: 18px; line-height: 1.25; }
  .cmp__feat::before { width: 7px; height: 7px; }
  .cmp__feat:not(.cmp__feat--first)::after { left: 24px; right: 24px; }
}
.cmp__plan-cell img, .cmp__com-cell img { width: 24px; height: 24px; }
@media (min-width: 1024px) { .cmp__plan-cell img, .cmp__com-cell img { width: 30px; height: 30px; } }


/* ============ 02 INSIDE STUDIO — BENTO (Figma "02 Inside Studio — bento" 1920 x 2744) ============
   Chip, two-line headline, then a 1360-wide grid of ten tiles (440 columns, 20px gaps;
   tiles 01 and 06 span two columns). Each tile slot is
     <div class="bt bt-NN [bt--wide]" style="--tw: W; --th: H;">…tile part…</div>
   with W x H its Figma size. --f is one Figma px of that tile: worked out from the grid's
   width (the grid is the container), so it is right on the tile itself and everything
   inside it. Tiles keep their Figma aspect ratio; phones stack them one per row. */
.bento { padding: 64px 0 80px; text-align: center; }
@media (min-width: 1024px) { .bento { padding: 160px 0 180px; } }
.bento__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 10px 14px;
  border-radius: 16px;
  background: rgba(18, 22, 20, 0.06);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.1em;
  color: var(--studio-ink);
}
.bento__chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.bento__head { display: flex; flex-direction: column; align-items: center; margin-top: 20px; padding: 0 16px; line-height: 1.25; }
.bento__head span:first-child { font-weight: 700; letter-spacing: -0.035em; color: var(--studio-ink); }
.bento__head span:last-child { margin-top: -0.07em; font-family: var(--font-script); font-weight: 400; color: var(--accent); }

.bento__grid {
  --gap: 16px;
  container-type: inline-size;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  width: min(1360px, 100% - 32px);
  margin: 40px auto 0;
  text-align: left;
}
.bt {
  --tile-w: 100cqw;
  --f: calc(var(--tile-w) / var(--tw));
  position: relative;
  aspect-ratio: var(--tw) / var(--th);
  min-width: 0;
}
/* Phones: the two wide tiles (01, 06) are drawn 900 wide, so their copy would shrink to ~7px.
   Below 640px the copy gets readable fixed sizes and the art below it moves down 64px
   (the tile grows by the same amount). */
@media (max-width: 639px) {
  .bt--wide { aspect-ratio: auto; height: calc(var(--th) * var(--f) + 64px); }
  .bt-01 .bt01-tile > :not(.bt01-title):not(.bt01-text):not(.bt01-blob),
  .bt-06 .bt06-card > :not(.bt06-title):not(.bt06-text):not(.bt06-glow) { margin-top: 64px; }
  .bt-01 .bt01-title, .bt-06 .bt06-title { left: 16px; top: 16px; font-size: 19px; }
  .bt-01 .bt01-text, .bt-06 .bt06-text { left: 16px; top: 46px; width: calc(100% - 32px); font-size: 13px; line-height: 1.4; }
}
@media (min-width: 640px) {
  .bento__grid { grid-template-columns: repeat(2, 1fr); }
  .bt { --tile-w: calc((100cqw - var(--gap)) / 2); }
  .bt--wide { grid-column: span 2; --tile-w: 100cqw; }
}
@media (min-width: 1024px) {
  .bento__grid { --gap: 20px; grid-template-columns: repeat(3, 1fr); margin-top: 70px; }
  .bt { --tile-w: calc((100cqw - 2 * var(--gap)) / 3); }
  .bt--wide { --tile-w: calc((100cqw - 2 * var(--gap)) / 3 * 2 + var(--gap)); }
}


/* ============ 03b WHAT YOU CAN MAKE — BENTO (Figma "03b What you can make with Studio — bento" 1920 x 1198) ============
   Headline, then a 1280-wide grid (x 320–1600) of six tiles on four 302px columns, 24px gaps:
   Product ads 628 x 624 (two columns, two rows), Memes 628 x 300, Formats and Extend 302 x 300,
   B-roll and Camera 628 x 300. Each tile is
     <article class="mk mk-NAME [mk--wide]" style="--tw: W; --th: H;">
   drawn in its own Figma px (--f), like the Inside Studio tiles: the still is placed by its
   centre (--ix/--iy), size (--iw/--ih), tilt (--ir) and corner radius (--irad).
   Below 1024 the grid has two columns: wide tiles span both, Formats and Extend sit side by
   side. On phones the wide tiles grow 56px so their copy keeps readable fixed sizes. */
.make { padding: 64px 0 80px; text-align: center; }
@media (min-width: 1024px) { .make { padding: 140px 0 180px; } }
.make__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.03em;
  color: #161829;
}
/* the lime box behind the second line (Figma "Highlight box": 382 x 84 around 64px text) */
.make__hl, .faq__hl {
  display: inline-block;
  padding: 0.03em 0.3em;
  border-radius: 0.34em;
  background: var(--lime-grad);
}

.make__grid {
  --gap: 16px;
  --col: calc((100cqw - var(--gap)) / 2);
  --wide: 100cqw;
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
  width: min(1280px, 100% - 32px);
  margin: 40px auto 0;
  text-align: left;
}
.mk--wide { grid-column: span 2; }
@media (min-width: 1024px) {
  .make__grid {
    --gap: 24px;
    --col: calc((100cqw - 3 * var(--gap)) / 4);
    --wide: calc(2 * var(--col) + var(--gap));
    grid-template-columns: repeat(4, 1fr);
    margin-top: 80px;
  }
  .mk-product { grid-row: span 2; }
}
.mk {
  --tile-w: var(--col);
  --f: calc(var(--tile-w) / var(--tw));
  position: relative;
  aspect-ratio: var(--tw) / var(--th);
  min-width: 0;
  overflow: hidden;
  border-radius: calc(44 * var(--f));
  color: #161829;
}
.mk--wide { --tile-w: var(--wide); }
.mk-product { background: linear-gradient(150deg, #2bd3ae 0%, #0b8a6e 100%); }
.mk-memes { background: linear-gradient(150deg, #c9ecff 0%, #8ed0ff 100%); }
.mk-formats { background: linear-gradient(150deg, #fff3c4 0%, #ffe08a 100%); }
.mk-extend { background: linear-gradient(150deg, #ffd9e8 0%, #ffb3cf 100%); }
.mk-broll { background: linear-gradient(150deg, #c6f99a 0%, #9fe07a 100%); }
.mk-camera { background: #141826; }
.mk--dark { color: #fff; }
.mk > * { position: absolute; }
.mk__label {
  left: calc(40 * var(--f));
  top: calc(40 * var(--f));
  font-size: max(10px, calc(13 * var(--f)));
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.12em;
  color: rgba(22, 24, 41, 0.55);
}
.mk--dark .mk__label { color: rgba(255, 255, 255, 0.7); }
.mk__title {
  left: calc(40 * var(--f));
  top: calc(var(--tiy) * var(--f));
  width: calc(var(--tiw) * var(--f));
  font-size: calc(var(--tis) * var(--f));
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.mk-product .mk__title { --tiy: 76; --tiw: 420; --tis: 52; }
.mk-memes .mk__title, .mk-broll .mk__title, .mk-camera .mk__title { --tiy: 76; --tiw: 290; --tis: 40; }
.mk-formats .mk__title, .mk-extend .mk__title { --tiy: 70; --tiw: 222; --tis: 30; }
/* the still: a white-framed, slightly tilted photo */
.mk__img {
  left: calc(var(--ix) * var(--f));
  top: calc(var(--iy) * var(--f));
  width: calc(var(--iw) * var(--f));
  height: calc(var(--ih) * var(--f));
  translate: -50% -50%;
  rotate: calc(var(--ir) * 1deg);
  object-fit: cover;
  border: calc(6 * var(--f)) solid #fff;
  border-radius: calc(var(--irad) * var(--f));
  background: #fff;
  box-shadow: 0 calc(24 * var(--f)) calc(48 * var(--f)) calc(-10 * var(--f)) rgba(20, 24, 38, 0.25);
}
.mk-product .mk__img { --ix: 401; --iy: 505; --iw: 470; --ih: 330; --ir: 4; --irad: 34; }
.mk-memes .mk__img { --ix: 480.5; --iy: 141.5; --iw: 250; --ih: 220; --ir: -4; --irad: 26; }
.mk-extend .mk__img { --ix: 147; --iy: 255; --iw: 242; --ih: 150; --ir: 3; --irad: 22; }
.mk-broll .mk__img { --ix: 466.5; --iy: 156.5; --iw: 250; --ih: 220; --ir: 3; --irad: 26; }
.mk-camera .mk__img { --ix: 478.5; --iy: 136.5; --iw: 250; --ih: 170; --ir: -4; --irad: 26; border: 0; }
.mk__pill {
  left: calc(40 * var(--f));
  top: calc(228 * var(--f));
  padding: max(6px, calc(8 * var(--f))) max(11px, calc(14 * var(--f)));
  border-radius: 99px;
  background: #fff;
  box-shadow: 0 calc(8 * var(--f)) calc(18 * var(--f)) calc(-4 * var(--f)) rgba(20, 24, 38, 0.18);
  font-size: max(11px, calc(13 * var(--f)));
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  color: #161829;
}
.mk-product .mk__pill { top: calc(552 * var(--f)); }
.mk__pill--lime { background: var(--lime-grad); }
/* the three tilted format pills, placed by their centre */
.mk__pill--tilt {
  left: calc(var(--px) * var(--f));
  top: calc(var(--py) * var(--f));
  translate: -50% -50%;
  rotate: calc(var(--pr) * 1deg);
}
@media (max-width: 639px) {
  .mk--wide { aspect-ratio: auto; height: calc(var(--th) * var(--f) + 56px); }
  .mk--wide .mk__img, .mk--wide .mk__pill { margin-top: 56px; }
  .mk--wide .mk__title { font-size: max(24px, calc(var(--tis) * var(--f))); }
}


/* ============ 04 LOW ONE-TIME PAYMENT (Figma "04 Low one-time payment" 1920 x 1048) ============ */
.lowpay { position: relative; padding: 24px 0 64px; }
@media (min-width: 1024px) { .lowpay { padding: 80px 0 76px; } }
.lowpay .big-head__grad { background-image: var(--lowpay-grad); }
.lowpay__body {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 1392px;
  margin: 40px auto 0;
  padding: 0 16px;
}
.lowpay__text { display: flex; flex-direction: column; gap: 20px; max-width: 640px; font-size: 18px; line-height: 1.55; color: var(--body); }
.lowpay__text b { font-weight: 700; color: var(--ink-2); }
.lowpay__text .lead { color: var(--lead-rest); }
.lowpay__text .lead b { font-weight: 600; color: var(--lead-strong); }
@media (min-width: 1024px) {
  .lowpay__body { flex-direction: row; justify-content: space-between; gap: 0; margin-top: 80px; }
  .lowpay__text { flex: 0 0 640px; gap: 28px; font-size: 22px; }
}

/* Art group (box, app card, tag): drawn in Figma px of its 726 x 590 box (x 914, y 269) */
.lowpay__art {
  --a: calc(100cqw / 726);
  position: relative;
  flex: none;
  width: min(726px, 100%);
  aspect-ratio: 726 / 590;
  align-self: center;
  container-type: inline-size;
}
@media (min-width: 1024px) { .lowpay__art { width: min(726px, 100% - 660px); align-self: flex-start; margin-top: -39px; } }
.lowpay__art > * { position: absolute; }
.lowpay__art .glow { --u: var(--a); }
.app-card {
  left: calc(166 * var(--a));
  top: calc(129 * var(--a));
  width: calc(560 * var(--a));
  height: calc(380 * var(--a));
  overflow: hidden;
  border-radius: calc(28 * var(--a));
  background: #fff;
  box-shadow: var(--app-shadow);
}
.app-card__still {
  position: absolute;
  left: calc(10 * var(--a));
  top: calc(10 * var(--a));
  width: calc(540 * var(--a));
  height: calc(300 * var(--a));
  border-radius: calc(20 * var(--a));
  object-fit: cover;
}
.app-card__timeline {
  position: absolute;
  left: calc(10 * var(--a));
  top: calc(326 * var(--a));
  display: flex;
  gap: calc(7 * var(--a));
}
.app-card__timeline i {
  width: calc(70 * var(--a));
  height: calc(34 * var(--a));
  border-radius: calc(8 * var(--a));
  background: var(--timeline-a);
}
.app-card__timeline i:nth-child(even) { background: var(--timeline-b); }
.app-card__play {
  position: absolute;
  left: calc(248 * var(--a));
  top: calc(128 * var(--a));
  display: grid;
  place-items: center;
  width: calc(64 * var(--a));
  height: calc(64 * var(--a));
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
}
.app-card__play img { width: calc(24 * var(--a)); height: calc(26 * var(--a)); translate: calc(2 * var(--a)) 0; }
.lowpay__box {
  left: calc(var(--lp-box-x) * var(--a));
  top: calc(var(--lp-box-y) * var(--a));
  width: calc(372 * var(--a));
  height: auto;
}
.price-tag {
  left: calc(256 * var(--a));
  top: 0;
  display: grid;
  place-items: center;
  width: calc(336.8 * var(--a));
  height: calc(143.1 * var(--a));
}
.price-tag__inner {
  display: flex;
  flex-direction: column;
  padding: calc(14 * var(--a)) calc(26 * var(--a)) calc(18 * var(--a));
  border-radius: calc(24 * var(--a));
  background: var(--tag-bg);
  filter: drop-shadow(0 calc(16 * var(--a)) calc(15 * var(--a)) var(--tag-shadow));
  rotate: -5deg;
  line-height: 1.25;
  white-space: nowrap;
  color: #fff;
}
.price-tag__inner span:first-child { font-size: calc(22 * var(--a)); font-weight: 600; }
.price-tag__inner span:last-child { font-size: calc(44 * var(--a)); font-weight: 700; letter-spacing: -0.02em; color: var(--tag-big); }


/* ============ 05 GUARANTEE (Figma "05 Guarantee": card 1808 x 838) ============ */
.gtee { padding: 24px 0 48px; }
@media (min-width: 1024px) { .gtee { padding: 40px 0 176px; } }
.gtee__card {
  position: relative;
  margin: 0 12px;
  overflow: hidden;
  border-radius: 28px;
  background: var(--gtee-bg);
  padding: 48px 20px 56px;
  color: #fff;
}
@media (min-width: 1024px) {
  /* Contained: 1440 max (the page's content width), centred, 56px from the edges below that */
  .gtee__card { width: calc(100% - 112px); max-width: 1440px; margin: 0 auto; border-radius: 48px; padding: 90px 80px 47px; }
}
.gtee__card > :not(.blobs) { position: relative; z-index: 1; }
.gtee__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-align: center;
}
/* the white box behind "Money-Back Guarantee!" (the elite/pro hero's shared .hl rule isn't on this page) */
.gtee__head .hl { display: inline-block; background: var(--hl-bg); }
.gtee__head .hl {
  --hl-bg: #fff;
  --hl-shadow: none;
  padding: 0.125em 0.406em 0.1875em;  /* 8 / 26 / 12 at 64px */
  border-radius: 0.375em;
  color: var(--gtee-hl-ink);
}
.gtee__body { display: flex; flex-direction: column; align-items: center; gap: 32px; margin-top: 40px; }
.gtee__art { position: relative; flex: none; width: min(100%, 420px); aspect-ratio: 564 / 520; }
.gtee__box { position: absolute; left: 39%; top: 0; width: 61%; height: auto; }
.gtee__shield { position: absolute; left: 0; top: 42.3%; width: 53.2%; height: auto; filter: var(--shield-shadow); }
.gtee__text { display: flex; flex-direction: column; gap: 22px; max-width: 760px; font-size: 18px; line-height: 1.55; color: rgba(255, 255, 255, 0.86); }
.gtee__text p:first-child { font-weight: 600; color: #fff; }
.gtee__text b { font-weight: 700; color: var(--gtee-strong); }
.gtee__sign { display: flex; gap: 14px; margin-top: 10px; font-size: 18px; font-weight: 500; line-height: 1.25; color: rgba(255, 255, 255, 0.6); }
.gtee__sign b { color: #fff; }
@media (min-width: 1024px) {
  .gtee__body { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 0; margin-top: var(--gtee-body-mt); }
  .gtee__art { width: min(564px, 42%); }
  .gtee__text { flex: 0 1 680px; gap: 26px; margin-top: var(--gtee-text-mt); font-size: 22px; }
}



/* ============ 06 PRICING (Figma "06 Pricing": card 720 wide) ============ */
.pricing { padding: 48px 0 64px; }
@media (min-width: 1024px) { .pricing { padding: 40px 0 100px; } }
.price-card {
  position: relative;
  width: min(720px, 100% - 24px);
  margin: 40px auto 0;
  overflow: hidden;
  border: 1px solid rgba(22, 24, 29, 0.08);
  border-radius: 32px;
  background: #fff;
  box-shadow: var(--price-shadow);
}
@media (min-width: 1024px) { .price-card { margin-top: 70px; border-radius: 44px; } }
.price-card__head {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 20px;
  min-height: 190px;
  overflow: hidden;
  padding: 24px 20px 0;
  background: var(--price-head);
  color: #fff;
}
.price-card__head .glow { --u: 1px; }
.price-card__mini { position: relative; flex: none; width: 100px; height: auto; align-self: flex-end; margin-bottom: 12px; }
.price-card__info { position: relative; padding-bottom: 18px; }
.price-chip {
  display: inline-block;
  white-space: nowrap;
  padding: 6px 14px;
  border-radius: 99px;
  background: var(--price-chip);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ink-2);
}
.price-card__name { margin-top: 10px; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.price-card__price { display: flex; align-items: center; gap: 12px; }
.price-card__price strong { font-size: 64px; font-weight: 700; line-height: 1.3; letter-spacing: -0.04em; }
.price-card__was { display: flex; flex-direction: column; gap: 4px; font-weight: 500; font-size: 15px; color: rgba(255, 255, 255, 0.9); }
.price-card__was s { font-size: 18px; font-weight: 600; color: rgba(255, 255, 255, 0.6); }
@media (min-width: 640px) {
  .price-card__head { display: block; height: 250px; padding: 0; }
  .price-card__mini { position: absolute; left: 40px; top: 31px; width: 143px; margin: 0; }
  .price-card__info { position: absolute; left: 272px; top: 44px; padding: 0; }
  .price-card__name { margin-top: 6px; font-size: 32px; line-height: 1.25; }
  .price-card__price { gap: 16px; margin-top: -4px; }
  .price-card__price strong { font-size: 92px; line-height: 1.32; }
  .price-card__was { font-size: 18px; }
  .price-card__was s { font-size: 22px; }
}

.price-list { display: flex; flex-direction: column; gap: 16px; padding: 32px 22px 0; font-size: 16px; line-height: 1.25; color: var(--body); }
.price-list li { display: flex; align-items: flex-start; gap: 12px; }
.price-list li::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  background: url("../images/icons/price-check.svg") center / contain no-repeat;
}
.price-list b { font-weight: 700; color: var(--ink-2); }
@media (min-width: 768px) { .price-list li { white-space: nowrap; } }
@media (min-width: 640px) {
  .price-list { gap: 19px; padding: 46px 40px 0 63px; font-size: 20px; }
  .price-list li { gap: 14px; }
  .price-list li::before { width: 26px; height: 26px; }
}
.price-card__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin: 28px 22px 0;
  padding: 28px 0 40px;
  border-top: 1px solid rgba(22, 24, 29, 0.08);
}
@media (min-width: 640px) {
  .price-card__foot { gap: 26px; margin: 33px 63px 0; padding: 32px 0 50px; }
  .price-card__foot .payments { margin-top: 0; }
}
.mini-timer { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 700; color: var(--ink-2); }
.mini-timer > span:first-child { font-size: 16px; font-weight: 600; color: #a86a00; }
.mini-timer b { padding: 6px 10px; border-radius: 10px; background: rgba(22, 24, 29, 0.05); font-variant-numeric: tabular-nums; }
.mini-timer i { font-style: normal; color: rgba(22, 24, 29, 0.3); }
.price-card__note { margin-top: -4px; font-size: 15px; font-weight: 500; color: var(--body); text-align: center; word-spacing: 0.1em; }
.price-card__note span { margin: 0 0.4em; }



/* ============ 07 FAQ (Figma "07 FAQ" 1920 x 745; the page ends 200 below it) ============
   The decline link (60 under the price card), the headline, then six questions in two
   610-wide columns (x 320 / 990), every answer visible. Each item: a 2px rule on top, the
   number on the left, the question, the answer. Phones: one column. */
.faq { padding: 0 16px 120px; text-align: center; }
@media (min-width: 1024px) { .faq { padding-bottom: 200px; } }
/* JVZoo "no thanks" link */
.decline {
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.25;
  color: #8a8f9c;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.decline:hover { color: var(--muted); }
@media (min-width: 1024px) { .decline { font-size: 17px; } }
.faq__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 72px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.03em;
  color: #161829;
}
@media (min-width: 1024px) { .faq__head { margin-top: 120px; } }
.faq__cols {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 60px;
  width: min(1280px, 100%);
  margin: 48px auto 0;
  text-align: left;
}
.faq__col { display: contents; }
.faq__col:first-child .faq__item:nth-child(1) { order: 1; }
.faq__col:first-child .faq__item:nth-child(2) { order: 3; }
.faq__col:first-child .faq__item:nth-child(3) { order: 5; }
.faq__col:last-child .faq__item:nth-child(1) { order: 2; }
.faq__col:last-child .faq__item:nth-child(2) { order: 4; }
.faq__col:last-child .faq__item:nth-child(3) { order: 6; }
@media (min-width: 1024px) {
  .faq__cols { grid-template-columns: 1fr 1fr; margin-top: 70px; }
  .faq__col { display: block; }
}
.faq__item {
  display: grid;
  grid-template-columns: 40px 1fr;
  padding: 22px 0 28px;
  border-top: 2px solid rgba(22, 24, 41, 0.1);
}
.faq__num { padding-top: 5px; font-size: 13px; font-weight: 700; line-height: 1.25; letter-spacing: 0.1em; color: #0b8a6e; }
.faq__q { font-size: 19px; font-weight: 700; line-height: 1.3; color: #161829; }
.faq__a { grid-column: 2; margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--muted); }
@media (min-width: 1024px) {
  .faq__item { grid-template-columns: 50px 1fr; padding: 26px 0 34px; }
  .faq__num { padding-top: 4px; font-size: 14px; }
  .faq__q { font-size: 23px; line-height: 30px; }
  .faq__a { margin-top: 10px; font-size: 18px; line-height: 27px; }
}


/* ============ PARTS (Introducing, bento tiles, showcase — merged from parts) ============ */
/* ---- part: intro ---- */
/* ============ INTRODUCING STUDIO (Figma "02 Introducing Studio", 1920 x 1580) ============
   Desktop (1024+): everything sits on the 1920 x 1580 Figma frame; --u is one Figma px
   (1px at 1920 and up, smaller below). Phones: heading, clip-fan picture, prompt bar, chips stack. */
.intro {
  position: relative;
  container-type: inline-size;
  overflow: hidden;
  background: linear-gradient(180deg, #fbfaf7 0%, #e9f1ff 18%, #ffe7d2 55%, #fff3e6 85%, #fbfaf7 100%);
  color: #141826;
}
.intro-in {
  --u: min(1px, 100cqw / 1920);
  position: relative;
  width: calc(1920 * var(--u));
  height: calc(1580 * var(--u));
  margin: 0 auto;
}

/* ---- art layer: glow, rays, clip fan, product box ---- */
.intro-art { position: absolute; inset: 0; pointer-events: none; }
.intro-art__in { position: absolute; left: 0; top: 0; width: calc(1920 * var(--u)); height: calc(1500 * var(--u)); }
.intro-glow {
  position: absolute;
  left: calc(310 * var(--u));
  top: calc(680 * var(--u));
  width: calc(1300 * var(--u));
  height: calc(900 * var(--u));
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 210, 138, 0.85) 0%, rgba(255, 201, 168, 0.35) 50%, rgba(255, 231, 210, 0) 100%);
}
/* Rays meet at (960, 1250); the box is 3200 Figma px square around that point and the
   bottom half is masked off, so they only fan out upwards as in Figma */
.intro-rays {
  position: absolute;
  left: calc(-640 * var(--u));
  top: calc(-350 * var(--u));
  width: calc(3200 * var(--u));
  height: calc(3200 * var(--u));
  -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent 50%);
          mask-image: linear-gradient(180deg, #000 50%, transparent 50%);
}
.intro-rays__spin {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 2;
  animation: intro-spin 240s linear infinite paused;
}
@keyframes intro-spin { to { rotate: 360deg; } }

/* One clip: --cx/--cy is its centre on the frame, --w/--h its size, --r its tilt (Figma) */
.intro-card {
  position: absolute;
  left: calc((var(--cx) - var(--w) / 2) * var(--u));
  top: calc((var(--cy) - var(--h) / 2) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  rotate: calc(var(--r) * 1deg);
}
.intro-card__in {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: calc(6 * var(--u)) solid #fff;
  border-radius: calc(20 * var(--u));
  background: #fff;
  box-shadow: 0 calc(20 * var(--u)) calc(40 * var(--u)) calc(-8 * var(--u)) rgba(27, 36, 64, 0.22);
  animation: intro-bob 5s ease-in-out infinite paused;
  animation-delay: calc(var(--d) * -0.7s);
}
.intro-card__in img { display: block; width: 100%; height: 100%; object-fit: cover; }
.intro-tag {
  position: absolute;
  left: calc(6 * var(--u));
  top: calc(6 * var(--u));
  padding: calc(3 * var(--u)) calc(8 * var(--u));
  border-radius: calc(8 * var(--u));
  background: rgba(20, 24, 38, 0.7);
  font-size: max(7px, calc(11 * var(--u)));
  font-weight: 700;
  line-height: normal;
  color: #fff;
}
@keyframes intro-bob {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 calc(-8 * var(--u)); }
}
.intro-box {
  position: absolute;
  left: calc(1153 * var(--u));
  top: calc(849 * var(--u));
  width: calc(568 * var(--u));
  height: calc(564 * var(--u));
  object-fit: cover;
}

/* moving only while the section is on screen (.is-on, js), never with reduced motion */
.intro.is-on .intro-rays__spin,
.intro.is-on .intro-card__in { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) {
  .intro-rays__spin, .intro-card__in, .intro-bar__caret { animation: none; }
}

/* ---- heading ---- */
.intro-head { position: absolute; inset: 0 0 auto; text-align: center; }
.intro-label {
  position: absolute;
  left: 0; right: 0;
  top: calc(110 * var(--u));
  font-size: max(11px, calc(16 * var(--u)));
  font-weight: 600;
  line-height: calc(20 * var(--u));
  letter-spacing: 0.55em;
  margin-right: -0.55em; /* the last letter's spacing, so the word stays centred */
  color: rgba(20, 24, 38, 0.75);
}
.intro-mark {
  position: absolute;
  left: 0; right: 0;
  top: calc(160 * var(--u));
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(14 * var(--u));
  height: calc(80 * var(--u));
  font-size: calc(64 * var(--u));
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.03em;
}
.intro-badge {
  rotate: 4deg;
  padding: calc(6 * var(--u)) calc(18 * var(--u)) calc(8 * var(--u));
  border-radius: calc(18 * var(--u));
  background: linear-gradient(90deg, #2563eb, #f97362);
  font-size: calc(40 * var(--u));
  letter-spacing: 0.04em;
  color: #fff;
}
.intro-title { font-weight: 700; line-height: normal; }
.intro-title > span { position: absolute; left: 0; right: 0; display: block; white-space: nowrap; }
.intro-title__a {
  top: calc(300 * var(--u));
  font-size: calc(124 * var(--u));
  letter-spacing: -0.045em;
}
.intro-title__b {
  top: calc(429 * var(--u));
  font-family: var(--font-script);
  font-size: calc(132 * var(--u));
  font-weight: 400;
}
.intro-title__b {
  /* the gradient runs over the words only, as in Figma */
  width: max-content;
  margin: 0 auto;
  background: linear-gradient(90deg, #2563eb 0%, #7c5ce0 55%, #f2735c 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* ---- prompt bar + clip types ---- */
.intro-bar {
  position: absolute;
  left: calc(550 * var(--u));
  top: calc(1080 * var(--u));
  width: calc(820 * var(--u));
  height: calc(112 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(20 * var(--u));
  padding: 0 calc(24 * var(--u));
  border-radius: calc(34 * var(--u));
  background: #fff;
  box-shadow: 0 0 calc(60 * var(--u)) rgba(255, 179, 107, 0.5), 0 calc(30 * var(--u)) calc(60 * var(--u)) rgba(27, 36, 64, 0.25);
  z-index: 1;
}
.intro-bar__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(64 * var(--u));
  height: calc(64 * var(--u));
  border-radius: calc(20 * var(--u));
  background: linear-gradient(135deg, #2563eb 0%, #f97362 71.429%);
}
.intro-bar__icon img { width: calc(30 * var(--u)); height: calc(30 * var(--u)); }
.intro-bar__text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: calc(26 * var(--u));
  font-weight: 500;
  line-height: normal;
  white-space: nowrap;
}
.intro-bar__caret { color: #2563eb; animation: intro-caret 1.06s steps(1) infinite; }
@keyframes intro-caret { 50% { opacity: 0; } }
.intro-bar__btn {
  flex: none;
  padding: calc(16 * var(--u)) calc(22 * var(--u));
  border-radius: calc(20 * var(--u));
  background: #141826;
  font-size: calc(17 * var(--u));
  font-weight: 700;
  line-height: normal;
  color: #fff;
}
.intro-chips {
  position: absolute;
  left: 0; right: 0;
  top: calc(1218 * var(--u));
  display: flex;
  justify-content: center;
  gap: calc(10 * var(--u));
  z-index: 1;
}
.intro-chips li {
  padding: calc(9 * var(--u)) calc(16 * var(--u));
  border: 1px solid #fff;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  box-shadow: 0 calc(6 * var(--u)) calc(7 * var(--u)) rgba(27, 36, 64, 0.08);
  font-size: max(11px, calc(15 * var(--u)));
  font-weight: 600;
  line-height: normal;
  white-space: nowrap;
}
.intro-fade {
  position: absolute;
  left: 50%;
  top: calc(1260 * var(--u));
  width: 100cqw;
  height: calc(240 * var(--u));
  translate: -50% 0;
  background: linear-gradient(180deg, rgba(251, 250, 247, 0), #fbfaf7);
  pointer-events: none;
}

/* ---- phones and tablets: stack ---- */
@media (max-width: 1023px) {
  .intro-in { width: auto; height: auto; padding: 56px 16px 64px; display: flex; flex-direction: column; align-items: center; }
  .intro-head { position: static; order: 1; }
  .intro-label, .intro-mark, .intro-title > span { position: static; }
  .intro-label { font-size: 12px; line-height: 1.4; }
  .intro-mark { height: auto; margin-top: 16px; gap: 10px; font-size: 30px; }
  .intro-badge { padding: 3px 10px 5px; border-radius: 10px; font-size: 19px; }
  .intro-title { margin-top: 24px; }
  .intro-title__a { font-size: clamp(34px, 9.4cqw, 84px); }
  .intro-title__b { width: auto; max-width: 100%; margin-top: -0.1em; font-size: clamp(40px, 10.5cqw, 90px); white-space: normal; line-height: 1.05; }
  /* the fan: the middle 1300px of the frame, cropped to the clips (frame y 640 to 1420) */
  .intro-art { position: relative; order: 2; width: 100cqw; height: calc(780 * 100cqw / 1300); margin-top: 8px; overflow: hidden; }
  .intro-art__in { --u: calc(100cqw / 1300); left: calc(50% - 960 * var(--u)); top: calc(-640 * var(--u)); }
  .intro-prompt { order: 3; width: 100%; max-width: 640px; margin-top: -8px; }
  .intro-bar { position: relative; left: auto; top: auto; width: 100%; height: auto; flex-wrap: wrap; gap: 12px; padding: 14px; border-radius: 24px; }
  .intro-bar__icon { width: 44px; height: 44px; border-radius: 14px; }
  .intro-bar__icon img { width: 20px; height: 20px; }
  .intro-bar__text { flex: 1 1 0; font-size: 17px; white-space: normal; }
  .intro-bar__btn { width: 100%; padding: 13px 18px; border-radius: 14px; font-size: 15px; text-align: center; }
  .intro-chips { position: static; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
  .intro-chips li { padding: 7px 13px; font-size: 13px; box-shadow: 0 6px 7px rgba(27, 36, 64, 0.08); }
  .intro-fade { display: none; }
}

/* ---- part: tile-01 ---- */
/* Bento tile 01: Animate any photo (Figma 715:134, 900 x 600)
   Drawn in the tile's Figma pixels: calc(N * var(--f)), one Figma px of this tile (--f comes from .bt).
   The card itself is .bt01-tile (inset 0), so .bt-01 keeps only what the shell gives it. */
.bt-01 .bt01-tile {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  border: calc(1.5 * var(--f)) solid rgba(255, 255, 255, 0.7);
  border-radius: calc(44 * var(--f));
  background: linear-gradient(146.31deg, #e3fff4 0%, #a8f0d6 35.714%, #5fd3b0 71.429%);
  box-shadow: 0 calc(24 * var(--f)) calc(50 * var(--f)) calc(-18 * var(--f)) rgba(14, 42, 34, 0.08);
  color: #121614;
  -webkit-user-select: none;
          user-select: none;
}
.bt-01 .bt01-tile img { display: block; -webkit-user-drag: none; }
/* Soft glows (Figma blurred ellipses, blur 50) */
.bt-01 .bt01-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(calc(50 * var(--f)));
  pointer-events: none;
  z-index: -1;
}
.bt-01 .bt01-blob--a { left: calc(403.5 * var(--f)); top: calc(338.5 * var(--f)); width: calc(630 * var(--f)); height: calc(320 * var(--f)); background: rgba(43, 199, 155, 0.55); }
.bt-01 .bt01-blob--b { left: calc(-81.5 * var(--f)); top: calc(398.5 * var(--f)); width: calc(320 * var(--f)); height: calc(240 * var(--f)); background: rgba(198, 249, 154, 0.6); }

.bt-01 .bt01-title {
  position: absolute;
  left: calc(34.5 * var(--f));
  top: calc(32.5 * var(--f));
  margin: 0;
  font-size: calc(28 * var(--f));
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: #121614;
}
.bt-01 .bt01-text {
  position: absolute;
  left: calc(34.5 * var(--f));
  top: calc(75.5 * var(--f));
  width: calc(560 * var(--f));
  margin: 0;
  font-size: calc(16 * var(--f));
  font-weight: 400;
  line-height: 1.45;
  color: #4a544f;
}
/* Pills (dark glass, light, lime) */
.bt-01 .bt01-pill {
  position: absolute;
  display: flex;
  align-items: center;
  padding: calc(6 * var(--f)) calc(12 * var(--f));
  border-radius: calc(99 * var(--f));
  background: rgba(18, 22, 20, 0.7);
  font-size: calc(12 * var(--f));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
  color: #fff;
}

/* Still photo card, tilted 6deg (box centre at 200.44, 378.28) */
.bt-01 .bt01-still {
  position: absolute;
  left: calc(50.44 * var(--f));
  top: calc(213.28 * var(--f));
  width: calc(300 * var(--f));
  height: calc(330 * var(--f));
  border-radius: calc(18 * var(--f));
  background: #fff;
  box-shadow: 0 calc(2 * var(--f)) calc(6 * var(--f)) rgba(14, 42, 34, 0.05), 0 calc(20 * var(--f)) calc(40 * var(--f)) calc(-10 * var(--f)) rgba(14, 42, 34, 0.16);
  overflow: hidden;
  rotate: 6deg;
}
.bt-01 .bt01-still img {
  position: absolute;
  left: calc(14 * var(--f));
  top: calc(14 * var(--f));
  width: calc(272 * var(--f));
  height: calc(262 * var(--f));
  border-radius: calc(12 * var(--f));
  object-fit: cover;
}
.bt-01 .bt01-still span {
  position: absolute;
  left: calc(16 * var(--f));
  top: calc(290 * var(--f));
  font-size: calc(13 * var(--f));
  font-weight: 600;
  line-height: normal;
  color: #6b746f;
}
.bt-01 .bt01-pill--still { left: calc(133.35 * var(--f)); top: calc(230.58 * var(--f)); translate: -50% -50%; rotate: 6deg; }
.bt-01 .bt01-arc { position: absolute; left: calc(358.5 * var(--f)); top: calc(208.5 * var(--f)); width: calc(150 * var(--f)); height: calc(80 * var(--f)); }
.bt-01 .bt01-pill--go { left: calc(370.5 * var(--f)); top: calc(178.5 * var(--f)); background: #121614; font-size: calc(14 * var(--f)); color: #d9f99d; }

/* Animated clip */
.bt-01 .bt01-clip {
  position: absolute;
  left: calc(448.5 * var(--f));
  top: calc(218.5 * var(--f));
  width: calc(400 * var(--f));
  height: calc(320 * var(--f));
  border-radius: calc(22 * var(--f));
  background: #0d1512;
  box-shadow: 0 calc(2 * var(--f)) calc(6 * var(--f)) rgba(14, 42, 34, 0.05), 0 calc(20 * var(--f)) calc(40 * var(--f)) calc(-10 * var(--f)) rgba(14, 42, 34, 0.16);
  overflow: hidden;
}
.bt-01 .bt01-frame { position: absolute; top: calc(10 * var(--f)); width: calc(380 * var(--f)); height: calc(300 * var(--f)); border-radius: calc(16 * var(--f)); object-fit: cover; }
.bt-01 .bt01-frame--g1 { left: calc(-32 * var(--f)); opacity: 0.12; }
.bt-01 .bt01-frame--g2 { left: calc(-18 * var(--f)); opacity: 0.12; }
.bt-01 .bt01-frame--g3 { left: calc(-4 * var(--f)); opacity: 0.12; }
.bt-01 .bt01-frame--main { left: calc(10 * var(--f)); }
.bt-01 .bt01-spark { position: absolute; }
.bt-01 .bt01-spark--1 { left: calc(60 * var(--f)); top: calc(60 * var(--f)); width: calc(18 * var(--f)); height: calc(18 * var(--f)); }
.bt-01 .bt01-spark--2 { left: calc(300 * var(--f)); top: calc(90 * var(--f)); width: calc(16 * var(--f)); height: calc(16 * var(--f)); }
.bt-01 .bt01-spark--3 { left: calc(250 * var(--f)); top: calc(40 * var(--f)); width: calc(14 * var(--f)); height: calc(14 * var(--f)); }
.bt-01 .bt01-spark--4 { left: calc(90 * var(--f)); top: calc(230 * var(--f)); width: calc(12 * var(--f)); height: calc(12 * var(--f)); }
.bt-01 .bt01-spark--5 { left: calc(330 * var(--f)); top: calc(240 * var(--f)); width: calc(10 * var(--f)); height: calc(10 * var(--f)); }
.bt-01 .bt01-play {
  position: absolute;
  left: calc(176 * var(--f));
  top: calc(126 * var(--f));
  width: calc(52 * var(--f));
  height: calc(52 * var(--f));
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  filter: drop-shadow(0 calc(6 * var(--f)) calc(8 * var(--f)) rgba(0, 0, 0, 0.25));
}
.bt-01 .bt01-play img { position: absolute; left: calc(19.76 * var(--f)); top: calc(16.12 * var(--f)); width: calc(17.68 * var(--f)); height: calc(19.76 * var(--f)); }
.bt-01 .bt01-pill--video { left: calc(24 * var(--f)); top: calc(24 * var(--f)); }
.bt-01 .bt01-track,
.bt-01 .bt01-bar { position: absolute; left: calc(24 * var(--f)); top: calc(292 * var(--f)); height: calc(5 * var(--f)); border-radius: calc(3 * var(--f)); }
.bt-01 .bt01-track { width: calc(352 * var(--f)); background: rgba(255, 255, 255, 0.3); }
.bt-01 .bt01-bar { width: calc(210 * var(--f)); background: #d9f99d; }

/* Motion (while on screen): the clip plays (bar runs on, wraps), the onion-skin frames
   shimmer, sparkles twinkle, the Animate pill breathes. At rest: the Figma frame. */
@media (prefers-reduced-motion: no-preference) {
  .bt-01.is-live .bt01-bar { animation: bt01-play 6s linear infinite; }
  .bt-01.is-live .bt01-frame--g1,
  .bt-01.is-live .bt01-frame--g2,
  .bt-01.is-live .bt01-frame--g3 { animation: bt01-ghost 1.6s ease-in-out infinite; }
  .bt-01.is-live .bt01-frame--g2 { animation-delay: -0.53s; }
  .bt-01.is-live .bt01-frame--g3 { animation-delay: -1.07s; }
  .bt-01.is-live .bt01-frame--main { animation: bt01-drift 6s ease-in-out infinite; }
  .bt-01.is-live .bt01-spark { animation: bt01-twinkle 2.4s ease-in-out infinite; }
  .bt-01.is-live .bt01-spark--2 { animation-delay: -0.5s; }
  .bt-01.is-live .bt01-spark--3 { animation-delay: -1.1s; }
  .bt-01.is-live .bt01-spark--4 { animation-delay: -1.6s; }
  .bt-01.is-live .bt01-spark--5 { animation-delay: -2s; }
  .bt-01.is-live .bt01-pill--go { animation: bt01-breathe 2.4s ease-in-out infinite; }
}
@keyframes bt01-play {
  0%   { width: calc(210 * var(--f)); opacity: 1; }
  58%  { width: calc(352 * var(--f)); opacity: 1; }
  64%  { width: calc(352 * var(--f)); opacity: 0; }
  65%  { width: calc(0 * var(--f)); opacity: 0; }
  68%  { width: calc(0 * var(--f)); opacity: 1; }
  100% { width: calc(210 * var(--f)); opacity: 1; }
}
@keyframes bt01-ghost {
  0%, 100% { opacity: 0.12; }
  50%      { opacity: 0.24; }
}
@keyframes bt01-drift {
  0%, 100% { transform: none; }
  50%      { transform: scale(1.04) translateY(calc(-4 * var(--f))); }
}
@keyframes bt01-twinkle {
  0%, 100% { opacity: 1; transform: none; }
  50%      { opacity: 0.35; transform: scale(0.6) rotate(45deg); }
}
@keyframes bt01-breathe {
  0%, 100% { transform: none; }
  50%      { transform: scale(1.06); }
}

/* ---- part: tile-02 ---- */
/* Bento tile 02: Extend any video (Figma 715:171, 440 x 600)
   Drawn in the tile's Figma pixels: calc(N * var(--f)), one Figma px of this tile (--f comes from .bt).
   The card itself is .bt02-tile (inset 0), so .bt-02 keeps only what the shell gives it. */
.bt-02 .bt02-tile {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  border: calc(1.5 * var(--f)) solid rgba(255, 255, 255, 0.7);
  border-radius: calc(44 * var(--f));
  background: linear-gradient(126.25deg, #e6f3ff 0%, #a9d3ff 35.714%, #5aa6f5 71.429%);
  box-shadow: 0 calc(24 * var(--f)) calc(50 * var(--f)) calc(-18 * var(--f)) rgba(14, 42, 34, 0.08);
  color: #121614;
  -webkit-user-select: none;
          user-select: none;
}
.bt-02 .bt02-tile img { display: block; -webkit-user-drag: none; }
/* Soft glows (Figma blurred ellipses, blur 50) */
.bt-02 .bt02-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(calc(50 * var(--f)));
  pointer-events: none;
  z-index: -1;
}
.bt-02 .bt02-blob--a { left: calc(196.5 * var(--f)); top: calc(338.5 * var(--f)); width: calc(308 * var(--f)); height: calc(320 * var(--f)); background: rgba(59, 139, 235, 0.55); }
.bt-02 .bt02-blob--b { left: calc(-81.5 * var(--f)); top: calc(398.5 * var(--f)); width: calc(320 * var(--f)); height: calc(240 * var(--f)); background: rgba(184, 241, 255, 0.6); }

.bt-02 .bt02-title {
  position: absolute;
  left: calc(34.5 * var(--f));
  top: calc(32.5 * var(--f));
  margin: 0;
  font-size: calc(28 * var(--f));
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: #121614;
}
.bt-02 .bt02-text {
  position: absolute;
  left: calc(34.5 * var(--f));
  top: calc(75.5 * var(--f));
  width: calc(368 * var(--f));
  margin: 0;
  font-size: calc(16 * var(--f));
  font-weight: 400;
  line-height: 1.45;
  color: #4a544f;
}
/* Pills (dark glass, light, lime) */
.bt-02 .bt02-pill {
  position: absolute;
  display: flex;
  align-items: center;
  padding: calc(6 * var(--f)) calc(12 * var(--f));
  border-radius: calc(99 * var(--f));
  background: rgba(18, 22, 20, 0.7);
  font-size: calc(12 * var(--f));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
  color: #fff;
}

.bt-02 .bt02-upload,
.bt-02 .bt02-ext {
  position: absolute;
  top: calc(188.5 * var(--f));
  width: calc(176 * var(--f));
  height: calc(250 * var(--f));
  border-radius: calc(18 * var(--f));
  background: #0d1512;
  box-shadow: 0 calc(2 * var(--f)) calc(6 * var(--f)) rgba(14, 42, 34, 0.05), 0 calc(20 * var(--f)) calc(40 * var(--f)) calc(-10 * var(--f)) rgba(14, 42, 34, 0.16);
  overflow: hidden;
}
.bt-02 .bt02-upload { left: calc(34.5 * var(--f)); }
.bt-02 .bt02-upload img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bt-02 .bt02-ext { left: calc(226.5 * var(--f)); border: calc(4 * var(--f)) dashed #0e9f7e; }
.bt-02 .bt02-ext img { position: absolute; left: calc(-4 * var(--f)); top: calc(-4 * var(--f)); width: calc(176 * var(--f)); height: calc(250 * var(--f)); object-fit: cover; }
.bt-02 .bt02-upload .bt02-pill { left: calc(12 * var(--f)); top: calc(12 * var(--f)); font-size: calc(11 * var(--f)); }
.bt-02 .bt02-ext .bt02-pill { left: calc(8 * var(--f)); top: calc(8 * var(--f)); font-size: calc(11 * var(--f)); }
.bt-02 .bt02-pill--lime { background: #d9f99d; color: #121614; }
.bt-02 .bt02-seam {
  position: absolute;
  left: calc(200.5 * var(--f));
  top: calc(294.5 * var(--f));
  display: grid;
  place-items: center;
  width: calc(36 * var(--f));
  height: calc(36 * var(--f));
  border-radius: 50%;
  background: #fff;
  filter: drop-shadow(0 calc(4 * var(--f)) calc(5 * var(--f)) rgba(14, 42, 34, 0.2));
  font-size: calc(18 * var(--f));
  font-weight: 700;
  line-height: 1;
  color: #0e9f7e;
}
.bt-02 .bt02-length { position: absolute; left: calc(34.5 * var(--f)); top: calc(468.5 * var(--f)); width: calc(368 * var(--f)); height: calc(40 * var(--f)); }
.bt-02 .bt02-len { position: absolute; top: 0; height: calc(12 * var(--f)); border-radius: calc(6 * var(--f)); }
.bt-02 .bt02-len--up { left: 0; width: calc(140 * var(--f)); background: rgba(18, 22, 20, 0.18); }
.bt-02 .bt02-len--ext { left: calc(144 * var(--f)); width: calc(224 * var(--f)); background: linear-gradient(90deg, #0e9f7e, #7fd8b8); }
.bt-02 .bt02-len-label {
  position: absolute;
  left: 0;
  top: calc(20 * var(--f));
  font-size: calc(12 * var(--f));
  font-weight: 600;
  line-height: normal;
  white-space: nowrap;
  color: #121714;
}
.bt-02 .bt02-len-label--ext { left: auto; right: 0; }
.bt-02 .bt02-prompt {
  position: absolute;
  left: calc(34.5 * var(--f));
  top: calc(528.5 * var(--f));
  width: calc(368 * var(--f));
  height: calc(48 * var(--f));
  border-radius: calc(16 * var(--f));
  background: #fff;
  box-shadow: 0 calc(2 * var(--f)) calc(6 * var(--f)) rgba(14, 42, 34, 0.05), 0 calc(20 * var(--f)) calc(40 * var(--f)) calc(-10 * var(--f)) rgba(14, 42, 34, 0.16);
  overflow: hidden;
}
.bt-02 .bt02-prompt-text {
  position: absolute;
  left: calc(16 * var(--f));
  top: calc(15 * var(--f));
  font-size: calc(14 * var(--f));
  font-weight: 500;
  line-height: normal;
  white-space: nowrap;
}
.bt-02 .bt02-pill--go { left: calc(292 * var(--f)); top: calc(10 * var(--f)); background: #121614; }

/* Motion (while on screen): the green "continued" bar grows out of the upload again and
   again, the seam arrow nudges toward the extension, the Extend pill is pressed. */
@media (prefers-reduced-motion: no-preference) {
  .bt-02.is-live .bt02-len--ext { transform-origin: left center; animation: bt02-grow 5s cubic-bezier(0.3, 0.7, 0.3, 1) infinite; }
  .bt-02.is-live .bt02-seam { animation: bt02-nudge 1.6s ease-in-out infinite; }
  .bt-02.is-live .bt02-pill--go { animation: bt02-press 5s ease-in-out infinite; }
}
@keyframes bt02-grow {
  0%, 62%  { transform: none; opacity: 1; }
  68%      { transform: none; opacity: 0; }
  70%      { transform: scaleX(0); opacity: 1; }
  100%     { transform: none; opacity: 1; }
}
@keyframes bt02-nudge {
  0%, 100% { translate: 0 0; }
  50%      { translate: calc(4 * var(--f)) 0; }
}
@keyframes bt02-press {
  0%, 64%, 74%, 100% { transform: none; }
  68%                { transform: scale(0.9); }
}

/* ---- part: tile-03 ---- */
/* Bento tile 03: Chain clips into scenes (Figma 715:195, 440 x 520)
   Drawn in the tile's Figma pixels: calc(N * var(--f)), one Figma px of this tile (--f comes from .bt).
   The card itself is .bt03-tile (inset 0), so .bt-03 keeps only what the shell gives it. */
.bt-03 .bt03-tile {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  border: calc(1.5 * var(--f)) solid rgba(255, 255, 255, 0.7);
  border-radius: calc(44 * var(--f));
  background: linear-gradient(130.24deg, #e6fffb 0%, #a6f1e6 35.714%, #4ccfc2 71.429%);
  box-shadow: 0 calc(24 * var(--f)) calc(50 * var(--f)) calc(-18 * var(--f)) rgba(14, 42, 34, 0.08);
  color: #121614;
  -webkit-user-select: none;
          user-select: none;
}
.bt-03 .bt03-tile img { display: block; -webkit-user-drag: none; }
/* Soft glows (Figma blurred ellipses, blur 50) */
.bt-03 .bt03-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(calc(50 * var(--f)));
  pointer-events: none;
  z-index: -1;
}
.bt-03 .bt03-blob--a { left: calc(196.5 * var(--f)); top: calc(258.5 * var(--f)); width: calc(308 * var(--f)); height: calc(320 * var(--f)); background: rgba(19, 179, 166, 0.55); }
.bt-03 .bt03-blob--b { left: calc(-81.5 * var(--f)); top: calc(318.5 * var(--f)); width: calc(320 * var(--f)); height: calc(240 * var(--f)); background: rgba(217, 249, 157, 0.6); }

.bt-03 .bt03-title {
  position: absolute;
  left: calc(34.5 * var(--f));
  top: calc(32.5 * var(--f));
  margin: 0;
  font-size: calc(28 * var(--f));
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: #121614;
}
.bt-03 .bt03-text {
  position: absolute;
  left: calc(34.5 * var(--f));
  top: calc(75.5 * var(--f));
  width: calc(368 * var(--f));
  margin: 0;
  font-size: calc(16 * var(--f));
  font-weight: 400;
  line-height: 1.45;
  color: #4a544f;
}
/* Pills (dark glass, light, lime) */
.bt-03 .bt03-pill {
  position: absolute;
  display: flex;
  align-items: center;
  padding: calc(6 * var(--f)) calc(12 * var(--f));
  border-radius: calc(99 * var(--f));
  background: rgba(18, 22, 20, 0.7);
  font-size: calc(12 * var(--f));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
  color: #fff;
}

/* Three tilted shots (box centres from Figma's rotated bounds) */
.bt-03 .bt03-shot {
  position: absolute;
  width: calc(180 * var(--f));
  height: calc(124 * var(--f));
  border-radius: calc(16 * var(--f));
  background: #0d1512;
  box-shadow: 0 calc(2 * var(--f)) calc(6 * var(--f)) rgba(14, 42, 34, 0.05), 0 calc(20 * var(--f)) calc(40 * var(--f)) calc(-10 * var(--f)) rgba(14, 42, 34, 0.16);
  overflow: hidden;
}
.bt-03 .bt03-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bt-03 .bt03-shot .bt03-pill { left: calc(10 * var(--f)); top: calc(10 * var(--f)); font-size: calc(11 * var(--f)); }
.bt-03 .bt03-shot--1 { left: calc(29.96 * var(--f)); top: calc(184.63 * var(--f)); rotate: 4deg; }
.bt-03 .bt03-shot--2 { left: calc(132.61 * var(--f)); top: calc(255.32 * var(--f)); rotate: -2deg; }
.bt-03 .bt03-shot--3 { left: calc(224.28 * var(--f)); top: calc(341.6 * var(--f)); rotate: 2deg; }
.bt-03 .bt03-link {
  position: absolute;
  width: calc(38 * var(--f));
  height: calc(38 * var(--f));
  border: calc(3 * var(--f)) solid #fff;
  border-radius: 50%;
  background: #d9f99d;
  filter: drop-shadow(0 calc(4 * var(--f)) calc(5 * var(--f)) rgba(14, 42, 34, 0.2));
}
.bt-03 .bt03-link img { position: absolute; left: calc(6 * var(--f)); top: calc(6 * var(--f)); width: calc(20 * var(--f)); height: calc(20 * var(--f)); }
.bt-03 .bt03-link--1 { left: calc(198.5 * var(--f)); top: calc(234.5 * var(--f)); }
.bt-03 .bt03-link--2 { left: calc(294.5 * var(--f)); top: calc(314.5 * var(--f)); }
.bt-03 .bt03-pill--note { left: calc(34.5 * var(--f)); top: calc(468.5 * var(--f)); background: #121614; }

/* Motion (while on screen): the chain runs shot to shot: each shot lifts in turn and the
   link after it pulses as the next shot picks up from its last frame. */
@media (prefers-reduced-motion: no-preference) {
  .bt-03.is-live .bt03-shot { animation: bt03-lift 4.5s ease-in-out infinite; }
  .bt-03.is-live .bt03-shot--2 { animation-delay: 1.5s; }
  .bt-03.is-live .bt03-shot--3 { animation-delay: 3s; }
  .bt-03.is-live .bt03-link { animation: bt03-pulse 4.5s ease-in-out infinite; animation-delay: 1.1s; }
  .bt-03.is-live .bt03-link--2 { animation-delay: 2.6s; }
}
@keyframes bt03-lift {
  0%, 30%, 100% { translate: 0 0; }
  12%           { translate: 0 calc(-8 * var(--f)); }
}
@keyframes bt03-pulse {
  0%, 22%, 100% { transform: none; }
  10%           { transform: scale(1.18) rotate(-12deg); }
}

/* ---- part: tile-04 ---- */
/* Bento tile 04: One photo → a video ad (Figma 715:222, 440 x 520)
   Drawn in the tile's Figma pixels: calc(N * var(--f)), one Figma px of this tile (--f comes from .bt).
   The card itself is .bt04-tile (inset 0), so .bt-04 keeps only what the shell gives it. */
.bt-04 .bt04-tile {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  border: calc(1.5 * var(--f)) solid rgba(255, 255, 255, 0.7);
  border-radius: calc(44 * var(--f));
  background: linear-gradient(130.24deg, #eaf7ff 0%, #b8e4ff 35.714%, #6cc3f2 71.429%);
  box-shadow: 0 calc(24 * var(--f)) calc(50 * var(--f)) calc(-18 * var(--f)) rgba(14, 42, 34, 0.08);
  color: #121614;
  -webkit-user-select: none;
          user-select: none;
}
.bt-04 .bt04-tile img { display: block; -webkit-user-drag: none; }
/* Soft glows (Figma blurred ellipses, blur 50) */
.bt-04 .bt04-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(calc(50 * var(--f)));
  pointer-events: none;
  z-index: -1;
}
.bt-04 .bt04-blob--a { left: calc(196.5 * var(--f)); top: calc(258.5 * var(--f)); width: calc(308 * var(--f)); height: calc(320 * var(--f)); background: rgba(46, 159, 224, 0.55); }
.bt-04 .bt04-blob--b { left: calc(-81.5 * var(--f)); top: calc(318.5 * var(--f)); width: calc(320 * var(--f)); height: calc(240 * var(--f)); background: rgba(198, 249, 154, 0.6); }

.bt-04 .bt04-title {
  position: absolute;
  left: calc(34.5 * var(--f));
  top: calc(32.5 * var(--f));
  margin: 0;
  font-size: calc(28 * var(--f));
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: #121614;
}
.bt-04 .bt04-text {
  position: absolute;
  left: calc(34.5 * var(--f));
  top: calc(75.5 * var(--f));
  width: calc(368 * var(--f));
  margin: 0;
  font-size: calc(16 * var(--f));
  font-weight: 400;
  line-height: 1.45;
  color: #4a544f;
}
/* Pills (dark glass, light, lime) */
.bt-04 .bt04-pill {
  position: absolute;
  display: flex;
  align-items: center;
  padding: calc(6 * var(--f)) calc(12 * var(--f));
  border-radius: calc(99 * var(--f));
  background: rgba(18, 22, 20, 0.7);
  font-size: calc(12 * var(--f));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
  color: #fff;
}

.bt-04 .bt04-ad {
  position: absolute;
  left: calc(128.5 * var(--f));
  top: calc(168.5 * var(--f));
  width: calc(290 * var(--f));
  height: calc(300 * var(--f));
  border-radius: calc(24 * var(--f));
  background: #0d1512;
  box-shadow: 0 calc(2 * var(--f)) calc(6 * var(--f)) rgba(14, 42, 34, 0.05), 0 calc(20 * var(--f)) calc(40 * var(--f)) calc(-10 * var(--f)) rgba(14, 42, 34, 0.16);
  overflow: hidden;
}
.bt-04 .bt04-ad-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bt-04 .bt04-ad-fade { position: absolute; left: 0; top: calc(160 * var(--f)); width: 100%; height: calc(140 * var(--f)); background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7)); }
.bt-04 .bt04-ad-line {
  position: absolute;
  left: calc(18 * var(--f));
  top: calc(224 * var(--f));
  margin: 0;
  font-size: calc(20 * var(--f));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
  color: #fff;
}
.bt-04 .bt04-pill--shop { left: calc(18 * var(--f)); top: calc(256 * var(--f)); background: #d9f99d; font-size: calc(13 * var(--f)); color: #121614; }
.bt-04 .bt04-pill--sponsored { left: calc(18 * var(--f)); top: calc(16 * var(--f)); background: rgba(255, 255, 255, 0.9); font-size: calc(10 * var(--f)); color: #121614; }
/* Source photo, tilted 8deg (box centre at 78.38, 209.65) */
.bt-04 .bt04-source {
  position: absolute;
  left: calc(30.38 * var(--f));
  top: calc(154.65 * var(--f));
  width: calc(96 * var(--f));
  height: calc(110 * var(--f));
  border-radius: calc(14 * var(--f));
  background: #fff;
  box-shadow: 0 calc(2 * var(--f)) calc(6 * var(--f)) rgba(14, 42, 34, 0.05), 0 calc(20 * var(--f)) calc(40 * var(--f)) calc(-10 * var(--f)) rgba(14, 42, 34, 0.16);
  overflow: hidden;
  rotate: 8deg;
}
.bt-04 .bt04-source img { position: absolute; left: calc(6 * var(--f)); top: calc(6 * var(--f)); width: calc(84 * var(--f)); height: calc(84 * var(--f)); border-radius: calc(10 * var(--f)); object-fit: cover; }
.bt-04 .bt04-source span {
  position: absolute;
  left: calc(10 * var(--f));
  top: calc(92 * var(--f));
  font-size: calc(11 * var(--f));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
}

/* Motion (while on screen): the ad plays: a slow push-in on the can, the Shop now pill
   pops, the source photo bobs. */
@media (prefers-reduced-motion: no-preference) {
  .bt-04.is-live .bt04-ad-img { animation: bt04-push 7s ease-in-out infinite; }
  .bt-04.is-live .bt04-pill--shop { animation: bt04-pop 3.5s ease-in-out infinite; }
  .bt-04.is-live .bt04-source { animation: bt04-bob 4s ease-in-out infinite; }
}
@keyframes bt04-push {
  0%, 100% { transform: none; }
  50%      { transform: scale(1.08) translate(calc(-4 * var(--f)), calc(4 * var(--f))); }
}
@keyframes bt04-pop {
  0%, 60%, 100% { transform: none; }
  70%           { transform: scale(1.1); }
  80%           { transform: scale(0.97); }
}
@keyframes bt04-bob {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 calc(-6 * var(--f)); }
}

/* ---- part: tile-05 ---- */
/* Bento tile 05: Drop your cast into any clip (Figma 715:238, 440 x 520)
   Drawn in the tile's Figma pixels: calc(N * var(--f)), one Figma px of this tile (--f comes from .bt).
   The card itself is .bt05-tile (inset 0), so .bt-05 keeps only what the shell gives it. */
.bt-05 .bt05-tile {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  border: calc(1.5 * var(--f)) solid rgba(255, 255, 255, 0.7);
  border-radius: calc(44 * var(--f));
  background: linear-gradient(130.24deg, #e8fbff 0%, #b2ecf7 35.714%, #6ad2ea 71.429%);
  box-shadow: 0 calc(24 * var(--f)) calc(50 * var(--f)) calc(-18 * var(--f)) rgba(14, 42, 34, 0.08);
  color: #121614;
  -webkit-user-select: none;
          user-select: none;
}
.bt-05 .bt05-tile img { display: block; -webkit-user-drag: none; }
/* Soft glows (Figma blurred ellipses, blur 50) */
.bt-05 .bt05-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(calc(50 * var(--f)));
  pointer-events: none;
  z-index: -1;
}
.bt-05 .bt05-blob--a { left: calc(196.5 * var(--f)); top: calc(258.5 * var(--f)); width: calc(308 * var(--f)); height: calc(320 * var(--f)); background: rgba(34, 181, 216, 0.55); }
.bt-05 .bt05-blob--b { left: calc(-81.5 * var(--f)); top: calc(318.5 * var(--f)); width: calc(320 * var(--f)); height: calc(240 * var(--f)); background: rgba(168, 240, 214, 0.6); }

.bt-05 .bt05-title {
  position: absolute;
  left: calc(34.5 * var(--f));
  top: calc(32.5 * var(--f));
  margin: 0;
  font-size: calc(28 * var(--f));
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: #121614;
}
.bt-05 .bt05-text {
  position: absolute;
  left: calc(34.5 * var(--f));
  top: calc(75.5 * var(--f));
  width: calc(368 * var(--f));
  margin: 0;
  font-size: calc(16 * var(--f));
  font-weight: 400;
  line-height: 1.45;
  color: #4a544f;
}
/* Pills (dark glass, light, lime) */
.bt-05 .bt05-pill {
  position: absolute;
  display: flex;
  align-items: center;
  padding: calc(6 * var(--f)) calc(12 * var(--f));
  border-radius: calc(99 * var(--f));
  background: rgba(18, 22, 20, 0.7);
  font-size: calc(12 * var(--f));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
  color: #fff;
}

.bt-05 .bt05-cast {
  position: absolute;
  left: calc(88.5 * var(--f));
  top: calc(168.5 * var(--f));
  width: calc(260 * var(--f));
  height: calc(190 * var(--f));
  border-radius: calc(18 * var(--f));
  background: #fff;
  box-shadow: 0 calc(2 * var(--f)) calc(6 * var(--f)) rgba(14, 42, 34, 0.05), 0 calc(20 * var(--f)) calc(40 * var(--f)) calc(-10 * var(--f)) rgba(14, 42, 34, 0.16);
  overflow: hidden;
}
.bt-05 .bt05-cast p { position: absolute; left: calc(62 * var(--f)); margin: 0; line-height: normal; white-space: nowrap; }
.bt-05 .bt05-cast .bt05-cast-label { left: calc(16 * var(--f)); top: calc(14 * var(--f)); font-size: calc(10 * var(--f)); font-weight: 700; letter-spacing: 0.1em; color: #6b746f; }
.bt-05 .bt05-cast-hl { position: absolute; left: calc(8 * var(--f)); top: calc(32 * var(--f)); width: calc(244 * var(--f)); height: calc(46 * var(--f)); border-radius: calc(12 * var(--f)); background: rgba(14, 159, 126, 0.12); }
.bt-05 .bt05-av { position: absolute; left: calc(16 * var(--f)); width: calc(36 * var(--f)); height: calc(36 * var(--f)); border-radius: 50%; object-fit: cover; }
.bt-05 .bt05-av--1 { top: calc(36 * var(--f)); }
.bt-05 .bt05-av--2 { top: calc(86 * var(--f)); }
.bt-05 .bt05-av--3 { top: calc(136 * var(--f)); }
.bt-05 .bt05-name { font-size: calc(14 * var(--f)); font-weight: 700; color: #121614; }
.bt-05 .bt05-sub { font-size: calc(11 * var(--f)); font-weight: 500; color: #6b746f; }
.bt-05 .bt05-name--1 { top: calc(37 * var(--f)); }
.bt-05 .bt05-sub--1  { top: calc(55 * var(--f)); }
.bt-05 .bt05-name--2 { top: calc(87 * var(--f)); }
.bt-05 .bt05-sub--2  { top: calc(105 * var(--f)); }
.bt-05 .bt05-name--3 { top: calc(137 * var(--f)); }
.bt-05 .bt05-sub--3  { top: calc(155 * var(--f)); }
.bt-05 .bt05-prompt {
  position: absolute;
  left: calc(34.5 * var(--f));
  top: calc(388.5 * var(--f));
  width: calc(368 * var(--f));
  height: calc(64 * var(--f));
  border-radius: calc(18 * var(--f));
  background: #fff;
  box-shadow: 0 calc(2 * var(--f)) calc(6 * var(--f)) rgba(14, 42, 34, 0.05), 0 calc(20 * var(--f)) calc(40 * var(--f)) calc(-10 * var(--f)) rgba(14, 42, 34, 0.16);
  overflow: hidden;
}
.bt-05 .bt05-tokens { position: absolute; left: calc(14 * var(--f)); top: calc(16 * var(--f)); display: flex; align-items: center; gap: calc(6 * var(--f)); }
.bt-05 .bt05-tok {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--f));
  padding: calc(3 * var(--f)) calc(8 * var(--f)) calc(3 * var(--f)) calc(3 * var(--f));
  border-radius: calc(99 * var(--f));
  background: rgba(14, 159, 126, 0.14);
  font-size: calc(13 * var(--f));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
  color: #0b6f57;
}
.bt-05 .bt05-tok img { width: calc(22 * var(--f)); height: calc(22 * var(--f)); border-radius: 50%; object-fit: cover; }
.bt-05 .bt05-word { font-size: calc(14 * var(--f)); font-weight: 500; line-height: normal; white-space: nowrap; }
.bt-05 .bt05-caret { display: block; width: calc(2 * var(--f)); height: calc(18 * var(--f)); background: #0e9f7e; }

/* Motion (while on screen): the highlight steps down the cast list (Pip, Mia, Leo) and
   back to Pip; the prompt caret blinks. */
@media (prefers-reduced-motion: no-preference) {
  .bt-05.is-live .bt05-cast-hl { animation: bt05-pick 6s cubic-bezier(0.5, 0, 0.3, 1) infinite; }
  .bt-05.is-live .bt05-caret { animation: bt05-blink 1.06s steps(1) infinite; }
}
@keyframes bt05-pick {
  0%, 26%   { translate: 0 0; }
  33%, 59%  { translate: 0 calc(50 * var(--f)); }
  66%, 92%  { translate: 0 calc(100 * var(--f)); }
  100%      { translate: 0 0; }
}
@keyframes bt05-blink {
  0%  { opacity: 1; }
  50% { opacity: 0; }
}

/* ---- part: tile-06 ---- */
/* Tile 06 — 7 directed camera styles (Figma 716:128, 900 x 520, dark).
   Seven style cards with their camera path drawn on the still; Action is selected and
   shown in the preview bar. While on screen the dotted camera paths sweep (a bright band
   runs along each one, card after card) and the Generate pill pulses. */
.bt-06 .bt06-card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: calc(1.5 * var(--f)) solid rgba(255, 255, 255, 0.08);
  border-radius: calc(44 * var(--f));
  background: linear-gradient(149.98deg, #0f1b17 0%, #0d1512 35.714%, #123026 71.429%);
  box-shadow: 0 calc(24 * var(--f)) calc(50 * var(--f)) calc(-18 * var(--f)) rgba(14, 42, 34, 0.08);
  color: #fff;
}
.bt-06 .bt06-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(calc(50 * var(--f)));
}
.bt-06 .bt06-glow--a { left: calc(498.5 * var(--f)); top: calc(278.5 * var(--f)); width: calc(460 * var(--f)); height: calc(260 * var(--f)); background: rgba(14, 159, 126, 0.35); }
.bt-06 .bt06-glow--b { left: calc(-81.5 * var(--f)); top: calc(378.5 * var(--f)); width: calc(300 * var(--f)); height: calc(200 * var(--f)); background: rgba(217, 249, 157, 0.12); }
.bt-06 .bt06-title {
  position: absolute;
  left: calc(34.5 * var(--f));
  top: calc(32.5 * var(--f));
  margin: 0;
  font-size: calc(28 * var(--f));
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.bt-06 .bt06-text {
  position: absolute;
  left: calc(34.5 * var(--f));
  top: calc(75.5 * var(--f));
  width: calc(560 * var(--f));
  margin: 0;
  font-size: calc(16 * var(--f));
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
}

/* style cards: 108 x 168, still 108 x 130 under a 25% black wash, path 108 x 100 at y 15 */
.bt-06 .bt06-style {
  position: absolute;
  left: calc(var(--x) * var(--f));
  top: calc(194.5 * var(--f));
  width: calc(108 * var(--f));
  height: calc(168 * var(--f));
  overflow: hidden;
  border-radius: calc(18 * var(--f));
  background: #1a2420;
  box-shadow: 0 calc(2 * var(--f)) calc(6 * var(--f)) rgba(14, 42, 34, 0.05), 0 calc(20 * var(--f)) calc(40 * var(--f)) calc(-10 * var(--f)) rgba(14, 42, 34, 0.16);
}
.bt-06 .bt06-shot {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: calc(108 * var(--f));
  height: calc(130 * var(--f));
  object-fit: cover;
}
.bt-06 .bt06-style::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: calc(108 * var(--f));
  height: calc(130 * var(--f));
  background: rgba(0, 0, 0, 0.25);
}
.bt-06 .bt06-path {
  position: absolute;
  z-index: 1;
  left: 0;
  top: calc(15 * var(--f));
  display: block;
  width: calc(108 * var(--f));
  height: calc(100 * var(--f));
}
.bt-06 .bt06-name {
  position: absolute;
  left: calc(10 * var(--f));
  top: calc(140 * var(--f));
  font-size: calc(12 * var(--f));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
}
.bt-06 .bt06-name--sm { font-size: calc(11 * var(--f)); }

/* selected card: 108 x 188, 3px lime border, 10px higher; contents sit 3px in from the border */
.bt-06 .bt06-style--on {
  top: calc(184.5 * var(--f));
  height: calc(188 * var(--f));
  border: calc(3 * var(--f)) solid #d9f99d;
}
.bt-06 .bt06-style--on .bt06-shot,
.bt-06 .bt06-style--on::after { left: calc(-3 * var(--f)); top: calc(-3 * var(--f)); }
.bt-06 .bt06-style--on .bt06-path { left: calc(-3 * var(--f)); top: calc(12 * var(--f)); }
.bt-06 .bt06-style--on .bt06-name { left: calc(7 * var(--f)); top: calc(137 * var(--f)); }
.bt-06 .bt06-sel {
  position: absolute;
  left: calc(7 * var(--f));
  top: calc(157 * var(--f));
  font-size: calc(10 * var(--f));
  font-weight: 600;
  line-height: normal;
  color: #d9f99d;
}

/* preview bar: 828 x 110 */
.bt-06 .bt06-preview {
  position: absolute;
  left: calc(34.5 * var(--f));
  top: calc(382.5 * var(--f));
  width: calc(828 * var(--f));
  height: calc(110 * var(--f));
  overflow: hidden;
  border-radius: calc(20 * var(--f));
  background: #1a2420;
  box-shadow: 0 calc(2 * var(--f)) calc(6 * var(--f)) rgba(14, 42, 34, 0.05), 0 calc(20 * var(--f)) calc(40 * var(--f)) calc(-10 * var(--f)) rgba(14, 42, 34, 0.16);
}
.bt-06 .bt06-preview__img {
  position: absolute;
  left: calc(10 * var(--f));
  top: calc(10 * var(--f));
  display: block;
  width: calc(180 * var(--f));
  height: calc(90 * var(--f));
  object-fit: cover;
  border-radius: calc(14 * var(--f));
}
.bt-06 .bt06-preview__title {
  position: absolute;
  left: calc(208 * var(--f));
  top: calc(22 * var(--f));
  margin: 0;
  font-size: calc(18 * var(--f));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
}
.bt-06 .bt06-preview__text {
  position: absolute;
  left: calc(208 * var(--f));
  top: calc(50 * var(--f));
  margin: 0;
  font-size: calc(14 * var(--f));
  line-height: normal;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.7);
}
.bt-06 .bt06-generate {
  position: absolute;
  left: calc(714 * var(--f));
  top: calc(36 * var(--f));
  padding: calc(6 * var(--f)) calc(12 * var(--f));
  border-radius: 99px;
  background: #d9f99d;
  font-size: calc(13 * var(--f));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
  color: #121614;
}

/* motion (only while the tile is on screen) */
@media (prefers-reduced-motion: no-preference) {
  .bt-06.is-live .bt06-path {
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.45) 0 40%, #000 47% 53%, rgba(0, 0, 0, 0.45) 60% 100%);
            mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.45) 0 40%, #000 47% 53%, rgba(0, 0, 0, 0.45) 60% 100%);
    -webkit-mask-size: 300% 100%;
            mask-size: 300% 100%;
    animation: bt06-sweep 2.4s linear infinite;
  }
  .bt-06.is-live .bt06-style:nth-child(2) .bt06-path { animation-delay: 0.2s; }
  .bt-06.is-live .bt06-style:nth-child(3) .bt06-path { animation-delay: 0.4s; }
  .bt-06.is-live .bt06-style:nth-child(4) .bt06-path { animation-delay: 0.6s; }
  .bt-06.is-live .bt06-style:nth-child(5) .bt06-path { animation-delay: 0.8s; }
  .bt-06.is-live .bt06-style:nth-child(6) .bt06-path { animation-delay: 1s; }
  .bt-06.is-live .bt06-style:nth-child(7) .bt06-path { animation-delay: 1.2s; }
  .bt-06.is-live .bt06-generate { animation: bt06-pulse 2.4s ease-in-out infinite; }
}
@keyframes bt06-sweep {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to   { -webkit-mask-position: 0 0;    mask-position: 0 0; }
}
@keyframes bt06-pulse {
  0%, 60%, 100% { box-shadow: 0 0 0 0 rgba(217, 249, 157, 0.55); }
  30%           { box-shadow: 0 0 0 calc(8 * var(--f)) rgba(217, 249, 157, 0); }
}

/* ---- part: tile-07 ---- */
/* Tile 07 — Reactions, memes & talking characters (Figma 716:182, 440 x 520).
   A vertical meme clip with its caption, a speech bubble and three reaction pills.
   While on screen the pills float out of step and the speech bubble bobs. */
.bt-07 .bt07-card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: calc(1.5 * var(--f)) solid rgba(255, 255, 255, 0.7);
  border-radius: calc(44 * var(--f));
  background: linear-gradient(130.24deg, #f3ffe0 0%, #cff79c 35.714%, #7fe0a0 71.429%);
  box-shadow: 0 calc(24 * var(--f)) calc(50 * var(--f)) calc(-18 * var(--f)) rgba(14, 42, 34, 0.08);
  color: #121614;
}
.bt-07 .bt07-glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(calc(50 * var(--f))); }
.bt-07 .bt07-glow--a { left: calc(196.5 * var(--f)); top: calc(258.5 * var(--f)); width: calc(308 * var(--f)); height: calc(320 * var(--f)); background: rgba(43, 199, 155, 0.55); }
.bt-07 .bt07-glow--b { left: calc(-81.5 * var(--f)); top: calc(318.5 * var(--f)); width: calc(320 * var(--f)); height: calc(240 * var(--f)); background: rgba(233, 255, 138, 0.6); }
.bt-07 .bt07-title {
  position: absolute;
  left: calc(34.5 * var(--f));
  top: calc(32.5 * var(--f));
  width: calc(368 * var(--f));
  margin: 0;
  font-size: calc(28 * var(--f));
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.bt-07 .bt07-text {
  position: absolute;
  left: calc(34.5 * var(--f));
  top: calc(102.5 * var(--f));
  width: calc(368 * var(--f));
  margin: 0;
  font-size: calc(16 * var(--f));
  line-height: 1.45;
  color: #4a544f;
}
.bt-07 .bt07-meme {
  position: absolute;
  left: calc(108.5 * var(--f));
  top: calc(195.5 * var(--f));
  width: calc(220 * var(--f));
  height: calc(330 * var(--f));
  overflow: hidden;
  border-radius: calc(24 * var(--f));
  background: #0d1512;
  box-shadow: 0 calc(2 * var(--f)) calc(6 * var(--f)) rgba(14, 42, 34, 0.05), 0 calc(20 * var(--f)) calc(40 * var(--f)) calc(-10 * var(--f)) rgba(14, 42, 34, 0.16);
}
.bt-07 .bt07-meme img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bt-07 .bt07-meme__cap {
  position: absolute;
  left: 50%;
  top: calc(16 * var(--f));
  translate: -50% 0;
  margin: 0;
  font-size: calc(17 * var(--f));
  font-weight: 700;
  line-height: normal;
  text-align: center;
  white-space: nowrap;
  color: #fff;
  /* meme caption outline, as in the Figma render */
  -webkit-text-stroke: calc(2.4 * var(--f)) #000;
  paint-order: stroke fill;
}
.bt-07 .bt07-speech {
  position: absolute;
  left: calc(258.5 * var(--f));
  top: calc(365.5 * var(--f));
  width: calc(173 * var(--f));
  height: calc(62 * var(--f));
  border-radius: calc(18 * var(--f));
  background: #fff;
  box-shadow: 0 calc(2 * var(--f)) calc(6 * var(--f)) rgba(14, 42, 34, 0.05), 0 calc(20 * var(--f)) calc(40 * var(--f)) calc(-10 * var(--f)) rgba(14, 42, 34, 0.16);
}
.bt-07 .bt07-speech p {
  position: absolute;
  left: calc(14 * var(--f));
  top: calc(var(--y) * var(--f));
  margin: 0;
  font-size: calc(13 * var(--f));
  font-weight: 600;
  line-height: normal;
  white-space: nowrap;
}
.bt-07 .bt07-pill {
  position: absolute;
  padding: calc(6 * var(--f)) calc(12 * var(--f));
  border-radius: 99px;
  background: #fff;
  filter: drop-shadow(0 calc(8 * var(--f)) calc(9 * var(--f)) rgba(14, 42, 34, 0.15));
  font-size: calc(13 * var(--f));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
}
.bt-07 .bt07-pill--a { left: calc(28.5 * var(--f)); top: calc(325.5 * var(--f)); }
.bt-07 .bt07-pill--b { left: calc(298.5 * var(--f)); top: calc(445.5 * var(--f)); }
.bt-07 .bt07-pill--c { left: calc(34.5 * var(--f)); top: calc(465.5 * var(--f)); }
.bt-07 .bt07-heart { color: #e5383b; }

@media (prefers-reduced-motion: no-preference) {
  .bt-07.is-live .bt07-pill--a { animation: bt07-float 3.2s ease-in-out infinite; }
  .bt-07.is-live .bt07-pill--b { animation: bt07-float 3.6s ease-in-out -1.2s infinite; }
  .bt-07.is-live .bt07-pill--c { animation: bt07-float 3.4s ease-in-out -2.1s infinite; }
  .bt-07.is-live .bt07-speech  { animation: bt07-float 4s ease-in-out -0.6s infinite; }
}
@keyframes bt07-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 calc(-7 * var(--f)); }
}

/* ---- part: tile-08 ---- */
/* Tile 08 — Custom B-roll & cutaways (Figma 716:199, 440 x 520).
   A film timeline with an empty "Insert" gap and the generated cutaway clip above it.
   While on screen the arrow nudges down, then the clip drops into the gap (it shrinks and
   straightens to fit), holds there, fades and comes back to its Figma spot. */
.bt-08 .bt08-card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: calc(1.5 * var(--f)) solid rgba(255, 255, 255, 0.7);
  border-radius: calc(44 * var(--f));
  background: linear-gradient(130.24deg, #e9f1ff 0%, #b7cfff 35.714%, #6e9bf5 71.429%);
  box-shadow: 0 calc(24 * var(--f)) calc(50 * var(--f)) calc(-18 * var(--f)) rgba(14, 42, 34, 0.08);
  color: #121614;
}
.bt-08 .bt08-glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(calc(50 * var(--f))); }
.bt-08 .bt08-glow--a { left: calc(196.5 * var(--f)); top: calc(258.5 * var(--f)); width: calc(308 * var(--f)); height: calc(320 * var(--f)); background: rgba(61, 116, 232, 0.55); }
.bt-08 .bt08-glow--b { left: calc(-81.5 * var(--f)); top: calc(318.5 * var(--f)); width: calc(320 * var(--f)); height: calc(240 * var(--f)); background: rgba(169, 232, 255, 0.6); }
.bt-08 .bt08-title {
  position: absolute;
  left: calc(34.5 * var(--f));
  top: calc(32.5 * var(--f));
  margin: 0;
  font-size: calc(28 * var(--f));
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.bt-08 .bt08-text {
  position: absolute;
  left: calc(34.5 * var(--f));
  top: calc(75.5 * var(--f));
  width: calc(368 * var(--f));
  margin: 0;
  font-size: calc(16 * var(--f));
  line-height: 1.45;
  color: #4a544f;
}
.bt-08 .bt08-timeline {
  position: absolute;
  left: calc(34.5 * var(--f));
  top: calc(358.5 * var(--f));
  width: calc(368 * var(--f));
  height: calc(90 * var(--f));
  border-radius: calc(16 * var(--f));
  background: rgba(255, 255, 255, 0.7);
}
.bt-08 .bt08-shot {
  position: absolute;
  left: calc(var(--x) * var(--f));
  top: calc(8 * var(--f));
  display: block;
  width: calc(80 * var(--f));
  height: calc(74 * var(--f));
  object-fit: cover;
  border-radius: calc(10 * var(--f));
}
.bt-08 .bt08-gap {
  position: absolute;
  left: calc(184 * var(--f));
  top: calc(8 * var(--f));
  width: calc(88 * var(--f));
  height: calc(74 * var(--f));
  box-sizing: border-box;
  border: calc(2 * var(--f)) dashed #0e9f7e;
  border-radius: calc(10 * var(--f));
  background: rgba(14, 159, 126, 0.08);
}
/* the clip: 170 x 120 with a 3px lime border, turned 5deg; its box centre is Figma's (283.95, 255.68) */
.bt-08 .bt08-clip {
  position: absolute;
  z-index: 1;
  left: calc(198.95 * var(--f));
  top: calc(195.68 * var(--f));
  width: calc(170 * var(--f));
  height: calc(120 * var(--f));
  box-sizing: border-box;
  overflow: hidden;
  border: calc(3 * var(--f)) solid #d9f99d;
  border-radius: calc(16 * var(--f));
  background: #0d1512;
  box-shadow: 0 calc(2 * var(--f)) calc(6 * var(--f)) rgba(14, 42, 34, 0.05), 0 calc(20 * var(--f)) calc(40 * var(--f)) calc(-10 * var(--f)) rgba(14, 42, 34, 0.16);
  rotate: 5deg;
}
.bt-08 .bt08-clip img {
  position: absolute;
  left: calc(-3 * var(--f));
  top: calc(-3 * var(--f));
  display: block;
  width: calc(170 * var(--f));
  height: calc(120 * var(--f));
  object-fit: cover;
}
.bt-08 .bt08-clip__pill {
  position: absolute;
  left: calc(7 * var(--f));
  top: calc(7 * var(--f));
  padding: calc(6 * var(--f)) calc(12 * var(--f));
  border-radius: 99px;
  background: #d9f99d;
  font-size: calc(11 * var(--f));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
}
.bt-08 .bt08-arrow {
  position: absolute;
  left: calc(254.5 * var(--f));
  top: calc(310.5 * var(--f));
  display: block;
  width: calc(24 * var(--f));
  height: calc(44 * var(--f));
}
.bt-08 .bt08-label {
  position: absolute;
  left: calc(var(--x) * var(--f));
  top: calc(454.5 * var(--f));
  font-size: calc(11 * var(--f));
  font-weight: 600;
  line-height: normal;
  white-space: nowrap;
  color: #121714;
}

/* Drop: from its spot to the gap centre (262.5, 403.5) = +(-21.45, 147.82), scaled to the gap */
@media (prefers-reduced-motion: no-preference) {
  .bt-08.is-live .bt08-clip  { animation: bt08-drop 5s ease-in-out infinite; }
  .bt-08.is-live .bt08-arrow { animation: bt08-nudge 5s ease-in-out infinite; }
  .bt-08.is-live .bt08-gap   { animation: bt08-gap 5s ease-in-out infinite; }
}
@keyframes bt08-drop {
  0%, 30%  { translate: 0 0; scale: 1; rotate: 5deg; opacity: 1; }
  48%, 78% { translate: calc(-21.45 * var(--f)) calc(147.82 * var(--f)); scale: 0.52; rotate: 0deg; opacity: 1; }
  86%      { translate: calc(-21.45 * var(--f)) calc(147.82 * var(--f)); scale: 0.52; rotate: 0deg; opacity: 0; }
  87%      { translate: 0 calc(-12 * var(--f)); scale: 1; rotate: 5deg; opacity: 0; }
  100%     { translate: 0 0; scale: 1; rotate: 5deg; opacity: 1; }
}
@keyframes bt08-nudge {
  0%, 30%, 100% { translate: 0 0; opacity: 1; }
  12%           { translate: 0 calc(6 * var(--f)); }
  24%           { translate: 0 0; }
  40%, 88%      { opacity: 0; }
}
@keyframes bt08-gap {
  0%, 44%, 86%, 100% { border-color: #0e9f7e; background-color: rgba(14, 159, 126, 0.08); }
  50%, 78%           { border-color: rgba(14, 159, 126, 0); background-color: rgba(14, 159, 126, 0.16); }
}

/* ---- part: tile-09 ---- */
/* Tile 09 — Any shape, any length, any model (Figma 716:220, 440 x 520).
   A clip settings card: aspect (9:16 picked), a length slider at 10s and the model picker.
   While on screen the slider knob drags along the track and the "10s" pill follows it,
   counting the seconds (js: Studio tile 09). */
.bt-09 .bt09-card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: calc(1.5 * var(--f)) solid rgba(255, 255, 255, 0.7);
  border-radius: calc(44 * var(--f));
  background: linear-gradient(130.24deg, #e3fff4 0%, #b0f2da 35.714%, #62d6b4 71.429%);
  box-shadow: 0 calc(24 * var(--f)) calc(50 * var(--f)) calc(-18 * var(--f)) rgba(14, 42, 34, 0.08);
  color: #121614;
}
.bt-09 .bt09-glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(calc(50 * var(--f))); }
.bt-09 .bt09-glow--a { left: calc(196.5 * var(--f)); top: calc(258.5 * var(--f)); width: calc(308 * var(--f)); height: calc(320 * var(--f)); background: rgba(34, 184, 142, 0.55); }
.bt-09 .bt09-glow--b { left: calc(-81.5 * var(--f)); top: calc(318.5 * var(--f)); width: calc(320 * var(--f)); height: calc(240 * var(--f)); background: rgba(217, 249, 157, 0.6); }
.bt-09 .bt09-title {
  position: absolute;
  left: calc(34.5 * var(--f));
  top: calc(32.5 * var(--f));
  width: calc(368 * var(--f));
  margin: 0;
  font-size: calc(28 * var(--f));
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.bt-09 .bt09-text {
  position: absolute;
  left: calc(34.5 * var(--f));
  top: calc(102.5 * var(--f));
  width: calc(368 * var(--f));
  margin: 0;
  font-size: calc(16 * var(--f));
  line-height: 1.45;
  color: #4a544f;
}
.bt-09 .bt09-controls {
  position: absolute;
  left: calc(34.5 * var(--f));
  top: calc(195.5 * var(--f));
  width: calc(368 * var(--f));
  height: calc(300 * var(--f));
  overflow: hidden;
  border-radius: calc(22 * var(--f));
  background: #fff;
  box-shadow: 0 calc(2 * var(--f)) calc(6 * var(--f)) rgba(14, 42, 34, 0.05), 0 calc(20 * var(--f)) calc(40 * var(--f)) calc(-10 * var(--f)) rgba(14, 42, 34, 0.16);
}
.bt-09 .bt09-label {
  position: absolute;
  left: calc(20 * var(--f));
  top: calc(var(--y) * var(--f));
  margin: 0;
  font-size: calc(13 * var(--f));
  font-weight: 600;
  line-height: normal;
  color: #6b746f;
}
.bt-09 .bt09-aspect {
  position: absolute;
  left: calc(var(--x) * var(--f));
  top: calc(40 * var(--f));
  width: calc(96 * var(--f));
  height: calc(58 * var(--f));
  box-sizing: border-box;
  border-radius: calc(14 * var(--f));
  background: rgba(18, 22, 20, 0.04);
}
.bt-09 .bt09-aspect--on {
  border: calc(2 * var(--f)) solid #0e9f7e;
  background: rgba(14, 159, 126, 0.12);
}
.bt-09 .bt09-shape {
  position: absolute;
  left: calc(var(--l) * var(--f));
  top: calc(var(--t) * var(--f));
  width: calc(var(--w) * var(--f));
  height: calc(var(--h) * var(--f));
  box-sizing: border-box;
  border: calc(2 * var(--f)) solid rgba(18, 22, 20, 0.5);
  border-radius: calc(4 * var(--f));
}
.bt-09 .bt09-ratio {
  position: absolute;
  left: calc(var(--l) * var(--f));
  top: calc(var(--t) * var(--f));
  font-size: calc(13 * var(--f));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
}
.bt-09 .bt09-aspect--on .bt09-shape { border-color: #0e9f7e; }
.bt-09 .bt09-aspect--on .bt09-ratio { color: #0b6f57; }

/* slider: track 328 at x 20, fill 205 wide, knob 24 at x 213, pill at x 208 */
.bt-09 .bt09-track,
.bt-09 .bt09-fill {
  position: absolute;
  left: calc(20 * var(--f));
  top: calc(158 * var(--f));
  height: calc(8 * var(--f));
  border-radius: calc(4 * var(--f));
}
.bt-09 .bt09-track { width: calc(328 * var(--f)); background: rgba(18, 22, 20, 0.08); }
.bt-09 .bt09-fill { width: calc(205 * var(--f)); background: #0e9f7e; }
.bt-09 .bt09-knob {
  position: absolute;
  left: calc(213 * var(--f));
  top: calc(150 * var(--f));
  width: calc(24 * var(--f));
  height: calc(24 * var(--f));
  box-sizing: border-box;
  border: calc(4 * var(--f)) solid #0e9f7e;
  border-radius: 50%;
  background: #fff;
}
.bt-09 .bt09-value {
  position: absolute;
  left: calc(208 * var(--f));
  top: calc(116 * var(--f));
  padding: calc(6 * var(--f)) calc(12 * var(--f));
  border-radius: 99px;
  background: #121614;
  font-size: calc(12 * var(--f));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
  color: #fff;
}
.bt-09 .bt09-tick {
  position: absolute;
  left: calc(var(--x) * var(--f));
  top: calc(174 * var(--f));
  font-size: calc(11 * var(--f));
  font-weight: 500;
  line-height: normal;
  color: #6b746f;
}
.bt-09 .bt09-model {
  position: absolute;
  left: calc(20 * var(--f));
  top: calc(228 * var(--f));
  width: calc(328 * var(--f));
  height: calc(52 * var(--f));
  box-sizing: border-box;
  border: calc(1 * var(--f)) solid rgba(18, 22, 20, 0.1);
  border-radius: calc(14 * var(--f));
  background: rgba(18, 22, 20, 0.04);
}
.bt-09 .bt09-model__dot {
  position: absolute;
  left: calc(11 * var(--f));
  top: calc(11 * var(--f));
  width: calc(28 * var(--f));
  height: calc(28 * var(--f));
  border-radius: calc(8 * var(--f));
  background: linear-gradient(135deg, #1fb58f 0%, #0b4f44 71.429%);
}
.bt-09 .bt09-model__name,
.bt-09 .bt09-model__caret {
  position: absolute;
  top: calc(15 * var(--f));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
}
.bt-09 .bt09-model__name { left: calc(49 * var(--f)); font-size: calc(15 * var(--f)); }
.bt-09 .bt09-model__caret { left: calc(303 * var(--f)); font-size: calc(14 * var(--f)); color: #6b746f; }

/* ---- part: tile-10 ---- */
/* Tile 10 — Every take saved (Figma 716:249, 440 x 520).
   Three takes stacked as a fanned pile; the front one (lime pill, green check) is the pick.
   While on screen the takes swap: every few seconds the front take slides out and goes to
   the back of the pile, the others move forward (js: Studio tile 10). The pile's three
   spots (back / middle / front) are Figma's, by data-slot 0 / 1 / 2. */
.bt-10 .bt10-card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: calc(1.5 * var(--f)) solid rgba(255, 255, 255, 0.7);
  border-radius: calc(44 * var(--f));
  background: linear-gradient(130.24deg, #e6f5ff 0%, #abddfb 35.714%, #5db8ec 71.429%);
  box-shadow: 0 calc(24 * var(--f)) calc(50 * var(--f)) calc(-18 * var(--f)) rgba(14, 42, 34, 0.08);
  color: #121614;
}
.bt-10 .bt10-glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(calc(50 * var(--f))); }
.bt-10 .bt10-glow--a { left: calc(196.5 * var(--f)); top: calc(258.5 * var(--f)); width: calc(308 * var(--f)); height: calc(320 * var(--f)); background: rgba(44, 147, 216, 0.55); }
.bt-10 .bt10-glow--b { left: calc(-81.5 * var(--f)); top: calc(318.5 * var(--f)); width: calc(320 * var(--f)); height: calc(240 * var(--f)); background: rgba(189, 245, 228, 0.6); }
.bt-10 .bt10-title {
  position: absolute;
  left: calc(34.5 * var(--f));
  top: calc(32.5 * var(--f));
  margin: 0;
  font-size: calc(28 * var(--f));
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.bt-10 .bt10-text {
  position: absolute;
  left: calc(34.5 * var(--f));
  top: calc(75.5 * var(--f));
  width: calc(368 * var(--f));
  margin: 0;
  font-size: calc(16 * var(--f));
  line-height: 1.45;
  color: #4a544f;
}

/* takes: 250 x 200 cards; the still is drawn at 200% and shifted (-54%, -76%) as in Figma */
.bt-10 .bt10-take {
  position: absolute;
  left: calc(var(--cx) * var(--f) - 125 * var(--f));
  top: calc(var(--cy) * var(--f) - 100 * var(--f));
  width: calc(250 * var(--f));
  height: calc(200 * var(--f));
  overflow: hidden;
  border-radius: calc(18 * var(--f));
  background: #0d1512;
  box-shadow: 0 calc(2 * var(--f)) calc(6 * var(--f)) rgba(14, 42, 34, 0.05), 0 calc(20 * var(--f)) calc(40 * var(--f)) calc(-10 * var(--f)) rgba(14, 42, 34, 0.16);
  rotate: var(--r);
  transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1), top 0.6s cubic-bezier(0.4, 0, 0.2, 1), rotate 0.6s cubic-bezier(0.4, 0, 0.2, 1), translate 0.35s ease-in, opacity 0.35s ease-in;
}
.bt-10 .bt10-take[data-slot="0"] { --cx: 172.36; --cy: 281.02; --r: 6deg; z-index: 1; }
.bt-10 .bt10-take[data-slot="1"] { --cx: 209.93; --cy: 294.80; --r: 2deg; z-index: 2; }
.bt-10 .bt10-take[data-slot="2"] { --cx: 248.56; --cy: 305.83; --r: -3deg; z-index: 3; }
.bt-10 .bt10-take img {
  position: absolute;
  left: -54%;
  top: -76%;
  display: block;
  width: 200%;
  height: 200%;
  max-width: none;
  object-fit: cover;
}
.bt-10 .bt10-take__pill {
  position: absolute;
  left: calc(12 * var(--f));
  top: calc(12 * var(--f));
  padding: calc(6 * var(--f)) calc(12 * var(--f));
  border-radius: 99px;
  background: rgba(18, 22, 20, 0.7);
  font-size: calc(11 * var(--f));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
  color: #fff;
  transition: background-color 0.3s, color 0.3s;
}
.bt-10 .bt10-take[data-slot="2"] .bt10-take__pill { background: #d9f99d; color: #121614; }
/* the front take leaving: slides right and fades, then is moved to the back */
.bt-10 .bt10-take.is-out { translate: calc(70 * var(--f)) calc(-10 * var(--f)); opacity: 0; }

.bt-10 .bt10-check {
  position: absolute;
  z-index: 4;
  left: calc(348.5 * var(--f));
  top: calc(230.5 * var(--f));
  display: block;
  width: calc(34 * var(--f));
  height: calc(34 * var(--f));
}
.bt-10 .bt10-pill {
  position: absolute;
  z-index: 4;
  padding: calc(6 * var(--f)) calc(12 * var(--f));
  border-radius: 99px;
  background: #fff;
  font-size: calc(13 * var(--f));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
}
.bt-10 .bt10-pill--swap { left: calc(298.5 * var(--f)); top: calc(168.5 * var(--f)); filter: drop-shadow(0 calc(8 * var(--f)) calc(9 * var(--f)) rgba(14, 42, 34, 0.15)); }
.bt-10 .bt10-pill--send { left: calc(34.5 * var(--f)); top: calc(438.5 * var(--f)); padding-block: calc(10 * var(--f)); background: #121614; color: #fff; }
.bt-10 .bt10-pill--dl { left: calc(175.5 * var(--f)); top: calc(438.5 * var(--f)); padding-block: calc(10 * var(--f)); }
.bt-10 .bt10-check.is-pop { animation: bt10-pop 0.45s ease-out; }
@keyframes bt10-pop {
  0%   { scale: 0.6; }
  60%  { scale: 1.15; }
  100% { scale: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .bt-10 .bt10-take, .bt-10 .bt10-take__pill { transition: none; }
}

/* ---- part: showcase ---- */
/* ============ SHOWCASE (Figma "04 Showcase — made with Studio", 1920 x 2871) ============
   Desktop (1024+): laid out on the 1920 frame, --u = one Figma px. Three rows (Figma x 240,
   1440 wide) at y 420 / 1131 / 2021; each row = a clip stage + its prompt side.
   A stage (.sc-stage) is a container drawn at its Figma size (--sw x --sh); inside it --k is
   one Figma px of that stage, so it looks the same at every width.
   Phones / tablets (< 1024): heading, then each row stacked: stage on top, prompt below. */
.showcase {
  position: relative;
  container-type: inline-size;
  overflow: hidden;
  background: #fbfaf7;
  color: #141826;
}
.sc-in {
  --u: min(1px, 100cqw / 1920);
  position: relative;
  width: calc(1920 * var(--u));
  height: calc(2871 * var(--u));
  margin: 0 auto;
}

/* ---- heading ---- */
.sc-chip {
  position: absolute;
  left: 50%;
  top: calc(60 * var(--u));
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  padding: calc(10 * var(--u)) calc(16 * var(--u)) calc(10 * var(--u)) calc(14 * var(--u));
  border-radius: calc(16 * var(--u));
  background: rgba(20, 24, 38, 0.06);
  font-size: max(10px, calc(12 * var(--u)));
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.sc-chip i { width: calc(8 * var(--u)); height: calc(8 * var(--u)); min-width: 6px; min-height: 6px; border-radius: 50%; background: #f2735c; }
.sc-title > span { position: absolute; left: 0; right: 0; display: block; text-align: center; white-space: nowrap; line-height: normal; }
.sc-title__a { top: calc(110 * var(--u)); font-size: calc(84 * var(--u)); font-weight: 700; letter-spacing: -0.04em; }
.sc-title__b { top: calc(201 * var(--u)); font-family: var(--font-script); font-size: calc(96 * var(--u)); font-weight: 400; color: #0e9f7e; }

/* ---- rows (desktop: Figma boxes) ---- */
.sc-row { position: absolute; left: calc(240 * var(--u)); width: calc(1440 * var(--u)); }
.sc-row--1 { top: calc(420 * var(--u)); height: calc(621 * var(--u)); }
.sc-row--2 { top: calc(1131 * var(--u)); height: calc(800 * var(--u)); }
.sc-row--3 { top: calc(2021 * var(--u)); height: calc(720 * var(--u)); }
.sc-row .sc-stage { position: absolute; top: calc(10 * var(--u)); width: calc(var(--sw) * var(--u)); }
.sc-row--1 .sc-stage { left: calc(480 * var(--u)); }
.sc-row--2 .sc-stage { left: 0; }
.sc-row--3 .sc-stage { left: calc(740 * var(--u)); }
.sc-row .sc-prompt { position: absolute; top: 0; }
.sc-row--1 .sc-prompt { left: 0; width: calc(400 * var(--u)); padding-top: calc(147 * var(--u)); }
.sc-row--2 .sc-prompt { left: calc(580 * var(--u)); width: calc(860 * var(--u)); padding-top: calc(266 * var(--u)); }
.sc-row--3 .sc-prompt { left: 0; width: calc(660 * var(--u)); padding-top: calc(226 * var(--u)); }

/* ---- a clip stage ---- */
.sc-stage {
  container-type: inline-size;
  aspect-ratio: var(--sw) / var(--sh);
  overflow: hidden;
  border-radius: calc(80 / var(--sw) * 100%) / calc(80 / var(--sh) * 100%);
  box-shadow: 0 30px 70px -20px rgba(27, 36, 64, 0.12);
  isolation: isolate;
}
.sc-stage > * { --k: calc(100cqw / var(--sw)); position: absolute; }
.sc-stage--coral { background: linear-gradient(147.95deg, #ffe3d3 0%, #ffb59e 35.714%, #ff8a73 71.429%); }
.sc-stage--sky   { background: linear-gradient(122.66deg, #e3f1ff 0%, #a9d3ff 35.714%, #5aa6f5 71.429%); }
.sc-stage--sun   { background: linear-gradient(135deg, #fff8d6 0%, #ffe58a 35.714%, #ffc94d 71.429%); }

/* two blurred ellipses (Figma: blur 60) */
.sc-blob { border-radius: 50%; filter: blur(calc(60 * var(--k))); }
.sc-stage--coral .sc-blob--a { left: calc(-96 * var(--k)); top: calc(-90.15 * var(--k)); width: calc(672 * var(--k)); height: calc(360.6 * var(--k)); background: rgba(255, 209, 94, 0.8); }
.sc-stage--coral .sc-blob--b { left: calc(432 * var(--k)); top: calc(330.55 * var(--k)); width: calc(672 * var(--k)); height: calc(360.6 * var(--k)); background: rgba(255, 107, 107, 0.55); }
.sc-stage--sky .sc-blob--a { left: calc(-50 * var(--k)); top: calc(-117 * var(--k)); width: calc(350 * var(--k)); height: calc(468 * var(--k)); background: rgba(184, 241, 255, 0.8); }
.sc-stage--sky .sc-blob--b { left: calc(225 * var(--k)); top: calc(429 * var(--k)); width: calc(350 * var(--k)); height: calc(468 * var(--k)); background: rgba(37, 99, 235, 0.55); }
.sc-stage--sun .sc-blob--a { left: calc(-70 * var(--k)); top: calc(-105 * var(--k)); width: calc(490 * var(--k)); height: calc(420 * var(--k)); background: rgba(255, 255, 255, 0.8); }
.sc-stage--sun .sc-blob--b { left: calc(315 * var(--k)); top: calc(385 * var(--k)); width: calc(490 * var(--k)); height: calc(420 * var(--k)); background: rgba(255, 159, 69, 0.55); }

/* glass bars at the left and right edges */
.sc-bar { width: calc(46 * var(--k)); border-radius: calc(23 * var(--k)); background: rgba(255, 255, 255, 0.35); }
.sc-bar--l { left: calc(-12 * var(--k)); }
.sc-bar--r { left: calc((var(--sw) - 34) * var(--k)); }
.sc-stage--coral .sc-bar { top: calc(132.22 * var(--k)); height: calc(330.55 * var(--k)); }
.sc-stage--sky .sc-bar { top: calc(171.6 * var(--k)); height: calc(429 * var(--k)); }
.sc-stage--sun .sc-bar { top: calc(154 * var(--k)); height: calc(385 * var(--k)); }

/* the clip: 8px white frame, inset 70 on every side */
.sc-video {
  left: calc(70 * var(--k));
  top: calc(70 * var(--k));
  width: calc((var(--sw) - 140) * var(--k));
  height: calc((var(--sh) - 140) * var(--k));
  border-radius: calc(36 * var(--k));
  background: #fff;
  box-shadow: 0 24px 50px -10px rgba(27, 36, 64, 0.3);
}
.sc-stage--sky .sc-video { border-radius: calc(44 * var(--k)); }
.sc-video::after { content: ""; position: absolute; inset: 0; border: calc(8 * var(--k)) solid #fff; border-radius: inherit; pointer-events: none; }
.sc-video .rt-play { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background: #fff; }
.sc-video button { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.sc-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sc-pulse, .sc-play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; border-radius: 50%; }
.sc-pulse { width: calc(140 * var(--k)); height: calc(140 * var(--k)); background: rgba(255, 255, 255, 0.28); }
.sc-play {
  display: grid;
  place-items: center;
  width: calc(96 * var(--k));
  height: calc(96 * var(--k));
  background: rgba(255, 255, 255, 0.96);
  filter: drop-shadow(0 10px 15px rgba(27, 36, 64, 0.35));
  transition: scale 0.2s;
}
.sc-video button:hover .sc-play { scale: 1.06; }
.sc-play img { width: calc(30 * var(--k)); height: calc(34 * var(--k)); translate: calc(3 * var(--k)) 0; }
.sc-sound {
  position: absolute;
  right: calc(16 * var(--k));
  bottom: calc(16 * var(--k));
  display: flex;
  align-items: center;
  gap: calc(6 * var(--k));
  padding: calc(7 * var(--k)) calc(12 * var(--k));
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.5);
  font-size: max(10px, calc(13 * var(--k)));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
  color: #fff;
}
.sc-sound img { width: calc(16 * var(--k)); height: calc(16 * var(--k)); }

/* sticker: white tag, tilted; --lx its left edge, --cy its centre line (Figma px). On small
   stages its text stays at least 10px, so it is kept 10px in from the stage's left edge. */
.sc-sticker {
  left: max(10px, calc(var(--lx) * var(--k)));
  top: calc(var(--cy) * var(--k));
  translate: 0 -50%;
  rotate: var(--rot);
  padding: calc(9 * var(--k)) calc(16 * var(--k));
  border-radius: calc(14 * var(--k));
  background: #fff;
  filter: drop-shadow(0 10px 10px rgba(27, 36, 64, 0.18));
  font-size: max(10px, calc(15 * var(--k)));
  font-weight: 700;
  line-height: normal;
  white-space: pre;
}

/* ---- prompt side ---- */
.sc-label { font-size: max(11px, calc(14 * var(--u))); font-weight: 700; line-height: calc(18 * var(--u)); letter-spacing: 0.12em; white-space: pre; color: rgba(20, 24, 38, 0.5); }
.sc-quote { margin-top: calc(22 * var(--u)); font-size: calc(50 * var(--u)); font-weight: 700; letter-spacing: -0.03em; color: #141826; }
.sc-line { display: block; height: calc(60 * var(--u)); line-height: calc(63 * var(--u)); white-space: nowrap; }
.sc-quote mark {
  display: inline-block;
  vertical-align: top;
  height: calc(71 * var(--u));
  margin-top: calc(-4 * var(--u));
  padding: calc(4 * var(--u)) calc(16 * var(--u));
  border-radius: calc(18 * var(--u));
  background: var(--hl);
  color: inherit;
}
.sc-caret { display: inline-block; vertical-align: top; width: calc(4 * var(--u)); height: calc(54 * var(--u)); margin-left: calc(10 * var(--u)); background: #2563eb; }
.sc-btnrow { display: flex; align-items: center; gap: calc(14 * var(--u)); margin-top: calc(38 * var(--u)); }
.sc-gen {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  padding: calc(12 * var(--u)) calc(20 * var(--u)) calc(12 * var(--u)) calc(14 * var(--u));
  border-radius: 99px;
  background: #141826;
  font-size: max(11px, calc(16 * var(--u)));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
  color: #fff;
}
.sc-gen img { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.sc-curve { width: calc(150 * var(--u)); height: calc(70 * var(--u)); }

/* ---- motion (only while the row is on screen) ---- */
.sc-row.is-live .sc-caret { animation: sc-blink 1s steps(1) infinite; }
.sc-row.is-live .sc-pulse { animation: sc-pulse 2.4s ease-out infinite; }
@keyframes sc-blink { 50% { opacity: 0; } }
@keyframes sc-pulse {
  0%   { scale: 0.75; opacity: 0; }
  30%  { opacity: 1; }
  100% { scale: 1.25; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-row.is-live .sc-caret, .sc-row.is-live .sc-pulse { animation: none; }
}

/* ---- phones and tablets: heading, then each row as clip over prompt ---- */
@media (max-width: 1023px) {
  .sc-in { width: auto; height: auto; padding: 56px 16px 64px; display: flex; flex-direction: column; align-items: center; }
  .sc-chip, .sc-title > span { position: static; translate: none; }
  .sc-chip { gap: 8px; padding: 8px 14px 8px 12px; border-radius: 14px; font-size: 11px; }
  .sc-title { margin-top: 16px; text-align: center; }
  .sc-title > span { white-space: normal; }
  .sc-title__a { font-size: clamp(36px, 9vw, 64px); }
  .sc-title__b { margin-top: 2px; font-size: clamp(40px, 10.5vw, 72px); line-height: 1.05; }
  .sc-row {
    --u: 0.56px;
    position: relative; left: auto; top: auto; height: auto;
    width: 100%; max-width: 640px;
    display: flex; flex-direction: column; gap: 24px;
    margin-top: 48px;
  }
  .sc-row .sc-stage { position: relative; left: auto; top: auto; width: 100%; }
  .sc-row--2 .sc-stage { width: min(100%, 400px); align-self: center; }
  .sc-row .sc-prompt { position: static; width: auto; padding-top: 0; }
  .sc-row .sc-btnrow { margin-top: 30px; }
}
@media (min-width: 640px) and (max-width: 1023px) { .sc-row { --u: 0.8px; } }

@media (prefers-reduced-motion: reduce) {
  .chevrons, .board-graph.is-live .board-links path, .board-graph.is-live .board-prompt__caret { animation: none; }
}

/* Hero video (Loom embed) inside the video card */
.video-card__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 15px; background: #0e1726; }
.video-card__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (min-width: 1024px) { .video-card__frame { border-radius: 22px; } }

/* Launch Kit timers (launch.askankit.com/timer.js). It fills each empty [data-lk-timer] with
   .lk-cd > .lk-cd__unit > .lk-cd__num + .lk-cd__label and keeps it hidden until its time arrives.
   These rules give that markup the look of the .timer / .mini-timer boxes above (copied from them),
   with the colons drawn between units. The days unit only shows while more than 24 hours are left. */
.timer .lk-cd { display: flex; align-items: flex-start; gap: 10px; }
.timer .lk-cd__unit { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.timer .lk-cd__num { display: grid; place-items: center; width: 96px; height: 96px; border: 1px solid rgba(14, 23, 38, 0.08); border-radius: 22px; background: #fff; box-shadow: 0 10px 24px -6px rgba(11, 42, 92, 0.08); font-size: 52px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: #0e1726; }
.timer .lk-cd__label { font-size: 13px; font-weight: 500; letter-spacing: 0.1em; color: rgba(14, 23, 38, 0.55); }
.timer .lk-cd__unit + .lk-cd__unit::before { width: 16px; height: 96px; font-size: 40px; font-weight: 700; line-height: 96px; text-align: center; color: rgba(14, 23, 38, 0.3); }
@media (max-width: 639px) {
  .timer .lk-cd__num { width: 72px; height: 72px; border-radius: 18px; font-size: 38px; }
  .timer .lk-cd__unit + .lk-cd__unit::before { height: 72px; line-height: 72px; font-size: 30px; }
}
.mini-timer .lk-cd__num { padding: 6px 10px; border-radius: 10px; background: rgba(22, 24, 29, 0.05); font-variant-numeric: tabular-nums; }
.mini-timer .lk-cd__unit + .lk-cd__unit::before { font-style: normal; color: rgba(22, 24, 29, 0.3); }
.timer:has([data-lk-timer][hidden]), .mini-timer:has([data-lk-timer][hidden]) { display: none; }
.timer .lk-cd { gap: 36px; }
.timer--sm .lk-cd { gap: 28.8px; }
.timer .lk-cd__unit, .mini-timer .lk-cd__unit { position: relative; min-width: 0; }
.timer .lk-cd__num { line-height: 1; }
.timer .lk-cd__label { text-transform: uppercase; opacity: 1; }
.timer .lk-cd__unit + .lk-cd__unit::before, .mini-timer .lk-cd__unit + .lk-cd__unit::before { content: ":"; position: absolute; top: 0; }
.timer .lk-cd__unit + .lk-cd__unit::before { right: calc(100% + 10px); }
.timer--sm .lk-cd__unit + .lk-cd__unit::before { right: calc(100% + 8px); }
.lk-cd__unit--days[hidden] + .lk-cd__unit::before { content: none !important; }
.mini-timer .lk-cd { display: flex; align-items: center; gap: 22px; }
.mini-timer .lk-cd__unit + .lk-cd__unit::before { right: calc(100% + 6px); top: 50%; transform: translateY(-50%); line-height: 1; }
.mini-timer .lk-cd__num { line-height: 1.2; }
.mini-timer .lk-cd__label { display: none; }
.mini-timer { flex-wrap: wrap; justify-content: center; row-gap: 8px; }
.mini-timer > span:first-child { white-space: nowrap; }
/* phones: four boxes (with days) must fit in 358px */
@media (max-width: 639px) {
  .timer .lk-cd { gap: 22px; }
  .timer .lk-cd__num { width: 64px; height: 64px; border-radius: 15px; font-size: 34px; }
  .timer .lk-cd__unit + .lk-cd__unit::before { right: calc(100% + 3px); left: auto; width: 16px; height: 64px; font-size: 26px; line-height: 64px; }
}

/* JVZoo buy button (the embed image) */
.jvzoo-buy { display: block; width: min(100%, 380px); margin: 0 auto; line-height: 0; }
.jvzoo-buy img { display: block; width: 100%; height: auto; border: 0; }