/*
 * cliptics-skin-gold.css
 *
 * Skin overlay for cliptics.co. Adds a gold/cream LIGHT theme and a
 * gold/black DARK theme on top of the existing shell. Hooks the existing
 * `html[data-theme="light"|"dark"]` switch so the theme toggle keeps working.
 *
 * Reversible: remove the <link> tag in _render_shell (partners_web.py) to
 * fully revert. Spec source: design handoff 2026-05-20.
 */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

/* ─────────────────────────────────────────────────────────────────
   1) Palette tokens. Keep them under skin-* so they cannot collide
      with the existing --gold / --primary tokens.
   ───────────────────────────────────────────────────────────────── */
html[data-theme="light"] {
  --skn-gold:        #D4A92C;
  --skn-gold-2:      #B88642;
  --skn-gold-hover:  #E0B84A;
  --skn-gold-soft:   #FFF8EA;
  --skn-gold-soft-2: #FFF7E8;
  --skn-bg:          #F8F7F4;
  --skn-surface:     #FFFFFF;
  --skn-surface-2:   #FCFAF5;
  --skn-text:        #111827;
  --skn-muted:       #6B7280;
  --skn-border:      #E9E3D8;
  --skn-border-2:    #F2DFC2;
  --skn-divider:     #ECE7DE;
  --skn-success:     #1E9E63;
  --skn-shadow:      0 10px 28px -6px rgba(184,134,66,.12), 0 2px 6px rgba(184,134,66,.05);
  --skn-hero-glow:   linear-gradient(90deg, rgba(212,169,44,.08) 0%, rgba(212,169,44,.02) 100%);
  color-scheme: light;
}

html[data-theme="dark"] {
  --skn-gold:        #D4A92C;
  --skn-gold-2:      #B88642;
  --skn-gold-hover:  #F0C94A;
  --skn-gold-soft:   #2A2A2A;
  --skn-gold-soft-2: #2A2A2A;
  /* Graphite #2A2A2A is the dark site surface (per 2026-05-20 spec).
     Pure #050505 stays available for deepest sub-surfaces if needed. */
  --skn-bg:          #2A2A2A;
  --skn-surface:     #1F1F1F;
  --skn-surface-2:   #2A2A2A;
  --skn-text:        #FAEDE1;
  --skn-muted:       #B88642;
  --skn-border:      #B88642;
  --skn-border-2:    #B88642;
  --skn-divider:     #2A2A2A;
  --skn-success:     #1E6F5C;
  --skn-shadow:      0 8px 24px rgba(0,0,0,.45);
  --skn-hero-glow:   linear-gradient(90deg, rgba(212,169,44,.18) 0%, rgba(5,5,5,.00) 100%);
  color-scheme: dark;
}

/* ─────────────────────────────────────────────────────────────────
   2) Typography: Poppins everywhere; 700 for headings, 400 for body.
   ───────────────────────────────────────────────────────────────── */
html[data-theme="light"] body,
html[data-theme="dark"]  body,
html[data-theme="light"] .lp-hero, html[data-theme="dark"] .lp-hero,
html[data-theme="light"] .lp-steps, html[data-theme="dark"] .lp-steps,
html[data-theme="light"] .lp-stat,  html[data-theme="dark"] .lp-stat,
html[data-theme="light"] .lp-camp-panel, html[data-theme="dark"] .lp-camp-panel,
html[data-theme="light"] .cc-title, html[data-theme="dark"] .cc-title,
html[data-theme="light"] .cc-brief, html[data-theme="dark"] .cc-brief,
html[data-theme="light"] h1, html[data-theme="dark"] h1,
html[data-theme="light"] h2, html[data-theme="dark"] h2,
html[data-theme="light"] h3, html[data-theme="dark"] h3,
html[data-theme="light"] h4, html[data-theme="dark"] h4,
html[data-theme="light"] .s-title, html[data-theme="dark"] .s-title,
html[data-theme="light"] .lp-nav-logo, html[data-theme="dark"] .lp-nav-logo,
html[data-theme="light"] button, html[data-theme="dark"] button,
html[data-theme="light"] input, html[data-theme="dark"] input,
html[data-theme="light"] select, html[data-theme="dark"] select,
html[data-theme="light"] textarea, html[data-theme="dark"] textarea {
  font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
}

html[data-theme="light"] h1, html[data-theme="dark"] h1,
html[data-theme="light"] h2, html[data-theme="dark"] h2,
html[data-theme="light"] h3, html[data-theme="dark"] h3,
html[data-theme="light"] .s-title, html[data-theme="dark"] .s-title,
html[data-theme="light"] .lp-hero h1, html[data-theme="dark"] .lp-hero h1 {
  font-weight: 700 !important;
  letter-spacing: -.025em;
}

html[data-theme="light"] .lede, html[data-theme="dark"] .lede,
html[data-theme="light"] .s-sub, html[data-theme="dark"] .s-sub,
html[data-theme="light"] .lp-step-desc, html[data-theme="dark"] .lp-step-desc,
html[data-theme="light"] .lp-faq-a, html[data-theme="dark"] .lp-faq-a,
html[data-theme="light"] p, html[data-theme="dark"] p {
  font-weight: 400 !important;
}

/* ─────────────────────────────────────────────────────────────────
   3) Page background + base text.
   ───────────────────────────────────────────────────────────────── */
html[data-theme="light"],
html[data-theme="light"] body {
  background: var(--skn-bg) !important;
  color: var(--skn-text) !important;
}
html[data-theme="dark"],
html[data-theme="dark"] body {
  background: var(--skn-bg) !important;
  color: var(--skn-text) !important;
}

/* Wipe the cool blue radial gradients that the existing shell paints. */
html[data-theme="light"] body {
  background-image: none !important;
}
html[data-theme="dark"] body {
  background-image: none !important;
}

/* ─────────────────────────────────────────────────────────────────
   4) Sticky landing nav (.lp-nav) + classic pill nav (.nav).
   ───────────────────────────────────────────────────────────────── */
html[data-theme="light"] .lp-nav {
  background: var(--skn-surface) !important;
  border-bottom: 1px solid var(--skn-border) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-theme="dark"] .lp-nav {
  background: var(--skn-bg) !important;
  border-bottom: 1px solid var(--skn-divider) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-theme="light"] .lp-nav-logo,
html[data-theme="light"] .lp-nav-logo-text { color: var(--skn-text) !important; }
html[data-theme="dark"]  .lp-nav-logo,
html[data-theme="dark"]  .lp-nav-logo-text { color: var(--skn-text) !important; }
html[data-theme="light"] .lp-nav-logo-text span,
html[data-theme="dark"]  .lp-nav-logo-text span { color: var(--skn-gold) !important; }

html[data-theme="light"] .lp-nav-logo-mark {
  background: linear-gradient(135deg, var(--skn-gold) 0%, var(--skn-gold-hover) 100%) !important;
  color: var(--skn-text) !important;
  box-shadow: 0 4px 14px rgba(212,169,44,.28) !important;
}
html[data-theme="dark"] .lp-nav-logo-mark {
  background: linear-gradient(135deg, var(--skn-gold) 0%, var(--skn-gold-2) 100%) !important;
  color: var(--skn-bg) !important;
  box-shadow: 0 4px 14px rgba(212,169,44,.45) !important;
}

html[data-theme="light"] .lp-nav-links,
html[data-theme="light"] .lp-nav-links a       { color: var(--skn-muted) !important; }
html[data-theme="light"] .lp-nav-links a:hover { color: var(--skn-gold) !important; }
html[data-theme="dark"]  .lp-nav-links,
html[data-theme="dark"]  .lp-nav-links a       { color: rgba(250,237,225,.78) !important; }
html[data-theme="dark"]  .lp-nav-links a:hover { color: var(--skn-gold) !important; }

html[data-theme="light"] .lp-nav-cta .btn-ghost       { color: var(--skn-muted) !important; }
html[data-theme="light"] .lp-nav-cta .btn-ghost:hover { color: var(--skn-gold) !important; }
html[data-theme="dark"]  .lp-nav-cta .btn-ghost       { color: rgba(250,237,225,.78) !important; }
html[data-theme="dark"]  .lp-nav-cta .btn-ghost:hover { color: var(--skn-gold) !important; }

/* Classic pill nav used in /signup, /dashboard, etc. */
html[data-theme="light"] .nav {
  background: var(--skn-surface) !important;
  border: 1px solid var(--skn-border) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-theme="dark"] .nav {
  background: var(--skn-surface) !important;
  border: 1px solid var(--skn-border) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-theme="light"] .nav .brand-word,
html[data-theme="dark"]  .nav .brand-word,
html[data-theme="light"] .lp-nav .brand-word,
html[data-theme="dark"]  .lp-nav .brand-word { color: var(--skn-gold) !important; }

html[data-theme="light"] .nav .pill,
html[data-theme="light"] .navlinks .pill {
  background: var(--skn-surface) !important;
  border: 1px solid var(--skn-border) !important;
  color: var(--skn-text) !important;
}
html[data-theme="light"] .nav .pill:hover,
html[data-theme="light"] .navlinks .pill:hover {
  background: var(--skn-gold-soft) !important;
  border-color: var(--skn-gold) !important;
  color: var(--skn-gold-2) !important;
}
html[data-theme="dark"] .nav .pill,
html[data-theme="dark"] .navlinks .pill {
  background: var(--skn-surface) !important;
  border: 1px solid var(--skn-border) !important;
  color: var(--skn-text) !important;
}
html[data-theme="dark"] .nav .pill:hover,
html[data-theme="dark"] .navlinks .pill:hover {
  background: var(--skn-surface-2) !important;
  border-color: var(--skn-gold) !important;
  color: var(--skn-gold) !important;
}

/* CTA pill in pill-nav (e.g. "Sign up"). */
html[data-theme="light"] .nav .navlinks .pill.pill-cta,
html[data-theme="dark"]  .nav .navlinks .pill.pill-cta {
  background: linear-gradient(90deg, var(--skn-gold) 0%, var(--skn-gold-hover) 100%) !important;
  border: 1px solid var(--skn-gold) !important;
  color: #111827 !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(212,169,44,.18) !important;
}
html[data-theme="light"] .nav .navlinks .pill.pill-cta:hover,
html[data-theme="dark"]  .nav .navlinks .pill.pill-cta:hover {
  background: linear-gradient(90deg, var(--skn-gold-hover) 0%, var(--skn-gold) 100%) !important;
  color: #111827 !important;
  box-shadow: 0 8px 22px rgba(212,169,44,.32) !important;
}

/* ─────────────────────────────────────────────────────────────────
   5) Buttons. Primary = solid gold, secondary = outlined gold.
   ───────────────────────────────────────────────────────────────── */
html[data-theme="light"] .btn,
html[data-theme="dark"]  .btn {
  background: linear-gradient(90deg, var(--skn-gold) 0%, var(--skn-gold-hover) 100%) !important;
  color: #111827 !important;
  border: 1px solid var(--skn-gold) !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  font-family: 'Poppins', system-ui, sans-serif !important;
  letter-spacing: -.005em;
  /* Tight inset ring instead of a wide halo, so the button reads as a
     solid object on cream/graphite without bleeding onto siblings. */
  box-shadow: 0 1px 0 rgba(255,255,255,.30) inset, 0 2px 6px rgba(184,134,66,.12) !important;
}
html[data-theme="light"] .btn:hover {
  background: linear-gradient(90deg, var(--skn-gold-hover) 0%, var(--skn-gold) 100%) !important;
  color: #111827 !important;
  box-shadow: 0 8px 28px rgba(212,169,44,.32) !important;
  transform: translateY(-1px);
}
html[data-theme="dark"] .btn { color: #050505 !important; }
html[data-theme="dark"] .btn:hover {
  background: linear-gradient(90deg, #F0C94A 0%, var(--skn-gold) 100%) !important;
  color: #050505 !important;
  box-shadow: 0 8px 28px rgba(240,201,74,.32) !important;
  transform: translateY(-1px);
}

html[data-theme="light"] .btn.secondary,
html[data-theme="light"] .btn.ghost {
  background: transparent !important;
  border: 1px solid var(--skn-gold) !important;
  color: var(--skn-gold) !important;
  box-shadow: none !important;
}
html[data-theme="light"] .btn.secondary:hover,
html[data-theme="light"] .btn.ghost:hover {
  background: var(--skn-gold-soft-2) !important;
  color: var(--skn-gold) !important;
  box-shadow: 0 6px 18px rgba(212,169,44,.12) !important;
}
html[data-theme="dark"] .btn.secondary,
html[data-theme="dark"] .btn.ghost {
  background: transparent !important;
  border: 1px solid var(--skn-gold-2) !important;
  color: var(--skn-gold) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .btn.secondary:hover,
html[data-theme="dark"] .btn.ghost:hover {
  background: var(--skn-surface) !important;
  color: var(--skn-gold-hover) !important;
  box-shadow: 0 6px 18px rgba(212,169,44,.18) !important;
}

/* The button shimmer pseudo overlay - tone its tint to gold. */
html[data-theme="light"] .btn::after,
html[data-theme="dark"]  .btn::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.40), transparent) !important;
}

/* ─────────────────────────────────────────────────────────────────
   6) Cards / panels / sections.
   ───────────────────────────────────────────────────────────────── */
/* "Sezioni secondarie" -> standard surface (#FFFFFF light, #17192B dark). */
html[data-theme="light"] .card,
html[data-theme="light"] .lp-camp-panel,
html[data-theme="light"] .lp-ai-inner,
html[data-theme="light"] .lp-step,
html[data-theme="light"] .lp-compare-bad,
html[data-theme="light"] .lp-compare-good,
html[data-theme="light"] .lp-testimonial-card,
html[data-theme="light"] .lp-cta,
html[data-theme="light"] .campaign-card {
  background: var(--skn-surface) !important;
  border: 1px solid var(--skn-border) !important;
  box-shadow: var(--skn-shadow) !important;
  border-radius: 16px !important;
}
html[data-theme="dark"] .card,
html[data-theme="dark"] .lp-camp-panel,
html[data-theme="dark"] .lp-ai-inner,
html[data-theme="dark"] .lp-step,
html[data-theme="dark"] .lp-compare-bad,
html[data-theme="dark"] .lp-compare-good,
html[data-theme="dark"] .lp-testimonial-card,
html[data-theme="dark"] .lp-cta,
html[data-theme="dark"] .campaign-card {
  background: var(--skn-surface) !important;
  border: 1px solid var(--skn-border) !important;
  box-shadow: var(--skn-shadow) !important;
  border-radius: 16px !important;
}

/* "Cards premium / statistiche" -> premium surface (#FCFAF5 light, #2A2A2A dark). */
html[data-theme="light"] .lp-stat,
html[data-theme="light"] .lp-trust-stat,
html[data-theme="light"] .metric-card,
html[data-theme="light"] .sub-card,
html[data-theme="light"] .pd-card,
html[data-theme="light"] .sp-card {
  background: var(--skn-surface-2) !important;
  border: 1px solid var(--skn-border) !important;
  box-shadow: var(--skn-shadow) !important;
  border-radius: 16px !important;
}
html[data-theme="dark"] .lp-stat,
html[data-theme="dark"] .lp-trust-stat,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .sub-card,
html[data-theme="dark"] .pd-card,
html[data-theme="dark"] .sp-card {
  background: var(--skn-surface-2) !important;
  border: 1px solid var(--skn-border) !important;
  box-shadow: var(--skn-shadow) !important;
  border-radius: 16px !important;
}

/* Stats grid (4-column container behind .lp-stat). */
html[data-theme="light"] .lp-stats {
  background: var(--skn-border) !important;
  border: 1px solid var(--skn-border) !important;
}
html[data-theme="dark"] .lp-stats {
  background: var(--skn-divider) !important;
  border: 1px solid var(--skn-divider) !important;
}

/* Steps grid container. */
html[data-theme="light"] .lp-steps {
  background: var(--skn-border) !important;
  border: 1px solid var(--skn-border) !important;
}
html[data-theme="dark"] .lp-steps {
  background: var(--skn-divider) !important;
  border: 1px solid var(--skn-divider) !important;
}

/* ─────────────────────────────────────────────────────────────────
   7) Text colors (headings + secondary).
   ───────────────────────────────────────────────────────────────── */
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] .s-title,
html[data-theme="light"] .lp-faq-q,
html[data-theme="light"] .lp-step-title,
html[data-theme="light"] .lp-testimonial-name,
html[data-theme="light"] .cc-title { color: var(--skn-text) !important; }

html[data-theme="light"] .lede,
html[data-theme="light"] .s-sub,
html[data-theme="light"] .lp-step-desc,
html[data-theme="light"] .lp-faq-a,
html[data-theme="light"] .lp-trust-label,
html[data-theme="light"] .lp-trust-lbl,
html[data-theme="light"] .lp-testimonial-role,
html[data-theme="light"] .lp-testimonial-quote,
html[data-theme="light"] .cc-brief,
html[data-theme="light"] .cc-meta-item,
html[data-theme="light"] .muted,
html[data-theme="light"] .meta { color: var(--skn-muted) !important; }

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] .s-title,
html[data-theme="dark"] .lp-faq-q,
html[data-theme="dark"] .lp-step-title,
html[data-theme="dark"] .lp-testimonial-name,
html[data-theme="dark"] .cc-title { color: var(--skn-text) !important; }

html[data-theme="dark"] .lede,
html[data-theme="dark"] .s-sub,
html[data-theme="dark"] .lp-step-desc,
html[data-theme="dark"] .lp-faq-a,
html[data-theme="dark"] .lp-trust-label,
html[data-theme="dark"] .lp-trust-lbl,
html[data-theme="dark"] .lp-testimonial-role,
html[data-theme="dark"] .lp-testimonial-quote,
html[data-theme="dark"] .cc-brief,
html[data-theme="dark"] .cc-meta-item,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .meta { color: var(--skn-muted) !important; }

/* Section kickers (small uppercase eyebrows) → secondary gold. */
html[data-theme="light"] .s-kicker,
html[data-theme="dark"]  .s-kicker,
html[data-theme="light"] .lp-step-n,
html[data-theme="dark"]  .lp-step-n,
html[data-theme="light"] .lp-stat .sl,
html[data-theme="dark"]  .lp-stat .sl,
html[data-theme="light"] .lp-kpi-item .kl,
html[data-theme="dark"]  .lp-kpi-item .kl,
html[data-theme="light"] .lp-camp-header h3,
html[data-theme="dark"]  .lp-camp-header h3 { color: var(--skn-gold-2) !important; }

/* ─────────────────────────────────────────────────────────────────
   8) "Go Viral" highlight - solid gold, drop the blue-to-purple
      gradient that the shell paints with -webkit-background-clip.
   ───────────────────────────────────────────────────────────────── */
html[data-theme="light"] .lp-hue-shift,
html[data-theme="dark"]  .lp-hue-shift {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: var(--skn-gold) !important;
  color: var(--skn-gold) !important;
  animation: none !important;
  filter: none !important;
}

/* Drop the SVG burst tint around the highlight too. */
html[data-theme="light"] .lp-vb-burst g[stroke="#3B5BFF"],
html[data-theme="dark"]  .lp-vb-burst g[stroke="#3B5BFF"] { stroke: var(--skn-gold) !important; }
html[data-theme="light"] .lp-vb-burst g[fill="#3B5BFF"] circle,
html[data-theme="dark"]  .lp-vb-burst g[fill="#3B5BFF"] circle { fill: var(--skn-gold) !important; }

/* ─────────────────────────────────────────────────────────────────
   9) Hero glow + ambient orbs.
   ───────────────────────────────────────────────────────────────── */
/* Hero wrap: keep it transparent so the body grid + corner glow show
   through and there's no visible rounded "box" around the globe. */
html[data-theme="light"] .lp-hero-wrap,
html[data-theme="dark"]  .lp-hero-wrap {
  background: transparent !important;
  overflow: visible !important;
}

html[data-theme="light"] .lp-orb-1,
html[data-theme="dark"]  .lp-orb-1 {
  background: radial-gradient(circle, rgba(212,169,44,.30), transparent 70%) !important;
}
html[data-theme="light"] .lp-orb-2,
html[data-theme="dark"]  .lp-orb-2 {
  background: radial-gradient(circle, rgba(184,134,66,.22), transparent 70%) !important;
}
html[data-theme="light"] .lp-orb-3,
html[data-theme="dark"]  .lp-orb-3 {
  background: radial-gradient(circle, rgba(224,184,74,.20), transparent 70%) !important;
}

/* Constellation canvas line color (set inline via JS uses #3B5BFF default;
   the actual line color is drawn via canvas API. We dim the canvas. */
html[data-theme="light"] .lp-net { opacity: .35 !important; }
html[data-theme="dark"]  .lp-net { opacity: .55 !important; }
html[data-theme="light"] .lp-spot {
  background: radial-gradient(280px 280px at var(--sx,50%) var(--sy,50%), rgba(212,169,44,.22), transparent 70%) !important;
  mix-blend-mode: multiply !important;
}
html[data-theme="dark"] .lp-spot {
  background: radial-gradient(280px 280px at var(--sx,50%) var(--sy,50%), rgba(212,169,44,.22), transparent 70%) !important;
  mix-blend-mode: screen !important;
}

/* Hero h1: cream halo so it pops against the dark globe behind it. */
html[data-theme="light"] .lp-hero h1 {
  text-shadow:
    0 2px 4px  rgba(248,247,244,.95),
    0 4px 28px rgba(248,247,244,.85),
    0 0 60px   rgba(248,247,244,.6) !important;
}
/* Lede paragraph uses the spec secondary-text palette (#6B7280 light /
   #B88642 dark) but at weight 500 with a strong page-color halo so it
   stays legible over both the cream/black page and the dark globe. */
/* Lede: gold glowing editorial copy. The cream knockout halo is kept so
   it reads clean over the dark globe; the gold inner shadow gives the
   "premium" shimmer the user asked for. */
html[data-theme="light"] .lp-hero .lede {
  color: #B88642 !important;
  font-weight: 600 !important;
  text-shadow:
    -1px -1px 0 rgba(248,247,244,1),
     1px -1px 0 rgba(248,247,244,1),
    -1px  1px 0 rgba(248,247,244,1),
     1px  1px 0 rgba(248,247,244,1),
    -2px  0   0 rgba(248,247,244,1),
     2px  0   0 rgba(248,247,244,1),
     0   -2px 0 rgba(248,247,244,1),
     0    2px 0 rgba(248,247,244,1),
     0 0 12px rgba(212,169,44,.55),
     0 0 28px rgba(212,169,44,.32) !important;
}
html[data-theme="dark"] .lp-hero h1 {
  text-shadow:
    0 2px 4px  rgba(5,5,5,.95),
    0 4px 28px rgba(5,5,5,.85),
    0 0 60px   rgba(5,5,5,.7) !important;
}
html[data-theme="dark"] .lp-hero .lede {
  color: #D4A92C !important;
  font-weight: 600 !important;
  text-shadow:
    0 1px 0  rgba(5,5,5,1),
    0 0 10px rgba(5,5,5,1),
    0 0 22px rgba(5,5,5,.95),
    0 0 26px rgba(212,169,44,.45),
    0 0 48px rgba(212,169,44,.30) !important;
}

/* ─────────────────────────────────────────────────────────────────
   10) Badges / pills (the "Clipping marketplace" hero badge, etc.).
   ───────────────────────────────────────────────────────────────── */
/* Hero + section badges (PUBLISHER PERK · PERFORMANCE SCORING,
   READY TO CLIP?, etc.). Use a warm-cream pill tonally derived from
   the page background (#F8F7F4) - not navy, not cool. The previous
   rgba(17,24,39,.04) read as a cool grey on cream. Switched to a
   bronze tint so it matches the rest of the gold palette. */
html[data-theme="light"] .lp-badge {
  background: rgba(184,134,66,.07) !important;
  color: var(--skn-gold-2) !important;
  border: 1px solid rgba(184,134,66,.18) !important;
}
html[data-theme="dark"] .lp-badge {
  background: rgba(250,237,225,.05) !important;
  color: var(--skn-gold) !important;
  border: 1px solid rgba(250,237,225,.14) !important;
}

html[data-theme="light"] .lp-dot,
html[data-theme="dark"]  .lp-dot {
  background: var(--skn-gold) !important;
  box-shadow: 0 0 8px rgba(212,169,44,.7) !important;
}

/* Campaign card badges (Live / joined / cr/1K). */
html[data-theme="light"] .badge,
html[data-theme="light"] .campaign-card .badge {
  background: var(--skn-gold-soft) !important;
  color: var(--skn-gold-2) !important;
  border: 1px solid var(--skn-border-2) !important;
}
html[data-theme="dark"] .badge,
html[data-theme="dark"] .campaign-card .badge {
  background: var(--skn-surface) !important;
  color: var(--skn-gold) !important;
  border: 1px solid var(--skn-gold-2) !important;
}

/* ─────────────────────────────────────────────────────────────────
   11) Trusted brands marquee (lp-plat-* and lp-trust-*).
   ───────────────────────────────────────────────────────────────── */
html[data-theme="light"] .lp-plat-marquee,
html[data-theme="light"] .lp-trust {
  background: var(--skn-surface) !important;
  border-radius: 16px !important;
  padding: 18px 0 !important;
}
html[data-theme="dark"] .lp-plat-marquee,
html[data-theme="dark"] .lp-trust {
  background: var(--skn-bg) !important;
}

html[data-theme="light"] .lp-plat-logo       { color: var(--skn-muted) !important; }
html[data-theme="light"] .lp-plat-logo:hover { color: var(--skn-gold) !important; }
html[data-theme="dark"]  .lp-plat-logo       { color: rgba(250,237,225,.55) !important; }
html[data-theme="dark"]  .lp-plat-logo:hover { color: var(--skn-gold) !important; }

html[data-theme="light"] .lp-trust-logo {
  color: var(--skn-text) !important;
  background: var(--skn-surface-2) !important;
  border: 1px solid var(--skn-border) !important;
  border-radius: 10px !important;
}
html[data-theme="light"] .lp-trust-logo:hover {
  color: var(--skn-gold-2) !important;
  border-color: var(--skn-gold) !important;
  background: var(--skn-gold-soft) !important;
}
html[data-theme="dark"] .lp-trust-logo {
  color: var(--skn-text) !important;
  background: var(--skn-surface) !important;
  border: 1px solid var(--skn-divider) !important;
  border-radius: 10px !important;
}
html[data-theme="dark"] .lp-trust-logo:hover {
  color: var(--skn-gold) !important;
  border-color: var(--skn-gold-2) !important;
  background: var(--skn-surface-2) !important;
}

/* ─────────────────────────────────────────────────────────────────
   12) KPI / stat numbers - drop the blue gradient text-clip
       and use a solid gold value.
   ───────────────────────────────────────────────────────────────── */
html[data-theme="light"] .lp-stat .sv,
html[data-theme="light"] .lp-kpi-item .kv,
html[data-theme="light"] .lp-trust-num {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: var(--skn-text) !important;
  color: var(--skn-text) !important;
  text-shadow: none !important;
}
html[data-theme="dark"] .lp-stat .sv,
html[data-theme="dark"] .lp-kpi-item .kv,
html[data-theme="dark"] .lp-trust-num {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: var(--skn-gold) !important;
  color: var(--skn-gold) !important;
  text-shadow: none !important;
}

/* Wallet glow used in dashboards: re-tint blue glow to gold. */
html[data-theme="light"] .wallet-glow,
html[data-theme="dark"]  .wallet-glow {
  color: var(--skn-gold) !important;
  text-shadow: 0 0 8px rgba(212,169,44,.65), 0 0 16px rgba(212,169,44,.40) !important;
}
html[data-theme="light"] .wallet-glow-currency,
html[data-theme="dark"]  .wallet-glow-currency {
  color: var(--skn-gold) !important;
  text-shadow: 0 0 6px rgba(212,169,44,.5) !important;
}

/* ─────────────────────────────────────────────────────────────────
   13) Success (growth percentage) green.
   ───────────────────────────────────────────────────────────────── */
html[data-theme="light"] .pos,
html[data-theme="light"] .ok,
html[data-theme="light"] .growth,
html[data-theme="light"] [class*="positive"],
html[data-theme="light"] [class*="growth"]    { color: var(--skn-success) !important; }

html[data-theme="dark"] .pos,
html[data-theme="dark"] .ok,
html[data-theme="dark"] .growth,
html[data-theme="dark"] [class*="positive"],
html[data-theme="dark"] [class*="growth"]     { color: var(--skn-success) !important; }

/* ─────────────────────────────────────────────────────────────────
   14) Dividers + FAQ separators.
   ───────────────────────────────────────────────────────────────── */
html[data-theme="light"] hr {
  border: 0 !important;
  height: 1px !important;
  background: var(--skn-divider) !important;
}
html[data-theme="dark"] hr {
  border: 0 !important;
  height: 1px !important;
  background: var(--skn-divider) !important;
}

html[data-theme="light"] .lp-faq-item {
  border-bottom: 1px solid var(--skn-divider) !important;
}
html[data-theme="dark"] .lp-faq-item {
  border-bottom: 1px solid var(--skn-divider) !important;
}
html[data-theme="light"] .lp-faq-item summary::after,
html[data-theme="dark"]  .lp-faq-item summary::after { color: var(--skn-gold) !important; }
html[data-theme="light"] .lp-faq-item[open] summary::after,
html[data-theme="dark"]  .lp-faq-item[open] summary::after { color: var(--skn-gold-2) !important; }
html[data-theme="light"] .lp-faq-item:hover .lp-faq-q,
html[data-theme="dark"]  .lp-faq-item:hover .lp-faq-q { color: var(--skn-gold) !important; }

/* ─────────────────────────────────────────────────────────────────
   15) Compare check + cross icons, premium icons.
   ───────────────────────────────────────────────────────────────── */
html[data-theme="light"] .lp-compare-check {
  background: var(--skn-gold-soft) !important;
  border: 1px solid var(--skn-gold) !important;
  color: var(--skn-gold-2) !important;
}
html[data-theme="dark"] .lp-compare-check {
  background: rgba(212,169,44,.14) !important;
  border: 1px solid var(--skn-gold-2) !important;
  color: var(--skn-gold) !important;
}

html[data-theme="light"] .lp-step-ico,
html[data-theme="dark"]  .lp-step-ico { color: var(--skn-gold) !important; }

/* Testimonial card quote-mark + verified pill. */
html[data-theme="light"] .lp-testimonial-quote::before,
html[data-theme="dark"]  .lp-testimonial-quote::before { color: var(--skn-gold) !important; }
html[data-theme="light"] .lp-testimonial-verified {
  color: var(--skn-gold-2) !important;
  background: var(--skn-gold-soft) !important;
  border: 1px solid var(--skn-border-2) !important;
}
html[data-theme="dark"] .lp-testimonial-verified {
  color: var(--skn-gold) !important;
  background: var(--skn-surface) !important;
  border: 1px solid var(--skn-gold-2) !important;
}
html[data-theme="light"] .lp-testimonial-avatar { border-color: var(--skn-gold) !important; }
html[data-theme="dark"]  .lp-testimonial-avatar { border-color: var(--skn-gold-2) !important; }
html[data-theme="light"] .lp-testimonial-author { border-top-color: var(--skn-divider) !important; }
html[data-theme="dark"]  .lp-testimonial-author { border-top-color: var(--skn-divider) !important; }

/* ─────────────────────────────────────────────────────────────────
   16) Selection + focus rings + scrollbar accent.
   ───────────────────────────────────────────────────────────────── */
html[data-theme="light"] ::selection {
  background: rgba(212,169,44,.30) !important;
  color: var(--skn-text) !important;
}
html[data-theme="dark"] ::selection {
  background: rgba(212,169,44,.40) !important;
  color: var(--skn-text) !important;
}
html[data-theme="light"] :focus-visible,
html[data-theme="dark"]  :focus-visible {
  outline: 2px solid var(--skn-gold) !important;
  outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────────
   17) Theme toggle button styling.
   ───────────────────────────────────────────────────────────────── */
html[data-theme="light"] .theme-toggle {
  background: var(--skn-surface) !important;
  border: 1px solid var(--skn-border) !important;
  color: var(--skn-muted) !important;
}
html[data-theme="light"] .theme-toggle:hover {
  background: var(--skn-gold-soft) !important;
  color: var(--skn-gold-2) !important;
  border-color: var(--skn-gold) !important;
}
html[data-theme="dark"] .theme-toggle {
  background: var(--skn-surface) !important;
  border: 1px solid var(--skn-gold-2) !important;
  color: var(--skn-gold) !important;
}
html[data-theme="dark"] .theme-toggle:hover {
  background: var(--skn-surface-2) !important;
  color: var(--skn-gold-hover) !important;
}

/* ─────────────────────────────────────────────────────────────────
   18) "View all" / inline links in section headers - tint to gold.
   ───────────────────────────────────────────────────────────────── */
html[data-theme="light"] a[style*="color:var(--gold2)"],
html[data-theme="dark"]  a[style*="color:var(--gold2)"] { color: var(--skn-gold) !important; }

/* Generic inline-styled blue text on landing - convert to gold. */
html[data-theme="light"] [style*="color:#A6C0FF"],
html[data-theme="dark"]  [style*="color:#A6C0FF"]  { color: var(--skn-gold) !important; }
html[data-theme="light"] [style*="color:#3B5BFF"],
html[data-theme="dark"]  [style*="color:#3B5BFF"]  { color: var(--skn-gold-2) !important; }
html[data-theme="light"] [style*="color:#0055fe"],
html[data-theme="dark"]  [style*="color:#0055fe"]  { color: var(--skn-gold) !important; }
html[data-theme="light"] [style*="color:#1e40af"],
html[data-theme="dark"]  [style*="color:#1e40af"]  { color: var(--skn-gold-2) !important; }
html[data-theme="light"] [style*="color:#1d4ed8"],
html[data-theme="dark"]  [style*="color:#1d4ed8"]  { color: var(--skn-gold) !important; }

/* Sparkline strokes / spark fills. */
html[data-theme="light"] .lp-spark path.lp-spark-line,
html[data-theme="dark"]  .lp-spark path.lp-spark-line { stroke: var(--skn-gold) !important; }
html[data-theme="light"] .lp-spark path.lp-spark-fill,
html[data-theme="dark"]  .lp-spark path.lp-spark-fill { fill: rgba(212,169,44,.20) !important; }

/* Mobile-friendly: ensure mq fade-overlays match the new bg color. */
html[data-theme="light"] .lp-marquee::before { background: linear-gradient(90deg,  var(--skn-bg) 5%, transparent) !important; }
html[data-theme="light"] .lp-marquee::after  { background: linear-gradient(-90deg, var(--skn-bg) 5%, transparent) !important; }
html[data-theme="dark"]  .lp-marquee::before { background: linear-gradient(90deg,  var(--skn-bg) 5%, transparent) !important; }
html[data-theme="dark"]  .lp-marquee::after  { background: linear-gradient(-90deg, var(--skn-bg) 5%, transparent) !important; }

/* ─────────────────────────────────────────────────────────────────
   19) Forms / inputs - light bg with gold focus.
   ───────────────────────────────────────────────────────────────── */
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select {
  background: var(--skn-surface) !important;
  color: var(--skn-text) !important;
  border: 1px solid var(--skn-border) !important;
  border-radius: 12px !important;
}
html[data-theme="light"] input:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] select:focus {
  outline: none !important;
  border-color: var(--skn-gold) !important;
  box-shadow: 0 0 0 3px rgba(212,169,44,.18) !important;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder { color: var(--skn-muted) !important; }

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background: var(--skn-surface) !important;
  color: var(--skn-text) !important;
  border: 1px solid var(--skn-divider) !important;
  border-radius: 12px !important;
}
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
  outline: none !important;
  border-color: var(--skn-gold) !important;
  box-shadow: 0 0 0 3px rgba(212,169,44,.24) !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: var(--skn-muted) !important; }

/* ─────────────────────────────────────────────────────────────────
   20) Blueprint grid overlay (body::before) - re-tint from cobalt
       to gold; also enable it for dark mode (originally light-only).
   ───────────────────────────────────────────────────────────────── */
html[data-theme="light"] body { position: relative; }
html[data-theme="dark"]  body { position: relative; }

html[data-theme="light"] body::before {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  width: auto !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background:
    linear-gradient(rgba(212,169,44,1) 1px, transparent 0),
    linear-gradient(90deg, rgba(212,169,44,1) 1px, transparent 0) !important;
  background-size: 64px 64px, 64px 64px !important;
  background-repeat: repeat, repeat !important;
  /* Softer mask: only fade tiny strips at the very top/bottom so the
     grid stays visible across most of the viewport. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 4%, #000 96%, transparent 100%) !important;
          mask-image: linear-gradient(180deg, transparent 0%, #000 4%, #000 96%, transparent 100%) !important;
  filter: none !important;
  opacity: .22 !important;
}

html[data-theme="dark"] body::before {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  width: auto !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background:
    linear-gradient(rgba(212,169,44,1) 1px, transparent 0),
    linear-gradient(90deg, rgba(212,169,44,1) 1px, transparent 0) !important;
  background-size: 64px 64px, 64px 64px !important;
  background-repeat: repeat, repeat !important;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 4%, #000 96%, transparent 100%) !important;
          mask-image: linear-gradient(180deg, transparent 0%, #000 4%, #000 96%, transparent 100%) !important;
  filter: none !important;
  opacity: .26 !important;
}

/* body::after - re-tint corner radial glows from cobalt to gold. */
html[data-theme="light"] body::after {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  width: auto !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background:
    radial-gradient(circle at 50% 0%,  rgba(212,169,44,.18) 0%, transparent 55%),
    radial-gradient(circle at 92% 100%, rgba(212,169,44,.10) 0%, transparent 60%) !important;
  filter: none !important;
  opacity: 1 !important;
  -webkit-mask-image: none !important;
          mask-image: none !important;
}
html[data-theme="dark"] body::after {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  width: auto !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background:
    radial-gradient(circle at 50% 0%,  rgba(212,169,44,.18) 0%, transparent 55%),
    radial-gradient(circle at 92% 100%, rgba(212,169,44,.12) 0%, transparent 60%) !important;
  filter: none !important;
  opacity: 1 !important;
  -webkit-mask-image: none !important;
          mask-image: none !important;
}

/* Keep page content above the grid + glow layers. */
html[data-theme="light"] body > *,
html[data-theme="dark"]  body > * { position: relative; z-index: 1; }

/* Hide the grid on small viewports for legibility - matches the side-rail rule. */
@media (max-width: 760px) {
  html[data-theme="light"] body::before,
  html[data-theme="dark"]  body::before,
  html[data-theme="light"] body::after,
  html[data-theme="dark"]  body::after { display: none !important; }
}

/* ─────────────────────────────────────────────────────────────────
   21) Ambient orbs (.admin-ambience .orb-*) - re-tint to gold.
   ───────────────────────────────────────────────────────────────── */
html[data-theme="light"] .admin-ambience .orb-1,
html[data-theme="dark"]  .admin-ambience .orb-1 {
  background: radial-gradient(circle, rgba(212,169,44,.32), transparent 70%) !important;
}
html[data-theme="light"] .admin-ambience .orb-2,
html[data-theme="dark"]  .admin-ambience .orb-2 {
  background: radial-gradient(circle, rgba(184,134,66,.22), transparent 70%) !important;
}
html[data-theme="light"] .admin-ambience .orb-3,
html[data-theme="dark"]  .admin-ambience .orb-3 {
  background: radial-gradient(circle, rgba(224,184,74,.20), transparent 70%) !important;
}

/* In dark, give the orbs slightly more presence against the black bg. */
html[data-theme="dark"] .admin-ambience .orb { opacity: .55 !important; }

/* ─────────────────────────────────────────────────────────────────
   22) Page-hero spacing - kill the big empty band between the navbar
       and the page title on inner pages (leaderboard, users, etc.).
       Applies on both desktop and mobile.
   ───────────────────────────────────────────────────────────────── */
/* Inner-page heroes - apply the same tightening across every page that
   uses a *-hero wrapper (leaderboard, users directory, campaign detail,
   dashboard, etc.). The home landing (.lp-hero / .lp-hero-wrap) keeps
   its own spacing and is NOT targeted here. */
html[data-theme="light"] .lb-hero,
html[data-theme="dark"]  .lb-hero,
html[data-theme="light"] .udir-hero,
html[data-theme="dark"]  .udir-hero,
html[data-theme="light"] .r-hero,
html[data-theme="dark"]  .r-hero,
html[data-theme="light"] .cd-hero,
html[data-theme="dark"]  .cd-hero,
html[data-theme="light"] .dash-hero,
html[data-theme="dark"]  .dash-hero { padding-top: 10px !important; padding-bottom: 20px !important; }

/* Tighten the eyebrow / badge + h1 spacing inside any inner hero. */
html[data-theme="light"] .lb-hero .eyebrow,
html[data-theme="dark"]  .lb-hero .eyebrow,
html[data-theme="light"] .udir-hero .udir-badge,
html[data-theme="dark"]  .udir-hero .udir-badge,
html[data-theme="light"] .r-hero .r-hero-tier,
html[data-theme="dark"]  .r-hero .r-hero-tier,
html[data-theme="light"] .cd-hero .eyebrow,
html[data-theme="dark"]  .cd-hero .eyebrow,
html[data-theme="light"] .dash-hero .eyebrow,
html[data-theme="dark"]  .dash-hero .eyebrow { margin-bottom: 10px !important; }

html[data-theme="light"] .lb-hero h1,
html[data-theme="dark"]  .lb-hero h1,
html[data-theme="light"] .udir-hero h1,
html[data-theme="dark"]  .udir-hero h1,
html[data-theme="light"] .r-hero h1,
html[data-theme="dark"]  .r-hero h1,
html[data-theme="light"] .cd-hero h1,
html[data-theme="dark"]  .cd-hero h1,
html[data-theme="light"] .dash-hero h1,
html[data-theme="dark"]  .dash-hero h1 { margin: 0 0 8px !important; }

/* Outer .wrap padding-top: shell defaults to 28px which compounds the gap. */
html[data-theme="light"] .wrap,
html[data-theme="dark"]  .wrap { padding-top: 12px !important; }

@media (max-width: 760px) {
  html[data-theme="light"] .lb-hero,
  html[data-theme="dark"]  .lb-hero,
  html[data-theme="light"] .udir-hero,
  html[data-theme="dark"]  .udir-hero,
  html[data-theme="light"] .r-hero,
  html[data-theme="dark"]  .r-hero,
  html[data-theme="light"] .cd-hero,
  html[data-theme="dark"]  .cd-hero,
  html[data-theme="light"] .dash-hero,
  html[data-theme="dark"]  .dash-hero { padding-top: 4px !important; padding-bottom: 14px !important; }

  html[data-theme="light"] .lb-hero h1,
  html[data-theme="dark"]  .lb-hero h1,
  html[data-theme="light"] .udir-hero h1,
  html[data-theme="dark"]  .udir-hero h1,
  html[data-theme="light"] .r-hero h1,
  html[data-theme="dark"]  .r-hero h1 { font-size: clamp(24px, 7vw, 32px) !important; line-height: 1.12 !important; }

  html[data-theme="light"] .lb-hero .sub,
  html[data-theme="dark"]  .lb-hero .sub,
  html[data-theme="light"] .udir-hero .udir-sub,
  html[data-theme="dark"]  .udir-hero .udir-sub { font-size: 13px !important; margin-bottom: 12px !important; }

  html[data-theme="light"] .lb-hero .eyebrow,
  html[data-theme="dark"]  .lb-hero .eyebrow,
  html[data-theme="light"] .udir-hero .udir-badge,
  html[data-theme="dark"]  .udir-hero .udir-badge { margin-bottom: 8px !important; }

  html[data-theme="light"] .wrap,
  html[data-theme="dark"]  .wrap { padding-top: 6px !important; }
}

/* ─────────────────────────────────────────────────────────────────
   23) Glowing gold accent spans. The shell ships some inline spans
       that paint a blue/purple gradient via -webkit-background-clip
       text. Strip the gradient and replace with solid gold + a soft
       luminous shadow so they read as premium editorial highlights.
   ───────────────────────────────────────────────────────────────── */
html[data-theme="light"] [style*="-webkit-text-fill-color:transparent"],
html[data-theme="dark"]  [style*="-webkit-text-fill-color:transparent"],
html[data-theme="light"] [style*="background-clip:text"],
html[data-theme="dark"]  [style*="background-clip:text"],
html[data-theme="light"] [style*="-webkit-background-clip:text"],
html[data-theme="dark"]  [style*="-webkit-background-clip:text"] {
  background: none !important;
  -webkit-background-clip: unset !important;
          background-clip: unset !important;
  -webkit-text-fill-color: var(--skn-gold) !important;
  color: var(--skn-gold) !important;
}

/* Generic accent text shimmer applied to:
   - inline gold spans (style="color:var(--gold2)" and friends)
   - .glow-link / .glow-text / .accent helpers if present
   - the gradient-cleared spans from the rule above
   Light mode keeps a cream halo so the gold reads on cream;
   dark mode uses a black halo + outer gold glow. */
html[data-theme="light"] [style*="color:var(--gold2)"],
html[data-theme="light"] [style*="color:var(--gold)"],
html[data-theme="light"] .glow-link,
html[data-theme="light"] .glow-text,
html[data-theme="light"] .lp-vb-wrap .lp-hue-shift,
html[data-theme="light"] .s-title [style*="-webkit-text-fill-color:transparent"],
html[data-theme="light"] [style*="-webkit-background-clip:text"] {
  color: var(--skn-gold) !important;
  -webkit-text-fill-color: var(--skn-gold) !important;
  text-shadow:
    0 0 1px rgba(248,247,244,1),
    0 0 8px  rgba(212,169,44,.55),
    0 0 20px rgba(212,169,44,.35) !important;
}
html[data-theme="dark"] [style*="color:var(--gold2)"],
html[data-theme="dark"] [style*="color:var(--gold)"],
html[data-theme="dark"] .glow-link,
html[data-theme="dark"] .glow-text,
html[data-theme="dark"] .lp-vb-wrap .lp-hue-shift,
html[data-theme="dark"] .s-title [style*="-webkit-text-fill-color:transparent"],
html[data-theme="dark"] [style*="-webkit-background-clip:text"] {
  color: var(--skn-gold) !important;
  -webkit-text-fill-color: var(--skn-gold) !important;
  text-shadow:
    0 0 1px rgba(5,5,5,1),
    0 0 10px rgba(212,169,44,.65),
    0 0 24px rgba(212,169,44,.42) !important;
}

/* ─────────────────────────────────────────────────────────────────
   24) Widescreen hero band - the home above-fold (.lp-hero, .lp-trust,
       .lp-camp-strip, .lp-stats) lived at 820/1040px max-widths. Push
       them out to 1280-1320 so the whole band reads as wide as the
       case-studies bento grid below.
   ───────────────────────────────────────────────────────────────── */
/* Single source of truth: every landing + inner-page section shares
   the same max-width and the same left/right padding so their edges
   line up exactly on desktop. */
html[data-theme="light"], html[data-theme="dark"] {
  --skn-section-max: 1280px;
  --skn-section-px: 28px;
}

/* Every landing section uses width:100% so it fills the .wrap content
   area exactly. No inner padding (the .wrap already adds 28px of side
   gutter) so every section's left/right edges land on the same column. */
html[data-theme="light"] .lp-hero,         html[data-theme="dark"] .lp-hero,
html[data-theme="light"] .lp-trust,        html[data-theme="dark"] .lp-trust,
html[data-theme="light"] .lp-camp-strip,   html[data-theme="dark"] .lp-camp-strip,
html[data-theme="light"] .lp-stats,        html[data-theme="dark"] .lp-stats,
html[data-theme="light"] .lp-bento,        html[data-theme="dark"] .lp-bento,
html[data-theme="light"] .lp-faq,          html[data-theme="dark"] .lp-faq,
html[data-theme="light"] .lp-testimonials, html[data-theme="dark"] .lp-testimonials,
html[data-theme="light"] .lp-case-studies, html[data-theme="dark"] .lp-case-studies,
html[data-theme="light"] .lp-ai-unlock,    html[data-theme="dark"] .lp-ai-unlock,
html[data-theme="light"] .lp-cta,          html[data-theme="dark"] .lp-cta,
html[data-theme="light"] .lp-trust-metrics,html[data-theme="dark"] .lp-trust-metrics,
html[data-theme="light"] .lp-marquee,      html[data-theme="dark"] .lp-marquee,
html[data-theme="light"] .udir-toolbar,    html[data-theme="dark"] .udir-toolbar,
html[data-theme="light"] .udir-grid,       html[data-theme="dark"] .udir-grid,
html[data-theme="light"] .udir-hero,       html[data-theme="dark"] .udir-hero,
html[data-theme="light"] .lb-podium,       html[data-theme="dark"] .lb-podium,
html[data-theme="light"] .lb-table-wrap,   html[data-theme="dark"] .lb-table-wrap,
html[data-theme="light"] .lb-hero,         html[data-theme="dark"] .lb-hero {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}
/* The hero wrap is also a top-level landing block - same alignment. */
html[data-theme="light"] .lp-hero-wrap,
html[data-theme="dark"]  .lp-hero-wrap {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Hero typography stays separate from the unified container. */
html[data-theme="light"] .lp-hero h1,
html[data-theme="dark"]  .lp-hero h1 {
  font-size: clamp(46px, 7.6vw, 104px) !important;
  letter-spacing: -.04em !important;
  line-height: 1.0 !important;
  max-width: 1100px !important;
  margin-left: auto !important; margin-right: auto !important;
}
html[data-theme="light"] .lp-hero .lede,
html[data-theme="dark"]  .lp-hero .lede {
  max-width: 760px !important;
  font-size: clamp(15px, 1.4vw, 19px) !important;
  margin: 22px auto 0 !important;
}

/* Outer .wrap also aligned to the same edges. */
html[data-theme="light"] .wrap,
html[data-theme="dark"]  .wrap {
  max-width: var(--skn-section-max) !important;
  padding-left: var(--skn-section-px) !important;
  padding-right: var(--skn-section-px) !important;
}

/* Scroll-reveal animation: the shell scales sections to .98 before they
   enter view, which makes them measure ~24px narrower than aligned ones
   mid-animation. Drop the scale so every section is always at its true
   width and edges line up at all times. Keep the opacity fade-in. */
html[data-theme="light"] .lp-reveal,
html[data-theme="dark"]  .lp-reveal { transform: translateY(20px) !important; }
html[data-theme="light"] .lp-reveal.visible,
html[data-theme="dark"]  .lp-reveal.visible { transform: none !important; }

/* Live-campaigns card grid auto-fills the unified width on wide screens. */
@media (min-width: 1100px) {
  html[data-theme="light"] .lp-camp-panel > div[style*="grid"],
  html[data-theme="dark"]  .lp-camp-panel > div[style*="grid"] {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  }
}

/* Mobile: tighter side padding so the same sections still align but
   don't crush on small screens. */
@media (max-width: 760px) {
  html[data-theme="light"], html[data-theme="dark"] { --skn-section-px: 16px; }
  html[data-theme="light"] .lp-hero h1,
  html[data-theme="dark"]  .lp-hero h1 {
    font-size: clamp(34px, 8.4vw, 56px) !important;
    line-height: 1.06 !important;
  }
  html[data-theme="light"] .lp-hero .lede,
  html[data-theme="dark"]  .lp-hero .lede { font-size: 14px !important; }
}

/* ─────────────────────────────────────────────────────────────────
   25) Total cobalt -> gold conversion: every hover, glow, shadow,
       border, and ambient gradient that the shell painted in blue
       now paints in gold. This is the biggest selector block in
       the skin; it has to win the cascade against many shell rules.
   ───────────────────────────────────────────────────────────────── */

/* Redefine the shell's blue-tinted CSS variables to gold so any rule
   that references them switches automatically.
   Split between themes so `color:var(--gold2)` always clears WCAG AA
   on its native background: deep caramel on cream (light), bright gold
   on near-black (dark). Without the split, the dark-theme gold
   (#B88642) leaks into light surfaces and fails contrast on text. */
html[data-theme="light"] {
  --line:  rgba(212,169,44,.20);
  --gold:  #7A5314;
  --gold2: #6b4310;
  --gold3: rgba(212,169,44,.10);
  --primary: #B88642;
}
html[data-theme="dark"] {
  --line:  rgba(212,169,44,.20);
  --gold:  #D4A92C;
  --gold2: #B88642;
  --gold3: rgba(212,169,44,.10);
  --primary: #D4A92C;
}

/* Card / step / metric hover effects: replace blue glow with gold. */
html[data-theme="light"] .lp-step:hover,
html[data-theme="dark"]  .lp-step:hover {
  background: rgba(212,169,44,.06) !important;
}
html[data-theme="light"] .lp-step:hover::after,
html[data-theme="dark"]  .lp-step:hover::after {
  background: linear-gradient(90deg, transparent, rgba(212,169,44,.55), rgba(184,134,66,.55), transparent) !important;
}
html[data-theme="light"] .lp-step-n,
html[data-theme="dark"]  .lp-step-n { color: var(--skn-gold-2) !important; }

html[data-theme="light"] .card:hover,
html[data-theme="dark"]  .card:hover,
html[data-theme="light"] .kpi:hover,
html[data-theme="dark"]  .kpi:hover,
html[data-theme="light"] .lp-stat:hover,
html[data-theme="dark"]  .lp-stat:hover,
html[data-theme="light"] .sub-card:hover,
html[data-theme="dark"]  .sub-card:hover,
html[data-theme="light"] .lp-trust-stat:hover,
html[data-theme="dark"]  .lp-trust-stat:hover,
html[data-theme="light"] .pd-card:hover,
html[data-theme="dark"]  .pd-card:hover,
html[data-theme="light"] .sp-card:hover,
html[data-theme="dark"]  .sp-card:hover,
html[data-theme="light"] .adm-card:hover,
html[data-theme="dark"]  .adm-card:hover,
html[data-theme="light"] .metric:hover,
html[data-theme="dark"]  .metric:hover,
html[data-theme="light"] .panel:hover,
html[data-theme="dark"]  .panel:hover,
html[data-theme="light"] .stat:hover,
html[data-theme="dark"]  .stat:hover,
html[data-theme="light"] .glow-card:hover,
html[data-theme="dark"]  .glow-card:hover,
html[data-theme="light"] .podium-card:hover,
html[data-theme="dark"]  .podium-card:hover,
html[data-theme="light"] .row:hover,
html[data-theme="dark"]  .row:hover,
html[data-theme="light"] .tier-row:hover,
html[data-theme="dark"]  .tier-row:hover,
html[data-theme="light"] .lp-faq-item:hover,
html[data-theme="dark"]  .lp-faq-item:hover,
html[data-theme="light"] .lp-testimonial-card:hover,
html[data-theme="dark"]  .lp-testimonial-card:hover,
html[data-theme="light"] .lp-camp-panel:hover,
html[data-theme="dark"]  .lp-camp-panel:hover,
html[data-theme="light"] .lp-step:hover,
html[data-theme="dark"]  .lp-step:hover,
html[data-theme="light"] .lp-compare-bad:hover,
html[data-theme="dark"]  .lp-compare-bad:hover,
html[data-theme="light"] .lp-compare-good:hover,
html[data-theme="dark"]  .lp-compare-good:hover,
html[data-theme="light"] .lp-cta:hover,
html[data-theme="dark"]  .lp-cta:hover,
html[data-theme="light"] .lp-ai-inner:hover,
html[data-theme="dark"]  .lp-ai-inner:hover,
html[data-theme="light"] .campaign-card:hover,
html[data-theme="dark"]  .campaign-card:hover {
  box-shadow:
    0 18px 42px -18px rgba(212,169,44,.40),
    0 0 0 1px rgba(212,169,44,.28) !important;
  border-color: rgba(212,169,44,.36) !important;
}

/* Testimonial card rest + hover: shell paints rgba(0,85,254) bordering
   when the inline-style override fires. Bump specificity to (0,3,1)
   with html+attr+class+pseudo so we win even with shell !important. */
html[data-theme="light"] .lp-testimonial-card,
html[data-theme="dark"]  .lp-testimonial-card {
  border: 1px solid var(--skn-border) !important;
}
html[data-theme="light"] .lp-testimonial-card:hover,
html[data-theme="dark"]  .lp-testimonial-card:hover {
  border: 1px solid rgba(212,169,44,.45) !important;
}
html[data-theme="light"] .lp-testimonial-avatar,
html[data-theme="dark"]  .lp-testimonial-avatar {
  border: 1.5px solid var(--skn-gold) !important;
}

/* Light-theme metric tiles ship a blue inner glow at REST too (line 1047
   of shell.css). Force the same gold ambience at rest. Shell selector is
   (0,3,0); mine adds `html` to bump to (0,3,1). */
html[data-theme="light"] .metric,
html[data-theme="dark"]  .metric,
html[data-theme="light"] .metric-card,
html[data-theme="dark"]  .metric-card {
  box-shadow:
    0 8px 28px rgba(184,134,66,.10),
    inset 0 -16px 80px -32px rgba(212,169,44,.18) !important;
}
html[data-theme="light"] .metric:hover,
html[data-theme="dark"]  .metric:hover,
html[data-theme="light"] .metric-card:hover,
html[data-theme="dark"]  .metric-card:hover {
  box-shadow:
    0 14px 36px rgba(212,169,44,.22),
    inset 0 -20px 96px -32px rgba(212,169,44,.32),
    0 0 0 1px rgba(212,169,44,.28) !important;
  border-color: rgba(212,169,44,.36) !important;
}
html[data-theme="light"] .metric-card:hover,
html[data-theme="dark"]  .metric-card:hover {
  border-color: rgba(212,169,44,.36) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,.20), 0 0 0 1px rgba(212,169,44,.18) !important;
}
html[data-theme="light"] .campaign-card:hover,
html[data-theme="dark"]  .campaign-card:hover {
  border-color: rgba(212,169,44,.45) !important;
  box-shadow: 0 16px 48px rgba(17,24,39,.10), 0 0 0 1px rgba(212,169,44,.22) !important;
}
html[data-theme="light"] .enr-card:hover,
html[data-theme="dark"]  .enr-card:hover {
  border-color: rgba(212,169,44,.32) !important;
  box-shadow: 0 12px 30px rgba(212,169,44,.14) !important;
}
html[data-theme="light"] .pd-card:hover {
  border-color: rgba(212,169,44,.42) !important;
}
html[data-theme="dark"] .pd-card.pd-center,
html[data-theme="light"] .pd-card.pd-center {
  border-color: rgba(212,169,44,.42) !important;
}

/* Pill states. */
html[data-theme="light"] .pill.active,
html[data-theme="dark"]  .pill.active {
  background: rgba(212,169,44,.14) !important;
  border-color: rgba(212,169,44,.42) !important;
  color: var(--skn-gold-2) !important;
}
html[data-theme="light"] .pill-gold-outline,
html[data-theme="dark"]  .pill-gold-outline {
  background: transparent !important;
  border: 1px solid rgba(212,169,44,.55) !important;
  color: var(--skn-gold-2) !important;
}
html[data-theme="light"] #campFilter .pill.active,
html[data-theme="dark"]  #campFilter .pill.active {
  box-shadow: 0 4px 14px rgba(212,169,44,.28) !important;
}

/* Buttons. */
html[data-theme="light"] .gb-ig:hover,
html[data-theme="dark"]  .gb-ig:hover {
  box-shadow: 0 10px 30px rgba(212,169,44,.30), 0 0 0 1px rgba(212,169,44,.32) !important;
}
html[data-theme="light"] .pill-cta:hover,
html[data-theme="dark"]  .pill-cta:hover {
  box-shadow: 0 6px 20px rgba(212,169,44,.38) !important;
}

/* Tabs / Leaderboard tabs. */
html[data-theme="light"] .tabs a.active,
html[data-theme="dark"]  .tabs a.active,
html[data-theme="light"] .lb-tab.active,
html[data-theme="dark"]  .lb-tab.active {
  background: var(--skn-gold) !important;
  color: #111827 !important;
  box-shadow: 0 4px 14px rgba(212,169,44,.32) !important;
}
html[data-theme="dark"] .lb-tab.active { color: #050505 !important; }
html[data-theme="light"] .lb-tabs,
html[data-theme="dark"]  .lb-tabs {
  background: rgba(212,169,44,.05) !important;
  border: 1px solid rgba(212,169,44,.20) !important;
}

/* Inputs / focus. */
html[data-theme="light"] input:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] select:focus,
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
  outline: none !important;
  border-color: var(--skn-gold) !important;
  box-shadow: 0 0 0 3px rgba(212,169,44,.22) !important;
}

/* Scrollbar accent. */
html[data-theme="light"] ::-webkit-scrollbar-thumb,
html[data-theme="dark"]  ::-webkit-scrollbar-thumb {
  background: rgba(212,169,44,.25) !important;
}
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"]  ::-webkit-scrollbar-thumb:hover {
  background: rgba(212,169,44,.45) !important;
}

/* Generic ambience gradients in cards / panels - kill the blue tint. */
html[data-theme="light"] [style*="rgba(59,91,255"],
html[data-theme="dark"]  [style*="rgba(59,91,255"],
html[data-theme="light"] [style*="rgba( 59, 91, 255"],
html[data-theme="dark"]  [style*="rgba( 59, 91, 255"] {
  /* Can't programmatically swap a rgba() inside a value, but we can
     mask the most common backdrop with a gold overlay via box-shadow
     on hover/focus. The inline gradient stays blue at low alpha which
     is acceptable; the outer hover/focus halos are what matter. */
}

/* Pulse dots: brand-blue dot becomes gold. */
html[data-theme="light"] .pulse-dot,
html[data-theme="dark"]  .pulse-dot,
html[data-theme="light"] .pulse-dot-hot,
html[data-theme="dark"]  .pulse-dot-hot,
html[data-theme="light"] .pulse-dot-live,
html[data-theme="dark"]  .pulse-dot-live {
  background: var(--skn-gold) !important;
  box-shadow: 0 0 8px rgba(212,169,44,.7) !important;
}
html[data-theme="light"] .pulse-dot-hot::after,
html[data-theme="dark"]  .pulse-dot-hot::after {
  border: 1px solid rgba(212,169,44,.6) !important;
}

/* Wallet glow + tier-pulse aura - re-tint blue glow to gold. */
html[data-theme="light"] .wallet-glow,
html[data-theme="dark"]  .wallet-glow {
  color: var(--skn-gold) !important;
  text-shadow:
    0 0 8px  rgba(212,169,44,.95),
    0 0 16px rgba(212,169,44,.65),
    0 0 28px rgba(212,169,44,.35) !important;
}
html[data-theme="light"] .pill.wallet-chip,
html[data-theme="dark"]  .pill.wallet-chip,
html[data-theme="light"] #wallet-chip,
html[data-theme="dark"]  #wallet-chip {
  background: linear-gradient(135deg, rgba(212,169,44,.25), rgba(184,134,66,.18)) !important;
  border-color: rgba(212,169,44,.55) !important;
  box-shadow:
    0 0 14px rgba(212,169,44,.30),
    inset 0 0 8px rgba(184,134,66,.15) !important;
}

/* IG sweep / brand mark drop shadow on hover. */
html[data-theme="light"] .brand:hover .brand-mark,
html[data-theme="dark"]  .brand:hover .brand-mark {
  filter: drop-shadow(0 0 8px rgba(212,169,44,.55)) !important;
}

/* Theme toggle - gold focus ring. */
html[data-theme="light"] .theme-toggle:hover,
html[data-theme="dark"]  .theme-toggle:hover {
  border-color: rgba(212,169,44,.45) !important;
}

/* Section progress sweep + arc strokes in dashboards. */
html[data-theme="light"] [style*="stroke:#3B5BFF"],
html[data-theme="dark"]  [style*="stroke:#3B5BFF"],
html[data-theme="light"] [style*="stroke:#A6C0FF"],
html[data-theme="dark"]  [style*="stroke:#A6C0FF"],
html[data-theme="light"] [style*="stroke:rgba(59,91,255"],
html[data-theme="dark"]  [style*="stroke:rgba(59,91,255"] {
  stroke: var(--skn-gold) !important;
}
html[data-theme="light"] [style*="fill:#3B5BFF"],
html[data-theme="dark"]  [style*="fill:#3B5BFF"],
html[data-theme="light"] [style*="fill:#A6C0FF"],
html[data-theme="dark"]  [style*="fill:#A6C0FF"],
html[data-theme="light"] [style*="fill:rgba(59,91,255"],
html[data-theme="dark"]  [style*="fill:rgba(59,91,255"] {
  fill: var(--skn-gold) !important;
}

/* Sparkline / spark fill paths (used in panels). */
html[data-theme="light"] svg [stroke="#3B5BFF"],
html[data-theme="dark"]  svg [stroke="#3B5BFF"],
html[data-theme="light"] svg [stroke="#A6C0FF"],
html[data-theme="dark"]  svg [stroke="#A6C0FF"] { stroke: var(--skn-gold) !important; }
html[data-theme="light"] svg [fill="#3B5BFF"],
html[data-theme="dark"]  svg [fill="#3B5BFF"],
html[data-theme="light"] svg [fill="#A6C0FF"],
html[data-theme="dark"]  svg [fill="#A6C0FF"] { fill: var(--skn-gold) !important; }

/* "Live" / countdown / "View all -> " inline blue links and texts. */
html[data-theme="light"] [style*="color:#3B5BFF"],
html[data-theme="dark"]  [style*="color:#3B5BFF"],
html[data-theme="light"] [style*="color:#3b82f6"],
html[data-theme="dark"]  [style*="color:#3b82f6"],
html[data-theme="light"] [style*="color:#8b5cf6"],
html[data-theme="dark"]  [style*="color:#8b5cf6"],
html[data-theme="light"] [style*="color:rgba(59,91,255"],
html[data-theme="dark"]  [style*="color:rgba(59,91,255"],
html[data-theme="light"] [style*="color:rgba(59,130,246"],
html[data-theme="dark"]  [style*="color:rgba(59,130,246"] {
  color: var(--skn-gold) !important;
}

/* Inline blue panels/dividers/borders ("Four steps, end-to-end" band
   and friends) — re-tint backgrounds + borders to soft gold. The
   shell ships a [data-theme="light"] override with specificity (0,3,0)
   that turns these gradients into a different blue, so we add an
   extra [style*=...] match to push our specificity to (0,3,1) and win.
   Skip elements that also use background-clip:text (those are
   gradient-text spans like "Zero screenshots, zero disputes" and
   should stay as inline gold text, NOT card boxes). */
html[data-theme="light"] [style*="rgba(59,130,246"][style*="linear-gradient"]:not([style*="-webkit-text-fill-color"]):not([style*="background-clip:text"]),
html[data-theme="dark"]  [style*="rgba(59,130,246"][style*="linear-gradient"]:not([style*="-webkit-text-fill-color"]):not([style*="background-clip:text"]),
html[data-theme="light"] [style*="rgba(59, 130, 246"][style*="linear-gradient"]:not([style*="-webkit-text-fill-color"]):not([style*="background-clip:text"]),
html[data-theme="dark"]  [style*="rgba(59, 130, 246"][style*="linear-gradient"]:not([style*="-webkit-text-fill-color"]):not([style*="background-clip:text"]),
html[data-theme="light"] [style*="#3b82f6"][style*="background"]:not([style*="-webkit-text-fill-color"]):not([style*="background-clip:text"]),
html[data-theme="dark"]  [style*="#3b82f6"][style*="background"]:not([style*="-webkit-text-fill-color"]):not([style*="background-clip:text"]),
html[data-theme="light"] [style*="#8b5cf6"][style*="background"]:not([style*="-webkit-text-fill-color"]):not([style*="background-clip:text"]),
html[data-theme="dark"]  [style*="#8b5cf6"][style*="background"]:not([style*="-webkit-text-fill-color"]):not([style*="background-clip:text"]) {
  background: linear-gradient(160deg, rgba(212,169,44,.10), rgba(252,250,245,.95)) !important;
  border: 1px solid rgba(212,169,44,.32) !important;
}
html[data-theme="dark"] [style*="rgba(59,130,246"][style*="linear-gradient"]:not([style*="-webkit-text-fill-color"]):not([style*="background-clip:text"]),
html[data-theme="dark"] [style*="#3b82f6"][style*="background"]:not([style*="-webkit-text-fill-color"]):not([style*="background-clip:text"]) {
  background: linear-gradient(160deg, rgba(212,169,44,.10), var(--skn-surface-2)) !important;
}
/* Solid blue divider hairlines inside those panels. */
html[data-theme="light"] [style*="rgba(59,130,246"][style*="height:1px"],
html[data-theme="dark"]  [style*="rgba(59,130,246"][style*="height:1px"],
html[data-theme="light"] [style*="rgba(59,130,246"] [style*="height:1px"],
html[data-theme="dark"]  [style*="rgba(59,130,246"] [style*="height:1px"] {
  background: linear-gradient(90deg, var(--skn-gold), rgba(212,169,44,.20), transparent) !important;
}

/* Constellation network and ambience canvases - already white now,
   ensure ambience radial halos pick up gold. */
html[data-theme="light"] .admin-ambience .orb,
html[data-theme="dark"]  .admin-ambience .orb { opacity: .55 !important; }

/* The "tier-pulse" outline ring (gold by default in shell) - keep but
   pin to the new gold so it doesn't fall back to an old value. */
html[data-theme="light"] .tier-pulse,
html[data-theme="dark"]  .tier-pulse { --tier-glow: rgba(212,169,44,.7); }

/* Ranks badges in leaderboard: keep the historical r1=gold but make
   r2/r3 lean into the secondary bronze. */
html[data-theme="light"] .lb-rank.r2,
html[data-theme="dark"]  .lb-rank.r2 {
  background: rgba(184,134,66,.18) !important;
  border-color: rgba(184,134,66,.35) !important;
  color: var(--skn-gold-2) !important;
}
html[data-theme="light"] .lb-rank.r3,
html[data-theme="dark"]  .lb-rank.r3 {
  background: rgba(184,134,66,.12) !important;
  border-color: rgba(184,134,66,.25) !important;
  color: var(--skn-gold-2) !important;
}

/* ─────────────────────────────────────────────────────────────────
   26) Premium gold flair - layered animations on top of existing
       hover/pulse/shimmer hooks. Everything respects reduced motion
       (the @media block at the bottom of this file disables animations).
   ───────────────────────────────────────────────────────────────── */

/* ── A. Animated gold conic border on cards (light + dark) ── */
@property --skn-card-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes sknCardSpin { to { --skn-card-angle: 360deg; } }

html[data-theme="light"] .card,
html[data-theme="light"] .lp-camp-panel,
html[data-theme="light"] .lp-step,
html[data-theme="light"] .lp-stat,
html[data-theme="light"] .lp-testimonial-card,
html[data-theme="light"] .pd-card,
html[data-theme="light"] .campaign-card,
html[data-theme="dark"]  .card,
html[data-theme="dark"]  .lp-camp-panel,
html[data-theme="dark"]  .lp-step,
html[data-theme="dark"]  .lp-stat,
html[data-theme="dark"]  .lp-testimonial-card,
html[data-theme="dark"]  .pd-card,
html[data-theme="dark"]  .campaign-card {
  position: relative;
  isolation: isolate;
}
html[data-theme="light"] .card::before,
html[data-theme="light"] .lp-camp-panel::before,
html[data-theme="light"] .lp-step::before,
html[data-theme="light"] .lp-stat::before,
html[data-theme="light"] .lp-testimonial-card::before,
html[data-theme="light"] .pd-card::before,
html[data-theme="light"] .campaign-card::before,
html[data-theme="dark"]  .card::before,
html[data-theme="dark"]  .lp-camp-panel::before,
html[data-theme="dark"]  .lp-step::before,
html[data-theme="dark"]  .lp-stat::before,
html[data-theme="dark"]  .lp-testimonial-card::before,
html[data-theme="dark"]  .pd-card::before,
html[data-theme="dark"]  .campaign-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--skn-card-angle, 0deg),
    rgba(212,169,44,0)   0deg,
    rgba(212,169,44,.55) 80deg,
    rgba(240,201,74,.85) 140deg,
    rgba(184,134,66,.55) 200deg,
    rgba(212,169,44,0)   320deg,
    rgba(212,169,44,0)   360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  z-index: 1;
}
html[data-theme="light"] .card:hover::before,
html[data-theme="light"] .lp-camp-panel:hover::before,
html[data-theme="light"] .lp-step:hover::before,
html[data-theme="light"] .lp-stat:hover::before,
html[data-theme="light"] .lp-testimonial-card:hover::before,
html[data-theme="light"] .pd-card:hover::before,
html[data-theme="light"] .campaign-card:hover::before,
html[data-theme="dark"]  .card:hover::before,
html[data-theme="dark"]  .lp-camp-panel:hover::before,
html[data-theme="dark"]  .lp-step:hover::before,
html[data-theme="dark"]  .lp-stat:hover::before,
html[data-theme="dark"]  .lp-testimonial-card:hover::before,
html[data-theme="dark"]  .pd-card:hover::before,
html[data-theme="dark"]  .campaign-card:hover::before {
  opacity: 1;
  animation: sknCardSpin 4s linear infinite;
}

/* ── B. Aurora gold halo behind primary buttons (animated bg-position) ── */
@keyframes sknAuroraDrift {
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}
html[data-theme="light"] .btn:not(.secondary):not(.ghost),
html[data-theme="dark"]  .btn:not(.secondary):not(.ghost) {
  background-image: linear-gradient(
    100deg,
    #D4A92C 0%,
    #F0C94A 25%,
    #FBE39A 50%,
    #F0C94A 75%,
    #D4A92C 100%
  ) !important;
  background-size: 220% 220% !important;
  animation: sknAuroraDrift 8s ease-in-out infinite;
}
html[data-theme="light"] .btn:not(.secondary):not(.ghost):hover,
html[data-theme="dark"]  .btn:not(.secondary):not(.ghost):hover {
  animation-duration: 2.6s;
}
/* Removed the heavy drop-shadow halo on primary btns - the existing
   inline box-shadow (gold ring) is enough; the halo bleed was too loud. */
html[data-theme="light"] .btn:not(.secondary):not(.ghost),
html[data-theme="dark"]  .btn:not(.secondary):not(.ghost) {
  filter: none !important;
}

/* ── C. Live/pulse dot - 3-ring expanding gold ripple ── */
@keyframes sknRipple {
  0%   { box-shadow: 0 0 0  0   rgba(212,169,44,.65),
                     0 0 0  0   rgba(212,169,44,.45),
                     0 0 0  0   rgba(212,169,44,.25); }
  60%  { box-shadow: 0 0 0  8px rgba(212,169,44,.00),
                     0 0 0 16px rgba(212,169,44,.00),
                     0 0 0 26px rgba(212,169,44,.00); }
  100% { box-shadow: 0 0 0  8px rgba(212,169,44,.00),
                     0 0 0 16px rgba(212,169,44,.00),
                     0 0 0 26px rgba(212,169,44,.00); }
}
html[data-theme="light"] .lp-dot,
html[data-theme="dark"]  .lp-dot,
html[data-theme="light"] .live-dot,
html[data-theme="dark"]  .live-dot,
html[data-theme="light"] .pulse-dot,
html[data-theme="dark"]  .pulse-dot {
  animation: sknRipple 2.4s ease-out infinite, wowDotRing 2.4s ease-in-out infinite !important;
}

/* ── D. Stat numbers - subtle gold shimmer scan across the digits ── */
@keyframes sknShimmerScan {
  0%   { background-position: -120% 0; }
  60%  { background-position:  220% 0; }
  100% { background-position:  220% 0; }
}
html[data-theme="dark"] .lp-stat .sv,
html[data-theme="dark"] .lp-kpi-item .kv,
html[data-theme="dark"] .lp-trust-num {
  background: linear-gradient(
    100deg,
    #D4A92C 0%,
    #F0C94A 35%,
    #FFE9A8 50%,
    #F0C94A 65%,
    #D4A92C 100%
  ) !important;
  background-size: 260% 100% !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  animation: sknShimmerScan 5.5s ease-in-out infinite;
}
/* Light theme: keep solid dark text but add a faint gold sweep glow. */
html[data-theme="light"] .lp-stat .sv,
html[data-theme="light"] .lp-kpi-item .kv,
html[data-theme="light"] .lp-trust-num {
  position: relative;
  text-shadow:
    0 0 10px rgba(212,169,44,.20),
    0 2px 6px rgba(17,24,39,.06) !important;
}

/* ── E. Step icons - slow rotating gold ring on hover ── */
@keyframes sknRingRotate { to { transform: rotate(360deg); } }
html[data-theme="light"] .lp-step-ico,
html[data-theme="dark"]  .lp-step-ico {
  position: relative;
  width: 44px;
  height: 44px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
html[data-theme="light"] .lp-step-ico::before,
html[data-theme="dark"]  .lp-step-ico::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(212,169,44,0)   0deg,
    rgba(212,169,44,.75) 100deg,
    rgba(240,201,74,.95) 180deg,
    rgba(212,169,44,.55) 260deg,
    rgba(212,169,44,0)   360deg
  );
  -webkit-mask:
    radial-gradient(circle, transparent 50%, #000 53%);
          mask:
    radial-gradient(circle, transparent 50%, #000 53%);
  opacity: 0;
  transition: opacity .35s ease;
  animation: sknRingRotate 5s linear infinite;
}
html[data-theme="light"] .lp-step:hover .lp-step-ico::before,
html[data-theme="dark"]  .lp-step:hover .lp-step-ico::before { opacity: .9; }
html[data-theme="light"] .lp-step:hover .lp-step-ico,
html[data-theme="dark"]  .lp-step:hover .lp-step-ico {
  filter: drop-shadow(0 0 12px rgba(212,169,44,.55));
}

/* ── F. Animated gold underline draw on hover (links, faq q, "Go Viral") ── */
@keyframes sknUnderlineDraw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
html[data-theme="light"] .lp-faq-item .lp-faq-q,
html[data-theme="dark"]  .lp-faq-item .lp-faq-q,
html[data-theme="light"] a.glow-link,
html[data-theme="dark"]  a.glow-link {
  position: relative;
  display: inline-block;
}
html[data-theme="light"] .lp-faq-item .lp-faq-q::after,
html[data-theme="dark"]  .lp-faq-item .lp-faq-q::after,
html[data-theme="light"] a.glow-link::after,
html[data-theme="dark"]  a.glow-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1.5px;
  background: linear-gradient(90deg,
    transparent,
    rgba(212,169,44,.95),
    rgba(240,201,74,1),
    rgba(212,169,44,.95),
    transparent);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}
html[data-theme="light"] .lp-faq-item:hover .lp-faq-q::after,
html[data-theme="dark"]  .lp-faq-item:hover .lp-faq-q::after,
html[data-theme="light"] a.glow-link:hover::after,
html[data-theme="dark"]  a.glow-link:hover::after { transform: scaleX(1); }

/* ── G. "Go Viral" - sweeping shimmer over the gold solid color ── */
@keyframes sknGoldHueShift {
  0%, 100% { filter: brightness(1)        drop-shadow(0 0 8px  rgba(212,169,44,.45)); }
  50%      { filter: brightness(1.18)     drop-shadow(0 0 18px rgba(240,201,74,.65)); }
}
html[data-theme="light"] .lp-hue-shift,
html[data-theme="dark"]  .lp-hue-shift {
  animation: sknGoldHueShift 3.6s ease-in-out infinite !important;
}

/* ── H. Trust marquee logos - on hover, gold pulse ── */
@keyframes sknPulseScale {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}
html[data-theme="light"] .lp-plat-logo:hover,
html[data-theme="dark"]  .lp-plat-logo:hover {
  animation: sknPulseScale 1.4s ease-in-out infinite;
  text-shadow: 0 0 12px rgba(212,169,44,.55);
}

/* ── I. Section kickers (.s-kicker) get a tiny animated gold tick before them ── */
html[data-theme="light"] .s-kicker,
html[data-theme="dark"]  .s-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
html[data-theme="light"] .s-kicker::before,
html[data-theme="dark"]  .s-kicker::before {
  content: '';
  width: 22px;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--skn-gold));
  display: inline-block;
}

/* ── J. Selection - layered gold + soft glow ── */
html[data-theme="light"] ::selection {
  background: rgba(240,201,74,.45) !important;
  color: #111827 !important;
  text-shadow: 0 0 8px rgba(212,169,44,.55) !important;
}
html[data-theme="dark"] ::selection {
  background: rgba(240,201,74,.55) !important;
  color: #050505 !important;
  text-shadow: 0 0 8px rgba(240,201,74,.65) !important;
}

/* ── K. Theme toggle - gold glow + spin on hover ── */
@keyframes sknToggleSpin { to { transform: rotate(360deg); } }
html[data-theme="light"] .theme-toggle:hover svg,
html[data-theme="dark"]  .theme-toggle:hover svg {
  animation: sknToggleSpin .6s cubic-bezier(.16,1,.3,1);
}
html[data-theme="light"] .theme-toggle:hover,
html[data-theme="dark"]  .theme-toggle:hover {
  box-shadow: 0 6px 18px rgba(212,169,44,.32) !important;
}

/* ── L. Wallet $ amount - solid bold gold (no animated glow). The
   previous sknWalletGlow pulse was too loud; per 2026-05-20 feedback
   keep just the boldness + gold color. */
html[data-theme="light"] .wallet-glow,
html[data-theme="dark"]  .wallet-glow,
html[data-theme="light"] .wallet-glow-currency,
html[data-theme="dark"]  .wallet-glow-currency {
  animation: none !important;
  text-shadow: none !important;
  color: var(--skn-gold) !important;
  font-weight: 800 !important;
}

/* ── M. Hero badge - subtle inner shimmer sweep ── */
html[data-theme="light"] .lp-badge,
html[data-theme="dark"]  .lp-badge {
  position: relative;
  overflow: hidden;
}
html[data-theme="light"] .lp-badge::after,
html[data-theme="dark"]  .lp-badge::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(
    105deg,
    transparent 25%,
    rgba(255,255,255,.45) 50%,
    transparent 75%
  );
  transform: skewX(-22deg);
  animation: sknBadgeSheen 5.5s ease-in-out infinite 1.4s;
  pointer-events: none;
}
@keyframes sknBadgeSheen {
  0%      { transform: skewX(-22deg) translateX(0); }
  22%     { transform: skewX(-22deg) translateX(420%); }
  100%    { transform: skewX(-22deg) translateX(420%); }
}

/* ── N. Reduced motion - kill everything new in one block. ── */
@media (prefers-reduced-motion: reduce) {
  html[data-theme="light"] .card::before,    html[data-theme="dark"] .card::before,
  html[data-theme="light"] .lp-step::before, html[data-theme="dark"] .lp-step::before,
  html[data-theme="light"] .lp-stat::before, html[data-theme="dark"] .lp-stat::before,
  html[data-theme="light"] .lp-camp-panel::before, html[data-theme="dark"] .lp-camp-panel::before,
  html[data-theme="light"] .lp-testimonial-card::before, html[data-theme="dark"] .lp-testimonial-card::before,
  html[data-theme="light"] .pd-card::before, html[data-theme="dark"] .pd-card::before,
  html[data-theme="light"] .campaign-card::before, html[data-theme="dark"] .campaign-card::before,
  html[data-theme="light"] .btn:not(.secondary):not(.ghost),
  html[data-theme="dark"]  .btn:not(.secondary):not(.ghost),
  html[data-theme="light"] .lp-dot, html[data-theme="dark"] .lp-dot,
  html[data-theme="light"] .lp-stat .sv, html[data-theme="dark"] .lp-stat .sv,
  html[data-theme="light"] .lp-step-ico::before, html[data-theme="dark"] .lp-step-ico::before,
  html[data-theme="light"] .lp-hue-shift, html[data-theme="dark"] .lp-hue-shift,
  html[data-theme="light"] .wallet-glow,  html[data-theme="dark"] .wallet-glow,
  html[data-theme="light"] .lp-badge::after, html[data-theme="dark"] .lp-badge::after,
  html[data-theme="light"] .theme-toggle:hover svg, html[data-theme="dark"] .theme-toggle:hover svg {
    animation: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   27) Hero lede typewriter: per-char cascade reveal + blinking gold
       cursor. The JS in partners_web.py wraps each char in
       <span class="lede-char" style="--i:N">; CSS staggers the entry.
   ───────────────────────────────────────────────────────────────── */
html[data-theme="light"] .lp-hero .lede .lede-char,
html[data-theme="dark"]  .lp-hero .lede .lede-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px) scale(.92);
  filter: blur(3px);
  transition:
    opacity .42s cubic-bezier(.16,1,.3,1),
    transform .42s cubic-bezier(.16,1,.3,1),
    filter .42s cubic-bezier(.16,1,.3,1),
    text-shadow .42s ease;
  transition-delay: calc(var(--i, 0) * 22ms + 600ms);
  /* Subtle gold flash as each letter lands. */
  will-change: opacity, transform, filter;
}
html[data-theme="light"] .lp-hero .lede.is-typing .lede-char,
html[data-theme="dark"]  .lp-hero .lede.is-typing .lede-char {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* Blinking gold cursor, parked at the end. It only starts blinking
   AFTER the last char lands (we approximate with a long animation
   delay; the typewriter caps at ~5s for the longest paragraphs). */
html[data-theme="light"] .lp-hero .lede .lede-cursor,
html[data-theme="dark"]  .lp-hero .lede .lede-cursor {
  display: inline-block;
  margin-left: 3px;
  font-weight: 700;
  color: var(--skn-gold);
  text-shadow:
    0 0 6px  rgba(212,169,44,.85),
    0 0 14px rgba(240,201,74,.55);
  opacity: 0;
  animation:
    sknCursorIn .25s ease forwards 5.4s,
    sknCursorBlink 1.05s steps(1) infinite 5.6s;
  /* Hide the cursor visually before the JS adds it for an instant -
     keeps the layout from jumping. */
}
@keyframes sknCursorIn  { to { opacity: 1; } }
@keyframes sknCursorBlink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Once the cascade is done, give every char a slow shimmer + a tiny
   gold pulse on hover so the line feels alive. */
@keyframes sknLedeGlowOnce {
  0%   { text-shadow:
           -1px -1px 0 rgba(248,247,244,1),
            1px -1px 0 rgba(248,247,244,1),
           -1px  1px 0 rgba(248,247,244,1),
            1px  1px 0 rgba(248,247,244,1),
            0 0 12px rgba(240,201,74,.95),
            0 0 26px rgba(240,201,74,.55); }
  100% { text-shadow:
           -1px -1px 0 rgba(248,247,244,1),
            1px -1px 0 rgba(248,247,244,1),
           -1px  1px 0 rgba(248,247,244,1),
            1px  1px 0 rgba(248,247,244,1),
           -2px  0   0 rgba(248,247,244,1),
            2px  0   0 rgba(248,247,244,1),
            0   -2px 0 rgba(248,247,244,1),
            0    2px 0 rgba(248,247,244,1),
            0 0 12px rgba(212,169,44,.55),
            0 0 28px rgba(212,169,44,.32); }
}
html[data-theme="light"] .lp-hero .lede.is-typing .lede-char {
  animation: sknLedeGlowOnce .8s ease-out forwards;
  animation-delay: calc(var(--i, 0) * 22ms + 600ms);
}
@keyframes sknLedeGlowOnceDark {
  0%   { text-shadow:
            0 1px 0  rgba(5,5,5,1),
            0 0 10px rgba(240,201,74,.95),
            0 0 22px rgba(240,201,74,.65); }
  100% { text-shadow:
            0 1px 0  rgba(5,5,5,1),
            0 0 10px rgba(5,5,5,1),
            0 0 22px rgba(5,5,5,.95),
            0 0 26px rgba(212,169,44,.45),
            0 0 48px rgba(212,169,44,.30); }
}
html[data-theme="dark"] .lp-hero .lede.is-typing .lede-char {
  animation: sknLedeGlowOnceDark .8s ease-out forwards;
  animation-delay: calc(var(--i, 0) * 22ms + 600ms);
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="light"] .lp-hero .lede .lede-char,
  html[data-theme="dark"]  .lp-hero .lede .lede-char {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
    transition: none !important;
  }
  html[data-theme="light"] .lp-hero .lede .lede-cursor,
  html[data-theme="dark"]  .lp-hero .lede .lede-cursor { display: none !important; }
}

/* ─────────────────────────────────────────────────────────────────
   28) Final-mile fixes: residual blue, readability, font cleanup.
   ───────────────────────────────────────────────────────────────── */

/* (a) "My Stats" wallet pill - the inline span sets a light blue-white
   text color. Override to bronze gold so it matches the chip. */
html[data-theme="light"] .pill.wallet-chip span[style*="color:rgba(238,242,255"],
html[data-theme="dark"]  .pill.wallet-chip span[style*="color:rgba(238,242,255"],
html[data-theme="light"] .pill.wallet-chip > span,
html[data-theme="dark"]  .pill.wallet-chip > span {
  color: var(--skn-gold-2) !important;
}
html[data-theme="light"] .pill.wallet-chip .wallet-glow,
html[data-theme="dark"]  .pill.wallet-chip .wallet-glow,
html[data-theme="light"] .pill.wallet-chip .wallet-glow-currency,
html[data-theme="dark"]  .pill.wallet-chip .wallet-glow-currency {
  color: var(--skn-gold) !important;
}

/* (b) Lede paragraph - readable dark text on cream + gold halo for the
   premium vibe (the gold lives in the surrounding aura, not in the
   foreground text). Earlier passes used bronze #B88642 / gold which
   failed contrast on the F8F7F4 background; locked to #1f2937. */
html[data-theme="light"] .lp-hero .lede {
  color: #1f2937 !important;
  font-weight: 500 !important;
  text-shadow:
    0 1px 0  rgba(248,247,244,1),
    0 0 12px rgba(248,247,244,1),
    0 0 26px rgba(212,169,44,.42),
    0 0 48px rgba(212,169,44,.22) !important;
}
html[data-theme="dark"] .lp-hero .lede {
  color: #FAEDE1 !important;
  font-weight: 500 !important;
  text-shadow:
    0 1px 0  rgba(5,5,5,1),
    0 0 12px rgba(5,5,5,1),
    0 0 26px rgba(212,169,44,.45),
    0 0 48px rgba(212,169,44,.22) !important;
}
/* Same softer halo on the per-char glow once the typewriter lands. */
@keyframes sknLedeGlowOnce {
  0%   { text-shadow:
            0 1px 0 rgba(248,247,244,.85),
            0 0 14px rgba(240,201,74,.95),
            0 0 30px rgba(240,201,74,.55); }
  100% { text-shadow:
            0 1px 0  rgba(248,247,244,.92),
            0 0 10px rgba(248,247,244,.85),
            0 0 22px rgba(212,169,44,.45),
            0 0 38px rgba(212,169,44,.22); }
}
@keyframes sknLedeGlowOnceDark {
  0%   { text-shadow:
            0 1px 0  rgba(5,5,5,.85),
            0 0 14px rgba(240,201,74,.95),
            0 0 30px rgba(240,201,74,.55); }
  100% { text-shadow:
            0 1px 0  rgba(5,5,5,.92),
            0 0 10px rgba(5,5,5,.85),
            0 0 22px rgba(212,169,44,.45),
            0 0 38px rgba(212,169,44,.22); }
}

/* (c) Dark-mode trust numbers - the gradient text-clip washes them
   out at small/regular sizes. Force a solid bright gold + halo so the
   second-row stats ("47.3M+", "$92K+", "<3h", "3") pop on black. */
html[data-theme="dark"] .lp-trust-num {
  background: none !important;
  -webkit-background-clip: unset !important;
          background-clip: unset !important;
  -webkit-text-fill-color: #F0C94A !important;
  color: #F0C94A !important;
  text-shadow:
    0 0 8px  rgba(212,169,44,.55),
    0 0 18px rgba(212,169,44,.30) !important;
  animation: none !important;
}
html[data-theme="light"] .lp-trust-num {
  background: none !important;
  -webkit-background-clip: unset !important;
          background-clip: unset !important;
  -webkit-text-fill-color: var(--skn-gold-2) !important;
  color: var(--skn-gold-2) !important;
  text-shadow: 0 0 10px rgba(212,169,44,.18) !important;
}

/* (d) Apply Poppins to body paragraphs that the shell still types in
   DM Sans. Includes the "Everything is automated..." sub-paragraph. */
html[data-theme="light"] .s-sub,
html[data-theme="dark"]  .s-sub,
html[data-theme="light"] p.s-sub,
html[data-theme="dark"]  p.s-sub,
html[data-theme="light"] .lp-step-desc,
html[data-theme="dark"]  .lp-step-desc,
html[data-theme="light"] .lp-faq-q,
html[data-theme="dark"]  .lp-faq-q,
html[data-theme="light"] .lp-faq-a,
html[data-theme="dark"]  .lp-faq-a,
html[data-theme="light"] .lp-testimonial-quote,
html[data-theme="dark"]  .lp-testimonial-quote {
  font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: -.005em;
}

/* (e) Flag and other buttons that were inline-coloured blue
   (`style="background:#1d4ed8;border-color:#1d4ed8"`) - re-paint
   them gold so the inline blue can't break the brand. */
html[data-theme="light"] .btn[style*="#1d4ed8"],
html[data-theme="dark"]  .btn[style*="#1d4ed8"],
html[data-theme="light"] .btn[style*="#1e40af"],
html[data-theme="dark"]  .btn[style*="#1e40af"],
html[data-theme="light"] [style*="background:#1d4ed8"],
html[data-theme="dark"]  [style*="background:#1d4ed8"],
html[data-theme="light"] [style*="background:#3b82f6"],
html[data-theme="dark"]  [style*="background:#3b82f6"] {
  background: linear-gradient(90deg, var(--skn-gold) 0%, #E0B84A 100%) !important;
  border: 1px solid var(--skn-gold) !important;
  color: #111827 !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.35) !important;
}

/* (f) "My Stats" page header h1 (uses inline color rgba light text) -
   keep gold + readable on cream/black. */
html[data-theme="light"] h1[style*="font-size:28px"],
html[data-theme="dark"]  h1[style*="font-size:28px"] {
  color: var(--skn-text) !important;
}

/* ─────────────────────────────────────────────────────────────────
   29) Operator console (ops.cliptics.co) - cliptics_shell.py ships
       its own BASE_CSS with #A6C0FF / #3B5BFF accents. Override the
       residual blue brand mark, op-badge, and status pills.
   ───────────────────────────────────────────────────────────────── */
/* Brand mark - new logo is an inline SVG "C + center dot" in gold on
   a TRANSPARENT background. Remove the dark plate, the rounded square,
   the box shadow - everything but the glyph. */
html[data-theme="light"] .brand-mark,
html[data-theme="dark"]  .brand-mark,
html:root[data-theme="light"] .nav.nav-pill .brand-mark,
html:root[data-theme="dark"]  .nav.nav-pill .brand-mark {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--skn-gold) !important;
  overflow: visible !important;
  width: auto !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center;
}
html[data-theme="light"] .brand-mark svg,
html[data-theme="dark"]  .brand-mark svg {
  display: block;
  filter: drop-shadow(0 2px 6px rgba(212,169,44,.35));
}
html[data-theme="light"] .brand-word,
html[data-theme="dark"]  .brand-word,
html:root[data-theme="light"] .nav.nav-pill .brand-word,
html:root[data-theme="dark"]  .nav.nav-pill .brand-word { color: var(--skn-gold) !important; }

html[data-theme="light"] .op-badge,
html[data-theme="dark"]  .op-badge,
html:root[data-theme="light"] .nav.nav-pill .op-badge,
html:root[data-theme="dark"]  .nav.nav-pill .op-badge {
  color: var(--skn-gold-2) !important;
  border-color: rgba(212,169,44,.40) !important;
  background: linear-gradient(135deg, rgba(212,169,44,.30), rgba(184,134,66,.20)) !important;
}

/* Primary CTA on ops console - shell paints a cobalt→cyan gradient with
   high-specificity :root selector. Match + override. */
html:root[data-theme="light"] .btn.primary,
html:root[data-theme="light"] .btn-primary,
html:root[data-theme="dark"]  .btn.primary,
html:root[data-theme="dark"]  .btn-primary {
  background: linear-gradient(90deg, var(--skn-gold) 0%, var(--skn-gold-hover) 100%) !important;
  color: #111827 !important;
  border: 1px solid var(--skn-gold) !important;
  box-shadow: 0 6px 20px rgba(212,169,44,.32) !important;
}

/* Op-email + theme-toggle on ops nav. */
html:root[data-theme="light"] .nav.nav-pill .op-email,
html:root[data-theme="dark"]  .nav.nav-pill .op-email {
  color: var(--skn-muted) !important;
}
html:root[data-theme="light"] .nav.nav-pill .theme-toggle,
html:root[data-theme="dark"]  .nav.nav-pill .theme-toggle {
  background: rgba(212,169,44,.10) !important;
  border-color: rgba(212,169,44,.30) !important;
  color: var(--skn-gold) !important;
}
html:root[data-theme="light"] .nav.nav-pill .theme-toggle:hover,
html:root[data-theme="dark"]  .nav.nav-pill .theme-toggle:hover {
  background: rgba(212,169,44,.22) !important;
  color: var(--skn-gold-hover) !important;
}

/* Generic blue status dots inside the operator nav / panels - re-tint. */
html[data-theme="light"] span[style*="background:#A6C0FF"],
html[data-theme="dark"]  span[style*="background:#A6C0FF"],
html[data-theme="light"] span[style*="background-color:#A6C0FF"],
html[data-theme="dark"]  span[style*="background-color:#A6C0FF"] {
  background: var(--skn-gold) !important;
}

/* Any element that still falls back to the legacy --gold (now redefined
   to gold by my Section 1) but where the shell hard-coded an A6C0FF
   color via style="" gets remapped. */
html[data-theme="light"] [style*="color:#A6C0FF"],
html[data-theme="dark"]  [style*="color:#A6C0FF"],
html[data-theme="light"] [style*="color: #A6C0FF"],
html[data-theme="dark"]  [style*="color: #A6C0FF"] { color: var(--skn-gold) !important; }
html[data-theme="light"] [style*="background:#A6C0FF"],
html[data-theme="dark"]  [style*="background:#A6C0FF"] { background: var(--skn-gold) !important; }
html[data-theme="light"] [style*="border-color:#A6C0FF"],
html[data-theme="dark"]  [style*="border-color:#A6C0FF"] { border-color: var(--skn-gold) !important; }

/* Operator console nav pills + cards inherit BASE_CSS blue glass tint -
   force gold gloss. */
html[data-theme="light"] .op-pill,
html[data-theme="dark"]  .op-pill,
html[data-theme="light"] .op-email,
html[data-theme="dark"]  .op-email,
html[data-theme="light"] .pill-back,
html[data-theme="dark"]  .pill-back,
html[data-theme="light"] .pill-logout,
html[data-theme="dark"]  .pill-logout {
  color: var(--skn-gold-2) !important;
  border-color: rgba(212,169,44,.30) !important;
}

/* INACTIVE nav pills on ops console (Overview, Analytics, Brands, ...).
   Shell assumed dark nav so it set text to near-white (rgba(238,242,255,.82))
   which becomes invisible on the now-light navbar. Force readable dark
   text + bronze border. */
html:root[data-theme="light"] .nav.nav-pill .navlinks .pill,
html:root[data-theme="dark"]  .nav.nav-pill .navlinks .pill {
  background: rgba(212,169,44,.08) !important;
  border-color: rgba(212,169,44,.30) !important;
  color: var(--skn-text) !important;
  box-shadow: none !important;
}
html:root[data-theme="light"] .nav.nav-pill .navlinks .pill:hover,
html:root[data-theme="dark"]  .nav.nav-pill .navlinks .pill:hover {
  background: rgba(212,169,44,.18) !important;
  border-color: rgba(212,169,44,.55) !important;
  color: var(--skn-gold-2) !important;
  box-shadow: 0 4px 14px rgba(212,169,44,.22) !important;
}
html:root[data-theme="light"] .nav.nav-pill .navlinks .pill svg,
html:root[data-theme="dark"]  .nav.nav-pill .navlinks .pill svg {
  stroke: currentColor !important;
}

/* pill-back ("Cliptics" link returning to main site) + pill-logout +
   op-email - all originally light text for dark nav. */
html:root[data-theme="light"] .nav.nav-pill .navlinks .pill-back,
html:root[data-theme="dark"]  .nav.nav-pill .navlinks .pill-back,
html:root[data-theme="light"] .nav.nav-pill .navlinks .pill-logout,
html:root[data-theme="dark"]  .nav.nav-pill .navlinks .pill-logout {
  background: transparent !important;
  border-color: rgba(212,169,44,.30) !important;
  color: var(--skn-muted) !important;
  box-shadow: none !important;
}
html:root[data-theme="light"] .nav.nav-pill .navlinks .pill-back:hover,
html:root[data-theme="dark"]  .nav.nav-pill .navlinks .pill-back:hover,
html:root[data-theme="light"] .nav.nav-pill .navlinks .pill-logout:hover,
html:root[data-theme="dark"]  .nav.nav-pill .navlinks .pill-logout:hover {
  background: rgba(212,169,44,.12) !important;
  color: var(--skn-gold) !important;
  border-color: var(--skn-gold) !important;
  box-shadow: 0 4px 14px rgba(212,169,44,.22) !important;
}

html:root[data-theme="light"] .nav.nav-pill .navlinks .op-email,
html:root[data-theme="dark"]  .nav.nav-pill .navlinks .op-email {
  color: var(--skn-muted) !important;
}

/* Active tab pill - shell paints a cobalt gradient + blue glow with
   high specificity in TWO places:
   - cliptics_shell.py (ops):   :root[data-theme=light] .nav.nav-pill .navlinks .pill.active (0,7,0)
   - partners shell.css (main): [data-theme=light] .nav .pill.active / .lp-nav .pill.active (0,4,0)
   Bump our selectors so we win in both contexts. */
html:root[data-theme="light"] .nav.nav-pill .navlinks .pill.active,
html:root[data-theme="dark"]  .nav.nav-pill .navlinks .pill.active,
html[data-theme="light"] .nav .pill.active,
html[data-theme="dark"]  .nav .pill.active,
html[data-theme="light"] .lp-nav .pill.active,
html[data-theme="dark"]  .lp-nav .pill.active,
html[data-theme="light"] .pill.active,
html[data-theme="dark"]  .pill.active {
  background: linear-gradient(135deg, var(--skn-gold) 0%, var(--skn-gold-hover) 100%) !important;
  background-image: linear-gradient(135deg, var(--skn-gold) 0%, var(--skn-gold-hover) 100%) !important;
  color: #111827 !important;
  border-color: rgba(212,169,44,.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    0 0 0 1px rgba(212,169,44,.45),
    0 6px 18px -2px rgba(212,169,44,.45) !important;
}
html:root[data-theme="light"] .nav.nav-pill .navlinks .pill.active svg,
html:root[data-theme="dark"]  .nav.nav-pill .navlinks .pill.active svg {
  stroke: #111827 !important;
}

/* Insight strip (operator dashboard) - inset blue cobalt glow → gold. */
html:root[data-theme="light"] .insight-strip,
html:root[data-theme="dark"]  .insight-strip,
html[data-theme="light"] .insight-strip,
html[data-theme="dark"]  .insight-strip {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -22px 44px -22px rgba(212,169,44,.20),
    0 12px 32px -16px rgba(184,134,66,.18) !important;
  border-color: rgba(212,169,44,.22) !important;
}

/* Hamburger menu icon bars on ops console (mobile nav toggle). */
html[data-theme="light"] .nav-toggle-btn span,
html[data-theme="dark"]  .nav-toggle-btn span,
html:root[data-theme="light"] .nav-toggle-btn span,
html:root[data-theme="dark"]  .nav-toggle-btn span {
  background: var(--skn-gold) !important;
}
html[data-theme="light"] .nav-toggle-btn,
html[data-theme="dark"]  .nav-toggle-btn {
  border-color: rgba(212,169,44,.32) !important;
  background: rgba(212,169,44,.08) !important;
}

/* Hamburger DRAWER (mobile/tablet ≤ 1200px). Shell ships a dark
   #060614 drawer with light text inside, but my skin already made
   the pills dark-text, so dark-on-dark = invisible. Repaint the
   drawer cream/white so the gold-themed dark pills read.
   Shell selector specificity: (0,5,0). We use (0,5,1) via html. */
@media (max-width: 1200px) {
  html:root[data-theme="light"] .nav.nav-pill .navlinks,
  html:root[data-theme="dark"]  .nav.nav-pill .navlinks {
    background: var(--skn-surface) !important;
    border: 1px solid var(--skn-border) !important;
    box-shadow: 0 24px 60px rgba(184,134,66,.18) !important;
  }
  html:root[data-theme="dark"] .nav.nav-pill .navlinks {
    background: var(--skn-surface) !important;
    border: 1px solid var(--skn-gold-2) !important;
    box-shadow: 0 24px 60px rgba(0,0,0,.55) !important;
  }
  /* Each pill inside the drawer keeps its gold-tinted readable state. */
  html:root[data-theme="light"] .nav.nav-pill .navlinks .pill,
  html:root[data-theme="dark"]  .nav.nav-pill .navlinks .pill {
    background: var(--skn-surface-2) !important;
    border: 1px solid var(--skn-border) !important;
    color: var(--skn-text) !important;
  }
  html:root[data-theme="light"] .nav.nav-pill .navlinks .pill:hover,
  html:root[data-theme="dark"]  .nav.nav-pill .navlinks .pill:hover {
    background: var(--skn-gold-soft) !important;
    border-color: var(--skn-gold) !important;
    color: var(--skn-gold-2) !important;
  }
  /* Active pill keeps the gold gradient. */
  html:root[data-theme="light"] .nav.nav-pill .navlinks .pill.active,
  html:root[data-theme="dark"]  .nav.nav-pill .navlinks .pill.active {
    background: linear-gradient(135deg, var(--skn-gold), var(--skn-gold-hover)) !important;
    color: #111827 !important;
    border-color: var(--skn-gold) !important;
  }
  /* Back / Logout / Email entries inside the drawer. */
  html:root[data-theme="light"] .nav.nav-pill .navlinks .pill-back,
  html:root[data-theme="dark"]  .nav.nav-pill .navlinks .pill-back,
  html:root[data-theme="light"] .nav.nav-pill .navlinks .pill-logout,
  html:root[data-theme="dark"]  .nav.nav-pill .navlinks .pill-logout {
    background: transparent !important;
    color: var(--skn-muted) !important;
    border: 1px solid var(--skn-border) !important;
  }
  html:root[data-theme="light"] .nav.nav-pill .navlinks .op-email,
  html:root[data-theme="dark"]  .nav.nav-pill .navlinks .op-email {
    color: var(--skn-muted) !important;
    border-top: 1px solid var(--skn-divider) !important;
  }
  /* The classic .nav drawer on cliptics.co main site uses the same
     pattern - reuse the same overrides. */
  html[data-theme="light"] .nav .navlinks,
  html[data-theme="dark"]  .nav .navlinks {
    background: var(--skn-surface) !important;
    border: 1px solid var(--skn-border) !important;
    box-shadow: 0 24px 60px rgba(184,134,66,.18) !important;
  }
  html[data-theme="light"] .nav .navlinks .pill,
  html[data-theme="dark"]  .nav .navlinks .pill {
    background: var(--skn-surface-2) !important;
    border: 1px solid var(--skn-border) !important;
    color: var(--skn-text) !important;
  }
}

html[data-theme="light"] .insight-strip span,
html[data-theme="dark"]  .insight-strip span {
  background-color: transparent !important;
}

/* Ops dashboard stat KPI numbers (.stat .value) - shell paints them with
   a cobalt gradient via background-image + text-clip. Override to gold. */
html:root[data-theme="light"] .stat .value,
html:root[data-theme="dark"]  .stat .value,
html[data-theme="light"] .stat .value,
html[data-theme="dark"]  .stat .value {
  background-image: linear-gradient(135deg, var(--skn-gold) 0%, var(--skn-gold-hover) 60%, var(--skn-gold-2) 100%) !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* Login card on ops.cliptics.co (cliptics_shell.login()). */
html[data-theme="light"] .login-card,
html[data-theme="dark"]  .login-card {
  background: var(--skn-surface) !important;
  border: 1px solid var(--skn-border) !important;
  box-shadow: var(--skn-shadow) !important;
}
html[data-theme="light"] .login-card h1,
html[data-theme="dark"]  .login-card h1 { color: var(--skn-gold) !important; }

/* ─────────────────────────────────────────────────────────────────
   30) Pages-wide blue cleanup. Specific spots that survived the
       earlier sweeps:
       - .cf-bar button (Filter on /campaigns) — hardcoded blue gradient
       - .udir-hero h1 .gold (Community header gradient) — class name
         is "gold" but the gradient was blue
       - .lp-nav-logo-mark (Cliptics chip in nav) — blue gradient
       - .tier-title-wow — pink/blue gradient
   ───────────────────────────────────────────────────────────────── */
html[data-theme="light"] .cf-bar button,
html[data-theme="dark"]  .cf-bar button,
html[data-theme="light"] form.cf-bar button,
html[data-theme="dark"]  form.cf-bar button {
  background: linear-gradient(135deg, var(--skn-gold), var(--skn-gold-2)) !important;
  color: #111827 !important;
  border: 1px solid var(--skn-gold) !important;
  box-shadow: 0 4px 14px rgba(212,169,44,.28) !important;
}

html[data-theme="light"] .udir-hero h1 .gold,
html[data-theme="dark"]  .udir-hero h1 .gold,
html[data-theme="light"] .gold,
html[data-theme="dark"]  .gold {
  background: linear-gradient(135deg, var(--skn-gold), var(--skn-gold-hover), var(--skn-gold-2)) !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

html[data-theme="light"] .lp-nav-logo-mark,
html[data-theme="dark"]  .lp-nav-logo-mark {
  background: linear-gradient(135deg, var(--skn-gold) 0%, var(--skn-gold-hover) 60%, var(--skn-gold-2) 100%) !important;
  color: #111827 !important;
  box-shadow: 0 4px 14px rgba(212,169,44,.35) !important;
}

html[data-theme="light"] .tier-title-wow,
html[data-theme="dark"]  .tier-title-wow {
  background: linear-gradient(135deg, var(--skn-gold) 0%, var(--skn-gold-hover) 50%, var(--skn-gold-2) 100%) !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* ─────────────────────────────────────────────────────────────────
   31) Mobile safety net - prevent ANY element from overflowing the
       viewport on small screens. Defense-in-depth: even if a specific
       page or section uses a fixed pixel width or a long unbroken
       string, the layout will not break the right edge.
   ───────────────────────────────────────────────────────────────── */
html[data-theme="light"], html[data-theme="dark"],
html[data-theme="light"] body, html[data-theme="dark"] body {
  max-width: 100vw !important;
  overflow-x: hidden !important;
  overflow-wrap: break-word;
  -webkit-text-size-adjust: 100%;
          text-size-adjust: 100%;
}

/* Long unbroken strings (URLs, hashes, long handles) must wrap. */
html[data-theme="light"] p,
html[data-theme="dark"]  p,
html[data-theme="light"] li,
html[data-theme="dark"]  li,
html[data-theme="light"] span,
html[data-theme="dark"]  span,
html[data-theme="light"] a,
html[data-theme="dark"]  a {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Media: images, video, canvas, svg must respect the container. */
html[data-theme="light"] img,
html[data-theme="dark"]  img,
html[data-theme="light"] video,
html[data-theme="dark"]  video,
html[data-theme="light"] svg:not(.lp-net):not(.lp-globe-canvas):not(.sparkline),
html[data-theme="dark"]  svg:not(.lp-net):not(.lp-globe-canvas):not(.sparkline) {
  max-width: 100%;
  height: auto;
}

/* Mobile + narrow tablet hard guards (≤ 760px). */
@media (max-width: 760px) {
  html[data-theme="light"], html[data-theme="dark"] {
    --skn-section-px: 14px;
  }
  html[data-theme="light"] body, html[data-theme="dark"] body {
    overflow-x: hidden !important;
  }
  /* Force everything inside body to respect parent width. */
  html[data-theme="light"] body *,
  html[data-theme="dark"]  body * {
    max-width: 100%;
  }
  /* Re-allow the constellation/globe canvases + marquee tracks to
     keep their own width (they are intentionally wider than viewport
     but inside overflow:hidden parents). */
  html[data-theme="light"] .lp-net, html[data-theme="dark"] .lp-net,
  html[data-theme="light"] .lp-globe-canvas, html[data-theme="dark"] .lp-globe-canvas,
  html[data-theme="light"] .lp-mq-track, html[data-theme="dark"] .lp-mq-track,
  html[data-theme="light"] .lp-plat-track, html[data-theme="dark"] .lp-plat-track {
    max-width: none;
  }
  /* Marquee containers must clip their wide children. */
  html[data-theme="light"] .lp-marquee, html[data-theme="dark"] .lp-marquee,
  html[data-theme="light"] .lp-plat-marquee, html[data-theme="dark"] .lp-plat-marquee {
    overflow: hidden !important;
  }
  /* Tables: scroll horizontally inside a container rather than busting layout. */
  html[data-theme="light"] table,
  html[data-theme="dark"]  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  /* Code / pre blocks wrap. */
  html[data-theme="light"] pre,
  html[data-theme="dark"]  pre,
  html[data-theme="light"] code,
  html[data-theme="dark"]  code {
    white-space: pre-wrap;
    word-break: break-word;
    max-width: 100%;
  }
  /* Inline styles that set explicit min-width >= 200px collapse to 0
     on mobile so they don't push grid cells off-screen. */
  html[data-theme="light"] [style*="min-width:180px"],
  html[data-theme="dark"]  [style*="min-width:180px"],
  html[data-theme="light"] [style*="min-width:200px"],
  html[data-theme="dark"]  [style*="min-width:200px"],
  html[data-theme="light"] [style*="min-width:220px"],
  html[data-theme="dark"]  [style*="min-width:220px"],
  html[data-theme="light"] [style*="min-width:240px"],
  html[data-theme="dark"]  [style*="min-width:240px"],
  html[data-theme="light"] [style*="min-width:260px"],
  html[data-theme="dark"]  [style*="min-width:260px"],
  html[data-theme="light"] [style*="min-width:280px"],
  html[data-theme="dark"]  [style*="min-width:280px"],
  html[data-theme="light"] [style*="min-width:300px"],
  html[data-theme="dark"]  [style*="min-width:300px"],
  html[data-theme="light"] [style*="minmax(220px"],
  html[data-theme="dark"]  [style*="minmax(220px"],
  html[data-theme="light"] [style*="minmax(260px"],
  html[data-theme="dark"]  [style*="minmax(260px"],
  html[data-theme="light"] [style*="minmax(280px"],
  html[data-theme="dark"]  [style*="minmax(280px"] {
    min-width: 0 !important;
  }
  /* Inline grid-template-columns with multiple columns: collapse to 1. */
  html[data-theme="light"] [style*="grid-template-columns:repeat(2,"],
  html[data-theme="dark"]  [style*="grid-template-columns:repeat(2,"],
  html[data-theme="light"] [style*="grid-template-columns:repeat(3,"],
  html[data-theme="dark"]  [style*="grid-template-columns:repeat(3,"],
  html[data-theme="light"] [style*="grid-template-columns:repeat(4,"],
  html[data-theme="dark"]  [style*="grid-template-columns:repeat(4,"] {
    grid-template-columns: 1fr !important;
  }
  /* Headlines on the home hero can no longer overflow.
     Long single words like "Clipping" or "marketplace" must break. */
  html[data-theme="light"] .lp-hero h1, html[data-theme="dark"] .lp-hero h1,
  html[data-theme="light"] h1, html[data-theme="dark"] h1 {
    overflow-wrap: anywhere;
    hyphens: auto;
  }
  /* The typewriter chars: keep them inline-block but allow wrapping
     between chars (which is the default since chars are spans). */
  html[data-theme="light"] .lede-char,
  html[data-theme="dark"]  .lede-char { max-width: 100%; }

  /* Nav: pill row wraps and the entire nav can scroll horizontally
     in pathological cases (many pills) without pushing the page. */
  html[data-theme="light"] .nav.nav-pill,
  html[data-theme="dark"]  .nav.nav-pill {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
  /* Operator console: collapse the navlinks under the hamburger so
     there's never a long horizontal pill bar trying to fit. */
  html[data-theme="light"] .nav.nav-pill .navlinks,
  html[data-theme="dark"]  .nav.nav-pill .navlinks {
    flex-wrap: wrap;
    gap: 4px;
  }
}

/* Extra-narrow (≤ 380px) – iPhone SE class. */
@media (max-width: 380px) {
  html[data-theme="light"], html[data-theme="dark"] {
    --skn-section-px: 10px;
  }
  html[data-theme="light"] .lp-hero h1,
  html[data-theme="dark"]  .lp-hero h1 {
    font-size: clamp(28px, 8vw, 44px) !important;
    line-height: 1.05 !important;
  }
  html[data-theme="light"] .btn,
  html[data-theme="dark"]  .btn {
    padding: 11px 18px !important;
    font-size: 13px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   32) Status badges + small pills - never wrap character-per-line.
       Section 31's mobile word-break can break a short word like
       "open" / "closed" into vertical letters when the column is
       narrow. Force nowrap on badge-class elements so they stay
       horizontal even in a tight table cell.
   ───────────────────────────────────────────────────────────────── */
html[data-theme="light"] .badge,
html[data-theme="dark"]  .badge,
html[data-theme="light"] .pill,
html[data-theme="dark"]  .pill,
html[data-theme="light"] .lp-badge,
html[data-theme="dark"]  .lp-badge,
html[data-theme="light"] .lb-rank,
html[data-theme="dark"]  .lb-rank,
html[data-theme="light"] .udir-badge,
html[data-theme="dark"]  .udir-badge,
html[data-theme="light"] .op-badge,
html[data-theme="dark"]  .op-badge,
html[data-theme="light"] .streak-flame,
html[data-theme="dark"]  .streak-flame,
html[data-theme="light"] .tag,
html[data-theme="dark"]  .tag,
html[data-theme="light"] .chip,
html[data-theme="dark"]  .chip,
html[data-theme="light"] .label,
html[data-theme="dark"]  .label {
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  flex-wrap: nowrap !important;
  width: -moz-fit-content;
  width: fit-content;
}

/* Mobile tables: keep words intact. Never break mid-word. If columns
   don't fit, the wrapping container (display:block + overflow-x:auto
   from Section 31) lets the user scroll horizontally. */
@media (max-width: 760px) {
  html[data-theme="light"] table td,
  html[data-theme="dark"]  table td,
  html[data-theme="light"] table th,
  html[data-theme="dark"]  table th {
    white-space: normal;
    word-break: normal !important;
    overflow-wrap: normal !important;
    -webkit-hyphens: none;
            hyphens: none;
    max-width: none !important;
    /* Each header/cell needs a sensible min-width so short labels like
       BRAND or PAYOUTS don't get squeezed under the cell's natural
       content width. */
    min-width: max-content;
  }
  html[data-theme="light"] table td *,
  html[data-theme="dark"]  table td *,
  html[data-theme="light"] table th *,
  html[data-theme="dark"]  table th * {
    word-break: normal !important;
    overflow-wrap: normal !important;
    -webkit-hyphens: none;
            hyphens: none;
  }
  /* Short header labels (BRAND, STATUS, VIEWS, PAYOUTS, ...) NEVER
     break. */
  html[data-theme="light"] table th,
  html[data-theme="dark"]  table th {
    white-space: nowrap !important;
  }
  /* Status badges in tables: nowrap + slightly smaller font. */
  html[data-theme="light"] table .badge,
  html[data-theme="dark"]  table .badge,
  html[data-theme="light"] table .pill,
  html[data-theme="dark"]  table .pill {
    font-size: 10.5px !important;
    padding: 3px 8px !important;
  }
  /* Tables: keep their native display:table layout so columns align
     and we only get ONE horizontal scrollbar. The wrapping .card
     (or generic ancestor with overflow-x:auto) handles scrolling
     when the table exceeds the container width. */
  html[data-theme="light"] table,
  html[data-theme="dark"]  table {
    display: table !important;
    width: max-content !important;
    max-width: none !important;
    min-width: 100%;
  }
  html[data-theme="light"] table thead,
  html[data-theme="dark"]  table thead,
  html[data-theme="light"] table tbody,
  html[data-theme="dark"]  table tbody {
    /* Restore default. The earlier display:table on both created the
       double-scrollbar bug on ops/brands. */
    display: table-row-group;
  }
  html[data-theme="light"] table thead,
  html[data-theme="dark"]  table thead {
    display: table-header-group;
  }
  /* Scroll-container rules — exactly ONE scroller per table:
     • If the page wraps the table in `.table-wrap` (most ops pages),
       that wrapper is the scroller. The outer `.card` MUST stay
       visible so we don't stack two bars.
     • If the table is a direct child of `.card`, the `.card` itself
       scrolls. */
  html[data-theme="light"] .table-wrap,
  html[data-theme="dark"]  .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  html[data-theme="light"] .card:has(> .table-wrap),
  html[data-theme="dark"]  .card:has(> .table-wrap) {
    overflow-x: visible !important;
  }
  html[data-theme="light"] .card:has(> table),
  html[data-theme="dark"]  .card:has(> table) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Defensive: cards never bust the viewport on mobile. The shell's
     .grid switches to 1fr at ≤960px but some pages add inline grid
     widths or H2s with min-content that push the card wider than its
     column. Force cap. */
  html[data-theme="light"] .card,
  html[data-theme="dark"]  .card,
  html[data-theme="light"] .metric-card,
  html[data-theme="dark"]  .metric-card,
  html[data-theme="light"] .panel,
  html[data-theme="dark"]  .panel {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }
  /* Long headings inside cards: allow soft wrap and clamp width. */
  html[data-theme="light"] .card h1,
  html[data-theme="dark"]  .card h1,
  html[data-theme="light"] .card h2,
  html[data-theme="dark"]  .card h2,
  html[data-theme="light"] .card h3,
  html[data-theme="dark"]  .card h3 {
    max-width: 100% !important;
    word-break: normal;
    overflow-wrap: break-word;
  }
}

/* ─────────────────────────────────────────────────────────────────
   33) Admin /deliveries KPI cards + progress bar.
       Per 2026-05-20 spec:
       - Clippers enrolled big number was using .k-glow blue gradient
       - Awaiting action stays gold
       - Approved → emerald green from palette (#1E6F5C dark / #1E9E63 light)
       - Rejected → burgundy red from palette (#5A1E2A)
       - Inline progress bar (#16a34a green + #1d4ed8 blue) → gold tones
   ───────────────────────────────────────────────────────────────── */

/* Big number with .k-glow class (Clippers enrolled, etc.) - swap the
   blue gradient text-clip for a solid gold value with subtle halo. */
html[data-theme="light"] .k-glow,
html[data-theme="dark"]  .k-glow {
  background: none !important;
  -webkit-background-clip: unset !important;
          background-clip: unset !important;
  -webkit-text-fill-color: var(--skn-gold) !important;
  color: var(--skn-gold) !important;
  animation: none !important;
  text-shadow: 0 0 8px rgba(212,169,44,.25);
}

/* Approved KPI value - emerald. Hits both inline-style #6ee7b7 and
   the legacy `.k-glow` neighbours of "Approved" labels. */
html[data-theme="light"] .metric-card [style*="color:#6ee7b7"],
html[data-theme="dark"]  .metric-card [style*="color:#6ee7b7"],
html[data-theme="light"] [style*="color:#6ee7b7"][class*="mc-value"],
html[data-theme="dark"]  [style*="color:#6ee7b7"][class*="mc-value"] {
  color: var(--skn-emerald, #1E9E63) !important;
  -webkit-text-fill-color: var(--skn-emerald, #1E9E63) !important;
}
html[data-theme="dark"] .metric-card [style*="color:#6ee7b7"] {
  color: #1E6F5C !important;
  -webkit-text-fill-color: #1E6F5C !important;
}

/* Rejected KPI value - burgundy red. The page paints these with
   `color:var(--muted)` which reads as grey on cream. Force the
   palette red. */
html[data-theme="light"] .metric-card .mc-label + .mc-value[style*="--muted"],
html[data-theme="dark"]  .metric-card .mc-label + .mc-value[style*="--muted"] {
  color: #5A1E2A !important;
}
/* Better selector by sibling-text: target any mc-value following a
   mc-label that contains "Rejected" or "Archived" via :has(). */
html[data-theme="light"] .metric-card:has(.mc-label:where(:not(:empty))) .mc-value,
html[data-theme="dark"]  .metric-card:has(.mc-label:where(:not(:empty))) .mc-value {
  /* default stays */
}
/* Inline color #fca5a5 (light red used for fraud/danger labels):
   - Light theme: harmonize to palette burgundy (good contrast on cream)
   - Dark theme: KEEP a bright coral so the warning stays readable on
     the graphite #2A2A2A background (burgundy was too dark, illegible). */
html[data-theme="light"] [style*="color:#fca5a5"] {
  color: #5A1E2A !important;
}
html[data-theme="dark"]  [style*="color:#fca5a5"] {
  color: #FCA5A5 !important;
}
/* Also any other admin red tone in dark needs the coral fallback. */
html[data-theme="dark"] [style*="color:#fb7185"],
html[data-theme="dark"] [style*="color:#ef4444"],
html[data-theme="dark"] [style*="color:#b91c1c"],
html[data-theme="dark"] [style*="color:rgba(248,113,113"],
html[data-theme="dark"] [style*="color:rgba(252,165,165"] {
  color: #FCA5A5 !important;
}

/* Inline progress bar segments in the Awaiting-action card.
   - Green #16a34a (approved share)  → gold-bronze
   - Blue  #1d4ed8 (in-review share) → softer gold */
html[data-theme="light"] [style*="background:#16a34a"],
html[data-theme="dark"]  [style*="background:#16a34a"] {
  background: linear-gradient(90deg, var(--skn-gold) 0%, var(--skn-gold-hover) 100%) !important;
}
html[data-theme="light"] [style*="background:#1d4ed8"],
html[data-theme="dark"]  [style*="background:#1d4ed8"] {
  background: var(--skn-gold-2) !important;
}

/* The "X approved" sub-label inside the awaiting card was paired
   with the green segment - tint it gold too for visual coherence. */
html[data-theme="light"] .metric-card .mini span:first-child,
html[data-theme="dark"]  .metric-card .mini span:first-child {
  /* default text stays muted; only the bar changes. */
}

/* ─────────────────────────────────────────────────────────────────
   34) Hero live badge lifted above the globe so it doesn't sit on
       the dark sphere (poor contrast). Shifts the visual position via
       transform without changing layout flow.
   ───────────────────────────────────────────────────────────────── */
html[data-theme="light"] .lp-hero .lp-badge,
html[data-theme="dark"]  .lp-hero .lp-badge {
  position: relative !important;
  z-index: 3;
  transform: translateY(-44px);
  margin-bottom: -28px;
}
@media (max-width: 760px) {
  html[data-theme="light"] .lp-hero .lp-badge,
  html[data-theme="dark"]  .lp-hero .lp-badge {
    transform: translateY(-60px);
    margin-bottom: -40px;
  }
}

/* ─────────────────────────────────────────────────────────────────
   35) Community Directory (/users) - all cobalt accents → gold.
       The page ships hard-coded rgba(59,91,255,...) borders on stats,
       search input, search icon, plus a #1e40af cobalt number color
       in the light-theme override block.
   ───────────────────────────────────────────────────────────────── */
html[data-theme="light"] .udir-stat,
html[data-theme="dark"]  .udir-stat {
  background: rgba(212,169,44,.06) !important;
  border: 1px solid rgba(212,169,44,.22) !important;
}
html[data-theme="light"] .udir-stat .n,
html[data-theme="dark"]  .udir-stat .n {
  color: var(--skn-gold) !important;
}
html[data-theme="light"] .udir-search input,
html[data-theme="dark"]  .udir-search input {
  background: var(--skn-surface) !important;
  border: 1px solid var(--skn-border) !important;
  color: var(--skn-text) !important;
}
html[data-theme="light"] .udir-search input:focus,
html[data-theme="dark"]  .udir-search input:focus {
  background: var(--skn-surface) !important;
  border-color: var(--skn-gold) !important;
  box-shadow: 0 0 0 3px rgba(212,169,44,.18) !important;
}
html[data-theme="light"] .udir-search svg,
html[data-theme="dark"]  .udir-search svg {
  color: var(--skn-gold) !important;
  stroke: var(--skn-gold) !important;
}
/* Community-directory "COMMUNITY DIRECTORY" badge dot - was blue from
   .lp-dot defaults. The .udir-badge dot already targets the dot via
   .lp-dot which is gold from Section 10. Just re-tint the surrounding
   pill background for the warmer tone. */
html[data-theme="light"] .udir-badge,
html[data-theme="dark"]  .udir-badge {
  background: rgba(184,134,66,.07) !important;
  color: var(--skn-gold-2) !important;
  border: 1px solid rgba(184,134,66,.20) !important;
}

/* VIP / premium chips - shell ships with lavender/blue tint. Re-tint
   to a soft gold so it reads as a brand accent. */
html[data-theme="light"] .badge[class*="vip"],
html[data-theme="dark"]  .badge[class*="vip"],
html[data-theme="light"] .udir-row .vip,
html[data-theme="dark"]  .udir-row .vip,
html[data-theme="light"] [class*="vip"],
html[data-theme="dark"]  [class*="vip"] {
  background: rgba(212,169,44,.14) !important;
  color: var(--skn-gold-2) !important;
  border: 1px solid rgba(212,169,44,.40) !important;
}

/* Generic blue hex residues that linger on /users + similar pages. */
html[data-theme="light"] [style*="color:#1e40af"],
html[data-theme="dark"]  [style*="color:#1e40af"],
html[data-theme="light"] [style*="color: #1e40af"],
html[data-theme="dark"]  [style*="color: #1e40af"] {
  color: var(--skn-gold) !important;
}

/* ─────────────────────────────────────────────────────────────────
   36) Nav: single-row above ~1180px, hamburger drawer below. The
       shell originally switched to hamburger only at ≤860px which
       caused mid-width truncation. Raise the breakpoint so the
       drawer kicks in earlier and the pill row never overflows the
       rounded nav container.
   ───────────────────────────────────────────────────────────────── */
html[data-theme="light"] .nav,
html[data-theme="dark"]  .nav,
html[data-theme="light"] .lp-nav,
html[data-theme="dark"]  .lp-nav {
  flex-wrap: nowrap !important;
}
html[data-theme="light"] .nav .navlinks,
html[data-theme="dark"]  .nav .navlinks,
html[data-theme="light"] .lp-nav .navlinks,
html[data-theme="dark"]  .lp-nav .navlinks {
  flex-wrap: nowrap !important;
}

/* Below 1180px (when 5+ pills + wallet chip + brand + toggle no
   longer fit), hide the inline navlinks and force the hamburger
   button to appear. The shell already wires `.nav-toggle-input:checked
   ~ .navlinks { display:flex }` so clicking the hamburger reveals
   the drawer. */
@media (max-width: 1180px) {
  html[data-theme="light"] .nav .navlinks,
  html[data-theme="dark"]  .nav .navlinks {
    display: none;
  }
  html[data-theme="light"] .nav .nav-toggle-input:checked ~ .navlinks,
  html[data-theme="dark"]  .nav .nav-toggle-input:checked ~ .navlinks {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    position: absolute;
    top: calc(100% + 8px);
    left: 14px;
    right: 14px;
    width: auto !important;
    background: var(--skn-surface, #FFFFFF);
    border: 1px solid var(--skn-border, #E9E3D8);
    border-radius: 18px;
    padding: 14px;
    gap: 6px;
    box-shadow: 0 24px 60px rgba(184,134,66,.18);
    z-index: 110;
  }
  html[data-theme="dark"] .nav .nav-toggle-input:checked ~ .navlinks {
    background: var(--skn-surface, #1F1F1F);
    border-color: var(--skn-gold-2, #B88642);
    box-shadow: 0 24px 60px rgba(0,0,0,.55);
  }
  html[data-theme="light"] .nav .navlinks .pill,
  html[data-theme="dark"]  .nav .navlinks .pill,
  html[data-theme="light"] .nav .navlinks a,
  html[data-theme="dark"]  .nav .navlinks a {
    width: 100% !important;
    justify-content: flex-start !important;
    text-align: left;
  }
  html[data-theme="light"] .nav-toggle-btn,
  html[data-theme="dark"]  .nav-toggle-btn {
    display: inline-flex !important;
  }
  html[data-theme="light"] .nav,
  html[data-theme="dark"]  .nav {
    position: relative !important;
    overflow: visible !important;
    z-index: 100 !important;
  }
  /* When the hamburger is checked, escalate the nav stacking context
     above the hero (which is z-index:2). Without this the drawer sits
     under .lp-hero because both .nav and .lp-hero compete at z:2 and
     the hero comes later in document order. */
  html[data-theme="light"] .nav:has(.nav-toggle-input:checked),
  html[data-theme="dark"]  .nav:has(.nav-toggle-input:checked) {
    z-index: 2000 !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   37) Login / signup / reset auth card. Shell paints inputs with a
       cool navy bg (rgba(24,24,42,.7)) and slate-blue borders
       (rgba(148,163,184,.12)) which read as blue against the gold
       theme. Re-tint to graphite/cream + gold focus rings.
   ───────────────────────────────────────────────────────────────── */
html[data-theme="light"] .wa-box,
html[data-theme="dark"]  .wa-box {
  background: var(--skn-surface, #1F1F1F) !important;
  border: 1px solid var(--skn-divider, #2A2A2A) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.45) !important;
}
html[data-theme="light"] .wa-box {
  background: #FFFFFF !important;
  border: 1px solid var(--skn-border, #E9E3D8) !important;
  box-shadow: 0 24px 60px rgba(184,134,66,.18) !important;
}

html[data-theme="light"] .wa-field input,
html[data-theme="dark"]  .wa-field input {
  background: var(--skn-surface-2, #2A2A2A) !important;
  border: 1px solid var(--skn-divider, #2A2A2A) !important;
  color: var(--skn-text, #FAEDE1) !important;
}
html[data-theme="light"] .wa-field input {
  background: var(--skn-surface-2, #FCFAF5) !important;
  border: 1px solid var(--skn-border, #E9E3D8) !important;
  color: var(--skn-text, #111827) !important;
}
html[data-theme="light"] .wa-field input:focus,
html[data-theme="dark"]  .wa-field input:focus {
  border-color: var(--skn-gold, #D4A92C) !important;
  box-shadow: 0 0 0 3px rgba(212,169,44,.20) !important;
}
html[data-theme="light"] .wa-field input::placeholder,
html[data-theme="dark"]  .wa-field input::placeholder {
  color: var(--skn-muted, #B88642) !important;
}

html[data-theme="light"] .wa-field label,
html[data-theme="dark"]  .wa-field label {
  color: var(--skn-muted, #B88642) !important;
}

html[data-theme="light"] .wa-google,
html[data-theme="dark"]  .wa-google {
  background: var(--skn-surface-2, #2A2A2A) !important;
  border: 1px solid var(--skn-divider, #2A2A2A) !important;
  color: var(--skn-text, #FAEDE1) !important;
}
html[data-theme="light"] .wa-google {
  background: var(--skn-surface-2, #FCFAF5) !important;
  border: 1px solid var(--skn-border, #E9E3D8) !important;
  color: var(--skn-text, #111827) !important;
}
html[data-theme="light"] .wa-google:hover,
html[data-theme="dark"]  .wa-google:hover {
  background: rgba(212,169,44,.10) !important;
  border-color: var(--skn-gold, #D4A92C) !important;
}

html[data-theme="light"] .wa-sep,
html[data-theme="dark"]  .wa-sep {
  color: var(--skn-muted, #B88642) !important;
}
html[data-theme="light"] .wa-sep::before,
html[data-theme="dark"]  .wa-sep::before,
html[data-theme="light"] .wa-sep::after,
html[data-theme="dark"]  .wa-sep::after {
  background: var(--skn-divider, #2A2A2A) !important;
}
html[data-theme="light"] .wa-sep::before,
html[data-theme="light"] .wa-sep::after {
  background: var(--skn-border, #E9E3D8) !important;
}

html[data-theme="light"] .wa-alt,
html[data-theme="dark"]  .wa-alt {
  border-top: 1px solid var(--skn-divider, #2A2A2A) !important;
}
html[data-theme="light"] .wa-alt {
  border-top: 1px solid var(--skn-border, #E9E3D8) !important;
}
html[data-theme="light"] .wa-alt a,
html[data-theme="dark"]  .wa-alt a {
  color: var(--skn-gold, #D4A92C) !important;
}
html[data-theme="light"] .wa-alt a:hover,
html[data-theme="dark"]  .wa-alt a:hover {
  color: var(--skn-gold-hover, #F0C94A) !important;
}

/* Chrome autofill paints a light-blue background on saved credentials.
   Override with an inset shadow that matches our surface colour so the
   input stays graphite/cream when Chrome restores stored values. */
html[data-theme="light"] .wa-field input:-webkit-autofill,
html[data-theme="light"] .wa-field input:-webkit-autofill:hover,
html[data-theme="light"] .wa-field input:-webkit-autofill:focus,
html[data-theme="light"] .wa-field input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #FCFAF5 inset !important;
          box-shadow: 0 0 0 1000px #FCFAF5 inset !important;
  -webkit-text-fill-color: #111827 !important;
  caret-color: #111827 !important;
  transition: background-color 5000s ease-in-out 0s;
}
html[data-theme="dark"] .wa-field input:-webkit-autofill,
html[data-theme="dark"] .wa-field input:-webkit-autofill:hover,
html[data-theme="dark"] .wa-field input:-webkit-autofill:focus,
html[data-theme="dark"] .wa-field input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #2A2A2A inset !important;
          box-shadow: 0 0 0 1000px #2A2A2A inset !important;
  -webkit-text-fill-color: #FAEDE1 !important;
  caret-color: #FAEDE1 !important;
  transition: background-color 5000s ease-in-out 0s;
}

html[data-theme="light"] .wa-pw-wrap .pw-eye,
html[data-theme="dark"]  .wa-pw-wrap .pw-eye {
  color: var(--skn-muted, #B88642) !important;
}
html[data-theme="light"] .wa-pw-wrap .pw-eye:hover,
html[data-theme="dark"]  .wa-pw-wrap .pw-eye:hover {
  color: var(--skn-gold, #D4A92C) !important;
}

html[data-theme="light"] .wa-tagline,
html[data-theme="dark"]  .wa-tagline,
html[data-theme="light"] .wa-domain a,
html[data-theme="dark"]  .wa-domain a,
html[data-theme="light"] .wa-hint,
html[data-theme="dark"]  .wa-hint {
  color: var(--skn-muted, #B88642) !important;
}

html[data-theme="light"] .wa-notice,
html[data-theme="dark"]  .wa-notice {
  background: rgba(212,169,44,.10) !important;
  color: var(--skn-gold, #D4A92C) !important;
  border: 1px solid rgba(212,169,44,.30) !important;
}

/* ─────────────────────────────────────────────────────────────────
   38) Community directory cards (/users). Shell paints
       `.user-card:hover` and `.user-card-avatar` borders with cobalt
       blue rgba(59,91,255,...). Re-tint to gold so the hover halo
       matches the rest of the skin.
   ───────────────────────────────────────────────────────────────── */
html[data-theme="dark"] .user-card {
  background: var(--skn-surface, #1F1F1F) !important;
  border-color: rgba(184,134,66,.18) !important;
}
html[data-theme="dark"] .user-card:hover {
  border-color: rgba(212,169,44,.55) !important;
  box-shadow: 0 10px 28px rgba(212,169,44,.18) !important;
}
html[data-theme="dark"] .user-card-avatar {
  border-color: rgba(212,169,44,.45) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.45) !important;
}

html[data-theme="light"] .user-card {
  background: #FFFFFF !important;
  border-color: var(--skn-border, #E9E3D8) !important;
  box-shadow: 0 4px 14px rgba(184,134,66,.06) !important;
}
html[data-theme="light"] .user-card:hover {
  border-color: var(--skn-gold, #D4A92C) !important;
  box-shadow: 0 10px 28px rgba(212,169,44,.18) !important;
}
html[data-theme="light"] .user-card-avatar {
  border-color: rgba(212,169,44,.40) !important;
  box-shadow: 0 2px 8px rgba(184,134,66,.14) !important;
}

/* Soft directory header / filter chips on /users may also carry blue
   accents - normalise to gold when present. */
html[data-theme="light"] .user-filter.active,
html[data-theme="dark"]  .user-filter.active,
html[data-theme="light"] .users-filter .pill.active,
html[data-theme="dark"]  .users-filter .pill.active {
  background: rgba(212,169,44,.14) !important;
  border-color: rgba(212,169,44,.45) !important;
  color: var(--skn-gold, #D4A92C) !important;
}

/* ─────────────────────────────────────────────────────────────────
   39) Reduced motion - keep the existing respect intact.
   ───────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html[data-theme="light"] .btn:hover,
  html[data-theme="dark"]  .btn:hover { transform: none !important; }
}

/* ─────────────────────────────────────────────────────────────────
   40) Blue-tint mopup (2026-05-28)
       Catches residual cobalt/lavender that shell.css paints on
       light-theme surfaces (panel inset shadows, proof-tag-box,
       admin pill.active, focus rings, badge.credited, legal
       callouts, plus the pre-join campaign-hashtag panel that
       uses inline rgba(59,91,255,...) styles). Each rule re-tints
       to the warm cream / amber family so the palette reads
       consistently gold-on-cream across every page.
   ───────────────────────────────────────────────────────────────── */

/* (a) Panel-surface base: shell.css :1208 paints a cobalt inner-bottom
       inset shadow on every card/metric/panel. Skin already overrides
       .card / .lp-stat / .pd-card etc, but .metric / .panel / .stat /
       .enr-card / .delivery-card / .credits-card still leak. Cover them. */
html[data-theme="light"] .metric,
html[data-theme="light"] .panel,
html[data-theme="light"] .stat,
html[data-theme="light"] .enr-card,
html[data-theme="light"] .delivery-card,
html[data-theme="light"] .credits-card {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,255,255,1) 0%, rgba(255,251,242,.96) 70%),
    linear-gradient(180deg, #ffffff 0%, #fff7e6 100%) !important;
  border-color: rgba(184,134,66,.18) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 -22px 44px -22px rgba(212,169,44,.16) inset,
    0 12px 28px -16px rgba(82,60,20,.10),
    0 4px 12px -4px rgba(82,60,20,.05) !important;
}

/* (b) Proof-tag-box: shell.css :175 paints rgba(59,91,255,.10) gradient
       + cobalt border. This is the inner "#campaignhashtag" callout on
       the campaign detail page. Re-tint warm cream + amber border.
       Text MUST clear WCAG AA on the cream fill - light theme uses
       deep caramel for the big hashtag (~7:1 on #FBF5DB) and near-black
       body text; dark theme keeps the bright gold token. */
html[data-theme="light"] .proof-tag-box,
html[data-theme="dark"]  .proof-tag-box {
  background: linear-gradient(135deg, rgba(212,169,44,.10), rgba(212,169,44,.03)) !important;
  border: 1px solid rgba(212,169,44,.32) !important;
}
html[data-theme="light"] .proof-tag-box {
  color: var(--skn-text) !important;
}
html[data-theme="dark"]  .proof-tag-box {
  color: var(--skn-text) !important;
}
html[data-theme="light"] .proof-tag-box .ptag-label,
html[data-theme="dark"]  .proof-tag-box .ptag-label {
  color: var(--skn-muted) !important;
}
html[data-theme="light"] .proof-tag-box .proof-tag-big {
  color: #6b4310 !important;
}
html[data-theme="dark"]  .proof-tag-box .proof-tag-big {
  color: var(--skn-gold) !important;
}

/* (c) Pill active state. Skin :1335 already targets this but a
       higher-specificity admin selector or stale cache could leak
       shell.css :939 (color:#1e40af + cobalt bg). Re-affirm for
       <a class="pill active"> and tab-style pills used on
       /admin/deliveries, /campaigns, etc. */
html[data-theme="light"] a.pill.active,
html[data-theme="dark"]  a.pill.active,
html[data-theme="light"] .pill.active,
html[data-theme="dark"]  .pill.active {
  background: rgba(212,169,44,.14) !important;
  border-color: rgba(212,169,44,.45) !important;
  color: var(--skn-text) !important;
  box-shadow: 0 4px 14px rgba(212,169,44,.18) !important;
}
/* shell.css :1267 paints a cobalt gradient on .pill.active OUTSIDE
   nav/lp-nav with selector specificity (0,5,0). Match the same
   :not() chain (plus html prefix -> 0,5,1) so the source-later
   skin rule wins and tab pills on /admin/deliveries / /campaigns
   render cream amber instead of cobalt. Same treatment for the
   .pill hover at shell.css :1261 (cobalt halo on inactive pills). */
html[data-theme="light"] .pill.active:not(.nav *):not(.lp-nav *),
html[data-theme="dark"]  .pill.active:not(.nav *):not(.lp-nav *) {
  background: linear-gradient(135deg, rgba(212,169,44,.16), rgba(240,201,74,.12)) !important;
  border-color: rgba(212,169,44,.48) !important;
  color: var(--skn-text) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 0 0 1px rgba(212,169,44,.18),
    0 4px 12px rgba(212,169,44,.18) !important;
}
html[data-theme="light"] .pill:not(.nav *):not(.lp-nav *):hover,
html[data-theme="dark"]  .pill:not(.nav *):not(.lp-nav *):hover {
  border-color: rgba(212,169,44,.32) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 4px 10px rgba(212,169,44,.14) !important;
}

/* (d) Pre-join campaign-hashtag panel + similar inline cobalt panels.
       partners_web.py renders inline rgba(59,91,255,.06)/.08 background
       with .25/.30 cobalt border for the "Join this Campaign" surface
       and a few inline notices. Catch via attribute selector. */
html[data-theme="light"] [style*="background:rgba(59,91,255,.06)"],
html[data-theme="light"] [style*="background:rgba(59,91,255,.08)"],
html[data-theme="light"] [style*="background:rgba(59,91,255,.07)"],
html[data-theme="dark"]  [style*="background:rgba(59,91,255,.06)"],
html[data-theme="dark"]  [style*="background:rgba(59,91,255,.08)"],
html[data-theme="dark"]  [style*="background:rgba(59,91,255,.07)"] {
  background: rgba(212,169,44,.07) !important;
}
html[data-theme="light"] [style*="border:1px solid rgba(59,91,255"],
html[data-theme="dark"]  [style*="border:1px solid rgba(59,91,255"] {
  border-color: rgba(212,169,44,.30) !important;
}

/* (e) Badge.credited: shell.css :170 paints cobalt bg + border + uses
       --gold2 for text. Section 30 already remapped --gold2 to amber
       (#B88642) which fails WCAG AA on cream. Force readable text. */
html[data-theme="light"] .badge.credited,
html[data-theme="dark"]  .badge.credited {
  background: rgba(212,169,44,.08) !important;
  border-color: rgba(212,169,44,.32) !important;
  color: var(--skn-text) !important;
}

/* (f) Form input focus -> amber ring. shell.css :217 + :982 paint a
       cobalt focus ring; re-tint for light + dark. */
html[data-theme="light"] input:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] select:focus,
html[data-theme="dark"]  input:focus,
html[data-theme="dark"]  textarea:focus,
html[data-theme="dark"]  select:focus {
  border-color: rgba(212,169,44,.55) !important;
  box-shadow: 0 0 0 4px rgba(212,169,44,.12) !important;
  outline: none !important;
}

/* (g) Legal callout block on policy pages. shell.css :1026/:1029 paint
       cobalt; re-tint. */
html[data-theme="light"] .legal-page .legal-callout,
html[data-theme="dark"]  .legal-page .legal-callout {
  background: rgba(212,169,44,.07) !important;
  border-color: rgba(212,169,44,.28) !important;
}

/* (h) Inline-style mopup: a few partners_web.py renderers ship inline
       color:#1e40af / #1d4ed8 (the dark-blue token used pre-skin) on
       labels, headers, and small-print. Re-route to the split --gold2
       (deep caramel on light, bright amber on dark) so contrast holds
       on whatever surface the inline color lands on. */
html[data-theme="light"] [style*="color:#1e40af"],
html[data-theme="light"] [style*="color: #1e40af"],
html[data-theme="light"] [style*="color:#1d4ed8"],
html[data-theme="light"] [style*="color: #1d4ed8"],
html[data-theme="dark"]  [style*="color:#1e40af"],
html[data-theme="dark"]  [style*="color: #1e40af"],
html[data-theme="dark"]  [style*="color:#1d4ed8"],
html[data-theme="dark"]  [style*="color: #1d4ed8"] {
  color: var(--gold2) !important;
}

/* (i) Scrollbar thumb (shell.css :514) -> amber so the gutters on long
       admin tables stop reading cobalt. */
html[data-theme="light"] ::-webkit-scrollbar-thumb,
html[data-theme="dark"]  ::-webkit-scrollbar-thumb {
  background: rgba(212,169,44,.22) !important;
}
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"]  ::-webkit-scrollbar-thumb:hover {
  background: rgba(212,169,44,.40) !important;
}

/* (j) Row hover border -> amber. shell.css :948 sets cobalt on
       [data-theme="light"] .row:hover. */
html[data-theme="light"] .row:hover,
html[data-theme="dark"]  .row:hover {
  border-color: rgba(212,169,44,.30) !important;
}

/* (k) Source role pills on /admin/deliveries enrollment cards
       (.source-pill--clipper / .source-pill--task). Previously
       inline-styled with cobalt bg + light pink/yellow text - on the
       new cream surfaces that became pink-on-pink and yellow-on-cream,
       both unreadable. Theme-aware tones, all AA on their bg. */
.source-pill {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
}
html[data-theme="light"] .source-pill--clipper {
  background: rgba(190,24,93,.10);
  border-color: rgba(190,24,93,.32);
  color: #9d174d;
}
html[data-theme="dark"]  .source-pill--clipper {
  background: rgba(244,114,182,.16);
  border-color: rgba(244,114,182,.40);
  color: #fbcfe8;
}
html[data-theme="light"] .source-pill--task {
  background: rgba(180,83,9,.10);
  border-color: rgba(180,83,9,.32);
  color: #92400e;
}
html[data-theme="dark"]  .source-pill--task {
  background: rgba(251,191,36,.16);
  border-color: rgba(251,191,36,.40);
  color: #fde68a;
}