/* ══════════════════════════════════════════════════════════════════════
   content-v2.css, Content pages (legal, admin, about, FMG, error)
   Rem-based · fluid clamp() typography · full breakpoint system
   Base assumption: 1rem = 16px (browser default, never override :root)

   Breakpoints:
     xs   < 30rem  (480px)   small mobile
     sm   < 48rem  (768px)   mobile
     md   < 80rem  (1280px)  tablet / small desktop
     lg   < 120rem (1920px)  1080p desktop
     xl   < 160rem (2560px)  1440p / QHD
     2xl  ≥ 160rem (2560px+) 4K / UHD
══════════════════════════════════════════════════════════════════════ */

/* ── Fluid type scale ───────────────────────────────────────────────── */
:root {
  --ct-2xs:  clamp(0.5625rem, 0.5rem   + 0.15vw, 0.6875rem); /* 9–11px  */
  --ct-xs:   clamp(0.625rem,  0.575rem + 0.2vw,  0.75rem);   /* 10–12px */
  --ct-sm:   clamp(0.6875rem, 0.625rem + 0.25vw, 0.9375rem); /* 11–15px */
  --ct-base: clamp(0.8125rem, 0.75rem  + 0.3vw,  1.0625rem); /* 13–17px */
  --ct-md:   clamp(0.875rem,  0.8rem   + 0.35vw, 1.125rem);  /* 14–18px */
  --ct-lg:   clamp(1rem,      0.9rem   + 0.5vw,  1.5rem);    /* 16–24px */
  --ct-xl:   clamp(1.25rem,   1rem     + 1vw,    2.25rem);   /* 20–36px */
  --ct-hero: clamp(1.5rem,    1.1rem   + 1.5vw,  3rem);      /* 24–48px */

  /* Fluid spacing, replaces hardcoded px gaps/margins */
  --cs-2xs: clamp(0.25rem,  0.2rem  + 0.15vw, 0.375rem);
  --cs-xs:  clamp(0.375rem, 0.3rem  + 0.25vw, 0.625rem);
  --cs-sm:  clamp(0.5rem,   0.4rem  + 0.35vw, 0.875rem);
  --cs-md:  clamp(0.75rem,  0.6rem  + 0.5vw,  1.25rem);
  --cs-lg:  clamp(1rem,     0.8rem  + 0.75vw, 1.75rem);
  --cs-xl:  clamp(1.5rem,   1rem    + 1.25vw, 3rem);
  --cs-2xl: clamp(2rem,     1.5rem  + 2vw,    4.5rem);

  /* Content max-widths, fluid from mobile up to 4K */
  --content-w:      min(92vw, 62rem);    /* full-bleed on mobile, caps at 992px */
  --content-w-wide: min(96vw, 90rem);   /* admin/analytics, caps at 1440px */

  /* Hairline used for table rows/borders, overridden in light mode below */
  --md-hairline:     rgba(255,255,255,.04);
  /* Amber callout body text, overridden in light mode below */
  --md-callout-text: #e0b97a;
  /* Footer bar background, overridden in light mode below */
  --md-footer-bg:    var(--md-surface);
  /* AI-disclaimer red, bright on dark, darker in light for AA contrast */
  --md-error-text:   #ff4444;
}

/* ── Light mode (content pages only; the dashboard stays dark) ──────────
   A pre-paint script in _Layout_md3v2 sets html[data-theme] from the saved
   choice, falling back to the OS (prefers-color-scheme). When it resolves to
   "light" we re-point the shared MD3 tokens to a light palette for content
   pages only (body:not(.is-dashboard)). The dashboard and its dark tokens are
   never touched. The body background follows --md-background automatically. */
html[data-theme="light"] body:not(.is-dashboard) {
    color-scheme: light;

    /* MD3 cyan light tonal palette (derived from the dark primary) */
    --md-background:        #f8fafd;
    --md-surface:           #f8fafd;
    --md-surf-1:            #ffffff;
    --md-surf-2:            #eef3f7;
    --md-surf-3:            #e6edf2;

    --md-on-background:     #191c1e;
    --md-on-surface:        #191c1e;
    --md-surface-variant:   #dce4e8;
    --md-on-surface-var:    #40484c;
    --md-outline:           #70787d;
    --md-outline-var:       #c4ccd1;

    --md-primary:           #006780;
    --md-on-primary:        #ffffff;
    --md-primary-container: #b8eafe;
    --md-on-primary-cont:   #001f29;
    --md-secondary:         #46626a;

    --md-hairline:          rgba(0,0,0,.07);
    --md-callout-text:      #8a5a00;
    --md-error-text:        #ba1a1a;   /* MD3 error, ~6:1 on white */

    /* Prominent cyan chrome: header + footer get the primary container tint.
       The brand icon flips to solid primary so it stays distinct from the
       now-tinted header bar. (Dashboard stays dark and is unaffected.) */
    --md-topbar-bg:         var(--md-primary-container);
    --md-brand-icon-bg:     var(--md-primary);
    --md-brand-icon-fg:     var(--md-on-primary);
    --md-footer-bg:         var(--md-primary-container);
}

/* ── Theme toggle button (header trail, content pages only) ───────────── */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  border-radius: var(--shape-full);
  background: transparent;
  color: var(--md-on-background);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 150ms ease, color 150ms ease;
}
.theme-toggle:hover  { background: color-mix(in srgb, var(--md-on-background) 8%, transparent); }
.theme-toggle:active { background: color-mix(in srgb, var(--md-on-background) 12%, transparent); }
.theme-toggle:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 2px; }
.theme-toggle svg { width: 1.25rem; height: 1.25rem; }
/* Show the current state: sun while in light mode, moon while in dark mode.
   (Dark is the default, so the sun is hidden until data-theme="light".) */
.theme-toggle .theme-toggle-sun { display: none; }
html[data-theme="light"] .theme-toggle .theme-toggle-moon { display: none; }
html[data-theme="light"] .theme-toggle .theme-toggle-sun  { display: block; }

/* Smooth crossfade only while toggling (the .theme-anim class is added by the
   toggle handler for ~250ms, so page load and hovers are never animated). */
@media (prefers-reduced-motion: no-preference) {
  html.theme-anim,
  html.theme-anim * {
    transition: background-color .25s ease, color .25s ease,
                border-color .25s ease, fill .25s ease;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   LEGAL / CONTENT PAGE SHELL
══════════════════════════════════════════════════════════════════════ */
.legal-page {
  max-width: var(--content-w);
  margin: var(--cs-lg) auto var(--cs-2xl);   /* tighter top gap under the header; keep bottom breathing room */
  padding: 0 var(--cs-xl) var(--cs-2xl);
}
.legal-page a { color: var(--md-primary); }
.legal-page a:hover { opacity: .8; }

/* ── Hero ───────────────────────────────────────────────────────────── */
.legal-hero {
  background: var(--md-surf-1);
  border: 1px solid var(--md-outline-var);
  border-radius: var(--shape-xl);
  padding: var(--cs-2xl) var(--cs-2xl) var(--cs-xl);
  margin-bottom: var(--cs-xl);
  position: relative;
  overflow: hidden;
}
.legal-hero::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--md-primary), var(--md-secondary));
  border-radius: var(--shape-xl) var(--shape-xl) 0 0;
}
.legal-hero-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--ct-xs);
  font-weight: 700;
  color: var(--md-primary);
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: var(--cs-xs);
}
.legal-hero-title {
  font-family: var(--font-display);
  font-size: var(--ct-xl);
  font-weight: 700;
  color: var(--md-on-background);
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: var(--cs-md);
}
.legal-hero-meta {
  display: flex; flex-wrap: wrap; gap: var(--cs-lg);
  font-family: var(--font-mono);
  font-size: var(--ct-xs);
  color: var(--md-on-surface-var);
}
.legal-hero-meta span { display: flex; align-items: center; gap: 0.375rem; }
.legal-hero-meta span::before {
  content: ''; display: block;
  width: 0.3125rem; height: 0.3125rem; border-radius: 50%;
  background: var(--md-primary); opacity: .6;
}
/* Shared "stale data" pill (amber warning tonal). MD3 tonal + full (pill) shape;
   same component is defined in main-dashboard.css for the AI Mood popup. Amber
   reads as caution (data is behind), not error. Theme-safe: bright amber on
   dark, darker amber text on the lighter fill in light mode. */
.stale-pill {
  display: inline-flex; align-items: center;
  padding: 0.0625rem 0.5rem;
  border-radius: var(--shape-full, 999px);
  background: color-mix(in srgb, #FFB300 22%, transparent);
  color: #FFB300;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
html[data-dash-theme="light"] .stale-pill {
  color: #8A5A00;
  background: color-mix(in srgb, #FFB300 30%, transparent);
}
.legal-hero-meta .stale-pill::before { display: none; }

/* ── Back link → "Free Live Dashboard" CTA ──────────────────────────────
   Not a quiet breadcrumb anymore: a gradient pill with a pulsing LIVE dot
   and a breathing glow, the first thing the eye lands on. */
.legal-back,
.legal-page a.legal-back {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: var(--ct-sm);
  font-weight: 700;
  color: var(--md-on-primary, #06282e);
  text-decoration: none;
  padding: 0.6rem 1.25rem;
  border-radius: var(--shape-full);
  border: none;
  background: var(--md-primary);
  margin-bottom: var(--cs-lg);
  transition: transform .18s cubic-bezier(0.2, 0, 0, 1), box-shadow .18s;
  letter-spacing: .04em;
  box-shadow: var(--md-elev-1, 0 1px 3px rgba(0, 0, 0, .3));
}
.legal-back:hover,
.legal-page a.legal-back:hover {
  color: var(--md-on-primary, #06282e);
  opacity: 1;
  transform: translateY(-2px) scale(1.03);
  box-shadow: var(--md-elev-2, 0 4px 14px rgba(0, 0, 0, .28));
  filter: brightness(1.06);
}
.legal-back::after { content: '\2192'; font-size: var(--ct-md); }
/* Live equalizer bars: three bars rising and falling like a moving market.
   currentColor so they follow the button's on-primary role in both themes. */
.eq-bars {
  display: inline-flex; align-items: flex-end; gap: 2px;
  width: 14px; height: 13px;
}
.eq-bars i {
  flex: 1;
  background: currentColor;
  border-radius: 1px;
  animation: eq-bounce 1.1s ease-in-out infinite;
}
.eq-bars i:nth-child(1) { animation-delay: 0s;    }
.eq-bars i:nth-child(2) { animation-delay: -0.35s; }
.eq-bars i:nth-child(3) { animation-delay: -0.7s;  }
@keyframes eq-bounce {
  0%, 100% { height: 30%; }
  50%      { height: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .eq-bars i { animation: none; height: 60%; }
  .eq-bars i:nth-child(2) { height: 100%; }
}

/* ── Table of contents ──────────────────────────────────────────────── */
.legal-toc {
  background: var(--md-surf-1);
  border: 1px solid var(--md-outline-var);
  border-radius: var(--shape-lg);
  padding: var(--cs-lg) var(--cs-xl);
  margin-bottom: var(--cs-xl);
}
.legal-toc-title {
  font-family: var(--font-mono);
  font-size: var(--ct-xs);
  font-weight: 700;
  color: var(--md-on-surface-var);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: var(--cs-md);
}
.legal-toc ol {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem var(--cs-xl);
}
.legal-toc ol li a {
  font-family: var(--font-body);
  font-size: var(--ct-base);
  color: var(--md-primary);
  text-decoration: none;
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.25rem 0;
  transition: color .15s;
}
.legal-toc ol li a:hover { color: var(--md-on-primary-cont); }
.legal-toc ol li a .toc-num {
  font-family: var(--font-mono);
  font-size: var(--ct-xs);
  font-weight: 700;
  color: var(--md-on-surface-var);
  min-width: 1.125rem;
}

/* ── Section card ───────────────────────────────────────────────────── */
.legal-section {
  background: var(--md-surf-1);
  border: 1px solid var(--md-outline-var);
  border-radius: var(--shape-lg);
  padding: var(--cs-xl) var(--cs-2xl);
  margin-bottom: var(--cs-md);
  scroll-margin-top: 5rem;
}
.legal-section-header {
  display: flex; align-items: baseline; gap: var(--cs-md);
  margin-bottom: var(--cs-md);
  padding-bottom: var(--cs-md);
  border-bottom: 1px solid var(--md-outline-var);
}
.legal-section-num {
  font-family: var(--font-mono);
  font-size: var(--ct-xs);
  font-weight: 700;
  color: var(--md-primary);
  letter-spacing: .1em;
  min-width: 1.75rem;
  flex-shrink: 0;
}
.legal-section-title {
  font-family: var(--font-display);
  font-size: var(--ct-lg);
  font-weight: 700;
  color: var(--md-on-background);
  line-height: 1.3;
}
.legal-subhead {
  font-family: var(--font-display);
  font-size: var(--ct-md);
  font-weight: 700;
  color: var(--md-on-background);
  line-height: 1.35;
  margin: var(--cs-lg) 0 var(--cs-sm);
}

/* ── Dashboard CTA (funnels content-page readers into the live dashboard) ── */
/* Hidden by default; JS in _DashboardCta.cshtml reveals it only for visitors
   who arrived from outside the site (not internal nav). Two classes so this
   wins over the .dash-cta display rule below. */
.dash-cta.dash-cta--prehide { display: none; }
.dash-cta {
  display: flex; align-items: center; gap: var(--cs-lg);
  margin: var(--cs-lg) 0 var(--cs-xl);
  padding: var(--cs-lg) var(--cs-xl);
  border-radius: var(--shape-lg);
  background: linear-gradient(135deg,
      color-mix(in srgb, var(--md-primary) 14%, var(--md-surf-3)) 0%,
      var(--md-surf-3) 72%);
  border: 1px solid color-mix(in srgb, var(--md-primary) 30%, transparent);
  text-decoration: none;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.dash-cta:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--md-primary) 55%, transparent);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--md-primary) 20%, transparent);
}
.dash-cta-live {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-mono); font-size: .7rem; font-weight: 700;
  letter-spacing: .12em; color: var(--md-error-text); flex-shrink: 0;
}
.dash-cta-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--md-error-text);
  animation: dash-cta-pulse 1.8s ease-in-out infinite;
}
.dash-cta-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.dash-cta-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--ct-lg); color: var(--md-on-background); line-height: 1.25;
}
.dash-cta-sub {
  font-family: var(--font-body); font-size: var(--ct-sm);
  color: var(--md-on-surface-var); line-height: 1.4;
}
.dash-cta-free, .dash-exit-free {
  /* Text uses the on-surface role (guaranteed AA contrast on the card); primary
     is used only as the icon + border accent, never as the text colour. */
  display: inline-flex; align-items: center; gap: .3rem; width: fit-content;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--md-on-background);
  background: color-mix(in srgb, var(--md-primary) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--md-primary) 40%, transparent);
  padding: 3px 10px; border-radius: 999px;
}
.dash-cta-free { margin-top: .3rem; }
.dash-exit-free { margin: .15rem 0 var(--cs-md); }
.dash-cta-free .material-symbols-outlined,
.dash-exit-free .material-symbols-outlined { font-size: 15px; color: var(--md-primary); }
.dash-cta-action {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: .4rem;
  padding: .6rem 1.15rem; border-radius: 999px;
  background: var(--md-primary); color: var(--md-on-primary);
  font-family: var(--font-body); font-weight: 600; font-size: var(--ct-sm);
  white-space: nowrap;
}
.dash-cta:hover .dash-cta-action { background: color-mix(in srgb, var(--md-primary) 88%, #000); }
.dash-cta-action .material-symbols-outlined { font-size: 18px; transition: transform .15s ease; }
.dash-cta:hover .dash-cta-action .material-symbols-outlined { transform: translateX(3px); }

@keyframes dash-cta-pulse {
  0%, 100% { opacity: 1;  transform: scale(1); }
  50%      { opacity: .4; transform: scale(.8); }
}
@media (max-width: 640px) {
  .dash-cta { flex-direction: column; align-items: flex-start; gap: var(--cs-md); }
  .dash-cta-action { align-self: stretch; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .dash-cta-dot { animation: none; }
  .dash-cta:hover { transform: none; }
}

/* ── Exit-intent modal (desktop, external landers, once/session) ─────────── */
.dash-exit { position: fixed; inset: 0; z-index: 5000; }
.dash-exit[hidden] { display: none; }
.dash-exit-scrim {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.5);
  opacity: 0; transition: opacity .22s ease;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.dash-exit.open .dash-exit-scrim { opacity: 1; }
.dash-exit-dialog {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -48%) scale(.97);
  width: min(440px, calc(100vw - 32px));
  box-sizing: border-box;
  padding: var(--cs-xl) var(--cs-xl) var(--cs-lg);
  border-radius: var(--shape-lg);
  background: var(--md-surf-3);
  /* signature cyan -> purple glow, matching the AI Mood popup + nav drawer */
  box-shadow:
    0 0 0 1px rgba(6,182,212,.5),
    0 0 0 3px rgba(168,85,247,.2),
    0 0 40px rgba(6,182,212,.18),
    0 24px 60px rgba(0,0,0,.55);
  opacity: 0;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), opacity .2s ease;
}
.dash-exit.open .dash-exit-dialog { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.dash-exit-close {
  position: absolute; top: .6rem; right: .6rem;
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border: none; background: none; border-radius: 50%; cursor: pointer;
  color: var(--md-on-surface-var); transition: background .15s;
}
.dash-exit-close:hover { background: color-mix(in srgb, var(--md-on-background) 8%, transparent); }
.dash-exit-live {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-mono); font-size: .7rem; font-weight: 700;
  letter-spacing: .12em; color: var(--md-error-text);
}
.dash-exit-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--md-error-text);
  animation: dash-cta-pulse 1.8s ease-in-out infinite;
}
.dash-exit-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--ct-xl); color: var(--md-on-background);
  line-height: 1.2; margin: .5rem 0 .35rem;
}
.dash-exit-sub {
  font-family: var(--font-body); font-size: var(--ct-sm);
  color: var(--md-on-surface-var); line-height: 1.5; margin: 0 0 var(--cs-sm);
}
.dash-exit-list {
  list-style: none; margin: 0 0 var(--cs-lg); padding: 0;
  display: grid; gap: .45rem;
}
.dash-exit-list li {
  position: relative; padding-left: 1.5rem;
  font-family: var(--font-body); font-size: var(--ct-sm);
  color: var(--md-on-surface-var); line-height: 1.4;
}
.dash-exit-list li::before {
  content: 'check'; font-family: 'Material Symbols Outlined';
  position: absolute; left: 0; top: 0;
  font-size: 1rem; color: var(--md-primary);
}
.about-newhere {
  font-family: var(--font-body); font-size: var(--ct-sm);
  color: var(--md-on-surface-var); margin: 0 0 var(--cs-lg);
}
.about-newhere a { color: var(--md-primary); text-decoration: none; }
.about-newhere a:hover { text-decoration: underline; }
.dash-exit-action {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .7rem 1.3rem; border-radius: 999px;
  background: var(--md-primary); color: var(--md-on-primary) !important;
  font-family: var(--font-body); font-weight: 600; font-size: var(--ct-sm);
  text-decoration: none;
}
.dash-exit-action .material-symbols-outlined { font-size: 18px; }
.dash-exit-action:hover { background: color-mix(in srgb, var(--md-primary) 88%, #000); }

@media (prefers-reduced-motion: reduce) {
  .dash-exit-dot { animation: none; }
  .dash-exit-scrim, .dash-exit-dialog { transition: none; }
}
.legal-section p {
  font-family: var(--font-body);
  font-size: var(--ct-md);
  line-height: 1.75;
  color: var(--md-on-surface);
  margin-bottom: var(--cs-md);
}
.legal-section p:last-child { margin-bottom: 0; }
.legal-section ul { padding-left: var(--cs-xl); margin-bottom: var(--cs-md); }
.legal-section ul li {
  font-family: var(--font-body);
  font-size: var(--ct-md);
  line-height: 1.75;
  color: var(--md-on-surface);
  margin-bottom: 0.25rem;
}
.legal-section ul li::marker { color: var(--md-primary); }

/* ── Callout / warning block ────────────────────────────────────────── */
.legal-callout {
  background: rgba(255,167,38,.07);
  border: 1px solid rgba(255,167,38,.25);
  border-left: 3px solid var(--amber);
  border-radius: var(--shape-sm);
  padding: var(--cs-lg) var(--cs-xl);
  margin: var(--cs-md) 0;
}
.legal-callout p {
  font-size: var(--ct-base) !important;
  color: var(--md-callout-text) !important;
  margin-bottom: 0 !important;
}

/* ── Contact card ───────────────────────────────────────────────────── */
.legal-contact {
  background: var(--md-primary-container);
  border: 1px solid rgba(77,208,225,.2);
  border-radius: var(--shape-lg);
  padding: var(--cs-xl) var(--cs-2xl);
  margin-top: var(--cs-xl);
  display: flex; align-items: center; gap: var(--cs-xl);
}
.legal-contact-icon {
  width: 3rem; height: 3rem;
  border-radius: var(--shape-md);
  background: rgba(77,208,225,.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.375rem;
  flex-shrink: 0;
}
.legal-contact-body { flex: 1; }
.legal-contact-body strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--ct-md);
  font-weight: 700;
  color: var(--md-on-primary-cont);
  margin-bottom: 0.25rem;
}
.legal-contact-body span {
  font-family: var(--font-body);
  font-size: var(--ct-base);
  color: var(--md-on-primary-cont);
  opacity: .8;
}
.legal-contact-body a { color: var(--md-on-primary-cont); font-weight: 600; }

/* ── Modifier: variants ─────────────────────────────────────────────── */
.legal-page--wide        { max-width: var(--content-w-wide); }
.legal-section--highlight { border-left: 3px solid var(--md-primary); }
.legal-section--table    { padding: 0; overflow-x: auto; }
.legal-section--mt       { margin-top: var(--cs-xl); }
.legal-contact--spaced   { margin-top: var(--cs-2xl); }

/* ── Support buttons ────────────────────────────────────────────────── */
.support-links {
  display: flex; gap: 0.875rem; flex-wrap: wrap; margin-top: 1rem;
}
.support-btn {
  display: inline-flex; align-items: center; gap: 0.625rem;
  padding: 0.6875rem 1.25rem;
  border-radius: 0.625rem;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: var(--ct-md);
  font-weight: 600;
  color: var(--md-on-surface);
  background: var(--md-surface);
  border: 1.5px solid var(--md-outline-var);
  transition: border-color .15s, transform .15s, background .15s;
}
.support-btn:hover { transform: translateY(-2px); background: var(--md-primary-container); }
.support-btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.625rem; height: 1.625rem; border-radius: 0.375rem;
  font-size: 0.9375rem; flex-shrink: 0;
}
.support-btn-body { display: flex; flex-direction: column; }
.support-btn-name { font-size: var(--ct-md); font-weight: 700; color: var(--md-on-surface); line-height: 1.2; }
.support-btn-sub  { font-size: var(--ct-xs); font-weight: 400; color: var(--md-on-surface); opacity: .7; margin-top: 0.0625rem; }
.support-btn-bmc  .support-btn-icon { background: #FFDD00; }
.support-btn-kofi .support-btn-icon { background: #29abe0; }
.support-btn-bmc:hover  { border-color: #FFDD00; }
.support-btn-kofi:hover { border-color: #29abe0; }

/* ── Table of contents ──────────────────────────────────────────────── */
.legal-section-num.wn-date {
  font-size: var(--ct-xs);
  min-width: 2.75rem;
  background: var(--md-primary-container);
  color: var(--md-on-primary-cont);
  border-radius: 0.375rem;
  padding: 0.125rem 0.5rem;
  letter-spacing: .04em;
}
.wn-list { padding-left: var(--cs-xl); margin: 0; }
.wn-list li {
  font-family: var(--font-body);
  font-size: var(--ct-md);
  line-height: 1.75;
  color: var(--md-on-surface);
  margin-bottom: 0.375rem;
}
.wn-list li::marker { color: var(--md-primary); }

/* ══════════════════════════════════════════════════════════════════════
   DATA SOURCES PAGE
══════════════════════════════════════════════════════════════════════ */
.ds-table {
  width: 100%; border-collapse: collapse;
  font-size: var(--ct-base);
  margin-top: var(--cs-md);
}
.ds-table th {
  text-align: left; padding: var(--cs-xs) var(--cs-md);
  font-family: var(--font-mono);
  font-size: var(--ct-xs);
  font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--md-on-surface-var);
  border-bottom: 1px solid var(--md-outline-var);
}
.ds-table td {
  padding: var(--cs-xs) var(--cs-md);
  color: var(--md-on-surface);
  border-bottom: 1px solid var(--md-hairline);
  vertical-align: top;
}
.ds-table tr:last-child td { border-bottom: none; }
.ds-table tr:hover td { background: var(--md-surf-2); }
.ds-table-note {
  margin-top: var(--cs-md);
  font-size: var(--ct-xs);
  color: var(--md-on-surface-var);
}
.ds-compare-p    { margin-top: 0.75rem; }
.ds-compare-link { color: var(--md-primary); font-weight: 600; }

/* Generic responsive wrapper: lets any content table scroll horizontally on
   narrow screens instead of overflowing the page. Reusable across pages. */
.content-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: var(--cs-md); }
.content-table-wrap .ds-table { margin-top: 0; }

/* ── MD3 Expressive table card (guide pages) ──────────────────────────
   Opt-in skin over ds-table / va-table: the table becomes a tonal card
   (large corner, contained surface), the header row gets a tonal fill
   with Label type in sentence case instead of the admin mono-caps, and
   rows keep a gentle hover state layer. Admin tables are untouched. */
.md3-table-card {
  border: 1px solid var(--md-outline-var);
  border-radius: 16px;                        /* shape.corner.large */
  background: var(--md-surf-1);
  overflow: hidden; overflow-x: auto;
  margin-top: var(--cs-md);
}
.md3-table-card table { margin-top: 0; }
.md3-table-card th {
  background: var(--md-surf-3);               /* tonal header band */
  font-family: var(--font-body);
  font-size: var(--ct-sm);
  font-weight: 700;                           /* Label Large, Emphasized */
  letter-spacing: .01em; text-transform: none;
  color: var(--md-on-surface);
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--md-outline-var);
}
.md3-table-card td { padding: 0.7rem 1rem; }

/* Alternating row tint: traces a row across wide multi-column tables (MD3 §4).
   Hover uses surf-3 so it still reads as a state change on striped rows. */
.md3-table-card tbody tr:nth-child(even) td { background: var(--md-surf-2); }
.md3-table-card tbody tr:hover td { background: var(--md-surf-3); }

/* Sticky identity column: on narrow screens the card scrolls horizontally and
   the row label would scroll out of view. Backgrounds must be opaque here, or
   scrolled cells show through. Header sits above it on the z axis. */
.md3-table-card th:first-child,
.md3-table-card td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  font-weight: 600;                           /* row identity leads */
  background: var(--md-surf-1);
  border-right: 1px solid var(--md-outline-var);
}
.md3-table-card th:first-child { background: var(--md-surf-3); z-index: 2; }
.md3-table-card tbody tr:nth-child(even) td:first-child { background: var(--md-surf-2); }
.md3-table-card tbody tr:hover td:first-child { background: var(--md-surf-3); }

/* ── Comparison table ───────────────────────────────────────────────── */
.cmp-table {
  width: 100%; border-collapse: collapse;
  font-size: var(--ct-base);
  margin-top: var(--cs-md);
}
.cmp-table th {
  text-align: center; padding: var(--cs-xs) var(--cs-md);
  font-family: var(--font-mono);
  font-size: var(--ct-xs);
  font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--md-on-surface-var);
  border-bottom: 2px solid var(--md-outline-var);
}
.cmp-table th:first-child { text-align: left; }
.cmp-table td {
  padding: var(--cs-xs) var(--cs-md);
  text-align: center;
  color: var(--md-on-surface);
  border-bottom: 1px solid var(--md-hairline);
}
.cmp-table td:first-child { text-align: left; font-weight: 600; }
.cmp-table tr:last-child td { border-bottom: none; }
.cmp-table tr:hover td { background: var(--md-surf-2); }
.cmp-table .cmp-gmd { color: var(--md-primary); font-weight: 700; }
.cmp-yes  { color: var(--gain); font-weight: 700; }
.cmp-no   { color: var(--md-outline); }
.cmp-part { color: var(--amber, #f59e0b); }

/* ══════════════════════════════════════════════════════════════════════
   ABOUT PAGE
══════════════════════════════════════════════════════════════════════ */
.about-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13.75rem, 1fr));
  gap: 1rem;
  margin-top: 0.75rem;
}
.about-feature-card {
  background: var(--md-surface-2);
  border: 1px solid var(--md-outline-var);
  border-radius: 0.75rem;
  padding: 1rem;
}
.about-feature-title {
  font-size: var(--ct-base);
  font-weight: 700;
  color: var(--md-primary);
  margin-bottom: 0.375rem;
}
.about-feature-card p {
  font-size: var(--ct-xs);
  color: var(--md-on-surface-var);
  line-height: 1.6;
  margin: 0;
}

.about-faq { display: flex; flex-direction: column; gap: 1rem; margin-top: 0.75rem; }
.about-faq-item {
  border-left: 3px solid var(--md-primary);
  padding-left: 1rem;
}
.about-faq-q {
  font-size: var(--ct-md);
  font-weight: 700;
  color: var(--md-on-surface);
  margin: 0 0 0.375rem;
}
.about-faq-a {
  font-size: var(--ct-base);
  color: var(--md-on-surface-var);
  line-height: 1.6;
  margin: 0;
}

.about-comparison-wrap { overflow-x: auto; }
/* ── Footer link nav, MD3 icon list in a tonal card ────────────────── */
.content-footer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.25rem 1.5rem;
  margin-top: var(--cs-xl);
  padding: 1.25rem 1.5rem;
  background: var(--md-footer-bg);
  border: 1px solid var(--md-outline-var);
  border-radius: 16px;
}
.content-footer-copy {
  margin: 0.75rem 0 0;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--md-on-surface-var);
}
.content-footer-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6875rem 0.75rem;
  border-radius: 10px;
  color: var(--md-on-surface);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 120ms ease, color 120ms ease;
}
.content-footer-link .material-symbols-outlined {
  font-size: 20px;
  color: var(--md-primary);
  transition: color 120ms ease;
}
.content-footer-link:hover {
  background-color: color-mix(in srgb, var(--md-primary) 8%, transparent);
  color: var(--md-primary);
}
.content-footer-link:active {
  background-color: color-mix(in srgb, var(--md-primary) 12%, transparent);
}
.content-footer-link:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: 2px;
  background-color: color-mix(in srgb, var(--md-primary) 12%, transparent);
}

/* ── AI disclaimer ──────────────────────────────────────────────────── */
.ai-disclaimer-section { border-left: 4px solid var(--md-error-text); }
.ai-disclaimer-num     { color: var(--md-error-text); }
.ai-disclaimer-title   { color: var(--md-error-text); }
.ai-callout     { border-color: var(--md-error-text); background: rgba(255,68,68,0.08); }
.ai-callout--mt { border-color: var(--md-error-text); background: rgba(255,68,68,0.08); margin-top: 0.75rem; }
.ai-callout-warning { color: var(--md-error-text); font-weight: 700; }
.ai-callout-bold    { font-weight: 700; }

/* ── Utility links ──────────────────────────────────────────────────── */
.content-link       { color: var(--md-primary); font-weight: 600; }
.content-link-plain { color: var(--md-primary); }
.kofi-btn-img       { border: 0; height: 2.25rem; }

/* ══════════════════════════════════════════════════════════════════════
   ADMIN, VISITOR ANALYTICS
══════════════════════════════════════════════════════════════════════ */
.status-strip     { display: none !important; }
.bottom-row       { display: none !important; }
footer.movers-bar { display: none !important; }

/* SignalR live indicators are meaningless on static content pages (no hub
   connection here) and clash with the light header bar, hide them. */
.chip-live        { display: none !important; }
#conn-status      { display: none !important; }

.va-wrap {
  max-width: var(--content-w-wide);
  margin: 0 auto;
  padding: var(--cs-xl) var(--cs-md);
}
.va-hero { margin-bottom: var(--cs-xl); }
.va-hero-eyebrow {
  font-size: var(--ct-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--md-primary);
  margin-bottom: 0.375rem;
}
.va-hero-title {
  font-size: clamp(1.625rem, 4vw, 2.375rem);
  font-weight: 800;
  color: var(--md-on-surface);
  line-height: 1.15;
}
.va-hero-sub {
  font-size: var(--ct-sm);
  color: var(--md-on-surface-var);
  margin-top: 0.375rem;
}
.va-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--cs-md);
  margin-bottom: var(--cs-xl);
}
.va-kpi {
  background: var(--md-surface-1);
  border: 1px solid var(--md-outline-var);
  border-radius: 1rem;
  padding: var(--cs-md) var(--cs-lg);
}
.va-kpi-label {
  font-size: var(--ct-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--md-on-surface-var);
  margin-bottom: 0.5rem;
}
.va-kpi-value {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  color: var(--md-primary);
  line-height: 1;
}
.va-kpi-sub {
  font-size: var(--ct-xs);
  color: var(--md-on-surface-var);
  margin-top: 0.25rem;
}
.va-kpi--live                  { border-color: var(--gain); }
.va-kpi--live .va-kpi-label    { color: var(--gain); }
.va-kpi--live .va-kpi-value    { color: var(--gain); }

.va-kpi--peak                  { border-color: #a855f7; }
.va-kpi--peak .va-kpi-label    { color: #a855f7; }
.va-kpi--peak .va-kpi-value    { color: #a855f7; }

.va-card {
  background: var(--md-surface-1);
  border: 1px solid var(--md-outline-var);
  border-radius: 1rem;
  padding: var(--cs-lg);
  margin-bottom: var(--cs-md);
}
.va-card-title {
  font-size: var(--ct-sm);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--md-on-surface-var);
  margin-bottom: var(--cs-md);
}
.va-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
  gap: var(--cs-md);
  margin-bottom: var(--cs-xl);
}
.va-bar-row {
  display: flex; align-items: center; gap: 0.625rem;
  margin-bottom: 0.625rem;
  font-size: var(--ct-md);
}
.va-bar-label {
  flex: 0 0 auto; width: 10.625rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--md-on-surface); font-weight: 500;
}
.va-bar-track {
  flex: 1; background: var(--md-outline-var);
  border-radius: 0.25rem; height: 0.4375rem; overflow: hidden;
}
.va-bar-fill { height: 100%; border-radius: 0.25rem; background: var(--md-primary); }
.va-bar-count {
  flex: 0 0 2.75rem; text-align: right;
  color: var(--md-on-surface-var);
  font-size: var(--ct-base);
}
.va-hourly {
  display: flex; align-items: flex-end; gap: 0.1875rem;
  height: 3.75rem; margin-bottom: var(--cs-lg);
}
.va-hourly-col {
  flex: 1; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
}
.va-hourly-bar {
  width: 100%; background: var(--md-primary);
  border-radius: 0.125rem 0.125rem 0 0;
  opacity: .65; min-height: 0.125rem;
}
.va-hourly-hr {
  margin-top: 0.1875rem;
  font-size: 0.5625rem; line-height: 1;
  color: var(--md-on-surface-var);
  font-variant-numeric: tabular-nums;
}
.va-table-wrap { overflow-x: auto; }
.va-table { width: 100%; border-collapse: collapse; font-size: var(--ct-base); }
.va-table th {
  text-align: left; padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--md-outline-var);
  font-size: var(--ct-xs);
  font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--md-on-surface-var);
}
.va-table td {
  padding: 0.5625rem 0.75rem;
  border-bottom: 1px solid var(--md-hairline);
  color: var(--md-on-surface); vertical-align: top;
  max-width: 13.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* IP cell must never truncate: a full IPv6 + the confirmed check need to stay
   visible. The admin table has the horizontal room (it can scroll if needed). */
.va-table td.va-ip-cell { max-width: none; overflow: visible; text-overflow: clip; }
.va-table tr:last-child td { border-bottom: none; }
.va-table tr:hover td { background: var(--md-surf-2); }
/* Prose comparison tables (e.g. Trader vs Gambler): cells wrap to full, clear
   sentences instead of the compact admin-table ellipsis truncation. */
.va-table--wrap td { white-space: normal; max-width: none; overflow: visible; text-overflow: clip; }
/* Small info-icon link (e.g. glance-table label -> matching FAQ answer). */
.fmg-faq-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; margin-left: 0.1rem; vertical-align: middle; color: var(--md-primary); text-decoration: none; opacity: .7; }
.fmg-faq-icon:hover { opacity: 1; }
.fmg-faq-icon .material-symbols-outlined { font-size: 1.15rem; }
/* Numbered steps inside a FAQ answer (e.g. how to stay disciplined). */
.fmg-steps { margin: 0.5rem 0 0; padding-left: 1.25rem; }
.fmg-steps li { margin-bottom: 0.5rem; line-height: 1.55; }

/* ── Trader / Gambler self-test quiz ──────────────────────────────────────── */
.quiz-form { display: grid; gap: 0.85rem; }
.quiz-q { border: 1px solid var(--md-outline-var); border-radius: 0.9rem; padding: 1rem 1.1rem; margin: 0; background: var(--md-surf-2, var(--md-surface)); }
.quiz-q-text { font-weight: 600; line-height: 1.5; margin: 0 0 0.85rem; }
.quiz-q-num { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; margin-right: 0.45rem; border-radius: 50%; background: var(--md-primary); color: #fff; font-size: var(--ct-xs); font-weight: 700; }
.quiz-scale { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; flex-wrap: wrap; }
.quiz-scale-end { font-size: var(--ct-xs); color: var(--md-on-surface-var); flex: 0 0 auto; }
.quiz-scale label { cursor: pointer; position: relative; }
.quiz-scale input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.quiz-scale label span { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1.5px solid var(--md-outline-var); font-weight: 700; transition: background .15s, border-color .15s, color .15s; }
.quiz-scale input:checked + span { background: var(--md-primary); border-color: var(--md-primary); color: #fff; }
.quiz-scale input:focus-visible + span { outline: 2px solid var(--md-primary); outline-offset: 2px; }
.quiz-submit { margin-top: 0.35rem; padding: 0.8rem 1.6rem; border: none; border-radius: 2rem; background: var(--md-primary); color: #fff; font-weight: 700; font-size: var(--ct-base); cursor: pointer; }
.quiz-submit:hover:not(:disabled) { filter: brightness(1.08); }
.quiz-submit:disabled { opacity: .45; cursor: not-allowed; }
.quiz-progress { margin-left: 0.75rem; font-size: var(--ct-sm); color: var(--md-on-surface-var); }
.quiz-result { margin-top: 1.5rem; border: 1px solid var(--md-outline-var); border-radius: 1rem; padding: 1.5rem; background: var(--md-surf-2, var(--md-surface)); text-align: center; }
.quiz-result-score { font-size: 2.6rem; font-weight: 800; color: var(--md-primary); line-height: 1.1; }
.quiz-result-score small { font-size: 1.1rem; color: var(--md-on-surface-var); font-weight: 600; }
.quiz-result-title { font-size: 1.4rem; margin: 0.35rem 0 0.75rem; }
.quiz-result-text { line-height: 1.6; margin: 0 auto 1.1rem; max-width: 42rem; }
.quiz-result-cta a { display: inline-block; margin: 0.3rem; }
.quiz-result-cta a.quiz-dash-cta { display: inline-block; margin: 0.3rem 0 0; padding: 0.8rem 1.6rem; border-radius: 2rem; background: var(--md-primary); color: #fff; font-weight: 700; font-size: var(--ct-base); text-decoration: none; }
.quiz-result-cta a.quiz-dash-cta:hover { color: #fff; filter: brightness(1.08); }
.quiz-dash-sub { margin: 0.5rem auto 0; max-width: 32rem; font-size: var(--ct-sm); color: var(--md-on-surface-var); line-height: 1.5; }
/* In the left-aligned intro (vs the centered result box) the sub-line hugs the button */
.quiz-intro .quiz-dash-sub { margin-left: 0.25rem; text-align: left; }

.va-ok { color: var(--md-primary); font-weight: 700; }

/* Admin: Recent Visits card header + on-demand bot-hygiene button */
.va-card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.va-btn {
    font: inherit; font-size: var(--ct-sm); font-weight: 600; line-height: 1;
    color: var(--md-on-primary); background: var(--md-primary);
    border: none; border-radius: 999px; padding: 0.55rem 1.1rem; cursor: pointer;
    transition: filter 120ms ease, opacity 120ms ease;
}
.va-btn:hover { filter: brightness(1.08); }
.va-btn:disabled { opacity: 0.6; cursor: default; }
.va-hygiene-msg { margin-top: 0.6rem; font-size: var(--ct-sm); color: var(--md-on-surface-var); }

/* Smooth in-page anchor jumps (ToC, glance-table info icons), MD3 motion.
   Honors reduced-motion; scroll-margin gives the target a little breathing room. */
@media (prefers-reduced-motion: no-preference) { html, body, main { scroll-behavior: smooth; } }
:target { scroll-margin-top: 1rem; }

/* ── Physical AI guide ────────────────────────────────────────────────────── */
/* MD3 media card: vertical (image on top) on mobile, horizontal (image left,
   text right) on desktop. */
.pai-figure { display: flex; flex-direction: column; margin: 1.25rem 0; border: 1px solid var(--md-outline-var); border-radius: 16px; overflow: hidden; background: var(--md-surf-2, var(--md-surface)); }
.pai-img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
/* Phones: guide images are wide banners, never a full-viewport wall.
   Explicit height cap because aspect-ratio alone has proven unreliable
   in some mobile browsers/WebViews. */
@media (max-width: 48rem) {
  .pai-img { aspect-ratio: auto; height: clamp(140px, 26vh, 230px); object-fit: cover; }
}
.pai-figure figcaption { margin: 0; padding: 0.9rem 1.1rem; font-size: var(--ct-base); color: var(--md-on-surface-var); line-height: 1.5; }
@media (min-width: 641px) {
  .pai-figure { flex-direction: row; align-items: stretch; }
  .pai-img { flex: 0 0 240px; width: 240px; aspect-ratio: auto; height: auto; }
  .pai-figure figcaption { align-self: center; }
  /* Banner variant for portrait/square sources: full-width center-cropped
     strip with the caption below, instead of a skinny image tower next to
     an empty caption cavern. */
  .pai-figure--banner { flex-direction: column; }
  .pai-figure--banner .pai-img { flex: none; width: 100%; height: 300px; }
}
/* Dividends-vs-bonds guide: dual-coded side chips so the two sides of the
   comparison read at a glance - bond = blue + lock (fixed, contractual),
   dividend stock = green + rising chart (growing, at risk). */
.dvb-side {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.1rem 0.55rem; border-radius: var(--shape-full, 999px);
  font-weight: 700; white-space: nowrap;
}
.dvb-side .material-symbols-outlined { font-size: 1rem; }
.dvb-bond { color: #2979FF; background: rgba(41, 121, 255, .10); border: 1px solid rgba(41, 121, 255, .30); }
.dvb-div  { color: #4CAF50; background: rgba(76, 175, 80, .10);  border: 1px solid rgba(76, 175, 80, .30); }
html[data-theme="light"] body:not(.is-dashboard) .dvb-bond { color: #1655b8; }
html[data-theme="light"] body:not(.is-dashboard) .dvb-div  { color: #2e7d32; }
/* Phones: chips must not force wide table columns - drop the pill box,
   keep only the color + icon coding, and let the label wrap. */
@media (max-width: 48rem) {
  .dvb-side { white-space: normal; padding: 0; border: none; background: none; gap: 0.2rem; }
  .dvb-side .material-symbols-outlined { font-size: 0.875rem; }
}

.pai-list { list-style: none; padding: 0; margin: 0.75rem 0; display: grid; gap: 0.6rem; }
.pai-list li { padding: 0.75rem 1rem; border: 1px solid var(--md-outline-var); border-radius: 14px; line-height: 1.55; }
.quiz-share { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 1.1rem; }
.quiz-share-item { display: inline-flex; align-items: center; padding: 0.55rem 1.1rem; border-radius: 2rem; border: 1.5px solid var(--md-outline-var); background: transparent; color: var(--md-on-surface); font-weight: 600; font-size: var(--ct-sm); cursor: pointer; text-decoration: none; }
.quiz-share-item:hover { border-color: var(--md-primary); color: var(--md-primary); }
.va-chip {
  display: inline-block;
  padding: 0.1875rem 0.625rem; border-radius: 0.625rem;
  font-size: var(--ct-xs); font-weight: 700;
  border: 1px solid var(--md-outline-var);
  color: var(--md-on-surface-var);
}
.va-chip.mobile  { border-color: var(--gain);        color: var(--gain); }
.va-chip.tablet  { border-color: var(--amber);       color: var(--amber); }
.va-chip.desktop { border-color: var(--md-primary);  color: var(--md-primary); }
.va-chip--inline { flex: 0 0 auto; }
.va-back {
  display: inline-block; margin-bottom: var(--cs-lg);
  font-size: var(--ct-md); font-weight: 600; color: var(--md-primary);
  text-decoration: none;
}
.va-back:hover { text-decoration: underline; }
.va-empty { font-size: var(--ct-xs); color: var(--md-on-surface-var); }
.va-meta  { font-size: var(--ct-2xs); color: var(--md-on-surface-var); }
.va-td-total { font-weight: 700; color: var(--md-primary); }
.va-td-muted { color: var(--md-on-surface-var); }

/* ══════════════════════════════════════════════════════════════════════
   ADMIN, AFFILIATES
══════════════════════════════════════════════════════════════════════ */
.aff-status-chips  { display: flex; gap: 0.625rem; flex-wrap: wrap; margin-bottom: var(--cs-xl); }
.aff-name          { font-weight: 700; font-size: var(--ct-xs); color: var(--md-on-surface); }
.aff-website       { font-size: var(--ct-2xs); color: var(--md-on-surface-var); }
.aff-website a     { color: var(--md-primary); text-decoration: none; }
.aff-td-panel      { font-size: var(--ct-sm); color: var(--md-on-surface-var); }
.aff-td-payout     { font-size: var(--ct-sm); color: var(--md-on-surface); }
.aff-td-center     { text-align: center; }
.aff-not-set       { font-size: var(--ct-2xs); color: var(--md-on-surface-var); }
.aff-td-notes      { font-size: var(--ct-2xs); color: var(--md-on-surface-var); max-width: 10rem; }
.aff-how-to-list   { font-size: var(--ct-xs); color: var(--md-on-surface-var); line-height: 1.8; }

.aff-mgmt-table { width: 100%; border-collapse: collapse; font-size: var(--ct-xs); }
.aff-mgmt-table th {
  text-align: left; padding: 0.625rem 0.875rem;
  font-size: var(--ct-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--md-on-surface-var); border-bottom: 2px solid var(--md-outline-var);
  white-space: nowrap;
}
.aff-mgmt-table td {
  padding: 0.75rem 0.875rem;
  border-bottom: 1px solid var(--md-outline-var);
  vertical-align: middle;
}
.aff-mgmt-table tr:last-child td { border-bottom: none; }
.aff-mgmt-table tr:hover td { background: var(--md-surf-2); }
.aff-cat-chip {
  font-size: var(--ct-2xs); font-weight: 700; letter-spacing: .06em;
  padding: 0.125rem 0.5rem; border-radius: var(--shape-chip);
  background: var(--md-surf-3); color: var(--md-on-surface-var); white-space: nowrap;
}
.aff-status-chip {
  font-size: var(--ct-2xs); font-weight: 800; letter-spacing: .08em;
  padding: 0.125rem 0.5625rem; border-radius: var(--shape-chip);
  border: 1px solid; white-space: nowrap;
}
.aff-check   { color: var(--gain); font-weight: 700; }
.aff-missing { color: var(--loss); font-weight: 700; }
.aff-link-chip {
  font-size: var(--ct-2xs); font-weight: 700;
  color: var(--gain); text-decoration: none;
  padding: 0.125rem 0.5rem; border-radius: var(--shape-chip);
  background: var(--gain-cont); white-space: nowrap;
}
.aff-apply-btn {
  font-size: var(--ct-2xs); font-weight: 700;
  color: var(--md-primary); text-decoration: none;
  padding: 0.1875rem 0.625rem; border-radius: var(--shape-full);
  border: 1px solid var(--md-primary); white-space: nowrap;
  transition: background .15s;
}
.aff-apply-btn:hover { background: rgba(77,208,225,.1); }

/* ══════════════════════════════════════════════════════════════════════
   FINANCIAL MARKETS GUIDE
══════════════════════════════════════════════════════════════════════ */
.fmg-disclaimer { margin-top: 1rem; }

/* Live-levels band, funnels "markets today" search intent to the live dashboard */
.fmg-live-band {
  margin: var(--cs-lg) 0;
  padding: var(--cs-md) var(--cs-lg);
  border: 1px solid var(--md-outline-var);
  border-left: 3px solid var(--md-primary);
  border-radius: var(--cs-xs);
  background: color-mix(in srgb, var(--md-primary) 6%, transparent);
}
.fmg-live-band-head {
  display: flex; align-items: center; gap: 0.5rem;
  font-weight: 600; margin-bottom: 0.5rem;
}
.fmg-live-dot {
  width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--md-primary);
  animation: fmgLivePulse 2s ease-in-out infinite;
}
@keyframes fmgLivePulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .4;  transform: scale(.8); }
}
@media (prefers-reduced-motion: reduce) {
  .fmg-live-dot { animation: none; }
}
.fmg-live-band a       { color: var(--md-primary); text-decoration: none; }
.fmg-live-band a:hover { text-decoration: underline; }
.fmg-live-cta {
  display: inline-block; margin-top: 0.5rem; font-weight: 600;
}
.fmg-back-top {
  margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.625rem; height: 1.625rem; border-radius: 50%;
  border: 1px solid var(--md-outline-var);
  color: var(--md-primary);
  font-size: var(--ct-md);
  text-decoration: none; flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}
.fmg-back-top:hover { background: var(--md-primary-container); border-color: var(--md-primary); }
.fmg-asset-title {
  font-size: var(--ct-lg);
  font-weight: 700;
  margin: 1.75rem 0 0.5rem;
  color: var(--md-primary);
}
.fmg-asset-title:first-of-type { margin-top: 0.5rem; }
.fmg-sources {
  font-size: var(--ct-sm);
  margin-top: 0.375rem;
  color: var(--md-on-surface-var);
}
.fmg-sources a       { color: var(--md-primary); text-decoration: none; }
.fmg-sources a:hover { text-decoration: underline; }
.fmg-sources-list    { margin: 0.75rem 0 0 1.25rem; line-height: 2; }
.fmg-sources-list a       { color: var(--md-primary); text-decoration: none; }
.fmg-sources-list a:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════════════
   WEEKLY MARKET TRENDS
   Desktop: all sections stacked, pills hidden. Mobile (<=720px): sticky
   quick-jump pills filter to one market at a time (mirrors the dashboard).
══════════════════════════════════════════════════════════════════════ */
.wt-tabs { display: none; }

/* Neutral market label above each section heading (trend is shown by the
   coloured left border, which reads correctly in both light and dark). */
.wt-pill-label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.75rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
  padding: 0.125rem 0.625rem;
  border-radius: var(--shape-full);
  background: var(--md-surf-3);
  color: var(--md-on-surface-var);
  margin-bottom: var(--cs-xs);
}

/* Trend accent: green up, red down, amber mixed. A border avoids the
   contrast pitfalls of coloured text on light backgrounds. */
.wt-trend-up    { border-left: 3px solid var(--gain); }
.wt-trend-down  { border-left: 3px solid var(--loss); }
.wt-trend-mixed { border-left: 3px solid var(--amber); }

/* Trend badge: a coloured circle + direction arrow in each section header,
   so the page reads as more than a wall of text. */
.wt-trend-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.875rem; height: 1.875rem; flex-shrink: 0;
  border-radius: var(--shape-full);
  font-size: 0.9rem; font-weight: 700; line-height: 1;
}
.wt-badge-up    { background: var(--gain-cont);  color: var(--gain); }
.wt-badge-down  { background: var(--loss-cont);  color: var(--loss); }
.wt-badge-mixed { background: var(--amber-cont); color: var(--amber); }
.wt-badge-up::before    { content: "\25B2"; }   /* up triangle */
.wt-badge-down::before  { content: "\25BC"; }   /* down triangle */
.wt-badge-mixed::before { content: "\2192"; }   /* right arrow */

/* Per-section subject image as a small MD3 leading thumbnail in the header
   (renders only when the file exists; falls back to the trend badge). */
.wt-thumb {
  width: 3.5rem; height: 3.5rem;     /* 56dp leading media */
  flex-shrink: 0;
  border-radius: var(--shape-md);    /* 12dp rounded square */
  object-fit: cover;
  background: var(--md-surf-2);
}
/* Center the leading thumbnail against the heading (the shared header uses
   baseline alignment, which would misalign the image). */
.wt-section .legal-section-header { align-items: center; }

.wt-cta { margin-top: var(--cs-sm); }
.wt-cta a {
  color: var(--md-primary); text-decoration: none;
  font-weight: 600; font-size: 0.875rem;
}
.wt-cta a:hover { text-decoration: underline; }

.wt-disclaimer {
  margin-top: var(--cs-lg);
  font-size: 0.8125rem; line-height: 1.5;
  color: var(--md-on-surface-var);
  font-style: italic;
}

@media (max-width: 720px) {
  .wt-tabs {
    display: flex; flex-wrap: nowrap; gap: 0.375rem;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    position: sticky; top: 0.5rem; z-index: 20;
    margin: 0 0 var(--cs-md);
    padding: 0.375rem;
    background: var(--md-surf-2);
    border: 1px solid var(--md-outline-var);
    border-radius: var(--shape-full);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05),
                0 2px 10px rgba(0, 0, 0, 0.28);
  }
  .wt-tabs::-webkit-scrollbar { display: none; }
  .wt-tab {
    flex: 0 0 auto;
    font-family: var(--font-body);
    font-size: 0.8125rem; font-weight: 600;
    padding: 0.4375rem 0.875rem;
    border-radius: var(--shape-full);
    border: 1px solid var(--md-outline-var);
    background: var(--md-surf-2);
    color: var(--md-on-surface-var);
    cursor: pointer; white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
  }
  .wt-tab.is-active {
    background: var(--md-primary-container);
    color: var(--md-on-primary-cont);
    border-color: transparent;
  }
  /* Only the active section is shown on mobile (class set by weekly-trends.js;
     ignored on desktop, where every section stays visible). */
  .wt-section.is-hidden { display: none; }

  /* Keep the thumbnail beside the title on mobile (the shared header stacks to
     a column by default); MD3 list-item style with leading media. */
  .wt-section .legal-section-header { flex-direction: row; align-items: center; }
}

/* ══════════════════════════════════════════════════════════════════════
   HOW TO INVEST IN AI  (the AI stack)
══════════════════════════════════════════════════════════════════════ */
/* The pyramid is the page's centrepiece, not a peer of the body sections, so it
   gets an expressive treatment: a tonal container at the extra-large corner
   radius, an overline, and a Headline-role title one step above the section
   titles (--ct-xl vs --ct-lg). */
.ai-pyramid {
  margin: var(--cs-lg) 0;
  padding: var(--cs-lg) var(--cs-md) var(--cs-md);
  background: var(--md-surf-1);
  border: 1px solid var(--md-outline-var);
  border-radius: var(--shape-xl);               /* shape.corner.extra-large, as .legal-hero */
}
.ai-pyramid-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--ct-xs);
  font-weight: 700;
  color: var(--md-primary);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: var(--cs-2xs);
}
.ai-pyramid-title {
  font-family: var(--font-display);
  font-size: var(--ct-xl);                      /* Headline role, above section titles */
  font-weight: 700;
  color: var(--md-on-background);
  line-height: 1.2;
  letter-spacing: -.01em;                       /* tighter tracking at display size */
  text-align: center;
  margin-bottom: var(--cs-md);
  text-wrap: balance;
}
.ai-pyramid svg { width: 100%; max-width: 32rem; height: auto; display: block; margin: 0 auto; overflow: visible; }
.ai-pyramid text {
  fill: #fff; font-family: var(--font-body); font-size: 23px; font-weight: 700;
  letter-spacing: .2px; text-anchor: middle; dominant-baseline: middle; pointer-events: none;
}
.ai-pyramid a { cursor: pointer; outline: none; }
.aip-band {
  stroke: rgba(255, 255, 255, .22); stroke-width: .75;
  transition: filter .15s ease, opacity .15s ease;
}
/* persistent "go" signifier (chevron), brightens on interaction */
.aip-go {
  fill: rgba(255, 255, 255, .8); font-size: 26px; font-weight: 700;
  text-anchor: middle; dominant-baseline: middle; pointer-events: none;
  transition: fill .15s ease, transform .15s ease; transform-box: fill-box; transform-origin: center;
}
/* MD3 state layers: hover lifts, press dims, keyboard focus shows a ring */
.ai-pyramid a:hover .aip-band   { filter: brightness(1.12); }
.ai-pyramid a:hover .aip-go     { fill: #fff; transform: translateX(2px); }
.ai-pyramid a:active .aip-band  { filter: brightness(.94); opacity: .9; }
.ai-pyramid a:focus-visible .aip-band {
  stroke: var(--md-on-surface, #fff); stroke-width: 2.5;
  filter: brightness(1.12) drop-shadow(0 0 3px rgba(124, 77, 255, .6));
}

.ai-pyramid-hint {
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  margin: var(--cs-sm) 0 0; font-size: 0.875rem; font-weight: 600;
  color: var(--md-on-surface-var);
}
.ai-pyramid-hint .material-symbols-outlined { font-size: 1.1rem; }

/* sponsored partner cards (bottom of the page) */
.ai-partners-note {
  font-size: 0.8125rem; font-style: italic; color: var(--md-on-surface-var);
  margin: 0 0 var(--cs-md);
}
.ai-partners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--cs-md);
}
@media (max-width: 560px) { .ai-partners-grid { grid-template-columns: 1fr; } }
.ai-partner-card {
  display: flex; flex-direction: column; overflow: hidden; text-decoration: none;
  background: var(--md-surf-2, var(--md-surface));
  border: 1px solid var(--md-hairline, rgba(0, 0, 0, .08));
  border-radius: var(--shape-lg, 16px);
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.ai-partner-card:hover {
  box-shadow: var(--md-elev-2, 0 4px 14px rgba(0, 0, 0, .18));
  transform: translateY(-2px); border-color: var(--md-primary);
}
/* Capped, uniform banner height so cards stay compact and align regardless of
   the source image's shape (kept short so the block never dominates the page).
   Targets the class rather than any descendant img, so the styling is explicit
   and a future non-logo image inside the card does not inherit banner sizing. */
.ai-partner-logo {
  width: 100%; height: clamp(84px, 9vw, 120px);
  object-fit: cover; display: block;
}
.ai-partner-cta {
  margin-top: auto;                     /* pin CTA to card bottom so the row lines up */
  padding: 0.75rem 1rem; text-align: center; font-weight: 700; font-size: 0.9375rem;
  color: var(--md-primary);
}
/* faint circuit contour around the pyramid, follows the theme */
.aip-circuit polyline {
  fill: none; stroke: var(--md-outline, rgba(120, 120, 140, .45));
  stroke-width: 1; stroke-dasharray: 3 5; opacity: .5;
}
.aip-circuit circle { fill: var(--md-on-surface-var, #8a8a9a); opacity: .45; }

.ai-stocks { list-style: none; margin: var(--cs-sm) 0 0; padding: 0; }
.ai-stock {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--cs-md);
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--md-hairline, rgba(0, 0, 0, .07));
}
.ai-stock:last-child { border-bottom: none; }
.ai-stock-name { font-weight: 600; color: var(--md-on-surface); }
.ai-stock-tkr {
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700;
  color: var(--md-on-surface-var); background: var(--md-surf-3);
  padding: 1px 6px; border-radius: var(--shape-full); margin-left: 0.25rem;
}
.ai-stock-quote { display: inline-flex; align-items: baseline; gap: 0.5rem; white-space: nowrap; }
.ai-stock-price { font-family: var(--font-mono); font-weight: 600; color: var(--md-on-surface); }
.ai-stock-chg   { font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 700; }
.ai-stock-chg.up   { color: var(--gain); }
.ai-stock-chg.down { color: var(--loss); }
.ai-note { font-size: 0.8125rem; font-style: italic; color: var(--md-on-surface-var); margin-top: var(--cs-sm); }

/* ══════════════════════════════════════════════════════════════════════
   STEP LIST - visible numbered path, mirrors the HowTo structured data
══════════════════════════════════════════════════════════════════════ */
.pai-steps { list-style: none; counter-reset: step; padding: 0; margin: var(--cs-md) 0; display: grid; gap: 0.6rem; }
.pai-steps li {
  counter-increment: step;
  position: relative;
  padding: 0.85rem 1rem 0.85rem 3.25rem;
  border: 1px solid var(--md-outline-var);
  border-radius: 14px;
  background: var(--md-surf-1);
  line-height: 1.55;
}
.pai-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0.85rem; top: 0.85rem;
  width: 1.75rem; height: 1.75rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--md-primary-container);
  color: var(--md-on-primary-cont);
  font-size: var(--ct-sm); font-weight: 700;
}

/* ══════════════════════════════════════════════════════════════════════
   WORLD HEATMAP (/world-heatmap) - live country-ETF tiles, theme-aware.
   Self-contained here so the content page needs no dashboard stylesheet.
══════════════════════════════════════════════════════════════════════ */
/* Live-data page: compress the whole vertical stack so every region is on one
   screen on desktop, matching the "everything on one screen" spirit rather than
   a reading-guide layout. All scoped to .wh-live-page so other content pages,
   and the shared hero/section/back styles, are untouched. */
.wh-live-page { margin-top: var(--cs-sm); }
.wh-live-page .legal-section { padding: var(--cs-lg) var(--cs-xl); }
/* Standardised content-page hero: MD3 hero rhythm with room to breathe (padding
   ~24-48dp, 16dp headline->supporting, 24dp supporting->button), capped below
   the base hero's 4.5rem so it never dominates. Doubled class (0,2,0) so it
   beats the responsive .legal-hero rules (0,1,0) later in the file, including
   the min-width:120rem block. */
.legal-hero.legal-hero--tight { padding: var(--cs-xl); margin-bottom: var(--cs-md); }
.legal-hero--tight .legal-hero-title { margin-bottom: var(--cs-md); }   /* ~16dp */
.legal-hero--tight .legal-hero-meta { gap: var(--cs-md); }

/* MD3 hero primary action: Filled Button, Full (pill) shape, primary/onPrimary
   tokens, hug-content, left-aligned under the supporting text. Mirrors the
   .dash-cta-action pattern; ~24dp spacer above via cs-md. */
/* Doubled selector (.legal-page a.legal-hero-cta) so the onPrimary text colour
   beats the generic ".legal-page a { color: primary }" link rule, which would
   otherwise paint the label primary-cyan on the cyan pill and hide it. Same
   pattern .legal-back uses. */
.legal-hero-cta,
.legal-page a.legal-hero-cta {
  display: inline-flex; align-items: center; gap: 0.55rem;
  margin-top: var(--cs-lg);   /* ~24dp supporting-text -> button */
  padding: 0.65rem 1.3rem; min-height: 2.5rem; box-sizing: border-box;
  border-radius: 999px;
  background: var(--md-primary); color: var(--md-on-primary);
  font-family: var(--font-body); font-weight: 600; font-size: var(--ct-sm);
  letter-spacing: .01em; text-decoration: none;
  transition: filter .15s ease;
}
.legal-hero-cta:hover,
.legal-page a.legal-hero-cta:hover { filter: brightness(1.08); opacity: 1; color: var(--md-on-primary); }
.legal-hero-cta::after { content: '\2192'; font-size: var(--ct-md); }
.legal-hero-cta .eq-bars i { background: var(--md-on-primary); }

.wh-region { margin: var(--cs-sm) 0 0; }
.wh-region:first-child { margin-top: 0; }
.wh-region-head {
  font-family: var(--font-body);
  font-size: var(--ct-sm); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--md-on-surface-var);
  margin: 0 0 var(--cs-xs);
}
.wh-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
  /* Size each tile to its own content; the grid default (stretch) padded shorter
     tiles up to the tallest in the row, which read as dead space. */
  align-items: start;
}
@media (max-width: 720px) { .wh-grid { grid-template-columns: repeat(2, 1fr); } }
.wh-tile {
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: 0.6rem 0.8rem;
  border-radius: var(--cs-xs);
  border: 1px solid var(--md-outline-var);
  background: var(--md-surf-1);
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s,
              background-color .45s cubic-bezier(.2,0,0,1),
              border-color .45s cubic-bezier(.2,0,0,1);
}
.wh-tile:hover { transform: scale(1.03); box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.wh-tile-name {
  font-family: var(--font-body);
  font-size: 0.875rem; font-weight: 700; letter-spacing: .01em; line-height: 1.25;
  color: var(--md-on-surface);
}
.wh-tile-pct {
  font-family: var(--font-mono);
  font-size: 1.0625rem; font-weight: 700; line-height: 1.1;
}
.wh-tile.up .wh-tile-pct { color: #2ea043; }
.wh-tile.dn .wh-tile-pct { color: #e5534b; }
.wh-tile.flat .wh-tile-pct { color: var(--md-on-surface-var); }
html[data-theme="light"] .wh-tile.up .wh-tile-pct { color: #135c28; }
html[data-theme="light"] .wh-tile.dn .wh-tile-pct { color: #99261b; }
.wh-tile-meta {
  font-family: var(--font-mono);
  font-size: var(--ct-xs); color: var(--md-on-surface-var);
}
.wh-loading, .wh-meta { color: var(--md-on-surface-var); font-size: var(--ct-sm); }
.wh-status { display: flex; align-items: center; gap: var(--cs-sm); margin-bottom: var(--cs-md); flex-wrap: wrap; }
.wh-live {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.2rem 0.6rem; border-radius: 2rem;
  font-family: var(--font-mono); font-size: var(--ct-xs);
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--md-outline-var);
}
.wh-live-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.wh-live.is-open { color: #2ea043; border-color: rgba(46,160,67,.4); }
.wh-live.is-open .wh-live-dot { background: #2ea043; animation: wh-live-pulse 1.8s ease-in-out infinite; }
.wh-live.is-closed { color: var(--md-on-surface-var); }
.wh-live.is-closed .wh-live-dot { background: var(--md-on-surface-var); }
html[data-theme="light"] .wh-live.is-open { color: #135c28; }
@keyframes wh-live-pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .wh-live-dot { animation: none !important; } }
.wh-status .wh-meta { margin: 0; }

/* ══════════════════════════════════════════════════════════════════════
   FORMULA CALLOUT - shaded box for the one line worth remembering
══════════════════════════════════════════════════════════════════════ */
.pai-formula {
  margin: var(--cs-md) 0;
  padding: var(--cs-md) var(--cs-lg);
  background: var(--md-primary-container);
  color: var(--md-on-primary-cont);
  border-radius: var(--cs-xs);
  font-size: var(--ct-lg);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

/* ══════════════════════════════════════════════════════════════════════
   PULL QUOTE - tonal surface, primary accent rule (MD3 expressive)
══════════════════════════════════════════════════════════════════════ */
.pai-quote {
  margin: var(--cs-lg) 0;
  padding: var(--cs-md) var(--cs-lg);
  background: var(--md-surf-2);
  border-left: 3px solid var(--md-primary);
  border-radius: var(--cs-xs);
}
.pai-quote p {
  margin: 0;
  font-size: var(--ct-lg);
  line-height: 1.5;
  font-style: italic;
  color: var(--md-on-surface);
}
.pai-quote cite {
  display: block;
  margin-top: var(--cs-sm);
  font-size: var(--ct-sm);
  font-style: normal;
  font-weight: 600;
  color: var(--md-on-surface-var);
}

/* ══════════════════════════════════════════════════════════════════════
   ERROR PAGE
══════════════════════════════════════════════════════════════════════ */
.err-wrap {
  max-width: 40rem;
  margin: 0 auto;
  padding: var(--cs-xl) var(--cs-md);
  text-align: center;
}
.err-code {
  font-size: clamp(4.5rem, 16vw, 7.5rem);
  font-weight: 900; line-height: 1;
  color: var(--loss); opacity: .18;
  letter-spacing: -.04em; user-select: none;
}
.err-icon {
  font-size: 3rem;
  margin: var(--cs-lg) 0 var(--cs-md);
  color: var(--loss);
}
.err-title {
  font-size: clamp(1.25rem, 4vw, 1.75rem);
  font-weight: 800; color: var(--md-on-surface);
  margin-bottom: var(--cs-xs);
}
.err-sub {
  font-size: var(--ct-md);
  color: var(--md-on-surface-var);
  line-height: 1.6; margin-bottom: var(--cs-xl);
}
.err-card {
  background: var(--md-outline-var);
  border: 1px solid var(--md-outline-var);
  border-radius: 0.75rem;
  padding: var(--cs-lg); margin-bottom: var(--cs-xl);
  text-align: left;
}
.err-card-label {
  font-size: var(--ct-2xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--md-on-surface-var); margin-bottom: var(--cs-xs);
}
.err-request-id {
  font-family: monospace; font-size: var(--ct-xs);
  color: var(--md-primary); word-break: break-all;
}
.err-home {
  display: inline-flex; align-items: center; gap: var(--cs-xs);
  padding: 0.75rem 1.75rem; border-radius: 1.5rem;
  background: var(--md-primary); color: var(--md-on-primary);
  font-size: var(--ct-base); font-weight: 700;
  text-decoration: none; transition: opacity .15s;
}
.err-home:hover { opacity: .85; }

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   xs   < 30rem  (480px)   small mobile
   sm   < 48rem  (768px)   mobile
   md   < 80rem  (1280px)  tablet, base styles cover this range
   lg   ≥ 80rem  (1280px)  large desktop
   xl   ≥ 120rem (1920px)  1440p / QHD
   2xl  ≥ 160rem (2560px)  4K / UHD
══════════════════════════════════════════════════════════════════════ */

/* ── xs, small mobile (< 480px) ───────────────────────────────────── */
@media (max-width: 30rem) {
  /* Layout */
  .legal-page   { padding: 0 var(--cs-sm) var(--cs-xl); }
  .legal-hero   { padding: var(--cs-lg) var(--cs-md); }
  .legal-section { padding: var(--cs-md) var(--cs-lg); }
  .legal-section-header { flex-direction: column; gap: var(--cs-xs); }
  .legal-contact { flex-direction: column; text-align: center; gap: var(--cs-md); }
  .legal-contact-icon { margin: 0 auto; }
  .legal-toc    { padding: var(--cs-md) var(--cs-lg); }
  .legal-toc ol { grid-template-columns: 1fr; }

  /* Hero text */
  .legal-hero-eyebrow { font-size: var(--ct-2xs); }
  .legal-hero-meta    { gap: var(--cs-sm); flex-wrap: wrap; }

  /* Support buttons, stack vertically */
  .support-links  { flex-direction: column; }
  .support-btn    { width: 100%; justify-content: flex-start; }

  /* About */
  .about-feature-grid { grid-template-columns: 1fr; }
  .content-footer     { grid-template-columns: 1fr; padding: 1rem; }

  /* Visitor analytics */
  .va-wrap         { padding: var(--cs-md) var(--cs-sm); }
  .va-kpi-grid     { grid-template-columns: repeat(2, 1fr); gap: var(--cs-sm); }
  .va-kpi          { padding: var(--cs-sm) var(--cs-md); }
  .va-kpi-value    { font-size: clamp(1.5rem, 7vw, 2rem); }
  .va-breakdown-grid { grid-template-columns: 1fr; }
  .va-bar-label    { width: 6.5rem; font-size: var(--ct-xs); }
  .va-table th, .va-table td { padding: 0.375rem 0.5rem; font-size: var(--ct-xs); }
  .va-table td     { max-width: 8rem; }

  /* Content tables are a communication surface, not an admin grid: the dense
     va-table clamp above drops to 10-12px, well under the surrounding prose.
     Restore MD3 body sizing and padding for .md3-table-card only. */
  .md3-table-card td { padding: 0.7rem 0.8rem; font-size: var(--ct-base); max-width: none; }
  .md3-table-card th { padding: 0.7rem 0.8rem; font-size: var(--ct-sm); }
  .md3-table-card td:first-child,
  .md3-table-card th:first-child { max-width: 7.5rem; }

  /* Affiliates, horizontal scroll, tighter cells */
  .aff-mgmt-table  { font-size: var(--ct-2xs); }
  .aff-mgmt-table th, .aff-mgmt-table td { padding: 0.375rem 0.5rem; }
  .aff-td-notes    { max-width: 6rem; }

  /* Comparison table */
  .cmp-table       { font-size: var(--ct-2xs); }
  .cmp-table th, .cmp-table td { padding: 0.25rem 0.375rem; }

  /* Data / content tables */
  .ds-table        { font-size: var(--ct-2xs); }
  .ds-table th, .ds-table td { padding: 0.25rem 0.375rem; }

  /* Error page */
  .err-wrap        { padding: var(--cs-lg) var(--cs-sm); }
  .err-home        { width: 100%; justify-content: center; }
}

/* ── sm, mobile (< 768px) ─────────────────────────────────────────── */
@media (max-width: 48rem) {
  /* Layout */
  .legal-page     { padding: 0 var(--cs-md) var(--cs-xl); }
  .legal-hero     { padding: var(--cs-xl) var(--cs-lg) var(--cs-lg); }
  .legal-section  { padding: var(--cs-lg) var(--cs-xl); }
  .legal-toc ol   { grid-template-columns: 1fr; }
  .legal-contact  { flex-direction: column; text-align: center; gap: var(--cs-md); }
  .legal-contact-icon { margin: 0 auto; }

  /* Hero */
  .legal-hero-title { font-size: clamp(1.25rem, 5vw, 1.75rem); }
  .legal-hero-meta  { gap: var(--cs-sm); }

  /* Support */
  .support-links  { gap: var(--cs-sm); }

  /* Visitor analytics */
  .va-kpi-grid    { grid-template-columns: repeat(3, 1fr); gap: var(--cs-sm); }
  .va-kpi-value   { font-size: clamp(1.75rem, 5vw, 2.5rem); }
  .va-breakdown-grid { grid-template-columns: 1fr; }
  .va-bar-label   { width: 7.5rem; }
  .va-table th, .va-table td { padding: 0.4375rem 0.625rem; }

  /* Affiliates */
  .aff-mgmt-table { font-size: var(--ct-xs); }
  .aff-mgmt-table th, .aff-mgmt-table td { padding: 0.5rem 0.625rem; }

  /* Comparison table */
  .cmp-table      { font-size: var(--ct-xs); }
  .cmp-table th, .cmp-table td { padding: var(--cs-2xs) var(--cs-xs); }

  /* Data / content tables */
  .ds-table       { font-size: var(--ct-xs); }
  .ds-table th, .ds-table td { padding: var(--cs-2xs) var(--cs-xs); }
}

/* ── md, tablet / small desktop (< 1280px), base styles cover this ─ */

/* ── lg, large desktop (≥ 1280px) ─────────────────────────────────── */
@media (min-width: 80rem) {
  :root {
    --content-w:      min(80vw, 72rem);
    --content-w-wide: min(88vw, 100rem);
  }
  .legal-section      { padding: var(--cs-xl) var(--cs-2xl); }
  .about-feature-grid { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
  .va-breakdown-grid  { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
  .va-kpi-grid        { grid-template-columns: repeat(5, 1fr); }
}

/* ── xl, 1440p / QHD (≥ 1920px) ──────────────────────────────────── */
@media (min-width: 120rem) {
  :root {
    --content-w:      min(70vw, 80rem);
    --content-w-wide: min(82vw, 112rem);
  }
  .legal-hero         { padding: var(--cs-2xl); }
  .va-kpi-grid        { gap: var(--cs-lg); }
  .va-breakdown-grid  { grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); }
  .aff-mgmt-table th, .aff-mgmt-table td { padding: 0.875rem 1rem; }
}

/* ── 2xl, 4K / UHD (≥ 2560px) ────────────────────────────────────── */
@media (min-width: 160rem) {
  :root {
    --content-w:      min(60vw, 90rem);
    --content-w-wide: min(72vw, 130rem);
  }
  .legal-section      { padding: var(--cs-2xl); }
  .about-feature-grid { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
  .va-kpi-grid        { gap: var(--cs-xl); }
  .va-kpi             { padding: var(--cs-lg) var(--cs-xl); }
  .va-kpi-value       { font-size: clamp(3rem, 4vw, 4rem); }
  .va-breakdown-grid  { grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr)); }
  .aff-mgmt-table th, .aff-mgmt-table td { padding: 1rem 1.25rem; }
  .va-table th, .va-table td { padding: 0.75rem 1rem; font-size: var(--ct-base); }
}

/* ══════════════════════════════════════════════════════════════════════
   MARKETS TODAY (/markets-today)
   The daily brief page. MD3 Expressive: tonal container per brief, a
   primary-coloured overline, display type for the headline and a shape
   scale that matches .legal-hero. Session chips reuse .wh-live.
   ══════════════════════════════════════════════════════════════════════ */

/* Row of open/closed chips under the hero. Layout only: the chips
   themselves are the shared .wh-live component. */
.mtd-sessions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cs-xs);
  justify-content: center;
  margin: 0 0 var(--cs-lg);
}

/* Times swapped to the reader's zone by markets-today.js. The dotted rule
   hints that the value is localised rather than fixed. */
.mtd-time {
  font-family: var(--font-mono);
  border-bottom: 1px dotted var(--md-outline-var);
}

.mtd-empty {
  padding: var(--cs-md);
  background: var(--md-surf-2);
  border-radius: var(--shape-lg);
  color: var(--md-on-surface-var);
}

/* ── One brief ───────────────────────────────────────────────────────── */
/* Tonal surface rather than an outlined card: MD3 Expressive leans on
   colour rather than borders to separate a block from the page. */
.mtd-brief {
  position: relative;
  background: var(--md-surf-2);
  border-radius: var(--shape-xl);          /* shape.corner.extra-large, as .legal-hero */
  padding: var(--cs-lg) var(--cs-lg) var(--cs-md);
  margin: 0 0 var(--cs-lg);
  overflow: hidden;
}

/* Expressive accent edge, echoing the .legal-section top gradient. */
.mtd-brief::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--md-primary), var(--md-secondary));
}

.mtd-brief-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cs-xs);
  margin-bottom: var(--cs-xs);
}

.mtd-brief-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--ct-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--md-primary);
}

.mtd-brief-time {
  font-family: var(--font-mono);
  font-size: var(--ct-xs);
  color: var(--md-on-surface-var);
}

/* Headline carries the page: display face, large role, balanced wrap. */
.mtd-brief-headline {
  font-family: var(--font-display);
  font-size: var(--ct-lg);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--md-on-background);
  margin: 0 0 var(--cs-xs);
  text-wrap: balance;
}

.mtd-brief-summary {
  font-size: var(--ct-md);
  line-height: 1.6;
  color: var(--md-on-surface);
  margin: 0 0 var(--cs-md);
}

.mtd-brief-block { margin-bottom: var(--cs-sm); }
.mtd-brief-block p { margin: 0; }

.mtd-brief-block-title {
  font-family: var(--font-mono);
  font-size: var(--ct-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--md-on-surface-var);
  margin-bottom: var(--cs-2xs);
}

/* ── World table ─────────────────────────────────────────────────────── */
.mtd-region { margin-bottom: var(--cs-lg); }

.mtd-region-title {
  font-family: var(--font-display);
  font-size: var(--ct-md);
  font-weight: 700;
  color: var(--md-on-background);
  margin: 0 0 var(--cs-xs);
}

/* Wide tables scroll inside their own box so the page never scrolls sideways. */
.mtd-table-wrap {
  overflow-x: auto;
  border-radius: var(--shape-lg);
  border: 1px solid var(--md-outline-var);
}

.mtd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ct-sm);
}

.mtd-table th,
.mtd-table td {
  padding: var(--cs-xs) var(--cs-sm);
  text-align: left;
  white-space: nowrap;
}

.mtd-table th {
  background: var(--md-surf-2);
  font-family: var(--font-mono);
  font-size: var(--ct-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--md-on-surface-var);
}

.mtd-table tbody tr + tr td { border-top: 1px solid var(--md-outline-var); }

.mtd-table td:nth-child(2),
.mtd-table td:nth-child(3) { font-family: var(--font-mono); text-align: right; }

.mtd-table th:nth-child(2),
.mtd-table th:nth-child(3) { text-align: right; }

.mtd-ticker {
  font-family: var(--font-mono);
  font-size: var(--ct-xs);
  color: var(--md-on-surface-var);
  margin-left: .35rem;
}

/* Same greens and reds the world heatmap uses, including its light-theme
   contrast fix, so a rise looks identical across the site. */
.mtd-up   { color: #2ea043; }
.mtd-down { color: #e5534b; }
html[data-theme="light"] .mtd-up   { color: #135c28; }
html[data-theme="light"] .mtd-down { color: #99261b; }

@media (max-width: 640px) {
  .mtd-brief { padding: var(--cs-md) var(--cs-md) var(--cs-sm); }
  .mtd-brief-head { flex-direction: column; align-items: flex-start; gap: var(--cs-2xs); }
}

/* ── Market temperature, the day-arc ─────────────────────────────────────
   One 0-100 reading per session plotted on a shared track, so the reader
   sees the mood handed from Tokyo to London to New York rather than a
   single snapshot. Marker positions come from a dynamic style binding
   (style="@left"), which is data, not styling. */
.mtd-arc {
  background: var(--md-surf-2);
  border-radius: var(--shape-xl);
  padding: var(--cs-md) var(--cs-lg) var(--cs-md);
  margin: 0 0 var(--cs-lg);
}

.mtd-arc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cs-sm);
  margin-bottom: var(--cs-sm);
}

.mtd-arc-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--ct-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--md-primary);
}

.mtd-arc-tone {
  font-family: var(--font-display);
  font-size: var(--ct-lg);
  font-weight: 700;
  line-height: 1.15;
  color: var(--md-on-background);
}

/* Expressive focal number: large, tabular, quiet in colour so the tone
   word stays the headline and the digits support it. */
.mtd-arc-value {
  font-family: var(--font-mono);
  font-size: var(--ct-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--md-on-surface-var);
}

/* The scale itself. Same reds and greens as the heatmap, so a rise reads
   the same everywhere on the site. */
.mtd-arc-track {
  position: relative;
  height: 10px;
  border-radius: var(--shape-full, 999px);
  background: linear-gradient(90deg, #e5534b 0%, #d7a52b 50%, #2ea043 100%);
  /* Fixed bottom gap, not a clamp token: it has to clear the staggered labels
     below the track, whose offsets are fixed rem values. */
  margin: var(--cs-lg) 0 4rem;
}

.mtd-arc-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mtd-arc-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--md-surf-1);
  border: 3px solid var(--md-on-background);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}

/* The newest reading is the one that matters now, so it gets the accent. */
.mtd-arc-marker:last-child .mtd-arc-dot {
  border-color: var(--md-primary);
  transform: scale(1.15);
}

.mtd-arc-label {
  position: absolute;
  top: 1.25rem;
  font-family: var(--font-mono);
  font-size: var(--ct-xs);
  font-weight: 700;
  white-space: nowrap;
  color: var(--md-on-surface-var);
}

/* Stagger every second label so two close readings do not collide. */
.mtd-arc-marker:nth-child(even) .mtd-arc-label { top: 2.4rem; }

.mtd-arc-scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--ct-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--md-on-surface-var);
  margin-bottom: var(--cs-sm);
}

.mtd-arc-note {
  font-size: var(--ct-sm);
  line-height: 1.55;
  color: var(--md-on-surface-var);
  margin: 0;
}

@media (max-width: 640px) {
  .mtd-arc { padding: var(--cs-md); }
  .mtd-arc-head { align-items: flex-start; }
}

/* ── /is-the-market-open: exchange clocks ──────────────────────────────────────
   Phase is carried three ways on purpose: dial colour, the tonal chip, and the
   text label. Colour alone would fail in greyscale and for colourblind readers,
   and this page's whole job is being unambiguous about open versus closed.
   Every colour resolves through the shared tokens, so light and dark both work
   without a second stylesheet. ------------------------------------------------ */

.mkc-page {
  --mkc-open:    var(--gain);
  --mkc-edge:    var(--md-callout-text);
  --mkc-lunch:   var(--md-primary);
  --mkc-shut:    var(--md-outline);
  /* Sized so three rows of four plus the header and legend clear a 900px viewport without
     scrolling, which is the whole promise of the page. */
  --mkc-dial:    5.875rem;
}

/* No hero on this page: the clocks are the content and a tall hero pushed all twelve below
   the fold. The header is two lines total, the question and then the answer, because every
   line here costs a row of clocks. */
.mkc-head { margin: 0 0 var(--cs-sm); }

.mkc-head .legal-hero-title {
  font-size: var(--ct-lg);
  line-height: 1.25;
  margin: 0 0 .15rem;
}

/* Answer and status on one line, baseline aligned, wrapping only when they truly cannot fit. */
.mkc-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .35rem var(--cs-sm);
}

.mkc-status {
  font-size: var(--ct-xs);
  color: var(--md-outline);
  font-variant-numeric: tabular-nums;
  margin: 0;
  white-space: nowrap;
}

/* isolation so the blurred sky behind the cards cannot bleed over neighbouring sections. */
.mkc-wall {
  position: relative;
  isolation: isolate;
  margin: 0 0 var(--cs-md);
  padding: var(--cs-xs);
  border-radius: 1.75rem;
  overflow: hidden;
}

/* The light the glass refracts. Hue is set by market-clocks.js from the UTC hour. */
.mkc-sky {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.mkc-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(58px);
  opacity: .42;
  transition: background 2s linear;
}

.mkc-blob--1 { width: 18rem; height: 18rem; left: -3rem;  top: -4rem; }
.mkc-blob--2 { width: 20rem; height: 20rem; right: -4rem; top: 2rem; }
.mkc-blob--3 { width: 19rem; height: 19rem; left: 38%;    bottom: -6rem; }

/* Offset sits under the city as a quiet attribute of the place, not of the countdown. */
.mkc-offset {
  font-size: var(--ct-2xs);
  color: var(--md-outline);
  margin: 0 0 var(--cs-2xs);
}

.mkc-answer {
  font-size: var(--ct-base);
  line-height: 1.35;
  color: var(--md-on-surface);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.mkc-empty {
  font-size: var(--ct-base);
  line-height: 1.6;
  color: var(--md-on-surface-var);
  background: var(--md-surf-2);
  border-radius: 1rem;
  padding: var(--cs-md);
}

/* MD3 title-small with a rule that runs to the edge. Used by the session map heading. */
.mkc-region-title {
  display: flex;
  align-items: center;
  gap: var(--cs-sm);
  font-size: var(--ct-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--md-outline);
  margin: 0 0 var(--cs-xs);
}

.mkc-region-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--md-hairline);
}

/* auto-fill, not auto-fit: auto-fit collapses empty tracks, so a region holding one
   exchange (Middle East, Africa) would stretch that card across the full width. */
/* Fixed six per row, two rows of six. A fluid auto-fill count made the wall reflow into
   ragged rows at some widths, and the twelve are a deliberate set, not a feed.
   grid-auto-rows: 1fr keeps every card the same height whatever text it carries. */
/* Four per row, three rows. Six fitted, but a 9px ring and readable numerals need the
   width. grid-auto-rows: 1fr keeps every card the same height whatever text it carries. */
.mkc-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--cs-xs);
}

.mkc-caveat {
  font-size: var(--ct-xs);
  line-height: 1.5;
  color: var(--md-outline);
  background: var(--md-surf-2);
  border-radius: .875rem;
  padding: var(--cs-sm) var(--cs-md);
  margin: var(--cs-md) 0;
}

/* Expressive tonal container rather than a bordered card: the surface itself
   carries the elevation, which is what MD3 Expressive asks for. */
/* Frosted glass over the sky above. Same material the AI Mood popup uses, so this is an
   extension of the house style rather than a new one. */
.mkc-card {
  --mkc-accent: var(--md-outline);
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 1.625rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 6px 20px rgba(0, 0, 0, .28);
  padding: var(--cs-sm) var(--cs-2xs);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
}

/* Blur is the single most expensive thing on this page: one compositing layer per card,
   twelve of them, on a page that also ticks every second. Desktop only. Mobile keeps the
   translucent fill, which reads almost the same and costs nothing. */
@media (min-width: 641px) {
  .mkc-card {
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
  }
}

/* The chip sits on the baseline of every card regardless of how many text lines are above
   it, so a row of six reads as one object rather than six ragged ones. */
.mkc-card .mkc-chip { margin-top: auto; }

/* The live ones lead: brighter glass and the continent colour on the rim. A hard border on
   every card fought the glass, so the rim is neutral until a market is actually trading. */
.mkc-card.is-open,
.mkc-card.is-auction,
.mkc-card.is-power,
.mkc-card.is-lunch {
  background: rgba(255, 255, 255, .085);
  border-color: color-mix(in srgb, var(--mkc-accent) 70%, transparent);
}

/* ── Continent accents ─────────────────────────────────────────────────────────
   Colour is what groups the wall now that the region headings are gone, keyed to
   the legend under it. Hues chosen to stay distinguishable on both themes and to
   avoid the open/closed green and amber already in use for phase.            ---- */

.mkc-r-apac     { --mkc-accent: #4dd0e1; }
.mkc-r-meast    { --mkc-accent: #b39ddb; }
.mkc-r-africa   { --mkc-accent: #ffb74d; }
.mkc-r-europe   { --mkc-accent: #64b5f6; }
.mkc-r-americas { --mkc-accent: #f06292; }

/* Light mode: white-on-white glass is invisible, so the frost inverts. The panes become
   near-opaque white over a much fainter sky, which reads as frosted rather than as the
   luminous night version, and keeps small text legible. */
html[data-theme="light"] body:not(.is-dashboard) .mkc-card {
  background: rgba(255, 255, 255, .62);
  border-color: rgba(0, 0, 0, .08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 4px 14px rgba(0, 0, 0, .08);
}

html[data-theme="light"] body:not(.is-dashboard) .mkc-card.is-open,
html[data-theme="light"] body:not(.is-dashboard) .mkc-card.is-auction,
html[data-theme="light"] body:not(.is-dashboard) .mkc-card.is-power,
html[data-theme="light"] body:not(.is-dashboard) .mkc-card.is-lunch {
  background: rgba(255, 255, 255, .78);
}

html[data-theme="light"] body:not(.is-dashboard) .mkc-blob      { opacity: .22; }
html[data-theme="light"] body:not(.is-dashboard) .mkc-dial-track { stroke: rgba(0, 0, 0, .12); }

/* Same scoping the rest of this file uses for light mode: html[data-theme] is set
   pre-paint, and only content pages are re-pointed. */
html[data-theme="light"] body:not(.is-dashboard) .mkc-r-apac     { --mkc-accent: #00838f; }
html[data-theme="light"] body:not(.is-dashboard) .mkc-r-meast    { --mkc-accent: #5e35b1; }
html[data-theme="light"] body:not(.is-dashboard) .mkc-r-africa   { --mkc-accent: #ef6c00; }
html[data-theme="light"] body:not(.is-dashboard) .mkc-r-europe   { --mkc-accent: #1565c0; }
html[data-theme="light"] body:not(.is-dashboard) .mkc-r-americas { --mkc-accent: #ad1457; }

.mkc-legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem var(--cs-sm);
  margin: var(--cs-2xs) 0 0;
  padding: 0 var(--cs-2xs);
  font-size: var(--ct-2xs);
  color: var(--md-outline);
}

.mkc-legend li { display: flex; align-items: center; gap: .35rem; }

.mkc-legend-dot {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--mkc-accent);
}

.mkc-dial {
  position: relative;
  width: var(--mkc-dial);
  height: var(--mkc-dial);
  margin-bottom: var(--cs-2xs);
}

.mkc-dial svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Thick enough to read as an instrument. At 7 the ring looked like a border. */
.mkc-dial-track,
.mkc-dial-fill {
  fill: none;
  stroke-width: 9;
}

.mkc-dial-track { stroke: rgba(255, 255, 255, .16); }

/* Only a live session glows, so trading markets pull the eye with no extra label.
   Keyed off --mkc-phase rather than currentColor: an SVG stroke does not inherit from it. */
.mkc-card.is-open    .mkc-dial-fill,
.mkc-card.is-auction .mkc-dial-fill,
.mkc-card.is-power   .mkc-dial-fill,
.mkc-card.is-lunch   .mkc-dial-fill {
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--mkc-phase) 48%, transparent));
}

.mkc-dial-fill {
  stroke: var(--mkc-shut);
  stroke-linecap: round;
  transition: stroke-dashoffset .6s cubic-bezier(.2, 0, 0, 1), stroke .3s ease;
}

/* Google Sans Display carries tnum, verified in the shipped woff2, so the digits
   do not jitter as the countdown ticks. No extra font needed. */
.mkc-count {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Google Sans Display', 'Google Sans', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  /* Sized to fit H:MM:SS inside the ring, which is the widest form the dial ever shows.
     var(--ct-md) overflowed and clipped the seconds. */
  font-size: var(--ct-sm);
  font-weight: 500;
  letter-spacing: -.02em;
  white-space: nowrap;
  color: var(--md-on-surface);
}

.mkc-city {
  font-size: var(--ct-base);
  font-weight: 500;
  color: var(--md-on-surface);
  margin: 0;
}

.mkc-local,
.mkc-boundary,
.mkc-reason {
  font-size: var(--ct-xs);
  line-height: 1.35;
  margin: 0;
}

.mkc-local    { color: var(--md-on-surface-var); font-variant-numeric: tabular-nums; }
.mkc-boundary { color: var(--md-outline); }
.mkc-reason   { color: var(--md-callout-text); font-weight: 500; }

/* Tonal chip, MD3 assist-chip proportions. */
.mkc-chip {
  margin-top: var(--cs-2xs);
  display: inline-block;
  font-size: var(--ct-2xs);
  line-height: 1;
  padding: .3rem .6rem;
  border-radius: 999px;
  background: var(--md-surf-3);
  color: var(--md-on-surface-var);
}

/* New York is roughly 45% of world equity value, so it gets a permanent marker while the
   wall rotates around it. A dot and a brighter pane, deliberately quiet: it must be
   findable in one sweep without out-shouting the phase colours, which are the real signal. */
.mkc-card--primary {
  background: rgba(255, 255, 255, .085);
  border-color: rgba(255, 255, 255, .28);
}

.mkc-card--primary::after {
  content: "";
  position: absolute;
  top: .7rem;
  right: .7rem;
  width: .35rem;
  height: .35rem;
  border-radius: 50%;
  background: var(--md-primary);
}

html[data-theme="light"] body:not(.is-dashboard) .mkc-card--primary {
  background: rgba(255, 255, 255, .82);
  border-color: rgba(0, 0, 0, .16);
}

/* One variable drives ring, glow and chip, so the three can never disagree about phase. */
.mkc-card              { --mkc-phase: var(--mkc-shut); }
.mkc-card.is-open      { --mkc-phase: var(--mkc-open); }
.mkc-card.is-auction,
.mkc-card.is-power     { --mkc-phase: var(--mkc-edge); }
.mkc-card.is-lunch     { --mkc-phase: var(--mkc-lunch); }

.mkc-dial-fill { stroke: var(--mkc-phase); }

.mkc-chip {
  background: color-mix(in srgb, var(--mkc-phase) 20%, transparent);
  color: var(--mkc-phase);
}

.mkc-card.is-closed  .mkc-count,
.mkc-card.is-holiday .mkc-count { color: var(--md-outline); }

/* ── 24h session map ──────────────────────────────────────────────────────── */

/* Hours as prose. Deliberately plain: these exist to be quoted by an answer engine and
   read by anyone who wants the schedule rather than the live state. */
.mkc-hours { margin: var(--cs-lg) 0; }

/* The table is the same material as the clocks: a tonal glass container with a large
   corner radius, so it reads as part of the wall rather than as an HTML table dropped
   underneath it. Scrolls itself instead of widening the page, which is how a six-column
   table normally breaks a phone. */
/* ── Trading hours table, Material Design 3 ────────────────────────────────────
   Built to the M3 data-table spec rather than to the page's glass: solid surface
   containers, dividers instead of zebra, and the venue as an assist chip. Glass was
   the wrong material here, a table needs a stable ground for long rows of numbers.

   Type is the M3 scale at fixed sizes, not the fluid --ct-* clamps: those are for
   dense dashboard readouts, and a table people read is a communication surface.
     label-large   14/500   column headers
     title-medium  16/500   exchange names
     body-medium   14/400   data cells
     label-small   11/500   venue chips
   ------------------------------------------------------------------------------ */

.mkc-hours-scroll {
  overflow-x: auto;
  border-radius: 12px;                     /* shape-corner-medium */
  background: var(--md-surf-1);            /* surface-container-low */
}

.mkc-hours-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

/* Header row: surface-container, 56dp, label-large. */
.mkc-hours-table thead th {
  height: 3.5rem;
  background: var(--md-surf-2);
  color: var(--md-on-surface);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .00625em;
  text-align: left;
  white-space: nowrap;
  padding: 0 1rem 0 0;                     /* 16dp between columns */
  border-bottom: 1px solid var(--md-outline-var);
}

/* 24dp at the start and end of every row. */
.mkc-hours-table th:first-child,
.mkc-hours-table td:first-child { padding-left: 1.5rem; }
.mkc-hours-table th:last-child,
.mkc-hours-table td:last-child  { padding-right: 1.5rem; }

/* Data rows: 52dp, body-medium, horizontal dividers only. M3 tables separate
   columns with whitespace, never with vertical rules. */
.mkc-hours-table tbody td,
.mkc-hours-table tbody th {
  height: 3.25rem;
  padding: 0 1rem 0 0;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
  border-bottom: 1px solid var(--md-outline-var);
  font-size: .875rem;
  font-weight: 400;
  color: var(--md-on-surface-var);         /* on-surface-variant */
}

.mkc-hours-table tbody tr:last-child td,
.mkc-hours-table tbody tr:last-child th { border-bottom: 0; }

/* Exchange name: title-medium on-surface, the one primary column. */
.mkc-hours-table tbody th {
  font-size: 1rem;
  font-weight: 500;
  color: var(--md-on-surface);
}

/* Name and chip share the cell, but the chip is pushed to the column's trailing edge so
   the twelve chips form a straight column. Left as an inner flex wrapper rather than
   display:flex on the th itself, which would stop it being a table-cell and break the
   column widths the rest of the table depends on. */
/* Venue as an M3 assist chip, now that it has its own column: the table aligns the chips
   into a straight edge for free, which is what made them look wrong when they trailed the
   city name inside a stretching cell.
   32dp high, shape-corner-small (8dp), secondary-container with its on-color, label-small. */
.mkc-hours-venue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.25rem;
  height: 2rem;
  padding: 0 .625rem;
  border-radius: 8px;
  background: var(--md-secondary-cont);
  color: var(--md-on-secondary-cont);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .03em;
}

/* State layers: 8% on-surface on hover, 12% plus a 2dp primary outline on focus. */
.mkc-hours-table tbody tr {
  transition: background .15s cubic-bezier(.2, 0, 0, 1);
}

.mkc-hours-table tbody tr:hover {
  background: color-mix(in srgb, var(--md-on-surface) 8%, transparent);
}

.mkc-hours-table tbody tr:focus-within {
  background: color-mix(in srgb, var(--md-on-surface) 12%, transparent);
  outline: 2px solid var(--md-primary);
  outline-offset: -2px;
}

/* The sentences exist to be quoted, so they stay readable prose rather than shrinking into
   a footnote: MD3 body-medium, two columns on a wide screen so twelve of them do not turn
   into a wall of text. */
.mkc-hours-prose {
  margin: var(--cs-md) 0 0;
  columns: 2;
  column-gap: var(--cs-xl);
}

.mkc-hours-prose p {
  break-inside: avoid;
  margin: 0 0 var(--cs-sm);
  font-size: .875rem;
  line-height: 1.6;
  color: var(--md-on-surface-var);
}

@media (max-width: 720px) {
  .mkc-hours-prose { columns: 1; }
}

.mkc-hours-note {
  font-size: var(--ct-xs);
  color: var(--md-outline);
  line-height: 1.5;
  margin: var(--cs-sm) 0 0;
}

/* Deep links land on a card or an hours row, so keep them clear of the top bar. */
.mkc-card[id],
.mkc-hours-table tr[id] { scroll-margin-top: 5rem; }

.mkc-map { margin: var(--cs-xl) 0 var(--cs-lg); }

.mkc-map-rows { display: flex; flex-direction: column; gap: .3rem; }

.mkc-map-row {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  align-items: center;
  gap: var(--cs-xs);
}

.mkc-map-label {
  font-size: var(--ct-xs);
  color: var(--md-on-surface-var);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mkc-map-track {
  position: relative;
  height: .55rem;
  background: var(--md-surf-2);
  border-radius: 999px;
}

.mkc-map-bar {
  position: absolute;
  top: 0;
  height: .55rem;
  border-radius: 999px;
  background: var(--md-outline-var);
}

.mkc-map-bar.is-live { background: var(--mkc-open); }

.mkc-map-scale {
  display: flex;
  justify-content: space-between;
  margin: var(--cs-2xs) 0 0 7.5rem;
  font-size: var(--ct-2xs);
  color: var(--md-outline);
  font-variant-numeric: tabular-nums;
}

.mkc-map-note {
  font-size: var(--ct-sm);
  line-height: 1.55;
  color: var(--md-on-surface-var);
  margin: var(--cs-sm) 0 0;
}

@media (max-width: 1024px) {
  .mkc-page { --mkc-dial: 5.5rem; }
  .mkc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  /* Three across so all twelve stay on one screen, which is the point of the page. */
  .mkc-page { --mkc-dial: 4rem; }
  .mkc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mkc-card { padding: var(--cs-xs) 2px; border-radius: 1.125rem; }
  .mkc-boundary, .mkc-offset { display: none; }
  .mkc-map-row { grid-template-columns: 4.5rem minmax(0, 1fr); }
  .mkc-map-scale { margin-left: 5.5rem; }
  /* Two boundaries only happen during an Asian lunch break, where the line
     would otherwise wrap awkwardly inside a half-width card. */
  .mkc-boundary { font-size: var(--ct-2xs); }
}

@media (prefers-reduced-motion: reduce) {
  .mkc-dial-fill { transition: none; }
}