@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ============================================================
   INSIDER SCANNER — design system
   One token set, one cascade. Void-black terminal aesthetic:
   glass surfaces, a signal-triad accent palette (cyan / green /
   lime) that matches the chart-drawing JS exactly, tabular-nums
   mono for every number, one restrained Inter weight scale for display type.
   ============================================================ */

:root {
  /* surface */
  --void: #05060a;
  --bg: #05060a;
  --bg-elevated: #090c13;
  --surface: rgba(15, 19, 28, 0.58);
  --surface-solid: #10141c;
  --surface-2: rgba(20, 25, 36, 0.68);
  --surface-3: #161b26;
  --border: rgba(180, 200, 224, 0.11);
  --border-strong: rgba(215, 255, 125, 0.32);
  --border-hair: rgba(255, 255, 255, 0.08);

  /* text */
  --text: #f1f5fb;
  --text-2: #a4b0c2;
  --text-3: #7b849c;
  --muted: #a4b0c2;

  /* brand / signal triad — kept in exact sync with the canvas chart JS.
     --accent reuses --lime's exact value rather than a new color: --lime
     was already contrast-solved for both themes (see the light-theme block
     below), so pushing the primary accent toward neon green this way
     carries zero fresh accessibility risk. */
  --accent: #d7ff7d;
  --accent-dim: rgba(215, 255, 125, 0.1);
  --lime: #d7ff7d;
  --lime-dim: rgba(215, 255, 125, 0.1);
  --green: #00ec9f;
  --green-dim: rgba(0, 236, 159, 0.1);
  --blue: #4ba3ff;
  --blue-dim: rgba(75, 163, 255, 0.1);
  --violet: #9b8cff;
  --amber: #ffc85a;
  --amber-dim: rgba(255, 200, 90, 0.12);
  --red: #ff5c72;
  --red-dim: rgba(255, 92, 114, 0.1);

  /* ---- research semantics -------------------------------------------
     Direction, not judgement. The product used one bright green for
     "accent", "positive number" and "buy" alike, which is exactly what
     made a research tool read as a BUY-signal service. These separate
     the three ideas so a purchase can be green WITHOUT the page implying
     the purchase was a good idea:
       --buy/--sell  transaction DIRECTION only (never "good"/"bad")
       --score-*     the activity score ramp: blue -> teal, deliberately
                     NOT green, so a high score never reads as "buy"
       --neutral     analytics that carry no directional meaning at all
     Existing --green/--red/--accent are untouched so nothing regresses. */
  --buy: #35b98a;
  --buy-dim: rgba(53, 185, 138, 0.12);
  --sell: #d2635f;
  --sell-dim: rgba(210, 99, 95, 0.12);
  --neutral: #6f8bb4;
  --neutral-dim: rgba(111, 139, 180, 0.12);
  --score-low: #4a6f9e;
  --score-mid: #3d8fb8;
  --score-high: #2fb3ac;
  --score-track: rgba(120, 150, 190, 0.16);

  /* rating-tier aliases */
  --aplus: var(--amber);
  --a: var(--green);
  --b: #8aa7d8;

  /* radius — concentric scale, child always one step below parent */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-2xl: 40px;
  --radius: var(--r-md);

  /* glass material tiers */
  --glass-thin: blur(18px) saturate(180%);
  --glass-regular: blur(28px) saturate(180%);
  --glass-thick: blur(44px) saturate(200%);
  --glass-fill: linear-gradient(158deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.022) 42%, rgba(255,255,255,.01) 68%, rgba(255,255,255,.04) 100%);
  --rim: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(255,255,255,.045), inset 1px 0 0 rgba(255,255,255,.06), inset -1px 0 0 rgba(255,255,255,.06);

  /* elevation */
  --lift-1: 0 2px 10px rgba(0,0,0,.28);
  --lift-2: 0 12px 36px rgba(0,0,0,.36);
  --lift-3: 0 26px 70px rgba(0,0,0,.46);
  --shadow: var(--lift-2);
  --glow-accent: 0 0 0 1px rgba(215,255,125,.16), 0 6px 18px rgba(215,255,125,.09);
  --glow-green: 0 0 0 1px rgba(0,236,159,.22), 0 8px 28px rgba(0,236,159,.14);

  /* motion */
  --ease: cubic-bezier(.22,.9,.32,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  /* moving background blobs — the site's original three-color mesh */
  --bg-blob-1: #a8e063;
  --bg-blob-2: #edbd62;
  --bg-blob-3: #5f7de8;

  --nav-bg: rgba(6,8,13,.72);
}

/* Light theme — same institutional system, same accent family, every
   color darkened enough off white to hold AA text contrast. Toggled via
   [data-theme] on <html>, set before first paint by THEME_INIT so there
   is no flash of the wrong theme. */
:root[data-theme="light"] {
  --void: #e3e9f2;
  --bg: #e7ecf4;
  --bg-elevated: #f6f8fc;
  --surface: rgba(255, 255, 255, 0.6);
  --surface-solid: #f6f8fc;
  --surface-2: rgba(221, 228, 240, 0.92);
  --surface-3: #dfe6f0;
  --border: rgba(15, 23, 42, 0.14);
  --border-strong: rgba(104, 104, 14, 0.42);
  --border-hair: rgba(15, 23, 42, 0.09);

  --text: #0c1524;
  --text-2: #45516a;
  /* --text-3, --accent and --amber are solved against the *tinted* backdrop,
     not flat --bg. At #5a6578 this hit 4.96:1 on bare --bg -- passing, but
     with only .46 of headroom, so the aurora painted over that bg pushed it
     under AA (3.68:1 at worst). Measured against the worst backdrop the mesh
     can produce anywhere in the viewport: --text-3 4.65, --amber 4.59. */
  --text-3: #545f71;
  --muted: #45516a;

  /* --accent now reuses --lime's own value below rather than the former
     teal (#006780, solved the mesh-aware way described in the note that
     used to sit here). --lime has been a live, visible UI color on this
     site already (hero gradient, rating badges) with no contrast complaint,
     so reusing it carries the same guarantee without re-deriving one. */
  --accent: #68680e;
  --accent-dim: rgba(122, 122, 16, 0.12);
  --lime: #68680e;
  --lime-dim: rgba(122, 122, 16, 0.12);
  --green: #067351;
  --green-dim: rgba(6, 122, 86, 0.1);
  --blue: #1b60c9;
  --blue-dim: rgba(28, 100, 209, 0.1);
  --violet: #644adf;
  --amber: #855508;
  --amber-dim: rgba(162, 104, 10, 0.12);
  --red: #bd2942;
  --red-dim: rgba(198, 43, 69, 0.1);

  /* research semantics, light theme -- same roles, contrast-solved against
     the light backdrop (see the --text-3 note above for the method). */
  --buy: #0a7350;
  --buy-dim: rgba(10, 115, 80, 0.10);
  --sell: #a8332f;
  --sell-dim: rgba(168, 51, 47, 0.10);
  --neutral: #3f5a80;
  --neutral-dim: rgba(63, 90, 128, 0.10);
  --score-low: #3f5f8a;
  --score-mid: #1f6f96;
  --score-high: #0d7d78;
  --score-track: rgba(63, 90, 128, 0.14);

  --aplus: var(--amber);
  --a: var(--green);
  --b: #446697;

  --glass-fill: linear-gradient(158deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,.3) 42%, rgba(255,255,255,.14) 68%, rgba(255,255,255,.4) 100%);
  --rim: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(15,23,42,.05), inset 1px 0 0 rgba(15,23,42,.03), inset -1px 0 0 rgba(15,23,42,.03);

  --lift-1: 0 2px 8px rgba(15,23,42,.07);
  --lift-2: 0 12px 28px rgba(15,23,42,.09);
  --lift-3: 0 24px 56px rgba(15,23,42,.12);
  --shadow: var(--lift-2);
  --glow-accent: 0 0 0 1px rgba(104,104,14,.18), 0 6px 16px rgba(104,104,14,.08);
  --glow-green: 0 0 0 1px rgba(6,122,86,.25), 0 8px 24px rgba(6,122,86,.12);

  --nav-bg: rgba(255,255,255,.72);
}

*, *::before, *::after { box-sizing: border-box; }
/* overflow-x:hidden on body (below) does not clip position:fixed
   descendants -- they're positioned against the initial containing block
   (the viewport/html), not against body. The mobile slide-out nav panel is
   position:fixed and pushed off-screen with translateX(100%) rather than
   display:none, so without this, its full untransformed width still
   counted toward the page's scrollable area on every page: it isn't
   visible, but the whole document became horizontally scrollable by
   exactly one viewport-width on any screen narrow enough to trigger it. */
html { color-scheme: dark; overflow-x: hidden; }
html[data-theme="light"] { color-scheme: light; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
section[id] { scroll-margin-top: 132px; }
body {
  background: var(--bg); color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  margin: 0; line-height: 1.55; font-size: 16px;
  position: relative; overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.mono, .mono * { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
h1, h2, h3 { font-family: 'Inter', -apple-system, sans-serif; font-weight: 700; letter-spacing: -.02em; margin: 0; }
h1 { letter-spacing: -.03em; }
h2 { letter-spacing: -.022em; }
h4 { margin: 0; font-family: 'Inter', sans-serif; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; }
::selection { background: rgba(215,255,125,.28); color: #04151a; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }

/* ------------------------------------------------------------
   background system — vignette + fine instrument grid + aurora
   ------------------------------------------------------------ */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: var(--bg);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(1100px 700px at 50% 0%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(1100px 700px at 50% 0%, #000 0%, transparent 72%);
}
/* The mesh is decoration, but it is painted above body::before and below
   .wrap (z-index 1), so it tints the backdrop *under* body text. An audit that
   composites background-color up the ancestor chain cannot see it: the walk
   terminates at body's opaque background, which these fixed layers cover.
   Opacity here is therefore a contrast budget, not just a style choice --
   at .18 the lime blob dragged --text-3 to 3.90:1. See the light block below,
   where body::before carries its own tint and needed the same treatment. */
.bg-mesh { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bg-mesh span { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .11; }
.bg-mesh .b1 { width: 480px; height: 480px; background: var(--bg-blob-1); top: -160px; left: -100px; animation: drift1 22s ease-in-out infinite; }
.bg-mesh .b2 { width: 420px; height: 420px; background: var(--bg-blob-2); top: 20%; right: -140px; animation: drift2 26s ease-in-out infinite; }
.bg-mesh .b3 { width: 380px; height: 380px; background: var(--bg-blob-3); bottom: -120px; left: 30%; animation: drift3 30s ease-in-out infinite; }
/* Light carries its aurora in body::before rather than only in .bg-mesh, so
   both layers spend the same contrast budget and both had to come down. */
:root[data-theme="light"] body::before {
  background:
    radial-gradient(1100px 650px at 15% -8%, rgba(168,224,99,.08), transparent 60%),
    radial-gradient(950px 620px at 100% 6%, rgba(237,189,98,.07), transparent 55%),
    radial-gradient(850px 850px at 50% 112%, rgba(95,125,232,.06), transparent 60%),
    var(--bg);
}
:root[data-theme="light"] body::after {
  background-image:
    linear-gradient(rgba(15,23,42,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.05) 1px, transparent 1px);
}
:root[data-theme="light"] .bg-mesh span { opacity: .12; }
@keyframes drift1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(60px,80px); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-70px,50px); } }
@keyframes drift3 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(50px,-60px); } }

/* ------------------------------------------------------------
   buttons
   ------------------------------------------------------------ */
.cta {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(135deg, var(--accent), var(--green));
  color: #04151a; font-weight: 700; font-size: 14.5px;
  padding: 10px 20px; border-radius: 999px; text-decoration: none; border: none; cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .25s var(--ease);
  box-shadow: 0 0 0 rgba(215,255,125,0);
}
.cta:hover { transform: translateY(-1px); box-shadow: var(--glow-accent); }
.cta:active { transform: translateY(0); }
.cta.ghost {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  backdrop-filter: var(--glass-thin); -webkit-backdrop-filter: var(--glass-thin);
  box-shadow: none;
}
.cta.ghost:hover { border-color: var(--border-strong); box-shadow: var(--lift-1); }

/* ------------------------------------------------------------
   nav / status bar / ticker
   ------------------------------------------------------------ */
nav {
  position: sticky; top: 0; z-index: 30;
  background: var(--nav-bg);
  backdrop-filter: var(--glass-regular); -webkit-backdrop-filter: var(--glass-regular);
  border-bottom: 1px solid var(--border-hair);
}
.status-bar {
  border-bottom: 1px solid var(--border-hair);
  padding: 7px 0; font-size: 13.5px; color: var(--text-3);
  font-family: 'JetBrains Mono', monospace;
}
/* One ambient strip instead of two. The freshness line and the ticker tape
   were separate full-width rows costing 76px between them before any content;
   side by side they cost 38px and read as one status band. */
.status-bar .wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Needs to out-rank `.status-bar .wrap`, which sets flex-wrap: wrap.
   At equal-or-lower specificity the items stack and the strip grows. */
.status-bar .wrap.status-row { flex-wrap: nowrap; gap: 18px; }
.status-line { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; white-space: nowrap; }
.status-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: var(--green); box-shadow: 0 0 8px var(--green);
  animation: statuspulse 2.2s ease-in-out infinite;
}
.status-dot.stale { background: var(--text-3); box-shadow: none; animation: none; }
@keyframes statuspulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.live-watch {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  color: var(--text-3); font-size: 12.5px; letter-spacing: .03em; text-transform: uppercase;
  /* Sharing a row with the tape means this gets squeezed. Without these it
     wraps to four lines and drags the whole strip to 78px. */
  white-space: nowrap; flex-shrink: 0;
}
.live-watch-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 8px var(--accent); animation: statuspulse 2.2s ease-in-out infinite;
}
.live-watch.checking .live-watch-dot { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.live-watch.reconnecting .live-watch-dot { background: var(--red); box-shadow: 0 0 8px var(--red); animation: statuspulse .9s ease-in-out infinite; }

.ticker-bar {
  flex: 1 1 auto; min-width: 0; border-bottom: 0;
  overflow: hidden; white-space: nowrap; position: relative;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.ticker-track { display: inline-flex; gap: 34px; padding: 0; animation: ticker-scroll 48s linear infinite; }
.ticker-bar:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.ticker-item { font-family: 'JetBrains Mono', monospace; font-size: 13.5px; color: var(--text-3); display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; }
.ticker-item .t-ticker { color: var(--text); font-weight: 700; }
.ticker-item .t-rating { font-weight: 700; }
.ticker-item .t-rating.Aplus { color: var(--amber); }
.ticker-item .t-rating.A { color: var(--green); }
.ticker-item .t-rating.Bplus { color: #9fb3d4; }
:root[data-theme="light"] .ticker-item .t-rating.Bplus { color: #3f5c85; }
.ticker-item .t-rating.B { color: var(--b); }

/* The nav spans wider than the 1120px content column. Six flat primary links
   plus a search need roughly 1230px of bar; inside .wrap they had 385px for
   946px of content and simply overlapped the account controls at EVERY width,
   including 1680px. A nav wider than the prose it sits above is normal, and
   it is what makes six visible destinations possible at all. */
.nav-shell { display: flex; justify-content: space-between; align-items: center; padding: 14px 24px; max-width: 1480px; gap: 16px; }
/* Links centred between the brand and the account controls, which puts the
   six destinations where the eye lands first. Centring only applies where
   there is room for it: the row takes all the leftover width, so when the bar
   is nearly full "centred" and "flush against the wordmark" are the same
   thing. Below 1340px it left-aligns behind a gutter instead. */
.nav-links { flex: 1 1 auto; justify-content: center; }
@media (max-width: 1340px) { .nav-links { justify-content: flex-start; margin-left: 22px; } }
@media (max-width: 1499px) { .nav-item { padding: 8px 7px; } .nav-pinned { gap: 10px; } }
.nav-links { min-width: 0; }
.brand { font-family: 'Inter', -apple-system, sans-serif; font-weight: 700; font-size: 18px; display: flex; align-items: center; gap: 9px; letter-spacing: -.01em; }
.brand .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
/* "INSIDER SCANNER" is two words where the old name was one, and the nav bar
   has been tight before -- ten flat links once filled 654px of 1120px. Keeping
   it on one line stops it wrapping into a two-line brand and shoving the nav
   taller; below 480px the second word is dropped instead, where the mark plus
   "INSIDER" still identifies the site. */
.brand-name { white-space: nowrap; }

/* First-visit guide. Three short steps explaining what the site is before the
   visitor meets a wall of scored filings. Existing tokens only, so both themes
   stay inside the audited contrast. */
.guide-backdrop {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(3, 7, 12, .72); backdrop-filter: blur(4px);
}
/* The `hidden` attribute is only a user-agent rule, so ANY author `display`
   declaration beats it. Without this, `display: flex` above won every time and
   the overlay stayed on screen at full height with the attribute set -- Skip
   and Get started ran, set the flag and restored scrolling, but nothing
   appeared to happen and the page underneath was left permanently covered at
   z-index 200. Setting hidden must actually hide. */
.guide-backdrop[hidden] { display: none; }

/* Inline onboarding. Deliberately in the flow rather than over it: it can be
   read, ignored or dismissed, and it never locks scroll or steals focus. */
.guide-panel {
  border: 1px solid var(--border); border-radius: var(--r-md, 14px);
  background: var(--surface); background-image: var(--glass-fill);
  padding: 18px 20px; margin: 0 0 22px; box-shadow: var(--rim);
}
.guide-panel[hidden] { display: none; }
.guide-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.guide-panel-head h2 { font-size: 15px; font-weight: 700; margin: 0; }
.guide-panel-close {
  font: inherit; font-size: 12.5px; color: var(--text-3); background: none;
  border: 0; cursor: pointer; padding: 6px 8px; min-height: 44px; border-radius: 8px;
}
.guide-panel-close:hover { color: var(--text-2); background: var(--surface-2); }
.guide-panel-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0; padding: 0 0 0 18px; }
.guide-panel-steps li { font-size: 13px; color: var(--text-3); line-height: 1.55; }
.guide-panel-steps b { display: block; color: var(--text-2); font-size: 13.5px; margin-bottom: 3px; }
.guide-panel-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-hair); }
.guide-panel-cta { font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; }
.guide-panel-cta:hover { text-decoration: underline; }
.guide-panel-tour {
  font: inherit; font-size: 13px; font-weight: 600; color: var(--text-2);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 9px 15px; min-height: 44px; cursor: pointer;
}
.guide-panel-tour:hover { color: var(--text); border-color: var(--border-strong); }
@media (max-width: 760px) { .guide-panel-steps { grid-template-columns: 1fr; gap: 12px; } }
.guide-card {
  position: relative; width: 100%; max-width: 470px; padding: 30px;
  background: var(--surface-solid); border: 1px solid var(--border-strong);
  border-radius: var(--r-lg); box-shadow: var(--rim), var(--lift-2);
}
.guide-progress { display: flex; gap: 6px; margin-bottom: 20px; }
.guide-dot { width: 26px; height: 4px; border-radius: 999px; background: var(--border-strong); transition: background .2s; }
.guide-dot.is-on { background: linear-gradient(135deg, var(--accent), var(--green)); }
.guide-count { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; letter-spacing: .06em; color: var(--text-3); text-transform: uppercase; }
.guide-title { font-size: 22px; line-height: 1.25; margin: 8px 0 10px; }
.guide-text { font-size: 15.5px; line-height: 1.6; color: var(--text-2); }
.guide-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 26px; }
.guide-skip {
  font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; padding: 9px 4px;
  color: var(--text-3); background: none; border: none; border-radius: 8px;
}
.guide-skip:hover { color: var(--text); }
.guide-next { cursor: pointer; border: none; font-family: inherit; font-size: 14.5px; }
.guide-reopen {
  font-family: inherit; font-size: 13px; cursor: pointer; padding: 0;
  color: var(--text-3); background: none; border: none; text-decoration: underline;
}
.guide-reopen:hover { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .guide-dot { transition: none; } }
@media (max-width: 480px) {
  .guide-card { padding: 24px 20px; }
  .guide-title { font-size: 19px; }
  .guide-text { font-size: 15px; }
  /* Both controls to a comfortable thumb target -- the default padding left
     them around 38px tall, under the 44px touch guideline. */
  .guide-next { padding: 13px 24px; }
  .guide-skip { padding: 13px 12px; }
}
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px; font-size: 12.5px; font-weight: 800;
  background: linear-gradient(135deg, var(--accent), var(--green)); color: #04151a;
  box-shadow: var(--glow-accent);
}
/* Ten flat links filled 654px of a 1120px bar and still left two pages
   unreachable. Grouping them into four items removes the crowding and gives
   /screener and /stocks somewhere to live. The horizontal scroll and its
   mask are gone: four items always fit, so nothing needs to slide. */
.nav-links {
  display: flex; gap: 4px; align-items: center; flex: 1 1 auto; min-width: 0;
  padding: 3px 0;
}
.nav-group { position: relative; flex-shrink: 0; }
.nav-group-label {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 14.5px; color: var(--text-2);
  background: none; border: 0; cursor: pointer;
  padding: 8px 12px; border-radius: var(--r-sm, 10px);
  white-space: nowrap; transition: color .15s, background .15s;
}
.nav-group-label:hover, .nav-group:focus-within .nav-group-label { color: var(--text); background: var(--surface-2); }
.nav-caret { width: 10px; height: 6px; opacity: .65; transition: transform .18s ease; }
.nav-group:hover .nav-caret, .nav-group:focus-within .nav-caret { transform: rotate(180deg); }
.nav-flat {
  font-size: 14.5px; color: var(--text-2); padding: 8px 12px;
  border-radius: var(--r-sm, 10px); white-space: nowrap; flex-shrink: 0;
  transition: color .15s, background .15s;
}
.nav-flat:hover { color: var(--text); background: var(--surface-2); }

/* The six primary destinations. Flat links, not dropdowns: a reader should
   see every section without opening anything. */
.nav-item {
  font-size: 14.5px; color: var(--text-2); padding: 8px 9px;
  border-radius: var(--r-sm, 10px); white-space: nowrap; flex-shrink: 0;
  text-decoration: none; position: relative;
  transition: color .15s, background .15s;
}
.nav-item:hover { color: var(--text); background: var(--surface-2); }
/* Current section is marked by an underline AND aria-current, never by
   colour alone -- colour is not information anyone can rely on. */
.nav-item.on, .nav-group-label.on { color: var(--text); font-weight: 600; }
.nav-item.on::after, .nav-group-label.on::after {
  content: ''; position: absolute; left: 11px; right: 11px; bottom: 2px;
  height: 2px; border-radius: 2px; background: var(--accent);
}
.nav-group-label { position: relative; }

/* Company search. Collapses to its icon before it can crowd the hamburger. */
.nav-search {
  display: flex; align-items: center; gap: 7px; flex-shrink: 1; min-width: 0;
  padding: 6px 10px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
  transition: border-color .15s, box-shadow .15s;
}
/* Focus goes on the input itself with a real outline, not a tinted shadow on
   the wrapper. A 12%-alpha ring is close to invisible even when it paints,
   and an outline survives forced-colors mode where box-shadow does not. */
.nav-search:focus-within { border-color: var(--border-strong); }
.nav-search input:focus-visible,
.nav-search-mobile input:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px;
}
.nav-search-icon { width: 15px; height: 15px; color: var(--text-3); flex-shrink: 0; }
.nav-search input {
  width: 132px; min-width: 0; font: inherit; font-size: 13px; color: var(--text);
  background: none; border: 0; outline: none; padding: 2px 0;
}
.nav-search input::placeholder { color: var(--text-3); }
.nav-search input::-webkit-search-cancel-button { filter: invert(.5); }
/* Measured shortfall: the full field is 148px, and below 1500 the six
   labels plus the More menu overrun the account controls. There the field is
   replaced by a 44px icon linking to the same place -- search stays one
   click away and discoverable instead of silently vanishing. Below 1180 the
   slide-out panel carries a real search field again. */
/* Full labels by default; the short ones exist only for the band below. */
.nav-label-short { display: none; }

/* 961-1340px: six full labels plus the account controls need about 1400px of
   bar, and this band has less. Rather than collapsing to a hamburger -- which
   hides the whole information architecture behind an icon -- everything gives
   a little: the brand drops its second word, three labels shorten, the search
   becomes its icon and the type tightens. Measured to fit at 961px. */
@media (min-width: 981px) and (max-width: 1340px) {
  .nav-label { display: none; }
  .nav-label-short { display: inline; }
  .brand-name-tail { display: none; }
  .nav-item, .nav-group-label { font-size: 13.5px; padding-left: 6px; padding-right: 6px; }
  .nav-item.on::after, .nav-group-label.on::after { left: 6px; right: 6px; }
  .nav-shell { gap: 10px; }
  /* The row is nearly full at the bottom of this band, so centring alone let
     the first link sit flush against the wordmark. An explicit gutter keeps
     the brand readable as a separate thing; the CTA gives back the width. */
  .nav-links { gap: 2px; margin-left: 22px; }
  .nav-pinned { gap: 8px; margin-left: 10px; }
  .nav-pinned .cta { padding-left: 14px; padding-right: 14px; }
}

.nav-search-compact { display: none; }
@media (max-width: 1499px) {
  .nav-search { display: none; }
  .nav-search-compact {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
    color: var(--text-3); border: 1px solid var(--border); background: var(--surface-2);
  }
  .nav-search-compact:hover { color: var(--text); border-color: var(--border-strong); }
  .nav-search-compact svg { width: 17px; height: 17px; }
}
@media (max-width: 980px) { .nav-search-compact { display: none; } }
/* The search icon yields in the tight band too. It is the one control whose
   job another already does: Companies leads to the company index, which is a
   searchable list of all 194. This must come after the max-width:1499px rule
   that shows it, or it silently loses the cascade -- which it did. */
@media (min-width: 981px) and (max-width: 1340px) { .nav-search-compact { display: none; } }
/* Panel-only search: hidden on desktop where the header one is visible. */
.nav-search-mobile { display: none; }
@media (max-width: 980px) {
  .nav-search-mobile { display: flex; gap: 8px; margin-bottom: 6px; }
  .nav-search-mobile input {
    flex: 1; min-width: 0; font: inherit; font-size: 16px; color: var(--text);
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: 10px; padding: 12px 13px; outline: none; min-height: 44px;
  }
  .nav-search-mobile input:focus { border-color: var(--border-strong); }
  .nav-search-mobile button {
    font: inherit; font-size: 14px; font-weight: 600; color: var(--text);
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: 10px; padding: 0 16px; min-height: 44px; cursor: pointer;
  }
}


.nav-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
  min-width: 286px; padding: 8px;
  display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--border); border-radius: var(--r-md, 14px);
  background: var(--surface-solid, var(--surface));
  box-shadow: var(--lift-2, 0 12px 28px rgba(0,0,0,.18));
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.nav-group:hover .nav-menu, .nav-group:focus-within .nav-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-menu a {
  display: flex; flex-direction: column; gap: 1px;
  padding: 9px 12px; border-radius: var(--r-xs, 8px);
  text-decoration: none; white-space: normal;
}
.nav-menu a:hover { background: var(--surface-2); }
.nav-menu a b { font-size: 14.5px; font-weight: 600; color: var(--text); }
.nav-menu a span { font-size: 12.5px; color: var(--text-3); line-height: 1.45; }
.nav-links::-webkit-scrollbar { display: none; }
/* Direct children only. Menu items inside .nav-menu style themselves and
   must not inherit the flat-link underline. */
.nav-links > a { font-size: 14.5px; color: var(--text-2); position: relative; white-space: nowrap; transition: color .15s; flex-shrink: 0; }
.nav-links > a:hover { color: var(--text); }

.nav-pinned { display: flex; align-items: center; gap: 14px; flex-shrink: 0; margin-left: 20px; }
.nav-waitlist { font-size: 14px; color: var(--text-3); white-space: nowrap; transition: color .15s; }
.nav-waitlist:hover { color: var(--text-2); }
.nav-account {
  display: inline-flex; align-items: center; gap: 8px; color: var(--text-2);
  font-size: 14px; font-weight: 600; white-space: nowrap;
}
.nav-account::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 10px rgba(78,255,179,.65);
}
.nav-account:hover { color: var(--text); }

/* Mirrors .nav-messages / .nav-account, shown only inside the mobile
   slide-out panel (see the max-width:768px block below) once the pinned
   bar's own copies are hidden there for space. */
.nav-mobile-account { display: none; }

.lang-switch { position: relative; flex-shrink: 0; }
.lang-toggle {
  flex-shrink: 0; height: 34px; min-width: 34px; padding: 0 10px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2);
  font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .04em;
  cursor: pointer; transition: border-color .18s, color .18s;
}
.lang-toggle:hover { color: var(--text); border-color: var(--border-strong); }
.lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 150px; padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--border); border-radius: var(--r-md, 14px);
  background: var(--surface-solid, var(--surface));
  box-shadow: var(--lift-2, 0 12px 28px rgba(0,0,0,.18));
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
:root[dir="rtl"] .lang-menu { right: auto; left: 0; }
.lang-switch:hover .lang-menu, .lang-switch:focus-within .lang-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.lang-menu a { padding: 8px 10px; border-radius: var(--r-xs, 8px); font-size: 13.5px; color: var(--text-2); }
.lang-menu a:hover { background: var(--surface-2); color: var(--text); }
.lang-menu a.active { color: var(--accent); font-weight: 600; }

@media (max-width: 640px) {
  .nav-waitlist { display: none; }
  /* Not enough room for three things on one line. The freshness date is the
     load-bearing one, so the decorative tape and the poll notice give way. */
  .status-row .ticker-bar, .status-row .live-watch { display: none; }
}

.theme-toggle {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2);
  cursor: pointer; transition: border-color .18s, color .18s, transform .18s var(--ease);
}
.theme-toggle:hover { color: var(--text); border-color: var(--border-strong); transform: translateY(-1px); }
.theme-icon { width: 17px; height: 17px; }
.theme-icon-moon { display: none; }
:root[data-theme="light"] .theme-icon-sun { display: none; }
:root[data-theme="light"] .theme-icon-moon { display: block; }

.nav-hamburger {
  display: none; flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  align-items: center; justify-content: center; gap: 4px; flex-direction: column;
  background: var(--surface-2); border: 1px solid var(--border); cursor: pointer; padding: 0;
  transition: border-color .18s;
  /* nav is z-index:30, but the open slide-out panel is z-index:40 (it has to
     sit above ordinary page content) -- without its own stacking context
     above that, this button was buried under its own panel the moment it
     opened, and there was no way to close the menu by tapping it again. */
  position: relative; z-index: 41;
}
.nav-hamburger:hover { border-color: var(--border-strong); }
.nav-hamburger span { display: block; width: 15px; height: 1.6px; background: var(--text-2); border-radius: 1px; transition: transform .22s var(--ease), opacity .18s; }
.nav-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* 1180px, not 768px. Three dropdown buttons used to fit down to 768; six
   flat labels, the More menu and the account controls need about 1340px of
   bar; below that they overlapped. Below this the slide-out panel --
   which already carries all six, the More section, search and account --
   takes over. */
@media (max-width: 980px) {
  .nav-hamburger { display: inline-flex; }
  /* Messages, avatar, and username together were the widest thing in the
     pinned bar and didn't shrink -- past a point they simply ran the bar
     off the right edge of the screen. The avatar alone (26px) stays as a
     quick profile shortcut; the text versions move into the slide-out
     panel below instead of disappearing. */
  .nav-messages, .nav-account { display: none; }
  .nav-mobile-account {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 4px 4px 18px; margin-bottom: 8px; border-bottom: 1px solid var(--border-hair);
  }
  .nav-mobile-account-link { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; color: var(--text); min-width: 0; }
  .nav-mobile-account-link img { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; border: 1px solid var(--border-strong); }
  .nav-mobile-messages-link { font-size: 14.5px; color: var(--text-2); white-space: nowrap; }
  .nav-links {
    position: fixed; top: 0; left: 0; right: 0; z-index: 40;
    height: 100vh; height: 100dvh;
    flex-direction: column; align-items: stretch; gap: 2px; padding: 88px 22px 24px;
    background: var(--bg-elevated); overflow-y: auto; mask-image: none; -webkit-mask-image: none;
    transform: translateX(100%); transition: transform .28s var(--ease-out);
  }
  .nav-links.mobile-open { transform: translateX(0); }
  .nav-links > a { padding: 15px 4px; border-bottom: 1px solid var(--border-hair); font-size: 16px; }

  /* Hover menus do not work on touch, so every group is simply expanded
     into a labelled section of the slide-out panel. */
  .nav-group { width: 100%; }
  .nav-group-label {
    width: 100%; justify-content: flex-start; cursor: default;
    padding: 18px 4px 6px; font-size: 12px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: var(--text-3);
    background: none;
  }
  .nav-group-label:hover, .nav-group:focus-within .nav-group-label { background: none; color: var(--text-3); }
  .nav-caret, .nav-group:hover .nav-caret { display: none; }
  .nav-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; padding: 0; gap: 0; border: 0; background: none; box-shadow: none;
  }
  .nav-menu a { padding: 13px 4px; border-bottom: 1px solid var(--border-hair); border-radius: 0; }
  .nav-menu a:hover { background: none; }
  .nav-menu a b { font-size: 16px; }
  .nav-menu a span { display: none; }
  body.nav-locked { overflow: hidden; }
}

/* Touch targets. Measured at 375px, the nav's own controls came in at
   34-37px: hamburger, theme toggle, language toggle and its menu items, and
   the sign-up CTA. Those are the controls a phone user reaches for most, and
   34px is well under the 44px minimum. Bumped only where touch is likely --
   desktop pointer sizing is left alone. */
@media (max-width: 1340px) {
  .nav-hamburger, .theme-toggle, .lang-toggle { width: 44px; height: 44px; }
  .lang-menu a { min-height: 44px; display: flex; align-items: center; }
  .nav-pinned .cta, .nav-waitlist { min-height: 44px; display: inline-flex; align-items: center; }
  .nav-group-label { min-height: 44px; }
  /* The six primary links are still the horizontal bar at tablet widths,
     where a finger is as likely as a pointer. 38px -> 44px costs six pixels
     of nav height and only below this breakpoint. */
  .nav-item { min-height: 44px; display: inline-flex; align-items: center; }
}

@media (max-width: 480px) {
  .nav-shell { padding: 12px 16px; }
  .nav-pinned { gap: 8px; margin-left: 10px; }
  .nav-pinned .cta { padding: 8px 13px; font-size: 12.5px; }
  .brand-name-tail { display: none; }
}

/* account access */
.auth-section { min-height: calc(100vh - 260px); display: grid; place-items: center; padding: 72px 0 96px; }
.auth-shell { width: min(100%, 520px); }
.auth-shell-wide { width: min(100%, 980px); display: grid; grid-template-columns: 1fr 440px; gap: 24px; align-items: start; }
@media (max-width: 860px) { .auth-shell-wide { grid-template-columns: 1fr; } }
.auth-preview {
  position: relative; overflow: hidden; padding: clamp(24px, 4vw, 36px);
  background: linear-gradient(145deg, rgba(15,29,44,.92), rgba(7,16,27,.82)), var(--glass-fill);
  border: 1px solid var(--border-strong); border-radius: var(--r-lg);
  box-shadow: var(--rim), var(--lift-3), 0 0 48px rgba(215,255,125,.08);
  backdrop-filter: var(--glass-thick); -webkit-backdrop-filter: var(--glass-thick);
}
:root[data-theme="light"] .auth-preview { background-color: rgba(255,255,255,.88); background-image: var(--glass-fill); }
.auth-preview h2 { font-size: 20px; margin: 8px 0 20px; }
.preview-card {
  background: var(--surface); background-image: var(--glass-fill);
  backdrop-filter: var(--glass-thin); -webkit-backdrop-filter: var(--glass-thin);
  border: 1px solid var(--border); border-radius: var(--r-md, 14px); padding: 18px 20px;
  box-shadow: var(--rim), var(--lift-1); margin-bottom: 20px;
}
.preview-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.preview-ticker { font-family: 'JetBrains Mono', monospace; font-size: 19px; font-weight: 700; }
.preview-company { color: var(--text-3); font-size: 12.5px; margin-top: 2px; }
.preview-meta { display: flex; gap: 24px; margin-bottom: 12px; }
.preview-meta span { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); margin-bottom: 3px; }
.preview-meta strong { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 600; }
.preview-reason { font-size: 13px; color: var(--text-2); line-height: 1.6; margin: 0; }
.preview-stats { display: flex; gap: 28px; }
.preview-stats strong { display: block; font-family: 'JetBrains Mono', monospace; font-size: 22px; font-weight: 700; color: var(--green); }
.preview-stats span { font-size: 12px; color: var(--text-3); }
.auth-card {
  position: relative; overflow: hidden; padding: clamp(26px, 5vw, 42px);
  background: linear-gradient(145deg, rgba(15,29,44,.92), rgba(7,16,27,.82)), var(--glass-fill);
  border: 1px solid var(--border-strong); border-radius: var(--r-lg);
  box-shadow: var(--rim), var(--lift-3), 0 0 48px rgba(215,255,125,.08);
  backdrop-filter: var(--glass-thick); -webkit-backdrop-filter: var(--glass-thick);
}
:root[data-theme="light"] .auth-card { background-color: rgba(255,255,255,.88); background-image: var(--glass-fill); }
.auth-card::before {
  content: ""; position: absolute; width: 220px; height: 220px; right: -90px; top: -120px;
  border-radius: 50%; background: radial-gradient(circle, rgba(78,255,179,.2), transparent 68%); pointer-events: none;
}
.auth-kicker { font-family: 'JetBrains Mono', monospace; color: var(--accent); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.auth-card h1 { font-size: clamp(30px, 6vw, 44px); line-height: 1.05; letter-spacing: -.04em; margin: 12px 0 10px; }
.auth-card > p { color: var(--text-2); font-size: 15px; line-height: 1.6; }
.auth-form { display: grid; gap: 17px; margin-top: 28px; }
.auth-field { display: grid; gap: 7px; }
.auth-field label { color: var(--text-2); font-size: 13px; font-weight: 600; }
.auth-field input {
  width: 100%; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--text); padding: 13px 14px; font: inherit;
  outline: none; transition: border-color .16s, box-shadow .16s;
}
.auth-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(215,255,125,.13); }
.auth-field input::placeholder { color: var(--text-3); }
.password-rules { color: var(--text-3); font-size: 12.5px; line-height: 1.5; }
.auth-benefits { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 9px; text-align: left; }
.auth-benefits li { display: flex; gap: 8px; font-size: 13px; color: var(--text-3); line-height: 1.55; }
.auth-benefits li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); margin-top: 7px; flex-shrink: 0; }
.auth-benefits b { color: var(--text-2); font-weight: 600; }
.auth-note { font-size: 12px; color: var(--text-3); line-height: 1.6; margin: 0 0 18px; padding-top: 12px; border-top: 1px solid var(--border-hair); text-align: left; }
.auth-note strong { color: var(--text-2); }
.auth-submit { width: 100%; justify-content: center; border: 0; cursor: pointer; padding: 13px 18px; font-size: 15px; }
.auth-switch { text-align: center; color: var(--text-3); font-size: 14px; margin-top: 22px; }
.auth-switch a { color: var(--accent); font-weight: 600; }
.auth-alert { border-radius: var(--r-sm); padding: 12px 14px; margin-top: 18px; font-size: 13.5px; line-height: 1.5; }
.auth-alert.error { color: #ffb3bd; border: 1px solid rgba(255,92,114,.3); background: var(--red-dim); }
.auth-alert.success { color: var(--green); border: 1px solid rgba(78,255,179,.25); background: rgba(78,255,179,.07); }
.investor-type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; }
.investor-type-option {
  display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 16px 18px;
  border: 1px solid var(--border); border-radius: var(--r-md, 14px); background: var(--surface-2);
  color: var(--text); font: inherit; cursor: pointer; transition: border-color .16s, background .16s;
}
.investor-type-option:hover { border-color: var(--border-strong); background: var(--surface-3, var(--surface-2)); }
.investor-type-option strong { font-size: 15px; }
.investor-type-option span { font-size: 13px; color: var(--text-3); line-height: 1.5; }
@media (max-width: 560px) { .investor-type-grid { grid-template-columns: 1fr; } }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0; color: var(--text-3); font-size: 12.5px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border-hair); }
.google-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2);
  color: var(--text); padding: 12px 16px; font: inherit; font-size: 14.5px; font-weight: 600;
  cursor: pointer; text-decoration: none; transition: border-color .16s, background .16s;
}
.google-btn:hover { border-color: var(--border-strong); background: var(--surface-3, var(--surface-2)); }
.google-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.account-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 28px 0; }

/* Dashboard: an institutional blue/glass register scoped to .dashboard-scope
   only -- the rest of the site (nav, homepage, everything else) keeps its
   own accent untouched. Overriding --accent/--green/--amber/--red here
   means every component that already reads those variables (trade-badge,
   flow-badge, monitor-rating...) picks up the muted dashboard palette
   automatically, with zero duplicated component CSS. Cards use the site's
   existing glass tokens (--glass-fill/--rim, defined sitewide) rather than
   the flat, glow-free treatment tried earlier -- direction confirmed:
   keep the glass material, just recolor it. */
.dashboard-scope {
  --accent: #4C86F0; --accent-dim: rgba(76,134,240,.12);
  --green: #4E9E72; --green-dim: rgba(78,158,114,.14);
  --amber: #C99A4A; --amber-dim: rgba(201,154,74,.14);
  --red: #C0615F; --red-dim: rgba(192,97,95,.14);
  --border-strong: rgba(76,134,240,.35);
}
:root[data-theme="light"] .dashboard-scope {
  --accent: #2E5FCC; --accent-dim: rgba(46,95,204,.08);
  --green: #2F7D53; --green-dim: rgba(47,125,83,.10);
  --amber: #9A6B1E; --amber-dim: rgba(154,107,30,.10);
  --red: #A93F3D; --red-dim: rgba(169,63,61,.10);
  --border-strong: rgba(46,95,204,.35);
}
/* ---- Market Overview: research-terminal header, KPI grid, role bars,
   cluster panel. Restrained by design -- no glow, no gradient fills, one
   accent only on interactive affordances. Numbers use tabular figures so
   columns line up the way a research tool should. ---- */
.mo-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 26px 0 0; }
.mo-head h1 { font-size: clamp(22px, 3vw, 27px); font-weight: 700; margin: 6px 0 5px; letter-spacing: -.01em; }
.mo-head p { color: var(--text-3); font-size: 13.5px; margin: 0; max-width: 620px; line-height: 1.55; }
.mo-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mo-range { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.mo-range a {
  padding: 7px 13px; font-size: 12.5px; font-weight: 600; color: var(--text-3);
  text-decoration: none; border-right: 1px solid var(--border); transition: background .15s, color .15s;
}
.mo-range a:last-child { border-right: 0; }
.mo-range a:hover { color: var(--text); background: var(--surface-2); }
.mo-range a.on { color: var(--text); background: var(--neutral-dim); }
.mo-freshness { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-3); font-family: 'JetBrains Mono', monospace; }
.mo-freshness .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--buy); flex-shrink: 0; }

.mo-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin: 22px 0 26px; }
@media (max-width: 1040px) { .mo-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .mo-kpis { grid-template-columns: repeat(2, 1fr); } }
.mo-kpi {
  background: var(--surface); background-image: var(--glass-fill);
  backdrop-filter: var(--glass-thin); -webkit-backdrop-filter: var(--glass-thin);
  border: 1px solid var(--border); border-radius: var(--r-sm, 12px); padding: 15px 17px;
  box-shadow: var(--rim), var(--lift-1);
  opacity: 0; transform: translateY(12px);
  transition: opacity .45s var(--ease), transform .45s var(--ease), border-color .18s;
}
.mo-kpi.revealed { opacity: 1; transform: none; }
.mo-kpi:hover { border-color: var(--border-strong); }
.mo-kpi-label { display: flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); margin-bottom: 7px; }
.mo-kpi-info {
  width: 13px; height: 13px; border-radius: 50%; border: 1px solid var(--border-strong);
  color: var(--text-3); font-size: 9px; line-height: 11px; text-align: center; cursor: help; flex-shrink: 0;
}
.mo-kpi-value { font-family: 'JetBrains Mono', monospace; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.mo-kpi-value.buy { color: var(--buy); }
.mo-kpi-value.sell { color: var(--sell); }
.mo-kpi-foot { display: flex; align-items: baseline; gap: 7px; margin-top: 5px; flex-wrap: wrap; }
/* Deliberately NOT green-up / red-down. A period-over-period change in
   filing count or dollar volume has a direction, not a quality: painting
   "purchase value down" red tells the reader it is bad news, which is
   exactly the signal-service framing this redesign removes. Both
   directions read in the same neutral tone; the arrow carries the sign. */
.mo-kpi-delta { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 700; color: var(--text-2); }
.mo-kpi-delta .arrow { color: var(--text-3); font-size: 9px; margin-right: 1px; }
.mo-kpi-sub { font-size: 11px; color: var(--text-3); }

.mo-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 16px; margin-bottom: 26px; align-items: start; }
@media (max-width: 900px) { .mo-grid { grid-template-columns: 1fr; } }
.mo-panel {
  background: var(--surface); background-image: var(--glass-fill);
  backdrop-filter: var(--glass-thin); -webkit-backdrop-filter: var(--glass-thin);
  border: 1px solid var(--border); border-radius: var(--r-sm, 12px); padding: 18px 20px;
  box-shadow: var(--rim), var(--lift-1);
}
.mo-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.mo-panel h3 { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); margin: 0; }
.mo-panel-note { font-size: 11.5px; color: var(--text-3); margin: 0 0 15px; line-height: 1.5; }

.role-row { display: grid; grid-template-columns: 92px 1fr 42px; align-items: center; gap: 11px; margin-bottom: 9px; font-size: 12.5px; }
.role-row:last-child { margin-bottom: 0; }
.role-name { color: var(--text-2); font-weight: 600; }
.role-track { display: flex; height: 9px; border-radius: 5px; background: var(--score-track); overflow: hidden; }
.role-fill { height: 100%; width: 0; transition: width .7s var(--ease); }
.role-fill.buy { background: var(--buy); }
.role-fill.sell { background: var(--sell); }
.role-count { text-align: right; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }

.cluster-row {
  display: block; padding: 12px 0; border-bottom: 1px solid var(--border-hair);
  text-decoration: none; color: inherit; transition: opacity .15s;
}
.cluster-row:last-child { border-bottom: 0; }
.cluster-row:hover { opacity: .72; }
.cluster-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cluster-ticker { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 700; }
.cluster-value { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; font-weight: 600; color: var(--buy); font-variant-numeric: tabular-nums; }
.cluster-meta { font-size: 11.5px; color: var(--text-3); margin-top: 3px; line-height: 1.5; }
.cluster-empty { font-size: 12.5px; color: var(--text-3); line-height: 1.6; padding: 6px 0; }

/* ---- analysis mode ----
   One question per panel, each carrying its own sample size. Reuses the
   dashboard's bar and cluster components rather than introducing a second
   visual language for the same shapes. */
/* ---- company summary header ---- */
.cs-summary {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px;
  background: var(--border); border: 1px solid var(--border);
  border-radius: var(--r-md, 14px); overflow: hidden; margin: 0 0 10px;
}
.cs-item { display: flex; flex-direction: column; gap: 5px; padding: 14px 16px; background: var(--surface-solid); }
.cs-l { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); }
.cs-v { font-family: 'JetBrains Mono', monospace; font-size: 16px; font-weight: 700; }
.cs-v.buy { color: var(--buy); }
.cs-note { font-size: 11.5px; color: var(--text-3); line-height: 1.6; margin: 0 0 20px; max-width: 66ch; }

/* ---- congress ---- */
.cg-trades-head { margin: 30px 0 14px; }
.cg-trades-head h3 { font-size: 15px; font-weight: 700; margin: 0 0 4px; }
.cg-trades-head p { font-size: 12.5px; color: var(--text-3); margin: 0; }

.cg-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 0 0 22px; }
.cg-kpi { display: flex; flex-direction: column; gap: 5px; padding: 16px 18px;
  border: 1px solid var(--border); border-radius: var(--r-md, 14px); background: var(--surface-solid); }
.cg-kpi-l { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); }
.cg-kpi-v { font-family: 'JetBrains Mono', monospace; font-size: 26px; font-weight: 700; line-height: 1.1; }
/* Party colour is decoration; every card also carries a D/R letter badge, so
   nothing here depends on telling red from blue. */
.cg-kpi-v.dem { color: var(--neutral); }
.cg-kpi-v.rep { color: var(--sell); }
.cg-kpi-s { font-size: 11.5px; color: var(--text-3); }

.cg-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; }
.cg-chips { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); }
.cg-chip { font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-3); background: none;
  border: 0; border-radius: 999px; padding: 7px 14px; min-height: 36px; cursor: pointer; }
.cg-chip:hover { color: var(--text-2); }
.cg-chip.on { background: var(--surface-solid); color: var(--text); box-shadow: var(--rim); }
.cg-sort, .cg-search { font: inherit; font-size: 13px; color: var(--text); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; min-height: 40px; outline: none; }
.cg-search { flex: 1 1 200px; min-width: 0; }
.cg-sort:focus-visible, .cg-search:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cg-count { font-size: 12px; color: var(--text-3); font-family: 'JetBrains Mono', monospace; }

.cg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.cg-card { display: flex; gap: 13px; padding: 15px 17px; border: 1px solid var(--border);
  border-radius: var(--r-md, 14px); background: var(--surface-solid); }
.cg-card[hidden] { display: none; }
.cg-avatar { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 700;
  color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); }
.cg-avatar.dem { color: var(--neutral); border-color: var(--neutral); }
.cg-avatar.rep { color: var(--sell); border-color: var(--sell); }
.cg-body { min-width: 0; }
.cg-name { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; }
.cg-meta { font-size: 11.5px; color: var(--text-3); margin-top: 3px; line-height: 1.5; }
.cg-flow { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 7px; font-size: 11.5px; font-family: 'JetBrains Mono', monospace; }
.cg-flow-buy { color: var(--buy); }
.cg-flow-sell { color: var(--sell); }
.cg-flow-tick { color: var(--text-3); }
@media (max-width: 620px) { .cg-grid { grid-template-columns: 1fr; } .cg-search { flex-basis: 100%; } }

.an-panel {
  border: 1px solid var(--border); border-radius: var(--r-md, 14px);
  background: var(--surface); background-image: var(--glass-fill);
  padding: 20px 22px; margin: 0 0 18px; box-shadow: var(--rim);
}
.an-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.an-head h2 { font-size: 15.5px; font-weight: 700; margin: 0; }
.an-head span { font-size: 11.5px; color: var(--text-3); font-family: 'JetBrains Mono', monospace; }
.an-insight { font-size: 12.5px; color: var(--text-3); line-height: 1.6; margin: 0 0 16px; max-width: 70ch; }
.an-insight strong { color: var(--text-2); }
.an-insight a { color: var(--accent); text-decoration: none; font-weight: 600; }
.an-insight a:hover { text-decoration: underline; }
.an-svg { width: 100%; height: auto; display: block; }
@media (max-width: 760px) { .an-svg { height: 170px; } }
.an-axis { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; color: var(--text-3); margin-top: 8px; font-family: 'JetBrains Mono', monospace; }
.an-bar-label { width: 118px; flex-shrink: 0; font-size: 12px; color: var(--text-2); }
.an-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 860px) { .an-grid { grid-template-columns: 1fr; } }

.mo-gaps { border: 1px solid var(--border); border-radius: var(--r-sm, 12px); padding: 16px 18px; margin-bottom: 30px; background: var(--surface-2); }
.mo-gaps h3 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); margin: 0 0 6px; }
.mo-gaps > p { font-size: 12px; color: var(--text-3); margin: 0 0 12px; line-height: 1.55; }
.mo-gaps dl { margin: 0; display: grid; gap: 9px; }
.mo-gaps dt { font-size: 12px; font-weight: 700; color: var(--text-2); }
.mo-gaps dd { margin: 2px 0 0; font-size: 11.5px; color: var(--text-3); line-height: 1.55; }

/* ---- Research Cases ---- */
.rc-lede { font-size: 13px; color: var(--text-3); margin: 0 0 20px; }
.rc-case {
  background: var(--surface); background-image: var(--glass-fill);
  backdrop-filter: var(--glass-thin); -webkit-backdrop-filter: var(--glass-thin);
  border: 1px solid var(--border); border-radius: var(--r-md, 14px); padding: 22px 24px;
  box-shadow: var(--rim), var(--lift-1); margin-bottom: 18px;
}
.rc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.rc-ticker { font-family: 'JetBrains Mono', monospace; font-size: 20px; font-weight: 700; color: var(--text); text-decoration: none; }
.rc-ticker:hover { text-decoration: underline; }
.rc-co { display: block; font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.rc-badges { display: flex; gap: 8px; align-items: center; }
.rc-summary { font-size: 14.5px; color: var(--text); line-height: 1.6; margin: 0 0 18px; }
.rc-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 22px; padding: 16px 0; border-top: 1px solid var(--border-hair); border-bottom: 1px solid var(--border-hair); }
@media (max-width: 720px) { .rc-grid { grid-template-columns: 1fr; gap: 18px; } }
.rc-grid h4, .rc-block h4 { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); margin: 0 0 11px; }
.rc-grid h4 em { font-style: normal; font-family: 'JetBrains Mono', monospace; color: var(--neutral); margin-left: 5px; }
.rc-meta { margin: 0; display: grid; gap: 10px; }
.rc-meta dt { font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.rc-meta dd { margin: 3px 0 0; font-family: 'JetBrains Mono', monospace; font-size: 13.5px; font-weight: 600; }
.rc-corr { margin-top: 14px; padding: 11px 13px; border-radius: 8px; background: var(--buy-dim); border: 1px solid var(--border); }
.rc-verify {
  display: flex; flex-direction: column; gap: 6px; margin-top: 12px; padding: 11px 13px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2);
  font-size: 12.5px; color: var(--text-3); line-height: 1.6;
}
.rc-verify b { color: var(--text-2); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; }
.rc-verify a { color: var(--accent); text-decoration: none; font-weight: 600; }
.rc-verify a:hover { text-decoration: underline; }
.rc-status {
  display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em; cursor: help;
  border: 1px solid var(--border); color: var(--text-3); background: var(--surface-2);
}
/* Status carries a word, never colour alone -- the label is the information. */
.rc-status.active { color: var(--buy); border-color: var(--buy); }
.rc-status.expired { color: var(--text-3); }
.rc-status.published { color: var(--neutral); border-color: var(--neutral); }
.rc-corr b { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--buy); margin-bottom: 5px; }
.rc-corr span { font-size: 12.5px; color: var(--text-2); line-height: 1.55; }
.rc-block { padding-top: 16px; }
.rc-block p { font-size: 13.5px; color: var(--text-2); line-height: 1.65; margin: 0; }
.rc-block.risk p { padding: 11px 13px; border-radius: 8px; background: var(--amber-dim); border: 1px solid var(--border); }
.rc-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border-hair); font-size: 12.5px; }
.rc-foot a { color: var(--neutral); text-decoration: none; font-weight: 600; }
.rc-foot a:hover { text-decoration: underline; }
.rc-foot span { color: var(--text-3); font-family: 'JetBrains Mono', monospace; }
.rc-empty { border: 1px solid var(--border); border-radius: var(--r-md, 14px); padding: 40px 30px; text-align: center; background: var(--surface-2); }
.rc-empty h2 { font-size: 20px; margin: 0 0 12px; }
.rc-empty p { font-size: 14px; color: var(--text-2); line-height: 1.65; margin: 0 auto 10px; max-width: 520px; }
.rc-empty a { color: var(--neutral); font-weight: 600; }

/* ---- Show/hide password ----
   The wrapper and button are injected by PASSWORD_TOGGLE_JS rather than being
   written into each of the nine password fields by hand: one implementation
   covers every field, including any added later, and no template has to know
   about it. Everything here is inert until that script runs, so a
   no-JavaScript client simply gets an ordinary password box. */
.pw-wrap { position: relative; display: block; }
.pw-wrap > input { width: 100%; padding-right: 44px; }
.pw-toggle {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 7px; cursor: pointer; color: var(--text-3);
  transition: color .15s, background .15s;
}
.pw-toggle:hover { color: var(--text-2); background: var(--surface-2); }
.pw-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pw-toggle svg { width: 17px; height: 17px; display: block; pointer-events: none; }
:root[dir="rtl"] .pw-wrap > input { padding-right: 14px; padding-left: 44px; }
:root[dir="rtl"] .pw-toggle { right: auto; left: 6px; }

/* ---- Methodology page ---- */
.meth-block { margin-bottom: 38px; }
.meth-block h2 { font-size: 19px; font-weight: 700; margin: 0 0 12px; letter-spacing: -.01em; }
.meth-block p { color: var(--text-2); font-size: 14.5px; line-height: 1.68; margin: 0 0 13px; }
.meth-list { margin: 16px 0 6px; display: grid; gap: 16px; }
.meth-list dt { font-size: 14px; font-weight: 700; color: var(--text); display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.meth-list dt code {
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 500; color: var(--neutral);
  background: var(--neutral-dim); border: 1px solid var(--border); border-radius: 5px; padding: 2px 7px;
}
.meth-list dd { margin: 6px 0 0; font-size: 13.5px; color: var(--text-2); line-height: 1.65; }
.meth-meta { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-3); margin-top: 14px; }
.meth-callout {
  border: 1px solid var(--border); border-left: 3px solid var(--amber);
  background: var(--surface-2); border-radius: 8px; padding: 14px 16px; margin: 16px 0;
  font-size: 13.5px; color: var(--text-2); line-height: 1.65;
}
.meth-callout strong { color: var(--text); }

/* ---- Company Analysis diagrams ---- */
.ca-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0 8px; align-items: start; }
@media (max-width: 860px) { .ca-grid { grid-template-columns: 1fr; } }
.ca-panel {
  background: var(--surface); background-image: var(--glass-fill);
  backdrop-filter: var(--glass-thin); -webkit-backdrop-filter: var(--glass-thin);
  border: 1px solid var(--border); border-radius: var(--r-sm, 12px); padding: 18px 20px;
  box-shadow: var(--rim), var(--lift-1);
}
.ca-panel.full { grid-column: 1 / -1; }
.ca-panel h3 { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); margin: 0 0 5px; }
.ca-note { font-size: 11.5px; color: var(--text-3); margin: 0 0 14px; line-height: 1.55; }
.ca-svg { width: 100%; height: auto; display: block; }
.ca-dot { transition: opacity .5s var(--ease); }
.ca-axis-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-3); font-family: 'JetBrains Mono', monospace; margin-top: 6px; }
.ca-legend { display: flex; gap: 16px; margin-bottom: 12px; font-size: 12px; color: var(--text-2); flex-wrap: wrap; }
.ca-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }

.ca-band { margin-top: 4px; }
.ca-band-track { position: relative; height: 30px; border-radius: 7px; background: var(--buy-dim); border: 1px solid var(--border); }
.ca-band-mark { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--buy); border-radius: 2px; }
.ca-band-scale { display: flex; justify-content: space-between; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--text-3); margin-top: 7px; }
.ca-band-stat { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; }
.ca-band-stat b { font-family: 'JetBrains Mono', monospace; font-size: 22px; font-weight: 700; color: var(--buy); }
.ca-band-stat span { font-size: 11.5px; color: var(--text-3); }

.ca-matrix-row { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 12px; margin-bottom: 9px; }
.ca-matrix-row:last-child { margin-bottom: 0; }
.ca-matrix-who { min-width: 0; }
.ca-matrix-who b { display: block; font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-matrix-who span { display: block; font-size: 10.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-matrix-cells { display: flex; gap: 4px; flex-wrap: wrap; }
.ca-cell { width: 20px; height: 20px; border-radius: 4px; flex-shrink: 0; }
.ca-cell.buy { background: var(--buy); }
.ca-cell.sell { background: var(--sell); }

/* ---- Transaction detail drawer ---- */
.tdx-scrim {
  position: fixed; inset: 0; background: rgba(4,8,14,.55); z-index: 90;
  opacity: 0; pointer-events: none; transition: opacity .28s var(--ease);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.tdx-scrim.open { opacity: 1; pointer-events: auto; }
.tdx-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(430px, 92vw); z-index: 91;
  background: var(--surface-solid); border-left: 1px solid var(--border);
  box-shadow: var(--lift-3); overflow-y: auto; -webkit-overflow-scrolling: touch;
  transform: translateX(100%); transition: transform .32s var(--ease);
}
.tdx-drawer.open { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .tdx-drawer, .tdx-scrim { transition: none; }
}
.tdx-close {
  position: absolute; top: 13px; right: 13px; width: 30px; height: 30px; z-index: 2;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text-2); font: inherit; font-size: 17px; line-height: 1;
}
.tdx-close:hover { color: var(--text); border-color: var(--border-strong); }
.tdx-body { padding: 22px; }
.tdx-loading { padding: 40px 22px; color: var(--text-3); font-size: 13.5px; }
.tdx-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin: 0 34px 18px 0; }
.tdx-ticker { font-family: 'JetBrains Mono', monospace; font-size: 21px; font-weight: 700; }
.tdx-co { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.tdx-open { font-size: 12.5px; color: var(--neutral); text-decoration: none; white-space: nowrap; font-weight: 600; }
.tdx-open:hover { text-decoration: underline; }
.tdx-section { padding: 16px 0; border-top: 1px solid var(--border-hair); }
.tdx-section:first-of-type { border-top: 0; padding-top: 0; }
.tdx-section h4 { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); margin: 0 0 12px; }
.tdx-tx-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.tdx-tx-val { font-family: 'JetBrains Mono', monospace; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tdx-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin: 0; }
.tdx-kv dt { font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.tdx-kv dd { margin: 3px 0 0; font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600; }
.tdx-person b { display: block; font-size: 14.5px; }
.tdx-person span { display: block; font-size: 12px; color: var(--text-3); margin-top: 2px; }
.tdx-stats { display: flex; gap: 26px; margin-top: 14px; }
.tdx-stats b { display: block; font-family: 'JetBrains Mono', monospace; font-size: 20px; font-weight: 700; }
.tdx-stats b.buy { color: var(--buy); }
.tdx-stats b.sell { color: var(--sell); }
.tdx-stats span { font-size: 11px; color: var(--text-3); }
.tdx-note { font-size: 11px; color: var(--text-3); line-height: 1.55; margin: 12px 0 0; }
.tdx-source {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-hair);
}
.tdx-source-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); }
.tdx-accession {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-2);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 6px; padding: 3px 7px; user-select: all;
}
.tdx-source a { font-size: 12px; font-weight: 600; color: var(--accent); text-decoration: none; }
.tdx-source a:hover { text-decoration: underline; }
.tdx-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border-hair); font-size: 12.5px; }
.tdx-row:last-child { border-bottom: 0; }
.tdx-row-date { font-family: 'JetBrains Mono', monospace; color: var(--text-3); }
.tdx-row-who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdx-row-who em { display: block; font-style: normal; font-size: 10.5px; color: var(--text-3); }
.tdx-row-val { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-weight: 600; font-variant-numeric: tabular-nums; }
.tdx-filing { font-size: 13px; color: var(--neutral); text-decoration: none; font-weight: 600; }
.tdx-filing:hover { text-decoration: underline; }
table.scan tbody tr.row-clickable { cursor: pointer; }
table.scan tbody tr.row-active { background: var(--neutral-dim); }

/* ---- Activity Scanner ---- */
/* Explicit tracks, not repeat(auto-fit,...): auto-fit resolves to a single
   column when it sits beside sized tracks in the same template, which
   stacked the whole toolbar vertically. */
/* Eight controls now that the screener's cluster-size and rating filters
   moved in, which is more than fits one readable row. Four fixed columns
   wrapping to three rows beats eight slivers on one line -- and explicit
   tracks, not auto-fit, because auto-fit beside sized tracks resolves to a
   single column. */
.scan-bar {
  display: grid; gap: 9px; align-items: center; margin-bottom: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.scan-bar > input[type="search"] { grid-column: span 2; }
.scan-bar .scan-actions { grid-column: 4 / -1; justify-self: end; }
@media (max-width: 860px) { .scan-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scan-bar .scan-actions { grid-column: 1 / -1; justify-self: stretch; } }
@media (max-width: 480px) { .scan-bar { grid-template-columns: 1fr; }
  .scan-bar > input[type="search"] { grid-column: span 1; } }
.scan-bar input, .scan-bar select {
  width: 100%; font: inherit; font-size: 13px; padding: 9px 11px; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.scan-bar input:focus, .scan-bar select:focus { border-color: var(--neutral); box-shadow: 0 0 0 3px var(--neutral-dim); }
.scan-bar input::placeholder { color: var(--text-3); }
.scan-actions { display: flex; gap: 8px; }
.scan-btn {
  font: inherit; font-size: 13px; font-weight: 600; padding: 9px 15px; cursor: pointer; white-space: nowrap;
  border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  text-decoration: none; display: inline-flex; align-items: center; transition: border-color .15s, background .15s;
}
.scan-btn:hover { border-color: var(--border-strong); }
.scan-btn.primary { background: var(--neutral-dim); border-color: var(--neutral); }
.scan-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; font-size: 12.5px; color: var(--text-3); }
.scan-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.scan-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600;
  padding: 4px 9px; border-radius: 999px; background: var(--neutral-dim);
  border: 1px solid var(--border); color: var(--text-2); text-decoration: none;
}
.scan-chip:hover { border-color: var(--border-strong); }
.scan-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--r-sm, 12px); background: var(--surface-solid); }
table.scan { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 940px; }
table.scan th {
  text-align: left; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-3); padding: 11px 13px; border-bottom: 1px solid var(--border); white-space: nowrap;
  position: sticky; top: 0; background: var(--surface-solid); z-index: 1;
}
table.scan th a { color: inherit; text-decoration: none; }
table.scan th a:hover { color: var(--text); }
table.scan td { padding: 11px 13px; border-bottom: 1px solid var(--border-hair); vertical-align: top; }
table.scan tbody tr:last-child td { border-bottom: 0; }
table.scan tbody tr:hover { background: var(--surface-2); }
table.scan .num { text-align: right; font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }
.scan-ticker { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 13.5px; color: var(--text); text-decoration: none; }
.scan-ticker:hover { text-decoration: underline; }
.scan-co { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 2px; max-width: 210px; }
.scan-insider { font-weight: 600; }
.scan-role { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.scan-side { display: inline-flex; padding: 3px 8px; border-radius: 5px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.scan-side.buy { color: var(--buy); background: var(--buy-dim); }
.scan-side.sell { color: var(--sell); background: var(--sell-dim); }
.scan-filing { font-size: 11.5px; color: var(--text-3); text-decoration: none; white-space: nowrap; }
.scan-filing:hover { color: var(--neutral); text-decoration: underline; }
.scan-empty { padding: 40px 20px; text-align: center; color: var(--text-3); font-size: 13.5px; line-height: 1.6; }
.scan-pager { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 16px 0 4px; font-size: 13px; }
.scan-pager a, .scan-pager span {
  padding: 7px 13px; border-radius: 8px; border: 1px solid var(--border);
  color: var(--text-2); text-decoration: none; font-weight: 600;
}
.scan-pager a:hover { border-color: var(--border-strong); color: var(--text); }
.scan-pager .cur { background: var(--neutral-dim); border-color: var(--neutral); color: var(--text); }
.scan-pager .off { opacity: .38; pointer-events: none; }
@media (max-width: 760px) { .scan-bar { grid-template-columns: 1fr 1fr; } .scan-bar .scan-actions { grid-column: 1 / -1; } }

.dashboard-head { padding: 28px 0 4px; }
.dashboard-head .eyebrow { color: var(--text-3); }
.dashboard-head h1 { font-size: clamp(24px, 3.4vw, 30px); font-weight: 700; margin: 6px 0 4px; }
.dashboard-head p { color: var(--text-3); font-size: 14px; margin: 0; }

/* ---- KPI strip: real figures only (see the dashboard() route --
   backtest summary + live counts, nothing computed just for display). ---- */
.kpi-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin: 20px 0 28px; }
.kpi-tile {
  background: var(--surface); background-image: var(--glass-fill);
  backdrop-filter: var(--glass-thin); -webkit-backdrop-filter: var(--glass-thin);
  border: 1px solid var(--border); border-radius: var(--r-sm, 12px); padding: 14px 16px;
  box-shadow: var(--rim), var(--lift-1);
}
.kpi-tile-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); margin-bottom: 6px; }
.kpi-tile-value { font-family: 'JetBrains Mono', monospace; font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi-tile-value.pos { color: var(--green); }
.kpi-tile-value.neg { color: var(--red); }
.kpi-tile-sub { font-size: 11px; color: var(--text-3); margin-top: 3px; }
@media (max-width: 980px) { .kpi-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .kpi-strip { grid-template-columns: repeat(2, 1fr); } }

/* ---- factor checklist, shared with the research-case detail page ---- */
.factor-list { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.factor-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.factor-rule { font-size: 11.5px; color: var(--text-3); }
.factor-value { font-size: 11.5px; color: var(--text-2); font-family: 'JetBrains Mono', monospace; }
.factor-note { font-size: 11.5px; color: var(--text-3); line-height: 1.6; margin: 0 0 16px; }
.factor-note strong { color: var(--text-2); }
/* Evidence level is a count of observations, never a score -- the wording and
   the neutral score ramp both keep it from reading as a buy strength. */
.ev-pill {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; margin: 0 0 12px;
  border: 1px solid var(--border); background: var(--surface-2);
}
.ev-pill.strong { color: var(--score-high); border-color: var(--score-high); }
.ev-pill.moderate { color: var(--score-mid); border-color: var(--score-mid); }
.ev-pill.limited { color: var(--text-3); }
.factor-row { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text-2); }
.factor-row.no-match { color: var(--text-3); }
.factor-icon {
  width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800;
}
.factor-icon.yes { background: var(--green-dim); color: var(--green); }
.factor-icon.no { background: var(--surface-2); color: var(--text-3); }
/* ---- model provenance, on /how-it-works ---- */
.meth-facts { display: grid; gap: 9px; margin: 0 0 16px; }
.meth-fact { display: flex; justify-content: space-between; gap: 14px; font-size: 12.5px; }
.meth-fact .l { color: var(--text-3); }
.meth-fact .v { font-family: 'JetBrains Mono', monospace; font-weight: 600; text-align: right; }

/* ---- dashboard section rhythm ----
   The dashboard is read top-to-bottom as four questions: what happened
   market-wide, who did it, what cleared the score, what am I tracking.
   One head style marks each, so the page has an outline instead of a
   stack of unlabelled cards. */
.mo-head-link { margin: 10px 0 0; font-size: 12.5px; }
.mo-head-link a { color: var(--accent); font-weight: 600; text-decoration: none; }
.mo-head-link a:hover { text-decoration: underline; }

.mo-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin: 34px 0 14px; flex-wrap: wrap; }
.mo-sec-head h2 { font-size: 15px; font-weight: 700; margin: 0; }
.mo-sec-head span { font-size: 12px; color: var(--text-3); }

/* ---- open research cases ----
   Replaces the three panels that each re-described the same small basket
   of scored filings. When the basket is empty -- the normal state, since
   most insider purchases never qualify -- this collapses to a single
   honest empty state rather than four separate holes. */
.research-row { display: grid; grid-template-columns: 7fr 5fr; gap: 16px; align-items: start; }
.rc-row {
  display: flex; align-items: center; gap: 11px; padding: 11px 0;
  border-bottom: 1px solid var(--border-hair); color: inherit; text-decoration: none;
  transition: opacity .18s var(--ease);
}
.rc-row:hover { opacity: .72; }
.rc-main { flex: 1; min-width: 0; }
.rc-ticker { display: block; font-family: 'JetBrains Mono', monospace; font-size: 13.5px; font-weight: 700; }
.rc-meta { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 2px; line-height: 1.45;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-all { display: inline-block; margin-top: 14px; font-size: 12.5px; font-weight: 600; color: var(--accent); text-decoration: none; }
.rc-all:hover { text-decoration: underline; }
.rc-rsi { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-hair); }
.rc-rsi-value { font-family: 'JetBrains Mono', monospace; font-size: 26px; font-weight: 700; }
.rc-rsi-sub { font-size: 11.5px; color: var(--text-3); margin-top: 3px; line-height: 1.5; }
.research-empty p { font-size: 13px; color: var(--text-2); line-height: 1.65; margin: 0 0 12px; }
.research-empty p:last-child { margin-bottom: 0; }
.rc-empty-links { display: flex; gap: 20px; flex-wrap: wrap; }
.rc-empty-links a { font-size: 12.5px; font-weight: 600; color: var(--accent); text-decoration: none; }
.rc-empty-links a:hover { text-decoration: underline; }
@media (max-width: 860px) { .research-row { grid-template-columns: 1fr; } }

.intel-notes { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; }
.intel-notes li { display: flex; gap: 8px; font-size: 13px; color: var(--text-2); line-height: 1.5; }
.intel-notes li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); margin-top: 7px; flex-shrink: 0; }

/* ---- market data analysis: real backtest series + real open-basket
   composition, server-rendered as plain SVG so it needs no charting JS ---- */
.market-data-head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 14px; }
.market-data-head h2 { font-size: 15px; font-weight: 700; margin: 0; }
.market-data-head span { font-size: 12px; color: var(--text-3); }
.activity-chart-card {
  background: var(--surface); background-image: var(--glass-fill);
  backdrop-filter: var(--glass-regular); -webkit-backdrop-filter: var(--glass-regular);
  border: 1px solid var(--border); border-radius: var(--r-md, 14px); padding: 22px 24px;
  box-shadow: var(--rim), var(--lift-2); margin-bottom: 16px;
}
.activity-chart-legend { display: flex; align-items: center; gap: 20px; margin-bottom: 14px; flex-wrap: wrap; }
.activity-chart-legend .lg { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-2); }
.activity-chart-legend .sw { width: 10px; height: 10px; border-radius: 3px; }
.activity-chart-legend .val { font-family: 'JetBrains Mono', monospace; font-weight: 700; }
.activity-chart-svg { width: 100%; height: auto; display: block; }
/* The chart is preserveAspectRatio="none", so height tracks width and a
   phone squashes a 14-bar series into ~80px of slivers. Pin a readable
   height on small screens -- the bars simply stretch to fill it. */
@media (max-width: 760px) { .activity-chart-svg { height: 200px; } }
.activity-chart-dates { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-3); margin-top: 8px; font-family: 'JetBrains Mono', monospace; }
/* Bars render at their real final geometry server-side; a tiny observer
   collapses them to 0 on load and releases them once scrolled into view, so
   the transition below animates them growing in without any charting JS. */
.activity-bar {
  transition: height .75s cubic-bezier(.22,.9,.32,1), y .75s cubic-bezier(.22,.9,.32,1);
}
/* ---- market pulse: a strip of real-number stat tiles, premium Apple-style
   hover + a staggered fade/lift-in reveal on scroll (same --ease timing the
   rest of the site already uses for card hovers). ---- */
.pulse-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.pulse-tile {
  background: var(--surface); background-image: var(--glass-fill);
  backdrop-filter: var(--glass-thin); -webkit-backdrop-filter: var(--glass-thin);
  border: 1px solid var(--border); border-radius: var(--r-sm, 12px); padding: 16px 18px;
  box-shadow: var(--rim), var(--lift-1);
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), border-color .2s, box-shadow .2s;
}
.pulse-tile.revealed { opacity: 1; transform: translateY(0); }
.pulse-tile:hover { border-color: var(--border-strong); transform: translateY(-4px); box-shadow: var(--rim), var(--lift-2), var(--glow-accent); }
.pulse-tile-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); margin-bottom: 6px; }
.pulse-tile-value { font-family: 'JetBrains Mono', monospace; font-size: 19px; font-weight: 700; }
.pulse-tile-sub { font-size: 11px; color: var(--text-3); margin-top: 3px; }
.pulse-mix-track { height: 8px; border-radius: 4px; background: var(--red-dim); overflow: hidden; margin: 4px 0 2px; }
.pulse-mix-fill { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--green); transition: width .8s var(--ease); }
.rating-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 12.5px; }
.rating-bar-row:last-child { margin-bottom: 0; }
.rating-bar-label { width: 28px; flex-shrink: 0; font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--text-2); }
.rating-bar-track { flex: 1; height: 8px; border-radius: 4px; background: var(--score-track); overflow: hidden; }
/* score ramp, not green: a high rating is an unusualness score, never a buy */
.rating-bar-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--score-low), var(--score-high)); }
.rating-bar-count { width: 18px; text-align: right; flex-shrink: 0; font-family: 'JetBrains Mono', monospace; color: var(--text-3); }

.dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 40px; align-items: start; }
.dashboard-card {
  display: flex; flex-direction: column;
  background: var(--surface); background-image: var(--glass-fill);
  backdrop-filter: var(--glass-thin); -webkit-backdrop-filter: var(--glass-thin);
  border: 1px solid var(--border); border-radius: var(--r-sm, 12px); padding: 18px 20px;
  box-shadow: var(--rim), var(--lift-1);
}
.dashboard-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dashboard-card-label {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-3);
}
.dashboard-card-link { font-size: 12.5px; color: var(--text-3); text-decoration: none; }
.dashboard-card-link:hover { color: var(--text-2); }
.dashboard-watchlist { display: flex; flex-direction: column; margin-top: 12px; }
.dashboard-rating-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.dashboard-rating-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-2); flex-wrap: wrap; }
.dashboard-rating-n { color: var(--text-3); font-size: 12px; margin-left: auto; }
.dashboard-card .empty { padding: 18px 4px; font-size: 13px; }
@media (max-width: 780px) { .dashboard-grid { grid-template-columns: 1fr; } }
/* Follow controls and the account self-service blocks. Colours are taken from
   existing tokens rather than new literals, so these inherit the contrast
   floors solved in #62/#68 instead of introducing values nobody has measured. */
.follow-stats { display: flex; gap: 16px; margin-top: 8px; font-size: 13.5px; color: var(--text-2); }
.follow-stats b { color: var(--text); font-weight: 700; }
.follow-form { margin-left: auto; align-self: center; }
.follow-btn {
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  padding: 9px 20px; border-radius: 999px;
  background: var(--accent); color: var(--void); border: 1px solid var(--accent);
  transition: background .15s, color .15s;
}
.follow-btn.is-following { background: none; color: var(--text-2); border-color: var(--border); }
.follow-btn.is-following:hover { color: var(--red); border-color: var(--red); }
.byline-followers { font-weight: 400; color: var(--text-3); font-size: 12.5px; margin-left: 6px; }
/* Direct messages. Colours are existing tokens only, so these inherit the
   contrast floors solved in #62/#68 rather than adding unmeasured values. */
.nav-messages { font-size: 14.5px; color: var(--text-2); white-space: nowrap; position: relative; transition: color .15s; }
.nav-messages:hover { color: var(--text); }
.nav-unread {
  display: inline-block; margin-left: 6px; min-width: 18px; text-align: center;
  font-size: 11px; font-weight: 700; line-height: 18px;
  background: var(--accent); color: var(--void); border-radius: 999px; padding: 0 5px;
}
.request-list { margin-bottom: 22px; }
.request-head { font-size: 15px; margin-bottom: 10px; color: var(--text); }
.request-row {
  display: flex; align-items: center; gap: 10px; padding: 13px 16px; margin-bottom: 8px;
  border: 1px solid var(--border-strong); border-radius: var(--r-md, 14px); background: var(--surface);
}
.request-main { flex: 1 1 auto; min-width: 0; font-size: 14px; color: var(--text-2); }
.request-main b a { color: var(--text); text-decoration: none; }
.request-note { font-size: 13px; color: var(--text-3); margin-top: 4px; overflow-wrap: anywhere; }
.request-accept, .request-decline {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 7px 15px; border-radius: 999px; white-space: nowrap;
}
.request-accept { background: var(--accent); color: var(--void); border: 1px solid var(--accent); }
.request-decline { background: none; color: var(--text-2); border: 1px solid var(--border); }
.request-decline:hover { color: var(--red); border-color: var(--red); }
.request-form textarea { min-height: 46px; }
.thread-list { display: flex; flex-direction: column; gap: 10px; }
.thread-row {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border: 1px solid var(--border); border-radius: var(--r-md, 14px);
  background: var(--surface); text-decoration: none; transition: border-color .15s;
}
.thread-row:hover { border-color: var(--border-strong); }
.thread-row.is-unread { border-color: var(--border-strong); }
.thread-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.thread-main { flex: 1 1 auto; min-width: 0; }
.thread-head { display: flex; align-items: center; gap: 8px; }
.thread-head b { color: var(--text); font-size: 14.5px; }
.thread-when { margin-left: auto; font-size: 12px; color: var(--text-3); white-space: nowrap; }
.thread-preview { font-size: 13.5px; color: var(--text-2); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-you { color: var(--text-3); }
.thread-unread {
  flex-shrink: 0; min-width: 22px; text-align: center; font-size: 12px; font-weight: 700;
  background: var(--accent); color: var(--void); border-radius: 999px; padding: 2px 7px;
}
.thread-header { display: flex; align-items: center; gap: 14px; }
.thread-header img { width: 54px; height: 54px; border-radius: 50%; }
.thread-header h1 { font-size: 24px; }
.thread-header h1 a { color: var(--text); text-decoration: none; }
.message-btn {
  align-self: center; font-size: 14px; font-weight: 600; padding: 9px 20px;
  border-radius: 999px; border: 1px solid var(--border); color: var(--text-2);
  text-decoration: none; transition: color .15s, border-color .15s;
}
.message-btn:hover { color: var(--accent); border-color: var(--border-strong); }
.chat-log { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.chat-msg { max-width: 78%; align-self: flex-start; }
.chat-msg.mine { align-self: flex-end; }
.chat-bubble {
  padding: 11px 15px; border-radius: 16px; font-size: 14.5px; line-height: 1.55;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
  overflow-wrap: anywhere; white-space: pre-wrap;
}
.chat-msg.mine .chat-bubble { background: var(--accent-dim); border-color: var(--border-strong); }
.chat-bubble.is-deleted { color: var(--text-3); font-style: italic; }
.chat-meta { display: flex; align-items: center; gap: 10px; margin-top: 4px; font-size: 11.5px; color: var(--text-3); }
.chat-msg.mine .chat-meta { justify-content: flex-end; }
.chat-meta button { font: inherit; background: none; border: none; color: var(--text-3); cursor: pointer; text-decoration: underline; padding: 0; }
.chat-meta button:hover { color: var(--red); }
.chat-form { display: flex; gap: 10px; align-items: flex-end; }
.chat-form textarea {
  flex: 1 1 auto; font: inherit; font-size: 14.5px; padding: 11px 14px; resize: vertical;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm, 12px);
  color: var(--text);
}
.chat-form textarea:focus { outline: none; border-color: var(--border-strong); }
/* Official-account badge, moderator affordances and removed-content notes.
   All colours are existing tokens, so they inherit the contrast floors solved
   in #62/#68 rather than introducing values nobody has measured. */
.official-badge {
  display: inline-block; margin-left: 7px; vertical-align: middle;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--accent); background: var(--accent-dim);
  border: 1px solid var(--border-strong); border-radius: 999px; padding: 2px 8px;
}
.removed-note { color: var(--text-3); font-style: italic; }
.mod-inline { display: inline; }
.mod-delete { display: flex; gap: 8px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.mod-delete input {
  font: inherit; font-size: 13px; padding: 8px 12px; border-radius: var(--r-sm, 12px);
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
}
.mod-delete button {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 8px 16px; border-radius: 999px;
  background: none; color: var(--red); border: 1px solid var(--red);
}
.mod-delete button:hover { background: var(--red-dim); }
.email-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; color: var(--text-2); font-size: 14.5px; }
.email-toggle input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }
.account-section { margin-top: 32px; padding-top: 26px; border-top: 1px solid var(--border-hair); }
.account-section h2 { font-size: 17px; margin-bottom: 6px; }
.account-section p { color: var(--text-2); font-size: 14px; line-height: 1.6; margin-bottom: 16px; }
.account-section.danger h2 { color: var(--red); }
.button-danger {
  font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
  padding: 10px 20px; border-radius: 999px; width: 100%;
  background: none; color: var(--red); border: 1px solid var(--red);
}
.button-danger:hover { background: var(--red-dim); }
.account-detail { border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); padding: 16px; min-width: 0; }
.account-detail span { display: block; color: var(--text-3); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 7px; }
.account-detail strong { display: block; color: var(--text); font-size: 14px; overflow-wrap: anywhere; }
.account-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.account-actions form { margin: 0; }
.button-secondary {
  display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border);
  border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-2); padding: 11px 16px;
  font: inherit; font-size: 14px; cursor: pointer;
}
.button-secondary:hover { color: var(--text); border-color: var(--border-strong); }
@media (max-width: 520px) { .account-grid { grid-template-columns: 1fr; } }

.cash-inline-form { display: flex; align-items: center; gap: 6px; }
.cash-prefix { color: var(--text-3); font-size: 14px; }
.cash-inline-form input[type="number"] {
  flex: 1 1 auto; min-width: 0; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-xs, 8px); padding: 7px 8px; color: var(--text); font: inherit; font-size: 14px;
}
.cash-inline-form input[type="number"]:focus { border-color: var(--accent); outline: none; }
.cash-save-btn { padding: 7px 12px; font-size: 12.5px; white-space: nowrap; }

/* Ticker autocomplete on the "Add a holding" form -- same visual language
   as .nav-menu (surface-solid card, hover row) since both are a floating
   pick-one-of-these list anchored to a trigger. */
.ticker-suggest {
  position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; z-index: 30;
  max-height: 260px; overflow-y: auto; padding: 6px;
  border: 1px solid var(--border); border-radius: var(--r-sm, 10px);
  background: var(--surface-solid, var(--surface));
  box-shadow: var(--lift-2, 0 12px 28px rgba(0,0,0,.18));
}
.ticker-suggest[hidden] { display: none; }
.ticker-suggest-item {
  display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left;
  padding: 8px 10px; border-radius: var(--r-xs, 8px); border: 0; background: none; cursor: pointer;
  font: inherit; color: var(--text);
}
.ticker-suggest-item:hover, .ticker-suggest-item.active { background: var(--surface-2); }
.ticker-suggest-item b { font-size: 14px; color: var(--text); font-family: 'JetBrains Mono', monospace; }
.ticker-suggest-item span { font-size: 12.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── community / profile ─────────────────────────────────────────── */
.nav-avatar { display: inline-flex; flex-shrink: 0; border-radius: 50%; }
.nav-avatar img { width: 26px; height: 26px; border-radius: 50%; display: block; border: 1px solid var(--border-strong); }

.community-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin: 24px 0; }
.community-card {
  display: flex; flex-direction: column; gap: 10px; padding: 18px;
  border: 1px solid var(--border); border-radius: var(--r-md, 14px); background: var(--surface);
  text-decoration: none; color: inherit;
}
.community-card:hover { border-color: var(--border-strong); }
.community-card-head { display: flex; align-items: center; gap: 12px; }
.community-glyph {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 12px; font-size: 13px; font-weight: 800;
  background: linear-gradient(135deg, var(--accent), var(--green)); color: #04151a;
  font-family: 'JetBrains Mono', monospace;
}
.community-card h3 { font-size: 16px; margin: 0; }
.community-card p { color: var(--text-2); font-size: 13.5px; line-height: 1.5; margin: 0; flex: 1 1 auto; }
.community-card-meta { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--text-3); }

.post-card { padding: 18px; border: 1px solid var(--border); border-radius: var(--r-md, 14px); background: var(--surface); margin-bottom: 12px; }
/* Pinned notices. --accent-dim is a 10% tint, so the card background stays
   close to --surface and the body text keeps the ratio it was solved for in
   #68; the accent is carried by the border and badge, not behind the copy. */
.post-card-pinned { border-color: var(--border-strong); background: var(--surface); }
.post-pin-badge {
  margin-left: auto; flex-shrink: 0; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--accent);
  background: var(--accent-dim); border: 1px solid var(--border-strong);
  border-radius: 999px; padding: 3px 10px;
}
.post-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.post-avatar img { width: 30px; height: 30px; border-radius: 50%; display: block; }
.post-byline { display: flex; flex-direction: column; line-height: 1.3; }
.post-byline b { font-size: 13.5px; color: var(--text); }
.post-byline span { font-size: 12px; color: var(--text-3); }
.post-card h3 { font-size: 17px; margin: 0 0 6px; }
.post-card h3 a { color: var(--text); text-decoration: none; }
.post-card h3 a:hover { color: var(--accent); }
.post-body { color: var(--text-2); font-size: 14px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.post-actions { display: flex; align-items: center; gap: 14px; margin-top: 12px; font-size: 12.5px; color: var(--text-3); }
.post-actions a, .post-actions button {
  background: none; border: 0; padding: 0; color: var(--text-3); font: inherit; font-size: 12.5px;
  cursor: pointer; text-decoration: none;
}
.post-actions a:hover, .post-actions button:hover { color: var(--text); }

.comment { display: flex; gap: 10px; padding: 14px 0; border-top: 1px solid var(--border-hair); }
.comment:first-child { border-top: 0; }
.comment-avatar img { width: 26px; height: 26px; border-radius: 50%; display: block; }
.comment-body { flex: 1 1 auto; min-width: 0; }
.comment-byline { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; }
.comment-byline b { font-size: 13px; color: var(--text); }
.comment-byline span { font-size: 11.5px; color: var(--text-3); }
.comment-text { color: var(--text-2); font-size: 14px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }

.avatar-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 10px; max-width: 480px; margin: 14px 0; }
.avatar-choice { position: relative; display: block; cursor: pointer; }
.avatar-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.avatar-choice img { width: 100%; aspect-ratio: 1; border-radius: 50%; display: block; border: 2px solid transparent; }
.avatar-choice input:checked + img { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.avatar-choice input:focus-visible + img { outline: 2px solid var(--accent); outline-offset: 2px; }

.profile-head { display: flex; align-items: center; gap: 18px; }
.profile-head img { width: 72px; height: 72px; border-radius: 50%; display: block; border: 1px solid var(--border); }
.profile-head h1 { margin: 0 0 4px; }
.profile-head .muted { color: var(--text-3); font-size: 13.5px; }
.profile-bio { color: var(--text-2); font-size: 14.5px; line-height: 1.6; max-width: 640px; margin: 14px 0 0; }

/* signal toast */
.consent-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 24px;
  padding: 16px 24px; background: var(--surface-solid, var(--surface));
  border-top: 1px solid var(--border); box-shadow: 0 -12px 28px rgba(0,0,0,.18);
}
.consent-banner[hidden] { display: none; }
.consent-banner p { margin: 0; color: var(--text-2); font-size: 13.5px; max-width: 640px; line-height: 1.5; }
.consent-banner p a { color: var(--accent); }
.consent-actions { display: flex; gap: 10px; flex-shrink: 0; }
.consent-actions button { padding: 9px 18px; font-size: 13.5px; }

.signal-toast-region {
  position: fixed; top: 84px; right: 18px; z-index: 60;
  display: flex; flex-direction: column; gap: 10px; width: min(340px, calc(100vw - 36px));
  pointer-events: none;
}
.signal-toast {
  pointer-events: auto; display: flex; gap: 0; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--r-md);
  backdrop-filter: var(--glass-thick); -webkit-backdrop-filter: var(--glass-thick);
  box-shadow: var(--lift-3);
  opacity: 0; transform: translateY(-10px) scale(.98);
  transition: opacity .28s var(--ease-out), transform .28s var(--ease-out);
}
.signal-toast.show { opacity: 1; transform: translateY(0) scale(1); }
.signal-toast-accent { width: 4px; flex-shrink: 0; background: linear-gradient(180deg, var(--accent), var(--green)); }
.signal-toast-body { padding: 14px 16px; flex: 1; min-width: 0; }
.signal-toast-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--accent); font-weight: 700; }
.signal-toast-body h3 { font-family: 'Inter', -apple-system, sans-serif; font-size: 16px; margin: 6px 0 4px; }
.signal-toast-body p { font-size: 13.5px; color: var(--text-2); line-height: 1.5; }
.signal-toast-actions { display: flex; gap: 12px; align-items: center; margin-top: 10px; }
.signal-toast-link { color: var(--accent); font-size: 13.5px; font-weight: 700; }
.signal-toast-close { background: none; border: none; color: var(--text-3); font-size: 13px; cursor: pointer; padding: 0; }
.signal-toast-close:hover { color: var(--text); }

/* ------------------------------------------------------------
   hero
   ------------------------------------------------------------ */
.hero { padding: 96px 0 64px; text-align: center; }
@media (max-width: 640px) { .hero { padding: 56px 0 40px; } }
.hero .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--accent); font-size: 13.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; margin-bottom: 20px;
  animation: eyebrow-in .6s var(--ease-out);
}
.eyebrow-rule { width: 20px; height: 1px; background: var(--accent); box-shadow: 0 0 6px var(--accent); }
@keyframes eyebrow-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.hero h1 {
  /* Fixed 56px wrapped into many short, huge-looking lines on a phone --
     clamp() scales it down smoothly instead of needing a breakpoint. */
  font-size: clamp(32px, 8vw, 56px); line-height: 1.1; max-width: 820px; margin: 0 auto;
  animation: hero-in .7s var(--ease-out) .08s both;
}
@keyframes hero-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.hero h1 .grad {
  background: linear-gradient(100deg, var(--accent) 4%, var(--green) 50%, var(--lime) 96%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 5s ease-in-out infinite;
}
@keyframes shimmer { 0%,100% { background-position: 0% center; } 50% { background-position: 100% center; } }
.hero p { color: var(--text-2); font-size: 18px; max-width: 580px; margin: 22px auto 0; animation: hero-in .7s var(--ease-out) .16s both; }
.hero .ctas { margin-top: 34px; display: flex; gap: 12px; justify-content: center; animation: hero-in .7s var(--ease-out) .24s both; }
.hero .cta { padding: 14px 28px; font-size: 15px; }
.hero-note { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-top: 28px; font-size: 13.5px; color: var(--text-3); }
.hero-note span { position: relative; padding-left: 14px; }
.hero-note span::before { content: ""; position: absolute; left: 0; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--green); transform: translateY(-50%); }
@media (prefers-reduced-motion: reduce) {
  .hero .eyebrow, .hero h1, .hero p, .hero .ctas, .hero h1 .grad { animation: none; }
}

/* home hero — split layout with live signal monitor */
.home-hero { padding-top: 56px; text-align: left; }
.hero-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; }
.home-hero .eyebrow, .home-hero .ctas, .home-hero .hero-note { justify-content: flex-start; }
.home-hero h1 { max-width: 560px; margin: 0; font-size: clamp(30px, 7.5vw, 46px); line-height: 1.12; }
.home-hero p { max-width: 500px; margin: 20px 0 0; }
@media (max-width: 940px) {
  .hero-layout { grid-template-columns: 1fr; }
  .home-hero { text-align: center; padding-top: 40px; }
  .home-hero .eyebrow, .home-hero .ctas, .home-hero .hero-note { justify-content: center; }
  .home-hero h1, .home-hero p { margin-left: auto; margin-right: auto; }
}

.signal-monitor {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  backdrop-filter: var(--glass-regular); -webkit-backdrop-filter: var(--glass-regular);
  background-image: var(--glass-fill); box-shadow: var(--rim), var(--lift-2);
  padding: 20px; text-align: left;
}
.monitor-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--border-hair); margin-bottom: 8px; }
.monitor-kicker { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); }
.monitor-head strong { font-family: 'Inter', -apple-system, sans-serif; font-size: 17px; }
.monitor-live {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--green); background: var(--green-dim); border: 1px solid rgba(0,236,159,.28);
  padding: 4px 9px; border-radius: 999px;
}
.monitor-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 4px;
  border-bottom: 1px solid var(--border-hair); color: inherit; text-decoration: none;
  border-radius: var(--r-xs, 8px); transition: background .15s;
}
.monitor-row:hover { background: var(--surface-2); }
.monitor-row:last-of-type { border-bottom: none; }
.monitor-reason { font-size: 12.5px; color: var(--text-3); line-height: 1.5; margin: -6px 0 10px; padding: 0 4px; }
.monitor-company { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.monitor-company strong { font-family: 'JetBrains Mono', monospace; font-size: 15px; }
.monitor-company span { font-size: 13px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
.monitor-price { text-align: right; }
.monitor-price strong { font-family: 'JetBrains Mono', monospace; font-size: 15px; display: block; }
.monitor-price span { font-size: 12px; color: var(--text-3); }
.monitor-rating, .trade-badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; padding: 4px 9px; border-radius: 999px; white-space: nowrap;
}
.monitor-rating::before, .trade-badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.monitor-rating.Aplus, .trade-badge.Aplus { background: var(--amber-dim); color: var(--amber); border: 1px solid rgba(255,200,90,.28); }
.monitor-rating.A, .trade-badge.A { background: var(--green-dim); color: var(--green); border: 1px solid rgba(0,236,159,.28); }
.monitor-rating.Bplus, .trade-badge.Bplus { background: var(--blue-dim); color: #9fb3d4; border: 1px solid rgba(75,163,255,.24); }
:root[data-theme="light"] .monitor-rating.Bplus, :root[data-theme="light"] .trade-badge.Bplus { color: #3f5c85; }
.monitor-rating.B, .trade-badge.B { background: rgba(138,167,216,.1); color: var(--b); border: 1px solid rgba(138,167,216,.24); }
.monitor-empty { color: var(--text-3); font-size: 14px; padding: 20px 4px; text-align: center; }
.monitor-foot { display: flex; flex-direction: column; gap: 3px; padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--border-hair); }
.monitor-foot span { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.monitor-foot strong { font-size: 13px; font-weight: 500; color: var(--text-2); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* Always-visible version of the first-visit guide modal's 3 steps, for
   everyone who isn't seeing that popup (returning visitors, or anyone who
   dismissed it) -- same copy, so the two never drift apart. */
.how-it-works-strip { padding: 12px 0 8px; }
.hiw-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.hiw-step { padding: 22px 20px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.hiw-num {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 50%; background: var(--accent-dim); color: var(--accent);
  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 14px; margin-bottom: 14px;
}
.hiw-step h3 { font-size: 16.5px; margin: 0 0 8px; }
.hiw-step p { font-size: 13.5px; color: var(--text-2); line-height: 1.6; margin: 0; }
@media (max-width: 780px) {
  .hiw-steps { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   sections
   ------------------------------------------------------------ */
section { padding: 76px 0; border-top: 1px solid var(--border-hair); position: relative; }
.section-head { text-align: center; max-width: 620px; margin: 0 auto 46px; }
.section-head .eyebrow { color: var(--accent); font-size: 13.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; }
.section-head h2 { font-size: 33px; margin-top: 10px; }
.section-head p { color: var(--text-2); font-size: 16px; margin-top: 12px; }

/* ------------------------------------------------------------
   performance dashboard — flagship "terminal" panel
   ------------------------------------------------------------ */
.performance-terminal { padding-top: 52px; }
.performance-shell {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl);
  backdrop-filter: var(--glass-regular); -webkit-backdrop-filter: var(--glass-regular);
  background-image: var(--glass-fill); box-shadow: var(--rim), var(--lift-3);
  padding: 32px 34px 30px;
}
.performance-shell::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent) 25%, var(--accent) 75%, transparent);
  opacity: .55;
}
.performance-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.performance-heading .eyebrow { color: var(--accent); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.performance-heading h2 { font-size: 25px; margin-top: 8px; font-family: 'Inter', -apple-system, sans-serif; }
.performance-heading p { color: var(--text-2); font-size: 15px; margin-top: 8px; max-width: 480px; }
.performance-badges { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
.performance-badge {
  font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: var(--text-2);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px;
}
.performance-badge.live { color: var(--green); border-color: rgba(0,236,159,.3); background: var(--green-dim); }

.performance-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border-hair); border: 1px solid var(--border-hair); border-radius: var(--r-md); overflow: hidden; margin-bottom: 26px; }
.performance-kpis.owner-only { grid-template-columns: 1fr; }
.performance-kpi { background: var(--surface-solid); padding: 19px 21px; display: flex; flex-direction: column; gap: 7px; position: relative; }
.performance-kpi.owner { background: linear-gradient(180deg, var(--lime-dim), var(--surface-solid) 75%); padding-left: 24px; }
.performance-kpi.owner::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 3px; background: var(--lime); }
.performance-kpi span { font-size: 12.5px; font-weight: 600; letter-spacing: .01em; color: var(--text-3); }
.performance-kpi strong { font-family: 'JetBrains Mono', monospace; font-size: 23px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.performance-kpi small { font-size: 12px; color: var(--text-3); line-height: 1.45; }
.performance-kpi.owner strong { font-size: 29px; font-weight: 700; color: var(--lime); }
.performance-kpi strong.pos, .performance-kpi strong[data-strategy-return].pos { color: var(--green); }
.performance-kpi strong.neg { color: var(--red); }
@media (max-width: 760px) { .performance-kpis { grid-template-columns: repeat(2, 1fr); } }

.performance-chart-panel { }
.performance-chart-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.performance-window-label { display: flex; flex-direction: column; gap: 2px; }
.performance-window-label span { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.performance-window-label strong { font-family: 'Inter', -apple-system, sans-serif; font-size: 16px; }
.performance-ranges { display: inline-flex; gap: 3px; background: var(--surface-solid); border: 1px solid var(--border); border-radius: 999px; padding: 3px; }
.performance-range {
  font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600; color: var(--text-2);
  background: transparent; border: none; border-radius: 999px; padding: 7px 14px; cursor: pointer;
  transition: background .18s, color .18s;
}
.performance-range:hover { color: var(--text); }
.performance-range.active { background: linear-gradient(135deg, var(--accent), var(--green)); color: #04151a; }

.performance-plot { position: relative; background: var(--surface-solid); border: 1px solid var(--border-hair); border-radius: var(--r-md); padding: 6px; }
.performance-canvas { width: 100%; height: 320px; display: block; }
.performance-tooltip {
  position: absolute; pointer-events: none; opacity: 0; transform: translateY(4px);
  background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  padding: 10px 13px; font-size: 13px; box-shadow: var(--lift-2); transition: opacity .15s, transform .15s;
  min-width: 150px; z-index: 5;
}
.performance-tooltip.show { opacity: 1; transform: translateY(0); }
.performance-tooltip time { display: block; font-family: 'JetBrains Mono', monospace; color: var(--text-3); font-size: 12px; margin-bottom: 6px; }
.performance-tooltip div { display: flex; justify-content: space-between; gap: 14px; padding: 2px 0; color: var(--text-2); }
.performance-tooltip strong { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
.performance-tooltip .owner-value { color: var(--lime); }
.performance-tooltip .strategy-value { color: var(--green); }
.performance-tooltip .benchmark-value { color: var(--blue); }

.performance-legend { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; margin-top: 16px; font-size: 13.5px; color: var(--text-2); }
.performance-legend span { display: inline-flex; align-items: center; gap: 7px; }
.performance-legend i { width: 10px; height: 2.5px; border-radius: 2px; background: var(--green); display: inline-block; }
.performance-legend .owner i { background: var(--lime); }
.performance-legend .benchmark i { background: var(--blue); }
.performance-legend.owner-mode [data-backtest-legend] { display: none; }

/* Provenance for the three series sharing the performance chart. Each one
   is a different kind of evidence and says so, rather than relying on a
   single footnote below all three. */
.perf-pointer-copy { font-size: 13.5px; color: var(--text-3); line-height: 1.7; margin: 0 0 18px; max-width: 68ch; }

.perf-sources { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-hair); }
.perf-sources h4 { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); margin: 0 0 12px; }
.perf-sources dl { display: grid; gap: 14px; margin: 0; }
.perf-sources dt { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text-2); margin-bottom: 4px; }
.perf-sources dd { margin: 0; font-size: 12.5px; color: var(--text-3); line-height: 1.6; }
.perf-sources dd strong { color: var(--text-2); }
.perf-key { width: 10px; height: 2.5px; border-radius: 2px; flex-shrink: 0; background: var(--green); }
.perf-key.owner { background: var(--lime); }
.perf-key.benchmark { background: var(--blue); }
.perf-sources-note { font-size: 12px; color: var(--text-3); line-height: 1.6; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border-hair); }
.perf-sources-note a { color: var(--accent); text-decoration: none; font-weight: 600; }
.perf-sources-note a:hover { text-decoration: underline; }
.perf-scope { font-size: 13px; color: var(--text-3); line-height: 1.65; margin: 10px 0 0; max-width: 620px; }
.perf-scope strong { color: var(--text-2); }
.performance-foot { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-hair); }
.performance-risk, .performance-asof { font-size: 13px; color: var(--text-3); line-height: 1.6; margin: 0; max-width: 480px; }
.performance-risk strong { color: var(--text-2); }
.performance-asof { text-align: right; }
@media (max-width: 760px) {
  .performance-chart-toolbar { flex-direction: column; align-items: flex-start; }
  .performance-foot { flex-direction: column; }
  .performance-asof { text-align: left; }
  .performance-canvas { height: 260px; }
}

/* ytd trade ledger table (inside dashboard) */
.ytd-ledger { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--border-hair); }
.ytd-ledger-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.ytd-ledger-head h3 { font-family: 'Inter', -apple-system, sans-serif; font-size: 19px; }
.ytd-ledger-head p { font-size: 14px; color: var(--text-3); margin-top: 6px; max-width: 420px; }
.ytd-ledger-updated { text-align: right; font-size: 12px; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.ytd-ledger-updated strong { display: block; font-family: 'JetBrains Mono', monospace; color: var(--text-2); font-size: 13.5px; text-transform: none; letter-spacing: 0; margin-top: 2px; }
.ytd-ledger-scroll { overflow: auto; max-height: 620px; border: 1px solid var(--border-hair); border-radius: var(--r-md); background: var(--surface-solid); -webkit-overflow-scrolling: touch; }
.ytd-ledger-table { width: 100%; border-collapse: collapse; font-family: 'JetBrains Mono', monospace; font-size: 14px; min-width: 560px; }
.ytd-ledger-table thead th {
  position: sticky; top: 0; z-index: 2;
  text-align: left; padding: 11px 16px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-3); border-bottom: 1px solid var(--border-hair); font-weight: 600;
  background: var(--surface-solid); backdrop-filter: var(--glass-thin); -webkit-backdrop-filter: var(--glass-thin);
}
.ytd-ledger-table tbody td { padding: 10px 16px; border-bottom: 1px solid var(--border-hair); }
.ytd-ledger-table tbody tr:last-child td { border-bottom: none; }
.ytd-ledger-table tbody tr { transition: background .15s; }
.ytd-ledger-table tbody tr:hover { background: rgba(255,255,255,.025); }
:root[data-theme="light"] .ytd-ledger-table tbody tr:hover { background: rgba(15,23,42,.03); }
.trade-date { color: var(--text-3); }
.trade-symbol { color: var(--text); font-weight: 700; }
.trade-rating { margin-left: 7px; font-size: 11.5px; font-weight: 700; color: var(--accent); background: var(--accent-dim); border-radius: 5px; padding: 1px 5px; }
.ytd-status {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; padding: 3px 9px; border-radius: 999px;
}
.ytd-status::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.ytd-status.open-signal, .ytd-status.open { color: var(--accent); background: var(--accent-dim); }
.ytd-status.closed, .ytd-status.win, .ytd-status.resolved { color: var(--green); background: var(--green-dim); }
.ytd-status.loss { color: var(--red); background: var(--red-dim); }
.ytd-trade-return { text-align: right; font-variant-numeric: tabular-nums; }
.ytd-trade-return.pos { color: var(--green); }
.ytd-trade-return.neg { color: var(--red); }
.ytd-ledger-note { font-size: 12.5px; color: var(--text-3); margin-top: 12px; line-height: 1.6; }

.performance-methodology { display: flex; gap: 12px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border-hair); }
.performance-methodology-mark { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); flex-shrink: 0; margin-top: 6px; }
.performance-methodology p { font-size: 13px; color: var(--text-3); line-height: 1.7; }
.performance-methodology strong { color: var(--text-2); }

/* ------------------------------------------------------------
   trust bar
   ------------------------------------------------------------ */
.trust-bar { padding: 30px 0; border-top: 1px solid var(--border-hair); border-bottom: 1px solid var(--border-hair); }
.trust-stat { text-align: center; }
.trust-stat .n { font-family: 'JetBrains Mono', monospace; font-size: 27px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.trust-stat .l { color: var(--text-3); font-size: 13px; text-transform: uppercase; letter-spacing: .07em; margin-top: 5px; }

/* ------------------------------------------------------------
   market activity banner — raw, unfiltered SEC feed (distinct from
   the AI-scored signal ticker in nav: amber accent, not accent/green)
   ------------------------------------------------------------ */
.market-activity-banner { padding: 40px 0 44px; }
.market-activity-head { max-width: 640px; margin: 0 auto 22px; text-align: center; }
.market-activity-head .eyebrow { color: var(--amber); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; }
.market-activity-head h2 { font-size: 24px; margin-top: 10px; }
.market-activity-head p { color: var(--text-2); font-size: 14.5px; margin-top: 10px; line-height: 1.6; }
.market-activity-scroll {
  overflow: hidden; white-space: nowrap; position: relative;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-solid);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.market-activity-track { display: inline-flex; gap: 0; animation: ticker-scroll 60s linear infinite; }
.market-activity-scroll:hover .market-activity-track { animation-play-state: paused; }
.market-activity-item {
  display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0;
  padding: 14px 20px; border-right: 1px solid var(--border-hair);
  font-family: 'JetBrains Mono', monospace; font-size: 13.5px; color: var(--text-2);
}
.ma-ticker { color: var(--text); font-weight: 700; }
.ma-type { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; }
.ma-type.buy { color: var(--green); background: var(--green-dim); }
.ma-type.sell { color: var(--red); background: var(--red-dim); }
.party-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; }
.party-badge::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
.party-badge.party-D { color: var(--blue); }
.party-badge.party-D::before { background: var(--blue); }
.party-badge.party-R { color: var(--red); }
.party-badge.party-R::before { background: var(--red); }
.party-badge.party-I { color: var(--text-3); }
.ma-insider { color: var(--text-3); max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.ma-value { color: var(--amber); }
.ma-date { color: var(--text-3); }
@media (max-width: 640px) { .ma-insider { max-width: 120px; } }

/* ------------------------------------------------------------
   filings table
   ------------------------------------------------------------ */
.filings-tabs { display: inline-flex; gap: 3px; background: var(--surface-solid); border: 1px solid var(--border); border-radius: 999px; padding: 3px; margin-bottom: 20px; }
.filings-tab {
  font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600; color: var(--text-2);
  background: transparent; border: none; border-radius: 999px; padding: 8px 18px; cursor: pointer;
  transition: background .18s, color .18s;
}
.filings-tab:hover { color: var(--text); }
.filings-tab.active { background: linear-gradient(135deg, var(--accent), var(--green)); color: #04151a; }
.filings-table-wrap { overflow: auto; max-height: 680px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-solid); -webkit-overflow-scrolling: touch; }
/* Swipe hint for the tables that still scroll sideways.
   Measured, not assumed: below 641px every one of these stacks into cards
   (see the card block further down), so there is nothing to swipe and the
   hint must NOT show -- it previously did, down to 390px, advertising a
   gesture that did nothing. Above roughly 1060px the widest of them fits
   its column. The band between is where columns really are hidden with no
   sign of it, and that is the only place this belongs.
   Sticky so the hint survives the scroll instead of disappearing off to
   the left with the rest of row 1. */
.table-scrollable::before {
  content: "⟷ Swipe to see more columns"; position: sticky; left: 0; top: 0; z-index: 1;
  display: block; width: max-content; padding: 6px 12px; font-size: 11px; font-weight: 600;
  letter-spacing: .02em; color: var(--text-3); background: var(--surface-2);
  border-bottom: 1px solid var(--border-hair);
}
table.filings { width: 100%; border-collapse: collapse; font-family: 'JetBrains Mono', monospace; font-size: 14.5px; min-width: 740px; }
table.filings thead th {
  position: sticky; top: 0; z-index: 2;
  text-align: left; padding: 13px 18px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-3); border-bottom: 1px solid var(--border); font-weight: 600; background: var(--surface-2);
  backdrop-filter: var(--glass-thin); -webkit-backdrop-filter: var(--glass-thin);
}
table.filings tbody td { padding: 12px 18px; border-bottom: 1px solid var(--border-hair); }
table.filings tbody tr:last-child td { border-bottom: none; }
table.filings tbody tr { transition: background .15s; }
table.filings tbody tr:hover { background: rgba(255,255,255,.025); }
:root[data-theme="light"] table.filings tbody tr:hover { background: rgba(15,23,42,.03); }
table.filings .tk { font-weight: 700; color: var(--text); }
table.filings .role { color: var(--text-3); font-size: 13.5px; margin-top: 2px; }
table.filings .amt { text-align: right; }
table.filings th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
table.filings th.sortable:hover { color: var(--text); }
/* The characters themselves, never CSS numeric escapes. BASE_CSS is a plain
   Python string, so a CSS escape like backslash-2195 is read by Python first,
   as an OCTAL escape -- it produced a control character followed by the
   digits 95, and every sortable header rendered that instead of an arrow.
   Literal glyphs cannot collide with either language's escaping rules. */
table.filings th.sortable::after { content: '↕'; display: inline-block; margin-left: 5px; font-size: 10px; opacity: .35; }
table.filings th.sortable[data-sort-dir="asc"]::after { content: '↑'; opacity: 1; color: var(--accent); }
table.filings th.sortable[data-sort-dir="desc"]::after { content: '↓'; opacity: 1; color: var(--accent); }
tr.row-hidden { display: none; }
.filings-no-match { display: none; padding: 22px 18px; text-align: center; color: var(--text-3); font-size: 14px; }
.filings-no-match.show { display: block; }

.portfolio-treemap-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 28px 0 12px; }
.portfolio-treemap-wrap {
  position: relative; width: 100%; height: 360px; border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden; background: var(--surface-solid);
}
.treemap-block {
  position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; border: 1px solid var(--border-hair); overflow: hidden; text-align: center;
  transition: filter .15s;
}
.treemap-block:hover { filter: brightness(1.15); }
.treemap-block b { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--text); }
.treemap-block span { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-2); }
@media (max-width: 640px) { .portfolio-treemap-wrap { height: 280px; } }

.filings-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 18px; }
.filings-search { display: flex; align-items: center; gap: 9px; flex: 1 1 260px; max-width: 340px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 9px 16px;
  transition: border-color .18s; }
.filings-search:focus-within { border-color: var(--border-strong); }
.filings-search svg { width: 15px; height: 15px; color: var(--text-3); flex-shrink: 0; }
.filings-search input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--text);
  font-family: 'JetBrains Mono', monospace; font-size: 13px; }
.filings-search input::placeholder { color: var(--text-3); font-family: 'Inter', sans-serif; }
.party-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.party-chip {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600; color: var(--text-2);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 6px 13px; cursor: pointer;
  transition: border-color .18s, color .18s, background .18s;
}
.party-chip:hover { color: var(--text); border-color: var(--border-strong); }
.party-chip.active { color: var(--accent); border-color: var(--border-strong); background: var(--accent-dim); }
@media (max-width: 560px) {
  .filings-controls { flex-direction: column; align-items: stretch; }
  /* flex-basis follows the main axis -- switching the parent to column above
     turns this item's 260px *width* basis into a 260px *height* instead,
     ballooning the pill into a giant oval. Column layout needs its own
     sizing, not a basis written for the row layout. */
  .filings-search { max-width: none; flex: 0 0 auto; width: 100%; }
}

/* ------------------------------------------------------------
   market dashboard (tradingview + snapshots)
   ------------------------------------------------------------ */
.ticker-search {
  display: flex; align-items: center; gap: 10px; max-width: 460px; margin: 0 auto 14px;
  background: var(--surface-solid); border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 8px 6px 18px; transition: border-color .18s;
}
.ticker-search:focus-within { border-color: var(--border-strong); }
.ticker-search-icon { width: 17px; height: 17px; color: var(--text-3); flex-shrink: 0; }
.ticker-search input {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  color: var(--text); font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 600;
  letter-spacing: .02em;
}
.ticker-search input::placeholder { color: var(--text-3); font-family: 'Inter', sans-serif; font-weight: 400; letter-spacing: normal; }
.ticker-search button {
  flex-shrink: 0; background: linear-gradient(135deg, var(--accent), var(--green)); color: #04151a;
  font-weight: 700; font-size: 13px; border: none; border-radius: 999px; padding: 10px 20px; cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .25s var(--ease);
}
.ticker-search button:hover { transform: translateY(-1px); box-shadow: var(--glow-accent); }
.ticker-search-error { text-align: center; color: var(--amber); font-size: 12.5px; margin: -6px 0 14px; }
.ticker-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 0 28px; }
.ticker-chip {
  font-family: 'JetBrains Mono', monospace; font-size: 12.5px; font-weight: 600; color: var(--text-2);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px;
  transition: border-color .18s, color .18s, background .18s;
}
.ticker-chip:hover { color: var(--text); border-color: var(--border-strong); }
.ticker-chip.active { color: var(--accent); border-color: var(--border-strong); background: var(--accent-dim); }
@media (max-width: 480px) { .ticker-search { border-radius: var(--r-lg); flex-wrap: wrap; padding: 12px; } .ticker-search input { flex-basis: 100%; padding: 6px 4px; } .ticker-search button { flex: 1; } }

.market-dashboard { display: grid; grid-template-columns: 1.8fr 1fr; gap: 22px; align-items: start; }
@media (max-width: 900px) { .market-dashboard { grid-template-columns: 1fr; } }

.market-chart-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  backdrop-filter: var(--glass-thin); -webkit-backdrop-filter: var(--glass-thin);
  overflow: hidden;
}
.market-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border-hair); flex-wrap: wrap; }
.market-panel-head span { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.market-panel-head strong { font-family: 'Inter', -apple-system, sans-serif; font-size: 16px; }
.market-delay-note { font-size: 12px; color: var(--text-3); max-width: 220px; text-align: right; }
.tradingview-widget-container { min-height: 820px; }
.tradingview-widget-container__widget { min-height: 820px; }
.tradingview-widget-copyright { font-size: 12px; color: var(--text-3); padding: 4px 20px; }
.tradingview-widget-copyright a { color: var(--text-3); }
/* The TradingView embed script restyles its own attribution block after we
   render it, forcing #b2b5be — which measures 1.91:1 on the light surface and
   was the last thing on the page below the AA floor. These need to out-rank
   that, hence the raised specificity and !important; nothing else on the site
   needs this treatment. Reusing --text-3 keeps it correct in both themes
   (5.49:1 light, 4.79:1 dark) and the attribution stays clearly visible,
   which is what TradingView asks for anyway. */
.tradingview-widget-container .tradingview-widget-copyright,
.tradingview-widget-container .tradingview-widget-copyright a,
.tradingview-widget-container .tradingview-widget-copyright a:visited,
.tradingview-widget-container .tradingview-widget-copyright a:hover {
  color: var(--text-3) !important;
}

.market-snapshot-list { display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 900px) { .market-snapshot-list { display: grid; grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .market-snapshot-list { grid-template-columns: 1fr; } }
.market-snapshot-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  backdrop-filter: var(--glass-thin); -webkit-backdrop-filter: var(--glass-thin);
  padding: 16px 18px; transition: border-color .2s, transform .2s;
}
.market-snapshot-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.market-snapshot-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.market-snapshot-symbol strong { font-family: 'JetBrains Mono', monospace; font-size: 15.5px; display: block; }
.market-snapshot-symbol span { font-size: 13px; color: var(--text-3); }
.market-snapshot-price { display: flex; align-items: baseline; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.market-data-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); width: 100%; }
.market-snapshot-price strong { font-family: 'JetBrains Mono', monospace; font-size: 20px; }
.market-change { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600; }
.market-change.pos { color: var(--green); }
.market-change.neg { color: var(--red); }
.market-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-hair); }
.market-metric span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); }
.market-metric strong { font-family: 'JetBrains Mono', monospace; font-size: 13.5px; }
.market-range { margin-top: 14px; }
.market-range-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-3); margin-bottom: 6px; }
.market-range-head strong { color: var(--text-2); font-family: 'JetBrains Mono', monospace; }
.market-range-track { position: relative; height: 4px; border-radius: 999px; background: var(--border); }
.market-range-fill { position: absolute; inset: 0; width: var(--range-position, 0%); border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--green)); }
.market-range-pin { position: absolute; top: 50%; left: var(--range-position, 0%); width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--bg), 0 0 8px var(--accent); transform: translate(-50%, -50%); }
:root[data-theme="light"] .market-range-pin { background: var(--text); }
.market-range-labels { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text-3); margin-top: 6px; font-family: 'JetBrains Mono', monospace; }
.market-source-note { font-size: 11.5px; color: var(--text-3); margin-top: 12px; }

/* ------------------------------------------------------------
   trade cards / proof grid
   ------------------------------------------------------------ */
.trade-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 18px; }
.trade-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px;
  backdrop-filter: var(--glass-thin); -webkit-backdrop-filter: var(--glass-thin);
  background-image: var(--glass-fill); box-shadow: var(--rim), var(--lift-1);
  transition: border-color .2s, transform .2s var(--ease), box-shadow .2s;
}
.trade-card:hover { border-color: var(--border-strong); transform: translateY(-4px); box-shadow: var(--rim), var(--lift-2), var(--glow-accent); }
.trade-top { display: flex; justify-content: space-between; align-items: flex-start; }
.trade-avatar {
  width: 38px; height: 38px; border-radius: 50%; background: var(--surface-2);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px;
  color: var(--text-2); border: 1px solid var(--border); font-family: 'JetBrains Mono', monospace;
}
.trade-gain { font-family: 'JetBrains Mono', monospace; font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.trade-gain.pos { color: var(--green); }
.trade-gain.neg { color: var(--red); }
.trade-ticker { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 16px; margin-top: 12px; }
.trade-meta { color: var(--text-3); font-size: 14px; margin-top: 4px; }
.trade-narrative { font-size: 15px; color: var(--text-2); margin-top: 14px; line-height: 1.6; }

/* Finviz-style compact market data strip */
.mkt-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-hair); font-family: 'JetBrains Mono', monospace; }
.mkt-cell { font-size: 14px; }
.mkt-cell .l { color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; font-size: 12.5px; display: block; }
.mkt-cell .v { color: var(--text); font-weight: 600; font-size: 14px; }
.mkt-cell .v.hi { color: var(--red); }
.mkt-cell .v.lo { color: var(--green); }

/* ------------------------------------------------------------
   featured signal alert
   ------------------------------------------------------------ */
.new-trade-alert {
  position: relative; overflow: hidden; margin-bottom: 22px;
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--r-xl); padding: 28px 30px;
  backdrop-filter: var(--glass-regular); -webkit-backdrop-filter: var(--glass-regular);
  background-image: var(--glass-fill); box-shadow: var(--rim), var(--lift-2);
}
.new-trade-alert::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--lime));
}
.new-trade-alert-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.new-trade-kicker { display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
.new-trade-alert-head h3 { font-family: 'Inter', -apple-system, sans-serif; font-size: 21px; margin-top: 8px; }
.new-trade-alert-head p { font-size: 14px; color: var(--text-3); margin-top: 6px; }
.new-trade-alert-badges { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.conviction-pill {
  font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--lime); background: var(--lime-dim); border: 1px solid rgba(215,255,125,.28);
  padding: 4px 10px; border-radius: 999px;
}
.new-trade-alert-main { display: flex; gap: 30px; flex-wrap: wrap; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--border-hair); }
.new-trade-symbol { display: flex; flex-direction: column; gap: 3px; }
.new-trade-symbol span { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.new-trade-symbol strong { font-family: 'JetBrains Mono', monospace; font-size: 30px; }
.new-trade-symbol small { font-size: 13px; color: var(--text-3); }
.new-trade-stats { display: grid; grid-template-columns: repeat(4, auto); gap: 24px; flex: 1; }
.new-trade-stat { display: flex; flex-direction: column; gap: 3px; }
.new-trade-stat span { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.new-trade-stat strong { font-family: 'JetBrains Mono', monospace; font-size: 18px; }
.new-trade-stat small { font-size: 12.5px; color: var(--text-3); }
.new-trade-stat.allocation strong { color: var(--lime); }
@media (max-width: 760px) { .new-trade-stats { grid-template-columns: repeat(2, 1fr); } }

.new-trade-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 22px; }
@media (max-width: 640px) { .new-trade-copy { grid-template-columns: 1fr; } }
.new-trade-copy-block { background: var(--surface-solid); border: 1px solid var(--border-hair); border-radius: var(--r-sm); padding: 16px 18px; }
.new-trade-copy-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.new-trade-copy-block.watch .new-trade-copy-label { color: var(--amber); }
.new-trade-copy-block p { font-size: 14.5px; color: var(--text-2); margin-top: 8px; line-height: 1.6; }

.new-trade-risk { display: flex; gap: 12px; margin-top: 20px; padding: 14px 16px; background: var(--red-dim); border: 1px solid rgba(255,92,114,.28); border-radius: var(--r-sm); }
.new-trade-risk-icon {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--red); color: #2a0710;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px;
}
.new-trade-risk strong { color: var(--red); font-size: 14px; }
.new-trade-risk p { font-size: 13.5px; color: var(--text-2); margin-top: 4px; line-height: 1.5; }

.signal-list-label { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); margin: 32px 0 16px; }
.signal-brief-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(340px,1fr)); gap: 18px; }
.signal-brief-card { padding: 24px; }
.signal-brief-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.signal-brief-symbol { display: flex; gap: 12px; align-items: center; }
.signal-brief-symbol .trade-ticker { margin-top: 0; }
.signal-company { font-size: 13px; color: var(--text-3); }
.signal-brief-badges { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.signal-framework { display: grid; grid-template-columns: repeat(auto-fit,minmax(120px,1fr)); gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-hair); }
.signal-framework-cell { display: flex; flex-direction: column; gap: 3px; }
.signal-framework-cell span { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); }
.signal-framework-cell strong { font-family: 'JetBrains Mono', monospace; font-size: 14.5px; }
.signal-framework-cell small { font-size: 12px; color: var(--text-3); }
.signal-brief-body { margin-top: 16px; }
.signal-insider-line { font-size: 13.5px; color: var(--text-2); padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--border-hair); }
.signal-track-line { font-size: 12.5px; color: var(--text-2); margin-bottom: 12px; }
.signal-track-line strong { color: var(--green); font-weight: 700; }
.signal-track-line span { color: var(--text-3); }
.signal-thesis-block { margin-top: 12px; }
.signal-thesis-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.signal-thesis-block.signal-watch .signal-thesis-label { color: var(--amber); }
.signal-thesis-text { font-size: 14.5px; color: var(--text-2); margin-top: 6px; line-height: 1.6; }

/* Signal ledger detail: company name under the ticker, the entry -> target
   flow, allocation, and an expandable thesis. Colours are the existing tokens
   only, so both themes stay inside the audited contrast. */
table.filings .co { color: var(--text-3); font-size: 13px; margin-top: 2px; font-weight: 400; white-space: normal; max-width: 22ch; }
table.filings .flow { white-space: nowrap; }
.flow-arrow { color: var(--accent); margin: 0 7px; font-weight: 700; }
.flow-out.none { color: var(--text-3); }
.flow-note { font-size: 12px; color: var(--text-3); margin-top: 3px; white-space: nowrap; }
.flow-note.up { color: var(--green); }
table.filings .alloc { font-weight: 700; }
table.filings .why-cell { text-align: right; }
.why-none { color: var(--text-3); }
.why-toggle {
  font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  color: var(--accent); background: transparent; border: 1px solid var(--border);
  border-radius: 999px; padding: 4px 12px; white-space: nowrap; transition: border-color .15s, background .15s;
}
.why-toggle:hover { border-color: var(--accent); background: var(--surface-solid); }
.why-toggle::after { content: '▾'; margin-left: 6px; display: inline-block; transition: transform .15s; }
.why-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
table.filings tr.why-row > td { padding: 0 18px 18px; border-bottom: 1px solid var(--border-hair); }
table.filings tr.why-row:hover { background: none; }
/* The detail cell spans a table whose min-width is 740px, so an unconstrained
   paragraph inherits that width and has to be scrolled sideways to read on a
   phone. Capping against the viewport keeps the prose inside the visible area
   while 96ch still governs on desktop, where line length is the limit that
   matters. */
.why-block { max-width: min(96ch, calc(100vw - 96px)); margin-top: 12px; }
.why-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.why-block.watch .why-label { color: var(--amber); }
.why-block p { font-family: 'Inter', system-ui, sans-serif; font-size: 14px; color: var(--text-2); margin-top: 5px; line-height: 1.6; white-space: normal; }
.signal-sizing-note { font-size: 12px; color: var(--text-3); margin-top: 12px; line-height: 1.5; }

/* ------------------------------------------------------------
   compare grid
   ------------------------------------------------------------ */
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 720px) { .compare-grid { grid-template-columns: 1fr; } }
.compare-card { background: var(--surface); background-image: var(--glass-fill); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 28px; backdrop-filter: var(--glass-thin); -webkit-backdrop-filter: var(--glass-thin); box-shadow: var(--rim), var(--lift-1); }
.compare-card.highlight { border-color: var(--border-strong); background: var(--surface-2); background-image: linear-gradient(180deg, rgba(215,255,125,.06), transparent 60%), var(--glass-fill); box-shadow: var(--rim), var(--lift-2), var(--glow-accent); }
.compare-card h3 { font-family: 'Inter', -apple-system, sans-serif; font-size: 19px; margin-bottom: 16px; }
.compare-card ul { list-style: none; padding: 0; margin: 0; }
.compare-card li { padding: 9px 0; color: var(--text-2); font-size: 15px; border-top: 1px solid var(--border-hair); }
.compare-card li:first-child { border-top: none; }
.compare-card.highlight li { color: var(--text); }
.compare-card.highlight li::before { content: "\2713  "; color: var(--accent); font-weight: 700; }

/* ------------------------------------------------------------
   pricing
   ------------------------------------------------------------ */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 20px; max-width: 740px; margin: 0 auto; }
.price-card { background: var(--surface); background-image: var(--glass-fill); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 28px; position: relative; backdrop-filter: var(--glass-thin); -webkit-backdrop-filter: var(--glass-thin); box-shadow: var(--rim), var(--lift-1); }
.price-card.rec { border-color: var(--border-strong); box-shadow: var(--rim), var(--lift-1), var(--glow-accent); }
.price-card .rec-tag {
  position: absolute; top: -12px; right: 20px; background: linear-gradient(135deg, var(--accent), var(--green)); color: #04151a;
  font-size: 13px; font-weight: 700; padding: 4px 11px; border-radius: 999px;
}
.price-card h3 { font-family: 'Inter', -apple-system, sans-serif; font-size: 19px; }
.price-card .desc { color: var(--text-3); font-size: 14px; margin-top: 4px; }
.price-card .price { font-family: 'JetBrains Mono', monospace; font-size: 32px; font-weight: 700; margin-top: 18px; }
.price-card .price .per { font-size: 15px; color: var(--text-3); font-weight: 400; }
.price-card ul { list-style: none; padding: 0; margin: 20px 0 0; }
.price-card li { padding: 7px 0; font-size: 14.5px; color: var(--text-2); }
.price-card li::before { content: "\2713  "; color: var(--green); }
.coming-soon-tag {
  display: inline-block; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-3);
  font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  padding: 4px 10px; border-radius: 999px; margin-top: 16px;
}
.pricing-email-form { display: flex; gap: 8px; margin-top: 16px; }
.pricing-email-form input[type="email"] {
  flex: 1 1 auto; min-width: 0; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-sm, 10px); padding: 10px 12px; color: var(--text); font: inherit; font-size: 14px;
}
.pricing-email-form input[type="email"]:focus { border-color: var(--accent); outline: none; }
.pricing-email-form button { padding: 10px 18px; font-size: 14px; white-space: nowrap; }
@media (max-width: 420px) { .pricing-email-form { flex-direction: column; } }

/* ------------------------------------------------------------
   faq / ad / disclaimer / empty
   ------------------------------------------------------------ */
.faq-item { border-bottom: 1px solid var(--border-hair); padding: 20px 0; }
/* h3, not h4: these sit directly under the section's h2, and jumping a
   level breaks heading navigation for screen-reader users. Kept from the
   reverted redesign because it is an accessibility fix, not a style. */
.faq-item h3 { font-size: 16px; font-weight: 600; }
.faq-item p { color: var(--text-2); font-size: 15px; margin-top: 10px; line-height: 1.6; }

.ad-slot {
  border: 1px dashed var(--border); color: var(--text-3); font-size: 13.5px;
  text-align: center; padding: 36px 12px; margin: 8px 0 0; border-radius: var(--r-sm);
  text-transform: uppercase; letter-spacing: .06em;
}
/* Full-bleed strip directly under the nav, above all page content -- the
   one slot worth reserving space for on purpose, since it's the first
   thing a visitor sees. Distinct from the in-content .ad-slot boxes
   further down the page: no side margins/rounding, sits flush against
   the nav so it reads as one masthead rather than a floating box. */
.ad-slot-masthead {
  border: 0; border-bottom: 1px solid var(--border); border-radius: 0; margin: 0;
  padding: 18px 12px; min-height: 90px; background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  /* Sits directly in <body>, outside any .wrap, so it needs the same lift
     .wrap gets -- otherwise .bg-mesh (position:fixed, its own stacking
     context) paints over it. Same class of bug the contrast fix in #62
     found: content outside .wrap has no z-index and the mesh wins. */
  position: relative; z-index: 1;
}

.disclaimer-box {
  background: var(--red-dim); border: 1px solid rgba(255,92,114,.24);
  border-radius: var(--r-sm); padding: 16px 20px; font-size: 14.5px; color: var(--text-2); margin-top: 24px;
}
.disclaimer-box strong { color: var(--red); }

.empty { color: var(--text-3); padding: 26px; text-align: center; border: 1px dashed var(--border); border-radius: var(--r-md); font-size: 14.5px; }

.fade-in { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.fade-in.in-view { opacity: 1; transform: translateY(0); }

/* ------------------------------------------------------------
   footer
   ------------------------------------------------------------ */
footer { padding: 52px 0 60px; border-top: 1px solid var(--border-hair); position: relative; }
footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--border-strong) 40%, transparent 60%, transparent); }
.footer-grid { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 32px; }
.footer-col a { display: block; color: var(--text-3); text-decoration: none; font-size: 14.5px; margin-bottom: 9px; transition: color .15s; }
.footer-col a:hover { color: var(--text); }
.footer-note { color: var(--text-3); font-size: 13.5px; margin-top: 42px; max-width: 660px; line-height: 1.6; }

/* ------------------------------------------------------------
   generic stat grid (track-record / leaderboard pages)
   ------------------------------------------------------------ */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 16px; }
.stat { background: var(--surface); background-image: var(--glass-fill); border: 1px solid var(--border); border-radius: var(--r-md); padding: 20px; backdrop-filter: var(--glass-thin); -webkit-backdrop-filter: var(--glass-thin); box-shadow: var(--rim), var(--lift-1); transition: border-color .2s, transform .2s, box-shadow .2s; }
.stat:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.stat .n { font-family: 'JetBrains Mono', monospace; font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat .l { color: var(--text-3); font-size: 13px; text-transform: uppercase; letter-spacing: .05em; margin-top: 6px; }

@media (prefers-reduced-motion: reduce) {
  .bg-mesh span, .ticker-track, .status-dot, .live-watch-dot,
  .hero .eyebrow, .hero h1, .hero p, .hero .ctas, .hero h1 .grad {
    animation: none;
  }
  .trade-card, .compare-card, .price-card, .signal-brief-card, .market-snapshot-card, .stat, .cta, .fade-in {
    transition: none;
  }
  .trade-card:hover, .compare-card:hover, .price-card:hover,
  .signal-brief-card:hover, .market-snapshot-card:hover, .stat:hover, .cta:hover { transform: none; }
  .fade-in { opacity: 1; transform: none; }
}

/* ── per-company pages (/stocks and /stocks/<TICKER>) ───────────── */
.ticker-search-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.ticker-search {
  flex: 1 1 280px;
  min-width: 0;
  padding: 11px 15px;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm, 12px);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.ticker-search::placeholder { color: var(--text-3); }
.ticker-search:focus {
  outline: none;
  border-color: var(--border-strong);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.ticker-search-count { font-size: 13px; color: var(--text-2); white-space: nowrap; }

/* ── insider screener (/screener) ───────────────────────────────── */
.screener-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px 14px;
  align-items: end;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-md, 14px);
  background: var(--surface);
  margin-bottom: 16px;
}
.screener-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.screener-field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: .01em;
}
.screener-field select {
  width: 100%;
  padding: 9px 11px;
  font: inherit;
  font-size: 13.5px;
  color: var(--text);
  background: var(--surface-solid, var(--surface-2));
  border: 1px solid var(--border);
  border-radius: var(--r-sm, 10px);
}
.screener-field select:focus {
  outline: none;
  border-color: var(--border-strong);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.screener-actions { display: flex; gap: 8px; align-items: center; }
.screener-actions .cta { padding: 9px 18px; font-size: 13.5px; }
.screener-count { font-size: 13.5px; color: var(--text-2); margin: 0 0 12px; }

/* ── legal documents (/terms, /privacy, /disclaimer) ────────────────
   These are meant to be read end to end, not skimmed, so the body runs
   larger and looser than the rest of the site: 17px on a ~68-character
   measure. Dense 14px grey is how terms go unread. */
.legal-doc {
  /* 680px at 17px lands near 75 characters per line. Wider reads as a wall:
     the eye loses its place returning to the next line. */
  max-width: 680px;
  font-size: 17px;
  line-height: 1.75;
  color: var(--text);
}
.legal-doc .legal-meta {
  font-size: 14.5px;
  color: var(--text-2);
  padding-bottom: 18px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--border);
}
.legal-doc .legal-toc {
  padding: 18px 22px;
  margin-bottom: 34px;
  border: 1px solid var(--border);
  border-radius: var(--r-md, 14px);
  background: var(--surface);
}
.legal-doc .legal-toc h2 {
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-2);
  margin: 0 0 10px;
}
.legal-doc .legal-toc ol { margin: 0; padding-left: 22px; }
.legal-doc .legal-toc li { font-size: 15.5px; line-height: 1.65; }
.legal-doc .legal-toc a { color: var(--accent); text-decoration: none; }
.legal-doc .legal-toc a:hover { text-decoration: underline; }
.legal-doc h2 {
  font-size: 23px;
  line-height: 1.3;
  margin: 40px 0 14px;
  scroll-margin-top: 90px;
}
.legal-doc h3 { font-size: 17.5px; margin: 26px 0 10px; }
.legal-doc p { margin: 0 0 16px; }
.legal-doc ul, .legal-doc ol { margin: 0 0 16px; padding-left: 26px; }
.legal-doc li { margin-bottom: 9px; }
.legal-doc strong { color: var(--text); font-weight: 700; }
.legal-doc a { color: var(--accent); }
.legal-doc .legal-callout {
  padding: 16px 20px;
  margin: 0 0 22px;
  border: 1px solid var(--border-strong);
  border-left-width: 3px;
  border-radius: var(--r-sm, 10px);
  background: var(--surface);
  font-size: 16.5px;
}
.legal-doc .legal-callout strong { display: block; margin-bottom: 5px; }
@media (max-width: 620px) {
  .legal-doc { font-size: 16.5px; }
  .legal-doc h2 { font-size: 21px; }
}
.screener-tic {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  text-decoration: none;
  color: var(--accent);
}
.screener-tic:hover { text-decoration: underline; }
@media (max-width: 620px) {
  .screener-form { grid-template-columns: 1fr 1fr; }
  .screener-actions { grid-column: 1 / -1; }
}

.ticker-index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}
.ticker-index-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 16px;
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: var(--r-md, 14px);
  background: var(--surface);
  transition: border-color .2s ease, transform .2s ease;
}
.ticker-index-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}
.ticker-index-card .tic-sym {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
}
.ticker-index-card .tic-co {
  font-size: 12.5px;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ticker-index-card .tic-meta { font-size: 12px; color: var(--text-3); }

/* The insider-flow badge gets its own colours rather than reusing
   .ytd-status. Those tokens are tuned for the win/loss pills on their own
   backgrounds and land at 4.29:1 here, just under the 4.5:1 AA floor. */
.flow-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
}
.flow-buy   { color: #05603a; background: rgba(6,122,86,.12);  border-color: rgba(6,122,86,.28); }
.flow-sell  { color: #a11d33; background: rgba(189,41,66,.10); border-color: rgba(189,41,66,.26); }
.flow-mixed { color: var(--text-2); background: var(--surface-2); border-color: var(--border); }
:root[data-theme="dark"] .flow-buy   { color: #6fe3b4; background: rgba(111,227,180,.10); border-color: rgba(111,227,180,.24); }
:root[data-theme="dark"] .flow-sell  { color: #ff9aa8; background: rgba(255,154,168,.10); border-color: rgba(255,154,168,.24); }
@media (max-width: 620px) {
  .ticker-index-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ------------------------------------------------------------
   Phone layout for the two data tables
   ------------------------------------------------------------
   Both tables carried a min-width larger than a phone viewport and sat in
   an overflow:auto box, so they scrolled sideways. Measured at 375px before
   this: the signal table was 989px wide in a 325px container -- 664px of it
   off-screen -- leaving Ticker and Insider visible while Rating, Entry and
   Target, Alloc, Amount and Thesis were all hidden. The ledger table hid
   Source, Status and Return the same way. Everything that makes a row a
   SIGNAL was behind a horizontal scroll nobody discovers.

   So below 640px each row becomes a card instead. thead is dropped and each
   cell labels itself from data-label, which is why those attributes exist in
   the markup. No horizontal scrolling, and a first-time visitor sees a whole
   row at once. */
@media (max-width: 640px) {
  .filings-table-wrap, .ytd-ledger-scroll, .scan-table-wrap {
    overflow: visible;            /* the sideways scroll is what hid the data */
    max-height: none;
    border: 0;
    background: none;
  }
  table.filings, .ytd-ledger-table, table.scan {
    min-width: 0;                 /* the actual cause of the overflow */
    width: 100%;
    display: block;
    font-size: 13.5px;
  }
  table.filings thead, .ytd-ledger-table thead, table.scan thead { display: none; }
  table.filings tbody, .ytd-ledger-table tbody, table.scan tbody { display: block; }

  table.filings tbody tr, .ytd-ledger-table tbody tr, table.scan tbody tr {
    display: block;
    border: 1px solid var(--border);
    border-radius: var(--r-md, 14px);
    background: var(--surface);
    padding: 12px 14px;
    margin-bottom: 10px;
  }
  table.filings tbody td, .ytd-ledger-table tbody td, table.scan tbody td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 5px 0;
    border: 0;
    text-align: left;
  }
  table.filings tbody td::before, .ytd-ledger-table tbody td::before,
  table.scan tbody td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    color: var(--text-3);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-family: 'Inter', sans-serif;
  }
  /* Ticker leads the card: no label, full width, larger. */
  table.filings tbody td.tk, .ytd-ledger-table tbody td.trade-symbol,
  table.scan tbody td.scan-lead {
    display: block;
    font-size: 16px;
    font-weight: 700;
    padding-bottom: 8px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--border-hair);
  }
  table.filings tbody td.tk::before,
  .ytd-ledger-table tbody td.trade-symbol::before,
  table.scan tbody td.scan-lead::before { content: none; }
  /* The scanner's Trade date column comes first in the markup because that
     is the table's sort order, but in a card the ticker is the identity and
     belongs at the top. Reordering visually rather than in the markup keeps
     the table's column order intact for everyone above this breakpoint. */
  table.scan tbody tr { display: flex; flex-direction: column; }
  table.scan tbody td.scan-lead { order: -1; }

  /* The scanner's right-aligned numerics fight the flex label layout. */
  table.scan tbody td.num { text-align: right; }
  table.scan tbody td.scan-lead .scan-co { max-width: none; margin-top: 3px; }
  table.scan tbody tr { cursor: pointer; }
  table.filings tbody td.tk .co { font-size: 12.5px; font-weight: 400; color: var(--text-3); }

  /* Entry -> Target holds a nowrap "+10.1% target" note that cannot compress
     inside a flex row: measured overhanging the card by up to 64px, clipped
     out of sight by body overflow-x. Stack it under its label instead, where
     it has the full card width. */
  table.filings tbody td.flow { display: block; }
  table.filings tbody td.flow::before { display: block; margin-bottom: 3px; }
  table.filings tbody td.flow .flow-note { white-space: normal; }

  /* Thesis is prose, so it stacks under its label rather than beside it. */
  table.filings tbody td.why-cell {
    display: block;
    padding-top: 8px;
  }
  table.filings tbody td.why-cell::before { display: block; margin-bottom: 4px; }
  table.filings tbody tr.why-row { padding: 0; border: 0; background: none; margin: 0; }
  table.filings tbody tr.why-row td { display: block; padding: 0; }
  table.filings tbody tr.why-row td::before { content: none; }

  /* An earlier fix added a "Swipe to see more columns" hint on this wrapper --
     a signpost for the problem rather than a fix for it. With cards there is
     nothing to swipe, so the hint would now be actively wrong. */
  .filings-table-wrap::before { content: none; display: none; }

  .ytd-trade-return { text-align: right; }
  .filings-empty-row td, table.filings tbody td[colspan] { display: block; }
  table.filings tbody td[colspan]::before { content: none; }
}