/* Readkidz LP — /affiliate (联盟计划招募页).
   Ported 1:1 from asllata-web's (public)/affiliate CSS module (2026-08-11): same sections, same
   artwork, same proportions. What did NOT come across is the page's hand-rolled chrome — header,
   mobile menu, footer and skip link all belong to the shared landing2026 shell now.

   Colours / radii / shadows reference the site tokens instead of the hand-copied values the module
   carried (its #078a69 vs the site's #0fa47e, 14px vs 16px radius, ...). Only values the token set
   has no equivalent for stay here, scoped to .rk-aff so they cannot leak into other pages.

   Content column copies the house gutter formula (.spread / .landing2026HeaderInner) so this page
   lines up with the header and with every other page — see the note on --rk-aff-column below.

   RTL-safe: logical properties only. */

.rk-aff {
  /* Gutter formula copied from the house content column (.spread / .landing2026HeaderInner), so the
     hero starts on the same vertical line as the header above it — measured, not assumed: at 1440
     both land on 58px. The 1380px cap is the page's own (its hero grid and staircase overhang were
     drawn against it); on screens past ~1520px this column therefore sits slightly narrower than the
     home page's 1560px, which is the documented exception a focused single-message page may take. */
  --rk-aff-column: min(calc(100% - 2 * clamp(24px, 4vw, 72px)), 1380px);
  --rk-aff-line-strong: #cfc2ad;
  --rk-aff-slip-line: #d8ccba;

  /* Surfaces come from the site tokens, same as the home page's bands and cards:
     --rk-surface  = white card, --rk-paper-2 = the warm band tint, --rk-paper = page.
     The page itself paints NOTHING — it lets the site background (paper + faint dot grid, set on
     body) through, which is exactly what the home page does with its own transparent wrapper.
     The imported paper-texture bitmap that used to tile here and inside every panel is gone
     (Kim 2026-08-11, "背景颜色与 LP 首页统一"): it was the one surface on the marketing site
     carrying a photographic texture, so panels read as a different material from every other page. */
  min-block-size: 100vh;
  overflow-x: clip;
  color: var(--rk-ink);
}

/* ---------- Hero ---------- */
.rk-aff-hero {
  position: relative;
  display: grid;
  align-items: start;
  min-block-size: min(730px, calc(100svh - 72px));
  border-block-end: 1px solid rgba(113, 89, 54, 0.18);
}

.rk-aff-hero-inner {
  display: grid;
  grid-template-columns: minmax(330px, 0.72fr) minmax(560px, 1.28fr);
  align-items: start;
  inline-size: var(--rk-aff-column);
  margin-inline: auto;
  padding-block: clamp(32px, 3vw, 44px) clamp(24px, 2vw, 34px);
}

.rk-aff-hero-copy {
  position: relative;
  z-index: 10;
  align-self: center;
  max-inline-size: 540px;
  padding-inline-end: clamp(0px, 1.5vw, 20px);
}

.rk-aff-eyebrow {
  margin: 0 0 12px;
  color: var(--rk-emerald);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

/* Headline type is the home page's, not this page's own (Kim 2026-08-11, "字体也与首页保持统一").
   The hero title restates what wins on the home hero — .hero h1 (family + weight, home-2026.css)
   and .hero-copy h1 (size/leading/tracking, home-v3.css) — because those selectors are scoped to
   the home markup and cannot be borrowed. Section h2s restate nothing: the site's own h2 rule
   (home-v3.css, clamp(32,3.2vw,46) / 1.14 / -.012em / 700) already reaches them, so this page
   simply stops overriding it and follows the home page whenever it changes. */
.rk-aff-hero-title {
  max-inline-size: 620px;
  margin: 0;
  font-family: ui-rounded, 'Arial Rounded MT Bold', 'Nunito Sans', system-ui, sans-serif;
  font-size: clamp(54px, 3.6vw, 74px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.rk-aff-hero-sub {
  max-inline-size: 540px;
  margin: clamp(24px, 2.5vw, 34px) 0 0;
  color: var(--rk-ink-soft);
  font-size: clamp(16px, 1.15vw, 19px);
  line-height: 1.65;
}

.rk-aff-hero-actions {
  display: grid;
  justify-items: start;
  gap: 14px;
  margin-block-start: 34px;
}

.rk-aff-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-block-size: 54px;
  padding-inline: 28px;
  border: 1px solid var(--rk-emerald);
  border-radius: var(--rk-radius-sm);
  background: var(--rk-emerald);
  color: #fff;
  font-size: 17px;
  font-weight: 850;
  text-decoration: none;
  box-shadow: 0 12px 25px -17px rgba(5, 106, 82, 0.8);
  transition:
    background-color 150ms ease,
    transform 150ms ease;
}

.rk-aff-cta--hero {
  min-inline-size: 210px;
}

.rk-aff-cta:hover {
  background: var(--rk-emerald-hover);
  transform: translateY(-2px);
}

.rk-aff-cta svg {
  inline-size: 20px;
  block-size: 20px;
}

.rk-aff-rules-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--rk-emerald-hover);
  font-weight: 800;
  text-underline-offset: 5px;
}

.rk-aff-rules-link svg {
  inline-size: 18px;
  block-size: 18px;
}

.rk-aff-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-block-start: 34px;
  color: var(--rk-ink-soft);
  font-size: 13px;
}

.rk-aff-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.rk-aff-trust-item svg {
  inline-size: 20px;
  block-size: 20px;
  color: var(--rk-emerald-hover);
}

.rk-aff-trust-dot {
  inline-size: 3px;
  block-size: 3px;
  border-radius: 50%;
  background: var(--rk-aff-line-strong);
}

/* ---------- Commission staircase ---------- */
.rk-aff-stage {
  position: relative;
  container-type: inline-size;
  justify-self: end;
  inline-size: min(120%, 1000px);
  aspect-ratio: 3 / 2;
  margin-block-start: clamp(-76px, -5vw, -30px);
  margin-inline-end: -6vw;
  direction: ltr;
  filter: drop-shadow(0 26px 24px rgba(77, 58, 32, 0.11));
}

.rk-aff-stage-art {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

.rk-aff-tier {
  position: absolute;
  z-index: 3;
  display: grid;
  justify-items: center;
  color: #fff;
  line-height: 1;
  text-align: center;
  text-shadow: 0 2px 2px rgba(28, 23, 18, 0.32);
  transform: translate(-50%, -50%);
}

.rk-aff-tier--standard {
  inset-block-start: 81.2%;
  inset-inline-start: 27.1%;
}

.rk-aff-tier--pro {
  inset-block-start: 64.5%;
  inset-inline-start: 48.7%;
  color: #fffdf7;
}

.rk-aff-tier--mega {
  inset-block-start: 52.8%;
  inset-inline-start: 71.3%;
}

.rk-aff-tier-name {
  margin-block-end: 6px;
  font-family: var(--rk-font-display);
  font-size: clamp(14px, 1.45vw, 22px);
  font-weight: 820;
}

.rk-aff-tier-pct {
  font-family: var(--rk-font-display);
  font-size: clamp(48px, 5.3vw, 82px);
  font-weight: 500;
  letter-spacing: -0.06em;
  line-height: 0.95;
}

.rk-aff-tier--standard .rk-aff-tier-pct {
  font-size: clamp(42px, 4.6vw, 70px);
}

.rk-aff-tier--standard .rk-aff-tier-name {
  margin-block-end: 4px;
}

.rk-aff-tier--standard .rk-aff-tier-caption {
  margin-block-start: 6px;
}

.rk-aff-tier--mega .rk-aff-tier-pct {
  font-size: clamp(56px, 6.1vw, 92px);
}

.rk-aff-tier-caption {
  /* 19cqi ≈ the width of the narrowest pillar (Standard) in both crops of the artwork; Mega's is
     wider and gets its own cap below. Wrapping is allowed as the last resort — a two-line caption
     inside the pillar beats a one-line caption lying across its edge. */
  margin-block-start: 9px;
  max-inline-size: 19cqi;
  font-size: clamp(9px, 1.5cqi, 15px);
  font-weight: 760;
  line-height: 1.2;
  text-wrap: balance;
}

.rk-aff-tier--mega .rk-aff-tier-caption {
  max-inline-size: 23cqi;
}

.rk-aff-mascot {
  position: absolute;
  z-index: 5;
  inset-inline-end: 0.2%;
  inset-block-end: 1.2%;
  inline-size: min(25%, 218px);
  block-size: auto;
  filter: drop-shadow(0 20px 17px rgba(65, 45, 25, 0.24));
}

.rk-aff-other {
  position: absolute;
  z-index: 4;
  inset-inline-start: 50%;
  inset-block-end: 3.7%;
  margin: 0;
  padding: 4px clamp(11px, 1.4vw, 20px);
  border: 1px solid rgba(115, 89, 54, 0.54);
  border-radius: 5px;
  background-color: rgba(244, 230, 203, 0.92);
  color: #3a3024;
  font-family: var(--rk-font-display);
  font-size: clamp(12px, 1.35vw, 19px);
  font-weight: 820;
  box-shadow: 0 5px 10px -7px rgba(62, 45, 25, 0.68);
  transform: translateX(-50%);
  white-space: nowrap;
}

/* ---------- Shared section shell ---------- */
.rk-aff-inner {
  inline-size: min(calc(100% - 2 * clamp(24px, 4vw, 72px)), 1320px);
  margin-inline: auto;
}

.rk-aff-bonus,
.rk-aff-attr,
.rk-aff-final {
  padding-block: clamp(36px, 5vw, 66px);
}

.rk-aff-bonus {
  padding-block-end: clamp(24px, 3vw, 42px);
  /* "View commission rules" jumps here, and the house header is sticky — without this the landing
     spot sits underneath it. Same allowance the pricing and tutorial pages use. */
  scroll-margin-block-start: 96px;
}

.rk-aff-bonus .rk-aff-inner {
  padding: clamp(24px, 3vw, 42px) clamp(18px, 2.6vw, 34px) clamp(18px, 2.6vw, 34px);
  border: 1px solid var(--rk-line);
  border-radius: var(--rk-radius);
  background-color: var(--rk-paper-2);
  box-shadow: var(--rk-shadow-panel);
}

.rk-aff-heading {
  text-align: center;
}

.rk-aff-heading h2,
.rk-aff-final-inner h2 {
  margin: 0;
}

.rk-aff-heading > p:last-child {
  max-inline-size: 56ch;
  margin: 14px auto 0;
  color: var(--rk-ink-soft);
  font-size: 17.5px;
  line-height: 1.6;
}

/* ---------- Monthly bonus ---------- */
.rk-aff-bonus-panel {
  margin-block-start: 26px;
}

.rk-aff-rail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  min-block-size: 238px;
  border: 1px solid var(--rk-line);
  border-radius: 12px;
  /* Paper, not white (Kim 2026-08-11 "白底有点丑"). A pure-white slab inside the warm panel reads
     as a box inside a box; --rk-paper is one step lighter than the panel, enough to separate the
     card with its border doing the rest. */
  background-color: var(--rk-paper);
}

.rk-aff-rail-item {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  min-inline-size: 0;
  padding: 20px clamp(12px, 2vw, 30px);
  text-align: center;
}

.rk-aff-rail-item + .rk-aff-rail-item {
  border-inline-start: 1px solid var(--rk-line);
}

.rk-aff-rail-label {
  margin: 0;
  font-size: 14px;
  font-weight: 840;
}

.rk-aff-rail-threshold {
  margin-block-start: 2px;
  color: var(--rk-emerald-hover);
  font-family: var(--rk-font-display);
  font-size: clamp(32px, 3vw, 46px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.rk-aff-sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.rk-aff-gift-shell {
  display: grid;
  place-items: center;
  inline-size: clamp(70px, 7vw, 96px);
  block-size: clamp(70px, 7vw, 96px);
  margin-block: 9px 6px;
  border: 1px solid var(--rk-line);
  border-radius: 50%;
  background-color: var(--rk-paper-2);
  box-shadow: inset 0 0 0 5px var(--rk-paper);
}

.rk-aff-gift {
  display: block;
  inline-size: 86%;
  block-size: 86%;
  object-fit: contain;
}

.rk-aff-rail-reward {
  color: var(--rk-ink);
  font-size: clamp(17px, 1.6vw, 23px);
  font-weight: 780;
  white-space: nowrap;
}

.rk-aff-rail-reward::first-letter {
  color: var(--rk-emerald-hover);
}

.rk-aff-connector {
  position: absolute;
  z-index: 2;
  inset-block-start: 50%;
  inset-inline-end: 0;
  display: grid;
  place-items: center;
  inline-size: 28px;
  block-size: 28px;
  color: #554b3e;
  transform: translate(50%, -50%);
}

.rk-aff-connector svg {
  inline-size: 24px;
  block-size: 24px;
}

.rk-aff-slip {
  position: relative;
  display: grid;
  place-items: center;
  min-block-size: 208px;
  margin-block-start: 22px;
  overflow: hidden;
  border: 1px solid var(--rk-aff-slip-line);
  /* Filled with --rk-paper, one step lighter than the panel behind it. It must NOT be left the same
     colour as that panel (it was, briefly, after the texture came out) or the torn receipt vanishes
     and only its 1px top edge shows — the stray line Kim reported. And it must not be pure white
     either, which reads as a box inside a box. */
  background-color: var(--rk-paper);
  border-radius: var(--rk-radius);
  box-shadow: var(--rk-shadow-panel);
}

/* What used to be here: a torn-paper clip-path plus two offset solid shadows faking a stack of
   receipts. Chrome paints those offset shadows OUTSIDE the clip region, so each side of the card
   carried a pale detached sliver — the "边" Kim asked about. The trick was costing more than it
   bought: this is now an ordinary card with the house radius and the house shadow, like the tier
   rail above it and the closing CTA below. */

.rk-aff-slip-fox,
.rk-aff-slip-calculator {
  position: absolute;
  z-index: 1;
  display: block;
  object-fit: contain;
  pointer-events: none;
}

.rk-aff-slip-fox {
  inset-block-end: -4px;
  inset-inline-start: 2%;
  inline-size: min(17%, 190px);
  block-size: auto;
}

.rk-aff-slip-calculator {
  inset-block-start: 50%;
  inset-inline-end: 4%;
  inline-size: min(14%, 152px);
  block-size: auto;
  transform: translateY(-50%);
}

.rk-aff-slip-copy {
  position: relative;
  z-index: 2;
  inline-size: min(58%, 610px);
  margin-inline: auto;
  padding: 22px clamp(14px, 2vw, 28px);
  /* The slip itself is the white surface now; this box only keeps the two hairlines that frame the
     text like a receipt's perforation. A second white layer on white would just re-draw the edge. */
  border-inline: 1px solid rgba(179, 162, 137, 0.32);
  background: transparent;
}

.rk-aff-slip-kicker {
  margin: 0 0 5px;
  color: var(--rk-emerald-hover);
  font-size: 15px;
  font-weight: 860;
}

.rk-aff-slip-text {
  margin: 0;
  font-size: clamp(16px, 1.55vw, 21px);
  font-weight: 680;
  line-height: 1.6;
}

.rk-aff-note,
.rk-aff-legal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 18px auto 0;
  color: var(--rk-ink-soft);
  font-size: 13px;
  text-align: center;
}

.rk-aff-note::before {
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--rk-emerald);
  content: '';
}

/* ---------- 30-day attribution ---------- */
.rk-aff-attr {
  padding-block-start: clamp(22px, 3vw, 40px);
}

.rk-aff-attr-frame {
  padding: clamp(18px, 2.3vw, 34px);
  border: 1px solid var(--rk-line);
  border-radius: var(--rk-radius);
  background-color: var(--rk-paper-2);
  box-shadow: var(--rk-shadow-panel);
}

.rk-aff-attr-frame .rk-aff-heading {
  margin-block-end: clamp(16px, 2vw, 28px);
}

.rk-aff-attr-body {
  display: grid;
  grid-template-columns: minmax(330px, 0.86fr) minmax(420px, 1.14fr);
  align-items: center;
  gap: clamp(28px, 5vw, 76px);
}

.rk-aff-calendar {
  position: relative;
  container-type: inline-size;
  min-block-size: 360px;
}

.rk-aff-calendar img {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  filter: drop-shadow(0 20px 20px rgba(70, 51, 29, 0.12));
}

.rk-aff-calendar-meta {
  position: absolute;
  z-index: 2;
  inset-block-start: 79%;
  inset-inline-start: 50.5%;
  display: grid;
  justify-items: center;
  inline-size: min(44%, 220px);
  margin: 0;
  color: #304e39;
  font-family: var(--rk-font-display);
  text-align: center;
  transform: translate(-50%, -50%);
  direction: ltr;
}

/* "days" used to be pinned beside the painted 30 (absolute, 91% across). There is no room there:
   the numeral fills the card and the hedgehog leans on its right edge, so the word landed on top of
   one or the other at every width. It now sits in the normal flow, centred under the numeral and
   above the caption — two short lines inside the card instead of one word fighting the artwork. */
.rk-aff-calendar-meta strong {
  margin-block-end: 3px;
  font-size: clamp(13px, 4.2cqi, 21px);
  line-height: 1;
}

.rk-aff-calendar-meta span {
  margin-block-start: 0;
  color: var(--rk-ink);
  font-size: clamp(11px, 3.1cqi, 16px);
  font-weight: 820;
  line-height: 1.25;
}

.rk-aff-attr-list {
  display: grid;
  gap: 16px;
}

.rk-aff-attr-item {
  display: grid;
  grid-template-columns: 68px 1fr;
  align-items: center;
  gap: 18px;
}

.rk-aff-attr-icon {
  /* Paper, not white and not --rk-paper-2: white reads as a hard chip on the warm frame, and the
     frame colour itself would leave a bare ring. */
  display: grid;
  place-items: center;
  inline-size: 68px;
  block-size: 68px;
  border: 1px solid var(--rk-line);
  border-radius: 50%;
  background: var(--rk-paper);
  color: var(--rk-emerald-hover);
}

.rk-aff-attr-icon svg {
  inline-size: 30px;
  block-size: 30px;
}

.rk-aff-attr-item h3 {
  margin: 0;
  font-size: clamp(16px, 1.45vw, 20px);
  font-weight: 850;
}

.rk-aff-attr-item p {
  margin: 4px 0 0;
  color: var(--rk-ink-soft);
  font-size: 14px;
  line-height: 1.6;
}

/* No box: a bordered white pill for one line of small print was the heaviest thing in the section
   and said nothing extra. The line now reads as what it is — a footnote on the panel. */
.rk-aff-legal {
  min-block-size: 0;
  padding: 4px 18px 0;
}

.rk-aff-legal svg {
  flex: 0 0 auto;
  inline-size: 20px;
  block-size: 20px;
  color: #887a66;
}

/* ---------- FAQ (2026-08-11 SEO/GEO pass) ---------- */
/* Same accordion the About page uses (.rk-about-faq-item): a <details> list with a chevron that
   flips on open, no JavaScript. Answers ship in the HTML, so they are readable to a crawler and an
   answer engine whether or not anyone clicks. */
.rk-aff-faq {
  padding-block: clamp(28px, 4vw, 52px);
}

/* The section subtitles elsewhere on the page are one line; this one is a full definition
   paragraph, and at the shared 56ch measure it broke into eight centred slivers. */
.rk-aff-faq .rk-aff-heading > p:last-child {
  max-inline-size: 76ch;
}

.rk-aff-faq-list {
  max-inline-size: 900px;
  margin: clamp(20px, 2.4vw, 32px) auto 0;
  border-block-start: 1px solid var(--rk-line);
}

.rk-aff-faq-item {
  border-block-end: 1px solid var(--rk-line);
}

.rk-aff-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-block-size: 56px;
  padding-block: 15px;
  color: var(--rk-ink);
  cursor: pointer;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.45;
  list-style: none;
}

.rk-aff-faq-item summary::-webkit-details-marker {
  display: none;
}

.rk-aff-faq-item summary svg {
  flex: 0 0 auto;
  inline-size: 18px;
  block-size: 18px;
  color: var(--rk-ink-soft);
  transition: transform 160ms ease;
}

.rk-aff-faq-item[open] summary svg {
  transform: rotate(180deg);
}

.rk-aff-faq-item p {
  margin: 0;
  padding-block-end: 18px;
  padding-inline-end: 42px;
  color: var(--rk-ink-soft);
  font-size: 15px;
  line-height: 1.65;
}

@media (prefers-reduced-motion: reduce) {
  .rk-aff-faq-item summary svg {
    transition: none;
  }
}

/* ---------- Closing CTA ---------- */
.rk-aff-final {
  padding-block-start: 12px;
  padding-block-end: clamp(36px, 5vw, 66px);
}

.rk-aff-final-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  inline-size: min(calc(100% - 2 * clamp(24px, 4vw, 72px)), 1160px);
  margin-inline: auto;
  padding: clamp(28px, 4vw, 52px);
  border: 1px solid var(--rk-line);
  border-radius: var(--rk-radius);
  background-color: var(--rk-paper-2);
  box-shadow: var(--rk-shadow-panel);
}

.rk-aff-final-inner > div {
  max-inline-size: 760px;
}

.rk-aff-final-inner > div > p:last-child {
  margin: 12px 0 0;
  color: var(--rk-ink-soft);
  font-size: 17px;
}

.rk-aff-final-inner .rk-aff-cta {
  flex: 0 0 auto;
}

/* ---------- RTL ---------- */
[dir='rtl'] .rk-aff-cta svg,
[dir='rtl'] .rk-aff-rules-link svg,
[dir='rtl'] .rk-aff-connector svg {
  transform: scaleX(-1);
}

[dir='rtl'] .rk-aff-hero-copy {
  padding-inline: clamp(0px, 1.5vw, 20px) 0;
}

[dir='rtl'] .rk-aff-stage {
  transform: translateX(-10%);
}

[dir='rtl'] .rk-aff-tier,
[dir='rtl'] .rk-aff-calendar-meta {
  direction: ltr;
}

[dir='rtl'] .rk-aff-other,
[dir='rtl'] .rk-aff-calendar-meta span {
  direction: rtl;
}

/* ---------- Responsive ---------- */
@media (max-width: 1120px) {
  .rk-aff-hero-inner {
    grid-template-columns: minmax(300px, 0.76fr) minmax(500px, 1.24fr);
  }

  .rk-aff-stage {
    margin-inline-end: -5vw;
  }

  .rk-aff-tier-pct {
    font-size: clamp(44px, 5.2vw, 62px);
  }

  .rk-aff-tier--mega .rk-aff-tier-pct {
    font-size: clamp(50px, 6vw, 72px);
  }
}

@media (max-width: 900px) {
  .rk-aff-hero-inner {
    grid-template-columns: minmax(275px, 0.72fr) minmax(440px, 1.28fr);
  }

}

@media (min-width: 761px) and (max-width: 900px) {
  .rk-aff-hero-inner {
    grid-template-columns: 380px minmax(0, 1fr);
  }

  .rk-aff-hero-title {
    max-inline-size: 380px;
    text-wrap: wrap;
  }

  .rk-aff-hero-sub {
    max-inline-size: 300px;
  }

  .rk-aff-stage {
    inline-size: 720px;
    aspect-ratio: 1;
    margin-block-start: -30px;
    margin-inline-end: -70px;
  }

  .rk-aff-tier--standard {
    inset-block-start: 81%;
    inset-inline-start: 24.6%;
  }

  .rk-aff-tier--pro {
    inset-block-start: 64.5%;
    inset-inline-start: 47.6%;
  }

  .rk-aff-tier--mega {
    inset-block-start: 52.8%;
    inset-inline-start: 74.0%;
  }

  .rk-aff-tier-name {
    font-size: 17px;
  }

  .rk-aff-tier-pct {
    font-size: 70px;
  }

  .rk-aff-tier--standard .rk-aff-tier-pct {
    font-size: 62px;
  }

  .rk-aff-tier--mega .rk-aff-tier-pct {
    font-size: 86px;
  }

  .rk-aff-mascot {
    inset-inline-end: 4%;
    inline-size: 30%;
  }

  .rk-aff-trust {
    display: grid;
    gap: 5px;
  }

  .rk-aff-trust-dot {
    display: none;
  }

  .rk-aff-other {
    inset-block-end: 2.8%;
    font-size: 15px;
  }
}

@media (max-width: 760px) {
  .rk-aff-hero {
    min-block-size: auto;
  }

  .rk-aff-hero-inner {
    grid-template-columns: 1fr;
    gap: 12px;
    padding-block: 42px 20px;
  }

  .rk-aff-hero-copy {
    max-inline-size: 620px;
    padding-inline-end: 0;
  }

  .rk-aff-hero-title {
    max-inline-size: 540px;
  }

  .rk-aff-hero-sub {
    max-inline-size: 560px;
    margin-block-start: 22px;
  }

  .rk-aff-hero-actions {
    margin-block-start: 26px;
  }

  .rk-aff-trust {
    margin-block-start: 24px;
  }

  .rk-aff-stage {
    justify-self: center;
    inline-size: min(112%, 690px);
    margin-block-start: 0;
    margin-inline: -6%;
  }

  [dir='rtl'] .rk-aff-stage {
    transform: none;
  }

  .rk-aff-tier-name {
    margin-block-end: 3px;
    font-size: clamp(11px, 3vw, 17px);
  }

  .rk-aff-tier-pct,
  .rk-aff-tier--standard .rk-aff-tier-pct {
    font-size: clamp(34px, 9.6vw, 55px);
  }

  .rk-aff-tier--mega .rk-aff-tier-pct {
    font-size: clamp(39px, 10.8vw, 62px);
  }

  /* Phone: the font is already at its 9px floor, so the only way to keep the caption off the
     "Other sales 10%" chip and out of the cat is to let it break — 15cqi forces "Sales /
     commission" onto two lines, both narrower than the pillar. */
  .rk-aff-tier-caption {
    margin-block-start: 5px;
    max-inline-size: 15cqi;
  }

  /* The wrapped caption makes the Standard stack a line taller, and that tier sits closest to the
     shelf — lift it so the second line stays on the pillar face instead of the shelf lip. */
  .rk-aff-tier--standard {
    inset-block-start: 78%;
  }

  .rk-aff-tier--mega .rk-aff-tier-caption {
    max-inline-size: 17cqi;
  }

  .rk-aff-other {
    font-size: clamp(10px, 2.7vw, 14px);
  }

  .rk-aff-rail {
    min-block-size: 208px;
  }

  .rk-aff-rail-item {
    padding: 14px 6px;
  }

  .rk-aff-rail-label {
    font-size: 11px;
  }

  .rk-aff-rail-threshold {
    font-size: clamp(22px, 7vw, 36px);
  }

  .rk-aff-gift-shell {
    inline-size: clamp(58px, 16vw, 78px);
    block-size: clamp(58px, 16vw, 78px);
  }

  .rk-aff-rail-reward {
    font-size: clamp(13px, 3.7vw, 18px);
  }

  .rk-aff-connector {
    inline-size: 24px;
    block-size: 24px;
  }

  .rk-aff-connector svg {
    inline-size: 20px;
    block-size: 20px;
  }

  .rk-aff-slip {
    min-block-size: 190px;
  }

  .rk-aff-slip-copy {
    inline-size: min(62%, 420px);
    padding-inline: 12px;
  }

  .rk-aff-slip-kicker {
    font-size: 13px;
  }

  .rk-aff-slip-text {
    font-size: clamp(13px, 3.2vw, 17px);
  }

  .rk-aff-attr-body {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .rk-aff-calendar {
    min-block-size: min(68vw, 390px);
  }

  .rk-aff-attr-list {
    max-inline-size: 620px;
    margin-inline: auto;
  }

  .rk-aff-final-inner {
    display: grid;
    justify-items: start;
  }
}

@media (max-width: 520px) {
  .rk-aff-hero-inner {
    padding-block-start: 32px;
  }

  .rk-aff-eyebrow {
    font-size: 11px;
  }

  .rk-aff-hero-title {
    max-inline-size: 390px;
  }

  .rk-aff-cta--hero {
    min-block-size: 52px;
    inline-size: min(100%, 260px);
    padding-inline: 20px;
  }

  .rk-aff-trust {
    display: grid;
    gap: 5px;
  }

  .rk-aff-trust-dot {
    display: none;
  }

  .rk-aff-stage {
    inline-size: 116%;
    margin-inline: -8%;
  }

  .rk-aff-mascot {
    inset-inline-end: 0;
    inline-size: 23%;
  }

  /* The module this came from squeezed the panels to 12px side margins here while the hero kept
     16px. Both now ride the house 24px gutter instead, which is what the header and footer use —
     three different page edges on one phone screen was the drift, not the design. */
  .rk-aff-bonus,
  .rk-aff-attr,
  .rk-aff-final {
    padding-block: 32px;
  }

  .rk-aff-attr-frame {
    padding: 12px;
  }

  .rk-aff-bonus .rk-aff-inner {
    padding: 24px 12px 14px;
  }

  .rk-aff-rail {
    min-block-size: 184px;
  }

  .rk-aff-rail-item {
    padding-inline: 4px;
  }

  .rk-aff-rail-label {
    font-size: 9px;
  }

  .rk-aff-rail-threshold {
    font-size: clamp(20px, 6.3vw, 28px);
  }

  .rk-aff-gift-shell {
    inline-size: clamp(50px, 14.2vw, 65px);
    block-size: clamp(50px, 14.2vw, 65px);
  }

  .rk-aff-rail-reward {
    font-size: clamp(11px, 3.3vw, 15px);
  }

  .rk-aff-connector {
    inline-size: 22px;
    block-size: 22px;
  }

  .rk-aff-connector svg {
    inline-size: 18px;
    block-size: 18px;
  }

  .rk-aff-slip {
    min-block-size: 170px;
  }

  /* Phone: fox 34% + calculator 24% + copy 60% is 118% of the slip — the example sentence was
     printed straight across the fox's face. The two illustrations are decoration (aria-hidden), so
     the narrow screen keeps the sentence and drops them rather than stacking them on top of it. */
  .rk-aff-slip-copy {
    inline-size: 92%;
    padding: 12px 6px;
  }

  .rk-aff-slip-fox,
  .rk-aff-slip-calculator {
    display: none;
  }

  .rk-aff-slip-kicker {
    font-size: 11px;
  }

  .rk-aff-slip-text {
    font-size: 12px;
    line-height: 1.45;
  }

  .rk-aff-note,
  .rk-aff-legal {
    font-size: 11px;
  }

  .rk-aff-attr-item {
    grid-template-columns: 54px 1fr;
    gap: 12px;
  }

  .rk-aff-attr-icon {
    inline-size: 54px;
    block-size: 54px;
  }

  .rk-aff-attr-icon svg {
    inline-size: 25px;
    block-size: 25px;
  }

  .rk-aff-attr-item p {
    font-size: 12px;
  }

  .rk-aff-legal {
    align-items: flex-start;
    text-align: start;
  }

  .rk-aff-final-inner {
    padding: 24px 20px;
  }

  .rk-aff-final-inner .rk-aff-cta {
    inline-size: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rk-aff-cta {
    transition: none;
  }
}