/* ── eQMS page hero ─────────────────────────────────────── */
.eqms-hero {
  height: auto;
  min-height: calc(100vh - var(--header-h));
  padding: clamp(50px, 8vh, 90px) 0;
}

/* Descendant selector (not just .eqms-h1) so this reliably beats
   .hero h1's specificity instead of losing the tie and rendering at
   the index page's 96px scale. */
.eqms-hero .eqms-h1 {
  color: var(--white);
  font-weight: 400;
  font-size: clamp(34px, 4.4vw, 68px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: clamp(14px, 2.4vh, 20px);
}

.eqms-h1 .at-sym {
  font-style: normal;
}

.eqms-tagline {
  font-family: "Times New Roman", Times, serif;
  font-weight: 400;
  font-size: clamp(17px, 1.3vw, 22px);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 14px;
}

.eqms-underline-link {
  color: var(--white);
  font-family: Verdana, Geneva, sans-serif;
  font-weight: 700;
  font-size: clamp(13px, 0.8vw, 15px);
  letter-spacing: 0.02em;
  text-decoration: underline;
  text-underline-offset: 5px;
}

.eqms-underline-link:hover {
  color: rgba(255, 255, 255, 0.8);
}

/* ── AI ecosystem visual: one fluid, aspect-locked wrapper ── */
/* All children are positioned in percentages of this 640x480 design
   box, matching the SVG viewBox 1:1, so the whole composition scales
   together and connector lines never detach from their cards. */
.eqms-diagram {
  position: relative;
  width: 100%;
  max-width: 720px;
  aspect-ratio: 640 / 480;
  margin-left: auto;
}

.eqms-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: visible;
}

.ez-line {
  fill: none;
  stroke: #a9c8ef;
  stroke-width: 2;
  stroke-linecap: round;
}

/* Resting state (after the draw-in animation completes) is a dotted trace,
   matching the reference. The draw-in itself still uses a solid growing
   dash via inline styles set from JS, then switches to this pattern. */
.ez-line.ez-dotted {
  stroke-dasharray: 1.5 6 !important;
}

.ez-node {
  fill: var(--blue);
  stroke: #ffffff;
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
}

/* Entrance-hidden state for the connector paths/nodes, drawn via JS */
.ez-line,
.ez-node {
  opacity: 0;
}

@keyframes ezNodePulseSrc {
  0%   { opacity: 0; transform: scale(0.6); }
  60%  { opacity: 1; transform: scale(1.25); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes ezNodePulseDest {
  0%   { opacity: 0; transform: scale(0.4); }
  60%  { opacity: 1; transform: scale(1.25); }
  100% { opacity: 1; transform: scale(1); }
}

.js-anim .ez-node.ez-pulse {
  animation: ezNodePulseSrc 0.32s ease forwards;
}

.js-anim .ez-node.ez-dest.ez-pulse {
  animation: ezNodePulseDest 0.32s ease forwards;
}

/* Capability cards */
.eqms-node {
  position: absolute;
  z-index: 2;
  width: 21%;
  min-width: 175px;
  background: var(--white);
  border: 1px solid #eef2f8;
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: Verdana, Geneva, sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--primary);
  transition: transform 0.35s var(--ease-smooth), box-shadow 0.35s var(--ease-smooth);
}

.eqms-node span:last-child {
  /* Flex items default to min-width:auto, which lets text force the
     card wider than its own boundary instead of wrapping within it. */
  flex: 1;
  min-width: 0;
  /* min-width:0 lets the span shrink and wrap at spaces, but a single
     long word (e.g. FR "conversationnel", EN "Management") still won't
     break mid-word without help, so it overflows past the card's edge
     uncontained (.eqms-node uses overflow:visible for its box-shadow).
     hyphens:auto breaks at a real syllable ("conversa-tionnel") instead
     of an arbitrary character split (relies on each page's lang
     attribute). overflow-wrap must stay "normal" here: Chromium prefers
     an arbitrary break-word split over a hyphenation point when both are
     set, which is what produced the ugly "Managemen-t" split this
     replaced. */
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: normal;
}

.eqms-node:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.eqms-node-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  box-shadow: 0 0 0 6px #e4edfc;
}

.eqms-node-doc   { top: 7%;  left: 0; }
.eqms-node-risk  { top: 46%; left: 0; }
.eqms-node-audit { top: 5%;  right: 0; }
.eqms-node-inv   { top: 38%; right: 0; }

/* AI chat card: wide, compact SaaS-panel proportions */
.ai-chat-card {
  position: absolute;
  z-index: 3;
  top: 2%;
  left: 29%;
  width: 44%;
  background: var(--white);
  border: 1px solid #e3ecfb;
  border-radius: 20px;
  box-shadow: 0 24px 50px rgba(6, 30, 60, 0.22);
  overflow: hidden;
}

.ai-chat-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 26px;
  border-bottom: 1px solid #eef2f8;
  font-family: Verdana, Geneva, sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: #1a1a1a;
}

/* Force one line only once the diagram is wide enough to actually fit it;
   below that, wrapping to two lines is far better than clipped/truncated text. */
@media (min-width: 1900px) {
  .ai-chat-header {
    white-space: nowrap;
  }
}

.ai-chat-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  box-shadow: 0 0 0 6px #e4edfc;
}

.ai-chat-body {
  padding: 16px 26px 22px;
}

.ai-msg {
  margin-bottom: 16px;
}

.ai-msg-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: Verdana, Geneva, sans-serif;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--blue);
  margin-bottom: 5px;
}

.ai-msg-label.answer {
  color: var(--orange);
}

.ai-msg p {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: #444c56;
  margin: 0;
  padding-left: 24px;
}

#aiQuestion {
  min-height: 1.5em;
}

.js-anim .ai-msg-user .ai-msg-label {
  opacity: 0;
  transition: opacity 0.3s var(--ease-smooth);
}

.js-anim .ai-msg-user .ai-msg-label.show {
  opacity: 1;
}

.ai-msg-answer {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.45s var(--ease-smooth), max-height 0.45s var(--ease-smooth);
}

.ai-msg-answer.show {
  opacity: 1;
  max-height: 270px;
}

/* The chat card's position is a fixed point in the diagram's 640x480
   design box (see .eqms-diagram above), shared by the connector dots and
   the independently-anchored mascot. Growing max-height to fit longer
   translations pushes the card past those fixed points instead of fixing
   the clip, so translations that overrun the EN budget get scaled down
   here rather than being allowed to grow the card. FR needs ~297px
   against a 270px budget; 14px/1.45 brings it to ~250px with margin. */
[data-lang="fr"] #aiAnswer p {
  font-size: 14px;
  line-height: 1.45;
}

.ai-sources {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s var(--ease-smooth), transform 0.4s var(--ease-smooth);
}

.ai-sources.show {
  opacity: 1;
  transform: translateY(0);
}

.ai-sources-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: Verdana, Geneva, sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--text-light);
  margin-bottom: 10px;
}

.ai-source-pills {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.ai-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gray-bg);
  border: 1px solid #e4e9f0;
  border-radius: 8px;
  padding: 9px 16px;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #444c56;
  white-space: nowrap;
}

.ai-pill i {
  color: var(--blue);
  font-size: 13px;
}

/* Mascot: secondary, supporting element behind/beside the chat card.
   Positioned relative to .eqms-hero itself (see .eqms-visual-col
   position:static override below) so bottom:0 bleeds past the hero's
   own padding all the way to its true edge, instead of stopping at
   the diagram's box like the previous nested version did. */
.eqms-mascot {
  position: absolute;
  z-index: 0;
  bottom: 0;
  right: 90px;
  width: clamp(190px, 15vw, 240px);
  height: auto;
  max-width: none;
  filter: drop-shadow(0 15px 25px rgba(6, 30, 60, 0.25));
}

/* Connector from Omni to the chat card: computed in real pixels via JS
   (not the diagram's 640x480 viewBox) because the mascot lives outside
   that coordinate system, anchored to .eqms-hero instead of the diagram. */
.eqms-omni-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: visible;
  pointer-events: none;
}

@media (max-width: 1849px) {
  .eqms-omni-svg {
    display: none;
  }
}

/* Bootstrap columns default to position:relative, which would otherwise
   catch the mascot's position:absolute before it reaches .eqms-hero. */
@media (min-width: 1850px) {
  .eqms-visual-col {
    position: static;
  }
}

/* ── Entrance animation (plays once) ───────────────────────── */
.eqms-mascot,
.ai-chat-card {
  opacity: 0;
}

/* Capability cards start fully hidden from both paint and interaction
   until their connector line reaches them. */
.js-anim .eqms-node {
  opacity: 0;
  visibility: hidden;
}

.js-anim .eqms-mascot {
  transform: translateY(10px);
  transition: opacity 0.4s var(--ease-smooth), transform 0.4s var(--ease-smooth);
}

.js-anim .eqms-mascot.ez-in {
  opacity: 1;
  transform: translateY(0);
}

.js-anim .ai-chat-card {
  transform: scale(0.97);
  transition: opacity 0.4s var(--ease-smooth), transform 0.4s var(--ease-smooth);
}

.js-anim .ai-chat-card.ez-in {
  opacity: 1;
  transform: scale(1);
}

/* Cards emerge from the connector direction: left-side cards drift in
   from the chatbot (right), right-side cards drift in from the chatbot (left). */
.js-anim .eqms-node-doc,
.js-anim .eqms-node-risk {
  transform: translateX(8px) scale(0.95);
  transition: opacity 0.28s var(--ease-smooth), transform 0.28s var(--ease-smooth), box-shadow 0.35s var(--ease-smooth), visibility 0s;
}

.js-anim .eqms-node-audit,
.js-anim .eqms-node-inv {
  transform: translateX(-8px) scale(0.95);
  transition: opacity 0.28s var(--ease-smooth), transform 0.28s var(--ease-smooth), box-shadow 0.35s var(--ease-smooth), visibility 0s;
}

.js-anim .eqms-node.ez-in {
  opacity: 1;
  visibility: visible;
  transform: translateX(0) scale(1);
}

/* Progressive enhancement: without JS (or reduced motion), everything is simply visible */
html:not(.js-anim) .eqms-mascot,
html:not(.js-anim) .ai-chat-card,
html:not(.js-anim) .eqms-node,
.eqms-diagram--static .eqms-mascot,
.eqms-diagram--static .ai-chat-card,
.eqms-diagram--static .eqms-node,
.eqms-diagram--static .ez-line,
.eqms-diagram--static .ez-node {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.eqms-diagram--static .ez-net.ez-line {
  stroke-dasharray: 1.5 6 !important;
}

@media (prefers-reduced-motion: reduce) {
  .eqms-mascot, .ai-chat-card, .eqms-node, .ez-line, .ez-node {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}

/* The diagram's text is set in fixed px (deliberately, to match the
   reference's absolute type scale) rather than scaling with the box,
   so below the width it was designed for we switch to a simple
   full-width static stack instead of shrinking the elaborate layout
   into a cramped, colliding one. */
@media (max-width: 1849px) {
  .eqms-hero { height: auto; min-height: 0; padding: 110px 0 50px; }

  .eqms-text-col,
  .eqms-visual-col {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Reading order here is chat card -> mascot -> capability cards (better
     flow than DOM order, which is cards -> chat -> mascot). .eqms-mascot
     lives outside .eqms-diagram in the DOM (needed for its desktop
     bleed-to-hero-edge positioning), so .eqms-diagram is unwrapped with
     display:contents to pull its children into .eqms-visual-col's own
     flex flow, where mascot and cards can all be reordered together. */
  .eqms-visual-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 40px;
  }
  .eqms-diagram {
    display: contents;
  }
  .eqms-lines { display: none; }
  .eqms-node { position: static; width: 100%; max-width: 420px; order: 3; }
  .ai-chat-card { position: static; width: 100%; max-width: 480px; order: 1; }
  .eqms-mascot { position: static; display: block; width: auto; height: 260px; order: 2; }
}

/* ── "ASK Omni-Assistant AI Works Across the Platform" ────────── */
.ai-platform-section {
  padding: 48px 0;
}

.ai-platform-visual {
  display: flex;
  justify-content: center;
}

.ai-platform-img-box {
  width: 100%;
  max-width: 540px;
  aspect-ratio: 1 / 1;
  border-radius: 24px;
  box-sizing: border-box;
}

.ai-platform-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
}

/* Canonical section heading, matched to the home page's dominant h2 scale
   (see .standards-heading / .audit-title in style.css) so every section on
   the site — home or eqms — shares the same type ramp. Figma dev-mode
   confirms this section's own heading is the same 68px/66px/-1.36px spec
   at full size, so it belongs in the shared canonical group too. */
.ai-platform-title,
.docs-chat-title,
.ai-caps-title,
.modules-title,
.modules-nav-title {
  font-family: "Times New Roman", Times, serif;
  font-weight: 400;
  font-size: clamp(32px, 3.55vw, 68px);
  line-height: 0.97;
  letter-spacing: -0.02em;
  color: #1a1a1a;
  margin-bottom: clamp(16px, 2.4vh, 24px);
}

/* Canonical section body copy, matched to .audit-text / .standards-desc. */
.docs-chat-text,
.ai-caps-desc,
.ai-caps-step-text {
  font-family: Verdana, Geneva, sans-serif;
  font-weight: 400;
  font-size: clamp(14px, 0.9vw, 17px);
  line-height: 1.7;
  color: #727272;
}

/* Figma dev-mode spec for this section's body copy: Verdana 17px/29.75px,
   #727272, regular weight (no bold) — same style for both paragraphs. */
.ai-platform-lead,
.ai-platform-text {
  font-family: Verdana, Geneva, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 29.75px;
  letter-spacing: 0;
  color: #727272;
  max-width: 730px;
}

.ai-platform-lead {
  margin-bottom: 4px;
}

.ai-platform-text {
  margin-bottom: clamp(24px, 3.4vh, 34px);
}

.ai-platform-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 480px;
  border-top: 1px solid #e6e6e6;
}

.ai-platform-list li {
  display: flex;
  align-items: baseline;
  gap: 22px;
  padding: 16px 0;
  border-bottom: 1px solid #e6e6e6;
}

.ai-platform-num {
  font-family: Verdana, Geneva, sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: var(--orange);
  min-width: 18px;
}

.ai-platform-label {
  font-family: Verdana, Geneva, sans-serif;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--text);
}

@media (max-width: 991px) {
  .ai-platform-visual {
    margin-bottom: 30px;
  }
}

/* ── "Documents AI Chatbot" ────────────────────────────────────── */
.docs-chat-text {
  max-width: 400px;
  margin-bottom: clamp(26px, 3.6vh, 36px);
}

.dot-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dot-list li {
  position: relative;
  padding-left: 22px;
  font-family: Verdana, Geneva, sans-serif;
  font-weight: 400;
  font-size: 15px;
  color: #2c3440;
  margin-bottom: 22px;
}

.dot-list li:last-child {
  margin-bottom: 0;
}

.dot-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
}

.docs-chat-visual {
  display: flex;
  justify-content: flex-start;
}

.docs-chat-card {
  width: 100%;
  max-width: 460px;
  background: var(--white);
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
  padding: 32px 28px 20px;
}

.docs-chat-body {
  margin-bottom: 22px;
}

.chat-row {
  display: flex;
  flex-direction: column;
  margin-bottom: 22px;
}

.chat-row:last-child {
  margin-bottom: 0;
}

.chat-row-user {
  align-items: flex-end;
}

.chat-bubble {
  border-radius: 16px;
  padding: 13px 18px;
  max-width: 85%;
}

.chat-bubble p {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0;
}

.chat-bubble-user {
  background: var(--blue);
}

.chat-bubble-user p {
  color: var(--white);
}

.chat-row-ai {
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
}

.chat-avatar {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
}

.chat-bubble-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.chat-bubble-ai {
  background: var(--blue-light);
}

.chat-bubble-ai p {
  color: #3b4250;
}

.chat-time {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 11px;
  color: var(--text-light);
  margin-top: 6px;
}

.docs-chat-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--gray-bg);
  border-radius: 12px;
  padding: 13px 18px;
}

.chat-input-placeholder {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 13.5px;
  color: #9aa1ab;
}

.chat-input-icons {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #8f96a3;
  font-size: 15px;
}

/* Entrance animation (plays once, on scroll into view) */
.js-anim .docs-chat-card {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s var(--ease-smooth), transform 0.5s var(--ease-smooth);
}

.js-anim .docs-chat-card.ez-in {
  opacity: 1;
  transform: none;
}

.js-anim .chat-row-user,
.js-anim .chat-row-ai {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s var(--ease-smooth), transform 0.4s var(--ease-smooth);
}

.js-anim .chat-row-user.show,
.js-anim .chat-row-ai.show {
  opacity: 1;
  transform: none;
}

.js-anim .chat-time {
  opacity: 0;
  transition: opacity 0.3s var(--ease-smooth);
}

.js-anim .chat-time.show {
  opacity: 1;
}

html:not(.js-anim) .docs-chat-card,
html:not(.js-anim) .chat-row-user,
html:not(.js-anim) .chat-row-ai,
html:not(.js-anim) .chat-time {
  opacity: 1 !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .docs-chat-card, .chat-row-user, .chat-row-ai, .chat-time {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

@media (max-width: 991px) {
  .docs-chat-visual {
    margin-top: 30px;
    justify-content: center;
  }
}

/* ── "AI Capabilities That Extend Beyond Software Assistance" ─── */
.ai-caps-title {
  max-width: 780px;
}

.ai-caps-timeline {
  position: relative;
  display: flex;
  margin-top: clamp(40px, 5.5vh, 64px);
  gap: 40px;
}

.ai-caps-line {
  position: absolute;
  top: 28px;
  left: 28px;
  right: calc(33.34% - 28px);
  height: 1px;
  background: #d7dde5;
  z-index: 1;
}

.ai-caps-step {
  position: relative;
  z-index: 2;
  flex: 1;
  min-width: 0;
}

.ai-caps-icon {
  position: relative;
  z-index: 2;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1.5px solid var(--blue);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--orange);
  font-size: 19px;
  margin-bottom: 24px;
}

/* Points animate in first (fade + rise); the connecting line draws in
   from the left behind them once the last point has started appearing. */
.js-anim .ai-caps-step {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease-smooth), transform 0.6s var(--ease-smooth);
}

.js-anim .ai-caps-step.ez-in {
  opacity: 1;
  transform: none;
}

.js-anim .ai-caps-line {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--ease-smooth);
}

.js-anim .ai-caps-line.ez-in {
  transform: scaleX(1);
}

html:not(.js-anim) .ai-caps-step,
html:not(.js-anim) .ai-caps-line {
  opacity: 1;
  transform: none;
}

.ai-caps-step-title {
  font-family: Verdana, Geneva, sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.4;
  color: var(--blue);
  margin-bottom: 10px;
}

.ai-caps-step-text {
  max-width: 320px;
}

@media (max-width: 767px) {
  .ai-caps-timeline {
    flex-direction: column;
    gap: 34px;
  }

  .ai-caps-line {
    display: none;
  }

  .ai-caps-step-text {
    max-width: none;
  }
}

/* ── "15 Fully Integrated Modules" ─────────────────────────────── */
.modules-desc {
  font-family: Verdana, Geneva, sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.6;
  color: #9099a4;
  max-width: 640px;
  margin-bottom: clamp(30px, 4vh, 44px);
}

.modules-card {
  background: var(--white);
  border-radius: 24px;
  box-shadow: var(--shadow-lg);
  padding: clamp(32px, 4vw, 56px) clamp(24px, 5vw, 64px);
}

.modules-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(20px, 4vw, 48px);
}

.modules-col-left,
.modules-col-right {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.4vh, 24px);
  min-width: 0;
}

.module-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.module-badge {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-family: Verdana, Geneva, sans-serif;
  font-weight: 700;
  font-size: 11px;
}

.module-badge.blue {
  background: var(--blue);
}

.module-badge.orange {
  background: var(--orange);
}

.module-label {
  font-family: Verdana, Geneva, sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.35;
  color: var(--blue);
  white-space: nowrap;
}

.modules-col-right .module-row {
  justify-content: flex-end;
}

.modules-col-right .module-label {
  text-align: right;
}

.module-line {
  flex: 1;
  min-width: 16px;
  height: 1px;
  background: #dfe4ea;
}

.modules-col-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.modules-hub {
  width: clamp(88px, 8vw, 120px);
  height: clamp(88px, 8vw, 120px);
  border-radius: 20px;
  background: var(--blue);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
}

.hub-oa {
  font-family: "Times New Roman", Times, serif;
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 30px);
  color: var(--white);
  line-height: 1;
}

.hub-sub {
  font-family: Verdana, Geneva, sans-serif;
  font-weight: 700;
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 991px) {
  .modules-grid {
    grid-template-columns: 1fr;
  }

  .modules-col-center {
    order: -1;
    margin-bottom: 30px;
  }

  .module-line {
    display: none;
  }

  /* Right-column rows are authored line->label->badge in the DOM (so
     desktop's justify-content:flex-end reads badge nearest the hub); on
     mobile that leaves label before badge once flex-start is applied,
     inconsistent with the left column's badge->label order. Reversing
     the row puts the badge first for both columns without touching
     markup (the now-hidden line just lands last, out of the way). */
  .modules-col-right .module-row {
    flex-direction: row-reverse;
    /* row-reverse flips which physical edge "flex-start" packs against
       too, so flex-end (not flex-start) is what lands flush left here. */
    justify-content: flex-end;
  }

  .modules-col-right .module-label {
    text-align: left;
  }

  .module-row {
    align-items: flex-start;
  }

  .module-badge {
    flex-shrink: 0;
  }

  .module-label {
    white-space: normal;
  }
}

/* ── "Every Module, Connected to the Work Around It" ───────────── */
.modules-nav-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 40px;
  /* Left grid cell must stretch to the full row height (the tall
     module list's height) — that's what gives the sticky card room
     to travel and pin as you scroll, instead of unsticking early. */
  align-items: stretch;
}

/* The sticky element is the card itself, not the grid-cell wrapper:
   its containing block is .modules-nav-sidebar, which stretches to
   match the (much taller) module list beside it via align-items above. */
.modules-nav-card {
  position: sticky;
  top: 110px;
  background: var(--white);
  border: 1px solid #e9edf3;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.modules-nav-group-title {
  background: #eef1f6;
  padding: 11px 18px;
  font-family: Verdana, Geneva, sans-serif;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b7480;
}

.modules-nav-link {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 18px;
  font-family: Verdana, Geneva, sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.4;
  color: #626b78;
  transition: color 0.2s var(--ease-smooth);
}

.modules-nav-link:hover {
  color: var(--blue);
  text-decoration: none;
}

.modules-nav-link.active {
  color: var(--blue);
  font-weight: 700;
}

.nav-code {
  /* Sized to align the labels in a column; 24px was a few px short of
     even the shortest ("M1") at this weight/size, let alone "M10"-"M15". */
  min-width: 32px;
  font-weight: 700;
  color: var(--orange);
}

.modules-nav-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.modules-acc-item.acc-item {
  border-radius: 14px;
  background: var(--white);
}

.modules-acc-item.acc-item.active {
  background: var(--blue-light);
  border-color: transparent;
}

.modules-acc-toggle.acc-toggle {
  padding: 18px 20px;
  align-items: flex-start;
  text-align: left;
}

.modules-acc-badge {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blue);
  color: var(--white);
  font-family: Verdana, Geneva, sans-serif;
  font-weight: 700;
  font-size: 11px;
}

.modules-acc-item.active .modules-acc-badge {
  background: var(--orange);
}

.modules-acc-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 3px;
}

.modules-acc-title.acc-title {
  font-family: "Times New Roman", Times, serif;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -0.2px;
  font-weight: 400;
  color: var(--blue);
}

.modules-acc-preview {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: #8a919c;
}

.modules-acc-item.active .modules-acc-preview {
  display: none;
}

.modules-acc-icon.acc-icon {
  background: none;
  /* Fixed box (not auto) so the row doesn't reflow once the Font
     Awesome webfont finishes loading and the glyph gets its real size. */
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 0;
  color: var(--blue);
  font-size: 15px;
  margin-top: 6px;
}

.modules-acc-item.active .modules-acc-icon.acc-icon {
  background: none;
  color: var(--blue);
}

.modules-acc-body.acc-body {
  padding: 0 20px;
}

.modules-acc-item.active .modules-acc-body.acc-body {
  max-height: 220px;
  padding: 0 20px 20px;
}

.modules-acc-indent {
  padding-left: 50px;
}

.modules-acc-indent p {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: #5a6270;
  margin: 0 0 14px;
}

.modules-acc-chip {
  display: inline-block;
  background: var(--white);
  border: 1px solid #d7e2f3;
  border-radius: 6px;
  padding: 8px 14px;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--blue);
}

@media (max-width: 991px) {
  .modules-nav-layout {
    grid-template-columns: 1fr;
  }

  .modules-nav-card {
    position: static;
  }

  .modules-nav-sidebar {
    margin-bottom: 30px;
  }
}