/* ==========================================================================
   Click-Video — shared site stylesheet
   Mobile-first. Desktop enhancements begin at 901px (the 900px breakpoint
   REACHUM uses, expressed min-width rather than max-width).
   ========================================================================== */

/* ── TOKENS ─────────────────────────────────────────────────────────────── */
:root {
  --navy:        #032F45;   /* primary                                      */
  --navy-deep:   #02273A;   /* nav bar — one step below the hero navy       */
  --navy-light:  #0A4A6B;   /* hover / depth — 9.52:1 on white              */
  --accent:      #EC297B;   /* logo magenta — mark, ≥24px display, fills    */
  --accent-text: #CE1261;   /* body-size accent — 5.41:1 on white           */
  --accent-deep: #B81057;   /* accent-fill hover — 6.46:1 with white text   */
  --accent-navy: #F26EA7;   /* small accent text on navy — 5.05:1           */
  --ink:         #231F20;   /* body text                                    */
  --gray:        #697079;   /* secondary text — 4.67:1 on --background      */
  --light-gray:  #EBEBEB;   /* borders / rules                              */
  --background:  #F5F7FA;   /* page background                              */
  --white:       #FFFFFF;

  --h1-size:     clamp(2.5rem, 6vw, 4.5rem);
  --measure:     68ch;      /* article body line length                     */

  --sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── RESET ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-padding-top: 5rem; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  background: var(--background);
  color: var(--ink);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--sans); line-height: 1.15; }
h1 { font-weight: 700; }
h2, h3, h4 { font-weight: 700; }

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--navy-light); }
a:hover { color: var(--accent-text); }

/* ── NAV ────────────────────────────────────────────────────────────────── */
/* --navy-deep, not --navy: on the navy hero pages the bar and the hero were
   the same fill and read as one surface. #021F2E is the darkest of the range
   considered and the only one where the CTA fill still clears the 3:1
   non-text threshold against the bar behind it (3.14:1 — #022634 and lighter
   drop under 3). It also gives the widest step from the hero, 1.21:1. */
nav {
  background: var(--navy-deep);
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
}

.nav-brand { display: flex; align-items: center; gap: 0.875rem; }

.nav-logo img { height: 33px; width: auto; }

/* Wordmark tag. Hidden by default and revealed at 901 with the nav links,
   because below that the hamburger claims the space. rgba white at 0.55
   composites to #8D9AA1 on --navy-deep = 5.88:1, so it clears AA at 11px.
   nowrap keeps it from folding under the logo as the bar narrows. */
.nav-links { display: none; list-style: none; gap: 2rem; align-items: center; }

.nav-links li a {
  text-decoration: none;
  color: var(--white);
  font-size: 0.875rem;
  font-weight: 500;
  transition: color 0.2s;
}
/* --accent-navy, not --accent: #EC297B is 3.45:1 on the old bar and only
   4.18:1 on --navy-deep, so it fails AA at 14px either way. #F26EA7 is the
   same hue lifted in lightness and measures 6.11:1 here. */
.nav-links li a:hover { color: var(--accent-navy); }

/* --accent-text, not --accent, as the fill: white on #EC297B is 4.06:1 and
   this label is 14px, which counts as small text. #CE1261 takes it to 5.41:1.
   Hover then has to go a step deeper than the resting state — it used to be
   --accent-text, which is now the resting fill and would leave no visible
   change — so it lands on --accent-deep at 6.46:1. */
.nav-cta {
  background: var(--accent-text);
  color: var(--white) !important;
  padding: 0.5rem 1rem;
  border-radius: 2px;
  transition: background 0.2s, transform 0.2s;
}
.nav-cta:hover { background: var(--accent-deep); transform: translateY(-1px); }

.hamburger {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}
.hamburger span { width: 24px; height: 2px; background: var(--white); transition: 0.3s; }

.mobile-menu {
  display: block;
  position: fixed;
  top: 54px; left: 0; right: 0; bottom: 0;
  background: var(--navy);
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s, visibility 0s linear 0.3s;
  overflow-y: auto;
  z-index: 99;
}
.mobile-menu.open {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transition-delay: 0s;
}

.hamburger:focus-visible,
.mobile-menu a:focus-visible,
.nav-links a:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
}

.mobile-menu a {
  display: block;
  padding: 0.85rem 0;
  color: var(--white);
  text-decoration: none;
  font-size: 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
/* Same swap as the desktop links: --accent is 3.45:1 on the overlay's navy. */
.mobile-menu a:hover { color: var(--accent-navy); }

.mobile-cta {
  background: var(--accent);
  color: var(--white) !important;
  margin-top: 1.25rem;
  text-align: center;
  border-radius: 2px;
  border: none !important;
}

/* ── ARTICLE HERO ───────────────────────────────────────────────────────── */
.article-hero {
  background: var(--navy);
  color: var(--white);
  padding: 2rem 1.25rem 2.5rem;
}

.article-hero-inner { max-width: 1100px; margin: 0 auto; }

.article-breadcrumb {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.6);
  margin-bottom: 1.25rem;
}
.article-breadcrumb a { color: rgba(255,255,255,0.75); text-decoration: none; }
.article-breadcrumb a:hover { color: var(--accent); text-decoration: underline; }
.article-breadcrumb span[aria-current] { color: var(--white); }
.article-breadcrumb .sep { padding: 0 0.4rem; color: rgba(255,255,255,0.35); }

.article-category {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--accent);
  padding: 0.3rem 0.6rem;
  border-radius: 2px;
  margin-bottom: 1rem;
}

.article-hero h1 {
  font-size: clamp(1.9rem, 6vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 1rem;
}

.article-summary {
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255,255,255,0.85);
  max-width: 60ch;
  margin-bottom: 1.5rem;
}

.article-meta {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 1rem;
}
.article-meta strong { color: var(--white); font-weight: 600; }

.article-lead-image { margin-top: 1.75rem; }
.article-lead-image img { width: 100%; border-radius: 4px; }

/* ── LAYOUT: BODY + SIDEBAR ─────────────────────────────────────────────── */
.article-layout {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 3rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}

.article-body { min-width: 0; max-width: var(--measure); }

.article-body p { font-size: 1.0625rem; line-height: 1.7; color: var(--ink); margin-bottom: 1.35rem; }

.article-body h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.015em;
  margin: 2.5rem 0 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--light-gray);
}

.article-body h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--navy);
  margin: 2rem 0 0.75rem;
}

.article-body h4 { font-size: 1rem; font-weight: 700; color: var(--navy); margin: 1.5rem 0 0.6rem; }

.article-body strong { font-weight: 600; color: var(--navy); }

.article-body ul, .article-body ol { margin: 0 0 1.35rem 1.15rem; }
.article-body li { margin-bottom: 0.5rem; line-height: 1.7; }

.article-body a { color: var(--navy-light); text-decoration: underline; text-underline-offset: 2px; }
.article-body a:hover { color: var(--accent-text); }

.article-body blockquote {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  background: var(--white);
  border-left: 4px solid var(--accent);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.4;
  color: var(--navy);
}

/* ── ARTICLE FIGURES ────────────────────────────────────────────────────
   Semantic replacements for the Webflow richtext figure classes that came
   through the CMS export (w-richtext-figure-type-image / -align-fullwidth /
   -align-floatright). Same rendering, no Webflow class names in the repo. */
.article-figure { margin: 2rem 0; }

.article-figure img {
  width: 100%;
  border-radius: 4px;
  border: 1px solid var(--light-gray);
}

.article-figure figcaption {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--gray);
  margin-top: 0.6rem;
}
.article-figure figcaption em { font-style: italic; }

/* ── SECTION JUMP NAV ───────────────────────────────────────────────────
   Inline table of contents inside an article body (remote-onboarding).
   Mono, below body size, hairline above — the eyebrow register, but left
   in sentence case because these are link phrases, not labels. */
.section-jump {
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--gray);
  border-top: 1px solid var(--light-gray);
  padding-top: 0.9rem;
  margin: 2rem 0 2.25rem;
}

.section-jump a {
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid var(--light-gray);
  padding-bottom: 1px;
  transition: color 0.2s, border-color 0.2s;
}

.section-jump a:hover {
  color: var(--accent-text);
  border-bottom-color: var(--accent-text);
}

/* float variant collapses to full width on mobile */
.article-figure--right { margin: 2rem 0; }

/* ── SIDEBAR ────────────────────────────────────────────────────────────── */
.article-sidebar { display: grid; gap: 1.25rem; }

.sidebar-card {
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-radius: 4px;
  padding: 1.25rem;
}

.sidebar-card h3 {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 0.85rem;
}

.sidebar-card p { font-size: 0.9rem; line-height: 1.6; color: var(--gray); margin-bottom: 1rem; }

.sidebar-links { list-style: none; }
.sidebar-links li { margin-bottom: 0.7rem; line-height: 1.4; }
.sidebar-links li:last-child { margin-bottom: 0; }
.sidebar-links a { font-size: 0.9rem; color: var(--navy); text-decoration: none; font-weight: 500; }
.sidebar-links a:hover { color: var(--accent-text); text-decoration: underline; }

.sidebar-cta {
  display: inline-block;
  background: var(--navy);
  color: var(--white);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.7rem 1.1rem;
  border-radius: 2px;
  transition: background 0.2s;
}
.sidebar-cta:hover { background: var(--navy-light); color: var(--white); }

/* ── CTA SECTION ────────────────────────────────────────────────────────
   Left-aligned on the section grid — everything else on the page is
   left-aligned, so centring this broke the document logic. */
.cta-section {
  background: var(--navy);
  padding: 2.75rem 1.25rem;
}

.cta-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  align-items: start;
}

.cta-section h2 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 600;
  color: var(--white);
  letter-spacing: -0.015em;
  margin-bottom: 0.75rem;
}

.cta-section p {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.8);
  max-width: 68ch;
  margin: 0 0 1.5rem;
}

.cta-button {
  display: inline-block;
  background: var(--accent);
  color: var(--white);
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
  padding: 0.9rem 1.9rem;
  border-radius: 2px;
  transition: background 0.2s, transform 0.2s;
}
.cta-button:hover { background: var(--accent-text); color: var(--white); transform: translateY(-2px); }

/* ── FOOTER ─────────────────────────────────────────────────────────────── */
footer {
  background: var(--navy);
  color: rgba(255,255,255,0.7);
  padding: 2.5rem 1.25rem 1.5rem;
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.footer-logo { margin-bottom: 1rem; }
.footer-logo img { height: 26px; width: auto; opacity: 0.9; }

.footer-brand { font-size: 0.9rem; font-weight: 600; color: var(--white); margin-bottom: 0.4rem; }
.footer-address { font-size: 0.85rem; line-height: 1.6; color: rgba(255,255,255,0.55); }

.footer-col-title {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.85rem;
}

.footer-col-links { list-style: none; }
.footer-col-links a {
  display: block;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  font-size: 0.875rem;
  margin-bottom: 0.6rem;
  transition: color 0.2s;
}
.footer-col-links a:hover { color: var(--accent); }

.footer-bottom {
  max-width: 1100px;
  margin: 2rem auto 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.12);
  text-align: center;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
}

/* ── DESKTOP (901px and up) ─────────────────────────────────────────────── */
@media (min-width: 901px) {
  nav { padding: 0.75rem 4rem; }
  .nav-links { display: flex; }
  .hamburger { display: none; }
  .mobile-menu { display: none; }

  .article-hero { padding: 3rem 4rem 3.5rem; }
  .article-lead-image { margin-top: 2.25rem; }

  .article-layout {
    padding: 4rem;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 4rem;
  }

  .article-body h2 { font-size: 1.75rem; margin: 3rem 0 1.15rem; padding-top: 2rem; }

  /* float variant only floats where there is room for it */
  .article-figure--right {
    float: right;
    width: 42%;
    margin: 0.4rem 0 1.5rem 2rem;
  }

  .article-sidebar { position: sticky; top: 5rem; }

  .cta-section { padding: 4.5rem 4rem; }

  footer { padding: 4rem 4rem 2rem; }
  .footer-inner { grid-template-columns: 2fr 1fr; gap: 4rem; }
}

/* ==========================================================================
   CONTENT PAGES
   Patterns below are shared by index / work / capabilities / company /
   contact. Nothing here is page-specific enough to justify inline CSS.
   ========================================================================== */

/* ── PAGE HERO ──────────────────────────────────────────────────────────
   Left-aligned to the same 1100px measure as the section grid. */
.page-hero {
  background: var(--navy);
  color: var(--white);
  padding: 1.25rem 1.25rem 1.5rem;
}

.page-hero-inner { max-width: 1100px; margin: 0 auto; }

.page-hero h1 {
  font-size: var(--h1-size);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 1rem;
}

.tagline {
  font-family: var(--sans);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--accent);
  margin-bottom: 1.25rem;
}

.page-hero .lede {
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.55;
  color: rgba(255,255,255,0.85);
  max-width: 62ch;
}

/* Hero video. Sits on the same left axis as the h1 — no offset, no card
   chrome. Caption uses the eyebrow register; --gray is only 2.90:1 on navy,
   so the caption is set in a light tint that clears AA instead. */
.hero-copy { min-width: 0; }

/* Hero eyebrow. Same register as the section eyebrows; --light-gray rather
   than --accent because #EC297B is only 3.45:1 on navy and 11px counts as
   small text. --light-gray measures 11.77:1. */
.hero-eyebrow {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--light-gray);
  margin-bottom: 0.9rem;
}

.hero-video {
  margin: 1.75rem 0 0;
  max-width: none;
}

.hero-video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 2px;
  background: #000;
}

.hero-video figcaption {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: rgba(255,255,255,0.7);
  margin-top: 0.75rem;
}

/* Video overlay. Hidden entirely unless JS has run (.has-js), so a no-JS
   visitor sees the native controls that ship in the markup instead of a dead
   button. Two modes: play (bare white triangle over a light navy wash) and
   replay (bordered mono label over a heavier wash). */
.hero-video-frame { position: relative; }

.hero-video-overlay { display: none; }

.hero-video.has-js .hero-video-overlay {
  display: flex;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  background: transparent;               /* no scrim over the poster */
  border-radius: 2px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 160ms ease;
}

/* Replay keeps its wash: the paused end-frame is not the point there, and the
   bordered label needs the contrast. Only the play state is unwashed. */
.hero-video.has-js .hero-video-overlay.is-replay-mode {
  background: rgba(3, 47, 69, 0.8);
}

.hero-video.has-js .hero-video-overlay.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.hero-video-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.75rem;
  transition: opacity 160ms ease;
}

/* Play: CSS triangle, no label, no border, no shadow. */
.hero-video-btn.is-play::before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 22.5px 0 22.5px 39px;    /* 1.5x */
  border-color: transparent transparent transparent var(--white);
  /* drop-shadow follows the triangle's alpha, unlike box-shadow which would
     shadow the element's rectangle. */
  filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.55));
}
.hero-video-btn.is-play .hero-video-btn__label { display: none; }
.hero-video-btn.is-play:hover { opacity: 0.82; }

/* Replay: bordered mono label. */
.hero-video-btn.is-replay {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  border: 1px solid var(--white);
  border-radius: 2px;
  padding: 0.65rem 1.15rem;
  transition: background 160ms ease;
}
.hero-video-btn.is-replay:hover { background: rgba(255,255,255,0.14); }
.hero-video-btn.is-replay::before { content: none; }

.hero-video-btn:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .hero-video-overlay, .hero-video-btn { transition: none; }
}

/* ── SECTIONS ───────────────────────────────────────────────────────────
   Two-column document grid. Left rail carries the eyebrow, right column
   carries heading + content. One background throughout; sections are
   separated by a hairline, not by alternating colour bands. */
.section { padding: 2.5rem 1.25rem; border-top: 1px solid var(--light-gray); }
.page-hero + .section { border-top: none; }

.section-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  align-items: start;
}

/* --navy-light rather than --gray: at 11px the eyebrows were reading as
   incidental against the page. #0A4A6B measures 8.88:1 on --background where
   --gray was 4.67:1. The rule leads the label in the same way the em-dash
   lead-ins do, and sits ON the section axis with the text offset past it —
   24px rule + 0.5rem gap = the 2rem padding. */
.section-label {
  position: relative;
  padding-left: 2rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-light);
}

.section-label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 24px;
  height: 1px;
  background: var(--gray);
}

.section-body { min-width: 0; }

.section h2 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.01em;
  margin-bottom: 1.25rem;
}

.section h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--navy);
  margin: 1.75rem 0 0.6rem;
}

/* A heading may sit in the rail as the label (see principles.html "What we
   build"). .section h2 outranks .section-label, so restate it here. */
.section h2.section-label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-light);
  margin-bottom: 0;
  line-height: 1.4;
}

/* Prose is measured; structural elements (tables, lists, grids) are not,
   so they fill the full grid column rather than stopping short. */
.prose p { font-size: 1.0625rem; line-height: 1.6; max-width: 68ch; margin-bottom: 1.25rem; }
.prose p:last-child { margin-bottom: 0; }
.prose a { color: var(--navy-light); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--accent-text); }

/* ── HEALTHCONVOS ─────────────────────────────────────────────────────── */
.hc-hero {
  background: var(--navy);
  color: var(--white);
  padding: 2.5rem 1.25rem 3rem;
}

.hc-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

.hc-hero h1 {
  max-width: 13ch;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.03;
  letter-spacing: -0.025em;
  margin-bottom: 1.25rem;
}

.hc-lede {
  max-width: 58ch;
  color: rgba(255,255,255,0.85);
  font-size: 1.125rem;
  line-height: 1.6;
  margin-bottom: 1.75rem;
}

.hc-primary-cta { background: var(--accent-text); }

.hc-cta-note {
  color: rgba(255,255,255,0.65);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  margin-top: 0.75rem;
}

.hc-demo {
  background: var(--white);
  color: var(--ink);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 22px 60px rgba(0,0,0,0.24);
}

.hc-demo-bar {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.9rem 1rem;
  background: var(--navy-deep);
  color: rgba(255,255,255,0.65);
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.05em;
}

.hc-demo-status { color: var(--white); font-weight: 600; }
.hc-demo-status span {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-navy);
  margin-right: 0.35rem;
}

.hc-demo-body { padding: 1.5rem; }
.hc-prompt {
  color: var(--navy);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.3;
  max-width: 24ch;
  margin-bottom: 1.5rem;
}

.hc-response {
  background: var(--background);
  border-left: 3px solid var(--navy-light);
  padding: 1rem;
  margin-left: 1rem;
}

.hc-response-label {
  display: block;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 0.35rem;
}

.hc-response p, .hc-voice p { font-size: 0.9rem; line-height: 1.55; }
.hc-voice {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 0.9rem;
  align-items: start;
  border-top: 1px solid var(--light-gray);
  margin-top: 1.5rem;
  padding-top: 1.25rem;
}

.hc-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--navy);
  color: var(--white);
  font-weight: 700;
}

.hc-voice strong { display: block; color: var(--navy); margin-bottom: 0.2rem; }
.hc-steps, .hc-assurances { display: grid; gap: 1px; background: var(--light-gray); }
.hc-step, .hc-assurances > div { background: var(--background); padding: 1.25rem 0; }
.hc-step > span {
  font-family: var(--mono);
  color: var(--accent-text);
  font-size: 0.7rem;
  font-weight: 600;
}
.hc-step h3, .hc-assurances h3 { margin-top: 0.45rem; }
.hc-step p, .hc-assurances p { color: var(--gray); max-width: 35ch; }
.hc-closing .hero-eyebrow { margin-bottom: 0.85rem; }
.hc-closing-note {
  font-size: 0.75rem !important;
  color: rgba(255,255,255,0.6) !important;
  margin-top: 1rem !important;
  margin-bottom: 0 !important;
}

@media (min-width: 901px) {
  .hc-hero { padding: 5rem 4rem 5.5rem; }
  .hc-hero-inner { grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.75fr); gap: 5rem; }
  .hc-demo-bar { flex-direction: row; justify-content: space-between; }
  .hc-demo-body { padding: 2rem; }
  .hc-steps, .hc-assurances { grid-template-columns: repeat(3, 1fr); }
  .hc-step, .hc-assurances > div { padding: 0 1.5rem; }
  .hc-step:first-child, .hc-assurances > div:first-child { padding-left: 0; }
  .hc-step:last-child, .hc-assurances > div:last-child { padding-right: 0; }
}

/* ── PRINCIPLES ─────────────────────────────────────────────────────────
   Plain text in two columns, separated by the same hairline the roster
   list uses. No borders, boxes or rules. */
/* .cards is an alias of .principles for generic card grids (process steps,
   FAQ pairs, entry points). Same rules, semantically neutral name — so
   .principles stays reserved for the two-rule pattern it was built for. */
.principles,
.cards { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 1.25rem; }

.principle,
.card {
  border-top: 1px solid var(--light-gray);
  padding: 1.1rem 0;
}

.principle h3,
.card h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 0.4rem;
}

.principle p,
.card p { font-size: 1.0625rem; line-height: 1.6; color: var(--ink); margin: 0; max-width: 68ch; }

/* Homepage offer architecture: one-up by default, two-up at tablet widths,
   and all three capability groups on one row when the measure supports it. */
@media (min-width: 640px) {
  .cards.cards-offers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 3rem; }
}

@media (min-width: 1024px) {
  .cards.cards-offers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── BUILD LIST ─────────────────────────────────────────────────────────
   Breaks out of the document grid to use the full content measure. The
   320px track floor is set by the longest item ("Full-stack web and mobile
   development", ~317px at 1.0625rem) so nothing wraps: auto-fit yields
   1 column on mobile, 2 on tablet, 3 at full width. Wrapped in min() for the
   same reason as .capabilities-list — a bare floor is not a maximum, so at
   320px viewport the 320px track overran the 280px column. */
.build-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 0 2rem;
  margin-top: 1rem;
}

.build-list li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--light-gray);
  font-size: 1.0625rem;
  line-height: 1.5;
}

/* Same hairline treatment as .roster / .build-list. Wider track floor because
   the longest item ("Conversation-driven video and multimedia systems") sets
   longer than anything in the build list — but min(400px, 100%) so the floor
   yields once the container is narrower than it: a bare 400px floor is not a
   maximum, so below ~470px the track overran the column and pushed the page
   into horizontal scroll. The indent declarations here were previously a
   second .capabilities-list rule further up the sheet; folded in, since two
   rules for one selector made the effective indent easy to miss. */
.capabilities-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  gap: 0 2rem;
  margin-top: 1rem;
  margin-left: 1.5rem;
  padding-left: 1rem;
}

.capabilities-list li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--light-gray);
  font-size: 1.0625rem;
  line-height: 1.5;
}

/* Single credential line beneath the build list. No certifications. */
.partner-note {
  font-size: 0.9rem;
  color: var(--gray);
  margin-top: 1.25rem;
}

/* ── PRINCIPLES PAGE (manifesto) ─────────────────────────────────────────
   The number is the design element: it occupies the left rail of the
   document grid where other pages put an eyebrow. No cards, no borders,
   no icons — separation comes from the section hairline and whitespace. */
.principle-block { padding-top: 2.75rem; padding-bottom: 2.75rem; }

.principle-number {
  font-family: var(--mono);
  font-size: clamp(2rem, 5.5vw, 3.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent);
}

.principle-statement {
  font-size: clamp(1.6rem, 3vw, 2.35rem);
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 1rem;
}

/* The signature trails the six; it is not a seventh item, so no rule. */
.signature-section { border-top: none; padding-top: 1.5rem; }

.signature {
  text-align: right;
  font-size: 0.95rem;
  color: var(--gray);
  max-width: 68ch;
}

/* ── METRICS ────────────────────────────────────────────────────────────── */
.metrics { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin: 1.5rem 0; }

.metric {
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-radius: 4px;
  padding: 1.5rem;
}

.metric-value {
  font-family: var(--mono);
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--navy);
  margin-bottom: 0.5rem;
}

.metric-label { font-size: 0.9rem; line-height: 1.5; color: var(--gray); }

/* ── FACT LIST (entity / credential data) ───────────────────────────────── */
.fact-list { margin: 0; }

.fact-list div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.15rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--light-gray);
}
.fact-list div:first-child { border-top: 1px solid var(--light-gray); }

.fact-list dt {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray);
}

.fact-list dd { font-family: var(--mono); font-size: 0.9375rem; color: var(--ink); margin: 0; font-variant-numeric: tabular-nums; }

/* ── PLAIN LISTS (roster, competencies) ─────────────────────────────────── */
.roster { list-style: none; columns: 1; margin-top: 1rem; }
.roster li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--light-gray);
  font-size: 1rem;
  break-inside: avoid;
}

.competencies { list-style: none; display: grid; grid-template-columns: 1fr; gap: 0.55rem; margin-top: 1rem; }
.competencies li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 1rem;
  line-height: 1.55;
}
.competencies li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.55em;
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
}

/* ── ENGAGEMENT / TIMELINE ENTRIES ──────────────────────────────────────── */
.entry { padding: 1.5rem 0; border-top: 1px solid var(--light-gray); }
.entry:first-of-type { border-top: none; padding-top: 0; }

.entry h3 { margin: 0 0 0.3rem; font-size: 1.2rem; font-weight: 600; color: var(--navy); }

.entry-date {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 0.6rem;
}

.entry p { font-size: 1.0625rem; line-height: 1.7; margin-bottom: 0.9rem; max-width: var(--measure); }
.entry p:last-child { margin-bottom: 0; }

/* ── CONTACT ────────────────────────────────────────────────────────────── */
.contact-list { list-style: none; margin-top: 1rem; }
.contact-list li { padding: 0.9rem 0; border-bottom: 1px solid var(--light-gray); }
.contact-list li:first-child { border-top: 1px solid var(--light-gray); }

.contact-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 0.2rem;
}

.contact-value { font-size: 1.15rem; color: var(--navy); text-decoration: none; font-weight: 600; }
a.contact-value:hover { color: var(--accent-text); text-decoration: underline; }

/* ── DESKTOP ────────────────────────────────────────────────────────────── */
@media (min-width: 901px) {
  .page-hero { padding: 1.75rem 4rem 2rem; }

  .section { padding: 3.25rem 4rem; }
  .principle-block { padding-top: 4.5rem; padding-bottom: 4.5rem; }

  /* Single alignment axis: the rail is gone. Eyebrow stacks above the
     heading and every element — hero h1 included — shares one left edge. */

  .principles,
  .cards { grid-template-columns: 1fr 1fr; gap: 0 3rem; }

  /* auto-fit, not a fixed pair: at 901px a fixed 2-up leaves a 173px
     content box and "38 seconds" (215px) wraps. 280px floor = 215px value
     + 2rem card padding either side. Card treatment itself is unchanged. */
  .metrics { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; }
  .metric { padding: 2rem; }

  .fact-list div { grid-template-columns: 200px 1fr; gap: 1.5rem; align-items: baseline; }

  .roster { columns: 2; column-gap: 3rem; }
  .competencies { grid-template-columns: 1fr 1fr; gap: 0.7rem 2.5rem; }
}

/* ── PRODUCTION FLOW ────────────────────────────────────────────────────
   The stacked card diagram in the elearning hero. Base-level on purpose:
   these are the panel's own visuals and they apply at every width. Above
   1140px .page-hero-inner places it in the hero's second column; below that
   the hero stacks and the panel runs full-measure. Nothing here depends on
   which of the two is happening, so nothing here is in a width query. The
   only width-dependent rule is the sub-640px .flow-tech stack, kept below. */

.production-flow {
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 6px;
  padding: 1.25rem 1.375rem 1.375rem;
  background: rgba(255,255,255,0.025);
}

/* Stacked hero only. Below 1140 the panel follows the lede in normal flow and
   otherwise sits flush against it — measured 0px. Above 1140 it occupies its
   own grid column and must carry no top margin, so this is width-dependent in
   the real sense and stays in a query. */
@media (max-width: 1139.98px) {
  .production-flow { margin-top: 2rem; }
}

.flow-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.125rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid rgba(255,255,255,0.16);
}

.flow-dots { display: flex; gap: 6px; }

.flow-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
}

.flow-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

.flow-stack { display: grid; gap: 0.75rem; }

.flow-card {
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 5px;
  padding: 1rem 1.0625rem;
  background: rgba(255,255,255,0.02);
}

.flow-card.is-final {
  border-color: rgba(236,41,123,0.55);
  background: rgba(236,41,123,0.07);
}

/* --accent-navy rather than --accent: #EC297B is 3.45:1 on navy and 11px is
   small text. The hero eyebrow hit the same wall and resolved it with
   --light-gray, but this label is the only accent note inside the flow panel
   — dropping to grey would leave the panel monochrome — so it keeps the hue
   and lifts the lightness instead: same 334° magenta at 69% rather than 54%,
   which measures 5.05:1. Chosen over the 66% step (4.61:1) for the margin. */
.flow-kicker {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-navy);
  margin-bottom: 0.3125rem;
}

.flow-title {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
}

.flow-copy {
  margin-top: 0.3125rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.7);
}

.flow-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 0.6875rem;
}

.flow-pill {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  color: rgba(255,255,255,0.75);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 999px;
  padding: 4px 8px;
}

.flow-arrow {
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.35);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 15px;
}

.flow-tech {
  margin-top: 1rem;
  padding-top: 0.875rem;
  border-top: 1px solid rgba(255,255,255,0.16);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.875rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: rgba(255,255,255,0.55);
}

@media (max-width: 640px) {
  .flow-tech { flex-direction: column; align-items: flex-start; gap: 0.375rem; }
}

/* Entrance animation — disabled for reduced-motion users */
@media (prefers-reduced-motion: no-preference) {
  .flow-card,
  .flow-arrow,
  .flow-tech {
    opacity: 0;
    animation: flowIn 0.45s ease forwards;
  }
  .flow-stack > *:nth-child(1) { animation-delay: 0.12s; }
  .flow-stack > *:nth-child(2) { animation-delay: 0.30s; }
  .flow-stack > *:nth-child(3) { animation-delay: 0.42s; }
  .flow-stack > *:nth-child(4) { animation-delay: 0.60s; }
  .flow-stack > *:nth-child(5) { animation-delay: 0.72s; }
  .flow-tech { animation-delay: 0.95s; }
}

@keyframes flowIn {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}

/* ── HERO TWO-COLUMN ─────────────────────────────────────────────────────
   Side-by-side only from 1140px. Below that the 360px column leaves the left
   column under ~573px and the H1 breaks to three lines, ending up narrower
   than the body copy beneath it — so the hero stacks instead. 1140 is the
   measured threshold: at 1120 the left column is 553px and still wraps to 3
   lines; at 1140 it reaches 573px and holds at 2. */
@media (min-width: 1140px) {
  .page-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    column-gap: 4rem;
    row-gap: 0;
    align-items: start;
  }

  /* The eyebrow is its own full-width row above both columns, so the copy and
     the video share a row origin — which is what lets the cap-height offset
     below resolve against the H1 again. Its own margin-bottom does the
     spacing, hence row-gap: 0. */
  .hero-eyebrow { grid-column: 1 / -1; }

  /* Top-align the video to the H1's CAP HEIGHT, not its box top: half-leading
     + (ascender - cap height) = a constant 0.3548 x font-size for IBM Plex
     Sans 700, so it tracks the clamped H1 responsively. */
  .hero-video {
    margin-top: calc(var(--h1-size) * 0.3548);
    max-width: 360px;
  }
}

/* ==========================================================================
   PAGE SCOPE — elearning development (body.page-elearning)
   Hero rebalance for the one page whose hero carries the production-flow
   panel instead of the video. Everything here is behind body.page-elearning
   so index and the rest keep the shared .page-hero geometry untouched.
   ========================================================================== */

/* H1 tops out at 3rem rather than 4.5rem. Same 2.5rem floor and same 6vw
   growth — the only change is where it stops. 3rem is measured, not chosen:
   in the 518px column that an equal split yields at 1440, 48px is the largest
   size still setting "Need a course built? Send us what you have." to two
   lines, breaking on the clause. 52px orphans "have." to a third line unless
   left column widens to 552px, and 56px needs 596px — both of which trade the
   equal columns away. The var is overridden rather than the h1 rule so
   anything else keyed to --h1-size on this page tracks it. */
body.page-elearning {
  --h1-size: clamp(2.5rem, 6vw, 3rem);
}

/* Headroom above the eyebrow. The two hero columns are uneven in height —
   the copy runs shorter than the flow panel beside it — so the hero needs
   air at the top to stop reading as tight under the nav. Roughly double the
   previous 68px: 8rem at 1440 and up, ramping down with the viewport to the
   3.75rem floor, which is where the stacked mobile hero sat before and still
   wants to sit. One rule rather than a base/901 pair — the shared .page-hero
   padding shorthand at 901 resets padding-top, but this selector outweighs
   it (0,2,1 vs 0,1,0) at every width, so the clamp holds throughout. */
body.page-elearning .page-hero {
  padding-top: clamp(3.75rem, 8.9vw, 8rem);
}

@media (min-width: 1140px) {
  /* Even split instead of a 360px sidebar. The flow panel is a peer of the
     copy, not an aside, and at 1100px measure less 4rem gap that puts both
     columns at 518px. The wider right column also takes .flow-tech off two
     lines: its two spans measure 125px + 198px + 14px gap = 337px, which
     overran the old 360px column's 316px content box and now clears the
     472px one. Gap stays 4rem. */
  body.page-elearning .page-hero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

    /* Vertical centring. The panel is much taller than the copy, so with the
       shared align-items: start the text stranded itself at the top of the
       column. Centring cannot be done with align-items alone here: the
       eyebrow is a separate grid item from .hero-copy, so per-item alignment
       centres each one inside its own row and opens a gap between the eyebrow
       and the H1. Instead the eyebrow moves into column 1 with the copy, and
       a 1fr spacer track above and below absorbs the surplus height — the
       panel spans all four rows and sets the container height, so eyebrow +
       H1 + tagline + lede centre together as one block. */
    grid-template-rows: 1fr auto auto 1fr;
  }

  body.page-elearning .hero-eyebrow    { grid-column: 1; grid-row: 2; }
  body.page-elearning .hero-copy       { grid-column: 1; grid-row: 3; }
  body.page-elearning .production-flow { grid-column: 2; grid-row: 1 / -1; }

  /* Inside the two-column band the copy column is half the measure, so it
     narrows with the viewport — 518px at 1440 and up, 504 at 1200, 474 at
     1140 — while a flat 3rem max would stay 48px and drop the headline back
     to three lines under 1440. The measured two-line minimum is 512px at
     48px and 468px at 44px, so the max ramps linearly between those: 3rem at
     1440+, 2.75rem at 1140. Continuous, so there is no jump on resize. Below
     1140 the hero stacks full-width and the shared 6vw curve takes over. */
  body.page-elearning {
    --h1-size: clamp(2.5rem, calc(1.8rem + 1.3333vw), 3rem);
  }
}

/* ── CARD TREATMENT ─────────────────────────────────────────────────────
   The shared .card is hairline-separated text — a top rule and vertical
   padding, nothing else. On --background (#F5F7FA) that reads as plain body
   copy rather than as cards. This page carries the production-flow panel in
   its hero, so the section grids below it are given the same register: flat,
   bordered, quiet. No shadow, no gradient, no hover lift — the only
   difference from the flow cards is that these sit on light rather than navy.

   Applies to the three .cards grids on this page (three ways to start,
   process, questions). .principle is deliberately not included: it keeps the
   hairline pattern it was built for, and this page does not use it. */

body.page-elearning .card {
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-radius: 5px;
  padding: 1.25rem;
}

/* Real gap instead of shared hairlines. The shared rule sets gap: 0 at base
   and 0 3rem from 901px — a column gutter for text columns, with rows still
   butted. Bordered surfaces need separation on both axes, so this sets a
   single uniform gap. Specificity (0,2,1) carries it over the 901px rule at
   every width without a second media query. */
body.page-elearning .cards {
  gap: 1rem;
}

/* ── ENTRY-POINT CARDS ──────────────────────────────────────────────────
   The "three ways to start" grid only. .cards-entry keeps this off the
   process and questions grids, which stay on the shared 1-then-2 column
   pattern with no kickers. */

/* Numbered kicker. Sentence case, so no text-transform — the mono face and
   the 0.02em tracking carry it. --gray is 4.67:1 on --white, which the card
   surface is, so it clears AA at 13px. */
body.page-elearning .cards-entry .card-kicker {
  display: block;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--gray);
  margin-bottom: 0.75rem;
}

/* Three across from 1024. Below that the third card would either orphan onto
   its own row or squeeze under ~230px of text column, so it steps down to two
   at 640 and one below — 640 is where a two-up card drops under ~290px and
   the h3 starts breaking across three lines. Cards stretch to the row height
   by grid default, so the bottoms stay level. */
@media (min-width: 640px) {
  body.page-elearning .cards-entry {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  body.page-elearning .cards-entry {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ── PROCESS STEPS ──────────────────────────────────────────────────────
   The process grid only. The same quiet white surface, light border and
   compact radius used elsewhere on this page gives each step a clear edge
   without adding shadow, motion or another visual language. */

/* More breathing room between steps than the other card grids. */
body.page-elearning .cards-steps {
  gap: 2rem 2.5rem;
}

body.page-elearning .cards-steps .card {
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-radius: 5px;
  padding: 1.25rem;
}

/* Number and label carry different faces inside one heading. The middle dot
   rides with the number in mono/--navy-light so it reads as a separator while
   remaining distinct from the label. */
body.page-elearning .cards-steps h3 {
  font-family: var(--sans);
  font-weight: 600;
  color: var(--navy);
}

body.page-elearning .cards-steps .step-num {
  font-family: var(--mono);
  font-weight: 400;
  color: var(--navy-light);
}

/* Two columns at tablet widths. */
@media (min-width: 640px) and (max-width: 1023.98px) {
  body.page-elearning .cards-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Four equal cards across at desktop widths. */
@media (min-width: 1024px) {
  body.page-elearning .cards-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ── WHAT YOU GET (fact list) ───────────────────────────────────────────
   The shared .fact-list sets both columns in mono, which reads as one flat
   texture when the definitions are full sentences rather than data. Here the
   term column keeps the mono/uppercase label treatment, lifted to
   --navy-light for clearer hierarchy, and the
   definitions move to sans at page body size, so the two columns contrast. */

body.page-elearning .fact-list dd {
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-variant-numeric: normal;
}

body.page-elearning .fact-list {
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-radius: 5px;
  overflow: hidden;
}

body.page-elearning .fact-list dt {
  color: var(--navy-light);
}

/* More air per row so each fact reads as its own band between hairlines. */
body.page-elearning .fact-list div {
  padding: 1.25rem;
}

body.page-elearning .fact-list div:first-child { border-top: 0; }
body.page-elearning .fact-list div:last-child { border-bottom: 0; }

/* Wider gutter between term and definition once the row splits into columns
   (901px, where the shared rule sets 200px/1fr at 1.5rem). */
@media (min-width: 901px) {
  body.page-elearning .fact-list div {
    gap: 2.5rem;
  }
}

/* ── WHY CLICK-VIDEO ────────────────────────────────────────────────────
   Card on the left, hairline-separated claims on the right. Stacked below
   1024; from there the split is 2fr/3fr, i.e. 40/60. */

body.page-elearning .why-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  margin-top: 1.25rem;
}

@media (min-width: 1024px) {
  body.page-elearning .why-grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 2.5rem;
    align-items: center;
  }
}

/* Same construction as the .production-flow cards — 1px rule, 5px radius,
   a fill one step off the page — but resolved for a light ground, so the
   fill is --white on --background rather than a white wash on navy. */
body.page-elearning .why-card {
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-radius: 5px;
  padding: 1.25rem;
}
/* No align-self here: the card takes align-items from .why-grid, which centers
   it against the taller list from 1024 up. Below that the grid is one column
   per row, so vertical alignment has nothing to resolve against. */

/* --accent-text, not --accent: 11px counts as small text and #EC297B is only
   3.78:1 on white. #CE1261 measures 5.41:1. */
body.page-elearning .why-kicker {
  display: block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 0.75rem;
}

body.page-elearning .why-card p {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
}

/* Rules between rows only — never above the first or below the last. */
body.page-elearning .why-row {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  padding: 0.9rem 0;
}

body.page-elearning .why-row:first-child { padding-top: 0; }
body.page-elearning .why-row:last-child  { padding-bottom: 0; }

body.page-elearning .why-row + .why-row {
  border-top: 1px solid var(--light-gray);
}

/* nowrap keeps the lead-in whole; each one is well under the narrowest
   column so it never forces a horizontal scroll. */
body.page-elearning .why-row strong {
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
}

/* Closing line. Already a sibling of .why-grid inside .section-body, so it
   spans the full section width rather than sitting in either column — this
   only buys it enough clearance to read as a separate beat under the pair. */
body.page-elearning .why-grid + .prose {
  margin-top: 3rem;
}