/* pages-b.css: page styles for marketing & catalog pages (work package B).
   Scoped to .b-* classes. Shell (header/footer) lives in site.css. */
.b-wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.b-main{padding:40px 0 24px;color:var(--text-main);font-size:15px;line-height:1.6}
.b-main h1,.b-main h2,.b-main h3{color:#fff;letter-spacing:-.02em;line-height:1.2}
.b-main h1{font-size:clamp(28px,4.2vw,40px);font-weight:800;margin:0 0 12px}
.b-main h2{font-size:clamp(22px,3vw,28px);font-weight:700;margin:0 0 10px}
.b-main h3{font-size:17px;font-weight:650;margin:0 0 6px}
.b-main p{margin:0 0 12px}
.b-main a{color:#93c5fd}
.b-main a:hover{color:#bfdbfe}
.b-main code,.b-mono{font-family:var(--font-mono);font-size:.88em}
.b-main :not(pre)>code{background:rgba(255,255,255,.06);border:1px solid var(--border-subtle);border-radius:4px;padding:1px 5px;word-break:break-all}
.b-lede{color:var(--text-secondary);font-size:17px;max-width:68ch}
.b-muted{color:var(--text-secondary)}
.b-fine{color:var(--text-muted);font-size:13px}
.b-eyebrow{display:inline-block;color:#93c5fd;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin:0 0 10px}
.b-section{padding-top:48px;padding-bottom:48px;border-top:1px solid var(--border-subtle)}
.b-section:first-child{border-top:0}
.b-pagehead{margin:0 0 24px}
.b-pagehead .b-lede{margin-bottom:0}
.b-grad{background:var(--grad-primary);-webkit-background-clip:text;background-clip:text;color:transparent}
/* buttons */
.b-btn{color:#fff;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 20px;border-radius:8px;font-weight:650;font-size:15px;text-decoration:none;border:1px solid transparent;cursor:pointer;white-space:nowrap}
.b-main a.b-btn{color:#fff}
.b-btn--primary{background:var(--grad-primary);box-shadow:0 0 18px rgba(59,130,246,.3)}
.b-btn--primary:hover{box-shadow:0 0 24px rgba(139,92,246,.45)}
.b-btn--ghost{background:rgba(255,255,255,.05);border-color:var(--border-medium)}
.b-btn--ghost:hover{background:rgba(255,255,255,.1)}
.b-btn--sm{min-height:34px;padding:6px 12px;font-size:13px}
.b-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
/* cards & grids */
.b-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:12px;padding:20px;min-width:0}
.b-grid{display:grid;gap:16px}
.b-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.b-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.b-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){.b-grid--3,.b-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.b-grid--2,.b-grid--3,.b-grid--4{grid-template-columns:minmax(0,1fr)}}
/* hero */
.b-hero{padding-top:56px;padding-bottom:40px;text-align:center}
.b-hero h1{font-size:clamp(34px,6vw,58px);line-height:1.05;margin:0 auto 18px;max-width:16ch}
.b-hero .b-lede{margin:0 auto 26px;font-size:clamp(16px,2vw,19px)}
.b-hero .b-actions{justify-content:center}
.b-hero__note{margin:16px 0 0;color:var(--text-muted);font-size:13px}
.b-steps{counter-reset:step}
.b-step{position:relative;padding-top:56px}
.b-step::before{counter-increment:step;content:counter(step);position:absolute;top:20px;left:20px;width:28px;height:28px;border-radius:50%;background:var(--grad-primary);color:#fff;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center}
.b-step p{color:var(--text-secondary);margin:0}
/* code window */
.b-code{background:#060a14;border:1px solid var(--border-medium);border-radius:12px;overflow:hidden;min-width:0;text-align:left}
.b-code__bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px 10px;border-bottom:1px solid var(--border-subtle);background:rgba(255,255,255,.02)}
.b-tab{background:none;border:1px solid transparent;color:var(--text-secondary);font:600 13px var(--font-sans);padding:6px 10px;border-radius:6px;cursor:pointer}
.b-tab[aria-selected="true"],.b-tab.is-active{color:#fff;background:rgba(255,255,255,.07);border-color:var(--border-subtle)}
.b-code__copy{margin-left:auto}
.b-code pre{margin:0;padding:18px;overflow-x:auto;font:13px/1.6 var(--font-mono);color:#e2e8f0;white-space:pre}
.b-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:32px;align-items:start}
@media (max-width:900px){.b-split{grid-template-columns:minmax(0,1fr)}}
.b-list{margin:0 0 12px;padding-left:20px;color:var(--text-secondary)}
.b-list li{margin:0 0 6px}
/* tables */
.b-tablewrap{overflow-x:auto;border:1px solid var(--border-subtle);border-radius:12px;background:var(--bg-card)}
.b-table{width:100%;border-collapse:collapse;font-size:14px}
.b-main table.b-table{display:table}
.b-table th,.b-table td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--border-subtle);vertical-align:middle}
.b-table thead th{position:sticky;top:0;background:#0d1322;color:var(--text-secondary);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.b-table tbody tr:last-child td{border-bottom:0}
.b-table tbody tr:hover{background:rgba(255,255,255,.025)}
.b-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.b-table a{color:#fff;font-weight:600;text-decoration:none}
.b-table a:hover{text-decoration:underline}
.b-sub{display:block;color:var(--text-muted);font:12px var(--font-mono);word-break:break-all;font-weight:400}
.b-sortbtn{background:none;border:0;color:inherit;font:inherit;text-transform:inherit;letter-spacing:inherit;cursor:pointer;padding:0}
.b-sortbtn::after{content:" ↕";opacity:.4}
th[aria-sort="ascending"] .b-sortbtn::after{content:" ↑";opacity:1}
th[aria-sort="descending"] .b-sortbtn::after{content:" ↓";opacity:1}
/* stacked rows on phones */
@media (max-width:700px){
  .b-main table.b-table--stack,.b-table--stack tbody,.b-table--stack tr,.b-table--stack td{display:block;width:100%}
  .b-table--stack thead{display:none}
  .b-table--stack tr{padding:12px 14px;border-bottom:1px solid var(--border-subtle)}
  .b-table--stack td{border:0;padding:3px 0;text-align:left}
  .b-table--stack td.num{text-align:left;white-space:normal}
  .b-table--stack td[data-label]::before{content:attr(data-label) ": ";color:var(--text-muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
  .b-table--stack td.b-hide-sm{display:none}
}
/* filters */
.b-filters{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin:0 0 16px}
.b-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.b-field label,.b-label{color:var(--text-secondary);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.b-input,.b-select{background:#0b0f19;border:1px solid var(--border-medium);border-radius:8px;color:#fff;font:inherit;font-size:15px;padding:10px 12px;min-height:44px;max-width:100%}
.b-input:focus,.b-select:focus{outline:2px solid var(--border-focus);outline-offset:1px}
.b-field--grow{flex:1 1 260px}
.b-field--grow .b-input{width:100%}
.b-count{color:var(--text-secondary);font-size:14px;margin:0 0 12px}
.b-chip{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:600;background:rgba(255,255,255,.06);border:1px solid var(--border-subtle);color:var(--text-secondary);white-space:nowrap}
.b-chip--ok{background:rgba(16,185,129,.12);border-color:rgba(16,185,129,.35);color:#6ee7b7}
.b-chip--warn{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.35);color:#fcd34d}
.b-pills{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.b-pill{background:rgba(255,255,255,.04);border:1px solid var(--border-medium);color:var(--text-secondary);font:600 14px var(--font-sans);padding:8px 14px;border-radius:999px;cursor:pointer;min-height:40px}
.b-pill[aria-selected="true"],.b-pill.is-active{background:#fff;color:#030712;border-color:#fff}
.b-empty{padding:28px;text-align:center;color:var(--text-secondary)}
.b-more{display:flex;justify-content:center;margin:16px 0 0}
/* featured models + price examples */
.b-model{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit;transition:border-color .15s,background .15s}
.b-main a.b-model{color:inherit}
.b-model:hover{border-color:var(--border-focus);background:var(--bg-card-hover)}
.b-model .b-chip{align-self:flex-start}
@media (max-width:600px){.b-featured>:nth-child(n+5){display:none}}
.b-model__name{color:#fff;font-weight:650;font-size:16px}
.b-model__id{color:var(--text-muted);font:12px var(--font-mono);word-break:break-all}
.b-model__price{display:flex;gap:16px;flex-wrap:wrap;margin-top:auto;padding-top:8px;font-size:13px;color:var(--text-secondary)}
.b-model__price strong{color:#fff;font-variant-numeric:tabular-nums}
/* FAQ */
.b-faq details{border:1px solid var(--border-subtle);border-radius:10px;background:var(--bg-card);padding:0 18px;margin:0 0 10px}
.b-faq summary{cursor:pointer;padding:16px 0;font-weight:650;color:#fff;list-style-position:outside}
.b-faq details p{color:var(--text-secondary);margin:0 0 16px}
.b-cta{text-align:center;padding:48px 24px;border-radius:16px;border:1px solid var(--border-medium);background:radial-gradient(circle at 50% 0%,rgba(59,130,246,.18),transparent 70%),var(--bg-card)}
.b-cta .b-actions{justify-content:center}
/* facts (model page) */
.b-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:0}
.b-facts>div{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:10px;padding:14px 16px;min-width:0}
.b-facts dt{color:var(--text-muted);font-size:12px;text-transform:uppercase;letter-spacing:.05em;font-weight:600;margin:0 0 4px}
.b-facts dd{margin:0;color:#fff;font-size:18px;font-weight:650;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.b-crumbs{font-size:13px;color:var(--text-muted);margin:0 0 14px}
.b-crumbs a{color:var(--text-secondary)}
.b-tags{display:flex;flex-wrap:wrap;gap:6px}
.b-notice{border:1px solid rgba(245,158,11,.35);background:rgba(245,158,11,.08);border-radius:10px;padding:12px 16px;color:#fde68a;margin:0 0 20px}
/* calculator */
.b-calc-total{font-size:clamp(32px,5vw,44px);font-weight:800;color:#fff;margin:4px 0 12px;font-variant-numeric:tabular-nums}
.b-pack{display:flex;flex-direction:column;gap:6px}
.b-pack--best{border-color:var(--emerald);box-shadow:0 0 0 1px var(--emerald) inset}
.b-pack__price{font-size:28px;font-weight:800;color:#fff}
.b-msg{min-height:1.2em;color:#fca5a5;font-size:14px;margin:8px 0 0}
/* compare */
.b-compare-pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 20px}
@media (max-width:600px){.b-compare-pick{grid-template-columns:minmax(0,1fr)}}
.b-compare-pick .b-select{width:100%}
.b-table--compare th[scope="row"]{color:var(--text-secondary);font-weight:600;width:28%}
.b-table--compare td{width:36%;overflow-wrap:anywhere}
.b-better{color:#6ee7b7}
@media (max-width:600px){.b-table--compare th,.b-table--compare td{padding:9px 10px;font-size:13px}}
/* bar (apps/providers) */
.b-bar{height:6px;border-radius:3px;background:var(--grad-primary);min-width:2px}
.b-barcell{min-width:120px}
@media (max-width:700px){.b-barcell{display:none}}
.b-provider{display:flex;flex-direction:column;gap:6px}
.b-provider dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:6px 0 10px;font-size:13px}
.b-provider dt{color:var(--text-muted)}
.b-provider dd{margin:0;color:#fff;text-align:right;font-variant-numeric:tabular-nums}
.b-visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}