/* ============================================================
   Court theme — indigo action / clay-red value
   Fonts: Space Grotesk (display), IBM Plex Sans (body), self-hosted
   ============================================================ */

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/css/fonts/space-grotesk-latin-var.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("/css/fonts/ibm-plex-sans-latin-var.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: italic;
  font-weight: 100 700;
  font-display: swap;
  src: url("/css/fonts/ibm-plex-sans-latin-var-italic.woff2") format("woff2");
}

/* ---- Light tokens ---- */
:root {
  --bs-body-font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-line-height: 1.6;
  --bs-body-color: #0f1317;
  --bs-body-color-rgb: 15, 19, 23;
  --bs-secondary-color: #616b7a;
  --bs-border-color: #dde2ec;

  /* indigo = action */
  --bs-primary: #4b39c8;
  --bs-primary-rgb: 75, 57, 200;
  --bs-primary-bg-subtle: #e7e4fb;
  --bs-primary-border-subtle: #c9c2f4;
  --bs-primary-text-emphasis: #4b39c8;
  --bs-link-color: #4b39c8;
  --bs-link-color-rgb: 75, 57, 200;
  --bs-link-hover-color: #3a2ba3;
  --bs-link-hover-color-rgb: 58, 43, 163;

  /* clay red = value (bonuses, stars, hot badges) */
  --bs-danger: #b93a2e;
  --bs-danger-rgb: 185, 58, 46;
  --bs-danger-bg-subtle: #f7e3e1;
  --bs-danger-border-subtle: #ecc4c0;
  --bs-danger-text-emphasis: #a13228;

  /* canvas one step under white card surfaces */
  --bs-tertiary-bg: #edf0f6;
  --bs-tertiary-bg-rgb: 237, 240, 246;

  /* footer ink */
  --bs-dark: #12141c;
  --bs-dark-rgb: 18, 20, 28;

  /* 8px component radius (buttons, badges, inputs) */
  --bs-border-radius: 0.5rem;
}

/* ---- Dark tokens ---- */
[data-bs-theme="dark"] {
  --bs-body-bg: #191c26;
  --bs-body-bg-rgb: 25, 28, 38;
  --bs-body-color: #e8eaf2;
  --bs-body-color-rgb: 232, 234, 242;
  --bs-secondary-color: #9aa3b5;
  --bs-border-color: #2a2f3e;

  --bs-primary-bg-subtle: #2a2547;
  --bs-primary-border-subtle: #3d3568;
  --bs-primary-text-emphasis: #b9b1f8;
  --bs-link-color: #9c91f5;
  --bs-link-color-rgb: 156, 145, 245;
  --bs-link-hover-color: #b9b1f8;
  --bs-link-hover-color-rgb: 185, 177, 248;

  --bs-danger-bg-subtle: #35201e;
  --bs-danger-border-subtle: #57312d;
  --bs-danger-text-emphasis: #e0857c;

  --bs-tertiary-bg: #12141c;
  --bs-tertiary-bg-rgb: 18, 20, 28;
}
/* value text reads clay-lighter on dark surfaces */
[data-bs-theme="dark"] .text-danger {
  --bs-danger-rgb: 224, 133, 124;
}

/* ---- Typography ---- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: "Space Grotesk", var(--bs-body-font-family);
  letter-spacing: -0.03em;
  text-wrap: balance;
}
p, li {
  text-wrap: pretty;
}
.table {
  font-variant-numeric: tabular-nums;
  --bs-table-bg: transparent;
}

/* ---- Buttons: indigo action / quiet outline ---- */
/* One 8px radius for every button size, matching the nav's active pill */
.btn {
  font-weight: 500;
  --bs-btn-border-radius: 0.5rem;
}
.btn:not(.btn-sm) {
  --bs-btn-padding-y: 0.5rem;
  --bs-btn-padding-x: 1rem;
}
.btn-primary {
  font-weight: 600;
  --bs-btn-focus-shadow-rgb: 111, 97, 211;
  --bs-btn-bg: #4b39c8;
  --bs-btn-border-color: #4b39c8;
  --bs-btn-hover-bg: #3a2ba3;
  --bs-btn-hover-border-color: #3a2ba3;
  --bs-btn-active-bg: #342792;
  --bs-btn-active-border-color: #342792;
  --bs-btn-disabled-bg: #4b39c8;
  --bs-btn-disabled-border-color: #4b39c8;
}
.btn-outline-secondary {
  --bs-btn-focus-shadow-rgb: 97, 107, 122;
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-hover-color: var(--bs-body-color);
  --bs-btn-hover-bg: var(--bs-tertiary-bg);
  --bs-btn-hover-border-color: var(--bs-border-color);
  --bs-btn-active-color: var(--bs-body-color);
  --bs-btn-active-bg: var(--bs-tertiary-bg);
  --bs-btn-active-border-color: var(--bs-border-color);
}

/* ---- Navbar: brand lockup + active pill ---- */
.navbar-brand {
  font-family: "Space Grotesk", var(--bs-body-font-family);
  font-weight: 700;
  letter-spacing: -0.03em;
}
.brand-lines {
  display: flex;
  flex-direction: column;
  line-height: 0.95;
  font-size: 1rem;
}
.brand-line-2 {
  color: var(--bs-primary);
}
[data-bs-theme="dark"] .brand-line-2 {
  color: #9c91f5;
}
.brand-mark .mark-diamond {
  fill: var(--bs-primary);
}
[data-bs-theme="dark"] .brand-mark .mark-diamond {
  fill: #ffffff;
}
.brand-mark .mark-pip {
  fill: #b93a2e;
}
.navbar .nav-link.active {
  color: var(--bs-primary);
  font-weight: 600;
}
[data-bs-theme="dark"] .navbar .nav-link.active {
  color: #b9b1f8;
}

/* ---- Tab pills: reuse the navbar's active-pill language (subtle indigo
   fill with indigo text) instead of Bootstrap's solid primary block.
   Token overrides only, so dark mode follows automatically ---- */
.nav-pills {
  --bs-nav-link-color: var(--bs-body-color);
  --bs-nav-link-hover-color: var(--bs-primary);
  --bs-nav-pills-link-active-bg: var(--bs-primary-bg-subtle);
  --bs-nav-pills-link-active-color: var(--bs-primary-text-emphasis);
}
.nav-pills .nav-link {
  font-weight: 500;
}
.nav-pills .nav-link.active {
  font-weight: 600;
}
.nav-pills .nav-link:not(.active):hover {
  background-color: var(--bs-secondary-bg);
}

/* ---- Footer: separates from the dark canvas (deeper ink + hairline
   edge mirroring the navbar's border-bottom) ---- */
footer.bg-dark {
  border-top: 1px solid var(--bs-border-color);
}
html[data-bs-theme="dark"] footer.bg-dark {
  --bs-dark-rgb: 9, 11, 17;
}

/* Bootstrap ships no resize utility; the contact form's textarea is fixed-size
   by design. Here rather than inline so the CSP can forbid inline styles. */
textarea.form-control {
	resize: none;
}

/* ============================================================
   Review template (.rv layer) — adopted from the v2 prototype 2026-09-02.
   First live page: /casinos/slotocash-casino. Icon symbols live in
   img/icons.svg. Score meters use .barw-* (width = score x 10), CSP-safe.
   ============================================================ */

/* ============================================================ */
/* Layer tokens, light values first, re-declared for dark - the Court way. */
.rv {
	--rv-row: #F5F7FB;               /* soft row / tile surface  */
	--rv-ink: #12141C;               /* CTA band                 */
	--rv-text2: #556070;             /* secondary-strong text    */
	--rv-con-bg: rgba(185,58,46,.1); /* "watch" icon chip        */
	--rv-glass: rgba(237,240,246,.92); /* frosted sticky subnav  */
	overflow-x: hidden; overflow-x: clip;
}
[data-bs-theme="dark"] .rv {
	--rv-row: rgba(255,255,255,.06);
	--rv-text2: #AEB6C4;
	--rv-con-bg: rgba(224,133,124,.16);
	--rv-glass: rgba(20,23,33,.92);
}

.rv .rv-container { max-width: 1164px; margin-inline: auto; padding-inline: 12px; }

.rv .rv-card { background: var(--bs-body-bg); border-radius: 8px; }
.rv .rv-card-pad { padding: 20px; }
@media (min-width: 992px) { .rv .rv-card-pad { padding: 32px; } }

.rv h1, .rv h2, .rv h3 { font-family: "Space Grotesk", system-ui, sans-serif; letter-spacing: -.03em; }
.rv .rv-h2 { font-size: 22px; font-weight: 700; margin-bottom: 16px; }
@media (min-width: 992px) { .rv .rv-h2 { font-size: 26px; } }
.rv .rv-h3 { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.rv .rv-label { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--bs-secondary-color); }
.rv .rv-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ---------- hero ---------- */
.rv .rv-hero { position: relative; height: 200px; background: var(--rv-text2); border-radius: 8px 8px 0 0; overflow: hidden; }
@media (min-width: 992px) { .rv .rv-hero { height: 280px; } }
.rv .rv-hero img.rv-hero-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rv .rv-hero-scrim { position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(to top, rgba(18,20,28,.92) 0%, rgba(18,20,28,.6) 55%, rgba(18,20,28,.15) 100%); }
@media (min-width: 992px) {
	.rv .rv-hero-scrim { background: linear-gradient(90deg, rgba(18,20,28,.92) 0%, rgba(18,20,28,.6) 40%, rgba(18,20,28,0) 68%); }
}
.rv .rv-hero-inner { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; align-items: flex-end; gap: 12px; }
@media (min-width: 992px) { .rv .rv-hero-inner { left: 32px; bottom: 28px; gap: 20px; } }
.rv .rv-logo-tile { width: 56px; height: 56px; border-radius: 8px; overflow: hidden; flex: 0 0 auto; }
@media (min-width: 992px) { .rv .rv-logo-tile { width: 104px; height: 104px; } }
.rv .rv-logo-tile img { width: 100%; height: 100%; object-fit: cover; }
.rv .rv-badge-new { background: var(--bs-danger); color: #fff; border-radius: 8px; padding: 3px 9px; font-size: 11px; font-weight: 500; letter-spacing: .1em; white-space: nowrap; }
.rv .rv-badge-glass { background: rgba(18,20,28,.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; border-radius: 8px; padding: 3px 9px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.rv .rv-hero h1 { font-size: 24px; font-weight: 700; letter-spacing: -.035em; line-height: 1.05; color: #fff; margin: 0; text-shadow: 0 1px 3px rgba(18,20,28,.6), 0 0 24px rgba(18,20,28,.4); }
@media (min-width: 992px) { .rv .rv-hero h1 { font-size: 40px; } }

/* ---------- stat strip: divided grid; short labels + no captions on phones -- */
.rv .rv-stats { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); background: var(--bs-body-bg); border-radius: 0 0 8px 8px; }
@media (min-width: 992px) { .rv .rv-stats { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.rv .rv-stat { padding: 14px 16px; border-top: 1px solid var(--bs-border-color); min-width: 0; }
@media (min-width: 992px) { .rv .rv-stat { padding: 18px 24px; } }
.rv .rv-stat + .rv-stat { border-left: 1px solid var(--bs-border-color); }
@media (max-width: 991.98px) { .rv .rv-stat:nth-child(odd) { border-left: 0; } }
.rv .rv-stat .rv-label { margin-bottom: 6px; }
.rv .rv-stat-value { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.rv .rv-stat-value svg { align-self: center; flex: 0 0 auto; }
.rv .rv-stat-value strong { font-family: "Space Grotesk", system-ui, sans-serif; font-size: 22px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
@media (min-width: 992px) { .rv .rv-stat-value strong { font-size: 24px; } }
.rv .rv-stat-value small { font-size: 13px; color: var(--bs-secondary-color); }
@media (max-width: 575.98px) {
	.rv .rv-stat-value small, .rv .rv-stat .rv-label-long { display: none; }
}
@media (min-width: 576px) { .rv .rv-stat .rv-label-short { display: none; } }

/* ---------- sticky section nav: DESKTOP ONLY (no horizontal scroll on phones) */
.rv .rv-subnav { display: none; }
@media (min-width: 992px) {
	.rv .rv-subnav { display: block; position: sticky; top: 56px; z-index: 20; background: var(--rv-glass); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--bs-border-color); }
	.rv .rv-subnav-inner { display: flex; align-items: center; gap: 6px; height: 52px; }
	.rv .rv-subnav a.rv-navlink { text-decoration: none; color: var(--rv-text2); font-size: 13.5px; font-weight: 600; padding: 7px 12px; border-radius: 8px; white-space: nowrap; }
	.rv .rv-subnav a.rv-navlink:hover { background: var(--bs-primary-bg-subtle); color: var(--bs-primary); }
	.rv .rv-subnav .rv-play { margin-left: auto; text-decoration: none; background: var(--bs-primary); color: #fff; border-radius: 8px; padding: 8px 16px; font-size: 13.5px; font-weight: 600; white-space: nowrap; flex: 0 0 auto; }
	.rv .rv-subnav .rv-play:hover { background: #3A2BA8; }
}

/* ---------- mobile "In this review" index (replaces the pill strip) -------- */
.rv .rv-index { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); border: 1px solid var(--bs-border-color); border-radius: 8px; overflow: hidden; }
@media (min-width: 992px) { .rv .rv-index-card { display: none; } }
.rv .rv-index a { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 12px 16px; text-decoration: none; color: var(--bs-body-color); font-size: 14px; font-weight: 600; border-top: 1px solid var(--bs-tertiary-bg); }
.rv .rv-index a:nth-child(-n+2) { border-top: 0; }
.rv .rv-index a:nth-child(even) { border-left: 1px solid var(--bs-tertiary-bg); }
.rv .rv-index a svg { color: var(--bs-secondary-color); flex: 0 0 auto; }

/* ---------- main grid; on phones the offer leads and the extras trail ----- */
.rv .rv-grid { display: flex; flex-direction: column; gap: 24px; }
@media (max-width: 991.98px) {
	.rv .rv-grid .rv-sidebar { display: contents; }
	.rv .rv-grid .rv-offer { order: -1; }
	.rv .rv-grid .rv-extra { order: 99; }
}
@media (min-width: 992px) {
	.rv .rv-grid { display: grid; grid-template-columns: minmax(0,1fr) 348px; gap: 28px; align-items: start; }
	.rv .rv-grid .rv-sidebar { order: 0; position: sticky; top: 124px; }
}
.rv .rv-main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.rv .rv-sidebar { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* ---------- verdict pros/cons (grey fill per design) ---------- */
.rv .rv-procon { display: grid; grid-template-columns: minmax(0,1fr); gap: 16px; }
@media (min-width: 768px) { .rv .rv-procon { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; } }
.rv .rv-procon-box { background: var(--rv-row); border-radius: 8px; padding: 20px; }
.rv .rv-icon-chip { width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.rv .rv-icon-chip.is-pro { background: var(--bs-primary-bg-subtle); color: var(--bs-primary); }
.rv .rv-icon-chip.is-con { background: var(--rv-con-bg); color: var(--bs-danger); }
.rv .rv-procon-box ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; }
.rv .rv-procon-box li { display: flex; gap: 10px; align-items: flex-start; }
.rv .rv-procon-box li svg { flex: 0 0 14px; margin-top: 5px; }

/* ---------- meters: track sized to the label column, fill = value ---------- */
.rv .rv-meter-row { display: grid; grid-template-columns: minmax(0,1fr) 48px; gap: 6px 16px; align-items: center; }
.rv .rv-meter-row .rv-meter-label { font-size: 14.5px; font-weight: 500; }
.rv .rv-meter-row .rv-meter { grid-column: 1 / -1; }
@media (min-width: 768px) { .rv .rv-meter-row .rv-meter { grid-column: auto; } }
@media (min-width: 768px) {
	.rv .rv-meter-row { grid-template-columns: 150px minmax(0,1fr) 48px; }
	.rv .rv-meter-row .rv-meter-label { grid-column: auto; }
}
.rv .rv-meter { height: 8px; background: var(--bs-tertiary-bg); border-radius: 999px; overflow: hidden; }
.rv .rv-meter > span { display: block; height: 100%; border-radius: 999px; background: var(--bs-primary); }
.rv .rv-meter > span.is-clay { background: var(--bs-danger); }
.rv .rv-meter-score { font-size: 14px; font-weight: 500; text-align: right; }
.rv .rv-payout-row { grid-template-columns: minmax(0,1fr) 150px; }
@media (min-width: 768px) {
	.rv .rv-payout-row { grid-template-columns: 190px minmax(0,1fr) 150px; }
	.rv .rv-payout-row .rv-meter-label { grid-column: auto; }
}
.rv .rv-payout-time { font-size: 14px; color: var(--rv-text2); text-align: right; }

/* ---------- tier pills + bonus table ---------- */
.rv .nav-pills { align-items: center; gap: 8px; }
.rv .nav-pills .nav-link { border: 1px solid var(--bs-border-color); background: var(--bs-body-bg); color: var(--rv-text2); border-radius: 8px; padding: 9px 18px; min-height: 44px; display: inline-flex; align-items: center; font-size: 14px; font-weight: 600; white-space: nowrap; }
.rv .nav-pills .nav-link:hover { background: var(--rv-row); color: var(--rv-text2); }
.rv .nav-pills .nav-link.active { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.rv .rv-tab-total { display: flex; justify-content: flex-end; align-items: baseline; gap: 8px; font-size: 13px; color: var(--bs-secondary-color); }
.rv .rv-tab-total strong { font-family: "Space Grotesk", system-ui, sans-serif; font-size: 17px; font-weight: 700; color: var(--bs-danger); letter-spacing: -.02em; }

/* Neutralise EVERY Bootstrap table border, then draw only the design's own
   hairlines. The earlier attempt missed thead's 2px currentcolor rule, which
   is where the heavy dark lines came from. */
.rv .table-responsive { border: 1px solid var(--bs-border-color); border-radius: 8px; }
.rv .table { margin-bottom: 0; --bs-table-bg: transparent; --bs-table-border-color: transparent; border-color: transparent; }
.rv .table > :not(caption) > * > * { border: 0; box-shadow: none; }
.rv .table thead th { background: var(--rv-row); border-bottom: 1px solid var(--bs-border-color); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--bs-secondary-color); padding: 12px 16px; white-space: nowrap; }
.rv .table tbody > tr:not(:last-child) > * { border-bottom: 1px solid var(--bs-tertiary-bg); }
.rv .table tbody th, .rv .table tbody td { font-size: 14.5px; padding: 13px 16px; vertical-align: middle; }
.rv .table tbody th { font-weight: 600; }
.rv .rv-match { color: var(--bs-primary); font-weight: 500; }
.rv .rv-coupon { font-size: 13px; background: var(--bs-tertiary-bg); border: 1px dashed var(--bs-border-color); border-radius: 6px; padding: 3px 10px; white-space: nowrap; }

/* ---------- bonus terms tiles (grey fill, equal heights) ---------- */
.rv .rv-terms { display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; align-items: stretch; }
@media (min-width: 768px) { .rv .rv-terms { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.rv .rv-term { display: flex; gap: 10px; align-items: flex-start; background: var(--rv-row); border-radius: 8px; padding: 12px 14px; font-size: 14px; }
.rv .rv-term svg { flex: 0 0 13px; margin-top: 5px; color: var(--bs-secondary-color); }

/* ---------- reload cards: WHITE + 1px border, per the design ---------- */
.rv .rv-reloads { display: grid; grid-template-columns: minmax(0,1fr); gap: 16px; }
@media (min-width: 576px) { .rv .rv-reloads { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 992px) { .rv .rv-reloads { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.rv .rv-reload { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 8px; padding: 20px; }
.rv .rv-reload-name { font-family: "Space Grotesk", system-ui, sans-serif; font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
.rv .rv-chip-day { background: var(--bs-primary-bg-subtle); color: var(--bs-primary); border-radius: 8px; padding: 2px 9px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.rv .rv-reload-match { font-family: "Space Grotesk", system-ui, sans-serif; font-size: 30px; font-weight: 700; color: var(--bs-danger); letter-spacing: -.03em; line-height: 1; }
.rv .rv-kv-row { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13.5px; color: var(--rv-text2); }
.rv .rv-kv-row span { white-space: nowrap; }

/* ---------- game stat tiles + chips ---------- */
.rv .rv-tiles { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
@media (min-width: 992px) { .rv .rv-tiles { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.rv .rv-tile { background: var(--rv-row); border-radius: 8px; padding: 18px 20px; min-width: 0; }
.rv .rv-tile .rv-label { font-size: 11.5px; margin-bottom: 6px; }
.rv .rv-tile-value { font-family: "Space Grotesk", system-ui, sans-serif; font-size: 22px; font-weight: 700; letter-spacing: -.03em; }
.rv .rv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rv .rv-chip-outline { border: 1px solid var(--bs-border-color); border-radius: 8px; padding: 6px 12px; font-size: 13.5px; }
.rv .rv-chip-fill { background: var(--rv-row); border-radius: 8px; padding: 6px 12px; font-size: 13.5px; color: var(--rv-text2); }

/* ---------- banking summary: label col on desktop, stacked on phones ------- */
.rv .rv-summary { border: 1px solid var(--bs-border-color); border-radius: 8px; overflow: hidden; }
.rv .rv-summary > div { display: grid; grid-template-columns: minmax(0,1fr); font-size: 14.5px; }
.rv .rv-summary > div + div { border-top: 1px solid var(--bs-tertiary-bg); }
.rv .rv-summary dt { padding: 12px 18px 0; font-weight: 600; }
.rv .rv-summary dd { padding: 2px 18px 12px; margin: 0; color: var(--rv-text2); }
@media (min-width: 768px) {
	.rv .rv-summary > div { grid-template-columns: 220px minmax(0,1fr); }
	.rv .rv-summary dt { padding: 13px 18px; background: var(--rv-row); }
	.rv .rv-summary dd { padding: 13px 18px; color: inherit; }
}

/* ---------- facts rows ---------- */
.rv .rv-facts { display: grid; grid-template-columns: minmax(0,1fr); gap: 0 32px; }
@media (min-width: 768px) { .rv .rv-facts { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.rv .rv-fact { display: flex; justify-content: space-between; gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--bs-tertiary-bg); font-size: 14.5px; }
.rv .rv-fact span:first-child { color: var(--bs-secondary-color); flex: 0 0 auto; }
.rv .rv-fact span:last-child { font-weight: 500; text-align: right; }

/* ---------- support tiles: WHITE + 1px border, per the design ---------- */
.rv .rv-support { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
@media (min-width: 992px) { .rv .rv-support { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.rv .rv-support-tile { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 8px; padding: 16px; min-width: 0; }
.rv .rv-support-tile svg { color: var(--bs-primary); margin-bottom: 10px; }
.rv .rv-support-name { font-size: 14.5px; font-weight: 600; margin-bottom: 2px; }
.rv .rv-support-detail { font-size: 13px; color: var(--bs-secondary-color); }

/* ---------- closing CTA band ---------- */
.rv .rv-cta-band { background: var(--rv-ink); border-radius: 8px; border: 1px solid transparent; padding: 24px; display: flex; flex-direction: column; gap: 18px; }
[data-bs-theme="dark"] .rv .rv-cta-band { border-color: var(--bs-border-color); }
@media (min-width: 992px) { .rv .rv-cta-band { padding: 32px; flex-direction: row; align-items: center; gap: 28px; } }
.rv .rv-cta-band h2 { font-size: 22px; font-weight: 700; color: #fff; margin: 0 0 6px; }
@media (min-width: 992px) { .rv .rv-cta-band h2 { font-size: 24px; } }
.rv .rv-cta-band p { margin: 0; color: #A7B0BE; font-size: 14.5px; }
.rv .rv-btn { text-decoration: none; background: var(--bs-primary); color: #fff; border-radius: 8px; padding: 14px 28px; min-height: 44px; font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.rv .rv-btn:hover { background: #5C4CD6; color: #fff; }

/* ---------- sidebar cards ---------- */
.rv .rv-side-card { background: var(--bs-body-bg); border-radius: 8px; overflow: hidden; }
.rv .rv-side-head { padding: 20px 22px; border-bottom: 1px solid var(--bs-tertiary-bg); display: flex; align-items: center; gap: 12px; }
.rv .rv-side-logo { width: 44px; height: 44px; border-radius: 8px; overflow: hidden; flex: 0 0 auto; }
.rv .rv-side-logo img { width: 100%; height: 100%; object-fit: cover; }
.rv .rv-side-name { font-family: "Space Grotesk", system-ui, sans-serif; font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.rv .rv-side-sub { font-size: 12.5px; color: var(--bs-secondary-color); }
.rv .rv-side-body { padding: 22px; }
.rv .rv-side-amount { font-family: "Space Grotesk", system-ui, sans-serif; font-size: 30px; font-weight: 700; letter-spacing: -.035em; line-height: 1.1; color: var(--bs-danger); margin-bottom: 4px; }
.rv .rv-side-facts { border-top: 1px solid var(--bs-tertiary-bg); }
.rv .rv-side-facts > div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 22px; border-bottom: 1px solid var(--rv-row); font-size: 13.5px; }
.rv .rv-side-facts span:first-child { color: var(--bs-secondary-color); }
.rv .rv-side-facts span:last-child { font-weight: 500; text-align: right; }
.rv .rv-side-pad { padding: 22px; }
.rv .rv-chip-sm { border: 1px solid var(--bs-border-color); border-radius: 8px; padding: 5px 10px; font-size: 12.5px; }
.rv .rv-sister { background: var(--bs-primary-bg-subtle); border-radius: 8px; padding: 22px; }
.rv .rv-sister .rv-h3, .rv .rv-sister p { color: var(--bs-primary-text-emphasis); }
.rv .rv-sister-link { text-decoration: none; display: flex; align-items: center; justify-content: space-between; background: var(--bs-body-bg); border-radius: 8px; padding: 12px 14px; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--bs-body-color); }

/* ---------- placeholder markers ---------- */
.rv .rv-ph { color: var(--bs-danger); font-style: normal; }
.rv .rv-ph-badge { background: var(--rv-con-bg); color: var(--bs-danger); border-radius: 8px; padding: 3px 10px; font-size: 11px; font-weight: 500; letter-spacing: .06em; }

/* Meter fill widths, 1% steps. A score of 8.8/10 renders as .barw-88. */
.barw-1{width:1%}.barw-2{width:2%}.barw-3{width:3%}.barw-4{width:4%}.barw-5{width:5%}.barw-6{width:6%}.barw-7{width:7%}.barw-8{width:8%}.barw-9{width:9%}.barw-10{width:10%}.barw-11{width:11%}.barw-12{width:12%}.barw-13{width:13%}.barw-14{width:14%}.barw-15{width:15%}.barw-16{width:16%}.barw-17{width:17%}.barw-18{width:18%}.barw-19{width:19%}.barw-20{width:20%}.barw-21{width:21%}.barw-22{width:22%}.barw-23{width:23%}.barw-24{width:24%}.barw-25{width:25%}.barw-26{width:26%}.barw-27{width:27%}.barw-28{width:28%}.barw-29{width:29%}.barw-30{width:30%}.barw-31{width:31%}.barw-32{width:32%}.barw-33{width:33%}.barw-34{width:34%}.barw-35{width:35%}.barw-36{width:36%}.barw-37{width:37%}.barw-38{width:38%}.barw-39{width:39%}.barw-40{width:40%}.barw-41{width:41%}.barw-42{width:42%}.barw-43{width:43%}.barw-44{width:44%}.barw-45{width:45%}.barw-46{width:46%}.barw-47{width:47%}.barw-48{width:48%}.barw-49{width:49%}.barw-50{width:50%}.barw-51{width:51%}.barw-52{width:52%}.barw-53{width:53%}.barw-54{width:54%}.barw-55{width:55%}.barw-56{width:56%}.barw-57{width:57%}.barw-58{width:58%}.barw-59{width:59%}.barw-60{width:60%}.barw-61{width:61%}.barw-62{width:62%}.barw-63{width:63%}.barw-64{width:64%}.barw-65{width:65%}.barw-66{width:66%}.barw-67{width:67%}.barw-68{width:68%}.barw-69{width:69%}.barw-70{width:70%}.barw-71{width:71%}.barw-72{width:72%}.barw-73{width:73%}.barw-74{width:74%}.barw-75{width:75%}.barw-76{width:76%}.barw-77{width:77%}.barw-78{width:78%}.barw-79{width:79%}.barw-80{width:80%}.barw-81{width:81%}.barw-82{width:82%}.barw-83{width:83%}.barw-84{width:84%}.barw-85{width:85%}.barw-86{width:86%}.barw-87{width:87%}.barw-88{width:88%}.barw-89{width:89%}.barw-90{width:90%}.barw-91{width:91%}.barw-92{width:92%}.barw-93{width:93%}.barw-94{width:94%}.barw-95{width:95%}.barw-96{width:96%}.barw-97{width:97%}.barw-98{width:98%}.barw-99{width:99%}.barw-100{width:100%}

/* ---------- welcome package: per-deposit cards on phones ---------- */
.rv .rv-depcards { display: flex; flex-direction: column; gap: 12px; }
.rv .rv-depcard { border: 1px solid var(--bs-border-color); border-radius: 8px; padding: 16px; }
.rv .rv-depcard-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.rv .rv-depcard-name { font-family: "Space Grotesk", system-ui, sans-serif; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.rv .rv-depcard-amount { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.rv .rv-depcard-amount .rv-depcard-match { font-family: "Space Grotesk", system-ui, sans-serif; font-size: 26px; font-weight: 700; color: var(--bs-danger); letter-spacing: -.03em; line-height: 1; }
.rv .rv-depcard-amount small { font-size: 14px; color: var(--bs-secondary-color); }
.rv .rv-depcard-amount small b { color: var(--bs-body-color); }
.rv .rv-depcard-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13.5px; color: var(--rv-text2); }
.rv .rv-extra { display: flex; flex-direction: column; gap: 16px; }

/* Clay and indigo TEXT switches to the Court dark-emphasis tokens (fills on
   bars/buttons stay full-strength, same as the rest of the site). */
[data-bs-theme="dark"] .rv .rv-reload-match,
[data-bs-theme="dark"] .rv .rv-side-amount,
[data-bs-theme="dark"] .rv .rv-tab-total strong,
[data-bs-theme="dark"] .rv .rv-depcard-match { color: var(--bs-danger-text-emphasis); }
[data-bs-theme="dark"] .rv .rv-match { color: var(--bs-primary-text-emphasis); }
[data-bs-theme="dark"] .rv .rv-subnav a.rv-navlink:hover { color: var(--bs-primary-text-emphasis); }
[data-bs-theme="dark"] .rv .rv-icon-chip.is-pro { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); }
[data-bs-theme="dark"] .rv .rv-icon-chip.is-con { color: var(--bs-danger-text-emphasis); }
[data-bs-theme="dark"] .rv .rv-ph, [data-bs-theme="dark"] .rv .rv-ph-badge { color: var(--bs-danger-text-emphasis); }

/* ---- Back to top: pure CSS. Bootstrap reboot supplies smooth scrolling
   (reduced-motion aware). Where scroll-driven animations are supported the
   button fades in after one viewport of scrolling; elsewhere it is simply
   always visible. ---- */
.back-to-top {
	position: fixed; right: 16px; bottom: 16px; z-index: 1030;
	width: 44px; height: 44px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--bs-primary); color: #fff;
	box-shadow: 0 2px 10px rgba(18,20,28,.25);
}
.back-to-top:hover, .back-to-top:focus-visible { background: #3a2ba8; color: #fff; }
.back-to-top svg { transform: rotate(-90deg); }
@supports (animation-timeline: scroll()) {
	@keyframes btt-reveal {
		from { opacity: 0; visibility: hidden; translate: 0 8px; }
		to { opacity: 1; visibility: visible; translate: 0 0; }
	}
	.back-to-top { animation: btt-reveal linear both; animation-timeline: scroll(); animation-range: 100vh 140vh; }
}

/* Section nav: ScrollSpy marks the in-view section (site.js init). Reuses
   the hover language so active and hover read as one system. */
.rv .rv-subnav a.rv-navlink.active { background: var(--bs-primary-bg-subtle); color: var(--bs-primary); }
[data-bs-theme="dark"] .rv .rv-subnav a.rv-navlink.active { color: var(--bs-primary-text-emphasis); }

/* Anchor jumps must land below the sticky navbar (+ subnav on desktop) —
   without this, short sections tuck their heading under the bars and the
   next section appears to be the target. */
.rv article[id] { scroll-margin-top: 76px; }
@media (min-width: 992px) { .rv article[id] { scroll-margin-top: 128px; } }

/* Review history log — one full-width row per entry: fixed mono date
   column, normal-weight left-aligned note (rv-facts is the wrong shape
   for prose-length values). */
.rv .rv-log > div { display: flex; gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--bs-tertiary-bg); font-size: 14.5px; }
.rv .rv-log > div:last-child { border-bottom: 0; padding-bottom: 0; }
.rv .rv-log time { color: var(--bs-secondary-color); flex: 0 0 88px; }
.rv .rv-log span { min-width: 0; }