/* ==========================================
   RocketToons OTO5 — Reseller (Figma 825:128, 1920 wide)
   Component styles that Tailwind utilities can't express cleanly.
   Sizes in px follow the 1920px Figma frame; content is 1360 wide (x 280–1640).
   Shared components (order bar, hero card, buy box, urgency, guarantee, pricing, FAQ)
   come from elite/css/style.css with Reseller's green theme; sections 03–07 are merged
   in at the end (FEATURE SECTIONS).
   ========================================== */

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

  /* hero card */
  --hero-bg: #0a4a32;
  --hl-bg: linear-gradient(173deg, #ffffff 0%, #e6f5ec 71.43%);
  --hl-ink: #0a472b;
  --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(10, 74, 50, 0.12);  /* capsules on the page background */
  --badges-bg: #e5f5ec;
  --badge-bg: #d9f0e2;
  --step-done: #1f9d5c;

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

  /* 02 urgency + headlines */
  --elig-hl: linear-gradient(171deg, #ffe6a8 0%, #ffc94d 71.43%);
  --head-grad: linear-gradient(90deg, #15965a, #117446);

  /* 08 guarantee */
  --gtee-bg: linear-gradient(155deg, #0f6e47 0%, #063a26 71.43%);
  --gtee-hl-ink: #0a472b;
  --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 */

  /* 09 pricing */
  --price-head: linear-gradient(160.85deg, #14875a 0%, #08402b 71.43%);
  --price-blob: rgba(232, 179, 60, 0.35);
  --price-chip: #e6f5ec;
  --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;
}

/* ============ SECTION HEADLINES (big two-line heads) ============ */
.big-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-align: center;
  color: var(--ink-2);
}
.big-head__grad {
  background: var(--head-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

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


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



/* ============ RESELLER (Figma 825:128): colours and layout that differ from Elite ============ */
/* Reseller ink: the offer card, buy box and timer text are green (#246144) in Figma */
.offer-card__name, .offer-card__text, .offer-card__badges span { color: #246144; }
.hero-chip__tag { color: #246144; }
/* "RocketToons Reseller" is longer than "RocketToons Elite": keep the chip on one line on phones */
.hero-chip { white-space: nowrap; }
@media (max-width: 639px) {
  .hero-chip { gap: 8px; }
  .hero-chip__tag { padding: 3px 8px; font-size: 12px; }
}
.mini-timer > span:first-child { white-space: nowrap; }
.timer__box { border-color: rgba(36, 97, 68, 0.08); color: #246144; }
.timer__cap { color: rgba(36, 97, 68, 0.55); }
.timer__colon { color: rgba(36, 97, 68, 0.3); }
.buy-box__title { color: #246144; }
.trust-row { border-color: rgba(36, 97, 68, 0.08); color: rgba(36, 97, 68, 0.75); }
.trust-row strong { color: #246144; }
.trust-row i { background: rgba(36, 97, 68, 0.3); }

/* 02 Urgency without a compare table (Figma "02 Urgency — leave this page" 1920 x 264):
   60px headline, 133px swoosh; the buy box sits 180 above it, "03" starts 180 below */
.vs--solo { padding: 72px 0 0; }
@media (min-width: 1024px) { .vs--solo { padding: 180px 0 0; } }
.vs--solo .vs__title { font-weight: 700; line-height: 1.32; letter-spacing: -0.03em; color: #161829; }
.vs--solo .vs__swoosh { top: calc(100% - 0.25em); width: 2.217em; }   /* 133 at 60px */
.vs--solo .vs__lead { margin-top: 30px; color: #161829; }
.vs--solo .vs__elig { margin-top: 12px; color: #545c6b; }
.vs--solo .vs__elig mark { padding: 4px 10px; border-radius: 8px; font-size: 0.78em; letter-spacing: 0.06em; color: #161829; }

/* 08 Guarantee: gold highlight box; Reseller's box art is 432 x 480 (wider than Elite's).
   The card is contained (1440 max), so the 64px Figma headline is set at 56px to stay on one line. */
.gtee { padding-top: 64px; }
@media (min-width: 1024px) { .gtee { padding-top: 180px; } }
.gtee__head .hl { --hl-bg: linear-gradient(173deg, #ffe6a8 0%, #ffc94d 71.43%); }
.gtee__art { aspect-ratio: 608 / 520; }                       /* shield x 110 … box right 718 */
.gtee__box { left: 28.95%; width: 71.05%; }
.gtee__shield { top: 42.3%; width: 49.34%; }
@media (min-width: 1024px) { .gtee__art { width: min(608px, 44%); } }

/* 09 Pricing: two cards 620 wide, 40 apart (Figma draws them at 0.861 of Elite's 720 card) */
.pricing { padding-top: 32px; }
@media (min-width: 1024px) { .pricing { padding-top: 200px; } }   /* Figma: chevrons end 236 above the headline */
.price-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  width: min(1280px, 100% - 24px);
  margin: 40px auto 0;
}
@media (min-width: 1100px) { .price-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-top: 70px; } }
.price-slot { position: relative; }
.price-cards .price-card { width: 100%; max-width: 620px; margin: 0 auto; }
.price-card--best { border: 4px solid #ffc94d; }
.price-best {
  position: absolute;
  left: 50%;
  top: -18px;
  z-index: 2;
  translate: -50% 0;
  padding: 9px 18px;
  border-radius: 99px;
  background: linear-gradient(173deg, #ffe6a8 0%, #ffc94d 71.43%);
  box-shadow: 0 8px 20px -4px rgba(10, 71, 43, 0.25);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: #161829;
}
@media (min-width: 640px) { .price-best { font-size: 14px; } }
.price-cards .price-card__was { font-size: 15px; }
@media (min-width: 640px) {
  .price-cards .price-card { border-radius: 38px; }
  .price-cards .price-card__head { height: 215px; }
  .price-cards .price-card__mini { left: 18.5px; top: 26.7px; width: 155px; }
  .price-cards .price-card__info { left: 234px; top: 38px; }
  .price-cards .price-chip { padding: 5px 12px; font-size: 10.3px; }
  .price-cards .price-card__name { margin-top: 4px; font-size: 27.5px; }
  .price-cards .price-card__price { gap: 14px; margin-top: -6px; }
  .price-cards .price-card__price strong { font-size: 79px; letter-spacing: -0.04em; }
  .price-cards .price-card__was { align-self: flex-end; margin-bottom: 26px; font-size: 15.5px; }
  .price-cards .price-list { gap: 16.5px; padding: 40px 30px 0 54px; font-size: 17.2px; color: #16181d; }
  .price-cards .price-list li { gap: 12px; }
  .price-cards .price-list li::before { width: 22.4px; height: 22.4px; }
  .price-cards .price-card__foot { gap: 22px; margin: 28px 50px 0; padding: 27px 0 40px; }
  .price-cards .cta__sub { white-space: nowrap; }
  .price-cards .mini-timer { font-size: 17.2px; gap: 8.6px; }
  .price-cards .mini-timer > span:first-child { font-size: 13.8px; }
  .price-cards .mini-timer b { padding: 5px 8.6px; border-radius: 8.6px; }
  .price-cards .cta { padding: 10.3px; }
  .price-cards .cta__btn { gap: 19px; padding: 15.5px 15.5px 15.5px 55px; }
  .price-cards .cta__main { font-size: 29.3px; }
  .price-cards .cta__sub { font-size: 13.8px; }
  .price-cards .cta__arrow { width: 65.4px; height: 65.4px; }
  .price-cards .cta__arrow img { width: 27.6px; height: 27.6px; }
  .price-cards .payments { width: 488px; }
  .price-cards .price-card__note { font-size: 12.9px; color: #7c655a; }
}

/* 10 FAQ: green ink, gold "Answered." box */
.faq { padding-top: 48px; }
@media (min-width: 1024px) { .faq { padding-top: 100px; } }       /* Figma: cards end 100 above the decline link */
.faq__head { color: #2e5644; }
@media (min-width: 1024px) { .faq__head { margin-top: 120px; } }
.faq .hl-box { background: linear-gradient(166deg, #ffe6a8 0%, #ffc94d 71.43%); color: #0a472b; }
.faq__item { border-top-width: 1.5px; border-top-color: rgba(46, 86, 68, 0.1); }
.faq__item h3 { color: #2e5644; }


/* ============ FEATURE SECTIONS 03–07 (merged from parts) ============ */
/* ---- part: how ---- */
/* ============ 03 HOW RESELLING WORKS (Figma 825:623, 1920 x 770; 180 below the urgency block) ============
   Desktop (>= 1024px): headline, then 3 cards in a row inside 1280 (410.67 wide, 24 gap).
   Below 1024px: cards stack, up to 410.67 wide. Each card is a container, so everything
   inside is placed in card pixels: --c = one Figma px of the card. */
.rs-how {
  --s: min(1px, 100cqw / 1920);
  container-type: inline-size;
  color: #161829;
}
.rshow-in { padding-top: max(72px, calc(180 * var(--s))); padding-left: 16px; padding-right: 16px; }

.rshow-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.03125em;                          /* line 2 box sits 86 below line 1 (2 at 64) */
  margin: 0;
  font-size: max(36px, calc(64 * var(--s)));
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.03em;
  text-align: center;
}
.rshow-hl {
  display: inline-flex;
  align-items: center;
  height: 1.3125em;                        /* 84 at 64 */
  padding: 0 0.3em;                        /* 19.2 */
  border-radius: 0.34em;                   /* 21.76 */
  background: linear-gradient(162.56deg, #ffe6a8 0%, #ffc94d 71.429%);
}

.rshow-cards {
  display: grid;
  grid-template-columns: minmax(0, 410.667px);
  justify-content: center;
  gap: 20px;
  margin-top: max(40px, calc(80 * var(--s)));
}
@media (min-width: 1024px) {
  .rshow-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(24 * var(--s));
    width: min(1280px, 100%);
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---- card ---- */
.rshow-card {
  --c: calc(100cqw / 410.667);
  position: relative;
  container-type: inline-size;
  aspect-ratio: 410.667 / 520;
  overflow: hidden;
  border-radius: 10.7143% / 8.4615%;      /* 44 x 44 corners: 44/410.67 wide, 44/520 tall (the card's own
                                             properties can't use --c: its cqw would measure the section) */
  text-align: left;
}
/* --c above is set on the card but used by its children, where 100cqw is the card */
.rshow-card > * { position: absolute; margin: 0; }
.rshow-card--01 { background: linear-gradient(128.3deg, #14875a 0%, #08402b 71.429%); color: #fff; }
.rshow-card--02 { background: linear-gradient(128.3deg, #ffe6a8 0%, #ffc94d 71.429%); color: #161829; }
.rshow-card--03 { background: #161829; color: #fff; }

.rshow-num {
  left: calc(32 * var(--c));
  top: calc(10 * var(--c));
  font-size: calc(120 * var(--c));
  font-weight: 700;
  line-height: 1.26;
  letter-spacing: -0.06em;
  color: rgba(255, 255, 255, 0.25);
}
.rshow-card--02 .rshow-num { color: rgba(22, 24, 41, 0.12); }
.rshow-title {
  left: calc(40 * var(--c));
  top: calc(150 * var(--c));
  width: calc(330.667 * var(--c));
  font-size: calc(36 * var(--c));
  font-weight: 700;
  line-height: calc(40 * var(--c));
  letter-spacing: -0.03em;
}
.rshow-text {
  left: calc(40 * var(--c));
  top: calc(202 * var(--c));
  width: calc(330.667 * var(--c));
  font-size: calc(18 * var(--c));
  font-weight: 500;
  line-height: 1.26;
  color: rgba(255, 255, 255, 0.75);
}
.rshow-text--01 { top: calc(242 * var(--c)); color: rgba(255, 255, 255, 0.85); }
.rshow-card--02 .rshow-text { color: rgba(22, 24, 41, 0.7); }

/* card 01: client */
.rshow-avatar {
  left: calc(40 * var(--c));
  top: calc(320 * var(--c));
  width: calc(150 * var(--c));
  height: calc(150 * var(--c));
  box-sizing: border-box;
  border: calc(6 * var(--c)) solid #fff;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 calc(16 * var(--c)) calc(32 * var(--c)) calc(-6 * var(--c)) rgba(10, 71, 43, 0.3);
}
.rshow-client {
  left: calc(206 * var(--c));
  top: calc(350 * var(--c));
  font-size: calc(22 * var(--c));
  font-weight: 700;
  line-height: 1.26;
  white-space: nowrap;
}
.rshow-pill {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--c));
  padding: calc(8 * var(--c)) calc(14 * var(--c)) calc(8 * var(--c)) calc(8 * var(--c));
  border-radius: 99px;
  background: #fff;
  filter: drop-shadow(0 calc(8 * var(--c)) calc(9 * var(--c)) rgba(20, 24, 38, 0.18));
  font-size: calc(14 * var(--c));
  font-weight: 700;
  line-height: 1.26;
  color: #161829;
  white-space: nowrap;
}
.rshow-pill--created { left: calc(206 * var(--c)); top: calc(390 * var(--c)); transform-origin: 0 50%; }
.rshow-check {
  display: grid;
  place-items: center;
  width: calc(22 * var(--c));
  height: calc(22 * var(--c));
  border-radius: 50%;
  background: #c6f99a;
}
.rshow-check img { width: calc(11 * var(--c)); height: calc(11 * var(--c)); }

/* card 02: tier pills. --x --y --w --h: Figma's box around each rotated pill */
.rshow-tier {
  left: calc(var(--x) * var(--c));
  top: calc(var(--y) * var(--c));
  width: calc(var(--w) * var(--c));
  height: calc(var(--h) * var(--c));
  display: flex;
  align-items: center;
  justify-content: center;
}
.rshow-tier__pill {
  flex: none;
  padding: calc(8 * var(--c)) calc(14 * var(--c));
  border-radius: 99px;
  background: #fff;
  filter: drop-shadow(0 calc(8 * var(--c)) calc(9 * var(--c)) rgba(20, 24, 38, 0.18));
  rotate: var(--r);
  font-size: calc(17 * var(--c));
  font-weight: 700;
  line-height: 1.26;
  color: #161829;
  white-space: pre;
}
.rshow-tier--on .rshow-tier__pill { background: #161829; color: #fff; }

/* card 03 */
.rshow-big {
  left: calc(30 * var(--c));
  top: calc(320 * var(--c));
  font-size: calc(140 * var(--c));
  font-weight: 700;
  line-height: 1.26;
  letter-spacing: -0.06em;
  color: #ffc94d;
  white-space: nowrap;
}

/* ---- motion: only while on screen ---- */
@media (prefers-reduced-motion: no-preference) {
  .rshow-card--01.is-live .rshow-pill--created { animation: rshow-pop 4.5s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; }
  .rshow-card--01.is-live .rshow-avatar { animation: rshow-float 5s ease-in-out infinite; }
  .rshow-card--02.is-live .rshow-tier { animation: rshow-bob 3.6s ease-in-out var(--d) infinite; }
}
@keyframes rshow-pop {
  0%, 8%   { opacity: 0; scale: 0.6; }
  18%, 92% { opacity: 1; scale: 1; }
  100%     { opacity: 1; scale: 1; }
}
@keyframes rshow-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 calc(-6 * var(--c)); }
}
@keyframes rshow-bob {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 calc(-5 * var(--c)); }
}

/* ---- part: math ---- */
/* ============ 04 THE MATH (Figma "04 The math — license pays for itself" 825:571; 180 below "How reselling works") ============
   A green band (1808 x 779, radius 72) with the copy on the left and the sales ladder on the right.
   >= 1400px: Figma's layout, scaled as one picture (the band is a container: --b = one Figma px of it).
   Below: the copy stacks over the ladder in normal flow. */
.rs-math {
  --s: min(1px, 100cqw / 1920);
  container-type: inline-size;
}
.rsmath-in { padding-top: max(72px, calc(180 * var(--s))); }

.rsmath-band {
  position: relative;
  container-type: inline-size;
  overflow: hidden;
  width: min(1808px, 100cqw - 24px);
  margin: 0 auto;
  padding: 56px 24px 64px;
  box-sizing: border-box;
  border-radius: 40px;
  background: linear-gradient(156.69deg, #127a4f 0%, #063a26 71.429%);
  color: #fff;
}
.rsmath-band > :not(.rsmath-glow) { position: relative; }

/* soft glows (Figma ellipses, blur 90), placed in % of the band */
.rsmath-glow { position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; }
.rsmath-glow--a { left: -11.06%; top: -30.81%; width: 60.84%; height: 89.86%; background: rgba(31, 161, 107, 0.35); }
.rsmath-glow--b { left: 66.37%; top: -25.67%; width: 44.25%; height: 77.02%; background: rgba(31, 160, 106, 0.3); }
.rsmath-glow--c { left: 38.72%; top: 71.89%; width: 71.9%;  height: 89.86%; background: rgba(4, 42, 28, 0.6); }

/* ---- copy (flow layout) ---- */
.rsmath-left { max-width: 640px; margin: 0 auto; }
.rsmath-left > * { margin: 0; }
.rsmath-eyebrow { font-size: 13px; font-weight: 700; line-height: 1.26; letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.75); }
.rsmath-head { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; font-size: 40px; font-weight: 700; line-height: 1.25; letter-spacing: -0.03em; }
.rsmath-l2 { display: flex; flex-wrap: wrap; align-items: center; gap: 0.22em; }
.rsmath-hl {
  display: inline-flex;
  align-items: center;
  height: 1.3125em;                     /* 84 at 64 */
  padding: 0 0.3em;                     /* 19.2 */
  border-radius: 0.34em;                /* 21.76 */
  background: linear-gradient(164.62deg, #fff 0%, #e6f5ec 71.429%);
  color: #161829;
}
.rsmath-script { font-family: var(--font-script, "Rancho", cursive); font-size: 1.1875em; font-weight: 400; letter-spacing: 0; line-height: 1; } /* 76 at 64 */
.rsmath-text { margin-top: 18px !important; font-size: 17px; font-weight: 500; line-height: 1.52; color: rgba(255, 255, 255, 0.88); }
.rsmath-total { margin-top: 18px !important; font-size: 96px; font-weight: 700; line-height: 1.1; letter-spacing: -0.06em; white-space: nowrap; }
.rsmath-note { font-family: var(--font-script, "Rancho", cursive); font-size: 32px; line-height: 1.26; color: #ffe6a8; }

/* ---- sales ladder (flow layout): a loose stack of tilted pills ---- */
.rsmath-ladder { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; max-width: 640px; margin: 36px auto 0; }
.rsmath-sale { display: flex; margin-left: calc(var(--x) * 0.15px); }
.rsmath-pill {
  --u: 0.7px;                           /* phones: the longest pill (#25) still fits in 342px */
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  padding: calc(10 * var(--u)) calc(20 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u));
  border-radius: 99px;
  background: #fff;
  filter: drop-shadow(0 calc(14 * var(--u)) calc(14 * var(--u)) rgba(10, 71, 43, 0.25));
  rotate: var(--r);
  font-size: calc(17 * var(--u));
  font-weight: 500;
  line-height: 1.26;
  color: rgba(22, 24, 41, 0.6);
  white-space: pre;
}
.rsmath-pill b { font-size: calc(20 * var(--u)); font-weight: 700; color: #161829; }
.rsmath-coin {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(36 * var(--u));
  height: calc(36 * var(--u));
  border-radius: 50%;
  background: linear-gradient(135deg, #ffe08a 0%, #e0a526 71.429%);
  font-size: calc(18 * var(--u));
  font-weight: 700;
  color: #6b4500;
}
.rsmath-sale--faint .rsmath-pill { background: rgba(255, 255, 255, 0.16); filter: none; color: rgba(255, 255, 255, 0.8); }
.rsmath-sale--faint .rsmath-pill b { color: #fff; }
.rsmath-sale--paid .rsmath-pill {
  gap: calc(12 * var(--u));
  padding: calc(14 * var(--u)) calc(24 * var(--u)) calc(14 * var(--u)) calc(12 * var(--u));
  background: #161829;
  filter: drop-shadow(0 calc(18 * var(--u)) calc(18 * var(--u)) rgba(10, 71, 43, 0.35));
}
.rsmath-sale--paid .rsmath-pill b { font-size: calc(22 * var(--u)); color: #fff; }
.rsmath-paid-check {
  display: grid;
  place-items: center;
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
  border-radius: 50%;
  background: linear-gradient(135deg, #ffe6a8 0%, #ffc94d 71.429%);
}
.rsmath-paid-check img { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.rsmath-dots { margin: 0 0 0 112px; font-size: 22px; font-weight: 700; line-height: 1; color: rgba(255, 255, 255, 0.6); }

@media (min-width: 640px) {
  .rsmath-band { width: min(1808px, 100cqw - 48px); padding: 72px 56px 80px; border-radius: 56px; }
  .rsmath-head { font-size: 56px; }
  .rsmath-text { font-size: 20px; }
  .rsmath-total { font-size: 130px; }
  .rsmath-note { font-size: 40px; }
  .rsmath-pill { --u: 1px; }
}

/* ---- Figma layout (>= 1400px): everything placed in band px ---- */
@media (min-width: 1400px) {
  .rsmath-band {
    --b: calc(100cqw / 1808);
    width: min(1808px, 100cqw - 112 * var(--s));
    aspect-ratio: 1808 / 779;
    padding: 0;
    border-radius: 3.9823% / 9.2426%;          /* 72 x 72 corners */
  }
  .rsmath-glow { filter: blur(calc(90 * var(--b))); }

  .rsmath-left { position: absolute !important; left: calc(264 * var(--b)); top: calc(96 * var(--b)); width: calc(640 * var(--b)); height: calc(587 * var(--b)); max-width: none; margin: 0; }
  .rsmath-left > * { position: absolute; }
  .rsmath-eyebrow { left: 0; top: 0; font-size: calc(14 * var(--b)); }
  .rsmath-head { display: contents; }
  .rsmath-l1 { position: absolute; left: 0; top: calc(30 * var(--b)); font-size: calc(64 * var(--b)); white-space: nowrap; }
  .rsmath-l2 { position: absolute; left: 0; top: calc(114 * var(--b)); gap: calc(14 * var(--b)); flex-wrap: nowrap; font-size: calc(64 * var(--b)); white-space: nowrap; }
  .rsmath-text { left: 0; top: calc(232 * var(--b)); width: calc(560 * var(--b)); margin-top: 0 !important; font-size: calc(21 * var(--b)); line-height: calc(32 * var(--b)); }
  .rsmath-total { left: calc(-6 * var(--b)); top: calc(356 * var(--b)); margin-top: 0 !important; font-size: calc(150 * var(--b)); line-height: 1.26; }
  .rsmath-note { left: 0; top: calc(530 * var(--b)); font-size: calc(46 * var(--b)); white-space: nowrap; }

  .rsmath-ladder { position: absolute !important; left: calc(944 * var(--b)); top: calc(119.5 * var(--b)); width: calc(600 * var(--b)); height: calc(540 * var(--b)); max-width: none; margin: 0; display: block; }
  .rsmath-sale {
    position: absolute;
    left: calc(var(--x) * var(--b));
    top: calc(var(--y) * var(--b));
    width: calc(var(--w) * var(--b));
    height: calc(var(--h) * var(--b));
    margin: 0;
    align-items: center;
    justify-content: center;
  }
  .rsmath-pill { --u: var(--b); flex: none; }
  .rsmath-dots { position: absolute; left: calc(140 * var(--b)); top: calc(436 * var(--b)); margin: 0; font-size: calc(26 * var(--b)); line-height: 1.26; }
}

/* ---- motion: while on screen the ladder fills in, sale by sale, and starts over ---- */
@media (prefers-reduced-motion: no-preference) {
  .rsmath-band.is-live .rsmath-sale,
  .rsmath-band.is-live .rsmath-dots { animation: rsmath-in 9s ease-out calc(var(--i) * 0.4s) infinite backwards; }
}
@keyframes rsmath-in {
  0%       { opacity: 0; translate: 0 14px; }
  6%, 88%  { opacity: 1; translate: 0 0; }
  96%, 100% { opacity: 0; translate: 0 0; }
}

/* ---- part: price ---- */
/* ============ 05 PRICE IT YOUR WAY (Figma "05 Price it your way" 828:162, 1920 x 916) ============
   Desktop (>= 1024): everything in Figma px times --s (one Figma px, 1px at 1920 and up).
   The tags sit on a 1920-wide stage starting at the strings' top (Figma y 264).
   Each tag is three layers: .rsprice-wrap (placed), .rsprice-tilt (Figma's tilt, about the tag centre),
   .rsprice-tag (swings gently about its hole while on screen). Inside a tag, sizes are N * --k.
   Phones/tablets (< 1024): the tags stack in a column, each still on its string. */
.rs-price {
  --s: min(1px, 100cqw / 1920);
  container-type: inline-size;
  position: relative;
  padding-top: 96px;               /* Figma gap above: 180 (desktop below) */
  text-align: center;
  color: #161829;
}
.rs-price .rsprice-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 16px;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.03em;
}
.rs-price .rsprice-line { display: block; }
.rs-price .rsprice-line--2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 0.25em;
  margin-top: 4px;
}
/* Figma "Highlight box": 168.6deg gold gradient, radius 21.76, 84 tall, 19.2 side padding at 64px */
.rs-price .rsprice-hl {
  display: inline-flex;
  align-items: center;
  height: 1.3125em;
  padding: 0 0.3em;
  border-radius: 0.34em;
  background: linear-gradient(168.65deg, #ffe6a8 0%, #ffc94d 71.429%);
}
.rs-price .rsprice-sub {
  max-width: 860px;
  margin: 16px auto 0;
  padding: 0 16px;
  font-size: 17px;
  line-height: 1.52;
  color: #545c6b;
}

/* ---- tags (shared) ---- */
.rs-price .rsprice-tags {
  --k: min(0.72px, (100cqw - 80px) / 360);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(70 * var(--k));
  margin-top: 40px;
  padding-top: calc(90 * var(--k));
}
.rs-price .rsprice-wrap {
  position: relative;
  flex: none;
  width: calc(360 * var(--k));
  height: calc(470 * var(--k));
  margin-top: calc(40 * var(--k));
}
.rs-price .rsprice-wrap:first-child { margin-top: 0; }
/* Figma string: 2px dotted line, #161829 at 35%, 3.07 dashes every 8.18, 90 tall */
.rs-price .rsprice-string {
  position: absolute;
  left: calc(var(--sx) * var(--k));
  top: calc(var(--sy) * var(--k));
  width: calc(4 * var(--k));
  height: calc(90 * var(--k));
  background: repeating-linear-gradient(to bottom, rgba(22, 24, 41, 0.35) 0 calc(3.07 * var(--k)), transparent calc(3.07 * var(--k)) calc(8.18 * var(--k)))
              center / max(1.5px, calc(2 * var(--k))) 100% no-repeat;
}
.rs-price .rsprice-tilt {
  position: absolute;
  inset: 0;
  rotate: var(--r);
}
.rs-price .rsprice-tag {
  position: absolute;
  inset: 0;
  border-radius: calc(36 * var(--k));
  transform-origin: calc(180 * var(--k)) calc(43 * var(--k));   /* the hole */
  filter: drop-shadow(0 calc(30 * var(--k)) calc(15 * var(--k)) rgba(20, 24, 38, 0.18));
}
.rs-price .rsprice-tag--gold  { background: linear-gradient(127.45deg, #ffe6a8 0%, #ffc94d 71.429%); --ink: #161829; --ink-rgb: 22, 24, 41; }
.rs-price .rsprice-tag--green { background: linear-gradient(127.45deg, #14875a 0%, #08402b 71.429%); --ink: #fff;    --ink-rgb: 255, 255, 255; }
.rs-price .rsprice-tag--white { background: #fff; box-shadow: inset 0 0 0 1px rgba(22, 24, 41, 0.08); --ink: #161829; --ink-rgb: 22, 24, 41; }

/* Hole: page-coloured circle with Figma's inner shadow (0 2 / blur 4, black 25%) */
.rs-price .rsprice-hole {
  position: absolute;
  left: calc(165 * var(--k));
  top: calc(28 * var(--k));
  width: calc(30 * var(--k));
  height: calc(30 * var(--k));
  border-radius: 50%;
  background: #faf8f3;
  box-shadow: inset 0 calc(2 * var(--k)) calc(4 * var(--k)) rgba(0, 0, 0, 0.25);
}
.rs-price .rsprice-label,
.rs-price .rsprice-amount,
.rs-price .rsprice-per,
.rs-price .rsprice-desc {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  white-space: nowrap;
}
.rs-price .rsprice-label {
  top: calc(92 * var(--k));
  font-size: calc(14 * var(--k));
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.14em;
  color: rgba(var(--ink-rgb), 0.6);
}
.rs-price .rsprice-amount {
  top: calc(120 * var(--k));
  font-size: calc(120 * var(--k));
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.06em;
  color: var(--ink);
}
.rs-price .rsprice-per {
  top: calc(256 * var(--k));
  font-family: "Rancho", cursive;
  font-size: calc(44 * var(--k));
  line-height: 1.25;
  color: rgba(var(--ink-rgb), 0.85);
}
.rs-price .rsprice-rule {
  position: absolute;
  left: calc(40 * var(--k));
  top: calc(341 * var(--k));
  width: calc(280 * var(--k));
  height: calc(1.5 * var(--k));
  background: rgba(var(--ink-rgb), 0.15);
}
.rs-price .rsprice-desc {
  top: calc(369 * var(--k));
  left: calc(40 * var(--k));
  right: auto;
  width: calc(280 * var(--k));
  font-size: calc(19 * var(--k));
  font-weight: 500;
  line-height: calc(28 * var(--k));
  white-space: normal;
  color: rgba(var(--ink-rgb), 0.8);
}

.rs-price .rsprice-note {
  margin-top: 28px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(84, 92, 107, 0.8);
}

/* ---- desktop: Figma's layout, scaled by --s ---- */
@media (min-width: 1024px) {
  .rs-price { padding-top: calc(180 * var(--s)); }
  .rs-price .rsprice-head { font-size: calc(64 * var(--s)); line-height: calc(80 * var(--s)); }
  .rs-price .rsprice-line { white-space: nowrap; }
  .rs-price .rsprice-line--2 { flex-wrap: nowrap; gap: calc(16 * var(--s)); margin-top: calc(6 * var(--s)); }
  .rs-price .rsprice-hl { height: calc(84 * var(--s)); padding: 0 calc(19.2 * var(--s)); border-radius: calc(21.76 * var(--s)); }
  .rs-price .rsprice-sub {
    max-width: none;
    width: calc(860 * var(--s));
    margin-top: calc(22 * var(--s));
    padding: 0;
    font-size: calc(21 * var(--s));
    line-height: calc(32 * var(--s));
  }
  .rs-price .rsprice-tags {
    --k: var(--s);
    display: block;
    position: relative;
    width: calc(1920 * var(--s));
    height: calc(607 * var(--s));
    margin: calc(8 * var(--s)) auto 0;
    padding: 0;
  }
  .rs-price .rsprice-wrap {
    position: absolute;
    left: calc(var(--x) * var(--s));
    top: calc(var(--y) * var(--s));
    margin: 0;
  }
  .rs-price .rsprice-note { margin-top: calc(25 * var(--s)); padding: 0; font-size: calc(16 * var(--s)); line-height: calc(20 * var(--s)); }
}

/* ---- motion: tags sway on their strings while on screen ---- */
@media (prefers-reduced-motion: no-preference) {
  .rs-price.is-live .rsprice-tag { animation: rsprice-sway 4.2s ease-in-out infinite alternate; }
  .rs-price.is-live .rsprice-wrap--monthly .rsprice-tag { animation-duration: 3.6s; animation-delay: -1.4s; }
  .rs-price.is-live .rsprice-wrap--agency .rsprice-tag { animation-duration: 4.8s; animation-delay: -2.6s; }
}
@keyframes rsprice-sway {
  from { rotate: -1.4deg; }
  to   { rotate: 1.4deg; }
}

/* ---- part: clients ---- */
/* ============ 06 YOUR FIRST CLIENTS ARE AROUND YOU (Figma 828:128, band 1808 x 1321) ============
   Desktop (>= 1024): Figma px times --s (1px at 1920 and up). Rows: number 120 + who 440 on the left,
   the 600-wide opener bubble right-aligned in the 1280 content; rows 152 apart with a hairline between.
   Phones/tablets: number + who on one line, the bubble under them. */
.rs-clients {
  --s: min(1px, 100cqw / 1920);
  container-type: inline-size;
  padding-top: 96px;               /* Figma gap above: 180 (desktop below) */
}
.rs-clients .rsclients-band {
  position: relative;
  overflow: hidden;
  margin: 0 12px;
  padding: 48px 20px 52px;
  border-radius: 32px;
  background: linear-gradient(143.85deg, #0f6e47 0%, #062e20 71.429%);
  color: #fff;
  text-align: center;
}
.rs-clients .rsclients-band > :not(.rsclients-glow) { position: relative; }
/* Figma ellipses: #1FA06A at 35% (1000 x 700 at -200,-200) and #E8B33C at 18% (800 x 600 at 1200,900), blur 90 */
.rs-clients .rsclients-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}
.rs-clients .rsclients-glow--a { left: -20%; top: -10%; width: 70%; height: 40%; background: rgba(31, 160, 106, 0.35); }
.rs-clients .rsclients-glow--b { right: -20%; bottom: -10%; width: 60%; height: 35%; background: rgba(232, 179, 60, 0.18); }

.rs-clients .rsclients-kicker {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.14em;
  color: #ffe6a8;
}
.rs-clients .rsclients-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 12px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.03em;
}
/* Figma "Highlight box": 172.3deg gold gradient, radius 21.76, 84 tall, 19.2 side padding at 64px */
.rs-clients .rsclients-hl {
  display: inline-flex;
  align-items: center;
  height: 1.3125em;
  margin-top: 6px;
  padding: 0 0.3em;
  border-radius: 0.34em;
  background: linear-gradient(172.26deg, #ffe6a8 0%, #ffc94d 71.429%);
  color: #161829;
}

.rs-clients .rsclients-rows {
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.rs-clients .rsclients-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 4px 14px;
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.rs-clients .rsclients-row:first-child { border-top: 0; padding-top: 0; }
.rs-clients .rsclients-num {
  font-size: 44px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.04em;
  color: #ffc94d;
}
.rs-clients .rsclients-who {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
}
/* Figma "Opener bubble": white, radius 24 24 24 6, shadow 0 12 / 14 rgba(4,38,26,.3), 20/28 text, alternately tilted 1deg / -1deg */
.rs-clients .rsclients-bubble {
  grid-column: 1 / -1;
  margin-top: 10px;
  padding: 14px 18px;
  border-radius: 18px 18px 18px 6px;
  background: #fff;
  box-shadow: 0 12px 14px rgba(4, 38, 26, 0.3);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
  color: #161829;
  rotate: 1deg;
}
.rs-clients .rsclients-row:nth-child(even) .rsclients-bubble { rotate: -1deg; }
.rs-clients .rsclients-foot {
  margin-top: 32px;
  font-family: "Rancho", cursive;
  font-size: 26px;
  line-height: 1.25;
  color: #ffe6a8;
}

/* ---- desktop: Figma's layout, scaled by --s ---- */
@media (min-width: 1024px) {
  .rs-clients { padding-top: calc(180 * var(--s)); }
  .rs-clients .rsclients-band {
    width: calc(1808 * var(--s));
    margin: 0 auto;
    padding: calc(96 * var(--s)) 0 calc(96 * var(--s));
    border-radius: calc(72 * var(--s));
  }
  .rs-clients .rsclients-glow { filter: blur(calc(90 * var(--s))); }
  .rs-clients .rsclients-glow--a { left: calc(-200 * var(--s)); top: calc(-200 * var(--s)); width: calc(1000 * var(--s)); height: calc(700 * var(--s)); }
  .rs-clients .rsclients-glow--b { left: calc(1200 * var(--s)); top: calc(900 * var(--s)); right: auto; bottom: auto; width: calc(800 * var(--s)); height: calc(600 * var(--s)); }
  .rs-clients .rsclients-kicker { font-size: calc(14 * var(--s)); line-height: calc(18 * var(--s)); }
  .rs-clients .rsclients-head { margin-top: calc(16 * var(--s)); font-size: calc(64 * var(--s)); line-height: calc(80 * var(--s)); white-space: nowrap; }
  .rs-clients .rsclients-hl { height: calc(84 * var(--s)); margin-top: calc(6 * var(--s)); padding: 0 calc(19.2 * var(--s)); border-radius: calc(21.76 * var(--s)); }
  .rs-clients .rsclients-rows { width: calc(1280 * var(--s)); margin: calc(90 * var(--s)) auto 0; }
  .rs-clients .rsclients-row {
    grid-template-columns: calc(120 * var(--s)) calc(440 * var(--s)) 1fr;
    align-items: start;
    gap: 0;
    min-height: calc(132 * var(--s));
    padding: 0;
    border-top: 0;
  }
  .rs-clients .rsclients-row + .rsclients-row {
    margin-top: calc(20 * var(--s));
    padding-top: 0;
  }
  /* hairline 132 below each row's top, then 20 to the next row */
  .rs-clients .rsclients-row:not(:last-child) { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
  .rs-clients .rsclients-num { font-size: calc(72 * var(--s)); line-height: calc(90 * var(--s)); letter-spacing: -0.04em; }
  .rs-clients .rsclients-who { margin-top: calc(16 * var(--s)); font-size: calc(28 * var(--s)); line-height: calc(32 * var(--s)); }
  .rs-clients .rsclients-bubble {
    grid-column: 3;
    justify-self: end;
    width: calc(600 * var(--s));
    margin-top: calc(15.2 * var(--s));
    padding: calc(18 * var(--s)) calc(32 * var(--s)) calc(18 * var(--s)) calc(28 * var(--s));
    border-radius: calc(24 * var(--s)) calc(24 * var(--s)) calc(24 * var(--s)) calc(6 * var(--s));
    box-shadow: 0 calc(12 * var(--s)) calc(14 * var(--s)) rgba(4, 38, 26, 0.3);
    font-size: calc(20 * var(--s));
    line-height: calc(28 * var(--s));
    min-height: calc(92 * var(--s));
  }
  .rs-clients .rsclients-foot { margin-top: calc(40 * var(--s)); font-size: calc(44 * var(--s)); line-height: calc(55 * var(--s)); }
}

/* ---- motion: the opener bubbles bob out of step while on screen ---- */
@media (prefers-reduced-motion: no-preference) {
  .rs-clients.is-live .rsclients-bubble { animation: rsclients-bob 3.4s ease-in-out infinite alternate; }
  .rs-clients.is-live .rsclients-row:nth-child(2) .rsclients-bubble { animation-delay: -0.7s; }
  .rs-clients.is-live .rsclients-row:nth-child(3) .rsclients-bubble { animation-delay: -1.4s; }
  .rs-clients.is-live .rsclients-row:nth-child(4) .rsclients-bubble { animation-delay: -2.1s; }
  .rs-clients.is-live .rsclients-row:nth-child(5) .rsclients-bubble { animation-delay: -2.8s; }
}
@keyframes rsclients-bob {
  from { translate: 0 0; }
  to   { translate: 0 calc(-5 * var(--s, 1px)); }
}

/* ---- part: demo ---- */
/* ============ 07 SHOW THEM, DON'T PITCH THEM (Figma 828:198, 1920 x 780, 180px below the section above) ============
   Header and steps flow normally. The art row (photo → arrow → video → client reply) is the Figma
   layout inside the 1280 content column (x 320..1600, y 314..702 of the frame), drawn in --k:
   one Figma px, so it scales down as a whole. Below 768px it stacks: photo, arrow, video, reply. */
.rs-demo {
  container-type: inline-size;
  padding: 96px 0 0;
  overflow-x: clip;
  text-align: center;
  color: #161829;
}
@media (min-width: 1024px) { .rs-demo { padding-top: 180px; } }

.rs-demo .rsdemo-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  font-size: clamp(34px, 3.3333cqw, 64px);
  font-weight: 700;
  line-height: 1.26;
  letter-spacing: -0.03em;
}
.rs-demo .rsdemo-line--2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.1em 0.25em;          /* 16px at 64 */
}
.rs-demo .rsdemo-hl {
  display: inline-flex;
  align-items: center;
  height: 1.3125em;           /* 84 at 64 */
  padding: 0 0.3em 0.03em;    /* 19.2 at 64 */
  border-radius: 0.34em;      /* 21.76 at 64 */
  background: linear-gradient(170.49deg, #ffe6a8 0%, #ffc94d 71.429%);
  white-space: nowrap;
}
.rs-demo .rsdemo-sub {
  max-width: 860px;
  margin: 22px auto 0;
  padding: 0 16px;
  font-size: clamp(17px, 1.0938cqw, 21px);
  line-height: 1.524;         /* 32 at 21 */
  color: #545c6b;
}

/* ---- art row ---- */
.rs-demo .rsdemo-stage {
  /* the art overhangs the 1280 column (Figma x 299..1630), so the scale is worked out from 1340 */
  --k: min(1px, (100cqw - 32px) / 1340);
  position: relative;
  width: calc(1280 * var(--k));
  height: calc(388 * var(--k));
  margin: calc(58 * var(--k)) auto 0;
  text-align: left;
}
.rs-demo .rsdemo-photo,
.rs-demo .rsdemo-video,
.rs-demo .rsdemo-reply,
.rs-demo .rsdemo-arrow { position: absolute; margin: 0; }

/* White-framed cards: 8px border, 32 radius, Figma shadow */
.rs-demo .rsdemo-photo,
.rs-demo .rsdemo-video {
  padding: calc(8 * var(--k));
  border-radius: calc(32 * var(--k));
  background: #fff;
  box-shadow: 0 calc(30 * var(--k)) calc(60 * var(--k)) calc(-12 * var(--k)) rgba(20, 24, 38, 0.25);
}
.rs-demo .rsdemo-photo {
  left: calc(-10.93 * var(--k));
  top: calc(74.89 * var(--k));
  width: calc(380 * var(--k));
  height: calc(300 * var(--k));
  rotate: 4deg;
}
.rs-demo .rsdemo-photo > img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: calc(24 * var(--k));
  object-fit: cover;
}
.rs-demo .rsdemo-arrow {
  left: calc(400 * var(--k));
  top: calc(152 * var(--k));
  width: calc(150 * var(--k));
  height: calc(70 * var(--k));
}
.rs-demo .rsdemo-video {
  left: calc(578.33 * var(--k));
  top: calc(20.26 * var(--k));
  width: calc(440 * var(--k));
  height: calc(330 * var(--k));
  rotate: -3deg;
}
.rs-demo .rsdemo-video .rt-play {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: calc(24 * var(--k));
  background: #000;
}
.rs-demo .rsdemo-video button { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.rs-demo .rsdemo-video button > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rs-demo .rsdemo-play {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: calc(84 * var(--k));
  height: calc(84 * var(--k));
  translate: -50% -50%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  transition: scale 0.2s;
}
.rs-demo .rsdemo-video button:hover .rsdemo-play { scale: 1.06; }
.rs-demo .rsdemo-play img { width: calc(26 * var(--k)); height: calc(30 * var(--k)); margin-left: calc(4 * var(--k)); }

/* Pill labels sit on the cards' top edges (children of the card, so they share its tilt) */
.rs-demo .rsdemo-label {
  position: absolute;
  left: calc(34 * var(--k));
  top: calc(-24 * var(--k));
  z-index: 1;
  padding: calc(9 * var(--k)) calc(16 * var(--k));
  border-radius: 99px;
  background: #fff;
  box-shadow: 0 calc(8 * var(--k)) calc(9 * var(--k)) rgba(20, 24, 38, 0.2);
  font-size: calc(16 * var(--k));
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  color: #161829;
}
.rs-demo .rsdemo-label--green {
  left: calc(17 * var(--k));
  top: calc(-13 * var(--k));
  background: linear-gradient(171.78deg, #14875a 0%, #08402b 71.429%);
  color: #fff;
}

.rs-demo .rsdemo-reply {
  left: calc(1007.18 * var(--k));
  top: calc(149.78 * var(--k));
  width: calc(300 * var(--k));
  height: calc(100 * var(--k));
  padding: calc(20 * var(--k)) calc(26 * var(--k)) 0 calc(24 * var(--k));
  border-radius: calc(26 * var(--k)) calc(26 * var(--k)) calc(26 * var(--k)) calc(6 * var(--k));
  background: linear-gradient(161.57deg, #ffe6a8 0%, #ffc94d 71.429%);
  box-shadow: 0 calc(14 * var(--k)) calc(15 * var(--k)) rgba(90, 58, 0, 0.2);
  rotate: 3deg;
  font-size: calc(24 * var(--k));
  font-weight: 700;
  line-height: 1.25;          /* 30 at 24 */
  color: #161829;
}

/* ---- steps ---- */
.rs-demo .rsdemo-steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 40px;
  margin: 44px auto 0;
  padding: 0 16px;
  list-style: none;
}
.rs-demo .rsdemo-steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}
.rs-demo .rsdemo-n {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #14875a;
  font-size: 16px;
  color: #fff;
}

/* ---- phones and small tablets: stack the art row ---- */
@media (max-width: 767px) {
  .rs-demo .rsdemo-stage {
    --k: min(1px, (100cqw - 56px) / 440);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(28 * var(--k));
    width: auto;
    height: auto;
    margin-top: 48px;
    padding: 0 16px;
  }
  .rs-demo .rsdemo-photo,
  .rs-demo .rsdemo-video,
  .rs-demo .rsdemo-reply,
  .rs-demo .rsdemo-arrow { position: relative; left: auto; top: auto; }
  .rs-demo .rsdemo-photo { margin-top: calc(24 * var(--k)); }
  .rs-demo .rsdemo-arrow { width: calc(110 * var(--k)); height: calc(52 * var(--k)); rotate: 70deg; margin: calc(12 * var(--k)) 0; }
  .rs-demo .rsdemo-video { margin-top: calc(14 * var(--k)); }
  .rs-demo .rsdemo-reply { height: auto; padding-bottom: calc(20 * var(--k)); }
  .rs-demo .rsdemo-steps { margin-top: 40px; gap: 12px 24px; }
  .rs-demo .rsdemo-steps li { font-size: 17px; }
  .rs-demo .rsdemo-n { width: 30px; height: 30px; font-size: 14px; }
}

/* ---- motion: only while on screen, never with reduced motion. At rest = Figma. ---- */
@media (prefers-reduced-motion: no-preference) {
  .rs-demo.is-live .rsdemo-arrow { animation: rsdemo-nudge 1.6s ease-in-out infinite alternate; }
  .rs-demo.is-live .rsdemo-reply { animation: rsdemo-float 3.2s ease-in-out infinite alternate; }
  .rs-demo.is-live .rsdemo-play { animation: rsdemo-ring 2.4s ease-out infinite; }
}
@keyframes rsdemo-nudge { from { translate: 0 0; } to { translate: calc(8 * var(--k)) 0; } }
@keyframes rsdemo-float { from { translate: 0 0; } to { translate: 0 calc(-8 * var(--k)); } }
@keyframes rsdemo-ring {
  0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55); }
  70%  { box-shadow: 0 0 0 calc(18 * var(--k)) rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}


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

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

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

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

/* the single countdown above the two price cards */
.pricing__timer { margin: 32px auto 0; }
@media (min-width: 1024px) { .pricing__timer { margin-top: 44px; } }