/* ==========================================================================
   Autobot Academy — modern layer
   --------------------------------------------------------------------------
   Loaded from index.html AFTER every recovered stylesheet (stylesheet.css,
   responsive.css, bootstrap.min.css, jquery-ui, font-awesome), so it only
   needs to override what it modernizes; anything not mentioned here keeps the
   recovered look.

   Rules of engagement:
   - Override visuals only. No markup, class-name or DOM changes, so the
     jQuery interactions (slick sliders, select2, tabs, menus) keep working.
   - Brand palette stays the site's own: deep green #114a47, navy #1c2b5a,
     orange #ee8722-#f26522, action green #70b644 / #399e1d.
   - Page-level blocks that a workstream has not reached yet inherit these
     tokens; the per-page redesigns build on top of this file.
   ========================================================================== */

:root {
  /* Brand */
  --aa-green-deep: #114a47;
  --aa-green-dark: #0e3f3c;
  --aa-navy: #1c2b5a;
  --aa-orange: #ee8722;
  /* Brand orange on white is 2.4:1 — right for fills, rules and glyphs, wrong for
     running text, so every orange *word* reads through this AA sibling. */
  --aa-orange-text: #a8560e;
  --aa-amber-ring: #ffc24d; /* the same ring, inverted for the dark header and the audio dock */
  --aa-orange-2: #f26522;
  --aa-green: #70b644;
  --aa-green-action: #399e1d;
  --aa-wa: #25d366;

  /* Ink & surfaces */
  --aa-ink: #232a33;
  --aa-ink-soft: rgba(35, 42, 51, 0.74);
  --aa-ink-mute: rgba(35, 42, 51, 0.7);
  --aa-line: #e4e9ec;
  --aa-surface: #ffffff;
  --aa-surface-soft: #f6f8f9;

  /* Shape */
  --aa-radius-sm: 10px;
  --aa-radius-md: 14px;
  --aa-radius-lg: 18px;
  --aa-radius-pill: 999px;

  /* Depth */
  --aa-shadow-1: 0 1px 2px rgba(16, 24, 32, 0.05), 0 4px 14px rgba(16, 24, 32, 0.07);
  --aa-shadow-2: 0 4px 10px rgba(16, 24, 32, 0.07), 0 14px 34px rgba(16, 24, 32, 0.12);
  --aa-shadow-3: 0 18px 48px rgba(16, 24, 32, 0.20);
  --aa-ring: 0 0 0 3px rgba(238, 135, 34, 0.25);

  /* Motion */
  --aa-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --aa-dur: 0.28s;

  /* Type */
  --aa-font: 'Exo', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* --------------------------------------------------------------------------
   Base & accessibility
   -------------------------------------------------------------------------- */

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--aa-font);
  color: var(--aa-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--aa-font);
  letter-spacing: -0.015em;
}

p {
  line-height: 1.65;
}

/* The recovered stylesheets run transition: all 0.3s on every anchor, which
   also animates width/height/padding — class toggles (mobile drawer and its
   close bar) visibly lag behind. Keep the visual properties only; component
   rules that declare their own transition still win. */
a {
  transition-property: color, background-color, border-color, box-shadow, transform, opacity, filter;
  transition-duration: 0.2s;
  transition-timing-function: var(--aa-ease);
}

/* In-page anchors should not hide under the fixed header. */
[id] {
  scroll-margin-top: 96px;
}

/* The archived pages carry decorative src-less imgs (the width:0% boxes on the
   old course templates); some browsers still paint a broken-image outline. */
img:not([src]) {
  display: none !important;
}

/* Recovered user/teacher photos of the MasterStudy pages. */
img.avatar {
  border-radius: 50%;
}

/* --------------------------------------------------------------------------
   Boot loading screen (the full-screen overlay in index.html)
   --------------------------------------------------------------------------
   Shown while the JS bundle downloads and React mounts; it hands off to the
   page skeletons below. The brand mark (Logo_f.webp) is colorful, so it reads
   on the deep-green gradient without a white chip. */
#aa-boot {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 24px;
  background:
    radial-gradient(1100px 620px at 50% -12%, #17635f 0%, var(--aa-green-deep) 46%, var(--aa-green-dark) 100%);
  color: #fff;
  font-family: var(--aa-font);
  text-align: center;
  transition: opacity 0.5s var(--aa-ease), visibility 0.5s var(--aa-ease);
}
#aa-boot.aa-boot--hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
#aa-boot .aa-boot__mark {
  width: 96px;
  height: 96px;
  animation: aa-boot-float 1.8s var(--aa-ease) infinite;
}
#aa-boot .aa-boot__mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.28));
}
#aa-boot .aa-boot__brand {
  font-size: clamp(20px, 4.5vw, 26px);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.1;
}
#aa-boot .aa-boot__brand b {
  color: var(--aa-orange);
  font-weight: 700;
}
#aa-boot .aa-boot__bar {
  width: min(320px, 72vw);
  height: 6px;
  border-radius: var(--aa-radius-pill);
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}
#aa-boot .aa-boot__bar i {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: var(--aa-radius-pill);
  background: linear-gradient(90deg, var(--aa-green), var(--aa-orange));
  animation: aa-boot-slide 1.25s var(--aa-ease) infinite;
}
#aa-boot .aa-boot__status {
  min-height: 1.4em;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.86);
}

@keyframes aa-boot-slide {
  0% { transform: translateX(-130%); }
  100% { transform: translateX(330%); }
}
@keyframes aa-boot-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-7px) scale(1.03); }
}

/* --------------------------------------------------------------------------
   Skeleton shimmer primitive + legacy-page layout skeleton
   -------------------------------------------------------------------------- */
.aa-skeleton {
  position: relative;
  overflow: hidden;
  background: #e9eef0;
  border-radius: var(--aa-radius-sm);
  color: transparent !important;
  user-select: none;
}
.aa-skeleton::before { content: "\00a0"; }
.aa-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
  animation: aa-shimmer 1.3s infinite;
}
@keyframes aa-shimmer {
  100% { transform: translateX(100%); }
}

/* Placeholder that mimics a generic recovered page: header strip, hero, card grid. */
.aa-page-skeleton {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px clamp(16px, 4vw, 32px) 64px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-height: 70vh;
}
.aa-page-skeleton .aa-skel-nav {
  height: 62px;
  border-radius: var(--aa-radius-md);
}
.aa-page-skeleton .aa-skel-hero {
  height: clamp(180px, 32vw, 320px);
  border-radius: var(--aa-radius-lg);
}
.aa-page-skeleton .aa-skel-title {
  height: 26px;
  width: min(420px, 70%);
  border-radius: var(--aa-radius-sm);
}
.aa-page-skeleton .aa-skel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}
.aa-page-skeleton .aa-skel-card {
  height: 220px;
  border-radius: var(--aa-radius-md);
}
.aa-page-skeleton .aa-skel-lines {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.aa-page-skeleton .aa-skel-lines .aa-skeleton:nth-child(2) { width: 92%; }
.aa-page-skeleton .aa-skel-lines .aa-skeleton:nth-child(3) { width: 78%; }

@media (prefers-reduced-motion: reduce) {
  #aa-boot .aa-boot__mark,
  #aa-boot .aa-boot__bar i,
  .aa-skeleton::after {
    animation: none;
  }
}

::selection {
  background: var(--aa-orange-2);
  color: #fff;
}

/* Slim neutral scrollbar with a deep-green thumb. */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--aa-green-deep) #eef1f2;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #eef1f2;
}

::-webkit-scrollbar-thumb {
  background: var(--aa-green-dark);
  border-radius: 8px;
  border: 2px solid #eef1f2;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--aa-green-deep);
}

/* The recovered pages carry an inline `.container { padding: 0 0 30px 0 }` block
   (a sign-up form style that was never scoped to the form). It lives in the page
   body, so it outranks stylesheet.css and modern.css alike: every container loses
   its 15px side gutters, which is why content sits flush against phone edges and
   the -10px footer/alumni bleeds push the document 10px wider than the viewport.
   Element + class beats the inline block on specificity, wherever it appears. */
body .container {
  padding-left: 15px;
  padding-right: 15px;
}

/* Desktop "squeeze" fix. Bootstrap caps every `.container` at a hard 1140px from
   1200px upward and never grows again, so on a 1920+ monitor the whole course /
   single-product / listing layout sits as a narrow 1140px column with ~385px of
   dead gutter on each side — it reads as broken/squeezed even though nothing
   actually overlaps. Let the column breathe on large screens: it floors at the
   legacy 1140px (never narrower, so tablets/laptops are untouched), grows to use
   the viewport, and caps at 1440px so text lines stay readable. The 128px term
   guarantees at least a 64px gutter so content is never flush to the edges. */
@media only screen and (min-width: 1200px) {
  body .container {
    width: clamp(1140px, calc(100vw - 128px), 1440px);
    max-width: clamp(1140px, calc(100vw - 128px), 1440px);
  }
}

/* Belt-and-braces against the remaining full-bleed negative margins in the
   recovered stylesheets: clip (not hidden) so no scroll container is created
   and the fixed header / sticky elements keep working. */
html,
body {
  overflow-x: clip;
}

/* Visible keyboard focus, quiet for mouse users. The archived theme resets `* { outline: 0 }`
   and slick/select2 re-assert outline:none on :focus, so these rings need !important to win.
   Brand orange is 2.4:1 on white, which is why the light-surface ring reads through
   --aa-orange-text; the dark header, popups and audio dock invert to --aa-amber-ring. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--aa-orange-text) !important;
  outline-offset: 2px !important;
  border-radius: 6px;
}

/* One ring is enough: the inputs' own :focus glow is decorative and reads as a
   doubled outline next to the real keyboard ring. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  box-shadow: none !important;
}

#header :focus-visible,
.aa-audio :focus-visible,
.stm_lms_search_popup :focus-visible,
.stm_lms_account_popup :focus-visible,
.stm_lms_menu_popup :focus-visible,
.footer :focus-visible {
  outline: 2px solid var(--aa-amber-ring) !important;
  outline-offset: 2px !important;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

/* Glass top bar once the page scrolls (the .active class is toggled by the
   original hdrFunction in main.jsx); inner pages (.header2) are solid from
   the start. .active keeps padding-top at 0 so the bar never jumps 10px.

   The glass (tint + blur + shadow) sits on a ::before, never on the bar
   itself: backdrop-filter turns an element into the containing block for
   its position:fixed descendants, which pinned the mobile drawer and its
   close bar to the 80px bar instead of the viewport. */
.header,
header.header2 {
  top: 0;
}

body .header.active {
  padding-top: 0;
}

.header::before,
header.header2::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: transparent;
  transition: background-color var(--aa-dur) var(--aa-ease), box-shadow var(--aa-dur) var(--aa-ease);
}

.header.active,
header.header2 {
  background: transparent;
}

.header.active::before,
header.header2::before {
  background: rgba(17, 74, 71, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(7, 26, 25, 0.28);
}

body .header .logo img {
  display: block;
  max-height: 46px;
  width: auto;
}

/* The bar is sized by its content, not by a fixed box. The archive pins the strip to a
   hard 80px (`header .container`, 60px at ≤479) — and 80px on `.header2` in every inner
   page's own inline block — while the home page additionally carries
   `.container{padding:0 0 30px}` of its own. So on a phone, where logo + Login + Sign Up +
   burger no longer fit one line, the second line spills past the bottom edge of the bar
   and the 30px band leaves every control jammed flush against the top of the viewport.
   min-height keeps the desktop rhythm; the symmetric padding centres the row — or both
   rows, if a screen really is too narrow — with real air above and below. Written against
   #header because the archived rules are two-class deep and home's block is inline. */
body #header > .container {
  height: auto;
  min-height: 80px;
  padding-top: 10px;
  padding-bottom: 10px;
  align-content: center;
}

/* `.headerRgt` is a wrapping row, so the collapsed `.menu` (whose links are the fixed
   drawer) lands on a line of its own and pushes the account buttons to the top of the box
   instead of centring them with the logo. */
body #header .headerRgt {
  align-content: center;
}

/* At desktop the bar carries the whole nav row and the archived 80px already fits it, so
   the box is left exactly as the theme drew it — there the centreing is `align-items`, and
   extra padding would just push the bar to 96px and cover the strip of page under it. */
@media only screen and (min-width: 1170px) {
  body #header > .container {
    padding-top: 0;
    padding-bottom: 0;
  }
}

.menuLink > li > a {
  position: relative;
  transition: color 0.2s var(--aa-ease);
}

/* Underline grows in on hover / open / current — accent bar in the CTA
   orange, which is what reads against the deep-green bar. */
.menuLink > li > a::after {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--aa-orange), var(--aa-orange-2));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--aa-dur) var(--aa-ease);
}

.menuLink > li > a:hover::after,
.menuLink > li.open > a::after,
.menuLink > li > a.isCurrent::after {
  transform: scaleX(1);
}

/* The recovered green-on-green hover is muddy; go white above the bar. */
body .menuLink > li > a:hover,
body .menuLink > li.open > a,
body .menuLink > li > a.isCurrent {
  color: #fff;
}

/* Sprite down-arrow -> CSS chevron, flipped while the submenu is open. */
body .menuLink li a .icon {
  width: 8px;
  height: 8px;
  margin: 0 0 3px 7px;
  background: none;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.25s var(--aa-ease);
}

body .menuLink li.open a .icon {
  transform: rotate(-135deg);
}

.submenu {
  border-radius: var(--aa-radius-md);
  padding: 6px 0;
  box-shadow: var(--aa-shadow-2);
}

.submenu li {
  border-bottom: none;
}

.submenu li a {
  border-radius: 8px;
  margin: 0 6px;
  padding: 10px 12px;
  transition: background-color 0.2s var(--aa-ease), color 0.2s var(--aa-ease), padding-left 0.2s var(--aa-ease);
}

.submenu li a:hover {
  background: var(--aa-surface-soft);
  color: var(--aa-green-deep);
  padding-left: 16px;
}

/* Login / Sign Up live in a flex row. The archive gave them no gap and the
   modern layer painted both as identical orange pills, so on inner pages the
   two buttons touched and read as a colour clash. Give the pair a real gap and
   split it into a ghost secondary + a single orange primary.
   The theme's `ul { margin-bottom: 16px }` is also cancelled here: it inflates the
   actions row inside `.headerRgt`, whose line then grows 16px taller than the buttons, so
   Login/Sign Up hang off the top of the bar while the logo sits centred. */
body .loginBtn {
  gap: 12px;
  margin-bottom: 0;
}

body .loginBtn li {
  height: auto;
  line-height: normal;
}

/* Base = secondary (ghost) pill. */
body .loginBtn li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: var(--aa-radius-pill);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 10px 22px;
  box-shadow: none;
  transition:
    background-color 0.2s var(--aa-ease),
    border-color 0.2s var(--aa-ease),
    transform 0.2s var(--aa-ease),
    box-shadow 0.25s var(--aa-ease);
}

body .loginBtn li a:hover {
  border-color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

/* Primary = the last action (Sign Up on inner pages, the lone Login on home). */
body .loginBtn li:last-child a {
  border-color: transparent;
  background: linear-gradient(135deg, var(--aa-orange) 0%, var(--aa-orange-2) 100%);
  box-shadow: 0 8px 20px rgba(242, 101, 34, 0.3);
}

body .loginBtn li:last-child a:hover {
  border-color: transparent;
  background: linear-gradient(135deg, var(--aa-orange) 0%, var(--aa-orange-2) 100%);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(242, 101, 34, 0.42);
}

/* Mobile slide-in menu: recovered black panel -> brand deep green, with the
   row rhythm of the modern layer's menus. */
@media only screen and (max-width: 1169px) {
  body .menuLink {
    background: var(--aa-green-deep);
    box-shadow: -24px 0 60px rgba(5, 20, 19, 0.45);
    padding-top: 84px;
  }

  body .menuLink > li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  }

  body .menuLink > li > a {
    padding: 16px 22px;
    font-size: 15.5px;
    color: rgba(255, 255, 255, 0.92);
  }

  /* The desktop underline would draw a stray bar on every drawer row. */
  body .menuLink > li > a::after {
    display: none;
  }

  body .menuLink > li > a.isCurrent {
    box-shadow: inset 3px 0 0 var(--aa-orange);
  }

  body .menuLink .submenu {
    background: rgba(0, 0, 0, 0.16);
    box-shadow: none;
    border-radius: 0;
  }

  body .menuLink .submenu li a {
    padding: 12px 30px;
    color: rgba(255, 255, 255, 0.72);
  }

  body .menuLink .submenu li a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
    padding-left: 34px;
  }

  body a.showMobMenu {
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }

  /* The archive anchors it to `top:0` of `.headerRgt`, so the burger hangs off the top of
     a bar whose content is centred. :not(.active) because the open drawer's close tab is
     the same element re-anchored to the bottom edge (`top:inherit`). */
  body #header a.showMobMenu:not(.active) {
    top: 50%;
    transform: translateY(-50%);
  }

  body a.showMobMenu.active {
    background: var(--aa-green-dark);
  }

  body .showSM {
    width: 30px;
    height: 30px;
    right: 16px;
    top: 12px;
    background: rgba(255, 255, 255, 0.14);
    border-radius: 50%;
  }

  body .showSM:before {
    left: 9px;
    top: 14px;
  }

  body .showSM:after {
    left: 14px;
    top: 9px;
  }
}

/* Phones: shrink the logo and the CTA so the bar never crowds the burger. The archived
   `.header .logo img` selector only matched the home page, so #header carries both bars. */
@media only screen and (max-width: 767px) {
  body #header .logo img {
    max-height: 38px;
  }

  body .loginBtn {
    gap: 8px;
  }

  body .loginBtn li a {
    font-size: 13px;
    padding: 8px 16px;
  }

  body #header > .container {
    min-height: 64px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

/* A 366px phone leaves the bar 326px of content and the inner-page header asks for 362px:
   logo 140 + Login/Sign Up 167 + the 55px slot the burger takes as an absolutely
   positioned child. Trim all three so the row stays on one line down to a 320px screen —
   the archived 15px margin-left on every link is the worst offender, since .loginBtn
   already spaces them with a gap. */
@media only screen and (max-width: 479px) {
  body #header > .container {
    min-height: 60px;
    padding-left: 12px;
    padding-right: 12px;
  }

  body #header .logo img {
    max-height: 34px;
    max-width: 118px;
  }

  body #header .headerRgt {
    padding-right: 46px; /* the burger is 40px wide here; the rest is the gap */
  }

  body .loginBtn {
    gap: 6px;
  }

  body .loginBtn li a {
    padding: 6px 11px;
    margin-left: 0;
    font-size: 12.5px;
  }
}

/* --------------------------------------------------------------------------
   WordPress / MasterStudy pages (67 routes: tags, categories, blog posts,
   the LMS course templates, lms-login/wishlist, enterprises, …)
   -------------------------------------------------------------------------- */

/* The theme prints its preloader class on <body>: styles.css locks
   .stm_preloader_1 to 100vh/overflow:hidden and paints a fixed white
   full-viewport curtain via ::after. The theme's own script removes it after
   load; that script is not in the archive, so these pages froze at one
   viewport behind a white veil. Unlock the body and cancel the curtain —
   scoped to the body instance, so any real preloader block keeps its styles. */
body.stm_preloader_1 {
  height: auto;
  overflow: visible;
}

body.stm_preloader_1::after,
body.stm_preloader_1::before {
  content: none !important;
}

/* -- Header (header_default.header_2) ------------------------------------- */

/* The theme's header was a white bar styled by a skin stylesheet that was
   never recovered; rebuild it in the brand: a slim deep-green strip carrying
   the nav menu over a main row of logo + account actions. Every rule carries
   #header because the theme's own selectors are several classes deep. */
body #header .header_default.header_2 {
  min-height: 0;
  padding: 0 !important; /* the theme pins padding-top: 5px !important */
  background: linear-gradient(180deg, #135551 0%, var(--aa-green-deep) 55%, var(--aa-green-dark) 100%);
  box-shadow: 0 12px 34px rgba(7, 26, 25, 0.22);
}

/* The theme's grey shadow strip under the bar. */
body #header .header_default.header_2::after {
  content: none;
}

/* The language chip ("English") — meaningless with one locale. */
body #header .stm_lms_wpml_switcher {
  display: none;
}

/* The theme stretches the header container to 1720px; keep it aligned with the
   widened body grid above so the nav lines up with content at every desktop
   width (same floor/curve/cap, so it tracks the page instead of drifting in). */
body #header .header_default.header_2 .container {
  max-width: clamp(1140px, calc(100vw - 128px), 1440px);
}

/* Top strip: the nav menu. */
body #header .header_2_top_bar {
  margin-bottom: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent;
}

body #header .header_2_top_bar__inner {
  min-height: 44px;
}

body #header .header_default.header_2 .header_main_menu_wrapper {
  margin-top: 0 !important; /* the archived markup pins style="margin-top:5px" */
}

body #header .header_default.header_2 .header-menu > li > a {
  position: relative;
  padding: 12px 15px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
}

/* Orange underline grows in on hover — the accent that reads on deep green. */
body #header .header_default.header_2 .header-menu > li > a::after {
  content: '';
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 6px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--aa-orange), var(--aa-orange-2));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--aa-dur) var(--aa-ease);
}

body #header .header_default.header_2 .header-menu > li:hover > a::after {
  transform: scaleX(1);
}

body #header .header_default.header_2 .header-menu > li:hover > a {
  color: #fff;
}

body #header .header_default.header_2 .header-menu > li > ul.sub-menu {
  width: 240px;
  margin: 8px 0 0;
  padding: 8px;
  border-radius: var(--aa-radius-md);
  box-shadow: var(--aa-shadow-2);
  overflow: hidden;
}

body #header .header_default.header_2 .header-menu > li > ul.sub-menu::before {
  content: none; /* the theme's yellow strip */
}

body #header .header_default.header_2 .header-menu ul.sub-menu li a {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  color: var(--aa-ink);
  font-size: 13.5px;
  font-weight: 500;
  transition:
    background-color 0.2s var(--aa-ease),
    color 0.2s var(--aa-ease),
    padding-left 0.2s var(--aa-ease);
}

body #header .header_default.header_2 .header-menu ul.sub-menu li a:hover {
  background: var(--aa-surface-soft);
  color: var(--aa-green-deep);
  padding-left: 18px;
}

/* Main row: logo + account actions. */
body #header .header_default.header_2 .header_top {
  padding: 10px 0;
}

body #header .header_default.header_2 .logo-unit img {
  display: block;
  width: auto !important; /* the archived markup pins width:253px inline */
  max-height: 48px;
}

/* The center-unit held a Vue autocomplete that never boots; the catalogue and
   the home hero own course search. */
body #header .header_default.header_2 .center-unit {
  display: none;
}

body #header .header_default.header_2 .right-unit {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 22px;
}

body #header .header_default.header_2 .right-unit > * {
  margin-left: 0 !important;
}

body #header .header_default.header_2 .stm_lms_log_in {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

body #header .header_default.header_2 .stm_lms_log_in:hover {
  color: #fff;
}

body #header .header_default.header_2 .stm_lms_log_in i {
  font-size: 16px;
}

body #header .header_default.header_2 .stm_lms_log_in span {
  display: inline; /* the theme hides the label at ≤1220 */
}

body #header .header_default.header_2 .right-unit a.btn.btn-default {
  border: 0;
  border-radius: var(--aa-radius-pill);
  padding: 12px 24px;
  background: linear-gradient(135deg, var(--aa-orange) 0%, var(--aa-orange-2) 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 20px rgba(242, 101, 34, 0.3);
  transition: transform 0.25s var(--aa-ease), box-shadow 0.25s var(--aa-ease);
}

body #header .header_default.header_2 .right-unit a.btn.btn-default:hover {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(242, 101, 34, 0.42);
}

body #header .header_default.header_2 .stm_lms_wishlist_button a {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

body #header .header_default.header_2 .stm_lms_wishlist_button a:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

body #header .header_default.header_2 .stm_lms_wishlist_button i {
  font-size: 17px;
}

/* Search / account / menu togglers — mobile only, styled as a matching row of
   rounded buttons; the hamburger bar is drawn in CSS (the theme's glyph came
   from the stmlms icon font). */
body #header .header_default.header_2 .stm_header_top_search,
body #header .header_default.header_2 .stm_header_top_toggler,
body #header .header_default.header_2 .stm_menu_toggler {
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s var(--aa-ease);
}

body #header .header_default.header_2 .stm_header_top_search:hover,
body #header .header_default.header_2 .stm_header_top_toggler:hover,
body #header .header_default.header_2 .stm_menu_toggler:hover {
  background-color: rgba(255, 255, 255, 0.22);
}

@media (min-width: 1170px) {
  body #header .header_default.header_2 .stm_header_top_search,
  body #header .header_default.header_2 .stm_header_top_toggler,
  body #header .header_default.header_2 .stm_menu_toggler {
    display: none;
  }
}

@media (max-width: 1169px) {
  /* One-row mobile bar: logo, then menu / search / account togglers. */
  body #header .header_2_top_bar {
    display: none;
  }

  body #header .header_default.header_2 .header_top {
    padding: 9px 0;
  }

  body #header .header_default.header_2 .logo-unit img {
    max-height: 40px;
  }

  body #header .header_default.header_2 .center-unit,
  body #header .header_default.header_2 .right-unit {
    display: none;
  }

  body #header .header_default.header_2 .stm_menu_toggler {
    display: inline-flex;
    margin-left: auto;
    margin-right: 0;
  }

  body #header .header_default.header_2 .stm_header_top_search {
    display: inline-flex;
    margin: 0 0 0 10px;
  }

  body #header .header_default.header_2 .stm_header_top_toggler {
    display: inline-flex;
    margin: 0 0 0 10px;
  }

  body #header .header_default.header_2 .stm_menu_toggler {
    background-image: linear-gradient(
      currentColor 0, currentColor 2px, transparent 2px, transparent 6px,
      currentColor 6px, currentColor 8px, transparent 8px, transparent 12px,
      currentColor 12px, currentColor 14px
    );
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 14px;
  }

  body #header .header_default.header_2 .stm_menu_toggler::before,
  body #header .header_default.header_2 .stm_menu_toggler::after {
    content: none !important;
  }
}

/* -- Header popups: account / search / menu -------------------------------- */

/* Without the theme's script these panels sat open in the flow, stacking under
   the header. Closed by default; the togglers in main.jsx flip .active (one
   panel at a time, outside click closes). */
body #header .stm_lms_account_popup,
body #header .stm_lms_search_popup,
body #header .stm_lms_menu_popup {
  display: none;
  position: absolute;
  top: 100%;
  z-index: 980;
  margin-top: 6px;
}

body #header .stm_lms_account_popup.active,
body #header .stm_lms_search_popup.active,
body #header .stm_lms_menu_popup.active {
  display: block;
  animation: aaWpPanel 0.28s var(--aa-ease);
}

@keyframes aaWpPanel {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body #header .stm_lms_account_popup__close,
body #header .stm_lms_search_popup__close,
body #header .stm_lms_menu_popup__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--aa-surface-soft);
  color: var(--aa-ink-soft);
  font-size: 15px;
  cursor: pointer;
  transition: background-color 0.2s var(--aa-ease), color 0.2s var(--aa-ease);
}

body #header .stm_lms_account_popup__close:hover,
body #header .stm_lms_search_popup__close:hover {
  background: var(--aa-green-deep);
  color: #fff;
}

/* Account panel */
body #header .stm_lms_account_popup {
  left: auto;
  right: 12px;
  width: min(340px, calc(100% - 24px));
  padding: 16px;
  border-radius: var(--aa-radius-lg);
  background: var(--aa-surface);
  box-shadow: var(--aa-shadow-3);
}

body #header .stm_lms_account_popup__login {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 12px;
  padding: 16px;
  border-radius: var(--aa-radius-md);
  background: linear-gradient(135deg, var(--aa-green-deep), var(--aa-green-dark));
  color: #fff;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(7, 26, 25, 0.24);
  transition: transform 0.25s var(--aa-ease), box-shadow 0.25s var(--aa-ease);
}

body #header .stm_lms_account_popup__login:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(7, 26, 25, 0.3);
}

body #header .stm_lms_account_popup__login i {
  font-size: 22px;
}

body #header .stm_lms_account_popup__login h3 {
  margin: 0;
  color: #fff;
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: 0;
}

body #header .stm_lms_account_popup__list {
  display: flex;
  flex-direction: column;
}

body #header .stm_lms_account_popup__list_single {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 10px;
  color: var(--aa-ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

body #header .stm_lms_account_popup__list_single:hover {
  background: var(--aa-surface-soft);
  color: var(--aa-green-deep);
}

body #header .stm_lms_account_popup__list_single span {
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: var(--aa-radius-pill);
  background: var(--aa-green-deep);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
}

/* Search panel */
body #header .stm_lms_search_popup {
  left: 12px;
  right: 12px;
  padding: 20px;
  border-radius: var(--aa-radius-lg);
  background: var(--aa-surface);
  box-shadow: var(--aa-shadow-3);
}

body #header .stm_lms_search_popup .inner {
  padding-right: 34px;
}

body #header .stm_lms_search_popup h2 {
  margin: 0 0 14px;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: 0;
}

/* The popup reuses the header_top / stm_courses_search classes, so the theme's
   flex row applies here too; a column keeps the box full-width with the
   category chips under it (DOM order is chips-first, order: -1 flips them).
   The theme also hides the form until its Vue app boots; it is static now. */
body #header .stm_lms_search_popup .stm_courses_search {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding-right: 0;
}

body #header .stm_lms_search_popup .stm_lms_courses_search {
  display: block;
  order: -1;
  width: 100%;
  flex-grow: 0;
}

body #header .aaWpSearchForm {
  position: relative;
}

body #header .aaWpSearchInput {
  width: 100%;
  height: 52px;
  padding: 0 58px 0 18px;
  border: 1px solid var(--aa-line);
  border-radius: var(--aa-radius-md);
  background: var(--aa-surface-soft);
  color: var(--aa-ink);
  font-family: var(--aa-font);
  font-size: 15px;
  outline: none;
  transition:
    border-color 0.2s var(--aa-ease),
    box-shadow 0.2s var(--aa-ease),
    background-color 0.2s var(--aa-ease);
}

body #header .aaWpSearchInput:focus {
  border-color: var(--aa-orange);
  background: #fff;
  box-shadow: var(--aa-ring);
}

body #header .aaWpSearchBtn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--aa-orange), var(--aa-orange-2));
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.2s var(--aa-ease), box-shadow 0.2s var(--aa-ease);
}

body #header .aaWpSearchBtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(242, 101, 34, 0.35);
}

/* The popup's category tree, laid flat as chips. */
body #header .stm_lms_search_popup .stm_lms_categories {
  display: block;
  width: 100%;
  margin: 16px 0 0;
  text-transform: none;
  font-size: inherit;
}

body #header .stm_lms_search_popup .stm_lms_categories > i,
body #header .stm_lms_search_popup .stm_lms_categories > span {
  display: none; /* "Category" label + burger: the chips read for themselves */
}

body #header .stm_lms_search_popup .stm_lms_categories_dropdown {
  position: static;
  visibility: visible;
  opacity: 1;
  margin: 0;
}

body #header .stm_lms_search_popup .stm_lms_categories_dropdown::before {
  content: none;
}

body #header .stm_lms_search_popup .stm_lms_categories_dropdown__parents {
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  background: none;
  box-shadow: none;
}

body #header .stm_lms_search_popup .stm_lms_categories_dropdown__parent a {
  display: inline-block;
  padding: 9px 14px;
  border-radius: var(--aa-radius-pill);
  background: var(--aa-surface-soft);
  color: var(--aa-ink);
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  text-decoration: none;
  transition: background-color 0.2s var(--aa-ease), color 0.2s var(--aa-ease);
}

body #header .stm_lms_search_popup .stm_lms_categories_dropdown__parent a:hover {
  background: var(--aa-green-deep);
  color: #fff !important;
}

/* Menu panel — the mobile drawer, in the brand's deep green. */
body #header .stm_lms_menu_popup {
  left: 12px;
  right: 12px;
  padding: 18px 16px 14px;
  border-radius: var(--aa-radius-lg);
  background: linear-gradient(180deg, var(--aa-green-deep), var(--aa-green-dark));
  box-shadow: var(--aa-shadow-3);
  color: #fff;
}

body #header .stm_lms_menu_popup__close {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

body #header .stm_lms_menu_popup__close:hover {
  background: rgba(255, 255, 255, 0.24);
}

body #header .stm_lms_menu_popup .inner h2 {
  margin: 0 0 10px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* The popup carries its own copy of the toggler — the bar's is the trigger.
   (The extra classes are for the mobile toggler rule that would otherwise win.) */
body #header .header_default.header_2 .stm_lms_menu_popup .stm_menu_toggler {
  display: none;
}

body #header .stm_lms_menu_popup .header_main_menu_wrapper {
  margin-top: 0 !important;
}

body #header .stm_lms_menu_popup .collapse.navbar-collapse {
  float: none;
  display: block;
}

body #header .stm_lms_menu_popup .header-menu {
  margin: 0;
}

body #header .stm_lms_menu_popup .header-menu > li {
  float: none;
  padding: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body #header .stm_lms_menu_popup .header-menu > li:last-child {
  border-bottom: 0;
}

body #header .stm_lms_menu_popup .header-menu > li > a {
  display: block;
  padding: 15px 4px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 15.5px;
  font-weight: 500;
}

body #header .stm_lms_menu_popup .header-menu > li > a::after {
  content: none;
}

body #header .stm_lms_menu_popup .header-menu > li:hover > a {
  color: #fff;
}

body #header .stm_lms_menu_popup .sub-menu {
  position: static;
  visibility: visible;
  opacity: 1;
  width: auto;
  margin: 0 0 12px;
  padding: 4px 0;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
  box-shadow: none;
}

body #header .stm_lms_menu_popup .sub-menu::before {
  content: none;
}

body #header .stm_lms_menu_popup .sub-menu li {
  margin-bottom: 0;
}

body #header .stm_lms_menu_popup .sub-menu li a {
  padding: 10px 18px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 14px;
  font-weight: 400;
}

body #header .stm_lms_menu_popup .sub-menu li a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
  padding-left: 22px;
}

/* Breadcrumb strip under the header. */
body .stm_lms_breadcrumbs__header_2 .stm_breadcrumbs_unit {
  padding: 10px 0;
  background: var(--aa-surface);
  border-top: 0;
  border-bottom: 1px solid var(--aa-line);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

a.applyBtn,
a.enrollbtn,
a.viewBtn,
.formBtn,
.programBox .lft .links a.btn {
  transition:
    transform 0.25s var(--aa-ease),
    box-shadow 0.25s var(--aa-ease),
    background-color 0.25s var(--aa-ease),
    color 0.25s var(--aa-ease),
    border-color 0.25s var(--aa-ease);
}

a.applyBtn {
  box-shadow: 0 6px 18px rgba(7, 26, 25, 0.18);
}

a.applyBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(7, 26, 25, 0.26);
}

/* Checkout / enquiry submit (Apply, contact, enquiry popups). */
.formBtn {
  border-radius: var(--aa-radius-sm);
  letter-spacing: 0.02em;
  box-shadow: 0 6px 16px rgba(242, 101, 34, 0.24);
}

.formBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(47, 190, 91, 0.26);
}

.formBtn:active {
  transform: translateY(0) scale(0.99);
}

a.enrollbtn {
  background: linear-gradient(135deg, var(--aa-orange-2), var(--aa-orange));
  letter-spacing: 0.02em;
  box-shadow: 0 6px 16px rgba(242, 101, 34, 0.28);
}

a.enrollbtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(47, 190, 91, 0.3);
}

a.viewBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(57, 158, 29, 0.22);
}

a.applyBtn:active,
a.enrollbtn:active,
a.viewBtn:active {
  transform: translateY(0) scale(0.985);
}

/* --------------------------------------------------------------------------
   Cards & shells
   -------------------------------------------------------------------------- */

.productBox,
.productSlider .item .productBox {
  border-radius: var(--aa-radius-md);
  box-shadow: var(--aa-shadow-1);
  transition: transform var(--aa-dur) var(--aa-ease), box-shadow var(--aa-dur) var(--aa-ease);
}

.productBox:hover,
.productSlider .item .productBox:hover {
  transform: translateY(-4px);
  box-shadow: var(--aa-shadow-2);
}

.blogList li > div {
  border-radius: var(--aa-radius-md);
  box-shadow: var(--aa-shadow-1);
  transition: transform var(--aa-dur) var(--aa-ease), box-shadow var(--aa-dur) var(--aa-ease);
}

.blogList li:hover > div {
  transform: translateY(-4px);
  box-shadow: var(--aa-shadow-2);
}

.programBox {
  border-radius: var(--aa-radius-md);
  overflow: hidden;
  box-shadow: var(--aa-shadow-1);
}

.keyBox {
  border-radius: var(--aa-radius-md);
  box-shadow: var(--aa-shadow-1);
}

.whyList li > div {
  border-radius: var(--aa-radius-md);
  box-shadow: var(--aa-shadow-1);
  transition: transform var(--aa-dur) var(--aa-ease), box-shadow var(--aa-dur) var(--aa-ease);
}

.whyList li > div:hover {
  transform: translateY(-3px);
  box-shadow: var(--aa-shadow-2);
}

.popupBox {
  border-radius: var(--aa-radius-lg);
  box-shadow: var(--aa-shadow-3);
}

.overlay {
  background: rgba(9, 20, 19, 0.72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* Soften the flat grey section background. The element qualifier is needed
   because legacy pages re-append stylesheet.css at runtime, which would win
   the equal-specificity tie on .grayBg alone. */
section.grayBg {
  background: var(--aa-surface-soft);
}

/* Fluid section headings (base weight up from 500, tracking tightened). */
.mainHd {
  font-size: clamp(21px, 2.2vw + 8px, 30px);
  font-weight: 600;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.aluminiHd {
  font-size: clamp(24px, 2.4vw + 8px, 34px);
  font-weight: 600;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   Sliders (all slick carousels use .sliderArrow)
   -------------------------------------------------------------------------- */

.sliderArrow .slick-arrow {
  width: 42px;
  height: 42px;
  margin-top: -21px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--aa-line);
  box-shadow: var(--aa-shadow-1);
  transition:
    background-color 0.22s var(--aa-ease),
    border-color 0.22s var(--aa-ease),
    box-shadow 0.22s var(--aa-ease);
}

.sliderArrow .slick-arrow::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--aa-green-deep);
  border-right: 2px solid var(--aa-green-deep);
  transform: translate(-60%, -50%) rotate(45deg);
  transition: border-color 0.22s var(--aa-ease);
}

.sliderArrow .slick-arrow.slick-prev::before {
  transform: translate(-40%, -50%) rotate(-135deg);
}

.sliderArrow .slick-arrow:hover {
  background: var(--aa-green-deep);
  border-color: var(--aa-green-deep);
  box-shadow: var(--aa-shadow-2);
}

.sliderArrow .slick-arrow:hover::before {
  border-color: #fff;
}

.sliderArrow .slick-arrow.slick-disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* The recovered width:100% on these dots overflows the slider box at odd
   viewports (e.g. 540px dots inside a 482px content box at 572px width). */
.clientSlider .slick-dots {
  width: auto;
  max-width: 100%;
}

/* expSlider centers its two arrows under the slides; widen the gap for the
   42px buttons (the recovered -42px margin is sized for 38px). */
.expSlider.sliderArrow .slick-arrow.slick-prev {
  margin-left: -46px;
}

.expSlider.sliderArrow .slick-arrow.slick-next {
  margin-right: -46px;
}

/* --------------------------------------------------------------------------
   Legacy rails as scroll rows (legacySliders.js)

   A multi-item carousel on the archived pages is now a plain flex row the
   browser scrolls, instead of slick cloning slides and measuring every one of
   them against this huge document. Per card the width comes from the page's
   own slidesToShow (plus its responsive breakpoints) as --aa-per-view, so the
   row looks like the slider it replaces without a single JS measurement.
   -------------------------------------------------------------------------- */

.aa-rail {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.aa-rail--one {
  scroll-snap-type: x mandatory;
}

.aa-rail::-webkit-scrollbar {
  display: none;
}

.aa-rail > * {
  flex: 0 0 calc(100% / var(--aa-per-view, 1));
  max-width: calc(100% / var(--aa-per-view, 1));
  scroll-snap-align: start;
}

/* A section with three cards or fewer shows all of them: a grid with as many columns as
   fit at the JS card floor, so a phone stacks them and a desktop keeps the three across
   the archived slider had. No scroll container, so no arrows, dots or gutter. */
.aa-fitRow {
  display: grid;
  grid-template-columns: repeat(var(--aa-cols, 1), minmax(0, 1fr));
  align-items: stretch;
}

.aa-fitRow > * {
  width: auto;
  max-width: none;
}

/* The archived 35px gutter exists to park slick's arrows in. */
.aa-fitRow.sliderArrow {
  padding-left: 0;
  padding-right: 0;
}

.aa-railWrap {
  position: relative;
}

/* Rails the archived CSS did not already indent for its own arrows. */
.aa-railWrap--gutter {
  padding: 0 48px;
}

.aa-rail-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--aa-line);
  background: #fff;
  box-shadow: var(--aa-shadow-1);
  cursor: pointer;
  transition:
    background-color 0.22s var(--aa-ease),
    border-color 0.22s var(--aa-ease),
    box-shadow 0.22s var(--aa-ease);
}

.aa-rail-arrow--prev {
  left: 2px;
}

.aa-rail-arrow--next {
  right: 2px;
}

.aa-rail-arrow::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--aa-green-deep);
  border-right: 2px solid var(--aa-green-deep);
  transform: translate(-60%, -50%) rotate(45deg);
  transition: border-color 0.22s var(--aa-ease);
}

.aa-rail-arrow--prev::before {
  transform: translate(-40%, -50%) rotate(-135deg);
}

.aa-rail-arrow:hover {
  background: var(--aa-green-deep);
  border-color: var(--aa-green-deep);
  box-shadow: var(--aa-shadow-2);
}

.aa-rail-arrow:hover::before {
  border-color: #fff;
}

.aa-rail-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 20px;
}

.aa-rail-dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--aa-line);
  cursor: pointer;
  transition:
    background-color 0.22s var(--aa-ease),
    width 0.22s var(--aa-ease);
}

.aa-rail-dots button.is-active {
  width: 22px;
  background: var(--aa-green-deep);
}

/* The rails that sit on a dark band or in a course page keep the dot and arrow
   treatment their slick version had, which these rules used to reach through
   slick's own markup (.aa-railWrap:has(...) finds the controls, which are
   siblings of the rail rather than inside it). */
.testimonialCon .aa-railWrap:has(> .clientSlider) .aa-rail-dots button {
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.35);
}

.testimonialCon .aa-railWrap:has(> .clientSlider) .aa-rail-dots button:hover,
.testimonialCon .aa-railWrap:has(> .clientSlider) .aa-rail-dots button.is-active {
  width: 26px;
  background: #fff;
}

#root:has(.cdBanner) .testimonialsSlider.aa-rail > * {
  padding: 4px;
}

#root:has(.cdBanner) .aa-railWrap:has(> .testimonialsSlider) .aa-rail-arrow {
  top: clamp(70px, 38%, 42%);
  transform: none;
  left: auto;
  right: auto;
}

#root:has(.cdBanner) .aa-railWrap:has(> .testimonialsSlider) .aa-rail-arrow--prev {
  left: -6px;
}

#root:has(.cdBanner) .aa-railWrap:has(> .testimonialsSlider) .aa-rail-arrow--next {
  right: -6px;
}

#root:has(.cdBanner) .aa-railWrap:has(> .testimonialsSlider) .aa-rail-dots button {
  background: rgba(35, 42, 51, 0.18);
}

#root:has(.cdBanner) .aa-railWrap:has(> .testimonialsSlider) .aa-rail-dots button.is-active {
  width: 24px;
  background: var(--aa-orange);
}

@media only screen and (max-width: 767px) {
  .aa-rail-arrow {
    width: 34px;
    height: 34px;
  }
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

/* select2-only tuning: heights are left to the recovered layouts. */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border-color: var(--aa-line);
  border-radius: var(--aa-radius-sm);
  transition: border-color 0.2s var(--aa-ease), box-shadow 0.2s var(--aa-ease);
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--multiple {
  border-color: var(--aa-orange);
  box-shadow: var(--aa-ring);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
}

.select2-dropdown {
  border-color: var(--aa-line);
  border-radius: var(--aa-radius-sm);
  box-shadow: var(--aa-shadow-2);
  overflow: hidden;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--aa-green-deep);
}

/* --------------------------------------------------------------------------
   Home page (workstream #29)
   -------------------------------------------------------------------------- */

/* Section header rows (heading + View All) align on one baseline. */
.flexBox.spacebetween:has(> .mainHd) {
  align-items: center;
  margin-bottom: 6px;
}

/* Hero: the recovered EV artwork stays as the poster/fallback frame, the
   client's bootcamp explainer plays muted behind it (heroVideo.js), and the
   scrim moved to ::after so it dims the video as well. The content sits as a
   compact bottom-centre stack so the video stays the protagonist. */
.bannerCon {
  position: relative;
  overflow: hidden;
  background: url(/Images/banner_bg.jpg) no-repeat center top / cover;
  min-height: 100vh;
  min-height: 100svh;
}

/* .itemCenter put the block mid-frame; anchor it to the bottom edge instead. */
.bannerCon.flexBox.itemCenter {
  align-items: flex-end;
  padding-bottom: clamp(24px, 5vh, 56px);
}

.heroVideoWrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  /* The embed must never swallow the hero's scroll or tap gestures. */
  pointer-events: none;
}

.heroVideoWrap.isFailed {
  display: none;
}

/* Cover-fit at any aspect ratio: the 16:9 iframe is scaled until both axes
   reach the hero box. */
.heroVideoWrap iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 177.78vh);
  height: max(100%, 56.25vw);
  transform: translate(-50%, -50%);
  border: 0;
  /* Gentle grade so the raw feed reads richer against the brand palette. */
  filter: saturate(1.12) contrast(1.05) brightness(1.04);
}

.bannerCon::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Top strip keeps the glass header readable; the middle stays almost clear
     so the video shows; the bottom carries the compact content stack. */
  background: linear-gradient(
    180deg,
    rgba(6, 18, 16, 0.42) 0%,
    rgba(6, 18, 16, 0.12) 16%,
    rgba(6, 18, 16, 0) 32%,
    rgba(6, 18, 16, 0) 54%,
    rgba(6, 18, 16, 0.5) 78%,
    rgba(6, 18, 16, 0.88) 100%
  );
}

.bannerCon > .container {
  position: relative;
  z-index: 2;
  /* The hero's spacing comes from .bannerCon itself; drop the recovered
     inline block's 30px bottom padding so the stack sits at the edge. */
  padding-bottom: 0;
  /* The recovered `.container { margin: auto }` centers the box as a flex
     item (auto margins beat align-items); pin the bottom margin instead. */
  margin-top: auto;
  margin-bottom: 0;
}

/* Sound toggle for the hero video: starts muted, so the label always names
   the action a click performs. Unfolds on hover on pointer devices, matching
   the WhatsApp FAB. Sits just below the glass header now that the hero content
   holds the bottom edge. */
.heroSound {
  position: absolute;
  top: 108px;
  right: 26px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  height: 50px;
  padding: 0;
  border-radius: var(--aa-radius-pill);
  background: rgba(9, 26, 24, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background-color 0.22s var(--aa-ease), border-color 0.22s var(--aa-ease), box-shadow 0.22s var(--aa-ease);
}

.heroSound:hover,
.heroSound:focus-visible {
  background: var(--aa-green-deep);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 12px 26px rgba(7, 26, 25, 0.38);
}

.heroSound .heroSoundIcon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  flex: none;
}

.heroSound .heroSoundIcon svg {
  width: 22px;
  height: 22px;
  display: block;
}

.heroSound .isOnIcon {
  display: none;
}

.heroSound.isOn .offIcon {
  display: none;
}

.heroSound.isOn .isOnIcon {
  display: grid;
}

.heroSound .heroSoundLabel {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--aa-font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: max-width 0.32s var(--aa-ease), padding 0.32s var(--aa-ease);
}

@media (hover: hover) and (pointer: fine) {
  .heroSound:hover .heroSoundLabel,
  .heroSound:focus-visible .heroSoundLabel {
    max-width: 160px;
    padding-right: 20px;
  }
}

/* Phone: compact control pinned under the header at the right edge — the
   bottom edge is now the content stack and the bottom-right corner is the
   WhatsApp FAB. */
@media only screen and (max-width: 767px) {
  .heroSound {
    top: 86px;
    right: 14px;
    height: 44px;
  }

  .heroSound .heroSoundIcon {
    width: 44px;
    height: 44px;
  }

  .heroSound .heroSoundIcon svg {
    width: 20px;
    height: 20px;
  }
}

/* The hero block is a compact, centred stack at the bottom edge — a tiny
   version of the recovered layout, so the video stays visible above it. */
.bannerCon .bannerInfo {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.bannerHd {
  font-size: clamp(21px, 1.7vw + 8px, 34px);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.015em;
  padding-bottom: 10px;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
}

/* The hero paragraph carries an inline ".body" rule; beat it via specificity. */
.bannerCon .bannerInfo .body {
  font-size: clamp(13.5px, 0.4vw + 10px, 15.5px);
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
  max-width: 620px;
  margin: 0 auto 18px;
}

.searchBox {
  max-width: 520px;
  margin: 0 auto;
  height: 62px;
  /* The recovered box reserves 15/80px insets; re-inset for the compact bar
     (62 wide on the right = 9px gap + 44px button + 9px gap). */
  padding: 6px 62px 6px 6px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 18px 40px rgba(4, 18, 17, 0.35);
  transition: border-color 0.22s var(--aa-ease), box-shadow 0.22s var(--aa-ease);
}

.searchBox:focus-within {
  border-color: var(--aa-orange);
  box-shadow: 0 18px 40px rgba(4, 18, 17, 0.35), var(--aa-ring);
}

.searchInput {
  height: 100%;
  font-size: 15.5px;
  padding: 0 10px 0 12px;
}

.searchBtn {
  width: 44px;
  right: 9px;
  top: 9px;
  bottom: 9px;
  border-radius: 9px;
  box-shadow: 0 8px 18px rgba(242, 101, 34, 0.35);
  transition: background-color 0.22s var(--aa-ease), box-shadow 0.22s var(--aa-ease);
}

.searchBtn:hover {
  box-shadow: 0 10px 22px rgba(112, 182, 68, 0.4);
}

.supportBox {
  margin-top: 16px;
}

/* The recovered strip was a 50/50 split bar; compact it into a centred row. */
.bannerCon .supportBox {
  justify-content: center;
  gap: clamp(16px, 3vw, 40px);
}

.bannerCon .supportBox .lft {
  width: auto;
  border-right: 1px solid rgba(255, 255, 255, 0.35);
  font-size: 12.5px;
  line-height: 20px;
  padding-right: 0;
}

.bannerCon .supportBox .rgt {
  color: rgba(255, 255, 255, 0.85);
  font-size: 12.5px;
  line-height: 20px;
}

.bannerCon .supportBox .rgt span {
  font-size: 13px;
  font-weight: 600;
}

/* The phone link carries an inline font-size; beat it for the compact strip. */
.bannerCon .supportBox .rgt a {
  font-size: 13px !important;
  line-height: 20px;
}

/* Instant search results (heroSearch.js). The panel opens upward: the box sits
   at the hero's bottom edge, so there is no room below it. */
.heroSearchPanel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 12px);
  z-index: 40;
  display: none;
  padding: 8px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 26px 60px rgba(4, 18, 17, 0.45);
  max-height: min(46vh, 380px);
  overflow: auto;
  text-align: left;
}

.heroSearchPanel.isOpen {
  display: block;
}

.heroResult {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 12px;
}

.heroResult + .heroResult {
  border-top: 1px solid var(--aa-line);
}

.heroResult.isActive,
.heroResult:hover {
  background: var(--aa-surface-soft);
}

.heroResultMain {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
  color: inherit;
}

.heroResultImg {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 10px;
  object-fit: cover;
  background: var(--aa-surface-soft);
  border: 1px solid var(--aa-line);
}

.heroResultTxt {
  min-width: 0;
  flex: 1 1 auto;
}

.heroResultName {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--aa-ink);
}

.heroResultMeta {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--aa-ink-mute, #6b7682);
}

.heroResultPrice {
  flex: none;
  font-size: 14px;
  font-weight: 700;
  color: var(--aa-green-deep);
  white-space: nowrap;
}

.heroResultApply {
  flex: none;
  padding: 9px 14px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--aa-orange) 0%, var(--aa-orange-2) 100%);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: box-shadow 0.2s var(--aa-ease), transform 0.2s var(--aa-ease);
}

.heroResultApply:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(242, 101, 34, 0.35);
}

.heroSearchEmpty {
  padding: 14px 12px;
  font-size: 13.5px;
  color: var(--aa-ink-soft, #4b545e);
}

/* Trusted-by logo wall: recovered white 54px-border boxes -> quiet logo chips. */
.partnerHd {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--aa-ink-mute);
  padding-bottom: 26px;
}

/* The chip look lives in the page itself (inline style), so out-specify it. */
section.partnerCon ul.cpartner li > div {
  border: 1px solid var(--aa-line);
  background: #fff;
  border-radius: var(--aa-radius-md);
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  transition: box-shadow 0.25s var(--aa-ease), border-color 0.25s var(--aa-ease);
}

section.partnerCon ul.cpartner li > div:hover {
  box-shadow: var(--aa-shadow-1);
  border-color: #d3ddd6;
}

section.partnerCon ul.cpartner li > div img {
  max-height: 68px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.72;
  transition: filter 0.25s var(--aa-ease), opacity 0.25s var(--aa-ease);
}

section.partnerCon ul.cpartner li > div:hover img {
  filter: grayscale(0);
  opacity: 1;
}

/* Job Oriented colour cards: same lift language as the product cards. */
.joBox {
  border-radius: 16px;
  box-shadow: var(--aa-shadow-1);
  transition: transform var(--aa-dur) var(--aa-ease), box-shadow var(--aa-dur) var(--aa-ease);
}

.joBox:hover {
  transform: translateY(-4px);
  box-shadow: var(--aa-shadow-2);
}

.joBox .top .lft img {
  box-shadow: var(--aa-shadow-1);
}

/* Experience block. */
.expHd {
  font-size: clamp(26px, 3vw + 6px, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.expHd span {
  font-size: clamp(16px, 1.4vw + 6px, 22px);
  font-weight: 500;
}

.expSlider .item .lft {
  border-right-color: var(--aa-line);
}

.expSlider .item .text {
  color: var(--aa-ink-soft);
}

.expBtns a {
  box-shadow: var(--aa-shadow-1);
  transition:
    transform 0.25s var(--aa-ease),
    box-shadow 0.25s var(--aa-ease),
    background-color 0.25s var(--aa-ease),
    color 0.25s var(--aa-ease);
}

.expBtns a:first-child {
  background: linear-gradient(135deg, var(--aa-orange-2), var(--aa-orange));
  color: #fff;
  box-shadow: 0 10px 22px rgba(242, 101, 34, 0.3);
}

.expBtns a:first-child:hover {
  background: linear-gradient(135deg, #e2571a, #e57f1c);
  color: #fff;
  transform: translateY(-2px);
}

.expBtns a:last-child {
  border: 1px solid var(--aa-line);
  color: var(--aa-green-deep);
}

.expBtns a:last-child:hover {
  background: var(--aa-green-deep);
  border-color: var(--aa-green-deep);
  color: #fff;
  transform: translateY(-2px);
}

/* Recent placements. */
.aluminiList li > div {
  background: #fff;
  border: 1px solid var(--aa-line);
  border-radius: 16px;
  box-shadow: var(--aa-shadow-1);
  transition: transform var(--aa-dur) var(--aa-ease), box-shadow var(--aa-dur) var(--aa-ease);
}

.aluminiList li > div:hover {
  transform: translateY(-3px);
  box-shadow: var(--aa-shadow-2);
}

.aluminiList li .img img {
  box-shadow: 0 0 0 3px rgba(112, 182, 68, 0.25);
}

.aluminiList li .name {
  font-size: 22px;
  font-weight: 600;
}

.aluminiList li .name span {
  font-size: 13px;
  color: var(--aa-ink-mute);
}

.aluminiList li .bot {
  border-top: 1px solid var(--aa-line);
  color: var(--aa-ink-soft);
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Recent projects. */
.projectTypeCon {
  background: var(--aa-surface-soft);
}

.projectSlider:after {
  background: linear-gradient(
    to right,
    rgba(246, 248, 249, 0.17) 0%,
    rgba(246, 248, 249, 0.71) 28%,
    rgba(246, 248, 249, 0.71) 29%,
    rgba(246, 248, 249, 1) 100%
  );
}

.projectBox {
  min-height: 320px;
  border-radius: 16px;
  border-bottom: 5px solid #69b946;
  box-shadow: var(--aa-shadow-1);
  transition: transform var(--aa-dur) var(--aa-ease), box-shadow var(--aa-dur) var(--aa-ease);
}

.projectBox:hover {
  transform: translateY(-4px);
  box-shadow: var(--aa-shadow-2);
}

.projectBox .img img {
  border-radius: 14px;
  box-shadow: var(--aa-shadow-2);
}

.projectBox .det .hd {
  font-size: clamp(18px, 1.4vw + 10px, 25px);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.projectBox .det .by {
  font-weight: 600;
}

.projectBox .det .on {
  color: var(--aa-ink-mute);
}

/* Testimonials: pale-blue band -> deep brand-green band with floating cards.
   The card paddings/tails are inline page styles, hence the descendant
   selectors (class+class beats class). */
.testimonialCon {
  background: linear-gradient(160deg, #0e3f3c 0%, #114a47 55%, #0f4a41 100%);
}

.testimonialCon .aluminiHd {
  color: #fff;
}

.testimonialCon .tuTextBox,
.testimonialCon .tmTextBox,
.testimonialCon .txTextBox,
.testimonialCon .taTextBox {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(4, 18, 17, 0.35), 0 2px 6px rgba(4, 18, 17, 0.2);
  padding: clamp(26px, 3.4vw, 44px);
  color: #4a5560;
  line-height: 1.7;
  min-height: 300px;
}

.testimonialCon .tuTextBox::before,
.testimonialCon .tmTextBox::before,
.testimonialCon .txTextBox::before,
.testimonialCon .taTextBox::before {
  content: '\201C';
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 54px;
  line-height: 0.6;
  color: var(--aa-orange);
  margin-bottom: 16px;
}

.testimonialCon .clientDet img {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35), 0 10px 24px rgba(0, 0, 0, 0.28);
}

.testimonialCon .clientDet .name {
  color: rgba(255, 255, 255, 0.65);
}

.testimonialCon .clientDet .name span {
  color: #fff;
}

.testimonialCon .clientSlider .slick-dots li button {
  background: rgba(255, 255, 255, 0.35);
  width: 10px;
  height: 10px;
  transition: background-color 0.25s var(--aa-ease), width 0.25s var(--aa-ease);
}

.testimonialCon .clientSlider .slick-dots li button:hover,
.testimonialCon .clientSlider .slick-dots li.slick-active button {
  background: #fff;
  width: 26px;
  border-radius: 100px;
}

@media only screen and (max-width: 767px) {
  .testimonialCon .tuTextBox,
  .testimonialCon .tmTextBox,
  .testimonialCon .txTextBox,
  .testimonialCon .taTextBox {
    min-height: 0;
  }

  section.partnerCon ul.cpartner li > div {
    min-height: 74px;
    padding: 8px 10px;
  }

  section.partnerCon ul.cpartner li > div img {
    max-height: 48px;
  }
}

@media only screen and (max-width: 479px) {
  .bannerCon {
    background-position: 62% top;
  }

  .bannerHd {
    font-size: 20px;
    padding-bottom: 8px;
  }

  .bannerCon .bannerInfo .body {
    font-size: 13px;
    margin-bottom: 14px;
  }

  .searchBox {
    height: 52px;
    padding: 4px 52px 4px 4px;
    border-radius: 12px;
  }

  .searchInput {
    font-size: 14px;
    padding: 0 8px 0 10px;
  }

  .searchBtn {
    width: 38px;
    right: 7px;
    top: 7px;
    bottom: 7px;
    border-radius: 8px;
  }

  .bannerCon .supportBox {
    margin-top: 13px;
    gap: 14px;
  }

  .bannerCon .supportBox .lft,
  .bannerCon .supportBox .rgt,
  .bannerCon .supportBox .rgt a {
    font-size: 11.5px !important;
    line-height: 17px;
  }

  .heroSearchPanel {
    max-height: 42vh;
    padding: 6px;
  }

  .heroResult {
    padding: 8px;
    gap: 9px;
  }

  .heroResultImg {
    width: 40px;
    height: 40px;
  }

  .heroResultName {
    font-size: 13px;
  }

  .heroResultApply {
    padding: 8px 11px;
    font-size: 11.5px;
  }

  .heroResultPrice {
    font-size: 13px;
  }
}

/* Experience Autobot band: keep the dot texture over a soft green gradient. */
.expAutobot {
  background:
    url(/Images/dot_bg.jpg) no-repeat right center,
    linear-gradient(120deg, #5da838 0%, #70b644 45%, #7ec24e 100%);
}

.expInner .left .hd {
  font-size: clamp(26px, 2.6vw + 6px, 34px);
  letter-spacing: -0.015em;
}

.expInner .left .text {
  font-size: clamp(17px, 1.2vw + 8px, 23px);
  opacity: 0.95;
}

.expInner .left a.btn {
  color: var(--aa-green-deep);
  box-shadow: 0 10px 24px rgba(7, 26, 25, 0.22);
  transition:
    transform 0.25s var(--aa-ease),
    box-shadow 0.25s var(--aa-ease),
    background-color 0.25s var(--aa-ease),
    color 0.25s var(--aa-ease);
}

.expInner .left a.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(7, 26, 25, 0.3);
}

/* --------------------------------------------------------------------------
   Catalog + category listing pages (workstream #30)
   /courses, /online-courses, /job-oriented-courses,
   /industry-certification-courses, /blended-courses and /CourseList/Index
   share one recovered layout: .listingBanner tile strip, .listingTopCon
   title/search band, .listingLft filters and .listingRgt (sort row + the
   #dvCourses grid that hydrateCourses fills). The pages re-append their own
   stylesheets at runtime, so every selector here sits one class deeper than
   the recovered one; where the page carries inline styles, an !important is
   used instead.
   -------------------------------------------------------------------------- */

/* Page canvas: the recovered flat #f7f7fa (and the #fff the pages carry via
   .mainCon.innerpages.detailPage for the course detail layout) -> the home
   page's soft surface, so the white cards below float on one consistent
   ground. */
div.mainCon.innerpages,
div.mainCon.innerpages.detailPage {
  background: var(--aa-surface-soft);
}

/* Tile strip + title band merge into a single white header block. The tile
   background also carries a page-level inline style, hence the element. */
section.listingBanner {
  background: #fff;
  border-bottom: 1px solid var(--aa-line);
}

.miidleCon .listingTopCon {
  background: #fff;
  box-shadow: none;
  border-bottom: 1px solid var(--aa-line);
}

.miidleCon .listingTopCon .listingHd {
  padding: 18px 0;
  font-size: clamp(25px, 1.6vw + 14px, 34px);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Search: quiet inset field with a CSS-drawn magnifier (the recovered
   gray_search.png goes away), orange focus ring shared with the home hero. */
.miidleCon .listingTopCon .listingSearch {
  border: 1px solid rgba(17, 74, 71, 0.16);
  background: #fbfcfc;
  box-shadow: inset 0 1px 2px rgba(12, 36, 34, 0.05);
  transition: border-color 0.22s var(--aa-ease), box-shadow 0.22s var(--aa-ease), background-color 0.22s var(--aa-ease);
}

.miidleCon .listingTopCon .listingSearch:focus-within {
  border-color: var(--aa-green);
  background: #fff;
  box-shadow: var(--aa-ring);
}

.miidleCon .listingTopCon .listingSearch .input {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23707c85' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20.5 20.5-4-4'/%3E%3C/svg%3E") no-repeat 20px center / 18px 18px;
  font-size: 15px;
  color: var(--aa-ink);
}

.miidleCon .listingTopCon .listingSearch .input::placeholder {
  color: var(--aa-ink-mute);
  opacity: 1;
}

/* Category tile strip: transparent chips on the white band; hover / selected
   states recolor the Lucide icons and labels via catalogTiles.css, which this
   block deliberately leaves alone. */
.listingBanner .proSlider .item a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 6px 12px;
  border: 1px solid transparent;
  border-radius: var(--aa-radius-md);
  transition:
    background-color var(--aa-dur) var(--aa-ease),
    border-color var(--aa-dur) var(--aa-ease),
    box-shadow var(--aa-dur) var(--aa-ease);
}

.listingBanner .proSlider .item .icon {
  margin-bottom: 0;
}

.listingBanner .proSlider .item p {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.listingBanner .proSlider .item a:hover {
  background: #f2f7f3;
  border-color: rgba(17, 74, 71, 0.12);
  box-shadow: var(--aa-shadow-1);
}

/* Selected tile keeps its orange chip even while hovered. */
.listingBanner .proSlider .item.lmsTileActive a,
.listingBanner .proSlider .item.lmsTileActive a:hover {
  background: rgba(238, 135, 34, 0.1);
  border-color: rgba(238, 135, 34, 0.38);
  box-shadow: 0 10px 22px rgba(238, 135, 34, 0.14);
}

/* Tile-strip arrows: replace the sprite with the circular chevrons used by
   every .sliderArrow carousel on the site (this strip is not one of them). */
.listingBanner .proSlider .slick-arrow {
  width: 42px;
  height: 42px;
  margin-top: -21px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--aa-line);
  box-shadow: var(--aa-shadow-1);
  transition:
    background-color 0.22s var(--aa-ease),
    border-color 0.22s var(--aa-ease),
    box-shadow 0.22s var(--aa-ease);
}

.listingBanner .proSlider .slick-arrow::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--aa-green-deep);
  border-right: 2px solid var(--aa-green-deep);
  transform: translate(-60%, -50%) rotate(45deg);
  transition: border-color 0.22s var(--aa-ease);
}

.listingBanner .proSlider .slick-arrow.slick-prev::before {
  transform: translate(-40%, -50%) rotate(-135deg);
}

.listingBanner .proSlider .slick-arrow:hover {
  background: var(--aa-green-deep);
  border-color: var(--aa-green-deep);
  box-shadow: var(--aa-shadow-2);
}

.listingBanner .proSlider .slick-arrow:hover::before {
  border-color: #fff;
}

/* Filter sidebar: card instead of the recovered flat column. The page's own
   <style> pins .list to "padding: 27px 0 !important", hence the override. */
.listingBox > .listingLft {
  width: 268px;
  align-self: flex-start;
  background: var(--aa-surface);
  border: 1px solid var(--aa-line);
  border-radius: var(--aa-radius-lg);
  box-shadow: var(--aa-shadow-1);
  padding: 24px 22px !important;
}

.listingLft .filterMainHd {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  border-bottom: 1px solid var(--aa-line);
  padding-bottom: 14px;
  margin: 0;
}

.listingLft .filterBox {
  border-bottom: 1px solid var(--aa-line);
  padding: 16px 0;
}

.listingLft .filterHd {
  font-size: 15px;
  font-weight: 600;
  color: var(--aa-ink);
  padding: 2px 24px 2px 0;
}

/* Sprite arrow -> CSS chevron that flips when the section is open. */
.listingLft .filterHd::after {
  content: '';
  background: none;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--aa-ink-mute);
  border-bottom: 2px solid var(--aa-ink-mute);
  border-radius: 1px;
  position: absolute;
  right: 4px;
  top: 8px;
  transform: rotate(45deg);
  transition: transform var(--aa-dur) var(--aa-ease), border-color var(--aa-dur) var(--aa-ease);
}

.listingLft .filterHd:hover::after {
  border-color: var(--aa-green-deep);
}

.listingLft .filterHd.active::after {
  transform: rotate(-135deg);
}

.listingLft .filterList li {
  margin-top: 12px;
  font-size: 14px;
  color: var(--aa-ink-soft);
  padding: 2px 0 0 30px;
  transition: color 0.2s var(--aa-ease);
}

.listingLft .filterList li:hover {
  color: var(--aa-green-deep);
}

/* Modern checkbox: quiet rounded box, solid action-green fill + white tick. */
.listingLft .checkInpt + .bg {
  border: 2px solid #9aa6ab;
  border-radius: 5px;
  transition: background-color 0.18s var(--aa-ease), border-color 0.18s var(--aa-ease);
}

.listingLft .filterList li:hover .checkInpt + .bg {
  border-color: var(--aa-green);
}

.listingLft .checkInpt:checked + .bg {
  background: var(--aa-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5 6.4 12 13 4.5'/%3E%3C/svg%3E") no-repeat center / 12px 12px;
  border-color: var(--aa-green);
}

/* Right column toolbar: transparent row with a hairline, three pill links.
   The Student / Professional / View All markup carries heavy inline styles,
   so buttons are reset to inherit the pill. */
.listingBox > .listingRgt {
  width: calc(100% - 268px);
  padding: 0 0 40px 32px;
}

.listingRgt .sortBox {
  background: transparent !important;
  border-bottom: 1px solid var(--aa-line);
  height: auto;
  padding: 2px 0 14px 0;
  margin: 0;
}

.listingRgt .sortBox .totalHd {
  margin-left: 0 !important;
}

.listingRgt .sortBox ul {
  gap: 8px;
}

.listingRgt .sortBox li {
  margin-top: 0 !important;
}

.listingRgt .sortBox a.changecolorcss {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 16px;
  border-radius: var(--aa-radius-pill);
  font-family: var(--aa-font) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--aa-ink) !important;
  transition: background-color 0.2s var(--aa-ease), color 0.2s var(--aa-ease), box-shadow 0.2s var(--aa-ease);
}

.listingRgt .sortBox a.changecolorcss:hover {
  background: var(--aa-orange);
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(238, 135, 34, 0.28);
}

/* View All is the navigation escape hatch: quiet chip at rest, deep green on
   hover, so it reads differently from the two filters. */
.listingRgt .sortBox ul:last-child a.changecolorcss {
  background: rgba(17, 74, 71, 0.07);
}

.listingRgt .sortBox ul:last-child a.changecolorcss:hover {
  background: var(--aa-green-deep);
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(17, 74, 71, 0.24);
}

.listingRgt .sortBox .btn {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}

/* Grid: slightly wider gutters than the recovered 20px. */
.listingRgt .listingList {
  margin: -12px;
  padding: 22px 0 0 0;
}

.listingRgt .listingList li {
  padding: 12px;
}

/* The empty-state <li class="noCourses"> must span the grid, not one cell. */
.listingRgt .listingList li.noCourses {
  width: 100%;
}

/* One card per row on a phone. The archived theme holds the grid at 50% down to 479px, and
   the rebuilt 767px block repeats that, which leaves a 16px course title breaking over four
   lines inside a 150px column. The extra `ul` element is what outranks the tablet rule below. */
@media only screen and (max-width: 600px) {
  .listingRgt ul.listingList {
    margin: -6px;
  }

  .listingRgt ul.listingList li {
    width: 100%;
    padding: 6px;
  }

  .listingList .productBox .det {
    padding: 14px 14px 12px;
  }
}

/* Card internals over the foundation's productBox treatment. */
.listingList .productBox .img {
  border-bottom: 1px solid var(--aa-line);
}

.listingList .productBox .det {
  padding: 18px 18px 16px;
}

.listingList .productBox .det .name {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--aa-ink);
}

.listingList .productBox .det .name a {
  color: var(--aa-ink);
}

.listingList .productBox .det .name a:hover {
  color: var(--aa-orange-text);
}

.listingList .productBox .det .rating {
  color: var(--aa-ink-mute);
}

.listingList .productBox .det .price {
  color: var(--aa-green-deep);
  font-weight: 700;
}

/* Phone: filters collapse to one trigger button, the popup becomes a proper
   sheet, and the grid stays 2-up (the recovered 33% at <=767 crams three
   cards into a phone width). */
@media only screen and (max-width: 767px) {
  .listingBox > .listingLft {
    width: 100%;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0 !important;
  }

  .listingLft a.showFilter {
    background: var(--aa-green-deep);
    border-radius: 12px;
    padding: 13px 22px;
    color: #fff;
    font-family: var(--aa-font);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: background-color 0.2s var(--aa-ease), box-shadow 0.2s var(--aa-ease);
  }

  .listingLft a.showFilter:hover,
  .listingLft a.showFilter:active {
    background: var(--aa-green-dark);
    box-shadow: 0 10px 22px rgba(17, 74, 71, 0.24);
  }

  .listingBox > .listingRgt {
    width: 100%;
    padding: 24px 0 40px 0;
  }

  .listingRgt .listingList li {
    width: 50%;
  }

  /* Title + search stack instead of sitting side by side on a phone. */
  .miidleCon .listingTopCon .listingTop {
    flex-wrap: wrap;
  }

  .miidleCon .listingTopCon .listingHd {
    padding: 16px 0 4px;
  }

  .miidleCon .listingTopCon .listingSearch {
    width: 100%;
    max-width: none;
    margin: 4px 0 18px;
  }

  /* Full-screen filter sheet: sticky header, edge-to-edge list, orange CTA. */
  .listingLft .filterPopup {
    padding: 0;
    background: #fff;
  }

  .listingLft .filterPopup .filterMainHd {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #fff;
    margin: 0;
    padding: 18px 20px;
    border-bottom: 1px solid var(--aa-line);
    font-size: 18px;
  }

  .listingLft .filterPopup .filterBox {
    padding: 16px 20px;
  }

  .listingLft .filterPopup .tac {
    padding: 6px 20px calc(26px + env(safe-area-inset-bottom, 0px));
  }

  .listingLft .filterPopup a.applyFilter {
    background: var(--aa-orange);
    border-radius: 12px;
    padding: 15px 20px;
    color: #fff;
    font-family: var(--aa-font);
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 12px 26px rgba(238, 135, 34, 0.3);
  }
}

@media only screen and (max-width: 479px) {
  .listingBanner .proSlider .slick-arrow {
    width: 38px;
    height: 38px;
    margin-top: -19px;
  }
}

/* --------------------------------------------------------------------------
   YouTube: "Latest from Autobot Academy" (home; built by youtubeRail.js)
   A landscape 16:9 stage, an up-next slider of the other videos and a
   promotional column. Nothing here is vertical — Shorts stay out of the LMS.
   -------------------------------------------------------------------------- */

.lmsYouTube {
  background: var(--aa-surface-soft);
  padding: clamp(52px, 7vw, 88px) 0 clamp(38px, 5vw, 60px);
}

.lmsYouTube .ytTop {
  align-items: center;
  margin-bottom: clamp(16px, 2.2vw, 26px);
}

.ytMainHd {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.ytMark {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: #f00;
  flex: none;
}

.ytMark svg {
  width: 30px;
  height: 30px;
  display: block;
}

.ytMarkSmall {
  width: 24px;
  height: 24px;
}

.ytMarkSmall svg {
  width: 20px;
  height: 20px;
}

.ytLayout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 3vw, 30px);
  align-items: start;
}

.ytMain {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 24px);
  min-width: 0;
}

/* ---- the stage --------------------------------------------------------- */

.ytStage {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.ytStage__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 20px;
  background: #0d3b38;
  box-shadow: 0 22px 48px -26px rgba(14, 63, 60, 0.5);
}

.ytStage__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ytStage__dur {
  position: absolute;
  z-index: 2;
  right: 12px;
  bottom: 12px;
  background: rgba(9, 26, 24, 0.8);
  color: #fff;
  font-family: var(--aa-font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 4px 9px;
  border-radius: 9px;
}

/* The glyph is the stage's only affordance before playback, so unlike the small
   cards it stays lit until a clip actually starts. */
.ytStage .ytPlayGlyph {
  opacity: 1;
}

.ytStage.is-playing .ytPlayGlyph {
  opacity: 0;
}

.ytStage .ytPlayCircle {
  width: 68px;
  height: 68px;
}

.ytStage .ytPlayCircle svg {
  width: 28px;
  height: 28px;
}

.ytStage__cap {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ytStage__eyebrow {
  font-family: var(--aa-font);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--aa-orange-text);
}

.ytStage__title {
  margin: 0;
  font-family: var(--aa-font);
  font-size: clamp(17px, 0.6vw + 14px, 22px);
  font-weight: 700;
  line-height: 1.35;
  color: var(--aa-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ytStage__sub {
  margin: 0;
  font-family: var(--aa-font);
  font-size: 13px;
  color: var(--aa-ink-mute);
}

/* ---- shared slider chrome ---------------------------------------------- */

.ytRailHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.ytRailTitle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--aa-font);
  font-size: clamp(16px, 0.5vw + 13px, 19px);
  font-weight: 700;
  color: var(--aa-ink);
}

.ytRailArrows {
  display: inline-flex;
  gap: 8px;
}

.ytArrow {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--aa-line);
  color: var(--aa-green-deep);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  transition: background-color 0.22s var(--aa-ease), color 0.22s var(--aa-ease),
    border-color 0.22s var(--aa-ease), opacity 0.22s var(--aa-ease);
}

.ytArrow svg {
  width: 18px;
  height: 18px;
  display: block;
}

.ytArrow:hover {
  background: var(--aa-green-deep);
  border-color: var(--aa-green-deep);
  color: #fff;
}

.ytArrow.isOff {
  opacity: 0.3;
  pointer-events: none;
}

.ytRail {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 6px 4px 14px;
  margin: 0 -4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.ytRail::-webkit-scrollbar {
  display: none;
}

.ytDur {
  position: absolute;
  right: 8px;
  bottom: 8px;
  background: rgba(9, 26, 24, 0.8);
  color: #fff;
  font-family: var(--aa-font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 3px 8px;
  border-radius: 8px;
}

.ytMeta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 2px;
}

.ytTitle {
  font-family: var(--aa-font);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--aa-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s var(--aa-ease);
}

.ytSub {
  font-family: var(--aa-font);
  font-size: 12px;
  color: var(--aa-ink-mute);
}

/* ---- up-next slides ----------------------------------------------------- */

.ytSlide {
  flex: none;
  scroll-snap-align: start;
  width: clamp(196px, 17vw, 236px);
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  color: inherit;
  font-family: var(--aa-font);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.ytSlide__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 14px;
  border: 2px solid transparent;
  background: rgba(17, 74, 71, 0.08);
  transition: box-shadow 0.28s var(--aa-ease), border-color 0.28s var(--aa-ease);
}

.ytSlide__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s var(--aa-ease), opacity 0.28s var(--aa-ease);
}

.ytSlide:hover .ytSlide__media {
  box-shadow: 0 14px 30px -16px rgba(14, 63, 60, 0.55);
}

.ytSlide:hover .ytSlide__media img {
  transform: scale(1.06);
}

.ytSlide:focus-visible {
  outline: 3px solid var(--aa-orange-text);
  outline-offset: 4px;
  border-radius: 16px;
}

.ytSlide.isCurrent .ytSlide__media {
  border-color: var(--aa-orange);
}

.ytSlide.isCurrent .ytSlide__media img {
  opacity: 0.82;
}

.ytSlide:hover .ytTitle {
  color: var(--aa-orange-text);
}

.ytSlide__tag {
  position: absolute;
  left: 8px;
  top: 8px;
  padding: 3px 8px;
  border-radius: var(--aa-radius-pill);
  background: rgba(9, 26, 24, 0.72);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  transition: background-color 0.22s var(--aa-ease);
}

.ytSlide.isCurrent .ytSlide__tag {
  background: var(--aa-orange);
  color: #17231f;
}

/* ---- promotional column ------------------------------------------------- */

.ytPromo {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(18px, 2vw, 26px);
  border-radius: 20px;
  background: linear-gradient(155deg, #114a47, #0d3b38 58%, #0a302e);
  color: #e9f5f2;
  font-family: var(--aa-font);
  box-shadow: 0 22px 48px -28px rgba(6, 26, 24, 0.6);
}

.ytPromo__badge {
  align-self: flex-start;
  padding: 5px 11px;
  border-radius: var(--aa-radius-pill);
  background: rgba(238, 135, 34, 0.16);
  border: 1px solid rgba(238, 135, 34, 0.5);
  color: #f7b974;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ytPromo__title {
  margin: 0;
  font-size: clamp(19px, 0.7vw + 16px, 23px);
  font-weight: 700;
  line-height: 1.3;
  color: #f3fff3;
}

.ytPromo__text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: #b6cfc9;
}

.ytPromo__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.ytPromo__list li {
  position: relative;
  padding-left: 24px;
  font-size: 13px;
  line-height: 1.5;
  color: #d6ebe6;
}

.ytPromo__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 13px;
  height: 7px;
  border-left: 2px solid var(--aa-orange);
  border-bottom: 2px solid var(--aa-orange);
  transform: rotate(-45deg);
}

.ytPromo__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.ytPromo__btn {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 16px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--aa-radius-pill);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.2s var(--aa-ease), color 0.2s var(--aa-ease),
    border-color 0.2s var(--aa-ease);
}

.ytPromo__btn:hover {
  background: #fff;
  border-color: #fff;
  color: var(--aa-green-deep);
}

.ytPromo__btn.isPrimary {
  background: var(--aa-orange);
  border-color: var(--aa-orange);
  color: #17231f;
}

.ytPromo__btn.isPrimary:hover {
  background: #f79b3d;
  border-color: #f79b3d;
  color: #17231f;
}

.ytPromo__demo {
  margin-top: 2px;
  padding: 0;
  border: 0;
  background: none;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #cfe8e2;
  font-family: var(--aa-font);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.ytPromo__demo::before {
  content: "▶";
  font-size: 9px;
  color: var(--aa-orange);
}

.ytPromo__demo:hover {
  color: #fff;
}

@media only screen and (min-width: 1024px) {
  .ytLayout {
    grid-template-columns: minmax(0, 1fr) clamp(292px, 24vw, 360px);
  }

  /* The column tracks the stage while the slider scrolls past it. */
  .ytPromo {
    position: sticky;
    top: 96px;
  }
}

@media only screen and (max-width: 767px) {
  .lmsYouTube {
    padding: 46px 0 30px;
  }

  .ytRailArrows {
    display: none;
  }

  .ytRail {
    gap: 14px;
    padding: 4px 2px 10px;
    margin: 0 -2px;
  }

  .ytSlide {
    width: clamp(210px, 62vw, 268px);
  }

  .ytStage .ytPlayCircle {
    width: 54px;
    height: 54px;
  }

  .ytStage .ytPlayCircle svg {
    width: 22px;
    height: 22px;
  }

  .ytStage__media,
  .ytFrame {
    border-radius: 16px;
  }

  .ytMark {
    width: 28px;
    height: 28px;
  }

  .ytMark svg {
    width: 25px;
    height: 25px;
  }
}

@media only screen and (max-width: 479px) {
  .ytSlide {
    width: 74vw;
  }

  .ytStage__title {
    font-size: 16px;
  }

  .ytPromo__btn {
    flex: 1 1 100%;
  }
}

/* --------------------------------------------------------------------------
   YouTube inline play + popup (youtubeRail.js / ytPlayer.js)
   The card plays at its own size: the embed mounts in a layer over the
   thumbnail, so the rail layout never shifts when a clip starts.
   -------------------------------------------------------------------------- */

.ytFrame {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  border-radius: 20px;
  background: #0d3b38;
}

/* An author-level `position` rule beats the UA [hidden] rule, so the attribute
   alone would leave these layers visible. */
.ytFrame[hidden],
.ytExpand[hidden] {
  display: none !important;
}

.ytFrame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

.ytPlayTrigger {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.ytPlayTrigger:focus-visible {
  outline: 3px solid var(--aa-orange-text);
  outline-offset: -3px;
}

.ytExpand {
  position: absolute;
  z-index: 5;
  top: 8px;
  right: 8px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  background: rgba(9, 26, 24, 0.66);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background-color 0.2s var(--aa-ease), border-color 0.2s var(--aa-ease);
}

.ytExpand:hover {
  background: var(--aa-orange);
  border-color: var(--aa-orange);
}

.aaYtExpandIcon svg,
.expVideo__expand svg {
  width: 17px;
  height: 17px;
  display: block;
}

/* End-of-video panel: YouTube's own end screen is covered so the visitor keeps
   our calls to action instead of a wall of off-site links. */
.aaYtEnd {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  padding: 16px;
  text-align: center;
  background: linear-gradient(160deg, rgba(13, 59, 56, 0.94), rgba(8, 32, 31, 0.97));
  font-family: var(--aa-font);
}

.aaYtEnd__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 420px;
}

.aaYtEnd__Txt {
  margin: 0;
  color: #e9f5f2;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.45;
}

.aaYtEnd__Acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.aaYtEnd__again,
.aaYtEnd__cta,
.aaYtEnd__channel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: var(--aa-radius-pill);
  color: #fff;
  font-family: var(--aa-font);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.aaYtEnd__again {
  background: transparent;
}

.aaYtEnd__again svg,
.aaYtEnd__next svg {
  width: 15px;
  height: 15px;
}

.aaYtEnd__again:hover {
  border-color: #fff;
}

/* Continuous viewing is the one action that keeps a visitor watching, so it is
   the filled button and the course CTA steps back. */
.aaYtEnd__next {
  background: #fff;
  border-color: #fff;
  color: var(--aa-green-deep);
}

.aaYtEnd__next:hover {
  background: #eaf5f2;
  border-color: #eaf5f2;
}

.aaYtEnd__cta {
  background: var(--aa-orange);
  border-color: var(--aa-orange);
  color: #14211f;
}

.aaYtEnd__channel {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.12);
  color: #d6ebe6;
}

/* ---- Popup player -------------------------------------------------------- */

.aaYtModal {
  position: fixed;
  inset: 0;
  z-index: var(--oa-z-dialog, 2200);
  /* flex + margin:auto rather than place-items:center: a centred grid track is
     auto-sized, so the dialog's percentage width would resolve against it. */
  display: flex;
  overflow-y: auto;
  padding: clamp(12px, 3vw, 34px);
  background: rgba(6, 26, 24, 0);
  opacity: 0;
  transition: opacity 0.22s var(--aa-ease);
}

.aaYtModal[hidden] {
  display: none !important;
}

.aaYtModal.isOpen {
  opacity: 1;
}

.aaYtModal__scrim {
  position: fixed;
  inset: 0;
  background: rgba(6, 26, 24, 0.72);
  backdrop-filter: blur(5px);
}

.aaYtModal__dialog {
  position: relative;
  margin: auto; /* keeps the dialog reachable when it is taller than the viewport */
  /* The video is the sizing element: the dialog narrows itself so a 16:9 frame
     plus the header and ad bar always fit the viewport height. */
  width: min(1180px, 100%, calc((86vh - 176px) * 16 / 9 + 340px));
  background: var(--aa-surface);
  border: 1px solid var(--aa-line);
  border-radius: 22px;
  box-shadow: 0 30px 76px rgba(6, 26, 24, 0.45);
  overflow: hidden;
  transform: translateY(14px) scale(0.985);
  transition: transform 0.24s var(--aa-ease);
}

/* The rail is taken out of flow on purpose: as a grid/flex sibling its nine rows
   would set the row height and stretch the dialog past the viewport, which then
   leaves the 16:9 frame floating in empty space. */
.aaYtModal__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.isOpen .aaYtModal__dialog {
  transform: none;
}

.aaYtModal__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 14px 13px 18px;
  background: var(--aa-surface);
  border-bottom: 1px solid var(--aa-line);
}

.aaYtModal__title {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--aa-font);
  font-size: clamp(14px, 0.35vw + 12px, 17px);
  font-weight: 700;
  line-height: 1.35;
  color: var(--aa-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.aaYtModal__close {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--aa-line);
  border-radius: 50%;
  background: #fff;
  color: var(--aa-green-deep);
  cursor: pointer;
  transition: background-color 0.2s var(--aa-ease), color 0.2s var(--aa-ease),
    border-color 0.2s var(--aa-ease);
}

.aaYtModal__close svg {
  width: 18px;
  height: 18px;
  display: block;
}

.aaYtModal__close:hover {
  background: var(--aa-green-deep);
  border-color: var(--aa-green-deep);
  color: #fff;
}

.aaYtModal__video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #08201f;
}

.aaYtModal__mount {
  position: absolute;
  inset: 0;
}

.aaYtModal__mount iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

/* ---- up-next + promo column --------------------------------------------- */

.aaYtModal__side {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 340px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  padding: 14px 14px 14px 0;
  border-left: 1px solid var(--aa-line);
  background: var(--aa-surface-soft);
}

.aaYtModal__side[hidden] {
  display: none;
}

.aaYtSide__hd {
  margin: 0;
  padding: 2px 0 0 14px;
  font-family: var(--aa-font);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--aa-ink-mute);
}

.aaYtUp {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 4px 0 10px;
  scrollbar-width: thin;
}

.aaYtUp__item {
  flex: none;
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 6px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  text-align: left;
  color: inherit;
  font-family: var(--aa-font);
  cursor: pointer;
  transition: background-color 0.2s var(--aa-ease), border-color 0.2s var(--aa-ease);
}

.aaYtUp__item:hover {
  background: #fff;
  border-color: var(--aa-line);
}

.aaYtUp__item:focus-visible {
  outline: 3px solid var(--aa-orange-text);
  outline-offset: 2px;
}

.aaYtUp__item.isCurrent {
  background: #fff;
  border-color: var(--aa-orange);
}

.aaYtUp__thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 9px;
  background: rgba(17, 74, 71, 0.1);
}

.aaYtUp__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.aaYtUp__dur {
  position: absolute;
  right: 4px;
  bottom: 4px;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(9, 26, 24, 0.82);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
}

.aaYtUp__txt {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.aaYtUp__title {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--aa-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.aaYtUp__item.isCurrent .aaYtUp__title {
  color: var(--aa-green-deep);
}

.aaYtUp__sub {
  font-size: 11px;
  color: var(--aa-ink-mute);
}

.aaYtSide__promo {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 0 4px 0 10px;
  padding: 13px 14px;
  border-radius: 14px;
  background: linear-gradient(150deg, #114a47, #0d3b38);
  font-family: var(--aa-font);
}

.aaYtSide__badge {
  padding: 4px 9px;
  border: 1px solid rgba(238, 135, 34, 0.5);
  border-radius: var(--aa-radius-pill);
  background: rgba(238, 135, 34, 0.16);
  color: #f7b974;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.aaYtSide__promoTxt {
  color: #d6ebe6;
  font-size: 12.5px;
  line-height: 1.45;
}

.aaYtSide__btn {
  padding: 9px 15px;
  border: 1px solid var(--aa-orange);
  border-radius: var(--aa-radius-pill);
  background: var(--aa-orange);
  color: #17231f;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.2s var(--aa-ease), border-color 0.2s var(--aa-ease);
}

.aaYtSide__btn:hover {
  background: #f79b3d;
  border-color: #f79b3d;
  color: #17231f;
}

/* ---- Bottom advertisement ------------------------------------------------ */

.aaYtAd {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 16px;
  padding: 13px 18px;
  background: linear-gradient(115deg, #114a47, #0d3b38 55%, #145450);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--aa-font);
}

/* The rail runs the full height of the dialog, so the ad bar stops at its edge. */
.aaYtModal.hasRail .aaYtModal__main,
.aaYtModal.hasRail .aaYtAd {
  margin-right: 340px;
}

.aaYtAd__tag {
  flex: none;
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.13);
  color: #cfe8e2;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.aaYtAd__copy {
  flex: 1 1 210px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.aaYtAd__copy strong {
  color: #f3fff3;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3;
}

.aaYtAd__copy span {
  color: #b6cfc9;
  font-size: 12px;
  line-height: 1.45;
}

.aaYtAd__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.aaYtAd__btn {
  padding: 9px 15px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: var(--aa-radius-pill);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.2s var(--aa-ease), color 0.2s var(--aa-ease),
    border-color 0.2s var(--aa-ease);
}

.aaYtAd__btn:hover {
  background: #fff;
  border-color: #fff;
  color: var(--aa-green-deep);
}

.aaYtAd__btn.isPrimary {
  background: var(--aa-orange);
  border-color: var(--aa-orange);
  color: #17231f;
}

.aaYtAd__btn.isPrimary:hover {
  background: #f79b3d;
  border-color: #f79b3d;
  color: #17231f;
}

.aaYtAd__channel {
  color: #cfe8e2;
  font-size: 12px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.aaYtAd__channel::after {
  content: " \2197";
}

.aaYtAd__channel:hover {
  color: #fff;
}

/* The band's own "watch bigger" affordance (the sound chip holds bottom-right). */
.expVideo__expand {
  position: absolute;
  z-index: 4;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 50%;
  background: rgba(9, 26, 24, 0.62);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background-color 0.2s var(--aa-ease), border-color 0.2s var(--aa-ease);
}

.expVideo__expand:hover {
  background: var(--aa-orange);
  border-color: var(--aa-orange);
}

/* Below the dialog's rail the up-next list becomes a horizontal strip and its own
   promo block steps out — the ad bar across the bottom already carries it. */
@media only screen and (max-width: 1023px) {
  .aaYtModal__dialog {
    width: min(760px, 100%);
  }

  .aaYtModal.hasRail .aaYtModal__main,
  .aaYtModal.hasRail .aaYtAd {
    margin-right: 0;
  }

  .aaYtModal__side {
    position: static;
    width: auto;
    border-left: 0;
    border-top: 1px solid var(--aa-line);
    padding: 12px 14px 14px;
  }

  .aaYtSide__hd {
    padding-left: 0;
  }

  .aaYtUp {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0;
    scrollbar-width: thin;
  }

  .aaYtUp__item {
    width: 272px;
  }

  .aaYtSide__promo {
    display: none;
  }
}

@media only screen and (max-width: 767px) {
  .aaYtModal__dialog {
    border-radius: 18px;
  }

  .aaYtModal__head {
    padding: 10px 10px 10px 14px;
  }

  .aaYtModal__close {
    width: 36px;
    height: 36px;
  }

  .aaYtUp__item {
    width: 244px;
  }

  .aaYtAd {
    padding: 12px 14px;
  }

  .aaYtAd__actions {
    width: 100%;
  }

  .aaYtAd__btn {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ytRail {
    scroll-behavior: auto;
  }

  .aaYtModal,
  .aaYtModal__dialog {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Course detail pages (classic + WP-half: /CourseList/GetProductDetailsNew/<id>
   and /courses/<slug> — one recovered template). Scoped with #root:has(.cdBanner)
   so the 50 other pages reusing .detailPage (blog, static) stay untouched:
   .mainCon.detailPage closes after the syllabus block, and the trailing
   sections (AMC, work-here, testimonials, fees, FAQ) are a sibling wrapper —
   an anchor on .detailPage itself would miss them. .cdBanner only appears on
   these 23 course pages, so #root:has() is exact.
   The page keeps its own jQuery behaviours: .tabList swaps .tabBox, .syllabusMQ
   slides its .syllabusMA, .qBox toggles .active + the next .aBox, and the fee
   section must keep #Applynow .planList/.planBox + #lbltotalPrice intact for
   the apply flow (feePlans.js reads them).
   -------------------------------------------------------------------------- */

/* Softer rhythm than the legacy 60px blocks, and the four legacy band colours
   folded into the site palette: pale-blue -> soft canvas, green stays green,
   the rest alternate white / soft. */
#root:has(.cdBanner) .pt60 {
  padding-top: clamp(44px, 6.5vw, 76px);
}

#root:has(.cdBanner) .pb60 {
  padding-bottom: clamp(44px, 6.5vw, 76px);
}

#root:has(.cdBanner) section.greenBg {
  background: linear-gradient(135deg, #0e3f3c 0%, #114a47 55%, #0d3835 100%);
}

#root:has(.cdBanner) section.blueBg {
  background: var(--aa-surface-soft);
}

#root:has(.cdBanner) section:has(#learningOutcomes) {
  background: #fff;
}

#root:has(.cdBanner) section:has(.faqBox) {
  background: var(--aa-surface-soft);
}

/* Banner ---------------------------------------------------------------- */

#root:has(.cdBanner) .cdBanner {
  background: linear-gradient(135deg, #0d3b38 0%, #114a47 52%, #0c3532 100%);
  padding: clamp(26px, 4vw, 40px) 0 clamp(40px, 5.5vw, 64px);
}

#root:has(.cdBanner) .cdBanner .bnanerInner {
  display: flex;
  flex-direction: column-reverse;
  gap: 22px;
}

/* Archive stylesheet hard-codes .cdBanner .det{width:50%;padding-right:60px}.
   Inside our ≥992px grid track that squeezes the details column to half its
   cell, leaving a lopsided empty gap on desktop. Let it fill its track. */
#root:has(.cdBanner) .cdBanner .det {
  width: auto;
  max-width: none;
  padding: 0;
}

#root:has(.cdBanner) .cdBanner .det .hd {
  color: #fff;
  font-size: clamp(24px, 3.4vw, 40px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.02em;
}

#root:has(.cdBanner) .cdBanner .subHd {
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(14.5px, 1.5vw, 16.5px);
  line-height: 1.65;
  margin-top: 12px;
  max-width: 62ch;
}

#root:has(.cdBanner) .cdBanner .stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

#root:has(.cdBanner) .cdBanner .stats span,
#root:has(.cdBanner) .cdBanner .stats a {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--aa-radius-pill);
  padding: 7px 14px;
  color: #fff !important;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background 0.2s var(--aa-ease), border-color 0.2s var(--aa-ease);
}

#root:has(.cdBanner) .cdBanner .stats a:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
}

#root:has(.cdBanner) .cdBanner .det .applyBtn {
  display: inline-flex;
  margin-top: 22px;
}

#root:has(.cdBanner) .cdBanner [itemprop="telephone"] a {
  color: #fff !important;
  font-weight: 600;
}

/* The archived promo <video> or, when its mp4 was never captured, the YouTube
   embed hydrateLegacyMedia swapped in (fixed 550x260 attrs). */
#root:has(.cdBanner) .cdBanner video,
#root:has(.cdBanner) .cdBanner iframe {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  background: #0a2725;
  box-shadow: var(--aa-shadow-3);
}

/* When the promo video was never captured the banner falls back to the static
   course thumbnail (a white-background 350×175 PNG). Frame it like the video so
   it reads as an intentional card instead of a raw white box on the green hero. */
#root:has(.cdBanner) .cdBanner .bnanerInner > div:not(.det) img {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  background: #0a2725;
  box-shadow: var(--aa-shadow-3);
}

@media only screen and (min-width: 992px) {
  #root:has(.cdBanner) .cdBanner .bnanerInner {
    display: grid;
    grid-template-columns: 1.02fr 0.98fr;
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
  }
}

/* Partner strip + "Why we're ranked #1" --------------------------------- */

#root:has(.cdBanner) .collHd {
  text-align: center;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.6;
  color: var(--aa-ink-soft);
  max-width: 680px;
  margin: 0 auto;
}

#root:has(.cdBanner) .collList {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 16px;
  margin: 18px 0 0;
}

#root:has(.cdBanner) .collList li {
  display: flex;
  align-items: center;
  width: auto;
  margin: 0;
  background: #fff;
  border: 1px solid var(--aa-line);
  border-radius: 14px;
  padding: 14px 26px;
  box-shadow: var(--aa-shadow-1);
}

#root:has(.cdBanner) .collList li img {
  width: auto !important;
  height: 56px !important;
}

#root:has(.cdBanner) .whyList {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  margin: 6px 0 0;
}

/* stylesheet.css sizes these children for the old flexBox row
   (.whyList li{width:33.33%}, .favList li{width:46%}). Inside a grid track that
   percentage is relative to one column, so every card renders a third of its own
   cell — reset them before the grid can be trusted. */
#root:has(.cdBanner) .whyList > li {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* The legacy .green/.yellow/.red pastel washes are kept only as the accent dot. */
#root:has(.cdBanner) .whyList li > div {
  height: 100%;
  background: #fff;
  border: 1px solid var(--aa-line);
  border-radius: 16px;
  padding: 22px;
  box-shadow: var(--aa-shadow-1);
  transition: transform 0.3s var(--aa-ease), box-shadow 0.3s var(--aa-ease);
}

#root:has(.cdBanner) .whyList li > div:hover {
  transform: translateY(-3px);
  box-shadow: var(--aa-shadow-2);
}

#root:has(.cdBanner) .whyList li > div .hd {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--aa-ink);
}

#root:has(.cdBanner) .whyList li > div .hd::before {
  content: '';
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

#root:has(.cdBanner) .whyList li > div.green .hd::before {
  background: var(--aa-green);
}

#root:has(.cdBanner) .whyList li > div.yellow .hd::before {
  background: #f2b707;
}

#root:has(.cdBanner) .whyList li > div.red .hd::before {
  background: var(--aa-orange-2);
}

#root:has(.cdBanner) .whyList .text {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--aa-ink-soft);
}

/* Key highlights (the un-styled inline icons become rounded chips) ------ */

#root:has(.cdBanner) .keyCon {
  display: block;
  /* the archived band is capped at 1100px while every other row uses the
     container, which reads as an indent on desktop. */
  max-width: none;
}

#root:has(.cdBanner) .keyBox {
  width: 100%;
  background: transparent;
  box-shadow: none;
  margin: 0;
  padding: 0;
}

#root:has(.cdBanner) .keyBox + .keyBox {
  margin-top: 22px;
}

#root:has(.cdBanner) .keyList {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px 22px;
}

#root:has(.cdBanner) .keyList li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  background: #fff;
  border: 1px solid var(--aa-line);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: var(--aa-shadow-1);
}

#root:has(.cdBanner) .keyList img {
  flex: 0 0 40px;
  width: 40px !important;
  height: 40px !important;
  object-fit: contain;
  border-radius: 10px;
  background: var(--aa-surface-soft);
  padding: 7px;
}

#root:has(.cdBanner) .keyList span {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--aa-ink);
}

/* Skills band (TOP SKILL / JOB OPPORTUNITIES / ...) ---------------------- */

#root:has(.cdBanner) .favList {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

#root:has(.cdBanner) .favList li {
  width: auto;
  max-width: none;
  margin: 0;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  padding: 20px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  line-height: 1.6;
}

#root:has(.cdBanner) .favList li span {
  display: block;
  margin-bottom: 8px;
  color: var(--aa-orange-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

@media only screen and (max-width: 991px) {
  #root:has(.cdBanner) .favList {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (max-width: 575px) {
  #root:has(.cdBanner) .favList {
    grid-template-columns: 1fr;
  }
}

/* Tab pills (certificate, outcomes, support) ----------------------------- */

#root:has(.cdBanner) .tabCon .tabList {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  border-bottom: 0;
  margin-bottom: 24px;
}

#root:has(.cdBanner) .tabList li {
  margin: 0;
}

#root:has(.cdBanner) .tabList li a {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--aa-line);
  border-radius: var(--aa-radius-pill);
  padding: 10px 18px;
  color: var(--aa-ink-soft);
  font-size: 13.5px;
  font-weight: 600;
  transition: background 0.2s var(--aa-ease), border-color 0.2s var(--aa-ease), color 0.2s var(--aa-ease);
}

#root:has(.cdBanner) .tabList li a:hover {
  border-color: rgba(17, 74, 71, 0.35);
  color: var(--aa-green-deep);
}

#root:has(.cdBanner) .tabList li.active a {
  background: var(--aa-green-deep);
  border-color: var(--aa-green-deep);
  color: #fff;
  box-shadow: var(--aa-shadow-1);
}

/* The archived tab design draws its own 3px underline; inside a pill it reads as
   a stray dark bar. */
#root:has(.cdBanner) .tabList li.active a::after {
  content: none;
  display: none;
}

/* Certificate panels ------------------------------------------------------ */

#root:has(.cdBanner) .certificateBox {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  background: #fff;
  border: 1px solid var(--aa-line);
  border-radius: 16px;
  padding: clamp(18px, 2.6vw, 28px);
  box-shadow: var(--aa-shadow-1);
}

#root:has(.cdBanner) .certificateBox .contentBox {
  font-size: 15px;
  line-height: 1.7;
  color: var(--aa-ink-soft);
}

#root:has(.cdBanner) .certificateBox .borderBox {
  background: var(--aa-surface-soft);
  border-left: 3px solid var(--aa-orange);
  border-radius: 10px;
  padding: 14px 16px;
  margin-top: 14px;
  font-size: 14px;
}

#root:has(.cdBanner) .certificateBox .lft,
#root:has(.cdBanner) .certificateBox .rgt {
  /* stylesheet.css: .certificateBox .lft{width:58%;max-width:600px}, .rgt{width:42%}
     — again percentages of one grid track once the panel became a grid. */
  width: auto;
  max-width: none;
  padding-right: 0;
}

#root:has(.cdBanner) .certificateImg img {
  width: 100%;
  height: auto;
  border: 1px solid var(--aa-line);
  border-radius: 12px;
}

#root:has(.cdBanner) .zoomLink {
  display: inline-flex;
  align-items: center;
  margin-top: 12px;
  padding: 8px 16px;
  border: 1px solid var(--aa-line);
  border-radius: var(--aa-radius-pill);
  color: var(--aa-ink-soft);
  font-size: 13px;
  font-weight: 600;
  transition: background 0.2s var(--aa-ease), color 0.2s var(--aa-ease), border-color 0.2s var(--aa-ease);
}

#root:has(.cdBanner) .zoomLink:hover {
  background: var(--aa-green-deep);
  border-color: var(--aa-green-deep);
  color: #fff;
}

@media only screen and (min-width: 768px) {
  #root:has(.cdBanner) .certificateBox {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
  }
}

/* Syllabus rules live in the "Course syllabus + curriculum" block at the end
   of this file — one design for both templates. */

/* Text panels (outcomes / support / AMC) ---------------------------------- */

#root:has(.cdBanner) .tabBox ul.bulletList,
#root:has(.cdBanner) .boxSupport ul.bulletList {
  list-style: none;
  margin: 0;
  padding: 0;
}

#root:has(.cdBanner) .bulletList li {
  position: relative;
  padding: 3px 0 3px 26px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--aa-ink-soft);
}

#root:has(.cdBanner) .bulletList li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23e7f4e0'/%3E%3Cpath d='m7.5 12.6 3 3 6-7' fill='none' stroke='%23399e1d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

#root:has(.cdBanner) .boxSupport {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: center;
}

#root:has(.cdBanner) .boxSupport .lft,
#root:has(.cdBanner) .boxSupport .rgt {
  width: auto;
  padding: 0;
}

#root:has(.cdBanner) .boxSupport .lft img {
  width: 100%;
  height: auto;
  border: 1px solid var(--aa-line);
  border-radius: 14px;
  box-shadow: var(--aa-shadow-1);
}

#root:has(.cdBanner) .boxSupport .rgt .hd {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  margin: 18px 0 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--aa-ink);
}

#root:has(.cdBanner) .boxSupport .rgt .hd:first-child {
  margin-top: 0;
}

#root:has(.cdBanner) .boxSupport .rgt .hd::before {
  content: '';
  flex: 0 0 4px;
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: var(--aa-orange);
}

@media only screen and (min-width: 768px) {
  #root:has(.cdBanner) .boxSupport {
    grid-template-columns: 1fr 1fr;
    gap: clamp(22px, 3.4vw, 44px);
  }
}

/* Employer logo wall ------------------------------------------------------- */

#root:has(.cdBanner) .workAt {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
  /* .workAt{margin:-15px} from the old flex row overhangs the container. */
  margin: 8px 0 0;
}

#root:has(.cdBanner) .workAt li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 84px;
  background: var(--aa-surface-soft);
  border: 1px solid var(--aa-line);
  border-radius: 14px;
  padding: 16px;
}

#root:has(.cdBanner) .workAt li img {
  width: auto !important;
  max-width: 100%;
  height: 44px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter 0.3s var(--aa-ease), opacity 0.3s var(--aa-ease);
}

#root:has(.cdBanner) .workAt li:hover img {
  filter: none;
  opacity: 1;
}

/* Learner testimonials ------------------------------------------------------ */

#root:has(.cdBanner) .testimonialsHd {
  text-align: center;
}

#root:has(.cdBanner) .testimonialsSlider {
  position: relative;
  margin-top: 26px;
}

#root:has(.cdBanner) .testimonialsSlider .slick-slide {
  padding: 4px;
}

/* stylesheet.css builds the slide from a fixed 500px left column holding the
   avatar and the name at absolute offsets over two decorative swoosh images.
   Inside a one-slide track that geometry is what makes the card look torn
   apart, so the whole left column is switched back to normal flow. */
#root:has(.cdBanner) .testmonialBox {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: center;
  width: 100%;
  background: #fff;
  border: 1px solid var(--aa-line);
  border-radius: 18px;
  padding: clamp(20px, 3vw, 30px);
  box-shadow: var(--aa-shadow-1);
}

#root:has(.cdBanner) .testmonialLeft {
  width: auto;
  min-height: 0;
  padding: 0;
  position: static;
}

#root:has(.cdBanner) .testmonialLeft::before,
#root:has(.cdBanner) .testmonialLeft::after {
  content: none;
  display: none;
}

#root:has(.cdBanner) .testmonialLeft .img {
  position: static;
  display: flex;
  justify-content: center;
  width: auto;
  z-index: auto;
}

#root:has(.cdBanner) .testmonialLeft .img img {
  width: 110px !important;
  height: 110px;
  margin: 0 !important;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--aa-line);
}

#root:has(.cdBanner) .testmonialLeft .name {
  position: static;
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--aa-ink-mute);
  text-align: center;
}

#root:has(.cdBanner) .testmonialLeft .name span {
  display: block;
  margin-bottom: 3px;
  font-size: 16px;
  font-weight: 700;
  color: var(--aa-green-deep);
}

/* .testmonialRgt is "width: calc(100% - 500px)" in the archived sheet. */
#root:has(.cdBanner) .testmonialRgt {
  width: auto;
  min-width: 0;
  padding: 0;
}

/* The archived quote_icon.png sits behind the text; the ::before below replaces it. */
#root:has(.cdBanner) .testmonialText {
  position: relative;
  background: none;
  padding: 20px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--aa-ink-soft);
}

#root:has(.cdBanner) .testmonialText::before {
  content: '\201C';
  position: absolute;
  top: -14px;
  left: -6px;
  font-family: Georgia, serif;
  font-size: 46px;
  line-height: 1;
  color: var(--aa-orange);
}

#root:has(.cdBanner) .testmonialText .name {
  position: static;
}

@media only screen and (min-width: 768px) {
  #root:has(.cdBanner) .testmonialBox {
    grid-template-columns: 240px 1fr;
    gap: clamp(20px, 3vw, 36px);
  }
}

/* Prev/next. The page's own slick() call passes arrows:false, so these buttons
   only exist once legacySliders.js re-inits the carousel; they are absolutely
   placed so their DOM order relative to the track does not matter. */
#root:has(.cdBanner) .testimonialsSlider .slick-arrow {
  width: 42px;
  height: 42px;
  top: clamp(70px, 38%, 42%);
  margin: 0;
  padding: 0;
  border: 1px solid var(--aa-line);
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--aa-shadow-1);
  color: transparent;
  font-size: 0;
  text-indent: -500px;
  overflow: hidden;
  z-index: 3;
  transition:
    background-color 0.22s var(--aa-ease),
    border-color 0.22s var(--aa-ease),
    box-shadow 0.22s var(--aa-ease);
}

#root:has(.cdBanner) .testimonialsSlider .slick-arrow.slick-prev {
  left: -6px;
}

#root:has(.cdBanner) .testimonialsSlider .slick-arrow.slick-next {
  right: -6px;
}

#root:has(.cdBanner) .testimonialsSlider .slick-arrow::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--aa-green-deep);
  border-right: 2px solid var(--aa-green-deep);
  transform: translate(-60%, -50%) rotate(45deg);
  transition: border-color 0.22s var(--aa-ease);
}

#root:has(.cdBanner) .testimonialsSlider .slick-arrow.slick-prev::before {
  transform: translate(-40%, -50%) rotate(-135deg);
}

#root:has(.cdBanner) .testimonialsSlider .slick-arrow:hover {
  background: var(--aa-green-deep);
  border-color: var(--aa-green-deep);
  box-shadow: var(--aa-shadow-2);
}

#root:has(.cdBanner) .testimonialsSlider .slick-arrow:hover::before {
  border-color: #fff;
}

#root:has(.cdBanner) .testimonialsSlider .slick-dots {
  position: static;
  display: flex !important;
  justify-content: center;
  gap: 8px;
  width: auto;
  margin: 18px 0 0;
  padding: 0;
}

#root:has(.cdBanner) .testimonialsSlider .slick-dots li {
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
}

#root:has(.cdBanner) .testimonialsSlider .slick-dots li button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(35, 42, 51, 0.18);
  color: transparent;
  font-size: 0;
  text-indent: -500px;
  transition: width 0.25s var(--aa-ease), background 0.25s var(--aa-ease);
}

#root:has(.cdBanner) .testimonialsSlider .slick-dots li.slick-active button {
  width: 24px;
  border-radius: var(--aa-radius-pill);
  background: var(--aa-orange);
}

/* Program fees ------------------------------------------------------------- */

/* The archived markup repeats id="Applynow" on the section AND on the Apply Now
   anchor, so an unscoped #Applynow rule paints the button with the panel's
   background. Only the section is meant to be a panel. */
section#Applynow {
  background: var(--aa-surface-soft);
}

#Applynow .programBox {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 3vw, 30px);
  align-items: stretch;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

/* Left: course summary as a deep-green price card (replaces the flat #cfeaf0 block).
   .programBox .lft/.rgt carry 40%/60% widths from the archived flex row. */
#Applynow .lft {
  position: relative;
  overflow: hidden;
  width: auto;
  max-width: none;
  background: linear-gradient(135deg, #0d3b38 0%, #114a47 55%, #0c3532 100%) !important;
  color: #fff;
  border-radius: 20px;
  padding: clamp(24px, 3vw, 34px);
  box-shadow: var(--aa-shadow-3);
}

#Applynow .lft .hd {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 800;
  line-height: 1.3;
  color: #fff;
}

#Applynow .lft .hd:not(:first-child) {
  margin-top: 20px;
}

#Applynow .lft .hd + span {
  display: inline-flex;
  margin-top: 12px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--aa-radius-pill);
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
}

#Applynow .lft .price {
  margin-top: 16px;
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
}

#Applynow .lft .price #lbltotalPrice {
  margin: 0 4px;
  font-size: clamp(34px, 4.6vw, 48px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
}

#Applynow .lft .price + .price {
  display: inline-flex;
  margin-top: 14px;
  padding: 6px 14px;
  background: rgba(238, 135, 34, 0.18);
  border: 1px solid rgba(238, 135, 34, 0.4);
  border-radius: var(--aa-radius-pill);
  color: #ffd9b3;
  font-size: 12.5px;
  font-weight: 700;
}

#Applynow .lft > div:not([class]) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

#Applynow .lft span:has(input[type="checkbox"]) {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 8px 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
}

#Applynow .lft span:has(input[type="checkbox"]) label {
  font-weight: 600;
  color: #fff;
  cursor: default;
}

#Applynow .pgLogos {
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  padding: 12px 16px;
  background: #fff;
  border-radius: 14px;
}

/* Right: selectable plan cards. */
#Applynow .rgt {
  display: flex;
  flex-direction: column;
  width: auto;
  max-width: none;
  min-width: 0;
  padding: 0;
}

#Applynow .planList {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  width: 100%;
  /* .planList{padding:20px;margin:-15px} from the archived flex row pushes the
     cards past the panel edge on narrow screens. */
  margin: 0;
  padding: 0;
}

#Applynow .planList > li {
  width: auto;
  padding: 0;
}

#Applynow .planList li > .text {
  display: none;
}

#Applynow .planBox {
  position: relative;
  height: auto !important;
  text-align: left;
  background: #fff;
  border: 1.5px solid var(--aa-line);
  border-radius: 18px;
  padding: 22px 22px 22px 22px;
  cursor: pointer;
  box-shadow: var(--aa-shadow-1);
  transition: border-color 0.2s var(--aa-ease), box-shadow 0.2s var(--aa-ease), transform 0.2s var(--aa-ease);
}

#Applynow .planBox:hover {
  border-color: rgba(17, 74, 71, 0.35);
  transform: translateY(-2px);
}

#Applynow .planBox:has(input[type="checkbox"]:checked) {
  border-color: var(--aa-orange);
  box-shadow: 0 0 0 3px rgba(238, 135, 34, 0.16), var(--aa-shadow-2);
}

#Applynow .planBox .planName {
  text-align: left;
  padding-right: 28px;
}

#Applynow .planBox .planName span {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: var(--aa-ink);
}

#Applynow .planBox .text {
  margin-top: 2px;
  font-size: 13px;
  color: var(--aa-ink-mute);
}

#Applynow .planBox .price {
  margin-top: 12px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--aa-green-deep);
}

#Applynow .planBox input[type="checkbox"] {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--aa-orange);
}

#Applynow .applyBtn {
  display: block;
  width: 100%;
  max-width: 320px;
  text-align: center;
  font-size: 16px;
  letter-spacing: 0.04em;
  /* Both halves ship inline junk on this anchor — margin-left:88px on the
     WordPress copies, background-color:orange on the ASP ones — so the centring
     and the brand fill both need the extra weight. */
  margin: 22px auto 0 !important;
  background: linear-gradient(135deg, var(--aa-orange-2), var(--aa-orange)) !important;
  color: #fff !important;
}

#Applynow .applyBtn:hover {
  background: linear-gradient(135deg, #f26522, #e0700f) !important;
}

@media only screen and (min-width: 768px) {
  #Applynow .planList {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (min-width: 900px) {
  #Applynow .programBox {
    grid-template-columns: 0.92fr 1.08fr;
  }
}

/* FAQ (site-wide: same .qBox/.aBox accordion as the syllabus) -------------- */

.faqBox {
  margin-top: 22px;
}

.faqBox ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.faqBox ul li {
  background: #fff;
  border: 1px solid var(--aa-line);
  border-radius: 14px;
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color 0.25s var(--aa-ease), box-shadow 0.25s var(--aa-ease);
}

.faqBox ul li:hover {
  border-color: rgba(17, 74, 71, 0.22);
  box-shadow: var(--aa-shadow-1);
}

.faqBox .qBox {
  padding: 16px 52px 16px 18px;
  font-size: 15px;
  font-weight: 600;
  color: var(--aa-ink);
}

.faqBox .qBox::after {
  content: '';
  width: 16px;
  height: 16px;
  margin-top: -8px;
  right: 18px;
  top: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23232a33' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: 0.5;
  transition: transform 0.3s var(--aa-ease);
}

.faqBox .qBox.active::after {
  transform: rotate(180deg);
}

.faqBox .aBox {
  margin: 0 !important;
  padding: 0 18px 16px !important;
  background: none !important;
  border: none !important;
  font-size: 14px;
  line-height: 1.65;
  color: var(--aa-ink-soft);
}

/* --------------------------------------------------------------------------
   Interior page banners
   --------------------------------------------------------------------------
   Two recovered patterns cover the top of every non-catalog page:

   1. .bannerton — the corporate/static pages (contact, hire, for-campus,
      for-business, ev-bootcamp, webinar-event, mg-motor, professional
      certificates) opened with a full-viewport photo band. The photo comes
      from a per-page inline <style>, so these rules out-specify that block
      instead of overriding the image; the band itself becomes a compact
      interior hero with a brand scrim and a bottom-left title.

   2. .listingBanner carrying only an h3.certificateHd — the blog index,
      every blog post and about-us. The catalog pages share the class but
      keep .proSlider tiles inside, so :has() scopes these to the title
      strips. Those pages carry inline heights/sizes on the elements, hence
      the !important marks.
   -------------------------------------------------------------------------- */

body section.bannerton {
  position: relative;
  min-height: clamp(240px, 34vw, 470px);
  align-items: stretch;
  overflow: hidden;
  background-position: center 22%;
}

body section.bannerton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 26, 25, 0.58) 0%, rgba(7, 26, 25, 0.14) 40%, rgba(7, 26, 25, 0.68) 100%);
  pointer-events: none;
}

body section.bannerton > .container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 104px;
  padding-bottom: clamp(26px, 3.4vw, 46px);
}

body section.bannerton .bannerInfo {
  max-width: 880px;
  padding: 0;
  text-align: left;
}

body section.bannerton .bannerInfo br {
  display: none;
}

body section.bannerton .bannerInfo::before {
  content: '';
  display: block;
  width: 46px;
  height: 4px;
  border-radius: 4px;
  margin-bottom: 16px;
  background: linear-gradient(90deg, var(--aa-orange), var(--aa-orange-2));
}

body section.bannerton .bannerHd {
  font-size: clamp(28px, 3.6vw + 6px, 52px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #fff;
  padding-bottom: 0;
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.5);
}

@media only screen and (max-width: 767px) {
  body section.bannerton {
    min-height: clamp(200px, 46vw, 300px);
  }

  body section.bannerton > .container {
    padding-top: 96px;
  }

  body section.bannerton .bannerInfo::before {
    width: 36px;
    height: 3px;
    margin-bottom: 12px;
  }
}

/* Blog / about title strips -> deep-green band under the solid header. The
   long about-us sentence sets at reading size; one-word page titles keep a
   display size. */
.mainCon.innerpages section.listingBanner:has(.certificateHd) {
  background:
    radial-gradient(760px 260px at 16% 24%, rgba(112, 182, 68, 0.16) 0%, rgba(112, 182, 68, 0) 62%),
    linear-gradient(120deg, var(--aa-green-deep) 0%, var(--aa-green-dark) 78%);
  border-bottom: 0;
}

.mainCon.innerpages section.listingBanner:has(.certificateHd) > div > .container {
  height: auto !important;
  min-height: 0 !important;
  margin-bottom: 0 !important;
  padding-top: clamp(58px, 6vw, 84px);
  padding-bottom: clamp(26px, 3vw, 40px);
}

.mainCon.innerpages section.listingBanner:has(.certificateHd) .item br {
  display: none;
}

.mainCon.innerpages section.listingBanner:has(.certificateHd) .certificateHd {
  color: #fff;
  font-size: clamp(20px, 1.5vw + 10px, 27px);
  line-height: 1.55;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  max-width: 980px;
  margin: 0 auto;
  padding: 0;
}

/* One-word page titles ("Blog") carry an inline 77px; beat it for the band. */
.mainCon.innerpages section.listingBanner:has(.certificateHd) h3[style*="77px"] {
  font-size: clamp(34px, 4.4vw, 54px) !important;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 !important;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

footer {
  background:
    radial-gradient(1100px 380px at 10% -8%, rgba(17, 74, 71, 0.5) 0%, rgba(17, 74, 71, 0) 62%),
    #0b0f0d;
}

/* Hairline in the site's greens -> orange under the last band. */
footer::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--aa-green-deep) 0%, var(--aa-green) 52%, var(--aa-orange) 100%);
  opacity: 0.85;
}

body footer .footerTop {
  padding: clamp(30px, 4vw, 52px) 0 6px;
}

/* Column titles become quiet overline labels with an orange tick. */
body footer .footerHd {
  position: relative;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  padding-bottom: 22px;
}

body footer .footerHd::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 10px;
  width: 24px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--aa-orange), var(--aa-orange-2));
}

body footer .footerLink li {
  padding: 6px 0;
  font-size: 13.5px;
}

body footer .footerLink li a {
  color: rgba(255, 255, 255, 0.58);
  display: inline-block;
  transition: color 0.2s var(--aa-ease), transform 0.2s var(--aa-ease);
}

body footer .footerLink li a:hover {
  color: #fff;
  transform: translateX(3px);
}

body footer .footerBot {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

body footer .footerBot .lft {
  padding: 26px 0;
}

body footer .footerLogo img {
  display: block;
  height: 40px;
  width: auto;
}

body footer .footerText {
  font-size: 12.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.45);
}

body footer .footerBot .rgt {
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.45);
}

/* --------------------------------------------------------------------------
   Floating WhatsApp button

   Rendered globally from App.jsx; hidden on /admin from the component side.

   Small-screen scale, shared by every piece of bottom chrome (FAB, audio button,
   route docks, quick-login card) so their geometry is one system:
     ≥1024  desktop  — 56px circle at 22px, hover unfolds the label, pill steps aside
     768-1023 tablet — 56px circle at 22px, touch: never a label, pill at 88px
     480-767 phone   — 52px circle at 16px, audio shares that line at 78px
     ≤479  compact   — 50px circle at 14px, audio shares that line at 74px
   Every offset adds env(safe-area-inset-bottom), which index.html enables with
   viewport-fit=cover.
   -------------------------------------------------------------------------- */

.waFab {
  position: fixed;
  right: 22px;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  z-index: 1200;
  display: inline-flex;
  align-items: center;
  border-radius: var(--aa-radius-pill);
  background: var(--aa-wa);
  color: #fff;
  box-shadow: 0 10px 26px rgba(18, 140, 74, 0.35), 0 2px 6px rgba(0, 0, 0, 0.16);
  transition: transform var(--aa-dur) var(--aa-ease), box-shadow var(--aa-dur) var(--aa-ease);
}

.waFab:hover {
  color: #fff;
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 16px 34px rgba(18, 140, 74, 0.42), 0 4px 10px rgba(0, 0, 0, 0.16);
}

.waFab:active {
  transform: translateY(-1px) scale(0.99);
}

.waFab .waFabIcon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  flex: none;
}

.waFab .waFabIcon svg {
  width: 30px;
  height: 30px;
  display: block;
  fill: currentColor;
}

/* Label unfolds on hover on pointer devices; touch keeps the compact circle. */
.waFab .waFabLabel {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  transition: max-width 0.32s var(--aa-ease), padding 0.32s var(--aa-ease);
}

@media (hover: hover) and (pointer: fine) {
  .waFab:hover .waFabLabel,
  .waFab:focus-visible .waFabLabel {
    max-width: 150px;
    padding-right: 20px;
  }

  /* The unfolded label reaches ~248px in from the right edge, well over the
     audio pill parked at 92px, so the pill steps aside while it is hovered. */
  .waFab:hover ~ .aa-audio,
  .waFab:focus-visible ~ .aa-audio {
    --aa-audio-shift: 176px;
  }

  /* Below ~820px a full-width pill cannot clear the label without running off
     the left edge, so it folds to logo + play first and then steps aside. */
  @media only screen and (max-width: 820px) {
    .waFab:hover ~ .aa-audio:not(.is-docked) .aa-audio__detail,
    .waFab:focus-visible ~ .aa-audio:not(.is-docked) .aa-audio__detail {
      max-width: 0;
      opacity: 0;
      gap: 0;
    }
  }
}

/* Soft attention pulse, disabled by the reduced-motion block above. */
.waFab::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4);
  animation: waPulse 2.6s var(--aa-ease) infinite;
  pointer-events: none;
}

@keyframes waPulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4); }
  70% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* Phones: the WhatsApp FAB is a touch target, never a hover pill. 52px keeps it at the
   44px minimum with a little visual weight, and it anchors to the safe area so the home
   indicator on an iPhone does not cover it. The audio button shares its line, one button
   to the left (see the --aa-audio-right override in the 767 tier). */
@media only screen and (max-width: 767px) {
  .waFab {
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }

  .waFab .waFabIcon {
    width: 52px;
    height: 52px;
  }

  .waFab .waFabIcon svg {
    width: 28px;
    height: 28px;
  }
}

@media only screen and (max-width: 479px) {
  .waFab {
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }

  .waFab .waFabIcon {
    width: 50px;
    height: 50px;
  }

  .waFab .waFabIcon svg {
    width: 26px;
    height: 26px;
  }
}

@media print {
  .waFab {
    display: none;
  }
}

/* ==========================================================================
   Auth: split-screen login/register + bottom-left quick-login widget
   ========================================================================== */

.aa-auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  background: var(--aa-surface-soft);
  font-family: var(--aa-font);
}

/* ---- Left brand panel ---------------------------------------------------- */
.aa-auth__brand {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 3vw, 30px);
  padding: clamp(24px, 4vw, 56px);
  color: #fff;
  background:
    radial-gradient(900px 520px at 15% -10%, #17635f 0%, var(--aa-green-deep) 52%, var(--aa-green-dark) 100%);
  overflow: hidden;
}
.aa-auth__brand::after {
  content: "";
  position: absolute;
  right: -120px;
  bottom: -140px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(238, 135, 34, 0.28), transparent 70%);
  pointer-events: none;
}

.aa-auth__logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.05em;
  text-decoration: none;
}
.aa-auth__logo:hover { color: #fff; text-decoration: none; }
.aa-auth__logoMark {
  width: 44px;
  height: 44px;
  object-fit: contain;
  background: #fff;
  border-radius: 12px;
  padding: 5px;
  box-shadow: var(--aa-shadow-1);
}
.aa-auth__logo b { color: var(--aa-orange); font-weight: 700; }

.aa-auth__video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--aa-radius-lg);
  overflow: hidden;
  box-shadow: var(--aa-shadow-3);
  background: #000;
  flex: none;
}
.aa-auth__video iframe,
.aa-auth__videoFallback img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}
.aa-auth__videoFallback { position: absolute; inset: 0; }
/* The YouTube IFrame API swaps this host node for its own <iframe>. */
.aa-auth__videoHost { position: absolute; inset: 0; }
.aa-auth__video.is-failed > iframe { display: none; }

.aa-auth__sound {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: var(--aa-radius-pill);
  background: rgba(9, 40, 38, 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background var(--aa-dur) var(--aa-ease), border-color var(--aa-dur) var(--aa-ease), transform var(--aa-dur) var(--aa-ease);
}
.aa-auth__sound:hover { background: rgba(238, 135, 34, 0.9); border-color: transparent; transform: translateY(-1px); }
.aa-auth__sound svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.aa-auth__sound[aria-pressed="true"] { background: rgba(238, 135, 34, 0.86); border-color: transparent; }

.aa-auth__partners { margin-top: auto; }
.aa-auth__partnersTitle {
  margin: 0 0 14px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

/* ---- Partner marquee ----------------------------------------------------- */
/* Logos ship as transparent white silhouettes, so they need no filter and no
   backing plate to stay legible on the deep-green brand panel. */
.aa-marquee {
  position: relative;
  overflow: hidden;
  padding: 6px 0 2px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.aa-marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(28px, 3vw, 46px);
  width: max-content;
  animation: aa-marquee 46s linear infinite;
}
.aa-marquee:hover .aa-marquee__track { animation-play-state: paused; }
.aa-marquee__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  flex: none;
  opacity: 0.8;
  transition: opacity var(--aa-dur) var(--aa-ease), transform var(--aa-dur) var(--aa-ease), filter var(--aa-dur) var(--aa-ease);
}
.aa-marquee__item:hover {
  opacity: 1;
  transform: translateY(-3px);
  filter: drop-shadow(0 8px 16px rgba(238, 135, 34, 0.5));
}
/* Uniform optical height; widths stay natural so wordmarks never squish. */
.aa-marquee__item img { height: 40px; width: auto; }
@keyframes aa-marquee { to { transform: translateX(-50%); } }

/* ---- Right form panel ---------------------------------------------------- */
.aa-auth__panel {
  display: grid;
  place-items: center;
  padding: clamp(24px, 4vw, 48px);
}
.aa-auth__card {
  width: 100%;
  max-width: 420px;
  background: var(--aa-surface);
  border: 1px solid var(--aa-line);
  border-radius: var(--aa-radius-lg);
  box-shadow: var(--aa-shadow-2);
  padding: clamp(22px, 3vw, 34px);
}

.aa-auth__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: var(--aa-surface-soft);
  border-radius: var(--aa-radius-pill);
  margin-bottom: 20px;
}
.aa-auth__tabs button {
  border: 0;
  background: transparent;
  padding: 10px 12px;
  border-radius: var(--aa-radius-pill);
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  color: var(--aa-ink-mute);
  cursor: pointer;
  transition: all var(--aa-dur) var(--aa-ease);
}
.aa-auth__tabs button.is-active {
  background: var(--aa-surface);
  color: var(--aa-green-deep);
  box-shadow: var(--aa-shadow-1);
}

.aa-auth__oauth { display: flex; flex-direction: column; gap: 10px; }
.aa-oauth {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--aa-line);
  border-radius: var(--aa-radius-md);
  background: var(--aa-surface);
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  color: var(--aa-ink);
  cursor: pointer;
  transition: all var(--aa-dur) var(--aa-ease);
}
.aa-oauth:hover:not(:disabled) { border-color: #cfd6da; box-shadow: var(--aa-shadow-1); transform: translateY(-1px); }
.aa-oauth:disabled { opacity: 0.7; cursor: default; }
.aa-oauth svg { width: 18px; height: 18px; flex: none; }
.aa-oauth__soon {
  position: absolute;
  right: 12px;
  font-style: normal;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--aa-orange-text);
  background: rgba(242, 101, 34, 0.1);
  padding: 2px 7px;
  border-radius: var(--aa-radius-pill);
}

.aa-auth__divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--aa-ink-mute);
  font-size: 12px;
}
.aa-auth__divider::before,
.aa-auth__divider::after { content: ""; height: 1px; flex: 1; background: var(--aa-line); }

.aa-auth__stepper {
  height: 5px;
  border-radius: var(--aa-radius-pill);
  background: var(--aa-line);
  overflow: hidden;
  margin-bottom: 18px;
}
.aa-auth__progress {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--aa-green), var(--aa-orange));
  transition: width 0.4s var(--aa-ease);
}

.aa-auth__back {
  border: 0;
  background: transparent;
  color: var(--aa-ink-mute);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 0 0 10px;
}
.aa-auth__back:hover { color: var(--aa-green-deep); }

.aa-auth__step { display: block; }
.aa-auth__step--fwd { animation: aa-step-fwd 0.32s var(--aa-ease) both; }
.aa-auth__step--bwd { animation: aa-step-bwd 0.32s var(--aa-ease) both; }
@keyframes aa-step-fwd { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes aa-step-bwd { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }

.aa-auth__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--aa-ink);
  margin-bottom: 8px;
}
.aa-auth__optional {
  font-size: 11px;
  font-weight: 500;
  color: var(--aa-ink-mute);
  background: var(--aa-surface-soft);
  padding: 1px 8px;
  border-radius: var(--aa-radius-pill);
}
.aa-auth__fieldWrap { position: relative; }
.aa-auth__input {
  width: 100%;
  box-sizing: border-box;
  padding: 15px 16px;
  font-family: inherit;
  font-size: 16px;
  color: var(--aa-ink);
  background: var(--aa-surface);
  border: 1.5px solid var(--aa-line);
  border-radius: var(--aa-radius-md);
  transition: border-color var(--aa-dur) var(--aa-ease), box-shadow var(--aa-dur) var(--aa-ease);
}
.aa-auth__input:focus {
  outline: none;
  border-color: var(--aa-green);
  box-shadow: 0 0 0 4px rgba(112, 182, 68, 0.18);
}
.aa-auth__eye {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: var(--aa-green-deep);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  padding: 6px 8px;
}

.aa-auth__error {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--aa-radius-sm);
  background: rgba(192, 57, 43, 0.08);
  color: #b3362a;
  font-size: 13px;
}
.aa-auth__submit {
  width: 100%;
  margin-top: 18px;
  padding: 14px;
  border: 0;
  border-radius: var(--aa-radius-md);
  background: linear-gradient(135deg, var(--aa-orange), var(--aa-orange-2));
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(242, 101, 34, 0.32);
  transition: transform var(--aa-dur) var(--aa-ease), box-shadow var(--aa-dur) var(--aa-ease);
}
.aa-auth__submit:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(242, 101, 34, 0.4); }
.aa-auth__submit:disabled { opacity: 0.7; cursor: default; }

.aa-auth__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 18px;
  font-size: 13px;
}
.aa-auth__foot a { color: var(--aa-green-deep); font-weight: 600; text-decoration: none; }
.aa-auth__foot a:hover { text-decoration: underline; }
.aa-auth__stepDots { display: inline-flex; gap: 5px; }
.aa-auth__stepDots i { width: 6px; height: 6px; border-radius: 50%; background: var(--aa-line); }
.aa-auth__stepDots i.on { background: var(--aa-green); }

/* ---- Quick-login popup (auto-appears on scroll, bottom-left) ------------ */
.aa-quick {
  position: fixed;
  left: 22px;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  z-index: var(--oa-z-menu, 2400);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--aa-font);
}

.aa-quick__card {
  position: relative;
  width: min(320px, calc(100vw - 44px));
  background: var(--aa-surface);
  border: 1px solid var(--aa-line);
  border-radius: var(--aa-radius-lg);
  box-shadow: var(--aa-shadow-3);
  padding: 22px;
  animation: aa-quick-in 0.28s var(--aa-ease) both;
  transition: opacity 0.19s cubic-bezier(0.16, 1, 0.3, 1), transform 0.19s cubic-bezier(0.16, 1, 0.3, 1);
}

.aa-quick[data-phase="closing"] .aa-quick__card {
  opacity: 0;
  transform: translateY(14px) scale(0.98);
}
@keyframes aa-quick-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }
.aa-quick__card h3 { margin: 0 0 2px; font-size: 18px; color: var(--aa-ink); }
.aa-quick__sub { margin: 0 0 14px; font-size: 13px; color: var(--aa-ink-mute); }
.aa-quick__close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: var(--aa-ink-mute);
  cursor: pointer;
}
.aa-quick__input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 13px;
  margin-bottom: 10px;
  font-family: inherit;
  font-size: 14px;
  border: 1.5px solid var(--aa-line);
  border-radius: var(--aa-radius-sm);
}
.aa-quick__input:focus { outline: none; border-color: var(--aa-green); box-shadow: 0 0 0 3px rgba(112, 182, 68, 0.16); }
.aa-quick__error { margin-bottom: 10px; font-size: 12px; color: #b3362a; }
.aa-quick__submit {
  width: 100%;
  padding: 11px;
  border: 0;
  border-radius: var(--aa-radius-sm);
  background: linear-gradient(135deg, var(--aa-orange), var(--aa-orange-2));
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
.aa-quick__submit:disabled { opacity: 0.7; }
.aa-quick__google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--aa-line);
  border-radius: var(--aa-radius-sm);
  background: var(--aa-surface);
  font-family: inherit;
  font-weight: 600;
  font-size: 13px;
  color: var(--aa-ink);
  cursor: pointer;
}
.aa-quick__google:hover { border-color: #cfd6da; }
.aa-quick__google svg { width: 16px; height: 16px; }
.aa-quick__links { display: flex; justify-content: space-between; margin-top: 14px; font-size: 12px; }
.aa-quick__links a { color: var(--aa-green-deep); font-weight: 600; text-decoration: none; }
.aa-quick__links a:hover { text-decoration: underline; }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 900px) {
  .aa-auth { grid-template-columns: 1fr; }
  .aa-auth__brand { min-height: 42vh; }
  .aa-auth__partners { margin-top: 6px; }
  .aa-marquee__item { height: 44px; }
  .aa-marquee__item img { height: 28px; }
  .aa-auth__sound { left: 10px; bottom: 10px; padding: 6px 11px 6px 8px; font-size: 11.5px; }
}
@media (max-width: 560px) {
  .aa-auth__oauth { flex-direction: column; }
  .aa-quick { left: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  /* Keep the WhatsApp FAB's corner free: a full-width card would sit under it and the
     close control would land on top of the contact button. */
  .aa-quick__card { width: calc(100vw - 96px); }
}

@media (prefers-reduced-motion: reduce) {
  .aa-marquee__track { animation: none; }
  .aa-auth__step--fwd, .aa-auth__step--bwd, .aa-quick__card { animation: none; transition: none; }
}

/* ==========================================================================
   Floating audio player — sits beside the WhatsApp FAB, bottom-right.
   ========================================================================== */
.aa-audio {
  --aa-accent: #cbff4d;
  --aa-audio-ink: #0e0e0e;
  --aa-audio-surface: #f3fff3;
  --aa-audio-muted: #6b7a72;
  --aa-audio-bar-off: #cdd8cf;
  position: fixed;
  right: calc(var(--aa-audio-right, 92px) + var(--aa-audio-shift, 0px));
  bottom: var(--aa-audio-bottom, calc(16px + env(safe-area-inset-bottom, 0px))); /* centre matches waFab */
  z-index: 1199;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 68px;
  padding: 0 10px 0 8px;
  border-radius: var(--aa-radius-pill);
  background: var(--aa-audio-surface);
  color: var(--aa-audio-ink);
  box-shadow: 0 14px 34px rgba(14, 46, 24, 0.18), 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(14, 46, 24, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--aa-font, inherit);
  transition: transform var(--aa-dur) var(--aa-ease), box-shadow var(--aa-dur) var(--aa-ease),
    gap 0.42s var(--aa-ease), padding-right 0.42s var(--aa-ease),
    right 0.52s var(--aa-ease), bottom 0.52s var(--aa-ease);
}

.aa-audio:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(14, 46, 24, 0.22), 0 3px 10px rgba(0, 0, 0, 0.1);
}

/* Scroll-down tucks the pill to logo + play button (see FloatingAudioPlayer's
   is-tucked state); hover and keyboard focus always bring the detail back. */
.aa-audio__detail {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  max-width: 460px;
  opacity: 1;
  overflow: hidden;
  transition: max-width 0.42s var(--aa-ease), opacity 0.24s var(--aa-ease), gap 0.42s var(--aa-ease);
}

.aa-audio.is-tucked:not(:hover):not(:focus-within) {
  gap: 6px;
  padding-right: 8px;
}
.aa-audio.is-tucked:not(:hover):not(:focus-within) .aa-audio__detail {
  max-width: 0;
  opacity: 0;
  gap: 0;
}
/* The narration keeps running while tucked, so the logo ring keeps the beat. */
.aa-audio.is-tucked.is-playing:not(:hover):not(:focus-within) .aa-audio__logo {
  animation: aaAudioTucked 1.7s var(--aa-ease) infinite;
}
@keyframes aaAudioTucked {
  0%, 100% { box-shadow: 0 0 0 2px var(--aa-accent), 0 0 10px rgba(203, 255, 77, 0.3); }
  50% { box-shadow: 0 0 0 2px var(--aa-accent), 0 0 22px rgba(203, 255, 77, 0.62); }
}

/* At the top of a page that opens with a headline the pill docks centred just
   above it (FloatingAudioPlayer measures the headline and hands the two offsets
   over as px custom properties, so the glide is a plain right/bottom move). */
@media only screen and (min-width: 768px) {
  .aa-audio.is-docked {
    right: var(--aa-audio-dock-right, calc(50% - 261px));
    bottom: var(--aa-audio-dock-bottom, 58vh);
  }
}

.aa-audio__logo {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #16351f, #0e0e0e 70%);
  box-shadow: 0 0 0 2px var(--aa-accent), 0 0 14px rgba(203, 255, 77, 0.35);
}

.aa-audio__logo img {
  width: 78%;
  height: 78%;
  object-fit: contain;
}

.aa-audio__meta {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}

.aa-audio__eyebrow {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--aa-audio-muted);
}

.aa-audio__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--aa-audio-ink);
  white-space: nowrap;
}

.aa-audio__wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 48px;
}

.aa-audio__bar {
  width: 3px;
  border-radius: 2px;
  background: var(--aa-audio-bar-off);
  transform-origin: center;
  transition: background 0.2s var(--aa-ease);
}

.aa-audio__bar.is-on {
  background: var(--aa-accent);
}

.aa-audio.is-playing .aa-audio__bar.is-on {
  animation: aaAudioBar 0.9s var(--aa-ease) infinite alternate;
}

@keyframes aaAudioBar {
  from { transform: scaleY(0.7); }
  to { transform: scaleY(1.12); }
}

.aa-audio__time {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--aa-audio-muted);
  min-width: 38px;
  text-align: center;
  flex: none;
}

.aa-audio__btn {
  width: 48px;
  height: 48px;
  flex: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  background: var(--aa-accent);
  color: #0e0e0e;
  box-shadow: 0 4px 12px rgba(150, 200, 40, 0.4);
  transition: transform 0.18s var(--aa-ease), box-shadow 0.18s var(--aa-ease);
}

.aa-audio__btn:hover { transform: scale(1.06); }
.aa-audio__btn:active { transform: scale(0.97); }
.aa-audio__btn:disabled { opacity: 0.7; cursor: progress; }
.aa-audio__btn:focus-visible { outline: 3px solid rgba(203, 255, 77, 0.6); outline-offset: 2px; }

.aa-audio__btn svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.aa-audio.is-error .aa-audio__btn { background: #d7ded8; color: #5c665f; box-shadow: none; }

.aa-audio__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-color-scheme: dark) {
  .aa-audio {
    --aa-audio-ink: #f3fff3;
    --aa-audio-surface: #0e0e0e;
    --aa-audio-muted: #9fb0a4;
    --aa-audio-bar-off: #33402f;
    border-color: rgba(203, 255, 77, 0.14);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.4);
  }
}

@media only screen and (max-width: 900px) {
  .aa-audio { --aa-audio-right: 88px; }
}

/* Phones: the same treatment the desktop pill gets, reduced to what a phone can show.
   The wide pill and its wave never fit this width, so here the widget is a single round
   button wearing the Apply CTA's gradient, parked in the WhatsApp FAB's line one button
   to its left — a pair of actions instead of a banner floating over the page. Tapping it
   is play/pause, exactly as the other button is a single tap. */
@media only screen and (max-width: 767px) {
  .aa-audio {
    /* 16px edge + the 52px FAB + a 10px gap puts its right edge beside that button. */
    --aa-audio-right: 78px;
    --aa-audio-shift: 0px;
    --aa-audio-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    width: 52px;
    height: 52px;
    gap: 0;
    padding: 0;
    justify-content: center;
    background: none;
    border-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  /* A folded pill is a hover affordance; a phone has no hover to fold back to. */
  .aa-audio.is-tucked:not(:hover):not(:focus-within) {
    gap: 0;
    padding: 0;
  }
  .aa-audio__detail,
  .aa-audio__logo {
    display: none;
  }
  .aa-audio__btn {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, var(--aa-orange-2), var(--aa-orange));
    color: #fff;
    box-shadow: 0 10px 26px rgba(242, 101, 34, 0.35), 0 2px 6px rgba(0, 0, 0, 0.16);
  }
  .aa-audio__btn svg { width: 22px; height: 22px; }
}

@media only screen and (max-width: 479px) {
  /* In line with the compact 50px FAB at 14px. */
  .aa-audio {
    --aa-audio-right: 74px;
    --aa-audio-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    width: 50px;
    height: 50px;
  }
  .aa-audio__btn { width: 50px; height: 50px; }
  .aa-audio__btn svg { width: 20px; height: 20px; }
}

@media print {
  .aa-audio { display: none; }
}

/* --------------------------------------------------------------------------
   Bottom chrome under a route player (/library, /podcasts)

   The episode dock is centred and full-width from 18px up to ~74px, so on a phone or a
   small tablet three fixed bars would stack in the same 90px strip. The dock is the only
   player a learner needs while it is open, so the intro pill steps out and the WhatsApp
   FAB climbs over the dock instead of covering its close control. Written against :has()
   rather than a route class so the docks stay free to mount and unmount.
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 920px) {
  body:has(.lib-dock) .aa-audio,
  body:has(.pdx-dock) .aa-audio {
    display: none;
  }

  body:has(.lib-dock) .waFab,
  body:has(.pdx-dock) .waFab {
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }

  /* 84px of dock+FAB strip plus the 52px circle needs clearing before content ends. */
  body:has(.lib-dock) .lib-body { padding-bottom: 150px; }
  body:has(.pdx-dock) .pdx-body { margin-bottom: 150px; }
}

@media (prefers-reduced-motion: reduce) {
  .aa-audio { transition: box-shadow 0.2s linear; }
  .aa-audio,
  .aa-audio:hover { transform: none; }
  .aa-audio.is-playing .aa-audio__bar.is-on { animation: none; }
  .aa-audio__detail { transition: opacity 0.2s linear; }
  .aa-audio.is-tucked.is-playing .aa-audio__logo { animation: none; }
}

/* ============================================================================
   Archived login/register popup — permanently suppressed
   Home/Index.html runs `$('#loginPopup').show()` on load, which force-opens the
   old login+register modal during hydration. A display:none !important on the
   overlay beats that inline style (jQuery .show() writes a non-important inline
   display), so the modal can never appear. Header login links already route to
   /login. #emiPopup / #planPopup (informational) are intentionally left alone.
   ========================================================================== */

#loginPopup,
#loginPopup.overlay {
  display: none !important;
}

/* ============================================================================
   Welcome / promotional popup (auto-appears once per session, 3s countdown)
   ========================================================================== */

:root {
  --aa-wp-accent: #ee8722;
  --aa-wp-green: #114a47;
}

.aa-wp {
  position: fixed;
  inset: 0;
  z-index: var(--oa-z-dialog, 2200);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 40px);
  background: rgba(9, 30, 28, 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-family: var(--aa-font, "Exo"), system-ui, sans-serif;
  animation: aaWpFade 0.35s var(--aa-ease, ease) both;
  transition: opacity 0.19s ease;
}

.aa-wp[data-phase="closing"] {
  opacity: 0;
}

/* --- the promo card --- */
.aa-wp__card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  width: min(920px, 100%);
  max-height: min(88vh, 640px);
  overflow: auto;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 30px 80px -20px rgba(6, 22, 20, 0.55);
  animation: aaWpRise 0.5s var(--aa-ease, ease) both;
  transition: opacity 0.19s cubic-bezier(0.16, 1, 0.3, 1), transform 0.19s cubic-bezier(0.16, 1, 0.3, 1);
}

.aa-wp[data-phase="closing"] .aa-wp__card {
  opacity: 0;
  transform: translateY(14px) scale(0.985);
}

@media only screen and (min-width: 760px) {
  .aa-wp__card { grid-template-columns: 1.05fr 0.95fr; }
}

.aa-wp__media {
  position: relative;
  min-height: 220px;
  background: linear-gradient(135deg, #0d3b38, #114a47);
}

.aa-wp__media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
}

@media only screen and (min-width: 760px) {
  .aa-wp__media img { min-height: 100%; }
}

/* Phone: the artwork becomes a banner. At its 220px floor the card's own scroll pushed
   both CTAs below the fold on a 390 × 844 viewport, so the offer you came to read
   needed two swipes to act on. It also drops to the bottom edge for thumb reach. */
@media only screen and (max-width: 759px) {
  .aa-wp {
    padding: 12px;
    align-items: flex-end;
  }

  .aa-wp__card {
    width: 100%;
    max-height: 90dvh;
    border-radius: 20px;
  }

  .aa-wp__media,
  .aa-wp__media img {
    height: 132px;
    min-height: 132px;
  }

  .aa-wp__cta {
    flex-direction: column;
  }

  .aa-wp__btn {
    width: 100%;
  }
}

.aa-wp__media .aa-wp__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(238, 135, 34, 0.95);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.aa-wp__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(22px, 3vw, 38px);
}

.aa-wp__eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--aa-wp-accent);
}

.aa-wp__title {
  margin: 0;
  font-size: clamp(24px, 3.2vw, 34px);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--aa-wp-green);
}

.aa-wp__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: #3f4a52;
}

.aa-wp__list {
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}

.aa-wp__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: #2a353c;
}

.aa-wp__list li::before {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--aa-wp-green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
}

.aa-wp__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}

.aa-wp__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s var(--aa-ease, ease), box-shadow 0.18s var(--aa-ease, ease);
}

.aa-wp__btn--primary {
  background: linear-gradient(135deg, #f2902f, #ee8722);
  color: #fff;
  box-shadow: 0 10px 22px -8px rgba(238, 135, 34, 0.6);
}

.aa-wp__btn--ghost {
  background: #fff;
  color: var(--aa-wp-green);
  border: 1.5px solid rgba(17, 74, 71, 0.28);
}

.aa-wp__btn:hover { transform: translateY(-2px); }
.aa-wp__btn--primary:hover { box-shadow: 0 16px 30px -8px rgba(238, 135, 34, 0.7); }

.aa-wp__skip {
  align-self: center;
  margin-top: 2px;
  background: none;
  border: 0;
  color: #7a858c;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.aa-wp__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #232a33;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px -4px rgba(6, 22, 20, 0.4);
}

@keyframes aaWpFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes aaWpRise {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .aa-wp { animation: none; transition: none; }
  .aa-wp__card { animation: none; transition: none; }
}

/* Welcome popup: image placeholder for a missing banner */
.aa-wp__ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #0d3b38, #114a47 55%, #0c3532);
}

.aa-wp__ph-label {
  font-size: clamp(20px, 4vw, 30px);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #f3fff3;
}

/* --------------------------------------------------------------------------
   Industry Certification Courses (home) — was a slick carousel set to
   slidesToShow:3 holding only two cards, so it rendered two 1/3-width slides
   with big side gaps, uneven heights and a logo floating over the thumbnail.
   Rebuilt as a static, equal-height 2-up grid (.certGrid).
   -------------------------------------------------------------------------- */

.certGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin-top: 8px;
}

@media only screen and (min-width: 768px) {
  .certGrid {
    grid-template-columns: 1fr 1fr;
    gap: 26px;
  }
}

.certGrid .item {
  display: block;
  padding: 0;
}

.certGrid .productBox {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--aa-surface);
  border: 1px solid var(--aa-line);
  border-radius: var(--aa-radius-lg);
  box-shadow: var(--aa-shadow-1);
  overflow: hidden;
  transition: transform var(--aa-dur) var(--aa-ease), box-shadow var(--aa-dur) var(--aa-ease);
}

.certGrid .productBox:hover {
  transform: translateY(-4px);
  box-shadow: var(--aa-shadow-2);
}

/* Consistent 16:9 media area so the two different source thumbnails align. */
.certGrid .productBox .img {
  position: relative;
  aspect-ratio: 16 / 9;
  height: auto;
  overflow: hidden;
  background: linear-gradient(135deg, #0d3b38, #114a47 55%, #0c3532);
}

.certGrid .productBox .img img {
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: cover;
  transition: transform 0.4s var(--aa-ease);
}

.certGrid .productBox:hover .img img {
  transform: scale(1.05);
}

.certGrid .certificationBox {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 0 24px 24px;
}

/* Course mark: a white chip straddling the media edge. Both card families use it —
   the certification cards ship a `.logo` seal, the product/listing cards an empty
   `.logoicon` slot that hydration moves to the top of the body. */
.certGrid .certificationBox .logo,
.productBox .det > .logoicon:has(img) {
  position: relative;
  z-index: 1;
  width: max-content;
  margin: -30px 0 0 0;
}

/* A negative margin counts from the body's content box, so each card body's own top
   padding eats into the straddle: the certification body has none, the product slider
   has 10px (20px from 768), the catalog grid 18px. Cancelling those keeps the overlap
   at the same 30px on every card instead of 30 / 10-20 / 12. */
.productSlider .productBox .det > .logoicon:has(img) { margin-top: -40px; }
.listingList .productBox .det > .logoicon:has(img) { margin-top: -48px; }

/* The certification title carries its own 16px top padding; the product/listing
   ones do not, so the chip would sit flush against the course name. */
.productBox .det > .logoicon:has(img) { margin-bottom: 12px; }

@media only screen and (min-width: 768px) {
  .productSlider .productBox .det > .logoicon:has(img) { margin-top: -50px; }
}

.certGrid .certificationBox .logo img,
.productBox .det > .logoicon img {
  width: 60px !important;
  height: 60px;
  object-fit: contain;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--aa-line);
  border-radius: 14px;
  box-shadow: var(--aa-shadow-1);
}

/* Phone: the catalog grid is 2-up there, so a 60px seal would cover half of a
   163px-wide media. Same straddle, smaller mark. */
@media only screen and (max-width: 479px) {
  .certGrid .certificationBox .logo img,
  .productBox .det > .logoicon img {
    width: 44px !important;
    height: 44px;
    padding: 6px;
    border-radius: 12px;
  }

  .certGrid .certificationBox .logo { margin-top: -22px; }
  .productSlider .productBox .det > .logoicon:has(img) { margin-top: -32px; }
  .listingList .productBox .det > .logoicon:has(img) { margin-top: -40px; }
}

.certGrid .certificationBox .name {
  padding: 16px 0 0 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--aa-ink);
}

.certGrid .certificationBox .name a {
  color: var(--aa-ink);
}

.certGrid .certificationBox .name a:hover {
  color: var(--aa-green-deep);
}

/* Grows to fill the card so the footer link always sits on the same baseline. */
.certGrid .certificationBox .textBox {
  flex: 1 1 auto;
  padding: 10px 0 16px 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--aa-ink-soft);
}

.certGrid .certificationBox .certFooter {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--aa-line);
}

.certGrid .certificationBox a.link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--aa-green-deep);
  text-decoration: none;
}

.certGrid .certificationBox a.link:hover {
  color: var(--aa-orange-text);
  text-decoration: underline;
}

.aa-wp__ph-label::after {
  content: "";
  display: block;
  width: 46px;
  height: 4px;
  margin: 10px auto 0;
  border-radius: 999px;
  background: var(--aa-wp-accent);
}

/* --------------------------------------------------------------------------
   Inner-page hero (.entry-header) on the WordPress-half pages. The archived
   MasterStudy CSS for it was never captured and its banner images were lost,
   so the restored /Images/page-banner.jpg needs an explicit hero treatment +
   a legibility gradient for the page title.
   -------------------------------------------------------------------------- */

.entry-header {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(220px, 30vw, 340px);
  padding: clamp(30px, 5vw, 58px) 0;
  background-size: cover !important;
  background-position: center 45% !important;
  background-repeat: no-repeat !important;
}

.entry-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(9, 32, 30, 0.94) 0%,
    rgba(13, 59, 56, 0.80) 40%,
    rgba(13, 59, 56, 0.34) 76%,
    rgba(13, 59, 56, 0.12) 100%
  );
}

.entry-header .overlay {
  display: none;
}

.entry-header .container {
  position: relative;
  z-index: 1;
}

.entry-header .entry-title-left {
  max-width: 660px;
}

.entry-header .entry-title h1 {
  margin: 0;
  color: #fff !important;
  font-family: "Exo", sans-serif;
  font-weight: 800;
  font-size: clamp(26px, 4vw, 44px);
  line-height: 1.14;
  letter-spacing: -0.02em;
  text-wrap: balance;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
}

@media only screen and (max-width: 767px) {
  .entry-header {
    min-height: 200px;
    background-position: center 40% !important;
  }
  .entry-header::before {
    background: linear-gradient(
      180deg,
      rgba(9, 32, 30, 0.90) 0%,
      rgba(13, 59, 56, 0.78) 60%,
      rgba(13, 59, 56, 0.60) 100%
    );
  }
}

/* --------------------------------------------------------------------------
   Home "Skilling with Technology" band — video replaces the static image
   (see web/src/routes/expVideo.js). Square media frame, cover-fit chrome-free
   YouTube embed, branded poster overlay that retires once playing.
   -------------------------------------------------------------------------- */
.expCon .expImg {
  width: 48%;
}

.expVideo {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--aa-radius-lg);
  background: #0d3b38;
  box-shadow: var(--aa-shadow-2);
}

/* Cover the square with the 16:9 embed: match the frame height, let the extra
   width bleed past the sides (cropped by overflow:hidden). */
.expVideo__frame {
  position: absolute;
  inset: 0;
}
.expVideo iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 177.78% !important;
  height: 100% !important;
  border: 0;
}
.expVideo.is-failed .expVideo__frame {
  display: none;
}

/* Branded square poster + play affordance; fades out when playback starts. */
.expVideo__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.55s var(--aa-ease);
}
.expVideo__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.expVideo__overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(9, 32, 30, 0.12) 0%, rgba(9, 32, 30, 0.42) 100%);
}
.expVideo__overlay.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.expVideo__play {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--aa-orange) 0%, var(--aa-orange-2) 100%);
  box-shadow: 0 12px 30px rgba(242, 101, 34, 0.42);
  cursor: pointer;
  transition: transform 0.2s var(--aa-ease), box-shadow 0.25s var(--aa-ease);
}
.expVideo__play:hover {
  transform: scale(1.07);
  box-shadow: 0 16px 36px rgba(242, 101, 34, 0.5);
}
.expVideo__play svg {
  width: 34px;
  height: 34px;
  fill: #fff;
  margin-left: 5px;
}

/* Fallback "sound on" chip — shown only when audible autoplay was blocked. */
.expVideo__sound {
  position: absolute;
  z-index: 4;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 0;
  border-radius: var(--aa-radius-pill);
  background: rgba(17, 74, 71, 0.9);
  color: #fff;
  font-family: "Exo", sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--aa-shadow-1);
}
.expVideo__sound svg {
  width: 18px;
  height: 18px;
}
.expVideo__sound[hidden] {
  display: none;
}

@media only screen and (max-width: 767px) {
  .expCon .expImg {
    width: 100%;
    margin-bottom: 26px;
  }
  .expVideo {
    aspect-ratio: 4 / 3;
    max-width: 460px;
    margin: 0 auto;
  }
}

/* ==========================================================================
   Admission onboarding — /apply
   A two-column wizard: the brand rail carries the road ahead and the live
   application ticket, the main column carries one question set at a time.
   ========================================================================== */
.aa-apply {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(340px, 0.82fr) 1.18fr;
  background: var(--aa-surface-soft);
  font-family: var(--aa-font);
  color: var(--aa-ink);
}

/* ---- Left rail ----------------------------------------------------------- */
.aa-apply__rail {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.8vw, 20px);
  padding: clamp(22px, 3vw, 40px);
  color: #fff;
  background:
    radial-gradient(820px 520px at 12% -12%, #17635f 0%, var(--aa-green-deep) 55%, var(--aa-green-dark) 100%);
}
.aa-apply__rail::-webkit-scrollbar { width: 6px; }
.aa-apply__rail::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 999px; }

.aa-apply__logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.05em;
  text-decoration: none;
}
.aa-apply__logo:hover { color: #fff; text-decoration: none; }
.aa-apply__logo img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  background: #fff;
  border-radius: 11px;
  padding: 5px;
}
.aa-apply__logo b { color: var(--aa-orange); }

.aa-apply__title {
  margin: 0;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.aa-apply__intro {
  margin: 0;
  max-width: 42ch;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.76);
}

.aa-apply__railSteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.aa-apply__railSteps button {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--aa-radius-sm);
  background: transparent;
  color: rgba(255, 255, 255, 0.62);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  text-align: left;
  cursor: default;
  transition: background var(--aa-dur) var(--aa-ease), color var(--aa-dur) var(--aa-ease);
}
.aa-apply__railSteps .is-done button { cursor: pointer; color: rgba(255, 255, 255, 0.82); }
.aa-apply__railSteps .is-done button:hover { background: rgba(255, 255, 255, 0.07); }
.aa-apply__railSteps .is-now button { color: #fff; background: rgba(255, 255, 255, 0.1); }
.aa-apply__railDot {
  flex: none;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  font-size: 11.5px;
  font-weight: 700;
}
.aa-apply__railSteps .is-now .aa-apply__railDot { border-color: var(--aa-orange); background: var(--aa-orange); color: #fff; }
.aa-apply__railSteps .is-done .aa-apply__railDot { border-color: var(--aa-green); background: var(--aa-green); color: #08312e; }

/* ---- Live application ticket -------------------------------------------- */
.aa-apply__ticket {
  flex: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--aa-radius-lg);
  background: rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  padding: 16px 18px;
}
.aa-apply__ticketHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.22);
  font-size: 11.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 700;
}
.aa-apply__ticketHead em {
  font-style: normal;
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: 11px;
  padding: 3px 9px;
  border-radius: var(--aa-radius-pill);
  background: rgba(238, 135, 34, 0.9);
  color: #fff;
}
.aa-apply__ticketBody { margin: 0; display: grid; gap: 7px; }
.aa-apply__ticketBody > div { display: grid; grid-template-columns: 40% 1fr; gap: 10px; align-items: baseline; }
.aa-apply__ticketBody dt { font-size: 12px; color: rgba(255, 255, 255, 0.6); }
.aa-apply__ticketBody dd { margin: 0; font-size: 13px; font-weight: 600; word-break: break-word; }
.aa-apply__ticketBody dd i { font-style: normal; font-weight: 400; color: rgba(255, 255, 255, 0.42); }
.aa-apply__ticketEmpty { margin: 0; font-size: 12.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.55); }

.aa-apply__media { flex: none; margin: auto 0 0; position: relative; border-radius: var(--aa-radius-lg); overflow: hidden; box-shadow: var(--aa-shadow-3); }
.aa-apply__media img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.aa-apply__media figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 22px 14px 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: linear-gradient(transparent, rgba(8, 40, 38, 0.88));
}

/* ---- Main column --------------------------------------------------------- */
.aa-apply__main {
  padding: clamp(20px, 3.4vw, 46px) clamp(18px, 4vw, 56px) 60px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: stretch;
}
.aa-apply__bar { width: 100%; max-width: 720px; margin: 0 auto; }
.aa-apply__barTop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.aa-apply__kicker {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--aa-orange-text);
}
.aa-apply__pct { font-size: 12px; font-weight: 600; color: var(--aa-ink-mute); }
.aa-apply__track { height: 6px; border-radius: var(--aa-radius-pill); background: #e7ecee; overflow: hidden; }
.aa-apply__fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--aa-green), var(--aa-orange));
  transition: width 0.45s var(--aa-ease);
}

.aa-apply__card {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  box-sizing: border-box;
  background: var(--aa-surface);
  border: 1px solid var(--aa-line);
  border-radius: var(--aa-radius-lg);
  box-shadow: var(--aa-shadow-2);
  padding: clamp(20px, 2.6vw, 34px);
}
.aa-apply__stepTitle { margin: 0 0 6px; font-size: clamp(20px, 2.2vw, 26px); font-weight: 800; letter-spacing: -0.01em; color: var(--aa-ink); }
.aa-apply__stepSub { margin: 0 0 20px; font-size: 14px; line-height: 1.6; color: var(--aa-ink-mute); }

.aa-apply__step { display: flex; flex-wrap: wrap; gap: 20px; }
.aa-apply__step--fwd { animation: aa-step-fwd 0.32s var(--aa-ease) both; }
.aa-apply__step--bwd { animation: aa-step-bwd 0.32s var(--aa-ease) both; }
.aa-apply__field { flex: 1 1 100%; min-width: 0; }
.aa-apply__field--half { flex: 1 1 240px; }

.aa-apply__label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--aa-ink);
}
.aa-apply__optional {
  font-size: 11px;
  font-weight: 500;
  color: var(--aa-ink-mute);
  background: var(--aa-surface-soft);
  padding: 1px 8px;
  border-radius: var(--aa-radius-pill);
}
.aa-apply__help { margin: 7px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--aa-ink-mute); }
.aa-apply__fieldError { margin: 7px 0 0; font-size: 12.5px; font-weight: 600; color: #b3362a; }

.aa-apply__input,
.aa-apply__select {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 15px;
  font-family: inherit;
  font-size: 15.5px;
  color: var(--aa-ink);
  background: var(--aa-surface);
  border: 1.5px solid var(--aa-line);
  border-radius: var(--aa-radius-md);
  transition: border-color var(--aa-dur) var(--aa-ease), box-shadow var(--aa-dur) var(--aa-ease);
}
.aa-apply__input:focus,
.aa-apply__select:focus {
  outline: none;
  border-color: var(--aa-green);
  box-shadow: 0 0 0 4px rgba(112, 182, 68, 0.18);
}
.aa-apply__textarea { resize: vertical; min-height: 96px; line-height: 1.55; }
.aa-apply__select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23232a33' stroke-width='2' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
}

/* ---- Choice cards -------------------------------------------------------- */
.aa-apply__choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.aa-apply__choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 14px;
  text-align: left;
  border: 1.5px solid var(--aa-line);
  border-radius: var(--aa-radius-md);
  background: var(--aa-surface);
  font-family: inherit;
  cursor: pointer;
  transition: all var(--aa-dur) var(--aa-ease);
}
.aa-apply__choice:hover { border-color: #c9d3d7; transform: translateY(-1px); box-shadow: var(--aa-shadow-1); }
.aa-apply__choice.is-on {
  border-color: var(--aa-orange);
  background: linear-gradient(180deg, rgba(238, 135, 34, 0.09), rgba(238, 135, 34, 0.03));
  box-shadow: 0 6px 18px rgba(238, 135, 34, 0.16);
}
.aa-apply__tick {
  flex: none;
  width: 19px;
  height: 19px;
  margin-top: 1px;
  border-radius: 50%;
  border: 1.5px solid #c9d3d7;
  position: relative;
  transition: all var(--aa-dur) var(--aa-ease);
}
.aa-apply__choice.is-on .aa-apply__tick { border-color: var(--aa-orange); background: var(--aa-orange); }
.aa-apply__choice.is-on .aa-apply__tick::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(43deg);
}
.aa-apply__choiceText { display: grid; gap: 2px; }
.aa-apply__choiceText b { font-size: 14px; font-weight: 700; color: var(--aa-ink); }
.aa-apply__choiceText em { font-style: normal; font-size: 12px; color: var(--aa-ink-mute); }

/* ---- Range --------------------------------------------------------------- */
.aa-apply__rangeWrap { display: flex; align-items: center; gap: 14px; }
.aa-apply__range {
  flex: 1;
  appearance: none;
  -webkit-appearance: none;
  height: 6px;
  border-radius: var(--aa-radius-pill);
  background: linear-gradient(90deg, var(--aa-orange) var(--aa-fill, 30%), #e7ecee var(--aa-fill, 30%));
  cursor: pointer;
}
.aa-apply__range::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--aa-orange);
  box-shadow: var(--aa-shadow-1);
}
.aa-apply__range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--aa-orange);
}
.aa-apply__rangeOut {
  flex: none;
  min-width: 92px;
  text-align: center;
  padding: 6px 10px;
  border-radius: var(--aa-radius-pill);
  background: var(--aa-green-deep);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
}

/* ---- Passport photo ------------------------------------------------------ */
.aa-apply__photo { display: grid; gap: 10px; }
.aa-apply__photoInput { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.aa-apply__photoDrop {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  border: 1.5px dashed #c9d3d7;
  border-radius: var(--aa-radius-md);
  background: var(--aa-surface-soft);
  transition: all var(--aa-dur) var(--aa-ease);
}
.aa-apply__photoDrop:hover { border-color: var(--aa-orange); background: rgba(238, 135, 34, 0.05); }
.aa-apply__photoDrop.is-over { border-color: var(--aa-orange); border-style: solid; background: rgba(238, 135, 34, 0.09); }
.aa-apply__photoFrame {
  flex: none;
  display: grid;
  place-items: center;
  width: 63px;
  height: 81px;
  border: 1.5px solid var(--aa-line);
  border-radius: 8px;
  background: var(--aa-surface);
  color: var(--aa-orange);
  font-size: 24px;
  font-weight: 800;
}
.aa-apply__photoFrame em { font-size: 10.5px; font-style: normal; font-weight: 700; color: var(--aa-ink-mute); text-align: center; }
.aa-apply__photoDropText { display: grid; gap: 3px; min-width: 0; }
.aa-apply__photoDropText b { font-size: 14px; font-weight: 700; color: var(--aa-ink); }
.aa-apply__photoDropText em { font-style: normal; font-size: 12.5px; color: var(--aa-ink-mute); }

.aa-apply__photoIs { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1.5px solid var(--aa-line); border-radius: var(--aa-radius-md); background: var(--aa-surface); }
.aa-apply__photoShot { flex: none; width: 70px; height: 90px; object-fit: cover; border-radius: 8px; border: 1px solid var(--aa-line); background: var(--aa-surface-soft); }
.aa-apply__photoMeta { display: grid; gap: 4px; min-width: 0; }
.aa-apply__photoMeta b { font-size: 13.5px; font-weight: 700; color: var(--aa-ink); }
.aa-apply__photoMeta span { font-size: 12.5px; color: var(--aa-ink-mute); }
.aa-apply__photoBtns { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.aa-apply__ghost--sm { padding: 7px 12px; font-size: 12.5px; }
.aa-apply__link { border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--aa-ink-mute); text-decoration: underline; cursor: pointer; }
.aa-apply__link:hover { color: #b3362a; }
.aa-apply__photoTips { margin: 0; padding: 0 0 0 18px; display: grid; gap: 3px; font-size: 12px; line-height: 1.5; color: var(--aa-ink-mute); }
.aa-apply__mini { width: 26px; height: 34px; object-fit: cover; border-radius: 4px; vertical-align: middle; border: 1px solid var(--aa-line); }
.aa-apply__reviewPhoto { width: 62px; height: 80px; object-fit: cover; border-radius: 7px; border: 1px solid var(--aa-line); display: block; }

/* ---- Program picker ------------------------------------------------------ */
.aa-apply__program { display: grid; gap: 14px; margin-bottom: 22px; }
.aa-apply__picker { display: grid; gap: 12px; }
.aa-apply__search { background: var(--aa-surface-soft); }
.aa-apply__pickList { display: grid; gap: 8px; max-height: 330px; overflow-y: auto; padding-right: 4px; }
.aa-apply__pick {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border: 1.5px solid var(--aa-line);
  border-radius: var(--aa-radius-md);
  background: var(--aa-surface);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: all var(--aa-dur) var(--aa-ease);
}
.aa-apply__pick:hover { border-color: #c9d3d7; transform: translateX(2px); }
.aa-apply__pick.is-on { border-color: var(--aa-orange); background: rgba(238, 135, 34, 0.06); }
.aa-apply__pickImg { flex: none; width: 58px; height: 42px; border-radius: 8px; overflow: hidden; background: var(--aa-surface-soft); }
.aa-apply__pickImg img { width: 100%; height: 100%; object-fit: cover; }
.aa-apply__pickBody { display: grid; gap: 2px; min-width: 0; flex: 1; }
.aa-apply__pickBody b { font-size: 14px; font-weight: 700; color: var(--aa-ink); }
.aa-apply__pickBody em { font-style: normal; font-size: 12px; color: var(--aa-ink-mute); }
.aa-apply__pickPrice { flex: none; font-size: 13px; font-weight: 800; color: var(--aa-green-deep); }

.aa-apply__chosen {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1.5px solid var(--aa-green);
  border-radius: var(--aa-radius-md);
  background: linear-gradient(120deg, rgba(112, 182, 68, 0.1), rgba(17, 74, 71, 0.05));
}
.aa-apply__chosenImg { flex: none; width: 84px; height: 62px; border-radius: 10px; overflow: hidden; }
.aa-apply__chosenImg img { width: 100%; height: 100%; object-fit: cover; }
.aa-apply__chosenBody { display: grid; gap: 2px; flex: 1; min-width: 0; }
.aa-apply__chosenBody em { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--aa-green-deep); }
.aa-apply__chosenBody b { font-size: 16px; font-weight: 800; color: var(--aa-ink); }
.aa-apply__chosenBody span { font-size: 12.5px; color: var(--aa-ink-mute); }
.aa-apply__change {
  flex: none;
  border: 1px solid var(--aa-line);
  border-radius: var(--aa-radius-pill);
  background: var(--aa-surface);
  color: var(--aa-green-deep);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  padding: 7px 13px;
  cursor: pointer;
}
.aa-apply__change:hover { border-color: var(--aa-green-deep); }

.aa-apply__plans { display: grid; gap: 8px; }
.aa-apply__plan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1.5px solid var(--aa-line);
  border-radius: var(--aa-radius-md);
  background: var(--aa-surface);
  font-family: inherit;
  cursor: pointer;
  transition: all var(--aa-dur) var(--aa-ease);
}
.aa-apply__plan b { font-size: 14px; font-weight: 700; color: var(--aa-ink); }
.aa-apply__plan span { font-size: 13.5px; font-weight: 800; color: var(--aa-green-deep); }
.aa-apply__plan.is-on { border-color: var(--aa-orange); background: rgba(238, 135, 34, 0.07); }
.aa-apply__payNote { margin: 0; font-size: 12.5px; color: var(--aa-ink-mute); }

/* ---- Review block -------------------------------------------------------- */
.aa-apply__review {
  margin-top: 24px;
  padding: 18px;
  border: 1px solid var(--aa-line);
  border-radius: var(--aa-radius-md);
  background: var(--aa-surface-soft);
}
.aa-apply__reviewTitle {
  display: block;
  margin-bottom: 12px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--aa-ink-mute);
}
.aa-apply__review dl { margin: 0; display: grid; gap: 8px; }
.aa-apply__review dl > div { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; gap: 12px; }
.aa-apply__review dt { font-size: 12.5px; color: var(--aa-ink-mute); }
.aa-apply__review dd { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--aa-ink); word-break: break-word; }
.aa-apply__edit {
  margin-top: 14px;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--aa-green-deep);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
}

/* ---- Footer of the card -------------------------------------------------- */
.aa-apply__error {
  margin-top: 16px;
  padding: 11px 13px;
  border-radius: var(--aa-radius-sm);
  background: rgba(192, 57, 43, 0.08);
  color: #b3362a;
  font-size: 13px;
}
.aa-apply__nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 26px; }
.aa-apply__cta {
  border: 0;
  border-radius: var(--aa-radius-md);
  background: linear-gradient(135deg, var(--aa-orange), var(--aa-orange-2));
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  padding: 14px 26px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(242, 101, 34, 0.3);
  text-decoration: none;
  transition: transform var(--aa-dur) var(--aa-ease), box-shadow var(--aa-dur) var(--aa-ease);
}
.aa-apply__cta:hover { color: #fff; text-decoration: none; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(242, 101, 34, 0.38); }
.aa-apply__cta:disabled { opacity: 0.7; cursor: default; transform: none; }
.aa-apply__ghost {
  border: 1px solid var(--aa-line);
  border-radius: var(--aa-radius-md);
  background: var(--aa-surface);
  color: var(--aa-ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 13px 20px;
  cursor: pointer;
  text-decoration: none;
}
.aa-apply__ghost:hover { text-decoration: none; border-color: var(--aa-green-deep); color: var(--aa-green-deep); }
.aa-apply__fine { margin: 18px 0 0; font-size: 12px; line-height: 1.6; color: var(--aa-ink-mute); }

/* ---- Confirmation -------------------------------------------------------- */
.aa-done {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(22px, 4vw, 56px);
  font-family: var(--aa-font);
  background:
    radial-gradient(900px 560px at 50% -10%, #17635f 0%, var(--aa-green-deep) 55%, var(--aa-green-dark) 100%);
}
.aa-done__inner {
  width: 100%;
  max-width: 720px;
  text-align: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--aa-radius-lg);
  box-shadow: var(--aa-shadow-3);
  padding: clamp(24px, 3.4vw, 42px);
  animation: aa-quick-in 0.34s var(--aa-ease) both;
}
.aa-done__badge { width: min(180px, 44vw); height: auto; border-radius: var(--aa-radius-lg); }
.aa-done__kicker {
  margin: 14px 0 2px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--aa-orange-text);
}
.aa-done__inner h1 { margin: 0 0 10px; font-size: clamp(24px, 3vw, 34px); font-weight: 800; letter-spacing: -0.01em; }
.aa-done__lead { margin: 0 auto 24px; max-width: 54ch; font-size: 14.5px; line-height: 1.65; color: rgba(255, 255, 255, 0.78); }
.aa-done__timeline { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 12px; text-align: left; }
.aa-done__timeline li {
  position: relative;
  padding: 12px 14px 12px 44px;
  border-radius: var(--aa-radius-md);
  background: rgba(255, 255, 255, 0.07);
  counter-increment: done;
}
.aa-done__timeline { counter-reset: done; }
.aa-done__timeline li::before {
  content: counter(done);
  position: absolute;
  left: 13px;
  top: 13px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--aa-orange);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}
.aa-done__timeline b { display: block; font-size: 14px; }
.aa-done__timeline span { font-size: 13px; color: rgba(255, 255, 255, 0.72); }
.aa-done__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.aa-done__actions .aa-apply__ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.aa-done__actions .aa-apply__ghost:hover { color: #fff; border-color: #fff; }
.aa-done__receipt { margin-top: 24px; text-align: left; }
.aa-done__receipt summary { cursor: pointer; font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, 0.8); }
.aa-done__receipt dl { margin: 14px 0 0; display: grid; gap: 7px; }
.aa-done__receipt dl > div { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: 12px; }
.aa-done__receipt dt { font-size: 12px; color: rgba(255, 255, 255, 0.6); }
.aa-done__receipt dd { margin: 0; font-size: 13px; font-weight: 600; }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 1080px) {
  .aa-apply { grid-template-columns: 1fr; }
  .aa-apply__rail { position: static; height: auto; overflow: visible; }
  .aa-apply__media { display: none; }
  .aa-apply__railSteps { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; }
  .aa-apply__railSteps button { font-size: 12px; padding: 8px 6px; }
}
@media (max-width: 620px) {
  /* The card already names the current step; a 5-row ladder just delays the form. */
  .aa-apply__railSteps { display: none; }
  .aa-apply__intro { display: none; }
  .aa-apply__choices { grid-template-columns: 1fr; }
  .aa-apply__nav { flex-direction: column-reverse; align-items: stretch; }
  .aa-apply__nav .aa-apply__cta,
  .aa-apply__nav .aa-apply__ghost { width: 100%; text-align: center; }
  .aa-apply__review dl > div,
  .aa-done__receipt dl > div { grid-template-columns: 1fr; gap: 2px; }
  .aa-apply__chosen { flex-wrap: wrap; }
}



/* ============================================================================
   Course thumbnails — the branded 16:9 set (Images/course-thumbs) has to crop,
   not stretch, inside the recovered card boxes, which pin a 150px height.
   ============================================================================ */
body .productBox .img img,
body .joBox .img img,
body .certGrid .img img,
body .courseBox img,
body .certificationBox img,
body .stm_lms_courses__single img {
  object-fit: cover;
}

/* ==========================================================================
   Course syllabus (ASP pages) + curriculum (MasterStudy pages) + FAQ
   --------------------------------------------------------------------------
   Two templates, one problem: the content is there and reads as if it were
   not. The ASP pages collapse every module and hide each lesson description
   behind a second-level toggle, so an unopened page looks empty; the three
   MasterStudy pages ship a full .stm-curriculum that their own archived
   stylesheet hides (`#curriculum{display:none!important}` plus the Curriculum
   tab), so the tab is missing entirely. Those hiders carry no id, so the
   overrides below win on specificity and only need !important where the
   archived declaration has it.
   ============================================================================ */

/* ---- ASP: module rows ----------------------------------------------------- */

#root:has(.syllabusCon) .syllabusCon { counter-reset: aaModule; position: relative; margin-top: 8px; }

#root:has(.syllabusCon) .syllabusCon:after {
  background: var(--aa-line);
  width: 2px;
  left: 32px;
}

#root:has(.syllabusCon) .syllabusMQ {
  counter-increment: aaModule;
  min-height: 0;
  margin: 0 0 12px;
  padding: 18px 62px 18px 82px;
  border: 1px solid var(--aa-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--aa-shadow-1);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--aa-ink-mute);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

#root:has(.syllabusCon) .syllabusMQ:hover {
  border-color: rgba(17, 74, 71, .32);
  box-shadow: var(--aa-shadow-2);
  transform: translateY(-1px);
}

/* The recovered marker is a hand-drawn green circle; a numbered chip says the
   same thing and keeps its place on the timeline. */
#root:has(.syllabusCon) .syllabusMQ > img { display: none; }

#root:has(.syllabusCon) .syllabusMQ::before {
  content: counter(aaModule, decimal-leading-zero);
  position: absolute;
  left: 12px;
  top: 16px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--aa-green), var(--aa-green-deep));
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow: 0 4px 12px rgba(17, 74, 71, .22);
}

#root:has(.syllabusCon) .syllabusMQ span {
  padding-bottom: 4px;
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--aa-ink);
}

/* Toggle affordance: the empty sprite div the module header carries becomes a
   chevron in a soft disc. The FAQ .qBox holds the question itself, so it keeps
   the site-wide .faqBox styling above and is deliberately not matched here. */
#root:has(.syllabusCon) .syllabusMQ > .qBox {
  position: absolute;
  right: 16px;
  top: 20px;
  padding: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--aa-surface-soft);
}

#root:has(.syllabusCon) .syllabusMQ > .qBox:after {
  content: '';
  background: none;
  width: 9px;
  height: 9px;
  right: auto;
  top: auto;
  inset: 0;
  margin: auto;
  opacity: 1;
  border-right: 2px solid var(--aa-green-deep);
  border-bottom: 2px solid var(--aa-green-deep);
  border-radius: 1px;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .2s ease;
}

/* The first open module gets .active from courseSyllabus.js; every later one is
   opened by slideToggle, which leaves display:block inline on its answer list. */
#root:has(.syllabusCon) .syllabusMQ.active > .qBox:after,
#root:has(.syllabusCon) .syllabusMQ:has(+ .syllabusMA[style*="block"]) > .qBox:after {
  transform: rotate(-135deg) translate(-1px, -1px);
}

/* A module whose lesson list was never captured is not a question, so it gets
   no chevron and no hover lift (courseSyllabus.js marks it .isLeaf). */
#root:has(.syllabusCon) .syllabusMQ.isLeaf {
  padding-right: 22px;
  cursor: default;
}

#root:has(.syllabusCon) .syllabusMQ.isLeaf:hover {
  transform: none;
  box-shadow: var(--aa-shadow-1);
}

#root:has(.syllabusCon) .syllabusMQ.isLeaf > .qBox { display: none; }

#root:has(.syllabusCon) .syllabusMA.isEmpty { display: none !important; }

/* ---- ASP: lesson rows ----------------------------------------------------- */

#root:has(.syllabusCon) .syllabusMA { padding: 0 0 20px 82px; }

#root:has(.syllabusCon) .syllabusMA ul { border-top: 0; }

#root:has(.syllabusCon) .syllabusMA ul li {
  border-bottom: 1px dashed var(--aa-line);
  position: relative;
}

#root:has(.syllabusCon) .syllabusMA ul li:last-child { border-bottom: 0; }

/* The capture paints each lesson row pale blue inline, and wraps every
   description in a second accordion; both go, so a lesson is one readable row. */
#root:has(.syllabusCon) .syllabusMA .qBox {
  background: none !important;
  padding: 14px 0 3px;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--aa-ink);
  cursor: default;
}

#root:has(.syllabusCon) .syllabusMA .qBox:after { display: none; }

#root:has(.syllabusCon) .syllabusMA .qBox h6,
#root:has(.syllabusCon) .syllabusMA h6.dots {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

#root:has(.syllabusCon) .syllabusMA .qBox h6:before { display: none; }

#root:has(.syllabusCon) .syllabusMA .aBox {
  display: block !important;
  background: none !important;
  padding: 0 0 14px;
  font-size: 14px;
  line-height: 1.62;
  color: var(--aa-ink-mute);
}

/* ---- The count chip courseSyllabus.js appends to the Syllabus heading ------ */

#root:has(.syllabusCon) .syllabusHd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

#root:has(.syllabusCon) .aaSyllabusMeta {
  padding: 6px 12px;
  border: 1px solid #d7ebd2;
  border-radius: 999px;
  background: #eef7ea;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--aa-green-deep);
}

/* ---- MasterStudy: bring the hidden Curriculum tab back -------------------- */

/* Two hiders in the archived page: the panel and its tab, both !important and
   both without an id, so these win. */
#root:has(.stm-curriculum) .tab-content #curriculum.active { display: block !important; }

#root:has(.stm-curriculum) ul.nav-tabs > li:nth-child(2) { display: block !important; }

/* The theme's parts CSS is not in the archive, so the pane switch is defined
   here rather than trusted to a stylesheet that never loads. */
#root:has(.stm-curriculum) .tab-content > .tab-pane { display: none; }

#root:has(.stm-curriculum) .tab-content > .tab-pane.active { display: block; }

#root:has(.stm-curriculum) ul.nav-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
  padding: 0;
  border-bottom: 0;
  list-style: none;
}

#root:has(.stm-curriculum) ul.nav-tabs > li { float: none; margin: 0; }

#root:has(.stm-curriculum) ul.nav-tabs > li > a {
  display: block;
  padding: 10px 18px;
  border: 1px solid var(--aa-line);
  border-radius: 999px;
  background: #fff;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--aa-ink);
}

/* The theme marks its active tab with !important navy text and a blue top
   border; an id-level !important is the only thing that clears both. */
#root:has(.stm-curriculum) ul.nav-tabs > li.active > a,
#root:has(.stm-curriculum) ul.nav-tabs > li > a:hover {
  background: var(--aa-green-deep) !important;
  border: 1px solid var(--aa-green-deep) !important;
  color: #fff !important;
}

#root:has(.stm-curriculum) .stm-curriculum {
  display: grid;
  gap: 14px;
  padding: 4px 0 0;
}

#root:has(.stm-curriculum) .stm-curriculum-section {
  padding: 14px 16px;
  border: 1px solid var(--aa-line);
  border-left: 4px solid var(--aa-orange);
  border-radius: 12px;
  background: var(--aa-surface-soft);
}

#root:has(.stm-curriculum) .stm-curriculum-section h3 {
  margin: 0;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--aa-ink);
}

/* Four children in source order (num, icon, title, preview, meta) and the icon
   is not second in the design, so every cell is placed by hand: an auto row
   would wrap the title onto a second line of the grid, because sparse packing
   moves to the next row whenever a column number goes backwards. */
#root:has(.stm-curriculum) .stm-curriculum-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--aa-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--aa-shadow-1);
}

#root:has(.stm-curriculum) .stm-curriculum-item__num {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #eef7ea;
  font-size: 13px;
  font-weight: 700;
  color: var(--aa-green-deep);
}

#root:has(.stm-curriculum) .stm-curriculum-item__title {
  grid-area: 1 / 2;
}

#root:has(.stm-curriculum) .stm-curriculum-item__title .heading_font {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--aa-ink);
}

/* The glyph needs the theme's own icon font; the type name is the same
   information and the markup already carries it as the tooltip title. */
#root:has(.stm-curriculum) .stm-curriculum-item__icon {
  grid-area: 1 / 3;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f2f5f7;
  color: var(--aa-ink-mute);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

#root:has(.stm-curriculum) .stm-curriculum-item__icon > i { display: none; }

#root:has(.stm-curriculum) .stm-curriculum-item__icon::after { content: attr(title); }

#root:has(.stm-curriculum) .stm-curriculum-item__meta {
  grid-area: 1 / 4;
  font-size: 12.5px;
  color: var(--aa-ink-mute);
  white-space: nowrap;
}

/* Two of the three captures carry a per-lesson description as an unplaced sixth
   child, which the auto flow drops into a row of its own. */
#root:has(.stm-curriculum) .stm-curriculum-item__excerpt {
  grid-area: 2 / 2 / 3 / -1;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--aa-ink-soft);
}

#root:has(.stm-curriculum) .stm-curriculum-item__excerpt p {
  margin: 0;
}

#root:has(.stm-curriculum) .stm-curriculum-item__preview { display: none; }

/* ---- Small screens -------------------------------------------------------- */

@media only screen and (max-width: 767px) {
  #root:has(.syllabusCon) .syllabusCon:after { left: 22px; }

  #root:has(.syllabusCon) .syllabusMQ { padding: 16px 56px 16px 62px; }

  #root:has(.syllabusCon) .syllabusMQ::before {
    left: 6px;
    top: 14px;
    width: 34px;
    height: 34px;
    font-size: 12.5px;
  }

  #root:has(.syllabusCon) .syllabusMQ > .qBox { right: 12px; top: 16px; width: 28px; height: 28px; }

  #root:has(.syllabusCon) .syllabusMQ.isLeaf { padding-right: 16px; }

  #root:has(.syllabusCon) .syllabusMA { padding: 0 0 18px 20px; }

  #root:has(.stm-curriculum) .stm-curriculum-item {
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: start;
    row-gap: 8px;
  }

  #root:has(.stm-curriculum) .stm-curriculum-item__num { width: 28px; height: 28px; font-size: 12px; }

  #root:has(.stm-curriculum) .stm-curriculum-item__icon { justify-self: start; }

  #root:has(.stm-curriculum) .stm-curriculum-item__meta { grid-area: 2 / 2 / 3 / -1; }

  #root:has(.stm-curriculum) .stm-curriculum-item__excerpt { grid-area: 3 / 2 / 4 / -1; }
}

/* ---- Live catalog filter sheet -------------------------------------------------
   The recovered sidebar's checkbox lists belonged to the dead ASP.NET contract, so
   the sheet is rebuilt from live facets (format + price band) with a count, scrim,
   Escape and a slide-in. Desktop keeps the same facets as a plain sidebar. */
.lmsSheet {
  display: flex;
  flex-direction: column;
  font-family: var(--aa-font);
  text-align: left;
}

.lmsSheet__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--aa-line);
}

.lmsSheet__head b { font-size: 17px; color: var(--aa-ink); }
.lmsSheet__count { font-size: 12.5px; color: var(--aa-ink-mute); }

.lmsSheet__x {
  margin-left: auto;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--aa-ink-mute);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.lmsSheet__x:hover { background: var(--aa-line-soft, #eef2f0); color: var(--aa-ink); }

.lmsSheet__body { padding: 4px 20px; }

.lmsSheet__group { padding: 14px 0; border-bottom: 1px dashed var(--aa-line); }
.lmsSheet__group:last-child { border-bottom: 0; }

.lmsSheet__groupHd {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--aa-ink-mute);
  font-weight: 700;
  margin-bottom: 6px;
}

.lmsSheet__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 14px;
  color: var(--aa-ink);
  cursor: pointer;
}

.lmsSheet__opt input { accent-color: var(--aa-green, #2e9b7c); width: 16px; height: 16px; margin: 0; }

.lmsSheet__foot {
  display: flex;
  gap: 10px;
  padding: 14px 20px calc(18px + env(safe-area-inset-bottom, 0px));
}

.lmsSheet__reset,
.lmsSheet__apply {
  border: 0;
  border-radius: 12px;
  padding: 13px 16px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
}

.lmsSheet__reset { flex: 1; background: var(--aa-line-soft, #eef2f0); color: var(--aa-ink); }
.lmsSheet__apply {
  flex: 2;
  background: linear-gradient(135deg, var(--aa-orange, #ee8722), var(--aa-orange-2, #e56715));
  color: #fff;
  box-shadow: 0 10px 22px rgba(238, 135, 34, 0.28);
}

/* Zero matches: a loud orange "Show 0 courses" invites a dead end, so the button steps
   back visually and the Reset beside it becomes the way out. */
.lmsSheet__apply.is-empty {
  background: var(--aa-line-soft, #eef2f0);
  color: #6a7a75;
  box-shadow: none;
}

.filterScrim {
  position: fixed;
  inset: 0;
  z-index: calc(var(--oa-z-dialog, 2200) - 1);
  background: rgba(8, 20, 18, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.filterScrim.active { opacity: 1; pointer-events: auto; }

@media (max-width: 768px) {
  .listingLft .filterPopup.lmsSheet {
    display: flex;
    transform: translateX(102%);
    transition: transform 0.3s var(--aa-ease, ease), visibility 0s linear 0.3s;
    /* Pushed off-canvas is not out of reach: without this the closed sheet's radios stay
       tabbable and screen readers announce a filter panel nobody can see. */
    visibility: hidden;
    z-index: var(--oa-z-dialog, 2200);
  }

  .listingLft .filterPopup.lmsSheet.active { transform: none; visibility: visible; transition-delay: 0s; }

  .listingLft .filterPopup.lmsSheet .lmsSheet__head {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
  }
}

@media (min-width: 769px) {
  .lmsSheet__x { display: none; }
  .lmsSheet__count { margin-left: auto; }
  .lmsSheet__foot { padding: 10px 20px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .listingLft .filterPopup.lmsSheet,
  .filterScrim { transition: none; }
}


/* ==========================================================================
   Crash recovery — the boundary's replacement for the old white screen.
   ========================================================================== */
.aa-crash {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 62vh;
  padding: 32px 18px;
  font-family: var(--aa-font, inherit);
}

.aa-crash__card {
  max-width: 460px;
  padding: 26px 24px 22px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--aa-line-soft, #eef2f0);
  box-shadow: 0 18px 44px rgba(14, 46, 24, 0.12);
}

.aa-crash__mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--aa-accent, #cbff4d);
  color: #0e0e0e;
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 14px;
}

.aa-crash__card h2 {
  margin: 0 0 8px;
  font-size: 20px;
  color: #0e0e0e;
}

.aa-crash__card p {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.55;
  color: #4a5a54;
}

.aa-crash__actions { display: flex; flex-wrap: wrap; gap: 10px; }

.aa-crash__btn {
  appearance: none;
  border: none;
  border-radius: var(--aa-radius-pill, 999px);
  padding: 11px 20px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  background: #0e0e0e;
  color: #f3fff3;
}

.aa-crash__btn.is-quiet {
  background: transparent;
  color: #2a3b34;
  border: 1px solid var(--aa-line, #d7e0da);
}

.aa-crash__btn:focus-visible { outline: 3px solid rgba(203, 255, 77, 0.6); outline-offset: 2px; }

@media (prefers-color-scheme: dark) {
  .aa-crash__card { background: #14170f; border-color: #2a3327; }
  .aa-crash__card h2 { color: #f3fff3; }
  .aa-crash__card p { color: #9fb0a4; }
  .aa-crash__btn { background: var(--aa-accent, #cbff4d); color: #0e0e0e; }
  .aa-crash__btn.is-quiet { background: transparent; color: #d6e3d8; border-color: #3a4636; }
}