/* ==========================================
   RocketPlayer sales page (player/)
   Figma "RocketPlayer Sales Page — v2 (hero)" (1059:128), 1920 wide.
   Plain CSS, no build step, no Tailwind.

   Scaling: each section is a size container; inside it
   --s = min(1px, 100cqw / 1920) is one Figma px, so calc(N * var(--s))
   is N Figma px at 1920 and shrinks with the screen. Copy uses
   max(<floor>, calc(N * var(--s))) so it stays readable.
   Below 1024px sections switch to a stacked phone layout.

   The hero is here; every other section is a "part" pasted in below
   (search for "---- part: <name> ----").
   ========================================== */

:root {
  --rp-blue: #2f5bff;
  --rp-blue-2: #1a2fd9;
  --rp-ink: #0b0d14;
  --rp-cream: #fafaf7;
  --font-sans: "Google Sans Flex", ui-sans-serif, system-ui, sans-serif;
  --font-script: "Rancho", cursive;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--rp-cream);
  color: var(--rp-ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; }
button { font: inherit; }

/* Visually hidden */
.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}


/* ============ 00 HERO (Figma 1059:128, y 0–1720) ============ */

.rp-hero {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  background: #040510;
  color: #fff;
}
.rp-hero > * { --s: min(1px, 100cqw / 1920); }

.rp-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.rp-hero__glow { position: absolute; max-width: none; height: auto; }
.rp-hero__glow--1 { left: calc(-100 * var(--s)); top: calc(-820 * var(--s)); width: calc(2120 * var(--s)); }
.rp-hero__glow--2 { left: calc(360 * var(--s)); top: calc(-500 * var(--s)); width: calc(1200 * var(--s)); }
.rp-hero__glow--3 { left: calc(40 * var(--s)); top: calc(960 * var(--s)); width: calc(1840 * var(--s)); }

.rp-hero__in {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: calc(1720 * var(--s));
  padding: calc(32 * var(--s)) 16px calc(97 * var(--s));
  text-align: center;
}

/* header: logo + Buy Now */
.rp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(100%, calc(1440 * var(--s)));
  height: max(48px, calc(56 * var(--s)));
}
.rp-logo {
  display: inline-flex;
  align-items: center;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
.rp-logo__icon { width: max(34px, calc(48 * var(--s))); height: auto; margin-right: max(8px, calc(12 * var(--s))); }
.rp-logo__rocket {
  font-size: max(22px, calc(30 * var(--s)));
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
.rp-logo__player {
  margin-left: 0.08em;
  font-family: var(--font-script);
  font-size: max(26px, calc(36 * var(--s)));
  line-height: 1;
}
.rp-head__buy {
  padding: max(10px, calc(13 * var(--s))) max(18px, calc(24 * var(--s)));
  border-radius: max(12px, calc(14 * var(--s)));
  background: #000;
  color: #fff;
  font-size: max(15px, calc(17 * var(--s)));
  font-weight: 600;
  line-height: 1.27;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s;
}
.rp-head__buy:hover { background: #15182a; }

/* eyebrow pill */
.rp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: max(9px, calc(12 * var(--s)));
  margin-top: calc(62 * var(--s));
  padding: calc(9 * var(--s)) calc(22 * var(--s)) calc(9 * var(--s)) calc(19 * var(--s));
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.9);
  font-size: max(14px, calc(20 * var(--s)));
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
}
.rp-eyebrow img { width: max(8px, calc(10 * var(--s))); height: auto; }

/* headline: sizes in em so the "sell [icon] for you." line keeps its shape at every width */
.rp-hero__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: calc(20 * var(--s));
  font-size: min(calc(132 * var(--s)), calc((100cqw - 32px) / 7.9));
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.035em;
  white-space: nowrap;
}
.rp-hero__l2 {
  position: relative;
  display: block;
  width: 5.8206em;
  height: 1.25em;
  margin-top: -0.2197em;
}
.rp-hero__sell,
.rp-hero__foryou { position: absolute; top: 0; }
.rp-hero__sell { left: 0; }
.rp-hero__foryou {
  left: 2.5403em;
  background: linear-gradient(90deg, #8fd8ff, #4d7bff);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.rp-hero__icon {
  position: absolute;
  left: 1.5334em;
  top: 0.0606em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0.9583em;
  height: 0.9583em;
}
.rp-hero__icon > span {
  position: relative;
  flex: none;
  width: 0.8485em;
  height: 0.8485em;
  transform: rotate(8deg);
}
.rp-hero__icon img {
  position: absolute;
  left: -0.303em;
  top: -0.1667em;
  width: 1.4545em;
  max-width: none;
  height: auto;
}

.rp-hero__sub {
  width: min(100%, calc(980 * var(--s)));
  margin-top: calc(15 * var(--s));
  color: rgba(255, 255, 255, 0.72);
  font-size: max(16px, calc(25 * var(--s)));
  line-height: 1.46;
}
.rp-hero__sub b { color: #fff; font-weight: 600; }

/* the real RocketPlayer, in the Figma frame (rounded, blue glow) */
.rp-hero__player {
  width: min(100%, calc(1248 * var(--s)));
  aspect-ratio: 16 / 9;
  margin-top: calc(65 * var(--s));
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: max(14px, calc(28.8 * var(--s)));
  background: #000;
  box-shadow: 0 calc(50 * var(--s)) calc(120 * var(--s)) rgba(27, 59, 255, 0.45);
  text-align: left;
}
.rp-hero__player > div { width: 100%; height: 100%; }

/* checks + CTA */
.rp-checks {
  display: flex;
  justify-content: center;
  gap: calc(44 * var(--s));
  margin-top: calc(75 * var(--s));
  list-style: none;
  color: rgba(255, 255, 255, 0.85);
  font-size: max(15px, calc(21 * var(--s)));
  font-weight: 500;
  line-height: 1.27;
  white-space: nowrap;
}
.rp-checks li { display: flex; align-items: center; gap: calc(10 * var(--s)); }
.rp-checks img { width: max(16px, calc(20 * var(--s))); height: auto; }

.rp-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(20 * var(--s));
  width: min(100%, calc(576 * var(--s)));
  min-height: max(64px, calc(92 * var(--s)));
  margin-top: calc(31 * var(--s));
  padding: calc(14.5 * var(--s)) calc(14.5 * var(--s)) calc(14.5 * var(--s)) calc(42.5 * var(--s));
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  background: linear-gradient(180deg, #5b8cff, #2440f0);
  box-shadow: 0 16px 20px rgba(39, 71, 245, 0.6);
  color: #fff;
  font-size: max(17px, calc(26 * var(--s)));
  font-weight: 600;
  line-height: 1.27;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.2s, filter 0.2s;
}
.rp-cta:hover { transform: translateY(-2px); filter: brightness(1.06); }
.rp-cta__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: max(44px, calc(60 * var(--s)));
  height: max(44px, calc(60 * var(--s)));
  border-radius: 50%;
  background: #fff;
}
.rp-cta__arrow img { width: max(20px, calc(26 * var(--s))); height: auto; }
.rp-cta__note {
  margin-top: calc(28 * var(--s));
  color: rgba(255, 255, 255, 0.5);
  font-size: max(13px, calc(16 * var(--s)));
  font-weight: 500;
  line-height: 1.27;
  white-space: pre;
}

/* footer logo (the shared footer styles live in legal/css/footer.css) */
.rp-footlogo { display: inline-flex !important; align-items: center; color: #fff; text-decoration: none; }
.rp-footlogo img { width: 44px !important; height: auto; margin-right: 10px; }
.rp-footlogo .rp-logo__rocket { font-size: 28px; }
.rp-footlogo .rp-logo__player { font-size: 33px; }

@media (max-width: 1023px) {
  .rp-hero__in { min-height: 0; padding: 18px 16px 72px; }
  .rp-eyebrow { margin-top: 44px; padding: 8px 16px 8px 14px; }
  .rp-hero__title { margin-top: 18px; font-size: min(96px, calc((100cqw - 32px) / 7.9)); }
  .rp-hero__sub { width: min(100%, 640px); margin-top: 14px; }
  .rp-hero__player { width: min(100%, 860px); margin-top: 36px; }
  .rp-checks { flex-wrap: wrap; gap: 8px 20px; margin-top: 32px; white-space: normal; }
  .rp-cta { width: min(100%, 440px); margin-top: 24px; padding: 10px 10px 10px 26px; }
  .rp-cta__note { margin-top: 18px; white-space: normal; }
}
@media (max-width: 480px) {
  .rp-cta { font-size: 16px; padding-left: 20px; }
  .rp-cta__arrow { width: 40px; height: 40px; }
}


/* ============ SECTIONS ============ */

/* ---- part: brief ---- */
/* 02 Features — brief (Figma 1077:128, 1920 x 2100). The top 380px fade from the dark hero into cream. */
.rp-brief {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  background: #fcfbf8;
}
.rp-brief > * { --s: min(1px, 100cqw / 1920); }
.rpbrief-in {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: calc(2100 * var(--s));
  padding: calc(420 * var(--s)) 16px calc(82 * var(--s));
  background: linear-gradient(180deg, #04050a 0%, #101c5c 5.7143%, #8ea6f0 12.381%, #fcfbf8 18.095%) 0 0 / 100% calc(2100 * var(--s)) no-repeat;
  color: #14161c;
}
.rpbrief-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid rgba(20, 22, 28, 0.08);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(11, 20, 64, 0.08);
  color: rgba(20, 22, 28, 0.75);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.rpbrief-dot { width: 6px; height: 6px; border-radius: 50%; background: #2747f5; flex: none; }
.rpbrief-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: calc(18 * var(--s)) 0 0;
  text-align: center;
  font-weight: 700;
}
.rpbrief-title-1 {
  font-size: max(34px, calc(92 * var(--s)));
  line-height: 1.27;
  letter-spacing: -0.035em;
  white-space: nowrap;
}
.rpbrief-title-2 {
  margin-top: calc(-34.8 * var(--s));
  font-family: "Rancho", cursive;
  font-weight: 400;
  font-size: max(40px, calc(108 * var(--s)));
  line-height: 1.25;
  white-space: nowrap;
}

.rpbrief-grid {
  display: grid;
  grid-template-columns: repeat(3, calc(456 * var(--s)));
  column-gap: calc(36 * var(--s));
  row-gap: calc(42 * var(--s));
  margin-top: calc(53 * var(--s));
}
.rpbrief-card { margin: 0; }
.rpbrief-stage { display: block; width: 100%; height: auto; }
.rpbrief-num {
  margin: calc(34 * var(--s)) 0 0;
  color: #2747f5;
  font-size: max(12px, calc(15 * var(--s)));
  font-weight: 600;
  line-height: 1.27;
}
.rpbrief-name {
  margin: calc(3 * var(--s)) 0 0;
  font-size: max(20px, calc(34 * var(--s)));
  font-weight: 700;
  line-height: 1.27;
  letter-spacing: -0.015em;
}
.rpbrief-script {
  margin: calc(-3.2 * var(--s)) 0 0;
  font-family: "Rancho", cursive;
  font-size: max(24px, calc(38 * var(--s)));
  line-height: 1.25;
}
.rpbrief-text {
  margin: calc(2.5 * var(--s)) 0 0;
  max-width: calc(436 * var(--s));
  color: rgba(20, 22, 28, 0.62);
  font-size: max(14px, calc(18 * var(--s)));
  line-height: 1.45;
}

@media (max-width: 1023px) {
  .rpbrief-in { min-height: 0; padding: 200px 16px 64px; background-size: 100% 1100px; }
  .rpbrief-title { margin-top: 16px; }
  .rpbrief-title-1 { font-size: min(56px, 8.6cqw); white-space: normal; text-wrap: balance; line-height: 1.1; }
  .rpbrief-title-2 { margin-top: 2px; font-size: min(64px, 10.6cqw); white-space: normal; line-height: 1.15; }
  .rpbrief-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 20px; width: min(100%, 760px); margin-top: 36px; }
  .rpbrief-num { margin-top: 18px; font-size: 13px; }
  .rpbrief-name { margin-top: 4px; font-size: 22px; line-height: 1.2; }
  .rpbrief-script { margin-top: 2px; font-size: 27px; line-height: 1.2; }
  .rpbrief-text { margin-top: 6px; max-width: none; font-size: 15px; line-height: 1.5; }
}
@media (max-width: 639px) {
  .rpbrief-in { padding-top: 150px; background-size: 100% 830px; }
  .rpbrief-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; width: min(100%, 456px); }
}

/* ---- part: steps ---- */
/* 03 How it works — three steps (Figma 1091:128, 1920 x 2120) */
.rp-steps {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  background: #fcfbf8;
}
.rp-steps > * { --s: min(1px, 100cqw / 1920); }
.rpsteps-in {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: calc(2120 * var(--s));
  padding: calc(80 * var(--s)) 0 calc(140 * var(--s));
  color: #14161c;
}
.rpsteps-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid rgba(20, 22, 28, 0.08);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(11, 20, 64, 0.08);
  color: rgba(20, 22, 28, 0.75);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.rpsteps-dot { width: 6px; height: 6px; border-radius: 50%; background: #2747f5; flex: none; }
.rpsteps-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: calc(18 * var(--s)) 0 0;
  padding: 0 16px;
  text-align: center;
  font-weight: 700;
}
.rpsteps-title-1 {
  font-size: max(34px, calc(92 * var(--s)));
  line-height: 1.27;
  letter-spacing: -0.035em;
  white-space: nowrap;
}
.rpsteps-title-2 {
  margin-top: calc(-34.8 * var(--s));
  font-family: "Rancho", cursive;
  font-weight: 400;
  font-size: max(40px, calc(108 * var(--s)));
  line-height: 1.25;
  white-space: nowrap;
}

/* rows: number badge on the spine (x 270), copy at x 390, stage at x 850 — the group is centred (Figma had it 30px right of centre) */
.rpsteps-list {
  position: relative;
  display: grid;
  gap: calc(110 * var(--s));
  width: calc(1920 * var(--s)); /* the 1920 frame, centred on screens wider than 1920 */
  margin: calc(93 * var(--s)) 0 0;
  padding: 0;
  list-style: none;
}
/* the spine joins the three badge centres */
.rpsteps-list::before {
  content: "";
  position: absolute;
  left: calc(305 * var(--s));
  top: calc(220 * var(--s));
  bottom: calc(220 * var(--s));
  width: max(2px, calc(3 * var(--s)));
  background: linear-gradient(180deg, rgba(39, 71, 245, 0.6), rgba(91, 200, 255, 0.6));
}
.rpsteps-row {
  position: relative;
  display: flex;
  align-items: center;
  height: calc(440 * var(--s));
  padding-left: calc(390 * var(--s));
}
.rpsteps-badge {
  position: absolute;
  left: calc(270 * var(--s));
  top: calc(184 * var(--s));
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(72 * var(--s));
  height: calc(72 * var(--s));
  border: calc(5 * var(--s)) solid #fff;
  border-radius: 50%;
  background: linear-gradient(180deg, #5b8cff, #2440f0);
  box-shadow: 0 calc(8 * var(--s)) calc(12 * var(--s)) rgba(39, 71, 245, 0.4);
  color: #fff;
  font-size: calc(24 * var(--s));
  font-weight: 700;
  line-height: 1;
}
.rpsteps-copy { flex: none; width: calc(460 * var(--s)); }
.rpsteps-name {
  margin: 0;
  font-size: max(22px, calc(46 * var(--s)));
  font-weight: 700;
  line-height: 1.27;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.rpsteps-script {
  margin: calc(-2.4 * var(--s)) 0 0;
  font-family: "Rancho", cursive;
  font-size: max(28px, calc(58 * var(--s)));
  line-height: 1.25;
  white-space: nowrap;
}
.rpsteps-text {
  max-width: calc(400 * var(--s));
  margin: calc(1.5 * var(--s)) 0 0;
  color: rgba(20, 22, 28, 0.62);
  font-size: max(14px, calc(20 * var(--s)));
  line-height: 1.5;
}
.rpsteps-stage {
  display: block;
  flex: none;
  width: calc(800 * var(--s));
  height: auto;
}

@media (max-width: 1023px) {
  .rpsteps-in { min-height: 0; padding: 64px 16px 72px; }
  .rpsteps-title { margin-top: 16px; }
  .rpsteps-title-1 { font-size: min(64px, 11cqw); line-height: 1.1; }
  .rpsteps-title-2 { margin-top: 2px; font-size: min(72px, 12.6cqw); line-height: 1.15; }
  .rpsteps-list { gap: 56px; width: min(100%, 720px); margin-top: 40px; }
  .rpsteps-list::before { display: none; }
  .rpsteps-row {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 22px;
    align-items: start;
    height: auto;
    padding: 0;
  }
  .rpsteps-badge {
    position: static;
    width: 52px;
    height: 52px;
    border-width: 4px;
    box-shadow: 0 6px 10px rgba(39, 71, 245, 0.4);
    font-size: 18px;
  }
  .rpsteps-copy { width: auto; padding-top: 2px; }
  .rpsteps-name { font-size: min(32px, 7cqw); line-height: 1.2; white-space: normal; }
  .rpsteps-script { margin-top: 2px; font-size: min(40px, 8.6cqw); line-height: 1.15; white-space: normal; }
  .rpsteps-text { max-width: none; margin-top: 8px; font-size: 16px; }
  .rpsteps-stage { grid-column: 1 / -1; width: 100%; }
}

/* ---- part: leak ---- */
/* 04 Pain — free hosting leaks sales (Figma 1092:128, 1920 x 1810). Fades in from the cream section above. */
.rp-leak {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  background: linear-gradient(180deg, #fcfbf8 0%, #8ea6f0 8%, #101c5c 15%, #04050a 21%, #04050a 100%);
  color: #fff;
  font-family: var(--font-sans);
}
.rp-leak > * { --s: min(1px, 100cqw / 1920); }
.rpleak-in {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(440 * var(--s)) 16px calc(105 * var(--s));
  text-align: center;
}
.rpleak-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.rpleak-chip-dot { width: 6px; height: 6px; border-radius: 50%; background: #ff5a5a; }
.rpleak-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: calc(18 * var(--s));
}
.rpleak-title-1 {
  font-size: max(34px, calc(92 * var(--s)));
  font-weight: 700;
  line-height: 1.27;
  letter-spacing: -0.035em;
  white-space: nowrap;
}
.rpleak-title-2 {
  margin-top: calc(-34.8 * var(--s));
  font-family: var(--font-script);
  font-size: max(38px, calc(100 * var(--s)));
  font-weight: 400;
  line-height: 1.25;
  white-space: nowrap;
}
.rpleak-sub {
  width: min(100%, calc(820 * var(--s)));
  margin-top: calc(5 * var(--s));
  color: rgba(255, 255, 255, 0.65);
  font-size: max(16px, calc(22 * var(--s)));
  line-height: 1.5;
}

.rpleak-row {
  display: flex;
  align-items: flex-start;
  gap: calc(70 * var(--s));
  width: calc(1446 * var(--s));
  margin: calc(59 * var(--s)) 0 0 calc(6 * var(--s));
  text-align: left;
}

/* the leaky embed: a free player's end screen (800 x 450); its own unit --e follows its width */
.rpleak-embed {
  position: relative;
  flex: none;
  container-type: inline-size;
  width: calc(800 * var(--s));
  aspect-ratio: 800 / 450;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: calc(22 * var(--s));
  background: #0b0c10;
  box-shadow: 0 calc(30 * var(--s)) calc(60 * var(--s)) rgba(0, 0, 0, 0.6);
}
.rpleak-embed > * { --e: calc(100cqw / 800); position: absolute; }
.rpleak-embed-bg { inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.rpleak-embed-dim { inset: 0; background: rgba(11, 12, 16, 0.82); }
.rpleak-embed-more {
  left: calc(30 * var(--e));
  top: calc(26 * var(--e));
  color: rgba(255, 255, 255, 0.8);
  font-size: calc(18 * var(--e));
  font-weight: 600;
  line-height: 1.27;
}
.rpleak-embed-away {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--e));
  left: calc(598 * var(--e));
  top: calc(20 * var(--e));
  height: calc(36 * var(--e));
  padding: 0 calc(16 * var(--e)) 0 calc(14 * var(--e));
  border-radius: calc(18 * var(--e));
  background: rgba(255, 255, 255, 0.12);
  font-size: calc(14 * var(--e));
  font-weight: 500;
  white-space: nowrap;
}
.rpleak-embed-away svg { width: calc(14 * var(--e)); height: calc(14 * var(--e)); }
.rpleak-thumb {
  width: calc(232 * var(--e));
  height: calc(130 * var(--e));
  overflow: hidden;
  border-radius: calc(12 * var(--e));
}
.rpleak-thumb img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.rpleak-thumb span {
  position: absolute;
  left: calc(8 * var(--e));
  top: calc(100 * var(--e));
  width: calc(140 * var(--e));
  height: calc(22 * var(--e));
  padding-left: calc(8 * var(--e));
  border-radius: calc(6 * var(--e));
  background: rgba(0, 0, 0, 0.6);
  font-size: calc(12 * var(--e));
  font-weight: 500;
  line-height: calc(22 * var(--e));
  white-space: nowrap;
}
.rpleak-thumb--1 { left: calc(30 * var(--e)); top: calc(78 * var(--e)); }
.rpleak-thumb--2 { left: calc(278 * var(--e)); top: calc(78 * var(--e)); }
.rpleak-thumb--3 { left: calc(526 * var(--e)); top: calc(78 * var(--e)); }
.rpleak-thumb--4 { left: calc(30 * var(--e)); top: calc(240 * var(--e)); }
.rpleak-thumb--5 { left: calc(278 * var(--e)); top: calc(240 * var(--e)); }
.rpleak-thumb--6 { left: calc(526 * var(--e)); top: calc(240 * var(--e)); }
.rpleak-embed-bar { left: 0; right: 0; top: calc(408 * var(--e)); height: calc(40 * var(--e)); background: rgba(0, 0, 0, 0.6); }
.rpleak-embed-bar svg { position: absolute; left: calc(19 * var(--e)); top: calc(12 * var(--e)); width: calc(16 * var(--e)); height: calc(16 * var(--e)); }
.rpleak-embed-track {
  position: absolute;
  left: calc(55 * var(--e));
  top: calc(18 * var(--e));
  width: calc(600 * var(--e));
  height: calc(4 * var(--e));
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.5);
}

/* the five leaks */
.rpleak-list {
  display: grid;
  grid-auto-rows: minmax(calc(88 * var(--s)), auto);
  margin: calc(10 * var(--s)) 0 0;
  padding: 0;
  list-style: none;
}
.rpleak-list li {
  position: relative;
  padding-left: calc(56 * var(--s));
}
.rpleak-x {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: max(28px, calc(36 * var(--s)));
  height: max(28px, calc(36 * var(--s)));
  border-radius: 50%;
  background: rgba(255, 90, 90, 0.15);
}
.rpleak-x svg { width: 50%; height: 50%; }
.rpleak-list b {
  display: block;
  padding-top: calc(2 * var(--s));
  font-size: max(17px, calc(22 * var(--s)));
  font-weight: 700;
  line-height: 1.27;
  letter-spacing: -0.005em;
}
.rpleak-list li > span:last-child {
  display: block;
  max-width: calc(520 * var(--s));
  margin-top: calc(4 * var(--s));
  color: rgba(255, 255, 255, 0.55);
  font-size: max(14px, calc(17 * var(--s)));
  line-height: 1.27;
}

/* do the math */
.rpleak-eyebrow {
  margin-top: calc(120 * var(--s));
  color: #ff8a7a;
  font-size: max(12px, calc(15 * var(--s)));
  font-weight: 600;
  line-height: 1.27;
  letter-spacing: 0.12em;
}
.rpleak-math {
  position: relative;
  width: calc(1216 * var(--s));
  height: calc(170 * var(--s));
  margin-top: calc(31 * var(--s));
  text-align: left;
  white-space: nowrap;
}
.rpleak-num, .rpleak-op { position: absolute; margin: 0; line-height: 1.27; }
.rpleak-num b {
  display: block;
  margin-top: calc(16 * var(--s));
  font-size: calc(84 * var(--s));
  font-weight: 700;
  letter-spacing: -0.04em;
}
.rpleak-num span {
  position: absolute;
  left: 0;
  top: calc(118 * var(--s));
  color: rgba(255, 255, 255, 0.55);
  font-size: calc(18 * var(--s));
  font-weight: 500;
}
.rpleak-num--a { left: 0; }
.rpleak-num--b { left: calc(315 * var(--s)); }
.rpleak-num--c { left: calc(652 * var(--s)); }
.rpleak-num--total { left: calc(896 * var(--s)); }
.rpleak-num--total b { margin-top: 0; color: #ff6b6b; font-size: calc(110 * var(--s)); }
.rpleak-num--total span { top: calc(128 * var(--s)); }
.rpleak-op {
  top: calc(20 * var(--s));
  color: rgba(255, 255, 255, 0.35);
  font-size: calc(64 * var(--s));
}
.rpleak-op--1 { left: calc(243 * var(--s)); }
.rpleak-op--2 { left: calc(580 * var(--s)); }
.rpleak-op--3 { left: calc(824 * var(--s)); }

.rpleak-foot {
  margin-top: calc(30 * var(--s));
  color: rgba(255, 255, 255, 0.6);
  font-size: max(15px, calc(20 * var(--s)));
  line-height: 1.27;
}

@media (max-width: 1023px) {
  .rp-leak { background: linear-gradient(180deg, #fcfbf8 0, #8ea6f0 90px, #101c5c 170px, #04050a 240px, #04050a 100%); }
  .rpleak-in { padding: 280px 16px 72px; }
  .rpleak-title { margin-top: 16px; }
  .rpleak-title-1, .rpleak-title-2 { white-space: normal; text-wrap: balance; }
  .rpleak-title-1 { font-size: min(56px, 9.4cqw); line-height: 1.1; }
  .rpleak-title-2 { margin-top: 4px; font-size: min(60px, 10.4cqw); line-height: 1.1; }
  .rpleak-sub { width: min(100%, 640px); margin-top: 16px; }
  .rpleak-row { flex-direction: column; align-items: stretch; gap: 32px; width: min(100%, 640px); margin: 36px 0 0; }
  .rpleak-embed { width: 100%; border-radius: 16px; }
  .rpleak-list { grid-auto-rows: auto; gap: 20px; margin: 0; }
  .rpleak-list li { padding-left: 44px; }
  .rpleak-list b { padding-top: 3px; }
  .rpleak-list li > span:last-child { max-width: none; }
  .rpleak-eyebrow { margin-top: 64px; }
  .rpleak-math {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 2px 10px;
    width: min(100%, 640px);
    height: auto;
    margin-top: 20px;
    text-align: center;
  }
  .rpleak-num, .rpleak-op { position: static; }
  .rpleak-num { display: flex; flex-direction: column; align-items: center; }
  .rpleak-num b { margin: 0; font-size: min(48px, 8.4cqw); }
  .rpleak-num span { position: static; font-size: 14px; }
  .rpleak-op { font-size: min(36px, 6.4cqw); line-height: 1.6; }
  .rpleak-op--3 { flex-basis: 100%; line-height: 1.2; }
  .rpleak-num--total { flex-basis: 100%; }
  .rpleak-num--total b { font-size: min(72px, 16cqw); }
  .rpleak-foot { width: min(100%, 520px); margin-top: 24px; }
}

/* ---- part: rent ---- */
/* 05 Pain — paid hosts bill you monthly (Figma 1092:211, 1920 x 1040) */
.rp-rent {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  background: #04050a;
  color: #fff;
  font-family: var(--font-sans);
}
.rp-rent > * { --s: min(1px, 100cqw / 1920); }
.rprent-glow {
  position: absolute;
  left: calc(560 * var(--s));
  top: calc(500 * var(--s));
  width: calc(800 * var(--s));
  height: calc(500 * var(--s));
  border-radius: 50%;
  background: rgba(39, 71, 245, 0.18);
  filter: blur(calc(110 * var(--s)));
  pointer-events: none;
}
.rprent-in {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(60 * var(--s)) 16px calc(82 * var(--s));
  text-align: center;
}
.rprent-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.rprent-chip-dot { width: 6px; height: 6px; border-radius: 50%; background: #ff5a5a; }
.rprent-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: calc(18 * var(--s));
}
.rprent-title-1 {
  font-size: max(32px, calc(84 * var(--s)));
  font-weight: 700;
  line-height: 1.27;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.rprent-title-2 {
  margin-top: calc(-30.7 * var(--s));
  font-family: var(--font-script);
  font-size: max(36px, calc(96 * var(--s)));
  font-weight: 400;
  line-height: 1.25;
  white-space: nowrap;
}

.rprent-cards {
  display: flex;
  justify-content: center;
  gap: calc(36 * var(--s));
  width: 100%;
  margin-top: calc(74 * var(--s));
  text-align: left;
}
/* a plan card (456 x 520); its own unit --c follows its width so it keeps its look when stacked on phones */
.rprent-card {
  position: relative;
  flex: none;
  container-type: inline-size;
  width: calc(456 * var(--s));
  min-height: calc(520 * var(--s));
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: calc(28 * var(--s));
  background: #11131b;
}
.rprent-card > * { --c: calc(100cqw / 456); margin-left: calc(34 * var(--c)); margin-right: calc(34 * var(--c)); }
.rprent-card--rp {
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  background: linear-gradient(180deg, #3b6bff, #1b2fc8);
  box-shadow: 0 calc(20 * var(--s)) calc(60 * var(--s)) rgba(39, 71, 245, 0.5);
}
.rprent-name {
  margin-top: calc(34 * var(--c));
  font-size: max(22px, calc(30 * var(--c)));
  font-weight: 700;
  line-height: 1.27;
  letter-spacing: -0.01em;
}
.rprent-plan {
  margin-top: calc(4 * var(--c));
  color: rgba(255, 255, 255, 0.55);
  font-size: max(13px, calc(16 * var(--c)));
  font-weight: 500;
  line-height: 1.27;
}
.rprent-price {
  display: flex;
  align-items: baseline;
  gap: calc(10 * var(--c));
  height: calc(104 * var(--c));
  margin-top: calc(14 * var(--c));
  white-space: nowrap;
}
.rprent-price b {
  font-size: calc(84 * var(--c));
  font-weight: 700;
  line-height: 1.27;
  letter-spacing: -0.04em;
}
.rprent-price span {
  color: rgba(255, 255, 255, 0.6);
  font-size: calc(22 * var(--c));
  font-weight: 500;
  line-height: 1.27;
}
.rprent-price--once b { font-size: calc(72 * var(--c)); line-height: 1.27; letter-spacing: -0.04em; }
.rprent-billed {
  margin-top: calc(8 * var(--c));
  color: rgba(255, 255, 255, 0.55);
  font-size: max(13px, calc(16 * var(--c)));
  font-weight: 500;
  line-height: 1.27;
}
.rprent-card--rp .rprent-billed { color: rgba(255, 255, 255, 0.85); }
.rprent-list {
  display: grid;
  grid-auto-rows: minmax(calc(62 * var(--c)), auto);
  margin-top: calc(31.7 * var(--c));
  padding: calc(27 * var(--c)) 0 calc(20 * var(--c));
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  list-style: none;
}
.rprent-list li {
  position: relative;
  padding: calc(3 * var(--c)) 0 0 calc(44 * var(--c));
  color: rgba(255, 255, 255, 0.9);
  font-size: max(14px, calc(18 * var(--c)));
  font-weight: 500;
  line-height: 1.35;
}
.rprent-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: calc(30 * var(--c));
  height: calc(30 * var(--c));
  border-radius: 50%;
  background: center / 53.3% no-repeat;
}
.rprent-list--no li::before {
  background-color: rgba(255, 90, 90, 0.16);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FF6B6B' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 4L4 12M4 4l8 8'/%3E%3C/svg%3E");
}
.rprent-list--yes li::before {
  background-color: #4ade80;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2306210F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.33 4L6 11.33 2.67 8'/%3E%3C/svg%3E");
}

.rprent-note {
  margin-top: calc(40 * var(--s));
  color: rgba(255, 255, 255, 0.35);
  font-size: max(12px, calc(14 * var(--s)));
  line-height: 1.27;
}

@media (max-width: 1023px) {
  .rprent-in { padding: 56px 16px 64px; }
  .rprent-title { margin-top: 16px; }
  .rprent-title-1, .rprent-title-2 { white-space: normal; text-wrap: balance; line-height: 1.1; }
  .rprent-title-1 { font-size: min(52px, 8.8cqw); }
  .rprent-title-2 { margin-top: 4px; font-size: min(58px, 9cqw); }
  .rprent-cards { flex-direction: column; align-items: center; gap: 18px; margin-top: 36px; }
  .rprent-card { width: min(100%, 456px); min-height: 0; border-radius: 22px; }
  .rprent-card--rp { box-shadow: 0 16px 48px rgba(39, 71, 245, 0.5); }
  .rprent-glow { left: 10%; top: 40%; width: 80%; height: 40%; filter: blur(60px); }
  .rprent-note { margin-top: 28px; }
}

/* ---- part: intro ---- */
/* 06 Introducing RocketPlayer (Figma 1092:281, 1920 x 900). Fades out into the cream section below. */
.rp-intro {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  background: linear-gradient(180deg, #04050a 0%, #04050a 60%, #101c5c 76%, #8ea6f0 88%, #fcfbf8 100%);
  color: #fff;
  font-family: var(--font-sans);
}
.rp-intro > * { --s: min(1px, 100cqw / 1920); }
.rpintro-glow { position: absolute; border-radius: 50%; pointer-events: none; }
.rpintro-glow--wide {
  left: calc(460 * var(--s));
  top: calc(140 * var(--s));
  width: calc(1000 * var(--s));
  height: calc(560 * var(--s));
  background: rgba(39, 71, 245, 0.45);
  filter: blur(calc(120 * var(--s)));
}
.rpintro-glow--core {
  left: calc(760 * var(--s));
  top: calc(260 * var(--s));
  width: calc(400 * var(--s));
  height: calc(300 * var(--s));
  background: rgba(91, 200, 255, 0.3);
  filter: blur(calc(80 * var(--s)));
}
.rpintro-in {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(150 * var(--s)) 16px calc(211 * var(--s));
  text-align: center;
}
.rpintro-eyebrow {
  color: rgba(255, 255, 255, 0.7);
  font-size: max(13px, calc(18 * var(--s)));
  font-weight: 600;
  line-height: 1.27;
  letter-spacing: 0.3em;
}
/* the logo lockup (1281 x 240): icon + "Rocket" + script "Player"; its unit --l follows its width */
.rpintro-lockup {
  position: relative;
  container-type: inline-size;
  width: calc(1281 * var(--s));
  aspect-ratio: 1281 / 240;
  margin-top: calc(57 * var(--s));
  font-weight: 400;
  white-space: nowrap;
}
/* laid out in a row (not absolutely), so "Rocket" and "Player" keep a gap whatever the font metrics */
.rpintro-lockup { display: flex; align-items: flex-start; justify-content: center; }
.rpintro-lockup > * { --l: calc(100cqw / 1281); position: relative; flex: none; line-height: 1.27; }
.rpintro-icon { width: calc(340 * var(--l)); height: auto; max-width: none; margin: calc(-30 * var(--l)) calc(-20 * var(--l)) 0 calc(-60 * var(--l)); }
.rpintro-rocket {
  font-size: calc(190 * var(--l));
  font-weight: 700;
  letter-spacing: -0.025em;
}
.rpintro-player {
  top: calc(-14 * var(--l));
  margin-left: calc(22 * var(--l));
  font-family: var(--font-script);
  font-size: calc(214 * var(--l));
  line-height: 1.25;
}
.rpintro-tag {
  margin-top: calc(50 * var(--s));
  font-size: max(22px, calc(44 * var(--s)));
  font-weight: 700;
  line-height: 1.27;
  letter-spacing: -0.015em;
}
.rpintro-sub {
  width: min(100%, calc(900 * var(--s)));
  margin-top: calc(14 * var(--s));
  color: rgba(255, 255, 255, 0.7);
  font-size: max(16px, calc(22 * var(--s)));
  line-height: 1.5;
}

@media (max-width: 1023px) {
  .rp-intro { background: linear-gradient(180deg, #04050a 0%, #04050a 64%, #101c5c 80%, #8ea6f0 91%, #fcfbf8 100%); }
  .rpintro-in { padding: 72px 16px 150px; }
  .rpintro-lockup { width: min(100%, 720px); margin-top: 36px; }
  .rpintro-glow--wide { left: 0; top: 60px; width: 100%; height: 360px; filter: blur(60px); }
  .rpintro-glow--core { left: 25%; top: 140px; width: 50%; height: 200px; filter: blur(40px); }
  .rpintro-tag { width: min(100%, 640px); margin-top: 32px; font-size: min(34px, 6.6cqw); line-height: 1.2; text-wrap: balance; }
  .rpintro-sub { width: min(100%, 640px); margin-top: 14px; }
}

/* ---- part: features ---- */
/* 07 Features — vertical (Figma 1097:128, 1920 x 5516): heading + six rows that alternate text / stage.
   Each stage is the Figma art exported as one image (2x). */
.rp-features {
  position: relative;
  container-type: inline-size;
  background: #fcfbf8;
  color: #14161c;
}
.rp-features > * { --s: min(1px, 100cqw / 1920); }
.rpfeatures-in {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(60 * var(--s)) 16px calc(240 * var(--s));
}

/* chip */
.rpfeatures-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid rgba(20, 22, 28, 0.08);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(11, 20, 64, 0.08);
  color: rgba(20, 22, 28, 0.75);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.rpfeatures-chip-dot { width: 6px; height: 6px; border-radius: 50%; background: #2747f5; }

/* heading */
.rpfeatures-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: calc(18 * var(--s)) 0 0;
  text-align: center;
}
.rpfeatures-title-1 {
  font-size: max(34px, calc(92 * var(--s)));
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.035em;
}
.rpfeatures-title-2 {
  margin-top: calc(-33 * var(--s));
  font-family: "Rancho", cursive;
  font-weight: 400;
  font-size: max(38px, calc(108 * var(--s)));
  line-height: 1.24;
}

/* rows */
.rpfeatures-rows {
  display: grid;
  gap: calc(160 * var(--s));
  width: calc(1360 * var(--s));
  margin-top: calc(94 * var(--s));
}
.rpfeatures-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.rpfeatures-row--flip { flex-direction: row-reverse; }
.rpfeatures-row--flip .rpfeatures-text { margin-right: calc(-40 * var(--s)); } /* text sits at x 1140 (100 from the stage) */
.rpfeatures-stage {
  flex: none;
  width: calc(760 * var(--s));
  height: auto;
  border-radius: calc(101.33 * var(--s));
}
.rpfeatures-text {
  flex: none;
  width: calc(540 * var(--s));
  padding-top: calc(123 * var(--s));
}
.rpfeatures-num {
  margin: 0;
  color: #2747f5;
  font-size: max(13px, calc(15 * var(--s)));
  font-weight: 600;
  line-height: 1.27;
}
.rpfeatures-h {
  width: calc(520 * var(--s));
  margin: calc(3 * var(--s)) 0 0;
  font-size: max(26px, calc(48 * var(--s)));
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.rpfeatures-script {
  margin: calc(3 * var(--s)) 0 0;
  font-family: "Rancho", cursive;
  font-size: max(28px, calc(54 * var(--s)));
  line-height: 1.24;
}
.rpfeatures-body {
  width: calc(500 * var(--s));
  margin: calc(16 * var(--s)) 0 0;
  color: rgba(20, 22, 28, 0.66);
  font-size: max(16px, calc(20 * var(--s)));
  line-height: 1.5;
}
.rpfeatures-list {
  display: grid;
  gap: calc(12 * var(--s));
  margin: calc(24 * var(--s)) 0 0;
  padding: 0;
  list-style: none;
}
.rpfeatures-list li {
  position: relative;
  min-height: max(20px, calc(24 * var(--s)));
  padding-left: max(30px, calc(36 * var(--s)));
  color: rgba(20, 22, 28, 0.85);
  font-size: max(15px, calc(17 * var(--s)));
  font-weight: 500;
  line-height: max(20px, calc(24 * var(--s)));
}
/* green tick in a pale green circle */
.rpfeatures-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: max(20px, calc(24 * var(--s)));
  height: max(20px, calc(24 * var(--s)));
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M11.667 3.5 5.25 9.917 2.333 7' stroke='%2316C784' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 50% 50% / 58% no-repeat,
    rgba(22, 199, 132, 0.15);
}

/* phones & tablets: stage on top, text under it */
@media (max-width: 1023px) {
  .rpfeatures-in { padding: 64px 16px 80px; }
  .rpfeatures-title { margin-top: 16px; }
  .rpfeatures-title-1 { font-size: min(56px, 8.6cqw); line-height: 1.1; text-wrap: balance; }
  .rpfeatures-title-2 { margin-top: 2px; font-size: min(64px, 10cqw); line-height: 1.1; text-wrap: balance; }
  .rpfeatures-rows { width: min(100%, 640px); gap: 64px; margin-top: 44px; }
  .rpfeatures-row,
  .rpfeatures-row--flip { flex-direction: column-reverse; align-items: stretch; gap: 28px; }
  .rpfeatures-row--flip .rpfeatures-text { margin-right: 0; }
  .rpfeatures-stage { width: 100%; border-radius: min(64px, 13.3cqw); }
  .rpfeatures-text { width: auto; padding-top: 0; }
  .rpfeatures-h { width: auto; font-size: min(36px, 7.6cqw); line-height: 1.1; }
  .rpfeatures-script { margin-top: 4px; font-size: min(40px, 8.4cqw); line-height: 1.15; }
  .rpfeatures-body { width: auto; margin-top: 12px; font-size: 16px; line-height: 1.55; }
  .rpfeatures-list { gap: 10px; margin-top: 18px; }
}

/* ---- part: platform ---- */
/* 08 Your video platform (Figma 1104:128, 1920 x 2220). Starts with a cream → blue → black fade from the section above. */
.rp-platform {
  --u: max(0.5px, min(1px, 100vw / 1920));
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  background: #04050a linear-gradient(180deg, #fcfbf8 0, #8ea6f0 calc(133.4 * var(--u)), #101c5c calc(247.7 * var(--u)), #04050a calc(362.1 * var(--u))) no-repeat;
  color: #fff;
}
.rp-platform > * { --s: min(1px, 100cqw / 1920); }
.rpplatform-in {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(420 * var(--s)) 16px calc(60 * var(--s));
  text-align: center;
}
.rpplatform-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: max(28px, calc(32 * var(--s)));
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  font-size: max(11px, calc(12 * var(--s)));
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.rpplatform-chip-dot { width: 6px; height: 6px; border-radius: 50%; background: #5bc8ff; }
.rpplatform-title { display: flex; flex-direction: column; align-items: center; margin-top: calc(28 * var(--s)); }
.rpplatform-title-1 {
  font-size: max(30px, calc(84 * var(--s)));
  font-weight: 700;
  line-height: 1.024;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.rpplatform-title-2 {
  margin-top: calc(-2 * var(--s));
  font-family: var(--font-script, "Rancho", cursive);
  font-weight: 400;
  font-size: max(26px, calc(72 * var(--s)));
  line-height: 1.25;
  white-space: nowrap;
}
.rpplatform-grid {
  display: grid;
  grid-template-columns: repeat(2, calc(708 * var(--s)));
  column-gap: calc(24 * var(--s));
  margin-top: calc(60 * var(--s));
  text-align: left;
}
.rpplatform-card { min-height: calc(680 * var(--s)); }
.rpplatform-tile {
  width: 100%;
  height: auto;
  border-radius: calc(28 * var(--s));
}
.rpplatform-card-title {
  margin-top: calc(28 * var(--s));
  font-size: max(20px, calc(30 * var(--s)));
  font-weight: 700;
  line-height: 1.27;
  letter-spacing: -0.01em;
}
.rpplatform-card-text {
  max-width: calc(668 * var(--s));
  margin-top: calc(6 * var(--s));
  color: rgba(255, 255, 255, 0.6);
  font-size: max(14px, calc(18 * var(--s)));
  line-height: 1.5;
}
@media (max-width: 1023px) {
  .rpplatform-in { padding: calc(420 * var(--u)) 16px 72px; }
  .rpplatform-title { margin-top: 20px; }
  .rpplatform-title-1 { font-size: min(52px, 8.4cqw); line-height: 1.08; white-space: normal; text-wrap: balance; }
  .rpplatform-br { display: none; }
  .rpplatform-title-2 { margin-top: 10px; font-size: min(44px, 8cqw); line-height: 1.1; white-space: normal; text-wrap: balance; }
  .rpplatform-grid { grid-template-columns: minmax(0, 620px); row-gap: 40px; margin-top: 36px; }
  .rpplatform-card { min-height: 0; }
  .rpplatform-tile { border-radius: 20px; }
  .rpplatform-card-title { margin-top: 18px; font-size: 22px; }
  .rpplatform-card-text { max-width: none; margin-top: 6px; font-size: 15px; }
}

/* ---- part: ai ---- */
/* 09 AI connector (Figma 1104:237, 1920 x 1901). Ends with a black → blue → cream fade into the next section. */
.rp-ai {
  --u: max(0.5px, min(1px, 100vw / 1920));
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  background: #04050a linear-gradient(0deg, #fcfbf8 0, #8ea6f0 calc(60 * var(--u)), #101c5c calc(150 * var(--u)), #04050a calc(240 * var(--u))) no-repeat;
  color: #fff;
}
.rp-ai > * { --s: min(1px, 100cqw / 1920); }
.rpai-glow {
  position: absolute;
  left: calc(190 * var(--s));
  top: calc(300 * var(--s));
  width: calc(1540 * var(--s));
  height: calc(940 * var(--s));
  max-width: none;
  pointer-events: none;
}
.rpai-in {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(110 * var(--s)) 16px calc(280 * var(--s));
  text-align: center;
}
.rpai-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: max(30px, calc(34 * var(--s)));
  padding: 0 14px 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  font-size: max(12px, calc(13 * var(--s)));
  font-weight: 600;
  white-space: nowrap;
}
.rpai-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; }

/* headline: two lines of 75px with the glass "Chatting" pill and the morphing agent icon */
.rpai-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: calc(26 * var(--s));
  font-size: max(30px, calc(75.264 * var(--s)));
  font-weight: 700;
  line-height: 1.27;
  letter-spacing: -0.035em;
}
.rpai-line { display: flex; align-items: center; justify-content: center; white-space: nowrap; }
.rpai-line--1 { gap: calc(16.93 * var(--s)); }
.rpai-line--2 { gap: calc(18.82 * var(--s)); margin-top: calc(-1.9 * var(--s)); color: rgba(255, 255, 255, 0.55); }
.rpai-glass {
  display: inline-flex;
  align-items: center;
  height: calc(101.6 * var(--s));
  padding: 0 calc(21.6 * var(--s));
  border: max(1px, calc(0.94 * var(--s))) solid rgba(255, 255, 255, 0.55);
  border-radius: calc(30.1 * var(--s));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.07));
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
  box-shadow: 0 calc(18.8 * var(--s)) calc(37.6 * var(--s)) calc(-9.4 * var(--s)) rgba(0, 0, 0, 0.55),
    inset 0 -2.8px 5.6px rgba(0, 0, 0, 0.3), inset 0 -9.4px 18.8px rgba(255, 255, 255, 0.1), inset 0 1.9px 1.9px rgba(255, 255, 255, 0.45);
}
.rpai-morph {
  position: relative;
  flex: none;
  width: calc(90.32 * var(--s));
  height: calc(90.32 * var(--s));
  overflow: hidden;
  border: max(1px, calc(1.41 * var(--s))) solid rgba(255, 255, 255, 0.7);
  border-radius: calc(28.22 * var(--s));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06));
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
  box-shadow: 0 calc(18.8 * var(--s)) calc(37.6 * var(--s)) calc(-9.4 * var(--s)) rgba(0, 0, 0, 0.55),
    inset 0 -2.8px 5.6px rgba(0, 0, 0, 0.3), inset 0 -9.4px 18.8px rgba(255, 255, 255, 0.1), inset 0 1.9px 1.9px rgba(255, 255, 255, 0.45);
}
.rpai-morph img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(62.09 * var(--s));
  height: calc(62.09 * var(--s));
  border-radius: calc(18.82 * var(--s));
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.86);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.rpai-morph img.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.rpai-morph-shine {
  position: absolute;
  left: calc(15.5 * var(--s));
  top: calc(3.3 * var(--s));
  width: calc(56.4 * var(--s));
  height: calc(7.5 * var(--s));
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
  filter: blur(2.35px);
}
.rpai-sub {
  margin-top: calc(37.7 * var(--s));
  color: rgba(255, 255, 255, 0.6);
  font-size: max(15px, calc(22 * var(--s)));
  line-height: 1.27;
}

.rpai-stages {
  display: grid;
  grid-template-columns: repeat(2, calc(700 * var(--s)));
  column-gap: calc(40 * var(--s));
  margin-top: calc(70 * var(--s));
}
.rpai-stage { margin: 0; }
.rpai-stage-img { width: 100%; height: auto; border-radius: calc(37.56 * var(--s)); }
.rpai-stage-img--chat { border-radius: calc(28 * var(--s)); box-shadow: 0 calc(20 * var(--s)) calc(60 * var(--s)) rgba(0, 0, 0, 0.5); }
.rpai-stage figcaption {
  margin-top: calc(20 * var(--s));
  color: rgba(255, 255, 255, 0.55);
  font-size: max(13px, calc(16 * var(--s)));
  font-weight: 600;
  line-height: 1.27;
}

.rpai-ask {
  margin-top: calc(99.7 * var(--s));
  color: rgba(255, 255, 255, 0.45);
  font-size: max(11px, calc(14 * var(--s)));
  font-weight: 600;
  line-height: 1.27;
  letter-spacing: 0.16em;
}
.rpai-pile {
  position: relative;
  width: calc(1440 * var(--s));
  height: calc(380 * var(--s));
  margin: calc(42 * var(--s)) 0 0;
  padding: 0;
  list-style: none;
}
.rpai-cmd {
  position: absolute;
  left: calc(var(--x) * var(--s));
  top: calc(var(--y) * var(--s));
  display: flex;
  align-items: center;
  height: calc(54 * var(--s));
  padding: 0 calc(24 * var(--s));
  border-radius: calc(27 * var(--s)) calc(27 * var(--s)) calc(6 * var(--s)) calc(27 * var(--s));
  font-size: calc(18 * var(--s));
  font-weight: 500;
  white-space: nowrap;
  transform: rotate(var(--r));
  filter: drop-shadow(0 calc(10 * var(--s)) calc(12 * var(--s)) rgba(0, 0, 0, 0.45));
}
.rpai-cmd--blue { background: linear-gradient(180deg, #5b8cff, #2440f0); color: #fff; }
.rpai-cmd--white { background: #fff; color: #14161c; }
.rpai-cmd--dark { padding: 0 calc(23 * var(--s)); border: 1px solid rgba(255, 255, 255, 0.12); background: #22242e; color: #fff; }

.rpai-safe {
  display: flex;
  justify-content: center;
  gap: calc(37 * var(--s));
  margin: calc(40 * var(--s)) 0 0;
  padding: 0;
  list-style: none;
}
.rpai-safe li {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--s));
  color: rgba(255, 255, 255, 0.7);
  font-size: max(13px, calc(16 * var(--s)));
  font-weight: 500;
  white-space: nowrap;
}
.rpai-safe img { width: max(15px, calc(18 * var(--s))); height: auto; }

@media (max-width: 1023px) {
  .rpai-glow { left: -40%; top: 260px; width: 180%; height: auto; }
  .rpai-in { padding: 64px 16px calc(240 * var(--u) + 40px); }
  .rpai-title { margin-top: 22px; font-size: min(48px, 8cqw); line-height: 1.15; }
  .rpai-line { display: block; white-space: normal; text-wrap: balance; }
  .rpai-line--2 { margin-top: 8px; }
  .rpai-glass { height: 1.3em; margin: 4px 0 0 4px; padding: 0 12px; border-radius: 0.4em; vertical-align: middle; }
  .rpai-morph { display: inline-block; width: 1.2em; height: 1.2em; margin: 0 4px; border-radius: 0.37em; vertical-align: middle; }
  .rpai-morph img { width: 0.82em; height: 0.82em; border-radius: 0.25em; }
  .rpai-morph-shine { display: none; }
  .rpai-sub { max-width: 560px; margin-top: 18px; font-size: 16px; line-height: 1.5; }
  .rpai-stages { grid-template-columns: minmax(0, 620px); row-gap: 28px; margin-top: 36px; }
  .rpai-stage-img { border-radius: 22px; }
  .rpai-stage-img--chat { border-radius: 18px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5); }
  .rpai-stage figcaption { margin-top: 12px; font-size: 14px; }
  .rpai-ask { margin-top: 52px; font-size: 12px; }
  .rpai-pile {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 10px;
    width: min(100%, 720px);
    height: auto;
    margin-top: 22px;
  }
  .rpai-cmd {
    position: static;
    height: auto;
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 22px 22px 6px 22px;
    font-size: 15px;
    line-height: 1.3;
    white-space: normal;
    transform: rotate(calc(var(--r) / 2));
    filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.45));
  }
  .rpai-cmd--dark { padding: 9px 15px; }
  .rpai-safe { flex-wrap: wrap; gap: 12px 22px; max-width: 560px; margin-top: 36px; }
  .rpai-safe li { gap: 8px; font-size: 14px; }
}

/* ---- part: more ---- */
/* 08 More features — 3x3 (Figma 1101:128, 1920 x 2068). Each tile's art is one exported image. */
.rp-more {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  background: #fcfbf8;
  color: #14161c;
}
.rp-more > * { --s: min(1px, 100cqw / 1920); }
.rpmore-in {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(60 * var(--s)) 16px calc(112 * var(--s));
}
.rpmore-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid rgba(20, 22, 28, 0.08);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(11, 20, 64, 0.08);
  color: rgba(20, 22, 28, 0.75);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.rpmore-dot { width: 6px; height: 6px; border-radius: 50%; background: #2747f5; }
.rpmore-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: calc(16 * var(--s)) 0 0;
  text-align: center;
  font-weight: 700;
}
.rpmore-title-1 {
  font-size: max(30px, calc(64 * var(--s)));
  line-height: 1.25;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.rpmore-title-2 {
  margin-top: calc(4 * var(--s));
  font-family: "Rancho", cursive;
  font-weight: 400;
  font-size: max(36px, calc(96 * var(--s)));
  line-height: 1.24;
  white-space: nowrap;
}
.rpmore-grid {
  display: grid;
  grid-template-columns: repeat(3, calc(456 * var(--s)));
  column-gap: calc(36 * var(--s));
  row-gap: calc(32 * var(--s));
  margin-top: calc(69 * var(--s));
}
.rpmore-item { min-width: 0; }
.rpmore-stage {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(60.8 * var(--s));
}
.rpmore-name {
  margin: calc(26 * var(--s)) 0 0;
  font-size: max(18px, calc(28 * var(--s)));
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.rpmore-text {
  max-width: calc(440 * var(--s));
  margin: calc(5 * var(--s)) 0 0;
  color: rgba(20, 22, 28, 0.64);
  font-size: max(14px, calc(17 * var(--s)));
  line-height: 1.5;
}

@media (max-width: 1023px) {
  .rpmore-in { padding: 56px 16px 72px; }
  .rpmore-title { margin-top: 16px; }
  .rpmore-title-1 { font-size: min(44px, 8.2cqw); white-space: normal; text-wrap: balance; line-height: 1.15; }
  .rpmore-title-2 { margin-top: 6px; font-size: min(56px, 10cqw); white-space: normal; text-wrap: balance; line-height: 1.1; }
  .rpmore-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 20px;
    width: min(100%, 720px);
    margin-top: 40px;
  }
  .rpmore-stage { border-radius: 32px; }
  .rpmore-name { margin-top: 16px; font-size: 21px; }
  .rpmore-text { max-width: none; margin-top: 6px; font-size: 15px; }
}
@media (max-width: 639px) {
  .rpmore-grid { grid-template-columns: minmax(0, 1fr); width: min(100%, 456px); gap: 36px; }
}

/* ---- part: nomore ---- */
/* 09 No more (Figma 1101:1422, 1920 x 1610): fades from the cream section above into black, then a 3x2 grid. */
.rp-nomore {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  background: #04050a;
  color: #fff;
}
.rp-nomore > * { --s: min(1px, 100cqw / 1920); }
/* Figma: #fcfbf8 0% → #8ea6f0 9.26% → #101c5c 17.28% → #04050a 24.69% of 1610px */
.rpnomore-fade {
  position: absolute;
  inset: 0 0 auto;
  height: max(170px, calc(397.5 * var(--s)));
  background: linear-gradient(180deg, #fcfbf8 0%, #8ea6f0 37.5%, #101c5c 70%, #04050a 100%);
  pointer-events: none;
}
.rpnomore-in {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(440 * var(--s)) 16px calc(196 * var(--s));
}
.rpnomore-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  text-align: center;
  font-weight: 700;
}
.rpnomore-title-1 {
  font-size: max(32px, calc(84 * var(--s)));
  line-height: 1.25;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.rpnomore-title-2 {
  margin-top: calc(-15 * var(--s));
  font-family: "Rancho", cursive;
  font-weight: 400;
  font-size: max(30px, calc(76 * var(--s)));
  line-height: 1.24;
  white-space: nowrap;
}
.rpnomore-grid {
  display: grid;
  grid-template-columns: repeat(3, calc(456 * var(--s)));
  column-gap: calc(36 * var(--s));
  row-gap: calc(76 * var(--s));
  margin: calc(106 * var(--s)) 0 0;
  padding: 0;
  list-style: none;
}
.rpnomore-item { min-width: 0; }
.rpnomore-sign {
  position: relative;
  display: block;
  width: calc(112 * var(--s));
  height: calc(112 * var(--s));
}
.rpnomore-ban { position: absolute; inset: 0; width: 100%; height: 100%; }
.rpnomore-icon {
  position: absolute;
  left: 28.57%;
  top: 28.57%;
  width: 42.86%;
  height: 42.86%;
}
.rpnomore-kicker {
  margin: calc(42 * var(--s)) 0 0;
  color: #ff8a7a;
  font-size: max(15px, calc(22 * var(--s)));
  font-weight: 700;
  line-height: 1.27;
  letter-spacing: 0.02em;
}
.rpnomore-name {
  margin: calc(2 * var(--s)) 0 0;
  font-size: max(28px, calc(48 * var(--s)));
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.rpnomore-text {
  max-width: calc(420 * var(--s));
  margin: calc(6 * var(--s)) 0 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: max(14px, calc(18 * var(--s)));
  line-height: 1.5;
}

@media (max-width: 1023px) {
  .rpnomore-fade { height: 200px; }
  .rpnomore-in { padding: 240px 16px 80px; }
  .rpnomore-title-1 { font-size: min(56px, 9.4cqw); white-space: normal; text-wrap: balance; line-height: 1.12; }
  .rpnomore-title-2 { margin-top: 8px; font-size: min(52px, 9cqw); white-space: normal; text-wrap: balance; line-height: 1.12; }
  .rpnomore-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 44px 24px;
    width: min(100%, 720px);
    margin-top: 48px;
  }
  .rpnomore-sign { width: 80px; height: 80px; }
  .rpnomore-kicker { margin-top: 20px; font-size: 16px; }
  .rpnomore-name { font-size: min(34px, 7.6cqw); white-space: normal; }
  .rpnomore-text { max-width: none; margin-top: 6px; font-size: 15px; }
}
@media (max-width: 639px) {
  .rpnomore-grid { grid-template-columns: minmax(0, 1fr); width: min(100%, 420px); gap: 40px; }
}

/* ---- part: who ---- */
/* 11 Who it is for (Figma 1119:128, 1920 x 1420). Each tile's mock page is one exported image. */
.rp-who {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  background: #04050a;
  color: #fff;
}
.rp-who > * { --s: min(1px, 100cqw / 1920); }
.rpwho-in {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(40 * var(--s)) 16px calc(110 * var(--s));
}
.rpwho-eyebrow {
  margin: 0;
  color: #5bc8ff;
  font-size: max(11px, calc(14 * var(--s)));
  font-weight: 600;
  line-height: 1.27;
  letter-spacing: 0.16em;
  text-align: center;
}
.rpwho-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: calc(22 * var(--s)) 0 0;
  text-align: center;
  font-weight: 700;
}
.rpwho-title-1 {
  font-size: max(32px, calc(84 * var(--s)));
  line-height: 1.25;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.rpwho-title-2 {
  margin-top: calc(-19 * var(--s));
  font-family: "Rancho", cursive;
  font-weight: 400;
  font-size: max(32px, calc(84 * var(--s)));
  line-height: 1.24;
  white-space: nowrap;
}
.rpwho-grid {
  display: grid;
  grid-template-columns: repeat(3, calc(456 * var(--s)));
  column-gap: calc(36 * var(--s));
  row-gap: calc(44 * var(--s));
  margin-top: calc(90 * var(--s));
}
.rpwho-item { min-width: 0; }
.rpwho-tile {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(26 * var(--s));
}
.rpwho-name {
  margin: calc(28 * var(--s)) 0 0;
  font-size: max(18px, calc(28 * var(--s)));
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.rpwho-text {
  max-width: calc(436 * var(--s));
  margin: calc(5 * var(--s)) 0 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: max(14px, calc(17 * var(--s)));
  line-height: 1.5;
}

@media (max-width: 1023px) {
  .rpwho-in { padding: 40px 16px 80px; }
  .rpwho-eyebrow { max-width: 320px; text-wrap: balance; line-height: 1.6; }
  .rpwho-title { margin-top: 14px; }
  .rpwho-title-1 { font-size: min(56px, 9.4cqw); white-space: normal; text-wrap: balance; line-height: 1.12; }
  .rpwho-title-2 { margin-top: 6px; font-size: min(56px, 9.4cqw); white-space: normal; text-wrap: balance; line-height: 1.12; }
  .rpwho-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 20px;
    width: min(100%, 720px);
    margin-top: 44px;
  }
  .rpwho-tile { border-radius: 20px; }
  .rpwho-name { margin-top: 16px; font-size: 21px; }
  .rpwho-text { max-width: none; margin-top: 6px; font-size: 15px; }
}
@media (max-width: 639px) {
  .rpwho-grid { grid-template-columns: minmax(0, 1fr); width: min(100%, 456px); gap: 36px; }
}

/* ---- part: guarantee ---- */
/* 12 Guarantee (Figma 1119:339, 1920 x 1180): coin photo full-bleed, copy on the right,
   a fade from the dark section above over the top 600px. */
.rp-guarantee {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  background: #08080a;
}
.rp-guarantee > * { --s: min(1px, 100cqw / 1920); }

.rpguarantee-stage {
  position: relative;
  height: calc(100cqw * 1180 / 1920); /* the photo's own shape at every width, so the coin never grows past the copy */
}
.rpguarantee-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.rpguarantee-fade {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 50.85%; /* 600 of 1180 */
  background: linear-gradient(180deg, #08080a 0%, rgba(8, 8, 10, 0.85) 30%, rgba(8, 8, 10, 0.3) 65%, rgba(8, 8, 10, 0) 100%);
}

.rpguarantee-copy {
  position: absolute;
  left: calc(50% + 80 * var(--s)); /* x 1040 of the 1920 frame, measured from the centre */
  top: 34.92%; /* y 412 of 1180 */
  width: calc(700 * var(--s));
  color: #1a1612;
}
.rpguarantee-pill {
  display: inline-block;
  padding: calc(8 * var(--s)) calc(18 * var(--s));
  border-radius: 99px;
  background: #1a1612;
  color: #8fd8ff;
  font-size: max(12px, calc(16 * var(--s)));
  font-weight: 700;
  line-height: 1.25;
}
.rpguarantee-title {
  margin-top: calc(26 * var(--s));
  font-size: max(30px, calc(72 * var(--s)));
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.04em;
}
.rpguarantee-script {
  margin-top: calc(3 * var(--s));
  font-family: "Rancho", cursive;
  font-size: max(28px, calc(64 * var(--s)));
  line-height: 1.25;
  white-space: nowrap;
}
.rpguarantee-text {
  width: calc(620 * var(--s));
  margin-top: calc(20 * var(--s));
  color: rgba(26, 22, 18, 0.7);
  font-size: max(14px, calc(20 * var(--s)));
  line-height: 1.6;
}
.rpguarantee-trust {
  display: flex;
  gap: calc(12 * var(--s));
  margin: calc(36 * var(--s)) 0 0;
  padding: 0;
  list-style: none;
}
.rpguarantee-trust li {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--s));
  padding: calc(12 * var(--s)) calc(18 * var(--s)) calc(12 * var(--s)) calc(14 * var(--s));
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: calc(18 * var(--s));
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  box-shadow: 0 8px 10px rgba(107, 86, 54, 0.1);
  white-space: nowrap;
}
.rpguarantee-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: calc(36 * var(--s));
  height: calc(36 * var(--s));
  border-radius: calc(11 * var(--s));
  background: linear-gradient(180deg, #f6e2a6, #e0b860);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.rpguarantee-icon img { width: calc(20 * var(--s)); height: calc(20 * var(--s)); }
.rpguarantee-txt {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: max(11px, calc(14 * var(--s)));
  line-height: 1.27;
}
.rpguarantee-txt b { font-weight: 700; }
.rpguarantee-txt span { color: rgba(26, 22, 18, 0.6); }
.rpguarantee-sign {
  margin-top: calc(37 * var(--s));
  color: rgba(26, 22, 18, 0.9);
  font-family: "Rancho", cursive;
  font-size: max(26px, calc(46 * var(--s)));
  line-height: 1.25;
}
.rpguarantee-team {
  color: rgba(26, 22, 18, 0.55);
  font-size: max(12px, calc(15 * var(--s)));
  font-weight: 600;
  line-height: 1.27;
}

/* phones & tablets: the coin photo on top (cropped to the coin), the copy below on the photo's cream */
@media (max-width: 1023px) {
  .rp-guarantee { background: #ebe3d9; }
  .rpguarantee-stage { height: min(78cqw, 560px); }
  .rpguarantee-photo { object-position: 22% 50%; }
  .rpguarantee-fade { height: 40%; }
  .rpguarantee-stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28%; background: linear-gradient(rgba(235, 227, 217, 0), #ebe3d9); }
  .rpguarantee-copy {
    position: static;
    width: auto;
    max-width: 640px;
    margin: 0 auto;
    padding: 8px 20px 64px;
  }
  .rpguarantee-pill { padding: 6px 14px; font-size: 13px; }
  .rpguarantee-title { margin-top: 16px; font-size: min(44px, 9cqw); }
  .rpguarantee-script { margin-top: 6px; font-size: min(44px, 9cqw); white-space: normal; line-height: 1.15; }
  .rpguarantee-text { width: auto; margin-top: 14px; font-size: 16px; line-height: 1.6; }
  .rpguarantee-trust { flex-wrap: wrap; gap: 10px; margin-top: 24px; }
  .rpguarantee-trust li { gap: 10px; padding: 10px 14px 10px 10px; border-radius: 16px; }
  .rpguarantee-icon { width: 34px; height: 34px; border-radius: 10px; }
  .rpguarantee-icon img { width: 18px; height: 18px; }
  .rpguarantee-txt { font-size: 13px; }
  .rpguarantee-sign { margin-top: 28px; font-size: 36px; }
  .rpguarantee-team { font-size: 14px; }
}

/* ---- part: pricing ---- */
/* 13 Pricing (Figma 1119:377, 1920 x 1935): headline + one 680px price card */
.rp-pricing {
  position: relative;
  container-type: inline-size;
  background: #fcfbf8;
  color: #14161c;
}
.rp-pricing > * { --s: min(1px, 100cqw / 1920); }
.rppricing-in {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(110 * var(--s)) 16px calc(140 * var(--s));
}

.rppricing-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.rppricing-head-1 {
  font-size: max(34px, calc(92 * var(--s)));
  font-weight: 700;
  line-height: 1.27;
  letter-spacing: -0.035em;
  white-space: nowrap;
}
.rppricing-head-2 {
  margin-top: calc(-31 * var(--s));
  font-family: "Rancho", cursive;
  font-size: max(30px, calc(80 * var(--s)));
  font-weight: 400;
  line-height: 1.27;
  white-space: nowrap;
}

/* the card */
.rppricing-card {
  position: relative;
  width: calc(680 * var(--s));
  margin-top: calc(72.5 * var(--s));
  overflow: hidden;
  border-radius: calc(32 * var(--s));
  background: #fff;
  box-shadow: 0 0 0 1px rgba(20, 22, 28, 0.06), 0 calc(24 * var(--s)) calc(60 * var(--s)) rgba(11, 20, 64, 0.12);
}
.rppricing-top {
  position: relative;
  height: calc(260 * var(--s));
  overflow: hidden;
  padding: 0 calc(48 * var(--s));
  background: linear-gradient(180deg, #0f1638, #04050a);
  color: #fff;
}
.rppricing-glow {
  position: absolute;
  left: calc(60 * var(--s));
  top: calc(-80 * var(--s));
  width: calc(640 * var(--s));
  height: calc(540 * var(--s));
  max-width: none;
  pointer-events: none;
}
.rppricing-brand {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: calc(20 * var(--s));
  padding-top: calc(40 * var(--s));
}
/* the icon SVG carries its drop shadow: 96px box for the 72px tile */
.rppricing-icon {
  flex: none;
  width: calc(96 * var(--s));
  height: calc(96 * var(--s));
  margin: calc(-7.2 * var(--s)) calc(-12 * var(--s)) calc(-16.8 * var(--s));
  max-width: none;
}
.rppricing-plan {
  margin-top: calc(6 * var(--s));
  color: #8fd8ff;
  font-size: max(11px, calc(13 * var(--s)));
  font-weight: 600;
  line-height: 1.27;
  letter-spacing: 0.14em;
}
.rppricing-name {
  margin-top: calc(3.5 * var(--s));
  font-size: max(20px, calc(32 * var(--s)));
  font-weight: 700;
  line-height: 1.27;
  letter-spacing: -0.015em;
}
.rppricing-price {
  position: relative;
  margin-top: calc(12 * var(--s));
}
.rppricing-amount {
  display: block;
  font-size: max(48px, calc(80 * var(--s)));
  font-weight: 900;
  line-height: 1.27;
  letter-spacing: -0.05em;
}
.rppricing-once {
  position: absolute;
  left: calc(146 * var(--s));
  top: calc(52 * var(--s));
  color: rgba(255, 255, 255, 0.6);
  font-size: max(13px, calc(17 * var(--s)));
  font-weight: 500;
  line-height: 1.27;
}
.rppricing-sub {
  position: relative;
  margin-top: calc(-5.6 * var(--s));
  color: rgba(255, 255, 255, 0.6);
  font-size: max(13px, calc(17 * var(--s)));
  line-height: 1.27;
}

.rppricing-body {
  padding: calc(41 * var(--s)) calc(47 * var(--s)) calc(41 * var(--s));
}
.rppricing-label {
  color: rgba(20, 22, 28, 0.45);
  font-size: max(11px, calc(13 * var(--s)));
  font-weight: 600;
  line-height: 1.27;
  letter-spacing: 0.14em;
}
.rppricing-list {
  margin: calc(23 * var(--s)) 0 0;
  padding: 0;
  list-style: none;
}
.rppricing-list li {
  display: flex;
  align-items: flex-start;
  gap: calc(12 * var(--s));
  min-height: calc(46 * var(--s));
  color: rgba(20, 22, 28, 0.88);
  font-size: max(14px, calc(18 * var(--s)));
  font-weight: 500;
  line-height: 1.27;
}
.rppricing-list li::before {
  content: "";
  flex: none;
  width: calc(24 * var(--s));
  height: calc(24 * var(--s));
  background: url("../images/pricing-check.svg") center / contain no-repeat;
}
.rppricing-list .rppricing-star {
  min-height: 0;
  margin: calc(-9 * var(--s)) calc(-12 * var(--s)) 0;
  padding: calc(9 * var(--s)) calc(12 * var(--s));
  border-radius: calc(12 * var(--s));
  background: rgba(39, 71, 245, 0.08);
  color: #2747f5;
  font-weight: 600;
}
.rppricing-list .rppricing-star::before { background-image: url("../images/pricing-check-blue.svg"); }

.rppricing-compare {
  margin-top: calc(32 * var(--s));
  padding: calc(20 * var(--s)) calc(24 * var(--s));
  border-radius: calc(16 * var(--s));
  background: rgba(39, 71, 245, 0.06);
  color: rgba(20, 22, 28, 0.8);
  font-size: max(13px, calc(16 * var(--s)));
  font-weight: 500;
  line-height: 1.27;
}

.rppricing-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(25 * var(--s));
  height: calc(92 * var(--s));
  margin-top: calc(28 * var(--s));
  border-radius: 999px;
  background: linear-gradient(180deg, #5b8cff, #2440f0);
  box-shadow: 0 12px 15px rgba(39, 71, 245, 0.45);
  color: #fff;
  font-size: max(16px, calc(24 * var(--s)));
  font-weight: 600;
  line-height: 1.27;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.2s, filter 0.2s;
}
.rppricing-cta:hover { transform: translateY(-2px); filter: brightness(1.06); }
.rppricing-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: calc(60 * var(--s));
  height: calc(60 * var(--s));
  border-radius: 50%;
  background: #fff;
}
.rppricing-arrow img { width: calc(26 * var(--s)); height: calc(26 * var(--s)); }
.rppricing-note {
  margin-top: calc(24 * var(--s));
  color: rgba(20, 22, 28, 0.5);
  font-size: max(12px, calc(15 * var(--s)));
  font-weight: 500;
  line-height: 1.27;
  text-align: center;
  white-space: nowrap;
}

/* JVZoo buy button (the embed image) and the members-area decline link */
.rp-pricing .jvzoo-buy { display: block; width: min(100%, 380px); margin: calc(28 * var(--s)) auto 0; line-height: 0; }
.rp-pricing .jvzoo-buy img { display: block; width: 100%; height: auto; border: 0; }
.rppricing-decline {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: calc(18 * var(--s)) auto 0;
  color: #8a8f9c;
  font-size: max(14px, calc(16 * var(--s)));
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.rppricing-decline:hover { color: #5b6070; }

/* two plans side by side: monthly, then the one-time card (badged) */
.rppricing-cards {
  display: grid;
  grid-template-columns: repeat(2, calc(680 * var(--s)));
  align-items: start;
  gap: calc(40 * var(--s));
  margin-top: calc(72.5 * var(--s));
}
.rppricing-cards .rppricing-card { margin-top: 0; }
.rppricing-card--best { overflow: visible; box-shadow: 0 0 0 2px #2747f5, 0 calc(24 * var(--s)) calc(60 * var(--s)) rgba(39, 71, 245, 0.2); }
.rppricing-card--best .rppricing-top { border-radius: calc(32 * var(--s)) calc(32 * var(--s)) 0 0; }
.rppricing-badge {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 0;
  padding: 8px 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffd666, #ffa21f);
  color: #1a1306;
  font-size: max(11px, calc(13 * var(--s)));
  font-weight: 700;
  letter-spacing: 0.12em;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}
/* price + "/month" or "one-time" side by side, whatever the price's width */
.rppricing-price { display: flex; align-items: baseline; gap: calc(14 * var(--s)); }
.rppricing-once { position: static; }
.rppricing-cards ~ .rppricing-decline { margin-top: calc(40 * var(--s)); }

/* phones & tablets */
@media (max-width: 1023px) {
  .rppricing-in { padding: 72px 16px 80px; }
  .rppricing-head-1 { font-size: min(56px, 9.6cqw); white-space: normal; text-wrap: balance; line-height: 1.1; }
  .rppricing-head-2 { margin-top: 6px; font-size: min(48px, 8.6cqw); white-space: normal; text-wrap: balance; line-height: 1.1; }
  .rppricing-card { width: min(100%, 560px); margin-top: 32px; border-radius: 26px; box-shadow: 0 0 0 1px rgba(20, 22, 28, 0.06), 0 20px 48px rgba(11, 20, 64, 0.12); }
  .rppricing-top { height: auto; padding: 28px 22px 26px; }
  .rppricing-glow { left: 10%; top: -60px; width: 90%; height: auto; }
  .rppricing-brand { gap: 14px; padding-top: 0; }
  .rppricing-icon { width: 76px; height: 76px; margin: -6px -10px -13px; }
  .rppricing-plan { margin-top: 2px; font-size: 11px; }
  .rppricing-name { margin-top: 3px; font-size: min(26px, 6.4cqw); }
  .rppricing-price { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; }
  .rppricing-amount { font-size: 60px; line-height: 1; }
  .rppricing-once { position: static; font-size: 15px; }
  .rppricing-sub { margin-top: 8px; font-size: 14px; line-height: 1.4; }
  .rppricing-body { padding: 26px 20px 28px; }
  .rppricing-list { margin-top: 16px; }
  .rppricing-list li { gap: 10px; min-height: 0; margin-bottom: 14px; font-size: 15px; line-height: 22px; }
  .rppricing-list li::before { width: 22px; height: 22px; }
  .rppricing-list .rppricing-star { margin: 4px -10px 0; padding: 9px 10px; border-radius: 12px; }
  .rppricing-compare { margin-top: 20px; padding: 16px 18px; border-radius: 14px; font-size: 14px; line-height: 1.45; }
  .rppricing-cta {
    justify-content: space-between;
    gap: 12px;
    height: auto;
    margin-top: 22px;
    padding: 10px 10px 10px 24px;
    font-size: min(18px, 4.5cqw);
    white-space: normal;
  }
  .rppricing-arrow { width: 48px; height: 48px; }
  .rppricing-arrow img { width: 22px; height: 22px; }
  .rppricing-note { margin-top: 16px; font-size: 12px; line-height: 1.5; white-space: normal; text-wrap: balance; }
}

/* ---- part: faq ---- */
/* 14 FAQ (Figma 1119:467, 1920 x 1630): two columns of 6, every answer visible */
.rp-faq {
  position: relative;
  container-type: inline-size;
  background: #fcfbf8;
  color: #14161c;
}
.rp-faq > * { --s: min(1px, 100cqw / 1920); }
.rpfaq-in {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(60 * var(--s)) 16px calc(120 * var(--s));
}
.rpfaq-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.rpfaq-head-1 {
  font-size: max(34px, calc(92 * var(--s)));
  font-weight: 700;
  line-height: 1.27;
  letter-spacing: -0.035em;
  white-space: nowrap;
}
.rpfaq-head-2 {
  margin-top: calc(-31 * var(--s));
  font-family: "Rancho", cursive;
  font-size: max(30px, calc(80 * var(--s)));
  font-weight: 400;
  line-height: 1.27;
  white-space: nowrap;
}

.rpfaq-grid {
  display: grid;
  grid-template-columns: repeat(2, calc(560 * var(--s)));
  grid-auto-rows: minmax(calc(190 * var(--s)), auto);
  column-gap: calc(80 * var(--s));
  margin: calc(72.56 * var(--s)) 0 0;
}
.rpfaq-item {
  display: grid;
  grid-template-columns: calc(56 * var(--s)) 1fr;
  align-content: start;
  padding-top: calc(24 * var(--s));
  border-top: 1px solid rgba(20, 22, 28, 0.1);
}
.rpfaq-n {
  grid-row: 1;
  padding-top: calc(6 * var(--s));
  color: #2747f5;
  font-size: max(11px, calc(13 * var(--s)));
  font-weight: 600;
  line-height: 1.27;
}
.rpfaq-q {
  grid-row: 1;
  grid-column: 2;
  font-size: max(17px, calc(22 * var(--s)));
  font-weight: 700;
  line-height: 1.27;
  letter-spacing: -0.005em;
}
.rpfaq-a {
  grid-column: 2;
  margin: calc(10 * var(--s)) 0 0;
  padding-bottom: calc(24 * var(--s));
  color: rgba(20, 22, 28, 0.62);
  font-size: max(14px, calc(16 * var(--s)));
  line-height: 1.5;
}
.rpfaq-more {
  margin-top: calc(30 * var(--s));
  color: rgba(20, 22, 28, 0.55);
  font-size: max(14px, calc(16 * var(--s)));
  font-weight: 500;
  line-height: 1.27;
  text-align: center;
  white-space: pre-wrap;
}

/* phones & tablets: one column */
@media (max-width: 1023px) {
  .rpfaq-in { padding: 64px 16px 72px; }
  .rpfaq-head-1 { font-size: min(56px, 10cqw); white-space: normal; line-height: 1.1; }
  .rpfaq-head-2 { margin-top: 6px; font-size: min(46px, 8.4cqw); white-space: normal; text-wrap: balance; line-height: 1.1; }
  .rpfaq-grid { grid-template-columns: minmax(0, 680px); grid-auto-rows: auto; width: 100%; justify-content: center; margin-top: 36px; }
  .rpfaq-item { grid-template-columns: 36px 1fr; padding-top: 20px; }
  .rpfaq-n { padding-top: 4px; font-size: 12px; }
  .rpfaq-q { font-size: 18px; line-height: 1.3; }
  .rpfaq-a { margin-top: 8px; padding-bottom: 22px; font-size: 15px; line-height: 1.55; }
  .rpfaq-more { margin-top: 24px; font-size: 14px; line-height: 1.5; white-space: normal; text-wrap: balance; }
}

/* ---- part: final ---- */
/* 15 Final CTA (Figma 1119:519, 1920 x 900): cream → blue → black fade, glow, icon, headline, button */
.rp-final {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  background: linear-gradient(180deg, #fcfbf8 0%, #8ea6f0 12%, #101c5c 26%, #04050a 40%, #04050a 100%);
  color: #fff;
}
.rp-final > * { --s: min(1px, 100cqw / 1920); }
.rpfinal-in {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: calc(900 * var(--s));
  padding: calc(290 * var(--s)) 16px calc(90 * var(--s));
  text-align: center;
}
.rpfinal-glow {
  position: absolute;
  left: 50%;
  top: calc(180 * var(--s));
  width: calc(1200 * var(--s));
  height: calc(720 * var(--s));
  max-width: none;
  transform: translateX(-50%);
  pointer-events: none;
}
/* the icon SVG carries its drop shadow: 240px box for the 120px tile */
.rpfinal-icon {
  position: relative;
  width: calc(240 * var(--s));
  height: calc(240 * var(--s));
  margin: calc(-40 * var(--s)) 0 calc(-80 * var(--s));
  max-width: none;
}
.rpfinal-head {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: calc(30 * var(--s));
}
.rpfinal-head-1 {
  font-size: max(32px, calc(84 * var(--s)));
  font-weight: 700;
  line-height: 1.27;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.rpfinal-head-2 {
  margin-top: calc(-26.7 * var(--s));
  font-family: "Rancho", cursive;
  font-size: max(32px, calc(84 * var(--s)));
  font-weight: 400;
  line-height: 1.27;
  white-space: nowrap;
}
.rpfinal-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(25 * var(--s));
  width: calc(888 * var(--s));
  height: calc(92 * var(--s));
  margin-top: calc(33.4 * var(--s));
  border-radius: 999px;
  background: linear-gradient(180deg, #5b8cff, #2440f0);
  box-shadow: 0 12px 15px rgba(39, 71, 245, 0.45);
  color: #fff;
  font-size: max(16px, calc(26 * var(--s)));
  font-weight: 600;
  line-height: 1.27;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.2s, filter 0.2s;
}
.rpfinal-cta:hover { transform: translateY(-2px); filter: brightness(1.06); }
.rpfinal-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: calc(60 * var(--s));
  height: calc(60 * var(--s));
  border-radius: 50%;
  background: #fff;
}
.rpfinal-arrow img { width: calc(26 * var(--s)); height: calc(26 * var(--s)); }
.rpfinal-note {
  position: relative;
  margin-top: calc(26 * var(--s));
  color: rgba(255, 255, 255, 0.5);
  font-size: max(12px, calc(16 * var(--s)));
  font-weight: 500;
  line-height: 1.27;
  white-space: nowrap;
}

/* phones & tablets */
@media (max-width: 1023px) {
  .rp-final { background: linear-gradient(180deg, #fcfbf8 0%, #8ea6f0 9%, #101c5c 20%, #04050a 32%, #04050a 100%); }
  .rpfinal-in { min-height: 0; padding: 170px 16px 80px; }
  .rpfinal-glow { top: 120px; width: 150%; height: auto; }
  .rpfinal-icon { width: 160px; height: 160px; margin: -27px 0 -53px; }
  .rpfinal-head { margin-top: 24px; }
  .rpfinal-head-1 { font-size: min(52px, 9.4cqw); white-space: normal; text-wrap: balance; line-height: 1.1; }
  .rpfinal-head-2 { margin-top: 8px; font-size: min(52px, 9.4cqw); white-space: normal; line-height: 1.1; }
  .rpfinal-cta {
    justify-content: space-between;
    gap: 12px;
    width: min(100%, 560px);
    height: auto;
    margin-top: 30px;
    padding: 10px 10px 10px 24px;
    font-size: min(18px, 4.5cqw);
    white-space: normal;
    text-align: left;
  }
  .rpfinal-arrow { width: 48px; height: 48px; }
  .rpfinal-arrow img { width: 22px; height: 22px; }
  .rpfinal-note { margin-top: 18px; font-size: 12px; line-height: 1.5; white-space: normal; text-wrap: balance; }
}

/* two plans: stacked on phones and tablets, one-time first */
@media (max-width: 1023px) {
  .rppricing-cards { grid-template-columns: minmax(0, 1fr); gap: 36px; width: min(100%, 560px); margin-top: 40px; }
  .rppricing-cards .rppricing-card { width: 100%; }
  .rppricing-card--best { order: -1; }
  .rppricing-cards ~ .rppricing-decline { margin-top: 28px; }
}