/* ============================================================
   CONTRAST FIXES (v17.1 — final)
   ============================================================
   WCAG AA contrast audit. Loaded after main stylesheet.
   Generated: 2026-05-18
   
   Selector strategy:
   - Use .section.paper > * for light-section scoping (immediate child)
   - Use .section.dark > * for dark-section scoping (immediate child)
   - Avoid bare "section:not(.dark)" which matches outer wrappers
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   1. HEADER CTA "Request a Demo" — was cream on cream.
   ════════════════════════════════════════════════════════════ */
.header .nav-links .cta-link,
.header .cta-link {
  background: var(--accent, #2f5ef5) !important;
  color: var(--paper, #fcfaf6) !important;
  padding: 8px 18px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  line-height: 1.3 !important;
  transition: background 0.15s ease !important;
}
.header .nav-links .cta-link:hover,
.header .cta-link:hover {
  background: var(--ink, #0b1320) !important;
}

/* ════════════════════════════════════════════════════════════
   2. SKIP-TO-CONTENT — ensure contrast on focus and rendered state.
   ════════════════════════════════════════════════════════════ */
.skip-to-content,
a.skip-to-content {
  background: var(--ink, #0b1320) !important;
  color: var(--paper, #fcfaf6) !important;
}
a.skip-to-content:focus,
.skip-to-content:focus {
  outline: 3px solid #a8c0ff !important;
  outline-offset: 2px !important;
}

/* ════════════════════════════════════════════════════════════
   3. HERO KICKERS (.ring) — was muted on paper at 3.66.
   The .ring class is hero-specific so scoping is straightforward.
   ════════════════════════════════════════════════════════════ */
.hero .ring,
.ring {
  color: #4a4234 !important;
  border-color: rgba(74, 66, 52, 0.28) !important;
}
/* Keep .ring inside dark sections light */
.section.dark .ring,
section.dark > .wrap .ring {
  color: #a8c0ff !important;
  border-color: rgba(168, 192, 255, 0.32) !important;
}

/* ════════════════════════════════════════════════════════════
   4. LABELS on LIGHT (paper) backgrounds — darken brand blue.
   Scoped by IMMEDIATE parent section being .paper.
   ════════════════════════════════════════════════════════════ */
.section.paper .card .label,
.section.paper .card span.label,
.section.paper > .wrap .card .label,
.section.paper > .wrap .card span.label {
  color: #1e3fb8 !important;
}

/* Sec-head kickers in paper sections */
.section.paper .sec-head .kicker,
.section.paper > .wrap > .sec-head .kicker,
.section.paper > .wrap .sec-head .kicker {
  color: #1e3fb8 !important;
}

/* Inline-styled callout kickers inside paper sections only */
.section.paper > .wrap div[style*="WHITEPAPER"],
.section.paper > .wrap div[style*="FURTHER READING"] {
  color: #1e3fb8 !important;
}

/* ════════════════════════════════════════════════════════════
   5. LABELS on DARK backgrounds — KEEP LIGHT.
   Scoped by IMMEDIATE parent section being .dark.
   These rules MUST come after the light rules above so they win 
   when an element is in a .dark section (same specificity, cascade order).
   ════════════════════════════════════════════════════════════ */
.section.dark .label,
.section.dark .card .label,
.section.dark span.label,
.section.dark .kicker,
.section.dark .sec-head .kicker,
section.dark .label,
section.dark span.label,
section.dark .kicker,
section.dark .sec-head .kicker {
  color: #a8c0ff !important;
}

/* Catch kickers with inline color: var(--accent-2) inside dark sections */
.section.dark > .wrap .kicker[style*="color"],
.section.dark > .wrap > .sec-head .kicker[style*="color"],
section.dark > .wrap .kicker[style*="color"],
section.dark > .wrap > div[style*="text-align"] .kicker[style*="color"] {
  color: #a8c0ff !important;
}

/* Aggressive catch-all: any kicker inside a .dark section, regardless of inline style */
section.dark .kicker,
section.dark div.kicker,
.dark > .wrap .kicker,
.dark > .wrap div.kicker {
  color: #a8c0ff !important;
}

/* ════════════════════════════════════════════════════════════
   6. CTA-STRIP and EXEC-BOX kickers — dark-background containers
   that aren't .section.dark themselves.
   ════════════════════════════════════════════════════════════ */
.cta-strip .kicker,
.exec-box .kicker,
.exec-box .label {
  color: #a8c0ff !important;
}

/* ════════════════════════════════════════════════════════════
   7. CARD ARROW LINKS — was light brand blue on paper-2 (4.14 ratio).
   ════════════════════════════════════════════════════════════ */
.section.paper .card .more.arrow,
.section.paper .card a span.more,
.section.paper > .wrap .card .more.arrow,
.card .more.arrow {
  color: var(--ink, #0b1320) !important;
  font-weight: 500 !important;
}
/* Keep arrow links light on dark cards */
.section.dark .card .more.arrow,
section.dark .card .more.arrow {
  color: #a8c0ff !important;
}

.section.paper a.card,
section.paper a.card {
  color: var(--ink, #0b1320);
}

/* ════════════════════════════════════════════════════════════
   8. PROBLEM PARAGRAPHS / LIST ITEMS on DARK section.
   ════════════════════════════════════════════════════════════ */
/* Pod cards: solid paper bg so dark text reads. */
.section.dark .pod-card,
section.dark .pod-card {
  background: var(--paper, #fcfaf6) !important;
}

/* Routing decision steps on dark section: solid bg so dark text reads */
.section.dark .dec-flow .step,
section.dark .dec-flow .step {
  background: var(--paper, #fcfaf6) !important;
  border-left: 3px solid var(--accent, #2f5ef5) !important;
}
.section.dark .dec-flow .step .text,
.section.dark .dec-flow .step .text strong,
section.dark .dec-flow .step .text,
section.dark .dec-flow .step .text strong {
  color: var(--ink, #0b1320) !important;
}

/* Body paragraphs directly on dark backgrounds — light text */
.section.dark > .wrap > p,
.section.dark > .wrap > .sec-head .lede,
section.dark > .wrap > p,
section.dark > .wrap > .sec-head .lede,
section.dark > .wrap > .sec-head > p {
  color: color-mix(in srgb, var(--paper, #fcfaf6) 88%, transparent) !important;
}

/* ════════════════════════════════════════════════════════════
   9. WHO PILLS on field-note time-blocks.
   ════════════════════════════════════════════════════════════ */
.time-block .who.fde {
  background: #1e3fb8 !important;
  color: var(--paper, #fcfaf6) !important;
  border: none !important;
}
.time-block .who.sce {
  background: var(--ink, #0b1320) !important;
  color: var(--paper, #fcfaf6) !important;
  border: none !important;
}

/* ════════════════════════════════════════════════════════════
   10. DARK TABLES — muted text unreadable.
   ════════════════════════════════════════════════════════════ */
.section.dark table th,
.section.dark table td.muted,
.section.dark .muted,
section.dark table th,
section.dark .muted {
  color: color-mix(in srgb, var(--paper, #fcfaf6) 75%, transparent) !important;
}

/* ════════════════════════════════════════════════════════════
   11. STATUS PILLS — "Live", "Compliant in production".
   ════════════════════════════════════════════════════════════ */
.pill.ok,
.pill.live,
.pulse,
span.pulse {
  color: #1b5a36 !important;
}
.pill.ok {
  background: color-mix(in srgb, #5dd49a 22%, transparent) !important;
}

/* ════════════════════════════════════════════════════════════
   12. IMAGE CAPTIONS.
   ════════════════════════════════════════════════════════════ */
.image-caption,
div.image-caption {
  color: var(--ink-soft, #4a4234) !important;
}

/* ════════════════════════════════════════════════════════════
   13. CODE TEXT on dark sections.
   ════════════════════════════════════════════════════════════ */
.section.dark span.c,
section.dark span.c,
.section.dark code,
section.dark code,
pre code {
  color: #c4d2ee !important;
}

/* ════════════════════════════════════════════════════════════
   14. TIER/CATEGORY NUMBER LABELS on paper sections.
   div.tier-num, div.lobe-num — used on architecture pages.
   ════════════════════════════════════════════════════════════ */
.section.paper .tier-num,
.section.paper .lobe-num,
.section.paper > .wrap .tier-num,
.section.paper > .wrap .lobe-num,
.tier-num,
.lobe-num {
  color: #1e3fb8 !important;
}

.section.paper .tier-mapped,
.section.paper > .wrap .tier-mapped {
  color: #1e3fb8 !important;
}

/* ════════════════════════════════════════════════════════════
   15. HOMEPAGE platform-card OVERLAY text — defensive text-shadow.
   The audit can't see the .scrim gradient over the image.
   ════════════════════════════════════════════════════════════ */
.platform-card h3.name,
.platform-card .cat,
.platform-card .body,
.platform-card .body *,
.platform-card .bullets li,
.platform-card ul.bullets li,
.product-card h3.name,
.product-card .cat,
.product-card li,
.product-card ul li {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7), 0 0 2px rgba(0, 0, 0, 0.5);
}

/* ════════════════════════════════════════════════════════════
   16. EMAIL LINKS on light pages — were 4.14 ratio.
   ════════════════════════════════════════════════════════════ */
.section.paper a[href^="mailto:"],
section.paper a[href^="mailto:"] {
  color: #1e3fb8 !important;
}

/* "Talk to the team →" anchor on sub-dark exec-box sections */
.exec-box a,
.exec-box a:not([class]) {
  color: #a8c0ff !important;
}

/* ════════════════════════════════════════════════════════════
   17. AETHER-MARK — intentional gradient text, leave as-is.
   ════════════════════════════════════════════════════════════ */
em.aether-mark { /* gradient text intentional — do not override */ }


/* ════════════════════════════════════════════════════════════
   v17.1 ROUND 3 — Targeted catches for remaining patterns
   ════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   18. INLINE-STYLED CALLOUT KICKERS — match any kicker-like 
   div with inline color: var(--accent) and known text patterns
   used in v16/v17 cross-link callouts.
   ───────────────────────────────────────────── */
div[style*="color: var(--accent)"][style*="font-family: var(--mono)"][style*="text-transform: uppercase"] {
  color: #1e3fb8 !important;
}

/* Same for the explicit text colors used in the inline callout headers */
div[style*="color: var(--accent);"][style*="font-family: var(--mono)"] {
  color: #1e3fb8 !important;
}

/* ─────────────────────────────────────────────
   19. "Read the case study →" anchor links with inline brand-blue.
   ───────────────────────────────────────────── */
a[style*="color: var(--accent)"][style*="border-bottom"] {
  color: #1e3fb8 !important;
}

/* ─────────────────────────────────────────────
   21. CODE SPANS on aether-sdlc page (span.c).
   The page uses .span.c with explicit muted color on dark.
   ───────────────────────────────────────────── */
section.dark span.c,
.section.dark span.c,
pre span.c,
code span.c,
.code-block span.c,
section.dark .code-block span,
.section.dark .code-block span {
  color: #c4d2ee !important;
}

/* ─────────────────────────────────────────────
   22. SPAN.LABEL inside CTA buttons ("AI Governance · new").
   The label was getting my darkened blue treatment but it sits 
   on a brand-blue CTA button background. Use light text + chip.
   ───────────────────────────────────────────── */
.cta-link span.label,
.cta-link .label,
a.cta-link span.label,
.btn span.label,
button span.label {
  background: rgba(255, 255, 255, 0.22) !important;
  color: var(--paper, #fcfaf6) !important;
  padding: 2px 8px !important;
  border-radius: 3px !important;
}

/* ─────────────────────────────────────────────
   23. WHITEPAPER METADATA LABELS — "WHITEPAPER · PDF · 15 PAGES"
   These are inside whitepaper-download cards on light bg.
   ───────────────────────────────────────────── */
.section.paper .wp-meta span.label,
.section.paper .download-card span.label,
.whitepaper-card span.label[class*="wp"],
section.paper .download-card span.label {
  color: #1e3fb8 !important;
}

/* And the broader catch */
.section.paper span.label,
.section.paper > .wrap span.label,
section.paper span.label {
  /* Only apply if it's NOT a tier-colored category label */
}

/* ─────────────────────────────────────────────
   24. Final defensive: ensure homepage gradient overlay text 
   has shadow regardless of class structure.
   ───────────────────────────────────────────── */
.platform-card .body h3,
.platform-card .body div,
.platform-card .body span,
.platform-card .body li,
.platform-card .body ul li {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.75), 0 0 3px rgba(0, 0, 0, 0.6) !important;
}


/* ─────────────────────────────────────────────
   25. EMAIL LINKS — scoped only to paper sections in main body (not footer).
   The footer has its own anchor styling and dark background.
   ───────────────────────────────────────────── */
main .section.paper a[href^="mailto:"],
main section.paper a[href^="mailto:"],
main .section:not(.dark) > .wrap a[href^="mailto:"],
.wp-meta a[href^="mailto:"],
.exec-box a[href^="mailto:"] {
  color: #1e3fb8 !important;
}

/* ─────────────────────────────────────────────
   26. TD.MUTED — scoped strictly to dark-section tables.
   Don't blanket-apply to paper-section tables.
   ───────────────────────────────────────────── */
.section.dark > .wrap td.muted,
section.dark > .wrap td.muted,
.section.dark > .wrap table th,
section.dark > .wrap table th,
.section.dark > .wrap table .muted,
section.dark > .wrap table .muted {
  color: color-mix(in srgb, var(--paper, #fcfaf6) 78%, transparent) !important;
}



/* ════════════════════════════════════════════════════════════
   v17.1 ROUND 4 — POD CARD text on solid paper bg.
   Override the inherited .section.dark .card p rule.
   ════════════════════════════════════════════════════════════ */
.section.dark .pod-card p,
.section.dark .pod-card li,
.section.dark .pod-card ul,
.section.dark .pod-card .subtitle,
section.dark .pod-card p,
section.dark .pod-card li,
section.dark .pod-card ul,
section.dark .pod-card .subtitle {
  color: var(--ink-soft, #4a4234) !important;
}

.section.dark .pod-card h3,
section.dark .pod-card h3 {
  color: var(--ink, #0b1320) !important;
}

.section.dark .pod-card .owns-label,
.section.dark .pod-card .seat-num,
section.dark .pod-card .owns-label,
section.dark .pod-card .seat-num {
  color: #1e3fb8 !important;
}

/* Same for dec-flow steps on dark section — solid paper bg means dark text. */
.section.dark .dec-flow .step .num,
section.dark .dec-flow .step .num {
  color: #1e3fb8 !important;
}

/* === v18.1 patch: prevent CTA-link wrap, strengthened (May 2026) === */
/* Use !important and multiple specificity forms to beat any future override. */
a.cta-link,
.cta-link,
.header .cta-link,
.header .nav-links .cta-link,
.nav-links > li > a.cta-link {
  white-space: nowrap !important;
  word-break: keep-all !important;
}
a.nav-direct,
.nav-direct,
.header .nav-direct,
.nav-links > li > a.nav-direct {
  white-space: nowrap !important;
  word-break: keep-all !important;
}

/* ════════════════════════════════════════════════════════════
   V19 · WISeR Portal nav-direct button — moved from inline style
   ════════════════════════════════════════════════════════════ */
.nav-links a.nav-direct {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--accent);
  color: var(--paper);
  border-radius: 999px;
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════
   V19 · Footer column labels — non-heading element with ARIA heading semantics
   Replaces <h4> in footer partial (which polluted document outline for AEO).
   Visual styling mirrors existing .footer h5 rule.
   ════════════════════════════════════════════════════════════ */
.footer .footer-col-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 65%, transparent);
  margin: 0 0 16px;
  font-weight: 500;
  display: block;
}

/* ════════════════════════════════════════════════════════════
   V19 · Non-heading replacements for sidebar/tile labels
   Visual styling preserved; document outline kept clean.
   ════════════════════════════════════════════════════════════ */
.product-name,
.card-title-emph,
.hero-side-title {
  font-family: var(--serif, "IBM Plex Serif", Georgia, serif);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}
.product-name {
  font-size: clamp(20px, 2.2vw, 26px);
}
.card-title-emph {
  font-size: clamp(18px, 2vw, 22px);
  margin-bottom: 8px;
}
.hero-side-title {
  font-size: clamp(22px, 2.4vw, 28px);
}

/* v21 — heading-hierarchy fix: make .steps h3 visually identical to old .steps h4 (avoids H2→H4 skip) */
ol.steps li h3{font-size:clamp(18px,1.6vw,22px);line-height:1.25;margin:0 0 6px;font-variation-settings:"opsz" 30;letter-spacing:-.02em}