/* ==========================================================================
   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;
}

/* -------------------------------------------------------------------------
   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: rgba(251, 250, 247, 0.92);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
}

.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;
}

/* -------------------------------------------------------------------------
   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">`. */
.acc-prose a.acc-button-primary,
.acc-prose a.acc-button-primary:visited,
.acc-prose a.acc-button-secondary,
.acc-prose a.acc-button-secondary:visited {
  color: var(--acc-color-paper);
  text-decoration: none;
}

.acc-prose a.acc-button-secondary,
.acc-prose a.acc-button-secondary:visited {
  color: var(--acc-color-ink);
}

.acc-prose a.acc-button-primary:hover,
.acc-prose a.acc-button-secondary:hover {
  text-decoration: none;
}

/* -------------------------------------------------------------------------
   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); }
}