/* Phone fixes on top of the design's site.css (served untouched). The design was laid out down to
   ~390px; these rules keep every page and flow inside the screen from 320px up. Each rule names the
   overflow it fixes; tests/visual/mobile-audit.ts measures it at 320, 360, 390 and 414. */

/* Grid tracks default to min-width:auto, so one wide child (a long word, a big price) widens the
   whole column past the screen. Let every grid/flex child shrink. */
.plans > *, .cards > *, .split > *, .panel > *, .phero-foot > *, .foot-top > *, .boards > *, .legal > *, .auth > *, .ob2-wrap > * { min-width: 0; }

/* Onboarding: the stage is a grid, so its column grew to the subject grid's auto-fit width (three
   200px tracks = 616px) and dragged every step off a phone screen. Pin the column to the screen. */
.ob2-stage { grid-template-columns: minmax(0, 1fr); }
.ob2-inner { min-width: 0; }
.subj { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }

/* Sign-in: six code boxes must fit a 320px screen (inputs refuse to shrink below their default size). */
.otp { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.otp input { min-width: 0; }
#codeEmail, .paycard .line b { overflow-wrap: anywhere; }
.paycard .line { gap: 16px; }
.paycard .line span { white-space: nowrap; }
.paycard .line b { text-align: right; min-width: 0; }

/* Footer links were max-content wide: "How answers are made" ran off a 320px screen. Capping the
   width keeps the design's hover underline hugging the text on desktop. */
.foot-links a { max-width: 100%; }
.foot-links > div { min-width: 0; }

@media (max-width: 560px) {
  /* The dev-only "Simulated inbox" toast covered the heading on phones: dock it at the bottom. */
  .mailtoast { top: auto; bottom: 16px; right: 16px; left: 16px; width: auto; }

  /* Onboarding footer: one row of Back / error / hint / Skip / Continue(min 200px) pushed Continue off
     the screen, so the flow could not be finished on a phone. Error on its own line, buttons share the row. */
  .ob2-actions { flex-wrap: wrap; row-gap: 8px; }
  .ob2-actions .ob-err { order: -1; flex: 1 0 100%; min-height: 0; }
  .ob2-actions .ob-err:empty { display: none; }
  .ob2-actions .kbd-hint { display: none; }
  .ob2-actions .pill-dark { flex: 1 1 auto; min-width: 0; }
  .ob2-actions .btn-ghost { padding: 0 18px; }
  .ob2-head { gap: 12px; }
  .ob2-head .segs { min-width: 0; }

  /* Leaderboard cards: the rank and its badge now wrap instead of pushing the card wider. */
  .board-top { flex-wrap: wrap; }
  .board dt { font-size: clamp(24px, 8vw, 42px); }

  /* FAQ rows: the topic label squeezed the +/- control off the edge. */
  .acc-cat { display: none; }
  .acc-btn .t { min-width: 0; overflow-wrap: anywhere; }

  /* Three-step grids set inline (apps page) ignore the design's own breakpoints. */
  .nsteps[style] { grid-template-columns: 1fr !important; }

  /* Month picker and school list stay inside narrow screens. */
  .mp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .opt2 { min-width: 0; }
  .opt2 b { overflow-wrap: anywhere; }
}

@media (max-width: 420px) {
  /* Home: the giant "MB3" and its mark sat side by side wider than a 320px screen. */
  .big-type { font-size: 30vw; }
  .big .mark { width: 22vw; }
  /* The giant footer wordmark and 404 digits scale with the screen instead of a 84px/130px floor. */
  .wordmark span { font-size: 21vw; }
  .wordmark .mark { width: 12vw; }
  .nf-big { font-size: 34vw; }
  .ptitle { font-size: clamp(40px, 13vw, 148px); }
  .price { font-size: clamp(38px, 12vw, 68px); }
  .tgcode b { font-size: clamp(20px, 7vw, 34px); }
  .plan, .card2, .formcard, .paycard, .band { padding-left: 18px; padding-right: 18px; }
  .tabsx button { padding: 0 14px; }
}