/* ===================================================================
   USAVIR v39.1 — the scale lock  (loads LAST, after brand/academy)

   Companion to assets/js/v39-scale.js. That script sets four custom
   properties on <html> and this file spends them:

     --fit            the single scale factor for this screen
     --design-w       viewport width, expressed in design pixels
     --design-h       one screen,     expressed in design pixels
     --design-last-h  one screen minus the footer, in design pixels
     --design-taskbar the fixed taskbar's clearance, in design pixels

   Why zoom and not font scaling: v30-core.css carries ~1,500 hard pixel
   values against 76 em values, so a font-size on the section scales the
   section and not its contents — which is exactly why an iPhone SE showed
   less than a Note. zoom scales the whole subtree, so measured content
   height in DESIGN pixels comes out identical on every device.

   Nothing here snaps the scroll. Full-screen sections and free scrolling
   are independent; snapping was never needed for the first.
   =================================================================== */

/* ---------- free scrolling, unconditionally ---------- */
html,
html.home-snap,
html.academy-snap,
html:has(body[data-page="home"]),
html:has(body[data-page="academy"]){
  scroll-snap-type:none!important;
}

/* ---------- the design canvas ---------- */
html.is-portrait { --u:8.6px }   /* 1% of the 860px portrait canvas  */
html.is-landscape{ --u:7.6px }   /* 1% of the 760px landscape canvas */

/* =========================================================
   SCALED SECTIONS — homepage and academy share one mechanism
   ========================================================= */
html.has-scale-lock body[data-page="home"] .brand-panel,
html.has-scale-lock body[data-page="academy"] .v21-hero,
html.has-scale-lock body[data-page="academy"] #subjects,
html.has-scale-lock body[data-page="academy"] #price-comparison,
html.has-scale-lock body[data-page="academy"] .enrol-route{
  zoom:var(--fit,1);

  box-sizing:border-box!important;
  width:var(--design-w,100%)!important;
  max-width:none!important;
  min-height:var(--design-h,100dvh)!important;
  max-height:none!important;      /* kills the v39 internal-scroll cap */
  overflow:visible!important;     /* ditto */
  margin:0 auto!important;

  scroll-snap-align:none!important;
  scroll-margin-top:0!important;
}

/* the last section shares its screen with the unscaled footer */
html.has-scale-lock body[data-page="home"] .brand-panel--last,
html.has-scale-lock body[data-page="academy"] .enrol-route{
  min-height:var(--design-last-h,100dvh)!important;
}

/* the footer is never scaled — it is the fixed part of that final screen */
html.has-scale-lock .global-footer{
  zoom:1;
  position:static;
  width:100%;
  margin-top:0;
}

/* =========================================================
   HOMEPAGE — panels were already em-based off --u, so only the
   unit changes: 1dvh (which would double-scale under zoom)
   becomes a constant design pixel.
   ========================================================= */
html.has-scale-lock body[data-page="home"] .brand-panel{
  --u:7.6px;
  font-size:calc(var(--u) * 1.98);
  display:flex!important;
  padding-top:calc(var(--design-taskbar,72px) + var(--u) * 3)!important;
  padding-bottom:calc(var(--u) * 3)!important;
  border-bottom:1px solid var(--line);
}
html.has-scale-lock body[data-page="home"] .brand-panel--last{
  border-bottom:0;
  padding-bottom:calc(var(--u) * 1.5)!important;
}
html.has-scale-lock body[data-page="home"] .brand-panel__inner{
  flex:1;min-width:0;
  width:min(1420px,100%);
  margin:0 auto;
  display:flex;flex-direction:column;
  justify-content:space-between;
}

html.is-portrait.has-scale-lock body[data-page="home"] .brand-panel{
  --u:8.6px;
  font-size:calc(var(--u) * 1.95);
  padding-top:calc(var(--design-taskbar,72px) + var(--u) * 2)!important;
  padding-bottom:calc(var(--u) * 2)!important;
}

/* =========================================================
   ACADEMY — the sections keep every rule v30-core gives them;
   only the box they live in is redefined.
   ========================================================= */
html.has-scale-lock body[data-page="academy"] .v21-hero,
html.has-scale-lock body[data-page="academy"] #subjects,
html.has-scale-lock body[data-page="academy"] #price-comparison,
html.has-scale-lock body[data-page="academy"] .enrol-route{
  --u:7.6px;
  font-size:calc(var(--u) * 1.98);
  display:flex!important;
  flex-direction:column!important;
  justify-content:center;
  gap:calc(var(--u) * 2);
  padding:calc(var(--design-taskbar,72px) + var(--u) * 3)
          clamp(14px,2.4vw,60px)
          calc(var(--u) * 3)!important;
}
html.is-portrait.has-scale-lock body[data-page="academy"] .v21-hero,
html.is-portrait.has-scale-lock body[data-page="academy"] #subjects,
html.is-portrait.has-scale-lock body[data-page="academy"] #price-comparison,
html.is-portrait.has-scale-lock body[data-page="academy"] .enrol-route{
  --u:8.6px;
  font-size:calc(var(--u) * 1.95);
  gap:calc(var(--u) * 1.5);
  padding:calc(var(--design-taskbar,72px) + var(--u) * 2)
          calc(var(--u) * 2)
          calc(var(--u) * 2)!important;
}

/* grid and flex children default to min-width:auto and refuse to shrink
   below their content, overflowing sideways instead */
html.has-scale-lock body[data-page="academy"] .v21-hero > *,
html.has-scale-lock body[data-page="academy"] #subjects > *,
html.has-scale-lock body[data-page="academy"] #price-comparison > *,
html.has-scale-lock body[data-page="academy"] .enrol-route > *{min-width:0}

/* the shell must not impose a width once its children are full-bleed */
html.has-scale-lock body[data-page="academy"] .v21-shell{
  display:block;max-width:none;padding:0;margin:0;
}

/* ---------- pricing: restore the ORIGINAL mobile treatment ----------
   The seven providers scroll SIDEWAYS inside a compact card, which is how
   this page always worked and why the section stayed short. v39-academy
   replaced that with a vertical clip, which is what made it 203% of a
   screen on an SE and hid rows. Sideways, not vertical. */
html.has-scale-lock body[data-page="academy"] #price-comparison .market-card{
  flex:0 1 auto!important;
  display:block!important;
  overflow:visible!important;
  max-height:none!important;
}
html.has-scale-lock body[data-page="academy"] .price-table-wrap{
  flex:none!important;
  overflow-x:auto!important;
  overflow-y:visible!important;
  max-height:none!important;
  min-height:0!important;
  overscroll-behavior-x:contain;
}

/* =========================================================
   Fallback — no JS, or a browser without zoom (Firefox < 126).
   --fit stays 1 and these sections behave as plain full-screen
   blocks. Nothing breaks; it simply is not scale-locked.
   ========================================================= */
html:not(.has-scale-lock) body[data-page="home"] .brand-panel,
html:not(.has-scale-lock) body[data-page="academy"] .v21-hero,
html:not(.has-scale-lock) body[data-page="academy"] #subjects,
html:not(.has-scale-lock) body[data-page="academy"] #price-comparison,
html:not(.has-scale-lock) body[data-page="academy"] .enrol-route{
  min-height:100dvh;
}

@media (prefers-reduced-motion:reduce){
  .brand-track{animation:none}
}

/* =========================================================
   ACADEMY — fitting the two dense sections to the canvas.

   Every value below is in DESIGN pixels or em, so the reduction is
   identical on every device: an SE and a Note show the same thing at
   different sizes. Nothing is hidden — this is typographic tightening,
   not content removal.
   ========================================================= */

/* v30-core's mobile rule pads the shell with !important, which pushed every
   full-bleed section 14px to the right */
html.has-scale-lock body[data-page="academy"] .v21-shell{
  padding:0!important;   /* its 91px padding-top double-counted the taskbar
                            clearance the sections already reserve, leaving a
                            dead band above the hero */
  margin:0!important;
  max-width:none!important;
}

/* ---------- subjects ---------- */
html.has-scale-lock body[data-page="academy"] #subjects .section-heading{
  margin-bottom:0!important;
}
html.has-scale-lock body[data-page="academy"] #subjects .section-heading h2{
  font-size:2.05em!important;line-height:.95!important;margin:.12em 0 .18em!important;
}
html.has-scale-lock body[data-page="academy"] #subjects .section-heading > div > p{
  font-size:.82em!important;line-height:1.4!important;margin:0!important;
}

/* ---------- pricing ---------- */
html.has-scale-lock body[data-page="academy"] #price-comparison .market-card{
  padding:calc(var(--u) * 1.2)!important;
}
html.has-scale-lock body[data-page="academy"] .market-intro{
  margin-bottom:calc(var(--u) * .9)!important;
  gap:calc(var(--u) * .8)!important;
  padding-bottom:calc(var(--u) * .9)!important;
}
html.has-scale-lock body[data-page="academy"] .market-intro h2{
  font-size:1.85em!important;line-height:.95!important;margin:0 0 .12em!important;
}
html.has-scale-lock body[data-page="academy"] .market-intro p{
  font-size:.74em!important;line-height:1.3!important;
}
html.has-scale-lock body[data-page="academy"] .price-table{
  font-size:.72em!important;
}
html.has-scale-lock body[data-page="academy"] .price-table th,
html.has-scale-lock body[data-page="academy"] .price-table td{
  padding:calc(var(--u) * .48) calc(var(--u) * .75)!important;
  line-height:1.2!important;
}
html.has-scale-lock body[data-page="academy"] .price-note{
  margin:calc(var(--u) * .5) 0 0!important;
  font-size:.62em!important;line-height:1.35!important;
}
html.has-scale-lock body[data-page="academy"] .comparison-advantage{
  margin-top:calc(var(--u) * .8)!important;
  padding:calc(var(--u) * .9)!important;
}
html.has-scale-lock body[data-page="academy"] .comparison-advantage h3{
  font-size:1.2em!important;line-height:1.1!important;margin:0 0 .25em!important;
}
html.has-scale-lock body[data-page="academy"] .comparison-advantage p{
  font-size:.74em!important;line-height:1.3!important;
}

/* ---------- subjects: the three slates ---------- */
html.has-scale-lock body[data-page="academy"] .subject-slates{
  gap:calc(var(--u) * .5)!important;
}
html.has-scale-lock body[data-page="academy"] .subject-slate__identity{
  min-height:calc(var(--u) * 5.6)!important;
}
html.has-scale-lock body[data-page="academy"] .subject-slate__title{
  padding:calc(var(--u) * .7) calc(var(--u) * 1.1)!important;
}
html.has-scale-lock body[data-page="academy"] .subject-slate__title h3{
  font-size:1.05em!important;line-height:1.1!important;
}
html.has-scale-lock body[data-page="academy"] .subject-slate__price{
  padding:calc(var(--u) * .45) calc(var(--u) * 1.1)!important;
}
html.has-scale-lock body[data-page="academy"] .subject-slate__actions{
  padding:calc(var(--u) * .45) calc(var(--u) * .8)!important;
}

/* =========================================================
   TOUCH TARGETS under zoom.

   A 44px min-height inside a section scaled to 0.78 renders as 34 real
   pixels, which fails the 44px target it was written to meet. Dividing by
   the factor makes the RENDERED size 44px on every device.
   ========================================================= */
@media (hover:none) and (pointer:coarse){
  html.has-scale-lock body[data-page="academy"] .v21-button,
  html.has-scale-lock body[data-page="academy"] .subject-slate__toggle,
  html.has-scale-lock body[data-page="home"] .brand-button,
  html.has-scale-lock body[data-page="home"] .brand-arrow{
    min-height:calc(44px / var(--fit,1))!important;
  }
  html.has-scale-lock body[data-page="home"] .brand-arrow{
    min-width:calc(44px / var(--fit,1))!important;
  }
}

/* =========================================================
   PORTRAIT TABLETS - the academy's own mobile composition.

   Orientation chooses the layout, but v30-core selects the academy's
   single-column layout by WIDTH (max-width:480px), so an upright iPad
   at 768px got the desktop composition squeezed into a phone canvas.
   These are v30-core's own body[data-page="academy"] mobile rules,
   re-emitted for portrait screens wider than a phone. Nothing new is
   invented here and no other page is touched.
   ========================================================= */
@media (orientation:portrait) and (min-width:481px){
  /* Academy / Contact / Subject details share exact phone page width and origin. */ body[data-page="academy"] .v21-shell, body[data-page="contact"] .v21-shell{ box-sizing:border-box!important; width:100%!important; max-width:none!important; margin:0!important; padding-top:calc(var(--u-taskbar-h) + var(--u-mobile-gap))!important; padding-left:max(var(--u-mobile-gutter),env(safe-area-inset-left))!important; padding-right:max(var(--u-mobile-gutter),env(safe-area-inset-right))!important; padding-bottom:calc(36px + env(safe-area-inset-bottom))!important; }
  body[data-page="academy"] .v21-shell.subject-hero{ padding-top:calc(var(--u-taskbar-h) + var(--u-mobile-gap))!important; }
  /* Academy hero: same arrangement on every phone. */ body[data-page="academy"] .v21-hero{ display:grid!important; grid-template-columns:1fr!important; gap:var(--u-mobile-gap)!important; min-height:0!important; padding:0!important; }
  body[data-page="academy"] .v21-title{ font-size:clamp(2.75rem,13.2vw,4rem)!important; line-height:.9!important; overflow-wrap:anywhere; }
  body[data-page="academy"] .v21-lead{font-size:clamp(.82rem,3.4vw,.94rem)!important;line-height:1.58!important}
  body[data-page="academy"] .v21-actions{ display:grid!important; grid-template-columns:1fr 1fr!important; gap:7px!important; width:100%!important; }
  body[data-page="academy"] .v21-actions>.v21-button{width:100%!important;min-width:0!important;margin:0!important;padding:10px 7px!important;font-size:clamp(.57rem,2.55vw,.68rem)!important}
  body[data-page="academy"] .v21-actions>.v21-button:first-child{grid-column:1/-1!important}
  body[data-page="academy"] .academy-proof{ display:grid!important; grid-template-columns:1fr 1fr!important; gap:7px!important; width:100%!important; max-width:none!important; }
  body[data-page="academy"] .proof-card{ min-width:0!important; min-height:92px!important; padding:13px!important; border-radius:3px!important; }
  body[data-page="academy"] .proof-card strong{font-size:clamp(1rem,4.6vw,1.3rem)!important;overflow-wrap:anywhere}
  body[data-page="academy"] .proof-card--price{grid-column:1/-1!important;min-height:116px!important}
  body[data-page="academy"] .proof-card--price strong{font-size:clamp(2.5rem,12vw,3.5rem)!important}
  body[data-page="academy"] .v21-section, body[data-page="academy"] .market-section, body[data-page="academy"] .enrol-route{margin-top:32px!important;padding-left:0!important;padding-right:0!important}
  body[data-page="academy"] .section-heading{gap:8px!important}
  body[data-page="academy"] .section-heading h2{font-size:clamp(2rem,9.7vw,3rem)!important;line-height:.98!important}
  body[data-page="academy"] .section-heading p{font-size:.8rem!important;line-height:1.55!important}
  /* Subject slates: identical structure on every phone size. */ body[data-page="academy"] .subject-slates{gap:8px!important;margin-top:18px!important}
  body[data-page="academy"] .subject-slate{width:100%!important;min-width:0!important}
  body[data-page="academy"] .subject-slate__bar{ display:grid!important; grid-template-columns:58px minmax(0,1fr) 38px!important; grid-template-areas:"icon title toggle" "price price toggle" "actions actions toggle"!important; min-height:0!important; }
  body[data-page="academy"] .subject-slate__identity{grid-area:icon!important;min-height:76px!important}
  body[data-page="academy"] .subject-slate__logo{width:38px!important;height:38px!important}
  body[data-page="academy"] .subject-slate__title{grid-area:title!important;padding:11px 10px!important;min-width:0!important}
  body[data-page="academy"] .subject-slate__title h3{font-size:clamp(.98rem,4.6vw,1.18rem)!important;line-height:1.05!important;overflow-wrap:anywhere!important}
  body[data-page="academy"] .subject-slate__title p{display:none!important}
  body[data-page="academy"] .subject-slate__price{ grid-area:price!important; padding:8px 10px!important; display:flex!important; flex-direction:row!important; align-items:center!important; gap:8px!important; }
  body[data-page="academy"] .subject-slate__price strong{margin:0!important;font-size:.96rem!important}
  body[data-page="academy"] .subject-slate__actions{ grid-area:actions!important; display:grid!important; grid-template-columns:minmax(0,1.55fr) minmax(66px,.55fr)!important; gap:6px!important; padding:8px!important; }
  body[data-page="academy"] .subject-slate__actions .v21-button{width:100%!important;min-width:0!important;padding:9px 5px!important;font-size:clamp(.52rem,2.25vw,.61rem)!important;white-space:normal!important;line-height:1.15!important}
  body[data-page="academy"] .subject-slate__toggle{grid-area:toggle!important;width:38px!important;min-width:38px!important}
  body[data-page="academy"] .subject-slate__content{padding:14px!important}
  body[data-page="academy"] .subject-slate__topics{gap:5px!important}
  body[data-page="academy"] .subject-slate__topics span{font-size:.65rem!important;padding:6px!important}
  body[data-page="academy"] .subject-slate__content p{font-size:.73rem!important;line-height:1.5!important}
  /* Comparison scrolls internally; page itself never does. */ body[data-page="academy"] .market-card{padding:15px!important;width:100%!important;overflow:hidden!important}
  body[data-page="academy"] .price-table-wrap{width:100%!important;max-width:100%!important;overflow-x:auto!important;overscroll-behavior-x:contain!important;border-radius:2px!important}
  body[data-page="academy"] .price-table{min-width:620px!important}
  body[data-page="academy"] .comparison-advantage{padding:15px!important}
  /* Four enrol steps always remain a 2x2 block. */ body[data-page="academy"] .enrol-route{padding:15px!important;border-radius:3px!important}
  body[data-page="academy"] .enrol-route__head{grid-template-columns:1fr!important;gap:9px!important}
  body[data-page="academy"] .enrol-steps{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important}
  body[data-page="academy"] .enrol-step{min-height:120px!important;padding:11px!important;border-radius:2px!important}
  body[data-page="academy"] .enrol-step strong{font-size:.8rem!important}
  body[data-page="academy"] .enrol-step p{font-size:.65rem!important;line-height:1.45!important}
  /* Subject detail pages: same phone frame from 320–480, no breakpoint swaps. */ body[data-page="academy"] .course-hero__crumbs{font-size:.65rem!important;gap:5px!important;white-space:normal!important}
  body[data-page="academy"] .subject-hero__grid{grid-template-columns:1fr!important;gap:8px!important}
  body[data-page="academy"] .subject-hero__main, body[data-page="academy"] .subject-hero__side{padding:16px!important}
  body[data-page="academy"] .subject-hero__mark{width:52px!important;height:52px!important;margin-bottom:12px!important}
  body[data-page="academy"] .subject-hero__main h1{font-size:clamp(2.65rem,12.6vw,3.9rem)!important;line-height:.88!important;overflow-wrap:anywhere!important}
  body[data-page="academy"] .subject-hero__main>p{font-size:.79rem!important;line-height:1.55!important}
  body[data-page="academy"] .subject-hero__side ul{font-size:.76rem!important;line-height:1.55!important}
  body[data-page="academy"] .subject-hero__price{font-size:clamp(2.7rem,12vw,3.8rem)!important}
  body[data-page="academy"] .subject-detail-section{padding:28px 0!important}
  body[data-page="academy"] .subject-detail-head{grid-template-columns:1fr!important;gap:8px!important;margin-bottom:15px!important}
  body[data-page="academy"] .subject-detail-head h2{font-size:clamp(1.9rem,9.2vw,2.8rem)!important;line-height:.98!important}
  body[data-page="academy"] .subject-detail-head p{font-size:.75rem!important;line-height:1.5!important}
  body[data-page="academy"] .detail-grid, body[data-page="academy"] .build-grid, body[data-page="academy"] .career-grid, body[data-page="academy"] .pair-grid{grid-template-columns:1fr!important;gap:7px!important}
  body[data-page="academy"] .level-track{grid-template-columns:1fr!important}
  body[data-page="academy"] .detail-panel, body[data-page="academy"] .build-card, body[data-page="academy"] .career-card, body[data-page="academy"] .pair-card, body[data-page="academy"] .level-step{padding:14px!important}
  body[data-page="academy"] .topic-list, body[data-page="academy"] .topic-list--wide{grid-template-columns:1fr 1fr!important;gap:5px!important}
  body[data-page="academy"] .topic-list span{min-width:0!important;font-size:.64rem!important;padding:7px!important;overflow-wrap:anywhere!important}
  body[data-page="academy"] .grade-block summary{padding:12px!important}
  body[data-page="academy"] .grade-topics{grid-template-columns:1fr 1fr!important;gap:5px!important;padding:10px!important}
  body[data-page="academy"] .grade-topics span{font-size:.63rem!important;padding:6px!important;overflow-wrap:anywhere!important}
  body[data-page="academy"] .course-enrol-cta{padding:16px!important}
  body[data-page="academy"]>main.v21-shell, body[data-page="contact"]>main.v21-shell, body[data-page="academy"]>main.v21-shell.subject-hero{ transform:none!important;width:100%!important;max-width:100%!important;min-width:0!important; margin:0!important;box-sizing:border-box!important; padding-top:calc(var(--u-taskbar-h) + var(--v28-vgap))!important; padding-left:max(var(--v28-mobile-gutter),env(safe-area-inset-left))!important; padding-right:max(var(--v28-mobile-gutter),env(safe-area-inset-right))!important; }
  /* Academy home */ body[data-page="academy"] .v21-hero{width:100%!important;min-width:0!important;gap:var(--v28-vgap)!important}
  body[data-page="academy"] .v21-hero>*{min-width:0!important}
  body[data-page="academy"] #academy-title{ font-size:clamp(2.45rem,10.7vw,2.9rem)!important;line-height:.94!important;letter-spacing:-.045em!important; overflow-wrap:normal!important;word-break:normal!important;max-width:100%!important; }
  body[data-page="academy"] #academy-title>span, body[data-page="academy"] #academy-title>em{display:block!important;white-space:nowrap!important}
  body[data-page="academy"] .v21-lead{font-size:clamp(.78rem,3.15vw,.87rem)!important;line-height:1.5!important;max-width:100%!important;overflow-wrap:break-word!important}
  body[data-page="academy"] .v21-actions{width:100%!important;min-width:0!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:7px!important}
  body[data-page="academy"] .v21-actions>.v21-button{min-width:0!important;width:100%!important;min-height:40px!important;padding:9px 6px!important;font-size:.58rem!important;line-height:1.15!important;white-space:normal!important}
  body[data-page="academy"] .academy-proof{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;width:100%!important;min-width:0!important;gap:7px!important}
  body[data-page="academy"] .proof-card{width:100%!important;min-width:0!important;min-height:84px!important;padding:11px!important}
  body[data-page="academy"] .proof-card strong{font-size:clamp(.98rem,4.2vw,1.15rem)!important;overflow-wrap:break-word!important}
  body[data-page="academy"] .proof-card--price{grid-column:1/-1!important;min-height:102px!important}
  body[data-page="academy"] .proof-card--price strong{font-size:clamp(2.25rem,9.7vw,2.7rem)!important;white-space:nowrap!important}
  body[data-page="academy"] .proof-card--price small{font-size:.69rem!important;line-height:1.4!important}
  body[data-page="academy"] .v21-section, body[data-page="academy"] .market-section, body[data-page="academy"] .enrol-route{margin-top:var(--v28-section-gap)!important;width:100%!important;min-width:0!important}
  body[data-page="academy"] .section-heading, body[data-page="academy"] .section-heading>div{min-width:0!important;width:100%!important}
  body[data-page="academy"] .section-heading h2{font-size:clamp(1.9rem,8.3vw,2.3rem)!important;line-height:1!important;overflow-wrap:break-word!important}
  body[data-page="academy"] .section-heading p{font-size:.75rem!important;line-height:1.48!important}
  /* Subject slates */ body[data-page="academy"] .subject-slates{width:100%!important;gap:8px!important}
  body[data-page="academy"] .subject-slate, body[data-page="academy"] .subject-slate__bar, body[data-page="academy"] .subject-slate__content{width:100%!important;max-width:100%!important;min-width:0!important}
  body[data-page="academy"] .subject-slate__bar{grid-template-columns:56px minmax(0,1fr) 38px!important;grid-template-areas:"icon title toggle" "price price toggle" "actions actions toggle"!important}
  body[data-page="academy"] .subject-slate__identity{min-height:72px!important}
  body[data-page="academy"] .subject-slate__logo{width:36px!important;height:36px!important}
  body[data-page="academy"] .subject-slate__title{padding:10px 9px!important;min-width:0!important}
  body[data-page="academy"] .subject-slate__title h3{font-size:1rem!important;line-height:1.08!important;overflow-wrap:break-word!important}
  body[data-page="academy"] .subject-slate__price{padding:8px 9px!important;min-width:0!important}
  body[data-page="academy"] .subject-slate__actions{grid-template-columns:minmax(0,1.55fr) minmax(66px,.55fr)!important;min-width:0!important;gap:6px!important;padding:8px!important}
  body[data-page="academy"] .subject-slate__actions .v21-button{min-width:0!important;width:100%!important;font-size:.54rem!important;padding:8px 5px!important;white-space:normal!important}
  body[data-page="academy"] .subject-slate__toggle{width:38px!important;min-width:38px!important}
  body[data-page="academy"] .subject-slate__content{padding:13px!important}
  body[data-page="academy"] .market-card, body[data-page="academy"] .comparison-advantage, body[data-page="academy"] .enrol-route{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important}
  body[data-page="academy"] .price-table-wrap{width:100%!important;max-width:100%!important;overflow-x:auto!important}
  body[data-page="academy"] .enrol-steps{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
  /* Subject detail pages */ body[data-page="academy"] .subject-hero__grid, body[data-page="academy"] .subject-detail-head, body[data-page="academy"] .detail-grid, body[data-page="academy"] .build-grid, body[data-page="academy"] .career-grid, body[data-page="academy"] .pair-grid, body[data-page="academy"] .level-track{width:100%!important;max-width:100%!important;min-width:0!important}
  body[data-page="academy"] .subject-hero__grid{grid-template-columns:1fr!important}
  body[data-page="academy"] .subject-hero__main, body[data-page="academy"] .subject-hero__side{min-width:0!important;padding:15px!important}
  body[data-page="academy"] .subject-hero__main h1{font-size:clamp(2.35rem,10vw,2.9rem)!important;line-height:.92!important;overflow-wrap:break-word!important;word-break:normal!important}
  body[data-page="academy"] .subject-hero__main>p, body[data-page="academy"] .subject-hero__side ul{font-size:.76rem!important;line-height:1.5!important}
  body[data-page="academy"] .subject-detail-section{padding:clamp(22px,3.8dvh,30px) 0!important}
  body[data-page="academy"] .subject-detail-head{grid-template-columns:1fr!important;gap:7px!important}
  body[data-page="academy"] .subject-detail-head h2{font-size:clamp(1.8rem,7.8vw,2.25rem)!important;line-height:1!important}
  body[data-page="academy"] .subject-detail-head p{font-size:.74rem!important;line-height:1.48!important}
  body[data-page="academy"] .detail-grid, body[data-page="academy"] .build-grid, body[data-page="academy"] .career-grid, body[data-page="academy"] .pair-grid, body[data-page="academy"] .level-track{grid-template-columns:1fr!important;gap:7px!important}
}

/* =========================================================
   ACADEMY HERO, LANDSCAPE FAMILY.

   The desktop composition is authored for a tall page: title, lead,
   actions and the proof grid together run ~1,000 design pixels against
   a 760 canvas. Everything below is in design pixels or em, so the
   whole landscape family - iPad sideways, laptop, desktop - is reduced
   by exactly the same proportion.
   ========================================================= */
@media (orientation:landscape){
  html.has-scale-lock body[data-page="academy"] .v21-hero{
    gap:calc(var(--u) * 1.2)!important;
  }
  html.has-scale-lock body[data-page="academy"] .v21-title{
    font-size:3.3em!important;line-height:.88!important;margin:.08em 0 .1em!important;
  }
  html.has-scale-lock body[data-page="academy"] .v21-hero > div > p,
  html.has-scale-lock body[data-page="academy"] .v21-hero .v21-lead{
    font-size:.86em!important;line-height:1.45!important;margin:0 0 .5em!important;
  }
  html.has-scale-lock body[data-page="academy"] .v21-actions{
    margin-top:calc(var(--u) * .6)!important;gap:calc(var(--u) * .7)!important;
  }
  html.has-scale-lock body[data-page="academy"] .academy-proof{
    gap:calc(var(--u) * .7)!important;
  }
  html.has-scale-lock body[data-page="academy"] .proof-card{
    min-height:0!important;padding:calc(var(--u) * .9)!important;
  }
  html.has-scale-lock body[data-page="academy"] .proof-card--price{
    min-height:0!important;
  }
  html.has-scale-lock body[data-page="academy"] .proof-card--price strong{
    font-size:2.6em!important;line-height:1!important;
  }
  html.has-scale-lock body[data-page="academy"] .proof-card--price small,
  html.has-scale-lock body[data-page="academy"] .proof-card small{
    font-size:.72em!important;line-height:1.35!important;
  }
}

/* =========================================================
   HOMEPAGE section panels: centre, don't stretch.

   space-between reads well on the hero, where the belt is meant to sit
   on the bottom edge. On a section panel with two children it opens a
   void down the middle once the panel really is a full screen. Centring
   splits that space evenly top and bottom, which reads as composition
   rather than as a gap.
   ========================================================= */
html.has-scale-lock body[data-page="home"] .brand-panel:not(.brand-panel--hero) .brand-panel__inner{
  justify-content:center;
  gap:calc(var(--u) * 2.6);
}

/* =========================================================
   SHORT VIEWPORTS — landscape phones and very short windows.

   v39-scale.js sets .is-flow (and --fit back to 1) below 520px of
   viewport height. A landscape phone is 375-430px tall; after the fixed
   taskbar and the browser's own chrome there is roughly 280px left,
   which is not a canvas for a heading, body copy and a call to action.
   Scaling to force the fit produced 10.5px type and STILL overflowed.

   So here the full-screen rule is dropped and the page flows normally,
   at readable size, keeping the desktop composition because at ~844px
   wide the columns genuinely have the room. Sections are no longer one
   screen each - deliberately: one screen at 390px tall is a crop, not
   a design.

   Note this is not a new idea. v38-brand.css:274 and v39-academy.css:115
   already carried exactly this escape hatch; the scale lock's !important
   rules were overriding it. This hands it back.
   ========================================================= */
@media (max-height:520px){

  html.has-scale-lock body[data-page="home"] .brand-panel,
  html.has-scale-lock body[data-page="academy"] .v21-hero,
  html.has-scale-lock body[data-page="academy"] #subjects,
  html.has-scale-lock body[data-page="academy"] #price-comparison,
  html.has-scale-lock body[data-page="academy"] .enrol-route,
  html.has-scale-lock body[data-page="home"] .brand-panel--last{
    zoom:1!important;
    --u:8px;
    width:auto!important;
    max-width:none!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    font-size:clamp(14px,2.1vw,16px)!important;
    justify-content:flex-start!important;
    padding:calc(var(--v24-taskbar-h,72px) + 16px)
            clamp(16px,3vw,44px)
            26px!important;
    gap:16px!important;
  }

  html.has-scale-lock body[data-page="home"] .brand-panel__inner,
  html.has-scale-lock body[data-page="home"] .brand-panel:not(.brand-panel--hero) .brand-panel__inner{
    justify-content:flex-start!important;
    gap:16px!important;
  }

  /* the typographic tightening exists only to win height that is no longer
     being fought for here - hand the reading size back */
  html.has-scale-lock body[data-page="academy"] .price-table{font-size:.8em!important}
  html.has-scale-lock body[data-page="academy"] .price-table th,
  html.has-scale-lock body[data-page="academy"] .price-table td{
    padding:11px 13px!important;line-height:1.4!important;
  }
  html.has-scale-lock body[data-page="academy"] .market-intro p,
  html.has-scale-lock body[data-page="academy"] .comparison-advantage p,
  html.has-scale-lock body[data-page="academy"] #subjects .section-heading > div > p{
    font-size:.9em!important;line-height:1.55!important;
  }
  html.has-scale-lock body[data-page="academy"] .comparison-advantage{padding:18px!important}
  html.has-scale-lock body[data-page="academy"] .market-card{padding:18px!important}
  html.has-scale-lock body[data-page="academy"] .subject-slate__title{padding:13px 14px!important}
  html.has-scale-lock body[data-page="academy"] .subject-slate__price{padding:9px 14px!important}
  html.has-scale-lock body[data-page="academy"] .subject-slate__actions{padding:9px 11px!important}
  html.has-scale-lock body[data-page="academy"] .subject-slate__identity{min-height:78px!important}
  html.has-scale-lock body[data-page="academy"] .subject-slates{gap:9px!important}

  /* the footer is an ordinary block at the end of an ordinary page again */
  html.has-scale-lock .global-footer{margin-top:0}
}