/* RSAI marketing v2 — component layer. Loaded after style.css on every page.
   Values come from tokens.css only. */

/* ── base ─────────────────────────────────────────────── */
/* the old stylesheet's variables now point at the tokens */
html.v2 {
  --navy: var(--bg); --white: var(--text); --card: var(--surface-2); --border: var(--hairline);  /* cards a step off the band they sit on (2026-10-22) */
  --blue: var(--text); --teal: var(--text); --cyan: var(--text); --mint: var(--text); --rose: var(--text);
  --purple: var(--text); --orange: var(--text); --red: var(--text); --yellow: var(--text); --green: var(--text);
  --glow: none;
}
html.v2 { scroll-behavior: smooth; }
html.v2 body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  overflow-x: clip;
}
html.v2 ::selection { background: var(--text); color: var(--bg); }
html.v2 :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
html.v2 h1, html.v2 h2 {
  font-family: var(--display-font);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: var(--lh-tight);
  color: var(--text);
}
html.v2 h3, html.v2 h4, html.v2 h5 { font-family: var(--font-sans); font-weight: 600; color: var(--text); letter-spacing: -0.01em; line-height: 1.3; }
html.v2 p { font-family: var(--body-font); }
html.v2 a { color: inherit; }
html.v2 img { max-width: 100%; }

/* legacy layer: no shadows, glows, blur, grid paper or gradient text anywhere */
html.v2 *, html.v2 *::before, html.v2 *::after { box-shadow: none !important; text-shadow: none !important; }
html.v2 * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html.v2 .orb, html.v2 .hgrid, html.v2 .scan-line, html.v2 .sc-ui-glow, html.v2 .grid-lines::before,
html.v2 .grid-lines::after, html.v2 .float-badge { display: none !important; }
html.v2 .grid-lines, html.v2 .mesh-bg { background-image: none !important; animation: none !important; }
html.v2 .gradient, html.v2 .gradient-ro, html.v2 .ai-grad, html.v2 [class*="grad"] {
  background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important; color: inherit !important;
}
html.v2 [style*="background-clip:text"], html.v2 [style*="background-clip: text"] {
  background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--text) !important;
}

.v2-wrap { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.v2-section { padding: var(--section-y) 0; border-top: var(--hairline-w) solid var(--hairline); }
.v2-section--flush { border-top: 0; }
.v2-section--surface { background: var(--surface); }

/* ── labels, footnotes ────────────────────────────────── */
.v2-label {
  display: block;
  font-family: var(--label-font);
  font-weight: var(--label-weight);
  font-size: var(--fs-label);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--label-color);
  line-height: 1.4;
}
.v2-meta {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
sup.fn { font-family: var(--font-sans); font-size: 0.42em; font-weight: 500; vertical-align: super; line-height: 0; margin-left: 2px; letter-spacing: 0; }
sup.fn a { text-decoration: none; color: inherit; }
sup.fn a:hover { text-decoration: underline; }

/* ── buttons + text links ─────────────────────────────── */
.v2-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: var(--btn-h); padding: 0 var(--btn-px);
  border-radius: var(--btn-radius); border: var(--hairline-w) solid transparent;
  font-family: var(--font-sans); font-size: var(--btn-size); font-weight: var(--btn-weight);
  letter-spacing: var(--btn-tracking); text-transform: var(--btn-case);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
html.v2 .v2-btn--primary { background: var(--button-bg); color: var(--button-text); }
html.v2 .v2-btn--primary:hover { opacity: 0.86; }
html.v2 .v2-btn--secondary { background: var(--button-2-bg); color: var(--button-2-text); border-color: var(--button-2-border); }
html.v2 .v2-btn--secondary:hover { opacity: 0.86; }
html.v2 .v2-btn--tertiary { background: transparent; color: var(--text); border-color: var(--button-3-border); }
html.v2 .v2-btn--tertiary:hover { border-color: var(--text); }
html.v2 .v2-link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-sans); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: 2px; text-transform: uppercase; text-decoration: none; color: var(--text);
}
.v2-link::after { content: "→"; transition: transform var(--dur) var(--ease); }
.v2-link:hover::after { transform: translateX(4px); }
.v2-btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* legacy buttons on the other pages follow the same tokens */
html.v2 .btn, html.v2 .btn-p, html.v2 .btn-g, html.v2 .plan-btn, html.v2 .plan-btn-f, html.v2 .calc-cta, html.v2 .hiw-banner-btn,
html.v2 .form-sub-btn, html.v2 .careers-role-cta, html.v2 .careers-btn-primary, html.v2 .lp-btn, html.v2 .roi-dl-btn,
html.v2 .plan-btn-anchor, html.v2 .plan-btn-ent, html.v2 .plan-btn-scale, html.v2 #pg-pricing .pl-card-cta {
  background: var(--button-bg) !important; color: var(--button-text) !important; border: var(--hairline-w) solid transparent !important;
  border-radius: var(--btn-radius) !important; font-family: var(--font-sans) !important; font-size: var(--btn-size) !important;
  letter-spacing: var(--btn-tracking) !important; text-transform: var(--btn-case) !important; font-weight: var(--btn-weight) !important;
  min-height: var(--btn-h); transform: none !important;
}
html.v2 .btn-g { background: transparent !important; color: var(--text) !important; border-color: var(--button-3-border) !important; }

/* ── promo bar ────────────────────────────────────────── */
.v2-promo { background: var(--promo-bg); color: var(--promo-text); font-family: var(--font-sans); font-size: 13px; }
.v2-promo[hidden] { display: none; }
.v2-promo .v2-wrap { display: flex; align-items: center; justify-content: center; gap: var(--space-4); min-height: var(--promo-h); position: relative; }
.v2-promo a { color: inherit; text-decoration: none; font-weight: 600; }
.v2-promo a:hover { text-decoration: underline; }
.v2-promo button { position: absolute; right: var(--gutter); background: none; border: 0; color: inherit; font-size: 18px; line-height: 1; cursor: pointer; padding: var(--space-2); }

/* ── nav ──────────────────────────────────────────────── */
html.v2 #nav {
  position: sticky; top: 0; z-index: 300; height: var(--nav-h);
  display: flex !important; align-items: center; gap: var(--space-6);
  padding: 0 var(--gutter); background: var(--nav-bg) !important;
  border-bottom: var(--hairline-w) solid var(--hairline);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
html.v2 #nav .nb { justify-self: auto !important; order: 0; display: flex; align-items: center; gap: var(--space-3); text-decoration: none; color: var(--text); }
html.v2 #nav .nb img { height: 34px !important; }
html.v2 #nav .nb span { color: var(--text) !important; font-size: 19px !important; font-weight: 700 !important; letter-spacing: -0.4px !important; }
html.v2 #nav .nlinks { order: 1; display: flex; gap: var(--space-1); flex: 1; }
html.v2 #nav .nlinks > a, html.v2 #nav .nav-drop > a {
  position: relative; color: var(--text) !important; background: none !important; opacity: 0.78;
  font-family: var(--font-sans); font-size: 14px; font-weight: 500; padding: var(--space-2) var(--space-3); border-radius: 0;
}
html.v2 #nav .nlinks > a:hover, html.v2 #nav .nav-drop > a:hover, html.v2 #nav a.active { opacity: 1; }
html.v2 #nav .nlinks > a.active::after, html.v2 #nav .nav-drop > a.active::after {
  content: ""; position: absolute; left: var(--space-3); right: var(--space-3); bottom: -2px; height: var(--accent-line); background: var(--brand-gradient);
}
html.v2 #nav .nav-drop-menu {
  background: var(--surface-2) !important; border: var(--hairline-w) solid var(--hairline) !important; border-radius: var(--radius-card) !important;
}
html.v2 #nav .nav-drop-menu a { color: var(--text) !important; font-size: 14px; }
html.v2 #nav .nav-drop-menu a:hover { background: var(--surface) !important; }
html.v2 #nav .nav-drop-menu i { display: none; }
html.v2 #nav .nr { order: 2; display: flex; align-items: center; gap: var(--space-5); justify-self: auto !important; }
html.v2 #nav .nlogin { all: unset; cursor: pointer; font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--text); opacity: 0.78; }
html.v2 #nav .nlogin:hover { opacity: 1; text-decoration: underline; }
html.v2 #nav .nlogin i { display: none; }
html.v2 #nav .ndemo {
  display: inline-flex; align-items: center; height: 40px; padding: 0 var(--space-5);
  background: var(--button-bg) !important; color: var(--button-text) !important; border-radius: var(--btn-radius) !important;
  font-family: var(--font-sans); font-size: var(--btn-size); font-weight: var(--btn-weight); letter-spacing: var(--btn-tracking); text-transform: var(--btn-case);
}
html.v2 #nav .nmob { display: none; background: none; border: var(--hairline-w) solid var(--hairline); color: var(--text); border-radius: 6px; width: 40px; height: 40px; font-size: 18px; cursor: pointer; }
html.v2 .mob-menu { background: var(--bg) !important; color: var(--text) !important; border-bottom: var(--hairline-w) solid var(--hairline); }
html.v2 .mob-menu a, html.v2 .mob-menu button { color: var(--text) !important; font-family: var(--font-sans); }
@media (max-width: 1100px) {
  html.v2 #nav .nlinks { display: none !important; }
  html.v2 #nav .nmob { display: inline-flex; align-items: center; justify-content: center; }
  html.v2 #nav { justify-content: space-between; }
  html.v2 #nav .nlogin { display: none; }
}
@media (max-width: 480px) { html.v2 #nav .ndemo { display: none !important; } }

/* ── hero ─────────────────────────────────────────────── */
.v2-hero { position: relative; padding: 0 !important; }
.v2-hero__copy { padding: var(--space-9) 0 var(--space-8); max-width: 820px; }
.v2-hero h1 { font-size: var(--fs-h1); margin: var(--space-5) 0 var(--space-5); }
.v2-hero__lead { font-size: var(--fs-lead); color: var(--text); max-width: 640px; margin: 0 0 var(--space-3); }
.v2-hero__sub { font-size: var(--fs-small); color: var(--text-muted); max-width: 640px; margin: 0 0 var(--space-6); }
.v2-hero__trust { margin-top: var(--space-6); }
.v2-hero__media { margin: 0; }
.v2-hero__media img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-media); }
.v2-hero__shade { display: none; }
:root .v2-hero .em { font-style: normal; }
:root .v2-hero .em--italic { font-style: italic; }
/* full-bleed photo, ~90vh, headline bottom-left */
:root .v2-hero { min-height: 90vh; display: flex; align-items: flex-end; overflow: hidden; }
:root .v2-hero__media { position: absolute; inset: 0; }
:root .v2-hero__media img { height: 100%; aspect-ratio: auto; border-radius: 0; }
:root .v2-hero__shade { display: block; position: absolute; inset: 0; background: linear-gradient(to top, var(--overlay-strong), var(--overlay-soft)); }
:root .v2-hero > .v2-wrap { position: relative; z-index: 2; }
:root .v2-hero > .v2-hero__media-wrap { position: absolute; z-index: 0; }
:root .v2-hero__copy { padding: var(--space-8) 0 var(--space-8); }
:root .v2-hero .v2-hero__media-wrap { position: absolute; inset: 0; max-width: none; padding: 0; }
:root .v2-hero__sub { color: var(--hero-sub); }

/* ── spec strip (hero stats, $935B row, stream cards) ── */
.v2-spec { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); position: relative; border-top: var(--hairline-w) solid var(--hairline); }
.v2-spec--accent::before { content: ""; position: absolute; top: calc(-1 * var(--accent-line)); left: 0; width: 96px; height: var(--accent-line); background: var(--brand-gradient); }
.v2-spec__item { padding: var(--space-5) var(--space-5) var(--space-5) 0; border-right: var(--hairline-w) solid var(--hairline); }
.v2-spec__item + .v2-spec__item { padding-left: var(--space-5); }
.v2-spec__item:last-child { border-right: 0; }
.v2-spec__label { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
:root .v2-spec__label { font-family: var(--font-sans); letter-spacing: 2px; font-weight: 600; }
.v2-spec__value { font-family: var(--stat-font); font-weight: var(--stat-weight); font-size: var(--fs-stat); line-height: 1.1; letter-spacing: -0.02em; color: var(--text); margin-top: var(--space-2); }
.v2-spec__note { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.04em; color: var(--text-muted); margin-top: var(--space-2); }
.v2-spec--sm .v2-spec__value { font-size: 26px; }
.v2-spec--sm .v2-spec__item { padding-top: var(--space-4); padding-bottom: 0; }
.v2-spec__desc { font-family: var(--body-font); font-size: var(--fs-small); color: var(--text-muted); margin-top: var(--space-2); max-width: 260px; }
@media (max-width: 768px) {
  .v2-spec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-spec__item { border-bottom: var(--hairline-w) solid var(--hairline); padding-left: 0 !important; padding-right: var(--space-4); }
  .v2-spec__item:nth-child(2n) { border-right: 0; padding-left: var(--space-4) !important; }
  .v2-spec--sm { grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); }
}

/* ── section header ───────────────────────────────────── */
.v2-head { max-width: 720px; margin-bottom: var(--space-8); }
.v2-head h2 { font-size: var(--fs-h2); margin: var(--space-4) 0 var(--space-4); }
.v2-head p { font-size: var(--fs-body); color: var(--text-muted); margin: 0 0 var(--space-5); }
.v2-head--display h2 { font-size: var(--fs-display-2); }

/* ── detail rows ──────────────────────────────────────── */
.v2-rows { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); border-top: var(--hairline-w) solid var(--hairline); }
.v2-row { padding: var(--space-5) var(--space-5) 0 0; }
.v2-row + .v2-row { border-left: var(--hairline-w) solid var(--hairline); padding-left: var(--space-5); }
.v2-row h3, .v2-row h4 { font-family: var(--font-sans); font-size: 17px; font-weight: 600; letter-spacing: 0; line-height: 1.35; margin: var(--space-3) 0 var(--space-2); }
.v2-row p { font-size: 16px; color: var(--text-muted); margin: 0; }
@media (max-width: 900px) { .v2-rows { grid-template-columns: 1fr 1fr; } .v2-row:nth-child(3) { border-left: 0; padding-left: 0; } .v2-row { padding-bottom: var(--space-5); } }
@media (max-width: 560px) { .v2-rows { grid-template-columns: 1fr; } .v2-row + .v2-row { border-left: 0; padding-left: 0; border-top: var(--hairline-w) solid var(--hairline); } }

/* ── plain cards ──────────────────────────────────────── */
.v2-cards { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--space-4); }
.v2-card { background: var(--surface-2); border: var(--hairline-w) solid var(--hairline); border-radius: var(--radius-card); padding: var(--space-6); }
.v2-card h3, .v2-card h4 { font-size: var(--fs-h4); margin: 0 0 var(--space-3); }
.v2-card p { font-size: 16px; color: var(--text-muted); margin: 0; }
@media (max-width: 900px) { .v2-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .v2-cards { grid-template-columns: 1fr; } }

/* ── payer row + trust line ───────────────────────────── */
.v2-payers { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3) var(--space-6); padding: var(--space-6) 0; }
.v2-dotline { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; }
.v2-dotline > span + span::before { content: "·"; margin-right: var(--space-3); color: var(--text-muted); }

/* ── stream cards ─────────────────────────────────────── */
.v2-streams { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.v2-stream { display: flex; flex-direction: column; background: var(--surface-2); border: var(--hairline-w) solid var(--hairline); border-radius: var(--radius-card); padding: var(--space-5); text-decoration: none; color: var(--text); transition: border-color var(--dur) var(--ease); }
.v2-stream:hover { border-color: var(--text-muted); }
.v2-stream h3 { font-family: var(--font-sans); font-size: 20px; font-weight: 700; letter-spacing: -0.01em; margin: var(--space-5) 0 var(--space-2); }
.v2-stream p { font-size: 15px; color: var(--text-muted); margin: 0 0 var(--space-5); flex: 1; }
.v2-feed { list-style: none; margin: 0; padding: 0; border-top: var(--hairline-w) solid var(--hairline); }
.v2-feed li { display: flex; gap: var(--space-3); justify-content: space-between; align-items: baseline; padding: var(--space-2) 0; border-bottom: var(--hairline-w) solid var(--hairline); font-family: var(--font-sans); font-size: 13px; color: var(--text); }
.v2-feed__status { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.v2-feed__status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dot, var(--dot-ok)); }
.v2-feed__status[data-s="warn"] { --dot: var(--dot-warn); }
.v2-feed__status[data-s="info"] { --dot: var(--dot-info); }
.v2-stream .v2-label { margin-bottom: var(--space-3); }
@media (max-width: 1100px) { .v2-streams { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .v2-streams { grid-template-columns: 1fr; } }

/* ── cycle schematic ──────────────────────────────────── */
.v2-cycle__legend { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.v2-cycle__legend button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-sans); font-size: 14px; color: var(--text-muted); transition: color var(--dur) var(--ease); }
.v2-cycle__legend button:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.v2-cycle__legend button .n { width: 22px; height: 22px; border-radius: 50%; border: 1.25px solid var(--accent); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
.v2-cycle__legend button.is-on, .v2-cycle__legend button:hover { color: var(--text); }
.v2-cycle svg { display: block; width: 100%; height: auto; }
.v2-cycle .ln { fill: none; stroke: var(--text); stroke-opacity: 0.7; stroke-width: 1.25; transition: stroke-opacity var(--dur) var(--ease); }
.v2-cycle .ln--soft { stroke-opacity: 0.25; }
.v2-cycle .seg { transition: opacity var(--dur) var(--ease); }
.v2-cycle.is-focus .seg { opacity: 0.22; }
.v2-cycle.is-focus .seg.is-on { opacity: 1; }
.v2-cycle .mk circle { fill: var(--bg); stroke: var(--accent); stroke-width: 1.25; }
.v2-cycle .seg.is-on .mk circle { fill: var(--accent); }
.v2-cycle .mk text { fill: var(--accent); font-family: var(--font-sans); font-size: 13px; font-weight: 600; text-anchor: middle; dominant-baseline: central; }
.v2-cycle .seg.is-on .mk text { fill: var(--on-accent); }
.v2-cycle .cap { fill: var(--text-muted); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; text-anchor: middle; }
.v2-cycle .end { fill: var(--text); font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; }

/* ── gallery ──────────────────────────────────────────── */
.v2-gallery { position: relative; }
.v2-gallery__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: var(--space-4); }
.v2-gallery__track::-webkit-scrollbar { display: none; }
.v2-gallery__slide { flex: 0 0 100%; scroll-snap-align: start; margin: 0; }
.v2-gallery__frame { aspect-ratio: 3 / 2; border-radius: var(--radius-media); overflow: hidden; background: var(--surface-2); border: var(--hairline-w) solid var(--hairline); display: flex; align-items: center; justify-content: center; }
.v2-gallery__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-gallery__frame--ui { align-items: stretch; padding: var(--space-6); }
.v2-gallery__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); margin-top: var(--space-5); }
.v2-gallery__cap strong { display: block; font-family: var(--font-sans); font-weight: 600; font-size: 17px; }
.v2-gallery__cap span { font-family: var(--body-font); color: var(--text-muted); font-size: 15px; }
.v2-gallery__ctrl { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }
.v2-gallery__count { font-family: var(--font-mono); font-size: 13px; letter-spacing: var(--tracking-label); color: var(--text-muted); min-width: 48px; text-align: center; }
.v2-round { width: 44px; height: 44px; border-radius: 50%; border: var(--hairline-w) solid var(--button-3-border); background: transparent; color: var(--text); font-size: 16px; cursor: pointer; transition: border-color var(--dur) var(--ease); }
.v2-round:hover { border-color: var(--text); }

/* dashboard mock inside the gallery: thin rows, no glow */
.v2-dash { width: 100%; display: flex; flex-direction: column; gap: var(--space-5); font-family: var(--font-sans); }
.v2-dash__top { display: flex; justify-content: space-between; }
.v2-dash .v2-spec__value { font-size: 30px; }
.v2-dash__cols { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-6); flex: 1; }
.v2-dash__list { list-style: none; margin: 0; padding: 0; }
.v2-dash__list li { padding: var(--space-3) 0; border-bottom: var(--hairline-w) solid var(--hairline); font-size: 13.5px; }
.v2-dash__list li span { display: block; font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.v2-bars { display: flex; align-items: flex-end; gap: var(--space-2); height: 120px; border-bottom: var(--hairline-w) solid var(--hairline); }
.v2-bars i { flex: 1; background: var(--hairline); border-top: var(--hairline-w) solid var(--text-muted); }
.v2-bars i:last-child { background: var(--accent); border-top-color: var(--accent); opacity: 0.85; }
.v2-bars-x { display: flex; justify-content: space-between; margin-top: var(--space-2); }
@media (max-width: 768px) { .v2-dash__cols { grid-template-columns: 1fr; } .v2-gallery__frame--ui { aspect-ratio: auto; padding: var(--space-5); } .v2-gallery__bar { flex-direction: column; align-items: flex-start; } }

/* ── compare table ────────────────────────────────────── */
.v2-compare { width: 100%; border-collapse: collapse; font-family: var(--font-sans); }
.v2-compare th, .v2-compare td { padding: var(--space-4) var(--space-3); border-bottom: var(--hairline-w) solid var(--hairline); text-align: center; vertical-align: middle; }
.v2-compare th[scope="row"] { text-align: left; font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.v2-compare thead th { border-bottom: var(--hairline-w) solid var(--text); padding-bottom: var(--space-5); }
.v2-compare thead .tier { display: block; font-family: var(--display-font); font-weight: var(--display-weight); font-size: 24px; letter-spacing: var(--display-tracking); margin-bottom: var(--space-4); }
.v2-compare td { font-size: 16px; }
.v2-compare-wrap { overflow-x: auto; }
@media (max-width: 768px) { .v2-compare { min-width: 640px; } }

/* ── explore tiles ────────────────────────────────────── */
.v2-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.v2-tile { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--radius-card); overflow: hidden; background: var(--placeholder), var(--surface-2); border: var(--hairline-w) solid var(--hairline); color: var(--text); text-decoration: none; }
.v2-tile__ph { position: absolute; top: var(--space-4); left: var(--space-4); right: var(--space-4); font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.v2-tile__label { position: absolute; left: var(--space-5); bottom: var(--space-5); font-family: var(--font-sans); font-size: 17px; font-weight: 600; }
.v2-tile__label::after { content: " →"; display: inline-block; transition: transform var(--dur) var(--ease); }
.v2-tile:hover .v2-tile__label::after { transform: translateX(4px); }
@media (max-width: 900px) { .v2-tiles { grid-template-columns: 1fr 1fr; } }

/* ── pull quote (feature-flagged off) ─────────────────── */
.v2-quote[hidden] { display: none !important; }
.v2-quote blockquote { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: var(--fs-quote); line-height: 1.25; max-width: 900px; }
.v2-quote figcaption { margin-top: var(--space-5); }

/* ── sticky sub-nav (stream pages) ────────────────────── */
.v2-subnav { position: sticky; top: var(--nav-h); z-index: 250; background: var(--bg); border-bottom: var(--hairline-w) solid var(--hairline); }
.v2-subnav .v2-wrap { display: flex; gap: var(--space-5); overflow-x: auto; scrollbar-width: none; align-items: center; min-height: 52px; }
.v2-subnav strong { font-family: var(--font-sans); font-size: 14px; font-weight: 700; white-space: nowrap; margin-right: var(--space-3); }
.v2-subnav a { position: relative; font-family: var(--font-sans); font-size: 13px; font-weight: 500; text-decoration: none; color: var(--text-muted); white-space: nowrap; padding: var(--space-4) 0; }
.v2-subnav a.is-on { color: var(--text); }
.v2-subnav a.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--accent-line); background: var(--brand-gradient); }

/* ── sticky CTA bar ───────────────────────────────────── */
.v2-cta-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 280; background: var(--bg); border-top: var(--hairline-w) solid var(--hairline); transform: translateY(100%); transition: transform var(--dur) var(--ease); }
.v2-cta-bar.is-on { transform: translateY(0); }
.v2-cta-bar .v2-wrap { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-3); min-height: 72px; }
.v2-cta-bar .v2-meta { margin-right: auto; }
body.menu-open .v2-cta-bar { display: none; }
@media (max-width: 560px) { .v2-cta-bar .v2-meta { display: none; } .v2-cta-bar .v2-wrap { justify-content: stretch; } .v2-cta-bar .v2-btn { flex: 1; padding: 0 var(--space-3); } }

/* ── footer band + disclosures ────────────────────────── */
html.v2 #foot { background: var(--band-bg) !important; color: var(--band-text) !important; border-top: var(--hairline-w) solid var(--band-hairline); padding: var(--space-9) 0 var(--space-7); }
html.v2 #foot * { color: var(--band-text); }
html.v2 #foot p, html.v2 #foot .ft-copy { color: var(--band-muted) !important; font-family: var(--font-sans); font-size: 14px; }
html.v2 #foot h5, html.v2 #foot .ft-h { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--band-muted) !important; }
html.v2 #foot a { color: var(--band-text) !important; text-decoration: none; font-family: var(--font-sans); }
html.v2 #foot a:hover { text-decoration: underline; }
html.v2 #foot .fb-logo span { color: var(--band-text) !important; }
html.v2 #foot .ft-top, html.v2 #foot .ft-bottom { border-color: var(--band-hairline) !important; }
.v2-foot-ctrl { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-top: var(--space-5); }
.v2-toggle { display: inline-flex; border: var(--hairline-w) solid var(--band-hairline); border-radius: var(--btn-radius); padding: 3px; }
.v2-toggle button, .v2-pause { all: unset; cursor: pointer; font-family: var(--font-sans); font-size: 12px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: var(--band-text); padding: 6px 12px; border-radius: var(--btn-radius); }
.v2-toggle button[aria-pressed="true"] { background: var(--band-text); color: var(--band-bg) !important; }
.v2-pause { border: var(--hairline-w) solid var(--band-hairline); }
.v2-toggle button:focus-visible, .v2-pause:focus-visible { outline: 2px solid var(--band-text); outline-offset: 2px; }
.v2-disclosures { margin-top: var(--space-7); padding-top: var(--space-5); border-top: var(--hairline-w) solid var(--band-hairline); }
.v2-disclosures h2 { font-family: var(--font-mono) !important; font-weight: 500 !important; font-size: var(--fs-label) !important; letter-spacing: var(--tracking-label) !important; text-transform: uppercase; color: var(--band-muted) !important; margin: 0 0 var(--space-3); }
.v2-disclosures ol { margin: 0; padding-left: var(--space-5); font-family: var(--font-sans); font-size: 13px; color: var(--band-muted); }
.v2-disclosures li { margin-bottom: var(--space-1); color: var(--band-muted) !important; }
.v2-disclosures li:target { color: var(--band-text) !important; }

/* ── preview-only theme switch ────────────────────────── */
#v2-preview-pill { position: fixed; right: var(--space-4); bottom: 88px; z-index: 9999; display: flex; gap: 2px; padding: 3px; border-radius: var(--radius-btn); background: var(--surface-2); border: var(--hairline-w) solid var(--hairline); font-family: var(--font-sans); font-size: 13px; font-weight: 600; }
#v2-preview-pill span { padding: 6px 10px; color: var(--text-muted); }
#v2-preview-pill button { all: unset; cursor: pointer; padding: 6px 12px; border-radius: var(--radius-btn); color: var(--text); }
#v2-preview-pill button[aria-pressed="true"] { background: var(--text); color: var(--bg); }

/* ── motion: one gentle rise, then still ──────────────── */
.v2-rise { opacity: 0; transform: translateY(var(--rise)); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.v2-rise.is-in { opacity: 1; transform: none; }
html.v2[data-motion="paused"] *, html.v2[data-motion="paused"] *::before, html.v2[data-motion="paused"] *::after { animation-play-state: paused !important; transition: none !important; }
html.v2[data-motion="paused"] .v2-rise { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.v2 *, html.v2 *::before, html.v2 *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .v2-rise { opacity: 1; transform: none; }
}

/* ── legacy page sections inherit the calm ─────────────── */
html.v2 section:not(.v2-section):not(.v2-hero) { padding-top: var(--section-y); padding-bottom: var(--section-y); }
html.v2 .lbl, html.v2 .hi-chip, html.v2 .sc-ui-tag {
  font-family: var(--label-font) !important; font-weight: var(--label-weight) !important; font-size: var(--fs-label) !important;
  letter-spacing: var(--label-tracking) !important; text-transform: uppercase; color: var(--label-color) !important; background: none !important; border: 0 !important; padding: 0 !important;
}
html.v2 .ttl { font-family: var(--display-font) !important; font-weight: var(--display-weight) !important; letter-spacing: var(--display-tracking) !important; }
html.v2 .sub, html.v2 section p { font-family: var(--body-font); }
html.v2 .ticker-track { animation-duration: 120s !important; }
html.v2 .ticker-wrap { background: none !important; }
html.v2 .float-anim, html.v2 .float-anim2, html.v2 .float-anim3, html.v2 .pulse { animation: none !important; }

/* ── homepage sections ────────────────────────────────── */
.v2-section--tight { padding: var(--space-8) 0; }
.v2-section--stats { padding: 0 0 var(--space-8); }
:root .v2-section--stats { padding-top: var(--space-6); }
.v2-banner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; padding-bottom: var(--space-6); border-bottom: var(--hairline-w) solid var(--hairline); }
.v2-banner .v2-banner__t { font-family: var(--font-sans); font-weight: 600; font-size: 20px; letter-spacing: -0.01em; margin: 0 0 var(--space-1); }
.v2-banner p { margin: 0; color: var(--text-muted); font-size: 16px; }
.v2-inline-cta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; margin: var(--space-7) 0; }
.v2-inline-cta p { margin: 0; color: var(--text-muted); font-size: 16px; }
.v2-under { margin-top: var(--space-5); justify-content: flex-start; }
.v2-ehrs { margin: 0 0 var(--space-7); }
.v2-spec--words .v2-spec__value { font-size: 26px; }
.v2-spec--problem .v2-spec__value { font-size: var(--fs-stat); }
.v2-head .v2-btn-row { margin-top: var(--space-5); }
.v2-hero .v2-btn-row { margin-top: var(--space-2); }
.v2-cards { margin-top: 0; }
.v2-cycle { margin-top: var(--space-2); }

/* ROI estimator (markup and ids kept for main.v2.js) */
html.v2 .roi-wrap { background: var(--surface-2) !important; border: var(--hairline-w) solid var(--hairline) !important; border-radius: var(--radius-card) !important; }
html.v2 .roi-head { background: none !important; border-bottom: var(--hairline-w) solid var(--hairline) !important; }
html.v2 .roi-head h3 { font-family: var(--font-sans) !important; font-weight: 600 !important; font-size: 18px !important; letter-spacing: 0 !important; }
html.v2 .roi-head span, html.v2 .roi-field label, html.v2 .roi-output .rl { font-family: var(--font-mono) !important; font-weight: 500 !important; font-size: 12px !important; letter-spacing: var(--tracking-label) !important; text-transform: uppercase; color: var(--text-muted) !important; }
html.v2 .roi-field input { background: var(--bg) !important; border: var(--hairline-w) solid var(--hairline) !important; color: var(--text) !important; border-radius: 6px !important; font-family: var(--font-mono) !important; }
html.v2 .roi-output { background: none !important; border: 0 !important; border-bottom: var(--hairline-w) solid var(--hairline) !important; border-radius: 0 !important; }
html.v2 .roi-output .rv { font-family: var(--stat-font) !important; font-weight: var(--stat-weight) !important; color: var(--text) !important; }
html.v2 .roi-output .rn { color: var(--text-muted) !important; }
html.v2 .roi-inputs { border-right: var(--hairline-w) solid var(--hairline) !important; }
html.v2 section .tc, html.v2 .roi-wrap ~ * { text-align: left; }

/* FAQ */
html.v2 .faq { border: 0 !important; border-bottom: var(--hairline-w) solid var(--hairline) !important; border-radius: 0 !important; background: none !important; }
html.v2 .faq-q { font-family: var(--font-sans) !important; font-weight: 600 !important; color: var(--text) !important; background: none !important; }
html.v2 .faq-a { font-family: var(--body-font) !important; color: var(--text-muted) !important; }
html.v2 #home-faq .ttl, html.v2 #home-faq h2 { font-size: var(--fs-h2) !important; }

/* footer layout */
html.v2 #foot .ft-top { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: var(--space-6); }
html.v2 #foot .ft-col { display: flex; flex-direction: column; gap: var(--space-2); }
html.v2 #foot .ft-col a { font-size: 14px; }
html.v2 #foot .fb-logo { display: flex; align-items: center; gap: var(--space-2); }
html.v2 #foot .fb-logo span { font-size: 17px; font-weight: 700; }
html.v2 #foot .fb-name { display: none; }
html.v2 #foot .ft-bottom { margin-top: var(--space-7); padding-top: var(--space-5); border-top: var(--hairline-w) solid var(--band-hairline); }
html.v2 #foot .ft-bottom-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
html.v2 #foot .ft-social, html.v2 #foot .ft-legal { display: flex; gap: var(--space-4); }
html.v2 #foot .ft-tm { font-size: 13px !important; margin-top: var(--space-3); }
@media (max-width: 900px) { html.v2 #foot .ft-top { grid-template-columns: 1fr 1fr; } html.v2 #foot .ft-brand { grid-column: 1 / -1; } }

/* ── pricing: the plan matrix as a compare table ──────── */
html.v2 .pr-matrix, html.v2 .tk-call-table { border-collapse: collapse !important; background: none !important; border: 0 !important; font-family: var(--font-sans); }
html.v2 .pr-matrix th, html.v2 .pr-matrix td, html.v2 .tk-call-table th, html.v2 .tk-call-table td {
  background: none !important; border: 0 !important; border-bottom: var(--hairline-w) solid var(--hairline) !important;
  text-align: center; padding: var(--space-4) var(--space-3) !important; color: var(--text) !important;
}
html.v2 .pr-matrix tbody th, html.v2 .pr-matrix td:first-child, html.v2 .tk-call-table td:first-child {
  text-align: left; font-family: var(--font-mono) !important; font-weight: 500 !important; font-size: var(--fs-label) !important;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted) !important;
}
html.v2 .pr-matrix thead th { border-bottom: var(--hairline-w) solid var(--text) !important; font-family: var(--display-font) !important; font-weight: var(--display-weight) !important; font-size: 20px !important; }
html.v2 .pr-matrix [class*="hl"], html.v2 .pr-matrix .pop { background: none !important; }

/* hero legibility over the photo: a side shade on top of the bottom-to-top one */
:root .v2-hero__shade { background: linear-gradient(90deg, var(--overlay-side), transparent 62%), linear-gradient(to top, var(--overlay-strong), var(--overlay-soft)); }
:root .v2-hero__trust { color: var(--hero-sub); }

/* mobile nav: logo left, menu button right, one row */
@media (max-width: 1100px) {
  html.v2 #nav { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; height: var(--nav-h) !important; padding: 0 var(--gutter) !important; grid-template-columns: none !important; }
  html.v2 #nav .nb { position: static !important; transform: none !important; margin: 0 !important; }
  html.v2 #nav .nr { margin-left: auto !important; position: static !important; }
}
@media (max-width: 768px) {
  :root { --nav-h: 64px; }
  .v2-hero__copy { padding-top: var(--space-7); }
  #v2-preview-pill { bottom: auto; top: calc(var(--nav-h) + 52px); right: var(--space-3); }
}
@media (max-width: 1100px) { html.v2 #nav .nr { justify-content: flex-end; gap: var(--space-3); width: auto !important; } html.v2 #nav .nr > :not(.nmob):not(.ndemo) { display: none !important; } }
@media (max-width: 560px) {
  html.v2 .v2-btn { white-space: normal; height: auto; min-height: var(--btn-h); padding-top: var(--space-3); padding-bottom: var(--space-3); text-align: center; line-height: 1.3; }
  html.v2 .v2-btn-row .v2-btn { width: 100%; }
}
/* company fact chips: muted text needs a light enough chip */
html.v2 .hfacts .hf { background: var(--surface-2) !important; border: var(--hairline-w) solid var(--hairline) !important; }
.v2-ehrs-lbl { margin: 0 0 var(--space-3); }
.v2-ehrs + .v2-ehrs-lbl { margin-top: calc(-1 * var(--space-5)); }
html.v2 .stitle { color: var(--text) !important; }

/* light: the legacy photo fades were built for the dark site and fade to the page
   colour, which in light mode washes photos out to off-white. Photos show at full
   colour; text keeps a solid side panel (heroes) or moves off the photo (cards). */
:root[data-theme="light"] .pp-photo-overlay, :root[data-theme="light"] .hc-img-overlay,
:root[data-theme="light"] .ct-img-overlay { display: none; }
:root[data-theme="light"] .pp-photo-footer { position: static; background: var(--surface); border-top: var(--hairline-w) solid var(--hairline); }
:root[data-theme="light"] .co-hero-bg img, :root[data-theme="light"] .prod-hero-bg img,
:root[data-theme="light"] .ct-hero-bg img, :root[data-theme="light"] .img-banner img { opacity: 1 !important; }
:root[data-theme="light"] .co-hero-bg-grad, :root[data-theme="light"] .prod-hero-bg-gradient,
:root[data-theme="light"] .ct-hero-bg-grad, :root[data-theme="light"] .img-banner-overlay {
  background: linear-gradient(90deg, rgba(var(--bg-rgb), .97) 0%, rgba(var(--bg-rgb), .94) 42%, rgba(var(--bg-rgb), 0) 68%) !important;
}
/* pricing: the comparison cards cover the photo, so (as in dark) it is a veiled backdrop */
:root[data-theme="light"] .pr-hero-bg img { opacity: 1 !important; }
:root[data-theme="light"] .pr-hero-bg-grad { background: rgba(var(--bg-rgb), .62) !important; }
/* phones: the text fills the width, so a photo behind it can only be a faded backdrop.
   Instead the photo is a full-colour band above the text, in both themes. */
@media (max-width: 760px) {
  html.v2 .co-hero-bg, html.v2 .prod-hero-bg, html.v2 .ct-hero-bg { position: relative; inset: auto; height: 240px; overflow: hidden; }
  html.v2 .co-hero-bg img, html.v2 .prod-hero-bg img, html.v2 .ct-hero-bg img {
    height: 100% !important; margin-top: 0 !important; opacity: 1 !important; transform: none !important; object-position: 50% 25%;
  }
  html.v2 .co-hero-bg-grad, html.v2 .prod-hero-bg-gradient, html.v2 .ct-hero-bg-grad { display: none; }
  html.v2 .co-hero-content, html.v2 .prod-hero-content, html.v2 .ct-hero-content { padding-top: var(--space-7) !important; }
  :root[data-theme="light"] .img-banner-overlay { background: rgba(var(--bg-rgb), .9) !important; }
}

/* legacy text the colour rewrite left unreadable: the selected calculator tab (bg-on-bg),
   the overview page's pale-blue dark-site text, and the bright code / metric colours on light */
html.v2 .calc-page .org-tab.active { color: var(--text) !important; }
html.v2 .lp-trust, html.v2 .lp-trust strong, html.v2 .lp-cta-ti, html.v2 .lp-disclaimer { color: var(--text-muted) !important; }
:root[data-theme="light"] .mval.y { color: var(--dot-warn); }
:root[data-theme="light"] .sbody span[style*="#79c0ff"] { color: #2C5A96 !important; }
:root[data-theme="light"] .sbody span[style*="#a5f3a5"] { color: #2F6B4F !important; }
:root[data-theme="light"] .sbody span[style*="#ffa657"] { color: #8A4B12 !important; }

/* animated flow diagrams (How it works + each Stream page) were drawn for the dark site:
   navy nodes, white labels. Light keeps the same drawing in the light palette. */
:root[data-theme="light"] svg circle[fill="#0d1f3c"] { fill: var(--surface-2); }
:root[data-theme="light"] svg rect[fill="rgba(11,27,51,.5)"] { fill: var(--surface-2); }
:root[data-theme="light"] svg [stroke^="rgba(255,255,255"] { stroke: rgba(var(--text-rgb), .22); }
:root[data-theme="light"] svg text[fill="#fff"] { fill: var(--text); }
:root[data-theme="light"] svg text[fill^="rgba(255,255,255"] { fill: var(--text-muted); }
:root[data-theme="light"] svg text[fill="#34d399"]:not([class]) { fill: #1F7A55; }
:root[data-theme="light"] svg text[fill="#48CAE4"]:not([class]) { fill: #0E6A82; }
:root[data-theme="light"] svg stop[stop-color="#fff"] { stop-color: var(--text); }

/* photos: keep faces in frame (cover crops from the centre by default, which cuts heads) */
html.v2 .co-hero-bg img, html.v2 .prod-hero-bg img, html.v2 .pr-hero-bg img, html.v2 .ct-hero-bg img,
html.v2 .pp-photo img, html.v2 .hc-img img, html.v2 .ct-img img, html.v2 .img-banner img { object-position: 50% 22%; }
/* the parallax heroes were pushed up 15%, which always hid the top of the photo (heads).
   Parallax moves the photo down on scroll, so starting it flush at the top never shows a gap. */
html.v2 .co-hero-bg img, html.v2 .prod-hero-bg img, html.v2 .pr-hero-bg img { margin-top: 0 !important; height: 115% !important; }
/* form fields: the dark site's black tint (rgba(0,0,0,.25)) turns grey on light; one field style in both */
html.v2 .fg input, html.v2 .fg select, html.v2 .fg textarea {
  background: var(--surface-2); color: var(--text); border: var(--hairline-w) solid var(--hairline); border-radius: var(--btn-radius);
}
html.v2 .fg input:focus, html.v2 .fg select:focus, html.v2 .fg textarea:focus { border-color: var(--text-muted); }
html.v2 .fg input::placeholder, html.v2 .fg textarea::placeholder { color: var(--text-muted); opacity: 1; }
/* the old phone nav was fixed, so style.css pushed every page down 110px under 960px.
   The v2 nav is sticky (in the flow), which left a 110px empty band above each page. */
@media (max-width: 960px) { html.v2 .page { padding-top: 0; } }
/* delineation (Mark, 2026-10-20: "needs a little more delineation throughout"):
   every section after the first is divided by a hairline, and every second one sits
   on the surface colour, so the page reads in bands. Same rule in both themes. */
html.v2 section:not(.v2-hero):not(:first-of-type) { border-top: var(--hairline-w) solid var(--hairline); }
html.v2 section:not(.v2-hero):nth-of-type(even):not([style*="background"]) { background-color: var(--surface); }
:root[data-theme="light"] .lp-impact-val.a { color: var(--dot-warn) !important; }

/* legibility (Mark, 2026-10-21: "the font is not legible"). Sizes are floored by
   scripts/rsai-site-legibility.py; these are the colour leftovers an audit of every
   page found below WCAG AA (4.5:1): bright dark-site accents used as text on cream,
   faded labels, the calculator's old footer override. Light is ink-only by design
   (tokens.css), so accent text becomes ink; money gained/at risk keeps its meaning. */
:root[data-theme="light"] .ep-pill, :root[data-theme="light"] .lp-prob-stat, :root[data-theme="light"] .lp-lbl,
:root[data-theme="light"] .tk-call-tier-range, :root[data-theme="light"] [style*="color:#c471ed"] { color: var(--text) !important; }
:root[data-theme="light"] .calc-page .sv:not(.inactive):not(.cv-yr), :root[data-theme="light"] #proj-year-total, :root[data-theme="light"] #proj-monthly { color: var(--dot-ok) !important; }
:root[data-theme="light"] #i-ov-val { color: var(--dot-warn) !important; }
html.v2 .plan-tab .tc { opacity: 1 !important; color: var(--text-muted) !important; }
:root[data-theme="dark"] .calc-page .section-label span { color: var(--dot-info) !important; }
html.v2 body.calc-standalone footer#foot, html.v2 body.calc-standalone footer#foot .wrap,
html.v2 body.calc-standalone footer#foot .ft-top, html.v2 body.calc-standalone footer#foot .ft-bottom {
  background: var(--band-bg) !important; background-color: var(--band-bg) !important;
}
html.v2 body.calc-standalone footer#foot a { color: var(--band-text) !important; }
html.v2 body.calc-standalone footer#foot p, html.v2 body.calc-standalone footer#foot .ft-copy,
html.v2 body.calc-standalone footer#foot .ft-h, html.v2 body.calc-standalone footer#foot .ft-tm { color: var(--band-muted) !important; }
:root[data-theme="dark"] #proj-monthly, :root[data-theme="dark"] #proj-year-total { color: var(--dot-ok) !important; }
/* EHR cards: their one-line, ellipsed tag list is wider at the legibility floor; grid items
   must be allowed to shrink (min-width:0) or the card pushes past a phone screen */
html.v2 .emr-grid > * { min-width: 0; }
/* home: the How It Works flow under "One platform" (Mark, 2026-10-21) */
html.v2 .v2-flow { margin-top: var(--space-7); }
html.v2 .v2-flow .rfa-streamcall { margin-top: var(--space-5); }
/* delineation (Mark, 2026-10-22: "add more delineation … some pages are still hard
   to read, especially in light mode"). The old stylesheet's cards fill with a 2–5% tint
   of the text colour and edge in a 7–10% one, so on cream (or near-black) they have no
   edge at all. They take a real card surface and the theme hairline instead; the
   hairline and band colours themselves were raised in tokens.css. Chips keep their
   fill and just get an edge that shows. */
html.v2 .cos, html.v2 .vc, html.v2 .metric, html.v2 .calc-section, html.v2 .calc-grid,
html.v2 .roi-output, html.v2 .pp-metric, html.v2 .cs-card, html.v2 .careers-vc,
html.v2 .careers-role-card, html.v2 .glow-card, html.v2 .tcard, html.v2 .dash-metric,
html.v2 .emr-card, html.v2 .ehr-tile, html.v2 .lp-stat, html.v2 .lp-prob-card,
html.v2 .lp-rec-card, html.v2 .lp-impact-card, html.v2 .lp-for-card, html.v2 .plan,
html.v2 .hiw-proof-card, html.v2 #pg-howitworks .hiw-proof-card, html.v2 .ct-expect,
html.v2 .pr-intro-band, html.v2 .blog-single-cta, html.v2 .sc-calc-output, html.v2 .sc-calc-custom,
html.v2 #pg-pricing .pl-card, html.v2 #pg-pricing .tk-card, html.v2 #pg-pricing .pr-compare-block,
html.v2 .rheum-l .rl-cap, html.v2 .rheum-l .rl-calc-card, html.v2 .rheum-d .rd-tile {
  background: var(--surface-2);
  border-color: var(--hairline);
}
/* edges that were missing: the value cards had only their left rule, the stat tiles
   only the dividers between them */
html.v2 .vc { border-top: var(--hairline-w) solid var(--hairline); border-right: var(--hairline-w) solid var(--hairline); border-bottom: var(--hairline-w) solid var(--hairline); }
html.v2 .co-stats { border-color: var(--hairline); overflow: hidden; }
html.v2 .tp, html.v2 .hf, html.v2 .chip, html.v2 .tag, html.v2 .tech-chip, html.v2 .ltag,
html.v2 .lp-pill, html.v2 .blog-filter-btn, html.v2 .sc-ui-row { border-color: var(--hairline); }

/* nav (Mark, 2026-10-22): the prior version's links in the bar, logo left.
   Ten links, including Specialties, fit beside the logo and both buttons from 1366px.
   Padding tightens below 1600, and again below 1440, so Contact is not clipped.
   Below 1366 the menu button takes over.
   Phone menu: full height under the bar, large rows, no underlines, the CTA at the bottom. */
html.v2 #nav { gap: var(--space-5); }
html.v2 #nav .nlinks { gap: 0; }
html.v2 #nav .nlinks > a, html.v2 #nav .nav-drop > a { padding: var(--space-2) 10px; white-space: nowrap; }
html.v2 #nav .nb, html.v2 #nav .nr { flex-shrink: 0; }
html.v2 #nav .nlinks { min-width: 0; }
/* 1366–1599: the same links, a little tighter, so laptops keep the full bar */
@media (max-width: 1599px) {
  html.v2 #nav { gap: var(--space-4); }
  html.v2 #nav .nlinks > a, html.v2 #nav .nav-drop > a { padding: var(--space-2) 6px; }
  html.v2 #nav .nr { gap: var(--space-4); }
  html.v2 #nav .ndemo { padding: 0 var(--space-4); letter-spacing: 1px; }
}
/* 1366–1439: Specialties needs a few more pixels or Contact clips */
@media (max-width: 1439px) and (min-width: 1366px) {
  html.v2 #nav .nlinks > a, html.v2 #nav .nav-drop > a { padding-left: 2px; padding-right: 2px; }
}
@media (max-width: 1365px) {
  html.v2 #nav .nlinks { display: none !important; }
  html.v2 #nav .nmob { display: inline-flex; align-items: center; justify-content: center; }
  html.v2 #nav .nr > :not(.nmob):not(.ndemo) { display: none !important; }
  html.v2 #nav .nr { margin-left: auto !important; gap: var(--space-3); }
}
html.v2 #nav .nmob { width: 44px; height: 44px; font-size: 20px; }
html.v2 .mob-menu {
  position: fixed; top: var(--mob-top, calc(var(--promo-h) + var(--nav-h))); left: 0; right: 0; bottom: 0;
  max-height: none; z-index: 299; flex-direction: column; gap: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: var(--space-2) var(--gutter) calc(var(--space-6) + env(safe-area-inset-bottom));
  background: var(--bg) !important; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
  border-top: var(--hairline-w) solid var(--hairline); border-bottom: 0;
}
html.v2 .mob-menu .mob-list { display: flex; flex-direction: column; }
html.v2 .mob-menu .mob-list > a, html.v2 .mob-menu .mob-toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px;
  padding: 0 var(--space-1); border-radius: 0; border-bottom: var(--hairline-w) solid var(--hairline);
  font-family: var(--font-sans); font-size: 18px; font-weight: 600; color: var(--text) !important;
  text-decoration: none !important; background: none !important;
}
html.v2 .mob-menu .mob-chev { font-size: 20px; line-height: 1; opacity: 0.85; margin-left: var(--space-3); }
html.v2 .mob-menu .mob-sub { padding: var(--space-1) 0 var(--space-2) var(--space-4); border-bottom: var(--hairline-w) solid var(--hairline); gap: 0; }
html.v2 .mob-menu .mob-sub a {
  min-height: 48px; padding: 0 var(--space-1); border-radius: 0; font-size: 16px; font-weight: 500;
  color: var(--text-muted) !important; text-decoration: none !important; background: none !important;
}
html.v2 .mob-menu a.active { color: var(--text) !important; font-weight: 700; box-shadow: inset 3px 0 0 var(--text); padding-left: var(--space-3); }
html.v2 .mob-menu .mob-cta { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-6); }
html.v2 .mob-menu .mob-cta a {
  display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 var(--space-5);
  border-radius: var(--btn-radius); font-family: var(--font-sans); font-size: var(--btn-size); font-weight: var(--btn-weight);
  letter-spacing: var(--btn-tracking); text-transform: var(--btn-case); text-decoration: none !important;
}
html.v2 .mob-menu .mob-cta-primary { background: var(--button-bg) !important; color: var(--button-text) !important; }
html.v2 .mob-menu .mob-cta-login { border: var(--hairline-w) solid var(--button-2-border); color: var(--text) !important; background: none !important; }
body.mob-open { overflow: hidden; }
:root body.mob-open #nav, :root body.v2-home.mob-open:not(.is-scrolled) #nav { background: var(--nav-bg) !important; border-bottom-color: var(--hairline); }
@media (min-width: 1366px) { html.v2 .mob-menu, html.v2 .mob-menu.open { display: none !important; } }

/* Phones: the home photograph is the same file as desktop, shown as a
   full-colour band. The headline and buttons sit on the page colour under
   it. Desktop keeps the type on the photo. The EHR sentence and the four
   trust chips stay off the phone. Copy comes first in the markup, so the
   band is ordered above it. */
@media (max-width: 760px) {
  :root body.v2-home .v2-hero {
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
  }
  :root body.v2-home .v2-hero .v2-hero__media-wrap {
    position: relative !important;
    inset: auto !important;
    order: -1;
    z-index: 0;
    height: clamp(210px, 56vw, 300px);
    flex: none;
    width: 100%;
    max-width: none;
    padding: 0;
  }
  :root body.v2-home .v2-hero__media {
    position: relative !important;
    inset: auto !important;
    height: 100%;
  }
  :root body.v2-home .v2-hero__media img {
    height: 100% !important;
    width: 100%;
    object-fit: cover;
    object-position: 50% 42%;
    opacity: 1;
  }
  :root body.v2-home .v2-hero__shade { display: none !important; }
  :root body.v2-home .v2-hero__copy { padding: var(--space-6) 0 var(--space-7); }
  :root body.v2-home .v2-hero__sub,
  :root body.v2-home .v2-hero__trust { display: none; }

  /* The same wash (45% photo + a page-colour veil) on Overview, EHR, and the blog. */
  html.v2 .lp-hero,
  html.v2 .blog-hero {
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding-top: 0 !important;
  }
  html.v2 .lp-hero-grid { display: none; }
  html.v2 div[style*="inset:0"]:has(> img[style*="opacity:.45"]) {
    position: relative !important;
    inset: auto !important;
    height: 210px;
    flex: none;
  }
  html.v2 img[style*="opacity:.45"] {
    opacity: 1 !important;
    height: 100% !important;
    object-position: 50% 22% !important;
  }
  html.v2 div[style*="inset:0"]:has(> img[style*="opacity:.45"]) > div { display: none !important; }
  html.v2 div[style*="background-size:60px 60px"] { display: none !important; }
  html.v2 div[style*="padding:96px 24px 72px"] { padding: var(--space-6) 0 var(--space-6) !important; }
  html.v2 .blog-hero { padding: 0 0 var(--space-7) !important; }
  html.v2 .blog-hero .wrap { padding-top: var(--space-6); }
  html.v2 .blog-hero img { object-position: 50% 42% !important; }
  html.v2 .lp-hero-inner { padding-top: var(--space-6) !important; padding-bottom: var(--space-6) !important; }

  /* Pricing: the comparison is taller than the screen on a phone, and the
     dashboard was stretched to cover all of it under a veil, so it looked
     like it never finished loading. A short full-colour band is enough. */
  html.v2 .pr-hero,
  html.v2 .pr-hero-compare { display: flex; flex-direction: column; }
  html.v2 .pr-hero-bg {
    position: relative; inset: auto; height: 180px; overflow: hidden; flex: none;
  }
  html.v2 .pr-hero-bg img {
    height: 100% !important; width: 100%; margin-top: 0 !important;
    opacity: 1 !important; object-fit: cover; object-position: 50% 8% !important;
    transform: none !important;
  }
  html.v2 .pr-hero-bg-grad { display: none; }
}

/* Blog, light: a cream veil over a 45% photo turns the picture into the page.
   The photo is a full-colour band and the title sits on the page. */
:root[data-theme="light"] .blog-hero {
  display: flex; flex-direction: column; align-items: stretch; min-height: 0;
  padding: 0 0 var(--space-7);
}
:root[data-theme="light"] .blog-hero > div[style*="inset:0"] {
  position: relative !important; inset: auto !important;
  height: clamp(180px, 42vw, 360px); flex: none;
}
:root[data-theme="light"] .blog-hero img {
  opacity: 1 !important; height: 100% !important; object-fit: cover;
  object-position: 50% 42% !important;
}
:root[data-theme="light"] .blog-hero > div[style*="inset:0"] > div { display: none !important; }
:root[data-theme="light"] .blog-hero .wrap { padding-top: var(--space-7); }

/* How it works: the diagram is the picture. Show it whole, at full colour, then the copy.
   A 45% fade plus a page-colour veil was washing the chart out.
   !important holds the copy padding against the generic section padding. */
.rsai-hero { border-bottom: var(--hairline-w) solid var(--hairline); background: var(--bg); }
.rsai-hero__media { background: var(--surface); line-height: 0; }
.rsai-hero__media img {
  display: block; width: 100%; height: auto; max-height: min(70vh, 640px);
  object-fit: contain; object-position: center top; margin: 0 auto;
}
html.v2 .rsai-hero__copy { padding: var(--space-8) 0 var(--space-7) !important; }
@media (max-width: 760px) {
  html.v2 .rsai-hero__copy { padding: var(--space-6) 0 var(--space-6) !important; }
  html.v2 .rsai-hero h1 br { display: none; }
}

/* Delineation, in the same rhythm as About RSAI.
   About reads as separate blocks: a hairline, then the page colour and the
   band colour taking turns, with cards a step off whichever they sit on.
   A 2% text tint, a gradient of the page colour, or background:var(--navy2)
   (never defined) was standing in for that band and then blocking it — the
   even-section rule skips any section whose style mentions a background.
   Those resolve to the page colour, so the block ran into the one above it. */
html.v2 section[style*="background:rgba(var(--text-rgb),.02"],
html.v2 section[style*="background:rgba(var(--text-rgb),.04"],
html.v2 section[style*="--navy"],
html.v2 section[style*="rgba(var(--bg-rgb)"] {
  background: transparent !important;
}
html.v2 section:not(.v2-hero):nth-of-type(even) {
  background-color: var(--surface) !important;
}
/* Callout panels written as a faint tint with a soft edge. About's cards
   use the card surface and the theme hairline; these follow. */
html.v2 [style*="border-radius:9px"][style*="background:rgba(var(--text-rgb),.0"],
html.v2 [style*="border-radius:10px"][style*="background:rgba(var(--text-rgb),.0"],
html.v2 [style*="border-radius:12px"][style*="background:rgba(var(--text-rgb),.0"],
html.v2 [style*="border-radius:14px"][style*="background:rgba(var(--text-rgb),.0"],
html.v2 [style*="border-radius:16px"][style*="background:rgba(var(--text-rgb),.0"] {
  background-color: var(--surface-2) !important;
  border-color: var(--hairline) !important;
}
/* Products: eight cards were a tint of the page. They take the card surface.
   The grid itself stays the page colour so it does not merge with the band below. */
html.v2 #pg-products .ps-grid-section {
  background: transparent !important;
  border-top: var(--hairline-w) solid var(--hairline);
}
html.v2 #pg-products .ps-card {
  background: var(--surface-2) !important;
  border: var(--hairline-w) solid var(--hairline) !important;
}
html.v2 #pg-products .ps-card-stats { border-top-color: var(--hairline); }
html.v2 #pg-products .ps-card-icon,
html.v2 #pg-products .ps-card-tag {
  background: var(--bg);
  border-color: var(--hairline);
  color: var(--text);
}
/* How it works: the page's own rules use an id, so the card surface has to
   name that id too. A gradient back to the page colour was melting the cards
   into the band. */
html.v2 #pg-howitworks .hiw-job-card,
html.v2 #pg-howitworks .hiw-arch-card,
html.v2 #pg-howitworks .rfa-streamcall-card {
  background: var(--surface-2) !important;
  border: var(--hairline-w) solid var(--hairline) !important;
}
html.v2 #pg-howitworks .hiw-arch-section {
  border-top: var(--hairline-w) solid var(--hairline);
}
html.v2 #pg-howitworks .hiw-arch-section:nth-of-type(1) { border-top: 0; }

/* Audit, 2026-10-24. About RSAI is the reference: the headline sits on the page
   colour and the photograph is a picture, not a veil. Overview and EHR still
   laid the headline on a 45% photo in light mode on desktop (phones already
   lift that photo into a band). Same treatment here, desktop light only.
   Dark keeps the existing veil. */
@media (min-width: 761px) {
  :root[data-theme="light"] .lp-hero,
  :root[data-theme="light"] #pg-emr > div:first-child {
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    background: none !important;
  }
  :root[data-theme="light"] .lp-hero > div[style*="inset:0"],
  :root[data-theme="light"] #pg-emr > div:first-child > div[style*="inset:0"]:has(> img) {
    position: relative !important;
    inset: auto !important;
    height: clamp(220px, 32vw, 380px);
    flex: none;
    overflow: hidden;
  }
  :root[data-theme="light"] .lp-hero img[style*="opacity:.45"],
  :root[data-theme="light"] #pg-emr img[style*="opacity:.45"] {
    opacity: 1 !important;
    height: 100% !important;
    width: 100%;
    object-fit: cover;
  }
  :root[data-theme="light"] .lp-hero > div[style*="inset:0"] > div,
  :root[data-theme="light"] #pg-emr > div:first-child > div[style*="inset:0"] > div,
  :root[data-theme="light"] .lp-hero-grid,
  :root[data-theme="light"] #pg-emr div[style*="background-size:60px 60px"] {
    display: none !important;
  }
}
/* Overview stat cards were a 4% tint, so they disappeared into the page and
   into the photograph. They take the card surface, same as About's cards. */
html.v2 .lp-stat {
  background: var(--surface-2) !important;
  border: var(--hairline-w) solid var(--hairline) !important;
}
html.v2 .lp-stat::before { background: var(--hairline); }
/* Founder chips used a mint-to-#00c48c gradient with page-coloured type.
   The green end was about 2:1. An ink chip reads in both themes. */
html.v2 .hc-badge.rsai {
  background: var(--text) !important;
  color: var(--bg) !important;
}