@font-face {
  font-family: 'EB Garamond';
  src: url('../fonts/EBGaramond-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('../fonts/EBGaramond-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 800; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('../fonts/EBGaramond-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/SpaceGrotesk-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/SpaceGrotesk-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/SpaceGrotesk-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/SpaceGrotesk-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/SpaceGrotesk-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
/* ─── TOKENS ──────────────────────────────────────────────── */
:root {
  --font-display: 'EB Garamond', Garamond, Georgia, serif;
  --font-body:    'Space Grotesk', 'DM Sans', system-ui, sans-serif;
  --uguisu:  #5E6B22;
  --spring:  #A8C060;
  --peach:   #E0A07A;
  --gold:    #C89820;
  --rawsilk: #F2EAD8;
  --dark:    #1A1608;
  --mid:     #8A8270;
  --nav-h: 64px;
  --max-w: 1180px;
  --section-pad: 96px 24px;
  --radius: 8px;
  --accent:      #5E6B22;
  --accent-light: #A8C060;
  --fg-secondary:  #3A3010;
  --fg-tertiary:   #6A6030;
  --bg-surface:    #FAF6EE;
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.45, 0, 0.55, 1);
  --duration-fast:   120ms;
  --duration-normal: 220ms;
  --duration-slow:   380ms;
  --shadow-md:     0 4px 8px rgba(26, 22, 8, 0.10), 0 2px 4px rgba(26, 22, 8, 0.06);
  --border-light:  rgba(94, 107, 34, 0.18);
  --border-medium: rgba(94, 107, 34, 0.32);
  --page-bg:     #F2EAD8;
  --hero-bg:     #F2EAD8;
}

[data-audience="individual"] {
  --accent:       #E0A07A;
  --accent-light: #EEC0A4;
  --page-bg:      #F9F2E8;
  --hero-bg:      #F9F2E8;
}

/* ─── RESET ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--rawsilk);
  color: var(--dark);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

/* ─── UTILITIES ───────────────────────────────────────────── */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 32px; }
.container--narrow { max-width: 760px; margin: 0 auto; padding: 0 32px; }

.label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--uguisu);
  display: block;
  margin-bottom: 20px;
}
[data-audience="individual"] .label { color: var(--accent); }

h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  line-height: 1.15;
  font-size: clamp(38px, 5vw, 62px);
}
h2 {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 500;
  line-height: 1.25;
  font-size: clamp(24px, 3vw, 36px);
}
h2.declarative {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
h3 {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 500;
  line-height: 1.3;
  font-size: clamp(16px, 2vw, 22px);
}
h4 {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 500;
  line-height: 1.4;
  font-size: 16px;
}

.headline-secondary {
  color: var(--uguisu);
  display: block;
  font-size: 0.9em;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
}
[data-audience="individual"] .headline-secondary { color: var(--accent); }

p { margin-bottom: 1.25em; }
p:last-child { margin-bottom: 0; }
a { color: var(--uguisu); text-decoration: underline; text-underline-offset: 3px; }
strong { font-weight: 600; }

/* ─── BUTTONS ─────────────────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  padding: 12px 24px;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--duration-normal) var(--ease-out), color var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out);
  border: 1.5px solid transparent;
  white-space: nowrap;
}
.btn--primary { background: var(--uguisu); color: var(--rawsilk); border-color: var(--uguisu); }
.btn--primary:hover { background: #4a5419; border-color: #4a5419; color: var(--rawsilk); }
[data-audience="individual"] .btn--primary { background: var(--accent); border-color: var(--accent); }
[data-audience="individual"] .btn--primary:hover { background: #C07850; border-color: #C07850; }
.btn--ghost { background: transparent; color: var(--dark); border-color: rgba(26,22,8,0.3); }
.btn--ghost:hover { border-color: var(--dark); }

/* ─── NAV ─────────────────────────────────────────────────── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  border-left: 5px solid var(--uguisu);
}

.nav-top {
  background: var(--dark);
  padding: 0 32px;
  height: 64px;
  display: flex;
  align-items: center;
  transition: padding 300ms var(--ease-in-out), height 300ms var(--ease-in-out);
}

nav.scrolled .nav-top { height: 56px; }
nav.scrolled { border-bottom: 1px solid rgba(168,192,96,0.15); }

/* Wordmark */
.nav-wordmark {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-decoration: none;
  cursor: pointer;
  flex-shrink: 0;
}

.nav-logo-top {
  display: flex;
  align-items: baseline;
  gap: 0;
}

.nav-wm-peren {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 32px;
  color: var(--peach);
  letter-spacing: -0.02em;
  line-height: 1;
  transition: font-size 300ms var(--ease-in-out);
}
.nav-wm-os {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 20px;
  color: var(--spring);
  letter-spacing: 0.02em;
  line-height: 1;
  transition: font-size 300ms var(--ease-in-out);
}

/* Strapline — sits below the PerenOS wordmark */
.nav-wm-strapline {
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--spring);
  opacity: 0.55;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  max-height: 14px;
  transition: opacity var(--duration-normal) var(--ease-in-out), max-height var(--duration-normal) var(--ease-in-out);
}

nav.scrolled .nav-wm-peren { font-size: 24px; }
nav.scrolled .nav-wm-os    { font-size: 16px; }
nav.scrolled .nav-wm-strapline { opacity: 0; max-height: 0; }

/* Dots — footer only, kept in HTML there */
.nav-wm-dots { display: flex; gap: 5px; align-items: center; margin-left: 10px; }
.nav-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* Controls */
.nav-controls { display: flex; align-items: center; gap: 0; margin-left: auto; }

/* Audience toggle */
.audience-toggle {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 3px;
  margin: 0 auto 0 48px;
}
nav a, .audience-btn, .lang-btn { text-decoration: none; }
.audience-btn {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  padding: 7px 18px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: rgba(242,234,216,0.5);
  cursor: pointer;
  transition: background 200ms, color 200ms;
  white-space: nowrap;
}
.audience-btn.active { background: var(--uguisu); color: var(--rawsilk); }
[data-audience="individual"] .audience-btn.active { background: var(--peach); color: var(--dark); }

/* Lang toggle */
.lang-toggle { display: flex; gap: 2px; margin: 0 24px 0 auto; }
.lang-btn {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 10px;
  border: none;
  background: transparent;
  color: rgba(242,234,216,0.4);
  cursor: pointer;
  border-radius: 3px;
  transition: color 150ms;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lang-btn.active { color: var(--spring); }

/* Nav CTA */
.nav-cta { flex-shrink: 0; }
.nav-cta .btn {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
}
.nav-cta .btn--primary { background: var(--uguisu); border-color: var(--uguisu); color: var(--rawsilk); }
.nav-cta .btn--primary:hover { background: #4a5419; border-color: #4a5419; color: var(--rawsilk); }

/* ─── PAGE SECTIONS ───────────────────────────────────────── */
.page { display: none; }
.page.active { display: block; }
section { padding: var(--section-pad); }
.page-offset { padding-top: var(--nav-h); }

/* ─── VISUAL PLACEHOLDER ──────────────────────────────────── */
.visual-placeholder {
  background: rgba(94,107,34,0.04);
  border: 1px dashed rgba(94,107,34,0.25);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mid);
  font-size: 11px;
  font-family: var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  width: 100%;
  text-align: center;
  padding: 12px;
}
.ind-placeholder {
  background: rgba(224,160,122,0.04);
  border-color: rgba(224,160,122,0.2);
  color: rgba(224,160,122,0.55);
}

/* ─── HERO ─────────────────────────────────────────────────── */
.hero { padding: 80px 32px 96px; background: var(--rawsilk); }
[data-audience="individual"] .hero { background: var(--hero-bg); }

.hero-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.hero-content {
  max-width: 100%;
}

/* Reasoning strip — full-width horizontal below hero h1 */
.hero-reasoning-strip {
  width: 100%;
  background: #FAF6EE;
  border: 1px solid rgba(94,107,34,0.15);
  border-radius: 12px;
  padding: 32px 36px 24px;
  margin-bottom: 40px;
}
.hero-reasoning-strip .strip-header {
  display: flex;
  align-items: baseline;
  margin-bottom: 28px;
  border-left: 3px solid var(--uguisu);
  padding-left: 14px;
}
.hero-reasoning-strip .strip-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--uguisu);
  line-height: 1.1;
}
.strip-stages {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}
.strip-stage {
  padding: 0 28px 0 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.strip-stage:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 56px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid rgba(94,107,34,0.2);
}
.strip-stage-icon {
  width: 112px;
  height: 112px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 16px;
}
.strip-stage-icon svg {
  width: 90px;
  height: 90px;
}
.strip-stage-title {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
  margin-bottom: 8px;
  display: block;
}
.strip-stage-body {
  font-size: 12px;
  line-height: 1.65;
  color: var(--fg-secondary);
  margin-bottom: 10px;
}
.strip-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.strip-tag {
  font-size: 12px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.strip-footer {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid rgba(94,107,34,0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hero-eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--uguisu);
  margin-bottom: 28px;
  line-height: 1.8;
}
[data-audience="individual"] .hero-eyebrow { color: var(--accent); }
.hero h1 { margin-bottom: 28px; color: var(--dark); }
.hero-sub { font-size: 17px; line-height: 1.7; color: #3A3010; margin-bottom: 36px; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-decoration { position: relative; display: flex; align-items: center; justify-content: center; }
.hero-decoration--svg { max-width: 480px; width: 100%; }
.hero-decoration--svg svg { width: 100%; height: auto; display: block; }

/* ─── PROFESSIONAL PAGE COMPONENTS ───────────────────────── */
.impact { background: var(--dark); padding: var(--section-pad); color: var(--rawsilk); }
.impact .label { color: var(--spring); }
.impact h2 { color: var(--rawsilk); }
.impact .headline-secondary { color: var(--peach); }
.impact-headline { margin-bottom: 56px; }
.impact-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.impact-col h3 { font-size: 20px; color: var(--spring); margin-bottom: 16px; }
.impact-col p { font-size: 15px; color: rgba(242,234,216,0.8); line-height: 1.7; }
.impact-col p + p { margin-top: 10px; }
.impact-divider { width: 32px; height: 1px; background: rgba(168,192,96,0.4); margin-bottom: 20px; }

.gap-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.gap-body { font-size: 16px; line-height: 1.8; color: var(--fg-secondary); }
.gap-stats { display: flex; flex-direction: column; gap: 40px; }
.stat-number { font-family: var(--font-display); font-style: italic; font-size: clamp(52px, 6vw, 80px); color: var(--gold); line-height: 1; display: block; margin-bottom: 8px; }
.stat-label { font-size: 13px; line-height: 1.6; color: var(--mid); }
.gap-footnotes { margin-top: 48px; display: flex; flex-direction: column; gap: 10px; }
.gap-footnote { font-size: 11px; line-height: 1.6; color: var(--mid); opacity: 0.6; }
.gap-footnote a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.reasoning { background: var(--rawsilk); }
.reasoning-intro { max-width: 640px; margin-bottom: 64px; }
.reasoning-intro h2 { margin-bottom: 20px; }
.reasoning-intro p { font-size: 17px; line-height: 1.75; }

.ecology-two-col {
  display: grid; grid-template-columns: 1fr 32px 1fr; gap: 0;
  margin-bottom: 48px; background: #FAF6EE;
  border: 1px solid rgba(94,107,34,0.15); border-radius: 8px; overflow: hidden; align-items: stretch;
}
.ecology-col-a, .ecology-col-b { padding: 28px 32px; }
.ecology-col-a { border-right: 1px solid rgba(94,107,34,0.1); }
.ecology-col-b { background: rgba(94,107,34,0.03); }
.ecology-arrow { display: flex; align-items: center; justify-content: center; color: var(--spring); font-size: 20px; background: #FAF6EE; }
.ecology-step-label { display: block; font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--uguisu); margin-bottom: 12px; }
.ecology-col-a p, .ecology-col-b p { font-size: 14px; line-height: 1.7; color: #3A3010; margin: 0; }

.pillars { border-top: 1px solid rgba(94,107,34,0.2); }
.pillar { border-bottom: 1px solid rgba(94,107,34,0.2); }
.pillar-header { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; cursor: pointer; gap: 24px; user-select: none; }
.pillar-title { font-family: var(--font-body); font-weight: 500; font-size: 16px; color: var(--dark); display: flex; align-items: center; gap: 20px; }
.pillar-num { font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--uguisu); flex-shrink: 0; width: 36px; }
.pillar-chevron { width: 20px; height: 20px; flex-shrink: 0; color: var(--uguisu); transition: transform var(--duration-normal) var(--ease-in-out); }
.pillar.open .pillar-chevron { transform: rotate(180deg); }
.pillar-body { display: none; padding: 0 0 28px 56px; font-size: 15px; line-height: 1.75; color: #3A3010; max-width: 700px; }
.pillar.open .pillar-body { display: block; }

.reasoning-chain { margin-top: 64px; padding: 40px 40px 32px; background: var(--dark); border-radius: 8px; }
.chain-label { font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--spring); margin-bottom: 32px; display: block; }
.chain-nodes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.chain-node { padding-right: 24px; position: relative; }
.chain-node:not(:last-child)::after { content: '→'; position: absolute; right: 4px; top: 6px; color: var(--gold); font-size: 18px; }
.chain-node-title { font-family: var(--font-display); font-style: italic; font-size: 18px; color: var(--spring); margin-bottom: 10px; display: block; }
.chain-node-text { font-size: 13px; color: rgba(242,234,216,0.7); line-height: 1.6; }
.chain-refusal { margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(168,192,96,0.2); font-size: 13px; color: rgba(242,234,216,0.6); font-style: italic; }
.chain-refusal strong { color: var(--peach); font-style: normal; }

.serves { background: rgba(94,107,34,0.04); }
.serves-intro { max-width: 560px; margin-bottom: 48px; }
.serves-intro h2 { margin-bottom: 16px; }
.serves-intro p { font-size: 16px; color: var(--fg-secondary); }
.tabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid rgba(94,107,34,0.2); margin-bottom: 0; }
.tab-btn { font-family: var(--font-body); font-size: 14px; font-weight: 500; padding: 14px 20px; border: none; background: transparent; color: var(--mid); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out); white-space: nowrap; flex: 1 1 auto; justify-content: center; min-width: 0; }
.tab-btn.active { color: var(--uguisu); border-bottom-color: var(--uguisu); }
/* Active tab inherits its panel's roundel colour (matches the pipeline diagram's
   per-stage language). Underline + icon take the saturated hue; the dark/olive
   tiles also tint the label, lighter tiles keep the label readable on silk. */
.tabs .tab-btn:nth-child(1).active { color: #5E6B22; border-bottom-color: #5E6B22; }
.tabs .tab-btn:nth-child(2).active { color: #1A1608; border-bottom-color: #1A1608; }
.tabs .tab-btn:nth-child(3).active { color: #C89820; border-bottom-color: #C89820; }
.tabs .tab-btn:nth-child(4).active { color: #5E6B22; border-bottom-color: #E0A07A; }
.tabs .tab-btn:nth-child(5).active { color: #5E6B22; border-bottom-color: #A8C060; }
/* Each tab icon is a mini segment roundel echoing its panel tile and the
   pipeline diagram. The glyph uses currentColor, so `color` is the linework
   and `background` is the tile; light hues stay legible behind the tile. */
.tabs .tab-btn svg { padding: 9px; border-radius: 11px; box-sizing: content-box; transition: background var(--duration-normal) var(--ease-out); }
.tabs .tab-btn:nth-child(1) svg { color: #F2EAD8; background: #5E6B22; }
.tabs .tab-btn:nth-child(2) svg { color: #A8C060; background: #1A1608; }
.tabs .tab-btn:nth-child(3) svg { color: #1A1608; background: #C89820; }
.tabs .tab-btn:nth-child(4) svg { color: #5E6B22; background: #E0A07A; }
.tabs .tab-btn:nth-child(5) svg { color: #5E6B22; background: #A8C060; }
.tab-panel { display: none; padding: 48px 0 0; }
.tab-panel.active { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.tab-argument h3 { font-size: 22px; margin-bottom: 20px; color: var(--dark); }
.tab-argument p { font-size: 16px; line-height: 1.75; color: #3A3010; }
.tab-detail h4 { font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--uguisu); margin-bottom: 20px; }
.tab-list { list-style: none; margin-bottom: 36px; }
.tab-list li { font-size: 14px; line-height: 1.7; padding: 10px 0 10px 16px; border-bottom: 1px solid rgba(94,107,34,0.1); color: #3A3010; position: relative; }
.tab-list li::before { content: '—'; position: absolute; left: 0; color: var(--spring); font-size: 12px; }
.pressure-item { border-bottom: 1px solid rgba(94,107,34,0.12); }
.pressure-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; cursor: pointer; gap: 16px; }
.pressure-title { font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--dark); }
.pressure-body { display: none; padding: 0 0 16px; font-size: 14px; line-height: 1.7; color: var(--mid); }
.pressure-item.open .pressure-body { display: block; }

.regulatory { background: var(--dark); color: var(--rawsilk); }
.regulatory .label { color: var(--spring); }
.regulatory h2 { color: var(--rawsilk); }
.regulatory .headline-secondary { color: var(--peach); }
.reg-intro { max-width: 720px; margin-bottom: 56px; }
.reg-intro p { font-size: 16px; line-height: 1.8; color: rgba(242,234,216,0.8); }
.reg-note { font-size: 14px; color: rgba(242,234,216,0.55); margin-top: 16px; font-style: italic; }
.timeline-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 48px; border-radius: 8px; }
.timeline-table { width: 100%; min-width: 780px; border-collapse: collapse; font-size: 13px; }
.timeline-table th { text-align: left; padding: 14px 18px; font-family: var(--font-body); font-weight: 500; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--spring); background: rgba(255,255,255,0.04); border-bottom: 1px solid rgba(168,192,96,0.2); }
.timeline-table td { padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,0.07); vertical-align: top; line-height: 1.6; color: rgba(242,234,216,0.8); }
.timeline-table tr:last-child td { border-bottom: none; }
.timeline-table tr:hover td { background: rgba(255,255,255,0.025); }
.timeline-table .year-cell { font-family: var(--font-display); font-style: italic; font-size: 18px; color: var(--gold); white-space: nowrap; width: 90px; }
.timeline-table .framework-cell { font-weight: 500; color: var(--rawsilk); width: 220px; }
.timeline-table .source-cell a { color: var(--spring); font-size: 12px; text-decoration: none; opacity: 0.8; }
.timeline-table .source-cell a:hover { opacity: 1; text-decoration: underline; }
.frameworks-accordion { border: 1px solid rgba(168,192,96,0.2); border-radius: 8px; overflow: hidden; }
.frameworks-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; background: rgba(255,255,255,0.04); border: none; cursor: pointer; color: var(--rawsilk); font-family: var(--font-body); font-size: 14px; font-weight: 500; }
.frameworks-trigger .count { background: var(--uguisu); color: var(--rawsilk); font-size: 11px; padding: 3px 10px; border-radius: 12px; margin-left: 12px; }
.frameworks-list { display: none; padding: 24px; border-top: 1px solid rgba(168,192,96,0.2); }
.frameworks-list.open { display: block; }
.frameworks-items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.frameworks-items li { list-style: none; font-size: 13px; color: rgba(242,234,216,0.75); padding-left: 14px; position: relative; }
.frameworks-items li::before { content: '·'; position: absolute; left: 0; color: var(--spring); font-size: 18px; line-height: 1; top: 2px; }

.timeline-accordion { border: 1px solid rgba(168,192,96,0.2); border-radius: 8px; overflow: hidden; margin-bottom: 48px; }
.timeline-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; background: rgba(255,255,255,0.04); border: none; cursor: pointer; color: var(--rawsilk); font-family: var(--font-body); font-size: 14px; font-weight: 500; gap: 16px; }
.timeline-collapsible { display: none; border-top: 1px solid rgba(168,192,96,0.2); }
.timeline-collapsible.open { display: block; }
.count { background: var(--uguisu); color: var(--rawsilk); font-size: 11px; padding: 3px 10px; border-radius: 12px; margin-left: 12px; }

/* ─── RESEARCH CTA / FORM ─────────────────────────────────── */
.research-cta { background: var(--rawsilk); }
.research-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: start; }
.research-copy h2 { margin-bottom: 20px; }
.research-copy p { font-size: 16px; line-height: 1.8; color: var(--fg-secondary); }
.research-note { font-size: 13px; color: var(--mid); margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(94,107,34,0.15); font-style: italic; }
.form-field { margin-bottom: 20px; }
.form-field label { display: block; font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--uguisu); margin-bottom: 8px; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; padding: 12px 16px; background: #FAF6EE;
  border: 1px solid rgba(94,107,34,0.25); border-radius: var(--radius);
  font-family: var(--font-body); font-size: 14px; color: var(--dark);
  transition: border-color 200ms; outline: none; -webkit-appearance: none;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--uguisu); }
.form-field textarea { resize: vertical; min-height: 100px; }
.form-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235E6B22' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px;
}
.form-optional { font-size: 11px; color: var(--mid); margin-left: 8px; font-style: italic; text-transform: none; letter-spacing: 0; font-weight: 400; }
.form-success { display: none; padding: 20px; background: rgba(94,107,34,0.1); border: 1px solid rgba(94,107,34,0.25); border-radius: var(--radius); font-size: 15px; color: var(--uguisu); margin-top: 16px; }

/* ─── INDIVIDUAL CTA ──────────────────────────────────────── */
.individual-cta { background: #F9F2E8; border-top: 1px solid rgba(224,160,122,0.25); }
.individual-cta .form-field label { color: var(--accent); }
.individual-cta .form-field input:focus, .individual-cta .form-field select:focus, .individual-cta .form-field textarea:focus { border-color: var(--accent); }
.individual-cta .btn--primary { background: var(--accent); border-color: var(--accent); }
.individual-cta .btn--primary:hover { background: #C07850; border-color: #C07850; }
.individual-cta .research-note { border-top-color: rgba(224,160,122,0.2); }
.individual-cta .form-field input, .individual-cta .form-field select, .individual-cta .form-field textarea { border-color: rgba(224,160,122,0.25); }

/* ─── INDIVIDUAL PAGE — NEW SECTION STYLES ───────────────── */

/* Hero — individual */
.ind-hero-single { padding: 80px 32px 48px; background: var(--hero-bg); }
.ind-hero-single .hero-inner { align-items: start; }
.ind-hero-q {
  font-size: 18px;
  line-height: 1.7;
  color: #3A3010;
  margin-bottom: 32px;
  font-style: italic;
  font-family: var(--font-display);
}
.ind-hero-body {
  max-width: var(--max-w);
  margin: 40px auto 0;
  padding: 0 32px;
}
.ind-hero-body p { font-size: 16px; line-height: 1.8; color: #3A3010; max-width: 640px; }

/* Who it serves */
.ind-serves { background: rgba(224,160,122,0.04); padding: var(--section-pad); }
.ind-opening { font-size: 18px; line-height: 1.7; color: var(--fg-secondary); max-width: 680px; margin-bottom: 40px; }
.ind-vignette-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-bottom: 40px; }
.ind-vignette-caption { font-size: 13px; line-height: 1.6; color: var(--mid); margin-top: 12px; }

/* For Whom — driver + scale (Direction 2) */
.ind-driver-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.ind-driver-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 24px 22px 26px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: border-color 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.ind-driver-card:hover { border-color: rgba(94, 107, 34, 0.4); }
.ind-driver-art {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #F4EDE0;
  border: 1px solid rgba(94, 107, 34, 0.12);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.ind-driver-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  color: var(--gold);
  margin-bottom: 6px;
  letter-spacing: 0.04em;
}
.ind-driver-label {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.45;
  color: var(--uguisu);
  margin-bottom: 10px;
  letter-spacing: -0.005em;
}
.ind-driver-label strong { font-weight: 600; }
.ind-driver-reveal {
  display: block;
  font-weight: 400;
  max-height: 0;
  margin-top: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 320ms var(--ease-out), opacity 220ms var(--ease-out), margin-top 280ms var(--ease-out);
}
.ind-driver-card:hover .ind-driver-reveal,
.ind-driver-card:focus-within .ind-driver-reveal {
  max-height: 320px;
  opacity: 1;
  margin-top: 14px;
}
.ind-driver-desc {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg-secondary);
}

.ind-axis-divider {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 40px 0 24px;
}
.ind-axis-divider-line { flex: 1; height: 1px; background: rgba(94, 107, 34, 0.2); }
.ind-axis-divider-label {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
  font-weight: 500;
}

.ind-scale-strip {
  margin-top: 32px;
  padding: 24px 28px;
  background: rgba(94, 107, 34, 0.04);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
}
.ind-scale-strip-label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--uguisu);
  letter-spacing: 0.02em;
  flex-shrink: 0;
  margin: 0;
}
.ind-scale-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
}
.ind-scale-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 20px;
  background: var(--bg-surface);
  color: var(--uguisu);
  border: 1px solid rgba(94, 107, 34, 0.18);
  white-space: nowrap;
  flex: 1;
  text-align: center;
}
.ind-scale-chip-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  color: var(--gold);
  line-height: 1;
}

@media (max-width: 980px) {
  .ind-driver-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .ind-driver-grid { grid-template-columns: 1fr; }
}
.ind-closing { font-size: 16px; line-height: 1.8; color: var(--fg-secondary); max-width: 720px; }

/* How it works — explainers */
.ind-works { background: var(--rawsilk); padding: var(--section-pad); }
.ind-explainer-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; margin: 0 auto 48px; max-width: 1000px; }
.ind-explainer-box { background: #FAF6EE; border: 1px solid rgba(224,160,122,0.15); border-radius: 8px; overflow: hidden; padding: 8px 4px 12px; }
.ind-explainer-box .ind-placeholder { border-radius: 0; border: none; border-bottom: 1px dashed rgba(224,160,122,0.2); }
.ind-explainer-box h3 { font-family: var(--font-body); font-style: normal; font-weight: 500; font-size: 17px; color: var(--accent); margin: 20px 28px 14px; line-height: 1.3; letter-spacing: -0.01em; }
.ind-explainer-box p { font-size: 14.5px; line-height: 1.7; color: #3A3010; margin: 0 28px 16px; }
.ind-explainer-box p.lede { font-size: 15.5px; line-height: 1.6; color: var(--fg-secondary); font-weight: 450; margin-bottom: 18px; }
.ind-explainer-box p:last-child { margin-bottom: 24px; }

.ind-explainer-box .ind-disclose { margin: 2px 28px 24px; }
.ind-explainer-box .ind-disclose > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--uguisu);
  padding: 4px 0;
  transition: color var(--duration-fast) var(--ease-out),
              gap var(--duration-normal) var(--ease-out);
}
.ind-explainer-box .ind-disclose > summary::-webkit-details-marker { display: none; }
.ind-explainer-box .ind-disclose > summary:hover {
  color: #4A551B;
  gap: 10px;
}
.ind-explainer-box .ind-disclose > summary:hover .ind-disclose-label-more,
.ind-explainer-box .ind-disclose > summary:hover .ind-disclose-label-less {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.ind-explainer-box .ind-disclose > summary:focus-visible {
  outline: 2px solid var(--uguisu);
  outline-offset: 3px;
  border-radius: 2px;
}
.ind-explainer-box .ind-disclose-chev {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--duration-normal) var(--ease-out);
  margin-top: -3px;
}
.ind-explainer-box .ind-disclose[open] .ind-disclose-chev {
  transform: rotate(-135deg);
  margin-top: 2px;
}
.ind-explainer-box .ind-disclose-label-less { display: none; }
.ind-explainer-box .ind-disclose[open] .ind-disclose-label-more { display: none; }
.ind-explainer-box .ind-disclose[open] .ind-disclose-label-less { display: inline; }
.ind-explainer-box .ind-disclose > p,
.ind-explainer-box .ind-disclose > p:last-child { margin: 14px 0 0; }

@media (prefers-reduced-motion: reduce) {
  .ind-explainer-box .ind-disclose-chev,
  .ind-explainer-box .ind-disclose > summary { transition: none; }
}
.ind-summary-line { border-top: 1px solid rgba(224,160,122,0.15); padding-top: 36px; }
.ind-summary-line p { font-size: 16px; line-height: 1.8; color: var(--fg-secondary); max-width: 680px; }

/* Commons — dark section */
.ind-commons { background: var(--dark); padding: var(--section-pad); color: var(--rawsilk); }
.ind-commons h2 { color: var(--rawsilk); margin-bottom: 32px; }
.ind-commons-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; margin-bottom: 56px; }
.ind-commons-text p { color: rgba(242,234,216,0.85); line-height: 1.8; }
.ind-bridge { color: var(--peach) !important; font-style: italic; }
.ind-italic-note { color: rgba(242,234,216,0.55) !important; font-style: italic; font-size: 15px !important; }

/* Commons steps */
.commons-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.commons-step { position: relative; }
.commons-step:not(:last-child)::after { content: ''; position: absolute; top: 20px; right: -16px; width: 32px; height: 1px; background: rgba(224,160,122,0.4); }
.step-num { font-family: var(--font-display); font-style: italic; font-size: 36px; color: var(--uguisu); opacity: 0.7; line-height: 1; margin-bottom: 16px; display: block; }
.commons-step h3 { font-size: 16px; margin-bottom: 10px; color: var(--rawsilk); font-weight: 500; letter-spacing: -0.01em; }
.commons-step p { font-size: 14px; line-height: 1.65; color: rgba(242,234,216,0.7); margin: 0; }

/* Why it matters */
.ind-why { background: rgba(224,160,122,0.05); padding: var(--section-pad); }
.ind-section-sub { font-family: var(--font-display); font-style: italic; font-size: 20px; color: rgba(224,160,122,0.8); margin-bottom: 0; }
.reasons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; margin-top: 48px; }
.reason { padding-top: 24px; border-top: 1px solid rgba(224,160,122,0.3); }
.reason-num { font-family: var(--font-display); font-style: italic; font-size: 38px; color: var(--uguisu); opacity: 0.7; line-height: 1; display: block; margin-bottom: 12px; }
.reason h3 { font-family: var(--font-body); font-style: normal; font-weight: 500; font-size: 20px; color: var(--dark); margin-bottom: 12px; letter-spacing: -0.01em; }
.reason p { font-size: 15px; line-height: 1.7; color: #3A3010; margin: 0; }

/* ─── INDIVIDUAL · OBSERVATION CYCLE DIAGRAM ─────────────────── */
/* Two-column layout: sticky pull-quote on the left, diagram on the right. */
.ind-cycle-wrap {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(0, 2.7fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
  margin: 48px auto 24px;
}
.ind-cycle-aside {
  align-self: center;          /* vertically centre against the figure */
  padding: 0;
  text-align: left;
}
.ind-cycle-heading {
  font-family: var(--font-display, var(--font-body));
  font-weight: 500;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--olive, #3A3010);
  margin: 0 0 14px;
  max-width: 22ch;
}
.ind-cycle-heading em {
  font-style: italic;
  font-weight: 500;
  color: var(--peach);
}
.ind-cycle-pullquote {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.65;
  letter-spacing: -0.005em;
  color: #3A3010;
  margin: 0;
  max-width: 32ch;
}
.ind-cycle-pullquote + .ind-cycle-pullquote {
  margin-top: 14px;
}
.ind-cycle-pullquote em {
  font-style: normal;
  font-weight: 600;
  color: var(--peach);
}

.ind-cycle {
  position: relative;
  width: 100%;
  max-width: 940px;
  margin: 0;
  aspect-ratio: 940 / 800;
  /* establish a query container so the node icons can scale with
     the diagram's actual rendered width (since the column is narrower
     than 940px in the side-by-side layout) */
  container-type: inline-size;
}
.ind-cycle-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* Each node is absolutely positioned by its icon centre.
   Coordinates match the SVG viewBox so the arrows line up. */
.ind-cycle-node {
  position: absolute;
  width: 178px;
  text-align: center;
  transform: translate(-50%, 0);
}

/* viewBox is 940 × 800. Each node icon centre maps to (left%, top%).
   top % positions the TOP of the icon (centre − icon-radius). */
.ind-cycle-node.n1 { left: 50.0%;  top: 11.75%; }  /* centre (470, 160) */
.ind-cycle-node.n2 { left: 74.3%;  top: 32.50%; }  /* centre (698, 326) */
.ind-cycle-node.n3 { left: 65.0%;  top: 66.00%; }  /* centre (611, 594) */
.ind-cycle-node.n4 { left: 35.0%;  top: 66.00%; }  /* centre (329, 594) */
.ind-cycle-node.n5 { left: 25.7%;  top: 32.50%; }  /* centre (242, 326) */

.ind-cycle-icon {
  position: relative;
  /* 132 / 940 ≈ 14.04% of the figure's rendered width — this keeps the
     icon's edge exactly tangent to the SVG arrow endpoints at every size. */
  width: clamp(96px, 14.04cqw, 132px);
  height: clamp(96px, 14.04cqw, 132px);
  margin: 0 auto 14px;
  border-radius: 50%;
  background: #FAF6EE;
  border: 1.5px solid rgba(94, 107, 34, 0.35);
  box-shadow: 0 1px 0 rgba(94, 107, 34, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ind-cycle-icon svg {
  width: 86%;
  height: 86%;
  display: block;
}
.ind-cycle-num {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #5E6B22;
  color: #FAF6EE;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #FAF6EE;
}

.ind-cycle-title {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: #5E6B22;
  margin: 0 0 4px;
}
.ind-cycle-sub {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12.5px;
  line-height: 1.45;
  color: #5E6B22;
  opacity: 0.7;
  margin: 0;
}

/* Tags: hidden by default, revealed on hover / focus / when the
   node has keyboard focus inside it. Keeps the default diagram clean
   while still surfacing the detail when invited. */
.ind-cycle-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-3px);
  transition: opacity 0.22s ease,
              max-height 0.32s ease,
              transform 0.22s ease,
              margin-top 0.22s ease;
}
.ind-cycle-node:hover .ind-cycle-tags,
.ind-cycle-node:focus-within .ind-cycle-tags {
  opacity: 1;
  max-height: 140px;
  margin-top: 10px;
  transform: translateY(0);
}
.ind-cycle-tags span {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #3F4815;
  background: #FAF6EE;
  border: 1px solid rgba(94, 107, 34, 0.4);
  border-radius: 999px;
  padding: 3px 8px;
  white-space: nowrap;
}

/* For the side nodes (n2 upper-right, n5 upper-left), the title would
   otherwise sit on the dashed guide ring. Position their text block
   beside the icon — outside the ring — instead. Width scales with the
   figure (~140 viewBox units of available space at full size). */
.ind-cycle-node.n2 .ind-cycle-text,
.ind-cycle-node.n5 .ind-cycle-text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(112px, 14.9cqw, 140px);
}
.ind-cycle-node.n2 .ind-cycle-text {
  /* offset = half-icon (matches icon's clamp size) + 14px gap */
  left: calc(50% + clamp(48px, 7.02cqw, 66px) + 14px);
  text-align: left;
}
.ind-cycle-node.n5 .ind-cycle-text {
  right: calc(50% + clamp(48px, 7.02cqw, 66px) + 14px);
  text-align: right;
}
.ind-cycle-node.n2 .ind-cycle-tags { justify-content: flex-start; }
.ind-cycle-node.n5 .ind-cycle-tags { justify-content: flex-end; }

/* Subtle hover affordance on the icon itself */
.ind-cycle-icon {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.ind-cycle-node:hover .ind-cycle-icon,
.ind-cycle-node:focus-within .ind-cycle-icon {
  transform: scale(1.035);
  box-shadow: 0 2px 10px rgba(94, 107, 34, 0.12);
  border-color: rgba(94, 107, 34, 0.5);
}

/* Tablet — stack aside above the diagram once the side-by-side
   layout starts squeezing the diagram column. */
@media (max-width: 1024px) {
  .ind-cycle-wrap {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .ind-cycle-aside {
    align-self: auto;
    text-align: center;
  }
  .ind-cycle-heading {
    margin-left: auto;
    margin-right: auto;
    max-width: 28ch;
  }
  .ind-cycle-pullquote {
    margin-left: auto;
    margin-right: auto;
    max-width: 56ch;
  }
}

/* Narrower nodes when the diagram itself becomes cramped */
@media (max-width: 900px) {
  .ind-cycle-node { width: 162px; }
  .ind-cycle-title { font-size: 14px; }
  .ind-cycle-sub { font-size: 12px; }
  .ind-cycle-tags span { font-size: 9.5px; padding: 2.5px 7px; }
}

/* Mobile — abandon the pentagon, stack vertically.
   The arrows + central motif are hidden; a slimmer vertical
   numbered list does the same narrative job. */
@media (max-width: 760px) {
  .ind-cycle {
    aspect-ratio: auto;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    margin: 40px auto 16px;
  }
  .ind-cycle-bg { display: none; }
  .ind-cycle-node,
  .ind-cycle-node.n1,
  .ind-cycle-node.n2,
  .ind-cycle-node.n3,
  .ind-cycle-node.n4,
  .ind-cycle-node.n5 {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    width: 100%;
    max-width: 320px;
  }
  .ind-cycle-icon { width: 120px; height: 120px; margin-bottom: 12px; }
  /* Reset the side-positioned text for n2 / n5 to the default flow. */
  .ind-cycle-node.n2 .ind-cycle-text,
  .ind-cycle-node.n5 .ind-cycle-text {
    position: static;
    transform: none;
    width: auto;
    text-align: center;
  }
  .ind-cycle-node.n2 .ind-cycle-tags,
  .ind-cycle-node.n5 .ind-cycle-tags { justify-content: center; }
  /* No hover on touch — always show tags */
  .ind-cycle-tags {
    opacity: 1;
    max-height: none;
    margin-top: 10px;
    transform: none;
    overflow: visible;
  }
  /* Subtle connector between stacked nodes */
  .ind-cycle-node + .ind-cycle-node {
    padding-top: 24px;
    background-image: linear-gradient(rgba(94, 107, 34, 0.35), rgba(94, 107, 34, 0.35));
    background-repeat: no-repeat;
    background-size: 1px 20px;
    background-position: top center;
  }
}

/* ─── TOAST ──────────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--dark); color: var(--rawsilk); font-size: 13px;
  padding: 12px 24px; border-radius: 24px; z-index: 2000;
  transition: transform 300ms ease; pointer-events: none;
  border: 1px solid rgba(168,192,96,0.3);
}
.toast.show { transform: translateX(-50%) translateY(0); }

/* ─── FOOTER ─────────────────────────────────────────────────── */
footer { background: var(--dark); padding: 40px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.footer-wordmark .nav-wm-peren { font-size: 24px; }
.footer-meta { font-size: 12px; color: rgba(242,234,216,0.45); text-align: right; line-height: 1.8; }
.footer-meta a { color: rgba(242,234,216,0.6); text-decoration: none; }
.footer-meta a:hover { color: var(--rawsilk); }
/* Footer strapline — keep below wordmark */
.footer-strapline { font-family: var(--font-body); font-size: 9px; font-weight: 400; letter-spacing: 0.12em; color: var(--spring); opacity: 0.6; display: block; margin-top: 4px; }

/* ─── FOCUS STATES ──────────────────────────────────────────── */
.btn:focus-visible {
  outline: 2px solid rgba(94, 107, 34, 0.40);
  outline-offset: 2px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid rgba(94, 107, 34, 0.40);
  outline-offset: 0;
}

/* ─── ANIMATIONS ─────────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page.active .hero h1, .page.active .hero .hero-eyebrow,
.page.active .hero .hero-sub, .page.active .hero .hero-ctas,
.page.active .hero .ind-hero-q { animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
.page.active .hero .hero-eyebrow { animation-delay: 0.05s; }
.page.active .hero h1            { animation-delay: 0.12s; }
.page.active .hero .hero-sub     { animation-delay: 0.22s; }
.page.active .hero .ind-hero-q   { animation-delay: 0.22s; }
.page.active .hero .hero-ctas    { animation-delay: 0.32s; }


/* ─── PHOTO TREATMENT ────────────────────────────────────────── */
/* All images get a warm, slightly desaturated treatment          */
/* that pulls photography toward the Raw Silk palette             */
img:not([src^="data:image/png"]) {
  filter: sepia(18%) saturate(85%) brightness(0.97) contrast(1.02);
}
/* Stronger treatment for full-bleed hero/feature images */
.ind-vignette img,
.ind-explainer-box img,
.ind-why > .container > img {
  filter: sepia(22%) saturate(80%) brightness(0.95) contrast(1.03);
}

/* ─── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Individual hero two-col stacks on mobile */
  #page-individual .hero > div > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  #page-individual .hero > div > div[style*="grid-template-columns:1fr 1fr"] img {
    height: 260px !important;
  }
  .hero-inner { gap: 0; }
  .strip-stages { grid-template-columns: 1fr 1fr; gap: 24px; }
  .strip-stage:not(:last-child)::after { display: none; }
  .impact-cols { grid-template-columns: 1fr; gap: 32px; }
  .gap-inner { grid-template-columns: 1fr; gap: 40px; }
  .tab-panel.active { grid-template-columns: 1fr; gap: 32px; }
  .research-grid { grid-template-columns: 1fr; gap: 48px; }
  .commons-steps { grid-template-columns: 1fr 1fr; }
  .commons-step::after { display: none; }
  .reasons { grid-template-columns: 1fr; }
  .chain-nodes { grid-template-columns: 1fr 1fr; gap: 24px; }
  .chain-node::after { display: none; }
  .frameworks-items { grid-template-columns: 1fr; }
  .ind-vignette-grid { grid-template-columns: 1fr; }
  .ind-explainer-grid { grid-template-columns: 1fr; }
  .ind-commons-cols { grid-template-columns: 1fr; gap: 40px; }
  .ecology-two-col { grid-template-columns: 1fr; }
  .ecology-arrow { display: none; }
  .ecology-col-a { border-right: none; border-bottom: 1px solid rgba(94,107,34,0.1); }
}

@media (max-width: 640px) {
  :root { --section-pad: 64px 16px; }
  /* In-flow on phones: a fixed multi-row header was covering the hero
     eyebrow. Relative positioning lets the hero sit naturally below it. */
  nav { position: relative; }
  .nav-top { height: auto; padding: 16px 16px; flex-wrap: wrap; gap: 16px; }
  .nav-wm-peren { font-size: 28px; }
  .nav-wm-os { font-size: 18px; }
  .nav-wm-strapline { display: none; }
  /* Audience switch is the primary control — full-width segmented on its
     own row; language + CTA share a row with guaranteed edge gutters so
     "Book a research call" can't clip off-screen. */
  .nav-controls { flex-wrap: wrap; gap: 12px; margin-left: 0; width: 100%; justify-content: space-between; align-items: center; }
  .audience-toggle { order: 1; width: 100%; margin: 0; }
  .audience-toggle .audience-btn { flex: 1; text-align: center; }
  .lang-toggle { order: 2; margin: 0; }
  .nav-cta { order: 3; }
  .container { padding: 0 16px; }
  /* Nav is in-flow on phones, so the fixed-nav offset is dead space —
     drop it and let a tight hero top padding set the rhythm. !important
     beats the later unconditional .hero clamp(72px…) rule. */
  .page-offset { padding-top: 0; }
  .hero { padding: 28px 16px 64px !important; }
  .ind-hero-body { padding: 0 16px; }
  .nav-cta .btn { font-size: 12px; padding: 10px 16px; }
  .tabs { gap: 0; }
  .tab-btn { padding: 12px 16px; font-size: 13px; }
  .commons-steps { grid-template-columns: 1fr; }
  .ind-why .why-graph { grid-template-columns: 1fr 1fr !important; }
  .chain-nodes { grid-template-columns: 1fr; }
}

/* Process diagram ("PerenOS reasons from your site conditions…") —
   inline-styled as a rigid 3-column grid; stack it on phones so the
   180px node circles and their captions don't overflow the card. */
@media (max-width: 760px) {
  .proc-card { padding: 24px 18px 22px !important; }
  .proc-head { flex-wrap: wrap; gap: 10px; }
  .proc-head h3 { font-size: 18px !important; }
  .proc-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .proc-line { display: none !important; }
}

/* ─── ECOLOGY SECTION ─────────────────────────────────────── */
.ecology-wrap { padding: 56px 24px; background: var(--rawsilk); }
.ecology-section { max-width: 960px; margin: 0 auto; }

.ecology-top {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  margin-bottom: 24px;
}

.eco-card {
  flex: 1;
  padding: 44px 36px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  border: 1px solid rgba(94,107,34,0.14);
  border-radius: 20px;
}
.eco-card.ecology { background: rgba(168,192,96,0.07); }
.eco-card.function { background: rgba(224,160,122,0.07); }

.eco-arrow {
  flex-shrink: 0;
  padding: 0 16px;
  font-size: 20px;
  color: var(--peach);
  opacity: 0.7;
  line-height: 1;
}

.eco-icon-wrap {
  width: 88px;
  height: 88px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.eco-card.ecology .eco-icon-wrap { background: rgba(168,192,96,0.18); border: 1.5px solid rgba(94,107,34,0.18); }
.eco-card.function .eco-icon-wrap { background: rgba(224,160,122,0.18); border: 1.5px solid rgba(224,160,122,0.3); }

.eco-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--uguisu);
}
.eco-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--dark);
}
.eco-body {
  font-size: 14px;
  line-height: 1.75;
  color: var(--fg-secondary);
  max-width: 340px;
}

.function-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
.fn-tile {
  background: #FAF6EE;
  border: 1px solid rgba(94,107,34,0.12);
  border-radius: 16px;
  padding: 28px 18px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  transition: box-shadow var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out);
}
.fn-tile:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.fn-tile-icon {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.fn-tile:nth-child(1) .fn-tile-icon { background: rgba(168,192,96,0.15); }
.fn-tile:nth-child(2) .fn-tile-icon { background: rgba(200,152,32,0.12); }
.fn-tile:nth-child(3) .fn-tile-icon { background: rgba(94,107,34,0.08); }
.fn-tile:nth-child(4) .fn-tile-icon { background: rgba(224,160,122,0.15); }
.fn-tile-text { font-size: 13px; line-height: 1.6; color: var(--fg-secondary); font-weight: 500; }

.ecology-note {
  background: rgba(94,107,34,0.05);
  border: 1px solid rgba(94,107,34,0.12);
  border-radius: 14px;
  padding: 24px 32px;
  text-align: center;
}
.ecology-note p { font-size: 13px; line-height: 1.75; color: var(--fg-secondary); max-width: 580px; margin: 0 auto; }
.ecology-note em { font-style: normal; font-weight: 600; color: var(--uguisu); }

/* Why-it-matters graph */
.why-graph {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 0;
  position: relative;
  margin-top: 56px;
  padding-top: 48px;
  border-top: 1px solid rgba(94,107,34,0.15);
}
.why-graph-line {
  position: absolute;
  top: 76px;
  left: calc(12.5% + 8px);
  right: calc(12.5% + 8px);
  height: 2px;
  background: rgba(94,107,34,0.15);
  z-index: 0;
}
.why-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 12px;
  position: relative;
  z-index: 1;
}
.why-node-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--uguisu);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  flex-shrink: 0;
}
.why-node-circle--light { background: var(--spring); }
.why-node-circle span {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--rawsilk);
  line-height: 1;
}
.why-node-circle--light span { color: var(--dark); }
.why-node h3 { font-family: var(--font-body); font-style: normal; font-weight: 500; font-size: 15px; color: var(--dark); margin-bottom: 10px; line-height: 1.3; letter-spacing: -0.01em; }
.why-node p { font-size: 13px; line-height: 1.65; color: var(--fg-tertiary); margin: 0; }
.why-graph-tagline { font-family: var(--font-body); font-weight: 600; font-size: 16px; color: var(--dark); text-align: center; margin-top: 40px; line-height: 1.5; }
.why-graph-tagline span { color: var(--accent); }

/* Hero diagram */
.hero-diagram {
  width: 100%;
  background: #FAF6EE;
  border: 1px solid rgba(94,107,34,0.12);
  border-radius: 12px;
  padding: 32px 40px 28px;
  margin-top: 40px;
}
.hero-diagram-header {
  margin-bottom: 36px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(94,107,34,0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hero-diagram-header h3 { font-style: normal; font-weight: 500; font-size: 20px; color: var(--uguisu); line-height: 1.3; margin: 0; letter-spacing: -0.01em; }
.hero-diagram-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  flex-shrink: 0;
  margin-left: 24px;
}
.hero-diagram-wordmark .wm-peren { font-family: var(--font-display); font-style: italic; font-size: 14px; color: var(--uguisu); }
.hero-diagram-wordmark .wm-os { font-family: var(--font-body); font-weight: 500; font-size: 10px; color: var(--uguisu); letter-spacing: 0.3px; }
.hero-diagram-nodes {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 0;
  position: relative;
}
.hero-diagram-line {
  position: absolute;
  top: 72px;
  left: calc(16.6% + 8px);
  right: calc(16.6% + 8px);
  height: 1.5px;
  background: rgba(94,107,34,0.18);
  z-index: 0;
}
.hero-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 16px;
  position: relative;
  z-index: 1;
}
.hero-node-icon {
  position: relative;
  width: 120px;
  height: 120px;
  margin-bottom: 16px;
  flex-shrink: 0;
}
.hero-node-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: #F4EDE0;
  border: 2px solid rgba(94,107,34,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-node-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--uguisu);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--uguisu);
}
.hero-node-badge--light { background: var(--spring); border-color: var(--uguisu); }
.hero-node-badge span { font-family: var(--font-body); font-weight: 600; font-size: 15px; color: white; line-height: 1; }
.hero-node-badge--light span { font-size: 12px; color: var(--dark); }
.hero-node-title { font-family: var(--font-body); font-weight: 600; font-size: 16px; color: var(--uguisu); margin-bottom: 12px; line-height: 1.3; }
.hero-node-tags { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.hero-tag {
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 20px;
  background: rgba(94,107,34,0.07);
  color: var(--uguisu);
  border: 1px solid rgba(94,107,34,0.18);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .function-tiles { grid-template-columns: 1fr 1fr; }
  .why-graph { grid-template-columns: 1fr 1fr; }
  .why-graph-line { display: none; }
  .hero-diagram-nodes { grid-template-columns: 1fr; }
  .hero-diagram-line { display: none; }
}
@media (max-width: 640px) {
  .ecology-top { flex-direction: column; }
  .eco-card { width: 100%; }
  .eco-arrow { padding: 12px 0; transform: rotate(90deg); }
  .why-graph { grid-template-columns: 1fr; }
}


/* ════════════════════════════════════════════════════════════════
   PIPELINE COMPONENT  (formerly inline; migrated from index.html)
   ──────────────────────────────────────────────────────────────── */

/* Pipeline section wrapper */
.pipeline { padding: 0 24px 96px; }
.pipeline-inner { max-width: var(--max-w); margin: 0 auto; }

/* ─── Pipeline component ─────────────────────────────────────── */
.ppl {
  font-family: var(--font-body);
  background: #FAF6EE;
  border-radius: 14px;
  padding: 32px 36px 24px;
  border: 1px solid rgba(94, 107, 34, 0.15);
  width: 100%;
}

/* Title */
.ppl-title {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  color: var(--uguisu);
  margin: 0 0 28px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  border-left: 3px solid var(--uguisu);
  padding-left: 14px;
}

/* ─── I/O rows ────────────────────────────────────────────────── */
.ppl-io {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.ppl-io-hd {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  width: 84px;
  padding-top: 3px;
}

.ppl-io-icon {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ico-in  { background: rgba(94, 107, 34, 0.13); }
.ico-out { background: rgba(200, 152, 32, 0.15); }

.ppl-io-lbl {
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(26, 22, 8, 0.42);
}

.ppl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  flex: 1;
  align-content: flex-start;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
  line-height: 1.4;
}

.chip svg { flex-shrink: 0; }

.chip-in {
  background: rgba(94, 107, 34, 0.09);
  color: #3a4412;
  border: 0.5px solid rgba(94, 107, 34, 0.22);
}

.chip-out {
  background: rgba(200, 152, 32, 0.1);
  color: #7a5800;
  border: 0.5px solid rgba(200, 152, 32, 0.28);
}

.chip-dark {
  background: rgba(26, 22, 8, 0.06);
  color: #3A3010;
  border: 0.5px solid rgba(26, 22, 8, 0.14);
}

.chip-gold {
  background: rgba(200, 152, 32, 0.1);
  color: #7a5800;
  border: 0.5px solid rgba(200, 152, 32, 0.22);
}

/* ─── Dividers ────────────────────────────────────────────────── */
.div {
  height: 1px;
  background: rgba(94, 107, 34, 0.13);
  margin: 16px 0;
}

/* ─── Stage grid ──────────────────────────────────────────────── */
.stages {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}

/* ─── Stage card ──────────────────────────────────────────────── */
.stage {
  background: transparent;
  border: none;
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 28px 0 0;
  position: relative;
}

.stage:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 56px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid rgba(94,107,34,0.2);
}

.stage-acc { display: none; }

.stage-head {
  padding: 0 0 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  width: 100%;
}

/* Icon roundel */
.stage-ico {
  width: 112px;
  height: 112px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stage-ico svg {
  width: 90px;
  height: 90px;
}

.i1 { background: var(--uguisu); }
.i2 { background: var(--dark); }
.i3 { background: var(--gold); }
.i4 { background: var(--peach); }

/* Number + title row */
.stage-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.stage-num { display: none; }

.stage-title {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
  margin: 0;
  display: block;
}

.stage:nth-child(1) .stage-title { color: var(--uguisu); }
.stage:nth-child(2) .stage-title { color: #3A3010; }
.stage:nth-child(3) .stage-title { color: #9A7010; }
.stage:nth-child(4) .stage-title { color: #C07850; }

/* Example block */
.stage-ex {
  padding: 0 0 10px;
  font-size: 12px;
  line-height: 1.65;
  color: rgba(26, 22, 8, 0.58);
  width: 100%;
}

.stage-ex strong {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(26, 22, 8, 0.3);
  margin-bottom: 3px;
}

/* Tags */
.stage-tags {
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: 100%;
}

.tag {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 20px;
  white-space: nowrap;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.t1 { background: rgba(94, 107, 34, 0.09);  color: #3a4412; border: 0.5px solid rgba(94, 107, 34, 0.2); }
.t2 { background: rgba(26, 22, 8, 0.06);    color: var(--dark); border: 0.5px solid rgba(26, 22, 8, 0.14); }
.t3 { background: rgba(200, 152, 32, 0.1);  color: #7a5800; border: 0.5px solid rgba(200, 152, 32, 0.22); }
.t4 { background: rgba(224, 160, 122, 0.13); color: #9A4020; border: 0.5px solid rgba(224, 160, 122, 0.28); }

/* ─── Stage-level IO chips ─────────────────────────────────────── */
.stage-io-row { width: 100%; }
.stage-io-lbl {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(26, 22, 8, 0.42);
  margin-bottom: 7px;
}
.stage-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

/* ─── Epistemic refusal ───────────────────────────────────────── */
.refusal {
  padding: 11px 15px;
  background: rgba(26, 22, 8, 0.04);
  border-radius: 8px;
  border-left: 2.5px solid rgba(26, 22, 8, 0.18);
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

.refusal-ico {
  flex-shrink: 0;
  margin-top: 1px;
  opacity: 0.3;
}

.refusal-txt {
  font-size: 11px;
  color: rgba(26, 22, 8, 0.52);
  line-height: 1.55;
  margin: 0;
}

.refusal-txt strong {
  font-weight: 500;
  color: var(--dark);
}

.ppl-example {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid rgba(200, 152, 32, 0.32);
  background: rgba(200, 152, 32, 0.08);
  padding: 14px 0 16px;
  margin-top: 22px;
  border-radius: 4px;
}

.ppl-example-col {
  padding: 0 12px;
  border-right: 1px solid rgba(200, 152, 32, 0.18);
}

.ppl-example-col:last-child {
  border-right: none;
}

.ppl-example-label {
  display: block;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #C89820;
  margin-bottom: 6px;
}

.ppl-example-text {
  font-size: 11px;
  font-style: italic;
  color: rgba(26, 22, 8, 0.75);
  line-height: 1.5;
}

.ppl-example-text strong {
  font-style: normal;
  font-weight: 600;
  color: #1A1608;
}

.ppl-example-text .ex-metric {
  font-style: normal;
  font-weight: 500;
  color: #C89820;
}

/* ─── Footer ──────────────────────────────────────────────────── */
.ppl-footer {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ppl-fn {
  font-size: 9.5px;
  color: rgba(26, 22, 8, 0.3);
  font-style: italic;
}

.ppl-logo { line-height: 1; }
.ppl-logo em   { font-family: var(--font-display); font-style: italic; font-size: 14px; color: var(--uguisu); }
.ppl-logo span { font-family: var(--font-body); font-weight: 500; font-size: 10.5px; color: var(--uguisu); letter-spacing: 0.3px; }

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 720px) {
  .stages { grid-template-columns: 1fr 1fr; gap: 24px; }
  .stage { padding: 0; }
  .stage:not(:last-child)::after { display: none; }
}

@media (max-width: 520px) {
  .ppl { padding: 18px; }
  .stages { grid-template-columns: 1fr; gap: 32px; }
  .stage { padding: 0; text-align: left; align-items: flex-start; }
  .stage-head { flex-direction: row; align-items: flex-start; gap: 16px; }
  .ppl-io { flex-direction: column; gap: 8px; }
  .ppl-io-hd { width: auto; }
}


/* ════════════════════════════════════════════════════════════════
   GLOBAL POLISH PASS (overrides) — typography & spacing rhythm
   Visual/structural improvements only; no copy changes.
   ──────────────────────────────────────────────────────────────── */

:root {
  /* Tighter, more deliberate vertical rhythm */
  --section-y: clamp(72px, 9vw, 128px);
  --section-pad: var(--section-y) 32px;
  /* Measure for running text */
  --measure: 62ch;
  --measure-narrow: 48ch;
  /* Eyebrow / label */
  --eyebrow-size: 11.5px;
  --eyebrow-tracking: 0.14em;
}

/* Type scale — refine clamps for a calmer, more institutional feel */
h1 {
  font-size: clamp(40px, 5.4vw, 68px);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
h2.declarative {
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.015em;
}
h3 {
  letter-spacing: -0.005em;
}

/* Body & measure */
p { text-wrap: pretty; }

/* Section base — keep --section-pad but ensure containers respect measure */
section { padding: var(--section-pad); }

/* ─── HERO ───────────────────────────────────────────────────── */
.hero {
  padding: clamp(72px, 9vw, 120px) 32px clamp(64px, 8vw, 112px);
  border-bottom: 1px solid rgba(94, 107, 34, 0.08);
}
.hero-eyebrow {
  font-size: var(--eyebrow-size);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--uguisu);
  margin-bottom: 28px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.hero-eyebrow::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}
.hero h1 { margin-bottom: 36px; max-width: 18ch; }
.hero h1 .headline-secondary { display: block; margin-top: 4px; }

.hero-content > p { max-width: var(--measure); }
.hero-eyebrow { max-width: none; }
.hero-lede {
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.55;
  color: var(--dark);
  margin-bottom: 18px;
  font-weight: 400;
}
.hero-supporting {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--fg-secondary);
  margin-bottom: 0;
}

/* ─── PIPELINE (full section spacing) ────────────────────────── */
.pipeline {
  padding: 0 24px clamp(72px, 9vw, 128px);
  background: var(--rawsilk);
}
.pipeline-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  /* Pull pipeline up so it visually anchors below the hero */
  margin-top: calc(-1 * clamp(32px, 4vw, 56px));
  position: relative;
  z-index: 1;
}
.ppl {
  padding: clamp(28px, 3vw, 44px) clamp(24px, 3vw, 44px) clamp(22px, 2.5vw, 32px);
  border-radius: 12px;
  border: 1px solid rgba(94, 107, 34, 0.18);
  background: #FBF7EE;
  box-shadow: 0 1px 0 rgba(94, 107, 34, 0.04), 0 24px 56px -32px rgba(58, 48, 16, 0.18);
}
.ppl-title {
  font-size: clamp(18px, 1.6vw, 22px);
  margin-bottom: clamp(28px, 3vw, 36px);
  color: var(--dark);
  font-weight: 500;
}

/* ─── INTRO BLOCKS — consistent eyebrow + h2 + lede pattern ──── */
.impact-headline,
.reasoning-intro,
.serves-intro,
.reg-intro,
.research-copy {
  max-width: 56ch;
  margin-bottom: clamp(48px, 6vw, 72px);
}
.impact-headline { max-width: 820px; }
.reasoning-intro,
.serves-intro { max-width: 820px; }
.impact-headline p { max-width: var(--measure); }
.reasoning-intro p,
.serves-intro p,
.reg-intro p,
.research-copy p {
  font-size: clamp(15.5px, 1.2vw, 17px);
  line-height: 1.7;
  color: var(--fg-secondary);
  max-width: var(--measure);
  margin-bottom: 1em;
}
.regulatory .reg-intro p,
.impact .impact-headline p {
  color: rgba(242, 234, 216, 0.78);
}

/* eyebrow / label tightening */
.label {
  font-size: var(--eyebrow-size);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 18px;
  display: inline-block;
}

/* ─── IMPACT ─────────────────────────────────────────────────── */
.impact-cols { gap: clamp(40px, 4vw, 64px); }
.impact-col h3 {
  font-size: 18px;
  letter-spacing: 0.005em;
  margin-bottom: 14px;
  font-weight: 500;
}
.impact-col p {
  font-size: 14.5px;
  line-height: 1.72;
}
.impact-col ul {
  font-size: 14.5px;
  line-height: 1.72;
  color: rgba(242,234,216,0.8);
  padding-left: 1.4em;
  margin: 0;
}
.impact-col ul li {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  line-height: inherit;
}
.impact-divider {
  width: 24px;
  height: 1px;
  background: rgba(168, 192, 96, 0.5);
  margin-bottom: 18px;
}

/* ─── REASONING ──────────────────────────────────────────────── */
.reasoning-intro p { max-width: 60ch; }

/* ─── GAP — give the headline + body proper measure, fix grid ─ */
.gap-inner {
  gap: clamp(48px, 6vw, 96px);
  align-items: start;
}
.gap-copy h2 { margin-bottom: 28px; max-width: 18ch; }
.gap-body {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--fg-secondary);
  margin-bottom: 1em;
  max-width: 52ch;
}
.gap-stats { gap: 36px; }
.stat-number { margin-bottom: 6px; }
.stat-label {
  font-size: 13.5px;
  line-height: 1.65;
  max-width: 44ch;
}
.gap-footnotes { margin-top: 12px; gap: 8px; }
.gap-footnote { font-size: 11.5px; line-height: 1.55; }

/* ─── SERVES ─────────────────────────────────────────────────── */
.serves-intro h2 { margin-bottom: 18px; }

/* ─── REGULATORY ─────────────────────────────────────────────── */
.reg-intro { max-width: 64ch; }

/* ─── RESEARCH CTA ───────────────────────────────────────────── */
.research-grid { gap: clamp(48px, 6vw, 96px); }
.research-copy h2 { margin-bottom: 22px; max-width: 22ch; }

/* ─── BUTTONS — calmer, more institutional ───────────────────── */
.btn,
.btn-primary,
.btn-secondary {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.005em;
  padding: 12px 22px;
  border-radius: 6px;
}

/* ─── Smaller things ─────────────────────────────────────────── */
.headline-secondary { font-style: italic; }
a { text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* Mobile rhythm */
@media (max-width: 720px) {
  :root {
    --section-y: 72px;
  }
  .hero h1 { max-width: none; }
  .gap-inner { grid-template-columns: 1fr; }
  .research-grid { grid-template-columns: 1fr; }
}


/* ════════════════════════════════════════════════════════════════
   PASS 2 — VISUAL UPGRADE
   Hero topo · section rhythm · numbered rail · pipeline polish ·
   stat-led gap · references aside · refined dark sections.
   ──────────────────────────────────────────────────────────────── */

:root {
  --tonal-silk:  #EFE6D2;
  --rule:        rgba(94, 107, 34, 0.18);
  --rule-strong: rgba(94, 107, 34, 0.32);
  --on-dark-1: #F2EAD8;
  --on-dark-2: rgba(242, 234, 216, 0.78);
  --on-dark-3: rgba(242, 234, 216, 0.55);
}

/* ─── 1. HERO topographic background + signature feel ────────── */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero-bg-topo {
  position: absolute;
  inset: 0;
  z-index: -1;
  color: rgba(94, 107, 34, 0.18);
  pointer-events: none;
}
.hero-bg-topo svg {
  width: 100%;
  height: 100%;
  display: block;
}
.hero-bg-topo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(242,234,216,0.4) 0%,
    rgba(242,234,216,0) 28%,
    rgba(242,234,216,0) 90%,
    rgba(242,234,216,0.32) 100%);
}

/* ─── 2. Section background rhythm ───────────────────────────── */
/* default raw silk; alternate tonal silk for separation;
   keep .impact + .regulatory dark (already so). */
body { background: var(--rawsilk); }
.reasoning { background: var(--tonal-silk); }
.gap       { background: var(--rawsilk); }
.serves    { background: var(--tonal-silk); }
.research-cta { background: var(--rawsilk); }

/* Soft 1px separator between adjacent silk-tone sections so the
   shift in hue isn't ambiguous. Dark sections don't need it. */
.gap, .reasoning, .serves, .research-cta {
  border-top: 1px solid var(--rule);
}

/* ─── 3. Numbered section rail — removed ────────────────────── */

/* ─── 4. Pipeline component — quieter, more unified ──────────── */
.pipeline { background: var(--rawsilk); }
.ppl {
  background: #FBF7EE;
  border: 1px solid var(--rule);
  box-shadow: 0 1px 0 rgba(94,107,34,0.04), 0 28px 60px -36px rgba(58,48,16,0.22);
}
/* Each icon roundel carries its own stage colour (uguisu / dark / gold / peach),
   per .i1–.i4 rules above. */
/* Recolour the SVG strokes to per-stage accent. The component icons
   draw with hard-coded stroke fills, so we recolour via filter overlay
   isn't reliable; instead use accent border under each roundel. */
.stage { padding: 0 20px; }
.stage::before { display: none; }
.stage:nth-child(1) { --accent-color: var(--uguisu); }
.stage:nth-child(2) { --accent-color: var(--spring); }
.stage:nth-child(3) { --accent-color: var(--gold); }
.stage:nth-child(4) { --accent-color: var(--peach); }
.stage-title { color: var(--uguisu) !important; font-weight: 500; }

/* Connector — thin horizontal line behind roundels with a single
   chevron mid-gap, replacing the small triangle ::after */
.stages { position: relative; }
.stages::before {
  content: "";
  position: absolute;
  top: 56px; /* vertical centre of 112px roundel (no header offset now) */
  left: 12.5%;
  right: 12.5%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0,
    var(--peach) 8%,
    var(--peach) 92%,
    transparent 100%);
  z-index: 0;
}
.stage { position: relative; z-index: 1; background: transparent; }
.stage:not(:last-child)::after {
  /* keep the chevron, but smaller and at the line's height */
  top: 51px;
  right: 0;
  border-left-color: var(--peach);
}
@media (max-width: 720px) {
  .stages::before { display: none; }
}

/* Chips — unify into a single quiet style with leading dot */
.chip {
  background: rgba(94, 107, 34, 0.05) !important;
  color: var(--dark) !important;
  border: 1px solid var(--rule) !important;
  font-size: 11.5px;
  font-weight: 400;
  padding: 4px 10px 4px 9px;
}
.chip svg { display: none; }
.chip::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--uguisu);
  margin-right: 7px;
  vertical-align: 1px;
}
.stage:nth-child(1) .chip::before { background: var(--uguisu); }
.stage:nth-child(2) .chip::before { background: var(--spring); }
.stage:nth-child(3) .chip::before { background: var(--gold); }
.stage:nth-child(4) .chip::before { background: var(--peach); }

/* ─── 5. Gap section — stat-led ─────────────────────────────── */
.gap-inner {
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: start;
}
.gap-stats { gap: clamp(48px, 5vw, 64px); }
.stat-item {
  border-top: 1px solid var(--rule);
  padding-top: 14px;
  display: grid;
  grid-template-columns: minmax(240px, 0.9fr) 1.3fr;
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
}
.stat-number {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(56px, 6.6vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--gold);
  display: block;
  white-space: nowrap;
}
.stat-label {
  font-size: 14px;
  line-height: 1.65;
  color: var(--fg-secondary);
  max-width: none;
  padding-top: 12px;
}
@media (max-width: 720px) {
  .stat-item { grid-template-columns: 1fr; gap: 12px; }
  .stat-label { padding-top: 0; }
}

/* ─── 6. References aside ───────────────────────────────────── */
.references {
  background: var(--rawsilk);
  border-top: 1px solid var(--rule);
  padding: clamp(56px, 6vw, 88px) 32px clamp(48px, 5vw, 72px);
}
.references > .container {
  max-width: 920px;
  margin: 0 auto;
}
.references-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.references-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: ref;
  display: grid;
  gap: 16px;
}
.references-list li {
  counter-increment: ref;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--mid);
  padding-left: 32px;
  position: relative;
}
.references-list li::before {
  content: counter(ref);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-body);
  font-feature-settings: "tnum";
  font-size: 11px;
  font-weight: 500;
  color: var(--uguisu);
  letter-spacing: 0.04em;
}
.references-list a { color: var(--fg-secondary); }
.references-list em { font-family: var(--font-display); font-style: italic; }

/* in-text superscript references */
sup.ref {
  font-family: var(--font-body);
  font-size: 0.6em;
  vertical-align: super;
  margin-left: 2px;
  color: var(--uguisu);
  font-feature-settings: "tnum";
}
sup.ref a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding: 0 1px;
  transition: color var(--duration-fast) var(--ease-in-out), background var(--duration-fast) var(--ease-in-out);
}
sup.ref a:hover {
  color: var(--gold);
  background: rgba(200,152,32,0.12);
}
.references-list li:target {
  background: rgba(200,152,32,0.14);
  outline: 2px solid rgba(200,152,32,0.4);
  outline-offset: 4px;
  border-radius: 3px;
  transition: background var(--duration-normal) var(--ease-in-out), outline-color var(--duration-normal) var(--ease-in-out);
}

/* ─── 7. Bump declarative h2 size ────────────────────────────── */
h2.declarative {
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 820px;
}

/* ─── 8. Regulatory dark layout ──────────────────────────────── */
.regulatory {
  border-top: 1px solid rgba(242,234,216,0.06);
}
.regulatory .reg-intro p { color: var(--on-dark-2); }
/* lift the inline icon block; less cramped */
.regulatory .reg-intro > div[style*="display:flex"] {
  gap: 28px !important;
  margin-bottom: 40px !important;
}

/* ─── 9. Nav lockup tightening ───────────────────────────────── */
.nav-wordmark .nav-wm-peren { letter-spacing: -0.01em; }
.nav-wordmark .nav-wm-os    { letter-spacing: 0.04em; margin-left: 1px; }
/* tighten the supporting tagline beneath wordmark */
.nav-wordmark .nav-tagline,
.nav-wordmark + .nav-tagline,
.nav-wordmark span:not([class]) {
  font-size: 9.5px;
  letter-spacing: 0.16em;
  opacity: 0.55;
}

/* ─── Final, mobile rhythm ───────────────────────────────────── */
@media (max-width: 720px) {
  .gap-inner { grid-template-columns: 1fr; }
  section[data-section]:not(.hero):not(.pipeline) > .container::before {
    margin-bottom: 24px;
  }
}

/* ════════════════════════════════════════════════════════════════
   SECTION 03 — REASONING CARDS
   Append this block to the end of styles.css.

   The old .pillars / .pillar / .pillar-* / .pillar-header /
   .pillar-body / .pillar-chevron rules are now inert (no matching
   elements) and can be removed on the next cleanup pass.

   The togglePillar() function in main.js is similarly inert —
   no .pillar-header elements exist in the new HTML.
   ──────────────────────────────────────────────────────────────── */

/* Section background — tonal-silk is already set in Pass 2.
   Restated here explicitly so this block is self-contained. */
.reasoning {
  background: var(--tonal-silk);
}

/* Intro block */
.reasoning-intro {
  max-width: 56ch;
  margin-bottom: clamp(44px, 5vw, 60px);
}

/* ─── 2 × 2 card grid ────────────────────────────────────────── */
.reasoning-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: transparent;
  border-radius: 0;
  overflow: visible;
}

/* ─── Base card — transparent, content sits on section bg ────── */
.reasoning-card {
  background: transparent;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Accent stripe removed — per-card colour is carried by the illustration */
.reasoning-card::before { display: none; }

/* ─── Illustration tile (the only "box" that remains) ────────── */
.rc-ill {
  background: #fff;
  border-radius: 8px;
  border-top: 3px solid transparent;
  padding: 1rem 1.25rem;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 88px;
}
.rc-1 .rc-ill { border-top-color: var(--uguisu); }
.rc-2 .rc-ill { border-top-color: var(--spring); }
.rc-3 .rc-ill { border-top-color: var(--gold);   }
.rc-4 .rc-ill { border-top-color: var(--peach);  }

.rc-ill svg {
  width: 100%;
  height: 76px;
  display: block;
}

/* ─── Text content — outside the box, part of the section ───── */
.rc-content {
  padding: 14px 4px 4px;
  display: flex;
  flex-direction: column;
}

/* Ordinal — EB Garamond italic */
.rc-num {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 36px;
  letter-spacing: -1px;
  line-height: 1;
  color: #5E6B22;
  margin-bottom: 6px;
}
.rc-1 .rc-num,
.rc-2 .rc-num,
.rc-3 .rc-num,
.rc-4 .rc-num { color: #5E6B22; }

/* Title — EB Garamond italic */
.rc-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: 0;
  color: #1A1608;
  margin: 0 0 8px;
}

/* Body — Space Grotesk Regular */
.rc-body {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  font-size: 12.5px;
  line-height: 1.65;
  color: #666;
  margin: 0;
}

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .reasoning-cards {
    grid-template-columns: 1fr;
    gap: 1px;
  }
}

@media (max-width: 640px) {
  .rc-content {
    padding: 18px 24px 24px;
  }
  .rc-ill {
    padding: 1.25rem;
    margin: 12px 12px 0;
  }
  .rc-num {
    font-size: 42px;
  }
}
/* ─── GAP stat-item: stack vertically at all sizes ──────────── */
.stat-item {
  grid-template-columns: 1fr;
  gap: 10px;
}

.stat-label {
  padding-top: 0;
}

.stage-chips { justify-content: center; }

.ex-strip {
  background: rgba(224,160,122,0.07);
  border: 1px solid rgba(224,160,122,0.32);
  border-left: 3px solid var(--peach);
  border-radius: 8px;
  padding: 13px 20px;
  margin-bottom: 11px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.ex-lbl {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--peach);
  flex-shrink: 0;
}
/* ════════════════════════════════════════════════════════════════
   SECTION 05B — DATA SOURCES STRIP + OBSERVATIONAL COMMONS
   ──────────────────────────────────────────────────────────────── */

/* ─── Scientific foundations strip ──────────────────────────── */
.reasoning-data-sources {
  margin-bottom: clamp(36px, 4vw, 48px);
  padding: 22px 28px 24px;
  background: rgba(94, 107, 34, 0.04);
  border: 1px solid var(--border-light);
  border-radius: 10px;
}

.rds-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--uguisu);
  display: block;
  margin-bottom: 14px;
}

.rds-chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.rds-chip {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 18px;
  background: #fff;
  border: 1px solid rgba(94, 107, 34, 0.15);
  border-radius: 8px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.rds-chip:hover {
  border-color: rgba(94, 107, 34, 0.4);
  box-shadow: 0 4px 12px rgba(94, 107, 34, 0.08);
}

.rds-chip-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}

.rds-chip-icon svg {
  width: 48px;
  height: 48px;
  display: block;
}

.rds-chip-id {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5E6B22;
  line-height: 1.2;
}

.rds-chip-name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  color: var(--dark);
  line-height: 1.25;
  margin-top: 2px;
}

.rds-chip-detail {
  font-family: var(--font-body);
  font-size: 12px;
  color: #666;
  line-height: 1.55;
  margin-top: 4px;
}

/* Divider between foundations and feature panels */
.reasoning-divider {
  height: 2px;
  background: linear-gradient(90deg, #5E6B22 0%, rgba(94, 107, 34, 0.15) 100%);
  border: 0;
  margin: clamp(32px, 4vw, 48px) 0;
}

/* ─── Observational Commons coda ─────────────────────────────── */
.reasoning-commons {
  margin-top: 28px;
  background: var(--dark);
  border-radius: 10px;
  padding: 26px 32px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.rcommons-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rcommons-body {
  flex: 1;
  min-width: 0;
}

.rcommons-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--spring);
  display: block;
  margin-bottom: 8px;
}

.rcommons-text {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.75;
  color: rgba(242, 234, 216, 0.62);
  margin: 0;
}

.rcommons-meta {
  flex-shrink: 0;
}

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .rds-chips {
    grid-template-columns: repeat(2, 1fr);
  }
  .reasoning-commons {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .rcommons-meta {
    display: none;
  }
}

@media (max-width: 640px) {
  .rds-chips {
    grid-template-columns: 1fr;
  }
  .reasoning-data-sources {
    padding: 18px 20px 20px;
  }
  .rds-chip {
    padding: 12px 14px;
  }
  .reasoning-commons {
    padding: 22px 24px;
  }
}

/* ─── REASONING — brand-colour audit & rhythm bake-in ──────────
   Off-brand "dark-peach"/"dark-gold" tints used in the .rc-3 and
   .rc-4 illustrations are remapped to on-brand olive via attribute
   selectors (no SVG markup edits needed). Plus equal-height cards
   and a unified vertical rhythm. */
.reasoning .rc-4 svg [stroke="#C07850"] { stroke: #5E6B22; }
.reasoning .rc-4 svg [fill="#C07850"]   { fill:   #5E6B22; }
.reasoning .rc-4 svg [stroke="#E0A07A"] { stroke: #5E6B22; opacity: .25; }
.reasoning .rc-3 svg [stroke="#A07010"] { stroke: #5E6B22; opacity: .7;  }
.reasoning .rc-3 svg [fill="#A07010"]   { fill:   #5E6B22; }
.reasoning .rc-3 svg text[fill="#A07010"] { fill: #5E6B22; opacity: .65; }

.reasoning {
  padding-top:    clamp(72px, 8vw, 104px);
  padding-bottom: clamp(72px, 8vw, 104px);
}
.reasoning .reasoning-intro        { margin-bottom: clamp(40px, 4vw, 56px); max-width: 820px; }
.reasoning .reasoning-data-sources { margin-bottom: clamp(32px, 3.5vw, 44px); }
.reasoning .reasoning-cards        { grid-auto-rows: 1fr; column-gap: 32px; row-gap: 24px; }
.reasoning .reasoning-card         { height: 100%; }
.reasoning .reasoning-commons      { margin-top: clamp(36px, 4vw, 56px); }

/* ─── Principles FAQ (replaces 2×2 reasoning-cards grid) ─────── */
.principles {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 2.4fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.principles-aside {
  position: sticky;
  top: 96px;
}

.principles-title {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: #5E6B22;
  margin: 0;
  max-width: 22ch;
}
.principles-title em {
  font-style: normal;
  color: inherit;
}

.principles-lifecycle {
  margin: 28px 0 0;
  max-width: 260px;
}
.principles-lifecycle svg {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 900px) {
  .principles-lifecycle {
    margin: 24px auto 4px;
  }
}

.principles-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(94, 107, 34, 0.22);
}

.principle {
  border-bottom: 1px solid rgba(94, 107, 34, 0.22);
}

.principle-summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 56px 1fr 24px;
  align-items: start;
  gap: 18px;
  padding: 22px 4px;
  transition: background-color 0.2s ease;
}
.principle-summary::-webkit-details-marker { display: none; }
.principle-summary:hover { background-color: rgba(94, 107, 34, 0.03); }
.principle-summary:focus-visible {
  outline: 2px solid var(--uguisu);
  outline-offset: -2px;
}

.principle-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 32px;
  line-height: 1;
  color: #5E6B22;
  padding-top: 2px;
}

.principle-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.principle-title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(17px, 1.6vw, 19px);
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--dark);
}

.principle-chevron {
  position: relative;
  width: 14px;
  height: 14px;
  margin-top: 12px;
  transition: transform 0.25s ease;
}
.principle-chevron::before,
.principle-chevron::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #5E6B22;
  border-radius: 1px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.principle-chevron::before {
  width: 14px;
  height: 1.5px;
  transform: translate(-50%, -50%);
}
.principle-chevron::after {
  width: 1.5px;
  height: 14px;
  transform: translate(-50%, -50%);
}
.principle[open] .principle-chevron::after { opacity: 0; }

.principle-body {
  padding: 4px 4px 26px 78px;
  max-width: 64ch;
}
.principle-body p {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.7;
  color: #4a4a4a;
  margin: 0;
}

.principle-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.principle-tag {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5E6B22;
  background: rgba(94, 107, 34, 0.07);
  border: 1px solid rgba(94, 107, 34, 0.22);
  border-radius: 999px;
  padding: 5px 11px;
}

@media (max-width: 900px) {
  .principles {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .principles-aside {
    position: static;
  }
  .principles-title {
    max-width: none;
  }
}

@media (max-width: 640px) {
  .principle-summary {
    grid-template-columns: 44px 1fr 20px;
    gap: 12px;
    padding: 18px 0;
  }
  .principle-num { font-size: 26px; }
  .principle-body { padding: 4px 0 22px 56px; }
}

/* ─── Section headings (How it works / What grounds the output) ── */
.reasoning-section-rule {
  border: 0;
  border-top: 1px solid rgba(94, 107, 34, 0.3);
  margin: 0 0 24px;
  width: 100%;
}
.reasoning-section-heading {
  font-family: 'EB Garamond', Garamond, Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 36px;
  line-height: 1.2;
  color: #5E6B22;
  margin: 0 0 clamp(32px, 3.5vw, 48px);
}
.reasoning .reasoning-cards + .reasoning-section-rule {
  margin-top: clamp(48px, 5vw, 72px);
}

/* Observational Commons label is now an <h3> — keep visual treatment */
h3.rcommons-label {
  margin-top: 0;
}

/* ─── "What grounds the output" — full-bleed charcoal section ──── */
.grounds-section {
  background: var(--dark);
  color: var(--rawsilk);
  border-top: 1px solid rgba(242, 234, 216, 0.06);
}

.grounds-section h2 { color: var(--rawsilk); }
.grounds-section .headline-secondary { color: var(--peach); }
.grounds-section h2.declarative { margin-bottom: clamp(32px, 3.5vw, 48px); }

/* Foundations strip on dark */
.grounds-section .reasoning-data-sources {
  background: rgba(242, 234, 216, 0.03);
  border-color: rgba(242, 234, 216, 0.1);
}

.grounds-section .rds-label {
  color: var(--spring);
}

/* Chips on dark */
.grounds-section .rds-chip {
  background: rgba(242, 234, 216, 0.04);
  border-color: rgba(242, 234, 216, 0.12);
}
.grounds-section .rds-chip:hover {
  background: rgba(242, 234, 216, 0.07);
  border-color: rgba(168, 192, 96, 0.5);
  box-shadow: none;
}

/* Tint chip icon strokes (originally olive #5E6B22) to Wakakusa on dark —
   spring carries structure across the section; peach is reserved for the title accent */
.grounds-section .rds-chip svg [stroke="#5E6B22"] { stroke: var(--spring); }

.grounds-section .rds-chip-id {
  color: var(--spring);
}
.grounds-section .rds-chip-name {
  color: var(--peach);
}

/* Hover-reveal for chip description — no truncation */
.grounds-section .rds-chip-detail {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  transition: max-height 0.35s ease, opacity 0.3s ease, margin-top 0.3s ease;
  color: rgba(242, 234, 216, 0.62);
}
.grounds-section .rds-chip:hover .rds-chip-detail {
  max-height: 400px;
  opacity: 1;
  margin-top: 4px;
}
@media (hover: none) {
  .grounds-section .rds-chip-detail {
    max-height: none;
    opacity: 1;
    margin-top: 4px;
  }
}

/* Epistemic refusal on dark */
.grounds-section .refusal {
  background: rgba(242, 234, 216, 0.04);
  border-left-color: rgba(168, 192, 96, 0.5);
}
.grounds-section .refusal-ico {
  opacity: 0.55;
}
.grounds-section .refusal-ico [stroke="#1A1608"] { stroke: var(--spring); }
.grounds-section .refusal-txt {
  color: rgba(242, 234, 216, 0.62);
}
.grounds-section .refusal-txt strong {
  color: var(--rawsilk);
}

/* Observational Commons inside grounds-section — drop own background */
.grounds-section .reasoning-commons {
  background: transparent;
  padding: 0;
  margin-top: clamp(36px, 4vw, 56px);
}

/* ─────────────────────────────────────────────────────────────
   Reasoning section — visual-first rebuild
   ───────────────────────────────────────────────────────────── */

/* Functions row — four illustrated medallions (matches hero idiom) */
.fn-medallion-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 8px;
}
.fn-medallion {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 16px 24px;
  background: #FAF6EE;
  border: 1px solid rgba(94,107,34,0.12);
  border-radius: 16px;
}
.fn-medallion-art {
  width: 156px;
  height: 156px;
  border-radius: 50%;
  background: #F4EDE0;
  border: 2px solid rgba(94,107,34,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  flex-shrink: 0;
}
.fn-medallion-num {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
  margin-bottom: 6px;
}
.fn-medallion-label {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 500;
  font-size: 19px;
  line-height: 1.25;
  color: var(--uguisu);
  max-width: 200px;
}

/* Diptych — two large illustrated scenes */
.scene-diptych {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 0;
  margin-top: 12px;
}
.scene-card {
  padding: 36px 32px 32px;
  background: #FAF6EE;
  border: 1px solid rgba(94,107,34,0.12);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.scene-card.scene-conventional { background: rgba(168,192,96,0.06); }
.scene-card.scene-perenos      { background: rgba(224,160,122,0.07); }
/* Inside the hero, the topo background sits behind translucent cards.
   Layer the brand palette tint over Raw Silk so the topo lines don't bleed through.
   Asymmetric treatment: the conventional card is washed/archival; the PerenOS card
   is warm and present. The visual hierarchy carries the narrative (past → future). */
.hero .scene-card.scene-conventional,
.scene-diptych.is-featured .scene-card.scene-conventional {
  background: linear-gradient(rgba(150,148,128,0.14), rgba(150,148,128,0.14)), #F2EAD8;
}
.hero .scene-card.scene-perenos,
.scene-diptych.is-featured .scene-card.scene-perenos {
  background: linear-gradient(rgba(224,160,122,0.20), rgba(224,160,122,0.20)), #F2EAD8;
  box-shadow: 0 2px 1px rgba(94,107,34,0.03), 0 20px 44px -22px rgba(224,160,122,0.42);
}
/* Desaturate the conventional illustration — keeps brand palette but reads as
   archival/obsolete. Right card stays vivid. */
.hero .scene-card.scene-conventional .scene-art svg,
.scene-diptych.is-featured .scene-card.scene-conventional .scene-art svg {
  filter: saturate(0.45) opacity(0.88);
}
.hero .scene-card.scene-conventional .scene-title,
.scene-diptych.is-featured .scene-card.scene-conventional .scene-title,
.hero .scene-card.scene-conventional .scene-caption,
.scene-diptych.is-featured .scene-card.scene-conventional .scene-caption {
  opacity: 0.78;
}
.hero .scene-card.scene-conventional .scene-eyebrow,
.scene-diptych.is-featured .scene-card.scene-conventional .scene-eyebrow {
  opacity: 0.7;
}
/* Hero diptych — narrower cards, wider arrow column carrying a label.
   Left card is intentionally a touch narrower than the right to signal
   that the right card is the destination/preferred approach. */
.hero .scene-diptych,
.scene-diptych.is-featured { grid-template-columns: 4.4fr 1.6fr 5fr; }
.hero .scene-card,
.scene-diptych.is-featured .scene-card { padding: 32px 26px 28px; }
/* Right card reads as the destination through depth, not delineation:
   no border. The left card stays flat (pressed-specimen); the right
   catches warm light and sits forward. */
.hero .scene-card.scene-perenos,
.scene-diptych.is-featured .scene-card.scene-perenos {
  border: none;
}
.hero .scene-arrow-cell,
.scene-diptych.is-featured .scene-arrow-cell {
  flex-direction: column;
  gap: 14px;
  padding: 0 18px;
  opacity: 1;
  font-size: inherit;
  color: inherit;
  /* Solid Raw Silk mask so the topo flow lines stop behind the arrow column */
  background: var(--rawsilk);
}
.hero .scene-arrow-cell .scene-arrow-glyph,
.scene-diptych.is-featured .scene-arrow-cell .scene-arrow-glyph {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 44px;
  line-height: 1;
  color: #5E6B22;
  opacity: 0.55;
}
.hero .scene-arrow-cell .scene-arrow-label,
.scene-diptych.is-featured .scene-arrow-cell .scene-arrow-label {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--peach);
  text-align: center;
  max-width: 200px;
  text-wrap: pretty;
}
@media (max-width: 760px) {
  .hero .scene-diptych,
  .scene-diptych.is-featured { grid-template-columns: 1fr; }
  .hero .scene-arrow-cell,
  .scene-diptych.is-featured .scene-arrow-cell { transform: none; flex-direction: column; padding: 8px 0 4px; background: transparent; }
  .hero .scene-arrow-cell .scene-arrow-glyph,
  .scene-diptych.is-featured .scene-arrow-cell .scene-arrow-glyph { transform: rotate(90deg); display: inline-block; }
}

/* Right-card destination emphasis — peach pull-quote weight on the strong phrase */
.hero .scene-card.scene-perenos .scene-caption strong,
.scene-diptych.is-featured .scene-card.scene-perenos .scene-caption strong {
  color: var(--peach);
  font-weight: 700;
}
.scene-eyebrow {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
  margin-bottom: 4px;
}
.scene-card.scene-perenos .scene-eyebrow { color: #a0582a; }
.scene-title {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 500;
  font-size: 28px;
  line-height: 1.15;
  color: var(--uguisu);
  margin: 4px 0 22px;
}
.scene-art {
  width: 100%;
  max-width: 360px;
  aspect-ratio: 4 / 3;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.scene-art svg { width: 100%; height: 100%; }
.scene-caption {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-secondary);
  max-width: 340px;
  margin: 0;
  text-wrap: pretty;
}
.scene-caption strong { color: var(--uguisu); font-weight: 600; }
.scene-arrow-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 32px;
  color: #5E6B22;
  opacity: 0.45;
}

@media (max-width: 1000px) {
  .fn-medallion-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .scene-diptych { grid-template-columns: 1fr; }
  .scene-arrow-cell { padding: 14px 0; transform: rotate(90deg); }
  .scene-art { max-width: 280px; }
  .fn-medallion-art { width: 132px; height: 132px; }
}
@media (max-width: 460px) {
  .fn-medallion-grid { grid-template-columns: 1fr; }
}

/* ─── Pipeline nested inside .reasoning ──────────────────────── */
/* When the pipeline graph is placed inside the reasoning section,
   strip its standalone background / horizontal padding / negative
   top margin so it sits cleanly under the section title. */
.reasoning .pipeline {
  background: transparent;
  padding: 0;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.reasoning .pipeline-inner {
  margin-top: 0;
  max-width: none;
}

/* ─── BACK TO TOP (individual page — peach) ───────────────── */
.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--peach);
  color: var(--dark);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out), background var(--duration-fast) var(--ease-out), visibility 220ms;
  z-index: 100;
  box-shadow: 0 4px 14px rgba(26,22,8,0.18);
  padding: 0;
}
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover { background: #c98863; }
.back-to-top svg { display: block; }

/* ─── INDIVIDUAL PAGE — non-title text uses Grotesk only ─────
   Only h1 and h2 should render in EB Garamond on the individual page.
   These overrides drop font-display on display-styled non-heading text.
   Note: .scene-title is now Grotesk Medium globally (figure/diagram
   label track — see brand system), so no per-audience override is needed. */
[data-audience="individual"] .scene-arrow-cell,
[data-audience="individual"] .hero .scene-arrow-cell .scene-arrow-glyph,
[data-audience="individual"] .scene-diptych.is-featured .scene-arrow-cell .scene-arrow-glyph {
  font-family: var(--font-body);
  font-style: normal;
}

/* ============================================================
   INDIVIDUAL SURFACE POSTURE — warm rhythm
   Canonical definition: docs/brand-system.md → "Individual surface posture".
   Individual-only; the professional page keeps editorial restraint.

   CORE RULE: never wash a section that contains a dominant card.
   A wash behind a centred card reads as matting — a coloured frame
   on a photo — no matter how low the chroma. On this card-dominated
   page the section ground therefore stays Raw Silk; rhythm is carried
   by the 1px Uguisu hairline, the one cardless lead-in wash, and the
   single crescendo. (To add warmth, tint the CARDS, not the grounds.)

   Cadence down the page:
     02 For whom    → Raw Silk (contains cards)
     (How it works) → Raw Silk (contains cards)
     05 Process     → Raw Silk (the big diagram card — no wash, was the offender)
     04 Reasoning   → Raw Silk (contains cards)
     (closing block)→ peach whisper — the ONE cardless section, lead-in to crescendo
     Legacy band    → full Wakakusa #A8C060 (the one earned crescendo; set inline)

   Uguisu spine: a 1px olive hairline top-rule on every body section —
   a measured editorial mark. Legacy band and CTA omit it.
   ============================================================ */
[data-audience="individual"] .ind-serves,
[data-audience="individual"] .ind-works { border-top: 1px solid var(--uguisu); }
/* Process section sits directly under the "reads you and your land as one
   system" heading — the hairline there reads as a rule attached to the
   title, so this section omits the spine. */
[data-audience="individual"] .ind-works[data-screen-label="05 Process"] { border-top: none; }

/* Only the cardless closing section carries a wash — no card, so no matting.
   It is the warm lead-in to the green crescendo directly below it. */
[data-audience="individual"] .ind-works:not([data-screen-label]) ~ .ind-works:not([data-screen-label]) { background: #F1E7D8; }

/* ════════════════════════════════════════════════════════════════
   PIPELINE — MOBILE LAYOUT (authoritative)
   Nested section/container/card padding crushes the diagram to a
   narrow column on phones, which makes the stage titles wrap to a
   single word and the chips stack raggedly. Reclaim the width, drop
   the oversized desktop roundel, and lay each stage out as a clean
   icon + title row with left-aligned chips beneath. Scoped under
   .pipeline (specificity 0,2,0) and placed last so it wins over the
   earlier unconditional .stage / .ppl / .stage-chips overrides
   without needing !important.
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .pipeline .pipeline-inner { padding-left: 0; padding-right: 0; }
  .pipeline .ppl { padding: 20px 16px; }

  .pipeline .stages { grid-template-columns: 1fr; gap: 0; }
  .pipeline .stage {
    padding: 20px 0;
    align-items: stretch;
    text-align: left;
  }
  .pipeline .stage:first-child { padding-top: 4px; }
  .pipeline .stage:not(:last-child) {
    border-bottom: 1px solid var(--rule);
  }

  .pipeline .stage-head {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding-bottom: 14px;
  }
  .pipeline .stage-ico {
    width: 72px;
    height: 72px;
    border-radius: 14px;
  }
  .pipeline .stage-ico svg { width: 48px; height: 48px; }
  .pipeline .stage-label {
    justify-content: flex-start;
    flex: 1 1 auto;
    min-width: 0;
  }
  .pipeline .stage-title { font-size: 15.5px; }

  .pipeline .stage-chips { justify-content: flex-start; }

  /* Example summary — 4-col grid is unreadable on phones; stack it */
  .pipeline .ppl-example {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .pipeline .ppl-example-col {
    border-right: none;
    border-bottom: 1px solid rgba(200, 152, 32, 0.18);
    padding: 11px 14px;
  }
  .pipeline .ppl-example-col:last-child { border-bottom: none; }
}