:root {
  --color-bg: #ffffff;
  --color-surface: #f7f8fa;
  --color-text: #1f2937;
  --color-muted: #5b6472;
  --color-border: #dde3ea;
  --color-accent: #0f4c81;
  --color-accent-soft: #edf4fa;
  --color-good: #1f7a45;
  --color-bad: #9d2d2d;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  --container: 1200px;
  --content: 780px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.65;
}
img { max-width: 100%; height: auto; }
a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { line-height: 1.2; margin: 0; }
h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
h3, .h3 { font-size: 1.25rem; }
.h4 { font-size: 1.05rem; }
p, ul, ol { margin: 0; }

.container {
  width: min(calc(100% - 2rem), var(--container));
  margin-inline: auto;
}
.content-narrow {
  width: min(100%, var(--content));
  margin-inline: auto;
}

.py-4 { padding-block: 1.5rem; }
.py-5 { padding-block: 3rem; }
.pb-3 { padding-bottom: 1rem; }
.mt-2 { margin-top: .5rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 3rem; }
.mb-4 { margin-bottom: 1.5rem; }
.border-bottom { border-bottom: 1px solid var(--color-border); }
.border-top { border-top: 1px solid var(--color-border); }

.stack-sm > * + * { margin-top: .75rem; }
.stack-md > * + * { margin-top: 1rem; }
.stack-lg > * + * { margin-top: 1.5rem; }
.stack-xl > * + * { margin-top: 2.5rem; }

.site-header,
.site-footer { background: #fff; }
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
}
.site-branding { display: flex; align-items: center; gap: 1rem; }
.site-title {
  color: var(--color-text);
  font-weight: 800;
  font-size: 1.15rem;
}
.site-description {
  margin-top: .2rem;
  color: var(--color-muted);
  font-size: .92rem;
}

.menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.menu-footer { gap: .75rem 1rem; }
.nav-toggle {
  display: none;
  border: 1px solid var(--color-border);
  background: #fff;
  border-radius: 10px;
  padding: .65rem .9rem;
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 2rem;
}
.content-grid--wide {
  grid-template-columns: minmax(0, 1fr) 280px;
}
.content-main { min-width: 0; }
.content-sidebar { min-width: 0; }

.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.cards-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.gap-lg { gap: 1.5rem; }

.card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card-pad { padding: 1.25rem; }
.card-title a { color: var(--color-text); }
.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
}
.meta-kicker {
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .76rem;
  font-weight: 700;
  color: var(--color-accent);
}
.lead {
  font-size: 1.1rem;
  color: var(--color-muted);
  max-width: 65ch;
}
.entry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  color: var(--color-muted);
  font-size: .92rem;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: .7rem 1rem;
  border-radius: 10px;
  background: var(--color-accent);
  color: #fff;
  font-weight: 600;
}
.button:hover { text-decoration: none; opacity: .92; }

.meta-list,
.link-list,
.rank-list,
.check-list,
.dash-list,
.rating-list {
  margin: 0;
  padding-left: 1.1rem;
}
.meta-list li,
.link-list li,
.rank-list li,
.check-list li,
.dash-list li { margin-top: .35rem; }
.prose > * + *, .prose-sm > * + * { margin-top: 1rem; }
.prose table { width: 100%; }
.prose ul, .prose ol { padding-left: 1.2rem; }

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}
.data-table th,
.data-table td {
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}
.data-table th { background: var(--color-surface); }

.rating-box__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.score-badge {
  min-width: 72px;
  min-height: 72px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 1.35rem;
  font-weight: 800;
  background: var(--color-accent-soft);
  color: var(--color-accent);
}
.rating-list {
  list-style: none;
  padding: 0;
}
.rating-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .5rem 0;
  border-top: 1px solid var(--color-border);
}
.pros-box { border-left: 4px solid var(--color-good); }
.cons-box { border-left: 4px solid var(--color-bad); }
.faq-list details summary { cursor: pointer; }
.search-form {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}
.search-field {
  min-width: 260px;
  padding: .8rem .9rem;
  border-radius: 10px;
  border: 1px solid var(--color-border);
}
.screen-reader-text {
  position: absolute;
  left: -9999px;
}

@media (max-width: 980px) {
  .content-grid,
  .content-grid--wide,
  .cards-grid,
  .cards-grid--2,
  .grid-2 {
    grid-template-columns: 1fr;
  }

  .site-header__inner {
    flex-wrap: wrap;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .primary-nav {
    width: 100%;
    display: none;
  }

  .primary-nav.is-open {
    display: block;
  }

  .menu {
    flex-direction: column;
    align-items: flex-start;
  }
}