/* brand-cohesion.css, 2026-05-05
   Single tokenized override that quiets the auth + legal footer system so it
   matches the Instrument Serif editorial voice the rest of the page sets.
   Tommy 2026-05-05: "i dont like the link font in the footer ... all those
   pages dont feel like the website and look like shit". The two offenders are:
     1. .sv-meta-row  AES-256 ENCRYPTED, TLS 1.3, CAPISCANA, INC. (caps mono).
     2. .sv-footer / .shell-footer  PRIVACY TERMS DMCA CONTACT (caps mono).
   Both fight the editorial Instrument Serif headline above. Quiet them.

   Load order: AFTER vault-shell.css and session-shell.css. */

/* Brand-cohesion tokens. Mirrors landing-apex.html literals (canonical). */
:root {
  --brand-bg: #07070b;
  --brand-ink: #f5f4f0;
  --brand-ink-soft: rgba(255,255,255,0.62);
  --brand-ink-faint: rgba(255,255,255,0.42);
  --brand-ink-ghost: rgba(255,255,255,0.28);
  --brand-font-body: 'Geist', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --brand-font-editorial: 'Geist', -apple-system, system-ui, sans-serif;
}

/* Hide the AES-256 ENCRYPTED, TLS 1.3 meta-row sitewide for now. The line has
   two problems: (a) it's mono caps and visually clashes with the editorial
   headline above, and (b) "encrypted" copy is a Tommy-pending decision
   (server holds B2 keys today, so the prior framing overclaimed). Removing
   the noise is the safer move; if Tommy wants to bring a security line back,
   he can land on either softer truthful copy or true zero-knowledge first. */
.sv-meta-row { display: none !important; }

/* ── Auth-page footer (.sv-footer) ───────────────────────────────────────
   Was: 9px Geist Mono, .18em letter-spacing, color rgba(255,255,255,0.22).
   Now: 12.5px Geist 400, sentence case, .005em, soft white. Reads like a
   real footer of a real website, not a compliance bar. */
.sv-footer {
  font-family: var(--brand-font-body) !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: var(--brand-ink-faint) !important;
  text-transform: none !important;
  gap: 18px !important;
}
.sv-footer a {
  color: var(--brand-ink-faint) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 0.2s ease, border-color 0.2s ease !important;
}
.sv-footer a:hover {
  color: var(--brand-ink) !important;
  border-bottom-color: rgba(255,255,255,0.32);
}

/* Sentence-case the link labels via CSS (HTML stays as-is for screen readers
   that announce the link text directly). Since text-transform:none alone
   leaves the HTML "PRIVACY" rendered in caps, we capture it via attribute
   selector and override the visible glyphs through a span. Simpler: just
   downcase via text-transform:lowercase plus first-letter upper. But that
   loses proper-noun casing for "DMCA". Cleanest path: ship sentence-cased
   HTML directly. We do that in the per-page sweeps. This block stays as the
   visual baseline. */

/* Mobile auth-footer */
@media (max-width:560px) {
  .sv-footer {
    font-size: 12px !important;
    gap: 14px !important;
  }
}

/* ── Legal/onboarding footer (.shell-footer) ─────────────────────────────
   Was: 10px caps with .08em letter-spacing, color var(--text-disabled)=#444.
   Now: matches the auth footer above so the whole signed-out shell reads as
   one piece. */
.shell-footer {
  margin-top: 48px !important;
  padding-top: 32px !important;
  gap: 18px !important;
}
.shell-footer a {
  font-family: var(--brand-font-body) !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: var(--brand-ink-faint) !important;
  text-transform: none !important;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 0.2s ease, border-color 0.2s ease !important;
}
.shell-footer a:hover {
  color: var(--brand-ink) !important;
  border-bottom-color: rgba(255,255,255,0.32);
}
@media (max-width:560px) {
  .shell-footer {
    gap: 14px !important;
  }
  .shell-footer a {
    font-size: 12px !important;
  }
}

/* ── Welcome / account-privacy bg + accent quieting ─────────────────────
   session-shell.css uses --bg:#000 + --accent:#FA3A05 (vivid orange). Apex
   uses #07070b backdrop with no orange anywhere. Soften the bg to match
   apex's subtle warmth, and soften the orange accents so onboarding reads
   quieter and aligns with the rest of the system. We override the tokens
   that session-shell.css already wires through .welcome-hero, .step-icon,
   etc., so most of the cascade just works. */
:root {
  /* Override session-shell.css tokens. Cascade order requires brand-cohesion
     to load AFTER session-shell.css in the <head>. */
  --bg: #07070b;
  --accent: rgba(255,255,255,0.45);
}
html, body {
  background: var(--brand-bg) !important;
}
.welcome-eyebrow {
  color: var(--brand-ink-faint) !important;
  font-family: var(--brand-font-body) !important;
}
.welcome-title {
  font-family: var(--brand-font-editorial) !important;
  font-style: italic;
  font-weight: 400 !important;
  letter-spacing: -0.012em !important;
}
.welcome-sub {
  color: var(--brand-ink-soft) !important;
  font-family: var(--brand-font-body) !important;
}

/* Welcome step icons + progress dots: drop the orange tint to align with apex.
   Use champagne/warm-neutral accents so the welcome doesn't read as a
   different product than the auth shell. */
.welcome-progress .dot.is-active {
  background: rgba(255,255,255,0.55) !important;
}
.step-icon {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.10) !important;
  color: var(--brand-ink) !important;
}
.step-status .pulse {
  background: rgba(255,255,255,0.55) !important;
  box-shadow: 0 0 0 0 rgba(255,255,255,0.10) !important;
}
.toggle input:checked ~ .toggle-track {
  background: rgba(255,255,255,0.45) !important;
}

/* Welcome hero gradient: drop the orange wash that reads as a different
   product. Replace with the cool/warm dual drift used on apex (subtle). */
.welcome-hero {
  background:
    radial-gradient(1200px 200px at 50% -20%, rgba(70,100,160,0.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* Legal pages: keep the editorial silhouette (Instrument Serif on h1) and
   drop the harsh #000 to match apex. Body/font stack already inherits Geist
   via session-shell.css after our above body bg override. */
.legal-h1 {
  font-family: var(--brand-font-editorial) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  letter-spacing: -0.012em !important;
}

/* Onboarding shell-h1 (welcome / account-privacy header) editorial too. */
.shell-h1 {
  font-family: var(--brand-font-editorial) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  letter-spacing: -0.012em !important;
}