/*
 * Learning overview (page-learning.php) and Learning Resources
 * (page-learning-resources.php), 2026 redesign, uniform with the News
 * and Newsletters pages: the hero comes from newsletters.css; this file styles
 * the sections: learning paths, the "Learn together" band, PMI resources and
 * the closing panel. Loaded after learning.css (shared by the Learning
 * subpages), whose bare "section" padding the classes below override.
 */

.lx-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Hero buttons at every page's hero size: 54px on computers, 48px on phones (site-wide uniformity review, 2026-10-29). */
.lx-hero-actions .pill-button {
  height: var(--ds-button-lg);
}

@media (max-width: 767px) {
  .lx-hero-actions .pill-button {
    height: var(--ds-button-md);
  }
}

.lx-actions .pill-button {
  height: var(--ds-button-md);
  padding: 0 22px;
  font-size: var(--text-ui);
}

.lx-hero-actions svg,
.lx-actions svg {
  width: 16px;
  height: 16px;
}

/* Learning hero card: "Learning at a glance", four tiles with a figure each. */
.lx-map {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 540px;
  padding: 36px;
  color: var(--ink-strong);
  font-family: var(--font-ui);
}

.lx-map h2 {
  margin: 0 0 6px;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-ui-panel);
  font-weight: 700;
  line-height: 1.25;
}

.lx-map-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lx-map-tile a {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: 20px 20px 18px;
  border-radius: var(--radius-xl);
  background: var(--purple-tint);
  color: var(--ink-strong);
  transition: transform .15s ease, box-shadow .15s ease;
}

.lx-map-tile a:hover {
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}

.lx-map-tile b {
  color: var(--purple);
  font-family: var(--font-display);
  font-size: var(--text-ui-tile-xl);
  font-weight: 700;
  line-height: 1;
}

.lx-map-tile span {
  padding-right: 22px;
  font-size: var(--text-ui-sm);
  font-weight: 700;
  line-height: 1.35;
}

.lx-map-tile svg {
  position: absolute;
  right: 16px;
  bottom: 18px;
  width: 16px;
  height: 16px;
  color: var(--purple);
}

.lx-map-tile.is-cyan a { background: var(--cyan-tint); }
.lx-map-tile.is-cyan b,
.lx-map-tile.is-cyan svg { color: var(--cyan-ink); }
.lx-map-tile.is-orange a { background: var(--orange-tint); }
.lx-map-tile.is-orange b,
.lx-map-tile.is-orange svg { color: var(--orange-deep); }
.lx-map-tile.is-night a { background: var(--night-deep); color: #fff; }
.lx-map-tile.is-night b,
.lx-map-tile.is-night svg { color: var(--cyan-light); }

.lx-map-tile a:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .lx-map-tile a {
    transition: none;
  }

  .lx-map-tile a:hover {
    transform: none;
  }
}

.lx-section :focus-visible,
.lx-band :focus-visible,
.lx-cta :focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: none;
}

/* Learning Resources hero card: label, heading, intro, three first steps. */
.lx-steps-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 560px;
  padding: 36px;
  color: var(--ink-strong);
  font-family: var(--font-ui);
}

.lx-steps-card h2 {
  margin: 0;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-ui-panel);
  font-weight: 700;
  line-height: 1.25;
}

.lx-steps-card > p {
  margin: 0;
  color: var(--muted-ui);
  font-size: var(--text-ui);
  line-height: 1.55;
}

.lx-steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 8px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line-soft);
  list-style: none;
}

.lx-steps li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.lx-steps .lx-icon {
  width: 40px;
  height: 40px;
}

.lx-steps .lx-icon svg {
  width: 20px;
  height: 20px;
}

.lx-steps li:nth-child(2) .lx-icon { background: var(--cyan-tint); color: var(--cyan-ink); }
.lx-steps li:nth-child(3) .lx-icon { background: var(--orange-tint); color: var(--orange-deep); }

.lx-step-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.lx-step-text strong {
  color: var(--ink-strong);
  font-size: var(--text-ui-md);
  font-weight: 700;
}

.lx-step-text span {
  color: var(--muted-strong);
  font-size: var(--text-ui-sm);
  line-height: 1.5;
}

/* Learning Resources hero card: the three steps as a route. Round coloured
   markers (purple, cyan, orange) joined by a gradient line; each step sits in
   its own small frosted card. */
.lx-route {
  --step: var(--purple);
  --step-tint: var(--purple-tint);
  display: flex;
  flex-direction: column;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.lx-route li {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  padding-bottom: 14px;
}

.lx-route li:last-child {
  padding-bottom: 0;
}

.lx-route li:nth-child(2) {
  --step: var(--cyan-ink);
  --step-tint: var(--cyan-tint);
}

.lx-route li:nth-child(3) {
  --step: var(--orange-deep);
  --step-tint: var(--orange-tint);
}

/* The line from this marker down to the next one, fading into the next step's colour. */
.lx-route li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 52px;
  bottom: 6px;
  width: 2px;
  border-radius: var(--radius-pill);
  background: linear-gradient(var(--purple), var(--cyan));
}

.lx-route li:nth-child(2)::before {
  background: linear-gradient(var(--cyan), var(--orange));
}

.lx-route-node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-top: 4px;
  border-radius: var(--radius-round);
  background: var(--step);
  box-shadow: 0 0 0 6px var(--step-tint);
  color: #fff;
}

.lx-route-node svg {
  width: 21px;
  height: 21px;
}

.lx-route-step {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: var(--radius-ui);
  background: rgba(255, 255, 255, .78);
  box-shadow: var(--shadow-card);
}

.lx-route-step strong {
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-ui-md);
  font-weight: 700;
  line-height: 1.3;
}

.lx-route-step > span:last-child {
  color: var(--muted-strong);
  font-size: var(--text-ui-sm);
  line-height: 1.5;
}

/* A step as a link (Learning Resources): its title's link covers the whole step, so the step is one big target;
   links in its text stay on top and keep working (UI/UX review: those small inline links were the only targets). */
.lx-route-go {
  color: inherit;
  transition: color .15s ease;
}

.lx-route-go::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.lx-route-step a:not(.lx-route-go) {
  position: relative;
  z-index: 2;
}

.lx-route-step {
  transition: border-color .15s ease, box-shadow .15s ease;
}

.lx-route li:hover .lx-route-step {
  border-color: var(--line-control);
  box-shadow: 0 12px 28px rgba(42, 12, 102, .1);
}

.lx-route li:hover .lx-route-go {
  color: var(--purple);
}

.lx-route .lx-route-go:focus-visible {
  outline: none;
}

.lx-route li:has(.lx-route-go:focus-visible) .lx-route-step {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .lx-route-go,
  .lx-route-step {
    transition: none;
  }
}

/* Compact route card (label + three steps): wider, tighter spacing. */
.lx-steps-card--route {
  gap: 10px;
  max-width: 600px;
  padding: 28px 30px 30px;
}

.lx-steps-card--route h2 {
  font-size: var(--text-ui-xl);
}

.lx-steps-card--route > p {
  font-size: var(--text-ui-sm);
  line-height: 1.5;
}

.lx-steps-card--route .lx-route {
  margin-top: 6px;
}

.lx-steps-card--route .lx-route li {
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 14px;
  padding-bottom: 8px;
}

.lx-steps-card--route .lx-route li:last-child {
  padding-bottom: 0;
}

.lx-steps-card--route .lx-route li:not(:last-child)::before {
  left: 18px;
  top: 46px;
  bottom: 0;
}

.lx-steps-card--route .lx-route-node {
  width: 38px;
  height: 38px;
  margin-top: 8px;
  box-shadow: 0 0 0 5px var(--step-tint);
}

.lx-steps-card--route .lx-route-node svg {
  width: 18px;
  height: 18px;
}

.lx-steps-card--route .lx-route-step {
  gap: 2px;
  padding: 10px 14px;
}

.lx-steps-card--route .lx-route-step strong {
  font-size: var(--text-ui);
}

.lx-steps-card--route .lx-route-step > span:last-child {
  font-size: var(--text-ui-xs);
  line-height: 1.45;
}

/* The Chapter events card among the PMI resources: an internal link, in soft purple. */
.lx-resource.lx-resource--internal {
  border-color: transparent;
  background: var(--purple-wash-hover);
}

/* Sections ------------------------------------------------------------------ */
.lx-section {
  padding: 96px 0;
  background: #fff;
  color: var(--ink-strong);
  font-family: var(--font-ui);
}

/* Learning Resources: recent Chapter sessions follow the resources section,
   whose bottom padding is the space above. (Its own class: .lx-sessions is the
   Talent Triangle page's list, whose "padding: 0" left the "All past Chapter
   sessions" link touching the closing panel; UI/UX review.) */
.lx-section + .lx-section--sessions {
  padding-top: 0;
}

.lx-sessions-all {
  display: inline-flex;
  align-items: center;
  min-height: var(--ds-button-sm);
  margin-top: 20px;
}

/* The closing panel follows: the link's own space, then the usual gap. */
.lx-section--sessions {
  padding-bottom: 72px;
}

@media (max-width: 767px) {
  .lx-section--sessions {
    padding-bottom: 40px;
  }
}

.lx-section--sessions :focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Recap titles at three lines at most, so the three cards keep close to one height (UI/UX review: a four-line
   title made one card, and so the row, taller). The full title stays in the link for screen readers. */
.lx-section--sessions .ev-recap-title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* Phones: the recaps as a row to swipe, one card and the edge of the next, snapping card by card (UI/UX review:
   stacked, the three were about 1,460px tall). The row runs to the screen's edges. */
@media (max-width: 767px) {
  .lx-section--sessions .ev-recaps {
    display: grid;
    grid-auto-columns: 84%;
    grid-auto-flow: column;
    grid-template-columns: none;
    gap: 12px;
    margin: 0 -21px;
    padding: 2px 21px 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding: 0 21px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .lx-section--sessions .ev-recaps::-webkit-scrollbar {
    display: none;
  }

  .lx-section--sessions .ev-recap {
    scroll-snap-align: start;
  }
}

.lx-inner {
  width: min(var(--max-wide), calc(100% - 42px));
}

.lx-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 760px;
  margin-bottom: 36px;
}

.lx-label {
  display: block;
  color: var(--purple);
  font-size: var(--text-ui-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.lx-section h2,
.lx-band h2,
.lx-cta h2 {
  max-width: none;
  margin: 0;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-section);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.lx-head p {
  margin: 0;
  color: var(--muted-ui);
  font-size: var(--text-ui-lg);
  line-height: 1.6;
}

.lx-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: var(--ds-icon-md);
  height: var(--ds-icon-md);
  border-radius: var(--radius-ui);
  background: var(--purple-tint);
  color: var(--purple);
}

.lx-icon svg {
  width: 24px;
  height: 24px;
}

.lx-link {
  color: var(--purple);
  font-size: var(--text-ui-sm);
  font-weight: 700;
}

/* The learning line (Learning overview, #paths): a metro map. Three stops on a thick line (purple, cyan, orange)
   to a "Lead what's next" flag, each under a "where are you?" question; the first stop is "you are here" until the
   pointer or keyboard is on another. Under them, the white guided-training line (Training Partners), with a stop
   under each station. Wide screens: across; up to 1100px: down the left. */
.lx-line {
  --line-pad: 44px;
  --line-ask: 52px;  /* the question (34px) and its gap (18px): the nodes start this far down */
  --line-node: 72px;
  --line-end: 150px; /* the flag's column */
  --line-gap: 36px;
  position: relative;
  overflow: hidden;
  padding: 44px var(--line-pad) 0;
  border: 1px solid var(--line-soft);
  border-radius: var(--ds-radius-lg);
  background: linear-gradient(180deg, var(--surface-soft) 0%, var(--purple-wash-hover) 100%);
}

.lx-line-route {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--line-end);
  gap: var(--line-gap);
}

/* The line through the nodes' centres, from the first stop to the flag. */
.lx-line-route::before {
  content: "";
  position: absolute;
  left: calc(var(--line-node) / 2);
  right: calc(var(--line-end) - var(--line-node) / 2);
  top: calc(var(--line-ask) + var(--line-node) / 2 - 5px);
  height: 10px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--purple) 0%, var(--purple) 20%, var(--cyan) 45%, var(--cyan) 55%, var(--join) 80%);
}

.lx-stops {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--line-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lx-stop {
  --stop: var(--purple);
  --stop-tint: var(--purple-tint);
  --stop-ink: var(--purple);
  --stop-on: #fff;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-radius: var(--radius-ui);
}

.lx-stop:nth-child(2) { --stop: var(--cyan); --stop-tint: var(--cyan-tint); --stop-ink: var(--cyan-ink); --stop-on: var(--night-deep); }
.lx-stop:nth-child(3) { --stop: var(--join); --stop-tint: var(--orange-tint); --stop-ink: var(--orange-deep); --stop-on: var(--night-deep); }

.lx-stop-ask {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  margin-bottom: 18px;
  padding: 0 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--ink-strong);
  font-size: var(--text-ui-xs);
  font-weight: 700;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* No question: the space stays, so the nodes stay on the line. */
.lx-stop-ask.is-empty {
  visibility: hidden;
}

.lx-stop-ask svg {
  display: none;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--highlight);
}

.lx-stop-node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--line-node);
  height: var(--line-node);
  border: 6px solid var(--stop);
  border-radius: var(--radius-round);
  background: #fff;
  box-shadow: 0 0 0 8px var(--stop-tint);
  color: var(--stop-ink);
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

.lx-stop-node svg {
  width: 26px;
  height: 26px;
}

/* The stop's number, in a night badge on the ring. */
.lx-stop-node b {
  position: absolute;
  top: -10px;
  right: -10px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-round);
  background: var(--night-deep);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-ui-3xs);
  font-weight: 700;
}

.lx-stop h3 {
  margin: 26px 0 8px;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-ui-step);
  font-weight: 700;
  line-height: 1.25;
}

.lx-stop h3 a {
  color: inherit;
  transition: color .15s ease;
}

/* The whole stop opens the page. */
.lx-stop h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.lx-stop:hover h3 a {
  color: var(--purple);
}

.lx-stop h3 a:focus-visible {
  outline: none;
}

.lx-stop:has(h3 a:focus-visible) {
  outline: 3px solid var(--focus-ring);
  outline-offset: 8px;
}

.lx-stop p {
  margin: 0 0 14px;
  color: var(--muted-strong);
  font-size: var(--text-ui);
  line-height: 1.55;
}

.lx-stop .lx-link {
  margin-top: auto;
}

/* "You are here": the first stop, or the one under the pointer or keyboard. */
.lx-stop.is-here .lx-stop-ask,
.lx-stop:hover .lx-stop-ask,
.lx-stop:focus-within .lx-stop-ask {
  border-color: var(--night-deep);
  background: var(--night-deep);
  color: #fff;
}

.lx-stop.is-here .lx-stop-ask svg,
.lx-stop:hover .lx-stop-ask svg,
.lx-stop:focus-within .lx-stop-ask svg {
  display: block;
}

.lx-stop.is-here .lx-stop-node,
.lx-stop:hover .lx-stop-node,
.lx-stop:focus-within .lx-stop-node {
  background: var(--stop);
  color: var(--stop-on);
  transform: scale(1.06);
}

/* Another stop pointed at: the first goes back to normal. */
.lx-stops:has(.lx-stop:hover, .lx-stop:focus-within) .lx-stop.is-here:not(:hover):not(:focus-within) .lx-stop-ask {
  border-color: var(--line-soft);
  background: #fff;
  color: var(--ink-strong);
}

.lx-stops:has(.lx-stop:hover, .lx-stop:focus-within) .lx-stop.is-here:not(:hover):not(:focus-within) .lx-stop-ask svg {
  display: none;
}

.lx-stops:has(.lx-stop:hover, .lx-stop:focus-within) .lx-stop.is-here:not(:hover):not(:focus-within) .lx-stop-node {
  background: #fff;
  color: var(--stop-ink);
  transform: none;
}

/* End of the line: the flag. */
.lx-line-end {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding-top: var(--line-ask);
}

.lx-line-end .lx-stop-node {
  --stop: var(--night-deep);
  --stop-tint: var(--purple-tint);
  margin-bottom: 24px;
  background: var(--night-deep);
  color: var(--join);
}

.lx-line-end strong {
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-ui-lead);
  font-weight: 700;
  line-height: 1.3;
}

.lx-line-end > span:last-child {
  color: var(--muted-ui);
  font-size: var(--text-ui-xs);
}

/* The guided-training line (Training Partners): a white strip across the bottom of the map. Light, not night, so the
   "Learn together" band below stays the only dark block here (two night blocks a gap apart read as stripes). */
.lx-guided {
  margin: 40px calc(var(--line-pad) * -1) 0;
  padding: 0 var(--line-pad) 34px;
  border-top: 1px solid var(--line-soft);
  background: #fff;
  color: var(--ink-strong);
}

.lx-guided-track {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--line-end);
  gap: var(--line-gap);
  height: 56px;
  margin-bottom: 8px;
}

/* Dashed, from under the first stop to the Training Partners pin. */
.lx-guided-track::before {
  content: "";
  position: absolute;
  left: calc(var(--line-node) / 2);
  right: calc(var(--line-end) - var(--line-node) / 2);
  top: 27px;
  border-top: 3px dashed rgba(79, 23, 168, .3);
}

.lx-guided-dots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--line-gap);
}

.lx-guided-dots i {
  position: relative;
  width: 16px;
  height: 16px;
  margin: 20px 0 0 calc(var(--line-node) / 2 - 8px);
  border: 3px solid var(--purple);
  border-radius: var(--radius-round);
  background: #fff;
}

.lx-guided-pin {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 6px 0 0 calc(var(--line-node) / 2 - 22px);
  border-radius: var(--radius-round);
  background: var(--night-deep);
  box-shadow: 0 0 0 6px var(--purple-tint);
  color: var(--join);
}

.lx-guided-pin svg {
  width: 22px;
  height: 22px;
}

.lx-guided-body {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}

.lx-guided h3 {
  margin: 8px 0 6px;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-ui-panel);
  font-weight: 700;
  line-height: 1.25;
}

.lx-guided p {
  max-width: 640px;
  margin: 0;
  color: var(--muted-strong);
  font-size: var(--text-ui);
  line-height: 1.55;
}

.lx-guided .pill-button {
  flex-shrink: 0;
  height: var(--ds-button-md);
  padding: 0 22px;
  font-size: var(--text-ui);
}

.lx-guided .pill-button svg {
  width: 16px;
  height: 16px;
}

@media (prefers-reduced-motion: reduce) {
  .lx-stop-ask,
  .lx-stop-node {
    transition: none;
  }

  .lx-stop:is(.is-here, :hover, :focus-within) .lx-stop-node {
    transform: none;
  }
}

/* PMI resources: two by two, the whole card is the link. A light shadow from the start, so the white cards stand
   apart from the white page (as the Training Partners cards). */
.lx-resources {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lx-resource {
  position: relative;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xl);
  background: #fff;
  box-shadow: 0 1px 2px rgba(23, 16, 48, .04), 0 10px 28px rgba(23, 16, 48, .06);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.lx-resource:hover {
  border-color: var(--line-control);
  box-shadow: var(--shadow-card);
}

/* Icons purple, cyan, orange, then night (as the Learning hero card's tiles). */
.lx-resource:nth-child(2) .lx-icon { background: var(--cyan-tint); color: var(--cyan-ink); }
.lx-resource:nth-child(3) .lx-icon { background: var(--orange-tint); color: var(--orange-deep); }
.lx-resource:nth-child(4):not(.lx-resource--internal) .lx-icon { background: var(--night-deep); color: var(--cyan-light); }

.lx-resource h3 {
  margin: 0;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-ui-step);
  font-weight: 700;
  line-height: 1.25;
}

.lx-resource h3 a {
  color: inherit;
  transition: color .15s ease;
}

/* The whole card opens the page. */
.lx-resource h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.lx-resource:hover h3 a {
  color: var(--purple);
}

.lx-resource h3 a:focus-visible {
  outline: none;
}

.lx-resource:has(h3 a:focus-visible) {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Learning overview: the four PMI resources in one row on wide screens (two on tablets), each card stacked: icon,
   title, text, then the link at the foot (UI/UX review: in two wide columns the short texts left half of each card
   empty). Phones keep the icon beside the text. */
@media (min-width: 768px) {
  .lx-resources--row .lx-resource {
    flex-direction: column;
    gap: 16px;
    padding: 26px;
  }

  .lx-resources--row .lx-resource-text {
    flex: 1;
  }

  .lx-resources--row .lx-resource .lx-link {
    margin-top: auto;
  }
}

@media (min-width: 1101px) {
  .lx-resources--row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Learning Resources, "Resources to keep close": the learning shelf. Four books standing on a board, each a cover
   (purple, cyan, orange, night) with a darker spine on the left and page edges on the right, slightly different
   heights, standing on the board's line; the Chapter's own book carries an orange ribbon. A book tilts out under the
   pointer. Tablets: two a row, each on its own ledge. Phones: lying flat in a stack, each a little offset. */
.lx-shelf {
  position: relative;
  padding: 0 28px;
}

.lx-books {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lx-book {
  --cover: var(--purple);
  --book-ink: #fff;
  --book-soft: rgba(255, 255, 255, .8);
  --book-chip: rgba(255, 255, 255, .16);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 312px;
  padding: 26px 30px 24px 40px;
  border-radius: 6px 16px 16px 6px;
  background: var(--cover);
  box-shadow: 0 18px 30px -18px rgba(26, 11, 69, .55);
  color: var(--book-ink);
  transition: transform .2s ease;
}

.lx-book:nth-child(2) { --cover: var(--cyan); --book-ink: var(--night-deep); --book-soft: rgba(26, 11, 69, .82); --book-chip: rgba(26, 11, 69, .1); min-height: 284px; }
.lx-book:nth-child(3) { --cover: var(--join); --book-ink: var(--night-deep); --book-soft: rgba(26, 11, 69, .82); --book-chip: rgba(26, 11, 69, .1); min-height: 326px; }
.lx-book:nth-child(4) { --cover: var(--night-deep); min-height: 296px; }

/* The spine: the cover darkened, with a highlight where it meets the cover. */
.lx-book::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 16px;
  border-radius: 6px 0 0 6px;
  background: linear-gradient(90deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, .22) 70%, rgba(255, 255, 255, .18));
}

/* Page edges, peeking out on the right. */
.lx-book::after {
  content: "";
  position: absolute;
  top: 10px;
  right: -6px;
  bottom: 6px;
  width: 6px;
  border-radius: 0 4px 4px 0;
  background: repeating-linear-gradient(180deg, #fff 0 2px, var(--purple-wash) 2px 3px);
  box-shadow: 1px 0 0 var(--line-control);
}

.lx-book:hover {
  transform: translateY(-12px) rotate(-1.5deg);
}

.lx-book-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-ui);
  background: var(--book-chip);
}

.lx-book-icon svg {
  width: 24px;
  height: 24px;
}

/* A rounded rectangle, not a pill, so a label that wraps on a narrow book keeps a clean shape. */
.lx-book-best {
  align-self: flex-start;
  margin-top: 6px;
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--book-chip);
  font-size: var(--text-ui-2xs);
  font-weight: 700;
  line-height: 1.35;
}

.lx-book h3 {
  margin: 4px 0 0;
  color: inherit;
  font-family: var(--font-display);
  font-size: var(--text-ui-step);
  font-weight: 700;
  line-height: 1.2;
}

.lx-book h3 a {
  color: inherit;
}

/* The whole book opens the resource. */
.lx-book h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

.lx-book h3 a:focus-visible {
  outline: none;
}

.lx-book:has(h3 a:focus-visible) {
  outline: 3px solid var(--focus-ring);
  outline-offset: 4px;
}

.lx-book p {
  margin: 0;
  color: var(--book-soft);
  font-size: var(--text-ui);
  line-height: 1.5;
}

.lx-book-go {
  margin-top: auto;
  font-size: var(--text-ui-sm);
  font-weight: 700;
}

.lx-book-ribbon {
  position: absolute;
  top: -6px;
  right: 28px;
  width: 22px;
  height: 52px;
  background: var(--join);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
}

/* The board, and its shadow on the wall. */
.lx-shelf-board {
  position: relative;
  height: 18px;
  margin: 0 -28px;
  border-radius: 6px;
  background: linear-gradient(180deg, #E9E2F6 0%, #D9CFEE 100%);
  box-shadow: 0 2px 0 #CFC3E8, 0 22px 30px -16px rgba(26, 11, 69, .35);
}

.lx-shelf-board::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 4%;
  left: 4%;
  height: 14px;
  background: linear-gradient(180deg, #D9CFEE, transparent);
  clip-path: polygon(2% 0, 98% 0, 100% 100%, 0 100%);
}

.lx-shelf-note {
  margin: 34px 0 0;
  color: var(--muted-ui);
  font-size: var(--text-ui-sm);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .lx-book {
    transition: none;
  }

  .lx-book:hover {
    transform: none;
  }
}

/* Small laptops: narrower books, so tighter covers and a "Best when…" label still on one line. */
@media (min-width: 1101px) and (max-width: 1280px) {
  .lx-books {
    gap: 22px;
  }

  .lx-book {
    padding: 24px 20px 22px 32px;
  }
}

@media (min-width: 768px) and (max-width: 1100px) {
  .lx-books {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 52px 34px;
  }

  .lx-book,
  .lx-book:nth-child(n) {
    min-height: 280px;
    box-shadow: 0 18px 30px -18px rgba(26, 11, 69, .55), 0 14px 0 -2px #DED5F1;
  }

  .lx-shelf-board {
    display: none;
  }
}

@media (max-width: 767px) {
  .lx-shelf {
    padding: 0;
  }

  .lx-books {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .lx-book,
  .lx-book:nth-child(n) {
    gap: 6px;
    min-height: 0;
    padding: 18px 22px 18px 34px;
    border-radius: 6px 14px 14px 6px;
  }

  .lx-book:nth-child(odd) {
    margin-right: 10px;
  }

  .lx-book:nth-child(even) {
    margin-left: 10px;
  }

  .lx-book::before {
    width: 14px;
  }

  /* Lying flat: the page edges show along the bottom. */
  .lx-book::after {
    top: auto;
    right: 10px;
    bottom: -5px;
    left: 18px;
    width: auto;
    height: 5px;
    border-radius: 0 0 4px 4px;
    background: repeating-linear-gradient(90deg, #fff 0 2px, var(--purple-wash) 2px 3px);
  }

  .lx-book:hover {
    transform: none;
  }

  .lx-book-icon,
  .lx-shelf-note {
    display: none;
  }

  .lx-book-best {
    margin: 0;
  }

  .lx-book h3 {
    font-size: var(--text-ui-lg);
  }

  .lx-book p {
    font-size: var(--text-ui-sm);
  }

  .lx-book-go {
    margin-top: 4px;
  }

  .lx-book-ribbon {
    right: 20px;
    height: 40px;
  }

  .lx-shelf-board {
    height: 12px;
    margin: 4px 0 0;
  }
}

.lx-resource {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 24px 26px;
}

.lx-resource-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.lx-resource-desc {
  color: var(--muted-strong);
  font-size: var(--text-ui);
  line-height: 1.55;
}

.lx-resource .lx-link {
  padding-top: 4px;
}

/* Learn together: deep-purple band. */
.lx-band {
  padding: 88px 0;
  background: var(--night-deep);
  color: #fff;
  font-family: var(--font-ui);
}

.lx-band-inner {
  width: min(var(--max-wide), calc(100% - 42px));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.lx-band .lx-label {
  color: var(--cyan-light);
}

.lx-band h2 {
  max-width: 760px;
  color: #fff;
}

.lx-band p {
  max-width: 720px;
  margin: 0;
  color: var(--on-purple);
  font-size: var(--text-ui-lg);
  line-height: 1.6;
}

.lx-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.lx-band .lx-actions {
  padding-top: 8px;
}

.lx-join {
  background: var(--join);
  color: var(--night-deep);
}

.lx-join:hover {
  background: var(--join-hover);
  color: var(--night-deep);
}

.lx-band :focus-visible {
  outline-color: var(--highlight);
}

/* Band as the page's last section (Talent Triangle): white space before the dark footer, so the two don't merge. */
main > .lx-band:last-child {
  margin-bottom: 96px;
}

/* Certifications: band with text beside the "Important" note. */
.lx-band-inner--split {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
  gap: 64px;
}

.lx-band-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.lx-note {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, .07);
}

.lx-note-title {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--cyan-light);
  font-size: var(--text-ui-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.lx-note-title svg {
  width: 20px;
  height: 20px;
}

.lx-band .lx-note p {
  font-size: var(--text-ui-md);
}

/* Learning overview band, nothing upcoming: the note's heading. */
.lx-band .lx-note .lx-note-heading {
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-ui-step);
  font-weight: 700;
  line-height: 1.3;
}

/* Learning overview band: the next two learning events, frosted rows on the night band (UI/UX review: the band's
   right half was empty). The whole row is the link. */
.lx-next {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lx-next-head {
  margin: 0;
  color: var(--cyan-light);
  font-family: var(--font-ui);
  font-size: var(--text-ui-2xs);
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.lx-next-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lx-next-event {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, .07);
  transition: background-color .15s ease, border-color .15s ease;
}

.lx-next-event:hover {
  border-color: rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .11);
}

/* Date tile: weekday, day, month and year (or TBC), as on the event cards. */
.lx-next-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 76px;
  padding: 8px 4px;
  border-radius: var(--radius-ui);
  background: #fff;
  color: var(--night-deep);
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
}

.lx-next-date span {
  font-size: var(--text-ui-3xs);
  letter-spacing: .06em;
}

.lx-next-date span:first-child {
  color: var(--purple);
}

.lx-next-date b {
  margin: 2px 0;
  font-family: var(--font-display);
  font-size: var(--text-ui-tile);
  line-height: 1;
}

.lx-next-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.lx-next-type {
  color: var(--cyan-light);
  font-size: var(--text-ui-2xs);
  font-weight: 700;
  letter-spacing: .04em;
}

.lx-next-event h4 {
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-ui-lead);
  font-weight: 700;
  line-height: 1.3;
}

.lx-next-event h4 a {
  color: inherit;
  transition: color .15s ease;
}

.lx-next-event h4 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.lx-next-event:hover h4 a {
  color: var(--cyan-light);
}

.lx-next-event h4 a:focus-visible {
  outline: none;
}

.lx-next-event:has(h4 a:focus-visible) {
  outline: 3px solid var(--highlight);
  outline-offset: 2px;
}

.lx-next-facts {
  color: var(--on-night);
  font-size: var(--text-ui-sm);
  line-height: 1.45;
}

.lx-next-go {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: var(--radius-round);
  color: #fff;
}

.lx-next-go svg {
  width: 16px;
  height: 16px;
}

@media (prefers-reduced-motion: reduce) {
  .lx-next-event,
  .lx-next-event h4 a {
    transition: none;
  }
}

/* Talent Triangle note: its title is a sentence, not a label. */
.lx-note-title--sentence {
  align-items: flex-start;
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-ui-lg);
  letter-spacing: normal;
  line-height: 1.35;
  text-transform: none;
}

.lx-note-title--sentence svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--cyan-light);
}

/* Talent Triangle hero card: the official diagram. */
.lx-diagram {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0;
  padding: 28px 28px 20px;
}

.lx-diagram img {
  display: block;
  width: 100%;
  height: auto;
}

.lx-diagram figcaption {
  margin-top: 12px;
  color: var(--muted-ui);
  font-family: var(--font-ui);
  font-size: var(--text-ui-2xs);
  text-align: center;
}

/* Chapter sessions: one row per event, the whole row is the link. */
.lx-section--soft {
  background: var(--surface-soft);
}

.lx-sessions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lx-session {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "when tags go" "title tags go";
  align-items: center;
  gap: 6px 24px;
  padding: 20px 24px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xl);
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.lx-session:hover {
  border-color: var(--line-control);
  box-shadow: var(--shadow-card);
}

.lx-session-when {
  grid-area: when;
  color: var(--muted-ui);
  font-size: var(--text-ui-2xs);
  font-weight: 700;
}

.lx-session-when.is-upcoming {
  color: var(--purple);
}

.lx-session h3 {
  grid-area: title;
  margin: 0;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-ui-lg);
  font-weight: 700;
  line-height: 1.3;
}

.lx-session h3 a {
  color: inherit;
  transition: color .15s ease;
}

.lx-session h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.lx-session:hover h3 a {
  color: var(--purple);
}

.lx-session h3 a:focus-visible {
  outline: none;
}

.lx-session:has(h3 a:focus-visible) {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.lx-tags {
  grid-area: tags;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.lx-tag {
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--purple-tint);
  color: var(--purple);
  font-size: var(--text-ui-2xs);
  font-weight: 700;
}

.lx-tag.is-ways { background: var(--cyan-tint); color: var(--cyan-ink); }
.lx-tag.is-power { background: var(--orange-tint); color: var(--orange-ink); }

.lx-session-go {
  grid-area: go;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-control);
  border-radius: var(--radius-round);
  color: var(--purple);
}

.lx-session-go svg {
  width: 16px;
  height: 16px;
}

/* Training Partners hero card: the directory at a glance. */
.lx-glance {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  max-width: 520px;
  padding: 36px;
  color: var(--ink-strong);
  font-family: var(--font-ui);
}

.lx-glance p {
  margin: 0;
}

/* The count in a ring: one segment per listed partner, purple, cyan and orange in turn. */
.lx-glance-figure {
  display: flex;
  align-items: center;
  gap: 22px;
}

.lx-glance-ring {
  position: relative;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 136px;
  height: 136px;
}

.lx-glance-ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-2deg);
}

.lx-glance-ring .is-purple { color: var(--purple); }
.lx-glance-ring .is-cyan { color: var(--highlight); }
.lx-glance-ring .is-orange { color: var(--join); }

.lx-glance-ring b {
  position: relative;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: var(--radius-round);
  background: var(--purple);
  box-shadow: var(--shadow-button);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-ui-tile-xl);
  font-weight: 700;
  line-height: 1;
}

.lx-glance-figure p {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lx-glance-figure strong {
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-ui-lg);
  font-weight: 700;
  line-height: 1.3;
}

.lx-glance-figure p span {
  color: var(--muted-ui);
  font-size: var(--text-ui-sm);
  line-height: 1.5;
}
.lx-glance-updated {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted-ui);
  font-size: var(--text-ui-sm);
  font-weight: 700;
}

.lx-glance-updated svg {
  width: 18px;
  height: 18px;
  color: var(--purple);
}

.lx-glance-note {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}

.lx-glance-note strong {
  color: var(--ink-strong);
  font-size: var(--text-ui-sm);
  font-weight: 700;
}

.lx-glance-note p {
  color: var(--muted-strong);
  font-size: var(--text-ui-sm);
  line-height: 1.55;
}

/* Training Partners directory: two cards per row. */
.lx-atps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

/* A light shadow from the start, so the white cards stand apart from the white page (UI/UX review: too light). */
.lx-atp {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xl);
  background: #fff;
  box-shadow: 0 1px 2px rgba(23, 16, 48, .04), 0 10px 28px rgba(23, 16, 48, .06);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.lx-atp:hover {
  border-color: var(--line-control);
  box-shadow: var(--shadow-card);
}

/* Card header: a soft violet band across the top, separated from the name by a thin line, so each card has a clear
   head instead of a logo floating on white. The logo is blended into the band (multiply): a logo file's white
   background or blank margins disappear, and its colours stay as they are. Logos up to 240 × 60px. */
.lx-atp-logo {
  display: flex;
  align-items: center;
  min-height: 104px;
  margin: -28px -28px 10px;
  padding: 20px 28px;
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(120deg, var(--purple-wash-hover) 0%, var(--purple-wash) 60%, #fbfaff 100%);
}

.lx-atp-logo img {
  width: auto;
  max-width: 240px;
  height: auto;
  max-height: 60px;
  mix-blend-mode: multiply;
  object-fit: contain;
}

.lx-atp h3 {
  margin: 0;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-ui-step);
  font-weight: 700;
  line-height: 1.25;
}

.lx-atp h3 a {
  color: inherit;
  transition: color .15s ease;
}

.lx-atp h3 a:hover {
  color: var(--purple);
}

.lx-atp-location {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--muted-ui);
  font-size: var(--text-ui-sm);
  font-weight: 700;
}

.lx-atp-location svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--purple);
}

/* "Prepares for": the PMI certifications the provider prepares for, as chips. */
.lx-atp-certs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

.lx-atp-certs-label {
  color: var(--muted-strong);
  font-size: var(--text-ui-2xs);
  font-weight: 700;
}

.lx-atp-certs ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lx-atp-certs li {
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: var(--purple-tint-ui);
  color: var(--purple);
  font-size: var(--text-ui-2xs);
  font-weight: 700;
}

.lx-atp-desc {
  margin: 0;
  color: var(--muted-strong);
  font-size: var(--text-ui);
  line-height: 1.55;
}

.lx-atp-contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 6px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--line-soft);
}

.lx-atp-contact div {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 12px;
}

.lx-atp-contact dt {
  color: var(--muted-ui);
  font-size: var(--text-ui-xs);
  font-weight: 700;
}

.lx-atp-contact dd {
  margin: 0;
  min-width: 0;
  color: var(--ink-strong);
  font-size: var(--text-ui-sm);
  overflow-wrap: anywhere;
}

.lx-atp-contact dd a {
  color: var(--purple);
  font-weight: 700;
}

.lx-atp-site {
  margin-top: auto;
  padding-top: 10px;
}

/* Folded cards: three lines of description, then "Contact details" opens the
   contacts (and the full description). Cards keep their own height when one
   opens, so a neighbour doesn't stretch. */
.lx-atps {
  align-items: start;
}

.lx-atp-desc {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.lx-atp:has(.lx-atp-more[open]) .lx-atp-desc {
  display: block;
}

.lx-atp-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4px 16px;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}

/* A full-height tap area (an inline link was only as tall as its text). */
.lx-atp-foot .lx-atp-site {
  display: inline-flex;
  align-items: center;
  min-height: var(--ds-button-sm);
  margin-top: 0;
  padding-top: 0;
}

.lx-atp-more {
  flex: 1 1 auto;
}

.lx-atp-more summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--ds-button-sm);
  padding: 0 14px;
  border: 1px solid var(--line-control);
  border-radius: var(--radius-pill);
  color: var(--ink-strong);
  font-size: var(--text-ui-sm);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  transition: border-color .15s ease, color .15s ease;
}

.lx-atp-more summary::-webkit-details-marker {
  display: none;
}

.lx-atp-more summary:hover {
  border-color: var(--purple);
  color: var(--purple);
}

.lx-atp-more summary:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.lx-atp-more summary svg {
  width: 16px;
  height: 16px;
  color: var(--purple);
  transition: transform .2s ease;
}

.lx-atp-more[open] summary svg {
  transform: rotate(180deg);
}

.lx-atp-more-open,
.lx-atp-more[open] .lx-atp-more-closed {
  display: none;
}

.lx-atp-more[open] .lx-atp-more-open {
  display: inline;
}

.lx-atp-more .lx-atp-contact {
  margin: 14px 0 4px;
  padding: 0;
  border-top: 0;
}

@media (prefers-reduced-motion: reduce) {
  .lx-atp-more summary svg {
    transition: none;
  }
}

.lx-empty {
  margin: 0;
  padding: 36px;
  border: 1.5px dashed var(--line-control);
  border-radius: var(--radius-xl);
  color: var(--muted-strong);
  font-size: var(--text-ui-md);
  text-align: center;
}

.lx-empty a {
  color: var(--purple);
  font-weight: 700;
}

/* Closing panel with two stacked buttons (Training Partners). */
.lx-cta .lx-actions--stack {
  flex-direction: column;
  min-width: 260px;
}

.lx-actions--stack .pill-button {
  justify-content: center;
}

/* A single wide card (Member milestones). */
.lx-resources--single {
  grid-template-columns: minmax(0, 1fr);
}

/* FAQs (the Membership page's design). */
.lx-faq {
  padding: 96px 0;
  background: var(--surface-soft);
  color: var(--ink-strong);
  font-family: var(--font-ui);
}

.lx-section + .lx-faq {
  background: #fff;
  padding-top: 0;
}

/* Claim your PDUs (Certifications & PDUs, #claim-pdus): "From event page to CCRS", a copy-across map. Left, the
   event's ticket (night, perforated, an orange "Your PDUs" stub) with the four details lettered A–D; an arrow; right,
   the claim in CCRS as an illustration (no PMI logo or branding): the shared steps, each with the lettered fields it
   fills. Then the actions and note. Up to 1000px the ticket sits above the claim, the arrow pointing down. */
.lx-claim + .lx-section {
  padding-top: 0;
}

.lx-cmap {
  --cmap-bg: var(--purple-wash-hover); /* Solid, so the ticket's notches match it. */
  display: grid;
  grid-template-columns: minmax(0, .9fr) 86px minmax(0, 1.15fr);
  align-items: center;
  padding: 40px;
  border: 1px solid var(--line-soft);
  border-radius: var(--ds-radius-lg);
  background: var(--cmap-bg);
}

.lx-cmap-cap {
  display: block;
  margin: 0 0 12px;
  color: var(--muted-ui);
  font-size: var(--text-ui-2xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* The lettered keys, on the ticket and the fields alike. */
.lx-key {
  --key: var(--highlight);
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--key);
  color: var(--night-deep);
  font-family: var(--font-display);
  font-size: var(--text-ui-2xs);
  font-weight: 700;
  line-height: 1;
}

.lx-key.is-b { --key: #C9B6F2; }
.lx-key.is-c { --key: var(--join); }
.lx-key.is-d { --key: #fff; }

/* The ticket. */
.lx-ticket {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px;
  border-radius: 18px;
  background: var(--night-deep);
  box-shadow: 0 22px 40px -22px rgba(26, 11, 69, .7);
  color: #fff;
}

/* Notches where the stub tears off. */
.lx-ticket::before,
.lx-ticket::after {
  content: "";
  position: absolute;
  right: 45px;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-round);
  background: var(--cmap-bg);
}

.lx-ticket::before { top: -9px; }
.lx-ticket::after { bottom: -9px; }

.lx-ticket-main {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 24px 24px 22px;
}

.lx-ticket-tag {
  align-self: flex-start;
  padding: 3px 9px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .14);
  color: var(--cyan-light);
  font-size: var(--text-ui-3xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.lx-section .lx-ticket h3 {
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-ui-lg);
  line-height: 1.3;
}

.lx-ticket h3 a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .35);
  text-underline-offset: 3px;
}

.lx-ticket h3 a:hover {
  text-decoration-color: var(--cyan-light);
}

.lx-section .lx-ticket h3 a:focus-visible {
  outline-color: var(--highlight);
}

.lx-ticket-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}

.lx-ticket-rows > div {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: 10px;
}

.lx-ticket-rows dt {
  display: contents;
  color: var(--on-night);
  font-size: var(--text-ui-2xs);
}

.lx-ticket-rows dt .lx-key {
  grid-row: 1 / span 2;
}

.lx-ticket-rows dd {
  grid-column: 2;
  margin: 2px 0 0;
  color: #fff;
  font-size: var(--text-ui);
  font-weight: 700;
}

.lx-ticket-rows dd code {
  padding: 2px 8px;
  border-radius: 6px;
  background: #fff;
  color: var(--night-deep);
  font-size: var(--text-ui-sm);
  letter-spacing: .04em;
  user-select: all;
}

.lx-ticket-rows .is-placeholder {
  color: var(--on-night);
  font-style: italic;
  font-weight: 600;
}

.lx-ticket-split {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px !important;
}

.lx-ticket-split span {
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-size: var(--text-ui-2xs);
  font-weight: 700;
}

.lx-ticket-split .is-ways { background: rgba(18, 194, 233, .18); color: var(--cyan-light); }
.lx-ticket-split .is-power { background: rgba(255, 122, 26, .2); color: #FFC49A; }
.lx-ticket-split .is-acumen { background: rgba(201, 182, 242, .22); color: #DCCEFA; }

.lx-ticket-stub {
  display: grid;
  place-items: center;
  border-left: 2px dashed rgba(26, 11, 69, .5);
  border-radius: 0 18px 18px 0;
  background: var(--join);
}

.lx-ticket-stub span {
  color: var(--night-deep);
  font-family: var(--font-display);
  font-size: var(--text-ui-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  transform: rotate(180deg);
  writing-mode: vertical-rl;
}

/* The arrow between. */
.lx-cmap-bridge {
  display: grid;
  place-items: center;
  gap: 8px;
  color: var(--purple);
  text-align: center;
}

.lx-cmap-bridge svg {
  width: 54px;
  height: 54px;
}

.lx-cmap-bridge small {
  color: var(--muted-ui);
  font-size: var(--text-ui-2xs);
  font-weight: 700;
  line-height: 1.3;
}

/* The claim, as an illustration. */
.lx-cform {
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-card), 0 1px 2px rgba(23, 16, 48, .05);
}

.lx-cform-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface-soft);
  color: var(--muted-ui);
  font-size: var(--text-ui-2xs);
  font-weight: 700;
}

.lx-cform-bar i {
  width: 9px;
  height: 9px;
  border-radius: var(--radius-round);
  background: var(--line-control);
}

.lx-cform-bar span {
  margin-left: 6px;
}

.lx-cform-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lx-cform-steps li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line-soft);
}

.lx-cform-steps li:last-child {
  border-bottom: 0;
}

.lx-claim-n {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-round);
  background: var(--purple);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-ui-md);
  font-weight: 700;
}

.lx-cform-steps li:nth-child(2) .lx-claim-n { background: var(--highlight); color: var(--night-deep); }
.lx-cform-steps li:nth-child(3) .lx-claim-n { background: var(--join); color: var(--night-deep); }

.lx-section .lx-cform-steps h3 {
  margin: 6px 0 4px;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-ui-lg);
  line-height: 1.3;
}

.lx-cform-steps p {
  margin: 0 0 10px;
  color: var(--muted-strong);
  font-size: var(--text-ui);
  line-height: 1.55;
}

.lx-cfields {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lx-cfield {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 10px 0 6px;
  border: 1.5px dashed var(--line-control);
  border-radius: 9px;
  color: var(--muted-ui);
  font-size: var(--text-ui-xs);
  font-weight: 600;
}

.lx-cfield .lx-key {
  width: 22px;
  height: 22px;
}

.lx-cfield .lx-key.is-d {
  background: var(--night-deep);
  color: #fff;
}

.lx-cfield.is-done {
  padding: 0 12px;
  border-style: solid;
  border-color: #CDEBD9;
  background: #F2FBF5;
  color: #1F6B43;
}

/* One "PDUs per pillar" field instead of three on narrow screens. */
.lx-cfield.is-pillars {
  display: none;
}

/* The buttons, then the note right under them as a small callout (UI/UX review: floated 400px to the right in
   14px, the note's advice read as separate from the steps). */
.lx-claim-foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-top: 28px;
}

.lx-claim-foot .lx-actions {
  margin: 0;
}

.lx-claim-note {
  max-width: 720px;
  margin: 0;
  padding: 12px 16px;
  border-left: 3px solid var(--purple);
  border-radius: 0 var(--radius-ui) var(--radius-ui) 0;
  background: var(--purple-wash-hover);
  color: var(--muted-ui);
  font-size: var(--text-ui);
  line-height: 1.55;
}

.lx-claim-note a {
  color: var(--purple);
  font-weight: 700;
}

@media (max-width: 1000px) {
  .lx-cmap {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 24px;
  }

  .lx-cmap-bridge {
    grid-auto-flow: column;
    justify-content: start;
    gap: 10px;
  }

  .lx-cmap-bridge svg {
    width: 34px;
    height: 34px;
    transform: rotate(90deg);
  }

  .lx-cmap-bridge small br {
    display: none;
  }
}

@media (max-width: 767px) {
  .lx-cmap {
    margin: 0 -6px;
    padding: 16px;
    border-radius: var(--radius-xl);
  }

  .lx-ticket-main {
    padding: 18px;
  }

  .lx-ticket-stub {
    width: 44px;
  }

  .lx-ticket {
    grid-template-columns: minmax(0, 1fr) 44px;
  }

  .lx-ticket::before,
  .lx-ticket::after {
    right: 35px;
  }

  .lx-cform-steps li {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    padding: 16px;
  }

  .lx-claim-n {
    width: 34px;
    height: 34px;
    font-size: var(--text-ui-sm);
  }

  .lx-section .lx-cform-steps h3 {
    margin-top: 4px;
    font-size: var(--text-ui-md);
  }

  .lx-cform-steps p {
    font-size: var(--text-ui-sm);
  }

  .lx-cfield.is-pillar {
    display: none;
  }

  .lx-cfield.is-pillars {
    display: inline-flex;
  }
}

.lx-faq-inner {
  width: min(var(--max-wide), calc(100% - 42px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  align-items: start;
  gap: 72px;
}

.lx-faq-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lx-faq h2 {
  margin: 0;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-section);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.lx-faq-list {
  border-top: 1px solid var(--line-soft);
}

.lx-faq-item {
  border-bottom: 1px solid var(--line-soft);
}

.lx-faq-item summary {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-ui-xl);
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}

.lx-faq-item summary::-webkit-details-marker {
  display: none;
}

.lx-faq-item summary:hover .lx-faq-q {
  color: var(--purple);
}

.lx-faq-item summary:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: none;
}

.lx-faq-sign {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-round);
  background: var(--purple-tint-ui);
  color: var(--purple);
  font-family: var(--font-ui);
  font-size: var(--text-ui-lg);
  font-weight: 600;
  line-height: 1;
  transition: background-color .15s ease, color .15s ease;
}

.lx-faq-sign::before {
  content: "+";
}

.lx-faq-item[open] .lx-faq-sign {
  background: var(--purple);
  color: #fff;
}

.lx-faq-item[open] .lx-faq-sign::before {
  content: "\2212";
}

.lx-faq-item p {
  margin: 0;
  padding: 0 60px 24px 0;
  color: var(--muted-ui);
  font-size: var(--text-ui-md);
  line-height: 1.65;
}

.lx-faq-item p a {
  color: var(--purple);
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .lx-faq-sign {
    transition: none;
  }
}

/* Closing panel (the Community and News pages' closing call to action). */
.lx-cta {
  padding: 0 0 96px;
  background: #fff;
  font-family: var(--font-ui);
}

/* After the resources section (white), its bottom padding is the gap; after the band it needs its own. */
.lx-band + .lx-cta {
  padding-top: 96px;
}

.lx-cta-panel {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 64px;
  padding: 64px;
  border-radius: var(--radius-card);
  background: var(--purple-wash-hover);
}

.lx-cta-panel .page-blur {
  filter: blur(80px);
}

.lx-cta-panel .page-blur.is-violet {
  left: -40px;
  right: auto;
  top: -60px;
  width: 320px;
  height: 320px;
  opacity: .45;
}

.lx-cta-panel .page-blur.is-orange {
  right: 120px;
  top: auto;
  bottom: -120px;
  width: 320px;
  height: 320px;
  opacity: .35;
}

.lx-cta-text {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 700px;
}

.lx-cta h2 {
  font-size: var(--text-cta);
  line-height: 1.2;
}

.lx-cta-text p {
  margin: 0;
  color: var(--muted-ui);
  font-size: var(--text-ui-md);
  line-height: 1.6;
}

.lx-cta .lx-actions {
  position: relative;
  flex-shrink: 0;
}

/* Certifications hero card: the route as a cycle. A ring of three coloured
   arcs with arrows (purple, cyan, orange: the three steps) and a numbered node
   on each, the medal at the centre; a legend with the step titles beside it. */
.lx-cycle {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--ink-strong);
  font-family: var(--font-ui);
}

.lx-cycle h2 {
  margin: 0;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-ui-xl);
  font-weight: 700;
  line-height: 1.3;
}

.lx-cycle-body {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  align-items: center;
  gap: 26px;
  margin-top: 14px;
}

.lx-cycle-ring {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.lx-cycle .is-purple { color: var(--purple); }
.lx-cycle .is-cyan { color: var(--cyan-ink); }
.lx-cycle .is-orange { color: var(--orange-deep); }

.lx-cycle-track {
  stroke: var(--line-soft);
  stroke-width: 10;
}

.lx-cycle-ring text {
  fill: #fff;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
}

.lx-cycle-core {
  fill: var(--purple-tint);
}

.lx-cycle-medal {
  color: var(--purple);
}

.lx-cycle-legend {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lx-cycle-legend li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-ui-md);
  font-weight: 700;
  line-height: 1.3;
}

/* Numbered dot in the step's colour (the li's color), number in white. */
.lx-cycle-dot {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-round);
  background: currentColor;
  font-size: var(--text-ui-sm);
  -webkit-text-fill-color: #fff; /* White number; color stays the step's, for the background. */
}

.lx-cycle-legend li > span:last-child {
  color: var(--ink-strong);
}
/* Hero cards: the Membership page's "How to join" card measures (glass-card
   padding 32px and max width 540px; 12px label; 40px step markers; Sora 18px
   step titles; 14px muted step text). Last before Responsive, so it wins. */
.lx-map,
.lx-steps-card,
.lx-steps-card--route,
.lx-cycle,
.lx-glance,
.lx-diagram {
  max-width: 540px;
  padding: 32px;
}

.lx-diagram {
  padding-bottom: 24px;
}

.glass-card .lx-label {
  font-size: var(--text-ui-2xs);
  line-height: 1.4;
}

.lx-steps-card--route .lx-route {
  margin-top: 4px;
}

.lx-steps-card--route .lx-route li {
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 16px;
  padding-bottom: 10px;
}

.lx-steps-card--route .lx-route li:last-child {
  padding-bottom: 0;
}

.lx-steps-card--route .lx-route li:not(:last-child)::before {
  left: 19px;
  top: 52px;
}

.lx-steps-card--route .lx-route-node {
  width: 40px;
  height: 40px;
  margin-top: 8px;
}

.lx-steps-card--route .lx-route-step strong,
.lx-step-text strong {
  font-family: var(--font-display);
  font-size: var(--text-ui-lg);
  line-height: 1.3;
}

.lx-steps-card--route .lx-route-step > span:last-child,
.lx-step-text span {
  color: var(--muted-ui);
  font-size: var(--text-ui-sm);
  line-height: 1.55;
}
/* Responsive ------------------------------------------------------------------ */
@media (max-width: 1100px) {
  /* The learning line runs down the left: node, then the question, title, text and link beside it. */
  .lx-line {
    --line-pad: 32px;
    --line-node: 62px;
    padding-top: 32px;
  }

  .lx-line-route,
  .lx-stops {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }

  .lx-line-route::before {
    left: calc(var(--line-node) / 2 - 4px);
    right: auto;
    top: calc(var(--line-node) / 2);
    bottom: calc(var(--line-node) / 2);
    width: 8px;
    height: auto;
    background: linear-gradient(180deg, var(--purple) 0%, var(--cyan) 38%, var(--join) 72%);
  }

  .lx-stop {
    display: grid;
    grid-template-columns: var(--line-node) minmax(0, 1fr);
    align-items: start;
    justify-items: start;
    column-gap: 18px;
  }

  .lx-stop-node {
    grid-column: 1;
    grid-row: 1 / span 4;
    border-width: 5px;
    box-shadow: 0 0 0 6px var(--stop-tint);
  }

  .lx-stop-node svg {
    width: 22px;
    height: 22px;
  }

  .lx-stop-ask {
    grid-column: 2;
    height: 30px;
    margin: 0 0 8px;
  }

  .lx-stop-ask.is-empty {
    display: none;
  }

  .lx-stop h3,
  .lx-stop p,
  .lx-stop .lx-link {
    grid-column: 2;
  }

  .lx-stop h3 {
    margin: 0 0 6px;
  }

  .lx-stop p {
    max-width: 640px;
    margin-bottom: 8px;
  }

  .lx-line-end {
    display: grid;
    grid-template-columns: var(--line-node) minmax(0, 1fr);
    align-items: center;
    column-gap: 18px;
    padding-top: 0;
  }

  .lx-line-end .lx-stop-node {
    grid-row: 1 / span 2;
    margin-bottom: 0;
  }

  .lx-line-end strong,
  .lx-line-end > span:last-child {
    grid-column: 2;
  }

  .lx-line-end strong {
    align-self: end;
  }

  .lx-line-end > span:last-child {
    align-self: start;
  }

  .lx-guided {
    margin-top: 30px;
    padding-top: 26px;
  }

  .lx-guided-track {
    display: none;
  }

  /* The dashed line stays as a mark before the label. */
  .lx-guided .lx-label::before {
    content: "";
    display: inline-block;
    width: 28px;
    margin-right: 8px;
    border-top: 3px dashed rgba(79, 23, 168, .35);
    vertical-align: middle;
  }

  .lx-guided-body {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .lx-band-inner--split,
  .lx-faq-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .lx-cta .lx-actions--stack {
    flex-direction: row;
    min-width: 0;
  }

  .lx-cta-panel {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
    padding: 48px;
  }
}

@media (max-width: 767px) {
  .lx-hero-actions,
  .lx-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    width: 100%;
  }

  .lx-map {
    gap: 10px;
    padding: 22px;
    border-radius: var(--radius-xl);
  }

  .lx-map h2 {
    font-size: var(--text-ui-tile-sm);
  }

  .lx-map-tiles {
    gap: 10px;
  }

  .lx-map-tile a {
    gap: 6px;
    padding: 16px 16px 14px;
  }

  .lx-map-tile b {
    font-size: var(--text-ui-tile-lg);
  }

  .lx-map-tile span {
    font-size: var(--text-ui-sm);
  }

  .lx-map-tile svg {
    right: 12px;
    bottom: 14px;
  }

  .lx-steps-card {
    gap: 10px;
    padding: 22px;
    border-radius: var(--radius-xl);
  }

  .lx-steps-card h2 {
    font-size: var(--text-ui-tile-sm);
  }

  .lx-steps-card > p,
  .lx-step-text strong {
    font-size: var(--text-ui-sm);
  }

  .lx-step-text span {
    font-size: var(--text-ui-xs);
  }

  .lx-steps {
    gap: 12px;
    padding-top: 14px;
  }

  .lx-route li {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    padding-bottom: 12px;
  }

  .lx-route li:not(:last-child)::before {
    left: 18px;
    top: 44px;
  }

  .lx-route-node {
    width: 38px;
    height: 38px;
    box-shadow: 0 0 0 4px var(--step-tint);
  }

  .lx-route-node svg {
    width: 18px;
    height: 18px;
  }

  .lx-route-step {
    padding: 12px 14px;
  }

  .lx-steps-card--route .lx-route-step {
    padding: 10px 12px;
  }

  .lx-route-step strong {
    font-size: var(--text-ui-sm);
  }

  .lx-route-step > span:last-child {
    font-size: var(--text-ui-xs);
  }

  .lx-section {
    padding: 40px 0;
  }

  .lx-head {
    gap: 12px;
    margin-bottom: 20px;
  }

  /* Phones: labels 12px and section intros 15px (UI/UX review: 11px / 14px were too small). */
  .lx-label {
    font-size: var(--text-ui-2xs);
  }

  .lx-section h2,
  .lx-band h2 {
    font-size: var(--text-section-sm);
  }

  .lx-head p,
  .lx-band p {
    font-size: var(--text-ui);
  }

  .lx-resources {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .lx-icon {
    width: 42px;
    height: 42px;
  }

  .lx-resource h3 {
    font-size: var(--text-ui-lg);
  }

  .lx-resource-desc {
    font-size: var(--text-ui-sm);
  }

  .lx-line {
    --line-pad: 20px;
    --line-node: 56px;
    padding-top: 24px;
    border-radius: var(--radius-xl);
  }

  .lx-stops {
    gap: 26px;
  }

  .lx-stop,
  .lx-line-end {
    column-gap: 14px;
  }

  /* A long question may wrap to a second line. */
  .lx-stop-ask {
    height: auto;
    min-height: 30px;
    padding: 5px 12px;
    font-size: var(--text-ui-2xs);
    line-height: 1.3;
    white-space: normal;
  }

  .lx-stop-node b {
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
  }

  .lx-stop h3 {
    font-size: var(--text-ui-lg);
  }

  .lx-stop p {
    font-size: var(--text-ui-sm);
  }

  .lx-guided h3 {
    font-size: var(--text-ui-step);
  }

  .lx-guided p {
    font-size: var(--text-ui-sm);
  }

  .lx-guided .pill-button {
    justify-content: center;
    width: 100%;
  }

  .lx-resource {
    gap: 14px;
    padding: 18px;
  }

  .lx-band {
    padding: 40px 0;
  }

  main > .lx-band:last-child {
    margin-bottom: 44px;
  }

  .lx-diagram {
    padding: 18px 18px 14px;
    border-radius: var(--radius-xl);
  }

  .lx-glance {
    gap: 14px;
    padding: 22px;
    border-radius: var(--radius-xl);
  }

  .lx-glance-figure {
    gap: 16px;
  }

  .lx-glance-ring {
    width: 108px;
    height: 108px;
  }

  .lx-glance-ring b {
    width: 62px;
    height: 62px;
    font-size: var(--text-ui-tile-lg);
  }

  .lx-glance-figure strong {
    font-size: var(--text-ui-md);
  }

  .lx-glance-figure p span {
    font-size: var(--text-ui-xs);
  }

  .lx-glance-note {
    padding-top: 14px;
  }

  .lx-glance-note p {
    font-size: var(--text-ui-xs);
  }

  .lx-atps {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .lx-atp {
    gap: 8px;
    padding: 20px;
  }

  .lx-atp-logo {
    min-height: 84px;
    margin: -20px -20px 8px;
    padding: 14px 20px;
  }

  .lx-atp-logo img {
    max-width: 200px;
    max-height: 48px;
  }

  .lx-atp h3 {
    font-size: var(--text-ui-lg);
  }

  .lx-atp-desc {
    font-size: var(--text-ui-sm);
  }

  .lx-atp-contact div {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .lx-cta .lx-actions--stack {
    flex-direction: column;
  }

  .lx-empty {
    padding: 24px;
    font-size: var(--text-ui-sm);
  }

  .lx-session {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "when go" "title go" "tags go";
    gap: 6px 14px;
    padding: 16px 18px;
  }

  .lx-session h3 {
    font-size: var(--text-ui-md);
  }

  .lx-tags {
    justify-content: flex-start;
    padding-top: 4px;
  }

  .lx-note-title--sentence {
    font-size: var(--text-ui-md);
  }

  .lx-band-inner--split {
    gap: 24px;
  }

  .lx-band-text {
    gap: 10px;
  }

  .lx-note {
    gap: 8px;
    padding: 20px;
  }

  /* The uppercase label only: the sentence title keeps its own size. */
  .lx-note-title:not(.lx-note-title--sentence) {
    font-size: var(--text-ui-2xs);
  }

  .lx-band .lx-note p {
    font-size: var(--text-ui-sm);
  }

  .lx-faq {
    padding: 40px 0;
  }

  .lx-section + .lx-faq {
    padding-top: 0;
  }

  .lx-faq-inner {
    gap: 14px;
  }

  .lx-faq h2 {
    font-size: var(--text-section-sm);
  }

  .lx-faq-item summary {
    min-height: 64px;
    gap: 12px;
    font-size: var(--text-ui-md);
  }

  .lx-faq-sign {
    width: 32px;
    height: 32px;
  }

  .lx-faq-item p {
    padding: 0 0 18px;
    font-size: var(--text-ui-sm);
    line-height: 1.6;
  }

  .lx-band-inner {
    gap: 10px;
  }

  .lx-cta {
    padding: 0 0 44px;
  }

  .lx-band + .lx-cta {
    padding-top: 40px;
  }

  .lx-cta-panel {
    gap: 18px;
    padding: 28px 22px;
    border-radius: var(--radius-xl);
  }

  .lx-cta-panel .page-blur {
    filter: blur(60px);
  }

  .lx-cta-text p {
    font-size: var(--text-ui);
  }

  /* Hero cards: the Membership card's phone measures. */
  .lx-map,
  .lx-steps-card,
  .lx-steps-card--route,
  .lx-cycle,
  .lx-glance,
  .lx-diagram {
    padding: 24px;
    border-radius: var(--radius-xl);
  }

  .glass-card .lx-label {
    font-size: var(--text-ui-2xs);
  }

  .lx-steps-card--route .lx-route li {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
  }

  .lx-steps-card--route .lx-route li:not(:last-child)::before {
    left: 16px;
    top: 46px;
  }

  .lx-steps-card--route .lx-route-node {
    width: 34px;
    height: 34px;
    box-shadow: 0 0 0 4px var(--step-tint);
  }

  .lx-steps-card--route .lx-route-node svg {
    width: 16px;
    height: 16px;
  }

  .lx-steps .lx-icon {
    width: 34px;
    height: 34px;
  }

  .lx-cycle h2 {
    font-size: var(--text-ui-md);
  }

  /* The graphic above the steps, so the step names keep a full line. */
  .lx-cycle-body {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 18px;
    margin-top: 10px;
  }

  .lx-cycle-ring {
    max-width: 170px;
  }

  .lx-cycle-legend {
    justify-self: stretch;
  }

  .lx-cycle-legend {
    gap: 12px;
  }

  .lx-cycle-legend li {
    font-size: var(--text-ui-sm);
  }

  .lx-cycle-dot {
    font-size: var(--text-ui-xs);
  }

  .lx-cycle-legend li {
    gap: 10px;
  }

  .lx-cycle-dot {
    width: 26px;
    height: 26px;
  }

  .lx-steps .lx-icon svg {
    width: 16px;
    height: 16px;
  }

  .lx-steps-card--route .lx-route-step strong,
  .lx-step-text strong {
    font-size: var(--text-ui-md);
  }

  .lx-steps-card--route .lx-route-step > span:last-child,
  .lx-step-text span {
    font-size: var(--text-ui-xs);
    line-height: 1.5;
  }
}

/* Tablets and small laptops, Learning overview: the hero stacks here (newsletters.css, up to 1180px), so the "at a
   glance" card spans the width with its four tiles in one row, and the text loses the side-by-side layout's top
   space (UI/UX review: at 820px the 540px card left a 240px empty strip and the hero was 983px tall). */
@media (min-width: 768px) and (max-width: 1180px) {
  .nlx-hero-grid:has(.lx-map) .nlx-hero-text {
    padding-top: 0;
  }

  .lx-map {
    max-width: none;
  }

  .lx-map-tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Phones, Learning overview (last, so it wins over the hero cards' phone measures above). The "at a glance" card as
   a compact list, one row per figure (UI/UX review: as a 2 × 2 grid it was about 400px tall and pushed "Choose the
   path" below the first screen); its heading stays for screen readers. The band's event rows without the arrow. */
@media (max-width: 767px) {
  .lx-map {
    gap: 10px;
    padding: 18px 18px 16px;
  }

  .lx-map h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .lx-map-tiles {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .lx-map-tile a {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 8px 40px 8px 14px;
    border-radius: var(--radius-ui);
  }

  .lx-map-tile b {
    flex-shrink: 0;
    min-width: 32px;
    font-size: var(--text-ui-tile);
  }

  .lx-map-tile span {
    padding-right: 0;
    font-size: var(--text-ui-sm);
  }

  .lx-map-tile svg {
    top: 50%;
    right: 14px;
    bottom: auto;
    transform: translateY(-50%);
  }

  .lx-next-event {
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 14px;
    padding: 14px;
  }

  .lx-next-go {
    display: none;
  }

  .lx-next-date {
    min-height: 66px;
  }

  .lx-next-date b {
    font-size: var(--text-ui-tile-sm);
  }

  .lx-next-event h4 {
    font-size: var(--text-ui-md);
  }

  /* Learning Resources: the "simple route forward" card as a compact route, the three step titles only (UI/UX
     review: with their texts it was 452px tall, pushing "Resources to keep close" below the first screen, in 13px
     text, with small inline links; certifications & PDUs are one tap away on the hero button). */
  .lx-steps-card--route {
    gap: 8px;
    padding: 18px 18px 16px;
  }

  .lx-steps-card--route .lx-route-step > span:last-child {
    display: none;
  }

  .lx-steps-card--route .lx-route li {
    padding-bottom: 8px;
  }

  .lx-steps-card--route .lx-route li:not(:last-child)::before {
    top: 40px;
  }

  .lx-steps-card--route .lx-route-node {
    margin-top: 3px;
  }

  .lx-steps-card--route .lx-route-step {
    padding: 9px 12px;
  }
}

/* Tablets and small laptops, Learning Resources (last, so it wins over the hero cards' measures above): the hero
   stacks here (up to 1180px), so the "simple route forward" card spans the width with the three steps side by side,
   the line running across from marker to marker, and the text loses the side-by-side layout's top space (UI/UX
   review: the 540px card left an empty strip and the hero was 909–923px tall). */
@media (min-width: 768px) and (max-width: 1180px) {
  .nlx-hero-grid:has(.lx-steps-card--route) .nlx-hero-text {
    padding-top: 0;
  }

  .lx-steps-card--route {
    max-width: none;
  }

  .lx-steps-card--route .lx-route {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .lx-steps-card--route .lx-route li {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 0;
  }

  .lx-steps-card--route .lx-route-node {
    margin-top: 0;
  }

  .lx-steps-card--route .lx-route-step {
    flex: 1;
  }

  .lx-steps-card--route .lx-route li:not(:last-child)::before {
    top: 19px;
    right: -4px;
    bottom: auto;
    left: 52px;
    width: auto;
    height: 2px;
    background: linear-gradient(90deg, var(--purple), var(--cyan));
  }

  .lx-steps-card--route .lx-route li:nth-child(2)::before {
    background: linear-gradient(90deg, var(--cyan), var(--orange));
  }
}

/* Certifications & PDUs: Member milestones as one compact strip (UI/UX review: a whole section with a two-line
   heading for one card): the medal, the label, the latest Recognition story's title (the link, over the strip) and
   one line of its summary, "Read the story" at the end. */
.lx-section--strip {
  padding: 72px 0;
}

.lx-milestone {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  padding: 22px 28px;
  border-radius: var(--radius-xl);
  background: var(--purple-wash-hover);
  transition: box-shadow .15s ease;
}

.lx-milestone:hover {
  box-shadow: var(--shadow-card);
}

.lx-milestone-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-round);
  background: var(--purple);
  color: #fff;
}

.lx-milestone-icon svg {
  width: 26px;
  height: 26px;
}

/* With a real photo of a certification moment (Member milestones tab, or the story's photograph): a rounded square,
   wider than the icon, so the strip shows people, not only a symbol. */
.lx-milestone.has-photo {
  grid-template-columns: 112px minmax(0, 1fr) auto;
  padding-left: 14px;
}

.lx-milestone-photo {
  display: block;
  width: 112px;
  height: 112px;
  border-radius: var(--radius-ui);
  object-fit: cover;
}

.lx-milestone-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.lx-section .lx-milestone h2 {
  font-size: var(--text-ui-step);
  line-height: 1.3;
  letter-spacing: normal;
}

.lx-milestone h2 a {
  color: inherit;
  transition: color .15s ease;
}

.lx-milestone h2 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.lx-milestone:hover h2 a {
  color: var(--purple);
}

.lx-milestone h2 a:focus-visible {
  outline: none;
}

.lx-milestone:has(h2 a:focus-visible) {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.lx-milestone p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--muted-strong);
  font-size: var(--text-ui);
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.lx-milestone-go {
  color: var(--purple);
  font-size: var(--text-ui-sm);
  font-weight: 700;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .lx-milestone,
  .lx-milestone h2 a {
    transition: none;
  }
}

/* Certifications & PDUs, tablets and small laptops: the hero stacks here (up to 1180px), so the cycle card spans
   the width, the ring beside the legend, and the text loses the side-by-side layout's top space (UI/UX review: the
   540px card left an empty strip and the hero was 884–898px tall). */
@media (min-width: 768px) and (max-width: 1180px) {
  .nlx-hero-grid:has(.lx-cycle) .nlx-hero-text {
    padding-top: 0;
  }

  .lx-cycle {
    max-width: none;
  }

  .lx-cycle-body {
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 40px;
  }
}

@media (max-width: 767px) {
  /* Phones: a smaller ring beside the legend (UI/UX review: stacked, the card was 441px tall). */
  .lx-cycle {
    padding: 20px;
  }

  .lx-cycle-body {
    grid-template-columns: 112px minmax(0, 1fr);
    justify-items: stretch;
    align-items: center;
    gap: 16px;
  }

  .lx-cycle-ring {
    max-width: 112px;
  }

  .lx-cycle-legend {
    gap: 10px;
  }

  .lx-cycle-dot {
    width: 24px;
    height: 24px;
  }

  .lx-claim-note {
    font-size: var(--text-ui-sm);
  }

  /* Milestone strip: the medal and title, then the summary (two lines) and the link under them. */
  .lx-section--strip {
    padding: 36px 0;
  }

  .lx-milestone {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 10px 14px;
    padding: 18px;
  }

  .lx-milestone-icon {
    width: 44px;
    height: 44px;
  }

  .lx-milestone-icon svg {
    width: 22px;
    height: 22px;
  }

  .lx-section .lx-milestone h2 {
    font-size: var(--text-ui-lg);
  }

  .lx-milestone p {
    font-size: var(--text-ui-sm);
    -webkit-line-clamp: 2;
  }

  .lx-milestone-go {
    grid-column: 2;
    white-space: normal;
  }

  .lx-milestone.has-photo {
    grid-template-columns: 72px minmax(0, 1fr);
    padding-left: 14px;
  }

  .lx-milestone-photo {
    width: 72px;
    height: 72px;
  }
}

/* PMI Talent Triangle®, tablets and small laptops (768–1180px; UI/UX review: a 540px diagram card left-aligned, the
   hero 1,051–1,088px tall, and the pillars stacked full width with half-empty cards). The hero stacks here, so the
   diagram card spans the width with the diagram centered, and the text loses the side-by-side layout's top space. */
@media (min-width: 768px) and (max-width: 1180px) {
  .nlx-hero-grid:has(.lx-diagram) .nlx-hero-text {
    padding-top: 0;
  }

  .lx-diagram {
    max-width: none;
  }

  .lx-diagram img {
    max-width: 380px;
    margin: 0 auto;
  }
}

/* PMI Talent Triangle®, phones (UI/UX review: the page was 5,339px long): session rows without the arrow circle
   (the whole row is the link), so the title gets the full width. */
@media (max-width: 767px) {
  .lx-session {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "when" "title" "tags";
    gap: 4px;
    padding: 14px 16px;
  }

  .lx-session-go {
    display: none;
  }

  .lx-diagram figcaption {
    margin-top: 8px;
  }
}

/* PMI Talent Triangle®, "Three connected dimensions": the capability mix. The Venn of the three pillars (PMI's
   colours, multiplied where they overlap), "Full range" at the centre, recent Chapter sessions as numbered dots in
   the areas of the pillars ticked on them; the numbered legend (the links) under it. Beside it, the three pillars in
   PMI's order, examples as chips; pointing at a pillar lights its circle and fades the others. Up to 1100px the
   Venn sits above the pillars. */
.lx-mix {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: 56px;
}

.lx-venn svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.lx-venn-c {
  stroke-width: 2.5;
  mix-blend-mode: multiply;
  transition: opacity .2s ease, stroke-width .2s ease;
}

.lx-venn-c.is-ways { fill: rgba(5, 191, 224, .26); stroke: var(--cyan); }
.lx-venn-c.is-power { fill: rgba(255, 122, 26, .24); stroke: var(--join); }
.lx-venn-c.is-acumen { fill: rgba(79, 23, 168, .2); stroke: var(--purple); }

.lx-venn-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
}

.lx-venn-name.is-ways { fill: var(--cyan-ink); }
.lx-venn-name.is-power { fill: var(--orange-deep); }
.lx-venn-name.is-acumen { fill: var(--purple); }

.lx-venn-core {
  fill: #fff;
  stroke: var(--night-deep);
  stroke-width: 2;
}

.lx-venn-core-t {
  fill: var(--night-deep);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
}

.lx-venn-dot circle {
  fill: var(--night-deep);
  stroke: #fff;
  stroke-width: 3;
}

.lx-venn-dot text {
  fill: #fff;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
}

.lx-mix:has(.lx-mix-pillar.is-ways:hover) .lx-venn-c:not(.is-ways),
.lx-mix:has(.lx-mix-pillar.is-power:hover) .lx-venn-c:not(.is-power),
.lx-mix:has(.lx-mix-pillar.is-acumen:hover) .lx-venn-c:not(.is-acumen) {
  opacity: .25;
}

.lx-mix:has(.lx-mix-pillar.is-ways:hover) .lx-venn-c.is-ways,
.lx-mix:has(.lx-mix-pillar.is-power:hover) .lx-venn-c.is-power,
.lx-mix:has(.lx-mix-pillar.is-acumen:hover) .lx-venn-c.is-acumen {
  stroke-width: 5;
}

.lx-venn-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 18px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.lx-venn-legend a {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  color: var(--muted-strong);
  font-size: var(--text-ui-sm);
  line-height: 1.35;
  transition: color .15s ease;
}

.lx-venn-legend a:hover {
  color: var(--purple);
}

.lx-venn-legend b {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-round);
  background: var(--night-deep);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-ui-3xs);
}

.lx-venn-cap {
  margin: 10px 0 0;
  color: var(--muted-ui);
  font-size: var(--text-ui-sm);
}

.lx-mix-pillars {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lx-mix-pillar {
  --pillar: var(--cyan);
  --pillar-tint: var(--cyan-tint);
  --pillar-ink: var(--cyan-ink);
  display: grid;
  grid-template-columns: 6px minmax(0, 1fr);
  gap: 18px;
  overflow: hidden;
  padding: 20px 22px 20px 0;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xl);
  background: #fff;
  box-shadow: 0 1px 2px rgba(23, 16, 48, .04), 0 10px 28px rgba(23, 16, 48, .06);
  transition: border-color .15s ease;
}

.lx-mix-pillar.is-power { --pillar: var(--join); --pillar-tint: var(--orange-tint); --pillar-ink: var(--orange-deep); }
.lx-mix-pillar.is-acumen { --pillar: var(--purple); --pillar-tint: var(--purple-tint); --pillar-ink: var(--purple); }

.lx-mix-pillar::before {
  content: "";
  background: var(--pillar);
}

.lx-mix-pillar:hover {
  border-color: var(--pillar);
}

.lx-section .lx-mix-pillar h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 6px;
  color: var(--pillar-ink);
  font-family: var(--font-display);
  font-size: var(--text-ui-step);
  line-height: 1.25;
}

.lx-mix-pillar .lx-icon {
  width: 38px;
  height: 38px;
  background: var(--pillar-tint);
  color: var(--pillar-ink);
}

.lx-mix-pillar .lx-icon svg {
  width: 20px;
  height: 20px;
}

.lx-mix-pillar p {
  margin: 0 0 12px;
  color: var(--muted-strong);
  font-size: var(--text-ui);
  line-height: 1.5;
}

/* Examples: content, so 15px regular (UI/UX review); 12px chips on phones. */
.lx-mix-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lx-mix-chips li {
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  background: var(--pillar-tint);
  color: var(--ink-strong);
  font-size: var(--text-ui);
  line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
  .lx-venn-c,
  .lx-mix-pillar,
  .lx-venn-legend a {
    transition: none;
  }
}

@media (max-width: 1100px) {
  .lx-mix {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .lx-venn {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
  }
}

@media (max-width: 767px) {
  /* Larger names inside the smaller diagram; the legend in one column, each row a 44px tap target. */
  .lx-venn-name {
    font-size: 21px;
  }

  .lx-venn-legend {
    grid-template-columns: minmax(0, 1fr);
  }

  .lx-venn-legend a {
    min-height: 44px;
  }

  .lx-mix-pillar {
    gap: 14px;
    padding: 16px 16px 16px 0;
  }

  .lx-section .lx-mix-pillar h3 {
    font-size: var(--text-ui-lg);
  }

  .lx-mix-pillar p {
    font-size: var(--text-ui-sm);
  }

  .lx-mix-chips li {
    padding: 3px 9px;
    font-size: var(--text-ui-2xs);
  }
}

/* Training Partners: the certification grid (shown once any partner has "Prepares for" ticked). Partners down the
   side, the certifications ticked by any of them across, a dot where a partner prepares for one. "I'm preparing for"
   chips (radio buttons): the picked certification's column lights up and the partners without it fade (CSS only).
   Phones: no grid; each partner a row with its certifications as badges. Until there is data, the partners A–Z as
   chips that jump to their card (UI/UX review: eight identical cards, no way to scan or filter). */
.lx-cgrid {
  margin-bottom: 36px;
}

.lx-cgrid-finder {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}

.lx-cgrid-finder > span {
  margin-right: 6px;
  color: var(--muted-ui);
  font-size: var(--text-ui-sm);
  font-weight: 700;
}

.lx-cgrid-finder input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.lx-cgrid-finder label {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line-control);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--ink-strong);
  font-size: var(--text-ui-sm);
  font-weight: 700;
  cursor: pointer;
}

.lx-cgrid-finder input:checked + label {
  border-color: var(--purple);
  background: var(--purple);
  color: #fff;
}

.lx-cgrid-finder input:focus-visible + label {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.lx-cgrid-table {
  overflow-x: auto;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xl);
  background: #fff;
  box-shadow: 0 1px 2px rgba(23, 16, 48, .04), 0 10px 28px rgba(23, 16, 48, .06);
}

.lx-cgrid table {
  width: 100%;
  border-collapse: collapse;
}

.lx-cgrid thead th {
  height: 56px;
  padding: 0 6px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface-soft);
  color: var(--muted-ui);
  font-size: var(--text-ui-2xs);
  font-weight: 700;
  white-space: nowrap;
}

.lx-cgrid thead th:first-child {
  padding-left: 22px;
  text-align: left;
}

.lx-cgrid tbody tr {
  border-bottom: 1px solid var(--line-soft);
  transition: opacity .15s ease;
}

.lx-cgrid tbody tr:last-child {
  border-bottom: 0;
}

.lx-cgrid tbody th {
  padding: 12px 18px 12px 22px;
  text-align: left;
}

.lx-cgrid tbody th a {
  display: flex;
  flex-direction: column;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-ui);
  font-weight: 700;
  line-height: 1.3;
}

.lx-cgrid tbody th a:hover {
  color: var(--purple);
}

.lx-cgrid tbody th small {
  color: var(--muted-ui);
  font-family: var(--font-ui);
  font-size: var(--text-ui-2xs);
  font-weight: 600;
}

.lx-cgrid td {
  min-width: 64px;
  text-align: center;
}

.lx-cgrid-dot {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-round);
  background: var(--purple);
  box-shadow: 0 0 0 4px var(--purple-tint);
}

.lx-cgrid-dot > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.lx-cgrid-no {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-round);
  background: var(--line-control);
}

/* A certification picked: its column lit, the partners without it faded. */
.lx-cgrid:has(#lx-cg-pmp:checked) .is-pmp,
.lx-cgrid:has(#lx-cg-capm:checked) .is-capm,
.lx-cgrid:has(#lx-cg-pmi-acp:checked) .is-pmi-acp,
.lx-cgrid:has(#lx-cg-pmi-rmp:checked) .is-pmi-rmp,
.lx-cgrid:has(#lx-cg-pmi-sp:checked) .is-pmi-sp,
.lx-cgrid:has(#lx-cg-pmi-pba:checked) .is-pmi-pba,
.lx-cgrid:has(#lx-cg-pgmp:checked) .is-pgmp,
.lx-cgrid:has(#lx-cg-pfmp:checked) .is-pfmp,
.lx-cgrid:has(#lx-cg-pmi-cp:checked) .is-pmi-cp,
.lx-cgrid:has(#lx-cg-pmi-pmocp:checked) .is-pmi-pmocp,
.lx-cgrid:has(#lx-cg-pmi-cpmai:checked) .is-pmi-cpmai {
  background: var(--purple-wash);
}

.lx-cgrid:has(#lx-cg-pmp:checked) tbody tr:not(.has-pmp),
.lx-cgrid:has(#lx-cg-capm:checked) tbody tr:not(.has-capm),
.lx-cgrid:has(#lx-cg-pmi-acp:checked) tbody tr:not(.has-pmi-acp),
.lx-cgrid:has(#lx-cg-pmi-rmp:checked) tbody tr:not(.has-pmi-rmp),
.lx-cgrid:has(#lx-cg-pmi-sp:checked) tbody tr:not(.has-pmi-sp),
.lx-cgrid:has(#lx-cg-pmi-pba:checked) tbody tr:not(.has-pmi-pba),
.lx-cgrid:has(#lx-cg-pgmp:checked) tbody tr:not(.has-pgmp),
.lx-cgrid:has(#lx-cg-pfmp:checked) tbody tr:not(.has-pfmp),
.lx-cgrid:has(#lx-cg-pmi-cp:checked) tbody tr:not(.has-pmi-cp),
.lx-cgrid:has(#lx-cg-pmi-pmocp:checked) tbody tr:not(.has-pmi-pmocp),
.lx-cgrid:has(#lx-cg-pmi-cpmai:checked) tbody tr:not(.has-pmi-cpmai) {
  opacity: .3;
}

.lx-cgrid-note {
  margin: 12px 0 0;
  color: var(--muted-ui);
  font-size: var(--text-ui-sm);
}

/* Until there is "Prepares for" data: the partners A–Z, each a chip to its card. */
.lx-atp-index {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -8px 0 28px;
}

.lx-atp-index a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line-control);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--ink-strong);
  font-size: var(--text-ui-sm);
  font-weight: 700;
  transition: border-color .15s ease, color .15s ease;
}

.lx-atp-index a:hover {
  border-color: var(--purple);
  color: var(--purple);
}

/* Jumping to a card leaves room for the sticky header. */
.lx-atp {
  scroll-margin-top: 120px;
}

/* Three cards a row on wide screens (UI/UX review: two a row made eight cards 1,904px). */
@media (min-width: 1101px) {
  .lx-atps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .lx-cgrid tbody tr,
  .lx-atp-index a {
    transition: none;
  }
}

@media (max-width: 767px) {
  .lx-cgrid table,
  .lx-cgrid tbody,
  .lx-cgrid tr,
  .lx-cgrid th,
  .lx-cgrid td {
    display: block;
  }

  .lx-cgrid thead {
    display: none;
  }

  .lx-cgrid tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 14px 16px;
  }

  .lx-cgrid tbody th {
    width: 100%;
    padding: 0 0 4px;
  }

  .lx-cgrid td {
    min-width: 0;
  }

  .lx-cgrid td:not(.is-yes) {
    display: none;
  }

  /* The dot becomes a badge with the certification's name. */
  .lx-cgrid-dot {
    width: auto;
    height: auto;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    box-shadow: none;
    color: #fff;
    font-size: var(--text-ui-2xs);
    font-weight: 700;
  }

  .lx-cgrid-dot > span {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
  }

  /* One row to swipe, running to the screen's edges, instead of eight chips wrapping over ~240px. */
  .lx-atp-index {
    flex-wrap: nowrap;
    margin: -4px -21px 20px;
    padding: 2px 21px 6px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .lx-atp-index::-webkit-scrollbar {
    display: none;
  }

  .lx-atp-index a {
    flex-shrink: 0;
  }
}

/* Training Partners, layout fixes (UI/UX review). Logos: the full 720 × 90px file, up to 48px tall and the card's
   width (they were 240 × 30px from a 300px copy, soft and lost in a 104px band). */
.lx-atp-logo {
  min-height: 96px;
}

.lx-atp-logo img {
  width: auto;
  max-width: min(100%, 384px);
  height: auto;
  max-height: 48px;
}

/* Tablets and small laptops: the hero stacks here (up to 1180px), so the glance card spans the width: the count and
   "Last updated" on the left, the note on the right; the text loses the side-by-side layout's top space. */
@media (min-width: 768px) and (max-width: 1180px) {
  .nlx-hero-grid:has(.lx-glance) .nlx-hero-text {
    padding-top: 0;
  }

  .lx-glance {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 14px 40px;
    max-width: none;
  }

  .lx-glance > .lx-label {
    grid-column: 1 / -1;
  }

  .lx-glance-figure,
  .lx-glance-updated {
    grid-column: 1;
  }

  .lx-glance-note {
    grid-column: 2;
    grid-row: 2 / span 2;
    padding: 0 0 0 28px;
    border-top: 0;
    border-left: 1px solid var(--line-soft);
  }
}

@media (max-width: 767px) {
  /* Phones: a tighter glance card, the ring smaller (it was 382px tall). */
  .lx-glance {
    gap: 12px;
    padding: 20px;
  }

  .lx-glance-ring {
    width: 84px;
    height: 84px;
  }

  .lx-glance-ring b {
    width: 50px;
    height: 50px;
    font-size: var(--text-ui-tile);
  }

  .lx-glance-note {
    padding-top: 12px;
  }

  .lx-atp-logo {
    min-height: 76px;
  }

  .lx-atp-logo img {
    max-height: 40px;
  }

  /* Each phone number and email a 44px tap target (they were 19px tall). */
  .lx-atp-contact dd a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .lx-atp-contact div {
    align-items: center;
  }
}

/* Training Partners grid: each partner's logo (decorative, the uploaded file) above its name; names wrap, never cut. */
.lx-cgrid-logo {
  display: block;
  width: auto;
  max-width: 180px;
  height: auto;
  max-height: 24px;
  margin-bottom: 6px;
  mix-blend-mode: multiply;
  object-fit: contain;
  object-position: left center;
}

.lx-cgrid tbody th a {
  white-space: normal;
  overflow-wrap: anywhere;
}

.lx-cgrid-dot > span {
  font-style: normal;
}

@media (max-width: 767px) {
  .lx-cgrid-logo {
    max-width: 150px;
    max-height: 22px;
  }
}