/* =========================================================================
       RepoRadar Design System v2
       Premium editorial AI discovery. Deep midnight, single brand accent.
       ========================================================================= */
    :root {
      --brand: #7ef0a8;
      --brand-soft: rgba(126, 240, 168, .12);
      --brand-line: rgba(126, 240, 168, .30);
      --brand-glow: rgba(126, 240, 168, .45);
      --accent: #94c8ff;
      --accent-soft: rgba(148, 200, 255, .10);
      --warm: #ffb547;
      --warm-soft: rgba(255, 181, 71, .12);
      --bg: #0a0e16;
      --bg-2: #0f1320;
      --bg-3: #161b2a;
      --bg-4: #1d2335;
      --line: rgba(255, 255, 255, .07);
      --line-2: rgba(255, 255, 255, .12);
      --line-3: rgba(255, 255, 255, .18);
      --text: #ecf0f8;
      --text-2: #c1c8d4;
      --muted: #8a93a3;
      --muted-2: #5e6573;
      --gold: #f5d27a;
      --gold-bg: rgba(245, 210, 122, .10);
      --gold-line: rgba(245, 210, 122, .34);
      --silver: #c8d1e0;
      --silver-bg: rgba(200, 209, 224, .08);
      --silver-line: rgba(200, 209, 224, .28);
      --bronze: #c69572;
      --bronze-bg: rgba(198, 149, 114, .08);
      --bronze-line: rgba(198, 149, 114, .28);
      --dirt: #8b7c6a;
      --dirt-bg: rgba(139, 124, 106, .08);
      --dirt-line: rgba(139, 124, 106, .24);
      --good: #7ef0a8;
      --warn: #ffb547;
      --bad: #ff8a9b;
      --shell-w: 1320px;
      --shell-pad: 28px;
      --radius: 14px;
      --radius-lg: 22px;
      --radius-xl: 32px;
      --ease: cubic-bezier(.32, .72, 0, 1);
      --font-display: "Fraunces", "Source Serif Pro", Georgia, "Times New Roman", serif;
      --font-body: "Inter", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
      --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Menlo, monospace;
    }
    * { box-sizing: border-box }
    .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0 }
    html { scroll-behavior: smooth; -webkit-text-size-adjust: 100% }
    body {
      margin: 0;
      background: var(--bg);
      color: var(--text);
      font-family: var(--font-body);
      font-size: 16px;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
    }
    body:before {
      content: "";
      position: fixed; inset: 0;
      pointer-events: none; z-index: 0;
      background:
        linear-gradient(180deg, rgba(126, 240, 168, .04) 0%, transparent 30%),
        repeating-linear-gradient(0deg, transparent 0, transparent 119px, rgba(255, 255, 255, .014) 119px, rgba(255, 255, 255, .014) 120px);
    }
    body:after {
      content: "";
      position: fixed; inset: 0;
      pointer-events: none; z-index: 0;
      background:
        radial-gradient(ellipse 1100px 600px at 50% -10%, rgba(126, 240, 168, .08), transparent 70%),
        radial-gradient(ellipse 800px 400px at 90% 30%, rgba(148, 200, 255, .05), transparent 70%);
    }
    a { color: inherit; text-decoration: none }
    .shell { width: min(var(--shell-w), calc(100vw - 2 * var(--shell-pad))); margin: 0 auto; position: relative; z-index: 1 }

    /* ---------- Header / Nav ---------- */
    .nav-wrap {
      position: sticky; top: 0; z-index: 50;
      backdrop-filter: blur(20px) saturate(160%);
      -webkit-backdrop-filter: blur(20px) saturate(160%);
      background: rgba(10, 14, 22, .72);
      border-bottom: 1px solid var(--line);
    }
    .nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 0 }
    .brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; letter-spacing: -.025em; font-size: 18px; color: var(--text) }
    .brand-mark { width: 30px; height: 30px; flex: 0 0 auto; color: var(--brand) }
    .brand-mark .ring { fill: none; stroke: currentColor; stroke-width: 1.4 }
    .brand-mark .sweep { stroke: currentColor; stroke-width: 2; stroke-linecap: round }
    .brand-mark .pulse { fill: currentColor }
    .brand .name { font-family: var(--font-body); letter-spacing: -.03em }
    .brand .name em { font-style: normal; color: var(--brand); font-weight: 600 }
    .nav-links { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end }
    .nav-links a {
      text-decoration: none; color: var(--text-2);
      padding: 8px 14px; border-radius: 999px;
      font-size: 13.5px; font-weight: 500;
      transition: color .25s var(--ease), background .25s var(--ease);
    }
    .nav-links a:hover { color: var(--text); background: rgba(255, 255, 255, .04) }
    .nav-links a.cta { color: #0a0e16; background: var(--brand); font-weight: 600 }
    .nav-links a.cta:hover { background: #a8f5c2; color: #0a0e16 }

    /* ---------- Hero ---------- */
    .hero { padding: 88px 0 56px; position: relative }
    .eyebrow {
      display: inline-flex; align-items: center; gap: 8px;
      color: var(--brand); background: var(--brand-soft);
      border: 1px solid var(--brand-line);
      border-radius: 999px; padding: 7px 14px;
      font-size: 12px; font-weight: 600;
      letter-spacing: .04em; text-transform: uppercase;
    }
    .eyebrow .dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--brand);
      box-shadow: 0 0 0 4px var(--brand-soft);
    }
    .hero h1 {
      font-family: var(--font-display);
      font-weight: 360;
      font-size: clamp(44px, 7vw, 92px);
      line-height: 1.02; letter-spacing: -.035em;
      max-width: 1100px;
      margin: 24px 0 22px; color: var(--text);
      font-variation-settings: "opsz" 96, "SOFT" 30;
    }
    .hero h1 em { font-style: italic; font-weight: 400; color: var(--brand); font-variation-settings: "opsz" 144, "SOFT" 100 }
    .hero-copy {
      max-width: 720px; color: var(--text-2);
      font-size: clamp(17px, 1.4vw, 19px);
      line-height: 1.55; margin: 0 0 32px; font-weight: 400;
    }
    .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center }
    .primary, .secondary {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 13px 20px; border-radius: 999px;
      font-weight: 600; font-size: 15px;
      transition: transform .25s var(--ease), background .25s var(--ease);
    }
    .primary {
      background: var(--brand); color: #0a0e16;
      box-shadow: 0 8px 24px -8px var(--brand-glow), inset 0 1px 0 rgba(255, 255, 255, .25);
    }
    .primary:hover { background: #a8f5c2; transform: translateY(-1px) }
    .primary .arrow { display: inline-block; transition: transform .25s var(--ease) }
    .primary:hover .arrow { transform: translateX(3px) }
    .secondary { border: 1px solid var(--line-2); background: transparent; color: var(--text) }
    .secondary:hover { background: rgba(255, 255, 255, .04); border-color: var(--line-3) }
    .hero-meta {
      display: flex; align-items: center; gap: 24px;
      margin-top: 36px; padding-top: 24px;
      border-top: 1px solid var(--line);
      flex-wrap: wrap; font-size: 13.5px; color: var(--muted);
    }
    .hero-meta-item { display: flex; align-items: baseline; gap: 8px }
    .hero-meta-item strong { color: var(--text); font-weight: 600; font-family: var(--font-mono); font-size: 14px }
    .hero-meta-divider { width: 1px; height: 14px; background: var(--line-2) }
    .stat-grid {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
      margin-top: 48px;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      overflow: hidden; background: var(--line);
    }
    .stat { padding: 24px; background: var(--bg-2); display: flex; flex-direction: column; gap: 8px }
    .stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 600 }
    .stat-value { font-family: var(--font-display); font-weight: 400; font-size: 38px; line-height: 1; letter-spacing: -.04em; color: var(--text) }
    .stat-detail { font-size: 12.5px; color: var(--muted); margin-top: 4px }

    /* ---------- Sections ---------- */
    section { padding: 56px 0; position: relative }
    .section-head { display: flex; justify-content: space-between; gap: 24px; align-items: flex-end; margin-bottom: 32px }
    .section-head h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 3.4vw, 44px); letter-spacing: -.035em; line-height: 1.1 }
    .section-head h2 em { font-style: italic; color: var(--brand); font-weight: 400 }
    .section-head p { max-width: 580px; color: var(--muted); line-height: 1.55; margin: 8px 0 0; font-size: 14.5px }
    .section-eyebrow { display: block; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--brand); margin-bottom: 12px; font-weight: 500 }
    .section-link {
      color: var(--text-2); font-size: 14px; font-weight: 500;
      display: inline-flex; align-items: center; gap: 6px;
      border-bottom: 1px solid var(--line-2); padding-bottom: 2px;
      transition: border-color .25s var(--ease), color .25s var(--ease);
    }
    .section-link:hover { color: var(--text); border-color: var(--brand) }

    /* ---------- Editor's Picks ---------- */
    .picks-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 18px }
    .pick-card {
      position: relative; cursor: pointer;
      background: var(--bg-2); border: 1px solid var(--line);
      border-radius: var(--radius-lg); padding: 28px;
      display: flex; flex-direction: column; gap: 16px; min-height: 340px;
      transition: transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
      overflow: hidden;
    }
    .pick-card:hover { transform: translateY(-2px); border-color: var(--line-3); background: var(--bg-3) }
    .pick-card.featured {
      background: linear-gradient(160deg, var(--bg-2) 0%, var(--bg-3) 100%);
      border-color: var(--brand-line);
    }
    .pick-card.featured:before {
      content: ""; position: absolute; inset: 0;
      background: radial-gradient(circle at 100% 0%, var(--brand-soft), transparent 60%);
      pointer-events: none;
    }
    .pick-tier-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
    .pick-num { font-family: var(--font-mono); font-size: 11px; color: var(--muted-2); letter-spacing: .04em }
    .pick-card h3 { font-family: var(--font-body); font-size: 22px; line-height: 1.15; letter-spacing: -.025em; font-weight: 600; margin: 0; word-break: break-word }
    .pick-card.featured h3 { font-size: 30px; font-family: var(--font-display); font-weight: 400; font-variation-settings: "opsz" 96 }
    .pick-card .pick-meta { color: var(--muted); font-size: 13.5px; line-height: 1.5; margin: 0 }
    .pick-card .pick-link { margin-top: auto; color: var(--brand); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px }

    /* ---------- Today's Radar ---------- */
    .today-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px }
    .today-card {
      position: relative; cursor: pointer;
      background: var(--bg-2); border: 1px solid var(--line);
      border-radius: var(--radius); padding: 18px 18px 18px 22px;
      transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
      display: flex; flex-direction: column; gap: 10px;
    }
    .today-card:hover { border-color: var(--line-3); background: var(--bg-3); transform: translateY(-1px) }
    .today-card:before {
      content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px;
      background: var(--brand); border-radius: 0 2px 2px 0;
    }
    .today-card h4 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; word-break: break-word }
    .today-card .today-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--muted) }
    .today-card .today-meta .dot { color: var(--muted-2) }
    .today-card .today-tag { display: inline-flex; align-items: center; gap: 4px; color: var(--brand); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .02em }

    /* ---------- Trending (popular) ---------- */
    .popular-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px }
    .popular-card {
      position: relative; cursor: pointer;
      background: var(--bg-2); border: 1px solid var(--line);
      border-radius: var(--radius-lg); padding: 22px;
      display: flex; flex-direction: column; gap: 12px;
      transition: transform .35s var(--ease), border-color .35s var(--ease);
    }
    .popular-card:hover { transform: translateY(-2px); border-color: var(--line-3) }
    .popular-rank { color: var(--muted); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .04em }
    .popular-card h3 { font-family: var(--font-body); font-size: 18px; line-height: 1.2; letter-spacing: -.025em; font-weight: 600; margin: 0; word-break: break-word }
    .popular-card p { color: var(--muted); font-size: 13.5px; line-height: 1.45; margin: 0 }
    .popular-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 8px }
    .popular-meta b { font-size: 11px; font-weight: 600; color: var(--text-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 4px 8px }
    .popular-meta b.score { color: var(--brand); border-color: var(--brand-line) }

    /* ---------- Newsletter panel ---------- */
    .newsletter-panel {
      background: linear-gradient(160deg, var(--bg-2), var(--bg-3));
      border: 1px solid var(--line-2);
      border-radius: var(--radius-xl); padding: 40px;
      display: grid; grid-template-columns: 1.4fr 1fr;
      gap: 36px; align-items: center;
    }
    .newsletter-panel h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 2.6vw, 36px); letter-spacing: -.035em; line-height: 1.1; margin: 0 0 12px }
    .newsletter-panel h2 em { font-style: italic; color: var(--brand) }
    .newsletter-panel .lead { color: var(--text-2); line-height: 1.55; margin: 0 0 18px }
    .newsletter-bullets { display: grid; gap: 8px; padding: 0; margin: 0; list-style: none }
    .newsletter-bullets li { color: var(--text-2); font-size: 14px; display: flex; align-items: flex-start; gap: 10px; line-height: 1.4 }
    .newsletter-bullets li:before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--brand); margin-top: 9px; flex: 0 0 auto }
    .newsletter-form-card { background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--radius-lg); padding: 28px; display: flex; flex-direction: column; gap: 14px }
    .newsletter-form-card .form-eyebrow { color: var(--brand); font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500 }
    .newsletter-form-card input { width: 100%; border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg-2); color: var(--text); padding: 12px 14px; font: inherit; font-size: 15px; outline: 0; transition: border-color .25s var(--ease) }
    .newsletter-form-card input:focus { border-color: var(--brand) }
    .newsletter-form-card button { width: 100%; background: var(--brand); color: #0a0e16; border: 0; border-radius: 10px; padding: 12px 16px; font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; transition: background .25s var(--ease) }
    .newsletter-form-card button:hover { background: #a8f5c2 }
    .newsletter-form-card .form-detail { color: var(--muted); font-size: 12.5px; line-height: 1.4; margin: 0 }
    .newsletter-form-card .form-status { color: var(--muted); font-size: 13px; min-height: 1.2em }
    .newsletter-form-card .form-status[data-state="ok"] { color: var(--brand) }
    .newsletter-form-card .form-status[data-state="error"] { color: var(--bad) }
    .newsletter-cta-inline { display: inline-flex; align-items: center; gap: 8px; color: var(--text); background: var(--brand); padding: 12px 18px; border-radius: 999px; font-weight: 600; font-size: 14.5px; transition: background .25s var(--ease) }
    .newsletter-cta-inline:hover { background: #a8f5c2 }

    /* ---------- Cards grid (radar) ---------- */
    .toolbar { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; margin: 4px 0 18px }
    .searchbar { display: flex; gap: 10px; align-items: center; border: 1px solid var(--line-2); background: var(--bg-2); border-radius: 14px; padding: 8px 14px; transition: border-color .25s var(--ease) }
    .searchbar:focus-within { border-color: var(--brand) }
    .searchbar span, .sort-label { color: var(--muted); font-size: 13px; white-space: nowrap }
    .searchbar input { width: 100%; background: transparent; border: 0; color: var(--text); outline: 0; font: inherit; padding: 8px }
    .sort-control { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end }
    .filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px }
    .filter-btn, .sort-btn { text-decoration: none; border: 1px solid var(--line-2); color: var(--muted); padding: 7px 12px; border-radius: 999px; background: transparent; font-size: 12.5px; font-weight: 500; transition: all .25s var(--ease); cursor: pointer }
    .filter-btn:hover, .filter-btn.active, .sort-btn.active { color: var(--text); border-color: var(--brand-line); background: var(--brand-soft) }
    .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 18px; align-items: start }
    .card {
      position: relative; cursor: pointer;
      background: var(--bg-2); border: 1px solid var(--line);
      border-radius: var(--radius-lg); padding: 22px;
      display: flex; flex-direction: column; gap: 14px;
      transition: transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
    }
    .card:hover { transform: translateY(-2px); border-color: var(--line-3); background: var(--bg-3) }
    .card.hide { display: none }
    .card-topline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
    .rank { color: var(--muted-2); font-family: var(--font-mono); font-size: 11.5px; font-weight: 500 }
    .tier, .type-pill { border: 1px solid var(--line-2); border-radius: 999px; padding: 4px 9px; font-size: 11px; font-weight: 600; letter-spacing: .02em }
    .tier-gold { color: var(--gold); border-color: var(--gold-line); background: var(--gold-bg) }
    .tier-silver { color: var(--silver); border-color: var(--silver-line); background: var(--silver-bg) }
    .tier-bronze { color: var(--bronze); border-color: var(--bronze-line); background: var(--bronze-bg) }
    .tier-low-signal { color: var(--dirt); border-color: var(--dirt-line); background: var(--dirt-bg) }
    .type-pill { color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-size: 10.5px }
    .card h3 { margin: 0; font-family: var(--font-body); font-size: 19px; line-height: 1.2; letter-spacing: -.025em; font-weight: 600; word-break: break-word }
    .controlled-copy { display: grid; gap: 8px }
    .controlled-copy p { margin: 0; color: var(--text-2); line-height: 1.5; font-size: 14px }
    .controlled-copy b { color: var(--text); font-weight: 600 }
    .score-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px }
    .score-row > div { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-3); padding: 10px 12px }
    .score-row strong { display: block; font-family: var(--font-mono); font-size: 14px; font-weight: 500; line-height: 1.15; color: var(--text); overflow-wrap: anywhere }
    .score-row span, .mini-label { display: block; color: var(--muted-2); text-transform: uppercase; letter-spacing: .08em; font-size: 9.5px; margin-bottom: 5px; font-weight: 600 }
    .risk-high { color: var(--bad) }
    .risk-medium { color: var(--warn) }
    .risk-low, .risk-none { color: var(--good) }
    .card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px }
    .card-grid > div { min-width: 0 }
    .chips { display: flex; gap: 5px; flex-wrap: wrap }
    .chips span { font-size: 11.5px; color: var(--text-2); background: var(--bg-3); border: 1px solid var(--line); border-radius: 999px; padding: 4px 9px; overflow-wrap: anywhere; max-width: 100% }
    .chips.muted span { color: var(--muted); background: transparent; border-color: var(--line) }
    .detail-section { display: grid; gap: 7px; border-top: 1px solid var(--line); padding-top: 12px }
    .detail-text { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere }
    .basis, .timestamp { font-size: 12px; color: var(--muted); line-height: 1.5; font-family: var(--font-mono) }
    .card h3, .controlled-copy p, .basis, .timestamp, .detail-text { overflow-wrap: anywhere }
    .card-source-link { position: absolute; inset: 0; border-radius: inherit; z-index: 2; text-indent: -9999px; overflow: hidden }
    .card-source-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px }
    .verdict-line { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding-top: 12px; color: var(--muted); font-size: 12.5px }
    .verdict-line b { color: var(--text); font-weight: 600; font-size: 13.5px }
    .links, .links a { position: relative; z-index: 3 }
    .links { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px }
    .links a { color: var(--brand); text-decoration: none; border-bottom: 1px solid var(--brand-line); transition: border-color .25s var(--ease) }
    .links a:hover { border-color: var(--brand) }

    /* ---------- Quality grid ---------- */
    .quality-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden }
    .quality-card { background: var(--bg-2); padding: 26px }
    .quality-card span { display: block; color: var(--muted); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; font-weight: 500 }
    .quality-card strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: 36px; line-height: 1.1; margin: 10px 0 8px; letter-spacing: -.04em }
    .quality-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5 }

    /* ---------- Methodology ---------- */
    .method-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px }
    .method { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px }
    .method h3 { margin: 0 0 10px; font-size: 17px; font-weight: 600; letter-spacing: -.02em }
    .method p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.55 }
    .source-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px }
    .source { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px 22px; display: flex; justify-content: space-between; align-items: center }
    .source div { display: flex; flex-direction: column; gap: 4px }
    .source span { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--muted) }
    .source strong { font-size: 14px; font-weight: 600; color: var(--text) }
    .source .pill { font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line-2) }
    .source .pill.ok { color: var(--good); border-color: var(--brand-line); background: var(--brand-soft) }
    .source .pill.warn { color: var(--warn); border-color: rgba(255, 181, 71, .3); background: rgba(255, 181, 71, .08) }

    /* ---------- Tip / support ---------- */
    .tip-block {
      background: linear-gradient(160deg, var(--bg-2), var(--bg-3));
      border: 1px solid var(--line-2);
      border-radius: var(--radius-xl); padding: 32px;
      display: grid; grid-template-columns: 1fr auto;
      gap: 24px; align-items: center;
    }
    .tip-block h2 { font-family: var(--font-display); font-weight: 400; font-size: 24px; letter-spacing: -.03em; margin: 0 0 6px }
    .tip-block p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; max-width: 600px }
    .tip-block .tip-cta { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px; background: transparent; border: 1px solid var(--brand-line); color: var(--brand); font-weight: 600; font-size: 14.5px; transition: background .25s var(--ease) }
    .tip-block .tip-cta:hover { background: var(--brand-soft) }

    /* ---------- Footer ---------- */
    footer { padding: 40px 0 64px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted); margin-top: 32px }
    .footer-row { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap }
    .footer-links { display: flex; gap: 18px; flex-wrap: wrap }
    .footer-links a { color: var(--muted); transition: color .25s var(--ease) }
    .footer-links a:hover { color: var(--text) }

    /* ---------- Responsive ---------- */
    @media (max-width: 1180px) {
      .picks-grid { grid-template-columns: 1fr 1fr }
      .picks-grid .pick-card.featured { grid-column: span 2; min-height: 280px }
    }
    @media (max-width: 1024px) {
      .stat-grid { grid-template-columns: repeat(2, 1fr) }
      .quality-grid { grid-template-columns: repeat(2, 1fr) }
      .newsletter-panel { grid-template-columns: 1fr; padding: 28px; gap: 24px }
      .tip-block { grid-template-columns: 1fr; gap: 18px }
      .section-head { flex-direction: column; align-items: flex-start }
      .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px }
    }
    @media (max-width: 768px) {
      :root { --shell-pad: 18px }
      .hero { padding: 56px 0 32px }
      .hero h1 { font-size: clamp(36px, 9vw, 56px) }
      .picks-grid { grid-template-columns: 1fr }
      .picks-grid .pick-card.featured { grid-column: span 1 }
      .method-grid { grid-template-columns: 1fr }
      .source-grid { grid-template-columns: 1fr }
      .popular-grid { grid-template-columns: 1fr 1fr }
      .cards { grid-template-columns: 1fr }
      .nav-links a:not(.cta) { display: none }
      .nav-links a.cta { padding: 9px 14px }
    }
    @media (max-width: 520px) {
      .stat-grid { grid-template-columns: 1fr 1fr }
      .stat-value { font-size: 30px }
      .quality-grid { grid-template-columns: 1fr }
      .popular-grid { grid-template-columns: 1fr }
      .score-row { grid-template-columns: 1fr 1fr }
      .card-grid { grid-template-columns: 1fr }
      .nav { padding: 12px 0 }
      .brand { font-size: 16px }
      .hero-meta { gap: 14px }
      .hero-meta-divider { display: none }
    }
  
/* ---------- Sub-page hero ---------- */
.page-hero { padding: 64px 0 32px }
.page-hero .eyebrow { margin-bottom: 18px }
.page-hero h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(36px, 5.4vw, 60px); line-height: 1.05; letter-spacing: -.035em; max-width: 880px; margin: 0 0 16px; color: var(--text) }
.page-hero h1 em { font-style: italic; color: var(--brand); font-weight: 400 }
.page-hero .lede { max-width: 720px; color: var(--text-2); font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55; margin: 0; font-weight: 400 }
.page-hero + section { padding-top: 0 }

/* ---------- Content (long-form) ---------- */
.content { display: grid; gap: 14px; max-width: 760px }
.content h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; letter-spacing: -.03em; color: var(--text); margin: 18px 0 0 }
.content h2:first-child { margin-top: 0 }
.content h3 { font-size: 17px; font-weight: 600; letter-spacing: -.02em; color: var(--text); margin: 14px 0 0 }
.content p { color: var(--text-2); line-height: 1.65; margin: 0; font-size: 15px }
.content p strong { color: var(--text); font-weight: 600 }
.content a { color: var(--brand); text-decoration: none; border-bottom: 1px solid var(--brand-line); transition: border-color .25s var(--ease) }
.content a:hover { border-color: var(--brand) }
.content ul, .content ol { color: var(--text-2); line-height: 1.65; padding-left: 22px; margin: 0; font-size: 15px }
.content li { margin: 6px 0 }
.content li::marker { color: var(--muted-2) }
.content code { font-family: var(--font-mono); font-size: 13px; background: var(--bg-3); padding: 1px 6px; border-radius: 4px; color: var(--text) }

/* ---------- Callout box ---------- */
.callout { border: 1px solid var(--line-2); background: var(--bg-2); border-radius: var(--radius); padding: 16px 18px; color: var(--text-2); font-size: 14px; line-height: 1.55; margin: 0 }
.callout strong { color: var(--text) }

/* ---------- Forms (generic) ---------- */
.form { display: grid; gap: 12px; max-width: 480px }
.form label { font-size: 13px; color: var(--text-2); font-weight: 500 }
.form input, .form textarea, .form select { width: 100%; border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg-2); color: var(--text); padding: 12px 14px; font: inherit; font-size: 15px; outline: 0; transition: border-color .25s var(--ease) }
.form input:focus, .form textarea:focus, .form select:focus { border-color: var(--brand) }
.form textarea { min-height: 140px; resize: vertical; font-family: inherit }
.form button { background: var(--brand); color: #0a0e16; border: 0; border-radius: 10px; padding: 12px 18px; font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; transition: background .25s var(--ease); justify-self: start }
.form button:hover { background: #a8f5c2 }

/* ---------- Daily brief / news list ---------- */
.brief-list { display: grid; gap: 14px }
.brief-item { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px }
.brief-item h3 { font-size: 16px; font-weight: 600; letter-spacing: -.02em; margin: 0 0 6px }
.brief-item h3 a { color: var(--text); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .25s var(--ease) }
.brief-item h3 a:hover { border-color: var(--brand) }
.brief-item p { color: var(--muted); font-size: 13.5px; line-height: 1.55; margin: 0 }

/* ---------- Tip presets ---------- */
.tip-presets { display: flex; gap: 10px; flex-wrap: wrap }
.tip-presets a { display: inline-flex; align-items: center; padding: 12px 18px; border-radius: 999px; background: transparent; border: 1px solid var(--line-2); color: var(--text); font-weight: 600; font-size: 14.5px; transition: background .25s var(--ease), border-color .25s var(--ease) }
.tip-presets a:hover { background: var(--bg-3); border-color: var(--brand-line) }
.tip-presets a.primary { background: var(--brand); color: #0a0e16; border-color: var(--brand) }
.tip-presets a.primary:hover { background: #a8f5c2 }

/* ---------- Responsive refinements for sub-pages ---------- */
@media (max-width: 768px) {
  .page-hero { padding: 40px 0 24px }
  .callout { padding: 14px 16px }
  .tip-presets { gap: 8px }
  .tip-presets a { padding: 10px 14px; font-size: 13.5px }
}

/* ---------- Sub-page hero ---------- */
.page-hero { padding: 64px 0 32px }
.page-hero .eyebrow { margin-bottom: 18px }
.page-hero h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(36px, 5.4vw, 60px); line-height: 1.05; letter-spacing: -.035em; max-width: 880px; margin: 0 0 16px; color: var(--text) }
.page-hero h1 em { font-style: italic; color: var(--brand); font-weight: 400 }
.page-hero .lede { max-width: 720px; color: var(--text-2); font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55; margin: 0; font-weight: 400 }
.page-hero + section { padding-top: 0 }

/* ---------- Content (long-form) ---------- */
.content { display: grid; gap: 14px; max-width: 760px }
.content h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; letter-spacing: -.03em; color: var(--text); margin: 18px 0 0 }
.content h2:first-child { margin-top: 0 }
.content h3 { font-size: 17px; font-weight: 600; letter-spacing: -.02em; color: var(--text); margin: 14px 0 0 }
.content p { color: var(--text-2); line-height: 1.65; margin: 0; font-size: 15px }
.content p strong { color: var(--text); font-weight: 600 }
.content a { color: var(--brand); text-decoration: none; border-bottom: 1px solid var(--brand-line); transition: border-color .25s var(--ease) }
.content a:hover { border-color: var(--brand) }
.content ul, .content ol { color: var(--text-2); line-height: 1.65; padding-left: 22px; margin: 0; font-size: 15px }
.content li { margin: 6px 0 }
.content li::marker { color: var(--muted-2) }
.content code { font-family: var(--font-mono); font-size: 13px; background: var(--bg-3); padding: 1px 6px; border-radius: 4px; color: var(--text) }

/* ---------- Callout box ---------- */
.callout { border: 1px solid var(--line-2); background: var(--bg-2); border-radius: var(--radius); padding: 16px 18px; color: var(--text-2); font-size: 14px; line-height: 1.55; margin: 0 }
.callout strong { color: var(--text) }

/* ---------- Forms (generic) ---------- */
.form { display: grid; gap: 12px; max-width: 480px }
.form label { font-size: 13px; color: var(--text-2); font-weight: 500 }
.form input, .form textarea, .form select { width: 100%; border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg-2); color: var(--text); padding: 12px 14px; font: inherit; font-size: 15px; outline: 0; transition: border-color .25s var(--ease) }
.form input:focus, .form textarea:focus, .form select:focus { border-color: var(--brand) }
.form textarea { min-height: 140px; resize: vertical; font-family: inherit }
.form button { background: var(--brand); color: #0a0e16; border: 0; border-radius: 10px; padding: 12px 18px; font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; transition: background .25s var(--ease); justify-self: start }
.form button:hover { background: #a8f5c2 }

/* ---------- Daily brief / news list ---------- */
.brief-list { display: grid; gap: 14px }
.brief-item { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px }
.brief-item h3 { font-size: 16px; font-weight: 600; letter-spacing: -.02em; margin: 0 0 6px }
.brief-item h3 a { color: var(--text); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .25s var(--ease) }
.brief-item h3 a:hover { border-color: var(--brand) }
.brief-item p { color: var(--muted); font-size: 13.5px; line-height: 1.55; margin: 0 }

/* ---------- Tip presets ---------- */
.tip-presets { display: flex; gap: 10px; flex-wrap: wrap }
.tip-presets a { display: inline-flex; align-items: center; padding: 12px 18px; border-radius: 999px; background: transparent; border: 1px solid var(--line-2); color: var(--text); font-weight: 600; font-size: 14.5px; transition: background .25s var(--ease), border-color .25s var(--ease) }
.tip-presets a:hover { background: var(--bg-3); border-color: var(--brand-line) }
.tip-presets a.primary { background: var(--brand); color: #0a0e16; border-color: var(--brand) }
.tip-presets a.primary:hover { background: #a8f5c2 }

/* ---------- Responsive refinements for sub-pages ---------- */
@media (max-width: 768px) {
  .page-hero { padding: 40px 0 24px }
  .callout { padding: 14px 16px }
  .tip-presets { gap: 8px }
  .tip-presets a { padding: 10px 14px; font-size: 13.5px }
}

/* ---------- Audience filter group label ---------- */
.filter-group-label { display: inline-flex; align-items: center; color: var(--muted-2); font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; font-weight: 500; margin-right: 4px; padding: 0 6px }

/* ---------- Sample email preview (subscribe page) ---------- */
.email-sample {
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  padding: 0;
  margin: 18px 0 0;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-2);
}
.email-sample-meta {
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  padding: 14px 18px;
  display: grid;
  gap: 6px;
}
.email-sample-meta span { color: var(--muted); font-size: 12.5px }
.email-sample-meta strong { color: var(--text-2); font-weight: 600; text-transform: uppercase; font-size: 10.5px; letter-spacing: .08em; margin-right: 8px }
.email-sample-body { padding: 20px 22px; line-height: 1.55 }
.email-sample-body p { margin: 0 0 10px }
.email-greeting { font-family: var(--font-display); font-size: 18px; font-weight: 400; color: var(--text); font-style: italic; margin-bottom: 4px }
.email-list { padding-left: 0; list-style: none; margin: 12px 0; display: grid; gap: 12px }
.email-list li { color: var(--text); font-size: 13.5px; line-height: 1.5; padding-left: 18px; position: relative }
.email-list li:before { content: "→"; position: absolute; left: 0; top: 0; color: var(--brand); font-family: var(--font-mono) }
.email-list li strong { color: var(--text); font-weight: 600 }
.email-list li em { color: var(--muted); font-style: italic; font-size: 12.5px }
.email-meta { color: var(--muted); font-size: 12.5px; display: block; margin-top: 2px }
.email-closing { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line) }
.email-closing a { color: var(--brand); text-decoration: none; border-bottom: 1px solid var(--brand-line) }
.email-signoff { color: var(--text); margin-top: 14px }
.email-signoff em { color: var(--muted) }
.email-small { font-size: 11.5px; color: var(--muted-2); letter-spacing: .04em }

/* ---------- Fast-rising section ---------- */
.rising-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px }
.rising-card {
  position: relative; cursor: pointer;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.rising-card:hover { border-color: var(--line-3); background: var(--bg-3); transform: translateY(-1px) }
.rising-row1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.rising-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  background: var(--warm-soft);
  color: var(--warm);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
}
.rising-pop {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
  font-weight: 500;
  margin-left: auto;
}
.rising-card h4 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; word-break: break-word }
.rising-foot {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; color: var(--muted);
  padding-top: 4px;
}
.rising-cue { color: var(--warm); font-size: 11.5px; font-weight: 500 }

/* ---------- Hero audience (Useful for) ---------- */
.hero-audience {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.hero-audience-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--muted);
  font-weight: 500;
  flex: 0 0 auto;
}
.hero-audience-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1 1 auto;
}
.audience-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  transition: border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
  cursor: pointer;
}
.audience-chip:hover {
  border-color: var(--brand-line);
  background: var(--brand-soft);
  color: var(--text);
}
.audience-name { color: inherit }
.audience-count {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--muted-2);
  letter-spacing: .02em;
}
.audience-chip:hover .audience-count { color: var(--brand) }

@media (max-width: 768px) {
  .hero-audience { gap: 12px; padding-top: 20px; margin-top: 24px }
  .hero-audience-label { flex: 0 0 100%; }
}

/* ---------- Watch button on cards ---------- */
.watch-btn {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--line-2);
  background: var(--bg-3);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
  padding: 0;
}
.watch-btn:hover { color: var(--brand); border-color: var(--brand-line); background: var(--bg-2) }
.watch-btn.saved { color: var(--brand); border-color: var(--brand-line); background: var(--brand-soft) }
.watch-btn.saved svg { fill: currentColor }
.watch-btn:active { transform: scale(0.92) }

/* ---------- Watchlist section ---------- */
#watchlist { transition: opacity .25s var(--ease) }
.watchlist-head-stat { font-family: var(--font-mono); font-size: 13px; color: var(--muted) }
.link-button {
  background: transparent;
  border: 0;
  color: var(--brand);
  font: inherit;
  font-size: inherit;
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px solid var(--brand-line);
  padding: 0;
  margin-left: 8px;
}
.link-button:hover { color: #a8f5c2; border-color: #a8f5c2 }

/* ---------- Radar stats strip ---------- */
.radar-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 0 0 24px;
}
.radar-stat {
  background: var(--bg-2);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  color: inherit;
  transition: background .25s var(--ease);
  cursor: pointer;
}
.radar-stat:hover { background: var(--bg-3) }
.radar-stat-static { cursor: default }
.radar-stat-num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--text);
}
.radar-stat-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  font-weight: 500;
}

/* ---------- Radar logo animation (sweep + pulse) ---------- */
@keyframes reporadar-sweep {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes reporadar-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.7; }
}
@keyframes reporadar-ring-fade {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.15; }
}
.brand-mark .sweep {
  transform-origin: 16px 16px;
  animation: reporadar-sweep 4s linear infinite;
}
.brand-mark .pulse {
  transform-origin: 16px 16px;
  animation: reporadar-pulse 2s ease-in-out infinite;
}
.brand-mark:hover .ring { animation: reporadar-ring-fade 2s ease-in-out infinite }
.brand-mark:hover .ring:nth-child(3) { animation-delay: 0.2s }
.brand-mark:hover .ring:nth-child(2) { animation-delay: 0.4s }
.brand-mark:hover .ring:nth-child(1) { animation-delay: 0.6s }

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .brand-mark .sweep, .brand-mark .pulse, .brand-mark:hover .ring {
    animation: none;
  }
}