/* ==========================================================================
   Regain Accreditation — component class library
   Generated by /frontend dl from 09-deliverables/02-iac/09-landing-site/00-design-language.md
   Do not hand-edit.

   Every class below is specified in the design language doc. Classes are
   prefixed `acc-` and scoped to `body.accreditation` so they cannot affect
   other salomatic-crm marketing pages.
   ========================================================================== */

/* -------------------------------------------------------------------------
   Page shell — container widths from §6.2 of the design doc.
   ------------------------------------------------------------------------- */

.acc-container-prose {
  max-width: var(--acc-measure-prose);
  margin-inline: auto;
  padding-inline: var(--acc-space-6);
}

.acc-container-default {
  max-width: var(--acc-measure-default);
  margin-inline: auto;
  padding-inline: var(--acc-space-6);
}

.acc-container-wide {
  max-width: var(--acc-measure-wide);
  margin-inline: auto;
  padding-inline: var(--acc-space-6);
}

/* -------------------------------------------------------------------------
   Typography roles — §4.2, §7.1, §7.2 of the design doc.
   ------------------------------------------------------------------------- */

.acc-eyebrow {
  font-family: var(--acc-font-body);
  font-size: var(--acc-fs-eyebrow);
  line-height: var(--acc-lh-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--acc-tracking-eyebrow);
  color: var(--acc-color-ink-3);
  margin: 0 0 var(--acc-space-4) 0;
}

.acc-display-1 {
  font-family: var(--acc-font-display);
  font-size: var(--acc-fs-display-1);
  line-height: var(--acc-lh-display-1);
  font-weight: 400;
  letter-spacing: var(--acc-tracking-display-tight);
  margin: 0 0 var(--acc-space-8) 0;
  color: var(--acc-color-ink);
  max-width: var(--acc-measure-prose);
}

.acc-display-2 {
  font-family: var(--acc-font-display);
  font-size: var(--acc-fs-display-2);
  line-height: var(--acc-lh-display-2);
  font-weight: 400;
  letter-spacing: var(--acc-tracking-display);
  margin: 0 0 var(--acc-space-6) 0;
  color: var(--acc-color-ink);
}

.acc-display-3 {
  font-family: var(--acc-font-display);
  font-size: var(--acc-fs-display-3);
  line-height: var(--acc-lh-display-3);
  font-weight: 400;
  letter-spacing: var(--acc-tracking-display);
  margin: 0 0 var(--acc-space-5) 0;
  color: var(--acc-color-ink);
}

.acc-headline {
  font-family: var(--acc-font-display);
  font-size: var(--acc-fs-headline);
  line-height: var(--acc-lh-headline);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 var(--acc-space-3) 0;
  color: var(--acc-color-ink);
}

.acc-subhead {
  font-family: var(--acc-font-body);
  font-size: var(--acc-fs-subhead);
  line-height: var(--acc-lh-subhead);
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: var(--acc-space-10) 0 var(--acc-space-3) 0;
  color: var(--acc-color-ink);
}

.acc-lead {
  font-family: var(--acc-font-body);
  font-size: var(--acc-fs-body-lg);
  line-height: var(--acc-lh-body-lg);
  font-weight: 400;
  color: var(--acc-color-ink-2);
  max-width: var(--acc-measure-prose);
  margin: 0 0 var(--acc-space-8) 0;
}

.acc-body,
body.accreditation p {
  font-size: var(--acc-fs-body);
  line-height: var(--acc-lh-body);
  color: var(--acc-color-ink-2);
  max-width: var(--acc-measure-prose);
}

.acc-body-sm,
.acc-caption {
  font-size: var(--acc-fs-body-sm);
  line-height: var(--acc-lh-body-sm);
  color: var(--acc-color-ink-3);
}

/* -------------------------------------------------------------------------
   Page header — §7.1. Eyebrow → display → lead → terminal hairline.
   Nothing else lives here. No CTA. No hero image.
   ------------------------------------------------------------------------- */

.acc-page-header {
  padding: var(--acc-space-24) 0 var(--acc-space-16);
  border-bottom: 1px solid var(--acc-color-rule-strong);
  margin-bottom: var(--acc-space-16);
}

.acc-page-header .acc-lead:last-child {
  margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   Split page header (§7.1 variant) — text block on the left, summary
   illustration on the right. Used on accreditation home, Insights, Use
   Cases, and Trust landings so the hero figure occupies the otherwise
   empty cream space beside the headline + lead. Stacks below the text
   on narrow viewports.
   ------------------------------------------------------------------------- */

.acc-page-header--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--acc-space-12);
  align-items: start;
}

/* Home variant — text takes a slightly wider column so the long
   "Standards turn into evidence…" headline gets fewer awkward line
   breaks, and the landscape triptych settles into a narrower right
   column where its native 3:2 aspect reads as deliberate. */
.acc-page-header--split.acc-page-header--text-wide {
  grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
}

.acc-page-header__text {
  min-width: 0;
}

.acc-page-header__text > :last-child {
  margin-bottom: 0;
}

/* Editorial claim blocks placed under the lead. Each claim is a short
   declarative title + body sentence; the block mirrors the triptych's
   three-section structure and gives the text column enough vertical
   mass to balance a tall portrait figure on the right. */

.acc-page-header__claims {
  margin-top: var(--acc-space-12);
}

.acc-page-header__claims > .acc-eyebrow {
  margin-top: 0;
  margin-bottom: var(--acc-space-4);
}

.acc-claim {
  font-family: var(--acc-font-body);
  font-size: var(--acc-fs-body);
  line-height: var(--acc-lh-body);
  color: var(--acc-color-ink-2);
  margin: 0 0 var(--acc-space-6) 0;
  max-width: 38rem;
}

.acc-claim:last-child {
  margin-bottom: 0;
}

.acc-claim strong {
  font-family: var(--acc-font-body);
  font-weight: 600;
  color: var(--acc-color-ink);
  margin-right: var(--acc-space-1);
}

.acc-page-header__claims {
  margin-top: var(--acc-space-8);
}

/* Bridge link between the split page header and the next narrative section.
   Exposes engineering specifics from a deeper page (e.g. Trust) for visitors
   who won't navigate past Home. Single-line, italic, quiet. */

.acc-page-bridge {
  padding: var(--acc-space-6) 0 var(--acc-space-10);
}

.acc-page-bridge__link {
  font-family: var(--acc-font-body);
  font-size: var(--acc-fs-body-sm);
  line-height: var(--acc-lh-body-sm);
  font-style: italic;
  color: var(--acc-color-ink-3);
  margin: 0;
  max-width: 56rem;
}

.acc-claim {
  margin-bottom: var(--acc-space-3);
}

@media (max-width: 900px) {
  .acc-page-header--split,
  .acc-page-header--split.acc-page-header--text-wide {
    grid-template-columns: 1fr;
    gap: var(--acc-space-8);
  }
}

/* -------------------------------------------------------------------------
   Page-hero figure — summary illustration. Used inside .acc-page-header--split
   (right column) and historically standalone as .acc-page-hero. Fathom-
   direction visuals at 3:2.
   ------------------------------------------------------------------------- */

.acc-page-hero {
  padding: var(--acc-space-10) 0 var(--acc-space-16);
}

.acc-page-hero-figure {
  margin: 0;
}

.acc-page-hero-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 56vh;
  object-fit: contain;
  object-position: center;
}

.acc-page-header--split .acc-page-hero-figure img {
  max-height: none;
}

.acc-page-hero-figure figcaption {
  font-family: var(--acc-font-body);
  font-size: var(--acc-fs-body-sm);
  line-height: var(--acc-lh-body-sm);
  color: var(--acc-color-ink-3);
  font-style: italic;
  margin: var(--acc-space-3) 0 0 0;
  max-width: 38rem;
}

/* -------------------------------------------------------------------------
   Section opener — §7.2. Used between major page sections.
   ------------------------------------------------------------------------- */

.acc-section {
  padding: var(--acc-space-24) 0;
}

.acc-section + .acc-section {
  border-top: 1px solid var(--acc-color-rule);
}

.acc-section-opener {
  margin-bottom: var(--acc-space-12);
}

/* -------------------------------------------------------------------------
   Pull-out — §7.5. Warm paper-2 bleed, prose-width content inside.
   ------------------------------------------------------------------------- */

.acc-pull-out {
  background: var(--acc-color-paper-2);
  padding: var(--acc-space-16) 0;
  margin: var(--acc-space-16) calc(50% - 50vw);
  padding-inline: max(var(--acc-space-6), calc(50vw - 50%));
}

.acc-pull-out > * {
  max-width: var(--acc-measure-prose);
  margin-inline: auto;
}

/* -------------------------------------------------------------------------
   Cards — §7.3. Three variants only. 4px radius, 1px rule border.
   Single shadow elevation (on hover only for default). No second level.
   ------------------------------------------------------------------------- */

.acc-card-default {
  background: var(--acc-color-paper);
  border: 1px solid var(--acc-color-rule);
  border-radius: var(--acc-radius);
  padding: var(--acc-space-8);
  transition: box-shadow 120ms ease, border-color 120ms ease;
}

.acc-card-default:hover {
  box-shadow: var(--acc-shadow-paper);
  border-color: var(--acc-color-rule-strong);
}

.acc-card-pulled {
  background: var(--acc-color-paper-2);
  border: none;
  border-radius: var(--acc-radius);
  padding: var(--acc-space-12);
}

.acc-card-citation {
  background: var(--acc-color-paper-2);
  border-left: 2px solid var(--acc-color-accent);
  border-radius: 0;
  padding: var(--acc-space-6);
}

/* -------------------------------------------------------------------------
   Stat block — §7.4. The recurring typographic grace note of the site.
   Big tabular numeral → serif headline → 32px hairline → body-sm caption.
   ------------------------------------------------------------------------- */

.acc-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--acc-space-12);
}

.acc-stat-block {
  display: flex;
  flex-direction: column;
  gap: var(--acc-space-3);
}

.acc-stat-value {
  font-family: var(--acc-font-body);
  font-size: var(--acc-fs-stat-xl);
  line-height: var(--acc-lh-stat-xl);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--acc-color-ink);
  font-feature-settings: var(--acc-feat-tabular);
  margin: 0;
}

.acc-stat-headline {
  font-family: var(--acc-font-display);
  font-size: var(--acc-fs-headline);
  line-height: var(--acc-lh-headline);
  font-weight: 500;
  color: var(--acc-color-ink-2);
  margin: 0;
}

.acc-stat-rule {
  width: 32px;
  height: 1px;
  background: var(--acc-color-ink-4);
  margin: var(--acc-space-2) 0 var(--acc-space-3);
  border: none;
}

.acc-stat-caption {
  font-size: var(--acc-fs-body-sm);
  line-height: var(--acc-lh-body-sm);
  color: var(--acc-color-ink-3);
  margin: 0;
  max-width: 28rem;
}

/* -------------------------------------------------------------------------
   Buttons — §7.9. Three total. Never more. No scale, no glow, no shadow expansion.
   ------------------------------------------------------------------------- */

.acc-button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--acc-color-ink);
  color: var(--acc-color-paper);
  font-family: var(--acc-font-body);
  font-size: var(--acc-fs-body);
  font-weight: 500;
  letter-spacing: -0.005em;
  padding: var(--acc-space-3) var(--acc-space-6);
  border-radius: var(--acc-radius);
  border: 1px solid var(--acc-color-ink);
  text-decoration: none;
  transition: background-color 120ms ease, color 120ms ease;
  cursor: pointer;
}

.acc-button-primary:hover {
  background: var(--acc-color-ink-2);
  color: var(--acc-color-paper);
  text-decoration: none;
}

/* Override the body.accreditation base anchor color so button-styled anchors
   show paper text, not oxblood — needs body.* specificity to beat tokens.css. */
body.accreditation a.acc-button-primary,
body.accreditation a.acc-button-primary:visited,
body.accreditation a.acc-button-primary:hover {
  color: var(--acc-color-paper);
  text-decoration: none;
}

body.accreditation a.acc-button-secondary,
body.accreditation a.acc-button-secondary:visited,
body.accreditation a.acc-button-secondary:hover {
  color: var(--acc-color-ink);
  text-decoration: none;
}

.acc-button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--acc-color-paper);
  color: var(--acc-color-ink);
  font-family: var(--acc-font-body);
  font-size: var(--acc-fs-body);
  font-weight: 500;
  padding: var(--acc-space-3) var(--acc-space-6);
  border-radius: var(--acc-radius);
  border: 1px solid var(--acc-color-ink);
  text-decoration: none;
  transition: background-color 120ms ease, color 120ms ease;
  cursor: pointer;
}

.acc-button-secondary:hover {
  background: var(--acc-color-paper-2);
  text-decoration: none;
}

.acc-link-inline {
  color: var(--acc-color-accent);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.acc-link-inline:hover {
  text-decoration: none;
  color: var(--acc-color-accent-soft);
}

/* -------------------------------------------------------------------------
   Navigation — §7.10. Single horizontal row, wordmark left, links right.
   ------------------------------------------------------------------------- */

nav.acc-container-wide {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--acc-color-paper);
  /* Fathom is paper, not glass. The previous editorial set used a
     backdrop-filter blur for a frosted nav — explicitly removed: Fathom
     forbids glassmorphism. The cream paper renders solid behind the rule. */
}

.acc-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--acc-space-4) 0;
  border-bottom: 1px solid var(--acc-color-rule);
}

.acc-nav-wordmark-group {
  display: inline-flex;
  align-items: center;
  gap: var(--acc-space-2);
  text-decoration: none;
  color: inherit;
}

/* Defeat body.accreditation a defaults so the Regain wordmark renders ink,
   no underline — specificity (0,1,1) matches the tokens.css rule. */
body.accreditation a.acc-nav-wordmark-group,
body.accreditation a.acc-nav-wordmark-group:visited {
  text-decoration: none;
  color: var(--acc-color-ink);
}

.acc-nav-mark {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  object-fit: cover;
  display: block;
}

.acc-nav-wordmark {
  font-family: var(--acc-font-display);
  font-size: var(--acc-fs-headline);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--acc-color-ink);
  text-decoration: none;
}

.acc-nav-links {
  display: flex;
  gap: var(--acc-space-8);
  list-style: none;
  padding: 0;
  margin: 0;
}

.acc-nav-link,
body.accreditation a.acc-nav-link,
body.accreditation a.acc-nav-link:visited {
  font-size: var(--acc-fs-body-sm);
  color: var(--acc-color-ink-2);
  text-decoration: none;
}

.acc-nav-link:hover,
body.accreditation a.acc-nav-link:hover {
  color: var(--acc-color-accent);
  text-decoration: none;
}

.acc-nav-link[aria-current="page"],
body.accreditation a.acc-nav-link[aria-current="page"] {
  color: var(--acc-color-accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Nav dropdown — used on About and Sign In. Generous click targets,
   forgiving hover bridge between trigger and panel, dense per-link
   rhythm with title + description. Fathom register: cream paper,
   hairline rule, single elevated shadow on the floating panel. */
.acc-dropdown {
  position: relative;
}
.acc-dropdown-trigger {
  background: transparent;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--acc-space-1);
  padding: var(--acc-space-2) var(--acc-space-1);
  font-family: var(--acc-font-body);
  font-size: var(--acc-fs-body-sm);
  color: var(--acc-color-ink-2);
  line-height: 1;
}
.acc-dropdown-trigger:hover,
.acc-dropdown-trigger[aria-expanded="true"] {
  color: var(--acc-color-accent);
}
.acc-dropdown-trigger-caret {
  font-size: 0.75em;
  line-height: 1;
  transition: transform 120ms ease;
}
.acc-dropdown-trigger[aria-expanded="true"] .acc-dropdown-trigger-caret {
  transform: rotate(180deg);
}
.acc-dropdown-panel {
  position: absolute;
  top: 100%;
  right: 0;
  /* padding-top is the invisible hover-bridge between trigger and panel —
     keeps mouse traversal hover-stable. Without this, mouseleave on the
     trigger fires before mouseenter on the panel content. */
  padding-top: var(--acc-space-3);
  z-index: 50;
}
.acc-dropdown-panel-inner {
  min-width: 22rem;
  background: var(--acc-color-paper);
  border: 1px solid var(--acc-color-rule-strong);
  border-radius: var(--acc-radius);
  box-shadow: var(--acc-shadow-elevated);
  /* More breathing room top + bottom — Anton flagged 2026-04-29
     the panel felt cramped after the previous reduction. */
  padding: var(--acc-space-6) 0 var(--acc-space-4);
}
.acc-dropdown-panel-eyebrow {
  margin: 0 var(--acc-space-6) var(--acc-space-3);
}
.acc-dropdown-panel-rule {
  border: 0;
  border-top: 1px solid var(--acc-color-rule);
  margin: 0 var(--acc-space-6) var(--acc-space-3);
}
body.accreditation a.acc-dropdown-link,
body.accreditation a.acc-dropdown-link:visited {
  display: block;
  /* Per-link vertical rhythm — Anton flagged the previous space-3
     padding read as cramped. */
  padding: var(--acc-space-4) var(--acc-space-6);
  font-size: var(--acc-fs-body-sm);
  color: var(--acc-color-ink);
  text-decoration: none;
  transition: background-color 100ms ease;
}
body.accreditation a.acc-dropdown-link:hover {
  background: var(--acc-color-paper-2);
  color: var(--acc-color-ink);
  text-decoration: none;
}
.acc-dropdown-link-title {
  font-weight: 500;
  display: block;
  color: var(--acc-color-ink);
  line-height: 1.3;
}
.acc-dropdown-link-desc {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.8125rem;
  color: var(--acc-color-ink-3);
  line-height: 1.4;
}

/* -------------------------------------------------------------------------
   Footer — §7.10. Dense three-column link group, single rule.
   ------------------------------------------------------------------------- */

.acc-footer {
  padding: var(--acc-space-16) 0 var(--acc-space-12);
  border-top: 1px solid var(--acc-color-rule);
  margin-top: var(--acc-space-24);
}

.acc-footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--acc-space-10);
}

.acc-footer-title {
  font-size: var(--acc-fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--acc-tracking-eyebrow);
  font-weight: 500;
  color: var(--acc-color-ink-3);
  margin: 0 0 var(--acc-space-4) 0;
}

.acc-footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--acc-space-2);
}

.acc-footer-list a {
  font-size: var(--acc-fs-body-sm);
  color: var(--acc-color-ink-3);
  text-decoration: none;
}

.acc-footer-list a:hover {
  color: var(--acc-color-accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.acc-footer-legal {
  font-size: var(--acc-fs-body-sm);
  color: var(--acc-color-ink-4);
  margin-top: var(--acc-space-10);
  padding-top: var(--acc-space-6);
  border-top: 1px solid var(--acc-color-rule);
}

/* -------------------------------------------------------------------------
   Platform pillar grid — homepage-specific but widely reused.
   Two-column on desktop, one on mobile. Pattern from §14 of the design doc.
   ------------------------------------------------------------------------- */

.acc-pillar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--acc-space-8);
}

.acc-pillar {
  display: flex;
  flex-direction: column;
  gap: var(--acc-space-3);
  padding-block: var(--acc-space-2);
}

.acc-pillar-title {
  font-family: var(--acc-font-display);
  font-size: var(--acc-fs-headline);
  line-height: var(--acc-lh-headline);
  font-weight: 500;
  color: var(--acc-color-ink);
  margin: 0;
}

.acc-pillar-body {
  font-size: var(--acc-fs-body);
  line-height: var(--acc-lh-body);
  color: var(--acc-color-ink-2);
  margin: 0;
}

/* -------------------------------------------------------------------------
   Prose — markdown-rendered content blocks (platform / use-cases / insights / trust).
   Editorial register: serif headings at rest, generous leading, oxblood inline links.
   ------------------------------------------------------------------------- */

.acc-prose {
  color: var(--acc-color-ink);
  font-size: var(--acc-fs-body);
  line-height: var(--acc-lh-body);
}

.acc-prose h1,
.acc-prose h2,
.acc-prose h3,
.acc-prose h4 {
  font-family: var(--acc-font-display);
  color: var(--acc-color-ink);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: var(--acc-space-10) 0 var(--acc-space-4);
}

.acc-prose h1 { font-size: var(--acc-fs-display-2); line-height: 1.1; }
.acc-prose h2 { font-size: var(--acc-fs-display-3); line-height: 1.15; }
.acc-prose h3 { font-size: var(--acc-fs-headline); line-height: 1.22; margin-top: var(--acc-space-8); }
.acc-prose h4 { font-size: var(--acc-fs-body); line-height: 1.3; font-weight: 600; margin-top: var(--acc-space-6); }

.acc-prose p {
  margin: 0 0 var(--acc-space-4);
  color: var(--acc-color-ink-2);
}

.acc-prose strong { color: var(--acc-color-ink); font-weight: 600; }
.acc-prose em { font-style: italic; }

.acc-prose a,
.acc-prose a:visited {
  color: var(--acc-color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  background: transparent;
  padding: 0;
}

.acc-prose a:hover {
  color: var(--acc-color-accent-soft);
  text-decoration: none;
}

.acc-prose ul,
.acc-prose ol {
  margin: 0 0 var(--acc-space-4);
  padding-left: var(--acc-space-6);
  color: var(--acc-color-ink-2);
}

.acc-prose li {
  margin-bottom: var(--acc-space-2);
}

.acc-prose li > p {
  margin-bottom: var(--acc-space-2);
}

.acc-prose hr {
  border: 0;
  border-top: 1px solid var(--acc-color-rule);
  margin: var(--acc-space-10) 0;
}

.acc-prose blockquote {
  border-left: 2px solid var(--acc-color-accent);
  padding-left: var(--acc-space-5);
  margin: var(--acc-space-6) 0;
  color: var(--acc-color-ink-2);
  font-style: italic;
}

.acc-prose code {
  font-family: var(--acc-font-mono);
  font-size: 0.92em;
  background: var(--acc-color-paper-2);
  padding: 2px 6px;
  border-radius: 3px;
  color: var(--acc-color-ink);
}

.acc-prose pre {
  font-family: var(--acc-font-mono);
  background: var(--acc-color-paper-2);
  border: 1px solid var(--acc-color-rule);
  border-radius: var(--acc-radius);
  padding: var(--acc-space-4);
  overflow-x: auto;
  margin: var(--acc-space-6) 0;
}

.acc-prose pre code {
  background: transparent;
  padding: 0;
  border-radius: 0;
}

.acc-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--acc-space-6) 0;
  font-size: var(--acc-fs-body-sm);
}

.acc-prose th,
.acc-prose td {
  text-align: left;
  padding: var(--acc-space-3) var(--acc-space-4);
  border-bottom: 1px solid var(--acc-color-rule);
  color: var(--acc-color-ink-2);
}

.acc-prose th {
  font-weight: 600;
  color: var(--acc-color-ink);
  border-bottom-width: 2px;
}

.acc-prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--acc-radius);
  margin: var(--acc-space-6) 0;
}

/* Editorial-styled CTA embedded in markdown via raw HTML `<a class="acc-button-primary">`.
   The `.acc-prose a` rules above zero out background + padding for inline anchors
   (so they render as underlined inline links). Buttons-in-prose need that reset
   reset — restore the full button visual identity, otherwise the button reads as
   cream-on-cream invisible against the page.

   Specificity: `.acc-prose a.acc-button-*` already beats `.acc-prose a`. We re-
   declare every property `.acc-prose a` zeroed (background, padding) plus the
   button-specific border/font/letter-spacing — explicit over implicit. */
.acc-prose a.acc-button-primary,
.acc-prose a.acc-button-primary:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--acc-color-ink);
  color: var(--acc-color-paper);
  font-family: var(--acc-font-body);
  font-size: var(--acc-fs-body);
  font-weight: 500;
  letter-spacing: -0.005em;
  padding: var(--acc-space-3) var(--acc-space-6);
  border-radius: var(--acc-radius);
  border: 1px solid var(--acc-color-ink);
  text-decoration: none;
}

.acc-prose a.acc-button-secondary,
.acc-prose a.acc-button-secondary:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--acc-color-ink);
  font-family: var(--acc-font-body);
  font-size: var(--acc-fs-body);
  font-weight: 500;
  letter-spacing: -0.005em;
  padding: var(--acc-space-3) var(--acc-space-6);
  border-radius: var(--acc-radius);
  border: 1px solid var(--acc-color-ink);
  text-decoration: none;
}

.acc-prose a.acc-button-primary:hover {
  background: var(--acc-color-ink-2);
  color: var(--acc-color-paper);
  text-decoration: none;
}

.acc-prose a.acc-button-secondary:hover {
  background: var(--acc-color-paper-2);
  text-decoration: none;
}

/* =========================================================================
   FATHOM — second-generation additions (direction lock 2026-04-28).
   New components introduced for the Fathom scientific-narrative direction:
   chart figures, footnoted citations, marginalia annotations, numbered
   process steps with spot illustrations, photographic figure blocks,
   and a hero split for the chart-led page-header.
   ========================================================================= */

/* Hero split — text on the left, illustration / chart on the right.
   Replaces the centered editorial header for the homepage only. */

.acc-hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--acc-space-16);
  /* Top-align both columns so short-text pages don't leave a vertical gap
     between the eyebrow/headline and the figure. The homepage looked OK
     under `align-items: end` because its left text is long enough to fill
     the column; on /trust/ etc. the left column is shorter and the
     bottom-alignment created a visible 200px gap above the headline. */
  align-items: start;
  padding: var(--acc-space-16) 0 var(--acc-space-12);
  border-bottom: 1px solid var(--acc-color-rule-strong);
  margin-bottom: var(--acc-space-16);
}

.acc-hero-split-text > .acc-lead:last-child {
  margin-bottom: 0;
}

.acc-hero-illustration {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

.acc-hero-illustration figcaption {
  display: block;
  font-family: var(--acc-font-utility);
  font-size: var(--acc-fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--acc-tracking-eyebrow);
  font-weight: 500;
  color: var(--acc-color-ink-3);
  margin-top: var(--acc-space-3);
}

@media (max-width: 900px) {
  .acc-hero-split {
    grid-template-columns: 1fr;
    gap: var(--acc-space-10);
  }
}

/* Chart figure — every chart on the site uses this wrapper. The figcaption
   carries the small-caps eyebrow and the footnoted citation; the body of
   the figure is either an SVG / canvas chart or a generated image. */

.acc-chart-figure {
  margin: 0;
  padding: 0;
  background: transparent;
  border-top: 1px solid var(--acc-color-rule);
  padding-top: var(--acc-space-3);
}

.acc-chart-figure-image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

.acc-chart-eyebrow {
  font-family: var(--acc-font-utility);
  font-size: var(--acc-fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--acc-tracking-eyebrow);
  font-weight: 500;
  color: var(--acc-color-accent-deep);
  margin: 0 0 var(--acc-space-2) 0;
}

.acc-chart-title {
  font-family: var(--acc-font-display);
  font-size: var(--acc-fs-headline);
  line-height: var(--acc-lh-headline);
  font-weight: 500;
  color: var(--acc-color-ink);
  margin: 0 0 var(--acc-space-3) 0;
}

.acc-chart-caption {
  font-family: var(--acc-font-body);
  font-size: var(--acc-fs-body-sm);
  line-height: var(--acc-lh-body-sm);
  color: var(--acc-color-ink-3);
  font-style: italic;
  margin: var(--acc-space-2) 0 0 0;
  max-width: 38rem;
}

/* Sparkline — small inline chart, reusable in stat blocks. */

.acc-spark {
  display: block;
  width: 100%;
  max-width: 200px;
  height: 36px;
  color: var(--acc-color-accent);
}

.acc-spark path { fill: none; stroke: currentColor; stroke-width: 1.5; }
.acc-spark .area { fill: var(--acc-color-accent-tint); stroke: none; }
.acc-spark .baseline { stroke: var(--acc-color-rule); stroke-dasharray: 2 3; }

/* Stat block extension — supports an inline sparkline above the rule. */

.acc-stat-block .acc-spark {
  margin: 0 0 var(--acc-space-2) 0;
}

/* Numbered process — replaces "icon + headline + 2-line cards" with a
   honest, journal-style numbered process. Each step has a tabular numeral,
   a small spot illustration, a serif headline, and a body paragraph. */

.acc-process {
  display: grid;
  /* Default mobile + small tablet: wrap responsively to keep cells readable. */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--acc-space-8);
  border-top: 1px solid var(--acc-color-rule-strong);
  padding-top: var(--acc-space-10);
}

@media (min-width: 1024px) {
  /* Desktop: enforce 5-up so the five-movement process reads as a single
     editorial spread, not as a 4 + 1 wrap. */
  .acc-process {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--acc-space-6);
  }

  .acc-process-body {
    font-size: 0.9375rem; /* 15/24 — slightly tighter to keep 5-up uncrowded */
    line-height: 1.6;
  }
}

.acc-process-step {
  display: flex;
  flex-direction: column;
  gap: var(--acc-space-3);
}

.acc-process-numeral {
  font-family: var(--acc-font-body);
  font-size: var(--acc-fs-stat-lg);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--acc-color-ink-2);
  font-feature-settings: var(--acc-feat-tabular);
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: var(--acc-space-2);
}

.acc-process-numeral::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--acc-color-rule);
  margin-bottom: 8px;
}

.acc-process-icon {
  width: 56px;
  height: 56px;
  display: block;
  object-fit: contain;
  margin: 0 0 var(--acc-space-2) 0;
}

.acc-process-title {
  font-family: var(--acc-font-display);
  font-size: var(--acc-fs-headline);
  line-height: var(--acc-lh-headline);
  font-weight: 500;
  color: var(--acc-color-ink);
  margin: 0;
}

.acc-process-body {
  font-size: var(--acc-fs-body-sm);
  line-height: var(--acc-lh-body-sm);
  color: var(--acc-color-ink-2);
  margin: 0;
}

/* Footnotes & citations — small-caps inline reference markers + a bibliography
   list at the bottom of the page. The marker is a real `<sup>` so screen
   readers announce it correctly. */

.acc-footnote-ref {
  font-family: var(--acc-font-utility);
  font-size: 0.65em;
  vertical-align: super;
  line-height: 0;
  color: var(--acc-color-accent-deep);
  text-decoration: none;
  font-feature-settings: var(--acc-feat-tabular);
  padding: 0 1px;
}

body.accreditation a.acc-footnote-ref,
body.accreditation a.acc-footnote-ref:visited {
  text-decoration: none;
  color: var(--acc-color-accent-deep);
}

.acc-footnote-ref:hover { color: var(--acc-color-accent); }

.acc-footnote-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--acc-space-3) var(--acc-space-10);
  font-size: var(--acc-fs-footnote);
  line-height: var(--acc-lh-footnote);
  color: var(--acc-color-ink-3);
  border-top: 1px solid var(--acc-color-rule);
  padding-top: var(--acc-space-6);
  counter-reset: fn;
}

.acc-footnote-list li {
  display: flex;
  gap: var(--acc-space-2);
  align-items: baseline;
  counter-increment: fn;
}

.acc-footnote-list li::before {
  content: counter(fn);
  font-family: var(--acc-font-utility);
  font-feature-settings: var(--acc-feat-tabular);
  color: var(--acc-color-accent-deep);
  font-weight: 500;
  flex-shrink: 0;
  min-width: 1.25em;
  font-size: 0.85em;
  line-height: 1.5;
}

@media (max-width: 720px) {
  .acc-footnote-list { grid-template-columns: 1fr; }
}

/* Inline citation — small-caps treatment, used at the end of a stat or
   pull-quote to attribute the data source. */

.acc-citation {
  font-family: var(--acc-font-utility);
  font-feature-settings: var(--acc-feat-tabular), "smcp" 1, "c2sc" 1;
  text-transform: lowercase;  /* let smcp do the work */
  letter-spacing: var(--acc-tracking-smallcaps);
  font-size: 0.85em;
  color: var(--acc-color-ink-3);
}

/* Marginalia — inline annotation block placed at the side of a paragraph
   on wide screens, inline-flush on narrow screens. */

.acc-marginalia {
  font-family: var(--acc-font-utility);
  font-size: var(--acc-fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--acc-tracking-eyebrow);
  font-weight: 500;
  color: var(--acc-color-accent-deep);
  border-left: 1px solid var(--acc-color-rule);
  padding-left: var(--acc-space-3);
  margin-block: var(--acc-space-4);
}

/* Photographic figure — full-width image with eyebrow + caption. Used in
   the use-cases / trust / about sections to anchor abstract claims to
   concrete imagery. */

.acc-photo-figure {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: var(--acc-space-3);
}

.acc-photo-figure img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: 0;
}

.acc-photo-figure figcaption {
  display: flex;
  flex-direction: column;
  gap: var(--acc-space-1);
  border-top: 1px solid var(--acc-color-rule);
  padding-top: var(--acc-space-2);
}

.acc-photo-figure figcaption .acc-eyebrow { margin: 0; }

.acc-photo-caption-body {
  font-size: var(--acc-fs-body-sm);
  line-height: var(--acc-lh-body-sm);
  color: var(--acc-color-ink-3);
  font-style: italic;
  margin: 0;
  max-width: 38rem;
}

/* Pillar grid — Fathom evolution: each pillar gets a small spot illustration
   above its title. Backward-compatible with existing partials that don't
   include the icon. */

.acc-pillar-icon {
  width: 40px;
  height: 40px;
  display: block;
  object-fit: contain;
  margin-bottom: var(--acc-space-2);
}

/* Annotated stat — Fathom signature. The stat block can include a footnote
   marker and a small inline annotation rendered as an "asterism" of three
   tiny dots above the rule. */

.acc-stat-annot {
  font-family: var(--acc-font-utility);
  font-size: var(--acc-fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--acc-tracking-eyebrow);
  font-weight: 500;
  color: var(--acc-color-accent-deep);
  margin: 0;
}

/* Thesis frame — replaces the editorial pull-out with a paper-2 wash that
   contains the thesis statement plus an inline ring chart. */

.acc-thesis-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--acc-space-12);
  align-items: center;
  max-width: var(--acc-measure-wide);
  margin-inline: auto;
}

@media (max-width: 900px) {
  .acc-thesis-grid {
    grid-template-columns: 1fr;
    gap: var(--acc-space-8);
  }
}

.acc-thesis-frame {
  background: var(--acc-color-paper-3);
  border: none;
  padding: var(--acc-space-3);
}

.acc-thesis-frame img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

/* -------------------------------------------------------------------------
   Breadcrumb — small-caps eyebrow nav with `›` separators.
   Used on every content detail page (content/page.html, careers/job.html).
   ------------------------------------------------------------------------- */

.acc-breadcrumb {
  font-family: var(--acc-font-utility);
  font-size: var(--acc-fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--acc-tracking-eyebrow);
  font-weight: 500;
  color: var(--acc-color-ink-3);
  margin-bottom: var(--acc-space-6);
}

.acc-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--acc-space-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.acc-breadcrumb a {
  color: var(--acc-color-accent-deep);
  text-decoration: none;
}

.acc-breadcrumb a:hover {
  color: var(--acc-color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.acc-breadcrumb-sep {
  color: var(--acc-color-ink-4);
  font-weight: 400;
}

.acc-breadcrumb [aria-current="page"] {
  color: var(--acc-color-ink);
}

/* -------------------------------------------------------------------------
   Prev / Next — content detail closer.
   3-cell grid: prev | position | next, with hairline frame.
   ------------------------------------------------------------------------- */

.acc-prev-next {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--acc-space-6);
  border-top: 1px solid var(--acc-color-rule-strong);
  border-bottom: 1px solid var(--acc-color-rule);
  padding: var(--acc-space-8) 0;
  margin-top: var(--acc-space-12);
}

.acc-prev-next-link {
  display: flex;
  flex-direction: column;
  gap: var(--acc-space-1);
  text-decoration: none;
  color: inherit;
}

.acc-prev-next-prev .acc-eyebrow,
.acc-prev-next-prev .acc-prev-next-label {
  text-align: left;
}

.acc-prev-next-next {
  text-align: right;
}

.acc-prev-next-empty {
  visibility: hidden;
}

.acc-prev-next-label {
  font-family: var(--acc-font-display);
  font-size: var(--acc-fs-headline);
  line-height: var(--acc-lh-headline);
  font-weight: 500;
  color: var(--acc-color-ink);
}

body.accreditation a.acc-prev-next-link:hover .acc-prev-next-label {
  color: var(--acc-color-accent-deep);
}

.acc-prev-next-position {
  font-family: var(--acc-font-mono);
  font-size: var(--acc-fs-mono-sm);
  color: var(--acc-color-ink-3);
  font-feature-settings: var(--acc-feat-tabular);
  display: flex;
  align-items: center;
  gap: var(--acc-space-2);
  margin: 0;
}

.acc-prev-next-position-sep {
  color: var(--acc-color-rule-strong);
}

@media (max-width: 720px) {
  .acc-prev-next {
    grid-template-columns: 1fr;
    gap: var(--acc-space-5);
  }
  .acc-prev-next-next {
    text-align: left;
  }
  .acc-prev-next-position {
    justify-content: flex-start;
  }
}

/* -------------------------------------------------------------------------
   Person card — roster card for /about/team/.
   Hairline frame, square photo, oldstyle-figure bullets.
   ------------------------------------------------------------------------- */

.acc-person-card {
  display: flex;
  flex-direction: column;
  gap: var(--acc-space-3);
  padding-top: var(--acc-space-3);
  border-top: 1px solid var(--acc-color-rule-strong);
}

.acc-person-photo {
  display: block;
  width: 100%;
  max-width: 160px;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  filter: grayscale(100%);
  border-radius: 0;
  margin-bottom: var(--acc-space-2);
  border: 1px solid var(--acc-color-rule);
}

.acc-person-photo-placeholder {
  background: var(--acc-color-paper-2);
}

.acc-person-name {
  margin: 0;
}

.acc-person-role {
  margin: 0;
  font-family: var(--acc-font-utility);
  text-transform: uppercase;
  letter-spacing: var(--acc-tracking-eyebrow);
  font-size: var(--acc-fs-eyebrow);
  color: var(--acc-color-ink-3);
}

.acc-person-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--acc-space-2);
  font-size: var(--acc-fs-body-sm);
  line-height: var(--acc-lh-body-sm);
  color: var(--acc-color-ink-2);
  font-feature-settings: var(--acc-feat-oldstyle);
}

.acc-person-bullets li {
  position: relative;
  padding-left: var(--acc-space-4);
}

.acc-person-bullets li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--acc-color-ink-4);
}

.acc-person-links {
  margin: var(--acc-space-2) 0 0 0;
  font-size: var(--acc-fs-body-sm);
  color: var(--acc-color-ink-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--acc-space-2);
  align-items: baseline;
}

.acc-person-link-sep {
  color: var(--acc-color-ink-4);
}

/* Roster grid (used by about/team.html) — auto-fit responsive grid.
   Sized so 5 person cards fit on one row at the default container
   width (1120px): 5×192 + 4×24 gap = 1056 < 1120. The previous
   200-min + 32-gap pair pushed past the container boundary so Denis
   wrapped to a second row. */
.acc-roster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(192px, 1fr));
  gap: var(--acc-space-6);
}

/* -------------------------------------------------------------------------
   Job card — open-position card for /about/careers/.
   Eyebrow + headline + body + 4-col DL of metadata + secondary CTA.
   ------------------------------------------------------------------------- */

.acc-job-card {
  display: flex;
  flex-direction: column;
  gap: var(--acc-space-3);
  padding: var(--acc-space-8) 0;
  border-top: 1px solid var(--acc-color-rule-strong);
}

.acc-job-title {
  margin: 0;
}

.acc-job-subtitle {
  margin: 0;
  font-size: var(--acc-fs-body);
  line-height: var(--acc-lh-body);
  color: var(--acc-color-ink-3);
}

.acc-job-body {
  margin: 0;
  font-size: var(--acc-fs-body);
  line-height: var(--acc-lh-body);
  color: var(--acc-color-ink-2);
  max-width: var(--acc-measure-prose);
}

.acc-job-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--acc-space-4) var(--acc-space-8);
  margin: var(--acc-space-3) 0 0 0;
}

.acc-job-meta div {
  display: flex;
  flex-direction: column;
  gap: var(--acc-space-1);
}

.acc-job-meta dt {
  margin: 0;
}

.acc-job-meta dd {
  margin: 0;
  font-size: var(--acc-fs-body-sm);
  color: var(--acc-color-ink-2);
  font-feature-settings: var(--acc-feat-oldstyle);
}

.acc-job-cta {
  margin: var(--acc-space-3) 0 0 0;
}

/* List of jobs (used by about/careers/index.html) — single column flow. */
.acc-job-list {
  display: flex;
  flex-direction: column;
}

/* =========================================================================
   END FATHOM additions
   ========================================================================= */


/* -------------------------------------------------------------------------
   Responsive display-scale clamps — tune display sizes down on narrow screens.
   ------------------------------------------------------------------------- */

@media (max-width: 640px) {
  .acc-display-1 { font-size: 2.5rem;   line-height: 1.1; }
  .acc-display-2 { font-size: 2.125rem; line-height: 1.14; }
  .acc-display-3 { font-size: 1.75rem;  line-height: 1.18; }
  .acc-stat-value { font-size: 3rem; }
  .acc-page-header { padding-top: var(--acc-space-12); padding-bottom: var(--acc-space-10); }
  .acc-section { padding-block: var(--acc-space-16); }
}

/* -------------------------------------------------------------------------
   Print styles — §13.6. Journal-article treatment. Navigation and buttons hide.
   ------------------------------------------------------------------------- */

@media print {
  /* Design doc §5.4 forbids pure white/black anywhere. Print stylesheets reach for
     them by reflex; we hold the line and use the ink/paper tokens even here. Most
     printers render #FBFAF7 as indistinguishable from white and #0B1220 as
     indistinguishable from black, so there is no legibility cost. */
  body.accreditation {
    background: var(--acc-color-paper);
    color: var(--acc-color-ink);
    font-size: 11pt;
  }
  .acc-nav,
  .acc-footer,
  .acc-button-primary,
  .acc-button-secondary {
    display: none;
  }
  .acc-display-1 { font-size: 24pt; }
  .acc-display-2 { font-size: 20pt; }
  .acc-display-3 { font-size: 16pt; }
  .acc-page-header { border-bottom: 1pt solid var(--acc-color-ink); }
}