:root {
  --bg:#f7f8fc;
  --card:#fff;
  --ink:#111827;
  --muted:#667085;
  --line:#e4e7ec;
  --purple:#6657ff;
  --navy:#0b1220;
  --green:#12b76a;
  --radius:20px
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  line-height:1.65
}
a {
  color:inherit;
  text-decoration:none
}
.wrap {
  width:min(1160px,calc(100% - 36px));
  margin:auto
}
.top {
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(247,248,252,.94);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)
}
.topin {
  min-height:70px;
  display:flex;
  align-items:center;
  gap:24px;
  justify-content:space-between
}
.logo {
  display:flex;
  gap:10px;
  align-items:center;
  font-weight:800
}
.mark {
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:11px;
  color:white;
  background:linear-gradient(135deg,#6657ff,#9b68ff)
}
.tagline {
  font-size:11px;
  color:var(--muted);
  font-weight:500
}
.nav {
  display:flex;
  gap:22px;
  font-size:14px;
  color:#475467
}
.nav a:hover {
  color:var(--purple)
}
.lang {
  border:1px solid var(--line);
  background:white;
  border-radius:11px;
  padding:8px 10px
}
.hero {
  padding:88px 0 62px;
  background:radial-gradient(circle at 80% 0,rgba(102,87,255,.12),transparent 32%)
}
.kicker {
  font-size:12px;
  color:var(--purple);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em
}
.hero h1,.article h1 {
  font-size:clamp(40px,5vw,68px);
  line-height:1.06;
  letter-spacing:-.045em;
  margin:14px 0 22px;
  max-width:900px
}
.lead {
  font-size:19px;
  max-width:820px;
  color:#475467
}
.buttons {
  display:flex;
  gap:12px;
  margin-top:28px;
  flex-wrap:wrap
}
.btn {
  display:inline-flex;
  min-height:46px;
  align-items:center;
  justify-content:center;
  padding:0 18px;
  border-radius:12px;
  background:linear-gradient(135deg,#6657ff,#875dff);
  color:#fff;
  font-weight:750
}
.btn.secondary {
  background:white;
  color:#344054;
  border:1px solid var(--line)
}
.notice {
  margin:26px 0 0;
  padding:14px 16px;
  border:1px solid #d9d6fe;
  background:#f4f3ff;
  border-radius:13px;
  color:#4a3fa0;
  font-size:13px
}
.section {
  padding:72px 0
}
.section.dark {
  background:var(--navy);
  color:white
}
.section h2 {
  font-size:clamp(29px,3.7vw,44px);
  line-height:1.12;
  letter-spacing:-.03em;
  margin:8px 0 28px
}
.grid3 {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px
}
.card {
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px
}
.dark .card {
  background:#111a2d;
  border-color:#24314b
}
.card p {
  color:var(--muted)
}
.dark .card p {
  color:#acb7ca
}
.price {
  font-size:27px;
  font-weight:850;
  letter-spacing:-.03em
}
.fit {
  font-size:12px;
  color:var(--purple);
  font-weight:800
}
.sourcebar {
  font-size:12px;
  color:#667085;
  margin-top:12px
}
.sourcebar a {
  text-decoration:underline
}
.compare-cards {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px
}
.compare {
  padding:27px;
  background:white;
  border:1px solid var(--line);
  border-radius:22px
}
.compare h3 {
  font-size:24px;
  margin:8px 0
}
.article {
  padding:62px 0 80px
}
.article .meta {
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  font-size:12px;
  color:#667085;
  margin:18px 0 32px
}
.article h1 {
  font-size:clamp(38px,5vw,60px)
}
.content {
  max-width:880px
}
.content h2 {
  font-size:30px;
  line-height:1.2;
  margin:44px 0 16px
}
.content h3 {
  font-size:21px;
  margin:28px 0 10px
}
.content p,.content li {
  color:#475467
}
.content li {
  margin:8px 0
}
.decision {
  border-left:4px solid var(--purple);
  padding:18px 20px;
  background:#f4f3ff;
  border-radius:0 14px 14px 0;
  margin:22px 0
}
.table-wrap {
  overflow:auto;
  border:1px solid var(--line);
  border-radius:16px;
  background:white
}
table {
  width:100%;
  border-collapse:collapse;
  min-width:720px
}
th,td {
  text-align:left;
  padding:15px;
  border-bottom:1px solid var(--line);
  vertical-align:top
}
th {
  background:#f9fafb;
  font-size:13px
}
td {
  color:#475467
}
.sources {
  padding:18px 20px;
  background:white;
  border:1px solid var(--line);
  border-radius:16px
}
.sources a {
  color:#4f46e5;
  text-decoration:underline
}
.disclosure {
  padding:16px 18px;
  background:#fff7ed;
  border:1px solid #fed7aa;
  border-radius:14px;
  color:#7c2d12;
  font-size:13px;
  margin:28px 0
}
.footer {
  background:#08101f;
  color:#d0d5dd;
  padding:48px 0 26px
}
.footgrid {
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:30px
}
.footer p,.footer a {
  font-size:13px;
  color:#98a2b3
}
.copy {
  border-top:1px solid #1f2a3e;
  margin-top:24px;
  padding-top:18px;
  font-size:12px;
  color:#667085
}
.browser-suggest {
  display:none;
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:50;
  max-width:340px;
  background:#111827;
  color:white;
  padding:16px;
  border-radius:16px;
  box-shadow:0 18px 50px rgba(0,0,0,.25)
}
.browser-suggest p {
  margin:0 0 10px;
  font-size:13px
}
.browser-suggest a,.browser-suggest button {
  border:0;
  border-radius:9px;
  padding:8px 10px;
  margin-right:6px;
  cursor:pointer
}
.browser-suggest a {
  background:#8172ff;
  color:white
}
.browser-suggest button {
  background:#263247;
  color:#d0d5dd
}
.method-list {
  counter-reset:item
}
.method {
  background:white;
  border:1px solid var(--line);
  border-radius:18px;
  padding:22px;
  margin:14px 0
}
.method h3 {
  margin-top:0
}
.badge {
  display:inline-flex;
  padding:5px 9px;
  border-radius:999px;
  background:#ecfdf3;
  color:#027a48;
  font-size:11px;
  font-weight:800
}
@media(max-width:900px) {
  .nav {
    display:none
  }
  .grid3 {
    grid-template-columns:1fr 1fr
  }
  .compare-cards {
    grid-template-columns:1fr
  }
  .footgrid {
    grid-template-columns:1fr
  }
  .hero {
    padding-top:60px
  }
}
@media(max-width:620px) {
  .wrap {
    width:min(100% - 24px,1160px)
  }
  .grid3 {
    grid-template-columns:1fr
  }
  .tagline {
    display:none
  }
  .lang {
    max-width:120px
  }
  .hero h1,.article h1 {
    font-size:40px
  }
  .section {
    padding:56px 0
  }
}
/* V4 additions */
.skip-link {
  position:absolute;
  left:-999px;
  top:8px;
  background:#fff;
  color:#111827;
  padding:10px 14px;
  border-radius:10px;
  z-index:100
}
.skip-link:focus {
  left:8px
}
.nav .active {
  color:var(--purple);
  font-weight:750
}
.tools-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px
}
.tool-card {
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:24px;
  display:flex;
  gap:18px
}
.tool-mark {
  flex:0 0 48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:#f4f3ff;
  color:#5548d9;
  font-weight:900
}
.tool-card h3 {
  margin:0 0 6px;
  font-size:22px
}
.tool-card p {
  margin:0 0 10px;
  color:var(--muted)
}
.mini {
  display:inline-flex;
  font-size:11px;
  padding:4px 8px;
  border-radius:999px;
  background:#f2f4f7;
  color:#475467;
  font-weight:700;
  margin:3px 4px 0 0
}
.proscons {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin:24px 0
}
.pros,.cons {
  padding:20px;
  border-radius:16px;
  border:1px solid var(--line);
  background:#fff
}
.pros {
  border-top:3px solid #12b76a
}
.cons {
  border-top:3px solid #f79009
}
.pros h3,.cons h3 {
  margin-top:0
}
.factbox {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin:24px 0
}
.fact {
  padding:16px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px
}
.fact strong {
  display:block;
  font-size:13px;
  margin-bottom:4px
}
.fact span {
  font-size:14px;
  color:#475467
}
.breadcrumbs {
  font-size:12px;
  color:#667085;
  margin-bottom:18px
}
.breadcrumbs a {
  text-decoration:underline;
  text-underline-offset:2px
}
.callout {
  padding:18px 20px;
  background:#eff8ff;
  border:1px solid #b2ddff;
  border-radius:14px;
  color:#1849a9;
  margin:24px 0
}
.leadbox {
  margin-top:34px;
  padding:24px;
  border:1px solid var(--line);
  border-radius:20px;
  background:#fff
}
.lead-form {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}
.lead-form .full {
  grid-column:1/-1
}
.lead-form input,.lead-form select,.lead-form textarea {
  width:100%;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  color:var(--ink);
  font:inherit;
  padding:12px 14px
}
.lead-form textarea {
  min-height:110px;
  resize:vertical
}
.checkrow {
  display:flex;
  gap:9px;
  align-items:flex-start;
  font-size:12px;
  color:#667085
}
.checkrow input {
  width:auto;
  margin-top:4px
}
.form-status {
  font-size:13px;
  color:#667085
}
.link-list {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin-top:22px
}
.link-item {
  display:block;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:15px 16px
}
.link-item strong {
  display:block
}
.link-item span {
  font-size:13px;
  color:#667085
}
.legal-note {
  padding:14px 16px;
  background:#fffaeb;
  border:1px solid #fedf89;
  border-radius:13px;
  color:#854a0e;
  font-size:13px
}
.root-choice {
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:30px;
  background:radial-gradient(circle at 50% 0,rgba(102,87,255,.15),transparent 34%),var(--bg)
}
.choice-card {
  width:min(760px,100%);
  background:#fff;
  border:1px solid var(--line);
  border-radius:26px;
  padding:34px;
  box-shadow:0 22px 60px rgba(16,24,40,.10)
}
.choice-card h1 {
  font-size:clamp(34px,5vw,56px);
  line-height:1.05;
  margin:14px 0
}
.language-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin-top:24px
}
.language-grid a {
  padding:14px;
  border:1px solid var(--line);
  border-radius:13px
}
.language-grid small {
  display:block;
  color:#667085
}
.notfound {
  min-height:70vh;
  display:grid;
  place-items:center;
  text-align:center
}
.notfound h1 {
  font-size:80px;
  line-height:1;
  margin:0;
  color:var(--purple)
}
@media(max-width:900px) {
  .tools-grid,.factbox {
    grid-template-columns:1fr
  }
  .lead-form {
    grid-template-columns:1fr
  }
  .lead-form .full {
    grid-column:auto
  }
}
@media(max-width:620px) {
  .proscons,.link-list,.language-grid {
    grid-template-columns:1fr
  }
  .tool-card {
    display:block
  }
  .tool-mark {
    margin-bottom:14px
  }
}
/* V5: transparent decision tools and editorial provenance */
.language-label  {
  margin: 26px 0 8px;
  font-weight: 750;
  color: #344054;
}
.meta a  {
  color: var(--purple);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.utility-panel  {
  margin: 34px 0;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #f8f7ff;
}
.utility-links  {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 18px;
}
.utility-card  {
  display: block;
  padding: 18px;
  border: 1px solid #d9d6fe;
  border-radius: 15px;
  background: #fff;
}
.utility-card strong, .utility-card span  {
  display: block;
}
.utility-card span  {
  margin-top: 6px;
  color: #667085;
  font-size: 13px;
}
.selector-form  {
  display: grid;
  gap: 16px;
  margin: 28px 0;
}
.selector-form fieldset  {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 17px;
  padding: 20px;
  background: #fff;
}
.selector-form legend  {
  padding: 0 7px;
  font-weight: 800;
}
.selector-form label  {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  color: #475467;
}
.selector-form input  {
  margin-top: 5px;
}
.selector-results  {
  display: grid;
  gap: 12px;
  margin: 34px 0;
  scroll-margin-top: 90px;
}
.result-card  {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: #fff;
}
.result-rank  {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: #f4f3ff;
  color: #5548d9;
  font-weight: 900;
}
.result-card h3  {
  margin: 0 0 6px;
}
.score-line  {
  display: flex;
  justify-content: space-between;
  max-width: 280px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: #667085;
}
.text-button  {
  color: #4f46e5;
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.method-details  {
  margin: 28px 0;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
}
.method-details summary  {
  cursor: pointer;
  font-weight: 800;
}
.cost-form  {
  display: grid;
  gap: 18px;
  margin: 28px 0;
}
.cost-products  {
  display: grid;
  gap: 10px;
}
.cost-row  {
  display: grid;
  grid-template-columns: 1fr minmax(220px, 320px);
  gap: 14px;
  align-items: center;
  padding: 15px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.cost-row select, .cost-inputs input  {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 10px 12px;
  background: #fff;
  font: inherit;
}
.cost-check  {
  display: flex;
  gap: 9px;
  align-items: center;
}
.cost-inputs  {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.cost-inputs label  {
  font-size: 13px;
  color: #475467;
}
.cost-inputs input  {
  margin-top: 6px;
}
.cost-result  {
  margin: 24px 0;
}
.cost-total  {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: #111a2d;
  color: #fff;
  border-radius: 16px;
}
.cost-total strong  {
  font-size: 30px;
}
.cost-breakdown  {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 14px 2px;
  color: #667085;
  font-size: 13px;
}
.log-entry  {
  margin: 26px 0;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: #fff;
}
.log-entry time  {
  color: var(--purple);
  font-weight: 800;
  font-size: 13px;
}
.log-entry h2  {
  margin-top: 8px;
}
:focus-visible  {
  outline: 3px solid rgba(102, 87, 255, .35);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce)  {
  html  {
    scroll-behavior: auto;
  }
  *, *::before, *::after  {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}
@media (max-width: 760px)  {
  .utility-links, .cost-inputs, .cost-breakdown  {
    grid-template-columns: 1fr;
  }
  .cost-row  {
    grid-template-columns: 1fr;
  }
}

.language-suggestion {
  margin: 18px 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.language-suggestion span,
.language-suggestion small {
  display: block;
}

.language-suggestion .text-button {
  display: inline-block;
  margin: 6px 0 3px;
}

.language-suggestion small {
  color: var(--muted);
}

/* V6 editorial hubs, search and disclosure */
.guide-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.guide-card { background:#fff; border:1px solid var(--line); border-radius:18px; padding:22px; }
.guide-card > span, .search-result > span { color:var(--purple); font-weight:800; font-size:12px; }
.guide-card h2 { font-size:21px; line-height:1.35; margin:8px 0; }
.guide-card p { color:var(--muted); }
.text-link { color:var(--purple); font-weight:750; text-decoration:underline; text-underline-offset:3px; }
.decision-table { display:grid; gap:10px; margin:24px 0; }
.decision-table > div { display:grid; grid-template-columns:minmax(190px,.7fr) 1.7fr; gap:18px; border:1px solid var(--line); border-radius:14px; padding:16px 18px; background:#fff; }
.decision-table strong { color:#202939; }
.decision-table span { color:#667085; }
.related-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:18px 0 28px; }
.related-link { display:block; padding:16px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.related-link strong,.related-link span { display:block; }
.related-link span { margin-top:5px; color:var(--muted); font-size:12px; }
.correction-note { margin:28px 0; padding-top:18px; border-top:1px solid var(--line); font-size:13px; color:var(--muted); }
.correction-note a { text-decoration:underline; text-underline-offset:3px; }
.affiliate-inline-note { display:block; max-width:680px; margin:8px 0 0; color:#667085; font-size:12px; line-height:1.45; }
.site-search form { margin:24px 0; }
.site-search label { display:block; font-weight:800; margin-bottom:8px; }
.search-row { display:grid; grid-template-columns:1fr auto; gap:10px; }
.search-row input { min-height:46px; width:100%; border:1px solid var(--line); border-radius:12px; padding:0 14px; font:inherit; background:#fff; }
.search-count { color:var(--muted); font-size:13px; }
.search-results { display:grid; gap:12px; margin-top:16px; }
.search-result { border:1px solid var(--line); background:#fff; border-radius:15px; padding:18px; }
.search-result h2 { font-size:20px; line-height:1.35; margin:6px 0; }
.search-result p { color:var(--muted); margin:0; }
.empty-state { padding:18px; border:1px dashed var(--line); border-radius:13px; color:var(--muted); }
@media(max-width:760px){ .guide-grid,.related-grid{grid-template-columns:1fr}.decision-table>div{grid-template-columns:1fr}.nav a[href$="/search/"]{display:none}.search-row{grid-template-columns:1fr} }


/* V7: topic hubs and maintenance-friendly research navigation */
.topic-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:20px 0 28px; }
.topic-link { display:flex; flex-direction:column; gap:6px; padding:18px; border:1px solid var(--line); border-radius:16px; background:#fff; transition:transform .15s ease,border-color .15s ease; }
.topic-link:hover { transform:translateY(-2px); border-color:#c7d2fe; }
.topic-link span { color:#667085; font-size:.94rem; }
.topic-card-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.topic-card { display:block; padding:24px; border:1px solid var(--line); border-radius:18px; background:#fff; }
.topic-card>span { color:var(--accent); font-size:.82rem; font-weight:700; }
.topic-card h2 { margin:8px 0; }
.topic-card p { color:#667085; margin-bottom:0; }
.topic-mini-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:20px; }
.topic-mini { display:flex; flex-direction:column; gap:5px; padding:16px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.topic-mini span { color:#667085; font-size:.85rem; }
.topic-entry p { max-width:760px; color:#667085; }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }
:focus-visible { outline:3px solid #7c3aed; outline-offset:3px; }
@media(max-width:900px){ .topic-mini-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media(max-width:700px){ .topic-grid,.topic-card-grid,.topic-mini-grid{grid-template-columns:1fr;} }


/* V8: conversion paths, lead magnet and privacy-aware optional measurement */
.conversion-next { max-width: 1100px; margin: 34px auto; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: #f8fafc; }
.conversion-next h2 { margin-top: 0; }
.conversion-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.conversion-step { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.conversion-step span { color: #667085; font-size: .86rem; }
.conversion-step strong { color: var(--purple); }
.resource-strip { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(135deg,#f8f7ff,#fff); }
.resource-strip h2 { margin: 7px 0; }
.resource-strip p { margin: 0; color: #667085; }
.resource-download-box { margin-top: 30px; }
.resource-download-box [data-download-after-submit][hidden] { display: none; }
.measurement-consent { position: fixed; left: 18px; bottom: 18px; z-index: 1000; width: min(480px,calc(100vw - 36px)); padding: 18px; border: 1px solid #d8deea; border-radius: 16px; background: #fff; box-shadow: 0 18px 55px rgba(15,23,42,.18); }
.measurement-consent strong { display: block; font-size: 1rem; }
.measurement-consent p { margin: 7px 0 13px; color: #5f6b7a; font-size: .9rem; }
.measurement-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.privacy-settings-link { margin-top: 12px; padding: 0; border: 0; background: transparent; color: #98a2b3; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: inherit; font-size: 12px; }
@media(max-width:760px){ .conversion-grid{grid-template-columns:1fr}.resource-strip{align-items:flex-start;flex-direction:column}.measurement-consent{left:12px;bottom:12px;width:calc(100vw - 24px)} }