:root{--ground:#F2F5F6;--surface:#FFFFFF;--ink:#13212B;--ink-soft:#4B5D69;--line:#D6E0E5;--mist:#AFCCDB;--deep:#2C5566;--gold:#A8875A;--night:#0C161D;--night-2:#12212B;--on-night:#E9F1F4;--on-night-soft:#9FB3BD;--chip:#E4EDF1;
--serif:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;--sans:"Figtree","Helvetica Neue",Arial,sans-serif;--mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;color-scheme:light}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.1;margin:0;letter-spacing:-.01em;text-wrap:balance}
p{margin:0}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.narrow{max-width:820px}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--deep)}
.btn{display:inline-flex;align-items:center;gap:10px;font:600 15px/1 var(--sans);padding:15px 24px;border-radius:999px;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .2s,background .2s}
.btn:hover{transform:translateY(-1px)}
.btn-light{background:var(--on-night);color:var(--night)}
.btn-light:hover{background:#fff}
.arrow{font-family:var(--mono);font-weight:400}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--mist);outline-offset:3px}

/* header */
.gh{position:sticky;top:0;z-index:40;background:rgba(12,22,29,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 1px 0 rgba(175,204,219,.12);padding-top:env(safe-area-inset-top,0px)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:14px;color:var(--on-night)}
.brand{text-decoration:none}
.brand-mark{font-family:var(--serif);font-size:24px;white-space:nowrap}
.brand-mark em{font-style:italic;color:var(--mist)}
.nav-links{display:flex;gap:30px;list-style:none;margin:0;padding:0;font-size:14px;align-items:center}
.nav-links>li>a{text-decoration:none;color:var(--on-night-soft);transition:color .2s;padding-block:10px;display:inline-block}
.nav-links>li>a:hover{color:var(--on-night)}
.nav-r{display:flex;align-items:center;gap:10px}
.nav .btn{padding:11px 18px;font-size:14px}
.nav .btn .short{display:none}
.dd{position:relative}
.car{font-size:10px;margin-left:2px;opacity:.8}
.dd-menu{position:absolute;top:100%;left:50%;transform:translate(-50%,6px);min-width:260px;display:grid;gap:2px;padding:8px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 48px -16px rgba(12,22,29,.45);opacity:0;visibility:hidden;transition:opacity .18s,transform .18s}
.dd:hover .dd-menu,.dd:focus-within .dd-menu{opacity:1;visibility:visible;transform:translate(-50%,0)}
.dd-menu a{display:grid;gap:2px;padding:10px 12px;border-radius:9px;text-decoration:none;color:var(--ink)}
.dd-menu a:hover{background:var(--chip)}
.dd-menu strong{font-weight:600;font-size:14px}
.dd-menu span{font-size:12.5px;color:var(--ink-soft)}
.dd-menu .dd-all{font-size:13px;font-weight:600;color:var(--deep);border-top:1px solid var(--line);border-radius:0 0 9px 9px;margin-top:4px}
.menu-btn{display:none;width:42px;height:42px;border-radius:50%;border:1px solid rgba(233,241,244,.35);background:transparent;cursor:pointer;place-content:center;gap:6px;padding:0}
.menu-btn span{display:block;width:18px;height:1.5px;background:var(--on-night);transition:transform .25s}
.menu-btn[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
.mnav{display:grid;padding:4px clamp(16px,4vw,40px) 24px;background:rgba(12,22,29,.98)}
.mnav a:not(.btn){font:400 26px/1.2 var(--serif);color:var(--on-night);text-decoration:none;padding:12px 0;border-bottom:1px solid rgba(175,204,219,.14)}
.mnav a.sub{font:500 16px/1.3 var(--sans);color:var(--on-night-soft);padding-left:18px}
.mnav .btn{margin-top:18px;justify-content:center}
@media (min-width:861px){.mnav{display:none!important}}
@media (max-width:860px){.nav-links{display:none}.menu-btn{display:grid}}
@media (max-width:480px){.brand-mark{font-size:20px}.nav .btn{padding:10px 14px;font-size:13px}.nav .btn .long{display:none}.nav .btn .short{display:inline}}

/* hero */
.g-hero{background:var(--night);color:var(--on-night);padding:clamp(48px,7vw,88px) 0 clamp(44px,6vw,72px);position:relative;overflow:hidden;isolation:isolate}
.g-hero::before{content:"";position:absolute;width:560px;height:560px;right:-180px;top:-260px;border-radius:50%;background:radial-gradient(circle,rgba(175,204,219,.28),transparent 65%);z-index:-1}
.g-hero .eyebrow{color:var(--mist);margin:22px 0 14px}
.g-hero h1{font-size:clamp(38px,5.6vw,64px);max-width:18ch}
.lede{margin-top:20px;font-size:clamp(18px,1.7vw,20px);color:var(--on-night-soft);max-width:60ch}
.lede strong{color:var(--on-night);font-weight:600}
.meta{margin-top:22px;font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.crumbs{font-size:13px;color:var(--on-night-soft)}
.crumbs a{color:var(--on-night-soft);text-decoration:none}
.crumbs a:hover{color:var(--on-night)}
.crumbs span{color:var(--on-night)}

/* body */
.g-body{padding-block:clamp(40px,6vw,72px)}
.g-body h2{font-size:clamp(28px,3.4vw,40px);margin:56px 0 16px}
.g-body h2:first-child{margin-top:0}
.g-body>p{color:var(--ink-soft);margin-bottom:16px}
.g-body p strong,.g-body li strong{color:var(--ink);font-weight:600}
.tiers{display:grid;gap:0;margin:20px 0 8px;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.tier{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 20px;border-top:1px solid var(--line)}
.tier:first-child{border-top:0}
.tier span{color:var(--ink-soft);font-size:16px}
.tier strong{font:500 15px/1.3 var(--mono);color:var(--deep);white-space:nowrap}
.tbl{margin:20px 0 14px;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.tbl table{width:100%;border-collapse:collapse;font-size:15px}
.tbl th,.tbl td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{font:500 11px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);background:var(--chip)}
.tbl tr:last-child td{border-bottom:0}
.tbl td:first-child{font-weight:600;width:30%}
.tbl td.nm{font-family:var(--mono);color:var(--deep);white-space:nowrap;font-size:14px}
.tbl td:last-child:not(.nm){color:var(--ink-soft)}
.tbl table.two td:first-child{width:auto}
@media (max-width:640px){
  .tbl thead{display:none}
  .tbl table,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%!important}
  .tbl tr{padding:14px 16px;border-bottom:1px solid var(--line)}
  .tbl tr:last-child{border-bottom:0}
  .tbl td{padding:0;border:0}
  .tbl td.nm{margin:4px 0;white-space:normal}
  .tier{flex-direction:column;gap:4px}
}
.note{font-size:15px}
.ticks,.nums{margin:8px 0 16px;padding:0;list-style:none;display:grid;gap:14px;color:var(--ink-soft)}
.ticks li{position:relative;padding-left:28px}
.ticks li::before{content:"✓";position:absolute;left:2px;top:0;color:var(--gold);font-weight:700}
.nums{counter-reset:n}
.nums li{position:relative;padding-left:44px;counter-increment:n}
.nums li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:2px;font:500 13px/1.6 var(--mono);color:var(--gold)}
.cta-box{margin:44px 0;display:grid;grid-template-columns:1fr auto;align-items:center;gap:20px 32px;padding:clamp(24px,3.4vw,36px);border-radius:20px;background:var(--night);color:var(--on-night)}
.cta-box>div{display:grid;gap:8px}
.cta-box .eyebrow{color:var(--gold)}
.cta-box h3{font-size:clamp(24px,2.6vw,30px)}
.cta-box p:not(.eyebrow){color:var(--on-night-soft);font-size:16px}
@media (max-width:700px){.cta-box{grid-template-columns:1fr}.cta-box .btn{justify-self:start}}
.faq-list{border-top:1px solid var(--line);margin-top:8px}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;font:600 17px/1.35 var(--sans)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";font:300 26px/1 var(--sans);color:var(--deep);transition:transform .2s}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list details p{padding:0 32px 20px 0;color:var(--ink-soft)}
.disclaimer{margin-top:40px!important;font-size:13px;color:var(--ink-soft)}

/* guides index */
.g-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;padding-block:clamp(40px,6vw,64px)}
.gcard{display:grid;gap:12px;align-content:start;padding:28px;background:var(--surface);border:1px solid var(--line);border-radius:20px;text-decoration:none;transition:transform .2s,border-color .2s,box-shadow .2s}
a.gcard:hover{transform:translateY(-3px);border-color:var(--mist);box-shadow:0 24px 48px -28px rgba(12,22,29,.35)}
.gcard .eyebrow{color:var(--gold)}
.gcard h2{font-size:28px}
.gcard p{color:var(--ink-soft);font-size:16px}
.gcard .go{font-weight:600;color:var(--deep);font-size:15px;margin-top:4px}
.gcard.soon{background:transparent;border-style:dashed}

/* footer */
footer{border-top:1px solid var(--line);padding-block:40px;background:var(--ground)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:28px;align-items:end}
.foot .brand-mark{color:var(--ink)}
.foot .brand-mark em{color:var(--deep)}
.muted{color:var(--ink-soft);font-size:15px}
.mail{color:var(--deep);text-decoration:none;font-weight:600;font-size:15px}
.flinks{display:flex;gap:20px;font-size:14px}
.flinks a{color:var(--ink-soft);text-decoration:none}
.flinks a:hover{color:var(--ink)}
.legal{width:100%;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:13px;color:var(--ink-soft);padding-top:22px;border-top:1px solid var(--line)}
.legal a{color:inherit}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn,.gcard,.dd-menu{transition:none}}

.compare{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0 18px}
.opt-card{display:grid;gap:10px;align-content:start;padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:18px}
.opt-card h3{font-size:24px}
.opt-card .big{font:500 18px/1.3 var(--mono);color:var(--ink-soft)}
.opt-card .ticks{margin:6px 0 0;gap:8px;font-size:15px}
.opt-card.best{border:1.5px solid var(--gold);box-shadow:0 24px 48px -30px rgba(168,135,90,.6)}
.opt-card.best .eyebrow{color:var(--gold)}
.opt-card.best .big{color:var(--deep)}
@media (max-width:700px){.compare{grid-template-columns:1fr}}

.sub-h{font-size:clamp(22px,2.4vw,28px);margin:36px 0 10px}
.tbl tr.total td{background:var(--chip);font-weight:700;color:var(--ink)}
.tbl tr.total td.nm{color:var(--deep);font-weight:600}

.answer{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0 14px}
.ans{display:grid;gap:12px;align-content:start;padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:18px}
.ans.best{border:1.5px solid var(--gold);box-shadow:0 24px 48px -30px rgba(168,135,90,.6)}
.ans.best .eyebrow{color:var(--gold)}
.ans-num{font:400 clamp(28px,2.7vw,33px)/1.15 var(--serif);color:var(--ink)}
.ans p:not(.eyebrow){color:var(--ink-soft);font-size:15px}
.ans a{font-weight:600;font-size:14px;color:var(--deep);text-decoration:none}
.ans a:hover{text-decoration:underline}
.ans-list{list-style:none;margin:0;padding:0;display:grid;font-size:14.5px}
.ans-list li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--line);color:var(--ink-soft)}
.ans-list b{font:500 13.5px/1.4 var(--mono);color:var(--deep);white-space:nowrap}
@media (max-width:700px){.answer{grid-template-columns:1fr}}
h2[id],h3[id]{scroll-margin-top:90px}

.ig{display:inline-flex;align-items:center;gap:8px;color:var(--deep);text-decoration:none;font-weight:600;font-size:15px}.ig:hover{text-decoration:underline}.ig svg{flex:none}