/* Restrike site (SOOK layout, 15 Oct 2026; SOOK note follows): the sections below the hero (30 Sep 2026, client: "different designs, immersive images, smoother
   open / close", then "very smooth, nothing skipped"). Loaded after sook.css (build.py). Runtime: js/sections.js.
   - Framed photos (hills, ink cloud, lake): inset + rounded while entering or leaving, full-bleed when centred.
   - How it works (v4): split, the H2 sticky on the left, three numbered steps on the right. Calculator: picked
     strikes slide into "Your week". Top vaults: a 3 x 2 grid of figure tickets. Every rule on chain: a 4-up row.
   - Widths (SITE-V4 §4): .rs-wrap = std (1152), .rs-wrap--wide (1360 at 1440, 40 px sides), .rs-wrap--narrow (760).
   - Hover: cards lean toward the pointer (.rs-tilt), buttons fill from the pointer, links draw their underline.
   - Open / close: FAQ and the phone menu ease out on open, ease in on close, and reverse mid-way. */

:root {
  --rs-fg: 16px;                                 /* frame side gutter */
  --rs-fv: 8px;                                  /* frame top / bottom inset inside a full-screen stage */
  --rs-fr: 22px;                                 /* frame radius */
  --rs-ease-inq: cubic-bezier(0.5, 0, 0.75, 0.2);
}
@media (min-width: 768px) { :root { --rs-fg: clamp(24px, 3.2vw, 48px); --rs-fv: clamp(10px, 1.4vh, 16px); --rs-fr: 30px; } }

/* ---------- section widths (SITE-V4 §4): std = .rs-wrap (1152); wide = 1360 at 1440 with 40 px sides; narrow = a
   760 column, centred. Inside the inset .rs-ink slab the containers give the inset back, like .rs-wrap there. ---------- */
.rs-wrap.rs-wrap--wide { max-width: calc(85rem + 2 * var(--rs-gutter)); }
@media (min-width: 1024px) { .rs-wrap.rs-wrap--wide { max-width: calc(85rem + 80px); padding-inline: 40px; } }
.rs-wrap.rs-wrap--narrow { max-width: calc(47.5rem + 2 * var(--rs-gutter)); }
.rs-ink .rs-wrap.rs-wrap--narrow { max-width: calc(47.5rem + 2 * (var(--rs-gutter) - var(--rs-ink-in))); }
@media (min-width: 1024px) { .rs-ink .rs-wrap.rs-wrap--wide { max-width: calc(85rem + 80px - 2 * var(--rs-ink-in)); padding-inline: calc(40px - var(--rs-ink-in)); } }
.rs-wrap--narrow .rs-head { max-width: none; }

/* ---------- framed photos: inset + rounded while the section enters from below or leaves at the top; full-bleed,
   square corners once it fills the screen. sections.js drives the clip (inset + radius) and the picture's zoom from
   the frame's distance to the viewport centre, damped; the CSS below is the still, full-bleed state. ---------- */
.rs-frame { overflow: hidden; transform-origin: 50% 50%; backface-visibility: hidden; }
.rs-frame picture { position: absolute; inset: 0; display: block; transform-origin: 50% 50%; }
.rs-frame.is-moving { will-change: clip-path; }
.rs-frame.is-moving picture { will-change: transform; }

/* closing band: the ink cloud; a soft local wash keeps the title at 4.5:1 */
.rs-close { background: var(--rs-ground); }
.rs-close__bg.rs-frame { inset: 0; }
.rs-close__body { padding-inline: calc(var(--rs-fg) + 20px); }
.rs-close__body::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: min(120%, 78rem); height: 150%; translate: -50% -50%; pointer-events: none;
  background: none; }

/* footer lake: edge to edge; the glass letters stand on its bottom edge */
.rs-foot__lake .rs-foot__photo img, .rs-foot__lake .rs-water, .rs-foot__lake .rs-foot__glass img { transform-origin: 50% 50%; }

/* hover: the picture leans in 2 % inside its mask (sections.js folds it into the scroll zoom) */

/* ---------- hover: cards lean toward the pointer (sections.js sets the transform; springs back on leave) ---------- */
.rs .rs-tilt { transition-property: background-color, box-shadow, opacity, color; transition-duration: 0.4s; transition-timing-function: var(--rs-ease-out); transform-origin: 50% 50%; }

/* ---------- buttons: the fill grows from the pointer; the arrow nudges ---------- */
.rs-btn { isolation: isolate; overflow: hidden; transition: color 0.35s var(--rs-ease-out), transform 0.25s var(--rs-ease-std), translate 0.4s var(--rs-ease-out); }
.rs-btn::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: var(--fill, var(--rs-ink));
  clip-path: circle(0% at var(--fx, 50%) var(--fy, 100%)); transition: clip-path 0.5s var(--rs-ease-in-out); pointer-events: none; }
.rs-btn--primary, .rs-btn:not(.rs-btn--ink) { --fill: #26323f; --fill-fg: #ffffff; }
.rs-btn--ink { --fill: rgba(255, 255, 255, 0.85); --fill-fg: var(--rs-text); }
@media (hover: hover) {
  .rs-btn:hover { background: var(--bg); color: var(--fill-fg); }
  .rs-btn:hover::before { clip-path: circle(150% at var(--fx, 50%) var(--fy, 100%)); }
}
.rs-btn .rs-icon { transition: transform 0.45s var(--rs-ease-out); }

/* ---------- links draw their underline ---------- */
.rs-link { color: var(--rs-ink); text-decoration: none; background: linear-gradient(currentColor, currentColor) no-repeat 100% 100% / 0 1px; padding-bottom: 2px; transition: background-size 0.45s var(--rs-ease-out); }
@media (hover: hover) { .rs-link:hover { background-position: 0 100%; background-size: 100% 1px; } }
.rs-link:focus-visible { background-size: 100% 1px; }

/* footer tiles: the arrow rides out and back in */
@media (hover: hover) { .rs-foot__tile:hover .rs-icon { transform: translate(4px, -4px); } }

/* ---------- FAQ: grid rows 0fr -> 1fr + opacity; ease-out on open, ease-in on close; a click mid-way reverses it ---------- */
.rs-qa { transition: background-color 0.3s var(--rs-ease-out); }
@media (hover: hover) { .rs-qa:not(.is-open):hover { background: var(--rs-glass-strong); } .rs-qa:not(.is-open) .rs-qa__q:hover .rs-icon { transform: translateY(2px); } }
.rs-qa__a { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden;
  transition: grid-template-rows 380ms var(--rs-ease-inq), opacity 260ms var(--rs-ease-inq), visibility 0s linear 380ms; }
.rs-qa.is-open .rs-qa__a { grid-template-rows: 1fr; opacity: 1; visibility: visible;
  transition: grid-template-rows 380ms var(--rs-ease-out), opacity 380ms var(--rs-ease-out) 40ms, visibility 0s; }
.rs-qa__in { min-height: 0; overflow: hidden; }
.rs-qa__a p { translate: 0 -6px; transition: translate 380ms var(--rs-ease-inq); }
.rs-qa.is-open .rs-qa__a p { translate: 0 0; transition: translate 380ms var(--rs-ease-out); }

/* ---------- phone menu: site.css (fade + 12 px drop, 360 ms) ---------- */

/* ---------- every rule on chain (v4): a wide 4-up row of cards (2 on tablets, 1 on phones); no pin, no carousel ---------- */
.rs-rules { position: relative; padding-block: var(--rs-sec); }
.rs-rules__row { list-style: none; margin: var(--rs-gap-head) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--rs-col-gap); }
@media (max-width: 1023px) { .rs-rules__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .rs-rules__row { grid-template-columns: minmax(0, 1fr); } }
.rs-rule { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.rs-rule__art { position: relative; aspect-ratio: 1; }
.rs-rule__art > .rs-art { position: absolute; inset: 8%; width: auto; height: auto; }
.rs-rule__txt { padding: 0 var(--rs-card-pad) var(--rs-card-pad); }
.rs-rule__t { margin: 0; font: 500 20px/1.3 var(--rs-font); letter-spacing: -0.01em; color: var(--rs-text); }
.rs-rule__line { margin: 8px 0 0; font: 400 17px/1.55 var(--rs-font); color: var(--rs-text-2); text-wrap: pretty; }
@media (max-width: 559px) { .rs-rule__art { aspect-ratio: 16 / 10; } }

.rs-tk { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--rs-glass-chip); color: var(--rs-text-2); }
.rs-tk img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rs-tk--macro { background: var(--rs-glass-chip); color: var(--rs-accent); }
.rs-tk--macro svg { width: 20px; height: 20px; }
/* .rs-vticket: an S2 ticket with its stub at the bottom at every width (the ticket's own phone geometry, copied
   from site.css; --sb = the stub height). Used by the calc slip (pay-out on the stub) and the vault cards. */
.rs-vticket {
  --stub: 0px; flex-direction: column; }
.rs-vticket > .rs-ticket__stub { width: auto; min-height: 0; padding-block: 0; }

/* ---------- top vaults this week: a 3 x 2 grid (2 columns on tablets, 1 on phones); each card is a sketch scene, the
   vault's last 5 weekly premiums as bars, and what 1,000 pays this week; the whole card links to the vault in the app. Cards rise in with the scroll (scrubbed) and lean
   toward the pointer; the scene runs faster while hovered. ---------- */
.rs-vaults { position: relative; padding-block: var(--rs-sec); }
.rs-vaults__note { margin-top: 20px; }
.rs-vaults__grid { list-style: none; margin: var(--rs-gap-head) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rs-col-gap); }
@media (max-width: 1023px) { .rs-vaults__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .rs-vaults__grid { grid-template-columns: minmax(0, 1fr); } }
.rs-tcard-w { min-width: 0; }
.rs-tcard { --sb: 64px; position: relative; height: 100%; box-sizing: border-box; }
.rs-tcard__main { display: flex; flex-direction: column; padding: 0 !important; }
.rs-tcard__body { display: flex; flex-direction: column; flex: 1; padding: var(--rs-card-pad); }
.rs-tcard__top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rs-tcard__body .rs-h3 { font-size: 20px; }
.rs-tcard__mid { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: clamp(32px, 3vw, 48px); }
.rs-tcard__pct { display: grid; gap: 6px; margin: 0; }
.rs-tcard__pct > span { font: 400 15px/1.2 var(--rs-font); color: var(--rs-text-3); }
.rs-tcard__pct b { font: 500 clamp(40px, 1.2vw + 28px, 52px)/1 var(--rs-display); letter-spacing: -0.015em; color: var(--rs-brass-num); font-variant-numeric: tabular-nums; }
.rs-tcard__cols { display: flex; align-items: flex-end; gap: 6px; height: 52px; }
.rs-tcard__cols i { display: block; width: 12px; height: 100%; border-radius: 4px; background: var(--rs-brass-mark); opacity: 0.45; transform-origin: 50% 100%;
  transform: scaleY(calc(0.12 + 0.88 * var(--v) * var(--r, 1))); }
.rs-tcard__cols i:last-child { opacity: 1; }
.rs-tcard .rs-tcard__foot { height: var(--sb); flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 0 var(--rs-card-pad); font: 400 18px/1.2 var(--rs-font); white-space: nowrap; }
.rs-tcard__foot > span { font-family: var(--rs-font); font-size: 16px; color: var(--rs-text-3); }
.rs-tcard__foot b { font-weight: 500; color: var(--rs-accent); }
.rs-tcard__link { position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.rs-tcard__link:focus-visible { outline: 2px solid var(--rs-accent); outline-offset: -4px; }
.rs-cmp__note { margin: 20px 0 0; font: 400 15px/1.5 var(--rs-font); color: var(--rs-text-3); }

/* scrubbed reveals (sections.js): an element rises 40 px and fades in as it crosses the lower third of the screen,
   and back out when scrolled back up; the transform is set inline on a damped value, so it never skips */

/* ======================= wave 2 (docs/SITE-V3-EXPAND.md, 15 Oct): shared pieces, then N3 N4 N5 N6 =======================
   No new pinned tracks: every new section scrubs from its own place on screen (sections.js). */

/* odometer (sections.js odometer(); Repay's): each digit a window onto a 0-9 strip */
.rs-odo { display: inline-flex; font-variant-numeric: tabular-nums; }
.rs-odo__d { position: relative; display: inline-block; clip-path: inset(0 -0.1em); }
.rs-odo__g { visibility: hidden; }
.rs-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; }
.rs-odo__s > span { display: block; height: 1.1em; line-height: 1.1em; }
.rs-odo__g { line-height: 1.1em; }

/* hover lift (Linear's purposeLift) on top of the tilt spring, once a card has finished rising (no layout shift) */
.rs .rs-tilt.is-risen { transition-property: background-color, box-shadow, opacity, color, translate; transition-duration: 0.4s, 0.4s, 0.4s, 0.4s, 0.7s;
  transition-timing-function: var(--rs-ease-out), var(--rs-ease-out), var(--rs-ease-out), var(--rs-ease-out), cubic-bezier(0.32, 0.72, 0, 1); }
@media (hover: hover) { .rs-tilt.is-risen:hover { translate: 0 -6px; } }

/* vault cards: the 5 weekly bars grow with the card's rise (--r from initRise), one beat per bar */

/* compare: the Kraken column draws its x marks row by row, like the checks (--d per row) */
.rs-cmp td:not(.rs-cmp__us) .rs-icon path { stroke-dasharray: 24; stroke-dashoffset: calc((1 - var(--d, 1)) * 24px); }



/* ---------- N4 every strike, explained: two IV dials (same 1 sigma risk, different distance) beside the strike log;
   needles turn to the IV with the scroll, each log line reveals left -> right as it rises ---------- */
.rs-slog { position: relative; padding-block: var(--rs-sec); }
/* gauges on top, the log under them: both 2 columns from 760 px, so the two blocks share edges and nothing sits empty */
.rs-slog__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rs-col-gap); margin-top: var(--rs-gap-head); }
@media (min-width: 1024px) { .rs-slog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* gauges 6 + tickets 6 */
.rs-slog__pair, .rs-slog__log { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rs-card-gap); }
@media (min-width: 768px) and (max-width: 1023px) { .rs-slog__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rs-gauge { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 14px 28px; padding: var(--rs-card-pad); }
@media (min-width: 1024px) { .rs-gauge { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.rs-gauge__svg { display: block; width: 100%; max-width: 240px; margin: 0 auto; overflow: visible; }
.rs-gauge__txt { display: grid; gap: 6px; min-width: 0; }
.rs-gauge__track, .rs-gauge__val { fill: none; stroke-width: 12; stroke-linecap: round; }
.rs-gauge__track { stroke: var(--rs-line); }
.rs-gauge__val { stroke: var(--rs-brass-mark); }
.rs-gauge__needle { transform-origin: 100px 100px; transform-box: view-box; }
.rs-gauge__needle path { stroke: var(--rs-ink); stroke-width: 3; stroke-linecap: round; }
.rs-gauge__needle circle { fill: var(--rs-ink); }
.rs-gauge__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; }
.rs-gauge__name b { font: 500 22px/1.2 var(--rs-font); color: var(--rs-ink); }
.rs-gauge__name > span, .rs-gauge__dist > span { font: 400 16px/1.3 var(--rs-font); color: var(--rs-ink-3); }
.rs-gauge__dist { display: grid; gap: 2px; margin: 0; }
.rs-gauge__dist b { font: 500 clamp(40px, 1.4vw + 26px, 52px)/1.1 var(--rs-display); letter-spacing: -0.015em; color: var(--rs-brass-num); font-variant-numeric: tabular-nums; }
.rs-logrow { --stub: 30%; height: 100%; }
.rs-logrow__body { display: grid; align-content: center; gap: 10px; }
.rs-logrow__top { display: flex; align-items: center; gap: 12px; margin: 0; }
.rs-logrow__top .rs-tk { flex: none; width: 36px; height: 36px; }
.rs-logrow__top b { min-width: 0; font: 500 18px/1.25 var(--rs-font); color: var(--rs-ink); }
.rs-logrow__act { flex: none; padding: 5px 12px; border-radius: 999px; background: var(--rs-glass-chip); font: 500 14px/1.2 var(--rs-font); color: var(--rs-ink-2); }
.rs-logrow__act.is-earn { background: var(--rs-glass-chip); color: var(--rs-ink); }
.rs-logrow__why { margin: 0; font: 400 16px/1.45 var(--rs-font); color: var(--rs-ink-2); }
.rs-logrow__k { margin: 0; gap: 4px; }
.rs-logrow__k b { font: 500 clamp(20px, 0.5vw + 15px, 24px)/1.1 var(--rs-font); letter-spacing: -0.015em; color: var(--rs-brass-num); }
.rs-logrow__k span { font: 400 14px/1.2 var(--rs-font); color: var(--rs-ink-3); }

/* ---------- N5 the app: two real screens (STYLE §4). Captions 6 + 6 above; the browser window spans the 12 columns
   and shows a crop of the 1440 capture at ~1:1, so the app's own text stays readable (>= 10 px); the phone (390
   capture at 0.84) overlaps its right end. Native scroll, nothing pinned. ---------- */
.rs-devices { position: relative; padding-block: var(--rs-sec); }
.rs-dev__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px var(--rs-col-gap); margin-top: var(--rs-gap-head); }
.rs-dev__cap { display: grid; align-content: start; gap: 8px; min-width: 0; }
.rs-dev__n { font: 400 15px/1 var(--rs-font); color: var(--rs-brass-text); font-variant-numeric: tabular-nums; }
.rs-dev__t { margin: 0; font: 500 20px/1.25 var(--rs-font); color: var(--rs-ink); }
.rs-dev__cap .rs-card__line { max-width: 30rem; }
.rs-dev__laptop { position: relative; min-width: 0; border-radius: 16px; overflow: hidden; background: var(--rs-glass-strong); -webkit-backdrop-filter: blur(var(--rs-blur)) saturate(1.15); backdrop-filter: blur(var(--rs-blur)) saturate(1.15); }
.rs-dev__bar { display: flex; gap: 6px; height: 28px; align-items: center; padding: 0 12px; background: var(--rs-glass-row); }
.rs-dev__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--rs-quiet-hover); }
/* crop window onto the 1440-wide capture: --cx/--cy = top-left, --cw/--ch = size, all in capture css px */
.rs-dev__screen { --cx: 1056; --cy: 176; --cw: 376; --ch: 224; position: relative; container-type: inline-size; aspect-ratio: var(--cw) / var(--ch); overflow: hidden; background: var(--rs-card); }
@media (min-width: 600px) { .rs-dev__screen { --cx: 272; --cy: 84; --cw: 776; --ch: 470; } }
@media (min-width: 1024px) { .rs-dev__screen { --cx: 264; --cy: 84; --cw: 1160; --ch: 516; } }
.rs-dev__screen picture { display: block; }
.rs-dev__screen img { position: absolute; left: 0; top: 0; display: block; max-width: none; width: calc(100cqw * 1440 / var(--cw)); height: auto;
  translate: calc(-100cqw * var(--cx) / var(--cw)) calc(-100cqw * var(--cy) / var(--cw)); }
.rs-phone { justify-self: center; width: min(350px, 100%); aspect-ratio: 402 / 874; box-sizing: border-box; padding: 3.2%;
  border-radius: 17% / 7.8%; background: var(--rs-glass-strong); -webkit-backdrop-filter: blur(var(--rs-blur)) saturate(1.15); backdrop-filter: blur(var(--rs-blur)) saturate(1.15); }
.rs-phone__screen { position: relative; height: 100%; border-radius: 14% / 6.6%; overflow: hidden; background: var(--rs-card); }
.rs-phone__screen picture { display: block; height: 100%; }
.rs-phone__screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.rs-dev__ph { display: grid; place-items: center; height: 100%; background: var(--rs-raised); font: 500 14px/1.2 var(--rs-font); color: var(--rs-ink-3); }
@media (min-width: 1024px) {
  .rs-dev__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .rs-dev__cap--a { grid-column: 1 / span 6; grid-row: 1; }
  .rs-dev__cap--b { grid-column: 7 / span 6; grid-row: 1; }
  .rs-dev__laptop { grid-column: 1 / -1; grid-row: 2; align-self: start; }
  .rs-phone { grid-column: 9 / -1; grid-row: 2; justify-self: end; width: min(366px, 100%); margin: 60px 0 0; } /* covers the capture's right panel */
}
/* ---------- N6 track record: the vault line (ink) and just holding (grey) draw left -> right, a bead rides the
   vault line's head, the weekly premium dots pop in along the base; the last 4 Fridays under it ---------- */
.rs-record { position: relative; padding-block: var(--rs-sec); }
.rs-rec { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px var(--rs-col-gap); align-items: end; margin-top: var(--rs-gap-head); padding: var(--rs-card-pad); }
@media (min-width: 768px) { .rs-rec { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); } }
.rs-rec__chart { position: relative; padding: 0 0 28px 40px; }
.rs-rec__svg { display: block; width: 100%; height: auto; overflow: visible; }
.rs-rec__svg path { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.rs-rec__base { stroke: var(--rs-line); stroke-width: 1.5; stroke-dasharray: 4 5; }
.rs-rec__hold { stroke: var(--rs-ink-3); stroke-width: 2; }
.rs-rec__vault { stroke: var(--rs-brass-mark); stroke-width: 3; }
.rs-rec__bead { fill: var(--rs-brass-mark); stroke: var(--rs-surface); stroke-width: 3; }
/* the axis: the same face, tabular, in px (never scaled with the svg) */
.rs-rec__y { position: absolute; left: 0; top: calc((100% - 28px) * var(--yt, 0)); translate: 0 -50%; font: 400 14px/1 var(--rs-font); color: var(--rs-ink-3); }
.rs-rec__x { position: absolute; left: 40px; right: 0; bottom: 0; height: 18px; margin: 0; }
.rs-rec__x span { position: absolute; top: 0; translate: -50% 0; white-space: nowrap; font: 400 14px/18px var(--rs-font); color: var(--rs-ink-3); }
.rs-rec__x span:first-child { translate: -10% 0; }
.rs-rec__x span:last-child { translate: -90% 0; }
.rs-rec__key { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.rs-rec__key li { display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: center; column-gap: 10px; row-gap: 2px; font: 400 14px/1.3 var(--rs-font); color: var(--rs-ink-3); }
.rs-rec__key li i { width: 16px; height: 3px; border-radius: 2px; background: var(--rs-ink-3); }
.rs-rec__key li.is-v i { background: var(--rs-brass-mark); }
.rs-rec__key b { grid-column: 2; font: 500 clamp(26px, 1vw + 18px, 34px)/1.1 var(--rs-display); letter-spacing: -0.015em; color: var(--rs-ink); font-variant-numeric: tabular-nums; }
.rs-rec__gap { padding-top: 14px; }
.rs-rec__gap span { grid-column: 1 / -1; }
.rs-rec__gap b { grid-column: 1 / -1; color: var(--rs-brass-num); font-size: clamp(34px, 1.6vw + 22px, 48px); }
/* the last 4 Fridays: S2 tickets, 2-up (6 + 6) from 768, 1-up on phones */
.rs-sfri-wrap { margin-top: var(--rs-card-gap); }
.rs-sfri__cap { margin: 24px 0 12px; font: 500 16px/1.3 var(--rs-font); color: var(--rs-ink-3); }
.rs-sfri-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rs-card-gap) var(--rs-col-gap); }
@media (min-width: 768px) { .rs-sfri-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rs-sfri { --stub: 30%; height: 100%; }
.rs-sfri__body { display: grid; gap: 6px; align-content: center; }
.rs-sfri__body b { font: 500 20px/1.25 var(--rs-font); color: var(--rs-ink); }
.rs-sfri__body > span { font: 400 17px/1.4 var(--rs-font); color: var(--rs-ink-2); }
.rs-sfri__res { display: inline-flex; align-items: center; gap: 8px; }
.rs-sfri__res .rs-icon { width: 18px; height: 18px; color: var(--rs-brass-text); }
.rs-sfri__k { margin: 0; gap: 4px; }
.rs-sfri__k b { font: 500 clamp(24px, 0.6vw + 18px, 28px)/1.1 var(--rs-font); letter-spacing: -0.015em; color: var(--rs-brass-num); }

/* compare (v4, narrow): the table fills its 760 column */
.rs-compare .rs-cmp-wrap { max-width: none; margin: var(--rs-gap-head) 0 0; }


/* ---------- reduced motion: nothing moves, everything shows ---------- */
@media (prefers-reduced-motion: reduce) {
  .rs-frame, .rs-frame picture, .rs-close__body, .rs-calc__stage > .rs-wrap { clip-path: none !important; scale: none !important; translate: none !important; opacity: 1 !important; }
  .rs-tilt, [data-rs-rise] { transform: none !important; translate: none !important; opacity: 1 !important; }
  .rs-qa__a p { translate: none; }
  .rs-odo__s, .rs-day__dot::after { transition: none !important; }
}

/* FAQ (v4, narrow): the H2, then the accordion alone in the 760 column */
.rs-faq__list { display: flex; flex-direction: column; gap: 10px; margin-top: var(--rs-gap-head); }
.rs-faq__list .rs-qa__a p { font-size: 17px; max-width: none; }

/* ======================= Layout B (docs/SITE.md, 15 Oct): how, calculator, week, payoff =======================
   Stages + glass come from layout.css; this block only lays out the cards' insides. GLASS RULE: no shadow, border,
   outline or hairline on any card or row; rows split by space + alternate --rs-glass-row; text --rs-text / -2 / -3.
   Accent: one figure per card at most (how: 2 in 3 cards; calc: the picked strikes' figures + the pay-out; week: 1;
   payoff: best case + the profit fill). */
.rs-how, .rs-cx, .rs-week, .rs-stage.rs-pay { --rs-b-pad: clamp(20px, 2vw, 28px); color: var(--rs-text); }
/* the week and payoff cards hold accent and --rs-text-3 text over the stage's deep corners: their glass is raised (measured
   >= 4.5:1 over the darkest pixel behind each text box; the text keeps its colour) */
.rs-week, .rs-stage.rs-pay { --rs-b-glass: rgba(255, 255, 255, 0.76); }
.rs-how .rs-win__rows dt, .rs-cx .rs-win__rows dt, .rs-week .rs-win__rows dt { color: var(--rs-text-3); }
.rs-win__rows > .is-sel { background: var(--rs-glass-strong); }       /* the selected strike row: strong glass ... */
.rs-win__rows > .is-sel dd { color: var(--rs-accent-text); font-weight: 600; } /* ... accent text only on its figure */
.rs-how .rs-win__sum, .rs-cx .rs-win__sum, .rs-week .rs-win__sum { margin-bottom: 0; } /* a <p>: no default bottom margin inside the window */
.rs-win__sum > span { color: var(--rs-text-2); }
.rs-win__sum.rs-win__sum--plain b { color: var(--rs-text); font-weight: 500; }     /* the card's accent sits elsewhere */

/* ---------- how: 3 equal glass cards, each title + a window of the step's real UI + one line ---------- */
.rs-how__cards { list-style: none; margin: 0; padding: 0; }
@media (max-width: 959px) { .rs-how__cards.rs-cards { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; } } /* 3 cards never leave an orphan */
.rs-how__card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; padding: clamp(28px, 3vw, 44px) var(--rs-b-pad); box-sizing: border-box; min-height: clamp(300px, 28vw, 400px); }
.rs-how__t { margin: 0; font: 500 clamp(20px, 1.6vw, 24px)/1.25 var(--rs-font); letter-spacing: -0.01em; color: var(--rs-text); }
.rs-how__fig { margin: auto 0 0; }
.rs-how__lab { margin: 12px 0 0; font: 400 16px/1.4 var(--rs-font); color: var(--rs-text); }
.rs-how__line { margin: auto 0 0; padding-top: 24px; font: 400 17px/1.45 var(--rs-font); color: var(--rs-text-2); }

/* ---------- calculator: the sky-sea photo fills the stage; list card + result card on strong glass ---------- */
.rs-cx { --chip: 112px; --tk: 40px; }
.rs-cx__photo { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.rs-cx__photo picture, .rs-cx__photo img { display: block; width: 100%; height: 100%; }
.rs-cx__photo img { object-fit: cover; object-position: 62% 50%; }
/* the head sits on the photo's own sky: a white veil over the top lifts it (the text keeps its colour) */
.rs-cx__photo::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(238, 247, 255, 0.86) 0%, rgba(238, 247, 255, 0.62) calc(var(--rs-stage-y) + 160px), rgba(238, 247, 255, 0) calc(var(--rs-stage-y) + 360px)); }
/* site.css's html.rs .rs-glass--strong shorthand would drop the rich light layers: put them back on the strong fill */
html.rs .rs-stage.rs-cx .rs-glass--rich.rs-glass--strong, html.rs .rs-stage.rs-week .rs-glass--rich.rs-glass--strong, html.rs .rs-stage.rs-pay .rs-glass--rich.rs-glass--strong {
  background:
    radial-gradient(ellipse 85% 34% at 54% 7%, rgba(255, 255, 255, 0.24), transparent 72%),
    linear-gradient(102deg, rgba(255, 255, 255, 0.1), transparent 28%, rgba(255, 255, 255, 0.08) 62%, transparent 88%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.08) 9%, transparent 22%),
    var(--rs-b-glass, var(--rs-glass-strong)); }
.rs-cx__duo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--rs-gap); align-items: stretch; }
@media (max-width: 959px) { .rs-cx__duo { grid-template-columns: minmax(0, 1fr); } }
.rs-cx__card { display: flex; flex-direction: column; gap: 10px; padding: clamp(12px, 1.4vw, 20px); box-sizing: border-box; min-width: 0; }
/* one grid for the head and every row: the labels sit exactly over their columns */
.rs-cx__grid { display: grid; grid-template-columns: var(--tk) minmax(0, 1fr) var(--chip) var(--chip); column-gap: 12px; align-items: center; }
.rs-cx__cols { margin: 0; padding: 6px 12px 2px; font: 500 14px/1.2 var(--rs-font); color: var(--rs-text-3); }
.rs-cx__cols [data-col="stock"] { grid-column: 1 / span 2; }
.rs-cx__cols [data-col="a"], .rs-cx__cols [data-col="b"] { text-align: center; white-space: nowrap; }
/* price + weekly move: shown where the list card is wide (>= 1180 beside the result, 640-959 stacked), hidden on phones */
.rs-cx__opt { display: none; }
.rs-cx__num { font: 400 16px/1.2 var(--rs-font); color: var(--rs-text-2); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.rs-cx__cols [data-col="px"], .rs-cx__cols [data-col="mv"] { text-align: right; white-space: nowrap; }
@media (min-width: 1180px), (min-width: 640px) and (max-width: 959px) {
  .rs-cx__grid { grid-template-columns: var(--tk) minmax(0, 1fr) 84px 108px var(--chip) var(--chip); }
  .rs-cx__opt { display: block; }
}
.rs-cx__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; flex: 1; grid-auto-rows: minmax(72px, 1fr); } /* rows share the card's height */
.rs-cx .rs-call { min-height: 72px; padding: 8px 12px; box-sizing: border-box; border-radius: 16px; transition: background-color 0.35s var(--rs-ease-out); }
.rs-cx .rs-call:nth-child(odd) { background: var(--rs-glass-row); }
.rs-cx .rs-call.is-in { background: var(--rs-glass-strong); }             /* picked: strong glass, no colour fill */
.rs-cx__tk { display: block; width: var(--tk); height: var(--tk); }
.rs-cx .rs-tk { width: var(--tk); height: var(--tk); }
.rs-cx .rs-tk--macro { color: var(--rs-text-2); }
.rs-cx .rs-call__q { min-width: 0; }
.rs-cx .rs-call__t { font: 500 18px/1.2 var(--rs-font); color: var(--rs-text); }
.rs-cx .rs-call__sides { display: contents; }
.rs-cx .rs-sd { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 100%; height: 56px; padding: 0; border: 0; border-radius: 14px;
  background: var(--rs-glass-chip); color: var(--rs-text); font: 500 17px/1.1 var(--rs-font); font-variant-numeric: tabular-nums; cursor: pointer;
  transition: background-color 0.25s var(--rs-ease-out), color 0.25s var(--rs-ease-out), transform 0.14s var(--rs-ease-out); }
.rs-cx .rs-sd b { font-weight: 500; color: var(--rs-text); }
.rs-cx .rs-sd span { font: 400 14px/1 var(--rs-font); color: var(--rs-text-3); }
@media (hover: hover) { .rs-cx .rs-sd:hover:not([aria-pressed="true"]) { background: rgba(255, 255, 255, 0.78); } }
.rs-cx .rs-sd:active { transform: scale(0.96); }
.rs-cx .rs-sd[aria-pressed="true"] { background: rgba(255, 255, 255, 0.94); }
.rs-cx .rs-sd[aria-pressed="true"] b { color: var(--rs-accent-text); font-weight: 600; }     /* the one accent: the picked figure */
.rs-cx .rs-sd:focus-visible { outline: 2px solid var(--rs-accent); outline-offset: 2px; }
/* result: the yearly figure, then the week's window (legs, deposit, the Monday pay-out) */
.rs-cx__fig { padding: clamp(8px, 1.4vw, 20px) 0 clamp(4px, 0.8vw, 12px); text-align: center; }
.rs-cx__fig .rs-figure { margin: 0; }
.rs-cx__fig .rs-figure b { font-weight: inherit; }
.rs-cx__cap { margin: 8px 0 0; font: 400 16px/1.3 var(--rs-font); color: var(--rs-text-2); }
.rs-cx__win { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 12px; }
.rs-cx__win .rs-win__sum { margin-top: auto; }
.rs-cx__lh { display: flex; justify-content: space-between; margin: 0; padding: 0 12px; font: 500 14px/1.2 var(--rs-font); color: var(--rs-text-3); }
.rs-cx .rs-slip__legs { --row: 46px; position: relative; height: calc(2 * var(--row) - 6px); } /* js/sections.js animates it with the leg count */
.rs-cx .rs-slip__legs ol { list-style: none; margin: 0; padding: 0; }
.rs-cx .rs-slip__empty { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; border-radius: 12px; background: var(--rs-glass-row); font: 400 15px/1.3 var(--rs-font); color: var(--rs-text-3); }
.rs-cx .rs-leg { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: calc(var(--row) - 6px);
  box-sizing: border-box; padding: 0 12px; border-radius: 12px; background: var(--rs-glass-row); opacity: 0; will-change: transform, opacity; }
.rs-cx .rs-leg.is-alt { background: transparent; }
.rs-cx .rs-leg[hidden] { display: none; }
.rs-cx .rs-leg__q { font: 500 17px/22px var(--rs-font); color: var(--rs-text); white-space: nowrap; }
.rs-cx .rs-leg__sd { font: 500 16px/20px var(--rs-font); color: var(--rs-text); font-variant-numeric: tabular-nums; }
.rs-cx__dep { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 4px 4px 12px; border-radius: 12px; }
.rs-cx__dep label { font: 400 16px/1.2 var(--rs-font); color: var(--rs-text-3); white-space: nowrap; }
.rs-cx .rs-slip__in { position: relative; flex: 0 1 9.5em; min-width: 0; }
.rs-cx .rs-slip__in input { display: block; width: 100%; height: 46px; box-sizing: border-box; padding: 0 12px 0 28px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, 0.72);
  font: 500 20px/1 var(--rs-font); color: var(--rs-text); text-align: right; font-variant-numeric: tabular-nums; transition: background-color 0.2s var(--rs-ease-out); }
.rs-cx .rs-slip__in input:focus { outline: none; background: #fff; }
.rs-cx .rs-slip__in input:focus-visible { outline: 2px solid var(--rs-accent); outline-offset: 2px; }
.rs-cx .rs-slip__cur { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font: 500 20px/1 var(--rs-font); color: var(--rs-text-3); pointer-events: none; }
.rs-cx .rs-win__sum { padding: 12px; }
.rs-cx .rs-win__sum b { font-size: 22px; }
@media (max-width: 639px) {
  .rs-cx { --chip: 84px; --tk: 34px; }
  .rs-cx__grid { column-gap: 8px; }
  .rs-cx .rs-call { padding: 8px; min-height: 68px; }
  .rs-cx__rows { grid-auto-rows: minmax(68px, 1fr); }
  .rs-cx__cols { padding-inline: 8px; }
  .rs-cx .rs-call__t { font-size: 16px; }
  .rs-cx .rs-sd { height: 52px; font-size: 16px; }
}
@media (max-width: 379px) {
  .rs-cx { --chip: 76px; --tk: 30px; }
  .rs-cx__grid { column-gap: 6px; }
  .rs-cx__cols [data-col="a"], .rs-cx__cols [data-col="b"] { white-space: normal; line-height: 1.15; }
}

/* ---------- week (/how-it-works/): one wide glass card, the week's premium left, the week's rows right ---------- */
.rs-week__card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--rs-gap); align-items: stretch; padding: var(--rs-b-pad); box-sizing: border-box; }
@media (max-width: 859px) { .rs-week__card { grid-template-columns: minmax(0, 1fr); } }
.rs-week__fig { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 12px; text-align: center; }
.rs-week__t { margin: 0; font: 500 22px/1.25 var(--rs-font); letter-spacing: -0.01em; color: var(--rs-text); }
.rs-week__fig .rs-figure { margin: 0; }
.rs-week__line { margin: 0; font: 400 17px/1.45 var(--rs-font); color: var(--rs-text-2); }
.rs-week__win .rs-win__rows > div { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; column-gap: 12px; align-items: baseline; font-size: 17px; }
.rs-week__win .rs-win__rows dt { display: contents; }
.rs-week__win .rs-win__rows dt b { font-weight: 500; color: var(--rs-text); }
.rs-week__win .rs-win__rows dt span { color: var(--rs-text-3); }
.rs-week__win .rs-win__sum { font-size: 17px; }

/* ---------- payoff (/how-it-works/, /market/): one wide glass card: tabs, two readouts, the chart in a window.
   charts.css (loaded later) styles the chart; these rules carry .rs-stage.rs-pay to outrank it. ---------- */
.rs-stage.rs-pay .rs-pay__box { padding: var(--rs-b-pad); box-sizing: border-box; }
html.rs .rs-stage.rs-pay .rs-pay__panel { padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 0; }
.rs-stage.rs-pay .rs-pay__tabs { margin-bottom: clamp(20px, 2vw, 28px); }
.rs-stage.rs-pay .rs-pay__tab { background: var(--rs-glass-chip); color: var(--rs-text-2); }
@media (hover: hover) { .rs-stage.rs-pay .rs-pay__tab:hover { background: rgba(255, 255, 255, 0.78); } }
.rs-stage.rs-pay .rs-pay__tab[aria-selected="true"] { background: var(--rs-text); color: #fff; }
.rs-stage.rs-pay .rs-pay__tab:focus-visible { outline: 2px solid var(--rs-accent); outline-offset: 2px; }
.rs-stage.rs-pay .rs-pay__top { margin-bottom: clamp(20px, 2vw, 28px); padding-inline: 4px; }
.rs-stage.rs-pay .rs-pay__read dt, .rs-stage.rs-pay .rs-pay__cap, .rs-stage.rs-pay .rs-pay__give > span:first-child { color: var(--rs-text-3); }
.rs-stage.rs-pay .rs-pay__fig { margin: 10px 0 0; font: 600 clamp(40px, 3.4vw, 56px)/1 var(--rs-font); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--rs-text); white-space: nowrap; }
.rs-stage.rs-pay .rs-pay__fig--acc { color: var(--rs-accent-text); }
.rs-stage.rs-pay .rs-pay__win { padding: clamp(28px, 2.6vw, 40px) clamp(14px, 2vw, 28px) clamp(14px, 1.6vw, 24px); }
.rs-stage.rs-pay .rs-pay__yt, .rs-stage.rs-pay .rs-pay__xt { color: var(--rs-text-3); }
.rs-stage.rs-pay .rs-pay__svg .rs-pay__gain { fill: var(--rs-accent); fill-opacity: 0.16; }
.rs-stage.rs-pay .rs-pay__svg .rs-pay__loss { fill: var(--rs-text); fill-opacity: 0.07; }
.rs-stage.rs-pay .rs-pay__zero { stroke: var(--rs-text-3); }
.rs-stage.rs-pay .rs-pay__spot { stroke: var(--rs-text-3); }
.rs-stage.rs-pay .rs-pay__k { stroke: var(--rs-text-2); }
.rs-stage.rs-pay .rs-pay__line { stroke: var(--rs-text); }
.rs-stage.rs-pay .rs-pay__band { fill: #ffffff; }
.rs-stage.rs-pay .rs-pay__flag--k { background: var(--rs-text); color: #fff; }
.rs-stage.rs-pay .rs-pay__flag--k b { color: #fff; }
.rs-stage.rs-pay .rs-pay__flag--s { background: rgba(255, 255, 255, 0.85); color: var(--rs-text-2); }
.rs-stage.rs-pay .rs-pay__chip { background: rgba(255, 255, 255, 0.85); color: var(--rs-text); }
.rs-stage.rs-pay .rs-pay__give { margin-top: clamp(20px, 2vw, 28px); padding-inline: 4px; color: var(--rs-text); }
.rs-stage.rs-pay .rs-pay__give > [data-pay-give] { display: block; max-width: 34ch; text-wrap: balance; } /* <= 8 words a line */