/* Margin Notes — N°04 motion stylesheet
 * ---------------------------------------------------------------------------
 * Four motion moments, each owns its own block:
 *   1. journey   — Ms. X's three-touchpoint timeline (REVERSE chrono reveal,
 *                  hand-written Caveat captions + a cadmium ? at the end)
 *   2. lift-circle — 60% containment circle (outer "organic 100" + inner
 *                    paid-seeded 60% + bracket to handnumeral)
 *   3. orgchart  — five-stage build → tools-hot → sever → retract → single
 *                  figure ("the shape the work was always trying to take")
 *   4. t-pi      — T glyph and Π glyph drawn in, then vermilion X crosses
 *                  cancel them, then the rewrite ("the full system,
 *                  end to end") fades in
 *
 * Tokens come from /design/tokens.css via the cascade. All vermilion alphas
 * (rgba(255,176,0,…) in the original) were ported to rgba(199,62,42,…) to
 * match --accent. All off-black alphas (rgba(29,29,31,…)) ported to
 * rgba(31,40,68,…) to match --ink-deep.
 */

/* ============ MOMENT — org-chart un-branching ============ */

.orgchart {
  margin: 64px 0 56px;
  padding: 0;
}
.orgchart__svg {
  width: 100%;
  height: auto;
  max-height: 580px;
  display: block;
  overflow: visible;
}

.orgchart__svg line,
.orgchart__svg path,
.orgchart__svg rect,
.orgchart__svg circle {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.oc-org rect {
  fill: var(--ink);
  stroke: var(--ink);
  opacity: 0;
  transform-origin: center;
  transform: scale(0.6);
  transition: opacity 400ms var(--ease), transform 400ms var(--ease);
}
.oc-org text {
  fill: var(--canvas);
  stroke: none;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  font-weight: 500;
  opacity: 0;
  transition: opacity 400ms var(--ease);
}

.oc-trunk,
.oc-chapter-split,
.oc-chapter-drop {
  stroke: var(--ink);
  stroke-width: 1.6;
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  transition: stroke-dashoffset 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.oc-chapter rect {
  fill: var(--canvas);
  stroke: var(--ink);
  stroke-width: 1.4;
  opacity: 0;
  transform-origin: center;
  transform: scale(0.92);
  transition: opacity 320ms var(--ease), transform 320ms var(--ease);
}
.oc-chapter text {
  fill: var(--ink);
  stroke: none;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  opacity: 0;
  transition: opacity 320ms var(--ease);
}

.oc-fan {
  stroke: var(--mute-1);
  stroke-width: 1.2;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  transition: stroke-dashoffset 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.oc-coord {
  fill: var(--ink);
  stroke: var(--canvas);
  stroke-width: 2;
  opacity: 0;
  transform-origin: center;
  transform: scale(0);
  transition: opacity 280ms var(--ease), transform 280ms var(--ease);
}

.oc-conn {
  stroke: var(--mute-2);
  stroke-width: 1.2;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  transition: stroke-dashoffset 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.oc-specialist rect {
  fill: var(--canvas);
  stroke: var(--ink);
  stroke-width: 1.3;
  opacity: 0;
  transform-origin: center;
  transform: translateY(6px);
  transition: opacity 320ms var(--ease), transform 320ms var(--ease);
}
.oc-specialist text {
  fill: var(--ink);
  stroke: none;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  opacity: 0;
  transition: opacity 320ms var(--ease);
}

.oc-conn-tool {
  stroke: var(--mute-3);
  stroke-width: 1;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  transition: stroke-dashoffset 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.oc-tools rect {
  fill: rgba(199, 62, 42, 0.10);
  stroke: var(--ink);
  stroke-width: 1.3;
  stroke-dasharray: 4 3;
  opacity: 0;
  transform-origin: center;
  transform: translateY(4px);
  transition: opacity 320ms var(--ease),
              transform 320ms var(--ease),
              fill 360ms var(--ease),
              stroke 360ms var(--ease);
}
.oc-tools text {
  fill: var(--ink);
  stroke: none;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-anchor: middle;
  opacity: 0;
  transition: opacity 320ms var(--ease), fill 360ms var(--ease);
}

.oc-sever {
  fill: none;
  stroke: var(--accent);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  opacity: 0.96;
  transition: stroke-dashoffset 900ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 600ms var(--ease);
}
.oc-sever-shadow {
  fill: none;
  stroke: var(--accent);
  stroke-width: 14;
  stroke-linecap: round;
  opacity: 0.10;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  transition: stroke-dashoffset 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.oc-figure {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.oc-figure circle,
.oc-figure path {
  stroke: var(--ink);
  stroke-width: 1.8;
  fill: none;
}
.oc-figure-glow {
  fill: var(--accent);
  stroke: none;
  opacity: 0;
  transform-origin: center;
  transform: scale(0.6);
  transition: opacity 800ms var(--ease), transform 800ms var(--ease);
  filter: blur(8px);
}
.oc-figure-cap {
  fill: var(--ink);
  stroke: none;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 14px;
  text-anchor: middle;
  opacity: 0;
  transition: opacity 600ms var(--ease);
}
.oc-figure-tag {
  fill: var(--mute-1);
  stroke: none;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-anchor: middle;
  opacity: 0;
  transition: opacity 400ms var(--ease);
}

/* === STAGE TOGGLES === */

/* stage-1: BUILD — full chart appears top-down (cascade total ~880ms) */
.orgchart.stage-1 .oc-org rect            { opacity: 1; transform: scale(1); }
.orgchart.stage-1 .oc-org text            { opacity: 1; transition-delay: 120ms; }
.orgchart.stage-1 .oc-trunk               { stroke-dashoffset: 0; transition-delay: 80ms; }
.orgchart.stage-1 .oc-chapter-split       { stroke-dashoffset: 0; transition-delay: 200ms; }
.orgchart.stage-1 .oc-chapter-drop        { stroke-dashoffset: 0; transition-delay: 260ms; }
.orgchart.stage-1 .oc-chapter rect        { opacity: 1; transform: scale(1); transition-delay: 320ms; }
.orgchart.stage-1 .oc-chapter text        { opacity: 1; transition-delay: 380ms; }
.orgchart.stage-1 .oc-fan                 { stroke-dashoffset: 0; transition-delay: 440ms; }
.orgchart.stage-1 .oc-coord               { opacity: 1; transform: scale(1); transition-delay: 520ms; }
.orgchart.stage-1 .oc-conn                { stroke-dashoffset: 0; transition-delay: 580ms; }
.orgchart.stage-1 .oc-specialist rect     { opacity: 1; transform: translateY(0); transition-delay: 640ms; }
.orgchart.stage-1 .oc-specialist text     { opacity: 1; transition-delay: 700ms; }
.orgchart.stage-1 .oc-conn-tool           { stroke-dashoffset: 0; transition-delay: 760ms; }
.orgchart.stage-1 .oc-tools rect          { opacity: 1; transform: translateY(0); transition-delay: 820ms; }
.orgchart.stage-1 .oc-tools text          { opacity: 1; transition-delay: 880ms; }

/* stage-2: TOOLS HOT — the load-bearing layer lights up vermilion briefly */
.orgchart.stage-2 .oc-tools rect {
  fill: rgba(199, 62, 42, 0.16);
  stroke: var(--accent);
  opacity: 1;
}
.orgchart.stage-2 .oc-tools text {
  fill: var(--accent-ink);
}

/* stage-3: SEVER — vermilion cut draws across the tool layer */
.orgchart.stage-3 .oc-sever-shadow,
.orgchart.stage-3 .oc-sever {
  stroke-dashoffset: 0;
}
.orgchart.stage-3 .oc-tools rect {
  opacity: 0.32;
  fill: rgba(199, 62, 42, 0.04);
  stroke: var(--mute-3);
  stroke-dasharray: 2 4;
}
.orgchart.stage-3 .oc-tools text {
  opacity: 0.4;
  fill: var(--mute-2);
}

/* stage-4: RETRACT — branches pull back into the trunk */
.orgchart.stage-4 .oc-coord {
  opacity: 0;
  transform: scale(0.4);
}
.orgchart.stage-4 .oc-specialist rect,
.orgchart.stage-4 .oc-specialist text {
  opacity: 0;
  transform: translateY(-32px);
}
.orgchart.stage-4 .oc-conn { stroke-dashoffset: 60; }
.orgchart.stage-4 .oc-fan { stroke-dashoffset: 200; }
.orgchart.stage-4 .oc-conn-tool { stroke-dashoffset: 40; }
.orgchart.stage-4 .oc-tools rect,
.orgchart.stage-4 .oc-tools text { opacity: 0; }
.orgchart.stage-4 .oc-chapter rect {
  opacity: 0;
  transform: scale(0.5);
}
.orgchart.stage-4 .oc-chapter text { opacity: 0; }
.orgchart.stage-4 .oc-chapter-split,
.orgchart.stage-4 .oc-chapter-drop {
  stroke-dashoffset: 500;
}
.orgchart.stage-4 .oc-sever {
  opacity: 0.35;
}

/* stage-5: SINGLE — one figure at the base; vermilion glow */
.orgchart.stage-5 .oc-figure {
  opacity: 1;
  transform: translateY(0);
}
.orgchart.stage-5 .oc-figure-glow {
  opacity: 0.55;
  transform: scale(1);
}
.orgchart.stage-5 .oc-figure-cap { opacity: 1; }
.orgchart.stage-5 .oc-figure-tag { opacity: 1; }
.orgchart.stage-5 .oc-sever { opacity: 0; }

/* Hover interaction (pre-sever): specialist hover heats its tools */
.orgchart:not(.stage-3):not(.stage-4):not(.stage-5) .oc-tools.is-hot rect {
  fill: rgba(199, 62, 42, 0.22);
  stroke: var(--accent);
  opacity: 1;
}
.orgchart:not(.stage-3):not(.stage-4):not(.stage-5) .oc-tools.is-hot text {
  fill: var(--accent-ink);
  opacity: 1;
}
.orgchart:not(.stage-3):not(.stage-4):not(.stage-5) .oc-specialist {
  cursor: help;
}

.orgchart__cap {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--mute-1);
  text-align: center;
}

/* ============ MOMENT — Ms. X journey ============ */

.journey {
  margin: 56px 0 56px;
  padding: 0;
}
.journey__svg {
  width: 100%;
  height: auto;
  max-height: 360px;
  display: block;
  overflow: visible;
}
.journey__svg line,
.journey__svg path,
.journey__svg rect,
.journey__svg circle {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.jn-axis {
  stroke: var(--mute-2);
  stroke-width: 1.2;
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
  transition: stroke-dashoffset 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.jn-puck {
  opacity: 0;
  transform-origin: center;
  transition: opacity 360ms var(--ease);
}
.jn-puck > circle {
  fill: var(--canvas);
  stroke: var(--ink);
  stroke-width: 1.6;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.5);
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}
.jn-puck > text {
  fill: var(--ink);
  stroke: none;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-anchor: middle;
  font-weight: 500;
  opacity: 0;
  transition: opacity 320ms var(--ease);
}
.jn-puck-label {
  fill: var(--ink);
  stroke: none;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 500;
  text-anchor: middle;
  opacity: 0;
  transition: opacity 320ms var(--ease);
}
.jn-puck-sub {
  fill: var(--mute-1);
  stroke: none;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-anchor: middle;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 320ms var(--ease);
}

/* Caveat hand-written captions above each puck */
.jn-hand {
  opacity: 0;
  transition: opacity 480ms var(--ease);
}
.jn-hand text {
  fill: var(--accent-ink);
  stroke: none;
  font-family: var(--font-hand);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.005em;
}
.jn-hand-conn {
  stroke: var(--accent-ink);
  stroke-width: 1.1;
  stroke-dasharray: 4 4;
  opacity: 0.55;
}

.jn-buyer {
  opacity: 0;
  transition: opacity 500ms var(--ease);
}
.jn-buyer circle,
.jn-buyer path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.6;
}
.jn-buyer-tag {
  fill: var(--mute-1);
  stroke: none;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-anchor: middle;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 320ms var(--ease);
}

.jn-attr {
  stroke: var(--mute-1);
  stroke-width: 1.4;
  stroke-dasharray: 5 5;
  fill: none;
  opacity: 0;
  transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.jn-question {
  opacity: 0;
  transform-origin: center;
  transform: scale(0.6);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.jn-question text {
  fill: var(--accent-ink);
  stroke: none;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 56px;
  text-anchor: middle;
}
.jn-question-glow {
  fill: var(--accent);
  stroke: none;
  opacity: 0;
  filter: blur(10px);
  transition: opacity 600ms var(--ease);
}

/* Stage walk */
.journey.stage-1 .jn-axis        { stroke-dashoffset: 0; }
.journey.stage-1 .jn-buyer       { opacity: 1; transition-delay: 400ms; }
.journey.stage-1 .jn-buyer-tag   { opacity: 1; transition-delay: 600ms; }

.journey.stage-2 .jn-puck[data-touch="0"]              { opacity: 1; }
.journey.stage-2 .jn-puck[data-touch="0"] > circle     { transform: scale(1); }
.journey.stage-2 .jn-puck[data-touch="0"] > text       { opacity: 1; transition-delay: 200ms; }
.journey.stage-2 .jn-puck-label[data-puck="0"],
.journey.stage-2 .jn-puck-sub[data-puck="0"]           { opacity: 1; transition-delay: 280ms; }
.journey.stage-2 .jn-hand--direct                      { opacity: 1; transition-delay: 360ms; }
.journey.stage-2 .jn-attr[data-attr="0"]               { opacity: 0.85; transition-delay: 440ms; }

.journey.stage-3 .jn-puck[data-touch="1"]              { opacity: 1; }
.journey.stage-3 .jn-puck[data-touch="1"] > circle     { transform: scale(1); }
.journey.stage-3 .jn-puck[data-touch="1"] > text       { opacity: 1; transition-delay: 200ms; }
.journey.stage-3 .jn-puck-label[data-puck="1"],
.journey.stage-3 .jn-puck-sub[data-puck="1"]           { opacity: 1; transition-delay: 280ms; }
.journey.stage-3 .jn-hand--fb                          { opacity: 1; transition-delay: 360ms; }
.journey.stage-3 .jn-attr[data-attr="1"]               { opacity: 0.85; transition-delay: 440ms; }

.journey.stage-4 .jn-puck[data-touch="2"]              { opacity: 1; }
.journey.stage-4 .jn-puck[data-touch="2"] > circle     { transform: scale(1); }
.journey.stage-4 .jn-puck[data-touch="2"] > text       { opacity: 1; transition-delay: 200ms; }
.journey.stage-4 .jn-puck-label[data-puck="2"],
.journey.stage-4 .jn-puck-sub[data-puck="2"]           { opacity: 1; transition-delay: 280ms; }
.journey.stage-4 .jn-hand--google                      { opacity: 1; transition-delay: 360ms; }
.journey.stage-4 .jn-attr[data-attr="2"]               { opacity: 0.85; transition-delay: 440ms; }

.journey.stage-5 .jn-question                          { opacity: 1; transform: scale(1); }
.journey.stage-5 .jn-question-glow                     { opacity: 0.45; }

.journey__cap {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--mute-1);
  text-align: center;
}

/* ============ MOMENT — 60% containment circle ============ */

.lift-circle {
  margin: 48px 0 64px;
  padding: 0;
  position: relative;
}
.lift-circle__svg {
  width: 100%;
  height: auto;
  max-height: 380px;
  display: block;
  overflow: visible;
}
.lift-circle__svg circle,
.lift-circle__svg path {
  vector-effect: non-scaling-stroke;
}

.lc-outer__fill {
  fill: rgba(31, 40, 68, 0.025);
  stroke: none;
  opacity: 0;
  transform-origin: center;
  transform: scale(0.94);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.lc-outer__outline {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
  transition: stroke-dashoffset 1400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.lc-outer__num {
  fill: var(--ink);
  stroke: none;
  font-family: var(--font-hand);
  font-size: 26px;
  text-anchor: middle;
  opacity: 0;
  transition: opacity 400ms var(--ease);
}
.lc-outer__label {
  fill: var(--mute-1);
  stroke: none;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-anchor: middle;
  opacity: 0;
  transition: opacity 400ms var(--ease);
}
.lc-outer__sub {
  fill: var(--mute-2);
  stroke: none;
  font-family: var(--font-sans);
  font-size: 11px;
  text-anchor: middle;
  opacity: 0;
  transition: opacity 400ms var(--ease);
}

.lc-inner__fill {
  fill: var(--accent);
  stroke: none;
  opacity: 0;
  transform-origin: center;
  transform: scale(0.2);
  transition: opacity 600ms var(--ease), transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.lc-inner__glow {
  fill: var(--accent);
  stroke: none;
  opacity: 0;
  filter: blur(14px);
  transform-origin: center;
  transform: scale(0.4);
  transition: opacity 700ms var(--ease), transform 800ms var(--ease);
}
.lc-inner__num {
  fill: var(--accent-ink);
  stroke: none;
  font-family: var(--font-hand);
  font-size: 38px;
  text-anchor: middle;
  font-weight: 700;
  opacity: 0;
  transition: opacity 400ms var(--ease);
}

.lc-delta__line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.4;
  stroke-dasharray: 5 5;
  stroke-dashoffset: 200;
  transition: stroke-dashoffset 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.lc-delta__num {
  fill: var(--accent-ink);
  stroke: none;
  font-family: var(--font-hand);
  font-size: 36px;
  opacity: 0;
  transition: opacity 400ms var(--ease);
}
.lc-delta__sub {
  fill: var(--mute-1);
  stroke: none;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 400ms var(--ease);
}

/* Stage-driven reveals (mountLift toggles stage-1..stage-5 on the root) */
.lift-circle.stage-1 .lc-outer__outline { stroke-dashoffset: 0; }
.lift-circle.stage-1 .lc-outer__fill    { opacity: 1; transform: scale(1); transition-delay: 600ms; }
.lift-circle.stage-2 .lc-outer__num,
.lift-circle.stage-2 .lc-outer__label,
.lift-circle.stage-2 .lc-outer__sub     { opacity: 1; }
.lift-circle.stage-3 .lc-inner__glow    { opacity: 0.55; transform: scale(1); }
.lift-circle.stage-3 .lc-inner__fill    { opacity: 1; transform: scale(1); transition-delay: 120ms; }
.lift-circle.stage-4 .lc-inner__num     { opacity: 1; transition-delay: 200ms; }
.lift-circle.stage-5 .lc-delta__line    { stroke-dashoffset: 0; }
.lift-circle.stage-5 .lc-delta__num,
.lift-circle.stage-5 .lc-delta__sub     { opacity: 1; transition-delay: 320ms; }

.lc-cap {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--mute-1);
  text-align: center;
}

/* ============ MOMENT — T-shape / Pi-shape with vermilion X crosses ============ */

.t-pi {
  margin: 56px 0 56px;
  display: flex;
  justify-content: center;
}
.t-pi__card {
  display: inline-flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  padding: 28px 36px 28px;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  box-shadow: 0 12px 28px -18px rgba(31, 40, 68, 0.18);
  min-width: 360px;
}
.t-pi__shapes {
  display: flex;
  gap: 48px;
  align-items: flex-start;
  justify-content: center;
}
.t-pi__shape {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.t-pi__glyph {
  width: 80px;
  height: 90px;
  overflow: visible;
}
.t-pi__line {
  stroke: var(--ink);
  stroke-width: 4;
  stroke-linecap: round;
  fill: none;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 700ms cubic-bezier(0.22, 1, 0.36, 1),
              stroke 400ms var(--ease),
              opacity 400ms var(--ease);
}
.t-pi__cross {
  stroke: var(--accent);
  stroke-width: 4.4;
  stroke-linecap: round;
  fill: none;
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  transition: stroke-dashoffset 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.t-pi__label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink);
  transition: color 320ms var(--ease);
}
.t-pi__sub {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute-2);
  transition: color 320ms var(--ease);
}
.t-pi__shape.is-struck .t-pi__label,
.t-pi__shape.is-struck .t-pi__sub { color: var(--mute-2); }
.t-pi__shape.is-struck .t-pi__line { stroke: var(--mute-2); opacity: 0.5; }

.t-pi__rewrite {
  display: block;
  text-align: center;
  font-family: var(--font-hand);
  font-size: 26px;
  line-height: 1.1;
  color: var(--accent-ink);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
  margin-top: 6px;
}
.t-pi__rewrite.is-in {
  opacity: 1;
  transform: translateY(0);
}
.t-pi__rewrite em {
  font-style: italic;
}

/* Mobile fallbacks */
@media (max-width: 900px) {
  .orgchart__svg { max-height: 460px; }
  .journey__svg { max-height: 300px; }
  .lift-circle__svg { max-height: 320px; }
  .t-pi__card { min-width: 0; width: 100%; }
  .t-pi__shapes { gap: 32px; }
  .oc-tools text { font-size: 8.5px; }
  .oc-specialist text { font-size: 9.5px; }
  .jn-hand text { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  /* Show the BUILT state for the orgchart; collapse argument is carried in
     the prose's "the org chart did not just branch; it grew a management
     structure" lines. */
  .orgchart .oc-org rect,
  .orgchart .oc-org text,
  .orgchart .oc-trunk,
  .orgchart .oc-chapter-split,
  .orgchart .oc-chapter-drop,
  .orgchart .oc-chapter rect,
  .orgchart .oc-chapter text,
  .orgchart .oc-fan,
  .orgchart .oc-coord,
  .orgchart .oc-conn,
  .orgchart .oc-conn-tool,
  .orgchart .oc-specialist rect,
  .orgchart .oc-specialist text,
  .orgchart .oc-tools rect,
  .orgchart .oc-tools text {
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
  .orgchart .oc-sever,
  .orgchart .oc-sever-shadow {
    stroke-dashoffset: 0 !important;
  }
  /* Journey + lift-circle + t-pi: render final state */
  .journey .jn-puck,
  .journey .jn-puck-label,
  .journey .jn-puck-sub,
  .journey .jn-hand,
  .journey .jn-attr,
  .journey .jn-buyer,
  .journey .jn-buyer-tag,
  .journey .jn-question,
  .journey .jn-question-glow {
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
  .lift-circle .lc-outer__outline,
  .lift-circle .lc-outer__fill,
  .lift-circle .lc-outer__num,
  .lift-circle .lc-outer__label,
  .lift-circle .lc-outer__sub,
  .lift-circle .lc-inner__fill,
  .lift-circle .lc-inner__glow,
  .lift-circle .lc-inner__num,
  .lift-circle .lc-delta__line,
  .lift-circle .lc-delta__num,
  .lift-circle .lc-delta__sub {
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
}