:root{--bg:#0b1120;--s1:#131b2e;--s2:#1b2540;--ink:#e6edfb;--mut:#93a3c4;--line:#26324d;--acc:#38bdf8;--acc2:#f472b6;--warn:#e0a23c;--df:Georgia,'Iowan Old Style','Times New Roman',serif;--bf:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;--r:10px;--sp:44px}
*{box-sizing:border-box}html{scroll-behavior:smooth;max-width:100%;overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--bf);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;max-width:100%;overflow-x:hidden;counter-reset:sec}
a{color:var(--acc)}a:focus-visible,.cta:focus-visible{outline:2px solid var(--acc2);outline-offset:2px}img{max-width:100%}main{overflow:hidden}
::selection{background:color-mix(in srgb,var(--acc) 30%,transparent)}
.wrap{max-width:1100px;margin:0 auto;padding:0 22px;min-width:0}.wrap>*,.hero,.hero>*{min-width:0}
h1,h2,h3{font-family:var(--df);line-height:1.14;margin:.2em 0 .45em}
h1{font-size:clamp(38px,6vw,63px);letter-spacing:-.015em}
h2{font-size:clamp(22px,2.6vw,29px)}
h1,h2,h3,p,li,td,th,strong,.cta,.card,.byline,.ico{overflow-wrap:anywhere}
p{margin:.5em 0 .9em}
.lead{font-size:18px;line-height:1.6;max-width:660px}
.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin:0 0 10px}
.topbar{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(7px);border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;gap:16px;height:60px}
.brand{font-family:var(--df);font-weight:800}
.nav{margin-left:auto;display:flex;gap:16px;flex-wrap:wrap;font-size:13px}
.nav a{color:var(--mut);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px}.nav a:hover{color:var(--ink);border-bottom-color:var(--acc)}
.chip{display:inline-block;border:1px solid var(--line);padding:2px 8px;font-size:11px;letter-spacing:.08em;color:var(--mut);border-radius:3px}
.cta{display:inline-block;background:var(--acc);color:#fff;text-decoration:none;font-weight:700;padding:13px 22px;border-radius:var(--r);letter-spacing:.01em}
.cta:hover{filter:brightness(1.08)}
.cta.alt{background:transparent;color:var(--acc);border:1px solid color-mix(in srgb,var(--acc) 55%,transparent)}
.ctarow{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:18px 0 0}
section{padding:var(--sp) 0;border-top:1px solid var(--line)}
.muted{color:var(--mut)}.warnote{color:var(--warn)}
.card{background:var(--s1);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.foot{border-top:1px solid var(--line);padding:30px 0;color:var(--mut);font-size:13px;line-height:1.7}
.tnum{font-variant-numeric:tabular-nums}
.trustgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}
.trust{background:var(--s1);border:1px solid var(--line);border-radius:var(--r);padding:15px}
.trust .k{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--mut)}
.trust strong{display:block;margin-top:5px;color:var(--ink);font-size:14px;line-height:1.45}
.byline{display:flex;gap:6px;flex-wrap:wrap;align-items:baseline;margin:16px 0;color:var(--mut);font-size:13px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:8px 0}
.byline>*+*::before{content:'·';margin:0 8px;color:var(--mut)}
.byline a{color:var(--acc);text-decoration:none;border-bottom:1px dotted var(--acc)}
.iconrow{display:flex;flex-wrap:wrap;margin:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ico{display:flex;flex-direction:column;gap:2px;padding:9px 16px 9px 12px;border-left:2px solid var(--acc);margin:8px 14px 8px 0;font-size:13px}
.ico i{font-style:normal;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--mut)}
.ico b{font-weight:600;color:var(--ink)}
.shot{border:1px solid var(--line);border-left:3px solid var(--acc2);border-radius:var(--r);padding:18px 20px;background:var(--s1)}
.shotbar{height:3px;width:56px;background:var(--acc2);margin-bottom:12px}
.compare{width:100%;border-collapse:collapse;margin-top:12px}
.compare th,.compare td{border-bottom:1px solid var(--line);padding:12px;text-align:left;vertical-align:top;font-size:15px}
.compare th{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--mut)}
details{border-top:1px solid var(--line);padding:10px 0}
details summary{cursor:pointer;font-weight:600}
.agenote{font-size:12px;color:var(--mut);margin:10px 0 0;letter-spacing:.03em}
.stickycta{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;background:color-mix(in srgb,var(--bg) 88%,#000);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid color-mix(in srgb,var(--acc) 32%,transparent);box-shadow:0 -14px 40px -8px color-mix(in srgb,#000 55%,transparent);padding:10px 0 calc(10px + env(safe-area-inset-bottom))}
.stickycta .wrap{display:flex;align-items:center;gap:12px}
.stickycta .sc-label{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;line-height:1.25}
.stickycta .sc-label b{font-size:.92rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stickycta .sc-label em{font-style:normal;font-size:.68rem;color:var(--mut);letter-spacing:.04em;text-transform:uppercase}
.stickycta .cta{flex:0 0 auto;width:auto;min-height:46px;padding:11px 22px;white-space:nowrap;margin:0}
@media(max-width:760px){.stickycta{display:block}body.has-stickycta{padding-bottom:84px}}
.deep{max-width:720px}
.deep p{margin:.6em 0 1em}
.deep h3{margin-top:1.3em;font-size:19px}
.deep ul,.deep ol{padding-left:22px;margin:.6em 0 1em}
.deep li{margin:.3em 0}
.todo{list-style:none;padding:0;margin:14px 0;display:grid;gap:10px}
.todo label{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.todo input{margin-top:5px;accent-color:var(--acc);width:16px;height:16px;flex:none}
.guiagrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.guialink{display:block;padding:18px;border:1px solid var(--line);border-radius:var(--r);background:var(--s1);text-decoration:none;color:var(--ink)}
.guialink:hover{border-color:color-mix(in srgb,var(--acc) 55%,var(--line))}
.guialink h3{margin:0 0 6px;font-size:17px}
.guialink p{margin:0 0 10px;color:var(--mut);font-size:14px;line-height:1.5}
.guialink .more{color:var(--acc);font-size:13px;font-weight:600}
.crumbs{color:var(--mut);font-size:13px;margin-bottom:10px}
.crumbs a{color:var(--acc);text-decoration:none}.crumbs span{color:var(--ink)}
.licline{max-width:720px;margin-top:18px;font-size:13px}.licline a{color:var(--acc)}
.linklist{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:10px}
.linklist a{color:var(--acc);text-decoration:none;border-bottom:1px solid transparent}.linklist a:hover{border-bottom-color:var(--acc)}
@media(max-width:760px){.guiagrid{grid-template-columns:1fr}}
.guiaindex{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:22px}
.guiacol h2{font-size:20px;margin-bottom:8px}
@media(max-width:680px){.guiaindex{grid-template-columns:1fr}}
.hero.home{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:start;padding-top:54px;padding-bottom:32px}
/* v11 god-tier layer: atmosphere + glass depth + dramatic type (adapts light/dark; SKIN wins) */
body{position:relative;background:radial-gradient(62% 55% at 84% -8%,color-mix(in srgb,var(--acc) 20%,transparent),transparent 68%),radial-gradient(46% 42% at -6% 6%,color-mix(in srgb,var(--acc2) 15%,transparent),transparent 62%),radial-gradient(82% 72% at 50% 130%,color-mix(in srgb,var(--acc) 9%,transparent),transparent 72%),var(--bg);background-attachment:fixed}
main{position:relative;z-index:1}
.topbar,.foot{position:relative;z-index:2}
h1{font-weight:860;letter-spacing:-.03em;line-height:1.02}
h2{letter-spacing:-.02em}
.eyebrow{font-weight:700}
.lead{font-size:19px;color:color-mix(in srgb,var(--ink) 82%,var(--mut))}
.hero{position:relative}
.hero::before{content:'';position:absolute;z-index:-1;top:-18%;right:-10%;width:58%;height:135%;background:radial-gradient(closest-side,color-mix(in srgb,var(--acc) 22%,transparent),transparent 70%);filter:blur(10px);pointer-events:none}
.hero::after{content:'';position:absolute;z-index:-1;left:-6%;bottom:-8%;width:280px;height:280px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--acc2) 20%,transparent),transparent);filter:blur(26px);opacity:.5;pointer-events:none}
.panel,.scorecard-panel,.atlascard,.verdict{background:color-mix(in srgb,var(--s1) 72%,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15);border:1px solid color-mix(in srgb,var(--ink) 14%,transparent);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--ink) 16%,transparent),0 30px 72px -28px color-mix(in srgb,#000 72%,transparent);border-radius:16px}
.card,.trust,.shot,.tile,.guialink{box-shadow:inset 0 1px 0 color-mix(in srgb,var(--ink) 8%,transparent),0 14px 34px -18px color-mix(in srgb,#000 55%,transparent);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.card:hover,.trust:hover,.guialink:hover,.atlascard:hover{transform:translateY(-2px)}
.cta{position:relative;overflow:hidden;background-image:linear-gradient(180deg,color-mix(in srgb,var(--acc) 82%,#fff),var(--acc));box-shadow:0 12px 28px -8px color-mix(in srgb,var(--acc) 55%,transparent),inset 0 1px 0 color-mix(in srgb,#fff 45%,transparent);transition:transform .07s ease,box-shadow .18s ease,filter .18s ease}
.cta::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 42%,color-mix(in srgb,#fff 30%,transparent) 50%,transparent 58%);transform:translateX(-130%);transition:transform .7s ease;pointer-events:none}
.cta:hover{box-shadow:0 16px 40px -8px color-mix(in srgb,var(--acc) 62%,transparent)}
.cta:hover::after{transform:translateX(130%)}
.cta:active{transform:translateY(1px)}
.topbar{background:color-mix(in srgb,var(--bg) 74%,transparent);box-shadow:0 1px 0 color-mix(in srgb,var(--ink) 6%,transparent)}
::selection{background:color-mix(in srgb,var(--acc) 32%,transparent)}
@media(max-width:760px){.hero::before,.hero::after{display:none}body{background-attachment:scroll}.panel,.scorecard-panel,.atlascard,.verdict{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--s1)}body{font-size:16px}.wrap{padding:0 16px}h1{font-size:31px}h2{font-size:23px}.topbar .wrap{height:auto;min-height:58px;align-items:flex-start;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}.nav{margin-left:0;width:100%;gap:14px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);mask-image:linear-gradient(90deg,#000 86%,transparent)}.nav a{white-space:nowrap}.cta{width:100%;max-width:100%;text-align:center}.trustgrid{grid-template-columns:1fr 1fr}.compare{display:block;overflow-x:auto}.gloss{grid-template-columns:1fr!important}.tiles{grid-template-columns:1fr!important}.card,.panel,.tile{min-width:0}.iconrow{gap:0}.ico{max-width:100%}}

.hero{padding-top:50px;padding-bottom:26px}
.rule{height:3px;background:var(--acc);width:80px;margin:14px 0}
.atlas{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:18px}
.atlascard{background:var(--s1);border:1px solid var(--line);border-left:3px solid var(--acc);border-radius:var(--r);padding:18px}
.atlascard h3{margin:0 0 8px}
.atlascard .row{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-top:1px dashed var(--line);font-size:14px}
.atlascard .row:first-of-type{border-top:none}
.atlascard .row b{font-variant-numeric:tabular-nums}
@media(max-width:680px){.atlas{grid-template-columns:1fr}}
:root{--r:6px;--sp:50px}
.brand{letter-spacing:.02em}
.brand::before{content:'◍ ';color:var(--acc)}
.masthead{letter-spacing:-.01em}
.cta{background:var(--acc);color:#0b1120}
.cta.alt{color:var(--acc);border:1px solid var(--acc);background:transparent}
.trust{border-top:2px solid var(--acc)}
.eyebrow{letter-spacing:.16em}
.chip{border-radius:4px;border-color:var(--acc)}
@media(max-width:760px){.hero{display:block!important;grid-template-columns:1fr!important}.hero>*{width:100%!important;max-width:100%!important}.hero>*+*{margin-top:20px}.trustgrid,.tiles,.gloss{grid-template-columns:1fr!important}.cta{display:block;white-space:normal;line-height:1.35}.ctarow{flex-direction:column;align-items:stretch}.cta.alt{margin-top:0}.masthead{font-size:34px}}