/* ==========================================================================
   AVACEND LABS — v0.5.2 (v0.1 design system, unchanged; v0.2 Experience layer, v0.3 Living Terrains, v0.4 clarity and v0.5 convergence components at the end)
   Layout concept: an architect's drawing sheet. Warm paper matched to the
   locked visuals, graphite annotation labels, one ink voice for people.
   Single deliberate light theme (the locked visuals are light plates).
   ========================================================================== */

:root {
  /* Color — sampled from the locked Learning Lab / Living Lens visuals */
  --paper:    #F1EEE2;  /* identical to the visuals' ground, so plates sit seamlessly */
  --paper-2:  #E8E4D5;  /* a shade deeper, for framed launch plates */
  --ink:      #1A1A17;  /* near-black type; also the "humans lead" voice */
  --graphite: #57564F;  /* secondary text, annotation labels (AA on paper) */
  --rule:     #C7C2B1;  /* hairlines, like the diagrams' pencil lines */
  --moss:     #4D5A48;  /* restrained accent: the terrain, the calibration point */

  /* Type */
  --display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --body:    "Hanken Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif;
  --label:   "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Scale */
  --t-xs: 0.75rem;
  --t-sm: 0.9375rem;
  --t-md: 1.125rem;
  --t-lg: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
  --t-xl: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
  --t-hero: clamp(3rem, 1.6rem + 6.4vw, 7.5rem);

  /* Space */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section: clamp(5.5rem, 12vw, 10rem);
  --measure: 36rem;
  --nav-h: 64px;

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-md);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }
ul, ol, dl, dd { margin: 0; padding: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

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

.skip {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  background: var(--ink); color: var(--paper); padding: .6rem 1rem; text-decoration: none;
}
.skip:focus { top: 1rem; }

.wrap { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Shared type ---------- */
.eyebrow, .label {
  font-family: var(--label); font-size: var(--t-xs); letter-spacing: .14em;
  text-transform: uppercase; color: var(--graphite); margin-bottom: 1.25rem;
}
.h2 {
  font-family: var(--display); font-weight: 300; font-size: var(--t-xl);
  line-height: 1.08; letter-spacing: -0.015em; max-width: 18ch;
}
.h2--wide { max-width: 22ch; }
.h2--stack span { display: block; }
.h2--stack span + span { color: var(--graphite); font-style: italic; }
.lede { font-family: var(--display); font-size: var(--t-lg); line-height: 1.35; max-width: 24ch; }
.lede--sm { font-size: var(--t-lg); margin-top: 1.25rem; color: var(--graphite); max-width: 30ch; }
.prose { display: grid; gap: 1.1rem; max-width: var(--measure); }
.prose__turn { font-family: var(--display); font-size: var(--t-lg); line-height: 1.35; font-style: italic; }

.section { padding-block: var(--section); border-top: 1px solid var(--rule); }

.wrap--split { display: grid; gap: 2.5rem; }
.wrap--split > * { min-width: 0; }
@media (min-width: 900px) {
  .wrap--split { grid-template-columns: 5fr 7fr; gap: 4rem; align-items: start; }
}

/* ---------- Navigation ---------- */
.nav {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent; transition: border-color .3s;
}
.nav.is-scrolled { border-bottom-color: var(--rule); }
.nav__inner {
  max-width: 80rem; margin-inline: auto; padding-inline: var(--gutter);
  min-height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.brand { text-decoration: none; display: flex; flex-direction: column; line-height: 1.15; }
.brand__name { font-family: var(--body); font-weight: 600; font-size: .875rem; letter-spacing: .2em; }
.brand__rel { font-family: var(--label); font-size: .6875rem; color: var(--graphite); letter-spacing: .04em; }
.nav__links { display: flex; align-items: center; gap: 2rem; }
.nav__links a {
  font-size: var(--t-sm); text-decoration: none; color: var(--graphite);
  padding-block: .4rem; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s;
}
.nav__links a:hover, .nav__links a.is-current { color: var(--ink); border-bottom-color: var(--ink); }
.nav__links .nav__cta { color: var(--ink); border: 1px solid var(--rule); padding: .45rem .9rem; }
.nav__links .nav__cta:hover { border-color: var(--ink); }
.nav__toggle { display: none; }

/* v0.3: five destinations — collapse to the menu below 1100px */
@media (max-width: 1099px) {
  .nav__toggle {
    display: inline-flex; background: none; border: 1px solid var(--rule); padding: .45rem .85rem;
    font-family: var(--label); font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  }
  .nav__links {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--rule);
    padding: .5rem var(--gutter) 1.25rem; display: none;
  }
  .nav.is-open .nav__links { display: flex; }
  .nav__links a { padding-block: .9rem; border-bottom: 1px solid var(--rule); font-size: 1.0625rem; color: var(--ink); }
  .nav__links .nav__cta { margin-top: 1rem; text-align: center; padding: .85rem; }
}

/* ---------- Progression rail (wide screens only) ---------- */
.rail {
  list-style: none; position: fixed; left: clamp(1rem, 2vw, 2rem); top: 50%; transform: translateY(-50%);
  z-index: 10; display: none; flex-direction: column; gap: .9rem;
  font-family: var(--label); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--rule);
}
.rail li { position: relative; padding-left: 1.1rem; transition: color .5s; }
.rail li::before {
  content: ""; position: absolute; left: 0; top: 50%; width: .5rem; height: 1px; background: currentColor;
  transition: width .5s;
}
.rail li.is-past { color: var(--graphite); }
.rail li.is-active { color: var(--ink); }
.rail li.is-active::before { width: .8rem; }
@media (min-width: 1440px) { .rail { display: flex; } }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(5rem, 16vh, 11rem) clamp(5rem, 14vh, 9rem); }
.hero__title {
  font-family: var(--display); font-weight: 300; font-size: var(--t-hero);
  line-height: .98; letter-spacing: -0.03em; max-width: 11ch;
}
.hero__copy { margin-top: clamp(2rem, 5vw, 3.5rem); display: grid; gap: .9rem; max-width: 34rem; font-size: var(--t-lg); line-height: 1.45; color: var(--graphite); }
.hero__copy p:last-child { color: var(--ink); }
.signature {
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  font-family: var(--label); font-size: clamp(.8125rem, .75rem + .3vw, .9375rem);
  letter-spacing: .16em; text-transform: uppercase;
  padding-top: 1.25rem; border-top: 1px solid var(--ink); display: inline-block;
}
.hero__cta {
  display: flex; width: fit-content; align-items: center; gap: .7rem; margin-top: 2.5rem;
  font-size: 1rem; letter-spacing: .01em; text-decoration: none;
  background: var(--ink); color: var(--paper); border: 1px solid var(--ink); padding: .95rem 1.5rem;
  transition: background .2s, color .2s;
}
.hero__cta:hover { background: transparent; color: var(--ink); }
.hero__cta span { display: inline-block; transition: transform .3s; }
.hero__cta:hover span { transform: translateY(3px); }

/* ---------- Launch plates for the locked TSEs ---------- */
.plate { margin-top: clamp(3.5rem, 8vw, 6rem); }
.plate__frame {
  position: relative; background: var(--paper-2);
  border: 1px solid var(--ink); outline: 1px solid var(--rule); outline-offset: 6px;
  padding: clamp(2rem, 6vw, 4.5rem) clamp(1.5rem, 6vw, 4.5rem);
  display: grid; gap: .6rem; justify-items: start;
}
.plate__id { font-family: var(--label); font-size: var(--t-xs); letter-spacing: .16em; color: var(--graphite); }
.plate__title { font-family: var(--display); font-style: italic; font-weight: 300; font-size: var(--t-xl); line-height: 1.05; }
.plate__note { font-size: var(--t-sm); color: var(--graphite); }
.plate__launch {
  margin-top: 1.5rem; background: var(--ink); color: var(--paper); border: 1px solid var(--ink);
  padding: .95rem 1.5rem; font-size: var(--t-sm); letter-spacing: .02em; cursor: pointer;
  display: inline-flex; gap: .7rem; align-items: center; transition: background .2s, color .2s;
}
.plate__launch:hover { background: transparent; color: var(--ink); }
.plate__launch span { transition: transform .3s; }
.plate__launch:hover span { transform: translateX(4px); }
.plate--quiet .plate__frame { background: transparent; }

.placeholder-tag {
  margin-top: 1rem; font-family: var(--label); font-size: .6875rem; letter-spacing: .06em;
  color: #7A3B12; border: 1px dashed #7A3B12; padding: .4rem .6rem; max-width: 100%; width: fit-content;
}

/* ---------- Locked visuals ---------- */
.visual { margin: clamp(3rem, 7vw, 5rem) auto; max-width: 84rem; padding-inline: var(--gutter); }
.visual__open {
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in;
}
.visual__open img { width: 100%; height: auto; }
.visual__cap {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem 1rem;
  margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--rule);
  font-family: var(--label); font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--graphite);
}
.linkbtn {
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink);
  font-family: var(--label); font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase;
  border-bottom: 1px solid var(--ink);
}
/* On small screens the plate is readable only enlarged; make the affordance prominent. */
@media (max-width: 700px) {
  .visual { padding-inline: 0; }
  .visual__cap { padding-inline: var(--gutter); }
  .linkbtn { padding: .55rem .8rem; border: 1px solid var(--ink); }
}

/* ---------- Learning Lab ---------- */
.steps { display: grid; border-top: 1px solid var(--rule); }
.steps__row { display: grid; gap: .25rem; padding-block: 1.1rem; border-bottom: 1px solid var(--rule); }
.steps__row dt { font-family: var(--label); font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; }
.steps__row dd { color: var(--graphite); }
@media (min-width: 600px) {
  .steps__row { grid-template-columns: 14rem 1fr; gap: 1.5rem; align-items: baseline; }
}

.calibrate { margin-top: 3rem; display: grid; gap: .9rem; max-width: var(--measure); }
.calibrate__mark {
  display: flex; align-items: center; gap: .6rem; margin-bottom: .75rem;
  font-family: var(--label); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--graphite);
}
.calibrate__line { flex: 1; height: 1px; background: var(--rule); min-width: 1rem; }
.calibrate__pt { color: var(--moss); white-space: nowrap; }
.calibrate__pt::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--moss); margin-right: .45rem; vertical-align: 1px; }
.calibrate__q { font-family: var(--display); font-size: var(--t-lg); font-style: italic; line-height: 1.35; }

.coda { margin-top: 3rem; font-family: var(--display); font-size: var(--t-lg); line-height: 1.35; color: var(--graphite); }
.coda strong { font-weight: 400; color: var(--ink); font-size: var(--t-xl); line-height: 1.1; display: inline-block; margin-top: .35rem; }

/* ---------- Living Lens ---------- */
.helps { list-style: none; display: grid; border-top: 1px solid var(--rule); }
.helps li {
  font-family: var(--display); font-size: var(--t-lg); line-height: 1.3;
  padding-block: .8rem; border-bottom: 1px solid var(--rule);
}

.roles { margin-top: clamp(4rem, 9vw, 7rem); display: grid; gap: 1.25rem; }
@media (min-width: 720px) { .roles { grid-template-columns: 1fr 1fr; gap: 0; } }
.roles__col { padding: clamp(1.75rem, 4vw, 3rem); min-width: 0; }
.roles__col ul { list-style: none; display: grid; gap: .35rem; }
.roles__head {
  font-family: var(--label); font-size: .8125rem; letter-spacing: .18em; text-transform: uppercase;
  margin-bottom: 1.75rem;
}
/* AI: pencil-line, annotation register — present, supportive, not the decider */
.roles__col--ai { border: 1px dashed var(--graphite); color: var(--graphite); }
.roles__col--ai li { font-family: var(--display); font-size: var(--t-lg); font-weight: 300; }
/* Humans: solid ink — where meaning, judgment and choice live */
.roles__col--human { background: var(--ink); color: var(--paper); border: 1px solid var(--ink); }
.roles__col--human li { font-family: var(--display); font-size: var(--t-lg); }

.anchor {
  margin-top: clamp(3rem, 7vw, 5rem); font-family: var(--display); font-weight: 300;
  font-size: var(--t-xl); line-height: 1.12; max-width: 26ch; letter-spacing: -0.01em;
}
.anchor span { display: block; }
.anchor span:first-child { color: var(--graphite); }

/* ---------- Terrain ---------- */
.cycle { list-style: none; display: grid; gap: .2rem; }
.cycle li {
  font-family: var(--display); font-size: var(--t-lg); font-weight: 300; line-height: 1.5;
  position: relative;
}
.cycle__responds { color: var(--moss); }
.pulse {
  position: absolute; left: -1.6rem; top: .6em; width: 9px; height: 9px; border-radius: 50%; background: var(--moss);
}
.pulse::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--moss);
  opacity: 0; animation: pulse 3.2s ease-out infinite;
}
@keyframes pulse { 0% { transform: scale(.5); opacity: .7; } 70%, 100% { transform: scale(2.4); opacity: 0; } }
@media (max-width: 899px) { .cycle { padding-left: 1.6rem; } }
.cycle__memory { margin-top: 2rem; color: var(--graphite); max-width: var(--measure); font-size: var(--t-lg); line-height: 1.45; }

.after { margin-top: clamp(4rem, 10vw, 8rem); }
.after__line { font-family: var(--display); font-weight: 300; font-size: clamp(2.4rem, 1.2rem + 4.6vw, 5.75rem); line-height: 1.02; letter-spacing: -0.025em; }
.after__line--turn { font-style: italic; }
.after__goal { margin-top: 2.5rem; max-width: 30rem; font-size: var(--t-lg); line-height: 1.45; color: var(--graphite); }

/* ---------- What we're learning ---------- */
.terrains { margin-top: clamp(3rem, 7vw, 5rem); display: grid; gap: 3rem; }
@media (min-width: 800px) { .terrains { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.terrain-note { border-top: 1px solid var(--ink); padding-top: 1.5rem; display: grid; gap: 1rem; align-content: start; min-width: 0; }
.terrain-note__label { font-family: var(--label); font-size: .8125rem; letter-spacing: .18em; text-transform: uppercase; }
.terrain-note p { max-width: var(--measure); }
.terrain-note__focus { color: var(--graphite); }

/* ---------- Final invitation ---------- */
.final { padding-block: clamp(8rem, 20vw, 16rem); border-top: 1px solid var(--rule); }
.final__title {
  font-family: var(--display); font-weight: 300; font-size: clamp(2.4rem, 1.4rem + 4.4vw, 5.5rem);
  line-height: 1.02; letter-spacing: -0.025em; max-width: 16ch;
}
.final__copy { margin-top: 2.5rem; display: grid; gap: .5rem; font-size: var(--t-lg); color: var(--graphite); }
.final__copy p:last-child { color: var(--ink); }
.final__cta {
  margin-top: 3rem; display: inline-flex; gap: .8rem; align-items: center; text-decoration: none;
  background: var(--ink); color: var(--paper); padding: 1.1rem 1.75rem; font-size: 1.0625rem; letter-spacing: .01em;
  border: 1px solid var(--ink); transition: background .2s, color .2s;
}
.final__cta:hover { background: transparent; color: var(--ink); }
.final__cta span { transition: transform .3s; }
.final__cta:hover span { transform: translateX(4px); }
.final__small { margin-top: 2rem; font-size: var(--t-sm); color: var(--graphite); max-width: 30rem; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--ink); padding-block: 3rem calc(3rem + env(safe-area-inset-bottom, 0px)); }
.footer__inner { display: grid; gap: .5rem; }
@media (min-width: 800px) { .footer__inner { grid-template-columns: auto 1fr auto; align-items: baseline; gap: 2rem; } }
.footer__brand { font-weight: 600; font-size: .875rem; letter-spacing: .2em; }
.footer__sig { font-family: var(--label); font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); }
.footer__rel { font-size: var(--t-sm); color: var(--graphite); }
.footer__rel a { color: var(--ink); text-underline-offset: 3px; }

/* ---------- Dialogs ---------- */
dialog { padding: 0; border: 0; max-width: 100vw; max-height: 100dvh; width: 100vw; height: 100dvh; margin: 0; background: var(--paper); color: var(--ink); }
dialog::backdrop { background: rgba(26, 26, 23, .55); }
.viewer[open], .tse[open] { display: flex; flex-direction: column; }
.viewer__bar, .tse__bar {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: calc(.75rem + env(safe-area-inset-top, 0px)) var(--gutter) .75rem; border-bottom: 1px solid var(--rule);
}
.viewer__title, .tse__title { font-family: var(--label); font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); min-width: 0; }
.viewer__actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.viewer__btn {
  background: none; border: 1px solid var(--ink); padding: .5rem .85rem; cursor: pointer; text-decoration: none;
  font-family: var(--label); font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
}
.viewer__btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.viewer__stage { flex: 1; overflow: auto; display: grid; place-items: center; padding: 1rem; touch-action: pan-x pan-y pinch-zoom; overscroll-behavior: contain; }
.viewer__stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.viewer__stage.is-actual { place-items: start; }
.viewer__stage.is-actual img { max-width: none; max-height: none; width: 1376px; }
.viewer__hint { display: none; text-align: center; padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom, 0px)); font-size: var(--t-xs); color: var(--graphite); font-family: var(--label); }
.viewer__stage.is-actual + .viewer__hint { display: block; }
.tse__stage { flex: 1; display: grid; min-height: 0; }
.tse__stage iframe { width: 100%; height: 100%; border: 0; background: #000; }
.tse__missing { place-self: center; max-width: 30rem; padding: 2rem var(--gutter); display: grid; gap: 1rem; }
.tse__missing strong { font-family: var(--display); font-weight: 400; font-size: var(--t-lg); }

/* ---------- Reveal (meaning-led, never hides content at rest for long) ---------- */
.js .reveal { opacity: .15; transform: translateY(14px); transition: opacity .9s ease, transform .9s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .pulse::after { animation: none; }
  * { transition-duration: 0s !important; }
}

/* ---------- QA panel (only with ?qa=1) ---------- */
.qa-panel {
  position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 200;
  width: min(26rem, calc(100vw - 2rem)); max-height: 70vh; overflow: auto;
  background: var(--paper); border: 1px solid var(--ink); box-shadow: 0 10px 30px rgba(0,0,0,.18);
  font-family: var(--label); font-size: .75rem; line-height: 1.5; padding: 1rem;
}
.qa-panel h2 { font-family: var(--label); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .75rem; }
.qa-panel li { list-style: none; padding: .3rem 0; border-bottom: 1px solid var(--rule); }
.qa-panel .ok::before { content: "PASS  "; color: var(--moss); }
.qa-panel .warn::before { content: "TODO  "; color: #7A3B12; }
.qa-panel .fail::before { content: "FAIL  "; color: #A11; }
.qa-panel button { margin-top: .75rem; }

/* v0.11: Learning Lab supporting lines as quiet prose */
.lab-lines { display: grid; gap: .6rem; max-width: var(--measure); color: var(--graphite); }
.lab-lines strong { font-weight: 500; color: var(--ink); }
.lab .calibrate { margin-top: 2rem; color: var(--graphite); }
.lab .coda { margin-top: 2.5rem; }

/* ==========================================================================
   v0.2 — EXPERIENCE LAYER · "LISTEN TO THE IDEA"
   Voice as a meaning-making layer. Built only from the v0.1 tokens: the
   trigger speaks in the same mono annotation voice as "View full size", the
   player is drawn in hairlines and ink like the diagrams' pencil lines.
   No color, no waveform, no floating player. Never covers the visual: it
   opens inline below the caption, so the diagram stays where it was.
   ========================================================================== */

/* Caption row: title left, quiet actions right; the player takes a full row below. */
.visual__acts { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1.75rem; }
.visual__cap > .xp { flex-basis: 100%; margin-top: .35rem; }

/* ---------- Trigger: ▸ LISTEN TO THE IDEA · 01:12 ---------- */
.xp-cta {
  background: none; border: 0; border-bottom: 1px solid var(--ink); padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--label); font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink); line-height: 1.6; text-align: left;
}
.xp-cta__glyph {
  flex: none; width: 0; height: 0;
  border-left: .52em solid currentColor; border-top: .32em solid transparent; border-bottom: .32em solid transparent;
  transition: transform .35s ease;
}
.xp-cta:hover .xp-cta__glyph { transform: translateX(2px); }
.xp-cta.is-open .xp-cta__glyph { transform: rotate(90deg); }
.xp-cta__dur { color: var(--graphite); font-variant-numeric: tabular-nums; }

/* Framing360: the trigger hangs off its own line in the Learning Lab prose. */
.lab-lines__xp { display: grid; justify-items: start; gap: .25rem; margin: -.15rem 0 .5rem; min-width: 0; }
.lab-lines__xp .xp { width: 100%; }

/* ---------- Expanded player ---------- */
.xp {
  font-family: var(--body); font-size: var(--t-md); line-height: 1.6;
  letter-spacing: normal; text-transform: none; color: var(--ink);
  max-width: 44rem; min-width: 0;
}
.xp:not([hidden]) { animation: xp-in .5s ease both; }
@keyframes xp-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.xp__audio { display: block; width: 100%; max-width: 28rem; margin-block: .6rem; } /* no-JS fallback only */

.xp__bar {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: .85rem;
  padding-top: .6rem;
}
.xp__play {
  width: 44px; height: 44px; padding: 0; display: grid; place-items: center; cursor: pointer;
  background: transparent; color: var(--ink); border: 1px solid var(--ink); border-radius: 0;
  transition: background .2s, color .2s;
}
.xp__play:hover { background: var(--ink); color: var(--paper); }
/* play ▸ / pause ▐▐ drawn in CSS so no platform renders an emoji */
.xp__icon {
  display: block; width: 0; height: 0; margin-left: 3px;
  border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
.is-playing .xp__icon {
  width: 10px; height: 12px; margin-left: 0;
  border-left: 3px solid currentColor; border-right: 3px solid currentColor; border-top: 0; border-bottom: 0;
}
.xp__time {
  font-family: var(--label); font-size: var(--t-xs); letter-spacing: .04em; color: var(--graphite);
  font-variant-numeric: tabular-nums; min-width: 2.4em;
}
.xp__time--total { text-align: right; }

/* Seek: a single pencil line that inks in as the idea unfolds. 44px tall for touch. */
.xp__seek {
  --p: 0%;
  -webkit-appearance: none; appearance: none; display: block;
  width: 100%; height: 44px; margin: 0; padding: 0; background: transparent; cursor: pointer;
}
.xp__seek::-webkit-slider-runnable-track {
  height: 2px; border: 0;
  background: linear-gradient(to right, var(--ink) 0 var(--p), var(--rule) var(--p) 100%);
}
.xp__seek::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 11px; height: 11px; margin-top: -4.5px;
  border-radius: 50%; border: 0; background: var(--ink);
}
.xp__seek::-moz-range-track { height: 2px; border: 0; background: var(--rule); }
.xp__seek::-moz-range-progress { height: 2px; background: var(--ink); }
.xp__seek::-moz-range-thumb { width: 11px; height: 11px; border-radius: 50%; border: 0; background: var(--ink); }
.xp__seek:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- Transcript: normal reading typography, set as an annotation ---------- */
.xp__transcript summary {
  list-style: none; cursor: pointer; width: fit-content;
  display: inline-flex; align-items: center; gap: .55rem; min-height: 44px;
  font-family: var(--label); font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--graphite);
}
.xp__transcript summary::-webkit-details-marker { display: none; }
.xp__transcript summary::after { content: "+"; font-size: .9rem; line-height: 1; color: var(--ink); }
.xp__transcript[open] summary::after { content: "\2013"; }
.xp__transcript summary:hover { color: var(--ink); }
.xp__text {
  display: grid; gap: .85rem; max-width: var(--measure);
  padding: .35rem 0 1.5rem 1.1rem; border-left: 1px solid var(--rule);
  font-family: var(--body); font-size: var(--t-md); line-height: 1.6; color: var(--ink);
}
.xp__transcript[open] .xp__text { animation: xp-in .45s ease both; }

/* ---------- Viewer: quiet pause/resume while studying a diagram full size ---------- */
.viewer__listen { display: inline-flex; align-items: center; gap: .5rem; }
.xp__mini {
  display: inline-block; width: 0; height: 0;
  border-left: 7px solid currentColor; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent;
}
.xp__mini.is-playing { width: 7px; height: 9px; border-left: 2px solid currentColor; border-right: 2px solid currentColor; border-top: 0; border-bottom: 0; }

/* Desktop: the player hangs beneath its trigger, on the right, so the eye
   travels trigger → player → transcript without crossing the diagram. Its
   left edge lines up with the page's right-hand reading column. */
@media (min-width: 701px) {
  .visual__cap > .xp { margin-left: auto; width: 100%; max-width: 42rem; }
}

/* ---------- Mobile ---------- */
/* v0.1's "View full size" keeps its row and its box. The invitation to listen
   gets its own quieter line directly above the player it opens, so trigger
   and player stay together and the diagram stays in view above them. */
@media (max-width: 700px) {
  .visual__acts { display: contents; }
  .visual__cap .linkbtn { order: 1; }
  .visual__cap .xp-cta { order: 2; flex-basis: 100%; }
  .visual__cap > .xp { order: 3; margin-top: 0; }
  .xp-cta {
    border-bottom: 0; min-height: 44px; padding-block: .5rem;
    font-size: .8125rem;
  }
  .xp-cta__verb { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
  .xp__bar { gap: .7rem; padding-top: .25rem; }
  .xp__text { padding-left: .9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .xp:not([hidden]), .xp__transcript[open] .xp__text { animation: none; }
}

/* ==========================================================================
   v0.3 — LIVING TERRAINS · shared components (home page + terrain pages)
   ========================================================================== */
@media (min-width: 1100px) and (max-width: 1279px) { .nav__links { gap: 1.4rem; } }

/* ---------- The signal field (September, abstracted) ---------- */
.field { margin: 0; min-width: 0; }
.field__axes {
  display: flex; justify-content: space-between; margin-bottom: .5rem;
  font-family: var(--label); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--graphite);
}
.field__svg { display: block; width: 100%; height: auto; overflow: visible; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); }
.field__grid { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 2 5; vector-effect: non-scaling-stroke; }
.field__row { stroke: var(--rule); stroke-width: 1.5; vector-effect: non-scaling-stroke; transition: stroke .8s; }
.field .dot {
  fill: var(--ink); stroke: var(--ink); stroke-width: 1.3; opacity: 0;
  transform-box: fill-box; transform-origin: center;
  transition: opacity .45s ease var(--d, 0ms), fill .7s ease calc(var(--d, 0ms) * .45), stroke .7s ease calc(var(--d, 0ms) * .45);
}
.field .dot--rr { fill: var(--moss); stroke: var(--moss); }
.field__thread { fill: none; stroke: var(--moss); stroke-width: 1.25; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .75; transition: stroke-dashoffset 1.6s ease .4s; }
.field__who { fill: none; stroke: var(--graphite); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s ease; }
.field__ring { fill: none; stroke: var(--graphite); stroke-width: 1; stroke-dasharray: 2 2.5; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity .8s ease .9s; }
.field.p1 .dot--s, .field.p1 .dot--r1 { opacity: 1; }
.field.p2 .dot--s, .field.p2 .dot--r1 { fill: var(--paper); stroke: var(--graphite); }
.field.p3 .dot--rr { opacity: 1; animation: rr-pop .7s ease var(--d, 0ms) both; }
.field.p3 .field__thread { stroke-dashoffset: 0; }
.field.p3 .field__row--rec { stroke: var(--moss); }
.field.p4 .field__who { stroke-dashoffset: 0; }
.field.p4 .field__ring { opacity: 1; }
@keyframes rr-pop { 0% { transform: scale(.2); } 60% { transform: scale(1.5); } 100% { transform: scale(1); } }
.field.no-anim .dot, .field.no-anim path, .field.no-anim line, .field.no-anim circle { transition: none !important; animation: none !important; }
.field__cap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem 1rem; margin-top: .9rem; }
.field__now { font-family: var(--display); font-style: italic; font-size: var(--t-md); color: var(--ink); min-height: 1.6em; }
.field__key { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; margin-top: .75rem; font-family: var(--label); font-size: .6875rem; letter-spacing: .06em; color: var(--graphite); }
.field__key span { display: inline-flex; align-items: center; gap: .45rem; }
.k { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.k--req { background: var(--ink); }
.k--done { border: 1px solid var(--graphite); }
.k--ret { background: var(--moss); }
.k--who { width: 13px; height: 13px; border: 1px dashed var(--graphite); }

/* ---------- Lock mark (drawn, so it never renders as an emoji) ---------- */
.lock { display: inline-block; position: relative; width: 10px; height: 8px; margin-top: 5px; border: 1.5px solid currentColor; border-radius: 1px; vertical-align: baseline; flex: none; }
.lock::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 6px; height: 5px; margin-left: -3px; border: 1.5px solid currentColor; border-bottom: 0; border-radius: 3px 3px 0 0; }

/* ---------- Home: Living Terrains ---------- */
.terrains-home .lede { margin-top: .75rem; color: var(--graphite); font-style: italic; }
.plate--terrain .plate__frame { gap: .6rem; }
.plate--terrain .plate__title { font-style: normal; }
.plate--terrain .plate__title em { font-style: italic; }
.plate__lenses { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; }
.plate__lenses .plate__launch { margin-top: 0; text-decoration: none; }
.plate__locked {
  display: inline-flex; align-items: center; gap: .6rem; cursor: pointer;
  background: transparent; color: var(--ink); border: 1px solid var(--ink); padding: .95rem 1.4rem;
  font-size: var(--t-sm); letter-spacing: .02em; transition: background .2s, color .2s;
}
.plate__locked:hover { background: var(--ink); color: var(--paper); }
.plate__lensnote { margin-top: 1rem; font-size: var(--t-sm); color: var(--graphite); max-width: 34rem; }
.plate__lensnote--nojs { font-family: var(--label); font-size: var(--t-xs); }
.js .plate__lensnote--nojs { display: none; }
.plate__field { width: 100%; margin-top: 1.5rem; }
.plate__field .field__svg { border-top-color: var(--rule); }
@media (min-width: 900px) {
  .plate--terrain .plate__frame { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); column-gap: clamp(2rem, 4vw, 4rem); align-items: center; }
  .plate--terrain .plate__frame > * { grid-column: 1; }
  .plate--terrain .plate__frame > .plate__field { grid-column: 2; grid-row: 1 / span 6; margin-top: 0; }
}

/* ---------- Participant lens — locked preview ---------- */
.lensdlg {
  width: min(46rem, calc(100vw - 2rem)); height: auto; max-height: calc(100dvh - 2rem); margin: auto;
  border: 1px solid var(--ink); overflow: auto; overscroll-behavior: contain;
}
.lensdlg[open] { display: block; animation: xp-in .45s ease both; }
.lensdlg__bar {
  position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .75rem clamp(1.25rem, 4vw, 2.5rem); background: var(--paper); border-bottom: 1px solid var(--rule);
}
.lensdlg__flag, .lensdlg__coming {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--label); font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
}
.lensdlg__flag { border: 1px dashed var(--ink); padding: .4rem .65rem .4rem .6rem; }
.lensdlg__body { display: grid; gap: 1.25rem; padding: clamp(1.75rem, 5vw, 3rem) clamp(1.25rem, 4vw, 2.5rem) 2.5rem; }
.lensdlg__body .eyebrow { margin-bottom: 0; }
.lensdlg__title { font-family: var(--display); font-weight: 300; font-size: var(--t-xl); line-height: 1.08; letter-spacing: -0.015em; }
.lensdlg__could { font-size: var(--t-lg); line-height: 1.45; color: var(--graphite); }
.lensdlg__same {
  margin-top: .5rem; padding: 1.25rem clamp(1rem, 3vw, 1.5rem);
  border: 1px dashed var(--graphite);
  background: repeating-linear-gradient(135deg, transparent 0 7px, rgba(87, 86, 79, .06) 7px 8px);
}
.lensdlg__label { font-family: var(--label); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin-bottom: 1rem; }
.lensdlg__label span { color: var(--graphite); }
.lensdlg__thread { list-style: none; margin-left: .3rem; padding-left: 1.25rem; border-left: 1px solid var(--ink); display: grid; gap: .8rem; }
.lensdlg__thread li { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; }
.lensdlg__thread li::before { content: ""; position: absolute; left: calc(-1.25rem - 4px); top: .4em; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.lensdlg__what { font-family: var(--label); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); min-width: 12rem; }
.lensdlg__tags { display: inline-flex; flex-wrap: wrap; gap: .3rem 1rem; }
.tag { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--label); font-size: .6875rem; letter-spacing: .04em; color: var(--graphite); }
.tag--live { color: var(--moss); font-style: italic; }
.redact { display: inline-block; width: 4.25rem; height: .72em; background: var(--ink); opacity: .78; }
.redact--s { width: 2.5rem; }
.redact--l { width: 6.5rem; }
.lensdlg__ask { display: grid; gap: .75rem; margin-top: .75rem; }
.lensdlg__q { font-family: var(--display); font-style: italic; font-size: var(--t-lg); line-height: 1.3; }
.lensdlg__ask textarea {
  width: 100%; resize: vertical; min-height: 5.5rem; padding: .75rem .85rem; border: 1px solid var(--ink); border-radius: 0;
  background: transparent; color: var(--ink); font-family: var(--body); font-size: var(--t-md); line-height: 1.5;
}
.lensdlg__ask textarea::placeholder { color: var(--graphite); }
.lensdlg__ask textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.lensdlg__row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.lensdlg__add {
  min-height: 44px; padding: .7rem 1.2rem; cursor: pointer; background: var(--ink); color: var(--paper); border: 1px solid var(--ink);
  font-size: var(--t-sm); letter-spacing: .02em; transition: background .2s, color .2s;
}
.lensdlg__add:hover { background: transparent; color: var(--ink); }
.lensdlg__status { flex: 1 1 16rem; font-size: var(--t-sm); color: var(--graphite); }
.lensdlg__after { font-family: var(--display); font-size: var(--t-lg); line-height: 1.35; }
.lensdlg__coming { margin-top: .5rem; padding-top: 1rem; border-top: 1px solid var(--rule); text-transform: none; letter-spacing: .02em; line-height: 1.5; color: var(--graphite); align-items: flex-start; }
.lensdlg__coming .lock { margin-top: .3em; }
@media (max-width: 600px) {
  .lensdlg { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border: 0; }
  .lensdlg__what { min-width: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .lensdlg[open] { animation: none; }
  .field .dot, .field path, .field circle { animation: none !important; }
}
@media (max-width: 600px) {
  .lensdlg__bar { flex-wrap: nowrap; padding-inline: 1rem; }
  .lensdlg__bar .viewer__btn { white-space: nowrap; flex: none; }
  .lensdlg__flag { flex: 1 1 auto; min-width: 0; letter-spacing: .06em; font-size: .6875rem; line-height: 1.4; }
}

/* ==========================================================================
   v0.4 — FROM EXPLAINING THE MODEL TO EXPERIENCING THE VALUE
   Outcome first. Architecture second. Depth on demand.
   Built only from the v0.1 tokens. No new colors, no new type families.
   ========================================================================== */

/* ---------- Hero: one outcome sentence ---------- */
.hero__copy p:only-child { color: var(--ink); max-width: 32rem; }

/* ---------- How it works: Frame · Learn · Adapt ---------- */
.lede--body { max-width: var(--measure); color: var(--graphite); }
.moves { list-style: none; margin-top: clamp(3rem, 7vw, 5rem); display: grid; gap: 2.5rem; counter-reset: move; }
@media (min-width: 860px) { .moves { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); } }
.move { border-top: 1px solid var(--ink); padding-top: 1.5rem; display: grid; gap: .9rem; align-content: start; min-width: 0; counter-increment: move; }
.move__verb {
  font-family: var(--label); font-size: .8125rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink);
  display: flex; align-items: baseline; gap: .75rem;
}
.move__verb::before { content: "0" counter(move); color: var(--graphite); letter-spacing: .08em; }
.move__q { font-family: var(--display); font-weight: 300; font-size: var(--t-lg); line-height: 1.25; }
.move__body { color: var(--graphite); max-width: 26rem; }
.move__body strong { font-weight: 500; color: var(--ink); }

/* ---------- Depth on demand: "Look underneath" ---------- */
.deeper { margin-top: clamp(3rem, 6vw, 4rem); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.deeper > summary {
  list-style: none; cursor: pointer; min-height: 52px; padding-block: .9rem;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1.25rem;
}
.deeper > summary::-webkit-details-marker { display: none; }
.deeper__verb {
  font-family: var(--label); font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
  display: inline-flex; align-items: center; gap: .6rem;
}
.deeper__verb::before { content: "+"; font-size: .95rem; line-height: 1; width: .8em; }
.deeper[open] .deeper__verb::before { content: "\2013"; }
.deeper__what { font-family: var(--display); font-style: italic; font-size: var(--t-md); color: var(--graphite); }
.deeper > summary:hover .deeper__what { color: var(--ink); }
.deeper__body { padding: .5rem 0 2.25rem; display: grid; gap: 1.75rem; }
.deeper[open] .deeper__body { animation: xp-in .45s ease both; }
.deeper__cols { display: grid; gap: 1.5rem; }
@media (min-width: 860px) { .deeper__cols { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.deeper__cols strong { font-weight: 500; }
.deeper__q { font-family: var(--display); font-style: italic; font-size: var(--t-lg); line-height: 1.35; }
.deeper__note { max-width: var(--measure); color: var(--graphite); }
.deeper--inline { margin-top: 1rem; }
.deeper--inline .deeper__body { gap: 1.1rem; }

/* The seven-step loop: a pencil line with stations; Reframe bends back to the start. */
.loop7 {
  list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 0; position: relative;
  font-family: var(--label); font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase;
}
.loop7 li { display: inline-flex; align-items: center; color: var(--ink); }
.loop7 li + li::before { content: ""; display: inline-block; width: clamp(.9rem, 2.2vw, 2.25rem); height: 1px; background: var(--rule); margin-inline: .6rem; }
.loop7__re { color: var(--moss) !important; }
.loop7__re::after { content: "\21BA"; margin-left: .5rem; font-size: .95rem; letter-spacing: 0; }

/* ---------- Learning Lab: the container and the cadence ---------- */
.cadence { margin: clamp(4rem, 9vw, 6.5rem) 0 0; padding-top: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--rule); }
.cadence__head .eyebrow { margin-bottom: 1rem; }
.cadence__title { font-family: var(--display); font-weight: 300; font-size: var(--t-lg); line-height: 1.35; }
.cadence__title span { display: block; }
.cadence__title span:not(.cadence__turn) { color: var(--graphite); }
.cadence__turn { font-style: italic; color: var(--ink); }
.cadence__svg { display: block; width: 100%; height: auto; margin-top: clamp(2rem, 5vw, 3rem); overflow: visible; }
.cad__band { fill: var(--paper-2); stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.cad__label { font-family: var(--label); font-size: 13px; letter-spacing: .14em; fill: var(--ink); }
.cad__label--soft { fill: var(--graphite); }
.cad__weeks text { font-family: var(--label); font-size: 12px; fill: var(--graphite); text-anchor: middle; }
.cad__rhythm circle { fill: var(--paper); stroke: var(--graphite); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.cad__cal line { stroke: var(--moss); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.cad__cal circle { fill: var(--moss); }
.cad__cal text { font-family: var(--label); font-size: 12px; letter-spacing: .14em; fill: var(--moss); }
.cad__learn { fill: none; stroke: var(--ink); stroke-width: 1.75; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.cad__events circle { fill: var(--ink); }
.cad__edge { font-family: var(--label); font-size: 11px; letter-spacing: .12em; fill: var(--graphite); }
.js .cadence:not(.is-drawn) .cad__learn { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .cadence:not(.is-drawn) .cad__events circle { opacity: 0; }
.js .cadence .cad__learn { transition: stroke-dashoffset 3.2s cubic-bezier(.45,.05,.35,1); stroke-dasharray: 1; }
.js .cadence.is-drawn .cad__learn { stroke-dashoffset: 0; }
.js .cadence .cad__events circle { transition: opacity .5s ease var(--d, 0ms); }
.cadence__key { margin-top: 1.5rem; display: grid; gap: .9rem; }
@media (min-width: 760px) { .cadence__key { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } }
.cadence__key div { display: grid; gap: .2rem; min-width: 0; }
.cadence__key dt { display: flex; align-items: center; gap: .6rem; font-family: var(--label); font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; }
.cadence__key dd { color: var(--graphite); font-size: var(--t-sm); padding-left: calc(22px + .6rem); }
.ck { flex: none; display: inline-block; width: 22px; }
.ck--learn { height: 2px; background: var(--ink); }
.ck--engage { width: 10px; height: 10px; margin-inline: 6px; border-radius: 50%; border: 1.25px solid var(--graphite); background: var(--paper); }
.ck--decide { width: 2px; height: 16px; margin-inline: 10px; background: var(--moss); }
.cadence__notes { margin-top: clamp(2.5rem, 5vw, 3.5rem); display: grid; gap: 1.1rem; max-width: 46rem; color: var(--graphite); }
.cadence__notes em { color: var(--ink); }
/* Phones: the drawing stays legible because its text scales with it; give it room. */
@media (max-width: 600px) {
  .cadence__svg { width: calc(100% + 2 * var(--gutter)); margin-inline: calc(-1 * var(--gutter)); }
  .cad__label, .cad__cal text { font-size: 25px; letter-spacing: .1em; }
  .cad__weeks text { font-size: 22px; transform: translateY(8px); }
  .cad__cal text { transform: translateY(16px); }
  .cad__edge, .cad__label--soft { display: none; }
}

/* ---------- Living Lens: a disciplined way of seeing ---------- */
.lens-intro { margin-top: .5rem; }
.lens-intro__claim { font-family: var(--display); font-weight: 400; font-size: var(--t-lg); line-height: 1.3; max-width: 20ch; }

/* ---------- Three sources of intelligence ---------- */
.tri { margin: clamp(4rem, 9vw, 6.5rem) 0 0; padding-top: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--rule); }
.tri__title { font-family: var(--display); font-weight: 300; font-size: var(--t-lg); line-height: 1.35; max-width: 30ch; }
.tri__grid { margin-top: clamp(2rem, 5vw, 3rem); display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 860px) { .tri__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 4rem; } }
.tri__svg { display: block; width: 100%; max-width: 30rem; height: auto; margin-inline: auto; overflow: visible; }
.tri__c { fill: none; stroke-width: 1.25; vector-effect: non-scaling-stroke; transition: stroke-width .3s, opacity .3s; }
.tri__c--terrain { stroke: var(--moss); fill: rgba(77, 90, 72, .06); }
.tri__c--human { stroke: var(--ink); fill: rgba(26, 26, 23, .035); }
.tri__c--lens { stroke: var(--graphite); stroke-dasharray: 1 4; stroke-linecap: round; stroke-width: 1.75; }
.tri__core { fill: var(--ink); }
.tri__leader { stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tri__name { font-family: var(--label); font-size: 14px; letter-spacing: .2em; fill: var(--graphite); }
.tri__lens { font-family: var(--display); font-style: italic; font-size: 21px; fill: var(--ink); }
.tri__list { list-style: none; display: grid; gap: 1.6rem; }
.tri__item { display: grid; gap: .35rem; padding-left: 1.25rem; border-left: 2px solid var(--rule); }
.tri__item p:last-child { color: var(--graphite); max-width: 30rem; }
.tri__item--terrain { border-left-color: var(--moss); }
.tri__item--human { border-left-color: var(--ink); }
.tri__item--lens { border-left: 2px dotted var(--graphite); }
.tri__src { font-family: var(--label); font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.tri__grid:has(.tri__item--terrain:hover) .tri__c--terrain,
.tri__grid:has(.tri__item--human:hover) .tri__c--human { stroke-width: 2.5; }
.tri__grid:has(.tri__item--lens:hover) .tri__c--lens { stroke-width: 3; }
.deeper--inset { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.tri__deep { display: grid; gap: 1.1rem; }
.tri__deep div { display: grid; gap: .25rem; }
@media (min-width: 700px) { .tri__deep div { grid-template-columns: 8rem 1fr; gap: 1.5rem; align-items: baseline; } }
.tri__deep dt { font-family: var(--label); font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; }
.tri__deep dd { font-family: var(--display); font-size: var(--t-md); line-height: 1.5; }
@media (max-width: 600px) { .tri__name { font-size: 18px; } .tri__lens { font-size: 25px; } }

/* ---------- Terrain section ---------- */
.terrain__holds { max-width: var(--measure); color: var(--graphite); margin-bottom: 2.25rem; }

/* ---------- Living Terrains: the learning trace ---------- */
.trace {
  list-style: none; display: flex; flex-wrap: wrap; gap: .45rem 0;
  font-family: var(--label); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
}
.trace li { display: inline-flex; align-items: center; }
.trace li + li::before { content: "\2192"; color: var(--graphite); margin-inline: .5rem; letter-spacing: 0; }
.trace li:last-child { color: var(--moss); }

@media (prefers-reduced-motion: reduce) {
  .deeper[open] .deeper__body { animation: none; }
  .js .cadence .cad__learn { stroke-dashoffset: 0 !important; transition: none; }
  .js .cadence .cad__events circle { opacity: 1 !important; transition: none; }
}

/* ==========================================================================
   v0.5 — CONVERGENCE: COMMERCIAL CLARITY + METHODOLOGY AS DIFFERENTIATOR
   Outcome first. Method second. Architecture on demand.
   Built only from the v0.1 tokens. No new colors, no new type families.
   Quieter, not busier: hairlines, display serif, one ink block.
   ========================================================================== */

/* ---------- Hero: the proposition is the headline ---------- */
.hero__title--prop { max-width: none; font-size: clamp(2.9rem, 1.3rem + 6vw, 7rem); line-height: 1; }
.hero__title--prop span { display: block; }
.hero__title--prop span:last-child { font-style: italic; }
.hero__lede {
  margin-top: clamp(2rem, 5vw, 3.25rem); max-width: 30rem;
  font-family: var(--display); font-size: var(--t-lg); line-height: 1.3; color: var(--ink);
  padding-top: 1.25rem; border-top: 1px solid var(--ink);
}
.hero .hero__copy { margin-top: 1.1rem; font-family: var(--body); font-size: var(--t-md); line-height: 1.6; max-width: 34rem; }
.hero .hero__copy p:only-child { color: var(--graphite); max-width: 34rem; }
.hero__acts { margin-top: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem 2rem; }
.hero__acts .hero__cta { margin-top: 0; }
.hero__more {
  font-family: var(--label); font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink); padding-block: .3rem;
}
.hero__more:hover { color: var(--graphite); border-bottom-color: var(--graphite); }

/* ---------- Learning Lab: Week 6 decision ---------- */
.lab .calibrate strong { font-weight: 500; color: var(--ink); }
.decide {
  list-style: none; display: flex; flex-wrap: wrap; gap: .5rem;
  font-family: var(--label); font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase;
}
.decide li { border: 1px solid var(--rule); padding: .35rem .7rem; color: var(--ink); }
.decide li:first-child { border-color: var(--moss); color: var(--moss); }

/* Decisions at consequential moments (smaller than the Week 6 mark) */
.cad__dec line { stroke: var(--moss); stroke-width: 1.5; vector-effect: non-scaling-stroke; }

/* ---------- After 12 weeks ---------- */
.clarity { list-style: none; margin-top: clamp(2.5rem, 6vw, 4rem); display: grid; border-top: 1px solid var(--ink); counter-reset: clar; }
@media (min-width: 760px) { .clarity { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 5vw, 4rem); } }
.clarity li {
  counter-increment: clar; display: grid; grid-template-columns: 2.25rem 1fr; align-items: baseline;
  padding-block: 1rem; border-bottom: 1px solid var(--rule);
  font-family: var(--display); font-weight: 300; font-size: var(--t-lg); line-height: 1.3;
}
.clarity li::before { content: counter(clar, decimal-leading-zero); font-family: var(--label); font-size: var(--t-xs); letter-spacing: .08em; color: var(--graphite); }
.practiced { margin-top: clamp(4rem, 9vw, 6.5rem); max-width: 52rem; }
.practiced__pre { font-family: var(--label); font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--graphite); margin-bottom: 1.25rem; }
.practiced__line { font-family: var(--display); font-weight: 300; font-size: var(--t-xl); line-height: 1.12; letter-spacing: -0.01em; }
.practiced__line em { color: var(--graphite); }

/* ---------- The difference: the nature of the problem ---------- */
.difference .h2--stack span + span { font-size: var(--t-lg); line-height: 1.35; margin-top: 1rem; max-width: 34rem; }
.diff { margin-top: clamp(3rem, 7vw, 4.5rem); display: grid; gap: 1.25rem; }
@media (min-width: 760px) { .diff { grid-template-columns: 1fr 1fr; gap: 0; } }
.diff__col { padding: clamp(1.5rem, 4vw, 2.5rem); display: grid; gap: .9rem; align-content: start; min-width: 0; }
.diff__col p:last-child { font-family: var(--display); font-size: var(--t-lg); line-height: 1.35; }
.diff__col--answer { border: 1px solid var(--rule); color: var(--graphite); }
.diff__col--capacity { border: 1px solid var(--ink); background: var(--paper-2); }
@media (min-width: 760px) { .diff__col--answer { border-right: 0; } }
.diff__who { font-family: var(--label); font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.diff__anchor { max-width: 30ch; }

/* ---------- Organizational intelligence ---------- */
.intel__def { font-family: var(--display); font-weight: 300; font-size: var(--t-xl); line-height: 1.12; letter-spacing: -0.012em; max-width: 26ch; }
.intel__def span { display: block; }
.intel__def span:first-child { color: var(--graphite); }
.intel__turn { margin-top: .6rem; font-style: italic; }
.intel__loop { margin-top: clamp(2rem, 5vw, 3rem); color: var(--graphite); }
.intel .plate { margin-top: clamp(3rem, 7vw, 5rem); }

/* ---------- The method: two capabilities ---------- */
.capabs { margin-top: clamp(3rem, 7vw, 4.5rem); display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .capabs { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); } }
.capab { border-top: 1px solid var(--ink); padding-top: 1.5rem; display: grid; gap: .9rem; align-content: start; min-width: 0; }
.capab__name { font-family: var(--label); font-size: .8125rem; letter-spacing: .2em; text-transform: uppercase; }
.capab__promise { font-family: var(--display); font-weight: 300; font-size: var(--t-xl); line-height: 1.1; letter-spacing: -0.01em; max-width: 18ch; }
.capab__lead { color: var(--graphite); margin-top: .5rem; }
.capab__list { list-style: none; display: grid; border-top: 1px solid var(--rule); }
.capab__list li { padding-block: .55rem; border-bottom: 1px solid var(--rule); font-family: var(--display); font-size: var(--t-md); line-height: 1.4; }
.capab--lens .capab__list li::first-letter { text-transform: uppercase; }
.capab__note { color: var(--graphite); max-width: 32rem; }
.capab__xp { display: grid; justify-items: start; gap: .25rem; min-width: 0; margin-top: .25rem; }
.capab__xp .xp { width: 100%; }
.capab__more {
  width: fit-content; margin-top: .25rem; font-family: var(--label); font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink); padding-block: .3rem;
}
.capabs__sum {
  margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: 1.25rem; border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .7rem;
  font-family: var(--label); font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase;
}
.capabs__plus { color: var(--graphite); letter-spacing: .06em; text-transform: none; font-family: var(--display); font-style: italic; font-size: var(--t-md); }
@media (max-width: 700px) { .capab__xp .xp-cta { min-height: 44px; } }

/* ---------- Living Lens: roles, note, thinking ---------- */
.roles__col ul { gap: .25rem; }
.roles__note { margin-top: 1.5rem; color: var(--graphite); font-family: var(--display); font-style: italic; font-size: var(--t-lg); max-width: 34rem; }
.deeper--thinking { margin-top: clamp(4rem, 9vw, 6rem); }
.deeper--thinking .tri { margin-top: 0; padding-top: 0; border-top: 0; }
.thinking__intro { max-width: var(--measure); color: var(--graphite); }
.thinking { display: grid; border-top: 1px solid var(--rule); }
@media (min-width: 860px) { .thinking { grid-template-columns: 1fr 1fr; column-gap: 4rem; } }
.thinking div { display: grid; gap: .2rem; padding-block: .85rem; border-bottom: 1px solid var(--rule); min-width: 0; }
.thinking dt { font-family: var(--label); font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; }
.thinking dd { color: var(--graphite); font-size: var(--t-sm); line-height: 1.5; }

/* ---------- Living Terrains: two views ---------- */
.views { margin-top: clamp(1rem, 3vw, 2rem); display: grid; gap: 1.25rem; }
@media (min-width: 760px) { .views { grid-template-columns: 1fr 1fr; gap: 0; } }
.views__col { padding: clamp(1.5rem, 4vw, 2.25rem); border: 1px solid var(--rule); display: grid; gap: .7rem; align-content: start; min-width: 0; }
.views__col p:last-child { color: var(--graphite); }
.views__col--auth { border: 1px dashed var(--ink); }
@media (min-width: 760px) { .views__col:first-child { border-right: 0; } }
.views__who { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--label); font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; }
.views__who .lock { margin-top: 0; }
.views__flow { font-family: var(--display); font-style: italic; font-size: var(--t-md); line-height: 1.45; }
.terrains-home .deeper--inline { margin-top: clamp(2rem, 5vw, 3rem); }
.terrains-home .prose__turn { font-style: italic; }

/* ---------- Final: the commercial story ---------- */
.final__title { max-width: 14ch; }
.story { list-style: none; margin-top: clamp(2.5rem, 6vw, 3.5rem); display: grid; gap: .35rem; max-width: 40rem; }
.story li { font-family: var(--display); font-weight: 300; font-size: var(--t-lg); line-height: 1.35; color: var(--graphite); padding-left: 1.6rem; position: relative; }
.story li::before { content: ""; position: absolute; left: 0; top: .72em; width: .9rem; height: 1px; background: var(--rule); }
.story__last { color: var(--ink) !important; font-style: italic; }
.story__last::before { background: var(--ink) !important; }
.lab__pieces { margin-top: 1.75rem; max-width: 38rem; color: var(--graphite); font-size: var(--t-md); }
.lab__pieces strong { font-weight: 500; color: var(--ink); }
.diff__also { margin-top: 1.5rem; max-width: 40rem; color: var(--graphite); }

/* ==========================================================================
   v0.5.1 — PRECISION PATCH: participation · Week 6 · Week 12 · Living Learning Record
   Existing tokens and patterns only.
   ========================================================================== */
.lab-block__label { font-family: var(--label); font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); margin-bottom: .2rem; }
.lab-block__label--moss { color: var(--moss); }
.lab-block__note { font-size: var(--t-sm); color: var(--graphite); }
.lab-block__note a { color: var(--ink); text-underline-offset: 3px; }
.takes-part, .forward { display: grid; gap: .9rem; max-width: var(--measure); color: var(--graphite); }
.takes-part__list, .forward__list { list-style: none; display: grid; border-top: 1px solid var(--rule); }
.takes-part__list li, .forward__list li { padding-block: .55rem; border-bottom: 1px solid var(--rule); }
.takes-part__list strong { font-weight: 500; color: var(--ink); }
.forward__list li { font-family: var(--display); font-size: var(--t-md); color: var(--ink); line-height: 1.4; }
.lab .calibrate { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--moss); }
.forward { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--ink); }
.accrued { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem 0; font-family: var(--display); font-size: var(--t-md); color: var(--ink); }
.accrued li + li::before { content: "·"; color: var(--graphite); margin-inline: .55rem; }
.calibrate__then { font-family: var(--display); font-style: italic; }
.forward__line { font-family: var(--display); font-size: var(--t-lg); line-height: 1.3; color: var(--ink); }
.forward__line em { color: var(--graphite); }
.cad__fwd line { stroke: var(--ink); stroke-width: 2; vector-effect: non-scaling-stroke; }
.cad__fwd text { font-family: var(--label); font-size: 12px; letter-spacing: .14em; fill: var(--ink); }
@media (max-width: 600px) { .cad__fwd text { font-size: 25px; letter-spacing: .1em; transform: translateY(54px); } .cadence__svg { margin-bottom: 1.75rem; } }
.record { margin-top: clamp(3rem, 7vw, 4.5rem); padding: clamp(1.75rem, 4vw, 2.75rem); border: 1px solid var(--ink); background: var(--paper-2); display: grid; gap: .6rem; max-width: 52rem; }
.record__label { font-family: var(--label); font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--graphite); }
.record__name { font-family: var(--display); font-weight: 300; font-size: var(--t-xl); line-height: 1.08; letter-spacing: -0.01em; }
.record__not { font-family: var(--display); font-style: italic; font-size: var(--t-lg); color: var(--graphite); }
.record__what { max-width: 40rem; color: var(--graphite); }
.record__what em { color: var(--ink); }

/* ==========================================================================
   v0.5.2 — EXECUTIVE CLARITY PATCH: who takes part · time · roles · what stays
   Existing tokens and patterns only. Nothing above this block is changed.
   ========================================================================== */
/* Who takes part: the participation chain, in the mono annotation voice */
.takes-part__chain { font-family: var(--label); font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); line-height: 1.9; }
.takes-part__chain span { color: var(--graphite); margin-inline: .35rem; }
.takes-part__helps { list-style: none; display: grid; gap: .15rem; margin-top: .55rem; padding-left: 1rem; border-left: 1px solid var(--rule); font-size: var(--t-sm); }
.takes-part__helps li { padding: 0; border: 0; }

/* Time commitment: hours lead; the percentage is context */
.commit, .together { display: grid; gap: .9rem; max-width: var(--measure); color: var(--graphite); margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--rule); }
.commit__line { font-family: var(--display); font-weight: 300; font-size: var(--t-lg); line-height: 1.3; color: var(--ink); }
.commit__line strong { font-weight: 500; }
.commit__more { font-size: var(--t-sm); color: var(--graphite); }

/* Avacend vs. client: joint inquiry, two columns that meet */
.together__line { font-family: var(--display); font-size: var(--t-lg); line-height: 1.3; color: var(--ink); }
.together__roles { display: grid; border-top: 1px solid var(--rule); }
@media (min-width: 600px) { .together__roles { grid-template-columns: 1fr 1fr; column-gap: 2rem; } }
.together__roles div { padding-block: .75rem; border-bottom: 1px solid var(--rule); display: grid; gap: .3rem; align-content: start; min-width: 0; }
.together__roles dt { font-family: var(--label); font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.together__roles dd { font-size: var(--t-sm); }
.together__close { font-family: var(--display); font-style: italic; font-size: var(--t-md); color: var(--ink); }

/* What stays after 12 weeks */
.stays { margin-top: clamp(3rem, 7vw, 4.5rem); max-width: 52rem; display: grid; gap: .6rem; }
.stays__q { font-family: var(--label); font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--graphite); }
.stays__line { font-family: var(--display); font-weight: 300; font-size: var(--t-xl); line-height: 1.08; letter-spacing: -0.01em; }
.stays__line em { color: var(--graphite); }
.stays__lead { color: var(--graphite); margin-top: .6rem; }
.stays__list { list-style: none; display: grid; border-top: 1px solid var(--ink); counter-reset: stay; }
@media (min-width: 760px) { .stays__list { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 5vw, 4rem); } }
.stays__list li {
  counter-increment: stay; display: grid; grid-template-columns: 2.25rem 1fr; align-items: baseline; row-gap: .25rem;
  padding-block: 1rem; border-bottom: 1px solid var(--rule);
  font-family: var(--display); font-size: var(--t-lg); line-height: 1.3;
}
.stays__list li::before { content: counter(stay, decimal-leading-zero); font-family: var(--label); font-size: var(--t-xs); letter-spacing: .08em; color: var(--graphite); }
.stays__link { grid-column: 2; font-family: var(--label); font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--graphite); text-underline-offset: 3px; }
.stays__link:hover { color: var(--ink); }