/* Repay site: one visual language for the whole page.
   Motif: the Repay mark, a rounded hexagon cut by two opposing arrows.
   Theme: the page is neutral dark (#0A0B0B); light bands (paper #F4F3EF / white, ink #1C2130) alternate with it (reviewer v3).
   Teal #2BB3A6 / #1F8A82 is the accent only: CTAs, key figures, focus rings, small highlights.
   Type (client, 26 Sep, third pass): Geist Light headings with tight tracking, one Instrument Serif Italic
   accent word per heading, Geist 400 body, IBM Plex Mono uppercase labels (same as the app). All art is drawn by our own code. */

@font-face { font-family: "Geist"; src: url(/_repay/fonts/geist.woff2) format("woff2"); font-weight: 200 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(/_repay/fonts/ibm-plex-mono.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url(/_repay/fonts/instrument-serif-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Geist Fallback"; src: local("Helvetica Neue"), local("Arial"); size-adjust: 103%; ascent-override: 92%; descent-override: 22%; line-gap-override: 0%; }

:root {
  color-scheme: dark;
  --rp-ground: #0a0b0b;
  --rp-ground-2: #0e1010;
  --rp-raised: #121414;
  --rp-raised-2: #181b1b;
  --rp-ink: #f2f4f3;          /* text */
  --rp-ink-2: #c9cecc;        /* secondary text */
  --rp-ink-3: #a3a9a7;        /* muted */
  --rp-accent: #2bb3a6;
  --rp-accent-deep: #1f8a82;
  --rp-accent-hover: #46c6b9;
  --rp-accent-ink: #2bb3a6;   /* teal used as text on dark (7.4:1 on the page) */
  --rp-on-accent: #0a0b0b;
  --rp-line: rgba(242, 244, 243, 0.12);   /* tracks, progress rails */
  --rp-tint: rgba(242, 244, 243, 0.025);  /* zebra rows */
  --rp-bar: #1c2020;                      /* rate curve fill */
  --rp-quiet: rgba(242, 244, 243, 0.08);
  --rp-quiet-hover: rgba(242, 244, 243, 0.14);

  --rp-font: "Geist", "Geist Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --rp-serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --rp-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --rp-hh: 60px;   /* header pill height */
  --rp-ht: 16px;   /* pill's distance from the top edge */
  --rp-gutter: 20px;
  --rp-max: 82.5rem;                            /* 1320 px content, MultiPair's container */
  --rp-sec: clamp(96px, 7vw + 70px, 176px);    /* section padding: 96 on a phone, ~164 at 1440 */
  --rp-gap-head: clamp(48px, 4vw + 30px, 96px); /* heading block to content */
  --rp-r-xl: 20px;
  --rp-r-lg: 18px;
  --rp-r-md: 12px;

  --rp-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.2), 0 4px 12px -4px rgba(0, 0, 0, 0.3);
  --rp-shadow-2: 0 1px 2px rgba(0, 0, 0, 0.22), 0 10px 24px -8px rgba(0, 0, 0, 0.4), 0 28px 56px -20px rgba(0, 0, 0, 0.45);
  --rp-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --rp-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --rp-ease-std: cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 768px) { :root { --rp-gutter: 40px; } }
@media (min-width: 1024px) { :root { --rp-hh: 64px; --rp-ht: 20px; --rp-gutter: 48px; } }

html.rp { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--rp-ground); }
html.rp body {
  margin: 0; background: var(--rp-ground); color: var(--rp-ink);
  font-family: var(--rp-font); font-size: 16px; font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
.rp ::selection { background: var(--rp-accent); color: var(--rp-on-accent); }
/* anchors: the section's own top padding clears the fixed pill; add only what is missing */
.rp section[id] { scroll-margin-top: max(0px, calc(env(safe-area-inset-top, 0px) + var(--rp-ht) + var(--rp-hh) + 24px - var(--rp-sec))); }
.rp #faq { scroll-margin-top: max(0px, calc(env(safe-area-inset-top, 0px) + var(--rp-ht) + var(--rp-hh) + 24px - var(--rp-sec) * 0.6)); }
/* "How it works": the step list (phones, tablets) sits just under the pill; the pinned marker lands exactly */
.rp #how-it-works { scroll-margin-top: calc(env(safe-area-inset-top, 0px) + var(--rp-ht) + var(--rp-hh) + 16px); }
.rp .rp-hero__anchor#how-it-works { scroll-margin-top: 0px; }

.rp-wrap { width: 100%; max-width: calc(var(--rp-max) + 2 * var(--rp-gutter)); margin-inline: auto; padding-inline: var(--rp-gutter); box-sizing: border-box; }
.rp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rp-icon { width: 20px; height: 20px; flex: none; display: block; }
.rp :focus-visible { outline: 2px solid var(--rp-accent-ink); outline-offset: 3px; }

/* ---------- type ---------- */
.rp-label { margin: 0; font: 400 14px/1.2 var(--rp-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--rp-ink-3); }
.rp-eyebrow { color: var(--rp-accent-ink); }
.rp-h1, .rp-h2, .rp-cta__title, .rp-statement { font-feature-settings: "ss01"; }
.rp-h1 em, .rp-h2 em, .rp-cta__title em, .rp-statement i {
  font-family: var(--rp-serif); font-style: italic; font-weight: 400; font-size: 1.08em; letter-spacing: -0.01em; line-height: 0.9;
}
.rp-h2 { margin: 18px 0 0; font: 500 clamp(34px, 2vw + 22px, 52px)/1.04 var(--rp-font); letter-spacing: -0.035em; color: var(--rp-ink); text-wrap: balance; }
.rp-h2 em { color: var(--rp-ink); }
.rp-h3 { margin: 0; font: 500 clamp(20px, 0.4vw + 17px, 23px)/1.2 var(--rp-font); letter-spacing: -0.02em; color: var(--rp-ink); }
.rp-sub { margin: 18px 0 0; max-width: 36rem; font: 400 clamp(16px, 0.25vw + 15px, 18px)/1.55 var(--rp-font); color: var(--rp-ink-3); text-wrap: pretty; }
.rp-card__line { margin: 10px 0 0; font: 400 16px/1.5 var(--rp-font); color: var(--rp-ink-3); text-wrap: pretty; }
.rp-head { max-width: 40rem; }
.rp-head--center { margin-inline: auto; text-align: center; }
.rp-head--center .rp-sub { margin-inline: auto; }

/* staggered reveal (Stablecash h9.js): items rise 36 px, 80 ms apart; repay.js arms only what starts below the fold */
.rp-stagger.is-armed > * { transition: opacity 0.8s var(--rp-ease-out), translate 0.8s var(--rp-ease-out); transition-delay: calc(var(--si, 0) * 80ms); }
.rp-stagger.is-armed:not(.is-in) > * { opacity: 0; translate: 0 36px; }

/* ---------- buttons + links ---------- */
.rp-btn {
  --bg: var(--rp-accent); --fg: var(--rp-on-accent); --bg-hover: var(--rp-accent-hover);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border-radius: 12px; box-sizing: border-box;
  background: var(--bg); color: var(--fg);
  font: 500 15px/1 var(--rp-font); letter-spacing: -0.005em; text-decoration: none; white-space: nowrap;
  -webkit-tap-highlight-color: transparent; user-select: none;
  translate: var(--mx, 0px) var(--my, 0px);
  transition: background-color 0.25s var(--rp-ease-std), transform 0.25s var(--rp-ease-std), translate 0.4s var(--rp-ease-out);
}
.rp-btn .rp-icon { width: 18px; height: 18px; transition: transform 0.3s var(--rp-ease-out); }
.rp-btn--quiet { --bg: var(--rp-quiet); --fg: var(--rp-ink); --bg-hover: var(--rp-quiet-hover); }
.rp-btn--lg { min-height: 52px; padding: 0 26px; font-size: 16px; border-radius: 14px; }
@media (hover: hover) {
  .rp-btn:hover { background: var(--bg-hover); transform: scale(0.98); }
  .rp-btn:hover .rp-icon { transform: translate(2px, -2px); }
  .rp-btn:hover .rp-icon--arrow-right { transform: translateX(3px); }
}
.rp-btn:active { transform: scale(0.97); transition-duration: 0.08s; }
.rp-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 20px;
  color: var(--rp-ink); font: 500 16px/1 var(--rp-font); text-decoration: none; border-radius: 6px;
  transition: color 0.25s var(--rp-ease-std);
}
.rp-link .rp-icon { width: 18px; height: 18px; color: var(--rp-accent-ink); transition: transform 0.3s var(--rp-ease-out); }
@media (hover: hover) {
  .rp-link:hover { color: var(--rp-accent-ink); }
  .rp-link:hover .rp-icon { transform: translateX(3px); }
  .rp-link:hover .rp-icon--arrow-up-right { transform: translate(2px, -2px); }
}

/* ---------- header: a fixed, centred pill with a blurred translucent fill ---------- */
.rp-header {
  position: fixed; z-index: 60; top: 0; left: 0; right: 0; pointer-events: none;
  padding: calc(env(safe-area-inset-top, 0px) + var(--rp-ht)) calc(var(--rp-gutter) + env(safe-area-inset-right, 0px)) 0 calc(var(--rp-gutter) + env(safe-area-inset-left, 0px));
}
.rp-header__scrim {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: opacity 0.35s var(--rp-ease-out);
}
.rp-header.is-open .rp-header__scrim { opacity: 1; pointer-events: auto; }
.rp-header__float {
  position: relative; pointer-events: auto; width: 100%; max-width: var(--rp-max); margin: 0 auto; border-radius: 16px;
  /* clear glass (client, 27 Sep): no fill colour of its own, just a strong blur of whatever is behind; the ink flips with the band */
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 10px 30px -14px rgba(0, 0, 0, 0.35);
  transition: box-shadow 0.4s var(--rp-ease-out), background-color 0.3s, transform 0.25s var(--rp-ease-std);
}
/* one dark glass header over every section, light or dark */
.rp-header.is-compact .rp-header__float { background: rgba(255, 255, 255, 0.07); }
/* over a pale band: a whisper of white and dark ink */
.rp-header.is-on-light .rp-header__float { background: rgba(255, 255, 255, 0.28); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 0 0 1px rgba(28, 33, 48, 0.08), 0 10px 30px -14px rgba(28, 33, 48, 0.25); }
.rp-header.is-on-light .rp-logo { color: #1c2130; }
.rp-header.is-on-light .rp-nav__link { color: rgba(28, 33, 48, 0.62); }
.rp-header.is-on-light .rp-nav__link.is-active { color: #1c2130; }
@media (hover: hover) { .rp-header.is-on-light .rp-nav__link:hover { color: #1c2130; background: rgba(28, 33, 48, 0.06); } }
.rp-header.is-on-light .rp-menu-btn { background: rgba(28, 33, 48, 0.08); }
.rp-header.is-on-light .rp-menu-btn__bar { background: #1c2130; }
.rp-logo, .rp-nav__link, .rp-menu-btn__bar { transition: color 0.35s var(--rp-ease-out), background-color 0.35s var(--rp-ease-out); }
.rp-header .rp-btn { border-radius: 10px; }
/* header CTA: deep teal with white text and a lit top edge, instead of a pale mint block */
.rp-header .rp-header__cta {
  --bg: #1b8078; --fg: #fff; --bg-hover: #219187;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(43, 179, 166, 0.35);
}


.rp-header__bar { height: var(--rp-hh); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 8px 0 22px; }
.rp-logo { display: inline-flex; align-items: center; min-height: 44px; color: var(--rp-ink); border-radius: 8px; -webkit-tap-highlight-color: transparent; }
.rp-logo__svg { height: 24px; width: auto; display: block; overflow: visible; fill: currentColor; }
.rp-logo__mark { fill: var(--rp-accent); transform-box: fill-box; transform-origin: 50% 50%; transition: transform 0.8s var(--rp-ease-out); }
@media (hover: hover) { .rp-logo:hover .rp-logo__mark { transform: rotate(180deg); } }
.rp-nav { display: none; align-items: center; gap: 2px; }
.rp-nav__link {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 10px;
  color: rgba(242, 244, 243, 0.62); font: 450 15px/1 var(--rp-font); text-decoration: none;
  transition: color 0.2s, background-color 0.25s var(--rp-ease-out);
}
.rp-nav__link::after {
  content: ""; position: absolute; left: 50%; bottom: 6px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%;
  background: var(--rp-accent); transform: scale(0); transition: transform 0.35s var(--rp-ease-out);
}
@media (hover: hover) { .rp-nav__link:hover { color: var(--rp-ink); background: rgba(242, 244, 243, 0.07); } }
.rp-nav__link.is-active { color: var(--rp-ink); }
.rp-nav__link.is-active::after { transform: scale(1); }
.rp-header__end { display: flex; align-items: center; gap: 6px; }
.rp-menu-btn {
  width: 44px; height: 44px; border: 0; padding: 0; border-radius: 10px; background: rgba(242, 244, 243, 0.08); cursor: pointer;
  display: grid; place-items: center; -webkit-tap-highlight-color: transparent; transition: background-color 0.2s, transform 0.15s;
}
.rp-menu-btn:active { transform: scale(0.94); }
.rp-menu-btn__bar { grid-area: 1 / 1; width: 18px; height: 1.5px; border-radius: 2px; background: var(--rp-ink); transition: transform 0.4s var(--rp-ease-out); }
.rp-menu-btn__bar:first-child { transform: translateY(-4px); }
.rp-menu-btn__bar:last-child { transform: translateY(4px); }
.rp-menu-btn[aria-expanded="true"] .rp-menu-btn__bar:first-child { transform: rotate(45deg); }
.rp-menu-btn[aria-expanded="true"] .rp-menu-btn__bar:last-child { transform: rotate(-45deg); }
@media (min-width: 1024px) {
  .rp-header__float { width: fit-content; }
  .rp-header__bar { gap: 24px; padding-left: 26px; }
  .rp-nav { display: flex; }
  .rp-menu-btn, .rp-sheet { display: none; }
  .rp-logo__svg { height: 25px; }
}
@media (max-width: 359px) { .rp-header__cta { display: none; } }

/* mobile menu: its own blurred sheet under the pill */
.rp-sheet {
  position: relative; pointer-events: auto; max-width: var(--rp-max); margin: 10px auto 0; border-radius: 16px;
  display: grid; grid-template-rows: 0fr; opacity: 0;
  background: rgba(10, 11, 11, 0.8);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.6);
  transition: grid-template-rows 0.5s var(--rp-ease-out), opacity 0.3s var(--rp-ease-out);
}
.rp-sheet.is-open { grid-template-rows: 1fr; opacity: 1; }
.rp-sheet[hidden] { display: none; }
.rp-sheet__inner { min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding: 0 12px; }
.rp-sheet.is-open .rp-sheet__inner { padding-block: 10px 12px; }
.rp-sheet__link {
  display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 12px; border-radius: 10px;
  color: var(--rp-ink); text-decoration: none; font: 500 24px/1.1 var(--rp-font); letter-spacing: -0.025em;
  opacity: 0; transform: translateY(8px); transition: opacity 0.35s var(--rp-ease-out), transform 0.45s var(--rp-ease-out), background-color 0.2s;
  transition-delay: calc(var(--i, 0) * 40ms + 80ms);
}
.rp-sheet__link .rp-icon { width: 20px; height: 20px; color: var(--rp-ink-3); }
.rp-sheet__link:active { background: rgba(242, 244, 243, 0.06); }
.rp-sheet__cta { margin-top: 10px; opacity: 0; transform: translateY(8px); transition: opacity 0.35s var(--rp-ease-out) 0.28s, transform 0.45s var(--rp-ease-out) 0.28s, background-color 0.25s; }
.rp-sheet.is-open .rp-sheet__link, .rp-sheet.is-open .rp-sheet__cta { opacity: 1; transform: none; }
.rp-sheet__link:nth-child(2) { --i: 1; } .rp-sheet__link:nth-child(3) { --i: 2; } .rp-sheet__link:nth-child(4) { --i: 3; } .rp-sheet__link:nth-child(5) { --i: 4; } .rp-sheet__link:nth-child(6) { --i: 5; }

/* Safari without backdrop-filter: a solid fill keeps the text readable */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .rp-header__float, .rp-sheet { background: rgba(12, 15, 15, 0.97); }
}

/* ---------- light bands (reviewer v3): hero, features, calculator, compare + FAQ sit on paper (#F4F3EF) or white ----------
   Ink #1C2130, teal only on the cashback. The band's corners stay rounded; while it scrolls in (and out) its sides
   draw in from the dark page, driven by --e (0..1, set by repay.js). Tokens are redefined so everything inside turns light. */
.rp-light {
  --rp-ground: #f4f3ef; --rp-ground-2: #f4f3ef; --rp-raised: #ffffff; --rp-raised-2: #eceae4;
  --rp-ink: #1c2130; --rp-ink-2: #3a4150; --rp-ink-3: #5b6272;
  --rp-accent-ink: #11716a;   /* teal as text on paper (5.1:1) */
  --rp-line: rgba(28, 33, 48, 0.12); --rp-tint: rgba(28, 33, 48, 0.03);
  --rp-quiet: rgba(28, 33, 48, 0.06); --rp-quiet-hover: rgba(28, 33, 48, 0.1);
  --rp-shadow-card: 0 1px 2px rgba(28, 33, 48, 0.04), 0 14px 34px -16px rgba(28, 33, 48, 0.16);
  --rp-shadow-2: 0 1px 2px rgba(28, 33, 48, 0.05), 0 18px 40px -18px rgba(28, 33, 48, 0.22);
  --rp-band-r: 20px;
  --rp-band-in: clamp(10px, 4vw, 72px);
  color-scheme: light; position: relative; background: var(--rp-ground); color: var(--rp-ink);
  clip-path: inset(0 calc((1 - var(--e, 1)) * var(--rp-band-in)) round var(--rp-band-r));
}
.rp-light > section { background: var(--rp-ground); }
.rp-light .rp-white { --rp-ground: #ffffff; --rp-raised: #f4f3ef; --rp-raised-2: #eceae4; }
.rp-light ::selection { color: #fff; background: var(--rp-accent-deep); }
.rp-light .rp-h1 em, .rp-light .rp-h2 em { color: var(--rp-ink); }
/* the hero band starts at the very top: square top corners */
.rp-light:first-child { border-radius: 0; clip-path: inset(0 calc((1 - var(--e, 1)) * var(--rp-band-in)) round 0 0 var(--rp-band-r) var(--rp-band-r)); }

/* film grain (3 %) in the hero and over the whole footer: an SVG noise tile shifted on a compositor-only transform */
@keyframes rp-grain { 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } }

/* ---------- hero: Cashback Street ----------
   default (phones, tablets): the copy, then the street, then the steps as a sideways rail, then the ticker.
   .is-wide (>= 1024 x 600): the street fills the stage, the copy sits left. .is-pinned (wide + motion): 300vh track,
   the title flips away and the steps take its place while the camera visits the four chapters. */
.rp-hero { position: relative; }
.rp-hero__track { position: relative; }
.rp-hero__anchor { position: absolute; left: 0; top: 0; width: 1px; height: 1px; }
.rp-hero__stage { position: relative; display: flex; flex-direction: column; min-height: 100svh; box-sizing: border-box;
  padding-top: calc(env(safe-area-inset-top, 0px) + var(--rp-ht) + var(--rp-hh) + clamp(28px, 5vh, 56px)); overflow: hidden; isolation: isolate; }
.rp-hero__stage::after, .rp-wl__stage::after, .rp-slide__bg::after { content: ""; position: absolute; inset: -50%; z-index: 3; pointer-events: none; opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: rp-grain 0.8s steps(4) infinite; }
.rp-hero__copy { display: contents; }
/* phones and tablets: copy, then the street, then the steps (the copy box only groups them on wide screens) */
.rp-hero__title, .rp-hero__sub { position: relative; z-index: 1; padding-inline: var(--rp-gutter); }
.rp-hero__title { order: 0; } .rp-hero__sub { order: 1; } .rp-hero__art { order: 2; } .rp-steps { order: 3; }
.rp-hero.is-wide .rp-hero__copy { display: block; z-index: 1; }
.rp-hero.is-wide .rp-hero__title, .rp-hero.is-wide .rp-hero__sub { padding-inline: 0; }
.rp-h1 { margin: 0; font: 500 clamp(40px, 10.6vw + 4px, 76px)/0.98 var(--rp-font); letter-spacing: -0.052em; color: var(--rp-ink); }
.rp-line { display: inline-block; overflow: clip; padding: 0.04em 0.06em 0.16em; margin: 0 -0.06em -0.14em; vertical-align: top; }
.rp-line > span { display: inline-block; animation: rp-rise 1.1s var(--rp-ease-out) backwards; animation-delay: var(--d, 0ms); }
.rp-h1 .rp-line { display: block; }
.rp-lede { margin: clamp(18px, 2.4vh, 28px) 0 0; max-width: 27rem; font: 400 clamp(17px, 0.3vw + 16px, 19px)/1.5 var(--rp-font); color: var(--rp-ink-2); text-wrap: pretty; }
.rp-in { animation: rp-fade-up 0.9s var(--rp-ease-out) backwards; animation-delay: var(--d, 0ms); }
.rp-hero__art { position: relative; flex: none; height: min(66svh, 124vw); margin-top: 8px; }
.rp-hero__canvas, .rp-hero__poster, .rp-hero__poster img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rp-hero__poster img { object-fit: contain; }
.rp-hero__canvas { opacity: 0; transition: opacity 0.4s var(--rp-ease-out); }
.rp-hero__canvas.is-on { opacity: 1; }
.rp-gl .rp-hero__poster { display: none; }
/* the ground: the misty forest photo (client, 27 Sep), cover-fit and zoomed 1.12x, fog side behind the copy. JS moves
   .rp-hero__photo (scroll dolly in the pin, 0.3x as the hero leaves, an eased pointer shift <= 12 px) and draws the
   scroll ripple on .rp-hero__water over the same picture. Reduced motion: the still photo. */
.rp-hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: #dfe2dc; }
.rp-hero__photo { position: absolute; inset: 0; transform: scale(1.12); transform-origin: 50% 50%; will-change: transform; }
.rp-hero__photo img, .rp-hero__water { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rp-hero__photo img { object-fit: cover; object-position: 34% 50%; }
.rp-hero.is-wide .rp-hero__photo img { object-position: 0% 50%; }
@media (max-aspect-ratio: 3/5) { .rp-hero__photo img { object-position: 50% 50%; } } /* phones get the tall crop (hero-forest-tall-*) */
.rp-hero__water { opacity: 0; transition: opacity 0.6s var(--rp-ease-out); }
.rp-hero__water.is-on { opacity: 1; }
/* the grade (client, 27 Sep: "dim, mono, frosted"): the photo shader draws it (repay.js initWater); until then, and
   with no GPU, the same look in CSS: grey, 18 % darker, frosted, a faint milky lift. Once the canvas is on, the <img>
   stops painting. */
.rp-hero__photo img { filter: grayscale(1) brightness(0.82) contrast(0.92) blur(8px); }
.rp-hero__photo::after { content: ""; position: absolute; inset: 0; background: rgba(236, 241, 240, 0.08); transition: opacity 0.6s var(--rp-ease-out); }
.rp-hero__photo.is-gl::after { opacity: 0; }
.rp-hero__photo.is-gl img { visibility: hidden; transition: visibility 0s 0.6s; }
/* a soft vignette at the frame edges, under the fog, so the copy's ground stays as light as before */
.rp-hero__vig { position: absolute; inset: 0; background: radial-gradient(ellipse 78% 72% at 56% 52%, rgba(16, 22, 20, 0) 52%, rgba(16, 22, 20, 0.2) 100%); }
/* a soft fog wash where the copy sits (top on phones, left on wide screens) so every line clears 4.5:1 */
.rp-hero__fog { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(244, 243, 239, 0.78) 0%, rgba(244, 243, 239, 0.66) 28%, rgba(244, 243, 239, 0.5) 40%, rgba(244, 243, 239, 0) 60%); }
.rp-hero.is-wide .rp-hero__fog { background: linear-gradient(90deg, rgba(244, 243, 239, 0.62) 0%, rgba(244, 243, 239, 0.44) 26%, rgba(244, 243, 239, 0) 46%); }
/* the cashback of the spend being paid: a small ink figure beside the object, rising and fading (street.js) */
.rp-hero__tags { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.rp-hero__tag { position: absolute; left: 0; top: 0; font: 600 clamp(16px, 0.4vw + 11px, 20px)/1.1 var(--rp-font); letter-spacing: -0.01em; color: var(--rp-accent-ink); font-variant-numeric: tabular-nums; white-space: nowrap; opacity: 0; will-change: transform, opacity; }
/* "Paid 12 USDG" over the merchant just paid (client, 27 Sep: the story reads wallet -> merchant -> token -> wallet) */
.rp-hero__paid { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 7px; font: 600 clamp(16px, 0.3vw + 12px, 18px)/1.1 var(--rp-font); letter-spacing: -0.01em; color: var(--rp-ink); font-variant-numeric: tabular-nums; white-space: nowrap; opacity: 0; will-change: transform, opacity; }
.rp-hero__paid svg { flex: none; width: 20px; height: 20px; }
.rp-hero__paid circle { fill: var(--rp-accent); }
.rp-hero__paid path { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* both labels sit on a small paper pill so they read over the dark trees of the photo */
.rp-hero__tag, .rp-hero__paid { padding: 7px 12px; border-radius: 999px; background: rgba(250, 249, 246, 0.95); box-shadow: 0 1px 2px rgba(28, 33, 48, 0.14), 0 8px 18px -8px rgba(28, 33, 48, 0.35); }
.rp-hero__paid { padding-left: 8px; }
/* the tour's label for the stop the camera rests at (street.js): "Coffee  12 USDG -> +0.35" */
.rp-hero__stop { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: rgba(250, 249, 246, 0.96);
  box-shadow: 0 1px 2px rgba(28, 33, 48, 0.14), 0 10px 22px -10px rgba(28, 33, 48, 0.4); font: 500 clamp(15px, 0.3vw + 12px, 17px)/1.1 var(--rp-font); color: var(--rp-ink); white-space: nowrap; font-variant-numeric: tabular-nums; opacity: 0; will-change: transform, opacity; }
.rp-hero__stop b { font-weight: 600; }
.rp-hero__stop span { color: var(--rp-ink-3); }
.rp-hero__stop svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--rp-ink-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rp-hero__stop em { font-style: normal; font-weight: 600; color: var(--rp-accent-ink); }
.rp-hero__art { transform-origin: 60% 100%; will-change: transform; }
/* pinned: under the steps column the street fades out (--rp-mk from 1 to 0.06 as the steps arrive; --rp-ml = the
   column's right edge), so a zoomed-in object never sits on the text */
.rp-hero.is-pinned .rp-hero__canvas { -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, var(--rp-mk, 1)) var(--rp-ml, 0px), #000 calc(var(--rp-ml, 0px) + 160px)); mask-image: linear-gradient(90deg, rgba(0, 0, 0, var(--rp-mk, 1)) var(--rp-ml, 0px), #000 calc(var(--rp-ml, 0px) + 160px)); }
/* phones: the street's top edge under the copy is soft, so an object flying past it never shows a cut line */
.rp-hero.is-tour .rp-hero__canvas { -webkit-mask-image: linear-gradient(180deg, transparent, #000 40px); mask-image: linear-gradient(180deg, transparent, #000 40px); }
/* phones: the same tour on a shorter pin; the street takes the room between the copy and the steps rail */
.rp-hero.is-tour .rp-hero__track { height: 260vh; }
.rp-hero.is-tour .rp-hero__stage { position: sticky; top: 0; height: 100vh; height: 100svh; }
.rp-hero.is-tour .rp-hero__art { flex: 1 1 auto; height: auto; min-height: 0; }
.rp-hero.is-tour .rp-steps { padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
.rp-hero.is-tour .rp-step.is-active .rp-step__icon { background: var(--rp-ink); color: #fff; }
/* steps: a sideways rail under the street (phones, tablets) */
.rp-steps { position: relative; z-index: 1; margin-top: 8px; }
.rp-steps__track { display: none; }
.rp-steps__list { list-style: none; margin: 0; padding: 4px var(--rp-gutter) 12px; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--rp-gutter); scrollbar-width: none; }
.rp-steps__list::-webkit-scrollbar { display: none; }
.rp-step { flex: none; width: min(72vw, 300px); scroll-snap-align: start; display: flex; align-items: flex-start; gap: 14px; padding: 18px; border-radius: var(--rp-r-lg); background: var(--rp-raised); box-shadow: var(--rp-shadow-card); box-sizing: border-box; }
.rp-step__icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--rp-raised-2); color: var(--rp-ink); transition: background-color 0.4s var(--rp-ease-out), color 0.4s var(--rp-ease-out); }
.rp-step__txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rp-step__txt b { font: 400 19px/1.25 var(--rp-font); letter-spacing: -0.02em; color: var(--rp-ink); }
.rp-step__txt span { font: 400 15px/1.4 var(--rp-font); color: var(--rp-ink-3); }
@keyframes rp-marquee { to { transform: translate3d(-100%, 0, 0); } }

.rp-hero.is-wide .rp-hero__stage { min-height: 100vh; min-height: 100svh; padding-top: 0; }
.rp-hero.is-wide .rp-hero__art { position: absolute; inset: 0; height: auto; margin: 0; }
/* the copy's middle sits level with the street's (its fit box runs from max(12 %, 100 px) to 97 % of the stage, street.js) */
.rp-hero.is-wide .rp-hero__copy { position: absolute; left: max(var(--rp-gutter), calc((100% - var(--rp-max)) / 2)); top: calc((max(12svh, 100px) + 97svh) / 2); transform: translateY(-50%); width: calc(var(--rp-h1) * 6.3); padding: 0; }
.rp-hero.is-wide { --rp-h1: clamp(44px, 4vw, 88px); } /* 58 px at 1440: text shrinks before the art (client, 27 Sep) */
.rp-hero.is-wide .rp-h1 { font-size: var(--rp-h1); }
.rp-hero__sub .rp-lede { max-width: 36ch; }
/* under the subline: where it runs, with a teal dot (no CTA) */
.rp-hero__live { display: inline-flex; align-items: center; gap: 10px; margin: 18px 0 0; color: var(--rp-ink-2); }
.rp-hero__live i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--rp-accent); }
/* wide without motion: the steps sit in a row above the ticker */
.rp-hero.is-wide:not(.is-pinned) .rp-steps { position: absolute; left: 0; right: 0; bottom: 64px; margin: 0; }
.rp-hero.is-wide:not(.is-pinned) .rp-steps__list { justify-content: center; overflow: visible; }
.rp-hero.is-wide:not(.is-pinned) .rp-step { width: 17rem; }
/* pinned: the steps take the title's place, a filling track links their icons */
.rp-hero.is-pinned .rp-hero__track { height: 380vh; }
.rp-hero.is-pinned .rp-hero__stage { position: sticky; top: 0; height: 100vh; height: 100svh; }
.rp-hero.is-pinned .rp-hero__anchor { top: 64vh; } /* past the flip, steps fully in */
.rp-hero__title, .rp-hero__sub { transform-origin: 0 50%; will-change: transform, opacity; }
.rp-hero.is-pinned .rp-steps { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; margin: 0; opacity: 0; will-change: transform, opacity; }
.rp-hero.is-pinned .rp-steps__list { flex-direction: column; gap: 30px; padding: 0; overflow: visible; }
.rp-hero.is-pinned .rp-step { width: auto; padding: 0; background: none; box-shadow: none; align-items: center; gap: 18px; opacity: 0.45; transition: opacity 0.4s var(--rp-ease-out); }
.rp-hero.is-pinned .rp-step__icon { width: 48px; height: 48px; background: var(--rp-raised); box-shadow: var(--rp-shadow-card); }
.rp-hero.is-pinned .rp-step__txt b { font-size: clamp(22px, 1vw + 12px, 28px); font-weight: 500; letter-spacing: -0.03em; }
.rp-hero.is-pinned .rp-step.is-visited { opacity: 0.7; }
.rp-hero.is-pinned .rp-step.is-active { opacity: 1; }
.rp-hero.is-pinned .rp-step.is-active .rp-step__icon { background: var(--rp-ink); color: #fff; }
.rp-hero.is-pinned .rp-steps__track { display: block; position: absolute; z-index: -1; left: 23px; top: 24px; bottom: 24px; width: 2px; border-radius: 2px; background: var(--rp-line); overflow: hidden; }
.rp-hero.is-pinned .rp-steps__track > span { position: absolute; inset: 0; background: var(--rp-ink); transform-origin: 50% 0; transform: scaleY(0); }

@keyframes rp-rise { from { transform: translateY(105%); } }
@keyframes rp-fade-up { from { opacity: 0; translate: 0 14px; } }
@keyframes rp-fade-in { from { opacity: 0; } }

/* ---------- 3D mounts: a still poster frame from the same scene until the live canvas takes over ---------- */
.rp-art { position: relative; width: 100%; height: 100%; }
.rp-art canvas, .rp-art__poster { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rp-art canvas { opacity: 0; transition: opacity 0.7s var(--rp-ease-out); }
.rp-art__poster { object-fit: contain; transition: opacity 0.7s var(--rp-ease-out); }
.rp-art.is-live canvas { opacity: 1; }
.rp-art.is-live .rp-art__poster { opacity: 0; }

/* ---------- story (dark, 150vh): the statement fills in word by word; cashback toasts rise under it ---------- */
.rp-story { position: relative; }
.rp-story__track { position: relative; height: 150vh; }
.rp-story__stage { position: sticky; top: 0; height: 100vh; height: 100svh; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(40px, 7vh, 72px); padding: calc(var(--rp-ht) + var(--rp-hh)) var(--rp-gutter) 32px; overflow: hidden; }
.rp-statement { margin: 0; max-width: 15em; text-align: center; font: 500 clamp(34px, 3.4vw + 18px, 72px)/1.06 var(--rp-font); letter-spacing: -0.04em; color: var(--rp-ink); text-wrap: balance; }
.rp-statement em { font-family: var(--rp-serif); font-style: italic; font-weight: 400; font-size: 1.08em; letter-spacing: -0.01em; }
.rp-fw { color: color-mix(in srgb, var(--rp-ink) calc(var(--f, 1) * 100%), rgba(242, 244, 243, 0.38)); }
.rp-statement em .rp-fw { color: color-mix(in srgb, var(--rp-accent-ink) calc(var(--f, 1) * 100%), rgba(242, 244, 243, 0.38)); }
.rp-toasts { list-style: none; position: relative; margin: 0; padding: 0; width: min(100%, 26rem); height: calc(3 * 72px + 2 * 12px); }
.rp-toast { --s: 0; position: absolute; left: 0; right: 0; bottom: 0; height: 72px; box-sizing: border-box; display: flex; align-items: center; gap: 14px; padding: 0 18px 0 14px;
  border-radius: 16px; background: var(--rp-raised-2); box-shadow: var(--rp-shadow-2);
  transform: translate3d(0, calc(var(--s) * -84px), 0) scale(calc(1 - var(--s) * 0.04)); opacity: calc(1 - var(--s) * 0.1);
  transition: transform 0.5s var(--rp-ease-out), opacity 0.5s var(--rp-ease-out), filter 0.5s var(--rp-ease-out); }
.rp-toast[data-s="1"] { --s: 1; } .rp-toast[data-s="2"] { --s: 2; }
.rp-toast[data-s="3"] { --s: 3; opacity: 0; filter: blur(8px); }
.rp-toast[data-s="-1"] { --s: -0.6; opacity: 0; }
.rp-toast.is-reset { transition: none; }
.rp-toast__coin { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--rp-accent); }
.rp-toast__coin svg { width: 18px; height: 20px; fill: var(--rp-on-accent); }
.rp-toast__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.rp-toast__txt b { font: 500 17px/1.2 var(--rp-font); color: var(--rp-accent-ink); font-variant-numeric: tabular-nums; }
.rp-toast__txt span { font: 400 15px/1.2 var(--rp-font); color: var(--rp-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-toast__when { flex: none; font: 400 14px/1 var(--rp-mono); letter-spacing: 0.04em; color: var(--rp-ink-3); }

/* ---------- features (white): Stakepad's pinned stage at >= 1201 px, a staggered grid below ---------- */
.rp-feats { padding-block: var(--rp-sec); }
.rp-feats__list { list-style: none; margin: var(--rp-gap-head) 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 40px 24px; }
@media (min-width: 640px) { .rp-feats__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rp-feat { display: flex; flex-direction: column; }
.rp-feat__art { position: relative; aspect-ratio: 1; border-radius: var(--rp-r-xl); background: var(--rp-raised); overflow: hidden; transition: transform 0.5s var(--rp-ease-out); }
.rp-feat__art > .rp-art { position: absolute; inset: 0; }
@media (hover: hover) { .rp-feat:hover .rp-feat__art { transform: translateY(-6px); } }
.rp-feat .rp-h3 { margin-top: 22px; }
.rp-feat .rp-card__line { margin-top: 8px; }
.rp-feats.is-pinned { padding: 0; }
.rp-feats.is-pinned .rp-feats__track { height: 250vh; }
.rp-feats.is-pinned .rp-feats__stage { position: sticky; top: 0; height: 100vh; box-sizing: border-box; display: flex; align-items: center; padding-top: calc(var(--rp-ht) + var(--rp-hh)); overflow: hidden; }
.rp-feats.is-pinned .rp-feats__list { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(40px, 6vh, 72px); }
.rp-feats.is-pinned .rp-feat { opacity: 0; will-change: transform, opacity; }
.rp-feats.is-pinned .rp-feat__art { aspect-ratio: auto; height: min(21.5rem, 38vh); }

/* ---------- marquee (dark): display size, drifts left and speeds up with the scroll ---------- */
.rp-marquee { position: relative; padding-block: clamp(40px, 5vw, 80px); overflow: hidden; }

/* ---------- "Smaller pays more" (client, 27 Sep: the hills photo as a ground): the real rate curve (rateOf, drawn by
   repay.js) in teal over the hills, graded like the hero and washed into the dark ground at both edges
   (scripts/photos.py), so it joins the ticker above and the calculator band below with no line ---------- */
.rp-slide { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(72px, 6vw + 40px, 150px); }
.rp-slide__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  /* the cover crop cuts the file's own dark edges, so the photo and its grain fade into the page ground at top and bottom */
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 26%, #000 74%, transparent); mask-image: linear-gradient(180deg, transparent, #000 26%, #000 74%, transparent); }
.rp-slide__bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; }
.rp-slide__in { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1024px) { .rp-slide__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 5vw, 96px); } }
.rp-slide__head .rp-h2 { font-size: clamp(40px, 3vw + 24px, 72px); }
.rp-slide__head .rp-sub { color: var(--rp-ink-2); max-width: 30ch; }
.rp-slide__chart { margin: 0; padding: 36px 0 0 56px; }
.rp-slide__plot { position: relative; aspect-ratio: 5 / 2; }
.rp-slide__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rp-slide__rule { stroke: var(--rp-line); stroke-width: 1; }
.rp-slide__area { fill: var(--rp-accent); opacity: 0; transition: opacity 1s var(--rp-ease-out) 0.9s; fill-opacity: 0.1; }
.rp-slide__line { fill: none; stroke: var(--rp-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--rp-ease-in-out) 0.2s; }
.rp-slide.is-in .rp-slide__line { stroke-dashoffset: 0; }
.rp-slide.is-in .rp-slide__area { opacity: 1; }
.rp-slide__y, .rp-slide__x { position: absolute; font: 400 14px/1 var(--rp-mono); color: var(--rp-ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rp-slide__y { right: calc(100% + 14px); top: var(--y); transform: translateY(-50%); }
.rp-slide__x { top: calc(100% + 16px); left: var(--x); transform: translateX(var(--tx, -50%)); }
.rp-slide__dot { position: absolute; left: var(--x, 49.8%); top: var(--y, 57%); width: 0; height: 0; opacity: 0; transition: opacity 0.6s var(--rp-ease-out) 1.4s, left 0.5s var(--rp-ease-out), top 0.5s var(--rp-ease-out); }
.rp-slide.is-in .rp-slide__dot { opacity: 1; }
.rp-slide__dot i { position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; border-radius: 50%; background: var(--rp-accent); box-shadow: 0 0 0 4px var(--rp-ground); }
.rp-slide__dot b { position: absolute; left: 0; bottom: 18px; transform: translateX(calc(var(--x, 50%) * -1)); /* slides along so it never leaves the plot */ padding: 8px 12px; border-radius: 999px; background: var(--rp-raised-2); font: 500 14px/1 var(--rp-font); color: var(--rp-ink); white-space: nowrap; font-variant-numeric: tabular-nums; box-shadow: var(--rp-shadow-1); }
.rp-slide__unit { margin-top: 48px; text-align: right; }
.rp-slide__x i { font-style: normal; } .rp-slide__x .rp-k { display: none; }
@media (max-width: 559px) { .rp-slide__x .rp-k { display: inline; } .rp-slide__x .rp-full { display: none; } }
.rp-marquee__row { display: flex; width: max-content; animation: rp-marquee-css 40s linear infinite; will-change: transform; }
.rp-marquee__row.is-js { animation: none; }
.rp-marquee__set { display: flex; align-items: center; flex: none; }
.rp-marquee__item { flex: none; padding-inline: clamp(24px, 2.6vw, 44px); font: 500 clamp(56px, 4vw + 32px, 96px)/1.05 var(--rp-font); letter-spacing: -0.045em; color: var(--rp-ink); white-space: nowrap; }
.rp-marquee__mark { flex: none; width: clamp(22px, 1.8vw, 34px); height: auto; fill: var(--rp-ink-3); }
@keyframes rp-marquee-css { to { transform: translate3d(-50%, 0, 0); } }

/* ---------- calculator (paper, one surface): two halves on the section's own ground, split by a hairline. Row 1: the
   eyebrow and "Back to you"; row 2: the heading and the cashback figure on one baseline; row 3: the spend and its
   meter, the rate and the coin stack. Wide + fine pointer + motion: the stage pins for 175vh and the scroll moves
   the meter from 10 to 2,000 USDG (and back); a drag or a key press takes over and the scroll carries on from there. ---------- */
.rp-calc-sec { padding-block: var(--rp-sec); }
.rp-calc { --gap: clamp(48px, 7vw, 128px); position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "eyebrow" "head" "body" "top" "back" "out"; column-gap: var(--gap); align-items: start; }
.rp-calc__eyebrow { grid-area: eyebrow; display: inline-flex; align-items: center; gap: 10px; justify-self: start; }
.rp-calc__eyebrow .rp-icon { width: 22px; height: 22px; }
.rp-calc__head { grid-area: head; margin-top: 16px; }
.rp-calc__body { grid-area: body; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.rp-calc__top { grid-area: top; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; margin-top: 64px; padding-top: 28px; box-shadow: inset 0 1px 0 var(--rp-line); }
.rp-calc__top .rp-label { white-space: nowrap; }
@media (max-width: 359px) { .rp-calc__top { flex-wrap: wrap; } }
.rp-calc__back { grid-area: back; margin-top: 8px; }
.rp-calc__out { grid-area: out; display: flex; flex-direction: column; min-width: 0; }
/* key figures: Geist 600 (the spend 500), tabular, tight; the unit small, mono, on the figure's cap line */
.rp-calc__num { --fs: 64px; display: flex; align-items: flex-start; gap: 12px; margin: 0; }
.rp-calc__num b { font: 600 var(--fs)/1.1 var(--rp-font); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--rp-accent-ink); transform: translate3d(calc(var(--px, 0) * 5px), calc(var(--py, 0) * 4px), 0); transition: transform 0.6s var(--rp-ease-out); }
.rp-calc__num small { margin-top: calc(var(--fs) * 0.2); font: 400 14px/1 var(--rp-mono); letter-spacing: 0.04em; color: var(--rp-ink-3); }
.rp-calc__back { --fs: clamp(64px, 7.4vw, 128px); }
.rp-calc__num--spend { --fs: clamp(48px, 5vw, 88px); }
.rp-calc__num--spend b { font-weight: 500; color: var(--rp-ink); }
.rp-calc__spend { display: flex; flex-direction: column; gap: 8px; width: 100%; margin: clamp(24px, 3.4vh, 40px) 0 0; }
/* the odometer: every digit is a window onto a 0-9 strip; at rest a digit always sits whole in its window */
.rp-odo { display: inline-flex; }
.rp-odo__d { position: relative; display: inline-block; clip-path: inset(0 -0.1em); }
.rp-odo__g { visibility: hidden; }
.rp-odo__s { position: absolute; left: 0; top: 0; width: 100%; display: flex; flex-direction: column; text-align: center; transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1); will-change: transform; }
.rp-odo__s > span { display: block; height: 1.1em; }
/* the meter: value above the thumb, the rate curve (3% down to 1.5% at 1,000 USDG) behind the track, ticks under it */
.rp-meter { --in: 11px; --p01: 0.5; position: relative; width: 100%; margin-top: clamp(20px, 3vh, 32px); }
.rp-meter__val { position: absolute; top: 0; left: calc(var(--in) + (100% - 2 * var(--in)) * var(--p01)); transform: translateX(calc(var(--p01) * -100%)); font: 500 14px/1 var(--rp-mono); color: var(--rp-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rp-meter__curve { position: absolute; top: 26px; left: var(--in); width: calc(100% - 2 * var(--in)); height: 34px; overflow: visible; fill: none; stroke: var(--rp-ink); stroke-opacity: 0.22; stroke-width: 1.5; stroke-dasharray: none; }
.rp-meter__dot { position: absolute; top: calc(26px + var(--dy, 0.1) * 34px); left: calc(var(--in) + (100% - 2 * var(--in)) * var(--p01)); width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--rp-accent); }
.rp-range { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; margin: 50px 0 0; background: transparent; cursor: pointer; touch-action: pan-y; }
.rp-range::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: linear-gradient(to right, var(--rp-ink) var(--p), var(--rp-line) var(--p)); }
.rp-range::-moz-range-track { height: 2px; border-radius: 2px; background: var(--rp-line); }
.rp-range::-moz-range-progress { height: 2px; border-radius: 2px; background: var(--rp-ink); }
.rp-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--rp-ink), 0 3px 8px -2px rgba(28, 33, 48, 0.35); transition: transform 0.25s var(--rp-ease-out); }
.rp-range::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--rp-ink), 0 3px 8px -2px rgba(28, 33, 48, 0.35); }
.rp-range:hover::-webkit-slider-thumb { transform: scale(1.08); }
.rp-range:active::-webkit-slider-thumb { transform: scale(1.18); }
.rp-range:focus-visible { outline: 2px solid var(--rp-accent-ink); outline-offset: 4px; border-radius: 8px; }
.rp-meter__ticks { position: relative; height: 30px; margin: 0 var(--in); container-type: inline-size; }
.rp-meter__ticks i { font-style: normal; }
.rp-meter__ticks i + i { display: none; }
@container (max-width: 440px) { .rp-meter__ticks i:first-child:not(:only-child) { display: none; } .rp-meter__ticks i + i { display: inline; } } /* 1k / 2k where 1,000 and 2,000 would touch */
.rp-meter__ticks span { position: absolute; top: 0; left: var(--t); transform: translateX(-50%); padding-top: 12px; font: 400 14px/1 var(--rp-mono); color: var(--rp-ink-3); font-variant-numeric: tabular-nums; }
.rp-meter__ticks span::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 7px; background: var(--rp-ink); opacity: 0.35; }
.rp-meter__ticks span:first-child { transform: none; margin-left: calc(var(--in) * -1); padding-left: calc(var(--in) - 0.5px); }
.rp-meter__ticks span:first-child::before { left: calc(var(--in) - 0.5px); }
.rp-meter__ticks span:nth-child(3) { transform: translateX(-100%); padding-right: 8px; margin-left: 0.5px; } /* "1,000" ends at its tick, clear of "2,000" */
.rp-meter__ticks span:nth-child(3)::before { left: auto; right: 0; }
.rp-meter__ticks span:last-child { transform: translateX(-100%); margin-left: var(--in); padding-right: calc(var(--in) - 0.5px); }
.rp-meter__ticks span:last-child::before { left: auto; right: calc(var(--in) - 0.5px); }
.rp-calc__meta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 16px 0 0; font: 400 15px/1.3 var(--rp-font); color: var(--rp-ink-3); font-variant-numeric: tabular-nums; }
.rp-calc__meta > span { display: inline-flex; align-items: center; gap: 8px; }
.rp-calc__meta .rp-icon { width: 18px; height: 18px; color: var(--rp-ink-2); }
/* the cap stamp: pressed in when a spend reaches the 15 USDG limit */
.rp-calc__cap { flex: none; margin: 0 4px 0 0; padding: 8px 11px; transform-origin: 100% 50%; border-radius: 10px; box-shadow: inset 0 0 0 2px currentColor; color: var(--rp-accent-ink); font: 500 14px/1 var(--rp-mono); letter-spacing: 0.01em; white-space: nowrap; opacity: 0; transform: rotate(-5deg) scale(1.3); transition: opacity 0.16s ease, transform 0.34s cubic-bezier(0.3, 1.6, 0.5, 1); }
.rp-calc__cap.is-on { opacity: 1; transform: rotate(-5deg) scale(1); }
.rp-calc__art { position: relative; height: clamp(280px, 78vw, 360px); margin-top: 8px; }
.rp-calc__art > .rp-art { position: absolute; inset: 0; }
/* the cursor's soft light on the paper (a lighter patch of the ground, never a glow) */
.rp-calc__stage { position: relative; }
.rp-calc__stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(620px circle at var(--mx, 60%) var(--my, 45%), rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 72%); opacity: var(--spot, 0); transition: opacity 0.6s var(--rp-ease-out); }
.rp-calc__stage > .rp-wrap { position: relative; }
@media (min-width: 1024px) {
  .rp-calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "eyebrow top" "head back" "body out"; }
  .rp-calc::before { content: ""; grid-column: 2; grid-row: 1 / -1; align-self: stretch; justify-self: start; width: 1px; margin-left: calc(var(--gap) / -2); background: var(--rp-line); }
  .rp-calc__head, .rp-calc__back { align-self: baseline; }
  .rp-calc__top { margin-top: 0; padding-top: 0; box-shadow: none; }
  .rp-calc__art { height: clamp(260px, 34vh, 400px); }
}
/* pinned: the section is a 175vh track, its stage sticks under the header for the whole slide */
.rp-calc-sec.is-pinned { padding-block: 0; }
.rp-calc-sec.is-pinned .rp-calc__track { height: 175vh; }
.rp-calc-sec.is-pinned .rp-calc__stage { position: sticky; top: 0; height: 100vh; height: 100svh; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; padding: calc(env(safe-area-inset-top, 0px) + var(--rp-ht) + var(--rp-hh) + 24px) 0 32px; }
@media (prefers-reduced-motion: reduce) { .rp-calc__cap, .rp-odo__s, .rp-calc__num b, .rp-calc__stage::before { transition: none; } }

/* ---------- a month of spending (dark): pinned row over a zooming street, running total ---------- */
.rp-month { position: relative; padding-block: var(--rp-sec); --rp-edge: max(var(--rp-gutter), calc((100% - var(--rp-max)) / 2)); }
.rp-month__stage { position: relative; }
/* one clean ground: deep black with a very soft neutral light behind the row (no collage, no arcs: client, 26 Sep) */
.rp-month__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; transform-origin: 50% 60%;
  background: radial-gradient(ellipse 70% 55% at 55% 62%, #151818 0%, rgba(21, 24, 24, 0) 72%), #0a0b0b; }
.rp-month__head { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.rp-month__total { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin: 0; }
.rp-month__total b { font: 600 clamp(44px, 2.4vw + 30px, 72px)/1 var(--rp-font); letter-spacing: -0.04em; color: var(--rp-accent-ink); font-variant-numeric: tabular-nums; }
.rp-month__total small { font: 400 15px/1 var(--rp-font); color: var(--rp-ink-3); }
.rp-month__vp { position: relative; z-index: 1; margin-top: clamp(32px, 5vh, 64px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--rp-edge); scrollbar-width: none; border-radius: 4px; }
.rp-month__vp::-webkit-scrollbar { display: none; }
.rp-month__vp:focus-visible { outline-offset: -2px; }
.rp-month__row { list-style: none; margin: 0; padding: 4px var(--rp-edge) 8px; display: flex; gap: 20px; width: max-content; will-change: transform; }
.rp-mcard { flex: none; width: min(78vw, clamp(300px, 26vw, 400px), 48vh); scroll-snap-align: start; border-radius: var(--rp-r-xl); background: var(--rp-raised); overflow: hidden; }
.rp-mcard__art { position: relative; aspect-ratio: 1; background: var(--rp-raised-2); }
.rp-mcard__art > .rp-art { position: absolute; inset: 0; }
.rp-mcard__line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 0; padding: 18px 20px 20px; font: 400 18px/1.2 var(--rp-font); letter-spacing: -0.01em; color: var(--rp-ink); font-variant-numeric: tabular-nums; }
.rp-mcard__amt { color: var(--rp-ink-3); }
.rp-mcard__to .rp-icon { width: 16px; height: 16px; color: var(--rp-ink-3); }
.rp-mcard__line b { margin-left: auto; font-weight: 500; color: var(--rp-ink-2); transition: color 0.4s var(--rp-ease-out); }
.rp-mcard.is-counted .rp-mcard__line b { color: var(--rp-accent-ink); }
.rp-month.is-pinned { padding: 0; }
.rp-month.is-pinned .rp-month__stage { position: sticky; top: 0; height: 100vh; height: 100svh; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; padding-top: calc(var(--rp-ht) + var(--rp-hh)); overflow: hidden; }
.rp-month.is-pinned .rp-month__vp { overflow: hidden; scroll-snap-type: none; }

/* ---------- compare (white): Stablecash's table, three rows, the Repay column tinted; the checks draw in ---------- */
.rp-compare { padding-block: var(--rp-sec) calc(var(--rp-sec) * 0.6); }
.rp-cmp-wrap { max-width: 60rem; margin: var(--rp-gap-head) auto 0; }
.rp-cmp { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.rp-cmp th, .rp-cmp td { padding: 22px 20px; text-align: left; vertical-align: middle; }
.rp-cmp thead th { font: 400 14px/1.2 var(--rp-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--rp-ink-3); padding-block: 18px; }
.rp-cmp thead .rp-cmp__us { color: var(--rp-ink); border-radius: var(--rp-r-lg) var(--rp-r-lg) 0 0; }
.rp-cmp tbody th { font: 400 16px/1.3 var(--rp-font); color: var(--rp-ink-3); width: 26%; }
.rp-cmp td { font: 400 clamp(20px, 1vw + 13px, 26px)/1.25 var(--rp-font); letter-spacing: -0.025em; color: var(--rp-ink-3); }
.rp-cmp td .rp-icon { display: inline-block; vertical-align: -3px; width: 22px; height: 22px; margin-right: 12px; }
.rp-cmp .rp-cmp__us { background: rgba(43, 179, 166, 0.09); color: var(--rp-ink); }
.rp-cmp tbody tr:last-child .rp-cmp__us { border-radius: 0 0 var(--rp-r-lg) var(--rp-r-lg); }
.rp-cmp tbody tr + tr > * { box-shadow: inset 0 1px 0 var(--rp-line); }
.rp-cmp td.rp-cmp__us .rp-icon { color: var(--rp-accent-ink); }
.rp-cmp td.rp-cmp__us .rp-icon path { stroke-dasharray: 24; stroke-dashoffset: 0; transition: stroke-dashoffset 0.7s var(--rp-ease-out) calc(0.3s + var(--si, 0) * 0.12s); }
.rp-stagger.is-armed:not(.is-in) .rp-cmp__us .rp-icon path { stroke-dashoffset: 24; }
@media (max-width: 559px) { .rp-cmp th, .rp-cmp td { padding: 16px 10px; } .rp-cmp tbody th { width: 30%; font-size: 14px; } .rp-cmp td .rp-icon { display: block; margin: 0 0 8px; } .rp-cmp td { font-size: 18px; } }

/* ---------- FAQ (paper): Stakepad's split, title left, one answer open at a time ---------- */
.rp-faq { padding-block: calc(var(--rp-sec) * 0.6) var(--rp-sec); }
.rp-faq__grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: start; }
@media (min-width: 1024px) { .rp-faq__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(56px, 6vw, 112px); } .rp-faq__left { position: sticky; top: calc(var(--rp-ht) + var(--rp-hh) + 40px); } }
.rp-limits { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
/* FAQ on white, same as the compare table above (one surface, no seam): stats and questions are a light tint, no shadow */
.rp-limits li { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; padding: 18px 16px; border-radius: var(--rp-r-lg); background: #f6f6f4; }
.rp-limits b { margin-top: 10px; font: 600 clamp(28px, 1.2vw + 20px, 40px)/1 var(--rp-font); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--rp-ink); white-space: nowrap; display: flex; align-items: flex-start; gap: 6px; }
.rp-limits b small { margin-top: 0.2em; font: 400 14px/1 var(--rp-mono); letter-spacing: 0.04em; color: var(--rp-ink-3); }
.rp-limits li > span:last-child { font: 400 14px/1.3 var(--rp-font); color: var(--rp-ink-3); }
.rp-fact__icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--rp-ink); box-shadow: inset 0 0 0 1px var(--rp-line); }
.rp-fact__icon .rp-icon { width: 22px; height: 22px; }
@media (max-width: 479px) { .rp-limits { grid-template-columns: 1fr; } .rp-limits li { flex-direction: row; align-items: center; gap: 14px; } .rp-limits b { margin: 0; font-size: 28px; } }
.rp-faq__right { display: flex; flex-direction: column; gap: 10px; }
.rp-qa { border-radius: var(--rp-r-lg); background: #f6f6f4; }
.rp-qa h3 { margin: 0; }
.rp-qa__q { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 72px; padding: 0 24px; border: 0; background: none; cursor: pointer; text-align: left;
  font: 400 19px/1.3 var(--rp-font); letter-spacing: -0.02em; color: var(--rp-ink); border-radius: var(--rp-r-lg); -webkit-tap-highlight-color: transparent; }
.rp-qa__q .rp-icon { flex: none; width: 20px; height: 20px; color: var(--rp-ink); transition: transform 0.4s var(--rp-ease-out); }
.rp-qa.is-open .rp-qa__q .rp-icon { transform: rotate(180deg); }
.rp-qa__a { overflow: hidden; transition: height 0.5s var(--rp-ease-out); }
.rp-qa__a p { margin: 0; padding: 0 24px 24px; font: 400 16px/1.55 var(--rp-font); color: var(--rp-ink-3); max-width: 40rem; }

/* ---------- closing scene + footer (dark) ---------- */
.rp-footer { position: relative; overflow: hidden; background: var(--rp-ground); }
.rp-close { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; isolation: isolate; }
.rp-close__art { position: absolute; left: 0; right: 0; top: 42%; bottom: 0; z-index: 0; transition: opacity 0.5s var(--rp-ease-out); -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent); mask-image: linear-gradient(180deg, #000 72%, transparent); } /* coins fade out before the links instead of being cut at a hard line */
/* one grain over the whole footer (closing scene + links + wordmark), so the ground and its texture run on without a
   join (client, 27 Sep: the scene read lighter than the links below it). Inset 4 %: the grain only moves 3 %. */
.rp-footer { isolation: isolate; }
.rp-footer__grain { position: absolute; inset: -4%; z-index: 3; pointer-events: none; opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: rp-grain 0.8s steps(4) infinite; }
/* once the title has scrolled off the top, the coins go too: none left floating by the header over the footer links */
.rp-close.is-past .rp-close__art { opacity: 0; }
.rp-close__body { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: clamp(96px, 14vh, 160px); }
.rp-close__title { margin: 0; max-width: 9em; font: 500 clamp(44px, 5vw + 16px, 104px)/1 var(--rp-font); letter-spacing: -0.045em; color: var(--rp-ink); text-wrap: balance; }
.rp-close__sweep { font-family: var(--rp-serif); font-style: italic; font-weight: 400; font-size: 1.08em; letter-spacing: -0.01em; white-space: nowrap; }
.rp-close__sweep .rp-ch { color: color-mix(in srgb, var(--rp-accent-ink) calc(var(--c, 1) * 100%), var(--rp-ink)); }
.rp-close__body .rp-btn { margin-top: 28px; }
.rp-foot__nav { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 12px; }
/* one row of equal tiles, however many there are (four on the home page, three on the waitlist) */
@media (min-width: 768px) { .rp-foot__nav { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }
.rp-foot__tile { position: relative; display: flex; align-items: flex-end; justify-content: space-between; min-height: clamp(120px, 14vw, 200px); padding: 24px; border-radius: var(--rp-r-xl); background: var(--rp-raised); box-sizing: border-box;
  color: var(--rp-ink); text-decoration: none; font: 500 clamp(28px, 1.6vw + 18px, 44px)/1 var(--rp-font); letter-spacing: -0.035em; transition: background-color 0.3s var(--rp-ease-out); }
.rp-foot__tile .rp-icon { position: absolute; top: 24px; right: 24px; width: 26px; height: 26px; color: var(--rp-ink-2); transition: transform 0.4s var(--rp-ease-out); }
@media (hover: hover) { .rp-foot__tile:hover { background: var(--rp-raised-2); } .rp-foot__tile:hover .rp-icon { transform: translate(3px, -3px); } }
.rp-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 40px; font: 400 14px/1.4 var(--rp-font); color: var(--rp-ink-3); }
.rp-foot__word { margin-top: clamp(32px, 4vw, 64px); padding-inline: clamp(6px, 1vw, 16px); line-height: 0; overflow: hidden; }
/* the footer bottom (client, 27 Sep): REPAY in glass capitals (Archivo Expanded ExtraBold as paths, scripts/wordmark.py)
   standing flush on the page's bottom edge, in front of the fog and the pines of a lake photo graded like the hero, with
   the dark ground washed in and solid at its top edge so the links above run into it (scripts/photos.py). The photo ends
   at the shoreline: nothing under the letters, no reflection. The svg's box is the letters' ink box, so its bottom edge
   is their baseline; the side gutters are the site's. The glass: a frosted, lifted copy of the photo (.rp-foot__glass,
   pixel for pixel over the ground, drifting a little slower on scroll: repay.js initLake) cut to the letters by a mask
   of the same shapes, under the svg's 1 px inner edges and soft sheen. */
.rp-foot__lake { position: relative; margin-top: clamp(24px, 3vw, 48px); aspect-ratio: 2400 / 1000; }
.rp-foot__lake-bg, .rp-foot__photo { position: absolute; inset: 0; overflow: hidden; }
.rp-foot__photo img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.rp-foot__lake .rp-foot__word { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; margin: 0; padding-inline: var(--rp-gutter); }
.rp-foot__glass { position: absolute; z-index: 1; inset: 0; overflow: hidden; pointer-events: none; transition: opacity 1.1s var(--rp-ease-out) 0.4s;
  -webkit-mask: url(/_repay/img/repay-word.svg) center bottom / calc(100% - 2 * var(--rp-gutter)) auto no-repeat;
  mask: url(/_repay/img/repay-word.svg) center bottom / calc(100% - 2 * var(--rp-gutter)) auto no-repeat; }
.rp-foot__glass img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; will-change: transform; }
.rp-foot__word.is-armed:not(.is-in) ~ .rp-foot__glass { opacity: 0; transition: none; }
/* no CSS masks: plain see-through letters */
@supports not ((mask-size: auto) or (-webkit-mask-size: auto)) {
  .rp-foot__glass { display: none; }
  .rp-foot__lake .rp-gl-p { fill: rgba(255, 255, 255, 0.18); stroke: rgba(255, 255, 255, 0.5); }
}
/* phones: a taller cut of the lake (its full height, the right of it: the treeline behind the letters) */
@media (max-width: 767px) { .rp-foot__lake { aspect-ratio: 3 / 2; } .rp-foot__photo img, .rp-foot__glass img { object-position: 78% 100%; } }
.rp-foot__word svg { display: block; width: 100%; height: auto; fill: #1c2020; overflow: hidden; }
.rp-foot__l { transform-box: fill-box; transition: transform 0.8s var(--rp-ease-out); transition-delay: calc(var(--i) * 0.06s); }
.rp-foot__word.is-armed:not(.is-in) .rp-foot__l { transform: translateY(calc(100% + 2px)); }

/* ---------- headline mask reveal: every word rises out of its own clip box once the heading is in view ---------- */
.rp-w { display: inline-block; overflow: clip; vertical-align: top; padding: 0 0.1em 0.14em; margin: 0 -0.1em -0.14em; }
.rp-w > span { display: inline-block; transition: transform 0.95s var(--rp-ease-out); transition-delay: calc(var(--wi, 0) * 38ms); }
.rp-js .rp-split:not(.is-in) .rp-w > span { transform: translateY(112%); }

/* ---------- page-load intro: the header drops in ---------- */
.rp-header__float { animation: rp-drop 0.9s var(--rp-ease-out) 0.25s backwards; }
@keyframes rp-drop { from { opacity: 0; translate: 0 -24px; } }

/* ---------- smooth scrolling (Lenis, fine pointers only; js/vendor/lenis.min.js) ---------- */
html.lenis, html.lenis body { height: auto; }
html.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html.rp { scroll-behavior: auto; }
  .rp *, .rp *::before, .rp *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; }
  .rp-hero__stage::after, .rp-wl__stage::after, .rp-slide__bg::after, .rp-footer__grain { animation: none; }
  .rp-slide__line { stroke-dashoffset: 0 !important; } .rp-slide__area, .rp-slide__dot { opacity: 1 !important; }
  .rp-story__track { height: auto; }
  .rp-story__stage { position: relative; height: auto; min-height: 100svh; }
  .rp-marquee__row { animation: none; width: auto; justify-content: center; }
  .rp-marquee__set { flex-wrap: wrap; justify-content: center; row-gap: 12px; }
  .rp-marquee__set + .rp-marquee__set { display: none; }
  .rp-light { clip-path: inset(0 round var(--rp-band-r)); }
  .rp-light:first-child { clip-path: inset(0 round 0 0 var(--rp-band-r) var(--rp-band-r)); }
  .rp-js .rp-split:not(.is-in) .rp-w > span { transform: none; }
  .rp-btn { translate: none; }
}
/* on paper the primary button is ink (teal stays for the cashback figures) */
.rp-light .rp-btn--primary { --bg: var(--rp-ink); --fg: #ffffff; --bg-hover: #2e3448; }
.rp-hero.is-wide .rp-hero__poster img { object-fit: cover; object-position: 100% 50%; }

/* ---------- waitlist page (/waitlist): the hero's forest ground and water, the copy and form on the left, the token
   big on the right at a three-quarter turn (token.js). Opening: the token draws in, then the copy rises
   (repay.js adds .rp-wl-go). Phones: copy and form first, the token under them. ---------- */
.rp-wl__stage { position: relative; display: flex; flex-direction: column; min-height: 100svh; box-sizing: border-box;
  padding-top: calc(env(safe-area-inset-top, 0px) + var(--rp-ht) + var(--rp-hh) + clamp(28px, 5vh, 56px)); overflow: hidden; isolation: isolate; }
.rp-wl .rp-hero__fog { background: linear-gradient(180deg, rgba(244, 243, 239, 0.8) 0%, rgba(244, 243, 239, 0.62) 30%, rgba(244, 243, 239, 0.2) 52%, rgba(244, 243, 239, 0) 64%); }
.rp-wl [hidden] { display: none !important; }
.rp-wl__copy { position: relative; z-index: 1; order: 0; padding-inline: var(--rp-gutter); }
.rp-wl__eyebrow { margin-bottom: clamp(14px, 2vh, 22px); }
.rp-wl__art { position: relative; order: 1; flex: none; height: min(50svh, 96vw); margin-top: 12px; }
.rp-wl__canvas, .rp-wl__poster { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rp-wl__poster { object-fit: contain; }
.rp-wl__canvas { opacity: 0; transition: opacity 0.4s var(--rp-ease-out); }
.rp-wl__canvas.is-on { opacity: 1; }
.rp-gl .rp-wl__poster { display: none; }
@media (min-width: 1024px) and (min-height: 600px) {
  .rp-wl__stage { min-height: max(100svh, 660px); padding-top: 0; }
  .rp-wl .rp-hero__photo img { object-position: 0% 50%; }
  .rp-wl .rp-hero__fog { background: linear-gradient(90deg, rgba(244, 243, 239, 0.7) 0%, rgba(244, 243, 239, 0.5) 30%, rgba(244, 243, 239, 0) 50%); }
  .rp-wl__copy { position: absolute; left: max(var(--rp-gutter), calc((100% - var(--rp-max)) / 2)); top: 50%; transform: translateY(-44%); width: min(44%, 36rem); padding: 0; }
  .rp-wl .rp-h1 { font-size: clamp(48px, 4.4vw, 88px); }
  .rp-wl__art { position: absolute; top: calc(var(--rp-ht) + var(--rp-hh)); bottom: 2vh; left: 44%; right: max(var(--rp-gutter), calc((100% - var(--rp-max)) / 2)); height: auto; margin: 0; }
}
/* the opening: hidden only once JS runs (no JS: everything shows at once) */
.rp-wl .rp-line > span { animation: none; }
.rp-js .rp-wl__rise { transform: translateY(105%); }
.rp-js .rp-wl__in { opacity: 0; translate: 0 14px; }
.rp-wl-go .rp-wl__rise { transform: none; transition: transform 1.1s var(--rp-ease-out) var(--d, 0ms); }
.rp-wl-go .rp-wl__in { opacity: 1; translate: 0 0; transition: opacity 0.9s var(--rp-ease-out) var(--d, 0ms), translate 0.9s var(--rp-ease-out) var(--d, 0ms); }

/* the form: one white field with the button inside it (no border: a soft shadow, a solid ring on focus) */
.rp-wl__box { margin-top: clamp(24px, 3.6vh, 40px); max-width: 32rem; }
.rp-wl__field { position: relative; display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 18px; background: #ffffff;
  box-shadow: 0 1px 2px rgba(28, 33, 48, 0.06), 0 16px 36px -18px rgba(28, 33, 48, 0.32); transition: box-shadow 0.25s var(--rp-ease-out); }
.rp-wl__field:focus-within { box-shadow: 0 0 0 2px var(--rp-ink), 0 16px 36px -18px rgba(28, 33, 48, 0.32); }
.rp-wl__field.is-error { box-shadow: 0 0 0 2px #b42318, 0 16px 36px -18px rgba(28, 33, 48, 0.32); }
.rp-wl__mail { position: absolute; left: 22px; top: 50%; width: 20px; height: 20px; margin-top: -10px; color: var(--rp-ink-3); pointer-events: none; }
.rp-wl__mail .rp-icon { width: 20px; height: 20px; display: block; }
.rp-wl__input { flex: 1; min-width: 0; min-height: 52px; padding: 0 12px 0 48px; border: 0; border-radius: 12px; background: transparent; outline: none;
  font: 400 17px/1.2 var(--rp-font); letter-spacing: -0.01em; color: var(--rp-ink); }
.rp-wl__input:focus-visible { outline: none; } /* the field's ring shows focus */
.rp-wl__input::placeholder { color: #7a8190; opacity: 1; }
.rp-wl__btn { flex: none; border-radius: 13px; cursor: pointer; border: 0; }
.rp-wl__spin { display: none; }
.rp-wl__spin .rp-icon { display: block; animation: rp-spin 0.8s linear infinite; }
.rp-wl__form.is-busy .rp-wl__spin { display: inline-flex; }
.rp-wl__form.is-busy .rp-wl__btn .rp-icon--arrow-right { display: none; }
.rp-wl__form.is-busy .rp-wl__btn { cursor: progress; }
@keyframes rp-spin { to { transform: rotate(360deg); } }
.rp-wl__hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.rp-wl__msg { display: flex; align-items: flex-start; gap: 8px; min-height: 22px; margin: 12px 0 0; padding-left: 4px; font: 500 15px/1.45 var(--rp-font); color: var(--rp-ink-2); }
.rp-wl__msg-icon { display: none; flex: none; margin-top: 1px; }
.rp-wl__msg-icon .rp-icon { width: 18px; height: 18px; display: block; }
.rp-wl__msg.is-error { color: #9f1d14; }
.rp-wl__msg.is-error .rp-wl__msg-icon { display: block; }
@media (max-width: 479px) {
  .rp-wl__field { flex-direction: column; align-items: stretch; }
  .rp-wl__btn { width: 100%; }
  .rp-wl__mail { top: 32px; }
}

/* success: the spot on the list, in a white card where the form was */
.rp-wl__done { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 18px; padding: 20px 22px; border-radius: 18px; background: #ffffff; outline: none;
  box-shadow: 0 1px 2px rgba(28, 33, 48, 0.06), 0 16px 36px -18px rgba(28, 33, 48, 0.32); animation: rp-fade-up 0.7s var(--rp-ease-out) backwards; }
/* focus moves here after a sign-up so screen readers read it; it is not a control, so no ring */
.rp-wl__done:focus, .rp-wl__done:focus-visible { outline: none; }
.rp-wl__check { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--rp-accent); color: #ffffff; }
.rp-wl__check .rp-icon { width: 22px; height: 22px; stroke-width: 2.25; }
.rp-wl__done-txt { flex: 1 1 12rem; min-width: 0; }
.rp-wl__done-title { margin: 0; font: 500 20px/1.25 var(--rp-font); letter-spacing: -0.02em; color: var(--rp-ink); }
.rp-wl__done-sub { margin: 4px 0 0; font: 400 15px/1.4 var(--rp-font); color: var(--rp-ink-3); }
.rp-wl__pos { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin: 0; }
.rp-wl__pos b { font: 500 34px/1 var(--rp-font); letter-spacing: -0.03em; color: var(--rp-accent-ink); font-variant-numeric: tabular-nums; }
.rp-wl__count { margin-top: 18px; }
@media (max-width: 479px) {
  .rp-wl__pos { width: 100%; flex-direction: row; align-items: center; justify-content: space-between; padding-top: 14px; box-shadow: inset 0 1px 0 var(--rp-line); }
  .rp-wl__pos b { font-size: 28px; }
}
.rp-wl__count b { font-weight: 500; color: var(--rp-ink); }