/*
 * overrides.css
 *
 * Site-wide visual overrides that intentionally do NOT live in styles.css
 * (the design source-of-truth per CLAUDE.md §15). Loaded in header.php
 * AFTER styles.css and mobile.css so the cascade favors anything declared
 * here.
 *
 * Keep this file short and well-commented — each block should explain
 * what it's overriding and why.
 */

/*
 * Unify all section backgrounds to pure white.
 *
 * The base design alternates sections between --paper (#ffffff) and
 * --frost (#F9FDFF, a very pale blue tint). The site owner asked
 * for white everywhere, so we collapse --frost onto --paper. This
 * propagates through every `background: var(--frost)` rule in
 * styles.css without having to touch the stylesheet.
 *
 * Note: --frost is also used inside one gradient on .founder-image
 * (a placeholder background when no founder photo is uploaded). The
 * gradient still resolves — it just starts from pure white now,
 * which is the intended behavior here.
 */
:root {
  --frost: #ffffff;
}

/*
 * #join sections (final-cta block at the bottom of the homepage and a
 * couple of listing pages) get the same navy background + light
 * text treatment that .audience uses, so the two adjacent dark bands
 * read as one cohesive footer-area. Scoped to `#join` only — other
 * final-cta variants (buttons mode on /referrals, /ce-credits, etc.)
 * keep their default light treatment.
 */
.final-cta#join {
  background: var(--navy);
  color: var(--paper);
}

.final-cta#join .eyebrow {
  color: rgba(255, 255, 255, 0.7);
}

/* h2 stays light by inheritance; the italic <em> accent keeps its
   sky color from styles.css — works well on the dark ground. */

.final-cta#join p {
  color: rgba(255, 255, 255, 0.85);
}

.final-cta#join .newsletter-fine {
  color: rgba(255, 255, 255, 0.65);
}

/* Newsletter form already has its own white pill background, so the
   inputs and submit button remain legible without further changes. */


/* =============================================================
   /ce-credits page — new bespoke blocks
   credential-hero, ce-breakdown, comparison-table, certificate-preview

   All styling for these four blocks lives here (not styles.css per
   CLAUDE.md §15). Visual language deliberately leans into:
     - Oversized display serifs (DM Serif Display) for credit numerals
     - Asymmetric two-column grids with a "card on dark" emblem panel
     - Subtle ring/seal motifs evoking accreditation officialdom
     - Tone-coded segments using brand variables (azure / sky /
       slate / ink) — no new colors introduced.
   ============================================================= */

/* ---------- credential-hero ---------- */

.ce-hero {
  position: relative;
  padding: clamp(64px, 9vw, 120px) 0 clamp(48px, 6vw, 80px);
  background:
    radial-gradient(60% 80% at 85% 15%, rgba(19, 100, 159, 0.06), transparent 60%),
    radial-gradient(50% 70% at 10% 90%, rgba(27, 147, 207, 0.05), transparent 60%),
    var(--paper);
  overflow: hidden;
}

.ce-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(19, 100, 159, 0.04) 1px, transparent 1px);
  background-size: 80px 100%;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent);
}

.ce-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

.ce-hero-eyebrow {
  margin-bottom: var(--space-18);
  /* color from global .eyebrow rule (var(--midnight)) */
}

.ce-hero-title {
  font-size: var(--fs-display-1);
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 0 0 22px;
  max-width: 18ch;
}

.ce-hero-title em {
  color: var(--sky);
  font-style: italic;
}

.ce-hero-deck {
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.55;
  color: var(--midnight);
  max-width: 56ch;
  margin: 0 0 32px;
}

.ce-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-14);
  margin-bottom: 0;
}

/* --- emblem (right column) --- */

.ce-hero-emblem {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-14);
}

.ce-emblem {
  position: relative;
  width: min(360px, 92%);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 40%, var(--azure), var(--navy) 75%);
  color: var(--paper);
  border-radius: 50%;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 30px 60px -20px rgba(12, 43, 62, 0.35),
    0 10px 30px -10px rgba(12, 43, 62, 0.25);
}

.ce-emblem-ring {
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
}

.ce-emblem-ring::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 50%;
}

.ce-emblem-tick {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sky);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12);
}
.ce-emblem-tick--n { top: -5px;    left: calc(50% - 5px); }
.ce-emblem-tick--s { bottom: -5px; left: calc(50% - 5px); }
.ce-emblem-tick--e { right: -5px;  top:  calc(50% - 5px); }
.ce-emblem-tick--w { left: -5px;   top:  calc(50% - 5px); }

.ce-emblem-inner {
  text-align: center;
  padding: var(--space-12);
}

.ce-emblem-num {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(4.2rem, 9vw, 7rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--paper);
}

.ce-emblem-label {
  margin-top: var(--space-10);
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  max-width: 14ch;
  margin-inline: auto;
}

.ce-emblem-chip {
  position: absolute;
  right: -14px;
  bottom: 24px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-12) var(--space-16);
  background: var(--sky);
  color: var(--paper);
  border-radius: var(--radius-pill);
  box-shadow: 0 12px 24px -8px rgba(17, 117, 166, 0.5);
  transform: rotate(6deg);
}

.ce-chip-num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1;
}

.ce-chip-label {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ce-emblem-caption {
  font-size: 0.82rem;
  color: var(--midnight);
  letter-spacing: 0.06em;
  margin: 0;
  text-align: center;
}

/* --- accreditation tiles strip --- */

.ce-cred-tiles {
  list-style: none;
  margin: clamp(48px, 6vw, 72px) 0 0;
  padding: var(--space-24);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-1);
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.ce-cred-tile {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-20) var(--space-22);
  background: var(--paper);
  position: relative;
}

.ce-cred-tile--linked { padding: 0; }

.ce-cred-tile-link {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-20) var(--space-22);
  color: inherit;
  text-decoration: none;
  width: 100%;
  height: 100%;
  transition: background 0.18s ease, transform 0.18s ease;
}

.ce-cred-tile-link:hover,
.ce-cred-tile-link:focus-visible {
  background: rgba(19, 100, 159, 0.04);
  color: inherit;
  text-decoration: none;
}

.ce-cred-tile-link:focus-visible {
  outline: 2px solid var(--azure);
  outline-offset: -2px;
}

.ce-cred-tile--linked .ce-cred-name {
  color: var(--azure);
}

/* Image-mode hero figure (replaces the credit emblem when admin sets a hero image) */
.ce-hero-emblem--image {
  align-items: stretch;
  justify-content: flex-start;
}

.ce-hero-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  align-items: stretch;
  width: 100%;
}

.ce-hero-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-hero-image);
  box-shadow: 0 30px 60px -30px rgba(12, 43, 62, 0.45);
}

.ce-cred-abbr {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.55rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--navy);
  padding: var(--space-10) var(--space-12);
  background: rgba(19, 100, 159, 0.08);
  border-radius: var(--radius-chip);
  flex: 0 0 auto;
}

.ce-cred-body { min-width: 0; }

.ce-cred-name {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
}

.ce-cred-tag {
  font-size: 0.74rem;
  color: var(--midnight);
  margin-top: var(--space-4);
  letter-spacing: 0.04em;
}

@media (max-width: 820px) {
  .ce-hero-grid {
    grid-template-columns: 1fr;
  }
  .ce-hero-emblem {
    order: 2;
  }
  .ce-emblem {
    width: min(280px, 75%);
  }
  .ce-emblem-num {
    font-size: clamp(3.6rem, 14vw, 5rem);
  }
}


/* ---------- ce-breakdown ---------- */

.ce-breakdown {
  padding: var(--space-section-y) 0;
  background: var(--paper);
}

.ce-bd-card {
  margin-top: clamp(32px, 4vw, 48px);
  padding: clamp(28px, 4vw, 44px);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card-lg);
  box-shadow: 0 30px 60px -40px rgba(12, 43, 62, 0.25);
}

.ce-bd-totals {
  display: flex;
  align-items: baseline;
  gap: var(--space-18);
  flex-wrap: wrap;
  padding-bottom: var(--space-18);
  border-bottom: 1px dashed var(--rule);
  margin-bottom: var(--space-22);
}

.ce-bd-total-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.6rem, 4.6vw, 3.8rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--navy);
}

.ce-bd-total-label {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--midnight);
}

.ce-bd-bar {
  display: flex;
  width: 100%;
  height: 96px;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--rule);
  gap: var(--space-2);
  padding: var(--space-2);
}

.ce-bd-seg {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: var(--space-14) var(--space-18);
  color: var(--paper);
  min-width: 0;
  border-radius: var(--radius-card);
  transition: filter 0.2s ease;
  overflow: hidden;
}

.ce-bd-seg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 8px, transparent 8px 16px);
  pointer-events: none;
}

.ce-bd-seg--azure     { background: linear-gradient(135deg, var(--azure), var(--navy)); }
.ce-bd-seg--sky { background: linear-gradient(135deg, var(--sky), var(--cobalt)); }
.ce-bd-seg--slate       { background: linear-gradient(135deg, var(--slate), var(--azure)); }
.ce-bd-seg--ink        { background: linear-gradient(135deg, var(--ink), var(--midnight)); }

.ce-bd-seg-hours {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  line-height: 1;
  letter-spacing: -0.02em;
  position: relative;
  z-index: 1;
}

.ce-bd-seg-code {
  margin-top: var(--space-4);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.85;
  position: relative;
  z-index: 1;
}

.ce-bd-legend {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-18);
}

.ce-bd-legend-item {
  padding: var(--space-18) var(--space-20);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  border-top: 3px solid currentColor;
}

.ce-bd-legend-item.ce-seg--azure     { color: var(--azure); }
.ce-bd-legend-item.ce-seg--sky { color: var(--sky); }
.ce-bd-legend-item.ce-seg--slate       { color: var(--slate); }
.ce-bd-legend-item.ce-seg--ink        { color: var(--ink); }

.ce-bd-legend-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-10);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
}

.ce-bd-legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  align-self: center;
}

.ce-bd-legend-hours {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: 1.45rem;
  line-height: 1;
  color: var(--ink);
}

.ce-bd-legend-unit {
  font-size: 0.7em;
  color: var(--midnight);
  font-style: normal;
  margin-left: var(--space-2);
}

.ce-bd-legend-label {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
}

.ce-bd-legend-code {
  margin-left: auto;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: currentColor;
  background: rgba(0,0,0,0.04);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-pill);
}

.ce-bd-legend-desc {
  margin: 0;
  font-size: 0.93rem;
  line-height: 1.5;
  color: var(--midnight);
}

.ce-bd-footnote {
  margin: 22px 0 0;
  font-size: 0.82rem;
  color: var(--midnight);
  font-style: italic;
}

@media (max-width: 640px) {
  .ce-bd-bar { height: auto; min-height: 80px; flex-direction: column; gap: var(--space-4); }
  .ce-bd-seg { min-height: 56px; }
}


/* ---------- comparison-table ---------- */

.ce-cmp {
  padding: var(--space-section-y) 0;
  background: var(--paper);
}

.ce-cmp-table {
  margin-top: clamp(32px, 4vw, 48px);
  display: grid;
  grid-template-columns: minmax(180px, 1.1fr) 1fr 1fr;
  border: 1px solid var(--rule);
  border-radius: var(--radius-card-lg);
  overflow: hidden;
  background: var(--paper);
}

.ce-cmp-head {
  display: contents;
}

.ce-cmp-corner {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.ce-cmp-col-head {
  position: relative;
  padding: var(--space-22) var(--space-22) var(--space-20);
  border-bottom: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}

.ce-cmp-col-head--left {
  background: rgba(0, 0, 0, 0.02);
}

.ce-cmp-col-head--right {
  background: var(--azure);
  color: var(--paper);
}

.ce-cmp-col-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.15;
}

.ce-cmp-col-sub {
  font-size: 0.82rem;
  margin-top: var(--space-4);
  opacity: 0.82;
}

.ce-cmp-badge {
  position: absolute;
  top: -10px;
  right: 18px;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--sky);
  color: var(--paper);
  padding: var(--space-5) var(--space-10);
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 18px -8px rgba(27, 147, 207, 0.6);
}

.ce-cmp-row {
  display: contents;
}

.ce-cmp-rowlabel,
.ce-cmp-cell {
  padding: var(--space-18) var(--space-22);
  border-top: 1px solid var(--rule);
  font-size: 0.95rem;
  line-height: 1.5;
}

.ce-cmp-rowlabel {
  font-weight: 600;
  color: var(--ink);
  background: rgba(0, 0, 0, 0.015);
}

.ce-cmp-cell {
  border-left: 1px solid var(--rule);
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  color: var(--ink);
}

.ce-cmp-cell--left {
  color: var(--midnight);
}

.ce-cmp-cell--right {
  background: rgba(19, 100, 159, 0.04);
}

.ce-cmp-mark {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  margin-top: var(--space-2);
}

.ce-cmp-mark--weak    { background: rgba(0,0,0,0.06);  color: var(--midnight); }
.ce-cmp-mark--partial { background: rgba(77, 142, 171, 0.18); color: var(--slate); }
.ce-cmp-mark--strong  { background: rgba(19, 100, 159, 0.15); color: var(--azure); }

.ce-cmp-value { flex: 1 1 auto; }

.ce-cmp-footnote {
  margin-top: var(--space-18);
  font-size: 0.82rem;
  color: var(--midnight);
  font-style: italic;
}

@media (max-width: 760px) {
  .ce-cmp-table {
    grid-template-columns: 1fr;
  }
  .ce-cmp-corner { display: none; }
  .ce-cmp-col-head {
    border-left: none;
  }
  .ce-cmp-rowlabel {
    border-top: 2px solid var(--azure);
    padding-top: var(--space-22);
  }
  .ce-cmp-cell {
    border-left: none;
    border-top: 1px dashed var(--rule);
  }
  .ce-cmp-cell--left::before  { content: "Typical: "; font-weight: 600; color: var(--ink); }
  .ce-cmp-cell--right::before { content: "Excellence in Gyn: "; font-weight: 600; color: var(--azure); }
}


/* ---------- certificate-preview ---------- */

.ce-cert {
  padding: var(--space-section-y) 0;
  background:
    radial-gradient(60% 80% at 80% 10%, rgba(27, 147, 207, 0.04), transparent 60%),
    var(--paper);
}

.ce-cert-grid {
  margin-top: clamp(32px, 4vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.ce-cert-card {
  margin: 0;
  position: relative;
  perspective: 1600px;
}

.ce-cert-frame {
  position: relative;
  padding: clamp(28px, 4vw, 44px) clamp(28px, 4vw, 44px);
  background:
    repeating-linear-gradient(135deg, rgba(19, 100, 159, 0.025) 0 2px, transparent 2px 16px),
    linear-gradient(180deg, #fdfcf7, #fbf6ec);
  border: 1px solid rgba(19, 100, 159, 0.18);
  border-radius: var(--radius-chip);
  box-shadow:
    0 0 0 8px var(--paper) inset,
    0 0 0 9px rgba(19, 100, 159, 0.25) inset,
    0 30px 60px -25px rgba(12, 43, 62, 0.35),
    0 12px 30px -18px rgba(12, 43, 62, 0.25);
  transform: rotate(-1.2deg);
  transition: transform 0.4s ease;
}

.ce-cert-card:hover .ce-cert-frame {
  transform: rotate(0deg);
}

.ce-cert-flourish {
  height: 18px;
  margin: 6px 0 18px;
  background-image:
    linear-gradient(to right, transparent 0, rgba(19,100,159,0.5) 50%, transparent 100%);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 50%;
  position: relative;
}

.ce-cert-flourish::before,
.ce-cert-flourish::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  border: 1px solid rgba(19, 100, 159, 0.5);
  transform: translateY(-50%) rotate(45deg);
}
.ce-cert-flourish::before { left: 50%; margin-left: -28px; }
.ce-cert-flourish::after  { left: 50%; margin-left: var(--space-18); }

.ce-cert-flourish--bottom { margin: 22px 0 6px; }

.ce-cert-head {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  margin-bottom: var(--space-18);
}

.ce-cert-seal {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--paper);
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 4px var(--paper) inset, 0 0 0 5px var(--sky) inset;
}

.ce-cert-seal-inner {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
}

.ce-cert-org { position: relative; }

.ce-cert-org-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--ink);
  line-height: 1.2;
}

.ce-cert-org-sub {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--midnight);
  margin-top: var(--space-4);
}

.ce-cert-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  color: var(--cobalt);
  text-align: center;
  margin: 8px 0 4px;
  letter-spacing: 0.02em;
}

.ce-cert-presented,
.ce-cert-for {
  text-align: center;
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--midnight);
  margin: 6px 0;
}

.ce-cert-recipient {
  position: relative;
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--ink);
  margin: 6px 0 12px;
  letter-spacing: -0.01em;
}

.ce-cert-activity {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--ink);
  margin: 0 0 18px;
}

.ce-cert-credit {
  position: relative;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--azure);
  padding: var(--space-10) var(--space-18);
  background: rgba(19, 100, 159, 0.06);
  border-top: 1px solid rgba(19, 100, 159, 0.18);
  border-bottom: 1px solid rgba(19, 100, 159, 0.18);
  margin: 0 -8px 22px;
}

.ce-cert-foot {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-12);
  padding-top: var(--space-4);
}

.ce-cert-foot-col { position: relative; }
.ce-cert-foot-col--center { text-align: center; }
.ce-cert-foot-col--right  { text-align: right; }

.ce-cert-foot-label {
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--midnight);
  margin-bottom: var(--space-4);
}

.ce-cert-foot-val {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--ink);
}

.ce-cert-pin {
  position: absolute;
  top: -8px;
  left: -10px;
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  background: var(--sky);
  color: var(--paper);
  border-radius: 50%;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  box-shadow: 0 6px 14px -6px rgba(27, 147, 207, 0.65), 0 0 0 3px var(--paper);
  z-index: 2;
}

.ce-cert-foot-col--center .ce-cert-pin { left: calc(50% - 60px); }
.ce-cert-foot-col--right  .ce-cert-pin { left: auto; right: -10px; }

.ce-cert-caption {
  margin: var(--space-14) var(--space-6) 0;
  font-size: 0.78rem;
  color: var(--midnight);
  font-style: italic;
  text-align: center;
}

.ce-cert-callouts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-14);
}

.ce-cert-callout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-14);
  padding: var(--space-16) var(--space-18);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--sky);
  border-radius: var(--radius-card);
}

.ce-cert-callout-num {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  background: var(--sky);
  color: var(--paper);
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.82rem;
}

.ce-cert-callout-text {
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ink);
}

.ce-cert-footnote {
  margin: 22px auto 0;
  max-width: 60ch;
  text-align: center;
  font-size: 0.82rem;
  color: var(--midnight);
  font-style: italic;
}

@media (max-width: 820px) {
  .ce-cert-grid {
    grid-template-columns: 1fr;
  }
  .ce-cert-frame {
    transform: rotate(0deg);
  }
}


/* =============================================================
   Section debug topper
   ---------------------------------------------------------------
   Rendered above every block by sections.php when
   `option('site.debug_sections')` is TRUE (or when the URL has
   `?debug-sections=1`). Shows the block type, the outermost
   element's tag, its #id, and its .class list — all on one line.

   Turn off by flipping the config flag to false; these rules are
   inert when no .dbg-topper element is in the DOM. No JavaScript
   involved.
   ============================================================= */

.dbg-topper {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-12);
  width: 100%;
  padding: var(--space-8) var(--space-16);
  background: #d3322a;
  color: #ffffff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  font-style: normal;
  font-weight: 500;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.4) transparent;
  /* Sit above sticky/absolute decorations inside blocks (emblems, badges). */
  position: relative;
  z-index: 50;
}

.dbg-topper-type {
  background: rgba(0, 0, 0, 0.28);
  padding: var(--space-2) var(--space-8);
  border-radius: var(--radius-input);
  font-weight: 700;
}

.dbg-topper-sep {
  opacity: 0.55;
}

.dbg-topper-tag {
  color: #ffd9d6;
}

.dbg-topper-id {
  color: #fff;
  font-weight: 600;
}

.dbg-topper-class {
  color: #ffe9a8;
  opacity: 0.95;
}

/* Cancel any inherited link / heading styles inside the topper. */
.dbg-topper * {
  font: inherit;
  color: inherit;
  text-decoration: none;
}


/* =============================================================
   pricing-tiers block
   Used on /for-institutions, designed to be reusable on /pricing
   and any module landing pages later. Card grid with one optional
   highlighted (recommended) tier.
   ============================================================= */

.pt-tiers {
  padding: var(--space-section-y) 0;
  background: var(--paper);
}

.pt-grid {
  margin-top: clamp(32px, 4vw, 48px);
  display: grid;
  gap: var(--space-24);
  align-items: stretch;
}

.pt-grid--1-up { grid-template-columns: minmax(0, 480px); justify-content: center; }
.pt-grid--2-up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pt-grid--3-up { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pt-grid--4-up { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1024px) {
  .pt-grid--4-up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .pt-grid--3-up,
  .pt-grid--4-up { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .pt-grid--2-up { grid-template-columns: 1fr; }
}

.pt-tier {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3vw, 32px);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pt-tier:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -28px rgba(12, 43, 62, 0.35);
}

.pt-tier--highlight {
  border-color: var(--azure);
  border-width: 2px;
  background: linear-gradient(180deg, var(--paper), rgba(19, 100, 159, 0.04));
  box-shadow: 0 30px 60px -30px rgba(12, 43, 62, 0.35);
}

.pt-tier-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--sky);
  color: var(--paper);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: var(--space-5) var(--space-14);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  box-shadow: 0 8px 18px -8px rgba(27, 147, 207, 0.6);
}

.pt-tier-head {
  margin-bottom: var(--space-16);
}

.pt-tier-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 6px;
}

.pt-tier-desc {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--midnight);
  margin: 0;
}

.pt-tier-price-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
  flex-wrap: wrap;
  padding: 14px 0 18px;
  border-top: 1px dashed var(--rule);
  border-bottom: 1px dashed var(--rule);
  margin-bottom: var(--space-18);
}

.pt-tier-price {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.9rem, 3vw, 2.4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--navy);
}

.pt-tier--highlight .pt-tier-price {
  color: var(--azure);
}

.pt-tier-period {
  font-size: 0.82rem;
  color: var(--midnight);
  letter-spacing: 0.04em;
}

.pt-tier-features {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.pt-tier-features li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-10);
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ink);
}

.pt-tier-check {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  background: rgba(19, 100, 159, 0.12);
  color: var(--azure);
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 700;
  margin-top: var(--space-3);
}

.pt-tier--highlight .pt-tier-check {
  background: var(--azure);
  color: var(--paper);
}

.pt-tier-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-10);
  padding: var(--space-12) var(--space-20);
  background: transparent;
  color: var(--azure);
  border: 1.5px solid var(--azure);
  border-radius: var(--radius-pill);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.pt-tier-cta:hover {
  background: var(--azure);
  color: var(--paper);
}

.pt-tier-cta--primary {
  background: var(--azure);
  color: var(--paper);
  border-color: var(--azure);
}

.pt-tier-cta--primary:hover {
  background: var(--navy);
  border-color: var(--navy);
}

.pt-tier-cta .arrow {
  transition: transform 0.15s ease;
}

.pt-tier-cta:hover .arrow {
  transform: translateX(3px);
}

.pt-footnote {
  margin: 24px auto 0;
  max-width: 60ch;
  text-align: center;
  font-size: 0.82rem;
  color: var(--midnight);
  font-style: italic;
}


/* =============================================================
   forum-thread-preview block
   Mock community discussion thread for /community. Designed as a
   "show, don't tell" piece — a real-looking forum view that
   demonstrates what members actually get when they log in.
   ============================================================= */

.fp {
  padding: var(--space-section-y) 0;
  background: var(--paper);
}

.fp-thread {
  margin: clamp(32px, 4vw, 48px) auto 0;
  max-width: 860px;
  padding: clamp(24px, 3vw, 36px);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card-lg);
  box-shadow: 0 30px 60px -40px rgba(12, 43, 62, 0.3);
}

.fp-thread-head {
  padding-bottom: var(--space-18);
  margin-bottom: var(--space-24);
  border-bottom: 1px dashed var(--rule);
}

.fp-thread-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--azure);
  font-weight: 600;
  margin-bottom: var(--space-12);
}

.fp-thread-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--azure);
  box-shadow: 0 0 0 4px rgba(19, 100, 159, 0.18);
  animation: fp-pulse 2.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .fp-thread-dot { animation: none; }
}

@keyframes fp-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(19, 100, 159, 0.18); }
  50%      { box-shadow: 0 0 0 8px rgba(19, 100, 159, 0.05); }
}

.fp-thread-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 12px;
}

.fp-thread-tags {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.fp-thread-tag {
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--azure);
  background: rgba(19, 100, 159, 0.08);
  padding: var(--space-4) var(--space-10);
  border-radius: var(--radius-pill);
}

.fp-thread-meta {
  font-size: 0.78rem;
  color: var(--midnight);
}

.fp-posts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

.fp-post {
  display: flex;
  gap: var(--space-16);
  padding: var(--space-18);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  transition: border-color 0.15s ease;
}

.fp-post--op {
  background: linear-gradient(180deg, rgba(19, 100, 159, 0.04), var(--paper));
  border-color: rgba(19, 100, 159, 0.25);
}

.fp-post--faculty {
  border-left: 3px solid var(--sky);
}

.fp-post-avatar {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--azure);
  color: var(--paper);
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px rgba(19, 100, 159, 0.18);
}

.fp-post--faculty .fp-post-avatar {
  background: var(--sky);
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px rgba(27, 147, 207, 0.25);
}

.fp-post--op .fp-post-avatar {
  background: var(--navy);
}

.fp-post-body {
  flex: 1;
  min-width: 0;
}

.fp-post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-8);
  margin-bottom: var(--space-10);
}

.fp-post-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
}

.fp-post-badge {
  display: inline-block;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: var(--space-3) var(--space-7);
  border-radius: var(--radius-input);
}

.fp-post-badge--faculty   { background: var(--sky); color: var(--paper); }
.fp-post-badge--moderator { background: var(--azure);     color: var(--paper); }
.fp-post-badge--guest     { background: var(--slate);       color: var(--paper); }
.fp-post-badge--member    { background: rgba(0,0,0,0.06);  color: var(--midnight); }

.fp-post-role {
  font-size: 0.78rem;
  color: var(--midnight);
}

.fp-post-time {
  font-size: 0.74rem;
  color: var(--midnight);
  margin-left: auto;
  white-space: nowrap;
}

.fp-post-text {
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--ink);
}

.fp-post-text p { margin: 0 0 10px; }
.fp-post-text p:last-child { margin-bottom: 0; }
.fp-post-text a { color: var(--azure); text-decoration: underline; }

.fp-thread-foot {
  margin-top: var(--space-22);
  padding-top: var(--space-18);
  border-top: 1px dashed var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-10);
  font-size: 0.82rem;
  color: var(--midnight);
  font-style: italic;
}

.fp-thread-foot-lock {
  font-style: normal;
  opacity: 0.7;
}

.fp-footnote {
  margin: 22px auto 0;
  max-width: 60ch;
  text-align: center;
  font-size: 0.82rem;
  color: var(--midnight);
  font-style: italic;
}

@media (max-width: 560px) {
  .fp-post {
    flex-direction: column;
    gap: var(--space-10);
  }
  .fp-post-time {
    margin-left: 0;
  }
}


/* =============================================================
   voices-hero block
   Used as the hero on /community. Asymmetric grid: left = headline
   + CTAs + live pulse pill; right = a stack of 4 overlapping voice
   cards (each rotated and offset so they read like cards on a desk).
   Reusable on any community-driven or audience-driven landing page.
   ============================================================= */

.vh {
  position: relative;
  padding: var(--space-hero-y) 0 clamp(96px, 10vw, 160px);
  background:
    radial-gradient(55% 75% at 90% 5%, rgba(27, 147, 207, 0.08), transparent 60%),
    radial-gradient(45% 65% at 5% 95%, rgba(19, 100, 159, 0.06), transparent 60%),
    var(--paper);
  overflow: hidden;
}

/* Decorative speech-bubble-tail dots in the background. */
.vh::before,
.vh::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.vh::before {
  top: 8%;
  left: -40px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(19,100,159,0.06), transparent 70%);
}
.vh::after {
  bottom: -60px;
  right: -40px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(27,147,207,0.07), transparent 70%);
}

.vh-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

.vh-text { position: relative; z-index: 2; }

.vh-pulse {
  display: inline-flex;
  align-items: center;
  gap: var(--space-10);
  padding: var(--space-6) var(--space-14) var(--space-6) var(--space-12);
  background: var(--paper);
  border: 1px solid rgba(19, 100, 159, 0.2);
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--navy);
  margin-bottom: var(--space-22);
  box-shadow: 0 8px 20px -12px rgba(12, 43, 62, 0.15);
}

.vh-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2ea44f;
  box-shadow: 0 0 0 3px rgba(46, 164, 79, 0.18);
  animation: vh-pulse 1.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .vh-pulse-dot { animation: none; }
}

@keyframes vh-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(46, 164, 79, 0.18); }
  50%      { box-shadow: 0 0 0 7px rgba(46, 164, 79, 0.05); }
}

.vh-eyebrow {
  margin-bottom: var(--space-18);
  /* color from global .eyebrow rule (var(--midnight)) */
}

.vh-title {
  font-size: var(--fs-display-1);
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 0 0 22px;
  max-width: 18ch;
}

.vh-title em {
  color: var(--sky);
  font-style: italic;
}

.vh-deck {
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.55;
  color: var(--midnight);
  max-width: 52ch;
  margin: 0 0 32px;
}

.vh-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-14);
  margin: 0;
}

/* --- The voice-card stack (right column). --- */

.vh-cards {
  position: relative;
  /* The cards are positioned absolutely inside this — give it height. */
  min-height: clamp(360px, 36vw, 460px);
  margin-top: var(--space-12);
}

.vh-card {
  position: absolute;
  top: 0;
  left: 0;
  width: min(92%, 380px);
  padding: var(--space-18) var(--space-20);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  box-shadow: 0 22px 50px -28px rgba(12, 43, 62, 0.45),
              0 6px 18px -8px rgba(12, 43, 62, 0.15);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  transform-origin: center center;
}

.vh-card:hover {
  /* Override the inline transform on hover — flat + lift. */
  transform: translate(0, 0) rotate(0deg) !important;
  z-index: 10 !important;
  box-shadow: 0 30px 60px -20px rgba(12, 43, 62, 0.5);
}

.vh-card--faculty {
  border-left: 3px solid var(--sky);
}

.vh-card-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  margin-bottom: var(--space-12);
}

.vh-card-avatar {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: var(--azure);
  color: var(--paper);
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.9rem;
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px rgba(19, 100, 159, 0.18);
}

.vh-card--faculty .vh-card-avatar {
  background: var(--sky);
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px rgba(27, 147, 207, 0.25);
}

.vh-card-who { flex: 1; min-width: 0; }

.vh-card-name-row {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.vh-card-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
}

.vh-card-badge {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: var(--space-2) var(--space-6);
  border-radius: var(--radius-input);
}

.vh-card-badge--faculty   { background: var(--sky); color: var(--paper); }
.vh-card-badge--moderator { background: var(--azure);     color: var(--paper); }
.vh-card-badge--guest     { background: var(--slate);       color: var(--paper); }

.vh-card-role {
  font-size: 0.74rem;
  color: var(--midnight);
  margin-top: var(--space-2);
}

.vh-card-time {
  font-size: 0.7rem;
  color: var(--midnight);
  white-space: nowrap;
}

.vh-card-snippet {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink);
}

.vh-card-snippet p { margin: 0; }

@media (max-width: 900px) {
  .vh-grid {
    grid-template-columns: 1fr;
  }
  .vh-cards {
    min-height: clamp(320px, 80vw, 420px);
    margin-top: var(--space-24);
  }
  .vh-card {
    width: min(94%, 360px);
  }
}


/* =============================================================
   activity-pulse block
   Replaces a generic stats-bar on community-style pages.
   Left column: a live-looking activity feed (Slack-sidebar feel).
   Right column: a short editorial explaining why this view exists,
   so the buyer doesn't think the numbers are the point.
   ============================================================= */

.ap {
  padding: clamp(56px, 8vw, 100px) 0;
  background: var(--paper);
}

.ap-grid {
  margin-top: clamp(32px, 4vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.ap-feed {
  background: linear-gradient(180deg, #0f2532, #0a1a25);
  color: rgba(255, 255, 255, 0.92);
  border-radius: var(--radius-card-lg);
  padding: var(--space-20) var(--space-22) var(--space-22);
  box-shadow: 0 30px 60px -30px rgba(12, 43, 62, 0.45);
}

.ap-feed-head {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  padding-bottom: var(--space-14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: var(--space-12);
}

.ap-feed-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #2ea44f;
  box-shadow: 0 0 0 4px rgba(46, 164, 79, 0.18);
  animation: vh-pulse 1.8s ease-in-out infinite;
}

.ap-feed-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.ap-feed-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.ap-feed-item {
  display: flex;
  gap: var(--space-12);
  padding: 12px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
}

.ap-feed-item:last-child {
  border-bottom: none;
}

.ap-feed-avatar {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: var(--azure);
  color: var(--paper);
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.8rem;
}

.ap-feed-avatar--faculty   { background: var(--sky); }
.ap-feed-avatar--moderator { background: var(--slate); }
.ap-feed-avatar--guest     { background: #6a4c93; }

.ap-feed-body { flex: 1; min-width: 0; }

.ap-feed-line {
  font-size: 0.86rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
}

.ap-feed-name {
  font-weight: 600;
  color: #ffffff;
}

.ap-feed-badge {
  display: inline-block;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: var(--space-2) var(--space-6);
  border-radius: var(--radius-input);
  margin: 0 6px 0 4px;
  vertical-align: 1px;
}

.ap-feed-badge--faculty   { background: var(--sky); color: var(--paper); }
.ap-feed-badge--moderator { background: var(--azure);     color: var(--paper); }
.ap-feed-badge--guest     { background: var(--slate);       color: var(--paper); }

.ap-feed-action {
  color: rgba(255, 255, 255, 0.6);
  margin: 0 4px;
}

.ap-feed-target {
  color: #ffffff;
  font-weight: 500;
}

.ap-feed-time {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.5);
  margin-top: var(--space-4);
}

.ap-mini-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-14);
  margin-top: var(--space-18);
  padding-top: var(--space-16);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ap-mini-stat { text-align: left; }

.ap-mini-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1;
  color: #ffffff;
  letter-spacing: -0.02em;
}

.ap-mini-label {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-top: var(--space-6);
}

.ap-side { padding-top: var(--space-4); }

.ap-side-head {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  line-height: 1.2;
  color: var(--navy);
  margin: 0 0 14px;
}

.ap-side-body {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--midnight);
}

.ap-side-body p { margin: 0 0 12px; }
.ap-side-body p:last-child { margin-bottom: 0; }

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


/* =============================================================
   evidence-hero (/our-approach hero)
   Asymmetric grid; right column is a vertical "citation stack"
   that reads like a stack of index cards with a top/bottom fade.
   ============================================================= */

.eh {
  position: relative;
  padding: var(--space-hero-y) 0;
  background: var(--paper);
  overflow: hidden;
}

.eh::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(12, 43, 62, 0.04) 1px, transparent 1px);
  background-size: 60px 100%;
  mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
  pointer-events: none;
}

.eh-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

.eh-text { padding-top: var(--space-12); }

.eh-eyebrow {
  margin-bottom: var(--space-18);
  /* color from global .eyebrow rule (var(--midnight)) */
}

.eh-title {
  font-size: var(--fs-display-1);
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 0 0 22px;
  max-width: 18ch;
}

.eh-title em {
  color: var(--sky);
  font-style: italic;
}

.eh-deck {
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.55;
  color: var(--midnight);
  max-width: 52ch;
  margin: 0 0 22px;
}

.eh-attribution {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-10);
  padding: var(--space-10) var(--space-16);
  background: var(--paper);
  border: 1px solid rgba(19, 100, 159, 0.18);
  border-left: 3px solid var(--azure);
  border-radius: var(--radius-input);
  font-size: 0.88rem;
  color: var(--ink);
  font-weight: 500;
  margin-bottom: var(--space-28);
}

.eh-attribution-mark {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--azure);
  align-self: center;
}

.eh-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-14);
  margin: 0;
}

/* The citation stack on the right. */

.eh-stack {
  position: relative;
  /* The vertical rule running down the left of the stack. */
}

.eh-stack-rule {
  position: absolute;
  top: 30px;
  bottom: 30px;
  left: 16px;
  width: 2px;
  background: linear-gradient(180deg, transparent, rgba(19,100,159,0.35) 15%, rgba(19,100,159,0.35) 85%, transparent);
  pointer-events: none;
}

.eh-stack-list {
  list-style: none;
  padding: 12px 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-14);
  position: relative;
  max-height: clamp(420px, 50vh, 580px);
  overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent 0, black 30px, black calc(100% - 50px), transparent);
}

.eh-cite {
  position: relative;
  margin-left: var(--space-36);
  padding: var(--space-14) var(--space-18) var(--space-16);
  background: #fffdf8;
  border: 1px solid rgba(19, 100, 159, 0.15);
  border-radius: var(--radius-chip);
  box-shadow: 0 14px 30px -22px rgba(12, 43, 62, 0.4);
  font-size: 0.86rem;
  line-height: 1.45;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.eh-cite::before {
  content: "";
  position: absolute;
  top: 22px;
  left: -22px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--azure);
  box-shadow: 0 0 0 3px var(--paper);
}

.eh-cite--rct::before          { border-color: var(--azure); }
.eh-cite--meta::before         { border-color: var(--navy); }
.eh-cite--observational::before{ border-color: var(--slate); }
.eh-cite--guideline::before    { border-color: var(--sky); }
.eh-cite--consensus::before    { border-color: #6a4c93; }
.eh-cite--position::before     { border-color: #d97706; }
.eh-cite--registry::before     { border-color: var(--midnight); }

.eh-cite:hover {
  transform: translateX(4px);
  box-shadow: 0 18px 36px -16px rgba(12, 43, 62, 0.45);
}

.eh-cite-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
  margin-bottom: var(--space-4);
}

.eh-cite-type {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--azure);
  background: rgba(19, 100, 159, 0.08);
  padding: var(--space-3) var(--space-8);
  border-radius: var(--radius-input);
}

.eh-cite--guideline .eh-cite-type { color: var(--cobalt); background: rgba(27, 147, 207, 0.1); }
.eh-cite--consensus .eh-cite-type { color: #6a4c93; background: rgba(106, 76, 147, 0.1); }

.eh-cite-year {
  font-size: 0.74rem;
  color: var(--midnight);
  font-variant-numeric: tabular-nums;
}

.eh-cite-source {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  color: var(--ink);
  margin-top: var(--space-4);
}

.eh-cite-authors {
  font-size: 0.74rem;
  color: var(--midnight);
  font-style: italic;
  margin-top: var(--space-2);
}

.eh-cite-snippet {
  font-size: 0.86rem;
  color: var(--ink);
  margin: 8px 0 0;
  line-height: 1.5;
}

.eh-stack-fade { display: none; } /* mask-image handles the fade */

@media (max-width: 900px) {
  .eh-grid {
    grid-template-columns: 1fr;
  }
  .eh-stack-list {
    max-height: 480px;
  }
}


/* =============================================================
   methodology-flow
   Horizontal connected process diagram. On desktop, stages flow
   left-to-right with arrow connectors between nodes. On mobile,
   they stack vertically with vertical connectors.
   ============================================================= */

.mf {
  padding: var(--space-section-y) 0;
  background: var(--paper);
}

/* The methodology-flow intro is a substantive multi-sentence paragraph
   (not the 1-2 sentence intro the .section-head split layout was sized
   for). Two overrides:

   1. align-items: end → start. The default bottom-aligns both columns,
      which left the eyebrow + heading floating low and looking detached
      when the intro paragraph was tall. With start, the heading sits at
      the top of the left column where it reads as a section heading.

   2. .section-head > p { max-width: 480px } global cap is lifted on
      mf-head so the long intro fills its 1.6fr column instead of
      wrapping into a tall, narrow ribbon. */
.mf-head {
  align-items: start;
}

.mf-head > p {
  max-width: none;
}

.mf-flow {
  list-style: none;
  padding: 0;
  margin: clamp(32px, 4vw, 48px) 0 0;
  display: grid;
  grid-template-columns: repeat(var(--mf-count, 5), minmax(0, 1fr));
  gap: 0;
  position: relative;
}

.mf-stage {
  position: relative;
  padding: 0 14px 0 0;
  display: grid;
  grid-template-areas:
    "gate"
    "node"
    "body";
  grid-template-columns: 1fr;
  row-gap: var(--space-16);
}

.mf-gate {
  grid-area: gate;
  justify-self: start;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cobalt);
  background: rgba(27, 147, 207, 0.1);
  padding: var(--space-3) var(--space-8);
  border-radius: var(--radius-input);
  width: max-content;
}

.mf-node {
  grid-area: node;
  position: relative;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  background: var(--navy);
  color: var(--paper);
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px rgba(19, 100, 159, 0.2),
              0 18px 30px -16px rgba(12, 43, 62, 0.45);
  z-index: 2;
}

.mf-connector {
  position: absolute;
  top: 28px;          /* center of the node */
  left: 56px;          /* right edge of the node */
  right: -14px;        /* extends across the gap to next stage's left */
  height: 24px;
  display: flex;
  align-items: center;
  z-index: 1;
}

.mf-connector-line {
  flex: 1;
  height: 2px;
  background: repeating-linear-gradient(
    to right,
    var(--rule-strong) 0 6px,
    transparent 6px 12px
  );
}

.mf-connector-arrow {
  margin-left: var(--space-2);
  color: var(--azure);
  font-size: 1.1rem;
  line-height: 1;
}

.mf-body {
  grid-area: body;
  padding-right: var(--space-8);
}

.mf-stage-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 6px;
}

.mf-meta {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--midnight);
  margin-bottom: var(--space-8);
}

.mf-desc {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--midnight);
  margin: 0;
}

.mf-footnote {
  margin: 28px 0 0;
  font-size: 0.82rem;
  color: var(--midnight);
  font-style: italic;
  text-align: center;
}

@media (max-width: 900px) {
  .mf-flow {
    grid-template-columns: 1fr;
    row-gap: var(--space-24);
  }
  .mf-stage {
    grid-template-areas:
      "gate gate"
      "node body";
    grid-template-columns: 56px 1fr;
    column-gap: var(--space-18);
    padding: 0;
  }
  .mf-gate { grid-column: 1 / -1; }
  .mf-connector {
    /* Vertical connector running from node down to next stage's node. */
    top: 56px;
    left: 27px;        /* center of node column */
    right: auto;
    bottom: -24px;
    height: auto;
    width: 2px;
    flex-direction: column;
  }
  .mf-connector-line {
    height: auto;
    width: 2px;
    background: repeating-linear-gradient(
      to bottom,
      var(--rule-strong) 0 6px,
      transparent 6px 12px
    );
    flex: 1;
  }
  .mf-connector-arrow {
    margin: 2px 0 0;
    transform: rotate(90deg);
  }
}


/* =============================================================
   evidence-ledger
   Source breakdown by evidence tier. Proportional bar at the top
   showing distribution, then per-tier rows on a vertical rail with
   counts and chip lists of named sources.
   ============================================================= */

.el {
  padding: var(--space-section-y) 0;
  background: var(--paper);
}

/* No card chrome — the ledger sits as page content at container width,
   matching the editorial-intro and methodology-flow sections above and
   below it. No border / shadow / radius / padding / background — the
   proportional bar + tier rows do all of the visual work. */
.el-card {
  margin: clamp(32px, 4vw, 48px) 0 0;
}

/* Text-based editorial head — moves away from the prior dashboard-style
   layout (giant italic numeral + uppercase tag) toward a magazine-style
   stacked text block: small-caps eyebrow line for the module, an
   editorial sentence with the count inline, and an italic footer for
   the review cadence. No dashed border-bottom: with the card frame
   gone, the bar + tier list below provides natural separation. */
.el-card-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-14);
  margin-bottom: clamp(36px, 4vw, 56px);
  margin-bottom: var(--space-22);
}

/* .el-module is now rendered with the global .eyebrow class in the
   snippet — no per-section overrides needed. Keeping the selector
   present as a no-op anchor so future tweaks have a hook. */
.el-module {
  /* intentionally empty; .eyebrow does the work */
}

/* Totals line is the actual display heading for this sub-section.
   Same typographic register as other section heads on /our-approach:
   display family, clamp() ~h2 scale, line-height 1.05. The count
   numeral takes the italic-display accent treatment used elsewhere
   for em emphasis; the label is part of the heading and reads at
   full heading scale, not as metadata. */
.el-totals {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 6px 0 0;
}

.el-total-num {
  font-family: inherit;
  font-style: italic;
  font-weight: 400;
  font-size: 1em;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--sky);
}

.el-total-label {
  font-family: inherit;
  font-style: normal;
  font-weight: 400;
  font-size: 1em;
  letter-spacing: -0.015em;
  text-transform: none;
  color: var(--ink);
}

/* .el-updated is no longer rendered by the snippet (see evidence-ledger.php).
   Selector retained but empty so any historical content with this class
   doesn't suddenly inherit unrelated styles. */
.el-updated { display: none; }

/* .el-rule replaces the prior proportional .el-bar visualization
   (kept the .el-bar selectors below as no-ops in case any historical
   markup still references them). A single hairline rule sets up the
   tier list below the head. */
.el-rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0 0 4px;
  width: 100%;
  height: 0;
  background: transparent;
}

.el-bar,
.el-bar-seg { display: none; }

.el-tiers {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Single-column flat list — no glyph rail. Every row carries a 1px
   bottom border, including the last one, so the list closes against
   the same rule that opens it (.el-rule above). */
.el-tier {
  display: block;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
}

/* Glyph column is hidden — the dot/rail visualization was reading as
   chrome alongside the simplified card. Kept in the DOM in case a
   future variant wants to bring it back. */
.el-tier-glyph,
.el-tier-glyph-dot,
.el-tier-glyph-rail { display: none; }

.el-tier-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-12);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

.el-tier-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--azure);
  /* Background pill removed — pure colored caps. */
  padding: 0;
  background: transparent;
  border-radius: 0;
}

.el-tier--sky   .el-tier-label { color: var(--cobalt); }
.el-tier--slate .el-tier-label { color: var(--slate); }
.el-tier--ink   .el-tier-label { color: var(--ink); }

.el-tier-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--ink);
}

.el-tier-count {
  margin-left: auto;
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-4);
  font-variant-numeric: tabular-nums;
}

.el-tier-count-num {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  font-style: normal;
}

.el-tier-count-unit {
  font-size: 0.78rem;
  letter-spacing: 0;
  text-transform: lowercase;
  color: var(--midnight);
}

.el-tier-desc {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--midnight);
  margin: 0 0 12px;
}

/* Example sources render as an italic comma-separated inline list
   prefixed by "e.g." instead of bordered pills. ::marker-style commas
   between li's keep the DOM list semantic without the chrome. */
.el-tier-chips {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.86rem;
  color: var(--midnight);
  line-height: 1.55;
}

.el-tier-chips::before {
  content: "e.g. ";
  font-style: italic;
  color: var(--midnight);
  opacity: 0.72;
}

.el-chip {
  display: inline;
  font-family: inherit;
  font-style: italic;
  font-weight: 400;
  font-size: inherit;
  color: var(--midnight);
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
}

.el-chip + .el-chip::before {
  content: ", ";
  font-style: normal;
}

.el-footnote {
  margin: 22px 0 0;
  font-size: 0.82rem;
  color: var(--midnight);
  font-style: italic;
}

@media (max-width: 640px) {
  /* .el-card-head is already a flex-column at all viewports; no overrides needed. */
  .el-tier-count { margin-left: 0; }
}


/* =============================================================
   download-kit
   Grid of "document cards" with a corner-fold visual + format
   pill + download CTA. Designed for the /employer-reimbursement-kit
   page; reusable for any artifact-grid context (press kit, etc.)
   ============================================================= */

.dk {
  padding: var(--space-section-y) 0;
  background: var(--paper);
}

.dk-grid {
  margin-top: clamp(32px, 4vw, 48px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-22);
}

.dk-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-22) var(--space-22) var(--space-20);
  background: #fffdf8;
  border: 1px solid rgba(19, 100, 159, 0.16);
  border-radius: var(--radius-chip);
  box-shadow:
    0 22px 40px -28px rgba(12, 43, 62, 0.4),
    0 4px 14px -8px rgba(12, 43, 62, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
  min-height: 240px;
}

.dk-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 28px 50px -22px rgba(12, 43, 62, 0.45);
}

/* The corner-fold treatment — looks like a dog-eared page corner. */
.dk-fold {
  position: absolute;
  top: 0;
  right: 0;
  width: 36px;
  height: 36px;
  background: linear-gradient(225deg, var(--paper) 0 50%, rgba(19,100,159,0.1) 50% 100%);
  border-left: 1px solid rgba(19, 100, 159, 0.16);
  border-bottom: 1px solid rgba(19, 100, 159, 0.16);
  box-shadow: -2px 2px 4px -2px rgba(0,0,0,0.1);
  z-index: 2;
}

.dk-card-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-10);
  margin-bottom: var(--space-16);
  padding-right: var(--space-40); /* clear the fold */
}

.dk-format-pill {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-input);
  background: var(--azure);
  color: var(--paper);
}

.dk-card--sky .dk-format-pill,
.dk-card--email .dk-format-pill { background: var(--sky); }
.dk-card--xlsx .dk-format-pill,
.dk-card--md .dk-format-pill    { background: var(--slate); }
.dk-card--txt .dk-format-pill   { background: var(--midnight); }

.dk-meta {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--midnight);
}

.dk-card-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.1rem;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 8px;
}

.dk-card-desc {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--midnight);
  margin: 0 0 16px;
}

/* Decorative "document lines" — subtle suggestion of text body. */
.dk-doc-lines {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin: 0 0 18px;
  flex: 1;
  align-content: flex-end;
  justify-content: flex-end;
}

.dk-doc-lines span {
  display: block;
  height: 2px;
  background: linear-gradient(to right, rgba(19,100,159,0.12), transparent);
  border-radius: 1px;
}

.dk-doc-lines span:nth-child(1) { width: 100%; }
.dk-doc-lines span:nth-child(2) { width: 80%; }
.dk-doc-lines span:nth-child(3) { width: 60%; }

.dk-card-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-10);
  padding: var(--space-10) var(--space-16);
  background: var(--azure);
  color: var(--paper);
  border-radius: var(--radius-pill);
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
  align-self: flex-start;
  transition: background 0.15s ease, transform 0.15s ease;
}

.dk-card-cta:hover {
  background: var(--navy);
  transform: translateX(2px);
}

.dk-card-cta-arrow {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1;
}

.dk-card-cta--soon {
  background: rgba(0,0,0,0.06);
  color: var(--midnight);
  cursor: not-allowed;
}

.dk-card-cta--soon:hover {
  background: rgba(0,0,0,0.06);
  transform: none;
}

.dk-footnote {
  margin: 24px auto 0;
  max-width: 60ch;
  text-align: center;
  font-size: 0.82rem;
  color: var(--midnight);
  font-style: italic;
}


/* =============================================================
   email-template
   Renders as a mock compose-window with mac-style traffic-light
   chrome. Highlights {curly-brace} placeholders. Includes a
   clipboard-copy button that swaps the label on success.
   ============================================================= */

.et {
  padding: var(--space-section-y) 0;
  background: var(--paper);
}

.et-window {
  margin: clamp(32px, 4vw, 48px) auto 0;
  max-width: 760px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  box-shadow: 0 30px 60px -30px rgba(12, 43, 62, 0.4),
              0 10px 24px -14px rgba(12, 43, 62, 0.18);
  overflow: hidden;
}

.et-chrome {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-16);
  background: linear-gradient(180deg, #f3eee4, #ece5d4);
  border-bottom: 1px solid var(--rule);
  position: relative;
}

.et-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

.et-dot--r { background: #ff5f57; }
.et-dot--y { background: #febc2e; }
.et-dot--g { background: #28c840; }

.et-chrome-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--midnight);
  letter-spacing: 0.04em;
}

.et-headers {
  margin: 0;
  padding: var(--space-8) var(--space-22) var(--space-4);
}

.et-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: baseline;
  gap: var(--space-12);
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.et-row dt {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--midnight);
  margin: 0;
}

.et-row dd {
  margin: 0;
  font-size: 0.92rem;
  color: var(--ink);
}

.et-row--subject dd {
  font-weight: 600;
}

.et-body {
  padding: var(--space-22) var(--space-22) var(--space-8);
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--ink);
}

.et-body p {
  margin: 0 0 14px;
}

.et-body p:last-child { margin-bottom: 0; }

/* Placeholder highlight — looks like a fillable form field. */
.et-ph {
  display: inline-block;
  padding: var(--space-1) var(--space-6);
  background: rgba(254, 188, 46, 0.18);
  border: 1px dashed rgba(214, 153, 0, 0.55);
  border-radius: var(--radius-input);
  color: #815a00;
  font-family: var(--font-body);
  font-weight: 500;
  font-style: normal;
  font-size: 0.92em;
  white-space: nowrap;
}

.et-sig {
  padding: var(--space-4) var(--space-22) var(--space-18);
  font-size: 0.92rem;
  color: var(--ink);
  border-top: 1px dashed rgba(0,0,0,0.06);
  margin-top: var(--space-6);
  padding-top: var(--space-14);
}

.et-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-14);
  padding: var(--space-16) var(--space-22);
  background: rgba(19, 100, 159, 0.04);
  border-top: 1px solid var(--rule);
}

.et-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-10);
  padding: var(--space-10) var(--space-18);
  background: var(--azure);
  color: var(--paper);
  border: none;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.et-copy-btn:hover {
  background: var(--navy);
  transform: translateY(-1px);
}

.et-copy-btn--ok {
  background: #2ea44f;
}

.et-copy-btn--err {
  background: #b91c1c;
}

.et-copy-btn-icon {
  font-size: 1.1rem;
  line-height: 1;
}

.et-fyi {
  font-size: 0.78rem;
  color: var(--midnight);
  font-style: italic;
}

/* The hidden plain-text payload that backs the clipboard copy. */
.et-payload {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.et-footnote {
  margin: 22px auto 0;
  max-width: 60ch;
  text-align: center;
  font-size: 0.82rem;
  color: var(--midnight);
  font-style: italic;
}

@media (max-width: 560px) {
  .et-row { grid-template-columns: 60px 1fr; }
  .et-chrome-label { display: none; }
}


/* =============================================================
   roi-talking-points
   Argument cards built for the buyer to use with their benefits
   coordinator. Tone-coded; each card has: number, topic, headline
   argument, optional stat callout, body, citation footnote.
   ============================================================= */

.rtp {
  padding: var(--space-section-y) 0;
  background: var(--paper);
}

.rtp-grid {
  margin-top: clamp(32px, 4vw, 48px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-22);
}

.rtp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-24) var(--space-24) var(--space-20);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  border-top: 4px solid var(--azure);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.rtp-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -20px rgba(12, 43, 62, 0.3);
}

.rtp-card--azure     { border-top-color: var(--azure); }
.rtp-card--sky { border-top-color: var(--sky); }
.rtp-card--slate       { border-top-color: var(--slate); }
.rtp-card--ink        { border-top-color: var(--ink); }

.rtp-card-head {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  margin-bottom: var(--space-14);
}

.rtp-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--azure);
}

.rtp-card--sky .rtp-num { color: var(--sky); }
.rtp-card--slate       .rtp-num { color: var(--slate); }
.rtp-card--ink        .rtp-num { color: var(--ink); }

.rtp-topic {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--midnight);
  padding: var(--space-4) var(--space-8);
  background: rgba(0, 0, 0, 0.04);
  border-radius: var(--radius-input);
}

.rtp-headline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.1rem;
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 14px;
}

.rtp-stat {
  display: flex;
  align-items: baseline;
  gap: var(--space-10);
  padding: var(--space-12) var(--space-14);
  background: rgba(19, 100, 159, 0.06);
  border-left: 3px solid var(--azure);
  border-radius: var(--radius-input);
  margin: 0 0 16px;
}

.rtp-card--sky .rtp-stat { border-left-color: var(--sky); background: rgba(27, 147, 207, 0.06); }
.rtp-card--slate       .rtp-stat { border-left-color: var(--slate);       background: rgba(77, 142, 171, 0.08); }
.rtp-card--ink        .rtp-stat { border-left-color: var(--ink);        background: rgba(0, 0, 0, 0.03); }

.rtp-stat-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--azure);
}

.rtp-card--sky .rtp-stat-num { color: var(--sky); }
.rtp-card--slate       .rtp-stat-num { color: var(--slate); }
.rtp-card--ink        .rtp-stat-num { color: var(--ink); }

.rtp-stat-label {
  font-size: 0.78rem;
  color: var(--midnight);
  line-height: 1.3;
}

.rtp-body {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--midnight);
  margin: 0 0 14px;
  flex: 1;
}

.rtp-source {
  font-size: 0.74rem;
  color: var(--midnight);
  font-style: italic;
  display: flex;
  align-items: baseline;
  gap: var(--space-6);
  padding-top: var(--space-12);
  border-top: 1px dashed var(--rule);
}

.rtp-source-mark {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--azure);
  font-size: 0.92rem;
  line-height: 1;
}

.rtp-footnote {
  margin: 24px auto 0;
  max-width: 60ch;
  text-align: center;
  font-size: 0.82rem;
  color: var(--midnight);
  font-style: italic;
}


/* =============================================================
   Footer grid — brand + 4 equal menu columns
   ---------------------------------------------------------------
   styles.css ships a 2fr 1fr 1fr 1fr grid (brand + 3 columns).
   The footer has 4 admin-defined columns (Offerings, For Buyers,
   Policies & Connect, Connect With Us!), so we override to brand
   + 4 EQUAL columns. All four are peers — same width track, same
   typography (font-size lives in styles.css's .footer-col rules).

   History: slot 5 used to be a dense "Debug · Detail Pages" column
   that carried a per-column font/spacing/span override
   (.footer-col:nth-child(5)). That column was retired; the social
   "Connect With Us!" column now sits in slot 5, so those debug
   tweaks were removed (they were shrinking the social links to
   --fs-12 and full-bleeding them on tablet). Don't reintroduce
   nth-child overrides here — every footer column should match.
   ============================================================= */

.footer-grid {
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: var(--space-40);
}

/* Below the desktop width the brand takes its own row and the four
   menu columns reflow into an even 2×2 grid. */
@media (max-width: 1100px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer-brand { grid-column: 1 / -1; }
}


/* =============================================================
   Nav CTA — outline variant (Login button beside Enroll)
   Used on `.nav-cta.nav-cta--outline`. Pairs with the filled
   .nav-cta from styles.css to give a primary + secondary CTA
   pair in the navbar. Same shape, size, and font as the filled
   version so the two buttons sit harmoniously, but visually
   distinct enough that they obviously do different things.

   Layout note: the outline button has a 1.5px border that the
   filled button does not; padding compensates so total button
   height matches pixel-for-pixel.
   ============================================================= */

.nav-cta.nav-cta--outline {
  background: transparent;
  color: var(--azure);
  /* Match .nav-cta padding minus border so heights align. */
  padding: calc(var(--space-10) - 1.5px) calc(var(--space-22) - 1.5px);
  border: 1.5px solid var(--azure);
}

.nav-cta.nav-cta--outline:hover {
  /* Subtle tinted fill on hover — deliberately NOT sky
     so the outline button doesn't impersonate the filled CTA's
     hover state. Signals interactivity without competing. */
  background: rgba(19, 100, 159, 0.08);
  color: var(--navy);
  border-color: var(--navy);
}

/* ==========================================================================
   numbered-grid + faq-accordion — markdown list support inside body fields
   ==========================================================================
   Both blocks switched their body field renderer from $field->kti() (inline,
   no <p>) to $field->kt() (block-level, wraps each paragraph in <p>, supports
   ul/ol). The wrapper changed from <p> to <div>, so we need to:
     1. Zero the inner <p> margins so a single-paragraph value looks identical
        to the old <p class="value-desc"> output.
     2. Style ul/ol so admin-typed bullet lists are readable.
     3. Add a small margin between adjacent paragraphs in multi-paragraph copy.
   ========================================================================== */

.value-desc > p,
.faq-answer > p {
  margin: 0;
}

.value-desc > p + p,
.faq-answer > p + p,
.value-desc > p + ul,
.value-desc > p + ol,
.faq-answer > p + ul,
.faq-answer > p + ol {
  margin-top: 0.6em;
}

.value-desc ul,
.value-desc ol,
.faq-answer ul,
.faq-answer ol {
  margin: 0;
  padding-left: 1.25em;
}

.value-desc li,
.faq-answer li {
  margin: 0.25em 0;
  line-height: var(--lh-165);
}

.value-desc li::marker {
  color: var(--sky);
}

.faq-answer li::marker {
  color: var(--sky);
}

/* ==========================================================================
   editorial-statement — eyebrow + heading + one big centered paragraph
   ==========================================================================
   Sibling block to testimonials-grid. Same azure dark band, same accent
   heading treatment — but a single editorial statement in place of the 3-up
   testimonial cards. Used on the community page (cop-voices anchor) and
   available for any future page that wants this exact visual weight without
   needing actual quotes.

   The .editorial-statement-{section,eyebrow,title} rules mirror the
   .cd-testimonials-* rules in styles.css (lines ~1737–1758) so the two blocks
   read as visual siblings. Kept here rather than styles.css per CLAUDE.md §15
   (styles.css is the design source of truth — new blocks land in overrides).
   ========================================================================== */

.editorial-statement {
  padding: var(--space-120) 0;
  background: var(--azure);
  color: var(--paper);
}

.editorial-statement-eyebrow {
  color: rgba(244, 239, 230, 0.6);
  margin-bottom: var(--space-32);
  text-align: center;
}

.editorial-statement-title {
  font-size: clamp(36px, 4.5vw, 64px);
  text-align: center;
  margin-bottom: var(--space-48);
  line-height: var(--lh-100);
}

.editorial-statement-title em {
  color: var(--aqua); /* dark-bg em accent — see two-tier rule at .display em */
}

.editorial-statement-body {
  max-width: 62ch;
  margin: 0 auto;
  text-align: center;
}

.editorial-statement-body p {
  /* Editorial-sized paragraph that holds its own on the dark azure ground.
     Roughly halfway between body and display sizes — large enough to read
     as a statement, small enough to fit ~3 lines of prose comfortably. */
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: var(--lh-145);
  color: var(--paper);
  opacity: 0.92;
  margin: 0 0 1em;
}

.editorial-statement-body p:last-child {
  margin-bottom: 0;
}

.editorial-statement-body a {
  color: var(--aqua); /* same accent the heading <em> uses on this dark section */
  text-decoration: none;
  border-bottom: var(--bw-1) solid currentColor;
}

.editorial-statement-body a:hover {
  opacity: 1;
  border-bottom-color: var(--paper);
}

/* ==========================================================================
   final-cta — breathing room between CTA buttons and the fine-print line
   ==========================================================================
   The snippet renders <cta-pair> (or the newsletter form) and then the
   `cta_fine` / `newsletter_fine` paragraph immediately below. With no margin,
   the email-highlight line jams up against the buttons. Add a small top
   margin to .newsletter-fine so it reads as a separate beat.
   ========================================================================== */

.final-cta .newsletter-fine {
  margin-top: var(--space-24);
}

/* ==========================================================================
   image-hero — text-left + image-right hero pattern
   ==========================================================================
   Generic editorial hero. Sibling of voices-hero (which keeps the rotating
   card stack); image-hero swaps the card stack for a single image and gives
   the text column more breathing room (~58% of the grid instead of ~50%).

   Mirrors the .vh-* visual treatment for the text column so the two blocks
   are visually consistent — the only meaningful difference is what fills the
   right side. Pulse pill + eyebrow dots + writer-style heading + deck + CTA
   pair all rendered identically.
   ========================================================================== */

.ih {
  position: relative;
  padding: var(--space-hero-y) 0 clamp(96px, 10vw, 160px);
  background: var(--paper);
  overflow: hidden;
}

.ih-grid {
  position: relative;
  display: grid;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

/* With image: text gets ~58% of the grid (vs 50% in voices-hero), image ~42%.
   Wider text gives the heading + deck more horizontal real estate so the
   copy reads as an editorial lede instead of a tight card-style block. */
.ih-grid--with-image {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}

/* Image-less mode: text column takes the full container width. The eyebrow
   + heading + deck stay readable because they have their own max-widths. */
.ih-grid--text-only {
  grid-template-columns: minmax(0, 1fr);
}

.ih-text { position: relative; z-index: 2; }

.ih-pulse {
  display: inline-flex;
  align-items: center;
  gap: var(--space-10);
  padding: var(--space-6) var(--space-14) var(--space-6) var(--space-12);
  background: var(--paper);
  border: 1px solid rgba(19, 100, 159, 0.2);
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--navy);
  margin-bottom: var(--space-22);
  box-shadow: 0 8px 20px -12px rgba(12, 43, 62, 0.15);
}

.ih-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2ea44f;
  box-shadow: 0 0 0 3px rgba(46, 164, 79, 0.18);
  animation: ih-pulse 1.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ih-pulse-dot { animation: none; }
}

@keyframes ih-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(46, 164, 79, 0.18); }
  50%      { box-shadow: 0 0 0 7px rgba(46, 164, 79, 0.05); }
}

.ih-eyebrow {
  margin-bottom: var(--space-18);
  /* color from global .eyebrow rule (var(--midnight)) */
}

.ih-title {
  font-size: var(--fs-display-1);
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 0 0 22px;
  max-width: 22ch; /* slightly wider than voices-hero's 18ch */
}

.ih-title em {
  color: var(--sky);
  font-style: italic;
}

.ih-deck {
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.55;
  color: var(--midnight);
  max-width: 58ch; /* slightly wider than voices-hero's 52ch */
  margin: 0 0 32px;
}

.ih-ctas { margin-top: var(--space-8); }

.ih-image-wrap {
  position: relative;
  z-index: 1;
}

.ih-image {
  position: relative;           /* anchor for .fill-image (position:absolute) */
  border-radius: var(--radius-hero-image);
  overflow: hidden;
  background: var(--frost);
  box-shadow: 0 18px 50px rgba(12, 43, 62, 0.12);
  aspect-ratio: 4 / 5;          /* gives container a known height */
}

.ih-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.ih-caption {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.88rem;
  color: var(--midnight);
  opacity: 0.75;
  margin: 12px 0 0;
  text-align: right;
}

@media (max-width: 768px) {
  .ih-grid--with-image {
    grid-template-columns: minmax(0, 1fr);
  }
  .ih-image {
    aspect-ratio: 4 / 3;
  }
}

/* ==========================================================================
   numbered-grid — multi-row alignment fix
   ==========================================================================
   styles.css (~line 2143) uses :first-child / :last-child to remove the left
   padding on the leftmost item and the right padding + border on the
   rightmost item — but those pseudo-classes only match once across the whole
   grid, so on a 6-item grid (cop-topics on /community), row 2 ended up
   shifted: item 4 inherited the middle-column padding-left and item 6 was
   still last-child so it worked, but item 4 sat 40px to the right of the
   section edge.

   Switch to :nth-child(3n+1) / :nth-child(3n) so the same pattern applies to
   every row. Specificity matches the original selectors, and overrides.css
   loads after styles.css, so this wins on the cascade.
   ========================================================================== */

.values-grid > .value-item {
  /* Default = middle column of any row */
  padding-left: var(--space-40);
  padding-right: var(--space-40);
  border-right: var(--bw-1) solid var(--rule-strong);
}

.values-grid > .value-item:nth-child(3n+1) {
  /* Leftmost column of any row — flush with the section edge */
  padding-left: 0;
}

.values-grid > .value-item:nth-child(3n) {
  /* Rightmost column of any row — no trailing border, flush with edge */
  padding-right: 0;
  border-right: none;
}

/* Mobile: styles.css collapses to single column. Keep that behavior. */
@media (max-width: 768px) {
  .values-grid > .value-item {
    padding-left: 0;
    padding-right: 0;
    border-right: none;
  }
}

/* ==========================================================================
   editorial-statement — widen the body paragraph
   ==========================================================================
   Initial max-width of 62ch was too narrow next to the heading, which has no
   max-width and naturally spans most of the container. Bump to 80ch so the
   paragraph sits just shy of the heading's visual width while still keeping
   line length in a readable range.
   ========================================================================== */

.editorial-statement-body {
  max-width: 80ch;
}

/* ==========================================================================
   premise-differentiators — redesigned stacked layout
   ==========================================================================
   Old layout (styles.css ~4750): a 2-col grid with the pull-quote on the
   left and a vertical list of differentiators on the right.

   New layout (this section):
     ┌──────────────────────────┬──────────────────────────┐
     │  Premise quote 1         │  Premise quote 2         │
     │  eyebrow + writer        │  eyebrow + writer        │
     └──────────────────────────┴──────────────────────────┘
     ┌──────────┬──────────┬──────────┐
     │  diff 1  │  diff 2  │  diff 3  │
     └──────────┴──────────┴──────────┘

   The snippet now emits .ha-premise-quotes and .ha-premise-diffs in place
   of the old .ha-premise-grid / .ha-premise-right structure, so the old
   styles.css rules for those classes are dead. .ha-diff itself is reused —
   we override its top/bottom borders (from styles.css) so the 3-col grid
   doesn't show horizontal rules, and add a vertical separator between
   adjacent columns instead.
   ========================================================================== */

.ha-premise-quotes {
  display: grid;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
  margin-bottom: clamp(48px, 6vw, 88px);
}

/* One quote -> single column, comfortable max-width centered. */
.ha-premise-quotes--one {
  grid-template-columns: minmax(0, 1fr);
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

/* Two quotes -> equal-width side by side. */
.ha-premise-quotes--two {
  grid-template-columns: 1fr 1fr;
}

.ha-premise-quote-card {
  margin: 0;
}

/* The .ha-premise-eyebrow + .ha-premise-quote.display styling carries over
   from styles.css (eyebrow + display heading look). No overrides needed
   for the type itself - just the wrapper layout above. */

/* 3-column differentiators row. Override the legacy top/bottom borders on
   .ha-diff (which made sense for a vertical list but not a grid). */
.ha-premise-diffs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding-top: clamp(32px, 4vw, 56px);
  border-top: var(--bw-1) solid var(--rule);
}

.ha-premise .ha-premise-diffs .ha-diff {
  padding: 0 clamp(20px, 3vw, 40px);
  border-top: none;
  border-bottom: none;
}

/* First column flush left, last column flush right. */
.ha-premise-diffs > .ha-diff:first-child {
  padding-left: 0;
}
.ha-premise-diffs > .ha-diff:last-child {
  padding-right: 0;
}

/* Vertical separator between adjacent columns. */
.ha-premise-diffs > .ha-diff + .ha-diff {
  border-left: var(--bw-1) solid var(--rule);
}

@media (max-width: 767.98px) {
  .ha-premise-quotes--two {
    grid-template-columns: minmax(0, 1fr);
  }
  .ha-premise-diffs {
    grid-template-columns: minmax(0, 1fr);
  }
  .ha-premise .ha-premise-diffs .ha-diff {
    padding: var(--space-28) 0;
    border-top: var(--bw-1) solid var(--rule);
  }
  .ha-premise-diffs > .ha-diff:first-child {
    border-top: none;
    padding-top: var(--space-28);
  }
  .ha-premise-diffs > .ha-diff + .ha-diff {
    border-left: none;
  }
}

/* ==========================================================================
   info-pair-with-logos — 2-column info + centered logo strip + caption
   ==========================================================================
   Layout:
     ┌────────────────────────────────────────────────┐
     │  [eyebrow (optional)]                          │
     │  ┌──────────────┐    ┌──────────────┐          │
     │  │ Column 1     │    │ Column 2     │          │
     │  │  <h2>        │    │  <h2>        │          │
     │  │  body (kt)   │    │  body (kt)   │          │
     │  └──────────────┘    └──────────────┘          │
     │                                                │
     │           [ logo  logo  logo  logo ]           │
     │             centered caption text              │
     └────────────────────────────────────────────────┘

   Two columns on >=768px, single column below. Logo strip wraps to two
   rows on narrower screens. Logo size is constrained by height (not width)
   so logos of different aspect ratios feel proportional next to each other.
   ========================================================================== */

.info-pair {
  padding: clamp(56px, 7vw, 96px) 0;
  background: var(--paper);
}

.info-pair-eyebrow {
  text-align: center;
  margin-bottom: clamp(28px, 3.5vw, 48px);
  /* color from global .eyebrow rule (var(--midnight)) */
}

.info-pair-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

@media (max-width: 767.98px) {
  .info-pair-grid {
    grid-template-columns: 1fr;
    gap: var(--space-40);
  }
}

.info-pair-title {
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: var(--lh-110);
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-20);
  color: var(--ink);
}

.info-pair-title em {
  color: var(--sky);
  font-style: italic;
}

.info-pair-body {
  font-size: clamp(16px, 1.1vw, 17.5px);
  line-height: var(--lh-170);
  color: var(--midnight);
  max-width: 56ch;
}

.info-pair-body > p { margin: 0 0 1em; }
.info-pair-body > p:last-child { margin-bottom: 0; }

.info-pair-body ul,
.info-pair-body ol {
  margin: 0 0 1em;
  padding-left: 1.25em;
}

.info-pair-body li {
  margin: 0.3em 0;
  line-height: var(--lh-165);
}

.info-pair-body li::marker { color: var(--sky); }

.info-pair-body a {
  color: var(--azure);
  text-decoration: none;
  border-bottom: var(--bw-1) solid var(--azure);
  transition: color var(--dur-200), border-color var(--dur-200);
}

.info-pair-body a:hover {
  color: var(--cobalt);
  border-color: var(--cobalt);
}

.info-pair-body figure {
  margin: 1.5em 0;
}

.info-pair-body figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-chip);
}

/* ─── Logos strip ─── */
.info-pair-strip {
  padding-top: clamp(40px, 5vw, 32px);
  text-align: center;
}

.info-pair-logos {
  list-style: none;
  margin: 0 0 var(--space-24);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 4vw, 56px) clamp(32px, 5vw, 64px);
}

.info-pair-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.info-pair-logo img {
  /* Height-constrained so logos of varying widths feel uniform.
     max-width keeps very-wide wordmarks from blowing out the row. */
  height: clamp(36px, 4vw, 56px);
  width: auto;
  max-width: 180px;
  object-fit: contain;
  opacity: 0.85;
  transition: opacity var(--dur-200);
}

.info-pair-logo a:hover img,
.info-pair-logo a:focus-visible img {
  opacity: 1;
}

.info-pair-caption {
  max-width: 64ch;
  margin: 0 auto;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(15px, 1.05vw, 16.5px);
  line-height: var(--lh-160);
  color: var(--midnight);
  opacity: 0.85;
}

.info-pair-caption p { margin: 0 0 0.5em; }
.info-pair-caption p:last-child { margin-bottom: 0; }

.info-pair-caption a {
  color: var(--azure);
  text-decoration: none;
  border-bottom: var(--bw-1) solid currentColor;
}

/* ==========================================================================
   product-hero — image variant (when card deck is OFF)
   ==========================================================================
   The product-hero block can render its left column in one of two ways:
     - Card deck (default) — five rotated cards from the `tags` structure,
       styled in styles.css under .tk-deck-*.
     - Hero image — a single uploaded image, rendered with `order: 2` so it
       sits on the RIGHT side of the hero (content stays on the LEFT).

   Key constraints handled here:
     1. .fill-image (in styles.css) is `position: absolute; inset: 0;` —
        without a positioned ancestor + a sized container, the image
        overflows. We give .tk-hero-image `position: relative` and an
        aspect-ratio so the container has explicit dimensions.
     2. The hero's <eyebrow> sits above the <h1>; without compensation the
        image top would line up with the eyebrow, not the H1. A small
        top margin offsets that so the image's top edge meets the H1.
     3. The two columns of .tk-hero-grid use `align-items: center` by
        default — we override per-item with `align-self: start` so the
        image hugs the top regardless of column height.
   ========================================================================== */

/* Push the image-wrap to the right column via order. The :has() rule on
   the grid below moves content to the left in lockstep. */
.tk-hero-image-wrap {
  order: 2;
  align-self: start;
  margin-top: clamp(28px, 3vw, 44px);
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.tk-hero-grid:has(> .tk-hero-image-wrap) > .tk-hero-content {
  order: 1;
}

.tk-hero-image {
  position: relative;            /* anchor for .fill-image (position:absolute) */
  border-radius: var(--radius-hero-image);
  overflow: hidden;
  background: var(--frost);
  box-shadow: 0 20px 56px -14px rgba(12, 43, 62, 0.18);
  width: 100%;                   /* fill the grid column — no max-width override */
  aspect-ratio: 4 / 5;            /* gives the container explicit height */
}

@media (max-width: 768px) {
  .tk-hero-image {
    aspect-ratio: 4 / 3;
  }
  /* On mobile the grid collapses to a single column. Drop the top offset
     and re-center the image so it doesn't look misaligned. */
  .tk-hero-image-wrap {
    margin-top: 0;
    justify-content: center;
  }
}

/* ==========================================================================
   home hero — image stretches to content height, aligned with H1 top
   ==========================================================================
   styles.css (~line 317) sets `.hero-grid { align-items: end }`, which
   anchors the image to the bottom of the row. With a fixed 4:5
   aspect-ratio on `.hero-image`, that left the image floating below the
   content baseline and visually disconnected from the H1.

   Two changes here flip that:

     1. Grid items stretch to fill the row height — content column drives
        the row, image column fills the same vertical space.
     2. The image loses its fixed aspect-ratio so it can grow to match
        the content column's height. `.fill-image` (position:absolute,
        inset:0) inside continues to fill the now-flexibly-sized
        `.hero-image` container.

   The hero <eyebrow> sits OUTSIDE the .hero-grid (above it in
   .hero-eyebrow), so the grid's top edge already aligns with the H1's
   top — no offset margin needed on the image-wrap.
   ========================================================================== */

@media (min-width: 769px) {

  .hero-grid {
    align-items: stretch;
  }

  /* The wrap is a flex column so the image grows to fill the available
     height; the optional caption sits below at its natural size. */
  .hero-image-wrap {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .hero-image {
    aspect-ratio: auto;
    flex: 1 1 auto;
    min-height: 360px;  /* fallback if content gets unusually short */
  }
}

/* ==========================================================================
   tk-enroll — paragraph readable on the dark navy section
   ==========================================================================
   The .tk-enroll section background is var(--navy) (set in styles.css ~2829)
   and the title is already var(--paper). The new paragraph slot replacing
   the 4-column strip needs the same treatment so it reads as part of the
   composition rather than disappearing into the dark ground.
   ========================================================================== */

.tk-enroll-paragraph {
  color: var(--paper);
  font-size: clamp(1.02rem, 1.3vw, 1.18rem);
  line-height: var(--lh-160);
  max-width: 56ch;
  margin: 0 auto var(--space-40);
  opacity: 0.92;
}

.tk-enroll-paragraph p {
  margin: 0 0 1em;
}

.tk-enroll-paragraph p:last-child {
  margin-bottom: 0;
}

.tk-enroll-paragraph strong {
  color: var(--paper);
  opacity: 1;
  font-weight: 600;
}

.tk-enroll-paragraph a {
  color: var(--aqua);
  text-decoration: none;
  border-bottom: var(--bw-1) solid currentColor;
  transition: color var(--dur-200), border-color var(--dur-200);
}

.tk-enroll-paragraph a:hover {
  color: var(--paper);
}

/* ==========================================================================
   rich-content — eyebrow + heading + wide WYSIWYG body with inline images
   ==========================================================================
   Generic editorial section. The body slot is a kirbytext field rendered via
   $field->kt(), so admins can mix headings / paragraphs / lists / links /
   images using the textarea toolbar. Images get the standard <figure> wrap
   that Kirby's image kirbytag produces; we style those figures so they sit
   well in the prose flow (full-width, with an italic caption underneath).

   Width: same family as editorial-statement-body (≈80ch) so long-form copy
   reads at a comfortable line length, but the heading + eyebrow above sit
   in the full container so the section feels editorial rather than narrow.
   ========================================================================== */

.rich-content {
  padding: clamp(64px, 8vw, 120px) 0;
  background: var(--paper);
}

.rich-content-head {
  text-align: center;
  margin-bottom: clamp(32px, 4vw, 56px);
}

.rich-content-eyebrow {
  margin-bottom: var(--space-16);
  /* color from global .eyebrow rule (var(--midnight)) */
}

.rich-content-title {
  font-size: clamp(36px, 4.5vw, 64px);
  line-height: var(--lh-100);
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ink);
}

.rich-content-title em {
  color: var(--sky);
  font-style: italic;
}

.rich-content-body {
  max-width: 80ch;
  margin: 0 auto;
  color: var(--ink);
  font-size: clamp(17px, 1.2vw, 19px);
  line-height: var(--lh-175);
}

.rich-content-body > p {
  margin: 0 0 1.25em;
}

.rich-content-body > p:last-child {
  margin-bottom: 0;
}

.rich-content-body h2,
.rich-content-body h3,
.rich-content-body h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 1.6em 0 0.6em;
  line-height: var(--lh-120);
}
.rich-content-body h2 { font-size: clamp(28px, 3vw, 40px); }
.rich-content-body h3 { font-size: clamp(22px, 2.4vw, 30px); }
.rich-content-body h4 { font-size: clamp(18px, 1.8vw, 22px); }

.rich-content-body ul,
.rich-content-body ol {
  margin: 0 0 1.25em;
  padding-left: 1.5em;
}

.rich-content-body li {
  margin: 0.4em 0;
}

.rich-content-body li::marker {
  color: var(--sky);
}

.rich-content-body a {
  color: var(--azure);
  text-decoration: none;
  border-bottom: var(--bw-1) solid var(--azure);
  transition: color var(--dur-200), border-color var(--dur-200);
}

.rich-content-body a:hover {
  color: var(--cobalt);
  border-color: var(--cobalt);
}

.rich-content-body strong { font-weight: 600; }
.rich-content-body em { font-style: italic; color: var(--midnight); }

/* Inline figures — Kirby's (image: …) kirbytag emits <figure> with <img>
   and optional <figcaption>. Let the figure breathe — break out slightly
   beyond the body's 80ch max-width so images feel intentional. */
.rich-content-body figure {
  margin: 2em -2vw;
  padding: 0;
}

.rich-content-body figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-card);
  box-shadow: 0 14px 36px -12px rgba(12, 43, 62, 0.18);
}

.rich-content-body figcaption {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--midnight);
  opacity: 0.75;
  margin-top: 0.6em;
  text-align: center;
}

@media (max-width: 768px) {
  .rich-content-body figure {
    /* Don't break out of the container on narrow screens. */
    margin: 1.5em 0;
  }
}

/* --------------------------------------------------------------------------
   rich-content — SPLIT layout (layout: split + image attached)
   --------------------------------------------------------------------------
   A full-bleed image paired 50/50 with the eyebrow + heading + body. The
   section spans the whole viewport (NO .container wrapper in the snippet), so
   the image column bleeds to the viewport edge on its outer side while the
   text column is padded so its content still lines up with the site
   container's inner gutter (max-width 1280px + var(--space-40) side padding).

   Engages only when the snippet renders `.rich-content--split` — i.e. layout
   is "split" AND an image is attached. Otherwise the default centered text
   column (above) is used, so legacy rich-content blocks are unaffected.

   `--img-left` / `--img-right` choose which side the image sits on. The
   snippet always emits media-then-text in source order (image-first reads
   correctly for screen readers / mobile stacking); `--img-right` flips the
   visual order with `order:` without touching the DOM order.
   ========================================================================== */
.rich-content--split {
  /* Full-bleed band: kill the default vertical section padding so the image
     reaches the top/bottom edges of the strip. Adjacent sections supply the
     surrounding rhythm. */
  padding: 0;
  background: var(--paper);
}

.rc-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;          /* image column stretches to the text height */
  min-height: clamp(440px, 56vh, 640px);
}

.rc-split-media {
  position: relative;            /* anchors .fill-image (position:absolute) */
  overflow: hidden;
  background: var(--frost);
}

/* .rc-split-img extends .fill-image (inset:0; width/height:100%; cover), so the
   photo fills its half regardless of the row height. */

/* Image on the RIGHT: flip the visual column order. Source order stays
   media-first for accessibility + the mobile stack. */
.rich-content--img-right .rc-split-media { order: 2; }
.rich-content--img-right .rc-split-text  { order: 1; }

.rc-split-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(48px, 6vw, 96px);
}

/* Asymmetric inline padding: the seam-side gap is a fixed comfortable gutter;
   the viewport-edge side matches the site container so the text content lines
   up vertically with every other (contained) section on the page. */
.rich-content--img-left .rc-split-text {
  padding-left: clamp(40px, 5vw, 72px);
  padding-right: max(var(--space-40), calc((100vw - 1280px) / 2 + var(--space-40)));
}
.rich-content--img-right .rc-split-text {
  padding-right: clamp(40px, 5vw, 72px);
  padding-left: max(var(--space-40), calc((100vw - 1280px) / 2 + var(--space-40)));
}

/* In-column overrides of the default (centered, 80ch) rich-content head/body. */
.rich-content--split .rich-content-head {
  text-align: left;
  margin-bottom: var(--space-24);
}
.rich-content--split .rich-content-title {
  font-size: var(--fs-display-2);  /* a notch smaller than the full-width title */
}
.rich-content--split .rich-content-body {
  max-width: none;                 /* fill the text column, not the 80ch prose cap */
  margin: 0;
}

@media (max-width: 768px) {
  .rc-split {
    grid-template-columns: 1fr;    /* stack: image on top, text below */
    min-height: 0;
  }
  /* Reset the flip so the image is always on top when stacked. */
  .rich-content--img-right .rc-split-media { order: 0; }
  .rich-content--img-right .rc-split-text  { order: 0; }
  .rc-split-media {
    aspect-ratio: 16 / 10;         /* known height once it no longer stretches */
    min-height: 240px;
  }
  /* Symmetric container gutter on mobile (override the asymmetric desktop pads). */
  .rich-content--img-left .rc-split-text,
  .rich-content--img-right .rc-split-text {
    padding-inline: var(--space-24);
    padding-block: clamp(40px, 8vw, 56px);
  }
}

/* ==========================================================================
   Primary nav — dropdown sub-menus
   ==========================================================================
   Markup is emitted by site/snippets/nav.php. Parent items with a `children`
   structure are rendered as <li class="nav-item dropdown"> containing a
   plain <a class="nav-link" data-eig-nav-parent> followed by
   <ul class="dropdown-menu">.

   Behavior:
     - Desktop (>=992px, fine pointer): menu opens on :hover and
       :focus-within (pure CSS, no JS). Parent link click navigates normally
       to the parent page.
     - Desktop (>=992px, coarse pointer / touch tablets): JS in header.php
       intercepts the first tap on the parent link, prevents navigation,
       adds .is-open to the <li>. A second tap allows the link to navigate
       normally. Tapping outside closes any open dropdown.
     - Mobile (<992px, navbar collapsed): the .dropdown-menu is always
       shown (display:block, position:static, indented) so the whole tree
       reads as one accordion-like list inside the Bootstrap collapse.

   Bootstrap 5.3 provides the base .dropdown-menu visual treatment (white
   background, border, padding, box-shadow); we take over the show/hide
   logic so the parent link remains a real anchor.
   ========================================================================== */

.nav-item.dropdown {
  position: relative;
}

.nav-item.dropdown > .dropdown-menu {
  display: none;
  margin-top: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius-chip);
  box-shadow: 0 12px 32px -8px rgba(12, 43, 62, 0.12);
  padding: var(--space-8) 0;
  min-width: 14rem;
}

.nav-item.dropdown .dropdown-item {
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--midnight);
  padding: var(--space-8) var(--space-18);
  transition: color var(--dur-200), background-color var(--dur-200);
}

.nav-item.dropdown .dropdown-item:hover,
.nav-item.dropdown .dropdown-item:focus {
  color: var(--sky);
  background: rgba(27, 147, 207, 0.06);
}

.nav-item.dropdown .dropdown-item.active {
  color: var(--sky);
  background: transparent;
  font-weight: 600;
}

/* Desktop (lg breakpoint and up) */
@media (min-width: 992px) {

  .nav-item.dropdown:hover > .dropdown-menu,
  .nav-item.dropdown:focus-within > .dropdown-menu,
  .nav-item.dropdown.is-open > .dropdown-menu {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
  }

  .nav-item--has-children > .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
  }

  .nav-item--has-children > .nav-link::after {
    content: "";
    display: inline-block;
    width: 0.42em;
    height: 0.42em;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-0.15em);
    transition: transform var(--dur-200);
  }

  .nav-item.dropdown:hover > .nav-link::after,
  .nav-item.dropdown:focus-within > .nav-link::after,
  .nav-item.dropdown.is-open > .nav-link::after {
    transform: rotate(-135deg) translateY(0.1em);
  }
}

/* Mobile (below lg) — collapsed navbar */
@media (max-width: 991.98px) {

  .nav-item.dropdown > .dropdown-menu {
    display: block;
    position: static;
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0 0 var(--space-8) var(--space-22);
    min-width: 0;
  }

  .nav-item.dropdown .dropdown-item {
    padding: var(--space-6) 0;
  }

  .nav-item--has-children > .nav-link::after {
    display: none;
  }
}

/* ==========================================================================
   narrative-timeline — no-timeline fallback (about-origin section)
   ==========================================================================
   When an admin leaves the `events` structure empty, the snippet adds a
   `.about-origin-grid--no-timeline` modifier class so the 2-col grid
   collapses to a single column and the narrative paragraph spans the
   full container width.
   ========================================================================== */

.about-origin-grid--no-timeline {
  grid-template-columns: minmax(0, 1fr);
}

/* ==========================================================================
   contact-cta (.about-connect) — centered layout + optional CTA button
   ==========================================================================
   styles.css (~line 2284) sets `.connect-inner { max-width: 800px }` but
   doesn't center the container or its content. Center it both ways here.
   When a `cta_label` is set, the snippet now emits a `.connect-cta` row
   between the email link and the social channels — a primary button styled
   to read well on the navy ground.
   ========================================================================== */

.connect-inner {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Re-center the contained pieces that originally rendered left-aligned
   inline because the parent had no text-align. */
.connect-inner .connect-eyebrow,
.connect-inner .connect-title,
.connect-inner .connect-email {
  text-align: center;
}

.connect-inner .connect-email {
  display: inline-block;
}

/* Centered channels row, distributed evenly. */
.connect-channels {
  justify-content: center;
}

/* New: CTA button slot between email + channels. */
.connect-cta {
  display: flex;
  justify-content: center;
  margin: var(--space-32) 0 var(--space-40);
}

/* Lift the primary button onto the navy ground — paper bg + navy text
   matches the brand pattern used in .tk-enroll's enroll button. */
.connect-cta .btn-brand-primary {
  background: var(--paper);
  color: var(--navy);
}

.connect-cta .btn-brand-primary:hover,
.connect-cta .btn-brand-primary:focus-visible {
  background: var(--aqua);
  color: var(--navy);
}

/* ==========================================================================
   team / cd-instructors — heading 2/3 + intro 1/3 in the section-head
   ==========================================================================
   styles.css's global `.section-head { grid-template-columns: 1fr 1.6fr }`
   puts the heading in the narrower column and the intro paragraph in the
   wider column. For team blocks we want the inverse so the headline reads
   as the dominant element. Scope to `.founders` (the team block's section
   wrapper) so the rule doesn't ripple into other blocks that use
   .section-head (numbered-list, pillars-grid, founder-profiles, etc.).
   ========================================================================== */

.founders .section-head {
  grid-template-columns: 2fr 1fr;
  align-items: end;
}

/* ==========================================================================
   image-hero — align image top with H1 + stretch to content height
   ==========================================================================
   Same intent as the home hero fix above. The image-hero block (used on
   /community) puts the eyebrow INSIDE the text column above the H1, so
   the image-wrap needs a top offset to push the image's top down to the
   H1's baseline-top — different from home hero where the eyebrow sits
   outside the grid.

   styles in overrides.css under "image-hero" earlier:
     .ih-grid { align-items: center; }
     .ih-image { aspect-ratio: 4 / 5; }
   Both override here.
   ========================================================================== */

@media (min-width: 769px) {

  .ih-grid {
    align-items: stretch;
  }

  /* The image-wrap stretches to fill the grid cell vertically. flex-column
     so the .ih-image inside can `flex: 1` to consume the available height
     (minus the top offset that aligns it with the H1's top). */
  .ih-grid--with-image .ih-image-wrap {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-self: stretch;
    /* The image's top edge should line up with the H1's top edge, not the
       eyebrow's. The snippet sets --ih-image-offset based on what sits
       above the H1: ~40px for just an eyebrow, ~95px when there's also a
       pulse pill. Fallback 40px for any context where the var is unset. */
    margin-top: var(--ih-image-offset, 40px);
  }

  /* In stretch mode the .ih-image grows to fill the wrap height (no fixed
     aspect-ratio). The img inside absolutely fills the container regardless
     of natural dimensions, so there's no frost background showing through
     below the image. */
  .ih-grid--with-image .ih-image {
    aspect-ratio: auto;
    flex: 1 1 auto;
    min-height: 360px;
  }

  .ih-grid--with-image .ih-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* ==========================================================================
   editorial-intro — tighter spacing when no cover image is uploaded
   ==========================================================================
   styles.css (~line 2001) sets `.about-intro-body { padding: 56px 0 80px }`
   to give the body breathing room AFTER the optional cover image. When no
   image is present (as on the community page's cop-what section), the
   body lands directly after the `.about-intro-head` and the combined
   margin/padding (head margin-bottom 48px + body padding-top 56px = 104px)
   feels excessive.

   The adjacent-sibling selector (`+`) only fires when the head is
   immediately followed by the body in the DOM — i.e. when no image was
   rendered between them. So sections WITH a cover image keep their
   intended breathing room.
   ========================================================================== */

.about-intro-head + .about-intro-body {
  padding-top: var(--space-16);
}

/* ==========================================================================
   bd-title — full container width for long blog article titles
   ==========================================================================
   styles.css (~line 5495) sets `.bd-title { max-width: 800px }`. Long
   titles wrap awkwardly at that cap. Lift the cap so the H1 uses the
   full container width.
   ========================================================================== */

.bd-title {
  max-width: none;
}

/* ==========================================================================
   outcomes-checklist (.cd-outcomes-head) — span H2 across both grid rows
   ==========================================================================
   The head is a 2-column grid (`1fr 1.6fr`, `align-items: end`) with three
   block children: .eyebrow, h2, and a p (intro). Default `grid-auto-flow:
   row` places them as:

     row 1 col 1: .eyebrow      row 1 col 2: h2
     row 2 col 1: p             row 2 col 2: (empty)

   With `align-items: end`, every item bottom-aligns INSIDE its own cell.
   The h2 is in row 1 only, so it bottom-aligns to the bottom of row 1 —
   which is mid-column visually, because row 2 (where the intro paragraph
   sits in col 1) still claims vertical space below it. Result: the H2
   floats high, disconnected from the eyebrow above it AND from the intro
   beside it. Most visible on /case-based-learning's #cbl-outcomes where
   the H2 is short ("By the end of every session, you'll have:").

   Fix: make h2 span both rows. Then `align-items: end` aligns h2 to the
   bottom of its full column-span — which coincides with the intro
   paragraph's bottom in column 1. Magazine-spread bottom-rule restored.

   Reduces to a one-row layout on mobile where the grid collapses to a
   single column (handled by the existing `.cd-outcomes-head` media query
   in styles.css ~line 1905).
   ========================================================================== */

@media (min-width: 769px) {
  .cd-outcomes-head h2 {
    grid-row: 1 / -1;
  }
}

/* --------------------------------------------------------------------------
   outcomes-checklist — optional side image (right of the heading)
   --------------------------------------------------------------------------
   When the block has an image, the head + image sit in a 2-column row above
   the outcomes grid. The head's own internal 2-col layout (eyebrow/intro +
   spanned H2) is collapsed to a simple stack here so it reads as a single
   text column beside the photo. The `--with-image` wrapper only exists when
   an image is attached, so image-less blocks (e.g. course-detail's
   cd-outcomes) are untouched. */
.cd-outcomes-top--with-image {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.85fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  margin-bottom: clamp(40px, 5vw, 64px);
}

.cd-outcomes-top--with-image .cd-outcomes-head {
  grid-template-columns: 1fr;   /* stack eyebrow → heading → intro */
  gap: var(--space-16);
  margin-bottom: 0;             /* spacing handled by the wrapper */
}

/* Undo the desktop H2 row-span (only meaningful in the 2-col head layout). */
@media (min-width: 769px) {
  .cd-outcomes-top--with-image .cd-outcomes-head h2 {
    grid-row: auto;
  }
}

.cd-outcomes-media {
  position: relative;                 /* anchor for .fill-image */
  overflow: hidden;
  border-radius: var(--radius-card-lg);
  background: rgba(244, 239, 230, 0.08);
  aspect-ratio: 4 / 3;
  box-shadow: 0 18px 50px rgba(12, 43, 62, 0.35);
}

@media (max-width: 768px) {
  .cd-outcomes-top--with-image {
    grid-template-columns: 1fr;       /* stack: image above the heading */
    gap: var(--space-28);
  }
  .cd-outcomes-media {
    order: -1;                        /* photo first, then heading text */
    aspect-ratio: 16 / 10;
  }
}


/* ==========================================================================
   /courses — module cards get whitespace, not the dense hairline grid
   ==========================================================================
   content-catalog's .ls-grid uses a tight 2px gap over a --rule-strong
   background so the gap reads as hairline dividers between many small
   article/press cards. For the big feature MODULE cards on /courses that
   reads as cramped. Scoped via :has() to grids that contain module cards
   (modules only ever appear on /courses), so the /blog and /press-releases
   catalogs keep their original dense bordered-grid look untouched.

   Since the dark grid-bleed previously drew each card's edge, removing it
   means the white module cards need their own border + radius. */
.ls-grid:has(.ls-card--module) {
  background: transparent;
  gap: clamp(28px, 3vw, 44px);
}

.ls-grid:has(.ls-card--module) .ls-card--module {
  border: var(--bw-1) solid var(--rule);
  border-radius: var(--radius-card);
  overflow: hidden; /* clip the module image to the rounded top corners */
}