/* CSS viewport sizing: DPR is deliberately not a breakpoint. Smaller viewports
   retain the existing mobile/table scroll layout and browser zoom still works. */
@media (min-width: 1440px) {
  :root { --reading-unit: clamp(1px, .046875vw, 1.5px); }
  body { font-size: calc(17 * var(--reading-unit)); line-height: 1.65; }
  .wrap { max-width: clamp(1980px, 94vw, 3200px); padding-inline: 24px; }
  header.hero { padding-block: 30px 26px; }
  .hero h1 { font-size: calc(30 * var(--reading-unit)); }
  .hero .slogan { font-size: calc(20 * var(--reading-unit)); }
  .hero .seo-context, .hero .notice, .harness-catalog-intro,
  .harness-catalog-item span, .iqcard .cmp, .iqcard .verdict,
  .iqcard .eff i, .iqcard .iq-model-harness, .iqcard .iq-billing-mode,
  .efficiency-head span, .efficiency-control-label, .efficiency-control-meta,
  .chip .meta, .chip .claimer-name { font-size: calc(13 * var(--reading-unit)); }
  .hero .hero-link, .hero button, .hero .backlink, .harness-catalog-item strong,
  .iqcard .m, .iqcard .eff-level, .grid th, .grid td, .flat th, .flat td,
  .grid thead tr.erow th, .grid th.mg, .taskhead-title, .taskhead-count,
  .chip .pct, .efficiency-model-controls button {
    font-size: calc(15 * var(--reading-unit));
  }
  .zone-heading h2, .efficiency-head h2 { font-size: calc(20 * var(--reading-unit)); }
  .iq { gap: calc(14 * var(--reading-unit)); }
  .iqcard { padding: calc(18 * var(--reading-unit)); }
  .iqcard .big { font-size: calc(38 * var(--reading-unit)); }
  .iqcard .eff { min-height: calc(92 * var(--reading-unit)); }
  .iqcard .eff b { font-size: calc(24 * var(--reading-unit)); }
  .iqcard .eff-time, .iqcard .eff-cost { font-size: calc(16 * var(--reading-unit)); }
  .iqcard .eff b small { font-size: calc(11 * var(--reading-unit)); }
  .harness-catalog-item { padding: calc(12 * var(--reading-unit)); }
  .grid td { padding-block: 6px; }
  .chip { padding: 6px 3px; line-height: 1.4; }
  .flat th, .flat td { padding-block: calc(10 * var(--reading-unit)); }
  /* Preserve the matrix's measured sticky-header contract (30px first row). */
  .grid thead tr.mrow th { height: 30px; }
  .grid thead tr.erow th { top: 30px; }
}
@media (min-width: 1440px) {
  .iq-meta, .iq-meta-month-user, .iq-meta-month-title,
  .ticker .ticker-track, .benchmark-tabs button, .benchmark-tab-capability, .benchmark-tab-origin,
  .zone-heading-meta, .iq-model-board-heading {
    font-size: calc(14 * var(--reading-unit));
  }
  .iq-meta-title { font-size: calc(18 * var(--reading-unit)); }
}
/* Existing tier choices must wrap inside a 320px phone instead of widening it. */
@media (max-width: 380px) {
  .harnessbar .tierctl { min-width: 0; max-width: 100%; flex-wrap: wrap; margin-left: 0; padding-left: 0; }
  .tierctl .tierswitch { max-width: 100%; flex-wrap: wrap; }
}