/*
 * Rebel Sites — Cinematic template.
 * Every rule is scoped to .rs, the site root, and every keyframe is named rs-*, so nothing
 * reaches the rest of the app.
 * The three brand colors arrive as --brand-primary / --brand-secondary / --brand-tertiary
 * (with --on-* text colors) on .rs; every other tone is derived here with color-mix().
 * Font stacks arrive as --font-display / --font-serif / --font-body from the font pair.
 */
/* ============================================================
   LO PAGE — brand tokens
   Swap a brand by changing THREE values (or call LO.applyTheme()).
   Everything else — dark sections, tints, glows, text-on-color —
   is derived from these, so any logo's palette works.
   ============================================================ */
.rs {
  --brand-primary: #1B3A6B;
  --brand-secondary: #C8A24A;
  --brand-tertiary: #E8731A;

  /* text colour that sits ON each brand colour (computed by lo.js for contrast) */
  --on-primary: #ffffff;
  --on-secondary: #141a26;
  --on-tertiary: #ffffff;

  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-body: 'Geist', system-ui, sans-serif;

  /* derived — never edit these per brand */
  /* the main buttons' fill: the tertiary itself unless its words would not read on it (cinematic/theme.ts) */
  --cta: var(--cta-shade, var(--brand-tertiary));
  --on-cta: var(--on-cta-shade, var(--on-tertiary));
  /* the brand's own dark (theme.ts cinematicNight: the primary's hue held, darkened): the old 22% mix toward a blue-black read as
     navy on every brand (PRODUCT-BUGS 35, Andrew 2026-10-27); the mix stays only as the fallback for a root without theme vars */
  --night: var(--brand-night, color-mix(in oklch, var(--brand-primary) 22%, #05070c));
  /* the page band's glow reads the site's own primary, resolved here: a band that relights --brand-primary inside it (a person's
     opening) still glows exactly as every other inner page's opening does */
  --glow-primary: var(--brand-primary);
  --night-2: var(--brand-night-2, color-mix(in oklch, var(--brand-primary) 30%, #0a0e18));
  --night-line: color-mix(in oklch, white 9%, transparent);
  --primary-lit: color-mix(in oklch, var(--brand-primary) 55%, white);
  /* the relit primary as a fill under the light tone's dark words (the process's last step, the timeline's last number, the
     calculators' current tab): its own mix unless the site's theme lightened it until those words read (cinematic/theme.ts) */
  --primary-lit-fill: color-mix(in oklch, var(--brand-primary) var(--primary-lit-fill-share, 55%), white);
  --secondary-lit: color-mix(in oklch, var(--brand-secondary) 70%, white);
  --tertiary-lit: color-mix(in oklch, var(--brand-tertiary) 80%, white);
  --primary-tint: color-mix(in oklch, var(--brand-primary) 8%, white);
  --secondary-tint: color-mix(in oklch, var(--brand-secondary) 14%, white);
  /* the mist (every second section, both tones) and, under the light tone, the light band (`--night` there, below): each the
     shared band step under the white page, from the theme (cinematic/theme.ts cinematicLightBands; Andrew, 2026-11-02: no
     site's sections flow as one colour); the mix stays only as the fallback for a root without theme vars */
  --mist: var(--brand-mist, color-mix(in oklch, var(--brand-primary) 4%, #f4f5f8));
  --paper: #ffffff;
  --ink: color-mix(in oklch, var(--brand-primary) 18%, #0d1119);
  --ink-2: color-mix(in oklch, var(--brand-primary) 12%, #4b5466);
  --line: color-mix(in oklch, var(--ink) 11%, transparent);

  --r-panel: 32px;
  --r-card: 18px;
  --wrap: min(1200px, 100% - 40px);
  /* the header's column — the width the floating bar's brand and pages align to, published for other products so their
     content lines up with the header (CONTENT MEDIA's blog, director ruling (B) 2026-10-24). The bar is a pill
     (`nav-in`), so the column is the pill's own box: `min(1200px, 100% - 24px)`, box-sizing (its 22px/10px inner inset is
     the pill's look, not the column), and --rs-gutter is the 12px each side it keeps when the screen is under 1200px. */
  --rs-wrap: min(1200px, 100% - 2 * var(--rs-gutter));
  --rs-gutter: 12px;
  /* how far the pinned header covers the page's top, in the page's own pixels: its measured bottom (--site-head, screen px
     from site-jumps.ts, back through --z), before the measure its usual bottom. Published like --rs-wrap so a product drawn
     inside the site (CONTENT MEDIA's blog) starts below the header, never behind it (Andrew via REBEL SITES, 2026-10-27). */
  --rs-head-over: calc(var(--site-head, calc(78px * var(--z, 1))) / var(--z, 1));
  --ease: cubic-bezier(.2, .8, .2, 1);
}

:where(.rs), :where(.rs) *, :where(.rs) *::before, :where(.rs) *::after { box-sizing: border-box; }
/* an in-page jump stops 24px below what is stuck at the top: the floating header, and the page's pinned bar (the calculators'
   sub menu, the A to Z strip), as measured (--site-stuck, screen px: site-jumps.ts); its first words, not its top padding,
   land there (a target with top padding gives it back: scroll-margin-top). Before the measure: the header's usual bottom. */
html:has(.rs) { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--site-stuck, 80px) + 24px); }
@media (prefers-reduced-motion: no-preference) {
  html:has(.rs) { scroll-behavior: smooth; }
}
.rs {
  min-height: calc(100vh / var(--z)); background: var(--paper); color: var(--ink);
  font: 400 17px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
:where(.rs) :where(img, svg, canvas) { display: block; max-width: 100%; }
:where(.rs) :where(svg:has(> use)) { height: auto; aspect-ratio: 1; }
:where(.rs) :where(a) { color: inherit; }
:where(.rs) :where(button) { font: inherit; color: inherit; }
:where(.rs) :where(h1, h2, h3, h4, p, ul, ol, blockquote, figure) { margin: 0; }
:where(.rs) :where(ul, ol) { padding: 0; list-style: none; }
/* the keyboard ring: the kit's two-tone ring (fit.css), the root's ink over its paper, one pair through every band, the floating
   bar and the flipped blocks included */
.rs { --focus-line: var(--ink); --focus-halo: var(--paper); }
:where(.rs) :focus-visible { outline-offset: 3px; border-radius: 8px; }
/* a jump's target holds the focus without a ring (site-jumps.ts): the reader's eyes are on its words */
.rs [data-jump-focus]:focus { outline: none; }
.rs .wrap { width: var(--wrap); margin-inline: auto; }
.rs .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- type scale (1.25 minor third on a 17px base, display jumps) ---------- */
.rs .display {
  font-family: var(--font-display); font-weight: 700;
  font-variation-settings: "opsz" 96; letter-spacing: -0.035em; line-height: .95;
}
.rs .h2 { font: 700 clamp(2.2rem, 4.6vw, 3.9rem)/1.0 var(--font-display); letter-spacing: -0.03em; font-variation-settings: "opsz" 96; text-wrap: balance; }
.rs .h3 { font: 650 1.35rem/1.2 var(--font-display); letter-spacing: -0.015em; }
.rs .lede { font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--ink-2); max-width: 58ch; text-wrap: pretty; }
.rs .serif { font-family: var(--font-serif); font-weight: 400; font-style: italic; letter-spacing: -0.01em; }
.rs .section { padding-block: clamp(80px, 11vw, 150px); }
.rs .section-head { display: grid; gap: 18px; margin-bottom: clamp(40px, 6vw, 72px); }
.rs .center { text-align: center; justify-items: center; }
.rs .center .lede { margin-inline: auto; }

/* ---------- buttons ---------- */
.rs .btn {
  /* the button fit's variables (fit.css): the size, padding and height drawn below come from these, and every variant or breakpoint sets only the variable it changes */
  --button-size: 1rem; --button-pad: 1.6em; --button-pad-block: 1.05em; --button-pad-floor: .8em; --button-icon: calc(16px + .65em); --button-em: .52; --button-icon-h: 16px;
  display: inline-flex; align-items: center; justify-content: center; gap: .65em;
    padding: var(--button-pad-block) var(--button-pad); border-radius: 999px; border: 0; cursor: pointer;
  font: 600 var(--button-size)/1.1 var(--font-body); letter-spacing: -.005em; text-decoration: none;
  position: relative; isolation: isolate; overflow: hidden; white-space: nowrap;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
}
.rs .btn svg { width: 16px; height: 16px; flex: none; transition: transform .25s var(--ease); }
.rs .btn-lg svg { width: 20px; height: 20px; } /* fixed sizes: 1.1em drew a large button's arrow at 19px */
.rs .btn:hover svg { transform: translateX(3px); }
.rs .btn:active { transform: scale(.97); }
.rs .btn-lg { --button-pad-block: 1.25em; --button-pad: 2em; --button-size: 1.08rem; --button-icon: calc(20px + .65em); --button-icon-h: 20px; }
.rs .btn-cta {
  background: var(--cta); color: var(--on-cta);
  box-shadow: 0 14px 34px -14px color-mix(in oklch, var(--cta) 85%, transparent),
              inset 0 1px 0 color-mix(in oklch, white 35%, transparent),
              inset 0 0 0 1px var(--cta-edge, transparent);
}
.rs .btn-cta::after { /* the shine sweep: one pass on hover, not a loop */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 35%, color-mix(in oklch, white 45%, transparent) 50%, transparent 65%);
  transform: translateX(-120%); transition: transform .8s var(--ease);
}
.rs .btn-cta:hover::after { transform: translateX(120%); }
.rs .btn-cta:hover { box-shadow: 0 20px 44px -14px color-mix(in oklch, var(--cta) 95%, transparent), inset 0 1px 0 color-mix(in oklch, white 35%, transparent), inset 0 0 0 1px var(--cta-edge, transparent); }
/* many of one button (templates/button-crowd.ts): more than three in one section are outlined in the button colour, its words the
   shade of it that reads on the ground under them (the page's --tertiary-words, the mist's --tertiary-words-mist) */
.rs .btn-cta.btn-many { background: transparent; color: var(--tertiary-words, var(--brand-tertiary)); box-shadow: inset 0 0 0 1.5px currentColor; }
.rs .calc-sec:nth-of-type(odd) .btn-cta.btn-many { color: var(--tertiary-words-mist, var(--brand-tertiary)); }
.rs .btn-cta.btn-many::after { content: none; }
.rs .btn-cta.btn-many:hover { background: color-mix(in oklch, currentColor 8%, transparent); box-shadow: inset 0 0 0 2px currentColor; }
.rs .btn-glass {
  background: color-mix(in oklch, white 9%, transparent); color: #fff;
  box-shadow: inset 0 0 0 1px color-mix(in oklch, white 18%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.rs .btn-glass:hover { background: color-mix(in oklch, white 15%, transparent); }
.rs .btn-ink { background: var(--ink); color: #fff; }
/* the header's second button: the site's secondary color and its own readable text color */
.rs .btn-second { background: var(--brand-secondary); color: var(--on-secondary); box-shadow: 0 14px 34px -18px color-mix(in oklch, var(--brand-secondary) 80%, transparent); }
.rs .btn-line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.rs .btn-line:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
/* in the phone menu, on the menu's ground (menu-ground.css): its words and its edge in the menu's ink, never the page's */
.rs .mmenu .btn-line { color: var(--menu-ink); box-shadow: inset 0 0 0 1.5px var(--menu-line); }
.rs .mmenu .btn-line:hover { box-shadow: inset 0 0 0 1.5px var(--menu-ink); }

/* ---------- nav ---------- */
.rs .nav {
  position: fixed; inset: 16px 0 auto; z-index: 50; pointer-events: none;
  transition: transform .4s var(--ease);
}
.rs .nav-in {
  pointer-events: auto; width: min(1200px, 100% - 24px); margin-inline: auto;
  display: flex; align-items: center; gap: 28px; padding: 10px 10px 10px 22px;
  border-radius: 999px; color: #fff;
  /* fully opaque: nothing on the page reads through a header (Andrew via REBEL SITES, 2026-10-27, every template) */
  background: var(--night);
  box-shadow: inset 0 0 0 1px var(--night-line), 0 20px 40px -24px #000;
  position: relative;
  transition: background .3s, color .3s, box-shadow .3s;
}
.rs .nav.is-light .nav-in { background: white; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line), 0 20px 40px -28px color-mix(in oklch, var(--ink) 50%, transparent); }
/* The header's first paint, until the runtime's own reading (CinematicRuntime navTone: is-toned) takes over: its light
   glass over a band drawn light, read from the page's opening band exactly as the runtime reads it, so it never changes
   tone as the page wakes. The light tone draws every band light (page tone, 2026-10-24), so it always opens on the light
   glass; the dark tone reads its opening as it is (a [data-dark] band is dark, any other light; the footer coming up is a
   plain band, light). Each .nav.is-light rule has this twin. */
.rs:is([data-mode="light"], :not([data-mode="light"]):not(:has(> main > [data-dark]:first-child))) .nav:not(.is-toned) .nav-in { background: white; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line), 0 20px 40px -28px color-mix(in oklch, var(--ink) 50%, transparent); }
.rs .brandmark { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.rs .brandmark .mark {
  width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center;
  background: var(--brand-secondary);
  color: var(--on-secondary); font: 800 .95rem/1 var(--font-display); letter-spacing: -.04em;
}
.rs .brandmark .mark-words { display: grid; min-width: 0; }
.rs .mark-words b { font: 700 1.02rem/1.05 var(--font-display); letter-spacing: -.02em; }
.rs .mark-words > span { display: block; font: 500 .72rem/1.2 var(--font-body); opacity: .65; letter-spacing: 0; }
/* the Powered-by label under this sentence-case line: small capitals, tracked (nav-mega.css, the Powered-by line: the case the line is not) */
.rs .mark-powered > small { font-size: .86em; text-transform: uppercase; letter-spacing: .08em; }
.rs .nav-links { display: flex; align-items: center; gap: 26px; margin-left: auto; font-size: .95rem; font-weight: 500; white-space: nowrap; }
/* a link that opens a form is a button (the form loader's marker), drawn exactly like the links beside it */
.rs .linkbtn { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; padding: 0; background: none; font: inherit; color: inherit; letter-spacing: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.rs .nav-links a:where(:not(.btn)), .rs .nav-links .linkbtn { text-decoration: none; opacity: .82; transition: opacity .2s; }
.rs .nav-links a:where(:not(.btn)):hover, .rs .nav-links .linkbtn:hover { opacity: 1; }
/* the bar's words never wrap and its parts never squeeze: a header too full for them wears the menu instead (navFit, below) */
.rs .nav-in .mark-words > * { white-space: nowrap; }
.rs .nav-in .btn { --button-pad-block: .8em; --button-pad: 1.3em; --button-size: .93rem; white-space: nowrap; flex: none; }
.rs .nav-links, .rs .nav-links > li { flex: none; }
/* the two header buttons sit as a pair: 12px apart, not the bar's 28px (phones show one; see below) */
@media (min-width: 901px) { .rs .nav:not(.is-crowded) .nav-in .btn + .btn { margin-left: -16px; } }

/* ---------- phone menu: a hamburger that turns into an X, and a full-screen panel under the bar. It shows on a phone
   (below) and on any header whose links do not fit on one line (the runtime's navFit marks it .is-crowded) ---------- */
.rs .burger {
  display: none; align-content: center; justify-items: center; gap: 5px; flex: none;
  width: 42px; height: 42px; border: 0; border-radius: 50%; cursor: pointer; color: inherit;
  background: color-mix(in oklch, white 12%, transparent);
}
.rs .nav.is-light .burger { background: var(--mist); }
.rs:is([data-mode="light"], :not([data-mode="light"]):not(:has(> main > [data-dark]:first-child))) .nav:not(.is-toned) .burger { background: var(--mist); }
.rs .burger i { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .35s var(--ease), opacity .2s; }
.rs .burger.is-open i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.rs .burger.is-open i:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.rs .burger.is-open i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.rs .mmenu {
  display: none; position: fixed; inset: 0; z-index: 48; overflow-y: auto; overscroll-behavior: contain;
  height: calc(100dvh / var(--z)); padding: 104px 22px calc(28px + env(safe-area-inset-bottom));
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path .5s var(--ease), visibility 0s .5s;
}
.rs .mmenu.is-open { clip-path: inset(0); visibility: visible; transition: clip-path .5s var(--ease), visibility 0s; }
.rs .mmenu-in { display: flex; flex-direction: column; gap: 36px; width: min(760px, 100%); min-height: 100%; margin-inline: auto; }
.rs .mmenu-links { display: grid; }
.rs .mmenu-links a:where(:not(.btn)), .rs .mmenu-links .linkbtn {
  display: block; width: 100%; padding: 14px 2px; text-decoration: none; border-bottom: 1px solid var(--menu-line);
  font: 700 clamp(1.7rem, 8vw, 2.2rem)/1.1 var(--font-display); letter-spacing: -.03em;
}
.rs .mmenu-links li { opacity: 0; transform: translateY(12px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.rs .mmenu.is-open .mmenu-links li { opacity: 1; transform: none; }
.rs .mmenu.is-open .mmenu-links li:nth-child(2) { transition-delay: .05s; }
.rs .mmenu.is-open .mmenu-links li:nth-child(3) { transition-delay: .1s; }
.rs .mmenu.is-open .mmenu-links li:nth-child(4) { transition-delay: .15s; }
.rs .mmenu-cta { display: grid; gap: 12px; margin-top: auto; }
.rs .mmenu-cta > .btn { width: 100%; justify-content: center; }
.rs .mmenu-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rs .mmenu-contact .chip { justify-content: center; padding-inline: 12px; font-size: .9rem; white-space: nowrap; background: var(--menu-hover); box-shadow: inset 0 0 0 1px var(--menu-line); color: var(--menu-ink); }
.rs .mmenu-contact .chip svg { width: 16px; flex: none; color: var(--menu-mark); } /* an icon takes the mark (3:1), not the small words' accent */
/* While it is open the bar melts into the panel (in the panel's words: the header's ground, menu-ground.css), and the phone bar
   steps aside. */
.rs:has(.mmenu.is-open) .nav-in { background: transparent; box-shadow: none; color: var(--menu-ink); }
.rs:has(.mmenu.is-open) .burger { background: var(--menu-hover); }
.rs:has(.mmenu.is-open) .nav-in > .btn { visibility: hidden; }
.rs:has(.mmenu.is-open) .mbar { transform: translateY(140%); }

/* while the links share the row, the brand holds its width: shrinking to nothing left the bar never overfull, so navFit never drew it
   closer and the lockup's line hung off the logo beside 0px of words (a full bar: seven links and a long title, designer review 1,
   R2; lockup-look). Held, an overfull bar is drawn closer (the brand's second lines go), then crowded (the links into the menu). */
@media (min-width: 901px) { .rs .nav:not(.is-crowded) .brandmark { flex: none; } }

/* the header as a phone draws it: its links in the menu (with the call and text pair), one button in the bar */
@media (max-width: 900px) {
  .rs .nav-links, .rs .nav-in .btn-second { display: none; }
  .rs .nav-in { gap: 12px; padding-left: 14px; }
  .rs .nav-in .btn { margin-left: auto; }
  .rs .burger { display: grid; }
  .rs .mmenu { display: block; }
}
/* a header a little too full for its links draws them closer, and its brand keeps one line (navFit: .is-snug) */
.rs .nav.is-snug .nav-in { gap: 18px; }
.rs .nav.is-snug .nav-links { gap: 18px; }
.rs .nav.is-snug .mark-words > .mark-powered { display: none; }
@media (min-width: 901px) { .rs .nav.is-snug .nav-in .btn + .btn { margin-left: -6px; } }
/* a desktop bar still too full when drawn closer sheds its second button before its links go into the menu (navFit: .is-bare;
   the bar carries no phone, so its lean stair changes nothing): with loanDepot's wide logo beside the name and NMLS, six links
   and two buttons, the bar at ~1390px wore the phone menu (PRODUCT-BUGS 34, Andrew 2026-10-27). The lockup line never goes. */
@media (min-width: 901px) { .rs .nav.is-bare .nav-in .btn-second { display: none; } }
/* the phone's header, at any width, for a header too full for its links even then (navFit: .is-crowded) */
.rs .nav.is-crowded .nav-links, .rs .nav.is-crowded .nav-in .btn-second { display: none; }
.rs .nav.is-crowded .nav-in { gap: 12px; }
/* the buttons keep together at the bar's end */
.rs .nav.is-crowded .nav-links + * { margin-left: auto; }
.rs .nav.is-crowded .burger { display: grid; }
.rs:has(.nav.is-crowded) .mmenu { display: block; }

/* ---------- hero ---------- */
.rs .hero {
  position: relative; min-height: calc(100svh / var(--z)); background: var(--night); color: #fff; overflow: hidden;
  display: grid; align-items: center; padding-block: 140px 90px;
}
.rs .hero-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 55% at 78% 42%, color-mix(in oklch, var(--brand-tertiary) 22%, transparent), transparent 70%),
    radial-gradient(50% 60% at 10% 100%, color-mix(in oklch, var(--brand-primary) 55%, transparent), transparent 70%),
    radial-gradient(40% 40% at 95% 0%, color-mix(in oklch, var(--brand-secondary) 18%, transparent), transparent 70%);
}
.rs .hero-grid { /* blueprint grid, fades out toward the text */
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(var(--night-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--night-line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(70% 70% at 70% 45%, #000 20%, transparent 75%);
          mask-image: radial-gradient(70% 70% at 70% 45%, #000 20%, transparent 75%);
}
.rs #scene { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s var(--ease); }
/* the scene fades in on its first drawn frame (hero-scene-three.ts), never popping in over the words */
.rs #scene.is-drawn { opacity: 1; }
.rs .hero-fallback {
  position: absolute; right: 6%; top: 50%; translate: 0 -50%; width: min(520px, calc(45vw / var(--z))); aspect-ratio: 1;
  border-radius: 50%; filter: blur(40px); opacity: .7; display: none;
  background: conic-gradient(from 90deg, var(--brand-primary), var(--brand-tertiary), var(--brand-secondary), var(--brand-primary));
}
.rs .no-webgl .hero-fallback { display: block; }
.rs .hero-content { position: relative; z-index: 2; width: var(--wrap); margin-inline: auto; }
.rs .hero-copy { max-width: 640px; display: grid; gap: 26px; }
.rs .hero-pill {
  display: inline-flex; align-items: center; gap: 10px; width: -moz-fit-content; width: fit-content;
  padding: 7px 14px 7px 8px; border-radius: 999px; font-size: .9rem; color: #dfe3ec;
  background: color-mix(in oklch, white 7%, transparent); box-shadow: inset 0 0 0 1px var(--night-line);
}
.rs .hero-pill .live { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in oklch, #22c55e 22%, transparent); }
.rs .hero-pill .live::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 #22c55e; animation: rs-live 2.4s infinite; }
@keyframes rs-live { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.rs .hero h1 { font-size: clamp(2.9rem, 6.6vw, 6.3rem); }
/* the headline never wider than its column: its longest word (words.tsx longWordFit; Unbounded's letters run about .86em) sets it
   smaller where that word would not fit (a 398px "mortgages." in a 350px column scrolled a phone sideways); the column is the
   copy's own width, never stretched by the headline */
.rs .hero-copy { max-width: 820px; container-type: inline-size; }
.rs .hero h1[style*="--long-word"] { font-size: min(clamp(2.9rem, 6.6vw, 6.3rem), calc(100cqi / (var(--long-word) * .9))); }
.rs .hero h1 .line { display: block; }
/* every line stacks in one grid cell, so the box is as tall as the tallest line (wrapped or not);
   the padding is room for ascenders and descenders the clip must never touch */
.rs .rotator { display: grid; overflow: hidden; padding-block: .14em .2em; margin-block: -.14em -.2em; }
.rs .rotator .serif { grid-area: 1 / 1; font-size: 1.04em; line-height: 1.08; color: var(--secondary-fig-night, var(--secondary-lit)); }
.rs .rotator .word { transform: translateY(160%); opacity: 0; transition: transform .9s var(--ease), opacity .9s var(--ease); }
.rs .rotator .word.is-in { transform: none; opacity: 1; }
.rs .rotator .word.is-out { transform: translateY(-160%); opacity: 0; }
.rs .hero .lede { color: color-mix(in oklch, white 74%, transparent); max-width: 50ch; }
.rs .hero .lede strong { color: #fff; font-weight: 600; }
.rs .hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.rs .hero-meta { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; font-size: .92rem; color: color-mix(in oklch, white 62%, transparent); }
.rs .hero-meta a { color: #fff; text-decoration: none; font-weight: 600; }
.rs .gbadge { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
/* Google's G — the Quote Builder's own mark (/brand/google-g.svg) on a white disc, never the old sprite's */
.rs .gmark { display: inline-block; width: 1.45em; height: 1.45em; border-radius: 50%; background: #fff; vertical-align: middle; margin: 0 .45em 0 0; }
.rs .gbadge .gmark { width: 26px; height: 26px; margin: 0; flex: none; }
.rs .stars { display: inline-flex; gap: 2px; color: var(--review-star); }
.rs .stars svg { width: 15px; height: 15px; }
.rs .gbadge p { color: #fff; font-weight: 600; font-size: .95rem; line-height: 1.2; }
.rs .gbadge p span { color: color-mix(in oklch, white 60%, transparent); font-weight: 400; }

.rs .float-card {
  position: absolute; z-index: 3; color: #fff; border-radius: 20px; padding: 16px 18px;
  background: color-mix(in oklch, var(--night-2) 60%, transparent);
  box-shadow: inset 0 0 0 1px var(--night-line), 0 30px 60px -30px #000;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  animation: rs-bob 7s ease-in-out infinite;
}
@keyframes rs-bob { 50% { transform: translateY(-10px); } }
.rs .fc-review { right: max(4%, calc((100% - 1200px) / 2)); bottom: 7%; width: 290px; font-size: .92rem; line-height: 1.45; }
.rs .fc-review blockquote { color: #e8ebf2; }
.rs .fc-review figcaption { margin-top: 10px; display: flex; align-items: center; gap: 8px; font-size: .82rem; color: color-mix(in oklch, white 60%, transparent); }
.rs .fc-speed { right: max(4%, calc((100% - 1200px) / 2)); top: 19%; display: flex; gap: 12px; align-items: center; animation-delay: -3s; }
.rs .fc-speed .spin-ring { width: 44px; height: 44px; }
.rs .fc-speed p { font: 700 1.05rem/1.1 var(--font-display); }
.rs .fc-speed small { display: block; font: 400 .8rem/1.3 var(--font-body); color: color-mix(in oklch, white 60%, transparent); }
.rs .scroll-cue { position: absolute; left: 50%; bottom: 26px; translate: -50% 0; z-index: 2; width: 26px; height: 42px; border-radius: 14px; box-shadow: inset 0 0 0 1.5px color-mix(in oklch, white 30%, transparent); }
.rs .scroll-cue::after { content: ""; position: absolute; left: 50%; top: 9px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: #fff; animation: rs-cue 2s var(--ease) infinite; }
@keyframes rs-cue { 60% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }
@media (max-width: 1080px) { .rs .fc-speed { display: none; } }
/* the hero without its 3D scene (subject-hero.ts, the Design pane's "The hero shows"): the person, the team photo or a picture
   framed beside the words in the scene's place, 4:5 like About's portrait; or the night ground and its glow alone */
.rs .hero.has-figure .hero-content { display: grid; grid-template-columns: minmax(0, 1fr) min(400px, calc(34vw / var(--z))); gap: 56px; align-items: center; }
/* the headline never runs under the picture beside it (Andrew, 2026-10-20): its longest word sets it no larger than its column fits
   (words.tsx longWordFit, the live words too: site-runtime.ts refitWords); a word wider than its column even then breaks inside its
   column, never past it */
.rs .hero.has-figure h1 { overflow-wrap: anywhere; }
.rs .hero-figure {
  position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: var(--r-panel); overflow: hidden; background: var(--night-2);
  box-shadow: inset 0 0 0 1px var(--night-line), 0 40px 80px -40px #000; display: grid; place-items: center;
}
.rs .hero-figure img { position: absolute; inset: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.rs .hero-figure .initials { font: 800 clamp(5rem, 10vw, 8rem)/1 var(--font-display); letter-spacing: -.07em; color: color-mix(in oklch, white 92%, transparent); }
.rs .hero.has-figure .fc-review { bottom: 4%; }
@media (max-width: 820px) {
  /* phones: the words first, then the 3D house in its own band below the buttons (HeroScene places it there) */
  .rs .hero { min-height: auto; padding-block: 112px 320px; align-items: start; }
  .rs .hero-copy { gap: 20px; }
  .rs .fc-review { display: none; }
  .rs .scroll-cue { display: none; }
  .rs .hero-ctas .btn { flex: 1 1 100%; }
  /* no scene: no band below the buttons; a figure stands under the words, the column's width */
  .rs .hero.no-scene, .rs .hero.has-figure { padding-block: 112px 72px; }
  .rs .hero.has-figure .hero-content { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .rs .hero-figure { aspect-ratio: 4 / 3; }
}

/* ---------- start here (the link-in-bio stack) ---------- */
.rs .start { background: var(--mist); }
/* the rows' columns never wider than the grid (a hero row's long words at 1.5rem held a phone's column 33px past the screen) */
.rs .start-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.rs .link-row {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 18px;
  padding: 20px 22px 20px 20px; border-radius: 22px; background: var(--paper); text-decoration: none;
  box-shadow: 0 0 0 1px var(--line); cursor: pointer; border: 0; text-align: left; width: 100%;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s;
}
.rs .link-row:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px color-mix(in oklch, var(--brand-primary) 30%, transparent), 0 24px 40px -26px color-mix(in oklch, var(--brand-primary) 60%, transparent); }
.rs .link-row .ic { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--primary-tint); color: var(--secondary-words-tint, var(--brand-secondary)); }
.rs .link-row .ic svg { width: 20px; height: 20px; }
.rs .link-row .t { display: block;  font: 650 1.16rem/1.2 var(--font-display); letter-spacing: -.015em; overflow-wrap: break-word; }
.rs .link-row .s { display: block;  color: var(--ink-2); font-size: .95rem; line-height: 1.4; margin-top: 3px; }
.rs .link-row .go { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--mist); transition: background .3s, color .3s; }
.rs .link-row .go svg { width: 20px; }
.rs .link-row:hover .go { background: var(--primary-fill, var(--brand-primary)); color: var(--on-primary); }
.rs .link-row.is-hero { grid-column: 1 / -1; background: var(--cta); color: var(--on-cta); box-shadow: 0 24px 50px -28px var(--cta); padding: 26px; }
.rs .link-row.is-hero .ic { background: color-mix(in oklch, var(--on-cta) 16%, transparent); color: var(--on-cta); }
.rs .link-row.is-hero .s { color: color-mix(in oklch, var(--on-cta) var(--cta-quiet-share, 80%), transparent); }
.rs .link-row.is-hero .t { font-size: 1.5rem; }
.rs .link-row.is-hero .go { background: var(--on-cta); color: var(--cta); width: 48px; height: 48px; }
.rs .start-contact { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.rs .chip { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; background: var(--paper); box-shadow: 0 0 0 1px var(--line); text-decoration: none; font-weight: 600; font-size: .95rem; }
.rs .chip svg { width: 16px; color: var(--secondary-words, var(--brand-secondary)); }
.rs .chip:hover { box-shadow: 0 0 0 1.5px var(--brand-primary); }
@media (max-width: 760px) { .rs .start-grid { grid-template-columns: minmax(0, 1fr); } .rs .link-row { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 14px; padding: 16px; } .rs .link-row .ic { width: 48px; height: 48px; } }

/* ---------- proof ticker ---------- */
.rs .ticker { background: var(--brand-secondary); color: var(--on-secondary); overflow: hidden; padding-block: 22px; }
.rs .ticker-track { display: flex; gap: 48px; width: -moz-max-content; width: max-content; animation: rs-tick var(--strip-time, 38s) linear infinite; }
.rs .ticker-run { display: flex; gap: 48px; flex: none; }
.rs .ticker p { font: 700 clamp(1.3rem, 2.4vw, 2rem)/1 var(--font-display); letter-spacing: -.02em; white-space: nowrap; display: flex; align-items: center; gap: 48px; }
.rs .ticker p::after { content: ""; width: 14px; height: 14px; background: currentColor; opacity: .5; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
/* one run to the left (site-runtime.ts runningStrips sets the run and its time; with no script, and on the review rows, the two runs at -50%) */
@keyframes rs-tick { to { transform: translateX(calc(-1 * var(--strip-copy, 50%))); } }

/* ---------- every path home (the flow) ---------- */
.rs .paths { background: var(--night); color: #fff; position: relative; overflow: hidden; }
.rs .paths::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .45;
  background-image: linear-gradient(var(--night-line) 1px, transparent 1px), linear-gradient(90deg, var(--night-line) 1px, transparent 1px);
  background-size: 56px 56px; -webkit-mask-image: radial-gradient(60% 60% at 50% 55%, #000, transparent 80%); mask-image: radial-gradient(60% 60% at 50% 55%, #000, transparent 80%); }
.rs .paths::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(40% 40% at 50% 58%, color-mix(in oklch, var(--brand-tertiary) 16%, transparent), transparent 70%),
              radial-gradient(40% 50% at 0% 0%, color-mix(in oklch, var(--brand-primary) 45%, transparent), transparent 70%); }
.rs .paths .wrap { position: relative; z-index: 1; }
.rs .paths .lede { color: color-mix(in oklch, white 68%, transparent); }
.rs .paths .h2 .serif { color: var(--secondary-fig-night, var(--secondary-lit)); }
.rs .flow { position: relative; display: grid; grid-template-columns: 1fr minmax(260px, 320px) 1fr; align-items: center; gap: 0 clamp(60px, 9vw, 150px); }
.rs .flow-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.rs .flow-col { display: grid; gap: 12px; position: relative; z-index: 1; }
.rs .flow-col h3 { font: 500 .9rem/1 var(--font-body); color: color-mix(in oklch, white 50%, transparent); margin-bottom: 4px; }
.rs .flow-col.right h3 { text-align: right; }
.rs .sit, .rs .prog {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; border: 0;
  background: color-mix(in oklch, white 6%, transparent); box-shadow: inset 0 0 0 1px var(--night-line);
  color: #fff; font-weight: 600; font-size: .98rem; text-align: left; cursor: pointer;
  transition: background .3s, box-shadow .3s, transform .3s var(--ease), opacity .3s;
}
.rs .sit svg, .rs .prog svg { width: 20px; height: 20px; flex: none; color: var(--secondary-night-words, var(--brand-secondary)); }
.rs .prog p { line-height: 1.3; }
.rs .sit small, .rs .prog small { display: block; font-weight: 400; font-size: .8rem; color: color-mix(in oklch, white var(--sit-quiet-share, 52%), transparent); }
.rs .sit:hover, .rs .sit.is-on { background: color-mix(in oklch, var(--brand-tertiary) 20%, transparent); box-shadow: inset 0 0 0 1.5px var(--tertiary-lit); transform: translateX(4px); }
.rs .prog { background: #fff; color: var(--ink); box-shadow: none; cursor: default; }
.rs .prog svg { color: var(--secondary-words, var(--brand-secondary)); }
.rs .prog small { color: var(--ink-2); }
.rs .prog.is-on { box-shadow: 0 0 0 3px var(--tertiary-lit), 0 0 40px -6px var(--brand-tertiary); transform: translateX(-4px); }
.rs .flow.has-pick .sit:not(.is-on), .rs .flow.has-pick .prog:not(.is-on) { opacity: .38; }
.rs .flow.has-pick .prog:not(.is-on) { opacity: .55; background: color-mix(in oklch, white 7%, transparent); color: #fff; box-shadow: inset 0 0 0 1px var(--night-line); }
.rs .flow.has-pick .prog:not(.is-on) small { color: color-mix(in oklch, white 50%, transparent); }
.rs .flow.has-pick .prog:not(.is-on) svg { color: var(--secondary-night-words, var(--brand-secondary)); }
.rs .hub {
  position: relative; z-index: 1; border-radius: 28px; padding: 26px 22px 22px; text-align: center; color: var(--ink);
  background: #fff; box-shadow: 0 0 0 6px color-mix(in oklch, white 7%, transparent), 0 0 90px -10px color-mix(in oklch, var(--brand-tertiary) 70%, transparent);
  display: grid; gap: 10px; justify-items: center;
}
.rs .hub::before { content: ""; position: absolute; inset: -14px; border-radius: 38px; z-index: -1; box-shadow: 0 0 0 1px color-mix(in oklch, var(--tertiary-lit) 50%, transparent); animation: rs-hubpulse 3s ease-out infinite; }
@keyframes rs-hubpulse { 0% { opacity: 1; transform: scale(.96); } 100% { opacity: 0; transform: scale(1.08); } }
.rs .avatar {
  width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; position: relative;
  background: linear-gradient(145deg, color-mix(in oklch, var(--brand-primary) 80%, white), var(--brand-primary));
  color: var(--on-primary); font: 800 1.8rem/1 var(--font-display); letter-spacing: -.04em;
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--brand-secondary);
}
.rs .hub h3 { font: 700 1.35rem/1.1 var(--font-display); letter-spacing: -.02em; }
/* the name holds one line (words.tsx pairFit, --last-pair: a two-word name's characters): a long name ("Alexandria
   Montgomery-Whitfield", 348px at 21.6px in a 276px card) is set just small enough for the card */
.rs .hub { container-type: inline-size; }
.rs .hub h3[style*="--last-pair"] { font-size: min(1.35rem, calc(100cqi / (var(--last-pair) * .54))); }
.rs .hub .nmls { font-size: .82rem; color: var(--secondary-words, var(--brand-secondary)); }
.rs .hub .rating { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; font-weight: 600; }
.rs .match { margin-top: 6px; width: 100%; border-top: 1px solid var(--line); padding-top: 14px; display: grid; gap: 12px; }
.rs .match p { font-size: .9rem; line-height: 1.45; color: var(--ink-2); min-height: 3.9em; }
.rs .match p strong { color: var(--ink); }
.rs .match .btn { --button-pad-block: .9em; --button-pad: 1.2em; --button-size: .95rem; width: 100%; }
/* phones: one column of situations; tapping one opens its loan right under it */
.rs .sit-more { display: none; }
@keyframes rs-open { from { opacity: 0; transform: translateY(-6px); } }
@media (max-width: 760px) {
  .rs .flow { gap: 0; }
  .rs .flow-svg, .rs .hub, .rs .flow-col.right { display: none; }
  .rs .flow-col.left { grid-template-columns: 1fr; gap: 10px; }
  .rs .flow-col.left h3 { text-align: left; }
  .rs .sit { position: relative; padding: 18px 48px 18px 18px; font-size: 1.02rem; }
  .rs .sit::after {
    content: ""; position: absolute; right: 20px; top: 50%; width: 9px; height: 9px; margin-top: -7px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; opacity: .6;
    transform: rotate(45deg); transition: transform .3s var(--ease);
  }
  .rs .sit.is-on::after { transform: rotate(-135deg); margin-top: -2px; }
  .rs .flow.has-pick .sit:not(.is-on) { opacity: .6; }
  .rs .sit.is-on + .sit-more { display: grid; gap: 14px; animation: rs-open .35s var(--ease); }
  .rs .sit-more { padding: 18px; border-radius: 18px; background: #fff; color: var(--ink); }
  .rs .sm-prog { display: flex; align-items: center; gap: 12px; font-weight: 700; line-height: 1.25; }
  .rs .sm-prog svg { width: 20px; height: 20px; flex: none; color: var(--secondary-night-words, var(--brand-secondary)); }
  .rs .sm-prog small { display: block; font-weight: 400; font-size: .85rem; color: var(--ink-2); }
  .rs .sm-msg { font-size: .95rem; line-height: 1.5; color: var(--ink-2); }
  .rs .sit-more .btn { width: 100%; }
  .rs[data-mode="light"] .sit-more { box-shadow: 0 0 0 1px var(--line); }
}
@media (max-width: 900px) {
  .rs .flow { grid-template-columns: 1fr; gap: 56px; }
  .rs .flow-col { grid-template-columns: 1fr 1fr; }
  .rs .flow-col h3, .rs .flow-col.right h3 { grid-column: 1 / -1; text-align: center; }
  .rs .sit:hover, .rs .sit.is-on, .rs .prog.is-on { transform: none; }
  .rs .hub { max-width: 360px; width: 100%; margin-inline: auto; }
}

/* ---------- calculators bento ---------- */
.rs .calcs .bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.rs .calc-card {
  grid-column: span 4; position: relative; border-radius: 26px; padding: 28px; overflow: hidden;
  background: var(--mist); display: grid; align-content: space-between; gap: 22px; min-height: 290px;
  border: 0; text-align: left; text-decoration: none; cursor: pointer; color: var(--ink);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.rs .calc-card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -36px color-mix(in oklch, var(--brand-primary) 70%, transparent); }
.rs .calc-card.wide { grid-column: span 8; background: var(--night); color: #fff; }
.rs .calc-card.wide .desc { color: color-mix(in oklch, white 65%, transparent); }
.rs .calc-card.tall { grid-row: span 2; }
.rs .calc-card .t { display: block;  font: 700 1.5rem/1.1 var(--font-display); letter-spacing: -.02em; }
.rs .calc-card .desc { display: block;  color: var(--ink-2); font-size: .96rem; margin-top: 8px; max-width: 34ch; }
.rs .calc-card .open { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .95rem; }
.rs .calc-card .open svg { width: 16px; transition: transform .25s var(--ease); }
.rs .calc-card:hover .open svg { transform: translateX(4px); }
.rs .calc-art { width: 100%; height: auto; }
/* the drawings' marks (a donut's lead arc, a dot, a bar, a tick) and the payment's figure are details, so the secondary at its 3:1
   mark (the figure: its AA words) on the ground under them: the cards' mist, the wide card's night (the light band in the light
   tone); on the calculators page's frame, whose drawing sits on the primary's tint fading to the page, its 3:1 mark on the tint
   (the page it fades to lies further from the mark in both tones) (Andrew, 2026-10-16: the button colour is the main buttons and the text links only) */
.rs .calc-card .art-mark { fill: var(--secondary-mark-on-mist); }
.rs .calc-card .art-line { stroke: var(--secondary-mark-on-mist); }
.rs .calc-card.wide .art-mark { fill: var(--secondary-night-mark); }
.rs .calc-card.wide .art-line { stroke: var(--secondary-night-mark); }
.rs .calc-card.wide .art-words { fill: var(--secondary-night-words); }
.rs .calc-frame-art .art-mark { fill: var(--secondary-mark-on-tint); }
.rs .calc-frame-art .art-line { stroke: var(--secondary-mark-on-tint); }
/* the payment donuts' third series (theme.ts donutThird: the chart rule's first colour told apart from the two arcs beside it,
   3:1 on the card, never the button colour's hue, never a grey), by the card under it */
.rs .calc-card.wide circle.art-third { stroke: var(--series-third); }
.rs .calc-card.wide rect.art-third { fill: var(--series-third); }
.rs .calc-frame-art circle.art-third { stroke: var(--series-third-frame); }
.rs .calc-frame-art rect.art-third { fill: var(--series-third-frame); }
.rs .calcs-foot { margin-top: 34px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
@media (max-width: 960px) { .rs .calc-card, .rs .calc-card.wide { grid-column: span 12; } .rs .calc-card.tall { grid-row: auto; } }
@media (min-width: 961px) and (max-width: 1100px) { .rs .calc-card { grid-column: span 6; } .rs .calc-card.wide { grid-column: span 12; } }
/* the home shows the owner's three cards at most (kinds/calculator-grid.ts MAX_CALC_CARDS): one, two or three leave no cell
   empty — a lone wide card runs the row, a tall card that is last stands one row high, a third card beside the tall one takes
   the rest of its row */
.rs .calc-card.wide:only-child { grid-column: span 12; }
.rs .calc-card.tall:last-child { grid-row: auto; }
@media (min-width: 1101px) { .rs .calc-card.tall + .calc-card:last-child { grid-column: span 8; } }
@media (min-width: 961px) and (max-width: 1100px) { .rs .calc-card.tall { grid-row: auto; } .rs .calc-card.tall:last-child { grid-column: span 12; } }

/* ---------- process ---------- */
.rs .process { background: var(--mist); }
.rs .steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: step; }
.rs .step { position: relative; background: var(--paper); border-radius: 26px; padding: 30px 28px 32px; box-shadow: 0 0 0 1px var(--line); }
.rs .step .when { display: inline-flex; align-items: baseline; gap: 8px; margin-bottom: 26px; }
.rs .step .when b { font: 800 3.6rem/.9 var(--font-display); letter-spacing: -.05em; color: var(--primary-figure, var(--brand-primary)); }
.rs .step .when span { font-weight: 600; color: var(--ink-2); }
.rs .step h3 { font: 700 1.3rem/1.2 var(--font-display); letter-spacing: -.015em; margin-bottom: 8px; }
.rs .step p { color: var(--ink-2); font-size: .97rem; }
.rs .step:last-child { background: var(--primary-fill, var(--brand-primary)); color: var(--on-primary); box-shadow: none; }
.rs .step:last-child .when b { color: var(--secondary-on-primary, var(--secondary-lit)); }
.rs .step:last-child .when span, .rs .step:last-child p { color: color-mix(in oklch, var(--on-primary) var(--step-quiet-share, 72%), transparent); }
.rs .steps-bar { height: 4px; border-radius: 4px; background: var(--line); margin: 0 0 18px; overflow: hidden; }
.rs .steps-bar i { display: block; height: 100%; width: 100%; background: var(--secondary-mark, var(--brand-secondary)); transform-origin: left; transform: scaleX(0); transition: transform 1.8s var(--ease); }
.rs .steps-bar.is-in i { transform: scaleX(1); }
@media (max-width: 860px) { .rs .steps { grid-template-columns: 1fr; } }

/* ---------- reviews ---------- */
.rs .reviews { overflow: hidden; }
.rs .reviews-top { display: grid; grid-template-columns: auto 1fr; gap: clamp(30px, 6vw, 90px); align-items: end; margin-bottom: 56px; }
.rs .score { display: grid; gap: 10px; align-content: end; }
.rs .score .big { font: 800 clamp(6rem, 13vw, 10rem)/.8 var(--font-display); letter-spacing: -.06em; color: var(--primary-figure, var(--brand-primary)); }
.rs .score .stars svg { width: 26px; height: 26px; }
.rs .score p { color: var(--ink-2); font-weight: 500; display: flex; align-items: center; gap: 8px; }
.rs .score p svg { width: 16px; }
.rs .reviews-top .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
/* each row glides at the concept's pace (five cards a turn: 70s, the second row 85s) whatever a turn holds (--rv-n, Reviews.tsx) */
.rs .rv-row { display: flex; gap: 16px; width: -moz-max-content; width: max-content; animation: rs-tick calc(var(--rv-n, 5) * 14s) linear infinite; }
.rs .rv-row + .rv-row { margin-top: 16px; animation-direction: reverse; animation-duration: calc(var(--rv-n, 5) * 17s); }
.rs .reviews:hover .rv-row { animation-play-state: paused; }
.rs .rv {
  width: 360px; flex: none; border-radius: 22px; padding: 22px 24px; background: var(--mist); display: grid; gap: 14px; align-content: start;
}
.rs .rv blockquote { font-size: 1rem; line-height: 1.5; }
.rs .rv figcaption { display: flex; align-items: center; gap: 10px; font-size: .88rem; color: var(--ink-2); }
.rs .rv .who { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 700 .85rem/1 var(--font-display); background: var(--primary-tint); color: var(--primary-words-tint, var(--brand-primary)); }
.rs .rv figcaption strong { color: var(--ink); display: block; }
/* a row of fewer than five reviews stands still (Reviews.tsx GLIDE_MIN: a shorter loop would show one reviewer twice at
   once): its cards side by side, centred, each at most a gliding card's width, one under another on a phone */
.rs .rv-still { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.rs .rv-still .rv { width: auto; flex: 1 1 280px; max-width: 360px; }
/* the Reviews page's still grid (a site with its reviews stored): the loop's cards, side by side, as wide as the column allows */
.rs .rv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rs .rv-grid .rv { width: auto; }
/* never a card alone on its row (reviews-shown.ts reviewGrid, the grid's data-cols and data-tail, laid out again as "Show
   more" adds cards): one centred; two or four two across; three across on six tracks, each card two of them, so a last pair
   (or two pairs) stands centred at a card's width. A tablet sets two across (an odd last card centred at a card's width),
   a phone one */
@media (min-width: 961px) {
  .rs .rv-grid[data-cols="1"] { grid-template-columns: minmax(0, 620px); justify-content: center; }
  .rs .rv-grid[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; margin-inline: auto; }
  .rs .rv-grid[data-cols="3"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .rs .rv-grid[data-cols="3"] > .rv { grid-column: span 2; }
  .rs .rv-grid[data-tail="pair"] > .rv:nth-last-child(2),
  .rs .rv-grid[data-tail="pair-pair"] > .rv:is(:nth-last-child(4), :nth-last-child(2)) { grid-column: 2 / span 2; }
}
@media (min-width: 641px) and (max-width: 960px) {
  .rs .rv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rs .rv-grid[data-cols="1"] { grid-template-columns: minmax(0, 620px); justify-content: center; }
  .rs .rv-grid:not([data-cols="1"]) > .rv:last-child:nth-child(2n+1) { grid-column: 1 / -1; justify-self: center; width: calc((100% - 16px) / 2); }
}
@media (max-width: 640px) { .rs .rv-grid { grid-template-columns: minmax(0, 1fr); } }
/* the Reviews page: the featured review as one wide card over the grid, its words a size up in the display face */
.rs .rv.rv-feature { width: auto; margin-bottom: 16px; padding: clamp(28px, 3.6vw, 48px) clamp(26px, 4vw, 56px); gap: 20px; border-radius: 28px; }
.rs .rv-feature blockquote { font: 600 clamp(1.3rem, 2.1vw, 1.75rem)/1.4 var(--font-display); letter-spacing: -.012em; max-width: 46ch; text-wrap: pretty; }
.rs .rv-feature .who { width: 44px; height: 44px; }
.rs .rv-read { justify-self: start; font-weight: 600; font-size: .92rem; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; padding-block: 6px; margin-block: -6px; }
@media (max-width: 760px) { .rs .reviews-top { grid-template-columns: 1fr; } .rs .rv { width: 300px; } }

/* ---------- guarantee ---------- */
.rs .guarantee { padding-block: 0 clamp(80px, 11vw, 150px); }
.rs .g-panel {
  border-radius: var(--r-panel); overflow: hidden; position: relative;
  /* the secondary, or its nearest shade its words read on at AA (theme.ts secondaryPanel: brand-engine buttonFill) */
  background: var(--secondary-panel, var(--brand-secondary)); color: var(--on-secondary-panel, var(--on-secondary));
  /* a track never grows past its share (minmax(0, …fr)): `1.1fr 1fr` let the figure's min-content width eat the panel and
     pushed the copy column past its right edge, clipped by overflow (Andrew, 2026-10-23); the panel is the size container
     the figure is set from (cqi), so it fits its own column whatever the viewport */
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 40px; padding: clamp(36px, 6vw, 80px);
  container-type: inline-size;
}
.rs .g-panel::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 80% at 0% 100%, color-mix(in oklch, white 30%, transparent), transparent 60%),
              repeating-linear-gradient(115deg, transparent 0 22px, color-mix(in oklch, white 7%, transparent) 22px 23px); }
/* the figure is set to its own column (cqi of the panel, measured against the 1.1fr track and a "$10,000"'s width), never
   to the viewport: 14vw filled the panel on a wide screen and overran it; a number never wraps */
.rs .g-amount { font: 800 clamp(2.4rem, 12cqi, 11.5rem)/.8 var(--font-display); letter-spacing: -.06em; position: relative; white-space: nowrap; }
/* one column (the callout's frame, and every phone) gives the figure the panel's whole width, so it may draw larger */
.rs .callout .g-amount { font-size: clamp(2.4rem, 23cqi, 11.5rem); }
/* the owner's own words for the big line (a phrase, not "$1,000") draw in the words size — the figure size is a figure's */
.rs .g-amount[data-len="words"] { font-size: clamp(2.6rem, 5.5vw, 4.5rem); line-height: 1.06; letter-spacing: -.03em; white-space: normal; }
.rs .g-copy { position: relative; display: grid; gap: 18px; min-width: 0; }
.rs .g-copy h2 { font: 700 clamp(1.8rem, 3vw, 2.5rem)/1.05 var(--font-display); letter-spacing: -.025em; }
/* the quieter words' opacities, raised until they read on the panel (theme.ts secondaryPanel) */
.rs .g-copy p { opacity: var(--panel-quiet-share, 82%); max-width: 44ch; }
.rs .g-copy .row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
/* the offer's main button on its panel (the secondary): the owner's button colour EXACTLY (theme.ts --cta-on-secondary, Andrew
   2026-10-24), with a 1px edge of its own hue only where its fill nearly vanishes into the panel (--cta-on-secondary-edge) */
.rs .g-panel .btn-cta { --cta-edge: var(--cta-on-secondary-edge, transparent); background: var(--cta-on-secondary, var(--cta)); color: var(--on-cta-on-secondary, var(--on-cta)); }
.rs .g-copy .terms { font-size: .9rem; font-weight: 600; opacity: var(--panel-terms-share, 85%); }

/* the offer's own pieces beyond the promise (sections/kinds/offer.ts): the label above the heading, the strip under the
   buttons, and a picture the owner sets beside the panel — the callout's frame, with the panel stacking its big line over
   its words to fit; with no picture the panel is the whole offer, as it always was */
.rs .g-copy .g-eyebrow { font: 700 .78rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; opacity: var(--panel-eyebrow-share, 95%); }
.rs .g-copy .g-cap { display: flex; flex-wrap: wrap; gap: 4px 18px; padding-top: 16px; border-top: 1px solid color-mix(in oklch, var(--on-secondary-panel, var(--on-secondary)) 25%, transparent); font-size: .9rem; opacity: var(--panel-terms-share, 85%); }
.rs .g-copy .g-cap b { font-weight: 700; }
.rs .g-copy .g-cap i { font-style: italic; }
.rs .callout .g-panel { grid-template-columns: minmax(0, 1fr); gap: 22px; }
.rs .awards { display: flex; flex-wrap: wrap; gap: 10px; }
.rs .award { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: color-mix(in oklch, var(--on-secondary) 10%, transparent); font-size: .85rem; font-weight: 600; }
.rs .award svg { width: 16px; }
@media (max-width: 860px) { .rs .g-panel { grid-template-columns: minmax(0, 1fr); } .rs .g-amount { font-size: clamp(2.4rem, 23cqi, 11.5rem); } }

/* ---------- meet ---------- */
.rs .meet-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(30px, 6vw, 80px); align-items: center; }
.rs .portrait {
  aspect-ratio: 4 / 5; border-radius: var(--r-panel); position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--brand-primary), var(--night));
  display: grid; place-items: center; color: #fff;
}
.rs .portrait::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 70% 25%, color-mix(in oklch, var(--brand-tertiary) 40%, transparent), transparent 70%); }
.rs .portrait .initials { font: 800 clamp(7rem, 16vw, 12rem)/1 var(--font-display); letter-spacing: -.07em; position: relative; color: color-mix(in oklch, white 92%, transparent); }
.rs .portrait .slot { position: absolute; left: 20px; bottom: 20px; right: 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rs .portrait .slot p { font-size: .85rem; color: color-mix(in oklch, white 70%, transparent); }
/* the intro video's button: always dark words on its white pill (the tone's --ink is light on a dark site), with a shadow that lifts it off any photo */
.rs .play { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 999px; background: #fff; color: #10131a; border: 0; cursor: pointer; font-weight: 600; font-size: .92rem; box-shadow: 0 6px 20px -6px rgb(5 7 12 / .55), 0 0 0 1px rgb(5 7 12 / .08); }
.rs .play i { position: relative; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--cta); color: var(--on-cta); }
.rs .play svg { width: 16px; }
/* the play control pulses — a quiet ring leaving the chip on its beat (Andrew, 2026-10-08: "the video button should
   pulse"); the sheet's reduce block stills it like every other motion */
.rs .play i::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--cta); animation: rs-playping 2.8s ease-out infinite; }
@keyframes rs-playping { 0% { transform: scale(.72); opacity: 0; } 25% { opacity: .9; } 60%, 100% { transform: scale(1.22); opacity: 0; } }
.rs .meet-copy { display: grid; gap: 22px; }
.rs .meet-copy .lede { color: var(--ink-2); }
/* each fact as wide as its words: a row holds the facts that fit, each growing to fill it (so no empty cell shows), and a
   fact that cannot fit beside the others (the office's two lines) moves to a row of its own, whole */
.rs .facts { display: flex; flex-wrap: wrap; gap: 1px; background: var(--line); border-radius: 20px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.rs .fact { flex: 1 1 auto; background: var(--paper); padding: 18px 20px; }
.rs .fact p:first-child { font-size: .85rem; color: var(--secondary-words, var(--brand-secondary)); }
.rs .fact p:last-child { font-weight: 600; margin-top: 2px; }
.rs .fact a { text-decoration: none; }
@media (max-width: 860px) { .rs .meet-grid { grid-template-columns: 1fr; } .rs .portrait { aspect-ratio: 4/3; } }

/* ---------- final cta ---------- */
.rs .final { padding-block: clamp(80px, 11vw, 150px); }
/* one track as wide as the panel: it grew to the heading's words and the panel cut "mortgage" and the line under it at 360 */
.rs .final-panel {
  border-radius: var(--r-panel); background: var(--night); color: #fff; text-align: center; position: relative; overflow: hidden;
  padding: clamp(60px, 9vw, 120px) 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; justify-items: center;
}
.rs .final-panel::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50% 70% at 50% 110%, color-mix(in oklch, var(--brand-tertiary) 45%, transparent), transparent 70%),
              radial-gradient(40% 50% at 0% 0%, color-mix(in oklch, var(--brand-primary) 60%, transparent), transparent 70%); }
.rs .final-panel > * { position: relative; }
.rs .final-panel h2 { font-size: clamp(3rem, 8vw, 6.4rem); }
.rs .final-panel .lede { color: color-mix(in oklch, white 70%, transparent); }
.rs .final-panel .row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
/* two buttons stacked on a phone share one width, the wider one's (Andrew, 2026-10-20, mortgagepops.com: "CTA buttons need to auto
   size to the same width as the larger button when stacked like this"): one column as wide as the widest, each button stretched
   to it; side by side on a wider screen they keep their own widths (templates/__tests__/button-pair-width) */
@media (max-width: 560px) { .rs :is(.g-copy, .final-panel) > .row { display: grid; grid-template-columns: minmax(0, max-content); } }
.rs .final-phone { font: 700 clamp(1.4rem, 3vw, 2rem)/1 var(--font-display); letter-spacing: -.02em; text-decoration: none; color: var(--phone-ink, var(--primary-lit)); }

/* ---------- footer ---------- */
.rs .foot { padding-block: 56px 120px; font-size: .86rem; color: var(--ink-2); border-top: 1px solid var(--line); }
.rs .foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; }
/* the footer's brand: the person under the company in the footer's own quiet ink (at the header's 65% it read at 3.3:1 on the day's paper) */
.rs .foot .mark-words > span { opacity: 1; }
.rs .foot h4 { font: 700 .95rem/1.2 var(--font-display); color: var(--ink); margin-bottom: 12px; }
.rs .foot li + li { margin-top: 6px; }
.rs .foot a { text-decoration: none; }
.rs .foot a:hover, .rs .foot .linkbtn:hover { color: var(--ink); }
/* the legal band, full width under the columns (legal-band.css): the footer's quiet ink, the holders in its own */
.rs .foot .legal { --legal-mark: 40px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); gap: 18px; line-height: 1.55; }
.rs .foot .legal-ids strong { color: var(--ink); }
/* the official Equal Housing artwork for the footer's ground (legal-band.ts draws both; legal-eho-grounds.test): the footer is
   the page's paper in both tones (page tone, 2026-10-24), which takes the artwork drawn for the light ground */
.rs .foot .legal-eho-on-light { display: block; }
.rs .foot .legal-eho-on-dark { display: none; }
.rs .foot .legal-ids strong { font-weight: 600; }
.rs .foot .legal-links { border-top-color: var(--line); }
.rs .foot .legal-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rs .eho { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); }
.rs .eho svg { width: 22px; }
.rs .powered { margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; }
@media (max-width: 800px) { .rs .foot-grid { grid-template-columns: 1fr; } }
/* a thumb's reach on a phone: a link that stands on its own (never words in a sentence) is at least 32px tall. The footer's
   lists get real 32px rows and the "Powered by" pill its 32px; a link alone in its place (the closing panel's phone, the rating
   badge, a teammate's name) reaches 32px with padding its negative margin gives back, so nothing around it moves */
@media (max-width: 600px) {
  .rs .foot-grid .foot-fold ul > li > :is(a, .linkbtn) { display: inline-flex; align-items: center; min-height: 32px; }
  .rs .foot-grid .foot-fold ul > li + li { margin-top: 0; }
  .rs .powered a { min-height: 32px; }
  .rs :is(.final-phone, .gbadge) { padding-block: 5px; margin-block: -5px; }
  .rs .team-copy .h3 a { display: inline-block; padding-block: 6px; margin-block: -6px; }
}

/* ---------- mobile action bar ---------- */
.rs .mbar { display: none; }
@media (max-width: 760px) {
  .rs .mbar {
    position: fixed; z-index: 55; left: 10px; right: 10px; bottom: 10px; display: grid; grid-template-columns: 52px 52px 1fr; gap: 8px;
    padding: 8px; border-radius: 22px; background: color-mix(in oklch, white 88%, transparent);
    box-shadow: 0 0 0 1px var(--line), 0 20px 40px -20px color-mix(in oklch, var(--ink) 60%, transparent);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    transform: translateY(140%); transition: transform .4s var(--ease);
  }
  .rs .mbar.is-on { transform: none; }
  .rs .mbar a:not(.btn) { display: grid; place-items: center; border-radius: 15px; background: var(--mist); color: var(--brand-primary); }
  .rs .mbar a:not(.btn) svg { width: 20px; }
  .rs .mbar .btn { --pad: .95em 1em; }
  /* two buttons (the header's main, then its second: chrome-kit `phoneButtons`): they share the bar; a label too long for one line wraps */
  .rs .mbar:has(> .btn ~ .btn) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rs .mbar:has(> .btn ~ .btn) .btn { --pad: .7em .4em; white-space: normal; text-wrap: balance; text-align: center; line-height: 1.15; }
  /* the bar's Text and Call give way to the two buttons: both live in the phone menu's pair (REBEL SITES, 2026-10-27) */
  .rs .mbar:has(> .btn ~ .btn) > :not(.btn) { display: none; }
}

/* ---------- editor preview: the words the owner is editing, marked in the editor's pink ---------- */
.rs[data-preview] .rs-editing:not([data-sel]) {
  background: color-mix(in srgb, #e0007e 16%, transparent); box-shadow: 0 0 0 2px #e0007e; border-radius: 4px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background .2s, box-shadow .2s;
}
/* a thing being edited (a button, a picture, when its field has no words of their own) is only ringed outside its edge: its own fill, shape and shadow stay (Andrew, 2026-10-14: the video button went see-through while its words were edited) */
.rs[data-preview] [data-sel].rs-editing { outline: 2px solid #e0007e; outline-offset: 3px; }

/* ---------- editor preview, Edit mode (edit-mode.ts): what a click selects, outlined and named ----------
   The pointer's thing is dashed, the selected one solid; a section's outline sits inside its edge. A video's
   player is a frame of its own that no click on the page reaches, so in Edit mode a click on it lands on the page. */
.rs[data-preview][data-rs-mode="edit"] iframe { pointer-events: none; }
.rs[data-preview] .rs-sel-hover { outline: 2px dashed #e0007e; outline-offset: 2px; }
.rs[data-preview] .rs-sel-on { outline: 2px solid #e0007e; outline-offset: 2px; }
.rs[data-preview] [data-sel-section].rs-sel-hover, .rs[data-preview] [data-sel-section].rs-sel-on { outline-offset: -3px; }
.rs[data-preview] .rs-sel-tag {
  position: fixed; z-index: 2147483000; pointer-events: none; padding: 4px 8px; border-radius: 6px;
  background: #e0007e; color: #fff; font: 600 12px/1.2 system-ui, sans-serif; letter-spacing: 0; white-space: nowrap;
  box-shadow: 0 4px 12px -4px rgb(0 0 0 / .35); animation: rs-seltag .12s ease-out;
}
.rs[data-preview] .rs-sel-tag[hidden] { display: none; }
@keyframes rs-seltag { from { opacity: 0; transform: translateY(3px); } }

/* ---------- reveal on scroll (one gentle move, content only) ----------
   Hidden only once the runtime arms it (it starts below the fold): without the script, everything shows. */
.rs .reveal { transition: opacity .9s var(--ease), transform .9s var(--ease); }
.rs .reveal.is-armed:not(.is-in) { opacity: 0; transform: translateY(18px); }
.rs .reveal.is-in { opacity: 1; transform: none; }

/* ---------- the page's entrance (templates/entrance.tsx) ----------
   While the page's faces load (html.rs-entering, at most a second) the site is held back (hidden, so nothing it does then
   is seen or counted as a shift), so it is never seen in the fallback faces re-wrapping into the real ones; then it
   shows at once (a fade of the whole page would hide its first paint from the browser's own measures) and the opening
   band's words rise into place, and nothing else moves. rs-gate is the stylesheet's own limit: the site shows by 1.6 s
   even if the script's timer never fires. */
html:has(.rs).rs-entering .rs { opacity: 0; visibility: hidden; animation: rs-gate 0s 1.6s forwards; }
/* the ground under the page while it waits (<body>): the site's own opening band, its --night in each tone (the light
   tone's light band, the dark tone's brand-mixed night), as the page's entrance writes it on <html> from the theme
   (--rs-ground-top-l / -d, ground.ts: the same colour the page's root carries); without the entrance, the band's own mix from
   the brand it puts there (--rs-brand, entrance.tsx), and without that, the band's own base. Past the page's top and bottom
   edges (a phone's rubber band and safe areas, a trackpad's overscroll) <html> shows the colour behind the see-through header
   (that band) and the footer's ground (ground.ts; ground.css steps between them), the band's mix only their fallback */
html:has(.rs):has(.rs[data-mode="light"]) body { background-color: var(--rs-ground-top-l, color-mix(in oklch, var(--rs-brand, #f6f7fa) 5%, #f6f7fa)); }
html:has(.rs):not(:has(.rs[data-mode="light"])) body { background-color: var(--rs-ground-top-d, color-mix(in oklch, var(--rs-brand, #05070c) 22%, #05070c)); }
html:has(.rs):has(.rs[data-mode="light"]) { --rs-ground-top: var(--rs-ground-top-l, color-mix(in oklch, var(--rs-brand, #f6f7fa) 5%, #f6f7fa)); --rs-ground-bottom: var(--rs-ground-bottom-l, var(--rs-ground-top)); background-color: var(--rs-ground-top); }
html:has(.rs):not(:has(.rs[data-mode="light"])) { --rs-ground-top: var(--rs-ground-top-d, color-mix(in oklch, var(--rs-brand, #05070c) 22%, #05070c)); --rs-ground-bottom: var(--rs-ground-bottom-d, var(--rs-ground-top)); background-color: var(--rs-ground-top); }
html:has(.rs).rs-entering .rs * { animation-play-state: paused !important; }  /* important: an entrance's `animation` shorthand resets the play state, and an :is() holding a compound selector outranks this rule (it ran golden hour's, meridian's, quartz's and villa's entrances behind the gate, 2026-10-17) */
@keyframes rs-gate { to { opacity: 1; visibility: visible; } }
@media (prefers-reduced-motion: no-preference) {
  .rs :is(.hero-copy, .page-intro .wrap, .calc-hero .wrap, .member .meet-grid) { animation: rs-enter .8s var(--ease) both; }
}
/* from all but invisible, never 0: the browser does not count words that start at opacity 0 as the page's largest paint */
@keyframes rs-enter { from { opacity: .01; transform: translateY(16px); } }

@media (prefers-reduced-motion: reduce) {
  .rs *, .rs *::before, .rs *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .rs .reveal.is-armed:not(.is-in) { opacity: 1; transform: none; }
  .rs .rv-row, .rs .ticker-track { animation: none !important; flex-wrap: wrap; width: auto; }
  /* the review rows still: each review once, a turn's repeats and the seamless copy (hidden from a screen reader already) hidden */
  .rs .rv-row > .rv[aria-hidden] { display: none; }
  /* the strip still: its lines wrap once, the second run (a loop's twin) hidden */
  .rs .ticker-run { flex: 1 1 100%; flex-wrap: wrap; row-gap: 12px; }
  .rs .ticker-run[aria-hidden] { display: none; }
}

/* flow lines (drawn by lo.js) */
.rs .flow-svg .fl-base { fill: none; stroke: color-mix(in oklch, var(--primary-lit) 45%, transparent); stroke-width: 1.4; stroke-dasharray: 3 6; animation: rs-dash 1.6s linear infinite; transition: opacity .3s; }
.rs .flow-svg .fl-lit { fill: none; stroke: var(--tertiary-lit); stroke-width: 2.4; opacity: 0; transition: opacity .3s; filter: drop-shadow(0 0 6px var(--brand-tertiary)); }
.rs .flow-svg .fl-dot { fill: var(--secondary-night-mark, var(--brand-secondary)); transition: opacity .3s; }
@keyframes rs-dash { to { stroke-dashoffset: -18; } }

/* ---------- phone refinements ---------- */
.rs .play { white-space: nowrap; }
@media (max-width: 600px) {
  .rs .claim { font-size: .8rem; }
  .rs .claim .wrap { gap: 8px 12px; padding-block: 8px; }
  .rs .claim .btn { --pad: .45em .95em; font-size: .8rem; }
  /* the bar's lines go on a phone; the footer's brand keeps its lines (every template's footer shows the whole lockup on a phone) */
  .rs .nav .mark-words > .mark-powered { display: none; }
  .rs .mark-words b { font-size: .98rem; }
  /* the officer's name and NMLS are never cut in the phone's bar (REBEL SITES 10-27): too long for the row, they take a second
     line; the NMLS at a size a phone reads; 16px between the lockup and the menu button */
  .rs .nav-in .mark-words > * { white-space: normal; overflow-wrap: break-word; }
  .rs .nav .mark-words > .label { font-size: .75rem; }
  .rs .nav-in { gap: 16px; }
  .rs .nav-in > .btn { display: none; }
  /* the button hidden, the menu button goes to the bar's end itself (the call lives in the phone menu's pair) */
  .rs .nav-in > .burger { margin-left: auto; }
  .rs .hero-pill { font-size: .82rem; }
  .rs .link-row.is-hero .t { font-size: 1.3rem; }
  .rs .calc-art .legend { display: none; }
  .rs .demo { bottom: 92px; left: 12px; }
  .rs .demo-toggle { padding: 8px 12px 8px 8px; font-size: .82rem; }
  .rs .demo-panel { width: min(320px, calc(100vw / var(--z) - 24px)); }
  .rs .sit { background: var(--night-2); }
}

/* ============================================================
   TONE: light mode (the root's data-mode="light")
   The whole page is light (page tone, 2026-10-24): the dark blocks
   above go light (their band is the brand's pale tint), and nothing
   flips dark under this tone. Built from the same three brand
   values, so it works for any brand.
   ============================================================ */
.rs {
  --tertiary-deep: color-mix(in oklch, var(--brand-tertiary) 80%, black);
  --secondary-deep: color-mix(in oklch, var(--brand-secondary) 80%, black);
  /* the page-level values, captured once so a block nested inside a flipped section can restore them */
  --brand-primary-base: var(--brand-primary); --on-primary-base: var(--on-primary);
  --ink-base: var(--ink); --ink-2-base: var(--ink-2); --line-base: var(--line);
  --paper-base: var(--paper); --mist-base: var(--mist); --primary-tint-base: var(--primary-tint);
  /* the primary as words, by the ground under them (the page, the mist, the primary's own tint): small words and large figures
     each the colour itself unless cinematic/theme.ts pushed the shade that reads there (AA, and 3:1 for the figures). The
     light tone's flipped sections and the blocks that flip back inside them say theirs below. */
  --primary-words: var(--primary-ink-page, var(--brand-primary)); --primary-words-mist: var(--primary-ink-mist, var(--brand-primary));
  --primary-words-tint: var(--primary-ink-tint, var(--brand-primary));
  --primary-figure: var(--primary-fig-page, var(--brand-primary)); --primary-figure-mist: var(--primary-fig-mist, var(--brand-primary));
  /* the secondary as the details' words (Andrew, 2026-10-16: the numbers, the tags, the labels), by the ground under them */
  --secondary-words: var(--secondary-ink-page, var(--brand-secondary)); --secondary-words-mist: var(--secondary-ink-mist, var(--brand-secondary));
  --secondary-words-tint: var(--secondary-ink-tint, var(--brand-secondary));
  /* the button colour as the text links, by the ground under them */
  --tertiary-words: var(--tertiary-ink-page, var(--brand-tertiary));
  --tertiary-words-mist: var(--tertiary-ink-mist, var(--brand-tertiary));
  /* the secondary's marks on the night blocks (the situations' icons): the night's, or the light band's in the light tone */
  --secondary-night-words: var(--secondary-ink-night, var(--brand-secondary));
  /* the secondary as a mark (3:1: the steps' bar), by the ground under it */
  --secondary-mark: var(--secondary-mark-page, var(--brand-secondary));
  /* the secondary as a mark on the mist (the facts' hairline, the odd calculator rows' ticks, the page cards' arrows) and on
     the night (the situations' dots): 3:1 there */
  --secondary-mark-on-mist: var(--secondary-mark-mist, var(--brand-secondary));
  /* and on the primary's tint (the calculators page's drawings): 3:1 there */
  --secondary-mark-on-tint: var(--secondary-mark-tint, var(--brand-secondary));
  --secondary-night-mark: var(--secondary-mark-night, var(--brand-secondary));
  /* the payment donuts' third series on the wide card (the night) and on the calculators page's frame (the primary's tint);
     the card's quiet ink only where the theme set none (the v2 prototype) */
  --series-third: var(--series-third-night, var(--ink-2));
  --series-third-frame: var(--series-third-tint, var(--ink-2));
  /* the primary as a fill under its small words (the process's last step, the current calculator tab), as the buttons' --cta */
  --primary-fill: var(--primary-shade, var(--brand-primary));
}

/* ---- dark-by-default blocks become light (a person's page opening is the page band: .meet.member, below) ---- */
.rs[data-mode="light"] :is(.hero, .paths, .final-panel, .calc-hero, .page-intro, .meet.member, .calc-card.wide, .bl-night) {
  --night: var(--brand-band, color-mix(in oklch, var(--brand-primary) 5%, #f6f7fa));
  --night-2: #ffffff;
  --night-line: color-mix(in oklch, #0d1119 7%, transparent);
  --ink: var(--ink-base); --ink-2: var(--ink-2-base); --line: var(--line-base);
  --paper: var(--paper-base); --mist: var(--mist-base); --primary-tint: var(--primary-tint-base);
  --primary-words: var(--primary-ink-page, var(--brand-primary-base)); --primary-words-mist: var(--primary-ink-mist, var(--brand-primary-base));
  --primary-words-tint: var(--primary-ink-tint, var(--brand-primary-base));
  --secondary-words: var(--secondary-ink-page, var(--brand-secondary)); --secondary-words-mist: var(--secondary-ink-mist, var(--brand-secondary));
  --secondary-words-tint: var(--secondary-ink-tint, var(--brand-secondary));
  --tertiary-words: var(--tertiary-ink-page, var(--brand-tertiary));
  --tertiary-words-mist: var(--tertiary-ink-mist, var(--brand-tertiary));
  --secondary-night-words: var(--secondary-ink-hero, var(--brand-secondary));
  --secondary-night-mark: var(--secondary-fig-hero, var(--brand-secondary));
  --series-third: var(--series-third-hero, var(--ink-2));
  --primary-figure: var(--primary-fig-hero, var(--brand-primary-base)); --primary-figure-mist: var(--primary-fig-mist, var(--brand-primary-base));
  --primary-fill: var(--primary-shade, var(--brand-primary-base));
  --brand-primary: var(--brand-primary-base); --on-primary: var(--on-primary-base);
  color: var(--ink);
}
.rs[data-mode="light"] .hero-glow { opacity: .55; }
.rs[data-mode="light"] .hero-pill { color: var(--ink-2); background: color-mix(in oklch, var(--ink) 5%, transparent); }
.rs[data-mode="light"] :is(.hero, .paths, .final-panel, .calc-hero, .page-intro, .bl-night) .lede { color: var(--ink-2); }
.rs[data-mode="light"] .hero .lede strong { color: var(--ink); }
.rs[data-mode="light"] .hero-meta { color: var(--ink-2); }
.rs[data-mode="light"] .hero-meta a, .rs[data-mode="light"] .gbadge p { color: var(--ink); }
.rs[data-mode="light"] .gbadge p span { color: var(--ink-2); }
.rs[data-mode="light"] .gbadge .gmark { box-shadow: 0 0 0 1px var(--line); }
.rs[data-mode="light"] :is(.rotator .serif, .paths .h2 .serif, .calc-hero h1 .serif, .final-panel .serif) { color: var(--secondary-fig-hero, var(--secondary-deep)); }
.rs[data-mode="light"] .float-card { color: var(--ink); background: color-mix(in oklch, white 78%, transparent); box-shadow: 0 0 0 1px var(--line), 0 30px 60px -34px color-mix(in oklch, var(--brand-primary) 60%, transparent); }
.rs[data-mode="light"] .fc-review blockquote { color: var(--ink); }
.rs[data-mode="light"] :is(.fc-review figcaption, .fc-speed small) { color: var(--ink-2); }
.rs[data-mode="light"] .fc-speed .spin-ring circle:first-child { stroke: var(--line); }
.rs[data-mode="light"] .fc-speed .spin-ring circle:last-child { stroke: var(--secondary-mark-page, var(--brand-secondary)); }
.rs[data-mode="light"] .scroll-cue { box-shadow: inset 0 0 0 1.5px color-mix(in oklch, var(--ink) 25%, transparent); }
.rs[data-mode="light"] .scroll-cue::after { background: var(--ink); }
.rs[data-mode="light"] :is(.hero, .paths, .final-panel, .calc-hero, .page-intro) .btn-glass { background: color-mix(in oklch, var(--ink) 6%, transparent); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--ink) 14%, transparent); }
.rs[data-mode="light"] .calc-hero .back { color: var(--ink-2); }
.rs[data-mode="light"] .flow-col h3 { color: var(--ink-2); }
.rs[data-mode="light"] .sit { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.rs[data-mode="light"] .sit small { color: var(--ink-2); }
.rs[data-mode="light"] .sit svg { color: var(--secondary-words, var(--brand-secondary)); }
.rs[data-mode="light"] .sit:hover, .rs[data-mode="light"] .sit.is-on { background: color-mix(in oklch, var(--brand-tertiary) 10%, white); box-shadow: 0 0 0 1.5px var(--brand-tertiary); }
.rs[data-mode="light"] .prog { box-shadow: 0 0 0 1px var(--line); }
.rs[data-mode="light"] .prog.is-on { box-shadow: 0 0 0 3px var(--brand-tertiary), 0 0 40px -8px var(--brand-tertiary); }
.rs[data-mode="light"] .flow.has-pick .prog:not(.is-on) { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.rs[data-mode="light"] .flow.has-pick .prog:not(.is-on) small { color: var(--ink-2); }
.rs[data-mode="light"] .flow.has-pick .prog:not(.is-on) svg { color: var(--brand-primary); }
.rs[data-mode="light"] .hub { box-shadow: 0 0 0 1px var(--line), 0 0 0 8px color-mix(in oklch, var(--brand-primary) 6%, transparent), 0 30px 80px -20px color-mix(in oklch, var(--brand-tertiary) 55%, transparent); }
.rs[data-mode="light"] .flow-svg .fl-base { stroke: color-mix(in oklch, var(--brand-primary) 40%, transparent); }
.rs[data-mode="light"] .flow-svg .fl-lit { stroke: var(--brand-tertiary); }
.rs[data-mode="light"] .final-phone { color: var(--primary-figure, var(--brand-primary)); }
.rs[data-mode="light"] .calc-card.wide { box-shadow: 0 0 0 1px var(--line); }
.rs[data-mode="light"] .calc-card.wide .desc { color: var(--ink-2); }
.rs[data-mode="light"] .calc-card.wide .legend { fill: var(--ink-2); }
.rs[data-mode="light"] .calc-card.wide circle[stroke^="rgba"] { stroke: var(--line); }

/* ---- the light page is light throughout (page tone, 2026-10-24: one Page tone sets the whole page, the hero included) ----
   The blocks above keep the light brand tint this tone has always worn (the hero, the paths, the closing panel, a page's
   opening, a person's band, the wide calculator card, the blog's panels). No block flips dark under a light page any more:
   the sections under the opening alternate on the page's own paper and mist, exactly as the dark page's do (below), so the
   light page is one light page from the hero to the footer. */
/* a person's page opens on its profile: that opening IS the page band every other inner page opens on (.page-intro): the same --night in
   each tone, the same glow (Andrew, 2026-10-13: the person's page did not look like the rest of his site; on a hueless brand color the
   lit-dark block's mix drew warm grey-brown), so it is the one `.meet` that does not flip with the blocks below it */
.rs[data-mode="light"] .meet.member { background: var(--night); color: var(--ink); }
/* on the dark page a person's band is dark, and wears the relit tokens the light tone's sections used to: the one place they
   are still read */
.rs:not([data-mode="light"]) .meet.member {
  --paper: color-mix(in oklch, var(--brand-primary) 24%, #080b13);
  --mist: color-mix(in oklch, var(--brand-primary) 32%, #0c111c);
  --ink: #f2f4f8;
  --ink-2: color-mix(in oklch, white var(--quiet-share, 64%), transparent);
  --line: color-mix(in oklch, white 11%, transparent);
  --primary-tint: color-mix(in oklch, var(--brand-primary) 45%, #0a0e18);
  --secondary-tint: color-mix(in oklch, var(--brand-secondary) 30%, #0a0e18);
  --brand-primary: var(--primary-lit);
  --on-primary: #0d1119;
  /* the relit primary as words on these grounds (the theme's pushes, as at the page level), and as a fill under these words */
  --primary-words: var(--lit-ink-paper, var(--primary-lit)); --primary-words-mist: var(--lit-ink-mist, var(--primary-lit));
  --primary-words-tint: var(--lit-ink-tint, var(--primary-lit));
  --secondary-words: var(--secondary-lit-paper, var(--brand-secondary)); --secondary-words-mist: var(--secondary-lit-mist, var(--brand-secondary));
  --secondary-words-tint: var(--secondary-lit-tint, var(--brand-secondary));
  --tertiary-words: var(--tertiary-lit-paper, var(--brand-tertiary));
  --tertiary-words-mist: var(--tertiary-lit-mist, var(--brand-tertiary));
  --secondary-mark: var(--secondary-lit-mark, var(--brand-secondary));
  --secondary-mark-on-mist: var(--secondary-lit-mark-mist, var(--brand-secondary));
  --secondary-mark-on-tint: var(--secondary-lit-mark-tint, var(--brand-secondary));
  --series-third-frame: var(--series-third-lit-tint, var(--ink-2));
  --primary-figure: var(--lit-fig-paper, var(--primary-lit)); --primary-figure-mist: var(--lit-fig-mist, var(--primary-lit));
  --primary-fill: var(--primary-lit-fill);
  /* the process's last step is painted in that fill here, its quiet line in these words */
  --step-quiet-share: var(--lit-quiet-share, 72%);
  color: var(--ink); background: var(--paper);
}
.rs:not([data-mode="light"]) .meet.member { background: var(--night); }
.rs .meet.member { position: relative; overflow: hidden; }
.rs .meet.member > .wrap { position: relative; }
/* the home's bands alternate down the page in both tones, on the page's paper and the mist between: the dark page's #fff and
   its light-grey mist, which is the light page's paper and mist too (one Page tone paints the whole page, 2026-10-24: the
   light page is the same page, never flipped dark under its light hero). Counted by the section's place under the opening, so
   the rhythm holds whatever sections the owner keeps and whatever blocks the owner places among them (an offer, a callout, a
   video…), and no two neighbouring sections share a ground. The opening (always the first section), the paths, the highlight
   strip and a person's own band (`.meet.member`, the one `.meet` that does not flip) keep the grounds they draw; a person's
   page opens on that band, and the sections under it alternate as a home's do under its hero (SITES FIX, 2026-11-03: the
   person's page is the same system as every other page). A dark-by-default band keeps its own ground too
   (`[data-dark]`: a page opening, the calculators' band — the platform's mark on the block, the same one the header reads to
   know an opening is dark): painted the paper or the mist it would draw its white words on a light ground, and an owner who
   places one of those blocks among a site's bands gets a band that reads. The calculators page's rows keep their own rhythm
   (`.calc-sec`, below: a paper row, then the mist) — they are not a band of the home's. The start keeps its own mist on the
   dark page (the band under its link-in-bio rows, which are drawn in the paper); the light page draws it as one of its bands,
   below. */
.rs:not([data-mode="light"]) main > :is(.hero, .member) ~ section:not(.start):not(.paths):not(.ticker):not(.meet.member):not([data-dark]):not(.calc-sec):nth-of-type(odd) { background: var(--mist); }
.rs:not([data-mode="light"]) main > :is(.hero, .member) ~ section:not(.start):not(.paths):not(.ticker):not(.meet.member):not([data-dark]):not(.calc-sec):nth-of-type(even) { background: var(--paper); }
/* a band never melts the cards that paint its own tone: on a mist band the cards drawn in the mist take the paper */
.rs:not([data-mode="light"]) main > :is(.hero, .member) ~ section:not(.start):not(.paths):not(.ticker):not(.meet.member):not([data-dark]):not(.calc-sec):nth-of-type(odd) > .wrap { --mist: var(--paper); }
/* the light page's alternation is the same rhythm, and the start is one of its bands: it comes straight under the hero, whose
   light brand tint is the mist's own depth (both are mixed from the same primary), so it takes the paper there and the hero's
   band never melts into the one below it. Everything else keeps the grounds the dark page draws. */
.rs[data-mode="light"] main > :is(.hero, .member) ~ section:not(.paths):not(.ticker):not(.meet.member):not([data-dark]):not(.calc-sec):nth-of-type(odd) { background: var(--mist); }
.rs[data-mode="light"] main > :is(.hero, .member) ~ section:not(.paths):not(.ticker):not(.meet.member):not([data-dark]):not(.calc-sec):nth-of-type(even) { background: var(--paper); }
.rs[data-mode="light"] main > :is(.hero, .member) ~ section:not(.paths):not(.ticker):not(.meet.member):not([data-dark]):not(.calc-sec):nth-of-type(odd) > .wrap { --mist: var(--paper); }
/* the closing panel is a card on the last band: the paper, ringed with the page's own line, so it never melts into the mist
   (the hero and a page's opening are bands, not cards, and keep the light brand tint this tone has always worn) */
.rs[data-mode="light"] .final-panel { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
/* a block the owner sets straight after the start lands on the mist (its place is odd), so the start takes the paper there
   instead: two bands never share a ground, wherever the owner moves the blocks (BLOCK_PLACES, config.ts). The start's words
   stay the mist's, which read at least as well on the darker paper. */
.rs main > .start:has(+ section:nth-of-type(odd):not(.paths):not(.ticker):not(.meet.member)) { background: var(--paper); }
.rs:not([data-mode="light"]) .meet.member .btn-ink { color: #0d1119; }
/* inside that one dark block: the call-to-action panel on the band's dark tint reads the tint's words, figure and quiet line
   (the relit pushes, exactly as the light tone's flipped tint bands did), and the cards drawn in the band's dark mist take the
   mist's quiet line (theme.ts `cinematicVars`: each push only where the page's value would not read there) */
.rs:not([data-mode="light"]) .meet.member .cta-band {
  --tertiary-words: var(--tertiary-lit-tint, var(--brand-tertiary));
  --primary-figure: var(--lit-fig-tint, var(--primary-lit));
  --ink-2: color-mix(in oklch, white var(--quiet-share-tint, 64%), transparent);
}
.rs:not([data-mode="light"]) .meet.member :is(.rv, .team-card, .pfact, .lfact, .stats > div, .res, .link-card, .calc-card:not(.wide)) { --ink-2: color-mix(in oklch, white var(--quiet-share-mist, 64%), transparent); }
.rs[data-mode="light"] .calcs .calc-card:not(.wide) { background: var(--mist); }
.rs[data-mode="light"] .portrait { background: linear-gradient(160deg, color-mix(in oklch, var(--brand-primary) 70%, #0a0e18), #05070c); }


/* ---------- real photos, logos and the compliance footer ---------- */
.rs .hub .avatar-img { width: 84px; height: 84px; border-radius: 50%; -o-object-fit: cover; object-fit: cover; box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--brand-secondary); }
.rs .portrait .portrait-img { position: absolute; inset: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.rs .foot-addr { margin-top: 14px; max-width: 40ch; }
.rs .legal-words a, .rs .legal-access a { text-decoration: underline; }
.rs .foot .powered { margin-top: 22px; display: flex; }
.rs .calc-card { font: inherit; }

.rs .fc-review figcaption .gmark { flex: none; }

/* ============================================================
   CALCULATORS PAGE (<site>/calculators)
   The hero is the page's first <section>, so the calculators are sections 2, 3…:
   every other one (odd) is shaded and mirrored.
   ============================================================ */
.rs .calc-hero { background: var(--night); color: #fff; position: relative; overflow: hidden; padding-block: 170px 70px; }
.rs .calc-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50% 70% at 85% 30%, color-mix(in oklch, var(--brand-tertiary) 24%, transparent), transparent 70%),
              radial-gradient(50% 70% at 0% 100%, color-mix(in oklch, var(--brand-primary) 60%, transparent), transparent 70%); }
.rs .calc-hero .wrap { position: relative; display: grid; gap: 22px; }
.rs .calc-hero h1 { font-size: clamp(3rem, 7.4vw, 6.8rem); max-width: 12ch; }
.rs .calc-hero h1 .serif { color: var(--secondary-fig-night, var(--secondary-lit)); }
.rs .calc-hero .lede { color: color-mix(in oklch, white 70%, transparent); }
.rs .calc-hero .back { color: color-mix(in oklch, white 70%, transparent); text-decoration: none; font-weight: 500; width: -moz-fit-content; width: fit-content; }
.rs .calc-hero .back:hover { color: #fff; }
/* the sub menu: a second glass pill in the header's own material, pinned 12px below the header's measured bottom (--site-head,
   screen px through the zoom: site-jumps.ts), the calculator in view current (aria-current). On a narrow screen its row is
   one line that scrolls sideways inside the glass: it snaps, fades where more is hidden (data-more), and draws no bar on a
   touch screen (a mouse keeps a thin one, so a row that overflows stays usable) */
.rs .calc-tabs { position: sticky; top: calc((var(--site-head, calc(78px * var(--z))) + 12px) / var(--z)); z-index: 40; margin-top: -28px; padding-inline: 12px; }
.rs .calc-tabs ul { --fade-start: 0px; --fade-end: 0px; display: flex; flex-wrap: nowrap; gap: 8px; padding: 8px; border-radius: inherit;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: 8px; scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent 100%); }
.rs .calc-tabs ul[data-more~="start"] { --fade-start: 36px; }
.rs .calc-tabs ul[data-more~="end"] { --fade-end: 36px; }
@media (hover: none) and (pointer: coarse) {
  .rs .calc-tabs ul { scrollbar-width: none; }
}
.rs .calc-tabs li { flex: none; scroll-snap-align: center; }
.rs .calc-tabs-in { width: -moz-fit-content; width: fit-content; max-width: min(1200px, 100%); margin-inline: auto; border-radius: 999px;
  background: color-mix(in oklch, white 82%, transparent); box-shadow: inset 0 0 0 1px var(--line), 0 20px 40px -28px color-mix(in oklch, var(--ink) 50%, transparent);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); }
.rs .calc-tabs a { display: flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .92rem; white-space: nowrap; color: var(--ink-2); transition: background .2s, color .2s; }
.rs .calc-tabs a:hover { color: var(--ink); background: var(--mist); }
.rs .calc-tabs a[aria-current="true"] { background: var(--primary-fill, var(--brand-primary)); color: var(--on-primary); }
/* a calculator's top padding is given back to a jump, so its first words land under the sub menu, not its empty top */
.rs .calc-sec { --calc-pad: clamp(70px, 9vw, 120px); padding-block: var(--calc-pad); scroll-margin-top: calc(-1 * var(--calc-pad)); }
.rs .calc-sec:nth-of-type(odd) { background: var(--mist); }
.rs .calc-row { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
.rs .calc-sec:nth-of-type(odd) .calc-row > :first-child { order: 2; }
.rs .calc-copy { display: grid; gap: 20px; }
.rs .calc-copy .num { font: 600 .95rem/1 var(--font-body); color: var(--secondary-words, var(--brand-secondary)); }
.rs .calc-sec:nth-of-type(odd) .calc-copy .num { color: var(--secondary-words-mist, var(--brand-secondary)); }
.rs .calc-copy ul { display: grid; gap: 12px; }
.rs .calc-copy li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; color: var(--ink-2); }
.rs .calc-copy li svg { width: 20px; height: 20px; color: var(--secondary-mark, var(--brand-secondary)); margin-top: 2px; }
.rs .calc-sec:nth-of-type(odd) .calc-copy li svg { color: var(--secondary-mark-on-mist, var(--brand-secondary)); }
.rs .calc-copy .row { display: flex; flex-wrap: wrap; gap: 12px; }
.rs .calc-frame { display: block; width: 100%; padding: 0; border: 0; text-align: left; text-decoration: none; cursor: pointer; transition: transform .35s var(--ease), box-shadow .35s var(--ease); position: relative; border-radius: 28px; background: var(--paper); box-shadow: 0 0 0 1px var(--line), 0 40px 80px -40px color-mix(in oklch, var(--brand-primary) 55%, transparent); overflow: hidden; }
.rs .calc-frame-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.rs .calc-frame-top .name { font: 650 1rem/1.2 var(--font-display); color: var(--ink); }
.rs .calc-frame-top .tag { font: 500 .8rem/1 var(--font-body); color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
.rs .calc-frame-top .tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; }
@media (max-width: 860px) {
  .rs .calc-row { grid-template-columns: 1fr; }
  .rs .calc-sec:nth-of-type(odd) .calc-row > :first-child { order: 0; }
}
/* a phone keeps every calculator's buttons inside the screen: a long one ("Talk to … about a DSCR loan") wraps its words */
@media (max-width: 600px) {
  .rs .calc-copy .row > .btn { white-space: normal; text-wrap: balance; text-align: center; }
}

/* ============================================================
   INTRO VIDEO (a play button on the portrait; the player over the page)
   ============================================================ */
.rs .portrait .slot { justify-content: flex-start; z-index: 1; }
.rs .video-ov { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; }
.rs .video-ov .scrim { position: absolute; inset: 0; background: color-mix(in oklch, #05070c 82%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: rs-ov-fade .28s ease-out both; }
.rs .video-box { position: relative; width: min(1000px, 100%); aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: #000; box-shadow: 0 40px 100px -30px #000; animation: rs-ov-box .34s var(--ease) both; }
/* the way down (IntroVideo CLOSE_MS waits this duration out): both fall away a shade faster than they came */
.rs .video-ov[data-closing] .scrim { animation: rs-ov-fade-rev .24s ease-in both; }
.rs .video-ov[data-closing] .video-box { animation: rs-ov-box-rev .24s ease-in both; }
@keyframes rs-ov-fade { from { opacity: 0; } }
@keyframes rs-ov-fade-rev { to { opacity: 0; } }
@keyframes rs-ov-box { from { opacity: 0; transform: translateY(18px) scale(.965); } }
@keyframes rs-ov-box-rev { to { opacity: 0; transform: translateY(10px) scale(.98); } }
.rs .video-box iframe { width: 100%; height: 100%; border: 0; display: block; }
.rs .video-box .x { position: absolute; top: 12px; right: 12px; z-index: 1; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; background: color-mix(in oklch, #000 55%, transparent); color: #fff; font: 400 26px/1 var(--font-body); }
.rs .video-box .x:hover { background: #000; }

/* ============================================================
   CUSTOM BLOCKS (the owner's own, in their order; the offer keeps the .guarantee design above)
   ============================================================ */
.rs .blk { padding-block: clamp(64px, 8vw, 110px); }
.rs .blk .h2 { margin-bottom: clamp(28px, 4vw, 48px); max-width: 20ch; }
/* a block's heading with its line: the line sits under the heading, the block's content a step below both */
.rs .blk .section-head { gap: 14px; margin-bottom: clamp(28px, 4vw, 48px); }
.rs .blk .section-head .h2 { margin-bottom: 0; }
.rs .blk .row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
/* the facts' cards are heavy boxes: their button sits a full step below them, never tucked under their edge */
.rs .blk .pfacts + .row { margin-top: 36px; }

.rs .stats { --fit-gap: 14px; --figure-em: .84; --figure-pad: 52px; } /* the floor's facts (fit.css): its digit width, and its cell's inline padding on a phone */ /* a count-fitted grid of figure cells (fit.css) */
.rs .stats[data-count="4"] { --cols: 2; } /* four long figures at this size do not stand four across whole (measured 2026-10-28) */
.rs .stats > div { display: flex; flex-direction: column-reverse; gap: 10px; padding: 28px 26px; border-radius: 24px; background: var(--mist); box-shadow: inset 0 0 0 1px var(--line); container-type: inline-size; }
.rs .stats dd { margin: 0; --figure-size: clamp(2.6rem, 5vw, 4rem); font-weight: 800; line-height: .9; font-family: var(--font-display); letter-spacing: -.045em; color: var(--primary-figure-mist, var(--brand-primary)); }
.rs .stats dt { color: var(--ink-2); font-weight: 500; }

/* the About page's blocks (Andrew, 2026-10-17: the concept's About page): a block's line above its heading; the highlights about the
   person as cards on the mist; the story, its heading beside the words set large; licensing and contact as cards on the mist */
.rs .blk-eyebrow { font: 700 .78rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.rs .rich-col > .blk-eyebrow { margin-bottom: 14px; }
/* the line over the site's reviews on a person's page (review-parts.tsx SiteReviewsLine): the same step over the score it heads */
.rs .reviews [data-site-reviews] { margin-bottom: 14px; }
.rs .notes { --fit-gap: 14px; } /* a count-fitted grid (fit.css) */
.rs .notes[data-count="1"] { max-width: 760px; }
.rs .note { display: grid; gap: 10px; align-content: start; min-width: 0; padding: 28px 26px; border-radius: 24px; background: var(--mist); box-shadow: inset 0 0 0 1px var(--line); }
.rs .note h3 { font: 700 clamp(1.4rem, 2vw, 1.75rem)/1.1 var(--font-display); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.rs .note p { color: var(--ink-2); }
.rs .story { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px clamp(40px, 6vw, 90px); align-items: start; }
.rs .story-side { display: grid; gap: 14px; align-content: start; }
.rs .blk .story-side .h2 { margin-bottom: 0; font-size: clamp(2rem, 3.4vw, 3rem); }
.rs .story > .story-body:only-child { grid-column: 2; }
.rs .story-body > p:first-child { font: 600 clamp(1.4rem, 2.4vw, 2.1rem)/1.3 var(--font-display); letter-spacing: -.02em; color: var(--ink); text-wrap: pretty; }
.rs .lic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.rs .lic.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rs .lic.n1 { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
.rs .lic-card { display: grid; gap: 10px; align-content: start; min-width: 0; padding: 26px; border-radius: 24px; background: var(--mist); box-shadow: inset 0 0 0 1px var(--line); }
.rs .lic-label { font: 700 .78rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.rs .lic-card p { color: var(--ink); }
.rs .lic-card a { display: inline-flex; align-items: center; min-height: 32px; text-decoration: none; }
.rs .lic-card a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rs .lic-sub { color: var(--ink-2); }
.rs .states { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rs .states li { font: 600 .8rem/1 var(--font-body); letter-spacing: .06em; padding: 9px 12px; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); }
.rs .page-intro .intro-role { font-weight: 500; color: color-mix(in oklch, white 82%, transparent); }
.rs[data-mode="light"] .page-intro .intro-role { color: var(--ink-2); }
.rs .page-intro .intro-portrait { margin: 0; border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 5; max-height: 640px; background: var(--night-2); }
.rs .page-intro .intro-portrait img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center 22%; object-position: center 22%; }
@media (max-width: 1000px) { .rs .notes.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .rs :is(.notes, .notes.n2, .notes.n4, .lic, .lic.n2), .rs .story { grid-template-columns: minmax(0, 1fr); }
  .rs .story > .story-body:only-child { grid-column: auto; }
}

/* the offer's frame with its picture, and the callout kind's: no track grows past its share */
.rs .callout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(30px, 6vw, 90px); align-items: center; }
.rs .callout.solo { grid-template-columns: minmax(0, 1fr); max-width: 820px; text-align: center; justify-items: center; }
.rs .callout.solo .h2 { margin-inline: auto; }
.rs .callout.solo .row { justify-content: center; }
.rs .callout figure { margin: 0; border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--mist); }
.rs .callout figure img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }

.rs .faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(30px, 6vw, 90px); align-items: start; }
.rs .faq details { border-bottom: 1px solid var(--line); }
.rs .faq details:first-child { border-top: 1px solid var(--line); }
.rs .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font: 650 1.15rem/1.3 var(--font-display); }
.rs .faq summary::-webkit-details-marker { display: none; }
.rs .faq summary > span[aria-hidden] { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--mist); position: relative; transition: transform .3s var(--ease), background .3s; }
.rs .faq summary > span[aria-hidden]::before, .rs .faq summary > span[aria-hidden]::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; border-radius: 2px; background: var(--ink); translate: -50% -50%; }
.rs .faq summary > span[aria-hidden]::after { rotate: 90deg; transition: rotate .3s var(--ease); }
.rs .faq details[open] summary > span[aria-hidden] { background: var(--secondary-mark, var(--brand-secondary)); }
.rs .faq details[open] summary > span[aria-hidden]::before, .rs .faq details[open] summary > span[aria-hidden]::after { background: var(--paper); }
.rs .faq details[open] summary > span[aria-hidden]::after { rotate: 0deg; }
.rs .faq details p { padding: 0 50px 24px 0; color: var(--ink-2); max-width: 62ch; }

.rs .blk-video .player { border-radius: 28px; overflow: hidden; aspect-ratio: 16 / 9; background: #000; box-shadow: 0 40px 80px -40px color-mix(in oklch, var(--brand-primary) 55%, transparent); }
.rs .blk-video .player > div[data-video] { position: relative; width: 100%; height: 100%; }
.rs .blk-video .player iframe { width: 100%; height: 100%; border: 0; display: block; }
.rs .blk-video .caption { margin-top: 16px; color: var(--ink-2); }

.rs :is(.blk-logos, .blk-team) { padding-block: clamp(48px, 6vw, 80px); }
/* the reviews between two content blocks (a loan page): the blocks' own padding is the gap, not theirs on top of it (it was ~250px of nothing each side) */
.rs .blk + .reviews { padding-top: 0; padding-bottom: clamp(48px, 6vw, 80px); }
.rs .reviews + .blk { padding-top: 0; }
.rs .logos-title { text-align: center; color: var(--ink-2); font-weight: 600; margin-bottom: 28px; }
.rs .logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(24px, 5vw, 64px); }
.rs .logos img { height: 44px; width: auto; max-width: 180px; -o-object-fit: contain; object-fit: contain; filter: grayscale(1); opacity: .7; transition: filter .3s, opacity .3s; }
.rs .logos li:hover img { filter: none; opacity: 1; }

@media (max-width: 860px) {
  .rs .callout, .rs .faq { grid-template-columns: minmax(0, 1fr); }
}
/* the questions' heading sits in the narrow column beside them: sized to it, so two words stay on one line (no word alone) */
@media (min-width: 861px) { .rs .faq .h2 { font-size: clamp(2rem, 3.4vw, 3.4rem); } }
.rs .blk + .guarantee, .rs .guarantee + .guarantee { padding-top: clamp(64px, 8vw, 110px); }

/* ============================================================
   PAGE SECTIONS (a site's other pages: the opening band, a body of text,
   a call to action band and the contact card)
   ============================================================ */
.rs .page-intro { background: var(--night); color: #fff; position: relative; overflow: hidden; padding-block: 170px clamp(60px, 8vw, 100px); }
/* the page band's glow, on every inner page's opening (a person's page included: .meet.member) */
.rs :is(.page-intro, .meet.member)::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50% 70% at 85% 30%, color-mix(in oklch, var(--brand-tertiary) 24%, transparent), transparent 70%),
              radial-gradient(50% 70% at 0% 100%, color-mix(in oklch, var(--glow-primary) 60%, transparent), transparent 70%); }
.rs .page-intro .wrap { position: relative; display: grid; gap: clamp(30px, 6vw, 80px); align-items: center; }
.rs .page-intro .wrap.has-image { grid-template-columns: 1.1fr 1fr; }
.rs .page-intro-copy { display: grid; gap: 22px; }
.rs .page-intro .display { font-size: clamp(2.8rem, 6.4vw, 5.8rem); max-width: 14ch; text-wrap: balance; }
/* a heading that is a sentence (a loan's): smaller and wider, so it takes three lines and the button and its line stay on the first screen */
.rs .page-intro .display[data-long] { font-size: clamp(2.2rem, 4.3vw, 3.9rem); max-width: 20ch; }
/* the page's heading holds its last two words on its line (keep-words.ts joins them; words.tsx pairFit, --last-pair: their
   characters): set no larger than its column holds them, and never narrower than they are (set up to 5.8rem in a 14ch measure) */
.rs .page-intro-copy:has(> .display[style*="--last-pair"]) { container-type: inline-size; }
.rs .page-intro .display[style*="--last-pair"] { --fit: calc(100cqi / (var(--last-pair) * .47)); font-size: min(clamp(2.8rem, 6.4vw, 5.8rem), var(--fit)); min-width: min(100%, calc(var(--last-pair) * .47em)); }
.rs .page-intro .display[data-long][style*="--last-pair"] { font-size: min(clamp(2.2rem, 4.3vw, 3.9rem), var(--fit)); }
.rs .page-intro .lede { color: color-mix(in oklch, white 70%, transparent); }
/* a page's opening built to convert: the hero's pill holds the line above the heading (no live dot, so even padding), its buttons and its meta line */
.rs .page-intro .hero-pill { padding-inline: 14px; }
.rs .page-intro figure { margin: 0; border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--night-2); }
.rs .page-intro figure img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }

/* the reading column keeps a reading width, on the same left edge as every other block */
.rs .rich-col > * { max-width: 760px; }
.rs .prose { font-size: 1.08rem; line-height: 1.7; color: var(--ink-2); }
.rs .prose > * + * { margin-top: 1em; }
.rs .prose :is(h2, h3, h4) { color: var(--ink); font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; }
.rs .prose > :is(h2, h3, h4):not(:first-child) { margin-top: 1.6em; }
.rs .prose h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.rs .prose h3 { font-size: 1.4rem; }
.rs .prose h4 { font-size: 1.15rem; }
.rs .prose ul { list-style: disc; padding-left: 1.3em; }
.rs .prose ol { list-style: decimal; padding-left: 1.4em; }
.rs .prose li + li { margin-top: .4em; }
.rs .prose strong, .rs .prose b { color: var(--ink); font-weight: 700; }
.rs .prose a { color: var(--brand-primary); text-decoration: underline; text-underline-offset: .15em; }
.rs .prose blockquote { border-left: 3px solid var(--secondary-mark-page, var(--brand-secondary)); padding-left: 1.1em; font: italic 400 1.25rem/1.5 var(--font-serif); color: var(--ink); }

.rs .cta-band {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 48px;
  padding: clamp(36px, 5vw, 64px); border-radius: var(--r-panel); background: var(--primary-tint); box-shadow: inset 0 0 0 1px var(--line);
}
.rs .cta-band-copy { display: grid; gap: 14px; max-width: 60ch; }
.rs .blk .cta-band .h2 { margin-bottom: 0; }

.rs .contact-card { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
.rs .contact-card.solo { grid-template-columns: 1fr; max-width: 820px; }
.rs .blk .contact-card .h2 { margin-bottom: 18px; }

@media (max-width: 860px) {
  .rs .page-intro .wrap.has-image, .rs .contact-card { grid-template-columns: 1fr; }
}

/* ============================================================
   LARGE SCREENS: the whole site scales up in proportion, as a browser zoom would
   (Andrew, 2026-09-29: at 100% on a big monitor the design, capped for ~1440px,
   looked small). The design is drawn for a 1600px-wide window; wider windows zoom
   it by width / 1600 in steps. Chromium multiplies vh/vw by zoom, so the few
   viewport-sized lengths above divide by --z; the 3D hero and the flow lines read
   --z too (CinematicRuntime, HeroScene). Below 1760px nothing changes.
   2026-10-09: --z, the zoom and the ladder come from the ONE shared sheet (src/lib/rebel-sites/public-stage/public-stage.css: height as
   well as width, capped at 1.6); this sheet keeps only the lengths that divide by --z.
   ============================================================ */

.rs .calc-frame:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--line), 0 50px 90px -40px color-mix(in oklch, var(--brand-primary) 65%, transparent); }
.rs .calc-frame-art { display: grid; place-items: center; padding: 34px 28px 20px; background: linear-gradient(180deg, var(--primary-tint), var(--paper)); }
.rs .calc-frame-art svg { width: 100%; max-width: 440px; }
.rs .calc-frame-foot { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 16px 20px 22px; font-weight: 600; color: var(--primary-words, var(--brand-primary)); }
.rs .calc-frame-foot svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.rs .calc-frame:hover .calc-frame-foot svg { transform: translateX(3px); }

/* The formatted intro (Tiptap): paragraphs, lists and links as the editor made them */
.rs .lede.rich p + p { margin-top: .6em; }
.rs .lede.rich ul { list-style: disc; padding-left: 1.2em; margin: .5em 0; }
.rs .lede.rich ol { list-style: decimal; padding-left: 1.3em; margin: .5em 0; }
.rs .lede.rich a { text-decoration: underline; text-underline-offset: .15em; }
.rs .lede.rich strong, .rs .lede.rich b { color: inherit; font-weight: 700; }

/* ---------- the site's logo (BrandMark.tsx; docs/rebel-sites/directives/LOGOS.md) ----------
   Its real shape: the owner's height, its width from its own proportions, capped so a long wordmark cannot push the
   header's links out (a capped logo shrinks inside its box, never squashes). Both versions sit in ONE grid cell and the
   classes that paint the background under them pick one by visibility, so the brand mark is always as large as the
   larger of the two and nothing beside it moves when the header flips: the header's dark pill (the first paint, and
   over dark sections), its light pill (.is-light, over light sections), the open phone menu (dark), the footer (light in
   both tones: the page's paper). The logo is drawn at the owner's height on every background; a panel's padding goes outside
   it, and when either version has a panel both are padded alike. */
.rs .brandmark.has-logo { min-width: 0; }
.rs .brandmark .logo { display: grid; align-items: center; justify-items: start; flex: none; max-width: 260px; --logo-h: var(--rs-logo-h, 36px); --logo-pad-y: 0px; --logo-pad-x: 0px; }
.rs .brandmark .logo.has-panel { --logo-pad-y: calc(var(--logo-h) * .2); --logo-pad-x: calc(var(--logo-h) * .32); }
.rs .brandmark .logo-v { grid-area: 1 / 1; display: flex; align-items: center; max-width: 100%; padding: var(--logo-pad-y) var(--logo-pad-x); border-radius: calc(var(--logo-h) * .3); visibility: hidden; }
.rs .brandmark .logo-img { height: var(--logo-h); width: auto; min-width: 0; max-width: 100%; -o-object-fit: contain; object-fit: contain; }
/* the panel: the white one behind a logo with no version for dark backgrounds, the dark one behind white artwork on light */
.rs .brandmark .logo-v.has-panel { background: var(--logo-panel); }
.rs .nav .logo-v.on-dark, .rs .foot .logo-v.on-light { visibility: visible; }
.rs .nav.is-light .logo-v.on-dark { visibility: hidden; }
.rs:is([data-mode="light"], :not([data-mode="light"]):not(:has(> main > [data-dark]:first-child))) .nav:not(.is-toned) .logo-v.on-dark { visibility: hidden; }
.rs .nav.is-light .logo-v.on-light { visibility: visible; }
.rs:is([data-mode="light"], :not([data-mode="light"]):not(:has(> main > [data-dark]:first-child))) .nav:not(.is-toned) .logo-v.on-light { visibility: visible; }
/* the logo alone: the name stays the link's words for screen readers */
.rs .brandmark.logo-only:not([data-logo-broken]) .mark-words { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* a logo whose file is gone (CinematicRuntime marks it): the initials and the name in its place */
.rs .brandmark .mark-fallback { display: none; }
.rs .brandmark[data-logo-broken] .logo { display: none; }
.rs .brandmark[data-logo-broken] .mark-fallback { display: grid; }
/* a logo drawn live in the editor's preview, not saved yet (live-logo.ts): it shows in place of the initials or the saved logo */
.rs [data-rs-live-logo] > :is(.mark, .mark-fallback, .logo:not(.rs-live-logo)) { display: none; }
.rs .brandmark[data-logo-broken][data-rs-live-logo] > .rs-live-logo { display: grid; }
/* phones: the logo at the owner's phone height, and beside it the officer's name and NMLS, always (REBEL SITES 10-27: a visitor
   always sees who the officer is; the logo alone left the bar nameless) */
@media (max-width: 600px) {
  .rs .brandmark .logo { --logo-h: var(--rs-logo-h-phone, var(--rs-logo-h, 36px)); max-width: 200px; }
}
/* the narrowest phones: the logo gives up its size and the rule beside it before the name or the NMLS gives up a letter */
@media (max-width: 420px) {
  .rs .nav .brandmark { --lockup-gap: 12px; }
  .rs .nav .brandmark.has-logo:not([data-logo-broken]) > .logo { max-width: 104px; border-right: 0; padding-right: 0; }
  .rs .nav .brandmark .logo-img { max-height: 28px; }
}

/* ---------- a page's minimal header: the logo (left or centered), and only the phone and buttons it chose ---------- */
.rs .nav-min .nav-end { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.rs .nav-min.is-center .nav-in { display: grid; grid-template-columns: 1fr auto 1fr; }
.rs .nav-min.is-center .brandmark { grid-column: 2; }
.rs .nav-min.is-center .nav-end { grid-column: 3; justify-self: end; }
.rs .nav-call { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .95rem; text-decoration: none; padding-inline: 6px; }
.rs .nav-call svg { width: 16px; }
@media (max-width: 600px) {
  .rs .nav-call .num { display: none; }
  .rs .nav-call { width: 42px; height: 42px; justify-content: center; border-radius: 50%; background: color-mix(in oklch, white 12%, transparent); }
  .rs .nav.is-light .nav-call { background: var(--mist); }
  .rs:is([data-mode="light"], :not([data-mode="light"]):not(:has(> main > [data-dark]:first-child))) .nav:not(.is-toned) .nav-call { background: var(--mist); }
  /* phones: the phone bar carries the main button */
  .rs .nav-min .nav-end .btn { display: none; }
}

/* ============================================================
   Phase 3's sections: the page catalog (docs/rebel-sites/directives/PHASE3-PAGE-CATALOG.md §2). Each sits on the
   page's own tokens (paper, mist, ink, line, the brand colors), so it is drawn the same in both tones (the light page is
   light throughout: page tone, 2026-10-24).
   ============================================================ */

/* ---------- the team ---------- */
/* the team: one row of exactly as many cards as people (two to four), rows of four with the last row centred (five or more), a person alone
   as a featured card; the photo reveals the person's page, phone, email and apply-now link on a dark glass (../team-card.css moves it) */
.rs .team-grid { --cols: 4; --gap: 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); }
.rs .team-grid > li { flex: 0 1 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); min-width: 0; max-width: 340px; }
.rs .team-grid[data-count="2"], .rs .team-grid[data-count="3"] { --cols: 3; }
.rs .team-card { display: flex; flex-direction: column; border-radius: var(--r-card); background: var(--mist); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.rs .team-card:has(.has-reveal):is(:hover, :focus-within) { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -36px color-mix(in oklch, var(--brand-primary) 60%, transparent); }
.rs .team-card .h3 a { color: inherit; text-decoration: none; }
.rs .team-card .h3 a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
/* the reveal: night glass rising over the photo, the page as the site's call-to-action color, the contacts in white, Apply now as glass */
.rs .team-photo img { transition: transform .6s var(--ease); }
.rs .team-photo.has-reveal:is(:hover, :focus-within, [data-reveal="open"]) img { transform: scale(1.04); }
.rs .team-scrim { background: linear-gradient(to top, color-mix(in oklch, var(--night) 94%, transparent) 0%, color-mix(in oklch, var(--night) 70%, transparent) 45%, transparent 85%); }
.rs .team-reveal { color: #fff; }
.rs .team-way { border-radius: 999px; font: 600 .92rem/1.2 var(--font-body); color: #fff; }
.rs .team-way.is-page { padding: 0 18px; background: var(--cta); color: var(--on-cta); }
.rs .team-way.is-page:hover { background: var(--tertiary-lit); }
.rs .team-way.is-apply { padding: 0 18px; background: color-mix(in oklch, white 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklch, white 35%, transparent); backdrop-filter: blur(8px); }
.rs .team-way.is-apply:hover { background: color-mix(in oklch, white 24%, transparent); }
.rs .team-contact .team-way { padding: 0 6px; font-weight: 500; color: color-mix(in oklch, white 88%, transparent); }
.rs .team-contact .team-way:hover { color: #fff; }
.rs .team-contact .team-way:hover span { text-decoration: underline; text-underline-offset: 3px; }
/* the phone's digits stand in even figures; a long email is cut a little later (its words are smaller, never wrapped) */
.rs .team-way.is-phone span { font-variant-numeric: tabular-nums; }
.rs .team-way.is-email span { font-size: .94em; }
.rs .team-hint { background: color-mix(in oklch, var(--night) 70%, transparent); color: #fff; backdrop-filter: blur(6px); }
@container (max-width: 220px) { .rs .team-contact .team-way { background: color-mix(in oklch, white 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklch, white 30%, transparent); } }
/* the search above a big team */
.rs .team-search-label { font-weight: 600; text-align: center; }
.rs .team-search-input { box-sizing: border-box; min-height: 52px; padding: 0 22px 0 52px; border: 0; border-radius: 999px; background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.rs .team-search-count { text-align: center; font-size: .9rem; color: var(--ink-2); }
.rs .team-photo { aspect-ratio: 4 / 5; margin: 0; display: grid; place-items: center; overflow: hidden; background: linear-gradient(160deg, var(--brand-primary), var(--night)); color: #fff; }
.rs .team-photo img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
/* a person with no photo: a quiet monogram on the card's own surface, never a poster of their initials */
.rs .team-photo.is-monogram { background: linear-gradient(170deg, var(--primary-tint), var(--mist)); }
.rs .team-photo .initials { display: grid; place-items: center; width: 34%; aspect-ratio: 1; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); font: 700 clamp(1.3rem, 2.2vw, 1.7rem)/1 var(--font-display); letter-spacing: .02em; color: var(--primary-figure, var(--brand-primary)); }
.rs .team-copy { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 18px 20px 22px; }
.rs .team-role { font-weight: 500; color: var(--ink-2); }
.rs .team-meta { font-size: .88rem; color: var(--ink-2); }
.rs .team-meet.btn { align-self: flex-start; margin-top: 18px; font-weight: 600; }
.rs .team-grid[data-count="1"] > li { flex-basis: 100%; max-width: 900px; }
.rs .team-grid[data-count="1"] .team-card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; }
.rs .team-grid[data-count="1"] .team-copy { justify-content: center; padding: clamp(24px, 4vw, 56px); }
.rs .team-grid[data-count="1"] .team-copy .h3 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
.rs .team-blurb { margin-top: 10px; font-size: 1.05rem; color: var(--ink-2); max-width: 30em; }
@media (max-width: 1100px) { .rs .team-grid { --cols: 3; } }
@media (max-width: 760px) { .rs .team-grid[data-count="1"] .team-card { grid-template-columns: 1fr; } .rs .team-grid[data-count="1"] > li { max-width: 420px; } }
@media (max-width: 560px) {
  .rs .team-grid, .rs .team-grid[data-count] { --cols: 2; --gap: 12px; }
  .rs .team-grid[data-count="1"] { --cols: 1; }
  .rs .team-copy { padding: 12px 14px 16px; }
  .rs .team-copy .h3 { font-size: 1.05rem; }
  .rs .team-role, .rs .team-meta { font-size: .85rem; }
}
/* a person's social links (social-icons.tsx): round marks in the page's ink, the accent on hover; on a card, under it */
.rs .socials { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.rs .socials a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--ink); background: color-mix(in oklch, var(--ink) 7%, transparent); transition: background .2s, color .2s, transform .2s var(--ease); }
.rs .socials a:hover, .rs .socials a:focus-visible { background: var(--brand-primary); color: #fff; transform: translateY(-2px); }
/* the icon on a brand too pale for white goes black (footer-socials.spec.ts); a brand white reads on stays exactly white, and the live preview needs no value of its own */
@supports (color: oklch(from currentColor l c h)) {
  .rs .socials a:hover, .rs .socials a:focus-visible { color: oklch(from var(--brand-primary) calc((.72 - l) * 1000) 0 0); }
}
.rs .socials .social-mark { width: 18px; height: 18px; }

/* ---------- a grid of cards by how many it holds (parts.tsx byCount): none left alone on a row ---------- */
/* .team-grid has its own rule above (centred rows by data-count); this one is the others' */
.rs :is(.pfacts, .link-cards).by-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rs :is(.pfacts, .link-cards).by-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rs :is(.pfacts, .link-cards).by-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .rs :is(.pfacts, .link-cards).by-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .rs :is(.pfacts, .link-cards).by-3 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .rs :is(.pfacts, .link-cards):is(.by-2, .by-4) { grid-template-columns: 1fr; } }

/* ---------- a team member's page: the About section's drawing, opening the page under the header ---------- */
.rs .member { padding-top: clamp(130px, 14vw, 180px); }
.rs .member-name { font-size: clamp(2.6rem, 5.6vw, 4.8rem); text-wrap: balance; }
.rs .member-role { font: 600 1.05rem/1.3 var(--font-body); color: var(--secondary-words, var(--brand-secondary)); }
/* a person's role on their page's opening: the secondary (a detail) as it reads on that band (the dark tone's night, the light tone's light band) */
.rs:not([data-mode="light"]) .meet.member .member-role { color: var(--secondary-ink-night, var(--brand-secondary)); }
.rs[data-mode="light"] .meet.member .member-role { color: var(--secondary-ink-hero, var(--brand-secondary)); }
/* what they do and where, then their licenses: one block in the column's grid (person-parts.tsx), nothing when neither is known */
.rs .member-meta { display: grid; gap: 6px; }
.rs .member-meta > * { margin: 0; }
.rs .member-meta:empty, .rs .member .facts:empty { display: none; }
/* under a person's band the sections alternate (the bands, above), so a section keeps its own padding beside the reviews,
   never the collapse an unbanded loan page uses (.blk + .reviews, below) */
.rs main > .member:first-child ~ .blk + .reviews, .rs main > .member:first-child ~ .reviews + .blk { padding-top: clamp(80px, 11vw, 150px); }
.rs main > .member:first-child ~ .blk + .reviews { padding-bottom: clamp(80px, 11vw, 150px); }
/* on a phone the person's own buttons follow their name, title, licenses and rating, then the ways to reach them, before the bio
   and the facts (above the fold); the bar's main button slides in as the page scrolls */
@media (max-width: 860px) {
  .rs .member .meet-copy > .hero-ctas { order: 1; }
  .rs .member .meet-copy > .person-reach { order: 2; }
  .rs .member .meet-copy > :is(.person-bio, .facts, .socials) { order: 3; }
}
/* and their portrait a small one over their name, so all of that holds the first screen */
@media (max-width: 640px) {
  .rs .member .portrait { width: 120px; aspect-ratio: 4 / 5; margin: 0 0 12px; }
}
/* a person with no photo: the same quiet monogram as their team card */
.rs .member .portrait.is-monogram { background: linear-gradient(170deg, var(--primary-tint), var(--mist)); box-shadow: inset 0 0 0 1px var(--line); }
.rs .member .portrait.is-monogram::before { display: none; }
.rs .member .portrait.is-monogram .initials { display: grid; place-items: center; width: 30%; aspect-ratio: 1; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); font: 700 clamp(1.6rem, 2.6vw, 2.2rem)/1 var(--font-display); letter-spacing: .02em; color: var(--primary-figure, var(--brand-primary)); }

/* ---------- a loan program's facts ---------- */
.rs .pfacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 14px; margin: 0; }
.rs .pfact { display: grid; gap: 10px; align-content: start; padding: 26px 26px 28px; border-radius: 24px; background: var(--mist); box-shadow: inset 0 0 0 1px var(--line); }
.rs .pfact::before { content: ""; width: 34px; height: 4px; border-radius: 4px; background: var(--secondary-mark-on-mist, var(--brand-secondary)); }
.rs .pfact dt { font: 700 1.2rem/1.2 var(--font-display); letter-spacing: -.015em; }
.rs .pfact dd { margin: 0; color: var(--ink-2); }

/* ---------- a place's local facts: each public number with what it is, and its source, period and geography ---------- */
.rs .blk-local .section-head { max-width: 46rem; }
.rs .lfacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 14px; margin: 0; }
.rs .lfacts.by-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rs .lfacts.by-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rs .lfacts.by-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .rs .lfacts:is(.by-2, .by-3, .by-4) { grid-template-columns: 1fr; } }
.rs .lfact { display: grid; grid-template-rows: auto 1fr auto; gap: 8px; padding: 24px 26px 22px; border-radius: 24px; background: var(--mist); box-shadow: inset 0 0 0 1px var(--line); }
/* the cards of a row share their three rows, so every label, figure and source line sits level with the cards beside it */
@supports (grid-template-rows: subgrid) { .rs .lfact { grid-row: span 3; grid-template-rows: subgrid; row-gap: 8px; } }
.rs .lfact dt { font: 600 .95rem/1.35 var(--font-body); color: var(--ink-2); }
.rs .lfact dd { margin: 0; }
.rs .lfact .lfact-v { font: 700 clamp(1.9rem, 3vw, 2.5rem)/1.05 var(--font-display); letter-spacing: -.03em; color: var(--primary-figure-mist, var(--brand-primary)); font-variant-numeric: tabular-nums; }
.rs .lfact .lfact-src { padding-top: 12px; border-top: 1px solid var(--line); font-size: .82rem; line-height: 1.45; color: var(--ink-2); }
.rs .lfact .lfact-src a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in oklch, currentColor 35%, transparent); text-underline-offset: 3px; }
.rs .lfact .lfact-src a:hover { color: var(--brand-primary); }

/* ---------- the comparison: a real table, scrolling sideways inside its frame on a phone ---------- */
.rs .compare-scroll { overflow-x: auto; border-radius: 24px; box-shadow: inset 0 0 0 1px var(--line); -webkit-overflow-scrolling: touch; }
.rs .compare { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 1rem; }
.rs .compare :is(th, td) { padding: 18px 22px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.rs .compare tbody tr:last-child :is(th, td) { border-bottom: 0; }
.rs .compare thead :is(th, td) { background: var(--primary-tint); }
.rs .compare thead th { font: 700 1.15rem/1.2 var(--font-display); letter-spacing: -.015em; color: var(--secondary-words-tint, var(--brand-secondary)); }
.rs .compare tbody th { width: 28%; font-weight: 600; color: var(--ink); }
.rs .compare tbody td { color: var(--ink-2); }
.rs .compare.three tbody th { width: 22%; }

/* ---------- the glossary: the letters strip stays in reach while the terms scroll ---------- */
.rs .az { position: sticky; top: calc((var(--site-head, calc(78px * var(--z))) + 12px) / var(--z)); z-index: 2; margin-bottom: 36px; }
.rs .az ul { display: flex; flex-wrap: wrap; gap: 6px; width: -moz-fit-content; width: fit-content; max-width: 100%; padding: 8px; border-radius: 18px; background: color-mix(in oklch, var(--paper) 88%, transparent); box-shadow: inset 0 0 0 1px var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.rs .az a { display: grid; place-items: center; min-width: 38px; height: 38px; padding: 0 8px; border-radius: 12px; font: 700 .95rem/1 var(--font-display); color: var(--ink); text-decoration: none; }
.rs .az a:hover { background: var(--mist); color: var(--brand-primary); }
.rs .az-group { display: grid; grid-template-columns: 90px 1fr; gap: 24px; padding-block: 28px; border-top: 1px solid var(--line); scroll-margin-top: -29px; }
.rs .az-letter { font: 800 3.2rem/.9 var(--font-display); letter-spacing: -.05em; color: var(--primary-figure, var(--brand-primary)); }
.rs .terms { display: grid; gap: 22px; margin: 0; }
.rs .term dt { font: 700 1.15rem/1.25 var(--font-display); letter-spacing: -.01em; }
.rs .term dd { margin: 4px 0 0; max-width: 70ch; color: var(--ink-2); }
@media (max-width: 700px) { .rs .az-group { grid-template-columns: 1fr; gap: 12px; } }

/* ---------- the video gallery ---------- */
.rs .video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 28px 22px; }
.rs .video-card { display: grid; gap: 10px; align-content: start; }
.rs .video-card .player { aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: #000; box-shadow: 0 30px 60px -36px color-mix(in oklch, var(--brand-primary) 55%, transparent); }
.rs .video-card .player > div[data-video] { position: relative; width: 100%; height: 100%; }
.rs .video-card .player iframe { display: block; width: 100%; height: 100%; border: 0; }
.rs .video-card h3 { margin-top: 6px; }
.rs .video-card p { font-size: .97rem; color: var(--ink-2); }

/* ---------- resources: the whole row is the link ---------- */
.rs .res-list { display: grid; gap: 10px; }
.rs .res { display: grid; grid-template-columns: 52px 1fr auto; gap: 18px; align-items: center; padding: 18px 22px 18px 18px; border-radius: 20px; background: var(--mist); box-shadow: inset 0 0 0 1px var(--line); color: inherit; text-decoration: none; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.rs .res:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--brand-primary); }
.rs .res-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--primary-tint); color: var(--brand-primary); }
.rs .res-ic svg { width: 20px; }
.rs .res-copy { display: grid; gap: 2px; min-width: 0; }
.rs .res-copy strong { font: 650 1.1rem/1.3 var(--font-display); letter-spacing: -.01em; }
.rs .res-copy small { font-size: .93rem; color: var(--ink-2); }
.rs .res-kind { font-size: .85rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
@media (max-width: 600px) { .rs .res { grid-template-columns: 44px 1fr; } .rs .res-ic { width: 44px; height: 44px; } .rs .res-kind { grid-column: 2; } }

/* ---------- page links ---------- */
.rs .link-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 14px; }
.rs .link-card { position: relative; display: grid; gap: 6px; height: 100%; padding: 26px 56px 26px 26px; border-radius: 22px; background: var(--mist); box-shadow: inset 0 0 0 1px var(--line); color: inherit; text-decoration: none; text-align: start; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.rs .link-card:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1.5px var(--brand-primary); }
.rs .link-card strong { font: 700 1.2rem/1.2 var(--font-display); letter-spacing: -.015em; }
.rs .link-card span { font-size: .95rem; color: var(--ink-2); }
.rs .link-card svg { position: absolute; right: 24px; top: 28px; width: 20px; color: var(--secondary-mark-on-mist, var(--brand-secondary)); transition: transform .25s var(--ease); }
.rs .link-card:hover svg { transform: translateX(3px); }

/* ---------- the steps as a timeline: the heading stays beside the steps as they scroll ---------- */
.rs .process.is-timeline .tl-wrap { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(30px, 6vw, 90px); align-items: start; }
.rs .process.is-timeline .section-head { position: sticky; top: 120px; margin-bottom: 0; }
.rs .timeline { position: relative; display: grid; gap: 6px; }
.rs .timeline::before { content: ""; position: absolute; left: 27px; top: 34px; bottom: 34px; width: 2px; border-radius: 2px; background: linear-gradient(var(--brand-primary), var(--secondary-mark-on-mist, var(--brand-secondary))); opacity: .4; }
/* the rail is a rule (rule B: the secondary, its 3:1 mark on the ground under it), the primary at its head as the lead: on the
   mist in the dark tone, on the light tone's flipped paper */
.rs[data-mode="light"] .timeline::before { background: linear-gradient(var(--brand-primary), var(--secondary-mark, var(--brand-secondary))); }
.rs .tl-step { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: start; padding-block: 18px; }
.rs .tl-n { position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 2px var(--secondary-mark, var(--brand-secondary)); font: 800 1.4rem/1 var(--font-display); color: var(--secondary-mark, var(--brand-secondary)); }
.rs .tl-step:last-child .tl-n { background: var(--brand-secondary); color: var(--on-secondary); }
.rs .tl-tag { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--secondary-words-mist, var(--brand-secondary)); }
/* the timeline's section sits on the mist in both tones (.process), so its tag keeps the mist-pushed ink: the light tone's own page-pushed ink read 3.9:1 on the mist in three palettes (the bar, 2026-10-26) */
.rs .tl-step h3 { margin: 4px 0 6px; font: 700 1.3rem/1.2 var(--font-display); letter-spacing: -.015em; }
.rs .tl-step p:last-child { color: var(--ink-2); }
@media (max-width: 860px) { .rs .process.is-timeline .tl-wrap { grid-template-columns: 1fr; } .rs .process.is-timeline .section-head { position: static; } }

/* ---------- a two-level menu: a group is a <details> dropdown in the header (it opens with no script; the runtime
   closes it on a click outside, Escape or another opening), an accordion in the phone menu, a column in the footer.
   A group with a page of its own is split: its words go to the page, the chevron beside them opens its links ---------- */
.rs .nav-drop { position: relative; display: flex; align-items: center; gap: 4px; }
.rs .nav-drop summary { list-style: none; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; opacity: .82; transition: opacity .2s, background .2s; }
.rs .nav-drop summary::-webkit-details-marker { display: none; }
.rs .nav-drop summary::after { content: ""; width: 6px; height: 6px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .25s var(--ease); }
.rs .nav-drop summary:hover, .rs .nav-drop details[open] summary { opacity: 1; }
.rs .nav-drop details[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.rs .nav-drop.has-page summary { justify-content: center; width: 26px; height: 26px; margin-right: -8px; border-radius: 50%; }
.rs .nav-drop.has-page summary:hover, .rs .nav-drop.has-page details[open] summary { background: color-mix(in oklch, currentColor 14%, transparent); }
/* the menu opens under its group's words, its links lined up with them */
.rs .nav-sub {
  position: absolute; --drop-gap: 22px; --drop-float: 6px; left: -22px; z-index: 2; display: grid; gap: 2px; min-width: 220px; max-width: 320px;
  padding: 8px; border-radius: 20px;
  /* barely see-through: the header's ground at 96%, the page behind blurred and never boosted (menu-ground.css); the pill above
     it is opaque and carries no blur, so this blur reaches the page */
  background: color-mix(in oklch, var(--menu-surface) 96%, transparent);
  box-shadow: inset 0 0 0 1px var(--menu-line), 0 30px 60px -30px color-mix(in oklch, var(--night) 45%, transparent);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  transform-origin: 24px 0;
  transition: opacity .2s var(--ease), transform .28s var(--ease), translate .28s var(--ease);
}
/* it opens by settling down into place and closes by lifting away: the closed <details> keeps drawing its menu for the
   length of the fade (::details-content, where the browser has it), so the close is as smooth as the open */
.rs .nav-drop details::details-content { transition: content-visibility .22s allow-discrete; }
.rs .nav-drop details:not([open]) .nav-sub { opacity: 0; transform: scale(.97); translate: 0 -8px; pointer-events: none; }
@starting-style { .rs .nav-drop details[open] .nav-sub { opacity: 0; transform: scale(.97); translate: 0 -8px; } }
.rs .nav-sub li { transition: opacity .25s var(--ease) .04s, translate .3s var(--ease) .04s; }
@starting-style { .rs .nav-drop details[open] .nav-sub li { opacity: 0; translate: 0 -4px; } }
/* a dropdown item's icon and the line under its words (their owner's choice: config.ts NAV_ICONS, MAX_LINK_SUB) */
.rs .nav-sub .has-rich { display: flex; align-items: flex-start; gap: 12px; white-space: normal; }
.rs .nav-sub .nav-ico-box { flex: none; display: grid; place-items: center; width: 20px; height: 1.35em; }
.rs .nav-sub .nav-ico { width: 20px; height: 20px; }
.rs .nav-sub .nav-sub-t { display: grid; gap: 2px; min-width: 0; }
.rs .nav-sub .nav-sub-line { font-size: .82rem; font-weight: 400; line-height: 1.35; }
/* the phone menu's group: the icon 20px with no tile, on the name's first line (1lh: the row's own line height) */
.rs .mm-sub .has-rich { display: flex; align-items: flex-start; gap: 12px; }
.rs .mm-sub .nav-ico-box { flex: none; display: grid; place-items: center; width: 20px; height: 1lh; }
.rs .mm-sub .nav-ico { width: 20px; height: 20px; }
.rs .mm-sub .nav-sub-t { display: grid; gap: 1px; }
.rs .mm-sub .nav-sub-line { font: 400 .9rem/1.35 var(--font-body); }
@media (prefers-reduced-motion: reduce) {
  .rs .nav-sub, .rs .nav-sub li, .rs .nav-drop details::details-content { transition: none; }
  .rs .nav-drop details:not([open]) .nav-sub { transform: none; translate: none; }
}
.rs .nav-sub a:where(:not(.btn)), .rs .nav-sub .linkbtn { display: block; width: 100%; padding: 10px 14px; border-radius: 12px; opacity: 1; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* a wide dropdown (nav-draw.tsx: a long list split into columns, the menu builder's columns and its block): the same glass
   panel, a column's heading a quiet detail over its links, the block a softer pane at its end with the header's button */
.rs .nav-drop .nav-mega .nav-col-h { font: 600 .72rem/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; }
.rs .nav-drop .nav-mega .nav-cta { border-radius: 14px; }
.rs .nav-drop .nav-mega .nav-cta-pic { border-radius: 10px; }
.rs .nav-drop .nav-mega .nav-cta-h { font: 600 1.05rem/1.3 var(--font-body); letter-spacing: -.005em; }
.rs .nav-drop .nav-mega .nav-cta-line { font-size: .9rem; line-height: 1.45; }
.rs .mm-sub .mm-col-h { font: 600 .78rem/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; }
.rs .mm-sub .mm-cta { border-radius: 16px; }
.rs .mm-sub .mm-cta .nav-cta-pic { border-radius: 10px; }
.rs .mm-sub .mm-cta .nav-cta-h { font: 700 1.3rem/1.2 var(--font-display); }
/* the footer's columns, the menu's groups among them, share one heading: the footer's own (.foot h4), never a second system in one row */
.rs .foot .foot-col-h { margin: 0 0 12px; }
/* the phone menu's accordion: the group's page (when it has one) and its chevron on one row, its links under them */
.rs .mm-drop { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-bottom: 1px solid var(--menu-line); }
.rs .mmenu-links .mm-drop > :is(a, .linkbtn) { border-bottom: 0; }
.rs .mm-drop:not(.has-page) > .mm-group { grid-column: 1 / -1; }
.rs .mm-group summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; padding: 14px 2px;
  font: 700 clamp(1.7rem, 8vw, 2.2rem)/1.1 var(--font-display); letter-spacing: -.03em;
}
.rs .mm-drop.has-page .mm-group summary { justify-content: center; width: 48px; height: 48px; padding: 0; border-radius: 50%; background: var(--menu-hover); }
.rs .mm-group summary::-webkit-details-marker { display: none; }
.rs .mm-group summary::after { content: ""; flex: none; width: 11px; height: 11px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; opacity: .7; transform: translateY(-4px) rotate(45deg); transition: transform .3s var(--ease); }
.rs .mm-group[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.rs .mm-sub { display: none; grid-column: 1 / -1; padding: 0 0 12px 16px; }
.rs .mm-drop:has(> .mm-group[open]) > .mm-sub { display: grid; }
/* a group's links under the menu's own: a long loan name keeps one line in the drawer (at 1.3rem three of twelve broke onto two) */
.rs .mmenu-links .mm-sub a:where(:not(.btn)), .rs .mmenu-links .mm-sub .linkbtn { padding: 11px 2px; border-bottom: 0; font-size: 1.1rem; line-height: 1.25; }
/* the footer: a group's column is headed by its page */
.rs .foot h4 a, .rs .foot h4 .linkbtn { color: inherit; font: inherit; }
/* each group a column of its own beside the brand and the site's links, all in one row (never a column wrapped under the rest) where
   the row fits; the brand keeps a 260px floor (Poster's), so a wide menu never takes its words (a zero floor beside auto columns left
   "New American Funding" 74px at 810, printed over the first column). Narrower, the brand takes its own row and the columns share
   the row under it, each as wide as its words (a long list's two columns kept whole), wrapping whole when they do not fit */
@media (min-width: 1081px) { .rs .foot-grid.has-groups { grid-template-columns: minmax(260px, 1.4fr); grid-auto-flow: column; grid-auto-columns: auto; -moz-column-gap: 48px; column-gap: 48px; } }
@media (min-width: 601px) and (max-width: 1080px) {
  .rs .foot-grid.has-groups { display: flex; flex-wrap: wrap; gap: 36px 48px; }
  .rs .foot-grid.has-groups > * { flex: 1 1 auto; }
  .rs .foot-grid.has-groups > :first-child { flex-basis: 100%; }
}
/* four or more link columns (the brand and four: a 4/4/4 split draws one stack per column, plus Explore): the one row cannot hold them
   beside a 260px brand (260 | 168|211|270|99 at 1440, the company broken at the floor, "Investors and self-employed" on two lines, a
   wider screen never helping), so the brand takes its own row and the columns share the row under it, as at 601-1080 (designer
   review, round 6, B1). (0,4,0): over the one-row grid above */
@media (min-width: 1081px) {
  .rs .foot-grid.has-groups:has(> :nth-child(5)) { display: flex; flex-wrap: wrap; gap: 36px 48px; }
  .rs .foot-grid.has-groups:has(> :nth-child(5)) > * { flex: 1 1 auto; }
  .rs .foot-grid.has-groups:has(> :nth-child(5)) > :first-child { flex-basis: 100%; }
}
/* a phone: each column one under another, never a heading broken onto two lines in a narrow column */
@media (max-width: 600px) { .rs .foot-grid.has-groups { grid-template-columns: minmax(0, 1fr); } }

/* ---------- content blocks (docs/rebel-sites/directives/CONTENT-BLOCKS.md §3): pictures and words, a form or a calculator
   in the page, a video's own poster. A form and a calculator are the platform's frames: their boxes keep the loaders'
   first heights, so nothing moves when the frame arrives. ---------- */
.rs .pw-rows { display: grid; gap: clamp(56px, 8vw, 120px); }
.rs .pw-row { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.rs .pw-row.is-right :is(.pw-pic, .ms) { order: 2; }
.rs .pw-row.no-pic { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.rs .pw-pic { margin: 0; border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--mist); box-shadow: 0 40px 80px -44px color-mix(in oklch, var(--brand-primary) 60%, transparent); }
.rs .pw-pic img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.rs .pw-copy { display: grid; justify-items: start; gap: 14px; max-width: 34rem; }
.rs .pw-num { font-size: clamp(2.6rem, 4vw, 3.4rem); line-height: 1; color: var(--secondary-mark, var(--brand-secondary)); }
.rs .pw-h { font: 700 clamp(1.7rem, 2.8vw, 2.4rem)/1.05 var(--font-display); letter-spacing: -.025em; font-variation-settings: "opsz" 96; text-wrap: balance; }
.rs .pw-copy .prose { font-size: 1.05rem; }
.rs .blk .pw-copy .row { margin-top: 6px; }
.rs .blk .pw-copy .row:empty { display: none; }

.rs .fi { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 90px); align-items: center; }
.rs .fi-copy { display: grid; gap: 22px; align-content: start; }
.rs .blk .fi-copy .h2 { margin-bottom: 0; }
.rs .fi-points { display: grid; gap: 12px; }
.rs .fi-points li { display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--ink); }
.rs .fi-points svg { width: 20px; height: 20px; padding: 7px; border-radius: 50%; background: color-mix(in oklch, var(--secondary-words, var(--brand-secondary)) 16%, transparent); color: var(--secondary-words, var(--brand-secondary)); }
.rs :is(.fi-card, .ms-card) {
  padding: clamp(18px, 3vw, 34px); border-radius: var(--r-panel); color: #fff;
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in oklch, var(--brand-primary) 42%, transparent), transparent 62%), var(--night);
  box-shadow: inset 0 0 0 1px var(--night-line), 0 50px 100px -50px color-mix(in oklch, var(--brand-primary) 70%, #000);
}
/* the form loader's first height (form-embed-loader.js: 700px) */
.rs :is(.fi-embed, .ms-embed.is-form):not(:has(iframe)) { min-height: 700px; }
.rs :is(.fi-embed, .ms-embed):empty { border-radius: 18px; background: color-mix(in oklch, white 5%, transparent); }
.rs :is(.fi-embed, .ci-embed, .ms-embed) iframe { display: block; width: 100%; border: 0; }

.rs .blk .ci-head { max-width: 46rem; }
.rs .blk .ci-head .h2 { margin-bottom: 0; }
.rs .ci-frame { border-radius: var(--r-panel); overflow: hidden; background: var(--night); box-shadow: inset 0 0 0 1px var(--night-line), 0 50px 100px -50px color-mix(in oklch, var(--brand-primary) 70%, #000); }
.rs .ci-bar { display: flex; align-items: center; gap: 10px; padding: 18px 26px; border-bottom: 1px solid var(--night-line); color: color-mix(in oklch, white 80%, transparent); font: 600 .92rem/1 var(--font-body); letter-spacing: .01em; }
.rs .ci-bar svg { width: 20px; height: 20px; color: var(--secondary-night-words, var(--brand-secondary)); }
/* the calculator loader's first height (calc-embed-loader.js: 800px) */
.rs .ci-embed { padding: clamp(10px, 2vw, 22px); }
.rs .ci-embed:not(:has(iframe)) { min-height: 800px; }
/* the media slot's calculator, in the same panel as its form (the calculator loader's first height, 800px) */
.rs .ms-embed.is-calc:not(:has(iframe)) { min-height: 800px; }

/* on the light tone the blocks are night and the panels are paper */
.rs[data-mode="light"] :is(.fi-card, .ms-card, .ci-frame) { background: #fff; color: #0d1119; box-shadow: 0 0 0 1px color-mix(in oklch, white 12%, transparent), 0 50px 100px -50px #000; }
.rs[data-mode="light"] .ci-bar { color: #4b5466; border-bottom-color: rgba(13, 17, 25, .08); }
.rs[data-mode="light"] :is(.fi-embed, .ms-embed):empty { background: rgba(13, 17, 25, .04); }

/* a video's own poster: the picture, and one glass play button that takes the call-to-action colour on hover */
.rs .player .poster { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: #000; cursor: pointer; }
.rs .player .poster img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: transform .8s var(--ease); }
.rs .player .poster:hover img { transform: scale(1.03); }
/* a soft night vignette, so the button reads on any picture */
.rs .player .poster::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 50% 50%, color-mix(in oklch, var(--night) 45%, transparent), transparent 70%); pointer-events: none; }
.rs .player .poster-play {
  position: absolute; z-index: 1; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center;
  width: clamp(64px, 8vw, 96px); aspect-ratio: 1; border-radius: 50%; color: #fff;
  background: color-mix(in oklch, var(--night) 58%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, white 38%, transparent), 0 20px 50px -10px rgba(0, 0, 0, .6);
  transition: transform .3s var(--ease), background .3s, color .3s;
}
.rs .player .poster:hover .poster-play { transform: scale(1.06); background: var(--cta); color: var(--on-cta); }
.rs .player .poster-play svg { width: 38%; height: 38%; margin-left: 6%; }

/* the media slot (CONTENT-BLOCKS.md §3.5): a video in the picture's frame; a form or a calculator in the panel, which needs
   400px across: beside words from 1000px up (the grid in two equal columns), stacked below it, the panel the page's width */
.rs .ms { min-width: 0; }
.rs .ms-video .player { aspect-ratio: 16 / 9; border-radius: 28px; overflow: hidden; background: #000; box-shadow: 0 40px 80px -44px color-mix(in oklch, var(--brand-primary) 60%, transparent); }
.rs .ms-video .player > div[data-video] { position: relative; width: 100%; height: 100%; }
.rs .ms-video .player iframe { display: block; width: 100%; height: 100%; border: 0; }
.rs .ms-card { padding: clamp(14px, 2.4vw, 28px); }
@media (min-width: 1000px) {
  .rs :is(.pw-row, .callout, .page-intro .wrap).has-embed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 999px) {
  .rs :is(.pw-row, .callout, .page-intro .wrap).has-embed { grid-template-columns: minmax(0, 1fr); }
  .rs .pw-row.is-right.has-embed .ms { order: 0; }
  .rs .has-embed .ms-card { max-width: 760px; }
}
@media (max-width: 860px) {
  .rs .pw-row, .rs .fi { grid-template-columns: 1fr; }
  .rs .pw-row.is-right .pw-pic { order: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rs .player .poster img, .rs .player .poster-play { transition: none; }
  .rs .player .poster:hover img { transform: none; }
}

/* ============================================================
   BLOG — the site's blog as Cinematic draws it (docs/rebel-sites/directives/BLOG-NATIVE.md §5.1; blog/BlogPages.tsx).
   The opening is the page band (.page-intro, the light brand tint in both tones); the reading blocks are .blk (the page's
   paper); the call to action panels are .bl-night (the light tint in the light tone, the night in the dark one).
   ============================================================ */
.rs .bl-band .page-intro-copy { gap: 18px; }
.rs .bl-band.is-post .display { max-width: 18ch; font-size: clamp(2.6rem, 5.6vw, 5rem); }
.rs .bl-crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: .95rem; color: color-mix(in oklch, currentColor 66%, transparent); }
/* on the light tone's light band the quieter words are its own second ink (as its lede is): two thirds of a near-white brand's
   lightened ink read at 4.24:1 there (the live blog sweep, 2026-10-14) */
.rs[data-mode="light"] :is(.bl-band, .bl-night) :is(.bl-crumbs, .bl-cta-go small) { color: var(--ink-2); }
.rs .bl-crumbs a { text-decoration: none; }
.rs .bl-crumbs a:hover { text-decoration: underline; text-underline-offset: .2em; }
.rs .bl-crumbs a + a::before { content: "/"; margin-right: 6px; opacity: .6; }
.rs .bl-draft { display: inline-flex; align-items: center; gap: 10px; justify-self: start; padding: 10px 16px; border-radius: 999px; background: color-mix(in oklch, var(--brand-secondary) 22%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--brand-secondary) 55%, transparent); font-weight: 600; font-size: .95rem; }
.rs .bl-draft svg { width: 16px; color: var(--secondary-night-words, var(--brand-secondary)); }
/* the kickers are details, so the secondary as small words (rule B), by the ground under them (cinematic/theme.ts pushes each
   only where the colour does not read there): a card's topic and the answer's label on the page and its mist (the light page's
   reading blocks are those, so the page's pushes read there too), the article's topic on the band it opens (the night in the
   dark tone, the light brand tint in the light one) */
.rs .bl-kick { font: 700 .82rem/1.2 var(--font-body); letter-spacing: .09em; text-transform: uppercase; color: var(--secondary-ink-page, var(--brand-secondary)); text-decoration: none; }
.rs .bl-band .bl-kick { color: var(--secondary-ink-night, var(--brand-secondary)); justify-self: start; }
.rs .bl-answer .bl-kick { color: var(--secondary-ink-mist, var(--brand-secondary)); }
.rs[data-mode="light"] .bl-band .bl-kick { color: var(--secondary-ink-hero, var(--brand-secondary)); }
.rs .bl-topics { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.rs .bl-topics a { padding: 10px 18px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .95rem; white-space: nowrap; background: color-mix(in oklch, white 9%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklch, white 18%, transparent); }
.rs .bl-topics a:hover { background: color-mix(in oklch, white 15%, transparent); }
.rs .bl-topics a[aria-current="page"] { background: var(--cta); color: var(--on-cta); box-shadow: none; }
.rs[data-mode="light"] .bl-topics a:not([aria-current]) { background: color-mix(in oklch, var(--ink) 6%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--ink) 14%, transparent); }
.rs .bl-byline { display: flex; align-items: center; gap: 14px; font-size: 1rem; }
.rs .bl-byline a { font-weight: 700; text-decoration: none; }
.rs .bl-byline a:hover { text-decoration: underline; text-underline-offset: .2em; }
.rs .bl-byline-m { color: color-mix(in oklch, currentColor 70%, transparent); }
.rs .bl-av { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: var(--brand-secondary); color: var(--on-secondary); font: 700 1rem/1 var(--font-display); }
.rs .bl-av img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }

/* the index: the lead, the grid, the pager, the empty note */
.rs .bl-index .wrap { display: grid; gap: clamp(40px, 5vw, 64px); }
.rs .bl-card { display: grid; gap: 18px; align-content: start; text-decoration: none; color: var(--ink); }
.rs .bl-card-pic { display: block; aspect-ratio: 16 / 10; border-radius: var(--r-card); overflow: hidden; background: var(--mist); }
.rs .bl-card-pic img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: transform .6s var(--ease); }
.rs .bl-card:hover .bl-card-pic img { transform: scale(1.04); }
.rs .bl-card-none { display: grid; place-items: center; width: 100%; height: 100%; color: var(--brand-primary); }
.rs .bl-card-none svg { width: 40px; }
.rs .bl-card-copy { display: grid; gap: 10px; }
.rs .bl-card-h { font: 650 1.4rem/1.2 var(--font-display); letter-spacing: -.015em; text-wrap: balance; }
.rs .bl-card:hover .bl-card-h { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .18em; }
.rs .bl-card-dek { color: var(--ink-2); }
.rs .bl-meta { font-size: .93rem; color: var(--ink-2); }
.rs .bl-card.is-lead { grid-template-columns: 1.2fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.rs .bl-card.is-lead .bl-card-pic { border-radius: 28px; }
.rs .bl-card.is-lead:not(:has(.bl-card-pic)) { grid-template-columns: minmax(0, 1fr); max-width: 820px; }
.rs .bl-card.is-lead .bl-card-h { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.02; letter-spacing: -.03em; font-weight: 700; }
.rs .bl-card.is-lead .bl-card-dek { font-size: 1.12rem; }
.rs .bl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 40px); }
.rs .bl-pager { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; padding-top: 28px; border-top: 1px solid var(--line); font-weight: 600; color: var(--ink-2); }
.rs .bl-pager > :first-child { justify-self: start; }
.rs .bl-pager > :last-child { justify-self: end; }
.rs .bl-empty { display: grid; justify-items: center; gap: 14px; padding: clamp(48px, 7vw, 90px) 24px; border-radius: var(--r-panel); background: var(--mist); text-align: center; font: 650 1.35rem/1.3 var(--font-display); letter-spacing: -.015em; }
.rs .bl-empty svg { width: 34px; color: var(--secondary-mark-on-mist, var(--brand-secondary)); }

/* a call to action: a night panel */
.rs .bl-cta { position: relative; overflow: hidden; display: grid; gap: 18px; padding: clamp(26px, 3vw, 36px); border-radius: var(--r-card); background: var(--night); color: var(--paper); }
.rs .bl-cta::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 80% at 100% 110%, color-mix(in oklch, var(--brand-tertiary) 40%, transparent), transparent 70%); }
.rs .bl-cta > * { position: relative; }
.rs .bl-cta-copy { display: grid; gap: 8px; }
.rs .bl-eyebrow { font: 700 .8rem/1.2 var(--font-body); letter-spacing: .09em; text-transform: uppercase; color: var(--secondary-ink-night, var(--brand-secondary)); }
.rs .bl-cta-h { font: 700 1.55rem/1.1 var(--font-display); letter-spacing: -.02em; text-wrap: balance; }
.rs .bl-cta-s { color: color-mix(in oklch, currentColor 72%, transparent); }
.rs .bl-cta-go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.rs .bl-cta-go small { font-size: .88rem; color: color-mix(in oklch, currentColor 66%, transparent); }
.rs .bl-cta.is-wide { grid-template-columns: 1fr auto; align-items: center; gap: 24px 48px; padding: clamp(32px, 4.4vw, 56px); border-radius: var(--r-panel); }
.rs .bl-cta.is-wide .bl-cta-h { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.rs[data-mode="light"] .bl-cta::before { opacity: .5; }
/* the light tone's panel is the light band: its eyebrow is the secondary's small words as they read there (rule B: a detail) */
.rs[data-mode="light"] .bl-eyebrow { color: var(--secondary-ink-hero, var(--brand-secondary)); }

/* the article */
.rs .bl-hero { margin-top: clamp(-80px, -6vw, -40px); position: relative; }
.rs .bl-band.is-post:has(+ .bl-hero) { padding-bottom: clamp(110px, 12vw, 160px); }
.rs .bl-hero img { width: 100%; height: auto; aspect-ratio: 16 / 8; -o-object-fit: cover; object-fit: cover; border-radius: var(--r-panel); box-shadow: 0 40px 80px -40px color-mix(in oklch, var(--brand-primary) 60%, transparent); }
.rs .bl-read { padding-top: clamp(48px, 6vw, 80px); }
.rs .bl-lay { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(40px, 6vw, 96px); align-items: start; }
.rs .bl-lay.is-solo { grid-template-columns: minmax(0, 1fr); }
.rs .bl-col { display: grid; gap: clamp(36px, 4vw, 52px); max-width: 720px; min-width: 0; }
.rs .bl-prose { font-size: 1.13rem; line-height: 1.75; color: var(--ink-2); }
.rs .bl-prose > * + * { margin-top: 1.1em; }
.rs .bl-prose :is(h2, h3) { color: var(--ink); font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; line-height: 1.12; text-wrap: balance; }
.rs .bl-prose > :is(h2, h3):not(:first-child) { margin-top: 1.7em; }
.rs .bl-prose h2 { font-size: clamp(1.7rem, 2.6vw, 2.2rem); }
.rs .bl-prose h3 { font-size: 1.35rem; }
.rs .bl-prose ul { list-style: disc; padding-left: 1.3em; }
.rs .bl-prose ol { list-style: decimal; padding-left: 1.4em; }
.rs .bl-prose li + li { margin-top: .45em; }
.rs .bl-prose li::marker { color: var(--secondary-words, var(--brand-secondary)); font-weight: 700; }
.rs .bl-prose strong { color: var(--ink); font-weight: 700; }
/* a link is the primary as words on the ground it is on (the page, or the light tone's flipped paper): the raw primary read at
   1.07:1 with a near-white brand (the live blog sweep, 2026-10-14) */
.rs .bl-prose a:not(.btn) { color: var(--tertiary-words, var(--brand-tertiary)); text-decoration: underline; text-underline-offset: .15em; }
.rs .bl-prose blockquote { border-left: 3px solid var(--secondary-mark-page, var(--brand-secondary)); padding-left: 1.1em; font: italic 400 1.45rem/1.45 var(--font-serif); color: var(--ink); }
/* the quotation's rule on the light tone's page (the night), and on its flipped sections' paper (never a legal page's notice:
   legal-doc.css frames it in the words' own ink; the first rule's weight ties with that one's, so the order of the sheets decided, and
   the flipped sections' outweighs it: the light tone drew the notice's rule in the secondary, the dark tone in the words) */
/* the light page's reading blocks are its paper and mist: the quotation's rule is the page's mark there, as the base rule says */
.rs .bl-answer { display: grid; gap: 8px; padding: 22px 26px; border-radius: var(--r-card); background: var(--mist); box-shadow: inset 4px 0 0 var(--secondary-mark-mist, var(--brand-secondary)); color: var(--ink); }
.rs .bl-table { overflow-x: auto; border-radius: var(--r-card); box-shadow: 0 0 0 1px var(--line); }
.rs .bl-table table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.rs .bl-table :is(th, td) { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); }
.rs .bl-table thead th { background: var(--ink); color: var(--paper); font: 650 .95rem/1.2 var(--font-display); }
.rs .bl-table tbody tr:last-child :is(th, td) { border-bottom: 0; }
.rs .bl-table tbody th { color: var(--ink); font-weight: 650; }
.rs .bl-fig img { width: 100%; height: auto; border-radius: var(--r-card); }
.rs .bl-fig iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r-card); }
.rs .bl-fig figcaption { margin-top: 10px; font-size: .93rem; color: var(--ink-2); }
.rs .bl-faq details { border-bottom: 1px solid var(--line); }
.rs .bl-faq details:first-child { border-top: 1px solid var(--line); }
.rs .bl-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0; font: 650 1.15rem/1.3 var(--font-display); color: var(--ink); }
.rs .bl-faq summary::-webkit-details-marker { display: none; }
.rs .bl-faq summary > span[aria-hidden] { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--mist); position: relative; }
.rs .bl-faq summary > span[aria-hidden]::before, .rs .bl-faq summary > span[aria-hidden]::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; border-radius: 2px; background: var(--ink); translate: -50% -50%; }
.rs .bl-faq summary > span[aria-hidden]::after { rotate: 90deg; transition: rotate .3s var(--ease); }
.rs .bl-faq details[open] summary > span[aria-hidden] { background: var(--secondary-mark, var(--brand-secondary)); }
.rs .bl-faq details[open] summary > span[aria-hidden]::before, .rs .bl-faq details[open] summary > span[aria-hidden]::after { background: var(--paper); }
.rs .bl-faq details[open] summary > span[aria-hidden]::after { rotate: 0deg; }
.rs .bl-faq details p { padding: 0 50px 22px 0; }
.rs .bl-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 28px; border-top: 1px solid var(--line); }
.rs .bl-share-t { margin-right: 6px; font-weight: 700; }
.rs .bl-share .chip { cursor: pointer; border: 0; color: var(--ink); }
.rs .bl-share-i { padding: 11px; }
.rs .bl-share-i svg { width: 16px; color: var(--ink); }
.rs .bl-author { display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; padding: clamp(24px, 3vw, 34px); border-radius: var(--r-card); background: var(--paper); box-shadow: 0 0 0 1px var(--line), 0 30px 60px -40px color-mix(in oklch, var(--brand-primary) 45%, transparent); }
.rs .bl-author .bl-av { width: 88px; height: 88px; font-size: 1.6rem; }
.rs .bl-author-b { display: grid; gap: 4px; min-width: 0; }
.rs .bl-author-n { font: 700 1.35rem/1.2 var(--font-display); letter-spacing: -.015em; }
.rs .bl-author-n a { text-decoration: none; }
.rs .bl-author-n a:hover { text-decoration: underline; text-underline-offset: .18em; }
.rs .bl-author-r { color: var(--ink-2); }
.rs .bl-author-l { font-size: .9rem; color: var(--ink-2); }
.rs .bl-author-l a { color: var(--tertiary-words, var(--brand-tertiary)); }
.rs .bl-author-b p { margin-top: 6px; color: var(--ink-2); }
.rs .bl-aside { position: sticky; top: 110px; display: grid; gap: 28px; }
.rs .bl-toc { display: grid; gap: 4px; }
.rs .bl-toc b { margin-bottom: 6px; font: 700 .82rem/1.2 var(--font-body); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); }
.rs .bl-toc a { padding: 8px 0 8px 14px; border-left: 2px solid var(--line); text-decoration: none; color: var(--ink); font-weight: 500; line-height: 1.35; }
.rs .bl-toc a:hover { border-left-color: var(--brand-tertiary); }
.rs .bl-more .h2 { font-size: clamp(2rem, 3.6vw, 3rem); }

@media (max-width: 1080px) {
  .rs .bl-lay { grid-template-columns: minmax(0, 1fr); }
  .rs .bl-aside { position: static; }
  .rs .bl-toc { display: none; }
}
@media (max-width: 860px) {
  .rs .bl-card.is-lead { grid-template-columns: 1fr; }
  .rs .bl-grid { grid-template-columns: 1fr; }
  .rs .bl-cta.is-wide { grid-template-columns: 1fr; }
  .rs .bl-author { grid-template-columns: auto 1fr; }
  .rs .bl-author > .btn { grid-column: 1 / -1; justify-self: start; }
  .rs .bl-author .bl-av { width: 64px; height: 64px; font-size: 1.2rem; }
  .rs .bl-hero img { aspect-ratio: 4 / 3; border-radius: 24px; }
  .rs .bl-prose { font-size: 1.06rem; }
}
@media (min-width: 861px) and (max-width: 1080px) { .rs .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ============================================================
   THE BUILD STAGE (the sign-up's site, assembling: stage.tsx, lib/rebel-sites/build-stage.ts)
   Only a page drawn with a stage carries [data-stage]; nothing here reaches the public site.

   Cinematic's motion is GLASS CLEARING. The page is there from the first second, behind frosted glass: every line of
   words a frosted bar exactly where its line will be, every button a frosted pill, the portrait a frosted pane; the glass
   is still (R22: nothing flashes). A part that lands clears like a lens pulling focus: out of a soft blur, up to sharp, in
   a second, once (first-screen/Stage.tsx marks it [data-stage-landing="lift"] only as it lifts on screen; a page drawn
   afresh is drawn still). The logo drops into the header; the portrait develops; the stars fill one by one, then each
   review card lands; the social icons arrive one after another; the compliance lines set like closing credits. At the
   reveal ([data-stage-revealing]) everything still veiled clears in one gentle fade. A change of colours is a repaint.
   A veiled part's words are a disguise of the same width (stage.tsx), and kerning is off inside the parts so the widths
   are exact: nothing moves when a part lands.
   ============================================================ */
.rs[data-stage] {
  /* the glass: a bar on the light sections, a lighter one on the night bands; thinner as the build comes on */
  --stage-glass: color-mix(in oklch, var(--ink) calc(9% - 3% * var(--stage-progress)), transparent);
}
.rs[data-stage] :is([data-dark], .nav:not(.is-light) .nav-in, .final-panel, .float-card) {
  --stage-glass: color-mix(in oklch, white calc(13% - 4% * var(--stage-progress)), transparent);
}
/* the phone menu stands on the header's ground (menu-ground.css): its glass is a veil of its own words, light or dark */
.rs[data-stage] .mmenu { --stage-glass: color-mix(in oklch, var(--menu-ink) calc(13% - 4% * var(--stage-progress)), transparent); }
.rs[data-stage] [data-stage-part] { font-kerning: none; font-variant-ligatures: none; }

/* what is veiled: a part not landed (and what is inside it, unless a part inside it has landed), and before the reveal
   everything that is not a part and not the canvas */
.rs[data-stage] :is(
  [data-stage-state="veiled"],
  [data-stage-state="veiled"] :not([data-stage-state="lifted"], [data-stage-state="veiled"] [data-stage-state="lifted"] *),
  [data-stage-rest] :not([data-stage-part], [data-stage-part] *, [data-stage-keep], [data-stage-keep] *)
) {
  -webkit-text-fill-color: transparent; -webkit-user-select: none; -moz-user-select: none; user-select: none;
}
/* nothing veiled can be followed (its bands stay hit, so the header still reads the band under it) */
.rs[data-stage] :is(
  [data-stage-state="veiled"],
  [data-stage-state="veiled"] :not([data-stage-state="lifted"], [data-stage-state="veiled"] [data-stage-state="lifted"] *),
  [data-stage-rest] :not([data-stage-part], [data-stage-part] *, [data-stage-keep], [data-stage-keep] *)
):is(a, button, summary) { pointer-events: none; }
/* (the words are hidden by their fill, never their colour: a part that has landed inside a veiled band keeps its own colour,
   and its fill is its colour again, as on any page) */
.rs[data-stage] :is([data-stage-state="lifted"], [data-stage-keep]) { -webkit-text-fill-color: currentColor; }
/* each line of words a frosted bar on its own line, each button and picture a frosted pane */
.rs[data-stage] :is(
  [data-stage-state="veiled"],
  [data-stage-state="veiled"] :not([data-stage-state="lifted"], [data-stage-state="veiled"] [data-stage-state="lifted"] *),
  [data-stage-rest] :not([data-stage-part], [data-stage-part] *, [data-stage-keep], [data-stage-keep] *)
):is(h1, h2, h3, h4, p, dt, dd, small, .h2, .who, .stars, .num, .t, .s, .desc, .open, a:not(.btn, :is(p, h1, h2, h3, h4, dt, dd, small) a):not(:has(p, h2, h3, img, .btn, .mark)), .chip) {
  background: repeating-linear-gradient(to bottom, var(--stage-glass) 0 calc(1lh - .42em), transparent calc(1lh - .42em) 1lh) !important;
  -webkit-background-clip: border-box !important; background-clip: border-box !important;
  border-radius: 6px;
}
.rs[data-stage] :is(
  [data-stage-state="veiled"],
  [data-stage-state="veiled"] :not([data-stage-state="lifted"], [data-stage-state="veiled"] [data-stage-state="lifted"] *),
  [data-stage-rest] :not([data-stage-part], [data-stage-part] *, [data-stage-keep], [data-stage-keep] *)
):is(.btn, .mark, .brandmark .logo, .portrait, .gbadge .gmark, .socials a, .rv .who, .mbar a:not(.btn), .calc-card, .link-row, .ic, .go, .hub, .prog, .tile) {
  background: var(--stage-glass) !important;
  box-shadow: inset 0 0 0 1px color-mix(in oklch, white 10%, transparent) !important; border-color: transparent !important;
}
/* what a veiled part draws that is not words (icons, the logo, a picture, the stars): not drawn; the pane holds its place */
.rs[data-stage] :is(
  [data-stage-state="veiled"],
  [data-stage-state="veiled"] :not([data-stage-state="lifted"], [data-stage-state="veiled"] [data-stage-state="lifted"] *),
  [data-stage-rest] :not([data-stage-part], [data-stage-part] *, [data-stage-keep], [data-stage-keep] *)
):is(svg, img, picture, video, iframe) { visibility: hidden; }
.rs[data-stage] .portrait[data-stage-state="veiled"]::before { opacity: 0; }

/* the canvas: the name in the headline's own type, the line under it; the pill says the stage is building */
.rs[data-stage] .stage-canvas { display: grid; gap: 18px; }
.rs[data-stage] .stage-name { font-size: clamp(3.6rem, 7.4vw, 7rem); }
.rs[data-stage] .stage-name .line { display: block; }
.rs[data-stage] .stage-name .serif { display: block; font-size: 1.04em; line-height: 1.08; color: var(--secondary-fig-night, var(--secondary-lit)); }
.rs[data-stage] .stage-line { font: 500 clamp(1.05rem, 1.6vw, 1.3rem)/1.4 var(--font-body); color: color-mix(in oklch, white 72%, transparent); letter-spacing: .01em; }
.rs[data-stage] .stage-name :is(.line, .serif), .rs[data-stage] .stage-line { animation: rs-stage-name 1.4s var(--ease) both; }
.rs[data-stage] .stage-name .serif { animation-delay: .18s; }
.rs[data-stage] .stage-line { animation-delay: .4s; }
@keyframes rs-stage-name { from { opacity: 0; filter: blur(16px); transform: translateY(.18em); letter-spacing: .06em; } }
/* a light hero: the canvas in the light hero's own inks (its name, its serif, the line under it, the pill), and the glass over
   its veiled parts a dark one, so nothing on the stage stays white on light (Andrew, 2026-10-06: "you select light hero and
   all the text stays white") */
.rs[data-mode="light"][data-stage] .hero { --stage-glass: color-mix(in oklch, var(--ink) calc(9% - 3% * var(--stage-progress)), transparent); }
.rs[data-mode="light"][data-stage] .stage-name { color: var(--ink); }
.rs[data-mode="light"][data-stage] .stage-name .serif { color: var(--secondary-fig-hero, var(--secondary-deep)); }
.rs[data-mode="light"][data-stage] .stage-line { color: var(--ink-2); }

/* a part landing on screen: the glass clears (a soft blur pulled into focus), once */
@media (prefers-reduced-motion: no-preference) {
  .rs[data-stage] [data-stage-landing="lift"] { animation: rs-stage-clear 1.1s var(--ease) both; }
  /* at the reveal, everything still veiled clears in one gentle fade (what needed nothing from the person, the canvas giving
     way to the headline, and every part that had not lifted) */
  .rs[data-stage][data-stage-revealing] :is(h1, h2, h3, h4, p, dt, dd, .btn, .tile, .calc-card, .rv, li):not([data-stage-part], [data-stage-part] *),
  .rs[data-stage] [data-stage-landing="reveal"] { animation: rs-stage-fade .9s ease both; }

  /* the logo drops into the header (its pane falls away as it lands) */
  .rs[data-stage] .nav [data-stage-part="header-brand"][data-stage-landing="lift"] :is(.logo, .mark) { animation: rs-stage-drop .95s cubic-bezier(.3, 1.45, .45, 1) both; }
  /* the portrait develops out of light */
  .rs[data-stage] .portrait[data-stage-landing="lift"] { animation: none; }
  .rs[data-stage] .portrait[data-stage-landing="lift"] > :is(img, picture) { animation: rs-stage-develop 1.4s cubic-bezier(.25, .6, .2, 1) both; }
  /* the stars fill one by one, then the number and the count */
  .rs[data-stage] [data-stage-part="reviews-header"][data-stage-landing="lift"] .stars svg { animation: rs-stage-star .5s cubic-bezier(.3, 1.6, .5, 1) both; }
  .rs[data-stage] [data-stage-part="reviews-header"][data-stage-landing="lift"] .stars svg:nth-child(2) { animation-delay: .09s; }
  .rs[data-stage] [data-stage-part="reviews-header"][data-stage-landing="lift"] .stars svg:nth-child(3) { animation-delay: .18s; }
  .rs[data-stage] [data-stage-part="reviews-header"][data-stage-landing="lift"] .stars svg:nth-child(4) { animation-delay: .27s; }
  .rs[data-stage] [data-stage-part="reviews-header"][data-stage-landing="lift"] .stars svg:nth-child(5) { animation-delay: .36s; }
  /* each review card lands on its own */
  .rs[data-stage] .rv[data-stage-landing="lift"] { animation: rs-stage-card .9s var(--ease) both; }
  /* the other sites' ratings: each row in turn, its stars filling */
  .rs[data-stage] .also-rated[data-stage-landing="lift"] li { animation: rs-stage-clear 1s var(--ease) both; }
  .rs[data-stage] .also-rated[data-stage-landing="lift"] li:nth-child(2) { animation-delay: .16s; }
  .rs[data-stage] .also-rated[data-stage-landing="lift"] li:nth-child(3) { animation-delay: .32s; }
  .rs[data-stage] .also-rated[data-stage-landing="lift"] li:nth-child(4) { animation-delay: .48s; }
  .rs[data-stage] .also-rated[data-stage-landing="lift"] .stars5-fill { animation: rs-stage-fill 1.1s .25s cubic-bezier(.3, .7, .2, 1) both; }
  /* the social icons arrive one after another */
  .rs[data-stage] .found-socials[data-stage-landing="lift"] { animation: none; }
  .rs[data-stage] .found-socials[data-stage-landing="lift"] li { animation: rs-stage-pop .7s cubic-bezier(.3, 1.5, .5, 1) both; }
  .rs[data-stage] .found-socials[data-stage-landing="lift"] li:nth-child(2) { animation-delay: .14s; }
  .rs[data-stage] .found-socials[data-stage-landing="lift"] li:nth-child(3) { animation-delay: .28s; }
  .rs[data-stage] .found-socials[data-stage-landing="lift"] li:nth-child(4) { animation-delay: .42s; }
  .rs[data-stage] .found-socials[data-stage-landing="lift"] li:nth-child(5) { animation-delay: .56s; }
  .rs[data-stage] .found-socials[data-stage-landing="lift"] li:nth-child(6) { animation-delay: .7s; }
  /* the compliance lines set like closing credits */
  .rs[data-stage] .legal[data-stage-landing="lift"] { animation: none; }
  .rs[data-stage] .legal[data-stage-landing="lift"] > * { animation: rs-stage-credit .9s var(--ease) both; }
  .rs[data-stage] .legal[data-stage-landing="lift"] > :nth-child(2) { animation-delay: .2s; }
  .rs[data-stage] .legal[data-stage-landing="lift"] > :nth-child(3) { animation-delay: .4s; }
  .rs[data-stage] .legal[data-stage-landing="lift"] > :nth-child(n+4) { animation-delay: .6s; }
}
@keyframes rs-stage-clear { from { opacity: 0; filter: blur(8px); } 55% { opacity: 1; } to { filter: none; } }
@keyframes rs-stage-drop { from { opacity: 0; transform: translateY(-130%) scale(.9); filter: blur(6px); } 60% { opacity: 1; filter: none; } }
@keyframes rs-stage-develop { from { opacity: 0; filter: blur(14px) saturate(0); } 45% { opacity: 1; filter: blur(4px) saturate(.4); } }
@keyframes rs-stage-star { from { opacity: 0; transform: scale(0) rotate(-40deg); } }
@keyframes rs-stage-card { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } }
@keyframes rs-stage-fill { from { clip-path: inset(0 100% 0 0); } }
@keyframes rs-stage-pop { from { opacity: 0; transform: scale(.3); filter: blur(8px); } }
@keyframes rs-stage-credit { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } }

/* a visitor who asked for less motion: every change is instant (Stage.tsx marks nothing as landing for them either) */
@media (prefers-reduced-motion: reduce) {
  .rs[data-stage] *, .rs[data-stage] *::before, .rs[data-stage] *::after { animation-duration: .001ms !important; }
}
@keyframes rs-stage-fade { from { opacity: 0; } }

/* what discovery found (stage-parts.tsx): the other sites' ratings under the reviews, the person's website, their links */
.rs .also-rated { margin-top: clamp(28px, 4vw, 48px); display: grid; gap: 14px; }
.rs .also-rated-label { font: 700 .78rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.rs .also-rated ul { display: flex; flex-wrap: wrap; gap: 12px; padding: 0; margin: 0; list-style: none; }
.rs .also-rated li { display: grid; grid-template-columns: auto auto; align-items: center; gap: 6px 14px; padding: 16px 20px; border-radius: var(--r-card); background: var(--paper); box-shadow: 0 0 0 1px var(--line), 0 18px 40px -30px color-mix(in oklch, var(--ink) 60%, transparent); }
.rs .also-rated-site { font: 700 1.02rem/1.1 var(--font-display); color: var(--ink); grid-column: 1 / -1; }
.rs .also-rated .stars5 { width: 96px; height: 16px; color: var(--review-star); }
.rs .also-rated-n { font-size: .9rem; color: var(--ink-2); }
.rs .also-rated-n b { color: var(--ink); font-weight: 700; }
.rs .found-socials .socials { margin-top: 16px; }
/* one row: the space between a footer column's links (.foot li + li) never lowers an icon */
.rs .found-socials .socials li + li { margin-top: 0; }

/* ============================================================
   COLOUR ENGINE v2 (color-engine.ts): Cinematic's proposed brand colours, drawn only by the brand-colours prototype until
   Andrew approves them (a live page never carries data-color-engine, so nothing here reaches it). The contract is
   brand-engine.ts's; the values are theme.ts `cinematicVarsV2`'s and the surfaces brand-surfaces.ts declares.
   The hero keeps its night; the section under it is the brand's stage, in both tones: the start section's ground is the
   SECONDARY, its link cards the PRIMARY and its big first card the TERTIARY (the action colour, as every main button).
   The highlights band and the process's last step are the primary; the offer panel and the header's second button the
   secondary. Each rule doubles the root class so it outranks today's tone rules (the light tone's flipped sections).
   ============================================================ */

/* the main button and the header's second button: the brand colour itself (or its readable shade), and a hairline when the
   fill is as pale as the page's white or as dark as its night */
.rs.rs[data-color-engine="v2"] .btn-cta { box-shadow: 0 14px 34px -14px color-mix(in oklch, var(--cta) 85%, transparent), inset 0 1px 0 color-mix(in oklch, white 35%, transparent), inset 0 0 0 1px var(--edge-cta); }
.rs.rs[data-color-engine="v2"] .btn-cta:hover { box-shadow: 0 20px 44px -14px color-mix(in oklch, var(--cta) 95%, transparent), inset 0 1px 0 color-mix(in oklch, white 35%, transparent), inset 0 0 0 1px var(--edge-cta); }
.rs.rs[data-color-engine="v2"] .btn-second { background: var(--surf-secondary); color: var(--on-surf-secondary); box-shadow: 0 14px 34px -18px color-mix(in oklch, var(--surf-secondary) 80%, transparent), inset 0 0 0 1px var(--edge-secondary); }

/* the start section: the secondary's ground, its words on it */
.rs.rs[data-color-engine="v2"] .start { background: var(--surf-secondary); box-shadow: inset 0 1px 0 var(--edge-secondary), inset 0 -1px 0 var(--edge-secondary); }
.rs.rs[data-color-engine="v2"] .start .section-head { color: var(--on-surf-secondary); }
.rs.rs[data-color-engine="v2"] .start .section-head .lede { color: var(--on-surf-secondary-2); }
/* its link cards: the primary, drawn as the big first card is drawn in the action colour */
.rs.rs[data-color-engine="v2"] .start .link-row:not(.is-hero) { background: var(--surf-primary); color: var(--on-surf-primary); box-shadow: 0 0 0 1px var(--edge-primary), 0 18px 36px -26px color-mix(in oklch, var(--surf-primary) 70%, #000); }
.rs.rs[data-color-engine="v2"] .start .link-row:not(.is-hero):hover { box-shadow: 0 0 0 1px var(--edge-primary), 0 26px 44px -24px color-mix(in oklch, var(--surf-primary) 80%, #000); }
.rs.rs[data-color-engine="v2"] .start .link-row:not(.is-hero) .ic { background: color-mix(in oklch, var(--on-surf-primary) 16%, transparent); color: var(--on-surf-primary); }
.rs.rs[data-color-engine="v2"] .start .link-row:not(.is-hero) .s { color: var(--on-surf-primary-2); }
.rs.rs[data-color-engine="v2"] .start .link-row:not(.is-hero) .go { background: color-mix(in oklch, var(--on-surf-primary) 16%, transparent); color: var(--on-surf-primary); }
.rs.rs[data-color-engine="v2"] .start .link-row:not(.is-hero):hover .go { background: var(--on-surf-primary); color: var(--surf-primary); }
/* the big first card: the action colour, its second line still at AA, its hairline when it needs one */
.rs.rs[data-color-engine="v2"] .link-row.is-hero { box-shadow: 0 0 0 1px var(--edge-cta), 0 24px 50px -28px var(--cta); }
.rs.rs[data-color-engine="v2"] .link-row.is-hero .s { color: var(--on-cta-2); }

/* the highlights band: the primary */
.rs.rs[data-color-engine="v2"] .ticker { background: var(--surf-primary); color: var(--on-surf-primary); box-shadow: inset 0 1px 0 var(--edge-primary), inset 0 -1px 0 var(--edge-primary); }

/* the process's last step: the primary in both tones (the light tone's flipped section no longer washes it), its figure in
   the secondary where that reads */
.rs.rs[data-color-engine="v2"] .step:last-child { background: var(--surf-primary); color: var(--on-surf-primary); box-shadow: 0 0 0 1px var(--edge-primary); }
.rs.rs[data-color-engine="v2"] .step:last-child .when b { color: var(--secondary-on-primary); }
.rs.rs[data-color-engine="v2"] .step:last-child :is(.when span, p) { color: var(--on-surf-primary-2); }

/* the offer panel: the secondary */
.rs.rs[data-color-engine="v2"] .g-panel { background: var(--surf-secondary); color: var(--on-surf-secondary); box-shadow: inset 0 0 0 1px var(--edge-secondary); }

/* the primary as small words, an icon or a figure: its ink for the ground it is on (brand-engine.ts `brandInk`), never the
   colour itself where it would not read. The light grounds read --primary-ink-light, in both tones (the light page is light
   throughout); the dark page's person band, the one dark block it keeps, the relit night ink. */
.rs.rs[data-color-engine="v2"] { --primary-ink: var(--primary-ink-light); }
.rs.rs[data-color-engine="v2"]:not([data-mode="light"]) .meet.member { --primary-ink: var(--primary-lit); }
.rs.rs[data-color-engine="v2"][data-mode="light"] :is(.hero, .paths, .final-panel, .calc-hero, .page-intro, .calc-card.wide, .bl-night) { --primary-ink: var(--primary-ink-light); }
.rs.rs[data-color-engine="v2"] :is(.start-contact .chip svg, .flow:not(.has-pick) .prog svg, .flow .prog.is-on svg, .sm-prog svg, .step:not(:last-child) .when b, .score .big, .rv .who, .mbar a:not(.btn), .calc-copy .num, .stats dd, .prose a, .calc-frame-foot, .team-photo .initials, .member-role, .member .portrait.is-monogram .initials, .lfact .lfact-v, .lfact .lfact-src a:hover, .compare thead th, .az a:hover, .az-letter, .res-ic, .link-card svg, .tl-step:not(:last-child) .tl-n, .tl-tag, .bl-card-none, .bl-empty svg, .bl-prose a:not(.btn)) { color: var(--primary-ink); }
.rs.rs[data-color-engine="v2"][data-mode="light"] :is(.sit svg, .flow.has-pick .prog:not(.is-on) svg, .final-phone) { color: var(--primary-ink); }
/* a reviewer's initials on their disc in the light tone's flipped (dark) reviews: the section's own light words, which read on it */
.rs.rs[data-color-engine="v2"][data-mode="light"] .reviews .rv .who { color: var(--ink); }

/* ============================================================
   LOCAL AREAS — the page links' photo cards (sections/kinds/page-links.ts, look 'photo-cards'; drawn by
   sections/PageLinks.tsx). Each card is Cinematic's link card (.link-card: its ground, its words' colours and its arrow's
   ink, in both tones and every palette, are that card's rules, unchanged) turned into a picture card: the photo across
   its top, the name, the line, the arrow at its foot. Two to four across by count (page-link-cards.ts `areaColumns`),
   every row the same height; two across under 1000px, one under 600px. Its own block: nothing above is changed by it.
   ============================================================ */
.rs .area-cards { --area-cols: 3; display: grid; grid-template-columns: repeat(var(--area-cols), minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 16px; }
.rs .area-cards.cols-2 { --area-cols: 2; }
.rs .area-cards.cols-3 { --area-cols: 3; }
.rs .area-cards.cols-4 { --area-cols: 4; }
.rs .area-cards > li { display: flex; min-width: 0; }
.rs .link-card.area-card { display: flex; flex-direction: column; width: 100%; height: auto; gap: 0; padding: 0; overflow: hidden; }
.rs .link-card.area-card .area-ph { display: block; flex: none; aspect-ratio: 4 / 3; overflow: hidden; background: var(--mist); }
.rs .area-cards.cols-2 .area-card .area-ph { aspect-ratio: 16 / 9; }
.rs .area-card .area-ph img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: transform .6s var(--ease); }
.rs .area-card:hover .area-ph img { transform: scale(1.04); }
/* a card without a photo beside cards with theirs: the card's own ground, lit from a corner, so every card keeps the same shape */
.rs .area-card .area-ph.is-empty { background: radial-gradient(120% 100% at 0% 0%, color-mix(in oklch, var(--ink) 10%, transparent), transparent 70%), var(--mist); box-shadow: inset 0 -1px 0 var(--line); }
.rs .area-card .area-copy { display: grid; flex: 1; align-content: start; gap: 8px; padding: 22px 24px 0; font-size: inherit; color: inherit; }
.rs .link-card.area-card strong { font-size: clamp(1.25rem, 1.5vw, 1.5rem); overflow-wrap: anywhere; }
.rs .link-card.area-card .area-sub { font-size: .95rem; line-height: 1.5; overflow-wrap: anywhere; }
.rs .link-card.area-card svg { position: static; flex: none; align-self: flex-end; margin: 18px 24px 22px; }
@media (max-width: 1000px) { .rs .area-cards:is(.cols-3, .cols-4) { --area-cols: 2; } }
@media (max-width: 600px) { .rs .area-cards:is(.cols-2, .cols-3, .cols-4) { --area-cols: 1; } .rs .area-cards.cols-2 .area-card .area-ph { aspect-ratio: 4 / 3; } }
@media (prefers-reduced-motion: reduce) { .rs .area-card .area-ph img { transition: none; } .rs .area-card:hover .area-ph img { transform: none; } }

/* ---------- a phone's taps: every link a thumb lands on is 32px tall or more (an inline link's padding grows its box, never
   its line; a link the flex or grid lays out gives that padding back as a negative margin, so nothing moves) ---------- */
@media (max-width: 600px) {
  .rs :is(.lfact .lfact-src a, .bl-author-n a, .bl-author-l a, .foot h4 a) { padding-block: 9px; }
  .rs :is(.bl-crumbs a, a.bl-kick, .g-copy .row a.terms) { padding-block: 9px; margin-block: -9px; }
  /* a licence link's padding reaches into the wrapped line below it: drawn above that line, so the whole box takes the tap */
  .rs .bl-author-l a { position: relative; z-index: 1; }
  /* a later licence that is a link too: the lines get the room, so two links' boxes never cover each other */
  .rs .bl-author-l:has(> span ~ span > a) { line-height: 34px; }
}

/* the Loans overview (page-link-cards.tsx HubGroups; shape in page-link-hub.css): each card is Cinematic's link card (.link-card: its ground, its colour
   modes, its lift on hover), the menu's icon over the name in the display face, the arrow in its corner */
.rs .shared-hub .hub-h { --hub-line: var(--line); font: 700 clamp(1.35rem, 1.9vw, 1.7rem)/1.15 var(--font-display); letter-spacing: -.02em; }
.rs .hub-card.link-card { gap: 8px; padding: 26px 60px 26px 26px; }
.rs .hub-card .hub-name { font: 700 1.2rem/1.2 var(--font-display); letter-spacing: -.015em; color: inherit; }
.rs .hub-card .hub-line { font-size: .95rem; line-height: 1.5; color: var(--ink-2); }
.rs .hub-card :is(.hub-ico, .hub-go) { color: var(--secondary-mark-on-mist, var(--brand-secondary)); }
.rs .hub-card :is(.hub-ico, .hub-go) svg { position: static; width: 20px; height: 20px; }
.rs .hub-card .hub-go { top: 28px; right: 24px; }
/* the link card's own hover slide stays off the icon and the arrow's svg: the arrow moves once, with the shared 4px */
.rs .hub-card:hover :is(.hub-ico, .hub-go) svg { transform: none; }

/* The owner's second button color (config.ts secondButtonColor, the Design pane's "Second button"; Andrew, 2026-10-21): every
   element this template draws in its second look (.btn-glass, .btn-ink, .btn-second) is filled with it: the owner's second buttons (glass on the dark panels, ink on the page), the header's second (.btn-second) and a team card's Meet (.btn-ink). Its phone menu's Call and Text are chips, and its More reviews and blog pager are .btn-line, the outline look: none of them is painted.
   Its words take the color that reads on it (--rs-second-ink: theme.ts readableOn), and hover shades the fill away from the words
   (--rs-second-shade), so they read better still. Only on a root that carries the color (chrome-kit.tsx secondButtonAttrs): on Auto
   neither the mark nor the colors exist, so none of this applies. The :not(#…) lifts it over every ground's and hover's own rule
   for the look; a button's own color (drawn inline) still wins; many of one button keep the crowd's outline. Its header second's glow follows the color (it glowed in the brand's secondary), and the light tone's glass loses its inset ring. */
.rs[data-second-button] .btn-glass:not(.btn-many):not(#rs-second-button),
.rs[data-second-button] .btn-ink:not(.btn-many):not(#rs-second-button),
.rs[data-second-button] .btn-second:not(.btn-many):not(#rs-second-button) {
  background-color: var(--rs-second); background-image: none; border-color: var(--rs-second); color: var(--rs-second-ink);
}
.rs[data-second-button] .btn-glass:not(.btn-many):not(#rs-second-button):hover,
.rs[data-second-button] .btn-ink:not(.btn-many):not(#rs-second-button):hover,
.rs[data-second-button] .btn-second:not(.btn-many):not(#rs-second-button):hover {
  background-color: color-mix(in srgb, var(--rs-second) 88%, var(--rs-second-shade)); border-color: color-mix(in srgb, var(--rs-second) 88%, var(--rs-second-shade));
}
/* a button filled with the owner's own color (data-own-fill: the hero's second button, parts.tsx ownFill) drops the ring too */
.rs [data-own-fill]:not(#rs-second-button),
.rs[data-second-button] .btn-glass:not(.btn-many):not(#rs-second-button),
.rs[data-second-button] .btn-ink:not(.btn-many):not(#rs-second-button) { box-shadow: none; }
.rs[data-second-button] .btn-second:not(.btn-many):not(#rs-second-button) { box-shadow: 0 14px 34px -18px color-mix(in oklch, var(--rs-second) 80%, transparent); }

/* ── The blog's sidebar modules and its subscribe box (blog-shell/BlogModules.tsx), in Cinematic's own type and colors ──
   Beside the text with the call to action, in the owner's order; a column holding more than the call to action scrolls
   with the page (a sticky column taller than the window hides its own end). Lines and quiet words are the ground's own ink,
   so a module reads on the paper and on a colored band alike. */
.rs .bl-aside:has(> .bl-mod) { position: static; }
.rs .bl-mod { display: grid; gap: 12px; align-content: start; min-width: 0; }
.rs .bl-mod-h { font: 700 .82rem/1.2 var(--font-body); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); }
.rs .bl-mod-sub, .rs .bl-mod-fine { font-size: .93rem; line-height: 1.45; color: color-mix(in srgb, currentColor 70%, transparent); }
.rs :is(.bl-mod-name, .bl-mod-more, .bl-mod-topic, .bl-mod-post, .bl-mod-sub a) { color: inherit; }
.rs .bl-mod-who { display: flex; align-items: center; gap: 14px; }
.rs .bl-mod-av { flex: none; display: grid; place-items: center; width: 56px; height: 56px; overflow: hidden; border-radius: 50%; background: var(--brand-secondary); color: var(--on-secondary); font: 700 1rem/1 var(--font-display); }
.rs .bl-mod-av img, .rs .bl-mod-ph img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.rs .bl-mod-who-b, .rs .bl-mod-post-b { display: grid; gap: 2px; min-width: 0; }
.rs .bl-mod-name { font: 700 1rem/1.2 var(--font-display); letter-spacing: -.015em; text-decoration: none; }
.rs .bl-mod-more { justify-self: start; font-weight: 600; text-underline-offset: .2em; }
.rs .bl-mod-list { display: grid; margin: 0; padding: 0; list-style: none; }
.rs .bl-mod-topic, .rs .bl-mod-rates > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid color-mix(in srgb, currentColor 16%, transparent); }
.rs .bl-mod-topic, .rs .bl-mod-post { text-decoration: none; }
.rs .bl-mod-n { font-variant-numeric: tabular-nums; color: color-mix(in srgb, currentColor 66%, transparent); }
.rs .bl-mod-post { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 14px; padding: 8px 0; }
.rs .bl-mod-post:not(:has(.bl-mod-ph)) { grid-template-columns: minmax(0, 1fr); }
.rs .bl-mod-ph { display: block; aspect-ratio: 1; overflow: hidden; border-radius: calc(var(--r-card) / 2); background: var(--mist); }
.rs .bl-mod-post-t { font-weight: 600; line-height: 1.3; }
.rs .bl-mod-name:hover, .rs .bl-mod-topic:hover > span:first-child, .rs .bl-mod-post:hover .bl-mod-post-t { text-decoration: underline; text-underline-offset: .2em; }
.rs .bl-mod-rates { display: grid; margin: 0; }
.rs .bl-mod-rates dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.rs .bl-mod > .btn { justify-self: start; }
.rs .bl-mod-frame { display: block; width: 100%; border: 0; }
.rs .bl-sub { padding: clamp(24px, 3vw, 34px); border-radius: var(--r-card); background: var(--paper); box-shadow: 0 0 0 1px var(--line); }
.rs .bl-author + .bl-sub { margin-top: 28px; }
.rs :is(.bl-index, .bl-side) > :is(.wrap, .section-in, .chapter-in) > * + :is(.bl-mod, .bl-sub) { margin-top: 28px; }
.rs :is(.bl-index, .bl-side) .bl-mod { max-width: 640px; }

/* ── An article's rail and phone drawer (blog-shell/BlogRail.tsx; the shared layout is blog-rail.css), in Cinematic's own surfaces:
   the bar's and drawer's paper, ink and line, how far under the header the kept group stops (the rail's old sticky top),
   and "In this article" as its own card (the subscribe card's paper and ring), its entries one type step under the cards (inherited 1rem → .9rem). ── */
.rs .bl-rail { --bl-paper: var(--paper); --bl-ink: var(--ink); --bl-line: var(--line); }
.rs .bl-rail { --bl-rail-top: 110px; }
.rs .bl-rail-toc { padding: 18px 20px; border-radius: var(--r-card); background: var(--paper); box-shadow: 0 0 0 1px var(--line); }
.rs .bl-rail-toc a { font-size: .9rem; }
/* the official Equal Housing artwork on the Legal page (legal-doc.tsx draws both; legal-eho-grounds.test) for its band’s ground: the white page, in both tones (the light page draws its legal band on the paper too) */
.rs .legal-read .legal-eho-on-light { display: block; }
.rs .legal-read .legal-eho-on-dark { display: none; }

/* ---- the button fit's gutters (fit.css): a call-to-action row measures its column as the screen less this, so the variable sits on
   the root and a place that insets its row says its own (measured at 360, twice the row's x): never on the button, whose own
   declaration would hide the place's ---- */
.rs { --button-gutter: 40px; }
.rs .g-copy .row { --button-gutter: 112px; } /* the guarantee panel */

/* ============================================================
   THE PROPOSED COLOUR ENGINE (color-engine.ts 'proposed': the brand-colours prototype's Proposed switch only; every live page carries no
   data-color-engine and draws exactly as above). ONE ACTION COLOUR (Andrew, 2026-11-01; branch tpl/action-color ported behind the switch): a
   crowd's words and its outline are --tl, the action colour: the main button's fill wherever it reads on the calculators page's rows (the page,
   the odd rows' mist), else its one nearest shade (brand-engine actionColor; theme.ts --tl-page, --tl-mist, on this engine only). And the line
   look on the night (a dark block in the dark tone; a person's profile says its own) takes the night's words, never the page's ink.
   ============================================================ */
.rs[data-color-engine="proposed"] { --tl: var(--tl-page, var(--brand-tertiary)); --outline-words: var(--tl-page-words, var(--tl)); --outline-edge: var(--tl-page-edge, var(--outline-words)); }
.rs[data-color-engine="proposed"] .calc-sec:nth-of-type(odd) { --tl: var(--tl-mist, var(--brand-tertiary)); --outline-words: var(--tl-mist-words, var(--tl)); --outline-edge: var(--tl-mist-edge, var(--outline-words)); }
/* ONE HUE, TWO SHADES (REBEL SITES, 2026-11-03: an outlined button is a button, not a text link): a crowd's words read --outline-words, the main button's
   color at AA, and its outline --outline-edge, the fill itself where it stands 3:1 on the ground, else that shade (brand-engine actionShades); a text link
   keeps --tl, the link shade (7:1 on a light ground). The theme emits each ground's pair beside its link variable (-words, -edge). */
.rs[data-color-engine="proposed"] .btn-cta.btn-many, .rs[data-color-engine="proposed"] .calc-sec:nth-of-type(odd) .btn-cta.btn-many { color: var(--outline-words); box-shadow: inset 0 0 0 1.5px var(--outline-edge); }
.rs[data-color-engine="proposed"] .btn-cta.btn-many:hover, .rs[data-color-engine="proposed"] .calc-sec:nth-of-type(odd) .btn-cta.btn-many:hover { box-shadow: inset 0 0 0 2px var(--outline-edge); }
.rs[data-color-engine="proposed"]:not([data-mode="light"]) [data-dark]:not(.member) .btn-line { --ink: #fff; --line: color-mix(in oklch, white 28%, transparent); }
/* EYEBROWS ARE THE SECONDARY (Andrew, 2026-11-01; branch tpl/eyebrows ported behind the switch): the pill over a page's opening on its glass (theme.ts
   --secondary-ink-pill, --secondary-ink-pill-hero), the label on the offer's own panel (--secondary-on-panel, no longer a share of the panel's words)
   and a block's line over its heading (the mist's --secondary-words-mist, which .tl-tag already reads), each the secondary at its shade there */
.rs[data-color-engine="proposed"] .hero-pill { color: var(--secondary-ink-pill, var(--brand-secondary)); }
.rs[data-color-engine="proposed"][data-mode="light"] .hero-pill { color: var(--secondary-ink-pill-hero, var(--brand-secondary)); }
.rs[data-color-engine="proposed"] .g-copy .g-eyebrow { color: var(--secondary-on-panel, var(--on-secondary)); opacity: 1; }
.rs[data-color-engine="proposed"] .blk-eyebrow { color: var(--secondary-words-mist, var(--brand-secondary)); }