/* ============================================================================
   InfraEdge — site-wide infographics.

   Partner to partials/diagrams.js. Same rules as concepts.css: tokens only, no
   raw hex, no shadows, separation from hairlines and mist fills.

   Most of these are .schematic .draw drawings, so the stroke-draw and label
   fade already come free from the generic `.draw [data-draw]` rules in
   base.css. What lives here is layout, the two scroll-scrubbed scenes, and the
   handful of shapes the schematic primitives do not already cover.
   ========================================================================= */

/* ==========================================================================
   1. toolFunnel — sticky scroll scene for the controlled change model.

   Tall outer section + sticky stage; --p scrubbed 0..1 by js/motion.js.
   Stages highlight diagram zones (estate → InfraEdge → Git/CI/CD → review/AWS).
   HTML/CSS composition so labels stay website-readable.
   ========================================================================== */
.fun { position: relative; height: 170vh; }
.fun-sticky {
  position: sticky; top: 0; height: 100vh;
  overflow-x: hidden; overflow-y: auto;
  display: flex; align-items: flex-start;
  padding-top: 72px;
  padding-bottom: 1.25rem;
  box-sizing: border-box;
}
.fun-inner { width: 100%; }
.fun-head { margin-bottom: clamp(.75rem, 1.6vh, 1.15rem); }
.fun-head h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.15rem);
  max-width: 34ch; margin: .55rem 0 0;
  line-height: 1.15;
}
.fun-support {
  margin: .75rem 0 0;
  max-width: 54ch;
  font-size: var(--t-body);
  color: var(--ink-soft);
  line-height: 1.5;
}

.fun-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(16rem, .85fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: start;
}

/* --- diagram --- */
.fun-diagram {
  /* The three dials the stage state turns. Defaults are the active values, so
     a diagram used outside the scrubbed section (the compact estate sketch)
     renders at full strength without any stage attribute at all. */
  --fun-decor: 1;
  --fun-edge: var(--line-strong);
  --fun-fill: var(--mist);
  margin: 0;
  display: grid;
  gap: .55rem;
  min-width: 0;
  padding: clamp(1rem, 1.6vw, 1.35rem);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--white);
}

/*
  Active and inactive, without dimming the words.

  This was `opacity: .5` on the whole zone. Group opacity paints the subtree
  and then composites it at half strength, so the labels landed at 2.23:1
  ("Controlled change"), 2.28:1 (the outcome line) and 3.0:1 ("Git / IaC")
  against the card behind them — meaningful, normal-sized text that a reader
  could not read because its layer was not the one currently highlighted.
  The tokens were all correct, which is why the site's own contrast test,
  reading getComputedStyle().color, agreed the page was fine.

  What steps back now is the decoration: the product marks, the two logo
  lockups, the cloud photograph and the connectors between the boxes. The
  surface flattens from mist to white and the hairline drops from
  --line-strong to --line. Every label keeps its own token at full strength,
  in both themes, in every stage and while an adjacent step is hovered.

  The active zone is not identified by contrast alone either: the emphasis
  block further down gives it an outline, a tinted ground and an accent
  border, so the state survives greyscale and a reader who cannot see the
  difference between two neutrals.
*/
.fun-zone {
  transition: border-color 320ms ease, background 320ms ease;
}
.fun:not([data-hover])[data-stage='0'] .fun-zone:not([data-fun-layer='0']),
.fun:not([data-hover])[data-stage='1'] .fun-zone:not([data-fun-layer='1']),
.fun:not([data-hover])[data-stage='2'] [data-fun-layer]:not([data-fun-layer='2']),
.fun:not([data-hover])[data-stage='3'] [data-fun-layer]:not([data-fun-layer='3']),
.fun[data-hover='0'] .fun-zone:not([data-fun-layer='0']),
.fun[data-hover='1'] .fun-zone:not([data-fun-layer='1']),
.fun[data-hover='2'] [data-fun-layer]:not([data-fun-layer='2']),
.fun[data-hover='3'] [data-fun-layer]:not([data-fun-layer='3']) {
  --fun-decor: .4;
  --fun-edge: var(--line);
  --fun-fill: var(--white);
}
.fun:not([data-hover])[data-stage='0'] .fun-zone[data-fun-layer='0'],
.fun:not([data-hover])[data-stage='1'] .fun-zone[data-fun-layer='1'],
.fun:not([data-hover])[data-stage='2'] [data-fun-layer='2'],
.fun:not([data-hover])[data-stage='3'] [data-fun-layer='3'],
.fun[data-hover='0'] .fun-zone[data-fun-layer='0'],
.fun[data-hover='1'] .fun-zone[data-fun-layer='1'],
.fun[data-hover='2'] [data-fun-layer='2'],
.fun[data-hover='3'] [data-fun-layer='3'] {
  --fun-decor: 1;
  --fun-edge: var(--line-strong);
  --fun-fill: var(--mist);
}

/* Keep the path shell at full strength when only one segment is highlighted —
   its kicker and its outcome line describe the whole path, not one segment. */
.fun:not([data-hover])[data-stage='2'] .fun-zone-path,
.fun:not([data-hover])[data-stage='3'] .fun-zone-path,
.fun[data-hover='2'] .fun-zone-path,
.fun[data-hover='3'] .fun-zone-path {
  --fun-decor: 1;
  --fun-edge: var(--line-strong);
  --fun-fill: var(--mist);
}

.fun-zone-head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: .35rem .85rem;
  margin-bottom: .7rem;
}
.fun-zone-kicker {
  margin: 0;
  font-family: var(--font); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--sky-700);
}
.fun-zone-meta {
  margin: 0;
  font-family: var(--font); font-size: .6875rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-quiet);
}
.fun-zone-caption {
  margin: .85rem 0 0;
  font-size: var(--t-small); color: var(--ink-soft); line-height: 1.4;
  max-width: 48ch;
}

.fun-estate {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .65rem;
}

.fun-node {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .45rem;
  min-height: 5.25rem;
  padding: .75rem .5rem;
  border: 1px solid var(--fun-edge);
  border-radius: var(--r-s);
  background: var(--fun-fill);
  text-align: center;
  box-sizing: border-box;
  transition: border-color 320ms ease, background 320ms ease;
}
.fun-node-mark {
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem;
  flex: none;
  /* Decoration, so this is what dims. */
  opacity: var(--fun-decor);
  transition: opacity 320ms var(--ease);
}
.fun-node-mark .pmark { display: block; width: 100%; height: auto; }
.fun-node-label {
  font-size: var(--t-small); font-weight: 600;
  color: var(--ink); line-height: 1.25;
}

.fun-down {
  display: grid; place-items: center;
  height: 1.35rem;
}
.fun-down span {
  display: block; width: 1px; height: 100%;
  background: var(--navy-900);
  position: relative;
  opacity: var(--fun-decor);
  transition: opacity 320ms var(--ease);
}
.fun-down span::after {
  content: '';
  position: absolute; left: 50%; bottom: -1px;
  width: 7px; height: 7px;
  border-right: 1.5px solid var(--navy-900);
  border-bottom: 1.5px solid var(--navy-900);
  transform: translateX(-50%) rotate(45deg);
}

.fun-zone-ie {
  display: grid; gap: .65rem; justify-items: center;
  padding: 1.1rem 1.25rem 1.15rem;
  border: 1.5px solid var(--fun-edge);
  border-radius: var(--r-m);
  background: var(--fun-fill);
  transition: border-color 320ms ease, background 320ms ease;
}
.fun-ie-brand { display: grid; place-items: center; }
.fun-logo {
  display: block; height: 40px; width: auto;
  opacity: var(--fun-decor);
  transition: opacity 320ms var(--ease);
}
.fun-logo--dark { display: none; }
:root[data-resolved-theme='dark'] .fun-logo--light { display: none; }
:root[data-resolved-theme='dark'] .fun-logo--dark { display: block; }
.fun-ie-label {
  margin: 0;
  font-family: var(--font); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-quiet);
}
.fun-products {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem .5rem;
}
.fun-products li {
  display: flex; align-items: center; gap: .4rem;
  font-family: var(--font); font-size: .75rem; font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink);
  padding: .3rem .65rem;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--white);
}
.fun-verbs {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem .55rem;
}
.fun-verbs li {
  font-family: var(--font); font-size: var(--t-small); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--sky-700);
  padding: .4rem .7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
}

.fun-zone-path { display: grid; gap: .7rem; }
.fun-path {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: stretch; gap: .45rem;
}
.fun-path-seg {
  display: flex; flex: 1 1 12rem; align-items: stretch; gap: .45rem;
  min-width: 0;
  transition: opacity 320ms var(--ease);
}
.fun-path-bridge {
  display: flex; align-items: center; flex: none;
}
.fun-path .fun-node {
  flex: 1 1 0;
  min-width: 0;
  min-height: 4.5rem;
  flex-direction: row;
  gap: .55rem;
  padding: .85rem 1rem;
  background: var(--white);
}
/* Must beat .fun-path .fun-node — otherwise gold fill is lost in dark mode and
   --ink-on-gold (navy) lands on a dark card. */
.fun-path .fun-node-git {
  background: var(--gold-400);
  border-color: var(--ink-on-gold);
}
.fun-path .fun-node-git .fun-node-label { color: var(--ink-on-gold); }
.fun-path .fun-node-git .fun-node-mark { color: var(--ink-on-gold); }
.fun-path .fun-node-cloud {
  flex: 1.15 1 0;
  min-height: 5rem;
  padding: .4rem .55rem;
  background: transparent;
  border-color: var(--fun-edge);
  overflow: hidden;
}
.fun-cloud-lockup {
  display: block;
  width: min(8rem, 100%);
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  opacity: var(--fun-decor);
  transition: opacity 320ms var(--ease);
}

.fun-arrow {
  display: block; align-self: center; flex: none;
  width: .85rem; height: 1.5px;
  background: var(--navy-900);
  position: relative;
  opacity: var(--fun-decor);
  transition: opacity 320ms var(--ease);
}
.fun-arrow::after {
  content: '';
  position: absolute; right: -1px; top: 50%;
  width: 6px; height: 6px;
  border-right: 1.5px solid var(--navy-900);
  border-top: 1.5px solid var(--navy-900);
  transform: translateY(-50%) rotate(45deg);
}

.fun-outcome {
  margin: 0;
  font-family: var(--font); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); text-align: center;
}

/* Active zone emphasis beyond opacity */
.fun:not([data-hover])[data-stage='0'] .fun-zone-estate,
.fun[data-hover='0'] .fun-zone-estate {
  outline: 1.5px solid var(--sky-600);
  outline-offset: 4px;
  border-radius: var(--r-s);
  background: color-mix(in srgb, var(--sky-tint) 45%, transparent);
}
.fun:not([data-hover])[data-stage='1'] .fun-zone-ie,
.fun[data-hover='1'] .fun-zone-ie {
  border-color: var(--sky-600);
  outline: 1px solid color-mix(in srgb, var(--sky-600) 40%, transparent);
  outline-offset: 0;
}
.fun:not([data-hover])[data-stage='2'] [data-fun-layer='2'] .fun-node,
.fun[data-hover='2'] [data-fun-layer='2'] .fun-node {
  border-color: var(--sky-600);
}
.fun:not([data-hover])[data-stage='3'] [data-fun-layer='3'] .fun-node,
.fun[data-hover='3'] [data-fun-layer='3'] .fun-node {
  border-color: var(--gold-400);
}

/* --- step rail --- */
.fun-rail { min-width: 0; position: sticky; top: 0; }
.fun-steps { display: grid; gap: .55rem; list-style: none; margin: 0; padding: 0; }
/* Each list item holds one button; the button is the whole target. */
.fun-steps > li { display: grid; min-width: 0; }
.fun-step {
  display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start;
  width: 100%; text-align: left; font: inherit; color: inherit;
  padding: .85rem .95rem; border-radius: var(--r-s); border: 1px solid transparent;
  transition: background 300ms ease, border-color 300ms ease, color 300ms ease;
  cursor: pointer;
}
.fun-step-body { display: block; min-width: 0; }
.fun-step:not(.is-on):hover {
  border-color: var(--hover-border); background: var(--mist);
}
.fun-step:not(.is-on):hover strong { color: var(--hover-ink); }
.fun-step:focus-visible {
  outline: 2px solid var(--sky-600);
  outline-offset: 2px;
}
.fun-step b {
  font-family: var(--font); font-size: var(--t-micro);
  letter-spacing: .1em; color: var(--slate-500); padding-top: .15rem;
}
.fun-step strong { display: block; font-size: var(--t-body); line-height: 1.3; }
.fun-step-note {
  display: block;
  font-size: var(--t-small); margin: 0; color: var(--ink-soft); line-height: 1.45;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height 340ms var(--ease), opacity 240ms ease, margin 340ms var(--ease);
}
.fun-step.is-on .fun-step-note { max-height: 12rem; opacity: 1; margin-top: .35rem; }
.fun-step.is-on { background: var(--white); border-color: var(--line); }
.fun-step.is-on b { color: var(--sky-700); }
.fun-step.is-done { border-left: 2px solid var(--gold-400); }
.fun-step:not(.is-on) strong { color: var(--ink-quiet); font-weight: 500; }
.fun-step:not(.is-on) b { color: var(--ink-quiet); }

@media (max-height: 860px) and (min-width: 1101px) {
  .fun-diagram { gap: .4rem; padding: .85rem 1rem; }
  .fun-node { min-height: 4.5rem; padding: .55rem .4rem; }
  .fun-path .fun-node { min-height: 3.85rem; padding: .65rem .85rem; }
  .fun-zone-ie { padding: .85rem 1rem; }
  .fun-head { margin-bottom: .5rem; }
  .fun-support { margin-top: .5rem; }
}

/* --- mobile: vertical story, no sticky scrub ---

   IE-019 from the September 2026 audit lived here. A stray `}` closed the
   short-viewport query above and then a second one closed nothing, so the
   seventeen rules below sat at the top level and applied at every width: the
   stage collapsed to one column, the rail lost `position: sticky`, and every
   step description was expanded. The section this belongs to was the
   homepage's scroll-scrubbed funnel, which did not scrub at any size.

   The rules are now inside the query they were written for, merged into the
   block that already existed for it rather than repeating the condition. The
   funnel itself no longer ships on any page — the homepage dropped it — so
   correcting this changes nothing rendered today. It is fixed because a
   seventeen-rule leak into the global scope is not something to leave behind
   for whoever next renders `.fun`. */
@media (max-width: 1000px) {
  .fun { height: auto; }
  .fun-sticky { position: static; height: auto; padding-block: var(--section); }
  .fun-stage {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .fun-rail { position: static; }
  .fun-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
  }
  .fun-step .fun-step-note { max-height: none; opacity: 1; margin-top: .35rem; }
  .fun-step { background: var(--white); border-color: var(--line); }
  .fun-step:not(.is-on) strong { color: var(--ink); font-weight: 600; }
  /* Everything at full strength: no scrub to follow at this size. */
  .fun [data-fun-layer], .fun .fun-zone {
    --fun-decor: 1 !important;
    --fun-edge: var(--line-strong) !important;
    --fun-fill: var(--mist) !important;
  }
  .fun-zone-estate {
    outline: none !important;
    background: transparent !important;
  }
}

@media (max-width: 720px) {
  .fun-estate { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fun-estate .fun-node:last-child { grid-column: 1 / -1; max-width: 12rem; justify-self: center; }
  .fun-path { flex-direction: column; gap: .55rem; }
  .fun-path-seg { flex-direction: column; flex: none; width: 100%; }
  .fun-path-bridge {
    justify-content: center;
    transform: rotate(90deg);
    height: 1rem;
  }
  .fun-path .fun-node { width: 100%; min-height: 3.75rem; }
  .fun-steps { grid-template-columns: 1fr; }
  .fun-verbs { gap: .4rem; }
  .fun-verbs li { font-size: .75rem; padding: .35rem .55rem; }
  .fun-products li { font-size: .6875rem; padding: .25rem .5rem; }
  .fun-cloud-lockup { width: min(7rem, 70%); }
  .fun-outcome { letter-spacing: .06em; }
}

@media (prefers-reduced-motion: reduce) {
  .fun { height: auto; }
  .fun-sticky { position: static; height: auto; padding-block: var(--section); }
  .fun [data-fun-layer], .fun .fun-zone {
    --fun-decor: 1 !important;
    --fun-edge: var(--line-strong) !important;
    --fun-fill: var(--mist) !important;
  }
  .fun-node, .fun-zone-ie, .fun-node-mark, .fun-logo, .fun-cloud-lockup,
  .fun-arrow, .fun-down span { transition: none; }
  .fun-zone { transition: none; }
  .fun-step .fun-step-note { max-height: none; opacity: 1; margin-top: .35rem; }
  .fun-steps { grid-template-columns: 1fr; }
  .fun-step { background: var(--white); border-color: var(--line); }
  .fun-zone-estate {
    outline: none !important;
    background: transparent !important;
  }
}

/* ==========================================================================
   2. chaosToClarity — organic estate → engineered model.
   Desktop: before | InfraEdge spine | after, three rows (State / Change /
   Assurance). Mobile: stack before → spine → after per category.
   ========================================================================== */
.c2c { max-width: 1080px; margin: 0 auto; }
.c2c-head { margin-bottom: clamp(1rem, 2vh, 1.5rem); }
.c2c-head .eyebrow { margin-bottom: .55rem; }
.c2c-title {
  font-size: clamp(1.25rem, 2.1vw, 1.75rem);
  font-weight: 700; letter-spacing: -0.02em;
  color: var(--navy-900); margin: 0; max-width: 28ch; line-height: 1.2;
}

.c2c-heads {
  display: grid;
  grid-template-columns: 4.75rem minmax(0, 1fr) 120px minmax(0, 1fr);
  gap: .75rem 1rem;
  align-items: end;
  margin-bottom: .85rem;
}
.c2c-heads-spacer { display: block; }
.c2c-card-label { display: none; }
.c2c-kicker {
  margin: 0;
  font-family: var(--font); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--sky-700);
}
.c2c-kicker-mid {
  text-align: center;
  color: var(--ink-quiet);
}

.c2c-rows {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .85rem;
}
.c2c-row {
  margin: 0;
  display: grid;
  grid-template-columns: 4.75rem minmax(0, 1fr) 120px minmax(0, 1fr);
  gap: .75rem 1rem;
  align-items: stretch;
}
.c2c-row-label {
  margin: 0;
  display: flex; align-items: center; justify-content: flex-start;
}
.c2c-row-label span {
  font-family: var(--font); font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--sky-700);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}

.c2c-card {
  margin: 0;
  border-radius: var(--r-s);
  padding: .85rem 1rem .9rem;
  display: flex; flex-direction: column; gap: .55rem;
  min-height: 100%;
}
.c2c-card-before {
  background: var(--mist);
  border: 1.4px dashed var(--line-strong);
  color: var(--ink-soft);
}
.c2c-card-after {
  background: var(--white);
  border: 1.5px solid var(--line-strong);
  border-left: 3px solid var(--gold-400);
  color: var(--navy-900);
}
.c2c-card-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: .5rem;
}
.c2c-card-title {
  margin: 0;
  font-size: var(--t-body); font-weight: 700;
  letter-spacing: -0.01em; line-height: 1.25;
  color: var(--navy-900);
}
.c2c-card-before .c2c-card-title { color: var(--ink-quiet); font-weight: 600; }
.c2c-icons {
  display: flex; align-items: center; gap: .35rem; flex-shrink: 0;
}
.c2c-icon {
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--mist);
}
.c2c-points {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .28rem;
}
.c2c-points li {
  position: relative;
  padding-left: .85rem;
  font-size: var(--t-small);
  line-height: 1.4;
  color: inherit;
}
.c2c-points li::before {
  content: '';
  position: absolute; left: 0; top: .55em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--slate-500);
}
.c2c-card-after .c2c-points li::before { background: var(--sky-600); }

/* Centre spine: Discover → Standardise → Automate → Assure */
.c2c-spine {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: 100%;
  padding: .35rem 0;
}
.c2c-spine-line {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 1px;
  background: var(--sky-600);
  opacity: .45;
  transform: translateX(-50%);
}
.c2c-spine-steps {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  align-items: center; gap: .35rem;
}
.c2c-step {
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  text-align: center;
  padding: .35rem .4rem;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-s);
  min-width: 5.5rem;
}
.c2c-step-num {
  font-family: var(--font); font-size: 10px; font-weight: 600;
  letter-spacing: .12em; color: var(--sky-700);
}
.c2c-step-verb {
  font-size: 11px; font-weight: 700;
  letter-spacing: .02em; color: var(--navy-900);
  text-transform: uppercase;
}
.c2c-step-join {
  width: 1px; height: .45rem;
  background: var(--sky-600); opacity: .55;
}

/* Outcome bar — gold accent, not a full yellow plate */
.c2c-outcome {
  margin: 1.15rem 0 0;
  padding: .85rem 1.1rem;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--gold-400);
  border-radius: var(--r-s);
  background: var(--white);
}
.c2c-outcome-lead {
  margin: 0;
  font-family: var(--font); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--navy-900); line-height: 1.45;
}
.c2c-outcome-body {
  margin: .45rem 0 0;
  font-size: var(--t-small); color: var(--ink-soft);
  max-width: 68ch; line-height: 1.45;
}
.c2c-aside {
  display: block;
  margin: .7rem 0 0;
  font-size: var(--t-small); color: var(--ink-quiet); max-width: 62ch;
}

@media (max-width: 900px) {
  /* Once the columns stack, label each card where it is read. A pair of
     column headings above the first card mislabels the single-column flow. */
  .c2c-heads { display: none; }
  .c2c-card-label { display: block; }
  .c2c-row {
    grid-template-columns: 1fr;
    gap: .55rem;
    padding: .85rem 0;
    border-top: 1px solid var(--line);
  }
  .c2c-row:first-child { border-top: 0; padding-top: 0; }
  .c2c-row-label {
    justify-content: flex-start;
  }
  .c2c-row-label span {
    writing-mode: horizontal-tb;
    transform: none;
    letter-spacing: .12em;
  }
  .c2c-spine {
    min-height: 0;
    padding: .15rem 0;
  }
  .c2c-spine-line { display: none; }
  .c2c-spine-steps {
    flex-direction: row; flex-wrap: wrap; justify-content: center;
    gap: .4rem;
  }
  .c2c-step-join {
    width: .55rem; height: 1px;
  }
  /* Mobile order: label → before → spine → after */
  .c2c-row-label { order: 0; }
  .c2c-card-before { order: 1; }
  .c2c-spine { order: 2; }
  .c2c-card-after { order: 3; }
}

@media (prefers-reduced-motion: reduce) {
  .c2c-card, .c2c-step { transition: none; }
}

/* ==========================================================================
   3b. heroLedger — first-screen artefact. Navy head, gold bind, sky rail.
   ========================================================================== */
.hec {
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--white);
  overflow: hidden;
  max-width: 520px;
  margin-left: auto;
}
.hec-wrap .hec { margin-inline: auto; }
.how-step3-split {
  align-items: start;
  gap: clamp(2rem, 4vw, 3.5rem);
}
.how-step3-split .sec-head { margin-bottom: var(--s-3); }
.how-step3-split .hec-wrap { min-width: 0; }
.how-step3-split .hec {
  margin-left: 0;
  margin-inline: 0;
  max-width: none;
  width: 100%;
}
.how-chain-list {
  margin: var(--s-3) 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .85rem;
}
.how-chain-list li {
  padding-left: 0;
  font-size: var(--t-body);
  color: var(--ink-soft);
  line-height: 1.45;
  max-width: 42ch;
}
.how-chain-list b {
  display: block;
  font-family: var(--font);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sky-700);
  margin-bottom: .2rem;
}
@media (max-width: 900px) {
  .how-step3-split .hec { max-width: 520px; margin-inline: auto; }
}
.hec:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.hec-head {
  background: var(--tone-navy-bg);
  color: var(--tone-navy-ink);
  padding: 1.15rem 1.35rem 1.25rem;
}
.hec-rule {
  display: block; width: 40px; height: 2px;
  background: var(--gold-400); margin-bottom: .7rem;
}
.hec-kicker {
  margin: 0;
  font-family: var(--font); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--on-navy-quiet);
}
.hec-id {
  margin: .45rem 0 .35rem;
  font-size: var(--t-h2); font-weight: 700; letter-spacing: -0.03em;
  line-height: 1.1;
}
.hec-head-meta {
  margin: 0;
  font-size: var(--t-small); color: var(--on-navy-quiet);
  max-width: 42ch; line-height: 1.45;
}
.hec-steps {
  margin: 0; padding: 1.15rem 1.25rem 1.05rem;
  display: grid; gap: 0;
}
.hec-step {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 0 .9rem;
  position: relative;
  padding-bottom: 1.15rem;
}
.hec-step:last-child { padding-bottom: .15rem; }
/* Rail runs from under this node into the centre of the next. Nodes sit
   above it (z-index), so a negative bottom closes the visible gap without
   changing the scaleY grow animation. */
.hec-step::before {
  content: '';
  position: absolute;
  left: 10px;
  top: calc(.35rem + 11px);
  bottom: calc(-1 * (.35rem + 6px));
  width: 2px; background: var(--sky-500);
  transform-origin: top;
  transition: transform 520ms var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms + 160ms);
}
html.js .hec .hec-step::before { transform: scaleY(0); }
html.js .hec.revealed .hec-step::before { transform: scaleY(1); }
.hec-step:last-child::before { display: none; }
/* Last node is 14px / .28rem — reach its centre from the previous rail. */
.hec-step:nth-last-child(2)::before {
  bottom: calc(-1 * (.28rem + 7px));
}
.hec-node {
  width: 12px; height: 12px; margin: .35rem auto 0;
  border-radius: 999px;
  border: 2px solid var(--sky-700);
  background: var(--white);
  position: relative; z-index: 1;
}
.hec-step:last-child .hec-node {
  width: 14px; height: 14px; margin-top: .28rem;
  background: var(--gold-400); border-color: var(--navy-900);
}
.hec-key {
  margin: 0 0 .25rem;
  font-family: var(--font); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--sky-700);
}
.hec-title {
  margin: 0 0 .45rem;
  font-size: var(--t-body); font-weight: 600; color: var(--navy-900);
  line-height: 1.4; letter-spacing: -0.011em;
}
.hec-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.hec-chips { display: contents; }
.hec-chip {
  font-family: var(--mono); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: .02em; color: var(--slate-600);
  background: var(--mist); border: 1px solid var(--line);
  border-radius: 4px; padding: .22rem .5rem; line-height: 1.3;
}
.hec-bind {
  display: flex; align-items: center; gap: .85rem;
  margin: 0;
  background: var(--gold-400); color: var(--ink-on-gold);
  padding: .7rem 1.1rem .75rem;
  text-decoration: none;
}
.hec-bind:hover { background: var(--gold-hover); }
.hec-bind:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* base.css sets strong/b to --ink, which flips light in dark mode — keep navy on gold. */
.hec-bind strong, .hec-bind b { color: inherit; }
.hec-bind-mark {
  flex: none;
  display: grid; place-items: center;
  width: 44px; height: 32px;
  background: var(--white);
  border-radius: 6px;
}
.hec-bind-mark img { width: 32px; height: auto; }
.hec-bind-copy {
  display: grid; gap: .12rem; min-width: 0;
}
.hec-bind-copy strong {
  font-size: var(--t-body); font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.15;
}
.hec-bind-copy span {
  font-family: var(--font); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .04em; color: var(--ink-on-gold);
}

.hec-deck { display: grid; }
.hec-card { grid-area: 1 / 1; min-width: 0; }
.hec-card:not(.is-on) { display: none; }
html.js .hec-card { display: block; }
html.js .hec-card {
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
html.js .hec-card:not(.is-on) {
  display: block;
  opacity: 0;
  transform: translateX(var(--hec-dx, 18px));
  pointer-events: none;
}
html.js .hec-card.is-on {
  opacity: 1;
  transform: none;
  z-index: 1;
}
html.js .hec.revealed .hec-card.is-on .hec-step::before { transform: scaleY(1); }
html.js .hec-card:not(.is-on) .hec-step::before { transform: scaleY(0); transition-delay: 0s; }

.hec-nav {
  display: flex; align-items: center; gap: .5rem;
  flex-wrap: wrap;
  padding: .7rem 1rem .75rem;
  border-top: 1px solid var(--line);
  background: var(--mist);
}
.hec-dots {
  display: flex; align-items: center; justify-content: center;
  gap: 2px; flex: 1 1 auto; min-width: 0;
}
/*
  The dot reads as 8px; the button is the 24px WCAG 2.5.8 minimum.

  It used to pull those 24px boxes back together with `margin-inline: -5px`,
  which is not spacing — it is overlap. Each target lost ten pixels to its
  neighbours and owned about fourteen of its own, so the edge of one dot
  activated the one beside it. A gap does the same visual job and leaves the
  targets whole.
*/
.hec-dot {
  width: 24px; height: 24px; padding: 0; border: 0; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; cursor: pointer; border-radius: 999px;
}
.hec-dot::before {
  content: ''; width: 8px; height: 8px; border-radius: 999px;
  background: var(--line-strong);
  transition: background var(--dur-fast) ease;
}
.hec-dot.is-on::before { background: var(--gold-400); }
.hec-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.hec-dir {
  width: 36px; height: 36px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong); border-radius: var(--r-s);
  background: var(--white); color: var(--navy-900);
}
.hec-dir:hover { border-color: var(--hover-border); color: var(--hover-ink); }
.hec-dir:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Pause and play are the same control; the glyph says which. */
.hec-toggle { flex: none; }
.hec-toggle .hec-glyph-pause { display: none; }
.hec-toggle.is-playing .hec-glyph-play { display: none; }
.hec-toggle.is-playing .hec-glyph-pause { display: block; }
.hec-pos {
  margin: 0 0 0 .15rem;
  font-family: var(--font); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .08em; color: var(--slate-500); min-width: 4.8ch;
}

html.js .hec .hec-body {
  opacity: 0; transform: translateY(10px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
html.js .hec.revealed .hec-body { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .hec-step::before { transform: none; transition: none; }
  html.js .hec .hec-body { opacity: 1; transform: none; transition: none; }
  html.js .hec-card { transition: none; transform: none; }
  html.js .hec-card.is-on { opacity: 1; }
  html.js .hec-card:not(.is-on) { opacity: 0; }
}

@media (max-width: 900px) {
  .hec { max-width: none; margin-left: 0; }
}

/* The counter is decorative (aria-hidden) and the first thing worth losing
   when the control row runs out of room. */
@media (max-width: 420px) {
  .hec-nav { gap: .35rem; padding-inline: .65rem; }
  .hec-pos { display: none; }
}

/* ==========================================================================
   3. lifecycleRing — Assess, Resolve, Assure.
   ========================================================================== */
.ring-wrap {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: .65rem;
  max-width: 520px;
  margin-inline: auto;
  width: 100%;
}
.ring-wrap > * { min-width: 0; }
.ring-svg {
  width: min(100%, 400px);
  max-width: 100%;
  height: auto;
  overflow: visible;
  margin-inline: auto;
  display: block;
}

.ring-caption {
  margin: 0;
  font-family: var(--font); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--slate-500); text-align: center; line-height: 1.35;
  max-width: 28ch;
}

.ring-track-outer,
.ring-track-inner {
  stroke: var(--line-strong);
  stroke-width: 1.2;
}
.ring-arc {
  fill: var(--sky-tint);
  stroke: none;
  transition: fill 300ms ease;
}

/* The arcs are illustration; the legend below is the control. Nothing here
   offers a target that the keyboard cannot reach. */
.ring-seg.is-active .ring-arc { fill: var(--gold-400); }
/* Hovering the legend lights its arc, so the two read as one component. */
.ring-wrap:has(.ring-legend li:nth-child(1) a:hover) .ring-seg:nth-of-type(1) .ring-arc,
.ring-wrap:has(.ring-legend li:nth-child(2) a:hover) .ring-seg:nth-of-type(2) .ring-arc,
.ring-wrap:has(.ring-legend li:nth-child(3) a:hover) .ring-seg:nth-of-type(3) .ring-arc,
.ring-wrap:has(.ring-legend li:nth-child(1) a:focus-visible) .ring-seg:nth-of-type(1) .ring-arc,
.ring-wrap:has(.ring-legend li:nth-child(2) a:focus-visible) .ring-seg:nth-of-type(2) .ring-arc,
.ring-wrap:has(.ring-legend li:nth-child(3) a:focus-visible) .ring-seg:nth-of-type(3) .ring-arc {
  fill: var(--sky-tint);
}

.ring-legend {
  list-style: none; margin: .35rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem;
  width: 100%; max-width: 520px;
}
.ring-legend a {
  display: block; padding: .65rem .75rem; border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--white); text-decoration: none; color: var(--ink);
  text-align: center; font-size: var(--t-small); line-height: 1.35;
  transition: border-color var(--dur-fast) ease;
}
.ring-legend a:hover { border-color: var(--hover-border); }
.ring-legend a:hover b { color: var(--hover-ink); }
.ring-legend b { display: block; color: var(--sky-700); font-size: var(--t-micro); letter-spacing: .06em; text-transform: uppercase; margin-bottom: .15rem; }
.ring-legend span { display: block; font-weight: 600; }
.ring-legend .is-active a, .ring-legend li.is-active a { border-color: var(--navy-900); background: var(--mist); }

/* Narrow column beside copy — stack the legend so it fits the float. */
.ring-wrap.is-compact {
  max-width: 340px;
  gap: .5rem;
}
.ring-wrap.is-compact .ring-svg { width: 100%; max-width: 300px; }
.ring-wrap.is-compact .ring-caption { display: none; } /* legend carries the labels */
.ring-wrap.is-compact .ring-legend {
  grid-template-columns: 1fr;
  max-width: none;
}
.ring-wrap.is-compact .ring-legend a {
  text-align: left; display: flex; align-items: baseline; gap: .45rem; padding: .55rem .7rem;
}
.ring-wrap.is-compact .ring-legend b { display: inline; margin-bottom: 0; }
.ring-wrap.is-compact .ring-legend span::before { content: '— '; font-weight: 400; color: var(--ink-quiet); }

/* On navy the arcs need to read against a dark ground. */
.tone-navy .ring-arc { fill: var(--navy-800); }
.tone-navy .ring-track-outer,
.tone-navy .ring-track-inner { stroke: var(--navy-line-2); }
.tone-navy .ring-caption { color: var(--on-navy-quiet); }
.tone-navy .ring-legend a { background: transparent; border-color: var(--navy-line); color: var(--on-navy); }
.tone-navy .ring-legend b { color: var(--gold-400); }
.tone-navy .ring-legend .is-active a,
.tone-navy .ring-legend li.is-active a { background: var(--tone-navy-card); border-color: var(--gold-400); }

@media (max-width: 640px) {
  .ring-legend { grid-template-columns: 1fr; }
  .ring-legend a { text-align: left; display: flex; align-items: baseline; gap: .45rem; }
  .ring-legend b { display: inline; margin-bottom: 0; }
  .ring-legend span::before { content: '— '; font-weight: 400; color: var(--ink-quiet); }
}

/* ==========================================================================
   4. productArchitecture — the two-track spine.
   ========================================================================== */
/* productArchitecture — three products in sequence, the return that closes
   them into a loop, and the investor entry alongside. HTML, not a drawing:
   see the note above the component in partials/diagrams.js. */
.pa { max-width: 1040px; margin: 0 auto; display: grid; gap: var(--s-3); }

.pa-track {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3); list-style: none; margin: 0; padding: 0;
  counter-reset: none;
}
.pa-step { position: relative; display: flex; }

/* The arrow between steps sits in the gap rather than inside either card, so
   it never reflows the text it is pointing away from. */
.pa-step + .pa-step::before {
  content: ''; position: absolute; top: 2.35rem; left: calc(var(--s-3) * -1);
  width: var(--s-3); height: 1px; background: var(--line-strong);
}
.pa-step + .pa-step::after {
  content: ''; position: absolute; top: calc(2.35rem - 3px); left: -7px;
  border-left: 6px solid var(--line-strong);
  border-block: 4px solid transparent;
}

.pa-card {
  display: grid; gap: .4rem; align-content: start;
  width: 100%; padding: var(--s-3);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-m);
  text-decoration: none; color: inherit;
  transition: border-color var(--dur-fast) ease;
}
.pa-card:hover { border-color: var(--hover-border); }
.pa-card:hover .pa-name { color: var(--hover-ink); }
.pa-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The mark, the stage number and the product name read as one unit: the mark
   is the thing the eye lands on and the two lines name what it is. */
.pa-head { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.pa-head-text { display: grid; gap: .1rem; min-width: 0; }
.pa-num {
  font-family: var(--font); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .1em; color: var(--sky-700);
}
.pa-name { font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.02em; }
.pa-q { font-size: var(--t-body); font-weight: 600; color: var(--ink); }
.pa-keeps { font-size: var(--t-small); color: var(--ink-quiet); }

/*
  The return. It was missing entirely from the old drawing, which is why that
  one argued a line while every sentence around it argued a loop — so here it
  is the widest thing in the component. Gold as a rule and an arrowhead, never
  as the type: see the gold rule in base.css.
*/
.pa-return {
  /* base.css puts a 68ch measure on every <p>. This one is a band that has to
     span the whole track to read as a return, so it opts out; the note inside
     keeps a measure of its own. */
  max-width: none;
  position: relative; margin: 0; padding: var(--s-3) var(--s-3) var(--s-3) calc(var(--s-3) + 1.4rem);
  border: 1px solid var(--line); border-left: 3px solid var(--gold-400);
  border-radius: var(--r-s); background: var(--mist);
  display: grid; gap: .25rem;
}
.pa-return::before {
  content: ''; position: absolute; left: var(--s-3); top: calc(var(--s-3) + .35rem);
  border-right: 7px solid var(--gold-400);
  border-block: 5px solid transparent;
}
.pa-return-label {
  font-family: var(--font); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
}
.pa-return-note { font-size: var(--t-small); color: var(--ink-quiet); max-width: 78ch; }

.pa-investor { display: grid; gap: .6rem; }
.pa-investor-tag {
  font-family: var(--font); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-quiet);
}
.pa-card-investor { background: var(--mist); border-style: dashed; }

@media (max-width: 900px) {
  .pa-track { grid-template-columns: 1fr; }
  /* The connector turns to point down the stack rather than across it. */
  .pa-step + .pa-step::before {
    top: calc(var(--s-3) * -1); left: var(--s-4);
    width: 1px; height: var(--s-3);
  }
  .pa-step + .pa-step::after {
    top: -7px; left: calc(var(--s-4) - 4px);
    border-left: 4px solid transparent; border-right: 4px solid transparent;
    border-top: 6px solid var(--line-strong); border-bottom: 0;
  }
}

/* ==========================================================================
   5. compoundCurve — doing it early compounds.
   ========================================================================== */
.cpd { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
.cpd-plot { min-width: 0; }
.cpd-svg { width: 100%; height: auto; overflow: visible; }
.cpd-early { fill: none; stroke: var(--sky-600); stroke-width: 3; stroke-linecap: round; }
.cpd-late { fill: none; stroke: var(--navy-900); stroke-width: 3; stroke-linecap: round; }
.cpd-void { stroke: var(--slate-500); stroke-width: 1.2; stroke-dasharray: 6 5; }
.cpd-dot { fill: var(--gold-400); stroke: var(--navy-900); stroke-width: 1.2; }
.cpd-annot { font-size: 11.5px; font-weight: 600; fill: var(--navy-900); }

.cpd-key { display: flex; flex-wrap: wrap; gap: var(--s-3); font-size: var(--t-small); color: var(--ink-soft); }
.cpd-key span { display: inline-flex; align-items: center; gap: .5rem; }
.cpd-swatch { width: 14px; height: 3px; border-radius: 2px; flex: none; }
.cpd-swatch-early { background: var(--sky-600); }
.cpd-swatch-late { background: var(--navy-900); }

@media (max-width: 700px) {
  .cpd-annot { display: none; } /* they overlap once the chart is a third of its design width */
}

/* ==========================================================================
   6. readOnlySecurity — the boundary, then the two live demonstrations.
   ========================================================================== */
.ros { display: grid; gap: var(--s-5); }
.ros-svg { width: 100%; height: auto; overflow: visible; }
.ros-detail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.ros-detail > div { display: grid; gap: var(--s-2); align-content: start; }
@media (max-width: 900px) { .ros-detail { grid-template-columns: 1fr; } }

/* The section this sits in is deliberately light — see the comment in
   scripts/pages/home.js. The tone-navy overrides that used to live here were
   removed with it: they inverted the wrapper SVG but not the two interactive
   components embedded below it, which is how "Revoke the role" ended up
   rendering white on white. */

/* ==========================================================================
   7. hireBridge — three HTML cards (homepage and /how-it-works).
   ========================================================================== */
.hire-intro-split {
  margin-top: clamp(2.5rem, 5vw, 3rem);
  margin-bottom: 1.5rem;
  align-items: center;
  /* Photo is landscape with two people — give it the wider column. */
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.hire-intro-copy { min-width: 0; }
.hire-intro-copy .h3 { max-width: 18ch; }
.hire-intro-copy p { max-width: 36ch; }
.hire-intro-photo { margin: 0; }
.hire-intro-photo img {
  object-fit: cover;
  /* Bias slightly left so both faces stay in frame. */
  object-position: 42% 40%;
  /* Do not cap height below the native 3:2 frame — that zooms and crops the second person. */
  max-height: none;
  width: 100%;
  aspect-ratio: 3 / 2;
}
@media (max-width: 900px) {
  .hire-intro-split { grid-template-columns: 1fr; }
  .hire-intro-copy .h3,
  .hire-intro-copy p { max-width: none; }
  .hire-intro-photo img {
    max-height: none;
    object-position: 40% 38%;
  }
}

.hb-cards { margin: 0; }
.hb-track {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3);
}
.hb-card {
  position: relative;
  display: grid; gap: .55rem; align-content: start;
  margin: 0; padding: var(--s-3);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-m);
  transition: border-color var(--dur-fast) ease;
}
.hb-card:hover { border-color: var(--hover-border); }
.hb-card:hover .hb-title { color: var(--hover-ink); }
.hb-card + .hb-card::before {
  content: '';
  position: absolute; top: 2.1rem; left: calc(var(--s-3) * -1);
  width: var(--s-3); height: 2px; background: var(--sky-500);
}
.hb-card + .hb-card::after {
  content: '';
  position: absolute; top: calc(2.1rem - 3px); left: -7px;
  border-left: 6px solid var(--sky-500);
  border-block: 4px solid transparent;
}
.hb-icon {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  color: var(--sky-700);
  background: var(--mist); border-radius: var(--r-s);
}
.hb-svg { width: 28px; height: 28px; }
.hb-kicker {
  margin: 0;
  font-family: var(--font); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--sky-700);
}
.hb-title { font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.02em; }
.hb-points { list-style: none; margin: .2rem 0 0; padding: 0; display: grid; gap: .45rem; }
.hb-points li {
  font-size: var(--t-small); color: var(--ink-quiet); line-height: 1.45;
  padding-left: .85rem; position: relative;
}
.hb-points li::before {
  content: '';
  position: absolute; left: 0; top: .55em;
  width: 6px; height: 6px; border-radius: 999px; background: var(--gold-400);
}
.hb-note {
  margin: var(--s-3) 0 0;
  font-size: var(--t-small); color: var(--ink-quiet); max-width: 68ch;
}
@media (max-width: 800px) {
  .hb-track { grid-template-columns: 1fr; }
  .hb-card + .hb-card::before {
    top: auto; bottom: 100%; left: 1.65rem;
    width: 2px; height: var(--s-3);
  }
  .hb-card + .hb-card::after {
    top: auto; bottom: calc(100% - 2px); left: calc(1.65rem - 3px);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid var(--sky-500);
    border-bottom: 0;
  }
}
.pbo {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3);
}
.pbo-card {
  display: grid; gap: .45rem; align-content: start;
  margin: 0; padding: var(--s-3);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-m);
  transition: border-color var(--dur-fast) ease;
}
.pbo-card:hover {
  border-color: var(--hover-border);
}
.pbo-card:hover .pbo-name { color: var(--hover-ink); }
.pbo-num {
  font-family: var(--font); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .1em; color: var(--sky-700);
}
.pbo-name { font-size: var(--t-body); font-weight: 700; letter-spacing: -0.02em; }
.pbo-copy { margin: 0; font-size: var(--t-small); color: var(--ink-quiet); line-height: 1.45; }
@media (max-width: 900px) { .pbo { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pbo { grid-template-columns: 1fr; } }

/* ==========================================================================
   8. handoverDeliverable — full-width repo pack, then operating extras below.
   ========================================================================== */
.handover-deliverable {
  display: grid;
  gap: var(--s-3);
}
.handover-deliverable-repo .pack { margin: 0; }
.ho-foot { margin: 0; max-width: 68ch; }

.ho-wrap { display: grid; gap: var(--s-2); min-width: 0; }
.ho-intro {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-2);
  align-items: center;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--mist);
}
.ho-intro-copy {
  margin: 0; max-width: 42ch; font-size: var(--t-small); color: var(--ink-soft);
}

.ho-devops {
  display: block;
  flex: none;
  width: min(240px, 100%);
  margin: 0;
}
.ho-devops img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 800 / 450; /* WebKit reserves no height for a lazy image before it loads */
  border-radius: var(--r-s);
}

.ho-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-2);
  align-items: start;
}
.ho-card {
  padding: var(--s-2); border: 1px solid var(--line); border-radius: var(--r-m);
  background: var(--white);
  transition: border-color var(--dur-fast) ease;
}
.ho-card:hover { border-color: var(--hover-border); }
.ho-card-head { margin-bottom: .65rem; }
.ho-card-title {
  margin: 0 0 .2rem; font-size: var(--t-body); font-weight: 600; color: var(--ink);
}
.ho-card-tag { margin: 0; font-size: var(--t-micro); color: var(--ink-quiet); }

.ho-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.ho-item {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: .45rem .55rem;
  align-items: start; font-size: var(--t-small);
}
.ho-pass {
  display: inline-flex; flex: none; width: 16px; height: 16px; margin-top: .08rem;
  color: var(--pass-ok);
}
.ho-pass svg { display: block; width: 16px; height: 16px; }
.ho-item-mark {
  display: inline-flex; flex: none; width: 16px; height: 16px; margin-top: .05rem;
  opacity: .92;
}
.ho-item-body {
  display: grid; gap: .05rem; min-width: 0;
}
.ho-item-body strong {
  font-size: var(--t-micro); font-weight: 600; color: var(--ink);
}
.ho-item-body span { font-size: var(--t-micro); color: var(--ink-quiet); line-height: 1.35; }

html.js .ho-item {
  opacity: 0; transform: translateX(-6px);
  transition: opacity 320ms ease, transform 360ms var(--ease);
  transition-delay: calc(var(--i, 0) * 40ms + 80ms);
}
html.js .ho-card.revealed .ho-item { opacity: 1; transform: none; }

@media (max-width: 1000px) {
  .ho-cards { grid-template-columns: 1fr; }
  .ho-intro { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}
@media (max-width: 900px) {
  .handover-deliverable .pack { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .ho-item { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   pa-intro / pa-entry — the product architecture read as entry points.

   Added when the "01 / 02 / 03" numbering came off the three cards. The
   numbers made the track look like a purchase order; the entry line on each
   card says who should walk through that particular door.
   ========================================================================== */

.pa-intro {
  font-size: var(--t-lead);
  color: var(--ink-soft);
  max-width: 68ch;
  margin: 0 auto;
  text-align: center;
}
.pa-entry {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold-700);
  border-top: 1px solid var(--line);
  padding-top: .6rem;
}

/* ==========================================================================
   darc — delivery arc: what you need done, what we hand over, what changes.

   Replaces compoundCurve on the homepage. Three columns of plain text, on
   purpose: the thing it replaced was a drawn curve that read as measured
   data, and the fix is not a better-looking curve.
   ========================================================================== */

.darc { max-width: 1040px; margin: 0 auto; }
.darc-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
}
.darc-col {
  position: relative;
  display: grid;
  gap: .9rem;
  align-content: start;
  padding: var(--s-3);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
}
/* The arrow between columns. Decorative, and it disappears with the grid. */
.darc-col + .darc-col::before {
  content: "";
  position: absolute;
  left: calc(var(--s-3) * -1);
  top: 50%;
  width: var(--s-3);
  height: 1px;
  background: var(--line-strong);
}
.darc-col + .darc-col::after {
  content: "";
  position: absolute;
  left: calc(var(--s-3) * -0.45);
  top: 50%;
  width: 6px;
  height: 6px;
  border-top: 1px solid var(--line-strong);
  border-right: 1px solid var(--line-strong);
  transform: translateY(-50%) rotate(45deg);
}
.darc-kicker {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold-700);
}
.darc-items { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.darc-items li {
  font-size: var(--t-body);
  color: var(--ink);
  padding-left: 1.1rem;
  position: relative;
}
.darc-items li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sky-500);
}
.darc-note { font-size: var(--t-small); color: var(--ink-quiet); border-top: 1px solid var(--line); padding-top: .7rem; }

@media (max-width: 860px) {
  .darc-track { grid-template-columns: 1fr; }
  .darc-col + .darc-col::before,
  .darc-col + .darc-col::after { display: none; }
}

/* ==========================================================================
   wpk — a worked work package: the four artefact kinds and the acceptance.
   ========================================================================== */

.wpk {
  max-width: 920px;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface-raised);
  overflow: hidden;
}
.wpk-label {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  padding: var(--s-2) var(--s-3);
  background: var(--mist);
  border-bottom: 1px solid var(--line);
}
.wpk-rows { list-style: none; margin: 0; padding: 0; }
.wpk-row {
  display: grid;
  grid-template-columns: 8.5rem 11rem 1fr;
  gap: var(--s-2);
  align-items: baseline;
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--line);
}
.wpk-kind { font-weight: 700; font-size: var(--t-body); color: var(--ink); }
.wpk-path {
  font-family: var(--mono);
  font-size: var(--t-small);
  color: var(--accent);
  overflow-wrap: anywhere;
}
.wpk-what { font-size: var(--t-small); color: var(--ink-soft); }
.wpk-accept {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: var(--s-2);
  align-items: baseline;
  padding: var(--s-3);
  background: var(--gold-tint);
  font-size: var(--t-small);
  color: var(--ink);
}
.wpk-accept code { font-family: var(--mono); font-size: .95em; }
.wpk-accept-tag {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold-700);
}
.wpk-note {
  font-size: var(--t-small);
  color: var(--ink-quiet);
  padding: var(--s-2) var(--s-3);
  border-top: 1px solid var(--line);
}

@media (max-width: 760px) {
  .wpk-row, .wpk-accept { grid-template-columns: 1fr; gap: .35rem; }
}

/* ==========================================================================
   rsp — division of responsibility. Two columns that stay two columns in
   meaning even when they stack: the headings carry it, not the layout.
   ========================================================================== */

.rsp { max-width: 980px; margin: 0 auto; display: grid; gap: var(--s-3); }
.rsp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.rsp-col {
  padding: var(--s-3);
  border-radius: var(--r-m);
  border: 1px solid var(--line);
  display: grid;
  gap: .8rem;
  align-content: start;
}
.rsp-ours { background: var(--surface-raised); }
.rsp-yours { background: var(--mist); border-color: var(--line-strong); }
.rsp-col-title { font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.rsp-col-note { font-size: var(--t-small); color: var(--ink-quiet); }
.rsp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.rsp-list li {
  font-size: var(--t-body);
  color: var(--ink);
  padding-left: 1.3rem;
  position: relative;
}
.rsp-ours .rsp-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--sky-500);
}
.rsp-yours .rsp-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--gold-400);
}
.rsp-foot {
  font-size: var(--t-small);
  color: var(--ink-quiet);
  max-width: 78ch;
}

@media (max-width: 760px) {
  .rsp-cols { grid-template-columns: 1fr; }
}