/* ==========================================
   RocketToons OTO2 — Pro (Figma 648: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).
   The Elite page (elite/css/style.css) has the same structure; only the PAGE THEME
   values at the top differ.
   ========================================== */

/* ============ PAGE THEME ============ */
:root {
  --page: #fbfaf7;
  --ink: #0e1726;
  --ink-2: #16181d;
  --body: #3f4757;
  --muted: #545c6b;
  --accent: #5b57d6;                 /* script lines, feature numbers, dots */

  /* hero card */
  --hero-bg: linear-gradient(180deg, #3e6dc2 0%, #5c82d8 28%, #a5a3e8 52%, #ebdce6 78%, #f7ebdd 100%);
  --hl-bg: #fff;
  --hl-ink: #0f1a3d;
  --hl-shadow: none;
  --hl-pad: 0.139em 0.361em 0.194em; /* 10 / 26 / 14 at 72px */
  --hl-r: 0.361em;
  --title-lh: 1;
  --title-gap: 0.25em;               /* 18px between the two lines */
  --title-inline-gap: 0.278em;       /* 20px between the copy and the box */
  --sub-weight: 500;
  --sub-color: rgba(255, 255, 255, 0.92);
  --sub-track: -0.005em;
  --sub-box-fs: 0.926em;             /* 25 / 27 */
  --sub-box-pad: 0.24em 0.56em 0.28em; /* 6 / 14 / 7 at 25px */
  --cap-gap: -6px;                   /* capsules tuck 6px under the offer card */
  --badges-bg: #f2f4ff;
  --badge-bg: #dce3ff;
  --step-done: #238a78;

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

  /* 02 compare */
  --elig-hl: #e4e1fb;
  --row-stripe: #f3f1fc;
  --row-dot: #6b72d8;
  --plan-bg: linear-gradient(180deg, #3e6dc2 0%, #6a84dc 45%, #9e8fe6 80%, #b892ea 100%);
  --plan-shadow: 0 24px 50px -12px rgba(90, 100, 200, 0.35);
  --plan-blob: rgba(143, 180, 255, 0.5);

  /* 03 inside */
  --intro-glow: rgba(165, 155, 240, 0.28);

  /* 04 low payment */
  --head-grad: linear-gradient(90deg, #4d3ed6, #2839ae);
  --lead-strong: #5b57d6;
  --lead-rest: #4d3ed6;
  --lowpay-blob: rgba(126, 124, 225, 0.25);
  --app-shadow: 0 30px 60px -12px rgba(24, 21, 82, 0.22);
  --timeline-a: #c7b3f7;
  --timeline-b: #d5d4f5;
  --tag-bg: linear-gradient(160.68deg, #3e6dc2 0%, #a77fe0 71.43%);
  --tag-shadow: rgba(61, 44, 179, 0.3);
  --tag-big: #fff;

  /* 05 guarantee */
  --gtee-bg: linear-gradient(180deg, #3e6dc2 0%, #6a84dc 45%, #a58fe6 80%, #e7c7e8 100%);
  --gtee-hl-ink: #1b1552;
  --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(180deg, #3e6dc2, #a58fe6);
  --price-blob: rgba(242, 211, 233, 0.55);
  --price-chip: #c7b3f7;
  --price-shadow: 0 40px 80px -20px rgba(24, 21, 82, 0.16), 0 2px 6px rgba(24, 21, 82, 0.06);

  /* v2 sections (02b, 03b, 03c, 07) */
  --ink-3: #161829;                  /* headline ink in the v2 sections */
  --violet: #4d3ed6;                 /* kickers, FAQ numbers, check marks */
  --lav-bg: linear-gradient(165deg, #eeebff 0%, #d6d0ff 71.43%); /* lavender highlight box */
  --coral: #ff5a5a;                  /* 03c "$895" */
}
/* the pricing card's CTA uses the deep violet ink */
.price-card { --cta-ink: #1b1552; --cta-sub: rgba(27, 21, 82, 0.7); --cta-arrow-bg: #1b1552; }


/* ============ 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 (Figma "Hero card" 1808 x 1323.5 + "Video card" 1140 x 650) ============
   The card holds chip, headline, sub line and the offer card. The video card is pulled up
   into it: 55% of the video (357.5 of 650) overlaps the card, as in Figma. */
.hero {
  --vid-w: min(1140px, 100cqw - 32px);
  position: relative;
  container-type: inline-size;
  margin-top: 16px;
}
.hero-card {
  position: relative;
  margin: 0 12px;
  overflow: hidden;
  border-radius: 28px;
  background: var(--hero-bg);
  padding: 56px 16px calc(var(--vid-w) * 0.3136 + 40px);
  color: #fff;
  text-align: center;
}
@media (min-width: 1024px) {
  .hero-card {
    margin: 0 56px;
    border-radius: 48px;
    padding: 150px 24px calc(var(--vid-w) * 0.3136 + 64px);
  }
}
.hero-card > :not(.blobs, .hero-mesh, .hero-bands) { position: relative; z-index: 1; }

.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
}
.hero-chip__icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: #e3f7a8;
}
.hero-chip__icon img { width: 18px; height: 18px; }
.hero-chip__tag {
  padding: 4px 10px;
  border-radius: 6px;
  background: #ffd36b;
  font-size: 14px;
  font-weight: 600;
  color: #0e1726;
}

.hero-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--title-gap);
  margin-top: 28px;
  font-weight: 700;
  line-height: var(--title-lh);
  letter-spacing: -0.03em;
}
.hero-title__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--title-gap) var(--title-inline-gap);
}
.hl {
  display: inline-block;
  padding: var(--hl-pad);
  border-radius: var(--hl-r);
  background: var(--hl-bg);
  box-shadow: var(--hl-shadow);
  color: var(--hl-ink);
}

.hero-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
  margin-top: 30px;
  font-weight: var(--sub-weight);
  line-height: 1.2;
  letter-spacing: var(--sub-track);
  color: var(--sub-color);
}
.hero-sub .hl {
  padding: var(--sub-box-pad);
  border-radius: 12px;
  font-size: var(--sub-box-fs);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.hero-sub u { text-underline-offset: 0.12em; text-decoration-thickness: 0.06em; }

/* Faint vertical bands drifting sideways (Figma "Bands (animate)", 46px stripes) */
.hero-bands {
  position: absolute;
  inset: 0 0 1.2% 0;
  background: repeating-linear-gradient(90deg, transparent 0 46px, rgba(255, 255, 255, 0.04) 46px 92px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 50%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 50%, transparent);
  animation: bands 12s linear infinite;
  pointer-events: none;
}
@keyframes bands { to { background-position-x: 92px; } }

/* Offer card with the glass capsules either side (Figma "Capsules (animate)") */
.offer-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 40px;
}
@media (min-width: 1024px) { .offer-stage { margin-top: 74px; } }
.capsule {
  display: none;
  flex: none;
  width: 64px;
  height: 201.5px;
  border-radius: 32px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.55));
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  animation: capsule-bob 4.8s ease-in-out infinite;
}
.capsule--short { height: 161.2px; animation-delay: -1.2s; }
.capsule:nth-child(2) { animation-delay: -2.4s; }
.capsule:nth-child(4) { animation-delay: -3.6s; }
@media (min-width: 1024px) { .capsule { display: block; } }
@keyframes capsule-bob {
  0%, 100% { transform: scaleY(1); opacity: 1; }
  50%      { transform: scaleY(0.86); opacity: 0.75; }
}

.offer-card {
  position: relative;
  z-index: 1;
  flex: 0 1 auto;
  margin-inline: calc(var(--cap-gap) - 14px);
  padding: 10px;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.32);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 24px 30px rgba(11, 42, 92, 0.12);
  text-align: left;
  color: #0e1726;
}
.offer-card__inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px 20px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 2px 3px rgba(11, 42, 92, 0.06);
}
@media (min-width: 1024px) {
  .offer-card { padding: 16px; border-radius: 48px; }
  .offer-card__inner { gap: 22px; padding: 36px 40px; border-radius: 34px; }
}
.offer-card__head { display: flex; align-items: center; gap: 16px; }
.offer-card__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: #e3f7a8;
}
.offer-card__icon img { width: 38px; height: 38px; }
.offer-card__name { font-size: 30px; font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; }
.offer-card__to {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 18px;
  color: #5b6478;
}
.offer-card__to img { width: 10px; height: 10px; }
.offer-card__text { font-size: 24px; line-height: 1.4; }
.offer-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px;
  border-radius: 22px;
  background: var(--badges-bg);
}
.offer-card__badges span {
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--badge-bg);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}
@media (max-width: 1023px) {
  .offer-card__icon { width: 48px; height: 48px; border-radius: 15px; }
  .offer-card__icon img { width: 28px; height: 28px; }
  .offer-card__name { font-size: 22px; }
  .offer-card__to { font-size: 14px; }
  .offer-card__text { font-size: 17px; }
  .offer-card__badges { gap: 8px; padding: 10px; border-radius: 16px; }
  .offer-card__badges span { padding: 8px 12px; border-radius: 10px; font-size: 14px; }
}

/* 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; }
/* Launch Kit timer (launch.askankit.com/timer.js) builds .lk-cd > .lk-cd__unit > .lk-cd__num + .lk-cd__label
   inside [data-lk-timer] and hides it until its time arrives; its label line hides with it.
   The days unit only shows while more than 24 hours are left. */
.timer:has([data-lk-timer][hidden]),
.mini-timer:has([data-lk-timer][hidden]) { display: none; }
.timer .lk-cd { display: flex; align-items: flex-start; gap: 26px; }
.timer .lk-cd__unit { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.timer .lk-cd__unit + .lk-cd__unit::before,
.mini-timer .lk-cd__unit + .lk-cd__unit::before { content: ":"; position: absolute; font-weight: 700; text-align: center; }
.timer .lk-cd__unit + .lk-cd__unit::before {
  left: -21px;
  top: 0;
  width: 16px;
  height: 96px;
  font-size: 40px;
  line-height: 96px;
  color: rgba(14, 23, 38, 0.3);
}
.timer .lk-cd__unit--days[hidden] + .lk-cd__unit::before,
.mini-timer .lk-cd__unit--days[hidden] + .lk-cd__unit::before { content: none; }
.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;
  line-height: 1;
  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; text-transform: uppercase; opacity: 1; color: rgba(14, 23, 38, 0.55); }
@media (max-width: 639px) {
  .timer .lk-cd { gap: 20px; }
  .timer .lk-cd__num { width: 72px; height: 72px; border-radius: 18px; font-size: 38px; }
  .timer .lk-cd__unit + .lk-cd__unit::before { left: -17px; width: 14px; height: 72px; font-size: 30px; line-height: 72px; }
}
.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: #0e1726;
}
.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); }


/* ============ 02 VS COMMERCIAL (Figma "02 Pro vs Commercial" 1920 x 1749) ============ */
.vs { padding: 80px 0 96px; text-align: center; }
@media (min-width: 1024px) { .vs { padding: 168px 0 160px; } }
.vs__title {
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: #0e1726;
}
.vs__offer { position: relative; display: inline-block; }
.vs__swoosh {
  position: absolute;
  left: 50%;
  top: calc(100% - 0.07em);
  width: 2.29em;          /* 174 at 76px */
  height: auto;
  translate: -50% 0;
}
.vs__lead { margin-top: 44px; font-weight: 700; line-height: 1.25; color: #0e1726; }
.vs__elig { margin-top: 12px; line-height: 1.6; color: rgba(14, 23, 38, 0.85); }
.vs__elig mark {
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--elig-hl);
  font-weight: 700;
  color: #0e1726;
  white-space: nowrap;
}

/* Compare table: a grid of rows. The panel behind the features, the plan column and the
   Commercial column are absolutely placed in their grid areas, so the cells line up
   on the same row tracks. */
.cmp {
  --rows: 11;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px 84px;
  grid-template-rows: 64px repeat(var(--rows), minmax(56px, auto)) 16px;
  column-gap: 6px;
  max-width: 1392px;
  margin: 56px auto 0;
  padding: 0 12px;
  text-align: left;
}
@media (min-width: 1024px) {
  .cmp {
    grid-template-columns: minmax(0, 1fr) 230px 230px;
    grid-template-rows: 96px repeat(var(--rows), minmax(74px, auto)) 24px;
    column-gap: 12px;
    margin-top: 84px;
    padding: 0 16px;
  }
}
.cmp__panel, .cmp__plan, .cmp__com { position: absolute; inset: 0; pointer-events: none; }
.cmp__panel {
  grid-column: 1 / 3;
  grid-row: 2 / -2;
  border: 1px solid rgba(14, 23, 38, 0.09);
  border-radius: 20px 0 0 20px;
  background: #fff;
  box-shadow: 0 20px 50px -20px rgba(11, 42, 92, 0.06);
}
.cmp__plan {
  grid-column: 2 / 3;
  grid-row: 1 / -1;
  overflow: hidden;
  border-radius: 20px;
  background: var(--plan-bg);
  box-shadow: var(--plan-shadow);
}
.cmp__plan { container-type: inline-size; }
.cmp__plan .glow { --u: calc(100cqw / 230); }
.cmp__com {
  grid-column: 3 / 4;
  grid-row: 1 / -2;
  top: 14px;
  border: 1.5px solid rgba(14, 23, 38, 0.12);
  border-radius: 18px;
  background: #fff;
}
@media (min-width: 1024px) {
  .cmp__panel { border-radius: 28px 0 0 28px; }
  .cmp__plan { border-radius: 26px; }
  .cmp__com { top: 20px; border-radius: 24px; }
}

.cmp__cell { position: relative; display: flex; align-items: center; justify-content: center; }
.cmp__head { font-weight: 700; line-height: 1.2; }
.cmp__head--plan {
  gap: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 15px;
  letter-spacing: 0.04em;
  color: #fff;
}
.cmp__head--plan img { width: 20px; height: auto; }
.cmp__head--com {
  margin-top: 14px;
  border-bottom: 1px solid rgba(14, 23, 38, 0.08);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(14, 23, 38, 0.75);
}
@media (min-width: 1024px) {
  .cmp__head--plan { font-size: 24px; }
  .cmp__head--plan img { width: 26px; }
  .cmp__head--com { margin-top: 20px; font-size: 20px; }
}

.cmp__feat {
  justify-content: flex-start;
  gap: 10px;
  margin-right: -6px;
  padding: 10px 8px 10px 14px;
  font-size: 14px;
  line-height: 1.35;
  color: rgba(14, 23, 38, 0.85);
}
.cmp__feat::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--row-dot);
}
.cmp__feat b { font-weight: 700; color: #0e1726; }
.cmp__feat--stripe { background: var(--row-stripe); }
.cmp__feat--first { border-top-left-radius: 20px; }
.cmp__feat--last { border-bottom-left-radius: 20px; }
@media (min-width: 1024px) {
  .cmp__feat { gap: 18px; margin-right: -12px; padding: 12px 16px 12px 43px; font-size: 21px; }
  .cmp__feat::before { width: 8px; height: 8px; }
  .cmp__feat--first { border-top-left-radius: 27px; }
  .cmp__feat--last { border-bottom-left-radius: 27px; }
}

.cmp__plan-cell { font-size: 14px; font-weight: 700; color: #fff; }
.cmp__com-cell {
  font-size: 13px;
  font-weight: 600;
  text-decoration: line-through;
  color: #6b7486;
}
.cmp__plan-cell img { width: 24px; height: 24px; }
.cmp__com-cell img { width: 22px; height: 22px; }
/* row separators */
.cmp__plan-cell + .cmp__com-cell + .cmp__feat + .cmp__plan-cell::before,
.cmp__plan-cell + .cmp__com-cell + .cmp__feat + .cmp__plan-cell + .cmp__com-cell::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12px;
  right: 12px;
  height: 1px;
}
.cmp__plan-cell + .cmp__com-cell + .cmp__feat + .cmp__plan-cell::before { background: rgba(255, 255, 255, 0.1); }
.cmp__plan-cell + .cmp__com-cell + .cmp__feat + .cmp__plan-cell + .cmp__com-cell::before { background: rgba(14, 23, 38, 0.06); }
@media (min-width: 1024px) {
  .cmp__plan-cell { font-size: 20px; }
  .cmp__com-cell { font-size: 18px; }
  .cmp__plan-cell img { width: 32px; height: 32px; }
  .cmp__com-cell img { width: 30px; height: 30px; }
  .cmp__plan-cell + .cmp__com-cell + .cmp__feat + .cmp__plan-cell::before { left: 20px; right: 20px; }
  .cmp__plan-cell + .cmp__com-cell + .cmp__feat + .cmp__plan-cell + .cmp__com-cell::before { left: 18.5px; right: 18.5px; }
}


/* ============ V2 SHARED: section headline with the lavender box on its second line ============ */
.sec-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.03em;
  text-align: center;
  color: var(--ink-3);
}
.lav {
  display: inline-block;
  padding: 0.033em 0.3em;             /* 2 / 18 at 60px */
  border-radius: 0.34em;              /* 20.4 at 60px */
  background: var(--lav-bg);
  white-space: nowrap;
}


/* ============ 02b SEE THE DIFFERENCE (Figma "02b See the difference — Standard vs Pro" 1920 x 1098) ============
   Title, sub line, the 1280 x 720 before/after slider, three check points under it. */
.diff { padding: 60px 0 56px; text-align: center; }
@media (min-width: 1024px) { .diff { padding: 116px 0 111px; } }
.diff__sub { max-width: 860px; margin: 16px auto 0; line-height: 1.52; color: var(--muted); }
@media (min-width: 1024px) { .diff__sub { margin-top: 22px; } }

/* --p is the split (0–100%). Left of it: the Commercial render (blurred), right of it: the Pro render. */
.diff__slider {
  position: relative;
  width: min(1280px, 100% - 32px);
  aspect-ratio: 16 / 9;
  margin: 36px auto 0;
  overflow: hidden;
  border-radius: 20px;
  background: #0e1726;
  box-shadow: 0 30px 30px rgba(27, 36, 64, 0.18);
  cursor: ew-resize;
  touch-action: pan-y;
  -webkit-user-select: none;
          user-select: none;
}
@media (min-width: 1024px) { .diff__slider { margin-top: 60px; border-radius: 40px; } }
.diff__slider img { pointer-events: none; }
.diff__pro, .diff__std, .diff__std img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.diff__std { clip-path: inset(0 calc(100% - var(--p)) 0 0); }
.diff__std img { filter: blur(1.5px); scale: 1.01; }
.diff__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--p);
  width: 4px;
  background: #fff;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.35);
  translate: -50% 0;
}
.diff__knob {
  position: absolute;
  left: var(--p);
  top: 50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.3));
  translate: -50% -50%;
}
.diff__knob img { width: 22px; height: auto; }
@media (min-width: 1024px) {
  .diff__knob { width: 64px; height: 64px; }
  .diff__knob img { width: 32px; }
}
.diff__pill {
  position: absolute;
  top: 12px;
  padding: 5px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.06em;
}
.diff__pill--std { left: 12px; background: #fff; color: var(--ink-3); }
.diff__pill--pro { right: 12px; background: linear-gradient(153deg, #7b74f0 0%, #4d3ed6 71.43%); color: #fff; }
@media (min-width: 1024px) {
  .diff__pill { top: 28px; padding: 7px 14px; font-size: 13px; }
  .diff__pill--std { left: 28px; }
  .diff__pill--pro { right: 28px; }
}

.diff__points {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px 14px;
  width: min(1280px, 100% - 32px);
  margin: 32px auto 0;
  text-align: left;
}
@media (min-width: 768px) { .diff__points { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 40px; } }
.diff__points li { display: flex; align-items: flex-start; gap: 14px; }
.diff__check {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(77, 62, 214, 0.12);
}
.diff__check img { width: 16px; height: 16px; }
.diff__point { display: flex; flex-direction: column; gap: 2px; }
.diff__point b { font-size: 19px; font-weight: 700; line-height: 1.27; letter-spacing: -0.015em; color: var(--ink-3); }
.diff__point span { font-size: 15px; font-weight: 500; line-height: 1.25; color: var(--muted); }
@media (min-width: 1024px) {
  .diff__point b { font-size: 22px; }
  .diff__point span { font-size: 17px; }
}


/* ============ 03 INSIDE (Figma "03 Inside Pro": intro 1360 x 720, then feature rows) ============
   Each row: a 760 x 676 stage on one side, the 500-wide copy on the other, 100 apart,
   alternating; stages 160 apart. Phones: stage on top, copy under it. */
.inside {
  position: relative;
  container-type: inline-size;
  overflow-x: clip;
  padding: 24px 0 96px;
}
@media (min-width: 1024px) { .inside { padding: 40px 0 200px; } }

.intro {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 16px;
}
.intro__copy { position: relative; z-index: 1; max-width: 620px; }
.intro-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 10px 14px;
  border-radius: 16px;
  background: rgba(22, 24, 29, 0.06);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--ink-2);
}
.intro-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.intro__title {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  line-height: 1;
}
.intro__title span:first-child { font-weight: 700; letter-spacing: -0.035em; color: var(--ink-2); }
.intro__script { margin-top: -0.04em; font-family: var(--font-script); font-weight: 400; color: var(--accent); }
.intro__text { margin-top: 24px; font-size: 18px; line-height: 1.5; color: var(--muted); }
.intro__art { position: relative; width: min(100%, 420px); container-type: inline-size; }
.intro__art .glow { --u: calc(100cqw / 544); }
.intro__box { position: relative; display: block; width: 100%; height: auto; }
@media (min-width: 1024px) {
  .intro { display: block; height: 720px; }
  .intro__copy { padding-top: 170px; }
  .intro__title { margin-top: 21px; white-space: nowrap; }
  .intro__text { margin-top: 26px; font-size: 22px; }
  .intro__art { position: absolute; left: var(--box-x); top: var(--box-y); width: 544px; }
}

.frow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  max-width: 1360px;
  margin: 72px auto 0;
  padding: 0 16px;
}
.intro + .frow { margin-top: 48px; }
@media (min-width: 1024px) {
  .frow {
    flex-direction: row;
    justify-content: space-between;
    gap: 100px;
    margin-top: 160px;
    box-sizing: content-box;
  }
  .intro + .frow { margin-top: 180px; }
  .frow--vis-right { flex-direction: row-reverse; }
}

.fvis {
  --f: calc(min(760px, 100cqw - 32px) / 760);
  position: relative;
  flex: none;
  width: calc(760 * var(--f));
  height: calc(676 * var(--f));
  -webkit-user-select: none;
          user-select: none;
  cursor: default;
}
@media (min-width: 1024px) {
  .fvis { --f: calc(min(760px, (100cqw - 132px) * 0.6032) / 760); }
}
.fstage { position: absolute; inset: 0; }

.fcopy { width: 100%; max-width: 640px; }
@media (min-width: 1024px) { .fcopy { flex: 0 1 500px; max-width: 500px; } }
.fcopy__num { font-size: 15px; font-weight: 600; line-height: 1.2; color: var(--accent); }
.fcopy__title {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--ink-2);
}
.fcopy__script {
  font-family: var(--font-script);
  font-size: 1.1667em;      /* 56 / 48 */
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: 0;
  color: var(--accent);
}
.fcopy__text { margin-top: 18px; font-size: 17px; line-height: 1.5; color: var(--muted); }
@media (min-width: 1024px) {
  .fcopy__title { margin-top: 20px; font-size: 48px; }
  .fcopy__text { margin-top: 22px; font-size: 20px; }
}


/* ============ 03b WHAT YOU CAN MAKE WITH PRO (Figma "03b What you can make with Pro — bento" 1920 x 1198) ============
   A 4-column grid, 1280 wide: tiles are 302 (one column) or 628 (two) wide and 300 tall, 24 apart; the
   client tile spans two rows. Inside a tile everything sits in Figma px of the tile and scales with
   its width (--t). Under 1024 the grid is two columns wide; the wide tiles span both. */
.bento { padding: 72px 0 0; }
@media (min-width: 1024px) { .bento { padding-top: 140px; } }
.bento__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: min(1280px, 100% - 32px);
  margin: 40px auto 0;
}
.tile--client, .tile--series, .tile--team, .tile--trailers { grid-column: span 2; }
@media (min-width: 1024px) {
  .bento__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 80px; }
  .tile--client { grid-column: 1 / 3; grid-row: 1 / 3; }
  .tile--series { grid-column: 3 / 5; grid-row: 1; }
  .tile--voice { grid-column: 3; grid-row: 2; }
  .tile--ads { grid-column: 4; grid-row: 2; }
  .tile--team { grid-column: 1 / 3; grid-row: 3; }
  .tile--trailers { grid-column: 3 / 5; grid-row: 3; }
}

.tile {
  --t: calc(100cqw / 628);
  position: relative;
  overflow: hidden;
  aspect-ratio: 628 / 300;
  border-radius: 24px;
  container-type: inline-size;
  color: var(--ink-3);
}
@media (min-width: 1024px) { .tile { border-radius: 44px; } }
.tile--client { aspect-ratio: 628 / 624; }
@media (min-width: 1024px) { .tile--client { aspect-ratio: auto; } }
.tile--voice, .tile--ads { --t: calc(100cqw / 302); aspect-ratio: 302 / 300; }
.tile--client { background: linear-gradient(135deg, #7b74f0 0%, #4d3ed6 71.43%); color: #fff; }
.tile--series { background: linear-gradient(154deg, #ffd9e8 0%, #ffb3cf 71.43%); }
.tile--voice { background: linear-gradient(135deg, #c9ecff 0%, #8ed0ff 71.43%); }
.tile--ads { background: linear-gradient(135deg, #fff3c4 0%, #ffe08a 71.43%); }
.tile--team { background: linear-gradient(154deg, #c6f99a 0%, #9fe07a 71.43%); }
.tile--trailers { background: #141826; color: #fff; }

.tile__kicker {
  position: absolute;
  left: calc(40 * var(--t));
  top: calc(40 * var(--t));
  font-size: max(10px, calc(13 * var(--t)));
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.12em;
  color: rgba(22, 24, 41, 0.55);
}
.tile--client .tile__kicker, .tile--trailers .tile__kicker { color: rgba(255, 255, 255, 0.7); }
.tile__title {
  position: absolute;
  left: calc(40 * var(--t));
  top: calc(76 * var(--t));
  width: calc(290 * var(--t));
  font-size: max(20px, calc(40 * var(--t)));
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.tile--client .tile__title { width: calc(420 * var(--t)); font-size: max(24px, calc(52 * var(--t))); line-height: 1.096; }
.tile--voice .tile__title, .tile--ads .tile__title { top: calc(70 * var(--t)); width: calc(222 * var(--t)); font-size: max(16px, calc(30 * var(--t))); }
@media (max-width: 639px) { .tile--voice .tile__title, .tile--ads .tile__title { width: calc(240 * var(--t)); } }

/* Tilted photo with its white frame */
.tile__photo {
  position: absolute;
  overflow: hidden;
  box-sizing: border-box;
  border: calc(6 * var(--t)) solid #fff;
  box-shadow: 0 calc(24 * var(--t)) calc(48 * var(--t)) calc(-10 * var(--t)) rgba(20, 24, 38, 0.25);
}
.tile__photo img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.tile--client .tile__photo { left: calc(166 * var(--t)); top: calc(340 * var(--t)); width: calc(470 * var(--t)); height: calc(330 * var(--t)); border-radius: calc(34 * var(--t)); rotate: 4deg; }
.tile--client .tile__photo img { border-radius: calc(28 * var(--t)); }
.tile--series .tile__photo { left: calc(355.4 * var(--t)); top: calc(31 * var(--t)); width: calc(250 * var(--t)); height: calc(220 * var(--t)); border-radius: calc(26 * var(--t)); rotate: -4deg; }
.tile--ads .tile__photo { left: calc(25.9 * var(--t)); top: calc(180.2 * var(--t)); width: calc(242 * var(--t)); height: calc(150 * var(--t)); border-radius: calc(22 * var(--t)); rotate: 3deg; }
.tile--team .tile__photo { left: calc(342 * var(--t)); top: calc(46.4 * var(--t)); width: calc(250 * var(--t)); height: calc(220 * var(--t)); border-radius: calc(26 * var(--t)); rotate: 3deg; }
.tile--trailers .tile__photo { left: calc(353.6 * var(--t)); top: calc(51.1 * var(--t)); width: calc(250 * var(--t)); height: calc(170 * var(--t)); border: 0; border-radius: calc(26 * var(--t)); rotate: -4deg; }
.tile--series .tile__photo img, .tile--team .tile__photo img { border-radius: calc(20 * var(--t)); }
.tile--ads .tile__photo img { border-radius: calc(16 * var(--t)); }

.tile__pill {
  position: absolute;
  left: calc(40 * var(--t));
  bottom: calc(40 * var(--t));
  padding: calc(8 * var(--t)) calc(14 * var(--t));
  border-radius: 99px;
  background: #fff;
  filter: drop-shadow(0 calc(8 * var(--t)) calc(9 * var(--t)) rgba(20, 24, 38, 0.18));
  font-size: max(10px, calc(13 * var(--t)));
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  color: var(--ink-3);
}
.tile__pill--lav { background: var(--lav-bg); }
.tile__pill--gold { background: linear-gradient(169deg, #ffe08a 0%, #ffc94d 71.43%); }
/* the three scattered pills on the Voiceovers tile */
.tile__pill--a { bottom: auto; top: calc(158 * var(--t)); rotate: 3deg; }
.tile__pill--b { bottom: auto; left: calc(54 * var(--t)); top: calc(193 * var(--t)); rotate: -2deg; }
.tile__pill--c { bottom: auto; left: calc(67 * var(--t)); top: calc(238 * var(--t)); rotate: 2deg; }


/* ============ 03c WHAT PRO REPLACES (Figma "03c What Pro replaces — receipt" 1920 x 876) ============
   Copy on the left (600 wide), the tilted receipt picture on the right (its box is 656.5 x 839 with
   the shadow, the receipt itself 20 in from the top), the stamp over its lower-left corner. */
.replace { padding: 80px 0 64px; overflow-x: clip; }
@media (min-width: 1024px) { .replace { padding: 200px 0 100px; } }
.replace__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: min(1280px, 100% - 32px);
  margin: 0 auto;
}
.replace__copy { width: 100%; max-width: 600px; color: var(--ink-3); }
.replace__kicker { font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 0.14em; color: var(--violet); }
.replace__title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-top: 12px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.03em;
}
.replace__line2 { display: flex; align-items: center; gap: 0.233em; white-space: nowrap; }  /* 14 at 60px */
.replace__text { max-width: 540px; margin-top: 20px; font-size: 18px; line-height: 1.52; color: var(--muted); }
.replace__price {
  margin: 28px 0 0 -0.04em;
  font-size: 100px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.06em;
  color: var(--coral);
}
.replace__swoosh { display: block; width: 218px; max-width: 100%; height: auto; margin-top: -10px; }
.replace__every { margin-top: -4px; font-family: var(--font-script); font-size: 44px; line-height: 1.24; }
@media (min-width: 1024px) {
  .replace__body { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 0; }
  .replace__copy { flex: 0 1 600px; padding-top: 66px; }
  .replace__title { margin-top: 12px; }
  .replace__text { margin-top: 24px; font-size: 21px; }
  .replace__price { margin-top: 40px; font-size: 150px; }
  .replace__swoosh { width: 326px; margin-top: -12px; }
  .replace__every { font-size: 58px; }
}

.replace__art { position: relative; flex: none; width: min(100%, 560px); aspect-ratio: 656.5 / 839; }
@media (min-width: 1024px) { .replace__art { width: min(656.5px, 46%); margin-right: max(-50px, -3.5%); } }
.replace__receipt { position: absolute; inset: 0; width: 100%; height: 100%; }
.replace__stamp { position: absolute; left: -3.5%; top: 58.3%; width: 31.45%; height: auto; }
@media (min-width: 1024px) { .replace__stamp { left: -6.1%; } }

.replace__close {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.2em 0.41em;                  /* 14 at 34px */
  margin-top: 40px;
  padding: 0 16px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--ink-3);
}
.replace__close .lav { letter-spacing: -0.03em; }
@media (min-width: 1024px) { .replace__close { margin-top: 32px; } }
@media (min-width: 1280px) { .replace__close { margin-top: -10px; } }  /* the art is the taller column: 829 vs its 839 */


/* ============ 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; } }
.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;
}
.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); }

/* 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; }
}


/* ============ 05 GUARANTEE (Figma "05 Guarantee": card 1808 x 838) ============ */
.gtee { padding-bottom: 36px; }
.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;
}
.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 96px; }
@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); }
.mini-timer .lk-cd { display: flex; align-items: center; gap: 22px; }
.mini-timer .lk-cd__unit { position: relative; display: flex; min-width: 0; }
.mini-timer .lk-cd__unit + .lk-cd__unit::before { left: -16px; top: 50%; width: 10px; transform: translateY(-50%); font-size: 20px; line-height: 1; color: rgba(22, 24, 29, 0.3); }
.mini-timer .lk-cd__num { padding: 6px 10px; border-radius: 10px; background: rgba(22, 24, 29, 0.05); font-size: 20px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.mini-timer .lk-cd__label { display: none; }
.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 772) ============
   The "No thanks" link, the headline, then six questions in two columns of 610 (60 apart) on
   desktop, one column on phones. Every answer is visible. */
.faq { padding: 0 0 96px; }
@media (min-width: 1024px) { .faq { padding-bottom: 200px; } }
.faq__skip { padding: 0 16px; font-size: 15px; font-weight: 500; line-height: 1.3; text-align: center; color: #8a8f9c; }
.faq__skip a { color: inherit; text-decoration: underline; text-underline-offset: 0.12em; }
.faq__skip a:hover { color: var(--ink-3); }
.faq .sec-head { margin-top: 64px; }
@media (min-width: 1024px) {
  .faq__skip { font-size: 17px; }
  .faq .sec-head { margin-top: 120px; }
}
.faq__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 60px;
  width: min(1280px, 100% - 32px);
  margin: 40px auto 0;
}
@media (min-width: 768px) { .faq__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .faq__list { margin-top: 70px; } }
.faq__item { border-top: 1.5px solid rgba(22, 24, 41, 0.1); padding: 20px 0 26px; }
@media (min-width: 1024px) { .faq__item { padding: 26px 0 34px; } }
.faq__item dt { display: flex; align-items: flex-start; font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--ink-3); }
.faq__item dt span {
  flex: none;
  width: 36px;
  padding-top: 0.2em;
  font-size: 14px;
  line-height: 1.25;
  letter-spacing: 0.1em;
  color: var(--violet);
}
.faq__item dd { margin: 8px 0 0 36px; font-size: 16px; line-height: 1.5; color: var(--muted); }
@media (min-width: 1024px) {
  .faq__item dt { font-size: 23px; line-height: 1.3; }
  .faq__item dt span { width: 50px; }
  .faq__item dd { margin: 10px 0 0 50px; font-size: 18px; }
}


/* ============ STAGES (feature visuals, merged from parts) ============ */
/* ============ FEATURE STAGES ============ */

/* ---- Pro 01: Pro Video Engine — Standard (stiff, silent) vs Pro (smooth, with sound) ----
   Figma 708:140. Motion: the Standard shots twitch in choppy steps, the Pro frames bob
   smoothly, the dotted motion path marches toward its arrow and the clip-audio bars play. */
.fs-01 {
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, #e9ecff 0%, #c3ccf7 33.333%, #8c9bea 66.667%, #4e62c9 100%);
  /* Figma: radius 101 with corner smoothing (same squircle as special/'s stages) */
  -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 760 676" preserveAspectRatio="none"><path d="M557.34 0 c95.53 0 143.3 0 172.98 29.68 c29.68 29.68 29.68 77.45 29.68 172.98 L760 473.34 c0 95.53 0 143.3 -29.68 172.98 c-29.68 29.68 -77.45 29.68 -172.98 29.68 L202.66 676 c-95.53 0 -143.3 0 -172.98 -29.68 c-29.68 -29.68 -29.68 -77.45 -29.68 -172.98 L0 202.66 c0 -95.53 0 -143.3 29.68 -172.98 c29.68 -29.68 77.45 -29.68 172.98 -29.68 Z"/></svg>') 0 0 / 100% 100% no-repeat;
          mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 760 676" preserveAspectRatio="none"><path d="M557.34 0 c95.53 0 143.3 0 172.98 29.68 c29.68 29.68 29.68 77.45 29.68 172.98 L760 473.34 c0 95.53 0 143.3 -29.68 172.98 c-29.68 29.68 -77.45 29.68 -172.98 29.68 L202.66 676 c-95.53 0 -143.3 0 -172.98 -29.68 c-29.68 -29.68 -29.68 -77.45 -29.68 -172.98 L0 202.66 c0 -95.53 0 -143.3 29.68 -172.98 c29.68 -29.68 77.45 -29.68 172.98 -29.68 Z"/></svg>') 0 0 / 100% 100% no-repeat;
}
.fs-01 img { position: absolute; display: block; max-width: none; -webkit-user-drag: none; }
.fs-01 p { position: absolute; margin: 0; line-height: normal; white-space: nowrap; }

/* Blurred ellipses (Figma: layer blur, stdDeviation 55) */
.fs-01 .fs01-glow { position: absolute; border-radius: 50%; filter: blur(calc(55 * var(--f))); pointer-events: none; }
.fs-01 .fs01-glow--a { left: calc(-120 * var(--f)); top: calc(520 * var(--f)); width: calc(560 * var(--f)); height: calc(280 * var(--f)); background: #3e58c0b3; }
.fs-01 .fs01-glow--b { left: calc(260 * var(--f)); top: calc(520 * var(--f)); width: calc(620 * var(--f)); height: calc(300 * var(--f)); background: #7286e3b3; }
.fs-01 .fs01-glow--c { left: calc(480 * var(--f)); top: calc(120 * var(--f)); width: calc(360 * var(--f)); height: calc(260 * var(--f)); background: #e7c7f080; }
.fs-01 .fs01-glow--d { left: calc(-150 * var(--f)); top: calc(-140 * var(--f)); width: calc(620 * var(--f)); height: calc(320 * var(--f)); background: #ffffffd9; }

/* Glass panels */
.fs-01 .fs01-panel {
  position: absolute;
  left: calc(70 * var(--f));
  width: calc(620 * var(--f));
  overflow: hidden;
  border: calc(1.5 * var(--f)) solid #fff;
  border-radius: calc(28 * var(--f));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(242, 240, 255, 0.93));
  -webkit-backdrop-filter: blur(calc(12 * var(--f)));
          backdrop-filter: blur(calc(12 * var(--f)));
  box-shadow: 0 calc(2 * var(--f)) calc(6 * var(--f)) rgba(42, 47, 110, 0.05),
              0 calc(24 * var(--f)) calc(48 * var(--f)) calc(-12 * var(--f)) rgba(42, 47, 110, 0.18);
}
.fs-01 .fs01-panel--std { top: calc(70 * var(--f)); height: calc(200 * var(--f)); }
.fs-01 .fs01-panel--pro { top: calc(300 * var(--f)); height: calc(290 * var(--f)); }

.fs-01 .fs01-std-title { left: calc(22.5 * var(--f)); top: calc(18.5 * var(--f)); font-size: calc(14 * var(--f)); font-weight: 700; color: #6b7486; }
.fs-01 .fs01-std-note { left: calc(102.5 * var(--f)); top: calc(19.5 * var(--f)); font-size: calc(13 * var(--f)); font-weight: 500; color: rgba(107, 116, 134, 0.8); }
.fs-01 .fs01-mute { left: calc(572.5 * var(--f)); top: calc(16.5 * var(--f)); width: calc(22 * var(--f)); height: calc(22 * var(--f)); }

/* Standard shots: tilted, faded, each a different crop of the same still */
.fs-01 .fs01-shot {
  position: absolute;
  width: calc(132 * var(--f));
  height: calc(124 * var(--f));
  overflow: hidden;
  border-radius: calc(14 * var(--f));
  opacity: 0.85;
}
.fs-01 .fs01-shot img { width: 125%; height: 125%; object-fit: cover; }
.fs-01 .fs01-shot--s1 { left: calc(19.165 * var(--f)); top: calc(53.869 * var(--f)); rotate: 3deg; }
.fs-01 .fs01-shot--s1 img { left: -2.5%; top: -10%; }
.fs-01 .fs01-shot--s2 { left: calc(170.62 * var(--f)); top: calc(48.156 * var(--f)); rotate: -2deg; }
.fs-01 .fs01-shot--s2 img { left: -17.5%; top: -2.5%; }
.fs-01 .fs01-shot--s3 { left: calc(312.29 * var(--f)); top: calc(52.77 * var(--f)); rotate: 2deg; }
.fs-01 .fs01-shot--s3 img { left: -5%; top: -15%; }
.fs-01 .fs01-shot--s4 { left: calc(463.65 * var(--f)); top: calc(46.96 * var(--f)); rotate: -3deg; }
.fs-01 .fs01-shot--s4 img { left: -20%; top: -5%; }

/* Pro side */
.fs-01 .fs01-pill {
  display: flex;
  align-items: center;
  padding: calc(6 * var(--f)) calc(12 * var(--f));
  border-radius: calc(99 * var(--f));
  font-size: calc(13 * var(--f));
  font-weight: 700;
  color: #fff;
}
.fs-01 .fs01-pill--pro { left: calc(22.5 * var(--f)); top: calc(16.5 * var(--f)); background: #5b57d6; }
.fs-01 .fs01-pill--vs { left: calc(359 * var(--f)); top: calc(270 * var(--f)); background: #16181d; }
.fs-01 .fs01-pro-note { left: calc(183.5 * var(--f)); top: calc(22.5 * var(--f)); font-size: calc(13 * var(--f)); font-weight: 500; color: rgba(22, 24, 29, 0.75); }

.fs-01 .fs01-frame {
  position: absolute;
  top: calc(58.5 * var(--f));
  width: calc(132 * var(--f));
  height: calc(124 * var(--f));
  border: calc(3 * var(--f)) solid #5b57d6;
  border-radius: calc(14 * var(--f));
}
.fs-01 .fs01-frame img { inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: calc(14 * var(--f)); }
.fs-01 .fs01-frame--p1 { left: calc(22.5 * var(--f)); }
.fs-01 .fs01-frame--p2 { left: calc(168.5 * var(--f)); }
.fs-01 .fs01-frame--p3 { left: calc(314.5 * var(--f)); }
.fs-01 .fs01-frame--p4 { left: calc(460.5 * var(--f)); }

.fs-01 .fs01-path {
  position: absolute;
  left: calc(18.5 * var(--f));
  top: calc(188.5 * var(--f));
  width: calc(580 * var(--f));
  height: calc(24 * var(--f));
  overflow: visible;
}

/* Clip audio: 71 bars, 4 wide, 8 apart, centred on a 50-high strip */
.fs-01 .fs01-wave {
  position: absolute;
  left: calc(22.5 * var(--f));
  top: calc(220.5 * var(--f));
  width: calc(572 * var(--f));
  height: calc(50 * var(--f));
}
.fs-01 .fs01-wave i {
  position: absolute;
  left: calc(var(--i) * 8 * var(--f));
  top: calc((50 - var(--h)) / 2 * var(--f));
  width: calc(4 * var(--f));
  height: calc(var(--h) * var(--f));
  border-radius: calc(2 * var(--f));
  background: rgba(91, 87, 214, 0.85);
}

/* ---- motion (only while on screen) ---- */
@media (prefers-reduced-motion: no-preference) {
  .fvis.is-live .fs-01 .fs01-shot { animation: fs01-stutter 1.1s steps(1, end) infinite; }
  .fvis.is-live .fs-01 .fs01-shot--s2 { animation-delay: -0.3s; }
  .fvis.is-live .fs-01 .fs01-shot--s3 { animation-delay: -0.6s; }
  .fvis.is-live .fs-01 .fs01-shot--s4 { animation-delay: -0.85s; }

  .fvis.is-live .fs-01 .fs01-frame { animation: fs01-glide 2.4s ease-in-out infinite; }
  .fvis.is-live .fs-01 .fs01-frame--p2 { animation-delay: -0.6s; }
  .fvis.is-live .fs-01 .fs01-frame--p3 { animation-delay: -1.2s; }
  .fvis.is-live .fs-01 .fs01-frame--p4 { animation-delay: -1.8s; }

  .fvis.is-live .fs-01 .fs01-path__dots { animation: fs01-march 0.6s linear infinite; }

  .fvis.is-live .fs-01 .fs01-wave i {
    transform-origin: 50% 50%;
    animation: fs01-wave 0.9s ease-in-out infinite alternate;
    animation-delay: calc(var(--i) * -0.11s);
  }
}
@keyframes fs01-stutter {
  0%   { translate: 0 0; }
  33%  { translate: calc(2 * var(--f)) calc(-1.5 * var(--f)); }
  66%  { translate: calc(-1.5 * var(--f)) calc(1 * var(--f)); }
}
@keyframes fs01-glide {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 calc(-4 * var(--f)); }
}
@keyframes fs01-march {
  to { stroke-dashoffset: -10; }
}
@keyframes fs01-wave {
  from { transform: scaleY(1); }
  to   { transform: scaleY(0.45); }
}

/* ---- Pro 02: Pro Image Quality — before/after slider over one still, plus a loupe ----
   Figma 708:218. --p is the split, in Figma px from the still's left edge (248 at rest).
   js (stage-02) drags the handle back and forth while the stage is on screen. */
.fs-02 {
  --p: 248;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, #f3eeff 0%, #dcd3fa 33.333%, #a99bee 66.667%, #6a5acd 100%);
  -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 760 676" preserveAspectRatio="none"><path d="M557.34 0 c95.53 0 143.3 0 172.98 29.68 c29.68 29.68 29.68 77.45 29.68 172.98 L760 473.34 c0 95.53 0 143.3 -29.68 172.98 c-29.68 29.68 -77.45 29.68 -172.98 29.68 L202.66 676 c-95.53 0 -143.3 0 -172.98 -29.68 c-29.68 -29.68 -29.68 -77.45 -29.68 -172.98 L0 202.66 c0 -95.53 0 -143.3 29.68 -172.98 c29.68 -29.68 77.45 -29.68 172.98 -29.68 Z"/></svg>') 0 0 / 100% 100% no-repeat;
          mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 760 676" preserveAspectRatio="none"><path d="M557.34 0 c95.53 0 143.3 0 172.98 29.68 c29.68 29.68 29.68 77.45 29.68 172.98 L760 473.34 c0 95.53 0 143.3 -29.68 172.98 c-29.68 29.68 -77.45 29.68 -172.98 29.68 L202.66 676 c-95.53 0 -143.3 0 -172.98 -29.68 c-29.68 -29.68 -29.68 -77.45 -29.68 -172.98 L0 202.66 c0 -95.53 0 -143.3 29.68 -172.98 c29.68 -29.68 77.45 -29.68 172.98 -29.68 Z"/></svg>') 0 0 / 100% 100% no-repeat;
}
.fs-02 img { position: absolute; display: block; max-width: none; -webkit-user-drag: none; }
.fs-02 p { position: absolute; margin: 0; line-height: normal; white-space: nowrap; }

.fs-02 .fs02-glow { position: absolute; border-radius: 50%; filter: blur(calc(55 * var(--f))); pointer-events: none; }
.fs-02 .fs02-glow--a { left: calc(-120 * var(--f)); top: calc(520 * var(--f)); width: calc(560 * var(--f)); height: calc(280 * var(--f)); background: #5a4bc0b3; }
.fs-02 .fs02-glow--b { left: calc(260 * var(--f)); top: calc(520 * var(--f)); width: calc(620 * var(--f)); height: calc(300 * var(--f)); background: #8e7fe6b3; }
.fs-02 .fs02-glow--c { left: calc(-60 * var(--f)); top: calc(140 * var(--f)); width: calc(360 * var(--f)); height: calc(260 * var(--f)); background: #ffd9ec80; }
.fs-02 .fs02-glow--d { left: calc(-150 * var(--f)); top: calc(-140 * var(--f)); width: calc(620 * var(--f)); height: calc(320 * var(--f)); background: #ffffffd9; }

.fs-02 .fs02-still {
  position: absolute;
  left: calc(120 * var(--f));
  top: calc(110 * var(--f));
  width: calc(520 * var(--f));
  height: calc(440 * var(--f));
  overflow: hidden;
  border: calc(1.5 * var(--f)) solid #fff;
  border-radius: calc(30 * var(--f));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(244, 240, 255, 0.93));
  -webkit-backdrop-filter: blur(calc(12 * var(--f)));
          backdrop-filter: blur(calc(12 * var(--f)));
  box-shadow: inset 0 calc(2 * var(--f)) calc(2 * var(--f)) #fff,
              0 calc(2 * var(--f)) calc(6 * var(--f)) rgba(42, 47, 110, 0.05),
              0 calc(24 * var(--f)) calc(48 * var(--f)) calc(-12 * var(--f)) rgba(42, 47, 110, 0.18);
}
.fs-02 .fs02-still__img {
  left: calc(10.5 * var(--f));
  top: calc(10.5 * var(--f));
  width: calc(496 * var(--f));
  height: calc(416 * var(--f));
  object-fit: cover;
  border-radius: calc(22 * var(--f));
}
/* Left of the split: the same still, blurred (Figma: blur 3) */
.fs-02 .fs02-blur {
  position: absolute;
  left: calc(10.5 * var(--f));
  top: calc(10.5 * var(--f));
  width: calc(var(--p) * var(--f));
  height: calc(416 * var(--f));
  overflow: hidden;
  border-radius: calc(22 * var(--f)) 0 0 calc(22 * var(--f));
}
.fs-02 .fs02-blur img {
  left: 0;
  top: 0;
  width: calc(496 * var(--f));
  height: calc(416 * var(--f));
  object-fit: cover;
  filter: blur(calc(3 * var(--f)));
}
.fs-02 .fs02-divider {
  position: absolute;
  left: calc((8.5 + var(--p)) * var(--f));
  top: calc(10.5 * var(--f));
  width: calc(4 * var(--f));
  height: calc(416 * var(--f));
  background: #fff;
}
.fs-02 .fs02-handle {
  position: absolute;
  left: calc((var(--p) - 9.5) * var(--f));
  top: calc(198.5 * var(--f));
  width: calc(40 * var(--f));
  height: calc(40 * var(--f));
  border-radius: calc(20 * var(--f));
  background: #fff;
  filter: drop-shadow(0 calc(4 * var(--f)) calc(6 * var(--f)) rgba(42, 47, 110, 0.3));
}
.fs-02 .fs02-handle span {
  position: absolute;
  left: calc(14.5 * var(--f));
  top: calc(8.5 * var(--f));
  font-size: calc(18 * var(--f));
  font-weight: 700;
  line-height: normal;
  color: #16181d;
}
.fs-02 .fs02-pill {
  display: flex;
  align-items: center;
  top: calc(24.5 * var(--f));
  padding: calc(6 * var(--f)) calc(12 * var(--f));
  border-radius: calc(99 * var(--f));
  font-size: calc(12 * var(--f));
  font-weight: 700;
}
.fs-02 .fs02-pill--std { left: calc(24.5 * var(--f)); background: rgba(22, 24, 29, 0.7); color: #fff; }
.fs-02 .fs02-pill--pro { left: calc(355.5 * var(--f)); background: #fff; color: #16181d; }

/* Loupe: a 700 x 590 copy of the still behind a 190 circle */
.fs-02 .fs02-loupe {
  position: absolute;
  left: calc(520 * var(--f));
  top: calc(380 * var(--f));
  width: calc(190 * var(--f));
  height: calc(190 * var(--f));
  overflow: hidden;
  border: calc(6 * var(--f)) solid #fff;
  border-radius: calc(95 * var(--f));
  background: #fff;
  box-shadow: 0 calc(16 * var(--f)) calc(30 * var(--f)) calc(-6 * var(--f)) rgba(42, 47, 110, 0.3);
}
.fs-02 .fs02-loupe img {
  left: calc(-336 * var(--f));
  top: calc(-166 * var(--f));
  width: calc(700 * var(--f));
  height: calc(590 * var(--f));
  object-fit: cover;
}
.fs-02 .fs02-tag {
  display: flex;
  align-items: center;
  left: calc(560 * var(--f));
  top: calc(590 * var(--f));
  padding: calc(6 * var(--f)) calc(12 * var(--f));
  border-radius: calc(99 * var(--f));
  background: #16181d;
  font-size: calc(13 * var(--f));
  font-weight: 700;
  color: #fff;
}

@media (prefers-reduced-motion: no-preference) {
  .fvis.is-live .fs-02 .fs02-loupe { animation: fs02-bob 4s ease-in-out infinite; }
}
@keyframes fs02-bob {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 calc(-6 * var(--f)); }
}

/* ---- Pro 03: 6 more cinematic styles — a fan of seven style cards ----
   Figma 708:246. Each card sits at its Figma box (--x/--y, unrotated) turned by --r.
   Motion: a lift runs through the fan, card by card, while the stage is on screen. */
.fs-03 {
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, #fff1f6 0%, #f6d6e8 33.333%, #c9b2f0 66.667%, #7c6bd9 100%);
  -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 760 676" preserveAspectRatio="none"><path d="M557.34 0 c95.53 0 143.3 0 172.98 29.68 c29.68 29.68 29.68 77.45 29.68 172.98 L760 473.34 c0 95.53 0 143.3 -29.68 172.98 c-29.68 29.68 -77.45 29.68 -172.98 29.68 L202.66 676 c-95.53 0 -143.3 0 -172.98 -29.68 c-29.68 -29.68 -29.68 -77.45 -29.68 -172.98 L0 202.66 c0 -95.53 0 -143.3 29.68 -172.98 c29.68 -29.68 77.45 -29.68 172.98 -29.68 Z"/></svg>') 0 0 / 100% 100% no-repeat;
          mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 760 676" preserveAspectRatio="none"><path d="M557.34 0 c95.53 0 143.3 0 172.98 29.68 c29.68 29.68 29.68 77.45 29.68 172.98 L760 473.34 c0 95.53 0 143.3 -29.68 172.98 c-29.68 29.68 -77.45 29.68 -172.98 29.68 L202.66 676 c-95.53 0 -143.3 0 -172.98 -29.68 c-29.68 -29.68 -29.68 -77.45 -29.68 -172.98 L0 202.66 c0 -95.53 0 -143.3 29.68 -172.98 c29.68 -29.68 77.45 -29.68 172.98 -29.68 Z"/></svg>') 0 0 / 100% 100% no-repeat;
}
.fs-03 img { position: absolute; display: block; max-width: none; -webkit-user-drag: none; }
.fs-03 p { position: absolute; margin: 0; line-height: normal; white-space: nowrap; }

.fs-03 .fs03-glow { position: absolute; border-radius: 50%; filter: blur(calc(55 * var(--f))); pointer-events: none; }
.fs-03 .fs03-glow--a { left: calc(-120 * var(--f)); top: calc(520 * var(--f)); width: calc(560 * var(--f)); height: calc(280 * var(--f)); background: #6a5acdb3; }
.fs-03 .fs03-glow--b { left: calc(260 * var(--f)); top: calc(520 * var(--f)); width: calc(620 * var(--f)); height: calc(300 * var(--f)); background: #a58befb3; }
.fs-03 .fs03-glow--c { left: calc(-60 * var(--f)); top: calc(120 * var(--f)); width: calc(360 * var(--f)); height: calc(260 * var(--f)); background: #ffd6e699; }
.fs-03 .fs03-glow--d { left: calc(-150 * var(--f)); top: calc(-140 * var(--f)); width: calc(620 * var(--f)); height: calc(320 * var(--f)); background: #ffffffd9; }

/* Watermark "14 STYLES" behind the fan */
.fs-03 .fs03-big {
  left: calc(40 * var(--f));
  top: calc(-70 * var(--f));
  font-size: calc(300 * var(--f));
  font-weight: 700;
  letter-spacing: calc(-18 * var(--f));
  color: rgba(255, 255, 255, 0.32);
}
.fs-03 .fs03-styles {
  left: calc(60 * var(--f));
  top: calc(232 * var(--f));
  font-size: calc(34 * var(--f));
  font-weight: 700;
  letter-spacing: calc(4.08 * var(--f));
  color: rgba(255, 255, 255, 0.45);
}

.fs-03 .fs03-card {
  position: absolute;
  left: calc(var(--x) * var(--f));
  top: calc(var(--y) * var(--f));
  width: calc(170 * var(--f));
  height: calc(236 * var(--f));
  rotate: var(--r);
  overflow: hidden;
  border: calc(1.5 * var(--f)) solid #fff;
  border-radius: calc(22 * var(--f));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(247, 242, 255, 0.93));
  -webkit-backdrop-filter: blur(calc(12 * var(--f)));
          backdrop-filter: blur(calc(12 * var(--f)));
  box-shadow: inset 0 calc(2 * var(--f)) calc(2 * var(--f)) #fff,
              0 calc(2 * var(--f)) calc(6 * var(--f)) rgba(42, 47, 110, 0.05),
              0 calc(24 * var(--f)) calc(48 * var(--f)) calc(-12 * var(--f)) rgba(42, 47, 110, 0.18);
}
.fs-03 .fs03-card img {
  left: calc(6.5 * var(--f));
  top: calc(6.5 * var(--f));
  width: calc(154 * var(--f));
  height: calc(170 * var(--f));
  object-fit: cover;
  border-radius: calc(16 * var(--f));
}
.fs-03 .fs03-card__name { left: calc(10.5 * var(--f)); top: calc(184.5 * var(--f)); font-size: calc(14 * var(--f)); font-weight: 700; color: #16181d; }
.fs-03 .fs03-card__sub { left: calc(10.5 * var(--f)); top: calc(204.5 * var(--f)); font-size: calc(11 * var(--f)); font-weight: 500; color: #6b7486; }
.fs-03 .fs03-pro {
  position: absolute;
  left: calc(109.5 * var(--f));
  top: calc(186.5 * var(--f));
  padding: calc(6 * var(--f)) calc(12 * var(--f));
  border-radius: calc(99 * var(--f));
  background: linear-gradient(90deg, #3e6dc2, #a77fe0);
  font-size: calc(10 * var(--f));
  font-weight: 700;
  line-height: normal;
  color: #fff;
}
.fs-03 .fs03-tag {
  display: flex;
  align-items: center;
  left: calc(262.5 * var(--f));
  top: calc(560 * var(--f));
  padding: calc(10 * var(--f)) calc(12 * var(--f));
  border-radius: calc(99 * var(--f));
  background: #16181d;
  font-size: calc(15 * var(--f));
  font-weight: 700;
  color: #fff;
}

/* A lift travels through the fan: each card rises along its own tilt, then settles */
@media (prefers-reduced-motion: no-preference) {
  .fvis.is-live .fs-03 .fs03-card {
    animation: fs03-lift 6.3s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.6s);
  }
}
@keyframes fs03-lift {
  0%, 16%, 100% { transform: translateY(0); }
  8%            { transform: translateY(calc(-16 * var(--f))); }
}

/* ---- Pro 04: 11 Hollywood-style transitions — a player mid-wipe over the transition picker ----
   Figma 710:129. --e is the wipe edge, in Figma px from the player's left (246.5 at rest):
   scene B shows to the right of it. js (stage-04) sweeps it back and forth on screen. */
.fs-04 {
  --e: 246.5;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, #eef0ff 0%, #c9cff7 33.333%, #8e98e8 66.667%, #4b57c2 100%);
  -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 760 676" preserveAspectRatio="none"><path d="M557.34 0 c95.53 0 143.3 0 172.98 29.68 c29.68 29.68 29.68 77.45 29.68 172.98 L760 473.34 c0 95.53 0 143.3 -29.68 172.98 c-29.68 29.68 -77.45 29.68 -172.98 29.68 L202.66 676 c-95.53 0 -143.3 0 -172.98 -29.68 c-29.68 -29.68 -29.68 -77.45 -29.68 -172.98 L0 202.66 c0 -95.53 0 -143.3 29.68 -172.98 c29.68 -29.68 77.45 -29.68 172.98 -29.68 Z"/></svg>') 0 0 / 100% 100% no-repeat;
          mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 760 676" preserveAspectRatio="none"><path d="M557.34 0 c95.53 0 143.3 0 172.98 29.68 c29.68 29.68 29.68 77.45 29.68 172.98 L760 473.34 c0 95.53 0 143.3 -29.68 172.98 c-29.68 29.68 -77.45 29.68 -172.98 29.68 L202.66 676 c-95.53 0 -143.3 0 -172.98 -29.68 c-29.68 -29.68 -29.68 -77.45 -29.68 -172.98 L0 202.66 c0 -95.53 0 -143.3 29.68 -172.98 c29.68 -29.68 77.45 -29.68 172.98 -29.68 Z"/></svg>') 0 0 / 100% 100% no-repeat;
}
.fs-04 img { position: absolute; display: block; max-width: none; -webkit-user-drag: none; }
.fs-04 p { position: absolute; margin: 0; line-height: normal; white-space: nowrap; }

.fs-04 .fs04-glow { position: absolute; border-radius: 50%; filter: blur(calc(55 * var(--f))); pointer-events: none; }
.fs-04 .fs04-glow--a { left: calc(-120 * var(--f)); top: calc(520 * var(--f)); width: calc(560 * var(--f)); height: calc(280 * var(--f)); background: #3b47b8b3; }
.fs-04 .fs04-glow--b { left: calc(260 * var(--f)); top: calc(520 * var(--f)); width: calc(620 * var(--f)); height: calc(300 * var(--f)); background: #6f7be0b3; }
.fs-04 .fs04-glow--c { left: calc(480 * var(--f)); top: calc(80 * var(--f)); width: calc(380 * var(--f)); height: calc(280 * var(--f)); background: #f1c8ee80; }
.fs-04 .fs04-glow--d { left: calc(-150 * var(--f)); top: calc(-140 * var(--f)); width: calc(620 * var(--f)); height: calc(320 * var(--f)); background: #ffffffd9; }

.fs-04 .fs04-player {
  position: absolute;
  left: calc(70 * var(--f));
  top: calc(80 * var(--f));
  width: calc(620 * var(--f));
  height: calc(360 * var(--f));
  overflow: hidden;
  border: calc(1.5 * var(--f)) solid #fff;
  border-radius: calc(30 * var(--f));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(242, 240, 255, 0.93));
  -webkit-backdrop-filter: blur(calc(12 * var(--f)));
          backdrop-filter: blur(calc(12 * var(--f)));
  box-shadow: inset 0 calc(2 * var(--f)) calc(2 * var(--f)) #fff,
              0 calc(2 * var(--f)) calc(6 * var(--f)) rgba(42, 47, 110, 0.05),
              0 calc(24 * var(--f)) calc(48 * var(--f)) calc(-12 * var(--f)) rgba(42, 47, 110, 0.18);
}
.fs-04 .fs04-scene {
  left: calc(10.5 * var(--f));
  top: calc(10.5 * var(--f));
  width: calc(596 * var(--f));
  height: calc(336 * var(--f));
  object-fit: cover;
  border-radius: calc(22 * var(--f));
}
/* Scene B: the same box, clipped to the right of the wipe edge */
.fs-04 .fs04-scene--b { clip-path: inset(0 0 0 calc((var(--e) - 10.5) * var(--f))); }
.fs-04 .fs04-edge {
  position: absolute;
  left: calc((var(--e) - 4) * var(--f));
  top: calc(10.5 * var(--f));
  width: calc(10 * var(--f));
  height: calc(336 * var(--f));
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 50%, rgba(255, 255, 255, 0));
  filter: blur(calc(1.5 * var(--f)));
}
.fs-04 .fs04-pill {
  display: flex;
  align-items: center;
  left: calc(24.5 * var(--f));
  top: calc(24.5 * var(--f));
  padding: calc(6 * var(--f)) calc(12 * var(--f));
  border-radius: calc(99 * var(--f));
  background: rgba(22, 24, 29, 0.72);
  font-size: calc(12 * var(--f));
  font-weight: 700;
  color: #fff;
}

/* Picker export: 736 x 180 (the 664 x 108 cards plus their shadows), node at 50 / 470 */
.fs-04 .fs04-picker {
  left: calc(14 * var(--f));
  top: calc(458 * var(--f));
  width: calc(736 * var(--f));
  height: calc(180 * var(--f));
}
.fs-04 .fs04-tag {
  display: flex;
  align-items: center;
  left: calc(277.5 * var(--f));
  top: calc(598 * var(--f));
  padding: calc(6 * var(--f)) calc(12 * var(--f));
  border-radius: calc(99 * var(--f));
  background: #16181d;
  font-size: calc(14 * var(--f));
  font-weight: 700;
  color: #fff;
}

/* ---- Pro 05: 6 premium animated caption styles (Figma 710:190) ----
   A phone reel with a captioned line, three caption-style cards on each side.
   At rest it is Figma's frame (Pop Box picked). While on screen, the caption pops in
   word by word, holds, and the pick moves on to the next style, which restyles the caption. */
.fs-05 {
  overflow: hidden;
  border-radius: calc(101 * var(--f));
  background: linear-gradient(180deg, #fff0f7 0%, #f7d5ea 33.333%, #bfa7f0 66.667%, #6a55d0 100%);
  font-family: var(--font-sans);
}

/* blurred ellipses (Figma: layer blur, stdDeviation 55) */
.fs-05 .fs05-glow {
  position: absolute;
  left: calc(var(--x) * var(--f));
  top: calc(var(--y) * var(--f));
  width: calc(var(--w) * var(--f));
  height: calc(var(--h) * var(--f));
  border-radius: 50%;
  background: var(--c);
  filter: blur(calc(55 * var(--f)));
  pointer-events: none;
}

/* phone reel */
.fs-05 .fs05-reel {
  position: absolute;
  left: calc(230 * var(--f));
  top: calc(60 * var(--f));
  width: calc(300 * var(--f));
  height: calc(560 * var(--f));
  box-sizing: border-box;
  overflow: hidden;
  border: calc(8 * var(--f)) solid #fff;
  border-radius: calc(40 * var(--f));
  box-shadow: 0 calc(30 * var(--f)) calc(30 * var(--f)) rgba(42, 47, 110, 0.3);
}
.fs-05 .fs05-reel__img {
  position: absolute;
  left: calc(-8 * var(--f));
  top: calc(-8 * var(--f));
  width: calc(300 * var(--f));
  height: calc(560 * var(--f));
  max-width: none;
  object-fit: cover;
}
.fs-05 .fs05-reel__shade {
  position: absolute;
  left: calc(-8 * var(--f));
  top: calc(292 * var(--f));
  width: calc(300 * var(--f));
  height: calc(260 * var(--f));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);
}

/* caption (Figma "Caption (animate pop)": a 250-wide wrapping row centred on y 387) */
.fs-05 .fs05-cap {
  position: absolute;
  left: calc(17 * var(--f));
  top: calc(382 * var(--f));
  width: calc(250 * var(--f));
  height: calc(10 * var(--f));
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  justify-content: center;
  gap: calc(6 * var(--f)) calc(8 * var(--f));
  font-size: calc(30 * var(--f));
  font-weight: 700;
  line-height: normal;
  color: #fff;
  white-space: nowrap;
}
.fs-05 .fs05-word { display: inline-block; }
.fs-05 .fs05-key {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(191.94 * var(--f));
  height: calc(51.89 * var(--f));
}
.fs-05 .fs05-word--box {
  padding: calc(2 * var(--f)) calc(8 * var(--f));
  border-radius: calc(8 * var(--f));
  background: #ffd15e;
  color: #16181d;
  rotate: 3deg;
}

/* the caption in the other styles (only reached by the animation) */
.fs-05 .fs05-cap[data-style="neon"] { color: #7cf3ff; text-shadow: 0 0 calc(10 * var(--f)) rgba(124, 243, 255, 0.9), 0 0 calc(22 * var(--f)) rgba(124, 243, 255, 0.55); }
.fs-05 .fs05-cap[data-style="neon"] .fs05-word--box { background: #16181d; color: #7cf3ff; }
.fs-05 .fs05-cap[data-style="storybook"] { font-family: "Instrument Serif", ui-serif, Georgia, serif; font-style: italic; font-weight: 400; font-size: calc(34 * var(--f)); }
.fs-05 .fs05-cap[data-style="storybook"] .fs05-word--box { background: #fff; color: #5b57d6; rotate: 0deg; }
.fs-05 .fs05-cap[data-style="bounce"] .fs05-word--box { background: #a77fe0; color: #fff; rotate: -3deg; }
.fs-05 .fs05-cap[data-style="karaoke"] .fs05-word { color: #fff; }
.fs-05 .fs05-cap[data-style="karaoke"] .fs05-word.is-sung { color: #ff8a5c; }
.fs-05 .fs05-cap[data-style="karaoke"] .fs05-word--box { background: #fff; color: #e0603a; rotate: 0deg; }
.fs-05 .fs05-cap[data-style="outline"] { color: transparent; -webkit-text-stroke: calc(1.5 * var(--f)) #fff; }
.fs-05 .fs05-cap[data-style="outline"] .fs05-word--box { background: #16181d; color: #fff; -webkit-text-stroke: 0; rotate: 0deg; }

/* caption-style cards */
.fs-05 .fs05-style {
  position: absolute;
  left: calc(var(--x) * var(--f));
  top: calc(var(--y) * var(--f));
  width: calc(176 * var(--f));
  height: calc(104 * var(--f));
  box-sizing: border-box;
  overflow: hidden;
  border: calc(1.5 * var(--f)) solid #fff;
  border-radius: calc(22 * var(--f));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(246, 242, 255, 0.93) 100%);
  -webkit-backdrop-filter: blur(calc(12 * var(--f)));
          backdrop-filter: blur(calc(12 * var(--f)));
  box-shadow:
    inset 0 calc(2 * var(--f)) calc(2 * var(--f)) #fff,
    0 calc(2 * var(--f)) calc(6 * var(--f)) rgba(42, 47, 110, 0.05),
    0 calc(24 * var(--f)) calc(48 * var(--f)) calc(-12 * var(--f)) rgba(42, 47, 110, 0.18);
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}
/* picked: a 3px violet ring (Figma's Pop Box card); the inside stays where it was */
.fs-05 .fs05-style.is-on {
  border-color: #5b57d6;
  box-shadow:
    inset 0 0 0 calc(1.5 * var(--f)) #5b57d6,
    inset 0 calc(2 * var(--f)) calc(2 * var(--f)) #fff,
    0 calc(2 * var(--f)) calc(6 * var(--f)) rgba(42, 47, 110, 0.05),
    0 calc(24 * var(--f)) calc(48 * var(--f)) calc(-12 * var(--f)) rgba(42, 47, 110, 0.18);
}
.fs-05 .fs05-style__prev {
  position: absolute;
  left: calc(10.5 * var(--f));
  top: calc(10.5 * var(--f));
  width: calc(152 * var(--f));
  height: calc(48 * var(--f));
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(12 * var(--f));
  background: var(--bg);
  color: var(--ink);
  font-size: calc(26 * var(--f));
  font-weight: 700;
  line-height: 1;
}
.fs-05 .fs05-style__prev--serif {
  font-family: "Instrument Serif", ui-serif, Georgia, serif;
  font-style: italic;
  font-weight: 400;
}
.fs-05 .fs05-style__name {
  position: absolute;
  left: calc(10.5 * var(--f));
  top: calc(68.5 * var(--f));
  font-size: calc(13 * var(--f));
  font-weight: 600;
  line-height: normal;
  color: #16181d;
  white-space: nowrap;
}

/* ---- Pro 06: AI-composed movie scores (Figma 710:237) ----
   The score composer card: thumbnail, mood chips, a waveform with a playhead, section marks.
   At rest it is Figma's frame (playhead on Chase). While on screen the playhead runs on to the
   end, the bars it passes turn blue-violet, then it starts again from the intro. The three
   notes float gently. */
.fs-06 {
  overflow: hidden;
  border-radius: calc(101 * var(--f));
  background: linear-gradient(180deg, #f2eeff 0%, #d6cef9 33.333%, #9e8fe8 66.667%, #4c3fb8 100%);
  font-family: var(--font-sans);
}
.fs-06 .fs06-glow {
  position: absolute;
  left: calc(var(--x) * var(--f));
  top: calc(var(--y) * var(--f));
  width: calc(var(--w) * var(--f));
  height: calc(var(--h) * var(--f));
  border-radius: 50%;
  background: var(--c);
  filter: blur(calc(55 * var(--f)));
  pointer-events: none;
}

/* notes: centred on their Figma boxes, white 85% */
.fs-06 .fs06-note {
  position: absolute;
  left: calc(var(--x) * var(--f));
  top: calc(var(--y) * var(--f));
  translate: -50% -50%;
  rotate: var(--r);
  font-size: calc(var(--s) * var(--f));
  font-weight: 700;
  line-height: normal;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}
.fvis.is-live .fs-06 .fs06-note { animation: fs06-float 4.8s ease-in-out var(--d) infinite; }
@keyframes fs06-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(-10 * var(--f))); }
}

/* card */
.fs-06 .fs06-card {
  position: absolute;
  left: calc(70 * var(--f));
  top: calc(120 * var(--f));
  width: calc(620 * var(--f));
  height: calc(430 * var(--f));
  box-sizing: border-box;
  overflow: hidden;
  border: calc(1.5 * var(--f)) solid #fff;
  border-radius: calc(30 * var(--f));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(244, 242, 255, 0.93) 100%);
  -webkit-backdrop-filter: blur(calc(12 * var(--f)));
          backdrop-filter: blur(calc(12 * var(--f)));
  box-shadow:
    inset 0 calc(2 * var(--f)) calc(2 * var(--f)) #fff,
    0 calc(2 * var(--f)) calc(6 * var(--f)) rgba(42, 47, 110, 0.05),
    0 calc(24 * var(--f)) calc(48 * var(--f)) calc(-12 * var(--f)) rgba(42, 47, 110, 0.18);
  color: #16181d;
}
.fs-06 .fs06-thumb {
  position: absolute;
  left: calc(22.5 * var(--f));
  top: calc(22.5 * var(--f));
  width: calc(120 * var(--f));
  height: calc(90 * var(--f));
  max-width: none;
  object-fit: cover;
  border-radius: calc(16 * var(--f));
}
.fs-06 .fs06-title,
.fs-06 .fs06-sub {
  position: absolute;
  left: calc(158.5 * var(--f));
  line-height: normal;
  white-space: nowrap;
}
.fs-06 .fs06-title { top: calc(28.5 * var(--f)); font-size: calc(18 * var(--f)); font-weight: 700; }
.fs-06 .fs06-sub   { top: calc(54.5 * var(--f)); font-size: calc(13 * var(--f)); font-weight: 500; color: #6b7486; }

.fs-06 .fs06-moods {
  position: absolute;
  left: calc(22.5 * var(--f));
  top: calc(132.5 * var(--f));
  display: flex;
  align-items: center;
  gap: calc(8 * var(--f));
}
.fs-06 .fs06-mood {
  padding: calc(6 * var(--f)) calc(12 * var(--f));
  border-radius: calc(99 * var(--f));
  background: rgba(22, 24, 29, 0.05);
  font-size: calc(13 * var(--f));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
}
.fs-06 .fs06-mood.is-on { background: #5b57d6; color: #fff; }

/* waveform: each bar's Figma box in --x/--y/--h (4 wide); played bars blue to violet */
.fs-06 .fs06-wave {
  position: absolute;
  left: calc(22.5 * var(--f));
  top: calc(188.5 * var(--f));
  width: calc(572 * var(--f));
  height: calc(150 * var(--f));
}
.fs-06 .fs06-wave i {
  position: absolute;
  left: calc(var(--x) * var(--f));
  top: calc(var(--y) * var(--f));
  width: calc(4 * var(--f));
  height: calc(var(--h) * var(--f));
  border-radius: calc(2 * var(--f));
  background: rgba(22, 24, 29, 0.1);
}
.fs-06 .fs06-wave i.is-played { background: linear-gradient(90deg, #3e6dc2 0%, #a77fe0 100%); }

/* playhead (Figma x 370.5); the script moves it with translate */
.fs-06 .fs06-head {
  position: absolute;
  left: calc(370.5 * var(--f));
  top: calc(178.5 * var(--f));
  width: calc(2 * var(--f));
  height: calc(170 * var(--f));
  background: #16181d;
}

.fs-06 .fs06-mark {
  position: absolute;
  left: calc(var(--x) * var(--f));
  top: calc(354.5 * var(--f));
  font-size: calc(12 * var(--f));
  font-weight: 600;
  line-height: normal;
  color: #6b7486;
  white-space: nowrap;
}
.fs-06 .fs06-pill {
  position: absolute;
  left: calc(22.5 * var(--f));
  top: calc(384.5 * var(--f));
  padding: calc(6 * var(--f)) calc(12 * var(--f));
  border-radius: calc(99 * var(--f));
  background: rgba(91, 87, 214, 0.1);
  font-size: calc(13 * var(--f));
  font-weight: 700;
  line-height: normal;
  color: #5b57d6;
  white-space: nowrap;
}

/* ---- Pro 07: 30 Pro voices + Voiceover Studio (Figma 710:374) ----
   Left, the Pro voice list (Leo picked). Right, the Voiceover Studio card: the script, word
   timing chips and an export pill. At rest it is Figma's frame (read up to "hidden b", the
   first four chips lit). While on screen the read-out sweeps on through the script, each
   timing chip lights as its word is reached, then it all resets and reads again. */
.fs-07 {
  overflow: hidden;
  border-radius: calc(101 * var(--f));
  background: linear-gradient(180deg, #eef3ff 0%, #ccd9fa 33.333%, #93a9ee 66.667%, #4a62cf 100%);
  font-family: var(--font-sans);
  color: #16181d;
}
.fs-07 .fs07-glow {
  position: absolute;
  left: calc(var(--x) * var(--f));
  top: calc(var(--y) * var(--f));
  width: calc(var(--w) * var(--f));
  height: calc(var(--h) * var(--f));
  border-radius: 50%;
  background: var(--c);
  filter: blur(calc(55 * var(--f)));
  pointer-events: none;
}

/* shared glass card */
.fs-07 .fs07-cast,
.fs-07 .fs07-studio {
  position: absolute;
  box-sizing: border-box;
  overflow: hidden;
  border: calc(1.5 * var(--f)) solid #fff;
  border-radius: calc(28 * var(--f));
  -webkit-backdrop-filter: blur(calc(12 * var(--f)));
          backdrop-filter: blur(calc(12 * var(--f)));
  box-shadow:
    inset 0 calc(2 * var(--f)) calc(2 * var(--f)) #fff,
    0 calc(2 * var(--f)) calc(6 * var(--f)) rgba(42, 47, 110, 0.05),
    0 calc(24 * var(--f)) calc(48 * var(--f)) calc(-12 * var(--f)) rgba(42, 47, 110, 0.18);
}

/* ---- voice list ---- */
.fs-07 .fs07-cast {
  left: calc(40 * var(--f));
  top: calc(100 * var(--f));
  width: calc(300 * var(--f));
  height: calc(470 * var(--f));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(242, 244, 255, 0.93) 100%);
}
.fs-07 .fs07-pick {
  position: absolute;
  left: calc(10.5 * var(--f));
  top: calc(118.5 * var(--f));
  width: calc(276 * var(--f));
  height: calc(60 * var(--f));
  border-radius: calc(16 * var(--f));
  background: rgba(91, 87, 214, 0.1);
}
.fs-07 .fs07-cast__title {
  position: absolute;
  left: calc(20.5 * var(--f));
  top: calc(20.5 * var(--f));
  font-size: calc(18 * var(--f));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
}
.fs-07 .fs07-avatar {
  position: absolute;
  left: calc(20.5 * var(--f));
  top: calc(var(--y) * var(--f));
  width: calc(44 * var(--f));
  height: calc(44 * var(--f));
  max-width: none;
  border-radius: 50%;
  object-fit: cover;
}
.fs-07 .fs07-name,
.fs-07 .fs07-accent {
  position: absolute;
  left: calc(76.5 * var(--f));
  top: calc(var(--y) * var(--f));
  line-height: normal;
  white-space: nowrap;
}
.fs-07 .fs07-name   { font-size: calc(15 * var(--f)); font-weight: 700; }
.fs-07 .fs07-accent { font-size: calc(12 * var(--f)); font-weight: 500; color: #6b7486; }
.fs-07 .fs07-pro {
  position: absolute;
  left: calc(208.5 * var(--f));
  top: calc(var(--y) * var(--f));
  padding: calc(2 * var(--f)) calc(6 * var(--f));
  border-radius: calc(99 * var(--f));
  background: linear-gradient(90deg, #3e6dc2 0%, #a77fe0 100%);
  font-size: calc(9 * var(--f));
  font-weight: 700;
  line-height: normal;
  color: #fff;
}
.fs-07 .fs07-play {
  position: absolute;
  left: calc(248.5 * var(--f));
  top: calc(133.5 * var(--f));
  width: calc(30 * var(--f));
  height: calc(30 * var(--f));
  border-radius: calc(15 * var(--f));
  background: #5b57d6;
}
.fs-07 .fs07-play img {
  position: absolute;
  left: calc(11 * var(--f));
  top: calc(9 * var(--f));
  width: calc(10 * var(--f));
  height: calc(12 * var(--f));
  max-width: none;
}
/* the picked voice is speaking: its play button breathes */
.fvis.is-live .fs-07 .fs07-play { animation: fs07-pulse 1.6s ease-in-out infinite; }
@keyframes fs07-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(91, 87, 214, 0.35); }
  50%      { box-shadow: 0 0 0 calc(6 * var(--f)) rgba(91, 87, 214, 0); }
}

/* ---- Voiceover Studio ---- */
.fs-07 .fs07-studio {
  left: calc(350 * var(--f));
  top: calc(180 * var(--f));
  width: calc(380 * var(--f));
  height: calc(360 * var(--f));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(246, 244, 255, 0.93) 100%);
}
.fs-07 .fs07-studio__head {
  position: absolute;
  left: calc(20.5 * var(--f));
  top: calc(18.5 * var(--f));
  display: flex;
  align-items: center;
  gap: calc(8 * var(--f));
  font-size: calc(17 * var(--f));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
}
.fs-07 .fs07-studio__head img {
  width: calc(22 * var(--f));
  height: calc(22 * var(--f));
  max-width: none;
}
.fs-07 .fs07-script {
  position: absolute;
  left: calc(20.5 * var(--f));
  top: calc(58.5 * var(--f));
  width: calc(336 * var(--f));
  font-size: calc(17 * var(--f));
  font-weight: 400;
  line-height: 1.5;
  color: rgba(22, 24, 29, 0.85);
}
.fs-07 .fs07-script__read { font-weight: 600; color: #5b57d6; }

.fs-07 .fs07-timing {
  position: absolute;
  left: calc(20.5 * var(--f));
  top: calc(198.5 * var(--f));
  width: calc(336 * var(--f));
  height: calc(70 * var(--f));
}
.fs-07 .fs07-chip {
  position: absolute;
  left: calc(var(--x) * var(--f));
  top: 0;
  box-sizing: border-box;
  width: calc(var(--w) * var(--f));
  height: calc(30 * var(--f));
  padding: calc(8 * var(--f)) 0 0 calc(7 * var(--f));
  border-radius: calc(8 * var(--f));
  background: rgba(91, 87, 214, 0.15);
  font-size: calc(11 * var(--f));
  font-weight: 600;
  line-height: normal;
  color: #5b57d6;
  white-space: nowrap;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.fs-07 .fs07-chip.is-on { background: #5b57d6; color: #fff; }
.fs-07 .fs07-time {
  position: absolute;
  left: calc(var(--x) * var(--f));
  top: calc(42 * var(--f));
  font-size: calc(11 * var(--f));
  font-weight: 500;
  line-height: normal;
  color: #6b7486;
  white-space: nowrap;
}
.fs-07 .fs07-export {
  position: absolute;
  left: calc(20.5 * var(--f));
  top: calc(298.5 * var(--f));
  padding: calc(6 * var(--f)) calc(12 * var(--f));
  border-radius: calc(99 * var(--f));
  background: #16181d;
  font-size: calc(13 * var(--f));
  font-weight: 700;
  line-height: normal;
  color: #fff;
  white-space: nowrap;
}
.fs-07 .fs07-voice {
  position: absolute;
  left: calc(238.5 * var(--f));
  top: calc(304.5 * var(--f));
  font-size: calc(13 * var(--f));
  font-weight: 500;
  line-height: normal;
  color: #6b7486;
  white-space: nowrap;
}

/* ---- Pro 08: Multi-track timeline editor (Figma 711:129) ----
   The editor: media library, preview with a frame-accurate timecode, four tracks (video, voice,
   music, captions) and a playhead. A clip is being dragged out of the media library.
   At rest it is Figma's frame. While on screen the playhead runs along the timeline (the
   timecode follows it) and loops; the clip is dragged from its library tile across to the
   preview and dropped, again and again. */
.fs-08 {
  overflow: hidden;
  border-radius: calc(101 * var(--f));
  background: linear-gradient(180deg, #eef0ff 0%, #cdd2f8 33.333%, #8f98e6 66.667%, #3f4ab5 100%);
  font-family: var(--font-sans);
  color: #16181d;
}
.fs-08 .fs08-glow {
  position: absolute;
  left: calc(var(--x) * var(--f));
  top: calc(var(--y) * var(--f));
  width: calc(var(--w) * var(--f));
  height: calc(var(--h) * var(--f));
  border-radius: 50%;
  background: var(--c);
  filter: blur(calc(55 * var(--f)));
  pointer-events: none;
}

/* editor card (children are placed in its padding box, like Figma's export) */
.fs-08 .fs08-editor {
  position: absolute;
  left: calc(40 * var(--f));
  top: calc(80 * var(--f));
  width: calc(680 * var(--f));
  height: calc(520 * var(--f));
  box-sizing: border-box;
  overflow: hidden;
  border: calc(1.5 * var(--f)) solid #fff;
  border-radius: calc(28 * var(--f));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(244, 243, 255, 0.93) 100%);
  -webkit-backdrop-filter: blur(calc(12 * var(--f)));
          backdrop-filter: blur(calc(12 * var(--f)));
  box-shadow:
    inset 0 calc(2 * var(--f)) calc(2 * var(--f)) #fff,
    0 calc(2 * var(--f)) calc(6 * var(--f)) rgba(42, 47, 110, 0.05),
    0 calc(24 * var(--f)) calc(48 * var(--f)) calc(-12 * var(--f)) rgba(42, 47, 110, 0.18);
}
.fs-08 .fs08-editor img { max-width: none; object-fit: cover; }

.fs-08 .fs08-media {
  position: absolute;
  left: calc(14.5 * var(--f));
  top: calc(14.5 * var(--f));
  width: calc(150 * var(--f));
  height: calc(300 * var(--f));
  border-radius: calc(16 * var(--f));
  background: rgba(22, 24, 29, 0.04);
}
.fs-08 .fs08-media__title {
  position: absolute;
  left: calc(12 * var(--f));
  top: calc(12 * var(--f));
  font-size: calc(13 * var(--f));
  font-weight: 700;
  line-height: normal;
}
.fs-08 .fs08-tile {
  position: absolute;
  left: calc(var(--x) * var(--f));
  top: calc(var(--y) * var(--f));
  width: calc(58 * var(--f));
  height: calc(48 * var(--f));
  border-radius: calc(10 * var(--f));
}

.fs-08 .fs08-preview {
  position: absolute;
  left: calc(170.5 * var(--f));
  top: calc(14.5 * var(--f));
  width: calc(494 * var(--f));
  height: calc(240 * var(--f));
  border-radius: calc(16 * var(--f));
}
.fs-08 .fs08-play {
  position: absolute;
  left: calc(393.5 * var(--f));
  top: calc(110.5 * var(--f));
  width: calc(48 * var(--f));
  height: calc(48 * var(--f));
  border-radius: calc(24 * var(--f));
  background: rgba(255, 255, 255, 0.94);
}
.fs-08 .fs08-play img {
  position: absolute;
  left: calc(18 * var(--f));
  top: calc(15 * var(--f));
  width: calc(16 * var(--f));
  height: calc(18 * var(--f));
}
.fs-08 .fs08-tc {
  position: absolute;
  left: calc(170.5 * var(--f));
  top: calc(262.5 * var(--f));
  font-size: calc(13 * var(--f));
  font-weight: 700;
  line-height: normal;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fs-08 .fs08-pill {
  position: absolute;
  left: calc(558.5 * var(--f));
  top: calc(258.5 * var(--f));
  padding: calc(6 * var(--f)) calc(12 * var(--f));
  border-radius: calc(99 * var(--f));
  background: rgba(91, 87, 214, 0.1);
  font-size: calc(11 * var(--f));
  font-weight: 700;
  line-height: normal;
  color: #5b57d6;
  white-space: nowrap;
}

/* timeline */
.fs-08 .fs08-tick {
  position: absolute;
  left: calc(var(--x) * var(--f));
  top: calc(328.5 * var(--f));
  font-size: calc(10 * var(--f));
  font-weight: 500;
  line-height: normal;
  color: #6b7486;
  white-space: nowrap;
}
.fs-08 .fs08-track-name {
  position: absolute;
  left: calc(14.5 * var(--f));
  top: calc(var(--y) * var(--f));
  font-size: calc(12 * var(--f));
  font-weight: 600;
  line-height: normal;
  white-space: nowrap;
}
.fs-08 .fs08-lane {
  position: absolute;
  left: calc(94.5 * var(--f));
  top: calc(var(--y) * var(--f));
  width: calc(568 * var(--f));
  height: calc(32 * var(--f));
  border-radius: calc(8 * var(--f));
  background: rgba(22, 24, 29, 0.04);
}
.fs-08 .fs08-clip {
  position: absolute;
  left: calc(var(--x) * var(--f));
  top: calc(350.5 * var(--f));
  width: calc(var(--w) * var(--f));
  height: calc(28 * var(--f));
  box-sizing: border-box;
  border: calc(2 * var(--f)) solid #5b57d6;
  border-radius: calc(7 * var(--f));
}
.fs-08 .fs08-block {
  position: absolute;
  left: calc(var(--x) * var(--f));
  top: calc(var(--y) * var(--f));
  width: calc(var(--w) * var(--f));
  height: calc(28 * var(--f));
  border-radius: calc(7 * var(--f));
  background: var(--c);
}

/* playhead: 2px line from the ruler down through the tracks, a 12px dot on top
   (Figma x 412.58); the script moves it with translate */
.fs-08 .fs08-head {
  position: absolute;
  left: calc(412.58 * var(--f));
  top: calc(328.5 * var(--f));
  width: calc(2 * var(--f));
  height: calc(180 * var(--f));
  background: #e0603a;
}
.fs-08 .fs08-head i {
  position: absolute;
  left: calc(-5 * var(--f));
  top: calc(-4 * var(--f));
  width: calc(12 * var(--f));
  height: calc(12 * var(--f));
  border-radius: 50%;
  background: #e0603a;
}

/* the dragged clip (Figma "Dragged clip (animate)": 92 x 62, 3px white border, turned 6°,
   centred in its 97.98 x 71.28 box at 183.52, 248) and the cursor holding it */
.fs-08 .fs08-drag {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform-origin: calc(232.51 * var(--f)) calc(283.64 * var(--f)); /* the clip's centre */
  pointer-events: none;
}
.fs-08 .fs08-drag__clip {
  position: absolute;
  left: calc(186.51 * var(--f));   /* 183.52 + (97.98 - 92) / 2 */
  top: calc(252.64 * var(--f));    /* 248 + (71.28 - 62) / 2 */
  width: calc(92 * var(--f));
  height: calc(62 * var(--f));
  max-width: none;
  box-sizing: border-box;
  border: calc(3 * var(--f)) solid #fff;
  border-radius: calc(10 * var(--f));
  object-fit: cover;
  rotate: 6deg;
  box-shadow: 0 calc(14 * var(--f)) calc(24 * var(--f)) calc(-4 * var(--f)) rgba(42, 47, 110, 0.3);
}
.fs-08 .fs08-drag__cursor {
  position: absolute;
  left: calc(262 * var(--f));
  top: calc(290 * var(--f));
  width: calc(26 * var(--f));
  height: calc(30 * var(--f));
  max-width: none;
}

/* ---- Pro feature 09: Full 1080p HD exports (Figma 711:188) ----
   A blurry HD thumbnail, an arrow, the sharp 1920 x 1080 frame, and the Export panel
   (1080p + H.264 picked). While on screen the arrow nudges toward the sharp frame and
   "Export MP4" presses every few seconds. */
.fs-09 {
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, #eef5ff 0%, #cde0fa 33.333%, #8fb2ee 66.667%, #3f6ac4 100%);
  /* Figma's squircle: radius 101, corner smoothing 100% (same mask as special/ stages) */
  -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 760 676" preserveAspectRatio="none"><path d="M557.34 0 c95.53 0 143.3 0 172.98 29.68 c29.68 29.68 29.68 77.45 29.68 172.98 L760 473.34 c0 95.53 0 143.3 -29.68 172.98 c-29.68 29.68 -77.45 29.68 -172.98 29.68 L202.66 676 c-95.53 0 -143.3 0 -172.98 -29.68 c-29.68 -29.68 -29.68 -77.45 -29.68 -172.98 L0 202.66 c0 -95.53 0 -143.3 29.68 -172.98 c29.68 -29.68 77.45 -29.68 172.98 -29.68 Z"/></svg>') 0 0 / 100% 100% no-repeat;
          mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 760 676" preserveAspectRatio="none"><path d="M557.34 0 c95.53 0 143.3 0 172.98 29.68 c29.68 29.68 29.68 77.45 29.68 172.98 L760 473.34 c0 95.53 0 143.3 -29.68 172.98 c-29.68 29.68 -77.45 29.68 -172.98 29.68 L202.66 676 c-95.53 0 -143.3 0 -172.98 -29.68 c-29.68 -29.68 -29.68 -77.45 -29.68 -172.98 L0 202.66 c0 -95.53 0 -143.3 29.68 -172.98 c29.68 -29.68 77.45 -29.68 172.98 -29.68 Z"/></svg>') 0 0 / 100% 100% no-repeat;
}
.fs-09 img { display: block; -webkit-user-drag: none; }

/* Blurred colour ellipses (Figma: ellipse fill, layer blur 55) */
.fs-09 .fs09-glow {
  position: absolute;
  left: calc(var(--x) * var(--f));
  top: calc(var(--y) * var(--f));
  width: calc(var(--w) * var(--f));
  height: calc(var(--h) * var(--f));
  border-radius: 50%;
  background: var(--c);
  filter: blur(calc(55 * var(--f)));
  pointer-events: none;
}

.fs-09 .fs09-ghost {
  position: absolute;
  left: calc(30 * var(--f));
  top: calc(-10 * var(--f));
  font-size: calc(190 * var(--f));
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.05em;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.32);
}

/* Pills */
.fs-09 .fs09-pill {
  display: flex;
  align-items: center;
  padding: calc(6 * var(--f)) calc(12 * var(--f));
  border-radius: calc(99 * var(--f));
  font-size: calc(12 * var(--f));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
  color: #16181d;
}
.fs-09 .fs09-pill--dark { background: rgba(22, 24, 29, 0.6); color: #fff; }
.fs-09 .fs09-pill--off { background: rgba(22, 24, 29, 0.05); }
.fs-09 .fs09-pill--on { background: #5b57d6; color: #fff; }
.fs-09 .fs09-pill--hd {
  position: absolute;
  left: calc(72 * var(--f));
  top: calc(242 * var(--f));
}
.fs-09 .fs09-pill--size {
  position: absolute;
  left: calc(318 * var(--f));
  top: calc(186 * var(--f));
  background: #fff;
  font-size: calc(13 * var(--f));
}

/* HD thumbnail: soft, a little faded */
.fs-09 .fs09-hd {
  position: absolute;
  left: calc(60 * var(--f));
  top: calc(230 * var(--f));
  width: calc(220 * var(--f));
  height: calc(124 * var(--f));
  border-radius: calc(14 * var(--f));
  object-fit: cover;
  opacity: 0.85;
  filter: blur(calc(1.5 * var(--f)));
}

/* Sharp 1920 x 1080 frame */
.fs-09 .fs09-full {
  position: absolute;
  left: calc(300 * var(--f));
  top: calc(170 * var(--f));
  box-sizing: border-box;
  width: calc(420 * var(--f));
  height: calc(236 * var(--f));
  border: calc(6 * var(--f)) solid #fff;
  border-radius: calc(22 * var(--f));
  box-shadow: 0 calc(24 * var(--f)) calc(50 * var(--f)) calc(-10 * var(--f)) rgba(42, 47, 110, 0.3);
}
.fs-09 .fs09-full img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(16 * var(--f));
}

.fs-09 .fs09-arrow {
  position: absolute;
  left: calc(228 * var(--f));
  top: calc(275 * var(--f));
  width: calc(60 * var(--f));
  height: calc(30 * var(--f));
}

/* Export panel (glass card) */
.fs-09 .fs09-panel {
  position: absolute;
  left: calc(150 * var(--f));
  top: calc(440 * var(--f));
  box-sizing: border-box;
  width: calc(460 * var(--f));
  height: calc(170 * var(--f));
  overflow: hidden;
  border: calc(1.5 * var(--f)) solid #fff;
  border-radius: calc(26 * var(--f));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(242, 246, 255, 0.93));
  -webkit-backdrop-filter: blur(calc(12 * var(--f)));
          backdrop-filter: blur(calc(12 * var(--f)));
  box-shadow:
    inset 0 calc(2 * var(--f)) calc(2 * var(--f)) #fff,
    0 calc(2 * var(--f)) calc(6 * var(--f)) rgba(42, 47, 110, 0.05),
    0 calc(24 * var(--f)) calc(48 * var(--f)) calc(-12 * var(--f)) rgba(42, 47, 110, 0.18);
}
.fs-09 .fs09-panel > * { position: absolute; }
.fs-09 .fs09-panel__title {
  left: calc(20.5 * var(--f));
  top: calc(16.5 * var(--f));
  font-size: calc(17 * var(--f));
  font-weight: 700;
  line-height: normal;
  color: #16181d;
}
.fs-09 .fs09-panel__label {
  left: calc(20.5 * var(--f));
  font-size: calc(13 * var(--f));
  font-weight: 600;
  line-height: normal;
  color: #6b7486;
}
.fs-09 .fs09-panel__label--res { top: calc(58.5 * var(--f)); }
.fs-09 .fs09-panel__label--codec { top: calc(102.5 * var(--f)); }
.fs-09 .fs09-panel__opts {
  left: calc(128.5 * var(--f));
  display: flex;
  gap: calc(6 * var(--f));
}
.fs-09 .fs09-panel__opts--res { top: calc(50.5 * var(--f)); }
.fs-09 .fs09-panel__opts--codec { top: calc(94.5 * var(--f)); }
.fs-09 .fs09-pill--export {
  left: calc(323.5 * var(--f));
  top: calc(14.5 * var(--f));
  background: #16181d;
  color: #fff;
  font-size: calc(13 * var(--f));
}

/* ---- motion (only while the stage is on screen) ---- */
.fs-09 .fs09-arrow { animation: fs09-nudge 1.6s ease-in-out infinite paused; }
.fs-09 .fs09-pill--export { animation: fs09-press 4s ease-in-out infinite paused; }
.fvis.is-live .fs-09 .fs09-arrow,
.fvis.is-live .fs-09 .fs09-pill--export { animation-play-state: running; }
@keyframes fs09-nudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(calc(8 * var(--f))); }
}
@keyframes fs09-press {
  0%, 70%, 100% { transform: scale(1); }
  76%           { transform: scale(0.92); }
  84%           { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .fs-09 .fs09-arrow,
  .fs-09 .fs09-pill--export { animation: none; }
}

/* ---- Pro feature 10: Priority VIP rendering (Figma 711:228) ----
   The render queue: your film sits at the top, rendering, above four waiting jobs; a gold
   "VIP · Skipped the line" tag and a dotted jump arrow from the back of the line to the front.
   While on screen the arrow hops upward, the tag sways, and js (stage-10) runs the progress
   bar on from 82% to 100% and round again. */
.fs-10 {
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, #f5f0ff 0%, #dcd2fa 33.333%, #a792ec 66.667%, #5a44c4 100%);
  /* Figma's squircle: radius 101, corner smoothing 100% (same mask as special/ stages) */
  -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 760 676" preserveAspectRatio="none"><path d="M557.34 0 c95.53 0 143.3 0 172.98 29.68 c29.68 29.68 29.68 77.45 29.68 172.98 L760 473.34 c0 95.53 0 143.3 -29.68 172.98 c-29.68 29.68 -77.45 29.68 -172.98 29.68 L202.66 676 c-95.53 0 -143.3 0 -172.98 -29.68 c-29.68 -29.68 -29.68 -77.45 -29.68 -172.98 L0 202.66 c0 -95.53 0 -143.3 29.68 -172.98 c29.68 -29.68 77.45 -29.68 172.98 -29.68 Z"/></svg>') 0 0 / 100% 100% no-repeat;
          mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 760 676" preserveAspectRatio="none"><path d="M557.34 0 c95.53 0 143.3 0 172.98 29.68 c29.68 29.68 29.68 77.45 29.68 172.98 L760 473.34 c0 95.53 0 143.3 -29.68 172.98 c-29.68 29.68 -77.45 29.68 -172.98 29.68 L202.66 676 c-95.53 0 -143.3 0 -172.98 -29.68 c-29.68 -29.68 -29.68 -77.45 -29.68 -172.98 L0 202.66 c0 -95.53 0 -143.3 29.68 -172.98 c29.68 -29.68 77.45 -29.68 172.98 -29.68 Z"/></svg>') 0 0 / 100% 100% no-repeat;
}
.fs-10 img { display: block; -webkit-user-drag: none; }

.fs-10 .fs10-glow {
  position: absolute;
  left: calc(var(--x) * var(--f));
  top: calc(var(--y) * var(--f));
  width: calc(var(--w) * var(--f));
  height: calc(var(--h) * var(--f));
  border-radius: 50%;
  background: var(--c);
  filter: blur(calc(55 * var(--f)));
  pointer-events: none;
}

/* Render queue (glass card) */
.fs-10 .fs10-queue {
  position: absolute;
  left: calc(120 * var(--f));
  top: calc(100 * var(--f));
  box-sizing: border-box;
  width: calc(520 * var(--f));
  height: calc(470 * var(--f));
  overflow: hidden;
  border: calc(1.5 * var(--f)) solid #fff;
  border-radius: calc(28 * var(--f));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(246, 243, 255, 0.93));
  -webkit-backdrop-filter: blur(calc(12 * var(--f)));
          backdrop-filter: blur(calc(12 * var(--f)));
  box-shadow:
    inset 0 calc(2 * var(--f)) calc(2 * var(--f)) #fff,
    0 calc(2 * var(--f)) calc(6 * var(--f)) rgba(42, 47, 110, 0.05),
    0 calc(24 * var(--f)) calc(48 * var(--f)) calc(-12 * var(--f)) rgba(42, 47, 110, 0.18);
}
.fs-10 .fs10-queue__title {
  position: absolute;
  left: calc(22.5 * var(--f));
  top: calc(20.5 * var(--f));
  font-size: calc(18 * var(--f));
  font-weight: 700;
  line-height: normal;
  color: #16181d;
}

/* Rows */
.fs-10 .fs10-row {
  position: absolute;
  left: calc(22.5 * var(--f));
  top: calc(var(--y) * var(--f));
  box-sizing: border-box;
  width: calc(472 * var(--f));
  height: calc(64 * var(--f));
  border-radius: calc(16 * var(--f));
  background: rgba(22, 24, 29, 0.03);
}
.fs-10 .fs10-row > * { position: absolute; }
.fs-10 .fs10-row__ph {
  left: calc(10 * var(--f));
  top: calc(10 * var(--f));
  width: calc(44 * var(--f));
  height: calc(44 * var(--f));
  border-radius: calc(10 * var(--f));
  background: rgba(22, 24, 29, 0.08);
}
.fs-10 .fs10-row__name {
  left: calc(66 * var(--f));
  top: calc(12 * var(--f));
  font-size: calc(14 * var(--f));
  font-weight: 500;
  line-height: normal;
  white-space: nowrap;
  color: rgba(22, 24, 29, 0.45);
}
.fs-10 .fs10-row__status {
  left: calc(66 * var(--f));
  top: calc(34 * var(--f));
  font-size: calc(12 * var(--f));
  font-weight: 500;
  line-height: normal;
  white-space: nowrap;
  color: rgba(107, 116, 134, 0.6);
}

/* Your film: highlighted, rendering */
.fs-10 .fs10-row--vip {
  border: calc(2 * var(--f)) solid #5b57d6;
  background: linear-gradient(90deg, #ede9ff, #fff);
}
.fs-10 .fs10-row--vip .fs10-row__thumb {
  left: calc(8 * var(--f));
  top: calc(8 * var(--f));
  width: calc(44 * var(--f));
  height: calc(44 * var(--f));
  border-radius: calc(10 * var(--f));
  object-fit: cover;
}
.fs-10 .fs10-row--vip .fs10-row__name {
  left: calc(64 * var(--f));
  top: calc(10 * var(--f));
  font-weight: 700;
  color: #16181d;
}
.fs-10 .fs10-row--vip .fs10-row__status {
  left: calc(64 * var(--f));
  top: calc(32 * var(--f));
  color: #5b57d6;
}
.fs-10 .fs10-row__track,
.fs-10 .fs10-row__fill {
  left: calc(298 * var(--f));
  top: calc(27 * var(--f));
  height: calc(6 * var(--f));
  border-radius: calc(3 * var(--f));
}
.fs-10 .fs10-row__track { width: calc(150 * var(--f)); background: rgba(22, 24, 29, 0.08); }
.fs-10 .fs10-row__fill  { width: calc(123 * var(--f)); background: linear-gradient(90deg, #3e6dc2, #a77fe0); }

/* Gold VIP tag, tilted 4deg (centred on Figma's 185 x 52 rotated box) */
.fs-10 .fs10-vip {
  position: absolute;
  left: calc(549.92 * var(--f));
  top: calc(85.84 * var(--f));
  translate: -50% -50%;
  rotate: 4deg;
  padding: calc(10 * var(--f)) calc(12 * var(--f));
  border-radius: calc(99 * var(--f));
  background: linear-gradient(90deg, #ffe08a, #f2b33d);
  filter: drop-shadow(0 calc(12 * var(--f)) calc(12 * var(--f)) rgba(176, 122, 16, 0.25));
  font-size: calc(15 * var(--f));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
  color: #16181d;
}

/* Dotted jump arrow (Figma "Jump arrow (animate)") */
.fs-10 .fs10-jump {
  position: absolute;
  left: calc(62 * var(--f));
  top: calc(170 * var(--f));
  width: calc(60 * var(--f));
  height: calc(300 * var(--f));
}

/* ---- motion (only while the stage is on screen) ---- */
.fs-10 .fs10-jump { animation: fs10-hop 2.4s cubic-bezier(0.45, 0, 0.25, 1) infinite paused; }
.fs-10 .fs10-vip  { animation: fs10-sway 3.2s ease-in-out infinite paused; }
.fvis.is-live .fs-10 .fs10-jump,
.fvis.is-live .fs-10 .fs10-vip { animation-play-state: running; }
@keyframes fs10-hop {
  0%, 100% { transform: translateY(0); }
  45%      { transform: translateY(calc(-14 * var(--f))); }
  60%      { transform: translateY(calc(-10 * var(--f))); }
}
@keyframes fs10-sway {
  0%, 100% { rotate: 4deg; }
  50%      { rotate: 1.5deg; }
}
@media (prefers-reduced-motion: reduce) {
  .fs-10 .fs10-jump,
  .fs-10 .fs10-vip { animation: none; }
}

/* ---- Pro feature 11: 5 team users (Figma 711:272) ----
   One project card ("Space Pup · Ep 8", edited by 4 people today) with five team members
   around it, each with a role and their own coloured cursor. While on screen the members
   float gently and each cursor wanders a little, like people working in the same project. */
.fs-11 {
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, #eef3ff 0%, #d2dcfa 33.333%, #98aaee 66.667%, #4b60cc 100%);
  /* Figma's squircle: radius 101, corner smoothing 100% (same mask as special/ stages) */
  -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 760 676" preserveAspectRatio="none"><path d="M557.34 0 c95.53 0 143.3 0 172.98 29.68 c29.68 29.68 29.68 77.45 29.68 172.98 L760 473.34 c0 95.53 0 143.3 -29.68 172.98 c-29.68 29.68 -77.45 29.68 -172.98 29.68 L202.66 676 c-95.53 0 -143.3 0 -172.98 -29.68 c-29.68 -29.68 -29.68 -77.45 -29.68 -172.98 L0 202.66 c0 -95.53 0 -143.3 29.68 -172.98 c29.68 -29.68 77.45 -29.68 172.98 -29.68 Z"/></svg>') 0 0 / 100% 100% no-repeat;
          mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 760 676" preserveAspectRatio="none"><path d="M557.34 0 c95.53 0 143.3 0 172.98 29.68 c29.68 29.68 29.68 77.45 29.68 172.98 L760 473.34 c0 95.53 0 143.3 -29.68 172.98 c-29.68 29.68 -77.45 29.68 -172.98 29.68 L202.66 676 c-95.53 0 -143.3 0 -172.98 -29.68 c-29.68 -29.68 -29.68 -77.45 -29.68 -172.98 L0 202.66 c0 -95.53 0 -143.3 29.68 -172.98 c29.68 -29.68 77.45 -29.68 172.98 -29.68 Z"/></svg>') 0 0 / 100% 100% no-repeat;
}
.fs-11 img { display: block; -webkit-user-drag: none; }

.fs-11 .fs11-glow {
  position: absolute;
  left: calc(var(--x) * var(--f));
  top: calc(var(--y) * var(--f));
  width: calc(var(--w) * var(--f));
  height: calc(var(--h) * var(--f));
  border-radius: 50%;
  background: var(--c);
  filter: blur(calc(55 * var(--f)));
  pointer-events: none;
}

/* Glass cards (project + member pills) */
.fs-11 .fs11-project,
.fs-11 .fs11-member {
  position: absolute;
  box-sizing: border-box;
  overflow: hidden;
  border: calc(1.5 * var(--f)) solid #fff;
  -webkit-backdrop-filter: blur(calc(12 * var(--f)));
          backdrop-filter: blur(calc(12 * var(--f)));
  box-shadow:
    inset 0 calc(2 * var(--f)) calc(2 * var(--f)) #fff,
    0 calc(2 * var(--f)) calc(6 * var(--f)) rgba(42, 47, 110, 0.05),
    0 calc(24 * var(--f)) calc(48 * var(--f)) calc(-12 * var(--f)) rgba(42, 47, 110, 0.18);
}

/* Project card */
.fs-11 .fs11-project {
  left: calc(170 * var(--f));
  top: calc(190 * var(--f));
  width: calc(420 * var(--f));
  height: calc(300 * var(--f));
  border-radius: calc(28 * var(--f));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(244, 246, 255, 0.93));
}
.fs-11 .fs11-project > * { position: absolute; }
.fs-11 .fs11-project__still {
  left: calc(10.5 * var(--f));
  top: calc(10.5 * var(--f));
  width: calc(396 * var(--f));
  height: calc(190 * var(--f));
  border-radius: calc(20 * var(--f));
  object-fit: cover;
}
.fs-11 .fs11-project__title {
  left: calc(20.5 * var(--f));
  top: calc(214.5 * var(--f));
  font-size: calc(17 * var(--f));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
  color: #16181d;
}
.fs-11 .fs11-project__meta {
  left: calc(20.5 * var(--f));
  top: calc(240.5 * var(--f));
  font-size: calc(13 * var(--f));
  font-weight: 500;
  line-height: normal;
  white-space: nowrap;
  color: #6b7486;
}
.fs-11 .fs11-project__avatars {
  left: calc(258.5 * var(--f));
  top: calc(230.5 * var(--f));
  display: flex;
}
.fs-11 .fs11-project__avatars img {
  width: calc(36 * var(--f));
  height: calc(36 * var(--f));
  margin-right: calc(-10 * var(--f));
}
.fs-11 .fs11-project__avatars img:last-child { margin-right: 0; }

/* Member pills: avatar, name, role tag */
.fs-11 .fs11-member {
  left: calc(var(--x) * var(--f));
  top: calc(var(--y) * var(--f));
  width: calc(170 * var(--f));
  height: calc(62 * var(--f));
  border-radius: calc(31 * var(--f));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.93));
}
.fs-11 .fs11-member > * { position: absolute; }
.fs-11 .fs11-member img {
  left: calc(7.5 * var(--f));
  top: calc(7.5 * var(--f));
  width: calc(44 * var(--f));
  height: calc(44 * var(--f));
}
.fs-11 .fs11-member p {
  left: calc(60.5 * var(--f));
  top: calc(10.5 * var(--f));
  font-size: calc(15 * var(--f));
  font-weight: 700;
  line-height: normal;
  color: #16181d;
}
.fs-11 .fs11-member span {
  left: calc(60.5 * var(--f));
  top: calc(30.5 * var(--f));
  padding: calc(6 * var(--f)) calc(12 * var(--f));
  border-radius: calc(99 * var(--f));
  background: var(--bg);
  font-size: calc(11 * var(--f));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
  color: var(--c);
}

/* Cursors (20 x 22) */
.fs-11 .fs11-cursor {
  position: absolute;
  left: calc(var(--x) * var(--f));
  top: calc(var(--y) * var(--f));
  width: calc(20 * var(--f));
  height: calc(22 * var(--f));
}

.fs-11 .fs11-seats {
  position: absolute;
  left: calc(310 * var(--f));
  top: calc(36 * var(--f));
  padding: calc(6 * var(--f)) calc(12 * var(--f));
  border-radius: calc(99 * var(--f));
  background: #16181d;
  font-size: calc(14 * var(--f));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
  color: #fff;
}

/* ---- motion (only while the stage is on screen) ---- */
.fs-11 .fs11-member { animation: fs11-float 5s ease-in-out var(--d) infinite paused; }
.fs-11 .fs11-cursor { animation: fs11-wander 6s ease-in-out var(--d) infinite paused; }
.fvis.is-live .fs-11 .fs11-member,
.fvis.is-live .fs-11 .fs11-cursor { animation-play-state: running; }
@keyframes fs11-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(-6 * var(--f))); }
}
@keyframes fs11-wander {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(calc(10 * var(--f)), calc(-6 * var(--f))); }
  50%      { transform: translate(calc(4 * var(--f)), calc(8 * var(--f))); }
  75%      { transform: translate(calc(-8 * var(--f)), calc(2 * var(--f))); }
}
@media (prefers-reduced-motion: reduce) {
  .fs-11 .fs11-member,
  .fs-11 .fs11-cursor { animation: none; }
}


@media (prefers-reduced-motion: reduce) {
  .capsule, .chevrons, .hero-bands { 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; } }
.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; }


/* ============ DFY SECTIONS (merged from parts; the rules above are the Pro page's, shared) ============ */

/* ---- part: hero ---- */
/* ============ 00 HERO (Figma "Hero card" 1268:151, "Video card" 1268:251, "What you get box" 1289:128, "Buy box" 1268:256) ============
   Pro's .hero / .video-card / .buy-box markup, in teal. Adds the "My show" prompt bar, the three sample
   prompt pills and the "What you get" checklist. Desktop (1024+) scales with --s from the 1920 frame;
   below 1024 it is the stacked phone layout. */
.dfy-hero.hero {
  --s: min(1px, 100cqw / 1920);
  --hero-bg: linear-gradient(180deg, #0e8f87 0%, #36bfb2 45%, #ffe6a3 100%);
  --hl-ink: #16181d;
  --cta-ink: #16181d;
  --cta-sub: rgba(22, 24, 29, 0.7);
  --cta-arrow-bg: #16181d;
  margin-top: 12px;
  padding-bottom: 96px;
}
.dfy-hero .hero-card { background-color: #16a39a; }
.dfy-hero .hero-chip { font-size: 16px; }
.dfy-hero .hero-chip__tag { font-size: 12px; color: #16181d; }
.dfy-hero .hero-title { margin-top: 24px; font-size: 28px; }
.dfy-hero .hero-sub { margin-top: 22px; font-size: 16px; }

/* caption + prompt bar */
.dfyhero-caption {
  margin-top: 28px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.85);
}
.dfyhero-input {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 940px;
  max-width: 100%;
  margin: 12px auto 0;
  padding: 10px;
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(5, 64, 59, 0.25);
  text-align: left;
  color: #16181d;
}
.dfyhero-recipe {
  display: flex;
  align-items: center;
  flex: none;
  gap: 6px;
  padding: 5px 10px 5px 5px;
  border: 1px solid #e6e8ee;
  border-radius: 10px;
  background: #f4f5f8;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.dfyhero-slash {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: #ffd36b;
  font-weight: 600;
}
.dfyhero-typed { flex: 1 1 0; min-width: 0; font-size: 15px; line-height: 1.25; }
.dfyhero-send {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #0e8f87;
}
.dfyhero-send img { width: 20px; height: 20px; }

/* sample prompts */
.dfyhero-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
.dfyhero-pills li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 5px 5px 14px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 13px;
  line-height: 1.2;
  color: #fff;
}
.dfyhero-pills span {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
}
.dfyhero-pills img { width: 14px; height: 14px; }

/* video card: poster with the play button (no video yet) */
.dfy-hero .video-card { box-shadow: 0 40px 45px rgba(20, 160, 146, 0.22), 0 2px 3px rgba(20, 160, 146, 0.1); }
.dfyhero-video {
  position: relative;
  aspect-ratio: 1120 / 630;
  overflow: hidden;
  border-radius: 15px;
  background: #0e1726;
}
.dfyhero-video > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* What you get box */
.dfyhero-get {
  width: calc(100% - 24px);
  max-width: 1120px;
  margin: 40px auto 0;
  padding: 24px 20px 26px;
  border: 1px solid #e6e8ee;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.05);
  color: #16181d;
}
.dfyhero-get__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.dfyhero-get__name { font-size: 24px; font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; }
.dfyhero-get__to { margin-top: 2px; font-size: 15px; line-height: 1.25; color: #6b6f7a; }
.dfyhero-get__tag {
  padding: 6px 12px;
  border-radius: 100px;
  background: #16181d;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.08em;
  color: #ffd36b;
  white-space: nowrap;
}
.dfyhero-get__intro {
  margin-top: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid #e6e8ee;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
}
.dfyhero-get__list { display: grid; gap: 14px; margin-top: 20px; }
.dfyhero-get__list li {
  position: relative;
  padding-left: 36px;
  font-size: 16px;
  line-height: 1.3;
}
.dfyhero-get__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(82, 226, 211, 0.16);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: #0e8f87;
}
.dfyhero-get__list b { font-weight: 700; }

/* buy box */
.dfy-hero .buy-box { margin-top: 48px; }
.dfy-hero .buy-box__title { color: #16181d; }
.dfyhero-name { color: #0e8f87; }
.dfy-hero .cta__btn {
  box-shadow: inset 0 -5px 6px rgba(20, 164, 149, 0.35), inset 0 3px 2px rgba(255, 255, 255, 0.8), 0 20px 22px rgba(194, 122, 0, 0.4);
}
.dfy-hero .trust-row { border-color: rgba(37, 134, 124, 0.08); line-height: 19px; color: rgba(22, 24, 29, 0.75); }
.dfy-hero .trust-row strong { color: #16181d; }
.dfy-hero .trust-row i { background: rgba(22, 24, 29, 0.3); }

/* ---------- desktop: the 1920 frame, scaled ---------- */
@media (min-width: 1024px) {
  .dfy-hero.hero { --vid-w: calc(1140 * var(--s)); margin-top: 32px; padding-bottom: calc(207 * var(--s)); }
  .dfy-hero .hero-card {
    margin: 0 calc(56 * var(--s));
    border-radius: calc(48 * var(--s));
    padding: calc(150 * var(--s)) calc(24 * var(--s)) calc(var(--vid-w) * 0.3136 + 72 * var(--s));
  }
  .dfy-hero .hero-chip { gap: calc(10 * var(--s)); font-size: max(16px, calc(22 * var(--s))); }
  .dfy-hero .hero-chip__tag { font-size: max(12px, calc(14 * var(--s))); }
  .dfy-hero .hero-title { margin-top: calc(40 * var(--s)); font-size: max(36px, calc(72 * var(--s))); }
  .dfy-hero .hero-sub { margin-top: calc(36 * var(--s)); font-size: max(16px, calc(27 * var(--s))); }
  .dfy-hero .hero-sub .hl { border-radius: calc(12 * var(--s)); }

  .dfyhero-caption { margin-top: calc(41 * var(--s)); font-size: max(15px, calc(20 * var(--s))); }
  .dfyhero-input {
    gap: calc(18 * var(--s));
    width: calc(940 * var(--s));
    height: calc(104 * var(--s));
    margin-top: calc(19 * var(--s));
    padding: 0 calc(20 * var(--s));
    border-radius: calc(52 * var(--s));
    box-shadow: 0 calc(18 * var(--s)) calc(44 * var(--s)) rgba(5, 64, 59, 0.25);
  }
  .dfyhero-recipe {
    gap: calc(10 * var(--s));
    padding: calc(8 * var(--s)) calc(16 * var(--s)) calc(8 * var(--s)) calc(8 * var(--s));
    border-radius: calc(14 * var(--s));
    font-size: max(13px, calc(20 * var(--s)));
  }
  .dfyhero-slash { width: calc(36 * var(--s)); height: calc(36 * var(--s)); border-radius: calc(9 * var(--s)); }
  .dfyhero-typed { font-size: max(15px, calc(25 * var(--s))); }
  .dfyhero-send { width: calc(64 * var(--s)); height: calc(64 * var(--s)); }
  .dfyhero-send img { width: calc(30 * var(--s)); height: calc(30 * var(--s)); }

  .dfyhero-pills { flex-wrap: nowrap; gap: calc(14 * var(--s)); margin-top: calc(32 * var(--s)); }
  .dfyhero-pills li {
    gap: calc(14 * var(--s));
    padding: calc(8 * var(--s)) calc(8 * var(--s)) calc(8 * var(--s)) calc(22 * var(--s));
    font-size: max(13px, calc(20 * var(--s)));
    white-space: nowrap;
  }
  .dfyhero-pills span { width: calc(36 * var(--s)); height: calc(36 * var(--s)); }
  .dfyhero-pills img { width: calc(18 * var(--s)); height: calc(18 * var(--s)); }

  .dfy-hero .video-card { padding: calc(10 * var(--s)); border-radius: calc(30 * var(--s)); }
  .dfyhero-video { border-radius: calc(22 * var(--s)); }

  .dfyhero-get {
    width: calc(1120 * var(--s));
    max-width: none;
    margin-top: calc(72 * var(--s));
    padding: calc(43 * var(--s)) calc(47 * var(--s)) calc(47 * var(--s));
    border-radius: calc(28 * var(--s));
  }
  .dfyhero-get__name { font-size: max(24px, calc(32 * var(--s))); line-height: 1.25; }
  .dfyhero-get__to { font-size: max(14px, calc(18 * var(--s))); }
  .dfyhero-get__tag { padding: calc(7 * var(--s)) calc(14 * var(--s)); font-size: max(11px, calc(13 * var(--s))); }
  .dfyhero-get__intro {
    margin-top: calc(35 * var(--s));
    padding-bottom: calc(24 * var(--s));
    font-size: max(16px, calc(22 * var(--s)));
  }
  .dfyhero-get__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, auto);
    grid-auto-flow: column;
    gap: calc(28 * var(--s)) calc(40 * var(--s));
    margin-top: calc(28 * var(--s));
  }
  .dfyhero-get__list li { padding-left: calc(40 * var(--s)); font-size: max(14px, calc(19 * var(--s))); line-height: 1.25; }
  .dfyhero-get__list li::before {
    top: calc(1 * var(--s));
    width: calc(26 * var(--s));
    height: calc(26 * var(--s));
    font-size: max(11px, calc(14 * var(--s)));
  }

  .dfy-hero .buy-box { margin-top: calc(64 * var(--s)); }
}
/* at full size the rows keep Figma's fixed 52px pitch (a wrapped line runs into the gap, as in Figma) */
@media (min-width: 1600px) {
  .dfyhero-get__list { grid-template-rows: repeat(4, calc(24 * var(--s))); }
}

/* ---- part: vs ---- */
/* ============ 02 SKIP IT AT CHECKOUT (Figma "02 Pro vs Commercial" 1268:322, 1920 x 1527 + 140 gap) ============
   Pro's .vs / .cmp table in teal: "WITH DFY" vs "DOING IT YOURSELF", 10 rows. */
.dfy-vs {
  --elig-hl: #e1fbf9;
  --row-stripe: #f0fdfc;
  --row-dot: #61e2d5;
  --plan-bg: linear-gradient(180deg, #0e8f87 0%, #3cc6b8 100%);
  --plan-shadow: 0 24px 50px -12px rgba(88, 214, 201, 0.35);
  --plan-blob: rgba(155, 243, 234, 0.5);
}
@media (min-width: 1024px) { .dfy-vs.vs { padding: 140px 0 300px; } }
.dfy-vs .vs__title,
.dfy-vs .vs__lead,
.dfy-vs .vs__elig mark { color: #16181d; }
.dfy-vs .vs__elig { color: rgba(22, 24, 29, 0.85); }

.dfy-vs .cmp__panel {
  border-color: rgba(37, 134, 124, 0.09);
  box-shadow: 0 20px 50px -20px rgba(22, 177, 162, 0.06);
}
.dfy-vs .cmp__com { border-color: rgba(37, 134, 124, 0.12); }
.dfy-vs .cmp__head--com {
  padding: 0 6px;
  border-bottom-color: rgba(22, 24, 29, 0.08);
  text-align: center;
  color: rgba(22, 24, 29, 0.75);
}
.dfy-vs .cmp__feat { color: #16181d; }
.dfy-vs .cmp__feat b { color: #16181d; }
.dfy-vs .cmp__plan-cell,
.dfy-vs .cmp__com-cell { padding: 4px; text-align: center; line-height: 1.2; }
.dfy-vs .cmp__com-cell { text-decoration: none; }
@media (min-width: 1024px) {
  .dfy-vs .cmp__head--com { font-size: 16px; }
}
@media (max-width: 1023px) {
  .dfy-vs .cmp { grid-template-columns: minmax(0, 1fr) 84px 88px; }
  .dfy-vs .cmp__head--plan { gap: 4px; font-size: 12px; white-space: nowrap; }
  .dfy-vs .cmp__head--plan img { width: 14px; }
}

/* ---- part: chars ---- */
/* ============ 02b THEY GET YOU POSTING (Figma 1268:1519, 1920 x 864) ============
   Desktop (>= 1024): Figma px scaled by --s. Heading block centred (title 0, box 81, subline 182);
   the four monsters stand on one baseline (y 752) over a dotted path (y 644), numbers at 772, labels at 796.
   Each step is centred on its monster's Figma centre x (330, 750, 1170.5, 1590.5).
   The section carries the 140px gap down to "Inside DFY". Phones: 2 x 2 grid, no path. */
.dfy-chars {
  position: relative;
  container-type: inline-size;
  overflow-x: clip;
  padding: 0 0 72px;
}
.dfy-chars > * { --s: min(1px, 100cqw / 1920); }
.dfychars-inner { padding: 0 16px; text-align: center; }

.dfychars-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.03em;
  color: #16181d;
}
.dfychars-hl {
  padding: 0.033em 0.3em;               /* 2 / 18 at 60px */
  border-radius: 0.34em;                 /* 20.4 / 60 */
  background: linear-gradient(172.2deg, #edfdfb 0%, #d5faf6 71.429%);
}
.dfychars-sub {
  max-width: 560px;
  margin: 18px auto 0;
  font-size: 17px;
  line-height: 1.5;
  color: #545c6b;
}

.dfychars-stage { position: relative; margin-top: 40px; }
.dfychars-path { display: none; }
.dfychars-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 12px;
  align-items: end;
  list-style: none;
  margin: 0;
  padding: 0;
}
.dfychars-step { display: flex; flex-direction: column; align-items: center; }
.dfychars-art { display: block; width: 100%; max-width: 220px; height: auto; }
.dfychars-num { margin-top: 10px; font-size: 14px; font-weight: 700; line-height: 1.25; color: #1f998d; }
.dfychars-label { margin-top: 2px; font-size: 17px; font-weight: 700; line-height: 1.27; letter-spacing: -0.015em; color: #17181d; }

@media (min-width: 640px) {
  .dfychars-title { font-size: 44px; }
  .dfychars-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .dfy-chars { padding: 0; }
  .dfychars-inner { position: relative; height: calc(1004 * var(--s)); padding: 0; }   /* 864 frame + 140 gap */
  .dfychars-title {
    gap: calc(6 * var(--s));                                  /* line 1 box 75, box at 81 */
    font-size: max(32px, calc(60 * var(--s)));
  }
  .dfychars-sub {
    max-width: none;
    margin-top: calc(22 * var(--s));                          /* box ends 160, subline at 182 */
    font-size: max(15px, calc(21 * var(--s)));
    line-height: 1.524;                                       /* 32 / 21 */
    white-space: nowrap;
  }
  /* stage = Figma y 302 (tallest monster top) to 829 (label bottom) */
  .dfychars-stage {
    position: absolute;
    left: 0;
    top: calc(302 * var(--s));
    width: 100%;
    height: calc(527 * var(--s));
    margin: 0;
  }
  .dfychars-path {
    display: block;
    position: absolute;
    left: calc(160 * var(--s));
    top: calc(342 * var(--s));                                /* 644 - 302 */
    width: calc(1600 * var(--s));
    height: calc(120 * var(--s));
  }
  .dfychars-steps { display: block; position: absolute; inset: 0; }
  .dfychars-step {
    position: absolute;
    top: calc(var(--t) * var(--s));
    left: calc((var(--cx) - var(--w) / 2) * var(--s));
    width: calc(var(--w) * var(--s));
  }
  .dfychars-step--1 { --cx: 330;    --w: 424; --h: 360; --t: 90; }
  .dfychars-step--2 { --cx: 750;    --w: 314; --h: 390; --t: 60; }
  .dfychars-step--3 { --cx: 1170.5; --w: 315; --h: 450; --t: 0;  }
  .dfychars-step--4 { --cx: 1590.5; --w: 391; --h: 380; --t: 70; }
  .dfychars-art { max-width: none; width: 100%; height: calc(var(--h) * var(--s)); }
  .dfychars-num {
    margin-top: calc(20 * var(--s));                          /* 752 -> 772 */
    font-size: max(12px, calc(16 * var(--s)));
    line-height: calc(20 * var(--s));
  }
  .dfychars-label {
    margin-top: calc(4 * var(--s));                           /* 796 */
    font-size: max(15px, calc(26 * var(--s)));
    line-height: 1.27;
    white-space: nowrap;
  }
}

/* ---- part: inside ---- */
/* ============ 03 INSIDE DFY (Figma 1268:450, 1920 x 6792) ============
   Reuses pro's .inside / .intro / .frow / .fvis / .fcopy; this file only re-themes them teal and
   scales them like the 1920 frame. Desktop (>= 1024) everything is Figma px x --s: intro 1360 x 720 at
   y 40; rows 1360 wide, visual 760 x 676 + 100 gap + 500 copy, visuals 160 apart (first at y 900);
   section ends 200 below the last visual + the 40 gap to "How it works".
   Each visual: soft colour glow (-100, 70, 960 x 541, blur 70), the panel image, and the monster
   cutout in Figma px of the panel (--x --y --w --h). Phones: the visual shrinks so its monster fits. */
.dfy-inside { --accent: #1b9d90; }
.dfy-inside > * { --s: min(1px, 100cqw / 1920); }

/* ---- intro ---- */
.dfy-inside .intro__title span:first-child { color: #16181d; }
.dfy-inside .intro__title { font-size: 44px; }
.dfy-inside .intro__script { font-size: 1.13em; }            /* 104 / 92 */
.dfy-inside .intro__art { width: min(100%, 360px); }
.dfy-inside .intro__art .glow { --u: calc(100cqw / 616); }

/* ---- rows ---- */
.dfyinside-vis {
  --f: min(1px, (100cqw - 32px) / 960);                     /* phones: widest panel + monster = 960 */
  margin-left: calc(var(--ol) * var(--f));
  margin-right: calc(var(--or) * var(--f));
}
.dfyinside-glow {
  position: absolute;
  left: calc(-100 * var(--f));
  top: calc(70 * var(--f));
  width: calc(960 * var(--f));
  height: calc(541 * var(--f));
  border-radius: 50%;
  background: var(--glow);
  opacity: 0.16;
  filter: blur(calc(70 * var(--f)));
  pointer-events: none;
}
.dfyinside-row--01 { --glow: #6fd3aa; }
.dfyinside-row--02 { --glow: #7db8f7; }
.dfyinside-row--03 { --glow: #ffd35c; }
.dfyinside-row--04 { --glow: #ac98f7; }
.dfyinside-row--05 { --glow: #ff9f8e; }
.dfyinside-row--06 { --glow: #6fd3cc; }
.dfyinside-row--07 { --glow: #f79bc1; }
.dfyinside-panel {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.dfyinside-mascot {
  position: absolute;
  left: calc(var(--x) * var(--f));
  top: calc(var(--y) * var(--f));
  width: calc(var(--w) * var(--f));
  height: calc(var(--h) * var(--f));
  max-width: none;
}

/* ---- copy ---- */
.dfy-inside .fcopy__title { color: #16181d; }
.dfyinside-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.dfyinside-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: rgba(22, 24, 29, 0.9);
}
.dfyinside-list img {
  flex: none;
  box-sizing: content-box;
  width: 12px;
  height: 12px;
  padding: 6px;
  border-radius: 12px;
  background: rgba(82, 226, 211, 0.12);
}

@media (min-width: 640px) {
  .dfy-inside .intro__title { font-size: 64px; }
}

@media (min-width: 1024px) {
  /* section padding lives on its children (only they carry --s): 40 above the intro, 200 + the 40 gap below */
  .dfy-inside { display: flow-root; padding: 0; }
  .dfy-inside .intro { margin-top: calc(40 * var(--s)); }
  .dfy-inside .frow:last-child { margin-bottom: calc(240 * var(--s)); }

  .dfy-inside .intro {
    width: calc(1360 * var(--s));
    max-width: none;
    height: calc(720 * var(--s));
    padding: 0;
  }
  .dfy-inside .intro__copy { max-width: none; width: max(330px, calc(620 * var(--s))); padding-top: calc(170 * var(--s)); }
  .dfy-inside .intro__title { margin-top: calc(21 * var(--s)); font-size: max(40px, calc(92 * var(--s))); }
  .dfy-inside .intro__text { margin-top: calc(26 * var(--s)); font-size: max(16px, calc(22 * var(--s))); }
  .dfy-inside .intro__art { left: calc(670 * var(--s)); top: calc(79 * var(--s)); width: calc(616 * var(--s)); }

  .dfy-inside .frow {
    width: calc(1360 * var(--s));
    max-width: none;
    margin-top: calc(160 * var(--s));
    padding: 0;
    gap: calc(100 * var(--s));
  }
  .dfy-inside .intro + .frow { margin-top: calc(140 * var(--s)); }
  .dfyinside-vis {
    /* the copy keeps at least 300px; the visual takes what is left of the 1360 row */
    --f: calc((1260 * var(--s) - max(300px, 500 * var(--s))) / 760);
    margin: 0;
  }
  .dfy-inside .fcopy { flex: 0 0 max(300px, calc(500 * var(--s))); max-width: none; }
  .dfy-inside .fcopy__num { font-size: max(13px, calc(15 * var(--s))); }
  .dfy-inside .fcopy__title { margin-top: calc(20 * var(--s)); font-size: max(26px, calc(48 * var(--s))); }
  .dfy-inside .fcopy__text { margin-top: calc(22 * var(--s)); font-size: max(16px, calc(20 * var(--s))); }
  .dfyinside-list { gap: calc(12 * var(--s)); margin-top: calc(24 * var(--s)); }
  .dfyinside-list li { font-size: max(15px, calc(18 * var(--s))); line-height: 1.28; }
}

/* ---- part: how ---- */
/* ============ 05 HOW IT WORKS (Figma 1289:159, 1920 x 1650) ============
   Headline centred (84 / 84 box / Rancho 60), timeline below.
   Desktop (>= 1024px): every step is a row of the list's grid (subgrid) so the
   columns line up: pill (right-aligned, ends at x 760) | 28 | dot 32 (line at x 804)
   | 40 | text 620 (x 860). Below 1024px: dot + line on the left, pill above the title. */
.dfy-how {
  --s: min(1px, 100cqw / 1920);
  container-type: inline-size;
  color: #16181d;
}
.dfyhow-in {
  padding: max(64px, calc(120 * var(--s))) 16px max(72px, calc(136 * var(--s)));
}

/* ---- headline ---- */
.dfyhow-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  font-size: max(40px, calc(84 * var(--s)));
  font-weight: 700;
  line-height: 1.25;                       /* 105 at 84 */
  letter-spacing: -0.03em;
  text-align: center;
}
.dfyhow-hl {
  display: inline-block;
  margin-top: 0.0476em;                    /* box top 229, line 1 ends 225 */
  padding: 0.0952em 0.3095em 0.1429em;     /* 8 / 26 / 12 at 84 */
  border-radius: 0.3095em;                 /* 26 */
  background: linear-gradient(165.56deg, #edfdfb 0%, #d5faf6 71.429%);
  line-height: 1.1;
}
.dfyhow-script {
  margin: max(12px, calc(20 * var(--s))) 0 0;
  font-family: var(--font-script, "Rancho", cursive);
  font-size: max(34px, calc(60 * var(--s)));
  line-height: 1.25;
  color: #1b9d90;
  text-align: center;
}

/* ---- timeline ---- */
.dfyhow-list {
  --tf: max(22px, calc(32 * var(--s)));    /* title size */
  --tlh: calc(var(--tf) * 1.25);           /* title line: pill + dot centre on it */
  --dh: 31px;                              /* phone: dot centres on the pill */
  --gap: 0px;                              /* space between steps that the line crosses */
  --lw: 2px;
  margin: max(40px, calc(87 * var(--s))) auto 0;
  padding: 0;
  list-style: none;
  max-width: 560px;
}
.dfyhow-step {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  grid-template-areas: "dot pill" "dot body";
  column-gap: 20px;
  row-gap: 10px;
  padding-bottom: 40px;
}
.dfyhow-step:last-child { padding-bottom: 0; }

.dfyhow-pill {
  grid-area: pill;
  justify-self: start;
  padding: 0.474em 0.947em;                /* 9 / 18 at 19 */
  border-radius: 24px;
  font-size: max(14px, calc(19 * var(--s)));
  font-weight: 500;
  line-height: 1.263;                      /* 24 at 19 */
  white-space: nowrap;
}
.dfyhow-pill--yellow { background: #fff1d1; }
.dfyhow-pill--lilac  { background: #f1edff; }
.dfyhow-pill--pink   { background: #ffe6f1; }
.dfyhow-pill--teal   { background: #e5fcfa; }

/* dot cell runs the full height of its step; its ::before is this step's piece of the line
   (Figma: line from 4 above the first dot's centre to 38 below the last one's) */
.dfyhow-dot {
  grid-area: dot;
  position: relative;
  align-self: stretch;
}
.dfyhow-dot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: calc(-1 * var(--gap));
  width: var(--lw);
  transform: translateX(-50%);
  background: #e6e8ee;
}
.dfyhow-step:first-child .dfyhow-dot::before { top: calc(var(--dh) / 2 - 4 * var(--s)); }
.dfyhow-step:last-child .dfyhow-dot::before { bottom: auto; height: calc(var(--dh) / 2 + 38 * var(--s)); }
.dfyhow-dot img {                          /* 24 dot + 4 white ring (svg is 32) */
  position: relative;
  display: block;
  width: 32px;
  height: 32px;
  max-width: none;
  margin: calc((var(--dh) - 32px) / 2) auto 0;
}
.dfyhow-step:last-child .dfyhow-dot::before { height: calc(var(--dh) / 2 + 24px); }
.dfyhow-body { grid-area: body; }
.dfyhow-title {
  margin: 0;
  font-size: var(--tf);
  font-weight: 600;
  line-height: 1.25;                       /* 40 at 32 */
  letter-spacing: -0.015em;
}
.dfyhow-text {
  margin: max(6px, calc(8 * var(--s))) 0 0;
  font-size: max(16px, calc(20 * var(--s)));
  line-height: 1.5;
  color: #545c6b;
}

@media (min-width: 1024px) {
  .dfyhow-in { padding-left: 0; padding-right: 0; }
  .dfyhow-list {
    --dh: var(--tlh);
    --gap: max(36px, calc(54 * var(--s)));
    --lw: max(1.5px, calc(2 * var(--s)));
    --ds: max(17px, calc(32 * var(--s)));  /* dot size */
    display: grid;
    --pc: max(132px, calc(176 * var(--s)));  /* pill column: widest pill is 176 */
    grid-template-columns: var(--pc) var(--ds) calc(632 * var(--s));  /* 12 body margin + 620 text */
    column-gap: calc(28 * var(--s));
    row-gap: var(--gap);
    width: max-content;
    max-width: none;
    /* dot column starts at x 788 = centre - 172; pill column + 28 sit left of it (x 584 at 1920) */
    margin-left: calc(50% - 200 * var(--s) - var(--pc));
  }
  .dfyhow-step {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    grid-template-areas: "pill dot body";
    column-gap: calc(28 * var(--s));
    padding-bottom: 0;
  }
  .dfyhow-body { margin-left: calc(12 * var(--s)); }       /* 40 from the dot, not 28 */
  .dfyhow-pill {
    justify-self: end;
    align-self: start;
    margin-top: calc((var(--tlh) - 2.211em) / 2);           /* centred on the title line */
  }
  .dfyhow-dot img {
    width: var(--ds);
    height: var(--ds);
    margin-top: calc((var(--dh) - var(--ds)) / 2);
  }
  .dfyhow-step:last-child .dfyhow-dot::before { height: calc(var(--dh) / 2 + 38 * var(--s)); }
}

/* ---- part: show ---- */
/* ============ 06 A SHOW, NOT A STACK OF CLIPS (Figma 1289:200, 1920 x 798.5 + 40.5 gap to the calendar card) ============
   Desktop (>= 1024px): headline on one line ("A show," 18 gap, highlight box), subline,
   then 3 columns 480 wide (x 240–1680, centres 480 / 960 / 1440). Each column draws its
   piece of the 1.5px connector behind its pill, so together they run 240–1680.
   Below 1024px: columns stack. */
.dfy-show {
  --s: min(1px, 100cqw / 1920);
  container-type: inline-size;
  color: #16181d;
}
.dfyshow-in {
  padding: max(64px, calc(146.5 * var(--s))) 16px max(72px, calc(183 * var(--s)));
}

/* ---- headline ---- */
.dfyshow-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.12em 0.2143em;                    /* 18 at 84 */
  margin: 0;
  font-size: max(36px, calc(84 * var(--s)));
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.03em;
  text-align: center;
}
.dfyshow-hl {
  display: inline-block;
  padding: 0.0952em 0.3095em 0.1429em;     /* 8 / 26 / 12 at 84 */
  border-radius: 0.3095em;                 /* 26 */
  background: linear-gradient(171.75deg, #edfdfb 0%, #d5faf6 71.429%);
  line-height: 1.1;
}
.dfyshow-sub {
  margin: max(18px, calc(30 * var(--s))) 0 0;
  font-size: max(17px, calc(22 * var(--s)));
  line-height: 1.27;                       /* 28 at 22 */
  color: #545c6b;
  text-align: center;
}

/* ---- columns ---- */
.dfyshow-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  max-width: 480px;
  margin: max(48px, calc(71.5 * var(--s))) auto 0;
}
.dfyshow-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.dfyshow-tag {
  padding: 0.5em 1em;                      /* 10 / 20 at 20 */
  border-radius: 24px;
  font-size: max(16px, calc(20 * var(--s)));
  font-weight: 600;
  line-height: 1.25;                       /* 25 at 20 */
  white-space: nowrap;
}
.dfyshow-tag--yellow { background: #fff1d1; }
.dfyshow-tag--lilac  { background: #f1edff; }
.dfyshow-tag--pink   { background: #ffe6f1; }

.dfyshow-prow {
  position: relative;
  align-self: stretch;
  display: flex;
  justify-content: center;
  margin-top: max(12px, calc(15 * var(--s)));
}
.dfyshow-prow::before {                    /* connector, y 480 = pill centre */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: max(1px, calc(1.5 * var(--s)));
  background: #e6e8ee;
  transform: translateY(-50%);
}
.dfyshow-prompt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.818em;                            /* 18 at 22 */
  margin: 0;
  padding: 0.4545em 0.4545em 0.4545em 1.0909em; /* 10 / 10 / 10 / 24 at 22 */
  border: 1px solid #e6e8ee;
  border-radius: 40px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  font-size: max(17px, calc(22 * var(--s)));
  font-weight: 500;
  line-height: 1.27;                       /* 28 at 22 */
  text-align: left;
}
.dfyshow-ptext { white-space: nowrap; }
.dfyshow-arrow {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.909em;                          /* 42 at 22 */
  height: 1.909em;
  border-radius: 50%;
  background: #e5fcfa;
}
.dfyshow-arrow img { display: block; width: 0.909em; height: 0.909em; max-width: none; } /* 20 */

.dfyshow-text {
  max-width: 380px;
  margin: max(18px, calc(24 * var(--s))) 0 0;
  font-size: max(16px, calc(20 * var(--s)));
  line-height: 1.5;
  color: #6b6f7a;
}

@media (max-width: 400px) {
  .dfyshow-ptext { white-space: normal; }
}

@media (min-width: 1024px) {
  .dfyshow-in { padding-left: 0; padding-right: 0; }
  .dfyshow-cols {
    grid-template-columns: repeat(3, max(300px, calc(480 * var(--s))));   /* 300 floor keeps the pills apart at 1024 */
    justify-content: center;
    gap: 0;
    max-width: none;
  }
  .dfyshow-prompt { font-size: max(15px, calc(22 * var(--s))); }
  .dfyshow-text { max-width: max(270px, calc(380 * var(--s))); }
  .dfyshow-prompt { box-shadow: 0 calc(6 * var(--s)) calc(18 * var(--s)) rgba(0, 0, 0, 0.06); }
}

/* ---- part: calendar ---- */
/* ============ 07 YOUR CALENDAR, FULL (Figma 1289:230: card 1808 x 1399 at x 56, radius 48; 140 to the next section) ============
   Teal gradient card. Inside (card px): headline top 110 (84, white) + white highlight box 6 below,
   subline 19 below the box, calendar window 1364 x 910 (an image; radius 24, teal-tinted shadow)
   32 below, caption 20 below it, 37 to the card's bottom. Everything centres on the card. */
.dfy-calendar {
  --s: min(1px, 100cqw / 1920);
  container-type: inline-size;
  padding: 0 12px max(72px, calc(140 * var(--s)));
}
.dfycal-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1808px;
  margin: 0 auto;
  padding: max(48px, calc(110 * var(--s))) 14px max(28px, calc(37 * var(--s)));
  border-radius: max(28px, calc(48 * var(--s)));
  background: linear-gradient(90deg, #0e8f87 0%, #36bfb2 55%, #9ee3d6 100%);
  color: #fff;
  text-align: center;
}

.dfycal-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  font-size: max(30px, calc(84 * var(--s)));
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.03em;
}
.dfycal-hl {
  display: inline-block;
  margin-top: 0.0714em;                    /* 6 at 84 */
  padding: 0.0952em 0.3095em 0.1429em;     /* 8 / 26 / 12 */
  border-radius: 0.3095em;                 /* 26 */
  background: #fff;
  color: #16181d;
  line-height: 1.1;
}
.dfycal-sub {
  max-width: 966px;
  margin: max(16px, calc(19 * var(--s))) 0 0;
  font-size: max(17px, calc(22 * var(--s)));
  font-weight: 500;
  line-height: 1.27;
  color: rgba(255, 255, 255, 0.88);
}
.dfycal-grid {
  display: block;
  width: 100%;
  max-width: 1364px;
  height: auto;
  margin-top: max(24px, calc(32 * var(--s)));
  border-radius: 1.7595% / 2.6374%;        /* 24 x 24 corners on 1364 x 910 */
  box-shadow: 0 calc(24 * var(--s)) calc(60 * var(--s)) rgba(8, 77, 71, 0.25);
}
.dfycal-cap {
  margin: max(14px, calc(20 * var(--s))) 0 0;
  font-size: max(14px, calc(16 * var(--s)));
  font-weight: 500;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.75);
}

@media (min-width: 1024px) {
  .dfy-calendar { padding-left: 0; padding-right: 0; }
  .dfycal-card {
    width: calc(1808 * var(--s));
    padding-left: 0;
    padding-right: 0;
  }
  .dfycal-grid { width: calc(1364 * var(--s)); }
  .dfycal-head, .dfycal-sub { white-space: nowrap; }
}

/* ---- part: bento ---- */
/* ============ 03b WHAT YOUR SHOW CAN BE (Figma "03b … bento" 1268:1582, 1920 x 1198 + 200 gap to the receipt) ============
   Reuses Pro's .bento / .tile markup and layout; only the DFY colours change here. */
.dfy-bento {
  --ink-3: #16181d;
  --lav-bg: linear-gradient(165deg, #edfdfb 0%, #d5faf6 71.43%); /* teal highlight box */
  padding: 0 0 80px;
}
@media (min-width: 1024px) { .dfy-bento { padding: 0 0 200px; } }
.dfy-bento .tile__kicker { color: rgba(22, 24, 29, 0.55); }
.dfy-bento .tile--client { background: linear-gradient(135deg, #2b4c9e 0%, #1e8c9a 71.43%); }
.dfy-bento .tile--client .tile__kicker { color: rgba(255, 255, 255, 0.75); }
.dfy-bento .tile--trailers .tile__kicker { color: rgba(255, 255, 255, 0.7); }
.dfy-bento .tile--voice { background: linear-gradient(135deg, #fff3c4 0%, #ffd35c 71.43%); }
.dfy-bento .tile--ads { background: linear-gradient(135deg, #ddf7ea 0%, #8ee0b9 71.43%); }
.dfy-bento .tile--team { background: linear-gradient(154deg, #e3f1ff 0%, #9ccbff 71.43%); }
.dfy-bento .tile--trailers { background: #16181d; }
.dfy-bento .tile__photo { box-shadow: 0 calc(24 * var(--t)) calc(48 * var(--t)) calc(-10 * var(--t)) rgba(51, 124, 116, 0.25); }
.dfy-bento .tile__pill { filter: drop-shadow(0 calc(8 * var(--t)) calc(9 * var(--t)) rgba(51, 124, 116, 0.18)); }

/* ---- part: receipt ---- */
/* ============ 03c WHAT DFY REPLACES (Figma "03c … receipt" 1268:1624, 1920 x 876 + 100 gap to 04) ============
   Reuses Pro's .replace layout. The gap above belongs to the bento, so no top padding here. */
.dfy-receipt {
  --ink-3: #16181d;
  --violet: #17a193;                 /* "THE OLD WAY" */
  --lav-bg: linear-gradient(165deg, #edfdfb 0%, #d5faf6 71.43%);
  padding: 0 0 64px;
}
@media (min-width: 1024px) { .dfy-receipt { padding: 0 0 100px; } }
.dfy-receipt .replace__art { container-type: inline-size; }
.dfy-receipt .replace__stamp { top: 61.53%; }
@media (min-width: 1024px) {
  /* full Figma size at 1920 (Pro's art caps at 46%); the receipt's shadow box starts 27.2 above the section */
  .dfy-receipt .replace__art { width: min(656.5px, 51.3%); margin-top: -27px; margin-right: max(-51px, -4%); }
  .dfy-receipt .replace__price { margin-top: 8px; }   /* Figma: $5,550 sits 8 under the copy */
  .dfy-receipt .replace__stamp { left: -12.57%; }
}
@media (min-width: 1280px) { .dfy-receipt .replace__close { margin-top: 17px; } }  /* closing line at y 829 */

/* "ONE SEASON" stamp: 170 ring turned 14deg inside its 206 box, sized in Figma px of the 656.5 wide art (--r) */
.dfyreceipt-stamp { --r: calc(100cqw / 656.5); aspect-ratio: 1; display: grid; place-items: center; }
.dfyreceipt-ring {
  position: relative;
  box-sizing: border-box;
  width: calc(170 * var(--r));
  height: calc(170 * var(--r));
  border: calc(5 * var(--r)) solid #ff5a5a;
  border-radius: 50%;
  opacity: 0.9;
  rotate: 14deg;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  color: #ff5a5a;
}
.dfyreceipt-ring span { position: absolute; }
.dfyreceipt-one { left: calc(41.5 * var(--r)); top: calc(41 * var(--r)); font-size: calc(22 * var(--r)); letter-spacing: 0.08em; }
.dfyreceipt-season { left: calc(18.5 * var(--r)); top: calc(67 * var(--r)); font-size: calc(30 * var(--r)); letter-spacing: 0.06em; }

/* ---- part: lowpay ---- */
/* ============ 04 LOW ONE-TIME PAYMENT (Figma "04 Low one-time payment" 1268:1355, 1920 x 1048 + 40 gap to 05) ============
   Reuses Pro's .lowpay markup. DFY swaps the product box for the monster in the deck chair, so the art box is
   735 x 580.6 (x 905, y 269.4) instead of Pro's 726 x 590. */
.dfy-lowpay {
  --head-grad: linear-gradient(90deg, #0e8f87, #0e8f87);
  --app-shadow: 0 30px 60px -12px rgba(31, 168, 155, 0.22);
  --timeline-a: #b4f6ef;
  --timeline-b: #d2f7f4;
  --tag-bg: linear-gradient(160.68deg, #47d4c6 0%, #77e8dd 71.43%);
  --tag-shadow: rgba(46, 219, 201, 0.3);
  --tag-big: #fff;
  --ink-2: #16181d;
  overflow-x: clip;
}
@media (min-width: 1024px) { .dfy-lowpay { padding-bottom: 116px; } }
.dfy-lowpay .lowpay__text .lead { font-weight: 600; color: #1b9d90; }
@media (min-width: 1024px) { .dfy-lowpay .dfylowpay-first { margin-bottom: 34px; } } /* Figma: 62 under the first line, 28 elsewhere */

.dfy-lowpay .lowpay__art { --a: calc(100cqw / 735); width: min(735px, 100%); aspect-ratio: 735 / 580.6; }
@media (min-width: 1024px) { .dfy-lowpay .lowpay__art { width: min(735px, 100% - 625px); margin-left: -15px; } }
.dfy-lowpay .app-card { left: calc(175 * var(--a)); top: calc(128.6 * var(--a)); }
.dfylowpay-mascot { left: 0; top: calc(60.6 * var(--a)); width: calc(471 * var(--a)); height: auto; }
.dfy-lowpay .price-tag { left: calc(265 * var(--a)); }
@media (min-width: 1024px) { .dfy-lowpay .chevrons { margin-top: 58px; } }

/* ---- part: gtee ---- */
/* ============ DFY 05 GUARANTEE (Figma 1268:1384 "05 Guarantee": 1920 x 978, card 1808 x 838, +140 gap below) ============
   Reuses Pro's .gtee markup/classes; only the teal theme, the 1808 card width and the art/text positions change. */
.dfy-gtee {
  --gtee-bg: linear-gradient(90deg, #0e8f87 0%, #36bfb2 55%, #9ee3d6 100%);
  --gtee-hl-ink: #16181d;
  --shield-shadow: drop-shadow(0 26px 26px rgba(24, 153, 140, 0.35));
  padding-bottom: 64px;
}
.dfy-gtee .gtee__head .hl { border-radius: 0.375em; }            /* 24 at 64px */
/* art box = mascot (393 x 480 at x 306) + coin (300 x 300 at x 110, y +220): 589 x 520 */
.dfy-gtee .gtee__art { aspect-ratio: 589 / 520; }
.dfy-gtee .gtee__box { left: 33.277%; top: 0; width: 66.723%; }
.dfy-gtee .gtee__shield { left: 0; top: 42.308%; width: 50.934%; }
@media (min-width: 1024px) {
  .dfy-gtee { padding-bottom: 176px; }                             /* 36 under the chevrons + the 140 gap to 06 Pricing */
  /* full Figma width: 56px from each edge (1808 at 1920); art at x 110, text at x 880 (760 wide, 168 from the right) */
  .dfy-gtee .gtee__card { width: calc(100% - 112px); max-width: 1808px; padding: 90px 8.75% 24px 5.729%; }  /* % of the 1920 section: 168 right, 110 left */
  .dfy-gtee .gtee__body { margin-top: 36px; }                      /* art top 294 */
  .dfy-gtee .gtee__art { width: 38.497%; }                         /* 589 of the 1530 content width */
  .dfy-gtee .gtee__text { flex: 0 1 760px; margin-top: 54px; }     /* text top 348 */
  .dfy-gtee .dfygtee-gap { margin-top: 34px; }                     /* Figma: 60 above "No questions…" (26 elsewhere) */
  .dfy-gtee .chevrons { margin-top: 40px; }
}

/* ---- part: pricing ---- */
/* ============ DFY 06 PRICING (Figma 1268:1408 "06 Pricing": 1920 x 1505, card 720 x 1207, +60 gap below) ============
   Reuses Pro's .pricing / .price-card / .price-list / .cta; teal theme, no timer, no "was" price. */
.dfy-pricing {
  --head-grad: linear-gradient(90deg, #0e8f87, #0e8f87);          /* second line is solid teal in Figma */
  --price-head: linear-gradient(90deg, #0e8f87, #3cc6b8);
  --price-chip: #b4f6ef;
  --price-shadow: 0 40px 80px -20px rgba(31, 168, 155, 0.16), 0 2px 6px rgba(31, 168, 155, 0.06);
}
.dfy-pricing .price-card { --cta-ink: #16181d; --cta-sub: rgba(22, 24, 29, 0.7); --cta-arrow-bg: #16181d; }
.dfy-pricing .price-card__mini { width: 110px; margin-bottom: 8px; }
.dfy-pricing .price-card__price { flex-direction: column; align-items: flex-start; gap: 0; }   /* phones: the per-episode line sits under the price */
.dfy-pricing .price-card__was { display: block; margin-top: -6px; font-size: 14px; }
.dfy-pricing .price-list li::before { background-image: url("../images/pricing-check.svg"); }
.dfy-pricing .price-card__foot .cta { margin-top: 4px; }
.dfy-pricing .cta__btn {
  box-shadow: inset 0 -5px 6px rgba(20, 164, 149, 0.35), inset 0 3px 2px rgba(255, 255, 255, 0.8), 0 20px 22px rgba(194, 122, 0, 0.4);
}
@media (min-width: 640px) {
  .dfy-pricing .price-card__mini { left: 21px; width: 181px; }
  .dfy-pricing .price-card__price { flex-direction: row; align-items: center; gap: 14px; }
  .dfy-pricing .price-card__was { margin-top: 34px; font-size: 18px; }   /* sits low beside the $167 (Figma y 66) */
  .dfy-pricing .dfypricing-first { margin-bottom: 25px; }                /* Figma: 69 from item 1 to item 2 (44 elsewhere) */
  .dfy-pricing .price-list { gap: 18px; }                                /* rows 44 apart */
  .dfy-pricing .price-card__foot { margin-top: 31px; padding-top: 37px; } /* divider at 863, CTA ring 37 under it */
  /* the 632-wide ring overhangs the 592 foot (Figma x 60 of the 720 card) */
  .dfy-pricing .price-card__foot .cta { position: relative; left: 16px; max-width: none; margin-top: 0; }
}

/* ---- part: faq ---- */
/* ============ DFY 07 FAQ (Figma 1268:1552 "07 FAQ": 1920 x 1271) ============
   Reuses Pro's .faq; teal numbers and highlight box. Ten questions in two independent columns
   (610 wide, 60 apart) from 768px; one column in 01–10 order on phones. Every answer is visible. */
.dfy-faq {
  --violet: #17a193;                                               /* question numbers */
  --lav-bg: linear-gradient(166deg, #edfdfb 0%, #d5faf6 71.43%);   /* "Answered." box */
  padding-bottom: 80px;
}
.dfy-faq .dfyfaq-list { display: flex; flex-direction: column; }
.dfy-faq .dfyfaq-col { display: contents; }
.dfy-faq .dfyfaq-col:first-child .faq__item:nth-child(1) { order: 1; }
.dfy-faq .dfyfaq-col:first-child .faq__item:nth-child(2) { order: 3; }
.dfy-faq .dfyfaq-col:first-child .faq__item:nth-child(3) { order: 5; }
.dfy-faq .dfyfaq-col:first-child .faq__item:nth-child(4) { order: 7; }
.dfy-faq .dfyfaq-col:first-child .faq__item:nth-child(5) { order: 9; }
.dfy-faq .dfyfaq-col:last-child .faq__item:nth-child(1) { order: 2; }
.dfy-faq .dfyfaq-col:last-child .faq__item:nth-child(2) { order: 4; }
.dfy-faq .dfyfaq-col:last-child .faq__item:nth-child(3) { order: 6; }
.dfy-faq .dfyfaq-col:last-child .faq__item:nth-child(4) { order: 8; }
.dfy-faq .dfyfaq-col:last-child .faq__item:nth-child(5) { order: 10; }
@media (min-width: 768px) {
  .dfy-faq .dfyfaq-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .dfy-faq .dfyfaq-col { display: block; }
}
@media (min-width: 1024px) {
  .dfy-faq { padding-bottom: 122px; }                              /* last answer ends 156 above the frame bottom (34 is item padding) */
}


/* ============ DFY: centring + tighter vertical spacing (desktop) ============
   Overrides the section rules above (same selectors, later in the file). */

/* 02b: the four steps and the dotted path are placed from the centre of the section, so they
   stay centred on screens wider than 1920 (they used to start at the left edge). */
@media (min-width: 1024px) {
  .dfychars-path { left: calc(50% - 800 * var(--s)); }
  .dfychars-step { left: calc(50% + (var(--cx) - 960 - var(--w) / 2) * var(--s)); }
}

/* Spacing: about a third less space above the hero headline and between sections */
@media (min-width: 1024px) {
  .dfy-hero .hero-card { padding-top: calc(96 * var(--s)); }
  .dfy-hero.hero { padding-bottom: calc(130 * var(--s)); }
  .dfy-vs.vs { padding: 100px 0 180px; }
  .dfychars-inner { height: calc(924 * var(--s)); }
  .dfy-inside .intro + .frow { margin-top: calc(100 * var(--s)); }
  .dfy-inside .frow { margin-top: calc(110 * var(--s)); }
  .dfy-inside .frow:last-child { margin-bottom: calc(150 * var(--s)); }
  .dfyhow-in { padding-top: calc(90 * var(--s)); padding-bottom: calc(96 * var(--s)); }
  .dfyshow-in { padding-top: calc(100 * var(--s)); padding-bottom: calc(120 * var(--s)); }
  .dfy-calendar { padding-bottom: calc(96 * var(--s)); }
  .dfycal-card { padding-top: calc(80 * var(--s)); }
  .dfy-bento { padding-bottom: 130px; }
  .dfy-receipt { padding-bottom: 70px; }
  .dfy-lowpay { padding-top: 60px; padding-bottom: 80px; }
  .dfy-gtee { padding-bottom: 120px; }
  .dfy-gtee .gtee__card { padding-top: 70px; }
  .dfy-pricing { padding-bottom: 72px; }
}