/* VioVerse Mockup — Base: variables, reset, nav, screen toggle */

:root {
  --bg: #fbf8f1;
  --surface: rgba(255,255,255,0.52);
  --text: #1E2A35;
  --text-secondary: #1E2A35;
  --border: rgba(31,24,19,0.12);
  --red: #D6584C;
  --red-bg: rgba(214,88,76,0.08);
  --coral: #f26419;
  --blue: #5d4f42;
  --blue-bg: rgba(93,79,66,0.08);
  --gray-badge: #5d4f42;
  --gray-bg: rgba(93,79,66,0.08);
  --green: #b3904f;
  --green-bg: rgba(179,144,79,0.08);
  --yellow: #EAB308;
  --radius: 28px;
  --radius-sm: 14px;
  --shadow: 0 14px 40px rgba(28,20,14,0.08);
  --shadow-lg: 0 14px 40px rgba(28,20,14,0.12);
  --font-display: "Georgia", "Iowan Old Style", "Palatino Linotype", serif;
  --bone-0: #fbf8f1;
  --ink-0: #1D2430;
  --ink-1: #221c17;
  --ink-3: #5d4f42;
  --line: rgba(31,24,19,0.12);
  --line-strong: rgba(31,24,19,0.22);
  --severe: #D6584C;
  --shadow-card: 0 8px 24px rgba(28,20,14,0.07);
  /* Shared dim layer behind every overlay (the navbar vault dropdown,
     .mode-modal, .acr-modal, .wait-interstitial, the payment modals).
     75% bone-cream, no blur. One value so vault and modals are visually
     identical and future tuning is one line. */
  --backdrop-scrim: rgba(251,248,241,0.75);
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bone-0); /* unframed default; .app provides coral when framed */
  color: var(--text);
  line-height: 1.5;
  margin: 0;
  overflow: hidden; /* body itself does not scroll; .container does */
}

/* NAV — sticky bar inside .container.
   Pre-shell (2026-05-05) this was a full-viewport-width bar with complex
   clamp+calc padding to align the logo with centered content columns.
   Post-shell: the .container IS the content boundary, so padding simplifies.
   The nav stretches to .container width; content columns inside are
   max-width-capped + centered within the container. */
/* FS-2 (2026-08-02): the nav bar itself had no family. It looked fine only
   because .nav-logo and .vault-pill each declare their own -- so the two
   loud elements were right and the container was not. That surfaced the
   moment .nav-add-btn was given `font-family: inherit`: it then correctly
   inherited an INCORRECT root and rendered its "+" in Inter instead of
   Arial, which is a fix that moves the defect rather than closing it. The
   root declaration is what actually closes it; the two child declarations
   are now redundant but harmless, and are left in place. */
.nav {
  background: #fff;
  border: none;
  border-bottom: 1px solid rgba(31, 24, 19, 0.06);
  border-radius: 0;
  backdrop-filter: none;
  box-shadow: none;
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  height: var(--shell-nav-h, 60px);
  padding: 0 clamp(24px, 4vw, 48px);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
}
/* Demo conversion pill (relay 15): centered in the nav, demo surfaces only */
.nav-scan-pill {
  display: none;
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  align-items: center; gap: 8px;
  background: var(--coral); color: #fff; border: none; border-radius: 999px;
  padding: 9px 22px; font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer;
  box-shadow: 0 4px 14px rgba(242,100,25,0.35); white-space: nowrap;
  transition: filter 0.15s;
}
.nav-scan-pill:hover { filter: brightness(1.08); }
.nav-scan-pill svg { width: 15px; height: 15px; }
body.vv-demo .nav-scan-pill { display: inline-flex; }
@media (max-width: 640px) {
  .nav-scan-pill { padding: 8px 14px; font-size: 13px; }
  .nav-scan-pill svg { display: none; }
}

.nav-logo { display: inline-flex; align-items: center; gap: 0; font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif; font-size: clamp(19px, 2.125vw, 31px); font-weight: 800; letter-spacing: -0.02em; text-transform: lowercase; color: var(--text); border: 0; background: none; padding: 0; cursor: pointer; }
.nav-logo .coral { color: var(--coral); }
.nav-controls { display: flex; gap: 12px; align-items: center; font-size: 13px; }

/* ----- 12-reports vault (Bucket A spec, 2026-05-12) ---------------------- */
/* "My reports (N) v" pill in the navbar + a dropdown "vault" panel grouped
   into three fixed bureau sections (Equifax / Experian / TransUnion). The
   visual vocabulary here (bone-cream panel, #F3EFE7 Bone-Field emphasis fill,
   coral active borders, the "VIEWING" status label) is the fragment the
   Bucket A spec established for the Zones B/C/D Bone overhaul to extend. */

/* VAULT VISUAL HIDE (2026-06-04). Vault pill + dropdown + navbar "+" removed
   from the UI. Upload via sidebar/bottom-nav. bootstrapVaultFromAccount and
   vv-reports cache stay alive (feed switchReport, addReportToHistory, Home
   coverage). Full dead-code strip tracked in BACKLOG-BUILD.
   Selectors are ID-scoped to the navbar-specific elements ONLY --
   bare class names risk over-matching other surfaces (sidebar, bottom nav). */
#vault, #nav-add-btn, #vault-backdrop { display: none !important; }

.vault { position: relative; }
.vault-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border: 1.5px solid rgba(30,42,53,0.18); border-radius: 999px; background: transparent; color: var(--text); font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif; font-size: 14px; font-weight: 500; line-height: 1; cursor: pointer; white-space: nowrap; transition: border-color 0.15s, background 0.15s; }
.vault-pill:hover { border-color: var(--coral); }
.vault-pill-count { color: var(--coral); font-weight: 700; }
.vault-pill-chevron { width: 12px; height: 12px; flex-shrink: 0; transition: transform 0.15s; }
.vault.open .vault-pill { background: #F3EFE7; border: 2px solid var(--coral); font-weight: 600; }
.vault.open .vault-pill-chevron { transform: rotate(180deg); }

/* FS-2: the panel's own chrome (cap caption, bureau section headings) had
   no family; only .vault-row below did. Currently unreachable -- the vault
   is hidden by `#vault, #nav-add-btn, #vault-backdrop { display: none
   !important }` per BACKLOG-BUGS "Hide report is unreachable in the UI" --
   so this is correctness for whenever it is unhidden, not a visible change
   today. */
.vault-panel { position: absolute; top: calc(100% + 12px); right: 0; width: 340px; background: var(--bone-0); border: 1.5px solid rgba(30,42,53,0.12); border-radius: 20px; box-shadow: 0 12px 32px rgba(30,42,53,0.10); padding: 8px; z-index: 200; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s; font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.vault.open .vault-panel { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s; }

.vault-cap { padding: 14px 14px 12px; margin-bottom: 4px; border-bottom: 0.5px solid rgba(30,42,53,0.10); font-size: 12px; font-weight: 500; color: rgba(30,42,53,0.65); }
.vault-cap strong { color: var(--text); font-weight: 700; }

.vault-section { padding: 8px 14px 6px; }
.vault-cap + .vault-section { padding-top: 12px; }
.vault-section-header { display: flex; justify-content: space-between; align-items: baseline; }
.vault-section-name { font-size: 16px; font-weight: 700; color: var(--text); }
.vault-section-status { font-size: 12px; font-weight: 500; color: rgba(30,42,53,0.55); }
.vault-section.empty .vault-section-status { color: rgba(30,42,53,0.45); }
.vault-divider { height: 0.5px; background: rgba(30,42,53,0.10); margin: 8px 14px; }

.vault-row { width: 100%; box-sizing: border-box; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; margin: 0 0 6px; border-radius: 14px; font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif; cursor: pointer; transition: background 0.12s; }
.vault-row-date { font-size: 14px; color: var(--text); }
.vault-row.inactive { background: transparent; border: 1px solid transparent; }
.vault-row.inactive .vault-row-date { font-weight: 500; }
.vault-row.inactive:hover { background: rgba(30,42,53,0.04); }
.vault-row.active { background: #F3EFE7; border: 1.5px solid var(--coral); cursor: default; }
.vault-row.active .vault-row-date { font-weight: 600; }
.vault-row-viewing { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--coral); }
.vault-row.add { background: transparent; border: 1.5px dashed rgba(242,100,25,0.55); justify-content: flex-start; color: var(--coral); font-size: 14px; font-weight: 600; }
.vault-row.add:hover { border-color: rgba(242,100,25,0.85); }
.vault-row-add-icon { font-size: 16px; font-weight: 700; line-height: 1; }

/* Session 6-impl-B-4 G2 (BACKLOG 23c): inactive-row hide affordance.
   The row-wrapper hosts the row + the "x" button as siblings so the
   button can intercept clicks without bubbling to the row's switch
   handler. Active rows render without a wrapper sibling for the "x". */
.vault-row-wrapper { display: flex; align-items: stretch; gap: 4px; margin: 0 0 6px; }
.vault-row-wrapper > .vault-row { flex: 1; margin: 0; }
.vault-row-hide-btn {
  width: 28px;
  flex: 0 0 28px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 14px;
  font-size: 18px;
  font-weight: 400;
  color: rgba(30,42,53,0.55);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  padding: 0;
  line-height: 1;
}
.vault-row-hide-btn:hover {
  background: rgba(214,88,76,0.08);
  color: var(--red);
  border-color: rgba(214,88,76,0.25);
}

/* Hide confirmation modal (BACKLOG 23c + 23d) — reuses .mode-modal +
   .mode-modal-card chrome; only the body content gets bespoke styles. */
/* FS-2: only .hide-modal-title carried the family; the body copy did not. */
.hide-modal-card { max-width: 440px; padding: 28px; font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.hide-modal-title {
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--text);
  margin: 0 0 12px;
  line-height: 1.2;
}
.hide-modal-body {
  font-size: 15px;
  color: var(--text);
  line-height: 1.5;
  margin: 0 0 24px;
}
.hide-modal-actions { display: flex; flex-direction: column; gap: 10px; }
.hide-modal-primary {
  background: var(--red);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 13px 24px;
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.12s;
}
.hide-modal-primary:hover { background: #c14d42; }
.hide-modal-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid rgba(30,42,53,0.18);
  border-radius: 999px;
  padding: 13px 24px;
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.12s;
}
.hide-modal-secondary:hover { background: rgba(30,42,53,0.04); }

/* Walk fix 3 (2026-08-08): leave-the-questions confirm. Own class family
   rather than reusing .hide-modal-*, because the two cards disagree about
   which button is destructive: hiding a report makes the destructive act the
   primary, and here the SAFE act is the primary (staying) while leaving is
   the ghost. Sharing the family would couple those two decisions together.
   The C9 precedent -- clone the shape values, keep the classes independent. */
.q-leave-card { max-width: 440px; padding: 28px; font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.q-leave-title {
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--text);
  margin: 0 0 12px;
  line-height: 1.2;
}
.q-leave-body {
  font-size: 15px;
  color: var(--text);
  line-height: 1.5;
  margin: 0 0 24px;
}
.q-leave-actions { display: flex; flex-direction: column; gap: 10px; }
.q-leave-primary {
  background: var(--coral);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 13px 24px;
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.12s;
}
.q-leave-primary:hover { background: #d9581a; }
.q-leave-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid rgba(30,42,53,0.18);
  border-radius: 999px;
  padding: 13px 24px;
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.12s;
}
.q-leave-secondary:hover { background: rgba(30,42,53,0.04); }

/* Vault scrim: fades the page underneath, catches click-outside. */
.vault-backdrop { position: fixed; inset: 0; z-index: 90; background: var(--backdrop-scrim); opacity: 0; visibility: hidden; transition: opacity 0.18s ease, visibility 0s linear 0.18s; }
.vault-backdrop.visible { opacity: 1; visibility: visible; transition: opacity 0.18s ease, visibility 0s; }

@media (prefers-reduced-motion: reduce) {
  .vault-panel, .vault.open .vault-panel, .vault-backdrop, .vault-backdrop.visible { transition: none; }
  .vault-pill-chevron { transition: none; }
}

/* FS-2: renders a "+" glyph, so it was visibly Arial. Buttons do not
   inherit the family; `font-family: inherit` is what carries it in. */
.nav-add-btn { width: 28px; height: 28px; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--coral); font-family: inherit; font-size: 18px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; padding: 0; line-height: 1; }
.nav-add-btn:hover { border-color: var(--red); background: var(--red-bg); }
/* O5 stub: at-cap (12/12) "+" disable. The full at-cap UX (caption change,
   delete-a-report affordance) is undesigned. See TODO(O5) in session.js. */
.nav-add-btn.disabled, .nav-add-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.nav-add-btn.disabled:hover, .nav-add-btn:disabled:hover { border-color: var(--line-strong); background: transparent; }
/* Phase 43.5: .tier-toggle / .tier-btn / .view-btn rules removed — those
   buttons collapsed into the dev-harness modal shortcut row. Their
   replacement styles live in dev-harness.css scoped under
   .dev-harness-shortcuts-row so they can never leak to production. */

/* SCREENS */
.screen { display: none; }
.screen.active { display: block; }
html.session-pending #screen-landing.active { display: none; }
/* Auth-pending: returning authenticated user, suppress landing and show
   Home holding state until Clerk resolves. #screen-home markup is empty
   (JS-populated), so the user sees a blank cream background -- neutral,
   no onboarding flash. Removed on all exit paths in JS. */
html.auth-pending #screen-landing.active { display: none; }
html.auth-pending #screen-home { display: block; }

/* SHARED: badges, contrast blocks, step numbers */
.badge { padding: 7px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; border: 1px solid transparent; }
.badge-red { background: var(--red-bg); color: var(--coral); border-color: rgba(214,88,76,0.18); }
.badge-orange { background: rgba(242,100,25,0.08); color: var(--coral); border-color: rgba(242,100,25,0.18); }
.badge-blue { background: var(--blue-bg); color: var(--blue); border-color: rgba(93,79,66,0.18); }
.badge-green { background: var(--green-bg); color: var(--green); border-color: rgba(179,144,79,0.18); }
.badge-yellow { background: rgba(234,179,8,0.10); color: var(--yellow); border-color: rgba(234,179,8,0.20); }
.badge-gray { background: var(--gray-bg); color: var(--gray-badge); border-color: rgba(93,79,66,0.18); }

.report-says { background: rgba(255,255,255,0.66); border: 1px solid rgba(31,24,19,0.08); border-radius: 14px; }
.report-says::before { content: 'Your report says:'; display: block; font-size: 13px; font-weight: 700; color: var(--text); text-transform: none; letter-spacing: normal; margin-bottom: 6px; }
.user-says { background: rgba(255,255,255,0.66); border: 1px solid rgba(31,24,19,0.08); border-radius: 14px; }
.user-says::before { content: 'But you told us:'; display: block; font-size: 13px; font-weight: 700; color: var(--text); text-transform: none; letter-spacing: normal; margin-bottom: 6px; }

.step-num { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex-shrink: 0; background: var(--ink-0); color: var(--bone-0); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); }
.step-num.locked { background: rgba(31,24,19,0.08); color: var(--text-secondary); }
.step-blurred { filter: blur(3px); opacity: 0.5; pointer-events: none; }

/* Phase 38 Task 1: Mode picker modal (shown on first additional upload) */
.mode-modal { position: fixed; inset: 0; background: var(--backdrop-scrim); display: none; align-items: center; justify-content: center; z-index: 500; padding: 24px; }
.mode-modal.visible { display: flex; }
/* FS-2 (2026-08-02): the SHARED modal card, so this one declaration
   reaches every modal built on it -- bureau mismatch, consumer mismatch,
   consumer mismatch (soft), unsupported template, and the bureau-confirm
   body. Only the h3 below carried the family, so every modal's BODY COPY
   and its buttons rendered in Inter under a Plus Jakarta Sans heading.
   `.mode-modal-cancel` already carries `font-family: inherit`, so it was
   faithfully inheriting the wrong root; it needs no change now that the
   root is right. Matches the sibling `.acr-modal-card` below, which has
   always declared the family. */
.mode-modal-card { background: var(--bone-0); border-radius: var(--radius); padding: 36px 36px 28px; max-width: 460px; width: 100%; box-shadow: var(--shadow-lg); border: 1px solid var(--border); font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.mode-modal-card h3 { font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif; font-weight: 700; font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -0.04em; line-height: 1.1; margin: 0 0 10px; color: var(--text); }
.mode-modal-card h3 span { color: var(--coral); }
.mode-modal-card > p { margin: 0 0 22px; color: var(--text-secondary); font-size: 14px; }
.mode-modal-option { display: block; width: 100%; text-align: left; background: rgba(255,255,255,0.6); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px 18px; margin-bottom: 12px; cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.1s; font-family: inherit; color: var(--text); }
.mode-modal-option:hover { border-color: var(--red); background: rgba(255,255,255,0.85); }
.mode-modal-option:active { transform: scale(0.99); }
.mode-modal-option-title { display: block; font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.mode-modal-option-sub { display: block; font-size: 13px; color: var(--text-secondary); line-height: 1.4; }
.mode-modal-cancel { display: block; width: 100%; margin-top: 6px; background: transparent; border: 0; color: var(--text-secondary); font-size: 13px; padding: 10px; cursor: pointer; font-family: inherit; }
.mode-modal-cancel:hover { color: var(--text); }

/* Session 8 ZA7.1: Landing-pill interstitial modal.
   Own namespace so no selectors couple to Phase 44's .mode-modal chrome.
   Visual language mirrors the mode picker (same backdrop, radius, bone card)
   without borrowing selectors. */
.acr-modal { position: fixed; inset: 0; background: var(--backdrop-scrim); display: none; align-items: center; justify-content: center; z-index: 500; padding: 24px; }
.acr-modal.visible { display: flex; }
/* FS-D5 (2026-08-03): smoothing normalized to match .home app-wide. */
.acr-modal-card { position: relative; background: var(--bone-0); border-radius: var(--radius); padding: 36px 36px 28px; max-width: 460px; width: 100%; box-shadow: var(--shadow-lg); border: 1px solid var(--border); font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.acr-modal-headline { font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif; font-weight: 700; font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -0.04em; line-height: 1.15; margin: 0 0 14px; color: var(--text); padding-right: 36px; }
.acr-modal-body { margin: 0 0 22px; color: var(--text); font-size: 14px; line-height: 1.55; }
.acr-modal-brand { font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif; font-weight: 700; letter-spacing: -0.02em; text-transform: lowercase; }
.acr-modal-brand > span { color: var(--coral); }
.acr-modal-close { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border: none; background: transparent; color: var(--text-secondary); font-size: 22px; line-height: 0; cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0; font-family: inherit; transition: background 0.15s, color 0.15s; appearance: none; -webkit-appearance: none; transform: translateY(1px); }
.acr-modal-close:hover { background: rgba(31,24,19,0.06); color: var(--text); }
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.acr-modal-close:focus-visible { outline: none; background: rgba(242,100,25,0.14); }
.acr-modal-button { display: block; width: 100%; margin-bottom: 10px; padding: 12px 18px; border-radius: 999px; font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; text-align: center; transition: background 0.15s, border-color 0.15s, filter 0.15s, transform 0.1s; appearance: none; -webkit-appearance: none; }
.acr-modal-button:active { transform: scale(0.99); }
.acr-modal-button:last-of-type { margin-bottom: 0; }
.acr-modal-primary { background: var(--ink-0); color: var(--bone-0); border: 1px solid var(--ink-0); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); }
.acr-modal-primary:hover { filter: brightness(1.1); }
.acr-modal-secondary { background: transparent; color: var(--text); border: 1px solid var(--line-strong); }
.acr-modal-secondary:hover { background: rgba(255,255,255,0.6); border-color: var(--coral); }

/* Utilities. Keep digit+noun count pairs on the same line. */
.nowrap { white-space: nowrap; }

/* Site footer — small links to legal pages. Shown on landing + results so
   Stripe review and consumers always see a ToS/Privacy entry point. */
/* FS-2 (2026-08-02): the Terms / Privacy footer is a SIBLING of .landing,
   not a child -- it sits directly under #screen-landing (index.html:1113).
   Adding the family to .landing therefore did not reach it, and the first
   post-fix measurement caught it still rendering in Inter. Declared on the
   footer itself so it stays correct wherever it is mounted. */
.site-footer {
  text-align: center;
  padding: 24px 16px 32px;
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 13px;
  color: var(--text);
  opacity: 0.55;
}
.site-footer a { color: inherit; text-decoration: none; margin: 0 10px; }
.site-footer a:hover { color: var(--coral); opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.site-footer .sep { opacity: 0.4; }