@media (max-width: 720px) {
  .topbar { gap: 10px; margin-bottom: 16px; }
  .topbar h1 { font-size: 1.5rem; }
  .topbar .eyebrow { margin: 0 0 6px; }
  .hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .hero-card { min-width: 0; min-height: 0; padding: 12px; border-radius: 12px; }
  .forecast { grid-column: 1 / -1; }
  .hero-head { gap: 8px; font-size: .625rem; letter-spacing: .06em; }
  .forecast-main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 10px 14px; margin-top: 12px; }
  .forecast-divider { display: none; }
  .forecast-stat.cumulative-stat { padding-top: 0; border-top: 0; }
  .forecast-main small { display: block; font-size: .625rem; line-height: 1.4; }
  .forecast-main .forecast-stat strong { font-size: 1.5rem; line-height: 1.25; margin: 3px 0; overflow-wrap: anywhere; }
  .forecast-main p { font-size: .75rem; line-height: 1.35; margin: 0; }
  body[data-theme] .forecast-main .ring {
    grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-start;
    width: 100%; height: auto; gap: 8px; padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,.2); border-radius: 0;
    background: none !important; box-shadow: none; text-align: left;
  }
  .forecast-main .ring span { font-size: .875rem; }
  .forecast-main .ring small { font-size: .75rem; }
  .next-up p { margin-top: 10px; font-size: .75rem; }
  .next-up strong { font-size: 1.375rem; margin: 3px 0; }
  .next-up > span:last-child { font-size: .75rem; line-height: 1.35; }
  .streak { gap: 6px; align-items: flex-start; }
  .streak .flame { font-size: 1.375rem; }
  .streak > div:last-child { min-width: 0; }
  .streak small { font-size: .625rem; }
  .streak strong { font-size: 1.125rem; }
  .streak p { font-size: .75rem; line-height: 1.35; }
  .streak .bank-connect { min-height: 44px; margin-top: 8px; padding: 6px; font-size: .75rem; }
  .cash-strip { margin-top: 10px; border-radius: 12px; }
  .cash-strip > div, .cash-strip .buffer-control { padding: 10px; min-width: 0; }
  .cash-strip strong { font-size: 1.25rem; }
  .cash-strip small { font-size: .75rem; line-height: 1.35; }
  .cash-strip .section-kicker { font-size: .625rem; letter-spacing: .08em; }
  .buffer-control { margin: 0; font-size: .75rem; }
  .buffer-control input { min-height: 44px; }
  .account-filter { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding: 12px; margin-top: 12px; }
  .account-filter > div:first-child { grid-column: 1 / -1; }
  .owner-switch { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .owner-switch button { min-height: 44px; padding: 6px; font-size: .8125rem; }
  .account-filter label { min-width: 0; margin: 0; font-size: .75rem; }
  .account-filter select { min-height: 44px; padding: 6px; font-size: .8125rem; }
  .account-filter .manage-accounts { grid-column: auto; min-height: 44px; padding: 6px; font-size: .8125rem; }
  /* Override the older horizontal flex strip, not just its column sizes. */
  .account-forecast-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; gap: 8px; margin-top: 10px; padding: 0; }
  .account-forecast-tile { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 6px 8px; min-width: 0; padding: 10px; border-radius: 12px; }
  .account-forecast-tile .bank-avatar { width: 28px; height: 28px; font-size: .625rem; grid-row: 1; }
  .account-forecast-tile > small { min-width: 0; font-size: .75rem; line-height: 1.35; overflow-wrap: anywhere; align-self: center; }
  .account-forecast-tile > strong { grid-column: 1 / -1; font-size: 1.125rem; overflow-wrap: anywhere; }
  .account-forecast-tile > .forecast-value { grid-column: 1 / -1; }
  .account-forecast-tile .risk-shield-v11.tile-shield { position: static; grid-column: 1 / -1; justify-self: end; }
  .toolbar { margin-top: 20px; }
}
@media (max-width: 340px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .account-forecast-strip { grid-template-columns: minmax(0, 1fr); }
}