/* =========================================================================
       RepoRadar Design System v3 "Modernist"
       Warm paper ground, black ink, one red accent. Square corners, 2px rules,
       Archivo throughout. No shadows, gradients, blur or glows.
       The v2 "midnight" sheet is archived in archive/style-v2-midnight/.
       Legacy v2 variable names below are re-pointed at the Modernist palette so
       older component rules inherit it; the component layer at the end of this
       file is the source of truth for the look.
       ========================================================================= */
    @font-face {
      font-family: "Archivo";
      font-style: normal;
      font-weight: 400 800;
      font-stretch: 100%;
      font-display: swap;
      src: url("/assets/fonts/archivo-latin-var.woff2") format("woff2");
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    :root {
      --brand: #ae1800;
      --brand-soft: rgba(236,48,19,.08);
      --brand-line: rgba(236,48,19,.45);
      --brand-glow: transparent;
      --accent: #201e1d;
      --accent-soft: #eae9e9;
      --warm: #ae1800;
      --warm-soft: rgba(236,48,19,.08);
      --bg: #f3f2f2;
      --bg-2: #eae9e9;
      --bg-3: #e2e0e0;
      --bg-4: #d7d3d3;
      --line: color-mix(in srgb,#201e1d 40%,transparent);
      --line-2: color-mix(in srgb,#201e1d 40%,transparent);
      --line-3: #201e1d;
      --text: #201e1d;
      --text-2: #3a3736;
      --muted: #5f5c5b;
      --muted-2: #5f5c5b;
      --gold: #201e1d;
      --gold-bg: #f8f4f4;
      --gold-line: #201e1d;
      --silver: #444141;
      --silver-bg: #f8f4f4;
      --silver-line: color-mix(in srgb,#201e1d 40%,transparent);
      --bronze: #605d5d;
      --bronze-bg: #f8f4f4;
      --bronze-line: color-mix(in srgb,#201e1d 40%,transparent);
      --dirt: #605d5d;
      --dirt-bg: #f8f4f4;
      --dirt-line: color-mix(in srgb,#201e1d 40%,transparent);
      --good: #201e1d;
      --warn: #ae1800;
      --bad: #ae1800;
      --shell-w: 1320px;
      --shell-pad: 28px;
      --card-gap: 14px;
      --radius: 0;
      --radius-lg: 0;
      --radius-xl: 0;
      --ease: cubic-bezier(.32, .72, 0, 1);
      --font-display: "Archivo",system-ui,sans-serif;
      --font-body: "Archivo",system-ui,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:rgba(236,48,19,0.04);
    }
    body:after {
      content: "";
      position: fixed; inset: 0;
      pointer-events: none; z-index: 0;
      background:transparent;
    }
    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;
      background: #f3f2f2;
      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: 0;
      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(32,30,29,0.056) }
    .nav-links a.cta { color: #ffffff; background: var(--brand); font-weight: 600 }
    .nav-links a.cta:hover { background: #dd2b0f; color: #ffffff }
    .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: 0;
      background: var(--brand); color: #ffffff; font-size: 13px; font-weight: 700;
      box-shadow: none;
      white-space: nowrap;
    }
    .mobile-menu { position: relative; display: none }
    .nav-menu-toggle {
      list-style: none; display: 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: 0;
      background: rgba(32,30,29,0.098); 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: 0; 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: 0;
      background: #f3f2f2;
      box-shadow: none;
    }
    .mobile-menu-panel a {
      display: flex; align-items: center; justify-content: space-between;
      min-height: 42px; padding: 10px 12px; border-radius: 0;
      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(32,30,29,0.077); 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: 0; 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: none;
    }
    .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: normal; 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: 0;
      font-weight: 600; font-size: 15px;
      transition: transform .25s var(--ease), background .25s var(--ease);
    }
    .primary {
      background: var(--brand); color: #ffffff;
      box-shadow: none;
    }
    .primary:hover { background: #dd2b0f; 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: 0;
      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(236,48,19,0.18); color: #ae1800 }
    .rr-button--danger { color: #5f5c5b }
    .secondary { border: 1px solid var(--line-2); background: transparent; color: var(--text) }
    .secondary:hover { background: rgba(32,30,29,0.056); 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: 0; 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: normal; 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: 0; 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: var(--bg-2);
      border-color: var(--brand-line);
    }
    .pick-card.featured:before {
      content: ""; position: absolute; inset: 0;
      background: transparent;
      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: 0; 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;
    }
    .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: 0; 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: 0; 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(236,48,19,0.3); background: rgba(236,48,19,0.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: 0 }
    .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: var(--bg-2);
      border: 1px solid var(--line-2);
      border-radius: 0; 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: normal; 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: 0; 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: 0; 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: #ffffff; border: 0; border-radius: 0; padding: 12px 16px; font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; transition: background .25s var(--ease) }
    .newsletter-form-card button:hover { background: #dd2b0f }
    .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: 0; font-weight: 600; font-size: 14.5px; transition: background .25s var(--ease) }
    .newsletter-cta-inline:hover { background: #dd2b0f }

    /* ---------- 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: 0; 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: 0; background: rgba(32,30,29,0.035) }
    .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: 0; 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: 0; 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: 0 }
    .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: 0; 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: 0; 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: 0;
      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: 0; 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: 0; 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: 0; 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: 0; 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: 0; 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(236,48,19,0.3); background: rgba(236,48,19,0.08) }

    /* ---------- Tip / support ---------- */
    .tip-block {
      background: var(--bg-2);
      border: 1px solid var(--line-2);
      border-radius: 0; 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: 0; 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; flex-direction: column; align-items: stretch; gap: 24px; padding-top: 32px; padding-bottom: 32px }
    .footer-brand { color: var(--muted); font-size: 13px }
    .footer-groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; width: 100% }
    .footer-group { min-width: 0 }
    .footer-group h2 { margin: 0 0 10px; color: var(--text-2); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase }
    .footer-group nav { display: grid; gap: 7px; align-content: start }
    .footer-group a,.footer-group .footer-consent-choice { color: var(--muted); text-align: left; transition: color .25s var(--ease) }
    .footer-group a:hover,.footer-group .footer-consent-choice:hover { color: var(--text) }
    .footer-links { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
    .footer-sep { color: #ae1800; 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:0}

    /* ---------- 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: normal; 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: 0; color: var(--text) }

/* ---------- Callout box ---------- */
.callout { border: 1px solid var(--line-2); background: var(--bg-2); border-radius: 0; 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: 0; 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: #ffffff; border: 0; border-radius: 0; 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: #dd2b0f }

/* ---------- Daily brief / news list ---------- */
.brief-list { display: grid; gap: 14px }
.brief-item { background: var(--bg-2); border: 1px solid var(--line); border-radius: 0; 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: 0; 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: #ffffff; border-color: var(--brand) }
.tip-presets a.primary:hover { background: #dd2b0f }

/* ---------- 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: normal; 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: 0; color: var(--text) }

/* ---------- Callout box ---------- */
.callout { border: 1px solid var(--line-2); background: var(--bg-2); border-radius: 0; 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: 0; 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: #ffffff; border: 0; border-radius: 0; 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: #dd2b0f }

/* ---------- Daily brief / news list ---------- */
.brief-list { display: grid; gap: 14px }
.brief-item { background: var(--bg-2); border: 1px solid var(--line); border-radius: 0; 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: 0; 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: #ffffff; border-color: var(--brand) }
.tip-presets a.primary:hover { background: #dd2b0f }

/* ---------- 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: 0;
  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: normal; 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: normal; 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: 0; 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: 0;
  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: 0;
  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: 0;
  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: #ae1800; border-color: #ec3013 }

/* ---------- 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: 0;
  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: 0;
  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: none;
  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: #f3f2f2;
  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:transparent;
  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: 0;
  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: 0;
  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: color-mix(in srgb,#201e1d 40%,transparent) }
.category-chip.chip-model { border-left-color: color-mix(in srgb,#201e1d 40%,transparent) }
.category-chip.chip-funding { border-left-color: color-mix(in srgb,#201e1d 40%,transparent) }
.category-chip.chip-launch { border-left-color: var(--good) }
.category-chip.chip-pricing { border-left-color: color-mix(in srgb,#201e1d 40%,transparent) }
.category-chip.chip-research { border-left-color: color-mix(in srgb,#201e1d 40%,transparent) }
.category-chip.chip-open-source { border-left-color: color-mix(in srgb,#201e1d 40%,transparent) }
.category-chip.chip-safety { border-left-color: var(--bad) }
.category-chip.chip-legal { border-left-color: color-mix(in srgb,#201e1d 40%,transparent) }
.category-chip.chip-infra { border-left-color: color-mix(in srgb,#201e1d 40%,transparent) }
.category-chip.chip-market { border-left-color: color-mix(in srgb,#201e1d 40%,transparent) }

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

.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: 0;
  font-weight: 700;
  border: 1px solid transparent;
}

.rating-pill.rating-essential { background: rgba(32,30,29,0.196); color: #5f5c5b; border-color: rgba(32,30,29,0.4) }
.rating-pill.rating-high { background: rgba(236,48,19,0.14); color: var(--brand); border-color: rgba(236,48,19,0.35) }
.rating-pill.rating-relevant { background: rgba(32,30,29,0.196); color: #5f5c5b; border-color: rgba(32,30,29,0.4) }
.rating-pill.rating-context { background: rgba(32,30,29,0.196); color: #5f5c5b; border-color: rgba(32,30,29,0.4) }
.rating-pill.rating-low { background: rgba(32,30,29,0.14); 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: 0;
  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: 0;
  transition: background .2s var(--ease), transform .1s ease;
}
.source-link-btn:hover {
  background: rgba(236,48,19,0.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: 0;
  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: 0; 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: 0; 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: 0; background: rgba(32,30,29,0.035); 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: 0; 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: 0; 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: 0; 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: none }
.compare-tray { position: fixed; left: 50%; transform: translateX(-50%); bottom: 20px; z-index: 60; display: flex; align-items: center; gap: 12px; background: #f3f2f2; border: 1px solid var(--line-2); border-radius: 0; padding: 10px 16px; box-shadow: none; }
.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: 0; 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(32,30,29,0.07) }
.compare-tray .compare-open { background: var(--brand); color: #ffffff; border-color: var(--brand) }
.compare-tray .compare-open:hover { background: #dd2b0f }
.compare-tray .compare-open:disabled { opacity: .5; cursor: not-allowed }
.compare-modal { position: fixed; inset: 0; z-index: 70; background: #f3f2f2; display: flex; align-items: center; justify-content: center; padding: 24px; }
.compare-modal[hidden] { display: none }
.compare-modal-inner { position: relative; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 0; 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: 0; 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: 0; 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: 0; 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: 0; 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: 0; 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 }

/* ---------- Lane A editorial depth: item/product byline ---------- */
.item-byline { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5 }
.item-byline a { color: var(--brand); border-bottom: 1px solid var(--brand-line) }
.item-byline a:hover { border-color: var(--brand) }

@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: 0; background: rgba(32,30,29,0.035); 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; }
.item-detail-group > ul > li > a { display: inline-flex; align-items: center; min-height: 24px; }
.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:0; 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: 0; background: rgba(32,30,29,0.035) }
.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:0;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:#ffffff;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(32,30,29,0.035);color:var(--text-2);border-radius:0;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:#5f5c5b}.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:0;color:#ffffff;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:0;overflow:hidden;background:rgba(32,30,29,0.025)}.compare-grid-head{background:rgba(236,48,19,0.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:0;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(32,30,29,0.035);border-radius:0}.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:0}.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:0;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:0;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:0; padding:8px 12px; font: inherit; font-size:12.5px; font-weight:700; cursor:pointer }
.load-more-btn:hover { background: rgba(236,48,19,0.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: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:0;background:rgba(236,48,19,0.075);box-shadow:none}
.decision-hero::after{content:"";position:absolute;width:340px;height:340px;border:1px solid rgba(236,48,19,0.12);border-radius:50%;right:-170px;top:-170px;box-shadow:none;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:0;background:rgba(32,30,29,0.034)}
.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:0;background:transparent}.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:0;background:transparent}.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:0;background:rgba(32,30,29,0.053)}.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:0;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(32,30,29,0.4);background:rgba(32,30,29,0.126);color:#201e1d}.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:0;background:transparent}.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:0;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:0}.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(236,48,19,0.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:0;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:0}.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:0}.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:0;background:#f3f2f2;color:#5f5c5b}
.personal-change-panel{display:grid;grid-template-columns:minmax(220px,.55fr) 1fr;gap:26px;align-items:start;border-color:var(--brand-line);background:var(--brand-soft)}.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:0}.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:0;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:0;background:transparent}.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:0;background:rgba(32,30,29,0.035)}.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:0;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:0;background:transparent}.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:0;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:0;background:transparent}.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:0}.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:0}.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:0}.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:0;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:0;background:#f3f2f2;box-shadow:none;}.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:0;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:0}.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:0!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:0;background:rgba(32,30,29,0.025)}.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:0;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}}
@media(max-width:680px){.footer-groups{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px}}
@media(max-width:420px){.footer-groups{grid-template-columns:1fr}}

    /* =========================================================================
       Modernist component layer (v3). Everything above this line is the v2
       rule set re-pointed at Modernist tokens; the rules below win the cascade.
       ========================================================================= */
    :root {
      --color-bg: #f3f2f2;
      --color-surface: #eae9e9;
      --color-text: #201e1d;
      --color-accent: #ec3013;
      --color-accent-600: #dd2b0f;
      --color-accent-700: #ae1800;
      --color-accent-400: #ff9783;
      --color-divider: color-mix(in srgb, #201e1d 40%, transparent);
      --color-neutral-100: #f8f4f4;
      --color-neutral-800: #444141;
      /* Text that sits on a red fill. #ec3013 is too light for AA body text
         in any ink, so filled buttons and the brief band use accent-600 with
         white, which clears 4.5:1. #ec3013 stays for large figures and marks. */
      --color-on-accent: #ffffff;
      --color-accent-fill: var(--color-accent-600);
      --color-accent-fill-hover: var(--color-accent-700);
      --font-ui: "Archivo", system-ui, sans-serif;
      --shell-w: 1280px;
      --shell-pad: 24px;
      --rule: 2px solid var(--color-divider);
      --rule-ink: 2px solid var(--color-text);
      --hairline: 1px solid var(--color-divider);
    }
    @media (max-width: 720px) { :root { --shell-pad: 16px } }

    html { background: var(--color-bg) }
    body {
      background: var(--color-bg);
      color: var(--color-text);
      font-family: var(--font-ui);
      font-size: 16px;
      line-height: 1.5;
    }
    body:before, body:after { content: none }
    h1, h2, h3, h4, h5, h6 { font-family: var(--font-ui); font-weight: 800; letter-spacing: -.015em; color: var(--color-text) }
    h1 em, h2 em, h3 em, h4 em, .name em { font-style: normal; color: inherit; font-weight: inherit }
    a { color: inherit; text-underline-offset: 3px }
    a:hover { color: var(--color-accent-700) }
    :focus { outline: none }
    :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px }
    ::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent) }
    .shell { width: min(var(--shell-w), calc(100% - 2 * var(--shell-pad))); margin-left: auto; margin-right: auto }

    /* — labels — */
    .eyebrow-label, .section-eyebrow, .eyebrow, .form-eyebrow, .daily-section-eyebrow,
    .decision-hero .eyebrow, .decision-hero > .section-eyebrow, .jump-nav-label, .hero-audience-label {
      display: inline-block; width: auto; max-width: 100%;
      padding: 0; margin: 0; border: 0; background: none; box-shadow: none;
      font-family: var(--font-ui); font-size: 12px; font-weight: 400; line-height: 1.4;
      letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent-700);
    }
    .eyebrow::before, .section-eyebrow::before { content: none }
    .eyebrow .dot { width: 0; height: 0; margin: 0; overflow: hidden; background: none; box-shadow: none }

    /* — buttons — */
    .btn, .primary, .secondary, .rr-button, .tip-button, .cta, .link-button, .load-more-btn,
    .newsletter-cta-inline, .tip-cta, .source-link-btn, .density-btn, .filter-btn, .sort-btn {
      border-radius: 0; box-shadow: none; transform: none; background-image: none;
    }
    .btn {
      display: inline-flex; align-items: center; justify-content: flex-start; gap: 8px;
      min-height: 40px; padding: 8px 14px; cursor: pointer; text-decoration: none;
      font-family: var(--font-ui); font-weight: 800; font-size: 14px; line-height: 1.2;
      color: var(--color-text); background: transparent; border: 1px solid transparent; white-space: nowrap;
    }
    .btn svg { display: block; flex: 0 0 auto }
    .btn-primary, .primary, .rr-button--primary, .tip-button, .tip-button--paypal, .tip-button--contact,
    .newsletter-form-card button, .form button, .compare-tray .compare-open {
      background: var(--color-accent-fill); color: var(--color-on-accent); border: 1px solid var(--color-accent-fill);
    }
    .btn-primary:hover, .primary:hover, .rr-button--primary:hover, .tip-button:hover,
    .newsletter-form-card button:hover, .form button:hover, .compare-tray .compare-open:hover {
      background: var(--color-accent-fill-hover); border-color: var(--color-accent-fill-hover); color: var(--color-on-accent); transform: none;
    }
    .btn-secondary, .secondary, .rr-button, .link-button, .load-more-btn, .density-btn, .source-link-btn {
      background: transparent; color: var(--color-text); border: 1px solid var(--color-text);
    }
    .btn-secondary:hover, .secondary:hover, .rr-button:hover, .link-button:hover, .load-more-btn:hover, .density-btn:hover, .source-link-btn:hover {
      background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); border-color: var(--color-text);
    }
    .btn-lg { min-height: 48px; padding: 12px 16px; font-size: 15px }
    .primary, .secondary { justify-content: flex-start; font-weight: 800; font-family: var(--font-ui) }
    .primary .arrow { transform: none }
    .tip-button::before, .tip-button--paypal::before, .tip-button--contact::before { content: none }
    .tip-button--bmac { background: var(--color-text); border-color: var(--color-text); color: var(--color-bg) }

    /* — tags — */
    .tag, .tier, .type-pill, .category-chip, .rating-pill, .evidence-badge, .ev-badge, .chips span, .popular-meta b,
    .pick-num, .today-meta span, .rising-pop, .audience-chip, .news-meta span, .news-links span {
      border-radius: 0; box-shadow: none; font-family: var(--font-ui);
    }
    .tag, .tier, .type-pill {
      display: inline-flex; align-items: center; padding: 3px 10px; font-size: 12px; font-weight: 600;
      letter-spacing: .02em; text-transform: none; border: 0;
      background: var(--color-neutral-100); color: var(--color-neutral-800);
    }
    .tier-gold { background: var(--color-text); color: var(--color-bg) }
    .tier-silver, .tier-bronze, .tier-low-signal { background: var(--color-neutral-100); color: var(--color-neutral-800) }

    /* — site header (existing shared markup: header > .nav-wrap > .shell.nav) — */
    header { position: relative; z-index: 40; padding: 0; background: var(--color-bg); border-bottom: var(--rule) }
    header .nav-wrap { position: static; background: var(--color-bg); border: 0; box-shadow: none }
    header .shell.nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; flex-wrap: nowrap }
    header .brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 0 1 auto; color: var(--color-text); text-decoration: none; font-family: var(--font-ui); font-weight: 800; font-size: 20px; letter-spacing: -.01em }
    header .brand:hover { color: var(--color-text) }
    header .brand .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-ui); font-weight: 800; letter-spacing: -.01em }
    header .brand .name em { font-style: normal; color: inherit; font-weight: inherit }
    .brand-mark { width: 30px; height: 30px; flex: 0 0 auto; display: block; color: var(--color-text) }
    .brand-mark .ring { fill: none; stroke: var(--color-text); stroke-width: 1.6 }
    /* Design: rings at full, .55 and .3 opacity from the outside in. */
    .brand-mark .ring:nth-of-type(1) { opacity: 1 }
    .brand-mark .ring:nth-of-type(2) { opacity: .55 }
    .brand-mark .ring:nth-of-type(3) { opacity: .3 }
    .brand-mark .sweep { stroke: var(--color-accent); stroke-width: 2.4; stroke-linecap: square; transform-origin: 16px 16px; animation: reporadar-sweep 4s linear infinite }
    .brand-mark .pulse { r: 2.2px; fill: var(--color-accent); transform-origin: 16px 16px; animation: reporadar-pulse 2s ease-in-out infinite }
    .brand-mark:hover .ring { animation: none }
    @media (prefers-reduced-motion: reduce) { .brand-mark .sweep, .brand-mark .pulse { animation: none } }
    header .mobile-nav-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: auto }
    header .mobile-tip {
      display: inline-flex; align-items: center; justify-content: flex-start; min-height: 44px; padding: 8px 14px;
      font-family: var(--font-ui); font-size: 14px; font-weight: 800; white-space: nowrap; text-decoration: none;
      background: transparent; color: var(--color-text); border: 1px solid var(--color-text); border-radius: 0; box-shadow: none;
    }
    header .mobile-tip:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text) }
    header .mobile-menu { position: relative; display: block }
    header .nav-menu-toggle {
      list-style: none; display: flex; flex-direction: column; justify-content: center; align-items: center;
      width: 44px; height: 44px; padding: 0; margin: 0; cursor: pointer; flex: 0 0 auto;
      background: var(--color-text); color: var(--color-bg); border: 0; border-radius: 0;
    }
    header .nav-menu-toggle::-webkit-details-marker { display: none }
    header .nav-menu-toggle::marker { content: "" }
    header .nav-menu-toggle:hover, header .mobile-menu[open] .nav-menu-toggle { background: var(--color-text) }
    header .nav-menu-icon { display: flex; flex-direction: column; gap: 5px; line-height: 0 }
    header .nav-menu-icon span { display: block; width: 20px; height: 2px; border-radius: 0; background: var(--color-bg) }
    header .mobile-menu-panel {
      position: absolute; right: 0; top: 52px; z-index: 60; width: 280px; max-width: calc(100vw - 2 * var(--shell-pad));
      display: flex; flex-direction: column; gap: 0; padding: 0; max-height: calc(100vh - 96px); overflow-y: auto;
      background: var(--color-bg); border: 2px solid var(--color-text); border-radius: 0; box-shadow: none;
    }
    header .mobile-menu-panel a {
      display: flex; justify-content: space-between; align-items: baseline; gap: 12px; min-height: 0;
      padding: 14px 16px; border-radius: 0; border: 0; border-bottom: var(--hairline);
      color: var(--color-text); text-decoration: none; background: none;
      font-family: var(--font-ui); font-size: 16px; font-weight: 700;
    }
    header .mobile-menu-panel a:last-child { border-bottom: 0 }
    header .mobile-menu-panel a:hover, header .mobile-menu-panel a:focus-visible { background: var(--color-surface); color: var(--color-text) }
    header .mobile-menu-panel a[aria-current="page"] { color: var(--color-accent-700); background: none }
    header .nav-links { display: none !important }
    @media (max-width: 720px) {
      header .brand { font-size: 18px }
    }
    @media (max-width: 380px) {
      header .mobile-tip { padding: 8px 10px; font-size: 13px }
    }

    /* — site footer (existing shared markup: footer > .footer-row > .footer-brand + .footer-groups) — */
    footer { position: relative; z-index: 1; margin-top: 0; padding: 0; background: var(--color-bg); color: var(--color-text); border-top: 0 }
    footer .footer-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 32px 0 48px; font-size: 14px }
    footer .footer-brand { font-size: 13px; color: color-mix(in srgb, var(--color-text) 75%, transparent) }
    footer .footer-brand::before { content: "RepoRadar"; display: block; margin-bottom: 4px; font-size: 14px; font-weight: 800; color: var(--color-text) }
    footer .footer-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 24px 32px; border-top: var(--rule-ink); padding-top: 16px }
    footer .footer-group { margin: 0 }
    footer .footer-group h2 { margin: 0 0 8px; font-family: var(--font-ui); font-size: 12px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent-700) }
    footer .footer-group nav { display: flex; flex-direction: column; gap: 6px }
    footer .footer-group a, footer .footer-consent-choice, footer .footer-links a {
      color: var(--color-text); text-decoration: none; border: 0; padding: 0; background: none; font: inherit; font-size: 14px; text-align: left; cursor: pointer;
    }
    footer .footer-group a:hover, footer .footer-consent-choice:hover, footer .footer-links a:hover { color: var(--color-accent-700); text-decoration: underline }
    footer .footer-links { display: flex; flex-wrap: wrap; gap: 8px 24px }
    footer .footer-sep { display: inline; color: var(--color-divider) }

    /* — shared surfaces: flat, square, ruled — */
    .card, .today-card, .pick-card, .popular-card, .rising-card, .quality-card, .stat, .change-stat, .change-card,
    .method, .source, .panel, .panel-card, .news-item, .news-card, .brief-item, .support-card, .method-tile,
    .decision-section, .item-decision-panel, .item-history-panel, .personal-change-panel, .plan-card, .comparison-card,
    .decision-card, .newsletter-panel, .newsletter-form-card, .tip-block, .callout, .guide-callout, .email-sample,
    .compare-modal-inner, .consent-banner, .score-breakdown, .item-detail-group, .saved-home-panel, .account-panel {
      border-radius: 0; box-shadow: none; background-image: none;
    }
    .card, .today-card, .pick-card, .popular-card, .rising-card, .news-item, .brief-item, .support-card, .method-tile,
    .plan-card, .comparison-card, .decision-card, .panel-card, .quality-card, .stat, .change-stat, .change-card {
      background: transparent; border: var(--hairline); border-top: var(--rule-ink);
    }
    .card:hover, .today-card:hover, .pick-card:hover, .popular-card:hover, .rising-card:hover, .news-item:hover, .change-card a:hover {
      background: var(--color-surface); transform: none; border-color: var(--color-divider); border-top-color: var(--color-text);
    }
    .pick-card.featured:before, .today-card:before, .method-tile::before { content: none }
    .panel, .decision-section, .item-decision-panel, .item-history-panel, .personal-change-panel, .newsletter-panel,
    .tip-block, .score-breakdown, .item-detail-group, .account-panel, .saved-home-panel {
      background: transparent; border: 0; border-top: var(--rule); padding-left: 0; padding-right: 0;
    }
    .callout, .guide-callout { background: var(--color-surface); border: 0; border-left: 4px solid var(--color-text) }
    .compare-modal-inner, .consent-banner { background: var(--color-bg); border: 2px solid var(--color-text) }

    /* — forms — */
    input[type="email"], input[type="text"], input[type="search"], input:not([type]), textarea, select,
    .searchbar, .newsletter-row input, .form input, .form textarea, .form select, .wallet-copy input {
      border-radius: 0; box-shadow: none; font-family: var(--font-ui);
    }
    .searchbar, .form input, .form textarea, .form select, .newsletter-row input, .newsletter-form-card input {
      background: var(--color-bg); color: var(--color-text); border: 2px solid var(--color-text);
    }
    .searchbar:focus-within, .form input:focus, .form textarea:focus, .newsletter-row input:focus { border-color: var(--color-accent); outline: 0 }
    .filter-btn, .sort-btn { background: transparent; color: var(--color-text); border: 1px solid var(--color-divider); font-family: var(--font-ui) }
    .filter-btn:hover { background: var(--color-surface); color: var(--color-text) }
    .filter-btn.active, .sort-btn.active, .density-btn.active { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text) }

    /* — tables — */
    .compare-table, .pricing-table { border-collapse: collapse; width: 100% }
    .compare-table th, .compare-table td, .pricing-table th, .pricing-table td { border: 0; border-bottom: var(--hairline); border-radius: 0; background: none }
    .compare-table thead th, .pricing-table thead th { border-bottom: var(--rule-ink); font-size: 12px; letter-spacing: .08em; text-transform: uppercase }

    /* — typography on content pages — */
    .page-hero h1, .decision-hero h1, .item-hero h1, main > h1 { font-family: var(--font-ui); font-weight: 800; letter-spacing: -.025em; line-height: 1.02 }
    :is(.content, .panel, .item-main, .decision-section) a:not(.btn):not(.primary):not(.secondary):not([class*="button"]):not(.cta) { color: var(--color-text); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; border-bottom: 0 }
    :is(.content, .panel, .item-main) a:not(.btn):not(.primary):not(.secondary):not([class*="button"]):not(.cta):hover { color: var(--color-accent-700) }
    .breadcrumb a, .breadcrumbs a { border-bottom: 0; text-decoration: underline }
    .jump-nav { border: 0; border-top: var(--rule); border-bottom: var(--rule); background: none; border-radius: 0 }
    .scoring-fill { background: var(--color-text) }
    .scoring-bar { background: var(--color-surface); border: 0 }

    /* =========================================================================
       Homepage: the existing sections and copy, laid out in the Modernist
       system (ruled rows, red figures, one red band for the brief).
       ========================================================================= */
    .hero.shell {
      display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 0; row-gap: 24px;
      padding: 56px 0 48px; border-bottom: var(--rule); text-align: left;
    }
    .hero.shell > * { grid-column: 1; margin: 0; max-width: none; padding-right: 32px }
    .hero.shell > .hero-meta { grid-column: 2; grid-row: 1 / span 4; align-self: stretch; padding: 0 0 0 24px; border-left: var(--rule) }
    .hero.shell > .hero-audience, .hero.shell > .stat-grid { grid-column: 1 / -1; padding-right: 0 }
    .hero .eyebrow { justify-self: start }
    .hero h1 { font-size: clamp(40px, 6vw, 76px); line-height: .98; letter-spacing: -.025em; font-weight: 800; text-wrap: balance; max-width: none }
    .hero h1 em { font-style: normal; color: inherit }
    .hero .hero-copy { font-size: 18px; line-height: 1.5; max-width: 34em; color: var(--color-text) }
    .hero .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-start }
    .hero .hero-actions a { min-height: 48px; padding: 12px 16px; font-size: 15px }
    .hero .hero-actions .arrow { display: inline-block }
    .hero-meta { display: flex; flex-direction: column; justify-content: flex-start; gap: 0; background: none; border-radius: 0 }
    .hero-meta-item { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 20px 0; border-bottom: var(--hairline) }
    .hero-meta-item:last-of-type { border-bottom: 0 }
    .hero-meta-item span { font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--color-text) }
    .hero-meta-item strong { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-text); text-align: right }
    .hero-meta-divider { width: 0; height: 0; margin: 0; border: 0; background: none }
    .hero-audience { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 24px; padding-top: 24px; border-top: var(--rule) }
    .hero-audience-chips { display: flex; flex-wrap: wrap; gap: 0 }
    .audience-chip { display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 16px 8px 0; margin-right: 16px; background: none; border: 0; border-bottom: 2px solid var(--color-text); border-radius: 0; color: var(--color-text); text-decoration: none }
    .audience-chip:hover { color: var(--color-accent-700); background: none }
    .audience-name { font-weight: 800 }
    .audience-count { font-size: 13px; opacity: .7; background: none; color: inherit; padding: 0; border: 0 }
    .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 12px 32px; border-top: var(--rule-ink) }
    .stat-grid .stat { display: flex; flex-direction: column; gap: 4px; padding: 16px 0; background: none; border: 0; border-bottom: var(--hairline); border-radius: 0 }
    .stat-label { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent-700); font-family: var(--font-ui) }
    .stat-value { font-weight: 800; font-size: clamp(36px, 4vw, 48px); line-height: 1; letter-spacing: -.02em; color: var(--color-accent); font-variant-numeric: tabular-nums; font-family: var(--font-ui) }
    .stat-detail { font-size: 13px; color: var(--color-text) }

    main#main-content > section.shell, main#main-content > nav.jump-nav { margin-top: 0; margin-bottom: 0 }
    main#main-content > section.shell:not(.hero):not(#watchlist) { padding: 48px 0; border-bottom: var(--rule) }
    .personal-change-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 16px 48px; border-top: 0 }
    .personal-change-panel h2 { font-size: clamp(24px, 3vw, 32px); margin: 8px 0 }
    .personal-change-results { display: flex; flex-direction: column; align-items: flex-start; gap: 12px }
    .personal-change-history { font-weight: 600; color: var(--color-text); border-bottom: 2px solid currentColor; text-decoration: none }
    .jump-nav { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; padding: 16px 0; border: 0; border-bottom: var(--rule); background: none; border-radius: 0 }
    .jump-nav a { color: var(--color-text); font-weight: 600; text-decoration: none; padding: 0; border: 0; background: none; border-radius: 0 }
    .jump-nav a:hover { color: var(--color-accent-700); text-decoration: underline }

    .section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 32px; margin: 0 0 24px }
    .section-head > div { display: flex; flex-direction: column; gap: 8px; max-width: 44em }
    .section-head h2 { margin: 0; font-size: clamp(28px, 6vw, 36px); line-height: 1.05; letter-spacing: -.02em; font-weight: 800 }
    .section-head h2 em { font-style: normal; color: inherit; font-weight: inherit }
    .section-head p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--color-text) }
    .section-link, .tip-block .tip-cta { font-weight: 600; color: var(--color-text); text-decoration: none; border: 0; border-bottom: 2px solid currentColor; padding: 0 0 2px; background: none; border-radius: 0 }
    .section-link:hover, .tip-block .tip-cta:hover { color: var(--color-accent-700); background: none }

    /* card groups become ruled lists under a 2px ink rule */
    .today-grid, .picks-grid, .popular-grid, .rising-grid, .change-highlights {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
      column-gap: 48px; row-gap: 0; border-top: var(--rule-ink);
    }
    .today-card, .pick-card, .popular-card, .rising-card, .change-card,
    .popular-grid.as-ranked .popular-card, .pick-card.featured {
      position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 0;
      padding: 16px 0; margin: 0; background: none; border: 0; border-bottom: var(--hairline); border-radius: 0; box-shadow: none; transform: none;
    }
    .today-card:hover, .pick-card:hover, .popular-card:hover, .rising-card:hover, .change-card a:hover { background: var(--color-surface); border-color: var(--color-divider); transform: none }
    .today-card h3, .pick-card h3, .popular-card h3, .rising-card h3 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: 0; line-height: 1.25; overflow-wrap: anywhere }
    .pick-card.featured h3 { font-size: clamp(24px, 3vw, 32px); letter-spacing: -.02em }
    .today-desc, .pick-meta, .popular-card p, .rising-desc, .change-card p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--color-text); opacity: .8 }
    .pick-why { margin: 0; font-size: 14px }
    .today-tag, .popular-rank, .pick-link, .rising-cue { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent-700) !important; font-weight: 400 }
    main .popular-grid.as-ranked { grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); column-gap: 48px; row-gap: 0 }
    main .popular-grid.as-ranked .popular-card { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 16px 0; grid-template-columns: none }
    main .popular-grid.as-ranked .popular-card > * { grid-column: auto; grid-row: auto; justify-self: auto; text-align: left }
    main .popular-grid.as-ranked .popular-rank { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent) !important; writing-mode: horizontal-tb; white-space: nowrap }
    main .popular-grid.as-ranked .popular-meta { justify-content: flex-start }
    .popular-meta b.pop-delta, .popular-meta b.pop-delta.up, .popular-meta b.pop-delta.down, .popular-meta b.pop-delta.flat { background: none; border: 0; padding: 0; color: var(--color-text) }
    .pick-card.featured h3 { font-weight: 800 }
    .hero.shell > .hero-meta { align-items: stretch }
    .hero.shell > .hero-meta > .hero-meta-item { width: 100%; flex-direction: row }
    .method-grid .method, .method-grid > * { background: none; border: 0; border-top: var(--rule-ink); border-radius: 0; box-shadow: none; padding: 16px 0 }
    #methodology .method-grid { column-gap: 48px }
    .today-meta, .pick-tier-row, .popular-meta, .rising-row1, .rising-foot, .card-topline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; font-size: 13px; color: var(--color-text) }
    .today-meta .dot { opacity: .5 }
    .popular-meta b { font-weight: 600; font-size: 13px; padding: 0; background: none; border: 0; color: var(--color-text) }
    .popular-meta b.score, .card-topline .rank, .rising-foot .rank { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--color-text) }
    .popular-meta b.pop-delta { font-weight: 800; color: var(--color-text) }
    .rising-arrow { color: var(--color-accent) }
    .rising-pop, .pick-num { font-size: 13px; background: none; padding: 0; border: 0; color: var(--color-text) }
    .home-verification-stage, .today-verification { font-size: 13px; color: var(--color-text); background: none; border: 0; padding: 0 }
    .card-official-source { font-size: 13px; font-weight: 600; color: var(--color-text); text-decoration: underline; text-underline-offset: 3px }
    .card-official-source:hover { color: var(--color-accent-700) }

    /* daily change report: counts as a ruled grid, figures in red */
    .change-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 12px 32px; margin-bottom: 32px; border-top: var(--rule-ink) }
    .change-grid .change-stat { display: flex; flex-direction: column; gap: 4px; padding: 16px 0; background: none; border: 0; border-bottom: var(--hairline); border-radius: 0 }
    .change-stat span { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent-700) }
    .change-stat strong { font-size: clamp(28px, 3vw, 40px); font-weight: 800; line-height: 1; color: var(--color-accent); font-variant-numeric: tabular-nums }
    .change-stat p { margin: 0; font-size: 13px; line-height: 1.4; color: var(--color-text) }
    .change-stat--zero strong { color: var(--color-text); opacity: .45 }
    .change-card a { display: flex; flex-direction: column; gap: 4px; color: var(--color-text); text-decoration: none; border: 0; background: none }
    .change-card span { font-size: 13px; color: var(--color-text) }
    .change-card strong { font-size: 17px; font-weight: 800 }

    /* the daily brief is the one red band */
    #subscribe .newsletter-panel {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 32px 64px; align-items: end;
      padding: 56px 32px; background: var(--color-accent-fill); color: var(--color-on-accent); border: 0; border-radius: 0;
    }
    #subscribe .newsletter-panel h2 { color: var(--color-on-accent); font-size: clamp(36px, 5vw, 64px); line-height: .98; letter-spacing: -.025em; margin: 0 0 16px }
    #subscribe .newsletter-panel h2 em { color: inherit; font-style: normal }
    #subscribe .newsletter-panel .lead, #subscribe .newsletter-bullets li { color: var(--color-on-accent); font-size: 17px; line-height: 1.5 }
    #subscribe .newsletter-bullets { margin: 16px 0 0; padding-left: 20px }
    #subscribe .newsletter-bullets li::before { content: none }
    #subscribe .newsletter-bullets li { list-style: square }
    #subscribe .newsletter-form-card { display: flex; flex-direction: column; gap: 12px; padding: 0; background: none; border: 0; color: var(--color-on-accent) }
    #subscribe .newsletter-form-card .form-eyebrow { color: var(--color-on-accent) }
    #subscribe .newsletter-form-card input { min-height: 52px; font-size: 16px; background: var(--color-bg); color: var(--color-text); border: 2px solid var(--color-text); border-radius: 0 }
    #subscribe .newsletter-form-card button { min-height: 52px; justify-content: flex-start; text-align: left; padding: 0 24px; font-weight: 800; background: var(--color-text); color: var(--color-bg); border: 2px solid var(--color-text); border-radius: 0 }
    #subscribe .newsletter-form-card button:hover { background: #000; border-color: #000; color: var(--color-bg) }
    #subscribe .newsletter-form-card .form-detail, #subscribe .newsletter-form-card .form-status { color: var(--color-on-accent); font-size: 13px }
    main#main-content > section#subscribe.shell { padding: 48px 0; border-bottom: 0 }

    /* catalog preview, tip and methodology */
    .quality-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 12px 32px; border-top: var(--rule-ink) }
    .quality-card { display: flex; flex-direction: column; gap: 4px; padding: 16px 0; background: none; border: 0; border-bottom: var(--hairline); border-radius: 0 }
    .quality-card span { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent-700) }
    .quality-card strong { font-size: clamp(28px, 3vw, 40px); font-weight: 800; line-height: 1; color: var(--color-accent); font-variant-numeric: tabular-nums }
    .quality-card p { margin: 0; font-size: 13px; color: var(--color-text) }
    .hero-actions.catalog-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px }
    .tip-block { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 32px; padding: 0; background: none; border: 0; border-radius: 0 }
    .tip-block h2 { margin: 0; font-size: clamp(24px, 3vw, 32px) }

    @media (max-width: 720px) {
      .hero.shell { grid-template-columns: minmax(0, 1fr); padding: 40px 0 32px }
      .hero.shell > * { padding-right: 0 }
      .hero.shell > .hero-meta { grid-column: 1; grid-row: auto; padding: 0; border-left: 0; border-top: var(--rule) }
      .hero-meta-item { padding: 16px 0 }
      main#main-content > section.shell:not(.hero):not(#watchlist) { padding: 40px 0 }
      #subscribe .newsletter-panel { padding: 40px 16px }
    }

    /* =========================================================================
       Modernist precedence. Several generated pages still carry inline <style>
       blocks written for v2 that load after this file. These rules use an
       `html body` prefix (and :not(.rr-x) where a class-level weight is needed)
       so the Modernist system wins without editing every inline block by hand.
       ========================================================================= */
    html:root { --font-mono: var(--font-ui); --font-display: var(--font-ui); --font-body: var(--font-ui) }
    html body :is(code, pre, kbd, samp):not(.rr-x) { font-family: ui-monospace, "Cascadia Code", Consolas, Menlo, monospace }
    html body :is(h1, h2, h3, h4):not(.rr-x) { font-family: var(--font-ui); font-weight: 800; font-style: normal }
    html body :is(h1, h2, h3, h4) em:not(.rr-x) { font-style: normal; color: inherit; font-weight: inherit }
    html body :is(h1):not(.rr-x) { letter-spacing: -.025em }

    html body :is(.eyebrow, .section-eyebrow, .daily-section-eyebrow, .guide-cat, .form-eyebrow, .news-tab-label, .card-kicker):not(.rr-x) {
      display: inline-block; width: auto; padding: 0; margin: 0; border: 0; background: none; box-shadow: none;
      font-family: var(--font-ui); font-size: 12px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase;
      color: var(--color-accent-700);
    }
    html body :is(.eyebrow, .section-eyebrow)::before { content: none }

    html body :is(.panel, .decision-section, .newsletter-panel, .tip-block, .personal-change-panel):not(.rr-x) {
      background: transparent; border: 0; border-top: 2px solid var(--color-divider); border-radius: 0; box-shadow: none;
      padding-left: 0; padding-right: 0;
    }
    html body :is(.support-card, .method-tile, .guide-card, .news-item, .top-signal-card a, .answer-card, .comparison-card, .decision-card, .plan-card, .radar-stat, .glance-stat, .evidence-ladder > *, .decision-kpis > *):not(.rr-x) {
      background: transparent; border: 1px solid var(--color-divider); border-top: 2px solid var(--color-text);
      border-radius: 0; box-shadow: none; transform: none;
    }
    html body :is(.guide-card, .news-item, .top-signal-card a, .answer-card, .comparison-card, .decision-card):hover { background: var(--color-surface) }
    html body :is(.decision-hero):not(.rr-x) {
      background: transparent; border: 0; border-bottom: 2px solid var(--color-divider); border-radius: 0; box-shadow: none;
      padding-left: 0; padding-right: 0;
    }
    html body .decision-hero::after, html body .decision-hero::before { content: none }
    html body :is(.callout, .guide-callout, .news-hero-meta, .news-keep-up):not(.rr-x) {
      background: var(--color-surface); border: 0; border-left: 4px solid var(--color-text); border-radius: 0; box-shadow: none;
    }
    html body :is(.tag, .tier, .type-pill, .category-chip, .rating-pill, .evidence-badge, .ev-badge, .confidence-chip, .take-chip, .chips span, .news-meta span, .news-links span):not(.rr-x) {
      border-radius: 0; box-shadow: none; font-family: var(--font-ui);
      background: var(--color-neutral-100); color: var(--color-neutral-800); border: 0;
    }
    html body :is(.tier-gold):not(.rr-x) { background: var(--color-text); color: var(--color-bg) }
    html body :is(.panel, .content, .item-main, .decision-section) a:not(.btn):not(.primary):not(.secondary):not(.tip-button):not([class*="button"]) {
      color: var(--color-text); border-bottom: 0; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px;
    }
    html body :is(.tip-button, .tip-button--paypal, .tip-button--contact, .newsletter-row button, .contact-form button, .copy-button):not(.rr-x) {
      background: var(--color-accent-fill); color: var(--color-on-accent); border: 1px solid var(--color-accent-fill);
      border-radius: 0; box-shadow: none; transform: none; font-family: var(--font-ui);
    }
    html body :is(.tip-button--bmac):not(.rr-x) { background: var(--color-text); border-color: var(--color-text); color: var(--color-bg) }
    html body :is(.newsletter-row input, .wallet-copy input, .contact-form input, .contact-form textarea):not(.rr-x) {
      background: var(--color-bg); color: var(--color-text); border: 2px solid var(--color-text); border-radius: 0;
    }
    html body :is(.news-keep-up a, .news-tab):not(.rr-x) { border-radius: 0; background: transparent; color: var(--color-text); border: 1px solid var(--color-text); box-shadow: none }
    html body :is(.news-keep-up a[aria-current="page"], .news-tab[aria-current="page"], .news-tab.active):not(.rr-x) { background: var(--color-text); color: var(--color-bg) }
    html body :is(.glance-stat, .glance-stat > span):not(.rr-x) { background: transparent; color: var(--color-text) }
    html body :is(button, input, select, textarea, optgroup):not(.rr-x) { font-family: var(--font-ui) }
    html body :is(.decision-section, .item-decision-panel, .item-history-panel, .personal-change-panel) :is(a.primary, a.btn-primary, a.cta):not(.rr-x) { color: var(--color-on-accent) }
    html body :is(.decision-section, .item-decision-panel, .item-history-panel, .personal-change-panel) :is(a.secondary, a.btn-secondary):not(.rr-x) { color: var(--color-text) }

/* =========================================================================
   Design handoff (2026-09): header menu notes, short footer, and the
   homepage — ink hero, 01 Trending, 02 Since yesterday, 03 Radar picks,
   and the red daily-brief band. Values follow the handoff prototype.
   ========================================================================= */
header .mobile-menu-panel .menu-label { font-weight: 700; font-size: 16px }
header .mobile-menu-panel .menu-note { font-size: 13px; font-weight: 400; opacity: .7; white-space: nowrap }
header .mobile-menu-panel .menu-narrow-only { display: none }
@media (max-width: 719px) {
  header .header-brief { display: none }
  header .mobile-menu-panel .menu-narrow-only { display: flex }
}

footer .footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 32px; padding: 32px 0 48px; font-size: 14px }
footer .footer-brand { display: flex; align-items: baseline; gap: 12px; font-size: 14px; color: var(--color-text) }
footer .footer-brand::before { content: none }
footer .footer-brand strong { font-weight: 800 }
footer .footer-stamp { font-size: 13px; opacity: .7 }
footer .footer-links { display: flex; flex-wrap: wrap; gap: 8px 24px }
footer .footer-secondary { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 8px 24px; padding-top: 16px; border-top: var(--hairline); font-size: 13px }
footer .footer-secondary .footer-links a, footer .footer-secondary .footer-consent-choice { font-size: 13px; opacity: .85 }

.home-main { padding: 0 }
.home-eyebrow { display: inline-block; font-size: 12px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent-700) }
.home-underline { align-self: flex-start; font-weight: 600; color: var(--color-text); text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 2px }
.home-underline:hover { color: var(--color-accent-700) }
.home-accent { color: var(--color-accent) }

/* hero */
.home-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 0; padding: 0; border-bottom: var(--rule) }
.home-hero-copy { display: flex; flex-direction: column; gap: 24px; min-width: 0; padding: 56px 32px 48px 0 }
.home-hero h1 { margin: 0; font-size: clamp(40px, 6vw, 76px); line-height: .98; letter-spacing: -.025em; font-weight: 800; text-wrap: balance }
.home-lede { margin: 0; max-width: 34em; font-size: 18px; line-height: 1.5; text-wrap: pretty }
.home-lede a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px }
.home-actions { display: flex; flex-wrap: wrap; gap: 12px }
.home-actions .btn { min-height: 48px; padding: 12px 16px; font-size: 15px }
.home-action-main { min-width: min(220px, 100%) }
.home-hero-facts { margin: 0; display: grid; grid-template-columns: 1fr; align-content: space-between; border-left: var(--rule) }
.home-top-pick { display: flex; flex-direction: column; gap: 16px; padding: 56px 24px 32px; border-bottom: var(--rule-ink); color: var(--color-text); text-decoration: none }
.home-top-pick:hover { background: var(--color-surface); color: var(--color-text) }
.home-top-pick-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px }
.home-top-pick-meta { font-size: 13px; text-align: right }
.home-top-pick-body { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap }
.home-top-pick-name { font-weight: 800; font-size: clamp(28px, 3vw, 40px); line-height: 1.05; letter-spacing: -.02em; overflow-wrap: anywhere; min-width: 0 }
.home-top-pick-score { display: flex; align-items: baseline; gap: 4px }
.home-score-big { font-weight: 800; font-size: clamp(56px, 14vw, 72px); line-height: .9; letter-spacing: -.03em; color: var(--color-accent); font-variant-numeric: tabular-nums }
.home-score-of { font-size: 16px }
.home-top-pick-desc { margin: 0; font-size: 16px; line-height: 1.5; max-width: 30em; text-wrap: pretty }
.home-more { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px }
.home-fact { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 20px 24px; border-bottom: var(--hairline) }
.home-fact:last-child { border-bottom: 0 }
.home-fact dt { font-size: 14px }
.home-fact dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right }
.home-fact .home-fact-accent { color: var(--color-accent-700) }

/* sections */
.home-section { border-bottom: var(--rule) }
.home-section-head { display: flex; flex-direction: column; gap: 8px; max-width: 44em }
.home-section-head h2 { margin: 0; font-size: clamp(28px, 6vw, 36px); line-height: 1.05; letter-spacing: -.02em; font-weight: 800 }
.home-section-head p { margin: 0; font-size: 16px; line-height: 1.5 }
.home-section-head p a { text-decoration: underline; text-underline-offset: 3px }

/* 01 trending */
#trending { display: flex; flex-direction: column; gap: 24px; padding: 40px 0 48px }
.home-trend-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); column-gap: 48px; border-top: var(--rule-ink) }
.home-trend { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 4px 16px; align-items: baseline; padding: 16px 0; border-bottom: var(--hairline); color: var(--color-text); text-decoration: none }
.home-trend:hover { background: var(--color-surface); color: var(--color-text) }
.home-trend-rank { font-weight: 800; font-size: 24px; color: var(--color-accent); font-variant-numeric: tabular-nums }
.home-trend-main { display: flex; flex-direction: column; gap: 4px; min-width: 0 }
.home-trend-name { font-weight: 800; font-size: 17px; overflow-wrap: anywhere }
.home-trend-desc { font-size: 14px; line-height: 1.4; opacity: .8 }
.home-trend-stage { font-size: 13px }
.home-trend-nums { display: flex; flex-direction: column; gap: 2px; text-align: right; font-variant-numeric: tabular-nums }
.home-trend-delta { font-weight: 800 }
.home-trend-stars { font-size: 13px; opacity: .7; white-space: nowrap }

/* 02 since yesterday */
#changes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 32px 48px; padding: 48px 0 }
.home-changes-copy { display: flex; flex-direction: column; gap: 16px }
.home-change-sentence { margin: 0; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.25; letter-spacing: -.01em; font-weight: 600; text-wrap: pretty }
.home-change-list { list-style: none; margin: 0; padding: 0; border-top: var(--rule-ink) }
.home-change-list li { border-bottom: var(--hairline) }
.home-change { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 4px 16px; padding: 14px 0; color: var(--color-text); text-decoration: none }
.home-change:hover { background: var(--color-surface); color: var(--color-text) }
.home-change-name { font-weight: 800; overflow-wrap: anywhere }
.home-change-score { font-weight: 800; font-variant-numeric: tabular-nums; text-align: right }
.home-change-desc { font-size: 14px; line-height: 1.4; opacity: .8 }
.home-change-kind { font-size: 13px; text-align: right }
.home-change-empty { padding: 14px 0; font-size: 14px }

/* 03 picks */
#picks { display: flex; flex-direction: column; gap: 24px; padding: 48px 0; border-bottom: 0 }
.home-picks-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 32px }
.home-picks-head .home-section-head { max-width: 40em }
.home-picks-table { width: 100%; border-collapse: collapse; font-size: 15px }
.home-picks-table thead tr { text-align: left; border-bottom: var(--rule-ink) }
.home-picks-table th { padding: 10px 12px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; text-align: left }
.home-picks-table tbody tr { border-bottom: var(--hairline); vertical-align: top }
.home-picks-table td { padding: 16px 12px }
.home-picks-table .home-pick-no { width: 48px; padding-left: 0; font-variant-numeric: tabular-nums; color: var(--color-accent-700); font-weight: 600 }
.home-picks-table th.home-pick-no { color: var(--color-text) }
.home-pick-project { max-width: 520px }
.home-pick-project a { font-weight: 800; font-size: 17px; color: var(--color-text); text-decoration: none; overflow-wrap: anywhere }
.home-pick-project a:hover { color: var(--color-accent-700); text-decoration: underline }
.home-pick-desc { margin-top: 4px; font-size: 14px; line-height: 1.45; opacity: .8 }
.home-pick-meta-narrow { display: none; font-size: 13px; margin-top: 8px }
.home-pick-area { white-space: nowrap }
.home-picks-table .home-pick-score { padding-right: 0; text-align: right }
.home-picks-table td.home-pick-score { font-weight: 800; font-size: 22px; font-variant-numeric: tabular-nums }

/* the daily brief band */
.home-brief { background: var(--color-accent-fill); color: var(--color-on-accent); padding: 56px 0 }
.home-brief-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 32px 64px; align-items: end }
.home-brief-copy { display: flex; flex-direction: column; gap: 16px }
.home-brief .home-eyebrow { color: var(--color-on-accent) }
.home-brief h2 { margin: 0; color: var(--color-on-accent); font-size: clamp(36px, 5vw, 64px); line-height: .98; letter-spacing: -.025em }
.home-brief-copy p { margin: 0; font-size: 17px; line-height: 1.5; max-width: 32em }
.home-brief-form { display: flex; flex-direction: column; gap: 12px }
.home-brief-form label { font-size: 14px }
.home-brief-row { display: flex; flex-wrap: wrap; gap: 0 }
.home-brief-row .input { flex: 1 1 220px; min-height: 52px; padding: 0 14px; font-size: 16px; background: var(--color-bg); color: var(--color-text); border: 2px solid var(--color-text); border-radius: 0 }
.home-brief-row .input:focus-visible { outline: 2px solid var(--color-bg); outline-offset: 2px }
.home-brief-row .btn { min-height: 52px; padding: 0 24px; background: var(--color-text); color: var(--color-bg); border: 2px solid var(--color-text) }
.home-brief-row .btn:hover { background: #000; border-color: #000; color: var(--color-bg) }
.home-brief-row .btn:disabled { opacity: .7; cursor: progress }
.home-brief-trap { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0 }
.home-brief-note, .home-brief-status { margin: 0; font-size: 13px }
.home-brief-note a { color: inherit; text-decoration: underline }
.home-brief-note a:hover, .home-brief a:hover { color: var(--color-on-accent) }
.home-brief-status:empty { display: none }

@media (max-width: 719px) {
  .home-hero-copy { padding: 40px 0 32px }
  .home-hero-facts { border-left: 0; border-top: var(--rule) }
  .home-top-pick { padding: 32px 0 24px }
  .home-fact { padding: 16px 0 }
  .home-picks-table, .home-picks-table tbody { display: block }
  .home-picks-table thead { display: none }
  .home-picks-table { border-top: var(--rule-ink) }
  .home-picks-table tbody tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 12px; padding: 20px 0 }
  .home-picks-table td { padding: 0 }
  .home-picks-table .home-pick-area, .home-picks-table .home-pick-tier { display: none }
  .home-pick-meta-narrow { display: block }
  .home-picks-table .home-pick-score { font-size: 28px; line-height: 1 }
  .home-brief { padding: 40px 0 }
}