:root {
  --ink:#142033 !important;
  --muted:#526071 !important;
  --line:#d7e0e7 !important;
  --paper:#ffffff !important;
  --soft:#f4f7f8 !important;
  --blue:#1261a6 !important;
  --navy:#0b2842 !important;
  --navy-2:#123a63 !important;
  --green:#16705a !important;
  --warn:#a85b14 !important;
}

* { box-sizing:border-box; }

body {
  margin:0 !important;
  color:var(--ink) !important;
  background:linear-gradient(#f7fafb 0, #fff 280px) !important;
  border-top:0 !important;
  font-family:Arial, Helvetica, sans-serif !important;
  line-height:1.6 !important;
}

body::before {
  content:"Smart Buy Checklist";
  display:block;
  width:100%;
  padding:13px max(18px, calc((100vw - 1120px) / 2));
  background:var(--navy);
  color:#fff;
  font-size:14px;
  font-weight:800;
  letter-spacing:.02em;
}

.wrap,
main.wrap {
  width:min(1120px, calc(100% - 36px)) !important;
  margin-inline:auto !important;
}

nav {
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:8px !important;
  padding:16px max(18px, calc((100vw - 1120px) / 2)) !important;
  border:0 !important;
  background:#fff !important;
  box-shadow:0 1px 0 var(--line) !important;
}

nav a {
  margin:0 !important;
  padding:8px 10px !important;
  color:var(--navy-2) !important;
  border-radius:6px !important;
  font-size:14px !important;
  font-weight:800 !important;
  text-decoration:none !important;
}

nav a:hover {
  background:#edf4f8 !important;
  color:#0b4f89 !important;
}

header {
  margin:0 !important;
  padding:0 !important;
  background:
    radial-gradient(circle at 82% 18%, rgba(22,112,90,.22), transparent 28%),
    linear-gradient(135deg, #0b2842 0%, #123a63 62%, #135b69 100%) !important;
  color:#fff !important;
  border:0 !important;
}

header > .wrap,
header .hero {
  padding:clamp(46px, 8vw, 88px) 0 !important;
}

.hero-grid,
header .wrap:has(img) {
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) minmax(270px, .62fr) !important;
  align-items:center !important;
  gap:clamp(24px, 5vw, 54px) !important;
}

header h1 {
  max-width:880px !important;
  margin:0 0 18px !important;
  color:#fff !important;
  font-size:clamp(38px, 6.5vw, 68px) !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  text-wrap:balance;
}

header .lead,
header p {
  max-width:68ch !important;
  color:#dceaf3 !important;
  font-size:clamp(18px, 2vw, 21px) !important;
}

header img {
  display:block !important;
  width:100% !important;
  max-height:390px !important;
  aspect-ratio:4/3 !important;
  object-fit:contain !important;
  padding:18px !important;
  background:#fff !important;
  border:1px solid rgba(255,255,255,.28) !important;
  border-radius:10px !important;
}

main.wrap {
  padding-top:clamp(36px, 6vw, 68px) !important;
}

h2 {
  margin:clamp(38px, 6vw, 66px) 0 14px !important;
  color:var(--navy-2) !important;
  font-size:clamp(27px, 4vw, 40px) !important;
  line-height:1.08 !important;
  letter-spacing:0 !important;
  text-wrap:balance;
}

h3 {
  margin:0 0 8px !important;
  color:var(--navy-2) !important;
  font-size:18px !important;
  line-height:1.25 !important;
}

p,
li {
  color:var(--ink) !important;
}

p {
  max-width:76ch !important;
}

a {
  color:var(--blue) !important;
  text-underline-offset:3px !important;
}

.lead,
.note,
.affiliate-note,
.box p,
.item p {
  color:var(--muted) !important;
}

.grid {
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)) !important;
  gap:14px !important;
  margin:24px 0 4px !important;
  border:0 !important;
}

.box,
.item {
  min-height:100% !important;
  padding:22px !important;
  border:1px solid var(--line) !important;
  border-radius:8px !important;
  background:#fff !important;
}

.box:hover,
.item:hover {
  border-color:#b9c9d5 !important;
}

.box h3,
.item h3 {
  display:flex !important;
  gap:9px !important;
  align-items:flex-start !important;
}

.insight,
.product,
.cta-box {
  margin:clamp(42px, 7vw, 76px) 0 0 !important;
  padding:clamp(28px, 5vw, 46px) !important;
  border:1px solid #c9d9df !important;
  border-top:6px solid var(--green) !important;
  border-radius:0 !important;
  background:#eef6f4 !important;
}

.insight h2,
.product h2,
.cta-box h2 {
  margin-top:0 !important;
}

.product,
.cta-box {
  background:linear-gradient(135deg, #0b2842, #123a63) !important;
  border-color:#0b2842 !important;
}

.product h2,
.product h3,
.product p,
.cta-box h2,
.cta-box h3,
.cta-box p {
  color:#fff !important;
}

.product .note,
.cta-box .note,
.product .affiliate-note,
.cta-box .affiliate-note {
  color:#dceaf3 !important;
}

.cta {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:52px !important;
  padding:13px 20px !important;
  border:0 !important;
  border-radius:6px !important;
  background:var(--blue) !important;
  color:#fff !important;
  font-weight:900 !important;
  text-decoration:none !important;
}

.product .cta,
.cta-box .cta {
  background:#fff !important;
  color:#0b2842 !important;
}

.cta:hover {
  transform:translateY(-1px) !important;
}

.related,
.related-guides {
  margin:clamp(42px, 7vw, 72px) 0 0 !important;
  padding-top:28px !important;
  border-top:1px solid var(--line) !important;
}

.related-guides h2,
.related h2 {
  margin-top:0 !important;
}

.related-guides div,
.related div {
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
}

.related-guides a,
.related a {
  display:inline-flex !important;
  min-height:42px !important;
  align-items:center !important;
  padding:10px 13px !important;
  border:1px solid var(--line) !important;
  border-radius:6px !important;
  background:#fff !important;
  color:var(--navy-2) !important;
  font-weight:800 !important;
  text-decoration:none !important;
}

.related-guides a:hover,
.related a:hover {
  background:#edf4f8 !important;
}

footer {
  margin-top:clamp(54px, 8vw, 92px) !important;
  padding:34px max(18px, calc((100vw - 1120px) / 2)) !important;
  background:#0b2842 !important;
  color:#dceaf3 !important;
  border:0 !important;
}

footer p {
  color:#dceaf3 !important;
}

footer a {
  color:#fff !important;
}

@media (max-width:760px) {
  .hero-grid,
  header .wrap:has(img) {
    grid-template-columns:1fr !important;
  }

  header img {
    max-height:300px !important;
  }

  .cta {
    width:100% !important;
  }
}

@media (prefers-reduced-motion:reduce) {
  *,
  *::before,
  *::after {
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
  }
}