/* ==========================================================================
   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: #1f1811;
  --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: #f5efe3;
  --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-subset.479c8fec731b.woff2") format('woff2'),
       url("../bootstrap/css/fonts/Chomsky.281336652a32.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: #fcf8f0;

  /* Card material tokens — single source of truth for all card primitives.
     Primitives that read these: .sl-surface, .sl-data-card, .tv-affiliate,
     .sl-member-cta, .sl-stat, and .sl-chart-surface (base only; chart-surface
     stacks its own radial top-bloom on top of --sl-card-bg). */
  --sl-card-border: rgba(53,40,24,0.10);
  --sl-card-bg: #ffffff;
  --sl-card-shadow: 0 2px 0 #fff inset, 0 12px 32px rgba(86,59,27,0.06);
  --sl-card-backdrop: none;
  --sl-card-hover-border: rgba(201,162,39,0.28);
  --sl-card-hover-shadow: 0 24px 64px rgba(75,54,24,0.14), 0 0 52px rgba(201,162,39,0.18);

  /* Compact gold data-control state ladder. */
  --sl-data-control-ghost-bg: rgba(166,126,36,0.07);
  --sl-data-control-ghost-text: #8a6620;
  --sl-data-control-ghost-ring: inset 0 0 0 1px rgba(166,126,36,0.34);
  --sl-filter-inactive-text: #534838;
  --sl-filter-inactive-ring: inset 0 0 0 1px rgba(53,40,24,0.14);

  /* Chart-surface shadow stack — un-scoped so surface :hover wins on specificity.
     Light keeps the upward warm halo (`0 -8px 32px`) as its resting signature. */
  --sl-chart-shadow: 0 2px 0 #fff inset, 0 -8px 32px rgba(238,214,160,0.18), 0 12px 32px rgba(86,59,27,0.06);
}
.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);

  --sl-card-border: rgba(180,186,198,0.22);
  --sl-card-bg: linear-gradient(180deg, rgba(34,38,46,0.42) 0%, rgba(22,26,34,0.32) 100%);
  --sl-card-shadow: 0 4px 24px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.06);
  --sl-card-backdrop: blur(22px) saturate(115%);
  --sl-card-hover-border: rgba(141,181,255,0.38);
  --sl-card-hover-shadow: 0 28px 72px rgba(0,0,0,0.48), 0 0 60px rgba(141,181,255,0.28);

  --sl-data-control-ghost-bg: rgba(231,180,74,0.08);
  --sl-data-control-ghost-text: #e3c57c;
  --sl-data-control-ghost-ring: inset 0 0 0 1px rgba(231,180,74,0.32);
  --sl-filter-inactive-text: #aca193;
  --sl-filter-inactive-ring: inset 0 0 0 1px rgba(255,255,255,0.14);

  /* Chart-surface shadow stack — dark mode mirrors --sl-card-shadow (no warm halo on dark). */
  --sl-chart-shadow: 0 4px 24px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.06);
}

/* Cursor glow — fixed overlay, follows mouse (void-level only; never applied to surfaces on hover) */
.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; }
.sl-eyebrow--inline {
  display: inline-flex;
  margin: 0;
}
.sl-eyebrow--subtle {
  opacity: 0.45;
}

/* ==========================================================
   Prose scoping — ONLY inside .sl-prose, never on .sl-void

   Width contract: body prose caps at 900 px by default for reading-
   comfort reasons (≈90 ch at 16 px Inter, upper bound of comfortable
   line length). This clamp applies to every .sl-prose, including those
   inside an xl 2-col grid — the `minmax(0,1fr)` track still wins when
   the 1fr computes narrower than 900 px (≈864 px at xl on max-w-7xl),
   because grid track sizing resolves before item max-width. Below xl
   the grid collapses to 1-col, and the 900 px clamp kicks in. Do NOT
   reintroduce inline `style="max-width:...px;"` on .sl-prose.
   ========================================================== */
.sl-prose { max-width: 900px; }
.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; }
/* Feature 05: the Privacy Policy and Terms of Use have several paragraphs per
   section; separate them. Other prose pages keep their spacing. */
.sl-prose--legal p + p,
.sl-prose--legal ul + p,
.sl-prose--legal p + ul { margin-top: 14px; }
.sl-prose--legal [id] { scroll-margin-top: 96px; }
/* Feature 05B (gate Q46, updated 2026-10-27): /newsletter/ puts the intro
   and the one-column archive on the left and the sign-up card top right.
   Below 900 px (with the hero grids) the card follows the intro, before the archive. Pro (no
   card): one column. (Not sticky: .sl-void's overflow-x would stop it.) */
.sl-newsletter-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
  grid-template-areas: "intro card" "archive card";
  column-gap: 56px;
  row-gap: 56px;
  align-items: start;
}
.sl-newsletter-grid__intro { grid-area: intro; }
.sl-newsletter-grid__card { grid-area: card; }
.sl-newsletter-grid__archive { grid-area: archive; }
.sl-newsletter-grid--single {
  grid-template-columns: minmax(0, 760px);
  grid-template-areas: "intro" "archive";
}

/* ==========================================================
   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; }
/* Visually hidden, still read by screen readers and search engines. Same rules
   as Tailwind's runtime utility, so it also holds before or without JavaScript. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* 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: 3px;
  font-size: 13px;
  line-height: 1.2;
  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;
  /* Staging CR2-F2 (05B, 2026-10-28): a solid base under the tinted colour, so the
     header's buttons do not show through; the tint is the inline background-image. */
  background-color: #fffefc;
  box-shadow: 0 12px 32px rgba(75, 54, 24, 0.14);
  padding: 12px 20px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
}
[data-theme="dark"] .sl-profile-toast { background-color: #1a1e25; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); }
/* Staging CR3-O2 (05B, 2026-10-28): lighter text on the dark toast for AA contrast
   (about 6.2:1 and 5.1:1); !important beats the template's inline light-theme colour. */
[data-theme="dark"] .sl-profile-toast--ok { color: #6cc08a !important; }
[data-theme="dark"] .sl-profile-toast--error { color: #e07a6a !important; }
.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;
  padding-top: 8px;
  max-width: 60ch;
}
.sl-void[data-void="light"] .sl-faq-answer {
  color: rgba(83,72,56,0.72);
}
.sl-void[data-void="dark"] .sl-faq-answer {
  color: rgba(172,161,147,0.82);
}
.sl-faq-answer a,
.sl-faq-answer .sl-inline-link {
  color: #2f4ea8;
  font-weight: inherit;
  text-decoration: none;
}
.sl-void[data-void="dark"] .sl-faq-answer a,
.sl-void[data-void="dark"] .sl-faq-answer .sl-inline-link {
  color: #8fb2ff;
}
.sl-faq-answer a:hover,
.sl-faq-answer .sl-inline-link:hover {
  text-decoration: underline;
}
.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 {
  margin-top: 3px !important;
  font-size: 11px;
  line-height: 1.2;
}
.sl-turnstile-container {
  display: flex;
  justify-content: center;
  width: 100%;
  max-height: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
  transition: max-height 180ms ease, margin 180ms ease, padding 180ms ease, opacity 120ms ease;
}
.sl-turnstile-container.is-interactive {
  max-height: 96px;
  min-height: 65px;
  margin: 16px 0;
  padding: 8px;
  opacity: 1;
  border: 1px solid rgba(53, 40, 24, 0.10);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.46);
}
[data-theme="dark"] .sl-turnstile-container.is-interactive {
  border-color: rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.sl-turnstile-container > div {
  width: 100%;
  min-width: 0;
}
.sl-turnstile-container iframe {
  display: block;
  max-width: 100%;
}
.sl-turnstile-container.is-complete {
  max-height: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  background: transparent;
  box-shadow: none;
}
/* Feature 05B (Q15.1 B): one error line under a sign-in form's button, from
   docs/features/mockups/05b-onboarding-follow-ups/assets/onboarding-05b.css. */
.ob-error-line { margin: 10px 0 12px; font: 400 13px/1.45 'Inter', sans-serif; color: #a3402f; text-align: left; }
[data-theme="dark"] .ob-error-line { color: #f19a8a; }

/* Feature 05: notice, body text and quiet button, ported from
   docs/features/mockups/05-onboarding-flow/assets/onboarding.css. The provider
   sign-in row and the sign-in / X email pages were removed (Feature 05B, Q7). */
.ob-notice {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px; margin: 0 0 16px; border-radius: 12px;
  background: rgba(78,116,217,0.07); border: 1px solid rgba(78,116,217,0.22);
  font: 400 13.5px/1.5 'Inter', sans-serif; color: #1f1811; text-align: left;
}
[data-theme="dark"] .ob-notice { color: #f5efe3; }
.ob-notice svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; color: #2f4ea8; }
[data-theme="dark"] .ob-notice svg { color: #8fb2ff; }
.ob-notice strong { display: block; margin-bottom: 2px; }
.ob-body {
  margin: 0 0 18px; text-align: center;
  font: 400 14.5px/1.55 'Inter', sans-serif; color: #534838;
}
[data-theme="dark"] .ob-body { color: #aca193; }
.ob-btn--quiet {
  box-sizing: border-box; width: 100%; padding: 10px; border: 0; cursor: pointer;
  background: transparent; color: #534838;
  font: 500 14px/1 'Inter', sans-serif;
}
.ob-btn--quiet:hover { color: #1f1811; }
[data-theme="dark"] .ob-btn--quiet { color: #aca193; }
[data-theme="dark"] .ob-btn--quiet:hover { color: #f5efe3; }
/* Feature 05 (Q36.8 B, Q36.16): modal title and buttons, ported from the same
   mockup stylesheet (the trial box that also used them was removed by Feature 108). */
.ob-title {
  margin: 0 0 8px; text-align: center;
  font-family: 'Sora', sans-serif; font-weight: 500; font-size: 1.25rem;
  letter-spacing: -0.04em; line-height: 1.2; color: #1f1811;
}
[data-theme="dark"] .ob-title { color: #f5efe3; }
.ob-body strong { color: #1f1811; font-weight: 600; }
[data-theme="dark"] .ob-body strong { color: #f5efe3; }
.ob-btn {
  box-sizing: border-box; width: 100%; height: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: 999px; border: 0; cursor: pointer;
  font: 700 15px/1 'Inter', sans-serif; text-decoration: none;
  transition: box-shadow 130ms ease;
}
.ob-btn--primary {
  color: #fff;
  background: linear-gradient(135deg, #2f5fc8 0%, #4f86ec 56%, #8dcbff 100%);
  box-shadow: 0 8px 20px rgba(36,78,166,0.22), inset 0 1px 0 rgba(255,255,255,0.18);
}
.ob-btn--primary: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"] .ob-btn--primary { background: linear-gradient(135deg, #2c4f9e 0%, #487de0 56%, #78c6ff 100%); }
.ob-btn.ob-btn--quiet { height: auto; font-weight: 500; font-size: 14px; }
.ob-btn + .ob-btn { margin-top: 10px; }
.ob-left { text-align: left; }
/* Feature 05 (Q36.6 C, Q36.10 A, Q36.11 A): first-purchase screen,
   celebration and (05B) the feedback question inside it. Ported from the same mockup stylesheet; behavior in
   ltt/js/ltt-onboarding.js and ltt/js/ltt-celebrate.js. */
.ob-thanks[hidden], .ob-ask [hidden] { display: none !important; }
.modal-overlay.ob-thanks { align-items: center; padding: 24px 0; }
.ob-thanks .modal-container {
  box-sizing: border-box; max-width: calc(100% - 32px);
  max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow-y: auto;
}
.ob-thanks--purchase .modal-container { width: 480px; }
@media (max-width: 480px) { .ob-thanks .modal-container { padding: 32px 20px 24px; } }
.ob-close { background: transparent; border: 0; cursor: pointer; font: inherit; }
.ob-close:focus-visible { outline: 2px solid #2f5fc8; outline-offset: 2px; }
.ob-fine { margin: 12px 0 0; text-align: center; font: 400 12.5px/1.5 'Inter', sans-serif; color: #7b6f61; }
[data-theme="dark"] .ob-fine { color: #8f8576; }
.ob-fine a, .ob-body a, .ob-link { color: #2f4ea8; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
[data-theme="dark"] .ob-fine a, [data-theme="dark"] .ob-body a, [data-theme="dark"] .ob-link { color: #8fb2ff; }
.ob-fine.ob-left { text-align: left; }
.ob-fine strong { color: #1f1811; font-weight: 600; }
[data-theme="dark"] .ob-fine strong { color: #f5efe3; }
.ob-mt { margin-top: 10px; }
.ob-row { display: flex; gap: 8px; align-items: center; }
.ob-btn--sm { height: 38px; width: auto; padding: 0 18px; }
.ob-inline-btn, .ob-row .ob-btn + .ob-btn { width: auto; margin: 0; }
/* Celebration: drawn check (ring then tick) with a short glow. */
.ob-check { width: 76px; height: 76px; margin: 0 auto 16px; position: relative; }
.ob-check svg { width: 100%; height: 100%; overflow: visible; }
.ob-check__ring { fill: none; stroke: #b67928; stroke-width: 3; stroke-dasharray: 220; stroke-dashoffset: 220; }
.ob-check__tick { fill: none; stroke: #2f5fc8; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; }
[data-theme="dark"] .ob-check__ring { stroke: #e3c57c; }
[data-theme="dark"] .ob-check__tick { stroke: #6b9fff; }
.ob-check::before {
  content: ""; position: absolute; inset: -14px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,162,39,0.32), rgba(78,116,217,0.12) 55%, transparent 72%);
  opacity: 0; transform: scale(0.6);
}
.is-playing .ob-check__ring { animation: ob-draw 700ms ease-out forwards; }
.is-playing .ob-check__tick { animation: ob-draw 420ms 520ms ease-out forwards; }
.is-playing .ob-check::before { animation: ob-glow 1200ms 400ms ease-out forwards; }
.ob-confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 40; }
@keyframes ob-draw { to { stroke-dashoffset: 0; } }
@keyframes ob-glow { 0% { opacity: 0; transform: scale(0.6); } 40% { opacity: 1; transform: scale(1.05); } 100% { opacity: 0; transform: scale(1.25); } }
/* Personal note and first steps (first-purchase screen). */
.ob-note {
  margin: 0 0 18px; padding: 18px 20px; border-radius: 14px; text-align: left;
  background: linear-gradient(180deg, rgba(201,162,39,0.07), transparent 80%), rgba(53,40,24,0.03);
  border: 1px solid rgba(201,162,39,0.22);
  font: 400 14.5px/1.65 'Inter', sans-serif; color: #1f1811;
}
[data-theme="dark"] .ob-note { background: linear-gradient(180deg, rgba(201,162,39,0.07), transparent 80%), rgba(255,255,255,0.03); color: #f5efe3; }
.ob-note p { margin: 0 0 10px; }
.ob-note__sig { margin-top: 12px; font: italic 500 17px/1 'Sora', sans-serif; letter-spacing: -0.02em; }
.ob-note__role { font: 400 12px/1.4 'Inter', sans-serif; color: #7b6f61; }
[data-theme="dark"] .ob-note__role { color: #8f8576; }
/* Feedback question at the end of the first-purchase screen (05B Q15.4 A). */
.ob-ask { margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid rgba(53,40,24,0.10); text-align: left; }
[data-theme="dark"] .ob-ask { border-top-color: rgba(255,255,255,0.10); }
.ob-ask .ob-title { font-size: 1.05rem; margin: 0 0 4px; text-align: left; }
.ob-ask .ob-title:focus { outline: none; }
.ob-ask .ob-fine { margin-top: 0; }
.ob-ask .ob-notice { margin: 10px 0 0; }
.ob-textarea {
  box-sizing: border-box; width: 100%; min-height: 70px; padding: 10px 12px; resize: vertical;
  border-radius: 12px; border: 1px solid rgba(53,40,24,0.16); background: #fff; color: #1f1811;
  font: 400 14px/1.45 'Inter', sans-serif;
}
[data-theme="dark"] .ob-textarea { background: #12161c; border-color: rgba(255,255,255,0.14); color: #f5efe3; }
.ob-textarea:focus { outline: none; border-color: rgba(201,162,39,0.50); box-shadow: 0 0 0 3px rgba(201,162,39,0.10); }
[data-theme="dark"] .ob-textarea:focus { border-color: rgba(141,181,255,0.50); box-shadow: 0 0 0 3px rgba(141,181,255,0.10); }
/* Reduced motion: the check shows its final frame; no glow, no confetti. */
@media (prefers-reduced-motion: reduce) {
  /* Same specificity as the rules they override and later in the file, so no priority flags. */
  .ob-check__ring, .ob-check__tick { stroke-dashoffset: 0; }
  .is-playing .ob-check__ring, .is-playing .ob-check__tick, .is-playing .ob-check::before { animation: none; }
  .ob-confetti { display: none; }
}
/* Feature 05 T10 (Q36.17 F, wording B): public members page. The sky sits
   directly in the void (atmosphere, aria-hidden); below it the legend (05B Q77),
   the lists only for screen readers. Reduced motion: members-sky.js draws one still frame. */
.mp-hero { padding-top: 40px; }
.mp-hero .sl-lead { margin-top: 12px; }
.mp-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 18px; margin: 16px 0 0; font: 500 12px/1.4 'Inter', sans-serif; color: #7b6f61; }
[data-theme="dark"] .mp-legend { color: #8f8576; }
.mp-legend span { display: inline-flex; align-items: center; gap: 6px; }
.mp-legend__dim { opacity: 0.55; }
.mp-star { display: inline-flex; width: 11px; height: 11px; color: #b67928; }
[data-theme="dark"] .mp-star { color: #e3c57c; }
.mp-star svg { width: 100%; height: 100%; }
.mp-field { position: relative; height: 440px; margin: 10px 0 0; overflow: hidden; cursor: crosshair; touch-action: pan-y; }
.mp-field[hidden] { display: none; }
.mp-dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mp-name {
  position: absolute; top: 0; left: 0; white-space: nowrap; user-select: none; will-change: transform, opacity;
  display: inline-flex; align-items: center; gap: 4px; opacity: 0;
  font: 500 15px/1 'Sora', sans-serif; letter-spacing: -0.02em; color: #1f1811;
  transition: color 200ms ease, text-shadow 200ms ease;
}
[data-theme="dark"] .mp-name { color: #f5efe3; }
.mp-name--lifetime { font-weight: 600; }
.mp-name.is-lit { text-shadow: 0 0 14px rgba(201,162,39,0.35); }
[data-theme="dark"] .mp-name.is-lit { text-shadow: 0 0 14px rgba(141,181,255,0.45); }
/* 05B gate Q88 C: a click sparkles small gold stars (members-sky.js) instead of the ripple ring. */
.mp-spark { position: absolute; margin: -7px 0 0 -5px; font-size: 11px; line-height: 1; color: #b67928; pointer-events: none; opacity: 0; animation: mp-spark 1300ms ease-out forwards; }
.mp-spark--light { color: #e3c57c; font-size: 8px; }
[data-theme="dark"] .mp-spark { color: #e3c57c; }
[data-theme="dark"] .mp-spark--light { color: #f5e2a8; }
@keyframes mp-spark { 0% { transform: translate(0, 0) scale(0.5); opacity: 0; } 15% { opacity: 1; } 70% { opacity: 0.85; } 100% { transform: translate(var(--dx), var(--dy)) scale(1) rotate(40deg); opacity: 0; } }
.mp-section { padding-top: 10px; padding-bottom: 64px; }
/* 05B gate Q77: below the sky only the legend (and the profile line) shows;
   the name lists stay for screen readers and no-JavaScript visitors. */
.mp-foot { max-width: 820px; margin: 0 auto; text-align: center; }
.mp-foot .mp-legend { margin-top: 0; font-size: 13px; }
.mp-foot .ob-fine { margin-top: 14px; }
.mp-list--sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sl-void .mp-list h2 { margin: 16px 0 8px; font: 600 11px/1.2 'JetBrains Mono', monospace; letter-spacing: 0.08em; text-transform: uppercase; color: #534838; }
[data-theme="dark"] .sl-void .mp-list h2 { color: #aca193; }
.sl-void .mp-list h2:first-child { margin-top: 0; }
.mp-list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.mp-li { display: inline-flex; align-items: center; gap: 4px; font: 400 14px/1.5 'Inter', sans-serif; color: #1f1811; overflow-wrap: anywhere; }
[data-theme="dark"] .mp-li { color: #f5efe3; }
.mp-li--former { opacity: 0.5; }
.mp-empty { margin: 0; font: 400 12.5px/1.5 'Inter', sans-serif; color: #7b6f61; }
[data-theme="dark"] .mp-empty { color: #8f8576; }
@media (max-width: 480px) {
  .mp-field { height: 320px; }
}
@media (prefers-reduced-motion: reduce) { .mp-spark { display: none; } }
/* Feature 05 T4 (Q36.18 A, Q42, Q43): profile Members page card. */
.ob-link--sm { font: 400 13px/1.4 'Inter', sans-serif; }
.ob-label {
  display: block; margin: 0 0 6px;
  font: 600 11px/1.2 'JetBrains Mono', monospace; letter-spacing: 0.08em; text-transform: uppercase; color: #534838;
}
[data-theme="dark"] .ob-label { color: #aca193; }
.ob-preview {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%; box-sizing: border-box; padding: 10px 14px; border-radius: 12px;
  background: rgba(53,40,24,0.03); border: 1px solid rgba(53,40,24,0.10);
  font: 500 14px/1.2 'Sora', sans-serif; letter-spacing: -0.02em; color: #1f1811; overflow-wrap: anywhere;
}
[data-theme="dark"] .ob-preview { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.10); color: #f5efe3; }
.ob-preview::before { content: ""; flex-shrink: 0; width: 5px; height: 5px; border-radius: 50%; background: #c9a227; box-shadow: 0 0 8px rgba(201,162,39,0.8); }
.ob-masked { font-family: 'JetBrains Mono', monospace; font-size: 13.5px; letter-spacing: 0.01em; }
.ob-public-name { display: grid; grid-template-columns: 1fr; gap: 14px; }
.ob-public-name .ob-fine { margin-top: 8px; }
.ob-input {
  box-sizing: border-box; width: 100%; height: 44px; padding: 0 14px;
  border-radius: 12px; border: 1px solid rgba(53,40,24,0.16); background: #fff; color: #1f1811;
  font: 400 15px/1 'Inter', sans-serif;
}
[data-theme="dark"] .ob-input { background: #12161c; border-color: rgba(255,255,255,0.14); color: #f5efe3; }
.ob-input:focus { outline: none; border-color: rgba(201,162,39,0.50); box-shadow: 0 0 0 3px rgba(201,162,39,0.10); }
[data-theme="dark"] .ob-input:focus { border-color: rgba(141,181,255,0.50); box-shadow: 0 0 0 3px rgba(141,181,255,0.10); }
.ob-field-error { margin: 6px 0 0; font: 400 12.5px/1.5 'Inter', sans-serif; color: #a3402f; }
[data-theme="dark"] .ob-field-error { color: #f19a8a; }
.ob-checkrow { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; font: 400 14px/1.45 'Inter', sans-serif; color: #534838; cursor: pointer; }
[data-theme="dark"] .ob-checkrow { color: #aca193; }
.ob-checkrow input { width: 18px; height: 18px; margin: 1px 0 0; flex-shrink: 0; accent-color: #2f5fc8; }
.ob-members-card .ob-checkrow { margin-top: 0; }
.ob-members-card .ob-notice { margin: 0; }
.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-surface {
  border: 1px solid var(--sl-card-border);
  background: var(--sl-card-bg);
  box-shadow: var(--sl-card-shadow);
  backdrop-filter: var(--sl-card-backdrop);
  -webkit-backdrop-filter: var(--sl-card-backdrop);
}
.sl-surface--hover:hover {
  border-color: var(--sl-card-hover-border);
  box-shadow: var(--sl-card-hover-shadow);
}

/* --- 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;
}
/* Chart surface = card material + radial top-bloom. Border + box-shadow live on
   the un-scoped rule (specificity 0,1,0) so `.sl-chart-surface:hover` (0,2,0)
   wins cleanly on both modes. Mode-scoped rules below carry the `background`
   only — the radial bloom colors differ per mode and can't be tokenized into a
   single var without losing the per-mode alpha tuning. */
.sl-chart-surface {
  border: 1px solid var(--sl-card-border);
  box-shadow: var(--sl-chart-shadow);
  backdrop-filter: var(--sl-card-backdrop);
  -webkit-backdrop-filter: var(--sl-card-backdrop);
}
.sl-void[data-void="light"] .sl-chart-surface {
  background:
    radial-gradient(ellipse 60% 28% at 50% 0%, rgba(238,214,160,0.32), transparent 60%),
    var(--sl-card-bg);
}
.sl-void[data-void="dark"] .sl-chart-surface {
  background:
    radial-gradient(ellipse 70% 48% at 50% 0%, rgba(227,197,124,0.18), transparent 65%),
    var(--sl-card-bg);
}
.sl-network-chart {
  height: clamp(340px, 92vw, 380px);
  min-width: 310px;
}
@media (min-width: 768px) {
  .sl-network-chart {
    height: clamp(460px, 54vw, 680px);
  }
}

/* --- Data card (no bloom, centered content) ---
   Sidebar contract (see refactor/docs/gotchas.md, Frontend section, 2026-05-03):
     1. Asymmetric padding (top 20 / bottom 14) — pairs with `.sl-data-row:last-child
        { padding-bottom: 0 }` below to collapse trailing whitespace below the last row.
     2. `align-self: start` (rule below) keeps the card from stretching to match the
        prose column height in chart-page grids.
     3. Trailing-row separator killed at themed specificity via the `:last-child`
        rule below; plain-class overrides lose to `.sl-void[data-void=...]`.
   Don't undo any of the three without re-reading the gotcha — they're load-bearing
   together, easy to accidentally regress. */
.sl-data-card {
  border-radius: 22px; padding: 20px 22px 14px; text-align: center;
  transition: background 400ms ease, border-color 400ms ease, box-shadow 400ms ease;
}
.sl-data-card {
  border: 1px solid var(--sl-card-border);
  background: var(--sl-card-bg);
  box-shadow: var(--sl-card-shadow);
  backdrop-filter: var(--sl-card-backdrop);
  -webkit-backdrop-filter: var(--sl-card-backdrop);
}

/* --- Unified hover for chart-surface + data-card --- */
.sl-chart-surface:hover,
.sl-data-card:hover {
  border-color: var(--sl-card-hover-border);
  box-shadow: var(--sl-card-hover-shadow);
  transform: none;
}

/* In grid/flex parent contexts (chart-page sidebars), data-card and the
   TradingView affiliate card should size to their own content rather than
   stretch to match the prose column's height. `align-self` is a no-op
   outside grid/flex containers, so this is safe for any non-sidebar use. */
.sl-data-card,
.tv-affiliate { align-self: start; }

/* ---------- 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); }
/* The themed `border-bottom` rules above carry higher specificity (class +
   attribute selector + descendant) than a plain `.sl-data-row:last-child`,
   so the trailing-row separator must be killed at matching specificity.
   `padding-bottom: 0` collapses the last row's trailing internal gap into the
   card's bottom padding so the trailing whitespace doesn't double up. */
.sl-data-row:last-child,
.sl-void[data-void="light"] .sl-data-row:last-child,
.sl-void[data-void="dark"] .sl-data-row:last-child { border-bottom: 0; padding-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-home-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
  gap: 56px;
  align-items: center;
}
.sl-home-hero-grid--single {
  grid-template-columns: minmax(0, 760px);
  justify-content: start;
}
.sl-home-auth-card {
  min-height: 0;
}
.sl-membership-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
  gap: 56px;
  align-items: center;
}
.sl-membership-hero-grid--single {
  grid-template-columns: minmax(0, 760px);
  justify-content: center;
}
.sl-membership-auth-card {
  min-height: 0;
}
.sl-home-community-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  max-width: 560px;
}
.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-retrying .sl-spinner {
  width: 38px;
  height: 38px;
  background: conic-gradient(from 0deg, rgba(200,158,61,0) 0%, rgba(200,158,61,0.9) 100%);
}
.sl-void[data-void="dark"] .sl-chart-loader.is-retrying .sl-spinner {
  background: conic-gradient(from 0deg, rgba(231,180,74,0) 0%, rgba(231,180,74,0.95) 100%);
}
.sl-chart-loader.is-retrying .sl-loader-text {
  color: rgba(53,40,24,0.78);
}
.sl-void[data-void="dark"] .sl-chart-loader.is-retrying .sl-loader-text {
  color: rgba(255,255,255,0.58);
}
.sl-chart-loader.is-error .sl-spinner {
  display: none;
}
.sl-chart-loader.is-error .sl-loader-text {
  width: min(430px, calc(100% - 40px));
  text-align: center;
  pointer-events: auto;
  text-transform: none;
  letter-spacing: 0;
}
.sl-chart-loader.is-error {
  pointer-events: auto;
  padding: 20px;
}
.sl-error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 4px;
}
.sl-error-title {
  font-family: 'Sora', sans-serif;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 500;
  color: #1f1811;
}
.sl-error-message {
  max-width: 38ch;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #534838;
}
.sl-error-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
}
.sl-error-action {
  white-space: nowrap;
}
.sl-report-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.sl-report-modal__overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(252,248,240,0.60);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
[data-theme="dark"] .sl-report-modal__overlay {
  background: rgba(8,17,30,0.70);
}
.sl-report-modal__content {
  position: relative;
  z-index: 1;
  background: #fffefc;
  border: 1px solid rgba(53,40,24,0.10);
  border-radius: 18px;
  padding: 36px 32px;
  width: 440px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 40px);
  overflow: auto;
  box-shadow: 0 24px 72px rgba(75,54,24,0.14);
  color: #1f1811;
  font-family: 'Inter', sans-serif;
  animation: sl-modal-in 300ms ease;
}
[data-theme="dark"] .sl-report-modal__content {
  background: #1a1e25;
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 24px 72px rgba(0,0,0,0.50);
  color: #f5efe3;
}

@keyframes sl-modal-in {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.sl-report-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: 0;
  width: 28px;
  height: 28px;
  margin: -8px;
  border-radius: 8px;
  font-size: 24px;
  color: #534838;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: background 130ms ease;
}
.sl-report-modal__close:hover {
  background: rgba(53,40,24,0.06);
}
.sl-report-modal h3 {
  margin: 12px 38px 12px;
  font-family: 'Sora', sans-serif;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.2;
  text-align: center;
  color: #1f1811;
}
.sl-report-modal__desc {
  margin: 0 auto 22px;
  max-width: 35ch;
  color: #534838;
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
}
.sl-report-modal__page {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 20px;
  padding: 12px 14px;
  border: 1px solid rgba(53,40,24,0.08);
  border-radius: 12px;
  background: rgba(53,40,24,0.03);
}
.sl-report-modal__page span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #70665b;
}
.sl-report-modal__page strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  color: #1f1811;
}
.sl-report-modal__textarea {
  width: 100%;
  min-height: 132px;
  padding: 12px;
  border: 1px solid rgba(53,40,24,0.14);
  border-radius: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  line-height: 1.5;
  background: rgba(53,40,24,0.035);
  color: #534838;
  resize: vertical;
  margin-top: 10px;
}
.sl-report-modal__textarea:focus {
  outline: none;
  border-color: rgba(201,162,39,0.50);
  box-shadow: 0 0 0 3px rgba(201,162,39,0.10);
  background: rgba(255,255,255,0.80);
}
.sl-report-modal__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}
.sl-report-modal__submit {
  margin: 0;
  text-decoration: none;
}
.sl-report-modal__cancel {
  margin: 0;
}
.sl-report-modal__details {
  border-top: 1px solid rgba(53,40,24,0.10);
  padding-top: 12px;
}
.sl-report-modal__details summary {
  cursor: pointer;
  color: rgba(83,72,56,0.72);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sl-report-modal__details summary:hover {
  color: #2f4ea8;
}
.sl-void[data-void="dark"] .sl-error-title,
[data-theme="dark"] .sl-report-modal h3,
[data-theme="dark"] .sl-report-modal__page strong {
  color: #f5efe3;
}
.sl-void[data-void="dark"] .sl-error-message,
[data-theme="dark"] .sl-report-modal__desc,
[data-theme="dark"] .sl-report-modal__page span {
  color: #aca193;
}
[data-theme="dark"] .sl-report-modal__close {
  color: #aca193;
}
[data-theme="dark"] .sl-report-modal__page {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .sl-report-modal__textarea {
  background: rgba(255,255,255,0.045);
  border-color: rgba(180,186,198,0.20);
  color: #f5efe3;
}
[data-theme="dark"] .sl-report-modal__textarea: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);
}
[data-theme="dark"] .sl-report-modal__details {
  border-top-color: rgba(180,186,198,0.18);
}
[data-theme="dark"] .sl-report-modal__details summary {
  color: #aca193;
}
[data-theme="dark"] .sl-report-modal__details summary:hover {
  color: #8fb2ff;
}

/* Shared chart embed modal. Geometry remains component-local; reusable
   typography lives here so the modal follows the frontend contract and passes
   the production inline-style gate. */
#ltt-embed-dialog {
  font-family: system-ui, -apple-system, sans-serif;
}
#ltt-embed-title {
  font-size: 17px;
  font-weight: 600;
}
#ltt-embed-view-toggle button {
  font-size: 12px;
  font-weight: 500;
}
#ltt-embed-view-toggle button[data-view="preview"] {
  font-weight: 600;
}
.ltt-embed-close {
  font-size: 22px;
  line-height: 1;
}
#ltt-embed-modal .ltt-embed-control-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
}
#ltt-embed-theme-tabs button,
#ltt-embed-scale-tabs button,
#ltt-embed-device-tabs button {
  font-size: 13px;
  font-weight: 500;
}
#ltt-embed-theme-tabs button[data-theme="light"],
#ltt-embed-scale-tabs button[data-scale="log"],
#ltt-embed-device-tabs button[data-device="desktop"] {
  font-weight: 600;
}
#ltt-embed-y-min,
#ltt-embed-y-max,
#ltt-embed-width,
#ltt-embed-height {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
}
#ltt-embed-width,
#ltt-embed-height {
  font-weight: 400;
}
#ltt-embed-y-axis-hint {
  font-size: 11px;
}
#ltt-embed-container-label > span,
#ltt-embed-limits-label > span,
#ltt-embed-navigator-toggle > span {
  font-size: 12px;
}
#ltt-embed-width-label,
#ltt-embed-height-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
#ltt-embed-width-group > span,
#ltt-embed-height-group > span {
  font-size: 12px;
}
#ltt-embed-zoom-bar > button {
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}
#ltt-embed-zoom-select {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
}
#ltt-embed-zoom-menu button {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
}
#ltt-embed-code-large {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1.6;
}
#ltt-embed-copy-btn-large {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
}
#ltt-embed-copy-tooltip {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
}
[data-theme="dark"] #ltt-embed-modal > div:first-child {
  background: rgba(8,17,30,0.70) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
[data-theme="dark"] #ltt-embed-dialog {
  background: #1a1e25 !important;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px !important;
  box-shadow: 0 24px 72px rgba(0,0,0,0.50) !important;
  color: #f5efe3;
}
[data-theme="dark"] #ltt-embed-title {
  color: #f5efe3 !important;
}
[data-theme="dark"] #ltt-embed-modal .ltt-embed-control-label,
[data-theme="dark"] #ltt-embed-size-inputs label,
[data-theme="dark"] #ltt-embed-header span {
  color: #aca193 !important;
}
[data-theme="dark"] #ltt-embed-view-toggle,
[data-theme="dark"] #ltt-embed-theme-tabs,
[data-theme="dark"] #ltt-embed-scale-tabs,
[data-theme="dark"] #ltt-embed-device-tabs,
[data-theme="dark"] #ltt-embed-zoom-bar {
  background: rgba(255,255,255,0.045) !important;
  border-color: rgba(255,255,255,0.10) !important;
}
[data-theme="dark"] #ltt-embed-header button[onclick*="display='none'"] {
  color: #aca193 !important;
}
[data-theme="dark"] #ltt-embed-header button[onclick*="display='none'"]:hover {
  color: #f5efe3 !important;
}
[data-theme="dark"] #ltt-embed-y-min,
[data-theme="dark"] #ltt-embed-y-max,
[data-theme="dark"] #ltt-embed-width,
[data-theme="dark"] #ltt-embed-height,
[data-theme="dark"] #ltt-embed-chart-select,
[data-theme="dark"] #ltt-embed-range-slider-select,
[data-theme="dark"] #ltt-embed-code-large {
  /* background-color (not the `background` shorthand): the shorthand resets
     background-image to none, which wiped the <select> dropdown chevron in dark
     mode. Longhand keeps the chevron (set by .ltt-embed-select) intact. */
  background-color: rgba(255,255,255,0.045) !important;
  border-color: rgba(180,186,198,0.20) !important;
  color: #f5efe3 !important;
  color-scheme: dark;
}
[data-theme="dark"] #ltt-embed-y-min::placeholder,
[data-theme="dark"] #ltt-embed-y-max::placeholder {
  color: rgba(172,161,147,0.70);
}
[data-theme="dark"] #ltt-embed-y-min:focus,
[data-theme="dark"] #ltt-embed-y-max:focus,
[data-theme="dark"] #ltt-embed-width:focus,
[data-theme="dark"] #ltt-embed-height:focus,
[data-theme="dark"] #ltt-embed-chart-select:focus,
[data-theme="dark"] #ltt-embed-code-large:focus {
  background-color: rgba(255,255,255,0.06) !important;
  border-color: rgba(141,181,255,0.50) !important;
  box-shadow: 0 0 0 3px rgba(141,181,255,0.10) !important;
}
[data-theme="dark"] #ltt-embed-preview-area,
[data-theme="dark"] #ltt-embed-code-area,
[data-theme="dark"] #ltt-embed-footer {
  background: #1a1e25;
}
[data-theme="dark"] #ltt-embed-preview {
  box-shadow: 0 12px 34px rgba(0,0,0,0.30);
}
[data-theme="dark"] #ltt-embed-zoom-bar button {
  color: #aca193 !important;
}
[data-theme="dark"] #ltt-embed-zoom-bar button:hover,
[data-theme="dark"] #ltt-embed-zoom-pct {
  color: #f5efe3 !important;
}
[data-theme="dark"] #ltt-embed-container-toggle span,
[data-theme="dark"] #ltt-embed-range-slider-mode span {
  color: #aca193 !important;
}

#ltt-embed-modal .ltt-embed-select {
  box-sizing: border-box;
  height: 34px;
  padding: 0 28px 0 10px;
  border: 1px solid rgba(53,40,24,0.12);
  border-radius: 10px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a5a14' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 12px 12px;
  color: #111827;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
#ltt-embed-modal .ltt-embed-select--chart {
  width: 420px;
  max-width: min(420px, calc(100vw - 48px));
}
#ltt-embed-modal .ltt-embed-select--compact {
  width: 118px;
  min-width: 118px;
  max-width: 118px;
}
#ltt-embed-modal .ltt-embed-select:hover {
  border-color: rgba(201,162,39,0.34);
  background-color: #fffefc;
}
#ltt-embed-modal .ltt-embed-select:focus {
  border-color: rgba(201,162,39,0.55);
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(201,162,39,0.12);
}
#ltt-embed-modal .ltt-embed-select::-ms-expand {
  display: none;
}
[data-theme="dark"] #ltt-embed-modal .ltt-embed-select {
  background-color: rgba(255,255,255,0.045) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23e3c57c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  border-color: rgba(227,197,124,0.24) !important;
  color: #f5efe3 !important;
  color-scheme: dark;
}
[data-theme="dark"] #ltt-embed-modal .ltt-embed-select:hover,
[data-theme="dark"] #ltt-embed-modal .ltt-embed-select:focus {
  background-color: rgba(255,255,255,0.06) !important;
  border-color: rgba(227,197,124,0.55) !important;
  box-shadow: 0 0 0 3px rgba(227,197,124,0.12) !important;
}

@media (max-width: 520px) {
  .sl-report-modal {
    padding: 14px;
  }
  .sl-report-modal__content {
    padding: 32px 18px 24px;
  }
  .sl-error-actions {
    flex-direction: column;
    width: min(260px, 100%);
  }
}

@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;
}
.tv-affiliate {
  border: 1px solid var(--sl-card-border);
  background: var(--sl-card-bg);
  box-shadow: var(--sl-card-shadow);
  backdrop-filter: var(--sl-card-backdrop);
  -webkit-backdrop-filter: var(--sl-card-backdrop);
}
.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-affiliate:hover {
  border-color: var(--sl-card-hover-border);
  box-shadow: var(--sl-card-hover-shadow);
}

/* ==========================================================
   eToro affiliate banner — approved compact strip
   Version 4: logo left, reward value, headline, CTA right.
   ========================================================== */
.etoro-affiliate-preview {
  display: flex;
  flex-direction: column;
  margin: 0 auto 28px;
}

.etoro-affiliate {
  display: grid;
  position: relative;
  width: 100%;
  padding: 16px 28px;
  border: 1px solid var(--sl-card-border);
  border-radius: 20px;
  background: var(--sl-card-bg);
  box-shadow: var(--sl-card-shadow);
  backdrop-filter: var(--sl-card-backdrop);
  -webkit-backdrop-filter: var(--sl-card-backdrop);
  text-decoration: none;
  transition: border-color 240ms ease-out, box-shadow 240ms ease-out;
}

.etoro-affiliate__overlay-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.etoro-affiliate__overlay-link:focus-visible {
  outline: 2px solid #6b9fff;
  outline-offset: 3px;
}

.etoro-affiliate__partnership-link {
  position: relative;
  z-index: 2;
  pointer-events: auto;
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.etoro-affiliate:hover {
  border-color: var(--sl-card-hover-border);
  box-shadow: var(--sl-card-hover-shadow);
}

.etoro-affiliate__logo {
  display: block;
  width: 72px;
  height: auto;
  flex-shrink: 0;
}

.etoro-affiliate__brand-cluster {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  white-space: nowrap;
}

.etoro-affiliate__brand-plus {
  font-family: 'Sora', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
}

.etoro-affiliate__ltt-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: #000000;
}

.etoro-affiliate__ltt-logo img {
  display: block;
  width: 20px;
  height: auto;
  filter: invert(1);
  transform: translateX(1px);
}

.etoro-affiliate__notice {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

.etoro-affiliate__notice {
  font-size: 10.5px;
  line-height: 1.38;
}

.etoro-affiliate__notice {
  opacity: 0.72;
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.etoro-affiliate__subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.35;
  margin: 0;
}

.etoro-affiliate__figure {
  display: flex;
  align-items: center;
  gap: 14px;
}

.etoro-affiliate__figure::before {
  content: "";
  width: 3px;
  height: 44px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f0d77a, #b67928);
  flex-shrink: 0;
}

.etoro-affiliate__value {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  white-space: nowrap;
}

.etoro-affiliate__value-amount {
  font-family: 'Sora', sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.35rem);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.05em;
}

.etoro-affiliate__value-benefit {
  font-family: 'Sora', sans-serif;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0;
}

.etoro-affiliate__action {
  display: flex;
  align-items: flex-end;
}

.etoro-affiliate__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 18px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 200ms ease-out, border-color 200ms ease-out, color 200ms ease-out;
}

.etoro-affiliate--monument-split {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  align-items: center;
  gap: 10px 22px;
  min-height: 78px;
}

.etoro-affiliate--monument-split .etoro-affiliate__brand-cluster {
  grid-column: 1;
  grid-row: 1;
}

.etoro-affiliate--monument-split .etoro-affiliate__figure {
  grid-column: 2;
  grid-row: 1;
}

.etoro-affiliate--monument-split .etoro-affiliate__action {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}

.etoro-affiliate--monument-split .etoro-affiliate__notice {
  grid-column: 1 / -1;
  grid-row: 3;
  justify-self: start;
  text-align: left;
  max-width: none;
}

.etoro-affiliate--monument-split .etoro-affiliate__subtitle {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: start;
  text-align: left;
}

.sl-void[data-void="light"] .etoro-affiliate__brand-plus { color: #534838; }
.sl-void[data-void="dark"]  .etoro-affiliate__brand-plus { color: #aca193; }

.sl-void[data-void="light"] .etoro-affiliate__notice { color: #534838; }
.sl-void[data-void="dark"]  .etoro-affiliate__notice { color: #aca193; }

.sl-void[data-void="light"] .etoro-affiliate__subtitle { color: #1f1811; }
.sl-void[data-void="dark"]  .etoro-affiliate__subtitle { color: #f5efe3; }

.sl-void[data-void="light"] .etoro-affiliate__value { color: #1f1811; }
.sl-void[data-void="dark"]  .etoro-affiliate__value { color: #f5efe3; }

.sl-void[data-void="dark"] .etoro-affiliate__ltt-logo,
.sl-void[data-void="dark"] .coinbase-affiliate__ltt-logo {
  background: #f5efe3;
}

.sl-void[data-void="dark"] .etoro-affiliate__ltt-logo img,
.sl-void[data-void="dark"] .coinbase-affiliate__ltt-logo img {
  filter: none;
}

.sl-void[data-void="light"] .etoro-affiliate__cta {
  border: 1px solid rgba(78, 116, 217, 0.26);
  background: rgba(78, 116, 217, 0.07);
  color: #4e74d9;
}

.sl-void[data-void="light"] .etoro-affiliate:hover .etoro-affiliate__cta {
  border-color: rgba(78, 116, 217, 0.46);
  background: rgba(78, 116, 217, 0.14);
  color: #4e74d9;
}

.sl-void[data-void="dark"] .etoro-affiliate__cta {
  border: 1px solid rgba(107, 159, 255, 0.28);
  background: rgba(107, 159, 255, 0.08);
  color: #6b9fff;
}

.sl-void[data-void="dark"] .etoro-affiliate:hover .etoro-affiliate__cta {
  border-color: rgba(107, 159, 255, 0.48);
  background: rgba(107, 159, 255, 0.16);
  color: #6b9fff;
}

@media (min-width: 1120px) {
  .etoro-affiliate--monument-split .etoro-affiliate__notice {
    white-space: normal;
  }
}

@media (min-width: 761px) and (max-width: 900px) {
  .etoro-affiliate--monument-split {
    gap: 10px 14px;
  }

  .etoro-affiliate__logo {
    width: 66px;
  }

  .etoro-affiliate__ltt-logo {
    width: 32px;
    height: 32px;
  }

  .etoro-affiliate__ltt-logo img {
    width: 18px;
  }

  .etoro-affiliate__cta {
    padding-inline: 14px;
    font-size: 11px;
    letter-spacing: 0.06em;
  }

  .etoro-affiliate__figure {
    gap: 12px;
  }

  .etoro-affiliate__figure::before {
    height: 40px;
  }

  .etoro-affiliate__value {
    letter-spacing: -0.045em;
  }

  .etoro-affiliate__value-amount {
    font-size: 2rem;
    letter-spacing: -0.045em;
  }

  .etoro-affiliate__value-benefit {
    font-size: 1rem;
  }
}

@media (min-width: 601px) and (max-width: 760px) {
  .etoro-affiliate {
    padding-inline: 18px;
  }

  .etoro-affiliate--monument-split {
    gap: 10px 10px;
  }

  .etoro-affiliate__logo {
    width: 60px;
  }

  .etoro-affiliate__brand-cluster {
    gap: 7px;
  }

  .etoro-affiliate__ltt-logo {
    width: 30px;
    height: 30px;
  }

  .etoro-affiliate__ltt-logo img {
    width: 17px;
  }

  .etoro-affiliate__cta {
    height: 30px;
    padding-inline: 12px;
    font-size: 10px;
    letter-spacing: 0.05em;
  }

  .etoro-affiliate__figure {
    gap: 10px;
  }

  .etoro-affiliate__figure::before {
    height: 36px;
  }

  .etoro-affiliate__value {
    letter-spacing: -0.04em;
  }

  .etoro-affiliate__value-amount {
    font-size: 1.7rem;
    letter-spacing: -0.04em;
  }

  .etoro-affiliate__value-benefit {
    font-size: 0.92rem;
  }
}

@media (min-width: 541px) and (max-width: 600px) {
  .etoro-affiliate {
    padding-inline: 16px;
  }

  .etoro-affiliate--monument-split {
    gap: 10px 8px;
  }

  .etoro-affiliate__logo {
    width: 54px;
  }

  .etoro-affiliate__brand-cluster {
    gap: 6px;
  }

  .etoro-affiliate__ltt-logo {
    width: 28px;
    height: 28px;
  }

  .etoro-affiliate__ltt-logo img {
    width: 16px;
  }

  .etoro-affiliate__cta {
    height: 28px;
    padding-inline: 10px;
    font-size: 9px;
    letter-spacing: 0.04em;
  }

  .etoro-affiliate__figure {
    gap: 8px;
  }

  .etoro-affiliate__figure::before {
    height: 34px;
  }

  .etoro-affiliate__value {
    letter-spacing: -0.04em;
  }

  .etoro-affiliate__value-amount {
    font-size: 1.55rem;
    letter-spacing: -0.04em;
  }

  .etoro-affiliate__value-benefit {
    font-size: 0.82rem;
  }
}

@media (min-width: 441px) and (max-width: 540px) {
  .etoro-affiliate {
    padding-inline: 15px;
  }

  .etoro-affiliate--monument-split {
    gap: 10px 6px;
  }

  .etoro-affiliate__logo {
    width: 50px;
  }

  .etoro-affiliate__brand-cluster {
    gap: 6px;
  }

  .etoro-affiliate__ltt-logo {
    width: 28px;
    height: 28px;
  }

  .etoro-affiliate__ltt-logo img {
    width: 16px;
  }

  .etoro-affiliate__cta {
    height: 27px;
    padding-inline: 8px;
    font-size: 8.5px;
    letter-spacing: 0.035em;
  }

  .etoro-affiliate__figure {
    gap: 6px;
  }

  .etoro-affiliate__figure::before {
    height: 32px;
  }

  .etoro-affiliate__value {
    letter-spacing: -0.04em;
  }

  .etoro-affiliate__value-amount {
    font-size: 1.45rem;
    letter-spacing: -0.04em;
  }

  .etoro-affiliate__value-benefit {
    font-size: 0.78rem;
  }
}

@media (max-width: 488px) {
  .etoro-affiliate--monument-split {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto auto;
    gap: 8px 9px;
  }

  .etoro-affiliate--monument-split .etoro-affiliate__brand-cluster {
    grid-column: 1 / 3;
    grid-row: 1;
  }

  .etoro-affiliate--monument-split .etoro-affiliate__figure {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: start;
  }

  .etoro-affiliate--monument-split .etoro-affiliate__action {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .etoro-affiliate--monument-split .etoro-affiliate__notice {
    grid-column: 1 / -1;
    grid-row: 4;
    justify-self: start;
    text-align: left;
    max-width: 62rem;
  }

  .etoro-affiliate--monument-split .etoro-affiliate__subtitle {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: start;
    text-align: left;
  }
}

@media (max-width: 488px) {
  .etoro-affiliate-preview {
    margin-bottom: 22px;
  }

  .etoro-affiliate {
    padding: 13px 16px 14px;
    border-radius: 16px;
    text-align: left;
  }

  .etoro-affiliate__logo {
    width: 62px;
  }

  .etoro-affiliate__brand-cluster {
    gap: 7px;
  }

  .etoro-affiliate__ltt-logo {
    width: 30px;
    height: 30px;
  }

  .etoro-affiliate__ltt-logo img {
    width: 17px;
  }

  .etoro-affiliate__notice {
    font-size: 9px;
    line-height: 1.32;
  }

  .etoro-affiliate__subtitle {
    font-size: 0.9rem;
    line-height: 1.3;
  }

  .etoro-affiliate__cta {
    height: 28px;
    padding: 0 13px;
    font-size: 10px;
    letter-spacing: 0.05em;
  }

  .etoro-affiliate__value {
    letter-spacing: -0.04em;
    white-space: nowrap;
  }

  .etoro-affiliate__value-amount {
    font-size: 1.66rem;
    letter-spacing: -0.04em;
  }

  .etoro-affiliate__value-benefit {
    font-size: 0.92rem;
  }

  .etoro-affiliate--monument-split {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto auto;
    align-items: center;
    gap: 7px 8px;
  }

  .etoro-affiliate--monument-split .etoro-affiliate__brand-cluster {
    grid-column: 1 / 3;
    grid-row: 1;
    align-self: start;
    margin-top: 2px;
  }

  .etoro-affiliate--monument-split .etoro-affiliate__figure {
    grid-column: 1 / -1;
    grid-row: 2;
    gap: 6px;
    justify-self: start;
  }

  .etoro-affiliate--monument-split .etoro-affiliate__figure::before {
    width: 3px;
    height: 30px;
  }

  .etoro-affiliate--monument-split .etoro-affiliate__action {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .etoro-affiliate--monument-split .etoro-affiliate__notice {
    grid-column: 1 / -1;
    grid-row: 4;
    text-align: left;
    max-width: 62ch;
  }

  .etoro-affiliate--monument-split .etoro-affiliate__subtitle {
    grid-column: 1 / -1;
    grid-row: 3;
    text-align: left;
  }
}

@media (min-width: 441px) and (max-width: 488px) {
  .etoro-affiliate__subtitle {
    font-size: 0.95rem;
    line-height: 1.35;
  }
}

@media (max-width: 380px) {
  .etoro-affiliate {
    padding-inline: 14px;
  }

  .etoro-affiliate__logo {
    width: 56px;
  }

  .etoro-affiliate__brand-cluster {
    gap: 6px;
  }

  .etoro-affiliate__ltt-logo {
    width: 28px;
    height: 28px;
  }

  .etoro-affiliate__ltt-logo img {
    width: 16px;
  }

  .etoro-affiliate__value {
    gap: 8px;
  }

  .etoro-affiliate__value-amount {
    font-size: 1.44rem;
  }

  .etoro-affiliate__value-benefit {
    font-size: 0.84rem;
  }

  .etoro-affiliate__cta {
    padding-inline: 11px;
    font-size: 9px;
  }
}

/* ==========================================================
   Coinbase affiliate banner — Bitcoin vs. Gold pilot strip
   Draft native creative pending Coinbase pre-clearance.
   ========================================================== */
.coinbase-affiliate-preview {
  display: flex;
  flex-direction: column;
  margin: 0 auto 14px;
}

.coinbase-affiliate {
  display: grid;
  position: relative;
  width: 100%;
  padding: 16px 28px;
  border: 1px solid var(--sl-card-border);
  border-radius: 20px;
  background: var(--sl-card-bg);
  box-shadow: var(--sl-card-shadow);
  backdrop-filter: var(--sl-card-backdrop);
  -webkit-backdrop-filter: var(--sl-card-backdrop);
  text-decoration: none;
  transition: border-color 240ms ease-out, box-shadow 240ms ease-out;
}

.coinbase-affiliate__overlay-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.coinbase-affiliate__overlay-link:focus-visible {
  outline: 2px solid #6b9fff;
  outline-offset: 3px;
}

.coinbase-affiliate__partnership-link {
  position: relative;
  z-index: 2;
  pointer-events: auto;
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.coinbase-affiliate:hover {
  border-color: var(--sl-card-hover-border);
  box-shadow: var(--sl-card-hover-shadow);
}

.coinbase-affiliate__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-family: 'Sora', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
  color: #ffffff;
  background: #0052ff;
  box-shadow: 0 8px 20px rgba(0, 82, 255, 0.18);
}

.coinbase-affiliate__brand-cluster {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  white-space: nowrap;
}

.coinbase-affiliate__brand-plus {
  font-family: 'Sora', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
}

.coinbase-affiliate__ltt-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: #000000;
}

.coinbase-affiliate__ltt-logo img {
  display: block;
  width: 20px;
  height: auto;
  filter: invert(1);
  transform: translateX(1px);
}

.coinbase-affiliate__headline {
  font-family: 'Sora', sans-serif;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0;
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.coinbase-affiliate__notice {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  line-height: 1.38;
  margin: 0;
  opacity: 0.72;
}

.coinbase-affiliate__subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.35;
  margin: 0;
}

.coinbase-affiliate__figure {
  display: flex;
  align-items: center;
  gap: 14px;
}

.coinbase-affiliate__figure::before {
  content: "";
  width: 3px;
  height: 44px;
  border-radius: 999px;
  background: linear-gradient(180deg, #78a6ff, #0052ff);
  flex-shrink: 0;
}

.coinbase-affiliate__value {
  font-family: 'Sora', sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.35rem);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.05em;
  white-space: nowrap;
}

.coinbase-affiliate__action {
  display: flex;
  align-items: flex-end;
}

.coinbase-affiliate__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 18px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 200ms ease-out, border-color 200ms ease-out, color 200ms ease-out;
}

.coinbase-affiliate--signal-strip {
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 10px 22px;
  min-height: 78px;
}

.coinbase-affiliate--signal-strip .coinbase-affiliate__logo {
  grid-column: 1;
  grid-row: 1;
}

.coinbase-affiliate--signal-strip .coinbase-affiliate__brand-cluster {
  grid-column: 1;
  grid-row: 1;
}

.coinbase-affiliate--signal-strip .coinbase-affiliate__figure {
  grid-column: 2;
  grid-row: 1;
}

.coinbase-affiliate--signal-strip .coinbase-affiliate__headline {
  grid-column: 3;
  grid-row: 1;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.35;
}

.coinbase-affiliate--signal-strip .coinbase-affiliate__action {
  grid-column: 4;
  grid-row: 1;
  justify-self: end;
}

.coinbase-affiliate--signal-strip .coinbase-affiliate__notice {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: end;
  text-align: right;
  max-width: none;
}

.coinbase-affiliate--platform-strip {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 10px 22px;
  min-height: 78px;
}

.coinbase-affiliate--platform-strip .coinbase-affiliate__logo {
  grid-column: 1;
  grid-row: 1;
}

.coinbase-affiliate--platform-strip .coinbase-affiliate__brand-cluster {
  grid-column: 1;
  grid-row: 1;
}

.coinbase-affiliate--platform-strip .coinbase-affiliate__headline {
  grid-column: 2;
  grid-row: 1;
  font-size: 1.18rem;
  font-weight: 600;
  position: relative;
  padding-left: 17px;
}

.coinbase-affiliate--platform-strip .coinbase-affiliate__headline::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 44px;
  border-radius: 999px;
  background: linear-gradient(180deg, #78a6ff, #0052ff);
  transform: translateY(-50%);
}

.coinbase-affiliate--platform-strip .coinbase-affiliate__action {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}

.coinbase-affiliate--platform-strip .coinbase-affiliate__notice {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: start;
  text-align: left;
  max-width: none;
}

.coinbase-affiliate--pro-strip {
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  align-items: center;
  gap: 10px 14px;
  min-height: 78px;
}

.coinbase-affiliate--pro-strip .coinbase-affiliate__brand-cluster {
  grid-column: 1;
  grid-row: 1;
}

.coinbase-affiliate--pro-strip .coinbase-affiliate__figure {
  grid-column: 2;
  grid-row: 1;
}

.coinbase-affiliate--pro-strip .coinbase-affiliate__figure::before {
  height: 44px;
}

.coinbase-affiliate--pro-strip .coinbase-affiliate__value {
  font-size: clamp(1.8rem, 3vw, 2.35rem);
  line-height: 0.92;
  letter-spacing: -0.05em;
  white-space: nowrap;
}

.coinbase-affiliate--pro-strip .coinbase-affiliate__headline {
  grid-column: 3;
  grid-row: 1;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

.coinbase-affiliate--pro-strip .coinbase-affiliate__action {
  grid-column: 4;
  grid-row: 1;
  justify-self: end;
}

.coinbase-affiliate--pro-strip .coinbase-affiliate__notice {
  grid-column: 1 / -1;
  grid-row: 3;
  justify-self: start;
  text-align: left;
  max-width: none;
}

.coinbase-affiliate--pro-strip .coinbase-affiliate__subtitle {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: start;
  text-align: left;
}

.coinbase-affiliate--pro-membership-strip .coinbase-affiliate__headline:empty {
  display: none;
}

.coinbase-affiliate--pro-membership-strip .coinbase-affiliate__figure {
  min-width: 0;
}

.coinbase-affiliate--pro-membership-strip .coinbase-affiliate__value {
  font-size: clamp(1.45rem, 2.4vw, 2.1rem);
  line-height: 1.04;
  white-space: normal;
}

.sl-void[data-void="light"] .coinbase-affiliate__headline { color: #1f1811; }
.sl-void[data-void="dark"]  .coinbase-affiliate__headline { color: #f5efe3; }

.sl-void[data-void="light"] .coinbase-affiliate__brand-plus { color: #534838; }
.sl-void[data-void="dark"]  .coinbase-affiliate__brand-plus { color: #aca193; }

.sl-void[data-void="light"] .coinbase-affiliate__notice { color: #534838; }
.sl-void[data-void="dark"]  .coinbase-affiliate__notice { color: #aca193; }

.sl-void[data-void="light"] .coinbase-affiliate__subtitle { color: #1f1811; }
.sl-void[data-void="dark"]  .coinbase-affiliate__subtitle { color: #f5efe3; }

.sl-void[data-void="light"] .coinbase-affiliate__value { color: #1f1811; }
.sl-void[data-void="dark"]  .coinbase-affiliate__value { color: #f5efe3; }

.sl-void[data-void="light"] .coinbase-affiliate__cta {
  border: 1px solid rgba(0, 82, 255, 0.28);
  background: rgba(0, 82, 255, 0.07);
  color: #4e74d9;
}

.sl-void[data-void="light"] .coinbase-affiliate:hover .coinbase-affiliate__cta {
  border-color: rgba(0, 82, 255, 0.46);
  background: rgba(0, 82, 255, 0.14);
  color: #4e74d9;
}

.sl-void[data-void="dark"] .coinbase-affiliate__cta {
  border: 1px solid rgba(110, 157, 255, 0.34);
  background: rgba(110, 157, 255, 0.10);
  color: #6b9fff;
}

.sl-void[data-void="dark"] .coinbase-affiliate:hover .coinbase-affiliate__cta {
  border-color: rgba(110, 157, 255, 0.52);
  background: rgba(110, 157, 255, 0.18);
  color: #6b9fff;
}

@media (min-width: 761px) and (max-width: 1800px) {
  .coinbase-affiliate--signal-strip {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    gap: 10px 18px;
  }

  .coinbase-affiliate--signal-strip .coinbase-affiliate__headline {
    grid-column: 1 / -1;
    grid-row: 2;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .coinbase-affiliate--signal-strip .coinbase-affiliate__notice {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: start;
    text-align: left;
    white-space: normal;
  }
}

@media (min-width: 601px) and (max-width: 760px) {
  .coinbase-affiliate {
    padding-inline: 18px;
  }

  .coinbase-affiliate--signal-strip {
    grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: 10px 10px;
  }

  .coinbase-affiliate__logo {
    height: 30px;
    padding-inline: 10px;
    font-size: 0.78rem;
  }

  .coinbase-affiliate__headline {
    font-size: 0.92rem;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .coinbase-affiliate__cta {
    height: 30px;
    padding-inline: 12px;
    font-size: 10px;
    letter-spacing: 0.05em;
  }

  .coinbase-affiliate__figure {
    gap: 10px;
  }

  .coinbase-affiliate__figure::before {
    height: 36px;
  }

  .coinbase-affiliate__value {
    font-size: 1.7rem;
    letter-spacing: -0.04em;
  }

  .coinbase-affiliate--signal-strip .coinbase-affiliate__action {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .coinbase-affiliate--signal-strip .coinbase-affiliate__headline {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 0.95rem;
    line-height: 1.35;
  }

  .coinbase-affiliate--signal-strip .coinbase-affiliate__notice {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: start;
    text-align: left;
  }

  .coinbase-affiliate--platform-strip {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: 10px 10px;
  }

  .coinbase-affiliate--platform-strip .coinbase-affiliate__headline {
    font-size: 0.96rem;
  }

  .coinbase-affiliate--pro-strip {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    gap: 10px 10px;
  }

  .coinbase-affiliate--pro-strip .coinbase-affiliate__brand-cluster {
    grid-column: 1;
    grid-row: 1;
  }

  .coinbase-affiliate--pro-strip .coinbase-affiliate__action {
    grid-column: 4;
    grid-row: 1;
    justify-self: end;
  }

  .coinbase-affiliate--pro-strip .coinbase-affiliate__figure {
    grid-column: 2;
    grid-row: 1;
    gap: 10px;
  }

  .coinbase-affiliate--pro-strip .coinbase-affiliate__value {
    font-size: 1.7rem;
    line-height: 0.92;
  }

  .coinbase-affiliate--pro-strip .coinbase-affiliate__headline {
    grid-column: 3;
    grid-row: 1;
  }

  .coinbase-affiliate--pro-strip .coinbase-affiliate__notice {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .coinbase-affiliate--pro-strip .coinbase-affiliate__subtitle {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (min-width: 541px) and (max-width: 600px) {
  .coinbase-affiliate {
    padding-inline: 16px;
  }

  .coinbase-affiliate--signal-strip {
    grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: 10px 8px;
  }

  .coinbase-affiliate__logo {
    height: 28px;
    padding-inline: 9px;
    font-size: 0.72rem;
  }

  .coinbase-affiliate__headline {
    font-size: 0.82rem;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .coinbase-affiliate__cta {
    height: 28px;
    padding-inline: 10px;
    font-size: 9px;
    letter-spacing: 0.04em;
  }

  .coinbase-affiliate__figure {
    gap: 8px;
  }

  .coinbase-affiliate__figure::before {
    height: 34px;
  }

  .coinbase-affiliate__value {
    font-size: 1.55rem;
    letter-spacing: -0.04em;
  }

  .coinbase-affiliate--signal-strip .coinbase-affiliate__action {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .coinbase-affiliate--signal-strip .coinbase-affiliate__headline {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 0.95rem;
    line-height: 1.35;
  }

  .coinbase-affiliate--signal-strip .coinbase-affiliate__notice {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: start;
    text-align: left;
  }

  .coinbase-affiliate--platform-strip {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: 10px 8px;
  }

  .coinbase-affiliate--platform-strip .coinbase-affiliate__headline {
    font-size: 0.86rem;
  }

  .coinbase-affiliate--pro-strip {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    gap: 10px 8px;
  }

  .coinbase-affiliate--pro-strip .coinbase-affiliate__brand-cluster {
    grid-column: 1;
    grid-row: 1;
  }

  .coinbase-affiliate--pro-strip .coinbase-affiliate__action {
    grid-column: 4;
    grid-row: 1;
    justify-self: end;
  }

  .coinbase-affiliate--pro-strip .coinbase-affiliate__figure {
    grid-column: 2;
    grid-row: 1;
    gap: 8px;
  }

  .coinbase-affiliate--pro-strip .coinbase-affiliate__value {
    font-size: 1.55rem;
    line-height: 0.92;
  }

  .coinbase-affiliate--pro-strip .coinbase-affiliate__headline {
    grid-column: 3;
    grid-row: 1;
  }

  .coinbase-affiliate--pro-strip .coinbase-affiliate__notice {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .coinbase-affiliate--pro-strip .coinbase-affiliate__subtitle {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (min-width: 441px) and (max-width: 540px) {
  .coinbase-affiliate {
    padding-inline: 15px;
  }

  .coinbase-affiliate--signal-strip {
    grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: 10px 6px;
  }

  .coinbase-affiliate__logo {
    height: 27px;
    padding-inline: 8px;
    font-size: 0.68rem;
  }

  .coinbase-affiliate__headline {
    font-size: 0.78rem;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .coinbase-affiliate__cta {
    height: 27px;
    padding-inline: 8px;
    font-size: 8.5px;
    letter-spacing: 0.035em;
  }

  .coinbase-affiliate__figure {
    gap: 6px;
  }

  .coinbase-affiliate__figure::before {
    height: 32px;
  }

  .coinbase-affiliate__value {
    font-size: 1.45rem;
    letter-spacing: -0.04em;
  }

  .coinbase-affiliate--signal-strip .coinbase-affiliate__action {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .coinbase-affiliate--signal-strip .coinbase-affiliate__headline {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .coinbase-affiliate--signal-strip .coinbase-affiliate__notice {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: start;
    text-align: left;
  }

  .coinbase-affiliate--platform-strip {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: 10px 6px;
  }

  .coinbase-affiliate--platform-strip .coinbase-affiliate__headline {
    font-size: 0.8rem;
  }

  .coinbase-affiliate--pro-strip {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    gap: 10px 6px;
  }

  .coinbase-affiliate--pro-strip .coinbase-affiliate__brand-cluster {
    grid-column: 1;
    grid-row: 1;
  }

  .coinbase-affiliate--pro-strip .coinbase-affiliate__action {
    grid-column: 4;
    grid-row: 1;
    justify-self: end;
  }

  .coinbase-affiliate--pro-strip .coinbase-affiliate__figure {
    grid-column: 2;
    grid-row: 1;
    gap: 6px;
  }

  .coinbase-affiliate--pro-strip .coinbase-affiliate__value {
    font-size: 1.45rem;
    line-height: 0.92;
  }

  .coinbase-affiliate--pro-strip .coinbase-affiliate__headline {
    grid-column: 3;
    grid-row: 1;
  }

  .coinbase-affiliate--pro-strip .coinbase-affiliate__notice {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .coinbase-affiliate--pro-strip .coinbase-affiliate__subtitle {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (min-width: 441px) and (max-width: 488px) {
  .coinbase-affiliate--pro-strip {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto auto;
    gap: 7px 8px;
  }

  .coinbase-affiliate--pro-strip .coinbase-affiliate__brand-cluster {
    grid-column: 1 / 3;
    grid-row: 1;
  }

  .coinbase-affiliate--pro-strip .coinbase-affiliate__action {
    grid-column: 3;
    grid-row: 1;
  }

  .coinbase-affiliate--pro-strip .coinbase-affiliate__figure {
    grid-column: 1;
    grid-row: 2;
    gap: 10px;
  }

  .coinbase-affiliate--pro-strip .coinbase-affiliate__figure::before {
    height: 34px;
  }

  .coinbase-affiliate--pro-strip .coinbase-affiliate__value {
    font-size: 1.66rem;
    line-height: 1.05;
  }

  .coinbase-affiliate--pro-strip .coinbase-affiliate__headline {
    grid-column: 2 / -1;
    grid-row: 2;
    align-self: center;
  }

  .coinbase-affiliate--pro-strip .coinbase-affiliate__notice {
    grid-column: 1 / -1;
    grid-row: 4;
  }

  .coinbase-affiliate--pro-strip .coinbase-affiliate__subtitle {
    grid-column: 1 / -1;
    grid-row: 3;
  }
}

@media (max-width: 440px) {
  .coinbase-affiliate-preview {
    margin-bottom: 12px;
  }

  .coinbase-affiliate {
    padding: 13px 16px 14px;
    border-radius: 16px;
    text-align: left;
  }

  .coinbase-affiliate__logo {
    height: 30px;
    padding-inline: 10px;
    font-size: 0.75rem;
  }

  .coinbase-affiliate__headline {
    font-size: 0.92rem;
    line-height: 1.25;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .coinbase-affiliate__notice {
    font-size: 9px;
    line-height: 1.32;
  }

  .coinbase-affiliate__subtitle {
    font-size: 0.9rem;
    line-height: 1.3;
  }

  .coinbase-affiliate__cta {
    height: 28px;
    padding: 0 13px;
    font-size: 10px;
    letter-spacing: 0.05em;
  }

  .coinbase-affiliate__value {
    font-size: 1.66rem;
    letter-spacing: -0.04em;
  }

  .coinbase-affiliate--signal-strip {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    align-items: center;
    gap: 7px 10px;
  }

  .coinbase-affiliate--signal-strip .coinbase-affiliate__logo {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    margin-top: 2px;
  }

  .coinbase-affiliate--signal-strip .coinbase-affiliate__figure {
    grid-column: 2;
    grid-row: 1;
    gap: 7px;
    justify-self: end;
  }

  .coinbase-affiliate--signal-strip .coinbase-affiliate__figure::before {
    width: 3px;
    height: 32px;
  }

  .coinbase-affiliate--signal-strip .coinbase-affiliate__headline {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 0.9rem;
    line-height: 1.3;
  }

  .coinbase-affiliate--signal-strip .coinbase-affiliate__action {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .coinbase-affiliate--signal-strip .coinbase-affiliate__notice {
    grid-column: 1 / -1;
    grid-row: 3;
    text-align: left;
    max-width: 62ch;
  }

  .coinbase-affiliate--platform-strip {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-items: center;
    gap: 8px 10px;
  }

  .coinbase-affiliate--platform-strip .coinbase-affiliate__logo {
    grid-column: 1;
    grid-row: 1;
  }

  .coinbase-affiliate--platform-strip .coinbase-affiliate__action {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .coinbase-affiliate--platform-strip .coinbase-affiliate__headline {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 0.92rem;
  }

  .coinbase-affiliate--platform-strip .coinbase-affiliate__notice {
    grid-column: 1 / -1;
    grid-row: 3;
    text-align: left;
    max-width: 62ch;
  }

  .coinbase-affiliate--pro-strip {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto auto;
    align-items: center;
    gap: 7px 8px;
  }

  .coinbase-affiliate--pro-strip .coinbase-affiliate__brand-cluster {
    grid-column: 1 / 3;
    grid-row: 1;
  }

  .coinbase-affiliate--pro-strip .coinbase-affiliate__action {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .coinbase-affiliate--pro-strip .coinbase-affiliate__figure {
    grid-column: 1;
    grid-row: 2;
    gap: 10px;
  }

  .coinbase-affiliate--pro-strip .coinbase-affiliate__figure::before {
    width: 3px;
    height: 34px;
  }

  .coinbase-affiliate--pro-strip .coinbase-affiliate__value {
    font-size: 1.66rem;
    line-height: 1.05;
  }

  .coinbase-affiliate--pro-strip .coinbase-affiliate__headline {
    grid-column: 2 / -1;
    grid-row: 2;
    align-self: center;
    white-space: nowrap;
  }

  .coinbase-affiliate--pro-strip .coinbase-affiliate__notice {
    grid-column: 1 / -1;
    grid-row: 4;
    text-align: left;
    max-width: 62ch;
  }

  .coinbase-affiliate--pro-strip .coinbase-affiliate__subtitle {
    grid-column: 1 / -1;
    grid-row: 3;
    text-align: left;
  }
}

@media (max-width: 380px) {
  .coinbase-affiliate {
    padding-inline: 14px;
  }

  .coinbase-affiliate__headline {
    font-size: 0.9rem;
  }

  .coinbase-affiliate__logo {
    height: 28px;
    padding-inline: 9px;
    font-size: 0.7rem;
  }

  .coinbase-affiliate__value {
    font-size: 1.58rem;
  }

  .coinbase-affiliate__cta {
    padding-inline: 11px;
    font-size: 9px;
  }

  .coinbase-affiliate__brand-cluster {
    gap: 6px;
  }

  .coinbase-affiliate__ltt-logo {
    width: 30px;
    height: 28px;
  }

  .coinbase-affiliate__ltt-logo img {
    width: 16px;
  }

  .coinbase-affiliate--pro-strip .coinbase-affiliate__value {
    font-size: 1.44rem;
  }

  .coinbase-affiliate--pro-strip .coinbase-affiliate__headline {
    font-size: 0.84rem;
  }
}

.coinbase-affiliate--pro-membership-strip .coinbase-affiliate__headline:empty {
  display: none;
}

.coinbase-affiliate--pro-membership-strip .coinbase-affiliate__value {
  font-size: clamp(1.45rem, 2.4vw, 2.1rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
  white-space: normal;
}

@media (max-width: 440px) {
  .coinbase-affiliate--pro-membership-strip .coinbase-affiliate__value {
    font-size: 1.34rem;
    line-height: 1.08;
  }
}

/* ==========================================================
   Kraken affiliate banner — monument-split preview
   Local/staging preview pending Kraken creative approval;
   reuses the eToro monument-split layout with a kraken logo
   and a mobile wrap rule for its longer reward line.
   ========================================================== */
.kraken-affiliate__logo {
  display: block;
  width: 97px;
  flex-shrink: 0;
}

.kraken-affiliate__logo svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Banner rhythm: 14px between cards, then a separate 14px section gap so
   every final visible banner sits 28px above the page h1. `:has()` keeps the
   section gap absent when all async fragment slots resolve empty. */
.kraken-affiliate-stack .coinbase-affiliate-preview,
.kraken-affiliate-stack .etoro-affiliate-preview {
  margin-bottom: 14px;
}

.kraken-affiliate-stack:has(.coinbase-affiliate-preview),
.kraken-affiliate-stack:has(.etoro-affiliate-preview) {
  padding-bottom: 14px;
}

/* Wordmark widths track the eToro logo breakpoints at x1.347
   (the kraken wordmark is 91:15, far wider than the eToro mark). */
@media (min-width: 761px) and (max-width: 900px) {
  .kraken-affiliate__logo { width: 89px; }
}

@media (min-width: 601px) and (max-width: 760px) {
  .kraken-affiliate__logo { width: 81px; }
}

@media (min-width: 541px) and (max-width: 600px) {
  .kraken-affiliate__logo { width: 73px; }
}

@media (min-width: 441px) and (max-width: 540px) {
  .kraken-affiliate__logo { width: 67px; }
}

@media (max-width: 488px) {
  .kraken-affiliate__logo { width: 84px; }

  /* The Kraken reward line is longer than eToro's; let the Pro
     benefit wrap below the amount instead of widening the card. */
  .etoro-affiliate--kraken .etoro-affiliate__value {
    white-space: normal;
    flex-wrap: wrap;
    row-gap: 2px;
  }

  .etoro-affiliate--kraken .etoro-affiliate__value-amount,
  .etoro-affiliate--kraken .etoro-affiliate__value-benefit {
    white-space: nowrap;
  }
}

@media (max-width: 380px) {
  .kraken-affiliate__logo { width: 75px; }
}

/* ==========================================================
   XTB Nike affiliate banner — DACH campaign preview
   Reuses the shared monument-split layout. XTB's red is kept
   to the divider; the CTA uses the shared cobalt treatment.
   ========================================================== */
.xtb-affiliate__logo {
  display: block;
  width: 88px;
  height: auto;
  padding: 3px 5px;
  border-radius: 6px;
  background: #ffffff;
  flex-shrink: 0;
}

.xtb-affiliate__nike-logo {
  display: block;
  width: 58px;
  height: auto;
  flex-shrink: 0;
}

.sl-void[data-void="dark"] .xtb-affiliate__nike-logo {
  filter: invert(1);
}

.etoro-affiliate--xtb .etoro-affiliate__figure::before {
  background: linear-gradient(180deg, #fe0103, #a60002);
}

@media (min-width: 761px) and (max-width: 900px) {
  .xtb-affiliate__logo { width: 78px; }
  .xtb-affiliate__nike-logo { width: 48px; }
}

@media (min-width: 489px) and (max-width: 900px) {
  .etoro-affiliate--xtb {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto auto;
  }

  .etoro-affiliate--xtb .etoro-affiliate__brand-cluster {
    grid-column: 1 / 3;
    grid-row: 1;
  }

  .etoro-affiliate--xtb .etoro-affiliate__action {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .etoro-affiliate--xtb .etoro-affiliate__figure {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: start;
  }

  .etoro-affiliate--xtb .etoro-affiliate__subtitle {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .etoro-affiliate--xtb .etoro-affiliate__notice {
    grid-column: 1 / -1;
    grid-row: 4;
  }
}

@media (min-width: 601px) and (max-width: 760px) {
  .xtb-affiliate__logo { width: 70px; }
  .xtb-affiliate__nike-logo { width: 44px; }
}

@media (min-width: 441px) and (max-width: 600px) {
  .xtb-affiliate__logo { width: 64px; }
  .xtb-affiliate__nike-logo { width: 40px; }
}

@media (max-width: 488px) {
  .xtb-affiliate__logo { width: 66px; }
  .xtb-affiliate__nike-logo { width: 44px; }

  .etoro-affiliate--xtb .etoro-affiliate__value {
    white-space: normal;
    flex-wrap: wrap;
    row-gap: 2px;
  }

  .etoro-affiliate--xtb .etoro-affiliate__value-amount,
  .etoro-affiliate--xtb .etoro-affiliate__value-benefit {
    white-space: nowrap;
  }
}

@media (max-width: 380px) {
  .xtb-affiliate__logo { width: 60px; }
  .xtb-affiliate__nike-logo { width: 40px; }
}

/* ==========================================================
   Chart action row — Download / View More Charts
   Centered pair shown above the Become-a-Member card. Button
   styling comes from the canonical .sl-cta family — this rule
   only positions the row.
   ========================================================== */
.sl-chart-actions {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px;
}

/* ==========================================================
   Become-a-Member CTA — page-closing conversion block
   Uses the same glass-graphite surface and cobalt CTA lane as
   .tv-affiliate, but rendered as a centered full-width card
   that sits above the site footer.
   ========================================================== */
.sl-member-cta {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  padding: 40px 32px; border-radius: 22px; text-decoration: none;
  text-align: center;
  transition: all 220ms ease-out;
}
.sl-member-cta {
  border: 1px solid var(--sl-card-border);
  background: var(--sl-card-bg);
  box-shadow: var(--sl-card-shadow);
  backdrop-filter: var(--sl-card-backdrop);
  -webkit-backdrop-filter: var(--sl-card-backdrop);
}
.sl-member-cta__icon {
  width: 32px; height: 32px; display: block;
  margin-bottom: 4px;
}
.sl-void[data-void="light"] .sl-member-cta__icon { color: #b67928; }
.sl-void[data-void="dark"]  .sl-member-cta__icon { color: #e3c57c; }
.sl-member-cta__pitch {
  font-family: 'Inter', sans-serif;
  font-size: 16px; line-height: 1.55; margin: 0;
  max-width: 68ch;
}
.sl-void[data-void="light"] .sl-member-cta__pitch { color: #534838; }
.sl-void[data-void="dark"]  .sl-member-cta__pitch { color: #aca193; }
.sl-member-cta__button {
  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: 12px 22px; border-radius: 999px;
  transition: all 200ms ease-out;
}
.sl-void[data-void="light"] .sl-member-cta__button {
  background: rgba(78,116,217,0.06);
  border: 1px solid rgba(78,116,217,0.28);
  color: #3b5bb0;
}
.sl-void[data-void="light"] .sl-member-cta:hover .sl-member-cta__button {
  background: rgba(78,116,217,0.14);
  border-color: rgba(78,116,217,0.48);
  color: #2f4a95;
}
.sl-void[data-void="dark"] .sl-member-cta__button {
  background: rgba(143,178,255,0.08);
  border: 1px solid rgba(143,178,255,0.30);
  color: #8fb2ff;
}
.sl-void[data-void="dark"] .sl-member-cta:hover .sl-member-cta__button {
  background: rgba(143,178,255,0.16);
  border-color: rgba(143,178,255,0.48);
  color: #b5cdff;
}
.sl-member-cta:hover {
  border-color: var(--sl-card-hover-border);
  box-shadow: var(--sl-card-hover-shadow);
}

/* ==========================================================
   Toggle scale button (golden)
   Resting = quiet gold ghost; fills to the gradient only on its
   own hover/focus (Decision 7, 2026-07-09). These buttons sit on
   the bare void, where the cursor-glow overlay (.sl-void::after)
   and the chart-surface hover elevation change the ambient light
   around them — a filled gradient pill visibly "flips" with that
   lighting and reads as an active/inactive state change. A quiet
   resting state can't flip. Ghost precedent: .sl-member-cta__button.
   ========================================================== */
/* The ghost outline is an INSET box-shadow ring, not a real border: a 1px
   transparent border + border-box background on a 999px-radius pill leaves a
   visible anti-aliasing seam at the caps when the gradient fills on hover
   (Chrome rounds the background at both the border-box and padding-box
   radii). A shadow ring is one paint layer and vanishes cleanly. */
.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: var(--sl-data-control-ghost-bg);
  color: var(--sl-data-control-ghost-text);
  box-shadow: var(--sl-data-control-ghost-ring);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
  margin: 18px 0 8px;
}
.sl-toggle-btn:hover,
.sl-toggle-btn:focus-visible {
  background: linear-gradient(135deg, #a67e24 0%, #c89e3d 56%, #e3c57c 100%);
  color: #2a1f0f;
  box-shadow: 0 6px 16px rgba(166,126,36,0.32);
}
.sl-void[data-void="dark"] .sl-toggle-btn:hover,
.sl-void[data-void="dark"] .sl-toggle-btn:focus-visible {
  background: linear-gradient(135deg, #8a6620 0%, #c89e3d 56%, #f0d58a 100%);
  color: #1a1206;
  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. The `.is-active` button carries the filled gradient (selected);
   the others stay in the ghost resting state. (Replaces the pre-2026-07-09
   0.55-opacity dimming — ghost vs. filled is the selected signal now.)
   Solo `.sl-toggle-wrap` (single-button scale toggles) is unaffected. */
.sl-toggle-group .sl-toggle-btn.is-active {
  background: linear-gradient(135deg, #a67e24 0%, #c89e3d 56%, #e3c57c 100%);
  color: #2a1f0f;
  box-shadow: 0 4px 12px rgba(166,126,36,0.22);
}
.sl-void[data-void="dark"] .sl-toggle-group .sl-toggle-btn.is-active {
  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);
}

/* ==========================================================
   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); }
.sl-cta--cobalt:disabled,
.sl-cta--cobalt[disabled] {
  opacity: 1;
  filter: none;
  cursor: pointer;
}

/* 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-featured-on {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin-top: 28px;
}
.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 {
  appearance: none;
  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;
  background: transparent;
  color: var(--sl-filter-inactive-text);
  box-shadow: var(--sl-filter-inactive-ring);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.sl-filter-pill:hover,
.sl-filter-pill:focus-visible,
.sl-filter-pill.is-active {
  background: var(--sl-data-control-ghost-bg);
  color: var(--sl-data-control-ghost-text);
  box-shadow: var(--sl-data-control-ghost-ring);
}
.sl-filter-pill:focus-visible {
  outline: 2px solid var(--ltt-series-gold);
  outline-offset: 2px;
}
.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; }
/* Feature 111 L5: the <picture> around a card image generates no box, so the
   image stays the flex or block child it was before. A boxed <picture> around
   a hidden theme variant would be a zero-height flex item and add a gap. */
.sl-tool-card picture, .sl-chart-card picture, .sl-feature-row__media picture { display: contents; }
.sl-tool-card picture source, .sl-chart-card picture source, .sl-feature-row__media picture source { display: none; }
.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="light"] .highcharts-range-selector-group > .highcharts-button rect {
  fill: rgba(200,158,61,0.14) !important; stroke: rgba(200,158,61,0.34) !important;
}
.sl-void[data-void="light"] .highcharts-range-selector-group > .highcharts-button text {
  fill: #8a5a14 !important; font-weight: 700 !important;
}
.sl-void[data-void="light"] select.highcharts-range-selector {
  min-height: 34px !important;
  padding: 4px 28px 4px 12px !important;
  border: 1px solid rgba(200,158,61,0.34) !important;
  border-radius: 6px !important;
  color: #8a5a14 !important;
  background-color: rgba(200,158,61,0.14) !important;
  font: 700 15px/1.2 Inter, system-ui, sans-serif !important;
  color-scheme: light;
  outline: none !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;
}
.sl-void[data-void="dark"] .highcharts-range-selector-group > .highcharts-button rect {
  fill: rgba(227,197,124,0.12) !important; stroke: rgba(227,197,124,0.42) !important;
}
.sl-void[data-void="dark"] .highcharts-range-selector-group > .highcharts-button text {
  fill: #ffe1ad !important; font-weight: 700 !important;
}
.sl-void[data-void="dark"] select.highcharts-range-selector {
  min-height: 34px !important;
  padding: 4px 28px 4px 12px !important;
  border: 1px solid rgba(227,197,124,0.42) !important;
  border-radius: 6px !important;
  color: #ffe1ad !important;
  background-color: rgba(227,197,124,0.12) !important;
  font: 700 15px/1.2 Inter, system-ui, sans-serif !important;
  color-scheme: dark;
  outline: none !important;
}
.sl-void select.highcharts-range-selector:focus {
  box-shadow: 0 0 0 3px rgba(227,197,124,0.18) !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; }

/* Legend items (multi-series charts). Highcharts inlines its default
   #333333 itemStyle fill on the <text>, invisible on the dark void.
   Visible items match the title tokens; hidden-series items keep
   their strikethrough but stay dimmed; hover goes gold (legend
   toggles are data interaction). */
.sl-void[data-void="light"] .highcharts-legend-item text { fill: #40382c !important; }
.sl-void[data-void="dark"] .highcharts-legend-item text { fill: #f5efe3 !important; }
.sl-void[data-void="light"] .highcharts-legend-item-hidden text { fill: rgba(64,56,44,0.45) !important; }
.sl-void[data-void="dark"] .highcharts-legend-item-hidden text { fill: rgba(245,239,227,0.40) !important; }
.sl-void[data-void="light"] .highcharts-legend-item:hover text { fill: #8a5a14 !important; }
.sl-void[data-void="dark"] .highcharts-legend-item:hover text { fill: #e3c57c !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 (500px). 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: 24px; gap: 14px;
  min-height: 500px;
  position: relative;
}
/* Below Tailwind's `md` (768px) the pricing grid stacks to one column,
   so equal-height cards no longer align anything — let each card hug
   its content instead of padding out to the 500px min-height. */
@media (max-width: 767px) {
  .sl-plan { min-height: 0; }
}
.sl-plan--lifetime-current { min-height: 0; }
/* When a tooltip inside the plan is active, elevate the whole plan card
   above its siblings so the tooltip bubble isn't clipped by the adjacent
   card's stacking context (the dark-mode `.sl-surface` uses
   `backdrop-filter`, which would otherwise occlude anything that
   overflows from the neighbour). */
.sl-plan:has(.sl-tooltip:hover),
.sl-plan:has(.sl-tooltip:focus-within) { z-index: 30; }
/* 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;
}
/* Feature 05B T13: the WELCOME50 badge sits next to the plan name, the toggle stays right. */
.sl-plan__head .sl-badge { margin-right: auto; }
/* 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: 7px; flex: 1 1 auto;
  margin-top: 4px;
}
.sl-plan__feature {
  display: block;
  position: relative;
  padding-left: 28px;
  font-size: 15px; line-height: 1.48;
  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; }
/* One terms line under each plan button (Feature 05, Q36.12 C). */
.sl-plan__terms {
  margin: 0.375rem 0 0; text-align: center;
  font: 400 12.5px/1.6 'Inter', sans-serif; opacity: 0.78;
}
.sl-plan__terms > span + span::before { content: "\00B7"; margin: 0 0.5rem; opacity: 0.6; }
.sl-plan__terms a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Inline info tooltip — used next to gated-feature labels that need a
   short eligibility / scope caveat (e.g. Private Consultation). Hover
   or focus reveals a small dark bubble above the icon. Port of the
   legacy `.ltt-tooltip` pattern, renamed to the SL namespace. */
.sl-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  cursor: help;
  vertical-align: middle;
}
.sl-tooltip__icon {
  width: 14px; height: 14px;
  opacity: 0.45;
  transition: opacity 140ms ease;
}
.sl-tooltip:hover .sl-tooltip__icon,
.sl-tooltip:focus .sl-tooltip__icon,
.sl-tooltip:focus-within .sl-tooltip__icon { opacity: 0.85; }
.sl-tooltip__content {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  width: max-content;
  max-width: 280px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #0b1220;
  border: 1px solid rgba(141,181,255,0.22);
  color: #f5efe3;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  line-height: 1.4;
  text-align: left;
  box-shadow: 0 12px 28px rgba(0,0,0,0.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
  z-index: 50;
}
.sl-tooltip__content::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: #0b1220 transparent transparent transparent;
}
.sl-tooltip:hover .sl-tooltip__content,
.sl-tooltip:focus .sl-tooltip__content,
.sl-tooltip:focus-within .sl-tooltip__content {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-2px);
}

/* 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 var(--sl-card-border);
    background: var(--sl-card-bg);
    backdrop-filter: var(--sl-card-backdrop);
    -webkit-backdrop-filter: var(--sl-card-backdrop);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
  }
  .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;
    /* Right padding reserves ~76 px for the absolutely-positioned
       `.sl-copy-btn` (top:10px/right:10px, ~58 px wide) so the code's
       first line doesn't collide with the button. When the code is
       longer than the box and scrolls, the button's opaque background +
       backdrop blur masks anything passing behind it. */
    padding: 16px 80px 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 is deliberately near-opaque + backdrop-blurred so code
       scrolling under the button is masked — the pre reserves 80 px of
       right padding, but horizontal scroll can still push text behind
       the button on very long lines. */
    background: rgba(20,24,32,0.88);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    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(32,38,48,0.92);
    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. Margin-top separates one group from the
     previous; first-group sits close to the "API Endpoints" h2 so the
     14 px flex gap on `.sl-api-card` governs that opening distance. */
  .sl-endpoints-group {
    margin-top: 44px;
  }
  .sl-endpoints-group:first-child {
    margin-top: 16px;
  }
  .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 — token-driven chrome, with hover on the outer
     container (card-level cue) and a subtle tint on the inner button header
     (toggle-level cue) so both read as interactive. */
  .sl-endpoint {
    margin-bottom: 10px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--sl-card-border);
    background: var(--sl-card-bg);
    backdrop-filter: var(--sl-card-backdrop);
    -webkit-backdrop-filter: var(--sl-card-backdrop);
    transition: border-color 400ms ease, box-shadow 400ms ease;
  }
  .sl-endpoint:hover {
    border-color: var(--sl-card-hover-border);
    box-shadow: var(--sl-card-hover-shadow);
  }
  .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-void[data-void="light"] .sl-endpoint__header:hover { background: rgba(200,158,61,0.06); }
  .sl-void[data-void="dark"]  .sl-endpoint__header:hover { background: rgba(141,181,255,0.08); }
  .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; justify-content: center; }
  .sl-stat {
    display: flex; flex-direction: column; gap: 4px;
    position: relative;
    padding: 14px 18px; border-radius: 14px;
    min-width: 130px;
    text-align: center;
    transition: border-color 400ms ease, box-shadow 400ms ease;
  }
  .sl-stat {
    border: 1px solid var(--sl-card-border);
    background: var(--sl-card-bg);
    box-shadow: var(--sl-card-shadow);
    /* Small translucent proof chips can show GPU tile seams when the
       cursor-glow layer repaints behind their surface. Keep them crisp. */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .sl-void[data-void="dark"] .sl-stat {
    background: linear-gradient(180deg, #111927 0%, #0b121e 100%);
    background-color: #0b121e;
  }
  .sl-stat:hover {
    border-color: var(--sl-card-hover-border);
    box-shadow: var(--sl-card-hover-shadow);
  }
  .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-stat-row` centers
     by default now, so no stat-row override lives here any more. */
  .sl-membership-hero h1 { max-width: 17ch; }
  .sl-hero-centered { text-align: center; }
  .sl-hero-centered .sl-eyebrow { display: inline-block; }
  .sl-hero-centered h1 { margin-left: auto; margin-right: auto; }
  .sl-hero-centered .sl-lead { max-width: 60ch; margin-left: auto; margin-right: auto; }

  .sl-membership-philosophy .sl-eyebrow { display: inline-block; }
  .sl-membership-philosophy h2 { max-width: 28ch; margin: 0 auto 16px; }
  .sl-membership-philosophy .sl-lead { max-width: 68ch; margin: 0 auto; }

  .sl-membership-section-intro {
    text-align: center;
    margin-bottom: 40px;
  }
  .sl-membership-section-intro--compact {
    margin-bottom: 36px;
  }
  .sl-membership-section-intro .sl-eyebrow {
    display: inline-block;
  }
  .sl-membership-section-intro .sl-lead {
    margin: 14px auto 0;
    max-width: 68ch;
  }
  .sl-membership-section-intro--pricing .sl-lead {
    max-width: 62ch;
  }

  /* 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__authed {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .sl-auth-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
  }
  .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 minmax(0, 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;
  }
  /* 05B T15: a long email without break points wraps instead of pushing the
     rows out of the card at 375 px. */
  .sl-kv__val {
    font-family: 'Inter', sans-serif; font-size: 15px;
    min-width: 0; overflow-wrap: anywhere;
  }
  .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 canceling" 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; }

  /* VIP note — same muted warm-grey voice as .sl-plan__manage-link, but
     static prose rather than an interactive link. Shown in place of
     "Manage subscription" on the plan card for VIP (free) members, who
     have no billing to manage. */
  .sl-plan__vip-note {
    font-family: 'Inter', sans-serif;
    font-size: 14px; font-weight: 500; line-height: 1.5;
    color: #534838; opacity: 0.75;
    margin: 0; max-width: 52ch;
  }
  [data-theme="dark"] .sl-plan__vip-note { 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: 12px;
    margin-bottom: 20px;
  }

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

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

  [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;
    line-height: 1.2;
    color: #c62828;
    margin-top: 0;
  }

  .field-container .error-message {
    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: pointer;
    opacity: 1;
    filter: none;
  }

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

  .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;
  }

  .sl-retention-modal-container {
    box-sizing: border-box;
    max-width: 520px;
    max-height: min(90vh, calc(100dvh - 32px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  @media (max-width: 480px) {
    .sl-retention-modal-overlay {
      align-items: center;
      padding: 10px;
    }

    .sl-retention-modal-container {
      width: min(440px, calc(100vw - 20px));
      max-width: calc(100vw - 20px);
      max-height: calc(100dvh - 20px);
      margin: 0;
      padding: 12px 16px 12px;
      border-radius: 16px;
    }

    .sl-retention-modal-container .title-container {
      font-size: 1rem;
      line-height: 1.22;
      margin-bottom: 8px !important;
      padding-right: 24px;
    }

    .sl-retention-modal-container .sl-retention-copy {
      font-size: 12.5px;
      line-height: 1.38;
      margin-bottom: 10px;
    }

    .sl-retention-modal-container .retention-loss-list {
      gap: 6px;
    }

    .sl-retention-modal-container .retention-loss-item {
      gap: 9px;
      min-height: 44px;
      padding: 5px 10px;
      border-radius: 9px;
      font-size: 12.5px;
      line-height: 1.2;
    }

    .sl-retention-modal-container .retention-icon {
      width: 28px;
      height: 28px;
      border-radius: 8px;
    }

    .sl-retention-modal-container .sl-retention-note {
      font-size: 12px;
      line-height: 1.32;
      margin-bottom: 8px;
    }

    .sl-retention-modal-container .sl-retention-note--spaced {
      display: none;
    }

    .sl-retention-modal-container .submit-button {
      height: 38px;
      margin-top: 2px;
      margin-bottom: 6px !important;
      font-size: 14px;
    }

    .sl-retention-modal-container .retention-secondary {
      padding: 4px 10px 2px;
      font-size: 13px;
    }
  }

  @media (min-width: 481px) and (max-width: 900px) and (max-height: 760px) {
    .sl-retention-modal-overlay {
      align-items: center;
      padding: 16px;
    }

    .sl-retention-modal-container {
      max-height: calc(100dvh - 32px);
      padding: 16px 22px 14px;
    }

    .sl-retention-modal-container .title-container {
      margin-bottom: 10px !important;
    }

    .sl-retention-modal-container .sl-retention-copy {
      margin-bottom: 8px;
    }

    .sl-retention-modal-container .retention-loss-list {
      gap: 5px;
    }

    .sl-retention-modal-container .retention-loss-item {
      min-height: 40px;
      padding: 5px 11px;
      font-size: 12.5px;
      line-height: 1.18;
    }

    .sl-retention-modal-container .sl-retention-note--spaced {
      display: none;
    }

    .sl-retention-modal-container .submit-button {
      height: 38px;
      margin-bottom: 6px !important;
    }

    .sl-retention-modal-container .retention-secondary {
      padding: 5px 10px 2px;
      font-size: 13px;
    }
  }

  .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;
    color: #2f7a4e;
    flex: 0 0 auto;
  }

  [data-theme="dark"] .success-icon {
    color: #84e6aa;
  }

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

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

  /* Account prompt modal — delayed anonymous signup prompt */
  .sl-account-prompt-overlay {
    z-index: 1060;
    align-items: flex-start;
    padding: min(9vh, 96px) 16px 32px;
    overflow-y: auto;
  }

  .sl-account-prompt {
    width: 720px;
    max-width: calc(100% - 32px);
    padding: 30px;
  }

  .sl-account-prompt__close {
    appearance: none;
    border: 0;
    background: transparent;
  }

  .sl-account-prompt__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(292px, 1fr);
    gap: 28px;
    align-items: center;
  }

  .sl-account-prompt__story h2 {
    margin: 0;
    font-family: 'Sora', sans-serif;
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: 0;
  }

  .sl-account-prompt__story p {
    margin: 14px 0 0;
    max-width: 36ch;
    color: #534838;
    font-size: 15px;
    line-height: 1.62;
  }

  [data-theme="dark"] .sl-account-prompt__story p {
    color: #aca193;
  }

  .sl-account-prompt__metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 22px;
  }

  .sl-account-prompt__metric {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    min-height: 76px;
    border: 1px solid rgba(53,40,24,0.10);
    border-radius: 14px;
    padding: 14px 16px;
    background: #ffffff;
    box-shadow: 0 2px 0 #fff inset, 0 12px 32px rgba(86,59,27,0.06);
    text-align: center;
  }

  [data-theme="dark"] .sl-account-prompt__metric {
    border-color: rgba(180,186,198,0.22);
    background: linear-gradient(180deg, #111927 0%, #0b121e 100%);
    box-shadow: 0 4px 24px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.06);
  }

  .sl-account-prompt__metrics strong,
  .sl-account-prompt__metric > span {
    display: block;
    text-align: center;
  }

  .sl-account-prompt__metrics strong span {
    display: inline;
    text-align: inherit;
  }

  .sl-account-prompt__metrics strong {
    font-family: 'Sora', sans-serif;
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    color: #1f1811;
  }

  [data-theme="dark"] .sl-account-prompt__metrics strong {
    color: #f5efe3;
  }

  .sl-account-prompt__metric > span {
    margin-top: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #534838;
    opacity: 0.58;
  }

  [data-theme="dark"] .sl-account-prompt__metric > span {
    color: #aca193;
    opacity: 0.72;
  }

  .sl-account-prompt__story a {
    color: #2f4ea8;
    text-decoration: none;
  }

  .sl-account-prompt__story a:hover {
    text-decoration: underline;
  }

  [data-theme="dark"] .sl-account-prompt__story a {
    color: #8fb2ff;
  }

  .sl-account-prompt__form h3 {
    margin: 0 0 20px;
    font-family: 'Sora', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0;
    text-align: center;
  }

  .sl-account-prompt__loading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .sl-account-prompt__loading .spinner {
    margin-right: 0;
    height: 16px;
    width: 16px;
  }

  .sl-account-prompt__success {
    max-width: 460px;
    margin: 0 auto;
  }

  .sl-account-prompt__success .submit-button {
    margin-bottom: 0;
  }

  @media (max-width: 760px) {
    .sl-account-prompt-overlay {
      padding-top: 72px;
    }

    .sl-account-prompt {
      padding: 28px 22px;
    }

    .sl-account-prompt__grid {
      grid-template-columns: 1fr;
      gap: 24px;
    }

    .sl-account-prompt__story {
      text-align: center;
    }

    .sl-account-prompt__story h2 {
      font-size: 2rem;
    }

    .sl-account-prompt__story p {
      max-width: none;
      margin-right: auto;
      margin-left: auto;
    }

    .sl-account-prompt__metrics {
      display: none;
    }

  }

  @media (max-width: 520px) {
    .sl-account-prompt {
      max-width: calc(100% - 20px);
      padding: 24px 18px;
    }

    .sl-account-prompt__metrics {
      display: none;
    }
  }

  .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; }
  }

  @media (max-width: 900px) {
    .sl-home-hero-grid,
    .sl-membership-hero-grid {
      grid-template-columns: 1fr;
      gap: 32px;
    }
    .sl-newsletter-grid {
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas: "intro" "card" "archive";
      row-gap: 32px;
    }
  }

  @media (max-width: 520px) {
    .sl-home-community-actions {
      gap: 8px;
    }
  }

/* 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: #ffffff;
    --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%); }
  /* The Log in / Create account modal lives inside the header; a transform
     would make the header the containing block of its fixed overlay (a
     120px strip, no blurred backdrop), e.g. the offer link's #pricing. */
  body.ltt-modal-auth-open .ltt-header { transform: none; transition: none; }

  .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.38); box-shadow: 0 28px 72px rgba(0,0,0,0.48), 0 0 60px rgba(141,181,255,0.28); }

  /* 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); }

  /* One-column tools menu (Feature 112, gate Q12 A): material, radius, colours
     and link states copy .ltt-charts-dd and .ltt-charts-dd-links. */
  .ltt-tools-dd { position: absolute; top: calc(100% + 8px); left: 0; z-index: 100;
    border-radius: 14px; padding: 8px; min-width: 280px; display: flex; flex-direction: column; gap: 1px; }
  /* Bridges the 8 px gap below "Tools", so a pointer moving down into the menu
     never leaves the item block (mouseleave would close the menu). */
  .ltt-tools-dd::before { content: ""; position: absolute; left: 0; right: 0; top: -9px; height: 9px; }
  .ltt-header-bar--light .ltt-tools-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-tools-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-tools-dd a { display: flex; align-items: center; justify-content: space-between; gap: 18px;
    padding: 8px 10px; border-radius: 8px; font-size: 14px; font-weight: 500; text-decoration: none; transition: background 100ms ease; }
  .ltt-header-bar--light .ltt-tools-dd a { color: var(--ltt-text-light-muted); }
  .ltt-header-bar--light .ltt-tools-dd a:hover { background: rgba(53,40,24,0.05); color: var(--ltt-text-light); }
  .ltt-header-bar--dark .ltt-tools-dd a { color: var(--ltt-text-dark-muted); }
  .ltt-header-bar--dark .ltt-tools-dd 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; overflow: hidden; }
  /* When the palette (or the mobile drawer) is open, lock the page scroll
     so the blurred scrim always fills the viewport — on mobile, iOS
     address-bar show/hide can otherwise expose un-blurred page content
     beneath a `position: fixed` overlay. */
  body.ltt-scroll-lock,
  body.ltt-modal-auth-open,
  body.ltt-modal-account-prompt-open,
  body.ltt-modal-profile-open,
  body.ltt-modal-open { overflow: hidden; }
  .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; min-width: 0; }
  /* First child is the result title. Let it shrink + truncate so the
     category labels on the right always fit on the same line. */
  .ltt-palette-item > :first-child { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .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-cats { display: inline-flex; flex-wrap: nowrap; gap: 10px; margin-left: auto; align-items: center; flex-shrink: 0; }
  /* On narrow mobile viewports, keep only the first two categories visible
     so each result stays a single line. The full list is still in the
     markup for a11y; visual overflow hides the extras. */
  @media (max-width: 480px) {
    .ltt-palette-item-cats .ltt-palette-item-sub:nth-of-type(n+3) { display: none; }
  }
  /* Category labels — muted sub-visual weight so the result title (left)
     remains the primary read. Matches the JetBrains Mono tone of the
     palette's `.ltt-palette-cat` heading and `.ltt-palette-footer` hints
     ("↑↓ navigate · ↵ open · esc close"): same font, low opacity,
     no background, no border. */
  .ltt-palette-item-sub {
    display: inline-flex; align-items: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.08em;
    line-height: 1; white-space: nowrap;
    opacity: 0.45;
  }
  .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
/* Source: longtermtrends/ltt/pages/shared/components/layout/global-search.html */
  /* Search Bar Styles */
  .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-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-search-container:focus-within {
    box-shadow: 0 0 0 2px rgba(22, 82, 240, 0.15) !important;
  }

  .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-search-input::placeholder {
    color: #6c757d !important;
    font-family: Arial, sans-serif !important;
    font-size: 16px !important;
  }

  .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-search-container {
      width: 250px !important;
    }
  }

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

  @media (max-width: 1100px) {
    .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-search-input {
      display: none !important;
    }

    .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-search-dropdown {
      display: none !important;
    }
  }

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

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

  /* Search Modal Overlay */
  .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-search-modal.show {
    display: flex !important;
  }

  .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-search-modal-header {
    padding: 20px 20px 0 20px !important;
    border-bottom: 1px solid #f1f3f4 !important;
  }

  .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-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-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-search-modal-input::placeholder {
    color: #6c757d !important;
    font-size: 18px !important;
  }

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

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

  .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-search-dropdown-item.active {
    background: #f8f9fa !important;
  }

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

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

  .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-search-dropdown-item-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

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

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

  .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-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;
  }

  /* Multi-category tag pills — rendered per result alongside the type
     badge. Each result can carry 1–3 tags (e.g. Dow-to-Gold-Ratio =
     Stocks + Gold) so the row stays scannable; wrap to a second line
     rather than truncate on narrow widths. Rules intentionally NOT
     scoped under `.global-header-bootstrap-killer` because that class
     is never actually applied to any element in the DOM — the selector
     matches zero elements. */
  .global-header-search-dropdown-item-tags {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
  }
  .global-header-search-dropdown-item-tag {
    display: inline-flex;
    align-items: center;
    font-family: 'JetBrains Mono', monospace;
    background: rgba(200,158,61,0.14);
    border: 1px solid rgba(200,158,61,0.42);
    color: #8a5a14;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1;
    white-space: nowrap;
  }
  [data-theme="dark"] .global-header-search-dropdown-item-tag {
    background: rgba(227,197,124,0.14);
    border: 1px solid rgba(227,197,124,0.44);
    color: #e3c57c;
  }

/* 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.
     Wired to the `--sl-card-*` tokens so these surfaces track the system
     alongside `.sl-chart-surface`. 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. Bloom ellipse sizes mirror the current
     `.sl-chart-surface` (light 60%/28%, dark 70%/48%). */
  .chart-item.tradingview-heatmap .tradingview-widget-container {
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid var(--sl-card-border);
    box-shadow: var(--sl-chart-shadow);
    transition: border-color 400ms ease, box-shadow 400ms ease;
  }
  .sl-void[data-void="light"] .chart-item.tradingview-heatmap .tradingview-widget-container {
    background:
      radial-gradient(ellipse 60% 28% at 50% 0%, rgba(238,214,160,0.32), transparent 60%),
      var(--sl-card-bg);
  }
  .sl-void[data-void="dark"] .chart-item.tradingview-heatmap .tradingview-widget-container {
    background:
      radial-gradient(ellipse 70% 48% at 50% 0%, rgba(227,197,124,0.18), transparent 65%),
      var(--sl-card-bg);
  }
  .chart-item.tradingview-heatmap .tradingview-widget-container:hover {
    border-color: var(--sl-card-hover-border);
    box-shadow: var(--sl-card-hover-shadow);
  }
  /* 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; } }

  /* 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; }