/* 03 — SECTION IMPLEMENTATIONS */

/* S01 HERO */

.hero {
  display: flex; align-items: center;
  min-height: 88svh;
  padding-block: calc(var(--unit) * 0.85) calc(var(--unit) * 0.75);

  
  background-color: var(--ink);
  
  padding-bottom: calc(var(--unit) * 0.15 + min(95vw, 26rem));
  position: relative;
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: min(95vw, 26rem);
  background-image:
    linear-gradient(to top,
      rgba(11, 27, 54, 0.06) 0%,
      rgba(11, 27, 54, 0.14) 30%,
      rgba(11, 27, 54, 0.55) 62%,
      rgba(11, 27, 54, 0.92) 84%,
      rgb(21, 19, 15) 100%),
    url("../img/hero-jpb-human-mind-mastery-mobile.jpg");
  background-repeat: no-repeat, no-repeat;
  background-size: auto, cover;
  background-position: center, 68% bottom;
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }

@media (min-width: 520px) and (max-width: 899px) {
  
  .hero::after {
    background-image:
      linear-gradient(to top,
        rgba(11, 27, 54, 0.06) 0%,
        rgba(11, 27, 54, 0.14) 30%,
        rgba(11, 27, 54, 0.55) 62%,
        rgba(11, 27, 54, 0.92) 84%,
        rgb(21, 19, 15) 100%),
      url("../img/hero-jpb-human-mind-mastery-tablet.jpg");
  }
}

@media (max-width: 519px) {
  #s01 .hero__facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1.2rem;
  }
  #s01 .hero__facts li + li::before { content: none; }
  #s01 .hero__fact--dur { display: list-item; }
}
@supports not (min-height: 1svh) { .hero { min-height: 88vh; } }

.hero__inner { display: grid; gap: var(--space-sm); max-width: 52rem; }

@media (min-width: 900px) {
  
  .hero::after { content: none; }
  .hero {
    padding-bottom: calc(var(--unit) * 0.75);
    background-image:
      linear-gradient(to right,
        rgba(11, 27, 54, 0.96) 0%,
        rgba(11, 27, 54, 0.94) 30%,
        rgba(11, 27, 54, 0.72) 48%,
        rgba(11, 27, 54, 0.22) 64%,
        rgba(11, 27, 54, 0.10) 100%),
      url("../img/hero-jpb-human-mind-mastery.jpg");
    
    background-size: auto, cover;
    background-position: center, center right;
  }
  
  .hero__inner { max-width: min(52rem, 52%); }
  
  #s01 .hero__h1 { font-size: clamp(2.4rem, 1.1rem + 2.3vw, 3.25rem); }
}
.hero__ident {
  font-size: var(--t-body-lg);
  letter-spacing: 0.02em;
  line-height: var(--lh-tight);
  color: var(--fg-primary);
}
.hero__cat {
  font-size: var(--t-body);
  line-height: 1.45;
  letter-spacing: 0.03em;
  color: var(--fg-muted);
  margin-top: -0.35rem;
}

.hero__cat-hl {
  background: var(--highlight);
  color: var(--highlight-text);
  padding: 0.1em 0.38em;
  border-radius: 2px;
  
  white-space: nowrap;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.hero__h1 {
  margin-block: 0.15em 0.1em;
  overflow-wrap: break-word;
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  font-size: var(--t-hero);
  line-height: var(--lh-hero);
  letter-spacing: var(--tr-hero);
  max-width: var(--m-hero);
  color: var(--fg-primary);
  text-wrap: pretty;
}

.hero__facts {
  display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem;
  font-size: var(--t-small);
  color: var(--highlight);
  font-weight: 700;
}
.hero__facts li { display: flex; align-items: center; gap: 0.9rem; }
.hero__facts li + li::before {
  content: "·";
  color: var(--fg-muted);
  font-weight: 400;
}
.hero__fac { display: grid; gap: 0.4rem; }
.hero__fac-name { font-size: var(--t-body-lg); color: var(--fg-primary); }
.hero__authority { font-size: var(--t-small); color: var(--fg-muted); max-width: 48ch; }
.hero__desc { font-size: var(--t-caption); color: var(--fg-muted); }
.hero__desc span + span::before { content: " · "; }
@media (max-width: 599px) {
  .hero__desc { display: grid; }
  .hero__desc span + span::before { content: none; }
  .hero__fact--dur { display: none; }
}
@media (min-width: 1280px) {
  
  .hero__inner { max-width: min(57rem, 52%); }
}

.hero .rule { margin-top: var(--space-md); }
@media (min-width: 900px) {
  .hero__inner { gap: var(--space-sm); }
  .hero .rule { margin-top: var(--space-lg); }
}

/* S01B NLP ORIENTATION */

.nlp__set { margin-top: var(--space-xl); }

.nlp__part { padding-block: var(--space-md) 0; }
.nlp__part:first-child { padding-top: 0; }

.nlp__term {
  font-family: var(--font-display);
  font-size: var(--t-timeline);
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--fg-primary);
}
.nlp__text {
  margin-top: 0.5em;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg-secondary);
  max-width: 44ch;
}

.nlp__visual {
  margin: var(--space-xl) 0 0;
  width: min(56rem, 100%);
}
.nlp__visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 78% center;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 5%, #000 95%, transparent 100%);
}
@media (min-width: 700px) {
  .nlp__visual {
    width: min(56rem, calc(100% + 2 * var(--space-lg)), calc(100vw - 3rem));
    margin-inline: auto;
  }
  .nlp__visual img { aspect-ratio: 16 / 9; object-position: center; }
}
@media (min-width: 1100px) {
  .nlp__visual {
    width: min(60rem, calc(100% + 2 * var(--space-2xl)), calc(100vw - 6rem));
    margin-inline: auto;
  }
}

.nlp__seq {
  margin-top: var(--space-xl);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0.45em 0;
  font-size: var(--t-body-lg);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  
  color: var(--fg-primary);
}
.nlp__seq-link {
  color: var(--fg-muted);
  padding: 0 0.65em;
  font-size: 0.72em;
  opacity: 0.75;
}

.nlp__story {
  margin-top: var(--space-md);
  display: grid;
  gap: 0.3em;
  max-width: 52ch;
}
.nlp__story p { color: var(--fg-secondary); }

.nlp__story-close {
  margin-top: var(--space-md);
  color: var(--fg-primary);
  max-width: 52ch;
}

.nlp__synth-lead {
  margin-top: var(--space-lg);
  font-size: var(--t-body-lg);
  color: var(--fg-secondary);
  max-width: 44ch;
}

.hl {
  background: var(--highlight);
  color: var(--highlight-text);
  padding: 0.1em 0.3em;
  border-radius: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* S01B tools / techniques */

.nlp__tools { margin-top: var(--space-2xl); }

.nlp__tools-lede {
  font-size: var(--t-body);
  color: var(--fg-secondary);
  max-width: 58ch;
}
.nlp__tools-lede + .nlp__tools-lede { margin-top: 1em; }

.nlp__tools-big {
  margin-top: var(--space-xl);
  font-family: var(--font-display);
  font-size: var(--t-timeline);
  line-height: 1.25;
  color: var(--fg-primary);
  max-width: 30ch;
}

.nlp__tech { margin-top: var(--space-xl); display: grid; gap: 0; }

.nlp__tech-item {
  
  border-top: 1px solid var(--rule);
  padding: var(--space-sm) 0 var(--space-lg);
  display: grid;
  gap: 0.4em;
}
.nlp__tech-item:last-child { padding-bottom: 0; }

.nlp__tech-num {
  font-size: var(--t-caption);
  letter-spacing: 0.14em;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}
.nlp__tech-term {
  font-size: var(--t-body-lg);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-primary);
}
.nlp__tech-plain {
  font-size: var(--t-body);
  color: var(--fg-primary);
  max-width: 46ch;
}
.nlp__tech-for {
  font-size: var(--t-body);
  color: var(--fg-secondary);
  max-width: 54ch;
}

.nlp__tools-cue {
  margin-top: var(--space-xl);
  font-size: var(--t-caption);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.nlp__tools-close {
  margin-top: 0.9em;
  font-family: var(--font-display);
  font-size: var(--t-insight);
  line-height: var(--lh-insight);
  letter-spacing: var(--tr-insight);
  color: var(--fg-primary);
  max-width: 30ch;
}

.nlp__tools-close .hl { white-space: nowrap; }

.nlp__weeks {
  font-style: normal;
  color: var(--fg-primary);
  border-bottom: 1px solid var(--fg-primary);
  padding-bottom: 0.06em;
}

.nlp__turn {
  margin-top: var(--space-2xl);
  font-family: var(--font-display);
  font-size: var(--t-insight);
  line-height: var(--lh-insight);
  letter-spacing: var(--tr-insight);
  color: var(--fg-primary);
  max-width: 26ch;
}

@media (min-width: 900px) {
  .nlp__set { margin-top: var(--space-2xl); }
  
  .nlp__part {
    padding-block: var(--space-lg) 0;
  }
  .nlp__part:first-child { padding-top: 0; }
  .nlp__text { max-width: 40ch; }
  
  .nlp__seq { font-size: var(--t-body-lg); }

  
  .nlp__tech-item {
    grid-template-columns: 20rem 1fr;
    column-gap: var(--space-lg);
    grid-template-areas:
      "num  for"
      "term for"
      "plain for";
    align-items: start;
  }
  .nlp__tech-num   { grid-area: num; }
  .nlp__tech-term  { grid-area: term; }
  .nlp__tech-plain { grid-area: plain; }
  .nlp__tech-for   {
    grid-area: for;
    padding-left: var(--space-lg);
    border-left: 1px solid var(--rule);
  }
}

/* S03 BRANCH DIAGRAM */

.s03 { text-align: center; }
.s03 .display { margin-inline: auto; }
.s03__setup { margin-inline: auto; margin-top: var(--space-sm); }
.s03__hint {
  margin-top: var(--space-xl);
  font-size: var(--t-caption);
  color: var(--fg-muted);
}

.s03__visual {
  margin: var(--space-xl) auto 0;
  width: min(48rem, 100%);
}
.s03__visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  
  object-position: 58% center;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 5%, #000 95%, transparent 100%);
}
@media (min-width: 700px) {
  .s03__visual { width: min(48rem, 82%, calc(100vw - 3rem)); }
  .s03__visual img { aspect-ratio: 16 / 9; }
}
@media (min-width: 1100px) {
  .s03__visual { width: min(52rem, 82%, calc(100vw - 6rem)); }
}
.s03__diagram { margin-top: var(--space-xl); }

.s03__event {
  display: inline-block;
  padding: 1.35rem 2.75rem;
  border: 1px solid var(--fg-muted);
  font-size: var(--t-body-lg);
  line-height: var(--lh-cell);
  color: var(--fg-primary);
}
.s03__stem { display: flex; flex-direction: column; align-items: center; }
.s03__line-v { width: 1px; height: 3.5rem; background: var(--fg-muted); opacity: 0.55; }
.s03__point {
  width: 21px; height: 21px; border-radius: 50%;
  background: var(--accent-contextual);
  box-shadow: 0 0 0 10px rgba(201, 163, 72, 0.15),
              0 0 0 22px rgba(201, 163, 72, 0.06);
}
html.motion-ready .s03__point { opacity: 0; transition: opacity var(--dur-slow) var(--ease-out); }
html.motion-ready .s03__point.is-in { opacity: 1; }
.s03__pad { display: none; }
.s03__split {
  
  width: calc((100% - 14px) / 2 + 14px); height: 3.25rem;
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  border-top: 1px solid var(--rule);
  margin-inline: auto;
}

.s03__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 14px;
  row-gap: 0;
  text-align: left;
  margin-top: 0.5rem;
}
.s03__head {
  font-size: var(--t-small);
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--rule);
}
.s03__label {
  grid-column: 1 / -1;
  font-size: var(--t-small);
  color: var(--fg-muted);
  padding-block: 1.05rem 0.4rem;
}
.s03__cell {
  font-size: var(--t-cell);
  line-height: var(--lh-cell);
  color: var(--fg-primary);
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--rule);
}

.s03__visual + .s03__hint { margin-top: var(--space-md); }

.s03__cell--quote { font-family: var(--font-display); }

@media (max-width: 779px) {
  #s03 .s03__cell { font-size: 1rem; line-height: 1.5; }
}
.s03__label-spacer { display: none; }

@media (min-width: 780px) {
  .s03__grid { grid-template-columns: 108px 1fr 1fr 108px; column-gap: 32px; }
  .s03__cell { font-size: var(--t-body-lg); }
  .s03__split { width: calc((100% - 312px) / 2 + 32px); }
  .s03__pad { display: block; }
  .s03__label {
    grid-column: 1; text-align: right;
    padding-block: 1.05rem 0.9rem;
    border-bottom: 1px solid var(--rule);
  }
  .s03__label-spacer { display: block; border-bottom: 1px solid var(--rule); }
  .s03__cell { padding-block: 1.15rem 1rem; }
}

.s03__insight { margin-top: calc(var(--space-3xl) * 1.25); }
.s03__insight p { color: var(--fg-secondary); }
.s03__insight .insight { margin-block: var(--space-2xl); max-width: 20ch; }
.s03__bridge { margin-top: var(--space-xl); display: grid; gap: 1.2em; justify-items: center; }
.s03__bridge p { color: var(--fg-secondary); max-width: 46ch; }

@media (min-width: 768px) {
  #s03 .insight { max-width: 30rem; }
}

/* S03B RECOGNITION BY CONTEXT */

.rec__visual { margin: var(--space-xl) auto var(--space-lg); width: 100%; }
.rec__visual-full { display: none; }
.rec__visual-seq { display: grid; gap: 0.5rem; }
.rec__visual-seq span {
  display: block;
  aspect-ratio: 3 / 4;
  background-image: url("../img/jpb-human-mind-same-pattern.jpg");
  background-repeat: no-repeat;
  background-size: 400% auto;
  background-position: calc(var(--p) * 33.3333%) 28%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 4%, #000 96%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 4%, #000 96%, transparent 100%);
}
@media (max-width: 479px) {
  
  
  .rec__visual-seq {
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--hairline);
  }
  .rec__visual-seq span { background-position: calc(var(--p) * 33.3333%) 18%; }
}

@media (min-width: 760px) {
  
  .rec__visual { width: min(60rem, 88%, calc(100vw - 3rem)); }
  .rec__visual-seq { display: none; }
  .rec__visual-full {
    display: block;
    width: 100%;
    height: auto;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 4%, #000 96%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 4%, #000 96%, transparent 100%);
  }
}
.rec__grid {
  margin-top: var(--space-xl);
  display: grid;
  gap: var(--space-lg) var(--space-md);
}
.rec__group {
  
  padding-top: var(--space-sm);
  border-top: 1px solid var(--rule);
}
.rec__title {
  font-size: var(--t-body-lg);
  color: var(--fg-primary);
  letter-spacing: 0.01em;
}

.rec__list {
  margin-top: 1.4em;
  display: grid;
  gap: 1.6em;
  counter-reset: rec-q;
}
.rec__list li {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg-secondary);
  max-width: 34ch;
  counter-increment: rec-q;
}

.rec__list li::before {
  content: counter(rec-q, decimal-leading-zero);
  display: block;
  margin-bottom: 0.45em;
  font-size: var(--t-caption);
  font-weight: 400;
  letter-spacing: 0.18em;
  font-variant-numeric: tabular-nums;
  color: var(--fg-muted);
}
.rec__close {
  margin-top: var(--space-xl);
  color: var(--fg-secondary);
  max-width: 52ch;
}

@media (min-width: 900px) {
  .rec__close { max-width: 56rem; }
}

@media (min-width: 700px) {
  .rec__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  
  .rec__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-lg);
    row-gap: var(--space-2xl);
  }
  .rec__list li { max-width: none; }
}

/* S05 — one light field */

.m02 { position: relative; }
.m02__b1, .m02__b2 { background: none; border: 0; }

.m02__b2 { margin-top: var(--space-2xl); }

.m02__b2 { padding-bottom: var(--space-lg); }

.blocks {
  display: grid; gap: 0;
}
.blocks__item {
  border-top: 1px solid var(--rule);
  padding: 1.1rem 0 var(--space-lg);
}
.blocks__item:last-child { padding-bottom: 0; }
.blocks__title { font-size: var(--t-body-lg); color: var(--fg-primary); }
.blocks__text { font-size: var(--t-body); color: var(--fg-secondary); margin-top: 0.45em; }
@media (min-width: 900px) {
  .blocks { grid-template-columns: 1fr 1fr; column-gap: 0; }
  .blocks__item { padding-inline: var(--space-md); }
  .blocks__item:nth-child(odd) { padding-left: 0; }
  .blocks__item:nth-child(even) {
    padding-right: 0;
    border-left: 1px solid var(--rule);
  }
  .blocks__item:nth-last-child(-n+2) { padding-bottom: 0; }
}

/* S06 JOURNEY — continuous path */

.jl { margin-top: var(--space-2xl); }

@media (min-width: 1024px) {
  #s06 > .wrap > .display {
    --s06-head: min(68rem, calc(100vw - 3rem));
    max-width: none;
    width: var(--s06-head);
    margin-inline: calc((100% - var(--s06-head)) / 2);
    text-align: center;
  }
}
.jl__bar, .jl__seg { display: none; }

.jl__map {
  --jl-rail: 2.4rem;
  margin-top: var(--space-lg);
  display: block;
  position: relative;
}

.jl__map::before {
  content: "";
  position: absolute;
  left: calc(var(--jl-rail) / 2);
  top: 0.85em;
  bottom: 0.85em;
  width: 1px;
  background: linear-gradient(to bottom,
    rgba(201, 163, 72, 0.10),
    rgba(201, 163, 72, 0.34) 12%,
    rgba(201, 163, 72, 0.34) 88%,
    rgba(201, 163, 72, 0.10));
}

.jl__phase {
  position: relative;
  padding: 0 0 var(--space-md) var(--jl-rail);
  background: none;
  border: 0;
  border-radius: 0;
  display: block;
}
.jl__phase:last-child { padding-bottom: 0; }

.jl__phase::before {
  content: "";
  position: absolute;
  left: calc(var(--jl-rail) / 2 - 2.5px);
  top: 0.72em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent-action);
  opacity: 0.55;
}

.jl__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 0 0.7rem;
  width: 100%;
  min-height: 44px;
  padding: 0 0 0.2rem;
  text-align: left;
}
.jl__num {
  font-size: var(--t-caption);
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.jl__name {
  font-size: var(--t-body-lg);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-primary);
  line-height: 1.25;
  overflow-wrap: break-word;
}
.jl__count {
  grid-column: 2;
  font-size: var(--t-small);
  color: var(--text-secondary);
}
.jl__mark { grid-column: 3; grid-row: 1; align-self: center; }

.jl__desc {
  margin-top: 0.5em;
  font-size: var(--t-body);
  color: var(--text-secondary);
  max-width: 62ch;
}
.jl__more { padding: 0.7rem 0 0.2rem; }
.jl__more li {
  font-size: var(--t-small);
  color: var(--text-secondary);
  padding-left: 1.1rem; position: relative; margin-top: 0.5em;
}
.jl__more li::before {
  content: ""; position: absolute; left: 0; top: 0.75em;
  width: 5px; height: 1px; background: var(--text-secondary); opacity: 0.6;
}

@media (min-width: 700px) {
  
  .jl__map { --jl-rail: 3.4rem; }
  
  .jl__phase {
    padding-left: calc(var(--jl-rail) + 3rem);
    padding-bottom: var(--space-lg);
  }
  .jl__head { grid-template-columns: 1fr auto; gap: 0 1rem; }
  .jl__num {
    position: absolute;
    left: calc(var(--jl-rail) + 0.1rem);
    top: 0.55em;
  }
  .jl__count { grid-column: 1; }
  .jl__mark { grid-column: 2; }
}
@media (min-width: 1024px) {
  
  .jl__map {
    --jl-rail: 4rem;
    width: min(56rem, calc(100vw - 6rem));
    margin-inline: calc((100% - min(56rem, calc(100vw - 6rem))) / 2);
  }
}

/* S07 TERM TRANSLATION */

@media (min-width: 768px) {
  #s07 > .wrap > .display { max-width: 40rem; }
}

.terms__intro { display: grid; gap: 1.4em; }
.terms__intro + .display { margin-top: var(--space-2xl); }

#s07 .terms__term { color: var(--fg-secondary); }

.terms { margin-top: var(--space-lg); }
.terms__row { border-top: 1px solid var(--rule); }
.terms__row:last-child { border-bottom: 1px solid var(--rule); }
.terms__trigger {
  display: grid; gap: 0.3rem;
  grid-template-columns: 1fr auto;
  width: 100%; min-height: 44px;
  padding-block: 1.25rem;
  text-align: left;
}
.terms__link { display: none; }
.terms__term {
  grid-column: 1;
  font-family: var(--font-display);
  font-size: var(--t-body);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-muted);
  display: flex; align-items: center; gap: 0.6rem;
}
.terms__plain {
  grid-column: 1;
  font-size: var(--t-body-lg);
  color: var(--fg-primary);
}
.terms__mark { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.terms__body { padding-bottom: 1.6rem; }
.terms__body p { font-size: var(--t-body); color: var(--fg-secondary); max-width: 62ch; }
.terms__body p + p { margin-top: 0.9em; }
.terms__after { margin-top: var(--space-lg); }

@media (min-width: 900px) {
  .terms__trigger {
    grid-template-columns: minmax(0, 32fr) 6rem minmax(0, 52fr) auto;
    align-items: baseline; gap: 0 var(--space-sm);
  }
  .terms__term  { grid-column: 1; grid-row: 1; }
  .terms__link  {
    display: block; grid-column: 2; grid-row: 1;
    align-self: center; height: 1px;
    border-top: 1px dotted var(--fg-muted); opacity: 0.6;
  }
  .terms__plain { grid-column: 3; grid-row: 1; }
  .terms__mark  { grid-column: 4; grid-row: 1; align-self: center; }
  .terms__body  { padding-left: calc(32% + 6rem); }
}

/* S09 FACILITATOR */

.fac { display: grid; gap: var(--space-md); }
.fac__name {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.3rem + 2.8vw, 3.25rem);
  line-height: 1.1; letter-spacing: -0.015em;
  color: var(--fg-primary);
}

.fac__role {
  margin-top: 0.7em;
  font-size: var(--t-small);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--fg-secondary);
}

.fac__portrait {
  display: block;
  aspect-ratio: 4 / 5;
  width: 100%;
  height: auto;
  
  max-width: 24rem;
  margin-inline: auto;
  
  object-fit: contain;
  object-position: center;
}
.fac__sub {
  font-family: var(--font-display);
  font-size: var(--t-body-lg);
  line-height: 1.35;
  color: var(--fg-primary);
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-sm);
  border-bottom: 1px solid var(--rule);
}
.fac__story { display: grid; gap: 1.2em; }
.fac__story--b { margin-top: 1.2em; }

.fac__layout { display: block; }
.fac__media { margin-inline: auto; }
.fac__head { margin-top: var(--space-md); text-align: center; }

.fac__col { display: block; margin-top: var(--space-xl); max-width: 60ch; margin-inline: auto; }
@media (max-width: 899px) {
  .fac__sub { margin-bottom: var(--space-xs); }
}
.fac__story p { color: var(--fg-secondary); max-width: 60ch; }
.fac__close { display: grid; gap: 1.2em; margin-top: 1.2em; }
.fac__close p:first-child { color: var(--fg-secondary); }
.fac__close p:last-child { color: var(--fg-primary); font-size: var(--t-body-lg); max-width: 48ch; }

@media (min-width: 900px) {
  
  .fac__portrait { max-width: 20rem; }
}

/* S10 MILESTONES */

.ms { margin-top: var(--space-lg); display: grid; }
.ms__item {
  position: relative;
  padding-left: 2.6rem;
  padding-bottom: var(--space-md);
}

.ms__item::before {
  content: ""; position: absolute; left: 5px; top: 0.6em; bottom: 0;
  width: 1px; background: var(--fg-primary); opacity: 0.28;
}
.ms__item:last-child::before { display: none; }
.ms__item::after {
  content: ""; position: absolute; left: 0; top: 0.35em;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--zone-bg);
  border: 1px solid var(--fg-primary); opacity: 0.55;
}
.ms__item:last-child::after { background: var(--fg-primary); opacity: 0.75; }
.ms__item:last-child { padding-top: var(--space-sm); padding-bottom: 0; }

.ms__when {
  font-size: var(--t-small); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fg-secondary);
}
.ms__title {   /* TIMELINE-TITLE role — deliberately not the INSIGHT class */
  font-family: var(--font-display);
  font-size: var(--t-timeline);
  line-height: 1.25;
  margin-top: 0;
  color: var(--fg-primary);
}
.ms__when + .ms__title { margin-top: 0.35em; }
.ms__text { font-size: var(--t-body); color: var(--fg-secondary); margin-top: 0.6em; max-width: 56ch; }
.ms__applied { margin-top: var(--space-xl); padding-left: 2.6rem; display: grid; gap: 1.1em; }
.ms__applied p { color: var(--fg-primary); max-width: 60ch; }
.ms__applied p + p { color: var(--fg-secondary); }
.ms__cred { margin-top: var(--space-lg); margin-left: 2.6rem; }
.ms__bridge { margin-top: var(--space-lg); }

/* S11 DELIVERABLES */

/* S11 — four levels / weights */

.deliv { margin-top: var(--space-xl); display: grid; gap: var(--space-xl); }

.deliv__lead-title {
  font-family: var(--font-display);
  font-size: var(--t-timeline);
  line-height: 1.2;
  color: var(--fg-primary);
}
.deliv__lead-text {
  margin-top: 0.7em;
  font-size: var(--t-body-lg);
  color: var(--fg-secondary);
  max-width: 46ch;
}
.deliv__lead-text + .deliv__lead-text { margin-top: 0.6em; }

.deliv__pair { display: grid; gap: var(--space-lg); }
.deliv__item { border-top: 1px solid var(--rule); padding-top: 1.1rem; }
.deliv__title { font-size: var(--t-body-lg); color: var(--fg-primary); }
.deliv__text { font-size: var(--t-body); color: var(--fg-secondary); margin-top: 0.5em; }

.deliv__facts {
  display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  font-size: var(--t-small);
  color: var(--fg-secondary);
}
.deliv__facts li { display: flex; align-items: center; gap: 0.9rem; }
.deliv__facts li + li::before { content: "·"; color: var(--fg-muted); }

.deliv__close {
  font-size: var(--t-small);
  color: var(--fg-muted);
  max-width: 62ch;
}

@media (min-width: 760px) {
  .deliv__pair { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
}
@media (min-width: 1024px) {
  .deliv__lead-text { max-width: 52ch; }
}
.s11__cta { margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid var(--rule); }
.s11__bridge { margin-top: var(--space-2xl); text-align: center; }
.s11__bridge p { margin-inline: auto; }
.s11--no-stories .s11__cta { margin-top: var(--space-2xl); }
.s11--no-stories .s11__bridge { margin-top: var(--space-3xl); }
#s12[hidden] { display: none; }

/* S12 STORIES */

.story { padding-block: var(--space-xl); }
.story:first-child { padding-top: var(--space-lg); }
.story__quote {
  font-family: var(--font-display);
  font-size: var(--t-body-lg);
  line-height: 1.5;
  color: var(--fg-primary);
}
.story__who { margin-top: 1.2em; font-size: var(--t-small); color: var(--fg-primary); }
.story__role { font-size: var(--t-caption); color: var(--fg-muted); }

/* S13 QUALIFICATION */

.qual { margin-top: var(--space-xl); display: grid; gap: var(--space-xl); }
.qual__col { display: grid; gap: var(--space-sm); align-content: start; }
.qual__title { font-size: var(--t-body-lg); color: var(--fg-primary); padding-bottom: 0.4rem; border-bottom: 1px solid var(--rule); }

.qual__groups { display: grid; gap: var(--space-lg); margin-top: 1.4em; }
.qual__group-title {
  font-size: var(--t-caption);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 400;
}
.qual__group .qual__list { margin-top: 0.9em; }

.qual__commit-title {
  margin-top: var(--space-lg);
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
}
.qual__commit { margin-top: 0.9em; }
@media (min-width: 900px) {
  
  .qual__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); }
}

.qual__list { display: grid; gap: 0.7em; }
.qual__list li {
  position: relative; padding-left: 1.25rem;
  color: var(--fg-primary); font-size: var(--t-body);
}
.qual__list li::before {
  content: ""; position: absolute; left: 0; top: 0.72em;
  width: 7px; height: 1px; background: var(--fg-muted);
}
@media (min-width: 900px) {
  
  .qual__col { max-width: 62ch; }
}

/* S14 INVESTMENT */

/* S14 — five levels */

.inv { text-align: center; display: grid; gap: var(--space-md); justify-items: center; }
.inv .display { margin-inline: auto; }

.inv__facts {
  font-size: var(--t-body);
  color: var(--fg-secondary);
  letter-spacing: 0.02em;
  max-width: 100%;
  margin-inline: auto;
  text-wrap: balance;
}

.inv > div:has(.inv__tiers) {
  width: min(40rem, 100%);
}
.inv__tiers {
  margin-top: var(--space-md);
  display: grid;
  gap: 0;
  width: 100%;
  margin-inline: auto;
  background: var(--ink);
  border-radius: 2px;
}
.inv__tier {
  padding: var(--space-md) var(--space-sm);
  min-width: 0;
}

.inv__tier + .inv__tier {
  border-top: 1px solid var(--rule);
}
.inv__tier-label {
  font-size: var(--t-caption);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.inv__tier-price {
  margin-top: 0.3em;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.05rem + 1vw, 1.9rem);
  line-height: 1.05;
  color: var(--fg-muted);
  white-space: nowrap;
}

.inv__tier--member .inv__tier-label { color: var(--fg-secondary); }
.inv__tier--member .inv__tier-price {
  color: var(--fg-primary);
  font-size: clamp(1.8rem, 1.3rem + 1.4vw, 2.5rem);
}
.inv__tier-note {
  margin-top: 0.5em;
  font-size: var(--t-caption);
  color: var(--fg-muted);
}
@media (min-width: 768px) {
  .inv__tiers {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
  }
  .inv__tier {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
  }
  .inv__tier-price { align-self: end; }
  .inv__tier + .inv__tier {
    border-top: 0;
    border-left: 1px solid var(--rule);
  }
}

.inv__incl {
  display: grid; gap: 0.6em;
  margin-top: var(--space-md);
  font-size: var(--t-small); color: var(--fg-secondary);
  padding-top: var(--space-sm); border-top: 1px solid var(--rule);
  min-width: min(26rem, 100%);
}
.inv__access { display: grid; gap: 0.9em; max-width: 48ch; margin-inline: auto; }
.inv__access p { font-size: var(--t-small); color: var(--fg-muted); }

.inv .cta-block { margin-top: var(--space-lg); }
.inv__bridge { margin-top: var(--space-lg); }
.inv__bridge p { margin-inline: auto; }

/* S15 FAQ */

.faq { margin-top: var(--space-lg); }
.faq__group + .faq__group { margin-top: var(--space-xl); }
.faq__group-title {
  font-size: var(--t-caption);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 400;
  margin-bottom: 0.5em;
}
.faq .acc__q { font-size: var(--t-body-lg); color: var(--fg-primary); }
.faq .acc__panel-inner p { font-size: var(--t-body); color: var(--fg-secondary); max-width: 68ch; }
/* Responsive text swap utility (used by S13 closing lines) */
.faq__q-desktop { display: none; }
.faq__q-mobile  { display: inline; }
@media (min-width: 780px) {
  .faq__q-mobile  { display: none; }
  .faq__q-desktop { display: inline; }
}

/* S16 DECISION */

.s16 { padding-block: 0 var(--space-2xl); }

.s16 > .wrap { max-width: calc(40rem + var(--gutter) * 2); }
.s16__silence { height: clamp(10rem, 26vh, 20rem); }
.s16__idea { margin-bottom: var(--space-3xl); max-width: 20ch; }

.rec__close-visual {
  margin: var(--space-2xl) auto 0;
  width: min(46rem, 100%);
}
.rec__close-visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  
  object-position: 25% center;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 4%, #000 96%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 4%, #000 96%, transparent 100%);
}
@media (min-width: 700px) {
  .rec__close-visual { width: min(46rem, 84%, calc(100vw - 3rem)); }
  
  .rec__close-visual img { aspect-ratio: 1672 / 941; object-fit: fill; }
}

.decide { display: grid; justify-items: center; }

.decide__card {
  width: 100%;
  max-width: 28rem;
  display: grid;
  padding: var(--space-sm);
}
.decide__card .cta {
  width: 100%;
  min-height: 4rem;
  text-align: center;
}

.ident {
  margin-top: var(--space-3xl);
  text-align: center; display: grid; gap: 0.6em;
}
.ident__program { font-family: var(--font-display); font-size: var(--t-body-lg); color: var(--fg-primary); }
.ident__by, .ident__fac { font-size: var(--t-caption); color: var(--fg-muted); }