/*
 * New Horizons Nigeria LMS — Fiverr-reference visual layer
 * --------------------------------------------------------
 * Presentation overrides only. Routes, forms, IDs, data attributes and
 * workflow logic remain in the existing PHP/JS implementation.
 */

:root {
  --brand: #034b98;
  --brand-dark: #023d7d;
  --brand-strong: #022f62;
  --brand-mid: #1668bf;
  --brand-soft: #eaf3fb;
  --brand-tint: #f4f8fc;
  --brand-line: #b8d0e9;
  --navy: #12345a;
  --navy-2: #19416c;
  --navy-deep: #092640;
  --accent: #ec7425;
  --accent-dark: #ca5b14;
  --accent-soft: #fff4ec;
  --accent-text: #aa4c0f;

  --ink: #222325;
  --ink-soft: #404145;
  --ink-faint: #74767e;
  --surface: #fff;
  --surface-soft: #f7f7f7;
  --surface-muted: #f1f1f2;
  --border: #e4e5e7;
  --border-strong: #c5c6c9;

  --shadow-sm: 0 1px 3px rgb(0 0 0 / 5%);
  --shadow-md: 0 8px 24px rgb(0 0 0 / 10%);
  --shadow-lg: 0 18px 48px rgb(0 0 0 / 16%);
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --topbar-h: 64px;
  --sidebar-w: 244px;
  --container: 1320px;
}

[data-theme="dark"] {
  --ink: #f5f5f5;
  --ink-soft: #d5d5d7;
  --ink-faint: #a9aaad;
  --surface: #17181a;
  --surface-soft: #101113;
  --surface-muted: #222326;
  --border: #333438;
  --border-strong: #4b4c50;
  --brand-dark: #82b5ed;
  --brand-strong: #9ac3ee;
  --brand-soft: #17314e;
  --brand-tint: #102235;
}

html { scroll-padding-top: 104px; }
body {
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: -0.008em;
  background: var(--surface-soft);
}

h1, h2, h3, h4, strong, .page-title { letter-spacing: -0.026em; }
h1 { font-size: clamp(2rem, 3vw, 3rem); line-height: 1.08; font-weight: 700; }
h2 { font-size: clamp(1.65rem, 2.15vw, 2.15rem); line-height: 1.14; font-weight: 700; }
h3 { font-size: 1.08rem; line-height: 1.34; font-weight: 700; }
p { color: var(--ink-soft); }
svg.icon { width: 18px; height: 18px; stroke-width: 1.7; }
svg.icon-sm { width: 15px; height: 15px; }
.container { width: min(var(--container), calc(100% - 64px)); }

.btn {
  min-height: 40px;
  padding: 9px 16px;
  border-radius: 5px;
  border-color: var(--border-strong);
  background: var(--surface);
  color: var(--ink);
  box-shadow: none;
  font-size: 13px;
  font-weight: 700;
}
.btn:hover { border-color: var(--ink); background: var(--surface-muted); box-shadow: none; }
.btn.primary { color: #fff; background: var(--brand); border-color: var(--brand); }
.btn.primary:hover { color: #fff; background: var(--brand-dark); border-color: var(--brand-dark); }
.btn.light { color: var(--navy-deep); background: #fff; border-color: #fff; }
.btn.light:hover { color: var(--navy-deep); background: #f7f7f7; }
.btn.outline-light { color: #fff; background: transparent; border-color: rgb(255 255 255 / 75%); }
.btn.outline-light:hover { color: #fff; background: rgb(255 255 255 / 9%); border-color: #fff; }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--surface-muted); border-color: transparent; }
.btn.sm { min-height: 34px; padding: 7px 12px; font-size: 12px; }

input, select, textarea {
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 4px;
  border-color: var(--border-strong);
  font-size: 14px;
  background: var(--surface);
}
textarea { min-height: 118px; }
input:focus, select:focus, textarea:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
}
.field { gap: 6px; }
.field label { font-size: 12px; font-weight: 700; }
.field small, .hint { font-size: 12px; }

/* -------------------------------------------------------------------------- */
/* Public shell                                                               */
/* -------------------------------------------------------------------------- */
.public-body { background: #fff; color: var(--ink); }
.public-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 0;
  box-shadow: none;
}
.public-nav-main { border-bottom: 1px solid var(--border); }
.public-nav-container {
  width: min(var(--container), calc(100% - 64px));
  min-height: 64px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 24px;
}
.public-brand { flex: 0 0 auto; }
.public-brand .brand-nav-logo,
.topbar .brand-nav-logo,
.install-head .brand-nav-logo {
  width: auto;
  height: 29px;
  max-width: 172px;
  object-fit: contain;
  object-position: left center;
}
.desktop-search {
  display: grid;
  grid-template-columns: 1fr 42px;
  width: min(420px, 34vw);
  height: 40px;
  margin-left: 6px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
}
.desktop-search input,
.mobile-search input {
  min-height: 38px;
  padding: 8px 12px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  font-size: 13px;
}
.desktop-search input:focus,
.mobile-search input:focus { box-shadow: none; }
.desktop-search button,
.mobile-search button {
  display: grid;
  place-items: center;
  border: 0;
  color: #fff;
  background: #222325;
}
.mobile-search { display: none; }
.nav-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin-left: auto;
}
.public-primary-links { display: flex; align-items: center; gap: 2px; }
.public-primary-links > a {
  padding: 8px 9px;
  border-radius: 3px;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
}
.public-primary-links > a:hover { color: var(--ink); background: transparent; }
.public-primary-links > a.active { color: var(--brand-dark); }
.public-primary-links > a.active::after { display: none; }
.public-nav-actions { display: flex; align-items: center; gap: 13px; margin-left: 2px; }
.nav-login-link,
.nav-dashboard-link { color: var(--ink); font-size: 13px; font-weight: 600; white-space: nowrap; }
.nav-register-btn {
  min-height: 34px;
  padding: 7px 14px;
  color: #fff;
  background: #222325;
  border-color: #222325;
}
.nav-register-btn:hover { color: #fff; background: #000; border-color: #000; }
.public-avatar { width: 34px; height: 34px; background: var(--brand); }
.public-category-nav { border-bottom: 1px solid var(--border); background: #fff; }
.public-category-nav-inner {
  width: min(var(--container), calc(100% - 64px));
  height: 38px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 22px;
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
}
.public-category-nav-inner::-webkit-scrollbar { display: none; }
.public-category-nav a { color: var(--ink-soft); font-size: 11px; font-weight: 500; }
.public-category-nav a:hover { color: var(--brand-dark); }

/* Footer: Fiverr-like white information footer with one branded CTA above. */
.site-footer { color: var(--ink); background: #fff; border-top: 1px solid var(--border); }
.footer-cta-row { color: #fff; background: var(--navy-deep); }
.footer-cta-row .container {
  min-height: 190px;
  padding-block: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}
.footer-cta-row .container > div { max-width: 720px; display: grid; gap: 8px; }
.footer-eyebrow { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; opacity: .78; }
.footer-cta-row strong { font-size: clamp(1.6rem, 2.6vw, 2.35rem); line-height: 1.1; font-weight: 650; letter-spacing: -0.03em; }
.footer-cta-row span:last-child { max-width: 650px; font-size: 14px; color: rgb(255 255 255 / 78%); }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 38px;
  padding-block: 48px 24px;
}
.footer-links { display: grid; align-content: start; gap: 9px; }
.footer-links strong { margin-bottom: 4px; color: var(--ink); font-size: 12px; font-weight: 700; }
.footer-links a { color: var(--ink-soft); font-size: 12px; line-height: 1.45; }
.footer-links a:hover { color: var(--brand-dark); text-decoration: underline; }
.footer-bottom {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 10px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  color: var(--ink-faint);
  font-size: 11px;
}
.footer-bottom-brand { display: inline-flex; flex: 0 0 auto; }
.footer-bottom-brand img { width: auto; height: 24px; max-width: 134px; object-fit: contain; }
.footer-bottom-links { display: flex; gap: 14px; margin-left: auto; }
.footer-bottom a:hover { color: var(--brand-dark); }

/* -------------------------------------------------------------------------- */
/* Homepage                                                                   */
/* -------------------------------------------------------------------------- */
.market-hero,
.market-hero-inner { min-height: 520px; }
.market-hero { background: #141414; }
.market-hero-media::after {
  background: linear-gradient(90deg, rgb(0 0 0 / 78%) 0%, rgb(0 0 0 / 52%) 45%, rgb(0 0 0 / 22%) 72%, rgb(0 0 0 / 30%) 100%);
}
.market-hero-photo { object-position: center 42%; }
.market-hero-inner { padding-block: 62px; }
.market-hero-copy { max-width: 710px; }
.market-kicker {
  color: var(--brand-dark);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .09em;
}
.market-kicker.light { color: #fff; opacity: .88; }
.market-hero h1 {
  max-width: 690px;
  margin: 14px 0 18px;
  color: #fff;
  font-size: clamp(2.5rem, 3.2vw, 3rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.045em;
}
.market-hero p { max-width: 620px; color: rgb(255 255 255 / 88%); font-size: 16px; line-height: 1.55; }
.market-search {
  width: min(700px, 100%);
  height: 52px;
  margin: 26px 0 14px;
  padding: 0;
  display: grid;
  grid-template-columns: 42px 1fr 132px;
  gap: 0;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: none;
}
.market-search > svg { justify-self: center; color: var(--ink-faint); }
.market-search input { min-height: 52px; padding: 0 10px; border: 0; border-radius: 0; font-size: 14px; }
.market-search button { min-height: 52px; padding: 0 18px; border-radius: 0; background: #222325; font-size: 13px; }
.market-search button:hover { background: #000; }
.market-hero-actions { gap: 8px; }
.market-hero-actions .btn { min-height: 32px; padding: 6px 11px; color: #fff; background: rgb(0 0 0 / 30%); border-color: rgb(255 255 255 / 55%); font-size: 11px; }
.market-hero-actions .btn:hover { color: #fff; background: rgb(0 0 0 / 55%); border-color: #fff; }

.market-strip { border: 0; background: #fff; }
.market-strip-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding-block: 26px 14px;
}
.market-strip-grid > div,
.market-strip-grid > div:first-child {
  min-height: 88px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}
.market-strip-grid svg { color: var(--ink); }
.market-strip-grid strong { font-size: 12px; }
.market-strip-grid small { color: var(--ink-faint); font-size: 11px; }

.market-section { padding: 72px 0; background: #fff; }
.market-section:nth-of-type(even) { background: #fff; }
.market-section-heading { align-items: end; margin-bottom: 28px; gap: 32px; }
.market-section-heading > div { max-width: 700px; }
.market-section-heading h2 { margin: 7px 0 8px; font-size: clamp(1.7rem, 2.3vw, 2.25rem); font-weight: 600; }
.market-section-heading p { max-width: 650px; font-size: 14px; }
.market-section-heading > a { color: var(--ink); font-size: 12px; font-weight: 600; }
.market-section-heading > a:hover { color: var(--brand-dark); text-decoration: underline; }

.category-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  border: 0;
}
.category-card {
  min-height: 92px;
  grid-template-columns: 32px 1fr auto;
  gap: 10px;
  padding: 15px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 6px rgb(0 0 0 / 4%);
}
.category-card:hover { color: var(--ink); background: #fff; border-color: var(--border-strong); box-shadow: 0 3px 10px rgb(0 0 0 / 8%); }
.category-index { width: 26px; height: 26px; display: grid; place-items: center; color: var(--brand-dark); background: var(--brand-soft); border-radius: 5px; font-size: 10px; }
.category-card strong { font-size: 13px; }
.category-card small { color: var(--ink-faint); font-size: 11px; }
.category-card:hover small { color: var(--ink-faint); }

.market-course-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.market-course-card {
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  overflow: visible;
  background: transparent;
}
.market-course-card:hover { border-color: transparent; box-shadow: none; }
.market-course-art {
  min-height: 174px;
  padding: 16px;
  border-radius: 8px;
  box-shadow: inset 0 -2px 0 rgb(0 0 0 / 32%);
}
.market-course-art::after { width: 104px; height: 104px; right: -32px; top: -32px; border-width: 18px; }
.market-course-code { font-size: 11px; }
.market-course-mark { width: 42px; height: 42px; border-radius: 5px; font-size: 12px; font-weight: 800; }
.market-course-status { position: absolute; top: 12px; right: 12px; padding: 4px 7px; color: #075b38; background: #dff8eb; border-radius: 99px; font-size: 9px; }
.market-course-body { min-height: 0; padding: 12px 2px 0; }
.market-course-category { font-size: 10px; letter-spacing: .03em; text-transform: none; color: var(--brand-dark); }
.market-course-body h3 { margin: 5px 0 6px; font-size: 15px; line-height: 1.3; }
.market-course-body p { margin-bottom: 10px; color: var(--ink-faint); font-size: 12px; line-height: 1.45; -webkit-line-clamp: 2; }
.course-facts { gap: 7px 10px; margin-bottom: 10px; font-size: 10px; }
.course-card-link { color: var(--ink); font-size: 11px; font-weight: 700; }
.course-card-link:hover { color: var(--brand-dark); text-decoration: underline; }

.career-band { padding: 28px 0 66px; color: #fff; background: #fff; }
.career-band-grid {
  min-height: 360px;
  padding: 48px;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
  border-radius: 10px;
  background: var(--navy-deep);
}
.career-band h2 { max-width: 520px; margin: 10px 0 14px; color: #fff; font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 600; }
.career-band p { color: rgb(255 255 255 / 75%); font-size: 14px; }
.career-band-steps { border-top: 0; }
.career-band-steps li { min-height: 66px; grid-template-columns: 32px 1fr; gap: 10px; padding: 12px 0; border-bottom-color: rgb(255 255 255 / 16%); }
.career-band-steps b { color: #fff; font-size: 10px; opacity: .55; }
.career-band-steps strong { font-size: 13px; }
.career-band-steps small { color: rgb(255 255 255 / 62%); font-size: 11px; }

.solutions-section { padding-top: 44px; }
.solution-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; border: 0; border-radius: 0; }
.solution-grid article { min-height: 190px; padding: 6px 0 0; border: 0; }
.solution-grid article > span { width: 34px; height: 34px; display: grid; place-items: center; color: var(--brand-dark); background: var(--brand-soft); border-radius: 5px; font-size: 11px; }
.solution-grid h3 { margin: 22px 0 7px; font-size: 15px; }
.solution-grid p { margin-bottom: 10px; color: var(--ink-faint); font-size: 12px; }
.solution-grid a { margin-top: 6px; color: var(--ink); font-size: 11px; }

.learner-workspace { padding: 70px 0; background: #f5f7fa; }
.learner-workspace-grid { gap: 66px; }
.learner-workspace h2 { margin: 8px 0 12px; font-size: clamp(1.9rem, 2.8vw, 2.7rem); font-weight: 600; }
.learner-workspace p { font-size: 14px; }
.workspace-feature-list { gap: 8px; margin: 20px 0 24px; }
.workspace-feature-list span { font-size: 12px; }
.workspace-preview { padding: 22px; border-radius: 8px; box-shadow: none; }
.workspace-preview-row { min-height: 72px; }
.workspace-preview-row > span { width: 36px; height: 36px; border-radius: 5px; }
.workspace-preview-row strong { font-size: 12px; }
.workspace-preview-row small { font-size: 10px; }
.workspace-preview-row b { font-size: 10px; }

.home-faq { padding-top: 68px; }
.home-faq-grid { grid-template-columns: .78fr 1.22fr; gap: 72px; }
.home-faq h2 { margin: 8px 0 12px; font-size: 2rem; }
.faq-list summary { min-height: 60px; font-size: 13px; }
.faq-list p { padding-bottom: 18px; font-size: 12px; }

/* -------------------------------------------------------------------------- */
/* Catalogue and course pages                                                 */
/* -------------------------------------------------------------------------- */
.catalogue-hero,
.verify-hero,
.registration-hero,
.policy-hero {
  padding: 54px 0 42px;
  background: #fff;
}
.catalogue-hero .container,
.verify-hero .container,
.registration-hero .container,
.policy-hero .container { max-width: 1320px; }
.catalogue-hero h1,
.verify-hero h1,
.registration-hero h1,
.policy-hero h1 { max-width: 780px; margin: 8px 0 10px; font-size: clamp(2rem, 3.2vw, 2.9rem); font-weight: 600; }
.catalogue-hero p,
.verify-hero p,
.registration-hero p,
.policy-hero p { max-width: 720px; font-size: 14px; }
.catalogue-search {
  width: min(760px, 100%);
  min-height: 48px;
  margin-top: 22px;
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  overflow: hidden;
  background: #fff;
}
.catalogue-search input { border: 0; box-shadow: none; }
.catalogue-search .btn { min-height: 48px; border-radius: 0; }
.catalogue-category-bar { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: #fff; }
.category-pills { min-height: 54px; display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.category-pills::-webkit-scrollbar { display: none; }
.category-pills a { flex: 0 0 auto; padding: 8px 11px; border: 1px solid var(--border); border-radius: 6px; color: var(--ink-soft); background: #fff; font-size: 11px; font-weight: 600; }
.category-pills a.active { color: #fff; background: var(--brand); border-color: var(--brand); }
.category-pills a span { margin-left: 4px; color: inherit; opacity: .7; }
.catalogue-results { padding-top: 48px; }
.catalogue-results-head { margin-bottom: 24px; }
.catalogue-results-head h2 { margin-bottom: 4px; font-size: 24px; }
.catalogue-results-head p { margin: 0; font-size: 12px; }
.catalogue-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 18px; }
.catalogue-row {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.catalogue-row-art { min-height: 170px; border-radius: 8px; padding: 16px; }
.catalogue-row-main { padding: 12px 0 0; }
.catalogue-row-main h3 { margin: 5px 0 6px; font-size: 15px; }
.catalogue-row-main p { min-height: 0; margin: 0 0 10px; font-size: 12px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.catalogue-row-action { min-width: 0; padding: 10px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; border: 0; }
.catalogue-row-action .btn { min-height: 34px; padding: 7px 11px; }
.availability-note { font-size: 10px; }
.catalogue-help { padding: 50px 0; background: var(--navy-deep); }
.catalogue-help-inner { min-height: 0; }
.catalogue-help h2 { color: #fff; font-size: 28px; }
.catalogue-help p { color: rgb(255 255 255 / 72%); font-size: 13px; }

.course-detail-hero { padding: 44px 0 54px; background: #fff; color: var(--ink); }
.course-detail-hero-grid { grid-template-columns: minmax(0, 1.65fr) minmax(320px, .75fr); align-items: start; gap: 56px; }
.breadcrumbs { margin-bottom: 22px; color: var(--ink-faint); font-size: 11px; }
.course-detail-copy .market-kicker.light { color: var(--brand-dark); opacity: 1; }
.course-detail-copy h1 { max-width: 760px; margin: 8px 0 12px; color: var(--ink); font-size: clamp(2rem, 3.2vw, 2.9rem); font-weight: 650; }
.course-detail-copy > p { max-width: 700px; color: var(--ink-soft); font-size: 14px; }
.course-detail-meta { color: var(--ink-faint); font-size: 11px; }
.course-enrol-card { position: sticky; top: 118px; border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-sm); overflow: hidden; background: #fff; }
.course-enrol-art { min-height: 150px; }
.course-enrol-body { padding: 20px; }
.course-enrol-body h2 { font-size: 18px; }
.course-enrol-body p { font-size: 12px; }
.course-enrol-body small { font-size: 10px; }
.course-detail-content { padding: 50px 0 76px; background: #fff; }
.course-detail-grid { grid-template-columns: minmax(0, 1.65fr) minmax(280px, .75fr); gap: 56px; }
.course-detail-section { padding: 28px 0; border-bottom: 1px solid var(--border); }
.course-detail-section:first-child { padding-top: 0; }
.course-detail-section h2 { margin: 7px 0 12px; font-size: 24px; }
.course-overview-card { padding: 24px; border: 1px solid var(--border); border-radius: 8px; }
.overview-facts { gap: 14px; }
.overview-facts > div { padding: 12px 0; }
.curriculum-list details { border-bottom: 1px solid var(--border); }
.curriculum-list summary { min-height: 58px; font-size: 12px; }
.detail-process-grid { gap: 14px; }
.detail-process-grid > div { min-height: 150px; padding: 18px; border: 1px solid var(--border); border-radius: 6px; }
.detail-process-grid strong { font-size: 13px; }
.detail-process-grid p { font-size: 11px; }
.course-intakes { align-self: start; padding: 20px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.course-intakes-head h2 { font-size: 18px; }
.course-intakes article { padding: 14px 0; }
.course-intakes article strong { font-size: 12px; }
.course-intakes article span { font-size: 10px; }

/* -------------------------------------------------------------------------- */
/* Editorial info / About / Trust-style pages                                 */
/* -------------------------------------------------------------------------- */
.info-hero {
  padding: 54px 0;
  color: #fff;
  background: var(--navy-deep);
}
.info-hero-inner {
  min-height: 210px;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  gap: 70px;
}
.info-hero-copy h1 { max-width: 700px; margin: 10px 0 0; color: #fff; font-size: clamp(2.25rem, 3.6vw, 3.35rem); font-weight: 600; }
.info-hero-inner > p { margin: 0; color: rgb(255 255 255 / 78%); font-size: 14px; line-height: 1.6; }
.info-page-content { padding: 82px 0; background: #fff; }
.info-feature-stack { display: grid; gap: 92px; }
.info-feature-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); align-items: center; gap: 76px; }
.info-feature-row.reverse .info-feature-visual { order: 2; }
.info-feature-row.reverse .info-feature-copy { order: 1; }
.info-feature-visual {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(145deg, var(--brand-strong), var(--navy-deep));
}
.info-feature-row:nth-child(2) .info-feature-visual { color: var(--navy-deep); background: #e7f1fb; }
.info-feature-row:nth-child(3) .info-feature-visual { background: #222325; }
.info-feature-row:nth-child(4) .info-feature-visual { color: var(--navy-deep); background: #f6e8dc; }
.info-feature-visual::before { content: ""; position: absolute; width: 260px; height: 260px; right: -82px; bottom: -92px; border: 40px solid rgb(255 255 255 / 10%); border-radius: 50%; }
.info-feature-visual-index { position: absolute; top: 20px; left: 22px; font-size: 11px; font-weight: 800; opacity: .8; }
.info-feature-visual-icon { width: 96px; height: 96px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; }
.info-feature-visual-icon .icon { width: 42px; height: 42px; }
.info-feature-visual-word { position: absolute; left: 22px; bottom: 18px; max-width: 70%; font-size: 12px; font-weight: 700; opacity: .7; }
.info-feature-copy { max-width: 520px; }
.info-feature-copy h2 { margin: 8px 0 12px; font-size: clamp(1.9rem, 2.8vw, 2.6rem); font-weight: 600; }
.info-feature-copy p { font-size: 14px; line-height: 1.65; }
.info-feature-copy .text-link { margin-top: 8px; color: var(--ink); font-size: 12px; }
.info-feature-copy .text-link:hover { color: var(--brand-dark); }
.about-story { display: grid; grid-template-columns: .85fr 1.15fr; gap: 80px; padding: 66px 0 20px; border-top: 1px solid var(--border); }
.about-story h2 { margin-top: 8px; font-size: 30px; font-weight: 600; }
.about-story p { font-size: 13px; }
.about-audiences { display: flex; flex-wrap: wrap; gap: 8px; padding: 26px 0 14px; }
.about-audiences span { padding: 7px 10px; border: 1px solid var(--border); border-radius: 99px; color: var(--ink-soft); font-size: 10px; }
.info-cta {
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 40px 44px;
  color: #fff;
  background: var(--navy-deep);
  border-radius: 9px;
}
.info-cta h2 { margin: 7px 0 8px; color: #fff; font-size: 30px; font-weight: 600; }
.info-cta p { margin: 0; max-width: 650px; color: rgb(255 255 255 / 72%); font-size: 13px; }

/* -------------------------------------------------------------------------- */
/* Contact, verification, policies, generic public content                    */
/* -------------------------------------------------------------------------- */
.public-section { padding: 64px 0; background: #fff; }
.public-section + .public-section { border-top: 1px solid var(--border); }
.section-heading { margin-bottom: 26px; }
.section-heading h2 { font-size: 27px; }
.section-heading p { font-size: 13px; }
.eyebrow { font-size: 10px; letter-spacing: .08em; }
.contact-hero { padding: 54px 0; color: #fff; background: var(--navy-deep); }
.contact-hero-grid { gap: 64px; }
.contact-hero h1 { margin: 8px 0 12px; color: #fff; font-size: 42px; font-weight: 600; }
.contact-hero p { color: rgb(255 255 255 / 75%); font-size: 14px; }
.contact-hero .eyebrow.dark { color: #fff; opacity: .75; }
.contact-hero-panel { padding: 26px; border: 1px solid rgb(255 255 255 / 20%); border-radius: 8px; background: rgb(255 255 255 / 7%); }
.contact-hero-panel p { font-size: 12px; }
.support-grid { gap: 14px; }
.support-card { min-height: 190px; padding: 22px; border: 1px solid var(--border); border-radius: 7px; box-shadow: none; }
.support-card .tile-icon { width: 34px; height: 34px; display: grid; place-items: center; color: var(--brand-dark); background: var(--brand-soft); border-radius: 5px; }
.support-card h3 { margin: 18px 0 7px; font-size: 15px; }
.support-card p { font-size: 12px; }
.support-card .text-link { font-size: 11px; }

.verify-section { padding: 60px 0 76px; background: #fff; }
.verify-layout { grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: start; }
.verify-card { padding: 28px; border: 1px solid var(--border); border-radius: 8px; box-shadow: none; }
.verify-card-head { margin-bottom: 22px; }
.verify-card-head > span { width: 42px; height: 42px; border-radius: 5px; }
.verify-card h2, .verify-guidance h2 { font-size: 24px; }
.verify-card p, .verify-guidance p { font-size: 12px; }
.verify-guidance > div { gap: 10px; }
.verify-guidance > div > span { min-height: 42px; font-size: 12px; }

.policy-hero { border-bottom: 1px solid var(--border); }
.policy-updated { font-size: 11px; }
.policy-section { padding: 56px 0 84px; background: #fff; }
.policy-layout { grid-template-columns: 220px minmax(0, 820px); gap: 62px; justify-content: center; }
.policy-nav-wrap { font-size: 11px; }
.policy-nav { top: 116px; }
.policy-nav a { min-height: 36px; padding: 8px 10px; border-left-width: 2px; font-size: 11px; }
.policy-contact { font-size: 10px; }
.policy-content { max-width: 820px; }
.policy-content > section { padding: 0 0 34px; margin: 0 0 38px; border-bottom: 1px solid var(--border); }
.policy-section-number { font-size: 10px; }
.policy-content h2 { margin: 5px 0 14px; font-size: 23px; }
.policy-content h3 { font-size: 16px; }
.policy-content p,
.policy-list li { font-size: 13px; line-height: 1.72; color: var(--ink-soft); }
.policy-notice { padding: 18px; border-radius: 5px; background: var(--brand-tint); }
.policy-related { padding: 24px 0 0; border: 0; }

/* -------------------------------------------------------------------------- */
/* Auth / registration                                                        */
/* -------------------------------------------------------------------------- */
.auth-market-layout {
  min-height: calc(100vh - 103px);
  padding: 56px 24px 72px;
  display: grid;
  /* minmax(0, 1fr), not 1fr: a bare 1fr track keeps an automatic min-content
     floor, which lets the card push past a narrow viewport instead of shrinking. */
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  background: var(--surface-soft);
}
.auth-market-card {
  width: 100%;
  max-width: 1040px;
  min-height: 638px;
  display: grid;
  grid-template-columns: 1fr 1.04fr;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: var(--shadow-lg);
}

/* Brand panel. The scrim is functional rather than decorative: white copy sits
   over an uncontrolled photograph and needs a guaranteed contrast floor. */
.auth-market-visual { position: relative; min-height: 638px; overflow: hidden; background: var(--navy-deep); }
/* Direct child only: the panel also contains the brand lock-up, which must keep
   its own intrinsic size rather than being stretched like the backdrop. */
.auth-market-visual > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 45% center; }
/* Heavy where the copy sits, light through the middle so the photograph is
   actually visible rather than a murky field. */
.auth-market-visual-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(11 34 58 / 90%) 0%, rgb(11 34 58 / 52%) 34%, rgb(11 34 58 / 42%) 56%, rgb(11 34 58 / 93%) 100%); }
.auth-market-visual-copy {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  padding: 46px 38px;
  color: #fff;
}
/* One thin inset rule — the same framing the issued certificate carries, so the
   front door and the credential read as the same system. */
.auth-market-visual-copy::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 7px;
  pointer-events: none;
}
/* Statement sits high and the verification block settles at the foot; the gap
   between them absorbs the remaining height instead of splitting it evenly. */
.auth-visual-top { position: relative; margin-bottom: auto; }
.auth-visual-brand { width: auto; height: 30px; max-width: 190px; object-fit: contain; }
.auth-market-visual-copy h2 { max-width: 15ch; margin: 26px 0 12px; color: #fff; font-size: 30px; font-weight: 650; line-height: 1.18; }
.auth-market-visual-copy p { margin: 0; color: rgb(255 255 255 / 82%); font-size: 13.5px; line-height: 1.62; }

/* Certificate verification is a second, account-free journey that lands on this
   page — employers and registrars never sign in, so it gets its own entry. */
.auth-visual-verify {
  position: relative;
  padding: 18px;
  border: 1px solid rgb(255 255 255 / 24%);
  border-radius: var(--radius-sm);
  background: rgb(11 34 58 / 58%);
}
.auth-visual-verify-label { display: flex; align-items: center; gap: 7px; color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.auth-visual-verify p { margin: 9px 0 14px; color: rgb(255 255 255 / 80%); font-size: 12.5px; line-height: 1.55; }

.auth-market-form-wrap { min-height: 638px; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 44px 46px; background: #fff; }
/* The surrounding card is the container here, so the form itself carries no
   second border, padding or shadow of its own. */
/* width + max-width rather than min(): inside a centred grid item, a percentage
   min() can resolve against the wrong box and overflow narrow viewports. */
.auth-market-form { width: 100%; max-width: 392px; min-width: 0; display: grid; gap: var(--s-4); padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.auth-brand { display: inline-flex; justify-self: start; margin-bottom: var(--s-1); }
.auth-brand img { width: auto; height: 30px; max-width: 180px; object-fit: contain; }
/* The brand panel already carries the lock-up; the form only repeats it once
   that panel is dropped at the 680px breakpoint below. */
.auth-market-layout:not(.auth-market-layout--resume) .auth-brand { display: none; }

.auth-heading { display: grid; gap: 6px; }
.auth-heading h1 { margin: 0; font-size: 29px; font-weight: 700; letter-spacing: -.015em; }
.auth-heading p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }
.auth-heading a, .auth-legal a, .field-label-link { text-decoration: underline; text-underline-offset: 2px; }
.auth-notices { display: grid; gap: var(--s-2); }
.auth-notice { padding: 12px 14px; }
.auth-notice .alert-body > span { color: var(--ink-soft); font-size: 12.5px; line-height: 1.45; }

/* The recovery link belongs on the password label row, where it is read as part
   of that field rather than floating between the field and the submit button. */
.field-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.field-label-link { font-size: 12px; font-weight: 700; color: var(--brand-dark); }

.auth-alt { display: grid; gap: var(--s-3); }
.auth-alt-divider { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-3); }
.auth-alt-divider::before, .auth-alt-divider::after { content: ""; height: 1px; background: var(--border); }
.auth-alt-divider > span { font-size: 12px; font-weight: 700; color: var(--ink-faint); }
.auth-alt-btn { width: 100%; min-height: 46px; font-size: 14px; }
.auth-alt-note { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--ink-faint); text-align: center; }
.auth-market-layout--resume { min-height: calc(100vh - 103px); padding: 42px 20px 58px; background: #f4f6f8; }
.auth-market-layout--resume .auth-market-card {
  width: min(520px, 100%);
  min-height: 0;
  grid-template-columns: 1fr;
  border: 1px solid #dfe5eb;
  border-radius: 12px;
  box-shadow: 0 18px 50px rgb(2 43 89 / 14%);
}
.auth-market-layout--resume .auth-market-form-wrap { min-height: 0; padding: 38px 46px 34px; }
.auth-market-layout--resume .auth-market-form {
  width: 100%;
  gap: 16px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.auth-market-layout--resume .auth-market-form .field + .field { margin-top: 0; }
.auth-market-layout--resume .auth-brand { justify-self: center; margin-bottom: 4px; }
.auth-market-layout--resume .auth-brand img { height: 34px; max-width: 205px; }
.auth-resume-status {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid #cbddec;
  border-radius: 8px;
  background: #f2f7fb;
}
.auth-resume-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: var(--brand); background: #fff; border: 1px solid #cbddec; }
.auth-resume-status > span:last-child { display: grid; gap: 2px; }
.auth-resume-status strong { color: var(--navy-deep); font-size: 13px; }
.auth-resume-status small { color: var(--ink-soft); font-size: 11px; line-height: 1.4; }
.auth-market-layout--resume .auth-heading { margin: 2px 0 0; text-align: center; }
.auth-market-layout--resume .auth-heading h1 { margin-bottom: 6px; font-size: 30px; }
.auth-market-layout--resume .auth-heading p { color: var(--ink-soft); line-height: 1.5; }
.auth-resume-ready { display: flex; gap: 7px; align-items: center; justify-content: center; margin: -2px 0 0; color: var(--ink-soft); font-size: 11px; }
.auth-resume-ready .icon { color: var(--brand); }
.auth-market-layout--resume .auth-legal { margin: 4px 0 0 !important; text-align: center; }
.auth-submit { width: 100%; min-height: 48px; margin-top: var(--s-1); font-size: 14.5px; }
.auth-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-6); margin-top: var(--s-1); }
.auth-footer-links a { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
.auth-footer-links a:hover { color: var(--brand-dark); }
.auth-legal { margin: 0; color: var(--ink-faint); font-size: 11.5px; line-height: 1.55; text-align: center; }
.input-affix .affix-btn { border-radius: 0; }

.registration-section { padding: 48px 0 80px; background: #fff; }
.registration-grid,
.registration-layout { grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr); gap: 46px; align-items: start; }
.registration-form { padding: 0; border: 0; border-radius: 0; box-shadow: none; background: #fff; }
.form-section-head { margin: 0 0 22px; padding: 0 0 16px; border-bottom: 1px solid var(--border); }
.form-section-head + .form-grid { margin-bottom: 34px; }
.form-section-head > span { width: 28px; height: 28px; border-radius: 50%; font-size: 11px; }
.form-section-head h2 { margin: 0 0 3px; font-size: 18px; }
.form-section-head p { margin: 0; font-size: 11px; }
.registration-consent { padding: 16px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); font-size: 11px; }
.registration-submit-row { margin-top: 20px; }
.registration-submit-row > span { font-size: 11px; }
.registration-aside { position: sticky; top: 118px; gap: 14px; }
.registration-aside section { padding: 22px; border: 1px solid var(--border); border-radius: 7px; background: #fff; }
.registration-aside h2 { font-size: 17px; }
.registration-aside p,
.registration-aside small { font-size: 11px; }
.registration-aside ol li { min-height: 60px; }
.registration-payment-accounts > div { padding: 12px 0; }

/* -------------------------------------------------------------------------- */
/* Standalone auth form pages (registration, staff-managed notice)            */
/* These run on the bare auth layout: no site nav, no footer.                 */
/* -------------------------------------------------------------------------- */
.auth-form-page { min-height: 100vh; display: grid; place-items: start center; padding: 48px 20px 64px; background: var(--surface-soft); }
.auth-form-shell { width: 100%; max-width: 560px; display: grid; gap: var(--s-5); }
.auth-form-shell--wide { max-width: 660px; }
.auth-form-brand { justify-self: center; display: inline-flex; }
.auth-form-brand img { width: auto; height: 30px; max-width: 190px; object-fit: contain; }
.auth-form-card { padding: var(--s-7); border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-md); }
.auth-form-head { margin-bottom: var(--s-5); }
.auth-form-head h1 { margin: 0 0 6px; font-size: 25px; letter-spacing: -.015em; }
.auth-form-head p { margin: 0; color: var(--ink-soft); font-size: 13.5px; line-height: 1.55; }
.auth-form-head .route-status { margin-bottom: 12px; }
.auth-form-body { display: grid; gap: var(--s-5); }
.auth-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.auth-form-grid .wide { grid-column: 1 / -1; }
.auth-form-rule { height: 1px; margin: 0; border: 0; background: var(--border); }
.field .opt { color: var(--ink-faint); font-weight: 600; font-size: 11px; }
.auth-consent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; padding: var(--s-4) 0; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }
.auth-consent a { color: var(--brand-dark); font-weight: 700; }
.auth-form-signin { margin: 0; text-align: center; font-size: 13px; color: var(--ink-soft); }
.auth-form-signin a { color: var(--brand-dark); font-weight: 700; }
.auth-form-aside { display: grid; gap: var(--s-3); padding: 0 var(--s-2); text-align: center; }
.auth-form-aside p { margin: 0; color: var(--ink-faint); font-size: 12px; line-height: 1.6; }
.auth-form-aside a { color: var(--brand-dark); font-weight: 700; }
.auth-invite { display: grid; gap: 8px; padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-soft); text-align: left; }
.auth-invite--inline { margin-top: var(--s-5); }
.auth-invite label { font-size: 12.5px; font-weight: 700; }
.auth-invite-row { display: flex; gap: var(--s-2); }
.auth-invite-row input { flex: 1; min-width: 0; }

/* Category picker: real radios, styled as tiles. A dropdown hides the options
   until opened, and with only four it is quicker to read them all at once. */
.picker { min-width: 0; margin: 0; padding: 0; border: 0; }
.picker-legend { padding: 0; margin-bottom: var(--s-3); color: var(--ink); font-size: 13px; font-weight: 700; }
.picker-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.picker-tile { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3); align-items: start; padding: 14px 14px 13px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: #fff; cursor: pointer; }
.picker-tile:hover { border-color: var(--brand-line); }
.picker-tile input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.picker-tile-body { display: grid; gap: 3px; min-width: 0; }
.picker-tile-name { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.picker-tile-note { font-size: 11.5px; line-height: 1.45; color: var(--ink-faint); }
.picker-tile-flag { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; color: var(--brand-dark); font-size: 11px; font-weight: 700; }
.picker-tile-check { width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid var(--border-strong); border-radius: 50%; color: transparent; background: #fff; }
.picker-tile input:checked ~ .picker-tile-check { color: #fff; background: var(--brand); border-color: var(--brand); }
.picker-tile:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); background: var(--brand-tint); }
.picker-tile input:focus-visible ~ .picker-tile-check { outline: 3px solid rgb(3 75 152 / 32%); outline-offset: 2px; }

/* Per-category fields. Hidden only once the script has taken over, so the form
   still works when it has not run. */
.stream-fields { min-width: 0; margin: 0; padding: 0; border: 0; }
.stream-fields-legend { padding: 0; margin-bottom: var(--s-3); color: var(--ink-soft); font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.is-picker-active .stream-fields { display: none; }
.is-picker-active .stream-fields.is-active { display: block; }
.is-picker-active .stream-fields-legend { display: none; }

/* Administrator control over each category's registration mode */
.mode-choices { display: grid; gap: 6px; }
.mode-choice { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: start; font-size: 12.5px; color: var(--ink-soft); }
.mode-help { display: grid; gap: 10px; margin: 14px 0 0; padding-left: 18px; color: var(--ink-soft); font-size: 13px; line-height: 1.6; }
.mode-help strong { color: var(--ink); }

/* Route chooser. Three of the four learner categories are staff-managed, so the
   status and the requirements are stated on the row itself — a retail learner
   should not have to open a form to discover they cannot use it. */
.reg-routes { padding: 4px 0 80px; background: var(--surface-soft); }
/* A decision list reads badly at full container width — hold it to a measure
   where the title, requirements and action stay in one eyeline. The modifier is
   only on the chooser/managed pages so the wizard's wider grid stays aligned. */
.reg-routes .container, .registration-hero--narrow .container { width: min(940px, calc(100% - 48px)); }
.route-list { display: grid; gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
.route-card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: var(--s-5);
  align-items: start;
  padding: var(--s-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #fff;
}
.route-card.is-open { border-color: var(--brand-line); box-shadow: var(--shadow-sm); }
.route-index { padding-top: 3px; color: var(--ink-faint); font-size: 13px; font-weight: 800; letter-spacing: .06em; }
.route-card.is-open .route-index { color: var(--brand); }
.route-body { min-width: 0; }
.route-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.route-title-row h2 { margin: 0; font-size: 19px; }
.route-status { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: var(--surface-muted); color: var(--ink-soft); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.route-status.is-open { background: var(--brand-tint); color: var(--brand-dark); }
.route-summary { margin: 10px 0 0; color: var(--ink-soft); font-size: 13.5px; line-height: 1.6; }
.route-needs { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.route-needs li { padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-soft); color: var(--ink-soft); font-size: 11.5px; font-weight: 600; }
.route-note { margin: 12px 0 0; color: var(--ink-faint); font-size: 12px; line-height: 1.55; }
.route-action { align-self: center; }
.route-action .btn { white-space: nowrap; }
.reg-foot { display: grid; gap: 6px; margin-top: var(--s-7); padding-top: var(--s-6); border-top: 1px solid var(--border); }
.reg-foot p { margin: 0; color: var(--ink-soft); font-size: 13px; }
.reg-foot a { color: var(--brand-dark); font-weight: 700; }

/* Staff-managed route page. The section shares the chooser's measure so the
   hero heading and the panels below it start on the same left edge. */
.registration-section--narrow .container { width: min(940px, calc(100% - 48px)); }
.registration-managed { display: grid; gap: var(--s-5); width: 100%; }
.managed-notice { padding: var(--s-6); border: 1px solid var(--border); border-left: 3px solid var(--brand); border-radius: var(--radius-md); background: #fff; }
.managed-notice h2 { margin: 12px 0 8px; font-size: 20px; }
.managed-notice p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.6; }
.managed-steps { display: grid; gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
.managed-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.managed-step-index { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-tint); color: var(--brand-dark); font-size: 12px; font-weight: 800; }
.managed-steps li > div { display: grid; gap: 3px; }
.managed-steps strong { font-size: 14px; }
.managed-steps span { color: var(--ink-soft); font-size: 12.5px; line-height: 1.55; }
.managed-invite { display: grid; gap: var(--s-4); padding: var(--s-6); border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff; }
.managed-invite h3 { margin: 0 0 4px; font-size: 16px; }
.managed-invite p { margin: 0; color: var(--ink-soft); font-size: 12.5px; line-height: 1.55; }
.managed-invite-row { display: flex; gap: var(--s-3); }
.managed-invite-row input { flex: 1; min-width: 0; }

/* -------------------------------------------------------------------------- */
/* Operational app shell                                                      */
/* -------------------------------------------------------------------------- */
.app-body { background: var(--surface-soft); }
.topbar {
  min-height: 64px;
  padding: 0 22px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  box-shadow: none;
}
.topbar-left { gap: 12px; }
.topbar-left .brand { display: inline-flex; align-items: center; }
.topbar-left .brand-nav-mark { display: none; }
.topbar-tag { padding-left: 12px; border-left: 1px solid var(--border); color: var(--ink-faint); font-size: 11px; font-weight: 600; }
.topbar-right { gap: 8px; }
.icon-btn {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border-color: transparent;
  background: transparent;
}
.icon-btn:hover { border-color: transparent; background: var(--surface-muted); }
.notification-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--danger, #d92d20);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--surface, #fff);
}
[data-theme="dark"] .notification-badge { box-shadow: 0 0 0 2px var(--surface-soft, #101a2c); }
.topbar-user { min-height: 42px; padding: 4px 7px; border-radius: 5px; }
.topbar-user:hover { background: var(--surface-muted); }
.avatar { width: 32px; height: 32px; background: var(--brand); font-size: 11px; }
.topbar-user-meta strong { font-size: 11px; }
.topbar-user-meta span { font-size: 9px; }
.menu-panel { border-radius: 7px; border-color: var(--border); box-shadow: var(--shadow-md); }
.menu-head, .menu-item { font-size: 12px; }
.menu-item { min-height: 38px; }

.sidebar {
  top: 64px;
  width: 244px;
  padding: 18px 12px 28px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  box-shadow: none;
}
.sidebar-context { padding: 6px 10px 14px; border-bottom: 1px solid var(--border); }
.sidebar-context-label { color: var(--ink-faint); font-size: 9px; letter-spacing: .08em; }
.sidebar-context strong { font-size: 12px; }
.side-group { margin-top: 12px; }
.side-group-head { min-height: 30px; padding: 6px 8px; color: var(--ink-faint); font-size: 10px; font-weight: 700; text-transform: none; letter-spacing: 0; }
.side-links { gap: 2px; }
.side-link {
  min-height: 38px;
  gap: 10px;
  padding: 8px 9px;
  border-radius: 5px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 550;
}
.side-link .icon { width: 17px; height: 17px; }
.side-link:hover { color: var(--ink); background: var(--surface-muted); }
.side-link.active { color: var(--brand-dark); background: var(--brand-soft); box-shadow: none; }
.side-sub { margin: 2px 0 6px 26px; padding-left: 8px; border-left: 1px solid var(--border); }
.side-sub .side-link { min-height: 30px; padding: 5px 7px; font-size: 10px; }
.main { margin-left: 244px; }
.page { width: min(1500px, calc(100% - var(--s-10))); padding: var(--s-7) 0 var(--s-10); }
.page-crumbs { margin-bottom: 10px; color: var(--ink-faint); font-size: 10px; }
.page-head { gap: var(--s-7); margin-bottom: var(--s-6); }
.page-title { font-size: clamp(1.55rem, 2vw, 1.9rem); font-weight: 700; }
.page-head .muted { max-width: 760px; margin: 5px 0 0; font-size: 12px; }
.page-actions .btn { min-height: 36px; }

.card,
.soft-card,
.table-card,
.learner-panel {
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  box-shadow: none;
}
.card, .soft-card { padding: 20px; }
.card-head, .table-head { margin-bottom: 16px; }
.card-head h2, .table-head h2, .workbench-head h2 { font-size: 17px; }
.section { margin-top: 22px; }
.grid { gap: 14px; }
.actions { gap: 8px; }

.workbench { gap: var(--s-7); }
.workbench-section { gap: var(--s-4); }
.workbench-head { margin-bottom: 0; }
.stats { gap: 1px; }
.stat {
  min-height: 116px;
  padding: 18px;
  border: 0;
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
}
.stat-icon { width: 34px; height: 34px; border-radius: 5px; background: var(--brand-soft); color: var(--brand-dark); }
.stat strong { font-size: 25px; }
.stat span, .stat small { font-size: 10px; }
.stat-strip { border-radius: 7px; }
.stat-strip-item { padding: 16px; }

.tabs { min-height: 42px; gap: 22px; border-bottom: 1px solid var(--border); }
.tab { min-height: 42px; padding: 0 1px; border-radius: 0; color: var(--ink-faint); font-size: 11px; font-weight: 650; }
.tab:hover { color: var(--ink); background: transparent; }
.tab.active { color: var(--brand-dark); background: transparent; box-shadow: inset 0 -2px var(--brand); }
.tab-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; font-size: 9px; }

.list-toolbar,
.filter-bar,
.filters { gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); }
.list-toolbar input,
.list-toolbar select,
.filter-bar input,
.filter-bar select,
.filters input,
.filters select { min-height: 38px; font-size: 12px; }

.table-frame,
.table-card { overflow: visible; }
.table-wrap { border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.data-table { font-size: 12px; }
.data-table thead th {
  padding: 10px 12px;
  color: var(--ink-faint);
  background: var(--surface-soft);
  border-bottom: 1px solid var(--border);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: none;
}
.data-table tbody td { padding: 11px 12px; border-bottom: 1px solid var(--border); }
.data-table tbody tr:hover { background: var(--brand-tint); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.table-result-count { font-size: 10px; }
.badge {
  min-height: 22px;
  padding: 3px 7px;
  border-radius: 99px;
  font-size: 9px;
  font-weight: 700;
}

.todo-row,
.tile { min-height: 64px; padding: 12px 0; border-radius: 0; border-bottom: 1px solid var(--border); }
.todo-row:last-child, .tile:last-child { border-bottom: 0; }
.todo-icon, .tile-icon { width: 34px; height: 34px; border-radius: 5px; }
.todo-body strong, .tile-body strong { font-size: 12px; }
.todo-body span, .tile-body span { font-size: 10px; }

.blank-state { min-height: 200px; padding: 34px 20px; border-radius: 6px; }
.blank-icon { width: 42px; height: 42px; border-radius: 6px; }
.blank-state strong { font-size: 15px; }
.blank-state p { font-size: 11px; }

.drawer-panel { border-radius: 8px 0 0 8px; box-shadow: -10px 0 30px rgb(0 0 0 / 12%); }
.drawer-head, .drawer-body, .drawer-foot { padding-left: 22px; padding-right: 22px; }
.drawer-head h2 { font-size: 19px; }

.search-panel { border-radius: 8px; box-shadow: var(--shadow-lg); }
.search-field { border-radius: 5px; }
.search-groups { gap: 4px; }

/* Installer */
.install-wrap { max-width: 920px; }
.install-head { padding: 18px 0; }
.install-body { border-radius: 8px; box-shadow: none; border: 1px solid var(--border); }
.install-steps { font-size: 10px; }
.install-step-dot { width: 26px; height: 26px; }

/* -------------------------------------------------------------------------- */
/* Responsive                                                                 */
/* -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .container,
  .public-nav-container,
  .public-category-nav-inner { width: calc(100% - 44px); }
  .desktop-search { width: min(350px, 31vw); }
  .public-primary-links > a { padding-inline: 6px; font-size: 12px; }
  .market-course-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .catalogue-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .info-feature-row { gap: 54px; }
}

@media (max-width: 920px) {
  :root { --topbar-h: 64px; }
  html { scroll-padding-top: 102px; }
  .container { width: calc(100% - 40px); }
  .public-nav-container { width: calc(100% - 32px); min-height: 62px; gap: 12px; }
  .public-brand .brand-nav-logo { height: 27px; max-width: 154px; }
  .desktop-search { display: none; }
  .public-nav-toggle { display: inline-grid; margin-left: auto; }
  .nav-links {
    position: fixed;
    z-index: 105;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(360px, 90vw);
    display: block;
    padding: 24px;
    overflow-y: auto;
    background: #fff;
    transform: translateX(102%);
    transition: transform .22s ease, box-shadow .22s ease;
  }
  /* Same fix as .sidebar above: box-shadow only while the drawer is
     actually open, so it can never bleed past its off-canvas position. */
  body.public-nav-open .nav-links { transform: translateX(0); box-shadow: -12px 0 30px rgb(0 0 0 / 16%); }
  .nav-scrim { inset: 0; }
  .mobile-search { display: grid; grid-template-columns: 1fr 42px; height: 42px; margin: 54px 0 22px; border: 1px solid var(--border-strong); border-radius: 4px; overflow: hidden; }
  .nav-sheet-label { display: block; margin-bottom: 5px; color: var(--ink-faint); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
  .public-primary-links { display: grid; gap: 0; }
  .public-primary-links > a { min-height: 46px; display: flex; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
  .public-nav-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
  .nav-login-link, .nav-dashboard-link, .nav-register-btn { min-height: 42px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--ink); border-radius: 5px; }
  .nav-register-btn { color: #fff; background: #222325; }
  .public-avatar { display: none; }
  .public-category-nav-inner { width: calc(100% - 32px); }

  .market-hero, .market-hero-inner { min-height: 500px; }
  .market-hero h1 { font-size: clamp(2.35rem, 5vw, 3rem); }
  .market-strip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .category-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .market-course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .career-band-grid { grid-template-columns: 1fr; gap: 32px; padding: 36px; }
  .solution-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .learner-workspace-grid, .home-faq-grid { grid-template-columns: 1fr; gap: 42px; }
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .catalogue-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .course-detail-hero-grid, .course-detail-grid { grid-template-columns: 1fr; gap: 34px; }
  .course-enrol-card { position: static; max-width: 520px; }
  .course-intakes { max-width: none; }

  .info-hero-inner { grid-template-columns: 1fr; gap: 20px; min-height: 0; }
  .info-feature-stack { gap: 70px; }
  .info-feature-row, .info-feature-row.reverse { grid-template-columns: 1fr; gap: 32px; }
  .info-feature-row.reverse .info-feature-visual, .info-feature-row.reverse .info-feature-copy { order: initial; }
  .info-feature-visual { min-height: 300px; }
  .about-story { grid-template-columns: 1fr; gap: 20px; }
  .info-cta { align-items: flex-start; flex-direction: column; }

  .policy-layout { grid-template-columns: 1fr; gap: 26px; }
  .policy-nav-wrap { display: none; }
  .verify-layout { grid-template-columns: 1fr; gap: 36px; }
  .registration-grid, .registration-layout { grid-template-columns: 1fr; }
  .registration-aside { position: static; }

  .auth-market-card { grid-template-columns: .9fr 1.1fr; }
  .auth-market-visual-copy { padding: 34px 28px; }
  .auth-market-visual-copy h2 { font-size: 26px; }
  .auth-market-form-wrap { padding: 34px 28px; }

  .route-card { grid-template-columns: 34px minmax(0, 1fr); }
  .route-action { grid-column: 2; align-self: start; }

  .sidebar-toggle { display: inline-grid; }
  /* box-shadow only on the open state — see the matching note in portal.css's
     .sidebar rule. This file loads after portal.css and was reintroducing
     the same unconditional shadow there, which is what was actually bleeding
     past the closed drawer's off-canvas position: fixing only one of the two
     duplicate .sidebar rules left this one still winning the cascade. */
  .sidebar { z-index: 100; width: min(300px, 88vw); transform: translateX(-102%); transition: transform .22s ease, box-shadow .22s ease; }
  body.sidebar-open .sidebar { transform: translateX(0); box-shadow: 12px 0 28px rgb(0 0 0 / 14%); }
  .main { margin-left: 0; }
  .page { width: calc(100% - var(--s-8)); }
}

@media (max-width: 680px) {
  .container { width: calc(100% - 28px); }
  .public-nav-container { width: calc(100% - 24px); }
  .public-category-nav-inner { width: calc(100% - 24px); height: 36px; gap: 18px; }
  .public-category-nav a { font-size: 10px; }

  .market-hero, .market-hero-inner { min-height: 520px; }
  .market-hero-inner { align-items: flex-end; padding-block: 48px; }
  .market-hero h1 { font-size: 2.35rem; }
  .market-hero p { font-size: 14px; }
  .market-search { height: auto; grid-template-columns: 36px 1fr; }
  .market-search button { grid-column: 1 / -1; min-height: 44px; }
  .market-strip-grid { grid-template-columns: 1fr; gap: 8px; }
  .market-strip-grid > div { min-height: 72px; }
  .market-section { padding: 54px 0; }
  .market-section-heading { align-items: flex-start; flex-direction: column; gap: 12px; margin-bottom: 22px; }
  .market-section-heading h2 { font-size: 1.75rem; }
  .category-cards { grid-template-columns: 1fr; }
  .category-card { min-height: 80px; }
  .market-course-grid { grid-template-columns: 1fr; gap: 28px; }
  .market-course-art { min-height: 190px; }
  .career-band { padding: 10px 0 52px; }
  .career-band-grid { padding: 28px 22px; border-radius: 8px; }
  .career-band h2 { font-size: 2rem; }
  .solution-grid { grid-template-columns: 1fr; gap: 28px; }
  .solution-grid article { min-height: 0; }
  .learner-workspace { padding: 54px 0; }
  .home-faq { padding-top: 54px; }

  .footer-cta-row .container { min-height: 0; align-items: flex-start; flex-direction: column; padding-block: 36px; gap: 20px; }
  .footer-cta-row strong { font-size: 1.75rem; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 20px; padding-block: 38px 20px; }
  .footer-bottom { grid-column: 1 / -1; align-items: flex-start; flex-wrap: wrap; }
  .footer-bottom-links { width: 100%; margin-left: 0; }

  .catalogue-hero, .verify-hero, .registration-hero, .policy-hero { padding: 40px 0 32px; }
  .catalogue-hero h1, .verify-hero h1, .registration-hero h1, .policy-hero h1 { font-size: 2rem; }
  .catalogue-search { grid-template-columns: 34px 1fr; }
  .catalogue-search .btn { grid-column: 1 / -1; }
  .catalogue-list { grid-template-columns: 1fr; gap: 30px; }
  .catalogue-row-art { min-height: 190px; }
  .catalogue-help h2 { font-size: 23px; }

  .course-detail-hero { padding: 34px 0 40px; }
  .course-detail-copy h1 { font-size: 2rem; }
  .course-detail-meta { display: grid; gap: 7px; }
  .course-detail-content { padding: 34px 0 56px; }
  .course-overview-card { padding: 18px; }
  .detail-process-grid { grid-template-columns: 1fr; }

  .info-hero { padding: 40px 0; }
  .info-hero-copy h1 { font-size: 2.2rem; }
  .info-page-content { padding: 54px 0; }
  .info-feature-stack { gap: 54px; }
  .info-feature-visual { min-height: 240px; }
  .info-feature-copy h2 { font-size: 1.85rem; }
  .about-story { padding-top: 44px; }
  .info-cta { min-height: 0; padding: 30px 24px; }
  .info-cta h2 { font-size: 24px; }

  .contact-hero { padding: 40px 0; }
  .contact-hero-grid { grid-template-columns: 1fr; gap: 26px; }
  .contact-hero h1 { font-size: 2.1rem; }
  .public-section { padding: 52px 0; }
  .support-grid { grid-template-columns: 1fr; }
  .policy-section { padding: 42px 0 60px; }
  .policy-content h2 { font-size: 20px; }
  .policy-content p, .policy-list li { font-size: 12px; }

  .auth-market-layout { min-height: calc(100vh - 100px); padding: 24px 14px 42px; }
  .auth-market-card { display: block; min-height: 0; border-radius: 8px; }
  .auth-market-visual { display: none; }
  .auth-market-form-wrap { min-height: 0; padding: 32px 22px; }
  .auth-heading h1 { font-size: 24px; }
  .auth-form-page { padding: 24px 14px 48px; }
  .auth-form-card { padding: var(--s-5); }
  .auth-form-grid { grid-template-columns: 1fr; }
  .picker-tiles { grid-template-columns: 1fr; }
  .auth-invite-row { flex-direction: column; }
  .auth-invite-row .btn { width: 100%; justify-content: center; }

  /* The brand panel is gone at this width, so the form carries the lock-up. */
  .auth-market-layout:not(.auth-market-layout--resume) .auth-brand { display: inline-flex; }

  .route-card { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); padding: var(--s-5); }
  .route-index { display: none; }
  .route-action { grid-column: auto; }
  .route-action .btn { width: 100%; justify-content: center; }
  .managed-invite-row { flex-direction: column; }
  .managed-invite-row .btn { width: 100%; justify-content: center; }

  .registration-section { padding: 34px 0 60px; }
  .registration-form { padding: 0; }
  .form-grid { grid-template-columns: 1fr; }
  .registration-submit-row { align-items: stretch; flex-direction: column; }

  .topbar { padding: 0 12px; }
  .topbar-left .brand-nav-logo { display: block; height: 26px; max-width: 140px; }
  .topbar-left .brand-nav-mark { display: none; }
  .topbar-tag { display: none; }
  .topbar-user-meta { display: none; }
  .page { width: calc(100% - var(--s-6)); padding-top: var(--s-6); }
  .page-head { align-items: stretch; flex-direction: column; gap: 12px; }
  .page-title { font-size: 1.55rem; }
  .page-actions { justify-content: flex-start; }
  .stats, .grid.two, .grid.three { grid-template-columns: 1fr; }
  .card, .soft-card { padding: 16px; }
  .table-wrap { border-radius: 4px; }
  .data-table { min-width: 720px; }
  .filter-bar, .filters { grid-template-columns: 1fr; }
  .drawer-panel { width: min(100%, 420px); }
  .install-body { padding: 20px 16px; }
}

@media (max-width: 420px) {
  .public-brand .brand-nav-logo { height: 25px; max-width: 138px; }
  .market-hero h1 { font-size: 2.15rem; }
  .market-hero-actions { display: grid; grid-template-columns: 1fr; }
  .market-hero-actions .btn { justify-content: flex-start; }
  .footer-grid { grid-template-columns: 1fr; }
  .public-nav-actions { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-links, .sidebar { transition: none !important; }
}

/* -------------------------------------------------------------------------- */
/* Public-site alignment, media and authentication polish                     */
/* -------------------------------------------------------------------------- */

/* portal.css originally defined the header itself as a flex row. The public
   redesign introduced two stacked rows inside it; resetting the outer shell is
   what keeps the category rail in the viewport instead of beside the main nav. */
.public-body { overflow-x: clip; }
.public-nav {
  display: block;
  width: 100%;
  height: auto;
  align-items: initial;
  transition: box-shadow .18s ease, background-color .18s ease;
}
.public-nav.is-scrolled { box-shadow: 0 7px 24px rgb(9 38 64 / 9%); }
.public-nav-main,
.public-category-nav { width: 100%; min-width: 0; }
.public-nav-container {
  width: min(var(--container), calc(100% - 64px));
  min-height: 82px;
  height: auto;
  gap: 20px;
}
.public-brand .brand-nav-logo {
  width: auto;
  height: 40px;
  max-width: 229px;
  object-fit: contain;
  object-position: left center;
}
.desktop-search { width: min(380px, 30vw); margin-left: 2px; }
.nav-links { min-width: 0; gap: 10px; }
.public-primary-links { min-width: 0; }
.public-primary-links > a { padding-inline: 7px; white-space: nowrap; }
.public-category-nav { overflow: hidden; }
.public-category-nav-inner {
  width: min(var(--container), calc(100% - 64px));
  max-width: calc(100% - 64px);
  height: 42px;
  gap: 24px;
  overscroll-behavior-inline: contain;
}
.public-category-nav a { flex: 0 0 auto; font-size: 11px; }

.site-footer,
.footer-cta-row { width: 100%; }
.footer-grid { row-gap: 42px; }
.footer-links strong { font-size: 13px; }
.footer-links a { width: fit-content; }

.market-section { padding-block: 84px; }
.market-section-heading-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  flex: 0 0 auto;
}
.market-section-heading-actions > a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.market-section-heading-actions > a:hover { color: var(--brand-dark); text-decoration: underline; }
.slider-buttons { display: inline-flex; align-items: center; gap: 8px; }
.slider-buttons button {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
}
.slider-buttons button:hover:not(:disabled) { border-color: var(--ink); background: var(--surface-soft); }
.slider-buttons button:disabled { opacity: .32; cursor: default; }
.slider-arrow-back { transform: rotate(180deg); }
.market-course-slider { overflow: hidden; }
.market-course-slider .market-course-grid {
  display: grid;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 42px) / 4);
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.market-course-slider .market-course-grid::-webkit-scrollbar { display: none; }
.market-course-slider .market-course-card { min-width: 0; scroll-snap-align: start; }

.solution-grid { gap: 18px; }
.solution-grid .solution-card {
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.solution-grid .solution-card:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.solution-card > img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.solution-card.school-card > img { object-position: center; }
.solution-card > div { flex: 1; padding: 20px; }
.solution-grid .solution-card > div > span { width: 30px; height: 30px; display: grid; place-items: center; color: var(--brand-dark); background: var(--brand-soft); border-radius: 5px; font-size: 10px; font-weight: 800; }
.solution-grid .solution-card h3 { margin: 18px 0 7px; font-size: 16px; }
.solution-grid .solution-card p { margin-bottom: 14px; font-size: 12px; }
.solution-grid .solution-card a { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; font-weight: 700; }

.info-feature-visual:has(.info-feature-photo)::before { display: none; }
.info-feature-photo,
.info-feature-photo-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.info-feature-photo { object-fit: cover; }
.info-feature-photo-shade { background: linear-gradient(180deg, rgb(4 22 40 / 4%) 42%, rgb(4 22 40 / 68%) 100%); }
.info-feature-visual:has(.info-feature-photo) .info-feature-visual-index,
.info-feature-visual:has(.info-feature-photo) .info-feature-visual-word { z-index: 2; color: #fff; opacity: 1; text-shadow: 0 1px 8px rgb(0 0 0 / 32%); }

/* Accessible, page-local login and registration dialogs. The normal /login and
   /register pages remain real links and no-JS fallbacks. */
body.auth-modal-open { overflow: hidden; }
.auth-dialog {
  width: min(1080px, calc(100% - 32px));
  max-width: none;
  max-height: min(780px, calc(100vh - 32px));
  padding: 0;
  overflow: hidden;
  color: var(--ink);
  background: #fff;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 28px 90px rgb(0 0 0 / 28%);
}
.auth-dialog::backdrop { background: rgb(15 18 23 / 68%); backdrop-filter: blur(2px); }
.auth-dialog[open] { animation: auth-dialog-in .18s ease-out; }
.auth-dialog-close {
  position: absolute;
  z-index: 5;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--ink);
  background: rgb(255 255 255 / 94%);
  border: 1px solid var(--border);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
}
.auth-dialog-close:hover { background: #fff; border-color: var(--ink); }
.auth-dialog-grid { min-height: 650px; display: grid; grid-template-columns: .92fr 1.08fr; }
.auth-dialog-media { position: relative; min-width: 0; min-height: 650px; overflow: hidden; color: #fff; background: var(--navy-deep); }
.auth-dialog-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% center; }
.auth-dialog-media-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(9 38 64 / 22%) 20%, rgb(9 38 64 / 36%) 54%, rgb(9 38 64 / 94%) 100%); }
.auth-dialog-media-copy { position: absolute; z-index: 2; inset: auto 0 0; padding: 40px; }
.auth-dialog-media-copy > span { display: block; margin-bottom: 10px; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.auth-dialog-media-copy h2 { max-width: 390px; margin: 0 0 24px; color: #fff; font-size: 32px; font-weight: 650; }
.auth-dialog-media-copy ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.auth-dialog-media-copy li { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; font-weight: 650; }
.auth-dialog-panel { min-width: 0; max-height: min(780px, calc(100vh - 32px)); overflow-y: auto; display: flex; flex-direction: column; justify-content: center; padding: 52px 54px 36px; }
.auth-dialog-brand { width: fit-content; display: inline-flex; margin-bottom: 30px; }
.auth-dialog-brand img { width: auto; height: 31px; max-width: 205px; object-fit: contain; }
.auth-dialog-heading { margin-bottom: 24px; }
.auth-dialog-heading h2 { margin: 8px 0 6px; font-size: 30px; font-weight: 700; }
.auth-dialog-heading p { margin: 0; color: var(--ink); font-size: 13px; }
.auth-dialog-heading button { padding: 0; color: var(--ink); background: transparent; border: 0; text-decoration: underline; text-underline-offset: 2px; }
.auth-dialog-form { display: grid; gap: 15px; }
.auth-dialog-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.auth-dialog-help { display: flex; justify-content: flex-end; margin-top: -3px; font-size: 11px; }
.auth-dialog-help a { text-decoration: underline; text-underline-offset: 2px; }
.auth-dialog-submit { width: 100%; min-height: 46px; }
.auth-dialog-legal { margin: 20px 0 0; color: var(--ink-faint); font-size: 10px; line-height: 1.6; }
.auth-dialog-legal a { text-decoration: underline; text-underline-offset: 2px; }
.auth-dialog-consent { display: grid; grid-template-columns: auto 1fr; gap: 9px; align-items: flex-start; color: var(--ink-soft); font-size: 10px; line-height: 1.5; }
.auth-dialog-consent input { width: 17px; min-height: 17px; margin-top: 1px; }
.auth-dialog-consent a { color: var(--brand-dark); text-decoration: underline; }
.auth-dialog-options-status { margin: -2px 0 0; padding: 9px 11px; color: #8a3f0d; background: var(--accent-soft); border-radius: 5px; font-size: 11px; }
.auth-dialog-register .auth-dialog-grid { min-height: 720px; }
.auth-dialog-register .auth-dialog-media { min-height: 720px; }
.auth-dialog-register .auth-dialog-panel { justify-content: flex-start; }
.auth-dialog-register .auth-dialog-brand { margin-bottom: 18px; }
.auth-dialog-register .auth-dialog-heading { margin-bottom: 18px; }
.auth-dialog-register .auth-dialog-heading h2 { font-size: 27px; }

@keyframes auth-dialog-in {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 1180px) {
  .public-nav-container,
  .public-category-nav-inner { width: calc(100% - 44px); max-width: calc(100% - 44px); }
  .desktop-search { display: none; }
  .market-course-slider .market-course-grid { grid-auto-columns: calc((100% - 28px) / 3); }
  .solution-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 920px) {
  .public-nav-container { width: calc(100% - 32px); min-height: 72px; }
  .public-brand .brand-nav-logo { height: 31px; max-width: 178px; }
  .public-category-nav-inner { width: calc(100% - 32px); max-width: calc(100% - 32px); }
  .market-course-slider .market-course-grid { grid-auto-columns: calc((100% - 14px) / 2); }
  .auth-dialog { width: min(620px, calc(100% - 28px)); }
  .auth-dialog-grid,
  .auth-dialog-register .auth-dialog-grid { min-height: 0; display: block; }
  .auth-dialog-media,
  .auth-dialog-register .auth-dialog-media { display: none; }
  .auth-dialog-panel { min-height: 0; padding: 46px 40px 32px; }
}

@media (max-width: 680px) {
  .public-nav-container { width: calc(100% - 24px); min-height: 66px; }
  .public-brand .brand-nav-logo { height: 30px; max-width: 172px; }
  .public-category-nav-inner { width: calc(100% - 24px); max-width: calc(100% - 24px); }
  .market-section { padding-block: 58px; }
  .market-section-heading-actions { width: 100%; justify-content: space-between; }
  .market-course-slider { margin-right: -14px; }
  .market-course-slider .market-course-grid { grid-auto-columns: 86%; padding-right: 14px; }
  .slider-buttons button { width: 36px; height: 36px; }
  .solution-grid { grid-template-columns: 1fr; gap: 20px; }
  .solution-card > img { aspect-ratio: 16 / 10; }
  .info-feature-photo { min-height: 100%; }
  .auth-dialog { width: calc(100% - 20px); max-height: calc(100vh - 20px); border-radius: 10px; }
  .auth-dialog-close { top: 12px; right: 12px; width: 38px; height: 38px; }
  .auth-dialog-panel { max-height: calc(100vh - 20px); padding: 42px 20px 26px; }
  .auth-dialog-brand { margin-bottom: 22px; }
  .auth-dialog-brand img { height: 27px; max-width: 178px; }
  .auth-dialog-heading h2 { font-size: 25px; }
  .auth-dialog-form-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .public-nav,
  .solution-grid .solution-card,
  .market-course-slider .market-course-grid { transition: none !important; scroll-behavior: auto; }
  .auth-dialog[open] { animation: none; }
}

/* 2026-08-26 catalogue, institutional content rhythm and logo corrections. */
.footer-pathways { padding: 62px 0; background: #fff; border-top: 1px solid var(--border); }
.footer-pathways > .container { display: grid; grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr); gap: 72px; align-items: end; }
.footer-pathways h2 { max-width: 500px; margin: 8px 0 0; font-size: clamp(1.7rem, 2.6vw, 2.35rem); font-weight: 620; }
.footer-pathways nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--border-strong); }
.footer-pathways nav a { display: grid; gap: 7px; padding: 20px 18px 10px 0; color: var(--ink); border-right: 1px solid var(--border); }
.footer-pathways nav a + a { padding-left: 18px; }
.footer-pathways nav a:last-child { border-right: 0; }
.footer-pathways nav strong { font-size: 14px; }
.footer-pathways nav span { color: var(--ink-soft); font-size: 12px; line-height: 1.55; }
.footer-pathways nav a:hover strong { color: var(--brand-dark); }
.info-standard-strip { background: #fff; border-bottom: 1px solid var(--border); }
.info-standard-strip > .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.info-standard-strip .container > div { display: flex; align-items: center; gap: 10px; min-height: 72px; padding: 12px 20px; border-right: 1px solid var(--border); }
.info-standard-strip .container > div:first-child { padding-left: 0; }
.info-standard-strip .container > div:last-child { border-right: 0; }
.info-standard-strip span { color: var(--brand); font-size: 10px; font-weight: 800; }
.info-standard-strip strong { font-size: 11px; font-weight: 680; }

/* Authentication and workspace lock-ups have their own available space. The
   compact footer lock-up is defined once with the footer component above. */
.auth-brand img, .auth-dialog-brand img { height: 48px; max-width: 267px; }
.topbar-left .brand-nav-logo { display: block; height: 34px; max-width: 219px; }
.install-head .brand-nav-logo { height: 60px; max-width: 333px; }

.catalogue-hero-refined { padding: 58px 0 64px; background: #fff; border-bottom: 1px solid var(--border); }
.catalogue-hero-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr); align-items: end; gap: 72px; }
.catalogue-hero-refined h1 { max-width: 760px; margin: 10px 0 14px; color: var(--ink); font-size: clamp(2.1rem, 3.7vw, 3.45rem); font-weight: 610; letter-spacing: -.035em; }
.info-hero-copy h1 { font-size: clamp(2.15rem, 3.1vw, 2.85rem); }
.catalogue-hero-refined p { max-width: 720px; margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.65; }
.catalogue-hero-refined .catalogue-search { margin: 0; background: var(--surface-soft); }
.catalogue-streams { padding: 62px 0 56px; background: var(--surface-soft); }
.section-heading.compact { display: block; max-width: 700px; margin-bottom: 28px; }
.section-heading.compact h2 { margin: 7px 0 0; font-size: clamp(1.7rem, 2.5vw, 2.3rem); font-weight: 620; }
.catalogue-stream-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--border); background: #fff; }
.catalogue-stream-card { min-height: 154px; display: grid; grid-template-columns: 1fr auto; align-content: start; gap: 14px 18px; padding: 24px; color: var(--ink); border-right: 1px solid var(--border); box-shadow: inset 0 -3px 0 transparent; }
.catalogue-stream-card:last-child { border-right: 0; }
.catalogue-stream-card > span { font-size: 13px; font-weight: 750; }
.catalogue-stream-card > strong { color: var(--brand-dark); font-size: 23px; }
.catalogue-stream-card > small { grid-column: 1 / -1; color: var(--ink-soft); font-size: 11px; line-height: 1.55; }
.catalogue-stream-card:hover, .catalogue-stream-card.active { background: var(--brand-soft); box-shadow: inset 0 -3px 0 var(--brand); }
.catalogue-filter-band { padding: 18px 0; background: #fff; border-block: 1px solid var(--border); }
.catalogue-filter-band .category-pills { flex-wrap: nowrap; overflow: auto; scrollbar-width: thin; }
.catalogue-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.catalogue-course-card { min-width: 0; display: grid; grid-template-rows: auto 1fr auto; background: #fff; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.catalogue-course-card:hover { border-color: var(--brand-line); box-shadow: 0 10px 26px rgb(9 38 64 / 9%); transform: translateY(-2px); }
.catalogue-course-image { height: 210px; display: grid; place-items: center; padding: 18px; background: #edf4f9; border-bottom: 1px solid var(--border); }
.catalogue-course-image img { width: 100%; height: 100%; object-fit: contain; }
.course-image-placeholder { width: 100%; height: 100%; display: grid; place-items: center; align-content: center; gap: 8px; color: var(--brand-dark); background: var(--brand-soft); }
.course-image-placeholder .icon { width: 34px; height: 34px; }
.course-image-placeholder small { color: var(--ink-soft); font-size: 11px; }
.catalogue-course-body { padding: 24px 24px 18px; }
.catalogue-course-labels { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.catalogue-course-labels span { padding: 4px 7px; color: var(--brand-dark); background: var(--brand-soft); font-size: 9px; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; }
.catalogue-course-labels span + span { color: var(--ink-soft); background: var(--surface-soft); }
.catalogue-course-body h3 { margin: 0 0 10px; font-size: 18px; font-weight: 680; line-height: 1.3; }
.catalogue-course-body h3 a { color: var(--ink); }
.catalogue-course-body > p { display: -webkit-box; margin: 0 0 18px; overflow: hidden; color: var(--ink-soft); font-size: 12px; line-height: 1.6; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.course-card-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding-top: 14px; border-top: 1px solid var(--border); }
.course-card-facts div { min-width: 0; }
.course-card-facts dt { color: var(--ink-faint); font-size: 9px; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; }
.course-card-facts dd { margin: 3px 0 0; overflow: hidden; color: var(--ink); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.catalogue-course-foot { padding: 14px 24px; border-top: 1px solid var(--border); }
.catalogue-course-foot a { display: inline-flex; align-items: center; gap: 6px; color: var(--brand-dark); font-size: 12px; font-weight: 750; }
.catalogue-help-light { color: var(--ink); background: #eaf2f8; border-top: 1px solid var(--border); }
.catalogue-help-light h2 { color: var(--ink); }
.catalogue-help-light p { color: var(--ink-soft); }

.course-detail-hero-rich { padding: 56px 0 64px; color: #fff; background: var(--navy-deep); }
.course-detail-hero-rich .course-detail-hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr); align-items: center; }
.course-detail-hero-rich .breadcrumbs, .course-detail-hero-rich .breadcrumbs a { color: rgb(255 255 255 / 72%); }
.course-detail-hero-rich .market-kicker.light { color: #fff; }
.course-detail-hero-rich .course-detail-copy h1 { color: #fff; }
.course-detail-hero-rich .course-detail-copy > p { color: rgb(255 255 255 / 78%); font-size: 15px; }
.course-detail-hero-rich .course-detail-meta { color: rgb(255 255 255 / 72%); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.course-detail-visual { min-height: 370px; display: grid; place-items: center; padding: 26px; background: #fff; border: 1px solid rgb(255 255 255 / 24%); }
.course-detail-visual img { width: 100%; height: 320px; object-fit: contain; }
.course-detail-visual .course-image-placeholder { min-height: 320px; }
.course-detail-summary-band { padding: 22px 0; background: #fff; border-bottom: 1px solid var(--border); }
.course-detail-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.course-detail-summary-grid > div { display: grid; gap: 4px; padding: 2px 24px; border-right: 1px solid var(--border); }
.course-detail-summary-grid > div:first-child { padding-left: 0; }
.course-detail-summary-grid > div:last-child { border-right: 0; }
.course-detail-summary-grid span { color: var(--ink-faint); font-size: 9px; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
.course-detail-summary-grid strong { font-size: 13px; font-weight: 680; }
.course-content-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, .6fr); align-items: start; gap: 76px; }
.course-prose h2, .course-enquiry-panel h2, .course-operations-grid h2 { margin: 8px 0 14px; font-size: clamp(1.8rem, 2.5vw, 2.35rem); font-weight: 620; }
.course-prose .lead-copy { color: var(--ink-soft); font-size: 15px; line-height: 1.75; }
.course-outcomes { margin-top: 42px; padding-top: 32px; border-top: 1px solid var(--border); }
.course-outcomes h3, .course-requirements h3 { margin: 0 0 18px; font-size: 18px; }
.course-outcomes ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; margin: 0; padding: 0; list-style: none; }
.course-outcomes li { display: flex; gap: 9px; color: var(--ink-soft); font-size: 13px; line-height: 1.55; }
.course-outcomes li .icon { flex: 0 0 auto; margin-top: 2px; color: var(--brand); }
.course-requirements { margin-top: 34px; }
.course-requirements > div { display: flex; flex-wrap: wrap; gap: 8px; }
.course-requirements span { padding: 7px 10px; background: var(--surface-soft); border: 1px solid var(--border); font-size: 11px; }
.course-enquiry-panel { position: sticky; top: 92px; padding: 30px; background: var(--surface-soft); border-top: 4px solid var(--brand); }
.course-enquiry-panel > p { color: var(--ink-soft); font-size: 12px; line-height: 1.6; }
.course-enquiry-panel dl { margin: 24px 0; border-block: 1px solid var(--border); }
.course-enquiry-panel dl div { display: grid; grid-template-columns: 90px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.course-enquiry-panel dl div:last-child { border-bottom: 0; }
.course-enquiry-panel dt { color: var(--ink-faint); font-size: 10px; }
.course-enquiry-panel dd { margin: 0; font-size: 11px; font-weight: 650; }
.course-enquiry-panel .btn + .btn { margin-top: 8px; }
.course-operations-section { padding: 68px 0; background: var(--surface-soft); border-block: 1px solid var(--border); }
.course-operations-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px; }
.course-module-list { display: grid; gap: 0; margin: 22px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.course-module-list li { display: grid; grid-template-columns: 36px 1fr; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--border); }
.course-module-list li > span { color: var(--brand-dark); font-size: 11px; font-weight: 800; }
.course-module-list strong, .course-cohort-list strong { font-size: 13px; }
.course-module-list p, .course-module-list small, .course-cohort-list span, .course-cohort-list small { display: block; margin: 5px 0 0; color: var(--ink-soft); font-size: 11px; line-height: 1.5; }
.course-cohort-list { display: grid; gap: 10px; margin-top: 22px; }
.course-cohort-list article { padding: 18px; background: #fff; border: 1px solid var(--border); }
.related-course-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.related-course-grid article { display: grid; grid-template-columns: 140px 1fr; min-width: 0; border: 1px solid var(--border); background: #fff; }
.related-course-image { min-height: 170px; display: grid; place-items: center; padding: 10px; background: #edf4f9; }
.related-course-image img { width: 100%; height: 150px; object-fit: contain; }
.related-course-grid article > div { padding: 18px; }
.related-course-grid article > div > span { color: var(--brand-dark); font-size: 9px; font-weight: 750; text-transform: uppercase; }
.related-course-grid h3 { margin: 7px 0; font-size: 14px; }
.related-course-grid p { display: -webkit-box; overflow: hidden; color: var(--ink-soft); font-size: 10px; line-height: 1.5; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.related-course-grid article > div > a { color: var(--brand-dark); font-size: 10px; font-weight: 750; }

.permission-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.permission-group { padding: 16px; border: 1px solid var(--border); }
.permission-group legend { padding: 0 5px; font-size: 12px; font-weight: 750; }
.check-grid { display: grid; gap: 8px; }
.check-option { display: flex; align-items: flex-start; gap: 8px; color: var(--ink-soft); font-size: 11px; line-height: 1.45; }
.check-option span { display: grid; gap: 2px; }
.check-option strong { color: var(--ink); font-size: 12px; }
.course-image-admin-grid { display: grid; grid-template-columns: minmax(220px, .65fr) minmax(0, 1.35fr); gap: 28px; align-items: center; }
.course-image-admin-preview { min-height: 180px; display: grid; place-items: center; padding: 16px; background: var(--surface-soft); border: 1px solid var(--border); color: var(--ink-soft); }
.course-image-admin-preview img { width: 100%; height: 180px; object-fit: contain; }

@media (max-width: 1100px) {
  .catalogue-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalogue-stream-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalogue-stream-card:nth-child(2) { border-right: 0; }
  .catalogue-stream-card:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .related-course-grid { grid-template-columns: 1fr; }
}
@media (max-width: 920px) {
  .topbar-left .brand-nav-logo { height: 44px; max-width: 244px; }
  .catalogue-hero-layout, .footer-pathways > .container, .course-detail-hero-rich .course-detail-hero-grid, .course-content-layout, .course-operations-grid { grid-template-columns: 1fr; gap: 34px; }
  .footer-pathways nav { grid-template-columns: 1fr; }
  .footer-pathways nav a, .footer-pathways nav a + a { padding: 16px 0; border-right: 0; border-bottom: 1px solid var(--border); }
  .footer-pathways nav a:last-child { border-bottom: 0; }
  .course-enquiry-panel { position: static; }
}
@media (max-width: 680px) {
  .auth-brand img, .auth-dialog-brand img { height: 50px; max-width: 278px; }
  .install-head .brand-nav-logo { height: 52px; max-width: 290px; }
  .catalogue-hero-refined { padding: 38px 0 44px; }
  .catalogue-hero-refined h1 { font-size: 2rem; }
  .catalogue-streams { padding: 42px 0; }
  .catalogue-stream-grid, .catalogue-card-grid, .course-detail-summary-grid, .course-outcomes ul, .permission-groups, .course-image-admin-grid { grid-template-columns: 1fr; }
  .info-standard-strip > .container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .info-standard-strip .container > div, .info-standard-strip .container > div:first-child { min-height: 58px; padding: 10px 8px; border-bottom: 1px solid var(--border); }
  .catalogue-stream-card { min-height: 130px; border-right: 0; border-bottom: 1px solid var(--border); }
  .catalogue-stream-card:last-child { border-bottom: 0; }
  .catalogue-course-image { height: 190px; }
  .course-detail-hero-rich { padding: 38px 0 44px; }
  .course-detail-visual { min-height: 260px; padding: 16px; }
  .course-detail-visual img, .course-detail-visual .course-image-placeholder { height: 230px; min-height: 230px; }
  .course-detail-summary-grid > div, .course-detail-summary-grid > div:first-child { padding: 12px 0; border-right: 0; border-bottom: 1px solid var(--border); }
  .course-detail-summary-grid > div:last-child { border-bottom: 0; }
}

/* -------------------------------------------------------------------------- */
/* Public navigation — restored from the approved navigation treatment        */
/* -------------------------------------------------------------------------- */

.public-auth-actions {
  position: relative;
  margin-left: 10px;
  padding-left: 23px;
}
.public-auth-actions::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 28px;
  background: var(--border-strong);
  transform: translateY(-50%);
}
.nav-login-link {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 3px;
  font-weight: 700;
}
.nav-register-btn {
  min-height: 38px;
  padding: 8px 16px;
  color: #fff;
  background: var(--brand);
  border-color: var(--brand);
}
.nav-register-btn:hover {
  color: #fff;
  background: var(--brand-dark);
  border-color: var(--brand-dark);
}

@media (max-width: 920px) {
  .public-nav-container { min-height: 72px; }

  .public-nav-toggle,
  .public-nav-toggle:hover,
  .public-nav-toggle:focus-visible {
    position: relative;
    z-index: 108;
    width: 44px;
    height: 42px;
    margin-left: auto;
    padding: 0;
    color: var(--brand-dark);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .public-nav-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
  .public-nav-toggle .nav-toggle-bars { width: 30px; height: 18px; }
  .public-nav-toggle .nav-toggle-bars span {
    left: 0;
    width: 30px;
    height: 2px;
    opacity: 1;
    border-radius: 999px;
    transform: none;
    transform-origin: center;
    transition: top .32s cubic-bezier(.22, 1, .36, 1), bottom .32s cubic-bezier(.22, 1, .36, 1), transform .32s cubic-bezier(.22, 1, .36, 1), background-color .2s ease;
  }
  .public-nav-toggle .nav-toggle-bars span:nth-child(1) { top: 4px; bottom: auto; background: var(--brand); }
  .public-nav-toggle .nav-toggle-bars span:nth-child(2) { top: auto; bottom: 4px; background: var(--accent); }
  .public-nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { top: 8px; transform: rotate(45deg); }
  .public-nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { top: auto; bottom: 8px; opacity: 1; transform: rotate(-45deg); }
  body.public-nav-open .public-nav-toggle { position: fixed; top: 13px; right: 18px; }

  .nav-scrim {
    inset: 0;
    display: block;
    visibility: hidden;
    pointer-events: none;
    background: rgb(9 38 64 / 48%);
    opacity: 0;
    transition: opacity .3s ease, visibility 0s linear .3s;
  }
  body.public-nav-open .nav-scrim {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    transition-delay: 0s;
  }

  .nav-links {
    top: 0;
    bottom: 0;
    width: min(370px, calc(100vw - 64px));
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-items: stretch;
    justify-content: normal;
    gap: 0;
    padding: 0;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
    background: #fff;
    border-top: 4px solid var(--brand);
    border-left: 1px solid var(--brand-line);
    opacity: 1;
    transform: translate3d(104%, 0, 0);
    will-change: transform;
    transition: transform .38s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .38s, box-shadow .38s ease;
  }
  .nav-links::after {
    content: "";
    position: absolute;
    top: -4px;
    right: 0;
    width: 58px;
    height: 4px;
    background: var(--accent);
  }
  body.public-nav-open .nav-links {
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
    box-shadow: -18px 0 46px rgb(9 38 64 / 18%);
    transition-delay: 0s;
  }

  .mobile-search {
    grid-template-columns: minmax(0, 1fr) 42px;
    height: 42px;
    margin: 64px 20px 14px;
    padding: 0;
    background: #fff;
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    overflow: hidden;
  }
  .mobile-search input { min-width: 0; min-height: 40px; padding: 0 12px; }
  .mobile-search button {
    width: 42px;
    height: 42px;
    color: #fff;
    background: var(--brand);
    border: 0;
    border-radius: 0;
  }
  .nav-sheet-label { padding: 12px 13px 7px; color: var(--brand-dark); font-size: 10px; }
  .public-primary-links { gap: 2px; padding: 0 14px 16px; }
  .public-primary-links > a {
    min-height: 44px;
    padding: 9px 12px;
    border: 0;
    border-radius: 4px;
    font-size: 14px;
  }
  .public-primary-links > a.active {
    color: var(--brand-dark);
    background: var(--brand-soft);
    box-shadow: inset 3px 0 0 var(--accent);
  }

  .public-nav-actions,
  .public-auth-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
    background: var(--surface-soft);
    border-top: 1px solid var(--border);
  }
  .public-nav-actions > *:not(.public-avatar) { width: 100%; }
  .nav-login-link,
  .nav-dashboard-link,
  .nav-register-btn,
  .public-nav-actions .btn {
    min-height: 40px;
    padding: 7px 11px;
    border-radius: 4px;
    font-size: 12px;
  }
  .nav-login-link {
    justify-content: center;
    color: var(--brand-dark);
    background: #fff;
    border: 1px solid var(--brand);
  }
  .nav-register-btn { justify-content: center; color: #fff; background: var(--brand); border-color: var(--brand); }
  .public-auth-actions::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .public-nav-toggle .nav-toggle-bars span,
  .nav-links,
  .nav-scrim { transition: none !important; }
}

/* -------------------------------------------------------------------------- */
/* Distinct institutional pages and balanced brand-lockup scale               */
/* -------------------------------------------------------------------------- */

/* The high-resolution compact lock-up is used in UI chrome; the full lock-up
   is reserved for places where its tagline has enough room to remain legible. */
.public-nav-container { min-height: 76px; }
.public-brand .brand-nav-logo { height: 34px; max-width: 219px; }
.auth-brand img,
.auth-dialog-brand img { height: 48px; max-width: 267px; }
.topbar-left .brand-nav-logo { height: 34px; max-width: 219px; }
.install-head .brand-nav-logo { height: 60px; max-width: 333px; }

/* About: editorial story, image-led opening and a numbered principles ledger. */
.about-hero { padding: 76px 0 88px; background: #fff; }
.about-hero-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(480px, 1.08fr); align-items: center; gap: 82px; }
.about-hero-copy h1 { max-width: 720px; margin: 12px 0 22px; font-size: clamp(2.8rem, 5vw, 5rem); font-weight: 580; letter-spacing: -.055em; line-height: .98; }
.about-hero-copy > p { max-width: 650px; color: var(--ink-soft); font-size: 16px; line-height: 1.72; }
.about-hero-copy .actions { align-items: center; margin-top: 30px; }
.about-hero-media { position: relative; min-height: 510px; margin: 0; overflow: hidden; background: var(--surface-soft); }
.about-hero-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about-hero-media figcaption { position: absolute; right: 0; bottom: 0; width: min(360px, 78%); display: grid; gap: 7px; padding: 24px 28px; color: #fff; background: var(--navy-deep); }
.about-hero-media figcaption span { color: rgb(255 255 255 / 68%); font-size: 10px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.about-hero-media figcaption strong { font-size: 15px; line-height: 1.45; }
.about-introduction { padding: 94px 0; background: var(--surface-soft); border-block: 1px solid var(--border); }
.about-introduction-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 104px; }
.about-introduction h2 { max-width: 590px; margin: 10px 0 0; font-size: clamp(2rem, 3.6vw, 3.25rem); font-weight: 590; letter-spacing: -.035em; }
.about-introduction-copy { padding-top: 24px; border-top: 1px solid var(--border-strong); }
.about-introduction-copy p { color: var(--ink-soft); font-size: 15px; line-height: 1.8; }
.about-principles { padding: 98px 0; background: #fff; }
.about-section-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, .55fr); gap: 10px 70px; margin-bottom: 48px; }
.about-section-heading .market-kicker { grid-column: 1 / -1; }
.about-section-heading h2 { margin: 0; font-size: clamp(2rem, 3.3vw, 3rem); font-weight: 590; }
.about-section-heading p { margin: 4px 0 0; color: var(--ink-soft); font-size: 13px; }
.about-principle-list { border-top: 1px solid var(--border-strong); }
.about-principle-list article { display: grid; grid-template-columns: 80px minmax(0, 1fr); padding: 27px 0; border-bottom: 1px solid var(--border); }
.about-principle-list article > span { color: var(--brand); font-size: 11px; font-weight: 800; }
.about-principle-list article > div { display: grid; grid-template-columns: minmax(210px, .65fr) minmax(0, 1.35fr); gap: 54px; }
.about-principle-list h3 { margin: 0; font-size: 20px; font-weight: 670; }
.about-principle-list p { max-width: 690px; margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.65; }
.about-reach { padding: 98px 0; background: #f0f5f8; }
.about-reach-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr); align-items: center; gap: 88px; }
.about-reach-media { display: grid; grid-template-columns: 1.2fr .8fr; gap: 14px; min-height: 460px; }
.about-reach-media img { width: 100%; height: 100%; min-height: 460px; object-fit: cover; }
.about-reach-media img + img { min-height: 350px; align-self: end; }
.about-reach-copy h2 { margin: 10px 0 16px; font-size: clamp(2rem, 3.2vw, 3rem); font-weight: 590; }
.about-reach-copy > p { color: var(--ink-soft); font-size: 14px; line-height: 1.7; }
.about-reach-copy ul { display: grid; gap: 0; margin: 28px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--border-strong); }
.about-reach-copy li { padding: 13px 0; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 650; }
.about-closing,
.learning-next { padding: 68px 0; background: #fff; border-top: 1px solid var(--border); }
.about-closing > .container,
.learning-next > .container { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.about-closing h2,
.learning-next h2 { margin: 8px 0 0; font-size: clamp(1.8rem, 3vw, 2.65rem); font-weight: 590; }

/* Training solutions: a deliberate service-route comparison. */
.solutions-hero { padding: 72px 0; color: #fff; background: var(--navy-deep); }
.solutions-hero-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(480px, 1.08fr); align-items: center; gap: 76px; }
.solutions-hero h1 { max-width: 720px; margin: 12px 0 20px; color: #fff; font-size: clamp(2.6rem, 4.6vw, 4.5rem); font-weight: 570; letter-spacing: -.05em; line-height: 1; }
.solutions-hero p { max-width: 650px; color: rgb(255 255 255 / 76%); font-size: 15px; line-height: 1.7; }
.solutions-hero .actions { margin-top: 28px; }
.solutions-hero figure { position: relative; min-height: 430px; margin: 0; overflow: hidden; border: 1px solid rgb(255 255 255 / 18%); }
.solutions-hero figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.solutions-hero figcaption { position: absolute; right: 18px; bottom: 18px; left: 18px; padding: 15px 17px; color: #fff; background: rgb(9 38 64 / 88%); font-size: 11px; }
.solutions-route-nav { background: #fff; border-bottom: 1px solid var(--border); }
.solutions-route-nav > .container { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.solutions-route-nav a { min-height: 76px; display: flex; align-items: center; gap: 11px; padding: 16px 22px; color: var(--ink); border-right: 1px solid var(--border); font-size: 12px; font-weight: 680; }
.solutions-route-nav a:first-child { border-left: 1px solid var(--border); }
.solutions-route-nav a:hover { color: var(--brand-dark); background: var(--brand-soft); }
.solutions-route-nav span { color: var(--brand); font-size: 9px; font-weight: 800; }
.solutions-routes { padding: 96px 0; background: #fff; }
.solutions-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .62fr); align-items: end; gap: 80px; margin-bottom: 46px; }
.solutions-heading h2 { max-width: 720px; margin: 9px 0 0; font-size: clamp(2.1rem, 3.6vw, 3.35rem); font-weight: 590; }
.solutions-heading > p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.7; }
.solutions-route-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.solutions-route { overflow: hidden; background: #fff; border: 1px solid var(--border-strong); }
.solutions-route-image { position: relative; height: 310px; overflow: hidden; background: var(--surface-soft); }
.solutions-route-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.solutions-route:hover .solutions-route-image img { transform: scale(1.015); }
.solutions-route-image > span { position: absolute; top: 18px; left: 18px; width: 38px; height: 38px; display: grid; place-items: center; color: #fff; background: var(--navy-deep); font-size: 10px; font-weight: 800; }
.solutions-route-body { padding: 30px; }
.solutions-route-body h3 { margin: 8px 0 11px; font-size: 25px; font-weight: 650; }
.solutions-route-body > p { color: var(--ink-soft); font-size: 13px; line-height: 1.68; }
.solutions-route-body ul { display: grid; gap: 9px; margin: 22px 0 26px; padding: 18px 0 0; list-style: none; border-top: 1px solid var(--border); }
.solutions-route-body li { display: flex; align-items: center; gap: 8px; color: var(--ink-soft); font-size: 11px; }
.solutions-route-body li .icon { color: var(--brand); }
.solutions-continuity { padding: 82px 0; background: var(--surface-soft); border-block: 1px solid var(--border); }
.solutions-continuity-grid { display: grid; grid-template-columns: minmax(300px, .8fr) minmax(0, 1.2fr); align-items: end; gap: 90px; }
.solutions-continuity h2 { margin: 9px 0 0; font-size: clamp(1.9rem, 3vw, 2.7rem); font-weight: 590; }
.solutions-continuity-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--border-strong); }
.solutions-continuity-list span { min-height: 70px; display: flex; align-items: center; padding: 14px 12px 14px 0; border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 680; }
.solutions-planning { padding: 76px 0; background: #fff; }
.solutions-planning > .container { display: flex; align-items: center; justify-content: space-between; gap: 60px; padding: 42px; border: 1px solid var(--border-strong); }
.solutions-planning h2 { max-width: 780px; margin: 8px 0; font-size: clamp(1.8rem, 3vw, 2.65rem); font-weight: 590; }
.solutions-planning p { margin: 0; color: var(--ink-soft); font-size: 13px; }

/* How learning works: an operational timeline instead of marketing cards. */
.learning-hero { padding: 84px 0 72px; background: var(--surface-soft); border-bottom: 1px solid var(--border); }
.learning-hero-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(480px, 1.08fr); align-items: end; gap: 92px; }
.learning-hero-copy h1 { max-width: 760px; margin: 12px 0 20px; font-size: clamp(2.65rem, 4.7vw, 4.6rem); font-weight: 570; letter-spacing: -.05em; line-height: 1; }
.learning-hero-copy > p { max-width: 680px; color: var(--ink-soft); font-size: 15px; line-height: 1.72; }
.learning-hero-copy .actions { align-items: center; margin-top: 28px; }
.learning-hero-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border-strong); border-left: 1px solid var(--border); }
.learning-hero-track li { min-height: 105px; display: grid; align-content: space-between; padding: 17px; background: #fff; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.learning-hero-track span { color: var(--brand); font-size: 9px; font-weight: 800; }
.learning-hero-track strong { font-size: 12px; }
.learning-orientation { background: var(--brand); }
.learning-orientation > .container { min-height: 70px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 28px; color: #fff; }
.learning-orientation span { font-size: 10px; font-weight: 800; text-transform: uppercase; }
.learning-orientation p { margin: 0; color: rgb(255 255 255 / 78%); font-size: 12px; }
.learning-orientation a { display: inline-flex; align-items: center; gap: 5px; color: #fff; font-size: 11px; font-weight: 750; }
.learning-journey { padding: 104px 0; background: #fff; }
.learning-journey-grid { display: grid; grid-template-columns: minmax(280px, .55fr) minmax(0, 1.45fr); align-items: start; gap: 96px; }
.learning-journey-heading { position: sticky; top: 106px; }
.learning-journey-heading h2 { margin: 10px 0 16px; font-size: clamp(2rem, 3.3vw, 3rem); font-weight: 590; }
.learning-journey-heading p { color: var(--ink-soft); font-size: 13px; line-height: 1.7; }
.learning-step-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border-strong); }
.learning-step { display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(190px, .55fr); gap: 30px; padding: 34px 0; border-bottom: 1px solid var(--border); }
.learning-step-marker { display: grid; align-content: start; justify-items: start; gap: 20px; color: var(--brand-dark); }
.learning-step-marker > span { color: var(--ink-faint); font-size: 10px; font-weight: 800; }
.learning-step-marker .icon { width: 25px; height: 25px; }
.learning-step-copy h3 { margin: 7px 0 10px; font-size: 22px; font-weight: 650; }
.learning-step-copy p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.65; }
.learning-step aside { align-self: center; display: grid; gap: 6px; padding-left: 22px; border-left: 2px solid var(--brand-line); }
.learning-step aside strong { color: var(--brand-dark); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.learning-step aside span { color: var(--ink-soft); font-size: 10px; line-height: 1.55; }
.learning-record { padding: 90px 0; background: #edf3f7; }
.learning-record-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(420px, 1.15fr); align-items: center; gap: 90px; }
.learning-record h2 { margin: 9px 0 15px; font-size: clamp(2rem, 3.3vw, 3rem); font-weight: 590; }
.learning-record p { color: var(--ink-soft); font-size: 13px; line-height: 1.7; }
.learning-record-list { background: #fff; border: 1px solid var(--border); }
.learning-record-list > div { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 14px; min-height: 76px; padding: 13px 18px; border-bottom: 1px solid var(--border); }
.learning-record-list > div:last-child { border-bottom: 0; }
.learning-record-list > div > .icon { width: 20px; height: 20px; color: var(--brand); }
.learning-record-list span { display: grid; gap: 3px; }
.learning-record-list strong { font-size: 12px; }
.learning-record-list small { color: var(--ink-soft); font-size: 10px; }

@media (max-width: 1100px) {
  .about-hero-grid,
  .solutions-hero-grid,
  .learning-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(380px, .9fr); gap: 48px; }
  .about-hero-media { min-height: 440px; }
  .about-reach-grid,
  .learning-record-grid { gap: 54px; }
  .learning-journey-grid { gap: 56px; }
  .learning-step { grid-template-columns: 58px minmax(0, 1fr); }
  .learning-step aside { grid-column: 2; }
}

@media (max-width: 920px) {
  .public-nav-container { min-height: 70px; }
  .public-brand .brand-nav-logo { height: 31px; max-width: 199px; }
  .footer-bottom-brand img { height: 22px; max-width: 122px; }
  .topbar-left .brand-nav-logo { height: 30px; max-width: 193px; }
  .about-hero-grid,
  .solutions-hero-grid,
  .learning-hero-grid,
  .about-introduction-grid,
  .about-reach-grid,
  .solutions-heading,
  .solutions-continuity-grid,
  .learning-journey-grid,
  .learning-record-grid { grid-template-columns: 1fr; }
  .about-hero-media,
  .solutions-hero figure { min-height: 420px; }
  .about-introduction-grid,
  .about-reach-grid,
  .solutions-continuity-grid { gap: 40px; }
  .about-section-heading { grid-template-columns: 1fr; }
  .about-section-heading .market-kicker { grid-column: auto; }
  .about-principle-list article > div { grid-template-columns: minmax(190px, .65fr) minmax(0, 1.35fr); gap: 32px; }
  .solutions-route-nav > .container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .solutions-route-nav a:nth-child(3) { border-left: 1px solid var(--border); border-top: 1px solid var(--border); }
  .solutions-route-nav a:nth-child(4) { border-top: 1px solid var(--border); }
  .solutions-route-grid { grid-template-columns: 1fr; }
  .learning-journey-heading { position: static; }
  .learning-step { grid-template-columns: 64px minmax(0, 1fr) minmax(180px, .5fr); }
  .learning-step aside { grid-column: auto; }
  .learning-orientation > .container { grid-template-columns: auto 1fr; padding-block: 16px; }
  .learning-orientation a { grid-column: 2; }
}

@media (max-width: 680px) {
  .public-brand .brand-nav-logo { height: 29px; max-width: 186px; }
  .footer-bottom-brand img { height: 20px; max-width: 111px; }
  .auth-brand img,
  .auth-dialog-brand img { height: 42px; max-width: 233px; }
  .about-hero,
  .solutions-hero,
  .learning-hero { padding: 50px 0; }
  .about-hero-copy h1,
  .solutions-hero h1,
  .learning-hero-copy h1 { font-size: 2.55rem; }
  .about-hero-media,
  .solutions-hero figure { min-height: 300px; }
  .about-hero-media figcaption { width: 88%; padding: 18px; }
  .about-introduction,
  .about-principles,
  .about-reach,
  .solutions-routes,
  .solutions-continuity,
  .learning-journey,
  .learning-record { padding: 62px 0; }
  .about-principle-list article { grid-template-columns: 42px 1fr; }
  .about-principle-list article > div { grid-template-columns: 1fr; gap: 9px; }
  .about-reach-media { min-height: 300px; grid-template-columns: 1fr; }
  .about-reach-media img { min-height: 250px; }
  .about-reach-media img + img { display: none; }
  .about-closing > .container,
  .learning-next > .container,
  .solutions-planning > .container { align-items: flex-start; flex-direction: column; }
  .solutions-route-nav > .container { display: flex; overflow-x: auto; }
  .solutions-route-nav a { min-width: 190px; border-top: 0 !important; }
  .solutions-route-image { height: 230px; }
  .solutions-route-body { padding: 24px 20px; }
  .solutions-continuity-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .solutions-planning { padding: 52px 0; }
  .solutions-planning > .container { gap: 26px; padding: 28px 22px; }
  .learning-hero-track { margin-top: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .learning-orientation > .container { grid-template-columns: 1fr; gap: 8px; }
  .learning-orientation a { grid-column: auto; }
  .learning-step { grid-template-columns: 46px 1fr; gap: 18px; padding: 28px 0; }
  .learning-step aside { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .solutions-route-image img { transition: none !important; }
}

/* Keep every public page title on the same restrained scale as the homepage
   hero. The landing-page selector is intentionally excluded and unchanged. */
#public-main > section:first-child:not(.market-hero):not(.auth-market-layout) h1 {
  font-size: clamp(2.5rem, 3.2vw, 3rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.045em;
}

@media (max-width: 920px) {
  #public-main > section:first-child:not(.market-hero):not(.auth-market-layout) h1 {
    font-size: clamp(2.35rem, 5vw, 3rem);
  }
}

@media (max-width: 680px) {
  #public-main > section:first-child:not(.market-hero):not(.auth-market-layout) h1 { font-size: 2.35rem; }
}

@media (max-width: 420px) {
  #public-main > section:first-child:not(.market-hero):not(.auth-market-layout) h1 { font-size: 2.15rem; }
}

/* Unified native dropdown controls. Native option trays are retained for
   keyboard, assistive-technology and mobile reliability, with a consistent
   branded trigger and readable option styling across every application form. */
select:not([multiple]) {
  --select-chevron: var(--ink-soft);
  min-height: 46px;
  padding: 10px 52px 10px 14px;
  color: var(--ink);
  background-color: var(--surface);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--select-chevron) 50%),
    linear-gradient(135deg, var(--select-chevron) 50%, transparent 50%),
    linear-gradient(to bottom, var(--border), var(--border));
  background-position:
    calc(100% - 19px) 50%,
    calc(100% - 14px) 50%,
    calc(100% - 42px) 50%;
  background-size: 5px 5px, 5px 5px, 1px 24px;
  background-repeat: no-repeat;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  box-shadow: 0 1px 0 rgb(9 38 64 / 3%);
  appearance: none;
  -webkit-appearance: none;
  text-overflow: ellipsis;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

select:not([multiple]):hover:not(:disabled) {
  --select-chevron: var(--ink);
  border-color: var(--ink-soft);
  background-color: var(--surface-soft);
}

select:not([multiple]):focus,
select:not([multiple]):focus-visible {
  --select-chevron: var(--brand);
  outline: 0;
  border-color: var(--brand);
  background-color: var(--surface);
  box-shadow: 0 0 0 3px rgb(3 75 152 / 15%);
}

select:not([multiple]):disabled {
  --select-chevron: var(--ink-faint);
  color: var(--ink-faint);
  background-color: var(--surface-muted);
  border-color: var(--border);
  box-shadow: none;
  cursor: not-allowed;
  opacity: .78;
}

select[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 14%, transparent);
}

select option,
select optgroup {
  color: var(--ink);
  background: var(--surface);
  font: inherit;
}

select option { padding: 10px 12px; }
select optgroup { font-weight: 750; }

[data-theme="dark"] select { color-scheme: dark; }

.list-toolbar select:not([multiple]),
.filter-bar select:not([multiple]),
.filters select:not([multiple]),
.inline-form select:not([multiple]),
.field-compact select:not([multiple]) {
  min-height: 40px;
  padding-block: 7px;
  padding-left: 11px;
  font-size: 12px;
}

/* Progressive enhancement: browsers that support the customizable-select API
   (Chromium 133+) get a fully restyled option tray — radius, shadow, spacing,
   hover/selected states — instead of the OS-native popup. Browsers without
   support keep the already-styled trigger above with their normal native
   tray, so nothing regresses and keyboard/mobile/AT behaviour stays native
   everywhere. */
@supports (appearance: base-select) {
  select:not([multiple]) {
    appearance: base-select;
  }

  /* The browser's own picker-icon button would otherwise sit next to the
     custom gradient chevron already drawn via background-image above. */
  select:not([multiple])::picker-icon {
    display: none;
  }

  select:not([multiple])::picker(select) {
    appearance: base-select;
    margin-top: 6px;
    padding: 6px;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--shadow-md);
  }

  select:not([multiple]) option {
    padding: 9px 10px;
    margin: 1px 0;
    border-radius: 6px;
  }

  select:not([multiple]) option:hover,
  select:not([multiple]) option:focus {
    background: var(--surface-muted);
  }

  select:not([multiple]) option:checked {
    background: color-mix(in srgb, var(--brand) 14%, transparent);
    color: var(--brand-dark);
    font-weight: 650;
  }

  select:not([multiple]) optgroup {
    padding: 8px 10px 2px;
  }
}