/* Verdict SG — shared stylesheet
   Static, no external dependencies (fast + fully crawlable). */

:root {
  --ink: #12203a;
  --ink-soft: #33415c;
  --paper: #fbfaf7;
  --card: #ffffff;
  --gold: #c1902b;
  --gold-deep: #9a6f16;
  --muted: #5a6478;
  --line: #e7e2d6;
  --good: #1e7d5a;
  --mid: #b07d1a;
  --max: 1080px;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(18,32,58,.06), 0 12px 30px rgba(18,32,58,.06);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.2;
  color: var(--ink);
  font-weight: 700;
}

h1 { font-size: 2.4rem; margin: 0 0 .5rem; letter-spacing: -.01em; }
h2 { font-size: 1.6rem; margin: 2.4rem 0 .8rem; }
h3 { font-size: 1.2rem; margin: 1.6rem 0 .4rem; }

p { margin: 0 0 1rem; }
a { color: var(--gold-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 760px; }

/* ---------- Header ---------- */
.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: saturate(120%) blur(6px);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 68px; gap: 20px;
}
.brand { display: flex; align-items: center; gap: 11px; font-family: Georgia, serif; font-weight: 700; font-size: 1.25rem; color: var(--ink); }
.brand:hover { text-decoration: none; }
.seal {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #f4d98b, var(--gold) 60%, var(--gold-deep));
  color: #3a2a04; display: grid; place-items: center;
  font-weight: 800; font-size: .82rem; font-family: system-ui, sans-serif;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), 0 2px 6px rgba(154,111,22,.4);
}
.brand small { display:block; font-family: system-ui, sans-serif; font-weight:500; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color: var(--muted); margin-top:-2px; }
.nav { display: flex; gap: 22px; font-size: .95rem; font-family: system-ui, sans-serif; }
.nav a { color: var(--ink-soft); font-weight: 500; }
.nav a:hover { color: var(--gold-deep); }

/* ---------- Hero ---------- */
.hero { padding: 64px 0 40px; }
.hero .kicker { color: var(--gold-deep); font-weight: 700; letter-spacing:.12em; text-transform: uppercase; font-size:.78rem; font-family: system-ui, sans-serif; }
.hero h1 { font-size: 3rem; margin-top: .4rem; }
.lede { font-size: 1.22rem; color: var(--ink-soft); max-width: 640px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; background: var(--ink); color: #fff;
  padding: 12px 22px; border-radius: 10px; font-weight: 600; font-size: .98rem;
  font-family: system-ui, sans-serif;
}
.btn:hover { background: #1c2f52; text-decoration: none; }
.btn.gold { background: linear-gradient(180deg, var(--gold), var(--gold-deep)); color:#2a1d02; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }

/* ---------- Cards / grid ---------- */
.grid { display: grid; gap: 20px; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--shadow);
}
.card h3 { margin-top: 0; }
.card .meta { font-size:.85rem; color: var(--muted); font-family: system-ui, sans-serif; }

/* ---------- Badges & scores ---------- */
.badge {
  display:inline-flex; align-items:center; gap:6px; font-family: system-ui, sans-serif;
  font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px; background:#f0ece0; color: var(--gold-deep);
}
.badge.shopped { background:#eef5f1; color: var(--good); }
.badge.affiliated { background:#f0ece0; color: var(--gold-deep); }
.badge.progress { background:#eef2fa; color:#31527a; }
.badge.excluded { background:#f4f1ea; color:#6a6350; }
.rank-num {
  font-family: Georgia, serif; font-weight:700; font-size:1.5rem; color: var(--gold-deep);
  width:44px; height:44px; flex:none; border-radius:50%; border:2px solid var(--gold);
  display:grid; place-items:center; background:#fff;
}
.score-pill {
  font-family: system-ui, sans-serif; font-weight:800; font-size:1.05rem;
  padding:6px 12px; border-radius:10px; background: var(--ink); color:#fff; white-space:nowrap;
}
.score-pill .out { font-weight:500; opacity:.6; font-size:.8rem; }
.score-lg { font-size:2.6rem; font-family:Georgia, serif; color: var(--good); font-weight:700; }

/* ---------- Tables ---------- */
.table-scroll { overflow-x:auto; margin: 1.2rem 0; }
table { border-collapse: collapse; width:100%; font-size:.98rem; background:var(--card); }
th, td { text-align:left; padding: 12px 14px; border-bottom:1px solid var(--line); vertical-align: top; }
thead th { background:#f3efe4; font-family: system-ui, sans-serif; font-size:.8rem; letter-spacing:.05em; text-transform:uppercase; color: var(--ink-soft); }
tbody tr:hover { background:#faf7ef; }
td .firm { font-weight:600; }

/* ranked list rows */
.rank-row { display:flex; gap:18px; align-items:flex-start; padding:22px 0; border-bottom:1px solid var(--line); }
.rank-row:last-child { border-bottom:0; }
.rank-body { flex:1; }
.rank-body h3 { margin:.1rem 0 .3rem; }
.rank-body .verdict { color: var(--ink-soft); }
.rank-side { text-align:center; flex:none; }

/* criteria bars */
.criteria { margin:1.2rem 0; }
.crit { display:grid; grid-template-columns: 160px 1fr 52px; gap:12px; align-items:center; margin:.5rem 0; font-family: system-ui, sans-serif; font-size:.92rem; }
.bar { height:9px; background:#ece7da; border-radius:999px; overflow:hidden; }
.bar > span { display:block; height:100%; background: linear-gradient(90deg, var(--gold), var(--good)); }
.crit .val { font-weight:700; text-align:right; }

/* ---------- Callouts ---------- */
.note {
  background:#fdf7e6; border:1px solid #ecdcae; border-left:4px solid var(--gold);
  padding:14px 18px; border-radius:10px; font-size:.95rem; color:#6a5417; margin:1.4rem 0;
}
.disclaimer {
  background:#f4f1ea; border:1px dashed #cfc7b4; color:#6a6350;
  font-size:.85rem; padding:10px 16px; border-radius:8px; font-family: system-ui, sans-serif;
  text-align:center;
}
.disclosure {
  background:#fdf7e6; border:1px solid #ecdcae; border-left:4px solid var(--gold);
  padding:14px 18px; border-radius:10px; font-size:.95rem; color:#6a5417; margin:1.4rem 0;
}
.live-banner {
  background:#eef2fa; border:1px solid #c7d3ec; border-left:4px solid #31527a;
  padding:14px 18px; border-radius:10px; font-size:.95rem; color:#1f3355; margin:1.4rem 0;
}
.fact-box { background:#f3efe4; border-radius:12px; padding:20px 24px; margin:1.4rem 0; }
.fact-box dl { display:grid; grid-template-columns: auto 1fr; gap:8px 18px; margin:0; font-family: system-ui, sans-serif; font-size:.95rem; }
.fact-box dt { color: var(--muted); }
.fact-box dd { margin:0; font-weight:600; }

/* ---------- FAQ ---------- */
.faq details { border-bottom:1px solid var(--line); padding:16px 0; }
.faq summary { font-family: Georgia, serif; font-size:1.15rem; font-weight:700; cursor:pointer; list-style:none; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::before { content:"+"; color:var(--gold-deep); font-weight:700; margin-right:12px; }
.faq details[open] summary::before { content:"–"; }
.faq details > *:not(summary) { margin-top:.6rem; }

/* ---------- breadcrumb ---------- */
.crumbs { font-size:.82rem; color: var(--muted); font-family: system-ui, sans-serif; padding-top:26px; }
.crumbs a { color: var(--muted); }

/* ---------- Footer ---------- */
.site-footer { border-top:1px solid var(--line); margin-top:64px; padding:40px 0; background:#f5f2ea; font-size:.9rem; color: var(--muted); font-family: system-ui, sans-serif; }
.site-footer .cols { display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.site-footer a { color: var(--ink-soft); }
.site-footer h4 { font-family: system-ui, sans-serif; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color: var(--muted); margin:0 0 10px; }
.site-footer ul { list-style:none; padding:0; margin:0; line-height:2; }

hr.rule { border:0; border-top:1px solid var(--line); margin:2.4rem 0; }
.section { padding: 26px 0; }
.center { text-align:center; }
.muted { color: var(--muted); }
.small { font-size:.9rem; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  body { font-size: 17px; }
  .hero h1 { font-size: 2.2rem; }
  h1 { font-size: 2rem; }
  .grid.cols-3, .grid.cols-2 { grid-template-columns: 1fr; }
  .nav { display:none; }
  .crit { grid-template-columns: 120px 1fr 44px; }
}