:root { --topbar-height:112px; }
html { scroll-padding-top:calc(var(--topbar-height) + 20px); }
.topbar { position:sticky; top:0; z-index:20; min-height:98px; height:auto; padding-top:16px; padding-bottom:16px; box-shadow:0 6px 24px rgb(0 0 0 / .2); }
.pricing-topbar { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:24px; }
.pricing-topbar .header-actions { flex-wrap:wrap; justify-content:flex-end; gap:8px 14px; max-width:130px; }
.pricing-topbar .brand-logo { width:205px; }
.pricing-topbar .brand { gap:18px; }
.pricing-topbar .brand-product { padding-left:18px; }
.header-roi { justify-self:end; width:100%; max-width:650px; min-width:0; }
.header-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.header-metrics > div { border-left:1px solid var(--line); padding-left:16px; min-width:0; }
.header-metrics span { display:block; color:var(--muted); font-size:.65rem; line-height:1.4; margin-bottom:7px; }
.header-metrics strong { display:block; font-size:clamp(.95rem,1.6vw,1.35rem); font-weight:500; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
#header-net { color:#7ee1d8; }
#header-net.negative { color:#ffbda3; }
#header-quote-status { font-size:.65rem; margin:8px 0 0 16px; line-height:1.4; color:var(--muted); }
.header-roi.is-stale #header-quote-status { color:#ebc17a; }
.header-roi.is-stale .header-metrics { opacity:.65; }
.scenario-panel { top:calc(var(--topbar-height) + 20px); max-height:calc(100vh - var(--topbar-height) - 40px); }
main { padding-top:26px; }
.version-badge { border:1px solid var(--line); padding:9px 12px; border-radius:4px; color:var(--aqua); font-size:.8rem; white-space:nowrap; }
/* Leave ROI inputs editable while no valid quote exists for the selected treatments. */
.quote-unavailable > .concentration-results:not(#quote-empty),
.quote-unavailable > .recommendation, .quote-unavailable > .metrics,
.quote-unavailable > .comparison-note, .quote-unavailable > .table-header,
.quote-unavailable > .table-wrap, .quote-unavailable > .breakdown-panel,
.quote-unavailable > .notes-panel, .quote-unavailable .scenario-chip,
.quote-unavailable .roi-yields, .quote-unavailable .roi-metrics,
.quote-unavailable #herd-milk-totals, .quote-unavailable #roi-premium,
.quote-unavailable .roi-method, .quote-unavailable .roi-conversions { display:none; }
@media(max-width:1100px) {
  .pricing-topbar { gap:18px; }
  .pricing-topbar .brand-product { display:none; }
  .pricing-topbar .brand-logo { width:180px; }
  .header-metrics { gap:10px; }
  .header-metrics > div { padding-left:10px; }
}
@media(max-width:760px) {
  .topbar { min-height:72px; padding-top:12px; padding-bottom:12px; }
  .pricing-topbar { grid-template-columns:minmax(0,1fr) auto; gap:12px; }
  .pricing-topbar .brand-product { display:block; font-size:.85rem; padding-left:12px; }
  .pricing-topbar .brand { gap:12px; }
  .pricing-topbar .brand-logo { width:150px; }
  .pricing-topbar .header-actions { grid-row:1; grid-column:2; }
  .header-roi { grid-column:1/-1; max-width:none; }
  .header-metrics > div:first-child { padding-left:0; border-left:0; }
  .header-metrics span { font-size:.6rem; min-height:2.8em; margin-bottom:4px; }
  .header-metrics strong { font-size:1rem; }
  #header-quote-status { margin-left:0; font-size:.6rem; }
  .scenario-panel { position:static; max-height:none; }
  .settings-page .page-heading { flex-wrap:wrap; gap:16px; }
}
@media(max-width:480px) {
  .pricing-topbar .brand-product { display:none; }
}