/* Restrike site: ONE layout system (docs/SITE.md). Loaded last. Every section = one .rs-stage (an inset rounded sky
   panel) holding one .rs-box (the content box). Cards inside are glass (.rs-glass / .rs-glass--rich): one blur, no shadow,
   no border. Do not add per-section edges, paddings or radii: use these tokens. */
:root {
  --rs-frame: clamp(8px, 1.1vw, 16px);            /* gap between the viewport edge / neighbouring stages and a stage */
  --rs-pad: clamp(20px, 4.4vw, 64px);             /* stage side padding: content edge = frame + pad (80 at 1440, 28 at 390) */
  --rs-box: 1280px;                               /* the one content width */
  --rs-stage-y: clamp(64px, 7.8vw, 112px);        /* the one stage top / bottom padding */
  --rs-head-gap: clamp(40px, 3.9vw, 56px);        /* head -> body */
  --rs-panel-r: clamp(24px, 2.6vw, 36px);         /* stage radius (cards 24, rows 16, pills 999) */
  --rs-gap: clamp(12px, 1.5vw, 20px);             /* card gap */
  --rs-text: #14233b;                             /* deep sky navy, not black: sits in the stage's blues */
  --rs-text-2: #2d3f5c;
  --rs-text-3: #3e506e;                            /* neutral greys: no blue tint; 4.5:1 on glass over azure / cyan */
  --rs-accent-text: #1452d6;                      /* the accent as text on glass (5.4:1); --rs-accent stays the swap point */

  /* stage grounds: FrontPay light pools lifted to sky; neighbours never share one */
  --rs-stage-air:
    radial-gradient(60% 70% at 12% 78%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(45% 45% at 88% 18%, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #62c4ff 0%, #8fd0ff 30%, #c4e4ff 62%, #eef7ff 100%);
  --rs-stage-azure:
    radial-gradient(ellipse 68% 45% at -4% -3%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 46%, transparent 77%),
    radial-gradient(ellipse 70% 45% at 104% -4%, rgba(255, 255, 255, 0.64) 0%, rgba(255, 255, 255, 0.32) 48%, transparent 78%),
    radial-gradient(ellipse 93% 47% at 106% 58%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.24) 48%, transparent 76%),
    radial-gradient(ellipse 64% 49% at -8% 106%, rgba(23, 97, 249, 0.22) 0%, rgba(23, 97, 249, 0.1) 49%, transparent 78%),
    radial-gradient(ellipse 64% 49% at 108% 106%, rgba(23, 97, 249, 0.2) 0%, rgba(23, 97, 249, 0.08) 49%, transparent 78%),
    radial-gradient(ellipse 44% 34% at 50% 111%, rgba(23, 97, 249, 0.18) 0%, transparent 74%),
    linear-gradient(180deg, #a9d8ff 0%, #8fcbff 38%, #74bbfb 72%, #5aa8f2 100%);
  --rs-stage-ice:
    radial-gradient(ellipse 43% 42% at -5% 30%, rgba(255, 255, 255, 0.55), transparent 78%),
    radial-gradient(ellipse 43% 42% at 105% 30%, rgba(214, 240, 255, 0.55), transparent 78%),
    radial-gradient(ellipse 70% 48% at 70% 110%, rgba(23, 97, 249, 0.16), transparent 77%),
    radial-gradient(ellipse 78% 25% at 15% 8%, rgba(255, 255, 255, 0.45), transparent 79%),
    radial-gradient(ellipse 38% 31% at 80% 90%, rgba(23, 97, 249, 0.12), transparent 74%),
    linear-gradient(164deg, #cfe8ff 0%, #b2dbff 29%, #93cbfb 64%, #7ab9f2 100%);
  --rs-stage-cyan:
    radial-gradient(ellipse 46% 30% at 104% 32%, rgba(150, 232, 255, 0.45), transparent 74%),
    radial-gradient(ellipse 80% 36% at 62% 57%, rgba(130, 222, 255, 0.4), transparent 72%),
    radial-gradient(ellipse 58% 30% at 6% 103%, rgba(23, 97, 249, 0.2), transparent 76%),
    radial-gradient(ellipse 60% 32% at 97% 101%, rgba(23, 97, 249, 0.22), transparent 76%),
    linear-gradient(177deg, #bfe9ff 0%, #a6e0fb 24%, #8fd6f6 52%, #84cdf2 78%, #79c2ee 100%);
}

.rs-stage { position: relative; isolation: isolate; overflow: hidden; margin: var(--rs-frame); border-radius: var(--rs-panel-r);
  padding: var(--rs-stage-y) var(--rs-pad); background: var(--rs-stage-ice); }
.rs-stage--air   { background: var(--rs-stage-air); }
.rs-stage--azure { background: var(--rs-stage-azure); }
.rs-stage--ice   { background: var(--rs-stage-ice); }
.rs-stage--cyan  { background: var(--rs-stage-cyan); }
.rs-stage > .rs-box { position: relative; z-index: 1; }
.rs-box { width: 100%; max-width: var(--rs-box); margin-inline: auto; box-sizing: border-box; }

/* section head: H2 left, one line right, bottom-aligned (centred variant for centred sections) */
.rs-head2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, clamp(260px, 32vw, 440px)); gap: clamp(16px, 3vw, 40px);
  align-items: end; margin-bottom: var(--rs-head-gap); }
.rs-head2--centre { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.rs-head2 .rs-sub { margin: 0; }
@media (max-width: 767px) { .rs-head2 { grid-template-columns: minmax(0, 1fr); gap: 14px; } }
.rs-stage .rs-h2 { font: 500 clamp(34px, 4.2vw, 60px)/1.04 var(--rs-display); letter-spacing: -0.03em; }
.rs-stage .rs-sub { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: var(--rs-text-2); }

/* rich glass: the GLASS RULE fill + blur, plus light-only layers (sheen, lip, grain). No shadow, no border. */
.rs-glass--rich { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--rs-radius);
  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%),
    radial-gradient(ellipse 64% 49% at -8% 106%, rgba(255, 255, 255, 0.18), transparent 78%),
    var(--rs-glass);
  -webkit-backdrop-filter: blur(var(--rs-blur)) saturate(1.15); backdrop-filter: blur(var(--rs-blur)) saturate(1.15); }
.rs-glass--rich > * { position: relative; z-index: 1; }
.rs-glass--strong { background-color: var(--rs-glass-strong); }

/* the inner window that holds real product UI: no second blur, light plate only */
.rs-win { border-radius: var(--rs-radius-row); padding: clamp(14px, 1.2vw, 20px) clamp(16px, 1.4vw, 22px); color: var(--rs-text);
  background:
    linear-gradient(0deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.15) 45%, rgba(255, 255, 255, 0) 80%),
    radial-gradient(ellipse 118% 70% at 60% 8%, rgba(255, 255, 255, 0.4), transparent 74%),
    linear-gradient(105deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.38) 51%, rgba(255, 255, 255, 0.3) 100%); }
.rs-win__rows { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.rs-win__rows > * { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 12px; border-radius: 12px; }
.rs-win__rows > :nth-child(odd) { background: var(--rs-glass-row); }
.rs-win__rows dd, .rs-win__rows b { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--rs-text); }
.rs-win__rows dt, .rs-win__rows span { color: var(--rs-text-3); }
.rs-win__sum { margin-top: 6px; padding: 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.62); display: flex; justify-content: space-between; align-items: baseline; }
.rs-win__sum b { font-size: 19px; font-weight: 600; color: var(--rs-accent-text); font-variant-numeric: tabular-nums; }

/* the one big figure: weight contrast in one font, tabular, centred in cards */
.rs-figure { display: flex; align-items: flex-end; justify-content: center; gap: 6px; font-size: clamp(56px, 5vw, 76px); font-weight: 600;
  letter-spacing: -0.04em; line-height: 0.95; font-variant-numeric: tabular-nums; color: var(--rs-text); }
.rs-figure small { font-size: 0.4em; font-weight: 400; letter-spacing: -0.01em; color: var(--rs-text-2); padding-bottom: 0.18em; }
.rs-figure--accent { color: var(--rs-accent-text); }

/* equal cards in a row */
.rs-cards { display: grid; gap: var(--rs-gap); grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); align-items: stretch; }
@media (max-width: 1023px) { .rs-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .rs-cards { grid-template-columns: minmax(0, 1fr); } }

/* hero = the first stage: inset rounded box on the same frame as every section, H1 at the 96 / 44 scale (rule 13) */
html.rs .rs-hero { --rs-h1: clamp(44px, 6.4vw, 92px); margin: 0 0 var(--rs-frame); border-radius: 0 0 var(--rs-panel-r) var(--rs-panel-r); overflow: hidden; isolation: isolate; } /* touches the top, left and right edges (client 16 Oct); the bottom keeps its gap + radius */
html.rs .rs-hero.rs-hero--a.is-wide .rs-hero__stage { padding-top: max(104px, 15svh); }
html.rs .rs-hero .rs-hero__stage { min-height: calc(100svh - var(--rs-frame)); }
html.rs .rs-hero .rs-h1 { font-weight: 500; letter-spacing: -0.03em; line-height: 1.02; }

/* one idea per screen: every stage fills a screen and centres its content; figures scale up with it */
.rs-stage:not(.rs-hero) { min-height: calc(100svh - 2 * var(--rs-frame)); display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; }
.rs-stage:not(.rs-hero) > .rs-box { margin-block: auto; }
.rs-figure { font-size: clamp(64px, 6.2vw, 96px); }
.rs-vaults .rs-tcard__pct b { font-size: clamp(52px, 5vw, 76px); }
.rs-stage .rs-sub { font-size: clamp(18px, 1.5vw, 22px); }

/* client's cloud photos as a stage backdrop: a calm drift, a stage-coloured wash keeps the glass and text legible */
.rs-stage__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.rs-stage__bg picture, .rs-stage__bg img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rs-stage__bg img { transform: scale(1.08); animation: rs-bg-drift 46s ease-in-out infinite alternate; will-change: transform; }
.rs-stage__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(214, 240, 255, 0.5) 0%, rgba(150, 214, 245, 0.22) 55%, rgba(121, 194, 238, 0.38) 100%); }
@keyframes rs-bg-drift { from { transform: scale(1.08) translate3d(-1.2%, 0.4%, 0); } to { transform: scale(1.14) translate3d(1.2%, -0.6%, 0); } }

/* text that shows itself: words rise out of a clip, rows slide in, figures count (js/sections.js arms + triggers) */
.rs-w { display: inline-block; overflow: clip; padding: 0.04em 0.04em 0.16em; margin: 0 -0.04em -0.14em; vertical-align: top; }
.rs-w > span { display: inline-block; }
.rs-armed .rs-w > span { transform: translateY(112%); }
.rs-armed.is-in .rs-w > span { transform: none; transition: transform 1s var(--rs-ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.rs-armed [data-rs-reveal], .rs-armed [data-rs-row] { opacity: 0; transform: translateY(18px); }
.rs-armed.is-in [data-rs-reveal] { opacity: 1; transform: none; transition: opacity 0.9s var(--rs-ease-out) 0.25s, transform 0.9s var(--rs-ease-out) 0.25s; }
.rs-armed.is-in [data-rs-row] { opacity: 1; transform: none; transition: opacity 0.8s var(--rs-ease-out), transform 0.8s var(--rs-ease-out); transition-delay: calc(0.55s + var(--i, 0) * 0.14s); }
.rs-armed .rs-how__card, .rs-armed .rs-cmp2__gap { opacity: 0; transform: translateY(26px); }
.rs-armed.is-in .rs-how__card, .rs-armed.is-in .rs-cmp2__gap { opacity: 1; transform: none; transition: opacity 0.9s var(--rs-ease-out), transform 0.9s var(--rs-ease-out); transition-delay: calc(0.3s + var(--i, 0) * 0.15s); }
@media (prefers-reduced-motion: reduce) { .rs-stage__bg img { animation: none; } }

/* hero mist + grain (client 16 Oct): low fog banks drifting under the copy, a fine film grain over the sky; both sit between
   the photo / smoke and the copy + art, never above them */
.rs-hero__mist, .rs-hero__grain { position: absolute; inset: 0; pointer-events: none; }
.rs-hero__mist { overflow: hidden; z-index: 1; }
.rs-hero__mist i { position: absolute; left: -30%; width: 160%; border-radius: 50%; filter: blur(34px); opacity: 0.55;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.35) 55%, transparent 100%); animation: rs-mist 38s ease-in-out infinite alternate; }
.rs-hero__mist i:nth-child(1) { bottom: -14%; height: 46%; }
.rs-hero__mist i:nth-child(2) { bottom: 6%; height: 30%; opacity: 0.4; animation-duration: 52s; animation-direction: alternate-reverse; }
.rs-hero__mist i:nth-child(3) { bottom: 26%; height: 22%; opacity: 0.28; animation-duration: 64s; }
@keyframes rs-mist { from { transform: translate3d(-7%, 0, 0) scale(1); } to { transform: translate3d(7%, -3%, 0) scale(1.08); } }
.rs-hero__grain { z-index: 2; opacity: 0.32; mix-blend-mode: soft-light; background-size: 220px 220px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: rs-grain 0.9s steps(5) infinite; }
@keyframes rs-grain { 0% { background-position: 0 0; } 20% { background-position: -40px 22px; } 40% { background-position: 30px -50px; } 60% { background-position: -70px -20px; } 80% { background-position: 50px 60px; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .rs-hero__mist i, .rs-hero__grain { animation: none; } }
.rs-how .rs-stage__bg::after { background: linear-gradient(180deg, rgba(222, 243, 255, 0.66) 0%, rgba(170, 224, 248, 0.42) 55%, rgba(140, 205, 242, 0.5) 100%); }

/* hero copy (client 16 Oct): bigger, a little transparent + soft, the second line changes by itself with blur / lift
   transitions, drifts, leans toward the pointer; no button (the header has "Open the app") */
html.rs .rs-hero { --rs-h1: clamp(46px, 8.8vw, 136px); }
html.rs .rs-hero .rs-h1 { color: rgba(20, 35, 59, 0.84); text-shadow: 0 0 0.45em rgba(255, 255, 255, 0.28); line-height: 0.98; letter-spacing: -0.035em;
  translate: 0 0; animation: rs-h1-float 9s ease-in-out infinite alternate; transform: translate3d(calc(var(--hx, 0) * 14px), calc(var(--hy, 0) * 8px), 0); transition: transform 0.9s var(--rs-ease-out); }
@keyframes rs-h1-float { from { translate: 0 -5px; } to { translate: 0 7px; } }
html.rs .rs-hero--a.is-wide .rs-hero__copy { width: min(1320px, 100% - 2 * var(--rs-gutter)); }
html.rs .rs-hero .rs-lede { font-size: clamp(18px, 1.7vw, 24px); color: rgba(20, 35, 59, 0.82); }
.rs-cycle { display: grid; justify-items: center; }
.rs-cycle > span { grid-area: 1 / 1; opacity: 0; filter: blur(20px); transform: translate3d(0, 0.32em, 0) scale(0.97); transition: opacity 0.9s ease, filter 0.9s ease, transform 1.2s var(--rs-ease-out); }
.rs-cycle > span.is-on { opacity: 1; filter: blur(0.4px); transform: none; }
.rs-cycle > span.is-out { opacity: 0; filter: blur(20px); transform: translate3d(0, -0.32em, 0) scale(1.03); }
@media (prefers-reduced-motion: reduce) { html.rs .rs-hero .rs-h1 { animation: none; transform: none; } .rs-cycle > span { transition: none; } }