/* =====================================================================
   SPARSHAN · CIE-1 presentation
   Design canvas: 1920 × 1080. 1rem = 20px at 1080p and scales with the
   viewport, so every slide keeps its proportions on any 16:9 projector.
   ===================================================================== */

:root {
  /* Palette */
  --green: #1F3B33;          /* deep herbal green */
  --green-ink: #2E5247;
  --screen: #0F1F1A;         /* pulse monitor screen */
  --text: #2B241C;
  --muted: #6B6257;
  --card: #F1F4F0;
  --page: #FFFFFF;
  --line: #E1E5DF;
  --saffron: #C8862A;        /* key numbers, highlights */
  --saffron-ink: #8F5D17;    /* saffron for small text (AA contrast) */
  --saffron-tint: rgba(200, 134, 42, .12);
  --ivory: #F5F1E8;

  /* Dosha colours: used consistently everywhere */
  --vata: #5B8A99;
  --pitta: #C2552B;
  --kapha: #6E8E5A;
  --positive: #6E8E5A;
  --negative: #C2552B;

  --font-serif: "Fraunces", Cambria, "Cambria Math", Georgia, serif;
  --font-sans: "Inter", "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --radius: .4rem;           /* 8px at 1080p */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --pad-x: 4.4rem;
  --bar-h: 3.4rem;           /* footer height */
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: clamp(9px, min(1.0417vw, 1.8519vh), 32px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--text);
  background: var(--page);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
}

h1, h2, h3, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
strong, b { font-weight: 600; }
cite { font-style: italic; }
a { color: inherit; }

.icon {
  width: 1em; height: 1em;
  flex: none;
  stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -.125em;
}

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.label {
  display: block;
  font: 600 .7rem/1.2 var(--font-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .6rem;
}
.muted { color: var(--muted); font-weight: 400; }
.nowrap { white-space: nowrap; }

:focus-visible { outline: 2px solid var(--saffron); outline-offset: 3px; border-radius: 4px; }

/* ---------- Chrome: progress, motif, footer ---------- */
.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 30;
  background: rgba(31, 59, 51, .08);
}
.progress__fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--vata), var(--pitta) 50%, var(--kapha));
  background-size: 100vw 100%;
  transition: width .45s var(--ease-out);
}
body[data-theme="dark"] .progress { background: rgba(255, 255, 255, .08); }

.motif {
  position: fixed; top: 2.75rem; right: var(--pad-x); z-index: 20;
  display: flex; gap: .45rem;
}
.motif span { width: .55rem; height: .55rem; border-radius: 50%; background: var(--vata); }
.motif span:nth-child(2) { background: var(--pitta); }
.motif span:nth-child(3) { background: var(--kapha); }

.deck { position: fixed; inset: 0; overflow: hidden; }

.deck-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
  height: var(--bar-h);
  padding: 0 var(--pad-x);
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1.5rem;
  font-size: .7rem; color: var(--muted);
  transition: color .3s;
}
body[data-theme="dark"] .deck-bar { color: rgba(245, 241, 232, .66); }

.section-nav { display: flex; align-items: center; flex-wrap: wrap; }
.section-nav button {
  background: none; border: 0; padding: .35rem .1rem; cursor: pointer;
  color: inherit; letter-spacing: .02em; display: inline-flex; align-items: center; gap: .4rem;
}
.section-nav button + button::before {
  content: "·"; margin: 0 .55rem 0 .45rem; color: currentColor; opacity: .6;
}
.section-nav button:hover { color: var(--text); }
body[data-theme="dark"] .section-nav button:hover { color: var(--ivory); }
.section-nav button[aria-current="true"] { color: var(--green); font-weight: 600; }
body[data-theme="dark"] .section-nav button[aria-current="true"] { color: var(--ivory); }
.section-nav__dot { width: .4rem; height: .4rem; border-radius: 50%; background: var(--saffron); display: none; }
.section-nav button[aria-current="true"] .section-nav__dot { display: inline-block; }

.presenter-tag {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .3rem .8rem; border-radius: 999px;
  background: rgba(31, 59, 51, .06);
}
body[data-theme="dark"] .presenter-tag { background: rgba(255, 255, 255, .08); }
.presenter-tag strong { color: var(--text); font-weight: 600; }
body[data-theme="dark"] .presenter-tag strong { color: var(--ivory); }
.presenter-tag__dot { width: .4rem; height: .4rem; border-radius: 50%; background: var(--saffron); }

.deck-controls { display: flex; align-items: center; justify-content: flex-end; gap: .35rem; }
.counter { font-variant-numeric: tabular-nums; margin: 0 .5rem 0 .7rem; min-width: 3.2em; text-align: center; }

.icon-btn, .nav-btn {
  display: inline-grid; place-items: center;
  width: 1.9rem; height: 1.9rem; padding: 0;
  border-radius: 50%; border: 1px solid transparent; background: transparent;
  color: inherit; cursor: pointer; font-size: .85rem; font-weight: 600;
  transition: background-color .2s, border-color .2s, color .2s;
}
.icon-btn:hover { background: rgba(31, 59, 51, .08); color: var(--text); }
body[data-theme="dark"] .icon-btn:hover { background: rgba(255, 255, 255, .1); color: var(--ivory); }
.nav-btn { width: 2.3rem; height: 2.3rem; border-color: currentColor; font-size: 1rem; }
.nav-btn:hover { background: var(--green); border-color: var(--green); color: #fff; }
body[data-theme="dark"] .nav-btn:hover { background: var(--ivory); border-color: var(--ivory); color: var(--green); }
.nav-btn:disabled { opacity: .3; cursor: default; background: transparent; color: inherit; border-color: currentColor; }

/* ---------- Slides ---------- */
.slide {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: 2.6rem var(--pad-x) calc(var(--bar-h) + 1rem);
  background: var(--page);
  opacity: 0; visibility: hidden;
  transform: translateY(1.1rem);
  transition: opacity .36s var(--ease-out), transform .36s var(--ease-out), visibility 0s linear .36s;
}
.slide.is-active {
  opacity: 1; visibility: visible; transform: none; z-index: 2;
  transition: opacity .36s var(--ease-out), transform .36s var(--ease-out), visibility 0s;
}
.slide.is-leaving { transform: translateY(-.6rem); z-index: 1; }
.no-transition .slide { transition: none !important; }

.slide--dark { background: var(--green); color: var(--ivory); }
.slide--dark .label, .slide--dark .kicker { color: rgba(245, 241, 232, .62); }
.slide--dark .slide__title { color: var(--ivory); }

.slide__head { margin-bottom: 1.4rem; max-width: 78rem; padding-right: 4rem; }
.slide__head--compact { margin-bottom: 1.1rem; }
.kicker {
  font: 600 .7rem/1 var(--font-sans);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .75rem;
}
.slide__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 2.3rem;
  line-height: 1.1;
  letter-spacing: -.012em;
  color: var(--green);
}
.citation { margin-top: .65rem; font-size: .8rem; color: var(--muted); max-width: 76rem; }

/* Body fills the space between title and footer; content is centred in it */
.slide__body {
  flex: 1; min-height: 0; position: relative;
  display: flex; flex-direction: column;
  justify-content: center; justify-content: safe center;
  align-content: center; align-content: safe center;
}

/* ---------- Entrance animation ---------- */
.reveal { opacity: 0; transform: translateY(.6rem); }
.reveal--pop { transform: scale(.6); }
.slide.is-revealed .reveal {
  opacity: 1; transform: none;
  transition: opacity .5s var(--ease-out) var(--d, 0ms), transform .5s var(--ease-out) var(--d, 0ms);
}

@keyframes pop { from { transform: scale(0); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } to { transform: scale(1); opacity: 1; } }

/* ---------- Shared bits ---------- */
.mark {
  display: inline-grid; place-items: center; flex: none;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  font-size: 1rem;
}
.mark .icon { stroke-width: 2.4; }
.mark--yes { background: rgba(110, 142, 90, .16); color: #4F6E3D; }
.mark--no { background: rgba(194, 85, 43, .12); color: var(--pitta); }
.mark--part { background: var(--saffron-tint); color: var(--saffron-ink); }
.mark--part .icon { stroke-width: 1.8; }
.mark--lg { width: 2.4rem; height: 2.4rem; font-size: 1.35rem; }
.mark-note { display: block; font-size: .72rem; color: var(--saffron-ink); margin-top: .2rem; font-weight: 500; }

.icon-badge {
  display: inline-grid; place-items: center; flex: none;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--card); color: var(--green);
  font-size: 1.35rem;
}

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem 1.1rem; border-radius: 999px;
  border: 1px solid var(--green); background: var(--green); color: #fff;
  font-size: .85rem; font-weight: 600; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, transform .15s;
}
.btn:hover { background: var(--green-ink); }
.btn:active { transform: scale(.97); }
.btn--ghost { background: transparent; color: var(--green); }
.btn--ghost:hover, .btn--ghost[aria-pressed="true"] { background: var(--green); color: #fff; }
.btn--small { padding: .3rem .7rem; font-size: .7rem; }

.lead { font-size: 1.25rem; line-height: 1.45; max-width: 46rem; }
.lead strong { color: var(--green); }

.stat__num {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 3.1rem;
  line-height: 1;
  color: var(--saffron);
  letter-spacing: -.01em;
  white-space: nowrap;
}
.stat__unit { font-family: var(--font-sans); font-size: .95rem; font-weight: 500; color: var(--muted); margin-left: .35rem; letter-spacing: 0; }
.stat__label { margin-top: .55rem; font-size: 1rem; color: var(--text); line-height: 1.35; }
.stat--hero .stat__num { font-size: 3.6rem; }
.stat--hero .stat__label { font-size: 1.1rem; max-width: 24rem; }
.stat--card { background: var(--card); border-radius: var(--radius); padding: 1.4rem 1.6rem; }

.caption { font-size: 1rem; color: var(--muted); display: flex; align-items: center; gap: .45rem; }
.footnote { font-size: .82rem; color: var(--muted); line-height: 1.45; }

.conclusion-card {
  background: var(--card); border-radius: var(--radius);
  padding: 1.2rem 1.5rem; font-size: 1.12rem; line-height: 1.45;
}
.conclusion-card--highlight { background: var(--saffron-tint); }
.conclusion-card--highlight strong { color: var(--saffron-ink); }

.statement {
  background: var(--card); border-radius: var(--radius);
  padding: 1.8rem 2.2rem 2rem;
}
.statement__text {
  font-family: var(--font-serif);
  font-size: 1.6rem; line-height: 1.38; font-weight: 400;
  color: var(--green);
}

/* =====================================================================
   SLIDE-SPECIFIC LAYOUTS
   ===================================================================== */

/* ---------- 1 · Title ---------- */
.slide--title { padding-top: 0; }
.title-hero {
  position: relative; z-index: 2;
  padding-top: 7.2rem;
  max-width: 64rem;
}
.title-hero__script {
  font-size: 1.1rem; color: var(--saffron); letter-spacing: .06em; margin-bottom: 1rem;
  font-family: "Nirmala UI", "Noto Sans Devanagari", var(--font-sans);
}
.title-hero__name {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 6.6rem; line-height: .95; letter-spacing: -.025em;
  color: var(--ivory);
}
.title-hero__subtitle {
  margin-top: 1.1rem;
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: 1.85rem; line-height: 1.25; color: #DCCFB8;
  max-width: 46rem;
}
.title-hero__meta { margin-top: 2.2rem; display: grid; gap: .4rem; font-size: .95rem; color: rgba(245, 241, 232, .72); }
.title-hero__meta p:last-child { color: var(--ivory); margin-top: .4rem; }
.title-pulse { position: absolute; left: 0; right: 0; bottom: calc(var(--bar-h) + .6rem); height: 34%; z-index: 1; pointer-events: none; }
.title-pulse canvas, .end-pulse canvas { display: block; width: 100%; height: 100%; }

/* ---------- 2 · Motivation ---------- */
.s2 { gap: 3.4rem; }
.skill-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.skill-card {
  position: relative; background: var(--card); border-radius: var(--radius);
  padding: 2rem 2.2rem 2.2rem;
}
.skill-card > .icon-badge { width: 3.6rem; height: 3.6rem; font-size: 1.9rem; background: #fff; margin-bottom: 1.3rem; }
.skill-card .mark { position: absolute; top: 1.8rem; right: 1.8rem; }
.skill-card__name { font-family: var(--font-serif); font-weight: 500; font-size: 2.2rem; line-height: 1.15; color: var(--green); margin-bottom: 1.4rem; padding-right: 2.5rem; }
.skill-card__how { font-size: 1.22rem; line-height: 1.4; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.skill-card__how span { display: block; font-size: .9rem; color: var(--muted); margin-bottom: .2rem; }
.skill-card--gap { background: rgba(194, 85, 43, .1); }
.skill-card--gap > .icon-badge { color: #8E3A1B; }
.skill-card--gap .skill-card__how { border-top-color: rgba(194, 85, 43, .2); }
.skill-card--gap .skill-card__name { color: #8E3A1B; }
.s2__bottom { display: grid; grid-template-columns: 1.5fr 1fr; gap: 4rem; align-items: center; }
.s2 .lead { font-size: 1.55rem; max-width: 54rem; }
.s2__bottom .stat { border-left: 1px solid var(--line); padding-left: 2.6rem; }
.s2__bottom .stat__label { font-size: 1.2rem; max-width: 26rem; }

/* ---------- 3 · Problem ---------- */
.s3 { gap: 3rem; }
.s3 .statement { padding: 2rem 2.4rem 2.3rem; }
.s3 .statement__text { font-size: 1.75rem; }
.s3__row { display: grid; grid-template-columns: 1.15fr 1fr; gap: 4.5rem; align-items: center; }
.quote-card { position: relative; padding: 1.6rem 0 0 4.4rem; }
.quote-card::before {
  content: "“"; position: absolute; left: 0; top: -.9rem;
  font-family: var(--font-serif); font-size: 7.5rem; line-height: 1; color: var(--saffron);
}
.quote-card blockquote p { font-family: var(--font-serif); font-style: italic; font-size: 1.95rem; line-height: 1.35; color: var(--text); }
.quote-card figcaption { margin-top: 1.3rem; font-size: .95rem; color: var(--muted); }
.affected .label { margin-bottom: 1.2rem; }
.affected__list { display: grid; gap: 1.5rem; }
.affected__list li { display: flex; align-items: center; gap: 1.3rem; }
.affected__list .icon-badge { width: 3.5rem; height: 3.5rem; font-size: 1.75rem; }
.affected__list strong { display: block; font-size: 1.35rem; color: var(--green); }
.affected__list span:not(.icon-badge) { display: block; font-size: 1.1rem; color: var(--muted); }

/* ---------- 4 · Scope ---------- */
.s4 { display: grid; grid-template-columns: 1fr 1.15fr; gap: 4.5rem; align-items: center; }
.s4__scope { display: grid; gap: 1.6rem; }
.scope-card { background: var(--card); border-radius: var(--radius); padding: 1.8rem 2.1rem 2rem; }
.scope-card h3 { display: flex; align-items: center; gap: .8rem; font-size: 1.4rem; font-weight: 600; color: var(--green); margin-bottom: 1.1rem; }
.scope-card ul { display: grid; gap: .8rem; }
.scope-card li { position: relative; padding-left: 1.3rem; font-size: 1.22rem; }
.scope-card li::before { content: ""; position: absolute; left: 0; top: .6em; width: .4rem; height: .4rem; border-radius: 50%; background: var(--kapha); }
.scope-card--out { background: transparent; border: 1px solid var(--line); }
.scope-card--out li { color: var(--muted); }
.scope-card--out li::before { background: var(--pitta); opacity: .7; }
.objectives .label { margin-bottom: .4rem; }
.objective-list { display: grid; }
.objective-list li { display: flex; gap: 1.5rem; align-items: baseline; padding: 1.3rem 0; border-bottom: 1px solid var(--line); }
.objective-list li:last-child { border-bottom: 0; }
.objective-list__n { font-family: var(--font-serif); font-size: 2.5rem; line-height: 1; color: var(--saffron); width: 2rem; flex: none; }
.objective-list p { font-size: 1.4rem; line-height: 1.35; }
.objective-list strong { color: var(--green); }

/* ---------- 5 · SDGs ---------- */
.s5 { gap: 2.6rem; }
.sdg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.sdg { border-radius: var(--radius); overflow: hidden; background: var(--card); display: flex; flex-direction: column; }
.sdg__head {
  background: var(--sdg); color: #fff;
  padding: 1.6rem 1.8rem; min-height: 10rem;
  display: flex; align-items: flex-start; gap: 1.2rem;
}
.sdg__num { font-family: var(--font-sans); font-weight: 700; font-size: 4.8rem; line-height: .85; letter-spacing: -.03em; }
.sdg__name { font-weight: 600; font-size: 1.3rem; line-height: 1.2; text-transform: uppercase; letter-spacing: .02em; padding-top: .3rem; }
.sdg__body { padding: 1.7rem 1.8rem 1.9rem; display: flex; flex-direction: column; gap: 1rem; flex: 1; }
.sdg__target { font-size: 1.45rem; font-weight: 600; color: var(--green); line-height: 1.25; }
.sdg__why { font-size: 1.2rem; color: var(--text); line-height: 1.4; }
.sdg__tag { align-self: flex-start; margin-top: auto; font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: .38rem .8rem; border-radius: 999px; border: 1px solid #CBD3CB; color: var(--muted); }
.sdg__tag--primary { background: var(--green); border-color: var(--green); color: #fff; }
.sdg--primary { box-shadow: 0 0 0 2px var(--green); }
.sdg-flow { display: flex; align-items: center; gap: .9rem; font-size: 1.4rem; color: var(--muted); }
.sdg-flow strong { color: var(--green); }
.sdg-flow .icon { color: var(--saffron); font-size: 1.6rem; }

/* ---------- Diagrams (6, 7, 19) ---------- */
.diagram { position: relative; display: grid; }
.diagram__wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 0; pointer-events: none; }
.node {
  position: relative; z-index: 1;
  background: var(--card); border-radius: var(--radius);
  padding: 1.05rem 1.15rem;
  display: flex; flex-direction: column; gap: .25rem;
  font-size: .92rem; line-height: 1.32;
  opacity: 0; transform: translateY(.5rem);
}
.node strong { font-size: 1.05rem; color: var(--green); line-height: 1.25; }
.node > span:not(.node__icon):not(.node__n) { color: var(--muted); }
.node__icon { font-size: 1.6rem; color: var(--green); margin-bottom: .35rem; display: block; line-height: 1; }
.node__n {
  display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--green); color: #fff; font-size: .78rem; font-weight: 600; margin-bottom: .4rem;
}
.node--accent { background: var(--saffron-tint); }
.node--accent strong, .node--accent .node__icon { color: var(--saffron-ink); }
.node--feedback { background: #fff; border: 1px dashed #B9C2B9; }
.diagram.is-playing .node {
  opacity: 1; transform: none;
  transition: opacity .45s var(--ease-out) var(--d, 0ms), transform .45s var(--ease-out) var(--d, 0ms);
}
.wire { fill: none; stroke: #8FA89A; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.wire--feedback { stroke: var(--saffron); }
.wire-head { fill: #8FA89A; opacity: 0; }
.wire-head--feedback { fill: var(--saffron); }
.diagram.is-playing .wire { stroke-dashoffset: 0; transition: stroke-dashoffset .5s ease-out var(--d, 0ms); }
.diagram.is-playing .wire-head { opacity: 1; transition: opacity .2s ease-out calc(var(--d, 0ms) + 420ms); }
.flow-dot { fill: var(--pitta); opacity: 0; }
.diagram.is-playing .flow-dot { opacity: .9; transition: opacity .6s ease-out var(--flow-d, 0ms); }

/* ---------- 6 · McLellan ---------- */
.s6 { display: grid; grid-template-columns: 1.22fr 1fr; gap: 3.6rem; align-items: center; }
.s6__left { display: flex; flex-direction: column; gap: 1.4rem; }
.diagram--mclellan { grid-template-columns: repeat(4, 1fr); column-gap: 2.3rem; row-gap: 3rem; }
.diagram--mclellan .node { min-height: 9.6rem; }
.diagram--mclellan [data-node="press"] { grid-column: 3; grid-row: 2; min-height: 0; }
.s6 .caption { margin-top: .3rem; }
.s6__right { display: flex; flex-direction: column; gap: 2.2rem; }
.patterns .label, .qualities .label { margin-bottom: .9rem; }
.patterns .label strong, .qualities .label strong { color: var(--green); font-size: 1.25rem; letter-spacing: .01em; text-transform: none; margin-right: .3rem; }
.patterns__grid { width: calc(100% + .7rem); border-collapse: separate; border-spacing: .35rem; margin: 0 -.35rem; table-layout: fixed; }
.patterns__grid th { font-size: .74rem; font-weight: 600; color: var(--muted); text-align: left; line-height: 1.2; padding: 0 .1rem .1rem; hyphens: manual; }
.patterns__grid tbody th { font-size: .86rem; color: var(--text); }
.patterns__grid thead th:first-child { width: 7rem; }
.patterns__grid td { background: var(--card); border-radius: .3rem; height: 3.3rem; padding: .35rem .45rem; position: relative; }
.patterns__grid td svg { width: 100%; height: 100%; display: block; overflow: visible; }
.patterns__grid td .glyph { fill: none; stroke: var(--green); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.patterns__grid td .glyph-base { stroke: #CBD3CB; stroke-width: 1; vector-effect: non-scaling-stroke; }
.quality-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.6rem; }
.quality-list li { display: grid; grid-template-columns: auto 1fr; column-gap: .8rem; align-items: center; font-size: 1.08rem; }
.quality-list li .mark { grid-row: span 2; }
.quality-list li span:not(.mark):not(.sr-only) { font-size: .88rem; color: var(--muted); grid-column: 2; }
.quality-list li strong { color: var(--green); }
.quality-list .is-missing strong { color: var(--pitta); }

/* ---------- 7 · Yang ---------- */
.s7 { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3.8rem; align-items: center; }
.s7__left { display: flex; flex-direction: column; gap: 2rem; }
.diagram--loop { grid-template-columns: 1fr 1fr; column-gap: 6rem; row-gap: 3.6rem; }
.diagram--loop [data-node="lv"] { grid-column: 1; grid-row: 1; }
.diagram--loop [data-node="aorta"] { grid-column: 2; grid-row: 1; }
.diagram--loop [data-node="radial"] { grid-column: 2; grid-row: 2; }
.diagram--loop [data-node="res"] { grid-column: 1; grid-row: 2; }
.diagram--loop .node { min-height: 8rem; }
.tile-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.tile { background: var(--card); border-radius: var(--radius); padding: 1.2rem 1.3rem; }
.tile__num { font-family: var(--font-serif); font-size: 2.15rem; line-height: 1.05; color: var(--saffron); white-space: nowrap; }
.tile__label { font-size: .88rem; color: var(--muted); margin-top: .45rem; line-height: 1.3; }
.s7__right { display: flex; flex-direction: column; gap: 1.8rem; }
.s7__right .chart { --plot-h: 19rem; --col-w: 3.2rem; --axis-size: .95rem; --val-size: 1rem; }

/* ---------- 8 · Comparison ---------- */
.s8 {
  display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: auto auto;
  column-gap: 4rem; row-gap: 2rem; align-items: center;
}
.matrix { width: 100%; border-collapse: collapse; font-size: 1.12rem; }
.matrix th, .matrix td { padding: .95rem .8rem; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; }
.matrix thead th { font-size: .9rem; font-weight: 600; color: var(--muted); padding-bottom: .8rem; }
.matrix thead th.is-us { color: var(--saffron-ink); }
.matrix tbody th { text-align: left; font-weight: 500; color: var(--text); }
.matrix .is-us { background: var(--saffron-tint); }
.matrix thead .is-us { border-radius: var(--radius) var(--radius) 0 0; }
.matrix tbody tr:last-child .is-us { border-radius: 0 0 var(--radius) var(--radius); }
.slide.is-revealed .matrix .mark { animation: pop .45s var(--ease-out) both; animation-delay: calc(var(--d, 0ms) + 180ms); }
.posmap { padding: 0 0 2rem 2.2rem; }
.posmap__plot {
  position: relative; aspect-ratio: 1.3;
  border-left: 1.5px solid #9AA59C; border-bottom: 1.5px solid #9AA59C;
}
.posmap__plot::before, .posmap__plot::after { content: ""; position: absolute; background: var(--line); }
.posmap__plot::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.posmap__plot::after { top: 50%; left: 0; right: 0; height: 1px; }
.posmap__gap {
  position: absolute; left: 0; top: 0; width: 50%; height: 50%;
  background: var(--saffron-tint);
  display: flex; align-items: flex-end; padding: .9rem 1rem;
  font-size: .82rem; font-weight: 600; letter-spacing: .02em; color: var(--saffron-ink);
}
.posmap__axis { position: absolute; font-size: .85rem; font-weight: 600; color: var(--muted); white-space: nowrap; display: inline-flex; align-items: center; gap: .35rem; }
.posmap__axis--y { left: -.6rem; bottom: 0; transform-origin: 0 100%; transform: rotate(-90deg); }
.posmap__axis--x { right: 0; top: calc(100% + .5rem); }
.bubble {
  position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; z-index: 1;
  padding: .55rem 1.05rem; border-radius: 999px;
  background: #DDE3DC; color: var(--green);
  font-size: .95rem; font-weight: 600; white-space: nowrap;
}
.bubble--us { background: var(--saffron); color: #fff; padding: .85rem 1.5rem; font-size: 1.15rem; box-shadow: 0 0 0 .55rem rgba(200, 134, 42, .18); }
.gap-banner {
  grid-column: 1 / -1;
  display: flex; align-items: baseline; gap: 1.6rem;
  background: var(--green); color: var(--ivory);
  border-radius: var(--radius); padding: 1.3rem 1.8rem;
  font-size: 1.25rem;
}
.gap-banner .label { color: #E2B878; margin: 0; flex: none; }

/* ---------- 9 · Findings ---------- */
.findings__head, .finding {
  display: grid; grid-template-columns: 9.5rem 1fr 3rem 1.15fr; align-items: center; column-gap: 1.8rem;
}
.findings__head { font: 600 .7rem/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.finding { padding: 1.35rem 0; border-bottom: 1px solid var(--line); }
.finding:last-child { border-bottom: 0; }
.pill {
  justify-self: start;
  font-size: .84rem; font-weight: 600; letter-spacing: .02em;
  padding: .42rem .9rem; border-radius: 999px;
  background: var(--green); color: #fff;
}
.pill--alt { background: transparent; color: var(--green); box-shadow: inset 0 0 0 1.5px var(--green); }
.finding__text { font-size: 1.25rem; color: var(--text); line-height: 1.35; }
.finding__arrow { color: var(--saffron); font-size: 1.7rem; display: grid; place-items: center; }
.finding__decision { font-size: 1.25rem; line-height: 1.35; font-weight: 600; color: var(--green); background: var(--card); border-radius: var(--radius); padding: .95rem 1.2rem; }

/* ---------- Charts ---------- */
.chart { margin: 0; position: relative; }
.chart__cap { font-size: 1.05rem; font-weight: 600; color: var(--text); margin-bottom: 1.2rem; }
.chart__cap span { font-weight: 400; color: var(--muted); }
.chart__note { margin-top: 1rem; font-size: 1rem; color: var(--muted); display: flex; align-items: center; gap: .45rem; }
.chart.is-built > table {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.chart > table { font-size: .9rem; border-collapse: collapse; }
.chart > table th, .chart > table td { padding: .2rem .6rem; text-align: left; }

.ch { position: relative; }
.ch__val { font-size: var(--val-size, .95rem); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* column */
.ch--column .ch__plot { position: relative; height: var(--plot-h, 16rem); display: flex; align-items: stretch; border-bottom: 1px solid #C9D0C8; }
.ch__col { position: relative; flex: 1; display: flex; justify-content: center; }
.ch--column .ch__bar {
  position: absolute; bottom: 0; width: min(var(--col-w, 2.4rem), 62%);
  height: calc(var(--v) * 100%);
  border-radius: .25rem .25rem 0 0;
  transform: scaleY(0); transform-origin: bottom;
}
.ch--column .ch__val { position: absolute; bottom: calc(var(--v) * 100% + .4rem); opacity: 0; }
.ch__axis { display: flex; margin-top: .6rem; }
.ch__axis span { flex: 1; text-align: center; font-size: var(--axis-size, .88rem); color: var(--muted); line-height: 1.2; padding: 0 .2rem; }
.chart.is-playing .ch--column .ch__bar { transform: scaleY(1); transition: transform .75s var(--ease-out) calc(var(--i) * 70ms); }
.chart.is-playing .ch--column .ch__val { opacity: 1; transition: opacity .3s ease-out calc(var(--i) * 70ms + 520ms); }

/* horizontal bars */
.ch--hbar { display: grid; gap: var(--row-gap, .8rem); }
.ch__row { display: grid; grid-template-columns: var(--label-w, 11rem) 1fr; align-items: center; column-gap: 1rem; }
.ch__label { font-size: var(--label-size, .98rem); color: var(--text); line-height: 1.2; }
.ch__row.is-hl .ch__label { font-weight: 600; color: var(--green); }
.ch__track { position: relative; height: var(--track-h, 1.6rem); }
.ch--hbar .ch__bar {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: calc(var(--v) * 88%);
  border-radius: 0 .25rem .25rem 0;
  transform: scaleX(0); transform-origin: left;
}
.ch--hbar .ch__val { position: absolute; top: 50%; left: calc(var(--v) * 88% + .55rem); transform: translateY(-50%); opacity: 0; }
.ch__missing { position: absolute; inset: 0; display: flex; align-items: center; padding-left: .7rem; border: 1px dashed #B9C2B9; border-radius: .25rem; font-size: .82rem; font-style: italic; color: var(--muted); width: 60%; }
.chart.is-playing .ch--hbar .ch__bar { transform: scaleX(1); transition: transform .75s var(--ease-out) calc(var(--i) * 70ms); }
.chart.is-playing .ch--hbar .ch__val { opacity: 1; transition: opacity .3s ease-out calc(var(--i) * 70ms + 520ms); }
.ch--hbar::before { content: ""; position: absolute; top: -.25rem; bottom: -.25rem; left: calc(var(--label-w, 11rem) + 1rem); width: 1px; background: #C9D0C8; }

/* stacked 100% bar */
.ch__stackbar { display: flex; gap: 2px; height: var(--stack-h, 3.6rem); border-radius: .25rem; overflow: hidden; clip-path: inset(0 100% 0 0); }
.ch__seg { flex: var(--v) 1 0; display: grid; place-items: center; min-width: 0; }
.ch__seg b { font-size: 1.05rem; font-weight: 600; }
.chart.is-playing .ch__stackbar { clip-path: inset(0 0 0 0); transition: clip-path 1s var(--ease-out); }
.ch__bracket { position: relative; height: 2.6rem; margin-bottom: .45rem; width: var(--w); }
.ch__bracket::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: .6rem; border: 1.5px solid var(--saffron); border-bottom: 0; border-radius: .2rem .2rem 0 0; }
.ch__bracket span { position: absolute; left: 0; bottom: 1rem; font-size: 1.1rem; font-weight: 600; color: var(--saffron-ink); white-space: nowrap; }
.ch__bracket { opacity: 0; transition: opacity .3s; }
.chart.is-playing .ch__bracket { opacity: 1; transition: opacity .4s ease-out .9s; }
.ch__legend { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; margin-top: 1.1rem; font-size: .95rem; }
.ch__legend li { display: inline-flex; align-items: center; gap: .5rem; }
.ch__legend i { width: .85rem; height: .85rem; border-radius: .15rem; flex: none; }
.ch__legend b { font-variant-numeric: tabular-nums; }

/* donut */
.ch--donut { display: grid; grid-template-columns: var(--ring, 16rem) 1fr; gap: 1.8rem; align-items: center; }
.ch__ring { position: relative; width: var(--ring, 16rem); height: var(--ring, 16rem); }
.ch__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ch__ring circle { fill: none; stroke-width: 15; stroke-dasharray: 0 var(--C); }
.chart.is-playing .ch__ring circle { stroke-dasharray: var(--len) var(--C); transition: stroke-dasharray var(--dur) linear var(--delay); }
.ch__center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ch__center strong { font-family: var(--font-serif); font-weight: 500; font-size: 2.9rem; line-height: 1; color: var(--saffron); }
.ch__center span { font-size: .85rem; color: var(--muted); margin-top: .3rem; max-width: 8rem; line-height: 1.25; }
.ch--donut .ch__legend { flex-direction: column; gap: .65rem; margin: 0; font-size: 1rem; }

/* ---------- 10 · Survey overview ---------- */
.s10 { gap: 3rem; }
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.s10 .stat-row .stat { border-left: 1px solid var(--line); padding-left: 1.5rem; }
.s10 .stat-row .stat:first-child { border-left: 0; padding-left: 0; }
.s10 .stat__num { font-size: 3.4rem; }
.s10 .stat__label { font-size: 1.1rem; }
.s10__charts { display: grid; grid-template-columns: 1fr 1.1fr; gap: 5rem; align-items: center; }
.s10__charts .chart[data-chart="column"] { --plot-h: 17rem; --col-w: 2.8rem; }

/* ---------- 11 · Practice ---------- */
.s11 { display: grid; grid-template-columns: 1.25fr 1.05fr .8fr; gap: 3.2rem; align-items: center; }
.s11 .chart[data-chart="donut"] { --ring: 17rem; }
.s11 .chart[data-chart="hbar"] { --label-w: 9.5rem; --track-h: 2.1rem; --row-gap: 1.15rem; --label-size: 1.05rem; --val-size: 1.05rem; }
.stat-stack { display: grid; gap: 1.1rem; }
.s11 .stat--card .stat__num { font-size: 2.9rem; }
.s11 .stat--card .stat__label { font-size: 1rem; }

/* ---------- 12 · Difficulty ↔ feature ---------- */
.s12 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 6rem; row-gap: 3rem; }
.s12 .chart { --label-w: 17.5rem; --track-h: 1.9rem; --row-gap: 1.05rem; --label-size: 1.05rem; --val-size: 1.05rem; }
.chart-link { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 3; }
.chart-link path { fill: none; stroke: var(--saffron); stroke-width: 2.2; stroke-dasharray: 1; stroke-dashoffset: 1; }
.chart-link circle { fill: var(--saffron); opacity: 0; }
.chart-link.is-playing path { stroke-dashoffset: 0; transition: stroke-dashoffset .8s ease-in-out 1.25s; }
.chart-link.is-playing circle { opacity: 1; transition: opacity .3s 1.2s; }
.match-banner {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
  background: var(--card); border-radius: var(--radius);
  padding: 1.4rem 1.9rem; font-size: 1.35rem;
}
.match-banner .icon { color: var(--saffron); font-size: 1.6rem; margin: 0 .4rem; }
.match-banner__num { font-family: var(--font-serif); font-size: 2.8rem; line-height: 1; color: var(--saffron); }

/* ---------- 13 · Usefulness ---------- */
.s13 { display: grid; grid-template-columns: 1.5fr 1fr; gap: 5rem; align-items: center; }
.s13 .chart { --plot-h: 23rem; --col-w: 3.6rem; --axis-size: 1.1rem; --val-size: 1.1rem; }
.s13 .ch__axis span { font-weight: 600; color: var(--text); }
.s13 .stat-stack { gap: 2rem; }
.s13 .stat { padding-bottom: 1.8rem; border-bottom: 1px solid var(--line); }
.s13 .stat:last-child { border-bottom: 0; padding-bottom: 0; }
.s13 .stat__num { font-size: 3.4rem; }
.s13 .stat__label { font-size: 1.15rem; }

/* ---------- 14 · Doctors ---------- */
.s14 { gap: 2.8rem; }
.s14 .stat--card { padding: 1.6rem 1.7rem; }
.s14 .stat--card .stat__num { font-size: 3.1rem; }
.s14 .stat--card .stat__label { font-size: 1.08rem; }
.s14__row { display: grid; grid-template-columns: 1fr 1.35fr; gap: 4rem; align-items: center; }
.s14__bars { display: flex; flex-direction: column; gap: 1.2rem; }
.s14 .chart { --label-w: 13rem; --track-h: 2.1rem; --row-gap: 1.1rem; --label-size: 1.08rem; --val-size: 1.08rem; }
.caution { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.3rem; align-items: stretch; }
.caution__quote, .caution__response { border-radius: var(--radius); padding: 1.6rem 1.7rem; }
.caution__quote { background: rgba(194, 85, 43, .09); }
.caution__quote p:last-child { font-family: var(--font-serif); font-style: italic; font-size: 1.4rem; line-height: 1.4; }
.caution__response { background: var(--card); font-size: 1.2rem; line-height: 1.45; }
.caution__response strong { color: var(--green); }
.caution__arrow { align-self: center; color: var(--saffron); font-size: 1.8rem; }

/* ---------- 15 · Insights ---------- */
.s15 { gap: 2.6rem; }
.insight-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.insight { background: var(--card); border-radius: var(--radius); padding: 1.7rem 1.8rem 1.9rem; }
.insight .icon-badge { background: #fff; width: 3.2rem; height: 3.2rem; font-size: 1.6rem; margin-bottom: 1.2rem; }
.insight__num { font-family: var(--font-serif); font-size: 3.3rem; line-height: 1; color: var(--saffron); white-space: nowrap; }
.insight__unit { font-family: var(--font-sans); font-size: 1rem; color: var(--muted); margin-left: .3rem; }
.insight h3 { font-size: 1.35rem; font-weight: 600; color: var(--green); margin: .8rem 0 .3rem; }
.insight p:last-child { font-size: 1.05rem; color: var(--muted); }
.statement--refined { background: var(--green); padding: 2rem 2.4rem 2.2rem; }
.statement--refined .label { color: #E2B878; }
.statement--refined .statement__text { color: var(--ivory); font-size: 1.62rem; }

/* ---------- 16 · Journey ---------- */
.s16 { gap: 1.4rem; }
.persona { display: flex; align-items: center; gap: 1.1rem; }
.persona__avatar {
  width: 3rem; height: 3rem; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--green); color: var(--ivory);
  font-family: var(--font-serif); font-size: 1.4rem;
}
.persona__name { font-size: 1.02rem; color: var(--muted); padding-right: 1.6rem; border-right: 1px solid var(--line); }
.persona__name strong { color: var(--text); display: block; font-size: 1.2rem; }
.persona__goal { font-size: 1.1rem; }
.persona__goal .label { display: inline; margin-right: .7rem; }
.journey {
  display: grid; grid-template-columns: 8rem repeat(5, 1fr);
  grid-template-rows: auto 9.5rem auto auto auto;
  row-gap: .55rem;
}
.jr-stage, .jr-cell { margin: 0 .25rem; transition: opacity .25s, background-color .25s, box-shadow .25s; }
.jr-stage {
  border: 0; background: var(--card); border-radius: var(--radius);
  padding: .75rem .9rem; text-align: left; cursor: pointer;
  font-size: .98rem; font-weight: 600; color: var(--green); line-height: 1.2;
  display: flex; align-items: center; gap: .6rem;
}
.jr-stage__n {
  display: inline-grid; place-items: center; flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: #fff; font-size: .74rem; color: var(--green);
}
.jr-stage--us { background: var(--saffron); color: #fff; }
.jr-stage--us .jr-stage__n { color: var(--saffron-ink); }
.jr-stage[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--green); }
.jr-rowhead { align-self: center; font: 600 .7rem/1.2 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-right: .6rem; }
.jr-cell { font-size: .95rem; line-height: 1.35; padding: .75rem .85rem; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); }
.jr-cell--pain { background: rgba(194, 85, 43, .07); border-color: transparent; }
.jr-cell--opp { background: rgba(110, 142, 90, .1); border-color: transparent; }
.jr-cell--us { box-shadow: inset 0 0 0 1.5px rgba(200, 134, 42, .55); }
.jr-curve { grid-column: 2 / -1; position: relative; }
.jr-curve::before { content: ""; position: absolute; left: .25rem; right: .25rem; top: 50%; height: 1px; background: var(--line); }
.jr-curve svg { position: absolute; left: 0; right: 0; top: 1.1rem; bottom: 1.1rem; width: 100%; height: calc(100% - 2.2rem); overflow: visible; clip-path: inset(0 100% 0 0); }
.jr-curve__line { fill: none; stroke: var(--green); stroke-width: 2.4; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.journey.is-playing .jr-curve svg { clip-path: inset(0 0 0 0); transition: clip-path 1.6s cubic-bezier(.45, .05, .35, 1) .2s; }
.jr-point { position: absolute; translate: -50% -50%; opacity: 0; transition: opacity .3s; z-index: 1; }
.jr-point i { display: block; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 3px #fff; }
.jr-point[data-tone="positive"] i { background: var(--positive); }
.jr-point[data-tone="negative"] i { background: var(--negative); }
.jr-point b { position: absolute; left: 50%; bottom: calc(100% + .4rem); translate: -50% 0; font-size: .95rem; font-weight: 600; white-space: nowrap; color: var(--text); }
.jr-point--high b { bottom: auto; top: calc(100% + .4rem); }
.journey.is-playing .jr-point { opacity: 1; transition: opacity .35s ease-out var(--pd, 0ms); }
.journey .is-dim { opacity: .28; }

/* ---------- 17 · Value proposition canvas ---------- */
.s17 { align-items: center; }
.vpc { position: relative; display: grid; grid-template-columns: 37rem 10rem 33rem; align-items: center; gap: 2rem; }
.vpc__links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 3; }
.vpc__links path { fill: none; stroke: var(--saffron); stroke-width: 2.2; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .6s ease-out forwards; }
.vpc__links circle { fill: var(--saffron); }
@keyframes draw { to { stroke-dashoffset: 0; } }
.vpc__title { font: 600 .78rem/1.2 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .8rem; text-align: center; }
.vpc h3 { font-size: .98rem; font-weight: 600; color: var(--green); margin-bottom: .6rem; }
.vpc ul { display: grid; gap: .4rem; }
.vpc li { font-size: .9rem; line-height: 1.3; }
.vpc-square__grid {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  height: 33rem; border: 1.5px solid var(--green); border-radius: var(--radius); overflow: hidden;
}
.vpc-square__products { grid-row: span 2; padding: 1.4rem 1.3rem; border-right: 1.5px solid var(--green); }
.vpc-square__gains { padding: 1.3rem 1.3rem; border-bottom: 1.5px solid var(--green); background: rgba(110, 142, 90, .08); }
.vpc-square__pains { padding: 1.3rem 1.3rem; background: rgba(194, 85, 43, .06); }
.vpc-square__products li { padding: .6rem .7rem; background: var(--card); border-radius: .3rem; }
.vpc-square__products ul { gap: .55rem; }
.vpc-square__gains li, .vpc-square__pains li { padding: .4rem .6rem; border-radius: .3rem; background: #fff; transition: background-color .25s, box-shadow .25s, color .25s; }
.vpc li.is-fit { background: var(--saffron); color: #fff; box-shadow: 0 0 0 2px rgba(200, 134, 42, .25); }
.vpc__fit { position: relative; z-index: 4; text-align: center; display: grid; justify-items: center; gap: .9rem; }
.vpc__fit-label { font-family: var(--font-serif); font-size: 2rem; color: var(--saffron); background: var(--page); padding: 0 .7rem; }
.vpc__hint { background: var(--page); }
.vpc__hint { font-size: .8rem; color: var(--muted); line-height: 1.35; }
.vpc-circle__shape {
  position: relative; width: 33rem; height: 33rem; border-radius: 50%;
  border: 1.5px solid var(--green); overflow: hidden;
}
.vpc-circle__shape::before { content: ""; position: absolute; left: 61%; top: 0; bottom: 0; width: 1.5px; background: var(--green); }
.vpc-circle__shape::after { content: ""; position: absolute; left: 0; width: 61%; top: 50%; height: 1.5px; background: var(--green); }
.vpc-circle__gains, .vpc-circle__pains, .vpc-circle__jobs { position: absolute; }
.vpc-circle__gains { left: 19%; top: 15%; width: 40%; }
.vpc-circle__pains { left: 14%; top: 54%; width: 45%; }
.vpc-circle__jobs { left: 64%; top: 28%; width: 29%; }
.vpc-circle__shape ul { gap: .45rem; }
.vpc-circle__shape button {
  width: 100%; text-align: left; cursor: pointer;
  border: 1px solid var(--line); background: #fff; border-radius: .3rem;
  padding: .45rem .6rem; font-size: .9rem; line-height: 1.25;
  transition: background-color .2s, border-color .2s, color .2s;
}
.vpc-circle__shape button:hover { border-color: var(--saffron); }
.vpc-circle__shape button[aria-pressed="true"] { background: var(--saffron); border-color: var(--saffron); color: #fff; }
.vpc-circle__shape button b { color: var(--saffron-ink); margin-left: .2rem; }
.vpc-circle__shape button[aria-pressed="true"] b { color: #fff; }
.vpc-circle__jobs li { padding: .35rem 0; border-bottom: 1px solid var(--line); }
.vpc-circle__jobs li:last-child { border-bottom: 0; }

/* ---------- 18 · Solution ---------- */
.s18 { gap: 1.6rem; }
.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.4rem; }
.flow__step { position: relative; display: flex; align-items: center; gap: .9rem; background: var(--card); border-radius: var(--radius); padding: .85rem 1.1rem; }
.flow__step .icon-badge { background: #fff; width: 2.6rem; height: 2.6rem; font-size: 1.3rem; }
.flow__step strong { display: block; font-size: 1.1rem; color: var(--green); }
.flow__step span:not(.icon-badge) { display: block; font-size: .88rem; color: var(--muted); line-height: 1.25; }
.flow__step + .flow__step::before {
  content: ""; position: absolute; left: -1.75rem; top: 50%; width: 1.1rem; height: 1.1rem; translate: 0 -50%;
  background: var(--saffron);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.s18__main { display: grid; grid-template-columns: 1.35fr 1fr; gap: 2.8rem; align-items: center; }
.dosha-map { width: 100%; border-collapse: collapse; font-size: 1.05rem; }
.dosha-map th, .dosha-map td { padding: 1.1rem .8rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.35; }
.dosha-map thead th { font: 600 .7rem/1.2 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-top: 0; }
.dosha-map tbody th { width: 7.4rem; }
.dosha-map tbody th small { display: block; font-size: .86rem; color: var(--muted); font-weight: 400; margin-top: .2rem; padding-left: 1.15rem; }
.dosha-map td:last-child { font-weight: 600; color: var(--green); }
.dosha-tag { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--text); }
.dosha-tag::before { content: ""; width: .65rem; height: .65rem; border-radius: 50%; background: var(--c); }
.dosha-tag--vata { --c: var(--vata); }
.dosha-tag--pitta { --c: var(--pitta); }
.dosha-tag--kapha { --c: var(--kapha); }
.proto-line { font-size: 1.05rem; display: flex; align-items: baseline; gap: 1.1rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.proto-line .label { margin: 0; flex: none; color: var(--saffron-ink); }

/* ---------- 19 · Hardware ---------- */
.s19 { gap: 1.2rem; }
.diagram--hw { grid-template-columns: repeat(5, 1fr); column-gap: 3rem; }
.diagram--hw .node { min-height: 8rem; }
.s19 .caption { margin-bottom: 1rem; }
.s19__row { display: grid; grid-template-columns: 1.1fr 1fr; gap: 4.4rem; align-items: center; }
.bom { width: 100%; border-collapse: collapse; font-size: 1.08rem; }
.bom caption { display: table-caption; caption-side: top; text-align: left; }
.bom th, .bom td { padding: .62rem .2rem; border-bottom: 1px solid var(--line); text-align: left; }
.bom thead th { font-size: .82rem; color: var(--muted); font-weight: 600; }
.bom td:last-child, .bom th:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bom td:last-child { font-weight: 600; color: var(--green); }
.s19__cost { display: flex; flex-direction: column; gap: 1.8rem; }
.s19__cost .stat__label { max-width: 32rem; font-size: 1.15rem; }
.feasibility { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.8rem; }
.feasibility li { display: flex; gap: .8rem; align-items: flex-start; }
.feasibility strong { display: block; font-size: 1.12rem; color: var(--green); }
.feasibility span:not(.mark) { display: block; font-size: .95rem; color: var(--muted); }

/* ---------- 20 · Demo ---------- */
.s20 { justify-content: flex-start; }
.s20 .pulse-vis { flex: 1; min-height: 0; }

/* ---------- 21 · End ---------- */
.slide--end .slide__head, .slide--end .slide__body { position: relative; z-index: 2; }
.s21 { justify-content: flex-start; gap: 2.4rem; }
.end-points { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.3rem; }
.end-points article { background: rgba(255, 255, 255, .06); border-radius: var(--radius); padding: 1.3rem 1.5rem 1.5rem; font-size: 1.1rem; line-height: 1.4; }
.end-points strong { color: #E2B878; }
.thanks { font-family: var(--font-serif); font-size: 5.2rem; line-height: 1.05; color: var(--ivory); letter-spacing: -.02em; margin-top: 2.6rem; }
.thanks span { color: var(--saffron); margin: 0 .3em; }
.end-pulse { position: absolute; left: 0; right: 0; bottom: calc(var(--bar-h) + 3.4rem); height: 26%; z-index: 1; pointer-events: none; opacity: .8; }
.references { position: absolute; left: 0; bottom: 0; z-index: 5; font-size: .82rem; }
.references summary {
  cursor: pointer; display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem 1rem; border-radius: 999px; border: 1px solid rgba(245, 241, 232, .35);
  color: rgba(245, 241, 232, .85); list-style: none; background: var(--green);
}
.references summary::-webkit-details-marker { display: none; }
.references summary::after { content: "+"; font-weight: 600; }
.references[open] summary::after { content: "−"; }
.references ol {
  position: absolute; left: 0; bottom: calc(100% + .6rem); width: 64rem;
  list-style: decimal; padding: 1.3rem 1.5rem 1.3rem 2.8rem;
  background: #16302A; border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--radius);
  display: grid; gap: .5rem; line-height: 1.4; color: rgba(245, 241, 232, .9);
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .3);
}
.references a { color: #E2B878; }

/* =====================================================================
   PULSE VISUALISER
   ===================================================================== */
.pulse-vis {
  --pv-fg: var(--text);
  --pv-muted: var(--muted);
  --pv-panel: var(--card);
  --pv-btn: #fff;
  --pv-btn-border: #D6DCD4;
  --pv-strap: #E6DACA;
  --pv-strap-edge: #D3C2AC;
  --pv-tip: #F3E3D1;
  --pv-tip-edge: #D8C0A4;
  color: var(--pv-fg);
  position: relative;
}
.pulse-vis--dark {
  --pv-fg: var(--ivory);
  --pv-muted: rgba(245, 241, 232, .6);
  --pv-panel: rgba(255, 255, 255, .06);
  --pv-btn: rgba(255, 255, 255, .06);
  --pv-btn-border: rgba(255, 255, 255, .16);
  --pv-strap: rgba(255, 255, 255, .1);
  --pv-strap-edge: rgba(255, 255, 255, .16);
  --pv-tip: #EAD8C3;
  --pv-tip-edge: #CDB497;
}
.pv { display: grid; gap: .9rem; height: 100%; }
.pv--full { grid-template-rows: auto minmax(0, 1fr); }
.pv__toolbar, .pv__quiz { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; min-height: 2.6rem; }
.pv__doshas { display: inline-flex; gap: .45rem; }
.pv-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .95rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--pv-btn-border); background: var(--pv-btn); color: var(--pv-fg);
  font-size: .85rem; font-weight: 600; line-height: 1.1; white-space: nowrap;
  transition: background-color .2s, border-color .2s, color .2s, transform .15s, box-shadow .2s;
}
.pv-btn:hover { border-color: var(--pv-muted); }
.pv-btn:active { transform: scale(.97); }
.pv-btn:disabled { opacity: .45; cursor: default; }
.pv-btn small { font-weight: 400; color: var(--pv-muted); font-size: .74rem; }
.pv-btn .dot { width: .62rem; height: .62rem; border-radius: 50%; background: var(--c); flex: none; }
.pv-btn[aria-pressed="true"] { background: var(--c, var(--green)); border-color: var(--c, var(--green)); color: #fff; }
.pv-btn[aria-pressed="true"] small { color: rgba(255, 255, 255, .8); }
.pv-btn[aria-pressed="true"] .dot { background: #fff; }
.pv-btn--dosha { padding: .58rem 1.15rem; font-size: .98rem; }
.pv-btn--icon { width: 2.5rem; height: 2.5rem; padding: 0; justify-content: center; font-size: 1rem; }
.pv-btn--accent { background: var(--saffron); border-color: var(--saffron); color: #fff; }
.pv-btn--accent:hover { border-color: #fff; }
.pulse-vis--dark .pv-btn[aria-pressed="true"]:not([data-dosha]) { background: var(--ivory); border-color: var(--ivory); color: var(--green); }
.pv-range { display: inline-flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--pv-muted); font-weight: 500; }
.pv-range input { width: 6.5rem; accent-color: var(--saffron); }
.pv-range output { min-width: 2.6em; color: var(--pv-fg); font-variant-numeric: tabular-nums; font-weight: 600; }
.pv__sep { width: 1px; align-self: stretch; background: var(--pv-btn-border); margin: .2rem .2rem; }
.pv__spacer { flex: 1; }

.pv__stage { display: grid; grid-template-columns: minmax(0, 1fr) 25rem; gap: 1rem; min-height: 0; }
.pv.is-compare .pv__stage { grid-template-columns: minmax(0, 1fr); }
.pv.is-compare .pv__side { display: none; }
.pv__monitors { display: flex; flex-direction: column; gap: .6rem; min-height: 0; }
.pv-monitor { position: relative; flex: 1; min-height: 0; border-radius: .55rem; background: var(--screen); overflow: hidden; }
.pv-monitor canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pv-monitor__head {
  position: absolute; z-index: 1; top: .75rem; left: 1rem; right: 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  color: var(--ivory); font-size: .88rem; pointer-events: none;
}
.pv-monitor__name { display: inline-flex; align-items: center; gap: .5rem; }
.pv-monitor__name .dot { width: .62rem; height: .62rem; border-radius: 50%; background: var(--c); transition: background-color .5s; }
.pv-monitor__name strong { font-size: 1.02rem; }
.pv-monitor__name em { font-style: normal; color: rgba(245, 241, 232, .6); }
.pv-monitor__stats { display: inline-flex; align-items: center; gap: .9rem; }
.pv-bpm { font-variant-numeric: tabular-nums; color: rgba(245, 241, 232, .65); }
.pv-bpm b { font-family: var(--font-serif); font-weight: 500; font-size: 1.6rem; color: var(--ivory); margin-right: .2rem; display: inline-block; min-width: 1.8em; text-align: right; }
.pv-reg { padding: .2rem .6rem; border-radius: 999px; font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; background: rgba(255, 255, 255, .1); }
.pv-reg.is-irregular { background: rgba(194, 85, 43, .35); }
.pv-monitor__scale { position: absolute; z-index: 1; left: 1rem; bottom: .55rem; font-size: .66rem; color: rgba(245, 241, 232, .4); pointer-events: none; }
.pv-monitor__feel { position: absolute; z-index: 1; right: 1rem; bottom: .55rem; font-size: .76rem; color: rgba(245, 241, 232, .55); pointer-events: none; }
.pv.is-compare .pv-monitor__head { top: .5rem; }
.pv.is-compare .pv-bpm b { font-size: 1.25rem; }

.pv__side { display: flex; flex-direction: column; gap: .8rem; min-height: 0; }
.pv-panel { background: var(--pv-panel); border-radius: .55rem; padding: .9rem 1.05rem 1rem; }
.pv-panel__label { font: 600 .64rem/1.2 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--pv-muted); margin-bottom: .6rem; display: flex; justify-content: space-between; gap: .5rem; }

/* info card (full mode) */
.pv-info__title { display: flex; align-items: baseline; gap: .55rem; font-family: var(--font-serif); font-size: 1.4rem; line-height: 1.15; }
.pv-info__title .dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--c); align-self: center; flex: none; }
.pv-info__title em { font-family: var(--font-sans); font-style: normal; font-size: .82rem; color: var(--pv-muted); }
.pv-info__feel { font-size: .92rem; margin-top: .35rem; line-height: 1.35; }
.pv-info__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin-top: .75rem; padding-top: .7rem; border-top: 1px solid var(--pv-btn-border); }
.pv-info__facts dt { font: 600 .58rem/1.2 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--pv-muted); }
.pv-info__facts dd { margin: .2rem 0 0; font-size: .82rem; font-weight: 600; line-height: 1.25; }

/* three fingers */
.pv-fingers__band { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); justify-items: center; padding-top: .3rem; }
.pv-fingers__band::before {
  content: ""; position: absolute; left: -.2rem; right: -.2rem; top: 1.2rem; height: 1.9rem;
  background: var(--pv-strap); border: 1px solid var(--pv-strap-edge); border-radius: 1rem;
}
.pv-finger { position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.pv-finger__tip {
  width: 3.2rem; height: 3.2rem; border-radius: 50%;
  background: var(--pv-tip); border: 2px solid var(--pv-tip-edge);
  will-change: transform, box-shadow;
}
.pv-finger__name { font-size: .85rem; font-weight: 600; margin-top: .2rem; }
.pv-finger__seat { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; color: var(--pv-muted); }
.pv-finger__seat i { width: .45rem; height: .45rem; border-radius: 50%; background: var(--c); }
.pv-finger.is-dominant .pv-finger__name::after { content: " · strongest"; font-weight: 400; color: var(--pv-muted); }

/* device */
.pv-device svg { width: 100%; height: auto; display: block; overflow: visible; }
.pv-device__strap { fill: var(--pv-strap); stroke: var(--pv-strap-edge); }
.pv-device__pod { fill: #24443B; }
.pulse-vis--dark .pv-device__pod { fill: #0F1F1A; }
.pv-device__led { fill: #4b5a55; transition: fill .08s; }
.pv-device__led.is-on { fill: #E2B878; }
.pv-motor__body { fill: #3B5A50; stroke: rgba(255, 255, 255, .25); stroke-width: 1; transition: fill .06s; }
.pv-motor__core { fill: rgba(255, 255, 255, .5); }
.pv-motor { transform-box: fill-box; transform-origin: center; }
.pv-motor.is-on .pv-motor__body { fill: var(--c); }
.pv-motor.is-on { animation: buzz .07s linear infinite; }
.pv-motor__label { font: 600 9px var(--font-sans); fill: rgba(245, 241, 232, .55); text-anchor: middle; }
.pv-ripple { fill: none; stroke-width: 2; transform-box: fill-box; transform-origin: center; pointer-events: none; }
@keyframes buzz { 0% { translate: 0 0; } 25% { translate: .6px -.4px; } 50% { translate: -.5px .5px; } 75% { translate: .4px .5px; } 100% { translate: 0 0; } }
.pv-timeline { position: relative; height: .9rem; border-radius: .2rem; background: rgba(127, 127, 127, .14); margin-top: .8rem; overflow: hidden; }
.pv-timeline__seg { position: absolute; top: 0; bottom: 0; background: var(--c); }
.pv-timeline__head { position: absolute; top: -.15rem; bottom: -.15rem; width: 2px; background: var(--pv-fg); left: 0; }
.pv-device__pattern { margin-top: .55rem; font-size: .76rem; color: var(--pv-muted); display: flex; justify-content: space-between; gap: .6rem; }
.pv-device__pattern b { color: var(--pv-fg); font-weight: 600; }

/* quiz */
.pv__quiz[hidden], .pv__toolbar[hidden] { display: none; }
.pv-quiz__prompt { font-family: var(--font-serif); font-size: 1.45rem; margin-right: .4rem; }
.pv-quiz__answers { display: inline-flex; gap: .45rem; }
.pv-quiz__feedback { font-size: .92rem; min-width: 0; flex: 1 1 14rem; line-height: 1.3; }
.pv-quiz__feedback strong { font-weight: 600; }
.pv-quiz__feedback.is-correct strong { color: #9CC27F; }
.pv-quiz__feedback.is-wrong strong { color: #F0A07E; }
.pulse-vis:not(.pulse-vis--dark) .pv-quiz__feedback.is-correct strong { color: #4F6E3D; }
.pulse-vis:not(.pulse-vis--dark) .pv-quiz__feedback.is-wrong strong { color: var(--pitta); }
.pv-quiz__score { font-size: .85rem; color: var(--pv-muted); white-space: nowrap; }
.pv-quiz__score b { font-family: var(--font-serif); font-size: 1.4rem; color: var(--pv-fg); font-weight: 500; }
.pv-btn:disabled.is-correct, .pv-btn:disabled.is-wrong, .pv-btn:disabled.is-answer { opacity: 1; }
.pv-btn.is-correct { background: var(--positive); border-color: var(--positive); color: #fff; animation: pop .45s var(--ease-out); }
.pv-btn.is-wrong { background: var(--negative); border-color: var(--negative); color: #fff; animation: shake .4s ease-in-out; }
.pv-btn.is-correct small, .pv-btn.is-wrong small { color: rgba(255, 255, 255, .85); }
.pv-btn.is-correct .dot, .pv-btn.is-wrong .dot { background: #fff; }
.pv-btn.is-answer { box-shadow: 0 0 0 3px var(--positive); }
@keyframes shake { 0%, 100% { translate: 0; } 20% { translate: -.35rem; } 40% { translate: .35rem; } 60% { translate: -.2rem; } 80% { translate: .2rem; } }

/* single (slide 18) */
.pv--single { grid-template-rows: auto 15rem auto; gap: .8rem; }
.pv--single .pv__stage { grid-template-columns: 1fr; }
.pv--single .pv-fingers { display: grid; grid-template-columns: 9.5rem 1fr; align-items: center; gap: 1rem; padding: .8rem 1.1rem; }
.pv--single .pv-fingers .pv-panel__label { margin: 0; display: block; }
.pv--single .pv-fingers__band { padding-top: 0; }
.pv--single .pv-finger__tip { width: 2.8rem; height: 2.8rem; }
.pv--single .pv-fingers__band::before { top: .85rem; height: 1.5rem; }

/* full (slide 20) */
.pv--full .pv-fingers { flex: none; }
.pv--full .pv-device { flex: 1; display: flex; flex-direction: column; justify-content: center; }

/* =====================================================================
   OVERLAYS: notes, overview, help, tooltip
   ===================================================================== */
.notes-panel {
  position: fixed; left: 0; right: 0; bottom: var(--bar-h); z-index: 24;
  padding: 0 var(--pad-x);
  transform: translateY(calc(100% + var(--bar-h))); visibility: hidden;
  transition: transform .35s var(--ease-out), visibility 0s linear .35s;
}
.notes-panel.is-open { transform: none; visibility: visible; transition: transform .35s var(--ease-out), visibility 0s; }
.notes-panel__inner {
  display: grid; grid-template-columns: 13rem 1fr 10rem; gap: 2rem;
  background: #fff; color: var(--text);
  border: 1px solid var(--line); border-radius: .7rem .7rem 0 0;
  box-shadow: 0 -.8rem 2.5rem rgba(15, 31, 26, .18);
  padding: 1.2rem 1.6rem 1.3rem;
  max-height: 40vh; overflow: auto;
}
.notes-panel__meta { display: grid; gap: .55rem; align-content: start; border-right: 1px solid var(--line); padding-right: 1.4rem; }
.notes-panel__meta .label { margin-bottom: .1rem; }
.notes-panel__meta strong { font-size: .92rem; }
.notes-panel__title { font-family: var(--font-serif); font-size: 1.15rem; color: var(--green); margin-bottom: .5rem; }
#notesBody ul { list-style: disc; padding-left: 1.2rem; display: grid; gap: .35rem; }
#notesBody li { font-size: .95rem; line-height: 1.45; }
.notes-panel__handover { margin-top: .6rem; font-size: .82rem; color: var(--saffron-ink); font-weight: 600; }
.notes-panel__timer { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; text-align: right; }
.notes-panel__timer strong { font-family: var(--font-serif); font-weight: 500; font-size: 2.4rem; line-height: 1; color: var(--green); font-variant-numeric: tabular-nums; }

.overlay {
  position: fixed; inset: 0; z-index: 40;
  display: grid; place-items: center;
  background: rgba(15, 31, 26, .72);
  padding: 2rem;
  animation: fadeIn .2s ease-out;
}
.overlay[hidden] { display: none; }
@keyframes fadeIn { from { opacity: 0; } }
.overlay__panel {
  background: #fff; color: var(--text); border-radius: .8rem;
  padding: 1.6rem 1.8rem 1.8rem; width: min(40rem, 100%); max-height: 100%; overflow: auto;
  box-shadow: 0 2rem 4rem rgba(0, 0, 0, .3);
}
.overlay__panel--wide { width: min(86rem, 100%); }
.overlay__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; }
.overlay__head h2 { font-family: var(--font-serif); font-weight: 500; font-size: 1.6rem; color: var(--green); }
.overlay .icon-btn { color: var(--muted); }
.overlay .icon-btn:hover { background: var(--card); color: var(--text); }
.overview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .9rem; }
.overview-card {
  width: 100%; height: 100%; min-height: 7rem; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: .35rem;
  padding: .9rem 1rem; border-radius: var(--radius);
  border: 1px solid var(--line); background: #fff;
  transition: border-color .2s, transform .15s, box-shadow .2s;
}
.overview-card:hover { border-color: var(--saffron); transform: translateY(-2px); box-shadow: 0 .4rem 1rem rgba(15, 31, 26, .08); }
.overview-card.is-dark { background: var(--green); color: var(--ivory); border-color: var(--green); }
.overview-card[aria-current="true"] { box-shadow: 0 0 0 3px var(--saffron); }
.overview-card__n { font-family: var(--font-serif); font-size: 1.3rem; line-height: 1; color: var(--saffron); }
.overview-card__section { font: 600 .58rem/1.2 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.overview-card.is-dark .overview-card__section { color: rgba(245, 241, 232, .6); }
.overview-card__title { font-size: .85rem; font-weight: 600; line-height: 1.3; }
.shortcuts { display: grid; grid-template-columns: auto 1fr; gap: .7rem 1.6rem; align-items: center; }
.shortcuts dd { font-size: .92rem; }
kbd {
  display: inline-block; min-width: 1.7rem; padding: .15rem .45rem; margin: .1rem .1rem;
  border: 1px solid #CBD3CB; border-bottom-width: 2px; border-radius: .3rem;
  font: 600 .75rem/1.3 var(--font-sans); text-align: center; background: var(--card); color: var(--text);
}
.shortcuts__note { margin-top: 1.3rem; font-size: .8rem; color: var(--muted); }
.shortcuts__note code { font-size: .78rem; background: var(--card); padding: .05rem .3rem; border-radius: .2rem; }

.tooltip {
  position: fixed; z-index: 50; pointer-events: none;
  background: var(--text); color: #fff;
  padding: .35rem .6rem; border-radius: .3rem;
  font-size: .78rem; font-weight: 500; white-space: nowrap;
  transform: translate(-50%, calc(-100% - .6rem));
}

/* =====================================================================
   SMALL SCREENS & PORTRAIT: stack layouts, scroll inside a slide
   ===================================================================== */
@media (max-width: 767px), (max-aspect-ratio: 4/5), (max-height: 520px) {
  html { font-size: 15px; }
  :root { --pad-x: 1.2rem; --bar-h: calc(3.8rem + env(safe-area-inset-bottom, 0px)); }
  .deck-bar { padding-bottom: env(safe-area-inset-bottom, 0px); }
  .slide { padding: 3.2rem var(--pad-x) calc(var(--bar-h) + 1.6rem); overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
  .slide__body { flex: none; justify-content: flex-start; align-content: start; }
  .slide__head { padding-right: 3rem; }
  .slide__title { font-size: 1.9rem; }
  .motif { top: 1.4rem; }
  .deck-bar { grid-template-columns: 1fr auto; gap: .6rem; background: var(--page); border-top: 1px solid var(--line); }
  body[data-theme="dark"] .deck-bar { background: var(--green); border-top-color: rgba(255, 255, 255, .1); }
  .skill-card, .scope-card, .insight, .sdg__body, .statement { padding: 1.3rem 1.4rem; }
  .section-nav, .presenter-tag__label, #helpBtn, #fullscreenBtn { display: none; }
  .presenter-tag { justify-self: start; }
  .counter { margin: 0 .3rem; }

  .s2__bottom, .s3__row, .s4, .s6, .s7, .s8, .s10__charts, .s11, .s12, .s13, .s14__row, .s18__main, .s19__row,
  .skill-row, .sdg-grid, .stat-row, .insight-grid, .end-points, .flow, .tile-row, .quality-list, .feasibility {
    grid-template-columns: 1fr;
  }
  .s2, .s3, .s5, .s10, .s14, .s15 { gap: 1.6rem; }
  .s4, .s6, .s7, .s8, .s10__charts, .s11, .s12, .s13, .s14__row, .s19__row { gap: 1.6rem; }
  .skill-card__name { font-size: 1.6rem; }
  .s2 .lead, .quote-card blockquote p { font-size: 1.25rem; }
  .s3 .statement__text, .statement__text, .statement--refined .statement__text { font-size: 1.25rem; }
  .objective-list p { font-size: 1.05rem; }
  .s2__bottom .stat { border-left: 0; padding-left: 0; }
  .s10 .stat-row .stat { border-left: 0; padding-left: 0; }
  .flow__step + .flow__step::before { display: none; }
  .diagram--mclellan, .diagram--hw { grid-template-columns: 1fr; row-gap: 1.2rem; }
  .diagram--mclellan .node, .diagram--hw .node { min-height: 0; }
  .diagram--mclellan [data-node="press"] { grid-column: 1; grid-row: auto; }
  .diagram--loop { column-gap: 2rem; }
  .findings__head { display: none; }
  .finding { grid-template-columns: 1fr; row-gap: .5rem; }
  .finding__arrow { justify-content: start; transform: rotate(90deg); width: 1.5rem; }
  .s12 .chart, .s11 .chart[data-chart="hbar"], .s14 .chart { --label-w: 8.5rem; }
  .chart-link { display: none; }
  .ch--donut { grid-template-columns: 1fr; justify-items: center; }
  .caution { grid-template-columns: 1fr; }
  .caution__arrow { transform: rotate(90deg); justify-self: center; }
  /* Journey map: one card-stack per stage instead of a wide table */
  .journey { display: flex; flex-direction: column; }
  .jr-corner, .jr-rowhead, .jr-curve svg, .jr-curve::before { display: none; }
  .jr-curve { display: contents; }
  .jr-stage[data-col="1"], .jr-point[data-col="1"], .jr-cell[data-col="1"] { --c: 1; }
  .jr-stage[data-col="2"], .jr-point[data-col="2"], .jr-cell[data-col="2"] { --c: 2; }
  .jr-stage[data-col="3"], .jr-point[data-col="3"], .jr-cell[data-col="3"] { --c: 3; }
  .jr-stage[data-col="4"], .jr-point[data-col="4"], .jr-cell[data-col="4"] { --c: 4; }
  .jr-stage[data-col="5"], .jr-point[data-col="5"], .jr-cell[data-col="5"] { --c: 5; }
  .jr-stage, .jr-point, .jr-cell { order: calc(var(--c) * 10 + var(--o, 2)); }
  .jr-stage { --o: 0; }
  .jr-point { --o: 1; }
  .jr-cell { --o: 2; }
  .jr-cell--pain { --o: 3; }
  .jr-cell--opp { --o: 4; }
  .jr-stage { margin: 1.4rem 0 0; }
  .jr-point { position: static; translate: none; display: flex; align-items: center; gap: .6rem; margin: .5rem .25rem 0; }
  .jr-point b, .jr-point--high b { position: static; translate: none; font-size: .95rem; }
  .jr-point b::before { content: "Emotion: "; font-weight: 400; color: var(--muted); }
  .jr-cell { margin: .4rem 0 0; }
  .jr-cell::before { content: "Doing"; display: block; font: 600 .62rem/1.2 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .2rem; }
  .jr-cell--pain::before { content: "Pain point"; }
  .jr-cell--opp::before { content: "Opportunity"; }

  /* Diagrams: the feedback loop can't be routed through a stacked layout */
  .wire--feedback, .wire-head--feedback { display: none; }
  .posmap__plot { aspect-ratio: 1; }
  .posmap__gap { align-items: flex-start; }
  .bubble--us { padding: .6rem 1.1rem; font-size: 1rem; }
  .gap-banner, .proto-line { flex-direction: column; gap: .6rem; align-items: flex-start; }
  .icon-btn { width: 2.5rem; height: 2.5rem; }
  .nav-btn { width: 2.7rem; height: 2.7rem; }
  .persona { flex-wrap: wrap; }
  .persona__name { border-right: 0; }
  .vpc { grid-template-columns: 1fr; justify-items: center; }
  .vpc-square { width: 100%; }
  .vpc-square__grid { height: auto; }
  .vpc-circle__shape { width: 100%; height: auto; border-radius: 1.5rem; display: grid; gap: 1rem; padding: 1.2rem; }
  .vpc-circle__shape::before, .vpc-circle__shape::after { display: none; }
  .vpc-circle__gains, .vpc-circle__pains, .vpc-circle__jobs { position: static; width: auto; }
  .vpc__links { display: none; }
  .pv { grid-template-columns: minmax(0, 1fr); }
  .pv__stage { grid-template-columns: minmax(0, 1fr); }
  .pv__doshas, .pv-quiz__answers { flex-wrap: wrap; }
  .pv-btn--dosha { padding: .5rem .8rem; font-size: .9rem; }
  .pv-btn--dosha small, .pv-monitor__name em { display: none; }
  .pv-finger.is-dominant .pv-finger__name::after { content: ""; }
  .pv-range input { width: 5rem; }
  .pv--full { grid-template-rows: auto auto; }
  .pv--full .pv__monitors { min-height: 16rem; }
  .pv.is-compare .pv__monitors { min-height: 24rem; }
  .s20 .pulse-vis { flex: none; }
  .title-hero { padding-top: 4rem; }
  .title-hero__name { font-size: 4rem; }
  .thanks { font-size: 2.6rem; }
  .references { position: static; margin-top: 1rem; }
  .references ol { position: static; width: auto; margin-top: .6rem; }
  .notes-panel__inner { grid-template-columns: 1fr; }
  .notes-panel__meta { border-right: 0; padding-right: 0; grid-template-columns: 1fr 1fr; }
  .notes-panel__timer { align-items: flex-start; text-align: left; }
  .matrix { font-size: .85rem; }
  .matrix th, .matrix td { padding: .5rem .35rem; }
}

/* =====================================================================
   REDUCED MOTION: no entrance animation; pulses keep running (slower)
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .slide, .slide.is-active { transform: none !important; transition: opacity .2s linear, visibility 0s linear .2s !important; }
  .slide.is-active { transition: opacity .2s linear, visibility 0s !important; }
  .reveal, .reveal--pop, .node { opacity: 1 !important; transform: none !important; transition: none !important; }
  .wire, .chart-link path { stroke-dashoffset: 0 !important; transition: none !important; }
  .wire-head, .chart-link circle, .jr-point, .ch__bracket { opacity: 1 !important; transition: none !important; }
  .ch--column .ch__bar, .ch--hbar .ch__bar { transform: none !important; transition: none !important; }
  .ch__val { opacity: 1 !important; transition: none !important; }
  .ch__stackbar, .jr-curve svg { clip-path: none !important; transition: none !important; }
  .ch__ring circle { stroke-dasharray: var(--len) var(--C) !important; transition: none !important; }
  .slide.is-revealed .matrix .mark { animation: none; }
  .vpc__links path { animation: none; stroke-dashoffset: 0; }
  .pv-motor.is-on { animation: none; }
  .progress__fill { transition: none; }
}