.cmp-hero{text-align:center;padding-block:var(--space-10) var(--space-6);max-width:640px;margin-inline:auto}
.cmp-hero h1{font-size:clamp(1.7rem,3.6vw,2.4rem)}
.cmp-hero p{color:var(--text-secondary);margin-top:var(--space-3)}
.brand-select{display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:center;justify-content:center;margin-bottom:var(--space-8)}
.brand-select .lbl{font-size:.8125rem;color:var(--text-tertiary)}
.brand-select button{display:inline-flex;align-items:center;gap:6px;font-size:.875rem;font-weight:600;padding:var(--space-2) var(--space-4);border-radius:var(--radius-pill);border:1.5px solid var(--border);color:var(--text-secondary);background:var(--bg-elevated);min-height:40px}
.brand-select button.on{background:var(--navy-900);color:var(--ivory-50);border-color:var(--navy-900)}
.brand-select button.on::before{content:"✓";color:var(--gold-300)}
/* .compare-wrap / table.compare (COM-11) → canonical in mi.css; page sets only min-width */
table.compare{min-width:820px}
.barchart{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-e1);padding:var(--space-8);max-width:720px}
.barchart .row{display:grid;grid-template-columns:110px 1fr auto;gap:var(--space-4);align-items:center;margin-bottom:var(--space-4)}
.barchart .row:last-child{margin-bottom:0}
.barchart .bn{font-weight:600;font-size:.9rem}
.barchart .bar{height:16px;border-radius:var(--radius-pill);background:var(--bg-sunken);overflow:hidden}
.barchart .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-500),var(--gold-300));border-radius:var(--radius-pill)}
.barchart .bv{font-weight:700;color:var(--navy-900);font-size:.9rem}
.badge-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}
@media(max-width:760px){.badge-row{grid-template-columns:1fr}}
.badge-card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-e1);padding:var(--space-6);text-align:center}
.badge-card .rib{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,var(--gold-500),var(--gold-300));color:var(--navy-900);font-weight:700;font-size:.8rem;padding:4px 14px;border-radius:var(--radius-pill);margin-bottom:var(--space-3)}
.badge-card .rib svg{width:15px;height:15px;stroke:var(--navy-900)}
.badge-card h3{font-size:1.15rem}.badge-card p{color:var(--text-secondary);font-size:.85rem;margin-top:var(--space-1)}
.badge-card .price{font-weight:700;margin-top:var(--space-2)}