/* PSA — per-site overrides. Loaded AFTER brand/brand.css so it cascades on top.
   Empty = inherits the brand exactly (Charlotte ships with zero overrides →
   pixel-identical to the original site). Re-theme without touching /brand:
     :root { --accent: #2F6FED; --accent-strong: #1E4FBF; }
   Keep the house convention: element styling stays inline; this file is for
   token overrides and cross-cutting tweaks only. */

/* The four-step arc rail: let its cells shrink below their content width so
   the two-up mobile layout can't push the page wider than the viewport.
   Desktop is unaffected (the cells are already equal at full width). */
@media (max-width: 768px) {
  .m-2col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
}

/* Once the note section stacks, the 4:5 portrait would run nearly a full
   screen tall; cap and centre it. Desktop keeps the sticky side column. */
@media (max-width: 768px) {
  .note-portrait { width: 100%; max-width: 340px; margin-left: auto; margin-right: auto; position: static !important; }
}

/* Annotation fallback: the angled note + arrow is desktop-only; a plain line
   takes its place once the price cards stack. */
@media (max-width: 768px) {
  .m-only { display: block !important; }
}

/* Mobile conversion pass. Everything below applies at ≤768px only; desktop is
   untouched. Hooks are classes added in index.html with no desktop styling. */
@media (max-width: 768px) {
  /* announcement bar: 10.5px from reset.css is too small to read */
  .m-ann { font-size: 11.5px !important; }
  /* sticky nav: keep the CTA on one line and the bar short — it's on screen the whole scroll */
  .m-nav { padding: 12px 20px !important; }
  .m-navcta { font-size: 15px !important; padding: 12px 14px !important; white-space: nowrap; }
  /* hero: tighten the stack so the primary CTA lands above the fold on common phones */
  .m-hero { padding-top: 28px !important; padding-bottom: 48px !important; }
  .m-hero-pill { margin-bottom: 18px !important; }
  .m-hero-pill { font-size: 11px !important; gap: 8px !important; padding: 7px 14px !important; white-space: nowrap; }
  .m-hero-h1 { margin-bottom: 16px !important; }
  .m-hero-sub { margin-bottom: 24px !important; }
  .m-hero-ctarow { margin-top: 22px !important; }
  .m-hero-cta { width: 100%; justify-content: center; font-size: 19px !important; padding: 19px 20px !important; white-space: nowrap; }
  /* purchase buttons: never smaller than the hero CTA; tighter side padding fits the longer label */
  .m-offer-cta { width: 100%; font-size: 19px !important; padding: 19px 12px !important; white-space: nowrap; }
  /* offer card: less padding so the bundle composition gets more width */
  .m-offercard { padding: 24px 20px !important; }
  /* cohort photo: show the whole row — a 3:2 crop dropped Joseph and half the group */
  .m-cohort { aspect-ratio: 2000 / 644 !important; }
  /* text link that stands alone: give it a 44px tap area */
  /* coach portrait: a full-width 4:5 image is a screen tall on a phone */
  .m-coach { max-width: 240px !important; }
  .m-tap { display: inline-block; padding: 12px 0; }
}