/* Design tokens (cleanup stage 6b). Restyle the site by changing these values; *-rgb feed the alpha variants. */
:root {
  --sla-accent: #38bdf8;
  --sla-accent-rgb: 56, 189, 248;
  --sla-accent-strong: #43aefc;
  --sla-accent-strong-rgb: 67, 174, 252;
  --sla-accent-soft: #7dd3fc;
  --sla-accent-soft-rgb: 125, 211, 252;
  --sla-accent-deep: #0ea5e9;
  --sla-accent-deep-rgb: 14, 165, 233;
  --sla-accent-pale: #e0f2fe;
  --sla-accent-pale-rgb: 224, 242, 254;
  --sla-positive: #10b981;
  --sla-positive-rgb: 16, 185, 129;
  --sla-positive-strong: #059669;
  --sla-positive-strong-rgb: 5, 150, 105;
  --sla-positive-bright: #2ae38a;
  --sla-positive-bright-rgb: 42, 227, 138;
  --sla-positive-soft: #a7f3d0;
  --sla-positive-soft-rgb: 167, 243, 208;
  --sla-warning: #f97316;
  --sla-warning-rgb: 249, 115, 22;
  --sla-warning-alt: #f6851b;
  --sla-warning-alt-rgb: 246, 133, 27;
  --sla-warning-soft: #fde68a;
  --sla-warning-soft-rgb: 253, 230, 138;
  --sla-danger: #ef4444;
  --sla-danger-rgb: 239, 68, 68;
  --sla-danger-soft: #f87171;
  --sla-danger-soft-rgb: 248, 113, 113;
  --sla-white: #ffffff;
  --sla-white-rgb: 255, 255, 255;
  --sla-black: #000000;
  --sla-black-rgb: 0, 0, 0;
  --sla-text: #f8fafc;
  --sla-text-rgb: 248, 250, 252;
  --sla-text-2: #e2e8f0;
  --sla-text-2-rgb: 226, 232, 240;
  --sla-text-3: #cbd5e1;
  --sla-text-3-rgb: 203, 213, 225;
  --sla-text-muted: #94a3b8;
  --sla-text-muted-rgb: 148, 163, 184;
  --sla-text-faint: #64748b;
  --sla-text-faint-rgb: 100, 116, 139;
  --sla-gray-300: #d1d5db;
  --sla-gray-300-rgb: 209, 213, 219;
  --sla-gray-400: #9ca3af;
  --sla-gray-400-rgb: 156, 163, 175;
  --sla-gray-ink: #9fa6ae;
  --sla-gray-ink-rgb: 159, 166, 174;
  --sla-surface-0: #060911;
  --sla-surface-0-rgb: 6, 9, 17;
  --sla-surface-1: #090d16;
  --sla-surface-1-rgb: 9, 13, 22;
  --sla-surface-2: #0a101e;
  --sla-surface-2-rgb: 10, 16, 30;
  --sla-surface-3: #0b101b;
  --sla-surface-3-rgb: 11, 16, 27;
  --sla-surface-slate: #0f172a;
  --sla-surface-slate-rgb: 15, 23, 42;
  --sla-border: #262b38;
  --sla-border-rgb: 38, 43, 56;
  --sla-border-2: #1a2030;
  --sla-border-2-rgb: 26, 32, 48;
  --sla-border-neutral: #383838;
  --sla-border-neutral-rgb: 56, 56, 56;
  --sla-border-neutral-2: #282828;
  --sla-border-neutral-2-rgb: 40, 40, 40;
}

/* Render path (2026-11-13): the old markup under the redesigned parts is hidden from the first paint, before any
   script runs (the scripts are deferred now, and the components park the old content in <sla-legacy> once they
   start). Placeholder heights keep the layout from jumping while the components load. */
header.mm-nav,
section[data-section="hero"],
[data-sla-old-tabbar],
#sla-how-agentsla-works-section,
#sla-spotify-quick-picks-wrap,
#tab-panel-directory > :not(sla-directory):not(sla-legacy),
#tab-panel-console > :not(sla-escrow):not(sla-legacy),
section[data-section="architecture"] > :not(sla-howto):not(sla-compare):not(sla-legacy),
section[data-section="directory"] > :not(sla-shelf):not(sla-directory):not(sla-legacy),
section[data-section="pricing"] > :not(sla-plans):not(sla-legacy),
section[data-section="faqs"] > :not(sla-faq):not(sla-legacy),
footer > :not(sla-footer):not(sla-legacy) { display: none !important; }
sla-appbar:not(:defined) { display: block; height: 56px; }
sla-hero:not(:defined) { display: block; min-height: 560px; }
/* full-height views at all times: while they load their data the footer must not rise into view and jump back */
sla-directory, sla-escrow { display: block; min-height: 100vh; }
sla-howto:not(:defined) { display: block; min-height: 420px; }
sla-compare:not(:defined) { display: block; min-height: 760px; }
sla-shelf:not(:defined) { display: block; min-height: 560px; }
sla-plans:not(:defined) { display: block; min-height: 640px; }
sla-faq:not(:defined) { display: block; min-height: 520px; }
sla-footer:not(:defined) { display: block; min-height: 480px; }
@media (max-width: 1023px) { sla-tabbar:not(:defined) { display: block; height: 60px; } }
@media (min-width: 1024px) { sla-appbar:not(:defined) { height: 64px; } }

/* Dossier "Rank #1 to #10" slots. The site-wide pill rule (html body button:not(#_):not(#_)...) out-ranked the
   dossier's own .sla-cdm-rank-btn styles and turned every slot into a one-line nowrap pill; in a 5-column grid on a
   phone that cut "RANK #1 / $519 to claim" off. One id more of specificity restores the two-line slot, and the grid
   fits as many columns as the dossier card allows at 118px or more (2 on phones, 4 in the desktop card), so the text
   stays readable instead of shrinking to 7-8px. */
html body .sla-cdm-ladder-grid:not(#_):not(#_):not(#_) { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)) !important; gap: 6px !important; width: 100% !important; }
html body button.sla-cdm-rank-btn:not(#_):not(#_):not(#_),
html body button.sla-cdm-rank-btn:not(#_):not(#_):not(#_):hover {
  display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important;
  gap: 2px !important; width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 48px !important;
  padding: 7px 10px !important; border-radius: 10px !important; transform: none !important; box-shadow: none !important;
  background: rgba(var(--sla-surface-slate-rgb), 0.55) !important; border: 1px solid rgba(var(--sla-text-muted-rgb), 0.16) !important;
  color: var(--sla-white) !important; -webkit-text-fill-color: currentColor !important;
  font-family: Inter, system-ui, sans-serif !important; text-transform: none !important; letter-spacing: normal !important;
  text-align: left !important; white-space: normal !important; overflow: hidden !important;
}
html body button.sla-cdm-rank-btn:not(#_):not(#_):not(#_):hover { border-color: rgba(var(--sla-accent-rgb), 0.55) !important; }
html body button.sla-cdm-rank-btn[data-selected="true"]:not(#_):not(#_):not(#_) { background: rgba(var(--sla-positive-rgb), 0.13) !important; border-color: var(--sla-positive) !important; }
html body button.sla-cdm-rank-btn:not(#_):not(#_):not(#_) .sla-cdm-rank-top { font-size: 10.5px !important; font-weight: 800 !important; letter-spacing: 0.04em !important; color: var(--sla-text-muted) !important; -webkit-text-fill-color: currentColor !important; margin: 0 !important; white-space: nowrap !important; }
html body button.sla-cdm-rank-btn[data-selected="true"]:not(#_):not(#_):not(#_) .sla-cdm-rank-top { color: var(--sla-positive) !important; }
html body button.sla-cdm-rank-btn:not(#_):not(#_):not(#_) .sla-cdm-rank-price { font-size: 12.5px !important; font-weight: 800 !important; letter-spacing: -0.01em !important; text-transform: none !important; color: var(--sla-white) !important; -webkit-text-fill-color: currentColor !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100% !important; }