/* ==========================================================================
   sl-system.css — Single source of truth for the SL design system.
   Loaded globally from base.html on EVERY page (chart and non-chart).
   Reusable and repeated page patterns live here. Page-specific styling should
   use a sibling CSS file, not per-template inline <style> blocks.

   Merged from: chart-page.css + sl-void-base.html
   Last synced: 2026-04-10
   ========================================================================== */

/* ---------- Root custom properties ---------- */
:root {
  --ltt-mouse-x: 50%;
  --ltt-mouse-y: 50%;

  /*
   * Extended Series Palette — 10 tokens × 2 themes.
   *
   * Single source of truth for every chart's series line color. Chart-page
   * JS reads these via `getComputedStyle(document.documentElement)
   * .getPropertyValue('--ltt-series-<token>')`. Toggling `data-theme` on
   * `<html>` swaps the dark-overrides below; the MutationObserver in each
   * page's chart IIFE refires `resolveSeriesTokens()` which re-reads the
   * computed values, so colors update live on theme toggle without a
   * chart re-render.
   *
   * Contrast note (retuned 2026-04-19): every hex passes ≥3.0:1 against
   * its surface (light `#eeecea`, dark `#22262e`). Worst is `gold` light
   * at 3.10:1 (on the floor but passing). Do not tweak below 3.0:1.
   *
   * Retuning a hex here updates every chart page automatically. Do NOT
   * paste hex literals into per-page `resolveSeriesTokens()` IIFEs —
   * read from these vars via `getComputedStyle`. The contract is
   * documented in `chrome-decisions-next.md::Extended Series Palette`
   * and `ltt_frontend_layout_contract.md §5 Chart Color Roles`.
   */
  --ltt-series-gold:    #b67928;
  --ltt-series-cobalt:  #4e74d9;
  --ltt-series-rust:    #c75a4a;
  --ltt-series-neutral: #70665b;
  --ltt-series-silver:  #7c8187;
  --ltt-series-teal:    #2f8884;
  --ltt-series-violet:  #7b5bbd;
  --ltt-series-amber:   #b86827;
  --ltt-series-moss:    #6e8a3e;
  --ltt-series-slate:   #3f5169;
}
[data-theme="dark"] {
  --ltt-series-gold:    #e3c57c;
  --ltt-series-cobalt:  #6b9fff;
  --ltt-series-rust:    #e8735f;
  --ltt-series-neutral: #aca193;
  --ltt-series-silver:  #9ba8b8;
  --ltt-series-teal:    #45d4bb;
  --ltt-series-violet:  #a78bfa;
  --ltt-series-amber:   #f09040;
  --ltt-series-moss:    #8fcc52;
  --ltt-series-slate:   #6d84a6;
}
body { margin: 0; }

@font-face {
  font-family: 'chomsky';
  src: url('../bootstrap/css/fonts/Chomsky.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================
   VOID — page atmosphere (1:1 scroll, vw/vh gradients)
   ========================================================== */
.sl-void {
  font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased;
  min-height: 100vh; position: relative; overflow-x: hidden;
  isolation: isolate;
  transition: background 400ms ease, color 400ms ease;
}
.sl-void[data-void="light"] {
  color: #1f1811;
  background:
    radial-gradient(circle 36vw at 12% 80px,  rgba(232,208,164,0.24), transparent 70%),
    radial-gradient(circle 32vw at 88% 120px, rgba(199,159,85,0.14),  transparent 70%),
    linear-gradient(180deg, #fcf8f0 0%, #efe1cc 100%);
}
.sl-void[data-void="dark"] {
  color: #f5efe3;
  background:
    radial-gradient(circle 36vw at 10% 80px,  rgba(88,131,255,0.20),  transparent 70%),
    radial-gradient(circle 32vw at 88% 100px, rgba(118,168,255,0.12), transparent 70%),
    linear-gradient(180deg, #08111e 0vh, #020409 200vh);
}

/* Cursor glow — fixed overlay, follows mouse */
.sl-void::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.65;
}
.sl-void[data-void="light"]::after {
  background: radial-gradient(circle 300px at var(--ltt-mouse-x) var(--ltt-mouse-y),
    rgba(199,159,85,0.20), transparent 62%);
  mix-blend-mode: multiply;
}
.sl-void[data-void="dark"]::after {
  background: radial-gradient(circle 300px at var(--ltt-mouse-x) var(--ltt-mouse-y),
    rgba(98,141,255,0.30), transparent 62%);
  mix-blend-mode: screen;
}

.sl-content { position: relative; z-index: 1; }

/* ==========================================================
   Typography — Sora (headings), Inter (body), JetBrains (labels)
   ========================================================== */
.sl-void h1, .sl-void h2, .sl-void h3, .sl-void h4 {
  font-family: 'Sora', sans-serif; letter-spacing: -0.05em; margin: 0;
}
.sl-void h1 { font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 0.94; font-weight: 400; }
.sl-void h2 { font-size: clamp(1.3rem, 2.2vw, 1.8rem); line-height: 1.1; font-weight: 500; }
.sl-void h3 { font-size: 1.1rem; line-height: 1.2; font-weight: 600; }
.sl-void h4 { font-size: 0.95rem; line-height: 1.2; font-weight: 600; }

/* Editorial lead paragraph — directly under H1 in the void */
.sl-lead {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.1rem, 1.4vw, 1.25rem);
  line-height: 1.55; max-width: 62ch; margin: 14px 0 0;
}
/* Light-mode muted token bumped from #70665b (≈ 4.4:1 against the void
   gradient — borderline AA at best) to #534838 (≈ 7.8:1, passes AAA).
   Same warm hue (hsl 33° / 17% sat / 27% lit), just deeper. Applies to
   every "muted body text" role: prose paragraphs, leads, eyebrows, data
   card labels, range-selector buttons, axis labels, etc. The dark-mode
   #aca193 token already measures ~9:1 against the dark void and is
   unchanged. Audit + recommendation: 2026-04-13 contrast pass. */
.sl-void[data-void="light"] .sl-lead { color: #534838; }
.sl-void[data-void="dark"]  .sl-lead { color: #aca193; }

/* JetBrains Mono uppercase eyebrow — above section titles */
.sl-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.09em;
  margin: 0 0 10px;
}
.sl-void[data-void="light"] .sl-eyebrow { color: #534838; }
.sl-void[data-void="dark"]  .sl-eyebrow { color: #aca193; }

/* ==========================================================
   Prose scoping — ONLY inside .sl-prose, never on .sl-void
   ========================================================== */
.sl-prose p, .sl-prose li { font-size: 16px; line-height: 1.65; }
.sl-void[data-void="light"] .sl-prose p,
.sl-void[data-void="light"] .sl-prose li { color: #534838; }
.sl-void[data-void="dark"] .sl-prose p,
.sl-void[data-void="dark"] .sl-prose li { color: #aca193; }
.sl-prose a { color: #2f4ea8; text-decoration: none; }
[data-theme="dark"] .sl-prose a { color: #8fb2ff; }
.sl-prose a:hover { text-decoration: underline; }
.sl-prose ul {
  padding-left: 22px; margin: 8px 0;
  list-style: disc; list-style-position: outside;
}
.sl-prose ul.sl-nested {
  padding-left: 22px; margin: 4px 0 4px 8px;
  list-style: disc; list-style-position: outside;
}
/* `!important` beats the `.sl-void h1–h4 { margin: 0 }` reset (specificity
   0,1,1). Without it these classes silently resolve to `margin: 0` when
   applied to an h3 inside the void — the same class-vs-descendant-reset
   trap that hid the Flagship tools H2 gap. Follow `.sl-section__head`'s
   convention. */
.sl-prose__head { margin: 0 0 12px !important; }
.sl-prose__head--next { margin: 24px 0 12px !important; }
.sl-prose li::marker { color: #b67928; }
.sl-void[data-void="dark"] .sl-prose li::marker { color: #e3c57c; }
.sl-prose b, .sl-prose strong { color: inherit; opacity: 0.88; }

/* ==========================================================
   Text utilities — tier-aligned reusable roles
   ========================================================== */
.sl-card-copy {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
  opacity: 0.75;
}
.sl-helper-text {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
  opacity: 0.72;
}
.sl-error-text {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.45;
  margin: 6px 0 0;
  color: #c75a4a;
}
.sl-loading-text {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.45;
  opacity: 0.55;
}
.ser-inherit { font-weight: inherit; }

/* Inline-typography cleanup utilities. These map old repeated template roles
   to the canonical type scale while preserving existing spacing/layout. */
.sl-api-copy {
  font-size: 15px;
  line-height: 1.65;
  margin: 0;
  opacity: 0.82;
}
.sl-card-copy--narrow { max-width: 36ch; }
.sl-field-error {
  margin-top: 6px;
  font-size: 13px;
  color: #c75a4a;
}
.sl-retention-copy {
  font-size: 14px;
  line-height: 1.6;
  opacity: 0.72;
  margin: 0 0 18px 0;
  text-align: center;
}
.sl-retention-note {
  font-size: 13px;
  line-height: 1.55;
  opacity: 0.60;
  margin: 0 0 18px 0;
  text-align: center;
}
.sl-retention-note--spaced {
  margin: 18px 0 4px 0;
  font-style: italic;
}
.sl-retention-offer {
  font-size: 15px;
  line-height: 1.7;
  opacity: 0.80;
  margin: 0 0 22px 0;
  text-align: center;
}
.sl-retention-final-copy {
  font-size: 15px;
  line-height: 1.65;
  opacity: 0.75;
  margin: 0 0 12px 0;
}
.sl-retention-final-note {
  font-size: 14px;
  line-height: 1.55;
  opacity: 0.60;
  margin: 0 0 22px 0;
}
.sl-profile-consult-copy {
  font-size: 15px;
  line-height: 1.65;
  opacity: 0.75;
  margin: 0;
  max-width: 54ch;
}
.sl-cta--micro { font-size: 11px; }
.sl-profile-toast {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 300;
  padding: 12px 20px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
}
.sl-billing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.sl-faq-button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: inherit;
  padding: 0;
  text-align: left;
}
.sl-faq-answer {
  font-size: 14px;
  line-height: 1.65;
  opacity: 0.72;
  padding-top: 8px;
  max-width: 60ch;
}
.sl-discord-copy {
  font-size: 14px;
  line-height: 1.65;
  opacity: 0.72;
  margin: 0;
}
.sl-prefix-auth-input {
  font-size: 15px;
  font-weight: 400;
}
.sl-prefix-auth-error { font-size: 11px; }
.sl-turnstile-container {
  display: flex;
  justify-content: center;
  margin: 16px 0;
  min-height: 65px;
}
.captcha-error {
  font-size: 11px;
  color: #ef4444;
  text-align: center;
  margin-top: 4px;
}
.sl-side-banner-exclusive {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0 12px;
  gap: 10px;
  position: absolute;
  width: 159px;
  height: 25px;
  right: 20px;
  top: -18px;
  background: linear-gradient(45.45deg, #EFC920 2.38%, #F2D13D 33.71%, #FFF2B4 55.38%, #EDCA3B 70.09%, #E9C01D 92.61%);
  border-radius: 100px;
  flex: none;
  order: 2;
  flex-grow: 0;
  z-index: 2;
  font-weight: 700;
  font-size: 15px;
  color: #000;
  text-shadow: none;
  letter-spacing: 0.5px;
}
.charts-dropdown-charts-label { font-size: 16px; }
.ltt-mobile-login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid;
  opacity: 0.65;
  transition: opacity 130ms ease;
  text-decoration: none;
  color: inherit;
  border-color: currentColor;
  background: none;
  width: 100%;
  cursor: pointer;
}
.ltt-mobile-cat-btn {
  font-size: 15px;
  padding: 8px 14px 8px 28px;
  opacity: 0.85;
}
.ltt-mobile-link-strong {
  font-weight: 600;
  opacity: 1;
}
.ltt-palette-empty {
  padding: 16px 12px;
  font-size: 14px;
  opacity: 0.45;
}
.ltt-logo-text {
  font-weight: 700;
  font-size: 20px;
}

/* ==========================================================
   Text selection
   ========================================================== */
::selection { background: rgba(200,158,61,0.32); color: #1f1811; }
[data-theme="dark"] ::selection { background: rgba(255,206,108,0.62); color: #08111e; }

/* ==========================================================
   Semantic series-color emphasis (.ser-*) inside prose.
   Default 4-token set. Pages needing 5–10 add their own.
   ========================================================== */
.sl-prose .ser-gold,
.sl-prose .ser-cobalt,
.sl-prose .ser-rust,
.sl-prose .ser-neutral,
.sl-prose .ser-silver { font-weight: 700; opacity: 1; }
.sl-void[data-void="light"] .sl-prose .ser-gold    { color: #b67928; }
.sl-void[data-void="dark"]  .sl-prose .ser-gold    { color: #e3c57c; }
.sl-void[data-void="light"] .sl-prose .ser-cobalt  { color: #4e74d9; }
.sl-void[data-void="dark"]  .sl-prose .ser-cobalt  { color: #6b9fff; }
.sl-void[data-void="light"] .sl-prose .ser-rust    { color: #c75a4a; }
.sl-void[data-void="dark"]  .sl-prose .ser-rust    { color: #e8735f; }
.sl-void[data-void="light"] .sl-prose .ser-neutral { color: #1f1811; }
.sl-void[data-void="dark"]  .sl-prose .ser-neutral { color: #f5efe3; }
.sl-void[data-void="light"] .sl-prose .ser-silver  { color: #7c8187; }
.sl-void[data-void="dark"]  .sl-prose .ser-silver  { color: #9ba8b8; }

/* ==========================================================
   Surfaces — canonical material family (updated 2026-04-10)
   .sl-surface     = generic card base (no bloom) — homepage, community, profile
   .sl-chart-surface = chart shell (base + bloom gradient)
   .sl-data-card   = data card (same material as .sl-surface, different padding)
   ========================================================== */

/* --- Generic surface base (no bloom) --- */
.sl-surface {
  border-radius: 22px;
  transition: background 400ms ease, border-color 400ms ease, box-shadow 400ms ease;
}
.sl-void[data-void="light"] .sl-surface {
  border: 1px solid rgba(53,40,24,0.10);
  background: linear-gradient(180deg, #fffdf9 0%, #faf6ef 100%);
  box-shadow: 0 2px 0 #fff inset, 0 12px 32px rgba(86,59,27,0.06);
}
.sl-void[data-void="dark"] .sl-surface {
  border: 1px solid rgba(180,186,198,0.22);
  backdrop-filter: blur(22px) saturate(115%); -webkit-backdrop-filter: blur(22px) saturate(115%);
  background: linear-gradient(180deg, rgba(34,38,46,0.42) 0%, rgba(22,26,34,0.32) 100%);
  box-shadow: 0 4px 24px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.06);
}
/* Hover — locked PH3/GH4 edge + glow, no vertical lift */
.sl-void[data-void="light"] .sl-surface--hover:hover {
  border-color: rgba(201,162,39,0.28);
  box-shadow: 0 24px 64px rgba(75,54,24,0.14), 0 0 52px rgba(201,162,39,0.18);
}
.sl-void[data-void="dark"] .sl-surface--hover:hover {
  border-color: rgba(141,181,255,0.30);
  box-shadow: 0 28px 72px rgba(0,0,0,0.42), 0 0 52px rgba(141,181,255,0.12);
}

/* --- Chart surface (base + bloom) --- */
.sl-chart-surface {
  border-radius: 22px; overflow: hidden;
  position: relative; padding: 18px 18px 12px;
  transition: background 400ms ease, border-color 400ms ease, box-shadow 400ms ease;
}
/* Light — Bloom Top */
.sl-void[data-void="light"] .sl-chart-surface {
  border: 1px solid rgba(53,40,24,0.10);
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(238,214,160,0.32), transparent 60%),
    linear-gradient(180deg, #fffdf9 0%, #faf6ef 100%);
  box-shadow:
    0 2px 0 #fff inset,
    0 -8px 32px rgba(238,214,160,0.18),
    0 12px 32px rgba(86,59,27,0.06);
}
/* Dark — graphite + warm top bloom */
.sl-void[data-void="dark"] .sl-chart-surface {
  border: 1px solid rgba(180,186,198,0.22);
  backdrop-filter: blur(22px) saturate(115%); -webkit-backdrop-filter: blur(22px) saturate(115%);
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(227,197,124,0.18), transparent 65%),
    linear-gradient(180deg, rgba(34,38,46,0.42) 0%, rgba(22,26,34,0.32) 100%);
  box-shadow: 0 4px 24px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.06);
}

/* --- Data card (no bloom, centered content) --- */
.sl-data-card {
  border-radius: 22px; padding: 20px 22px; text-align: center;
  /* Stay at natural content height when used as a grid sidecar — do not
     stretch to match the prose column on the left. Matches the
     TradingView affiliate card, which sits at its own height instead of
     filling the row. The chart-page interpretation grid uses
     `xl:grid-cols-[minmax(0,1fr)_320px]` whose default `align-items: stretch`
     would otherwise force the card to grow with the prose column. */
  align-self: start;
  transition: background 400ms ease, border-color 400ms ease, box-shadow 400ms ease;
}
.sl-void[data-void="light"] .sl-data-card {
  border: 1px solid rgba(53,40,24,0.10);
  background: linear-gradient(180deg, #fffdf9 0%, #faf6ef 100%);
  box-shadow: 0 2px 0 #fff inset, 0 12px 32px rgba(86,59,27,0.06);
}
.sl-void[data-void="dark"] .sl-data-card {
  border: 1px solid rgba(180,186,198,0.22);
  backdrop-filter: blur(22px) saturate(115%); -webkit-backdrop-filter: blur(22px) saturate(115%);
  background: linear-gradient(180deg, rgba(34,38,46,0.42) 0%, rgba(22,26,34,0.32) 100%);
  box-shadow: 0 4px 24px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.06);
}

/* --- Unified hover (chart-surface + data-card) --- */
.sl-void[data-void="light"] .sl-chart-surface:hover,
.sl-void[data-void="light"] .sl-data-card:hover {
  border-color: rgba(201,162,39,0.28);
  box-shadow: 0 24px 64px rgba(75,54,24,0.14), 0 0 52px rgba(201,162,39,0.18);
  transform: none;
}
.sl-void[data-void="dark"] .sl-chart-surface:hover,
.sl-void[data-void="dark"] .sl-data-card:hover {
  border-color: rgba(141,181,255,0.30);
  box-shadow: 0 28px 72px rgba(0,0,0,0.42), 0 0 52px rgba(141,181,255,0.12);
  transform: none;
}

/* ---------- Data card internals ---------- */
/* `margin` uses `!important` because this class is applied to `<h3>`
   inside `.sl-void`, which has a higher-specificity reset of `margin: 0`.
   Without `!important` the 14px gap below the "Current Data" label
   silently collapses to 0 on every chart page. */
.sl-data-card__title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.09em;
  margin: 0 0 14px !important;
}
.sl-void[data-void="light"] .sl-data-card__title { color: #534838; }
.sl-void[data-void="dark"] .sl-data-card__title { color: #aca193; }

.sl-data-row { padding: 10px 0; }
.sl-void[data-void="light"] .sl-data-row { border-bottom: 1px solid rgba(53,40,24,0.06); }
.sl-void[data-void="dark"] .sl-data-row { border-bottom: 1px solid rgba(255,255,255,0.06); }
.sl-data-row:last-child { border-bottom: 0; }

.sl-data-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.sl-void[data-void="light"] .sl-data-label { color: #534838; }
.sl-void[data-void="dark"] .sl-data-label { color: #aca193; }

.sl-data-value {
  font-family: 'Sora', sans-serif;
  font-size: 1.4rem; font-weight: 700;
  letter-spacing: -0.04em; line-height: 1;
}
.sl-void[data-void="light"] .sl-data-value { color: #1f1811; }
.sl-void[data-void="dark"] .sl-data-value { color: #f5efe3; }

/* opacity bumped 0.75 → 0.88 for contrast pass (2026-04-13). Combined
   with the new `#534838` base prose color, the effective contrast on
   the data card cream material is now ~7:1 (was ~5.5:1). */
.sl-data-prose { margin: 0; font-size: 15px; line-height: 1.6; opacity: 0.88; }
.sl-void[data-void="light"] .sl-data-prose strong { color: #1f1811; opacity: 1; }
.sl-void[data-void="dark"] .sl-data-prose strong { color: #f5efe3; opacity: 1; }

/* ==========================================================
   Dividers + vertical rhythm
   ========================================================== */
.sl-divider { height: 1px; border: 0; margin: 0; }
.sl-void[data-void="light"] .sl-divider { background: rgba(53,40,24,0.08); }
.sl-void[data-void="dark"] .sl-divider { background: rgba(255,255,255,0.08); }

.sl-section { padding-top: 32px; padding-bottom: 32px; }
.sl-section__head { margin-bottom: 20px !important; }
.sl-header-spacer { height: 76px; }
.sl-section-title-spaced { margin-bottom: 28px !important; }
.sl-form-offset { margin-top: 28px; }
.sl-catalog-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 20px; margin-bottom: 24px;
}

/* ==========================================================
   Chart loader (CSS-only conic spinner)
   ========================================================== */
.sl-chart-loader { position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; pointer-events: none;
  opacity: 1; transition: opacity 320ms ease; }
.sl-chart-loader.is-hidden { opacity: 0; }
.sl-chart-loader.is-gone { display: none; }
.sl-spinner { width: 42px; height: 42px; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(200,158,61,0) 0%, rgba(200,158,61,0.9) 100%);
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%);
  mask: radial-gradient(circle, transparent 58%, #000 60%);
  animation: sl-spin 900ms linear infinite; }
.sl-void[data-void="dark"] .sl-spinner {
  background: conic-gradient(from 0deg, rgba(231,180,74,0) 0%, rgba(231,180,74,0.95) 100%); }
.sl-loader-text { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.sl-void[data-void="light"] .sl-loader-text { color: rgba(53,40,24,0.78); }
.sl-void[data-void="dark"]  .sl-loader-text { color: rgba(255,255,255,0.55); }
.sl-chart-loader--compact .sl-spinner { width: 38px; height: 38px; }
.sl-chart-loader--compact .sl-loader-text { font-size: 11px; }
.sl-chart-loader.is-error .sl-spinner { animation: none;
  background: conic-gradient(from 0deg, rgba(191,73,50,0.9), rgba(191,73,50,0.9)); }
@keyframes sl-spin { to { transform: rotate(1turn); } }

/* ==========================================================
   TradingView affiliate card — same base as .sl-data-card
   ========================================================== */
.tv-affiliate {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 28px 24px; border-radius: 22px; text-decoration: none;
  transition: all 220ms ease-out;
}
.sl-void[data-void="light"] .tv-affiliate {
  border: 1px solid rgba(53,40,24,0.10);
  background: linear-gradient(180deg, #fffdf9 0%, #faf6ef 100%);
  box-shadow: 0 2px 0 #fff inset, 0 12px 32px rgba(86,59,27,0.06);
}
.sl-void[data-void="dark"] .tv-affiliate {
  border: 1px solid rgba(180,186,198,0.22);
  backdrop-filter: blur(22px) saturate(115%); -webkit-backdrop-filter: blur(22px) saturate(115%);
  background: linear-gradient(180deg, rgba(34,38,46,0.42) 0%, rgba(22,26,34,0.32) 100%);
  box-shadow: 0 4px 24px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.06);
}
.tv-affiliate__logo { width: 200px; height: auto; display: block; }
.tv-affiliate__logo--light { display: block; }
.tv-affiliate__logo--dark  { display: none; }
.sl-void[data-void="dark"] .tv-affiliate__logo--light { display: none; }
.sl-void[data-void="dark"] .tv-affiliate__logo--dark  { display: block; }
.tv-affiliate__tagline {
  font-family: 'Inter', sans-serif;
  font-size: 15px; line-height: 1.55; margin: 0;
  text-align: center; max-width: 28ch;
}
.sl-void[data-void="light"] .tv-affiliate__tagline { color: #534838; }
.sl-void[data-void="dark"]  .tv-affiliate__tagline { color: #aca193; }
.tv-affiliate__cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.10em;
  padding: 10px 18px; border-radius: 999px;
  transition: all 200ms ease-out;
}
.sl-void[data-void="light"] .tv-affiliate__cta {
  background: rgba(78,116,217,0.06);
  border: 1px solid rgba(78,116,217,0.28);
  color: #3b5bb0;
}
.sl-void[data-void="light"] .tv-affiliate:hover .tv-affiliate__cta {
  background: rgba(78,116,217,0.14);
  border-color: rgba(78,116,217,0.48);
  color: #2f4a95;
}
.sl-void[data-void="dark"] .tv-affiliate__cta {
  background: rgba(143,178,255,0.08);
  border: 1px solid rgba(143,178,255,0.30);
  color: #8fb2ff;
}
.sl-void[data-void="dark"] .tv-affiliate:hover .tv-affiliate__cta {
  background: rgba(143,178,255,0.16);
  border-color: rgba(143,178,255,0.48);
  color: #b5cdff;
}
/* TV card hover — unified */
.sl-void[data-void="light"] .tv-affiliate:hover {
  border-color: rgba(201,162,39,0.28);
  box-shadow: 0 24px 64px rgba(75,54,24,0.14), 0 0 52px rgba(201,162,39,0.18);
}
.sl-void[data-void="dark"] .tv-affiliate:hover {
  border-color: rgba(141,181,255,0.30);
  box-shadow: 0 28px 72px rgba(0,0,0,0.42), 0 0 52px rgba(141,181,255,0.12);
}

/* ==========================================================
   Toggle scale button (golden)
   ========================================================== */
.sl-toggle-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; padding: 0 18px;
  border: 0; border-radius: 999px;
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700;
  line-height: 1; text-decoration: none;
  background: linear-gradient(135deg, #a67e24 0%, #c89e3d 56%, #e3c57c 100%);
  color: #2a1f0f;
  box-shadow: 0 4px 12px rgba(166,126,36,0.22);
  cursor: pointer; transition: box-shadow 130ms ease;
  margin: 18px 0 8px;
}
.sl-toggle-btn:hover { box-shadow: 0 6px 16px rgba(166,126,36,0.32); }
.sl-void[data-void="dark"] .sl-toggle-btn {
  background: linear-gradient(135deg, #8a6620 0%, #c89e3d 56%, #f0d58a 100%);
  color: #1a1206;
  box-shadow: 0 4px 14px rgba(0,0,0,0.38), 0 0 24px rgba(231,180,74,0.18);
}
.sl-void[data-void="dark"] .sl-toggle-btn:hover {
  box-shadow: 0 6px 18px rgba(0,0,0,0.44), 0 0 32px rgba(231,180,74,0.28);
}
.sl-toggle-wrap { display: flex; justify-content: center; }

/* Paired-toggle modifier. When a `.sl-toggle-wrap` contains two or more
   `.sl-toggle-btn`s that represent a mode selector (All / 1Y, Linear /
   Log, Absolute / YoY), add `.sl-toggle-group` as a second class on the
   wrap. Inactive buttons dim to 0.55 opacity so the `.is-active` button
   reads as the selected state. Solo `.sl-toggle-wrap` (single-button
   scale toggles) stays fully opaque and is unaffected. */
.sl-toggle-group .sl-toggle-btn { opacity: 0.55; }
.sl-toggle-group .sl-toggle-btn.is-active { opacity: 1; }

/* ==========================================================
   CTA family — locked sizes (32px small, 44px large)
   Single family: cobalt/blue gradient. Gold CTA dropped 2026-04-09.
   ========================================================== */
.sl-cta {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px;
  font-family: 'Inter', sans-serif; font-weight: 700;
  line-height: 1; text-decoration: none; cursor: pointer;
  transition: box-shadow 130ms ease, transform 130ms ease;
}
.sl-cta--sm  { height: 32px; padding: 0 18px; font-size: 14px; }
.sl-cta--lg  { height: 44px; padding: 0 26px; font-size: 15px; }

/* Primary — cobalt gradient */
.sl-cta--cobalt {
  background: linear-gradient(135deg, #2f5fc8 0%, #4f86ec 56%, #8dcbff 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(36,78,166,0.18);
}
.sl-void[data-void="dark"] .sl-cta--cobalt {
  background: linear-gradient(135deg, #2c4f9e 0%, #487de0 56%, #78c6ff 100%);
}
.sl-cta--cobalt:hover { box-shadow: 0 6px 16px rgba(36,78,166,0.28); }

/* Outline secondary — neutral ghost border */
.sl-cta--outline {
  background: transparent;
  border: 1px solid rgba(53,40,24,0.22);
  color: inherit;
}
.sl-void[data-void="dark"] .sl-cta--outline {
  border-color: rgba(255,255,255,0.22);
}
.sl-void[data-void="light"] .sl-cta--outline:hover {
  border-color: rgba(78,116,217,0.50);
  color: #2f4ea8;
}
.sl-void[data-void="dark"] .sl-cta--outline:hover {
  border-color: rgba(141,181,255,0.50);
  color: #8fb2ff;
}

/* Ghost pill — mono-caps secondary CTA (JetBrains Mono, cobalt-tinted) */
.sl-cta--secondary {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 16px; border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.10em;
  line-height: 1; text-decoration: none;
  background: transparent;
  transition: all 200ms ease-out;
}
.sl-void[data-void="light"] .sl-cta--secondary {
  background: rgba(78,116,217,0.06);
  border: 1px solid rgba(78,116,217,0.28);
  color: #3b5bb0;
}
.sl-void[data-void="light"] .sl-cta--secondary:hover {
  background: rgba(78,116,217,0.14);
  border-color: rgba(78,116,217,0.48);
  color: #2f4a95;
}
.sl-void[data-void="dark"] .sl-cta--secondary {
  background: rgba(143,178,255,0.08);
  border: 1px solid rgba(143,178,255,0.30);
  color: #8fb2ff;
}
.sl-void[data-void="dark"] .sl-cta--secondary:hover {
  background: rgba(143,178,255,0.16);
  border-color: rgba(143,178,255,0.48);
  color: #b5cdff;
}

/* ==========================================================
   Inline pill label (.sl-tag) — feature tags on cards
   ========================================================== */
.sl-tag {
  display: inline-flex; align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 4px 10px; border-radius: 999px;
}
.sl-void[data-void="light"] .sl-tag {
  background: rgba(200,158,61,0.10);
  border: 1px solid rgba(200,158,61,0.28);
  color: #8a5a14;
}
.sl-void[data-void="dark"] .sl-tag {
  background: rgba(227,197,124,0.10);
  border: 1px solid rgba(227,197,124,0.30);
  color: #e3c57c;
}

/* ==========================================================
   Homepage/catalog product cards — shared SL card families
   ========================================================== */
.sl-signup {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 8px 8px 18px; border-radius: 999px;
  max-width: 460px;
  backdrop-filter: blur(22px) saturate(115%);
  -webkit-backdrop-filter: blur(22px) saturate(115%);
}
.sl-void[data-void="light"] .sl-signup {
  border: 1px solid rgba(80,86,98,0.26);
  background: linear-gradient(180deg, rgba(238,236,232,0.40) 0%, rgba(224,222,218,0.28) 100%);
  box-shadow: 0 4px 24px rgba(40,42,50,0.08), inset 0 1px 0 rgba(255,255,255,0.55);
}
.sl-void[data-void="dark"] .sl-signup {
  border: 1px solid rgba(180,186,198,0.22);
  background: linear-gradient(180deg, rgba(34,38,46,0.48) 0%, rgba(22,26,34,0.38) 100%);
  box-shadow: 0 4px 24px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.06);
}
.sl-signup input {
  flex: 1 1 auto; min-width: 0;
  background: transparent; border: 0; outline: 0;
  font-family: 'Inter', sans-serif; font-size: 15px;
  color: inherit;
}
.sl-signup input::placeholder { font-family: 'Inter', sans-serif; }
.sl-void[data-void="light"] .sl-signup input::placeholder { color: rgba(112,102,91,0.65); }
.sl-void[data-void="dark"]  .sl-signup input::placeholder { color: rgba(172,161,147,0.65); }
.sl-signup-msg {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.09em;
  margin-top: 8px; max-width: 460px;
}
.sl-void[data-void="light"] .sl-signup-msg { color: #8a5a14; }
.sl-void[data-void="dark"]  .sl-signup-msg { color: #e3c57c; }
.sl-featured-on {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin-top: 28px;
}
.sl-featured-on__label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.09em;
  opacity: 0.45;
}
.sl-featured-on a {
  font-family: 'Sora', sans-serif;
  font-size: 15px; font-weight: 500;
  text-decoration: none; opacity: 0.75;
  transition: opacity 160ms ease;
}
.sl-featured-on a:hover { opacity: 1; }
.sl-featured-on a.financial {
  font-family: 'Financier Text', 'Times New Roman', 'Georgia', serif;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  opacity: 0.85;
}
.sl-featured-on a.new-york {
  font-family: 'chomsky', 'Times New Roman', serif;
  font-weight: 400;
  font-size: 26px;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1;
  opacity: 0.90;
}
.sl-featured-on a.financial:hover,
.sl-featured-on a.new-york:hover { opacity: 1; }
.sl-featured-on__separator { opacity: 0.25; }
.sl-filter {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
}
.sl-filter--catalog { margin-bottom: 28px; }
.sl-filter-pill {
  display: inline-flex; align-items: center;
  height: 30px; padding: 0 14px;
  border-radius: 999px; cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600;
  line-height: 1; letter-spacing: 0.01em;
  background: transparent;
  transition: all 140ms ease;
}
.sl-void[data-void="light"] .sl-filter-pill {
  border: 1px solid rgba(53,40,24,0.14);
  color: #534838;
}
.sl-void[data-void="light"] .sl-filter-pill:hover {
  border-color: rgba(200,158,61,0.40);
  color: #8a5a14;
}
.sl-void[data-void="light"] .sl-filter-pill.is-active {
  background: rgba(200,158,61,0.12);
  border-color: rgba(200,158,61,0.46);
  color: #8a5a14;
}
.sl-void[data-void="dark"] .sl-filter-pill {
  border: 1px solid rgba(255,255,255,0.14);
  color: #aca193;
}
.sl-void[data-void="dark"] .sl-filter-pill:hover {
  border-color: rgba(227,197,124,0.42);
  color: #e3c57c;
}
.sl-void[data-void="dark"] .sl-filter-pill.is-active {
  background: rgba(227,197,124,0.12);
  border-color: rgba(227,197,124,0.48);
  color: #e3c57c;
}
.sl-tool-card {
  display: flex; flex-direction: column;
  padding: 22px; gap: 14px;
  text-decoration: none; color: inherit;
}
.sl-tool-card__img {
  width: 100%; aspect-ratio: 16 / 9;
  object-fit: cover; object-position: left center;
  border-radius: 14px; display: block;
}
.sl-void[data-void="light"] .sl-tool-card__img { border: 1px solid rgba(53,40,24,0.08); }
.sl-void[data-void="dark"]  .sl-tool-card__img { border: 1px solid rgba(255,255,255,0.06); }
/* Filter ONLY un-themed single-image tool cards in dark mode so the
   light-mode source blends with the dark canvas. Per-theme tool cards
   (Weekly Macro Report: image_light + image_dark) opt out via the
   .sl-light-only / .sl-dark-only classes. Strengthened 2026-04-17 from
   brightness 0.82 → 0.72 so the three remaining un-themed tool images
   (Macro Compass, Investment Co-Pilot, FIRE Agent) recede further into
   the dark void. */
.sl-void[data-void="dark"] .sl-tool-card__img:not(.sl-light-only):not(.sl-dark-only) {
  filter: brightness(0.72) contrast(1.12) saturate(0.85);
}
.sl-tool-card__title {
  font-family: 'Sora', sans-serif; font-size: 1.15rem; font-weight: 600;
  letter-spacing: -0.03em; margin: 0;
}
.sl-tool-card__desc {
  font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.55;
  margin: 0; opacity: 0.75;
}
.sl-tool-card__cta-row { margin-top: auto; padding-top: 6px; }
.sl-chart-card {
  display: flex; flex-direction: column;
  padding: 16px; gap: 12px;
  text-decoration: none; color: inherit;
}
.sl-chart-card__img {
  width: 100%; aspect-ratio: 13 / 10;
  object-fit: cover; border-radius: 12px; display: block;
}
.sl-void[data-void="light"] .sl-chart-card__img { border: 1px solid rgba(53,40,24,0.08); background: rgba(255,255,255,0.4); }
.sl-void[data-void="dark"]  .sl-chart-card__img { border: 1px solid rgba(255,255,255,0.06); background: rgba(10,15,24,0.4); }
/* Chart-card dark filter removed 2026-04-17 — every chart card now ships
   a dedicated `image_dark` variant, so the legacy single-image dim path
   no longer has anything to target and adds noise if it ever matches. */
.sl-light-only, .sl-dark-only { display: none; }
.sl-void[data-void="light"] .sl-light-only { display: block; }
.sl-void[data-void="dark"]  .sl-dark-only  { display: block; }
.sl-chart-card__title {
  font-family: 'Sora', sans-serif; font-size: 16px; font-weight: 600;
  letter-spacing: -0.02em; margin: 0; line-height: 1.25;
}
.sl-chart-card__desc {
  font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.55;
  margin: 0; opacity: 0.62;
}
.sl-chart-card__tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  opacity: 0.45; margin: 0;
}
.sl-chart-card__labels {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin: 0;
}
.sl-chart-card__label {
  display: inline-flex; align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 3px 8px; border-radius: 999px;
  line-height: 1;
}
.sl-void[data-void="light"] .sl-chart-card__label {
  background: rgba(53,40,24,0.05);
  border: 1px solid rgba(53,40,24,0.10);
  color: #534838;
}
.sl-void[data-void="dark"] .sl-chart-card__label {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: #aca193;
}
.sl-void[data-void="light"] .sl-chart-card__label.is-active {
  background: rgba(200,158,61,0.14);
  border-color: rgba(200,158,61,0.42);
  color: #8a5a14;
}
.sl-void[data-void="dark"] .sl-chart-card__label.is-active {
  background: rgba(227,197,124,0.14);
  border-color: rgba(227,197,124,0.44);
  color: #e3c57c;
}
.sl-chart-card__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 2px;
}
.sl-chart-card__action-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  opacity: 0.40;
}
.sl-chart-card__arrow {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700;
  opacity: 0; transform: translateX(-4px); transition: all 180ms ease;
}
.sl-void[data-void="light"] .sl-chart-card__arrow { color: #8a5a14; }
.sl-void[data-void="dark"]  .sl-chart-card__arrow { color: #e3c57c; }
.sl-chart-card:hover .sl-chart-card__arrow { opacity: 1; transform: translateX(0); }
@media (max-width: 767px) {
  .sl-filter-pill.sl-filter-pill--tablet-hide { display: none; }
}

/* ==========================================================
   Chart-page reusable banner
   ========================================================== */
.sl-chart-banner {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}

/* ==========================================================
   Highcharts chrome — gold-accented controls
   (Only applies to pages that load Highcharts — inert on others)
   ========================================================== */

/* Range-selector buttons */
.sl-void[data-void="light"] .highcharts-range-selector-buttons .highcharts-button rect {
  fill: rgba(200,158,61,0.08) !important; stroke: rgba(200,158,61,0.22) !important;
}
.sl-void[data-void="light"] .highcharts-range-selector-buttons .highcharts-button text {
  fill: #b67928 !important; font-weight: 600 !important;
}
.sl-void[data-void="light"] .highcharts-range-selector-buttons .highcharts-button-hover rect {
  fill: rgba(200,158,61,0.18) !important; stroke: rgba(200,158,61,0.36) !important;
}
.sl-void[data-void="light"] .highcharts-range-selector-buttons .highcharts-button-pressed rect {
  fill: rgba(200,158,61,0.28) !important; stroke: rgba(200,158,61,0.46) !important;
}
.sl-void[data-void="light"] .highcharts-range-selector-buttons .highcharts-button-pressed text {
  fill: #8a5a14 !important;
}
.sl-void[data-void="dark"] .highcharts-range-selector-buttons .highcharts-button rect {
  fill: rgba(227,197,124,0.08) !important; stroke: rgba(227,197,124,0.24) !important;
}
.sl-void[data-void="dark"] .highcharts-range-selector-buttons .highcharts-button text {
  fill: #e3c57c !important; font-weight: 600 !important;
}
.sl-void[data-void="dark"] .highcharts-range-selector-buttons .highcharts-button-hover rect {
  fill: rgba(227,197,124,0.18) !important; stroke: rgba(227,197,124,0.40) !important;
}
.sl-void[data-void="dark"] .highcharts-range-selector-buttons .highcharts-button-pressed rect {
  fill: rgba(227,197,124,0.28) !important; stroke: rgba(227,197,124,0.50) !important;
}
.sl-void[data-void="dark"] .highcharts-range-selector-buttons .highcharts-button-pressed text {
  fill: #ffe1ad !important;
}

/* Contextbutton (hamburger) — no frame */
.sl-void .highcharts-contextbutton rect {
  fill: transparent !important; stroke: transparent !important;
}
.sl-void[data-void="light"] .highcharts-contextbutton .highcharts-button-symbol { stroke: #b67928 !important; }
.sl-void[data-void="dark"] .highcharts-contextbutton .highcharts-button-symbol { stroke: #e3c57c !important; }

/* Navigator handles + selected mask */
.sl-void[data-void="light"] .highcharts-navigator-handle { fill: #c89e3d !important; stroke: #b67928 !important; }
.sl-void[data-void="light"] .highcharts-navigator-mask-inside { fill: rgba(200,158,61,0.10) !important; }
.sl-void[data-void="dark"] .highcharts-navigator-handle { fill: #e3c57c !important; stroke: #c89e3d !important; }
.sl-void[data-void="dark"] .highcharts-navigator-mask-inside { fill: rgba(227,197,124,0.08) !important; }

/* Range-input date picker */
.sl-void[data-void="light"] .highcharts-range-input text,
.sl-void[data-void="light"] .highcharts-range-label text {
  fill: #b67928 !important; font-weight: 600 !important;
}
.sl-void[data-void="dark"] .highcharts-range-input text,
.sl-void[data-void="dark"] .highcharts-range-label text {
  fill: #e3c57c !important; font-weight: 600 !important;
}
.sl-void .highcharts-range-input rect,
.sl-void .highcharts-range-input:hover rect {
  fill: transparent !important; stroke: transparent !important;
}
.sl-void[data-void="light"] input.highcharts-range-selector {
  color: #1f1811 !important; background: #fffefc !important;
  border: 1px solid rgba(200,158,61,0.40) !important;
  border-radius: 4px !important; padding: 2px 6px !important;
  outline: none !important; color-scheme: light;
}
.sl-void[data-void="dark"] input.highcharts-range-selector {
  color: #f5efe3 !important; background: #1a1e25 !important;
  border: 1px solid rgba(227,197,124,0.40) !important;
  border-radius: 4px !important; padding: 2px 6px !important;
  outline: none !important; color-scheme: dark;
}
.sl-void[data-void="dark"] input.highcharts-range-selector::-webkit-calendar-picker-indicator {
  filter: brightness(0) saturate(100%) invert(82%) sepia(40%) saturate(440%) hue-rotate(2deg) brightness(98%) contrast(91%);
  opacity: 1 !important; cursor: pointer; padding-left: 4px; transform: scale(1.1);
}
.sl-void[data-void="light"] input.highcharts-range-selector::-webkit-calendar-picker-indicator {
  filter: brightness(0) saturate(100%) invert(38%) sepia(74%) saturate(700%) hue-rotate(11deg) brightness(95%) contrast(90%);
  opacity: 1 !important; cursor: pointer; padding-left: 4px; transform: scale(1.1);
}

/* Grid + plot lines */
.sl-void[data-void="dark"] .highcharts-grid-line { stroke: rgba(255,255,255,0.06) !important; }
.sl-void[data-void="dark"] .highcharts-yaxis-grid .highcharts-grid-line,
.sl-void[data-void="dark"] .highcharts-xaxis-grid .highcharts-grid-line { stroke: rgba(255,255,255,0.06) !important; }
.sl-void[data-void="dark"] .highcharts-plot-line { stroke: rgba(227,197,124,0.32) !important; stroke-width: 1px !important; }
.sl-void[data-void="dark"] .highcharts-plot-line-label { fill: rgba(227,197,124,0.55) !important; font-size: 10px !important; }
.sl-void[data-void="dark"] .highcharts-axis-line { stroke: rgba(255,255,255,0.10) !important; }
.sl-void[data-void="dark"] .highcharts-tick { stroke: rgba(255,255,255,0.10) !important; }
.sl-void[data-void="light"] .highcharts-grid-line { stroke: rgba(53,40,24,0.07) !important; }
.sl-void[data-void="light"] .highcharts-plot-line { stroke: rgba(184,121,40,0.40) !important; stroke-width: 1px !important; }
.sl-void[data-void="light"] .highcharts-plot-line-label { fill: rgba(138,90,20,0.65) !important; font-size: 10px !important; }

/* Y-axis labels */
.sl-void[data-void="dark"] .highcharts-yaxis-labels text { fill: rgba(245,239,227,0.55) !important; }

/* X-axis labels — "Plate" style */
.sl-void[data-void="dark"] .highcharts-xaxis-labels text {
  fill: #ffffff !important;
  stroke: rgba(8,17,30,0.95) !important;
  stroke-width: 4px !important;
  paint-order: stroke fill !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}
.sl-void[data-void="light"] .highcharts-xaxis-labels text {
  fill: #1f1811 !important;
  stroke: rgba(252,248,240,0.92) !important;
  stroke-width: 3px !important;
  paint-order: stroke fill !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}
.sl-void[data-void="dark"] .highcharts-navigator-outline { stroke: rgba(255,255,255,0.18) !important; }

/* Flag bubbles */
.sl-void[data-void="light"] .highcharts-flags-series .highcharts-label rect,
.sl-void[data-void="light"] .highcharts-flags-series .highcharts-label path {
  fill: #fff5dc !important; stroke: #c89e3d !important; stroke-width: 1px !important;
}
.sl-void[data-void="light"] .highcharts-flags-series .highcharts-label text {
  fill: #8a5a14 !important; font-weight: 600 !important;
}
.sl-void[data-void="dark"] .highcharts-flags-series .highcharts-label rect,
.sl-void[data-void="dark"] .highcharts-flags-series .highcharts-label path {
  fill: #2a2e36 !important; stroke: rgba(227,197,124,0.40) !important; stroke-width: 1px !important;
}
.sl-void[data-void="dark"] .highcharts-flags-series .highcharts-label text {
  fill: #c89e3d !important; font-weight: 600 !important;
}

/* Highcharts native title */
.sl-void .highcharts-title {
  font-family: 'Sora', sans-serif !important;
  font-size: 15px !important; font-weight: 600 !important; letter-spacing: -0.01em !important;
}
.sl-void[data-void="light"] .highcharts-title { fill: #1f1811 !important; }
.sl-void[data-void="dark"] .highcharts-title { fill: #f5efe3 !important; }

/* Spanning-tree (Highcharts networkgraph) node labels.
   --------------------------------------------------------------
   Highcharts ships networkgraph data labels with `textOutline:
   'contrast'`, which bakes a 1-2px SVG stroke + `paint-order:
   stroke fill` directly onto each `<text>` element. On the dark
   void this renders as a chunky white-with-dark-halo that reads
   like stencil graffiti and fights the colored nodes. We reset
   every stroke-related SVG property and switch to plain Inter so
   the label reads like the rest of the SL text system.

   Targets both `.highcharts-data-labels` (group) and
   `.highcharts-data-label` (individual label wrapper) plus the
   nested `<tspan>` because Highcharts applies styles on all three
   levels depending on version. Canonical tokens: `#f5efe3` cream
   (dark) / `#1f1811` deep brown (light) — same tokens as
   `.highcharts-title`, `.sl-data-value`, `.sl-prose .ser-neutral`.
   Scoped to `.highcharts-networkgraph-series` so pie charts /
   stacked bars / other data-label-using charts keep their
   per-series label colors. */
.sl-void .highcharts-networkgraph-series .highcharts-data-labels text,
.sl-void .highcharts-networkgraph-series .highcharts-data-labels tspan,
.sl-void .highcharts-networkgraph-series .highcharts-data-label text,
.sl-void .highcharts-networkgraph-series .highcharts-data-label tspan {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  stroke: transparent !important;
  stroke-width: 0 !important;
  paint-order: normal !important;
  text-shadow: none !important;
  letter-spacing: 0 !important;
}
.sl-void[data-void="dark"] .highcharts-networkgraph-series .highcharts-data-labels text,
.sl-void[data-void="dark"] .highcharts-networkgraph-series .highcharts-data-labels tspan,
.sl-void[data-void="dark"] .highcharts-networkgraph-series .highcharts-data-label text,
.sl-void[data-void="dark"] .highcharts-networkgraph-series .highcharts-data-label tspan {
  fill: rgba(245, 239, 227, 0.88) !important;
}
.sl-void[data-void="light"] .highcharts-networkgraph-series .highcharts-data-labels text,
.sl-void[data-void="light"] .highcharts-networkgraph-series .highcharts-data-labels tspan,
.sl-void[data-void="light"] .highcharts-networkgraph-series .highcharts-data-label text,
.sl-void[data-void="light"] .highcharts-networkgraph-series .highcharts-data-label tspan {
  fill: #1f1811 !important;
}

/* Highcharts tooltip — theme-aware surface + text color
   ------------------------------------------------------------------
   Default Highcharts tooltips render a light surface with dark text.
   On dark ltt pages this makes white/cream series colors invisible
   inside the tooltip (seen on stocks-vs-bonds "Total Return Stock
   Index" and every page with a white series in dark mode). Flipping
   the tooltip surface to a dark fill in dark mode keeps any series
   color — light or dark — readable, and mirrors the page atmosphere.

   Works with both regular and split tooltips (stockChart split:true
   renders one `<path>` per series label; regular tooltip renders a
   single `<path class="highcharts-tooltip-box">`). Series-colored
   tspans keep their inline `fill` because we only target tspans that
   don't have an explicit style attribute carrying the series color.

   Added 2026-04-14. */
.sl-void[data-void="dark"] .highcharts-tooltip path,
.sl-void[data-void="dark"] .highcharts-tooltip-box,
.sl-void[data-void="dark"] .highcharts-tooltip .highcharts-label-box {
  fill: rgba(17, 20, 26, 0.96) !important;
  stroke: rgba(255, 255, 255, 0.14) !important;
}
/* Default tooltip text color. Must be `!important` to outrank
   Highcharts' own inline style on the parent `<text>` element
   (which defaults to `fill:#333333`). Tspans that carry an inline
   `style="fill:<series.color>"` from each chart's `pointFormat`
   keep their series color because inline style on the tspan itself
   beats an inherited !important fill from its parent text. So the
   series name stays colored and the "plain" parts (numeric value,
   percent delta, tooltip header date) become readable cream. */
.sl-void[data-void="dark"] .highcharts-tooltip text {
  fill: #ffffff !important;
  text-shadow: none !important;
}

/* Light mode: default Highcharts tooltip is already readable, but
   normalise the surface + border so it matches other light cards
   and push the default text to near-black for high contrast. */
.sl-void[data-void="light"] .highcharts-tooltip path,
.sl-void[data-void="light"] .highcharts-tooltip-box,
.sl-void[data-void="light"] .highcharts-tooltip .highcharts-label-box {
  fill: rgba(255, 252, 247, 0.97) !important;
  stroke: rgba(53, 40, 24, 0.12) !important;
}
.sl-void[data-void="light"] .highcharts-tooltip text {
  fill: #0f0a05 !important;
}

/* ====================================================================
   PRICING — plan grid (shared between landing & profile pages)
   --------------------------------------------------------------------
   Default min-height matches the landing page (680px). Pages that
   render the plan in a tighter slot (e.g. the profile subscription
   tab at 520px) override .sl-plan { min-height } locally.
==================================================================== */
.sl-plan {
  display: flex; flex-direction: column; padding: 28px; gap: 16px;
  min-height: 680px;
  position: relative;
}
/* Plan header — min-height keeps the row aligned across columns even
   when the Free plan has no toggle widget. 36px ≈ toggle height + gap. */
.sl-plan__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  min-height: 36px;
}
.sl-plan__name {
  font-family: 'Sora', sans-serif; font-size: 1.15rem; font-weight: 600;
  letter-spacing: -0.02em;
}
/* Price block wrapper — fixed min-height so billing text in Pro/Max
   doesn't push features lower than Free's "Always free". */
.sl-plan__price-block {
  min-height: 80px;
  display: flex; flex-direction: column; justify-content: flex-start;
}
.sl-plan__price {
  font-family: 'Sora', sans-serif; font-size: 2.4rem; font-weight: 700;
  letter-spacing: -0.04em; line-height: 1;
}
.sl-void[data-void="light"] .sl-plan__price { color: #1f1811; }
.sl-void[data-void="dark"]  .sl-plan__price { color: #f5efe3; }
.sl-plan__price-period {
  /* opacity bumped 0.55 → 0.78 for contrast pass (2026-04-13) */
  font-size: 0.95rem; font-weight: 500; opacity: 0.78;
  margin-left: 4px;
}
.sl-plan__billing {
  /* opacity bumped 0.55 → 0.78 for contrast pass (2026-04-13) */
  font-family: 'Inter', sans-serif; font-size: 12px; opacity: 0.78;
  min-height: 28px;
  margin-top: 6px;
}
.sl-plan__features {
  display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto;
  margin-top: 8px;
}
.sl-plan__feature {
  display: block;
  position: relative;
  padding-left: 28px;
  font-size: 15px; line-height: 1.55;
  font-family: 'Inter', sans-serif;
}
.sl-plan__feature a { color: #2f4ea8; text-decoration: none; }
[data-theme="dark"] .sl-plan__feature a { color: #8fb2ff; }
.sl-plan__feature a:hover { text-decoration: underline; }
.sl-plan__feature--off { opacity: 0.35; }
.sl-plan__check, .sl-plan__cross {
  position: absolute; left: 0; top: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 999px;
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700;
}
.sl-void[data-void="light"] .sl-plan__check {
  background: rgba(200,158,61,0.14); color: #8a5a14;
}
.sl-void[data-void="dark"] .sl-plan__check {
  background: rgba(227,197,124,0.14); color: #e3c57c;
}
.sl-plan__cross { opacity: 0.35; }
.sl-plan__cta { margin-top: auto; }

/* Featured plan accent */
.sl-plan--featured { position: relative; }
.sl-plan--featured::before {
  content: "Most popular";
  position: absolute; top: -10px; left: 28px;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em;
  padding: 5px 10px; border-radius: 999px;
  background: linear-gradient(135deg, #2f5fc8 0%, #4f86ec 56%, #8dcbff 100%);
  color: #ffffff;
}
.sl-void[data-void="dark"] .sl-plan--featured::before {
  background: linear-gradient(135deg, #2c4f9e 0%, #487de0 56%, #78c6ff 100%);
}

/* Monthly/Yearly mini-toggle */
.sl-toggle {
  display: inline-flex; padding: 3px; border-radius: 999px; gap: 2px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.sl-void[data-void="light"] .sl-toggle { background: rgba(53,40,24,0.06); border: 1px solid rgba(53,40,24,0.10); }
.sl-void[data-void="dark"]  .sl-toggle { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); }
.sl-toggle span {
  padding: 5px 10px; border-radius: 999px; cursor: pointer;
  opacity: 0.65; transition: all 140ms ease;
}
.sl-toggle span.is-active { opacity: 1; }
.sl-void[data-void="light"] .sl-toggle span.is-active { background: #fffefc; color: #8a5a14; }
.sl-void[data-void="dark"]  .sl-toggle span.is-active { background: #1a1e25; color: #e3c57c; }

/* ==========================================================
   Migrated template styles — production inline-style cleanup
   Moved from template <style> blocks on 2026-04-17 so type and
   component tokens can be audited from CSS instead of markup.
   ========================================================== */

/* Source: longtermtrends/ltt/pages/charts/breaking_down_us_inflation/html/us-inflation-rates.html */
  /* Extended Series Palette — local declarations (the 4-token set is in sl-system.css) */
  .sl-prose .ser-violet,
  .sl-prose .ser-moss,
  .sl-prose .ser-amber { font-weight: 700; opacity: 1; }
  .sl-void[data-void="light"] .sl-prose .ser-violet { color: #7b5bbd; }
  .sl-void[data-void="dark"]  .sl-prose .ser-violet { color: #a78bfa; }
  .sl-void[data-void="light"] .sl-prose .ser-moss   { color: #6e8a3e; }
  .sl-void[data-void="dark"]  .sl-prose .ser-moss   { color: #8fcc52; }
  .sl-void[data-void="light"] .sl-prose .ser-amber  { color: #b86827; }
  .sl-void[data-void="dark"]  .sl-prose .ser-amber  { color: #f09040; }

/* Source: longtermtrends/ltt/pages/charts/commodity_futures_prices/html/commodities.html */

/* Source: longtermtrends/ltt/pages/charts/copper_gold_ratio/html/copper-gold-ratio.html */
  .ser-amber { color: #b86827; }
  [data-theme="dark"] .ser-amber { color: #f09040; }

/* Source: longtermtrends/ltt/pages/charts/cryptocurrencies/html/cryptocurrencies.html */

/* Source: longtermtrends/ltt/pages/charts/factor_investing/html/factor-investing.html */

/* Source: longtermtrends/ltt/pages/charts/foreign_exchange_rates/html/foreign-exchange-rates.html */

/* Source: longtermtrends/ltt/pages/charts/long_term_government_bond_yields/html/longterm-government-bond-yields.html */
  /* Page-specific: toggle active state — dim inactive, full opacity active */

/* Source: longtermtrends/ltt/pages/charts/market_cap_to_gdp_the_buffett_indicator/html/market-cap-gdp.html */
  /* All canonical SL system styles (void, typography, prose, surfaces,
     loader, data card, divider, section, tv-affiliate, highcharts chrome)
     live in sl-system.css. The only page-specific rule below is
     .cmp-gdp — a Highcharts series class that tracks the .ser-neutral
     prose colour in both themes. */

  /* Chart 5 GDP series — driven by CSS via the .cmp-gdp className
     so it tracks the prose .ser-neutral colour in both themes and
     updates instantly on theme toggle (no chart re-render needed).
     Light = deep brown #1f1811, dark = full cream #f5efe3, exactly
     matching the "economy" emphasis colour in the prose below. */
  .sl-void[data-void="light"] .cmp-gdp .highcharts-graph,
  .sl-void[data-void="light"] .cmp-gdp.highcharts-navigator-series .highcharts-graph,
  .sl-void[data-void="light"] .highcharts-navigator-series .cmp-gdp .highcharts-graph {
    stroke: #1f1811 !important;
  }
  .sl-void[data-void="dark"] .cmp-gdp .highcharts-graph,
  .sl-void[data-void="dark"] .cmp-gdp.highcharts-navigator-series .highcharts-graph,
  .sl-void[data-void="dark"] .highcharts-navigator-series .cmp-gdp .highcharts-graph {
    stroke: #f5efe3 !important;
  }

/* Source: longtermtrends/ltt/pages/charts/mining_stocks_vs_gold_and_silver/html/minings-stocks-to-gold-ratio.html */
  /* Page-specific: .ser-silver emphasis class (extended palette) */
  .sl-prose .ser-silver { font-weight: 700; opacity: 1; }
  .sl-void[data-void="light"] .sl-prose .ser-silver { color: #7c8187; }
  .sl-void[data-void="dark"]  .sl-prose .ser-silver { color: #9ba8b8; }

/* Source: longtermtrends/ltt/pages/charts/msci_country_indices/html/msci-country-indices.html */

/* Source: longtermtrends/ltt/pages/charts/msci_developed_markets/html/msci-developed-markets.html */

/* Source: longtermtrends/ltt/pages/charts/msci_emerging_markets/html/msci-emerging-markets.html */

/* Source: longtermtrends/ltt/pages/charts/msci_frontier_markets/html/msci-frontier-markets.html */

/* Source: longtermtrends/ltt/pages/charts/stocks_vs_gold_comparison/html/stocks-vs-gold.html
   NOTE (2026-04-17): the `.highcharts-plot-band` / `.highcharts-plot-band-label`
   overrides that used to live here were scoped by accident (they only ran on
   stocks-vs-gold because that was the only template loading this inline style
   block). When the template `<style>` blocks were migrated into this file the
   rules started loading globally and their `!important` fill silently
   overwrote every chart's plotBand color — most visibly the Shiller PE page's
   red/green valuation zones. Removed on 2026-04-17; if stocks-vs-gold needs a
   neutral fill again it must scope the selector to a page-specific wrapper
   class, not the global `.sl-void` class. The `.ser-silver` palette token
   below is now redundant with the canonical `.ser-silver` in the main
   `.sl-prose .ser-*` block above — kept here for historical context only. */
  .sl-prose .ser-silver { font-weight: 700; opacity: 1; }
  .sl-void[data-void="light"] .sl-prose .ser-silver { color: #7c8187; }
  .sl-void[data-void="dark"]  .sl-prose .ser-silver { color: #c8ced6; }

/* Source: longtermtrends/ltt/pages/charts/thematic_investing_megatrends/html/megatrends-thematic-investing.html */

/* Source: longtermtrends/ltt/pages/charts/us_sectors_relative_strength/html/us-sectors-relative-strength.html */

/* Source: longtermtrends/ltt/pages/charts/worldwide_inflation_rates/html/worldwide-inflation-rates.html */

/* Source: longtermtrends/ltt/pages/community/api_docs/html/api-docs.html */
  /* =====================================================================
     API docs — page-specific layout on top of sl-system.css primitives.
  ===================================================================== */

  /* Hero stats — simple flat pills. No CTA gradients. */
  .sl-api-stats {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin-top: 18px;
  }
  .sl-api-stat {
    display: inline-flex; align-items: baseline; gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(53,40,24,0.10);
    background: linear-gradient(180deg, #fffdf9 0%, #faf6ef 100%);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
  }
  .sl-void[data-void="dark"] .sl-api-stat {
    border-color: rgba(180,186,198,0.22);
    background: linear-gradient(180deg, rgba(34,38,46,0.42) 0%, rgba(22,26,34,0.32) 100%);
  }
  .sl-api-stat__val {
    font-size: 15px; font-weight: 700;
  }
  .sl-void[data-void="light"] .sl-api-stat__val { color: #1f1811; }
  .sl-void[data-void="dark"]  .sl-api-stat__val { color: #f5efe3; }
  .sl-api-stat__label {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.09em;
    opacity: 0.78;
  }

  /* Generic content card shared by Quickstart / Auth / Response / Filter. */
  .sl-api-card {
    padding: 26px 28px;
    display: flex; flex-direction: column; gap: 14px;
  }
  .sl-api-card h2 {
    font-family: 'Sora', sans-serif; font-size: 1.15rem; font-weight: 600;
    letter-spacing: -0.02em; margin: 0;
  }

  /* Numbered steps (Quickstart). */
  .sl-step-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
  .sl-step-list li { display: flex; align-items: flex-start; gap: 14px; font-size: 15px; line-height: 1.6; }
  .sl-step-num {
    flex: 0 0 26px;
    width: 26px; height: 26px;
    border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px; font-weight: 700;
    background: rgba(200, 158, 61, 0.12);
    border: 1px solid rgba(200, 158, 61, 0.45);
    color: #8a5a14;
  }
  .sl-void[data-void="dark"] .sl-step-num {
    background: rgba(227, 197, 124, 0.14);
    border-color: rgba(227, 197, 124, 0.40);
    color: #e3c57c;
  }
  .sl-api-card .sl-step-list strong {
    font-weight: 600;
  }

  /* Inline code — same token in prose and pre blocks. */
  .sl-api-card code, .sl-endpoint code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85em;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(120,120,120,0.10);
    border: 1px solid rgba(120,120,120,0.16);
  }
  .sl-void[data-void="light"] .sl-api-card code,
  .sl-void[data-void="light"] .sl-endpoint code { color: #8a5a14; }
  .sl-void[data-void="dark"]  .sl-api-card code,
  .sl-void[data-void="dark"]  .sl-endpoint code { color: #e3c57c; }

  /* Preformatted code block — graphite surface with copy button. */
  .sl-code-block {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(120,120,120,0.18);
    background: #12161d;
  }
  .sl-code-block pre {
    margin: 0;
    padding: 16px 18px;
    overflow-x: auto;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12.5px;
    line-height: 1.55;
    color: #e4e9f2;
    background: transparent;
  }
  .sl-code-block pre code {
    background: transparent;
    border: 0;
    padding: 0;
    color: inherit;
    font-size: inherit;
  }
  .sl-copy-btn {
    position: absolute; top: 10px; right: 10px;
    padding: 5px 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.08em;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    color: #e4e9f2;
    border-radius: 6px;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease;
  }
  .sl-copy-btn:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.22);
  }
  .sl-copy-btn.is-copied {
    background: rgba(82,160,106,0.20);
    border-color: rgba(82,160,106,0.50);
    color: #84d89e;
  }

  /* Filter row. */
  .sl-filter-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
  .sl-filter-row label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.09em;
    opacity: 0.78;
  }
  .sl-api-input, .sl-api-select {
    width: 100%;
    padding: 11px 14px;
    border-radius: 10px;
    border: 1px solid rgba(120,120,120,0.24);
    background: rgba(255,255,255,0.04);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: inherit;
    outline: none;
    transition: border-color 150ms ease, box-shadow 150ms ease;
  }
  .sl-void[data-void="light"] .sl-api-input,
  .sl-void[data-void="light"] .sl-api-select {
    background: rgba(255,253,249,0.80);
  }
  .sl-api-input:focus, .sl-api-select:focus {
    border-color: rgba(200,158,61,0.55);
    box-shadow: 0 0 0 3px rgba(200,158,61,0.14);
  }

  /* Endpoints group heading. */
  .sl-endpoints-group {
    margin-top: 44px;
  }
  .sl-endpoints-group__head {
    font-family: 'Sora', sans-serif;
    font-size: 1rem; font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(120,120,120,0.14);
  }
  .sl-void[data-void="light"] .sl-endpoints-group__head { color: #8a5a14; }
  .sl-void[data-void="dark"]  .sl-endpoints-group__head { color: #e3c57c; }

  /* Individual endpoint card. */
  .sl-endpoint {
    margin-bottom: 10px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(53,40,24,0.10);
    background: linear-gradient(180deg, #fffdf9 0%, #faf6ef 100%);
    transition: border-color 200ms ease, box-shadow 200ms ease;
  }
  .sl-void[data-void="dark"] .sl-endpoint {
    border-color: rgba(180,186,198,0.18);
    background: linear-gradient(180deg, rgba(34,38,46,0.42) 0%, rgba(22,26,34,0.32) 100%);
  }
  .sl-endpoint__header {
    padding: 14px 18px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    background: transparent;
    border: 0;
    width: 100%;
    text-align: left;
    font: inherit; color: inherit;
  }
  .sl-endpoint__header:hover {
    background: rgba(200,158,61,0.06);
  }
  .sl-endpoint__url {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    padding: 6px 10px;
    border-radius: 6px;
    background: rgba(120,120,120,0.10);
    border: 1px solid rgba(120,120,120,0.18);
    word-break: break-all;
  }
  .sl-void[data-void="light"] .sl-endpoint__url { color: #1f1811; }
  .sl-void[data-void="dark"]  .sl-endpoint__url { color: #f5efe3; }
  .sl-endpoint__chev {
    flex: 0 0 auto;
    width: 18px; height: 18px;
    opacity: 0.50;
    transition: transform 200ms ease;
  }
  .sl-endpoint.is-open .sl-endpoint__chev { transform: rotate(180deg); }
  .sl-endpoint__body {
    display: none;
    padding: 18px 22px 22px;
    border-top: 1px solid rgba(120,120,120,0.14);
    flex-direction: column; gap: 18px;
  }
  .sl-endpoint.is-open .sl-endpoint__body { display: flex; }
  .sl-endpoint__meta {
    display: grid; grid-template-columns: 100px 1fr; gap: 4px 16px;
    font-size: 14px; line-height: 1.55;
  }
  .sl-endpoint__meta-key {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    opacity: 0.55;
    padding-top: 3px;
  }

  /* Language tabs. */
  .sl-api-tabs {
    display: flex; gap: 4px;
    border-bottom: 1px solid rgba(120,120,120,0.14);
    margin-bottom: 4px;
  }
  .sl-api-tab {
    padding: 8px 14px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.09em;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    color: inherit;
    opacity: 0.55;
    transition: opacity 150ms ease, border-color 150ms ease;
  }
  .sl-api-tab:hover { opacity: 0.80; }
  .sl-api-tab.is-active {
    opacity: 1;
    border-bottom-color: #c89e3d;
  }
  .sl-void[data-void="dark"] .sl-api-tab.is-active { border-bottom-color: #e3c57c; }
  .sl-api-tab-panel { display: none; }
  .sl-api-tab-panel.is-active { display: block; }

  /* Empty-state when filter matches nothing. */
  .sl-api-empty {
    padding: 24px;
    border-radius: 14px;
    text-align: center;
    font-size: 14px;
    opacity: 0.60;
    border: 1px dashed rgba(120,120,120,0.24);
    background: rgba(120,120,120,0.04);
    display: none;
  }
  .sl-api-empty.is-visible { display: block; }

/* Source: longtermtrends/ltt/pages/community/landing/html/landing-page.html */
  /* ====================================================================
     Community landing — page-specific components on top of sl-system.css.
     Legacy styles.css removed (contained .hover-lift with translateY
     which contradicts the locked no-lift hover rule).
  ==================================================================== */

  /* Stat row (animated counters) */
  .sl-stat-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
  .sl-stat {
    display: flex; flex-direction: column; gap: 4px;
    padding: 14px 18px; border-radius: 14px;
    backdrop-filter: blur(22px) saturate(115%);
    -webkit-backdrop-filter: blur(22px) saturate(115%);
    min-width: 130px;
  }
  .sl-void[data-void="light"] .sl-stat {
    border: 1px solid rgba(80,86,98,0.22);
    background: linear-gradient(180deg, rgba(238,236,232,0.40) 0%, rgba(224,222,218,0.28) 100%);
  }
  .sl-void[data-void="dark"] .sl-stat {
    border: 1px solid rgba(180,186,198,0.20);
    background: linear-gradient(180deg, rgba(34,38,46,0.48) 0%, rgba(22,26,34,0.38) 100%);
  }
  .sl-stat__value {
    font-family: 'Sora', sans-serif; font-size: 1.5rem; font-weight: 700;
    letter-spacing: -0.03em; line-height: 1;
  }
  .sl-void[data-void="light"] .sl-stat__value { color: #1f1811; }
  .sl-void[data-void="dark"]  .sl-stat__value { color: #f5efe3; }
  .sl-stat__label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.08em;
    opacity: 0.55;
  }

  /* Centered hero variant — applied only when the right-rail auth card
     is hidden (signed-in premium users). Mirrors the centered rhythm of
     the "Philosophy" section below so the hero doesn't feel orphaned
     on the left. See profile_page_audit.md §6.3. */
  .sl-hero-centered { text-align: center; }
  .sl-hero-centered .sl-eyebrow { display: inline-block; }
  .sl-hero-centered h1 { max-width: 20ch; margin-left: auto; margin-right: auto; }
  .sl-hero-centered .sl-lead { max-width: 60ch; margin-left: auto; margin-right: auto; }
  .sl-hero-centered .sl-stat-row { justify-content: center; }

  /* Signup / auth card on the hero right side */
  .sl-auth-card {
    padding: 32px;
    border-radius: 22px;
    display: flex; flex-direction: column; gap: 20px;
  }
  .sl-auth-card h3 {
    font-family: 'Sora', sans-serif; font-size: 1.25rem; font-weight: 600;
    letter-spacing: -0.03em; margin: 0;
  }
  /* .sl-auth-card__body uses flex column layout with a 16 px gap
     between fields. We set this in CSS (not inline style) because
     Alpine's x-show directive strips inline `display:flex` when it
     toggles the element — Alpine resets display to '' (empty), which
     falls back to the user-agent default (block for <div>), and the
     flex context — including `gap` — silently disappears. */
  .sl-auth-card__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .sl-auth-card__body > button[type="button"] {
    margin-top: 12px;
  }
  .sl-auth-card label {
    display: block; margin: 0 0 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.08em;
    opacity: 0.60;
  }
  .sl-auth-card input[type="text"],
  .sl-auth-card input[type="email"] {
    width: 100%; box-sizing: border-box;
    height: 44px; padding: 0 14px; border-radius: 10px;
    font-family: 'Inter', sans-serif; font-size: 15px;
    outline: none;
    transition: border-color 140ms ease, box-shadow 140ms ease;
  }
  .sl-void[data-void="light"] .sl-auth-card input {
    background: rgba(255,254,252,0.60);
    border: 1px solid rgba(53,40,24,0.14);
    color: #1f1811;
  }
  .sl-void[data-void="light"] .sl-auth-card input:focus {
    border-color: rgba(201,162,39,0.50);
    box-shadow: 0 0 0 4px rgba(201,162,39,0.10);
  }
  .sl-void[data-void="dark"] .sl-auth-card input {
    background: rgba(10,15,24,0.55);
    border: 1px solid rgba(255,255,255,0.14);
    color: #f5efe3;
  }
  .sl-void[data-void="dark"] .sl-auth-card input:focus {
    border-color: rgba(141,181,255,0.50);
    box-shadow: 0 0 0 4px rgba(141,181,255,0.10);
  }
  .sl-auth-alert {
    font-size: 14px; padding: 10px 12px; border-radius: 10px;
  }
  .sl-auth-alert--ok { background: rgba(76,196,120,0.10); border: 1px solid rgba(76,196,120,0.40); color: #2f7a4e; }
  .sl-auth-alert--err { background: rgba(199,90,74,0.08); border: 1px solid rgba(199,90,74,0.40); color: #a4382a; }
  [data-theme="dark"] .sl-auth-alert--ok { color: #84e6aa; }
  [data-theme="dark"] .sl-auth-alert--err { color: #e88a7a; }

  /* Segment cards — "For The Wealth Builder / Preserver" */
  .sl-segment-card {
    display: flex; gap: 20px; padding: 28px;
    align-items: flex-start;
  }
  .sl-segment-card__icon {
    flex-shrink: 0;
    width: 48px; height: 48px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
  }
  .sl-void[data-void="light"] .sl-segment-card__icon {
    background: rgba(200,158,61,0.10);
    border: 1px solid rgba(200,158,61,0.28);
    color: #8a5a14;
  }
  .sl-void[data-void="dark"] .sl-segment-card__icon {
    background: rgba(227,197,124,0.10);
    border: 1px solid rgba(227,197,124,0.30);
    color: #e3c57c;
  }
  .sl-segment-card__icon svg { width: 24px; height: 24px; }
  .sl-segment-card h3 {
    font-family: 'Sora', sans-serif; font-size: 1.2rem; font-weight: 600;
    letter-spacing: -0.03em; margin: 0 0 8px;
  }
  .sl-segment-card p {
    font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.65;
    margin: 0;
  }
  .sl-void[data-void="light"] .sl-segment-card p { color: rgba(31, 24, 17, 0.75); }
  .sl-void[data-void="dark"] .sl-segment-card p { color: rgba(245, 239, 227, 0.75); }
  .sl-segment-card a { color: #2f4ea8; text-decoration: none; }
  [data-theme="dark"] .sl-segment-card a { color: #8fb2ff; }
  .sl-segment-card a:hover { text-decoration: underline; }

  /* Pricing plan grid (.sl-plan, .sl-toggle, .sl-plan--featured)
     lives in sl-system.css. Landing page uses defaults; no overrides. */

  /* Feature blocks (Weekly Macro Report, Macro Compass, etc.) */
  .sl-feature-row {
    display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center;
    padding: 32px;
  }
  @media (min-width: 900px) {
    .sl-feature-row { grid-template-columns: 1.05fr 1fr; }
    .sl-feature-row--reverse .sl-feature-row__text { order: 2; }
  }
  .sl-feature-row__text h3 {
    font-family: 'Sora', sans-serif; font-size: clamp(1.4rem, 2.2vw, 1.8rem);
    font-weight: 500; letter-spacing: -0.04em; margin: 0 0 12px;
  }
  .sl-feature-row__text p {
    font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.7;
    margin: 0 0 20px; opacity: 0.75; max-width: 54ch;
  }
  .sl-feature-row__media iframe,
  .sl-feature-row__media img {
    width: 100%; height: auto; border-radius: 14px; display: block;
  }
  /* Tone down external images/embeds in dark mode so they don't glare */
  .sl-void[data-void="dark"] .sl-feature-row__media iframe,
  .sl-void[data-void="dark"] .sl-feature-row__media img {
    filter: brightness(0.82) contrast(1.08) saturate(0.92);
  }
  .sl-feature-row__media .sl-iframe {
    position: relative; width: 100%; padding-bottom: 56.25%;
    border-radius: 14px; overflow: hidden;
  }
  .sl-feature-row__media .sl-iframe iframe {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;
  }

  /* Discord callout */
  .sl-discord-bullets {
    display: flex; flex-direction: column; gap: 10px;
    padding: 18px; border-radius: 14px;
    backdrop-filter: blur(22px) saturate(115%);
  }
  .sl-void[data-void="light"] .sl-discord-bullets {
    border: 1px solid rgba(80,86,98,0.20);
    background: rgba(238,236,232,0.30);
  }
  .sl-void[data-void="dark"] .sl-discord-bullets {
    border: 1px solid rgba(180,186,198,0.20);
    background: rgba(34,38,46,0.40);
  }
  .sl-discord-bullets li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 14px; line-height: 1.55;
    list-style: none; padding: 0;
  }
  .sl-discord-bullets ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
  .sl-discord-bullets h4 {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.08em;
    opacity: 0.55; margin: 0 0 10px;
  }
  .sl-discord-check {
    display: inline-flex; flex-shrink: 0;
    width: 16px; height: 16px; border-radius: 999px;
    align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
  }
  .sl-void[data-void="light"] .sl-discord-check { background: rgba(78,116,217,0.14); color: #2f4ea8; }
  .sl-void[data-void="dark"]  .sl-discord-check { background: rgba(143,178,255,0.14); color: #8fb2ff; }

/* Source: longtermtrends/ltt/pages/community/profile/html/profile.html */
  body { margin: 0; }

  /* =====================================================================
     Profile — page-specific components on top of sl-system.css primitives.
  ===================================================================== */

  .sl-profile-grid {
    display: flex; flex-direction: column; gap: 24px;
  }

  .sl-profile-card {
    padding: 24px 26px;
    display: flex; flex-direction: column; gap: 18px;
  }
  .sl-profile-card__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
  }
  .sl-profile-card h2 {
    font-family: 'Sora', sans-serif; font-size: 1.15rem; font-weight: 600;
    letter-spacing: -0.02em; margin: 0;
  }
  .sl-profile-card h3 {
    font-family: 'Sora', sans-serif; font-size: 1rem; font-weight: 600;
    letter-spacing: -0.02em; margin: 0;
  }

  .sl-kv {
    display: grid; grid-template-columns: 140px 1fr; gap: 4px 18px;
    font-size: 14px; line-height: 1.55;
  }
  .sl-kv__key {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.08em;
    opacity: 0.55; padding-top: 3px;
  }
  .sl-kv__val {
    font-family: 'Inter', sans-serif; font-size: 15px;
  }
  .sl-void[data-void="light"] .sl-kv__val { color: #1f1811; }
  .sl-void[data-void="dark"]  .sl-kv__val { color: #f5efe3; }

  .sl-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.09em;
    padding: 5px 10px; border-radius: 999px;
  }
  /* Tier badge — flat gold pill, sibling to .sl-badge--ok / --danger.
     NOT a CTA; the prior cobalt-gradient version looked like the
     primary button and competed with real CTAs in the same row. */
  .sl-badge--gold {
    background: rgba(200, 158, 61, 0.12);
    border: 1px solid rgba(200, 158, 61, 0.45);
    color: #8a5a14;
  }
  .sl-void[data-void="dark"] .sl-badge--gold {
    background: rgba(227, 197, 124, 0.14);
    border: 1px solid rgba(227, 197, 124, 0.40);
    color: #e3c57c;
  }
  .sl-badge--muted {
    background: rgba(120,120,120,0.12);
    border: 1px solid rgba(120,120,120,0.26);
  }
  .sl-void[data-void="light"] .sl-badge--muted { color: #534838; }
  .sl-void[data-void="dark"]  .sl-badge--muted { color: #aca193; }
  .sl-badge--danger {
    background: rgba(199,90,74,0.10);
    border: 1px solid rgba(199,90,74,0.38);
    color: #c75a4a;
  }
  [data-theme="dark"] .sl-badge--danger { color: #e88a7a; }
  .sl-badge--ok {
    background: rgba(82,160,106,0.10);
    border: 1px solid rgba(82,160,106,0.36);
    color: #3a7c50;
  }
  [data-theme="dark"] .sl-badge--ok { color: #84d89e; }

  .sl-empty {
    padding: 24px; border-radius: 14px;
    text-align: center; font-size: 14px; opacity: 0.60;
  }
  .sl-void[data-void="light"] .sl-empty {
    background: rgba(238,236,232,0.45);
    border: 1px dashed rgba(53,40,24,0.16);
  }
  .sl-void[data-void="dark"] .sl-empty {
    background: rgba(22,26,34,0.45);
    border: 1px dashed rgba(255,255,255,0.10);
  }

  /* Pricing plan grid (.sl-plan, .sl-toggle, .sl-plan--featured)
     lives in sl-system.css. Matches the landing-page pricing table
     verbatim — no profile-specific overrides. */

  /* Manage subscription — muted tertiary text link at the bottom of the
     featured plan card. Same visual weight as `.retention-secondary`
     ("No thanks, continue cancelling" in the retention modal):
     neutral warm-grey, no cobalt, no underline — just opacity hover.
     Opens the retention modal. See profile_page_audit.md §6.5. */
  .sl-plan__manage-link {
    font-family: 'Inter', sans-serif;
    font-size: 14px; font-weight: 500;
    color: #534838; opacity: 0.75;
    text-decoration: none; cursor: pointer;
    transition: opacity 130ms ease;
  }
  .sl-plan__manage-link:hover { opacity: 1; }
  [data-theme="dark"] .sl-plan__manage-link { color: #aca193; }

  /* Retention modal — Step 1 feature-loss list + secondary button +
     destructive submit variant. Modal chrome (.modal-overlay,
     .modal-container, .submit-button, .close-button, .title-container,
     .spinner) is inherited from shared/auth/auth-modal.html. */
  .retention-loss-list {
    display: flex; flex-direction: column; gap: 10px;
    margin-bottom: 4px;
  }
  .retention-loss-item {
    display: flex; align-items: center; gap: 12px;
    font-size: 14px; font-weight: 500;
    padding: 10px 12px; border-radius: 10px;
    background: rgba(53,40,24,0.03);
    border: 1px solid rgba(53,40,24,0.06);
  }
  [data-theme="dark"] .retention-loss-item {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.06);
  }
  .retention-icon {
    flex-shrink: 0; width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: rgba(200,158,61,0.12);
    color: #8a5a14;
  }
  [data-theme="dark"] .retention-icon {
    background: rgba(227,197,124,0.12);
    color: #e3c57c;
  }
  .retention-secondary {
    width: 100%;
    background: transparent; border: none; cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 14px; font-weight: 500;
    padding: 10px;
    color: #534838; opacity: 0.75;
    transition: opacity 130ms ease;
  }
  .retention-secondary:hover { opacity: 1; }
  [data-theme="dark"] .retention-secondary { color: #aca193; }
  .submit-button.retention-danger {
    background: linear-gradient(135deg, #b24a3c 0%, #c75a4a 56%, #e17d6f 100%);
    box-shadow: 0 8px 20px rgba(166,52,36,0.24), inset 0 1px 0 rgba(255,255,255,0.18);
  }
  .submit-button.retention-danger:hover {
    box-shadow: 0 12px 28px rgba(166,52,36,0.34), inset 0 1px 0 rgba(255,255,255,0.24);
  }
  [data-theme="dark"] .submit-button.retention-danger {
    background: linear-gradient(135deg, #93382b 0%, #b24a3c 56%, #d6685a 100%);
  }

/* Source: longtermtrends/ltt/pages/company/html/about.html */
  /* Give each section heading breathing room from the paragraph above.
     `.sl-section__head` ships with margin-bottom only — fine on pages
     with a single section, but stacked H2s in a long-form page need a
     top margin too. First H2 stays flush to the top of the prose block. */
  .sl-prose h2.sl-section__head { margin-top: 48px; }
  .sl-prose h2.sl-section__head:first-child { margin-top: 0; }

/* Source: longtermtrends/ltt/pages/company/html/privacy-policy.html */
  .sl-prose h2.sl-section__head { margin-top: 48px; }
  .sl-prose h2.sl-section__head:first-child { margin-top: 0; }

/* Source: longtermtrends/ltt/pages/company/html/terms-of-use.html */
  .sl-prose h2.sl-section__head { margin-top: 48px; }
  .sl-prose h2.sl-section__head:first-child { margin-top: 0; }

/* Source: longtermtrends/ltt/pages/shared/auth/auth-modal.html */
  .modal-overlay {
    position: fixed;
    z-index: 1050;
    inset: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 120px;
    background: rgba(252,248,240,0.60);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  [data-theme="dark"] .modal-overlay {
    background: rgba(8,17,30,0.70);
  }

  .modal-container {
    background: #fffefc;
    border: 1px solid rgba(53,40,24,0.10);
    border-radius: 18px;
    padding: 36px 32px;
    margin: 0 16px;
    width: 440px;
    max-width: 90vw;
    box-shadow: 0 24px 72px rgba(75,54,24,0.14);
    position: relative;
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    color: #1f1811;
  }

  [data-theme="dark"] .modal-container {
    background: #1a1e25;
    border-color: rgba(255,255,255,0.10);
    box-shadow: 0 24px 72px rgba(0,0,0,0.50);
    color: #f5efe3;
  }

  .close-button-wrapper {
    position: absolute;
    top: 16px;
    right: 16px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .close-button {
    height: 28px;
    width: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #534838;
    padding: 8px;
    margin: -8px;
    border-radius: 8px;
    transition: background 130ms ease;
  }

  .close-button:hover {
    background: rgba(53,40,24,0.06);
  }

  [data-theme="dark"] .close-button {
    color: #aca193;
  }

  [data-theme="dark"] .close-button:hover {
    background: rgba(255,255,255,0.08);
  }

  .close-icon {
    height: 20px;
    width: 20px;
  }

  .form-container {
    padding: 12px 0 0 0;
  }

  .title-container {
    display: flex;
    justify-content: center;
    font-family: 'Sora', sans-serif;
    font-weight: 500;
    font-size: 1.2rem;
    letter-spacing: -0.04em;
    line-height: 1.2;
    color: inherit;
    margin-bottom: 28px;
  }

  .form-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
  }

  .field-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .field-label {
    font-weight: 600;
    font-size: 12px;
    color: #534838;
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  [data-theme="dark"] .field-label {
    color: #aca193;
  }

  .field-input {
    width: 100%;
    outline: none;
    height: 44px;
    padding: 10px 14px;
    border: 1px solid rgba(53,40,24,0.12);
    border-radius: 12px;
    font-size: 15px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    line-height: 1.25;
    background: rgba(53,40,24,0.03);
    color: inherit;
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
  }

  .field-input:focus {
    outline: none;
    border-color: rgba(201,162,39,0.50);
    background: rgba(255,255,255,0.80);
    box-shadow: 0 0 0 3px rgba(201,162,39,0.10);
  }

  [data-theme="dark"] .field-input {
    border-color: rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.04);
  }

  [data-theme="dark"] .field-input:focus {
    border-color: rgba(141,181,255,0.50);
    background: rgba(255,255,255,0.06);
    box-shadow: 0 0 0 3px rgba(141,181,255,0.10);
  }

  .field-input::placeholder {
    color: #534838;
    opacity: 0.5;
  }

  [data-theme="dark"] .field-input::placeholder {
    color: #aca193;
  }

  .error-message {
    font-size: 13px;
    color: #c62828;
    margin-top: 4px;
  }

  [data-theme="dark"] .error-message {
    color: #ef5350;
  }

  /* Submit uses the system blue CTA gradient (SG76 dark-to-light),
     same family as the header Sign-up button and the footer Donate. */
  .submit-button {
    margin-bottom: 16px;
    margin-top: 4px;
    height: 44px;
    display: flex;
    width: 100%;
    background: linear-gradient(135deg, #2f5fc8 0%, #4f86ec 56%, #8dcbff 100%);
    color: #ffffff;
    border-radius: 999px;
    justify-content: center;
    align-items: center;
    border: none;
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    box-shadow: 0 8px 20px rgba(36,78,166,0.24), inset 0 1px 0 rgba(255,255,255,0.18);
    transition: box-shadow 130ms ease;
  }

  .submit-button:hover {
    box-shadow: 0 12px 28px rgba(36,78,166,0.34), inset 0 1px 0 rgba(255,255,255,0.24);
  }

  [data-theme="dark"] .submit-button {
    background: linear-gradient(135deg, #2c4f9e 0%, #487de0 56%, #78c6ff 100%);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(36,78,166,0.28), inset 0 1px 0 rgba(255,255,255,0.16);
  }

  .submit-button.disabled {
    cursor: not-allowed;
    opacity: 0.55;
  }

  .submit-button.disabled:hover {
    box-shadow: 0 6px 16px rgba(36,78,166,0.20);
  }

  .submit-button.enabled {
    cursor: pointer;
    opacity: 1;
  }

  .spinner {
    animation: spin 1s linear infinite;
    height: 20px;
    width: 20px;
    margin-right: 12px;
  }

  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  .spinner-circle {
    opacity: 0.25;
  }

  .spinner-path {
    opacity: 0.75;
  }

  .toggle-container {
    display: flex;
    width: 100%;
    justify-content: center;
    padding: 0;
    gap: 6px;
    font-size: 14px;
    color: #534838;
  }

  [data-theme="dark"] .toggle-container {
    color: #aca193;
  }

  /* Matches the canonical `.sl-prose a` link style — cobalt,
     weight 400, underline on hover. No bold, no other weight. */
  .toggle-link {
    color: #2f4ea8;
    cursor: pointer;
    font-weight: 400;
    text-decoration: none;
  }

  .toggle-link:hover {
    text-decoration: underline;
  }

  [data-theme="dark"] .toggle-link {
    color: #8fb2ff;
  }

  .success-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin: 0;
    padding: 12px 0 0 0;
  }

  .success-title {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    font-family: 'Sora', sans-serif;
    font-weight: 500;
    font-size: 1.2rem;
    letter-spacing: -0.04em;
    line-height: 1.2;
    width: 100%;
    color: inherit;
  }

  .success-icon {
    width: 28px;
    height: 28px;
  }

  .success-message {
    font-size: 15px;
    line-height: 1.7;
    color: #534838;
    text-align: center;
    width: 100%;
  }

  [data-theme="dark"] .success-message {
    color: #aca193;
  }

  .text-blue-700 {
    color: #2f4ea8;
  }

  [data-theme="dark"] .text-blue-700 {
    color: #8fb2ff;
  }

  .underline {
    text-decoration: underline;
  }

  [x-cloak] {
    display: none !important;
  }

/* Source: longtermtrends/ltt/pages/shared/auth/prefix/profile-dropdown.html */
  [x-cloak] {
    display: none;
  }

/* Source: longtermtrends/ltt/pages/shared/auth/profile-dropdown.html */
  /* Bootstrap Killer for Profile Dropdown */
  .profile-dropdown-bootstrap-killer {
    /* Force complete style reset */
    all: unset !important;
    display: block !important;
    position: relative !important;
    
    /* Absolutely force these values */
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
    
    /* Prevent any Bootstrap inheritance */
    font-family: Arial, sans-serif !important;
    font-size: 16px !important;
    line-height: 1 !important;
    font-weight: normal !important;
    color: inherit !important;
    text-align: left !important;
    vertical-align: baseline !important;
    
    /* Force container behavior */
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }
  
  /* Targeted reset for specific profile dropdown elements */
  .profile-dropdown-bootstrap-killer .profile-dropdown-container,
  .profile-dropdown-bootstrap-killer .profile-dropdown-actions,
  .profile-dropdown-bootstrap-killer .profile-dropdown-relative,
  .profile-dropdown-bootstrap-killer .profile-button,
  .profile-dropdown-bootstrap-killer .signup-button,
  .profile-dropdown-bootstrap-killer .login-button {
    /* Override Bootstrap's problematic properties */
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    box-sizing: border-box !important;
    
    /* Typography resets */
    font-family: Arial, sans-serif !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    text-decoration: none !important;
    text-align: inherit !important;
    vertical-align: baseline !important;
    
    /* Layout resets */
    position: static !important;
    float: none !important;
    clear: none !important;
    overflow: visible !important;
    
    /* Flexbox resets */
    flex: none !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    align-content: stretch !important;
    
    /* Sizing resets */
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }

  [x-cloak] {
    display: none !important;
  }
  
  .profile-dropdown-bootstrap-killer .profile-dropdown-container {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
  }
  
  .profile-dropdown-bootstrap-killer .profile-dropdown-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 16px !important; /* Convert 1rem to exact pixels */
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
  }
  
  @media (min-width: 640px) {
    .profile-dropdown-bootstrap-killer .profile-dropdown-actions {
      gap: 32px !important; /* Convert 2rem to exact pixels */
    }
  }
  
  .profile-dropdown-bootstrap-killer .profile-dropdown-relative {
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
  }
  
  .profile-dropdown-bootstrap-killer .profile-button {
    border: none !important;
    background: white !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    color: #111827 !important;
    border-radius: 4px !important; /* Convert 0.25rem to exact pixels */
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: Arial, sans-serif !important;
    font-size: 16px !important;
    line-height: 1 !important;
    text-decoration: none !important;
  }
  
  /* Unified profile icon — inline SVG, currentColor, matches new ltt header design */
  .profile-dropdown-bootstrap-killer .profile-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: rgba(255,255,255,0.78) !important;
    background: transparent !important;
    text-decoration: none !important;
    transition: background 130ms ease, color 130ms ease !important;
  }
  .profile-dropdown-bootstrap-killer .profile-icon:hover {
    color: #ffffff !important;
    background: rgba(255,255,255,0.08) !important;
  }
  .profile-dropdown-bootstrap-killer .profile-icon--pro {
    color: #c89e3d !important;
  }
  .profile-dropdown-bootstrap-killer .profile-icon--pro:hover {
    color: #e7b44a !important;
  }
  .profile-dropdown-bootstrap-killer .profile-icon svg {
    width: 22px !important;
    height: 22px !important;
    display: block !important;
  }
  
  .profile-dropdown-bootstrap-killer .signup-button {
    cursor: pointer !important;
    padding: 8px 20px !important; /* Convert 0.5rem 1.25rem to exact pixels */
    background-color: #2563eb !important;
    color: white !important;
    border-radius: 8px !important; /* Convert 0.5rem to exact pixels */
    border: none !important;
    margin: 0 !important;
    font-family: Arial, sans-serif !important;
    font-size: 16px !important;
    line-height: 1 !important;
    font-weight: normal !important;
    text-decoration: none !important;
    display: inline-block !important;
    text-align: center !important;
    vertical-align: baseline !important;
  }
  
  @media (min-width: 1024px) {
    .profile-dropdown-bootstrap-killer .signup-button {
      padding: 8px 40px !important; /* Convert 0.5rem 2.5rem to exact pixels */
    }
  }
  
  .profile-dropdown-bootstrap-killer .signup-button:hover {
    color: white !important;
    background-color: #2563eb !important;
    text-decoration: none !important;
  }
  
  .profile-dropdown-bootstrap-killer .login-button {
    color: #2563eb !important;
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: Arial, sans-serif !important;
    font-size: 16px !important;
    line-height: 1 !important;
    font-weight: normal !important;
    text-decoration: none !important;
    display: inline-block !important;
    text-align: center !important;
    vertical-align: baseline !important;
    cursor: pointer !important;
  }
  
  @media (min-width: 1024px) {
    .profile-dropdown-bootstrap-killer .login-button {
      padding: 6px 40px !important; /* Convert 0.375rem 2.5rem to exact pixels */
    }
  }
  
  .profile-dropdown-bootstrap-killer .login-button:hover {
    color: #2563eb !important;
    background: transparent !important;
    text-decoration: none !important;
  }

  /* Mobile-specific styles */
  @media (max-width: 768px) {
    /* Hide login button on mobile, keep only signup button */
    .profile-dropdown-bootstrap-killer .login-button {
      display: none !important;
    }
    
    /* Ensure signup button is visible on mobile */
    .profile-dropdown-bootstrap-killer .signup-button {
      display: inline-block !important;
    }
    
    /* Adjust gap for mobile when only one button is visible */
    .profile-dropdown-bootstrap-killer .profile-dropdown-actions {
      gap: 0 !important;
    }
  }

/* Source: longtermtrends/ltt/pages/shared/components/banners/side-banner-macro-report.html */
  .macro-report-card-width {
    width: 400px;
    max-width: 100%;
    display: block;
    /* Right-align the banner to match Current Data section */
    margin-left: auto;
    margin-right: 0;
  }

  /* Mobile/Tablet: center the banner */
  @media (max-width: 991px) {
    .macro-report-card-width {
      width: 100% !important;
      max-width: 750px !important;
      margin-left: auto;
      margin-right: auto;
    }
  }

  /* Width adjustments for different screen sizes */
  @media (min-width: 992px) and (max-width: 1230px) {
    .macro-report-card-width {
      width: 260px !important;
    }
  }
  @media (min-width: 1231px) and (max-width: 1440px) {
    .macro-report-card-width {
      width: 330px !important;
    }
  }
  @media (min-width: 1500px) and (max-width: 1800px) {
    .macro-report-card-width {
      width: 430px !important;
    }
  }
  @media (min-width: 1873px) and (max-width: 2208px) {
    .macro-report-card-width {
      width: 425px !important;
    }
  }
  @media (min-width: 2009px) {
    .macro-report-card-width {
      width: 500px !important;
    }
  }

/* Source: longtermtrends/ltt/pages/shared/components/banners/support-work-banner.html */
    .support-button-container {
      display: flex;
    }
    
    @media (min-width: 2000px) {
      .support-col-content {
        grid-column: span 10 / span 10 !important;
      }
    }
    
    @media (min-width: 1400px) and (max-width: 1999px) {
      .support-col-content {
        grid-column: span 10 / span 10 !important;
      }
    }
    
    /* Keep content at 9 columns up to just before 2xl (1536px) */
    @media (min-width: 1027px) and (max-width: 1535px) {
      .support-col-content {
        grid-column: span 9 / span 9 !important;
      }
    }
    
    @media (max-width: 1600px) {
      .support-quote-text {
        font-size: 22px !important;
        line-height: 24px !important;
      }
    }
    
    @media (max-width: 1300px) {
      .support-quote-text {
        font-size: 20px !important;
        line-height: 24px !important;
      }
    }
    
    @media (max-width: 1128px) {
      .support-quote-text {
        font-size: 24px !important;
        line-height: 28px !important;
      }
    }
    
    @media (max-width: 768px) {
      /* No font-size override for author text */
    }
    .support-author-text {
      font-size: 16px !important;
      line-height: 22px !important;
      font-family: Arial !important;
      font-style: italic !important;
      font-weight: 300 !important;
      color: #fff !important;
      margin-top: 8px;
    }
    
    @media (max-width: 652px) {
      .support-button-container {
        display: none !important;
      }
      .support-work-grid {
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
      }
      .support-col-content {
        grid-column: span 12 / span 12 !important;
        flex-direction: row !important;
        gap: 0.5rem !important;
      }
      .support-col-content .tw-relative {
        width: 160px !important;
        min-width: 160px !important;
        max-width: 160px !important;
      }
      .support-col-content .tw-flex-col {
        flex: 1 1 0% !important;
        min-width: 0 !important;
        max-width: none !important;
      }
      .support-quote-text {
        font-size: 16px !important;
        line-height: 22px !important;
        font-family: Arial !important;
        font-weight: 400 !important;
      }
    }
    
    @media (max-width: 450px) {
      .support-work-grid {
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
      }
      .support-col-content {
        flex-direction: row !important;
        gap: 0.5rem !important;
      }
      .support-col-content .tw-relative {
        width: 160px !important;
        min-width: 160px !important;
        max-width: 160px !important;
      }
      .support-col-content .tw-flex-col {
        flex: 1 1 0% !important;
        min-width: 0 !important;
        max-width: none !important;
      }
      .support-quote-text {
        font-size: 15px !important;
        line-height: 20px !important;
        font-family: Arial !important;
        font-weight: 400 !important;
      }
    }
    @media (max-width: 400px) {
      .support-author-text {
        display: none !important;
      }
    }
    
    /* New combined column for image + quote */
    @media (min-width: 2000px) {
      .support-col-content {
        grid-column: span 10 / span 10 !important;
      }
    }
    
    @media (min-width: 1400px) and (max-width: 1999px) {
      .support-col-content {
        grid-column: span 10 / span 10 !important;
      }
    }
    
    /* Keep content at 9 columns up to just before 2xl (1536px) */
    @media (min-width: 1027px) and (max-width: 1535px) {
      .support-col-content {
        grid-column: span 9 / span 9 !important;
      }
    }
    
    @media (max-width: 450px) {
      .support-col-content {
        grid-column: span 12 / span 12 !important;
      }
    }
    
    /* Reduce glow effects on mobile screens */
    @media (max-width: 768px) {
      .glow-left {
        opacity: 0.15 !important;
        width: 400px !important;
        height: 400px !important;
        filter: blur(60px) !important;
        left: -200px !important;
        top: 30px !important;
      }
      .glow-right {
        opacity: 0.08 !important;
        width: 400px !important;
        height: 400px !important;
        filter: blur(60px) !important;
        right: -250px !important;
        top: -250px !important;
      }
    }
    
    @media (max-width: 450px) {
      .glow-left {
        opacity: 0.08 !important;
        width: 250px !important;
        height: 250px !important;
        filter: blur(40px) !important;
        left: -125px !important;
        top: 20px !important;
      }
      .glow-right {
        opacity: 0.05 !important;
        width: 250px !important;
        height: 250px !important;
        filter: blur(40px) !important;
        right: -175px !important;
        top: -175px !important;
      }
    }

/* Source: longtermtrends/ltt/pages/shared/components/errors/404.html */
  .sl-prose h2.sl-section__head { margin-top: 48px; }
  .sl-prose h2.sl-section__head:first-child { margin-top: 0; }

/* Source: longtermtrends/ltt/pages/shared/components/layout/charts-dropdown.html */
  /* Bootstrap Killer for Charts Dropdown */
  .charts-dropdown-bootstrap-killer {
    /* Force complete style reset */
    all: unset !important;
    display: block !important;
    position: relative !important;
  
    /* Absolutely force these values */
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
  
    /* Prevent any Bootstrap inheritance */
    font-family: Arial, sans-serif !important;
    font-size: 16px !important;
    line-height: 1 !important;
    font-weight: normal !important;
    color: inherit !important;
    text-align: left !important;
    vertical-align: baseline !important;
  
    /* Force container behavior */
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }
  
  /* Nuclear reset for ALL children */
  .charts-dropdown-bootstrap-killer,
  .charts-dropdown-bootstrap-killer .charts-dropdown-container,
  .charts-dropdown-bootstrap-killer .charts-dropdown-trigger,
  .charts-dropdown-bootstrap-killer .charts-dropdown-menu,
  .charts-dropdown-bootstrap-killer .charts-dropdown-layout,
  .charts-dropdown-bootstrap-killer .charts-dropdown-categories,
  .charts-dropdown-bootstrap-killer .charts-dropdown-links,
  .charts-dropdown-bootstrap-killer .charts-dropdown-category-item,
  .charts-dropdown-bootstrap-killer .charts-dropdown-item {
    /* Override absolutely everything Bootstrap might set */
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
  
    /* Typography resets */
    font-family: Arial, sans-serif !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
    text-decoration: none !important;
    text-align: inherit !important;
    vertical-align: baseline !important;
  
    /* Layout resets - DON'T force display for category content divs */
    position: static !important;
    float: none !important;
    clear: none !important;
    overflow: visible !important;
  
    /* Flexbox and grid resets */
    flex: none !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    align-content: stretch !important;
  
    /* Sizing resets */
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }

  /* Force display block only for structural elements, NOT content divs with x-show */
  .charts-dropdown-bootstrap-killer,
  .charts-dropdown-bootstrap-killer .charts-dropdown-container,
  .charts-dropdown-bootstrap-killer .charts-dropdown-trigger,
  .charts-dropdown-bootstrap-killer .charts-dropdown-menu,
  .charts-dropdown-bootstrap-killer .charts-dropdown-layout,
  .charts-dropdown-bootstrap-killer .charts-dropdown-categories,
  .charts-dropdown-bootstrap-killer .charts-dropdown-links,
  .charts-dropdown-bootstrap-killer .charts-dropdown-category-item,
  .charts-dropdown-bootstrap-killer .charts-dropdown-item {
    display: block !important;
  }
  
  /* Now apply our exact styles with extreme specificity */
  .charts-dropdown-bootstrap-killer .charts-dropdown-container {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
  }
  
  .charts-dropdown-bootstrap-killer .charts-dropdown-trigger {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    font-family: Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: normal !important;
    color: #222 !important;
    cursor: pointer !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    line-height: 1 !important;
    position: relative !important;
    transition: all 0.2s ease-in-out !important;
  }
  
  .charts-dropdown-bootstrap-killer .charts-dropdown-container:hover .charts-dropdown-trigger {
    background: #eef2ff !important;
    color: #1652F0 !important;
    text-decoration: none !important;
  }
  
  .charts-dropdown-bootstrap-killer .charts-dropdown-menu {
    position: absolute !important;
    top: calc(100% - 4px) !important;
    left: 0 !important;
    z-index: 1050 !important;
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
    padding: 16px !important;
    padding-top: 12px !important;
    margin: 0 !important;
    width: 680px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-8px) !important;
    transition: all 0.2s ease-in-out !important;
    display: block !important;
    pointer-events: none !important;
  }
  
  .charts-dropdown-bootstrap-killer .charts-dropdown-container:hover .charts-dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }

  .charts-dropdown-bootstrap-killer .charts-dropdown-layout {
    display: flex !important;
    gap: 16px !important;
  }

  .charts-dropdown-bootstrap-killer .charts-dropdown-categories {
    width: 200px !important;
    border-right: 1px solid #f3f4f6 !important;
    padding-right: 16px !important;
  }

  .charts-dropdown-bootstrap-killer .charts-dropdown-links {
    flex: 1 !important;
    padding-left: 16px !important;
  }

  .charts-dropdown-bootstrap-killer .charts-dropdown-all-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 24px !important;
    max-height: 400px !important;
    overflow-y: auto !important;
  }

  .charts-dropdown-bootstrap-killer .charts-dropdown-all-grid::-webkit-scrollbar {
    width: 6px !important;
  }

  .charts-dropdown-bootstrap-killer .charts-dropdown-all-grid::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
    border-radius: 3px !important;
  }

  .charts-dropdown-bootstrap-killer .charts-dropdown-all-grid::-webkit-scrollbar-thumb {
    background: #c1c1c1 !important;
    border-radius: 3px !important;
  }

  .charts-dropdown-bootstrap-killer .charts-dropdown-all-grid::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8 !important;
  }

  .charts-dropdown-bootstrap-killer .charts-dropdown-category-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-family: Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #374151 !important;
    transition: all 0.15s ease-in-out !important;
    text-decoration: none !important;
  }

  .charts-dropdown-bootstrap-killer .charts-dropdown-category-item:hover,
  .charts-dropdown-bootstrap-killer .charts-dropdown-category-item.active {
    background-color: #eef2ff !important;
    color: #1652f0 !important;
  }

  .charts-dropdown-bootstrap-killer .charts-dropdown-category-item img {
    width: 16px !important;
    height: 16px !important;
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
  }

  .charts-dropdown-bootstrap-killer .charts-dropdown-category-item:hover img,
  .charts-dropdown-bootstrap-killer .charts-dropdown-category-item.active img {
    opacity: 1;
  }
  
  .charts-dropdown-bootstrap-killer .charts-dropdown-item {
    font-family: Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: normal !important;
    color: #374151 !important;
    text-decoration: none !important;
    display: block !important;
    padding: 8px 12px !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    line-height: 1.4 !important;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out !important;
  }
  
  .charts-dropdown-bootstrap-killer .charts-dropdown-item:hover {
    color: #1652f0 !important;
    background-color: #f4f6f8 !important;
    text-decoration: none !important;
  }
  
  .charts-dropdown-bootstrap-killer .charts-dropdown-charts-icon {
    height: 24px !important;
    width: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    display: block !important;
  }
  
  .charts-dropdown-bootstrap-killer .charts-dropdown-container:hover .charts-dropdown-charts-label {
    color: #1652F0 !important;
  }

  .charts-dropdown-bootstrap-killer .charts-dropdown-container:hover .charts-dropdown-charts-icon {
    filter: invert(34%) sepia(89%) saturate(4500%) hue-rotate(225deg) brightness(95%) contrast(97%);
  }

  /* Special styling for highlighted items */
  .charts-dropdown-bootstrap-killer .charts-dropdown-item.highlighted {
    color: #1652f0 !important;
  }

  /* Two-column layout for the "All" section */
  .charts-dropdown-bootstrap-killer .all-charts-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 4px 16px !important;
    max-height: 320px !important;
    overflow-y: auto !important;
  }

  /* Two-column layout for category sections when content is tall */
  .charts-dropdown-bootstrap-killer .category-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 4px 16px !important;
    max-height: 280px !important;
    overflow-y: auto !important;
  }

  /* Custom scrollbar for grid layouts */
  .charts-dropdown-bootstrap-killer .all-charts-grid::-webkit-scrollbar,
  .charts-dropdown-bootstrap-killer .category-grid::-webkit-scrollbar {
    width: 6px !important;
  }

  .charts-dropdown-bootstrap-killer .all-charts-grid::-webkit-scrollbar-track,
  .charts-dropdown-bootstrap-killer .category-grid::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
    border-radius: 3px !important;
  }

  .charts-dropdown-bootstrap-killer .all-charts-grid::-webkit-scrollbar-thumb,
  .charts-dropdown-bootstrap-killer .category-grid::-webkit-scrollbar-thumb {
    background: #c1c1c1 !important;
    border-radius: 3px !important;
  }

  .charts-dropdown-bootstrap-killer .all-charts-grid::-webkit-scrollbar-thumb:hover,
  .charts-dropdown-bootstrap-killer .category-grid::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1 !important;
  }

  /* CRITICAL: Allow Alpine.js to control visibility without forcing display */
  /* Firefox fix: Use position absolute to prevent overlapping when Alpine.js switches visibility */
  .charts-dropdown-bootstrap-killer .charts-dropdown-links {
    position: relative !important;
  }

  .charts-dropdown-bootstrap-killer .charts-dropdown-links > div[x-show] {
    /* Don't force display, let Alpine.js handle it naturally */
    position: relative !important;
    width: 100% !important;
  }

  /* CRITICAL Firefox fix: Ensure hidden elements are truly hidden */
  .charts-dropdown-bootstrap-killer .charts-dropdown-links > div[x-show][style*="display: none"],
  .charts-dropdown-bootstrap-killer .charts-dropdown-links > div[x-show][style*="display:none"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
  }

  /* Ensure visible elements are properly displayed */
  .charts-dropdown-bootstrap-killer .charts-dropdown-links > div[x-show]:not([style*="display: none"]):not([style*="display:none"]) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    left: auto !important;
  }

/* Source: longtermtrends/ltt/pages/shared/components/layout/footer.html */
  .ltt-footer {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  .ltt-footer a { color: inherit; text-decoration: none; }

  .ltt-footer-rule { height: 1px; border: 0; margin: 0; background: rgba(53,40,24,0.10); }
  [data-theme="dark"] .ltt-footer-rule { background: rgba(255,255,255,0.08); }

  /* Logo via mask-image so its fill exactly matches the brand
     name color in both themes (was filter-based, gave a cool grey
     that didn't match the warm H1 colors). The svg shape is the
     alpha mask, then background-color paints it. SVG aspect ratio
     is 512:409.24, so width = 28 * 512/409.24 ≈ 35px. */
  .ltt-footer-logo {
    display: block;
    width: 35px;
    height: 28px;
    -webkit-mask: var(--ltt-logo-url) no-repeat center / contain;
            mask: var(--ltt-logo-url) no-repeat center / contain;
    background-color: currentColor;
    color: #1f1811;
  }
  [data-theme="dark"] .ltt-footer-logo { color: #f5efe3; }

  .ltt-footer-brand {
    font-family: 'Sora', sans-serif; font-size: 1.15rem; font-weight: 600; letter-spacing: -0.03em;
    color: #1f1811;
  }
  [data-theme="dark"] .ltt-footer-brand { color: #f5efe3; }
  .ltt-footer-tagline { font-size: 15px; opacity: 0.55; margin: 0; }

  .ltt-footer-social {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 8px;
    border: 1px solid rgba(53,40,24,0.10); transition: all 160ms ease; cursor: pointer;
  }
  [data-theme="dark"] .ltt-footer-social { border-color: rgba(255,255,255,0.10); }
  .ltt-footer-social:hover { border-color: rgba(200,158,61,0.30); background: rgba(200,158,61,0.06); }
  [data-theme="dark"] .ltt-footer-social:hover { border-color: rgba(141,181,255,0.30); background: rgba(141,181,255,0.06); }
  .ltt-footer-social svg { width: 16px; height: 16px; opacity: 0.50; fill: currentColor; transition: opacity 160ms ease; }
  .ltt-footer-social:hover svg { opacity: 0.80; }

  .ltt-footer-col-title {
    font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.35; margin-bottom: 10px;
  }

  .ltt-footer-link {
    font-size: 13px; font-weight: 500; opacity: 0.50; transition: opacity 130ms ease;
    cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
  }
  .ltt-footer-link:hover { opacity: 0.90; }

  /* System CTA Small — same spec as .ltt-header-cta (32px / 13px / 700 /
     0 18px). Scoped under .ltt-footer to beat `.ltt-footer a { color:
     inherit }` specificity.
     See chrome-decisions-next.md → "Decided: CTA Sizing Scale". */
  .ltt-footer .ltt-footer-donate {
    display: inline-flex; align-items: center; justify-content: center;
    height: 32px; padding: 0 18px;
    border: 0; border-radius: 999px;
    font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700;
    line-height: 1; text-decoration: none;
    background: linear-gradient(135deg, #2f5fc8 0%, #4f86ec 56%, #8dcbff 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(36,78,166,0.18);
    cursor: pointer; transition: box-shadow 130ms ease;
  }
  .ltt-footer .ltt-footer-donate:hover { box-shadow: 0 6px 16px rgba(36,78,166,0.28); }
  [data-theme="dark"] .ltt-footer .ltt-footer-donate {
    background: linear-gradient(135deg, #2c4f9e 0%, #487de0 56%, #78c6ff 100%);
    color: #ffffff;
  }

  .ltt-footer-bottom { font-size: 13px; opacity: 0.30; }
  .ltt-footer-bottom-rule { height: 1px; border: 0; margin: 0; background: rgba(53,40,24,0.06); }
  [data-theme="dark"] .ltt-footer-bottom-rule { background: rgba(255,255,255,0.06); }

  /* Desktop: 5 columns — brand | charts1 | charts2 | charts3+tools | company */
  .ltt-footer-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr;
    gap: 24px 20px;
  }

  /* Desktop layout visible, mobile hidden */
  .ltt-footer-desktop { display: grid; }
  .ltt-footer-mobile { display: none; }

  @media (max-width: 800px) {
    .ltt-footer-desktop { display: none !important; }
    .ltt-footer-mobile { display: block !important; }
  }

/* Source: longtermtrends/ltt/pages/shared/components/layout/global-header.html */
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Sora:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

  :root {
    --ltt-surface-light: #fffefc;
    --ltt-surface-dark: #1a1e25;
    --ltt-text-light: #1f1811;
    /* Light-mode muted bumped from #70665b (~4.4:1) to #534838 (~7.8:1)
       on 2026-04-13 — see chrome-decisions-next.md "Decided: Design
       System Color Tokens". This variable is the source of truth for
       header nav links, the auth modal labels, the search palette,
       form placeholders, and any other shared chrome that needs the
       muted-tier text color. Keeping it on the :root so every consumer
       picks up the new value automatically. */
    --ltt-text-light-muted: #534838;
    --ltt-text-dark: #f5efe3;
    --ltt-text-dark-muted: #aca193;
    --ltt-line-light: rgba(53, 40, 24, 0.10);
    --ltt-line-dark: rgba(255, 255, 255, 0.10);
  }

  .ltt-header {
    font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased;
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    transition: transform 280ms ease;
  }
  .ltt-header.ltt-header--hidden { transform: translateY(-100%); }

  .ltt-header-bar {
    border-radius: 18px; border: 1px solid var(--ltt-line-light);
    transition: border-color 200ms ease, box-shadow 200ms ease;
  }
  .ltt-header-bar--light { background: var(--ltt-surface-light); color: var(--ltt-text-light); box-shadow: 0 14px 40px rgba(75,54,24,0.08); }
  .ltt-header-bar--light:hover { border-color: rgba(201,162,39,0.28); box-shadow: 0 24px 64px rgba(75,54,24,0.14), 0 0 52px rgba(201,162,39,0.18); }
  .ltt-header-bar--dark { background: var(--ltt-surface-dark); color: var(--ltt-text-dark); border-color: var(--ltt-line-dark); box-shadow: 0 16px 44px rgba(0,0,0,0.40); }
  .ltt-header-bar--dark:hover { border-color: rgba(141,181,255,0.30); box-shadow: 0 28px 72px rgba(0,0,0,0.42), 0 0 52px rgba(141,181,255,0.12); }

  /* Logo via mask-image so its fill exactly matches the H1 color
     in both themes (was filter-based, gave a cool grey/black that
     didn't match the warm H1 brown / cream). The svg shape becomes
     an alpha mask, then background-color paints it with the H1 hex.
     SVG aspect ratio is 512:409.24, so width = 26 * 512/409.24 ≈ 33px. */
  .ltt-header-logo {
    display: block;
    width: 33px;
    height: 26px;
    -webkit-mask: var(--ltt-logo-url) no-repeat center / contain;
            mask: var(--ltt-logo-url) no-repeat center / contain;
    background-color: currentColor;
  }
  .ltt-header-bar--light .ltt-header-logo,
  .ltt-mobile-panel--light .ltt-header-logo { color: #1f1811; }
  .ltt-header-bar--dark  .ltt-header-logo,
  .ltt-mobile-panel--dark  .ltt-header-logo { color: #f5efe3; }

  .ltt-header-link { font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; padding: 6px 10px; border-radius: 8px; transition: color 130ms ease; }
  .ltt-header-bar--light .ltt-header-link { color: var(--ltt-text-light-muted); }
  .ltt-header-bar--light .ltt-header-link:hover { color: var(--ltt-text-light); }
  .ltt-header-bar--dark .ltt-header-link { color: var(--ltt-text-dark-muted); }
  .ltt-header-bar--dark .ltt-header-link:hover { color: var(--ltt-text-dark); }

  .ltt-header-search { font-size: 13px; border-radius: 10px; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 7px 12px; transition: all 130ms ease; }
  .ltt-header-bar--light .ltt-header-search { background: rgba(53,40,24,0.05); border: 1px solid rgba(53,40,24,0.09); color: rgba(112,102,91,0.60); }
  .ltt-header-bar--light .ltt-header-search:hover { background: rgba(53,40,24,0.08); border-color: rgba(53,40,24,0.15); }
  .ltt-header-bar--dark .ltt-header-search { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09); color: rgba(172,161,147,0.60); }
  .ltt-header-bar--dark .ltt-header-search:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); }
  .ltt-header-search svg { opacity: 0.40; flex-shrink: 0; }
  .ltt-header-search-kbd { font-family: 'JetBrains Mono', monospace; font-size: 11px; opacity: 0.40; margin-left: auto; }

  /* System CTA Small — 32px height, 13px/700, fixed flex-center.
     Used for header Sign-up, footer Donate, and any inline/nav CTA.
     See chrome-decisions-next.md → "Decided: CTA Sizing Scale". */
  .ltt-header-cta {
    display: inline-flex; align-items: center; justify-content: center;
    height: 32px; padding: 0 18px;
    border: 0; border-radius: 999px;
    font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700;
    line-height: 1; text-decoration: none;
    background: linear-gradient(135deg, #2f5fc8 0%, #4f86ec 56%, #8dcbff 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(36,78,166,0.18);
    cursor: pointer; transition: box-shadow 130ms ease;
  }
  .ltt-header-cta:hover { box-shadow: 0 6px 16px rgba(36,78,166,0.28); }
  .ltt-header-bar--dark .ltt-header-cta { background: linear-gradient(135deg, #2c4f9e 0%, #487de0 56%, #78c6ff 100%); }

  .ltt-header-login { font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; transition: color 130ms ease; }
  .ltt-header-bar--light .ltt-header-login { color: var(--ltt-text-light-muted); }
  .ltt-header-bar--light .ltt-header-login:hover { color: var(--ltt-text-light); }
  .ltt-header-bar--dark .ltt-header-login { color: var(--ltt-text-dark-muted); }
  .ltt-header-bar--dark .ltt-header-login:hover { color: var(--ltt-text-dark); }

  /* Profile icon — unified inline SVG, matches theme/search button treatment */
  .ltt-header-profile { width: 28px; height: 28px; border-radius: 8px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none; background: transparent; padding: 0;
    transition: background 130ms ease, color 130ms ease; }
  .ltt-header-bar--light .ltt-header-profile { color: var(--ltt-text-light-muted); }
  .ltt-header-bar--light .ltt-header-profile:hover { color: var(--ltt-text-light); background: rgba(53,40,24,0.06); }
  .ltt-header-bar--dark .ltt-header-profile { color: var(--ltt-text-dark-muted); }
  .ltt-header-bar--dark .ltt-header-profile:hover { color: var(--ltt-text-dark); background: rgba(255,255,255,0.08); }
  .ltt-header-profile-pro { color: #c89e3d !important; }
  .ltt-header-bar--dark .ltt-header-profile-pro:hover { color: #e7b44a !important; }
  .ltt-header-bar--light .ltt-header-profile-pro:hover { color: #a67e24 !important; }

  /* Theme toggle — styled as a *preview* of the mode it switches TO.
     In light mode the button wears the dark-mode skin (dark surface +
     cream text + moon icon) so it pops against the light header. In
     dark mode the button wears the light-mode skin (cream surface +
     dark text + sun icon) so it pops against the dark header. The
     inverse skin doubles as a readable affordance and as a live preview
     of the theme the click will produce. */
  .ltt-header-theme {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px; height: 30px; padding: 0 12px;
    border-radius: 10px; cursor: pointer;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    transition: all 160ms ease;
  }
  .ltt-header-theme-label { display: none; }
  @media (min-width: 640px) { .ltt-header-theme-label { display: inline; } }

  /* In light mode → button shows dark-mode preview, styled as a glassy
     deep-navy pill with a cobalt accent. Uses the same cobalt hue as the
     `.sl-prose a` / `--ltt-text-dark` link family so it reads as "the
     dark void's signature color", not a random blue. */
  .ltt-header-bar--light .ltt-header-theme {
    background: linear-gradient(135deg, #0f131a 0%, #1a1e25 55%, #263352 100%);
    border: 1px solid rgba(141, 181, 255, 0.28);
    color: #f5efe3;
    box-shadow:
      0 4px 14px rgba(78, 116, 217, 0.18),
      0 2px 8px rgba(26, 30, 37, 0.32),
      inset 0 1px 0 rgba(141, 181, 255, 0.14);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  .ltt-header-bar--light .ltt-header-theme:hover {
    background: linear-gradient(135deg, #0f131a 0%, #1e2536 55%, #2c3f66 100%);
    border-color: rgba(141, 181, 255, 0.45);
    color: #ffffff;
    box-shadow:
      0 6px 20px rgba(78, 116, 217, 0.30),
      0 4px 12px rgba(26, 30, 37, 0.42),
      inset 0 1px 0 rgba(141, 181, 255, 0.22);
    transform: translateY(-1px);
  }

  /* In dark mode → button shows light-mode preview, styled as a warm
     cream pill with a soft gold glow. The cream + gold pairing echoes
     the chart-space gold tokens (sl-toggle-btn, range buttons) so the
     button reads as "this is the cream void", not a plain white chip. */
  .ltt-header-bar--dark .ltt-header-theme {
    background: linear-gradient(135deg, #fffefc 0%, #faf4e6 55%, #f5efe3 100%);
    border: 1px solid rgba(200, 158, 61, 0.32);
    color: #534838;
    box-shadow:
      0 4px 14px rgba(200, 158, 61, 0.16),
      0 2px 8px rgba(75, 54, 24, 0.26),
      inset 0 1px 0 rgba(255, 255, 255, 0.70);
  }
  .ltt-header-bar--dark .ltt-header-theme:hover {
    background: linear-gradient(135deg, #ffffff 0%, #fbf6ea 55%, #f0e8d4 100%);
    border-color: rgba(200, 158, 61, 0.48);
    color: #1f1811;
    box-shadow:
      0 6px 20px rgba(200, 158, 61, 0.28),
      0 4px 12px rgba(75, 54, 24, 0.34),
      inset 0 1px 0 rgba(255, 255, 255, 0.80);
    transform: translateY(-1px);
  }

  /* 2-column charts dropdown */
  .ltt-charts-dd { position: absolute; top: calc(100% + 8px); left: 0; z-index: 100;
    border-radius: 14px; padding: 12px; min-width: 520px; display: grid; grid-template-columns: 160px 1fr; gap: 0; }
  .ltt-header-bar--light .ltt-charts-dd { background: var(--ltt-surface-light); border: 1px solid var(--ltt-line-light); box-shadow: 0 20px 56px rgba(75,54,24,0.14); }
  .ltt-header-bar--dark .ltt-charts-dd { background: var(--ltt-surface-dark); border: 1px solid var(--ltt-line-dark); box-shadow: 0 20px 56px rgba(0,0,0,0.44); }

  .ltt-charts-dd-cats { display: flex; flex-direction: column; gap: 1px; border-right: 1px solid; padding-right: 10px; }
  .ltt-header-bar--light .ltt-charts-dd-cats { border-right-color: rgba(53,40,24,0.06); }
  .ltt-header-bar--dark .ltt-charts-dd-cats { border-right-color: rgba(255,255,255,0.06); }

  .ltt-charts-dd-cat { font-size: 14px; font-weight: 500; padding: 7px 10px; border-radius: 8px; cursor: pointer; transition: all 100ms ease; display: flex; align-items: center; justify-content: space-between; }
  .ltt-header-bar--light .ltt-charts-dd-cat { color: var(--ltt-text-light-muted); }
  .ltt-header-bar--light .ltt-charts-dd-cat:hover, .ltt-header-bar--light .ltt-charts-dd-cat.active { background: rgba(53,40,24,0.05); color: var(--ltt-text-light); }
  .ltt-header-bar--dark .ltt-charts-dd-cat { color: var(--ltt-text-dark-muted); }
  .ltt-header-bar--dark .ltt-charts-dd-cat:hover, .ltt-header-bar--dark .ltt-charts-dd-cat.active { background: rgba(255,255,255,0.06); color: var(--ltt-text-dark); }
  .ltt-charts-dd-cat svg { width: 10px; height: 10px; opacity: 0.35; }

  .ltt-charts-dd-links { padding-left: 10px; display: flex; flex-direction: column; gap: 1px; max-height: 320px; overflow-y: auto; }
  .ltt-charts-dd-links a { display: block; padding: 6px 10px; border-radius: 7px; font-size: 14px; font-weight: 500; text-decoration: none; transition: background 100ms ease; }
  .ltt-header-bar--light .ltt-charts-dd-links a { color: var(--ltt-text-light-muted); }
  .ltt-header-bar--light .ltt-charts-dd-links a:hover { background: rgba(53,40,24,0.05); color: var(--ltt-text-light); }
  .ltt-header-bar--dark .ltt-charts-dd-links a { color: var(--ltt-text-dark-muted); }
  .ltt-header-bar--dark .ltt-charts-dd-links a:hover { background: rgba(255,255,255,0.06); color: var(--ltt-text-dark); }

  /* Command palette modal */
  .ltt-palette-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-start; justify-content: center; padding-top: 120px; }
  .ltt-header-bar--light ~ .ltt-palette-overlay .ltt-palette-scrim,
  .ltt-palette-scrim--light { background: rgba(252,248,240,0.60); }
  .ltt-palette-scrim { position: absolute; inset: 0; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  .ltt-palette-scrim--dark { background: rgba(8,17,30,0.70); }

  .ltt-palette { position: relative; z-index: 1; width: 520px; max-width: calc(100% - 32px); border-radius: 16px; overflow: hidden; }
  .ltt-palette--light { background: var(--ltt-surface-light); border: 1px solid var(--ltt-line-light); box-shadow: 0 24px 72px rgba(75,54,24,0.16); color: var(--ltt-text-light); }
  .ltt-palette--dark { background: var(--ltt-surface-dark); border: 1px solid var(--ltt-line-dark); box-shadow: 0 24px 72px rgba(0,0,0,0.50); color: var(--ltt-text-dark); }

  .ltt-palette-input { width: 100%; padding: 16px 20px; font-size: 15px; font-family: 'Inter', sans-serif; border: none; outline: none; background: transparent; color: inherit; }
  .ltt-palette--light .ltt-palette-input { border-bottom: 1px solid rgba(53,40,24,0.08); }
  .ltt-palette--dark .ltt-palette-input { border-bottom: 1px solid rgba(255,255,255,0.08); }
  .ltt-palette-input::placeholder { opacity: 0.40; }

  .ltt-palette-results { padding: 8px; max-height: 420px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .ltt-palette-cat { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.35; padding: 10px 12px 4px; }
  .ltt-palette-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; transition: background 100ms ease; text-decoration: none; }
  .ltt-palette--light .ltt-palette-item { color: var(--ltt-text-light-muted); }
  .ltt-palette--light .ltt-palette-item:hover { background: rgba(53,40,24,0.05); color: var(--ltt-text-light); }
  .ltt-palette--dark .ltt-palette-item { color: var(--ltt-text-dark-muted); }
  .ltt-palette--dark .ltt-palette-item:hover { background: rgba(255,255,255,0.06); color: var(--ltt-text-dark); }
  .ltt-palette-item-sub { font-size: 12px; opacity: 0.45; margin-left: auto; }
  .ltt-palette-footer { padding: 10px 16px; font-size: 12px; opacity: 0.35; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.04em; }
  .ltt-palette--light .ltt-palette-footer { border-top: 1px solid rgba(53,40,24,0.06); }
  .ltt-palette--dark .ltt-palette-footer { border-top: 1px solid rgba(255,255,255,0.06); }

  /* Tablet: search text + kbd collapse to icon only */
  @media (max-width: 900px) {
    .ltt-header-search-kbd { display: none !important; }
    .ltt-header-search-text { display: none !important; }
    .ltt-header-search { width: auto !important; padding: 7px 9px !important; }
  }

  /* Small tablet: Log in text hides */
  @media (max-width: 640px) {
    .ltt-header-login { display: none !important; }
  }

  /* Mobile: nav links hide, hamburger appears left of logo */
  @media (max-width: 540px) {
    .ltt-header-nav-left { display: none !important; }
    .ltt-header-hamburger { display: flex !important; }
  }

  /* ============================================================
     MOBILE SLIDE-IN MENU
  ============================================================ */
  .ltt-mobile-menu {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
    z-index: 300; pointer-events: none;
  }
  .ltt-mobile-menu.is-open { pointer-events: auto; }

  .ltt-mobile-scrim {
    position: absolute; inset: 0; opacity: 0; transition: opacity 250ms ease;
  }
  .ltt-mobile-menu.is-open .ltt-mobile-scrim { opacity: 1; }
  .ltt-mobile-scrim--light { background: rgba(31,24,17,0.30); }
  .ltt-mobile-scrim--dark { background: rgba(0,0,0,0.50); }

  .ltt-mobile-panel {
    position: absolute; top: 0; left: 0; width: 300px; max-width: 85vw; height: 100%;
    overflow-y: auto; transform: translateX(-100%); transition: transform 280ms ease;
    font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased;
  }
  .ltt-mobile-menu.is-open .ltt-mobile-panel { transform: translateX(0); }
  .ltt-mobile-panel--light { background: var(--ltt-surface-light); color: var(--ltt-text-light); box-shadow: 4px 0 24px rgba(75,54,24,0.12); }
  .ltt-mobile-panel--dark { background: var(--ltt-surface-dark); color: var(--ltt-text-dark); box-shadow: 4px 0 24px rgba(0,0,0,0.40); }

  .ltt-mobile-panel-header {
    display: flex; align-items: center; justify-content: space-between; padding: 16px 20px;
    border-bottom: 1px solid;
  }
  .ltt-mobile-panel--light .ltt-mobile-panel-header { border-bottom-color: rgba(53,40,24,0.08); }
  .ltt-mobile-panel--dark .ltt-mobile-panel-header { border-bottom-color: rgba(255,255,255,0.08); }

  .ltt-mobile-close { width: 32px; height: 32px; border: none; background: transparent; cursor: pointer;
    display: flex; align-items: center; justify-content: center; color: inherit; opacity: 0.5; border-radius: 8px; }
  .ltt-mobile-close:hover { opacity: 1; }

  .ltt-mobile-nav { padding: 12px 8px; }

  .ltt-mobile-nav a, .ltt-mobile-nav-btn {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px; border-radius: 10px; font-size: 15px; font-weight: 500;
    text-decoration: none; transition: background 100ms ease; cursor: pointer;
    border: none; background: none; width: 100%; text-align: left; color: inherit;
  }
  .ltt-mobile-panel--light .ltt-mobile-nav a:hover, .ltt-mobile-panel--light .ltt-mobile-nav-btn:hover { background: rgba(53,40,24,0.05); }
  .ltt-mobile-panel--dark .ltt-mobile-nav a:hover, .ltt-mobile-panel--dark .ltt-mobile-nav-btn:hover { background: rgba(255,255,255,0.06); }

  .ltt-mobile-sub { padding: 0 8px 8px; }
  .ltt-mobile-sub a {
    display: block; padding: 8px 14px 8px 28px; border-radius: 8px; font-size: 15px; font-weight: 400;
    text-decoration: none; transition: background 100ms ease; opacity: 0.70;
  }
  .ltt-mobile-sub a:hover { opacity: 1; }
  .ltt-mobile-panel--light .ltt-mobile-sub a:hover { background: rgba(53,40,24,0.04); }
  .ltt-mobile-panel--dark .ltt-mobile-sub a:hover { background: rgba(255,255,255,0.05); }

  .ltt-mobile-divider { height: 1px; margin: 8px 14px; }
  .ltt-mobile-panel--light .ltt-mobile-divider { background: rgba(53,40,24,0.06); }
  .ltt-mobile-panel--dark .ltt-mobile-divider { background: rgba(255,255,255,0.06); }

  /* ============================================================
     Feedback banner — sits above the nav bar inside `.ltt-header`.
     Visual language mirrors the legacy "Try the new experience"
     banner on /: gold hairline accent, JetBrains Mono eyebrow,
     cobalt gradient CTA. Uses canonical SL tokens (no !important
     needed on the ltt side).
     ============================================================ */
  .ltt-feedback-banner {
    position: relative;
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  .ltt-feedback-banner::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(200,158,61,0.45) 50%, transparent 100%);
    pointer-events: none;
  }
  .ltt-feedback-banner--light {
    background: linear-gradient(180deg, #fbf6e8 0%, #f7f0dc 100%);
    border-bottom: 1px solid rgba(53,40,24,0.10);
    color: #534838;
  }
  .ltt-feedback-banner--dark {
    background: linear-gradient(180deg, #1a1611 0%, #14100b 100%);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    color: #aca193;
  }
  .ltt-feedback-banner--dark::before {
    background: linear-gradient(90deg, transparent 0%, rgba(227,197,124,0.50) 50%, transparent 100%);
  }

  .ltt-feedback-banner-inner {
    max-width: 1200px; margin: 0 auto;
    padding: 8px 48px 8px 16px;
    display: flex; align-items: center; justify-content: center;
    gap: 12px; flex-wrap: wrap;
    font-size: 14px; line-height: 1.35;
    position: relative;
  }

  .ltt-feedback-banner-eyebrow {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.12em;
    padding: 2px 8px; border-radius: 4px;
    background: rgba(200,158,61,0.14);
    color: #b67928;
    border: 1px solid rgba(200,158,61,0.28);
  }
  .ltt-feedback-banner--dark .ltt-feedback-banner-eyebrow {
    background: rgba(227,197,124,0.12);
    color: #e3c57c;
    border-color: rgba(227,197,124,0.26);
  }

  .ltt-feedback-banner-text { opacity: 0.85; }

  /* CTA — same cobalt gradient spec as `.ltt-header-cta`, scaled down
     to 26px for the slim banner. */
  .ltt-feedback-banner-cta {
    display: inline-flex; align-items: center; gap: 6px;
    height: 26px; padding: 0 14px;
    border: 0; border-radius: 999px;
    font-size: 13px; font-weight: 600; line-height: 1;
    text-decoration: none; white-space: nowrap;
    background: linear-gradient(135deg, #2f5fc8 0%, #4f86ec 56%, #8dcbff 100%);
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(36,78,166,0.16);
    transition: box-shadow 130ms ease, transform 130ms ease;
  }
  .ltt-feedback-banner-cta::after {
    content: "→"; font-size: 15px; line-height: 1; opacity: 0.9;
  }
  .ltt-feedback-banner-cta:hover,
  .ltt-feedback-banner-cta:focus-visible {
    box-shadow: 0 4px 12px rgba(36,78,166,0.24);
    transform: translateY(-0.5px);
    text-decoration: none;
    color: #ffffff !important;
  }
  .ltt-feedback-banner--dark .ltt-feedback-banner-cta {
    background: linear-gradient(135deg, #2c4f9e 0%, #487de0 56%, #78c6ff 100%);
    box-shadow: 0 2px 10px rgba(20,48,110,0.35);
  }
  .ltt-feedback-banner--dark .ltt-feedback-banner-cta:hover,
  .ltt-feedback-banner--dark .ltt-feedback-banner-cta:focus-visible {
    box-shadow: 0 4px 14px rgba(20,48,110,0.50);
  }

  .ltt-feedback-banner-close {
    position: absolute; right: 12px; top: 50%;
    transform: translateY(-50%);
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; background: transparent; cursor: pointer;
    border-radius: 6px; font-size: 18px; line-height: 1;
    color: inherit; opacity: 0.45;
    transition: opacity 130ms ease, background 130ms ease;
  }
  .ltt-feedback-banner-close:hover,
  .ltt-feedback-banner-close:focus-visible { opacity: 1; }
  .ltt-feedback-banner--light .ltt-feedback-banner-close:hover { background: rgba(53,40,24,0.06); color: #1f1811; }
  .ltt-feedback-banner--dark  .ltt-feedback-banner-close:hover { background: rgba(255,255,255,0.06); color: #f5efe3; }

  @media (max-width: 520px) {
    .ltt-feedback-banner-inner {
      padding: 6px 40px 6px 12px;
      gap: 8px;
      font-size: 13px;
    }
    .ltt-feedback-banner-eyebrow { font-size: 10px; padding: 2px 6px; }
    .ltt-feedback-banner-cta { height: 24px; padding: 0 12px; font-size: 12px; }
  }

  /* Banner sits on top of the fixed nav bar inside `.ltt-header`, adding
     ~44px of chrome height (36px on mobile). Canonical ltt pages ship a
     hardcoded `<div style="height: 76px;">` spacer that sizes the gap for
     the nav bar alone; without this extra body padding the banner overlaps
     each page's H1. The `has-ltt-banner` class is toggled by Alpine
     `$watch('feedbackBannerOpen')` on the `.ltt-header` scope below so
     the padding collapses to 0 when the user dismisses the banner. */
  body.has-ltt-banner { padding-top: 44px; }
  @media (max-width: 520px) {
    body.has-ltt-banner { padding-top: 36px; }
  }

/* Source: longtermtrends/ltt/pages/shared/components/layout/global-search.html */
  /* Search Bar Styles */
  .global-header-bootstrap-killer .global-header-search {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
  }

  .global-header-bootstrap-killer .global-header-search-container {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    background: #ffffff !important;
    border: 1px solid #e9ecef !important;
    border-radius: 5px !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 300px !important;
    height: 38px !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
  }

  .global-header-bootstrap-killer .global-header-search-container:focus-within {
    box-shadow: 0 0 0 2px rgba(22, 82, 240, 0.15) !important;
  }

  .global-header-bootstrap-killer .global-header-search-input {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    background: transparent !important;
    padding: 0 12px 0 40px !important;
    margin: 0 !important;
    font-family: Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: normal !important;
    color: #333 !important;
    outline: none !important;
    border-radius: 6px !important;
    line-height: 1.5 !important;
    text-align: left !important;
  }

  .global-header-bootstrap-killer .global-header-search-input::placeholder {
    color: #6c757d !important;
    font-family: Arial, sans-serif !important;
    font-size: 16px !important;
  }

  .global-header-bootstrap-killer .global-header-search-icon {
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 16px !important;
    height: 16px !important;
    pointer-events: none !important;
    opacity: 0.6 !important;
  }

  /* Mobile adjustments for search bar */
  @media (max-width: 1200px) {
    .global-header-bootstrap-killer .global-header-search-container {
      width: 250px !important;
    }
  }

  @media (max-width: 1024px) {
    .global-header-bootstrap-killer .global-header-search-container {
      width: 200px !important;
      height: 30px !important;
    }
    
    .global-header-bootstrap-killer .global-header-search-input {
      padding: 0 10px 0 34px !important;
      font-size: 15px !important;
    }
    
    .global-header-bootstrap-killer .global-header-search-icon {
      left: 10px !important;
      width: 15px !important;
      height: 15px !important;
    }
  }

  @media (max-width: 1100px) {
    .global-header-bootstrap-killer .global-header-search-container {
      width: 36px !important;
      height: 36px !important;
      border-radius: 50% !important;
      padding: 0 !important;
      justify-content: center !important;
      align-items: center !important;
      background: #f8f9fa !important;
      border: 1px solid #e9ecef !important;
      cursor: pointer !important;
      margin-bottom: 2px !important;
    }

    .global-header-bootstrap-killer .global-header-search-input {
      display: none !important;
    }

    .global-header-bootstrap-killer .global-header-search-icon {
      position: static !important;
      transform: none !important;
      left: auto !important;
      top: auto !important;
      opacity: 0.8 !important;
      width: 16px !important;
      height: 16px !important;
    }

    /* Hide dropdown on mobile */
    .global-header-bootstrap-killer .global-header-search-dropdown {
      display: none !important;
    }
  }

  @media (max-width: 480px) {
    .global-header-bootstrap-killer .global-header-search-container {
      width: 36px !important;
      height: 36px !important;
    }

    .global-header-bootstrap-killer .global-header-search-icon {
      width: 14px !important;
      height: 14px !important;
    }
  }

  /* Search Modal Overlay */
  .global-header-bootstrap-killer .global-header-search-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.6) !important;
    z-index: 9999 !important;
    display: none !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 100px 20px 20px 20px !important;
    backdrop-filter: blur(2px) !important;
  }

  .global-header-bootstrap-killer .global-header-search-modal.show {
    display: flex !important;
  }

  .global-header-bootstrap-killer .global-header-search-modal-content {
    width: 100% !important;
    max-width: 600px !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
    overflow: hidden !important;
    position: relative !important;
  }

  .global-header-bootstrap-killer .global-header-search-modal-header {
    padding: 20px 20px 0 20px !important;
    border-bottom: 1px solid #f1f3f4 !important;
  }

  .global-header-bootstrap-killer .global-header-search-modal-input-container {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    background: #f8f9fa !important;
    border: 2px solid #e9ecef !important;
    border-radius: 8px !important;
    padding: 0 !important;
    margin: 0 0 20px 0 !important;
    height: 50px !important;
    transition: border-color 0.2s ease-in-out !important;
  }

  .global-header-bootstrap-killer .global-header-search-modal-input-container:focus-within {
    border-color: #e9ecef !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 2px rgba(22, 82, 240, 0.15) !important;
  }

  .global-header-bootstrap-killer .global-header-search-modal-input {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    background: transparent !important;
    padding: 0 16px !important;
    margin: 0 !important;
    font-family: Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: normal !important;
    color: #333 !important;
    outline: none !important;
    border-radius: 8px !important;
  }

  .global-header-bootstrap-killer .global-header-search-modal-input::placeholder {
    color: #6c757d !important;
    font-size: 18px !important;
  }

  /* Search Modal Dropdown */
  .global-header-bootstrap-killer .global-header-search-dropdown {
    max-height: 400px !important;
    overflow-y: auto !important;
    background: #ffffff !important;
    border-top: 1px solid #f1f3f4 !important;
  }

  .global-header-bootstrap-killer .global-header-search-dropdown.show {
    display: block !important;
  }

  .global-header-bootstrap-killer .global-header-search-dropdown-item {
    padding: 16px 20px !important;
    border-bottom: 1px solid #f8f9fa !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    font-family: Arial, sans-serif !important;
    font-size: 15px !important;
    color: #333 !important;
    background: transparent !important;
    margin: 0 !important;
    text-decoration: none !important;
    transition: background-color 0.15s ease !important;
  }

  .global-header-bootstrap-killer .global-header-search-dropdown-item.active {
    background: #f8f9fa !important;
  }

  .global-header-bootstrap-killer .global-header-search-dropdown-item:hover {
    background: #f8f9fa !important;
  }

  .global-header-bootstrap-killer .global-header-search-dropdown-item:last-child {
    border-bottom: none !important;
  }

  .global-header-bootstrap-killer .global-header-search-dropdown-item-icon {
    width: 32px !important;
    height: 32px !important;
    background: #1652f0 !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    color: white !important;
    font-weight: bold !important;
    flex-shrink: 0 !important;
  }

  .global-header-bootstrap-killer .global-header-search-dropdown-item-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  .global-header-bootstrap-killer .global-header-search-dropdown-item-title {
    font-weight: 500 !important;
    color: #333 !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
  }

  .global-header-bootstrap-killer .global-header-search-dropdown-item-subtitle {
    font-size: 15px !important;
    color: #6c757d !important;
    line-height: 1.2 !important;
  }

  .global-header-bootstrap-killer .global-header-search-dropdown-item-meta {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
  }

  .global-header-bootstrap-killer .global-header-search-dropdown-item-type {
    background: #e9ecef !important;
    color: #6c757d !important;
    padding: 2px 8px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
  }

/* Source: longtermtrends/ltt/pages/shared/components/layout/header.html */
  @media (max-width: 768px) {
    .logo-text {
      font-size: 15px !important;
    }
  }

/* Source: longtermtrends/ltt/pages/shared/components/layout/mobile-menu.html */
  /* Mobile Menu Styles */
  .mobile-menu-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    z-index: 1040 !important;
    display: none !important;
  }
  
  .mobile-menu-overlay.active {
    display: block !important;
  }
  
  .mobile-menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    background-color: #ffffff !important;
    z-index: 1041 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease !important;
    overflow-y: auto !important;
    box-shadow: none !important;
  }
  
  .mobile-menu.active {
    transform: translateX(0) !important;
  }
  
  .mobile-menu-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 20px 24px !important;
  
    margin: 0 !important;
    background: transparent !important;
  }
  
  .mobile-menu-logo {
    height: 30px !important;
    width: auto !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
  }
  
  .mobile-menu-title {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #333333 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
  }
  
  .mobile-menu-close {
    width: 32px !important;
    height: 32px !important;
    cursor: pointer !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 28px !important;
    color: #666666 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
  }
  
  .mobile-menu-content {
    padding: 24px 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }
  
  .mobile-menu-section {
    margin: 0 0 32px 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }
  
  .mobile-menu-item {
    display: flex !important;
    align-items: center !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    padding-left: 24px !important;
    margin: 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #000000 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    background: transparent !important;
    border: none !important;
    line-height: 1.2 !important;
    gap: 12px !important;
    width: 100% !important;
    text-align: left !important;
  }
  
  .mobile-menu-item:hover {
    background-color: #f8f9fa !important;
    color: #000000 !important;
  }
  
  .mobile-menu-item.primary {
    color: #007aff !important;
    font-weight: 500 !important;
  }
  
  .mobile-menu-item-icon {
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    flex-shrink: 0 !important;
  }
  
  .mobile-menu-category {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 24px !important;
    margin: 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #000000 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    background: transparent !important;
    border: none !important;
    line-height: 1.2 !important;
    width: 100% !important;
    text-align: left !important;
  }
  
  .mobile-menu-category:hover {
    background-color: #f8f9fa !important;
    color: #000000 !important;
  }
  
  .mobile-menu-category-content {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }
  
  .mobile-menu-arrow {
    width: 7px !important;
    height: 11px !important;
    transform: rotate(90deg) !important;
    transition: transform 0.2s ease !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    flex-shrink: 0 !important;
  }
  
  .mobile-menu-category.expanded .mobile-menu-arrow {
    transform: rotate(270deg) !important;
  }
  
  .mobile-menu-submenu {
    background-color: transparent !important;
  }
  
  .mobile-menu-submenu .mobile-menu-item {
    padding-left: 72px !important;
    font-size: 15px !important;
    color: #000000 !important;
    background-color: transparent !important;
  }
  
  .mobile-menu-submenu .mobile-menu-item:hover {
    background-color: #f8f9fa !important;
    color: #000000 !important;
  }
  
  .mobile-menu-submenu .mobile-menu-category {
    padding-left: 60px !important;
    font-size: 15px !important;
    color: #000000 !important;
  }
  
  .mobile-menu-submenu .mobile-menu-category:hover {
    background-color: #f8f9fa !important;
    color: #000000 !important;
  }
  
  /* Hide mobile menu on desktop */
  @media (min-width: 769px) {
    .mobile-menu-overlay,
    .mobile-menu {
      display: none !important;
    }
  }

/* Source: longtermtrends/ltt/pages/shared/components/profile/api-keys.html */
  .sl-key-row {
    display: flex; align-items: center; gap: 12px;
    padding: 14px; border-radius: 12px;
    background: rgba(120,120,120,0.06);
    border: 1px solid rgba(120,120,120,0.18);
  }
  .sl-void[data-void="dark"] .sl-key-row {
    background: rgba(22,26,34,0.55);
    border-color: rgba(255,255,255,0.08);
  }
  .sl-key-value {
    flex: 1; min-width: 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px; line-height: 1.5;
    word-break: break-all;
    user-select: all;
    color: #8a5a14;
  }
  .sl-void[data-void="dark"] .sl-key-value { color: #e3c57c; }
  .sl-key-actions {
    display: flex; gap: 4px; flex-shrink: 0;
  }
  .sl-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0;
    background: transparent; border: none;
    color: currentColor; opacity: 0.55;
    border-radius: 8px; cursor: pointer;
    transition: opacity 130ms ease, background 130ms ease, color 130ms ease;
  }
  .sl-icon-btn:hover { opacity: 1; background: rgba(120,120,120,0.12); }
  .sl-icon-btn:disabled { opacity: 0.3; cursor: not-allowed; }
  .sl-void[data-void="dark"] .sl-icon-btn:hover { background: rgba(255,255,255,0.08); }
  .sl-icon-btn.is-ok { color: #3a7c50; opacity: 1; }
  [data-theme="dark"] .sl-icon-btn.is-ok { color: #84d89e; }
  .is-spinning { animation: sl-key-spin 1s linear infinite; }
  @keyframes sl-key-spin { to { transform: rotate(360deg); } }
  .sl-key-error {
    margin: 8px 0 0 0;
    font-size: 13px; color: #c75a4a;
  }
  [data-theme="dark"] .sl-key-error { color: #e88a7a; }

/* Source: longtermtrends/ltt/pages/shared/components/profile/edit-display-name-modal.html */
  .edn-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    color: currentColor;
    opacity: 0.45;
    border-radius: 6px;
    cursor: pointer;
    transition: opacity 130ms ease, background 130ms ease;
  }
  .edn-edit-btn:hover { opacity: 1; background: rgba(120, 120, 120, 0.12); }
  [data-theme="dark"] .edn-edit-btn:hover { background: rgba(255, 255, 255, 0.08); }

/* Source: longtermtrends/ltt/pages/tools/fire/html/fire-agent.html */
  /* ====================================================================
     FIRE Agent landing — page-specific components on top of sl-system.css.
  ==================================================================== */

  /* Step cards grid */
  .fire-step-grid {
    display: grid; grid-template-columns: 1fr; gap: 20px;
  }
  @media (min-width: 900px) {
    .fire-step-grid { grid-template-columns: repeat(3, 1fr); }
  }
  .fire-step {
    display: flex; flex-direction: column;
    padding: 28px;
  }
  .fire-step__icon {
    flex-shrink: 0;
    width: 48px; height: 48px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 18px;
  }
  .sl-void[data-void="light"] .fire-step__icon {
    background: rgba(200,158,61,0.10);
    border: 1px solid rgba(200,158,61,0.28);
    color: #8a5a14;
  }
  .sl-void[data-void="dark"] .fire-step__icon {
    background: rgba(227,197,124,0.10);
    border: 1px solid rgba(227,197,124,0.30);
    color: #e3c57c;
  }
  .fire-step__icon svg { width: 24px; height: 24px; }
  .fire-step h3 {
    font-family: 'Sora', sans-serif; font-size: 1.1rem; font-weight: 600;
    letter-spacing: -0.03em; margin: 0 0 10px;
  }
  .fire-step__lede {
    font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.65;
    margin: 0 0 16px; opacity: 0.75;
  }
  .fire-step__list {
    list-style: none; padding: 14px 0 0; margin: auto 0 0;
    display: flex; flex-direction: column; gap: 10px;
    font-size: 14px; line-height: 1.55;
  }
  .sl-void[data-void="light"] .fire-step__list { border-top: 1px solid rgba(53,40,24,0.08); }
  .sl-void[data-void="dark"]  .fire-step__list { border-top: 1px solid rgba(255,255,255,0.08); }
  .fire-step__list li {
    display: flex; align-items: flex-start; gap: 10px;
    opacity: 0.80;
  }
  .fire-step__dot {
    display: inline-block; flex-shrink: 0;
    width: 6px; height: 6px; border-radius: 999px;
    margin-top: 7px;
    background: #c89e3d;
  }
  .sl-void[data-void="dark"] .fire-step__dot { background: #e3c57c; }

  /* Book (Philosophy) callout layout */
  .fire-book {
    display: flex; flex-direction: column; gap: 24px;
    padding: 28px; align-items: center;
  }
  @media (min-width: 760px) {
    .fire-book { flex-direction: row; align-items: flex-start; text-align: left; }
  }
  .fire-book__cover {
    flex-shrink: 0; width: 140px; height: auto;
    border-radius: 10px; overflow: hidden;
    box-shadow: 0 12px 32px rgba(0,0,0,0.18);
  }
  .fire-book__cover img { width: 100%; height: auto; display: block; }
  .fire-book__body { flex: 1; }
  .fire-book__body h3 {
    font-family: 'Sora', sans-serif; font-size: 1.2rem; font-weight: 600;
    letter-spacing: -0.03em; margin: 0 0 6px;
  }
  .fire-book__author {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.09em;
    opacity: 0.55; margin: 0 0 14px;
  }
  .fire-book__quote {
    font-family: 'Inter', sans-serif; font-style: italic;
    font-size: 15px; line-height: 1.65;
    margin: 0 0 18px; opacity: 0.80;
  }
  .fire-book__links { display: flex; flex-wrap: wrap; gap: 10px; }

  /* Disclaimer cards */
  .fire-note {
    display: flex; gap: 16px; padding: 22px 26px;
    align-items: flex-start;
  }
  .fire-note__icon {
    flex-shrink: 0;
    width: 32px; height: 32px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
  }
  .sl-void[data-void="light"] .fire-note__icon {
    background: rgba(200,158,61,0.10);
    border: 1px solid rgba(200,158,61,0.28);
    color: #8a5a14;
  }
  .sl-void[data-void="dark"] .fire-note__icon {
    background: rgba(227,197,124,0.10);
    border: 1px solid rgba(227,197,124,0.30);
    color: #e3c57c;
  }
  .fire-note__icon svg { width: 18px; height: 18px; }
  .fire-note__body { flex: 1; }
  .fire-note__body h3 {
    font-family: 'Sora', sans-serif; font-size: 1rem; font-weight: 600;
    letter-spacing: -0.02em; margin: 0 0 10px;
  }
  .fire-note__body p {
    font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.65;
    margin: 0 0 8px; opacity: 0.78;
  }
  .fire-note__body p:last-child { margin-bottom: 0; }
  .fire-note__body a { color: #2f4ea8; text-decoration: underline; }
  [data-theme="dark"] .fire-note__body a { color: #8fb2ff; }

  /* Login prompt card (non-authenticated users).
     Floating popup that lives OUTSIDE `.sl-void`, so we use the locked
     modal panel material from chrome-decisions-next.md ("Decided: Modal /
     Popup Pattern") with `[data-theme]` selectors on the html element
     instead of `.sl-void[data-void="..."]` (which only match descendants
     of the void). Solid Porcelain (#fffefc) light / Graphite (#1a1e25)
     dark, 18px radius, soft warm shadow light / deep shadow dark — same
     material as the centered auth modal. The icon ring is gold (FIRE
     branding) instead of cobalt (Co-Pilot branding). */
  .fire-login-prompt {
    position: fixed; bottom: 20px; right: 20px; z-index: 1000;
    max-width: 320px; padding: 22px; border-radius: 18px;
    display: flex; flex-direction: column; gap: 14px;
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    background: #fffefc;
    border: 1px solid rgba(53,40,24,0.10);
    box-shadow: 0 24px 60px rgba(75,54,24,0.16), 0 8px 20px rgba(75,54,24,0.08);
    color: #1f1811;
    transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease, color 220ms ease, opacity 220ms ease;
  }
  [data-theme="dark"] .fire-login-prompt {
    background: #1a1e25;
    border-color: rgba(255,255,255,0.10);
    box-shadow: 0 24px 60px rgba(0,0,0,0.50), 0 8px 20px rgba(0,0,0,0.32);
    color: #f5efe3;
  }
  .fire-login-prompt__close {
    position: absolute; top: 12px; right: 12px;
    width: 28px; height: 28px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; background: transparent; border: 0;
    color: #534838;
    transition: background 140ms ease, color 140ms ease;
  }
  .fire-login-prompt__close:hover { background: rgba(53,40,24,0.06); color: #1f1811; }
  [data-theme="dark"] .fire-login-prompt__close { color: #aca193; }
  [data-theme="dark"] .fire-login-prompt__close:hover { background: rgba(255,255,255,0.08); color: #f5efe3; }
  .fire-login-prompt__close svg { width: 16px; height: 16px; }
  .fire-login-prompt__header {
    display: flex; align-items: flex-start; gap: 14px;
    padding-right: 28px;
  }
  .fire-login-prompt__icon {
    flex-shrink: 0;
    width: 42px; height: 42px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(200,158,61,0.10);
    border: 1px solid rgba(200,158,61,0.28);
    color: #8a5a14;
  }
  [data-theme="dark"] .fire-login-prompt__icon {
    background: rgba(227,197,124,0.10);
    border-color: rgba(227,197,124,0.30);
    color: #e3c57c;
  }
  .fire-login-prompt__icon svg { width: 22px; height: 22px; }
  .fire-login-prompt h4 {
    font-family: 'Sora', sans-serif; font-size: 1rem; font-weight: 600;
    letter-spacing: -0.02em; margin: 0 0 6px;
    color: inherit;
  }
  .fire-login-prompt p {
    font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.5;
    margin: 0; opacity: 0.72;
    color: inherit;
  }
  .fire-login-prompt__actions { display: flex; gap: 10px; }

/* Source: longtermtrends/ltt/pages/tools/investment_copilot/html/investment-co-pilot.html */
  /* ====================================================================
     Investment Co-Pilot — page-specific components on top of sl-system.css
  ==================================================================== */

  /* How It Works step card */
  .sl-step-card {
    display: flex; flex-direction: column; gap: 14px;
    padding: 28px;
  }
  .sl-step-card__icon {
    flex-shrink: 0;
    width: 48px; height: 48px; border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .sl-void[data-void="light"] .sl-step-card__icon {
    background: rgba(200,158,61,0.10);
    border: 1px solid rgba(200,158,61,0.28);
    color: #8a5a14;
  }
  .sl-void[data-void="dark"] .sl-step-card__icon {
    background: rgba(227,197,124,0.10);
    border: 1px solid rgba(227,197,124,0.30);
    color: #e3c57c;
  }
  .sl-step-card__icon svg { width: 24px; height: 24px; }
  .sl-step-card h3 {
    font-family: 'Sora', sans-serif; font-size: 1.15rem; font-weight: 600;
    letter-spacing: -0.03em; margin: 0;
  }
  .sl-step-card p {
    font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.65;
    margin: 0; opacity: 0.75;
  }
  .sl-step-card__list {
    list-style: none; padding: 14px 0 0; margin: auto 0 0;
    display: flex; flex-direction: column; gap: 10px;
    font-size: 14px; line-height: 1.5;
  }
  .sl-void[data-void="light"] .sl-step-card__list { border-top: 1px solid rgba(53,40,24,0.08); }
  .sl-void[data-void="dark"]  .sl-step-card__list { border-top: 1px solid rgba(255,255,255,0.08); }
  .sl-step-card__list li {
    display: flex; align-items: flex-start; gap: 10px;
    opacity: 0.78;
  }
  .sl-step-card__list li::before {
    content: ""; flex-shrink: 0;
    width: 6px; height: 6px; border-radius: 999px;
    margin-top: 7px;
    background: #c89e3d;
  }
  .sl-void[data-void="dark"] .sl-step-card__list li::before { background: #e3c57c; }
  .sl-step-card__list strong { opacity: 0.95; }

  /* Research / book card */
  .sl-book-card {
    display: flex; flex-direction: column; gap: 24px;
    padding: 32px;
    align-items: center; text-align: center;
  }
  @media (min-width: 720px) {
    .sl-book-card { flex-direction: row; text-align: left; align-items: flex-start; }
  }
  .sl-book-card__cover {
    flex-shrink: 0;
    width: 140px; height: auto; border-radius: 6px;
    box-shadow: 0 12px 28px rgba(31,24,17,0.18);
    display: block;
  }
  .sl-book-card__body { flex: 1; }
  .sl-book-card h3 {
    font-family: 'Sora', sans-serif; font-size: 1.3rem; font-weight: 600;
    letter-spacing: -0.03em; margin: 0 0 6px;
  }
  .sl-book-card__author {
    font-family: 'Inter', sans-serif; font-size: 14px;
    margin: 0 0 18px; opacity: 0.60;
  }
  .sl-book-card__actions {
    display: flex; flex-wrap: wrap; gap: 10px;
    justify-content: center;
  }
  @media (min-width: 720px) {
    .sl-book-card__actions { justify-content: flex-start; }
  }

  /* Advisory / disclaimer surface */
  .sl-note {
    padding: 20px 24px; display: flex; gap: 14px; align-items: flex-start;
  }
  .sl-note__icon {
    flex-shrink: 0; width: 24px; height: 24px;
  }
  .sl-void[data-void="light"] .sl-note__icon { color: #b67928; }
  .sl-void[data-void="dark"]  .sl-note__icon { color: #e3c57c; }
  .sl-note h3 {
    font-family: 'Sora', sans-serif; font-size: 1rem; font-weight: 600;
    letter-spacing: -0.02em; margin: 0 0 8px;
  }
  .sl-note p {
    font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.65;
    margin: 0 0 10px; opacity: 0.78;
  }
  .sl-note p:last-child { margin-bottom: 0; }
  .sl-note a { color: #2f4ea8; text-decoration: none; }
  [data-theme="dark"] .sl-note a { color: #8fb2ff; }
  .sl-note a:hover { text-decoration: underline; }

  /* Login prompt (floating card for unauthenticated users).
     The popup is a fixed-positioned card outside `.sl-void`, so it can NOT
     rely on `.sl-void[data-void="..."]` selectors (those only match
     descendants of the void). It also can NOT use the translucent
     `.sl-surface` gradient material because surfaces are designed to sit
     on top of the void and read against page content — a floating card
     needs to be opaque to be readable.

     Per the locked modal/popup pattern in chrome-decisions-next.md
     ("Decided: Modal / Popup Pattern"): use the SOLID Porcelain (#fffefc)
     light / Graphite (#1a1e25) dark material, 18px radius, soft warm
     shadow light / deep shadow dark. Same material as the centered auth
     modal, just smaller. Selectors use `[data-theme]` on the html element
     so the popup inherits the right theme regardless of DOM placement. */
  .sl-login-prompt {
    position: fixed; bottom: 20px; right: 20px; z-index: 1000;
    padding: 20px; border-radius: 18px;
    max-width: 320px;
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    background: #fffefc;
    border: 1px solid rgba(53,40,24,0.10);
    box-shadow: 0 24px 60px rgba(75,54,24,0.16), 0 8px 20px rgba(75,54,24,0.08);
    color: #1f1811;
    transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease, color 220ms ease;
  }
  [data-theme="dark"] .sl-login-prompt {
    background: #1a1e25;
    border-color: rgba(255,255,255,0.10);
    box-shadow: 0 24px 60px rgba(0,0,0,0.50), 0 8px 20px rgba(0,0,0,0.32);
    color: #f5efe3;
  }
  .sl-login-prompt__close {
    position: absolute; top: 12px; right: 12px;
    width: 28px; height: 28px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 0; border-radius: 8px;
    color: #534838;
    transition: background 130ms ease, color 130ms ease;
  }
  .sl-login-prompt__close:hover { background: rgba(53,40,24,0.06); color: #1f1811; }
  [data-theme="dark"] .sl-login-prompt__close { color: #aca193; }
  [data-theme="dark"] .sl-login-prompt__close:hover { background: rgba(255,255,255,0.08); color: #f5efe3; }
  .sl-login-prompt__row {
    display: flex; gap: 14px; align-items: flex-start;
    padding-right: 28px;
  }
  .sl-login-prompt__icon {
    flex-shrink: 0;
    width: 44px; height: 44px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(78,116,217,0.10);
    border: 1px solid rgba(78,116,217,0.28);
    color: #2f4ea8;
  }
  [data-theme="dark"] .sl-login-prompt__icon {
    background: rgba(143,178,255,0.10);
    border-color: rgba(143,178,255,0.30);
    color: #8fb2ff;
  }
  .sl-login-prompt h4 {
    font-family: 'Sora', sans-serif; font-size: 0.95rem; font-weight: 600;
    letter-spacing: -0.02em; margin: 0 0 4px;
    color: inherit;
  }
  .sl-login-prompt p {
    font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1.55;
    margin: 0 0 12px; opacity: 0.72;
    color: inherit;
  }
  .sl-login-prompt__actions { display: flex; gap: 8px; }

/* Source: longtermtrends/ltt/pages/tools/macro_tools/html/asset-alloc.html */
  /* ---------- Page-specific: iframe frame, loader, reconnect modal ---------- */
  @keyframes spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  .mc-app-frame {
    position: relative;
    width: 100%;
    height: calc(100vh - 76px);
    min-height: 560px;
    overflow: hidden;
  }

  #streamlit-iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: none;
    background: transparent;
  }

  #loading-spinner {
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    flex-direction: column;
    align-items: center;
    z-index: 10;
  }
  #loading-spinner .mc-spinner {
    width: 40px; height: 40px;
    border: 4px solid rgba(127, 110, 78, 0.18);
    border-top: 4px solid #2f4ea8;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
  #loading-spinner p {
    margin-top: 15px;
    font-size: 15px;
    opacity: 0.7;
  }

  #error-message {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px 24px;
    border-radius: 12px;
    text-align: center;
    max-width: 90%;
    background: rgba(199, 90, 74, 0.10);
    border: 1px solid rgba(199, 90, 74, 0.32);
    color: #c75a4a;
  }
  .sl-void[data-void="dark"] #error-message {
    background: rgba(232, 115, 95, 0.12);
    border-color: rgba(232, 115, 95, 0.32);
    color: #e8735f;
  }

  /* Scroll-hand animation */
  .mc-scroll-hand {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 600ms ease;
    background: radial-gradient(circle, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.15) 50%, transparent 70%);
  }
  .mc-scroll-hand.visible {
    opacity: 1;
  }
  .mc-scroll-hand.hidden {
    opacity: 0;
  }
  .mc-scroll-hand svg {
    width: 80px;
    height: 80px;
    animation: mc-scroll-bounce 1.6s ease-in-out infinite;
    filter: drop-shadow(0 4px 16px rgba(0,0,0,0.3));
  }
  .mc-scroll-hand span {
    display: block;
    text-align: center;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    color: rgba(255,255,255,0.9);
    margin-top: 8px;
    text-shadow: 0 1px 6px rgba(0,0,0,0.5);
    letter-spacing: 0.06em;
  }
  @keyframes mc-scroll-bounce {
    0%, 100% { transform: translateY(0); opacity: 1; }
    40%      { transform: translateY(14px); opacity: 1; }
    60%      { transform: translateY(14px); opacity: 1; }
    80%      { transform: translateY(0); opacity: 0.7; }
  }
  @keyframes mc-scroll-fade-in {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1); }
  }

  /* Reconnection overlay — styling preserved from legacy auth-modal pattern */
  .reconnect-overlay {
    display: none;
    position: fixed;
    z-index: 10002;
    top: 0; left: 0; right: 0; bottom: 0;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.5);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .reconnect-container {
    background-color: #fffdf9;
    border-radius: 16px;
    padding: 40px;
    margin: 0 16px;
    width: 400px;
    max-width: 90vw;
    text-align: center;
    border: 1px solid rgba(53, 40, 24, 0.10);
    box-shadow: 0 24px 64px rgba(75, 54, 24, 0.24);
  }
  .sl-void[data-void="dark"] .reconnect-container {
    background-color: #161a22;
    border-color: rgba(180, 186, 198, 0.22);
    color: #f5efe3;
  }
  .reconnect-icon  { font-size: 48px; margin-bottom: 16px; }
  .reconnect-title {
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 32px;
    margin: 0 0 16px 0;
  }
  .reconnect-message {
    font-size: 15px;
    line-height: 24px;
    opacity: 0.75;
    margin: 0 0 24px 0;
  }
  .reconnect-button {
    height: 48px;
    width: 100%;
    background-color: #2f4ea8;
    color: #ffffff;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    transition: background-color 160ms ease;
  }
  .reconnect-button:hover { background-color: #3a5cc0; }

/* Source: longtermtrends/ltt/pages/tools/weekly_macro_report/html/macro-report.html */
  /* Macro report: tradingview-widget spacing tweaks */
  .tradingview-heatmap { margin-bottom: 40px !important; }
  .tradingview-heatmap:has(tv-economic-map) .chart {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
  }
  /* SL chart-surface material around TradingView widget cards.
     Scoped to `.chart-item` so the ticker tape (which lives in
     `.sl-ticker-tape`, NOT inside a `.chart-item`) stays borderless.
     `overflow:hidden` clips the injected iframe to the rounded corners.
     Gradients mirror `.sl-chart-surface` in sl-system.css so
     `<tv-economic-map transparent>` shows the bloom gradient through
     (matching our Highcharts chart surfaces), while the opaque embed
     heatmaps simply render on top of the gradient with no visual
     change. */
  .chart-item.tradingview-heatmap .tradingview-widget-container {
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(53, 40, 24, 0.10);
    background:
      radial-gradient(ellipse 80% 40% at 50% 0%, rgba(238, 214, 160, 0.32), transparent 60%),
      linear-gradient(180deg, #fffdf9 0%, #faf6ef 100%);
    box-shadow:
      0 2px 0 #fff inset,
      0 -8px 32px rgba(238, 214, 160, 0.18),
      0 12px 32px rgba(86, 59, 27, 0.06);
  }
  html[data-theme="dark"] .chart-item.tradingview-heatmap .tradingview-widget-container {
    border-color: rgba(180, 186, 198, 0.22);
    background:
      radial-gradient(ellipse 90% 70% at 50% 0%, rgba(227, 197, 124, 0.18), transparent 65%),
      linear-gradient(180deg, rgba(34, 38, 46, 0.42) 0%, rgba(22, 26, 34, 0.32) 100%);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
  /* Ticker tape sits flush under the hero */
  .sl-ticker-tape { margin: 0 auto 24px; max-width: 80rem; padding: 0 1rem; }
  @media (min-width: 768px) { .sl-ticker-tape { padding: 0 1.5rem; } }
  @media (min-width: 1280px) { .sl-ticker-tape { padding: 0 2rem; } }

  /* Premium paywall — SL-styled replacement for the legacy
     `community/macro_reports/_premium_paywall.html` partial which used
     Tailwind grey cards + a lock SVG from `my_app/static/community/svg/`.
     The new partial lives at `tools/weekly_macro_report/html/_premium_paywall.html`
     so the macro report page is fully self-contained inside ltt/. */
  .sl-paywall {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 56px 32px;
    max-width: 540px;
    margin: 8px auto 0;
    text-align: center;
  }
  .sl-paywall__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px; height: 56px;
    border-radius: 999px;
    background: rgba(78, 116, 217, 0.10);
  }
  .sl-void[data-void="light"] .sl-paywall__icon { color: #3b5bb0; }
  .sl-void[data-void="dark"]  .sl-paywall__icon { color: #8fb2ff; background: rgba(143, 178, 255, 0.10); }
  .sl-paywall__icon svg { width: 26px; height: 26px; }
  .sl-paywall__copy {
    font-family: 'Sora', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
    max-width: 36ch;
  }
  .sl-void[data-void="light"] .sl-paywall__copy { color: #1f1811; }
  .sl-void[data-void="dark"]  .sl-paywall__copy { color: #f5efe3; }

  /* Breathing room between the AI-generated intro paragraph and the
     chart/widget below it. Applied scoped to this page since the macro
     report is the only surface that stacks a prose block directly above
     a chart container without an interstitial heading. */
  .sl-section > .sl-prose { margin-bottom: 28px; }
