@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; }
  .tiers-grid { grid-template-columns: 1fr; gap: 30px; }
  .tier-sig { margin-top: 0; }
}
@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.3rem; }
  .hero .lede { font-size: 1.1rem; }
  .sample, .how, .tiers { padding-top: 64px; }
  .tiers { padding-left: 16px; padding-right: 16px; }
  /* Phones: the cake sits above the text, big enough to read its message. */
  .tier-team, .tier-sig { grid-template-columns: minmax(0, 1fr); padding: 30px 18px 20px; gap: 8px; }
  .tier-cake { justify-self: center; width: 230px; }
  .tier-sig .tier-cake { width: 210px; }
  .tier h3 { font-size: 1.6rem; }
  .tier-sig h3 { font-size: 1.45rem; }
  .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; }
}

/* Phones: designer shows the preview first, then the controls, then the downloads and the bakery sheet. */
@media (max-width: 860px) {
  .stage { display: contents; }
  .designer-head { order: 0; }
  canvas#cake { order: 1; max-width: 320px; }
  .stage .note { order: 2; margin: 0; }
  .panel { order: 3; }
  .stage .actions { order: 4; margin: 0; }
  .stage .sheet { order: 5; margin-top: 0; }
}

/* Phones: 44px tap targets, 15px minimum text, 16px inputs (no iOS zoom on focus). */
@media (max-width: 560px) {
  input, select, textarea, .cakePick, #pasteBox, td input[type=text], td select, .picker select, #handTable input, #handTable select { font-size: 16px; }
  button, .btn, .way, .fonts button, input[type=file]::file-selector-button { min-height: 44px; }
  .team-switch select { font-size: 16px; min-height: 44px; }
  input[type=file] { min-height: 44px; }
  .swatches { gap: 8px; }
  .swatches button { width: 44px; height: 44px; }
  .check { min-height: 44px; margin-top: 4px; margin-bottom: 4px; }
  .hint, label, .note, .sheet-grid, .cake-row .who span, .cake-row .when small, button.quiet, .way, th, td, thead th, .foot-copy, .foot-links,
  .pill, small, label small, .tier-tag, .cakes button small, .step h2 em, .board-h small, .bake-day h2 em, .bake-card h3 small, .way-panel code, .tiers-note, .tier-facts li { font-size: 15px; }
  label small { float: none; display: block; margin-top: 2px; }
  label small#count { float: right; display: inline; margin-top: 0; }
  .tier-sig .tier-facts li, .cake-group-head span, td button, .cake-row button { font-size: 15px; }
  td select, td input[type=text] { min-height: 44px; }
  .tw table:not(#peopleTable) { min-width: 640px; }
  .site-footer .inner { gap: 4px; }
  .foot-links { gap: 0 24px; }
  .foot-links a { display: inline-flex; align-items: center; min-height: 44px; }
  #sendLink { display: inline-flex; align-items: center; min-height: 44px; }
  .form-go { gap: 4px 16px; }

  /* Hero: both buttons the same width, stacked, primary on top; price on at most two lines. */
  .hero .price { font-size: 1.15rem; line-height: 1.6; }
  .hero .actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero .actions .btn { width: 100%; }
  .signup .price { font-size: 1.2rem; line-height: 1.6; }

  /* App tabs: all five visible as wrapping chips instead of a row that hides three of them. */
  .tabs { flex-wrap: wrap; overflow: visible; border-bottom: 0; gap: 8px; }
  .tabs button { border: var(--line-w) solid var(--ink); border-radius: var(--radius-sm); margin: 0; padding: 8px 14px; background: var(--paper); color: var(--ink); }
  .tabs button.on { background: var(--plate-deep); color: var(--paper); border-color: var(--ink); border-bottom: var(--line-w) solid var(--ink); }

  /* People: each person is a card, with the cake picker and the three switches in reach. */
  #peopleTable { display: block; }
  #peopleTable thead { display: none; }
  #peopleTable tbody { display: block; }
  #peopleTable tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 10px; padding: 14px; border-bottom: 1px solid var(--rule); }
  #peopleTable tr:last-child { border-bottom: 0; }
  #peopleTable td { display: block; padding: 0; border: 0; background: transparent !important; min-width: 0; }
  #peopleTable td:nth-child(1) { grid-column: 1 / -1; font-weight: 500; }
  #peopleTable td:nth-child(2)::before { content: "Birthday"; }
  #peopleTable td:nth-child(3)::before { content: "Where"; }
  #peopleTable td:nth-child(4)::before { content: "Allergies"; }
  #peopleTable td:nth-child(2)::before, #peopleTable td:nth-child(3)::before, #peopleTable td:nth-child(4)::before { display: block; color: var(--ink-soft); font-size: 15px; }
  #peopleTable td:empty { display: none; }
  #peopleTable td:nth-child(5) { grid-column: 1 / -1; }
  #peopleTable .cakePick { max-width: none; width: 100%; min-height: 44px; }
  #peopleTable .tapbox { min-height: 44px; padding: 0; justify-content: flex-start; }
  #peopleTable .tapbox::after { content: attr(data-l); font-size: 15px; }
  #peopleTable .tapbox input { width: 22px; height: 22px; }
  .tapbox { min-width: 44px; min-height: 44px; justify-content: center; }
}

/* Phone hero: price pill and "First one free." on their own lines, centered, above full-width stacked buttons. */
@media (max-width: 640px) {
  .hero .price { text-align: center; display: grid; gap: 6px; justify-items: center; }
  .hero .price > b, .hero .price > span { display: inline-block; }
  .hero .actions { align-items: center; }
  .hero .actions .btn { text-align: center; }
}
@media (max-width: 640px) {
  .sample h2, .how h2, .tiers h2, .sample h2 + p, .tiers h2 + p { text-align: center; }
  .sample h2, .how h2, .tiers h2 { margin-left: auto; margin-right: auto; }
}