/* Colour comes from tilglobal-tokens.css. The aliases below keep the long-standing
   --tg-blue / --tg-soft names working while pointing them at the new palette. */
:root {
  --tg-blue: var(--tg-royal);
  --tg-blue-deep: var(--tg-royal-dark);
  --tg-indigo: var(--tg-electric);
  --tg-sky: var(--tg-electric);
  --tg-soft: var(--tg-surface-sunk);
  --tg-white: var(--tg-surface);
  --tg-max: 1320px;
  --tg-radius: 18px;
  --tg-font: "Plus Jakarta Sans", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.tg-body {
  margin: 0;
  font-family: var(--tg-font);
  color: var(--tg-body);
  background: var(--tg-canvas);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* The default heading colour, deliberately at zero specificity.
   Written as `body.tg-body h1` this outranked every single-class rule such as
   `.lobs-hero h1`, so headings on navy sections were being painted navy and
   disappearing. :where() keeps the default while letting any real rule win. */
:where(body.tg-body) :where(h1, h2, h3, h4) { color: var(--tg-navy); }

a { color: inherit; }

/* Top promo */
.tg-promo {
  background: var(--tg-grad-brand);
  color: var(--tg-on-navy);
  text-align: center;
  padding: 0.65rem 1rem;
  font-size: 0.9rem;
  font-weight: 650;
}
.tg-promo a { color: var(--tg-on-navy); text-decoration: underline; text-underline-offset: 2px; }
.tg-promo a:hover { color: #FFD3BD; }

/* Nav */
.tg-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--tg-line);
}
.tg-nav-inner {
  max-width: var(--tg-max);
  margin: 0 auto;
  padding: 0.9rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.tg-logo img { height: 70px; width: auto; display: block; }
@media (max-width: 640px) { .tg-logo img { height: 54px; } }
.tg-nav-links {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  align-items: center;
}
.tg-nav-links a {
  text-decoration: none;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--tg-navy);
}
.tg-nav-links a:hover { color: var(--tg-royal); }

/* Buttons */
.tg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.85rem 1.35rem;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  font-size: 0.95rem;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.tg-btn:hover { transform: translateY(-2px); }
/* Royal blue is the single conversion colour — it must never compete with another button. */
.tg-btn-primary {
  background: var(--tg-royal);
  color: var(--tg-on-navy) !important;
  box-shadow: var(--tg-shadow-royal);
}
.tg-btn-primary:hover { background: var(--tg-royal-dark); box-shadow: 0 16px 34px rgba(37, 99, 235, 0.42); }
/* Teal is the secondary action — progress, trials, "keep going" rather than "buy". */
.tg-btn-teal {
  background: var(--tg-teal);
  color: var(--tg-on-navy) !important;
  box-shadow: 0 12px 28px rgba(20, 184, 166, 0.3);
}
.tg-btn-teal:hover { background: var(--tg-teal-dark); }
.tg-btn-login {
  background: var(--tg-navy);
  color: var(--tg-on-navy) !important;
  box-shadow: var(--tg-shadow-navy);
}
.tg-btn-login:hover { background: var(--tg-navy-700); }
.tg-btn-ghost {
  background: var(--tg-surface);
  color: var(--tg-navy) !important;
  border-color: var(--tg-line-strong);
}
.tg-btn-ghost:hover { border-color: var(--tg-royal); color: var(--tg-royal) !important; }
.tg-btn-ghost-light {
  background: rgba(255,255,255,0.12);
  color: var(--tg-on-navy) !important;
  border-color: rgba(255,255,255,0.35);
}
.tg-btn-ghost-light:hover { background: rgba(255,255,255,0.2); }

/* Hero */
.tg-hero {
  position: relative;
  /* Visible + raised: the search typeahead inside this hero must be able to
     drop past the hero's bottom edge and float over the section below. The
     hero's imagery is a background, so nothing else can spill out. */
  overflow: visible;
  z-index: 10;
  background:
    linear-gradient(90deg, rgba(12, 13, 16, 0.93) 0%, rgba(12, 13, 16, 0.78) 52%, rgba(12, 13, 16, 0.5) 100%),
    var(--tg-hero-img, url("/assets/images/hero-study.jpg")) center 35% / cover no-repeat,
    #0C0D10;
  color: #fff;
  padding: 4.5rem 0 3.5rem;
  border-bottom: 1px solid var(--tg-line);
}
.tg-hero::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -80px;
  top: -60px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,0.18), transparent 70%);
  animation: tgFloat 8s ease-in-out infinite;
}
.tg-hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--tg-max);
  margin: 0 auto;
  padding: 0 1.25rem;
  animation: tgIn 0.7s ease both;
}
.tg-hero--compact { padding: 3.25rem 0 2.5rem; }

/* Editorial eyebrow — a quiet uppercase label, never a pill or a box. */
.tg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  background: none;
  border: 0;
  color: var(--tg-royal);
  padding: 0;
  letter-spacing: 0.28em;
  border-radius: 0;
  font-size: 0.82rem;
  font-weight: 800;
  margin-bottom: 1.1rem;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.08);
}
.tg-brand-mark {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.04;
  margin: 0.9rem 0 1rem;
  color: #fff;
}
.tg-brand-mark span {
  font-style: italic;
  color: #E4B3B8;
}
/* Doubled selector so this outweighs the premium sheet's `body.tg-body h1`. */
.tg-hero .tg-hero-inner h1 {
  font-size: clamp(1.05rem, 1.7vw, 1.2rem);
  font-weight: 600;
  max-width: 44rem;
  margin: 0 0 1.4rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.65;
}
.tg-hero p.lead {
  max-width: 34rem;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 1.6rem;
  font-size: 1.08rem;
}
.tg-hero .tg-eyebrow { color: #D4898F; }
.tg-hero .tg-eyebrow::before {
  content: "";
  width: 34px;
  height: 2px;
  background: #D4898F;
}
.tg-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}

.tg-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: center;
  color: var(--tg-body);
  font-size: 0.92rem;
  font-weight: 650;
}
/* The amber fill is only 2.2:1 on white, and the stars carry the rating, so they
   use the darker amber reserved for text. */
.tg-stars { color: var(--tg-warning-text); letter-spacing: 0.05em; }

.tg-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 2rem;
  max-width: 48rem;
}
.tg-stat {
  background: transparent;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 0;
  padding: 0.2rem 0 0.2rem 1.1rem;
  box-shadow: none;
}
.tg-stat strong {
  display: block;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}
.tg-hero .tg-stat span { color: rgba(255, 255, 255, 0.62); }
.tg-hero .tg-trust { color: rgba(255, 255, 255, 0.75); }
/* Stat blocks reused on light sections keep readable colours there. */
.tg-section .tg-stat { border-left-color: var(--tg-line-strong); }
.tg-section .tg-stat strong { color: var(--tg-ink); }
.tg-stat span {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.82rem;
  color: var(--tg-muted);
  font-weight: 650;
}

/* Sections */
.tg-section {
  max-width: var(--tg-max);
  margin: 0 auto;
  padding: 3.75rem 1.25rem;
}
.tg-section h2,
.tg-section-title {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 0.6rem;
  line-height: 1.1;
}
.tg-section .sub {
  color: var(--tg-muted);
  max-width: 38rem;
  margin: 0 0 2rem;
  font-size: 1.05rem;
}
.tg-band { background: var(--tg-surface-sunk); }
.tg-cta-band {
  background: var(--tg-grad-hero);
  color: var(--tg-on-navy);
}
.tg-cta-band h2, .tg-cta-band .tg-section-title { color: var(--tg-on-navy); }
.tg-cta-band .sub { color: var(--tg-on-navy-muted); }
.tg-cta-band .tg-eyebrow {
  background: none;
  border: 0;
  color: #E4B3B8;
  box-shadow: none;
}

/* Academy cards — saleable */
.tg-academy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
}
.tg-academy {
  display: block;
  text-decoration: none;
  border-radius: 22px;
  padding: 1.6rem 1.5rem 1.45rem;
  color: #fff;
  position: relative;
  overflow: hidden;
  min-height: 210px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
  transition: transform .22s ease, box-shadow .22s ease;
}
.tg-academy:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px rgba(15, 23, 42, 0.2);
}
.tg-academy h3 {
  font-size: 1.45rem;
  font-weight: 800;
  margin: 0.35rem 0 0.55rem;
  letter-spacing: -0.02em;
}
.tg-academy p {
  margin: 0;
  opacity: 0.92;
  max-width: 28rem;
  font-size: 0.98rem;
}
.tg-academy .go {
  display: inline-flex;
  margin-top: 1.15rem;
  font-weight: 800;
  font-size: 0.95rem;
}
.tg-academy .label {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.9;
}
.tg-a1 { background: linear-gradient(145deg, #16181D, #A51C30); }
.tg-a2 { background: linear-gradient(145deg, #A51C30, #C45C6A); }
.tg-a3 { background: linear-gradient(145deg, #8B1A1A, #D4898F); }
.tg-a4 { background: linear-gradient(145deg, #8B1A1A, #C45C6A); }

.tg-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.tg-item {
  display: block;
  text-decoration: none;
  background: var(--tg-surface);
  border: 1px solid var(--tg-line);
  border-radius: var(--tg-radius);
  padding: 1.25rem 1.2rem;
  box-shadow: var(--tg-shadow-sm);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.tg-item:hover {
  transform: translateY(-3px);
  border-color: #E8C4C8;
  box-shadow: 0 16px 32px rgba(37, 99, 235, 0.12);
}
.tg-meta {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tg-royal);
  margin-bottom: 0.4rem;
}
.tg-item h3 {
  margin: 0 0 0.4rem;
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.tg-item p {
  margin: 0;
  color: var(--tg-muted);
  font-size: 0.92rem;
}

/* News cards: the story's own image sits full-bleed above the text. */
.tg-item--news { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.tg-item__thumb {
  display: block; aspect-ratio: 16 / 9; overflow: hidden;
  background: #EDF0F6; border-bottom: 1px solid var(--tg-line);
}
.tg-item__thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.3s ease;
}
.tg-item--news:hover .tg-item__thumb img { transform: scale(1.04); }
.tg-item__body { display: block; padding: 1.1rem 1.2rem 1.25rem; }
.tg-item__body .tg-meta { display: block; }
.tg-item__more {
  display: inline-block; margin-top: 0.65rem;
  font-size: 0.82rem; font-weight: 800; color: #A51C30;
}

/* Homepage carousels: AI programme cards and news cards ride the same
   .lobs-carousel track as the course cards, so they need a fixed slide width. */
.lobs-carousel__track > .ou-ai-card--slide { flex: 0 0 clamp(250px, 23vw, 305px); }
.lobs-carousel__track > .ou-news-slide { flex: 0 0 clamp(265px, 25vw, 330px); }
.ou-news-slide h3 {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* Course page "happening in your field" news box. */
.cd-newsbox {
  margin: clamp(2rem, 4vw, 3rem) 0; padding: clamp(1.5rem, 3vw, 2.25rem);
  background: linear-gradient(180deg, #F6F8FC, #fff);
  border: 1px solid rgba(15,27,45,0.1); border-left: 4px solid #A51C30;
  border-radius: 18px; box-shadow: 0 14px 38px rgba(15,27,45,0.08);
}
.cd-newsbox__head { margin-bottom: 1.25rem; }
.cd-newsbox__live {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: #B33200; animation: cdNewsPulse 2.4s ease-in-out infinite;
}
@keyframes cdNewsPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.cd-newsbox__head h2 {
  margin: 0.4rem 0 0; font-family: "Source Serif 4", Georgia, serif; font-weight: 800;
  letter-spacing: -0.02em; font-size: clamp(1.3rem, 2.4vw, 1.7rem); color: #0F1B2D;
}
.cd-newsbox__story {
  display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 1.25rem;
  padding: 1.1rem; margin-bottom: 1rem;
  background: #fff; border: 1px solid rgba(15,27,45,0.09); border-radius: 14px;
}
.cd-newsbox__story:not(:has(.cd-newsbox__media)) { grid-template-columns: 1fr; }
.cd-newsbox__media { border-radius: 10px; overflow: hidden; background: #EDF0F6; align-self: start; }
.cd-newsbox__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.cd-newsbox__meta {
  display: block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(15,27,45,0.5); margin-bottom: 0.35rem;
}
.cd-newsbox__content h3 { margin: 0; font-size: 1.08rem; line-height: 1.35; letter-spacing: -0.01em; }
.cd-newsbox__content h3 a { color: #0F1B2D; text-decoration: none; }
.cd-newsbox__content h3 a:hover { color: #A51C30; }
.cd-newsbox__brief { margin: 0.5rem 0 0.85rem; font-size: 0.9rem; line-height: 1.6; color: #2b3448; }
.cd-newsbox__benefit {
  padding: 0.85rem 1rem; border-radius: 10px;
  background: rgba(165, 28, 48, 0.06); border-left: 3px solid #A51C30;
}
.cd-newsbox__benefit-label {
  display: block; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: #B33200; margin-bottom: 0.35rem;
}
.cd-newsbox__benefit p { margin: 0; font-size: 0.92rem; line-height: 1.6; color: #1f2839; }
.cd-newsbox__pitch { margin: 1.1rem 0 0; font-size: 0.95rem; line-height: 1.6; color: #2b3448; }
.cd-newsbox__pitch a { color: #A51C30; font-weight: 800; text-decoration: none; }
@media (max-width: 700px) {
  .cd-newsbox__story { grid-template-columns: 1fr; }
  .cd-newsbox__media img { aspect-ratio: 16 / 9; }
}

/* News commentary pages (/news/{slug}): hero carries the story's own image and a
   headline that can run to 14 words, so it sizes tighter than the catalogue hero.
   Height is fixed (not viewport-driven) so every briefing's hero is identical
   regardless of the thumbnail the publisher shipped. */
.ou-hero.aic-hero.na-hero { min-height: 480px; max-height: 560px; }
body.tg-body .ou-hero.aic-hero.na-hero h1 {
  font-size: clamp(1.65rem, 3.2vw, 2.7rem); max-width: 62rem; line-height: 1.18;
}
.na-hero .ou-lead { max-width: 54rem; font-size: clamp(1rem, 1.6vw, 1.15rem); }
.na-hero .ou-hero__img { object-position: center center; }
.na-crumb { margin-bottom: 1.1rem; font-size: 0.82rem; }
.na-crumb a { color: rgba(255,255,255,0.78); text-decoration: none; }
.na-crumb a:hover { color: #fff; }
.na-crumb span { color: rgba(255,255,255,0.55); }
.na-crumb .sep { margin: 0 0.45rem; color: rgba(255,255,255,0.35); }
.na-source-link { font-weight: 800; color: #A51C30; text-decoration: none; }
.na-source-link:hover { text-decoration: underline; }
/* The briefing and "your move" sections read as one narrative — pull them closer
   than the default section rhythm. */
.na-brief.ou-section { padding-bottom: clamp(1.75rem, 3vw, 2.5rem); }
#your-move.ou-section { padding-top: clamp(1.75rem, 3vw, 2.5rem); }

.na-source { padding-top: 0 !important; }
.na-source p {
  margin: 0; padding: 1.1rem 1.4rem; border-radius: 12px;
  background: #F6F8FC; border: 1px solid rgba(15,27,45,0.08);
  font-size: 0.92rem; color: #2b3448; text-align: center;
}

.tg-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.tg-step {
  background: var(--tg-surface);
  border: 1px solid var(--tg-line);
  border-radius: var(--tg-radius);
  padding: 1.4rem 1.25rem;
}
.tg-step .n {
  width: 36px;
  height: 36px;
  border-radius: var(--tg-radius-pill);
  display: grid;
  place-items: center;
  background: var(--tg-info-bg);
  color: var(--tg-royal-dark);
  font-weight: 800;
  margin-bottom: 0.85rem;
}
.tg-step h3 {
  margin: 0 0 0.4rem;
  font-size: 1.1rem;
  font-weight: 800;
}
.tg-step p { margin: 0; color: var(--tg-muted); font-size: 0.95rem; }

.tg-search {
  display: flex;
  gap: 0.55rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.tg-search input, .tg-search select {
  flex: 1;
  min-width: 180px;
  padding: 0.85rem 1rem;
  border: 1px solid var(--tg-line-strong);
  border-radius: 14px;
  font: inherit;
  color: var(--tg-ink);
  background: var(--tg-surface);
}
.tg-search input:focus, .tg-search select:focus { border-color: var(--tg-royal); }
.tg-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--tg-surface);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--tg-line);
}
.tg-table th, .tg-table td {
  text-align: left;
  padding: 0.95rem 1rem;
  border-bottom: 1px solid var(--tg-line);
}
.tg-table th {
  background: var(--tg-canvas);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tg-muted);
}
.tg-faq details {
  background: var(--tg-surface);
  border: 1px solid var(--tg-line);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  margin-bottom: 0.65rem;
}
.tg-faq summary { font-weight: 800; cursor: pointer; color: var(--tg-navy); }
.tg-faq p { color: var(--tg-muted); margin: 0.65rem 0 0; }

.tg-price {
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  margin: 0.35rem 0;
  line-height: 1;
}
.tg-price small {
  font-size: 1rem;
  font-weight: 700;
  color: var(--tg-muted);
}
.tg-plus-feature {
  background: var(--tg-surface);
  border: 1px solid var(--tg-line);
  border-radius: 20px;
  padding: 1.5rem;
  box-shadow: var(--tg-shadow-sm);
}
.tg-plus-feature.is-featured {
  border: 2px solid var(--tg-royal);
  background: linear-gradient(180deg, var(--tg-info-bg), #fff 55%);
  box-shadow: 0 18px 40px rgba(37, 99, 235, 0.15);
  transform: scale(1.02);
}

.tg-chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.tg-chip {
  padding: 0.45rem 0.9rem;
  border-radius: var(--tg-radius-pill);
  border: 1px solid var(--tg-line-strong);
  background: var(--tg-surface);
  font-size: 0.85rem;
  font-weight: 750;
  text-decoration: none;
  text-transform: capitalize;
  color: var(--tg-navy);
}
.tg-chip:hover { border-color: var(--tg-royal); color: var(--tg-royal); }
.tg-chip.active {
  background: var(--tg-royal);
  color: var(--tg-on-navy);
  border-color: transparent;
}

/* Most-enrolled programme carousel */
.lobs-carousel { position: relative; }
.lobs-carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(272px, 1fr);
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 0.25rem 0.25rem 1.5rem;
  margin: 0 -0.25rem;
}
.lobs-carousel__track::-webkit-scrollbar { display: none; }
@media (min-width: 700px) { .lobs-carousel__track { grid-auto-columns: minmax(300px, 1fr); } }
/* Fixed floor so cards can never compress to fit — they overflow and scroll. */
@media (min-width: 1100px) { .lobs-carousel__track { grid-auto-columns: minmax(320px, calc(33.333% - 0.834rem)); } }

.lobs-carousel__nav {
  position: absolute;
  top: calc(50% - 2.5rem);
  transform: translateY(-50%);
  z-index: 3;
  width: 46px; height: 46px;
  display: none;
  align-items: center; justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--tg-line-strong);
  background: var(--tg-surface);
  color: var(--tg-navy);
  font-size: 1.15rem; font-weight: 700;
  cursor: pointer;
  box-shadow: var(--tg-shadow);
  transition: background 0.2s, color 0.2s, opacity 0.2s;
}
.lobs-carousel__nav:hover { background: var(--tg-navy); color: var(--tg-on-navy); }
.lobs-carousel__nav[disabled] { opacity: 0.3; cursor: default; }
.lobs-carousel__nav[disabled]:hover { background: var(--tg-surface); color: var(--tg-navy); }
.lobs-carousel__nav.is-prev { left: -22px; }
.lobs-carousel__nav.is-next { right: -22px; }
@media (min-width: 900px) { .lobs-carousel__nav { display: flex; } }

.lobs-course-card {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--tg-surface);
  border: 1px solid var(--tg-line);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.lobs-course-card:hover {
  transform: translateY(-4px);
  border-color: #E8C4C8;
  box-shadow: var(--tg-shadow-lg);
}

.lobs-course-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(120% 130% at 85% -20%, rgba(165, 28, 48, 0.55), transparent 55%),
    linear-gradient(150deg, #23262E 0%, #0C0D10 100%);
  overflow: hidden;
}
.lobs-course-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lobs-course-card__placeholder {
  width: 100%; height: 100%;
  background:
    radial-gradient(circle at 78% 22%, rgba(20, 184, 166, 0.5), transparent 55%),
    var(--tg-grad-hero);
}
.lobs-course-card__rank {
  position: absolute; top: 0.7rem; left: 0.7rem;
  background: rgba(11, 31, 58, 0.85);
  color: var(--tg-on-navy);
  font-size: 0.75rem; font-weight: 800;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}

.lobs-course-card__body { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.1rem 1.15rem 1.25rem; flex: 1; }
.lobs-course-card__meta {
  font-size: 0.74rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tg-blue);
}
.lobs-course-card h3 {
  margin: 0; font-size: 1.02rem; font-weight: 800; line-height: 1.35; letter-spacing: -0.02em;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.lobs-course-card__foot {
  margin-top: auto; padding-top: 0.85rem; border-top: 1px solid var(--tg-line);
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
}
.lobs-course-card__foot strong { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.03em; }
.lobs-course-card__cta { font-size: 0.82rem; font-weight: 800; color: var(--tg-blue); }

/* Site footer — London OBS column structure, TILGlobal navy palette */
/* No top margin: the footer sits directly against whatever precedes it. A gap
   here showed the warm-white page canvas as a pale band across the top of the
   footer, which read as a stray white bar wherever the last section was navy.
   The footer's own inner padding provides the breathing room instead. */
.lobs-footer {
  background: var(--tg-navy);
  border-top: 4px solid var(--tg-royal);
  color: var(--tg-on-navy-muted);
  margin-top: 0;
}
.lobs-footer a { text-decoration: none; color: inherit; transition: color 0.2s; }
.lobs-footer a:hover { color: var(--tg-on-navy); }

.lobs-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding: clamp(2.5rem, 5vw, 4rem) 0;
}
@media (min-width: 900px) {
  .lobs-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 3.25rem; }
}

.lobs-footer h3 {
  font-family: "Source Serif 4", Georgia, serif;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #FF9C6B;
  margin: 0 0 1.25rem;
}
.lobs-footer p { font-size: 0.92rem; line-height: 1.75; margin: 0 0 0.9rem; }

.lobs-footer__links { display: grid; gap: 0.65rem; font-size: 0.92rem; font-weight: 600; }
.lobs-footer__links a { width: fit-content; position: relative; }
.lobs-footer__links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px;
  background: var(--tg-on-navy-accent); transform: scaleX(0); transform-origin: right;
  transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}
.lobs-footer__links a:hover::after { transform: scaleX(1); transform-origin: left; }

.lobs-footer__contact a { color: var(--tg-on-navy); font-weight: 700; }
.lobs-footer__contact a:hover { color: #FF9C6B; }

.lobs-footer__cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 1.4rem; margin-top: 0.35rem;
  background: var(--tg-royal); color: #FFFFFF !important;
  font-family: "Source Serif 4", Georgia, serif;
  font-weight: 700; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase;
  border-radius: 3px;
}
.lobs-footer__cta:hover { background: var(--tg-electric); color: #FFFFFF !important; }

.lobs-footer__cats {
  display: flex; flex-wrap: wrap;
  column-gap: 1.5rem; row-gap: 0.55rem;
  padding: 1.85rem 0;
  border-top: 1px solid var(--tg-on-navy-line);
  font-size: 0.86rem; font-weight: 600;
}
.lobs-footer__cats a { color: var(--tg-on-navy-faint); }
.lobs-footer__cats a:hover { color: var(--tg-on-navy); }

.lobs-footer__legal {
  border-top: 1px solid var(--tg-on-navy-line);
  padding: 1.75rem 0 2.5rem;
  display: flex; flex-direction: column; align-items: center;
  gap: 0.6rem; text-align: center;
  font-size: 0.82rem; color: var(--tg-on-navy-faint);
}
.lobs-footer__legal p { margin: 0; }
.lobs-footer__stars {
  color: #FF9C6B; letter-spacing: 0.7em; font-size: 0.7rem; font-weight: 700;
}
.lobs-footer__disclaimer { max-width: 68ch; line-height: 1.7; }
.lobs-footer__legal-links {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.5rem 1.5rem; font-weight: 700; margin-top: 0.35rem;
}
.lobs-footer__legal-links a:hover { color: var(--tg-on-navy); }

.tg-footer {
  max-width: var(--tg-max);
  margin: 0 auto;
  padding: 2rem 1.25rem 2.75rem;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 1rem 2rem;
  color: var(--tg-muted);
  font-size: 0.9rem;
  font-weight: 600;
  border-top: 1px solid var(--tg-line);
}
.tg-footer a { text-decoration: none; color: var(--tg-muted); margin-right: 0.85rem; }
.tg-footer a:hover { color: var(--tg-blue); }
.tg-footer-copy { grid-column: 1 / -1; font-size: 0.82rem; }

/* Nav search */
.tg-nav-search {
  display: flex;
  align-items: stretch;
  gap: 0.35rem;
  flex: 1;
  max-width: 280px;
  margin-left: 0.5rem;
}
.tg-nav-search input {
  width: 100%;
  height: 38px;
  border: 1px solid var(--tg-line-strong);
  border-radius: var(--tg-radius-pill);
  padding: 0 0.85rem;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--tg-ink);
  background: var(--tg-canvas);
}
.tg-nav-search input:focus { border-color: var(--tg-royal); background: var(--tg-surface); }
.tg-nav-search button {
  border: 0;
  border-radius: var(--tg-radius-pill);
  height: 38px;
  padding: 0 1rem;
  font-size: 0.84rem;
  font-weight: 800;
  background: var(--tg-royal);
  color: var(--tg-on-navy);
  cursor: pointer;
  flex-shrink: 0;
}
.tg-nav-search button:hover { background: var(--tg-royal-dark); }

/* Hero search */
.tg-search-hero {
  display: flex;
  gap: 0.65rem;
  flex-wrap: wrap;
  margin-top: 1.35rem;
  max-width: 720px;
}
.tg-search-hero input {
  flex: 1;
  min-width: 220px;
  border: 0;
  border-radius: 999px;
  padding: 1rem 1.25rem;
  font: inherit;
  font-weight: 650;
  font-size: 1.05rem;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18);
}
.tg-search-hero .tg-btn { white-space: nowrap; }

/* Tier cards */
.tg-tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
  margin-top: 1.5rem;
}
.tg-tier-card {
  background: var(--tg-surface);
  border: 1px solid var(--tg-line);
  border-radius: 22px;
  padding: 1.4rem 1.35rem 1.5rem;
  box-shadow: var(--tg-shadow);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.tg-tier-card.is-advanced {
  border-color: #E4B3B8;
  background: linear-gradient(180deg, var(--tg-info-bg), #fff 40%);
}
.tg-tier-card.is-master {
  border: 2px solid var(--tg-royal);
  background: linear-gradient(180deg, #F8E8EA, #fff 45%);
  box-shadow: 0 20px 44px rgba(37, 99, 235, 0.18);
}
.tg-tier-badge {
  display: inline-flex;
  width: fit-content;
  padding: 0.3rem 0.7rem;
  border-radius: var(--tg-radius-pill);
  background: var(--tg-navy);
  color: var(--tg-on-navy);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.tg-tier-card h3 {
  margin: 0;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.tg-tier-price {
  margin: 0;
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--tg-navy);
}
.tg-tier-price small {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--tg-muted);
}
.tg-tier-save {
  margin: 0;
  color: var(--tg-royal-text);
  font-weight: 750;
  font-size: 0.92rem;
}
.tg-bundle {
  background: var(--tg-canvas);
  border-radius: 14px;
  padding: 0.75rem 0.9rem;
  font-size: 0.9rem;
}
.tg-bundle ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.tg-ticks {
  margin: 0.25rem 0 0;
  padding-left: 1.1rem;
  color: var(--tg-body);
  font-weight: 650;
  line-height: 1.65;
}
.tg-tier-trust {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.86rem;
  font-weight: 650;
  color: var(--tg-muted);
  margin-top: auto;
}
.tg-tier-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.35rem;
}
.tg-tier-actions .tg-btn { width: 100%; }

/* Programme buy box */
.tg-split {
  display: grid;
  grid-template-columns: 1.4fr 0.9fr;
  gap: 1.5rem;
  align-items: start;
}
.tg-buybox {
  position: sticky;
  top: 90px;
  background: #fff;
  border: 1px solid var(--tg-line);
  border-radius: 22px;
  padding: 1.4rem;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}
.tg-plus-mini {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  background: linear-gradient(135deg, #FDF6F7, #FFF6F0);
  font-size: 0.92rem;
}
.tg-plus-mini a { color: var(--tg-indigo); font-weight: 800; text-decoration: none; }
.tg-module-list {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.tg-module-list li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--tg-line);
  border-radius: 14px;
  padding: 0.85rem 1rem;
  font-weight: 650;
}
.tg-module-list li span {
  flex: 0 0 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--tg-blue), var(--tg-indigo));
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
}
.tg-plus-banner {
  display: flex;
  justify-content: space-between;
  gap: 1.25rem;
  align-items: center;
  flex-wrap: wrap;
  padding: 1.5rem 1.6rem;
  border-radius: 22px;
  background: linear-gradient(120deg, #8B1A1A, #A51C30 55%, #D4898F);
  color: #fff;
  box-shadow: 0 18px 40px rgba(37, 99, 235, 0.25);
}
.tg-plus-banner h2 { margin: 0.2rem 0 0.45rem; font-size: clamp(1.4rem, 3vw, 1.9rem); letter-spacing: -0.03em; }
.tg-plus-banner p { margin: 0; max-width: 52ch; opacity: 0.95; }
.tg-plus-banner .tg-meta { color: #fff; }
/* Inverted button on a coloured banner. The label needs !important only because
   .tg-btn-primary declares its own label colour that way; without it the white
   fill and the white label cancel each other out. */
.tg-plus-banner .tg-btn-primary {
  background: #fff;
  color: #8B1A1A !important;
}

@keyframes tgIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
@keyframes tgFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(18px); }
}

@media (max-width: 900px) {
  .tg-academy-grid,
  .tg-grid,
  .tg-steps,
  .tg-stats,
  .tg-tier-grid,
  .tg-split { grid-template-columns: 1fr 1fr; }
  .tg-plus-feature.is-featured { transform: none; }
  .tg-nav-search { max-width: 180px; }
  .tg-footer { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .tg-nav-inner { flex-wrap: wrap; }
  .tg-nav-search { order: 3; max-width: none; width: 100%; margin: 0.35rem 0 0; }
  .tg-nav-links { width: 100%; margin-left: 0; }
  .tg-academy-grid,
  .tg-grid,
  .tg-steps,
  .tg-stats,
  .tg-tier-grid,
  .tg-split { grid-template-columns: 1fr; }
  .tg-buybox { position: static; }
}

/* ===== LearnUNI-style Course Details (TILGlobal) ===== */
.cd-wrap { max-width: var(--tg-max); margin: 0 auto; padding: 0 1.25rem; }
.cd-hero {
  padding: 2.25rem 0 1.75rem;
  background:
    radial-gradient(900px 320px at 10% -10%, rgba(37,99,235,0.14), transparent 60%),
    radial-gradient(700px 280px at 90% 0%, rgba(79,70,229,0.12), transparent 55%),
    #fff;
  border-bottom: 1px solid var(--tg-line);
}
.cd-breadcrumb { color: var(--tg-muted); font-weight: 700; font-size: 0.88rem; margin-bottom: 0.75rem; }
.cd-tier-row { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 1rem; }
.cd-tier-chip {
  text-decoration: none; font-size: 0.78rem; font-weight: 800;
  padding: 0.35rem 0.75rem; border-radius: 999px; border: 1px solid var(--tg-line);
  background: #fff; color: #4A4E57;
}
.cd-tier-plus { background: linear-gradient(135deg, #FDF6F7, #FDF6F7); border-color: #E8C4C8; color: #6B1220; }
.cd-title {
  margin: 0 0 0.75rem; font-size: clamp(1.7rem, 4vw, 2.55rem);
  letter-spacing: -0.035em; line-height: 1.15; font-weight: 800;
}
.cd-brief { margin: 0 0 1.25rem; color: #4A4E57; font-size: 1.08rem; max-width: 68ch; line-height: 1.6; }
.cd-hero-actions { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-bottom: 1.1rem; }
.cd-meta-row {
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center;
  color: #4A4E57; font-weight: 650; font-size: 0.95rem; margin-bottom: 1.25rem;
}
.cd-feature-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem;
}
.cd-feature-grid div {
  background: #fff; border: 1px solid var(--tg-line); border-radius: 14px; padding: 0.85rem 0.95rem;
}
.cd-feature-grid strong { display: block; font-size: 0.92rem; margin-bottom: 0.15rem; }
.cd-feature-grid span { color: var(--tg-muted); font-size: 0.84rem; font-weight: 600; }

.cd-main { padding: 2rem 0 3rem; background: #FAF9F7; }
.cd-layout { display: grid; grid-template-columns: 1.55fr 0.9fr; gap: 1.5rem; align-items: start; }
.cd-content { display: flex; flex-direction: column; gap: 1rem; }
.cd-block {
  background: #fff; border: 1px solid var(--tg-line); border-radius: 18px;
  padding: 1.35rem 1.4rem 1.5rem; box-shadow: 0 10px 28px rgba(15,23,42,0.04);
}
.cd-block h2 {
  margin: 0 0 1rem; font-size: 1.35rem; letter-spacing: -0.02em; font-weight: 800;
}
.cd-ai p { color: #4A4E57; line-height: 1.75; margin: 0 0 0.9rem; }
.cd-ai ul, .cd-ai ol { color: #4A4E57; line-height: 1.7; padding-left: 1.25rem; margin: 0 0 1rem; }
.cd-ai li { margin-bottom: 0.4rem; }
.cd-ai.cd-streaming .cd-stream-body::after {
  content: "";
  display: inline-block;
  width: 0.55rem; height: 1.05em;
  margin-left: 2px; vertical-align: text-bottom;
  background: linear-gradient(180deg, #A51C30, #A51C30);
  animation: cd-caret 0.9s steps(1) infinite;
  border-radius: 1px;
}
@keyframes cd-caret { 50% { opacity: 0; } }
.cd-loading {
  color: var(--tg-muted); font-weight: 650; padding: 0.5rem 0;
  display: flex; align-items: center; gap: 0.55rem;
}
.cd-loading::before {
  content: "";
  width: 0.85rem; height: 0.85rem; border-radius: 50%;
  border: 2px solid #E8C4C8; border-top-color: #A51C30;
  animation: cd-spin 0.7s linear infinite;
}
@keyframes cd-spin { to { transform: rotate(360deg); } }
.cd-muted { color: var(--tg-muted); font-weight: 600; line-height: 1.55; }

.cd-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  margin: 1.1rem 0 1.25rem; font-size: 0.92rem;
  border: 1px solid var(--tg-line); border-radius: 14px; overflow: hidden;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}
.cd-table th, .cd-table td {
  border-bottom: 1px solid var(--tg-line); padding: 0.75rem 0.9rem; text-align: left; vertical-align: top;
}
.cd-table th {
  background: linear-gradient(180deg, #FAF9F7, #FDF6F7);
  font-weight: 800; color: #16181D; font-size: 0.82rem;
  letter-spacing: 0.02em; text-transform: uppercase;
}
.cd-table tr:last-child td { border-bottom: none; }
.cd-table tr:nth-child(even) td { background: #FAF9F7; }
.cd-table td:first-child { font-weight: 700; color: #16181D; }
.cd-ai .cd-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.cd-modules { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.cd-modules li {
  display: flex; gap: 0.85rem; align-items: flex-start;
  border: 1px solid var(--tg-line); border-radius: 14px; padding: 0.85rem 1rem; background: #FAF9F7;
}
.cd-modules .n {
  flex: 0 0 1.85rem; height: 1.85rem; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--tg-blue), var(--tg-indigo));
  color: #fff; font-weight: 800; font-size: 0.82rem;
}
.cd-modules h3 { margin: 0; font-size: 1rem; font-weight: 750; line-height: 1.35; }

.cd-faq details {
  border: 1px solid var(--tg-line); border-radius: 12px; padding: 0.85rem 1rem; margin-bottom: 0.55rem; background: #fff;
}
.cd-faq summary { cursor: pointer; font-weight: 800; color: #16181D; }
.cd-faq-body { margin-top: 0.7rem; color: #4A4E57; }
.cd-faq-body ul { padding-left: 1.2rem; }

.cd-review-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.65rem; margin: 1rem 0 1.25rem;
}
.cd-review-stats div {
  background: #FAF9F7; border: 1px solid var(--tg-line); border-radius: 12px; padding: 0.75rem; text-align: center;
}
.cd-review-stats strong { display: block; font-size: 1.25rem; }
.cd-review-stats span { color: var(--tg-muted); font-size: 0.78rem; font-weight: 650; }
.cd-reviews { display: grid; gap: 0.85rem; }
.cd-review {
  border: 1px solid var(--tg-line); border-radius: 14px; padding: 1rem; background: #fff;
}
.cd-review-top { display: flex; gap: 0.75rem; align-items: center; margin-bottom: 0.65rem; }
.cd-avatar {
  width: 2.4rem; height: 2.4rem; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #A51C30, #C45C6A); color: #fff; font-weight: 800; font-size: 0.8rem;
}
.cd-review-top strong { display: block; }
.cd-review-top span { color: var(--tg-muted); font-size: 0.82rem; font-weight: 650; }
.cd-review p { margin: 0; color: #4A4E57; line-height: 1.65; }

.cd-related {
  display: grid;
  gap: 0.75rem;
  /* Wraps to as many columns as fit rather than stacking four full-width bars
     across the wide programme layout. */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.cd-related a {
  text-decoration: none; border: 1px solid var(--tg-line); border-radius: 12px;
  padding: 0.85rem 1rem; display: block; background: #FAF9F7;
}
.cd-related span { display: block; color: var(--tg-muted); font-size: 0.8rem; font-weight: 750; margin-bottom: 0.2rem; }
.cd-related strong { color: #16181D; }

.cd-sidebar { display: flex; flex-direction: column; gap: 1rem; }
.cd-card {
  background: #fff; border: 1px solid var(--tg-line); border-radius: 18px;
  padding: 1.15rem 1.2rem 1.3rem; box-shadow: 0 12px 30px rgba(15,23,42,0.05);
}
.cd-sticky { position: sticky; top: calc(var(--tg-header-h, 68px) + var(--tg-coursenav-h, 0px) + 1rem); }
.cd-card-label {
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--tg-muted); margin-bottom: 0.85rem;
}
.cd-plan {
  border: 1px solid var(--tg-line); border-radius: 14px; padding: 1rem; margin-bottom: 0.75rem; background: #FAF9F7;
}
.cd-plan.is-popular {
  border: 2px solid #A51C30;
  background: linear-gradient(180deg, #FDF6F7, #fff 55%);
  position: relative;
}
.cd-plan-badge {
  position: absolute; top: -0.55rem; right: 0.85rem;
  background: #A51C30; color: #fff; font-size: 0.68rem; font-weight: 800;
  padding: 0.2rem 0.5rem; border-radius: 999px;
}
.cd-plan h3 { margin: 0 0 0.2rem; font-size: 1.1rem; }
.cd-plan p { margin: 0 0 0.55rem; color: var(--tg-muted); font-weight: 650; font-size: 0.9rem; }
.cd-plan-price {
  font-size: 1.85rem; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 0.75rem;
}
.cd-plan-price small { font-size: 0.9rem; color: var(--tg-muted); font-weight: 700; }
.cd-inclusive { margin: 0.5rem 0 0.85rem; color: var(--tg-muted); font-size: 0.86rem; font-weight: 650; line-height: 1.55; }
.cd-plus-box {
  border-radius: 12px; padding: 0.85rem 0.95rem;
  background: linear-gradient(135deg, #FDF6F7, #FFF6F0); border: 1px solid #E8C4C8;
}
.cd-plus-box p { margin: 0.25rem 0 0.45rem; color: #4A4E57; font-size: 0.9rem; }
.cd-plus-box a { color: #8B1A1A; font-weight: 800; text-decoration: none; }

.cd-skills { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.cd-skills span {
  background: #FDF6F7; color: #8B1A1A; border: 1px solid #E8C4C8;
  padding: 0.35rem 0.7rem; border-radius: 999px; font-size: 0.82rem; font-weight: 750;
}

.cd-cert {
  border-radius: 14px; padding: 0.85rem;
  background: linear-gradient(145deg, #16181D, #6B1220 55%, #6B1220);
  margin-bottom: 0.75rem;
}
.cd-cert-inner {
  background: #fffef8; border: 2px solid #d4af37; border-radius: 10px;
  padding: 1.1rem 0.9rem; text-align: center; color: #23262E;
}
.cd-cert-brand { font-weight: 800; letter-spacing: 0.08em; font-size: 0.78rem; color: #8B1A1A; }
.cd-cert-title { margin: 0.55rem 0; font-size: 0.78rem; font-weight: 800; line-height: 1.35; text-transform: uppercase; }
.cd-cert-line { font-size: 0.72rem; color: var(--tg-muted); }
.cd-cert-name { margin: 0.35rem 0; font-size: 1.05rem; font-weight: 800; font-family: Georgia, serif; }
.cd-cert-date { margin-top: 0.55rem; font-size: 0.7rem; color: var(--tg-muted); }

.cd-details { list-style: none; margin: 0; padding: 0; }
.cd-details li {
  display: flex; flex-direction: column; gap: 0.1rem;
  padding: 0.65rem 0; border-bottom: 1px solid var(--tg-line);
}
.cd-details li:last-child { border-bottom: 0; }
.cd-details strong { font-size: 0.95rem; }
.cd-details span { color: var(--tg-muted); font-size: 0.84rem; font-weight: 650; }

@media (max-width: 980px) {
  .cd-layout { grid-template-columns: 1fr; }
  .cd-sticky { position: static; }
  .cd-feature-grid, .cd-review-stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .cd-feature-grid, .cd-review-stats { grid-template-columns: 1fr; }
}

.cd-charts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.25rem;
}
.cd-chart-title { margin: 0 0 0.5rem; font-size: 0.95rem; font-weight: 800; }
.cd-chart { height: 240px; width: 100%; background: #FAF9F7; border: 1px solid var(--tg-line); border-radius: 14px; }
.cd-cta-mid, .cd-cta-final {
  border-radius: 20px; padding: 1.75rem 1.6rem; text-align: center;
  background: linear-gradient(135deg, #16181D 0%, #8B1A1A 55%, #A51C30 100%);
  color: #fff; box-shadow: 0 18px 40px rgba(37, 99, 235, 0.28);
}
.cd-cta-mid { margin: 0.25rem 0; }
.cd-cta-final { padding: 2.5rem 1.5rem; margin: 0; }
.cd-cta-kicker {
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  opacity: 0.9; margin-bottom: 0.55rem;
}
.cd-cta-mid h2, .cd-cta-final h2 {
  margin: 0 0 0.55rem; font-size: clamp(1.35rem, 3vw, 1.9rem); letter-spacing: -0.03em; font-weight: 800;
}
.cd-cta-mid p, .cd-cta-final p {
  margin: 0 auto 1.15rem; max-width: 52ch; opacity: 0.95; font-weight: 600; line-height: 1.55;
}
.cd-cta-mid .tg-btn-primary, .cd-cta-final .tg-btn-primary {
  background: #fff; color: #8B1A1A !important;
}
.cd-cta-pills {
  display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: 1.15rem;
}
.cd-cta-pills span {
  background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.22);
  padding: 0.4rem 0.8rem; border-radius: 999px; font-size: 0.82rem; font-weight: 750;
}
@media (max-width: 800px) {
  .cd-charts { grid-template-columns: 1fr; }
}

/* Course fees — LOBS / LearnUNI duration hand-off */
#payment-plans-section { scroll-margin-top: calc(var(--tg-header-h, 68px) + var(--tg-coursenav-h, 0px) + 1.25rem); }
.cd-fees {
  background: #FAF9F7;
  padding: 3.5rem 0 4rem;
  border-top: 1px solid var(--tg-line);
}
.cd-fees-head { text-align: center; max-width: 720px; margin: 0 auto 1.75rem; }
.cd-fees-head h2 {
  margin: 0.35rem 0 0.65rem; font-size: clamp(1.6rem, 3vw, 2.15rem);
  font-weight: 800; letter-spacing: -0.03em; color: #16181D;
}
.cd-fees-head p { margin: 0; color: var(--tg-muted); font-weight: 600; line-height: 1.55; }
.cd-duration-toggle {
  display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.75rem;
}
.cd-duration-btn {
  padding: 0.75rem 1.5rem; border-radius: 999px; font-size: 0.9rem; font-weight: 750;
  border: 2px solid #E8E5E0; background: #fff; color: #4A4E57; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.cd-duration-btn.is-active {
  border-color: #A51C30; background: #A51C30; color: #fff;
}
.cd-fee-panels { position: relative; max-width: 520px; margin: 0 auto; min-height: 420px; }
.cd-fee-panel {
  opacity: 0; pointer-events: none; position: absolute; inset: 0;
  transition: opacity 0.25s ease;
}
.cd-fee-panel.is-visible {
  opacity: 1; pointer-events: auto; position: relative;
}
.cd-fee-card {
  background: #fff; border: 1px solid #E8E5E0; border-radius: 18px;
  padding: 1.75rem 1.5rem 1.5rem; text-align: center;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
  position: relative;
}
.cd-fee-card.is-featured {
  border: 2px solid #A51C30;
  box-shadow: 0 16px 36px rgba(37, 99, 235, 0.12);
}
.cd-fee-badge {
  position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  background: #A51C30; color: #fff; font-size: 0.65rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em; padding: 0.3rem 0.9rem;
  border-radius: 0 0 10px 10px;
}
.cd-fee-card h3 { margin: 0.85rem 0 0.35rem; font-size: 1.25rem; font-weight: 800; }
.cd-fee-sub { margin: 0 0 1rem; color: var(--tg-muted); font-weight: 650; font-size: 0.92rem; }
.cd-fee-price {
  font-size: 2.4rem; font-weight: 800; letter-spacing: -0.03em; color: #16181D; margin-bottom: 1rem;
}
.cd-fee-price small { display: block; font-size: 0.85rem; color: var(--tg-muted); font-weight: 700; margin-top: 0.15rem; }
.cd-fee-bullets {
  list-style: none; margin: 0 0 1.25rem; padding: 0; text-align: left;
}
.cd-fee-bullets li {
  padding: 0.45rem 0 0.45rem 1.5rem; position: relative;
  color: #4A4E57; font-weight: 650; font-size: 0.92rem; border-bottom: 1px solid #F3F1EE;
}
.cd-fee-bullets li::before {
  content: "✓"; position: absolute; left: 0; color: #A51C30; font-weight: 800;
}
.cd-fees-one {
  max-width: 720px; margin: 1.75rem auto 0; padding: 1.1rem 1.25rem;
  border-radius: 14px; background: linear-gradient(135deg, #FDF6F7, #FFF6F0);
  border: 1px solid #E8C4C8; display: flex; gap: 1rem; align-items: center;
  justify-content: space-between; flex-wrap: wrap;
}
.cd-fees-one p { margin: 0.25rem 0 0; color: #4A4E57; font-size: 0.9rem; font-weight: 600; line-height: 1.45; }
.cd-fees-one-note {
  font-size: 0.78rem; font-weight: 800; color: #8B1A1A; white-space: nowrap;
  background: #fff; border: 1px solid #E8C4C8; padding: 0.4rem 0.75rem; border-radius: 999px;
}

/* ========== LOBS-style programme page ========== */
.lobs-container { width: min(1320px, calc(100% - clamp(2rem, 7vw, 6rem))); margin: 0 auto; }
.lobs-hero {
  /* overflow stays visible and the hero sits above its next sibling so the
     search typeahead can drop below the hero's edge without being clipped. */
  position: relative; color: #fff; overflow: visible; z-index: 10;
  background: linear-gradient(160deg, #16181D 0%, #23262E 55%, #6B1220 100%);
  padding: clamp(3.25rem, 7vw, 5.5rem) 0 clamp(2.75rem, 5vw, 4.5rem);
}
.lobs-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 45% 65% at 85% 15%, rgba(147,197,253,0.14), transparent 65%),
    radial-gradient(ellipse 40% 55% at 8% 90%, rgba(37,99,235,0.16), transparent 60%);
}
.lobs-hero .lobs-container { position: relative; z-index: 1; }
.lobs-breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  font-size: 0.8rem; font-weight: 600; color: rgba(255,255,255,0.65); margin-bottom: 1.35rem;
}
.lobs-breadcrumb a { color: inherit; text-decoration: none; }
.lobs-breadcrumb a:hover { color: #E4B3B8; }
.lobs-breadcrumb .sep { color: #D4898F; }
.lobs-eyebrow {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: #E4B3B8; margin: 0 0 1rem;
}
/* ==========================================================================
   Search typeahead: the dropdown under every programme search box, and the
   "showing results for" note when a typed term was corrected or resolved.
   ========================================================================== */
.ou-suggest-wrap { position: relative; flex: 1 1 auto; display: flex; min-width: 0; }
.ou-suggest-wrap > input { width: 100%; }
.ou-suggest {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 1000;
  background: #fff; border: 1px solid rgba(15, 27, 45, 0.12); border-radius: 12px;
  box-shadow: 0 18px 40px rgba(15, 27, 45, 0.18);
  /* Roughly five suggestion rows; anything beyond that scrolls inside the panel. */
  max-height: 210px; overflow-y: auto; padding: 0.35rem; text-align: left;
}
.ou-suggest.is-open { display: block; }
/* Search boxes style their own submit buttons (orange, uppercase, spaced); the
   suggestion items are also <button>s, so every inherited property is reset
   here explicitly and the selector out-ranks any host form's button rule. */
.ou-suggest button.ou-suggest-item {
  display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  margin: 0; box-shadow: none; text-transform: none; letter-spacing: normal;
  font-family: inherit; white-space: normal;
  padding: 0.55rem 0.75rem; border-radius: 8px; font-size: 0.95rem; color: #0F1B2D;
  font-weight: 500; line-height: 1.3;
}
.ou-suggest button.ou-suggest-item strong { color: #A51C30; font-weight: 800; }
.ou-suggest button.ou-suggest-item:hover,
.ou-suggest button.ou-suggest-item.is-active { background: rgba(165, 28, 48, 0.08); color: #0F1B2D; }
.tg-corrected-note {
  margin: 0.5rem 0 0.75rem; font-size: 0.95rem; font-weight: 600; opacity: 0.85;
}

/* ==========================================================================
   /ai-courses landing page. The hero rides the homepage's .ou-hero system so
   both pages read identically; below it, magazine columns pair persuasion
   copy with inline SVG chart figures, all on the sitewide .lobs-container.
   ========================================================================== */
.ou-hero.aic-hero { min-height: clamp(560px, 74vh, 740px); }
.ou-hero.aic-hero .ou-hero__img { object-position: center 30%; }
/* "Master Artificial Intelligence." is a long headline — a step down from the
   homepage's display size keeps it to two strong lines instead of four. */
body.tg-body .ou-hero.aic-hero h1 { max-width: 18ch; font-size: clamp(2.7rem, 5.8vw, 4.8rem); }
.aic-hero-proof {
  margin-top: 1.9rem; display: flex; flex-wrap: wrap; gap: 0.6rem 2rem;
  font-size: 0.92rem; font-weight: 600; color: rgba(255,255,255,0.82);
}
.aic-hero-proof strong { color: #E4B3B8; font-weight: 800; }

.aic-cols {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center;
  margin-top: clamp(2.25rem, 4.5vw, 3.75rem);
}
.aic-cols--flip { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.aic-cols--flip .aic-copy { order: 2; }
.aic-cols--flip .aic-chart { order: 1; }
.aic-copy h3 {
  font-family: "Source Serif 4", Georgia, serif; font-weight: 700; letter-spacing: -0.015em;
  font-size: clamp(1.4rem, 2.2vw, 1.85rem); margin: 0 0 1rem; color: #0F1B2D;
}
.aic-copy p { line-height: 1.7; font-size: 1.04rem; color: #2b3448; margin: 0 0 1.15rem; max-width: 58ch; }
.aic-copy a:not(.tg-btn) { color: #A51C30; font-weight: 600; }
.aic-copy .tg-btn { margin-top: 0.4rem; }

.aic-chart {
  margin: 0; background: #fff; border: 1px solid rgba(15,27,45,0.09);
  border-radius: 16px; padding: 1.4rem 1.5rem 1rem; box-shadow: 0 8px 24px rgba(15,27,45,0.06);
}
.aic-chart figcaption { font-size: 0.95rem; color: #0F1B2D; margin-bottom: 1rem; line-height: 1.45; }
.aic-chart figcaption small { color: rgba(15,27,45,0.55); }
.aic-chart svg { width: 100%; height: auto; display: block; }

.aic-price-note {
  margin: 1.75rem auto 0; max-width: 60ch; text-align: center;
  font-size: 0.9rem; color: rgba(15,27,45,0.6); line-height: 1.55;
}
/* FAQ spans the full container, exactly like the what-you-gain grid above it;
   two columns keep the open/close rows a comfortable reading width. */
.aic-faq-wrap { margin: clamp(2.75rem, 5vw, 4rem) 0 0; }
.aic-faq-title {
  font-family: "Source Serif 4", Georgia, serif; font-weight: 700; letter-spacing: -0.015em;
  font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 0 0 1.25rem; color: #0F1B2D;
}
.aic-faq-wrap .ou-ai-faq {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; align-items: start;
}
@media (max-width: 860px) { .aic-faq-wrap .ou-ai-faq { grid-template-columns: 1fr; } }

@media (max-width: 960px) {
  .aic-cols, .aic-cols--flip { grid-template-columns: 1fr; }
  .aic-cols--flip .aic-copy { order: 1; }
  .aic-cols--flip .aic-chart { order: 2; }
}

/* Card badges — scarcity and social proof on the catalogue shelves */
.ou-ai-card__media { position: relative; }
.ou-ai-card__badge {
  position: absolute; top: 0.7rem; left: 0.7rem; z-index: 1;
  padding: 0.3rem 0.7rem; border-radius: 999px;
  background: rgba(15, 27, 45, 0.88); color: #fff;
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  backdrop-filter: blur(4px);
}
.ou-ai-card__badge.is-best { background: #A51C30; }
.ou-ai-card__foot s { color: rgba(15,27,45,0.45); font-weight: 600; margin-right: 0.3rem; font-size: 0.9em; }

/* ==========================================================================
   Conversion layer: live enrolment toasts, exit-intent rescue and the
   programme page's sticky enrol bar. Loaded sitewide via conversion.js.
   ========================================================================== */
.conv-toast {
  position: fixed; left: 1rem; bottom: 1rem; z-index: 1200;
  display: flex; align-items: center; gap: 0.8rem;
  max-width: 330px; padding: 0.8rem 1rem;
  background: #fff; border: 1px solid rgba(15,27,45,0.1); border-radius: 14px;
  box-shadow: 0 16px 44px rgba(15,27,45,0.22);
  transform: translateY(140%); transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.conv-toast.is-in { transform: translateY(0); }
.conv-toast__dot {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, #A51C30, #D4898F);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 0.95rem;
}
.conv-toast__text { font-size: 0.82rem; line-height: 1.45; color: #2b3448; }
.conv-toast__text strong { color: #0F1B2D; }
.conv-toast__text small { display: block; color: rgba(15,27,45,0.5); margin-top: 0.1rem; }
.conv-toast__close {
  position: absolute; top: 0.3rem; right: 0.5rem; border: 0; background: none; cursor: pointer;
  color: rgba(15,27,45,0.4); font-size: 0.9rem; line-height: 1; padding: 0.2rem;
}
@media (max-width: 640px) { .conv-toast { left: 0.75rem; right: 0.75rem; max-width: none; } }

.conv-exit {
  position: fixed; inset: 0; z-index: 1300; display: none;
  align-items: center; justify-content: center; padding: 1.25rem;
  background: rgba(10, 15, 24, 0.62); backdrop-filter: blur(3px);
}
.conv-exit.is-open { display: flex; }
.conv-exit__box {
  max-width: 30rem; background: #fff; border-radius: 20px; overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,0.4); text-align: center;
  animation: convExitIn 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes convExitIn { from { opacity: 0; transform: translateY(24px) scale(0.97); } to { opacity: 1; transform: none; } }
.conv-exit__band {
  background: linear-gradient(135deg, #0F1B2D 0%, #1d3050 70%, #7c2d12 100%);
  color: #fff; padding: 1.6rem 1.75rem 1.45rem;
}
.conv-exit__eyebrow {
  display: inline-block; margin-bottom: 0.55rem; padding: 0.25rem 0.75rem; border-radius: 999px;
  background: rgba(165, 28, 48, 0.22); border: 1px solid rgba(255, 138, 87, 0.45);
  color: #E4B3B8; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
}
/* The band heading sits on the navy gradient: global heading colours (near-black)
   would sink it into the background, so its white is pinned with !important. */
body.tg-body .conv-exit__band h3,
.conv-exit__band h3 {
  margin: 0 !important; font-family: "Source Serif 4", Georgia, serif !important;
  font-weight: 800 !important; letter-spacing: -0.02em !important;
  font-size: 1.55rem !important; line-height: 1.22 !important;
  color: #fff !important; text-transform: none !important;
}
body.tg-body .conv-exit__band h3 em,
.conv-exit__band h3 em { font-style: italic; color: #E4B3B8 !important; }
.conv-exit__body { padding: 1.4rem 1.75rem 1.6rem; }
.conv-exit__body p { margin: 0 0 1.1rem; font-size: 0.96rem; line-height: 1.6; color: #2b3448; }
.conv-exit__price {
  margin: 0 0 1rem; font-family: "Source Serif 4", Georgia, serif;
  font-weight: 800; font-size: 2.1rem; color: #0F1B2D;
}
.conv-exit__price s { color: rgba(15,27,45,0.4); font-weight: 600; font-size: 0.55em; margin-right: 0.45rem; }
.conv-exit__price small { display: block; font-family: inherit; font-size: 0.4em; font-weight: 700; color: #B33200; margin-top: 0.25rem; }
.conv-exit__ticks {
  margin: 0 0 1.15rem; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem 1.1rem;
  font-size: 0.8rem; font-weight: 600; color: rgba(15,27,45,0.6);
}
.conv-exit__body .tg-btn { width: 100%; justify-content: center; }
.conv-exit__later {
  display: inline-block; margin-top: 0.8rem; border: 0; background: none; cursor: pointer;
  font-size: 0.82rem; color: rgba(15,27,45,0.5); text-decoration: underline;
}

/* TilGlobal One professor panel (/one): a full-width navy band whose benefit rows
   span the whole card as pill rows, two abreast on desktop. */
.ou-onepro {
  padding: clamp(2rem, 4vw, 3rem);
  border-radius: 22px;
  background: linear-gradient(135deg, #0F1B2D 0%, #1d3050 60%, #7c2d12 130%);
  color: #fff;
  box-shadow: 0 24px 60px rgba(15, 27, 45, 0.35);
}
.ou-onepro .ou-eyebrow { color: #E4B3B8; }
body.tg-body .ou-onepro h2 {
  margin: 0.55rem 0 0.75rem;
  font-family: "Source Serif 4", Georgia, serif; font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: -0.02em; line-height: 1.15;
  color: #fff;
}
.ou-onepro h2 em { font-style: italic; color: #E4B3B8; }
.ou-onepro__head p {
  margin: 0; max-width: 68ch;
  color: rgba(255, 255, 255, 0.85); font-size: 1rem; line-height: 1.65;
}
.ou-onepro__head p strong { color: #fff; }
.ou-onepro__rows { margin-top: 1.9rem; }
.ou-onepro .tg-benefits--on-navy,
body .ou-onepro .tg-benefits--on-navy {
  background: none; border: 0; padding: 0; border-radius: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem 1.25rem;
}
.ou-onepro .tg-benefit-row,
body .ou-onepro .tg-benefit-row {
  margin: 0; font-size: 0.98rem; font-weight: 650;
  padding: 0.9rem 1.15rem; border-radius: 14px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.13);
}
@media (max-width: 720px) {
  .ou-onepro .tg-benefits--on-navy,
  body .ou-onepro .tg-benefits--on-navy { grid-template-columns: 1fr; }
}

/* FAQ rows at the container's full width (the default .sell-faq is centred at 52rem). */
.sell-faq.sell-faq--full { max-width: none; margin-inline: 0; }

/* TilGlobal One panel on the course page: the search page's sunk band, framed as a
   rounded card so it sits comfortably inside the fee section's container. */
.cd-one-band {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  background: var(--tg-surface-sunk, #EEF1F7);
  border: 1px solid rgba(15, 27, 45, 0.08);
  border-radius: 20px;
}
.cd-one-band .sell-head { margin-bottom: 1.6rem; }

.conv-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100;
  background: #0F1B2D; color: #fff;
  transform: translateY(110%); transition: transform 0.35s ease;
  box-shadow: 0 -12px 34px rgba(0,0,0,0.28);
}
.conv-sticky.is-in { transform: translateY(0); }
.conv-sticky__inner {
  width: min(1320px, calc(100% - clamp(2rem, 7vw, 6rem))); margin: 0 auto;
  display: flex; align-items: center; gap: 1.25rem; padding: 0.7rem 0;
}
.conv-sticky__title {
  flex: 1; min-width: 0; font-weight: 700; font-size: 0.95rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.conv-sticky__price { font-weight: 800; white-space: nowrap; }
.conv-sticky__price s { color: rgba(255,255,255,0.45); font-weight: 600; margin-right: 0.35rem; font-size: 0.88em; }
.conv-sticky .tg-btn { white-space: nowrap; }
@media (max-width: 640px) {
  .conv-sticky__title { display: none; }
  .conv-sticky__inner { justify-content: space-between; }
}

/* ==========================================================================
   Glossary term pages: article body, parent-course pitch card, chart pair
   and related-term chips. Charts reuse the .aic-chart figures.
   ========================================================================== */
.gt-article { max-width: 56rem; margin: 0 auto; padding: clamp(2rem, 4.5vw, 3.25rem) 1.25rem 0; }
.gt-article h2 {
  font-family: "Source Serif 4", Georgia, serif; font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(1.45rem, 2.8vw, 2rem); margin: 0 0 1rem; color: #0F1B2D;
}
.gt-article > p { line-height: 1.7; font-size: 1.03rem; color: #2b3448; margin: 0 0 1.1rem; }
.gt-article a:not(.tg-btn) { color: #A51C30; font-weight: 600; }

.gt-course-card {
  display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 1.75rem;
  background: #0F1B2D; color: #fff; border-radius: 18px;
  padding: clamp(1.5rem, 3vw, 2.25rem); box-shadow: 0 18px 48px rgba(15,27,45,0.25);
}
.gt-course-card__tag {
  display: inline-block; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: #E4B3B8; margin-bottom: 0.6rem;
}
.gt-course-card__main h3 {
  margin: 0 0 0.7rem; font-family: "Source Serif 4", Georgia, serif; font-weight: 700;
  font-size: clamp(1.25rem, 2.2vw, 1.65rem); letter-spacing: -0.015em; color: #fff;
}
.gt-course-card__main p { margin: 0 0 1rem; line-height: 1.6; color: rgba(255,255,255,0.82); font-size: 0.97rem; }
.gt-course-card__points { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.4rem; }
.gt-course-card__points li { font-size: 0.88rem; color: rgba(255,255,255,0.85); padding-left: 1.3rem; position: relative; }
.gt-course-card__points li::before { content: "\2713"; position: absolute; left: 0; color: #D4898F; font-weight: 800; }
.gt-course-card__side { display: flex; flex-direction: column; gap: 0.65rem; justify-content: center; text-align: center; }
.gt-course-card__side .tg-btn { justify-content: center; }
.gt-course-card__side small { color: rgba(255,255,255,0.6); font-size: 0.75rem; }
.gt-course-card__price { font-family: "Source Serif 4", Georgia, serif; font-weight: 800; font-size: 2rem; }
.gt-course-card__price s { color: rgba(255,255,255,0.4); font-weight: 600; font-size: 0.6em; margin-right: 0.4rem; }
.gt-course-card__price strong { color: #E4B3B8; }
@media (max-width: 760px) { .gt-course-card { grid-template-columns: 1fr; } }

.gt-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1.5rem; }
@media (max-width: 960px) { .gt-charts { grid-template-columns: 1fr; } }

.gt-related { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.gt-related__chip {
  display: inline-block; padding: 0.55rem 1.05rem; border-radius: 999px;
  background: #fff; border: 1px solid rgba(15,27,45,0.14); color: #0F1B2D;
  font-size: 0.88rem; font-weight: 600; text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.gt-related__chip:hover { border-color: #A51C30; transform: translateY(-1px); }

/* Programme fee cards: urgency line and trust row */
.cd-fee-urgency {
  margin: 0.9rem 0 0; display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 1rem; border-radius: 999px;
  background: rgba(165, 28, 48, 0.08); border: 1px solid rgba(165, 28, 48, 0.25);
  color: #B33200; font-size: 0.88rem; font-weight: 700;
}
.cd-fee-trust {
  margin-top: 0.85rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.1rem;
  font-size: 0.78rem; font-weight: 600; color: rgba(15,27,45,0.55); list-style: none; padding: 0;
}

/* ==========================================================================
   AI catalogue: sector cards on the homepage and /ai-courses, plus the
   why-AI stats band and FAQ styling on the dedicated page.
   ========================================================================== */
.ou-ai-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 1.25rem;
}
.ou-ai-card {
  display: flex; flex-direction: column; background: #fff; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(15, 27, 45, 0.08); box-shadow: 0 6px 18px rgba(15, 27, 45, 0.06);
  text-decoration: none; color: #0F1B2D; transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ou-ai-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(15, 27, 45, 0.14); }
.ou-ai-card__media { aspect-ratio: 16 / 9; overflow: hidden; background: #0F1B2D; }
.ou-ai-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ou-ai-card__body { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem 1.1rem 1.15rem; flex: 1; }
.ou-ai-card__body h3 { margin: 0; font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; }
.ou-ai-card__meta { display: flex; gap: 0.75rem; font-size: 0.82rem; font-weight: 600; color: rgba(15,27,45,0.55); }
.ou-ai-card__foot {
  margin-top: auto; display: flex; align-items: center; justify-content: space-between;
  padding-top: 0.6rem; border-top: 1px solid rgba(15, 27, 45, 0.07);
}
.ou-ai-card__foot strong { font-size: 1.05rem; font-weight: 800; }
.ou-ai-card__foot .cta { color: #A51C30; font-weight: 700; font-size: 0.88rem; }
.ou-ai-why { max-width: 62rem; margin-inline: auto; }
.ou-ai-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; margin-bottom: 2.5rem; }
.ou-ai-stat {
  background: #0F1B2D; color: #fff; border-radius: 16px; padding: 1.5rem 1.4rem; text-align: left;
}
.ou-ai-stat strong { display: block; font-size: 2rem; font-weight: 800; color: #E4B3B8; margin-bottom: 0.4rem; }
.ou-ai-stat span { font-size: 0.92rem; line-height: 1.45; color: rgba(255,255,255,0.82); }
.ou-ai-pitch p { max-width: 52rem; margin: 0.9rem auto; line-height: 1.65; }
.ou-ai-gain-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.25rem; max-width: 62rem; margin-inline: auto; }
.ou-ai-gain-grid > div { background: #fff; border: 1px solid rgba(15,27,45,0.08); border-radius: 14px; padding: 1.3rem; }
.ou-ai-gain-grid h3 { margin: 0 0 0.45rem; font-size: 1rem; font-weight: 800; }
.ou-ai-gain-grid p { margin: 0; font-size: 0.92rem; line-height: 1.5; color: rgba(15,27,45,0.72); }
.ou-ai-faq { max-width: 46rem; margin-inline: auto; }
.ou-ai-faq details {
  background: #fff; border: 1px solid rgba(15,27,45,0.1); border-radius: 12px;
  padding: 1rem 1.2rem; margin-bottom: 0.75rem;
}
.ou-ai-faq summary { cursor: pointer; font-weight: 700; font-size: 1rem; }
.ou-ai-faq p { margin: 0.75rem 0 0.25rem; line-height: 1.6; color: rgba(15,27,45,0.78); }
#ou-search-overlay {
  position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center;
  background: rgba(10, 18, 32, 0.86); backdrop-filter: blur(4px);
  animation: ou-overlay-in 0.18s ease-out;
}
@keyframes ou-overlay-in { from { opacity: 0; } to { opacity: 1; } }
.ou-search-overlay__box { text-align: center; color: #fff; padding: 2rem; max-width: 32rem; }
.ou-search-overlay__box h2 {
  font-family: "Source Serif 4", Georgia, serif; font-size: 1.6rem; margin: 1.1rem 0 0.5rem; color: #fff;
}
.ou-search-overlay__box p { color: rgba(255,255,255,0.75); font-size: 0.98rem; line-height: 1.5; margin: 0; }
.ou-search-overlay__spin {
  width: 44px; height: 44px; margin: 0 auto; border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.25); border-top-color: #A51C30;
  animation: ou-spin 0.8s linear infinite;
}
@keyframes ou-spin { to { transform: rotate(360deg); } }

.lobs-hero h1 {
  font-family: "Source Serif 4", Georgia, serif;
  font-weight: 800; letter-spacing: -0.03em; line-height: 1.05;
  font-size: clamp(2.1rem, 5.5vw, 3.6rem); max-width: 30ch; margin: 0;
}
.lobs-hero-sub {
  margin: 1.1rem 0 0; max-width: 62ch; color: rgba(255,255,255,0.82);
  font-size: clamp(1rem, 1.6vw, 1.12rem); line-height: 1.55; font-weight: 500;
}
.lobs-hero-stats {
  display: flex; flex-wrap: wrap; gap: 0.55rem 0.85rem; align-items: center;
  margin-top: 1.35rem; color: rgba(255,255,255,0.78); font-weight: 650; font-size: 0.92rem;
}
.lobs-hero-stats .dot { opacity: 0.45; }
.lobs-hero-cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: 1.75rem;
}
.lobs-btn-gold, .lobs-btn-sm {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: #A51C30; color: #fff !important; text-decoration: none !important;
  font-weight: 800; border-radius: 999px; border: none; cursor: pointer;
  box-shadow: 0 10px 28px rgba(37,99,235,0.28);
  transition: transform .18s ease, background .18s ease;
}
.lobs-btn-gold { padding: 0.95rem 1.45rem; font-size: 1rem; }
.lobs-btn-sm { padding: 0.55rem 1rem; font-size: 0.85rem; }
.lobs-btn-gold:hover, .lobs-btn-sm:hover { background: #8B1A1A; transform: translateY(-1px); }
.lobs-btn-gold .arr { transition: transform .18s ease; }
.lobs-btn-gold:hover .arr { transform: translateX(3px); }
.lobs-hero-price .from { display: block; font-size: 0.75rem; opacity: 0.7; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.lobs-hero-price strong { font-size: 1.85rem; font-weight: 800; letter-spacing: -0.02em; }
.lobs-hero-price .note { display: block; font-size: 0.82rem; opacity: 0.72; font-weight: 600; }

/* Sits below the site header rather than on top of it. Both are sticky, so if
   this one also stuck to top:0 the two would occupy the same strip — and with a
   higher z-index it covered the header entirely. The offset is measured from the
   real header in script; the fallback matches its default height. */
.course-nav-pill {
  position: sticky;
  top: var(--tg-header-h, 68px);
  z-index: 40;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #E8E5E0;
  box-shadow: 0 6px 18px rgba(15,23,42,0.05);
}
.course-nav-inner {
  width: min(1120px, calc(100% - 1rem)); margin: 0 auto;
  display: flex; gap: 0.25rem; overflow-x: auto; padding: 0.55rem 0;
}
.cnav-link {
  display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap;
  padding: 0.55rem 0.9rem; border-radius: 999px; text-decoration: none;
  color: #4A4E57; font-weight: 700; font-size: 0.86rem;
}
.cnav-link.active, .cnav-link:hover { background: #FDF6F7; color: #8B1A1A; }
@media (max-width: 700px) { .cnav-link.mobile-hide { display: none; } }

.lobs-sticky-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  background: #16181D; color: #fff; transform: translateY(110%);
  transition: transform .25s ease; box-shadow: 0 -8px 24px rgba(0,0,0,0.18);
}
.lobs-sticky-bar.is-visible { transform: translateY(0); }
.lobs-sticky-inner {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 0.85rem 0;
}
.lobs-sticky-inner h3 {
  margin: 0; font-size: 0.95rem; font-weight: 700; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 48vw;
}
.lobs-sticky-actions { display: flex; align-items: center; gap: 0.65rem; flex-shrink: 0; }
.lobs-sticky-actions .price { font-weight: 800; }
.lobs-sticky-actions .sep { opacity: 0.35; }
.lobs-sticky-actions .dur { opacity: 0.75; font-size: 0.85rem; font-weight: 600; }

.lobs-body { padding: clamp(2.5rem, 5vw, 3.75rem) 0 5rem; background: #fff; }
.lobs-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 2.5rem; align-items: start;
}
@media (max-width: 960px) { .lobs-grid { grid-template-columns: 1fr; } }

/* Anchor targets clear both the header and the course nav, so a jumped-to
   section is not hidden underneath them. */
.lobs-mag { margin-bottom: 2.75rem; scroll-margin-top: calc(var(--tg-header-h, 68px) + var(--tg-coursenav-h, 0px) + 1.25rem); }
.lobs-mag-head {
  display: flex; align-items: baseline; gap: 0.85rem; margin-bottom: 1rem;
}
.lobs-num {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.6rem; font-weight: 800; color: #A51C30; letter-spacing: -0.03em;
}
.lobs-mag-head h2 {
  margin: 0; font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem); font-weight: 800; letter-spacing: -0.02em; color: #16181D;
}
.lobs-mag-body {
  color: #4A4E57; line-height: 1.75; font-size: 1.02rem;
}
.lobs-mag-body p { margin: 0 0 1rem; }
.lobs-modules { list-style: none; margin: 0; padding: 0; }
.lobs-modules li {
  display: flex; gap: 0.85rem; padding: 0.85rem 0; border-bottom: 1px solid #F3F1EE;
}
.lobs-modules .n {
  width: 28px; height: 28px; border-radius: 50%; background: #FDF6F7; color: #8B1A1A;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.8rem; flex-shrink: 0;
}
.lobs-modules h3 { margin: 0; font-size: 1rem; font-weight: 750; color: #16181D; }
.lobs-mid-cta, .lobs-final-cta {
  background: linear-gradient(160deg, #16181D 0%, #6B1220 100%);
  color: #fff; border-radius: 18px; padding: 2rem 1.5rem; text-align: center; margin: 2.5rem 0;
}
.lobs-final-cta { border-radius: 0; margin: 0; padding: 3.5rem 0; }
.lobs-mid-cta h2, .lobs-final-cta h2 {
  font-family: "Source Serif 4", Georgia, serif; margin: 0.4rem 0 0.85rem;
  font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800;
}
.lobs-mid-cta p, .lobs-final-cta p { color: rgba(255,255,255,0.78); font-weight: 550; }

.lobs-aside-card {
  background: #fff; border: 1px solid #E8E5E0; border-radius: 16px;
  padding: 1.25rem; margin-bottom: 1rem; box-shadow: 0 10px 28px rgba(15,23,42,0.05);
}
.lobs-aside-sticky { position: sticky; top: calc(var(--tg-header-h, 68px) + var(--tg-coursenav-h, 0px) + 1rem); }
.lobs-aside-label {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tg-muted);
}
.lobs-aside-price { font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; margin: 0.35rem 0; }
.lobs-aside-price small { display: block; font-size: 0.85rem; color: var(--tg-muted); font-weight: 700; }
.lobs-aside-note { color: var(--tg-muted); font-weight: 600; font-size: 0.9rem; margin: 0 0 1rem; }
.lobs-aside-list { list-style: none; margin: 1rem 0 0; padding: 0; }
.lobs-aside-list li {
  position: relative; padding: 0.4rem 0 0.4rem 1.35rem; color: #4A4E57; font-weight: 650; font-size: 0.9rem;
}
.lobs-aside-list li::before { content: "✓"; position: absolute; left: 0; color: #A51C30; font-weight: 800; }
.lobs-aside-one {
  margin-top: 1rem; padding: 0.85rem; border-radius: 12px; background: #FDF6F7; border: 1px solid #E8C4C8;
}
.lobs-aside-one p { margin: 0.25rem 0 0; font-size: 0.85rem; color: #4A4E57; font-weight: 600; line-height: 1.45; }

/* Full-width programme (no sidebar).

   "Full width" here means the content column reclaims the space the 320px
   sidebar used to occupy — not that it runs edge to edge. Overriding the
   container's own width and margin removed both the gutters and the centring,
   so the body ran the whole monitor while the hero and fee sections below it
   stayed at container width. Keeping .lobs-container's sizing means every
   band on the page lines up. */
.lobs-main-full { max-width: none; }
.lobs-grid { display: block; }

/* Wide screens: magazine rail — section number/title pinned left, body fills the rest */
@media (min-width: 1180px) {
  .lobs-mag {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 2.75rem;
    align-items: start;
    margin-bottom: 3.25rem;
  }
  .lobs-mag-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    margin: 0;
    padding: 0;
    position: sticky;
    /* Clears the site header plus the sticky course anchor pill, so the pill
       never covers the pinned section title. */
    top: calc(var(--tg-header-h, 68px) + 74px);
  }
  .lobs-mag-head h2 { font-size: 1.45rem; line-height: 1.25; }
  .lobs-mag-body { font-size: 1.02rem; }
  .lobs-modules { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.25rem; }
}

/* Side-by-side fee cards */
.cd-fee-sidebyside {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  max-width: none;
  width: 100%;
  margin: 0;
  align-items: stretch;
}
@media (max-width: 800px) {
  .cd-fee-sidebyside { grid-template-columns: 1fr; }
}
.cd-fee-sidebyside .cd-fee-card { height: 100%; }

/* LearnUNI-style pro charts — one chart per row */
.cd-pro-charts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  margin-top: 1.75rem;
  max-width: none;
  width: 100%;
}
.cd-pro-chart {
  background: #fff;
  border: 1px solid #E8E5E0;
  border-radius: 16px;
  padding: 1.35rem 1.35rem 1rem;
  box-shadow: 0 10px 28px rgba(15,23,42,0.05);
  width: 100%;
}
.cd-pro-chart-head {
  margin-bottom: 0.9rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #F3F1EE;
}
.cd-pro-chart-title {
  font-weight: 800; font-size: 1.05rem; color: #16181D; letter-spacing: -0.02em; line-height: 1.35;
}
.cd-pro-chart-sub {
  font-size: 0.84rem; color: var(--tg-muted); font-weight: 600; margin-top: 0.3rem; line-height: 1.5;
}
.cd-pro-chart-canvas { width: 100% !important; }
.cd-pro-chart-foot {
  margin-top: 0.75rem;
  padding-top: 0.7rem;
  border-top: 1px solid #F3F1EE;
  font-size: 0.78rem;
  color: var(--tg-faint);
  font-weight: 600;
  line-height: 1.5;
}

/* LOBS homepage */
.lobs-home-hero {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(160deg, #16181D 0%, #23262E 55%, #6B1220 100%);
  padding: clamp(4rem, 9vw, 7rem) 0 clamp(3rem, 6vw, 5rem);
}
.lobs-home-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 45% 65% at 85% 15%, rgba(147,197,253,0.16), transparent 65%),
    radial-gradient(ellipse 40% 55% at 8% 90%, rgba(37,99,235,0.18), transparent 60%);
}
.lobs-home-hero .lobs-container { position: relative; z-index: 1; }
.lobs-home-hero h1 {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(2.4rem, 6.5vw, 4.5rem); font-weight: 800;
  letter-spacing: -0.035em; line-height: 0.98; max-width: 14ch; margin: 0.4rem 0 1rem;
}
.lobs-home-hero h1 .hl { color: #E4B3B8; }
.lobs-home-hero .lead {
  max-width: 58ch; color: rgba(255,255,255,0.82); font-size: 1.1rem; line-height: 1.55; font-weight: 550;
}
.lobs-home-search {
  margin-top: 1.75rem; display: flex; gap: 0; max-width: 640px;
  background: #fff; border-radius: 999px; padding: 0.35rem; box-shadow: 0 16px 40px rgba(0,0,0,0.22);
}
.lobs-home-search input {
  flex: 1; border: 0; outline: 0; background: transparent; padding: 0.85rem 1.15rem;
  font-size: 1rem; font-weight: 600; color: #16181D;
}
.lobs-home-search button {
  border: 0; border-radius: 999px; background: #A51C30; color: #fff;
  font-weight: 800; padding: 0.85rem 1.4rem; cursor: pointer;
}
.lobs-home-quick { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center; color: rgba(255,255,255,0.7); font-weight: 650; font-size: 0.9rem; }
.lobs-home-quick a { color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,0.25); padding: 0.3rem 0.75rem; border-radius: 999px; }
.lobs-home-quick a:hover { background: rgba(255,255,255,0.1); }
.lobs-marquee { overflow: hidden; background: #16181D; color: rgba(255,255,255,0.75); border-top: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08); }
.lobs-marquee__track { display: flex; width: max-content; animation: lobsMarquee 28s linear infinite; }
.lobs-marquee span { padding: 0.85rem 0; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.78rem; white-space: nowrap; padding-right: 2rem; }
@keyframes lobsMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.lobs-home-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; padding: 2.5rem 0;
}
@media (max-width: 800px) { .lobs-home-stats { grid-template-columns: 1fr 1fr; } }
.lobs-home-stat { text-align: center; }
.lobs-home-stat strong {
  display: block; font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 800; color: #16181D;
}
.lobs-home-stat span { color: var(--tg-muted); font-weight: 700; font-size: 0.88rem; }
.lobs-prog-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
}
@media (max-width: 900px) { .lobs-prog-grid { grid-template-columns: 1fr; } }
.lobs-prog {
  display: flex; flex-direction: column; justify-content: space-between; gap: 1.25rem;
  padding: 1.4rem; border-radius: 16px; border: 1px solid #E8E5E0; background: #fff;
  text-decoration: none; color: inherit; min-height: 200px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.lobs-prog:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(15,23,42,0.08); }
.lobs-prog__level { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #A51C30; }
.lobs-prog h3 { margin: 0.35rem 0; font-family: "Source Serif 4", Georgia, serif; font-size: 1.35rem; font-weight: 800; }
.lobs-prog p { margin: 0; color: var(--tg-muted); font-weight: 600; line-height: 1.5; }
.lobs-prog__cta { font-weight: 800; color: #A51C30; }
.lobs-prog--ink { background: linear-gradient(160deg, #16181D, #6B1220); color: #fff; border: 0; }
.lobs-prog--ink p { color: rgba(255,255,255,0.75); }
.lobs-prog--ink .lobs-prog__level, .lobs-prog--ink .lobs-prog__cta { color: #E4B3B8; }
.lobs-section-head { display: flex; justify-content: space-between; gap: 2rem; align-items: end; margin-bottom: 1.5rem; flex-wrap: wrap; }
.lobs-section-head h2 {
  font-family: "Source Serif 4", Georgia, serif; font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 800; letter-spacing: -0.03em; margin: 0.35rem 0 0; color: #16181D;
}
.lobs-section-head p { max-width: 40ch; color: var(--tg-muted); font-weight: 600; margin: 0; }
.lobs-section { padding: 3rem 0; }
.lobs-section--off { background: #FAF9F7; }

/* ==========================================================================
   Pricing comparison table — standard vs TilGlobal One member rates
   ========================================================================== */

.tg-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.tg-pricing-table {
  background: var(--tg-surface);
  border: 1px solid var(--tg-line);
  border-radius: var(--tg-radius-lg);
  box-shadow: var(--tg-shadow);
  overflow: hidden;
}

.tg-pricing-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.97rem;
}

.tg-pricing-table thead th {
  background: var(--tg-navy);
  color: var(--tg-on-navy);
  font-weight: 750;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  padding: 0.85rem 1.1rem;
  white-space: nowrap;
}

.tg-pricing-table tbody th,
.tg-pricing-table tbody td {
  padding: 0.95rem 1.1rem;
  border-top: 1px solid var(--tg-line);
  text-align: left;
  vertical-align: middle;
}

.tg-pricing-table tbody th {
  color: var(--tg-ink);
  font-weight: 750;
}

.tg-pricing-table tbody td {
  color: var(--tg-body);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.tg-pricing-table tbody tr:nth-child(even) { background: var(--tg-surface-sunk); }

.tg-pricing-table s { color: var(--tg-faint); text-decoration-thickness: 1px; }

.tg-pricing-table .is-member {
  color: var(--tg-royal-dark);
  font-weight: 800;
  font-size: 1.06rem;
}

.tg-pricing-note {
  margin: 0;
  padding: 0.85rem 1.1rem;
  background: var(--tg-info-bg);
  border-top: 1px solid var(--tg-line);
  color: var(--tg-muted);
  font-size: 0.87rem;
  font-weight: 620;
  line-height: 1.6;
}

@media (max-width: 640px) {
  .tg-pricing-table table { font-size: 0.9rem; }
  .tg-pricing-table thead th,
  .tg-pricing-table tbody th,
  .tg-pricing-table tbody td { padding: 0.7rem 0.75rem; }
}

/* ---- Data panels (Career Insights) ---- */
.tg-chart-panel {
  background: var(--tg-surface);
  border: 1px solid var(--tg-line);
  border-radius: var(--tg-radius-lg);
  box-shadow: var(--tg-shadow);
  padding: 1.4rem 1.5rem 0.5rem;
  margin-bottom: 2.5rem;
}
.tg-chart-note {
  margin: 0.9rem 0 0;
  padding: 0.7rem 0 0;
  border-top: 1px solid var(--tg-line);
  color: var(--tg-muted);
  font-size: 0.82rem;
  font-weight: 620;
}
.tg-fact-list {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  color: var(--tg-muted);
  font-size: 0.88rem;
  font-weight: 620;
}
.tg-fact-list strong { color: var(--tg-ink); font-weight: 800; }

/* Next-step CTA — the sitewide band above the footer. One of ten rotating headlines
   over a programme search, so every page ends by pointing at the catalogue. */
.tg-nextstep {
  background: linear-gradient(135deg, var(--tg-navy) 0%, #2B2E37 55%, var(--tg-royal-dark) 100%);
  color: #fff;
  padding: clamp(3rem, 7vw, 5rem) 1.25rem;
}
.tg-nextstep-inner { max-width: 860px; margin: 0 auto; text-align: center; }
.tg-nextstep-head {
  color: #fff;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(1.6rem, 3.6vw, 2.5rem);
  line-height: 1.18;
  margin: 0 0 0.8rem;
}
.tg-nextstep-sub {
  color: rgba(255,255,255,0.82);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  margin: 0 auto 1.8rem;
  max-width: 640px;
}
.tg-nextstep-form {
  display: flex;
  gap: 0.5rem;
  max-width: 560px;
  margin: 0 auto;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  padding: 0.35rem;
}
.tg-nextstep-form input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: #fff;
  font: inherit;
  padding: 0.55rem 1rem;
}
.tg-nextstep-form input::placeholder { color: rgba(255,255,255,0.6); }
.tg-nextstep-form button {
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--tg-navy);
  font-weight: 800;
  font-size: 0.95rem;
  padding: 0.6rem 1.4rem;
  cursor: pointer;
  white-space: nowrap;
}
.tg-nextstep-form button:hover { background: #FBEDE6; }
.tg-nextstep-links {
  margin-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 0.6rem;
}
.tg-nextstep-links a {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 650;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 999px;
  padding: 0.28rem 0.85rem;
}
.tg-nextstep-links a:hover { background: rgba(255,255,255,0.12); color: #fff; }
@media (max-width: 560px) {
  .tg-nextstep-form { flex-direction: column; border-radius: 18px; }
  .tg-nextstep-form button { width: 100%; padding: 0.7rem 1rem; }
}

/* ==========================================================================
   Header: logo + search + hamburger at every width. All navigation lives in
   a slide-down panel with large editorial links, LondonOBS-style.
   ========================================================================== */

.tg-nav-burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 12px;
  margin-left: 0.25rem;
  flex: 0 0 auto;
}
.tg-nav-burger span {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--tg-ink);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.tg-nav.is-open .tg-nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.tg-nav.is-open .tg-nav-burger span:nth-child(2) { opacity: 0; }
.tg-nav.is-open .tg-nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Search sits between logo and burger and stretches to fill the row. */
.tg-nav .tg-nav-search {
  flex: 1 1 auto;
  max-width: 560px;
  margin-left: auto;
}

/* The navigation panel: a full-screen ink overlay beneath the header bar,
   LondonOBS-style. The toggle script sets its top edge to the header height. */
.tg-nav-panel {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0; /* corrected by script to sit under the header */
  z-index: 60;
  background:
    radial-gradient(900px 480px at 88% -10%, rgba(165, 28, 48, 0.25), transparent 60%),
    linear-gradient(155deg, #16181D 0%, #0C0D10 100%);
  overflow-y: auto;
}
.tg-nav-panel.is-open { display: block; }
.tg-nav-panel__inner {
  max-width: var(--tg-max);
  margin: 0 auto;
  padding: clamp(2rem, 6vh, 4rem) 1.25rem 3rem;
  display: flex;
  flex-direction: column;
}
.tg-nav-panel__inner > a {
  text-decoration: none;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(1.7rem, 4.2vw, 2.7rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #fff;
  padding: clamp(0.7rem, 1.6vh, 1.05rem) 0.1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  transition: color 0.15s ease, padding-left 0.15s ease;
}
.tg-nav-panel__inner > a:hover { color: #D4898F; padding-left: 0.6rem; }
.tg-nav-panel__inner > a.tg-nav-panel__login {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: var(--tg-royal);
  border: 0;
  border-radius: 6px;
  text-align: center;
  padding: 1rem;
  margin-top: 1.6rem;
  align-self: flex-start;
  min-width: 240px;
}
.tg-nav-panel__inner > a.tg-nav-panel__login:hover { background: var(--tg-electric); color: #fff; padding-left: 1rem; }

@media (max-width: 640px) {
  .tg-nav-inner { padding-top: 0.6rem; padding-bottom: 0.6rem; }
  .tg-nav-panel__inner > a.tg-nav-panel__login { align-self: stretch; }
}

/* ==========================================================================
   Career Academy role cards — a role, the peers in it, and the programmes
   they actually enrolled in. Editorial rows, not boxes.
   ========================================================================== */

.ou-rolegrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.8rem, 3.4vw, 3rem);
}
.ou-role {
  border-top: 2px solid var(--tg-ink);
  padding-top: 1.2rem;
  display: flex;
  flex-direction: column;
}
.ou-role__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.4rem;
}
.ou-role__head h3 {
  margin: 0;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(1.3rem, 1.9vw, 1.55rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--tg-ink);
}
.ou-role__peers {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tg-royal);
  white-space: nowrap;
}
.ou-role ol {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  flex: 1;
}
.ou-role ol a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--tg-line);
  text-decoration: none;
  color: inherit;
}
.ou-role ol a .t {
  font-weight: 700;
  color: var(--tg-ink);
  line-height: 1.4;
  transition: color 0.15s ease;
}
.ou-role ol a:hover .t { color: var(--tg-royal); }
.ou-role ol a .m {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--tg-muted);
  white-space: nowrap;
}
.ou-role__more {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tg-ink);
}
.ou-role__more:hover { color: var(--tg-royal); }

@media (max-width: 860px) {
  .ou-rolegrid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Programme page: loading cover and inline enrolment prompts.
   ========================================================================== */

#course-overlay {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(900px 480px at 85% -10%, rgba(165, 28, 48, 0.28), transparent 60%),
    linear-gradient(155deg, #16181D 0%, #0C0D10 100%);
  color: #fff;
  opacity: 1;
  transition: opacity 0.45s ease;
}
#course-overlay.is-done { opacity: 0; pointer-events: none; }
.course-overlay__box { text-align: center; max-width: 620px; padding: 0 1.5rem; }
.course-overlay__spin {
  margin: 0 auto 1.7rem;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.16);
  border-top-color: #A51C30;
  animation: ouSpin 0.85s linear infinite;
}
.course-overlay__eyebrow {
  display: block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #D4898F;
  margin-bottom: 0.9rem;
}
#course-overlay h2 {
  margin: 0 0 0.9rem;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #fff;
}
#course-overlay p { margin: 0; color: rgba(255, 255, 255, 0.72); font-weight: 600; }
@keyframes ouSpin { to { transform: rotate(360deg); } }

.cd-inline-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem 1.5rem;
  border-top: 1px solid var(--tg-line);
  border-bottom: 1px solid var(--tg-line);
  padding: 0.95rem 0.2rem;
  margin: 2.4rem 0;
}
.cd-inline-cta span { color: var(--tg-muted); font-weight: 600; font-size: 0.95rem; }
.cd-inline-cta a {
  color: var(--tg-royal-text);
  font-weight: 800;
  text-decoration: none;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cd-inline-cta a:hover { color: var(--tg-royal); }

/* ==========================================================================
   Career Academy: role search, role-card hooks, and the ranked peer list.
   ========================================================================== */

.ou-role-search {
  margin: 1.7rem 0 2rem;
  display: flex;
  max-width: 620px;
  background: #fff;
  border-radius: 8px;
  padding: 0.4rem;
  gap: 0.4rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.32);
}
.ou-role-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  padding: 0.75rem 1rem;
  font: inherit;
  font-weight: 600;
  color: var(--tg-ink);
}
.ou-role-search input::placeholder { color: var(--tg-faint); }
.ou-role-search button {
  border: 0;
  cursor: pointer;
  background: var(--tg-royal);
  color: #fff;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0 1.4rem;
  border-radius: 6px;
  white-space: nowrap;
  transition: background 0.16s ease;
}
.ou-role-search button:hover { background: var(--tg-royal-dark); }
.ou-role-search--light { box-shadow: var(--tg-shadow); border: 1px solid var(--tg-line); }

.ou-role__hook {
  margin: 0.3rem 0 0.2rem;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--tg-muted);
}

.ou-rolerank { display: flex; flex-direction: column; max-width: 900px; }
.ou-rolerank__row {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: 1.15rem 0.2rem;
  border-bottom: 1px solid var(--tg-line);
  text-decoration: none;
  color: inherit;
}
.ou-rolerank__row:first-child { border-top: 2px solid var(--tg-ink); }
.ou-rolerank__n {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--tg-royal);
  flex: 0 0 auto;
}
.ou-rolerank__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.ou-rolerank__body .t {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(1.1rem, 1.7vw, 1.35rem);
  font-weight: 700;
  color: var(--tg-ink);
  transition: color 0.15s ease;
}
.ou-rolerank__row:hover .t { color: var(--tg-royal); }
.ou-rolerank__body .m { font-size: 0.84rem; font-weight: 700; color: var(--tg-muted); }
.ou-rolerank__go {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tg-ink);
  white-space: nowrap;
}
.ou-rolerank__row:hover .ou-rolerank__go { color: var(--tg-royal); }
@media (max-width: 640px) {
  .ou-rolerank__go { display: none; }
  .ou-role-search { flex-direction: column; }
  .ou-role-search button { padding: 0.75rem 1rem; }
}

/* ============================== Course browser (/browse) ============================== */

.br-hero {
  background: linear-gradient(135deg, #0d1b2e 0%, #14294a 55%, #1b3a6b 100%);
  color: #fff;
  padding: 4.2rem 0 3.4rem;
}
.br-crumbs { font-size: .82rem; color: rgba(255,255,255,.65); margin-bottom: 1.1rem; }
.br-crumbs a { color: rgba(255,255,255,.85); text-decoration: none; }
.br-crumbs a:hover { text-decoration: underline; }
.br-crumbs span { margin: 0 .35rem; }
.br-eyebrow {
  display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: #ffb454; margin: 0 0 .8rem;
}
.br-hero h1 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.12; margin: 0 0 .9rem; max-width: 24ch; color: #fff; }
.br-lead { font-size: 1.05rem; color: rgba(255,255,255,.82); max-width: 62ch; margin: 0; }

.br-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 2.2rem; align-items: start; }

/* Sticky sidebar: the categories list scrolls INSIDE the rail, so however many
   categories exist the sidebar never grows past the viewport. */
.br-side { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 1.4rem; max-height: calc(100vh - 120px); }
.br-filter { background: #fff; border: 1px solid #e5e9f2; border-radius: 14px; padding: 1.1rem 1.15rem; box-shadow: 0 8px 26px rgba(13,27,46,.06); }
.br-filter__title { font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #62708a; margin: 0 0 .8rem; }

.br-types { display: flex; flex-direction: column; gap: .55rem; }
.br-check { display: flex; align-items: center; gap: .6rem; font-size: .95rem; color: #1d2a40; cursor: pointer; }
.br-check input { width: 17px; height: 17px; accent-color: #f97316; cursor: pointer; }

.br-cats { display: flex; flex-direction: column; gap: .15rem; max-height: 48vh; overflow-y: auto; padding-right: .3rem; scrollbar-width: thin; }
.br-cat {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .55rem .7rem; border-radius: 9px; text-decoration: none;
  font-size: .93rem; color: #33415c;
}
.br-cat:hover { background: #f2f5fb; color: #0d1b2e; }
.br-cat.is-active { background: #0d1b2e; color: #fff; font-weight: 700; }
.br-cat em { font-style: normal; font-size: .78rem; font-weight: 700; color: #8a96ad; }
.br-cat.is-active em { color: #ffb454; }

.br-toolbar { display: flex; justify-content: space-between; align-items: center; margin: 0 0 1.3rem; }
.br-toolbar p { margin: 0; font-size: .95rem; color: #62708a; }
.br-toolbar strong { color: #0d1b2e; }

.br-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
.br-grid .ou-ai-card__body h3 { font-size: 1rem; line-height: 1.35; min-height: 2.7em; }

.br-pager { display: flex; align-items: center; justify-content: center; gap: .45rem; margin-top: 2.4rem; flex-wrap: wrap; }
.br-pager__num, .br-pager__nav {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 .8rem; border-radius: 10px;
  border: 1px solid #dfe5ef; background: #fff; color: #1d2a40;
  font-size: .92rem; font-weight: 600; text-decoration: none;
}
.br-pager__num:hover, .br-pager__nav:hover { border-color: #0d1b2e; }
.br-pager__num.is-current { background: #0d1b2e; border-color: #0d1b2e; color: #fff; }
.br-pager__gap { color: #8a96ad; padding: 0 .2rem; }

@media (max-width: 1024px) {
  .br-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .br-layout { grid-template-columns: 1fr; }
  .br-side { position: static; max-height: none; }
  .br-cats { max-height: 260px; }
}
@media (max-width: 620px) {
  .br-grid { grid-template-columns: 1fr; }
}