/* Phone layout for /upgrade.html (loaded at (max-width: 760px)). */
/* On a phone: a shorter hero and a compact free-account strip so the first
   plan starts higher, plan cards stacked one per row with the buy button
   moved up under the price and summary (a card's feature list is most of a
   screen, so a button at its foot was a long scroll from the price), tighter
   feature lists, and 48px full-width buy buttons. */

main.up { padding: 22px 16px 40px; }
main.up > header { margin-bottom: 20px; }
main.up .eyebrow { font-size: 12px; margin-bottom: 10px; letter-spacing: .14em; }
main.up h1 { font-size: 1.8rem; line-height: 1.15; margin-bottom: 10px; }
main.up > header p { font-size: 15px; line-height: 1.55; }

/* creator code: 16px input so iOS doesn't zoom, same height as Apply */
.creator-box { padding: 14px 16px; margin-bottom: 14px; }
.creator-head { font-size: 12px; }
.creator-box input { min-height: 46px; font-size: 16px; }
.creator-box .btn { min-height: 46px; }
.creator-box .note { font-size: 14px; }

/* Free account: a compact strip, its button a quiet full-width row. */
.free-plan { padding: 14px 16px; margin-bottom: 18px; gap: 10px; }
.free-plan > div { flex-basis: 100%; }
.free-plan p { font-size: 14px; line-height: 1.55; }
.free-plan .btn { width: 100%; min-height: 44px; }

/* ---------- plan cards ---------- */
.price-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.price-card { padding: 20px 16px 18px; }
.price-card h2 { font-size: 1.15rem; padding-right: 96px; }
.price-card .tag { top: 18px; right: 16px; font-size: 12px; letter-spacing: .08em; }
.price-card .big { font-size: 1.8rem; margin: 2px 0 6px; }
.price-card p { font-size: 15px; line-height: 1.55; }
/* Buy button straight after the summary; the features follow it. */
.price-card .btn { order: 1; margin-top: 16px; min-height: 48px; font-size: 1rem; }
.price-card .keep { order: 2; font-size: 14px; }
.price-card ul { order: 3; margin: 16px 0 0; gap: 6px; font-size: 14px; flex: none; }

/* ---------- pay as you go ---------- */
.section-label { font-size: 12px; margin: 26px 0 12px; }
.payg-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.payg-card { padding: 18px 16px; }
.payg-card .big { font-size: 1.4rem; }
.payg-card p { font-size: 14px; line-height: 1.55; }
.payg-card .btn { order: 1; margin-top: 12px; min-height: 48px; }
.payg-card ul { order: 2; margin: 12px 0 0; font-size: 14px; }

.up-note { font-size: 13px; margin-top: 22px; }
.paid-note, .portal-msg { font-size: 15px; }
.up-back { display: flex; align-items: center; min-height: 44px; margin-top: 10px; font-size: 15px; }