/* Training visual layer. Keep existing layout, dimensions, copy and interactions. */

.training-system-hero,
.training-system-section,
.training-system-contact,
.training-hero,
.training-detail-layout,
.training-classroom,
.training-account {
  --tr-ink: var(--ai-ink, #14243f);
  --tr-body: var(--ai-body, #526581);
  --tr-muted: #6b7c96;
  --tr-line: var(--ai-line, #dde5f2);
  --tr-blue: var(--ai-cobalt, #355bfa);
  --tr-violet: var(--ai-violet, #7155ed);
  --tr-cyan: var(--ai-cyan, #32acc4);
  --tr-shadow: var(--ai-shadow, 0 18px 48px #263e7b0c);
}

/* White canvas, with a restrained network field behind the opening section. */
.training-system-hero,
.training-system-section,
.training-system-contact,
.training-plan-section,
.training-types,
.training-all-courses {
  background-color: #fff;
  border-color: var(--tr-line, #dde5f2);
}

.training-system-hero {
  position: relative;
  isolation: isolate;
  background-image: linear-gradient(90deg, #fff 0%, #fffffffa 38%, #fffffff0 68%, #ffffffdc 100%), url("assets/ai-network-field.svg");
  background-size: 100% 100%, 780px auto;
  background-position: center, right center;
  background-repeat: no-repeat;
}

.training-system-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 1px;
  background: linear-gradient(90deg, #dde5f2, #b9c9fb 45%, #d6cbfa 74%, #dde5f2);
  pointer-events: none;
}

.training-system-copy h1,
.training-system-heading h2,
.training-system-contact h2,
.training-hero h1,
.training-detail-section h2,
.training-knowledge h2,
.training-classroom-top h1,
.training-account h2 {
  color: var(--tr-ink);
}

.training-system-copy > .eyebrow,
.training-system-heading .eyebrow,
.training-system-contact .eyebrow,
.training-detail-section > .eyebrow,
.training-knowledge > .eyebrow {
  color: var(--tr-blue);
}

.training-system-description,
.training-system-subline,
.training-system-heading > p,
.training-system-contact p:not(.eyebrow),
.training-hero > p:not(.eyebrow),
.training-detail-section > p:not(.eyebrow) {
  color: var(--tr-body);
}

.training-system-hero .breadcrumb,
.training-classroom .breadcrumb,
.training-hero .breadcrumb {
  color: var(--tr-muted);
}

.training-hero-links button,
.training-hero-links a,
.training-learning-link {
  color: var(--tr-blue);
}

.training-hero-links button:hover,
.training-hero-links a:hover,
.training-learning-link:hover {
  color: var(--tr-violet);
}

/* Consultation panel: a thin blue/violet edge, rather than a colored block. */
.training-system-consult,
.training-course-panel {
  position: relative;
  isolation: isolate;
  border-color: transparent;
  background: linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #c7d3fc, #e5defb 58%, #dceef3) border-box;
  box-shadow: var(--tr-shadow);
}

.training-system-consult::before,
.training-course-panel::before {
  content: "";
  position: absolute;
  top: 15px;
  right: 15px;
  width: 44px;
  height: 44px;
  background-image: radial-gradient(circle at 32px 10px, #9e8ce0 0 2px, transparent 2.5px),
    radial-gradient(circle at 10px 32px, #80afd9 0 2px, transparent 2.5px),
    linear-gradient(#d5def5, #d5def5), linear-gradient(#d5def5, #d5def5);
  background-size: 44px 44px, 44px 44px, 23px 1px, 1px 23px;
  background-position: center, center, 10px 10px, 10px 10px;
  background-repeat: no-repeat;
  opacity: .58;
  pointer-events: none;
  z-index: -1;
}

.training-system-consult > span,
.training-course-panel > .pill {
  color: #4c62b4;
}

.training-system-consult h2,
.training-course-panel > h3,
.training-course-panel h4 {
  color: var(--tr-ink);
}

.training-system-consult p,
.training-course-panel > p,
.training-course-panel ul {
  color: var(--tr-body);
}

.training-course-panel hr {
  border-color: var(--tr-line);
}

.training-course-panel li::before {
  color: var(--tr-blue);
}

/* Radar instrumentation: all layers remain static, all labels remain clickable. */
.training-radar-assessment {
  position: relative;
  background: #fff;
  border-color: #d2ddf3;
  box-shadow: var(--tr-shadow), inset 0 1px 0 #fff;
}

.training-plan-stage-label h3 {
  color: var(--tr-ink);
}

.training-plan-stage-label > span {
  color: var(--tr-blue);
}

.training-radar-sample {
  color: #32768b;
  background: #f3fbfd;
  border-color: #c9e4ec;
  font-weight: 600;
}

.training-radar-plot::before {
  content: "";
  position: absolute;
  inset: 11% 13%;
  background-image: linear-gradient(#e3eafa80 1px, transparent 1px),
    linear-gradient(90deg, #e3eafa80 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse, #0009, transparent 73%);
  mask-image: radial-gradient(ellipse, #0009, transparent 73%);
  pointer-events: none;
}

.training-radar-orbit {
  stroke: #cdd8ef;
}

.training-radar-current {
  stroke-width: 2.9;
  filter: drop-shadow(0 3px 5px #556ee51c);
}

.training-radar-target {
  stroke: var(--tr-cyan);
  stroke-opacity: .88;
}

.training-radar-svg text:first-of-type {
  fill: var(--tr-blue);
}

.training-radar-svg text:last-of-type {
  fill: #7183a3;
}

.training-radar-axis {
  color: #627a9f;
}

.training-radar-axis > small {
  color: #879abd;
}

.training-radar-axis:hover {
  color: var(--tr-blue);
  background: #fffffff2;
  border-color: #d6e0f6;
}

.training-radar-axis[aria-pressed="true"] {
  color: #3655be;
  background: #fff;
  border-color: #b7c8fa;
  box-shadow: 0 4px 16px #355bfa12, inset 0 0 0 1px #edf1ff;
}

.training-radar-legend,
.training-radar-example-note {
  color: #647b9c;
}

.training-radar-hint {
  color: #7789a5;
}

.training-radar-legend .radar-current-key {
  border-color: var(--tr-blue);
}

.training-radar-legend .radar-target-key {
  border-color: var(--tr-cyan);
}

.training-radar-legend button {
  color: #526a95;
  border-color: var(--tr-line);
  background: #fff;
}

.training-radar-legend button:hover {
  color: var(--tr-blue);
  border-color: #b8c9f7;
  background: #f7f9ff;
}

.training-radar-insight {
  position: relative;
  background: #fff;
  border-color: #dae3f4;
  box-shadow: 0 8px 26px #334f9108, inset 0 2px 0 #d5ddfa;
}

.training-radar-insight-top,
.training-radar-insight-top > small {
  color: #7588a6;
}

.training-radar-insight-top > span {
  color: var(--tr-blue);
}

.training-radar-insight > h3 {
  color: var(--tr-ink);
}

.training-radar-focus,
.training-radar-insight > ul > li,
.training-radar-next > p {
  color: var(--tr-body);
}

.training-radar-insight h4 {
  color: #65719e;
}

.training-radar-insight > ul > li::before {
  background: #6da7c8;
}

.training-radar-next {
  border-left-color: #a4b7f1;
}

.training-radar-next > button,
.training-radar-next > a {
  color: var(--tr-blue);
}

.training-radar-next > button:hover,
.training-radar-next > a:hover {
  color: var(--tr-violet);
}

/* Keep the diagnosis-to-plan relationship legible on the white canvas. */
.training-plan-down,
.training-plan-fanout {
  color: #a7bce9;
}

.training-plan-center {
  background: #fff;
  border-color: #c8d4f7;
  box-shadow: 0 6px 24px #355bfa08, inset 0 2px 0 #e0e5fc;
}

.training-plan-center > span {
  color: #7b72ae;
}

.training-plan-center h3 {
  color: var(--tr-ink);
}

.training-plan-center p {
  color: var(--tr-body);
}

.training-plan-branch {
  background: #fff;
  border-color: var(--tr-line);
  box-shadow: 0 5px 16px #263e7b05;
}

.training-plan-branch > span {
  color: #7489ad;
}

.training-plan-branch h3 {
  color: #3f5986;
}

.training-plan-branches::before,
.training-plan-branch::before {
  border-color: #b5c7ee;
}

.training-plan-graph figcaption {
  color: #74839d;
}

/* Three portfolios, with small circuit accents and distinct restrained colors. */
.training-types-grid > article {
  --tr-accent: var(--tr-blue);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #fff;
  border-color: var(--tr-line);
  box-shadow: 0 8px 26px #263e7b06;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.training-types-grid > article:nth-child(2) {
  --tr-accent: var(--tr-violet);
}

.training-types-grid > article:nth-child(3) {
  --tr-accent: #298ca5;
}

.training-types-grid > article::before {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--tr-accent), #ffffff00 78%);
  opacity: .78;
  pointer-events: none;
}

.training-types-grid > article::after {
  content: "";
  position: absolute;
  width: 66px;
  height: 66px;
  top: 14px;
  right: 14px;
  background-image: radial-gradient(circle at 48px 16px, var(--tr-accent) 0 2px, transparent 2.5px),
    linear-gradient(var(--tr-line), var(--tr-line)), linear-gradient(var(--tr-line), var(--tr-line));
  background-size: 66px 66px, 34px 1px, 1px 32px;
  background-position: center, 15px 16px, 15px 16px;
  background-repeat: no-repeat;
  opacity: .42;
  pointer-events: none;
  z-index: -1;
}

.training-types-grid > article:hover {
  border-color: #c1cef0;
  box-shadow: var(--tr-shadow);
}

.training-types-grid > article > span {
  color: #687d9b;
}

.training-types-grid h3 {
  color: var(--tr-ink);
}

.training-types-grid article > p {
  color: var(--tr-body);
}

.training-types-topics {
  color: #677a96;
  border-top-color: var(--tr-line);
}

.training-types-grid button {
  color: var(--tr-accent);
}

.training-types-grid button:hover {
  color: var(--tr-blue);
}

/* Compact directory: retain the existing artwork, row size and paging geometry. */
.training-directory-filters {
  background: #fff;
  border-color: var(--tr-line);
  box-shadow: 0 5px 20px #263e7b04;
}

.training-directory-filters label > span {
  color: #657b99;
}

.training-directory-filters select,
.training-directory-filters input {
  background: #fff;
  color: #364e73;
  border-color: #d9e2f2;
}

.training-directory-filters input::placeholder {
  color: #8695ad;
}

.training-directory-filters > button {
  color: #637caa;
}

.training-directory-filters input:focus-visible,
.training-directory-filters select:focus-visible {
  border-color: #a8bdf8;
  outline-color: #c5d3fe;
}

.training-directory-result > p,
.training-course-page-note,
.training-directory-note {
  color: #73839c;
}

.training-directory-result strong {
  color: var(--tr-ink);
}

.training-directory-selected .training-chip {
  color: #4561b2;
  border-color: #d8e1fa;
  background: #f3f6ff;
}

.training-directory-row {
  background: #fff;
  border-color: var(--tr-line);
  box-shadow: 0 3px 13px #263e7b03;
}

.training-directory-row:hover,
.training-directory-row:focus-within {
  border-color: #c0cef4;
  box-shadow: 0 10px 26px #263e7b08, inset 2px 0 0 #b2c2f7;
}

.training-directory-thumb {
  border-color: #dbe3f3;
}

.training-directory-kicker {
  color: #687c98;
}

.training-directory-kicker > span {
  color: #7788a3;
  border-color: #e0e7f2;
  background: #fff;
}

.training-directory-body h3 {
  color: var(--tr-ink);
}

.training-directory-body h3 a:hover {
  color: var(--tr-blue);
}

.training-directory-desc {
  color: #5d718f;
}

.training-directory-meta > span {
  color: #697c96;
  background: #fafbfe;
  border-color: #e5eaf3;
}

.training-directory-meta > span:first-child {
  color: #506eb1;
  background: #f1f5ff;
  border-color: #dce5fa;
}

.training-all-courses .training-directory-meta > span:nth-child(2) {
  color: #7a64b1;
  background: #f6f3fd;
  border-color: #e8e0f7;
}

.training-all-courses .training-directory-meta > span:nth-child(3) {
  color: #34788a;
  background: #f1f9fb;
  border-color: #dbeef2;
}

.training-directory-action {
  color: #536fab;
  border-color: #d8e1f5;
  background: #fff;
}

.training-directory-action:hover {
  color: var(--tr-blue);
  border-color: #b8c9f7;
  background: #f7f9ff;
}

.training-directory-list > .training-empty {
  background: #fff;
  border-color: #d1ddf3;
}

.training-directory-list > .training-empty h3 {
  color: var(--tr-ink);
}

.training-catalog-pagination > p {
  color: #7184a1;
}

.training-catalog-pagination button {
  color: #5872a3;
  border-color: #dbe4f4;
  background: #fff;
}

.training-catalog-pagination button:hover:not(:disabled) {
  color: var(--tr-blue);
  background: #f3f6ff;
  border-color: #b9caf8;
}

.training-catalog-pagination button[aria-current="page"] {
  color: #fff;
  background: linear-gradient(135deg, var(--tr-blue), #5368e6);
  border-color: #4565eb;
  box-shadow: 0 4px 12px #355bfa16;
}

.training-catalog-pagination button:disabled {
  color: #9ba9bd;
  background: #fff;
  border-color: #e6ebf4;
}

/* Course detail, practical deliverables, and retained learning records. */
.training-hero {
  background-color: #fff;
}

.training-hero > .eyebrow,
.training-detail-section .eyebrow {
  color: var(--tr-blue);
}

.training-detail-section,
.training-module-row,
.training-list-row,
.training-knowledge {
  border-color: var(--tr-line, #dde5f2);
}

.training-module-row > span,
.training-module-row > b {
  color: var(--tr-blue);
}

.training-module-row h3,
.training-stages h3,
.training-learning-summary h3,
.training-list-main h3,
.training-evidence h3 {
  color: var(--tr-ink);
}

.training-module-row p,
.training-knowledge > p:not(.eyebrow),
.training-knowledge > ul,
.training-stages p,
.training-list-desc,
.training-account-top p,
.training-learning-summary > p:not(.eyebrow) {
  color: var(--tr-body);
}

.training-tags .pill,
.training-course-panel > .pill {
  color: #546fac;
  background: #f4f7ff;
}

.training-stages > div,
.training-learning-summary {
  background: #fff !important;
  box-shadow: inset 0 0 0 1px var(--tr-line, #dde5f2);
}

.training-stages span,
.training-capstone strong {
  color: var(--tr-blue);
}

.training-capstone {
  background: #fff;
  border-left-color: var(--tr-blue);
  box-shadow: inset 0 0 0 1px #e0e7f6;
}

.training-capstone p {
  color: var(--tr-body);
}

.training-course-panel .training-panel-note,
.training-list-category p,
.training-list-meta,
.training-ledger,
.training-reset-row {
  color: #74839b;
}

.training-account-top article,
.training-lesson-aside {
  border-color: var(--tr-line);
  box-shadow: 0 6px 24px #263e7b06;
}

.training-evidence th {
  background: #fff;
  color: #4d648e;
  border-bottom: 1px solid #cbd9f3;
}

.training-evidence td {
  color: var(--tr-body);
  border-color: var(--tr-line);
}

.training-exercise {
  background: #fff;
  border-color: #d5e2f5;
  box-shadow: 0 6px 22px #263e7b05;
}

.training-exercise > strong {
  color: var(--tr-blue);
}

.training-exercise > p {
  color: var(--tr-body);
}

.training-quiz button {
  background: #fff;
  color: #4e658a;
  border-color: #dce5f4;
}

.training-quiz button:hover {
  color: var(--tr-blue);
  border-color: #b5c8f9;
}

.training-system-contact {
  position: relative;
  background: #fff;
  box-shadow: inset 0 1px 0 #e1e7f5;
}

/* Narrow screens keep the established stacking and all established hit targets. */
@media (max-width: 760px) {
  .training-system-hero {
    background-image: linear-gradient(90deg, #fffffffc, #fffffff0), url("assets/ai-network-field.svg");
    background-size: 100% 100%, 580px auto;
    background-position: center, right top;
  }

  .training-system-consult,
  .training-course-panel,
  .training-radar-assessment {
    box-shadow: 0 8px 26px #263e7b08;
  }

  .training-types-grid > article::before {
    left: 20px;
    right: 20px;
  }

  .training-types-grid > article::after {
    opacity: .3;
  }

  .training-radar-insight {
    box-shadow: inset 0 2px 0 #d5ddfa;
  }
}

@media (prefers-reduced-motion: reduce) {
  .training-system-hero *,
  .training-system-section *,
  .training-system-contact *,
  .training-detail-layout *,
  .training-classroom *,
  .training-account * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Course secondary pages: summary and consultation first, then a readable outline. */
.training-course-detail-page {
  --tr-ink: var(--ai-ink, #14243f);
  --tr-body: var(--ai-body, #526581);
  --tr-line: var(--ai-line, #dde5f2);
  --tr-blue: var(--ai-cobalt, #355bfa);
  --tr-violet: var(--ai-violet, #7155ed);
  --tr-shadow: var(--ai-shadow, 0 18px 48px #263e7b0c);
  --course-header-height: 84px;
  background: #fff;
}

.training-course-detail-page .wrap {
  width: min(1120px, calc(100% - 80px));
}

.training-course-detail-hero {
  padding: 25px 0 36px;
  background: linear-gradient(100deg, #fff 40%, #fbfcff);
}

.training-course-detail-hero .breadcrumb {
  color: #71829b;
  font-size: 11px;
  margin-bottom: 25px;
}

.training-course-detail-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 64px;
  align-items: start;
}

.training-course-detail-copy {
  min-width: 0;
  padding-top: 9px;
}

.training-course-detail-copy > .eyebrow {
  color: var(--tr-blue);
  font-size: 10px;
  letter-spacing: .09em;
  margin-bottom: 17px;
}

.training-course-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 18px;
}

.training-course-detail-meta > span {
  padding: 3px 9px;
  border: 1px solid #e0e7f5;
  border-radius: 5px;
  color: #62789f;
  background: #fff;
  font-size: 11px;
  line-height: 1.7;
}

.training-course-detail-meta > span:first-child {
  color: #4763b4;
  border-color: #dce4fb;
  background: #f4f7ff;
}

.training-course-detail-meta > span:nth-child(2) {
  color: #7c65ae;
}

.training-course-detail-copy h1 {
  max-width: 100%;
  color: var(--tr-ink);
  font-size: clamp(29px, 3.1vw, 42px);
  line-height: 1.45;
  font-weight: 650;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
  margin: 0 0 19px;
}

.training-course-detail-intro {
  max-width: 640px;
  color: var(--tr-body);
  font-size: 14px;
  line-height: 1.95;
  margin: 0 0 23px;
}

.training-course-detail-facts {
  margin: 0;
  display: grid;
  gap: 9px;
  font-size: 12px;
  line-height: 1.9;
}

.training-course-detail-facts > div {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 12px;
}

.training-course-detail-facts dt {
  color: #7b8ba5;
}

.training-course-detail-facts dd {
  margin: 0;
  color: #516b91;
  overflow-wrap: anywhere;
}

.training-course-detail-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 17px 25px;
  margin-top: 25px;
}

.training-course-detail-actions button,
.training-course-detail-actions a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  padding: 0;
  background: transparent;
  font: inherit;
  font-size: 12px;
  line-height: 1.8;
  color: var(--tr-blue);
  cursor: pointer;
}

.training-course-detail-actions a {
  color: #657da3;
}

.training-course-detail-page .training-course-detail-consult {
  position: static;
  top: auto;
  grid-row: auto;
  margin: 0;
  padding: 24px;
}

.training-course-detail-consult > .pill {
  font-size: 10px;
}

.training-course-detail-consult > h3 {
  font-size: 19px;
  line-height: 1.6;
  margin: 20px 0 12px;
}

.training-course-detail-art {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 19px;
}

.training-course-detail-art-frame {
  position: relative;
  width: 90px;
  height: 74px;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid #dfe6f5;
  border-radius: 7px;
  background: #fff;
}

.training-course-detail-art > div:last-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.training-course-detail-art span,
.training-course-detail-art small {
  font-size: 10px;
  line-height: 1.7;
  color: #8290a7;
}

.training-course-detail-art strong {
  font-size: 15px;
  line-height: 1.6;
  font-weight: 600;
  color: #526b95;
}

.training-course-detail-panel-facts {
  margin: 0 0 20px;
  font-size: 11px;
  line-height: 1.85;
}

.training-course-detail-panel-facts > div {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 15px;
  padding: 9px 0;
  border-bottom: 1px solid #edf0f7;
}

.training-course-detail-panel-facts dt {
  flex-shrink: 0;
  color: #7b8ba5;
}

.training-course-detail-panel-facts dd {
  margin: 0;
  color: #536c91;
  text-align: right;
  overflow-wrap: anywhere;
}

.training-course-detail-consult .training-course-detail-panel-return {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  line-height: 1.9;
  color: #647da8;
  margin: 12px 0 0;
}

.training-course-detail-consult .training-panel-note {
  font-size: 10px !important;
  line-height: 1.9;
  margin-top: 16px !important;
  color: #7c8ca5;
}

.training-course-detail-nav {
  position: sticky;
  top: var(--course-header-height);
  z-index: 25;
  background: #fffffffa;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-block: 1px solid #e2e8f4;
}

.training-course-detail-nav > .wrap {
  display: flex;
  align-items: center;
  gap: 30px;
}

.training-course-detail-nav button,
.training-course-detail-nav a {
  flex-shrink: 0;
  border: 0;
  padding: 15px 0;
  background: transparent;
  color: #62789f;
  font: inherit;
  font-size: 12px;
  line-height: 1.8;
  white-space: nowrap;
  cursor: pointer;
}

.training-course-detail-nav button:hover,
.training-course-detail-nav a:hover {
  color: var(--tr-blue);
}

.training-course-detail-nav a {
  margin-left: auto;
  color: #5573b4;
}

.training-course-detail-page .training-course-detail-body {
  display: block;
  padding-top: 10px;
  padding-bottom: 65px;
}

.training-course-detail-main {
  max-width: 880px;
  margin-inline: auto;
}

.training-course-detail-page .training-detail-section {
  padding: 35px 0 33px;
  scroll-margin-top: calc(var(--course-header-height) + 76px);
}

.training-course-detail-page .training-detail-section:first-child {
  border-top: 0;
}

.training-course-detail-page .training-detail-section > .eyebrow {
  font-size: 10px;
  letter-spacing: .07em;
}

.training-course-detail-page .training-detail-section h2 {
  font-size: 26px;
  line-height: 1.55;
  margin: 10px 0 19px;
}

.training-course-detail-page .training-detail-section > p:not(.eyebrow) {
  max-width: 800px;
  font-size: 14px;
  line-height: 1.95;
}

.training-course-detail-page .training-detail-section > .training-course-detail-outcome {
  color: #294a79;
  font-size: 18px;
  font-weight: 550;
  line-height: 1.85;
  margin-bottom: 13px;
}

.training-course-detail-page .training-module-list {
  margin-top: 23px;
}

.training-course-detail-page .training-course-detail-module {
  align-items: start;
  gap: 19px;
  padding: 21px 0;
}

.training-course-detail-page .training-course-detail-module-number {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  flex-shrink: 0;
  border: 1px solid #dfe6f6;
  border-radius: 7px;
  background: #f7f9ff;
  color: #6f84b5;
  font-size: 11px;
  line-height: 1;
  margin-top: 0;
}

.training-course-detail-module > div {
  min-width: 0;
  flex: 1;
}

.training-course-detail-module h3 {
  line-height: 1.7;
}

.training-course-detail-page .training-course-detail-module p {
  font-size: 13px;
  line-height: 1.9;
}

.training-course-detail-page .training-capstone {
  margin-top: 24px;
  padding: 22px 25px;
  border-left-width: 3px;
  border-radius: 0 7px 7px 0;
}

.training-course-detail-page .training-capstone p {
  font-size: 14px;
  line-height: 1.95;
}

.training-course-detail-bottom {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 28px;
  margin-top: 27px;
}

.training-course-detail-bottom > .btn {
  font-size: 12px;
  min-height: 42px;
}

.training-course-detail-bottom > a {
  color: #617aa3;
  font-size: 12px;
  line-height: 1.8;
}

/* Preserve existing long profile values without widening a narrow viewport. */
.training-account-top article {
  min-width: 0;
}

.training-account-top article h2,
.training-account-top article p {
  overflow-wrap: anywhere;
}

@media (max-width: 1050px) {
  .training-course-detail-page .wrap {
    width: calc(100% - 48px);
  }
  .training-course-detail-heading {
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 36px;
  }
  .training-course-detail-page .training-course-detail-consult {
    padding: 21px;
  }
}

@media (max-width: 900px) {
  .training-course-detail-page {
    --course-header-height: 73px;
  }
  .training-course-detail-nav > .wrap {
    gap: 24px;
  }
}

@media (max-width: 800px) {
  .training-course-detail-heading {
    grid-template-columns: minmax(0, 1fr);
    gap: 27px;
  }
  .training-course-detail-copy {
    padding-top: 0;
  }
  .training-course-detail-copy h1 {
    font-size: 32px;
  }
  .training-course-detail-page .training-course-detail-consult {
    padding: 24px;
  }
  .training-classroom [data-knowledge] {
    scroll-margin-top: 100px;
  }
  .training-classroom [data-knowledge] h2:focus-visible {
    outline: 2px solid #b4c7f7;
    outline-offset: 7px;
    border-radius: 3px;
  }
}

@media (max-width: 700px) {
  .training-course-detail-page {
    --course-header-height: 66px;
  }
  .training-course-detail-page .wrap {
    width: calc(100% - 36px);
  }
  .training-course-detail-hero {
    padding: 21px 0 27px;
  }
  .training-course-detail-hero .breadcrumb {
    font-size: 10px;
    margin-bottom: 23px;
  }
  .training-course-detail-copy h1 {
    font-size: 29px;
    line-height: 1.5;
    margin-bottom: 16px;
  }
  .training-course-detail-copy > .eyebrow {
    font-size: 9px;
    margin-bottom: 14px;
  }
  .training-course-detail-meta {
    gap: 6px;
    margin-bottom: 15px;
  }
  .training-course-detail-meta > span {
    font-size: 10px;
    padding: 3px 7px;
  }
  .training-course-detail-intro {
    font-size: 13px;
    line-height: 1.95;
    margin-bottom: 18px;
  }
  .training-course-detail-facts {
    font-size: 11px;
    gap: 7px;
  }
  .training-course-detail-facts > div {
    gap: 9px;
    grid-template-columns: 53px minmax(0, 1fr);
  }
  .training-course-detail-actions {
    margin-top: 21px;
    gap: 14px 23px;
  }
  .training-course-detail-actions button,
  .training-course-detail-actions a {
    font-size: 11px;
  }
  .training-course-detail-nav > .wrap {
    gap: 0;
    justify-content: space-between;
  }
  .training-course-detail-nav button {
    font-size: 11px;
    padding: 13px 0;
  }
  .training-course-detail-nav a {
    display: none;
  }
  .training-course-detail-page .training-course-detail-body {
    padding-top: 4px;
    padding-bottom: 43px;
  }
  .training-course-detail-page .training-detail-section {
    padding: 28px 0;
  }
  .training-course-detail-page .training-detail-section h2 {
    font-size: 22px;
    margin-bottom: 16px;
  }
  .training-course-detail-page .training-detail-section > p:not(.eyebrow) {
    font-size: 13px;
  }
  .training-course-detail-page .training-detail-section > .training-course-detail-outcome {
    font-size: 16px;
  }
  .training-course-detail-page .training-course-detail-module {
    gap: 13px;
    padding: 19px 0;
  }
  .training-course-detail-page .training-course-detail-module-number {
    width: 27px;
    height: 27px;
    font-size: 10px;
  }
  .training-course-detail-module h3 {
    font-size: 15px;
  }
  .training-course-detail-page .training-course-detail-module p {
    font-size: 12px;
    line-height: 1.9;
  }
  .training-course-detail-page .training-stages {
    grid-template-columns: minmax(0, 1fr);
    gap: 11px;
  }
  .training-course-detail-page .training-capstone {
    padding: 20px;
  }
  .training-course-detail-page .training-capstone p {
    font-size: 13px;
  }
  .training-course-detail-bottom {
    gap: 16px;
    align-items: start;
    flex-direction: column;
  }
  .training-course-detail-bottom > .btn {
    width: 100%;
    font-size: 11px;
  }
  .training-classroom [data-knowledge] {
    scroll-margin-top: 92px;
  }
}