/* =====================================================================
   Lulu Ledger — comparison-page template styles (/compare/[competitor])
   Shared by every detail comparison page; rendered by compare-page.js
   from the data in compare-data.js. Builds on site.css tokens/components.
   ===================================================================== */

/* ---- hero: brand vs competitor ---- */
.vsbadge{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:38px;flex-wrap:wrap}
.vschip{
  display:flex;align-items:center;gap:12px;
  background:#fff;border:1px solid var(--hairline);border-radius:var(--radius-md);
  padding:16px 26px;box-shadow:0 14px 34px -22px rgba(4,38,63,.18);
}
.vschip img{height:26px;width:auto}
.vschip .cn{font:800 17px/1.2 var(--sans);color:var(--navy)}
.vschip.comp{border-style:dashed;border-color:#C9DBE8;background:var(--panel)}
.vschip.comp .cn{color:var(--muted)}
.vsmid{
  width:46px;height:46px;border-radius:50%;flex:none;
  background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-style:italic;font-size:17px;
}

/* ---- verification banner ---- */
.verifybar{max-width:820px;margin:44px auto 0;text-align:left}

/* ---- inline pending marker (competitor claims awaiting research) ---- */
.pcell{
  display:inline-block;font:800 10px/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;
  color:#8A6410;background:#FDF6E8;border:1px dashed #E8CF9A;border-radius:6px;padding:5px 9px;
}
.pcell.block{display:block;text-align:center;padding:9px 10px}

/* ---- key differences ---- */
.difflist{display:flex;flex-direction:column;gap:18px;margin-top:52px}
.diff{
  display:grid;grid-template-columns:200px 1fr 1fr;gap:0;
  background:#fff;border:1px solid var(--hairline);border-radius:var(--radius-md);overflow:hidden;
}
.diff .dlabel{
  background:var(--panel);border-right:1px solid var(--hairline);padding:20px 22px;
  display:flex;flex-direction:column;gap:6px;justify-content:center;
}
.diff .dlabel .dn{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--blue);line-height:1}
.diff .dlabel h3{font:800 14.5px/1.4 var(--sans);color:var(--navy)}
.diff .dcol{padding:20px 22px}
.diff .dcol + .dcol{border-left:1px solid var(--hairline)}
.diff .dcol h4{font:800 10.5px/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
.diff .dcol.lulu h4{color:#0E86B8}
.diff .dcol.comp h4{color:#93A8B8}
.diff .dcol p{font:500 13.5px/1.65 var(--sans);color:var(--muted)}
.diff .dcol p b{color:var(--navy-ink)}

/* ---- quick-verdict cards (also used for the unresearched fallback) ---- */
.fitgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:52px}
.fitcard{
  background:#fff;border:1px solid var(--hairline);border-radius:var(--radius-md);padding:26px 28px;
  text-align:left;
}
.fitcard.lulu{border:2px solid var(--blue);box-shadow:0 0 0 6px rgba(0,191,255,.10)}
.fitcard h3{font:800 16px/1.45 var(--sans);color:var(--navy);margin-bottom:16px}
.fitcard .fr{
  display:flex;gap:12px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--hairline);
  font:500 14px/1.6 var(--sans);color:var(--muted);
}
.fitcard .fr:last-child{border-bottom:none}
.fitcard .fr::before{content:"✓";color:var(--green);font:800 14px/1.6 var(--sans);flex:none}
.fitcard .fr.pend::before{content:"◌";color:#C9A55A}
.fitcard .fr b{color:var(--navy-ink)}
.fitnote{font:600 12.5px/1.7 var(--sans);color:#93A8B8;margin-top:16px;text-align:center;max-width:760px;margin-left:auto;margin-right:auto}

/* ---- table tweaks (base .cmpwrap/.cmp come from site.css) ---- */
.cmp td .pcell{margin:0}

/* ---- full-frame product shot: shows a whole approved screenshot inside the
       shared .screenframe chrome. The homepage's .screencrop is tuned to one
       image's proportions; this variant fits any capture. ---- */
.screenfull{background:#fff;border-radius:0 0 9px 9px;overflow:hidden;line-height:0}
.screenfull img{display:block;width:100%;height:auto}

/* ---- back-to-hub strip ---- */
.hubback{text-align:center;margin-top:34px}

/* ---- responsive ---- */
@media (max-width:900px){
  .diff{grid-template-columns:1fr}
  .diff .dlabel{border-right:none;border-bottom:1px solid var(--hairline);flex-direction:row;align-items:center;gap:12px;padding:14px 20px}
  .diff .dcol + .dcol{border-left:none;border-top:1px solid var(--hairline)}
  .fitgrid{grid-template-columns:1fr;gap:16px;margin-top:40px}
  .vschip{padding:13px 20px}
  .vschip img{height:22px}
  .vschip .cn{font-size:15px}
}

/* ---- research disclosure: one shared sentence on every comparison page,
       deliberately understated so it does not compete with the closing CTA ---- */
.srcsec{padding-top:0}
.srcnote{
  max-width:760px;margin:0 auto;
  border-top:1px solid var(--hairline);padding-top:22px;
}
.srcnote h3{
  font:800 11px/1.4 var(--sans);letter-spacing:.13em;text-transform:uppercase;
  color:#93A8B8;margin-bottom:8px;
}
.srcnote p{font:500 12.5px/1.7 var(--sans);color:#93A8B8;margin-bottom:10px}