/* ============================================================
   Sovereign Ledger Design System — Top-Tier SaaS Elevation for All Country Pages
   Per master plan 2026-06-01-all-country-pages-top-tier-saas-elevation.md
   Generated for IMPL_ID 5c8f54e0. All motion has full !important RM guards + static luxury fallbacks.
   Never edit by hand without updating the plan and re-running extraction harness.
   ============================================================ */

/* --- Tokens: Refined editorial financial authority (Bloomberg Terminal × Apple Financials × Economist data pages) --- */
:root {
  --sl-void: #0a0c10;
  --sl-void-2: #0b0d12;
  --sl-paper: #f8f6f1;
  --sl-paper-2: #f4f1e9;
  --sl-ink: #111318;
  --sl-ink-2: #1c2029;
  --sl-muted: #6b7280;
  --sl-border: rgba(255,255,255,0.08);
  --sl-border-light: rgba(0,0,0,0.06);
  --sl-accent: #c8102e; /* default, overridden per [data-country] */
  --sl-accent-2: #9f0e24;
  --sl-gold: #c5a26f;
  --sl-success: #059669;
  --sl-warning: #d97706;
  --sl-error: #dc2626;

  /* Typography scale (distinctive condensed geometric for display + JetBrains Mono for numbers/ledgers) */
  --sl-font-display: "Clash Grotesk", "Instrument Sans", "Satoshi", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --sl-font-sans: "Satoshi", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sl-font-mono: "JetBrains Mono", ui-monospace, "Fragment Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --sl-font-body: Georgia, "Iowan Old Style", "Times New Roman", serif; /* for long compliance reading */

  --sl-text-xs: 11px;
  --sl-text-sm: 13px;
  --sl-text-base: 15px;
  --sl-text-lg: 17px;
  --sl-text-xl: 20px;
  --sl-text-2xl: 24px;
  --sl-text-3xl: 32px;
  --sl-text-4xl: 44px;
  --sl-text-5xl: 56px;

  /* Generous data-dense rhythm (72/64 section breathing) */
  --sl-space-1: 4px;
  --sl-space-2: 8px;
  --sl-space-3: 12px;
  --sl-space-4: 16px;
  --sl-space-5: 24px;
  --sl-space-6: 32px;
  --sl-space-7: 48px;
  --sl-space-8: 64px;
  --sl-space-9: 72px;
  --sl-space-10: 96px;

  --sl-radius: 8px;
  --sl-radius-lg: 14px;
  --sl-radius-xl: 20px;

  --sl-shadow-card: 0 10px 30px -12px rgba(0,0,0,0.25), 0 0 0 1px var(--sl-border);
  --sl-shadow-elev: 0 30px 60px -20px rgba(0,0,0,0.35), 0 0 0 1px var(--sl-border);

  /* Premium restrained motion */
  --sl-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sl-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Per-country accent overrides (from plan + real flag/official colors, sharp for authority) */
body[data-country="ph"] { --sl-accent: #c8102e; --sl-accent-2: #9f0e24; }
body[data-country="sg"] { --sl-accent: #ed2939; --sl-accent-2: #c41f2f; } /* SG flag red, monetary precision */
body[data-country="my"] { --sl-accent: #010066; --sl-accent-2: #00004d; } /* Royal blue */
body[data-country="id"] { --sl-accent: #e80000; --sl-accent-2: #b80000; } /* Bold red */
body[data-country="th"] { --sl-accent: #00247d; --sl-accent-2: #001a5c; }
body[data-country="vn"] { --sl-accent: #da251d; --sl-accent-2: #b01f18; }
body[data-country="hk"] { --sl-accent: #de2910; --sl-accent-2: #b01f0c; }
body[data-country="tw"] { --sl-accent: #fe0000; --sl-accent-2: #c50000; }
body[data-country="kr"] { --sl-accent: #003478; --sl-accent-2: #00265a; }
body[data-country="jp"] { --sl-accent: #bc002d; --sl-accent-2: #8f0022; }
body[data-country="br"] { --sl-accent: #009739; --sl-accent-2: #006b29; }
body[data-country="ca"] { --sl-accent: #ff0000; --sl-accent-2: #c40000; }
body[data-country="eg"] { --sl-accent: #c8102e; --sl-accent-2: #9f0e24; } /* Red from flag */
body[data-country="ke"] { --sl-accent: #006600; --sl-accent-2: #004d00; } /* Kenya green */
body[data-country="uk"] { --sl-accent: #00247d; --sl-accent-2: #001a5c; }

/* Base sovereign page overrides (dark authoritative void for product depth) */
body[data-country] {
  background: var(--sl-void);
  color: var(--sl-paper);
  font-family: var(--sl-font-sans);
}
body[data-country] h1, body[data-country] h2, body[data-country] .section__head h2 {
  font-family: var(--sl-font-display);
  letter-spacing: -0.035em;
  font-feature-settings: "ss01", "cv11", "tnum";
}
body[data-country] .mono, body[data-country] code, body[data-country] .sl-mono, body[data-country] .filing-line, body[data-country] .strategy-trace {
  font-family: var(--sl-font-mono) !important;
  font-feature-settings: "tnum";
}

/* --- Sovereign Data Table Primitive (the star component) --- */
.sl-statutory-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--sl-text-sm);
  background: var(--sl-void-2);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-lg);
  overflow: hidden;
  box-shadow: var(--sl-shadow-card);
}
.sl-statutory-table thead {
  background: rgba(255,255,255,0.03);
  position: sticky;
  top: 0;
  z-index: 2;
}
.sl-statutory-table th {
  text-align: left;
  padding: var(--sl-space-4) var(--sl-space-5);
  font-size: var(--sl-text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sl-muted);
  border-bottom: 1px solid var(--sl-border);
}
.sl-statutory-table td {
  padding: var(--sl-space-4) var(--sl-space-5);
  border-bottom: 1px solid var(--sl-border);
  vertical-align: top;
  color: var(--sl-paper);
}
.sl-statutory-table tbody tr:last-child td { border-bottom: none; }
.sl-statutory-table tbody tr:hover {
  background: rgba(255,255,255,0.015);
}
.sl-statutory-table .rate {
  font-family: var(--sl-font-mono);
  font-weight: 600;
  color: var(--sl-accent);
}
.sl-statutory-table .source {
  font-size: var(--sl-text-xs);
  color: var(--sl-muted);
  font-family: var(--sl-font-mono);
}
.sl-statutory-table .spark {
  display: inline-block;
  width: 48px;
  height: 18px;
  background: linear-gradient(90deg, var(--sl-accent), var(--sl-accent-2));
  opacity: 0.2;
  border-radius: 2px;
  vertical-align: middle;
  margin-left: var(--sl-space-2);
}
.sl-statutory-table .inspect {
  cursor: pointer;
  color: var(--sl-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sl-statutory-table .inspect:hover { color: var(--sl-paper); }

/* --- Engine Explorer Simulator (rich const-driven, traceable) --- */
.sl-engine-explorer {
  background: var(--sl-void-2);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-xl);
  padding: var(--sl-space-6);
  box-shadow: var(--sl-shadow-elev);
  position: relative;
}
.sl-engine-explorer .explorer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sl-space-5);
  padding-bottom: var(--sl-space-4);
  border-bottom: 1px solid var(--sl-border);
}
.sl-engine-explorer .explorer-header h3 {
  margin: 0;
  font-size: var(--sl-text-xl);
  font-weight: 600;
}
.sl-engine-explorer .live-pill {
  font-size: var(--sl-text-xs);
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(5, 150, 105, 0.15);
  color: var(--sl-success);
  border: 1px solid rgba(5,150,105,0.3);
  font-family: var(--sl-font-mono);
}
.sl-engine-explorer .controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--sl-space-4);
  margin-bottom: var(--sl-space-6);
}
.sl-engine-explorer label {
  display: block;
  font-size: var(--sl-text-xs);
  color: var(--sl-muted);
  margin-bottom: var(--sl-space-1);
  letter-spacing: 0.05em;
}
.sl-engine-explorer input[type="range"], .sl-engine-explorer input[type="number"] {
  width: 100%;
  background: var(--sl-void);
  border: 1px solid var(--sl-border);
  color: var(--sl-paper);
  padding: var(--sl-space-2) var(--sl-space-3);
  border-radius: var(--sl-radius);
  font-family: var(--sl-font-mono);
}
.sl-engine-explorer .output-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sl-space-3);
  margin-top: var(--sl-space-5);
}
.sl-engine-explorer .output-item {
  background: var(--sl-void);
  border: 1px solid var(--sl-border);
  padding: var(--sl-space-4);
  border-radius: var(--sl-radius);
}
.sl-engine-explorer .output-item .label { font-size: var(--sl-text-xs); color: var(--sl-muted); }
.sl-engine-explorer .output-item .value {
  font-family: var(--sl-font-mono);
  font-size: var(--sl-text-lg);
  font-weight: 600;
  color: var(--sl-accent);
  margin-top: 2px;
  transition: color 120ms var(--sl-ease);
}
/* Temporary spring class for subtle accent pop on live updates (pure CSS, self-removing via transitionend in JS; no timers). RM path uses !important override in media query. */
.sl-engine-explorer .output-item .value.spring {
  color: var(--sl-accent) !important; /* brief pop / re-trigger */
}
.sl-engine-explorer .trace-panel {
  margin-top: var(--sl-space-5);
  background: #05070f;
  border: 1px solid rgba(103,232,249,0.1);
  padding: var(--sl-space-4);
  border-radius: var(--sl-radius);
  font-size: var(--sl-text-xs);
  font-family: var(--sl-font-mono);
  white-space: pre-wrap;
  max-height: 220px;
  overflow: auto;
}
.sl-engine-explorer .disclaimer {
  margin-top: var(--sl-space-4);
  font-size: 10px;
  color: var(--sl-muted);
  border-top: 1px dashed var(--sl-border);
  padding-top: var(--sl-space-3);
  line-height: 1.5;
}

/* --- Filing Preview (official form but luxurious ledger) --- */
.sl-filing-preview {
  background: var(--sl-paper);
  color: var(--sl-ink);
  border: 1px solid #d1d5db;
  border-radius: var(--sl-radius-lg);
  padding: var(--sl-space-6);
  font-family: var(--sl-font-sans);
  box-shadow: var(--sl-shadow-card);
  position: relative;
}
.sl-filing-preview .gov-header {
  font-family: var(--sl-font-display);
  font-size: var(--sl-text-lg);
  border-bottom: 3px solid var(--sl-ink);
  padding-bottom: var(--sl-space-3);
  margin-bottom: var(--sl-space-5);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.sl-filing-preview .form-line {
  display: flex;
  justify-content: space-between;
  padding: var(--sl-space-2) 0;
  border-bottom: 1px dotted #cbd5e1;
  font-size: var(--sl-text-sm);
}
.sl-filing-preview .form-line .key { color: #4b5563; }
.sl-filing-preview .form-line .val { font-family: var(--sl-font-mono); font-weight: 600; }
.sl-filing-preview .lineage {
  font-size: 10px;
  color: #6b7280;
  margin-top: var(--sl-space-4);
  padding-top: var(--sl-space-3);
  border-top: 1px solid #e5e7eb;
  font-family: var(--sl-font-mono);
}

/* --- Chapter / Section Primitives (data-dense, generous breathing) --- */
.sl-chapter {
  padding-top: var(--sl-space-9);
  padding-bottom: var(--sl-space-9);
  border-top: 1px solid var(--sl-border);
}
.sl-chapter:first-of-type { border-top: none; padding-top: var(--sl-space-6); }
.sl-chapter h2 {
  font-size: var(--sl-text-3xl);
  margin: 0 0 var(--sl-space-5) 0;
  color: var(--sl-paper);
}
.sl-chapter .lead {
  font-size: var(--sl-text-lg);
  max-width: 72ch;
  color: #cbd5e1;
  line-height: 1.65;
}

/* Wave pipeline visual (const-driven stagger) */
.sl-wave-pipeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sl-space-4);
}
.sl-wave {
  background: var(--sl-void-2);
  border: 1px solid var(--sl-border);
  padding: var(--sl-space-4);
  border-radius: var(--sl-radius);
  transition: transform 180ms var(--sl-ease), border-color 180ms var(--sl-ease) !important;
}
.sl-wave:hover { transform: translateY(-1px) !important; border-color: var(--sl-accent); }
.sl-wave .wave-num {
  font-family: var(--sl-font-mono);
  font-size: 10px;
  color: var(--sl-accent);
  letter-spacing: 0.1em;
}
.sl-wave .wave-name { font-weight: 600; margin: var(--sl-space-1) 0; }
.sl-wave .wave-strategies { font-size: 11px; color: var(--sl-muted); font-family: var(--sl-font-mono); }

/* Leave / EOR matrix */
.sl-matrix {
  display: grid;
  gap: var(--sl-space-3);
}
.sl-matrix-row {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: var(--sl-space-3);
  align-items: center;
  padding: var(--sl-space-3) var(--sl-space-4);
  background: var(--sl-void-2);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius);
}
.sl-matrix-row.header {
  font-size: var(--sl-text-xs);
  color: var(--sl-muted);
  background: transparent;
  border-color: transparent;
  padding-bottom: var(--sl-space-2);
}

/* Pricing / ROI */
.sl-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sl-space-5);
}
.sl-tier {
  border: 1px solid var(--sl-border);
  padding: var(--sl-space-6);
  border-radius: var(--sl-radius-xl);
  background: var(--sl-void-2);
}
.sl-tier.popular { border-color: var(--sl-accent); position: relative; }
.sl-tier.popular::after {
  content: "MOST POPULAR FOR SCALE";
  position: absolute; top: -10px; right: 20px;
  background: var(--sl-accent); color: white; font-size: 9px; padding: 1px 8px; border-radius: 3px;
  letter-spacing: 0.06em;
}

/* Integrations badges */
.sl-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--sl-border);
  font-size: 12px;
  background: rgba(255,255,255,0.02);
}

/* Reusable .sl-disclaimer primitive (Sovereign Ledger tokens for consistency with JS .disclaimer and other surfaces) */
.sl-disclaimer {
  font-size: var(--sl-text-xs);
  color: var(--sl-muted);
  border-top: 1px dashed var(--sl-border);
  padding-top: var(--sl-space-3);
  line-height: 1.5;
}

/* Full RM guards + static luxury fallbacks for every new motion node (per hygiene from prior runs) */
@media (prefers-reduced-motion: reduce) {
  .sl-engine-explorer *,
  .sl-wave,
  .sl-statutory-table *,
  .sl-filing-preview *,
  .sl-tier,
  .sl-matrix-row,
  .sl-wave-pipeline * {
    transition: none !important;
    transform: none !important;
    animation: none !important;
  }
  /* Preserve premium static details */
  .sl-engine-explorer,
  .sl-statutory-table,
  .sl-filing-preview,
  .sl-tier {
    box-shadow: 0 20px 50px -15px rgba(0,0,0,0.6), 0 0 0 1px var(--sl-border) !important;
    border-color: var(--sl-border) !important;
  }
  .sl-wave:hover {
    transform: none !important;
    border-color: var(--sl-border) !important;
  }
  .sl-engine-explorer .output-item .value {
    color: var(--sl-accent) !important; /* static accent remains */
  }
}

/* Keyboard focus for all interactive in explorers */
.sl-engine-explorer input:focus-visible,
.sl-statutory-table .inspect:focus-visible,
.sl-filing-preview button:focus-visible {
  outline: 2px solid var(--sl-accent);
  outline-offset: 3px;
}

/* Small refinements for existing country shell harmony (scoped, no global drift) */
body[data-country] .country-hero,
body[data-country] .statutory-grid,
body[data-country] .section {
  /* elevate existing without breaking */
}
body[data-country] .statutory-card {
  background: var(--sl-void-2) !important;
  border-color: var(--sl-border) !important;
  transition: border-color 160ms var(--sl-ease) !important;
}
body[data-country] .statutory-card:hover {
  border-color: var(--sl-accent) !important;
}

/* End of Sovereign Ledger CSS — all new .sl-* components fully guarded. */