/* Restrike site: home sections 2-5 (statement, products, every week adds up, live desk) and the payoff chart
   (js/charts.js, js/top.js initDesk, _rs/build_charts.py). Loaded after sections.css. Accent only via --rs-accent*. */

/* ---------- Layout A (docs/SITE.md home 2-5): statement (ice, centred), products (azure, split, 4 glass cards), every
   week (cyan, split, one wide glass card), live (ice, split, glass pair). Stages, heads, glass, windows and figures
   come from layout.css; this file only places things inside them. GLASS RULE: no shadow / border / outline / hairline
   here; accent = one figure per card (products: none, 4 cards share a screen) + the current week's bar. Labels on
   light plates are --rs-text-2 (--rs-text-3 measures under 4.5:1 on the azure / cyan glass). ---------- */
.rs-feats .rs-win__rows dt, .rs-wk .rs-win__rows dt, .rs-live .rs-win__rows dt { color: var(--rs-text-2); }
.rs-feats .rs-figure--accent, .rs-wk .rs-figure--accent, .rs-live .rs-figure--accent { color: var(--rs-accent-hi); } /* #1761f9 measures < 4.5:1 on glass over these grounds */

/* 2. statement: one sentence, big, centred; fills text-2 -> text word by word (site.js initStory) */
.rs-state .rs-state__box { display: flex; justify-content: center; }
.rs-state .rs-statement { max-width: 15em; margin: 0; text-align: center; font: 500 clamp(32px, 4.2vw, 60px)/1.1 var(--rs-display); letter-spacing: -0.03em; color: var(--rs-text); text-wrap: balance; }
.rs-state .rs-fw { color: color-mix(in srgb, var(--rs-text) calc(var(--f, 1) * 100%), var(--rs-text-2)); }

/* 3. products: 4 slim glass cards (name + arrow, one figure, one short line), under them one muted card per stock
   (all the same ink colour, 60 % opacity; hover lifts it to full). Cards rise in turn, the logos float on their own beat. */
.rs-feats .rs-pcards { --n: 4; list-style: none; margin: 0; padding: 0; }
@media (max-width: 1199px) { .rs-feats .rs-pcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .rs-feats .rs-pcards { grid-template-columns: minmax(0, 1fr); } }
.rs-pcard { display: flex; transition: translate 0.5s var(--rs-lift, cubic-bezier(0.22, 1, 0.36, 1)); }
.rs-pcard__a { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: clamp(20px, 1.8vw, 26px); color: inherit; text-decoration: none; border-radius: inherit; }
.rs-pcard__n { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0; font: 600 clamp(20px, 1.6vw, 23px)/1.2 var(--rs-display); letter-spacing: -0.01em; color: var(--rs-text); }
.rs-pcard__n .rs-icon { flex: none; width: 22px; height: 22px; color: var(--rs-text-2); transition: translate 0.4s var(--rs-ease-out); }
.rs-feats .rs-pcard__fig { justify-content: flex-start; margin: 10px 0 0; font-size: clamp(40px, 3.3vw, 50px); white-space: nowrap; }
.rs-feats .rs-pcard__fig small { font-size: 16px; padding-bottom: 0.3em; white-space: nowrap; }
.rs-pcard__line { margin: 0; font-size: 16px; line-height: 1.4; color: var(--rs-text-2); }
.rs-logos { list-style: none; margin: var(--rs-gap) 0 0; padding: 0; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: var(--rs-gap); }
@media (max-width: 1023px) { .rs-logos { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 559px) { .rs-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rs-lg { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: clamp(16px, 1.6vw, 22px) 8px; aspect-ratio: 1 / 0.92; box-sizing: border-box;
  font: 500 14px/1 var(--rs-font); letter-spacing: 0.02em; color: var(--rs-text-2); }
.rs-lg img { display: block; width: clamp(34px, 3.2vw, 48px); height: auto; opacity: 0.6; transition: opacity 0.4s; }
.rs-lg__tk { font: 600 clamp(15px, 1.4vw, 19px)/1 var(--rs-display); letter-spacing: 0.02em; color: var(--rs-text); opacity: 0.6; display: grid; place-items: center; width: clamp(34px, 3.2vw, 48px); height: clamp(34px, 3.2vw, 48px); }
@media (prefers-reduced-motion: no-preference) {
  .rs-lg { animation: rs-lg-float 5.5s ease-in-out calc(var(--d, 0) * -0.6s) infinite alternate; }
  @keyframes rs-lg-float { from { translate: 0 -3px; } to { translate: 0 4px; } }
}
@media (hover: hover) and (pointer: fine) {
  .rs-pcard:hover { translate: 0 -4px; }
  .rs-pcard:hover .rs-pcard__n .rs-icon { translate: 2px -2px; color: var(--rs-text); }
  .rs-lg:hover img, .rs-lg:hover .rs-lg__tk { opacity: 1; }
}
.rs-pcard__a:focus-visible { outline-offset: -3px; }

/* 4. every week: one wide card, figure column left, the 12-week window right (stacked under 1024). The bars grow once
   as the card comes up (js/charts.js adds is-in) and the figure counts with them; no pin. Bars neutral, this week accent. */
.rs-wk__card { display: grid; gap: var(--rs-gap); padding: clamp(20px, 2.2vw, 32px); }
.rs-wk__copy { display: flex; flex-direction: column; min-width: 0; }
.rs-wk .rs-wk__x { justify-content: flex-start; margin: 0; white-space: nowrap; }
.rs-wk__label { margin: 14px 0 0; font-size: 17px; line-height: 1.4; color: var(--rs-text-2); }
.rs-wk .rs-wk__stats { margin-top: auto; padding-top: 28px; }
.rs-wk .rs-wk__stats > * { padding: 11px 14px; font-size: 16px; }
.rs-wk__win { display: flex; flex-direction: column; min-width: 0; }
.rs-wk__t { margin: 0 0 18px; font-size: 15px; font-weight: 500; color: var(--rs-text-2); }
.rs-wk__bars { --bh: 180px; position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: var(--bh) auto; column-gap: 4px; padding-top: 24px; min-width: 0; margin-top: auto; }
.rs-wk__col { grid-row: 1; position: relative; display: flex; align-items: flex-end; min-width: 0; }
.rs-wk__b { display: block; width: 100%; height: calc(var(--h) * 100%); border-radius: 6px 6px 3px 3px; background: rgba(11, 15, 26, 0.13); transform-origin: 50% 100%; }
.rs-wk__col.is-last .rs-wk__b { background: var(--rs-accent-bright); }
.rs-wk__v { position: absolute; left: 50%; bottom: calc(var(--h) * 100% + 6px); translate: -50% 0; font-size: 14px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--rs-text-2); white-space: nowrap; display: none; }
.rs-wk__col.is-last .rs-wk__v, .rs-wk__col.is-max .rs-wk__v { display: block; color: var(--rs-text); font-weight: 500; }
.rs-wk__n { grid-row: 2; padding-top: 10px; font-size: 14px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--rs-text-2); text-align: center; }
@media (min-width: 600px) { .rs-wk__bars { column-gap: 10px; } }
@media (min-width: 1024px) {
  .rs-wk__card { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 3vw, 44px); }
  .rs-wk__copy { padding: 8px 0 0 4px; }
  .rs-wk__bars { --bh: 260px; }
  .rs-wk__v { display: block; }
}
@media (prefers-reduced-motion: no-preference) {
  .rs-js .rs-wk.is-armed .rs-wk__b { transform: scaleY(0); }
  .rs-js .rs-wk.is-armed .rs-wk__v { opacity: 0; }
  .rs-js .rs-wk.is-in .rs-wk__b { transform: none; transition: transform 0.7s var(--rs-ease-out) calc(var(--i) * 60ms); }
  .rs-js .rs-wk.is-in .rs-wk__v { opacity: 1; transition: opacity 0.4s var(--rs-ease-out) calc(var(--i) * 60ms + 0.45s); }
}

/* 5. live: a glass pair (figure 5 : ledger 7, stacked under 1024), equal heights; the countdown row carries the live dot */
.rs-live__pair { display: grid; gap: var(--rs-gap); align-items: stretch; }
@media (min-width: 1024px) { .rs-live__pair { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.rs-live__card { display: flex; flex-direction: column; padding: clamp(20px, 2.2vw, 32px); }
.rs-live__card--fig { justify-content: center; align-items: center; text-align: center; gap: 16px; min-height: 260px; }
.rs-live .rs-live__fig { margin: 0; white-space: nowrap; }
.rs-live__fig b { font-weight: inherit; }
.rs-live__line { margin: 0; font-size: 17px; line-height: 1.4; color: var(--rs-text-2); }
.rs-live__card--ledger .rs-win { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 8px; }
.rs-live .rs-live__rows > * { padding: 12px 14px; font-size: 16px; }
.rs-live__rows dd { white-space: nowrap; }
.rs-live__rows dd span { color: inherit; }            /* odometer digits inherit the value colour */
.rs-live__rows dt { display: flex; align-items: center; gap: 10px; }
.rs-live__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--rs-up); }
@media (prefers-reduced-motion: no-preference) { .rs-live__dot { animation: rs-live-pulse 2.4s ease-in-out infinite; } }
@keyframes rs-live-pulse { 50% { opacity: 0.35; } }
.rs-live .rs-settle::after { display: none; }           /* no extra accent line under the rolled figures */
.rs-live .rs-odo > small, .rs-live b small { font-size: 1em; margin: 0; color: inherit; font-family: inherit; font-weight: inherit; }

/* marquee (marquee.html; not on any page since 16 Oct) */
.rs-marquee { position: relative; padding-block: clamp(56px, 6vw, 104px) 0; overflow: hidden; }
.rs-marquee__row { display: flex; width: max-content; animation: rs-marquee-css 60s linear infinite; will-change: transform; }
.rs-marquee__row.is-js { animation: none; }
.rs-marquee__set { display: flex; align-items: center; flex: none; }
.rs-marquee__item { flex: none; padding-inline: clamp(24px, 2.6vw, 44px); font: 500 clamp(32px, 1.6vw + 22px, 56px)/1.1 var(--rs-display); letter-spacing: -0.015em; color: var(--rs-text); white-space: nowrap; }
.rs-marquee__p { color: var(--rs-accent); font-variant-numeric: tabular-nums; }
.rs-marquee__p .rs-unit { color: inherit; }
.rs-marquee__mark { flex: none; width: clamp(26px, 2vw, 40px); height: auto; fill: var(--rs-text-3); }
@keyframes rs-marquee-css { to { transform: translate3d(-50%, 0, 0); } }


/* ---------- see how each one pays: tabs, two big readouts, the payoff chart (profit fill brass above the zero line,
   loss tint below, the premium band on the zero line, strike and today marked), y and x ticks ---------- */
.rs-pay { padding-block: var(--rs-sec); }
.rs-pay .rs-head { margin-bottom: var(--rs-gap-head); }
.rs-pay__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.rs-pay__tab { appearance: none; border: 0; cursor: pointer; min-height: 48px; padding: 0 20px; border-radius: 999px; background: var(--rs-quiet); color: var(--rs-ink-2); font: 500 16px/1 var(--rs-font); transition: background-color 0.25s var(--rs-ease-std), color 0.25s var(--rs-ease-std); }
.rs-pay__tab:hover { background: var(--rs-quiet-hover); }
.rs-pay__tab[aria-selected="true"] { background: var(--rs-ink); color: #fff; }
.rs-pay__later { margin-left: 6px; font-size: 14px; font-weight: 400; color: inherit; opacity: 0.75; }
.rs-pay__tab:focus-visible { outline: 2px solid var(--rs-brass); outline-offset: 2px; }
.rs-pay__panel { padding: clamp(20px, 3vw, 44px); }
.rs-pay__top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 40px; margin-bottom: clamp(28px, 3vw, 44px); }
.rs-pay__read { display: flex; flex-wrap: wrap; gap: 20px clamp(36px, 5vw, 88px); margin: 0; }
.rs-pay__read div { margin: 0; }
.rs-pay__read dt { font-size: 16px; color: var(--rs-ink-3); }
.rs-pay__read dd { margin: 12px 0 0; white-space: nowrap; }
.rs-pay__cap { margin: 0; font-size: 16px; color: var(--rs-ink-3); }
.rs-pay__plot { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; }
.rs-pay__yt { position: relative; min-width: 4em; font-size: 14px; color: var(--rs-ink-3); }
.rs-pay__yt span { position: absolute; right: 0; top: var(--y); translate: 0 -50%; white-space: nowrap; }
.rs-pay__yt.is-in span { animation: rs-pay-in 0.45s var(--rs-ease-out) both; }
@keyframes rs-pay-in { from { opacity: 0; translate: 0 -20%; } }
.rs-pay__chart { position: relative; height: clamp(250px, 24vw + 60px, 420px); --z: 50%; --b: 50%; }
.rs-pay__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rs-pay__svg path { fill: none; vector-effect: non-scaling-stroke; }
.rs-pay__svg .rs-pay__gain { fill: var(--rs-brass); fill-opacity: 0.34; stroke: none; }
.rs-pay__svg .rs-pay__loss { fill: var(--rs-ink); fill-opacity: 0.08; stroke: none; }
.rs-pay__zero { stroke: var(--rs-ink-3); stroke-width: 1.25; opacity: 0.7; }
.rs-pay__spot { stroke: var(--rs-ink-3); stroke-width: 1.25; stroke-dasharray: 3 4; }
.rs-pay__k { stroke: var(--rs-brass-num); stroke-width: 1.5; }
.rs-pay__line { stroke: var(--rs-ink); stroke-width: 2.75; stroke-linejoin: round; stroke-linecap: round; }
.rs-pay__band { fill: var(--rs-brass); opacity: 0; transition: opacity 0.4s var(--rs-ease-out); }
.rs-pay__box.is-flag .rs-pay__band { opacity: 0.6; }
.rs-pay__flag { position: absolute; left: var(--x); white-space: nowrap; padding: 7px 11px; border-radius: 999px; font: 500 14px/1 var(--rs-font); pointer-events: none; opacity: 0; transition: opacity 0.4s var(--rs-ease-out), translate 0.5s var(--rs-ease-out); }
.rs-pay__flag b { font-weight: 500; }
.rs-pay__flag--k { top: 0; translate: -50% -80%; background: var(--rs-ink); color: #fff; }
.rs-pay__flag--k b { color: var(--rs-brass-soft); }
.rs-pay__flag--s { bottom: 0; translate: -50% 20%; background: var(--rs-inset); color: var(--rs-ink-2); }
.rs-pay__box.is-flag .rs-pay__flag--k { opacity: 1; translate: -50% -50%; }
.rs-pay__box.is-flag .rs-pay__flag--s { opacity: 1; translate: -50% 50%; }
.rs-pay__chip { position: absolute; right: 12px; top: var(--b); translate: 0 -50%; padding: 5px 8px; border-radius: 6px; background: var(--rs-surface); font: 500 15px/1 var(--rs-font); color: var(--rs-brass-text); white-space: nowrap; opacity: 0; transition: opacity 0.4s var(--rs-ease-out); pointer-events: none; }
.rs-pay__chip b { font-weight: 500; }
.rs-pay__box.is-flag .rs-pay__chip { opacity: 1; }
.rs-pay__chart[data-ls="l"] .rs-pay__chip { right: auto; left: 12px; }
.rs-pay__xt { grid-column: 2; position: relative; height: 1.4em; margin-top: 22px; font-size: 14px; color: var(--rs-ink-3); }
.rs-pay__xt span { position: absolute; left: var(--x); translate: -50% 0; white-space: nowrap; }
.rs-pay__give { margin: clamp(24px, 3vw, 40px) 0 0; font: 400 18px/1.4 var(--rs-font); color: var(--rs-ink); }
.rs-pay__give > span:first-child { display: block; margin-bottom: 6px; font-size: 15px; color: var(--rs-ink-3); }
@media (max-width: 599px) {
  .rs-pay__tab { padding: 0 14px; font-size: 15px; }
  .rs-pay__plot { column-gap: 10px; }
  .rs-pay__chip { font-size: 14px; }
  .rs-pay__chip > span { display: none; } /* the amount alone fits in the band beside the line */
}

@media (prefers-reduced-motion: reduce) {
  .rs-pay__band, .rs-pay__flag, .rs-pay__chip { transition: none !important; }
  .rs-pcard, .rs-pcard__n .rs-icon { transition: none !important; }
  .rs-live__dot { animation: none; }
  .rs-marquee__row { animation: none; width: auto; justify-content: center; }
  .rs-marquee__set { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; justify-content: center; row-gap: 12px; padding-inline: var(--rs-gutter); }
  .rs-marquee__item { white-space: normal; text-align: center; font-size: clamp(28px, 1.4vw + 20px, 44px); }
  .rs-marquee__set + .rs-marquee__set { display: none; }
  .rs-pay__yt.is-in span { animation: none; }
  .rs-pay__band { opacity: 0.6; }
  .rs-pay__flag, .rs-pay__chip { opacity: 1; }
  .rs-pay__flag--k { translate: -50% -50%; }
  .rs-pay__flag--s { translate: -50% 50%; }
  .rs-wk__b { transform: none !important; }
  .rs-wk__v { opacity: 1 !important; }
}