:root {
  --ink: #0a1730;
  --muted: #57657b;
  --line: #dbe2ed;
  --paper: #ffffff;
  --wash: #f4f7fb;
  --navy: #07152c;
  --navy-2: #0d2346;
  --blue: #245cf2;
  --blue-dark: #1542c2;
  --mint: #53e7b5;
  --mint-soft: #e7fbf4;
  --amber: #f6b94b;
  --rose: #ef6a72;
  --radius: 18px;
  --shadow: 0 18px 55px rgba(20, 43, 84, 0.12);
  --max: 1160px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: var(--blue-dark); text-underline-offset: 3px; }
a:hover { color: var(--blue); }
button, input, select { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid rgba(36, 92, 242, 0.35); outline-offset: 3px; }

.skip-link {
  position: fixed;
  z-index: 200;
  top: 8px;
  left: 8px;
  transform: translateY(-150%);
  padding: 10px 14px;
  color: white;
  background: var(--blue);
  border-radius: 8px;
  text-decoration: none;
}
.skip-link:focus { transform: none; }

.container { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }
.narrow { width: min(calc(100% - 40px), 780px); margin-inline: auto; }
.section { padding: 86px 0; }
.section-soft { background: var(--wash); }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  color: var(--blue-dark);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; }
h1, h2, h3 { margin-top: 0; color: var(--ink); line-height: 1.09; letter-spacing: -0.035em; }
h1 { font-size: clamp(2.65rem, 6vw, 5.25rem); }
h2 { margin-bottom: 18px; font-size: clamp(2rem, 4vw, 3.25rem); }
h3 { margin-bottom: 10px; font-size: clamp(1.25rem, 2.2vw, 1.65rem); }
p { margin: 0 0 1rem; }
.lead { max-width: 720px; color: #34435c; font-size: clamp(1.08rem, 2vw, 1.28rem); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 36px; margin-bottom: 34px; }
.section-head p { max-width: 590px; color: var(--muted); }

.site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  border-bottom: 1px solid rgba(219, 226, 237, 0.85);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(18px);
}
.nav { display: flex; min-height: 74px; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); font-weight: 820; line-height: 1; text-decoration: none; }
.brand img { width: 36px; height: 36px; border-radius: 10px; }
.brand span span { color: var(--blue); }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links > a { color: #34435c; font-size: 0.91rem; font-weight: 700; text-decoration: none; }
.nav-links > a:hover { color: var(--blue); }
.nav-cta, .button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: var(--blue);
  color: white;
  font-size: 0.94rem;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 9px 26px rgba(36, 92, 242, 0.24);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.button:hover, .nav-cta:hover { transform: translateY(-2px); background: var(--blue-dark); color: white; box-shadow: 0 14px 30px rgba(36, 92, 242, 0.32); }
.button-secondary { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.08); box-shadow: none; }
.button-secondary:hover { background: rgba(255,255,255,.15); }
.button-light { background: white; color: var(--navy); box-shadow: none; }
.button-light:hover { background: var(--mint-soft); color: var(--navy); }
.menu-toggle { display: none; width: 44px; height: 44px; border: 0; border-radius: 10px; background: var(--wash); color: var(--ink); }

.hero { position: relative; overflow: hidden; padding: 72px 0 42px; background: var(--navy); color: white; }
.hero::after {
  content: "";
  position: absolute;
  inset: auto -20% -50% 25%;
  height: 90%;
  background: radial-gradient(circle, rgba(44, 113, 255, .17), transparent 65%);
  pointer-events: none;
}
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 44px; }
.hero .eyebrow { color: var(--mint); }
.hero h1 { margin: 0 0 24px; color: white; }
.hero h1 em { color: var(--mint); font-family: Georgia, serif; font-weight: 500; }
.hero-copy > p { max-width: 650px; color: #becae0; font-size: 1.15rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.proof-row { display: flex; flex-wrap: wrap; gap: 10px 20px; margin: 25px 0 0; padding: 0; color: #d7e1f2; font-size: .88rem; list-style: none; }
.proof-row li { display: flex; align-items: center; gap: 7px; }
.proof-row li::before { content: "✓"; color: var(--mint); font-weight: 900; }
.hero-visual { position: relative; }
.hero-visual img { width: 100%; min-height: 440px; border-radius: 24px; object-fit: cover; object-position: center; box-shadow: 0 28px 80px rgba(0,0,0,.38); }
.hero-score {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 12px;
  min-width: 215px;
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  background: rgba(7, 21, 44, .84);
  backdrop-filter: blur(14px);
}
.hero-score strong { grid-row: 1 / span 2; color: var(--mint); font-size: 2rem; line-height: 1.1; }
.hero-score span { color: white; font-size: .83rem; font-weight: 750; }
.hero-score small { color: #aebdd4; }
.update-strip { border-bottom: 1px solid var(--line); background: #fff; }
.update-inner { display: flex; min-height: 62px; align-items: center; justify-content: space-between; gap: 22px; color: var(--muted); font-size: .86rem; }
.update-inner strong { color: var(--ink); }
.update-inner a { font-weight: 750; }

.author-card { display: grid; grid-template-columns: 76px 1fr auto; align-items: center; gap: 18px; margin: 32px 0 44px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: 0 12px 36px rgba(20,43,84,.06); }
.author-avatar { display: block; width: 76px; height: 76px; }
.author-card img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; }
.author-card strong { display: block; font-size: 1.04rem; }
.author-card p { margin: 4px 0 0; color: var(--muted); font-size: .9rem; line-height: 1.45; }
.author-links { display: flex; flex-direction: column; align-items: end; gap: 5px; font-size: .86rem; font-weight: 750; }
.author-socials { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px 12px; }
.author-socials a { color: var(--muted); font-size: .8rem; }

.method-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.method-card { padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: white; }
.method-card .number { display: grid; width: 32px; height: 32px; margin-bottom: 28px; place-items: center; border-radius: 9px; background: var(--mint-soft); color: #087d59; font-size: .82rem; font-weight: 900; }
.method-card h3 { font-size: 1.07rem; letter-spacing: -.015em; }
.method-card p { margin: 0; color: var(--muted); font-size: .9rem; }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: white; box-shadow: 0 12px 38px rgba(20, 43, 84, .055); }
table { width: 100%; min-width: 760px; border-collapse: collapse; }
th, td { padding: 17px 18px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
thead th { background: #f1f4f9; color: #3f4e66; font-size: .75rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #f9fbfd; }
.featured-row { background: #effbf7; }
.featured-row:hover { background: #e8f9f3; }
.rank-cell { color: var(--muted); font-weight: 850; }
.provider-name { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); font-weight: 850; }
.provider-name, .provider-head h3 a, .estimate-brand, .pick, .model-link { text-decoration: none; }
.provider-head h3 a { color: var(--ink); }
.provider-head h3 a:hover, .estimate-brand:hover, .pick:hover, .model-link:hover { color: var(--blue); }
.model-link { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.provider-name img { width: 32px; height: 32px; border: 1px solid #e7ebf2; border-radius: 9px; background: white; object-fit: contain; }
.mini-badge { display: inline-flex; padding: 3px 8px; border-radius: 99px; background: var(--mint-soft); color: #087d59; font-size: .7rem; font-weight: 850; white-space: nowrap; }
.cell-note { color: var(--muted); font-size: .78rem; }
.table-note { margin: 14px 2px 0; color: var(--muted); font-size: .82rem; }
.subsection-head { max-width: 820px; margin: 44px 0 22px; }
.subsection-head h3 { margin-bottom: 10px; font-size: clamp(1.55rem, 3vw, 2.15rem); }
.subsection-head > p:last-child { color: var(--muted); }
.generation-table { min-width: 1080px; }
.generation-table td { min-width: 180px; vertical-align: top; }
.generation-table td:first-child { min-width: 150px; }

.callout {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 34px;
  margin-top: 32px;
  padding: 34px;
  border-radius: var(--radius);
  background: var(--navy);
  color: #c5d1e5;
}
.callout h3 { color: white; font-size: 1.55rem; }
.callout p { margin-bottom: 0; }
.callout ul { margin: 0; padding-left: 19px; }
.callout li + li { margin-top: 8px; }

.calculator { display: grid; grid-template-columns: .85fr 1.15fr; gap: 26px; }
.calc-panel, .calc-results { padding: 30px; border: 1px solid var(--line); border-radius: var(--radius); background: white; box-shadow: 0 14px 40px rgba(20,43,84,.07); }
.calc-panel label { display: block; margin: 18px 0 7px; color: #3d4d65; font-size: .82rem; font-weight: 800; }
.calc-panel input, .calc-panel select { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid #cfd8e6; border-radius: 10px; background: white; color: var(--ink); }
.calc-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.calc-disclaimer { margin: 16px 0 0; color: var(--muted); font-size: .78rem; }
.calc-results h3 { margin-bottom: 18px; }
.estimate-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.estimate-row:last-child { border-bottom: 0; }
.estimate-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; }
.estimate-brand img { width: 28px; height: 28px; border-radius: 8px; object-fit: contain; }
.estimate-row strong { font-variant-numeric: tabular-nums; font-size: 1.1rem; }
.estimate-row.featured { margin: 0 -14px; padding: 14px; border-radius: 11px; background: var(--mint-soft); }
.estimate-sub { grid-column: 1 / -1; margin-top: -7px; color: var(--muted); font-size: .75rem; }

.routing-table td:first-child { font-weight: 800; }
.pick { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; }
.pick img { width: 25px; height: 25px; border-radius: 7px; object-fit: contain; }

.rankings { display: grid; gap: 24px; }
.provider-card { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: white; box-shadow: 0 14px 42px rgba(20, 43, 84, .06); }
.provider-card.featured { border-color: rgba(22, 172, 126, .4); box-shadow: 0 22px 65px rgba(10, 118, 84, .12); }
.featured-ribbon { padding: 9px 26px; background: var(--mint); color: #053527; font-size: .74rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.provider-card-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; padding: 34px; }
.provider-head { display: grid; grid-template-columns: 54px 1fr; gap: 14px; align-items: center; margin-bottom: 20px; }
.provider-logo { width: 54px; height: 54px; padding: 7px; border: 1px solid var(--line); border-radius: 14px; background: white; object-fit: contain; }
.provider-head .rank { display: inline-block; margin-bottom: 3px; color: var(--blue); font-size: .76rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.provider-head h3 { margin: 0; font-size: 1.65rem; }
.best-for { color: #3e4d64; font-size: 1.04rem; font-weight: 750; }
.provider-copy > p { color: var(--muted); }
.pros { display: grid; gap: 8px; margin: 20px 0; padding: 0; list-style: none; }
.pros li { display: flex; gap: 9px; color: #34435c; font-size: .92rem; }
.pros li::before { content: "✓"; flex: 0 0 auto; color: #07996b; font-weight: 900; }
.provider-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.metric { padding: 16px; border-radius: 13px; background: var(--wash); }
.metric span { display: block; color: var(--muted); font-size: .72rem; font-weight: 780; letter-spacing: .05em; text-transform: uppercase; }
.metric strong { display: block; margin-top: 4px; color: var(--ink); font-size: 1rem; }
.caveat { margin-top: 16px; padding: 15px 16px; border-left: 3px solid var(--amber); border-radius: 0 10px 10px 0; background: #fff8e9; color: #665027; font-size: .86rem; }
.caveat strong { color: #4b3b1f; }
.provider-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 22px; }
.text-link { font-size: .88rem; font-weight: 800; }

.lineup-panel { align-self: start; padding: 26px; border: 1px solid var(--line); border-radius: 16px; background: var(--wash); }
.lineup-panel h3 { margin-bottom: 18px; }
.lineup-list { display: grid; gap: 10px; }
.lineup-list > div { display: grid; grid-template-columns: minmax(90px, .7fr) 1.35fr; gap: 3px 12px; padding: 14px 15px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.lineup-list span { grid-row: 1 / span 2; align-self: center; color: var(--blue); font-size: .72rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.lineup-list strong { color: var(--ink); line-height: 1.3; }
.lineup-list small { color: var(--muted); }

.code-card { overflow: hidden; border: 1px solid #20375d; border-radius: 16px; background: #061226; }
.code-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 15px; border-bottom: 1px solid #20375d; color: #a9bad3; font-size: .78rem; font-weight: 750; }
.copy-code { border: 0; background: transparent; color: var(--mint); font-size: .78rem; font-weight: 800; }
pre { overflow-x: auto; margin: 0; padding: 22px; color: #d8e6fb; font-family: "SFMono-Regular", Consolas, monospace; font-size: .83rem; line-height: 1.7; }
.code-key { color: #8eb9ff; }
.code-string { color: #74efc7; }

.source-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }
.source-list li { padding: 15px 17px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.source-list a { font-weight: 800; }
.source-list span { display: block; color: var(--muted); font-size: .8rem; }

.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-question { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 20px; padding: 23px 0; border: 0; background: transparent; color: var(--ink); text-align: left; font-size: 1.08rem; font-weight: 820; }
.faq-question span:last-child { color: var(--blue); font-size: 1.5rem; transition: transform 160ms ease; }
.faq-answer { display: none; max-width: 820px; padding: 0 0 24px; color: var(--muted); }
.faq-item.open .faq-answer { display: block; }
.faq-item.open .faq-question span:last-child { transform: rotate(45deg); }

.cta-band { padding: 62px 0; background: var(--blue); color: white; }
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 38px; }
.cta-band h2 { margin: 0 0 10px; color: white; }
.cta-band p { margin: 0; color: #dce7ff; }
.cta-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 10px; }

.site-footer { padding: 58px 0 26px; background: var(--navy); color: #aebbd0; }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 40px; }
.footer-grid .brand { color: white; }
.footer-about { max-width: 380px; margin-top: 18px; font-size: .88rem; }
.footer-title { margin-bottom: 12px; color: white; font-size: .78rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.footer-links { display: grid; gap: 8px; }
.footer-links a { color: #aebbd0; font-size: .88rem; text-decoration: none; }
.footer-links a:hover { color: white; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 42px; padding-top: 22px; border-top: 1px solid #203553; font-size: .78rem; }

.legal-hero { padding: 72px 0 52px; background: var(--wash); border-bottom: 1px solid var(--line); }
.legal-hero h1 { max-width: 850px; margin-bottom: 18px; font-size: clamp(2.5rem, 5vw, 4.6rem); }
.legal-meta { color: var(--muted); }
.prose { padding: 68px 0 90px; }
.prose h2 { margin-top: 46px; font-size: 1.8rem; }
.prose h3 { margin-top: 30px; font-size: 1.25rem; }
.prose p, .prose li { color: #425169; }
.prose li + li { margin-top: 8px; }
.prose .notice { padding: 18px 20px; border: 1px solid #bed4ff; border-radius: 13px; background: #eff5ff; }
.author-profile { display: grid; grid-template-columns: 250px 1fr; gap: 46px; align-items: start; }
.author-profile img { width: 250px; border-radius: 22px; box-shadow: var(--shadow); }
.author-profile .disclosure { color: var(--muted); font-size: .78rem; }
.profile-name { margin: 0 0 6px; }
.profile-alias { color: var(--muted); font-size: .88rem; }
.profile-socials { display: grid; gap: 7px; margin-top: 16px; }
.profile-socials a { font-size: .86rem; font-weight: 800; }

.cookie-banner { position: fixed; z-index: 150; right: 18px; bottom: 18px; width: min(calc(100% - 36px), 420px); padding: 20px; border: 1px solid var(--line); border-radius: 15px; background: white; box-shadow: 0 20px 70px rgba(7,21,44,.24); }
.cookie-banner[hidden] { display: none; }
.cookie-banner strong { display: block; margin-bottom: 5px; }
.cookie-banner p { color: var(--muted); font-size: .82rem; }
.cookie-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cookie-actions button { min-height: 40px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 9px; background: white; color: var(--ink); font-weight: 800; }
.cookie-actions .accept { border-color: var(--blue); background: var(--blue); color: white; }

@media (max-width: 940px) {
  .hero-grid, .calculator, .provider-card-inner, .callout { grid-template-columns: 1fr; }
  .hero { padding-top: 52px; }
  .hero-copy { max-width: 720px; }
  .hero-visual img { min-height: 360px; }
  .method-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; }
  .footer-grid > div:last-child { grid-column: 2; }
}

@media (max-width: 900px) {
  .nav-links { position: fixed; inset: 74px 14px auto; display: none; flex-direction: column; align-items: stretch; gap: 8px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: white; box-shadow: var(--shadow); }
  .nav-links.open { display: flex; }
  .nav-links > a { padding: 10px 8px; }
  .menu-toggle { display: grid; place-items: center; }
}

@media (max-width: 760px) {
  .container, .narrow { width: min(calc(100% - 28px), var(--max)); }
  .section { padding: 64px 0; }
  .hero-grid { gap: 32px; }
  .hero h1 { font-size: clamp(2.55rem, 13vw, 4rem); }
  .hero-visual img { min-height: 290px; }
  .update-inner { align-items: flex-start; flex-direction: column; gap: 4px; padding: 12px 0; }
  .author-card { grid-template-columns: 58px 1fr; }
  .author-avatar, .author-card img { width: 58px; height: 58px; }
  .author-links { grid-column: 1 / -1; align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
  .author-socials { justify-content: flex-start; }
  .section-head, .cta-inner { align-items: flex-start; flex-direction: column; }
  .method-grid { grid-template-columns: 1fr; }
  .method-card .number { margin-bottom: 16px; }
  th, td { padding: 14px; }
  .provider-card-inner { padding: 24px; }
  .provider-meta { grid-template-columns: 1fr; }
  .source-list { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .footer-grid > div:last-child { grid-column: auto; }
  .footer-bottom { align-items: flex-start; flex-direction: column; }
  .author-profile { grid-template-columns: 1fr; }
  .author-profile img { width: 180px; }
}

@media (max-width: 470px) {
  .brand > span { font-size: .88rem; }
  .hero-actions, .cta-actions { align-items: stretch; flex-direction: column; }
  .button { width: 100%; }
  .hero-visual img { min-height: 240px; }
  .hero-score { position: relative; right: auto; bottom: auto; margin: -70px 12px 0; }
  .calc-split, .footer-grid { grid-template-columns: 1fr; }
}

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