@media (max-width: 960px) {
  .app-grid { grid-template-columns: 1fr; }
  #summary { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 0 18px; align-items: start; }
  #summary canvas { grid-row: 1 / span 5; }
  #summary h2 { margin-top: 0 !important; }
}
@media (max-width: 860px) {
  .designer { grid-template-columns: 1fr; gap: 24px; }
  .hero-in { grid-template-columns: 1fr; min-height: 0; padding: 40px 24px 24px; }
  .hero canvas#heroCake { max-width: 440px; }
  .signup { grid-template-columns: 1fr; gap: 32px; padding-top: 32px; }
  .signup .intro { position: static; }
  .sample, .how { grid-template-columns: 1fr; gap: 24px; }
  .how canvas { max-width: 320px; }
}
@media (max-width: 560px) {
  .site-header .inner { padding: 10px 16px; gap: 8px; flex-wrap: wrap; }
  .wordmark { font-size: 1.3rem; }
  .site-header .inner { flex-wrap: nowrap; }
  .site-nav a:not(#accountLink) { display: none; }
  .site-nav a#accountLink { padding: 8px 18px; white-space: nowrap; }
  .wrap, .narrow { padding: 20px 16px; }
  .hero-in, .sample, .how, .designer, .signup, .login, .one-cake { padding-left: 16px; padding-right: 16px; }
  .band { margin: 56px 16px 0; padding: 28px 22px; }
  .site-footer .inner { padding: 0 16px; flex-direction: column; align-items: flex-start; }
  .hero h1 { font-size: 2.75rem; }
  .hero .lede { font-size: 1.1rem; }
  .sample, .how { padding-top: 64px; }
  .hero-in { padding-bottom: 32px; }
  .sample-list .cake-row .when small { display: inline; margin-left: 6px; }
  .sample-list .cake-row { min-height: 0; }
  .row2, .row3 { grid-template-columns: 1fr; }
  .desk-row { grid-template-columns: 1fr 1fr; }
  .desk-row select:first-child { grid-column: 1 / -1; }
  .form-box { padding: 20px 16px; border-radius: 16px; }
  .step { padding: 18px 16px; }
  .cake-row { grid-template-columns: 52px minmax(0, 1fr); gap: 4px 12px; align-items: start; padding: 14px 12px; }
  .cake-row canvas { width: 52px; height: 52px; grid-row: 1 / span 2; }
  .cake-row .when { grid-column: 2; grid-row: 1; }
  .cake-row .who { grid-column: 2; grid-row: 2; }
  .cake-row .side { grid-column: 2; grid-row: 3; justify-content: space-between; margin-top: 6px; }
  #exceptions .cake-row { grid-template-columns: 1fr !important; gap: 10px; }
  .tabs { overflow-x: auto; scrollbar-width: none; }
  .tabs button { white-space: nowrap; padding: 10px 10px 8px; }
  #summary { grid-template-columns: 80px minmax(0, 1fr); }
  .app-head .actions { margin-left: 0 !important; }
}