@font-face {
  font-family: 'Alcyone';
  src: url('./fonts/Alcyone-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Alcyone';
  src: url('./fonts/Alcyone-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Alcyone';
  src: url('./fonts/Alcyone-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Caveat';
  src: url('./fonts/Caveat-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Caveat';
  src: url('./fonts/Caveat-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Caveat';
  src: url('./fonts/Caveat-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Caveat';
  src: url('./fonts/Caveat-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-bg: #ffffff;
  --color-bg-alt: #f5f5f5;
  --color-bg-warm: #f0f4ff;
  --color-ink: #232324;
  --color-ink-muted: #525558;
  --color-ink-light: #8d929e;
  --color-accent: #2476FF;
  --color-accent-deep: #005FEA;
  --color-accent-teal: #00A0EF;
  --color-border: #e2e2e9;
  --color-border-dark: #232324;

  /* Cover → dedication: shared sky so the section boundary is not visible */
  --playbook-dedication-sky: #d9eafc;

  --font-display: 'Alcyone', -apple-system, sans-serif;
  --font-body: 'Alcyone', -apple-system, sans-serif;
  --font-mono: 'Alcyone', -apple-system, sans-serif;
  --font-handwriting: 'Caveat', cursive;

  --page-max: 820px;
  --page-padding: 3.5rem;
  --page-padding-mobile: 1.5rem;

  --rail-width: 11.25rem;
  --doc-aside-width: 7rem;
  --spread-min-h: min(78vh, 640px);
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--color-ink);
  background: var(--color-bg);
  line-height: 1.7;
}

section[id] {
  scroll-margin-top: 1.25rem;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0.75rem;
  z-index: 100;
  padding: 0.5rem 1rem;
  background: var(--color-ink);
  color: #fff;
  font-size: 0.85rem;
  text-decoration: none;
  border-radius: 4px;
}

.skip-link:focus {
  left: 0.75rem;
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Typography system requested: semibold headers, medium sub-headers, regular body text */
h1, h2, h3, h4, h5, h6,
[class$="title"],
[class*=" title"] {
  font-weight: 600 !important;
}

[class$="subtitle"],
[class*=" subtitle"] {
  font-weight: 500 !important;
}

p, li, blockquote, .page-body p {
  font-weight: 400;
}

/* ═══════════════════════════════════════
   COVER
   ═══════════════════════════════════════ */

.cover {
  min-height: 100vh;
  position: relative;
  z-index: 0;
  /* Base fades to dedication sky at bottom so seams / wide-mask holes never flash white */
  background: linear-gradient(
    180deg,
    var(--color-bg) 0%,
    var(--color-bg) 82%,
    var(--playbook-dedication-sky) 100%
  );
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cover-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  width: 100%;
  padding: var(--page-padding);
  padding-top: 3rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
}

.cover-logo {
  display: flex;
  align-items: center;
  margin-bottom: 6rem;
}

.cover-logo-image {
  height: 31px;
  width: auto;
  display: block;
}

.cover-content {
  margin-top: auto;
  padding-bottom: 12rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.cover-year {
  font-family: var(--font-mono);
  font-size: 35px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  margin: 0;
}

.cover-title {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 6vw, 4.2rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin: 0;
}

.cover-subtitle {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 400 !important;
  line-height: 1.65;
  color: var(--color-ink-muted);
  max-width: 420px;
  margin: 0;
}

.cover-gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  /* Top layer: feather to dedication sky (matches .dedication-panel; evens radial vs edges) */
  background:
    linear-gradient(
      180deg,
      rgba(217, 234, 252, 0) 0%,
      rgba(217, 234, 252, 0) 76%,
      rgba(217, 234, 252, 0.42) 88%,
      var(--playbook-dedication-sky) 97%,
      var(--playbook-dedication-sky) 100%
    ),
    radial-gradient(
      ellipse 280% 118% at 50% 100%,
      rgba(0, 95, 234, 0.1) 0%,
      rgba(36, 118, 255, 0.055) 36%,
      rgba(255, 255, 255, 0) 70%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 36%,
      rgba(36, 118, 255, 0.038) 74%,
      rgba(0, 95, 234, 0.065) 100%
    );
}

@media (min-width: 1100px) {
  .cover-gradient {
    /* Feather the far right on wide viewports — removes visible vertical seam into white */
    -webkit-mask-image: linear-gradient(
      to right,
      #000 0%,
      #000 68%,
      rgba(0, 0, 0, 0.45) 82%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      #000 0%,
      #000 68%,
      rgba(0, 0, 0, 0.45) 82%,
      transparent 100%
    );
  }
}

/* ═══════════════════════════════════════
   DEDICATION (cover → letter: sticky pin + reversed wash)
   ═══════════════════════════════════════ */

.dedication-spacer {
  position: relative;
  z-index: 1;
  /* Pull up over cover bottom to hide subpixel gaps; panel paints above .cover */
  margin-top: -12px;
  min-height: 200vh;
  /* Sky at top (matches cover + panel when rail mask cuts through); fade to white deeper in scroll */
  background: linear-gradient(
    180deg,
    var(--playbook-dedication-sky) 0,
    var(--playbook-dedication-sky) 85vh,
    #eef4fc 110vh,
    var(--color-bg) 140vh,
    var(--color-bg) 100%
  );
}

.dedication-panel {
  --dedication-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem 1.5rem;
  box-sizing: border-box;
  overflow-x: clip;
  overflow-y: visible;
  /* Sky top third (token-aligned with .cover-gradient), then fade to white */
  background: linear-gradient(
    180deg,
    var(--playbook-dedication-sky) 0%,
    var(--playbook-dedication-sky) 33.333%,
    #e8f1fb 54%,
    #f4f8fd 78%,
    #ffffff 100%
  );
}

.dedication-panel__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.07;
  mix-blend-mode: multiply;
  background-image: var(--dedication-grain);
  background-size: 180px 180px;
}

.dedication-block {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.35rem;
}

.dedication-hand {
  position: relative;
  margin: 0;
  padding: 1.75rem 2rem 0;
  max-width: min(24rem, 92vw);
  text-align: center;
  font-family: var(--font-handwriting);
  font-size: clamp(1.5rem, 4.5vw, 2.15rem);
  font-weight: 400;
  font-style: normal;
  line-height: 1.55;
  letter-spacing: 0.03em;
  color: var(--color-ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
  /* Halfway between −20° and horizontal */
  transform: rotate(-10deg);
  transform-origin: center center;
}

.dedication-hand__line {
  display: inline-block;
}

/* Slight nudge + tilt per line so baselines are not one rigid rule */
.dedication-hand__line--1 {
  transform: translate(0.1em, -0.05em) rotate(2.5deg);
  letter-spacing: 0.04em;
}

.dedication-hand__line--2 {
  transform: translate(-0.12em, 0.08em) rotate(2.5deg);
  letter-spacing: 0.025em;
}

.dedication-mark {
  flex-shrink: 0;
  line-height: 0;
  margin-top: 20px;
}

.dedication-mark__img {
  display: block;
  height: 32px;
  width: auto;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .dedication-hand {
    transform: none;
  }

  .dedication-hand__line--1,
  .dedication-hand__line--2 {
    transform: none;
  }
}

@media (min-width: 1100px) {
  .dedication-panel {
    -webkit-mask-image: linear-gradient(
      to right,
      #000 0%,
      #000 68%,
      rgba(0, 0, 0, 0.45) 82%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      #000 0%,
      #000 68%,
      rgba(0, 0, 0, 0.45) 82%,
      transparent 100%
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  .dedication-spacer {
    min-height: 0;
  }

  .dedication-panel {
    position: relative;
    min-height: min(100vh, 56rem);
  }
}

/* ═══════════════════════════════════════
   PAGE LAYOUT
   ═══════════════════════════════════════ */

.page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--page-padding);
  padding-top: 2.5rem;
  padding-bottom: 4rem;
}

.page-header {
  display: none;
  justify-content: space-between;
  align-items: baseline;
  width: 100%;
  margin-bottom: 3rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #d9dde5;
}

.page-header-left {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: #9aa1ae;
}

.page-header-right {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 400;
  color: #9aa1ae;
}

.page-body p {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--color-ink);
  margin-top: 0;
  margin-bottom: 1.25rem;
}

/* ═══════════════════════════════════════
   LETTER PAGE
   ═══════════════════════════════════════ */

.letter-page {
  position: relative;
  z-index: 1;
}

.letter-page .salutation {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 400;
  font-style: italic;
  line-height: 1.15;
  margin-bottom: 1.5rem;
  color: var(--color-ink);
}

.signature {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
}

.signature-script {
  width: min(165px, 40%);
  height: auto;
  display: block;
  margin-bottom: 0.55rem;
  filter: grayscale(1) brightness(0);
}

.signature-person {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.8rem;
}

.signature-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 64px;
}

.signature-text p {
  margin-top: 0;
  margin-bottom: 0;
}

.signature-name {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.2rem !important;
}

.signature-title {
  font-size: 0.85rem !important;
  color: var(--color-ink-muted) !important;
  margin-bottom: 0 !important;
}

.signature-avatar {
  order: -1;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  align-self: center;
}

/* ═══════════════════════════════════════
   QUOTE PAGE
   ═══════════════════════════════════════ */

.quote-page {
  min-height: 78vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-bottom: none;
  position: relative;
  overflow: hidden;
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

.quote-page::before {
  content: '';
  position: absolute;
  inset: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--color-bg-alt);
  z-index: 0;
}

.quote-decoration {
  position: absolute;
  top: -2.9rem;
  left: -0.9rem;
  opacity: 1;
  pointer-events: none;
  z-index: 1;
}

.quote-decoration text {
  fill: var(--color-accent);
}

.quote-content {
  max-width: 760px;
  text-align: left;
  position: relative;
  z-index: 1;
  padding: var(--page-padding);
}

.quote-content blockquote {
  display: block;
}

.quote-typewriter {
  /* One size context for text + caret so em-based cursor matches quote lines */
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5.2vw, 3.4rem);
  line-height: 1.2;
}

.quote-typewriter .quote-type-row {
  display: block;
}

.quote-typewriter .quote-type-row:first-child {
  margin-bottom: 0.7rem;
}

.quote-typewriter .quote-text,
.quote-typewriter .quote-highlight {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  display: inline;
  margin: 0;
  vertical-align: baseline;
}

.quote-typewriter .quote-text {
  color: var(--color-ink-light);
}

.quote-typewriter .quote-highlight {
  color: var(--color-accent);
  font-style: normal;
  font-weight: 600 !important;
}

@keyframes quote-cursor-blink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

.quote-cursor {
  display: inline-block;
  position: relative;
  top: 0.03em;
  width: 0.055em;
  min-width: 2px;
  max-width: 3px;
  /* Cap-height band: sits like a text caret, not a full line box */
  height: 0.72em;
  margin-left: 0.045em;
  margin-right: 0;
  vertical-align: baseline;
  border-radius: 0.5px;
  animation: quote-cursor-blink 1.05s steps(1, end) infinite;
  transform: translateZ(0);
}

/* Solid caret while characters stream */
.quote-cursor.quote-cursor--typing {
  animation: none;
}

.quote-typewriter .quote-type-row:first-child .quote-cursor.quote-cursor--typing,
.quote-typewriter .quote-type-row:last-child .quote-cursor.quote-cursor--typing {
  opacity: 1;
}

.quote-type-row:first-child .quote-cursor {
  color: var(--color-ink-light);
  background-color: currentColor;
  opacity: 0.9;
}

.quote-type-row:last-child .quote-cursor {
  color: var(--color-accent);
  background-color: currentColor;
  opacity: 0.95;
}

.quote-cursor--hidden {
  display: none;
}

/* ═══════════════════════════════════════
   TABLE OF CONTENTS
   ═══════════════════════════════════════ */

.toc-page {
  border-bottom: 1px solid #d9dde5;
}

.toc-title {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 400;
  margin-bottom: 0.5rem;
}

.toc-subtitle {
  font-size: 0.9rem;
  color: var(--color-ink-muted);
  margin-bottom: 3rem;
  font-style: italic;
}

.toc-list {
  display: flex;
  flex-direction: column;
}

.toc-item {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  color: var(--color-ink);
  transition: color 0.2s;
}

.toc-item:first-child {
  border-top: none;
}

.toc-item:last-child {
  border-bottom: none;
}

.toc-item:hover {
  color: var(--color-accent);
}

.toc-number {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  min-width: 1.8rem;
  color: var(--color-ink-light);
}

.toc-label {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.toc-item--special .toc-label {
  font-style: normal;
  font-weight: 400;
}

/* ═══════════════════════════════════════
   CHAPTER COVERS
   ═══════════════════════════════════════ */

.chapter-cover {
  min-height: 55vh;
  display: flex;
  align-items: flex-end;
  border-bottom: none;
  padding-bottom: 4rem;
  position: relative;
  background: transparent;
}

/* Full-viewport wash behind text; inner .page padding + .chapter-cover-inner stay unchanged. */
.chapter-cover::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  max-width: none;
  z-index: 0;
  pointer-events: none;
  background-color: #e8f0f7;
  background-image:
    var(--chapter-cover-wash, none),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #ffffff 14%,
      #f9fbfe 20%,
      #f2f7fc 26%,
      #ebf3fa 32%,
      #e5eef8 38%,
      #dee9f6 44%,
      #d8e5f4 50%,
      #d2e1f2 56%,
      #ccdcef 62%,
      #c7d8ed 68%,
      #c2d4eb 74%,
      #bdd0e9 80%,
      #b8cce7 86%,
      #b4c9e5 92%,
      #b1c6e3 100%
    );
}

/*
 * Chapter covers: shared ramp (#fff at top → light blue-grey at bottom). Per-chapter wash is a
 * subtle tint only (no darkening at the top — overlay starts transparent through ~14–22%).
 */

#chapter-1 {
  --chapter-cover-wash: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 20%,
    rgba(82, 109, 130, 0.028) 40%,
    rgba(255, 255, 255, 0) 54%,
    rgba(157, 178, 191, 0.07) 70%,
    rgba(255, 255, 255, 0.28) 86%,
    rgba(255, 255, 255, 0.14) 100%
  );
}

#chapter-2 {
  --chapter-cover-wash: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 16%,
    rgba(82, 109, 130, 0.032) 36%,
    rgba(255, 255, 255, 0) 51%,
    rgba(157, 178, 191, 0.09) 66%,
    rgba(255, 255, 255, 0.24) 82%,
    rgba(255, 255, 255, 0.12) 100%
  );
}

#chapter-3 {
  --chapter-cover-wash: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 22%,
    rgba(82, 109, 130, 0.038) 43%,
    rgba(255, 255, 255, 0) 57%,
    rgba(157, 178, 191, 0.085) 73%,
    rgba(255, 255, 255, 0.22) 88%,
    rgba(255, 255, 255, 0.11) 100%
  );
}

#chapter-4 {
  --chapter-cover-wash: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 18%,
    rgba(82, 109, 130, 0.03) 38%,
    rgba(255, 255, 255, 0) 52%,
    rgba(157, 178, 191, 0.075) 68%,
    rgba(255, 255, 255, 0.26) 84%,
    rgba(255, 255, 255, 0.13) 100%
  );
}

#chapter-5 {
  --chapter-cover-wash: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 14%,
    rgba(82, 109, 130, 0.028) 34%,
    rgba(255, 255, 255, 0) 48%,
    rgba(157, 178, 191, 0.068) 64%,
    rgba(255, 255, 255, 0.28) 82%,
    rgba(255, 255, 255, 0.12) 100%
  );
}

#chapter-6 {
  --chapter-cover-wash: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 20%,
    rgba(82, 109, 130, 0.034) 42%,
    rgba(255, 255, 255, 0) 56%,
    rgba(157, 178, 191, 0.078) 72%,
    rgba(255, 255, 255, 0.24) 87%,
    rgba(255, 255, 255, 0.11) 100%
  );
}

.chapter-cover-inner {
  width: 100%;
  position: relative;
  z-index: 1;
}

.chapter-label {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  display: block;
  margin-bottom: 1.5rem;
}

.chapter-cover-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.5vw, 3.6rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

/* ═══════════════════════════════════════
   CONTENT PAGES
   ═══════════════════════════════════════ */

.section-title {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 400;
  margin-bottom: 0.4rem;
  line-height: 1.15;
}

#at-a-glance .section-title {
  color: var(--color-accent);
}

/* Wrapper around two “Next chapter” pages — blue wash + type treatment apply to both */
#next-chapter.next-chapter-region {
  position: relative;
  isolation: isolate;
  padding-top: 0;
}

#next-chapter.next-chapter-region > .page:first-child {
  padding-top: calc(2.5rem + 1.35rem);
}

/* Tighter join between the two pages so less white shows before the blue wash */
#next-chapter.next-chapter-region > .page:first-child:not(:only-child) {
  padding-bottom: 1.25rem;
}

#next-chapter.next-chapter-region > .page + .page {
  padding-top: 1.25rem;
}

/* Bridge spacing before About (replaces .page:has(+ #about) on the former last section) */
#next-chapter > .page.content-page:last-of-type {
  padding-bottom: 3rem;
}

/* Next chapter: first sentence (1/4) + remainder (3/4) */
#next-chapter .page-body .next-chapter-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  gap: 0.75rem 1.25rem;
  align-items: start;
}

#next-chapter .page-body .next-chapter-split__lead {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-ink);
}

#next-chapter .page-body .next-chapter-split__lead strong {
  font-weight: 700;
}

#next-chapter .page-body .next-chapter-split__body {
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--color-ink);
}

#next-chapter .page-body .next-chapter-split + .next-chapter-split {
  border-top: 1px solid rgba(36, 54, 92, 0.12);
  padding-top: 1.1rem;
  margin-top: 0;
}

#next-chapter.next-chapter--in-view .page-body .next-chapter-split + .next-chapter-split {
  border-top-color: rgba(255, 255, 255, 0.28);
}

@media (max-width: 640px) {
  #next-chapter .page-body .next-chapter-split {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
}

/* Full-bleed Uplane blue when section is in view (toggled by next-chapter-theme.js) */
#next-chapter::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(-1 * ((100vw - 100%) / 2));
  width: 100vw;
  background: var(--color-accent-deep);
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s ease;
}

#next-chapter.next-chapter--in-view::after {
  opacity: 1;
}

#next-chapter .page-body,
#next-chapter .page-header {
  position: relative;
  z-index: 2;
}

/* Full-viewport hairline (Next chapter); same breakout as #about::before. */
#next-chapter::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(-1 * ((100vw - 100%) / 2));
  width: 100vw;
  right: auto;
  height: 1px;
  background: #d9dde5;
  z-index: 1;
  pointer-events: none;
}

#next-chapter.next-chapter--in-view::before {
  background: rgba(255, 255, 255, 0.28);
}

#next-chapter .section-title {
  color: var(--color-accent);
}

#next-chapter.next-chapter--in-view {
  color: #ffffff;
}

#next-chapter.next-chapter--in-view .section-title {
  color: #ffffff;
}

#next-chapter.next-chapter--in-view .section-subtitle {
  color: rgba(255, 255, 255, 0.88);
}

#next-chapter.next-chapter--in-view .page-body p {
  color: rgba(255, 255, 255, 0.96);
}

#next-chapter.next-chapter--in-view .page-body strong {
  color: #ffffff;
}

#next-chapter.next-chapter--in-view .page-body .next-chapter-split__lead {
  color: #ffffff;
}

#next-chapter.next-chapter--in-view .page-body .next-chapter-split__body {
  color: rgba(255, 255, 255, 0.96);
}

#next-chapter.next-chapter--in-view > .page {
  background: transparent;
}

#next-chapter.next-chapter--in-view .page-header-left,
#next-chapter.next-chapter--in-view .page-header-right {
  color: rgba(255, 255, 255, 0.62);
}

@media (prefers-reduced-motion: reduce) {
  #next-chapter::after {
    transition: none;
  }
}

#about {
  position: relative;
}

/* Full-viewport hairline (About); same breakout as #next-chapter::before. */
#about::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(-1 * ((100vw - 100%) / 2));
  width: 100vw;
  right: auto;
  height: 1px;
  background: #d9dde5;
  z-index: 1;
  pointer-events: none;
}

#about .section-title {
  color: var(--color-accent);
}

/* About: two product screenshots, combined width matches body copy */
.about-page__product-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  width: 100%;
  max-width: 100%;
  margin: 1.15rem 0 1.3rem;
  box-sizing: border-box;
}

.about-page__product-shot {
  margin: 0;
  padding: 0;
  border: none;
  min-width: 0;
  background: #ffffff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
}

.about-page__product-shot img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: top;
  background-color: #ffffff;
  box-shadow: none;
}

.section-subtitle {
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--color-ink-muted);
  margin-bottom: 2.5rem;
  line-height: 1.5;
}

.lead-text {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.3;
  margin-bottom: 0.75rem !important;
  color: var(--color-ink);
}

.content-heading {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}

/* Section block: sub-head stacked above body (same left edge as lead / main-column copy) */
.doc-split--section {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 0.75rem;
  column-gap: 0;
  align-items: start;
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--color-border);
}

.doc-split__main > .doc-split--section:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.doc-split__main > .graphic-container + .doc-split--section {
  margin-top: 2.5rem;
}

/* Full-viewport grey wash (same as .quote-page::before) — opt-in via .doc-split--section-band-alt (Ch.3 production→selection, signal extraction; Ch.4 data→signals, where orgs fall short) */
.doc-split--section.doc-split--section-band-alt {
  position: relative;
  isolation: isolate;
  padding-bottom: 1.75rem;
  margin-bottom: 0;
}

/* Contain floats inside main (McKinsey stat) without replacing section grid */
.doc-split--section.doc-split--section-band-alt .doc-split__main--section {
  display: flow-root;
}

/*
 * Bleed: shifting left by X without widening loses X on the right (100vw bar moves as a rigid window).
 * Always pair: left: calc(50% - 50vw - X) with width: calc(100vw + X).
 */
.doc-split--section.doc-split--section-band-alt::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  --band-bleed-x: calc(var(--doc-aside-width) + 1.5rem);
  left: calc(50% - 50vw - var(--band-bleed-x));
  width: calc(100vw + var(--band-bleed-x));
  transform: none;
  background: var(--color-bg-alt);
  z-index: 0;
  pointer-events: none;
}

.doc-split--no-rail .doc-split__main > .doc-split--section.doc-split--section-band-alt::before {
  --band-bleed-x: 0px;
  left: calc(50% - 50vw);
  width: 100vw;
}

@media (min-width: 1100px) {
  .doc-split--section.doc-split--section-band-alt::before {
    --band-bleed-x: calc(var(--doc-aside-width) + 1.5rem + var(--rail-width));
  }

  .doc-split--no-rail .doc-split__main > .doc-split--section.doc-split--section-band-alt::before {
    --band-bleed-x: var(--rail-width);
    left: calc(50% - 50vw - var(--rail-width));
    width: calc(100vw + var(--rail-width));
  }
}

@media (max-width: 640px) {
  .doc-split--section.doc-split--section-band-alt::before,
  .doc-split--no-rail .doc-split__main > .doc-split--section.doc-split--section-band-alt::before {
    --band-bleed-x: 0px;
    left: calc(50% - 50vw);
    width: 100vw;
  }
}

.doc-split--section.doc-split--section-band-alt > .doc-split__aside,
.doc-split--section.doc-split--section-band-alt > .doc-split__main,
.doc-split--section.doc-split--section-band-alt > .doc-optim-callout {
  position: relative;
  z-index: 1;
}

/* Ch.4 grey bands: optional bottom hairline (full section width; opt-in via modifier) */
.doc-split--section.doc-split--section-band-alt.doc-split--section-band-alt--bottom-rule {
  border-bottom: 1px solid var(--color-border);
}

/* Flush to next hairline: remove the default section gap so grey meets the border-top below (no white band) */
.doc-split--section.doc-split--section-band-alt + .doc-split--section {
  margin-top: 0;
  position: relative;
  z-index: 1;
  background: var(--color-bg);
}

.doc-split__aside--section {
  position: relative;
  align-self: start;
  padding-right: 0.25rem;
}

.doc-split__aside--section .content-heading {
  margin: 0;
  padding: 0;
  border: none;
  font-size: 0.98rem;
  line-height: 1.38;
  max-width: none;
}

.doc-split__main--section {
  min-width: 0;
}

.doc-split__main--section > p:first-child,
.doc-split__main--section > ul:first-child {
  margin-top: 0;
}

.doc-split__main--section p {
  line-height: 1.78;
}

.doc-split__main--section .styled-list {
  margin-bottom: 1.25rem;
}

/* Paragraph after a list: same left edge as other section body paragraphs (not list-item indent) */
.doc-split__main--section .styled-list + p {
  padding-left: 0;
  margin-left: 0;
}

/* Ch.3: outlined split — copy + product UI */
.doc-optim-callout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem 1.25rem;
  align-items: stretch;
  width: 100%;
  margin: 1.75rem 0;
  padding: 1rem 1.15rem 1.1rem;
  border: 1px solid #6b7280;
  border-radius: 10px;
  background: transparent;
  box-sizing: border-box;
}

/* No-rail continuation page: align with section body column (one aside + gap), not double-inset .body-continued */
.doc-split--no-rail .doc-split__main > .doc-optim-callout {
  margin-left: calc(var(--doc-aside-width) + 1.5rem);
  width: calc(100% - (var(--doc-aside-width) + 1.5rem));
  max-width: calc(100% - (var(--doc-aside-width) + 1.5rem));
}

.doc-optim-callout__text {
  min-width: 0;
}

.doc-optim-callout__text p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.68;
  color: var(--color-ink);
  font-weight: 400;
}

.doc-optim-callout__media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  border-radius: 8px;
  overflow: hidden;
  line-height: 0;
}

.doc-optim-callout__img {
  display: block;
  width: 100%;
  max-height: 200px;
  height: auto;
  object-fit: contain;
  object-position: center;
  vertical-align: top;
}

/* Ch.4 banded section: callout spans aside + main columns (aligns with section heading) */
.doc-optim-callout.doc-optim-callout--section-span {
  grid-column: 1 / -1;
  width: 100%;
  max-width: none;
  min-width: 0;
}

.doc-optim-callout.doc-optim-callout--section-span .doc-optim-callout__text {
  display: flex;
  align-items: center;
}

.doc-optim-callout.doc-optim-callout--section-span .doc-optim-callout__img {
  max-height: 260px;
}

.level-heading {
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-top: 2.5rem;
  margin-bottom: 0.25rem;
}

/* Maturity chapter: “What it takes…” bullets → next Level N header */
.styled-list + .level-heading {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}

/* Same rhythm when bullets are followed by body copy instead of a level heading (Ch.5 “sustain this level”). */
.styled-list.styled-list--footer-rule {
  margin-bottom: 0;
}

.styled-list--footer-rule + p {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}

.level-tagline {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-style: italic;
  color: var(--color-ink-muted);
  margin-bottom: 1.25rem !important;
}

/* Ch.5: maturity levels as <details> foldouts (Uplane blue header, chevron, expandable body) */
.level-foldouts {
  margin-top: 2rem;
  margin-bottom: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.level-foldout {
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(36, 54, 92, 0.07);
}

.level-foldout__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.2rem 1.05rem;
  background: var(--color-accent);
  color: #ffffff;
  cursor: pointer;
  list-style: none;
}

.level-foldout__summary::-webkit-details-marker {
  display: none;
}

.level-foldout__titles {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  min-width: 0;
  text-align: left;
}

.level-foldout__title {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1.25;
}

.level-foldout__summary .level-foldout__tagline {
  font-size: 0.82rem;
  font-style: italic;
  font-weight: 400;
  opacity: 0.93;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.95);
  margin: 0 !important;
}

.level-foldout__chevron {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.95);
  transition: transform 0.28s ease;
}

.level-foldout[open] .level-foldout__chevron {
  transform: rotate(90deg);
}

.level-foldout:not([open]) .level-foldout__summary {
  border-radius: 10px;
}

.level-foldout[open] .level-foldout__summary {
  border-radius: 10px 10px 0 0;
}

.level-foldout__panel {
  padding: 1.45rem 1.2rem 1.5rem;
  background: var(--color-bg);
  border: 1px solid rgba(36, 118, 255, 0.2);
  border-top: none;
  border-radius: 0 0 10px 10px;
}

.level-foldout__panel > p {
  margin-bottom: 1.25rem;
}

.level-foldout__panel > p:last-child {
  margin-bottom: 0;
}

.level-foldout__panel .duration-block--in-foldout {
  margin-bottom: 0;
}

.level-foldout__panel .duration-block + .what-it-takes-heading {
  margin-top: 1rem;
  padding-top: 0;
  border-top: none;
}

.level-foldout__panel .what-it-takes-heading {
  margin-bottom: 0.65rem;
}

.level-foldout__panel .styled-list + .level-foldout__closing,
.level-foldout__panel .styled-list--footer-rule + .level-foldout__closing {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}

.level-foldout__closing {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--color-ink);
}

/* Single foldout in chapter body: same horizontal rhythm as adjacent paragraphs */
.level-foldouts--inline-body {
  margin-top: 0;
  margin-bottom: 1.25rem;
  gap: 0;
}

.level-foldout__title--sentence {
  text-transform: none;
  letter-spacing: -0.015em;
}

.level-foldouts--inline-body .level-foldout__panel .styled-list {
  margin-top: 0;
  margin-bottom: 0;
}

/* Ch.4: <details> foldout — Uplane blue header (aligned with .level-foldout__summary) */
.doc-foldouts--muted {
  margin: 0.85rem 0 1.25rem;
}

.doc-foldout--bg-alt {
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(36, 54, 92, 0.07);
}

.doc-foldout__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1.15rem 1rem;
  background: var(--color-accent);
  color: #ffffff;
  cursor: pointer;
  list-style: none;
  border: none;
}

.doc-foldout__summary::-webkit-details-marker {
  display: none;
}

.doc-foldout__summary-text {
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.doc-foldout__chevron {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.95);
  transition: transform 0.28s ease;
}

.doc-foldout--bg-alt[open] .doc-foldout__chevron {
  transform: rotate(90deg);
}

.doc-foldout--bg-alt:not([open]) .doc-foldout__summary {
  border-radius: 8px;
}

.doc-foldout--bg-alt[open] .doc-foldout__summary {
  border-radius: 8px 8px 0 0;
  border-bottom-color: transparent;
}

.doc-foldout__panel {
  padding: 1.1rem 1.15rem 1.15rem;
  background: var(--color-bg);
  border: 1px solid rgba(36, 118, 255, 0.2);
  border-top: none;
  border-radius: 0 0 8px 8px;
}

.doc-foldout__panel .doc-foldout__list {
  margin-top: 0;
  margin-bottom: 0;
}

.styled-list {
  padding-left: 1.25rem;
  margin-top: 0;
  margin-bottom: 1.5rem;
}

.styled-list li {
  font-size: 0.95rem;
  line-height: 1.75;
  margin-bottom: 0.4rem;
  color: var(--color-ink);
}

.styled-list li::marker {
  color: var(--color-ink-light);
}

/* Chapter 1 — flywheel stages: thin bordered rows + Uplane blue icons */
.flywheel-stage-list {
  list-style: none;
  padding: 0;
  margin: 0.85rem 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.flywheel-stage-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  padding: 0.65rem 0.9rem 0.68rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff 0%, #fafbfd 100%);
  box-shadow: 0 1px 2px rgba(35, 35, 36, 0.05);
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

.flywheel-stage-list li:hover {
  border-color: rgba(36, 118, 255, 0.35);
  box-shadow: 0 2px 8px rgba(36, 118, 255, 0.08);
}

.flywheel-stage-list__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(36, 118, 255, 0.1);
  color: var(--color-accent);
}

.flywheel-stage-list__icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.flywheel-stage-list__text {
  flex: 1;
  min-width: 0;
  font-size: 0.94rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.doc-split__main .flywheel-stage-list {
  margin-top: 0.75rem;
}

/* ═══════════════════════════════════════
   FACTS & FIGURES (report-style panel: Uplane-tinted wash + top data bar — not chapter-cover ramp)
   ═══════════════════════════════════════ */

.facts-figures {
  margin: 2.5rem 0;
  padding: 1.45rem 1.85rem 1.5rem;
  border: none;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 110% 95% at 92% -8%, rgba(36, 118, 255, 0.12) 0%, transparent 52%),
    radial-gradient(ellipse 85% 90% at -6% 102%, rgba(0, 160, 239, 0.07) 0%, transparent 48%),
    linear-gradient(168deg, #ffffff 0%, #f4f7fd 38%, #eaf0fa 72%, #e4ebf7 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 0 0 1px rgba(36, 118, 255, 0.1),
    0 12px 40px rgba(36, 54, 92, 0.08);
}

.facts-figures::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(
    90deg,
    var(--color-accent-deep) 0%,
    var(--color-accent) 42%,
    var(--color-accent-teal) 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* Same 3px bar as top, gradient reversed (lighter left → darker right) */
.facts-figures::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: 0 0 14px 14px;
  background: linear-gradient(
    90deg,
    var(--color-accent-teal) 0%,
    var(--color-accent) 58%,
    var(--color-accent-deep) 100%
  );
  pointer-events: none;
  z-index: 0;
}

.facts-title,
.facts-grid {
  position: relative;
  z-index: 1;
}

.facts-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: none;
  text-align: left;
  color: var(--color-accent);
  margin: 0 0 0.8rem;
  max-width: none;
  padding-bottom: 0;
  border-bottom: none;
}

.facts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.fact-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1rem 1.2rem 1.05rem;
  background: #ffffff;
  border-radius: 12px;
  border: none;
  box-shadow: 0 2px 14px rgba(36, 54, 92, 0.05);
  position: relative;
  transform-origin: center;
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.fact-card:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 32px rgba(36, 118, 255, 0.16);
  z-index: 1;
}

.fact-number {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 600;
  line-height: 1.05;
  color: var(--color-accent);
  margin-bottom: 0.45rem;
  letter-spacing: -0.02em;
}

/* Must beat `.page-body p` (0,1,1) so stat blurbs stay 10px, not body 0.95rem */
.facts-figures .fact-desc {
  font-size: 10px;
  line-height: 1.5;
  color: var(--color-ink-muted);
  margin: 0 !important;
  max-width: 32ch;
}

/* Chapter 2 compare row: descriptions share one size; ~≤4 lines per card when 3 columns */
@media (min-width: 641px) {
  .facts-figures.facts-figures--three-col-balanced .fact-desc {
    font-size: 10px;
    line-height: 1.42;
    max-width: 100%;
  }
}

/* ═══════════════════════════════════════
   CASE EXAMPLES
   ═══════════════════════════════════════ */

.case-example {
  margin: 2.5rem 0;
  padding: 2rem;
  background: var(--color-bg-warm);
  border-left: 3px solid var(--color-accent);
}

.case-title {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin-bottom: 1rem;
}

.case-example p {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--color-ink);
  margin-bottom: 0.85rem;
}

.case-example p:last-child {
  margin-bottom: 0;
}

/* ═══════════════════════════════════════
   KEY TAKEAWAYS (primary closing thought per chapter)
   Solid Uplane blue vs. case-example’s warm panel + left rule
   ═══════════════════════════════════════ */

.key-takeaway {
  margin: 2.75rem 0 0;
  padding: 1.65rem 1.5rem 1.8rem;
  border-radius: 10px;
  border: none;
  background: var(--color-accent);
  box-shadow: 0 6px 28px rgba(36, 118, 255, 0.35);
  transform-origin: center;
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.key-takeaway:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 36px rgba(36, 118, 255, 0.42);
}

@media (prefers-reduced-motion: reduce) {
  .key-takeaway {
    transition: none;
  }

  .key-takeaway:hover {
    transform: none;
    box-shadow: 0 6px 28px rgba(36, 118, 255, 0.35);
  }

  .fact-card {
    transition: none;
  }

  .fact-card:hover {
    transform: none;
    box-shadow: 0 2px 14px rgba(36, 54, 92, 0.05);
    z-index: auto;
  }
}

.key-takeaway h4 {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 0.9rem;
  opacity: 0.92;
}

.key-takeaway p {
  font-family: var(--font-display);
  font-size: 0.95rem;
  line-height: 1.75;
  font-style: italic;
  font-weight: 500;
  color: #ffffff;
  margin: 0;
}

/* ═══════════════════════════════════════
   DURATION BLOCKS
   ═══════════════════════════════════════ */

.duration-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  margin-top: 0;
  margin-bottom: 1.5rem;
  padding: 1rem 0;
  /* Top rule only; no bottom — avoids doubling with .content-heading’s border-top */
  border-top: 1px solid var(--color-border);
  border-bottom: none;
}

/* Match space above the rule to padding below it (1rem): drop extra margin-top on the block and tighten the preceding paragraph. */
.page-body p:has(+ .duration-block) {
  margin-bottom: 1rem;
}

/* Next section’s top rule sat at margin-top 2.5rem — too far from “Typical duration”. Match ~1rem like inside the duration block. */
.duration-block:has(+ .content-heading),
.duration-block:has(+ .doc-split--section) {
  margin-bottom: 0;
}

/* No rule between “Typical duration” and the following “What it takes…” heading */
.duration-block + .what-it-takes-heading {
  margin-top: 1rem;
  padding-top: 0;
  border-top: none;
}

.page.content-page:has(.page-body > .duration-block:last-child)
  + .page.content-page
  .page-body
  > .what-it-takes-heading:first-child,
.page.content-page:has(.page-body .doc-split__main > .duration-block:last-child)
  + .page.content-page
  .page-body
  .doc-split__main
  > .what-it-takes-heading:first-child {
  padding-top: 0;
  border-top: none;
}

.duration-label,
.what-it-takes-heading {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
  line-height: 1.3;
}

.what-it-takes-heading {
  margin-top: 2.5rem;
  margin-bottom: 0.65rem;
  padding-top: 0;
  border: none;
}

.duration-value {
  display: block;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-ink);
}

/* ═══════════════════════════════════════
   SVG GRAPHICS
   ═══════════════════════════════════════ */

/* Full-bleed grey band (match flywheel): L→R wash, no card outline, no rounding */
.graphic-container {
  position: relative;
  max-width: none;
  width: 100%;
  margin: 2.5rem 0;
  padding: 2.5rem var(--page-padding);
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: hidden;
}

.graphic-container::before {
  content: '';
  position: absolute;
  inset: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: 0;
  background: linear-gradient(
    90deg,
    #ebecee 0%,
    var(--color-bg-alt) 38%,
    #f7f7f9 62%,
    #e8eaee 100%
  );
}

/* Pareto / compounding / maturity / flywheel / at-a-glance: plain page background (no grey wash) */
.graphic-container--pareto::before,
.graphic-container--brand-impact::before,
.graphic-container--compounding::before,
.graphic-container--maturity::before,
.graphic-container--flywheel::before {
  display: none;
}

.graphic-container > svg,
.graphic-container .flywheel-chart__frame > svg,
.graphic-container .pareto-chart__frame > svg,
.graphic-container .compounding-chart__frame > svg,
.graphic-container .maturity-chart__frame > svg {
  position: relative;
  z-index: 1;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: auto;
  display: block;
}

/* Compounding: full column width — flush with section title & body copy in .doc-split__main */
.graphic-container--compounding .compounding-chart {
  width: 100%;
  max-width: 100%;
}

.graphic-container--compounding .compounding-chart__frame {
  width: 100%;
}

.graphic-container--compounding .compounding-chart__frame > svg.compounding-svg {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Pareto: full column width — flush with section title & body copy in .doc-split__main */
.graphic-container--pareto .pareto-chart {
  width: 100%;
  max-width: 100%;
}

.graphic-container--pareto .pareto-chart__frame {
  width: 100%;
}

.graphic-container--pareto .pareto-chart__frame > svg.pareto-svg,
.graphic-container--pareto .pareto-chart__frame > svg.brand-impact-svg {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  height: auto;
  display: block;
}

/* Charts nested in main column: prose is already inset — avoid doubling --page-padding */
.doc-split__main > .graphic-container,
.doc-split__main--section > .graphic-container {
  padding-left: 0;
  padding-right: 0;
}

/* Flywheel: full column width + sit above grey wash */
.graphic-container--flywheel .flywheel-chart {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
}

.graphic-container--flywheel .flywheel-chart__frame {
  width: 100%;
}

.graphic-container--flywheel .flywheel-chart__frame > svg.flywheel-svg {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.graphic-container--flywheel .flywheel-svg {
  min-height: min(44vw, 300px);
}

/* Pareto chart: extra air around figure + SVG */
.graphic-container--pareto,
.graphic-container:has(.pareto-svg),
.graphic-container--brand-impact {
  padding-top: 3.25rem;
  padding-bottom: 2.75rem;
}

/* Brand vs. performance dual chart: tighter rhythm vs. generic Pareto band */
.graphic-container--pareto.graphic-container--brand-impact {
  margin-top: 1.1rem;
  margin-bottom: 0.45rem;
  padding-top: 1rem;
  padding-bottom: 0.35rem;
}

.graphic-container--brand-impact .pareto-chart__head {
  margin-bottom: 0.45rem;
}

/* Less air before the section hairline than generic .graphic-container + .doc-split--section (2.5rem) */
.doc-split__main--section > .graphic-container--pareto.graphic-container--brand-impact + .doc-split--section {
  margin-top: 1rem;
}

/* Ch.3 Pareto only: pull chart band closer to prose above and first subsection below */
.doc-split__main > .graphic-container--pareto:not(.graphic-container--brand-impact) {
  margin-top: 1rem;
  margin-bottom: 0.85rem;
  padding-top: 1.5rem;
  padding-bottom: 1.2rem;
}

.doc-split__main > .graphic-container--pareto:not(.graphic-container--brand-impact) + .doc-split--section {
  margin-top: 1.1rem;
}

/* Same-chapter continuation: avoid stacking section padding (reads like double paragraph gap) */
.page.content-page:has(+ .page.content-page) {
  padding-bottom: 0;
}

.page.content-page + .page.content-page {
  padding-top: 0;
}

/* Single bridge page → About Uplane: extra band so it feels like a new chapter, not a tight continuation. */
.page.content-page:has(+ #about) {
  padding-bottom: 3rem;
}

.page.content-page + #about,
#next-chapter ~ #about {
  /* Bridge band + extra space below hairline before title */
  padding-top: calc(3.5rem + 1.35rem);
}

/* Continuation: margins don’t collapse across sections — drop first-child top margin so pairs like
   facts-figures + case-example match the same gap as when both sit in one .page-body.
   Requires the first element child to be first in the DOM (no leading whitespace before it). */
.page.content-page + .page.content-page .page-body > *:first-child {
  margin-top: 0;
}

.page.content-page + .page.content-page .page-body > .doc-split:first-child .doc-split__main > *:first-child {
  margin-top: 0;
}

/* Same page: p mb + h4 mt collapse to max(1.25rem, 2.5rem) = 2.5rem. Across sections they don’t
   collapse, so use 1.25rem here so 1.25 (last p) + 1.25 (h4) ≈ that single 2.5rem band. */
.page.content-page + .page.content-page .page-body > .content-heading:first-child,
.page.content-page + .page.content-page .page-body > .doc-split .doc-split__main > .content-heading:first-child,
.page.content-page + .page.content-page .page-body > .doc-split .doc-split__main > .doc-split--section:first-child {
  margin-top: 1.25rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--color-border);
}

/* Ch.4 p.18 only: no top hairline; tighter gap after prior page’s band (bottom rule provides seam) */
.page.content-page + .page.content-page .page-body > .doc-split .doc-split__main > .doc-split--section.doc-split--section--tight-no-top-hairline:first-child {
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: none;
}

/* Ch.4 p.17: “The role of technology” — no top hairline; sit a bit closer under prior page’s data band + bottom rule */
.page.content-page + .page.content-page .page-body > .doc-split .doc-split__main > .doc-split--section.doc-split--section--no-top-hairline-after-data-band:first-child {
  margin-top: 0.75rem;
  padding-top: 0.72rem;
  border-top: none;
}

.page.content-page + .page.content-page .page-body > .what-it-takes-heading:first-child,
.page.content-page + .page.content-page .page-body > .doc-split .doc-split__main > .what-it-takes-heading:first-child {
  margin-top: 1.25rem;
  padding-top: 0;
}

/* Continuation strips section padding; key-takeaway had no bottom margin — restore ~2.5rem rhythm before the next page (e.g. Ch.6 → The Next Chapter). */
.page.content-page:has(+ .page.content-page) .page-body > .key-takeaway:last-child,
.page.content-page:has(+ .page.content-page) .page-body .doc-split__main > .key-takeaway:last-child {
  margin-bottom: 2.5rem;
}

/* Space before chapter splash after a content page — key-takeaway had no bottom margin when next is .chapter-cover. */
.page.content-page + .page.chapter-cover {
  margin-top: 2.75rem;
}

.graphic-container--compact {
  padding: 1.5rem var(--page-padding);
}

.pareto-svg,
.maturity-svg,
.compounding-svg,
.flywheel-svg {
  overflow: visible;
}

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

/* Chapter 5 maturity chart: ag-style frame + hover on phases */
.maturity-chart {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.maturity-chart__head {
  margin-bottom: 0.75rem;
}

.maturity-chart__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 400 !important;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--color-accent);
}

.maturity-chart__frame {
  position: relative;
  overflow: visible;
  border: none;
  border-radius: 0;
  background: transparent;
}

.maturity-svg__phase {
  cursor: pointer;
  transition: filter 0.22s ease;
  filter: drop-shadow(0 1px 2px rgba(36, 54, 92, 0.06));
}

/* No transform — scaling <g> changes SVG hit targets and causes hover flicker */
.maturity-svg__phase:hover {
  filter: drop-shadow(0 6px 20px rgba(36, 118, 255, 0.28));
}

.maturity-svg__phase-title,
.maturity-svg__phase-sub,
.maturity-svg__time,
.maturity-svg__axis-caption {
  font-family: var(--font-body);
}

.maturity-svg__phase-title {
  font-size: 14px;
  font-weight: 600;
  fill: var(--color-ink);
}

.maturity-svg__phase--inverse .maturity-svg__phase-title {
  fill: #ffffff;
}

.maturity-svg__phase-sub {
  font-size: 11px;
  font-weight: 500;
  fill: var(--color-ink-muted);
  font-style: italic;
}

.maturity-svg__phase--inverse .maturity-svg__phase-sub {
  fill: rgba(255, 255, 255, 0.92);
}

.maturity-svg__time {
  font-size: 12px;
  font-weight: 500;
  fill: #525558;
}

.maturity-svg__axis-caption {
  font-size: 13px;
  font-weight: 500;
  fill: #525558;
  letter-spacing: 0.02em;
  text-transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .maturity-svg__phase {
    transition: none;
  }

  .maturity-svg__phase:hover {
    filter: drop-shadow(0 4px 14px rgba(36, 118, 255, 0.22));
  }
}

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

.flywheel-svg text {
  font-family: var(--font-body);
}

/* Flywheel: tight rhythm — diagram carries the weight (no grey band) */
.graphic-container--flywheel,
.graphic-container:has(.flywheel-svg) {
  padding-top: 1.35rem;
  padding-bottom: 1.5rem;
}

.graphic-container--flywheel .flywheel-chart__head {
  margin-bottom: 0.45rem;
}

.graphic-container--flywheel {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  /* Align with .doc-split__main on railed chapter pages (aside + gap), same as body copy above */
  padding-left: calc(var(--doc-aside-width) + 1.5rem);
  padding-right: var(--page-padding);
}

/* ═══════════════════════════════════════
   IMPACT STRIP (About page): full-bleed blue band, stats as white type (no card panels)
   ═══════════════════════════════════════ */

.impact-strip {
  position: relative;
  /* Break out of .page max-width so the band is full viewport (same idea as .quote-page). */
  width: 100vw;
  max-width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  margin: 2.5rem 0;
  padding: 2.25rem 0 2.5rem;
  overflow: visible;
  box-shadow: 0 6px 28px rgba(36, 118, 255, 0.22);
}

.impact-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--color-accent);
}

.impact-strip-inner {
  position: relative;
  z-index: 1;
  max-width: var(--page-max);
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--page-padding);
}

.impact-strip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.impact-strip-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0.35rem 0.5rem;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
}

.impact-strip-number {
  font-family: var(--font-display);
  font-size: 2.35rem;
  font-weight: 600;
  line-height: 1.05;
  color: #ffffff;
  margin-bottom: 0.65rem;
  letter-spacing: -0.02em;
}

.impact-strip .impact-strip-desc {
  font-size: 0.88rem;
  line-height: 1.55;
  color: #ffffff;
  margin: 0 !important;
  max-width: 32ch;
}

/* ═══════════════════════════════════════
   TESTIMONIALS
   ═══════════════════════════════════════ */

.testimonial {
  padding: 2rem 0;
  border-bottom: 1px solid var(--color-border);
}

.testimonial:first-child {
  border-top: 1px solid var(--color-border);
}

.testimonial-quote {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--color-ink);
  margin-bottom: 1.25rem;
}

.testimonial-emphasis {
  font-weight: 700;
  color: var(--color-accent);
}

.testimonial-author {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.testimonial-author--with-logo {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.25rem;
  flex-wrap: wrap;
}

.testimonial-author__text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.testimonial-company-logo {
  height: 32px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  flex-shrink: 0;
}

.testimonial-company-logo--wagetap {
  height: 48px;
  max-width: 210px;
}

.testimonial-name {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-ink);
}

.testimonial-role {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--color-ink-muted);
}

/* Portrait + quote row: circular photo, quote block middle-aligned to photo */
.testimonial--with-portrait {
  display: flex;
  align-items: center;
  gap: 1.35rem;
}

.testimonial-portrait {
  position: relative;
  flex-shrink: 0;
  width: 108px;
  height: 108px;
  overflow: visible;
  /* One width for all testimonial flags (matches DE at 22px × 5∶3). */
  --testimonial-flag-w: calc(22px * 5 / 3);
}

/* DE: 22px tall. US/AU: same width var; US 26px tall; AU 24px. US/AU use fill — ignore source aspect ratio. */
.testimonial-flag--de {
  position: absolute;
  top: 0;
  right: -10px;
  width: var(--testimonial-flag-w);
  max-width: var(--testimonial-flag-w);
  height: 22px;
  object-fit: contain;
  object-position: top right;
  border-radius: 3px;
  pointer-events: none;
  z-index: 2;
  display: block;
}

.testimonial-flag--us {
  position: absolute;
  top: 0;
  right: -10px;
  width: var(--testimonial-flag-w);
  max-width: var(--testimonial-flag-w);
  height: 26px;
  object-fit: fill;
  object-position: top right;
  border-radius: 3px;
  pointer-events: none;
  z-index: 2;
  display: block;
}

.testimonial-flag--au {
  position: absolute;
  top: 0;
  right: -10px;
  width: var(--testimonial-flag-w);
  max-width: var(--testimonial-flag-w);
  height: 24px;
  object-fit: fill;
  object-position: top right;
  border-radius: 3px;
  pointer-events: none;
  z-index: 2;
  display: block;
}

/* Shows through transparent areas of cut-out portraits (e.g. former foliage background). */
.testimonial-portrait--grey-fill {
  background-color: #eaeaea;
  border-radius: 50%;
  overflow: visible;
}

.testimonial-photo {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

.testimonial-photo--torso {
  object-position: center 28%;
}

/* Original colour photo shown as monochrome (e.g. Wagetab portrait). */
.testimonial-photo--bw {
  filter: grayscale(1);
}

.testimonial-copy {
  flex: 1;
  min-width: 0;
}

/* Inline in chapter section body: keep Sven-style block; next .doc-split--section supplies the grey rule */
.doc-split__main--section > .testimonial,
.doc-split__main > .testimonial {
  border-bottom: none;
  padding-bottom: 0;
}

/* Opening chapter column: quote sits under lead paragraphs; match column width and copy alignment */
.doc-split__main > .testimonial--chapter-intro {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: 0;
  padding-top: 1.5rem;
  padding-bottom: 0;
}

.doc-split__main > .testimonial--chapter-intro.testimonial--with-portrait {
  align-items: flex-start;
}

.doc-split__main > .testimonial--chapter-intro .testimonial-copy {
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
}

/* ═══════════════════════════════════════
   BACK COVER
   ═══════════════════════════════════════ */

.back-cover {
  min-height: 50vh;
  position: relative;
  overflow: hidden;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Same wash as .cover-gradient — decorative layer only so copy is not masked on wide screens */
.back-cover::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 280% 120% at 50% 100%,
      rgba(0, 95, 234, 0.075) 0%,
      rgba(36, 118, 255, 0.045) 42%,
      rgba(255, 255, 255, 0) 78%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 44%,
      rgba(36, 118, 255, 0.025) 82%,
      rgba(0, 95, 234, 0.045) 100%
    );
}

@media (min-width: 1100px) {
  .back-cover::before {
    -webkit-mask-image: linear-gradient(
      to right,
      #000 0%,
      #000 68%,
      rgba(0, 0, 0, 0.45) 82%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      #000 0%,
      #000 68%,
      rgba(0, 0, 0, 0.45) 82%,
      transparent 100%
    );
  }
}

.back-cover-inner {
  text-align: center;
  position: relative;
  z-index: 1;
}

.back-cover-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
}

.back-cover-logo-image {
  height: 40px;
  width: auto;
  display: block;
}

.back-cover-url {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-ink-muted);
  margin-bottom: 1rem;
}

.back-cover-legal {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--color-ink-light);
}

/* ═══════════════════════════════════════
   LANGDOCK-INSPIRED SHELL & RAIL
   ═══════════════════════════════════════ */

.playbook-shell {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}

.playbook-content {
  flex: 1;
  min-width: 0;
}

.chapter-rail {
  display: none;
  flex: 0 0 var(--rail-width);
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  overflow-y: auto;
  border-right: 1px solid var(--color-border);
  background: linear-gradient(180deg, #fafbfd 0%, #ffffff 38%);
  padding: 1.75rem 1rem 2rem 1.25rem;
  z-index: 5;
}

.chapter-rail__kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-light);
  margin-bottom: 1.35rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-border);
}

.chapter-rail__nav {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.chapter-rail__link {
  display: block;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--color-ink-muted);
  text-decoration: none;
  padding: 0.4rem 0.35rem 0.4rem 0.5rem;
  border-radius: 4px;
  border-left: 2px solid transparent;
  transition:
    color 0.15s,
    background 0.15s,
    border-color 0.15s;
}

.chapter-rail__link:hover {
  color: var(--color-ink);
  background: rgba(36, 118, 255, 0.06);
}

.chapter-rail__link.is-active {
  color: var(--color-accent-deep);
  font-weight: 600;
  border-left-color: var(--color-accent);
  background: rgba(36, 118, 255, 0.08);
}

@media (min-width: 1100px) {
  .chapter-rail {
    display: block;
  }

  #next-chapter::before,
  #next-chapter::after,
  #about::before {
    left: calc(-1 * (var(--rail-width) + (100vw - var(--rail-width) - 100%) / 2));
  }
}

/* ═══════════════════════════════════════
   SPLIT LAYOUT & CONTENT BLOCKS
   ═══════════════════════════════════════ */

.doc-split {
  display: grid;
  grid-template-columns: var(--doc-aside-width) minmax(0, 1fr);
  gap: 1.25rem 1.5rem;
  margin-bottom: 1.75rem;
  align-items: start;
}

.doc-split:last-child {
  margin-bottom: 0;
}

.doc-split__aside {
  padding-top: 0.2rem;
}

.doc-split__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-light);
  line-height: 1.35;
}

.doc-split__main .lead-text {
  margin-top: 0;
}

.doc-split__main .styled-list {
  margin-top: 0.75rem;
}

/* Dark inset panels — Ch.2 “Organizations that have made this transition…” + Ch.4 Uplane callout paragraph */
.doc-callout.doc-callout--bg-alt,
.doc-split__main--section p.doc-callout--bg-alt-block {
  background: linear-gradient(165deg, #646c76 0%, #5a616c 48%, #525860 100%);
  color: #ffffff;
  border-radius: 10px;
  padding: 1.35rem 1.55rem 1.4rem;
  box-sizing: border-box;
  box-shadow: 0 4px 18px rgba(45, 50, 58, 0.1);
}

.doc-callout.doc-callout--bg-alt {
  margin: 1.1rem 0 1.5rem;
}

.doc-split__main--section p.doc-callout--bg-alt-block {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  max-width: none;
}

/* Beat `p, .page-body p { font-weight: 400 }` */
.doc-callout .doc-callout__lead {
  margin: 0 0 0.6rem;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-ink);
}

.doc-callout.doc-callout--bg-alt .doc-callout__lead {
  color: #ffffff;
}

.doc-split__main .doc-callout .styled-list {
  margin-top: 0;
  margin-bottom: 0;
}

.doc-callout.doc-callout--bg-alt .styled-list li {
  color: rgba(255, 255, 255, 0.94);
}

.doc-callout.doc-callout--bg-alt .styled-list li::marker {
  color: rgba(255, 255, 255, 0.55);
}

.doc-split__main--section p.doc-callout--bg-alt-block strong,
.doc-callout.doc-callout--bg-alt strong {
  color: #ffffff;
  font-weight: 600;
}

/* Ch.4: McKinsey opener — prose wraps around floated stat panel; left column inset unchanged */
.mc-report-prose-stat {
  margin: 0 0 1.25rem;
}

.mc-report-prose-stat::after {
  content: '';
  display: table;
  clear: both;
}

.doc-split__main--section .mc-report-prose-stat__body {
  margin: 0;
  line-height: 1.78;
}

.mc-leaders-stat {
  float: right;
  width: min(16rem, 40%);
  min-width: 11.5rem;
  margin: 0 0 0.75rem 1.25rem;
  background: linear-gradient(152deg, var(--color-accent-deep) 0%, var(--color-accent) 52%, #4d8fff 100%);
  color: #ffffff;
  padding: 1rem 1.2rem 1.15rem 1.15rem;
  border-radius: 10px;
  box-shadow: none;
}

.mc-leaders-stat__inner {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.42;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  color: #ffffff;
}

.mc-leaders-stat__intro {
  display: block;
  font-weight: 600;
  letter-spacing: 0.015em;
  line-height: 1.35;
  color: #ffffff;
}

.mc-leaders-stat__line {
  display: block;
}

.mc-leaders-stat__pct {
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #ffffff;
}

.mc-leaders-stat__rest {
  font-size: 0.875rem;
  font-weight: 500;
  color: #ffffff;
}

@media (max-width: 720px) {
  .mc-leaders-stat {
    float: none;
    width: 100%;
    min-width: 0;
    margin: 0 0 1rem 0;
    border-radius: 10px;
  }
}

.letter-body .signature {
  margin-top: 2.25rem;
}

.letter-prose .salutation {
  margin-bottom: 1.5rem;
}

.doc-split--chapter-open {
  margin-bottom: 0;
}

/* Chapter body without left “Chapter N” rail (full-width main) */
.doc-split--chapter-open.doc-split--no-rail {
  grid-template-columns: 1fr;
  gap: 0;
}

/* Ch.1: block after flywheel stage list — label + body share inset (matches list text column) */
.flywheel-continued-block {
  margin-top: 1.35rem;
  padding-left: calc(0.75rem + 32px + 0.75rem);
  border-left: 2px solid rgba(36, 118, 255, 0.22);
  padding-top: 0.2rem;
}

.flywheel-continued-block__label {
  margin-bottom: 0.55rem;
}

.flywheel-continued-block .body-continued--from-flywheel {
  margin-top: 0 !important;
  padding-left: 0;
  border-left: none;
  padding-top: 0;
}

/* Ch.1: body under flywheel SVG — no left rule; text aligns with .doc-split__main (same as “Historically…” on prior page) */
.flywheel-continued-block.flywheel-continued-block--align-doc-main {
  border-left: none;
  padding-left: calc(var(--doc-aside-width) + 1.5rem);
}

/* Ch.3: opening line on a new page, continuing the prior section — match former main-column inset */
.body-continued--from-previous-page {
  margin-top: 0 !important;
  margin-left: calc(var(--doc-aside-width) + 1.5rem);
  padding-left: 1rem;
  border-left: 2px solid rgba(36, 118, 255, 0.22);
  max-width: none;
}

/* No-rail continuation after nested .doc-split--section body (two-column aside + body on prior page). */
.doc-split--no-rail .doc-split__main > .body-continued--from-previous-page {
  margin-left: calc(2 * (var(--doc-aside-width) + 1.5rem));
  padding-left: 0;
  border-left: none;
  max-width: none;
}

/* No-rail bridge: match section body on railed pages (nested .doc-split--section keeps two columns). */
.doc-split--no-rail .doc-split__main > .doc-main-bridge--section-body {
  margin-left: calc(2 * (var(--doc-aside-width) + 1.5rem));
}

/* No-rail continuation: Langdock section rows align with main column on railed opener (headings match prior page) */
.doc-split--no-rail .doc-split__main > .doc-split--section {
  margin-left: calc(var(--doc-aside-width) + 1.5rem);
}

/* Ch.5 (and similar): no-rail page but body should line up with railed .doc-split__main (duration, levels, what-it-takes…) */
.doc-split--no-rail.doc-split--main-inset > .doc-split__main {
  padding-left: calc(var(--doc-aside-width) + 1.5rem);
}

@media (max-width: 640px) {
  .flywheel-continued-block {
    padding-left: 0.85rem;
    border-left-width: 2px;
  }

  .flywheel-continued-block.flywheel-continued-block--align-doc-main {
    padding-left: 0;
    border-left: none;
  }

  .body-continued--from-previous-page {
    margin-left: 0;
    padding-left: 0.85rem;
  }

  .doc-split--no-rail .doc-split__main > .body-continued--from-previous-page {
    margin-left: 0;
    padding-left: 0;
  }

  .doc-split--no-rail .doc-split__main > .doc-main-bridge--section-body {
    margin-left: 0;
  }

  .doc-split--no-rail .doc-split__main > .doc-split--section {
    margin-left: 0;
  }

  .doc-split--no-rail.doc-split--main-inset > .doc-split__main {
    padding-left: 0;
  }

  .doc-optim-callout {
    grid-template-columns: 1fr;
  }

  .doc-split--no-rail .doc-split__main > .doc-optim-callout {
    margin-left: 0;
    width: 100%;
    max-width: none;
  }

  .doc-optim-callout__text {
    order: 1;
  }

  .doc-optim-callout__media {
    order: 2;
  }

  .doc-optim-callout__img {
    max-height: none;
    object-position: center;
  }

  .doc-optim-callout.doc-optim-callout--section-span .doc-optim-callout__img {
    max-height: none;
  }

  .doc-split__main--section p.doc-callout--bg-alt-block,
  .doc-callout.doc-callout--bg-alt {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    padding: 1.2rem 1.25rem 1.25rem;
  }
}

.graph-placeholder--at-a-glance {
  margin-bottom: 2rem;
}

/* At a glance: dual-line interactive chart (no card — uses page background) */
.ag-dual-chart {
  margin: 0 0 2rem;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Match readable width of prose and quote (same column as body copy). */
#at-a-glance .ag-dual-chart,
#at-a-glance .at-a-glance-prose,
#at-a-glance .testimonial--at-a-glance {
  max-width: 65ch;
  width: 100%;
  box-sizing: border-box;
}

#at-a-glance .ag-dual-chart {
  margin-bottom: 0.75rem;
}

.ag-dual-chart__head {
  margin-bottom: 0.75rem;
}

.ag-dual-chart__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 400 !important;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--color-accent);
}

.ag-dual-chart__frame {
  position: relative;
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: crosshair;
}

.ag-dual-chart__svg {
  display: block;
  width: 100%;
  height: auto;
  min-height: 200px;
}

.ag-dual-chart__legend-text {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
}

.ag-dual-chart__handle {
  cursor: crosshair;
  pointer-events: none;
  transition: transform 0.15s ease;
  transform-box: fill-box;
  transform-origin: center;
}

.ag-dual-chart__frame:hover .ag-dual-chart__handle {
  transform: scale(1.06);
}

.ag-dual-chart__handle--performance {
  fill: #ffffff;
  stroke: var(--color-accent-deep);
  stroke-width: 2.25;
}

.ag-dual-chart__handle--budget {
  fill: #ffffff;
  stroke: #64748b;
  stroke-width: 2.25;
}

.ag-dual-chart__handle:focus {
  outline: none;
}

.ag-dual-chart__handle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .ag-dual-chart__handle {
    transition: none;
  }

  .ag-dual-chart__frame:hover .ag-dual-chart__handle {
    transform: none;
  }
}

/* Chapter 3 Pareto chart: same layout language as .ag-dual-chart (grid, axes, title) */
.pareto-chart {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.pareto-chart__head {
  margin-bottom: 0.4rem;
}

.pareto-chart__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 400 !important;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--color-accent);
}

.pareto-chart__frame {
  position: relative;
  overflow: visible;
  border: none;
  border-radius: 0;
  background: transparent;
}

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

.graphic-container--pareto .pareto-svg {
  min-height: min(64vw, 440px);
}

.brand-impact-svg {
  display: block;
  width: 100%;
  height: auto;
  min-height: 200px;
  overflow: visible;
}

.graphic-container--pareto .brand-impact-svg {
  min-height: min(48vw, 320px);
}

.brand-impact-svg__axis-label {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  fill: #525558;
}

.brand-impact-svg__legend-text {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 500;
  fill: #3d4654;
}

.pareto-svg__axis-label {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  fill: #525558;
}

.pareto-svg__callout-strong {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  fill: var(--color-accent-deep);
}

.pareto-svg__callout-sub {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  fill: var(--color-ink-muted);
}

.pareto-svg__bar {
  cursor: pointer;
}

.pareto-svg__bar rect {
  transition:
    transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
    filter 0.2s ease;
  transform-origin: 50% 100%;
  transform-box: fill-box;
  filter: drop-shadow(0 1px 2px rgba(36, 54, 92, 0.06));
}

.pareto-svg__bar:hover rect {
  transform: scale(1.08);
  filter: drop-shadow(0 4px 12px rgba(36, 118, 255, 0.22));
}

@media (prefers-reduced-motion: reduce) {
  .pareto-svg__bar rect {
    transition: none;
  }

  .pareto-svg__bar:hover rect {
    transform: none;
    filter: drop-shadow(0 1px 2px rgba(36, 54, 92, 0.06));
  }
}

/* Chapter 1 flywheel: same title/frame pattern as at-a-glance + pareto */
.flywheel-chart {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.flywheel-chart__head {
  margin-bottom: 0.75rem;
}

.flywheel-chart__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 400 !important;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--color-accent);
}

.flywheel-chart__frame {
  position: relative;
  overflow: visible;
  border: none;
  border-radius: 0;
  background: transparent;
  cursor: default;
}

.flywheel-svg__marker-num {
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 700;
  fill: #005fea;
  letter-spacing: -0.02em;
}

.flywheel-svg__marker-body {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  fill: #525558;
}

.flywheel-svg__badge-num {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  fill: #005fea;
}

.flywheel-svg__hub-text {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  fill: var(--color-ink);
}

/* Chapter 3 compounding chart: at-a-glance layout + pointer-driven gap line */
.compounding-chart {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.compounding-chart__head {
  margin-bottom: 0.75rem;
}

.compounding-chart__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 400 !important;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--color-accent);
}

.compounding-chart__frame {
  position: relative;
  overflow: visible;
  border: none;
  border-radius: 0;
  background: transparent;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: crosshair;
}

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

.graphic-container--compounding .compounding-svg {
  min-height: min(52vw, 320px);
}

.compounding-svg__legend-text,
.compounding-svg__axis-caption {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  fill: #525558;
}

.compounding-gap-label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
}

.compounding-handle {
  transition: transform 0.15s ease;
  transform-box: fill-box;
  transform-origin: center;
}

.compounding-chart__frame:hover .compounding-handle {
  transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .compounding-handle {
    transition: none;
  }

  .compounding-chart__frame:hover .compounding-handle {
    transform: none;
  }
}

.at-a-glance-prose p {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--color-ink);
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.at-a-glance-prose p:last-child {
  margin-bottom: 0;
}

.testimonial--at-a-glance {
  margin-top: 2.25rem;
  padding-top: 0;
  padding-bottom: 0;
  border: none;
}

.content-block {
  padding: 1rem 1.1rem;
  margin-bottom: 0.85rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

.content-block:last-child {
  margin-bottom: 0;
}

.content-block p {
  margin-bottom: 0 !important;
  font-size: 0.92rem;
  line-height: 1.68;
}

.content-block--accent-edge {
  border-left: 3px solid var(--color-accent);
  background: linear-gradient(90deg, rgba(36, 118, 255, 0.06) 0%, #ffffff 48%);
}

.content-block--muted {
  background: var(--color-bg-alt);
  border-style: dashed;
}

.content-block--minimal {
  padding: 0.65rem 0.85rem;
  border: none;
  background: transparent;
  font-style: italic;
}

.section-head {
  margin-bottom: 1.75rem;
}

.section-head .section-title {
  margin-bottom: 0.35rem;
}

.at-a-glance-body .section-head {
  margin-bottom: 1.5rem;
}

/* ═══════════════════════════════════════
   PLACEHOLDERS & MEDIA
   ═══════════════════════════════════════ */

.media-placeholder {
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px dashed rgba(35, 35, 36, 0.22);
  background:
    linear-gradient(135deg, rgba(36, 118, 255, 0.04) 0%, transparent 50%),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 8px,
      rgba(35, 35, 36, 0.03) 8px,
      rgba(35, 35, 36, 0.03) 9px
    );
}

.media-placeholder--spread {
  min-height: clamp(220px, 42vh, 380px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
}

.media-placeholder__tag {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-light);
}

.media-placeholder__desc {
  margin-top: 0.65rem;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--color-ink-muted);
  max-width: 42ch;
}

.graph-placeholder {
  margin: 0 0 2rem;
  padding: 1rem 1.1rem 1.15rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #fbfcfe;
}

.graph-placeholder--compact {
  margin-top: 0.5rem;
  margin-bottom: 0;
}

.graph-placeholder__cap {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.85rem;
}

.graph-placeholder__label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-light);
}

.graph-placeholder__hint {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--color-ink-muted);
}

.graph-placeholder__frame {
  position: relative;
  height: 140px;
  border-radius: 4px;
  background: #fff;
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.graph-placeholder__frame--blocks {
  height: 72px;
  background: repeating-linear-gradient(
    90deg,
    #f0f2f6,
    #f0f2f6 18%,
    #e8ebf0 18%,
    #e8ebf0 36%
  );
}

.graph-placeholder__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(35, 35, 36, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(35, 35, 36, 0.06) 1px, transparent 1px);
  background-size: 36px 28px;
  opacity: 0.5;
}

.graph-placeholder__line {
  position: absolute;
  left: 8%;
  right: 8%;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, var(--color-accent), rgba(36, 118, 255, 0.2));
  opacity: 0.85;
}

.graph-placeholder__line--a {
  bottom: 38%;
  transform-origin: left center;
  transform: rotate(-8deg);
}

.graph-placeholder__line--b {
  bottom: 58%;
  background: linear-gradient(90deg, var(--color-ink-light), rgba(141, 146, 158, 0.25));
  transform: rotate(3deg);
}

.output-placeholder {
  margin-top: 2rem;
  padding: 1.15rem 1.2rem;
  border-radius: 8px;
  border: 1px dashed rgba(35, 35, 36, 0.28);
  background: var(--color-bg-alt);
}

.output-placeholder__label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-light);
}

.output-placeholder__hint {
  margin-top: 0.5rem;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--color-ink-muted);
}

.output-placeholder__mock {
  margin-top: 1rem;
  padding: 1rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.output-placeholder__line {
  display: block;
  height: 6px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--color-border), var(--color-bg-alt));
  width: 100%;
}

.output-placeholder__line--short {
  width: 62%;
}

/* ═══════════════════════════════════════
   FULL-BLEED SPREAD PAGE
   ═══════════════════════════════════════ */

.spread-page {
  width: 100%;
  min-height: var(--spread-min-h);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.spread-page--illustration {
  min-height: auto;
}

.spread-page__bleed {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--page-padding);
  padding-top: 2.5rem;
  padding-bottom: 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

/* Pull quote only: photo is full-bleed above */
.spread-page__bleed--below-photo {
  padding-top: 2.75rem;
}

.spread-page__pull {
  max-width: min(52ch, 100%);
}

/* Same horizontal measure as .page / .chapter-cover (not full playbook column). */
.spread-page__figure--photo {
  position: relative;
  margin: 0 auto;
  width: min(100%, var(--page-max));
  max-width: var(--page-max);
  border-radius: 12px;
  overflow: hidden;
  text-align: center;
}

/* Fit within page column + max height; scale proportionally (no cover crop). */
.spread-page__figure--photo img {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: min(72vh, 38rem);
  margin: 0 auto;
}

.spread-page__photo-caption {
  position: absolute;
  bottom: 0.65rem;
  left: 0.75rem;
  margin: 0;
  max-width: calc(100% - 1.5rem);
  text-align: left;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.25;
  color: #fff;
}

.spread-page__pull-quote {
  margin: 0;
  padding: 1.5rem 1.5rem 1.6rem 1.35rem;
  border: none;
  border-left: 3px solid var(--color-accent);
  border-radius: 0 8px 8px 0;
  background: linear-gradient(
    90deg,
    rgba(36, 118, 255, 0.07) 0%,
    rgba(36, 118, 255, 0.02) 55%,
    transparent 100%
  );
  box-shadow: 0 1px 0 rgba(35, 35, 36, 0.06);
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 2.8vw, 2.5rem);
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -0.025em;
  color: var(--color-ink);
}

.spread-page__pull-quote__lead {
  color: var(--color-ink-muted);
}

.spread-page__pull-quote__accent {
  color: var(--color-accent);
}

/* ═══════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════ */

@media (max-width: 640px) {
  .cover-inner {
    padding: var(--page-padding-mobile);
    padding-top: 2rem;
  }

  .cover-content {
    padding-bottom: 8rem;
  }

  .cover-logo {
    margin-bottom: 4rem;
  }

  .page {
    padding: var(--page-padding-mobile);
    padding-top: 2rem;
    padding-bottom: 3rem;
  }

  #next-chapter.next-chapter-region > .page:first-child {
    padding-top: calc(2rem + 1.35rem);
  }

  #next-chapter ~ #about,
  .page.content-page + #about {
    padding-top: calc(2.5rem + 1.35rem);
  }

  .page-header {
    margin-bottom: 2rem;
  }

  .facts-grid,
  .impact-strip-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .facts-grid {
    gap: 1.1rem;
  }

  .facts-figures {
    padding: 1.25rem 1.2rem 1.35rem;
  }

  .impact-strip-inner {
    padding-left: var(--page-padding-mobile);
    padding-right: var(--page-padding-mobile);
  }

  .fact-number {
    font-size: 1.65rem;
  }

  .impact-strip-number {
    font-size: 2.05rem;
  }

  .about-page__product-pair {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .case-example {
    padding: 1.25rem;
  }

  .graphic-container {
    padding: 2rem var(--page-padding-mobile);
    margin: 2rem 0;
  }

  .graphic-container--flywheel {
    padding-left: var(--page-padding-mobile);
    padding-right: var(--page-padding-mobile);
  }

  .graphic-container--pareto,
  .graphic-container:has(.pareto-svg),
  .graphic-container--brand-impact {
    padding-top: 2.65rem;
    padding-bottom: 2.35rem;
  }

  .graphic-container--pareto.graphic-container--brand-impact {
    margin-top: 0.85rem;
    margin-bottom: 0.35rem;
    padding-top: 0.85rem;
    padding-bottom: 0.3rem;
  }

  .doc-split__main--section > .graphic-container--pareto.graphic-container--brand-impact + .doc-split--section {
    margin-top: 0.85rem;
  }

  .doc-split__main > .graphic-container--pareto:not(.graphic-container--brand-impact) {
    margin-top: 0.75rem;
    margin-bottom: 0.6rem;
    padding-top: 1.2rem;
    padding-bottom: 1rem;
  }

  .doc-split__main > .graphic-container--pareto:not(.graphic-container--brand-impact) + .doc-split--section {
    margin-top: 0.9rem;
  }

  .graphic-container--compact {
    padding: 1.35rem var(--page-padding-mobile);
  }

  .duration-block {
    gap: 0.3rem;
  }

  .chapter-cover {
    min-height: 45vh;
  }

  .doc-split {
    grid-template-columns: 1fr;
    gap: 0.45rem;
  }

  .doc-split__aside {
    padding-top: 0;
  }

  .doc-split--section {
    grid-template-columns: 1fr;
    row-gap: 0.5rem;
  }

  .doc-split__aside--section .content-heading {
    max-width: none;
  }

  .spread-page__bleed {
    padding-left: var(--page-padding-mobile);
    padding-right: var(--page-padding-mobile);
  }

  .spread-page__figure--photo {
    width: min(100%, var(--page-max));
    padding-left: var(--page-padding-mobile);
    padding-right: var(--page-padding-mobile);
    box-sizing: border-box;
  }

  .spread-page__figure--photo img {
    max-height: min(62vh, 34rem);
  }

  .testimonial-quote {
    font-size: 1.05rem;
  }

  .testimonial--with-portrait {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .testimonial--with-portrait .testimonial-copy {
    width: 100%;
  }

  .testimonial--with-portrait .testimonial-author {
    align-items: center;
  }

  .testimonial-author--with-logo {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .testimonial-author--with-logo .testimonial-author__text {
    align-items: center;
  }
}

@media (max-width: 480px) {
  .cover-title {
    font-size: 2.4rem;
  }

  .chapter-cover-title {
    font-size: 2rem;
  }

  .section-title {
    font-size: 1.8rem;
  }

  .letter-page .salutation {
    font-size: 1.8rem;
  }

  .quote-typewriter {
    font-size: 1.6rem;
  }

  .key-takeaway {
    padding: 1.25rem 1.15rem 1.35rem 1.1rem;
  }
}

/* ═══════════════════════════════════════
   PRINT STYLES
   ═══════════════════════════════════════ */

@media print {
  body {
    background: #fff;
  }

  .chapter-rail {
    display: none !important;
  }

  .playbook-shell {
    display: block;
  }

  .spread-page {
    page-break-inside: avoid;
  }

  .key-takeaway {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .impact-strip {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .cover {
    min-height: auto;
    page-break-after: always;
  }

  .dedication-spacer {
    min-height: 0;
    margin-top: 0;
    page-break-after: always;
    background: #fff;
  }

  .dedication-panel {
    position: relative;
    min-height: auto;
    padding: 4rem 1.5rem;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    mask-image: none;
    -webkit-mask-image: none;
  }

  .page {
    page-break-inside: avoid;
  }

  .chapter-cover {
    page-break-before: always;
    page-break-after: always;
  }

  .quote-page {
    page-break-before: always;
    page-break-after: always;
  }

  .quote-cursor {
    display: none !important;
  }
}