/* ================= MBPrep · account pages (checkout, Telegram link, referrals) =================
   They sit in the sign-in shell (site.css .auth, .auth-card); this is only what they need on top of it to fit
   every screen (UI audit, HAL-1938). Tokens are site.css's; nothing new. */

/* The fine print's links never break inside their own words ("Terms of / Use"). */
.auth-legal a{white-space:nowrap}

/* Telegram: the code to send the bot stays in one piece, and the status dot keeps its shape beside a
   wrapped line (a flex item would otherwise be squeezed into an oval). */
.status-line{align-items:flex-start}
.status-line i{flex:none;margin-top:.45em}
.status-line b{white-space:nowrap}

@media (max-width:760px){
  /* Checkout: the month choices in two even columns (a whole year spans both), not five ragged pills;
     the stepper below still picks any other count. */
  .months-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%}
  .months-chips > *{justify-content:center;width:100%;min-width:0;white-space:nowrap}
  /* The saving tag sits under the count, so "3 months" never breaks beside it on a narrow phone. */
  .months-chips .chip2{flex-direction:column;gap:4px;height:auto;min-height:58px;padding:8px 12px}
  .months-chips .chip2 .save-tag{margin-left:0;height:20px}
  .months-chips > :last-child:nth-child(odd){grid-column:1/-1}
  .months-row .stepper{width:100%;justify-content:space-between}

  /* Referrals: both share buttons the same full width, and the link shown in full where it fits. */
  .refbtns{display:grid;grid-template-columns:minmax(0,1fr)}
  .refbtns .pill,.refbtns .btn-ghost{width:100%;justify-content:center}
  .reflink{padding:10px 10px 10px 16px;font-size:13.5px}
  .reflink span{letter-spacing:-0.01em}
}
@media (max-width:360px){
  .tgcode{padding:16px}
  .tgcode b{font-size:22px;letter-spacing:.04em}
}