/* ============================================================
   PROCESS & STEPS — candidates (sections lab, group PC)
   Namespace .proc-*. Tokens only; every other value is a knob on the
   component, declared with its default. Kit classes are styled only
   inside a .proc-* root.
   ============================================================ */

/* ---- PC01 · phase ledger with calendar slices ----
   <section class="proc-ledger"><div class="wrap">
     .proc-ledger__head ( eyebrow + h2 | dl.proc-ledger__sum )
     .proc-ledger__cols (aria-hidden column labels + week axis)
     <ol class="proc-ledger__list" data-reveal-group>
       <li class="proc-ledger__row reveal" style="--s:1;--e:2" [data-open]>
         h3.proc-ledger__name · p.proc-ledger__what · p.proc-ledger__out ·
         div.proc-ledger__when (dur + span.proc-ledger__bar>i) · p.proc-ledger__eff
     .proc-ledger__foot ( p + .link )
   Each cell carries a .proc-ledger__k label: hidden on desktop (the
   column labels say it), shown on phones. --s/--e are weeks on a
   --ledger-weeks track; data-open draws an ongoing phase dashed. */
.proc-ledger {
  --ledger-cols: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, .8fr);
  --ledger-weeks: 16;
  --ledger-fig: calc(var(--fs-display) * 1.1);
  --ledger-slice: var(--fg);
}
.proc-ledger__head {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--sp-6) var(--sp-8); align-items: end; margin-bottom: var(--sp-8);
}
.proc-ledger__head h2 { max-width: 15ch; text-wrap: balance; }
.proc-ledger__sum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--hairline); }
.proc-ledger__sum > div { padding-top: var(--sp-4); }
.proc-ledger__sum > div + div { padding-left: var(--sp-5); border-left: 1px solid var(--hairline); }
.proc-ledger__sum dt { font-size: var(--fs-small); color: var(--fg-dim); }
.proc-ledger__sum dd {
  margin: var(--sp-2) 0 0;
  font-family: var(--font-head); font-weight: var(--fw-head, 700); font-stretch: var(--head-stretch, normal);
  font-size: var(--ledger-fig); line-height: 1; letter-spacing: var(--ls-head, var(--ls-display));
  color: var(--fg); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.proc-ledger__sum dd span {
  margin-left: .15em; font-family: var(--font-body); font-weight: 400; font-stretch: normal;
  font-size: var(--fs-body); letter-spacing: 0; color: var(--fg-muted);
}
.proc-ledger__cols, .proc-ledger__row { display: grid; grid-template-columns: var(--ledger-cols); gap: var(--sp-5); }
.proc-ledger__cols {
  padding-bottom: var(--sp-3);
  font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--fg-dim);
}
.proc-ledger__axis { position: relative; }
.proc-ledger__axis i { position: absolute; top: 0; left: calc((var(--w) - 1) / var(--ledger-weeks) * 100%); font-style: normal; font-variant-numeric: tabular-nums; }
.proc-ledger__list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--hairline); }
.proc-ledger__row { align-items: baseline; padding-block: var(--sp-5); border-top: 1px solid var(--hairline); }
.proc-ledger__name { font-size: calc(var(--fs-h2) * .46); line-height: 1.15; text-wrap: balance; }
.proc-ledger__n {
  display: block; margin-bottom: var(--sp-1);
  font-family: var(--font-label, inherit); font-weight: 400; font-stretch: normal; font-size: var(--fs-small);
  letter-spacing: .04em; color: var(--fg-dim); font-variant-numeric: tabular-nums;
}
.proc-ledger__what { color: var(--fg-muted); text-wrap: pretty; }
.proc-ledger__out { color: var(--fg); font-weight: 500; text-wrap: pretty; }
.proc-ledger__eff { color: var(--fg-muted); font-size: var(--fs-small); }
.proc-ledger__dur { display: block; font-size: var(--fs-small); color: var(--fg-muted); font-variant-numeric: tabular-nums; }
/* The track: one hairline for the whole project, the phase's weeks on it. */
.proc-ledger__bar {
  position: relative; display: block; height: 8px; margin-top: var(--sp-2);
  background: linear-gradient(var(--hairline), var(--hairline)) center / 100% 1px no-repeat;
}
.proc-ledger__bar i {
  position: absolute; top: 0; bottom: 0; border-radius: 4px;
  left: calc((var(--s) - 1) / var(--ledger-weeks) * 100%);
  width: calc((var(--e) - var(--s) + 1) / var(--ledger-weeks) * 100%);
  background: var(--ledger-slice);
  transition: opacity .3s var(--ease-out), background-color .3s;
}
.proc-ledger__row[data-open] .proc-ledger__bar i { right: 0; width: auto; background: none; border: 1px dashed var(--fg-muted); }
/* On desktop the column labels say what each cell is. */
.proc-ledger__k {
  position: absolute; width: 1px; height: 1px; overflow: clip; clip-path: inset(50%); white-space: nowrap;
}
.proc-ledger__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4) var(--sp-6); margin-top: var(--sp-6); }
.proc-ledger__foot p { max-width: 58ch; }
@media (hover: hover) {
  .proc-ledger__list:hover .proc-ledger__bar i { opacity: .3; }
  .proc-ledger__list .proc-ledger__row:hover .proc-ledger__bar i { opacity: 1; background: var(--brand); }
  .proc-ledger__list .proc-ledger__row[data-open]:hover .proc-ledger__bar i { background: none; border-color: var(--brand); }
}
@media (max-width: 900px) {
  .proc-ledger__head { grid-template-columns: minmax(0, 1fr); }
  .proc-ledger__cols { display: none; }
  .proc-ledger__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-5); }
  .proc-ledger__name, .proc-ledger__what, .proc-ledger__out { grid-column: 1 / -1; }
  .proc-ledger__name { font-size: calc(var(--fs-h2) * .75); }
  .proc-ledger__k {
    position: static; width: auto; height: auto; overflow: visible; clip-path: none;
    display: block; margin-bottom: 2px;
    font-family: var(--font-label, inherit); font-weight: 400; font-size: var(--fs-eyebrow);
    letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--fg-dim);
  }
  .proc-ledger__out { padding-top: var(--sp-2); }
}
@media (max-width: 640px) {
  .proc-ledger { --ledger-fig: calc(var(--fs-display) * .9); }
  .proc-ledger__row { grid-template-columns: minmax(0, 1fr); }
  .proc-ledger__sum dd span { display: block; margin: var(--sp-1) 0 0; font-size: var(--fs-small); }
}
@media (prefers-reduced-motion: reduce) { .proc-ledger__bar i { transition: none; } }

/* ---- PC02 · the map becomes a running system ----
   <section class="proc-morph">
     <div class="wrap proc-morph__intro"> eyebrow · h2 · .lead </div>
     <div class="proc-morph__pin">
       <div class="wrap proc-morph__stage" data-phase="6">
         <ol class="proc-morph__steps"><li class="proc-morph__step" data-i="1"> count · h3 · say · out </li> ×6</ol>
         <div class="proc-morph__fig"><svg class="proc-morph__svg" …> manuals · links+flows · tests · nodes · live · chips </svg></div>
         <div class="proc-morph__dots"><i></i> ×6</div>
   Unarmed (no JS, reduced motion) it is a list beside the finished
   system. JS adds .is-armed: the pin gets --morph-pin of scroll, the
   stage sticks, and data-phase (1–6) picks the state; every state is
   below. Node positions are custom properties in user units (--x/--y the
   target, --ax/--ay today); lines never move, they only appear. */
.proc-morph {
  --morph-pin: 560vh;
  --morph-ease: .9s;
  --morph-name: 19px;       /* SVG user units, not CSS px */
  --morph-kind: 13px;
  --morph-note: 14px;
  padding-bottom: 0;
}
.proc-morph__intro h2 { max-width: 30ch; text-wrap: balance; }
.proc-morph__intro .lead { margin-top: var(--sp-5); }
.proc-morph__pin { position: relative; }
.proc-morph__stage {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas: "steps fig" "dots fig";
  gap: var(--sp-5) var(--sp-8); align-items: start;
  padding-block: var(--sp-8) var(--section-pad);
}
.proc-morph__steps { grid-area: steps; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-6); }
.proc-morph__count {
  font-family: var(--font-label, inherit); font-size: var(--fs-small); color: var(--fg-dim);
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.proc-morph__count b { color: var(--fg); font-weight: 600; }
.proc-morph__step h3 { margin-top: var(--sp-2); font-size: calc(var(--fs-h2) * .62); line-height: 1.1; letter-spacing: var(--ls-head, var(--ls-display)); }
.proc-morph__say { margin-top: var(--sp-3); font-size: var(--fs-lead); color: var(--fg-muted); max-width: 36ch; text-wrap: pretty; }
.proc-morph__out { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--hairline); color: var(--fg); max-width: 40ch; }
.proc-morph__out span {
  display: block; margin-bottom: 2px;
  font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--fg-dim);
}
.proc-morph__fig { grid-area: fig; position: sticky; top: var(--sp-7); }
.proc-morph__svg { display: block; width: 100%; height: auto; max-height: min(74vh, 640px); overflow: visible; }
.proc-morph__dots { grid-area: dots; display: none; gap: var(--sp-1); }
.proc-morph__dots i { width: 28px; height: 2px; background: var(--hairline); transition: background-color .3s; }
.proc-morph__dots i[data-on="true"] { background: var(--fg); }

/* the schematic */
.proc-morph__svg text { text-anchor: middle; font-family: var(--font-body); }
.proc-morph__node { transform: translate(calc(var(--x) * 1px), calc(var(--y) * 1px)); transition: transform var(--morph-ease) var(--ease-out); }
.proc-morph__node rect {
  fill: var(--bg-3); stroke: color-mix(in srgb, var(--fg) 30%, transparent); stroke-width: 1;
  transition: fill .5s, stroke .5s, stroke-dasharray .5s;
}
.proc-morph__node--erp rect { stroke: var(--fg); stroke-width: 1.5; }
.proc-morph__name { fill: var(--fg); font-size: var(--morph-name); font-weight: 600; transition: opacity .5s; }
.proc-morph__node--erp .proc-morph__name { font-size: calc(var(--morph-name) * 1.15); }
.proc-morph__kind { fill: var(--fg-muted); font-size: var(--morph-kind); }
.proc-morph__name--old { opacity: 0; }
.proc-morph__link { fill: none; stroke: var(--fg-muted); stroke-width: 1.5; transition: opacity .5s, stroke .5s; }
.proc-morph__flow { fill: none; stroke: var(--fg); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1 22; transition: opacity .5s; }
.proc-morph__manual path { fill: none; stroke: var(--fg-dim); stroke-width: 1.5; stroke-dasharray: 1 6; stroke-linecap: round; }
.proc-morph__manual text {
  fill: var(--fg-muted); font-size: var(--morph-note); font-style: italic;
  paint-order: stroke; stroke: var(--bg); stroke-width: 6px; stroke-linejoin: round;
}
.proc-morph__manual, .proc-morph__tests, .proc-morph__live, .proc-morph__chip { transition: opacity .5s; }
.proc-morph__manuals { opacity: 0; }
.proc-morph__manuals .proc-morph__manual { transition: none; }
.proc-morph__tests circle { fill: var(--bg); stroke: var(--fg); stroke-width: 1.2; }
.proc-morph__tests path { fill: none; stroke: var(--fg); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.proc-morph__live circle { fill: var(--brand); }
.proc-morph__live text { text-anchor: start; fill: var(--fg-muted); font-size: var(--morph-kind); }
.proc-morph__chip rect { fill: var(--bg-2); stroke: var(--hairline); }
.proc-morph__chip text { fill: var(--fg-muted); font-size: var(--morph-note); font-variant-numeric: tabular-nums; }

/* the six states — 6 is the default above */
.proc-morph__stage[data-phase="1"] .proc-morph__node { transform: translate(calc(var(--ax) * 1px), calc(var(--ay) * 1px)); }
.proc-morph__stage[data-phase="1"] .proc-morph__node rect { fill: transparent; stroke-dasharray: 5 5; }
.proc-morph__stage[data-phase="1"] .proc-morph__manuals { opacity: 1; transition: opacity .6s .3s; }
.proc-morph__stage:not([data-phase="3"]):not([data-phase="4"]):not([data-phase="5"]):not([data-phase="6"]) .proc-morph__name--old { opacity: 1; }
.proc-morph__stage:not([data-phase="3"]):not([data-phase="4"]):not([data-phase="5"]):not([data-phase="6"]) .proc-morph__name--new { opacity: 0; }
.proc-morph__stage[data-phase="1"] .proc-morph__link,
.proc-morph__stage[data-phase="1"] .proc-morph__flow { opacity: 0; }
.proc-morph__stage[data-phase="2"] .proc-morph__node rect { fill: transparent; }
.proc-morph__stage[data-phase="2"] .proc-morph__link { stroke: var(--fg-dim); stroke-dasharray: 5 7; }
.proc-morph__stage:not([data-phase="4"]):not([data-phase="5"]):not([data-phase="6"]) .proc-morph__tests { opacity: 0; }
.proc-morph__stage:not([data-phase="5"]):not([data-phase="6"]) .proc-morph__flow,
.proc-morph__stage:not([data-phase="5"]):not([data-phase="6"]) .proc-morph__live { opacity: 0; }
.proc-morph__stage:not([data-phase="6"]) .proc-morph__chip { opacity: 0; }
/* phase 5 on: the tests have done their job and step back */
.proc-morph__stage[data-phase="5"] .proc-morph__tests,
.proc-morph__stage[data-phase="6"] .proc-morph__tests { opacity: .35; }

/* armed: pinned, one phase in view */
.proc-morph.is-armed .proc-morph__pin { height: var(--morph-pin); }
.proc-morph.is-armed .proc-morph__stage {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  align-content: center; align-items: center; padding-block: var(--sp-7);
}
.proc-morph.is-armed .proc-morph__steps { display: grid; }
.proc-morph.is-armed .proc-morph__step {
  grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(var(--sp-3));
  transition: opacity .45s, transform .7s var(--ease-out), visibility 0s .45s;
}
.proc-morph.is-armed .proc-morph__step[data-on="true"] {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .5s .2s, transform .8s .2s var(--ease-out);
}
.proc-morph.is-armed .proc-morph__fig { position: static; }
.proc-morph.is-armed .proc-morph__dots { display: flex; }
@media (prefers-reduced-motion: no-preference) {
  .proc-morph.is-armed .proc-morph__flow { animation: proc-flow 1.4s linear infinite; }
}
@keyframes proc-flow { to { stroke-dashoffset: 23; } }
@media (max-width: 900px) {
  .proc-morph { --morph-pin: 480vh; }
  .proc-morph__stage { grid-template-columns: minmax(0, 1fr); grid-template-areas: "fig" "steps" "dots"; gap: var(--sp-6); padding-top: var(--sp-7); }
  .proc-morph__fig { position: static; margin-inline: calc(var(--gutter) * -.5); }
  .proc-morph.is-armed .proc-morph__stage { grid-template-rows: auto auto auto; gap: var(--sp-4); padding-block: var(--sp-6); }
  .proc-morph.is-armed .proc-morph__svg { max-height: 44svh; }
  .proc-morph__step h3 { font-size: calc(var(--fs-h2) * .85); }
  .proc-morph__say { font-size: var(--fs-body); }
}
@media (max-width: 640px) {
  .proc-morph { --morph-name: 22px; --morph-kind: 15px; --morph-note: 17px; }
  .proc-morph__kind { display: none; }
  .proc-morph__name { transform: translateY(6px); }
  .proc-morph__fig { margin-inline: calc(var(--gutter) * -1); }
  .proc-morph.is-armed .proc-morph__out { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .proc-morph__node, .proc-morph__node rect, .proc-morph__name, .proc-morph__link, .proc-morph__flow,
  .proc-morph__manuals, .proc-morph__tests, .proc-morph__live, .proc-morph__chip, .proc-morph__step { transition: none; }
}

/* ---- PC03 · two lanes: ours and yours ----
   <section class="proc-lanes" data-view="both|you"><div class="wrap">
     .proc-lanes__head ( eyebrow + h2 | .proc-lanes__side: p + .proc-lanes__toggle[role=group] > button[aria-pressed] ×2 )
     .proc-lanes__labels (aria-hidden: "" · Das machen wir · Das brauchen wir von Ihnen)
     <ol class="proc-lanes__list" data-reveal-group>
       <li class="proc-lanes__row reveal"> h3.proc-lanes__phase · p.proc-lanes__us · p.proc-lanes__you (+ b.proc-lanes__pt) </li>
     p.proc-lanes__total[aria-live]
   The client's lane is one tinted band down the rows; the toggle fades
   ours back. */
.proc-lanes {
  --lanes-cols: minmax(10rem, .7fr) minmax(0, 1fr) minmax(0, 1fr);
  --lanes-tint: var(--bg-2);
  --lanes-dim: .25;
}
.proc-lanes__head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--sp-6) var(--sp-8); align-items: end; margin-bottom: var(--sp-8); }
.proc-lanes__head h2 { max-width: 17ch; text-wrap: balance; }
.proc-lanes__side p { text-wrap: pretty; }
.proc-lanes__toggle {
  display: inline-flex; gap: 2px; margin-top: var(--sp-5); padding: 3px;
  border: 1px solid color-mix(in srgb, var(--fg) 22%, transparent); border-radius: var(--radius-btn);
}
.proc-lanes__toggle[hidden] { display: none; }
.proc-lanes__toggle button {
  min-height: 44px; padding: 0 var(--sp-4); border: 0; border-radius: calc(var(--radius-btn) - 3px);
  background: transparent; color: var(--fg-muted); cursor: pointer;
  font-family: var(--font-label, var(--font-body)); font-size: var(--fs-small); font-weight: 600;
  transition: background-color .3s var(--ease-out), color .3s var(--ease-out), scale .12s ease;
}
.proc-lanes__toggle button:active { scale: .97; }
.proc-lanes__toggle button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
@media (hover: hover) { .proc-lanes__toggle button[aria-pressed="false"]:hover { color: var(--fg); } }
.proc-lanes__labels, .proc-lanes__row { display: grid; grid-template-columns: var(--lanes-cols); }
.proc-lanes__labels {
  font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--fg-dim);
}
.proc-lanes__labels span { padding: 0 var(--sp-5) var(--sp-3) 0; transition: opacity .3s; }
.proc-lanes__labels span:last-child { padding: var(--sp-4) var(--sp-5) var(--sp-3); background: var(--lanes-tint); border-radius: var(--radius-card) var(--radius-card) 0 0; }
.proc-lanes__list { list-style: none; margin: 0; padding: 0; }
.proc-lanes__row { border-top: 1px solid var(--hairline); }
.proc-lanes__row:last-child { border-bottom: 1px solid var(--hairline); }
.proc-lanes__phase, .proc-lanes__us, .proc-lanes__you { padding-block: var(--sp-5); }
.proc-lanes__phase { padding-right: var(--sp-5); font-size: calc(var(--fs-h2) * .4); line-height: 1.2; }
.proc-lanes__phase span {
  display: block; margin-bottom: var(--sp-1);
  font-family: var(--font-label, inherit); font-weight: 400; font-stretch: normal; font-size: var(--fs-small);
  color: var(--fg-dim); font-variant-numeric: tabular-nums;
}
.proc-lanes__us { padding-right: var(--sp-6); color: var(--fg-muted); max-width: none; transition: opacity .3s var(--ease-out); }
.proc-lanes__you {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-4); align-items: start;
  max-width: none; padding-inline: var(--sp-5); background: var(--lanes-tint); color: var(--fg);
}
.proc-lanes__row:last-child .proc-lanes__you { border-radius: 0 0 var(--radius-card) var(--radius-card); }
.proc-lanes__pt {
  font-family: var(--font-head); font-weight: 600; font-stretch: var(--head-stretch, normal);
  font-size: var(--fs-body); white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--fg);
}
.proc-lanes__k { position: absolute; width: 1px; height: 1px; overflow: clip; clip-path: inset(50%); white-space: nowrap; }
.proc-lanes__total { margin-top: var(--sp-6); font-size: var(--fs-lead); color: var(--fg-muted); max-width: 64ch; }
.proc-lanes__total b { color: var(--fg); font-weight: 600; }
.proc-lanes[data-view="you"] .proc-lanes__us,
.proc-lanes[data-view="you"] .proc-lanes__labels span:nth-child(2) { opacity: var(--lanes-dim); }
@media (max-width: 900px) {
  .proc-lanes__head { grid-template-columns: minmax(0, 1fr); }
  .proc-lanes__labels { display: none; }
  .proc-lanes__row { grid-template-columns: minmax(0, 1fr); padding-block: var(--sp-5); }
  .proc-lanes__row:last-child .proc-lanes__you { border-radius: var(--radius-card); }
  .proc-lanes__phase { padding: 0 0 var(--sp-3); font-size: calc(var(--fs-h2) * .75); }
  .proc-lanes__us { padding: 0 0 var(--sp-3); }
  .proc-lanes__you { padding: var(--sp-4); border-radius: var(--radius-card); }
  .proc-lanes__k {
    position: static; width: auto; height: auto; overflow: visible; clip-path: none; display: block; margin-bottom: 2px;
    font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase; color: var(--fg-dim);
  }
  .proc-lanes__you .proc-lanes__k { grid-column: 1 / -1; margin-bottom: -8px; }
  .proc-lanes[data-view="you"] .proc-lanes__us { display: none; }
}
@media (max-width: 640px) {
  .proc-lanes__toggle { display: flex; }
  .proc-lanes__toggle button { flex: 1; padding-inline: var(--sp-2); }
  .proc-lanes__you { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
}
@media (prefers-reduced-motion: reduce) { .proc-lanes__us, .proc-lanes__labels span, .proc-lanes__toggle button { transition: none; } }

/* ---- PC04 · after you write: the reply time, for now ----
   <section class="proc-next"><div class="wrap proc-next__grid">
     <div class="proc-next__side"> eyebrow · h2 · .person (I07) </div>
     <ol class="proc-next__steps" data-reveal-group>
       <li class="proc-next__step reveal"> p.proc-next__when[data-reply] · <div> h3 · p (+ span[data-promise]) · .btn--accent </div></li> ×3
   The time column is the strong type: the reply promise, worked out for
   now, sits where the eye goes. */
.proc-next { --next-when: calc(var(--fs-h2) * .44); }
.proc-next__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--sp-8); align-items: start; }
.proc-next__side h2 { max-width: 15ch; text-wrap: balance; }
.proc-next__side .person { max-width: 32rem; }
.proc-next__steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.proc-next__step {
  display: grid; grid-template-columns: minmax(10rem, 15rem) minmax(0, 1fr); gap: var(--sp-5);
  padding-block: var(--sp-6); border-bottom: 1px solid var(--hairline);
}
.proc-next__when {
  font-family: var(--font-head); font-weight: 600; font-stretch: var(--head-stretch, normal);
  font-size: var(--next-when); line-height: 1.2; letter-spacing: var(--ls-head, var(--ls-display));
  color: var(--fg); font-variant-numeric: tabular-nums; text-wrap: balance;
}
.proc-next__step h3 { margin-bottom: var(--sp-2); }
.proc-next__step p { text-wrap: pretty; }
.proc-next__step [data-promise] { display: block; margin-top: var(--sp-2); color: var(--fg); }
.proc-next__step [data-promise][hidden] { display: none; }
.proc-next__step .btn { margin-top: var(--sp-5); }
@media (max-width: 900px) {
  .proc-next__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
  .proc-next__steps { order: 1; }
}
@media (max-width: 640px) {
  .proc-next { --next-when: var(--fs-h3); }
  .proc-next__step { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); padding-block: var(--sp-5); }
  .proc-next__step .btn { width: 100%; }
}

/* ---- PC05 · the first 90 days, by the week ----
   <section class="proc-days" data-week="6"><div class="wrap">
     .proc-days__head ( eyebrow + h2 | p )
     <div class="proc-days__ruler" role="group"> .proc-days__span > button.proc-days__wk[data-w][aria-pressed] ×weeks </div> ×4
     p.proc-days__status[aria-live]
     <ol class="proc-days__cols" data-reveal-group>
       <li class="proc-days__col reveal" data-from="1" data-to="1" [data-state="done|now|next"]>
         p.proc-days__when (+ span.proc-days__state) · p.proc-days__day · ul · p.proc-days__win
   Ruler and columns share --days-cols, proportional to the weeks each
   horizon spans (the first held wide enough for its figure). */
.proc-days {
  --days-cols: minmax(13rem, 2fr) 3fr 4fr 5fr;
  --days-fig: var(--fs-display);
  --days-dim: .4;
}
.proc-days__head { display: grid; grid-template-columns: minmax(0, 3.2fr) minmax(0, 1fr); gap: var(--sp-6) var(--sp-8); align-items: end; margin-bottom: var(--sp-8); }
.proc-days__head h2 { max-width: 23ch; text-wrap: balance; }
.proc-days__ruler, .proc-days__cols { display: grid; grid-template-columns: var(--days-cols); gap: 0 var(--sp-5); }
.proc-days__span { display: flex; gap: 3px; }
.proc-days__wk {
  flex: 1; min-width: 0; display: grid; gap: 6px; justify-items: start;
  padding: var(--sp-2) 0; border: 0; background: none; cursor: pointer; color: var(--fg-dim);
  font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); font-variant-numeric: tabular-nums;
  transition: color .3s;
}
.proc-days__wk::before {
  content: ""; width: 100%; height: 4px; border-radius: 2px;
  background: color-mix(in srgb, var(--fg) 16%, transparent); transition: background-color .3s var(--ease-out);
}
.proc-days__wk:disabled { cursor: default; }
.proc-days__wk[data-past="true"]::before { background: var(--fg-muted); }
.proc-days__wk[aria-pressed="true"] { color: var(--fg); font-weight: 700; }
.proc-days__wk[aria-pressed="true"]::before { background: var(--brand); }
.proc-days__wk:focus-visible { outline-offset: 2px; }
@media (hover: hover) { .proc-days__wk:not(:disabled):hover { color: var(--fg); } }
.proc-days__status { margin-top: var(--sp-3); min-height: 1.6em; color: var(--fg); max-width: none; }
.proc-days__status[hidden] { display: none; }
.proc-days__cols { list-style: none; margin: var(--sp-6) 0 0; padding: 0; }
.proc-days__col { padding-top: var(--sp-4); border-top: 2px solid var(--hairline); transition: border-color .4s; }
.proc-days__col > * { transition: opacity .4s var(--ease-out), color .4s; }
.proc-days__when { display: flex; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-small); color: var(--fg-dim); max-width: none; }
.proc-days__state { font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--fg-dim); }
.proc-days__day {
  margin: var(--sp-2) 0 var(--sp-4);
  font-family: var(--font-head); font-weight: var(--fw-head, 700); font-stretch: var(--head-stretch, normal);
  font-size: var(--days-fig); line-height: 1; letter-spacing: var(--ls-head, var(--ls-display));
  color: var(--fg); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.proc-days__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); color: var(--fg-muted); }
.proc-days__win { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--hairline); color: var(--fg); font-weight: 500; text-wrap: pretty; }
.proc-days__win span {
  display: block; margin-bottom: 2px; font-weight: 400;
  font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--fg-dim);
}
.proc-days.is-armed .proc-days__col[data-state="now"] { border-top-color: var(--fg); }
.proc-days.is-armed .proc-days__col[data-state="now"] .proc-days__state { color: var(--fg); }
.proc-days.is-armed .proc-days__col[data-state="done"] .proc-days__day { color: var(--fg-muted); }
.proc-days.is-armed .proc-days__col[data-state="next"] > :not(.proc-days__when) { opacity: var(--days-dim); }
@media (max-width: 900px) {
  .proc-days__head { grid-template-columns: minmax(0, 1fr); }
  .proc-days__ruler { grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 3px; }
  .proc-days__span { display: contents; }
  .proc-days__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-7) var(--sp-5); }
}
@media (max-width: 640px) {
  .proc-days { --days-fig: calc(var(--fs-display) * 1.1); }
  .proc-days__cols { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .proc-days__wk { justify-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  .proc-days__wk, .proc-days__wk::before, .proc-days__col, .proc-days__col > * { transition: none; }
}

/* ---- PC06 · phase track: what you hold after each ----
   <section class="proc-track"><div class="proc-track__stage">
     <div class="wrap proc-track__head"> eyebrow + h2 | .proc-track__ctl (count[aria-live] · prev · next) </div>
     <div class="proc-track__rail" tabindex="0" role="region">
       <article class="proc-track__panel"> n · h3 · p.proc-track__have · p.proc-track__what · dl.proc-track__meta </article> ×6
   A native swipe row with snap points (no JS, reduced motion, ≤900px).
   Above 900px JS adds .is-pinned and sets the section's height from the
   rail (rail width − viewport + 100vh); never set it by hand. */
.proc-track {
  --track-panel: clamp(320px, 30vw, 500px);
  --track-fig: calc(var(--fs-display) * 1.5);
  position: relative; padding-block: 0;
}
.proc-track__stage { display: flex; flex-direction: column; justify-content: center; gap: var(--sp-7); padding-block: var(--section-pad); }
.proc-track__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--sp-5); }
.proc-track__head h2 { max-width: 32ch; text-wrap: balance; }
.proc-track__ctl { display: flex; align-items: center; gap: var(--sp-2); }
.proc-track__count { margin-right: var(--sp-3); font-family: var(--font-label, inherit); font-size: var(--fs-small); color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.proc-track__count b { color: var(--fg); font-weight: 600; }
.proc-track__btn {
  display: inline-grid; place-items: center; width: 48px; height: 48px; padding: 0;
  border: 1px solid color-mix(in srgb, var(--fg) 24%, transparent); border-radius: 50%;
  background: transparent; color: var(--fg); cursor: pointer;
  transition: background-color .3s var(--ease-out), color .3s var(--ease-out), border-color .3s, opacity .3s, scale .12s ease;
}
.proc-track__btn:active { scale: .97; }
.proc-track__btn:disabled { opacity: .35; cursor: default; }
.proc-track__btn svg { width: var(--icon-inline, 20px); height: var(--icon-inline, 20px); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .proc-track__btn:not(:disabled):hover { background: var(--fg); color: var(--bg); border-color: var(--fg); } }
.proc-track__rail {
  display: flex; padding-inline: var(--gutter);
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
}
.proc-track__rail::-webkit-scrollbar { display: none; }
.proc-track__rail:focus-visible { outline-offset: -2px; }
.proc-track__panel {
  flex: none; width: var(--track-panel); scroll-snap-align: start;
  display: flex; flex-direction: column; min-height: min(56vh, 540px);
  padding: 0 var(--sp-6) 0 var(--sp-5); border-left: 1px solid var(--hairline);
}
.proc-track__panel:last-child { border-right: 1px solid var(--hairline); }
.proc-track__n {
  font-family: var(--font-head); font-weight: var(--fw-head, 700); font-stretch: var(--head-stretch, normal);
  font-size: var(--track-fig); line-height: .9; letter-spacing: var(--ls-head, var(--ls-display));
  color: var(--fg); font-variant-numeric: tabular-nums;
}
.proc-track__panel h3 { margin-top: var(--sp-5); color: var(--fg-muted); font-weight: 600; }
.proc-track__have {
  margin-top: var(--sp-2); max-width: 22ch;
  font-family: var(--font-head); font-weight: 600; font-stretch: var(--head-stretch, normal);
  font-size: calc(var(--fs-h2) * .5); line-height: 1.2; letter-spacing: var(--ls-head, var(--ls-display));
  color: var(--fg); text-wrap: balance;
}
.proc-track__have span {
  display: block; margin-bottom: var(--sp-2); font-family: var(--font-label, inherit); font-weight: 400; font-stretch: normal;
  font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--fg-dim);
}
.proc-track__what { margin-top: var(--sp-5); font-size: var(--fs-small); color: var(--fg-muted); max-width: 40ch; }
.proc-track__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); margin: auto 0 0; padding-top: var(--sp-6); }
.proc-track__meta dt { font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--fg-dim); }
.proc-track__meta dd { margin: 2px 0 0; font-size: var(--fs-small); color: var(--fg); }
@media (prefers-reduced-motion: no-preference) and (min-width: 901px) {
  .proc-track.is-pinned .proc-track__stage { position: sticky; top: 0; height: 100vh; overflow: clip; padding-block: var(--sp-7); }
  .proc-track.is-pinned .proc-track__rail {
    width: max-content; overflow: visible; scroll-snap-type: none;
    transform: translate3d(var(--track-x, 0px), 0, 0); will-change: transform;
  }
}
@media (max-width: 900px) {
  .proc-track { --track-panel: min(80vw, 380px); --track-fig: calc(var(--fs-display) * 1.3); }
  .proc-track__stage { gap: var(--sp-6); }
  .proc-track__panel { min-height: 0; }
}
@media (max-width: 640px) {
  .proc-track__head { gap: var(--sp-4); }
  .proc-track__btn { width: 44px; height: 44px; }
  .proc-track__have { font-size: calc(var(--fs-h2) * .72); }
  .proc-track__panel { padding: 0 var(--sp-5) 0 var(--sp-4); }
}
@media (prefers-reduced-motion: reduce) { .proc-track__btn { transition: none; } }

/* ---- PC07 · phase rows to open, several at once ----
   <section class="proc-rows"><div class="wrap">
     .proc-rows__head ( eyebrow + h2 | button.proc-rows__all[hidden] )
     <ol class="proc-rows__list">
       <li class="proc-rows__item" [data-start="open"] data-open="true|false">
         <h3 class="proc-rows__h"><button aria-expanded aria-controls> n · t · meta · mark </button></h3>
         <div class="proc-rows__panel" role="region"><div class="proc-rows__clip"><div class="proc-rows__inner"> .proc-rows__body · .photo.parallax </div></div></div>
   Without JS every row is open. Height animates grid rows 0fr → 1fr
   (as the kit's .menu__sub), armed a frame after load (.is-ready). */
.proc-rows {
  --rows-cols: 4rem minmax(0, 1.1fr) minmax(0, .9fr) 44px;
  --rows-title: calc(var(--fs-h2) * .7);
}
.proc-rows__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--sp-5); margin-bottom: var(--sp-7); }
.proc-rows__head h2 { max-width: 23ch; text-wrap: balance; }
.proc-rows__all {
  padding: var(--sp-1) 0; border: 0; background: none; cursor: pointer; color: var(--fg);
  font-family: var(--font-label, var(--font-body)); font-size: var(--fs-body); font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  transition: text-decoration-color .3s;
}
.proc-rows__all[hidden] { display: none; }
@media (hover: hover) { .proc-rows__all:hover { text-decoration-thickness: 2px; text-decoration-color: var(--brand); } }
.proc-rows__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.proc-rows__item { border-bottom: 1px solid var(--hairline); }
.proc-rows__h { margin: 0; font-size: inherit; }
.proc-rows__h button {
  width: 100%; display: grid; grid-template-columns: var(--rows-cols); gap: var(--sp-5); align-items: center;
  padding: var(--sp-5) 0; border: 0; background: none; color: var(--fg); text-align: left; cursor: pointer; font: inherit;
}
.proc-rows__h button:focus-visible { outline-offset: -2px; }
.proc-rows__n { font-family: var(--font-label, inherit); font-size: var(--fs-small); color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.proc-rows__t {
  font-family: var(--font-head); font-weight: var(--fw-head, 700); font-stretch: var(--head-stretch, normal);
  font-size: var(--rows-title); line-height: 1.1; letter-spacing: var(--ls-head, var(--ls-display));
  transition: transform .5s var(--ease-out);
}
.proc-rows__meta { display: grid; gap: 2px; font-size: var(--fs-small); color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.proc-rows__meta span { color: var(--fg-muted); font-size: var(--fs-body); }
.proc-rows__mark {
  position: relative; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--fg) 24%, transparent); transition: border-color .3s, background-color .3s;
}
.proc-rows__mark::before, .proc-rows__mark::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; margin: -.75px 0 0 -7px;
  background: var(--fg); transition: transform .4s var(--ease-out);
}
.proc-rows__mark::after { transform: rotate(90deg); }
.proc-rows__item[data-open="true"] .proc-rows__mark::after { transform: rotate(0deg); }
@media (hover: hover) {
  .proc-rows__h button:hover .proc-rows__t { transform: translateX(var(--sp-2)); }
  .proc-rows__h button:hover .proc-rows__mark { border-color: var(--fg); }
}
.proc-rows__panel { display: grid; grid-template-rows: 1fr; }
.proc-rows__item[data-open="false"] .proc-rows__panel { grid-template-rows: 0fr; }
.proc-rows__clip { min-height: 0; overflow: clip; }
.proc-rows__item[data-open="false"] .proc-rows__clip { visibility: hidden; }
.proc-rows.is-ready .proc-rows__panel { transition: grid-template-rows .5s var(--ease-out); }
.proc-rows.is-ready .proc-rows__clip { transition: visibility 0s .5s; }
.proc-rows.is-ready .proc-rows__item[data-open="true"] .proc-rows__clip { transition: none; }
.proc-rows__inner { display: grid; grid-template-columns: var(--rows-cols); gap: var(--sp-5); padding-bottom: var(--sp-7); }
.proc-rows__body { grid-column: 2; }
.proc-rows__body .lead { color: var(--fg-muted); text-wrap: pretty; }
.proc-rows__body dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); margin: var(--sp-6) 0 0; padding-top: var(--sp-4); border-top: 1px solid var(--hairline); }
.proc-rows__body dt { font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--fg-dim); }
.proc-rows__body dd { margin: 2px 0 0; color: var(--fg); }
.proc-rows__inner .photo { grid-column: 3 / -1; }
@media (max-width: 900px) {
  .proc-rows { --rows-cols: 2.25rem minmax(0, 1fr) 44px; --rows-title: calc(var(--fs-h2) * .9); }
  .proc-rows__meta { grid-column: 2; grid-row: 2; }
  .proc-rows__mark { grid-column: 3; grid-row: 1; }
  .proc-rows__h button { gap: var(--sp-2) var(--sp-4); }
  .proc-rows__inner { gap: var(--sp-5) var(--sp-4); }
  .proc-rows__inner .photo { grid-column: 2 / -1; }
}
@media (max-width: 640px) {
  .proc-rows__inner { grid-template-columns: minmax(0, 1fr); }
  .proc-rows__body, .proc-rows__inner .photo { grid-column: 1; }
  .proc-rows__body dl { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .proc-rows.is-ready .proc-rows__panel, .proc-rows.is-ready .proc-rows__clip, .proc-rows__t, .proc-rows__mark, .proc-rows__mark::after { transition: none; }
}

/* ---- PC08 · three verbs, each with its cost in time ----
   <section class="proc-verbs"><div class="wrap">
     .proc-verbs__head ( eyebrow + h2 )
     <ol class="proc-verbs__list" data-reveal-group>
       <li class="proc-verbs__step reveal"> p.proc-verbs__cost (b + unit) · h3 · p · [.btn--accent in the first] </li> ×3
     p.proc-verbs__note
   The first step holds the button: the action is the step. */
.proc-verbs { --verbs-fig: calc(var(--fs-display) * 1.6); }
.proc-verbs__head { margin-bottom: var(--sp-8); }
.proc-verbs__head h2 { max-width: 22ch; text-wrap: balance; }
.proc-verbs__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--hairline); }
.proc-verbs__step { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-5) var(--sp-6) 0 0; }
.proc-verbs__step + .proc-verbs__step { padding-left: var(--sp-6); border-left: 1px solid var(--hairline); }
.proc-verbs__cost { display: flex; align-items: baseline; gap: var(--sp-2); color: var(--fg-muted); }
.proc-verbs__cost b {
  font-family: var(--font-head); font-weight: var(--fw-head, 700); font-stretch: var(--head-stretch, normal);
  font-size: var(--verbs-fig); line-height: 1; letter-spacing: var(--ls-head, var(--ls-display));
  color: var(--fg); font-variant-numeric: tabular-nums;
}
.proc-verbs__step h3 { margin-top: var(--sp-3); font-size: calc(var(--fs-h2) * .5); line-height: 1.1; }
.proc-verbs__step p:not(.proc-verbs__cost) { text-wrap: pretty; max-width: 36ch; }
.proc-verbs__step .btn { margin-top: var(--sp-3); }
.proc-verbs__note { margin-top: var(--sp-7); font-size: var(--fs-small); color: var(--fg-muted); max-width: none; }
@media (max-width: 900px) {
  .proc-verbs__list { grid-template-columns: minmax(0, 1fr); }
  .proc-verbs__step { display: grid; grid-template-columns: minmax(7rem, auto) minmax(0, 1fr); gap: var(--sp-2) var(--sp-5); padding: var(--sp-5) 0; }
  .proc-verbs__step + .proc-verbs__step { padding-left: 0; border-left: 0; border-top: 1px solid var(--hairline); }
  .proc-verbs__cost { grid-row: 1 / span 3; flex-direction: column; gap: var(--sp-1); }
  .proc-verbs__step > :not(.proc-verbs__cost) { grid-column: 2; }
  .proc-verbs__step h3 { margin-top: 0; font-size: calc(var(--fs-h2) * .8); }
}
@media (max-width: 640px) {
  .proc-verbs { --verbs-fig: calc(var(--fs-display) * 1.2); }
  .proc-verbs__step { grid-template-columns: 5rem minmax(0, 1fr); }
  .proc-verbs__step .btn { width: 100%; }
}

/* ---- 2026-09-11 · BDG page view ---- */

/* ---- PC09 · dimension lines: a project, then open-ended ----
   <section class="proc-dim"><div class="wrap">
     .proc-dim__head ( div: eyebrow + h2 | p.lead )
     .proc-dim__chain
       .proc-dim__seg.proc-dim__seg--pre      p.proc-dim__k · span.proc-dim__rule · .proc-dim__ph--pre ( p.proc-dim__n · .proc-dim__txt: h3 p .link )
       .proc-dim__seg.proc-dim__seg--project  k · rule · ol.proc-dim__list > li.proc-dim__ph ×5
       .proc-dim__seg.proc-dim__seg--run      k · rule (open: no end tick, runs to the viewport edge) · ol > li ×1
   A dimension line is one element: its inline borders are the ticks,
   ::before the line. From 1279px down the chain is vertical and the rules
   become a rail; the open one runs out through the section's foot. */
.proc-dim {
  --dim-line: color-mix(in srgb, var(--fg) 45%, transparent);
  --dim-fig: var(--fs-display);
  --dim-tick: 13px;
  --dim-dash: 12px;
}
.proc-dim__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-6) var(--sp-8); align-items: end; margin-bottom: var(--sp-8); }
.proc-dim__head h2 { max-width: 21ch; text-wrap: balance; }
.proc-dim__head .lead { text-wrap: pretty; }
.proc-dim__chain {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 5fr) minmax(0, 1.15fr);
  grid-template-rows: auto auto auto; gap: 0 var(--sp-6);
}
.proc-dim__seg { display: grid; grid-row: span 3; grid-template-rows: subgrid; min-width: 0; }
.proc-dim__k {
  align-self: end; max-width: none;
  font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--fg-dim); transition: color .3s;
}
.proc-dim__rule {
  position: relative; display: block; height: var(--dim-tick); margin: var(--sp-2) 0 var(--sp-6);
  border-inline: 1px solid var(--dim-line);
}
.proc-dim__rule::before {
  content: ""; position: absolute; left: 0; right: 0; top: calc(var(--dim-tick) / 2 - 1px); height: 1px;
  background: var(--dim-line);
}
.proc-dim__seg--run .proc-dim__rule { border-right: 0; margin-right: calc(var(--gutter) * -1); }
.proc-dim__seg--run .proc-dim__rule::before {
  background: repeating-linear-gradient(90deg, var(--dim-line) 0 calc(var(--dim-dash) / 2), transparent 0 var(--dim-dash));
}
.proc-dim__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-5); }
.proc-dim__seg--run .proc-dim__list { grid-template-columns: minmax(0, 1fr); }
.proc-dim__n {
  max-width: none; font-family: var(--font-head); font-weight: var(--fw-head, 700); font-stretch: var(--head-stretch, normal);
  font-size: var(--dim-fig); line-height: 1; letter-spacing: var(--ls-head, var(--ls-display));
  color: var(--fg); font-variant-numeric: tabular-nums;
}
.proc-dim__ph--pre .proc-dim__n { color: var(--fg-dim); }
.proc-dim__txt h3 { margin-top: var(--sp-4); font-size: var(--fs-lead); line-height: 1.25; -webkit-hyphens: manual; hyphens: manual; text-wrap: balance; }
.proc-dim__txt p { margin-top: var(--sp-2); font-size: var(--fs-small); line-height: 1.55; text-wrap: pretty; }
.proc-dim__txt .link { margin-top: var(--sp-3); font-size: var(--fs-small); }
@media (hover: hover) { .proc-dim__seg:hover .proc-dim__k { color: var(--fg); } }
@media (prefers-reduced-motion: no-preference) {
  .proc-dim__seg--run .proc-dim__rule::before { animation: proc-dim-out 2.4s linear infinite; }
}
@keyframes proc-dim-out { to { background-position: var(--dim-dash) 0; } }
@keyframes proc-dim-down { to { background-position: 0 var(--dim-dash); } }
@media (max-width: 1279px) {
  .proc-dim__chain { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: var(--sp-7); }
  .proc-dim__seg { grid-row: auto; grid-template-columns: var(--dim-tick) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: var(--sp-5); }
  .proc-dim__k { grid-column: 2; grid-row: 1; align-self: start; margin-bottom: var(--sp-4); }
  .proc-dim__rule { grid-column: 1; grid-row: 1 / -1; width: var(--dim-tick); height: auto; margin: 0; border-inline: 0; border-block: 1px solid var(--dim-line); }
  .proc-dim__rule::before { left: calc(var(--dim-tick) / 2 - 1px); right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .proc-dim__seg--run .proc-dim__rule { margin: 0 0 calc(var(--section-pad) * -1); border-bottom: 0; }
  .proc-dim__seg--run .proc-dim__rule::before {
    background: repeating-linear-gradient(180deg, var(--dim-line) 0 calc(var(--dim-dash) / 2), transparent 0 var(--dim-dash));
  }
  .proc-dim__ph--pre, .proc-dim__seg > :is(.proc-dim__ph--pre, .proc-dim__list) { grid-column: 2; }
  .proc-dim__ph { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--sp-4); align-items: baseline; }
  .proc-dim__list { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  .proc-dim { --dim-fig: calc(var(--fs-display) * .75); }
  .proc-dim__txt h3 { margin-top: 0; font-size: var(--fs-h3); }
  .proc-dim__txt p { font-size: var(--fs-body); max-width: 56ch; }
}
@media (max-width: 1279px) and (prefers-reduced-motion: no-preference) {
  .proc-dim__seg--run .proc-dim__rule::before { animation-name: proc-dim-down; }
}
@media (max-width: 900px) {
  .proc-dim__head { grid-template-columns: minmax(0, 1fr); margin-bottom: var(--sp-7); }
}
@media (max-width: 640px) {
  .proc-dim__seg { column-gap: var(--sp-4); }
  .proc-dim__ph { grid-template-columns: 3rem minmax(0, 1fr); gap: var(--sp-3); }
  .proc-dim { --dim-fig: calc(var(--fs-display) * .6); }
  .proc-dim__chain { gap: var(--sp-6); }
}
@media (prefers-reduced-motion: reduce) { .proc-dim__k { transition: none; } }

/* ---- PC10 · the loop after go-live ----
   <section class="proc-loop"><div class="wrap">
     .proc-loop__body
       .proc-loop__main ( .proc-loop__head: eyebrow · h2 · .lead ·
                          .proc-loop__fig > svg.proc-loop__svg ( paths · g.proc-loop__stop[data-k] (tick + num + name) · mid text · circle.proc-loop__dot ) )
       .proc-loop__key
         ol.proc-loop__once  > li.proc-loop__item[data-k] ( n · div: h3 p ) ×2   (00 analysis, 01)
         .proc-loop__cycle   ( p.proc-loop__ck · ol.proc-loop__again > li ×5 )  (02–06)
   Stops and key rows share data-k; [data-on] pairs them. Phones hide the
   drawing and draw the loop as a bracket beside 02–06. SVG sizes are in
   user units (knobs below), not CSS px. */
.proc-loop {
  --loop-line: color-mix(in srgb, var(--fg) 50%, transparent);
  --loop-name: 17px;
  --loop-num: 12px;
  --loop-mid: 15px;
}
.proc-loop__body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-8); align-items: start; }
.proc-loop__head h2 { max-width: 21ch; text-wrap: balance; }
.proc-loop__head .lead { margin-top: var(--sp-5); max-width: 52ch; text-wrap: pretty; }
.proc-loop__fig { margin-top: var(--sp-7); }
.proc-loop__svg { display: block; width: 100%; height: auto; overflow: visible; }
.proc-loop__svg text { font-family: var(--font-body); text-anchor: middle; }
.proc-loop__svg .proc-loop__start { text-anchor: start; }
.proc-loop__svg .proc-loop__back { text-anchor: end; }
.proc-loop__path { fill: none; stroke: var(--loop-line); stroke-width: 1.5; }
.proc-loop__dir { fill: none; stroke: var(--fg); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.proc-loop__tick { fill: none; stroke: var(--fg); stroke-width: 2.5; stroke-linecap: round; transition: stroke .3s; }
.proc-loop__num { fill: var(--fg-dim); font-size: var(--loop-num); letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.proc-loop__name { fill: var(--fg); font-size: var(--loop-name); font-weight: 600; transition: fill .3s; }
.proc-loop__stop--pre rect { fill: none; stroke: var(--loop-line); stroke-width: 1.5; stroke-dasharray: 4 4; transition: stroke .3s; }
.proc-loop__back { fill: var(--fg-muted); font-size: var(--loop-mid); font-style: italic; }
.proc-loop__mid { fill: var(--fg-muted); font-size: var(--loop-mid); }
.proc-loop__dot { fill: var(--fg); }
.proc-loop__stop[data-on] .proc-loop__tick { stroke: var(--brand); }
.proc-loop__stop--pre[data-on] rect { stroke: var(--brand); stroke-dasharray: none; }
.proc-loop__svg:has([data-on]) .proc-loop__stop:not([data-on]) .proc-loop__name { fill: var(--fg-dim); }
.proc-loop__key ol { list-style: none; margin: 0; padding: 0; }
.proc-loop__item { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--sp-3); padding-block: var(--sp-3); border-top: 1px solid var(--hairline); }
.proc-loop__n { padding-top: 3px; font-family: var(--font-label, inherit); font-size: var(--fs-small); color: var(--fg-dim); font-variant-numeric: tabular-nums; transition: color .3s; }
.proc-loop__item h3 { font-size: var(--fs-body); line-height: 1.4; }
.proc-loop__item p { margin-top: 2px; font-size: var(--fs-small); line-height: 1.5; text-wrap: pretty; }
.proc-loop__item .link { margin-top: var(--sp-2); font-size: var(--fs-small); }
.proc-loop__item[data-on] .proc-loop__n { color: var(--fg); }
.proc-loop__item[data-on] h3 { text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 2px; text-underline-offset: .25em; }
.proc-loop__cycle { position: relative; margin-top: var(--sp-5); }
.proc-loop__ck {
  margin-bottom: var(--sp-2); max-width: none;
  font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--fg-dim);
}
.proc-loop__again { position: relative; border-bottom: 1px solid var(--hairline); }
@media (max-width: 900px) {
  .proc-loop__body { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
  .proc-loop__fig { max-width: 720px; margin-top: var(--sp-6); }
}
/* Phones: no drawing; the loop is a bracket from 06 back up to 02. */
@media (max-width: 640px) {
  .proc-loop__fig { display: none; }
  .proc-loop__cycle { padding-right: var(--sp-5); }
  .proc-loop__again::after {
    content: ""; position: absolute; top: var(--sp-4); bottom: var(--sp-4); right: calc(var(--sp-5) * -1 + 2px); width: 14px;
    border: 1.5px solid var(--loop-line); border-left: 0; border-radius: 0 10px 10px 0;
  }
  .proc-loop__again::before {
    content: ""; position: absolute; top: calc(var(--sp-4) - 4px); right: calc(var(--sp-5) * -1 + 10px); width: 8px; height: 8px;
    border-left: 1.5px solid var(--loop-line); border-bottom: 1.5px solid var(--loop-line); transform: rotate(45deg);
  }
}
@media (prefers-reduced-motion: reduce) { .proc-loop__tick, .proc-loop__name, .proc-loop__n, .proc-loop__stop--pre rect { transition: none; } }

/* ---- PC11 · the analysis moves the starting line ----
   <section class="proc-entry" data-route="new|fix|run"><div class="wrap proc-entry__grid">
     .proc-entry__side ( eyebrow · h2 · .lead · .proc-entry__an: k · h3 · p · p.proc-entry__q ·
                         .proc-entry__opts[role=group][hidden] > button[data-route][aria-pressed] ×3 ·
                         ul.proc-entry__static (no-JS routes) · .link )
     .proc-entry__main ( ol.proc-entry__list > li.proc-entry__row[data-state="skip|start|run"]
                           ( n · .proc-entry__body: h3 + .proc-entry__more>div>p · p.proc-entry__tag ) ×6
                         p.proc-entry__status[aria-live] )
   The start row's top rule is the brand line; skipped rows fold their
   line (grid rows 1fr → 0fr), armed a frame after load (.is-ready). */
.proc-entry {
  --entry-fig: calc(var(--fs-h2) * .42);
  --entry-start: var(--brand);
}
.proc-entry__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-8); align-items: start; }
.proc-entry__side h2 { max-width: 14ch; text-wrap: balance; }
.proc-entry__side .lead { margin-top: var(--sp-5); text-wrap: pretty; }
.proc-entry__an { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--hairline); }
.proc-entry__k {
  margin-bottom: var(--sp-2); max-width: none;
  font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--fg-dim);
}
.proc-entry__an h3 { font-size: var(--fs-h3); }
.proc-entry__an h3 + p { margin-top: var(--sp-2); text-wrap: pretty; }
.proc-entry__q { margin-top: var(--sp-5); font-size: var(--fs-small); font-weight: 600; color: var(--fg); }
.proc-entry__opts { display: grid; gap: var(--sp-1); margin-top: var(--sp-3); }
.proc-entry__opts[hidden] { display: none; }
.proc-entry__opts button {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--sp-3);
  min-height: 52px; padding: var(--sp-2) var(--sp-4); text-align: left; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--fg) 20%, transparent); border-radius: var(--radius-btn);
  background: transparent; color: var(--fg-muted); font: inherit;
  transition: border-color .3s var(--ease-out), background-color .3s var(--ease-out), color .3s, scale .12s ease;
}
.proc-entry__opts button:active { scale: .98; }
.proc-entry__opts b { font-size: var(--fs-body); font-weight: 600; }
.proc-entry__opts span { font-size: var(--fs-small); color: var(--fg-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.proc-entry__opts button[aria-pressed="true"] { border-color: var(--fg); color: var(--fg); background: color-mix(in srgb, var(--fg) 6%, transparent); }
@media (hover: hover) { .proc-entry__opts button[aria-pressed="false"]:hover { border-color: color-mix(in srgb, var(--fg) 45%, transparent); color: var(--fg); } }
.proc-entry__static { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-1); font-size: var(--fs-small); color: var(--fg-muted); }
.proc-entry__static[hidden] { display: none; }
.proc-entry__static b { color: var(--fg); font-weight: 600; }
.proc-entry__an .link { margin-top: var(--sp-4); }
.proc-entry__list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--hairline); }
.proc-entry__row {
  position: relative; display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) minmax(7rem, auto);
  gap: var(--sp-5); align-items: baseline; padding-block: var(--sp-5); border-top: 1px solid var(--hairline);
  transition: padding .5s var(--ease-out);
}
.proc-entry__row::before {
  content: ""; position: absolute; left: 0; top: -1px; width: 0; height: 2px; background: var(--entry-start);
  transition: width .5s var(--ease-out);
}
.proc-entry__row[data-state="start"]::before { width: 100%; }
.proc-entry__n, .proc-entry__body h3 {
  font-family: var(--font-head); font-weight: var(--fw-head, 700); font-stretch: var(--head-stretch, normal);
  font-size: var(--entry-fig); line-height: 1.15; letter-spacing: var(--ls-head, var(--ls-display));
  color: var(--fg); transition: color .3s;
}
.proc-entry__n { font-variant-numeric: tabular-nums; }
.proc-entry__more { display: grid; grid-template-rows: 1fr; }
.proc-entry__more > div { min-height: 0; overflow: clip; }
.proc-entry__more p { padding-top: var(--sp-2); text-wrap: pretty; }
.proc-entry__tag { justify-self: end; display: grid; justify-items: end; gap: 4px; max-width: none; text-align: right; font-size: var(--fs-small); color: var(--fg-dim); }
.proc-entry__here { display: none; font-weight: 600; color: var(--fg); }
.proc-entry__row[data-state="start"] .proc-entry__here { display: inline; }
.proc-entry__loop { display: inline-flex; align-items: center; gap: 6px; }
.proc-entry__loop .ico { width: 1.1em; height: 1.1em; }
.proc-entry__done:empty { display: none; }
.proc-entry__row[data-state="skip"] { padding-block: var(--sp-3); }
.proc-entry__row[data-state="skip"] .proc-entry__more { grid-template-rows: 0fr; }
.proc-entry__row[data-state="skip"] .proc-entry__more > div { visibility: hidden; }
.proc-entry__row[data-state="skip"] :is(.proc-entry__n, h3) { color: var(--fg-dim); }
.proc-entry.is-ready .proc-entry__more { transition: grid-template-rows .5s var(--ease-out); }
.proc-entry.is-ready .proc-entry__more > div { transition: visibility 0s .5s; }
.proc-entry.is-ready .proc-entry__row:not([data-state="skip"]) .proc-entry__more > div { transition: none; }
.proc-entry__status { margin-top: var(--sp-4); max-width: none; font-size: var(--fs-small); color: var(--fg); }
@media (max-width: 900px) {
  .proc-entry__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
  .proc-entry__side h2 { max-width: 18ch; }
  .proc-entry__row { grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--sp-2) var(--sp-4); }
  .proc-entry__tag { grid-column: 2; justify-self: start; justify-items: start; text-align: left; }
  .proc-entry__tag:not(:has(.proc-entry__loop)):has(.proc-entry__done:empty) .proc-entry__here { margin-top: 0; }
}
@media (max-width: 640px) {
  .proc-entry { --entry-fig: var(--fs-h3); }
  .proc-entry__row { grid-template-columns: 2.5rem minmax(0, 1fr); padding-block: var(--sp-4); }
  .proc-entry__opts button { grid-template-columns: minmax(0, 1fr); gap: 2px; padding-block: var(--sp-2); }
}
@media (prefers-reduced-motion: reduce) {
  .proc-entry__row, .proc-entry__row::before, .proc-entry__n, .proc-entry__body h3, .proc-entry__opts button,
  .proc-entry.is-ready .proc-entry__more, .proc-entry.is-ready .proc-entry__more > div { transition: none; }
}