/* V120.0 — sitewide mobile/device rendering hardening
   Goals: no horizontal page scroll, no horizontally-scrollable primary nav,
   fluid media/forms/grids, and readable layouts down to very small phones.
*/
html,body{max-width:100%;}
img,svg,video,canvas,iframe{max-width:100%;}

@media (max-width:700px){
  html{overflow-x:hidden;scroll-padding-top:8px;}
  body{width:100%;min-width:0!important;overflow-x:hidden!important;}
  .wrap{width:calc(100% - 28px)!important;max-width:none!important;margin-left:auto!important;margin-right:auto!important;}

  /* Header: never force the user to horizontally scroll the primary navigation. */
  body>header,body header.mini-nav,body.pay-page header{height:auto!important;min-height:0!important;}
  body>header .nav,body header.mini-nav .nav,body.pay-page .nav{
    width:100%!important;height:auto!important;min-height:0!important;
    display:flex!important;flex-wrap:wrap!important;align-items:center!important;
    gap:8px 10px!important;padding:10px 0 8px!important;overflow:visible!important;
  }
  body>header .logo,body header.mini-nav .logo,body.pay-page .logo{width:clamp(132px,43vw,158px)!important;max-width:48vw!important;height:auto!important;flex:0 1 auto!important;}
  body>header .top-cta,body header.mini-nav .top-cta,body.pay-page .top-cta{
    margin-left:auto!important;flex:0 0 auto!important;max-width:48vw!important;
    white-space:normal!important;text-align:center!important;line-height:1.15!important;
    padding:9px 11px!important;font-size:10px!important;min-height:40px!important;
  }
  body>header .navlinks,body header.mini-nav .navlinks,body.pay-page .navlinks{
    order:3!important;width:100%!important;flex:1 0 100%!important;
    display:flex!important;flex-wrap:wrap!important;justify-content:flex-start!important;
    align-items:center!important;gap:4px 13px!important;margin:0!important;padding:5px 0 2px!important;
    overflow:visible!important;white-space:normal!important;scrollbar-width:none!important;
  }
  body>header .navlinks a,body header.mini-nav .navlinks a,body.pay-page .navlinks a{
    display:inline-flex!important;align-items:center!important;min-height:30px!important;
    padding:5px 0!important;font-size:10px!important;line-height:1.15!important;
    white-space:normal!important;flex:0 0 auto!important;
  }
  body>header .navlinks a:after,body header.mini-nav .navlinks a:after{bottom:1px!important;}

  /* Prevent fixed desktop geometry from leaking into phones. */
  main,.page-hero,.pricing-hero,.pricing-main,.course-page,.course-directory,.help,
  .lead-cta,.testimonials,.support-form,.form-section,.directory,.resource-section,
  .course-detail-page,.course-detail-hero,.course-detail-main{max-width:100%!important;min-width:0!important;}
  main section,.wrap>*{min-width:0!important;}

  /* Fluid typography and long-content safety. */
  h1,h2,h3,h4,p,li,a,label,button,select,input,textarea{max-width:100%;overflow-wrap:anywhere;}
  main h1,.hero h1,.page-hero h1,.pricing-hero h1,.support-hero h1,.course-detail-hero h1,.course-hero h1{
    font-size:clamp(32px,10.5vw,48px)!important;line-height:1.06!important;letter-spacing:-1px!important;
  }
  main h2,.section-title h2,.course-group h2,.about-card h2,.contact-card h2,.resource-card h2,
  .resource-section-title,.course-section h2,.course-bottom-cta h2,.lead-cta h2,.cta h2{
    font-size:clamp(23px,7vw,32px)!important;line-height:1.15!important;letter-spacing:-.55px!important;
  }
  main h3,.course-card h3,.unit h3,.aside-card h3,.about-card h3,.contact-card h3,.plan-name,
  .plan-card h3,.monthly-option h3{font-size:clamp(17px,5.2vw,21px)!important;}

  /* Media and embedded content. */
  .hero-visual,.uw img,.course-detail-hero img,.course-hero img{max-width:100%!important;}
  iframe{width:100%!important;max-width:100%!important;}
  table{max-width:100%;}
  pre,.code-block,.table-wrap,.table-responsive{max-width:100%;overflow-x:auto!important;-webkit-overflow-scrolling:touch;}

  /* Generic grids/flex rows become fluid instead of overflowing. */
  .grid2,.grid3,.grid4,.form-grid,.course-page-grid,.course-layout,.course-detail-wrap,
  .lower-grid,.calc-wrap,.monthly-grid,.plan-grid,.offer-four,.course-directory-grid{
    min-width:0!important;
  }
  .grid2,.grid3,.grid4,.form-grid{grid-template-columns:minmax(0,1fr)!important;}
  .course-page-grid,.course-layout{grid-template-columns:minmax(0,1fr)!important;}
  .lower-grid,.calc-wrap{grid-template-columns:minmax(0,1fr)!important;}

  .buttons,.submit-row,.pricing-profile-actions,.course-bottom-cta,.cta-inner,.lead-cta-inner{
    max-width:100%!important;
  }
  .buttons .btn,.submit-row .btn,.cta .btn,.lead-cta .btn,.course-bottom-cta .btn{max-width:100%;}

  /* Public offer rail remains horizontally animated, but the document itself does not scroll. */
  .site-offer-v73{max-width:100vw!important;overflow:hidden!important;}
  .site-offer-v73-track{max-width:none!important;}

  /* Pricing page. */
  body.pay-page .pricing-hero-row{width:100%!important;min-width:0!important;}
  body.pay-page .course-picker{width:100%!important;min-width:0!important;max-width:100%!important;}
  body.pay-page .monthly-panel,.monthly-option,.plan-card,.offer-four,.probono-cta{min-width:0!important;max-width:100%!important;}
  body.pay-page .monthly-head{min-width:0!important;}

  /* Pricing modal: center in the visible viewport; dialog owns overflow. */
  .pricing-profile-modal{
    position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;
    min-height:100svh!important;max-height:100dvh!important;display:none!important;
    align-items:center!important;justify-content:center!important;padding:12px!important;
    overflow:hidden!important;overscroll-behavior:none!important;
  }
  .pricing-profile-modal.is-open{display:flex!important;}
  .pricing-profile-dialog{
    width:min(560px,100%)!important;max-width:100%!important;
    max-height:calc(100dvh - 24px)!important;height:auto!important;
    overflow-y:auto!important;overflow-x:hidden!important;margin:0!important;
    padding:20px 17px!important;border-radius:18px!important;
  }
  .pricing-profile-dialog h2{font-size:clamp(24px,7.5vw,30px)!important;}
  .pricing-profile-actions{flex-direction:column!important;}
  .pricing-profile-actions button{width:100%!important;min-height:46px!important;}
}

@media (max-width:460px){
  .wrap{width:calc(100% - 22px)!important;}
  body>header .nav,body header.mini-nav .nav,body.pay-page .nav{gap:7px 8px!important;padding-top:8px!important;}
  body>header .logo,body header.mini-nav .logo,body.pay-page .logo{width:140px!important;max-width:44vw!important;}
  body>header .top-cta,body header.mini-nav .top-cta,body.pay-page .top-cta{font-size:9px!important;padding:8px 9px!important;min-height:36px!important;}
  body>header .navlinks,body header.mini-nav .navlinks,body.pay-page .navlinks{gap:2px 10px!important;padding-top:3px!important;}
  body>header .navlinks a,body header.mini-nav .navlinks a,body.pay-page .navlinks a{font-size:9px!important;min-height:28px!important;}
  .hero>.wrap{min-height:0!important;}
  .hero{min-height:0!important;padding-bottom:0!important;}
  .hero-copy{padding-top:24px!important;}
  .hero-visual{height:280px!important;top:auto!important;margin-top:18px!important;border-radius:0 0 0 70px!important;}
  .features{position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;width:100%!important;margin-top:10px!important;}
  .cards{grid-template-columns:minmax(0,1fr)!important;}
  .pricing-hero h1{font-size:clamp(34px,11vw,46px)!important;}
  .pricing-profile-dialog{padding:18px 14px!important;}
}

@media (max-width:360px){
  .wrap{width:calc(100% - 18px)!important;}
  body>header .logo,body header.mini-nav .logo,body.pay-page .logo{width:126px!important;}
  body>header .top-cta,body header.mini-nav .top-cta,body.pay-page .top-cta{font-size:8px!important;padding:7px 8px!important;}
  body>header .navlinks,body header.mini-nav .navlinks,body.pay-page .navlinks{gap:1px 8px!important;}
  body>header .navlinks a,body header.mini-nav .navlinks a,body.pay-page .navlinks a{font-size:8.5px!important;}
}



/* V120.0 — tablet/mobile breakpoint. iPad portrait and similar 7–9in viewports
   must use the same non-scrolling primary navigation and fluid geometry. */
@media (max-width:850px){
  html,body{width:100%!important;max-width:100%!important;min-width:0!important;overflow-x:hidden!important;}
  body>header,body header.mini-nav,body.pay-page header{height:auto!important;min-height:0!important;width:100%!important;overflow:visible!important;}
  body>header .nav,body header.mini-nav .nav,body.pay-page .nav{
    width:100%!important;max-width:100%!important;height:auto!important;min-height:0!important;
    display:flex!important;flex-wrap:wrap!important;align-items:center!important;
    gap:9px 12px!important;padding:10px 0 7px!important;overflow:visible!important;
  }
  body>header .logo,body header.mini-nav .logo,body.pay-page .logo{width:clamp(145px,30vw,165px)!important;max-width:45vw!important;}
  body>header .top-cta,body header.mini-nav .top-cta,body.pay-page .top-cta{
    margin-left:auto!important;max-width:42vw!important;min-width:0!important;white-space:normal!important;
  }
  body>header .navlinks,body header.mini-nav .navlinks,body.pay-page .navlinks{
    order:3!important;flex:1 0 100%!important;width:100%!important;display:flex!important;
    flex-wrap:wrap!important;justify-content:flex-start!important;align-items:center!important;
    gap:3px 17px!important;margin:0!important;padding:5px 0 2px!important;overflow:visible!important;
    white-space:normal!important;scrollbar-width:none!important;min-width:0!important;
  }
  body>header .navlinks a,body header.mini-nav .navlinks a,body.pay-page .navlinks a{
    flex:0 0 auto!important;white-space:nowrap!important;font-size:10px!important;line-height:1.2!important;
    padding:7px 0!important;min-height:29px!important;
  }
  body>header .navlinks a:after,body header.mini-nav .navlinks a:after,body.pay-page .navlinks a:after{bottom:1px!important;}

  /* Tablet portrait: collapse fixed two-column hero geometry before it can squeeze. */
  .hero,.hero>.wrap{height:auto!important;min-height:0!important;}
  .hero-copy{position:relative!important;top:auto!important;left:auto!important;width:100%!important;padding:28px 0 0!important;}
  .hero-visual{position:relative!important;top:auto!important;right:auto!important;width:100%!important;height:340px!important;margin-top:18px!important;}
  .features{position:relative!important;left:auto!important;bottom:auto!important;width:100%!important;margin-top:12px!important;}
  .course-page-grid,.course-layout,.course-detail-wrap,.lower-grid,.calc-wrap{grid-template-columns:minmax(0,1fr)!important;}
}

/* V120.0 — final responsive pass: the mobile viewport meta is now present on every HTML page.
   Keep the document itself non-scrolling horizontally; only intentionally wide data regions may scroll.
   Primary navigation wraps instead of becoming a horizontal scrolling strip. */
@media (max-width:700px){
  html,body{width:100%!important;max-width:100%!important;min-width:0!important;overflow-x:hidden!important;}
  body{font-size:16px;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
  *,*::before,*::after{box-sizing:border-box;}
  .wrap{width:calc(100% - 28px)!important;max-width:100%!important;min-width:0!important;}

  /* Public header: two compact rows, never a horizontal navigation scroller. */
  body>header,body header.mini-nav,body.pay-page header{width:100%!important;max-width:100%!important;overflow:visible!important;}
  body>header .nav,body header.mini-nav .nav,body.pay-page .nav{
    width:100%!important;max-width:100%!important;display:flex!important;flex-wrap:wrap!important;
    align-items:center!important;overflow:visible!important;min-width:0!important;
  }
  body>header .logo,body header.mini-nav .logo,body.pay-page .logo{flex:0 1 auto!important;min-width:0!important;}
  body>header .top-cta,body header.mini-nav .top-cta,body.pay-page .top-cta{max-width:46vw!important;min-width:0!important;}
  body>header .navlinks,body header.mini-nav .navlinks,body.pay-page .navlinks{
    width:100%!important;flex:1 0 100%!important;display:flex!important;flex-wrap:wrap!important;
    justify-content:flex-start!important;align-items:center!important;gap:2px 13px!important;
    overflow:visible!important;white-space:normal!important;min-width:0!important;
    padding:5px 0 2px!important;margin:0!important;
  }
  body>header .navlinks a,body header.mini-nav .navlinks a,body.pay-page .navlinks a{
    flex:0 0 auto!important;white-space:nowrap!important;max-width:100%!important;
    overflow-wrap:normal!important;word-break:normal!important;
  }

  /* Remove common desktop geometry that causes compressed/oversized mobile layouts. */
  .hero,.hero>.wrap,.hero-visual,.features{min-height:0!important;}
  .hero{height:auto!important;}
  .hero>.wrap{height:auto!important;}
  .hero-copy{position:relative!important;top:auto!important;left:auto!important;width:100%!important;}
  .hero-visual{position:relative!important;top:auto!important;right:auto!important;width:100%!important;}
  .features{position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;width:100%!important;}

  /* Make all common layout primitives shrink rather than establish a desktop minimum. */
  .pricing-hero-row,.monthly-head,.status-check-head,.test-head,.section-title,.cta-inner,
  .lead-cta-inner,.buttons,.submit-row,.support-form,.form-row,.form-grid,.grid2,.grid3,.grid4,
  .course-page-grid,.course-layout,.course-detail-wrap,.about-grid,.resource-grid,.directory-grid,
  .course-directory-grid,.lower-grid,.calc-row,.payment-promise,.policy-grid{min-width:0!important;max-width:100%!important;}
  .buttons,.cta-inner,.lead-cta-inner{flex-wrap:wrap!important;}
  .buttons>*,.cta-inner>*{max-width:100%!important;}

  /* Cards/columns: one comfortable column on phones. */
  .cards,.test-cards,.plan-grid,.monthly-grid,.flexible-grid,.commit-marketing-grid,.exam-grid,
  .pricing-offers-grid,.feedback-stats,.feedback-detail-grid{grid-template-columns:minmax(0,1fr)!important;min-width:0!important;}
  .course-card,.plan-card,.monthly-option,.marketing-card,.commit-marketing,.exam-card,
  .white-card,.monthly-panel,.offer-four,.probono-cta{width:100%!important;min-width:0!important;max-width:100%!important;}

  /* Public tables/data: scroll inside the component, never the whole page. */
  .table-wrap,.table-responsive,.feedback-table-wrap,.pricing-table-wrap,.student-table-wrap,
  .blocked-list,.admin-table-wrap{width:100%!important;max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch;}

  /* Prevent long URLs/emails/code from widening the layout. */
  p,li,td,th,label,a,button,input,select,textarea,.email,.footer-copy,.navlinks{
    max-width:100%;overflow-wrap:anywhere;
  }
  input,select,textarea,button{max-width:100%;}
  img,svg,video,canvas,iframe{max-width:100%;}

  /* Small-screen spacing. */
  section{max-width:100%;}
  .section-title{align-items:flex-start!important;}
  .section-sub{float:none!important;max-width:100%!important;}
  .cta,.help,.pricing-main{overflow:hidden;}
}

@media (max-width:420px){
  .wrap{width:calc(100% - 22px)!important;}
  body>header .nav,body header.mini-nav .nav,body.pay-page .nav{padding-left:0!important;padding-right:0!important;}
  body>header .logo,body header.mini-nav .logo,body.pay-page .logo{max-width:43vw!important;width:136px!important;}
  body>header .top-cta,body header.mini-nav .top-cta,body.pay-page .top-cta{max-width:47vw!important;font-size:9px!important;padding:8px 9px!important;}
  body>header .navlinks,body header.mini-nav .navlinks,body.pay-page .navlinks{gap:1px 10px!important;}
  body>header .navlinks a,body header.mini-nav .navlinks a,body.pay-page .navlinks a{font-size:9px!important;min-height:27px!important;}
  .hero h1,.page-hero h1,.pricing-hero h1{font-size:clamp(31px,11vw,44px)!important;}
}

@media (max-width:360px){
  .wrap{width:calc(100% - 18px)!important;}
  body>header .logo,body header.mini-nav .logo,body.pay-page .logo{width:124px!important;max-width:42vw!important;}
  body>header .top-cta,body header.mini-nav .top-cta,body.pay-page .top-cta{font-size:8px!important;padding:7px 8px!important;}
  body>header .navlinks,body header.mini-nav .navlinks,body.pay-page .navlinks{gap:0 8px!important;}
  body>header .navlinks a,body header.mini-nav .navlinks a,body.pay-page .navlinks a{font-size:8.5px!important;}
}

/* V120 — modern app-style mobile navigation drawer.
   The desktop navigation remains unchanged. At <=850px the header becomes
   a compact app bar and the primary navigation lives in a left-side drawer. */
.mobile-nav-toggle,.mobile-nav-drawer,.mobile-nav-backdrop{display:none;}

@media (max-width:850px){
  html.mobile-nav-open,html.mobile-nav-open body{overflow:hidden!important;}
  body.mobile-nav-lock{overflow:hidden!important;touch-action:none!important;}

  body>header,body header.mini-nav,body.pay-page header{
    position:relative!important;z-index:100!important;
  }
  body>header .nav,body header.mini-nav .nav,body.pay-page .nav{
    display:flex!important;flex-wrap:nowrap!important;align-items:center!important;
    justify-content:space-between!important;width:100%!important;gap:12px!important;
    padding:10px 0!important;min-height:62px!important;
  }
  body>header .logo,body header.mini-nav .logo,body.pay-page .logo{
    width:clamp(136px,34vw,166px)!important;max-width:52vw!important;
    flex:0 1 auto!important;
  }
  body>header .top-cta,body header.mini-nav .top-cta,body.pay-page .top-cta{display:none!important;}
  body>header .navlinks,body header.mini-nav .navlinks,body.pay-page .navlinks{
    display:none!important;
  }

  .mobile-nav-toggle{
    display:flex!important;position:relative!important;flex:0 0 44px!important;
    width:44px!important;height:44px!important;margin-left:auto!important;
    padding:0!important;border:1px solid rgba(19,47,85,.13)!important;
    border-radius:13px!important;background:#fff!important;color:#132f55!important;
    align-items:center!important;justify-content:center!important;flex-direction:column!important;
    gap:5px!important;cursor:pointer!important;box-shadow:0 7px 20px rgba(19,47,85,.08)!important;
    -webkit-tap-highlight-color:transparent!important;
  }
  .mobile-nav-toggle span{display:block!important;width:19px!important;height:2px!important;
    border-radius:3px!important;background:#132f55!important;transition:transform .2s ease,opacity .2s ease!important;}
  .mobile-nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)!important;}
  .mobile-nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0!important;}
  .mobile-nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)!important;}

  .mobile-nav-backdrop{
    display:block!important;position:fixed!important;inset:0!important;z-index:1000!important;
    background:rgba(15,31,51,.36)!important;backdrop-filter:blur(2px)!important;
    -webkit-backdrop-filter:blur(2px)!important;opacity:0!important;pointer-events:none!important;
    transition:opacity .22s ease!important;
  }
  .mobile-nav-backdrop.is-visible{opacity:1!important;pointer-events:auto!important;}

  .mobile-nav-drawer{
    display:flex!important;position:fixed!important;z-index:1001!important;left:0!important;top:0!important;
    bottom:0!important;width:min(330px,88vw)!important;height:100dvh!important;min-height:100svh!important;
    background:#fffdfb!important;color:#132f55!important;flex-direction:column!important;
    padding:calc(14px + env(safe-area-inset-top)) 18px calc(16px + env(safe-area-inset-bottom))!important;
    box-shadow:16px 0 42px rgba(19,47,85,.18)!important;
    transform:translate3d(-104%,0,0)!important;visibility:hidden!important;
    transition:transform .25s cubic-bezier(.22,.8,.25,1),visibility 0s linear .25s!important;
    overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;
  }
  .mobile-nav-drawer.is-open{transform:translate3d(0,0,0)!important;visibility:visible!important;transition:transform .25s cubic-bezier(.22,.8,.25,1)!important;}
  .mobile-nav-head{display:flex!important;align-items:center!important;justify-content:space-between!important;
    gap:12px!important;padding:2px 2px 17px!important;border-bottom:1px solid #ebe4de!important;}
  .mobile-nav-brand{display:flex!important;align-items:center!important;gap:10px!important;min-width:0!important;}
  .mobile-nav-brand img{width:112px!important;height:auto!important;display:block!important;max-width:42vw!important;}
  .mobile-nav-brand span{font-size:9px!important;font-weight:800!important;letter-spacing:2px!important;
    text-transform:uppercase!important;color:#a65c68!important;padding-left:10px!important;border-left:1px solid #ddd3cc!important;}
  .mobile-nav-close{width:40px!important;height:40px!important;flex:0 0 40px!important;border:1px solid #e5ddd6!important;
    border-radius:12px!important;background:#fff!important;color:#132f55!important;font-size:28px!important;line-height:1!important;
    cursor:pointer!important;display:grid!important;place-items:center!important;padding:0!important;}
  .mobile-nav-links{display:grid!important;gap:4px!important;padding:18px 0 12px!important;}
  .mobile-nav-links a{display:flex!important;align-items:center!important;min-height:48px!important;padding:11px 13px!important;
    border-radius:12px!important;color:#294565!important;text-decoration:none!important;font-size:14px!important;font-weight:700!important;
    line-height:1.25!important;white-space:normal!important;overflow-wrap:anywhere!important;}
  .mobile-nav-links a:hover,.mobile-nav-links a:focus-visible{background:#f7f1ee!important;color:#132f55!important;outline:none!important;}
  .mobile-nav-links a.active,.mobile-nav-links a[aria-current="page"]{background:#f6e9e7!important;color:#9b4f5d!important;}
  .mobile-nav-cta{display:flex!important;align-items:center!important;justify-content:center!important;min-height:48px!important;
    width:100%!important;padding:12px 15px!important;border-radius:12px!important;background:#132f55!important;color:#fff!important;
    text-decoration:none!important;font-size:13px!important;font-weight:800!important;margin-top:5px!important;}
  .mobile-nav-foot{margin-top:auto!important;padding:18px 4px 4px!important;color:#8996a6!important;font-size:9px!important;
    letter-spacing:1.2px!important;text-transform:uppercase!important;}
}

@media (max-width:420px){
  .mobile-nav-drawer{width:min(310px,90vw)!important;padding-left:14px!important;padding-right:14px!important;}
  .mobile-nav-brand img{width:104px!important;}
  .mobile-nav-brand span{font-size:8px!important;letter-spacing:1.6px!important;}
  .mobile-nav-links a{min-height:46px!important;font-size:13px!important;}
}

/* V120 — phone-first hardening.
   Phones need a true compact app bar; do not let legacy desktop/mobile rules
   participate in the layout. The drawer itself remains the only navigation.
*/
@media (max-width:600px){
  html,body{width:100%!important;min-width:0!important;max-width:100%!important;overflow-x:hidden!important;}
  body{margin:0!important;-webkit-text-size-adjust:100%!important;}
  body.mobile-nav-lock{position:fixed!important;left:0!important;right:0!important;width:100%!important;overflow:hidden!important;}
  html.mobile-nav-open{overflow:hidden!important;}

  body>header,body header.mini-nav,body.pay-page header{
    width:100%!important;height:auto!important;min-height:0!important;position:relative!important;
    overflow:visible!important;z-index:1100!important;
  }
  body>header .nav,body header.mini-nav .nav,body.pay-page .nav{
    width:100%!important;max-width:none!important;min-width:0!important;height:62px!important;min-height:62px!important;
    margin:0!important;padding:8px 12px!important;display:flex!important;flex-wrap:nowrap!important;
    align-items:center!important;justify-content:space-between!important;gap:8px!important;overflow:visible!important;
  }
  body>header .nav>a:first-child,body header.mini-nav .nav>a:first-child,body.pay-page .nav>a:first-child{
    display:flex!important;align-items:center!important;min-width:0!important;flex:1 1 auto!important;
  }
  body>header .logo,body header.mini-nav .logo,body.pay-page .logo{
    display:block!important;width:132px!important;max-width:48vw!important;height:auto!important;flex:0 1 auto!important;
  }
  body>header .top-cta,body header.mini-nav .top-cta,body.pay-page .top-cta,
  body>header .navlinks,body header.mini-nav .navlinks,body.pay-page .navlinks{display:none!important;}

  .mobile-nav-toggle{
    display:flex!important;position:relative!important;z-index:1102!important;flex:0 0 44px!important;
    width:44px!important;height:44px!important;margin:0!important;padding:0!important;
    align-items:center!important;justify-content:center!important;flex-direction:column!important;gap:5px!important;
    border:1px solid rgba(19,47,85,.14)!important;border-radius:12px!important;background:#fff!important;
    box-shadow:0 5px 18px rgba(19,47,85,.10)!important;color:#132f55!important;
    -webkit-appearance:none!important;appearance:none!important;touch-action:manipulation!important;
  }
  .mobile-nav-toggle span{width:19px!important;height:2px!important;display:block!important;background:#132f55!important;border-radius:2px!important;}

  .mobile-nav-backdrop{
    display:block!important;position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;height:100dvh!important;
    z-index:2000!important;background:rgba(10,25,43,.42)!important;opacity:0!important;visibility:hidden!important;
    pointer-events:none!important;transition:opacity .22s ease,visibility .22s ease!important;
  }
  .mobile-nav-backdrop.is-visible{opacity:1!important;visibility:visible!important;pointer-events:auto!important;}

  .mobile-nav-drawer{
    display:flex!important;position:fixed!important;left:0!important;top:0!important;bottom:auto!important;
    width:min(312px,86vw)!important;max-width:86vw!important;height:100vh!important;height:100dvh!important;min-height:100svh!important;
    z-index:2001!important;margin:0!important;padding:calc(12px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom))!important;
    flex-direction:column!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;touch-action:pan-y!important;background:#fffdfb!important;color:#132f55!important;
    box-shadow:14px 0 38px rgba(19,47,85,.20)!important;transform:translate3d(-105%,0,0)!important;
    visibility:hidden!important;transition:transform .24s cubic-bezier(.22,.8,.25,1),visibility 0s linear .24s!important;
  }
  .mobile-nav-drawer.is-open{transform:translate3d(0,0,0)!important;visibility:visible!important;transition:transform .24s cubic-bezier(.22,.8,.25,1)!important;}
  .mobile-nav-head{flex:0 0 auto!important;min-height:52px!important;padding:2px 2px 12px!important;}
  .mobile-nav-brand img{width:100px!important;max-width:40vw!important;}
  .mobile-nav-brand span{font-size:8px!important;letter-spacing:1.5px!important;}
  .mobile-nav-close{width:40px!important;height:40px!important;flex:0 0 40px!important;}
  .mobile-nav-links{display:grid!important;grid-template-columns:1fr!important;gap:3px!important;padding:14px 0 10px!important;}
  .mobile-nav-links a{width:100%!important;min-height:46px!important;padding:11px 13px!important;font-size:14px!important;line-height:1.25!important;}
  .mobile-nav-cta{width:100%!important;min-height:48px!important;flex:0 0 auto!important;}
  .mobile-nav-foot{font-size:8px!important;margin-top:auto!important;}

  /* Remove the old phone nav wrapping completely. */
  body>header .navlinks,body header.mini-nav .navlinks,body.pay-page .navlinks{flex:0 0 0!important;max-height:0!important;min-height:0!important;padding:0!important;margin:0!important;}

  /* Prevent legacy hero widths from overflowing narrow phones. */
  .wrap{width:calc(100% - 24px)!important;max-width:none!important;min-width:0!important;}
  .hero,.page-hero,.course-detail-hero,.pricing-hero{width:100%!important;max-width:100%!important;overflow:hidden!important;}
  .hero h1,.page-hero h1,.course-detail-hero h1,.pricing-hero h1{max-width:100%!important;overflow-wrap:normal!important;word-break:normal!important;}
  .hero-copy,.hero-visual,.features{max-width:100%!important;min-width:0!important;}
  .hero-visual{height:250px!important;max-height:62vw!important;}
  .cards,.grid2,.grid3,.grid4,.about-grid,.contact-grid,.resource-grid,.course-page-grid,.course-layout,.course-detail-wrap,.lower-grid{width:100%!important;max-width:100%!important;min-width:0!important;grid-template-columns:minmax(0,1fr)!important;}
  .card,.course-card,.directory-card,.about-card,.contact-card,.resource-card{min-width:0!important;max-width:100%!important;}
  input,select,textarea{width:100%!important;max-width:100%!important;min-width:0!important;}
}

@media (max-width:360px){
  body>header .nav,body header.mini-nav .nav,body.pay-page .nav{padding-left:10px!important;padding-right:10px!important;}
  body>header .logo,body header.mini-nav .logo,body.pay-page .logo{width:122px!important;max-width:45vw!important;}
  .mobile-nav-drawer{width:min(296px,88vw)!important;max-width:88vw!important;padding-left:12px!important;padding-right:12px!important;}
  .mobile-nav-links a{font-size:13px!important;min-height:44px!important;}
}

/* V123 — course selector is phone-only. It must never appear alongside the desktop course sidebar. */
.mobile-course-selector{display:none!important;}

/* =========================================================
   V122 — phone course pages + native form controls
   ========================================================= */
@media (max-width:700px){
  /* Course detail containers must retain real horizontal breathing room.
     V120's generic width:100% rule was causing hero copy to touch the viewport edge. */
  .course-detail-hero .course-detail-wrap,
  .course-detail-body .course-detail-wrap{
    width:calc(100% - 28px)!important;
    max-width:1120px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  .course-detail-hero{padding:28px 0 30px!important;}
  .course-detail-hero h1{font-size:clamp(34px,9.5vw,46px)!important;line-height:1.08!important;letter-spacing:-1.2px!important;margin-bottom:14px!important;}
  .course-detail-hero .lead{font-size:16px!important;line-height:1.55!important;max-width:100%!important;overflow-wrap:normal!important;word-break:normal!important;}
  .course-eyebrow{font-size:10px!important;letter-spacing:1.8px!important;}
  .course-back{min-height:42px!important;padding:8px 13px!important;font-size:13px!important;max-width:100%!important;margin-bottom:22px!important;}

  /* Replace the large desktop course navigator with a compact mobile selector. */
  .course-aside{width:100%!important;max-width:100%!important;position:static!important;order:-1!important;margin:0 0 16px!important;}
  .aside-card{width:100%!important;max-width:100%!important;padding:14px 14px 15px 16px!important;border-radius:16px!important;box-shadow:0 8px 22px rgba(19,47,85,.06)!important;}
  .aside-kicker{font-size:8px!important;letter-spacing:1.6px!important;margin-left:1px!important;}
  .aside-card h3{font-size:18px!important;line-height:1.2!important;margin:0 0 10px 1px!important;}
  .aside-card .aside-back{display:none!important;}
  .aside-divider,.aside-label,.aside-course-list{display:none!important;}
  .mobile-course-selector{display:block!important;}
  .mobile-course-selector-label{display:block!important;margin:0 0 6px 1px!important;color:#74849a!important;font-size:9px!important;font-weight:800!important;letter-spacing:1.3px!important;text-transform:uppercase!important;}
  .mobile-course-select{display:block!important;width:100%!important;min-height:46px!important;margin:0!important;padding:10px 40px 10px 12px!important;border:1px solid #dfd5ce!important;border-radius:11px!important;background-color:#fff!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23132f55' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 12px center!important;background-size:18px!important;color:#294c73!important;font:700 13px/1.2 Inter,Arial,sans-serif!important;appearance:none!important;-webkit-appearance:none!important;}
  .mobile-course-select:focus{outline:none!important;border-color:#b85a6c!important;box-shadow:0 0 0 3px rgba(184,90,108,.12)!important;}

  /* Comfortable public select controls across the site. Native option sheets remain OS-rendered. */
  main select,form select,.field select,.course-picker select,.course-select,select:not(.mobile-course-select){
    min-height:46px!important;width:100%!important;max-width:100%!important;min-width:0!important;
    padding:10px 40px 10px 13px!important;border:1px solid #ddd3cc!important;border-radius:11px!important;
    background-color:#fffdfb!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23132f55' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")!important;
    background-repeat:no-repeat!important;background-position:right 12px center!important;background-size:18px!important;
    color:#173a61!important;font:600 14px/1.25 Inter,Arial,sans-serif!important;appearance:none!important;-webkit-appearance:none!important;
  }
  main select:focus,form select:focus,.field select:focus,.course-picker select:focus,.course-select:focus,select:not(.mobile-course-select):focus{
    outline:none!important;border-color:#b85a6c!important;box-shadow:0 0 0 3px rgba(184,90,108,.12)!important;
  }

  /* Prevent the explanatory course copy from being clipped by inherited width/overflow rules. */
  .course-main,.course-section,.course-section p,.source-note,.course-bottom-cta{min-width:0!important;max-width:100%!important;overflow:visible!important;}
  .course-section p{font-size:15px!important;line-height:1.65!important;overflow-wrap:normal!important;word-break:normal!important;}
  .course-section{padding:20px 18px!important;}
  .unit{overflow:visible!important;}
}

@media (max-width:380px){
  .course-detail-hero .course-detail-wrap,.course-detail-body .course-detail-wrap{width:calc(100% - 22px)!important;}
  .course-detail-hero h1{font-size:34px!important;}
  .course-detail-hero .lead{font-size:15px!important;}
  .mobile-course-select,main select,form select,.field select,.course-picker select,.course-select,select:not(.mobile-course-select){font-size:13px!important;min-height:44px!important;}
}

/* V124 — tablet/iPad shell breathing room.
   Keep the app-style mobile navigation, but give the header and offer rail
   deliberate horizontal breathing room on iPad/small-tablet widths. */
@media (min-width:601px) and (max-width:850px){
  body>header .nav,body header.mini-nav .nav,body.pay-page .nav{
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    padding:12px 22px 9px!important;
  }
  body>header .logo,body header.mini-nav .logo,body.pay-page .logo{
    max-width:42vw!important;
  }
  .site-offer-v73{
    box-sizing:border-box!important;
    padding-left:14px!important;
    padding-right:14px!important;
  }
}

/* V124 — phone shell: retain compact app bar while adding balanced side inset. */
@media (max-width:600px){
  body>header .nav,body header.mini-nav .nav,body.pay-page .nav{
    box-sizing:border-box!important;
    padding-left:14px!important;
    padding-right:14px!important;
  }
  .site-offer-v73{
    box-sizing:border-box!important;
    padding-left:8px!important;
    padding-right:8px!important;
  }
}

/* V125 — explicitly preserve the current-page state inside the independent mobile drawer. */
@media (max-width: 850px){
  .mobile-nav-links a.active,
  .mobile-nav-links a[aria-current="page"]{
    background:#f6e9e7!important;
    color:#9b4f5d!important;
    font-weight:800!important;
    box-shadow:inset 3px 0 0 #b85a6c!important;
  }
}