/* public/compare/compare.css
 *
 * The comparison pages (/compare/ and /compare/<competitor>/). Same tokens,
 * type and buttons as the landing page so a visitor who arrives from a search
 * and clicks through doesn't feel they've changed websites. The landing page
 * carries its own inline copy of these rules; if a token changes there, change
 * it here too.
 */
:root {
  --green:#19402C; --green-mid:#2F7A55; --green-tint:rgba(25,64,44,.07);
  --action:#F15C05; --accent:#C46130;
  --bg:#f5f2ec; --card:#ffffff;
  --ink:#1c1c1e; --muted:#5f6b64; --faint:#98a29b;
  --line:#e4e1d9; --hair:#efece5;
  --radius:18px;
  --shadow:0 1px 2px rgba(28,28,30,.05), 0 8px 28px rgba(28,28,30,.05);
}
* { box-sizing:border-box; }
html, body { overflow-x:hidden; }
@supports (overflow:clip) { html, body { overflow-x:clip; } }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
a { color:var(--green-mid); }

.wrap { max-width:1000px; margin:0 auto; padding:0 24px; }
.narrow { max-width:760px; margin:0 auto; }
.vh { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
      overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* nav */
nav.top { display:flex; align-items:center; justify-content:space-between; padding:20px 0; gap:16px; }
.brand { display:flex; align-items:center; gap:11px; text-decoration:none;
         font-weight:700; font-size:20px; letter-spacing:-.02em; color:var(--green); }
.brand img { width:32px; height:32px; border-radius:8px; display:block; }
nav.top .links { display:flex; align-items:center; gap:22px; }
nav.top a { color:var(--muted); text-decoration:none; font-size:15px; font-weight:500; }
nav.top a:hover { color:var(--ink); }
nav.top a.btn.primary { color:#fff; }
nav.top a.brand { color:var(--green); font-size:20px; font-weight:700; }

/* buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 28px; border-radius:999px; border:0; cursor:pointer;
  font-family:inherit; font-size:16px; font-weight:600; letter-spacing:-.01em;
  text-decoration:none; white-space:nowrap; transition:filter .12s; }
.btn.primary { background:var(--action); color:#fff; }
.btn.primary:hover { filter:brightness(1.06); }
.btn.sm { padding:10px 18px; font-size:14.5px; }
.btnrow { display:flex; gap:12px; flex-wrap:wrap; }
.risk { font-size:14px; color:var(--muted); margin-top:14px; }

/* type */
.eyebrow { display:inline-block; font-size:12.5px; font-weight:650; letter-spacing:.08em;
  text-transform:uppercase; color:var(--green-mid); margin-bottom:16px; }
h1 { font-size:clamp(32px, 4.8vw, 50px); line-height:1.1; letter-spacing:-.032em;
     font-weight:750; margin:0 0 18px; max-width:24ch; }
h2 { font-size:clamp(25px, 3.2vw, 34px); line-height:1.2; letter-spacing:-.026em;
     font-weight:700; margin:0 0 14px; }
h3 { font-size:19px; font-weight:650; letter-spacing:-.015em; margin:0 0 8px; }
.lead { font-size:19px; color:var(--muted); max-width:60ch; margin:0 0 28px; }
.asof { font-size:14px; color:var(--faint); }
p { margin:0 0 16px; }

section { padding:56px 0; }
section.tint { background:var(--card); }
.hero { padding:36px 0 52px; }

/* the short answer: two cards side by side */
.pick { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.pick .card { background:var(--card); border-radius:var(--radius); padding:26px 26px 20px;
              box-shadow:var(--shadow); }
section.tint .pick .card { background:var(--bg); box-shadow:none; border:1px solid var(--line); }
section.tint .pick .card.us { border:2px solid var(--green-mid); }
.pick .card.us { border:2px solid var(--green-mid); }
.pick ul { margin:10px 0 0; padding-left:20px; }
.pick li { margin-bottom:8px; font-size:16px; color:var(--muted); }

/* side-by-side table. Scrolls inside its own box on a phone so the page
   itself never scrolls sideways. */
.tablewrap { overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--radius);
             box-shadow:var(--shadow); background:var(--card); }
section.tint .tablewrap { box-shadow:none; border:1px solid var(--line); }
table.vs { width:100%; border-collapse:collapse; min-width:620px; font-size:15.5px; }
table.vs th, table.vs td { text-align:left; vertical-align:top; padding:14px 18px;
                           border-bottom:1px solid var(--hair); }
table.vs thead th { font-size:13px; letter-spacing:.06em; text-transform:uppercase;
                    color:var(--muted); font-weight:650; background:var(--bg); }
table.vs tbody th { font-weight:600; width:24%; }
table.vs td.us { background:rgba(47,122,85,.05); }
table.vs tr:last-child th, table.vs tr:last-child td { border-bottom:0; }
table.vs sup a { text-decoration:none; font-size:11px; }
.tnote { font-size:14px; color:var(--muted); margin-top:12px; }
.swipe { display:none; font-size:14px; color:var(--muted); margin:0 0 10px; }
/* Row labels stay put while the columns scroll sideways on a phone. */
table.vs tbody th, table.vs thead th:first-child { position:sticky; left:0; z-index:1; }
table.vs tbody th { background:var(--card); box-shadow:1px 0 0 var(--hair); }
section.tint table.vs tbody th { background:var(--card); }

/* where they differ */
.diff { display:grid; gap:20px; }
.diff .card { background:var(--card); border-radius:var(--radius); padding:26px;
              box-shadow:var(--shadow); }
section.tint .diff .card { background:var(--bg); box-shadow:none; border:1px solid var(--line); }
.diff .card p:last-child { margin-bottom:0; }

/* hub: one card per comparison */
.vslist { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:18px; }
.vslist a { display:block; background:var(--card); border-radius:16px; padding:24px;
            box-shadow:var(--shadow); text-decoration:none; color:var(--ink);
            border:1px solid transparent; transition:border-color .12s, transform .12s; }
.vslist a:hover { border-color:var(--green-mid); transform:translateY(-2px); }
.vslist .k { font-size:12px; font-weight:650; letter-spacing:.07em; text-transform:uppercase;
             color:var(--green-mid); }
.vslist p { margin:6px 0 0; font-size:15px; color:var(--muted); }
.vslist .go { margin-top:12px; font-size:14.5px; font-weight:650; color:var(--action); }

/* faq */
details { background:var(--card); border-radius:14px; padding:18px 22px; margin-bottom:12px;
          box-shadow:var(--shadow); }
section.tint details { background:var(--bg); box-shadow:none; border:1px solid var(--line); }
summary { cursor:pointer; font-weight:600; font-size:17px; }
details p { margin:12px 0 0; color:var(--muted); font-size:16px; }

/* final CTA */
.final { background:var(--green); color:#fff; border-radius:24px; padding:48px 32px; text-align:center; }
.final h2 { color:#fff; }
.final p { color:rgba(255,255,255,.78); font-size:18px; max-width:46ch; margin:0 auto 24px; }
.final .risk { color:rgba(255,255,255,.66); }
.final .risk a { color:#fff; }
.signup { display:flex; gap:10px; max-width:520px; margin:0 auto; }
.signup input[type=email] { flex:1; min-width:0; padding:14px 22px; border-radius:999px;
  border:1px solid transparent; background:var(--card); color:var(--ink);
  font-family:inherit; font-size:16px; }
.signup input[type=email]:focus { outline:none; box-shadow:0 0 0 3px rgba(255,255,255,.35); }

/* sources */
.sources { font-size:14px; color:var(--muted); }
.sources ol { padding-left:20px; margin:8px 0 0; }
.sources li { margin-bottom:6px; overflow-wrap:anywhere; }

footer { padding:40px 0 56px; color:var(--faint); font-size:14px; }
footer a { color:var(--muted); text-decoration:none; }
footer .row { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }

a:focus-visible, .btn:focus-visible, summary:focus-visible {
  outline:3px solid rgba(47,122,85,.45); outline-offset:2px; }

@media (max-width:760px) {
  .pick, .vslist { grid-template-columns:1fr; }
  nav.top .links a.hide-sm { display:none; }
  section { padding:44px 0; }
  .signup { flex-direction:column; }
  .final { padding:40px 22px; }
  .swipe { display:block; }
  table.vs tbody th { width:auto; min-width:120px; }
}