:root{
--bg:#ffffff;
--soft:#f4f5fa;
--text:#171a21;
--muted:#5c6577;
--accent:#6a3df0;
--accent-dark:#5730d4;
--link:#1b46c9;
--border:#e2e5ee;
--head:#12141b;
--row:#f6f2ff;
}
*{box-sizing:border-box}
html,body{
margin:0;
padding:0;
max-width:100%;
overflow-x:hidden;
overscroll-behavior-x:none;
}
body{
background:var(--bg);
color:var(--text);
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
font-size:17px;
line-height:1.65;
-webkit-text-size-adjust:100%;
}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
a{color:var(--link)}
a:hover{color:var(--accent-dark)}

.site-head{
position:sticky;
top:0;
z-index:20;
background:rgba(255,255,255,.94);
backdrop-filter:saturate(160%) blur(8px);
border-bottom:1px solid var(--border);
}
.head-in{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
min-height:64px;
}
.logo{
display:flex;
align-items:center;
gap:10px;
font-weight:700;
font-size:16px;
letter-spacing:-.2px;
color:var(--head);
text-decoration:none;
}
.logo img{width:30px;height:30px;border-radius:7px;display:block}
.head-cta{
display:inline-block;
background:var(--accent);
color:#fff;
text-decoration:none;
font-weight:600;
font-size:14px;
padding:10px 16px;
border-radius:8px;
white-space:nowrap;
}
.head-cta:hover{background:var(--accent-dark);color:#fff}

.hero{
display:grid;
grid-template-columns:1.28fr .72fr;
gap:40px;
align-items:start;
padding:44px 0 30px;
}
h1{
margin:0 0 12px;
font-size:40px;
line-height:1.18;
letter-spacing:-.8px;
color:var(--head);
font-weight:800;
}
.byline{
margin:0 0 18px;
font-size:14px;
color:var(--muted);
}
.byline a{color:var(--accent);text-decoration:underline}
.byline a:hover{color:var(--accent-dark)}
.hero p{margin:0 0 16px}
.hero-media img{
width:100%;
height:auto;
aspect-ratio:1/1;
border-radius:14px;
display:block;
border:1px solid var(--border);
}
.cta{
display:inline-block;
background:var(--accent);
color:#fff;
text-decoration:none;
font-weight:650;
font-size:16px;
padding:14px 26px;
border-radius:8px;
margin-top:6px;
}
.cta:hover{background:var(--accent-dark);color:#fff}
.cta-block{margin:30px 0;text-align:center}

.toc{
border:1px solid var(--border);
border-radius:10px;
background:var(--soft);
padding:0 18px;
margin:8px 0 34px;
}
.toc summary{
cursor:pointer;
font-weight:650;
padding:14px 0;
list-style:none;
color:var(--head);
}
.toc summary::-webkit-details-marker{display:none}
.toc summary::after{content:" +";color:var(--accent)}
.toc[open] summary::after{content:" –"}
.toc ol{margin:0 0 16px;padding-left:20px}
.toc li{margin:5px 0}

article{padding-bottom:20px}
h2{
font-size:28px;
line-height:1.25;
letter-spacing:-.5px;
margin:44px 0 14px;
color:var(--head);
font-weight:750;
}
h3{
font-size:21px;
line-height:1.3;
margin:30px 0 10px;
color:var(--head);
font-weight:700;
}
p{margin:0 0 16px}
ul,ol{margin:0 0 18px;padding-left:22px}
li{margin:7px 0}
.inline-img{
width:100%;
max-width:340px;
height:auto;
aspect-ratio:1/1;
border-radius:12px;
border:1px solid var(--border);
display:block;
margin:20px auto 24px;
}

.table-scroll{
overflow-x:auto;
overscroll-behavior-x:contain;
-webkit-overflow-scrolling:touch;
margin:20px 0 26px;
border:1px solid var(--border);
border-radius:10px;
}
table{
border-collapse:collapse;
width:100%;
min-width:640px;
font-size:15px;
}
th,td{
padding:11px 13px;
text-align:left;
border-bottom:1px solid var(--border);
vertical-align:top;
}
th{
background:var(--soft);
font-weight:650;
color:var(--head);
white-space:nowrap;
}
tbody tr:last-child td{border-bottom:0}
tr.pick td{background:var(--row);font-weight:500}
td.brand{white-space:nowrap}
.brand-name{display:block;font-weight:650;margin-bottom:9px}
tr.pick .brand-name{font-weight:800}
.tbl-btn{
display:inline-block;
background:var(--accent);
color:#fff;
text-decoration:none;
font-weight:600;
font-size:13px;
padding:8px 14px;
border-radius:8px;
white-space:nowrap;
}
.tbl-btn:hover{background:var(--accent-dark);color:#fff}
.tbl-btn-off{
display:inline-block;
background:#e7e9f0;
color:#9aa1b1;
font-weight:600;
font-size:13px;
padding:8px 14px;
border-radius:8px;
white-space:nowrap;
pointer-events:none;
user-select:none;
}

.faq h3{font-size:19px;margin:26px 0 8px}

.page{padding-top:40px}
.page h1{font-size:34px;margin-bottom:8px;max-width:820px}
.page article{max-width:820px}
.updated{
font-size:14px;
color:var(--muted);
margin:0 0 26px;
padding-bottom:16px;
border-bottom:1px solid var(--border);
}
.page h2{font-size:25px;margin:36px 0 12px}
.author-card{margin:0 0 30px}

.author{
display:grid;
grid-template-columns:132px 1fr;
gap:24px;
align-items:start;
border:1px solid var(--border);
border-radius:12px;
padding:24px;
background:var(--soft);
margin:34px 0 10px;
}
.author img{width:132px;height:132px;border-radius:12px;display:block}
.author-name{font-size:20px;font-weight:750;margin:0 0 2px;color:var(--head)}
.author-role{font-size:15px;color:var(--muted);margin:0 0 12px}
.author p{font-size:15px}
.checked{font-size:14px;color:var(--muted);margin:22px 0 0}

.site-foot{
border-top:1px solid var(--border);
margin-top:46px;
padding:30px 0 40px;
background:var(--soft);
font-size:15px;
}
.foot-logo{
display:inline-flex;
align-items:center;
gap:10px;
font-weight:700;
font-size:16px;
color:var(--head);
text-decoration:none;
margin:0 0 18px;
}
.foot-logo:hover{color:var(--accent-dark)}
.foot-logo img{width:30px;height:30px;border-radius:7px;display:block}
.foot-nav{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0 0 16px;padding:0;list-style:none}
.foot-note{color:var(--muted);font-size:14px;margin:0}

@media (max-width:900px){
.page h1{font-size:28px}
.page h2{font-size:22px}
.page{padding-top:24px}
.hero{grid-template-columns:1fr;gap:22px;padding:26px 0 18px}
h1{font-size:31px;letter-spacing:-.5px}
h2{font-size:24px;margin:34px 0 12px}
h3{font-size:19px}
.hero-media{order:2}
.hero-text{order:1}
.hero-media img{max-width:440px;margin:0 auto}
.author{grid-template-columns:1fr}
.author img{width:120px;height:120px}
body{font-size:16.5px}
.logo{font-size:14px}
.head-cta{font-size:13px;padding:9px 13px}
}
@media (max-width:420px){
h1{font-size:27px}
.logo span{display:none}
}