:root {
  --ai-ink: #17171c;
  --ai-muted: #62626e;
  --ai-surface: #fafaf8;
  --ai-warm: #f2efe8;
  --ai-line: rgba(23, 23, 28, 0.12);
  --ai-sky: #0b8cc7;
  --ai-sky-dark: #0568b0;
  --ai-sky-deep: #0a3f72;
  --ai-sky-bright: #15b9dc;
  --ai-sky-soft: #e2f1fa;
  --ai-sky-pale: #f0f7fc;
  --ai-violet: #6745df;
  --ai-violet-dark: #4426aa;
  --ai-violet-soft: #eeeaff;
  --ai-teal: #087d78;
  --ai-teal-soft: #e5f5f1;
  --ai-blue: #456f85;
  --ai-green: #234b3e;
  --ai-coral: #bd533f;
  --ai-radius: 24px;
  --ai-header-h: 2.9rem;
  --ai-arrow-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h14.5M12.8 6l6 6-6 6'/%3E%3C/svg%3E");
  --ai-logo-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.8 13.75 9.4c.13.55.3.72.85.85L22 12l-7.4 1.75c-.55.13-.72.3-.85.85L12 22.2l-1.75-7.6c-.13-.55-.3-.72-.85-.85L2 12l7.4-1.75c.55-.13.72-.3.85-.85z'/%3E%3C/svg%3E");
}

/* Grundkursen och fördjupningen delar filmernas blå färgskala. */
html[data-track="standard"],
html[data-track="standard-advanced"] {
  --ai-ink: #111a27;
  --ai-muted: #677283;
}

html[data-track="nextgen"] {
  --ai-sky: #7a5af0;
  --ai-sky-dark: var(--ai-violet);
  --ai-sky-deep: var(--ai-violet-dark);
  --ai-sky-soft: var(--ai-violet-soft);
  --ai-sky-pale: #f7f5ff;
}

[data-md-color-scheme="default"] {
  --md-default-bg-color: var(--ai-surface);
  --md-default-fg-color: var(--ai-ink);
  --md-primary-fg-color: var(--ai-ink);
  --md-accent-fg-color: var(--ai-sky-dark);
  --md-typeset-a-color: var(--ai-sky-dark);
}

html { scroll-behavior: smooth; }

body {
  color: var(--ai-ink);
  background: var(--ai-surface);
  font-family: Roboto, "Segoe UI", system-ui, sans-serif;
}

.md-header {
  height: var(--ai-header-h);
  color: var(--ai-ink);
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
  transition: background 200ms ease, box-shadow 200ms ease;
}

/* Headern ar helt genomskinlig i vila sa hero-ytan ligger obruten bakom den.
   Forst nar sidan scrollas tonar en frostad yta med mjukt lyft fram.
   .is-scrolled sätts i overrides/main.html - Materials egen .md-header--shadow
   slar till redan vid scroll 0 och neutraliseras darfor av box-shadow: none ovan. */
html.is-scrolled .md-header {
  background: rgba(250, 250, 248, 0.82);
  box-shadow: 0 3px 16px rgba(23, 23, 28, 0.07);
  backdrop-filter: blur(18px) saturate(150%);
}

.md-header__inner { height: 100%; }

.md-header__button,
.md-header__title { color: var(--ai-ink); }

.md-header__title {
  margin-left: 0.6rem;
  font-family: Roboto, "Segoe UI", system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.012em;
}

.md-header__button.md-logo {
  display: grid;
  width: 1.65rem;
  height: 1.65rem;
  margin: 0;
  padding: 0;
  place-items: center;
  background: var(--ai-sky-dark);
  border-radius: 9px;
}

.md-header__button.md-logo svg { display: none; }

.md-header__button.md-logo::before {
  width: 0.95rem;
  height: 0.95rem;
  content: "";
  background: #fff;
  -webkit-mask: var(--ai-logo-glyph) center / contain no-repeat;
  mask: var(--ai-logo-glyph) center / contain no-repeat;
}

.md-header__button[for="__drawer"] {
  border-radius: 9px;
  transition: background 150ms ease;
}

.md-header__button[for="__drawer"]:hover { background: var(--ai-sky-soft); }

.md-tabs { background: var(--ai-ink); }
.md-main__inner { margin-top: 0; }
.md-content__inner { padding-top: 2rem; }
.md-content__inner:has(> .portal-home),
.md-content__inner:has(> .course-landing) { margin: calc(-1 * var(--ai-header-h)) 0 0; padding: 0; }
.md-content__inner:has(> .portal-home)::before,
.md-content__inner:has(> .course-landing)::before { display: none; }
.md-footer { background: var(--ai-ink); }
.md-footer-meta { display: none; }

.md-typeset {
  font-size: 0.83rem;
  line-height: 1.7;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  color: var(--ai-ink);
  font-family: Roboto, "Segoe UI", system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.md-typeset h1 {
  margin-bottom: 1rem;
  font-size: clamp(2rem, 3vw, 2.8rem);
  line-height: 1.06;
  font-weight: 400;
}

.md-typeset h2 {
  margin-top: 2.6rem;
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  line-height: 1.15;
}

.md-typeset h3 { font-size: 1.15rem; font-weight: 600; }

.md-typeset > p:first-of-type {
  color: var(--ai-muted);
  font-size: 0.95rem;
}

.md-typeset img {
  border: 1px solid var(--ai-line);
  border-radius: 14px;
  box-shadow: 0 14px 36px rgba(23, 23, 28, 0.09);
}

.md-typeset code {
  border-radius: 7px;
  background: #f0edf8;
}

.md-typeset pre > code { border-radius: 12px; }

.md-typeset .admonition,
.md-typeset details {
  --notice-accent: #71808a;
  --notice-tint: #f4f7f9;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(23, 23, 28, 0.1);
  border-left: 3px solid var(--notice-accent);
  border-radius: 10px;
  box-shadow: none;
}

.md-typeset .admonition-title,
.md-typeset summary {
  margin-bottom: 0.65rem;
  color: #343941;
  font-weight: 600;
  background: var(--notice-tint);
  border-bottom: 1px solid rgba(23, 23, 28, 0.06);
}

.md-typeset .admonition-title::before,
.md-typeset summary::before { background-color: var(--notice-accent); }

.md-typeset .admonition > .admonition-title,
.md-typeset details > summary {
  color: #343941;
  background: var(--notice-tint);
}

.md-typeset .admonition > .admonition-title::before,
.md-typeset details > summary::before { background-color: var(--notice-accent); }

.md-typeset .admonition.success,
.md-typeset details.success {
  --notice-accent: #3b9485;
  --notice-tint: #edf7f5;
  border-color: #d3e7e3;
  border-left-color: var(--notice-accent);
}

.md-typeset .admonition.info,
.md-typeset details.info,
.md-typeset .admonition.note,
.md-typeset details.note {
  --notice-accent: var(--ai-sky-dark);
  --notice-tint: var(--ai-sky-pale);
  border-color: #d9e9f4;
  border-left-color: var(--notice-accent);
}

.md-typeset .admonition.tip,
.md-typeset details.tip,
.md-typeset .admonition.example,
.md-typeset details.example {
  --notice-accent: #61759f;
  --notice-tint: #f2f4f9;
  border-color: #dfe3eb;
  border-left-color: var(--notice-accent);
}

.md-typeset .admonition.warning,
.md-typeset details.warning,
.md-typeset .admonition.caution,
.md-typeset details.caution {
  --notice-accent: #a87825;
  --notice-tint: #fbf6e9;
  border-color: #ebe0c9;
  border-left-color: var(--notice-accent);
}

.md-typeset .admonition.danger,
.md-typeset details.danger,
.md-typeset .admonition.failure,
.md-typeset details.failure {
  --notice-accent: #ad5a55;
  --notice-tint: #fbf1f0;
  border-color: #ebd8d6;
  border-left-color: var(--notice-accent);
}

.md-nav__link--active { font-weight: 760; }
.md-sidebar__scrollwrap { scrollbar-width: thin; }

/* Course navigation, inspired by the calm hierarchy of Agent Academy. */
@media screen and (min-width: 76.25em) {
  /* .md-sidebar--primary ar bara nagra tiotal pixlar hog - scroll-ytan
     spiller ut utanfor. Bakgrund eller ram har blir darfor en liten
     vit rektangel hogst upp i navigationen i stallet for en hel spalt. */
  .md-sidebar--primary {
    width: 12.25rem;
    padding: 1rem 0.65rem 1.6rem 0.8rem;
  }

  .md-sidebar--primary .md-sidebar__scrollwrap {
    margin: 0;
    padding: 0.15rem 0.15rem 0.5rem 0;
    background: transparent;
    border: 0;
    border-radius: 0;
  }

  .md-sidebar--primary .md-nav__title[for="__drawer"] { display: none; }

  .md-sidebar--secondary {
    width: 12.4rem;
    padding-top: 1.35rem;
  }

  .md-sidebar--secondary .md-sidebar__scrollwrap {
    padding-left: 0.85rem;
    border-left: 1px solid color-mix(in srgb, var(--ai-sky) 16%, transparent);
  }
}

.md-nav__title {
  color: var(--ai-muted);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.md-nav__item { padding: 0; }

.md-nav__link {
  position: relative;
  min-height: 34px;
  margin: 1px 0;
  padding: 7px 7px;
  color: #555965;
  line-height: 1.35;
  border-radius: 6px;
  transition: color 140ms ease, background 140ms ease, transform 140ms ease;
}

.md-nav__link:hover {
  color: var(--ai-sky-deep);
  background: transparent;
}

.md-nav__item--nested > .md-nav__link {
  color: #343943;
  font-weight: 600;
}

.md-nav__link--active {
  color: var(--ai-sky-deep) !important;
  background: transparent;
  box-shadow: none;
}

.md-sidebar--primary .md-nav__link--active::before {
  position: absolute;
  top: 7px;
  bottom: 7px;
  left: -0.35rem;
  width: 2px;
  content: "";
  background: var(--ai-sky);
  border-radius: 99px;
}

.md-nav--secondary .md-nav__link {
  min-height: 29px;
  padding-top: 5px;
  padding-bottom: 5px;
  color: #6b6e77;
  font-size: 0.69rem;
}

.md-nav--secondary .md-nav__link--active {
  color: var(--ai-sky-dark) !important;
  background: transparent;
  box-shadow: none;
}

.md-sidebar--primary .md-nav__title[for="__drawer"] { color: var(--ai-ink); }

.portal-home,
.course-landing {
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
  color: var(--ai-ink);
}

.portal-home h1,
.portal-home h2,
.portal-home h3,
.portal-home p,
.course-landing h1,
.course-landing h2,
.course-landing h3,
.course-landing p { margin: 0; }

.portal-home img,
.course-landing img {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.eyebrow,
.section-label {
  color: var(--ai-sky-dark);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.16em;
}

.section-label--light { color: color-mix(in srgb, var(--ai-sky) 42%, #fff); }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 49px;
  padding: 0 23px;
  border-radius: 999px;
  font-weight: 760;
  text-decoration: none;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}

.button:hover { transform: none; }
.button:focus-visible,
.text-link:focus-visible,
.chapter-grid a:focus-visible,
.back-link:focus-visible { outline: 3px solid #79cfff; outline-offset: 4px; }

.button--primary {
  color: #fff !important;
  background: var(--ai-sky-dark);
  box-shadow: none;
}

.button--primary:hover { background: var(--ai-sky-deep); }

.md-typeset .button--download {
  box-shadow: none;
  transition: background 160ms ease;
}

.md-typeset .button--download:hover {
  background: var(--ai-sky-deep);
  box-shadow: none;
  transform: none;
}

.copy-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  max-width: 470px;
  margin: 18px 0 24px;
  padding: 7px 8px 7px 16px;
  background: #fff;
  border: 1px solid var(--ai-line);
  border-radius: 11px;
}

.copy-field code {
  padding: 0;
  color: var(--ai-ink);
  font-size: 0.82rem;
  background: transparent;
}

.copy-field__button {
  min-width: 88px;
  padding: 9px 15px;
  color: var(--ai-sky-deep);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 760;
  cursor: pointer;
  background: var(--ai-sky-pale);
  border: 0;
  border-radius: 8px;
  transition: color 160ms ease, background 160ms ease;
}

.copy-field__button:hover,
.copy-field__button.is-copied {
  color: #fff;
  background: var(--ai-sky-dark);
}

.copy-field__button:focus-visible {
  outline: 3px solid #79cfff;
  outline-offset: 3px;
}

.button--ghost {
  color: var(--ai-ink) !important;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid var(--ai-line);
}

.button--ghost:hover { background: rgba(224, 243, 255, 0.9); }

.button--light { color: var(--ai-ink) !important; background: #fff; }
.button--light:hover { background: #eaf7ff; }

/* Portal */
.portal-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(460px, 1.05fr);
  align-items: center;
  gap: clamp(48px, 7vw, 110px);
  min-height: 720px;
  padding: calc(clamp(80px, 9vw, 132px) + var(--ai-header-h)) max(6vw, calc((100vw - 1320px) / 2)) clamp(80px, 9vw, 132px);
  background:
    radial-gradient(circle at 78% 22%, rgba(21, 185, 220, 0.2), transparent 29%),
    radial-gradient(circle at 15% 85%, rgba(5, 104, 176, 0.1), transparent 31%),
    linear-gradient(135deg, #f6f8fb 0%, #f0f7fc 55%, #e2f1fa 100%);
}

.portal-hero::after {
  position: absolute;
  right: -190px;
  bottom: -250px;
  width: 500px;
  height: 500px;
  content: "";
  border: 1px solid rgba(5, 104, 176, 0.16);
  border-radius: 50%;
  box-shadow: 0 0 0 80px rgba(5, 104, 176, 0.03), 0 0 0 160px rgba(5, 104, 176, 0.018);
}

.portal-hero__copy { position: relative; z-index: 2; }

.portal-hero h1 {
  max-width: 750px;
  margin-top: 20px;
  font-size: clamp(3rem, 5.7vw, 6.1rem);
  line-height: 0.96;
  letter-spacing: -0.06em;
}

.portal-hero h1 span { color: var(--ai-sky-dark); }

.portal-hero__copy > p {
  max-width: 680px;
  margin-top: 30px;
  color: var(--ai-muted);
  font-size: clamp(1rem, 1.45vw, 1.24rem);
  line-height: 1.62;
}

.portal-hero .button { margin-top: 34px; }

.portal-hero__composition {
  position: relative;
  min-height: 520px;
}

.orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  aspect-ratio: 1;
  border: 1px solid rgba(5, 104, 176, 0.22);
  border-radius: 50%;
  translate: -50% -50%;
}

.orbit--one { width: min(64%, 374px); }

.orbit--two {
  width: min(84%, 490px);
  border-style: dashed;
  opacity: 0.58;
}

.agent-node {
  position: absolute;
  z-index: 1;
  display: grid;
  place-content: center;
  min-width: 112px;
  min-height: 62px;
  padding: 11px 16px;
  color: var(--ai-ink);
  font-size: 0.78rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 17px;
  box-shadow: 0 18px 46px rgba(27, 92, 138, 0.14);
  backdrop-filter: blur(14px);
  translate: -50% -50%;
}

.agent-node span { font-weight: 800; }
.agent-node small { margin-top: 4px; color: var(--ai-muted); font-size: 0.63rem; }

.agent-node--main {
  top: 50%;
  left: 50%;
  width: 210px;
  min-height: 150px;
  color: #fff;
  background: linear-gradient(145deg, #0b8cc7, #0568b0 58%, #0a3f72);
  border: 0;
  border-radius: 34px;
  translate: -50% -50%;
  rotate: -2deg;
  box-shadow: 0 30px 80px rgba(5, 104, 176, 0.26);
}

.agent-node--main span { font-size: 1.6rem; }
.agent-node--main small { color: #e2f1fa; }
/* Utspridda for hand runt agenten - olika avstand och sma lutningar
   sa gruppen inte laser som en jamn ring. */
.agent-node--instructions { top: 13%; left: 25%; rotate: -3deg; }
.agent-node--knowledge { top: 8%; left: 67%; rotate: 2.5deg; }
.agent-node--tools { top: 34%; left: 90%; rotate: -2deg; }
.agent-node--flow { top: 76%; left: 82%; rotate: 3deg; }
.agent-node--sandbox { top: 92%; left: 47%; rotate: -2.5deg; }
.agent-node--skills { top: 56%; left: 10%; rotate: 2deg; }

.track-intro {
  display: block;
  padding: 100px max(6vw, calc((100vw - 1320px) / 2)) 72px;
}

.track-intro h2 { max-width: 760px; }
.track-intro > p { max-width: 760px; margin-top: 20px; }

.scenario-band {
  display: grid;
  grid-template-columns: 0.82fr 1fr;
  align-items: end;
  gap: clamp(40px, 7vw, 100px);
  padding: 115px max(6vw, calc((100vw - 1320px) / 2)) 68px;
}

.track-intro h2,
.scenario-band h2,
.chapter-section h2,
.journey-section h2,
.method-section h2,
.compare-section h2,
.course-cta h2 {
  margin-top: 12px;
  font-size: clamp(2rem, 3.8vw, 3.8rem);
  line-height: 1.04;
  letter-spacing: -0.05em;
}

.track-intro > p,
.scenario-band > p {
  color: var(--ai-muted);
  font-size: 1.05rem;
  line-height: 1.72;
}

.scenario-link {
  display: table;
  margin-top: 20px;
  color: var(--ai-sky-deep);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.scenario-link:hover,
.scenario-link:focus-visible {
  color: var(--ai-blue);
}

/* Portalen grupperas arkitektur forst, niva sedan. Varje grupp har sin egen
   rubrik och sitt eget rutnat sa att korten star lika breda mellan grupperna. */
.track-group { padding: 0 max(6vw, calc((100vw - 1320px) / 2)) 62px; }
.track-group--last { padding-bottom: 125px; }

.track-group__heading {
  display: grid;
  grid-template-columns: 0.82fr 1fr;
  align-items: end;
  gap: clamp(24px, 5vw, 90px);
  margin-bottom: 30px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--ai-line);
}

.track-group__heading h3 {
  margin-top: 10px;
  font-size: clamp(1.45rem, 2.2vw, 2rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.track-group__heading > p {
  color: var(--ai-muted);
  font-size: 0.98rem;
  line-height: 1.68;
}

.section-label--standard { color: var(--ai-sky-dark); }
.section-label--nextgen { color: var(--ai-violet); }

.course-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  padding: 0 max(6vw, calc((100vw - 1320px) / 2)) 125px;
}

.track-group .course-grid { padding: 0; }

.course-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--ai-line);
  border-radius: 28px;
  box-shadow: 0 20px 60px rgba(23, 23, 28, 0.07);
}

.course-card:not(.course-card--planned) { cursor: pointer; transition: transform 160ms ease, box-shadow 160ms ease; }
.course-card:not(.course-card--planned):hover { transform: translateY(-3px); box-shadow: 0 24px 64px rgba(23, 23, 28, 0.11); }
.course-card:not(.course-card--planned):focus-within { outline: 3px solid var(--ai-sky-dark); outline-offset: 3px; }

.course-card__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  font-size: 0.68rem;
  font-weight: 820;
  letter-spacing: 0.12em;
}

.status { padding: 7px 10px; border-radius: 999px; letter-spacing: 0; }
.status--available { color: #07615e; background: var(--ai-teal-soft); }
.status--development { color: #5135b7; background: var(--ai-violet-soft); }
.status--planned { color: var(--ai-muted); background: #f4f4f1; }

.course-card--standard .course-card__topline > span:first-child,
.course-card--advanced .course-card__topline > span:first-child { color: var(--ai-sky-deep); }

.course-card__visual { height: 285px; margin: 0 20px; border-radius: 21px; }

.course-card__visual--image {
  overflow: hidden;
  background: #eef0ff;
}

.course-card__visual--image img { width: 100%; height: 100%; object-fit: cover; }
.course-card--standard .course-card__visual--image img { transform: scale(1.08); }

.course-card--planned {
  border-style: dashed;
  box-shadow: none;
}

.course-card__visual--planned {
  display: grid;
  place-items: center;
  color: #5135b7;
  background: linear-gradient(135deg, #f2efff, #eef0ff);
}

.course-card__visual--planned span {
  font-size: clamp(1.25rem, 2vw, 1.8rem);
  font-weight: 780;
  letter-spacing: -0.025em;
}

.course-card__body { display: flex; flex: 1; flex-direction: column; padding: 30px 30px 34px; }
.course-card h3 { min-height: 2.12em; margin-top: 4px; font-size: clamp(1.5rem, 2.15vw, 1.95rem); line-height: 1.06; letter-spacing: -0.035em; }
.course-card p { margin-top: 14px; color: var(--ai-muted); line-height: 1.65; }
.course-card__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 22px; }
.course-card__meta span,
.hero-meta span { padding: 7px 11px; color: var(--ai-muted); font-size: 0.7rem; font-weight: 700; background: #f4f4f1; border-radius: 999px; }

.text-link { display: inline-flex; align-items: center; margin-top: 24px; color: var(--ai-ink) !important; font-weight: 780; text-decoration: none; }
.course-card .text-link::before { position: absolute; inset: 0; content: ""; }
.course-card:hover .text-link { text-decoration: underline; text-underline-offset: 3px; }

.arrow-glyph,
.button--arrow::after,
.back-link::before {
  width: 1.15em;
  height: 1.15em;
  content: "";
  background: currentColor;
  -webkit-mask: var(--ai-arrow-glyph) center / contain no-repeat;
  mask: var(--ai-arrow-glyph) center / contain no-repeat;
  transition: transform 160ms ease;
}

.button--arrow::after { margin-left: 11px; }
.button--arrow:hover::after { transform: none; }
.back-link::before { transform: scaleX(-1); }
.back-link:hover::before { transform: scaleX(-1) translateX(3px); }

/* Jamforelse mellan de tva upplevelserna (Microsoft Learn: harnesses-overview).
   Bada spalterna har samma bredd och samma vikt - avsnittet ar ett vagval,
   ingen rangordning. Kursfargerna knyter ihop det med korten ovanfor. */
.compare-section {
  position: relative;
  padding: 0 max(6vw, calc((100vw - 1320px) / 2)) 122px;
}

/* Samma svaga cirkelmotiv som i hero:n, speglat till vanster sidan.
   Innehallet lyfts ovanfor den med z-index. */
.compare-section::before {
  position: absolute;
  top: 30px;
  left: -230px;
  z-index: 0;
  width: 600px;
  height: 600px;
  content: "";
  border: 1px solid rgba(5, 104, 176, 0.16);
  border-radius: 50%;
  box-shadow: 0 0 0 80px rgba(5, 104, 176, 0.03), 0 0 0 160px rgba(5, 104, 176, 0.018);
}

.compare-section > * { position: relative; z-index: 1; }

.compare-section__heading { max-width: 780px; }
.compare-section__heading > p { margin-top: 22px; color: var(--ai-muted); font-size: 1rem; line-height: 1.7; }

.compare-picks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 54px;
}

.compare-pick {
  padding: 26px 28px 29px;
  background: #fff;
  border: 1px solid var(--ai-line);
  border-radius: 22px;
  box-shadow: 0 20px 60px rgba(23, 23, 28, 0.05);
}

.compare-pick--standard { --pick-accent: var(--ai-sky-dark); }
.compare-pick--nextgen { --pick-accent: var(--ai-violet); }

.compare-pick h3 { font-size: 1.1rem; line-height: 1.32; }
.compare-pick p { margin-top: 13px; color: var(--ai-muted); font-size: 0.86rem; line-height: 1.68; }

.compare-pick__example {
  margin-top: 17px;
  padding-top: 15px;
  border-top: 1px solid rgba(23, 23, 28, 0.07);
  font-size: 0.81rem;
}

.compare-pick__example b { color: var(--pick-accent); font-weight: 780; }

.compare-table__scroll {
  margin-top: 16px;
  overflow-x: auto;
  background: #fff;
  border: 1px solid var(--ai-line);
  border-radius: 22px;
  box-shadow: 0 20px 60px rgba(23, 23, 28, 0.05);
}

.compare-table {
  width: 100%;
  min-width: 660px;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.compare-table th,
.compare-table td {
  padding: 15px 24px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(23, 23, 28, 0.07);
}

.compare-table thead th {
  padding-top: 21px;
  padding-bottom: 17px;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.compare-table thead th span {
  display: block;
  margin-top: 5px;
  color: var(--ai-muted);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
}

.compare-col--standard { color: var(--ai-sky-dark); }
.compare-col--nextgen { color: var(--ai-violet); }

.compare-table tbody th { width: 27%; color: var(--ai-ink); font-weight: 720; }
.compare-table tbody td { width: 36.5%; color: var(--ai-muted); line-height: 1.6; }
.compare-table tbody tr:last-child > * { border-bottom: 0; }

.compare-note { margin-top: 24px; max-width: 940px; color: var(--ai-muted); font-size: 0.79rem; line-height: 1.75; }
.compare-note a { color: var(--ai-sky-dark); }

.method-section {
  padding: 110px max(6vw, calc((100vw - 1320px) / 2)) 120px;
  color: #fff;
  background: var(--ai-ink);
}

.method-section h2 { max-width: 760px; color: #fff; }
.method-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 70px; background: rgba(255, 255, 255, 0.14); }
.method-grid article { min-height: 220px; padding: 28px; background: var(--ai-ink); }
.method-grid article > span { color: #7ed3ff; font-size: 0.7rem; font-weight: 850; letter-spacing: 0.14em; }
.method-grid h3 { margin-top: 48px; color: #fff; font-size: 1.3rem; line-height: 1.22; }
.method-grid p { margin-top: 10px; color: rgba(255, 255, 255, 0.65); line-height: 1.55; }

/* Course landings */
.course-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 1fr);
  align-items: center;
  gap: clamp(46px, 7vw, 104px);
  min-height: 720px;
  padding: calc(72px + var(--ai-header-h)) max(6vw, calc((100vw - 1320px) / 2)) 105px;
}

.course-hero--standard,
.course-hero--advanced {
  background: radial-gradient(circle at 86% 16%, rgba(21, 185, 220, 0.2), transparent 29%),
    radial-gradient(circle at 15% 85%, rgba(5, 104, 176, 0.08), transparent 32%),
    linear-gradient(135deg, #f6f8fb 0%, #f0f7fc 58%, #e2f1fa 100%);
}

.course-hero--nextgen {
  background: radial-gradient(circle at 86% 15%, rgba(103, 69, 223, 0.17), transparent 29%), radial-gradient(circle at 18% 88%, rgba(33, 143, 219, 0.07), transparent 27%), linear-gradient(135deg, #fbfbfa 0%, #f4f1ff 58%, #f0eefb 100%);
}

.back-link { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 45px; color: var(--ai-muted) !important; font-size: 0.76rem; font-weight: 720; text-decoration: none; }
.course-hero__copy { position: relative; z-index: 2; }
.course-hero h1 { margin-top: 20px; font-size: clamp(2.6rem, 4.4vw, 78px); line-height: 0.98; letter-spacing: -0.055em; }
.course-hero--standard h1 span { color: var(--ai-sky-dark); }
.course-hero--nextgen h1 span { color: var(--ai-sky-dark); }
.course-hero--advanced h1 span { color: var(--ai-sky-dark); }
.course-hero__copy > p { max-width: 680px; margin-top: 28px; color: var(--ai-muted); font-size: clamp(1rem, 1.35vw, 1.2rem); line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }

.course-hero__visual { position: relative; }
.product-shot { overflow: hidden; background: #fff; border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 27px; box-shadow: 0 30px 85px rgba(46, 37, 94, 0.17); transform: rotate(1deg); }
.product-shot--dark { padding: 9px; background: #101617; box-shadow: 0 30px 85px rgba(8, 56, 54, 0.2); transform: rotate(-1deg); }
.product-shot img { display: block; width: 100%; }
.product-shot--dark img { border-radius: 19px; }
.product-shot--video { border: 0; background: transparent; transform: none; }
.course-film { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.floating-label { position: absolute; left: -25px; bottom: -30px; display: grid; gap: 3px; min-width: 235px; padding: 18px 20px; color: #fff; background: rgba(23, 23, 28, 0.95); border-radius: 17px; box-shadow: 0 20px 48px rgba(23, 23, 28, 0.22); }
.floating-label span { color: rgba(255, 255, 255, 0.67); font-size: 0.7rem; }

.scenario-band { padding-top: 110px; }
.course-landing--standard .scenario-band .section-label,
.course-landing--advanced .scenario-band .section-label { color: var(--ai-sky-dark); }

.chapter-section,
.journey-section { padding: 75px max(6vw, calc((100vw - 1320px) / 2)) 125px; }
.chapter-section { background: var(--ai-warm); }
.course-landing--standard .chapter-section,
.course-landing--advanced .chapter-section { background: #f0f7fc; }
.course-landing--nextgen .chapter-section { background: #f7f5ff; }
.chapter-section__heading { max-width: 720px; }
.chapter-section__heading > p,
.journey-section__heading > p { margin-top: 22px; color: var(--ai-muted); font-size: 1rem; line-height: 1.65; }

.chapter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 55px; }
.chapter-grid a { display: grid; grid-template-columns: 48px 1fr; gap: 18px; min-height: 126px; padding: 23px; color: var(--ai-ink) !important; text-decoration: none; background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(23, 23, 28, 0.08); border-radius: 17px; transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease; }
.chapter-grid a:hover { background: #fff; box-shadow: 0 14px 34px rgba(23, 23, 28, 0.07); transform: translateY(-2px); }
.chapter-grid a > span { color: var(--ai-teal); font-size: 0.72rem; font-weight: 850; letter-spacing: 0.1em; }
.course-landing--standard .chapter-grid a > span,
.course-landing--advanced .chapter-grid a > span { color: var(--ai-sky-dark); }
.course-landing--nextgen .chapter-grid a > span { color: var(--ai-violet); }
.chapter-grid h3 { font-size: 1.1rem; line-height: 1.25; }
.chapter-grid p { margin-top: 7px; color: var(--ai-muted); font-size: 0.78rem; line-height: 1.5; }

.capability-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; padding: 5px max(6vw, calc((100vw - 1320px) / 2)) 120px; }
.capability-grid--six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.capability { min-height: 300px; padding: 28px; color: #fff; border-radius: 23px; box-shadow: 0 18px 45px rgba(23, 23, 28, 0.1); }
.capability--green { background: var(--ai-green); }
.capability--blue { background: var(--ai-blue); }
.capability--purple { background: var(--ai-violet-dark); }
.capability--coral { background: var(--ai-coral); }
.capability--violet { background: #5b3db5; }
.capability--standard-navy { background: #0a3f72; }
.capability--standard-deep { background: #0a5596; }
.capability--standard-blue { background: #0568b0; }
.capability--standard-teal { background: #075e5b; }
.course-landing--standard .capability > span,
.course-landing--advanced .capability > span { color: #a7e9f6; }
.capability > span { color: rgba(255, 255, 255, 0.55); font-size: 0.7rem; font-weight: 850; letter-spacing: 0.14em; }
.capability h3 { margin-top: 74px; color: #fff; font-size: 1.45rem; line-height: 1.2; }
.capability p { margin-top: 12px; color: rgba(255, 255, 255, 0.74); line-height: 1.55; }
.course-landing--standard .capability p,
.course-landing--advanced .capability p { color: #e2f1fa; }

.journey-section { display: grid; grid-template-columns: 0.74fr 1.26fr; gap: clamp(50px, 8vw, 112px); padding-top: 120px; background: var(--ai-warm); }
.journey-section__heading { position: sticky; top: 100px; align-self: start; }
.journey-list { border-top: 1px solid var(--ai-line); }
.journey-list article { display: grid; grid-template-columns: 58px 1fr; gap: 20px; padding: 27px 0; border-bottom: 1px solid var(--ai-line); }
.journey-list article > span { color: var(--ai-sky-dark); font-size: 0.72rem; font-weight: 850; letter-spacing: 0.12em; }
.journey-list h3 { font-size: 1.18rem; line-height: 1.25; }
.journey-list p { margin-top: 7px; color: var(--ai-muted); line-height: 1.55; }

.table-nowrap-first th:first-child,
.table-nowrap-first td:first-child,
.table-nowrap-first td:first-child code {
  min-width: 8.5rem;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

.course-cta { display: grid; grid-template-columns: 1fr 0.8fr; align-items: end; gap: 80px; padding: 95px max(6vw, calc((100vw - 1320px) / 2)) 105px; color: #fff; }
.course-cta--purple { background: var(--ai-violet-dark); }
.course-cta h2 { color: #fff; }
.course-cta > p { color: rgba(255, 255, 255, 0.68); font-size: 1rem; line-height: 1.7; }
.course-cta > .button { justify-self: end; }

@media (max-width: 1080px) {
  .portal-hero,
  .course-hero { grid-template-columns: 1fr; min-height: auto; }
  .portal-hero__composition { min-height: 470px; }
  .course-hero__visual { margin-top: 16px; }
  .method-grid,
  .capability-grid { grid-template-columns: repeat(2, 1fr); }
  .track-intro,
  .scenario-band,
  .journey-section,
  .course-cta { grid-template-columns: 1fr; gap: 42px; }
  .journey-section__heading { position: static; }
  .course-cta > .button { justify-self: start; }
}

@media (max-width: 760px) {
  .portal-hero,
  .course-hero { padding-top: calc(60px + var(--ai-header-h)); padding-bottom: 78px; }
  .portal-hero h1,
  .course-hero h1 { font-size: 2.75rem; }
  .portal-hero__composition { min-height: 370px; transform: scale(0.82); margin: -35px -55px; }
  .orbit--two { width: 450px; height: 450px; }
  .course-grid,
  .chapter-grid,
  .method-grid,
  .capability-grid,
  .compare-picks { grid-template-columns: 1fr; }
  .track-intro,
  .scenario-band { padding-top: 80px; }
  .track-group__heading { grid-template-columns: 1fr; gap: 14px; align-items: start; }
  .course-card__visual { height: 235px; }
  .course-card h3 { min-height: 0; }
  .capability { min-height: 240px; }
  .capability h3 { margin-top: 48px; }
  .product-shot { border-radius: 18px; transform: none; }
  .floating-label { position: static; margin-top: 12px; }
  .back-link { margin-bottom: 34px; }
  .chapter-section,
  .journey-section,
  .method-section,
  .course-cta { padding-top: 78px; padding-bottom: 82px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}