:root {
  --bg: #f4f5f1;
  --paper: #fffdf8;
  --ink: #1f2521;
  --muted: #556259;
  --line: #d8ddd4;
  --accent: #1f6a53;
  --accent-soft: #eaf5f1;
  --steel: #2b3f5c;
  --warn: #8d5a19;
  --danger: #8f2e2e;
  --good: #296a3f;
  --shadow: 0 18px 40px rgba(24, 34, 27, 0.08);
  --max: 1080px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 8%, #f0f2ea 0, transparent 34%),
    radial-gradient(circle at 88% 0, #edf4f1 0, transparent 28%),
    var(--bg);
  font: 17px/1.72 "Source Serif 4", Georgia, "Times New Roman", serif;
}

body {
  padding: 18px 20px 64px;
}

.topbar {
  max-width: var(--max);
  margin: 0 auto 14px;
  border: 1px solid #d5dccf;
  background: #fbfcf9;
  box-shadow: 0 8px 22px rgba(27, 38, 30, 0.06);
  padding: 12px 14px;
  font: 600 12px/1.4 "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #3e5244;
}

.topbar a {
  color: #224c3b;
  text-decoration: none;
  border-bottom: 1px solid #9fb7ab;
}

.article {
  max-width: var(--max);
  margin: 0 auto;
  border: 1px solid #dbe1d7;
  background: var(--paper);
  box-shadow: var(--shadow);
  padding: 50px 62px 72px;
}

.kicker {
  margin-bottom: 20px;
  font: 700 12px/1.2 "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

h1, h2, h3 {
  margin: 0;
  font-family: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  color: #16261f;
  line-height: 1.2;
}

h1 {
  font-size: clamp(36px, 5vw, 50px);
  margin-bottom: 16px;
}

h2 {
  font-size: 30px;
  margin: 32px 0 14px;
}

h3 {
  font-size: 20px;
  margin: 24px 0 10px;
}

p {
  margin: 0 0 16px;
}

.deck {
  font-size: 21px;
  line-height: 1.58;
  color: #33453b;
  max-width: 46em;
  margin-bottom: 26px;
}

.lead {
  font-size: 19px;
}

.rule {
  height: 1px;
  margin: 24px 0 26px;
  background: linear-gradient(90deg, #cfd8cd 0, #e7ece6 100%);
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 16px 0 22px;
}

.card {
  border: 1px solid #d4ddd1;
  background: #fcfdfb;
  padding: 16px 18px;
}

.card .tag {
  display: inline-block;
  margin-bottom: 8px;
  font: 700 11px/1.2 "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #2f6a53;
}

.diagram-wrap {
  margin: 26px 0 8px;
}

.diagram {
  border: 1px solid #d3dbd4;
  background: #fafcf8;
  padding: 14px;
  overflow-x: auto;
}

.diagram svg {
  display: block;
  width: 100%;
  min-width: 920px;
  height: auto;
}

figcaption {
  margin-top: 8px;
  color: #546158;
  font: 13px/1.5 "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
}

.matrix {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 24px;
  font: 14px/1.55 "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  color: #263a30;
}

.matrix th,
.matrix td {
  border: 1px solid #d4ddd1;
  padding: 10px 12px;
  vertical-align: top;
}

.matrix th {
  text-align: left;
  background: #edf3ee;
  color: #1c3026;
}

.callout {
  border: 1px solid #cad6ce;
  border-left: 4px solid var(--accent);
  padding: 14px 16px;
  background: var(--accent-soft);
  margin: 18px 0 22px;
}

.template {
  margin: 20px 0;
  padding: 18px 20px;
  background: #fbfcfe;
  border: 1px solid var(--line);
  font-family: Consolas, "SFMono-Regular", Menlo, monospace;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
  color: #25304a;
  overflow-x: auto;
}

.timeline {
  counter-reset: timeline;
  margin: 24px 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.timeline li {
  counter-increment: timeline;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  margin: 0;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}

.timeline li:first-child {
  border-top: 0;
}

.timeline li::before {
  content: counter(timeline);
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #e9f0ff;
  border: 1px solid #b7c5e5;
  color: #3559a8;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 13px/1 "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  margin-top: 2px;
}

.timeline strong {
  grid-column: 2;
  display: block;
  font-family: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  margin-bottom: 3px;
  color: #1f2940;
}

.timeline span {
  grid-column: 2;
  color: var(--muted);
  font-size: 15px;
}

.source-note {
  border: 1px solid #d2d9d0;
  background: #f7faf5;
  padding: 12px 14px;
  margin: 16px 0 18px;
  color: #415247;
  font: 14px/1.55 "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
}

.checklist {
  margin: 8px 0 22px;
  padding-left: 22px;
}

.checklist li {
  margin: 0 0 10px;
}

.flow-sequence {
  margin: 10px 0 22px;
  padding-left: 22px;
}

.flow-sequence li {
  margin: 0 0 10px;
}

.flow-sequence strong {
  font-family: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  color: #1c3026;
}

.flow-sequence.compact li {
  margin-bottom: 8px;
}

.step-outcome-list {
  border: 1px solid #d4ddd1;
  background: #fcfdfb;
  margin: 12px 0 22px;
}

.step-outcome-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  border-top: 1px solid #dfe5dc;
}

.step-outcome-row:first-child {
  border-top: 0;
}

.step-key {
  padding: 12px 12px;
  background: #eef3ee;
  border-right: 1px solid #dfe5dc;
  font: 700 11px/1.2 "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2e5f4c;
}

.step-body {
  padding: 11px 13px;
  font: 15px/1.6 "Source Serif 4", Georgia, "Times New Roman", serif;
  color: #2c3d34;
}

.step-body strong {
  font-family: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  color: #1b2f25;
}

.check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 14px 0 24px;
}

.check-card {
  position: relative;
  border: 1px solid #d4ddd1;
  background: linear-gradient(180deg, #fcfdfb 0%, #f7faf6 100%);
  padding: 18px 18px 18px 58px;
  min-height: 108px;
}

.check-card::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 20px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #e6f4ec;
  border: 1px solid #9ec4ad;
  box-shadow: inset 0 0 0 4px #f7fbf8;
}

.check-card::after {
  content: "";
  position: absolute;
  left: 26px;
  top: 27px;
  width: 8px;
  height: 4px;
  border-left: 2px solid #2f6a53;
  border-bottom: 2px solid #2f6a53;
  transform: rotate(-45deg);
}

.check-badge {
  display: inline-block;
  margin-bottom: 10px;
  font: 700 11px/1.2 "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2f6a53;
}

.check-card p {
  margin: 0;
}

/* Condensed readiness checklist used at the end of each section.
   Single dense list with a check glyph, inline badge, and continuation text. */
.gate-checklist {
  list-style: none;
  margin: 12px 0 22px;
  padding: 0;
  border: 1px solid #d4ddd1;
  border-radius: 6px;
  background: linear-gradient(180deg, #fcfdfb 0%, #f7faf6 100%);
  overflow: hidden;
}

.gate-checklist > li {
  display: grid;
  grid-template-columns: 28px minmax(170px, 240px) 1fr;
  align-items: start;
  gap: 14px;
  padding: 12px 18px;
  border-top: 1px solid #e4ebe1;
  font: 400 14.5px/1.5 "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  color: #2c3a30;
}

.gate-checklist > li:first-child {
  border-top: 0;
}

.gate-checklist > li::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e6f4ec;
  border: 1px solid #9ec4ad;
  box-shadow: inset 0 0 0 3px #f7fbf8;
  position: relative;
  margin-top: 2px;
}

.gate-checklist > li > strong {
  font: 700 11.5px/1.4 "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #2f6a53;
  padding-top: 3px;
}

.gate-checklist > li > span {
  color: #2c3a30;
}

@media (max-width: 820px) {
  .gate-checklist > li {
    grid-template-columns: 24px 1fr;
    gap: 10px;
  }
  .gate-checklist > li > strong {
    grid-column: 2;
    padding-top: 0;
  }
  .gate-checklist > li > span {
    grid-column: 2;
  }
}

/* ── Hero intro ─────────────────────────────────────────── */
.hero-intro {
  background: #173628;
  color: #e8eeeb;
  margin: -50px -62px 52px;
  padding: 64px 62px 52px;
}

.hero-overline {
  font: 700 11px/1 "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7ab89a;
  margin: 0 0 28px;
}

.hero-statement {
  font: 700 3rem/1.1 "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  color: #f0f6f2;
  margin: 0 0 30px;
  letter-spacing: -0.01em;
}

.hero-body {
  font: 18px/1.75 "Source Serif 4", Georgia, "Times New Roman", serif;
  color: #cad9d1;
  margin: 0 0 20px;
  max-width: 780px;
}

.hero-rule {
  border: none;
  border-top: 1px solid #2d5242;
  margin: 28px 0 22px;
}

.hero-sub {
  font: 500 14px/1.6 "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  color: #7ab89a;
  letter-spacing: 0.02em;
  margin: 0;
}

/* ── Lesson strip ────────────────────────────────────────── */
.lesson-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid #d5ddd1;
  background: #f8faf7;
  margin-bottom: 52px;
}

.lesson-card {
  padding: 24px 22px 26px;
  border-right: 1px solid #d5ddd1;
}

.lesson-card:last-child {
  border-right: none;
}

.lesson-num {
  display: block;
  font: 700 30px/1 "IBM Plex Mono", "Courier New", monospace;
  color: #b8cfc5;
  margin-bottom: 14px;
  letter-spacing: -0.02em;
}

.lesson-card strong {
  display: block;
  font: 700 13.5px/1.4 "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  color: #173628;
  margin-bottom: 9px;
  letter-spacing: 0.01em;
}

.lesson-card p {
  font: 13.5px/1.65 "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  color: #4d5e53;
  margin: 0;
}

@media (max-width: 820px) {
  .hero-intro {
    margin: -50px -20px 40px;
    padding: 48px 22px 40px;
  }
  .hero-statement {
    font-size: 2.1rem;
  }
  .lesson-strip {
    grid-template-columns: repeat(2, 1fr);
  }
  .lesson-card:nth-child(2) {
    border-right: none;
  }
  .lesson-card:nth-child(1),
  .lesson-card:nth-child(2) {
    border-bottom: 1px solid #d5ddd1;
  }
}

@media (max-width: 500px) {
  .lesson-strip {
    grid-template-columns: 1fr;
  }
  .lesson-card {
    border-right: none;
    border-bottom: 1px solid #d5ddd1;
  }
  .lesson-card:last-child {
    border-bottom: none;
  }
}

/* ── Audience bar ───────────────────────────────────────── */
.audience-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid #c8d4c3;
  background: #edf4ee;
  margin-bottom: 44px;
}

.audience-bar-item {
  padding: 20px 20px 22px;
  border-right: 1px solid #c8d4c3;
}

.audience-bar-item:last-child {
  border-right: none;
}

.audience-bar-item strong {
  display: block;
  font: 700 13px/1.3 "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  color: #173628;
  margin-bottom: 7px;
  letter-spacing: 0.01em;
}

.audience-bar-item span {
  font: 13px/1.6 "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  color: #3f5a47;
}

@media (max-width: 820px) {
  .audience-bar {
    grid-template-columns: repeat(2, 1fr);
  }
  .audience-bar-item:nth-child(2) {
    border-right: none;
  }
  .audience-bar-item:nth-child(1),
  .audience-bar-item:nth-child(2) {
    border-bottom: 1px solid #c8d4c3;
  }
}

@media (max-width: 500px) {
  .audience-bar {
    grid-template-columns: 1fr;
  }
  .audience-bar-item {
    border-right: none;
    border-bottom: 1px solid #c8d4c3;
  }
  .audience-bar-item:last-child {
    border-bottom: none;
  }
}

.output-sheet {
  border: 1px solid #d4ddd1;
  background: linear-gradient(180deg, #fbfcf9 0%, #f6f8f4 100%);
  margin: 18px 0 24px;
}

.output-sheet-header {
  padding: 18px 20px 16px;
  border-bottom: 1px solid #dfe5dc;
  background: #f9fbf7;
}

.output-sheet-header h3 {
  margin: 0 0 8px;
  font-size: 22px;
}

.output-sheet-header p {
  margin: 0;
  color: #46574d;
  font: 15px/1.6 "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
}

.output-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 18px;
}

.output-card {
  border: 1px solid #d6dfd3;
  background: #fffdf8;
  padding: 16px 17px;
}

.output-card-wide {
  grid-column: 1 / -1;
}

.output-card h4 {
  margin: 0 0 10px;
  font: 700 14px/1.3 "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  letter-spacing: 0.02em;
  color: #1c3026;
}

.output-card p,
.output-card ul {
  margin: 0;
}

.output-card ul {
  padding-left: 20px;
}

.output-card li {
  margin: 0 0 8px;
}

.output-card li:last-child {
  margin-bottom: 0;
}

.phase-flow-wrap {
  margin: 14px 0 22px;
}

.phase-flow {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid #c8d3c6;
  background: #f8faf7;
  overflow: hidden;
}

.phase-flow-item {
  flex: 1;
  padding: 14px 13px;
  min-width: 0;
}

.pf-entry  { background: #eef5ef; }
.pf-safety { background: #fff3f3; }
.pf-context { background: #eef7fb; }
.pf-gate   { background: #f5f3ea; }
.pf-outcome { background: #f0f4fb; }

.pf-name {
  display: block;
  font: 700 11px/1 "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.pf-entry  .pf-name { color: #1e4a37; }
.pf-safety .pf-name { color: #8b3131; }
.pf-context .pf-name { color: #2b5669; }
.pf-gate   .pf-name { color: #4a3e1f; }
.pf-outcome .pf-name { color: #1f2d45; }

.phase-flow-item p {
  margin: 0 0 5px;
  font: 13px/1.5 "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  color: #2c3d34;
}

.phase-flow-item p:last-child {
  margin-bottom: 0;
}

.pf-arrow {
  flex: 0 0 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f4f0;
  border-left: 1px solid #d0d9ce;
  border-right: 1px solid #d0d9ce;
  font-size: 22px;
  color: #4e7d67;
}

.pf-arrow::after {
  content: "\203A";
}

.layer-stack {
  margin: 16px 0 24px;
  border: 1px solid #d4ddd1;
  background: #fbfcf9;
}

.layer-item {
  border-top: 1px solid #dde4db;
  padding: 16px 18px;
}

.layer-item:first-child {
  border-top: 0;
}

.layer-item h3 {
  margin: 0 0 8px;
  font-size: 19px;
}

.layer-note {
  margin: 8px 0 0;
  color: #3f5449;
  font: 600 14px/1.5 "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
}

.plane-board {
  margin: 16px 0 24px;
  border: 1px solid #d5ddd2;
  background: #f8faf7;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0;
}

.plane-col {
  border-left: 1px solid #dfe5dd;
  padding: 12px 10px 14px;
  background: #fcfdfb;
}

.plane-col:first-child {
  border-left: 0;
}

.plane-col h3 {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.plane-col p {
  margin: 0;
  font: 13px/1.52 "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  color: #36473e;
}

.plane-compliance h3 { color: #3559a8; }
.plane-safety h3 { color: #8f2e2e; }
.plane-workflow h3 { color: #2f6a53; }
.plane-context h3 { color: #4f4b7c; }
.plane-tool h3 { color: #3e4a54; }
.plane-review h3 { color: #8d5a19; }
.plane-analysis h3 { color: #5a4738; }

.phase-board,
.proof-board {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 24px;
  font: 14px/1.55 "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  color: #263a30;
}

.phase-board th,
.phase-board td,
.proof-board th,
.proof-board td {
  border: 1px solid #d4ddd1;
  padding: 10px 12px;
  vertical-align: top;
}

.phase-board th,
.proof-board th {
  text-align: left;
  background: #edf3ee;
  color: #1c3026;
}

.module-grid {
  margin: 14px 0 22px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.module-card {
  border: 1px solid #d5ddd2;
  background: #fcfdfb;
  padding: 14px 15px;
}

.module-card h3 {
  margin: 0 0 8px;
  font-size: 16px;
}

.module-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.58;
}

.gate-tree {
  margin: 14px 0 22px;
  border: 1px solid #d4ddd1;
  background: #fbfcfa;
  padding: 14px;
}

.gate-root {
  border: 1px solid #c9d8cf;
  background: #edf5f0;
  padding: 12px 14px;
  font: 700 14px/1.45 "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  color: #1e3a2c;
}

.gate-branches {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.gate-branch {
  border: 1px solid #d6dfd4;
  background: #fffdf8;
  padding: 12px 14px;
}

.gate-branch h3 {
  margin: 0 0 6px;
  font-size: 17px;
}

.gate-branch p {
  margin: 0;
}

.gate-pass h3 {
  color: #2e6c43;
}

.gate-fail h3 {
  color: #8b3131;
}

.gate-note {
  margin: 12px 0 0;
  font: 600 13px/1.5 "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  color: #43574b;
}

.readiness-panel {
  margin: 14px 0 22px;
  border: 1px solid #d4ddd1;
  background: #fbfcf9;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
}

.readiness-col {
  padding: 14px 16px;
}

.readiness-col + .readiness-col {
  border-left: 1px solid #dfe5dc;
}

.readiness-col h3 {
  margin: 0 0 8px;
  font-size: 18px;
}

.readiness-col ul {
  margin: 0;
  padding-left: 20px;
}

.readiness-col li {
  margin-bottom: 8px;
}

.lane-strip {
  margin: 14px 0 24px;
  border: 1px solid #d4ddd1;
  background: #f9fbf8;
  padding: 14px;
}

.lane-strip h3 {
  margin: 0 0 10px;
  font-size: 18px;
}

.lane-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.lane-steps span {
  border: 1px solid #ced9cf;
  background: #fffdf8;
  padding: 8px 10px;
  font: 600 13px/1.4 "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  color: #2f4439;
}

.lane-strip p {
  margin: 0;
}

.arch-diagram {
  border: 1px solid #c8d3c6;
  background: #f8faf7;
  overflow: hidden;
}

.ad-zone {
  padding: 11px 14px;
}

.ad-zone-header {
  font: 700 11px/1.2 "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 9px;
}

.ad-zone-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.ad-zone-chips span {
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.65);
  padding: 4px 9px;
  font: 13px/1.3 "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  color: #2c3d34;
}

.ad-zone p {
  margin: 0;
  font: 14px/1.55 "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  color: #33443c;
}

.ad-interaction { background: #eef5ef; }
.ad-interaction .ad-zone-header { color: #1e4a37; }

.ad-orchestration { background: #edf1f9; border-top: 2px solid #c8d3c6; }
.ad-orchestration .ad-zone-header { color: #1f2d45; }

.ad-split {
  display: grid;
  grid-template-columns: 220px 1fr;
  border-top: 2px solid #c8d3c6;
}

.ad-escalation {
  border-right: 1px solid #d0d9ce;
}

.ad-esc-zone {
  background: #fff2f2;
  height: 100%;
  box-sizing: border-box;
}

.ad-esc-zone .ad-zone-header { color: #8b3131; }

.ad-core {
  display: flex;
  flex-direction: column;
}

.ad-context { background: #eef7fb; }
.ad-context .ad-zone-header { color: #2b5669; }

.ad-workflow {
  background: #f5f3ea;
  border-top: 1px solid #d0d9ce;
}

.ad-workflow .ad-zone-header { color: #4a3e1f; }

.ad-bottom-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid #d0d9ce;
}

.ad-agent { background: #edf3ee; }
.ad-agent .ad-zone-header { color: #1e4a37; }

.ad-execution {
  background: #f0f4fb;
  border-left: 1px solid #d0d9ce;
}

.ad-execution .ad-zone-header { color: #1f2d45; }

.ad-audit {
  background: #f2f5f0;
  border-top: 2px solid #c8d3c6;
}

.ad-audit .ad-zone-header { color: #3c4a3d; }

.plane-bridge {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: -2px 0 20px;
  border: 1px solid #c8d3c6;
  border-top: 0;
  background: #f8faf7;
}

.pb-col {
  padding: 12px 14px;
}

.pb-col + .pb-col {
  border-left: 1px solid #d0d9ce;
}

.pb-label {
  font: 700 11px/1.2 "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2f4a3c;
  margin-bottom: 7px;
}

.pb-col p {
  margin: 0;
  font: 13px/1.5 "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  color: #3a4a40;
}

/* ── Delivery track convergence diagram (Section 6) ── */
.track-diagram {
  margin: 0;
}

.td-slice-bar {
  background: #2b3f5c;
  color: #d8e8f2;
  font: 700 11px/1.3 "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 10px 18px;
  border: 1px solid #1a2e44;
  border-bottom: 0;
  text-align: center;
}

.td-tracks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid #c8d3c6;
}

.td-track {
  padding: 14px 14px 16px;
}

.td-track + .td-track {
  border-left: 1px solid #d0d9ce;
}

.td-track-name {
  display: block;
  font: 700 11px/1.2 "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}

.td-track p,
.td-qa-card p,
.td-gate-card p {
  margin: 0;
  font: 13px/1.55 "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  color: #36473e;
}

.td-product  { background: #eef5ef; }
.td-product .td-track-name  { color: #1e4a37; }

.td-agent { background: #eef7fb; }
.td-agent .td-track-name { color: #2b5669; }

.td-safety { background: #fff4f0; }
.td-safety .td-track-name { color: #8b3131; }

.td-arrow-row {
  text-align: center;
  padding: 4px 0;
  color: #7a9a88;
  font: 700 15px/1 "IBM Plex Sans", sans-serif;
  border-left: 1px solid #c8d3c6;
  border-right: 1px solid #c8d3c6;
}

.td-qa-row,
.td-gate-row {
  display: flex;
  justify-content: center;
  border-left: 1px solid #c8d3c6;
  border-right: 1px solid #c8d3c6;
}

.td-qa-card {
  width: 62%;
  border: 1px solid #d4cdb5;
  border-top: 0;
  background: #faf6e8;
  padding: 13px 16px;
}

.td-qa-card .td-track-name { color: #4a3e1f; }
.td-qa-card p { color: #3d3620; }

.td-gate-row {
  border-bottom: 1px solid #c8d3c6;
  padding-bottom: 2px;
}

.td-gate-card {
  width: 42%;
  border: 2px solid #1e4a37;
  background: #e9f4ed;
  padding: 12px 16px;
}

.td-gate-name {
  display: block;
  font: 700 11px/1.2 "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1e4a37;
  margin-bottom: 5px;
}

.td-gate-card p { color: #243d2e; }

/* Risk level table inside gate-tree */
.risk-level-table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
  font: 14px/1.5 "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
}

.risk-level-table th {
  padding: 8px 12px;
  text-align: left;
  background: #f0f3ef;
  font-weight: 700;
  font-size: 12px;
  color: #2f4a3c;
  border-bottom: 1px solid #c8d3c6;
}

.risk-level-table td {
  padding: 9px 12px;
  vertical-align: top;
  border-bottom: 1px solid #dfe5dc;
  color: #2c3d34;
}

.risk-level-table tr:last-child td {
  border-bottom: 0;
}

.rl-none td:first-child { font-weight: 700; color: #2a5e3f; }
.rl-elevated td:first-child { font-weight: 700; color: #7a5a1e; }
.rl-high td:first-child { font-weight: 700; color: #8b3131; }
.rl-crisis td:first-child { font-weight: 700; color: #6e0000; background: #fff6f6; }

.rl-none { background: #f6fdf8; }
.rl-elevated { background: #fdf9f0; }
.rl-high { background: #fdf4f0; }
.rl-crisis { background: #fff0f0; }

/* Proof record wrapper */
.proof-record-wrap {
  margin: 14px 0 24px;
  border: 1px solid #c8d3c6;
  overflow: hidden;
}

.proof-record-header {
  background: #2f4a3c;
  color: #ffffff;
  font: 700 12px/1.3 "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 9px 14px;
}

.proof-record-wrap .proof-board {
  margin: 0;
  border: 0;
}

.pager {
  border-top: 1px solid #d4dbd3;
  margin-top: 28px;
  padding-top: 14px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font: 600 14px/1.5 "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
}

.pager a {
  color: #1f5a45;
  text-decoration: none;
  border-bottom: 1px solid #9eb6ab;
}

@media print {
  .track-diagram { break-inside: avoid; }
}

@media (max-width: 960px) {
  .article {
    padding: 34px 24px 50px;
  }

  .grid {
    grid-template-columns: 1fr;
  }

  .module-grid,
  .gate-branches,
  .readiness-panel {
    grid-template-columns: 1fr;
  }

  .phase-flow {
    flex-direction: column;
  }

  .pf-arrow {
    flex: 0 0 30px;
    border-left: 0;
    border-right: 0;
    border-top: 1px solid #d0d9ce;
    border-bottom: 1px solid #d0d9ce;
  }

  .pf-arrow::after {
    content: "\2193";
  }

  .ad-split {
    grid-template-columns: 1fr;
  }

  .ad-escalation {
    border-right: 0;
    border-bottom: 1px solid #d0d9ce;
  }

  .ad-bottom-row {
    grid-template-columns: 1fr;
  }

  .ad-execution {
    border-left: 0;
    border-top: 1px solid #d0d9ce;
  }

  .plane-bridge {
    grid-template-columns: 1fr;
  }

  .pb-col + .pb-col {
    border-left: 0;
    border-top: 1px solid #d0d9ce;
  }

  .risk-level-table th:last-child,
  .risk-level-table td:last-child {
    display: none;
  }

  .td-tracks {
    grid-template-columns: 1fr;
  }

  .td-track + .td-track {
    border-left: 0;
    border-top: 1px solid #d0d9ce;
  }

  .td-qa-card,
  .td-gate-card {
    width: 100%;
  }

  .plane-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .readiness-col + .readiness-col {
    border-left: 0;
    border-top: 1px solid #dfe5dc;
  }

  .check-grid {
    grid-template-columns: 1fr;
  }

  .output-grid {
    grid-template-columns: 1fr;
  }

  .diagram svg {
    min-width: 760px;
  }

  .step-outcome-row {
    grid-template-columns: 1fr;
  }

  .step-key {
    border-right: 0;
    border-bottom: 1px solid #dfe5dc;
  }

  .timeline li {
    grid-template-columns: 38px 1fr;
  }
}

@media print {
  body {
    background: #ffffff;
    padding: 0;
  }

  .article,
  .topbar,
  .diagram,
  .card,
  .module-card,
  .plane-col,
  .gate-tree,
  .lane-strip,
  .readiness-panel,
  .proof-board,
  .phase-board,
  .layer-stack,
  .phase-flow,
  .arch-diagram,
  .plane-bridge,
  .proof-record-wrap {
    box-shadow: none;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .article {
    border: 0;
    padding: 0;
    max-width: 100%;
  }

  .topbar {
    margin-bottom: 8px;
  }

  .diagram svg {
    min-width: 0;
  }

  .plane-board {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---- Section 5 new visuals ---- */
.svg-figure {
  margin: 28px 0 10px;
  text-align: center;
}
.svg-figure svg {
  max-width: 100%;
  height: auto;
  border: 1px solid #d6dbd1;
  background: #fafbf8;
  border-radius: 4px;
  padding: 12px;
}
.svg-figure figcaption {
  margin-top: 10px;
  font: 14px/1.5 'IBM Plex Sans','Segoe UI',Arial,sans-serif;
  color: #4a5a4e;
  text-align: left;
}

.authority-ladder {
  margin: 28px 0;
  padding: 22px 24px;
  border: 1px solid #d6dbd1;
  background: #fafbf8;
  border-radius: 4px;
}
.ladder-rung {
  padding: 12px 16px;
  border-radius: 3px;
  margin: 0;
  border-left: 6px solid;
}
.ladder-rung .rung-label {
  display: block;
  font: 700 13px/1.3 'IBM Plex Sans','Segoe UI',Arial,sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.ladder-rung p {
  margin: 0;
  font: 14px/1.5 'IBM Plex Sans','Segoe UI',Arial,sans-serif;
  color: #2a3a2e;
}
.ladder-r1 { background: #fbe9e9; border-left-color: #8f2e2e; }
.ladder-r1 .rung-label { color: #8f2e2e; }
.ladder-r2 { background: #e6f0ea; border-left-color: #2f6a53; }
.ladder-r2 .rung-label { color: #2f6a53; }
.ladder-r3 { background: #e9ecee; border-left-color: #3e4a54; }
.ladder-r3 .rung-label { color: #3e4a54; }
.ladder-r4 { background: #ecebf4; border-left-color: #4f4b7c; }
.ladder-r4 .rung-label { color: #4f4b7c; }
.ladder-arrow {
  text-align: center;
  font: 700 12px/1 'IBM Plex Sans','Segoe UI',Arial,sans-serif;
  color: #4a5a4e;
  padding: 6px 0;
  letter-spacing: 0.08em;
}
.ladder-note {
  margin: 14px 0 0;
  font: italic 13px/1.5 'IBM Plex Sans','Segoe UI',Arial,sans-serif;
  color: #4a5a4e;
  border-top: 1px solid #d6dbd1;
  padding-top: 10px;
}

.scope-heatmap {
  margin: 28px 0 10px;
}
.scope-heatmap table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #c8d3c6;
  background: #fff;
  font: 13px/1.4 'IBM Plex Sans','Segoe UI',Arial,sans-serif;
}
.scope-heatmap th {
  background: #1c3026;
  color: #fff;
  padding: 10px 8px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-align: center;
  border: 1px solid #1c3026;
}
.scope-heatmap td {
  padding: 12px 8px;
  text-align: center;
  border: 1px solid #d6dbd1;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.05em;
}
.scope-heatmap td.scope-name {
  text-align: left;
  background: #f2f5f0;
  color: #1c3026;
  font-size: 13px;
  letter-spacing: 0;
}
.heat-on {
  background: #2f6a53;
  color: #fff;
}
.heat-part {
  background: #a8c4a6;
  color: #1c3026;
}
.heat-off {
  background: #f5f7f3;
  color: #aab4a7;
}
.heat-review {
  background: #f4e8d9;
  color: #8d5a19;
}

@media (max-width: 720px) {
  .scope-heatmap table {
    font-size: 11px;
  }
  .scope-heatmap th,
  .scope-heatmap td {
    padding: 6px 3px;
    font-size: 10px;
  }
}

/* ---- Section 8 visuals ---- */
.persona-card {
  margin: 28px 0;
  border: 1px solid #c8d3c6;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
}
.persona-card-header {
  background: #1c3026;
  color: #fff;
  padding: 14px 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.persona-card-kicker {
  font: 700 13px/1 'IBM Plex Sans','Segoe UI',Arial,sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.persona-card-sub {
  font: italic 12px/1.4 'IBM Plex Sans','Segoe UI',Arial,sans-serif;
  color: #c8dccc;
}
.persona-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}
.persona-field {
  padding: 18px 22px;
  border-top: 1px solid #e2e7dd;
  border-right: 1px solid #e2e7dd;
}
.persona-field:nth-child(2n) { border-right: none; }
.persona-field-meta {
  grid-column: 1 / -1;
  background: #f5f7f3;
}
.persona-field-label {
  display: block;
  font: 700 11px/1 'IBM Plex Sans','Segoe UI',Arial,sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2f6a53;
  margin-bottom: 8px;
}
.persona-field p {
  margin: 0;
  font: 14px/1.5 'IBM Plex Sans','Segoe UI',Arial,sans-serif;
  color: #2a3a2e;
}

.persona-pack {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 28px 0;
}
.persona-tile {
  padding: 16px 18px;
  border-radius: 4px;
  border: 1px solid #c8d3c6;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tile-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tile-badge {
  display: inline-block;
  font: 700 11px/1 'IBM Plex Sans','Segoe UI',Arial,sans-serif;
  letter-spacing: 0.1em;
  color: #4a5a4e;
  background: #f5f7f3;
  padding: 4px 8px;
  border-radius: 2px;
}
.tile-risk {
  font: 700 10px/1 'IBM Plex Sans','Segoe UI',Arial,sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 2px;
}
.risk-low { background: #e6f0ea; color: #2f6a53; }
.risk-med { background: #f4e8d9; color: #8d5a19; }
.risk-high { background: #fbe9e9; color: #8f2e2e; }
.persona-tile h3 {
  margin: 0;
  font: 700 15px/1.3 'IBM Plex Sans','Segoe UI',Arial,sans-serif;
  color: #1c3026;
}
.persona-tile p {
  margin: 0;
  font: 13px/1.5 'IBM Plex Sans','Segoe UI',Arial,sans-serif;
  color: #2a3a2e;
}
.tile-stress {
  margin-top: auto;
  font-size: 12px !important;
  color: #4a5a4e !important;
  border-top: 1px solid #e2e7dd;
  padding-top: 8px;
}
.tile-normal { border-left: 4px solid #2f6a53; }
.tile-incomplete { border-left: 4px solid #8d5a19; }
.tile-highrisk { border-left: 4px solid #8f2e2e; }
.tile-oos { border-left: 4px solid #4f4b7c; }
.tile-ops { border-left: 4px solid #3e4a54; }
.tile-returning { border-left: 4px solid #1f2d45; }

.inspection-matrix, .tuning-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #c8d3c6;
  background: #fff;
  font: 14px/1.5 'IBM Plex Sans','Segoe UI',Arial,sans-serif;
}
.inspection-matrix th, .tuning-table th {
  background: #1c3026;
  color: #fff;
  text-align: left;
  padding: 10px 12px;
  font: 700 12px/1.3 'IBM Plex Sans','Segoe UI',Arial,sans-serif;
  letter-spacing: 0.04em;
  border: 1px solid #1c3026;
}
.inspection-matrix td, .tuning-table td {
  padding: 12px;
  border: 1px solid #e2e7dd;
  vertical-align: top;
  color: #2a3a2e;
}
.inspection-matrix .prop-name, .tuning-table .tt-pattern {
  font-weight: 700;
  color: #1c3026;
  width: 28%;
}
.layer-chip {
  display: inline-block;
  font: 700 11px/1 'IBM Plex Sans','Segoe UI',Arial,sans-serif;
  letter-spacing: 0.05em;
  padding: 5px 10px;
  border-radius: 3px;
  white-space: nowrap;
}
.chip-role { background: #eef5ef; color: #2f6a53; border: 1px solid #2f6a53; }
.chip-workflow { background: #e6f0ea; color: #2f6a53; border: 1px solid #2f6a53; }
.chip-safety { background: #fbe9e9; color: #8f2e2e; border: 1px solid #8f2e2e; }
.chip-context { background: #ecebf4; color: #4f4b7c; border: 1px solid #4f4b7c; }
.chip-tool { background: #e9ecee; color: #3e4a54; border: 1px solid #3e4a54; }
.chip-review { background: #f4e8d9; color: #8d5a19; border: 1px solid #8d5a19; }
.chip-ux { background: #f0f4fb; color: #1f2d45; border: 1px solid #1f2d45; }

.evidence-record {
  margin: 28px 0;
  border: 1px solid #c8d3c6;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
}
.evidence-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #1c3026;
  color: #fff;
  padding: 14px 22px;
}
.evidence-kicker {
  font: 700 13px/1 'IBM Plex Sans','Segoe UI',Arial,sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.evidence-status {
  font: 700 12px/1 'IBM Plex Sans','Segoe UI',Arial,sans-serif;
  letter-spacing: 0.12em;
  padding: 6px 12px;
  border-radius: 3px;
}
.status-pass { background: #2f6a53; color: #fff; }
.status-fail { background: #8f2e2e; color: #fff; }
.evidence-grid { padding: 0; }
.ev-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  border-top: 1px solid #e2e7dd;
}
.ev-row:first-child { border-top: none; }
.ev-k {
  background: #f5f7f3;
  padding: 12px 18px;
  font: 700 12px/1.4 'IBM Plex Sans','Segoe UI',Arial,sans-serif;
  letter-spacing: 0.04em;
  color: #2f6a53;
  text-transform: uppercase;
  border-right: 1px solid #e2e7dd;
}
.ev-v {
  padding: 12px 18px;
  font: 13px/1.5 'IBM Plex Sans','Segoe UI',Arial,sans-serif;
  color: #2a3a2e;
}

@media (max-width: 720px) {
  .persona-card-grid {
    grid-template-columns: 1fr;
  }
  .persona-field {
    border-right: none;
  }
  .persona-pack {
    grid-template-columns: 1fr;
  }
  .ev-row {
    grid-template-columns: 1fr;
  }
  .ev-k {
    border-right: none;
    border-bottom: 1px solid #e2e7dd;
  }
  .inspection-matrix, .tuning-table {
    font-size: 12px;
  }
  .inspection-matrix th, .tuning-table th,
  .inspection-matrix td, .tuning-table td {
    padding: 8px;
  }
}


/* =========================================================
   Section 9 components � validate, release, expand, mature
   ========================================================= */

/* Observability vs Behavior Analysis compare table */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font: 14px/1.5 "IBM Plex Sans","Segoe UI",Arial,sans-serif;
  background: #fbfcf9;
  border: 1px solid #d5dccf;
}
.compare-table thead th {
  background: #1c3026;
  color: #fff;
  text-align: left;
  padding: 12px 14px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-right: 1px solid #2d4a3c;
}
.compare-table thead th:last-child { border-right: none; }
.compare-table thead th.col-generic { background: #3e4a54; }
.compare-table thead th.col-behavior { background: #2f6a53; }
.compare-table tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid #e4e8df;
  border-right: 1px solid #eef1e9;
  vertical-align: top;
}
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table tbody td:first-child {
  font-weight: 600;
  color: #1c3026;
  background: #f3f5ef;
}
.compare-table .cell-yes { color: #1e4a37; font-weight: 700; }
.compare-table .cell-no { color: #8f2e2e; font-style: italic; }
.compare-table .cell-partial { color: #8d5a19; font-style: italic; }

/* Tool landscape map */
.tool-landscape {
  margin: 32px 0;
  display: grid;
  gap: 10px;
  padding: 22px 24px 14px;
  background: #f3f5ef;
  border: 1px solid #d5dccf;
  border-left: 4px solid #1f6a53;
}
.tool-lane {
  display: grid;
  grid-template-columns: 200px 1fr;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px dashed #cdd5c6;
}
.tool-lane > .tool-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.tool-lane:last-of-type { border-bottom: none; }
.tool-lane .lane-label {
  font: 700 11px/1.3 "IBM Plex Sans","Segoe UI",Arial,sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #3e5244;
}
.tool-pill {
  display: inline-block;
  padding: 6px 12px;
  margin: 0 6px 0 0;
  font: 600 13px/1.2 "IBM Plex Sans","Segoe UI",Arial,sans-serif;
  color: #1c3026;
  background: #fff;
  border: 1px solid #9fb7ab;
  border-radius: 2px;
}
.tool-pill.tool-primary {
  background: #1f6a53;
  color: #fff;
  border-color: #1f6a53;
}
.tool-landscape figcaption {
  grid-column: 1 / -1;
  margin-top: 6px;
  font: italic 13px/1.5 "Source Serif 4",Georgia,serif;
  color: #556259;
}

/* Compliance caveat callout */
.callout-compliance {
  margin: 28px 0;
  padding: 18px 22px;
  background: #fdf3e7;
  border: 1px solid #e1c49a;
  border-left: 5px solid #8d5a19;
  color: #4a3e1f;
  font: 15px/1.65 "Source Serif 4",Georgia,serif;
}
.callout-compliance p { margin: 0; }
.callout-compliance strong { color: #8d5a19; }

/* Staged rollout timeline */
.rollout-timeline {
  margin: 32px 0;
}
.rollout-track {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  position: relative;
}
.rollout-track::before {
  content: "";
  position: absolute;
  left: 2%;
  right: 2%;
  top: 22px;
  height: 2px;
  background: linear-gradient(to right, #1f6a53, #2b3f5c);
  opacity: 0.35;
  z-index: 0;
}
.rollout-stage {
  position: relative;
  z-index: 1;
  padding: 44px 12px 14px;
  background: #fffdf8;
  border: 1px solid #d5dccf;
  border-top: 3px solid #1f6a53;
  font: 13px/1.5 "IBM Plex Sans","Segoe UI",Arial,sans-serif;
  color: #2b3b31;
}
.rollout-stage h3 {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: #16261f;
  margin: 0 0 8px;
  line-height: 1.25;
}
.rollout-stage p {
  margin: 4px 0;
  font-size: 12px;
  line-height: 1.45;
  color: #3e5244;
}
.rollout-stage p strong { color: #1c3026; }
.rs-badge {
  position: absolute;
  top: -14px;
  left: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #1f6a53;
  color: #fff;
  font: 700 12px/32px "IBM Plex Sans","Segoe UI",Arial,sans-serif;
  text-align: center;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 6px rgba(31,106,83,0.3);
}
.rs-pilot .rs-badge, .rs-monitored .rs-badge { background: #8d5a19; }
.rs-wider .rs-badge, .rs-next .rs-badge { background: #2b3f5c; }
.rollout-timeline figcaption {
  margin-top: 14px;
  font: italic 13px/1.5 "Source Serif 4",Georgia,serif;
  color: #556259;
}
@media (max-width: 960px) {
  .rollout-track { grid-template-columns: repeat(2, 1fr); }
  .rollout-track::before { display: none; }
}

/* Failure pattern grid */
.failure-grid {
  margin: 32px 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.failure-card {
  padding: 18px 20px;
  background: #fffdf8;
  border: 1px solid #d5dccf;
  border-left: 4px solid #556259;
  font: 14px/1.55 "IBM Plex Sans","Segoe UI",Arial,sans-serif;
  color: #2b3b31;
}
.failure-card h3 {
  margin: 8px 0 8px;
  font-size: 16px;
  color: #16261f;
}
.failure-card p { margin: 6px 0; font-size: 13px; line-height: 1.55; color: #3e5244; }
.failure-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.failure-badge {
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #1c3026;
  color: #fff;
  font: 700 12px/28px "IBM Plex Sans","Segoe UI",Arial,sans-serif;
  text-align: center;
}
.failure-severity {
  font: 700 10px/1 "IBM Plex Sans","Segoe UI",Arial,sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 2px;
}
.sev-critical { background: #8f2e2e; color: #fff; }
.sev-high { background: #c27a1a; color: #fff; }
.sev-med { background: #4f4b7c; color: #fff; }
.failure-card.fail-critical { border-left-color: #8f2e2e; background: #fdf4f3; }
.failure-card.fail-high { border-left-color: #c27a1a; }
.failure-card.fail-medium { border-left-color: #4f4b7c; }
.failure-owner {
  margin-top: 10px !important;
  padding-top: 10px;
  border-top: 1px dashed #cdd5c6;
  font-size: 12px !important;
  color: #556259 !important;
}
.failure-owner strong { color: #1c3026; }
.failure-grid figcaption {
  grid-column: 1 / -1;
  margin-top: 4px;
  font: italic 13px/1.5 "Source Serif 4",Georgia,serif;
  color: #556259;
}
@media (max-width: 720px) {
  .failure-grid { grid-template-columns: 1fr; }
}

/* Maturity ladder */
.maturity-ladder {
  margin: 32px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.maturity-level {
  display: grid;
  grid-template-columns: 84px 1fr;
  background: #fffdf8;
  border: 1px solid #d5dccf;
  overflow: hidden;
}
.maturity-level .ml-number {
  background: #1c3026;
  color: #fff;
  font: 800 28px/1 "IBM Plex Sans","Segoe UI",Arial,sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.04em;
}
.maturity-level .ml-body {
  padding: 16px 20px;
}
.maturity-level h3 {
  margin: 0 0 6px;
  font: 700 16px/1.25 "IBM Plex Sans","Segoe UI",Arial,sans-serif;
  color: #16261f;
}
.maturity-level p {
  margin: 6px 0;
  font: 14px/1.55 "Source Serif 4",Georgia,serif;
  color: #2b3b31;
}
.maturity-level .ml-anti {
  font-size: 13px;
  color: #8d5a19;
  font-style: italic;
}
.maturity-level .ml-anti strong { color: #8d5a19; font-style: normal; }
.ml-1 { margin-left: 0; }
.ml-2 { margin-left: 20px; }
.ml-3 { margin-left: 40px; }
.ml-4 { margin-left: 60px; }
.ml-5 { margin-left: 80px; }
.ml-5 .ml-number { background: #1f6a53; }
.ml-4 .ml-number { background: #2b3f5c; }
.ml-3 .ml-number { background: #4f4b7c; }
.ml-2 .ml-number { background: #8d5a19; }
.ml-1 .ml-number { background: #8f2e2e; }
.maturity-ladder figcaption {
  margin-top: 6px;
  font: italic 13px/1.5 "Source Serif 4",Georgia,serif;
  color: #556259;
}
@media (max-width: 720px) {
  .ml-5, .ml-4, .ml-3, .ml-2, .ml-1 { margin-left: 0; }
  .maturity-level { grid-template-columns: 64px 1fr; }
  .maturity-level .ml-number { font-size: 22px; }
}

/* Closing message block */
.closing-message {
  margin: 40px 0 24px;
  padding: 28px 32px;
  background: #1c3026;
  color: #eef3ee;
  border-left: 5px solid #c9a34a;
  font: 17px/1.75 "Source Serif 4",Georgia,serif;
}
.closing-message p { margin: 0 0 12px; }
.closing-message p:last-child { margin-bottom: 0; }
.closing-message strong { color: #f5dc9b; font-weight: 700; }

body.cover-page.print-guide {
  background:
    radial-gradient(circle at 15% 8%, #f0f2ea 0, transparent 34%),
    radial-gradient(circle at 88% 0, #edf4f1 0, transparent 28%),
    var(--bg);
  padding: 0 20px 80px;
}

.print-guide .cover {
  background: #0b1c12;
  box-shadow: var(--shadow);
  margin-bottom: 36px;
  break-after: page;
  page-break-after: always;
}

.print-guide .cover-cta,
.print-guide .topbar,
.print-guide .pager {
  display: none !important;
}

.print-sections {
  max-width: var(--max);
  margin: 0 auto;
}

.print-section {
  break-before: page;
  page-break-before: always;
  margin-top: 0;
}

.print-section + .print-section {
  margin-top: 36px;
}

@media print {
  body.cover-page.print-guide {
    background: #ffffff;
    padding: 0;
  }

  .print-guide .cover {
    max-width: none;
    margin: 0;
    box-shadow: none;
  }

  .print-guide .article {
    box-shadow: none;
  }

  .print-guide a {
    color: inherit;
    text-decoration: none;
  }
}

.pdf-raster-guide .rasterized-visual {
  display: block;
  width: 100%;
  height: auto;
  break-inside: avoid;
  page-break-inside: avoid;
}

.pdf-raster-guide .cover-ornament.rasterized-visual {
  object-fit: contain;
}

.pdf-raster-guide .rasterized-plane-board {
  margin: 16px 0 24px;
}

.pdf-raster-guide .rasterized-tool-landscape,
.pdf-raster-guide .rasterized-rollout-timeline,
.pdf-raster-guide .rasterized-failure-grid,
.pdf-raster-guide .rasterized-maturity-ladder {
  margin: 32px 0;
}

/* ── Cover page ───────────────────────────────────────────── */
body.cover-page {
  background: #0b1c12;
  padding: 0;
  min-height: 100vh;
}

.cover {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 56px;
}

.cover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 36px 0 0;
}

.cover-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
}

.cover-brand-name {
  font: 600 15px/1 "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  color: rgba(255,255,255,0.80);
  letter-spacing: 0.01em;
}

.cover-edition {
  font: 500 11px/1 "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  color: rgba(255,255,255,0.28);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cover-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 0 56px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.cover-ornament {
  position: absolute;
  right: -80px;
  top: 50%;
  transform: translateY(-52%);
  width: 540px;
  height: 540px;
  pointer-events: none;
  z-index: 0;
}

.cover-main > :not(.cover-ornament) {
  position: relative;
  z-index: 1;
}

.cover-eyebrow {
  font: 700 11px/1 "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #4ea878;
  margin: 0 0 26px;
}

.cover-title {
  font: 700 60px/1.06 "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  color: #eef6f1;
  margin: 0 0 22px;
  letter-spacing: -0.025em;
  max-width: 580px;
}

.cover-title em {
  font-style: normal;
  color: #5dab84;
}

.cover-tagline {
  font: 400 19px/1.72 "Source Serif 4", Georgia, "Times New Roman", serif;
  color: rgba(160, 205, 180, 0.82);
  margin: 0 0 16px;
  max-width: 500px;
}

.cover-source {
  font: 400 13px/1.4 "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  color: rgba(160, 205, 180, 0.45);
  letter-spacing: 0.02em;
  margin: 0 0 48px;
}

.cover-source a {
  color: rgba(160, 205, 180, 0.7);
  text-decoration: none;
  border-bottom: 1px solid rgba(160, 205, 180, 0.3);
  transition: color 0.2s, border-color 0.2s;
}

.cover-source a:hover {
  color: rgba(160, 205, 180, 1);
  border-bottom-color: rgba(160, 205, 180, 0.7);
}

.cover-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #1f6a53;
  color: #f0f7f3;
  font: 600 15px/1 "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  letter-spacing: 0.03em;
  padding: 17px 30px;
  text-decoration: none;
  border-radius: 3px;
  width: fit-content;
  transition: background 0.18s;
}

.cover-cta:hover {
  background: #287a60;
  color: #f0f7f3;
}

.cover-cta-arrow {
  font-size: 18px;
  line-height: 1;
  opacity: 0.7;
}

.cover-toc {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 30px 0 48px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.cover-toc-item {
  text-decoration: none;
  padding-right: 14px;
  border-right: 1px solid rgba(255,255,255,0.07);
}

.cover-toc-item:last-child {
  border-right: none;
  padding-right: 0;
}

.cover-toc-num {
  display: block;
  font: 700 11px/1 "IBM Plex Mono", "Courier New", monospace;
  color: #3a7356;
  margin-bottom: 9px;
  letter-spacing: 0.06em;
}

.cover-toc-label {
  display: block;
  font: 500 12px/1.5 "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  color: rgba(145, 195, 168, 0.50);
  transition: color 0.15s;
}

.cover-toc-item:hover .cover-toc-label {
  color: rgba(145, 195, 168, 0.90);
}

@media (max-width: 860px) {
  .cover {
    padding: 0 28px;
  }
  .cover-title {
    font-size: 42px;
  }
  .cover-ornament {
    width: 360px;
    height: 360px;
    right: -30px;
    opacity: 0.7;
  }
  .cover-toc {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px 0;
  }
  .cover-toc-item {
    border-right: none;
    padding-right: 0;
  }
  .cover-toc-item:nth-child(1),
  .cover-toc-item:nth-child(2),
  .cover-toc-item:nth-child(3),
  .cover-toc-item:nth-child(4) {
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding-bottom: 16px;
  }
}

@media (max-width: 500px) {
  .cover {
    padding: 0 20px;
  }
  .cover-title {
    font-size: 32px;
  }
  .cover-toc {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 0;
  }
}

/* ── Floating case-study button ─────────────────────────────────────── */
@keyframes fab-pulse {
  0%   { box-shadow: 0 4px 18px rgba(24, 80, 58, 0.38), 0 0 0 0 rgba(31, 106, 83, 0.55); }
  60%  { box-shadow: 0 4px 18px rgba(24, 80, 58, 0.38), 0 0 0 12px rgba(31, 106, 83, 0); }
  100% { box-shadow: 0 4px 18px rgba(24, 80, 58, 0.38), 0 0 0 0 rgba(31, 106, 83, 0); }
}

.guide-case-study-fab {
  position: fixed;
  top: 24px;
  right: 28px;
  z-index: 999;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 17px;
  background: var(--accent);
  color: #fff;
  font: 600 12px/1.3 "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 3px;
  box-shadow: 0 4px 18px rgba(24, 80, 58, 0.38);
  animation: fab-pulse 2.8s ease-out 1.5s 3;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.guide-case-study-fab:hover {
  background: #164d3c;
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(24, 80, 58, 0.48);
  animation: none;
}

.guide-case-study-fab svg {
  flex-shrink: 0;
  opacity: 0.9;
}

/* ── Source credit attribution ─────────────────────────────────────── */
.source-credit {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 1.4rem;
  padding: 9px 14px;
  background: var(--accent-soft);
  border: 1px solid #b8d8ce;
  border-left: 3px solid var(--accent);
  border-radius: 2px;
  font: 500 0.83rem/1.45 "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  color: #2d5044;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.source-credit:hover {
  background: #d9ede7;
  border-left-color: #164d3c;
}

.source-credit svg {
  flex-shrink: 0;
  color: var(--accent);
  opacity: 0.85;
}

.source-credit strong {
  color: var(--accent);
}

@media (max-width: 640px) {
  .guide-case-study-fab {
    top: 14px;
    right: 12px;
    padding: 9px 13px;
    font-size: 11px;
  }
}