/* Restrike site styles: tokens, base type, buttons, header, bands, hero base, statement, compare table, FAQ, footer.
   v4 LIGHT SKY (docs/SITE-V4.md top block, 15 Oct 2026 evening; wins over SITE-V3-STYLE.md): white page, the client's
   sky photos as-is, one swappable accent (sky blue for now). Type: ONE family, Host Grotesk (headings 500, body 400;
   numbers in the same face with tabular-nums). Glass: every card is .rs-glass (one fill, one blur, one radius, no lines).

   HOW TO USE THE SHARED PIECES (B, C, Art: consume these, do not restyle them in your own files)
   - Tokens (v4): --rs-bg / --rs-bg-2 (raised slab) / --rs-card / --rs-card-2; --rs-line (the only hairline);
     --rs-text / --rs-text-2 / --rs-text-3; --rs-accent / --rs-accent-hi / --rs-accent-ink / --rs-accent-soft (every
     accent use goes through these: never an accent hex anywhere else); --rs-up / --rs-down. The old names
     (--rs-ground, --rs-surface, --rs-ink*, --rs-brass*, --rs-gold, --rs-panel*, --rs-pink*, --rs-lilac, --rs-hot) are
     aliases of these until nothing uses them.
   - Grid (S3.1): --rs-cols (12 / 6 / 4), --rs-col-gap (24 / 20 / 16), --rs-card-pad, --rs-card-gap, --rs-sec (section
     top padding, 171 at 1440), --rs-gap-head (head -> body, 88 at 1440 / 48 at 390), --rs-gap-sub (16: strike head -> H2
     -> line). .rs-cols is the 12-col grid on the container; children take `grid-column: span N`. 3-up = span 4,
     4-up = span 3, 2-up = span 6. No 5-up rows.
   - Section head: the H2 alone (no kicker, no accent rule above it), left on the section's grid line.
   - Glass (GLASS RULE): --rs-glass / --rs-glass-strong / --rs-glass-row / --rs-glass-chip, --rs-blur, --rs-radius,
     --rs-radius-row; every card is .rs-glass (or listed in the shared glass rule). No shadow, border or hairline.
   - Ticket (S2): <div class="rs-ticket"> with the body first and the stub in <div class="rs-ticket__stub">; a plain glass
     card now (no notches, no perforation). Phones (< 600): the stub drops to the bottom.
   - Ink band (S5): in build.py ORDER, a tuple starting with "@ink" -> <div class="rs-ink" data-rs-band>. Inside it the
     ink tokens flip (--rs-ink = panel ink, --rs-raised / --rs-surface = panel card), so section CSS mostly just works;
     no line-art scenes inside. Cards on ink: .rs-panel-card.
   - Settlement clock (S3): any element with [data-rs-clock] gets "Fri 4:00 pm ET · 1d 16h" (or data-rs-clock="short":
     "1d 16h"), updated each minute from desk.json next_settlement; "Settling now" after the close.
   - Money type (S4): .rs-fig (big figure, Host Grotesk 500 tnum) + <span class="rs-unit">%</span> for the unit (0.6em,
     same colour); .rs-mono = tabular-nums only. Odometers (.rs-odo) keep separators and units on the digit baseline here; do not
     restyle .rs-odo in section files.
   - Hover (S6): .rs-press on a card = press-lift (fine pointer); .rs-ticket gets the tear; .rs-btn (brass) = foil;
     .rs-settle on a figure + class is-settled = the brass underline draw (site.js __sk.settle(el) sets it). */

@font-face { font-family: "Host Grotesk"; src: url(/_rs/fonts/host-grotesk-latin.woff2) format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Host Fallback"; src: local("Helvetica Neue"), local("Arial"); size-adjust: 100%; ascent-override: 101%; descent-override: 31%; line-gap-override: 0%; }

:root {
  color-scheme: light;
  /* v4 LIGHT SKY palette (docs/SITE-V4.md top block): white ground the sky photos fade into, pale-sky slab, one accent */
  --rs-bg: #ffffff;           /* page ground */
  --rs-bg-2: #eef5fc;         /* raised slab (pale sky, .rs-ink) */
  --rs-card: #ffffff;         /* cards (with --rs-shadow-card) */
  --rs-card-2: #f3f7fb;       /* rows inside cards, hover */
  --rs-text: #0b1726;         /* headings, figures */
  --rs-text-2: #3a4757;       /* body */
  --rs-text-3: #5d6b7c;       /* labels: 5.5:1 on white, 5.0:1 on bg-2 */
  /* ACCENT: change these 4 lines for the final logo colour (plus the 3 art palette lines in art-line/src) */
  --rs-accent: #1761f9;                    /* brand blue (logo gradient top): figures you earn, the strike line, focus, the primary button: 5.1:1 on white */
  --rs-accent-hi: #1452d6;                 /* hover */
  --rs-accent-ink: #ffffff;                /* text on an accent fill */
  --rs-accent-soft: rgba(23, 97, 249, 0.1); /* tints, chart fills */
  --rs-accent-bright: #4383f9;             /* decorative only (bars, lines), never text */
  --rs-up: #12804a;
  --rs-down: #c2364a;

  /* old names: aliases so every section renders dark while it is being moved (delete once nothing uses them) */
  --rs-ground: var(--rs-bg);
  --rs-surface: var(--rs-card);
  --rs-inset: var(--rs-card-2);
  --rs-paper: var(--rs-bg);
  --rs-raised: var(--rs-card);
  --rs-raised-2: var(--rs-card-2);
  --rs-ink: var(--rs-text);
  --rs-ink-2: var(--rs-text-2);
  --rs-ink-3: var(--rs-text-3);
  --rs-brass: var(--rs-accent);
  --rs-brass-mark: var(--rs-accent);
  --rs-brass-num: var(--rs-accent);
  --rs-brass-text: var(--rs-accent);
  --rs-brass-soft: var(--rs-accent-soft);
  --rs-gold: var(--rs-accent-hi);
  --rs-panel: var(--rs-bg-2);
  --rs-panel-2: var(--rs-card);
  --rs-panel-ink: var(--rs-text);
  --rs-panel-muted: var(--rs-text-3);
  --rs-panel-brass: var(--rs-accent);
  --rs-panel-line: var(--rs-line);
  --rs-pink: var(--rs-accent);
  --rs-pink-num: var(--rs-accent);
  --rs-pink-text: var(--rs-accent);
  --rs-lilac: var(--rs-accent-soft);
  --rs-hot: var(--rs-accent-hi);
  --rs-line: rgba(12, 24, 40, 0.08);   /* the only hairline */
  --rs-quiet: rgba(12, 24, 40, 0.05);
  --rs-quiet-hover: rgba(12, 24, 40, 0.09);

  /* one face (Host Grotesk) for everything */
  --rs-font: "Host Grotesk", "Host Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --rs-display: var(--rs-font);   /* one family: headings use the body face */
  --rs-mono: var(--rs-font);      /* numbers: same face, tabular-nums */
  --rs-hh: 52px;   /* header pill height */
  --rs-ht: 24px;   /* pill distance from the top edge (LEVERAGED pill; 16 on phones) */
  --rs-gutter: 20px;
  --rs-max: 72rem;                              /* content max: 1152 */
  --rs-cols: 4;
  --rs-col-gap: 16px;
  --rs-sec: clamp(96px, 7vw + 70px, 192px);    /* section top -> strike head (171 at 1440) */
  --rs-gap-head: clamp(48px, 4vw + 30.4px, 96px);  /* head -> body: 88 at 1440, 48 at 390 */
  --rs-gap-sub: 16px;                          /* strike head -> H2 -> line */
  --rs-card-pad: clamp(20px, 1vw + 14px, 32px);
  --rs-card-gap: clamp(16px, 1vw + 10px, 24px);
  --rs-r-xl: 20px;
  --rs-r-lg: 18px;
  --rs-r-md: 12px;
  --rs-shadow-card: none;   /* GLASS RULE: no card shadows */
  --rs-shadow-2: none;
  /* GLASS RULE (docs/SITE-V4.md top): one fill, one blur, one radius for every card; no shadow, border, outline or hairline */
  --rs-blur: 24px;
  --rs-glass: rgba(255, 255, 255, 0.42);
  --rs-glass-strong: rgba(255, 255, 255, 0.62);  /* only cards with body text over a busy photo */
  --rs-glass-row: rgba(255, 255, 255, 0.35);     /* rows / inputs / hover inside a glass card */
  --rs-glass-chip: rgba(255, 255, 255, 0.5);     /* chips and pills */
  --rs-radius: 24px;
  --rs-radius-row: 16px;
  --rs-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --rs-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --rs-ease-std: cubic-bezier(0.4, 0, 0.2, 1);
  --rs-lift: cubic-bezier(0.32, 0.72, 0, 1);   /* card hover lift */
}
@media (min-width: 768px) { :root { --rs-cols: 6; --rs-col-gap: 20px; } }
@media (min-width: 1024px) { :root { --rs-cols: 12; --rs-col-gap: 24px; } }
@media (min-width: 768px) { :root { --rs-gutter: 40px; } }
@media (min-width: 1024px) { :root { --rs-gutter: 48px; } }

html.rs { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--rs-ground); }
html.rs body {
  margin: 0; background: var(--rs-ground); color: var(--rs-ink);
  font-family: var(--rs-font); font-size: 16px; font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
.rs ::selection { background: var(--rs-accent); color: var(--rs-accent-ink); }
.rs section[id] { scroll-margin-top: max(0px, calc(env(safe-area-inset-top, 0px) + var(--rs-ht) + var(--rs-hh) + 24px - var(--rs-sec))); }
.rs #faq { scroll-margin-top: max(0px, calc(env(safe-area-inset-top, 0px) + var(--rs-ht) + var(--rs-hh) + 24px - var(--rs-sec) * 0.6)); }
.rs #how-it-works, .rs #build, .rs #vaults { scroll-margin-top: 0px; }

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

/* ---------- type ---------- */
/* labels: sentence case, plain (no uppercase letter-spaced eyebrows), one icon from the set */
.rs-label { margin: 0; font: 500 14px/1.2 var(--rs-font); color: var(--rs-ink-3); }
.rs-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--rs-ink-2); }
.rs-eyebrow .rs-icon { width: 18px; height: 18px; color: var(--rs-accent); }
.rs-h2 { margin: 0; font: 500 clamp(30px, 1.4vw + 20px, 44px)/1.12 var(--rs-display); letter-spacing: -0.015em; color: var(--rs-ink); text-wrap: balance; }
.rs-h3 { margin: 0; font: 500 20px/1.3 var(--rs-font); letter-spacing: -0.01em; color: var(--rs-ink); }
.rs-sub { margin: 18px 0 0; max-width: 62ch; font: 400 17px/1.55 var(--rs-font); color: var(--rs-text-2); text-wrap: pretty; }
.rs-card__line { margin: 10px 0 0; max-width: 62ch; font: 400 17px/1.55 var(--rs-font); color: var(--rs-text-2); text-wrap: pretty; }
.rs-head { max-width: 42rem; }
.rs-head--center { margin-inline: auto; text-align: center; }
.rs-head--center .rs-sub { margin-inline: auto; }

/* staggered reveal: items rise 36 px, 80 ms apart; site.js arms only what starts below the fold */

/* ---------- buttons ---------- */
/* calm (LEVERAGED): primary = near-black ink pill, white text; secondary (.rs-btn--ink, kept name) = glass pill.
   The accent stays a text colour on key figures, never a button fill. */
.rs-btn {
  --bg: #0b1726; --fg: #ffffff; --bg-hover: #26323f;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border-radius: 999px; box-sizing: border-box;
  background: var(--bg); color: var(--fg);
  font: 600 15px/1 var(--rs-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(--rs-ease-std), transform 0.25s var(--rs-ease-std), translate 0.4s var(--rs-ease-out);
}
.rs-btn .rs-icon { width: 18px; height: 18px; transition: transform 0.3s var(--rs-ease-out); }
.rs-btn--ink { --bg: var(--rs-glass-strong); --fg: var(--rs-text); --bg-hover: rgba(255, 255, 255, 0.8); -webkit-backdrop-filter: blur(var(--rs-blur)) saturate(1.2); backdrop-filter: blur(var(--rs-blur)) saturate(1.2); } /* secondary: glass */
.rs-btn--lg { min-height: 52px; padding: 0 26px; font-size: 16px; border-radius: 999px; }
@media (hover: hover) {
  .rs-btn:hover { background: var(--bg-hover); transform: scale(0.98); }
  .rs-btn:hover .rs-icon { transform: translate(2px, -2px); }
  .rs-btn:hover .rs-icon--arrow-right { transform: translateX(3px); }
}
.rs-btn:active { transform: scale(0.97); transition-duration: 0.08s; }

/* ---------- header: LEVERAGED's floating pill, copied 1:1 (client 17 Oct; lendshare/site-v2/src/site.css .lev-bar).
   Centred, as wide as its content, fixed 24 px from the top (16 on phones), 52 px tall, radius 12, a pale glass fill
   (243 244 246 / .72, blur 24) at all times, no border, no shadow. Brand left (min 128 px), links 15/500 at .68 ink
   -> ink + a faint fill on hover / current page, "Open app" = the accent button (44 px, radius 10). Under 1024 px the
   pill spans the screen (24 px side gaps, 16 on phones), links move to the menu: a white card under the pill. */
.rs-header {
  --rs-bar-bg: rgba(243, 244, 246, 0.72);
  --rs-bar-link: rgba(11, 23, 38, 0.68);
  --rs-bar-fill: rgba(11, 23, 38, 0.07);
  position: fixed; z-index: 60; top: calc(env(safe-area-inset-top, 0px) + var(--rs-ht)); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 48px); pointer-events: none;
}
.rs-header__scrim { position: fixed; inset: 0; z-index: -2; background: transparent; pointer-events: none; }
.rs-header.is-open .rs-header__scrim { pointer-events: auto; }
.rs-header__float { position: relative; pointer-events: auto; border-radius: 12px; color: var(--rs-text); }
.rs-header__float::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: var(--rs-bar-bg); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
}
.rs-header__bar { height: var(--rs-hh); box-sizing: border-box; display: flex; align-items: center; padding: 4px 4px 4px 20px; }
.rs-logo { display: inline-flex; align-items: center; min-width: 128px; min-height: 44px; color: var(--rs-text); border-radius: 8px; -webkit-tap-highlight-color: transparent; }
.rs-logo__svg { height: 28px; width: auto; display: block; overflow: visible; }
.rs-logo__mark { transition: transform 0.7s var(--rs-ease-out); transform-box: fill-box; transform-origin: center; }
@media (hover: hover) { .rs-logo:hover .rs-logo__mark { transform: translateY(-2px); } }
.rs-nav { display: none; align-items: center; gap: 6px; margin-left: 24px; }
.rs-nav__link {
  display: inline-flex; align-items: center; padding: 8px 12px; border-radius: 8px; white-space: nowrap;
  color: var(--rs-bar-link); font: 500 15px/22px var(--rs-font); text-decoration: none;
  transition: color 0.25s ease, background-color 0.25s ease;
}
.rs-header .rs-nav__link:hover, .rs-header .rs-nav__link:focus-visible,
.rs-header .rs-nav__link.is-active, .rs-header .rs-nav__link[aria-current="page"] { color: var(--rs-text); background: var(--rs-bar-fill); }
.rs-header__end { display: flex; align-items: center; margin-left: 16px; }
.rs-header .rs-header__cta {
  height: 44px; min-height: 44px; padding: 0 20px; border: 0; border-radius: 10px; font: 500 15px/1 var(--rs-font);
  background: var(--rs-accent); color: var(--rs-accent-ink); box-shadow: none;
  transition: background-color 0.2s ease, transform 0.15s ease;
}
@media (hover: hover) { .rs-header .rs-header__cta:hover { background: var(--rs-accent-hi); } }
.rs-header .rs-header__cta:active { transform: translateY(1px); }
.rs-header__cta .rs-icon { display: none; }
/* X: footer only since v4; before the handle exists it says "soon" and links nowhere */
.rs-x { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; height: 44px; padding: 0 6px; box-sizing: border-box; border-radius: 10px; color: var(--rs-text-2); text-decoration: none; transition: color 0.2s; }
.rs-x svg { width: 17px; height: 17px; fill: currentColor; }
.rs-x.is-soon { color: var(--rs-text-3); cursor: default; }
.rs-x__soon { font: 500 14px/1 var(--rs-font); }
@media (hover: hover) { a.rs-x:hover { color: var(--rs-text); } }
.rs-menu-btn {
  width: 44px; height: 44px; margin-left: 4px; border: 0; padding: 0; border-radius: 8px; background: transparent; cursor: pointer; color: var(--rs-text);
  display: grid; place-items: center; -webkit-tap-highlight-color: transparent;
}
.rs-menu-btn__bar { grid-area: 1 / 1; width: 20px; height: 2px; border-radius: 1px; background: currentColor; transition: transform 0.3s ease-in-out; }
.rs-menu-btn__bar:first-child { transform: translateY(-3px); }
.rs-menu-btn__bar:last-child { transform: translateY(3px); }
.rs-menu-btn[aria-expanded="true"] .rs-menu-btn__bar:first-child { transform: rotate(45deg); }
.rs-menu-btn[aria-expanded="true"] .rs-menu-btn__bar:last-child { transform: rotate(-45deg); }
@media (min-width: 1024px) {
  .rs-nav { display: flex; }
  .rs-menu-btn, .rs-sheet { display: none; }
}
@media (max-width: 1023px) {
  .rs-header { left: 24px; right: 24px; transform: none; width: auto; max-width: none; }
  .rs-header__bar { padding: 4px; }
  .rs-logo { min-width: 0; padding: 0 10px; }
  .rs-header__end { margin-left: auto; }
}
@media (max-width: 479px) {
  :root { --rs-ht: 16px; }
  .rs-header { left: 16px; right: 16px; }
  .rs-logo__svg { height: 24px; }
}
/* the menu: a white card 6 px under the pill, links centred 17/500 */
.rs-sheet {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); pointer-events: auto; padding: 14px 20px; border-radius: 12px; box-sizing: border-box;
  background: #ffffff; box-shadow: 0 1px 2px rgba(11, 23, 38, 0.05), 0 28px 60px -30px rgba(11, 23, 38, 0.34);
  opacity: 0; transform: translateY(-6px); transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
}
.rs-sheet.is-open { opacity: 1; transform: none; }
.rs-sheet[hidden] { display: none; }
.rs-sheet__inner { display: flex; flex-direction: column; gap: 4px; }
.rs-sheet__link {
  display: flex; align-items: center; justify-content: center; padding: 9px 0; border-radius: 8px;
  color: var(--rs-text); text-decoration: none; font: 500 17px/1.3 var(--rs-font);
}
@media (hover: hover) { .rs-sheet__link:hover { background: var(--rs-bar-fill); } }
.rs-sheet__link .rs-icon { display: none; }
.rs-sheet__link[aria-current="page"] { color: var(--rs-accent); }
.rs-sheet__cta { display: none; }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .rs-header__float::before { background: rgba(243, 244, 246, 0.96); }
}

/* ---------- paper bands (v4): plain page ground now; kept as a wrapper so the band markup and --e still work ---------- */
.rs-paper {
  --rs-band-r: 24px; --rs-band-in: clamp(10px, 4vw, 72px);
  position: relative; background: var(--rs-ground);
  clip-path: inset(0 calc((1 - var(--e, 1)) * var(--rs-band-in)) round var(--rs-band-r));
}
.rs-paper > section { background: var(--rs-ground); }

/* ---------- hero: the brand gradient, the headline left, the line-art composition right (phones: copy on top,
   the pieces below it). The pieces drift, the S turns, everything leans toward the pointer; leaving, the art tilts
   back and recedes (Repay). Reduced motion / no GPU: the poster, which is the scene's first frame. ---------- */
.rs-hero { position: relative; }
.rs-hero__stage { position: relative; min-height: max(112svh, 640px); box-sizing: border-box; overflow: hidden; isolation: isolate;
  padding-top: calc(env(safe-area-inset-top, 0px) + var(--rs-ht) + var(--rs-hh) + clamp(28px, 5vh, 56px)); }
/* the ground: the client's sky photo (as-is), cover-fit and zoomed 1.08x, the fog side behind the copy.
   site.js moves .rs-hero__photo (an eased pointer shift <= 12 px, 0.3x as the hero leaves) and draws a slow water
   swell over the same picture while the page scrolls (initWater, colours untouched). Reduced motion: the still photo. */
.rs-hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--rs-bg); }
.rs-hero__photo { position: absolute; inset: 0; transform: scale(1.08); transform-origin: 50% 50%; will-change: transform; }
.rs-hero__photo img, .rs-water { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rs-hero__photo img { object-fit: cover; object-position: 50% 100%; }
.rs-hero.is-wide .rs-hero__photo img { object-position: 40% 100%; }
@media (max-aspect-ratio: 3/5) { .rs-hero__photo img { object-position: 50% 100%; } } /* phones get the tall crop (sky-hero-tall-*) */
/* a very slow cloud drift (translate only; reduced motion: still) */
@media (prefers-reduced-motion: no-preference) { .rs-hero__photo img, .rs-story__bg img { animation: rs-drift 90s ease-in-out infinite alternate; } }
@keyframes rs-drift { from { translate: -1.2% 0; } to { translate: 1.2% 0; } }
.rs-water { opacity: 0; transition: opacity 0.6s var(--rs-ease-out); }
.rs-water.is-on { opacity: 1; }
/* the sky photo's own white bottom edge meets the white page (no added fade strip) */
/* the dark wash on the copy side (.rs-hero__fog) and the photo grade: css/film.css */
.rs-hero__copy { position: relative; z-index: 1; padding-inline: var(--rs-gutter); }
.rs-h1 { margin: 0; font: 500 clamp(40px, 3.2vw + 18px, 64px)/1.06 var(--rs-display); letter-spacing: -0.015em; text-wrap: balance; color: var(--rs-ink); }
.rs-line { display: inline-block; overflow: clip; padding: 0.04em 0.06em 0.16em; margin: 0 -0.06em -0.14em; vertical-align: top; }
.rs-line > span { display: inline-block; animation: rs-rise 1.1s var(--rs-ease-out) backwards; animation-delay: var(--d, 0ms); }
.rs-h1 .rs-line { display: block; }
.rs-lede { margin: clamp(18px, 2.4vh, 28px) 0 0; max-width: 27rem; font: 400 18px/1.5 var(--rs-font); color: var(--rs-text-2); text-wrap: pretty; }
.rs-in { animation: rs-fade-up 0.9s var(--rs-ease-out) backwards; animation-delay: var(--d, 0ms); }
.rs-hero__live { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; font: 500 15px/1.3 var(--rs-font); color: var(--rs-ink-2); }
.rs-hero__live i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--rs-ink); }
/* the art frame, the poster / canvas swap and the wide layout: css/film.css */
.rs-hero.is-wide .rs-hero__stage { min-height: max(100svh, 620px); padding-top: 0; }
/* the three hero layouts (?hero=a|b|c): css/film.css */
/* contract-address chip (unused on Restrike: no token) */
.rs-ca { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; box-sizing: border-box; margin-top: 18px; padding: 4px 4px 4px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.rs-ca__label { flex: none; font: 500 14px/1 var(--rs-font); color: var(--rs-ink); }
.rs-ca__addr { min-width: 0; font: 400 14px/1.3 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--rs-ink-2); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-ca__addr.is-empty { font-family: var(--rs-font); }
a.rs-ca__addr:hover { color: var(--rs-ink); }
.rs-ca__short { display: none; }
.rs-ca__copy { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 999px; cursor: pointer; background: var(--rs-quiet); color: var(--rs-ink); font: 500 14px/1 var(--rs-font); transition: background-color 0.16s var(--rs-ease-std); }
.rs-ca__copy:hover:not(:disabled) { background: var(--rs-quiet-hover); }
.rs-ca__copy:disabled { cursor: default; color: var(--rs-ink-2); }
.rs-ca__copy .rs-icon { width: 14px; height: 14px; }
.rs-ca--pink { background: var(--rs-accent); }
.rs-ca--pink .rs-ca__label, .rs-ca--pink .rs-ca__addr, .rs-ca--pink a.rs-ca__addr:hover { color: var(--rs-accent-ink); }
.rs-ca--pink .rs-ca__copy { background: rgba(255, 255, 255, 0.92); color: var(--rs-accent); }
.rs-hero .rs-ca { margin-top: 16px; }
@media (max-width: 479px) { .rs-ca__full { display: none; } .rs-ca__short { display: inline; } }

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

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

/* ---------- statement (v4): the sky band (cloud-band-split, as-is) in a frame that is inset + rounded while it enters
   and leaves and full-bleed when centred (sections.js initFrames); its white bottom edge meets the white page. One big
   sentence in a 760 px centred column fills word by word as it crosses the screen (site.js initStory). No pin. ---------- */
.rs-story { position: relative; isolation: isolate; min-height: 100svh; box-sizing: border-box; display: flex; align-items: center; padding-block: clamp(112px, 9vw, 200px); }
.rs-story__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--rs-bg); }
.rs-story__bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.rs-story__in { max-width: calc(760px + 2 * var(--rs-gutter)); }
.rs-statement { margin: 0 auto; text-align: center; font: 500 clamp(28px, 1.4vw + 20px, 44px)/1.18 var(--rs-display); letter-spacing: -0.015em; color: var(--rs-text); text-wrap: balance; }
.rs-statement em { font-style: normal; }
/* unfilled words: #56677c (large text, >= 3:1 on the sky measured); filled: --rs-text */
.rs-fw { color: color-mix(in srgb, var(--rs-text) calc(var(--f, 1) * 100%), #56677c); }


/* small pills (the week cards, the vault cards) */
.rs-side { flex: none; display: inline-grid; place-items: center; min-width: 40px; height: 24px; padding: 0 6px; box-sizing: border-box; border-radius: 7px; font: 500 14px/1 var(--rs-font); }
.rs-side--yes { background: var(--rs-accent); color: var(--rs-accent-ink); }
.rs-side--no { background: var(--rs-text); color: #ffffff; }

/* ---------- compare (paper): Repay's table, the Restrike column tinted; the checks draw in ---------- */
.rs-compare { padding-block: var(--rs-sec) calc(var(--rs-sec) * 0.6); }
.rs-cmp-wrap { max-width: 60rem; margin: clamp(40px, 4vw, 64px) auto 0; }
.rs-cmp { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.rs-cmp th, .rs-cmp td { padding: 22px 20px; text-align: left; vertical-align: middle; }
.rs-cmp thead th { font: 500 15px/1.2 var(--rs-font); color: var(--rs-ink-3); padding-block: 18px; }
.rs-cmp thead .rs-cmp__us { color: var(--rs-ink); font-weight: 500; border-radius: var(--rs-r-lg) var(--rs-r-lg) 0 0; }
.rs-cmp tbody th { font: 400 16px/1.3 var(--rs-font); color: var(--rs-ink-3); width: 26%; }
.rs-cmp td { font: 500 clamp(18px, 0.6vw + 14px, 22px)/1.3 var(--rs-font); letter-spacing: -0.01em; color: var(--rs-ink-3); }
.rs-cmp td .rs-icon { display: inline-block; vertical-align: -3px; width: 22px; height: 22px; margin-right: 12px; }
.rs-cmp .rs-cmp__us { background: var(--rs-accent-soft); color: var(--rs-ink); }
.rs-cmp tbody tr:last-child .rs-cmp__us { border-radius: 0 0 var(--rs-r-lg) var(--rs-r-lg); }
.rs-cmp td.rs-cmp__us .rs-icon { color: var(--rs-pink-text); }
.rs-cmp td.rs-cmp__us .rs-icon path { stroke-dasharray: 24; stroke-dashoffset: calc((1 - var(--d, 1)) * 24px); } /* --d: sections.js, the row's scroll */
@media (max-width: 559px) { .rs-cmp th, .rs-cmp td { padding: 16px 10px; } .rs-cmp tbody th { width: 30%; font-size: 14px; } .rs-cmp td .rs-icon { display: block; margin: 0 0 8px; } .rs-cmp td { font-size: 17px; } }

/* ---------- FAQ (paper): Repay's split, title and the rules left, one answer open at a time ---------- */
.rs-faq { padding-block: calc(var(--rs-sec) * 0.6) var(--rs-sec); }
.rs-qa { border-radius: var(--rs-radius); }
.rs-qa h3 { margin: 0; font: inherit; }
.rs-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: 500 19px/1.3 var(--rs-font); letter-spacing: -0.01em; color: var(--rs-ink); border-radius: var(--rs-r-lg); -webkit-tap-highlight-color: transparent; }
.rs-qa__q .rs-icon { flex: none; width: 20px; height: 20px; color: var(--rs-ink); transition: transform 0.4s var(--rs-ease-out); }
.rs-qa.is-open .rs-qa__q .rs-icon { transform: rotate(180deg); }
.rs-qa__a p { margin: 0; padding: 0 24px 24px; font: 400 17px/1.55 var(--rs-font); color: var(--rs-text-2); max-width: 62ch; text-wrap: pretty; }

/* ---------- footer (v4): a calm CTA (centred headline, Open the app, the settlement clock) on the sky "gateway", one
   row of links, the legal line with "Solana devnet" and X, then the wordmark over the sea of clouds ---------- */
.rs-footer { position: relative; overflow: hidden; background: var(--rs-bg); }
.rs-close { position: relative; min-height: 80vh; min-height: 80svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; isolation: isolate; background: var(--rs-bg); }
.rs-close__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.rs-close__bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.rs-close__art { display: none; }
.rs-close__body { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; }
.rs-close__title { margin: 0; max-width: 11em; font: 500 clamp(36px, 2.4vw + 22px, 56px)/1.08 var(--rs-display); letter-spacing: -0.015em; color: var(--rs-text); text-wrap: balance; }
.rs-close__sweep { display: block; }
.rs-close__sweep .rs-ch { color: color-mix(in srgb, var(--rs-text) calc(var(--c, 1) * 100%), #56677c); }
.rs-close__body .rs-btn { margin-top: 40px; }
.rs-foot__bar { display: flex; flex-direction: column; gap: 20px; padding-block: clamp(40px, 5vw, 72px) 0; }
.rs-foot__nav { display: flex; flex-wrap: wrap; gap: 0 clamp(20px, 2.4vw, 40px); }
.rs-foot__link { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--rs-text-2); font: 500 16px/1 var(--rs-font); text-decoration: none; transition: color 0.2s; }
@media (hover: hover) { .rs-foot__link:hover { color: var(--rs-text); } }
.rs-footer__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-top: 16px; font: 400 14px/1.4 var(--rs-font); color: var(--rs-text-3); }
/* the giant wordmark: the lockup's eight letters, flush with the gutters, sliding up in turn (Repay) */
.rs-foot__word { margin-top: clamp(32px, 4vw, 64px); line-height: 0; overflow: hidden; }
.rs-foot__word svg { display: block; width: 100%; height: auto; fill: var(--rs-text); overflow: hidden; }
.rs-foot__l { transform-box: fill-box; transition: transform 0.8s var(--rs-ease-out); transition-delay: calc(var(--i) * 0.07s); }
.rs-foot__word.is-armed:not(.is-in) .rs-foot__l { transform: translateY(calc(100% + 2px)); }
/* the footer bottom (Repay's): Restrike in glass letters standing flush on the page's bottom edge, in front of the client's
   pink lake (cut at the shoreline, white at its top edge so the links above run into it: scripts/photos.py). The glass:
   a frosted, lifted copy of the lake (.rs-foot__glass, pixel for pixel over it, lagging the page a little: site.js
   initLake) cut to the letters by img/restrike-word.svg, under the svg's sheen and 1 px edge. */
.rs-foot__lake { position: relative; margin-top: clamp(24px, 3vw, 48px); aspect-ratio: 2400 / 1000; }
.rs-foot__photo { position: absolute; inset: 0; overflow: hidden; }
.rs-foot__photo img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.rs-foot__lake .rs-foot__word { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; margin: 0; padding-inline: var(--rs-gutter); }
.rs-foot__lake .rs-foot__word svg { fill: url(#rs-sheen); }
.rs-foot__lake .rs-foot__l { stroke: rgba(255, 255, 255, 0.85); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.rs-foot__glass { position: absolute; z-index: 1; inset: 0; overflow: hidden; pointer-events: none; transition: opacity 1.1s var(--rs-ease-out) 0.4s;
  -webkit-mask: url(/_rs/img/restrike-word.svg) center bottom / calc(100% - 2 * var(--rs-gutter)) auto no-repeat;
  mask: url(/_rs/img/restrike-word.svg) center bottom / calc(100% - 2 * var(--rs-gutter)) auto no-repeat; }
.rs-foot__glass img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; will-change: transform; }
.rs-foot__word.is-armed:not(.is-in) ~ .rs-foot__glass { opacity: 0; transition: none; }
@supports not ((mask-size: auto) or (-webkit-mask-size: auto)) { .rs-foot__glass { display: none; } .rs-foot__lake .rs-foot__word svg { fill: rgba(255, 255, 255, 0.4); } }
/* phones: a taller cut of the lake (its full height, the right of it: the treeline behind the letters) */
@media (max-width: 767px) { .rs-foot__lake { aspect-ratio: 3 / 2; } .rs-foot__photo img, .rs-foot__glass img { object-position: 78% 100%; } }

/* ---------- headline mask reveal: every word rises out of its own clip box once the heading is in view ---------- */
.rs-w { display: inline-block; overflow: clip; vertical-align: top; padding: 0 0.1em 0.14em; margin: 0 -0.1em -0.14em; }
.rs-w > span { display: inline-block; } /* raised with the scroll by sections.js */

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

/* ---------- smooth scrolling (Lenis, fine pointers only) ---------- */
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.rs { scroll-behavior: auto; }
  .rs *, .rs *::before, .rs *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; }
  .rs-paper { clip-path: inset(0 round var(--rs-band-r)); }
  .rs-w > span { transform: none !important; }
  .rs-btn { translate: none; }
}

/* ---------- this week's chain (chain.html, top.js initChain) ---------- */
.rs-chain { padding-block: var(--rs-sec) calc(var(--rs-sec) * 0.45); } /* How it works opens with its own top space */
.rs-chain .rs-head { margin-bottom: var(--rs-gap-head); }
.rs-chain__box { --g: 1; }
.rs-chain__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 24px; }
.rs-chain__picks { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 767px) { .rs-chain__top { flex-wrap: nowrap; flex-direction: column; align-items: stretch; } .rs-chain__picks { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--rs-gutter)); padding-inline: var(--rs-gutter); scroll-padding-inline: var(--rs-gutter); scroll-snap-type: x proximity; } .rs-chain__picks::-webkit-scrollbar { display: none; } .rs-chain__pick { flex: none; scroll-snap-align: start; } .rs-chain__side { align-self: flex-start; } }
.rs-chain__pick, .rs-chain__sd { appearance: none; border: 0; cursor: pointer; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--rs-quiet); color: var(--rs-ink-2); font: 500 15px/1 var(--rs-font); transition: background-color 0.25s var(--rs-ease-std), color 0.25s var(--rs-ease-std); }
.rs-chain__pick:hover, .rs-chain__sd:hover { background: var(--rs-quiet-hover); }
.rs-chain__pick[aria-pressed="true"], .rs-chain__sd[aria-pressed="true"] { background: var(--rs-text); color: var(--rs-bg); }
.rs-chain__pick:focus-visible, .rs-chain__sd:focus-visible { outline: 2px solid var(--rs-pink); outline-offset: 2px; }
.rs-chain__side { display: none; gap: 6px; }
.rs-chain__card { --perf: calc(100% - 76px); position: relative; padding: clamp(16px, 2.4vw, 36px) clamp(16px, 3vw, 48px) 0; border-radius: var(--rs-radius); transition: translate 0.7s var(--rs-lift); }
@media (hover: hover) { .rs-chain__card:hover { translate: 0 -4px; } }
/* open | call | strike | put | open: the strike column gets the most air, prices are the loudest numbers */
.rs-chain__head, .rs-chain__row { display: grid; grid-template-columns: 1fr 1fr minmax(8rem, 1.5fr) 1fr 1fr; align-items: center; }
.rs-chain__head { margin: 0 0 6px; padding: 0 12px; font: 500 14px/1 var(--rs-font); color: var(--rs-ink-3); }
.rs-chain__head > span, .rs-chain__row > span { padding-inline: 12px; }
.rs-chain__c { text-align: left; } .rs-chain__p { text-align: right; }
.rs-chain__head > span:nth-child(3), .rs-chain__k { text-align: center; }
.rs-chain__rows { position: relative; margin: 0; padding: 0; list-style: none; }
.rs-chain__row { position: relative; min-height: 54px; padding: 0 12px; border-radius: 12px; font: 400 16px/1.2 var(--rs-font); font-variant-numeric: tabular-nums; }
.rs-chain__row:nth-child(odd) { background: var(--rs-glass-row); }
.rs-chain__row > span { position: relative; padding-block: 15px; }
.rs-chain__px { font-weight: 500; color: var(--rs-ink); }
.rs-chain__px.is-itm { background: linear-gradient(var(--rs-accent-soft), var(--rs-accent-soft)) center / 100% 64% no-repeat; border-radius: 8px; color: var(--rs-brass-text); }
.rs-chain__k { font-weight: 500; color: var(--rs-ink); }
.rs-chain__oi { color: var(--rs-ink-3); font-size: 14px; }
.rs-chain__oi b { position: relative; font-weight: 400; }
/* open interest: a quiet 2 px rule under the number, grown with the scroll (--g) */
.rs-chain__oi i { position: absolute; bottom: 10px; left: 12px; right: 12px; height: 2px; border-radius: 1px; background: var(--rs-line); transform-origin: left center; transform: scaleX(calc(var(--oi) * var(--g))); transition: transform 0.6s var(--rs-ease-out); }
.rs-chain__oi.rs-chain__p i { transform-origin: right center; }
.rs-chain__spot { position: absolute; left: 0; right: 0; top: 0; height: 0; border-top: 2px solid var(--rs-brass-mark); pointer-events: none; transition: transform 0.8s var(--rs-ease-out); z-index: 1; }
.rs-chain__spot span { position: absolute; left: 50%; top: 0; translate: -50% -50%; padding: 5px 10px; border-radius: 999px; background: var(--rs-accent); color: var(--rs-accent-ink); font: 500 14px/14px var(--rs-font); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rs-chain__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; height: 76px; box-sizing: border-box; margin: 20px calc(-1 * clamp(16px, 3vw, 48px)) 0; padding: 0 calc(clamp(16px, 3vw, 48px) + 12px); font-size: 15px; color: var(--rs-ink-3); }
@media (max-width: 599px) { .rs-chain__foot { height: 104px; align-content: center; } }
.rs-chain__net { margin-right: auto; }
.rs-chain__foot .rs-link { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 719px) {
  .rs-chain__side { display: flex; }
  .rs-chain__head, .rs-chain__row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); }
  .rs-chain__head > span, .rs-chain__row > span { padding-inline: 8px; }
  .rs-chain__head > span:nth-child(3), .rs-chain__row > .rs-chain__k { order: -1; text-align: left; }
  .rs-chain__px, .rs-chain__head > span:nth-child(2), .rs-chain__head > span:nth-child(4) { order: 0; text-align: right; }
  .rs-chain__oi, .rs-chain__head > span:nth-child(1), .rs-chain__head > span:nth-child(5) { order: 1; text-align: right; }
  .rs-chain__oi.rs-chain__c i { transform-origin: right center; }
  .rs-chain__box:not(.is-puts) .rs-chain__p, .rs-chain__box.is-puts .rs-chain__c { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rs-chain__card, .rs-chain__oi i, .rs-chain__spot { transition: none !important; }
}

/* odometer (top.js, sections.js, charts.js all build the same markup): every cell is one strip step tall (1.1em) and
   the row aligns on the baseline, so "172.50" keeps its point on the digits' baseline (it used to sit low and read as
   a comma). Separators and units are spans / <small> with the same line box. */
.rs .rs-odo { align-items: baseline; }
.rs .rs-odo__d { height: 1.1em; line-height: 1.1em; vertical-align: baseline; }
.rs .rs-odo > span:not(.rs-odo__d):not(.rs-sr), .rs .rs-odo > small { line-height: 1.1em; }
.rs .rs-odo > small { font-size: 0.6em; margin-left: 0.04em; color: inherit; font-family: var(--rs-font); font-weight: 500; letter-spacing: 0; }

/* ================= shared pieces (SITE-V3-STYLE.md S1-S6, S3.1); see "HOW TO USE" at the top ================= */

/* grid: 12 / 6 / 4 columns on the container */
.rs-cols { display: grid; grid-template-columns: repeat(var(--rs-cols), minmax(0, 1fr)); column-gap: var(--rs-col-gap); row-gap: var(--rs-card-gap); }

/* GLASS RULE: the one shared glass surface. Every card on every page is listed here (or carries .rs-glass); html.rs
   raises it over the section files, so a card's own rule only sets padding / layout, never fill, blur or lines. */
html.rs .rs-glass,
html.rs .rs-calls, html.rs .rs-ticket, html.rs .rs-chain__card, html.rs .rs-qa,
html.rs .rs-cmp-wrap, html.rs .rs-rule, html.rs .rs-how__step, html.rs .rs-wcard, html.rs .rs-gauge, html.rs .rs-rec, html.rs .rs-pay__panel,
html.rs .rs-panel-card, html.rs .rs-live__slab, html.rs .rs-feat:not(.rs-feat--later), html.rs .rs-wk__chart {
  background: var(--rs-glass); -webkit-backdrop-filter: blur(var(--rs-blur)) saturate(1.15); backdrop-filter: blur(var(--rs-blur)) saturate(1.15);
  border-radius: var(--rs-radius); box-shadow: none; border: 0; outline: 0; filter: none; -webkit-mask: none; mask: none;
}
html.rs .rs-glass--strong { background: var(--rs-glass-strong); }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { html.rs .rs-glass { background: var(--rs-glass-strong); } }

/* type: money */
.rs-mono { font-variant-numeric: tabular-nums; } /* numbers: same face, tabular */
.rs-fig { font: 500 clamp(56px, 4vw + 36px, 96px)/1 var(--rs-display); letter-spacing: -0.015em; font-variant-numeric: tabular-nums; color: var(--rs-ink); }
.rs-unit { font: inherit; font-size: 0.6em; letter-spacing: 0; color: inherit; vertical-align: baseline; margin-left: 0.08em; }
.rs-earn { color: var(--rs-brass-text); }

/* S2 ticket (GLASS RULE): a glass card, body then the stub; no notches, no perforation, no shadow */
.rs-ticket { --stub: 28%; position: relative; display: flex; border-radius: var(--rs-radius); contain: paint; }
.rs-ticket > :first-child { flex: 1 1 auto; min-width: 0; padding: var(--rs-card-pad); }
.rs-ticket__stub { flex: none; width: var(--stub); box-sizing: border-box; padding: var(--rs-card-pad); display: flex; flex-direction: column; justify-content: center; font-variant-numeric: tabular-nums; color: var(--rs-brass-text); transition: background-color 0.6s ease-out; }
@media (hover: hover) and (pointer: fine) {
  .rs-ticket:hover .rs-ticket__stub { background: color-mix(in srgb, var(--rs-brass-soft) 45%, transparent); }
}
@media (max-width: 599px) {
  /* stub at the bottom */
  .rs-ticket { --stub: 0px; --sb: 64px; flex-direction: column; }
  .rs-ticket__stub { width: auto; min-height: var(--sb); flex-direction: row; align-items: center; justify-content: space-between; padding-block: 0; }
}

/* S5 raised band (v4): .rs-ink is the pale-sky --rs-bg-2 slab, inset 12 px (8 < 600),
   radius 32 (24 < 600); its sides draw in like the paper band (--e). Cards inside sit on --rs-card as everywhere. */
.rs-ink {
  --rs-band-r: 32px; --rs-band-in: clamp(10px, 4vw, 72px);
  --rs-ground: var(--rs-bg-2);
  --rs-ink-in: 12px;
  position: relative; margin-inline: var(--rs-ink-in); background: var(--rs-bg-2); color: var(--rs-text);
  clip-path: inset(0 calc((1 - var(--e, 1)) * var(--rs-band-in)) round var(--rs-band-r));
}
.rs-ink > section { background: transparent; }
/* the band is inset, so its containers give the inset back: content stays on the page grid (144 / 20) */
.rs-ink .rs-wrap { max-width: calc(var(--rs-max) + 2 * (var(--rs-gutter) - var(--rs-ink-in))); padding-inline: calc(var(--rs-gutter) - var(--rs-ink-in)); }
.rs-panel-card { border-radius: var(--rs-radius); }
@media (max-width: 599px) { .rs-ink { --rs-band-r: 24px; --rs-ink-in: 8px; } }
@media (prefers-reduced-motion: reduce) { .rs-ink { clip-path: inset(0 round var(--rs-band-r)); } }

/* S3 settlement clock (header pill >= 1180 px, footer line, live figure) */
.rs-clock { display: none; align-items: center; gap: 8px; font: 400 14px/1 var(--rs-font); font-variant-numeric: tabular-nums; color: var(--rs-ink-3); white-space: nowrap; }
.rs-clock__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--rs-accent); animation: rs-breathe 2.4s ease-in-out infinite; }
@keyframes rs-breathe { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
.rs-close__clock { display: inline-flex; margin-top: 20px; }
@media (prefers-reduced-motion: reduce) { .rs-clock__dot { animation: none; } }

/* S6 press-lift, foil button, settle underline */
@media (hover: hover) and (pointer: fine) {
  .rs-press { transition: translate 0.4s var(--rs-lift); }
  .rs-press:hover { translate: 0 -4px; transition-duration: 0.7s; }
}
.rs-settle { position: relative; }
.rs-settle::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.08em; height: 1.5px; background: var(--rs-brass-mark); transform-origin: 0 50%; scale: 0 1; opacity: 1; }
.rs-settle.is-settled::after { animation: rs-settle 1.1s ease-out forwards; }
@keyframes rs-settle { 0% { scale: 0 1; opacity: 1; } 45% { scale: 1 1; opacity: 1; } 100% { scale: 1 1; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .rs-settle.is-settled::after { animation: none; }
  .rs-press, .rs-ticket__stub { transition: none !important; }
}

/* chain cells are odometers (inline-flex), so their alignment is the flex row's, not text-align */
.rs-chain__row > .rs-odo { justify-content: flex-start; }
.rs-chain__row > .rs-chain__k.rs-odo { justify-content: center; }
.rs-chain__row > .rs-chain__p.rs-odo { justify-content: flex-end; }
@media (max-width: 719px) { .rs-chain__row > .rs-chain__k.rs-odo { justify-content: flex-start; } .rs-chain__row > .rs-chain__px.rs-odo, .rs-chain__row > .rs-chain__oi.rs-odo { justify-content: flex-end; } }

/* ---------- page head (sub-pages, SITE-V4 §4 + light-sky override): an airy sky block. The photo fills it, cropped
   to its white bottom edge so it meets the page with no seam; H1 + line + button sit on the photo's empty sky side.
   No kicker, no pin. Short (<= 72vh) and the first section starts close under it. ---------- */
.rs-ph { position: relative; isolation: isolate; overflow: hidden; min-height: min(68svh, 680px); display: flex; align-items: center; box-sizing: border-box;
  padding-block: calc(env(safe-area-inset-top, 0px) + var(--rs-ht) + var(--rs-hh) + clamp(24px, 4svh, 48px)) clamp(56px, 8svh, 96px); }
.rs-ph__photo { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.rs-ph__photo picture, .rs-ph__photo img { display: block; width: 100%; height: 100%; }
.rs-ph__photo img { object-fit: cover; object-position: var(--rs-ph-pos, 50% 100%); }
.rs-ph__in { display: grid; grid-template-columns: repeat(var(--rs-cols), minmax(0, 1fr)); column-gap: var(--rs-col-gap); align-items: center; }
.rs-ph__copy { grid-column: 1 / -1; min-width: 0; }
.rs-ph__h1 { margin: 0; font: 500 clamp(40px, 3.2vw + 18px, 64px)/1.06 var(--rs-display); letter-spacing: -0.015em; color: var(--rs-text); text-wrap: balance; }
.rs-ph__line { margin: clamp(20px, 2.4svh, 28px) 0 0; max-width: 62ch; font: 400 18px/1.5 var(--rs-font); color: var(--rs-text-2); text-wrap: pretty; }
.rs-ph__cta { margin-top: clamp(28px, 4svh, 40px); }
/* below 1024 the photo's calm half sits behind the copy: the far side of the frame from each photo's cloud mass */
@media (max-width: 1023px) { .rs-ph--left .rs-ph__photo img { object-position: 0% 100%; } .rs-ph--right .rs-ph__photo img { object-position: 100% 100%; } }
@media (min-width: 768px) and (max-width: 1023px) {
  .rs-ph__copy { grid-column: 1 / span 5; } .rs-ph--right .rs-ph__copy { grid-column: 4 / -1; }
}
@media (min-width: 1024px) {
  .rs-ph__copy { grid-column: 1 / span 6; } .rs-ph--right .rs-ph__copy { grid-column: 7 / -1; }
}
/* no empty gap under the page head: the first section opens with a short top space (<= 120 px to its H2) */
.rs-ph + section, .rs-ph + [data-rs-band] > section:first-child { padding-top: clamp(48px, 4vw + 16px, 72px); }

/* ---------- who can do what (/security): the compare table, three columns, no Restrike column tint ---------- */
.rs-powers { padding-block: var(--rs-sec) calc(var(--rs-sec) * 0.6); }
.rs-powers .rs-cmp-wrap { max-width: none; margin: var(--rs-gap-head) 0 0; }
.rs-powers__t tbody th { color: var(--rs-ink); font-weight: 500; }
.rs-powers__t td { font-size: clamp(17px, 0.6vw + 13px, 21px); color: var(--rs-ink); }
.rs-powers__t td:nth-child(2) .rs-icon { color: var(--rs-brass-text); }
.rs-powers__t td:nth-child(3) .rs-icon { color: var(--rs-ink-3); }
/* a unit inside a big figure: letter-spacing inherits as px, so reset it (else 0.6em text gets the figure's tracking) */
.rs-fig .rs-unit, .rs-wk__pct, .rs-fig small { letter-spacing: 0; }