/* Research publication pages: analityka/<slug>/ and .../full-report/.
   Shared by the CoE 2026 research landing page and the full HTML report.
   The base rules are the site's existing analityka article pattern, lifted into
   a stylesheet so the two new pages reuse it instead of duplicating it inline. */
.post-hero {
  background: #0e1e40;
  padding: 72px 0 56px;
  color: #fff;
}
.post-hero-inner { max-width: 860px; }
.post-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.post-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.post-cluster-tag {
  background: rgba(215,164,10,.25);
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
}
.post-date { font-size: 13px; color: rgba(255,255,255,.5); }
.post-hero-title {
  font-size: clamp(26px, 4vw, 42px);
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 16px;
}
.post-hero-subtitle {
  font-size: 19px;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 20px;
  line-height: 1.4;
}
.post-hero-excerpt {
  font-size: 17px;
  line-height: 1.75;
  color: rgba(255,255,255,.75);
  max-width: 760px;
}
.post-author { margin-top: 24px; font-size: 13px; color: rgba(255,255,255,.45); }

.post-body-section {
  padding: 60px 0 80px;
  background: var(--white);
}
.post-layout {
  display: grid;
  grid-template-columns: 1fr 292px;
  gap: 60px;
  align-items: start;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}
/* The contents list and the document links come BEFORE the article in the DOM,
   so that on a narrow viewport a reader meets them at the top of a long report
   instead of after it. Explicit placement restores the desktop two-column
   reading order; the single-column media query below lets DOM order stand. */
.post-content {
  grid-column: 1;
  grid-row: 1;
  font-size: 17px;
  line-height: 1.8;
  color: var(--text);
}
.post-content h2 {
  font-size: 24px;
  font-weight: 800;
  color: var(--navy);
  margin: 48px 0 16px;
  padding-top: 8px;
}
.post-content h2:first-child { margin-top: 0; }
.post-content h3 {
  font-size: 19px;
  font-weight: 700;
  color: var(--navy);
  margin: 32px 0 12px;
}
.post-content p { margin-bottom: 20px; }
.post-content ul, .post-content ol {
  padding-left: 24px;
  margin-bottom: 20px;
}
.post-content li { margin-bottom: 8px; }
.post-content blockquote {
  border-left: 4px solid var(--gold);
  padding: 16px 24px;
  background: var(--light);
  border-radius: 0 8px 8px 0;
  margin: 28px 0;
  color: var(--navy);
  font-size: 16px;
}
.post-content a:not([class]) {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.post-content a:not([class]):hover { color: var(--gold); }
.risk-table-wrap {
  overflow-x: auto;
  margin: 32px 0;
  border: 1px solid rgba(14,30,64,.1);
  border-radius: 12px;
}
.risk-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.55;
}
.risk-table th,
.risk-table td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(14,30,64,.08);
  vertical-align: top;
  text-align: left;
}
.risk-table th {
  background: rgba(14,30,64,.06);
  color: var(--navy);
  font-weight: 800;
}
.risk-table tr:last-child td { border-bottom: none; }

.findings-box {
  background: rgba(14,30,64,.04);
  border: 2px solid var(--navy);
  border-radius: 12px;
  padding: 28px 32px;
  margin: 40px 0;
}
.findings-box-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.findings-box ul { padding-left: 20px; margin: 0; }
.findings-box li {
  font-size: 16px;
  line-height: 1.65;
  margin-bottom: 10px;
  color: var(--navy);
}

.article-cta {
  background: #0e1e40;
  border-radius: 16px;
  padding: 32px;
  margin: 48px 0;
  color: #fff;
}
.article-cta p {
  color: rgba(255,255,255,.8);
  margin-bottom: 20px;
  font-size: 16px;
}
.article-cta-title {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 10px;
}
.article-cta .btn-primary { display: inline-flex; }

.disclaimer {
  font-size: 13px;
  color: var(--text-light);
  background: var(--light);
  border-radius: 8px;
  padding: 14px 18px;
  margin: 40px 0 0;
  line-height: 1.6;
}

.post-sidebar {
  grid-column: 2;
  grid-row: 1;
  position: sticky;
  top: 90px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.sidebar-card {
  background: var(--light);
  border-radius: 16px;
  padding: 24px;
}
.sidebar-card-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.sidebar-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--navy);
  color: #fff;
  border-radius: 10px;
  padding: 14px 18px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  transition: background .2s;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
}
.sidebar-btn:hover { background: var(--gold); color: var(--navy); }
.sidebar-btn:last-child { margin-bottom: 0; }
.sidebar-btn-outline {
  background: transparent;
  border: 2px solid var(--navy);
  color: var(--navy);
}
.sidebar-btn-outline:hover { background: var(--navy); color: #fff; }

.toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.toc-list a {
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
  line-height: 1.5;
  padding: 5px 0;
  display: block;
  border-bottom: 1px solid rgba(14,30,64,.06);
}
.toc-list a:hover { color: var(--gold); }
.toc-list li:last-child a { border-bottom: none; }

.audience-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.audience-tag {
  background: rgba(14,30,64,.07);
  color: var(--navy);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
}

.faq-section {
  background: var(--light);
  padding: 72px 0 80px;
}
.faq-section .section-title { margin-bottom: 8px; }
.faq-section .section-desc {
  color: var(--text-light);
  font-size: 16px;
  margin-bottom: 40px;
}
.faq-list { max-width: 820px; }
details.faq-item {
  border-bottom: 1px solid rgba(14,30,64,.1);
}
details.faq-item:first-child { border-top: 1px solid rgba(14,30,64,.1); }
summary.faq-question {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  padding: 20px 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  line-height: 1.5;
}
summary.faq-question::-webkit-details-marker { display: none; }
summary.faq-question::after {
  content: '+';
  font-size: 22px;
  color: var(--gold);
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
}
details[open] summary.faq-question::after { content: '−'; }
.faq-answer {
  font-size: 16px;
  color: var(--text);
  line-height: 1.75;
  padding-bottom: 24px;
  padding-right: 40px;
}

.monitoring-cta {
  background: var(--navy);
  padding: 72px 0;
  color: #fff;
}
.monitoring-cta-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
}
.monitoring-cta h2 {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 900;
  color: #fff;
  margin-bottom: 12px;
}
.monitoring-cta p {
  color: rgba(255,255,255,.7);
  font-size: 16px;
  line-height: 1.6;
  max-width: 640px;
}
.monitoring-cta-btns {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 220px;
}
.monitoring-cta .sidebar-btn { margin: 0; }
.post-trust-box {
  background: #fff;
  border: 1px solid rgba(14,30,64,.08);
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(14,30,64,.05);
  padding: 24px;
  margin-bottom: 28px;
}
.post-trust-box h2 {
  color: var(--navy);
  font-size: clamp(20px,2.4vw,28px);
  line-height: 1.2;
  margin-bottom: 10px;
}
.post-trust-box p,
.post-trust-box li {
  color: var(--text);
  font-size: 14px;
  line-height: 1.7;
}
.post-trust-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.post-trust-item {
  background: rgba(14,30,64,.035);
  border-radius: 14px;
  padding: 15px;
}
.post-trust-title {
  display: block;
  color: var(--navy);
  font-size: 13px;
  font-weight: 900;
  margin-bottom: 6px;
}
.post-trust-item ul {
  margin: 8px 0 0;
  padding-left: 18px;
}
.post-trust-note {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(14,30,64,.08);
}

@media (max-width: 900px) {
  .post-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    max-width: 100%;
    overflow: hidden;
  }
  .post-content,
  .post-sidebar {
    min-width: 0;
    max-width: 100%;
    grid-column: 1;
    grid-row: auto;
  }
  .post-content {
    overflow-wrap: anywhere;
  }
  .risk-table-wrap {
    max-width: 100%;
  }
  .post-sidebar { position: static; }
  .monitoring-cta-inner { grid-template-columns: 1fr; gap: 28px; }
  .monitoring-cta-btns { flex-direction: row; flex-wrap: wrap; }
  .post-trust-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .post-hero { padding: 48px 0 40px; }
  .post-layout { padding: 0 20px; }
  .post-content { font-size: 16px; }
  .monitoring-cta-btns .sidebar-btn { width: 100%; }
}

/* --- Report-specific additions: sections, figures, callouts, data tables --- */
.post-content h2 .report-section-no {
  display: inline-block;
  min-width: 2.2em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.post-content .report-section { scroll-margin-top: 90px; }
.post-content h2, .post-content h3 { scroll-margin-top: 90px; }
.post-content .report-callout p:last-child { margin-bottom: 0; }
.post-content .report-quote {
  font-style: normal;
}
.post-content .report-quote p { margin-bottom: 10px; }
.post-content .report-quote footer {
  font-size: 13px;
  color: var(--text-light);
  margin: 0;
}
.post-content .report-quote cite { font-style: normal; }
.report-table caption {
  caption-side: top;
  text-align: left;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  padding: 14px 16px 10px;
}
.report-table th[scope="row"] {
  background: rgba(14,30,64,.03);
  font-weight: 700;
  color: var(--navy);
}

/* --- Front matter: key message, cover statistics --- */
.report-key-lead {
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
}
.report-callout .report-key-lead { margin-bottom: 14px; }
.report-stat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 32px 0 28px;
}
.report-stat {
  background: rgba(14,30,64,.04);
  border-radius: 14px;
  padding: 18px 16px;
  text-align: center;
}
.report-stat-value {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 900;
  color: var(--navy);
  margin: 0 0 6px;
  line-height: 1.1;
}
.report-stat-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.45;
  margin: 0;
}
/* The denominator of one percentage, kept inside its own card. */
.report-stat-base {
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.45;
  margin: 10px 0 0;
}
@media (max-width: 700px) {
  .report-stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Landing page: findings, document cards, citation --- */
.finding-list {
  display: grid;
  gap: 18px;
  margin: 28px 0 40px;
}
.finding-card {
  background: var(--light);
  border-left: 4px solid var(--gold);
  border-radius: 0 14px 14px 0;
  padding: 22px 26px;
}
.finding-number {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.post-content .finding-card h3 {
  margin: 0 0 12px;
  font-size: 18px;
}
.post-content .finding-card p:last-child { margin-bottom: 0; }
.doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 28px 0 40px;
}
.doc-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #fff;
  border: 1px solid rgba(14,30,64,.12);
  border-radius: 14px;
  padding: 20px;
  text-decoration: none;
  transition: border-color .2s, box-shadow .2s;
}
.doc-card:hover {
  border-color: var(--navy);
  box-shadow: 0 10px 26px rgba(14,30,64,.08);
}
.doc-card-kind {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold);
}
.doc-card-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.35;
}
.doc-card-meta {
  font-size: 13px;
  color: var(--text-light);
  line-height: 1.5;
}
.citation-box {
  background: rgba(14,30,64,.04);
  border-radius: 12px;
  padding: 20px 24px;
  margin: 20px 0 24px;
}
.citation-text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--navy);
  margin: 0;
  overflow-wrap: anywhere;
}

/* --- Accessible gold for small labels on light backgrounds ---
   The brand gold (#d7a40a) reaches only ~2.3:1 on white, so every uppercase
   micro-label built from it fails WCAG 2.2 AA (1.4.3). These pages use a
   darkened gold for label text on light surfaces; gold on the navy hero and
   on the navy CTA is unchanged and already passes. */
:root { --gold-text: #8a6500; }
.findings-box-label,
.finding-number,
.doc-card-kind,
.sidebar-card-title,
.post-content h2 .report-section-no {
  color: var(--gold-text);
}

/* The shared .post-author colour (white at 45% on navy) measures 4.31:1 —
   just under the 4.5:1 required for 13px text. Raised to 65% on these pages. */
.post-hero .post-author { color: rgba(255,255,255,.65); }
.citation-url {
  font-size: 14px;
  /* --text-light on the tinted citation background measures 4.4:1; --text clears AA. */
  color: var(--text);
  margin: 10px 0 0;
  overflow-wrap: anywhere;
}

/* --- Report figures: native charts, no raster images ---------------------
   Each figure is an HTML table whose labels, values and bases are real text.
   The bars are CSS widths drawn over that text, so the figure still reads
   correctly with styles off, at any zoom, and for screen readers. Colour is
   never the only carrier of meaning: every series is named in its row header
   and every bar is accompanied by its printed value. */
.report-figure {
  margin: 36px 0;
  padding: 0;
}
.chart {
  background: var(--light);
  border: 1px solid rgba(14,30,64,.1);
  border-radius: 14px;
  padding: 22px 24px 18px;
}
.chart-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.35;
  margin: 0 0 18px;
}
.chart-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.5;
}
.chart-table thead th {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--text);
  text-align: left;
  padding: 0 0 8px;
  border-bottom: 1px solid rgba(14,30,64,.14);
}
.chart-table thead th:last-child { text-align: right; }
.chart-table tbody th {
  font-weight: 600;
  color: var(--navy);
  text-align: left;
  vertical-align: middle;
  padding: 9px 14px 9px 0;
  width: 46%;
  overflow-wrap: anywhere;
}
.chart-cell {
  padding: 9px 0;
  vertical-align: middle;
  white-space: nowrap;
}
.chart-bar-track {
  display: inline-block;
  vertical-align: middle;
  inline-size: calc(100% - 4.6em);
  min-inline-size: 60px;
  block-size: 14px;
  background: rgba(14,30,64,.08);
  border-radius: 3px;
  overflow: hidden;
}
.chart-bar {
  display: block;
  block-size: 100%;
  border-radius: 3px;
  background: var(--navy);
}
.chart-bar--s0 { background: #0e1e40; }
.chart-bar--s1 { background: #1b7f9e; }
.chart-bar--s2 { background: #7d8ca3; }
.chart-bar--s3 { background: #b0792a; }
.chart-value {
  display: inline-block;
  min-inline-size: 4.2em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--navy);
}
.chart-cell--plain { text-align: right; }
.chart-count,
.chart-base-cell {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--text);
  white-space: normal;
}
.chart-base-cell { padding: 9px 0 9px 14px; text-align: right; }
.chart-axis {
  font-size: 12px;
  color: var(--text);
  margin: 12px 0 0;
}
.chart-swatch {
  display: inline-block;
  inline-size: 11px;
  block-size: 11px;
  border-radius: 2px;
  margin-inline-end: 8px;
  vertical-align: baseline;
}

/* Grouped charts: one row-group per indicator, its base and statistic with it */
.chart-group-head th {
  padding: 18px 0 8px;
  border-bottom: 1px solid rgba(14,30,64,.1);
  width: auto;
}
.chart-group:first-of-type .chart-group-head th { padding-top: 6px; }
.chart-group-label {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: var(--navy);
}
.chart-group-meta {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--text);
  margin-top: 4px;
}
.chart-base-gap {
  background: #fdf3d8;
  border-inline-start: 4px solid #b0792a;
  border-radius: 0 8px 8px 0;
  padding: 10px 14px;
  margin: 10px 0 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text);
  white-space: normal;
}

/* Provenance of a base the canonical report does not print: informational,
   so it is deliberately quieter than the .chart-base-gap warning. */
.chart-base-source {
  border-inline-start: 2px solid rgba(14,30,64,.18);
  padding: 2px 0 2px 12px;
  margin: 10px 0 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text);
  white-space: normal;
  text-transform: none;
  letter-spacing: 0;
}

/* Stacked single-bar chart */
.chart-stack {
  display: flex;
  inline-size: 100%;
  block-size: 26px;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 18px;
}
.chart-segment { display: block; block-size: 100%; }

/* Figure 11: the five points, as ordered steps */
.flow-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  counter-reset: none;
}
.flow-step {
  position: relative;
  background: #fff;
  border: 1px solid rgba(14,30,64,.12);
  border-inline-start: 4px solid var(--navy);
  border-radius: 0 10px 10px 0;
  padding: 14px 14px 14px 16px;
  margin: 0;
}
.flow-step + .flow-step::before {
  content: "";
  position: absolute;
  inset-inline-start: -11px;
  inset-block-start: 50%;
  inline-size: 7px;
  block-size: 7px;
  border-top: 2px solid rgba(14,30,64,.35);
  border-right: 2px solid rgba(14,30,64,.35);
  transform: translateY(-50%) rotate(45deg);
}
.flow-step-no {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: #1b7f9e;
  margin-bottom: 6px;
}
.flow-step-label {
  display: block;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .2px;
  color: var(--navy);
  margin-bottom: 6px;
  line-height: 1.3;
  overflow-wrap: break-word;
  hyphens: auto;
}
.flow-step-text {
  display: block;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
}

/* Figure 14: the human-controlled reporting architecture */
.chart--flow { text-align: center; }
.flow-entry,
.flow-question {
  display: block;
  inline-size: fit-content;
  max-inline-size: 100%;
  font-weight: 800;
  color: var(--navy);
  border-radius: 10px;
  padding: 12px 24px;
  margin-inline: auto;
  position: relative;
}
.flow-entry {
  background: var(--navy);
  color: #fff;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .6px;
}
.flow-question {
  background: #e6edf6;
  font-size: 15px;
  margin-block-start: 26px;
}
/* Vertical connectors between the entry, the question and the branches. */
.flow-entry::after,
.flow-question::after {
  content: "";
  position: absolute;
  inset-inline-start: calc(50% - 1px);
  inset-block-end: -20px;
  inline-size: 2px;
  block-size: 20px;
  background: rgba(14,30,64,.35);
}
.flow-branches { position: relative; }
.flow-branches {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  text-align: left;
}
.flow-branch {
  background: #fff;
  border: 1px solid #1b7f9e;
  border-radius: 10px;
  padding: 14px 16px;
  margin: 0;
}
.flow-branch-label {
  display: block;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--navy);
  margin-bottom: 6px;
  line-height: 1.3;
}
.flow-branch-text {
  display: block;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
}
.flow-consent {
  background: #fdf3d8;
  border: 1px solid #d9bf7a;
  border-radius: 10px;
  padding: 12px 18px;
  margin: 16px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: #5c4310;
}
.flow-control {
  background: var(--navy);
  border-radius: 10px;
  padding: 14px 18px;
  margin-top: 12px;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.flow-control-label {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--gold);
}
.flow-control ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  justify-content: center;
}
.flow-control li { font-size: 13px; color: #fff; }

/* Caption, base and note stay attached to the chart at every width */
.report-figure figcaption {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.figure-caption {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.5;
}
.figure-base {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.55;
}
.figure-note {
  font-size: 13px;
  color: var(--text);
  line-height: 1.6;
}

@media (max-width: 900px) {
  .flow-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow-step + .flow-step::before { display: none; }
  .flow-branches { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .chart { padding: 18px 16px 14px; }
  .chart-table { font-size: 13px; }
  .chart-table thead th { font-size: 13px; letter-spacing: 0; text-transform: none; }
  .chart-table tbody th { width: 52%; padding-right: 10px; }
  .chart-bar-track {
    display: block;
    inline-size: 100%;
    margin-bottom: 4px;
  }
  .chart-cell { white-space: normal; }
  .chart-value { min-inline-size: 0; text-align: left; }
  .flow-steps { grid-template-columns: 1fr; }
}