@media (max-width: 570px) {
  .shell { padding: 16px; }
  .topbar { padding: 3px 3px 16px; align-items: start; }
  .brand { gap: 8px; }
  .brand-mark { width: 35px; height: 35px; border-radius: 11px; font-size: 26px; }
  .brand strong { font-size: 28px; letter-spacing: -1px; }
  .brand small { font-size: 11px; margin-top: 5px; line-height: 1.2; }
  .topbar time { font-size: 10px; line-height: 1.25; max-width: 132px; padding-top: 7px; }
  .topbar time:before { margin-right: 5px; }
  .intro { display: block; padding: 20px 0 15px; }
  .intro h1 { font-size: 26px; letter-spacing: -.4px; }
  .intro > p { margin-top: 9px; font-size: 11px; }
  .overview { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .snapshot { min-height: 218px; padding: 14px; border-radius: 12px; }
  .snapshot:after { width: 96px; height: 96px; right: -48px; bottom: 26px; }
  .snapshot .icon { width: 29px; height: 29px; font-size: 19px; margin-right: 7px; }
  .snapshot .eyebrow { font-size: 8px; padding-top: 2px; letter-spacing: .1em; }
  .snapshot h2 { font-size: 12px; line-height: 1.12; margin: 4px 0 19px; min-height: 28px; }
  .value { margin: 22px 0 4px; font-size: 27px; letter-spacing: -1.2px; white-space: nowrap; }
  .value span { font-size: 12px; }
  .detail, .comparison { font-size: 10px; line-height: 1.32; }
  .detail { min-height: 28px; }
  .heating .comparison, .ancillary .comparison { display: none; }
  .meter { margin: 11px 0 7px; }
  .snapshot a { bottom: 12px; left: 14px; right: 14px; padding-top: 9px; font-size: 10px; }
  .snapshot a b { font-size: 15px; }
  .content-grid { gap: 10px; margin-top: 10px; }
  .panel { padding: 17px; }
  .section-head h2 { font-size: 22px; }
  .trend-panel { overflow: hidden; }
}