/* TDAI responsive layer
 * The legacy pages are styled with inline style="" attributes, so every
 * override here is attribute-selector based and uses !important.
 * The runtime re-serializes inline styles ("font-size: 44px"), so each
 * pattern is matched both with and without the space after the colon.
 * Everything lives inside media queries -> zero desktop impact.
 */

/* LIVE badge lines: keep icon inline with its label at every width */
.tdai-live-badge-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Keep every desktop header item centred on the action-button axis. */
header > div {
  align-items: center !important;
}
header > div > a:first-child img {
  display: block;
}
header nav {
  align-items: center !important;
}
header nav > a,
header nav > .tdai-dd,
header nav > .tdai-dd > a {
  display: inline-flex !important;
  align-items: center !important;
}


/* ---------- Tablet and below ---------- */
@media (max-width: 1024px) {
  html {
    overflow-x: hidden !important;
  }
  body {
    max-width: 100% !important;
  }


  /* the hard desktop floor on every page wrapper.
     NOTE: never set overflow on this wrapper - it would become the scroll
     container for position:sticky and break the sticky header/banner. */
  [style*="min-width:1080px"],
  [style*="min-width: 1080px"] {
    min-width: 0 !important;
    width: 100% !important;
  }


  /* containers */
  [style*="max-width:1280px"],
  [style*="max-width: 1280px"],
  [style*="max-width:1180px"],
  [style*="max-width: 1180px"],
  [style*="max-width:1120px"],
  [style*="max-width: 1120px"] {
    max-width: 100% !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  img,
  video,
  iframe {
    max-width: 100% !important;
  }

  /* 3+ column grids -> 2 columns on tablet */
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns:repeat(5"],
  [style*="grid-template-columns: repeat(5"],
  [style*="grid-template-columns:repeat(6"],
  [style*="grid-template-columns: repeat(6"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* sidebar layouts stack */
  [style*="grid-template-columns:280px"],
  [style*="grid-template-columns: 280px"],
  [style*="grid-template-columns:300px"],
  [style*="grid-template-columns: 300px"],
  [style*="grid-template-columns:320px"],
  [style*="grid-template-columns: 320px"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* the 4-up curriculum comparison grid */
  [style*="grid-template-columns:1.15fr"],
  [style*="grid-template-columns: 1.15fr"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {

  html {
    scroll-padding-top: 100px !important;
  }

  /* legal page sidebars: don't stick on mobile or they overlap the main text */
  nav[style*="position:sticky"][style*="top:110px"],
  nav[style*="position: sticky"][style*="top: 110px"] {
    position: static !important;
    width: 100% !important;
    border-right: none !important;
    padding-right: 0 !important;
    margin-bottom: 24px !important;
    top: auto !important;
  }
  .tdai-legal h2,
  .tdai-legal h3 {
    scroll-margin-top: 20px !important;
  }

  /* LIVE badge: stack on two lines */
  .tdai-live-badge {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }
  .tdai-live-badge-pipe {
    display: none !important;
  }
  .tdai-live-badge-line {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }

  [style*="max-width:1280px"],
  [style*="max-width: 1280px"],
  [style*="max-width:1180px"],
  [style*="max-width: 1180px"],
  [style*="max-width:1120px"],
  [style*="max-width: 1120px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* every multi-column grid collapses */
  [style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
  }
  /* except tight icon/label rows (checkmark bullets etc.) which stay two-up */
  [style*="grid-template-columns:16px"],
  [style*="grid-template-columns: 16px"],
  [style*="grid-template-columns:18px"],
  [style*="grid-template-columns: 18px"],
  [style*="grid-template-columns:20px"],
  [style*="grid-template-columns: 20px"],
  [style*="grid-template-columns:22px"],
  [style*="grid-template-columns: 22px"],
  [style*="grid-template-columns:24px"],
  [style*="grid-template-columns: 24px"],
  [style*="grid-template-columns:26px"],
  [style*="grid-template-columns: 26px"],
  [style*="grid-template-columns:28px"],
  [style*="grid-template-columns: 28px"],
  [style*="grid-template-columns:30px"],
  [style*="grid-template-columns: 30px"],
  [style*="grid-template-columns:32px"],
  [style*="grid-template-columns: 32px"],
  [style*="grid-template-columns:36px"],
  [style*="grid-template-columns: 36px"],
  [style*="grid-template-columns:40px"],
  [style*="grid-template-columns: 40px"],
  [style*="grid-template-columns:44px"],
  [style*="grid-template-columns: 44px"],
  [style*="grid-template-columns:auto 1fr"]:not([style*="1fr 1fr"]),
  [style*="grid-template-columns: auto 1fr"]:not([style*="1fr 1fr"]) {

    grid-template-columns: 26px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
  }

  /* host-network logo grids inside FSDP/Internship cards stay 3-up on mobile
     so the fixed 52px cells don't get blown out to full card width */
  [style*="grid-template-columns:repeat(3,1fr)"][style*="gap:8px"],
  [style*="grid-template-columns: repeat(3, 1fr)"][style*="gap: 8px"],
  [style*="grid-template-columns:repeat(3,1fr)"][style*="gap: 8px"],
  [style*="grid-template-columns: repeat(3, 1fr)"][style*="gap:8px"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  /* host-network logo cells: the images have height:100% inside a centered grid,
     which on mobile becomes the intrinsic image height and overflows the 52px cell.
     Force a hard max-height so the logo stays inside the chip. */
  [style*="height:52px"][style*="padding:6px"] img,
  [style*="height: 52px"][style*="padding: 6px"] img,
  [style*="height:52px"][style*="padding: 6px"] img,
  [style*="height: 52px"][style*="padding:6px"] img {
    height: auto !important;
    max-height: 40px !important;
    width: auto !important;
    max-width: 100% !important;
  }

  /* flex rows wrap instead of overflowing */
  [style*="display:flex"]:not([style*="flex-direction:column"]),
  [style*="display: flex"]:not([style*="flex-direction: column"]) {
    flex-wrap: wrap !important;
  }

  /* keep icon + label on the same line; let the label text wrap */
  [style*="display:flex"][style*="align-items:flex-start"]:has(> svg):has(> span),
  [style*="display: flex"][style*="align-items: flex-start"]:has(> svg):has(> span),
  .tdai-icon-row {
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
  }
  [style*="display:flex"][style*="align-items:flex-start"]:has(> svg) > span,
  [style*="display: flex"][style*="align-items: flex-start"]:has(> svg) > span,
  .tdai-icon-row > span,
  .tdai-icon-row > svg + span,
  .tdai-icon-row > div + span,
  .tdai-icon-row > span + span {
    min-width: 0 !important;
    word-break: break-word !important;
  }
  .tdai-icon-row > svg,
  .tdai-icon-row > span svg,
  .tdai-icon-row > span:only-of-type:first-child {
    flex: 0 0 auto !important;
    align-self: flex-start !important;
  }

  /* hero stats row on FSDP: keep all three items in one row on mobile */
  .tdai-hero-stats {
    flex-wrap: nowrap !important;
    gap: 10px !important;
    margin-top: 24px !important;
  }
  .tdai-hero-stats > div {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 5px !important;
  }
  .tdai-hero-stats svg {
    width: 18px !important;
    height: 18px !important;
    margin-top: 0 !important;
  }
  .tdai-hero-stats [style*="font-size:26px"] {
    font-size: 22px !important;
  }
  .tdai-hero-stats [style*="font-size:11.5px"] {
    font-size: 9.5px !important;
    text-align: center !important;
  }
  .tdai-hero-stats > div > div:nth-child(2) {
    width: 100% !important;
    text-align: center !important;
  }
  /* FSDP hero pills: keep Data Analyst + Data Engineer + AI on one line on mobile
     without looking cramped. */
  .tdai-hero-pills {
    gap: 4px !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
  }
  .tdai-hero-pills > span {
    font-size: 13px !important;
    padding: 6px 9px !important;
    letter-spacing: 0 !important;
    border-radius: 7px !important;
    white-space: nowrap !important;
  }
  .tdai-hero-pills .tdai-hero-pill-plus {
    font-size: 13px !important;
    padding: 0 2px !important;
    margin: 0 !important;
    line-height: 1 !important;
  }

  /* AI Engineering hero pills: fit four labels + three plus signs into two lines
     by tightening spacing and reducing text size slightly. */
  .tdai-aie-pills {
    gap: 3px !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
  }
  .tdai-aie-pills > span {
    font-size: 12px !important;
    padding: 5px 8px !important;
    letter-spacing: 0 !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
  }
  .tdai-aie-pills > span[style*="font-size:17px"],
  .tdai-aie-pills > span[style*="font-size: 17px"] {
    font-size: 14px !important;
    padding: 0 1px !important;
    margin: 0 !important;
    line-height: 1 !important;
  }

  /* home page "Not sure which one you need?" CTA row: stack text, button and
     ratings vertically on mobile so the Google/Trustpilot info isn't cut off */
  .tdai-cta-row[style*="gap:24px"][style*="margin-top:32px"],
  .tdai-cta-row[style*="gap: 24px"][style*="margin-top: 32px"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }
  .tdai-cta-row[style*="gap:24px"][style*="margin-top:32px"] > div:first-child,
  .tdai-cta-row[style*="gap: 24px"][style*="margin-top: 32px"] > div:first-child {
    max-width: 100% !important;
  }
  .tdai-cta-row[style*="gap:24px"][style*="margin-top:32px"] > div[style*="margin-left:auto"],
  .tdai-cta-row[style*="gap: 24px"][style*="margin-top: 32px"] > div[style*="margin-left: auto"] {
    margin-left: 0 !important;
    width: 100% !important;
    align-items: flex-start !important;
  }
  .tdai-cta-row[style*="gap:24px"][style*="margin-top:32px"] .tdai-ratings,
  .tdai-cta-row[style*="gap: 24px"][style*="margin-top: 32px"] .tdai-ratings {
    width: 100% !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    margin-top: 4px !important;
  }


  /* text blocks inside a flex row must be allowed to fill and shrink */
  [style*="display:flex"] > div,
  [style*="display: flex"] > div {
    min-width: 0 !important;
  }
  [style*="display:flex"][style*="gap:16px"] > div,
  [style*="display: flex"][style*="gap: 16px"] > div,
  [style*="display:flex"][style*="gap:14px"] > div,
  [style*="display: flex"][style*="gap: 14px"] > div,
  [style*="display:flex"][style*="gap:12px"] > div,
  [style*="display: flex"][style*="gap: 12px"] > div,
  [style*="display:flex"][style*="gap:10px"] > div,
  [style*="display: flex"][style*="gap: 10px"] > div {
    flex: 1 1 0% !important;
  }

  /* AI Engineering Phase A tool chips: keep fixed width so they wrap instead of crushing together */
  [style*="display:flex"][style*="flex-wrap:wrap"][style*="gap:14px 12px"] > div,
  [style*="display:flex"][style*="flex-wrap:wrap"][style*="gap: 14px 12px"] > div,
  [style*="display: flex"][style*="flex-wrap: wrap"][style*="gap: 14px 12px"] > div,
  [style*="display: flex"][style*="flex-wrap: wrap"][style*="gap:14px 12px"] > div {
    flex: none !important;
    width: 66px !important;
    min-width: 0 !important;
  }
  [style*="margin-left:auto"],
  [style*="margin-left: auto"] {
    margin-left: 0 !important;
  }

  /* checkmark bullet flex rows: keep the icon and its text on the same line
     by making the text fill the available space and the checkmark stay fixed.
     (Existing gap-based rules only target > div; these bullets are spans.) */
  span[style*="font-weight:800"][style*="color:#4ca59e"],
  span[style*="font-weight: 800"][style*="color: rgb(76, 165, 158)"],
  span[style*="font-weight:800"][style*="color:#7cc3be"],
  span[style*="font-weight: 800"][style*="color: rgb(124, 195, 190)"],
  span[style*="font-weight:800"][style*="color:#275d5b"],
  span[style*="font-weight: 800"][style*="color: rgb(39, 93, 91)"] {
    flex: none !important;
  }
  span[style*="font-weight:800"][style*="color:#4ca59e"] + span,
  span[style*="font-weight: 800"][style*="color: rgb(76, 165, 158)"] + span,
  span[style*="font-weight:800"][style*="color:#7cc3be"] + span,
  span[style*="font-weight: 800"][style*="color: rgb(124, 195, 190)"] + span,
  span[style*="font-weight:800"][style*="color:#275d5b"] + span,
  span[style*="font-weight: 800"][style*="color: rgb(39, 93, 91)"] + span,
  span[style*="font-weight:800"][style*="color:#4ca59e"] + div,
  span[style*="font-weight: 800"][style*="color: rgb(76, 165, 158)"] + div,
  span[style*="font-weight:800"][style*="color:#7cc3be"] + div,
  span[style*="font-weight: 800"][style*="color: rgb(124, 195, 190)"] + div,
  span[style*="font-weight:800"][style*="color:#275d5b"] + div,
  span[style*="font-weight: 800"][style*="color: rgb(39, 93, 91)"] + div {
    flex: 1 1 0% !important;
    min-width: 0 !important;
  }

  /* em-dash and arrow bullet flex rows: keep the marker and text on the same line
     by making the text fill the available space and the marker stay fixed.
     (Used on Internship, JSA and AI Engineering pages.) */
  span[style*="color: rgb(76, 165, 158)"][style*="flex: 0 0 auto"],
  span[style*="color:rgb(76, 165, 158)"][style*="flex:0 0 auto"],
  span[style*="color:#4ca59e"][style*="flex:none"],
  span[style*="color:#4ca59e"][style*="flex: none"],
  span[style*="color: rgb(238, 130, 118)"][style*="flex: 0 0 auto"],
  span[style*="color:rgb(238, 130, 118)"][style*="flex:0 0 auto"],
  span[style*="color:#ee8276"][style*="flex:none"],
  span[style*="color:#ee8276"][style*="flex: none"],
  span[style*="color: rgb(156, 152, 151)"][style*="flex: 0 0 auto"],
  span[style*="color:rgb(156, 152, 151)"][style*="flex:0 0 auto"],
  span[style*="color:#9c9897"][style*="flex:none"],
  span[style*="color:#9c9897"][style*="flex: none"] {
    flex: none !important;
  }
  span[style*="color: rgb(76, 165, 158)"][style*="flex: 0 0 auto"] + span,
  span[style*="color:rgb(76, 165, 158)"][style*="flex:0 0 auto"] + span,
  span[style*="color:#4ca59e"][style*="flex:none"] + span,
  span[style*="color:#4ca59e"][style*="flex: none"] + span,
  span[style*="color: rgb(238, 130, 118)"][style*="flex: 0 0 auto"] + span,
  span[style*="color:rgb(238, 130, 118)"][style*="flex:0 0 auto"] + span,
  span[style*="color:#ee8276"][style*="flex:none"] + span,
  span[style*="color:#ee8276"][style*="flex: none"] + span,
  span[style*="color: rgb(156, 152, 151)"][style*="flex: 0 0 auto"] + span,
  span[style*="color:rgb(156, 152, 151)"][style*="flex:0 0 auto"] + span,
  span[style*="color:#9c9897"][style*="flex:none"] + span,
  span[style*="color:#9c9897"][style*="flex: none"] + span {
    flex: 1 1 0% !important;
    min-width: 0 !important;
  }


  /* keep the marker and its text on the same line by preventing the parent flex row from wrapping */
  div[style*="display:flex"][style*="gap:11px"]:has(> span[style*="color: rgb(76, 165, 158)"][style*="flex: 0 0 auto"]),
  div[style*="display: flex"][style*="gap: 11px"]:has(> span[style*="color: rgb(76, 165, 158)"][style*="flex: 0 0 auto"]),
  div[style*="display:flex"][style*="gap:11px"]:has(> span[style*="color: rgb(238, 130, 118)"][style*="flex: 0 0 auto"]),
  div[style*="display: flex"][style*="gap: 11px"]:has(> span[style*="color: rgb(238, 130, 118)"][style*="flex: 0 0 auto"]),
  div[style*="display:flex"][style*="gap:11px"]:has(> span[style*="color: rgb(156, 152, 151)"][style*="flex: 0 0 auto"]),
  div[style*="display: flex"][style*="gap: 11px"]:has(> span[style*="color: rgb(156, 152, 151)"][style*="flex: 0 0 auto"]) {
    flex-wrap: nowrap !important;
  }


  /* FSDP arrow bullets (→) with flex:0 0 auto;font-weight:800 and a gap:8px parent */
  span[style*="flex: 0 0 auto"][style*="font-weight:800"] + span,
  span[style*="flex:0 0 auto"][style*="font-weight:800"] + span,
  span[style*="flex: 0 0 auto"][style*="font-weight: 800"] + span,
  span[style*="flex:0 0 auto"][style*="font-weight: 800"] + span {
    flex: 1 1 0% !important;
    min-width: 0 !important;
  }
  div[style*="display:flex"][style*="gap:8px"]:has(> span[style*="flex: 0 0 auto"][style*="font-weight:800"]),
  div[style*="display: flex"][style*="gap: 8px"]:has(> span[style*="flex: 0 0 auto"][style*="font-weight:800"]),
  div[style*="display:flex"][style*="gap:8px"]:has(> span[style*="flex:0 0 auto"][style*="font-weight:800"]),
  div[style*="display: flex"][style*="gap: 8px"]:has(> span[style*="flex:0 0 auto"][style*="font-weight:800"]),
  div[style*="display:flex"][style*="gap:8px"]:has(> span[style*="flex: 0 0 auto"][style*="font-weight: 800"]),
  div[style*="display: flex"][style*="gap: 8px"]:has(> span[style*="flex: 0 0 auto"][style*="font-weight: 800"]),
  div[style*="display:flex"][style*="gap:8px"]:has(> span[style*="flex:0 0 auto"][style*="font-weight: 800"]),
  div[style*="display: flex"][style*="gap: 8px"]:has(> span[style*="flex:0 0 auto"][style*="font-weight: 800"]) {
    flex-wrap: nowrap !important;
  }









  /* the sticky verified banner row stays a single line */
  [style*="padding: 9px 40px"][style*="display: flex"],
  [style*="padding:9px 40px"][style*="display:flex"] {
    flex-wrap: nowrap !important;
    gap: 10px !important;
    font-size: 11px !important;
    padding: 8px 16px !important;
  }

  /* fixed pixel widths go full width (marquee tracks are left alone) */
  [style*="width:620px"],
  [style*="width: 620px"],
  [style*="width:560px"],
  [style*="width: 560px"],
  [style*="width:520px"],
  [style*="width: 520px"],
  [style*="width:480px"],
  [style*="width: 480px"],
  [style*="width:440px"],
  [style*="width: 440px"],
  [style*="width:420px"],
  [style*="width: 420px"],
  [style*="width:400px"],
  [style*="width: 400px"],
  [style*="width:380px"],
  [style*="width: 380px"],
  [style*="width:360px"],
  [style*="width: 360px"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* enrol dropdowns on mobile: stop 340px absolute panel from overflowing
     the card; make it a full-width block below the button */
  .tdai-enrol {
    position: relative !important;
    width: 100% !important;
    justify-self: stretch !important;
  }
  .tdai-enrol > button {
    width: 100% !important;
    justify-content: center !important;
  }
  .tdai-enrol-menu {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-top: 10px !important;
    box-sizing: border-box !important;
  }
  .tdai-enrol-menu > div {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .tdai-enrol-menu > div > div {
    flex-wrap: nowrap !important;
    gap: 10px !important;
  }
  .tdai-enrol-menu > div > div > div:first-child {
    min-width: 0 !important;
  }
  .tdai-enrol-menu > div > div > a {
    flex: none !important;
    white-space: nowrap !important;
  }




  /* fluid headline scale */
  [style*="font-size:74px"],
  [style*="font-size: 74px"],
  [style*="font-size:66px"],
  [style*="font-size: 66px"],
  [style*="font-size:62px"],
  [style*="font-size: 62px"],
  [style*="font-size:60px"],
  [style*="font-size: 60px"],
  [style*="font-size:58px"],
  [style*="font-size: 58px"],
  [style*="font-size:56px"],
  [style*="font-size: 56px"],
  [style*="font-size:52px"],
  [style*="font-size: 52px"] {
    font-size: clamp(30px, 8.4vw, 40px) !important;
    line-height: 1.1 !important;
    max-width: 100% !important;
    letter-spacing: -0.02em !important;
  }
  [style*="font-size:44px"],
  [style*="font-size: 44px"],
  [style*="font-size:40px"],
  [style*="font-size: 40px"],
  [style*="font-size:38px"],
  [style*="font-size: 38px"] {
    font-size: clamp(25px, 6.8vw, 32px) !important;
    line-height: 1.16 !important;
    max-width: 100% !important;
  }
  [style*="font-size:34px"],
  [style*="font-size: 34px"],
  [style*="font-size:32px"],
  [style*="font-size: 32px"],
  [style*="font-size:28px"],
  [style*="font-size: 28px"] {
    font-size: 23px !important;
    line-height: 1.24 !important;
  }
  [style*="font-size:26px"],
  [style*="font-size: 26px"] {
    font-size: 20px !important;
  }

  /* generous section padding shrinks */
  [style*="padding:96px"],
  [style*="padding: 96px"],
  [style*="padding:88px"],
  [style*="padding: 88px"],
  [style*="padding:80px"],
  [style*="padding: 80px"],
  [style*="padding:72px"],
  [style*="padding: 72px"],
  [style*="padding:64px"],
  [style*="padding: 64px"] {
    padding: 44px 20px !important;
  }

  /* tap targets */
  a[style*="padding:13px"],
  a[style*="padding: 13px"],
  a[style*="padding:14px"],
  a[style*="padding: 14px"],
  a[style*="padding:15px"],
  a[style*="padding: 15px"],
  a[style*="padding:16px"],
  a[style*="padding: 16px"],
  button {
    min-height: 44px !important;
  }

  /* long tables scroll rather than overflow */
  table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
  }

  iframe {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* 9:16 alumni reel lightbox: keep the portrait ratio so the video fills
     the card instead of letterboxing at the top of a full-width iframe */
  iframe[style*="aspect-ratio:9/16"],
  iframe[style*="aspect-ratio: 9/16"],
  iframe[style*="aspect-ratio:9 / 16"],
  iframe[style*="aspect-ratio: 9 / 16"] {
    width: min(100%, calc(78vh * 9 / 16)) !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 9 / 16 !important;
    display: block !important;
    margin: 0 auto !important;
  }
  /* the lightbox shell stacks: video first, caption under it */
  [style*="position:fixed"][style*="z-index:100"],
  [style*="position: fixed"][style*="z-index: 100"] {
    flex-direction: column !important;
    gap: 18px !important;
    padding: 20px !important;
    overflow-y: auto !important;
  }

  /* hero role name drops to its own line on mobile */
  .tdai-hero-role {
    display: block;
    width: 100%;
  }

  /* FSDP hero headline: readable but balanced on mobile */
  [data-screen-label="FSDP hero"] h1 {
    font-size: 52px !important;
    line-height: 1.05 !important;
  }

  /* section headings: 56px on desktop, 40px on mobile */
  section h2,
  [data-screen-label] h2,
  h2[style*="font-size:56px"],
  h2[style*="font-size: 56px"] {
    font-size: 40px !important;
    line-height: 1.05 !important;
  }


  /* sticky verified banner: icon + text only */
  .tdai-banner-cta {
    display: none !important;
  }

  /* ---------- Intake calendar (FSDP / AI Engineering) ----------
     Desktop uses a 4-column table with a separate header row. On mobile the
     row collapses to one column, so the header row is dropped and each cell
     gets its own inline label inside the card. */
  [style*="1.15fr 1.15fr 0.95fr 0.8fr"]:not([style*="align-items"]) {
    display: none !important;
  }
  [style*="1.15fr 1.15fr 0.95fr 0.8fr"][style*="align-items"] {
    gap: 16px !important;
    align-items: stretch !important;
  }
  [style*="1.15fr 1.15fr 0.95fr 0.8fr"][style*="align-items"] > *::before {
    display: block;
    width: 100%;
    flex: 0 0 100%;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #605d5d;
    margin-bottom: 7px;
  }
  [style*="1.15fr 1.15fr 0.95fr 0.8fr"][style*="align-items"]
    > *:nth-child(1)::before {
    content: "Training starts";
  }
  [style*="1.15fr 1.15fr 0.95fr 0.8fr"][style*="align-items"]
    > *:nth-child(2)::before {
    content: "Internship starts";
  }
  [style*="1.15fr 1.15fr 0.95fr 0.8fr"][style*="align-items"]
    > *:nth-child(3)::before {
    content: "Status";
  }
  [style*="1.15fr 1.15fr 0.95fr 0.8fr"][style*="align-items"]
    > *:nth-child(4)::before {
    content: "Register";
  }

  /* closed / sold-out intakes collapse to training date + status only.
     Anything that is not the highlighted open row (white background) is
     treated as a past/closed intake. */
  [style*="1.15fr 1.15fr 0.95fr 0.8fr"][style*="align-items"]:not(
      [style*="#ffffff"]
    ):not([style*="rgb(255, 255, 255)"])
    > *:nth-child(2),
  [style*="1.15fr 1.15fr 0.95fr 0.8fr"][style*="align-items"]:not(
      [style*="#ffffff"]
    ):not([style*="rgb(255, 255, 255)"])
    > *:nth-child(4) {
    display: none !important;
  }

  /* the register cell is an inline-flex anchor/button: let its injected
     label sit on its own line instead of overlapping the button text */
  [style*="1.15fr 1.15fr 0.95fr 0.8fr"][style*="align-items"]
    > *:nth-child(4) {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-self: stretch !important;
    align-items: center !important;
  }

}


/* ---------- Small phones ---------- */
@media (max-width: 480px) {
  [style*="max-width:1280px"],
  [style*="max-width: 1280px"],
  [style*="max-width:1180px"],
  [style*="max-width: 1180px"],
  [style*="max-width:1120px"],
  [style*="max-width: 1120px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  [style*="grid-template-columns"] {
    gap: 14px !important;
  }
}

/* ---------- Mobile navigation (built by /mobile-nav.js) ---------- */
.tdai-burger,
.tdai-drawer {
  display: none;
}


@media (max-width: 768px) {
  .tdai-burger {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: auto !important;
    flex: none !important;
    background: transparent;
    border: 1px solid rgba(243, 242, 242, 0.35);
    border-radius: 10px;
    color: #f3f2f2;
    cursor: pointer;
    padding: 0;
  }

  header nav {
    display: none !important;
  }

  /* Mobile header row: show the consultation CTA in the WhatsApp slot and
     move the WhatsApp button into the drawer. */
  header .tdai-header-actions {
    display: flex !important;
    margin-left: 0 !important;
    gap: 0 !important;
  }
  header .tdai-header-actions .tdai-header-whatsapp {
    display: none !important;
  }
  header .tdai-header-actions .tdai-header-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important;
    padding: 5px 12px !important;
    border-radius: 999px !important;
    gap: 0 !important;
    min-height: 28px !important;
  }
  header .tdai-header-actions .tdai-header-cta::before {
    content: "Free Consultation";
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    white-space: nowrap;
  }



  .tdai-header-whatsapp {
    font-size: 12px !important;
    padding: 8px 12px !important;
    gap: 6px !important;
  }
  .tdai-header-whatsapp svg {
    width: 14px !important;
    height: 14px !important;
  }

  header > div {
    padding: 12px 18px !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
    max-width: 100% !important;
  }

  header img {
    width: 124px !important;
    height: auto !important;
  }

  .tdai-drawer {
    display: none;
    background: #275d5b;
    border-top: 1px solid rgba(243, 242, 242, 0.18);
    padding: 10px 18px 22px;
    max-height: 72vh;
    overflow-y: auto;
  }
  .tdai-drawer.is-open {
    display: block;
  }
  .tdai-drawer a {
    display: block;
    padding: 13px 2px;
    color: #f3f2f2 !important;
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
    border-bottom: 1px solid rgba(243, 242, 242, 0.14);
    min-height: 44px;
  }
  .tdai-drawer a.tdai-drawer-sub {
    font-size: 15px;
    font-weight: 600;
    padding-left: 14px;
    opacity: 0.92;
  }
  .tdai-drawer a.tdai-drawer-cta {
    margin-top: 16px;
    background: #ee8276;
    color: #201e1d !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.2;
    padding: 14px 16px;
    min-height: 50px;
    border-radius: 10px;
    border-bottom: 0;
    font-weight: 800;
  }

  /* WhatsApp button moved from the header row into the drawer */
  .tdai-drawer .tdai-drawer-wa {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 16px !important;
    background: #25D366 !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 12px 16px !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    border-bottom: 0 !important;
    min-height: 44px !important;
  }
  .tdai-drawer .tdai-drawer-wa svg {
    width: 16px !important;
    height: 16px !important;
    flex: none !important;
  }

  /* Keep the LMS external link visually consistent with other drawer items */
  .tdai-drawer a[href*="learn.thedaxinstitute.com"] {
    display: block !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 13px 2px !important;
    border-bottom: 1px solid rgba(243, 242, 242, 0.14) !important;
  }

  body.tdai-nav-open {
    overflow: hidden;
  }
}

/* ---------- Media never overflows its container ---------- */
@media (max-width: 1024px) {
  img,
  video,
  iframe,
  canvas,
  svg {
    max-width: 100% !important;
  }
  img[style*="width:"]:not([style*="width:auto"]):not([style*="width: auto"]):not([style*="height:100%"]):not([style*="height: 100%"]),
  video[style*="width:"]:not([style*="height:100%"]):not([style*="height: 100%"]) {
    height: auto !important;
  }
  /* thumbnails that must fill their aspect-ratio card keep cover sizing */
  img[style*="object-fit:cover"],
  img[style*="object-fit: cover"] {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
  }
  /* founder "Previously at" logo chips: the global max-width/height-auto
     rules above match these logos (max-width contains "width:") and blow
     them up. Restore the small inline logo size and shrink them on mobile.
     The runtime re-serializes inline styles with spaces, so match both.
     Extra attribute selectors are deliberate to outrank the specificity of
     the img[style*="width:"]:not(...) rule (0,5,1) above. */
  span[style*="height:38px"][style*="padding:0 12px"],
  span[style*="height: 38px"][style*="padding: 0px 12px"],
  span[style*="height: 38px"][style*="padding: 0 12px"] {
    height: 30px !important;
    padding: 0 8px !important;
  }
  span[style*="height:38px"][style*="padding:0 12px"] img[style*="object-fit:contain"][style*="display:block"][style*="max-width:"],
  span[style*="height: 38px"][style*="padding: 0px 12px"] img[style*="object-fit: contain"][style*="display: block"][style*="max-width: "],
  span[style*="height: 38px"][style*="padding: 0 12px"] img[style*="object-fit: contain"][style*="display: block"][style*="max-width: "] {
    height: 18px !important;
    max-width: 64px !important;
    width: auto !important;
  }
  /* wide screenshot panels inside cards scroll instead of bleeding out */
  [style*="overflow-x:auto"],
  [style*="overflow-x: auto"] {
    -webkit-overflow-scrolling: touch;
  }
}

/* ---------- Sticky header (+ verified banner) at every viewport ---------- */
/* The legacy pages wrap the banner + <header> in a sticky div. Any ancestor
   with an overflow value turns into the sticky scroll container, so keep the
   page wrappers overflow:visible and pin the wrapper explicitly. */
html body,
body > div,
[style*="min-width:1080px"],
[style*="min-width: 1080px"] {
  overflow: visible !important;
}
[style*="position:sticky"][style*="z-index:50"],
[style*="position: sticky"][style*="z-index: 50"] {
  position: sticky !important;
  top: 0 !important;
  z-index: 90 !important;
}

/* ---------- CTA rows: stars sit beneath the buttons on mobile ---------- */
@media (max-width: 860px) {
  .tdai-cta-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .tdai-cta-row > a:first-child {
    flex: 1 1 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
  .tdai-cta-row > a:not(:first-child) {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    justify-content: center !important;
    text-align: center !important;
  }
  .tdai-cta-row > div.tdai-ratings.tdai-ratings,
  div.tdai-ratings.tdai-ratings {
    flex: 0 0 100% !important;
    order: 9 !important;
    width: 100% !important;
    margin-left: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 28px !important;
    margin-top: 4px !important;
  }
  div.tdai-ratings.tdai-ratings > a {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
}

/* ---- FSDP mobile enhancements ---- */
.tdai-lightbox {
  display: none;
}
.tdai-lightbox.is-open {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(24, 22, 21, 0.92);
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.tdai-lightbox img {
  max-width: 100%;
  max-height: 92vh;
  height: auto;
  border-radius: 10px;
}
.tdai-lightbox-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: transparent;
  border: 0;
  color: #f3f2f2;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
}
.tdai-mc-chev {
  display: none;
}

@media (max-width: 768px) {
  .tdai-mobile-hide {
    display: none !important;
  }
  .tdai-zoom {
    width: 105% !important;
    max-width: 105% !important;
    margin-left: -2.5% !important;
    margin-right: -2.5% !important;
    border-radius: 10px !important;
    display: block !important;
  }
  .tdai-mcollapse .tdai-mc-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    cursor: pointer;
    margin-bottom: 0 !important;
    position: relative !important;
    padding-right: 34px !important;
  }
  .tdai-mcollapse .tdai-mc-chev {
    display: inline-block !important;
    flex: none !important;
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    margin-left: 0;
    opacity: 0.6;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
  }
  .tdai-mcollapse[data-mc-open="0"] .tdai-mc-body {
    display: none !important;
  }
  .tdai-mcollapse[data-mc-open="1"] .tdai-mc-body {
    display: block !important;
    margin-top: 12px !important;
  }

}

@media (max-width: 768px) {
  .tdai-mobile-hide,
  div.tdai-ratings.tdai-ratings.tdai-mobile-hide,
  .tdai-cta-row > .tdai-mobile-hide {
    display: none !important;
  }
  .tdai-mcollapse .tdai-mc-header {
    flex-wrap: nowrap !important;
  }
  .tdai-mcollapse .tdai-mc-header > h3 {
    flex: 1 1 auto !important;
  }
}

/* AI Engineering: desktop/tablet swap blocks */
.tdai-only-md {
  display: none !important;
}
@media (max-width: 1024px) {
  .tdai-hide-md {
    display: none !important;
  }
  .tdai-only-md {
    display: block !important;
  }
}

/* AI Engineering: week card header alignment on mobile */
@media (max-width: 768px) {
  .tdai-week-btn {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    column-gap: 12px !important;
    row-gap: 8px !important;
    align-items: center !important;
    padding: 16px 18px !important;
  }
  .tdai-week-btn .tdai-week-no {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: auto !important;
  }
  .tdai-week-btn .tdai-week-phase {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: start !important;
  }
  .tdai-week-btn .tdai-week-sign {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }
  .tdai-week-btn .tdai-week-title {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    font-size: 17px !important;
  }
}

/* AI Engineering hero headline sizing */
@media (max-width: 1024px) {
  .tdai-aie-h1 {
    font-size: 46px !important;
  }
}
@media (max-width: 768px) {
  .tdai-aie-h1 {
    font-size: 44px !important;
  }
}

/* larger project image lightbox on mobile */
@media (max-width: 768px) {
  .tdai-zoom-overlay {
    padding: 10px !important;
  }
  .tdai-zoom-inner {
    max-width: 100% !important;
    gap: 8px !important;
  }
  .tdai-zoom-canvas {
    height: 82vh !important;
    padding: 6px !important;
    border-radius: 8px !important;
  }
}

/* ---------- Mobile horizontal-overflow containment ----------
   Nothing may push the page wider than the viewport, otherwise phones let the
   page slide sideways into empty space and enable pinch-zoom out.
   overflow-x:clip (not hidden/auto) keeps the sticky header working because it
   does not create a scroll container. */
@media (max-width: 1024px) {
  html,
  html body {
    max-width: 100% !important;
    overflow-x: clip !important;
  }
  /* full-bleed rows that carry `flex:none` columns must be allowed to stack */
  .tdai-cta-row {
    max-width: 100% !important;
    flex-wrap: wrap !important;
  }
  .tdai-cta-row > div[style*="flex:none"],
  .tdai-cta-row > div[style*="flex: none"] {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  /* marquee / ticker strips stay inside their own band */
  [style*="animation"][style*="tdaiMarquee"],
  [style*="animation"][style*="tdaiTicker"] {
    will-change: transform;
  }
}

/* Mobile-only footer contact stacking */
@media (max-width: 768px) {
  .tdai-footer-contact {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }
  .tdai-footer-contact-sep {
    display: none !important;
  }
  .tdai-footer-contact-item {
    display: block !important;
  }
  .tdai-footer-whatsapp {
    margin-top: 14px !important;
  }
  .tdai-footer-whatsapp a {
    font-size: 14px !important;
    padding: 11px 18px !important;
    width: 100% !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
}



/* ---------- Book consultation: embed-only view ---------- */
.tdai-booking-section:has(.tdai-booking-wrap) {
  padding: 20px 20px 28px !important;
  max-width: 1120px !important;
}
.tdai-booking-wrap .tdai-booking-frame iframe {
  min-height: 720px;
  overflow: hidden !important;
}

@media (max-width: 1024px) {
  .tdai-booking-section:has(.tdai-booking-wrap) {
    padding: 10px 8px 14px !important;
  }
  .tdai-booking-wrap .tdai-booking-frame {
    border-radius: 12px !important;
    box-shadow: none !important;
  }
  .tdai-booking-wrap .tdai-booking-frame iframe {
    width: 100% !important;
    min-height: 760px;
    overflow: hidden !important;
  }
}


/* ---------- Anchor offset for sticky banner + header ---------- */
section[id],
div[id]:not(#dc-root),
[id][data-screen-label] {
  scroll-margin-top: 132px;
}
#top {
  scroll-margin-top: 0;
}
@media (max-width: 1024px) {
  section[id],
  div[id]:not(#dc-root),
  [id][data-screen-label] {
    scroll-margin-top: 112px;
  }
}

/* Project landscape section */
@media (max-width: 768px) {
  #project-landscape h2 { font-size: 40px !important; }
  #project-landscape h3 { font-size: 21px !important; }
  #project-landscape [style*="border-radius:14px"] { font-size: 14px !important; padding: 9px 12px !important; }
}

/* ===== AI Engineering testimonial sticker wall ===== */
@media (max-width: 1024px) {
  .ai-quote-wall { columns: 2 !important; }
}
@media (max-width: 768px) {
  .ai-quote-wall { columns: 1 !important; }
  .ai-quote-card { transform: none !important; box-shadow: 4px 4px 0 #e2edeb !important; }
}
@media (max-width: 768px) {
  .ai-quote-card img {
    width: 52px !important;
    height: 52px !important;
    max-width: 52px !important;
    flex: none !important;
    border-radius: 999px !important;
    object-fit: cover !important;
  }
}