/* 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-teal);
  --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: #BAE6FD; }

/* 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: 38px; width: auto; display: block; }
.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;
  overflow: hidden;
  background:
    radial-gradient(circle at 85% 20%, rgba(20, 184, 166, 0.20), transparent 38%),
    radial-gradient(circle at 8% 85%, rgba(37, 99, 235, 0.14), transparent 42%),
    linear-gradient(160deg, #EFF6FF 0%, #FFFFFF 48%, #F8FAFC 100%);
  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; }

.tg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--tg-surface);
  border: 1px solid #BFDBFE;
  color: var(--tg-royal-dark);
  padding: 0.4rem 0.85rem;
  border-radius: var(--tg-radius-pill);
  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-size: clamp(2.8rem, 7vw, 4.6rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.02;
  margin: 0 0 1rem;
  color: var(--tg-navy);
}
.tg-brand-mark span {
  background: var(--tg-grad-action);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tg-hero h1 {
  font-size: clamp(1.35rem, 2.8vw, 1.85rem);
  font-weight: 700;
  max-width: 36rem;
  margin: 0 0 0.85rem;
  color: var(--tg-navy);
  line-height: 1.35;
}
.tg-hero p.lead {
  max-width: 34rem;
  color: var(--tg-body);
  margin: 0 0 1.6rem;
  font-size: 1.08rem;
}
.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: var(--tg-surface);
  border: 1px solid var(--tg-line);
  border-radius: 16px;
  padding: 1rem 1.05rem;
  box-shadow: var(--tg-shadow-sm);
}
.tg-stat strong {
  display: block;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--tg-navy);
}
.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-size: clamp(1.75rem, 3.4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  margin: 0 0 0.6rem;
  line-height: 1.15;
}
.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: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.28);
  color: #BAE6FD;
  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, #0B1F3A, #2563EB); }
.tg-a2 { background: linear-gradient(145deg, #2563EB, #3B82F6); }
.tg-a3 { background: linear-gradient(145deg, #1D4ED8, #14B8A6); }
.tg-a4 { background: linear-gradient(145deg, #0F9488, #14B8A6); }

.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: #BFDBFE;
  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;
}

.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); } }
@media (min-width: 1100px) { .lobs-carousel__track { grid-auto-columns: minmax(0, 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: #BFDBFE;
  box-shadow: var(--tg-shadow-lg);
}

.lobs-course-card__media { position: relative; aspect-ratio: 16 / 10; background: var(--tg-navy); 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: #7DD3FC;
  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-teal); 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: #7DD3FC; }

.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-teal); color: #04241F !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: #2DD4BF; color: #04241F !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: #7DD3FC; 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: center;
  gap: 0.35rem;
  flex: 1;
  max-width: 280px;
  margin-left: 0.5rem;
}
.tg-nav-search input {
  width: 100%;
  border: 1px solid var(--tg-line-strong);
  border-radius: var(--tg-radius-pill);
  padding: 0.55rem 0.9rem;
  font: inherit;
  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);
  padding: 0.55rem 0.9rem;
  font-weight: 800;
  background: var(--tg-royal);
  color: var(--tg-on-navy);
  cursor: pointer;
}
.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: #93C5FD;
  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, #DBEAFE, #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-teal-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, #EFF6FF, #f0f9ff);
  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, #1d4ed8, #2563EB 55%, #14B8A6);
  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: #1d4ed8 !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: #475569;
}
.cd-tier-plus { background: linear-gradient(135deg, #EFF6FF, #eff6ff); border-color: #BFDBFE; color: #1E3A8A; }
.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: #475569; 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: #475569; 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: #f8fafc; }
.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: #475569; line-height: 1.75; margin: 0 0 0.9rem; }
.cd-ai ul, .cd-ai ol { color: #475569; 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, #2563eb, #2563EB);
  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 #bfdbfe; border-top-color: #2563eb;
  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, #f8fafc, #EFF6FF);
  font-weight: 800; color: #0B1F3A; 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: #F8FAFC; }
.cd-table td:first-child { font-weight: 700; color: #0B1F3A; }
.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: #f8fafc;
}
.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: #0B1F3A; }
.cd-faq-body { margin-top: 0.7rem; color: #475569; }
.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: #f8fafc; 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, #2563eb, #14B8A6); 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: #475569; 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: #f8fafc;
}
.cd-related span { display: block; color: var(--tg-muted); font-size: 0.8rem; font-weight: 750; margin-bottom: 0.2rem; }
.cd-related strong { color: #0B1F3A; }

.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: #f8fafc;
}
.cd-plan.is-popular {
  border: 2px solid #2563EB;
  background: linear-gradient(180deg, #EFF6FF, #fff 55%);
  position: relative;
}
.cd-plan-badge {
  position: absolute; top: -0.55rem; right: 0.85rem;
  background: #2563EB; 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, #EFF6FF, #f0f9ff); border: 1px solid #BFDBFE;
}
.cd-plus-box p { margin: 0.25rem 0 0.45rem; color: #475569; font-size: 0.9rem; }
.cd-plus-box a { color: #1D4ED8; font-weight: 800; text-decoration: none; }

.cd-skills { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.cd-skills span {
  background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe;
  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, #0B1F3A, #1e3a8a 55%, #1E3A8A);
  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: #12304F;
}
.cd-cert-brand { font-weight: 800; letter-spacing: 0.08em; font-size: 0.78rem; color: #1d4ed8; }
.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: #f8fafc; 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, #0B1F3A 0%, #1d4ed8 55%, #2563EB 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: #1d4ed8 !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: #F8FAFC;
  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: #0B1F3A;
}
.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 #e2e8f0; background: #fff; color: #475569; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.cd-duration-btn.is-active {
  border-color: #2563eb; background: #2563eb; 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 #E2E8F0; 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 #2563eb;
  box-shadow: 0 16px 36px rgba(37, 99, 235, 0.12);
}
.cd-fee-badge {
  position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  background: #2563eb; 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: #0B1F3A; 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: #475569; font-weight: 650; font-size: 0.92rem; border-bottom: 1px solid #f1f5f9;
}
.cd-fee-bullets li::before {
  content: "✓"; position: absolute; left: 0; color: #2563eb; 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, #EFF6FF, #f0f9ff);
  border: 1px solid #BFDBFE; display: flex; gap: 1rem; align-items: center;
  justify-content: space-between; flex-wrap: wrap;
}
.cd-fees-one p { margin: 0.25rem 0 0; color: #475569; font-size: 0.9rem; font-weight: 600; line-height: 1.45; }
.cd-fees-one-note {
  font-size: 0.78rem; font-weight: 800; color: #1D4ED8; white-space: nowrap;
  background: #fff; border: 1px solid #BFDBFE; 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 {
  position: relative; color: #fff; overflow: hidden;
  background: linear-gradient(160deg, #0B1F3A 0%, #12304F 55%, #1E3A8A 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: #93c5fd; }
.lobs-breadcrumb .sep { color: #60a5fa; }
.lobs-eyebrow {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: #93c5fd; margin: 0 0 1rem;
}
.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: 18ch; 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: #2563eb; 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: #1d4ed8; 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 #E2E8F0;
  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: #475569; font-weight: 700; font-size: 0.86rem;
}
.cnav-link.active, .cnav-link:hover { background: #eff6ff; color: #1d4ed8; }
@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: #0B1F3A; 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: #2563eb; 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: #0B1F3A;
}
.lobs-mag-body {
  color: #475569; 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 #f1f5f9;
}
.lobs-modules .n {
  width: 28px; height: 28px; border-radius: 50%; background: #eff6ff; color: #1d4ed8;
  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: #0B1F3A; }
.lobs-mid-cta, .lobs-final-cta {
  background: linear-gradient(160deg, #0B1F3A 0%, #1E3A8A 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 #E2E8F0; 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: #475569; font-weight: 650; font-size: 0.9rem;
}
.lobs-aside-list li::before { content: "✓"; position: absolute; left: 0; color: #2563eb; font-weight: 800; }
.lobs-aside-one {
  margin-top: 1rem; padding: 0.85rem; border-radius: 12px; background: #eff6ff; border: 1px solid #bfdbfe;
}
.lobs-aside-one p { margin: 0.25rem 0 0; font-size: 0.85rem; color: #475569; 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;
    top: 104px;
  }
  .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 #E2E8F0;
  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 #f1f5f9;
}
.cd-pro-chart-title {
  font-weight: 800; font-size: 1.05rem; color: #0B1F3A; 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 #f1f5f9;
  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, #0B1F3A 0%, #12304F 55%, #1E3A8A 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: #93c5fd; }
.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: #0B1F3A;
}
.lobs-home-search button {
  border: 0; border-radius: 999px; background: #2563eb; 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: #0B1F3A; 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: #0B1F3A;
}
.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 #E2E8F0; 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: #2563eb; }
.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: #2563eb; }
.lobs-prog--ink { background: linear-gradient(160deg, #0B1F3A, #1E3A8A); 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: #93c5fd; }
.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: #0B1F3A;
}
.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: #F8FAFC; }

/* ==========================================================================
   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-teal-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; }