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

/* ==========================================
   RocketToons OTO1 — Elite (Figma 617: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 Pro page (pro/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: #2457f0;                 /* script lines, feature numbers, dots */

  /* hero card */
  --hero-bg: #2457f0;
  --hl-bg: linear-gradient(90deg, #e9ffb8, #b9f2a6);
  --hl-ink: #0b1f5c;
  --hl-shadow: 0 12px 15px rgba(11, 31, 92, 0.3), inset 0 2px 2px rgba(255, 255, 255, 0.8);
  --hl-pad: 0.095em 0.31em 0.143em;  /* 8 / 26 / 12 at 84px */
  --hl-r: 0.31em;
  --title-lh: 1.1;
  --title-gap: 0.167em;              /* 14px between the two lines */
  --title-inline-gap: 0.262em;       /* 22px between "Unlock" and the box */
  --sub-weight: 600;
  --sub-color: #fff;
  --sub-track: -0.01em;
  --sub-box-fs: 1em;
  --sub-box-pad: 0.214em 0.571em 0.357em; /* 6 / 16 / 10 at 28px */
  --cap-gap: 16px;                   /* capsule to offer card */
  --cap-bg: rgba(36, 87, 240, 0.12); /* capsules on the page background */
  --badges-bg: #eef5fe;
  --badge-bg: #cfe2fa;
  --step-done: #1f9d5c;

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

  /* 02 compare */
  --elig-hl: #ffe08a;
  --row-stripe: #f3f6fb;
  --row-dot: #2457f0;
  --plan-bg: linear-gradient(180deg, #1638c9 0%, #2457f0 50%, #1b3fd1 100%);
  --plan-shadow: 0 24px 50px -12px rgba(22, 56, 201, 0.35);
  --plan-blob: rgba(98, 208, 255, 0.45);

  /* 03 inside */
  --intro-glow: rgba(107, 166, 242, 0.22);

  /* 04 low payment */
  --head-grad: linear-gradient(90deg, #2457f0, #12a3c4);
  --lead-strong: #2457f0;
  --lead-rest: #3f4757;
  --lowpay-blob: rgba(107, 166, 242, 0.25);
  --app-shadow: 0 30px 60px -12px rgba(11, 42, 92, 0.22);
  --timeline-a: #e3f7a8;
  --timeline-b: #cfe2fa;
  --tag-bg: linear-gradient(160.68deg, #1638c9 0%, #2994ff 71.43%);
  --tag-shadow: rgba(22, 56, 201, 0.3);
  --tag-big: #e3f7a8;

  /* 05 guarantee */
  --gtee-bg: #1b3fd1;
  --gtee-hl-ink: #0b1f5c;
  --gtee-strong: #e3f7a8;
  --shield-shadow: drop-shadow(0 30px 30px rgba(5, 16, 58, 0.35));
  --gtee-body-mt: 49px;              /* art top 311, headline at 90 */
  --gtee-text-mt: 37px;              /* text top 348 */

  /* 06 pricing */
  --price-head: linear-gradient(180deg, #1638c9, #2994ff);
  --price-blob: rgba(98, 208, 255, 0.6);
  --price-chip: #e3f7a8;
  --price-shadow: 0 40px 80px -20px rgba(11, 42, 92, 0.16), 0 2px 6px rgba(11, 42, 92, 0.06);
}


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

/* Headline highlight box on a light or blue section (Figma green gradient box: 20px pad, 22 radius, 84 tall at 64px) */
.hl-box {
  display: inline-block;
  padding: 0 0.32em;
  border-radius: 0.34em;
  background: var(--hl-bg);
  line-height: 1.31;
  white-space: nowrap;
  color: #161829;
}

/* 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 752 + "Video card" 1140 x 650) ============
   The card holds chip, headline and sub line. The video card is pulled up into it:
   360 of its 650px overlap the card, as in Figma. The offer card now sits in the buy box. */
.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: 40px 16px calc(var(--vid-w) * 0.3158 + 28px);
  color: #fff;
  text-align: center;
}
@media (min-width: 1024px) {
  .hero-card {
    margin: 0 56px;
    border-radius: 48px;
    padding: 44px 24px calc(var(--vid-w) * 0.3158 + 40px);
  }
}
.hero-card > :not(.blobs, .hero-mesh, .hero-bands) { position: relative; z-index: 1; }
/* The mesh keeps its Figma height (W x H) and the shorter card clips it; on narrow
   screens it stretches to the card instead. */
.hero-card > .blobs { bottom: auto; aspect-ratio: calc(var(--W) / var(--H)); min-height: 100%; }

.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; }

/* Pro only: 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-self: stretch;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 8px;                /* 24 gap + 8 = 32 to the timer */
}
@media (min-width: 1024px) { .offer-stage { margin-bottom: 28px; } } /* 28 gap + 28 = 56, as in Figma */
.capsule {
  display: none;
  flex: none;
  width: 64px;
  height: 201.5px;
  border-radius: 32px;
  background: var(--cap-bg);
  -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.3158) 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: 64px; } }

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

.buy-box__title {
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: #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 Elite vs Commercial" 1920 x 1601) ============ */
.vs { padding: 80px 0 64px; text-align: center; }
@media (min-width: 1024px) { .vs { padding: 168px 0 120px; } }
.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; }
}


/* ============ 02b WHY ELITE (Figma "02b Why Elite — film library": band 1808 x 985) ============
   Blue band: headline, the 60-film grid (one picture, Figma "Film library" 1476 x 363, drawn with
   its glow at 1500 x 387) and two callouts placed over it in Figma px of the grid (--g).
   Below 1024px the callouts drop into a row under the grid. */
.library { margin-bottom: 48px; padding: 0 12px; }
@media (min-width: 1024px) { .library { margin-bottom: 80px; padding: 0 56px; } }
.library__band {
  position: relative;
  overflow: hidden;
  max-width: 1808px;
  margin: 0 auto;
  padding: 48px 16px 40px;
  border-radius: 28px;
  background: linear-gradient(151deg, #3d6bff 0%, #1a44d6 71.4%);
  text-align: center;
  color: #fff;
}
@media (min-width: 1024px) { .library__band { padding: 96px 40px 90px; border-radius: 72px; } }
.library__band > :not(.blobs) { position: relative; z-index: 1; }
.library__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1em;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.03em;
}
.library__line2 { display: flex; align-items: center; gap: 0.25em; }
.library__script { font-family: var(--font-script); font-size: 1.1875em; font-weight: 400; letter-spacing: 0; }
.library__sub { margin-top: 20px; font-weight: 500; line-height: 1.4; color: rgba(255, 255, 255, 0.8); }
@media (min-width: 1024px) { .library__sub { margin-top: 32px; } }

.library__art {
  position: relative;
  width: min(1476px, 100%);
  margin: 32px auto 0;
  container-type: inline-size;
}
@media (min-width: 1024px) { .library__art { margin-top: 71px; } }
.library__grid { display: block; width: 101.63%; max-width: none; height: auto; }
.callout {
  --g: calc(100cqw / 1476);
  display: inline-flex;
  padding: 9px 16px 9px 12px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.callout--stop { background: #ff5a5a; color: #fff; filter: drop-shadow(0 10px 12px rgba(122, 0, 0, 0.35)); rotate: 3deg; }
.callout--go { background: var(--hl-bg); color: #161829; filter: drop-shadow(0 10px 12px rgba(11, 26, 74, 0.35)); rotate: -3deg; }
@media (max-width: 1023px) {
  .library__art { padding-bottom: 8px; }
  .library__art .callout { margin: 14px 6px 0; }
}
@media (min-width: 1024px) {
  .callout { position: absolute; font-size: 15px; }
  .callout--stop { left: calc(-42 * var(--g)); top: calc(249 * var(--g)); }
  .callout--go { left: calc(258 * var(--g)); top: calc(368 * var(--g)); }
}

.library__note {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding: 12px 22px 12px 12px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.14);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
}
.library__note i { flex: none; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(151deg, #ffe08a, #e0a526); }
@media (min-width: 1024px) { .library__note { margin-top: 56px; font-size: 18px; } }


/* ============ 03 INSIDE (Figma "03 Inside Elite": 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 72px;
}
@media (min-width: 1024px) { .inside { padding: 40px 0 140px; } }

.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; }
}

/* Benefit bullets under each feature text (Figma "Benefit bullets": 24px check, 12 gap, 18px SemiBold) */
.fcopy__list { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.fcopy__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: rgba(22, 24, 41, 0.9);
}
.fcopy__list li::before {
  content: "";
  flex: none;
  width: 24px;
  height: 24px;
  background: url("../images/icons/fcopy-check.svg") center / contain no-repeat;
}
@media (min-width: 1024px) { .fcopy__list li { font-size: 18px; } }


/* ============ 03b WHAT YOU CAN RUN (Figma "03b What you can run with Elite — bento" 1920 x 1198) ============
   Headline, then six tiles on a 1280-wide, 4-column grid (302 columns, 24 gaps, 300 rows). Each tile is
   drawn in Figma px of its own width (--tw, 628 or 302) and height (--th), scaled by --u; the grid cell
   is the container. Tablets: two columns. Phones: one column, minimum font sizes on the wide tiles. */
.bento { margin-bottom: 96px; padding: 0 16px; }
@media (min-width: 1024px) { .bento { margin-bottom: 200px; } }
.bento__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  max-width: 1280px;
  margin: 40px auto 0;
}
.cell { container-type: inline-size; }
@media (min-width: 640px) {
  .bento__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .cell--wide { grid-column: span 2; }
}
@media (min-width: 1024px) {
  .bento__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 80px; }
  .cell--tall { grid-row: span 2; }
}
.tile {
  --u: calc(100cqw / var(--tw));
  position: relative;
  overflow: hidden;
  height: 100%;
  min-height: calc(var(--th) * var(--u));
  padding: calc(40 * var(--u));
  border-radius: calc(44 * var(--u));
  color: #161829;
}
.tile--daily { --ts: 52; --tmw: 420; background: linear-gradient(151deg, #4f7bff 0%, #1f48e0 71.4%); color: #fff; }
.tile--long { --ts: 40; --tmw: 300; background: linear-gradient(151deg, #e9ffb8 0%, #b9f2a6 71.4%); }
.tile--agency { --ts: 30; --tmw: 222; background: linear-gradient(151deg, #c9ecff 0%, #8ed0ff 71.4%); }
.tile--platform { --ts: 30; --tmw: 222; background: #f6f1e6; }
.tile--faceless { --ts: 40; --tmw: 320; background: linear-gradient(151deg, #ffb59e 0%, #ff8a73 71.4%); }
.tile--catalogue { --ts: 40; --tmw: 290; background: #141826; color: #fff; }

.tile__kicker { font-size: max(11px, calc(13 * var(--u))); font-weight: 700; line-height: 1.25; letter-spacing: 0.12em; opacity: 0.55; }
.tile--daily .tile__kicker { opacity: 0.7; }
.tile--catalogue .tile__kicker { opacity: 0.5; }
.tile__title {
  position: relative;
  z-index: 1;
  max-width: calc(var(--tmw) * var(--u));
  margin-top: calc(18 * var(--u));
  font-size: max(22px, calc(var(--ts) * var(--u)));
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

/* Pictures: Figma x/y is the top-left corner, rotation is around it (CSS turns the other way) */
.tile__img {
  position: absolute;
  object-fit: cover;
  border: calc(6 * var(--u)) solid #fff;
  box-shadow: 0 calc(24 * var(--u)) calc(48 * var(--u)) rgba(20, 24, 38, 0.25);
  transform-origin: 0 0;
}
.tile--daily .tile__img { left: calc(178 * var(--u)); top: calc(324 * var(--u)); width: calc(470 * var(--u)); height: calc(330 * var(--u)); border-radius: calc(34 * var(--u)); rotate: 4deg; }
.tile--long .tile__img { left: calc(348 * var(--u)); top: calc(40 * var(--u)); width: calc(300 * var(--u)); height: calc(250 * var(--u)); border-radius: calc(28 * var(--u)); rotate: -4deg; }
.tile--platform .tile__img { left: calc(30 * var(--u)); top: calc(174 * var(--u)); width: calc(242 * var(--u)); height: calc(150 * var(--u)); border-radius: calc(22 * var(--u)); rotate: 3deg; }
.tile--faceless .tile__img { left: calc(388 * var(--u)); top: calc(36 * var(--u)); width: calc(190 * var(--u)); height: calc(250 * var(--u)); border-radius: calc(26 * var(--u)); rotate: -5deg; }
.tile--catalogue .tile__img { left: calc(348 * var(--u)); top: calc(50 * var(--u)); width: calc(250 * var(--u)); height: calc(170 * var(--u)); border: 0; border-radius: calc(26 * var(--u)); rotate: 3deg; }

.tile__pill {
  position: absolute;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--u));
  padding: calc(8 * var(--u)) calc(14 * var(--u));
  border-radius: 99px;
  background: #fff;
  box-shadow: 0 calc(8 * var(--u)) calc(18 * var(--u)) rgba(20, 24, 38, 0.18);
  font-size: max(12px, calc(14 * var(--u)));
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  color: #161829;
  transform-origin: 0 0;
}
.tile__pill--day { left: calc(40 * var(--u)); top: calc(546 * var(--u)); padding-left: calc(8 * var(--u)); background: linear-gradient(151deg, #e9ffb8, #b9f2a6); font-size: max(12px, calc(16 * var(--u))); }
.tile__pill--day img { width: max(16px, calc(22 * var(--u))); height: max(16px, calc(22 * var(--u))); }
.tile__pill--time { left: calc(328 * var(--u)); top: calc(240 * var(--u)); background: #161829; font-size: max(12px, calc(16 * var(--u))); color: #fff; }
.tile__pill--client { left: calc((40 + var(--i) * 14) * var(--u)); top: calc((158 + var(--i) * 40) * var(--u)); font-size: max(12px, calc(13 * var(--u))); }
.tile--agency .tile__pill:nth-of-type(1) { rotate: 3deg; }
.tile--agency .tile__pill:nth-of-type(2) { rotate: -2deg; }
.tile--agency .tile__pill:nth-of-type(3) { rotate: 2deg; }
.tile__pill--tone { left: calc(40 * var(--u)); top: calc(226 * var(--u)); rotate: 3deg; }
.tile__pill--kept { left: calc(368 * var(--u)); top: calc(244 * var(--u)); background: linear-gradient(151deg, #ffe08a, #ffc94d); font-size: max(12px, calc(15 * var(--u))); }


/* ============ 03c WHAT ELITE REPLACES (Figma "03c What Elite replaces — receipt" 1920 x 997) ============
   Copy on the left (600 wide); the receipt and stamp are pictures placed in Figma px of a 760 x 900
   art box (--u) that overlaps the copy column by 80. Tablets/phones: art under the copy. */
.replace { margin-bottom: 40px; padding: 0 16px; }
@media (min-width: 1024px) { .replace { margin-bottom: 20px; } }
.replace__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
}
.replace__copy { width: 100%; max-width: 600px; }
@media (min-width: 1024px) {
  .replace__body { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 0; }
  .replace__copy { flex: 0 0 600px; padding-top: 111px; }
}
.replace__kicker { font-size: 13px; font-weight: 700; line-height: 1.3; letter-spacing: 0.14em; color: var(--accent); }
@media (min-width: 1024px) { .replace__kicker { font-size: 14px; } }
.replace__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.07em;
  margin-top: 12px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.03em;
  color: #161829;
}
.replace__head > span:last-child { display: flex; align-items: center; gap: 0.23em; }
.replace__head .hl-box { padding: 0 0.3em; border-radius: 0.33em; }
.replace__text { max-width: 540px; margin-top: 20px; font-size: 17px; line-height: 1.52; color: var(--muted); }
@media (min-width: 1024px) { .replace__text { margin-top: 24px; font-size: 21px; line-height: 32px; } }
.replace__total {
  position: relative;
  display: block;
  width: fit-content;
  margin-top: 24px;
  font-size: 72px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.06em;
  color: #e03e3e;
}
@media (min-width: 640px) { .replace__total { font-size: 110px; } }
@media (min-width: 1024px) { .replace__total { margin-top: 40px; margin-left: -0.04em; font-size: 150px; } }
.replace__swoosh { position: absolute; left: 0.04em; bottom: -0.04em; width: 2.43em; height: auto; }
.replace__month { font-family: var(--font-script); font-size: 36px; line-height: 1.25; color: #161829; }
@media (min-width: 1024px) { .replace__month { font-size: 58px; } }

.replace__art {
  position: relative;
  width: min(760px, 100%);
  aspect-ratio: 760 / 900;
  container-type: inline-size;
}
.replace__art img { --u: calc(100cqw / 760); position: absolute; height: auto; }
.replace__receipt { left: calc(90 * var(--u)); top: calc(3 * var(--u)); width: calc(661 * var(--u)); }
.replace__stamp { left: calc(8 * var(--u)); top: calc(609 * var(--u)); width: calc(206 * var(--u)); }
@media (min-width: 1024px) { .replace__art { flex: none; margin: -30px 0 0 -80px; } }

.replace__close { margin-top: 32px; padding: 0 8px; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; text-align: center; color: #161829; }
.replace__close .hl-box { padding: 0 0.41em; border-radius: 0.41em; line-height: 1.38; }
@media (min-width: 1024px) { .replace__close { margin-top: 80px; } }


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

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


/* ============ 07 FAQ (Figma "07 FAQ" 1920 x 772) ============
   Members-area decline link, headline, then two columns 610 wide, 60 apart; each item: hairline,
   number, question, answer. Every answer is visible (no accordions). */
.faq { padding: 56px 0 120px; }
@media (min-width: 1024px) { .faq { padding: 100px 0 180px; } }
.faq__decline {
  display: block;
  width: fit-content;
  max-width: calc(100% - 32px);
  margin: 0 auto;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  color: #8a8f9c;
}
@media (min-width: 1024px) { .faq__decline { font-size: 17px; } }
.faq__head { margin-top: 56px; }
@media (min-width: 1024px) { .faq__head { margin-top: 120px; } }
.faq__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: min(1280px, 100% - 32px);
  margin: 40px auto 0;
}
@media (min-width: 900px) {
  .faq__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 60px; margin-top: 70px; }
}
/* one column: read 01, 02, 03 ... instead of column by column */
@media (max-width: 899px) {
  .faq__col { display: contents; }
  .faq__col:first-child .faq__item:nth-child(1) { order: 1; }
  .faq__col:last-child .faq__item:nth-child(1) { order: 2; }
  .faq__col:first-child .faq__item:nth-child(2) { order: 3; }
  .faq__col:last-child .faq__item:nth-child(2) { order: 4; }
  .faq__col:first-child .faq__item:nth-child(3) { order: 5; }
  .faq__col:last-child .faq__item:nth-child(3) { order: 6; }
}
.faq__item {
  position: relative;
  padding: 24px 0 32px 44px;
  border-top: 2px solid rgba(22, 24, 41, 0.1);
}
.faq__num {
  position: absolute;
  left: 0;
  top: 28px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.1em;
  color: var(--accent);
}
.faq__item h3 { font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; color: #161829; }
.faq__item p { margin-top: 10px; font-size: 16px; line-height: 1.5; color: var(--muted); }
@media (min-width: 1024px) {
  .faq__item { padding: 24px 0 34px 50px; }
  .faq__item h3 { font-size: 23px; }
  .faq__item p { font-size: 18px; line-height: 27px; }
}


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

/* ---- Elite feature 01: unlimited films (Figma 698:128) ----
   The 50-film cap is struck through, the count rolls on to 51, film #51 is published
   and #52 is already rendering. Live: the counter rolls up into place and the strike
   and pill drop on, the render bar keeps filling, the two cards float. */
.fs-01 {
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, #dcebff 0%, #a9cbff 33.333%, #5e92f0 66.667%, #2a5bd6 100%);
  /* Figma: radius 101, corner smoothing 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;
  line-height: normal;
  font-weight: 700;
  color: #16181d;
}
.fs-01 img { -webkit-user-drag: none; }
.fs-01 p { margin: 0; white-space: nowrap; }

/* Blurred colour blobs (Figma ellipses, layer blur 110) */
.fs-01 .fs01-glow { position: absolute; border-radius: 50%; filter: blur(calc(55 * var(--f))); pointer-events: none; }
.fs-01 .fs01-glow--1 { left: calc(-120 * var(--f)); top: calc(520 * var(--f)); width: calc(560 * var(--f)); height: calc(280 * var(--f)); background: rgba(36, 87, 240, 0.75); }
.fs-01 .fs01-glow--2 { left: calc(260 * var(--f)); top: calc(520 * var(--f)); width: calc(620 * var(--f)); height: calc(300 * var(--f)); background: rgba(79, 134, 240, 0.7); }
.fs-01 .fs01-glow--3 { left: calc(480 * var(--f)); top: calc(200 * var(--f)); width: calc(360 * var(--f)); height: calc(260 * var(--f)); background: rgba(159, 227, 240, 0.45); }
.fs-01 .fs01-glow--4 { left: calc(-150 * var(--f)); top: calc(-140 * var(--f)); width: calc(620 * var(--f)); height: calc(320 * var(--f)); background: rgba(255, 255, 255, 0.8); }

/* Counter column (Figma "Counter roll (animate)") */
.fs-01 .fs01-counter { position: absolute; left: calc(40 * var(--f)); top: 0; width: calc(300 * var(--f)); height: calc(676 * var(--f)); }
.fs-01 .fs01-roll { position: absolute; inset: 0; }
.fs-01 .fs01-n { position: absolute; left: 0; font-size: calc(150 * var(--f)); letter-spacing: calc(-6 * var(--f)); color: #fff; }
.fs-01 .fs01-n--48 { top: calc(-30 * var(--f)); color: rgba(255, 255, 255, 0.1); }
.fs-01 .fs01-n--49 { top: calc(88 * var(--f));  color: rgba(255, 255, 255, 0.16); }
.fs-01 .fs01-n--50 { top: calc(206 * var(--f)); color: rgba(255, 255, 255, 0.28); }
.fs-01 .fs01-n--51 { top: calc(324 * var(--f)); }
.fs-01 .fs01-n--52 { top: calc(442 * var(--f)); color: rgba(255, 255, 255, 0.24); }
.fs-01 .fs01-n--53 { top: calc(560 * var(--f)); color: rgba(255, 255, 255, 0.12); }
.fs-01 .fs01-strike {
  position: absolute; left: calc(-15.7 * var(--f)); top: calc(318.29 * var(--f)); width: calc(206 * var(--f)); height: calc(10 * var(--f));
  border-radius: calc(5 * var(--f)); background: #f2b33d; rotate: 8deg;
}
.fs-01 .fs01-cap {
  position: absolute; left: calc(140.33 * var(--f)); top: calc(277.65 * var(--f)); translate: -50% -50%; rotate: 4deg;
  padding: calc(6 * var(--f)) calc(12 * var(--f)); border-radius: calc(99 * var(--f)); background: #f2b33d;
  filter: drop-shadow(0 calc(8 * var(--f)) calc(4.5 * var(--f)) rgba(122, 78, 0, 0.2));
  font-size: calc(13 * var(--f)); color: #16181d;
}

/* Glass cards */
.fs-01 .fs01-card {
  position: absolute; overflow: hidden;
  border: calc(1.5 * var(--f)) solid #fff;
  box-shadow: inset 0 calc(2 * var(--f)) calc(2 * var(--f)) #fff, 0 calc(2 * var(--f)) calc(6 * var(--f)) rgba(11, 42, 92, 0.05), 0 calc(24 * var(--f)) calc(48 * var(--f)) calc(-12 * var(--f)) rgba(11, 42, 92, 0.18);
}
.fs-01 .fs01-card img { position: absolute; display: block; object-fit: cover; }

/* Film #52, peeking out behind (rotated 7°) */
.fs-01 .fs01-peek {
  left: calc(404.51 * var(--f)); top: calc(126.79 * var(--f)); width: calc(300 * var(--f)); height: calc(400 * var(--f)); rotate: 7deg;
  border-radius: calc(30 * var(--f)); background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(231, 240, 255, 0.93));
}
.fs-01 .fs01-peek__img { left: calc(10.5 * var(--f)); top: calc(10.5 * var(--f)); width: calc(276 * var(--f)); height: calc(240 * var(--f)); border-radius: calc(22 * var(--f)); }
.fs-01 .fs01-peek__kicker { position: absolute; left: calc(16.5 * var(--f)); top: calc(264.5 * var(--f)); font-size: calc(13 * var(--f)); font-weight: 600; color: #6b7486; }
.fs-01 .fs01-peek__title { position: absolute; left: calc(16.5 * var(--f)); top: calc(284.5 * var(--f)); font-size: calc(18 * var(--f)); }
.fs-01 .fs01-peek__track { position: absolute; left: calc(16.5 * var(--f)); top: calc(320.5 * var(--f)); width: calc(264 * var(--f)); height: calc(8 * var(--f)); border-radius: calc(4 * var(--f)); background: rgba(22, 24, 29, 0.08); overflow: hidden; }
.fs-01 .fs01-peek__fill { position: absolute; left: 0; top: 0; width: calc(170 * var(--f)); height: 100%; border-radius: calc(4 * var(--f)); background: #2457f0; }

/* Film #51 poster */
.fs-01 .fs01-poster {
  left: calc(330 * var(--f)); top: calc(120 * var(--f)); width: calc(330 * var(--f)); height: calc(450 * var(--f));
  border-radius: calc(32 * var(--f)); background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(234, 242, 255, 0.93));
}
.fs-01 .fs01-poster__img { left: calc(10.5 * var(--f)); top: calc(10.5 * var(--f)); width: calc(306 * var(--f)); height: calc(286 * var(--f)); border-radius: calc(24 * var(--f)); }
.fs-01 .fs01-play {
  position: absolute; left: calc(135.5 * var(--f)); top: calc(122.5 * var(--f)); width: calc(56 * var(--f)); height: calc(56 * var(--f)); border-radius: 50%;
  background: rgba(255, 255, 255, 0.94); filter: drop-shadow(0 calc(6 * var(--f)) calc(4 * var(--f)) rgba(0, 0, 0, 0.25));
}
.fs-01 .fs01-play img { position: absolute; left: calc(20.16 * var(--f)); top: calc(16.8 * var(--f)); width: calc(20.16 * var(--f)); height: calc(22.4 * var(--f)); }
.fs-01 .fs01-poster__num {
  position: absolute; left: calc(22.5 * var(--f)); top: calc(22.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)); color: #fff; white-space: nowrap;
}
.fs-01 .fs01-poster__title { position: absolute; left: calc(20.5 * var(--f)); top: calc(310.5 * var(--f)); font-size: calc(22 * var(--f)); line-height: calc(28 * var(--f)); letter-spacing: calc(-0.33 * var(--f)); }
.fs-01 .fs01-pill {
  position: absolute; top: calc(386.5 * var(--f)); display: flex; align-items: center; gap: calc(6 * var(--f));
  padding: calc(6 * var(--f)) calc(12 * var(--f)); border-radius: calc(99 * var(--f)); font-size: calc(13 * var(--f)); white-space: pre;
}
.fs-01 .fs01-pill--live { left: calc(20.5 * var(--f)); padding-left: calc(8 * var(--f)); background: rgba(31, 157, 92, 0.12); color: #1b8a51; }
.fs-01 .fs01-pill--live i { width: calc(10 * var(--f)); height: calc(10 * var(--f)); border-radius: 50%; background: #1f9d5c; }
.fs-01 .fs01-pill--limit { left: calc(215.5 * var(--f)); background: #e3f7a8; color: #16181d; }

/* ---- motion (only while the stage is on screen) ---- */
@media (prefers-reduced-motion: no-preference) {
  .fvis.is-live .fs-01 .fs01-roll { animation: fs01-roll 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .fvis.is-live .fs-01 .fs01-strike { animation: fs01-strike 0.5s 1.2s cubic-bezier(0.3, 1.4, 0.5, 1) both; }
  .fvis.is-live .fs-01 .fs01-cap { animation: fs01-pop 0.45s 1.5s cubic-bezier(0.3, 1.5, 0.5, 1) both; }
  .fvis.is-live .fs-01 .fs01-peek__fill { animation: fs01-render 4.5s ease-in-out infinite; }
  .fvis.is-live .fs-01 .fs01-poster { animation: fs01-float 6s ease-in-out infinite; }
  .fvis.is-live .fs-01 .fs01-peek { animation: fs01-float-peek 6s -3s ease-in-out infinite; }
}
@keyframes fs01-roll {
  from { transform: translateY(calc(354 * var(--f))); }
  to   { transform: none; }
}
@keyframes fs01-strike {
  from { scale: 0 1; }
  to   { scale: 1 1; }
}
@keyframes fs01-pop {
  from { opacity: 0; scale: 0.6; }
  to   { opacity: 1; scale: 1; }
}
@keyframes fs01-render {
  0%   { width: calc(40 * var(--f)); }
  70%  { width: calc(264 * var(--f)); }
  85%  { width: calc(264 * var(--f)); }
  100% { width: calc(40 * var(--f)); }
}
@keyframes fs01-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(-8 * var(--f))); }
}
@keyframes fs01-float-peek {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(-6 * var(--f))); }
}

/* ---- Elite feature 02: 15-minute movies (Figma 698:164) ----
   A tilted film strip runs past the 3:00 mark where Commercial stops, on to 15:00.
   Live: the strip's frames and sprocket holes scroll along it (Figma "Filmstrip
   (animate scroll)"); at rest it sits exactly as drawn. */
.fs-02 {
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, #e6fbff 0%, #b6eef6 33.333%, #5cc6e0 66.667%, #2584c0 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;
  line-height: normal;
  font-weight: 700;
  color: #16181d;
}
.fs-02 img { -webkit-user-drag: none; }
.fs-02 p { margin: 0; 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--1 { left: calc(-120 * var(--f)); top: calc(520 * var(--f)); width: calc(560 * var(--f)); height: calc(280 * var(--f)); background: rgba(31, 127, 192, 0.7); }
.fs-02 .fs02-glow--2 { left: calc(260 * var(--f)); top: calc(520 * var(--f)); width: calc(620 * var(--f)); height: calc(300 * var(--f)); background: rgba(58, 176, 216, 0.7); }
.fs-02 .fs02-glow--3 { left: calc(460 * var(--f)); top: calc(60 * var(--f)); width: calc(420 * var(--f)); height: calc(300 * var(--f)); background: rgba(201, 244, 255, 0.7); }
.fs-02 .fs02-glow--4 { left: calc(-150 * var(--f)); top: calc(-140 * var(--f)); width: calc(620 * var(--f)); height: calc(320 * var(--f)); background: rgba(255, 255, 255, 0.85); }

.fs-02 .fs02-big { position: absolute; left: calc(40 * var(--f)); top: calc(10 * var(--f)); font-size: calc(230 * var(--f)); letter-spacing: calc(-11.5 * var(--f)); color: rgba(255, 255, 255, 0.32); }

/* Film strip: 1400 x 150, rotated 7°, centred where Figma has it */
.fs-02 .fs02-strip {
  position: absolute; left: calc(-214.36 * var(--f)); top: calc(334.75 * var(--f)); width: calc(1400 * var(--f)); height: calc(150 * var(--f)); rotate: 7deg;
  overflow: hidden; border-radius: calc(14 * var(--f)); background: rgba(19, 35, 63, 0.92);
  box-shadow: 0 calc(20 * var(--f)) calc(40 * var(--f)) calc(-10 * var(--f)) rgba(11, 31, 58, 0.3);
}
/* Sprocket holes: a 26px tile (14 x 10 hole, radius 3) repeated along the strip */
.fs-02 .fs02-holes {
  position: absolute; left: calc(10 * var(--f)); width: calc(1430 * var(--f)); height: calc(10 * var(--f));
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 10"><rect width="14" height="10" rx="3" fill="white" fill-opacity="0.55"/></svg>') 0 0 / calc(26 * var(--f)) 100% repeat-x;
}
.fs-02 .fs02-holes--top { top: calc(8 * var(--f)); }
.fs-02 .fs02-holes--bottom { top: calc(130 * var(--f)); }
.fs-02 .fs02-frames { position: absolute; inset: 0; }
.fs-02 .fs02-frame {
  position: absolute; left: calc((14 + 126 * var(--i)) * var(--f)); top: calc(29 * var(--f));
  width: calc(118 * var(--f)); height: calc(92 * var(--f)); border-radius: calc(8 * var(--f)); object-fit: cover; display: block;
}

/* Markers: 3 x 190 lines, rotated 7° like the strip */
.fs-02 .fs02-mark { position: absolute; width: calc(3 * var(--f)); height: calc(190 * var(--f)); rotate: 7deg; }
.fs-02 .fs02-mark--commercial { left: calc(218.41 * var(--f)); top: calc(245.47 * var(--f)); background: #f2b33d; }
.fs-02 .fs02-mark--elite { left: calc(628.41 * var(--f)); top: calc(196.27 * var(--f)); background: #fff; }
.fs-02 .fs02-tag { position: absolute; padding: calc(6 * var(--f)) calc(12 * var(--f)); border-radius: calc(99 * var(--f)); font-size: calc(13 * var(--f)); color: #16181d; }
.fs-02 .fs02-tag--commercial { left: calc(153.5 * var(--f)); top: calc(208 * var(--f)); background: #f2b33d; }
.fs-02 .fs02-tag--elite { left: calc(624 * var(--f)); top: calc(152.8 * var(--f)); background: #fff; }

/* Film card */
.fs-02 .fs02-card {
  position: absolute; left: calc(320 * var(--f)); top: calc(460 * var(--f)); width: calc(400 * var(--f)); height: calc(170 * 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(230, 248, 255, 0.93));
  box-shadow: inset 0 calc(2 * var(--f)) calc(2 * var(--f)) #fff, 0 calc(2 * var(--f)) calc(6 * var(--f)) rgba(11, 42, 92, 0.05), 0 calc(24 * var(--f)) calc(48 * var(--f)) calc(-12 * var(--f)) rgba(11, 42, 92, 0.18);
}
.fs-02 .fs02-card__img { position: absolute; left: calc(14.5 * var(--f)); top: calc(14.5 * var(--f)); width: calc(120 * var(--f)); height: calc(138 * var(--f)); border-radius: calc(18 * var(--f)); object-fit: cover; display: block; }
.fs-02 .fs02-play {
  position: absolute; left: calc(50.5 * var(--f)); top: calc(58.5 * var(--f)); width: calc(46 * var(--f)); height: calc(46 * var(--f)); border-radius: 50%;
  background: rgba(255, 255, 255, 0.94); filter: drop-shadow(0 calc(6 * var(--f)) calc(4 * var(--f)) rgba(0, 0, 0, 0.25));
}
.fs-02 .fs02-play img { position: absolute; left: calc(16.56 * var(--f)); top: calc(13.8 * var(--f)); width: calc(16.56 * var(--f)); height: calc(18.4 * var(--f)); }
.fs-02 .fs02-card__title { position: absolute; left: calc(150.5 * var(--f)); top: calc(20.5 * var(--f)); font-size: calc(20 * var(--f)); letter-spacing: calc(-0.2 * var(--f)); }
.fs-02 .fs02-card__meta { position: absolute; left: calc(150.5 * var(--f)); top: calc(48.5 * var(--f)); font-size: calc(14 * var(--f)); font-weight: 500; color: #6b7486; }
.fs-02 .fs02-lengths { position: absolute; left: calc(150.5 * var(--f)); top: calc(94.5 * var(--f)); display: flex; gap: calc(6 * var(--f)); }
.fs-02 .fs02-lengths span {
  padding: calc(9 * var(--f)) calc(16 * var(--f)); border-radius: calc(12 * var(--f)); background: rgba(22, 24, 29, 0.05);
  font-size: calc(14 * var(--f)); font-weight: 500; color: rgba(22, 24, 29, 0.55);
}
.fs-02 .fs02-lengths .is-on { background: linear-gradient(90deg, #2a8fc4, #2457f0); font-weight: 700; color: #fff; }

/* ---- motion: frames slide one 8-picture cycle (8 x 126 = 1008px), holes one 26px tile,
   both at the same speed so they read as one strip ---- */
@media (prefers-reduced-motion: no-preference) {
  .fvis.is-live .fs-02 .fs02-frames { animation: fs02-frames 40s linear infinite; }
  .fvis.is-live .fs-02 .fs02-holes { animation: fs02-holes 1.0317s linear infinite; }
}
@keyframes fs02-frames { to { transform: translateX(calc(-1008 * var(--f))); } }
@keyframes fs02-holes  { to { transform: translateX(calc(-26 * var(--f))); } }

/* ---- Elite feature 03: +2,000 bonus credits (Figma 698:312) ----
   A notification lands and the credit balance reads 3,000 (was 1,000).
   Live: the notification slides in (Figma "Notification (slide in)"), the first digit
   rolls 1 → 2 → 3 (Figma "Digits (roll)"), the coins bob. At rest it shows 3,000. */
.fs-03 {
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, #f4ffe8 0%, #d6f6c6 33.333%, #86ddb0 66.667%, #2ca486 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;
  line-height: normal;
  font-weight: 700;
  color: #16181d;
}
.fs-03 img { -webkit-user-drag: none; }
.fs-03 p { margin: 0; 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--1 { left: calc(-120 * var(--f)); top: calc(520 * var(--f)); width: calc(560 * var(--f)); height: calc(280 * var(--f)); background: rgba(31, 157, 122, 0.7); }
.fs-03 .fs03-glow--2 { left: calc(260 * var(--f)); top: calc(520 * var(--f)); width: calc(620 * var(--f)); height: calc(300 * var(--f)); background: rgba(76, 201, 160, 0.7); }
.fs-03 .fs03-glow--3 { left: calc(-100 * var(--f)); top: calc(160 * var(--f)); width: calc(380 * var(--f)); height: calc(260 * var(--f)); background: rgba(227, 247, 168, 0.75); }
.fs-03 .fs03-glow--4 { left: calc(-150 * var(--f)); top: calc(-140 * var(--f)); width: calc(620 * var(--f)); height: calc(320 * var(--f)); background: rgba(255, 255, 255, 0.85); }

.fs-03 .fs03-big { position: absolute; left: calc(-10 * var(--f)); top: calc(400 * var(--f)); font-size: calc(210 * var(--f)); letter-spacing: calc(-10.5 * var(--f)); color: rgba(255, 255, 255, 0.36); }

.fs-03 .fs03-card {
  position: absolute; left: calc(160 * var(--f)); width: calc(440 * var(--f)); overflow: hidden;
  border: calc(1.5 * var(--f)) solid #fff;
  box-shadow: inset 0 calc(2 * var(--f)) calc(2 * var(--f)) #fff, 0 calc(2 * var(--f)) calc(6 * var(--f)) rgba(11, 42, 92, 0.05), 0 calc(24 * var(--f)) calc(48 * var(--f)) calc(-12 * var(--f)) rgba(11, 42, 92, 0.18);
}

/* Notification */
.fs-03 .fs03-note { top: calc(70 * var(--f)); height: calc(88 * var(--f)); border-radius: calc(24 * var(--f)); background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(244, 255, 246, 0.93)); }
.fs-03 .fs03-note__icon {
  position: absolute; left: calc(16.5 * var(--f)); top: calc(16.5 * var(--f)); width: calc(52 * var(--f)); height: calc(52 * var(--f)); border-radius: calc(14 * var(--f));
  background: linear-gradient(135deg, #2994ff 0%, #1a1fd9 71.429%);
}
.fs-03 .fs03-note__icon img { position: absolute; left: calc(13 * var(--f)); top: calc(13 * var(--f)); width: calc(26 * var(--f)); height: calc(26 * var(--f)); }
.fs-03 .fs03-note__app { position: absolute; left: calc(82.5 * var(--f)); top: calc(16.5 * var(--f)); font-size: calc(12 * var(--f)); font-weight: 500; color: #6b7486; }
.fs-03 .fs03-note__text { position: absolute; left: calc(82.5 * var(--f)); top: calc(36.5 * var(--f)); font-size: calc(16 * var(--f)); }

/* Balance (odometer) */
.fs-03 .fs03-balance { top: calc(186 * var(--f)); height: calc(250 * var(--f)); border-radius: calc(30 * var(--f)); background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(238, 251, 242, 0.93)); }
.fs-03 .fs03-balance__label { position: absolute; left: calc(28.5 * var(--f)); top: calc(26.5 * var(--f)); font-size: calc(12 * var(--f)); letter-spacing: calc(1.2 * var(--f)); color: #6b7486; }
.fs-03 .fs03-digits { position: absolute; left: calc(28.5 * var(--f)); top: calc(56.5 * var(--f)); display: flex; align-items: center; gap: calc(8 * var(--f)); }
.fs-03 .fs03-digit {
  position: relative; overflow: hidden; flex: none; width: calc(70 * var(--f)); height: calc(96 * var(--f));
  border: calc(1 * var(--f)) solid rgba(22, 24, 29, 0.06); border-radius: calc(18 * var(--f)); background: rgba(22, 24, 29, 0.05);
}
.fs-03 .fs03-digit--lead { background: linear-gradient(180deg, #e3f7a8, #b8efa0); }
.fs-03 .fs03-digit b, .fs-03 .fs03-comma { font-size: calc(64 * var(--f)); font-weight: 700; color: #16181d; }
.fs-03 .fs03-digit b { display: block; height: calc(94 * var(--f)); line-height: calc(94 * var(--f)); text-align: center; }
/* The reel holds 1, 2, 3 stacked; at rest it shows the 3 */
.fs-03 .fs03-reel { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; transform: translateY(calc(-188 * var(--f))); }
.fs-03 .fs03-balance__was { position: absolute; left: calc(28.5 * var(--f)); top: calc(178.5 * var(--f)); font-size: calc(15 * var(--f)); font-weight: 500; color: #6b7486; text-decoration: line-through; }
.fs-03 .fs03-balance__pill {
  position: absolute; left: calc(278.5 * var(--f)); top: calc(174.5 * var(--f)); padding: calc(6 * var(--f)) calc(12 * var(--f)); border-radius: calc(99 * var(--f));
  background: rgba(31, 157, 122, 0.12); font-size: calc(13 * var(--f)); color: #1b7f62; white-space: nowrap;
}

/* Coins: amber disc (95%), light ring (70%), a "C" at 40% in the middle.
   Each coin's font-size is its Figma size, so 1em = the coin. */
.fs-03 .fs03-coin {
  position: absolute; width: 1em; height: 1em; translate: -50% -50%; isolation: isolate;
  filter: drop-shadow(0 calc(8 * var(--f)) calc(4 * var(--f)) rgba(122, 78, 0, 0.22));
}
.fs-03 .fs03-coin::before,
.fs-03 .fs03-coin::after { content: ""; position: absolute; border-radius: 50%; z-index: -1; }
.fs-03 .fs03-coin::before { inset: 2.5%; background: #f7c04f; }
.fs-03 .fs03-coin::after { inset: 15%; border: 0.05em solid #fff1c2; }
.fs-03 .fs03-coin b {
  display: block; font-size: 0.4em; line-height: 2.5em; text-align: center;
  font-family: var(--font-sans); font-weight: 700; color: #7a4e00;
}
.fs-03 .fs03-coin--1 { left: calc(626.96 * var(--f)); top: calc(191.51 * var(--f)); font-size: calc(70 * var(--f)); rotate: 12deg; }
.fs-03 .fs03-coin--2 { left: calc(666.64 * var(--f)); top: calc(258.65 * var(--f)); font-size: calc(46 * var(--f)); rotate: -10deg; }
.fs-03 .fs03-coin--3 { left: calc(141.52 * var(--f)); top: calc(188.94 * var(--f)); font-size: calc(52 * var(--f)); rotate: -14deg; }
.fs-03 .fs03-coin--4 { left: calc(107.02 * var(--f)); top: calc(442.59 * var(--f)); font-size: calc(40 * var(--f)); rotate: 8deg; }

/* ---- motion ---- */
@media (prefers-reduced-motion: no-preference) {
  .fvis.is-live .fs-03 .fs03-note { animation: fs03-note 7s cubic-bezier(0.2, 0.9, 0.3, 1) infinite; }
  .fvis.is-live .fs-03 .fs03-reel { animation: fs03-reel 7s cubic-bezier(0.5, 0, 0.2, 1) infinite; }
  .fvis.is-live .fs-03 .fs03-coin { animation: fs03-bob 4s ease-in-out infinite; }
  .fvis.is-live .fs-03 .fs03-coin--2 { animation-delay: -1s; }
  .fvis.is-live .fs-03 .fs03-coin--3 { animation-delay: -2s; }
  .fvis.is-live .fs-03 .fs03-coin--4 { animation-delay: -3s; }
}
@keyframes fs03-note {
  0%       { opacity: 0; transform: translateY(calc(-28 * var(--f))); }
  8%, 92%  { opacity: 1; transform: none; }
  100%     { opacity: 0; transform: none; }
}
@keyframes fs03-reel {
  0%, 12%  { transform: translateY(0); }
  22%      { transform: translateY(calc(-94 * var(--f))); }
  32%, 100% { transform: translateY(calc(-188 * var(--f))); }
}
@keyframes fs03-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(-7 * var(--f))); }
}

/* ---- Elite feature 04: 180-day storage (Figma 699:129) ----
   The same episode on both plans: Commercial's copy is deleted on day 60, Elite's is
   kept until day 180. Live: the timeline fills from day 0 to day 180 (Figma "Timeline
   (animate fill)"); as it passes day 60 the Commercial card fades back (Figma
   "Commercial copy (fades out)"). At rest it shows the end state, as drawn. */
.fs-04 {
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, #eef1ff 0%, #cad5ff 33.333%, #8ba5f2 66.667%, #4a6bd8 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;
  line-height: normal;
  font-weight: 700;
  color: #16181d;
}
.fs-04 img { -webkit-user-drag: none; }
.fs-04 p { margin: 0; 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--1 { left: calc(-120 * var(--f)); top: calc(520 * var(--f)); width: calc(560 * var(--f)); height: calc(280 * var(--f)); background: rgba(58, 92, 208, 0.7); }
.fs-04 .fs04-glow--2 { left: calc(260 * var(--f)); top: calc(520 * var(--f)); width: calc(620 * var(--f)); height: calc(300 * var(--f)); background: rgba(107, 139, 234, 0.7); }
.fs-04 .fs04-glow--3 { left: calc(460 * var(--f)); top: calc(60 * var(--f)); width: calc(420 * var(--f)); height: calc(300 * var(--f)); background: rgba(201, 215, 255, 0.7); }
.fs-04 .fs04-glow--4 { left: calc(-150 * var(--f)); top: calc(-140 * var(--f)); width: calc(620 * var(--f)); height: calc(320 * var(--f)); background: rgba(255, 255, 255, 0.85); }

.fs-04 .fs04-big { position: absolute; left: calc(380 * var(--f)); top: calc(-40 * var(--f)); font-size: calc(260 * var(--f)); letter-spacing: calc(-13 * var(--f)); color: rgba(255, 255, 255, 0.3); }
.fs-04 .fs04-days { position: absolute; left: calc(646 * var(--f)); top: calc(256 * var(--f)); font-size: calc(40 * var(--f)); letter-spacing: calc(4 * var(--f)); color: rgba(255, 255, 255, 0.4); }

.fs-04 .fs04-card {
  position: absolute; overflow: hidden;
  border: calc(1.5 * var(--f)) solid #fff;
  box-shadow: inset 0 calc(2 * var(--f)) calc(2 * var(--f)) #fff, 0 calc(2 * var(--f)) calc(6 * var(--f)) rgba(11, 42, 92, 0.05), 0 calc(24 * var(--f)) calc(48 * var(--f)) calc(-12 * var(--f)) rgba(11, 42, 92, 0.18);
}
.fs-04 .fs04-card > img { position: absolute; display: block; object-fit: cover; }
.fs-04 .fs04-pill {
  position: absolute; display: flex; align-items: center; gap: calc(6 * var(--f));
  padding: calc(6 * var(--f)) calc(12 * var(--f)) calc(6 * var(--f)) calc(8 * var(--f)); border-radius: calc(99 * var(--f)); white-space: nowrap;
}
.fs-04 .fs04-pill img { display: block; width: calc(14 * var(--f)); height: calc(14 * var(--f)); }

/* Commercial copy, tilted -4°, faded */
.fs-04 .fs04-old {
  left: calc(70.16 * var(--f)); top: calc(140.91 * var(--f)); width: calc(250 * var(--f)); height: calc(300 * var(--f)); rotate: -4deg; opacity: 0.62;
  border-radius: calc(28 * var(--f)); background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(238, 240, 246, 0.93));
}
.fs-04 .fs04-old__img { left: calc(10.5 * var(--f)); top: calc(10.5 * var(--f)); width: calc(226 * var(--f)); height: calc(170 * var(--f)); border-radius: calc(20 * var(--f)); opacity: 0.45; }
.fs-04 .fs04-old__title { position: absolute; left: calc(16.5 * var(--f)); top: calc(192.5 * var(--f)); font-size: calc(16 * var(--f)); color: rgba(22, 24, 29, 0.6); }
.fs-04 .fs04-pill--gone { left: calc(16.5 * var(--f)); top: calc(226.5 * var(--f)); background: rgba(22, 24, 29, 0.08); font-size: calc(12 * var(--f)); color: #6b7486; }
.fs-04 .fs04-old__plan { position: absolute; left: calc(16.5 * var(--f)); top: calc(264.5 * var(--f)); font-size: calc(11 * var(--f)); letter-spacing: calc(1.1 * var(--f)); color: #6b7486; }

/* Elite copy */
.fs-04 .fs04-keep {
  left: calc(360 * var(--f)); top: calc(170 * var(--f)); width: calc(300 * var(--f)); height: calc(350 * var(--f));
  border-radius: calc(30 * var(--f)); background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(234, 240, 255, 0.93));
}
.fs-04 .fs04-keep__img { left: calc(10.5 * var(--f)); top: calc(10.5 * var(--f)); width: calc(276 * var(--f)); height: calc(200 * var(--f)); border-radius: calc(22 * var(--f)); }
.fs-04 .fs04-play {
  position: absolute; left: calc(120.5 * var(--f)); top: calc(82.5 * var(--f)); width: calc(52 * var(--f)); height: calc(52 * var(--f)); border-radius: 50%;
  background: rgba(255, 255, 255, 0.94); filter: drop-shadow(0 calc(6 * var(--f)) calc(4 * var(--f)) rgba(0, 0, 0, 0.25));
}
.fs-04 .fs04-play img { position: absolute; left: calc(18.72 * var(--f)); top: calc(15.6 * var(--f)); width: calc(18.72 * var(--f)); height: calc(20.8 * var(--f)); }
.fs-04 .fs04-keep__title { position: absolute; left: calc(18.5 * var(--f)); top: calc(224.5 * var(--f)); font-size: calc(19 * var(--f)); letter-spacing: calc(-0.19 * var(--f)); }
.fs-04 .fs04-pill--kept { left: calc(18.5 * var(--f)); top: calc(262.5 * var(--f)); background: rgba(31, 157, 92, 0.12); font-size: calc(13 * var(--f)); color: #1b8a51; }
.fs-04 .fs04-keep__plan { position: absolute; left: calc(18.5 * var(--f)); top: calc(304.5 * var(--f)); font-size: calc(11 * var(--f)); letter-spacing: calc(1.1 * var(--f)); color: #2457f0; }

/* Timeline */
.fs-04 .fs04-line { position: absolute; left: calc(70 * var(--f)); top: calc(560 * var(--f)); width: calc(620 * var(--f)); height: calc(70 * var(--f)); }
.fs-04 .fs04-line__track,
.fs-04 .fs04-line__fill { position: absolute; left: 0; top: calc(20 * var(--f)); width: 100%; height: calc(8 * var(--f)); border-radius: calc(4 * var(--f)); }
.fs-04 .fs04-line__track { background: rgba(255, 255, 255, 0.35); }
.fs-04 .fs04-line__fill { background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), #e3f7a8); transform-origin: 0 50%; }
.fs-04 .fs04-dot { position: absolute; top: calc(16 * var(--f)); width: calc(16 * var(--f)); height: calc(16 * var(--f)); border-radius: 50%; border: calc(2 * var(--f)) solid #fff; box-sizing: border-box; }
.fs-04 .fs04-dot--0   { left: calc(-4 * var(--f));  background: #fff; }
.fs-04 .fs04-dot--60  { left: calc(202 * var(--f)); background: #f2b33d; }
.fs-04 .fs04-dot--180 { left: calc(608 * var(--f)); background: #e3f7a8; }
.fs-04 .fs04-day { position: absolute; top: calc(44 * var(--f)); font-size: calc(13 * var(--f)); color: #fff; }
.fs-04 .fs04-day--0   { left: 0; }
.fs-04 .fs04-day--60  { left: calc(187 * var(--f)); }
.fs-04 .fs04-day--180 { left: calc(568 * var(--f)); }

/* ---- motion: one 7s pass, day 60 sits at 33.9% of the line ---- */
@media (prefers-reduced-motion: no-preference) {
  .fvis.is-live .fs-04 .fs04-line__fill { animation: fs04-fill 7s linear infinite; }
  .fvis.is-live .fs-04 .fs04-old { animation: fs04-fade 7s ease infinite; }
  .fvis.is-live .fs-04 .fs04-dot--60 { animation: fs04-tick60 7s ease infinite; }
  .fvis.is-live .fs-04 .fs04-dot--180 { animation: fs04-tick180 7s ease infinite; }
}
@keyframes fs04-fill {
  0%, 6%     { transform: scaleX(0); }
  66%, 100%  { transform: scaleX(1); }
}
@keyframes fs04-fade {
  0%, 24%    { opacity: 1; }
  32%, 92%   { opacity: 0.62; }
  100%       { opacity: 1; }
}
@keyframes fs04-tick60 {
  0%, 24%    { scale: 1; }
  28%        { scale: 1.45; }
  33%, 100%  { scale: 1; }
}
@keyframes fs04-tick180 {
  0%, 64%    { scale: 1; }
  68%        { scale: 1.45; }
  73%, 100%  { scale: 1; }
}

/* ---- Elite feature 05: many channels per platform (Figma 699:173) ----
   One film in the middle, wired to eight connected channels (YouTube, Instagram,
   Facebook, LinkedIn). Live: the dotted links run outward from the film to each
   channel (Figma "Connections (animate dash)"). */
.fs-05 {
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, #e5f6ff 0%, #bde6fa 33.333%, #6cc0ec 66.667%, #2d86d0 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;
  line-height: normal;
  font-weight: 700;
  color: #16181d;
}
.fs-05 img { -webkit-user-drag: none; }
.fs-05 p { margin: 0; white-space: nowrap; }

.fs-05 .fs05-glow { position: absolute; border-radius: 50%; filter: blur(calc(55 * var(--f))); pointer-events: none; }
.fs-05 .fs05-glow--1 { left: calc(-120 * var(--f)); top: calc(520 * var(--f)); width: calc(560 * var(--f)); height: calc(280 * var(--f)); background: rgba(30, 114, 194, 0.7); }
.fs-05 .fs05-glow--2 { left: calc(260 * var(--f)); top: calc(520 * var(--f)); width: calc(620 * var(--f)); height: calc(300 * var(--f)); background: rgba(58, 160, 224, 0.7); }
.fs-05 .fs05-glow--3 { left: calc(460 * var(--f)); top: calc(60 * var(--f)); width: calc(420 * var(--f)); height: calc(300 * var(--f)); background: rgba(200, 242, 255, 0.7); }
.fs-05 .fs05-glow--4 { left: calc(-150 * var(--f)); top: calc(-140 * var(--f)); width: calc(620 * var(--f)); height: calc(320 * var(--f)); background: rgba(255, 255, 255, 0.85); }

/* Dotted links (drawn in stage pixels, so the SVG fills the stage) */
.fs-05 .fs05-links {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  fill: none; stroke: rgba(255, 255, 255, 0.75); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 2 7;
}

/* Glass cards */
.fs-05 .fs05-chan,
.fs-05 .fs05-hub {
  position: absolute; overflow: hidden;
  border: calc(1.5 * var(--f)) solid #fff;
  box-shadow: inset 0 calc(2 * var(--f)) calc(2 * var(--f)) #fff, 0 calc(2 * var(--f)) calc(6 * var(--f)) rgba(11, 42, 92, 0.05), 0 calc(24 * var(--f)) calc(48 * var(--f)) calc(-12 * var(--f)) rgba(11, 42, 92, 0.18);
}
.fs-05 .fs05-chan {
  top: calc(var(--y) * var(--f)); width: calc(210 * var(--f)); height: calc(56 * var(--f)); border-radius: calc(28 * var(--f));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(234, 246, 255, 0.93));
}
.fs-05 .fs05-chan--l { left: calc(40 * var(--f)); }
.fs-05 .fs05-chan--r { left: calc(500 * var(--f)); }
.fs-05 .fs05-chan__avatar { position: absolute; left: calc(6.5 * var(--f)); top: calc(6.5 * var(--f)); width: calc(40 * var(--f)); height: calc(40 * var(--f)); border-radius: 50%; object-fit: cover; display: block; }
.fs-05 .fs05-chan__badge { position: absolute; left: calc(32.5 * var(--f)); top: calc(30.5 * var(--f)); width: calc(18 * var(--f)); height: calc(18 * var(--f)); display: block; }
.fs-05 .fs05-chan__name { position: absolute; left: calc(56.5 * var(--f)); top: calc(8.5 * var(--f)); font-size: calc(14 * var(--f)); }
.fs-05 .fs05-chan__status { position: absolute; left: calc(56.5 * var(--f)); top: calc(27.5 * var(--f)); font-size: calc(12 * var(--f)); font-weight: 500; color: #1b8a51; }

.fs-05 .fs05-hub {
  left: calc(285 * var(--f)); top: calc(235 * var(--f)); width: calc(190 * var(--f)); height: calc(230 * var(--f)); border-radius: calc(30 * var(--f));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(234, 242, 255, 0.93));
}
.fs-05 .fs05-hub__img { position: absolute; left: calc(10.5 * var(--f)); top: calc(10.5 * var(--f)); width: calc(166 * var(--f)); height: calc(140 * var(--f)); border-radius: calc(20 * var(--f)); object-fit: cover; display: block; }
.fs-05 .fs05-hub__title { position: absolute; left: calc(14.5 * var(--f)); top: calc(160.5 * var(--f)); font-size: calc(15 * var(--f)); }
.fs-05 .fs05-hub__pill {
  position: absolute; left: calc(14.5 * var(--f)); top: calc(188.5 * var(--f)); padding: calc(6 * var(--f)) calc(12 * var(--f)); border-radius: calc(99 * var(--f));
  background: #2457f0; font-size: calc(12 * var(--f)); color: #fff; white-space: nowrap;
}

/* ---- motion: dashes march from the film out to the channels (paths start at the film) ---- */
@media (prefers-reduced-motion: no-preference) {
  .fvis.is-live .fs-05 .fs05-links path { animation: fs05-dash 0.9s linear infinite; }
}
@keyframes fs05-dash { to { stroke-dashoffset: -9; } }

/* ---- Feature 06: week planner, a post dragged onto Friday (Figma 699:258) ---- */
.fs-06 {
  overflow: hidden;
  background: linear-gradient(180deg, #fff6e6 0%, #ffe7bf 33.333%, #a9d5f5 66.667%, #4d8ee0 100%);
  /* Figma's squircle: radius 101, corner smoothing 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;
  isolation: isolate;
  color: #16181d;
}
.fs-06 img { display: block; -webkit-user-drag: none; }

/* Blurred ellipses (Figma: blur 55) */
.fs-06 .fs06-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(calc(55 * var(--f)));
  pointer-events: none;
}
.fs-06 .fs06-glow--top  { left: calc(-150 * var(--f)); top: calc(-140 * var(--f)); width: calc(620 * var(--f)); height: calc(320 * var(--f)); background: rgba(255, 255, 255, 0.85); }
.fs-06 .fs06-glow--left { left: calc(-80 * var(--f));  top: calc(120 * var(--f));  width: calc(420 * var(--f)); height: calc(300 * var(--f)); background: rgba(255, 227, 168, 0.7); }
.fs-06 .fs06-glow--bl   { left: calc(-120 * var(--f)); top: calc(520 * var(--f));  width: calc(560 * var(--f)); height: calc(280 * var(--f)); background: rgba(59, 122, 216, 0.7); }
.fs-06 .fs06-glow--br   { left: calc(260 * var(--f));  top: calc(520 * var(--f));  width: calc(620 * var(--f)); height: calc(300 * var(--f)); background: rgba(107, 176, 238, 0.7); }

/* Week planner card */
.fs-06 .fs06-week {
  position: absolute;
  left: calc(70 * var(--f));
  top: calc(140 * var(--f));
  width: calc(620 * var(--f));
  height: calc(420 * 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, 248, 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(11, 42, 92, 0.05),
              0 calc(24 * var(--f)) calc(48 * var(--f)) calc(-12 * var(--f)) rgba(11, 42, 92, 0.18);
}
.fs-06 .fs06-week p,
.fs-06 .fs06-week span { white-space: nowrap; line-height: normal; }
.fs-06 .fs06-week__title {
  position: absolute;
  left: calc(26.5 * var(--f));
  top: calc(22.5 * var(--f));
  font-size: calc(22 * var(--f));
  font-weight: 700;
}
.fs-06 .fs06-week__range {
  position: absolute;
  left: calc(507.5 * var(--f));
  top: calc(24.5 * var(--f));
  padding: calc(6 * var(--f)) calc(12 * var(--f));
  border-radius: 99px;
  background: rgba(22, 24, 29, 0.05);
  font-size: calc(13 * var(--f));
  font-weight: 600;
}
.fs-06 .fs06-day {
  position: absolute;
  left: calc(var(--x) * var(--f));
  top: calc(72.5 * var(--f));
  font-size: calc(13 * var(--f));
  font-weight: 600;
  color: #6b7486;
}
.fs-06 .fs06-col {
  position: absolute;
  left: calc(var(--x) * var(--f));
  top: calc(96.5 * var(--f));
  width: calc(72.571 * var(--f));
  height: calc(300 * var(--f));
  border-radius: calc(14 * var(--f));
  background: rgba(22, 24, 29, 0.04);
}
.fs-06 .fs06-col--drop {
  border: calc(1.5 * var(--f)) dashed rgba(36, 87, 240, 0.5);
  background: rgba(36, 87, 240, 0.06);
}

/* Scheduled posts */
.fs-06 .fs06-post {
  position: absolute;
  left: calc(var(--x) * var(--f));
  top: calc(var(--y) * var(--f));
  width: calc(64.571 * var(--f));
  height: calc(92 * var(--f));
  overflow: hidden;
  border-radius: calc(12 * var(--f));
  background: #fff;
  box-shadow: 0 calc(4 * var(--f)) calc(10 * var(--f)) calc(-2 * var(--f)) rgba(11, 42, 92, 0.12);
}
.fs-06 .fs06-post__img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(56 * var(--f));
  object-fit: cover;
}
.fs-06 .fs06-post__icon {
  position: absolute;
  left: calc(6 * var(--f));
  top: calc(64 * var(--f));
  width: calc(16 * var(--f));
  height: calc(16 * var(--f));
}
.fs-06 .fs06-post span {
  position: absolute;
  left: calc(26 * var(--f));
  top: calc(66 * var(--f));
  font-size: calc(11 * var(--f));
  font-weight: 600;
}

/* The post being dragged onto Friday (Figma: 118 x 150, rotated 8°) */
.fs-06 .fs06-drag {
  position: absolute;
  left: calc(395.27 * var(--f));
  top: calc(297.48 * var(--f));
  width: calc(118 * var(--f));
  height: calc(150 * var(--f));
}
.fs-06 .fs06-drag__card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: calc(16 * var(--f));
  background: #fff;
  box-shadow: 0 calc(24 * var(--f)) calc(40 * var(--f)) calc(-6 * var(--f)) rgba(11, 31, 92, 0.3);
  rotate: 8deg;
}
.fs-06 .fs06-drag__img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(96 * var(--f));
  object-fit: cover;
}
.fs-06 .fs06-drag__icon {
  position: absolute;
  left: calc(8 * var(--f));
  top: calc(108 * var(--f));
  width: calc(18 * var(--f));
  height: calc(18 * var(--f));
}
.fs-06 .fs06-drag__title,
.fs-06 .fs06-drag__ep {
  position: absolute;
  left: calc(32 * var(--f));
  line-height: normal;
  white-space: nowrap;
}
.fs-06 .fs06-drag__title { top: calc(106 * var(--f)); font-size: calc(13 * var(--f)); font-weight: 700; }
.fs-06 .fs06-drag__ep    { top: calc(124 * var(--f)); font-size: calc(11 * var(--f)); font-weight: 500; color: #6b7486; }

.fs-06 .fs06-when {
  position: absolute;
  left: calc(446.29 * var(--f));
  top: calc(260 * var(--f));
  padding: calc(6 * var(--f)) calc(12 * var(--f));
  border-radius: 99px;
  background: #16181d;
  color: #fff;
  font-size: calc(13 * var(--f));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
}
.fs-06 .fs06-cursor {
  position: absolute;
  left: calc(498.29 * var(--f));
  top: calc(408 * var(--f));
  width: calc(30 * var(--f));
  height: calc(34 * var(--f));
}

/* ---- Feature 07: publish to many channels, per-channel status (Figma 700:129) ---- */
.fs-07 {
  overflow: hidden;
  background: linear-gradient(180deg, #eaf4ff 0%, #c3dcff 33.333%, #7fa8f0 66.667%, #3b66d6 100%);
  /* Figma's squircle: radius 101, corner smoothing 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;
  isolation: isolate;
  color: #16181d;
}
.fs-07 img { display: block; -webkit-user-drag: none; }
.fs-07 p, .fs-07 span { line-height: normal; white-space: nowrap; }

/* Blurred ellipses (Figma: blur 55) */
.fs-07 .fs07-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(calc(55 * var(--f)));
  pointer-events: none;
}
.fs-07 .fs07-glow--top   { left: calc(-150 * var(--f)); top: calc(-140 * var(--f)); width: calc(620 * var(--f)); height: calc(320 * var(--f)); background: rgba(255, 255, 255, 0.85); }
.fs-07 .fs07-glow--right { left: calc(460 * var(--f));  top: calc(60 * var(--f));   width: calc(420 * var(--f)); height: calc(300 * var(--f)); background: rgba(200, 224, 255, 0.7); }
.fs-07 .fs07-glow--bl    { left: calc(-120 * var(--f)); top: calc(520 * var(--f));  width: calc(560 * var(--f)); height: calc(280 * var(--f)); background: rgba(45, 86, 204, 0.7); }
.fs-07 .fs07-glow--br    { left: calc(260 * var(--f));  top: calc(520 * var(--f));  width: calc(620 * var(--f)); height: calc(300 * var(--f)); background: rgba(94, 134, 232, 0.7); }

/* Composer card: Figma 300 x 450 at (50, 112); the picture carries its shadow,
   36px wider each side, 12px above and 60px below */
.fs-07 .fs07-composer {
  position: absolute;
  left: calc(14 * var(--f));
  top: calc(100 * var(--f));
  width: calc(372 * var(--f));
  height: calc(522 * var(--f));
}

/* Channel status cards */
.fs-07 .fs07-status {
  position: absolute;
  left: calc(370 * var(--f));
  top: calc(var(--y) * var(--f));
  width: calc(350 * var(--f));
  height: calc(86 * var(--f));
  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(244, 248, 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(11, 42, 92, 0.05),
              0 calc(24 * var(--f)) calc(48 * var(--f)) calc(-12 * var(--f)) rgba(11, 42, 92, 0.18);
}
/* children: positions inside the 1.5 border, as Figma's code gives them */
.fs-07 .fs07-thumb {
  position: absolute;
  left: calc(12.5 * var(--f));
  top: calc(12.5 * var(--f));
  width: calc(58 * var(--f));
  height: calc(58 * var(--f));
  border-radius: calc(14 * var(--f));
  object-fit: cover;
}
.fs-07 .fs07-badge {
  position: absolute;
  left: calc(54.5 * var(--f));
  top: calc(50.5 * var(--f));
  width: calc(20 * var(--f));
  height: calc(20 * var(--f));
}
.fs-07 .fs07-name {
  position: absolute;
  left: calc(84.5 * var(--f));
  top: calc(14.5 * var(--f));
  font-size: calc(15 * var(--f));
  font-weight: 700;
}
.fs-07 .fs07-pill {
  position: absolute;
  display: flex;
  align-items: center;
  gap: calc(6 * var(--f));
  padding: calc(6 * var(--f)) calc(12 * var(--f));
  border-radius: 99px;
  font-size: calc(12 * var(--f));
  font-weight: 700;
}
.fs-07 .fs07-pill img { width: calc(16 * var(--f)); height: calc(16 * var(--f)); }
.fs-07 .fs07-pill--posted {
  left: calc(84.5 * var(--f));
  top: calc(40.5 * var(--f));
  padding-left: calc(8 * var(--f));
  background: rgba(31, 157, 92, 0.12);
  color: #1b8a51;
}
.fs-07 .fs07-pill--later { opacity: 0; }   /* shown by the animation when the upload finishes */
.fs-07 .fs07-pill--cancel {
  left: calc(267.5 * var(--f));
  top: calc(26.5 * var(--f));
  background: rgba(22, 24, 29, 0.06);
}
.fs-07 .fs07-pill--retry {
  left: calc(263.5 * var(--f));
  top: calc(26.5 * var(--f));
  background: #16181d;
  color: #fff;
  white-space: pre;
}
.fs-07 .fs07-pill--scheduled {
  left: calc(84.5 * var(--f));
  top: calc(40.5 * var(--f));
  background: rgba(36, 87, 240, 0.1);
  color: #2457f0;
}

/* @toonclub upload */
.fs-07 .fs07-progress { position: absolute; inset: 0; }
.fs-07 .fs07-uploading {
  position: absolute;
  left: calc(84.5 * var(--f));
  top: calc(38.5 * var(--f));
  font-size: calc(12 * var(--f));
  font-weight: 600;
  color: #2457f0;
}
.fs-07 .fs07-track,
.fs-07 .fs07-fill {
  position: absolute;
  left: calc(84.5 * var(--f));
  top: calc(60.5 * var(--f));
  height: calc(6 * var(--f));
  border-radius: calc(3 * var(--f));
}
.fs-07 .fs07-track { width: calc(180 * var(--f)); background: rgba(22, 24, 29, 0.08); }
.fs-07 .fs07-fill  { width: calc(115 * var(--f)); background: #2457f0; }

/* Toon Club: failed, then retrying */
.fs-07 .fs07-failed,
.fs-07 .fs07-retrying {
  position: absolute;
  left: calc(84.5 * var(--f));
  top: calc(40.5 * var(--f));
  font-size: calc(13 * var(--f));
  font-weight: 600;
}
.fs-07 .fs07-failed   { color: #b85c00; }
.fs-07 .fs07-retrying { color: #2457f0; opacity: 0; }

.fs-07 .fs07-cursor {
  position: absolute;
  left: calc(700 * var(--f));
  top: calc(378 * var(--f));
  width: calc(30 * var(--f));
  height: calc(34 * var(--f));
}

/* ---- Feature 08: AI caption writer + smart hashtags (Figma 700:233) ---- */
.fs-08 {
  overflow: hidden;
  background: linear-gradient(180deg, #fff0f6 0%, #fcd8ea 33.333%, #b5b8f5 66.667%, #6176e2 100%);
  /* Figma's squircle: radius 101, corner smoothing 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;
  isolation: isolate;
  color: #16181d;
}
.fs-08 img { display: block; -webkit-user-drag: none; }
.fs-08 p, .fs-08 span { line-height: normal; }

/* Blurred ellipses (Figma: blur 55) */
.fs-08 .fs08-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(calc(55 * var(--f)));
  pointer-events: none;
}
.fs-08 .fs08-glow--top  { left: calc(-150 * var(--f)); top: calc(-140 * var(--f)); width: calc(620 * var(--f)); height: calc(320 * var(--f)); background: rgba(255, 255, 255, 0.85); }
.fs-08 .fs08-glow--left { left: calc(-80 * var(--f));  top: calc(120 * var(--f));  width: calc(420 * var(--f)); height: calc(300 * var(--f)); background: rgba(255, 214, 234, 0.7); }
.fs-08 .fs08-glow--bl   { left: calc(-120 * var(--f)); top: calc(520 * var(--f));  width: calc(560 * var(--f)); height: calc(280 * var(--f)); background: rgba(80, 104, 216, 0.7); }
.fs-08 .fs08-glow--br   { left: calc(260 * var(--f));  top: calc(520 * var(--f));  width: calc(620 * var(--f)); height: calc(300 * var(--f)); background: rgba(140, 155, 240, 0.7); }

/* Phone with the post (children sit inside its 8px white border) */
.fs-08 .fs08-phone {
  position: absolute;
  left: calc(215 * var(--f));
  top: calc(60 * var(--f));
  width: calc(330 * var(--f));
  height: calc(580 * var(--f));
  overflow: hidden;
  border: calc(8 * var(--f)) solid #fff;
  border-radius: calc(44 * var(--f));
  background: #fff;
  box-shadow: 0 calc(30 * var(--f)) calc(60 * var(--f)) calc(-12 * var(--f)) rgba(42, 47, 110, 0.25);
}
.fs-08 .fs08-avatar {
  position: absolute;
  left: calc(10 * var(--f));
  top: calc(14 * var(--f));
  width: calc(34 * var(--f));
  height: calc(34 * var(--f));
  border-radius: 50%;
  object-fit: cover;
}
.fs-08 .fs08-handle,
.fs-08 .fs08-sub { position: absolute; left: calc(52 * var(--f)); white-space: nowrap; }
.fs-08 .fs08-handle { top: calc(14 * var(--f)); font-size: calc(14 * var(--f)); font-weight: 700; }
.fs-08 .fs08-sub    { top: calc(32 * var(--f)); font-size: calc(11 * var(--f)); font-weight: 500; color: #6b7486; }
.fs-08 .fs08-pic {
  position: absolute;
  left: calc(-8 * var(--f));
  top: calc(62 * var(--f));
  width: calc(330 * var(--f));
  height: calc(300 * var(--f));
  object-fit: cover;
}
.fs-08 .fs08-actions {
  position: absolute;
  left: calc(10 * var(--f));
  top: calc(374 * var(--f));
  font-size: calc(18 * var(--f));
  font-weight: 700;
  white-space: pre;
}
.fs-08 .fs08-caption {
  position: absolute;
  left: calc(10 * var(--f));
  top: calc(408 * var(--f));
  width: calc(294 * var(--f));
  font-size: calc(14 * var(--f));
  line-height: 1.4;
}
.fs-08 .fs08-caption b { font-weight: 700; }
.fs-08 .fs08-caret { color: #2457f0; }
.fs-08.is-writing .fs08-caret { animation: fs08-blink 1s steps(1) infinite; }
@keyframes fs08-blink { 50% { opacity: 0; } }
.fs-08 .fs08-tags {
  position: absolute;
  left: calc(10 * var(--f));
  top: calc(478 * var(--f));
  display: flex;
  flex-wrap: wrap;
  gap: calc(6 * var(--f));
  width: calc(294 * var(--f));
  font-size: calc(13 * var(--f));
  font-weight: 600;
  color: #2c5fd9;
  white-space: nowrap;
}

/* Caption tone picker */
.fs-08 .fs08-tone {
  position: absolute;
  left: calc(30 * var(--f));
  top: calc(140 * var(--f));
  width: calc(200 * var(--f));
  height: calc(210 * var(--f));
  overflow: hidden;
  border: calc(1.5 * var(--f)) solid #fff;
  border-radius: calc(24 * var(--f));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(246, 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(11, 42, 92, 0.05),
              0 calc(24 * var(--f)) calc(48 * var(--f)) calc(-12 * var(--f)) rgba(11, 42, 92, 0.18);
}
.fs-08 .fs08-tone__label {
  position: absolute;
  left: calc(18.5 * var(--f));
  top: calc(18.5 * var(--f));
  font-size: calc(11 * var(--f));
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #6b7486;
  white-space: nowrap;
}
.fs-08 .fs08-tone__pill {
  position: absolute;
  left: calc(18.5 * var(--f));
  top: calc(var(--y) * var(--f));
  padding: calc(6 * var(--f)) calc(12 * var(--f));
  border-radius: 99px;
  background: rgba(22, 24, 29, 0.05);
  font-size: calc(14 * var(--f));
  font-weight: 700;
  white-space: nowrap;
}
.fs-08 .fs08-tone__pill.is-on { background: #2457f0; color: #fff; }

/* Floating pills */
.fs-08 .fs08-writing,
.fs-08 .fs08-smart,
.fs-08 .fs08-float {
  position: absolute;
  padding: calc(6 * var(--f)) calc(12 * var(--f));
  border-radius: 99px;
  font-weight: 700;
  white-space: pre;
}
.fs-08 .fs08-writing {
  left: calc(480 * var(--f));
  top: calc(110 * var(--f));
  background: #fff;
  font-size: calc(14 * var(--f));
  box-shadow: 0 calc(10 * var(--f)) calc(24 * var(--f)) rgba(11, 42, 92, 0.2);
}
.fs-08 .fs08-spark { display: inline-block; }
.fs-08.is-writing .fs08-spark { animation: fs08-spin 1.6s linear infinite; }
@keyframes fs08-spin { to { transform: rotate(360deg); } }
.fs-08 .fs08-smart {
  left: calc(540 * var(--f));
  top: calc(300 * var(--f));
  background: #e3f7a8;
  font-size: calc(14 * var(--f));
  box-shadow: 0 calc(10 * var(--f)) calc(22 * var(--f)) rgba(11, 42, 92, 0.18);
}
.fs-08 .fs08-float {
  left: calc(var(--cx) * var(--f));
  top: calc(var(--cy) * var(--f));
  translate: -50% -50%;
  rotate: var(--r);
  background: #fff;
  color: #2c5fd9;
  font-size: calc(15 * var(--f));
  box-shadow: 0 calc(10 * var(--f)) calc(22 * var(--f)) rgba(11, 42, 92, 0.18);
}

/* ---- Feature 09: channel analytics, views chart and growth rings (Figma 700:277) ---- */
.fs-09 {
  overflow: hidden;
  background: linear-gradient(180deg, #e9f7ff 0%, #c6eaf8 33.333%, #7cc6e6 66.667%, #2c86c8 100%);
  /* Figma's squircle: radius 101, corner smoothing 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;
  isolation: isolate;
  color: #16181d;
}
.fs-09 img { display: block; -webkit-user-drag: none; }
.fs-09 p, .fs-09 span { line-height: normal; white-space: nowrap; }

/* Blurred ellipses (Figma: blur 55) */
.fs-09 .fs09-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(calc(55 * var(--f)));
  pointer-events: none;
}
.fs-09 .fs09-glow--top   { left: calc(-150 * var(--f)); top: calc(-140 * var(--f)); width: calc(620 * var(--f)); height: calc(320 * var(--f)); background: rgba(255, 255, 255, 0.85); }
.fs-09 .fs09-glow--right { left: calc(460 * var(--f));  top: calc(60 * var(--f));   width: calc(420 * var(--f)); height: calc(300 * var(--f)); background: rgba(214, 247, 255, 0.7); }
.fs-09 .fs09-glow--bl    { left: calc(-120 * var(--f)); top: calc(520 * var(--f));  width: calc(560 * var(--f)); height: calc(280 * var(--f)); background: rgba(31, 115, 190, 0.7); }
.fs-09 .fs09-glow--br    { left: calc(260 * var(--f));  top: calc(520 * var(--f));  width: calc(620 * var(--f)); height: calc(300 * var(--f)); background: rgba(58, 164, 220, 0.7); }

/* glass card look shared by the analytics card, the peak cards and the rings */
.fs-09 .fs09-card,
.fs-09 .fs09-peak,
.fs-09 .fs09-ring {
  position: absolute;
  overflow: hidden;
  border: calc(1.5 * var(--f)) solid #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(255, 255, 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(11, 42, 92, 0.05),
              0 calc(24 * var(--f)) calc(48 * var(--f)) calc(-12 * var(--f)) rgba(11, 42, 92, 0.18);
}

/* Analytics card (children inside its 1.5 border, as Figma's code gives them) */
.fs-09 .fs09-card {
  left: calc(60 * var(--f));
  top: calc(170 * var(--f));
  width: calc(640 * var(--f));
  height: calc(420 * var(--f));
  border-radius: calc(30 * var(--f));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(242, 249, 255, 0.93));
}
.fs-09 .fs09-title {
  position: absolute;
  left: calc(26.5 * var(--f));
  top: calc(22.5 * var(--f));
  font-size: calc(20 * var(--f));
  font-weight: 700;
}
.fs-09 .fs09-total {
  position: absolute;
  left: calc(26.5 * var(--f));
  top: calc(50.5 * var(--f));
  font-size: calc(44 * var(--f));
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.fs-09 .fs09-up {
  position: absolute;
  left: calc(160.5 * var(--f));
  top: calc(64.5 * var(--f));
  padding: calc(6 * var(--f)) calc(12 * var(--f));
  border-radius: 99px;
  background: rgba(31, 157, 92, 0.12);
  color: #1b8a51;
  font-size: calc(13 * var(--f));
  font-weight: 700;
}
.fs-09 .fs09-chart {
  position: absolute;
  left: calc(-1.5 * var(--f));
  top: calc(-1.5 * var(--f));
  width: calc(640 * var(--f));
  height: calc(420 * var(--f));
  overflow: visible;
}
.fs-09 .fs09-chart [data-fs09-line] { stroke-dasharray: 100 100; stroke-dashoffset: 0; }
.fs-09 .fs09-dot {
  position: absolute;
  left: calc(var(--x) * var(--f));
  top: calc(var(--y) * var(--f));
  box-sizing: border-box;
  width: calc(14 * var(--f));
  height: calc(14 * var(--f));
  border: calc(4 * var(--f)) solid #2457f0;
  border-radius: 50%;
  background: #fff;
}
.fs-09 .fs09-peak {
  left: calc(var(--x) * var(--f));
  top: calc(var(--y) * var(--f));
  width: calc(150 * var(--f));
  height: calc(52 * var(--f));
  border-radius: calc(16 * var(--f));
}
.fs-09 .fs09-peak img {
  position: absolute;
  left: calc(6.5 * var(--f));
  top: calc(6.5 * var(--f));
  width: calc(36 * var(--f));
  height: calc(36 * var(--f));
  border-radius: calc(10 * var(--f));
  object-fit: cover;
}
.fs-09 .fs09-peak__name,
.fs-09 .fs09-peak__sub { position: absolute; left: calc(50.5 * var(--f)); }
.fs-09 .fs09-peak__name { top: calc(7.5 * var(--f)); font-size: calc(13 * var(--f)); font-weight: 700; }
.fs-09 .fs09-peak__sub  { top: calc(26.5 * var(--f)); font-size: calc(11 * var(--f)); font-weight: 500; color: #6b7486; }

/* Growth rings */
.fs-09 .fs09-ring {
  left: calc(var(--x) * var(--f));
  top: calc(var(--y) * var(--f));
  width: calc(140 * var(--f));
  height: calc(140 * var(--f));
  border-radius: 50%;
}
.fs-09 .fs09-ring svg {
  position: absolute;
  left: calc(16.5 * var(--f));
  top: calc(16.5 * var(--f));
  width: calc(104 * var(--f));
  height: calc(104 * var(--f));
  overflow: visible;
  rotate: -90deg;            /* start at 12 o'clock */
}
.fs-09 .fs09-ring circle { fill: none; stroke-width: 10.4; }
.fs-09 .fs09-ring [data-fs09-ring] { stroke-dasharray: var(--p) 100; }
.fs-09 .fs09-ring img {
  position: absolute;
  left: calc(55.5 * var(--f));
  top: calc(42.5 * var(--f));
  width: calc(26 * var(--f));
  height: calc(26 * var(--f));
}
.fs-09 .fs09-ring p {
  position: absolute;
  left: 0;
  width: calc(137 * var(--f));
  top: calc(74.5 * var(--f));
  text-align: center;
  font-size: calc(16 * var(--f));
  font-weight: 700;
}


@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; } }

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

/* Elite credits visual: five odometer tiles (05,000 -> 15,000) and a longer "+10,000" */
.fs-03 .fs03-digits--5 { gap: calc(6 * var(--f)); }
.fs-03 .fs03-digits--5 .fs03-digit { width: calc(58 * var(--f)); }
.fs-03 .fs03-big { font-size: calc(170 * var(--f)); letter-spacing: calc(-8.5 * var(--f)); }

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