/* ==========================================================================
   cmp.css — "A+" editorial redesign, scoped to COMPARE pages only.
   Loaded exclusively by the /compare/ template (see templatesCompare.mjs).
   Every rule is scoped under .cmp-body / .tc-page-compare so no other
   page type is affected. Newsreader (headings) is loaded on compare pages.
   ========================================================================== */

.cmp-body{
  --cmp-bg:#FBF8F1; --cmp-ink:#2b2419; --cmp-muted:#6f6656; --cmp-faint:#a49a86;
  --cmp-accent:#A8442A; --cmp-hair:#E7E0D0; --cmp-hair2:#EAE3D3; --cmp-panel:#F1ECDF;
  --cmp-warm:#B4532A; --cmp-warm-l:#DDB39F; --cmp-cool:#6E86A8; --cmp-cool-l:#BFCBDB;
  --cmp-serif:'Newsreader',Georgia,'Times New Roman',serif;
  background:var(--cmp-bg);
}

/* article shell */
.tc-page-compare{ color:var(--cmp-ink); max-width:900px; margin:0 auto; padding:8px 24px 40px; }
.tc-page-compare a{ color:var(--cmp-accent); }
.tc-page-compare a:hover{ color:#7f3016; }

/* headings → Newsreader */
.tc-page-compare h1{
  font-family:var(--cmp-serif); font-weight:500; font-size:56px; line-height:1.04;
  letter-spacing:-.015em; margin:14px 0 0; color:var(--cmp-ink);
}
.tc-page-compare h2{ font-family:var(--cmp-serif); font-weight:500; font-size:29px; color:var(--cmp-ink); }
.tc-page-compare h3{ font-family:var(--cmp-serif); font-weight:600; }
.tc-page-compare .tc-lead{ font-family:var(--cmp-serif); font-size:23px; line-height:1.5; color:#3a3225; font-weight:400; }
.tc-page-compare .tc-lead strong{ font-weight:600; }
.tc-page-compare .tc-section{ margin-top:46px; }
.tc-page-compare .cmp-intro{ margin-top:30px; }

/* winner chips */
.cmp-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.cmp-chip{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600;
  color:var(--cmp-accent); background:#F6EADF; border:1px solid #E9D6C3; border-radius:999px; padding:7px 14px; }
.cmp-chip svg{ display:block; }

/* "Popular now" internal-link rail (was the top ad) */
.cmp-rail{ margin-top:34px; border-top:1px solid var(--cmp-hair); border-bottom:1px solid var(--cmp-hair);
  padding:16px 0; display:flex; align-items:center; gap:20px; }
.cmp-rail-lbl{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--cmp-faint); white-space:nowrap; }
.cmp-rail-links{ display:flex; flex-wrap:wrap; gap:9px; }
.cmp-pill{ font-size:13px; padding:6px 13px; border:1px solid #E0D8C6; border-radius:999px; color:#3a3225 !important; }
.cmp-pill:hover{ border-color:var(--cmp-accent); color:var(--cmp-accent) !important; }

/* climate table + comparison bars */
.tc-page-compare .tc-compare-table{ width:100%; border-collapse:collapse; margin-top:16px; background:transparent; }
.tc-page-compare .tc-compare-table thead th{ text-align:left; padding:11px 6px; font-size:15px;
  font-family:var(--cmp-serif); font-weight:600; border-bottom:2px solid var(--cmp-ink); background:transparent; color:var(--cmp-ink); }
.tc-page-compare .tc-compare-table thead th:first-child{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--cmp-faint); font-family:inherit; }
.tc-page-compare .tc-compare-table td,
.tc-page-compare .tc-compare-table th[scope=row]{ padding:13px 6px; font-size:15px; color:#3a3225;
  border-bottom:1px solid var(--cmp-hair2); vertical-align:middle; text-align:left; font-weight:400; background:transparent; }
.tc-page-compare .tc-compare-table th[scope=row]{ color:var(--cmp-muted); font-family:inherit; }
.cmp-val{ display:flex; flex-direction:column; gap:6px; }
.cmp-n{ font-variant-numeric:tabular-nums; }
.cmp-bar{ height:6px; border-radius:99px; background:#EDE6D6; overflow:hidden; max-width:150px; }
.cmp-bar > span{ display:block; height:100%; border-radius:99px; }
.cmp-fill-warm{ background:var(--cmp-warm); } .cmp-fill-warm-l{ background:var(--cmp-warm-l); }
.cmp-fill-cool{ background:var(--cmp-cool); } .cmp-fill-cool-l{ background:var(--cmp-cool-l); }

/* two city columns */
.tc-page-compare .tc-compare-cols{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:38px; }
.tc-page-compare .tc-compare-city h3{ font-size:22px; margin:0 0 8px; }
.tc-page-compare .tc-compare-city p{ font-size:15px; line-height:1.6; color:#4a4234; margin:0 0 14px; }
.tc-page-compare .tc-compare-city .tc-rel-links{ display:flex; flex-direction:column; gap:0; }
.tc-page-compare .tc-rel-link{ font-size:14px; padding:8px 0; border-bottom:1px solid var(--cmp-hair2);
  color:var(--cmp-accent) !important; background:transparent; border-radius:0; }
.tc-page-compare .tc-rel-link:last-child{ border-bottom:0; }
.tc-page-compare .tc-rel-link svg{ opacity:.55; }

/* "Keep planning" internal-link panel (was an inline ad) */
.cmp-panel{ background:var(--cmp-panel); padding:28px 30px; border-radius:3px; }
.cmp-panel-lbl{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--cmp-accent); font-weight:600; }
.cmp-panel-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:16px; }
.cmp-panel-grid a{ display:flex; flex-direction:column; gap:4px; }
.cmp-panel-t{ font-family:var(--cmp-serif); font-size:18px; font-weight:600; color:var(--cmp-accent); }
.cmp-panel-s{ font-size:13px; color:var(--cmp-muted); }

/* FAQ */
.tc-page-compare .tc-faq .tc-faq-item{ padding:19px 0; border-bottom:1px solid var(--cmp-hair2); }
.tc-page-compare .tc-faq .tc-faq-q{ font-family:var(--cmp-serif); font-size:17px; font-weight:600; margin:0; }
.tc-page-compare .tc-faq .tc-faq-a{ font-size:15px; color:#4a4234; margin-top:6px; line-height:1.55; }

/* More comparisons cluster */
.tc-page-compare .tc-rel-compares{ border-top:2px solid var(--cmp-ink); padding-top:22px; }
.tc-page-compare .tc-rel-subhead{ font-family:inherit; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--cmp-faint); font-weight:600; margin:14px 0 8px; }
.tc-page-compare .tc-rel-compares .tc-rel-links{ display:flex; flex-wrap:wrap; gap:8px; }
.tc-page-compare .tc-rel-compares .tc-rel-link{ border-bottom:0; padding:0; }

/* mobile */
@media (max-width:640px){
  .tc-page-compare{ padding:6px 18px 32px; }
  .tc-page-compare h1{ font-size:36px; }
  .tc-page-compare .tc-lead{ font-size:19px; }
  .cmp-rail{ flex-direction:column; align-items:flex-start; gap:10px; }
  .tc-page-compare .tc-compare-cols{ grid-template-columns:1fr; gap:26px; }
  .cmp-panel-grid{ grid-template-columns:1fr; gap:16px; }
  .cmp-bar{ max-width:118px; }
  .tc-page-compare .tc-section{ margin-top:38px; }
}

/* ==========================================================================
   HARD FRAME OVERRIDES — beat the global !important theme (landing.css ~7762)
   that forces Space Grotesk + a lavender gradient background site-wide.
   Scoped to body.cmp-body .tc-page-compare so ONLY compare pages change.
   ========================================================================== */
body.cmp-body{ background:var(--cmp-bg) !important; }
body.cmp-body .tc-page-compare,
body.cmp-body .tc-page-compare .tc-section{
  font-family:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif !important;
}
/* flatten the white section cards → editorial flow on cream */
body.cmp-body .tc-page-compare .tc-section{
  background:transparent !important; border:0 !important; border-radius:0 !important;
  padding:0 !important; margin:46px 0 0 !important;
}
body.cmp-body .tc-page-compare .cmp-intro{ margin-top:28px !important; }
/* headings → Newsreader serif, ink */
body.cmp-body .tc-page-compare h1{
  font-family:var(--cmp-serif) !important; font-weight:500 !important; font-size:56px !important;
  color:var(--cmp-ink) !important; -webkit-text-fill-color:var(--cmp-ink) !important; background:none !important;
}
body.cmp-body .tc-page-compare h1::after{ display:none !important; }
body.cmp-body .tc-page-compare .tc-section h2,
body.cmp-body .tc-page-compare h2{
  font-family:var(--cmp-serif) !important; font-weight:500 !important; font-size:29px !important;
  color:var(--cmp-ink) !important; border-left:0 !important; padding:0 !important; display:block !important; margin:0 0 16px !important;
}
body.cmp-body .tc-page-compare h3{ font-family:var(--cmp-serif) !important; color:var(--cmp-ink) !important; }
body.cmp-body .tc-page-compare .tc-lead{ font-family:var(--cmp-serif) !important; color:#3a3225 !important; font-weight:400 !important; }
/* re-assert the panel bg (it is a .tc-section we just flattened) */
body.cmp-body .tc-page-compare .cmp-panel{ background:var(--cmp-panel) !important; padding:28px 30px !important; margin-top:46px !important; }
body.cmp-body .tc-page-compare .tc-rel-compares{ border-top:2px solid var(--cmp-ink) !important; padding-top:22px !important; }
@media (max-width:640px){
  body.cmp-body .tc-page-compare h1{ font-size:36px !important; }
  body.cmp-body .tc-page-compare .tc-section{ margin-top:38px !important; }
  body.cmp-body .tc-page-compare .cmp-panel{ padding:22px !important; }
}

/* Fix: the active "you-are-here" nav tab (Compare) rendered black-on-black —
   the global !important theme overrode its intended white text. Restore it. */
body.cmp-body .tc-nav-link.tc-nav-active,
body.cmp-body .tc-nav-link.tc-nav-active .tc-nav-label{ color:#fff !important; }
body.cmp-body .tc-nav-link.tc-nav-active svg{ color:#fff !important; stroke:#fff !important; }