/* =========================================================================
       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: #7f8999;
      --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;
      --card-gap: 14px;
      --radius: 14px;
      --radius-lg: 22px;
      --radius-xl: 32px;
      --ease: cubic-bezier(.32, .72, 0, 1);
      --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
      --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      --font-mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, 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; flex-wrap: nowrap }
    .brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; letter-spacing: -.025em; font-size: 18px; color: var(--text); flex: 1 1 auto; min-width: 0; max-width: 100% }
    .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; min-width: 0 }
    .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), border-color .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 }
    .mobile-nav-actions { display: none; align-items: center; gap: 8px; margin-left: auto }
    .mobile-tip {
      display: inline-flex; align-items: center; justify-content: center;
      min-height: 40px; padding: 0 14px; border-radius: 999px;
      background: var(--brand); color: #0a0e16; font-size: 13px; font-weight: 700;
      box-shadow: 0 8px 22px -12px var(--brand-glow);
      white-space: nowrap;
    }
    .mobile-menu { position: relative; display: none }
    .nav-menu-toggle {
      list-style: none; display: inline-flex; align-items: center; justify-content: center;
      width: 42px; height: 40px; padding: 0; flex: 0 0 auto;
      border: 1px solid var(--line-2); border-radius: 999px;
      background: rgba(255, 255, 255, .07); color: var(--text); cursor: pointer;
      transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
    }
    .nav-menu-toggle::-webkit-details-marker { display: none }
    .nav-menu-toggle::marker { display: none; content: '' }
    .nav-menu-toggle::-moz-list-bullet { list-style: none }
    .nav-menu-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px }
    .nav-menu-toggle:hover, .mobile-menu[open] .nav-menu-toggle { background: var(--brand-soft); border-color: var(--brand-line) }
    .nav-menu-icon { display: grid; gap: 4px }
    .nav-menu-icon span { display: block; width: 18px; height: 2px; border-radius: 999px; background: currentColor }
    .mobile-menu-panel {
      position: absolute; top: calc(100% + 12px); right: 0; z-index: 80;
      width: min(286px, calc(100vw - 36px)); padding: 8px; display: grid; gap: 6px;
      border: 1px solid var(--line-2); border-radius: 18px;
      background: rgba(10, 14, 22, .97);
      box-shadow: 0 24px 70px rgba(0, 0, 0, .52);
      backdrop-filter: blur(20px) saturate(150%);
      -webkit-backdrop-filter: blur(20px) saturate(150%);
    }
    .mobile-menu-panel a {
      display: flex; align-items: center; justify-content: space-between;
      min-height: 42px; padding: 10px 12px; border-radius: 12px;
      color: var(--text-2); font-size: 14px; font-weight: 600;
      border: 1px solid transparent;
    }
    .mobile-menu-panel a:hover, .mobile-menu-panel a:focus-visible {
      color: var(--text); background: rgba(255, 255, 255, .055); border-color: var(--line);
      outline: none;
    }

    /* ---------- 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);
    }
    .hero h1 em { font-style: italic; font-weight: 400; color: var(--brand) }
    .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) }

    /* Stable action contract. Use these classes on generated and dynamic
       controls instead of relying on the element's surrounding component. */
    .rr-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 38px;
      padding: 8px 13px;
      border: 1px solid var(--line-2);
      border-radius: 999px;
      background: var(--bg-2);
      color: var(--text-2);
      font: 700 12px var(--font-body);
      line-height: 1.2;
      text-align: center;
      text-decoration: none;
      cursor: pointer;
      transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
    }
    .rr-button:hover { border-color: var(--brand-line); background: var(--bg-3); color: var(--text) }
    .rr-button:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px }
    .rr-button:disabled, .rr-button[aria-disabled="true"] { opacity: .48; cursor: not-allowed; transform: none }
    .rr-button[hidden] { display: none }
    .rr-button--primary { border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand) }
    .rr-button--primary:hover { background: rgba(126,240,168,.18); color: #b8ffcf }
    .rr-button--danger { color: #ffb0ba }
    .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: var(--card-gap);
      margin-top: 48px;
      background: transparent;
    }
    .stat { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); 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(3, minmax(0, 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;
      min-height: 232px;
    }
    .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 h3 { 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 }
    .today-card .today-desc {
      margin: 0; color: var(--text-2); font-size: 13px; line-height: 1.45;
      display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3;
      -webkit-box-orient: vertical; overflow: hidden;
    }

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

    /* ---------- Trending momentum chip ---------- */
    .popular-meta b.pop-delta { font-weight: 700; white-space: nowrap }
    .popular-meta b.pop-delta.up { color: var(--good); border-color: var(--brand-line); background: var(--brand-soft) }
    .popular-meta b.pop-delta.down { color: var(--bad); border-color: rgba(255, 138, 155, .3); background: rgba(255, 138, 155, .08) }
    .popular-meta b.pop-delta.flat { color: var(--muted) }

    /* ---------- Trending as ranked list (breaks card-grid monotony) ---------- */
    .popular-grid.as-ranked { grid-template-columns: 1fr; gap: var(--card-gap) }
    .popular-grid.as-ranked .popular-card { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; align-items: center; gap: 4px 18px; padding: 14px 20px; border-radius: var(--radius) }
    .popular-grid.as-ranked .popular-rank { grid-column: 1; grid-row: 1; margin: 0 }
    .popular-grid.as-ranked .popular-card h3 { grid-column: 2; grid-row: 1; font-size: 16px }
    .popular-grid.as-ranked .popular-meta { grid-column: 3; grid-row: 1; margin: 0; padding: 0; flex-wrap: nowrap }
    .popular-grid.as-ranked .popular-card p { grid-column: 2 / 4; grid-row: 2; margin: 0; font-size: 13px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden }
    .popular-grid.as-ranked .home-verification-stage { grid-column: 2; grid-row: 3 }
    .popular-grid.as-ranked .card-official-source { grid-column: 3; grid-row: 3; justify-self: end }
    @media (max-width: 640px) {
      .popular-grid.as-ranked .popular-card { grid-template-columns: 1fr; gap: 6px }
      .popular-grid.as-ranked .popular-rank { grid-row: auto }
      .popular-grid.as-ranked .popular-card h3 { grid-column: 1; grid-row: auto }
      .popular-grid.as-ranked .popular-meta { grid-column: 1; grid-row: auto }
      .popular-grid.as-ranked .popular-card p { grid-column: 1; grid-row: auto }
      .popular-grid.as-ranked .home-verification-stage, .popular-grid.as-ranked .card-official-source { grid-column: 1; grid-row: auto; justify-self: start }
    }

    /* ---------- 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: minmax(280px,1fr) auto; gap: 12px; align-items: center; margin: 4px 0 12px }
    .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; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.025) }
    .filter-btn, .sort-btn { display:inline-flex; align-items:center; justify-content:center; min-height:38px; 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: 600; 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 }
    .card-topline .source-avatar { width: 22px; height: 22px; border-radius: 6px }
    .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: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 14px }
    .card-grid > div { min-width: 0; max-width: 100%; overflow: hidden }
    .chips { display: flex; gap: 5px; flex-wrap: wrap; align-items: flex-start; min-width: 0; max-width: 100%; overflow: hidden }
    .chips span {
      display: inline-block;
      min-width: 0;
      max-width: 100%;
      box-sizing: border-box;
      font-size: 11.5px;
      line-height: 1.35;
      color: var(--text-2);
      background: var(--bg-3);
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 4px 9px;
      white-space: normal;
      overflow-wrap: anywhere;
      word-break: break-word;
      hyphens: auto;
    }
    .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 }
    .card-official-source, .home-verification-stage, .compare-check { position: relative; z-index: 3 }
    .card-official-source { align-self: flex-start; display: inline-flex; align-items: center; min-height: 32px; padding: 6px 0; color: var(--brand); font-size: 12px; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--brand-line) }
    .card-official-source:hover { border-color: var(--brand) }
    .home-verification-stage { display: inline-flex; align-self: flex-start; color: var(--muted); font-family: var(--font-mono); font-size: 10px; line-height: 1.35; letter-spacing: .04em; text-transform: uppercase }
    .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; align-items: flex-start; gap: 12px; flex-wrap: wrap; font-size: 13px }
    .links a { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 0; 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: var(--card-gap); background: transparent }
    .quality-card { border: 1px solid var(--line); border-radius: var(--radius-lg); 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; align-items: center; gap: 10px; flex-wrap: wrap }
    .footer-sep { color: rgba(126, 240, 168, .55); font-weight: 800 }
    .footer-links a,.footer-consent-choice { color: var(--muted); transition: color .25s var(--ease) }
    .footer-links a:hover,.footer-consent-choice:hover { color: var(--text) }
    .footer-consent-choice{display:inline-flex;align-items:center;min-height:24px;border:0;background:transparent;padding:2px 0;font:inherit;cursor:pointer;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px}
    .footer-consent-choice:focus-visible{color:var(--text);text-decoration-color:currentColor;outline:2px solid var(--brand);outline-offset:4px;border-radius:2px}

    /* ---------- 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 { align-items: center; flex-wrap: nowrap; gap: 10px; padding: 10px 0 12px }
      .brand { flex: 1 1 auto; min-width: 0 }
      .brand .name { white-space: nowrap }
      .nav-links { display: none }
      .mobile-nav-actions { display: flex; flex: 0 0 auto }
      .mobile-menu { display: block }
    }
    @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 }
      .mobile-tip { min-height: 38px; padding: 0 11px; font-size: 12.5px }
      .nav-menu-toggle { width: 40px; height: 38px }
      .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); overflow-wrap: anywhere; word-break: break-word }
.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); overflow-wrap: anywhere; word-break: break-word }
.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(3, minmax(0, 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 h3 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; word-break: break-word }
.rising-card .rising-desc {
  margin: 0; color: var(--text-2); font-size: 13px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
}
.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: var(--card-gap);
  background: transparent;
  margin: 0 0 24px;
}
.radar-stat {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  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;
  }
}


/* ========================================================================= */
/* News Feed Styles                                                          */
/* The /news/ page renders a vertical feed of article rows. The default      */
/* layout is text-first (no thumbnail) so a missing preview image never      */
/* shows up as a large blank tile; if a real preview_image_url is set on a  */
/* row, .news-item--with-image flips the row to a horizontal image-left    */
/* layout. The styles below are kept in sync with the inline <style> in    */
/* radar_pipeline/public_site.py so the v2 rewrite output also looks right. */
/* ========================================================================= */
.news-feed {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 22px;
}

.news-item {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}

.news-item:hover {
  border-color: var(--line-3);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .35);
  transform: translateY(-1px);
}

.news-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.news-item--with-image .news-card {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 0;
}

.news-image-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--bg-3);
  overflow: hidden;
  flex-shrink: 0;
}

.news-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.image-fallback {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0f1320 0%, #1d2335 100%);
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 700;
  color: var(--brand);
  letter-spacing: .08em;
}

.image-fallback::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(126, 240, 168, .10), transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(148, 200, 255, .06), transparent 60%);
  pointer-events: none;
}

.news-content {
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.news-item--with-image .news-content {
  padding: 20px 24px;
}

.news-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--muted-2);
  flex-wrap: wrap;
}

.news-source-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  color: var(--brand);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  flex: 0 0 auto;
}

.category-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  border-radius: 6px;
  background: var(--bg-4);
  color: var(--text-2);
  font-weight: 600;
  border-left: 3px solid var(--muted-2);
}

.category-chip.chip-company { border-left-color: #60a5fa }
.category-chip.chip-model { border-left-color: #f472b6 }
.category-chip.chip-funding { border-left-color: #fbbf24 }
.category-chip.chip-launch { border-left-color: var(--good) }
.category-chip.chip-pricing { border-left-color: #fb923c }
.category-chip.chip-research { border-left-color: #a78bfa }
.category-chip.chip-open-source { border-left-color: #60a5fa }
.category-chip.chip-safety { border-left-color: var(--bad) }
.category-chip.chip-legal { border-left-color: #e5e7eb }
.category-chip.chip-infra { border-left-color: #9ca3af }
.category-chip.chip-market { border-left-color: #818cf8 }

.source-label {
  font-weight: 600;
  color: var(--text);
}

.publish-date {
  font-family: var(--font-mono);
  white-space: nowrap;
  font-size: 12px;
  color: var(--muted-2);
}

.news-headline {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -.02em;
  margin: 0;
  color: var(--text);
  word-break: break-word;
}

.news-summary {
  font-size: 14.5px;
  color: var(--text-2);
  line-height: 1.6;
  margin: 0;
  word-break: break-word;
}

.why-matters {
  font-size: 13.5px;
  color: var(--muted);
  padding: 10px 12px 10px 14px;
  border-left: 2px solid var(--brand-line);
  background: var(--brand-soft);
  border-radius: 0 8px 8px 0;
  margin: 0;
  line-height: 1.55;
}

.why-matters--placeholder {
  border-left-color: var(--line-3);
  background: var(--bg-3);
  color: var(--muted-2);
  font-style: italic;
}

.why-label {
  display: block;
  font-weight: 700;
  color: var(--brand);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 10.5px;
  margin-bottom: 4px;
}

.why-matters--placeholder .why-label {
  color: var(--muted);
}

.news-footer-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.relevance-rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.rating-prefix {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted-2);
  font-weight: 600;
}

.rating-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  border-radius: 999px;
  font-weight: 700;
  border: 1px solid transparent;
}

.rating-pill.rating-essential { background: rgba(34, 197, 94, .14); color: #4ade80; border-color: rgba(34, 197, 94, .35) }
.rating-pill.rating-high { background: rgba(126, 240, 168, .14); color: var(--brand); border-color: rgba(126, 240, 168, .35) }
.rating-pill.rating-relevant { background: rgba(96, 165, 250, .14); color: #93c5fd; border-color: rgba(96, 165, 250, .35) }
.rating-pill.rating-context { background: rgba(167, 139, 250, .14); color: #c4b5fd; border-color: rgba(167, 139, 250, .35) }
.rating-pill.rating-low { background: rgba(148, 163, 184, .10); color: var(--muted); border-color: var(--line-2) }

.rating-score {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--muted-2);
  font-weight: 600;
  margin-left: -2px;
}

.evidence-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  border-radius: 6px;
  background: var(--bg-4);
  color: var(--muted-2);
  font-weight: 600;
  border-left: 3px solid var(--muted-2);
}

.evidence-badge.badge-strong { border-left-color: var(--good); color: var(--text-2) }
.evidence-badge.badge-moderate { border-left-color: var(--accent); color: var(--text-2) }

.source-link {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--muted);
  font-family: var(--font-mono);
}

.source-link-domain { color: var(--text-2); }
.source-link-arrow {
  color: var(--brand);
  transition: transform .25s var(--ease);
  display: inline-block;
}
.news-item:hover .source-link-arrow { transform: translateX(3px); }

.source-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 13.5px;
  color: var(--brand);
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  border-radius: 8px;
  transition: background .2s var(--ease), transform .1s ease;
}
.source-link-btn:hover {
  background: rgba(126, 240, 168, .18);
  transform: translateY(-1px);
}
.source-link-btn:active { transform: translateY(0); }

.news-empty {
  margin-top: 22px;
  padding: 36px 28px;
  background: var(--bg-2);
  border: 1px dashed var(--line-2);
  border-radius: var(--radius-lg);
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
  text-align: center;
}

.feed-meta {
  margin-top: 18px;
  color: var(--muted-2);
  font-size: 12px;
  font-family: var(--font-mono);
}

/* Tablet — slightly narrower image column (with-image variant only) */
@media (max-width: 900px) {
  .news-item--with-image .news-card { grid-template-columns: 200px 1fr; }
  .news-item--with-image .news-image-wrapper { aspect-ratio: 1 / 1; }
  .news-content { padding: 18px 20px; }
  .news-item--with-image .news-content { padding: 18px 20px; }
  .news-headline { font-size: 22px; }
}

/* Mobile — stack image above content (with-image variant only) */
@media (max-width: 680px) {
  .news-item--with-image .news-card { grid-template-columns: 1fr; }
  .news-item--with-image .news-image-wrapper { width: 100%; aspect-ratio: 16 / 9; }
  .news-content { padding: 16px 18px; }
  .news-headline { font-size: 20px; }
  .news-summary, .why-matters { font-size: 13.5px; }
  .source-link { margin-left: 0; }
  .news-footer-row { gap: 8px; }
}

@media (max-width: 420px) {
  .news-feed { gap: 12px; }
  .news-content { padding: 14px 16px 16px; gap: 8px; }
  .news-headline { font-size: 18px; }
}

/* ---------- Daily change report ---------- */
.change-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--card-gap); background: transparent }
.change-stat { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-2); padding: 20px 18px 18px; min-width: 0; display: flex; flex-direction: column; gap: 12px }
.change-stat span { display: block; color: var(--muted); font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; font-weight: 600; padding-bottom: 8px; border-bottom: 1px solid var(--line) }
.change-stat strong { display: block; font-family: var(--font-display); font-size: 32px; line-height: 1; font-weight: 400; letter-spacing: -.04em; color: var(--text); margin: -2px 0 0 }
.change-stat p { color: var(--muted); font-size: 12.5px; line-height: 1.45; margin: 0 }
.change-highlights { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 14px }
.hero-actions.catalog-actions { margin-top: 28px }
.change-card { display: flex; min-height: 170px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); padding: 16px }
.change-card a { display: flex; flex: 1; flex-direction: column; gap: 9px; min-width: 0; color: inherit; text-decoration: none }
.change-card a:hover { border-color: var(--brand-line); background: var(--bg-3) }
.change-card span { color: var(--brand); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase }
.change-card strong { color: var(--text); font-size: 15px; line-height: 1.25; letter-spacing: -.02em }
.change-card p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.45 }

/* ---------- Score breakdown ---------- */
.score-breakdown { position: relative; z-index: 3; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.025); overflow: hidden }
.score-breakdown summary { cursor: pointer; padding: 10px 12px; color: var(--text-2); font-size: 12.5px; font-weight: 650; list-style: none }
.score-breakdown summary::-webkit-details-marker { display: none }
.score-breakdown summary::after { content: '+'; float: right; color: var(--brand); font-family: var(--font-mono) }
.score-breakdown[open] summary::after { content: '–' }
.score-breakdown-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border-top: 1px solid var(--line) }
.score-breakdown-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; background: var(--bg-3); min-width: 0 }
.score-breakdown-row span { color: var(--muted); font-size: 11px; line-height: 1.25 }
.score-breakdown-row strong { font-family: var(--font-mono); font-size: 12px; color: var(--text); font-weight: 650 }
.score-breakdown p { margin: 0; padding: 9px 12px 11px; color: var(--muted); font-size: 11.5px; line-height: 1.4; border-top: 1px solid var(--line) }

/* ---------- Item detail pages ---------- */
.item-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start }
.panel-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-2); padding: 24px }
.item-main { display: grid; gap: 18px }
.item-main h2, .item-aside h2 { margin: 8px 0 0; font-size: 20px; letter-spacing: -.03em; color: var(--text) }
.item-main p, .item-main li, .item-note { color: var(--text-2); line-height: 1.62; font-size: 14.5px }
.item-main ul { margin: 0; padding-left: 20px }
.item-main a { color: var(--brand); text-decoration: none; border-bottom: 1px solid var(--brand-line) }
.item-score-row { margin-bottom: 4px }
.item-tags { margin-top: -4px }
.related-list span { color: var(--muted); font-family: var(--font-mono); font-size: 11px; margin-left: 6px }
.item-aside dl { display: grid; gap: 10px; margin: 14px 0 }
.item-aside dt { color: var(--muted); font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em }
.item-aside dd { margin: -6px 0 0; color: var(--text); font-size: 14px }
.item-note { margin: 14px 0 0; color: var(--muted) }

/* ---------- Radar result count ---------- */
.result-count { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); margin: 0 0 14px; letter-spacing: .02em }

/* ---------- Radar controls (density toggle) ---------- */
.radar-controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 14px }
.radar-controls-label { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted-2); margin-right: 4px }
.density-btn { border: 1px solid var(--line-2); color: var(--muted); background: transparent; padding: 6px 12px; border-radius: 999px; font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; transition: all .25s var(--ease) }
.density-btn:hover { color: var(--text); border-color: var(--line-3) }
.density-btn.active { color: var(--text); border-color: var(--brand-line); background: var(--brand-soft) }

/* ---------- Radar compact density ---------- */
.cards.cards-compact { grid-template-columns: 1fr; gap: var(--card-gap) }
.cards-compact .card { padding: 12px 18px }
.cards-compact .card .controlled-copy,
.cards-compact .card .score-row,
.cards-compact .card .score-breakdown,
.cards-compact .card .card-grid,
.cards-compact .card .detail-section,
.cards-compact .card .basis,
.cards-compact .card .timestamp { display: none }
.cards-compact .card .verdict-line { border-top: 0; padding-top: 0 }

/* ---------- Compare (per-card select + tray + modal) ---------- */
.compare-check { position: relative; z-index: 3; display: inline-flex; align-items: center; gap: 5px; min-height: 32px; font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); background: var(--bg-3); border: 1px solid var(--line-2); border-radius: 8px; padding: 3px 8px; cursor: pointer }
.compare-check:hover { color: var(--text); border-color: var(--brand-line) }
.compare-check input { flex: 0 0 24px; width: 24px; height: 24px; margin: 0; cursor: pointer; accent-color: var(--brand) }
.card.compare-selected { border-color: var(--brand-line); box-shadow: 0 0 0 1px var(--brand-line) }
.compare-tray { position: fixed; left: 50%; transform: translateX(-50%); bottom: 20px; z-index: 60; display: flex; align-items: center; gap: 12px; background: rgba(10, 14, 22, .95); border: 1px solid var(--line-2); border-radius: 999px; padding: 10px 16px; box-shadow: 0 18px 50px rgba(0, 0, 0, .5); backdrop-filter: blur(12px) }
.compare-tray[hidden] { display: none }
.compare-tray-label { font-size: 13px; color: var(--text-2); font-weight: 600 }
.compare-tray button { display:inline-flex; align-items:center; justify-content:center; min-height:38px; border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid var(--line-2); background: transparent; color: var(--text); transition: background .25s var(--ease) }
.compare-tray .compare-clear:hover { background: rgba(255, 255, 255, .05) }
.compare-tray .compare-open { background: var(--brand); color: #0a0e16; border-color: var(--brand) }
.compare-tray .compare-open:hover { background: #a8f5c2 }
.compare-tray .compare-open:disabled { opacity: .5; cursor: not-allowed }
.compare-modal { position: fixed; inset: 0; z-index: 70; background: rgba(5, 8, 13, .7); display: flex; align-items: center; justify-content: center; padding: 24px; backdrop-filter: blur(6px) }
.compare-modal[hidden] { display: none }
.compare-modal-inner { position: relative; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--radius-lg); padding: 28px; max-width: 760px; width: 100%; max-height: 85vh; overflow: auto }
.compare-close { position: absolute; top: 14px; right: 14px; display:inline-flex; align-items:center; justify-content:center; min-height:38px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--bg-3); color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer }
.compare-modal h2 { font-family: var(--font-display); font-weight: 400; font-size: 28px; letter-spacing: -.03em; margin: 0 0 16px }
.compare-table { width: 100%; border-collapse: collapse; font-size: 14px }
.compare-table th, .compare-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top }
.compare-table thead th { color: var(--text); font-weight: 600 }
.compare-table thead th a { color: var(--brand); border-bottom: 1px solid var(--brand-line) }
.compare-table tbody th { color: var(--muted); font-weight: 500; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap }
.compare-table td { color: var(--text-2); font-family: var(--font-mono) }

/* ---------- Homepage jump-nav + Today freshness + Pick rationale ---------- */
.jump-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 18px 0 0 }
.jump-nav-label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted-2); margin-right: 6px }
.jump-nav a { color: var(--text-2); font-size: 13px; font-weight: 500; padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 999px; transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease) }
.jump-nav a:hover { color: var(--text); border-color: var(--brand-line); background: var(--brand-soft) }
.today-fresh { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--brand); background: var(--brand-soft); border: 1px solid var(--brand-line); border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 600 }
.today-fresh[hidden] { display: none }
.pick-why { margin: 0; color: var(--text-2); font-size: 13px; line-height: 1.5; border-left: 2px solid var(--brand-line); padding-left: 10px }

/* ---------- Item source avatar + guide cross-link ---------- */
.item-source-row { display: flex; align-items: center; gap: 10px; margin: 0 0 6px }
.source-avatar { width: 28px; height: 28px; border-radius: 7px; background: var(--bg-3); border: 1px solid var(--line-2); flex: 0 0 auto }
.source-avatar--initial { display: inline-flex; align-items: center; justify-content: center; color: var(--brand); font-family: var(--font-mono); font-size: 12px; font-weight: 700; line-height: 1 }
.item-source-row span { color: var(--muted); font-family: var(--font-mono); font-size: 12.5px; overflow-wrap: anywhere }
.guide-callout { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--brand-line); background: var(--brand-soft); border-radius: var(--radius); padding: 14px 16px; margin: 4px 0 0 }
.guide-callout p { margin: 0; color: var(--text-2); line-height: 1.55; font-size: 14px }
.guide-callout a { color: var(--brand); border-bottom: 1px solid var(--brand-line) }
.guide-callout a:hover { border-color: var(--brand) }
.guide-callout-icon { color: var(--brand); font-family: var(--font-mono); font-weight: 700; flex: 0 0 auto; line-height: 1.5 }

@media (max-width: 1024px) {
  .change-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .change-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .item-layout { grid-template-columns: 1fr }
}
@media (max-width: 640px) {
  .change-grid, .change-highlights { grid-template-columns: 1fr }
  .score-breakdown-grid { grid-template-columns: 1fr }
  .panel-card { padding: 18px }
}

/* Item-page breadcrumb (SEO rich result + internal linking) */
.breadcrumb { width: min(var(--shell-w), calc(100vw - 2 * var(--shell-pad))); margin: 0 auto; padding: 18px 0 0; font-size: 12.5px; color: var(--muted) }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center }
.breadcrumb li { display: inline-flex; align-items: center; gap: 6px; min-width: 0 }
.breadcrumb li + li::before { content: "/"; color: var(--muted); opacity: .55 }
.breadcrumb a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 1px; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.breadcrumb a:hover { color: var(--text) }
.breadcrumb li:last-child a { color: var(--text); border-color: transparent; pointer-events: none }


/* ---------- Visual/UX triage hardening ---------- */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, canvas, iframe { max-width: 100%; }
main, header, footer, section, .shell, .panel, .card, .news-card, .newsletter-panel, .tip-block { min-width: 0; }
h1, h2, h3, h4, p, li, a, span, strong { overflow-wrap: anywhere; }
.ad-slot-container.is-empty, .ad-slot-container:has(ins.adsbygoogle[data-ad-status="unfilled"]) { display: none !important; }
.ad-slot-container ins.adsbygoogle { min-height: 0 !important; }
.change-stat--zero { opacity: 1; }
.change-stat--zero strong { color: var(--muted-2); font-size: 26px; }
.change-stat--zero p { color: var(--muted); }
.item-hero { padding-top: 46px; padding-bottom: 28px; }
.item-hero h1 { max-width: 980px; font-size: clamp(38px, 5.4vw, 70px); }
.item-detail-group { border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.025); padding: 0; overflow: hidden; }
.item-detail-group summary { cursor: pointer; list-style: none; padding: 13px 16px; color: var(--text); font-weight: 750; }
.item-detail-group summary::-webkit-details-marker { display: none; }
.item-detail-group summary::after { content: '+'; float: right; color: var(--brand); font-family: var(--font-mono); }
.item-detail-group[open] summary::after { content: '–'; }
.item-detail-group p, .item-detail-group ul { margin: 0; padding: 0 16px 16px 16px; }
.item-detail-group ul { padding-left: 34px; }
.newsletter-trust-row { display:flex; flex-wrap:wrap; gap:8px; margin: 2px 0 8px; }
.newsletter-trust-row span { border:1px solid var(--brand-line); background:var(--brand-soft); color:var(--text-2); border-radius:999px; padding:5px 9px; font-size:11.5px; font-weight:700; }
.newsletter-trust-row .newsletter-sep { border:0; background:transparent; padding:0; color:var(--brand); font-weight:900; }
@media (max-width: 520px) {
  :root { --shell-pad: 16px; }
  .hero h1, .page-hero h1 { font-size: clamp(34px, 10.5vw, 48px); }
  .primary, .secondary, .tip-button, .mobile-tip, .newsletter-row button { max-width: 100%; white-space: normal; text-align: center; justify-content: center; }
  .newsletter-row, .hero-actions, .catalog-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
  .hero > .hero-actions a:nth-child(n+3) { display: none; }
  .toolbar { grid-template-columns: 1fr; }
  .sort-control { justify-content: flex-start; }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .mobile-menu-panel { right: 0; max-width: calc(100vw - 24px); }
}

/* ---------- Visual QA polish, June 2026 ---------- */
.radar-controls { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin: 0 0 14px; padding: 10px 12px; border:1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.025) }
.radar-controls-label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600 }
.radar-controls-spacer { flex: 1 1 auto }

/* Bounded indexed catalog, saved workspace, and responsive comparison. */
.catalog-pagination{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;margin:24px 0 8px}.catalog-pagination button,.save-search-btn,.saved-items-link,.compare-share{border:1px solid var(--line-2);background:var(--bg-2);color:var(--text-2);border-radius:999px;min-height:38px;padding:8px 13px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;text-decoration:none}.catalog-pagination button:hover,.save-search-btn:hover,.saved-items-link:hover{border-color:var(--brand-line);color:var(--text);background:var(--bg-3)}.catalog-pagination button.active{color:#07140c;background:var(--brand);border-color:var(--brand)}.catalog-pagination button:disabled{opacity:.42;cursor:not-allowed}.catalog-page-summary{width:100%;text-align:center;color:var(--muted);font:11px var(--font-mono)}.catalog-noscript,.catalog-empty{border:1px solid var(--line);background:rgba(255,255,255,.025);color:var(--text-2);border-radius:var(--radius);padding:18px 20px;margin:18px 0}.catalog-empty{grid-column:1/-1;text-align:center;padding:48px 24px}.catalog-empty h3{color:var(--text);margin:0 0 8px;font:400 24px var(--font-display)}.result-count[role=status]{min-height:22px}.result-count-error{color:#ffb0ba}.saved-items-link{display:inline-flex;align-items:center;gap:7px}.saved-count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;color:#07140c;background:var(--brand);font:10.5px var(--font-mono)}
.modal-open{overflow:hidden}.compare-share{margin:0 0 16px}.compare-grid{display:grid;gap:7px;min-width:0}.compare-grid-row{display:grid;grid-template-columns:minmax(108px,.72fr) repeat(auto-fit,minmax(120px,1fr));min-width:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:rgba(255,255,255,.018)}.compare-grid-head{background:rgba(126,240,168,.055)}.compare-grid-label,.compare-grid-value{padding:11px 12px;min-width:0;overflow-wrap:anywhere}.compare-grid-label{color:var(--muted);font:11px var(--font-mono);text-transform:uppercase;letter-spacing:.07em}.compare-grid-value{color:var(--text-2);border-left:1px solid var(--line);font-size:13px}.compare-grid-value a{color:var(--brand);font-weight:700}.compare-tray{max-width:min(560px,calc(100vw - 24px));left:50%;right:auto;transform:translateX(-50%);display:flex;align-items:center;gap:8px}.compare-tray[hidden]{display:none}.compare-tray-label{flex:1;min-width:0;word-break:normal;white-space:normal}
.saved-home-panel{grid-column:1/-1;width:100%;border:1px solid var(--brand-line);background:var(--brand-soft);border-radius:var(--radius-lg);padding:24px;text-align:center}.saved-page{padding-bottom:72px}.saved-dashboard{margin:0 0 18px}.saved-dashboard-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap}.saved-dashboard-actions,.saved-search-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.saved-import{position:relative;overflow:hidden}.saved-import input{position:absolute;inset:0;opacity:0;cursor:pointer}.saved-remove{position:relative;z-index:3;align-self:flex-start;margin-top:10px}.saved-search-list,.saved-alert-list{display:grid;gap:10px}.saved-search-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:15px 16px;border:1px solid var(--line);background:rgba(255,255,255,.025);border-radius:var(--radius)}.saved-search-row h3{margin:0 0 5px;color:var(--text);font-size:16px}.saved-search-row p,.saved-empty-copy{margin:0;color:var(--muted);font-size:13px}.saved-alert-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--brand-line);background:var(--brand-soft);border-radius:12px}.saved-alert-row span{color:var(--muted);font-size:12px}.saved-missing-card{border-style:dashed}
@media(max-width:640px){.catalog-pagination{justify-content:stretch}.catalog-pagination button{flex:1;padding-inline:10px}.radar-controls-spacer{display:none}.save-search-btn,.saved-items-link{flex:1 1 calc(50% - 5px);justify-content:center}.compare-tray{bottom:10px;width:calc(100vw - 24px);max-width:none;min-height:52px;max-height:64px;padding:8px 10px;border-radius:16px;flex-flow:row nowrap!important}.compare-tray-label{font-size:11px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.compare-tray button{padding:7px 9px;white-space:nowrap}.compare-modal{padding:10px;align-items:flex-end}.compare-modal-inner{padding:20px 14px 16px;max-height:92vh;border-radius:22px 22px 12px 12px;overflow-x:hidden}.compare-grid-row{grid-template-columns:repeat(2,minmax(0,1fr))}.compare-grid-label{grid-column:1/-1;border-bottom:1px solid var(--line)}.compare-grid-value{border-left:0;border-right:1px solid var(--line);font-size:12px}.saved-dashboard-head,.saved-search-row,.saved-alert-row{display:grid;grid-template-columns:1fr}.saved-dashboard-actions>* ,.saved-search-actions>*{flex:1}}
.load-more-btn { border:1px solid var(--brand-line); background: var(--brand-soft); color: var(--brand); border-radius:999px; padding:8px 12px; font: inherit; font-size:12.5px; font-weight:700; cursor:pointer }
.load-more-btn:hover { background: rgba(126,240,168,.18) }
.result-count { color: var(--muted); font-size: 13px; margin: 0 0 12px }
.email-sample-line { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap }
.email-sample-line em { font-style:normal; color:var(--text-2) }
.email-list li strong { display:block; margin-bottom:3px }
@media (max-width: 980px) { .today-grid, .rising-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) } .toolbar { grid-template-columns: 1fr } .sort-control { justify-content:flex-start } }
@media (max-width: 640px) { .today-grid, .rising-grid { grid-template-columns: 1fr } .today-card { min-height: 0 } .filters { max-height: 220px; overflow:auto } }

/* ---------- RepoRadar decision engine ---------- */
.nav-links a[aria-current="page"],.mobile-menu-panel a[aria-current="page"]{color:var(--brand)}
.decision-page{background:radial-gradient(circle at 84% 4%,rgba(126,240,168,.07),transparent 30%),var(--bg)}
.decision-main{padding-top:38px;padding-bottom:88px}
.decision-hero{position:relative;overflow:hidden;padding:clamp(34px,6vw,76px);border:1px solid var(--line-2);border-radius:28px;background:linear-gradient(135deg,rgba(126,240,168,.075),rgba(255,255,255,.022) 42%,rgba(137,162,255,.045));box-shadow:0 30px 80px rgba(0,0,0,.2)}
.decision-hero::after{content:"";position:absolute;width:340px;height:340px;border:1px solid rgba(126,240,168,.12);border-radius:50%;right:-170px;top:-170px;box-shadow:0 0 0 58px rgba(126,240,168,.025),0 0 0 118px rgba(126,240,168,.018);pointer-events:none}
.decision-hero .eyebrow,.decision-hero>.section-eyebrow{display:inline-flex;margin-bottom:18px}
.decision-hero h1{max-width:950px;margin:0;color:var(--text);font:400 clamp(42px,7vw,78px)/.98 var(--font-display);letter-spacing:-.055em}
.decision-hero h1 em{color:var(--brand);font-weight:400}.decision-hero>p{position:relative;z-index:1;max-width:770px;margin:22px 0 0;color:var(--text-2);font-size:clamp(16px,2vw,20px);line-height:1.6}
.decision-section,.item-decision-panel,.item-history-panel,.personal-change-panel{margin-top:28px;padding:clamp(24px,4vw,42px);border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.024)}
.decision-section>h2,.item-decision-panel h2,.item-history-panel h2,.personal-change-panel h2{margin:0 0 14px;color:var(--text);font:400 clamp(27px,3.5vw,42px)/1.12 var(--font-display);letter-spacing:-.035em}
.decision-section h3,.item-history-panel h3{color:var(--text);font-size:16px}.decision-section p,.decision-section li,.item-decision-panel p,.item-decision-panel li,.item-history-panel p,.personal-change-panel p{color:var(--text-2);line-height:1.65}.decision-section a,.item-decision-panel a,.item-history-panel a,.personal-change-panel a{color:var(--brand)}.item-decision-panel>ul>li>a{text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.18em}
.section-eyebrow{display:block;margin:0 0 9px;color:var(--brand);font:700 11px/1.4 var(--font-mono);text-transform:uppercase;letter-spacing:.11em}
.decision-kpis{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.decision-kpis>div{min-width:150px;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:rgba(5,7,13,.34)}.decision-kpis strong{display:block;color:var(--text);font:500 26px var(--font-display)}.decision-kpis span{display:block;margin-top:3px;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.07em}
.evidence-ladder{counter-reset:evidence;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}.evidence-ladder li{position:relative;min-height:166px;padding:50px 16px 16px;border:1px solid var(--line);border-radius:16px;background:rgba(5,7,13,.28)}.evidence-ladder li::before{counter-increment:evidence;content:counter(evidence);position:absolute;top:14px;left:16px;display:grid;place-items:center;width:25px;height:25px;border:1px solid var(--brand-line);border-radius:50%;color:var(--brand);font:700 11px var(--font-mono)}.evidence-ladder li:not(:last-child)::after{content:"";position:absolute;z-index:2;right:-11px;top:27px;width:11px;border-top:1px solid var(--brand-line)}.evidence-ladder strong,.evidence-ladder span{display:block}.evidence-ladder strong{margin-bottom:8px;color:var(--text);font-size:14px}.evidence-ladder span{color:var(--muted);font-size:12px;line-height:1.5}
.decision-grid,.comparison-card-grid,.plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.decision-card,.comparison-card,.plan-card{display:flex;flex-direction:column;min-width:0;padding:22px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(150deg,rgba(255,255,255,.038),rgba(255,255,255,.012))}.decision-card h2,.comparison-card h2,.plan-card h2{margin:14px 0 9px;color:var(--text);font:400 25px/1.1 var(--font-display);letter-spacing:-.025em}.decision-card h2 a,.comparison-card h2 a{color:var(--text);text-decoration:none}.decision-card h2 a:hover,.comparison-card h2 a:hover{color:var(--brand)}.decision-card>p,.comparison-card>p,.plan-card li{color:var(--text-2);font-size:13px;line-height:1.58}
.decision-card-top,.decision-card-actions,.item-decision-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.decision-category{color:var(--muted);font:700 10px var(--font-mono);text-transform:uppercase;letter-spacing:.07em}.verification-badge{display:inline-flex;align-items:center;min-height:27px;padding:5px 9px;border:1px solid var(--line-2);border-radius:999px;color:var(--text-2);background:var(--bg-2);font:700 10px var(--font-mono);text-transform:uppercase;letter-spacing:.045em}.verification-editorially_reviewed{border-color:rgba(137,162,255,.36);background:rgba(137,162,255,.09);color:#c5d1ff}.verification-installed_and_tested,.verification-bounded_workflow_tested,.verification-retested_recently,.verification-used_in_real_workflow{border-color:var(--brand-line);background:var(--brand-soft);color:var(--brand)}
.decision-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:16px 0}.decision-facts>div{padding:10px;border:1px solid var(--line);border-radius:11px;background:rgba(5,7,13,.28)}.decision-facts strong,.decision-facts span{display:block}.decision-facts strong{color:var(--text);font-size:13px;text-transform:capitalize}.decision-facts span{margin-top:3px;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.08em}.decision-price{flex:1}.decision-card-actions{justify-content:flex-start;margin-top:16px}.decision-card-actions a,.decision-card-actions button,.account-panel button{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:9px 13px;border:1px solid var(--line-2);border-radius:999px;background:var(--bg-2);color:var(--text-2);font:700 12px var(--font-body);text-decoration:none;cursor:pointer}.decision-card-actions a:first-child,.decision-card-actions button:first-child{border-color:var(--brand-line);background:var(--brand-soft);color:var(--brand)}
.breadcrumbs{display:flex;align-items:center;gap:9px;margin:0 0 18px;color:var(--muted);font-size:12px}.breadcrumbs a{color:var(--text-2)}.editorial-comparison{overflow-x:auto;border:1px solid var(--line);border-radius:16px}.comparison-row{display:grid;grid-template-columns:minmax(130px,.7fr) repeat(3,minmax(210px,1fr));min-width:820px}.comparison-row>div{padding:15px 16px;border-right:1px solid var(--line);border-top:1px solid var(--line);color:var(--text-2);font-size:13px;line-height:1.55}.comparison-row>div:last-child{border-right:0}.comparison-row:first-child>div{border-top:0}.comparison-head{background:rgba(126,240,168,.055)}.comparison-head a{color:var(--text);font-weight:800}.comparison-conclusion{max-width:900px;font-size:18px!important}.recommendation-list{display:grid;gap:8px;max-width:900px}
.comparison-card .chips,.decision-section .chips{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0 18px}.comparison-card .chips span,.decision-section .chips span{padding:6px 9px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:11px}.comparison-card>a{margin-top:auto;color:var(--brand);font-weight:700;text-decoration:none}
.pricing-table{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;border:1px solid var(--line);border-radius:14px}.pricing-table th,.pricing-table td{padding:13px 15px;border-top:1px solid var(--line);text-align:left;color:var(--text-2)}.pricing-table thead th{border-top:0;color:var(--muted);font:700 10px var(--font-mono);text-transform:uppercase;letter-spacing:.08em}.pricing-table tbody th{color:var(--text)}.source-freshness{color:var(--muted)!important;font:11px var(--font-mono)}.decision-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}.decision-columns>div{padding:18px;border:1px solid var(--line);border-radius:14px}.decision-columns h3{margin-top:0}.decision-columns p{margin-bottom:0}
.plan-card>strong{display:block;color:var(--brand);font:500 32px var(--font-display)}.plan-card ul{flex:1;padding-left:19px}.plan-card>a{align-self:flex-start;margin-top:14px}.policy-list{display:grid;gap:9px;max-width:900px}.decision-section pre{overflow-x:auto;padding:18px;border:1px solid var(--line);border-radius:14px;background:#05070d;color:#b8c7da}
.personal-change-panel{display:grid;grid-template-columns:minmax(220px,.55fr) 1fr;gap:26px;align-items:start;border-color:var(--brand-line);background:linear-gradient(130deg,var(--brand-soft),rgba(255,255,255,.018))}.personal-change-panel.shell{margin-top:24px;margin-bottom:14px}.personal-change-panel h2{margin-bottom:7px}.personal-change-results{display:grid;justify-items:start;gap:12px;min-width:0}.personal-change-results>p{margin:0}.personal-change-history{display:inline-flex;align-items:center;min-height:32px;font-size:13px}.personal-change-group{width:100%;padding:0 0 14px}.personal-change-group+.personal-change-group{padding-top:14px;border-top:1px solid var(--line)}.personal-change-group h3{margin:0 0 8px;color:var(--text);font-size:13px}.personal-change-row{padding:8px 0}.personal-change-row a{color:var(--text);font-weight:750}.personal-change-row p{margin:3px 0 0;color:var(--muted);font-size:12px}.personal-change-panel button{justify-self:start}
.change-list{display:grid;gap:var(--card-gap)}.change-row{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;padding:18px;border:1px solid var(--line);border-radius:14px}.change-row h2{margin:4px 0;font:400 21px var(--font-display)}.change-row h2 a{color:var(--text);text-decoration:none}.change-row p{margin:0;color:var(--muted);font-size:13px}.change-kind{color:var(--brand);font:700 9px var(--font-mono);text-transform:uppercase;letter-spacing:.08em}.change-delta{display:flex;align-items:center;justify-content:flex-end;gap:8px;color:var(--muted);font-size:12px}.change-delta time{display:block;margin-left:8px;color:var(--muted);font:9px var(--font-mono)}.change-before{text-decoration:line-through;opacity:.6}
.item-decision-panel,.item-history-panel{width:min(var(--shell-w),calc(100vw - 2 * var(--shell-pad)));margin-left:auto;margin-right:auto}.item-decision-head{align-items:flex-start}.item-decision-panel ul{padding-left:20px}.account-panel form{display:grid;grid-template-columns:minmax(180px,420px) auto;gap:10px;align-items:end}.account-panel label{display:grid;gap:8px;color:var(--text-2);font-size:13px}.account-panel input[type="email"]{min-height:44px;padding:10px 12px;border:1px solid var(--line-2);border-radius:10px;background:var(--bg-2);color:var(--text);font:inherit}.account-panel [data-account-signed-in]>label{display:flex;margin:11px 0}.account-panel [data-account-signed-in]>label input{accent-color:var(--brand)}
.run-evidence{margin:16px 0;padding:18px;border:1px solid var(--line);border-radius:14px;background:rgba(0,0,0,.12)}.run-evidence h3,.run-evidence h4{margin:0 0 8px;color:var(--text);font:600 16px/1.3 var(--font-sans)}.run-evidence-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.run-evidence-grid>div{min-width:0;padding:12px;border-radius:10px;background:rgba(255,255,255,.025)}.run-evidence-grid strong{color:var(--text);font-size:12px;text-transform:uppercase;letter-spacing:.06em}.run-evidence-grid ul{margin:8px 0 0;padding-left:18px}
.account-panel input[type="text"],.account-panel input:not([type]){min-height:44px;padding:10px 12px;border:1px solid var(--line-2);border-radius:10px;background:var(--bg-2);color:var(--text);font:inherit}.account-workspace-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:28px}.account-workspace-grid>section{min-width:0;padding:18px;border:1px solid var(--line);border-radius:14px;background:rgba(5,7,13,.25)}.account-workspace-grid form{grid-template-columns:1fr}.account-record-list{display:grid;gap:8px;margin:14px 0 0;padding:0;list-style:none}.account-record-list li{display:grid;gap:3px;padding:10px;border:1px solid var(--line);border-radius:10px;color:var(--text-2);font-size:12px}.account-record-list strong,.account-record-list a{color:var(--text);font-size:13px}.account-record-list span{color:var(--muted)}
.history-charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:22px 0}.history-chart,.history-empty{min-width:0;margin:0;padding:16px;border:1px solid var(--line);border-radius:14px;background:rgba(5,7,13,.28)}.history-chart figcaption,.history-empty{display:flex;justify-content:space-between;gap:12px;color:var(--text)}.history-chart figcaption span,.history-empty span{color:var(--muted);font-size:11px}.history-chart svg{display:block;width:100%;height:76px;margin-top:10px}.history-chart polyline{fill:none;stroke:var(--brand);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.history-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:18px 0 28px}.history-facts>div{min-width:0;padding:13px;border:1px solid var(--line);border-radius:12px}.history-facts span,.history-facts strong{display:block}.history-facts span{color:var(--muted);font:700 9px var(--font-mono);text-transform:uppercase;letter-spacing:.07em}.history-facts strong{margin-top:6px;color:var(--text);font-size:12px;line-height:1.45;overflow-wrap:anywhere}.history-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px}.history-table-wrap:focus-visible{outline:2px solid var(--brand);outline-offset:3px}.history-table{width:100%;min-width:840px;border-collapse:collapse}.history-table th,.history-table td{padding:11px 13px;border-top:1px solid var(--line);color:var(--text-2);text-align:left;font-size:11px}.history-table thead th{border-top:0;color:var(--muted);font:700 9px var(--font-mono);text-transform:uppercase;letter-spacing:.07em}.history-table tbody th{color:var(--text);font-family:var(--font-mono)}.history-change-list{display:grid;gap:8px}.history-change{padding:14px;border:1px solid var(--line);border-radius:12px}.history-change>div{display:flex;justify-content:space-between;gap:12px}.history-change span{color:var(--brand);font:700 9px var(--font-mono);text-transform:uppercase;letter-spacing:.08em}.history-change time{color:var(--muted);font:10px var(--font-mono)}.history-change p{margin:7px 0 0;font-size:12px}.history-no-change{padding:14px;border:1px dashed var(--line-2);border-radius:12px;color:var(--muted)!important}
.consent-banner{position:fixed;z-index:9999;right:18px;bottom:18px;display:grid;grid-template-columns:minmax(240px,500px) auto;gap:18px;align-items:center;max-width:min(980px,calc(100vw - 36px));padding:18px 20px;border:1px solid var(--brand-line);border-radius:18px;background:rgba(9,13,22,.97);box-shadow:0 22px 70px rgba(0,0,0,.48);backdrop-filter:blur(16px)}.consent-banner strong{color:var(--text)}.consent-banner p{margin:5px 0 0;color:var(--text-2);font-size:12px;line-height:1.5}.consent-banner>div:last-child{display:flex;gap:8px;flex-wrap:wrap}.consent-banner button{min-height:40px;padding:8px 12px;border-radius:999px;cursor:pointer}.catalog-title{margin:0 0 24px;color:var(--text);font:400 clamp(34px,5vw,56px) var(--font-display);letter-spacing:-.04em}
.saved-follow-list{display:flex;gap:8px;flex-wrap:wrap}.saved-follow-list button.active,.saved-follow-list button[aria-pressed="true"]{border-color:var(--brand-line);background:var(--brand-soft);color:var(--brand)}
@media(max-width:1024px){.evidence-ladder{grid-template-columns:repeat(2,minmax(0,1fr))}.evidence-ladder li:last-child{grid-column:1/-1}.decision-grid,.comparison-card-grid,.plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.decision-columns,.account-workspace-grid,.history-facts{grid-template-columns:1fr}.personal-change-panel{grid-template-columns:1fr}.consent-banner{grid-template-columns:1fr}}
@media(max-width:680px){.decision-main{padding-top:18px}.decision-hero,.decision-section,.item-decision-panel,.item-history-panel,.personal-change-panel{padding:22px;border-radius:18px}.decision-hero h1{font-size:clamp(38px,12vw,56px)}.decision-grid,.comparison-card-grid,.plan-grid,.evidence-ladder,.run-evidence-grid,.history-charts{grid-template-columns:1fr}.evidence-ladder li:last-child{grid-column:auto}.evidence-ladder li:not(:last-child)::after{display:none}.change-row{grid-template-columns:1fr}.change-delta{justify-content:flex-start;flex-wrap:wrap}.change-delta time{width:100%;margin:0}.decision-kpis>div{flex:1 1 120px}.account-panel form{grid-template-columns:1fr}.consent-banner{right:10px;bottom:10px;max-width:calc(100vw - 20px);padding:15px}.consent-banner>div:last-child{display:grid;grid-template-columns:1fr}.decision-card-actions>*{flex:1 1 auto}}
.account-team-section{grid-column:1/-1}.account-team-heading,.account-team-current{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.account-team-heading>div{max-width:640px}.account-team-heading h3,.account-team-current h4{margin-top:0}.account-team-heading p,.account-team-current p{margin:6px 0 0;color:var(--muted);font-size:13px}.account-team-heading form{width:min(420px,100%)}.account-team-picker{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.account-team-picker li{padding:0}.account-team-picker li.is-active{border-color:var(--brand-line);background:var(--brand-soft)}.account-team-select{width:100%;min-height:64px!important;display:grid!important;justify-content:flex-start!important;gap:4px;border:0!important;border-radius:10px!important;text-align:left}.account-team-select strong,.account-team-select span{display:block}.account-team-workspace{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}.account-team-current{align-items:center}.account-team-current p{text-align:right}.account-team-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}.account-team-columns>section{min-width:0;padding:16px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.018)}.account-team-columns h4,.account-team-columns h5{margin:0 0 6px;color:var(--text)}.account-team-columns h5{margin-top:22px;font-size:13px}.account-team-columns>section>p{margin:0;color:var(--muted);font-size:12px}.account-team-columns .account-record-list li{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px}.account-record-actions{display:flex;align-items:center;gap:7px}.account-role-select{min-height:38px;padding:7px 30px 7px 10px;border:1px solid var(--line-2);border-radius:999px;background:var(--bg-2);color:var(--text);font:700 12px var(--font-body)}.account-record-action{min-height:36px!important;padding:7px 11px!important}.account-record-list li>div{min-width:0}.account-record-list li>div>strong,.account-record-list li>div>span{display:block;overflow-wrap:anywhere}.account-record-list li>div>span{margin-top:3px}@media(max-width:760px){.account-team-heading,.account-team-current{display:grid}.account-team-current p{text-align:left}.account-team-columns{grid-template-columns:1fr}.account-team-columns .account-record-list li{grid-template-columns:1fr}.account-record-actions{flex-wrap:wrap}.account-record-actions>*{flex:1}}
/* reporadar-release: rr-20260714T07055435093-2a502d8e1c51 */