
:root{
  --navy:#102a43;--navy2:#173f5f;--blue:#246bce;--teal:#138a82;--gold:#d4a340;
  --cream:#f6f2ea;--paper:#fffdf9;--ink:#1f2937;--muted:#667085;--line:#dfe5ec;
  --green:#18794e;--amber:#b56900;--red:#b42318;--shadow:0 12px 30px rgba(16,42,67,.09)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:Inter,Segoe UI,Arial,sans-serif;line-height:1.6}
a{color:var(--blue)} a:hover{text-decoration:none}
.site-header{position:sticky;top:0;z-index:20;background:rgba(16,42,67,.97);backdrop-filter:blur(8px);color:#fff}
.header-inner{max-width:1240px;margin:auto;padding:13px 22px;display:flex;align-items:center;justify-content:space-between;gap:25px}
.brand{font-size:1.08rem;font-weight:800;letter-spacing:.2px;color:#fff;text-decoration:none}
.brand small{display:block;font-size:.72rem;font-weight:500;opacity:.75;letter-spacing:.5px}
.menu-toggle{display:none;border:1px solid rgba(255,255,255,.35);background:none;color:#fff;border-radius:8px;padding:8px 11px}
nav{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
nav a{color:#fff;text-decoration:none;padding:7px 9px;border-radius:8px;font-size:.86rem}
nav a:hover,nav a.active{background:rgba(255,255,255,.15)}
.hero{background:linear-gradient(130deg,var(--navy),var(--navy2) 58%,#286e79);color:#fff}
.hero-inner{max-width:1240px;margin:auto;padding:72px 22px 66px;display:grid;grid-template-columns:1.25fr .75fr;gap:45px;align-items:center}
.kicker{text-transform:uppercase;letter-spacing:1.8px;font-size:.78rem;font-weight:800;color:#f4cf7c}
.hero h1{font-size:clamp(2.45rem,6vw,5.2rem);line-height:.98;margin:.2rem 0 1rem;max-width:850px}
.hero p{font-size:1.13rem;opacity:.9;max-width:760px}
.hero-panel{background:#fff;color:var(--ink);border-radius:22px;padding:27px;box-shadow:0 25px 55px rgba(0,0,0,.25)}
.hero-panel .budget{font-size:2.2rem;font-weight:900;color:var(--teal)}
.hero-panel dl{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin:18px 0 0}
.hero-panel dt{font-weight:800}.hero-panel dd{margin:0;color:var(--muted)}
main{max-width:1240px;margin:auto;padding:40px 22px 78px}
main>h1{font-size:clamp(2rem,4vw,3.5rem);margin:.25rem 0}
.lede{font-size:1.12rem;color:#475467;max-width:920px}
.section-title{margin-top:44px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:19px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--shadow)}
.card h2,.card h3{margin-top:0;line-height:1.25}
.card p:last-child{margin-bottom:0}
.rank{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--navy);color:#fff;font-weight:900}
.badge{display:inline-block;padding:5px 10px;border-radius:999px;background:#e8f4f3;color:#0d6d67;font-weight:800;font-size:.78rem}
.badge.premium{background:#fff0df;color:#955b09}.badge.fit{background:#eaf6ef;color:#176b45}.badge.watch{background:#fff4e5;color:#9a5b00}
.notice,.warning,.success{border-radius:14px;padding:17px 19px;margin:22px 0}
.notice{background:#eaf4f7;border-left:5px solid #267b8b}
.warning{background:#fff3df;border-left:5px solid var(--gold)}
.success{background:#eaf6ef;border-left:5px solid var(--green)}
.btn{display:inline-block;border:none;background:var(--teal);color:#fff;text-decoration:none;font-weight:800;padding:11px 16px;border-radius:10px;margin:5px 6px 5px 0;cursor:pointer}
.btn.secondary{background:var(--navy)}.btn.light{background:#eef4f7;color:var(--navy)}
table{width:100%;border-collapse:collapse;background:var(--paper);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);margin:20px 0}
th,td{text-align:left;vertical-align:top;padding:13px 12px;border-bottom:1px solid var(--line)}
th{background:var(--navy);color:#fff;font-size:.9rem}tbody tr:hover{background:#faf7f1}
.score{font-weight:900;color:var(--teal);white-space:nowrap}
.price-fit{color:var(--green);font-weight:800}.price-over{color:var(--red);font-weight:800}.price-edge{color:var(--amber);font-weight:800}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}
.filters button{border:1px solid var(--line);border-radius:9px;background:#fff;padding:8px 12px;cursor:pointer;font-weight:700}
.filters button.active{background:var(--navy);color:#fff}
.provider-card{display:grid;grid-template-columns:110px 1fr;gap:18px;align-items:start}
.provider-icon{height:110px;border-radius:18px;background:linear-gradient(135deg,#d9e8f1,#f3dfb4);display:grid;place-items:center;font-size:2.5rem}
.progress{height:10px;border-radius:999px;background:#e7ebef;overflow:hidden}.progress span{display:block;height:100%;background:var(--teal)}
.route{display:flex;gap:15px;align-items:flex-start;margin:12px 0}.route-num{flex:0 0 32px;height:32px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:900}
.checklist{padding-left:1.15rem}.checklist li{margin:.55rem 0}
details{background:#fff;border:1px solid var(--line);padding:13px 16px;border-radius:12px;margin:10px 0}
summary{cursor:pointer;font-weight:800}
footer{background:#0b1f33;color:#d0d5dd;padding:34px 22px}.footer-inner{max-width:1240px;margin:auto;display:grid;grid-template-columns:1fr auto;gap:30px}
.small{font-size:.86rem;color:var(--muted)}
@media(max-width:900px){
 .hero-inner,.grid,.grid.two{grid-template-columns:1fr}
 .provider-card{grid-template-columns:80px 1fr}.provider-icon{height:80px}
 .menu-toggle{display:block}nav{display:none;width:100%;padding-top:10px}nav.open{display:flex}
 .header-inner{flex-wrap:wrap}.footer-inner{grid-template-columns:1fr}
 table{display:block;overflow-x:auto}
}
@media print{
 .site-header,.btn,.filters,footer{display:none!important}
 body{background:#fff}.card,table{box-shadow:none}.hero{color:#000;background:#fff}.hero-panel{border:1px solid #bbb;box-shadow:none}
 main{padding:10px}.hero-inner{padding:15px;grid-template-columns:1fr}
}
