/* Shared phone layout. Desktop page styles remain authoritative above 760px. */
@media (max-width: 760px) {
  .ssu-course-page *, .ssu-course-page *::before, .ssu-course-page *::after { box-sizing: border-box; }
  .ssu-course-page section { padding-left: 22px !important; padding-right: 22px !important; }
  .ssu-course-page nav { position: relative !important; display: flex; flex-wrap: wrap; gap: 8px 16px !important; padding: 12px 22px !important; max-width: 100%; }
  .ssu-course-page nav > div { min-width: 0; max-width: 100%; }
  .ssu-course-page nav > div:last-child { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px !important; }
  .ssu-course-page nav a { display: inline-flex !important; align-items: center; min-height: 44px; max-width: 100%; white-space: normal !important; }
  .ssu-course-page .mqHero { flex-direction: column !important; grid-template-columns: minmax(0, 1fr) !important; gap: 32px !important; }
  .ssu-course-page .mqGrid, .ssu-course-page .mqGridRow, .ssu-course-page .mobile-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important; }
  .ssu-course-page .mqGrid > *, .ssu-course-page .mqGridRow > *, .ssu-course-page .mqHero > *, .ssu-course-page .mobile-grid > * { min-width: 0 !important; max-width: 100%; }
  /* Reorder the image wrapper, not just the image inside that wrapper. */
  .ssu-course-page .mqGridRow > :has(img) { order: -1; }
  .ssu-course-page .mqImg { flex: 1 1 auto !important; width: 100% !important; max-width: 100% !important; }
  .ssu-course-page .mobile-panel { padding-left: 20px !important; padding-right: 20px !important; }
  .ssu-course-page .mobile-frame { padding: 1.5px !important; }
  .ssu-course-page .mobile-media-frame:has(> img) { min-height: 0 !important; }
  .ssu-course-page .mobile-width { max-width: 100% !important; min-width: 0 !important; }
  .ssu-course-page .mobile-wrap { white-space: normal !important; }
  .ssu-course-page h2 { font-size: 38px !important; line-height: 1.15 !important; overflow-wrap: break-word; white-space: normal !important; }
  .ssu-course-page .mobile-stack { flex-direction: column !important; align-items: stretch !important; }
  .ssu-course-page .mqForm { flex-direction: column !important; gap: 12px; }
  .ssu-course-page .mqForm input { width: 100% !important; min-width: 0 !important; min-height: 44px; border-right: 1px solid rgba(200,146,42,.25) !important; }
  .ssu-course-page h3 { overflow-wrap: break-word; }
  .ssu-course-page h1 { white-space: normal !important; text-wrap: wrap !important; }
  .ssu-course-page img { max-width: 100%; }
  .ssu-course-page .mobile-cover { height: auto !important; min-height: 0 !important; object-fit: contain !important; aspect-ratio: auto !important; }
  .ssu-course-page .curr-img { min-height: 0; }
  .ssu-course-page .curr-img img { position: static; width: 100%; height: auto; object-fit: contain; display: block; }
  .ssu-course-page .mobile-button, .ssu-course-page button, .ssu-course-page summary { min-height: 44px; max-width: 100%; white-space: normal !important; }
  .ssu-course-page .mobile-button { display: inline-flex !important; align-items: center; justify-content: center; text-align: center; padding-left: 20px !important; padding-right: 20px !important; }
  .ssu-course-page .mobile-body-text, .ssu-course-page footer { font-size: 14px !important; }
  .ssu-course-page footer { line-height: 1.7; padding-bottom: calc(140px + env(safe-area-inset-bottom)) !important; }
  .ssu-course-page footer, .ssu-course-page footer nav, .ssu-course-page footer a { color: #d9b25a !important; }
  .ssu-course-page .ac-wrap, .ssu-course-page .ac-in { min-width: 0; }
  .ssu-course-page .ac-body { padding-left: 0 !important; padding-right: 0 !important; }
  .ssu-course-page .stickyCta { gap: 8px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
  .ssu-course-page .stickyCta .lbl { font-size: 14px; text-align: center; }
  .ssu-course-page .stickyCta a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; max-width: 100%; }
  .ssu-course-page #stickyCta { flex-wrap: wrap; gap: 8px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
  .ssu-course-page #stickyCta a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; max-width: 100%; white-space: normal; }
  .ssu-course-page #stickyCta .scLabel { font-size: 14px; text-align: center; }
  .ssu-course-page #enrollbar { flex-wrap: wrap; max-width: 100%; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
  .ssu-course-page #enrollbar a.eb-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; max-width: 100%; white-space: normal; }
  .ssu-course-page section[data-screen-label="Final CTA"] { min-height: 0 !important; }
  .ssu-course-page .cta-fan { margin-bottom: 32px !important; }
  .ssu-course-page .cta-fan > img { display: none !important; }
  .ssu-course-page .cta-fan > img:nth-child(3) { display: block !important; width: 100% !important; max-width: 420px; height: auto !important; object-fit: contain !important; transform: none !important; margin: 0 !important; aspect-ratio: auto !important; }
  /* Home keeps its own cinematic layout and navigation. */
  #content .btn, nav .cta { min-height: 44px; max-width: 100%; white-space: normal; }
  #content .muted, #content .note, #content .appcard p, #content .qby { font-size: 14px; }
  #content .feat .pic img { object-fit: contain; }
}
@media (max-width: 480px) {
  .ssu-course-page .mobile-panel { padding-left: 12px !important; padding-right: 12px !important; }
  .ssu-course-page .skill-card { padding: 28px 12px !important; }
  .ssu-course-page h2 { font-size: 32px !important; }
  .ssu-course-page .mqStat { grid-template-columns: minmax(0, 1fr) !important; }
  .ssu-course-page .prt-panel:has(> span + p) { gap: 10px !important; }
  #content .appcard { flex-direction: column; padding: 24px 16px; gap: 20px; }
  #content .appcard > * { min-width: 0; max-width: 100%; }
  #content .feat .copy, #content .plus, #content .quote { padding-left: 12px; padding-right: 12px; }
  #content .statrow { flex-direction: column; align-items: flex-start; padding: 24px 12px; gap: 12px; }
  #content .statrow b { flex-basis: auto; align-self: flex-start; }
  #content .store { min-height: 44px; }
  #content .store small, #content .store b { font-size: 14px; }
  #content .fmini a { color: #d9b25a; }
  #content .btn { padding-left: 22px; padding-right: 22px; }
}

/* Run D: the three school links exceeded the phone width as one flex row. */
@media (max-width: 760px) {
  .ssu-course-page .mobile-school-links { flex-direction: column; align-items: stretch; gap: 12px !important; }
  .ssu-course-page .mobile-school-links > a { min-width: 0; width: 100%; flex-direction: column; }
}

/* Run C: retain the phone layout while placing course videos before hero actions. */
@media (max-width: 760px) {
  .ssu-course-page .ssu-video-hero { display: grid !important; gap: 0 !important; }
  .ssu-course-page .ssu-video-hero > .ssu-hero-copy { display: contents; }
  .ssu-course-page .ssu-hero-copy > * { grid-column: 1; order: 0; }
  .ssu-course-page .ssu-video-hero > .mqImg { grid-column: 1; order: 1; margin: 0 0 28px; }
  .ssu-course-page .ssu-hero-copy > .ssu-hero-actions,
  .ssu-course-page .ssu-hero-copy > :last-child { grid-column: 1; order: 2; }
  .ssu-course-page .ssu-video-box { width: 100%; min-width: 0; }
}