@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"] {
  /* Neutral, not blue-tinted, and flat: light paints no aurora and no mesh
     (see the body::before / .bg-mesh rules below), so text sits on the ground
     itself. Cards are pure white and separate from it by their border plus
     --lift-1, not by fill contrast -- #fff on #f7f8fa is only 1.04:1, and the
     border is what a reader actually sees. */
  --void: #f2f3f5;
  --bg: #f7f8fa;
  --bg-elevated: #ffffff;
  --surface: rgba(255, 255, 255, 0.6);
  --surface-solid: #ffffff;
  --surface-2: rgba(238, 239, 242, 0.92);
  --surface-3: #e8e9ed;
  --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 is flat on purpose. It used to stack three decorative layers on the
   ground -- an aurora of three radial washes here, the blurred blob mesh, and
   a grid -- and the cost was not just the look. Every light foreground had to
   be solved against the worst tint those layers could produce, which left
   --b, --violet, --green and --accent at 4.54-4.56:1 against a 4.5 floor:
   passing, with nothing spare. Removing them takes the backdrop count from 96
   to a handful and hands that headroom back.

   Dark keeps all three; every rule here is light-scoped. */
:root[data-theme="light"] body::before { background: var(--bg); }
:root[data-theme="light"] body::after { background-image: none; }
:root[data-theme="light"] .bg-mesh { display: none; }
@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: 12px 22px; min-height: 44px; justify-content: center;
  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; }

/* The paywall page. Deliberately restrained: it is explaining a boundary,
   not running a promotion. */
.gate-section { padding: 72px 0 96px; }
.gate-wrap { max-width: 620px; }
.gate-wrap h1 { font-size: clamp(26px, 4vw, 36px); margin: 10px 0 0; line-height: 1.2; }
.gate-lede { font-size: 16px; color: var(--text-2); line-height: 1.65; margin: 14px 0 0; }
.gate-list { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; }
.gate-list li {
  position: relative; padding: 11px 0 11px 26px; font-size: 14.5px; color: var(--text-2);
  border-top: 1px solid var(--border-hair);
}
.gate-list li::before {
  content: ""; position: absolute; left: 4px; top: 18px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.gate-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.gate-fine { font-size: 12.5px; color: var(--text-3); line-height: 1.6; margin: 16px 0 0; }

/* Market insights. Cards over the raw Form 4 feed, so the section has
   something to say on the days the scored basket is empty. */
#market-insights { padding: 56px 0; }
.insight-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.insight-card {
  background: var(--surface); background-image: var(--glass-fill);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 22px; box-shadow: var(--rim), var(--lift-1);
}
.insight-card.wide { grid-column: 1 / -1; }
/* Two columns, not three-with-a-hole. The cluster card is the substantial one
   so it takes the wider column and both rows; the two smaller cards stack
   beside it rather than one wrapping underneath and leaving a gap. */
@media (min-width: 981px) {
  .insight-grid { grid-template-columns: 1.6fr 1fr; align-items: start; }
  .insight-card.wide { grid-column: 1; grid-row: span 2; }
}
.insight-kicker {
  font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-3);
}
.insight-card h3 { font-family: 'Inter', -apple-system, sans-serif; font-size: 19px; margin: 8px 0 0; line-height: 1.35; }
.insight-note { font-size: 12.5px; color: var(--text-3); line-height: 1.6; margin: 12px 0 0; }
.insight-rows { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; }
.insight-rows li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 8px 0; border-top: 1px solid var(--border-hair); font-size: 13.5px; color: var(--text-2);
}
.insight-rows strong { font-family: 'JetBrains Mono', monospace; color: var(--text); }

.cluster-list { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 2px; }
.cluster-list li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px;
  padding: 12px 0; border-top: 1px solid var(--border-hair);
}
/* min-WIDTH as well as min-height: a short ticker like $LIEN measured 42px
   across, which clears the height rule and still misses the 44px target. */
.cluster-ticker {
  font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--text);
  font-size: 14.5px; min-height: 44px; min-width: 44px;
  display: inline-flex; align-items: center;
}
.cluster-company { font-size: 13.5px; color: var(--text-2); align-self: center; min-width: 0; }
.cluster-stat { grid-column: 2; font-size: 12.5px; color: var(--text-3); }
.cluster-names { grid-column: 2; font-size: 12px; color: var(--text-3); line-height: 1.5; }

/* Scoring breakdown. The point of the layout is that the reading and the
   threshold sit next to each other, so the letter grade is checkable rather
   than something to take on trust. */
.case-evidence { margin: 14px 0 0; }
.case-evidence-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.evidence-pill {
  font-size: 12px; font-weight: 700; letter-spacing: .03em; padding: 4px 10px;
  border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-2);
}
.evidence-pill.strong { color: var(--green); border-color: color-mix(in srgb, var(--green) 45%, transparent); }
.evidence-pill.moderate { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 45%, transparent); }
.case-evidence-count { font-size: 12.5px; color: var(--text-3); }
.factor-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
/* Two columns, always. This row sits inside a ~345px grid column on a
   1512px screen, so a viewport media query is the wrong instrument -- it
   answers a question about the window, not about the box the row is in. The
   label and its reading share a wrapping flex line instead, which is correct
   at any container width without asking. */
.factor-list li {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 3px 10px;
  padding: 9px 0; border-top: 1px solid var(--border-hair);
}
.factor-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; justify-content: space-between; }
.factor-mark { color: var(--text-3); font-size: 13px; line-height: 1.4; }
.factor-list li.met .factor-mark { color: var(--green); }
.factor-label { font-size: 13.5px; font-weight: 600; color: var(--text); }
.factor-list li.unmet .factor-label, .factor-list li.unavailable .factor-label { color: var(--text-2); font-weight: 500; }
.factor-reading { font-size: 13px; color: var(--text-2); }
/* The threshold sits under the row: it is the sentence that makes the row
   auditable, and truncating it would defeat the purpose. */
.factor-rule { grid-column: 2; font-size: 12px; color: var(--text-3); line-height: 1.5; }

/* The published test parameters, collapsed. Present because the track record
   is computed from them; collapsed because they are not instructions. */
.case-measure { margin-top: 14px; border-top: 1px solid var(--border-hair); padding-top: 12px; }
.case-measure > summary {
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-2);
  min-height: 44px; display: flex; align-items: center;
}
.case-measure > summary:hover { color: var(--text); }
.case-measure-note { font-size: 12.5px; color: var(--text-3); line-height: 1.6; margin: 2px 0 12px; }
.case-measure-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; }
.case-measure-grid div { display: flex; flex-direction: column; gap: 3px; }
.case-measure-grid span { font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.case-measure-grid strong { font-size: 14px; color: var(--text-2); font-weight: 600; }

.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; min-height: 44px; }
.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-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; }
/* Panel-only furniture. Present in the markup at every width, shown only
   inside the slide-out, so the desktop bar is untouched by any of it. */
.nav-panel-head, .nav-panel-foot, .nav-subhead, .nav-panel-tools { display: none; }
/* The row icons are panel furniture too, and they need the display:none HERE
   rather than only a size inside the panel's media query. An <svg> with no
   width and no height does not collapse -- it lays out at its default
   intrinsic size, which on the desktop bar meant six 150px icons shoving the
   nav items across the wordmark. Sizing them inside the mobile block is not
   the same as hiding them outside it. */
.nav-ico { 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 used to be hidden between 981px and 1340px as well, on the
   grounds that Companies in the menu did the same job. Companies is gone, and
   the panel search only appears below 980px, so hiding it here would leave
   981-1340px with no route to the company index at all. The bar can afford it
   now: it carries four items and a menu, not fifteen. */
/* 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); }
/* The account control, collapsed. Replaces Messages + avatar + username,
   which cost about 200px of a bar that did not have it. */
.nav-account-group { flex-shrink: 0; }
.nav-account-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px 4px 4px; border-radius: 999px; cursor: pointer;
  background: none; border: 1px solid transparent; color: var(--text-3);
  font: inherit; min-height: 40px;
  transition: border-color .15s, background .15s, color .15s;
}
.nav-account-toggle:hover, .nav-account-group:focus-within .nav-account-toggle {
  color: var(--text); background: var(--surface-2); border-color: var(--border);
}
.nav-account-face { position: relative; display: inline-flex; }
.nav-account-face img {
  width: 30px; height: 30px; border-radius: 50%; display: block;
  border: 1px solid var(--border-strong);
}
/* Unread collapses to a dot in the bar. The count itself is still announced
   from the sr-only text in the button, because a coloured dot is nothing at
   all to a screen reader. */
.nav-account-dot {
  position: absolute; top: -1px; right: -1px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--accent);
  border: 2px solid var(--bg-elevated, var(--surface));
}
/* Right-anchored: the account menu sits at the end of the bar, so opening it
   from the left would push it off-screen. */
.nav-menu-end { left: auto; right: 0; min-width: 258px; }
.nav-account-head {
  padding: 8px 12px 10px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border-hair);
  display: flex; flex-direction: column; gap: 2px;
}
.nav-account-head b { font-size: 14.5px; color: var(--text); }
.nav-account-head span { font-size: 12.5px; color: var(--text-3); }
.nav-menu-form { margin: 4px 0 0; padding-top: 4px; border-top: 1px solid var(--border-hair); }
.nav-menu-form button {
  width: 100%; text-align: left; font: inherit; cursor: pointer;
  background: none; border: 0; padding: 9px 12px; border-radius: var(--r-xs, 8px);
}
.nav-menu-form button:hover { background: var(--surface-2); }
.nav-menu-form button b { font-size: 14.5px; font-weight: 600; color: var(--text); }

/* The panel's own account row, shown only inside the mobile slide-out (see
   the max-width:980px block below) once the bar's account menu is 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) {

  /* 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; }
  /* The account menu goes with the rest of the bar: the panel carries its
     own account row and sign-out, so keeping a second one here would put two
     copies of the same thing on screen at once. */
  .nav-account-group { display: none; }
  /* The mobile bar has a HARD width budget, and it was over it. Measured on
     the live site: the wordmark (107px) plus Log in, Sign up free, EN and the
     theme toggle (300px together) needed 449px in a 390px viewport, and the
     hamburger is the last child -- so the hamburger was what got pushed out.
     body has overflow-x: hidden, so it was clipped in silence: no scrollbar,
     nothing to drag, the button simply absent. A signed-out visitor's entire
     navigation on a phone was "Log in" and "Sign up free".

     These three are hidden because they are ELSEWHERE, not because they do
     not matter -- Log in is in .nav-panel-foot and both of the others are in
     .nav-panel-tools. Anything added to .nav-pinned in future has to earn its
     width here too, because exceeding the budget deletes the last child
     rather than wrapping or scrolling. */
  .nav-waitlist, .lang-switch, .theme-toggle { display: none; }

  /* Language and theme, rehomed. A row rather than a dropdown: inside a
     full-height panel there is room to just list the languages, which means
     no JavaScript and one less thing to keep working. */
  .nav-panel-tools {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-hair);
  }
  .nav-tool-btn {
    display: inline-flex; align-items: center; gap: 9px;
    min-height: 44px; padding: 0 14px 0 12px; border-radius: 999px;
    font: inherit; font-size: 14.5px; color: var(--text-2); cursor: pointer;
    background: var(--surface-2); border: 1px solid var(--border);
  }
  .nav-tool-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
  .nav-panel-langs { display: flex; align-items: center; gap: 6px; }
  .nav-panel-langs a {
    min-width: 44px; min-height: 44px; padding: 0 10px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: .04em;
    color: var(--text-3); border: 1px solid var(--border); background: var(--surface-2);
  }
  .nav-panel-langs a.on { color: var(--text); border-color: var(--border-strong); }

  /* Close control, matching the reference's header. aria-expanded stays on
     the hamburger alone -- two elements advertising the same state is two
     things to keep in sync, and one of them will drift. */
  .nav-panel-close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
    background: none; border: 1px solid var(--border); color: var(--text-2);
    font: inherit; cursor: pointer;
  }
  .nav-panel-close svg { width: 17px; height: 17px; }
  /* One close control, not two. The hamburger already rotates its bars into
     an X while open (.nav-hamburger[aria-expanded="true"]), and it paints
     above the panel -- so adding the reference's header X gave the menu two
     X buttons, one floating above the other. The panel's own is the one that
     matches the reference, sitting on the brand row, so the bar's is hidden
     for as long as the panel is open.

     Safe with JavaScript off: the panel cannot open at all without it, so
     body.nav-locked never applies and the hamburger is never hidden. Focus
     returns to it on close, by which point closeMenu() has already removed
     the class and made it visible again. */
  body.nav-locked .nav-hamburger { 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);
  }
  /* Both rows measured under the 44px minimum the rest of this panel meets
     -- 32px and 22px -- because their height came from their content rather
     than from a stated target size. */
  .nav-mobile-account-link {
    display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
    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 {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px;
    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;
    /* The desktop rule above sets margin-left: 22px to space the links from
       the brand. On a full-screen overlay that is not spacing, it is 22px of
       the panel missing -- and it was, measured at width 368 in a 390 viewport. */
    margin-left: 0;
    flex-direction: column; align-items: stretch; gap: 2px; padding: 18px 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; }
  /* Reference layout: a header row inside the overlay carrying the brand and
     a Sign Up pill, labelled sections, and sign-in at the bottom rather than
     buried at the top. */
  .nav-panel-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 0 4px 20px; margin-bottom: 6px; border-bottom: 1px solid var(--border-hair);
  }
  .nav-panel-brand { font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: var(--text); }
  .nav-panel-cta { min-height: 44px; display: inline-flex; align-items: center; }
  .nav-panel-head-end { display: inline-flex; align-items: center; gap: 10px; }

  .nav-subhead {
    display: block; padding: 20px 4px 6px; font-size: 12px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: var(--text-3);
  }

  .nav-panel-foot {
    display: flex; flex-direction: column; gap: 2px;
    margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border-hair);
  }
  .nav-panel-foot a {
    min-height: 44px; display: flex; align-items: center;
    padding: 11px 4px; font-size: 15px; color: var(--text-2);
  }

  /* Icon + label rows. The icon is decorative -- the label is the accessible
     name -- so it is aria-hidden and never the only thing carrying meaning. */
  /* flex-direction: row is load-bearing. The dropdown's base rule stacks the
     title over its description in a column, so simply saying display:flex here
     left every More item with its icon centred ABOVE a centred label and the
     row 84px tall. */
  .nav-links > a, .nav-menu a {
    display: flex; flex-direction: row; align-items: center; gap: 12px;
  }
  .nav-ico { display: block; width: 20px; height: 20px; flex-shrink: 0; color: var(--text-3); }

  body.nav-locked { overflow: hidden; }

  /* THE reason the panel was clipped. A non-none backdrop-filter makes an
     element a containing block for its position:fixed descendants, so the
     panel's `left: 0` resolved against <nav> -- which the centred .wrap
     insets -- instead of the viewport. Measured: left -37 in a 390 viewport,
     which cut the first character off every row ("verview", "sider Activity",
     "esearch Cases") on every page, on every phone.

     There is a comment further up noting that overflow-x:hidden on body does
     not capture fixed descendants because they resolve against the initial
     containing block. True -- but only while no ancestor establishes one of
     its own, and this one did.

     Suppressed only while the menu is open, when the panel covers the screen
     and the blur cannot be seen anyway. If the panel is ever moved out of
     <nav> in the markup this rule stops being necessary rather than becoming
     wrong. */
  body.nav-locked nav { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* 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 { 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; }
}
/* .nav-waitlist gets the same treatment, but ONLY in the band where the bar
   actually shows it -- which is why it is a separate block rather than one
   more line above.

   Media queries add no specificity and this section sits at the end of
   BASE_CSS deliberately, so an unscoped `display: inline-flex` here beat
   every earlier `display: none` and resurrected the control at widths that
   had hidden it. A `max-width: 640px` rule had therefore never worked at all,
   silently, for as long as both existed. An inline <a> ignores min-height, so
   the display cannot simply be dropped; scoping the block is what lets the
   touch minimum and the hide both be true. */
@media (min-width: 981px) and (max-width: 1340px) {
  .nav-waitlist { 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; }
/* Not flex. Each item is "<b>A watchlist</b> - follow companies ...", and
   under display:flex the <b> and the sentence after it became SEPARATE flex
   items -- so every bullet rendered as two columns, with the bold term stacked
   in a narrow left column and its own sentence beside it. An absolutely
   positioned dot keeps the whole item one line box, so it reads as a sentence
   and wraps like one. top is (line box 13px x 1.55 = 20.15, minus the 5px
   dot) / 2, so the dot sits on the first line however far the text wraps. */
.auth-benefits li { position: relative; padding-left: 13px; font-size: 13px; color: var(--text-3); line-height: 1.55; }
.auth-benefits li::before { content: ''; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.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(--blue); }
.cg-kpi-v.rep { color: var(--red); }
.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(--blue); border-color: var(--blue); background: var(--blue-dim); }
.cg-avatar.rep { color: var(--red); border-color: var(--red); background: var(--red-dim); }
.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%; } }

/* Light theme. These must sit after the rules above -- same specificity, so
   source order is what decides, and this file has already been bitten twice
   by an override written before the rule it was meant to beat.

   Two of them are corrections, not taste. .cg-chip.on painted --surface-solid
   (#f6f8fc) on a --surface-2 track (#dde4f0): 1.20:1, so which filter was
   active was invisible in light. The cards were 1.12:1 against the page and
   had no shadow, so they did not read as cards at all. White alone only gets
   that to 1.19:1 -- the separation here comes from the border and --lift-1,
   not from the fill. */
:root[data-theme="light"] .cg-kpi,
:root[data-theme="light"] .cg-card { background: #fff; box-shadow: var(--lift-1); }
/* --rim is a white inner bevel in light; on a near-black pill it reads as a
   scratch, so this drops it rather than inheriting it. 18.29:1. */
:root[data-theme="light"] .cg-chip.on { background: var(--text); color: #fff; box-shadow: var(--lift-1); }
:root[data-theme="light"] .cg-sort,
:root[data-theme="light"] .cg-search { background: #fff; }
:root[data-theme="light"] .cg-avatar { background: #fff; }
:root[data-theme="light"] .cg-avatar.dem { background: var(--blue-dim); }
:root[data-theme="light"] .cg-avatar.rep { background: var(--red-dim); }

/* Touch targets, same rule and same breakpoint as the nav's (see the block
   above .nav-hamburger): bumped only where touch is likely, desktop pointer
   sizing left alone.

   These controls were written after that block and target their own classes,
   so nothing was covering them. Measured at 390px: the chips came in at
   36px tall and the D and R chips at 37px WIDE -- undersized on both axes,
   which is why min-width is here too and not just min-height. The two chip
   groups sit side by side, so a miss on one group's edge lands in the other.

   Must stay after the .cg-chip/.cg-sort/.cg-search rules above: a media
   query adds no specificity, so source order is the only thing deciding
   this. */
@media (max-width: 1340px) {
  .cg-chip { min-height: 44px; min-width: 44px; }
  .cg-sort, .cg-search { min-height: 44px; }
}

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

/* Concentration. Two segments of ONE measure, so the encoding is one hue at
   two strengths rather than two categorical colours -- and identity is carried
   by direct labels and a table, never by colour alone. */
.conc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 26px; margin-top: 4px; }
.conc-side { margin: 0; }
.conc-side figcaption { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.conc-label { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.conc-side figcaption b { font-size: clamp(20px, 3.6vw, 26px); font-variant-numeric: tabular-nums; }
.conc-sub { font-size: 12.5px; color: var(--text-3); }
.conc-bar { display: block; width: 100%; height: 26px; }
.conc-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 12.5px; color: var(--text-3); }
.conc-legend b { color: var(--text-2); font-variant-numeric: tabular-nums; }
.conc-key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; vertical-align: -1px; }
.conc-key.buy { background: var(--green); }
.conc-key.sell { background: var(--red); }
.conc-key.faint { opacity: .22; }
.conc-read { font-size: 13px; color: var(--text-2); line-height: 1.6; margin: 10px 0 0; }
.conc-read strong { color: var(--text-1); }
.conc-table { margin-top: 10px; }
.conc-table > summary { cursor: pointer; list-style: none; font-size: 12.5px; color: var(--accent);
  font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; }
.conc-table > summary::-webkit-details-marker { display: none; }
.conc-table table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.conc-table th, .conc-table td { text-align: left; padding: 6px 8px 6px 0; border-bottom: 1px solid var(--border-hair); }
.conc-table td:nth-child(2), .conc-table td:nth-child(3) { text-align: right; font-variant-numeric: tabular-nums; }
.conc-foot { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px;
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border-hair); }
.conc-foot-item { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--text-3); line-height: 1.55; }
.conc-foot-n { font-size: 22px; font-weight: 700; color: var(--text-1); font-variant-numeric: tabular-nums; }

/* Form 4 code scope. Kept codes are marked with a rule, not with colour alone. */
.code-list { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.code-list > div { border-left: 2px solid var(--border); padding-left: 14px; }
.code-list > div.kept { border-left-color: var(--green); }
.code-list dt { font-size: 13.5px; font-weight: 600; }
.code-list dt code { display: inline-block; min-width: 20px; padding: 1px 5px; margin-right: 6px;
  border-radius: 4px; background: var(--surface-2); border: 1px solid var(--border);
  font-size: 12px; text-align: center; }
.code-list dd { margin: 4px 0 0; font-size: 12.5px; color: var(--text-3); line-height: 1.55; }
.code-list dd b { color: var(--text-2); }

/* Compliance notice. Legible, not decorative, and never dismissible. */
.scenario-note { font-size: 12px; color: var(--text-3); line-height: 1.55; margin: 8px 0 0; }

/* Insider analysis activity. A research log, not a notification stream:
   compact rows, no animation, no pulsing dots, nothing that implies live. */
.act-panel { border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); padding: 22px; margin-bottom: 22px; }
.act-head { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: baseline;
  justify-content: space-between; margin-bottom: 16px; }
.act-head h2 { margin: 0; font-size: clamp(17px, 3.2vw, 21px); }
.act-sub { margin: 4px 0 0; font-size: 12.5px; color: var(--text-3); }
.act-stamp { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.act-stamp.stale { color: var(--amber); }
.act-warn { font-size: 12.5px; color: var(--text-2); background: var(--surface-2);
  border-left: 3px solid var(--amber); border-radius: var(--r-md);
  padding: 10px 13px; margin: 0 0 16px; line-height: 1.55; }
.act-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.act-item { border: 1px solid var(--border); border-left: 3px solid var(--border);
  border-radius: var(--r-md); padding: 13px 15px; background: var(--surface-2); }
.act-item.buy, .act-item.cluster { border-left-color: var(--green); }
.act-item.sell { border-left-color: var(--red); }
.act-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.act-tag { font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; border: 1px solid var(--border);
  color: var(--text-3); white-space: nowrap; }
.act-tag.buy, .act-tag.cluster { color: var(--green); border-color: var(--green); }
.act-tag.sell { color: var(--red); border-color: var(--red); }
.act-ticker { font-weight: 700; color: var(--accent); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px; }
.act-co { color: var(--text-3); font-size: 13px; min-width: 0; }
.act-who { margin-top: 2px; font-size: 13.5px; }
.act-who span { color: var(--text-3); font-size: 12.5px; }
.act-who strong::after { content: ""; }
.act-facts { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 9px 0 0; }
.act-facts > div { display: flex; flex-direction: column; }
.act-facts dt { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.act-facts dd { margin: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.act-why { font-size: 12.5px; color: var(--text-3); line-height: 1.55; margin: 10px 0 0; }
.act-why span { display: block; font-size: 10.5px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 2px; }
.act-go { display: inline-flex; align-items: center; min-height: 44px;
  font-size: 12.5px; font-weight: 600; color: var(--accent); text-decoration: none; }
.act-go:hover { text-decoration: underline; }
.act-foot { font-size: 12px; color: var(--text-3); margin: 14px 0 0; }
@media (max-width: 620px) { .act-panel { padding: 16px; } }

/* The reasoning row. Always on screen, clamped to two lines, expanding in
   place -- it used to be a button called "Why" at the far right of a table
   that scrolled sideways, so the most valuable column was the one a reader
   had to go hunting for. */
.why-lead > td { padding-top: 0 !important; padding-bottom: 0 !important; border-top: 0 !important; }
.why-toggle {
  display: flex; align-items: flex-start; gap: 14px; width: 100%;
  background: none; border: 0; padding: 0 0 12px; margin: 0; cursor: pointer;
  text-align: left; color: var(--text-3); font: inherit; font-size: 12.5px; line-height: 1.55;
}
.why-gist {
  flex: 1 1 auto; min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.why-more { flex: 0 0 auto; color: var(--accent); font-weight: 600; font-size: 12px; white-space: nowrap; }
.why-toggle[aria-expanded="true"] .why-gist { -webkit-line-clamp: unset; }
.why-toggle:hover .why-more { text-decoration: underline; }
.why-params { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 20px; margin: 8px 0 0; }
.why-params > div { display: flex; flex-direction: column; gap: 2px; }
.why-params dt { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.why-params dd { margin: 0; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.why-params-note { font-size: 11.5px; color: var(--text-3); line-height: 1.5; margin: 10px 0 0; }

/* The evaluation parameters, shown at size above the reasoning. A wrapping
   flex strip rather than table columns: it costs no horizontal space, so it
   cannot push the reasoning off the right edge the way the old nine-column
   table did. */
.sig-params {
  display: flex; flex-wrap: wrap; gap: 6px 28px;
  padding: 10px 0 2px; margin: 0;
}
.sig-param { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sig-param-k {
  font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-3); white-space: nowrap;
}
.sig-param-v {
  font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--text-1, var(--text-2)); line-height: 1.25;
}
/* The percentage rides with the price it is derived from, at a size that
   reads as secondary to it rather than as a second headline. */
.sig-param-v small {
  font-size: 12.5px; font-weight: 500; color: var(--text-3); margin-left: 6px;
}
/* Where in the 52-week range the purchase sat. One mark on one axis, so the
   label carries the number and no legend is needed; the track is recessive
   and the dot is 9px, above the 8px marker floor. */
.sig-param-range { flex: 1 1 190px; max-width: 260px; justify-content: flex-end; }
.sig-range {
  position: relative; display: block; height: 4px; border-radius: 999px;
  background: var(--border, rgba(255,255,255,.14)); margin-top: 9px;
}
.sig-range-dot {
  position: absolute; top: 50%; width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent); transform: translate(-50%, -50%);
  /* 2px ring in the surface colour so the dot stays legible at either end,
     where it overlaps the track's rounded cap. */
  box-shadow: 0 0 0 2px var(--surface-2, #0b1017);
}
@media (max-width: 700px) {
  .sig-params { gap: 6px 20px; }
  .sig-param-v { font-size: 15.5px; }
  .sig-param-range { flex-basis: 100%; max-width: none; }
}
/* On a phone the row stacks, so "Full analysis" sitting beside the sentence
   left it about 180px of column and two words a line. It goes underneath
   instead, and the clamp opens to three lines because there is now width to
   use. */
@media (max-width: 620px) {
  .why-toggle { flex-wrap: wrap; gap: 6px; }
  .why-gist { flex: 1 1 100%; -webkit-line-clamp: 3; }
}
.picks-tagline { font-size: 15px; color: var(--text-2); margin: 12px 0 0 !important; }
.performance-badge.warn { border-color: var(--amber); color: var(--amber); }
.picks-notice {
  border: 1px solid var(--border); border-left: 3px solid var(--amber);
  border-radius: var(--r-md); background: var(--surface-2);
  padding: 12px 15px; margin: 0 0 22px; font-size: 13px; line-height: 1.6;
  color: var(--text-2);
}
.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 {
  /* inline-flex, not inline: vertical padding on an inline box does not grow
     the line box, so these measured 14px tall however much padding they had.
     Paging the scanner is a primary phone interaction. */
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 7px 15px; 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 */
/* display:block is load-bearing, not tidiness. This is a <span>, so without
   it the box is inline -- and width/height do not apply to an inline box. The
   inline style="width:N%" was therefore ignored and every rating bar on the
   site rendered 0x0, while .rating-bar-track (blockified by being a flex
   item) drew its rail as normal. The result looked like an empty chart rather
   than a broken one, which is why it went unnoticed. .role-fill gets the same
   guarantee from its parent being display:flex; this one has no such parent,
   so it has to say so itself. */
.rating-bar-fill { display: block; 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-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); }
.paywall-panel { border: 1px solid var(--border-strong); border-radius: var(--r-md, 14px);
  background: var(--surface-solid); box-shadow: var(--lift-1); padding: 22px 24px; margin: 22px 0; max-width: 66ch; }
.paywall-tag { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 9px; }
.paywall-panel h3 { font-size: 16px; font-weight: 700; margin: 0 0 8px; }
.paywall-panel p { font-size: 13.5px; color: var(--text-2); line-height: 1.7; margin: 0 0 16px; }
/* Partner section. Deliberately quieter than a research card: it is an
   optional third-party link, not a result, so it must not read as one. */
.partner-box { border: 1px dashed var(--border); border-radius: var(--r-md, 14px);
  background: var(--surface-2); padding: 18px 20px; margin: 26px 0; max-width: 66ch; }
.partner-tag { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-3); border: 1px solid var(--border);
  border-radius: 999px; padding: 3px 9px; margin-bottom: 10px; }
.partner-box h3 { font-size: 15px; font-weight: 700; margin: 0 0 6px; }
.partner-box p { font-size: 13px; color: var(--text-2); line-height: 1.65; margin: 0 0 12px; }
.partner-cta { display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
  font-size: 13.5px; font-weight: 600; text-decoration: none; color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 10px; padding: 10px 16px; }
.partner-cta:hover { background: var(--surface-solid); }
.partner-cta svg { width: 13px; height: 13px; flex-shrink: 0; }
.partner-disclosure { font-size: 11.5px; color: var(--text-3); line-height: 1.7; margin: 12px 0 0; }
.partner-risk { font-size: 11.5px; color: var(--text-3); line-height: 1.7; margin: 8px 0 0; font-weight: 600; }
.partner-meta { font-size: 11px; color: var(--text-3); margin: 8px 0 0; }
.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 ─────────────────────────────────────────── */

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

/* Reassurance sits with the button it qualifies, not in a footnote row --
   "no card required" is the objection the CTA has to answer. */
.hero-reassure { font-size: 13px; color: var(--text-3); margin: 10px 0 0 !important; }

/* System status. Three rows so a quiet week reads as selectivity rather
   than a stalled scanner; see system_status(). */
.sys-status {
  display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 22px 0 0;
  padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); font-size: 13px;
}
.sys-status > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sys-status dt { color: var(--text-3); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; }
.sys-status dd { margin: 0; color: var(--text-1); font-weight: 600; white-space: nowrap; }
.sys-sub { color: var(--text-3); font-weight: 500; }
.sys-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); margin-right: 6px; vertical-align: middle; }
.hero-note-line { font-size: 12.5px !important; color: var(--text-3); margin: 14px 0 0 !important; }

/* Homepage offer band. Two columns on desktop, stacked on a phone: the
   offer, and the no-account alternative for people who will not sign up
   today. The full comparison lives on /pricing. */
.offer-band {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; align-items: start;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); padding: 28px;
}
.offer-main h2 { margin: 10px 0 0; font-size: clamp(22px, 4.4vw, 30px); line-height: 1.2; }
.offer-main > p { color: var(--text-2); margin: 12px 0 0; max-width: 46ch; }
.offer-main .account-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.offer-alt { border-left: 1px solid var(--border-hair); padding-left: 28px; }
.offer-alt h3 { margin: 0; font-size: 15px; }
/* Stated before the buttons it qualifies, not after in small print. */
.pay-status {
  border: 1px solid var(--border); border-left: 3px solid var(--amber, var(--accent));
  border-radius: var(--r-md); background: var(--surface-2); padding: 14px 16px; margin-top: 8px;
}
.pay-status b { font-size: 14px; }
.pay-status p { color: var(--text-2); font-size: 13.5px; margin: 6px 0 0; line-height: 1.55; }
/* Standalone link, not one inside a sentence, so it needs a real tap
   target: it measured 20px tall before the padding. */
.cg-kpi-go { display: inline-block; margin-top: 8px; padding: 6px 0; min-height: 24px;
  font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; }
.cg-kpi-go:hover { text-decoration: underline; }
/* A standalone link sitting on its own line under a form is a control, not
   prose, so WCAG 2.5.8's inline exemption does not cover it. */
.inline-tap { display: inline-flex; align-items: center; min-height: 44px; }
.pulse-caveat { color: var(--text-3); font-size: 13px; line-height: 1.6; margin: 14px 0 0; max-width: 78ch; }
.pulse-caveat strong { color: var(--text-2); }
.meth-advanced { margin-top: 26px; border-top: 1px solid var(--border-hair); padding-top: 8px; }
.meth-advanced > summary {
  cursor: pointer; list-style: none; font-size: 14px; font-weight: 600; color: var(--text-2);
  display: flex; align-items: center; gap: 8px; min-height: 44px;
}
.meth-advanced > summary::-webkit-details-marker { display: none; }
.meth-advanced > summary::after { content: "+"; color: var(--text-3); font-size: 18px; }
.meth-advanced[open] > summary::after { content: "‘2"; }
.meth-advanced > p { color: var(--text-3); font-size: 13.5px; margin: 4px 0 14px; }
.since-panel {
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: var(--r-lg); background: var(--surface); padding: 20px 22px; margin-bottom: 22px;
}
.since-panel h2 { margin: 0; font-size: clamp(17px, 3.4vw, 21px); line-height: 1.25; }
.since-panel p { color: var(--text-2); font-size: 14px; margin: 8px 0 0; line-height: 1.6; }
.since-when { color: var(--text-3) !important; font-size: 13px !important; }
.since-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.since-list li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.since-list a { color: var(--accent); font-weight: 700; text-decoration: none; }
.since-co { color: var(--text-3); flex: 1 1 auto; min-width: 0; }
.since-watch { border-top: 1px solid var(--border-hair); margin-top: 14px !important; padding-top: 12px; }
.since-watch a { color: var(--accent); text-decoration: none; }
.locked-modules { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); padding: 26px; }
.locked-modules h2 { margin: 10px 0 0; font-size: clamp(20px, 4vw, 26px); line-height: 1.22; }
.locked-modules > p { color: var(--text-2); margin: 10px 0 0; max-width: 60ch; }
.locked-list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.locked-list li { border-left: 2px solid var(--border); padding-left: 14px; }
.locked-list b { display: block; font-size: 14px; }
.locked-list span { display: block; color: var(--text-3); font-size: 13px; line-height: 1.55; margin-top: 4px; }
.ticker-more { display: block; width: 100%; margin-top: 18px; min-height: 44px; }

/* Company bubbles. One hue: this is one measure (money bought) across many
   companies, not competing categories. The cluster marks differ by a ring and
   are named in the legend, so the distinction never rests on fill alone. */
.bub-figure { margin: 0 0 26px; border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); padding: 20px; }
.bub-figure figcaption h2 { margin: 0; font-size: clamp(17px, 3.2vw, 21px); }
.bub-figure figcaption p { color: var(--text-3); font-size: 13px; line-height: 1.6; margin: 8px 0 14px; max-width: 78ch; }
.bub-svg { display: block; width: 100%; height: auto; overflow: visible; }
.bub-axis { font-size: 11px; fill: var(--text-3); font-family: inherit; }
.bub { fill: var(--green); fill-opacity: .34; stroke: var(--green); stroke-width: 1.5; transition: fill-opacity .15s; }
.bub:hover { fill-opacity: .72; }
.bub.cluster { fill-opacity: .62; stroke-width: 3; }
.bub-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: 12.5px; color: var(--text-3); }
.bub-key { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 7px;
  vertical-align: -1px; background: var(--green); opacity: .34; border: 1.5px solid var(--green); }
.bub-key.cluster { opacity: .62; border-width: 3px; }
.bub-note { color: var(--text-3); opacity: .85; }
.bub-table { margin-top: 12px; }
.bub-table > summary { cursor: pointer; list-style: none; font-size: 12.5px; font-weight: 600;
  color: var(--accent); display: inline-flex; align-items: center; min-height: 44px; }
.bub-table > summary::-webkit-details-marker { display: none; }
.bub-table table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.bub-table th, .bub-table td { text-align: left; padding: 6px 8px 6px 0; border-bottom: 1px solid var(--border-hair); }
.bub-table td:nth-child(2), .bub-table td:nth-child(3), .bub-table td:nth-child(4) { text-align: right; font-variant-numeric: tabular-nums; }
.bub-table a { color: var(--accent); font-weight: 700; text-decoration: none; }
@media (max-width: 620px) { .bub-figure { padding: 15px; } }

/* ---- globe ----------------------------------------------------------
   Two maps side by side on a desktop, stacked on a phone. Buying and
   selling are separate figures rather than two hues in one, because the
   --buy/--sell pair separates by only 7.2 (dark) and 5.9 (light) delta-E
   under deuteranopia against a floor of 8. Each map is therefore a single
   hue, and which map you are reading is carried by its heading. */
.globe-pair { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.globe-figure { margin: 0; border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 22px; background: var(--surface); }
.globe-figure figcaption h2 { margin: 0; font-size: clamp(17px, 3.2vw, 21px); }
.globe-figure figcaption p { color: var(--text-3); font-size: 13px; line-height: 1.6;
  margin: 8px 0 14px; max-width: 78ch; }
.globe-svg { display: block; width: 100%; height: auto; max-width: 520px; margin: 0 auto; }
.globe-ocean { fill: var(--score-track); }
/* Recessive, like the gridlines on every other chart here. */
.globe-grid { fill: none; stroke: var(--border); stroke-width: 1; }
.globe-land { fill: var(--neutral-dim); stroke: var(--neutral); stroke-width: .8; }
.globe-rim { fill: none; stroke: var(--border); stroke-width: 1.5; }
/* A 2px ring in the surface colour so overlapping marks stay countable. */
.globe-mark { fill-opacity: .55; stroke-width: 2; stroke: var(--surface); }
.globe-buy .globe-mark { fill: var(--buy); }
.globe-sell .globe-mark { fill: var(--sell); }
.globe-note { color: var(--text-3); font-size: 12px; line-height: 1.6; margin: 12px 0 0; }
.globe-table { margin-top: 12px; }
.globe-table > summary { cursor: pointer; list-style: none; font-size: 12.5px; font-weight: 600;
  color: var(--accent); display: inline-flex; align-items: center; min-height: 44px; }
.globe-table > summary::-webkit-details-marker { display: none; }
.globe-table table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.globe-table th, .globe-table td { text-align: left; padding: 6px 8px 6px 0;
  border-bottom: 1px solid var(--border-hair); }
.globe-table td:nth-child(2), .globe-table td:nth-child(3) { text-align: right;
  font-variant-numeric: tabular-nums; }
@media (max-width: 620px) { .globe-figure { padding: 15px; } }

.locked-modules .account-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
@media (max-width: 860px) {
  .locked-modules { padding: 20px; }
  .locked-modules .account-actions > * { flex: 1 1 100%; text-align: center; }
}
.offer-alt p { color: var(--text-3); font-size: 13.5px; margin: 8px 0 0; }
@media (max-width: 860px) {
  .offer-band { grid-template-columns: 1fr; gap: 24px; padding: 22px; }
  .offer-alt { border-left: 0; border-top: 1px solid var(--border-hair); padding-left: 0; padding-top: 22px; }
  .offer-main .account-actions { justify-content: stretch; }
  .offer-main .account-actions > * { flex: 1 1 100%; text-align: center; }
}
@media (max-width: 940px) {
  .sys-status { justify-content: center; text-align: center; }
  .sys-status > div { align-items: center; }
}

/* 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; }
/* 76px above and below every section is a desktop rhythm, and it was being
   applied unchanged to the phones that are 84% of this site's sessions. On a
   393x733 screen that is a fifth of the viewport spent on nothing, once per
   section, on every page. .hero already had a 640px rule; section never did.
   Placed immediately after the base rule because a media query adds no
   specificity -- source order is what decides this. */
@media (max-width: 700px) { section { padding: 40px 0; } }
.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
   ------------------------------------------------------------ */
/* Mix of a window, by rating and conviction. Bars in lanes, because these
   are ranked buckets rather than points on a continuous axis. Every row
   carries its own count and share, so identity never rests on colour and the
   chart needs no legend. */
.mix-panel {
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface-solid); padding: 16px 18px; margin-bottom: 20px;
}
.mix-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 14px; }
.mix-title { font-size: 13.5px; font-weight: 700; }
.mix-total { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.mix-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px 32px; }
.mix-group h4 {
  margin: 0 0 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-3);
}
.mix-row { display: grid; grid-template-columns: 56px 1fr 64px; align-items: center; gap: 10px; margin-bottom: 6px; }
.mix-label { font-size: 12px; color: var(--text-2); }
/* Recessive track, 6px bar: thin marks, and the fill is the only thing with
   weight. 4px radius on the data end, anchored at the baseline. */
.mix-bar { position: relative; height: 6px; border-radius: 999px; background: var(--border-hair, rgba(255,255,255,.08)); overflow: hidden; }
.mix-fill { display: block; height: 100%; border-radius: 4px; min-width: 2px; }
/* Ratings keep the colours they wear on every badge across the site. */
.mix-fill.rAplus { background: var(--amber); }
.mix-fill.rA     { background: var(--green); }
.mix-fill.rBplus { background: var(--blue, #4ba3ff); }
.mix-fill.rB     { background: var(--b, #8aa7d8); }
/* Conviction is ordered and has no established colour, so it takes one hue at
   three strengths rather than three unrelated hues. */
.mix-fill.c1 { background: var(--accent); }
.mix-fill.c2 { background: color-mix(in srgb, var(--accent) 62%, transparent); }
.mix-fill.c3 { background: color-mix(in srgb, var(--accent) 32%, transparent); }
.mix-val { font-size: 12.5px; font-variant-numeric: tabular-nums; text-align: right; color: var(--text-2); }
.mix-val small { font-size: 11px; color: var(--text-3); margin-left: 3px; }
.mix-note { font-size: 11.5px; color: var(--text-3); line-height: 1.5; margin: 14px 0 0; }
.home-ledger { margin-top: 28px; }
@media (max-width: 700px) {
  .mix-panel { padding: 14px; }
  .mix-grid { gap: 16px; }
  .mix-row { grid-template-columns: 52px 1fr 58px; }
}

.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-layout: fixed, and min-width dropped from 740px to none.
   With auto layout the reasoning cell -- one long sentence in a colspan --
   sets the table's width, so the table grew to 4291px inside a 1070px wrap
   and every column scrolled sideways again. -webkit-line-clamp limits height,
   not width, so it could not prevent that on its own. Fixed layout makes the
   columns honour their declared widths and lets the sentence wrap and clamp. */
table.filings { width: 100%; table-layout: fixed; border-collapse: collapse; font-family: 'JetBrains Mono', monospace; font-size: 14.5px; }
table.filings thead th:nth-child(1) { width: 22%; }
table.filings thead th:nth-child(2) { width: 26%; }
table.filings thead th:nth-child(3) { width: 15%; }
table.filings thead th:nth-child(4) { width: 12%; }
table.filings thead th:nth-child(5) { width: 25%; }
table.filings tbody td { overflow-wrap: anywhere; }
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); }
/* A row with a thesis behind it is clickable along its whole width, so it has
   to look it. The Why button alone was a ~60px control in a ~1100px row that
   already highlighted on hover -- people clicked the row, nothing happened,
   and they concluded there was no explanation to read. */
/* An ISO date breaking into "2026-" and "08-24", and a "MKT CAP" header
   splitting in two, are pure waste: neither is prose. Both are pinned.

   Column widths were tried here and removed: table.filings is table-layout
   auto, where width on a th is a suggestion the browser overrides from
   content. Measured with and without a full set of percentages, the rendered
   columns differed by one pixel on one column and the row heights not at all.
   Making them bind would mean table-layout: fixed, which clips a long company
   name instead of giving it room -- a worse trade on a data table. */
table.filings th { white-space: nowrap; }
table.filings td.filed { white-space: nowrap; }
table.filings tbody tr.has-why { cursor: pointer; }
table.filings tbody tr.has-why:hover { background: rgba(255,255,255,.05); }
:root[data-theme="light"] table.filings tbody tr.has-why:hover { background: rgba(15,23,42,.05); }
table.filings tbody tr.has-why:hover /* The old pill-shaped "Why" button that sat in its own column is gone with
   that column. Its styling lived here, AFTER the replacement's rules, so it
   won the cascade and repainted the new full-width reasoning row as an
   accent-coloured pill. Removed rather than overridden. */
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 .price-alt { font-size: 13px; color: var(--text-3); margin-top: 6px; }
.price-card .price-fine { font-size: 12.5px; color: var(--text-3); line-height: 1.55; margin: 12px 0 0; }
/* The cards no longer end at the same point -- one carries a form, the other
   two buttons -- so let the content sit at the top rather than stretching a
   short card's whitespace to match a tall one. */
.pricing-grid { align-items: start; }
.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; }
/* Five expanded answers ran 1.6 phone screens. As an accordion the same five
   questions are scannable in a third of that, and every answer is still in
   the response body -- <details> hides nothing from curl or a screen reader. */
.faq-item > summary {
  font-size: 16px; font-weight: 600; cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 44px;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: "+"; color: var(--text-3); font-weight: 400; font-size: 20px; line-height: 1; flex: none;
}
.faq-item[open] > summary::after { content: "‘2"; }
.faq-item > summary:hover { color: var(--accent); }
/* 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;
}
/* [hidden] is only the UA stylesheet's display:none, and the rule above sets
   display:flex, which beats it. Without this the search filter set .hidden on
   every non-matching card and nothing moved -- typing narrowed the count in
   the status line while the grid stayed exactly as it was. */
.ticker-index-card[hidden] { display: none !important; }
.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; }
  /* `hidden` is only UA-stylesheet `display: none`, which ANY author display
     rule outranks -- and the card layout above sets `display: block` on every
     row in these tables. So every thesis panel was permanently expanded on a
     phone: the prose rendered as a second card under each row, and the Why
     button toggled an attribute that changed nothing visible. Restated here
     with enough specificity to win. Covers the sibling tables too, since they
     get the same `display: block` and would hit this the moment either grows
     a hidden row. */
  table.filings tbody tr[hidden],
  .ytd-ledger-table tbody tr[hidden],
  table.scan tbody tr[hidden] { display: 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; }
}

/* ------------------------------------------------------------
   Touch targets, part two: everything outside the nav
   ------------------------------------------------------------
   Same breakpoint and reasoning as the nav's block far above -- bumped only
   where touch is likely, desktop pointer sizing left alone.

   THIS MUST STAY AT THE END OF BASE_CSS. Every selector below is also
   declared earlier at the same specificity, and a media query adds none, so
   source order is the only thing deciding the winner. Put this block up beside
   the nav's and roughly half of it silently stops working.

   Audited at 390px across 19 routes with tools/touch_audit.py. The nav got
   this treatment when it was written; every component added since targets its
   own classes and was never covered, leaving 20 groups under 44px, seven of
   them under the 24px WCAG 2.5.8 AA floor.

   Inline links inside a sentence are deliberately absent: 2.5.8 exempts them,
   there are 107 of them, and a blanket `a { min-height }` would wreck body
   typography. */
@media (max-width: 1340px) {
  /* Pill and chip groups. min-width matters as much as min-height -- the D/R
     party chips were 37px WIDE, and pills sit edge to edge, so a miss on one
     lands on its neighbour. */
  .performance-range, .filings-tab, .ticker-chip, .why-toggle {
    min-height: 44px; min-width: 44px;
  }

  /* Form controls: the scanner's filters, the header search, and the two
     homepage forms (ticker lookup and the alert signup) that are the main
     things a phone visitor is asked to touch. */
  .scan-bar input, .scan-bar select, .nav-search input,
  .ticker-search input, .ticker-search button,
  .pricing-email-form input, .pricing-email-form .cta,
  .scan-bar .scan-btn, .auth-submit { min-height: 44px; }

  /* Block links. The margin becomes the padding rather than stacking on top of
     it: the footer alone is 80 of these, and keeping the 9px gap as well would
     pad the footer out for nothing. */
  .footer-col a { min-height: 44px; display: flex; align-items: center; margin-bottom: 0; }
  /* min-width too: a short ticker like $CVM is only 41px wide otherwise. */
  .rc-foot a, .rc-ticker {
    min-height: 44px; min-width: 44px; display: inline-flex; align-items: center;
  }

  /* Both sit in table cells beside other text, so they take padding rather
     than a min-height that would stretch the row. .scan-filing is the link to
     the actual SEC filing -- the thing the page exists to let someone check --
     and .scan-ticker, at 24x16, was the smallest control on the site while
     being the primary way out of each of the 50 rows. */
  .scan-filing { display: inline-block; padding: 14px 0; }
  .scan-ticker { display: inline-block; padding: 14px 10px; margin: 0 -10px; }

  /* A 20-item table of contents is a navigation list, not prose: each <li>
     holds nothing but the link, so none of them is "in a sentence" and the
     2.5.8 inline exemption does not apply. */
  .legal-doc .legal-toc li a { display: inline-block; padding: 13px 0; }

  /* The reveal button sits inside the password field, so the field's right
     padding has to clear the wider button or the value runs underneath it. */
  .pw-toggle { width: 44px; height: 44px; right: 3px; }
  .pw-wrap > input { padding-right: 52px; }
  :root[dir="rtl"] .pw-toggle { right: auto; left: 3px; }
  :root[dir="rtl"] .pw-wrap > input { padding-right: 14px; padding-left: 52px; }
}