
:root{color-scheme:light;--bg:#FFFFFF;--surface:#F7F9FD;--surface-2:#F1F6FF;--line:#E3EAF5;--ink:#16213A;--ink-2:#4A5873;--ink-3:#5F6B80;--accent:#3366FF;--good:#1E7B4B;--good-soft:#E6F5EC;--sun-soft:#FFF6D6;--warn:#9A5B00;
--f-display:"Nunito","Avenir Next",system-ui,sans-serif;--f-body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif}
*{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--f-body);-webkit-font-smoothing:antialiased}
.wrap{max-width:980px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
a{color:var(--accent)} a:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:#fff;padding:10px 14px;border-radius:10px;font-weight:700;text-decoration:none;z-index:10} .skip:focus{left:12px}
.top{border-bottom:1px solid var(--line)} .top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:900 21px/1 var(--f-display);letter-spacing:-.02em}
.brand b{color:var(--accent);font-weight:900} .brand img{width:34px;height:34px}
.btn{display:inline-block;background:var(--accent);color:#fff;font-weight:700;text-decoration:none;padding:12px 20px;border-radius:999px}
.btn.sm{padding:9px 16px;font-size:15px} .btn.ghost{background:var(--surface-2);color:var(--accent)}
main{padding-block:20px 40px}
.crumbs{font-size:14px;color:var(--ink-3);margin:0 0 14px} .crumbs a{color:var(--ink-2)} .crumbs span{margin:0 6px}
h1{font:900 clamp(28px,5vw,40px)/1.15 var(--f-display);margin:0 0 8px;letter-spacing:-.01em;text-wrap:balance}
h2{font:800 23px/1.3 var(--f-display);margin:36px 0 10px} h3{font:800 18px/1.3 var(--f-display);margin:0 0 4px}
.lead{font-size:19px;color:var(--ink-2);margin:0 0 6px;max-width:62ch} .meta{color:var(--ink-3);font-size:14px;margin:4px 0 0}
.note{background:var(--sun-soft);border-radius:14px;padding:12px 16px;font-size:15px;color:var(--ink-2);margin:18px 0}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:18px 0}
.stat{background:var(--surface-2);border-radius:16px;padding:14px 16px} .stat span{display:block;font-size:14px;color:var(--ink-2)} .stat b{font:900 26px/1.2 var(--f-display)} .stat small{display:block;font-size:13px;color:var(--ink-3)}
.cta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:18px 0}
table{width:100%;border-collapse:collapse;font-size:16px} th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:13px;color:var(--ink-3);font-weight:600;text-transform:uppercase;letter-spacing:.04em} td.num,th.num{text-align:right;white-space:nowrap}
.good{color:var(--good);font-weight:700} .muted{color:var(--ink-3)} .small{font-size:14px}
.tag{display:inline-block;background:var(--good-soft);color:var(--good);font-size:13px;font-weight:700;border-radius:999px;padding:2px 10px}
.tag.sp{background:var(--sun-soft);color:var(--warn)}
.tag.new{background:#F1ECFF;color:#5B3FC4}
.list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.item{border:1px solid var(--line);border-radius:16px;padding:14px 16px;display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.item p{margin:2px 0;font-size:15px;color:var(--ink-2)} .item .px{text-align:right;white-space:nowrap} .item .px b{font:900 20px/1.2 var(--f-display);display:block}
.cols{columns:2 260px;column-gap:28px;padding:0;list-style:none} .cols li{break-inside:avoid;margin:0 0 8px}
.prices td:first-child{font-weight:700} .q{font-style:italic}
.faq h3{margin-top:18px}
.foot{border-top:1px solid var(--line);margin-top:24px;padding-block:24px 40px;font-size:14px;color:var(--ink-2)}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 16px;margin-bottom:10px} .foot a{color:var(--ink);font-weight:600}
@media (max-width:640px){
  table.stack thead{display:none} table.stack tr{display:block;border-bottom:1px solid var(--line);padding:10px 0}
  table.stack td{display:flex;justify-content:space-between;gap:12px;border:0;padding:3px 0;text-align:right}
  table.stack td::before{content:attr(data-l);color:var(--ink-3);font-size:14px;text-align:left} table.stack td:first-child{display:block;text-align:left}
  table.stack td:first-child::before{content:none} .item{flex-direction:column} .item .px{text-align:left}
}
