/* ═══════════════════════════════════════════════════════════
   Company Narrative Pages - /about/ + /why-techsutra/
   Requires: design-system.css, components.css
   Shared stylesheet for the matched pair of company pages
   (about/index.html, why-techsutra/index.html). Both are the
   same visual register - one shared file avoids duplicating the
   same rules twice, matching vakio.css/resona.css's one-file-
   per-surface pattern. Reuses .tag/.sec-h/.sec-lead/.reveal/.d1-5
   from components.css - do not redefine here.
   ═══════════════════════════════════════════════════════════ */

[id] { scroll-margin-top: calc(var(--nav-h) + var(--abar-h) + 14px); }

/* ── BREADCRUMB ──────────────────────────────────────────── */
.breadcrumb {
  display: flex; align-items: center; gap: .5rem;
  font-size: var(--text-xs); color: var(--text-3); letter-spacing: .02em;
  padding: calc(var(--nav-h) + var(--abar-h) + 2rem) 0 0;
}
.breadcrumb a { color: var(--text-3); transition: color var(--ease-base); }
.breadcrumb a:hover, .breadcrumb a:focus-visible { color: var(--gold); }
.breadcrumb-sep { color: var(--text-3); }
.breadcrumb-current { color: var(--text-2); }

/* ── PAGE LAYOUT: reserved two-column grid + "On this page" rail ──
   2026-09-18, added per explicit user request for "similar rail nav
   structure... with the same behaviour" as the Vākio hub. Mirrors
   assets/css/vakio.css's .vk-layout/.vk-content/.vk-onthis system
   exactly in structure and responsive behaviour - same two-column CSS
   Grid reservation (not a floating overlay - see vakio.css's own long
   comment on why that matters), same 1100px collapse to a fixed bottom
   tab bar, same one-segment-per-stop connecting-line fix. Kept as this
   page's own cp- prefixed copy rather than a shared component, for two
   reasons: this file intentionally uses gold tokens throughout (About/
   Why TechSutra are TechSutra company-brand pages, not Vākio product
   pages), and .vk-onthis's own CLAUDE.md history documents several
   hard-won, easy-to-regress fixes (rail/content overlap, connecting-
   line overshoot, mobile breakpoint math) that are safer left untouched
   than refactored into a shared, parameterised component - this repo's
   existing convention for fragile shared UI is "every page owns its
   own copy" (see the spoke pages' in-page case modals). */
/* padding-right added (2026-09-18 follow-up) - the grid itself had no
   right-side clearance of its own, so .cp-onthis's 190px column ended
   exactly at <main>'s own right edge with nothing beyond it, flush
   against the browser window's right boundary at desktop widths -
   unlike every other piece of this page's content, which reaches the
   window edge via .w's own `padding:0 var(--sp-10)`, never truly flush.
   var(--sp-10) matches that same .w side padding so the rail gets the
   same breathing room the rest of the page already has. */
.cp-layout { display: grid; grid-template-columns: minmax(0,1fr) 190px;
  column-gap: var(--sp-8); align-items: start; padding-right: var(--sp-10); }
.cp-content { grid-column: 1; min-width: 0; }

.cp-onthis { grid-column: 2; position: sticky;
  top: 50%; transform: translateY(-50%); align-self: start;
  display: flex; flex-direction: column; gap: 1.15rem;
  width: 190px; padding: 1.25rem 1.1rem;
  --cp-dot-d: 12px; --cp-dot-mt: .2rem;
  background: var(--bg-c); border: 1px solid var(--b1); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); }
.cp-onthis-stop { position: relative; z-index: 1; display: flex; align-items: flex-start;
  gap: .7rem; width: 100%; background: none; border: none; margin: 0; padding: 0;
  cursor: pointer; text-align: left; font: inherit; color: inherit; }
.cp-onthis-stop:not(:last-child)::after { content: ''; position: absolute; z-index: 0;
  left: calc(var(--cp-dot-d)/2 - .5px);
  top: calc(var(--cp-dot-mt) + var(--cp-dot-d));
  height: calc(100% + 1.15rem - var(--cp-dot-d)/2);
  width: 1px; background: var(--b2); }
.cp-onthis-dot { width: var(--cp-dot-d); height: var(--cp-dot-d); flex-shrink: 0; margin-top: var(--cp-dot-mt);
  box-sizing: border-box; border-radius: 50%; border: 2px solid var(--b2);
  background: var(--bg-c); transition: background-color var(--ease-base), border-color var(--ease-base), box-shadow var(--ease-base); }
.cp-onthis-stop[aria-current="true"] .cp-onthis-dot { background: var(--gold); border-color: var(--gold);
  box-shadow: 0 0 0 4px var(--gold-g); }
.cp-onthis-text { display: flex; flex-direction: column; gap: .1rem; }
.cp-onthis-name { font-size: var(--text-xs); font-weight: 700; color: var(--text-2);
  line-height: 1.3; transition: color var(--ease-base); }
.cp-onthis-sub { font-size: .65rem; font-weight: 600; letter-spacing: .03em;
  text-transform: uppercase; color: var(--text-3); line-height: 1.3; }
.cp-onthis-stop[aria-current="true"] .cp-onthis-name, .cp-onthis-stop[aria-current="true"] .cp-onthis-short { color: var(--gold-l); }
.cp-onthis-stop:hover .cp-onthis-name, .cp-onthis-stop:focus-visible .cp-onthis-name,
.cp-onthis-stop:hover .cp-onthis-short, .cp-onthis-stop:focus-visible .cp-onthis-short { color: var(--gold-l); }
.cp-onthis-stop:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: var(--radius-sm); }
.cp-onthis-short { display: none; }

@media (max-width: 1099px) {
  .cp-layout { display: block; padding-right: 0; }
  .cp-onthis { position: fixed; grid-column: auto; top: auto;
    left: 0; right: 0; bottom: 0;
    transform: none; align-self: auto; z-index: 850;
    flex-direction: row; gap: 0; width: 100%; max-width: none;
    border-width: 1px 0 0 0; border-radius: 0;
    padding: .35rem env(safe-area-inset-right,0px)
      calc(.35rem + env(safe-area-inset-bottom,0px)) env(safe-area-inset-left,0px);
    overflow-x: visible; }
  .cp-onthis-stop::after { display: none; }
  .cp-onthis-stop { flex: 1 1 0; min-width: 0; width: auto; height: auto;
    min-height: 48px; flex-direction: column; align-items: center;
    justify-content: center; gap: .2rem; padding: .15rem .1rem; }
  .cp-onthis-dot { margin-top: 0; }
  .cp-onthis-text { display: none; }
  .cp-onthis-short { display: block; width: 100%; max-width: 100%;
    font-size: .62rem; font-weight: 700; letter-spacing: .01em;
    line-height: 1.2; color: var(--text-2); text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ── MINI PAGE HERO ──────────────────────────────────────── */
/* Bottom padding cut from 4.5rem to var(--sp-8) (2026-09-18) - same
   tightened rhythm applied to the Vākio hub's own hero-to-first-section
   gap (.vk-hero-inner in vakio.css), carried over here so a page hero's
   gap to the section below it reads the same across the site. */
.cp-hero { padding: 1.5rem 0 var(--sp-8); }
.cp-hero-h {
  font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 700;
  letter-spacing: -.02em; color: var(--text-1); line-height: 1.12; margin: 1rem 0 1.25rem; max-width: 820px;
}
.cp-hero-sub { font-size: var(--text-lg); color: var(--text-2); line-height: 1.65; max-width: 640px; margin: 0; }

/* ── GENERIC SECTION WRAPPER ──────────────────────────────── */
/* Padding cut from 5rem to var(--sp-8) (2026-09-18) - matches the
   var(--sp-8) top/bottom the Vākio hub's own .vk-panel settled on after
   its two 2026-09-16 cuts (5rem -> 3rem -> 2rem; see the Hub Panel
   Consolidation note in CLAUDE.md), applied here for the same "too much
   space between sections" reason, on the shared pair this file styles
   (about/index.html, why-techsutra/index.html). */
.cp-sec { padding: var(--sp-8) 0; background: var(--bg); }
.cp-sec--alt { background: var(--bg-s); }

/* ── DETAIL CARD (2026-09-18) ──────────────────────────────
   Shared "contain this section's content in a rounded, bordered
   panel" treatment - the same box .org-diagram/.cp-leadership
   already used. "From Problem to Product" and "Our Direction"
   previously had no card of their own: their content (or, for the
   two on .cp-sec--alt, a solid colour band) ran straight to the
   section's own edges instead of reading as a contained panel like
   every other section - flagged directly by the user against a
   screenshot of .org-diagram as the reference for what "right"
   looks like. Applied alongside each section's own layout class,
   not in place of it. ("What We Believe" used this too until its
   own 2026-09-18 card-grid redesign below gave it a dedicated
   .belief-diagram outer card instead, matching .org-diagram
   one-for-one rather than the generic box.) */
.cp-card { margin-top: 2.25rem; background: var(--bg-c); border: 1px solid var(--b1);
  border-radius: var(--radius-xl); padding: 2rem 2.25rem; }

/* ── ORG HIERARCHY DIAGRAM (about page §4.4) ──────────────────
   Rebuilt 2026-09-18 (third pass) as a card-grid org chart, replacing
   the indented-list-with-connector-lines approach entirely. That
   approach was fixed twice (real connector lines instead of text
   glyphs, then branch-to-child links added) and was still rejected as
   "not at all acceptable" - the underlying complaint wasn't really
   about connector-line precision, it was that a thin vertical list
   pinned to the card's left edge reads as sparse and leaves the whole
   right two-thirds of a wide card empty. A grid of self-contained
   branch cards solves both asks at once: hierarchy is communicated by
   visual containment (a card inside a card, a chip inside a card) which
   needs no hand-drawn line to read correctly at a glance, and the
   2-column grid uses the card's actual width instead of hugging its
   left edge. */
/* Spacing tightened 2026-09-18 (follow-up): margin-top 2.25rem->1.5rem,
   padding 2rem 2.25rem->1.5rem 1.75rem - same "reduce the spacing"
   direction as the .cp-sec/.cp-hero/.cp-final-cta cuts above, applied
   to this card's own internal rhythm once the card-grid rebuild's
   layout had settled. */
.org-diagram {
  margin-top: 1.5rem; background: var(--bg-c); border: 1px solid var(--b1);
  border-radius: var(--radius-xl); padding: 1.5rem 1.75rem;
}
.org-root-row { margin-bottom: 1rem; }
.org-root {
  display: flex; align-items: center; gap: .55rem;
  font-family: var(--font-display); font-weight: 700; letter-spacing: .04em;
  color: var(--text-1); font-size: 1.15rem;
}
.org-root-mark { color: var(--gold); font-size: .7em; }
.org-root-sub { font-size: var(--text-sm); color: var(--text-3); margin-top: .25rem; }

.org-branches { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .85rem; }
.org-branch-card {
  background: var(--bg); border: 1px solid var(--b1); border-top: 3px solid var(--gold-g);
  border-radius: var(--radius-lg); padding: .9rem 1.05rem;
}
.org-branch-head { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: .7rem; }
.org-branch-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex-shrink: 0; border-radius: var(--radius-md);
  background: var(--gold-d); border: 1px solid var(--gold-g); color: var(--gold-l);
}
.org-branch-name { font-weight: 700; color: var(--text-1); font-size: var(--text-sm); }
.org-branch-tag {
  font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-3); flex-basis: 100%;
}
.org-chip-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.org-chip {
  display: inline-flex; align-items: center; font-size: var(--text-sm); font-weight: 600;
  color: var(--text-2); background: var(--bg-c); border: 1px solid var(--b1);
  border-radius: var(--radius-pill); padding: .3rem .8rem;
}
.org-chip--vk { color: var(--vk-l); background: var(--vk-d); border-color: var(--vk-b); }
.org-caption { font-size: var(--text-sm); color: var(--text-3); line-height: 1.65; margin: 1.1rem 0 0; max-width: 640px; }
.org-ctas { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.75rem; }

/* ── SHARED "TC" CARD GRID (about page, 2026-09-18) ─────────
   Generalised out of what was originally .belief-grid/.belief-card
   (built for "What We Believe" alone) once the same icon+title+body
   card pattern was needed a second time for "Why We Exist" - rather
   than fork a near-identical duplicate block under a new name, the
   inner grid/card/icon/title/body classes were renamed to the
   section-agnostic .tc-* prefix so both sections (and any future one
   that needs the same shape) share one definition. The OUTER wrapper
   card (.belief-diagram, .exist-diagram) stays per-section - each
   still needs its own role="img"/aria-label - only the repeating
   inner shape moved to a shared name. Values are unchanged from the
   original .belief-card (same tightened scale .org-branch-card uses). */
.tc-cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .85rem; }
.tc-card {
  background: var(--bg); border: 1px solid var(--b1); border-top: 3px solid var(--gold-g);
  border-radius: var(--radius-lg); padding: .9rem 1.05rem;
}
.tc-card-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex-shrink: 0; border-radius: var(--radius-md);
  background: var(--gold-d); border: 1px solid var(--gold-g); color: var(--gold-l);
  margin-bottom: .7rem;
}
.tc-card-t { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--text-1); margin-bottom: .4rem; }
.tc-card-d { font-size: var(--text-sm); color: var(--text-2); line-height: 1.6; margin: 0; }

/* ── "WHY WE EXIST" CARD GRID (about page §4.2) ─────────────
   Redesigned 2026-09-18 to match "What We Believe" ("Change the Why
   We Exist also in the similar design like What We Believe") - same
   .tc-cards/.tc-card shape as above, own outer wrapper for its own
   role="img"/aria-label, same tightened spacing as .org-diagram/
   .belief-diagram. */
.exist-diagram {
  margin-top: 1.5rem; background: var(--bg-c); border: 1px solid var(--b1);
  border-radius: var(--radius-xl); padding: 1.5rem 1.75rem;
}

/* ── "WHAT WE BELIEVE" CARD GRID OUTER WRAPPER (about page §4.3) ── */
.belief-diagram {
  margin-top: 1.5rem; background: var(--bg-c); border: 1px solid var(--b1);
  border-radius: var(--radius-xl); padding: 1.5rem 1.75rem;
}

/* ── "FROM PROBLEM TO PRODUCT" PROCESS FLOW (about page §4.5) ──
   Redesigned 2026-09-18 from a single prose sentence naming the five
   stages inline ("understand, contextualise, design, enable,
   transform") into an actual visual step sequence - "redesign ...
   into visual representation story - be innovative." Reworked again
   the same day ("doesn't look professional") from a row of tinted
   circles joined by arrow glyphs into a proper stepper: one
   continuous line running through solid-backed number nodes, the
   same "dot astride a line" language `.cp-onthis-dot` already uses
   for the rail nav, not a new motif invented for this one diagram.
   `left:10%;right:10%` on the connecting line is exact, not
   approximate, for exactly 5 equal-width flex steps: each step is
   100%/5 = 20% wide, so the first/last step's own centre sits 10% in
   from its edge - if the step count ever changes this constant must
   change with it. */
.p2p-flow { position: relative; display: flex; margin-bottom: 1.2rem; }
.p2p-flow::before {
  content: ''; position: absolute; left: 10%; right: 10%; top: 17px;
  height: 1px; background: var(--b2); z-index: 0;
}
.p2p-step { position: relative; z-index: 1; display: flex; flex-direction: column;
  align-items: center; gap: .55rem; flex: 1 1 0; min-width: 0; padding: 0 .3rem; }
.p2p-num {
  display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%;
  background: var(--bg-c); border: 2px solid var(--gold-g); color: var(--gold-l);
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
}
.p2p-label { font-size: var(--text-xs); font-weight: 600; color: var(--text-2); text-align: center; line-height: 1.25; }

/* ── CROSS-LINK PANEL (about page §4.5 "From Problem to Product") ─
   Margin changed to 0 0 1.75rem (2026-09-18, was 1.25rem 0 1.75rem) -
   this now sits inside .cp-card, whose own padding already supplies the
   top gap, matching .cp-leadership-body's identical no-top-margin
   precedent for the same reason. */
.cp-crosslink-body { font-size: var(--text-base); color: var(--text-2); line-height: 1.75; max-width: 700px; margin: 0 0 1.75rem; }

/* ── LEADERSHIP BLOCK (about page §4.6, interim treatment) ──
   A same-day visual "profiles coming soon" motif (dashed-outline
   avatar placeholders) was tried and then explicitly reverted per
   direct user instruction ("remove the 3 human icons") - back to
   plain prose in the card, no icons of any kind. */
.cp-leadership {
  margin-top: 2.25rem; background: var(--bg-c); border: 1px solid var(--b1);
  border-radius: var(--radius-xl); padding: 2rem 2.25rem;
}
.cp-leadership-body { font-size: var(--text-base); color: var(--text-2); line-height: 1.7; max-width: 600px; margin: 0 0 1.5rem; }

/* ── DIRECTION BLOCK (about page §4.7) ──────────────────────
   Redesigned 2026-09-18 into a small growth-path visual - Vākio
   (live, solid) -> next problem worth solving (open, dashed, no name
   invented) -> an ellipsis node standing for "and more to come" -
   rather than stating the same "portfolio will grow" idea only in
   prose. Deliberately doesn't name a second product: none exists yet,
   inventing one would misstate the roadmap the same way a fabricated
   leadership bio would above. */
.direction-path { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.direction-node {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: .6rem .9rem; border-radius: var(--radius-lg); min-width: 92px;
}
.direction-node--live { background: var(--vk-d); border: 1px solid var(--vk-b); }
.direction-node--next { background: var(--bg-c); border: 1.5px dashed var(--b2); }
.direction-node-status {
  font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.direction-node--live .direction-node-status { color: var(--vk-l); }
.direction-node--next .direction-node-status { color: var(--text-3); }
.direction-node-name { font-size: var(--text-sm); font-weight: 700; color: var(--text-1); text-align: center; }
.direction-node--next .direction-node-name { color: var(--text-2); font-weight: 600; }
.direction-connector { flex: 1 1 16px; min-width: 10px; height: 1px; background: var(--b2); }
.direction-connector--dashed { background: repeating-linear-gradient(90deg, var(--b2) 0 4px, transparent 4px 8px); }
.direction-more {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px dashed var(--b2); color: var(--text-3); font-weight: 700; letter-spacing: .1em;
}
/* margin-top dropped to 0 (2026-09-18, was 1.25rem) - now sits inside
   .cp-card, same reasoning as .cp-crosslink-body above. */
.cp-direction-body { font-size: var(--text-base); color: var(--text-2); line-height: 1.75; max-width: 700px; margin-top: 0; }

/* ── DIFFERENTIATOR DETAIL CARDS (why-techsutra page §5.2) ── */
.diff-detail-list { display: flex; flex-direction: column; gap: 2.5rem; margin-top: 2.5rem; }
.diff-detail-card { background: var(--bg-c); border: 1px solid var(--b1); border-radius: var(--radius-xl); padding: 2rem 2.25rem; }
.diff-detail-t { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--text-1); margin-bottom: .4rem; }
.diff-detail-lead { font-family: var(--font-display); font-style: italic; font-size: 1.1rem; color: var(--gold-l); margin-bottom: 1rem; }
.diff-detail-body { font-size: var(--text-base); color: var(--text-2); line-height: 1.75; max-width: 760px; margin: 0; }
.diff-detail-ctas { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.25rem; }

/* ── COMPARISON VISUAL (why-techsutra page §5.3) ──────────── */
.compare { display: flex; align-items: center; justify-content: center; gap: 2.5rem; margin-top: 2.5rem; flex-wrap: wrap; }
.compare-col { background: var(--bg-c); border: 1px solid var(--b1); border-radius: var(--radius-xl); padding: 1.5rem 2rem; text-align: center; min-width: 180px; }
.compare-col--gold { border-color: var(--gold-g); background: linear-gradient(135deg, var(--bg-c), var(--bg-ch)); }
.compare-step { font-size: var(--text-sm); font-weight: 600; color: var(--text-2); padding: .4rem 0; }
.compare-col--gold .compare-step { color: var(--gold-l); }
.compare-arrow { color: var(--text-3); font-size: .9rem; }
.compare-versus { font-family: var(--font-display); font-style: italic; color: var(--text-3); font-size: var(--text-sm); }

/* ── ILLUSTRATIVE SCENARIO CARDS (why-techsutra page §5.3) ──
   2026-09-14: single-column, max-width - Resona-flavored scenario card hidden
   (Vakio-only repositioning). Was `grid-template-columns:repeat(2,1fr)` for a
   two-card grid; revert to that if Resona is ever unhidden and a second card
   re-added. */
.scenario-grid { display: grid; grid-template-columns: 1fr; max-width: 560px; gap: 1.5rem; margin: 2.5rem auto 0; }
.scenario-card { background: var(--bg-c); border: 1px solid var(--b1); border-radius: var(--radius-xl); padding: 1.75rem; }
.scenario-label { font-size: var(--text-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; }
.scenario-line { font-size: var(--text-sm); color: var(--text-2); line-height: 1.7; margin: 0 0 .85rem; }
.scenario-line strong { color: var(--text-1); font-weight: 600; }
.scenario-fine { font-size: var(--text-xs); color: var(--text-3); font-style: italic; margin: 1rem 0 0; border-top: 1px dashed var(--b2); padding-top: .85rem; }

/* ── CREDIBILITY CLOSE PANEL (why-techsutra page §5.4) ────── */
.credibility-panel { margin-top: 2rem; max-width: 800px; }
.credibility-body { font-size: var(--text-md); color: var(--text-2); line-height: 1.8; margin-top: 1rem; }

/* ── CLOSING CTA (shared by both pages) ───────────────────── */
/* Padding cut from 6rem to var(--sp-8) (2026-09-18) - the hub's own
   closing panel (Request Access) carries no special larger padding of
   its own, it's an ordinary .vk-panel at var(--sp-8); matched here for
   the same reason. */
.cp-final-cta { padding: var(--sp-8) 0; background: linear-gradient(180deg, var(--bg), var(--bg-s)); }
.cp-final-cta-ctas { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-top: 1.75rem; }

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .scenario-grid { grid-template-columns: 1fr; }
  .compare { gap: 1.25rem; }
  .tc-cards { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .org-branches, .tc-cards { grid-template-columns: 1fr; }
  /* Reworked again (2026-09-18 follow-up, "not well mobile responsive")
     - the first mobile version stacked one full-width row per step,
     which read as sparse and tall (five rows of just a number and one
     word, most of the row's own width unused). Replaced with the same
     wrapping-pill language `.org-chip` already uses elsewhere on this
     page: small chips that wrap across as many lines as needed, so five
     steps take two compact lines instead of five tall ones. Drops the
     connecting line rather than re-deriving it as a vertical one sized
     against dynamic row heights - the exact "recompute alignment
     against variable content" pattern this codebase's own rail-nav
     history warns against reintroducing (see .cp-onthis/.vk-onthis
     comments) - containment (the pill's own border) carries the
     "these five belong together, in order" meaning instead. */
  .p2p-flow { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .55rem; }
  .p2p-flow::before { display: none; }
  .p2p-step { flex-direction: row; align-items: center; gap: .5rem; width: auto; flex: 0 0 auto;
    padding: .35rem .75rem .35rem .4rem; border: 1px solid var(--b1); border-radius: var(--radius-pill);
    background: var(--bg-c); }
  .p2p-num { width: 22px; height: 22px; border-width: 1.5px; font-size: .75rem; }
  .p2p-label { font-size: .72rem; text-align: left; }

  /* Same "not well mobile responsive" follow-up: the two-node path
     stacked with barely-visible 1px/16px connector stubs between full-
     width and content-width boxes of mismatched widths - it read as
     broken fragments, not a path. Connectors are dropped outright
     (same reasoning as .p2p-flow's line above) and both nodes are
     stretched to the same full width so they read as two consistent
     stacked steps, not two differently-sized floating boxes. */
  .direction-path { flex-direction: column; align-items: stretch; gap: .6rem; }
  .direction-connector { display: none; }
  .direction-node { width: 100%; }
  /* Centered (2026-09-18 follow-up), not left-aligned - the "..." node
     doesn't belong to either full-width box above it the way a left-
     aligned dot would visually suggest; centering reads as "and more,
     unattached to any one step" instead. */
  .direction-more { align-self: center; }
}
@media (max-width: 768px) {
  .cp-sec { padding: var(--sp-6) 0; }
  .cp-hero { padding: 1rem 0 var(--sp-6); }
  .org-diagram, .exist-diagram, .belief-diagram, .cp-leadership, .diff-detail-card, .cp-card { padding: 1.5rem 1.5rem; }
  .cp-final-cta { padding: var(--sp-6) 0; }
}
@media (max-width: 480px) {
  .breadcrumb { flex-wrap: wrap; }
  .org-diagram, .exist-diagram, .belief-diagram, .cp-leadership, .diff-detail-card, .cp-card { padding: 1.25rem 1.1rem; }
}