/* ──────────────────────────────────────────────────────────────────
   compare-light.css — light editorial re-skin for /compare/* pages.

   Loaded AFTER each page's inline <style>, so it overrides the original
   near-black palette without touching the page's layout/structure. The
   comparison table, feature grid, hero CTAs, and brand-bar breadcrumb
   all stay; only the surface flips to the warm-paper + Fraunces look
   shared with /css/topic.css. Uses !important so it wins regardless of
   source order against the per-page inline blocks.
   ────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&display=swap');

:root{
  --bg:#fbfaf7 !important;
  --fg:#1b1b21 !important;
  --muted:#5f5f6a !important;
  --accent:#dc2626 !important;
  --card:#ffffff !important;
  --line:rgba(20,20,30,.10) !important;
}

/* drop the dark radial glow; clean light surface */
html{background:var(--bg) !important}
body{background:var(--bg) !important;color:var(--fg)}

/* editorial serif display headings */
h1,h2,.pitch h3{font-family:'Fraunces',Georgia,'Times New Roman',serif !important;font-weight:600 !important;letter-spacing:-.015em !important;color:var(--fg)}
h3{color:var(--fg)}

/* body copy that was hardcoded white-on-dark */
.lede{color:var(--muted) !important}
.col p,.genre p{color:var(--muted) !important}

/* surfaces get real elevation on a light bg */
.col,.tbl,.ccard,.feature,.genre,.pitch{box-shadow:0 1px 2px rgba(20,20,30,.04),0 16px 36px -26px rgba(20,20,30,.20)}

/* comparison table */
.tbl-row:first-child{background:rgba(20,20,30,.035) !important}
.tbl-cell:first-child{color:var(--fg) !important}

/* verdict colors tuned for contrast on white */
.yes{color:#15803d !important}
.no{color:#dc2626 !important}
.partial{color:#b45309 !important}

/* underlines + secondary-button border on light */
.ext,.genre .tools a{text-decoration-color:rgba(20,20,30,.22) !important}
.btn-secondary{border-color:rgba(20,20,30,.18) !important;color:var(--fg)}
.btn-secondary:hover{color:var(--accent)}

/* accent-tinted blocks (kept, recolored for light) */
.pitch{background:linear-gradient(135deg,rgba(220,38,38,.07),rgba(220,38,38,.015)) !important;border:1px solid rgba(220,38,38,.18) !important;color:var(--fg) !important}
.pitch strong{color:var(--fg) !important}
.genre.feature{background:linear-gradient(135deg,rgba(220,38,38,.06),rgba(220,38,38,.012)) !important;border-color:rgba(220,38,38,.30) !important}

@media(max-width:640px){
  .tbl-cell{border-top-color:rgba(20,20,30,.06) !important}
  .tbl-cell:first-child{background:rgba(20,20,30,.035) !important}
}