/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║                                                                          ║
   ║   SafePay — MODERN FINTECH LUXE   ·   global design layer   ·   2026     ║
   ║                                                                          ║
   ║   Loaded LAST on every page (right before </head>) so it wins the        ║
   ║   cascade over site.css (AURORA), site-bank.css, and per-page <style>.   ║
   ║                                                                          ║
   ║   Language: clean white canvas · deep sapphire-navy premium surfaces     ║
   ║   · champagne metallic gold · soft layered shadows · glass · big type.    ║
   ║   Reference feel: Revolut Metal / N26 Black / Stripe — a private bank    ║
   ║   that happens to be a digital trustee (נאמן דיגיטלי).                    ║
   ║                                                                          ║
   ║   Additive + token-remap only. Never edits markup. Every existing        ║
   ║   component inherits the new skin through the token cascade; the few     ║
   ║   hard-coded neo-1b navy values are re-skinned by explicit overrides.    ║
   ║                                                                          ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

:root {
  /* ══════════════════════════════════════════════════════════════════════════
     SafePay — SPIKE-LIGHT · clean white productivity-fintech palette
     (R340 Spike-Light → R361 blue accent; superseded the legacy R325 dark theme)
     Base: #FFFFFF  ·  Surfaces: #F8F8F8 / #F6EFDF  ·  Borders: #ECECF2
     Text: #0B0B0F / #595964  ·  Accent: #A98841 (single confident blue)
     Status (flat): pending #E8862A · success #2BB596 · info #72B5F8 · error #F0476A
     Geometry: 12px fields · 16px cards · soft float shadow as primary depth signal
  ══════════════════════════════════════════════════════════════════════════ */
  color-scheme: light;

  /* ══════════════════════════════════════════════════════════════════════════
     SafePay — SPIKE LIGHT (R340) · scraped live from spikenow.com getComputedStyle
     Canvas #FFFFFF · surfaces white floating on 0 0 12px rgba(0,0,0,.09)
     Accent #A98841 (hsl 259 100% 65%) · grad #A98841→#7A5C14
     Text #000/#818181 · Poppins · radius 16/20/30 · tints #F6EFDF / #EBF5FF
  ══════════════════════════════════════════════════════════════════════════ */

  /* ── Surface ramp: canvas → tints (Spike differentiates by SHADOW not color) ── */
  --lux-ink:    #FFFFFF;   /* page background (white canvas) */
  --lux-ink-2:  #FFFFFF;   /* standard card / panel surface */
  --lux-ink-3:  #F8F8F8;   /* elevated / subtle tint */
  --lux-ink-4:  #ECECF2;   /* hairline border */

  /* ── Canvas ───────────────────────────────────────────────────────────── */
  --lux-bg:      #FFFFFF;
  --lux-bg-deep: #F4F2FB;  /* soft mesh base */
  --lux-surface: #FFFFFF;
  --lux-tint:    #F6EFDF;  /* Spike purple tint */
  --lux-sunk:    #F8F8F8;

  /* ── Text on light (Spike #000 / #818181) ─────────────────────────────── */
  --lux-text:   #0B0B0F;   /* primary — near black */
  --lux-text-2: #595964;   /* secondary — WCAG AA on white (R352, was #818181 ~3.5:1) */
  --lux-text-3: #6B6B75;   /* muted — WCAG AA on white (R352, was #9A9AA2 ~2.9:1) */
  --lux-text-4: #C4C4CC;   /* disabled / non-text only */

  /* ── Premium blue — replaces the Spike purple as the single accent ───── */
  --lux-gold-50:  #F6EFDF;
  --lux-gold-100: #D4E5F4;
  --lux-gold-200: #EADFC5;
  --lux-gold-300: #D8C290;
  --lux-gold:     #A98841;   /* brand blue (was Spike purple #854DFF) */
  --lux-gold-600: #7A5C14;
  --lux-gold-700: #5E4715;   /* text-safe blue on white */
  --lux-gold-grad: linear-gradient(180deg, #A98841 0%, #4A3613 100%);
  --lux-gold-sheen: linear-gradient(120deg, transparent 28%, rgba(255,255,255,0.55) 48%, transparent 68%);

  /* ── Status — Spike secondary palette (blue/teal) + readable semantics ── */
  --lux-ok:        #2BB596;   /* Spike teal #71CCB0, darkened for AA on white */
  --lux-ok-soft:   rgba(113,204,176,0.16);
  --lux-info:        #72B5F8;   /* Spike blue */
  --lux-info-soft:   rgba(114,181,248,0.16);
  --lux-warn:        #E8862A;   /* pending */
  --lux-warn-soft:   rgba(232,134,42,0.14);
  --lux-red:        #F0476A;   /* error */
  --lux-red-soft:   rgba(240,71,106,0.12);

  /* ── Hairlines — light dividers on white ─────────────────────────────── */
  --lux-line:   #ECECF2;
  --lux-line-2: #E2E0EC;
  --lux-line-3: #D6D3E2;

  /* ── Shadows — Spike's signature soft floats (THIS is the "glass") ───── */
  --lux-sh-1: 0 0 12px rgba(0,0,0,0.09);                /* exact Spike card float */
  --lux-sh-2: 0 8px 24px rgba(17,12,46,0.10);
  --lux-sh-3: 0 0 35px rgba(0,0,0,0.18);                /* deeper float */
  --lux-sh-gold: 0 11px 17px -12px rgba(0,82,149,0.65); /* exact Spike purple glow */
  --lux-sh-ink:  0 12px 40px rgba(17,12,46,0.16);

  /* ── Geometry — Spike rounded ────────────────────────────────────────── */
  --lux-r:    16px;   /* cards (Spike dominant) */
  --lux-r-lg: 20px;   /* badges */
  --lux-r-xl: 30px;   /* large panels / pills */

  /* ════ Remap legacy + AURORA tokens onto new dark system ════ */
  --surface-bg:   var(--lux-bg);
  --surface-card: var(--lux-surface);
  --surface-sunk: var(--lux-sunk);
  --surface-tint: var(--lux-tint);

  --border-soft:    var(--lux-line);
  --border-default: var(--lux-line-2);
  --border-strong:  var(--lux-line-3);

  --ink-900: var(--lux-text);
  --ink-800: #2A2A30;
  --ink-700: #3A3A42;
  --ink-600: var(--lux-text-2);
  --ink-500: var(--lux-text-2);
  --ink-400: var(--lux-text-3);
  --ink-300: var(--lux-text-4);
  --ink-200: var(--lux-line-2);
  --ink-100: var(--lux-tint);
  --ink-050: var(--lux-sunk);

  --copper-700: var(--lux-gold-700);
  --copper-600: var(--lux-gold-600);
  --copper-500: var(--lux-gold);
  --copper-400: var(--lux-gold-300);
  --copper-300: var(--lux-gold-200);
  --copper-200: var(--lux-gold-100);
  --copper-100: var(--lux-gold-50);
  --copper-050: #EFF4FB;

  --success-700: #1FA588;
  --success-500: var(--lux-ok);
  --success-100: var(--lux-ok-soft);

  --warning-700: var(--lux-gold);
  --warning-500: var(--lux-warn);
  --warning-100: var(--lux-warn-soft);

  --danger-700: #E03A5E;
  --danger-500: var(--lux-red);
  --danger-100: var(--lux-red-soft);

  /* AURORA-specific aliases (homepage widgets use slate/aurora vars) */
  --slate-900: var(--lux-text);
  --slate-800: #2A2A30;
  --slate-700: #3A3A42;
  --slate-600: #595964;
  --slate-500: var(--lux-text-2);
  --slate-400: var(--lux-text-3);
  --slate-300: var(--lux-line-3);
  --slate-200: var(--lux-line-2);
  --slate-100: var(--lux-tint);
  --slate-50:  var(--lux-sunk);
  --aurora-bg:      var(--lux-bg);
  --aurora-bg-deep: var(--lux-bg-deep);
  --aurora-surface: var(--lux-surface);
  --aurora-elev:    var(--lux-surface);
  --aurora-border:  var(--lux-line);
  --aurora-border-strong: var(--lux-line-3);
}

/* ── Canvas ──────────────────────────────────────────────────────────── */
html, body {
  background: var(--lux-bg) !important;
}
body {
  color: var(--lux-text);
  letter-spacing: -0.006em;
}
/* Neutralize the old AURORA / Vault breathing mesh fixed overlays — Luxe
   is a calm, clean canvas, not an animated one. */
body::before, body::after { background: none !important; animation: none !important; }

/* ── Typography — bigger, tighter, more confident ────────────────────── */
h1, h2, h3 { color: var(--lux-text); letter-spacing: -0.028em; font-weight: 700; }
h1 { letter-spacing: -0.034em; }
.hero h1, .hero--v2 h1 { font-size: clamp(34px, 5.2vw, 60px); line-height: 1.04; font-weight: 800; }

/* The thin numeric / money figures get the champagne treatment where gold */
.gold, [data-vault-reveal], .hero .gold {
  background: var(--lux-gold-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ══════════════════════ HEADER · TOPBAR ══════════════════════ */
/* R255 — refined into a bank "trust band": navy with a champagne hairline,
   a gold security cue divided from the preview notice. */
.topbar {
  background: linear-gradient(180deg, var(--lux-ink-2) 0%, var(--lux-ink) 100%);
  color: rgba(255,255,255,0.62);
  border-bottom: 1px solid rgba(0,82,149,0.28);
}
.topbar a { color: rgba(255,255,255,0.8); }
.topbar a:hover { color: #fff; }
.topbar .topbar-row { height: 38px; }
.topbar .tb-secure {
  display: inline-flex; align-items: center; gap: 7px;
  color: #fff; font-weight: 600; letter-spacing: .01em;
  padding-inline-end: 14px; margin-inline-end: 14px;
  border-inline-end: 1px solid rgba(255,255,255,0.18);
}
.topbar .tb-lock { font-size: 12.5px; line-height: 1; filter: saturate(1.15) drop-shadow(0 1px 2px rgba(0,82,149,0.5)); }
.topbar .left { gap: 0; }
.topbar .left > span:not(.tb-secure) { color: rgba(255,255,255,0.66); }
/* A prior "simplify the header" pass (site.css) hid the whole strip with
   `.topbar{display:none!important}` to avoid two announcements. Bring it back
   as a pure TRUST band (security cue) — banks DO show a security strip; what
   they avoid is a second *announcement*, which we prevent below. luxe loads
   after site.css so this same-specificity !important wins by source order. */
/* R424 - founder asked to remove the top strip entirely (the thin bar with the
   "בפיתוח · גרסת תצוגה מקדימה" preview notice + security cue) so the transparent
   header sits flush at the very top. The homepage still surfaces the preview
   status in its hero note, so no honest "we're in beta" disclaimer is lost. */
.topbar { display: none !important; }
/* Homepage already surfaces the preview status in its hero note — don't
   duplicate it in the band; keep the homepage band to the security cue only. */
body[data-screen-label="Homepage"] .topbar .left > span:not(.tb-secure) { display: none !important; }
@media (max-width: 640px) {
  .topbar .tb-secure { padding-inline-end: 10px; margin-inline-end: 10px; }
  .topbar .left > span:not(.tb-secure) { display: none; }  /* keep only the security cue on small screens */
}

/* ════════════════ R258 · CARD + EYEBROW REFINEMENT ════════════════
   Extends the header's champagne-hairline language into the page body. */
/* Editorial gold tick before section eyebrows. inline-flex keeps the label
   centered or start-aligned exactly as before; only a small gold dash is added
   on the leading (RTL: right) side. */
/* Display-agnostic (works whether the eyebrow is inline-block, block, or
   inline-flex on a given page) — a gold tick before the label via an inline
   ::before with margin, so no display change and zero centering risk. */
.eyebrow::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 20px; height: 2px; border-radius: 2px; margin-inline-end: 9px;
  background: var(--lux-gold-grad);
  position: relative; top: -2px;
}

/* Premium hover-lift on marketing cards (excludes the KYC page's .step, which
   is a transparent spacing wrapper, not a card). */
.trust-tile,
body:not([data-screen-label="KycManual"]) .step {
  transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease, border-color .22s ease;
}
.trust-tile:hover,
body:not([data-screen-label="KycManual"]) .step:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 38px -14px rgba(26,35,66,0.24);
  border-color: rgba(0,82,149,0.45);
}

/* R340 — Spike white frosted header: white glass, light hairline, soft float. */
.site-header {
  background: rgba(255,255,255,0.85) !important;
  backdrop-filter: saturate(140%) blur(20px);
  -webkit-backdrop-filter: saturate(140%) blur(20px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 0 12px rgba(0,0,0,0.05);
}
.site-header .brand { font-weight: 800; letter-spacing: -0.02em; color: #0B0B0F; }
.site-header .nav-links > a,
.site-header .nav-links .nav-has-menu > a {
  color: rgba(0,0,0,0.64) !important;
  -webkit-text-fill-color: rgba(0,0,0,0.64) !important;
  font-weight: 500;
}
.site-header .nav-links > a:hover,
.site-header .nav-links .nav-has-menu > a:hover {
  color: #7A5C14 !important;
  -webkit-text-fill-color: #7A5C14 !important;
}
/* Dark theme variants — folded into the light Spike header */
html[data-theme="dark"] .site-header {
  background: rgba(255,255,255,0.85) !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 0 12px rgba(0,0,0,0.05) !important;
}
html[data-theme="dark"] .site-header .brand {
  color: #0B0B0F !important; -webkit-text-fill-color: #0B0B0F !important;
}
html[data-theme="dark"] .site-header .nav-links > a,
html[data-theme="dark"] .site-header .nav-links .nav-has-menu > a {
  color: rgba(0,0,0,0.64) !important;
  -webkit-text-fill-color: rgba(0,0,0,0.64) !important;
}
html[data-theme="dark"] .site-header .nav-links > a:hover,
html[data-theme="dark"] .site-header .nav-links .nav-has-menu > a:hover {
  color: #7A5C14 !important; -webkit-text-fill-color: #7A5C14 !important;
}

/* ══════════════════════ BUTTONS ══════════════════════ */
.btn { border-radius: 16px; font-weight: 600; letter-spacing: 0.005em; }

/* Primary → champagne metallic (the signature CTA across the product).
   Founder direction (2026-06-02): the primary action is gold everywhere,
   not a charcoal slab. Charcoal is reserved for the header's bespoke
   treatment (override below) and ghost-dark secondaries. */
.btn--primary {
  background: var(--lux-gold-grad) !important;   /* Spike purple gradient */
  color: #FFFFFF !important;
  border: 0 !important;
  font-weight: 600;
  box-shadow: var(--lux-sh-gold) !important;      /* purple glow */
}
.btn--primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 14px 26px -10px rgba(0,82,149,0.7) !important;
}

/* Accent → Spike purple */
.btn--accent {
  background: var(--lux-gold-grad) !important;
  color: #FFFFFF !important;
  border: 0 !important;
  font-weight: 600;
  box-shadow: var(--lux-sh-gold) !important;
}
.btn--accent:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 14px 26px -10px rgba(0,82,149,0.7) !important;
}

/* Auth modal submit ("כניסה" / "פתיחת חשבון") → champagne gold, matching
   the product-wide primary CTA. site.css renders it as a charcoal slab via
   `body [data-auth-modal] .am-submit`; mirror that specificity here so the
   later-loaded Luxe rule wins. */
body [data-auth-modal] .am-submit {
  background: var(--lux-gold-grad) !important;
  color: #2a2207 !important;
  box-shadow: var(--lux-sh-gold), inset 0 1px 0 rgba(255,255,255,0.45) !important;
}
body [data-auth-modal] .am-submit:hover:not(:disabled) {
  background: var(--lux-gold-grad) !important;
  box-shadow: 0 10px 28px rgba(0,82,149,0.38), inset 0 1px 0 rgba(255,255,255,0.5) !important;
}

/* Ghost variants → hairline on light, frosted on dark */
.btn--ghost {
  background: var(--lux-surface) !important;
  border: 1.5px solid var(--lux-line-2) !important;
  color: var(--lux-text) !important;
}
.btn--ghost:hover { border-color: var(--lux-line-3) !important; background: var(--lux-tint) !important; }
.btn--ghost-dark {
  background: rgba(255,255,255,0.06) !important;
  border: 1.5px solid rgba(255,255,255,0.22) !important;
  color: #fff !important;
  backdrop-filter: blur(6px);
}
.btn--ghost-dark:hover { background: rgba(255,255,255,0.12) !important; }

/* Override the bespoke deep-selector navy on the header signup button
   (body .site-header .nav-actions .btn--primary[data-auth="signup"]) so it
   matches the Luxe charcoal slab instead of legacy navy. */
body .site-header .nav-actions .btn--primary[data-auth="signup"],
body .site-header .nav-actions .btn--accent[data-auth="signup"] {
  background: var(--lux-gold-grad) !important;   /* R352: was near-white gradient → invisible CTA; restore Spike purple */
  color: #fff !important;
  border: 0 !important;
}

/* Sweep sheen on premium buttons */
.btn--primary::after, .btn--accent::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%); opacity: 0;
  transition: opacity 360ms ease; pointer-events: none;
}
.btn--primary:hover::after, .btn--accent:hover::after { opacity: 1; }

/* ══════════════════════ HERO ══════════════════════
   Charcoal "slab" feel: the hero sits on the clean canvas with a deep
   near-black gradient and a champagne glow — a metal card on marble. */
.hero, .hero--v2 {
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(0,82,149,0.16), transparent 55%),
    radial-gradient(90% 80% at 8% 120%, rgba(255,255,255,0.05), transparent 60%),
    linear-gradient(155deg, var(--lux-ink-3) 0%, var(--lux-ink) 70%) !important;
  color: #fff;
  position: relative;
}
/* AURORA forces `.hero h1 { -webkit-text-fill-color: var(--slate-900) }` for a
   LIGHT hero; on our dark slab that paints the headline near-black → invisible
   ghost. -webkit-text-fill-color overrides `color` in Blink/WebKit, so we MUST
   reset it here too, not just `color`. */
.hero h1, .hero--v2 h1 {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
/* Keep the emphasis span champagne. Specificity 0,2,1 matches AURORA's
   `.hero h1 .gold` exactly; luxe loads later, so it wins. */
.hero h1 .gold, .hero--v2 h1 .gold,
.hero h1 [data-vault-reveal], .hero--v2 h1 [data-vault-reveal] {
  background: var(--lux-gold-grad) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
}
.hero .hero-sub, .hero--v2 .hero-sub { color: rgba(255,255,255,0.74) !important; }
.hero .note--dark, .note--dark {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.88);
}
.hero-kicker { color: rgba(255,255,255,0.7); }
.hero-kicker .badge {
  background: var(--lux-gold-grad); color: #2a2207; font-weight: 700;
  border: 0;
}
/* AURORA forced `.hero .hero-trust span { color: slate-700 }` assuming a light
   hero; luxe's hero is a dark slab → those trust chips go invisible. Repaint
   them light (matching specificity 0,2,1, luxe loads later → wins). */
.hero .hero-trust, .hero--v2 .hero-trust { color: rgba(255,255,255,0.72) !important; }
.hero .hero-trust span, .hero--v2 .hero-trust span {
  color: rgba(255,255,255,0.82) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.82) !important;
}
.hero .hero-trust [style*="color:#fff"], .hero .hero-trust [style*="color: #fff"],
.hero--v2 .hero-trust [style*="color:#fff"], .hero--v2 .hero-trust [style*="color: #fff"] {
  color: #fff !important; -webkit-text-fill-color: #fff !important;
}

/* ── Navy "hero-card" (rechev / nadlan / freelance pricing-breakdown) ──────
   This card is a dark navy surface by design. Legacy CSS leaks a dark
   inherited `-webkit-text-fill-color` onto its values, flattening the
   inline white / green / gold colors to near-black → invisible on navy.
   Fix: make every descendant's text-fill follow ITS OWN `color`
   (currentColor). The card's children carry inline colors (white values,
   green ₪0, gold eyebrow, 0.65-white labels), so this preserves every
   accent while killing the inherited dark fill. */
.hero-card { color: rgba(255,255,255,0.92) !important; }
.hero-card,
.hero-card * { -webkit-text-fill-color: currentColor !important; }
/* site.css forces `.stat-num, [data-num] { color: var(--slate-900) !important }`,
   flattening every value in this navy card to dark. Re-light them with a
   higher-specificity selector; the success-green ₪0 keeps its accent. */
.hero-card [data-num] { color: rgba(255,255,255,0.92) !important; }
.hero-card [data-num][style*="success"] { color: var(--lux-ok) !important; }

/* ── R325: Deal stack — dark elevated "trade ticket" cards ───────────────
   Bloomberg aesthetic: dark elevated panels with light type, no white cards.
   The cards float on pitch-black hero with hairline borders for depth. */
.deal-card {
  background: #FFFFFF !important;
  border: 1px solid var(--lux-line) !important;
  box-shadow: var(--lux-sh-1) !important;
}
.deal-card.dc-front {
  background: #FFFFFF !important;
  border: 1px solid rgba(0,82,149,0.22) !important;
}
.deal-card .dc-amt { color: var(--lux-text); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.deal-card .dc-eyebrow { color: var(--lux-gold-700); }
.deal-card .dc-tl .ok   { background: var(--lux-ok) !important; }
.deal-card .dc-tl .live { background: var(--lux-gold) !important; }

/* Deal stack depth: back-most darkest, front elevated with gold hairline */
.deal-stack .deal-card {
  background: #FFFFFF !important;
  border: 1px solid var(--lux-line) !important;
  box-shadow: var(--lux-sh-1) !important;
  opacity: 1 !important;
}
.deal-stack .deal-card.dc-back  { background: #F6EFDF !important; }
.deal-stack .deal-card.dc-back2 { background: #EBF5FF !important; }
.deal-stack .deal-card.dc-front {
  background: #FFFFFF !important;
  border: 1px solid rgba(0,82,149,0.28) !important;
  box-shadow: 0 0 35px rgba(0,0,0,0.10) !important;
}
/* All text tokens now resolve to light automatically (--lux-text = #F9FAFB).
   Explicit overrides kept for specificity against AURORA selectors. */
.deal-stack .deal-card .dc-title { color: var(--lux-text) !important; -webkit-text-fill-color: var(--lux-text) !important; }
.deal-stack .deal-card .dc-sub,
.deal-stack .deal-card .dc-amt-label { color: var(--lux-text-2) !important; -webkit-text-fill-color: var(--lux-text-2) !important; }
.deal-stack .deal-card .dc-amt { color: var(--lux-text) !important; -webkit-text-fill-color: var(--lux-text) !important; font-variant-numeric: tabular-nums; }
.deal-stack .deal-card .dc-meta-row,
.deal-stack .deal-card .dc-meta-row > span { color: var(--lux-text-2) !important; -webkit-text-fill-color: var(--lux-text-2) !important; }
.deal-stack .deal-card .dc-eyebrow { color: var(--lux-gold-700) !important; -webkit-text-fill-color: var(--lux-gold-700) !important; }
/* Timeline pips — light track on dark card */
.deal-stack .deal-card .dc-tl > div { background: rgba(0,0,0,0.10) !important; }
.deal-stack .deal-card .dc-tl > div.ok   { background: var(--lux-ok) !important; }
.deal-stack .deal-card .dc-tl > div.live { background: var(--lux-gold) !important; }

/* ══════════════════════ SECTIONS · CARDS ══════════════════════ */
/* A global `section.section { background: transparent !important }` reset
   (specificity 0,1,1) outranks AURORA's `.section--dark { gradient !important }`
   (0,1,0), so dark bands render transparent and their white stat text vanishes
   on the light canvas. Restore a Luxe charcoal band at higher specificity. */
.section.section--dark {
  background: var(--ink-900) !important;   /* R352: gradient resolved to white → white-on-white band; restore dark */
  color: #fff !important;
}
.section.section--dark h1, .section.section--dark h2,
.section.section--dark h3, .section.section--dark h4 { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.section.section--dark .stat-cell .v { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.section.section--dark .stat-cell .l { color: rgba(255,255,255,0.82) !important; -webkit-text-fill-color: rgba(255,255,255,0.82) !important; }
.section.section--dark .stat-cell .sub { color: rgba(255,255,255,0.58) !important; -webkit-text-fill-color: rgba(255,255,255,0.58) !important; }
.section.section--dark .stat-cell { border-color: rgba(255,255,255,0.12) !important; }

/* CTA banner is a dark ink (or copper) surface. luxe's global
   `h1,h2,h3 { color: var(--lux-text) }` (line 150) overrides the white the
   banner sets on its container, leaving the heading dark-on-dark. Repaint. */
.cta-banner, .cta-banner h1, .cta-banner h2,
.cta-banner h3, .cta-banner h4 { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.cta-banner p { color: rgba(255,255,255,0.78) !important; -webkit-text-fill-color: rgba(255,255,255,0.78) !important; }

/* Pricing calculator result panel is navy ink; `[data-num]` flattens its
   amount + fee to dark. Restore white amount and gold fee. */
.calc-result .big, .calc-result [data-calc-amt] { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.calc-result .row .v, .calc-result [data-calc-fee] { color: var(--copper-300, #EADFC5) !important; -webkit-text-fill-color: var(--copper-300, #EADFC5) !important; }

/* A legacy Aurora rule force-whitens every `.card` with
   `background: var(--aurora-surface) !important`, overriding the inline dark
   background on cards that intentionally opt into an ink surface (e.g. the
   "מה קורה עכשיו" panel on /contact). That left white text on white.
   Restore the dark ink + light text for any card that asked for it inline. */
.card[style*="ink-900"], .card[style*="ink-800"] {
  background: var(--ink-900) !important;   /* R352: --lux-ink is now white → invisible dark card; restore dark ink */
  color: #fff !important; -webkit-text-fill-color: #fff !important;
}
.card[style*="ink-900"] *, .card[style*="ink-800"] * { -webkit-text-fill-color: currentColor !important; }
.card[style*="ink-900"] .eyebrow--light,
.card[style*="ink-800"] .eyebrow--light { color: #fff !important; }

.section-head h2 { letter-spacing: -0.03em; }
.elev-2 { box-shadow: var(--lux-sh-2); border-color: var(--lux-line); border-radius: var(--lux-r); }
.elev-3 { box-shadow: var(--lux-sh-3); border-color: var(--lux-line); border-radius: var(--lux-r); }

/* Trust / aurora badges → champagne pill */
.aurora-trust-badge, .badge--trust {
  background: var(--lux-gold-50) !important;
  color: var(--lux-gold-700) !important;
  border: 1px solid var(--lux-gold-100) !important;
}

/* ══════════════════════ FOOTER ══════════════════════ */
.site-footer {
  background: var(--ink-900) !important;   /* R352: --lux-ink is now white → white-on-white footer; restore dark footer */
  color: rgba(255,255,255,0.66) !important;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.site-footer a { color: rgba(255,255,255,0.78) !important; }
.site-footer a:hover { color: #fff !important; }
.site-footer .brand, .site-footer strong { color: #fff !important; }
.footer-bottom { color: rgba(255,255,255,0.5) !important; }

/* ══════════════════════ APP SHELL (mobile) ══════════════════════ */
@media (max-width: 720px) {
  body[data-app="1"] .app-topbar {
    background: rgba(255,255,255,0.86);
    border-bottom: 1px solid var(--lux-line);
  }
  body[data-app="1"] .app-topbar__title { color: var(--lux-text); font-weight: 800; }
  body[data-app="1"] .app-tabbar {
    background: rgba(255,255,255,0.94);
    border-top: 1px solid var(--lux-line);
    box-shadow: 0 -4px 20px rgba(16,17,20,0.06);
  }
  body[data-app="1"] .app-tabbar__item.is-active { color: var(--lux-gold-700); }
  body[data-app="1"] .app-tabbar__item.is-active::before {
    background: linear-gradient(135deg, rgba(0,82,149,0.16), rgba(0,82,149,0.06));
    border: 1px solid rgba(0,82,149,0.22);
  }
  body[data-app="1"] .app-tabbar__item--cta .ico-wrap {
    background: var(--lux-gold-grad);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.4) inset,
      0 -1px 0 rgba(0,0,0,0.14) inset,
      var(--lux-sh-gold);
  }
  body[data-app="1"] .app-tabbar__item--cta span { color: var(--lux-gold-700); }
}

/* ══════════════════════ neo-1b APP PAGES — navy → charcoal ══════════════════════
   The dashboard / deal / my-deals / notifications pages hard-code a navy
   palette (#0f1736, #1d2a58, #3a4a82). Re-skin those to the Luxe charcoal +
   champagne so the in-app experience matches the marketing site. These win
   because luxe.css loads after the per-page <style> blocks. */

/* R368→R573: Dashboard + deal + profile hero slabs — Private Trust INK
   masthead. (The R368 revision repainted these LIGHT to escape a white-on-white
   bug under the Spike-Light remap. R573 restores a proper dark masthead — the
   fiduciary "statement header" — with on-ink text + a brass certificate
   hairline, matching the per-page <style> blocks. luxe.css loads last so these
   win the cascade; the per-page styles are kept in sync for clarity.) */
.np-hero, .deal-head, .prof-head {
  background: linear-gradient(155deg, var(--lux-ink-2) 0%, var(--lux-ink-3) 78%) !important;
  color: var(--text-on-ink) !important;
  border: 1px solid var(--lux-ink-4) !important;
  box-shadow: var(--lux-sh-ink) !important;
}
/* corner brand glow → warm brass haze (never blue) */
.deal-head::before { background: linear-gradient(90deg, transparent, rgba(194,163,94,0.55), transparent) !important; }
.deal-head::after  { background: var(--lux-gold-300) !important; }
.prof-head::after  { background: radial-gradient(circle, rgba(194,163,94,0.12), transparent 70%) !important; }
/* deal hero children → warm-paper text + brass amount on the ink masthead */
.deal-head h1      { color: var(--text-on-ink) !important; }
.deal-head .meta   { color: var(--text-on-ink-muted) !important; }
.deal-head .amt .n { color: var(--lux-gold-300) !important; -webkit-text-fill-color: var(--lux-gold-300) !important; }
.deal-head .amt .c { color: var(--text-on-ink-muted) !important; }
/* profile hero children → warm-paper text; avatar = brass-on-ink seal */
.prof-head h1   { color: var(--text-on-ink) !important; }
.prof-head .sub { color: var(--text-on-ink-muted) !important; }
.prof-avatar    { background: rgba(244,241,234,0.08) !important; color: var(--lux-gold-300) !important; border-color: rgba(194,163,94,0.40) !important; }

/* my-deals + notifications tabs (navy active → charcoal) */
.md-tab.is-active {
  background: var(--lux-ink) !important;
  border-color: var(--lux-ink) !important;
  color: #fff !important;
}
.md-tab:hover { border-color: var(--lux-ink-4) !important; }

/* a11y: keyboard focus rings (gold) for shared interactive elements that
   relied on the UA default ring (often suppressed on click-focus / low
   contrast against the Clean White surfaces). Additive; only shows for
   keyboard navigation via :focus-visible. */
.md-tab:focus-visible,
.notif-item:focus-visible {
  outline: 2px solid #A98841 !important;
  outline-offset: 2px !important;
}

/* my-deals "Trust Flow" deal cards: navy accents → charcoal, gold stays gold */
.np-deal { border-color: var(--lux-line) !important; box-shadow: var(--lux-sh-2) !important; }
.np-deal:hover { box-shadow: var(--lux-sh-3) !important; }
.np-dm .t { color: var(--lux-text) !important; }
.np-da .a { color: var(--lux-text) !important; }
.np-who .pp { background: var(--lux-ink-4) !important; }
.np-badge.active { color: var(--lux-gold-700) !important; background: var(--lux-gold-50) !important; }
.np-badge.done  { color: var(--lux-info) !important; background: var(--lux-info-soft) !important; }
.np-next.you    { color: var(--lux-gold-700) !important; background: var(--lux-gold-50) !important; }

/* notifications cards */
.notif-head h1 { color: var(--lux-text) !important; }
.notif-item.is-unread { background: var(--lux-gold-50) !important; border-color: var(--lux-gold-100) !important; }
.notif-item.is-unread::before { background: var(--lux-gold) !important; }
.notif-subject { color: var(--lux-text) !important; }

/* Generic neo navy text tokens used across app pages */
.md-head h1, .notif-count { color: var(--lux-text); }

/* ══════════════════════ CHIPS / STATUS ══════════════════════ */
.chip--copper { background: var(--lux-gold-50); color: var(--lux-gold-700); border-color: var(--lux-gold-100); }
.status-pill { background: var(--lux-gold-50); color: var(--lux-gold-700); border-color: var(--lux-gold-100); }

/* ══════════════════════ FORM CONTROLS ══════════════════════ */
input, textarea, select { border-radius: 10px; }
input:focus, textarea:focus, select:focus {
  outline: 0;
  border-color: var(--lux-ink-4);
  box-shadow: 0 0 0 4px rgba(16,17,20,0.08);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .btn--primary, .btn--accent { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   R230 — Navy-bank unification override
   The token remap above re-themed every luxe-owned dark surface (hero, topbar,
   section--dark, footer, buttons) to sapphire navy. A few inner-page heroes
   were still painted a blue/purple gradient in site.css (.page-head--dark) and
   the coach/app accent surfaces use their own indigo — bring them all into the
   one navy system so the whole site reads as a single official-bank brand.
   luxe.css loads LAST, so these win the cascade.
   ═══════════════════════════════════════════════════════════════════════════ */
/* ALL page-heads (plain .page-head too — pricing/faq/contact/terms use it
   without the --dark modifier and were left on site.css's blue→violet
   aurora gradient). Force every page header to sapphire navy. */
body .page-head,
body .page-head--dark {
  background: linear-gradient(150deg, var(--lux-ink-3) 0%, var(--lux-ink-2) 48%, var(--lux-ink) 100%) !important;
}
body .page-head .eyebrow,
body .page-head .eyebrow--light { color: var(--lux-gold-200) !important; }

/* WCAG AA: site.css sets every eyebrow to the bright core gold (#A98841),
   which is only ~2.4:1 on a light/cream section background. Default the eyebrow
   to the darker --lux-gold-700 (#82621f, ~5–9:1 on light), then re-brighten it
   only on the explicitly DARK contexts (where the bright gold reads well and
   the dark gold would be too muddy). The --eyebrow--light variant is always on
   a dark bg, so it is excluded from the dark-down rule. */
body [class*="eyebrow"]:not(.eyebrow--light) {
  color: var(--lux-gold-700) !important;
}
body .section--dark [class*="eyebrow"],
body .section--inkdeep [class*="eyebrow"],
body .page-head [class*="eyebrow"],
body .hero [class*="eyebrow"],
body [class*="ink-"] [class*="eyebrow"] {
  color: var(--lux-gold-200) !important;
}

/* The aurora palette (site.css :root) points --gold-* / --aurora-gold-* at a
   burnt-orange #B45309 for light-page text accents, links and stat numbers;
   luxe remaps --copper but not --gold/--aurora-gold, so those read orange on
   transparency/press/bounty/etc. Force the whole accent family onto the
   navy-bank champagne gold. This :root loads last → wins site.css's :root. */
:root {
  /* R340 — Spike purple accent family (replaces champagne gold) */
  --aurora-gold-600: #A98841;
  --aurora-gold-700: #5E4715;
  --gold-500: #A98841;
  --gold-600: #7A5C14;
  --gold-700: #5E4715;
  --copper-700: #5E4715;
  --copper-600: #7A5C14;
  --copper-500: #A98841;
  --copper-400: #D8C290;
  --copper-300: #EADFC5;
  /* R446 — complete the de-gold / de-purple cascade. The block above blued the
     saturated copper/gold/aurora-gold-600/700 accents but LEFT GAPS: the
     champagne-gold highlight tints (--gold-200..400), the saturated decorative
     aurora-golds (--aurora-gold-400/500), and the ENTIRE purple --iris-* /
     --plasma-* families still resolved to gold/purple from site.css's :root.
     Force them all onto the Spike-Light blue ramp.
     PRESERVED ON PURPOSE: --aurora-gold-50..300 (#FFFBEB / #FEF3C7 / #FDE68A /
     #FCD34D) are the pale AMBER pending/warn tints consumed by status badges
     (e.g. admin KYC "pending") — bluing them would erase the pending signal. */
  --gold-200: #F6EFDF;
  --gold-300: #EADFC5;
  --gold-400: #C2A35E;
  --aurora-gold-400: #C2A35E;
  --aurora-gold-500: #A98841;
  /* Iris — the legacy purple "premium accent". No semantic purple exists in
     SafePay, so the whole family folds onto blue. */
  --iris-100: #F6EFDF;
  --iris-400: #D8C290;
  --iris-500: #C2A35E;
  --iris-600: #A98841;
  --iris-700: #7A5C14;
  /* Plasma — purple chart/highlight family. site.css later aliases these to
     --iris-*, but pin them explicitly so no consumer can read purple. */
  --plasma-300: #D8C290;
  --plasma-400: #C2A35E;
  --plasma-500: #C2A35E;
  --plasma-600: #7A5C14;
}

/* ═══════════════════════════════════════════════════════════════════════════
   R231 — Mobile horizontal-overflow fix (390px QA)
   Visual QA found the pricing comparison table (.cmp) forced a wider-than-
   viewport layout on phones. site.css handled it with an overflow-x:auto
   scroll wrapper + min-width:560px on the inner thead/tbody/tr — but that
   pushes the rightmost column ("מזומן ביד") off-screen, so it reads as
   "content cut off at the right edge" unless the user discovers they can
   swipe the table. A bank-grade pricing comparison should show every column
   at a glance, not hide one behind a scroll.

   Fix: on phones, drop the artificial 560px min-width and lay the 5-column
   table out as table-layout:fixed so all columns fit inside the viewport,
   wrapping cell text instead of forcing width. No blanket overflow-x:hidden
   is relied on here — the table genuinely fits (measured 374px @ 390 vw).
   luxe.css loads last, so these win over site.css's scroll-wrapper rules.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Breakpoint matches site.css's own scroll-wrapper rule (max-width:640px /
   min-width:560px). At any width below that, site.css would otherwise hide the
   rightmost column behind an internal scroll — so the fit-to-viewport fix has to
   cover the same range (not just ≤480px, which left a 481–~580px dead zone on
   large phones / foldables / small tablets where the column still clipped). */
@media (max-width: 640px) {
  /* Let the comparison table fit the viewport instead of scrolling/clipping. */
  body .cmp {
    display: table !important;
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
    overflow-x: visible !important;
    font-size: 12px;
  }
  body .cmp thead,
  body .cmp tbody,
  body .cmp tr {
    display: revert !important;   /* undo site.css's display:table on these */
    width: auto !important;
    min-width: 0 !important;
  }
  body .cmp thead th,
  body .cmp tbody td,
  body .cmp tbody th {              /* row-label cells are <th scope="row"> (a11y) */
    padding: 8px 4px;
    white-space: normal;
    word-break: break-word;       /* wrap long Hebrew labels rather than widen */
  }
  /* First (label) column gets the room; the 4 comparison columns split evenly. */
  body .cmp thead th:first-child,
  body .cmp tbody td:first-child,
  body .cmp tbody th:first-child { width: 30%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   R237 — WCAG AA contrast fixes for muted text on light surfaces.
   The audit found a few muted/secondary text tokens below the 4.5:1 ratio on
   the near-white canvas. These tokens live under html[data-theme="light"] in
   site.css; luxe.css loads last with the same selector, so these win the
   cascade. Only muted *text* tokens are darkened (verified compliant values) —
   the navy + champagne-gold brand is untouched. Scoped to light theme so any
   dark surface is unaffected.
   ═══════════════════════════════════════════════════════════════════════════ */
/* R325: Site is now dark-mode-first. Light-theme token overrides replaced by
   dark-theme accessibility fixes (dark bg contrast). */
html[data-theme="dark"],
:root {
  --mist-300: #595964;
  --mist-400: #6B6B75;
  --ink-600:  #595964;
  --ink-500:  #595964;
}
input::placeholder,
textarea::placeholder { color: var(--lux-text-3); opacity: 1; }

/* ════════════════════ R254 · BANK-GRADE HEADER ════════════════════
   Turns the flat utility bar into private-bank chrome. CSS-only — applies to
   every page, no markup change. Champagne hairline, depth-on-scroll, refined
   nav with animated gold underline, brand presence, signature CTA, tidy
   utility cluster. */

/* 1 · Champagne hairline along the top edge — the signature premium cue. */
.site-header::before {
  content: ""; position: absolute; top: 0; inset-inline: 0; height: 2px;
  background: var(--lux-gold-grad); opacity: .92; pointer-events: none; z-index: 3;
}

/* 2 · Calmer height + genuine depth once the user scrolls past the top. */
.site-header .nav-row { height: 74px; }
.site-header { transition: background .25s ease, box-shadow .25s ease; }
.site-header.scrolled {
  background: rgba(255,255,255,0.97) !important;
  box-shadow: 0 0 12px rgba(0,0,0,0.07) !important;
  border-bottom: 1px solid var(--lux-line) !important;
}
html[data-theme="dark"] .site-header.scrolled {
  background: rgba(255,255,255,0.98) !important;
  box-shadow: 0 0 12px rgba(0,0,0,0.07) !important;
  border-bottom: 1px solid var(--lux-line) !important;
}

/* 3 · Brand presence + a subtle gold lift on the mark. */
.site-header .brand { font-size: 20px; gap: 11px; }
.site-header .brand .brand-mark {
  filter: drop-shadow(0 2px 6px rgba(18,34,46,0.40));
  transition: transform .25s cubic-bezier(.22,1,.36,1);
}
.site-header .brand:hover .brand-mark { transform: rotate(-8deg) scale(1.06); }
/* R573 Private Trust: the brand seal disc is hardcoded blue (fill="#A98841")
   inline in the SVG on every page. Recolour it to brand ink so the mark reads
   on-palette site-wide (single source — no per-page SVG edits). */
.brand-mark circle:first-of-type { fill: #12222E !important; }

/* 4 · Nav links — refined spacing + animated champagne underline (RTL-aware
   via inset-inline + transform-origin:right). Higher specificity than the
   legacy AURORA ::after so this governs the header context. */
.site-header .nav-links { gap: 30px; font-size: 14.5px; }
.site-header .nav-links > a,
.site-header .nav-links .nav-has-menu > a {
  position: relative; font-weight: 600; letter-spacing: -0.004em;
}
.site-header .nav-links > a::after,
.site-header .nav-links .nav-has-menu > a::after {
  content: ""; position: absolute; inset-inline: 0; bottom: -7px; height: 2px;
  background: var(--lux-gold-grad); border-radius: 2px;
  transform: scaleX(0); transform-origin: right;
  transition: transform .22s cubic-bezier(.22,1,.36,1);
}
.site-header .nav-links > a:hover::after,
.site-header .nav-links .nav-has-menu:hover > a::after,
.site-header .nav-links > a.active::after { transform: scaleX(1); }
.site-header .nav-links > a.active { color: var(--lux-gold-700); font-weight: 700; }

/* 5 · Signature CTA — champagne glow + lift on the signup button. */
.site-header .nav-actions .btn--primary,
.site-header .nav-actions .btn--accent {
  box-shadow: 0 2px 10px -2px rgba(0,82,149,0.45);
  transition: transform .2s ease, box-shadow .2s ease;
}
.site-header .nav-actions .btn--primary:hover,
.site-header .nav-actions .btn--accent:hover {
  transform: translateY(-1px);
  box-shadow: 0 9px 24px -6px rgba(0,82,149,0.60);
}

/* 6 · Utility cluster (theme + a11y + search) — soft grouped surface so they
   read as one intentional control, not scattered icons. */
.site-header .vault-theme-toggle,
.site-header .a11y-trigger {
  border-radius: 10px;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.site-header .vault-theme-toggle:hover,
.site-header .a11y-trigger:hover {
  background: var(--lux-tint);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px -2px rgba(26,35,66,0.18);
}

/* ═══════════════════════════════════════════════════════════════════════════
   R262 · luxury marketing elevation
   ─────────────────────────────────────────────────────────────────────────
   Subtle, additive lift from "bank-grade" to "private bank". Marketing-context
   selectors ONLY — every rule below is scoped so it cannot touch app chrome
   (body[data-app="1"] is explicitly excluded where any shared selector exists).
   No protected work (header / topbar / eyebrow / card-hover) is modified; this
   is a brand-new layer appended after everything.

   Levers:
   1. Typography refinement — slightly tighter heading tracking + confident
      scale + comfortable body line-height.
   2. Spacing & rhythm — a touch more generous vertical breathing room on
      marketing sections (restraint = expensive).
   3. Premium depth — two-stop layered shadows on hero/feature/CTA surfaces.
   4. Gold refinement — quiet champagne CTA sheen + hairline gold section rule.
   5. Micro-polish — gold focus-visible rings, smoother transitions, crisp
      1px card borders.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · Typography refinement (marketing headings only) ──────────────────
   Scoped to marketing pages by EXCLUDING app pages, so app heading rhythm is
   owned by the parallel agent. A confident, slightly tighter type scale reads
   as deliberate rather than default. */
body:not([data-app="1"]) .page-head h1,
body:not([data-app="1"]) .hero h1,
body:not([data-app="1"]) .hero--v2 h1 {
  letter-spacing: -0.034em;
  text-wrap: balance;
}
body:not([data-app="1"]) .section h2,
body:not([data-app="1"]) .section-head h2,
body:not([data-app="1"]) .page-head h2 {
  letter-spacing: -0.022em;
  text-wrap: balance;
}
/* Comfortable, expensive-feeling body measure on marketing prose blocks. */
body:not([data-app="1"]) .section p,
body:not([data-app="1"]) .page-head .lede,
body:not([data-app="1"]) .hero .hero-sub,
body:not([data-app="1"]) .hero--v2 .hero-sub {
  line-height: 1.62;
}

/* ── 2 · Spacing & rhythm (marketing sections only) ───────────────────────
   A small, conservative bump in vertical rhythm. Uses min() so it never
   over-pads on short viewports, and only applies where a section already
   carries block padding (additive, not layout-defining). */
@media (min-width: 768px) {
  body:not([data-app="1"]) .section {
    padding-block: min(7.5rem, 12vh);
  }
}

/* ── 3 · Premium depth — soft two-stop layered shadows ────────────────────
   Replaces single harsh drop-shadows on the marquee marketing surfaces with a
   tight contact shadow + a wide ambient one. Marketing-scoped. */
body:not([data-app="1"]) .elev-2 {
  box-shadow:
    0 1px 2px rgba(26,35,66,0.04),
    0 12px 32px -12px rgba(26,35,66,0.16);
}
body:not([data-app="1"]) .elev-3,
body:not([data-app="1"]) .cta-banner {
  box-shadow:
    0 2px 6px rgba(26,35,66,0.05),
    0 24px 60px -20px rgba(26,35,66,0.24);
}

/* ── 4 · Gold refinement ──────────────────────────────────────────────────
   (a) A quiet champagne sheen sweep on marketing CTA banners — a single slow
       diagonal highlight on hover, far softer than the button sheen. */
body:not([data-app="1"]) .cta-banner {
  position: relative;
  overflow: hidden;
}
body:not([data-app="1"]) .cta-banner::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg, transparent 38%, rgba(231,204,138,0.10) 50%, transparent 62%);
  opacity: 0; transition: opacity 520ms ease;
}
body:not([data-app="1"]) .cta-banner:hover::after { opacity: 1; }

/* (b) A whisper-thin champagne rule capping marketing sections — a hairline
       gradient that fades to nothing at the edges, dividing major bands with a
       luxe cue instead of a hard line. Light-surface sections only; dark bands
       and the hero/footer keep their own treatment. */
body:not([data-app="1"]) .section + .section:not(.section--dark)::before {
  content: ""; display: block;
  height: 1px; width: min(120px, 40%);
  margin-inline: auto;
  margin-block-start: -1px;
  background: linear-gradient(90deg, transparent, rgba(0,82,149,0.55), transparent);
}

/* ── 5 · Micro-polish ─────────────────────────────────────────────────────
   (a) Refined gold focus-visible ring across marketing interactive elements.
       Keyboard-only (:focus-visible) so it never fires on mouse press; meets
       AA non-text contrast against both white and navy surfaces. */
body:not([data-app="1"]) a:focus-visible,
body:not([data-app="1"]) .btn:focus-visible,
body:not([data-app="1"]) button:focus-visible {
  outline: 2px solid var(--lux-gold);
  outline-offset: 2px;
  border-radius: 6px;
}

/* (b) Crisp 1px hairline borders + a smoother settle transition on marketing
       feature cards (excludes app cards and the KYC spacing wrapper). */
body:not([data-app="1"]):not([data-screen-label="KycManual"]) .trust-tile,
body:not([data-app="1"]) .feature-card,
body:not([data-app="1"]) .elev-2,
body:not([data-app="1"]) .elev-3 {
  border: 1px solid var(--lux-line-2);
  transition:
    transform .22s cubic-bezier(.22,1,.36,1),
    box-shadow .22s ease,
    border-color .22s ease;
}

/* R276 — WCAG AA contrast fixes (verified live, 2026-06-03 audit).
   Only selectors that actually failed at runtime are lifted here; --ink-500
   (#6b6b6b, 5.33:1) and .btn--accent (dark text on gold, 10:1) already pass. */
.cert .id { color: #6b6b6b; }      /* status line e.g. "טרם הוסמך" was #A3A3A3 = 2.52:1 → 5.33:1 */
.cmp .yes { color: #156b62; }      /* success value text was teal 3.62:1 → ~6:1 */

/* R279 — unified premium floating action buttons: Sofi · accessibility ·
   "פנייה לתמיכה". Same 52px navy circle + champagne hairline + a slow, staggered
   "radar" pulse so the cluster feels modern and alive. The pulse animates the
   box-shadow (a CSS animation outranks the per-button :hover box-shadow, so it
   keeps glowing on hover); motion is gentle (2.8s) and OFF under reduced-motion. */
.sp-help-btn,
.a11y-fab,
#safepay-deal-help-btn {
  border: 1px solid rgba(0,82,149,0.55) !important;   /* unify the champagne hairline (Sofi had border:0) */
  animation: sp-fab-pulse 2.8s ease-out infinite;
}
#safepay-deal-help-btn { animation-delay: 0s; }
.a11y-fab               { animation-delay: .35s; }      /* staggered wave = "advanced" feel */
.sp-help-btn            { animation-delay: .7s; }
.sp-help-btn:hover,
.a11y-fab:hover,
#safepay-deal-help-btn:hover { transform: translateY(-2px); }
.sp-help-btn.is-open { animation: none; }               /* calm down while the chat is open */
@keyframes sp-fab-pulse {
  0%   { box-shadow: 0 8px 24px rgba(26,35,66,0.34), 0 0 0 0   rgba(0,82,149,0.50); }
  70%  { box-shadow: 0 8px 24px rgba(26,35,66,0.34), 0 0 0 13px rgba(0,82,149,0);    }
  100% { box-shadow: 0 8px 24px rgba(26,35,66,0.34), 0 0 0 0   rgba(0,82,149,0);    }
}
@media (prefers-reduced-motion: reduce) {
  .sp-help-btn, .a11y-fab, #safepay-deal-help-btn { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   R280 · BANK-GRADE SYSTEM POLISH — the last 10%
   ─────────────────────────────────────────────────────────────────────────
   Cross-cutting, additive, token-based consistency layer. Lifts EVERY page at
   once: one focus system, one motion system, one input feel, one pill
   vocabulary, refined loading/empty states, tables, modals, scrollbars,
   selection, and tabular numerals. RTL-correct (logical properties only).
   Nothing here removes an existing rule; selectors are tuned to sit ON TOP of
   the careful !important overrides above without fighting them.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · FOCUS SYSTEM — one consistent visible ring everywhere ─────────────
   A single champagne keyboard-focus ring (2px gold, 2px offset) on every
   interactive element across marketing AND app/admin contexts. Keyboard-only
   (:focus-visible) so it never fires on mouse press. The R262 #5a rule covered
   marketing links/buttons only; this generalises to inputs, selects, textareas,
   summary/details, the auth modal, admin nav/rows, and any [tabindex]/[role]
   control — so the whole product shares one focus language. Non-!important on
   the ring itself; we add a same-property !important only where a legacy rule
   sets `outline:none` we must beat. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="link"]:focus-visible,
.btn:focus-visible,
.adm-nav a:focus-visible,
.adm-table .row-actions button:focus-visible {
  outline: 2px solid var(--lux-gold) !important;
  outline-offset: 2px;
  border-radius: 8px;
}
/* Inputs keep their own corner radius under the ring (a 8px ring radius on a
   10px field looks fine, but match the field where it's larger). */
input:focus-visible,
select:focus-visible,
textarea:focus-visible { border-radius: inherit; }

/* ── 2 · MOTION SYSTEM — unified 150–250ms ease + gentle hover-lift ─────────
   Give interactive controls that DON'T already declare a transition above a
   single calm transition, so hover/active state changes feel consistent rather
   than instant in some places and animated in others. Scoped to common
   interactive primitives; existing per-component transitions (header, cards,
   buttons) are more specific or equal and load earlier, so they're preserved. */
.btn,
.adm-nav a,
.adm-table .row-actions button,
.adm-search input,
.lux-pill,
[role="button"] {
  transition: background-color .18s ease, border-color .18s ease,
              color .18s ease, box-shadow .18s ease, transform .18s ease;
}

/* ── 3 · INPUTS / FORMS — one system (global floor, never fights page sizes) ─
   Low-specificity base so page-specific control classes (.nd-input, .am-field
   input, .adm-search input, etc.) that set their own height/padding still win.
   This only establishes the shared baseline: comfortable min-height, hairline
   border → gold focus, readable placeholder, logical-radius. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
select,
textarea {
  min-height: 44px;
  border: 1px solid var(--lux-line-2);
  border-radius: var(--lux-r-sm, 12px);
  color: var(--lux-text);
  background: var(--lux-surface);
  transition: border-color .18s ease, box-shadow .18s ease;
}
textarea { min-height: 88px; }
input::placeholder,
textarea::placeholder { color: var(--lux-text-3); opacity: 1; }

/* The always-on (mouse) focus ring → champagne, replacing the old navy glow
   (lines ~607) so mouse + keyboard focus read as ONE gold system. site.css
   ships `input:focus{border:var(--sapphire-500)!important; box-shadow:…!important}`
   (a legacy blue ring) — so we MUST carry !important here to win, same as the
   other legacy-beating overrides in this file. The :focus-visible rule above
   layers the crisp outline on top for keyboards. */
input:focus, textarea:focus, select:focus {
  outline: 0;
  border-color: var(--lux-gold) !important;
  box-shadow: 0 0 0 3px rgba(0,82,149,0.18) !important;
}
/* Auth-modal + admin-search rings → same champagne (these set their own
   non-!important focus styles, but inherit the blue from the grouped
   input:focus!important above, so they need the !important too). */
[data-auth-modal] .am-field input:focus,
.adm-search input:focus {
  outline: 0;
  border-color: var(--lux-gold) !important;
  box-shadow: 0 0 0 3px rgba(0,82,149,0.18) !important;
}

/* ── 4 · STATUS PILLS / CHIPS — one semantic vocabulary ────────────────────
   A reusable pill class agents can drop anywhere (web + app + admin) for the
   semantic set: ok / info / warn / red / neutral. Soft-tint bg + saturated
   text, 999px radius, tabular nums for any inline figure. Existing .status-pill
   / .chip--copper (gold) are untouched; this adds the rest of the family. */
.lux-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1.5;
  letter-spacing: .005em; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
}
.lux-pill--ok      { background: var(--lux-ok-soft);   color: #0b7d4d;          border-color: rgba(15,169,104,0.20); }
.lux-pill--info    { background: var(--lux-info-soft); color: #1f54d6;          border-color: rgba(47,107,255,0.20); }
.lux-pill--warn    { background: var(--lux-warn-soft); color: var(--lux-gold-700); border-color: rgba(200,144,26,0.22); }
.lux-pill--red     { background: var(--lux-red-soft);  color: #c1373b;          border-color: rgba(229,72,77,0.22); }
.lux-pill--neutral { background: var(--lux-tint);      color: var(--lux-text-2); border-color: var(--lux-line-2); }
.lux-pill--gold    { background: var(--lux-gold-50);   color: var(--lux-gold-700); border-color: var(--lux-gold-100); }
/* Optional leading status dot. */
.lux-pill .lux-dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; flex: none; }

/* Harmonise the admin table badges with the same semantic palette + AA text,
   so the in-product pill language matches everywhere (these were ad-hoc greens
   /ambers in _shared.css). Same-specificity, later load → wins. */
.adm-table .badge { border-radius: 999px; font-variant-numeric: tabular-nums; border: 1px solid transparent; }
.adm-table .badge.ok    { background: var(--lux-ok-soft);   color: #0b7d4d;          border-color: rgba(15,169,104,0.20); }
.adm-table .badge.warn  { background: var(--lux-warn-soft); color: #9A5400; border-color: rgba(200,144,26,0.22); }
.adm-table .badge.err   { background: var(--lux-red-soft);  color: #c1373b;          border-color: rgba(229,72,77,0.22); }
.adm-table .badge.muted { background: var(--lux-tint);      color: var(--lux-text-2); border-color: var(--lux-line-2); }

/* ── 5 · LOADING & EMPTY STATES — polished, reusable ───────────────────────
   Refine the admin skeleton shimmer (softer, on-brand tints, subtler sweep) and
   generalise it as .lux-skeleton so any async view can use it. Plus a calm,
   reusable empty-state pattern. Honours reduced-motion (global guard below). */
.adm-skeleton, .lux-skeleton {
  height: 30px; border-radius: 8px; margin-bottom: 8px;
  background: linear-gradient(100deg,
              var(--lux-tint) 30%, var(--lux-sunk) 50%, var(--lux-tint) 70%);
  background-size: 220% 100%;
  animation: lux-shimmer 1.5s ease-in-out infinite;
}
.lux-skeleton--text { height: 13px; border-radius: 6px; }
.lux-skeleton--line { height: 13px; border-radius: 6px; margin-bottom: 10px; }
.lux-skeleton--line:nth-of-type(3n) { width: 72%; }
@keyframes lux-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/* keep the legacy keyframe name working if referenced anywhere */
@keyframes adm-shimmer { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }

.adm-empty, .lux-empty {
  padding: 48px 24px; text-align: center; color: var(--lux-text-3);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.adm-empty .em, .lux-empty .lux-empty__icon {
  font-size: 40px; line-height: 1; display: block;
  opacity: .9; filter: grayscale(.1);
}
.lux-empty__title { font-size: 15px; font-weight: 700; color: var(--lux-text-2); }
.lux-empty__sub   { font-size: 13.5px; color: var(--lux-text-3); max-width: 46ch; line-height: 1.55; }

/* ── 6 · TABLES — hairline rows, sticky header depth, tabular figures ───────
   Additive refinement of the admin table (and a generic .lux-table). Generous
   row height, refined hover, a subtle shadow under the sticky header so it
   detaches on scroll, and tabular-nums on every cell so columns of figures
   align. RTL: header/cells stay start-aligned (already set in _shared.css). */
.adm-table tbody td, .lux-table tbody td { padding-block: 13px; }
.adm-table tbody tr, .lux-table tbody tr { transition: background-color .14s ease; }
.adm-table tbody tr:hover, .lux-table tbody tr:hover { background: var(--lux-tint); }
.adm-table thead th, .lux-table thead th {
  background: var(--lux-tint);
  box-shadow: inset 0 -1px 0 var(--lux-line-2), 0 2px 6px -4px rgba(26,35,66,0.18);
  letter-spacing: .01em;
}
.adm-table, .lux-table { font-variant-numeric: tabular-nums; }

/* ── 7 · MODALS / SHEETS — consistent dim, blur, depth; mobile bottom-sheet ─
   Deepen the auth-modal backdrop (more blur + brand-navy dim) and give the card
   the signature ink shadow + larger radius. On phones, slide it up from the
   bottom as a sheet. Same selectors as site.css, later load → wins (no markup
   change, behaviour untouched — purely visual). */
[data-auth-modal] {
  background: rgba(17,12,46,0.45) !important;
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}
[data-auth-modal] .am-card {
  border-radius: var(--lux-r-lg);
  box-shadow: var(--lux-sh-ink);
  border: 1px solid var(--lux-line-2);
  background: var(--lux-surface) !important;
}
@media (max-width: 560px) {
  [data-auth-modal] { align-items: flex-end !important; padding: 0 !important; }
  [data-auth-modal] .am-card {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: var(--lux-r-lg) var(--lux-r-lg) 0 0 !important;
    max-height: 92dvh !important;
  }
}

/* ── 8 · SCROLLBARS · SELECTION · MARKERS — subtle, on-brand ───────────────*/
* { scrollbar-width: thin; scrollbar-color: var(--lux-line-3) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--lux-line-3);
  border-radius: 999px;
  border: 3px solid var(--lux-bg);
}
::-webkit-scrollbar-thumb:hover { background: #4B5563; }
::selection { background: rgba(0,82,149,0.28); color: var(--lux-text); }
li::marker { color: var(--lux-gold-600); }

/* ── 9 · TABULAR NUMERALS on money / figures globally ──────────────────────
   Align digits wherever the markup signals a figure (money, stats, counts).
   Class- and attribute-driven so it can't disturb body prose. */
.gold, [data-num], [data-vault-reveal],
.amt, .dc-amt, .num, .stat-num, .stat-cell .v,
.adm-kpi .num, .np-da .a, .calc-result .big {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* ── 10 · MICRO-POLISH — hairline dividers, disabled, link affordance ───────*/
hr {
  border: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--lux-line-2) 14%, var(--lux-line-2) 86%, transparent);
  margin-block: 20px;
}
/* Consistent disabled affordance for any interactive control that doesn't set
   its own (kept off elements with bespoke disabled states via :not). */
button:disabled:not(.am-submit):not(.btn--primary):not(.btn--accent),
.btn:disabled,
input:disabled, select:disabled, textarea:disabled {
  opacity: .55; cursor: not-allowed;
}
input:disabled, select:disabled, textarea:disabled { background: var(--lux-tint); }

/* ── GLOBAL reduced-motion guard ───────────────────────────────────────────
   One place that calms ALL transforms/animations/transitions for users who ask
   for it — generalising the per-component guards above. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .adm-skeleton, .lux-skeleton { animation: none !important; background-position: 0 0 !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   R325 — BLOOMBERG DARK UTILITY LAYER
   New utility classes shipped with the full dark-mode refactor.
   ─────────────────────────────────────────────────────────────────────────
   1. Privacy Blur — financial data protection
   2. Dark skeleton shimmer
   3. Tabular numerals enforcement (extended)
   4. Dark status pills
   5. Institutional table
   6. 150ms snappy transitions
   7. Active-state fixes for dark-bg nav
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Privacy Blur — shoulder-surfing protection ───────────────────────
   Apply .privacy-blur to main balances and sensitive amounts.
   Desktop: hover to reveal. Touch: tap to toggle (JS adds .is-revealed). */
.privacy-blur {
  filter: blur(8px);
  transition: filter 200ms ease;
  cursor: pointer;
  user-select: none;
  display: inline-block;
}
.privacy-blur:hover,
.privacy-blur:focus,
.privacy-blur.is-revealed {
  filter: blur(0);
}
@media (pointer: coarse) {
  .privacy-blur { filter: blur(9px); }
  .privacy-blur:hover { filter: blur(9px); } /* hover unreliable on touch — require tap */
}

/* ── 2. Dark institutional skeleton shimmer ──────────────────────────────
   Darker-on-dark sweep. Overrides the earlier lux-skeleton definition
   (same specificity, later in file → wins). */
.adm-skeleton,
.lux-skeleton {
  background: linear-gradient(100deg,
    #ECECF2 25%,
    #F6F4FB 50%,
    #ECECF2 75%) !important;
  background-size: 220% 100% !important;
  border: none !important;
}

/* ── 3. Tabular numerals — extended enforcement ──────────────────────────
   Beyond the existing selectors: any element carrying financial semantics. */
[data-amount], [data-balance], [data-fee], [data-count], [data-stat],
.amount, .balance, .fee-amount, .deal-amount, .deal-total,
.adm-kpi .num, code, kbd {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* ── 4. Dark status pills — correct contrast on dark surfaces ────────────
   Replaces the earlier lux-pill definitions (same class, later → wins). */
.lux-pill--ok      { background: rgba(5,150,105,0.18);   color: #34D399; border-color: rgba(5,150,105,0.32); }
.lux-pill--info    { background: rgba(59,130,246,0.18);  color: #93C5FD; border-color: rgba(59,130,246,0.32); }
.lux-pill--warn    { background: rgba(217,119,6,0.18);   color: #FCD34D; border-color: rgba(217,119,6,0.32); }
.lux-pill--red     { background: rgba(220,38,38,0.18);   color: #FCA5A5; border-color: rgba(220,38,38,0.32); }
.lux-pill--neutral { background: var(--lux-tint);        color: var(--lux-text-2); border-color: var(--lux-line); }
.lux-pill--gold    { background: rgba(0,82,149,0.18); color: var(--lux-gold-700); border-color: rgba(0,82,149,0.32); }

/* ── 5. Institutional table — high-density, hairline rows ───────────────
   table-layout: fixed; right-aligned amounts; bottom-borders only; no zebra */
.lux-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.lux-table thead th {
  padding: 9px 12px;
  background: var(--lux-sunk);
  border-bottom: 1px solid var(--lux-line);
  color: var(--lux-text-3);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: start;
}
.lux-table thead th.num,
.lux-table tbody td.num { text-align: end; }
.lux-table tbody td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--lux-line);
  color: var(--lux-text);
  vertical-align: middle;
}
/* No zebra stripes. Subtle hover only. */
.lux-table tbody tr:hover td { background: rgba(255,255,255,0.025); }

/* ── 6. Snappy 150ms transitions — no bounce, no decorative ease ─────────
   Enforces the Bloomberg spec: decisive UI, not playful. */
.btn, button:not([class*="sp-"]):not(.a11y-fab),
a[class*="btn"], .lux-pill, .adm-nav a,
.adm-table tbody tr, .lux-table tbody tr,
input, select, textarea {
  transition-duration: 150ms !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ── 7. Active-state fixes for dark-bg navigation ────────────────────────
   --ink-900 is now #F9FAFB (light text), so any element using it as a
   background creates white-on-white invisible states. Override with gold accent. */
.adm-nav a.is-active {
  background: rgba(0,82,149,0.12) !important;
  color: var(--lux-gold-700) !important;
  border: 1px solid rgba(0,82,149,0.28) !important;
  font-weight: 600;
  -webkit-text-fill-color: var(--lux-gold-700) !important;
}
.adm-nav a.is-active:hover {
  background: rgba(0,82,149,0.18) !important;
}
/* my-deals tabs active state */
.md-tab.is-active {
  background: rgba(0,82,149,0.12) !important;
  border-color: rgba(0,82,149,0.28) !important;
  color: var(--lux-gold-700) !important;
}
/* filter pills active state */
.filter-pill.active {
  background: var(--lux-gold) !important;
  color: #FFFFFF !important;
  border-color: var(--lux-gold) !important;
  font-weight: 700;
}

/* ── 8. Form inputs — 8px radius (spec), dark surface ───────────────────
   Enforces institutional geometry: 8px for inputs. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
select, textarea {
  border-radius: 8px !important;
  background: var(--lux-surface) !important;
  color: var(--lux-text) !important;
  border: 1px solid var(--lux-line-2) !important;
}
/* Cards — Spike 16px radius + soft float */
.card, .adm-card, .adm-kpi, .adm-nav,
.trust-tile, .feature-card, .elev-2, .elev-3 {
  border-radius: 16px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   R340 · SPIKE LIGHT — theme-state force-override (loads LAST in the cascade).
   site.css carries a legacy html[data-theme="light"] block (navy+cream+gold) and
   an aurora "void" :root block; the former outranks a plain :root. These selectors
   match their specificity but load later, so the Spike rebrand wins in EVERY theme
   state. Underlying void/mist/gold primitives are remapped to light too, so any
   component still reading them renders on-palette instead of going dark.
   ═══════════════════════════════════════════════════════════════════════════ */
html, html[data-theme="light"], html[data-theme="dark"] {
  --surface-bg:#FFFFFF; --surface-card:#FFFFFF; --surface-sunk:#F8F8F8; --surface-tint:#F6EFDF;
  --border-soft:#ECECF2; --border-default:#E2E0EC; --border-strong:#D6D3E2;
  --ink-900:#0B0B0F; --ink-800:#2A2A30; --ink-700:#3A3A42; --ink-600:#595964; --ink-500:#595964;
  --copper-700:#5E4715; --copper-600:#7A5C14; --copper-500:#A98841; --copper-400:#D8C290; --copper-300:#EADFC5;
  --gold-500:#A98841; --gold-600:#7A5C14; --gold-700:#5E4715;
  --aurora-gold-600:#A98841; --aurora-gold-700:#5E4715;
  /* R446 — mirror the de-gold/de-purple gap remaps into the themed block so
     html[data-theme] states stay on-palette (keep --aurora-gold-50..300 amber). */
  --gold-200:#F6EFDF; --gold-300:#EADFC5; --gold-400:#C2A35E;
  --aurora-gold-400:#C2A35E; --aurora-gold-500:#A98841;
  --iris-100:#F6EFDF; --iris-400:#D8C290; --iris-500:#C2A35E; --iris-600:#A98841; --iris-700:#7A5C14;
  --plasma-300:#D8C290; --plasma-400:#C2A35E; --plasma-500:#C2A35E; --plasma-600:#7A5C14;
  --void-950:#FFFFFF; --void-900:#F8F8F8; --void-850:#F6EFDF;
  --mist-50:#0B0B0F; --mist-100:#2A2A30; --mist-200:#3A3A42; --mist-300:#595964; --mist-400:#6B6B75; --mist-500:#5C5C66;
}
/* R352 — keep the residual DARK vault hovercard labels light: they read
   --mist-500, which we darkened above for light surfaces. */
.vault-hovercard-pop .stat .l, .vault-review .when { color: #B4B4BC !important; }
html[data-theme="light"], html[data-theme="dark"] { background:#FFFFFF !important; }
html[data-theme="light"] body, html[data-theme="dark"] body { background:#FFFFFF !important; color:#0B0B0F !important; }
html[data-theme="light"] .site-header { background:rgba(255,255,255,0.85) !important; border-bottom-color:rgba(0,0,0,0.06) !important; }
html[data-theme="light"] .nav-links a { color:rgba(0,0,0,0.64) !important; }
html[data-theme="light"] .nav-links a:hover { color:#7A5C14 !important; }

/* ── R340/R343 · Spike fixes — hero headlines (were white-on-white), top bar, FABs.
   Covers BOTH the homepage `.hero*` wrappers AND the marketing sub-page `.page-head`
   wrapper (pricing/how/security/about/faq/…), whose H1s were white for the old dark
   heroes. ── */
.hero h1, .hero h2, .hero--v2 h1, .hero--v2 h2, [class*="hero"] h1,
.hero .h1, section.hero h1,
.page-head h1, .page-head h2, .page-head .h1, .page-head .page-title {
  color: var(--lux-text) !important;
  -webkit-text-fill-color: var(--lux-text) !important;
  background: none !important;
}
.hero .lede, .hero > p, .hero--v2 .lede, .hero-grid p,
.page-head .lede, .page-head > p, .page-head .sub, .page-head .page-sub {
  color: var(--lux-text-2) !important;
  -webkit-text-fill-color: var(--lux-text-2) !important;
}
/* Neutralize any leftover warm aurora wash on the hero — Spike is clean white. */
.hero.has-aurora, .hero--v2.has-aurora { background: #FFFFFF !important; }
.hero.has-aurora::before, .hero.has-aurora::after,
.hero--v2.has-aurora::before, .hero--v2.has-aurora::after { background: none !important; opacity: 0 !important; }

/* Top utility bar: navy #1E3A8A → light Spike strip */
.topbar {
  background: #F8F8F8 !important;
  border-bottom: 1px solid #ECECF2 !important;
}
.topbar, .topbar a, .topbar span, .topbar div, .topbar strong, .topbar * {
  color: #6B6B72 !important;
  -webkit-text-fill-color: #6B6B72 !important;
}
.topbar a:hover, .topbar a:hover * { color: #7A5C14 !important; -webkit-text-fill-color: #7A5C14 !important; }

/* Floating FABs (Sofi help launcher + accessibility) — navy → Spike purple */
.sp-help-btn, .a11y-fab {
  background: linear-gradient(135deg, #A98841, #7A5C14) !important;
  box-shadow: 0 11px 17px -12px rgba(0,82,149,0.65) !important;
  color: #FFFFFF !important;
  border: 0 !important;
}
/* Gold stragglers → Spike purple */
.pb-btn {                                  /* cookie/privacy "הבנתי" button */
  background: linear-gradient(135deg,#A98841,#7A5C14) !important;
  color: #FFFFFF !important; border: 0 !important;
}
.dc-amt {                                  /* deal-card amount — was gold gradient text */
  background: none !important;
  -webkit-text-fill-color: var(--lux-text) !important;
  color: var(--lux-text) !important;
}
.vault-drawer, .vault-cmdk-panel { background: #FFFFFF !important; }

/* ════════════════════════════════════════════════════════════════════════
   R406 — HEADER: "Premium Minimal" (founder pick, mockup option 2)
   Clean single row · a permanent soft FLOAT SHADOW (depth is the premium
   signal that separates a bank-grade bar from a flat strip) · a crisp BLUE
   active-page underline (fixes the legacy copper/gold leak) · a confident
   blue CTA. Appended last so it wins the site.css / AURORA / luxe cascade.
   Blue-only per the design protocol — no gold, no purple.
   ════════════════════════════════════════════════════════════════════════ */

/* Permanent lift — soft float shadow under the bar at ALL times, not only on
   scroll. Hairline kept as a faint secondary edge; the shadow is primary. */
/* R397 — Header blends into the page at the very top (founder request): no
   white bar / border / shadow at scrollY 0, so the logo + nav + CTAs sit
   directly on the page background and read as one clean surface. The header is
   position:sticky, so the signature soft float shadow + a crisp white surface
   fade back in on scroll (site.js toggles .scrolled past 8px) to keep the nav
   readable when the dark hero card / headline scroll underneath. The dark-theme
   selector is included so the legacy folded-dark header behaves identically. */
html[data-theme="light"] .site-header,
html[data-theme="dark"] .site-header,
.site-header {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-bottom: 1px solid transparent !important;
  box-shadow: none !important;
}
html[data-theme="light"] .site-header.scrolled,
html[data-theme="dark"] .site-header.scrolled,
.site-header.scrolled {
  background: rgba(255,255,255,0.92) !important;
  -webkit-backdrop-filter: saturate(140%) blur(20px) !important;
  backdrop-filter: saturate(140%) blur(20px) !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 0 12px rgba(0,0,0,0.09) !important;
}
/* Clean top edge: drop the 2px accent bar (that was the option-3 look). */
.site-header::before { display: none !important; }

/* A touch more presence. */
.site-header .nav-row { height: 76px !important; }

/* Active/hover underline → BLUE, 3px rounded (was a copper/gold leak). The
   existing scaleX reveal animation is kept; we only recolour + thicken it. */
.site-header .nav-links a::after {
  background: linear-gradient(180deg,#A98841 0%,#4A3613 100%) !important;
  height: 3px !important;
  border-radius: 3px !important;
}
.site-header .nav-links a.active,
.site-header .nav-links .nav-has-menu > a.active {
  color: #5E4715 !important;
  -webkit-text-fill-color: #5E4715 !important;
  font-weight: 700 !important;
}
.site-header .nav-links a.active::after {
  /* Beat the site.css `.site-header .nav-links a.active::after {background:
     var(--sapphire-600)!important}` rule (undefined var → invisible underline).
     Equal specificity, but luxe loads after site.css so this wins the tie. */
  background: linear-gradient(180deg,#A98841 0%,#4A3613 100%) !important;
  background-color: #A98841 !important;
  transform: scaleX(1) !important;
  opacity: 1 !important;
}

/* Confident primary CTA: taller, bolder, with the signature blue glow. */
.site-header .nav-actions .btn--primary,
.site-header .nav-actions .btn--primary[data-auth="signup"],
.site-header .nav-actions .btn--accent[data-auth="signup"] {
  height: 44px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  box-shadow: 0 11px 17px -12px rgba(0,82,149,0.55) !important;
}
.site-header .nav-actions .btn--primary:hover {
  box-shadow: 0 16px 26px -12px rgba(0,82,149,0.62) !important;
}
.site-header .nav-actions .btn--ghost { font-weight: 600 !important; }
/* Keep the 🌐 language switcher aligned with the taller bar. */
.site-header .nav-actions .i18n-toggle { height: 40px !important; }

/* ── R434: kill legacy purple/gold leaks on shared components ──────────
   site.css paints the global scroll-progress bar and the 404 numeral in
   the old gold→plasma(purple)→amber palette. luxe.css loads last, so these
   blue overrides win without untangling the vault layer. */
.scroll-progress__fill {
  background: linear-gradient(90deg, #A98841, #C2A35E) !important;
  box-shadow: 0 0 12px rgba(0,82,149,0.55) !important;
}
body .f-num {
  background: linear-gradient(135deg, #C2A35E 0%, #A98841 50%, #7A5C14 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  text-shadow: 0 0 80px rgba(0,82,149,0.30) !important;
}
.f-search-list a:hover { background: #A98841 !important; color: #fff !important; border-color: #A98841 !important; }

/* R439: the injected skip-to-content link (.sp-skip, fixed just above the
   viewport) had a hardcoded gold box-shadow whose blur bled into the top-left
   corner of every page. The site.css fix is correct but its CDN asset cache is
   serving a stale copy; luxe.css propagates reliably, so mirror the fix here. */
.sp-skip { box-shadow: 0 6px 22px rgba(0, 82, 149, 0.4) !important; }

/* ════════════════════════════════════════════════════════════════════
   R570 — Premium interaction polish (bank-grade micro-interactions).
   Additive ONLY: smooth spike-ease transitions, a subtle hover-lift on
   buttons, a deeper blue glow on the primary CTA, and a crisp accent
   focus-visible ring for keyboard users. No layout, color, or font
   changes. Respects prefers-reduced-motion. luxe.css loads last so this
   propagates reliably over the CDN-cached site.css.
   ════════════════════════════════════════════════════════════════════ */
/* The base .btn already transitions transform + box-shadow (site.css), so we
   only add the hover/active effect — no transition redeclaration (which would
   drop the existing border-color/color animation). */
@media (prefers-reduced-motion: no-preference) {
  .btn:hover  { transform: translateY(-1.5px); }
  .btn:active { transform: translateY(0); }
  /* Deepen the signature blue glow on the primary CTA when hovered. */
  .btn--accent:hover {
    box-shadow: 0 12px 22px -12px rgba(0, 82, 149, .55);
  }
}
/* Keyboard focus: a crisp accent ring (never shown on a mouse click). A
   premium + accessible touch — follows each element's own corner radius. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent, #A98841);
  outline-offset: 2px;
}

/* ════════════════════════════════════════════════════════════════════
   R571 — Hero bank-grade elevation (homepage).
   (1) A soft blue "aurora" spotlight behind the device so it reads as a
       premium product shot instead of sitting on a flat card.
   (2) A trust band under the CTA: factual escrow-model statements with
       refined chips. Additive only; desktop + mobile safe.
   ════════════════════════════════════════════════════════════════════ */
.hero-product { position: relative; }
.hero-product::before {
  content: "";
  position: absolute;
  inset: -10% -8%;
  z-index: 0;
  background: radial-gradient(58% 52% at 50% 42%,
    rgba(0, 82, 149, .15), rgba(0, 82, 149, .045) 55%, transparent 72%);
  filter: blur(6px);
  pointer-events: none;
}
.hero-product > * { position: relative; z-index: 1; }

.hero-trust {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}
.hero-trust li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 600;
  color: #5E4715;
  white-space: nowrap;
}
.hero-trust__i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--lux-gold-50, #F1ECE0);
  font-size: 13px;
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   R572 — "PRIVATE TRUST" THEME FOUNDATION  ·  canonical last layer  ·  2026
   ─────────────────────────────────────────────────────────────────────────
   Premium fiduciary / escrow-bank identity (private banking / trust house).
   Replaces the Spike-Light blue accent with the ink / warm-paper / brass-gold
   "Private Trust" palette. This block loads LAST in luxe.css (which itself
   loads last on every page), so it wins the entire cascade — site.css :root,
   the AURORA !important block, the per-page <style> blocks, AND the earlier
   luxe html[data-theme] pin (this selector matches that specificity and loads
   later → wins the tie).

   STRATEGY — remap by VARIABLE, never hardcode in pages:
     1. Redefine the --lux-* primitives (luxe's own source of truth) → Private
        Trust ink/paper/gold/hairline/text/status.
     2. Redefine every LEGACY mirror primitive that site.css / AURORA / page
        styles still read (--ink-*, --copper-*, --gold-*, --aurora-gold-*,
        --iris-*, --plasma-*, --void-*, --mist-*, --slate-*, --surface-*,
        --border-*, --success/--warning/--danger-*, --accent) so the whole
        site resolves the new palette with NO blue/purple/teal leaks.
     3. Set --font-display to the Frank Ruhl Libre serif (the Hebrew+Latin
        display face, loaded via the existing Google-Fonts <link> on every
        page — see the &family=Frank+Ruhl+Libre injection in the page <head>;
        CSP already permits fonts.googleapis.com + fonts.gstatic.com).

   PALETTE (single source of truth):
     Ink (brand/dark surfaces):  brand #12222E · deep #0C1923 · soft #1B2C39
     Paper (page/app bg):        warm ivory #F6F4EF · alt #FBFAF7 · card #FFFFFF
     Gold/brass (HAIRLINES &     #A98841 · on-ink bright #C2A35E
       small labels, sparingly): · gold-text-on-light #8A6A1C
     Text on paper:              #1C2A35 · #6B7682 · faint #9AA2A9
     Text on ink:                #F4F1EA · muted #9AA7B3
     Hairlines:                  paper #E6E1D7 · ink #243643
     Status (muted/fiduciary):   secured #2F6A4F · pending #9A7B3C
                                 · error #9B2C2C · info #2A4A63
   ═══════════════════════════════════════════════════════════════════════════ */
/* :root (0,1,0) — equal specificity to site.css/luxe's other :root token blocks,
   but R572 loads LAST so it wins the tie. The data-theme variants are appended
   so an explicit theme toggle (which raises specificity to 0,1,1) is also won.
   A bare <html> (no data-theme on first paint) is covered by :root. */
:root,
html[data-theme="light"],
html[data-theme="dark"] {

  /* ── DISPLAY SERIF — gravitas via type (loaded via the page <head> link) ──
     Frank Ruhl Libre = the canonical Hebrew serif (tradition / authority).
     Body + UI stay on the existing clean sans (Heebo); mono stays mono. */
  --font-display: 'Frank Ruhl Libre', 'Heebo', Georgia, 'Times New Roman', serif;

  /* ════ luxe primitives — the Private Trust source of truth ════ */

  /* Surface ramp: paper canvas → ink (depth = hairlines, not color) */
  --lux-ink:    #12222E;   /* brand ink — mastheads, footer, dark slabs */
  --lux-ink-2:  #1B2C39;   /* ink-soft — secondary dark surface */
  --lux-ink-3:  #0C1923;   /* ink-deep — gradient base / deepest */
  --lux-ink-4:  #243643;   /* hairline on ink */

  /* Canvas — warm ivory paper */
  --lux-bg:      #F6F4EF;   /* page background (warm ivory) */
  --lux-bg-deep: #EFEBE2;   /* soft mesh base */
  --lux-surface: #FFFFFF;   /* pure card */
  --lux-tint:    #FBFAF7;   /* alt surface / subtle tint */
  --lux-sunk:    #EFEBE2;   /* sunk panel */

  /* Text on paper */
  --lux-text:   #1C2A35;   /* primary */
  --lux-text-2: #6B7682;   /* secondary (AA on paper) */
  --lux-text-3: #8A929B;   /* muted (faint #9AA2A9 nudged for AA body) */
  --lux-text-4: #B7BCC2;   /* disabled / non-text only */

  /* Text on ink — for dark mastheads / footer / statement headers.
     Exposed as tokens so app pages can reskin ink slabs by variable. */
  --text-on-ink:        #F4F1EA;   /* primary on ink */
  --text-on-ink-muted:  #9AA7B3;   /* muted on ink (AA on #12222E) */

  /* Gold / brass — HAIRLINES, small labels, marks, ornaments ONLY (sparingly).
     The "accent" family is the brass ramp; large fills are ink, not gold. */
  --lux-gold-50:  #F1ECE0;   /* pale brass tint (pill bg on paper) */
  --lux-gold-100: #E6DCC6;
  --lux-gold-200: #D8C8A4;
  --lux-gold-300: #C2A35E;   /* on-ink bright brass */
  --lux-gold:     #A98841;   /* brass accent (hairlines / marks) */
  --lux-gold-600: #8A6A1C;   /* gold text on light (AA) */
  --lux-gold-700: #6F5417;   /* deep gold text on light */
  --lux-gold-grad: linear-gradient(180deg, #1B2C39 0%, #0C1923 100%); /* primary CTA = deep ink */
  --lux-gold-sheen: linear-gradient(120deg, transparent 30%, rgba(194,163,94,0.30) 50%, transparent 70%);

  /* Status — muted, fiduciary (no candy colors) */
  --lux-ok:        #2F6A4F;   /* secured / held */
  --lux-ok-soft:   rgba(47,106,79,0.12);
  --lux-info:      #2A4A63;   /* info */
  --lux-info-soft: rgba(42,74,99,0.10);
  --lux-warn:      #9A7B3C;   /* pending */
  --lux-warn-soft: rgba(154,123,60,0.13);
  --lux-red:       #9B2C2C;   /* error */
  --lux-red-soft:  rgba(155,44,44,0.10);

  /* Hairlines — depth signal on paper */
  --lux-line:   #E6E1D7;
  --lux-line-2: #DCD6C9;
  --lux-line-3: #CDC6B6;

  /* Shadows — at most a soft 1px hairline shadow; hairlines do the work */
  --lux-sh-1: 0 1px 2px rgba(18,34,46,0.06);
  --lux-sh-2: 0 1px 2px rgba(18,34,46,0.06), 0 10px 30px -16px rgba(18,34,46,0.18);
  --lux-sh-3: 0 1px 2px rgba(18,34,46,0.07), 0 22px 50px -24px rgba(18,34,46,0.26);
  --lux-sh-gold: 0 10px 22px -14px rgba(18,34,46,0.45);
  --lux-sh-ink:  0 22px 60px rgba(12,25,35,0.28);

  /* Geometry — tighter / serious (cards 10-12 · buttons 8-9 · inputs 8) */
  --lux-r:    12px;   /* cards */
  --lux-r-lg: 12px;   /* badges / panels */
  --lux-r-xl: 14px;   /* large panels */
  --lux-r-sm: 8px;    /* inputs / small */

  /* ════ Legacy mirror primitives — keep the whole site on-palette ════ */
  --surface-bg:   #F6F4EF;
  --surface-card: #FFFFFF;
  --surface-sunk: #EFEBE2;
  --surface-tint: #FBFAF7;

  --border-soft:    #E6E1D7;
  --border-default: #DCD6C9;
  --border-strong:  #CDC6B6;

  --ink-900: #1C2A35;
  --ink-800: #243643;
  --ink-700: #33414C;
  --ink-600: #6B7682;
  --ink-500: #6B7682;
  --ink-400: #8A929B;
  --ink-300: #B7BCC2;
  --ink-200: #DCD6C9;
  --ink-100: #F1ECE0;
  --ink-050: #FBFAF7;

  /* The "copper" / "gold" / "aurora-gold" accent families → brass ramp */
  --copper:     #A98841;   /* bare alias — some pages read var(--copper, <blue>) */
  --copper-700: #6F5417;
  --copper-600: #8A6A1C;
  --copper-500: #A98841;
  --copper-400: #C2A35E;
  --copper-300: #D8C8A4;
  --copper-200: #E6DCC6;
  --copper-100: #F1ECE0;
  --copper-050: #F7F3EA;

  --gold-500: #A98841;
  --gold-600: #8A6A1C;
  --gold-700: #6F5417;
  --gold-200: #E6DCC6;
  --gold-300: #D8C8A4;
  --gold-400: #C2A35E;
  --aurora-gold-400: #C2A35E;
  --aurora-gold-500: #A98841;
  --aurora-gold-600: #8A6A1C;
  --aurora-gold-700: #6F5417;

  /* Iris / Plasma (legacy purple families) → fold onto the brass/ink system
     (no purple anywhere in Private Trust). */
  --iris-100: #F1ECE0;
  --iris-400: #C2A35E;
  --iris-500: #A98841;
  --iris-600: #8A6A1C;
  --iris-700: #6F5417;
  --plasma-300: #D8C8A4;
  --plasma-400: #C2A35E;
  --plasma-500: #A98841;
  --plasma-600: #8A6A1C;

  /* AURORA "void" / "mist" / "slate" base primitives → paper + ink text */
  --void-950: #F6F4EF;
  --void-900: #FBFAF7;
  --void-850: #EFEBE2;
  --mist-50:  #1C2A35;
  --mist-100: #243643;
  --mist-200: #33414C;
  --mist-300: #6B7682;
  --mist-400: #8A929B;
  --mist-500: #7A828B;

  --slate-900: #1C2A35;
  --slate-800: #243643;
  --slate-700: #33414C;
  --slate-600: #6B7682;
  --slate-500: #6B7682;
  --slate-400: #8A929B;
  --slate-300: #CDC6B6;
  --slate-200: #DCD6C9;
  --slate-100: #FBFAF7;
  --slate-50:  #EFEBE2;
  --aurora-bg:            #F6F4EF;
  --aurora-bg-deep:       #EFEBE2;
  --aurora-surface:       #FFFFFF;
  --aurora-elev:          #FFFFFF;
  --aurora-border:        #E6E1D7;
  --aurora-border-strong: #CDC6B6;

  /* Semantic status mirrors (muted fiduciary) */
  --success-700: #255A41;
  --success-500: #2F6A4F;
  --success-100: rgba(47,106,79,0.12);
  --warning-700: #7E6430;
  --warning-500: #9A7B3C;
  --warning-100: rgba(154,123,60,0.13);
  --danger-700:  #842525;
  --danger-500:  #9B2C2C;
  --danger-100:  rgba(155,44,44,0.10);

  /* Single accent token some R570/R571 rules read */
  --accent: #A98841;

  /* "Own message" accent tint — consumed by the deal-chat bubble (deal.js)
     via var(--lux-accent-tint/-line) with a blue fallback. Define them here so
     the bubble resolves to a warm brass tint instead of the legacy blue. */
  --lux-accent-tint: #F1ECE0;   /* pale brass bubble bg */
  --lux-accent-line: #E6DCC6;   /* brass bubble hairline */
}

/* ── R572 · Canvas + base type ────────────────────────────────────────────
   Warm-ivory paper everywhere (beats the white !important in the earlier
   Spike block + AURORA void), ink body text, serif display headings. */
html, html[data-theme="light"], html[data-theme="dark"] { background: #F6F4EF !important; }
html[data-theme="light"] body, html[data-theme="dark"] body, body {
  background: #F6F4EF !important;
  color: #1C2A35 !important;
}
/* Mastheads / dark slabs read warm paper text colours on ink. */
h1, h2, h3, h4, h5 { font-family: var(--font-display); }

/* ── R572 · GOLD as a RESTRAINED accent ───────────────────────────────────
   The earlier Spike layer painted the primary CTA + many surfaces in a blue
   GRADIENT. Re-skin those to the deep-INK button (gold is hairlines/marks
   only, never a large fill). --lux-gold-grad now resolves to deep ink, so the
   .btn--primary / .btn--accent rules above inherit the ink slab automatically;
   here we just refine the text + add the signature gold hairline. */
.btn--primary,
.btn--accent,
body [data-auth-modal] .am-submit,
.site-header .nav-actions .btn--primary,
.site-header .nav-actions .btn--primary[data-auth="signup"],
.site-header .nav-actions .btn--accent[data-auth="signup"],
body .site-header .nav-actions .btn--primary[data-auth="signup"],
body .site-header .nav-actions .btn--accent[data-auth="signup"] {
  background: linear-gradient(180deg, #1B2C39 0%, #0C1923 100%) !important;
  color: #F4F1EA !important;
  border: 1px solid #243643 !important;
  box-shadow: 0 1px 0 rgba(194,163,94,0.18) inset, 0 10px 22px -14px rgba(18,34,46,0.5) !important;
}
.btn--primary:hover:not(:disabled),
.btn--accent:hover:not(:disabled),
body [data-auth-modal] .am-submit:hover:not(:disabled),
.site-header .nav-actions .btn--primary:hover {
  box-shadow: 0 1px 0 rgba(194,163,94,0.28) inset, 0 14px 26px -12px rgba(18,34,46,0.58) !important;
}

/* Brand mark + section eyebrow tick + nav underline → brass (was blue). */
.eyebrow::before { background: linear-gradient(90deg, #A98841, #C2A35E) !important; }
.site-header .nav-links a::after,
.site-header .nav-links a.active::after {
  background: linear-gradient(90deg, #A98841, #C2A35E) !important;
  background-color: #A98841 !important;
}
.site-header .nav-links a.active,
.site-header .nav-links .nav-has-menu > a.active { color: #6F5417 !important; -webkit-text-fill-color: #6F5417 !important; }
.site-header .nav-links > a:hover,
.site-header .nav-links .nav-has-menu > a:hover { color: #8A6A1C !important; -webkit-text-fill-color: #8A6A1C !important; }

/* Dark slabs (hero / section--dark / cta-banner / footer) keep ink bg but get
   warm-paper text + a thin brass hairline (the "certificate" cue). */
.hero, .hero--v2,
.section.section--dark,
.cta-banner,
.site-footer,
body .page-head, body .page-head--dark {
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(194,163,94,0.10), transparent 55%),
    linear-gradient(155deg, #1B2C39 0%, #0C1923 75%) !important;
  color: #F4F1EA !important;
}
.hero .hero-sub, .hero--v2 .hero-sub,
.section.section--dark .stat-cell .l,
.cta-banner p { color: #9AA7B3 !important; -webkit-text-fill-color: #9AA7B3 !important; }
.site-footer, .footer-bottom { color: #9AA7B3 !important; }
/* The emphasis word in the hero headline → brass (a single, confident mark). */
.hero h1 .gold, .hero--v2 h1 .gold,
.hero h1 [data-vault-reveal], .hero--v2 h1 [data-vault-reveal],
.hero h1 .accent, .hero h1 em, .hero h1 i {
  background: linear-gradient(180deg, #C2A35E 0%, #A98841 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
}

/* ── R572 · App-page light statement surfaces stay clean (ink/brass, not blue)
   R573: the deal-head masthead is now a DARK ink slab — its amount takes the
   bright on-ink brass (AA on #12222E), not the light-bg deep gold. */
.deal-head .amt .n { color: #C2A35E !important; -webkit-text-fill-color: #C2A35E !important; }
.prof-avatar { background: #F1ECE0 !important; color: #8A6A1C !important; border-color: #E6DCC6 !important; }

/* ── R572 · Selection / markers / focus ring → brass ─────────────────────── */
::selection { background: rgba(169,136,65,0.22); color: #1C2A35; }
li::marker { color: #A98841; }
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #A98841 !important;
  outline-offset: 2px;
}
input:focus, textarea:focus, select:focus {
  border-color: #A98841 !important;
  box-shadow: 0 0 0 3px rgba(169,136,65,0.18) !important;
}

/* ── R572 · Geometry — tighten the bubbly Spike rounds to serious radii ──── */
.card, .adm-card, .adm-kpi, .adm-nav,
.trust-tile, .feature-card, .elev-2, .elev-3 { border-radius: 12px !important; }
.btn { border-radius: 9px !important; }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
select, textarea { border-radius: 8px !important; }

/* ── R572 · Kill the remaining LITERAL-blue holdouts (rules that hardcode the
   old #A98841 ramp instead of reading a variable, so the remap above can't
   reach them). All → ink/brass, matching the Private Trust system. ──────── */

/* Floating action cluster (Sofi help · accessibility · privacy "הבנתי") →
   quiet ink discs with a brass hairline (no big colorful FABs). */
.sp-help-btn, .a11y-fab, #safepay-deal-help-btn, .pb-btn {
  background: linear-gradient(160deg, #1B2C39 0%, #0C1923 100%) !important;
  border: 1px solid rgba(169,136,65,0.50) !important;
  box-shadow: 0 10px 22px -14px rgba(12,25,35,0.55) !important;
  color: #F4F1EA !important;
}

/* Deal-stack depth tints → warm paper steps (were blue tints). */
.deal-stack .deal-card.dc-back  { background: #FBFAF7 !important; }
.deal-stack .deal-card.dc-back2 { background: #EFEBE2 !important; }
.deal-stack .deal-card.dc-front { border-color: rgba(169,136,65,0.32) !important; }
.deal-card.dc-front { border-color: rgba(169,136,65,0.28) !important; }
/* calc-result lives on PAPER → deep gold; the deal-head amount lives on the
   R573 dark ink masthead → bright on-ink brass (kept out of this grouping). */
.calc-result .row .v, .calc-result [data-calc-fee] { color: #8A6A1C !important; -webkit-text-fill-color: #8A6A1C !important; }
.deal-head .amt .n { color: #C2A35E !important; -webkit-text-fill-color: #C2A35E !important; }

/* Scroll-progress bar · 404 numeral · in-page search → brass/ink. */
.scroll-progress__fill {
  background: linear-gradient(90deg, #A98841, #C2A35E) !important;
  box-shadow: 0 0 10px rgba(169,136,65,0.45) !important;
}
body .f-num {
  background: linear-gradient(135deg, #C2A35E 0%, #A98841 50%, #8A6A1C 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  color: transparent !important;
  text-shadow: 0 0 80px rgba(169,136,65,0.25) !important;
}
.f-search-list a:hover { background: #12222E !important; color: #F4F1EA !important; border-color: #12222E !important; }
.sp-skip { box-shadow: 0 6px 22px rgba(18,34,46,0.4) !important; }

/* Topbar + theme-light nav hover literals → brass. */
.topbar a:hover, .topbar a:hover *,
html[data-theme="light"] .nav-links a:hover { color: #8A6A1C !important; -webkit-text-fill-color: #8A6A1C !important; }

/* Status / trust badges + chips → brass-tint pill (were blue-tint). */
.aurora-trust-badge, .badge--trust,
.chip--copper, .status-pill {
  background: #F1ECE0 !important;
  color: #6F5417 !important;
  border: 1px solid #E6DCC6 !important;
}
.np-badge.active, .np-next.you { color: #6F5417 !important; background: #F1ECE0 !important; }

/* The hero "aurora" spotlight + product glow → warm brass haze (was blue). */
.hero-product::before {
  background: radial-gradient(58% 52% at 50% 42%,
    rgba(169,136,65,.14), rgba(169,136,65,.05) 55%, transparent 72%) !important;
}
.hero-trust li { color: #C2A35E !important; }
.hero-trust__i { background: rgba(194,163,94,0.16) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   R574 — "PRIVATE TRUST" MARKETING LANDING  ·  flagship homepage masthead
   ─────────────────────────────────────────────────────────────────────────
   Builds on the R572 token foundation (ink / warm-paper / brass + Frank Ruhl
   Libre serif). Reskins the HOMEPAGE marketing surface — the hero masthead gets
   the private-bank "certificate" treatment (deep ink block, serif display
   headline, a thin BRASS hairline + tiny rotated-square gold ornament, a
   ledger-style trust band), and the problem / how-it-works / comparison /
   testimonial / credibility / activity sections are tightened to paper +
   hairlines + brass restraint with serif headings and tabular figures.

   CSS-ONLY · reads the R572 variables · no markup or page-script changes. Every
   selector targets existing classes. Literal-blue/red holdouts that the token
   remap can't reach (hardcoded hexes in site.css) are corrected here. Homepage-
   scoped via body[data-screen-label="Homepage"] where a rule could otherwise
   leak to a shared component on another page. Disjoint from the R573 block above
   (which owns pricing/security/transparency .page-head/.pr-*/.tr-* selectors).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · MASTHEAD — deep-ink certificate block ─────────────────────────────
   R572 already paints .hero--v2 a deep ink gradient with a faint brass corner
   glow. Add the engraving cues: a thin brass hairline along the TOP edge of the
   masthead + the signature serif headline. Depth stays hairline-led. */
body[data-screen-label="Homepage"] .hero,
body[data-screen-label="Homepage"] .hero--v2 {
  position: relative;
  border-bottom: 1px solid #243643 !important;
}
body[data-screen-label="Homepage"] .hero--v2::after {
  content: "";
  position: absolute; inset-inline: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(194,163,94,0.85) 18%, rgba(194,163,94,0.85) 82%, transparent) !important;
  pointer-events: none; z-index: 2; opacity: 1 !important;
}
body[data-screen-label="Homepage"] .hero h1,
body[data-screen-label="Homepage"] .hero--v2 h1 {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  letter-spacing: -0.018em !important;
  line-height: 1.12 !important;
  color: #F4F1EA !important;
  -webkit-text-fill-color: #F4F1EA !important;
}
body[data-screen-label="Homepage"] .hero--v2 .hero-sub {
  color: #B9C2CC !important;
  -webkit-text-fill-color: #B9C2CC !important;
  font-family: 'Heebo', system-ui, sans-serif;
}

/* ── 2 · CERTIFICATE EYEBROW — tiny rotated-square brass ornament ──────────
   A 6px gold diamond (square rotated 45°) capping a thin brass rule before the
   masthead headline — the "engraving / certificate" motif. On the hero column
   wrapper's ::before/::after so NO markup is needed. RTL-correct: the rule
   fades from the leading (right) edge; the diamond caps it. */
body[data-screen-label="Homepage"] .hero--v2 .hero-grid > div:first-child {
  position: relative;
}
body[data-screen-label="Homepage"] .hero--v2 .hero-grid > div:first-child::before {
  content: "";
  display: block;
  width: 56px; height: 1px;
  margin-bottom: 22px;
  background: linear-gradient(270deg, rgba(194,163,94,0.9), rgba(169,136,65,0)) !important;
}
body[data-screen-label="Homepage"] .hero--v2 .hero-grid > div:first-child::after {
  content: "";
  position: absolute; top: -2px; inset-inline-start: 56px;
  width: 6px; height: 6px;
  background: linear-gradient(135deg, #C2A35E, #A98841);
  transform: rotate(45deg);
  box-shadow: 0 0 0 1px rgba(244,241,234,0.10);
}

/* ── 3 · TRUST BAND — fiduciary ledger row under the CTA ───────────────────*/
body[data-screen-label="Homepage"] .hero-trust {
  margin-top: 26px !important;
  padding-top: 20px;
  border-top: 1px solid rgba(194,163,94,0.22);
  gap: 8px 22px !important;
}
body[data-screen-label="Homepage"] .hero-trust li {
  color: #CBD2DA !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  letter-spacing: .01em;
}
body[data-screen-label="Homepage"] .hero-trust__i {
  background: rgba(194,163,94,0.14) !important;
  box-shadow: inset 0 0 0 1px rgba(194,163,94,0.34);
}
/* Hero product device frame → warm paper + brass hairline (was a blue ring). */
body[data-screen-label="Homepage"] .hero-product .hvideo {
  box-shadow: 0 0 0 1px #E6E1D7, 0 1px 2px rgba(18,34,46,.06), 0 22px 50px -24px rgba(18,34,46,.30) !important;
  background: #FBFAF7 !important;
  border-radius: 14px !important;
}

/* ── 4 · "THE PROBLEM" — literal-blue/red holdout → ink certificate band ───
   site.css hardcodes #0F1530 + a blue radial + a candy red (#FF8088). Re-skin
   to the deep-ink slab + a thin brass top hairline + MUTED fiduciary warm-red. */
.problem {
  background:
    radial-gradient(120% 90% at 12% -10%, rgba(194,163,94,0.08), transparent 55%),
    linear-gradient(155deg, #12222E 0%, #0C1923 78%) !important;
  border-top: 1px solid rgba(194,163,94,0.30);
}
.problem::before { background: none !important; }
.problem-head h2 { font-family: var(--font-display) !important; font-weight: 600 !important; letter-spacing: -0.02em !important; }
.problem-head h2 .danger { color: #D98A8A !important; }   /* muted warm-red, AA on ink */
.problem-head .lede { color: #B9C2CC !important; }
.p-stat { border-inline-end-color: rgba(244,241,234,0.10) !important; }
.problem-stats { border-color: rgba(244,241,234,0.12) !important; }
.p-stat .label { color: #9AA7B3 !important; letter-spacing: .12em; }
.p-stat .v { font-family: var(--font-display) !important; color: #F4F1EA !important; font-variant-numeric: tabular-nums; }
.p-stat .v.danger { color: #D98A8A !important; }
.p-stat .d { color: #B0BAC4 !important; }
.p-stat .src { color: #8A97A3 !important; }
.problem-foot { color: #B0BAC4 !important; }
.problem-foot .turn { font-family: var(--font-display) !important; color: #F4F1EA !important; }
.problem-foot .arrow { background: rgba(194,163,94,0.55) !important; }

/* ── 5 · HOW IT WORKS — serif headings + brass step numerals + icon tiles ──*/
.steps .step h3 { font-family: var(--font-display) !important; font-weight: 600 !important; letter-spacing: -0.015em; }
.steps .step .num { color: #6F5417 !important; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.steps .step .icon-tile {
  background: #F1ECE0 !important;
  color: #8A6A1C !important;
  border: 1px solid #E6DCC6 !important;
}

/* ── 6 · COMPARISON LEDGER — paper rows, ink "recommended" column, brass cue ─
   site.css tints the SafePay column a literal blue (rgba(0,82,149,.06)) → brass. */
.compare-row .cell.sp { background: rgba(169,136,65,0.07) !important; }
.compare-head .cell.sp { background: #12222E !important; color: #F4F1EA !important; }
.compare-head .cell.sp::after { background: #A98841 !important; color: #12222E !important; }
.compare-row .cell.crit { font-family: var(--font-display) !important; font-weight: 600 !important; }
.compare .cell { font-variant-numeric: tabular-nums; }
.compare-row .cell .mark.yes { background: rgba(47,106,79,0.12) !important; color: #2F6A4F !important; }
.compare-row .cell .mark.no  { background: rgba(155,44,44,0.10) !important; color: #9B2C2C !important; }
.compare-row .cell .mark.mid { background: rgba(154,123,60,0.14) !important; color: #7E6430 !important; }

/* ── 7 · USE CASES + FREE TOOLS — serif card titles + tabular figures ──────*/
.usecase h3 { font-family: var(--font-display) !important; font-weight: 600 !important; letter-spacing: -0.012em; }
.usecase .stat .v { color: #6F5417 !important; font-variant-numeric: tabular-nums; }

/* ── 8 · BUYER/SELLER STATEMENT CARDS — ledger rows, tabular money ─────────*/
.feature-row .body h3 { font-family: var(--font-display) !important; font-weight: 600 !important; letter-spacing: -0.018em; }
.mini-deal { font-variant-numeric: tabular-nums; }
.mini-deal .row .v,
.mini-deal .row .total { font-family: var(--font-mono, 'JetBrains Mono'), monospace; font-variant-numeric: tabular-nums; }
.note--success { color: #2F6A4F !important; }

/* ── 9 · TESTIMONIAL WALL — ink feature card with brass hairline + tag ─────*/
.voice .quote { font-family: var(--font-display) !important; }
.voice--lg { border: 1px solid #243643 !important; }
.voice--lg .deal-tag {
  background: rgba(194,163,94,0.16) !important;
  color: #C2A35E !important;
  border-color: rgba(194,163,94,0.30) !important;
}
.voice .deal-tag {
  background: #F1ECE0 !important;
  color: #6F5417 !important;
  border-color: #E6DCC6 !important;
}
.voice--lg .stars, .voice .stars { color: #C2A35E !important; }

/* ── 10 · CREDIBILITY WALL — serif cert titles, masked mono reference line ──*/
.cert .h { font-family: var(--font-display) !important; font-weight: 600 !important; }
.cert .id {
  font-family: var(--font-mono, 'JetBrains Mono'), monospace;
  letter-spacing: .02em;
  color: #6B7682 !important;
}

/* ── 11 · STATS-DARK + AURORA badge — serif on ink, brass badge ────────────*/
.section.section--dark h2 { font-family: var(--font-display) !important; font-weight: 600 !important; }
.section.section--dark .stat-cell .v { font-family: var(--font-display) !important; font-variant-numeric: tabular-nums; }
.aurora-trust-badge {
  background: #F1ECE0 !important;
  color: #6F5417 !important;
  border: 1px solid #E6DCC6 !important;
  font-weight: 600;
}

/* ── 12 · ACTIVITY TICKER — quiet brass "new" / secured-green "released" ───*/
.activity-headline .num { font-family: var(--font-display) !important; }
.activity-item .tag    { color: #6F5417 !important; background: #F1ECE0 !important; }
.activity-item .tag.t-rel { color: #2F6A4F !important; background: rgba(47,106,79,0.12) !important; }
.activity-item .tag.t-new { color: #33414C !important; background: #FBFAF7 !important; }
.activity-item .amt { font-family: var(--font-mono, 'JetBrains Mono'), monospace; color: #1C2A35 !important; }

/* ── 13 · CTA BANNER — ink slab, serif headline, brass eyebrow ────────────*/
.cta-banner h2 { font-family: var(--font-display) !important; font-weight: 600 !important; }
.cta-banner .eyebrow--light { color: #C2A35E !important; }

/* ── 14 · Section eyebrows on PAPER — brass label (pin so no legacy leak) ──*/
body[data-screen-label="Homepage"] .section .eyebrow--rule:not(.eyebrow--light) {
  color: #6F5417 !important;
  font-weight: 600;
  letter-spacing: .08em;
}

/* ── 15 · TRUST STRIP (4 guarantees) — serif titles, brass icon discs ──────*/
.trust-strip__title { font-family: var(--font-display) !important; font-weight: 600 !important; }
.trust-strip__ico {
  background: #F1ECE0 !important;
  border: 1px solid #E6DCC6 !important;
}

/* ── 16 · Mobile: ease the ornament spacing so it doesn't crowd the H1. ────*/
@media (max-width: 980px) {
  body[data-screen-label="Homepage"] .hero--v2 .hero-grid > div:first-child::before { margin-bottom: 18px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   R573 — "PRIVATE TRUST" surface pass · PRICING/FEES + SECURITY/TRANSPARENCY
   ─────────────────────────────────────────────────────────────────────────
   Targeted, additive layer on top of the R572 token foundation. The token
   remap already carries most of these pages onto ink/paper/brass; this block
   handles the few surfaces that (a) read the un-remapped legacy --sapphire-*
   family (a literal blue that R572 could not reach without touching every
   blue consumer site-wide), or (b) deserve the bespoke "bank" treatment —
   statement/ledger tables, a certificate ornament on the masthead, and a
   featured pricing tier rendered as a deep-ink "metal card".

   Scope: marketing pages only (body:not([data-app="1"])). Numbers / copy /
   claims are never touched — STYLING ONLY. luxe.css loads last, so these win
   over the site.css AURORA block.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · Page-head masthead — engraving "certificate" ornament ─────────────
   A thin brass hairline + a tiny 6px gold diamond (a square rotated 45°) under
   the eyebrow on the ink masthead, echoing a trust-certificate seal. Applied to
   the pricing/security mastheads (.page-head). Pure ::after, no markup change. */
body:not([data-app="1"]) .page-head .container { position: relative; }
body:not([data-app="1"]) .page-head .eyebrow,
body:not([data-app="1"]) .page-head .eyebrow--light {
  color: #C2A35E !important;
  font-weight: 500;
  letter-spacing: 0.18em;
}
body:not([data-app="1"]) .page-head h1 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  font-weight: 600;
}
body:not([data-app="1"]) .page-head h1::after {
  content: "";
  display: block;
  width: 7px; height: 7px;
  margin-top: 18px;
  background: linear-gradient(135deg, #C2A35E, #A98841);
  transform: rotate(45deg);
  box-shadow: 0 0 0 1px rgba(194,163,94,0.35);
}
/* The masthead lede reads warm-paper-muted on the ink slab. */
body:not([data-app="1"]) .page-head p,
body:not([data-app="1"]) .page-head .lede {
  color: #9AA7B3 !important;
  -webkit-text-fill-color: #9AA7B3 !important;
}

/* ── 2 · PRICING — featured tier as a deep-INK "metal" card ─────────────────
   site.css's AURORA block paints .tier--featured in the legacy --sapphire-*
   blue (gradient bg, blue border, blue glow, blue heading/rate/ticks) which
   R572's token remap can't reach (literal sapphire vars). Re-skin it to the
   signature Private Trust masthead: ink slab · warm-paper text · a single
   brass rate + brass ticks + a brass "הכי פופולרי" seal. Higher specificity
   than the AURORA rules and loads later → wins without !important wars where
   possible (kept !important only to beat the AURORA !important). */
.tier--featured,
.tier.tier--featured {
  background:
    radial-gradient(120% 80% at 85% -10%, rgba(194,163,94,0.12), transparent 55%),
    linear-gradient(180deg, #1B2C39 0%, #0C1923 100%) !important;
  border: 1px solid #243643 !important;
  box-shadow:
    0 1px 0 rgba(194,163,94,0.18) inset,
    0 22px 50px -24px rgba(12,25,35,0.45) !important;
  color: #F4F1EA !important;
}
.tier--featured .tag,
.tier.tier--featured .tag {
  background: linear-gradient(135deg, #C2A35E, #A98841) !important;
  color: #12222E !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
}
.tier--featured h3,
.tier.tier--featured h3 {
  color: #F4F1EA !important;
  font-family: var(--font-display);
}
.tier--featured .sub,
.tier.tier--featured .sub { color: #9AA7B3 !important; }
.tier--featured .price .rate,
.tier.tier--featured .price .rate {
  color: #C2A35E !important;
  font-variant-numeric: tabular-nums;
}
.tier--featured .price .of,
.tier.tier--featured .price .of { color: #9AA7B3 !important; }
.tier--featured .min,
.tier.tier--featured .min { color: #8A929B !important; }
.tier--featured li,
.tier.tier--featured li { color: rgba(244,241,234,0.92) !important; }
.tier--featured li.off,
.tier.tier--featured li.off { color: rgba(244,241,234,0.42) !important; }
.tier--featured li .tick,
.tier.tier--featured li .tick {
  background: rgba(194,163,94,0.22) !important;
  border: 1px solid rgba(194,163,94,0.45) !important;
}
.tier--featured li .tick svg,
.tier.tier--featured li .tick svg { stroke: #C2A35E !important; }

/* The non-featured tiers: serious radius, hairline depth, brass rate figure,
   tabular numerals (a precise "statement" figure, not a marketing splash). */
body:not([data-app="1"]) .tier {
  border-radius: 12px;
  box-shadow: var(--lux-sh-1);
}
body:not([data-app="1"]) .tier:not(.tier--featured) .price .rate {
  color: #6F5417;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
body:not([data-app="1"]) .tier h3 { font-family: var(--font-display); }
/* Non-featured "popular" seal also brass (in case markup ever moves it). */
body:not([data-app="1"]) .tier .tag {
  background: linear-gradient(135deg, #A98841, #C2A35E) !important;
  color: #12222E !important;
}

/* ── 3 · PRICING — fee calculator as a "statement" panel ────────────────────
   The result panel is already an ink slab (token-driven). Refine the figures to
   tabular ledger numerals + brass values, and pin the brass corner glow (was a
   warm amber radial — keep it brass for cohesion). */
.calc-result { box-shadow: var(--lux-sh-2) !important; }
.calc-result::before {
  background: radial-gradient(circle, rgba(194,163,94,0.18), transparent 65%) !important;
}
.calc-result .big,
.calc-result .row .v,
.calc-result [data-calc-amt],
.calc-result [data-calc-fee] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.calc-result .row .v,
.calc-result [data-calc-fee] { color: #C2A35E !important; -webkit-text-fill-color: #C2A35E !important; }
/* The two inline status figures on the ink panel → muted fiduciary tones
   (secured-green / muted-red) instead of candy green/pink. */
.calc-result [data-calc-risk] { color: #E7A6A6 !important; }
.calc-result .row .v[style*="4ade80"],
.calc-result .row .v[style*="success"] { color: #8FD3B6 !important; }
.calc-result .footnote { color: rgba(244,241,234,0.5) !important; }
.calc-result [data-calc-hint] { color: #C2A35E !important; }
/* Calc preset chips: serious 8px, ink "on" state with a brass hairline. */
body:not([data-app="1"]) .calc-presets button {
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
}
body .calc-presets button.on {
  background: #12222E !important;
  border-color: #12222E !important;
  color: #F4F1EA !important;
}
/* Slider fill + thumb → ink (token already resolves; pin for the literal
   thumb border that reads --ink-900). */
.calc-slider .fill { background: #12222E !important; }
.calc-slider .thumb { border-color: #12222E !important; }

/* ── 4 · PRICING — comparison table as a ledger ────────────────────────────
   Hairline rows, brass SafePay column, tabular figures, muted fiduciary
   yes/no. The SafePay highlight column uses the pale brass tint. */
body:not([data-app="1"]) .cmp {
  border-radius: 12px;
  font-variant-numeric: tabular-nums;
  box-shadow: var(--lux-sh-1);
}
.cmp thead th.sp { background: #F1ECE0 !important; color: #6F5417 !important; }
.cmp tbody td.sp { background: #F7F3EA !important; color: #6F5417 !important; }
.cmp .yes { color: #2F6A4F !important; }   /* secured-green */
.cmp .no  { color: #9B2C2C !important; }   /* muted error  */
.cmp tbody td.sp { font-weight: 600; }

/* ── 5 · PRICING/SECURITY — FAQ open state → brass-tint (was sapphire) ──────
   site.css AURORA tints the open accordion with --sapphire-50/300 (a literal
   blue). Re-skin to the warm brass-tint so it stays on-palette. */
details.faq-item[open] summary.faq-q {
  background: #FBFAF7 !important;
  border-color: rgba(169,136,65,0.35) !important;
}
body:not([data-app="1"]) .faq-q,
body:not([data-app="1"]) summary.faq-q { font-weight: 500; }

/* ── 6 · SECURITY/TRANSPARENCY — trust + certificate cards ──────────────────
   Brass icon tiles (token already resolves), serious radius, hairline depth,
   and a serif card heading for gravitas. The help-card "certificate" tiles get
   a brass status-word treatment on the "arrow" label. */
body:not([data-app="1"]) .trust-tile,
body:not([data-app="1"]) .help-card {
  border-radius: 12px;
  box-shadow: var(--lux-sh-1);
}
body:not([data-app="1"]) .trust-tile h3,
body:not([data-app="1"]) .help-card h3 {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}
body:not([data-app="1"]) .icon-tile {
  background: #F1ECE0 !important;
  border: 1px solid #E6DCC6 !important;
  color: #8A6A1C !important;
  border-radius: 10px;
}
/* Certificate "status word" (בתהליך / בתכנון / צפה...) → small brass label. */
body:not([data-app="1"]) .help-card .arrow {
  color: #8A6A1C;
  font-weight: 600;
  letter-spacing: 0.01em;
}
body:not([data-app="1"]) .help-card .arrow a { color: #8A6A1C !important; }

/* Security "feature-row" insurance figure + arbiter avatars → ink/brass.
   The ₪10,000,000 ceiling is a key masthead figure: serif display, ink,
   tabular. The arbiter mini-cards already use tokens (paper + hairline). */
body:not([data-app="1"]) .feature-row .body h3 { font-family: var(--font-display); }
.avatar--ink     { background: #12222E !important; }
.avatar--success { background: #2F6A4F !important; }

/* ── 7 · TRANSPARENCY — live-stats "ledger" + secured pledge ────────────────
   The inline <style> on transparency.html already reads tokens (brass via
   --copper-500, ink via --ink-900). Pin the brass stat figures + the secured
   pledge to the muted fiduciary green, and make the headline serif/ink.
   Scoped by the page's own classes so it can't touch other pages. */
.tr-eyebrow { color: #A98841 !important; letter-spacing: 0.22em; }
.tr-title { font-family: var(--font-display) !important; color: #1C2A35 !important; font-weight: 600 !important; }
.tr-title em { color: #8A6A1C !important; }
.tr-stat { border-radius: 12px !important; box-shadow: var(--lux-sh-1) !important; }
.tr-stat .num { color: #6F5417 !important; font-variant-numeric: tabular-nums; }
.tr-note, .tr-pledge { border-radius: 12px !important; }
.tr-pledge {
  border: 1px solid rgba(47,106,79,0.40) !important;
  background: linear-gradient(135deg, rgba(47,106,79,0.06), transparent) !important;
}
.tr-pledge h3 { color: #2F6A4F !important; }
.tr-pledge a, .tr-note a { color: #8A6A1C !important; }
/* The "כסף שאבד · ₪0" + secured stat keep the secured-green (muted). */
.tr-grid .tr-stat .num[style*="1FA588"],
.tr-grid .tr-stat .num[style*="success"] { color: #2F6A4F !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   R575 — "PRIVATE TRUST" consistency SWEEP · remaining marketing pages
   ─────────────────────────────────────────────────────────────────────────
   The R572 token foundation carries about / contact / faq / privacy / terms /
   accessibility entirely onto the ink/paper/brass palette by VARIABLE — those
   pages have no page-specific colour left (their only literal blue is the inline
   brand-mark SVG, which the .brand-mark override already re-skins to ink).

   This block reaches the few pages that hardcode a literal blue/teal/pink in
   their own inline <style> (a value the token remap cannot reach): portfolio,
   status, press, bounty, referrals, and the arbitration timeline. Every fix is
   scoped to that page's own classes, loads LAST (wins the cascade), and only
   touches colour/geometry — never copy, claims, numbers, or page <script>.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 0 · Brand-mark SVG — neutralise the faint blue stroke ring ──────────────
   The foundation already paints the mark's solid circle ink; its second circle
   carries a literal blue stroke (#7A5C14 @ .15) on every page's header/footer.
   Pin every brand-mark circle's stroke to a faint brass so no blue lingers. */
.brand-mark circle { stroke: rgba(194,163,94,0.20) !important; }
.brand-mark circle:first-of-type { fill: #12222E !important; stroke: #243643 !important; }

/* ── 1 · ARBITRATION — process timeline → ink rail + brass markers ───────────
   The .arb-step connector/marker read var(--copper, #A98841); --copper now
   resolves brass, but the rgba(0,82,149,…) literals (gradient tail, marker
   shadow, value-date pill bg) stay blue. Re-skin to ink rail · brass node. */
.arb-step::before {
  background: linear-gradient(to bottom, #A98841, rgba(169,136,65,0.16)) !important;
}
.arb-step .marker {
  background: linear-gradient(160deg, #1B2C39 0%, #0C1923 100%) !important;
  color: #C2A35E !important;
  box-shadow: 0 4px 14px rgba(12,25,35,0.30), 0 0 0 1px rgba(194,163,94,0.40) !important;
}
.arb-step h3 { font-family: var(--font-display); }
.arb-step .when {
  color: #6F5417 !important;
  background: #F1ECE0 !important;
  border: 1px solid #E6DCC6 !important;
  font-variant-numeric: tabular-nums;
}

/* ── 2 · PORTFOLIO — masthead → deep-INK certificate slab (was blue grad) ────
   .pf-head hardcodes linear-gradient(#A98841→#4A3613). Swap for the signature
   ink masthead + a thin brass hairline; KPIs already read tokens (brass/paper). */
.pf-head {
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(194,163,94,0.10), transparent 55%),
    linear-gradient(155deg, #1B2C39 0%, #0C1923 75%) !important;
  border: 1px solid #243643 !important;
  box-shadow: 0 1px 0 rgba(194,163,94,0.18) inset, var(--lux-sh-2) !important;
}
.pf-head h1 { font-family: var(--font-display); letter-spacing: -0.02em; }
.pf-kpi .num { font-feature-settings: "tnum" 1, "lnum" 1; }

/* ── 3 · STATUS — health dots + hero tints → MUTED fiduciary status ──────────
   The page reads the legacy candy ramp (#2BB596 / #E8862A / #F0476A). Map to
   the Private Trust status set: secured #2F6A4F · pending #9A7B3C · error
   #9B2C2C, with matching soft tints on the hero + dot halos. */
.st-hero.ok   { background: linear-gradient(135deg, rgba(47,106,79,0.10),  var(--surface-card)) !important; border-color: rgba(47,106,79,0.40)  !important; }
.st-hero.warn { background: linear-gradient(135deg, rgba(154,123,60,0.10), var(--surface-card)) !important; border-color: rgba(154,123,60,0.40) !important; }
.st-hero.err  { background: linear-gradient(135deg, rgba(155,44,44,0.10),  var(--surface-card)) !important; border-color: rgba(155,44,44,0.40)  !important; }
.st-svc .dot.ok   { background: #2F6A4F !important; box-shadow: 0 0 0 4px rgba(47,106,79,0.18)  !important; }
.st-svc .dot.warn { background: #9A7B3C !important; box-shadow: 0 0 0 4px rgba(154,123,60,0.18) !important; }
.st-svc .dot.err  { background: #9B2C2C !important; box-shadow: 0 0 0 4px rgba(155,44,44,0.18)  !important; }
.st-hero h1 { font-family: var(--font-display); }

/* ── 4 · PRESS — dark logo card + pull-quote → ink / brass (were blue) ───────
   .pr-logo.dark = #4A3613 + blue border; .pr-quote = blue-tint wash. */
.pr-logo.dark {
  background: linear-gradient(160deg, #1B2C39 0%, #0C1923 100%) !important;
  border: 1px solid #243643 !important;
}
.pr-logo.dark .lbl { color: rgba(244,241,234,0.78) !important; }
.pr-quote {
  background: linear-gradient(135deg, rgba(169,136,65,0.07), transparent) !important;
  border-inline-start: 3px solid #A98841 !important;
}
.pr-quote, .pr-fact dt { font-family: var(--font-display); }

/* ── 5 · BOUNTY — severity ramp → fiduciary status ladder (kept distinct) ────
   crit→error red · high→brass(gold) · med→info ink-blue · low→secured green.
   Distinguishable, but on-palette (no candy pink / sky-blue / mint). */
.bb-tier.crit { border-color: rgba(155,44,44,0.45)  !important; background: rgba(155,44,44,0.05)  !important; }
.bb-tier.crit .level { color: #9B2C2C !important; }
.bb-tier.high { border-color: rgba(169,136,65,0.45) !important; background: rgba(169,136,65,0.06) !important; }
.bb-tier.high .level { color: #8A6A1C !important; }
.bb-tier.med  { border-color: rgba(42,74,99,0.40)   !important; background: rgba(42,74,99,0.05)   !important; }
.bb-tier.med  .level { color: #2A4A63 !important; }
.bb-tier.low  { border-color: rgba(47,106,79,0.45)  !important; background: rgba(47,106,79,0.06)  !important; }
.bb-tier.low  .level { color: #2F6A4F !important; }
.bb-tier.crit { background: rgba(155,44,44,0.05) !important; }
.bb-out { background: rgba(155,44,44,0.06) !important; border-color: rgba(155,44,44,0.28) !important; }
.bb-tier .reward { font-feature-settings: "tnum" 1, "lnum" 1; }

/* ── 6 · REFERRALS — hero ring + code-box → brass hairlines (were blue) ──────
   .rf-hero border + radial glow and the .rf-code-box dashed border/bg all use
   rgba(0,82,149,…). Re-skin to brass; the numerals already read --copper. */
.rf-hero { border-color: rgba(169,136,65,0.32) !important; }
.rf-hero::before {
  background: radial-gradient(circle, rgba(169,136,65,0.14), transparent 70%) !important;
}
.rf-hero h1 { font-family: var(--font-display); }
.rf-code-box {
  border: 1.5px dashed rgba(169,136,65,0.50) !important;
  background: rgba(169,136,65,0.06) !important;
  color: #6F5417 !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   R577 — "PRIVATE TRUST" AUDIT FIXES · final cascade-winning override layer
   The R572+ token remap could not reach selectors that hardcode the OLD
   blue/candy palette with !important at high specificity. This block — the
   LAST in the file — re-skins every holdout the QA audit found so no leftover
   blue/teal/orange/pink survives on a customer surface. CSS only.
   ───────────────────────────────────────────────────────────────────────── */

/* CRITICAL — homepage hero rendered light-text-on-white: site.js adds
   .has-aurora to every .hero and a stale R571 rule forced background:#fff over
   the new dark ink masthead → invisible headline. Restore the ink slab (brass
   corner glow, not blue); the hero's white text then reads correctly. */
.hero.has-aurora, .hero--v2.has-aurora {
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(169,136,65,0.14), transparent 55%),
    linear-gradient(155deg, var(--lux-ink-3, #0C1923) 0%, var(--lux-ink, #12222E) 70%) !important;
}

/* HIGH — My-Deals / notifications active tab leaked blue (a duplicate
   .md-tab.is-active shadowed the ink rule). Force the ink pill. */
.md-tab.is-active {
  background: var(--lux-ink, #12222E) !important;
  color: #F4F1EA !important;
  border-color: var(--lux-ink, #12222E) !important;
}

/* HIGH — marketing trust-tile / onboarding step hover ring was blue. */
.trust-tile:hover,
body:not([data-screen-label="KycManual"]) .step:hover {
  border-color: rgba(169,136,65,0.45) !important;
}

/* HIGH — login / auth-modal + admin search focus ring was blue. */
[data-auth-modal] .am-field input:focus,
[data-auth-modal] .am-field textarea:focus,
.adm-search input:focus {
  box-shadow: 0 0 0 3px rgba(169,136,65,0.20) !important;
  border-color: #A98841 !important;
}

/* MEDIUM — whisper section-divider between light marketing sections was blue. */
.section:not(.section--dark)::before {
  background: linear-gradient(90deg, transparent, rgba(169,136,65,0.55), transparent) !important;
}

/* MEDIUM — mobile app-shell bottom-tab active indicator was a blue pill. */
body[data-app="1"] .app-tabbar__item.is-active::before {
  background: linear-gradient(135deg, rgba(169,136,65,0.16), rgba(169,136,65,0.06)) !important;
  border-color: rgba(169,136,65,0.30) !important;
}

/* MEDIUM — floating-FAB radar pulse halo was blue (a running animation's
   box-shadow outranks the static ink shadow). Redefine the keyframes brass. */
@keyframes sp-fab-pulse {
  0%   { box-shadow: 0 6px 18px rgba(18,34,46,0.28), 0 0 0 0 rgba(169,136,65,0.50); }
  70%  { box-shadow: 0 6px 18px rgba(18,34,46,0.28), 0 0 0 14px rgba(169,136,65,0); }
  100% { box-shadow: 0 6px 18px rgba(18,34,46,0.28), 0 0 0 0 rgba(169,136,65,0); }
}

/* LOW — reusable status-pill component carried the candy palette (latent). */
.lux-pill--ok   { background: rgba(47,106,79,0.12)  !important; color: #2F6A4F !important; border-color: rgba(47,106,79,0.30)  !important; }
.lux-pill--info { background: rgba(42,74,99,0.12)   !important; color: #2A4A63 !important; border-color: rgba(42,74,99,0.30)   !important; }
.lux-pill--warn { background: rgba(154,123,60,0.14) !important; color: #8A6A1C !important; border-color: rgba(154,123,60,0.32) !important; }
.lux-pill--red  { background: rgba(155,44,44,0.10)  !important; color: #9B2C2C !important; border-color: rgba(155,44,44,0.28)  !important; }
.lux-pill--gold { background: rgba(169,136,65,0.14) !important; color: #8A6A1C !important; border-color: rgba(169,136,65,0.32) !important; }

/* LOW — admin nav active/hover was blue. */
.adm-nav a.is-active { background: rgba(169,136,65,0.12) !important; border-color: rgba(169,136,65,0.28) !important; }
.adm-nav a:hover     { background: rgba(169,136,65,0.18) !important; }

/* LOW — dead early-layer blue text-hovers (superseded; pin to brass). */
.nav-links a:hover, .topbar a:hover { color: #8A6A1C !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   R578 — "CLEAN WHITE" · LIGHT, AIRY, PREMIUM-BANK FLIP  ·  canonical LAST layer
   ─────────────────────────────────────────────────────────────────────────
   The founder rejected the dark "Private Trust" ink surfaces. This block — the
   absolute LAST in luxe.css (which itself loads last on every page) — FLIPS every
   dark INK slab the R572/R573/R574/R575/R577 blocks introduced to a clean WHITE
   surface with DARK INK *text*. We KEEP everything good: the single GOLD accent,
   the Frank Ruhl Libre serif --font-display, the 6px gold-diamond certificate
   ornament, the statement/ledger layout, hairlines, tabular money, whitespace.

   GUARANTEE: ZERO dark background FILLS remain on any masthead / hero / page-head
   / dashboard-deal-profile header / footer / CTA banner / problem band / featured
   tier / portfolio-press slab / Sofi card / FAB halo. Ink survives ONLY as a TEXT
   colour on white.

   STRATEGY:
     1. Re-point the canvas + card primitives to clean white (#F5F7FA page /
        #FFFFFF card) and the on-ink text tokens to dark ink, so token-driven
        surfaces resolve light automatically.
     2. For each dark slab the later blocks paint with a literal ink gradient +
        !important, emit a matching-or-higher-specificity override → WHITE bg +
        #1C2A35 text + a thin GOLD (#A98841) top hairline (the certificate cue),
        keeping the gold diamond ornament intact.
   PALETTE: page #F5F7FA · card #FFFFFF · text #1C2A35/#5E6B78/#93A0AD ·
     gold #A98841 (hairlines/marks) · gold-text #8A6A1C · gold tint #F3EEE2 ·
     hairline #E8ECF1 · soft card shadow 0 2px 10px rgba(20,30,45,0.05).
   CSS ONLY · no markup / page-script / CSP / _headers change.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 0 · PRIMITIVES — re-point canvas/card/on-ink tokens to clean white ──────
   :root here matches the R572 :root specificity (0,1,0) and loads LATER → wins
   the tie. Token-driven surfaces (cards, app pages) resolve light automatically;
   the literal-gradient slabs are flipped explicitly below. */
:root,
html[data-theme="light"],
html[data-theme="dark"] {
  /* Surface ramp — INK tokens become LIGHT so any var(--lux-ink*) slab reads
     white. Ink stays available as a TEXT colour via --lux-text / on-ink tokens. */
  --lux-ink:    #FFFFFF;   /* was brand ink — now pure card/masthead surface */
  --lux-ink-2:  #FFFFFF;   /* was ink-soft */
  --lux-ink-3:  #F5F7FA;   /* was ink-deep — now page canvas tint */
  --lux-ink-4:  #E8ECF1;   /* hairline on white */

  /* Canvas — clean cool-white paper */
  --lux-bg:      #F5F7FA;
  --lux-bg-deep: #EDF1F6;
  --lux-surface: #FFFFFF;
  --lux-tint:    #FFFFFF;
  --lux-sunk:    #EDF1F6;

  /* Text on paper */
  --lux-text:   #1C2A35;
  --lux-text-2: #5E6B78;
  --lux-text-3: #93A0AD;
  --lux-text-4: #B7BFC8;

  /* "Text on ink" tokens now mean text on WHITE → dark ink (kept token names
     so app pages that read them resolve dark-on-white, not light-on-white). */
  --text-on-ink:       #1C2A35;
  --text-on-ink-muted: #5E6B78;

  /* Primary CTA = GOLD fill with dark-ink text (premium embossed, AA ~5:1). */
  --lux-gold-grad: linear-gradient(180deg, #B89A56 0%, #A98841 100%);

  /* Hairlines — the primary depth signal on white. */
  --lux-line:   #E8ECF1;
  --lux-line-2: #DFE4EB;
  --lux-line-3: #D2D9E2;

  /* Soft shadows for floating white cards (depth = soft shadow + hairline). */
  --lux-sh-1: 0 1px 2px rgba(20,30,45,0.04);
  --lux-sh-2: 0 2px 10px rgba(20,30,45,0.05);
  --lux-sh-3: 0 4px 18px rgba(20,30,45,0.07);
  --lux-sh-gold: 0 8px 18px -10px rgba(169,136,65,0.45);
  --lux-sh-ink:  0 2px 10px rgba(20,30,45,0.06);

  /* Legacy mirror primitives — keep the whole site light. */
  --surface-bg:   #F5F7FA;
  --surface-card: #FFFFFF;
  --surface-sunk: #EDF1F6;
  --surface-tint: #FFFFFF;
  --border-soft:    #E8ECF1;
  --border-default: #DFE4EB;
  --border-strong:  #D2D9E2;

  --void-950: #F5F7FA;
  --void-900: #FFFFFF;
  --void-850: #EDF1F6;
  --aurora-bg:            #F5F7FA;
  --aurora-bg-deep:       #EDF1F6;
  --aurora-surface:       #FFFFFF;
  --aurora-elev:          #FFFFFF;
  --aurora-border:        #E8ECF1;
  --aurora-border-strong: #D2D9E2;

  --ink-200: #DFE4EB;
  --ink-100: #F3EEE2;
  --ink-050: #FFFFFF;

  /* Own-message chat bubble tint stays a pale gold (unchanged intent). */
  --lux-accent-tint: #F3EEE2;
  --lux-accent-line: #ECE3CC;
}

/* ── 1 · CANVAS + base type — clean white page, dark ink body ──────────────── */
html, html[data-theme="light"], html[data-theme="dark"] { background: #F5F7FA !important; }
html[data-theme="light"] body, html[data-theme="dark"] body, body {
  background: #F5F7FA !important;
  color: #1C2A35 !important;
}

/* ── 2 · PRIMARY CTA — GOLD fill + dark-ink text (was a deep-ink button) ─────
   Mirrors the R572 .btn--primary selector list so this wins. Solid brass fill,
   dark ink label (~5:1 AA), soft gold shadow. */
.btn--primary,
.btn--accent,
body [data-auth-modal] .am-submit,
.site-header .nav-actions .btn--primary,
.site-header .nav-actions .btn--primary[data-auth="signup"],
.site-header .nav-actions .btn--accent[data-auth="signup"],
body .site-header .nav-actions .btn--primary[data-auth="signup"],
body .site-header .nav-actions .btn--accent[data-auth="signup"] {
  background: linear-gradient(180deg, #B89A56 0%, #A98841 100%) !important;
  color: #1C2A35 !important;
  -webkit-text-fill-color: #1C2A35 !important;
  border: 1px solid #9C7C36 !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.45) inset, 0 8px 18px -10px rgba(169,136,65,0.5) !important;
}
.btn--primary:hover:not(:disabled),
.btn--accent:hover:not(:disabled),
body [data-auth-modal] .am-submit:hover:not(:disabled),
.site-header .nav-actions .btn--primary:hover {
  background: linear-gradient(180deg, #C2A767 0%, #B08F48 100%) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 12px 22px -10px rgba(169,136,65,0.58) !important;
}

/* ── 3 · THE MASTHEAD PATTERN — every dark slab → WHITE card ────────────────
   hero / section--dark / cta-banner / footer / page-head: flip to a white
   surface with a soft shadow, a 1px hairline, a thin GOLD top hairline, and
   DARK INK text. Mirrors the R572 grouping (same selectors) + adds the brass
   top rule. */
.hero, .hero--v2,
.section.section--dark,
.cta-banner,
.site-footer,
body .page-head, body .page-head--dark {
  background: #FFFFFF !important;
  color: #1C2A35 !important;
  border-top: 2px solid #A98841 !important;
  box-shadow: 0 2px 10px rgba(20,30,45,0.05) !important;
}
.hero h1, .hero--v2 h1,
.section.section--dark h1, .section.section--dark h2,
.section.section--dark h3, .section.section--dark h4,
.cta-banner, .cta-banner h1, .cta-banner h2, .cta-banner h3, .cta-banner h4,
body .page-head h1, body .page-head--dark h1 {
  color: #1C2A35 !important; -webkit-text-fill-color: #1C2A35 !important;
}
.hero .hero-sub, .hero--v2 .hero-sub,
.section.section--dark .stat-cell .l,
.section.section--dark .stat-cell .sub,
.cta-banner p,
body .page-head p, body .page-head .lede,
body .page-head--dark p {
  color: #5E6B78 !important; -webkit-text-fill-color: #5E6B78 !important;
}
.section.section--dark .stat-cell .v { color: #1C2A35 !important; -webkit-text-fill-color: #1C2A35 !important; }
.section.section--dark .stat-cell { border-color: #E8ECF1 !important; }

/* Footer text → dark ink on white; links + brand stay readable. */
.site-footer, .footer-bottom { color: #5E6B78 !important; }
.site-footer a { color: #1C2A35 !important; }
.site-footer a:hover { color: #8A6A1C !important; }
.site-footer .brand, .site-footer strong { color: #1C2A35 !important; }
.site-footer { border-top: 2px solid #A98841 !important; }

/* The hero emphasis word KEEPS the brass gradient mark (a single confident cue
   — readable on white as deep gold). */
.hero h1 .gold, .hero--v2 h1 .gold,
.hero h1 [data-vault-reveal], .hero--v2 h1 [data-vault-reveal],
.hero h1 .accent, .hero h1 em, .hero h1 i {
  background: linear-gradient(180deg, #A98841 0%, #8A6A1C 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
}

/* ── 3a · R368/R573 app mastheads — np-hero / deal-head / prof-head → WHITE ─── */
.np-hero, .deal-head, .prof-head {
  background: #FFFFFF !important;
  color: #1C2A35 !important;
  border: 1px solid #E8ECF1 !important;
  border-top: 2px solid #A98841 !important;
  box-shadow: 0 2px 10px rgba(20,30,45,0.05) !important;
}
.deal-head::before { background: linear-gradient(90deg, transparent, rgba(169,136,65,0.55), transparent) !important; }
.deal-head::after  { background: #A98841 !important; }
.prof-head::after  { background: radial-gradient(circle, rgba(169,136,65,0.12), transparent 70%) !important; }
.deal-head h1      { color: #1C2A35 !important; }
.deal-head .meta   { color: #5E6B78 !important; }
.deal-head .amt .n { color: #8A6A1C !important; -webkit-text-fill-color: #8A6A1C !important; }
.deal-head .amt .c { color: #5E6B78 !important; }
.prof-head h1   { color: #1C2A35 !important; }
.prof-head .sub { color: #5E6B78 !important; }
.prof-avatar    { background: #F3EEE2 !important; color: #8A6A1C !important; border-color: #ECE3CC !important; }

/* my-deals / notifications active tab → GOLD pill on white (was ink). */
.md-tab.is-active {
  background: #F3EEE2 !important;
  border-color: #D2BE84 !important;
  color: #6F5417 !important;
}

/* ── 4 · "PRIVATE TRUST" R572 ink-card holdout (contact panel) → white ──────── */
.card[style*="ink-900"], .card[style*="ink-800"] {
  background: #FFFFFF !important;
  color: #1C2A35 !important; -webkit-text-fill-color: #1C2A35 !important;
  border: 1px solid #E8ECF1 !important;
  border-top: 2px solid #A98841 !important;
}
.card[style*="ink-900"] *, .card[style*="ink-800"] * { -webkit-text-fill-color: currentColor !important; }
.card[style*="ink-900"] .eyebrow--light,
.card[style*="ink-800"] .eyebrow--light { color: #8A6A1C !important; }

/* ── 5 · HOMEPAGE masthead (R574) — keep the gold ornament, flip the slab ──── */
body[data-screen-label="Homepage"] .hero,
body[data-screen-label="Homepage"] .hero--v2 {
  background: #FFFFFF !important;
  border-bottom: 1px solid #E8ECF1 !important;
  border-top: 2px solid #A98841 !important;
}
/* The R574 ::after brass top hairline is redundant now the border carries it;
   keep it visible but on white it simply reinforces the gold rule. */
body[data-screen-label="Homepage"] .hero h1,
body[data-screen-label="Homepage"] .hero--v2 h1 {
  color: #1C2A35 !important; -webkit-text-fill-color: #1C2A35 !important;
}
body[data-screen-label="Homepage"] .hero--v2 .hero-sub { color: #5E6B78 !important; -webkit-text-fill-color: #5E6B78 !important; }
/* Certificate eyebrow rule + 6px gold diamond ornament — KEPT (gold on white). */
body[data-screen-label="Homepage"] .hero--v2 .hero-grid > div:first-child::before {
  background: linear-gradient(270deg, #A98841, rgba(169,136,65,0)) !important;
}
body[data-screen-label="Homepage"] .hero--v2 .hero-grid > div:first-child::after {
  background: linear-gradient(135deg, #B89A56, #A98841) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.6) !important;
}
/* Trust band — fiduciary ledger row on white. */
body[data-screen-label="Homepage"] .hero-trust { border-top: 1px solid #E8ECF1 !important; }
body[data-screen-label="Homepage"] .hero-trust li { color: #5E6B78 !important; }
body[data-screen-label="Homepage"] .hero-trust__i {
  background: #F3EEE2 !important;
  box-shadow: inset 0 0 0 1px #ECE3CC !important;
}

/* ── 6 · "THE PROBLEM" band (R574) — ink slab → white statement band ────────── */
.problem {
  background: #FFFFFF !important;
  border-top: 2px solid #A98841 !important;
  box-shadow: 0 2px 10px rgba(20,30,45,0.05) !important;
}
.problem-head h2 .danger { color: #C0392B !important; }
.problem-head .lede { color: #5E6B78 !important; }
.p-stat { border-inline-end-color: #E8ECF1 !important; }
.problem-stats { border-color: #E8ECF1 !important; }
.p-stat .label { color: #5E6B78 !important; }
.p-stat .v { color: #1C2A35 !important; }
.p-stat .v.danger { color: #C0392B !important; }
.p-stat .d { color: #5E6B78 !important; }
.p-stat .src { color: #93A0AD !important; }
.problem-foot { color: #5E6B78 !important; }
.problem-foot .turn { color: #1C2A35 !important; }
.problem-foot .arrow { background: rgba(169,136,65,0.55) !important; }

/* ── 7 · COMPARISON LEDGER recommended column (R574) → light gold tint ─────── */
.compare-head .cell.sp { background: #F3EEE2 !important; color: #6F5417 !important; }
.compare-head .cell.sp::after { background: #A98841 !important; color: #FFFFFF !important; }
.compare-row .cell.sp { background: rgba(169,136,65,0.07) !important; }

/* ── 8 · TESTIMONIAL wall (R574) — ink feature card → white + gold hairline ─── */
.voice--lg { border: 1px solid #E8ECF1 !important; border-top: 2px solid #A98841 !important; background: #FFFFFF !important; }
.voice--lg .deal-tag {
  background: #F3EEE2 !important;
  color: #6F5417 !important;
  border-color: #ECE3CC !important;
}

/* ── 9 · PRICING — featured tier (R573) ink "metal card" → white + gold rule ── */
.tier--featured,
.tier.tier--featured {
  background: #FFFFFF !important;
  border: 1px solid #E8ECF1 !important;
  border-top: 2px solid #A98841 !important;
  box-shadow: 0 4px 18px rgba(20,30,45,0.07) !important;
  color: #1C2A35 !important;
}
.tier--featured .tag,
.tier.tier--featured .tag {
  background: linear-gradient(135deg, #B89A56, #A98841) !important;
  color: #1C2A35 !important;
}
.tier--featured h3,
.tier.tier--featured h3 { color: #1C2A35 !important; }
.tier--featured .sub,
.tier.tier--featured .sub { color: #5E6B78 !important; }
.tier--featured .price .rate,
.tier.tier--featured .price .rate { color: #8A6A1C !important; }
.tier--featured .price .of,
.tier.tier--featured .price .of { color: #5E6B78 !important; }
.tier--featured .min,
.tier.tier--featured .min { color: #93A0AD !important; }
.tier--featured li,
.tier.tier--featured li { color: #1C2A35 !important; }
.tier--featured li.off,
.tier.tier--featured li.off { color: #93A0AD !important; }
.tier--featured li .tick,
.tier.tier--featured li .tick {
  background: #F3EEE2 !important;
  border: 1px solid #ECE3CC !important;
}
.tier--featured li .tick svg,
.tier.tier--featured li .tick svg { stroke: #8A6A1C !important; }

/* ── 10 · PRICING fee-calculator "statement" panel (R573) → white ──────────── */
.calc-result {
  background: #FFFFFF !important;
  border: 1px solid #E8ECF1 !important;
  border-top: 2px solid #A98841 !important;
  color: #1C2A35 !important;
  box-shadow: 0 2px 10px rgba(20,30,45,0.05) !important;
}
.calc-result::before {
  background: radial-gradient(circle, rgba(169,136,65,0.10), transparent 65%) !important;
}
.calc-result .big, .calc-result [data-calc-amt] { color: #1C2A35 !important; -webkit-text-fill-color: #1C2A35 !important; }
.calc-result .row .v, .calc-result [data-calc-fee] { color: #8A6A1C !important; -webkit-text-fill-color: #8A6A1C !important; }
.calc-result [data-calc-risk] { color: #C0392B !important; }
.calc-result .row .v[style*="4ade80"],
.calc-result .row .v[style*="8FD3B6"],
.calc-result .row .v[style*="success"] { color: #1F8A5B !important; -webkit-text-fill-color: #1F8A5B !important; }
/* Labels / divider were translucent-WHITE for the old ink slab → invisible on
   white. Re-ink them: secondary text + a light hairline divider. */
.calc-result .lbl,
.calc-result .row .lbl2 { color: #5E6B78 !important; -webkit-text-fill-color: #5E6B78 !important; }
.calc-result .row .lbl2 strong { color: #1C2A35 !important; -webkit-text-fill-color: #1C2A35 !important; }
/* The inline "(0.9%, מקס׳ ₪399)" hint was pale-gold copper-300 for the dark slab;
   on white that fails AA — pull it to the text-safe deep gold. */
.calc-result .row .lbl2 span[style*="copper-300"] { color: #8A6A1C !important; -webkit-text-fill-color: #8A6A1C !important; }
.calc-result .divider { background: #E8ECF1 !important; }
.calc-result .footnote { color: #93A0AD !important; }
.calc-result [data-calc-hint] { color: #8A6A1C !important; }
.calc-result .row .v[style*="success"] { color: #1F8A5B !important; }
body .calc-presets button.on {
  background: #F3EEE2 !important;
  border-color: #D2BE84 !important;
  color: #6F5417 !important;
}
.calc-slider .fill { background: #A98841 !important; }
.calc-slider .thumb { border-color: #A98841 !important; }

/* ── 11 · PRICING comparison-table SafePay column (R573) → light gold tint ──── */
.cmp thead th.sp { background: #F3EEE2 !important; color: #6F5417 !important; }
.cmp tbody td.sp { background: #FBF8F0 !important; color: #6F5417 !important; }

/* ── 12 · STATUS pages / certificate cards · status set on white ───────────── */
.calc-presets button.on { color: #6F5417 !important; }
.avatar--ink     { background: #A98841 !important; }
.avatar--success { background: #1F8A5B !important; }

/* ── 13 · ARBITRATION timeline marker (R575) — ink node → white + gold ─────── */
.arb-step::before {
  background: linear-gradient(to bottom, #A98841, rgba(169,136,65,0.16)) !important;
}
.arb-step .marker {
  background: #FFFFFF !important;
  color: #8A6A1C !important;
  border: 1px solid #E8ECF1 !important;
  box-shadow: 0 2px 8px rgba(20,30,45,0.06), 0 0 0 1px rgba(169,136,65,0.40) !important;
}
.arb-step .when {
  color: #6F5417 !important;
  background: #F3EEE2 !important;
  border: 1px solid #ECE3CC !important;
}

/* ── 14 · PORTFOLIO masthead (R575) — ink slab → white certificate card ────── */
.pf-head {
  background: #FFFFFF !important;
  color: #1C2A35 !important;
  border: 1px solid #E8ECF1 !important;
  border-top: 2px solid #A98841 !important;
  box-shadow: 0 2px 10px rgba(20,30,45,0.05) !important;
}

/* ── 15 · PRESS dark logo card + pull-quote (R575) → white + gold ──────────── */
.pr-logo.dark {
  background: #FFFFFF !important;
  border: 1px solid #E8ECF1 !important;
  border-top: 2px solid #A98841 !important;
}
.pr-logo.dark .lbl { color: #5E6B78 !important; }
.pr-quote {
  background: linear-gradient(135deg, rgba(169,136,65,0.07), transparent) !important;
  border-inline-start: 3px solid #A98841 !important;
}

/* ── 16 · BRAND-MARK SVG — solid disc → white with a gold hairline ring ─────── */
.brand-mark circle { stroke: rgba(169,136,65,0.22) !important; }
.brand-mark circle:first-of-type { fill: #FFFFFF !important; stroke: #A98841 !important; }

/* ── 17 · R577 holdouts — flip the ink slabs they restored ──────────────────
   The R577 block FORCED several surfaces back to ink with high specificity +
   !important; re-flip each to white here (this block loads AFTER it). */
.hero.has-aurora, .hero--v2.has-aurora {
  background: #FFFFFF !important;
}
.hero.has-aurora::before, .hero.has-aurora::after,
.hero--v2.has-aurora::before, .hero--v2.has-aurora::after { background: none !important; opacity: 0 !important; }
.md-tab.is-active {
  background: #F3EEE2 !important;
  color: #6F5417 !important;
  border-color: #D2BE84 !important;
}
.f-search-list a:hover { background: #F3EEE2 !important; color: #6F5417 !important; }

/* ── 18 · SOFI / help dark cards + dark FAB cluster → white card, gold ring ──
   Any help/Sofi card or floating action button that opted into an ink fill
   becomes a white surface with a soft shadow + gold hairline. The FAB discs
   (Sofi help · a11y · privacy · deal-help — R572 painted them deep ink) flip to
   white discs with a gold hairline + gold glyph; the brass pulse from R577 is
   kept. */
.sofi-card, .help-card.dark, .help-widget__panel, [data-sofi-card],
.app-fab__halo, [data-fab-halo] {
  background: #FFFFFF !important;
  color: #1C2A35 !important;
  border: 1px solid #E8ECF1 !important;
  box-shadow: 0 2px 10px rgba(20,30,45,0.06) !important;
}
.sofi-card *, .help-card.dark *, [data-sofi-card] * { -webkit-text-fill-color: currentColor; }
.sp-help-btn, .a11y-fab, #safepay-deal-help-btn, .pb-btn {
  background: #FFFFFF !important;
  border: 1px solid rgba(169,136,65,0.55) !important;
  box-shadow: 0 8px 18px -10px rgba(20,30,45,0.30), 0 1px 2px rgba(20,30,45,0.06) !important;
  color: #8A6A1C !important;
}
.sp-help-btn:hover, .a11y-fab:hover, #safepay-deal-help-btn:hover, .pb-btn:hover {
  background: #FBF8F0 !important;
  border-color: #A98841 !important;
}

/* ── 19 · The stats-dark badge stays a pale-gold pill on white. ────────────── */
.aurora-trust-badge {
  background: #F3EEE2 !important;
  color: #6F5417 !important;
  border: 1px solid #ECE3CC !important;
}

/* ── 20 · Section eyebrows on dark contexts now sit on white → deep gold. ──── */
body .section--dark [class*="eyebrow"],
body .page-head [class*="eyebrow"],
body .page-head--dark [class*="eyebrow"],
body .hero [class*="eyebrow"],
.cta-banner .eyebrow--light,
body[data-screen-label="Homepage"] .hero--v2 .eyebrow,
body:not([data-app="1"]) .page-head .eyebrow,
body:not([data-app="1"]) .page-head .eyebrow--light {
  color: #8A6A1C !important; -webkit-text-fill-color: #8A6A1C !important;
}
/* The page-head certificate diamond ornament stays gold on the white slab. */
body:not([data-app="1"]) .page-head h1::after {
  background: linear-gradient(135deg, #B89A56, #A98841) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.6) !important;
}
/* ── 21 · CLEAN-WHITE tail fixes (homepage + brand mark) ────────────────────
   The previous line painted .f-search-list a:hover with var(--lux-ink) which now
   resolves to WHITE + near-white #F4F1EA text (a leftover dark-intent holdout).
   Re-flip it to the same pale-gold hover the rest of the search list uses. */
.f-search-list a:hover { background: #F3EEE2 !important; color: #6F5417 !important; }

/* The brand seal disc (fill="#A98841") is flipped to a WHITE disc above (§16).
   Its inner "S" glyph + dashed ring are hardcoded stroke="#fff" inline, which
   would vanish on the white disc — re-stroke them in GOLD so the certified mark
   stays legible everywhere (header + footer, single source, no per-page edits). */
.brand-mark circle:not(:first-of-type) { stroke: rgba(169,136,65,0.45) !important; }
.brand-mark path { stroke: #A98841 !important; }
.brand-mark > circle:first-of-type ~ circle { stroke: rgba(169,136,65,0.45) !important; }
.brand-mark > path { stroke: #A98841 !important; }

/* .btn--ghost-dark (homepage final-CTA "איך זה עובד") was white-on-transparent
   for the old dark banner → invisible on the now-white banner. Make it the spec
   SECONDARY button: white surface, gold hairline, gold text (AA on white). */
.btn--ghost-dark {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(169,136,65,0.55) !important;
  color: #8A6A1C !important;
  -webkit-text-fill-color: #8A6A1C !important;
  backdrop-filter: none !important;
}
.btn--ghost-dark:hover { background: #FBF8F0 !important; border-color: #A98841 !important; }

/* ─────────────────────────────────────────────────────────────────────────
   R579 — CLEAN WHITE audit fixes. The R578 flip lost a few specificity battles
   to `body .`-prefixed dark rules in site.css and missed some light-text-on-
   now-white-surface cases (invisible text). These loads-last overrides win.
   ───────────────────────────────────────────────────────────────────────── */

/* CRITICAL — site.css `body .deal-head` / `body .prof-head` dark navy gradients
   (0,1,1 + !important) outranked R578 (0,1,0), leaving DARK slabs with the new
   DARK ink text on them = invisible deal/profile titles. Match at (0,1,1). */
body .deal-head, body .prof-head, body .np-hero {
  background: #FFFFFF !important;
  border: 1px solid #E8ECF1 !important;
  border-top: 2px solid #A98841 !important;
  box-shadow: 0 2px 10px rgba(20,30,45,0.05) !important;
  backdrop-filter: none !important;
}
body .deal-head h1, body .prof-head h1, body .np-hero h1,
body .deal-head .meta, body .prof-head .sub, body .np-hero .sub { color: #1C2A35 !important; }

/* CRITICAL — product-page heroes (rechev/nadlan/freelance): the .hero-trust
   stat block kept WHITE text (inline color:#fff + luxe rule) on the now-white
   hero. R578's re-ink was Homepage-scoped only. Re-ink unscoped. */
.hero .hero-trust, .hero--v2 .hero-trust,
.hero .hero-trust span, .hero--v2 .hero-trust span { color: #5E6B78 !important; -webkit-text-fill-color: #5E6B78 !important; }
.hero .hero-trust strong, .hero--v2 .hero-trust strong,
.hero .hero-trust [style*="color:#fff"], .hero--v2 .hero-trust [style*="color:#fff"],
.hero .hero-trust [style*="color: #fff"], .hero--v2 .hero-trust [style*="color: #fff"] { color: #1C2A35 !important; -webkit-text-fill-color: #1C2A35 !important; }

/* HIGH — footer column headings (.h / h4) stayed white on the now-white footer
   (18 pages). R578 only re-inked .site-footer strong/.brand. */
.site-footer h4, .site-footer .h { color: #1C2A35 !important; }

/* HIGH — the .note--dark hero chip was white-on-white. Pale-gold chip. */
.note--dark, .hero .note--dark {
  background: #F3EEE2 !important;
  border: 1px solid #ECE3CC !important;
  color: #6F5417 !important;
}

/* MEDIUM — product-page .hero-card was a dark navy pricing slab on a white page.
   Flip it white + re-ink its inline-white descendants. */
.hero-card { background: #FFFFFF !important; border: 1px solid #E8ECF1 !important; box-shadow: 0 4px 18px rgba(20,30,45,0.07) !important; }
.hero-card, .hero-card div, .hero-card span, .hero-card p, .hero-card li { color: #1C2A35 !important; }
.hero-card [style*="color:#fff"], .hero-card [style*="color: #fff"],
.hero-card [style*="rgba(255,255,255"] { color: #1C2A35 !important; -webkit-text-fill-color: #1C2A35 !important; }
.hero-card .muted, .hero-card small { color: #5E6B78 !important; }

/* MEDIUM — deal-card amount used a blue-gradient clipped text (site.css !important).
   Make it solid ink. */
.deal-card .dc-amt { background: none !important; -webkit-text-fill-color: #1C2A35 !important; color: #1C2A35 !important; }

/* Align the few components that read --lux-ok / --lux-info to the Clean-White
   green/blue (the gold ramp is already brass from R572 — left as-is). */
:root, html[data-theme="light"], html[data-theme="dark"] {
  --lux-ok: #1F8A5B; --lux-info: #2A6BB0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   R580 — CLEAN WHITE audit fixes, round 2 (live-site Claude-Chrome QA, 2026-06-11)
   Five dark/blue holdouts the R578/R579 flip missed. Loads last → wins cascade.
   ─────────────────────────────────────────────────────────────────────────── */

/* 1 · HOMEPAGE `.trust-strip` — a full-width NAVY gradient band with white text
   (a dark slab, forbidden in Clean White). Flip to a white statement band,
   re-ink the inline-white headings/paras, and turn the white-on-white shield
   badge into a pale-gold tile so the icon reads. */
.trust-strip {
  background: #FFFFFF !important;
  border-top: 2px solid #A98841 !important;
  border-bottom: 1px solid #E8ECF1 !important;
  box-shadow: 0 2px 10px rgba(20,30,45,0.05) !important;
}
.trust-strip h2,
.trust-strip [style*="color:#fff"], .trust-strip [style*="color: #fff"] {
  color: #1C2A35 !important; -webkit-text-fill-color: #1C2A35 !important;
}
.trust-strip p,
.trust-strip [style*="rgba(255,255,255"] { color: #5E6B78 !important; }
.trust-strip__title { color: #1C2A35 !important; }
.trust-strip__desc  { color: #5E6B78 !important; }
.trust-strip__ico {
  background: #F3EEE2 !important;
  box-shadow: inset 0 0 0 1px #ECE3CC !important;
  color: #6F5417 !important;
}

/* 2 · COMPARISON LEDGER — the "SafePay" header cell rendered BLUE (#1E40AF):
   a site.css aurora rule outranked R578's gold. Win at (0,2,1) + !important. */
body .compare-head .cell.sp, body .compare .cell.sp {
  color: #6F5417 !important; -webkit-text-fill-color: #6F5417 !important;
  background: #F3EEE2 !important;
}

/* 3 · SAVINGS-CALCULATOR range slider — blue native thumb/track → brass. */
input[type="range"] { accent-color: #A98841 !important; }

/* 4 · PRODUCT-PAGE content cards (rechev "checklist" + "future integration"):
   the `.card` inner-fill `background-image` reads `--surface-card`, which still
   resolves to dark glass in a leftover dark scope on these pages → near-black
   slab + dark-gray text = unreadable. Force the floating-white card + ink text. */
.card-pad, .card.card-pad, .yad2-card, .risk-card {
  background: #FFFFFF !important;
  background-image: none !important;
  border: 1px solid #E8ECF1 !important;
  box-shadow: 0 2px 10px rgba(20,30,45,0.05) !important;
}
.card-pad h1, .card-pad h2, .card-pad h3,
.yad2-card .listing-title { color: #1C2A35 !important; }
.card-pad p { color: #5E6B78 !important; }
.risk-card, .risk-card * { color: #1C2A35 !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   R584 — FLOATING-FAB TOOLTIP FIX (founder screenshot, 2026-06-12)
   The Sofi / accessibility / deal-help FABs sit at the right screen edge. The
   shared [data-tip] tooltip is centered-above + white-space:nowrap, so on those
   buttons it overflowed off the right edge and got CLIPPED (a dark bar with cut
   text). It also still used the old dark-navy Private-Trust chrome that clashes
   with Clean White. Fix: (a) anchor the FAB tooltips to the button's inline-end
   so they open leftward and stay on-screen; (b) reskin all tooltips Clean White.
   ─────────────────────────────────────────────────────────────────────────── */

/* (a) Re-anchor the edge-hugging FAB tooltips so they never clip off-screen. */
.a11y-fab[data-tip]::after,
.sp-help-btn[data-tip]::after,
#safepay-deal-help-btn[data-tip]::after,
.pb-btn[data-tip]::after {
  left: auto !important;
  inset-inline-end: 0 !important;
  inset-inline-start: auto !important;
  transform: translateY(4px) !important;
}
.a11y-fab[data-tip]:hover::after,  .a11y-fab[data-tip]:focus-visible::after,
.sp-help-btn[data-tip]:hover::after, .sp-help-btn[data-tip]:focus-visible::after,
#safepay-deal-help-btn[data-tip]:hover::after, #safepay-deal-help-btn[data-tip]:focus-visible::after,
.pb-btn[data-tip]:hover::after, .pb-btn[data-tip]:focus-visible::after {
  transform: translateY(0) !important;
}
/* the centered arrow would point from the wrong spot once re-anchored — drop it. */
.a11y-fab[data-tip]::before,
.sp-help-btn[data-tip]::before,
#safepay-deal-help-btn[data-tip]::before,
.pb-btn[data-tip]::before { display: none !important; }

/* (b) Clean-White tooltip skin (all [data-tip]) — white card, ink text, pale-gold
   hairline, soft shadow; no dark navy, no backdrop blur. */
[data-tip]::after {
  background: #FFFFFF !important;
  border: 1px solid #E8DFC8 !important;
  color: #1C2A35 !important;
  box-shadow: 0 8px 22px rgba(20,30,45,0.14) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
[data-tip]::before {
  background: #FFFFFF !important;
  border-right-color: #E8DFC8 !important;
  border-bottom-color: #E8DFC8 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   R591 — close the `--sapphire-*` BLUE-RAMP leak (2026-06-12)
   The gold-identity pass remapped `--sapphire` (unsuffixed) and the `--iris-*`
   ramp, but the numbered `--sapphire-50..900` ramp stayed blue in site.css —
   ~105 uses across index/kyc/errors/newsletter/aurora-widgets/blog still
   rendered blue (e.g. newsletter's preview-head blue→gold gradient). luxe.css
   loads last, so redefining the ramp here maps every stop to the brass/gold
   ramp, preserving light→dark ordering (light tints stay light, dark stays
   dark) so contrast/intent is unchanged — only the hue corrects blue→gold. */
:root, html[data-theme="light"], html[data-theme="dark"] {
  --sapphire-50:  #FBF6EA;
  --sapphire-100: #F6EFDF;
  --sapphire-200: #ECDFBF;
  --sapphire-300: #D8C290;
  --sapphire-400: #C9AE6E;
  --sapphire-500: #C2A35E;
  --sapphire-600: #A98841;
  --sapphire-700: #7A5C14;
  --sapphire-800: #5E4715;
  --sapphire-900: #4A3613;
}