/* ==========================================================================
   Narrow-phone tuning: iPhone Pro Max class devices and fold cover screens
   (344–430px). Loaded sitewide from the layout head; selectors are prefixed
   with `html body` so they outrank the page-level sheets that load later in
   the body, regardless of order.

   Also owns the bottom-of-screen furniture rules: exactly ONE sticky bar
   (the conv-sticky enrol bar), everything else steps above it, and iOS
   safe areas are respected throughout.
   ========================================================================== */

/* ------------------------------------------------ bottom furniture, all sizes */

/* The enrol bar hugs the home indicator without content sliding under it. */
html body .conv-sticky__inner {
  padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px));
}

/* Live enrolment toasts pop above the enrol bar instead of underneath it. */
html body.conv-bar-in .conv-toast {
  bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px));
}

/* ------------------------------------------------------------- <= 480px */

@media (max-width: 480px) {
  /* Hero headlines: the homepage clamp is tuned for regular phones and
     overflows thin screens, so it steps down further here. */
  html body.tg-body .ou-hero h1 { font-size: clamp(2.1rem, 11vw, 2.9rem); }
  html body .ou-hero .ou-lead { font-size: 1.02rem; line-height: 1.6; }
  html body .ou-hero { min-height: 66vh; }

  /* Stat strips: tighter cells, smaller serif figures, no overflow. */
  html body .ou-stats { grid-template-columns: 1fr 1fr; gap: 1.1rem; row-gap: 1.4rem; }
  html body .ou-stat { padding-right: 0.4rem; }
  html body .ou-stat + .ou-stat { padding-left: 1rem; }
  html body .ou-stat strong { font-size: 1.7rem; word-break: break-word; }
  html body .ou-stat > span { font-size: 0.64rem; letter-spacing: 0.12em; }

  /* Buttons: comfortable tap targets that wrap instead of overflowing. */
  html body .ou-hero-quick { flex-wrap: wrap; gap: 0.6rem; }
  html body .ou-hero-quick .tg-btn { flex: 1 1 auto; text-align: center; }
  html body .tg-btn { padding: 0.78rem 1.1rem; font-size: 0.92rem; }

  /* The single sticky enrol bar: compact, everything on one row. */
  html body .conv-sticky__inner {
    width: calc(100% - 1.5rem);
    gap: 0.7rem;
    padding-top: 0.55rem;
    padding-bottom: calc(0.55rem + env(safe-area-inset-bottom, 0px));
  }
  html body .conv-sticky__price { font-size: 0.92rem; }
  html body .conv-sticky .tg-btn { padding: 0.6rem 0.95rem; font-size: 0.86rem; }

  /* Dark glossary pitch card: single column so nothing spills off-screen. */
  html body .gt-course-card { grid-template-columns: 1fr; }

  /* Policy pages: stats read as a tidy 2x2, contact block stacks. */
  html body .ou-stats.policy-stats .ou-stat strong { font-size: 1.15rem; }
  html body .contact-card .row { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------- <= 392px */
/* Fold cover screens and the smallest iPhones: a gentle global type step-down
   buys back space everywhere without per-component surgery. */

@media (max-width: 392px) {
  html { font-size: 15px; }

  html body.tg-body .ou-hero h1 { font-size: clamp(1.9rem, 11.5vw, 2.4rem); }
  html body .ou-hero { min-height: 58vh; }

  html body .ou-stats { gap: 0.85rem; row-gap: 1.1rem; }
  html body .ou-stat strong { font-size: 1.45rem; }

  html body .conv-sticky__price s { display: none; } /* keep the bar on one line */

  /* Section headings across the marketing pages. */
  html body .ou-sechead h2 { font-size: clamp(1.7rem, 8.5vw, 2.2rem); }
  html body .lobs-mag-head h2 { font-size: clamp(1.35rem, 7vw, 1.7rem); }
}