:root{
  --deep:#0057A8; --azure:#0096EC; --ink:#0e1b2a; --body:#3d4c5e;
  --line:#e2e8f0; --bg:#ffffff; --soft:#f5f8fc; --softer:#fafcfe;
  --ok:#0f7a4d; --ok-bg:#e8f6ee; --warn:#8a5a00; --warn-bg:#fdf3e0;
  --bad:#a32a2a; --bad-bg:#fceded; --info:#0057A8; --info-bg:#eaf3fc;
  --muted:#5b6b7d; --muted-bg:#eef1f5;
  --radius:14px; --maxw:1080px;
  --shadow:0 1px 2px rgba(14,27,42,.04), 0 8px 24px rgba(14,27,42,.06);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--body);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto}
a{color:var(--deep); text-underline-offset:3px}
a:hover{color:var(--azure)}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.narrow{max-width:780px}
h1,h2,h3,h4{color:var(--ink); line-height:1.22; margin:0 0 .5em; font-weight:700; letter-spacing:-.02em}
h1{font-size:clamp(2rem,5vw,3.1rem)}
h2{font-size:clamp(1.5rem,3.2vw,2.1rem); margin-top:0}
h3{font-size:1.2rem}
p{margin:0 0 1.1em}
.lede{font-size:clamp(1.08rem,2vw,1.28rem); color:var(--body)}
.eyebrow{
  display:inline-block; font-size:.76rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--azure); margin-bottom:1rem;
}
section{padding:64px 0; border-top:1px solid var(--line)}
section:first-of-type{border-top:none}
.soft{background:var(--soft)}
section[id]{scroll-margin-top:96px}

header.site{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.93);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line);
}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:14px; padding-bottom:14px}
.brand{display:flex; flex-direction:column; text-decoration:none; line-height:1.2}
.brand b{color:var(--deep); font-size:1.05rem; letter-spacing:-.02em}
.brand span{font-size:.76rem; color:var(--muted); letter-spacing:.02em}
.navlinks{display:flex; gap:20px; align-items:center}
.navlinks a{font-size:.92rem; text-decoration:none; color:var(--body); font-weight:500}
.navlinks a:hover{color:var(--deep)}
.navlinks a.btn-primary{color:#fff}
.navlinks a.btn-primary:hover{color:#fff}
@media(max-width:900px){.navlinks a:not(.btn){display:none}}

.btn{
  display:inline-flex; align-items:center; gap:8px; padding:13px 22px; border-radius:999px;
  font-weight:600; font-size:.96rem; text-decoration:none; border:1px solid transparent;
  cursor:pointer; transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn-primary{background:var(--deep); color:#fff; box-shadow:0 6px 18px rgba(0,87,168,.22)}
.btn-primary:hover{background:#004a90; color:#fff; transform:translateY(-1px)}
.btn-ghost{background:#fff; color:var(--deep); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--azure); color:var(--deep)}
.btn-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:1.6rem}

.hero{padding:72px 0 56px; background:linear-gradient(170deg,#f4f9ff 0%,#ffffff 62%)}
.hero h1{margin-bottom:.35em}
.hero .lede{max-width:62ch}
.hero-meta{display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:1.9rem; font-size:.92rem; color:var(--muted)}
.hero-meta b{color:var(--ink); font-weight:600}

/* why / before-after */
.compare{display:grid; gap:14px; margin:2rem 0 0}
.compare-row{
  display:grid; grid-template-columns:190px 1fr 1fr; gap:0;
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff;
}
@media(max-width:820px){.compare-row{grid-template-columns:1fr}}
.compare-row > div{padding:18px 20px}
.compare-topic{background:var(--softer); font-weight:600; color:var(--ink); display:flex; align-items:center}
.compare-without{border-left:1px solid var(--line); font-size:.94rem}
.compare-with{border-left:1px solid var(--line); font-size:.94rem; background:var(--softer)}
@media(max-width:820px){
  .compare-without,.compare-with{border-left:none; border-top:1px solid var(--line)}
}
.compare-label{
  display:block; font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  margin-bottom:.5em;
}
.compare-without .compare-label{color:var(--bad)}
.compare-with .compare-label{color:var(--ok)}

/* featured */
.featured{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.feat{
  border:1px solid var(--line); border-radius:var(--radius); padding:22px; background:#fff;
  text-decoration:none; display:flex; flex-direction:column; transition:all .15s ease;
}
.feat:hover{border-color:var(--azure); box-shadow:var(--shadow); transform:translateY(-2px)}
.feat h3{font-size:1.05rem; margin-bottom:.15em}
.feat .brandline{font-size:.84rem; color:var(--muted); margin-bottom:.9em}
.feat .price{font-size:1.45rem; font-weight:700; color:var(--ink); letter-spacing:-.02em; display:block}
.feat .per{font-size:.85rem; color:var(--muted); margin-bottom:.9em}
.feat p{font-size:.9rem; margin:0; flex:1}

.board{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff; box-shadow:var(--shadow)}
.board-head{
  display:flex; flex-wrap:wrap; gap:8px 16px; align-items:baseline; justify-content:space-between;
  padding:18px 22px; background:var(--softer); border-bottom:1px solid var(--line);
}
.board-head strong{color:var(--ink); font-size:1.02rem}
.board-head span{font-size:.85rem; color:var(--muted)}
.board ul{list-style:none; margin:0; padding:0}
.board li{
  display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; justify-content:space-between;
  padding:14px 22px; border-top:1px solid var(--line); font-size:.97rem;
}
.board li:first-child{border-top:none}
.board li .bname{display:flex; flex-direction:column; gap:2px; min-width:0}
.board li a{font-weight:600; text-decoration:none; color:var(--ink)}
.board li .bboard{font-size:.84rem; color:var(--muted); font-weight:500}
.board li .bboard i{font-style:normal; opacity:.75}
.board li a:hover{color:var(--deep); text-decoration:underline}
.board li .snote{font-size:.85rem; color:var(--muted); flex:1 1 100%; margin-top:2px; font-style:italic}
.pill{
  display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:999px;
  font-size:.79rem; font-weight:600; white-space:nowrap;
}
.pill::before{content:''; width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.85}
.pill.ok{background:var(--ok-bg); color:var(--ok)}
.pill.warn{background:var(--warn-bg); color:var(--warn)}
.pill.bad{background:var(--bad-bg); color:var(--bad)}
.pill.info{background:var(--info-bg); color:var(--info)}
.pill.muted{background:var(--muted-bg); color:var(--muted)}
.tag{
  display:inline-block; padding:2px 9px; border-radius:6px; font-size:.72rem; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; background:var(--info-bg); color:var(--deep);
}

.checker{border:1px solid var(--line); border-radius:var(--radius); background:#fff; box-shadow:var(--shadow); overflow:hidden}
.checker-body{padding:26px}
.field{margin-bottom:26px}
.field > label{display:block; font-weight:600; color:var(--ink); margin-bottom:10px; font-size:.98rem}
.field .hint{font-size:.85rem; color:var(--muted); font-weight:400; margin-top:-6px; margin-bottom:10px}
.choices{display:flex; flex-wrap:wrap; gap:9px}
.choice{position:relative}
.choice input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer}
.choice span{
  display:block; padding:9px 16px; border:1px solid var(--line); border-radius:999px;
  font-size:.9rem; background:#fff; transition:all .12s ease; cursor:pointer; color:var(--body);
}
.choice input:checked + span{background:var(--deep); border-color:var(--deep); color:#fff; font-weight:600}
.choice input:focus-visible + span{outline:2px solid var(--azure); outline-offset:2px}
.choice small{display:block; font-size:.78rem; opacity:.75; font-weight:400}
.result{border-top:1px solid var(--line); padding:26px; background:var(--softer); display:none}
.result.show{display:block}
.result h3{margin-bottom:.4em}
.result ol{margin:0 0 1.2em; padding-left:0; list-style:none}
.result ol li{padding:14px 16px; background:#fff; border:1px solid var(--line); border-radius:10px; margin-bottom:9px}
.result ol li a{font-weight:600; text-decoration:none}
.result ol li .meta{font-size:.88rem; color:var(--muted); margin-top:.25em}
.result ol li p{margin:.3em 0 0; font-size:.9rem; color:var(--muted)}
.result .why{margin-top:1.2em; padding:14px 16px; border-left:3px solid var(--azure); background:#fff; font-size:.91rem}
.result .why b{color:var(--ink)}

.grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.card{
  border:1px solid var(--line); border-radius:var(--radius); padding:22px; background:#fff;
  text-decoration:none; display:flex; flex-direction:column; transition:all .15s ease;
}
.card:hover{border-color:var(--azure); box-shadow:var(--shadow); transform:translateY(-2px)}
.card h3{margin-bottom:.3em; font-size:1.08rem}
.card .generic{font-size:.82rem; color:var(--muted); margin-bottom:.7em}
.card p{font-size:.92rem; margin-bottom:1em; color:var(--body); flex:1}
.card .foot{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.card .cost{font-size:.86rem; color:var(--muted)}
.card .cost b{color:var(--ink); font-weight:600}

.table{width:100%; border-collapse:collapse; font-size:.95rem; margin-bottom:1.2em}
.table th,.table td{text-align:left; padding:14px 16px; border-bottom:1px solid var(--line); vertical-align:top}
.table th{font-weight:600; color:var(--ink); background:var(--softer); font-size:.85rem; letter-spacing:.02em; text-transform:uppercase}
.table td b{color:var(--ink)}
.table .amt{white-space:nowrap; font-weight:600; color:var(--ink)}
.table tr.is-preferred td{background:#f2f9ff}
.tscroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
.tscroll .table{min-width:640px}

.note{border-left:3px solid var(--azure); background:var(--softer); padding:18px 20px; border-radius:0 10px 10px 0; font-size:.95rem; margin:1.4em 0}
.note.warn{border-left-color:#d99100; background:var(--warn-bg)}
.note strong{color:var(--ink)}
.ticklist{list-style:none; padding:0; margin:0 0 1.2em}
.ticklist li{position:relative; padding-left:30px; margin-bottom:11px}
.ticklist li::before{content:''; position:absolute; left:6px; top:.6em; width:8px; height:8px; border-radius:50%; background:var(--azure)}
.faq details{border-bottom:1px solid var(--line); padding:6px 0}
.faq summary{cursor:pointer; padding:16px 34px 16px 0; font-weight:600; color:var(--ink); list-style:none; position:relative; font-size:1.02rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+'; position:absolute; right:6px; top:50%; transform:translateY(-50%); font-size:1.4rem; color:var(--azure); font-weight:400; line-height:1}
.faq details[open] summary::after{content:'\2212'}
.faq .answer{padding:0 0 18px; font-size:.96rem}
.faq .answer p:last-child{margin-bottom:0}

.crumb{font-size:.86rem; color:var(--muted); padding:22px 0 0}
.crumb a{text-decoration:none}
.detail-head{padding:26px 0 44px}
.detail-head .pill{margin-bottom:1.2rem}
.two-col{display:grid; gap:44px; grid-template-columns:minmax(0,1fr) 330px; align-items:start}
@media(max-width:900px){.two-col{grid-template-columns:1fr; gap:32px}}
.sidebar{position:sticky; top:96px; display:flex; flex-direction:column; gap:16px}
@media(max-width:900px){.sidebar{position:static}}
.panel{border:1px solid var(--line); border-radius:var(--radius); padding:22px; background:#fff; box-shadow:var(--shadow)}
.panel h4{font-size:.78rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin-bottom:.9em; font-weight:700}
.panel .big{font-size:1.5rem; font-weight:700; color:var(--ink); letter-spacing:-.02em; display:block; margin-bottom:.2em}
.panel .sub{font-size:.87rem; color:var(--muted); margin:0}
.panel dl{margin:0; font-size:.92rem}
.panel dt{font-weight:600; color:var(--ink); margin-top:.9em}
.panel dt:first-child{margin-top:0}
.panel dd{margin:.15em 0 0}
.block{margin-bottom:40px}
.block h2{font-size:1.35rem; margin-bottom:.6em}
.source{font-size:.85rem; color:var(--muted); border-top:1px solid var(--line); padding-top:16px; margin-top:32px}

footer.site{background:#0e1b2a; color:#a9bacb; padding:56px 0 40px; font-size:.9rem}
footer.site a{color:#cfe2f5}
footer.site h4{color:#fff; font-size:.78rem; letter-spacing:.09em; text-transform:uppercase; margin-bottom:1em}
.foot-grid{display:grid; gap:32px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); margin-bottom:36px}
.foot-grid ul{list-style:none; padding:0; margin:0}
.foot-grid li{margin-bottom:8px}
.foot-grid a{text-decoration:none}
.foot-grid a:hover{text-decoration:underline}
.legal{border-top:1px solid rgba(255,255,255,.12); padding-top:24px; font-size:.83rem; line-height:1.6; color:#8ea3b8}
.legal p{margin-bottom:.9em}
.legal p:last-child{margin-bottom:0}