@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');
:root{--paper:#f6f4ee;--card:#fffdf8;--ink:#17212b;--body:#36424d;--navy:#12324a;--navy-d:#0b2234;--sun:#f2a516;--sun-d:#c98208;--leaf:#3f8f5a;--mut:#7a8590;--bd:#e3dfd3}
*{margin:0;padding:0;box-sizing:border-box}
html,body{overflow-x:clip}
body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--paper);line-height:1.65;font-size:17px;-webkit-font-smoothing:antialiased}
a{color:var(--navy)}
h1,h2,h3,.brand{font-family:'Space Grotesk',system-ui,sans-serif;letter-spacing:-.01em;color:var(--navy-d)}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.narrow{max-width:760px;margin:0 auto;padding:0 20px}
.sun{display:inline-block;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle,var(--sun) 45%,transparent 47%),conic-gradient(from 0deg,var(--sun) 0 10deg,transparent 10deg 45deg,var(--sun) 45deg 55deg,transparent 55deg 90deg,var(--sun) 90deg 100deg,transparent 100deg 135deg,var(--sun) 135deg 145deg,transparent 145deg 180deg,var(--sun) 180deg 190deg,transparent 190deg 225deg,var(--sun) 225deg 235deg,transparent 235deg 270deg,var(--sun) 270deg 280deg,transparent 280deg 315deg,var(--sun) 315deg 325deg,transparent 325deg);vertical-align:middle;flex:none}
/* header */
.site-head{background:var(--navy-d);position:sticky;top:0;z-index:40}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;gap:16px}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:1.25rem;color:#fff;text-decoration:none}
.nav{display:flex;gap:18px;font-size:.88rem;font-weight:500}
.nav a{color:#d7e0e8;text-decoration:none}.nav a:hover{color:var(--sun)}
@media(max-width:720px){.nav{display:none}.brand{font-size:1.1rem}}
/* article */
.arthead{background:linear-gradient(180deg,var(--navy) 0%,var(--navy-d) 100%);color:#fff;padding:38px 0 34px}
.arthead h1{color:#fff;font-size:clamp(1.7rem,4.5vw,2.5rem);line-height:1.15;margin:10px 0 12px}
.crumb{font-size:.82rem;color:#b9c7d3}.crumb a{color:#b9c7d3}
.tag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--navy-d);background:var(--sun);border-radius:20px;padding:3px 11px;margin-top:10px}
.artmeta{font-size:.88rem;color:#c8d4de}
.artbody{padding:30px 0 10px}
.artbody p{margin:0 0 1rem}
.artbody h2{font-size:1.5rem;margin:2.2rem 0 .8rem;display:flex;align-items:center;gap:10px}
.artbody h3{font-size:1.15rem;margin:1.3rem 0 .4rem}
.artbody ul,.artbody ol{margin:0 0 1rem 1.3rem}.artbody li{margin:.3rem 0}
.tldr{background:#fff7e3;border-left:4px solid var(--sun);border-radius:10px;padding:1rem 1.2rem;margin:1.4rem 0}
.pick{background:var(--card);border:2px solid var(--sun);border-radius:14px;padding:1.2rem 1.3rem;margin:1.6rem 0}
.pick .pk{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sun-d);display:flex;align-items:center;gap:8px}
.pick h3{margin:.4rem 0 .5rem;font-size:1.3rem}
.btn-buy{display:inline-block;background:var(--sun);color:var(--navy-d);font-weight:700;border-radius:10px;padding:.7rem 1.2rem;text-decoration:none;margin-top:.4rem}
.btn-buy:hover{background:var(--sun-d);color:#fff}
.lnk{display:inline-block;font-weight:600;color:var(--navy);border-bottom:2px solid var(--sun);text-decoration:none}
.faq h3{font-size:1.05rem}
.disc{font-size:.82rem;color:var(--mut);margin-top:1.5rem}
.related-guides h2{font-size:1.3rem;margin-bottom:.6rem}.related-guides li{margin:.35rem 0 .35rem 1.2rem}
table{border-collapse:collapse;width:100%;margin:1rem 0;font-size:.95rem}td,th{border:1px solid var(--bd);padding:.5rem .6rem;text-align:left;vertical-align:top}th{background:#f1ece0}
/* home */
.hero{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-d) 70%);color:#fff;padding:64px 0 56px}
.hero h1{color:#fff;font-size:clamp(2rem,5.5vw,3.3rem);line-height:1.08;max-width:760px}
.hero h1 em{font-style:normal;color:var(--sun)}
.hero p{color:#d3dde6;max-width:620px;margin:16px 0 26px;font-size:1.1rem}
.hero .btn-buy{margin-right:10px}
.ghost{display:inline-block;color:#fff;border:1.5px solid #6d8aa3;border-radius:10px;padding:.65rem 1.1rem;text-decoration:none;font-weight:600}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:38px;max-width:720px}
.stats div{background:rgba(255,255,255,.07);border-radius:12px;padding:12px 14px;font-size:.88rem;color:#c8d4de}.stats b{display:block;font-family:'Space Grotesk';font-size:1.4rem;color:var(--sun)}
@media(max-width:640px){.stats{grid-template-columns:1fr}}
.sec{padding:48px 0}.sec h2{font-size:1.8rem;margin-bottom:6px;display:flex;align-items:center;gap:10px}.sec .sub{color:var(--mut);margin-bottom:22px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.acard{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:18px 18px 16px;text-decoration:none;color:var(--ink);transition:transform .15s,box-shadow .15s}
.acard:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(18,50,74,.1)}
.acard .tag{margin:0 0 8px}.acard h3{font-size:1.12rem;margin-bottom:6px}.acard p{font-size:.92rem;color:var(--body)}
.watt{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:22px}
.watt label{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px dashed var(--bd);font-size:.95rem}
.watt .res{margin-top:14px;font-family:'Space Grotesk';font-size:1.25rem;color:var(--navy-d)}
.persona{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.persona div{background:#fff7e3;border-radius:12px;padding:14px 16px;font-size:.95rem}
/* footer */
.site-foot{background:var(--navy-d);color:#b9c7d3;padding:40px 0 26px;margin-top:40px;font-size:.92rem}
.site-foot .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:26px}
@media(max-width:720px){.site-foot .cols{grid-template-columns:1fr}}
.site-foot h5{color:#fff;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
.site-foot a{color:#d7e0e8;display:block;text-decoration:none;margin:.25rem 0}
.site-foot .brand{margin-bottom:8px}
.fine{border-top:1px solid #2a4258;margin-top:26px;padding-top:14px;font-size:.8rem}.fine a{display:inline}
/* ===== v2: visuals & effects ===== */
.arthead.has-img{background-size:cover;background-position:center;padding:110px 0 46px;min-height:360px;display:flex;align-items:flex-end}
.arthead.has-img .narrow{width:100%}
.arthead.has-img h1{text-shadow:0 2px 18px rgba(0,0,0,.35)}
.toc{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:1rem 1.2rem;margin:1.4rem 0;font-size:.95rem}
.toc ol{margin:.5rem 0 0 1.2rem}.toc li{margin:.25rem 0}.toc a{text-decoration:none;border-bottom:1px solid transparent}.toc a:hover{border-bottom-color:var(--sun)}
.prod{background:var(--card);box-shadow:0 2px 14px rgba(0,0,0,.04);transition:box-shadow .2s,transform .2s}.prod:hover{box-shadow:0 10px 28px rgba(0,0,0,.08);transform:translateY(-2px)}
.pick{box-shadow:0 10px 30px rgba(0,0,0,.07)}
#prog{position:fixed;top:0;left:0;height:3px;width:0;background:var(--sun);z-index:60;transition:width .1s}
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
html{scroll-behavior:smooth}h2[id]{scroll-margin-top:80px}
/* home hero with photo */
.hero.photo{background-size:cover;background-position:center;padding:120px 0 80px;position:relative}
.hero.photo .wrap{position:relative}
.hero h1,.hero p,.hero .tag,.hero .btn-buy,.hero .ghost,.stats>div{animation:up .8s ease both}
.hero p{animation-delay:.12s}.hero .btn-buy,.hero .ghost{animation-delay:.24s}.stats>div{animation-delay:.36s}
@keyframes up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.stats div{backdrop-filter:blur(6px)}
/* cards with images */
.acard.im{padding:0;overflow:hidden;display:flex;flex-direction:column}
.acard.im .ph{aspect-ratio:16/9;background-size:cover;background-position:center;transition:transform .5s ease}
.acard.im:hover .ph{transform:scale(1.05)}
.acard.im .bd{padding:14px 16px 16px;background:var(--card);position:relative}
.acard.im .tag{margin:0 0 6px}
.feat{display:grid;grid-template-columns:1.2fr 1fr;gap:34px;align-items:center}
.feat img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:18px;box-shadow:0 18px 40px rgba(0,0,0,.14);display:block}
@media(max-width:820px){.feat{grid-template-columns:1fr}}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:s}
.steps div{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:18px;position:relative}
.steps div:before{counter-increment:s;content:counter(s);display:inline-flex;width:34px;height:34px;border-radius:50%;background:var(--sun);color:var(--navy-d);font-weight:700;align-items:center;justify-content:center;margin-bottom:8px}
@media(max-width:720px){.steps{grid-template-columns:1fr}}
.band{background:var(--navy-d);color:#d7e0e8;border-radius:20px;padding:34px;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center}
.band h3{color:#fff;font-size:1.5rem;margin-bottom:6px}
@media(max-width:720px){.band{grid-template-columns:1fr}}
.site-head{transition:box-shadow .2s}.site-head.sh{box-shadow:0 6px 20px rgba(0,0,0,.18)}
.hero .btn-buy,.hero .ghost{margin-bottom:10px}