/* ============================================================================
   InfraEdge — concept animations.
   Every one of these must teach a visitor something they did not know before.
   If it only decorates, it does not belong in this file.
   ========================================================================= */

/* ==========================================================================
   1. GapCurve — the centrepiece.
   Two curves on a cost-and-effort axis: what production requires, and what a
   founder-managed account actually applies. The area between them is the gap.
   Scroll scrubs --p from 0 to 1; JS also sets data-stage 0..4.
   ========================================================================== */
/* Sticky panel sizes to the chart (not a forced 100vh void). The section
   track behind it carries a faded city atmosphere so leftover viewport
   under the drawing is not empty mist — and following sections stay below
   until the scrub finishes (no negative-margin overlap). */
.gap {
  position: relative;
  height: 140vh;
  background: var(--mist);
  overflow: clip;
}
.gap-atmos {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: min(62vh, 620px);
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.gap-atmos picture,
.gap-atmos img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}
.gap-atmos img { opacity: .55; }
.gap-atmos::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, var(--mist) 0%, color-mix(in srgb, var(--mist) 55%, transparent) 28%, transparent 58%),
    linear-gradient(to top, var(--mist) 0%, transparent 35%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .gap-atmos img { opacity: .4; }
}
:root[data-theme='dark'] .gap-atmos img { opacity: .4; }

.gap-sticky {
  position: sticky; top: 0;
  height: fit-content; max-height: 100vh;
  overflow: hidden;
  display: flex; align-items: flex-start;
  padding-top: calc(72px + clamp(.35rem, 1vh, .75rem));
  padding-bottom: clamp(.65rem, 1.8vh, 1.15rem);
  box-sizing: border-box;
  background: var(--mist);
  z-index: 2;
  isolation: isolate;
}
.gap-inner { width: 100%; }

.gap-head { margin-bottom: clamp(.35rem, 1vh, .7rem); }
.gap-head h2 {
  font-size: clamp(1.375rem, 2.3vw, 1.95rem);
  max-width: 34ch; margin: .55rem 0 0;
}

.gap-stage { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: clamp(1.25rem, 2.5vw, 2.5rem); align-items: start; }

/* Letterbox rather than overflow — the drawing always fits the viewport. */
.gap-svg { width: 100%; height: auto; max-height: 52vh; overflow: visible; }

/* Axis and framing */
.gap-axis { stroke: var(--line-strong); stroke-width: 1; }
.gap-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 5; }
.gap-axis-label {
  font-family: var(--font); font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase; fill: var(--slate-500);
}
.gap-y-title { font-size: 12px; letter-spacing: .14em; }
.gap-y-end { font-size: 11px; letter-spacing: .08em; fill: var(--slate-600); }
.gap-end-labels { font-family: var(--font); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.gap-end-demand { fill: var(--navy-900); }
.gap-end-provide { fill: var(--sky-700); }

/* The demand curve — what production needs from you. */
.gap-demand {
  fill: none; stroke: var(--navy-900); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 0));
}
/* What a founder-managed account provides, unaided. */
.gap-provide {
  fill: none; stroke: var(--sky-600); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 0));
}
/* The hire arriving — only drawn in the final stage. */
.gap-hire {
  fill: none; stroke: var(--sky-600); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 900ms var(--ease);
}
.gap[data-stage='4'] .gap-hire { stroke-dashoffset: 0; }

/* Reveal rect — SVG geometry properties are animatable from CSS. */
/* Scaled, not resized. Animating the rect's `width` is a geometry change, so
   every frame re-runs layout inside the clipPath; a transform on the same rect
   is handled by the compositor and produces the identical wipe. */
.gap-reveal-rect { width: 1000px; transform: scaleX(var(--p, 0)); transform-origin: left center; }

/* The void: hatched, dashed, unmistakably a hole. */
.gap-void { fill: url(#gapHatch); stroke: var(--slate-500); stroke-width: 1.5; stroke-dasharray: 6 5; opacity: 0; transition: opacity 500ms var(--ease); }
.gap[data-stage='1'] .gap-void { opacity: .55; }
.gap[data-stage='2'] .gap-void { opacity: 1; }
.gap[data-stage='3'] .gap-void,
.gap[data-stage='4'] .gap-void { opacity: 0; }

/* InfraEdge filling it. Gold as a SURFACE, with navy type on top — 9.29:1. */
.gap-fill { fill: var(--gold-400); opacity: 0; transition: opacity 600ms var(--ease); }
.gap[data-stage='3'] .gap-fill { opacity: 1; }
.gap[data-stage='4'] .gap-fill { opacity: .25; }

/* The thin ongoing cover line that remains after a hire lands. */
.gap-cover { fill: none; stroke: var(--gold-400); stroke-width: 5; stroke-linecap: round; opacity: 0; transition: opacity 500ms var(--ease); }
.gap[data-stage='4'] .gap-cover { opacity: 1; }

.gap-marker circle { fill: var(--white); stroke: var(--navy-900); stroke-width: 2.5; transition: stroke 300ms var(--ease), fill 300ms var(--ease); }
.gap-marker text { font-family: var(--font); font-size: 12px; letter-spacing: .08em; fill: var(--slate-500); text-transform: uppercase; }
.gap-marker { opacity: 0; transition: opacity 400ms var(--ease); }
.gap-marker.is-on { opacity: 1; }
.gap-marker.is-now circle { stroke: var(--gold-400); fill: var(--navy-900); }
.gap-marker.is-now text { fill: var(--navy-900); }

.gap-annot { font-size: 15.5px; fill: var(--navy-900); font-weight: 600; opacity: 0; transition: opacity 450ms var(--ease); }
.gap-annot.is-on { opacity: 1; }

/* Step list beside the drawing */
.gap-steps { display: grid; gap: .55rem; }
.gap-step {
  display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start;
  padding: .7rem .85rem; border-radius: var(--r-s);
  border: 1px solid transparent;
  transition: background 300ms ease, border-color 300ms ease, color 300ms ease;
}
.gap-step:not(.is-on):hover {
  border-color: var(--hover-border); background: var(--mist);
}
.gap-step:not(.is-on):hover strong { color: var(--hover-ink); }
.gap-step b { font-family: var(--font); font-size: var(--t-micro); letter-spacing: .1em; color: var(--slate-500); }
.gap-step strong { display: block; font-size: var(--t-body); }
/* Only the live step carries its explanation — five open at once will not fit. */
.gap-step p {
  font-size: var(--t-small); margin: 0; color: var(--ink-soft);
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height 340ms var(--ease), opacity 240ms ease, margin 340ms var(--ease);
}
.gap-step.is-on p { max-height: 10rem; opacity: 1; margin-top: .3rem; }
.gap-step.is-on { background: var(--white); border-color: var(--line); }
.gap-step.is-on b { color: var(--sky-700); }
.gap-step.is-done { border-left: 2px solid var(--gold-400); }
/* Inactive steps recede through colour that still clears AA, never through opacity. */
.gap-step:not(.is-on) strong { color: var(--ink-quiet); font-weight: 500; }
.gap-step:not(.is-on) b { color: var(--ink-quiet); }

.gap-live {
  margin-top: .45rem; font-size: var(--t-small); color: var(--ink-quiet);
  display: flex; align-items: center; gap: .6rem;
}

/*
  The legend. Hidden while the drawing can label itself, which it can only do
  when it is big enough for 13px of SVG type to survive being scaled down.
  Below that the labels are the drawing's job no longer — see .gap-key rules
  in the narrow-screen block.
*/
.gap-key {
  display: flex; flex-wrap: wrap; align-items: baseline;
  margin-top: .45rem; gap: .45rem 1.35rem;
  list-style: none; padding: 0;
}
.gap-key li {
  display: flex; align-items: baseline; gap: .5rem;
  font-size: var(--t-small); color: var(--ink-soft);
}
.gap-key li::before {
  content: ''; flex: 0 0 14px; width: 14px; height: 4px; border-radius: 2px; margin-top: .55em;
}
.gap-key b { color: var(--ink); font-weight: 600; }
.gap-key span { display: none; }
.gap-key-demand::before { background: var(--navy-900); }
.gap-key-provide::before { background: var(--sky-600); }
.gap-key-gap::before { background: var(--gold-400); border: 1px dashed var(--slate-500); }

/*
  Narrow screens.

  Scroll-scrubbing needs a sticky viewport-height stage, which a phone does
  not have to spare, so the whole thing collapses to a static picture plus
  the five steps. The picture then has to survive being drawn at about a
  third of its design size: at 390px wide, a 13px label in this viewBox
  lands at roughly 4px, and the stage-2 and stage-3 annotations sit at
  almost identical coordinates, so showing both at once produces two
  paragraphs of type printed on top of each other. Everything that only
  works at full size comes out, and .gap-key says it in real HTML instead.
*/
@media (max-width: 1000px) {
  .gap { height: auto; }
  .gap-atmos { display: none; }
  .gap-sticky { position: static; height: auto; padding-block: var(--section); }
  .gap-stage { grid-template-columns: 1fr; }
  .gap-svg { max-height: none; }

  .gap-demand, .gap-provide, .gap-hire { stroke-dashoffset: 0; }
  .gap-reveal-rect { width: 1000px; transform: none; }
  /* Heavier strokes: 3px of viewBox renders at about 1px on a phone. */
  .gap-demand, .gap-provide, .gap-hire { stroke-width: 7; }
  .gap-cover { stroke-width: 10; opacity: 1; }

  /* The gap as one unambiguous shape: gold interior, dashed edge. */
  .gap-void { opacity: 1; fill: none; stroke-width: 3; }
  .gap-fill { opacity: .34; }

  /* Anything that would be printed at 4px, or on top of something else. */
  .gap-annot, .gap-tools, .gap-marker, .gap-axis-label, .gap-end-labels, .gap-grid { display: none; }
  .gap-live { display: none; }        /* there is no scrubbing to narrate */

  .gap-key { display: grid; gap: .7rem; }
  .gap-key li { display: grid; grid-template-columns: 14px minmax(0, 1fr); column-gap: .7rem; align-items: start; }
  .gap-key li::before { height: 14px; margin-top: .28em; }
  .gap-key b, .gap-key span { grid-column: 2; display: block; }
  .gap-steps { margin-top: var(--s-3); }
  .gap-step { background: var(--white); border-color: var(--line); }
  .gap-step p { max-height: none; opacity: 1; margin-top: .3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .gap { height: auto; }
  .gap-sticky { position: static; height: auto; padding-block: var(--section); }
  .gap-demand, .gap-provide, .gap-hire { stroke-dashoffset: 0; }
  .gap-reveal-rect { width: 1000px; transform: none; }
  .gap-void { opacity: 0; }
  .gap-fill { opacity: .25; }
  .gap-cover, .gap-marker, .gap-annot { opacity: 1; }
  /*
    The end state is stage 3 onwards, so only its annotations belong here.
    The stage-2 set sits within six pixels of the stage-3 set — revealing
    both at once prints two paragraphs on top of each other.
  */
  .gap-annot[data-annot-at='2'] { display: none; }
  .gap-step { background: var(--white); border-color: var(--line); }
  .gap-step p { max-height: none; opacity: 1; margin-top: .3rem; }
}

/* ==========================================================================
   2. CostOfWaiting — the same fix, done early vs done under a deadline.
   Paired bars with the real numbers printed on the marks.
   ========================================================================== */
.cow { display: grid; gap: var(--s-3); }
.cow-row { display: grid; grid-template-columns: 190px 1fr; gap: var(--s-3); align-items: center; }
.cow-label { font-size: var(--t-small); font-weight: 600; }
.cow-label span { display: block; font-weight: 400; color: var(--ink-quiet); font-size: var(--t-micro); }
.cow-bars { display: grid; gap: .45rem; }
.cow-bar { display: grid; grid-template-columns: 1fr auto; gap: .75rem; align-items: center; }
.cow-track { height: 22px; background: var(--white); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.cow-val {
  display: block; height: 100%; width: 0; border-radius: 3px;
  transition: width 900ms var(--ease); transition-delay: calc(var(--i, 0) * 110ms);
}
.cow.is-drawn .cow-val { width: calc(var(--w) * 1%); }
.cow-early .cow-val { background: var(--sky-600); }
.cow-late .cow-val { background: var(--navy-900); }
.cow-num { font-family: var(--font); font-size: var(--t-small); font-weight: 600; min-width: 4.5rem; text-align: right; }
.cow-key { display: flex; gap: var(--s-3); font-size: var(--t-small); }
.cow-key i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: .4rem; vertical-align: -1px; }
@media (max-width: 700px) { .cow-row { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .cow-val { width: calc(var(--w) * 1%); transition: none; } }

/* ==========================================================================
   3 & 4. Schematics — AccountTopology and DeliveryPipeline.
   Self-drawing engineering line art. Strokes carry pathLength="1".
   ========================================================================== */
.schematic { width: 100%; height: auto; overflow: visible; }

/*
  Below about 900px a 1000-unit viewBox is drawn at roughly a third scale, and
  every label in it goes with it — a 13px caption lands at 4px, which is not
  small, it is gone. Rather than strip the labels from every schematic, the
  drawing keeps a legible floor and its container pans, the same bargain
  .table-wrap already makes for a wide table. Above that width nothing changes.

  :has() picks up the container without needing a wrapper element added at
  twenty call sites; where it is unsupported the drawing simply shrinks as it
  did before, which is the current behaviour rather than a broken one.
*/
@media (max-width: 900px) {
  :has(> .schematic) {
    overflow-x: auto; overscroll-behavior-x: contain;
    /* The pan is deliberate, but it was silent: nothing told a phone reader
       there was more drawing to the right. A thin permanent scrollbar is the
       smallest honest affordance — it says "this moves" without a caption on
       twenty diagrams or a gradient that has to know the section's ground. */
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
    padding-bottom: .35rem;
  }
  :has(> .schematic)::-webkit-scrollbar { height: 6px; }
  :has(> .schematic)::-webkit-scrollbar-thumb {
    background: var(--line-strong); border-radius: 999px;
  }
  :has(> .schematic)::-webkit-scrollbar-track { background: transparent; }

  .schematic { min-width: 620px; }

  /* js/motion.js adds tabindex and a name to a container that actually pans,
     so it needs a focus ring of its own — the drawing inside cannot show one. */
  :has(> .schematic).is-pannable:focus-visible {
    outline: 2px solid var(--sky-700);
    outline-offset: 3px;
    border-radius: var(--r-s);
  }
}
.schematic .s-line { fill: none; stroke: var(--navy-900); stroke-width: 1.6; }
.schematic .s-box { fill: var(--white); stroke: var(--navy-900); stroke-width: 1.6; }
.schematic .s-box-mist { fill: var(--mist); stroke: var(--line-strong); stroke-width: 1.4; stroke-dasharray: 5 4; }
.schematic .s-label { font-size: 15px; font-weight: 600; fill: var(--navy-900); }
.schematic .s-sub { font-family: var(--font); font-size: 11.5px; letter-spacing: .01em; fill: var(--slate-500); text-transform: uppercase; }
/* Pillar cards only — the one-line mono captions were wider than the 145px box. */
.schematic .rp-sub { font-size: 10.5px; letter-spacing: .05em; }
/* Pipeline stage boxes — captions must stay inside the 150px-wide boxes. */
.schematic .pipe-label { font-size: 14px; }
.schematic .pipe-sub { font-size: 10.5px; letter-spacing: .04em; }
.schematic .s-gold { stroke: var(--gold-400); stroke-width: 3; fill: none; }
.schematic .s-gate { fill: var(--gold-400); stroke: var(--navy-900); stroke-width: 1.6; }
.schematic .s-arrow { fill: var(--navy-900); }

/* The human gate, drawn as a P&ID valve. Normally closed. */
.s-gate-label { font-family: var(--font); font-size: 12.5px; letter-spacing: .1em; fill: var(--navy-900); font-weight: 600; }

/* ==========================================================================
   5. EvidenceChain — evidence → finding → remediation → approval.
   ========================================================================== */
.ec { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--white); overflow: hidden; }
.ec-stage { display: grid; grid-template-columns: 118px 1fr; gap: var(--s-2); padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); position: relative; transition: background var(--dur-fast) ease; }
.ec-stage:last-child { border-bottom: 0; }
.ec-stage:hover { background: var(--mist); }
.ec-key { font-family: var(--font); font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--sky-700); font-weight: 600; }
.ec-body strong { display: block; font-size: var(--t-body); margin-bottom: .2rem; }
.ec-body .mono { display: block; color: var(--ink-quiet); }
/* The connector between stages draws downward as the block comes into view. */
.ec-stage::after {
  content: ''; position: absolute; left: calc(var(--s-3) + 40px); bottom: -1px; width: 2px; height: 0;
  background: var(--sky-500); transition: height 400ms var(--ease); transition-delay: calc(var(--i, 0) * 220ms);
}
.ec.is-drawn .ec-stage::after { height: 12px; }
.ec-stage:last-child::after { display: none; }
@media (max-width: 620px) { .ec-stage { grid-template-columns: 1fr; gap: .3rem; } .ec-stage::after { display: none; } }

/* ==========================================================================
   6. CompletenessMatrix — eight domains; one lands PARTIAL, and says why.
   ========================================================================== */
.matrix td .fill { display: inline-block; width: 54px; height: 6px; background: var(--line); border-radius: 3px; margin-right: .6rem; vertical-align: 1px; overflow: hidden; }
.matrix td .fill i { display: block; height: 100%; width: 0; background: var(--sky-600); transition: width 620ms var(--ease); transition-delay: calc(var(--i, 0) * 130ms); }
.matrix.is-drawn td .fill i { width: 100%; }
.matrix tr.is-partial { background: var(--gold-tint); }
.matrix tr.is-partial td { border-color: var(--gold-400); }
.matrix tr.is-partial .fill i { background: var(--gold-600); width: 0; }
.matrix.is-drawn tr.is-partial .fill i { width: 55%; }
.matrix tr.is-partial td:last-child { font-weight: 600; color: var(--navy-900); }
@media (prefers-reduced-motion: reduce) { .matrix td .fill i { width: 100%; transition: none; } .matrix tr.is-partial .fill i { width: 55%; } }

/* ==========================================================================
   6b. AssessmentCoverage — how-it-works worked example (non-table).
   ========================================================================== */
.acov-block { max-width: 52rem; }
.acov-emphasis {
  margin: -.35rem 0 1.5rem;
  font-size: var(--t-small);
  font-weight: 650;
  letter-spacing: -.01em;
  color: var(--ink);
  max-width: 42ch;
}
.acov { display: grid; gap: var(--s-4); }

.acov-summary {
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--mist);
  padding: 1.15rem 1.2rem 1.2rem;
  display: grid;
  gap: .85rem;
}
.acov-summary-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1.25rem;
}
.acov-summary-title {
  margin: 0;
  font-size: var(--t-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sky-700);
  font-weight: 600;
}
.acov-summary-count {
  margin: 0;
  font-size: var(--t-small);
  color: var(--ink-soft);
}
.acov-summary-count strong {
  color: var(--ink);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.acov-metrics {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
}
.acov-metrics li {
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--white);
  padding: .7rem .85rem;
  display: grid;
  gap: .15rem;
}
.acov-metrics strong {
  font-size: var(--t-lead);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  letter-spacing: -.02em;
}
.acov-metrics span {
  font-family: var(--font);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}
.acov-metrics .is-complete strong { color: var(--sky-700); }
.acov-metrics .is-partial strong { color: var(--gold-700); }

.acov-bar { display: grid; gap: .45rem; }
.acov-bar-track {
  display: flex;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--line-strong) 55%, var(--mist));
}
.acov-bar-seg { display: block; height: 100%; min-width: 0; }
.acov-bar-seg.is-complete { background: var(--sky-600); }
.acov-bar-seg.is-partial { background: var(--gold-400); }
.acov-bar-seg.is-none { background: color-mix(in srgb, var(--slate-500) 55%, var(--line)); }
.acov-bar-label {
  margin: 0;
  font-size: var(--t-micro);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}

.acov-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .35rem;
}
.acov-legend li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .55rem;
  align-items: start;
  font-size: var(--t-micro);
  color: var(--ink-quiet);
  line-height: 1.45;
}
.acov-legend strong { color: var(--ink-soft); font-weight: 650; }
.acov-swatch {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  margin-top: .35em;
  background: var(--line-strong);
}
.acov-swatch.is-complete { background: var(--sky-600); }
.acov-swatch.is-partial { background: var(--gold-400); }
.acov-swatch.is-none { background: var(--slate-500); }
.acov-distinction { margin: 0; max-width: 58ch; }

.acov-list { display: grid; gap: 1.15rem; }
.acov-group-label {
  margin: 0 0 .55rem;
  font-size: var(--t-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sky-700);
  font-weight: 600;
}
.acov-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--white);
  overflow: hidden;
}
.acov-row {
  display: grid;
  grid-template-columns: minmax(7.5rem, 11rem) auto 1fr;
  gap: .75rem 1rem;
  align-items: baseline;
  padding: .72rem 1rem;
  border-bottom: 1px solid var(--line);
}
.acov-row:last-child { border-bottom: 0; }
.acov-domain {
  font-size: var(--t-small);
  font-weight: 650;
  color: var(--ink);
  letter-spacing: -.01em;
}
.acov-detail {
  font-size: var(--t-micro);
  color: var(--ink-quiet);
  line-height: 1.4;
}

.acov-status {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-family: var(--font);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-quiet);
  white-space: nowrap;
}
.acov-status i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}
.acov-status.is-complete {
  color: var(--sky-700);
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
}
.acov-status.is-partial {
  color: var(--gold-700);
  padding: .15rem .45rem;
  border: 1px solid color-mix(in srgb, var(--gold-400) 55%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold-400) 12%, transparent);
}
.acov-status.is-none {
  color: var(--slate-500);
  padding: .15rem .45rem;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.acov-exception-label {
  margin: 0 0 .55rem;
  font-size: var(--t-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-700);
  font-weight: 600;
}
.acov-exception-panel {
  border: 1px solid color-mix(in srgb, var(--gold-400) 55%, var(--line));
  border-left: 3px solid var(--gold-400);
  border-radius: var(--r-m);
  background: color-mix(in srgb, var(--gold-400) 8%, var(--white));
  padding: 1.15rem 1.2rem 1.2rem;
  display: grid;
  gap: .55rem;
}
.acov-exception-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem .85rem;
  margin-bottom: .15rem;
}
.acov-exception-title {
  margin: 0;
  font-size: var(--t-lead);
  font-weight: 650;
  color: var(--ink);
  letter-spacing: -.015em;
}
.acov-exception-stat {
  margin: 0;
  font-size: var(--t-small);
  color: var(--ink);
}
.acov-exception-reason-label,
.acov-exception-impact-label {
  margin: .35rem 0 0;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  font-weight: 600;
}
.acov-exception-perm {
  margin: 0;
  font-size: var(--t-small);
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}
.acov-exception-perm code {
  font-family: var(--mono);
  font-size: .92em;
  color: var(--ink);
}
.acov-exception-copy {
  margin: 0;
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: 1.45;
  max-width: 62ch;
}

.acov-principle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
.acov-principle-good,
.acov-principle-bad {
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  padding: .85rem 1rem;
  background: var(--white);
}
.acov-principle-good { border-color: color-mix(in srgb, var(--sky-600) 30%, var(--line)); }
.acov-principle-bad { opacity: .92; }
.acov-principle-kicker {
  margin: 0 0 .35rem;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sky-700);
}
.acov-principle-bad .acov-principle-kicker { color: var(--slate-500); }
.acov-principle p:last-child {
  margin: 0;
  font-size: var(--t-micro);
  color: var(--ink-soft);
  line-height: 1.45;
}
.acov-principle .acov-status {
  vertical-align: baseline;
  transform: translateY(-1px);
}

.acov-foot { margin: 0; max-width: 64ch; }

@media (max-width: 760px) {
  .acov-metrics { grid-template-columns: 1fr 1fr; }
  .acov-metrics .is-none { grid-column: 1 / -1; }
  .acov-row {
    grid-template-columns: 1fr auto;
    gap: .35rem .75rem;
  }
  .acov-detail {
    grid-column: 1 / -1;
  }
  .acov-principle { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .acov-metrics { grid-template-columns: 1fr; }
  .acov-metrics .is-none { grid-column: auto; }
}

/* ==========================================================================
   7. CrossAccountAccess — one-way, minimal, and revocable by you.
   ========================================================================== */
.cax { border: 1px solid var(--line); border-radius: var(--r-m); background: var(--white); padding: var(--s-3); }
.cax-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: .75rem; align-items: center; margin-bottom: var(--s-3); }
.cax-node {
  border: 1px solid var(--line); border-radius: var(--r-s); padding: .8rem; text-align: center;
  transition: opacity 400ms ease, border-color var(--dur-fast) ease, background var(--dur-fast) ease;
}
.cax-node:hover { border-color: var(--hover-border); background: var(--mist); }
.cax-node strong { display: block; font-size: var(--t-small); }
.cax-node span { font-size: var(--t-micro); color: var(--ink-quiet); }
.cax-link { position: relative; height: 2px; background: var(--line-strong); min-width: 60px; transition: background 400ms ease; }
.cax-link::after { content: '▶'; position: absolute; right: -4px; top: -8px; font-size: 11px; color: var(--sky-600); transition: color 400ms ease; }
.cax-dot { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 999px; background: var(--sky-500); }
.cax:not(.is-revoked) .cax-dot { animation: caxRun 2.6s linear infinite; }
@keyframes caxRun { from { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } to { left: 100%; opacity: 0; } }
.cax.is-revoked .cax-node { opacity: .4; border-color: var(--line); }
.cax.is-revoked .cax-link { background: var(--line); }
.cax.is-revoked .cax-link::after { color: var(--line-strong); }
.cax.is-revoked .cax-dot { display: none; }
.cax-status { font-family: var(--font); font-size: var(--t-small); color: var(--ink-soft); }
.cax.is-revoked .cax-status { color: var(--navy-900); font-weight: 600; }
.cax-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
@media (max-width: 760px) { .cax-flow { grid-template-columns: 1fr; } .cax-link { min-width: 0; width: 2px; height: 34px; margin-inline: auto; } .cax-link::after { transform: rotate(90deg); right: -5px; top: auto; bottom: -6px; } }
@media (prefers-reduced-motion: reduce) { .cax-dot { animation: none !important; left: 50%; } }

/* ==========================================================================
   7b. AccessBoundary — how-it-works trust model (non-interactive).
   ========================================================================== */
.ab { display: grid; gap: var(--s-4); }
.ab-strip {
  display: flex; flex-wrap: wrap; gap: .55rem .9rem;
  list-style: none; margin: 0; padding: 0;
  font-family: var(--font); font-size: var(--t-micro);
  letter-spacing: .08em; text-transform: uppercase; color: var(--sky-700);
}
.ab-strip li {
  display: inline-flex; align-items: center; gap: .9rem;
}
.ab-strip li:not(:last-child)::after {
  content: '·'; color: var(--ink-quiet); letter-spacing: 0; font-weight: 400;
  margin-left: .15rem;
}

.ab-diagram {
  margin: 0;
  display: grid;
  gap: var(--s-2);
  justify-items: center;
}
.ab-out {
  display: grid;
  gap: .65rem;
  justify-items: center;
  width: min(100%, 28rem);
}
.ab-principal {
  width: 100%;
  text-align: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-m);
  background: var(--white);
  padding: 1rem 1.15rem 1.1rem;
}
.ab-eyebrow {
  display: block;
  font-family: var(--font);
  font-size: var(--t-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-700);
  font-weight: 600;
  margin-bottom: .35rem;
}
.ab-principal-title {
  margin: 0;
  font-size: var(--t-lead);
  font-weight: 650;
  color: var(--ink);
  letter-spacing: -.01em;
}
.ab-principal-meta {
  margin: .35rem 0 0;
  font-size: var(--t-micro);
  color: var(--ink-quiet);
  letter-spacing: .04em;
}

.ab-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  color: var(--sky-600);
}
.ab-arrow span {
  display: block;
  width: 1.5px;
  height: 1.55rem;
  background: currentColor;
  position: relative;
}
.ab-arrow span::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateX(-50%) rotate(45deg);
}
.ab-arrow-in { color: var(--slate-500); }

.ab-boundary {
  width: 100%;
  max-width: 42rem;
  border: 1.5px dashed color-mix(in srgb, var(--sky-600) 55%, var(--line-strong));
  border-radius: var(--r-m);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sky-700) 6%, var(--white)) 0%, var(--white) 42%);
  padding: 1.15rem 1.25rem 1.3rem;
  display: grid;
  gap: .85rem;
  justify-items: center;
}
.ab-boundary-label {
  margin: 0;
  justify-self: start;
  font-size: var(--t-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sky-700);
  font-weight: 600;
}
.ab-role {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .85rem;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--mist);
  padding: .9rem 1rem;
}
.ab-role-mark {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--r-s);
  border: 1px solid var(--line);
  background: var(--white);
}
.ab-role-title {
  margin: 0 0 .4rem;
  font-size: var(--t-small);
  font-weight: 650;
  color: var(--ink);
}
.ab-role-points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .25rem;
}
.ab-role-points li {
  position: relative;
  padding-left: 1.05rem;
  font-size: var(--t-micro);
  color: var(--ink-soft);
}
.ab-role-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .45em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--sky-600);
}

.ab-config {
  width: 100%;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  padding: .85rem 1rem;
  background: var(--white);
}
.ab-config-title {
  margin: 0;
  font-size: var(--t-small);
  font-weight: 650;
  color: var(--ink);
}
.ab-config-meta {
  margin: .3rem 0 0;
  font-size: var(--t-micro);
  color: var(--ink-quiet);
  max-width: 36ch;
  margin-inline: auto;
}

.ab-guarantees {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  overflow: hidden;
  background: var(--line);
}
.ab-g {
  background: var(--white);
  padding: 1rem 1.05rem 1.1rem;
  display: grid;
  gap: .35rem;
  align-content: start;
}
.ab-g-kicker {
  font-family: var(--font);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sky-700);
  font-weight: 600;
}
.ab-g strong {
  font-size: var(--t-small);
  font-weight: 650;
  color: var(--ink);
  letter-spacing: -.01em;
}
.ab-g p {
  margin: 0;
  font-size: var(--t-micro);
  color: var(--ink-quiet);
  line-height: 1.45;
}

.ab-control {
  margin: 0;
  padding: .85rem 1rem;
  border-left: 2px solid var(--gold-400);
  background: color-mix(in srgb, var(--gold-400) 8%, var(--white));
  border-radius: 0 var(--r-s) var(--r-s) 0;
  font-size: var(--t-small);
  color: var(--ink-soft);
  max-width: 68ch;
}
.ab-control strong {
  color: var(--ink);
  font-weight: 650;
  margin-right: .25rem;
}

.ab-matrix {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
.ab-col {
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--white);
  padding: 1.15rem 1.2rem 1.25rem;
}
.ab-col-label {
  margin: 0 0 .35rem;
  font-size: var(--t-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sky-700);
  font-weight: 600;
}
.ab-col-out .ab-col-label { color: var(--slate-500); }
.ab-col-title {
  margin: 0 0 .9rem;
  font-size: var(--t-lead);
  font-weight: 650;
  color: var(--ink);
  letter-spacing: -.015em;
}
.ab-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .5rem;
}
.ab-col li {
  position: relative;
  padding-left: 1.15rem;
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: 1.4;
}
.ab-col-in li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55em;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--sky-600);
}
.ab-col-out li::before {
  content: '';
  position: absolute;
  left: 1px;
  top: .72em;
  width: 8px;
  height: 1.5px;
  background: var(--slate-500);
}
.ab-col-note {
  margin: 1rem 0 0;
  font-size: var(--t-micro);
  color: var(--ink-quiet);
  line-height: 1.45;
}

.ab-repo { margin: 0; max-width: 62ch; }

.ab-tech {
  border-top: 1px solid var(--line);
  padding-top: .35rem;
}
.ab-tech summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font);
  font-size: var(--t-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sky-700);
  font-weight: 600;
  padding: .55rem 0;
  width: fit-content;
}
.ab-tech summary::-webkit-details-marker { display: none; }
.ab-tech summary::after {
  content: '+';
  margin-left: .45rem;
  font-weight: 500;
  color: var(--ink-quiet);
}
.ab-tech[open] summary::after { content: '−'; }
.ab-tech summary:focus-visible {
  outline: 2px solid var(--sky-600);
  outline-offset: 3px;
  border-radius: 2px;
}
.ab-tech-body {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-3);
  padding: .85rem 0 0.25rem;
}
.ab-tech-body h4 {
  margin: 0 0 .5rem;
  font-family: var(--font);
  font-size: var(--t-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 650;
}
.ab-tech-body ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .35rem;
}
.ab-tech-body li {
  font-size: var(--t-micro);
  color: var(--ink-quiet);
  padding-left: .85rem;
  position: relative;
  line-height: 1.4;
}
.ab-tech-body li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55em;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--line-strong);
}

@media (max-width: 960px) {
  .ab-guarantees { grid-template-columns: 1fr 1fr; }
  .ab-tech-body { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .ab-matrix { grid-template-columns: 1fr; }
  .ab-guarantees { grid-template-columns: 1fr; }
  .ab-tech-body { grid-template-columns: 1fr; }
  .ab-role { grid-template-columns: 1fr; }
  .ab-strip li:not(:last-child)::after { display: none; }
  .ab-strip { flex-direction: column; gap: .4rem; }
  .ab-strip li {
    border: 1px solid var(--line);
    border-radius: var(--r-s);
    padding: .45rem .65rem;
    width: fit-content;
    background: var(--white);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ab-tech summary { transition: none; }
}

/* ==========================================================================
   8. ApprovalBinding — the approval is bound to the plan hash.
   ========================================================================== */
.apb { border: 1px solid var(--line); border-radius: var(--r-m); background: var(--white); padding: var(--s-3); }
.apb-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); margin-bottom: var(--s-3); }
.apb-box {
  border: 1px solid var(--line); border-radius: var(--r-s); padding: .9rem;
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease;
}
.apb-box:hover { border-color: var(--hover-border); }
.apb-box .mono { color: var(--ink-quiet); }
.apb.is-void .apb-box:nth-child(3) { border-color: var(--gold-600); background: var(--gold-tint); }
.apb-result { border-top: 1px solid var(--line); padding-top: var(--s-2); font-size: var(--t-small); }
.apb-void-label {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--gold-400); color: var(--ink-on-gold);
  font-weight: 700; padding: .4rem .8rem; border-radius: var(--r-s);
}
.apb-void-label strong, .apb-void-label b { color: inherit; }
@media (max-width: 700px) { .apb-flow { grid-template-columns: 1fr; } }

/* ==========================================================================
   9. EngagementLadder — diagnose → fix → baseline → cover. No prices.
   ========================================================================== */
.ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); align-items: end; }
.ladder-step {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-m);
  padding: var(--s-3); display: grid; gap: .4rem; align-content: start;
  transform: translateY(0); transition: transform var(--dur) var(--ease), border-color var(--dur-fast) ease;
}
/* Each rung sits a little higher than the last — the ladder is the point. */
.ladder.is-drawn .ladder-step:nth-child(1) { transform: translateY(0); }
.ladder.is-drawn .ladder-step:nth-child(2) { transform: translateY(-14px); }
.ladder.is-drawn .ladder-step:nth-child(3) { transform: translateY(-28px); }
.ladder.is-drawn .ladder-step:nth-child(4) { transform: translateY(-42px); }
.ladder-step:hover, .ladder-step:focus-within { border-color: var(--hover-border); }
.ladder-step .outcome {
  font-size: var(--t-small); color: var(--navy-900); font-weight: 600;
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 300ms var(--ease), opacity 300ms ease;
}
.ladder-step:hover .outcome, .ladder-step:focus-within .outcome { max-height: 7rem; opacity: 1; }
@media (max-width: 900px) {
  .ladder { grid-template-columns: 1fr; }
  .ladder.is-drawn .ladder-step { transform: none; }
  .ladder-step .outcome { max-height: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ladder.is-drawn .ladder-step { transform: none; }
  .ladder-step .outcome { max-height: none; opacity: 1; }
}

/* ==========================================================================
   10. HandoverPack — what you keep when we leave.
   ========================================================================== */
/*
  Two panels making the same argument twice: a repository tree, and that
  repository's history. Drawn rather than listed, because "you keep the
  work" is a claim, and a git log is evidence of it.

  Content lives in PACK_TREE and PACK_LOG in partials/chrome.js.
*/
.pack { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); align-items: start; }
.pack-panel {
  border: 1px solid var(--line); border-radius: var(--r-m); background: var(--white);
  overflow: hidden;
  transition: border-color var(--dur-fast) ease;
}
.pack-panel:hover { border-color: var(--hover-border); }
.pack-head {
  display: flex; flex-wrap: wrap; gap: .5rem var(--s-2); align-items: center; justify-content: space-between;
  padding: .75rem var(--s-2); border-bottom: 1px solid var(--line); background: var(--mist);
}
.pack-title { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--t-small); font-weight: 600; }
.pack-tag { font-family: var(--font); font-size: var(--t-micro); color: var(--ink-quiet); }
.pack-foot { font-size: var(--t-micro); color: var(--ink-quiet); padding: 0 var(--s-2) var(--s-2); max-width: none; }
.pack-foot code { font-family: var(--mono); background: var(--mist); padding: .05em .3em; border-radius: 3px; }

/* --- the tree --- */
.tree { padding: .6rem var(--s-2) var(--s-2); display: grid; }
/* A fixed first column so the notes line up; the indent lives on the name,
   not on the row, or every note would start at a different x. */
.tree-row {
  display: grid; grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr); gap: .25rem var(--s-2);
  align-items: baseline; padding: .3rem 0;
  font-size: var(--t-small);
  border-radius: 6px;
  transition: background var(--dur-fast) ease;
}
.pack .tree-row:hover, .pack .log-row:hover { background: var(--mist); }
.tree-name {
  display: inline-flex; align-items: center; gap: .45rem;
  padding-left: calc(var(--depth) * 1.15rem);
  font-family: var(--mono); font-size: var(--t-micro); color: var(--ink); font-weight: 500;
  white-space: nowrap;
}
.tree-name .pmark { flex: none; }
.tree-dir { width: 13px; height: 10px; border-radius: 2px 3px 3px 3px; background: var(--line-strong); flex: none; }
.tree-note { font-size: var(--t-micro); color: var(--ink-quiet); line-height: 1.35; }

/* --- the commit log --- */
.log { padding: .6rem var(--s-2) var(--s-2); display: grid; }
.log-row {
  display: grid; grid-template-columns: 14px auto minmax(0, 1fr); gap: .2rem .7rem;
  padding: .45rem 0; position: relative; font-size: var(--t-small);
  border-radius: 6px;
  transition: background var(--dur-fast) ease;
}
/* One continuous branch line behind the nodes. */
.log-row::before {
  content: ''; position: absolute; left: 6px; top: 0; bottom: 0; width: 2px; background: var(--line);
}
.log-row:first-child::before { top: .95rem; }
.log-row:last-child::before { bottom: calc(100% - .95rem); }
.log-node {
  width: 11px; height: 11px; border-radius: 999px; margin-top: .38rem;
  background: var(--white); border: 2px solid var(--sky-600); position: relative; z-index: 1;
}
.log-row.is-gold .log-node { border-color: var(--gold-400); background: var(--gold-400); }
.log-ref { color: var(--ink-quiet); font-size: var(--t-micro); }
.log-msg { color: var(--ink); }
.log-meta { grid-column: 3; font-size: var(--t-micro); color: var(--ink-quiet); }

/* Rows arrive in sequence, the way a log fills in. Gated on html.js so that
   without scripting the panels simply render, rather than staying invisible. */
html.js .tree-row, html.js .log-row {
  opacity: 0; transform: translateX(-8px);
  transition: opacity 360ms ease, transform 400ms var(--ease);
  transition-delay: calc(var(--i, 0) * 45ms);
}
html.js .pack.is-drawn .tree-row, html.js .pack.is-drawn .log-row { opacity: 1; transform: none; }
/*
  Rows arrive in sequence when the parent .pack gets .is-drawn from motion.js.
  Handover extras cards use the generic [data-reveal] .revealed hook instead.
*/

@media (max-width: 900px) {
  .pack { grid-template-columns: 1fr; }
  /* Stacked, so the indent moves to the row — otherwise the note under each
     name sits flush left and the tree stops looking like a tree. */
  .tree-row { grid-template-columns: 1fr; padding-left: calc(var(--depth) * .8rem); }
  .tree-name { padding-left: 0; }
  /* Everything except the node goes in column two. Without naming the message
     explicitly, auto-placement drops it into the 14px node column and the
     commit subject wraps one character per line. */
  .log-row { grid-template-columns: 14px minmax(0, 1fr); }
  .log-ref, .log-msg, .log-meta { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .tree-row, html.js .log-row { opacity: 1; transform: none; transition: none; }
}

/* Product marks sit on the gold midline; they only belong once the band is filled. */
.gap-tools { opacity: 0; pointer-events: none; transition: opacity 500ms var(--ease) 120ms; }
.gap[data-stage='3'] .gap-tools { opacity: 1; }
.gap[data-stage='4'] .gap-tools { opacity: .4; }
.gap-tool { opacity: 0; }
.gap[data-stage='3'] .gap-tool,
.gap[data-stage='4'] .gap-tool {
  opacity: 1;
  transition: opacity 420ms var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.gap-tool .plate { stroke: var(--navy-900); stroke-opacity: .12; }
@media (max-width: 1000px) { .gap-tools, .gap-tool { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .gap-tools, .gap-tool { opacity: 1; transition: none; } }

/* ==========================================================================
   11. The routing questionnaire and its report (/find-your-path)

   One question on screen at a time, then a contact gate, then the report.
   Nothing here introduces a colour, a shadow or a radius the rest of the site
   does not already use — a questionnaire that looks like a different website
   is how a page stops feeling like the company behind it.

   Touch targets: every option row, every control and the checkbox are at least
   44px tall, which is what the padding and min-height below are doing rather
   than decoration.
   ========================================================================== */
.quiz { border: 1px solid var(--line); border-radius: var(--r-l); background: var(--white); padding: var(--s-4); }
.quiz-head { margin-bottom: var(--s-4); }
/* The step label is the site's eyebrow, like every other small label above a
   heading. It used to be set in JetBrains Mono, which belongs on hashes, paths
   and diagram annotations — on a label it reads as machine output rather than
   as this company's typography. */
.quiz-step { margin: 0 0 .6rem; }
.quiz-progress { height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.quiz-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--sky-600), var(--gold-400)); transition: width 400ms var(--ease); }

.q { border: 0; padding: 0; margin: 0; min-width: 0; }
.q legend { display: block; width: 100%; padding: 0; }
/* "Question 3 of 7" is the same fact as the step label directly above it, so it
   is announced rather than printed: .visually-hidden keeps it in the legend for
   a screen reader and off the screen for everybody else. */
.q-text { display: block; font-size: var(--t-h3); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; outline: none; max-width: 30ch; }
.q-help { font-size: var(--t-small); color: var(--ink-quiet); margin: .75rem 0 1.25rem; max-width: 62ch; }
.q-note { margin: 1rem 0 0; border-left: 2px solid var(--gold-400); padding-left: .9rem; max-width: 62ch; }
.q-error {
  margin: .9rem 0 0; padding-left: .9rem; border-left: 2px solid var(--gold-600);
  font-size: var(--t-small); color: var(--ink); font-weight: 500;
}
.q-options[aria-invalid='true'] .q-option { border-color: var(--gold-600); }

.q-options { display: grid; gap: .5rem; }
.q-option {
  display: flex; align-items: flex-start; gap: .85rem;
  min-height: 44px; padding: .8rem 1rem;
  border: 1px solid var(--line); border-radius: var(--r-m);
  background: var(--white); cursor: pointer;
  font-size: var(--t-body); line-height: 1.45; color: var(--ink);
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease;
}
.q-option:hover { border-color: var(--hover-border); background: var(--mist); }
/* The radio itself is the accessible control; it is visually replaced by the
   tick, never removed from the accessibility tree. */
.q-option input[type='radio'] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.q-tick {
  width: 20px; height: 20px; flex: none; margin-top: 1px;
  border: 1.5px solid var(--line-strong); border-radius: 999px; background: var(--white);
  transition: border-color var(--dur-fast) ease, border-width var(--dur-fast) ease;
}
.q-option:has(input:checked), .q-option.is-picked { border-color: var(--sky-600); background: var(--sky-tint); }
.q-option:has(input:checked) .q-tick, .q-option.is-picked .q-tick { border: 6px solid var(--sky-700); }
.q-option:has(input:focus-visible) { outline: 2px solid var(--sky-700); outline-offset: 2px; }

.quiz-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.quiz-nav .btn, .quiz-nav .btn-ghost { min-height: 44px; }
.quiz-restart { margin-left: auto; }

/* ---- the contact gate ---------------------------------------------------- */
.path-gate {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  gap: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--line-strong); border-radius: var(--r-l);
  background: var(--white); padding: var(--s-4);
}
.path-gate h2 { margin: .6rem 0 .75rem; max-width: 20ch; }
.path-gate p { max-width: 52ch; }
.path-form .field { margin-bottom: var(--s-3); }
.path-form .field-error:empty { display: none; }
.path-form .field-error { color: var(--gold-600); margin-top: .35rem; }
.path-form input[aria-invalid='true'], .path-form textarea[aria-invalid='true'] { border-color: var(--gold-600); }
.check { display: flex; align-items: flex-start; gap: .7rem; min-height: 44px; padding: .5rem 0; font-size: var(--t-small); color: var(--ink-soft); cursor: pointer; }
.check input { width: 20px; height: 20px; flex: none; margin-top: .1rem; accent-color: var(--sky-700); }
.path-form-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin-top: var(--s-3); }
.path-form-actions .btn { min-height: 44px; }
.path-form [data-lead-status] { margin-top: .8rem; color: var(--ink-quiet); }
.path-form [data-lead-status].is-error { color: var(--ink); border-left: 2px solid var(--gold-600); padding-left: .75rem; }
.path-form.is-sending { opacity: .85; }
@media (max-width: 860px) { .path-gate { grid-template-columns: 1fr; } }

/* ---- the summary (the page's half of the result) -------------------------- */
/*
  Short by design. The report is the email; this names the recommendation, gives
  two pointers and says where the rest is. If this grows past a screen, the
  balance between the two has gone wrong.
*/
.summary {
  border: 1px solid var(--line); border-radius: var(--r-l);
  background: var(--white); padding: var(--s-4);
}
.summary-head { border-bottom: 1px solid var(--line); padding-bottom: var(--s-3); }
.summary-head h2 { margin: .5rem 0 .75rem; max-width: 26ch; outline: none; }
.summary-head .lead { max-width: 68ch; margin: 0; }

.summary-mail {
  margin: var(--s-3) 0; padding: var(--s-3);
  border: 1px solid var(--line); border-left: 2px solid var(--gold-400);
  border-radius: var(--r-m); background: var(--mist);
}
.summary-mail-title { margin: 0 0 .35rem; font-weight: 600; color: var(--ink); }
.summary-mail p:last-child { margin: 0; max-width: 68ch; }

.summary-pointers, .summary-section { margin-top: var(--s-3); }
.summary-pointers h3, .summary-section h3 { font-size: var(--t-h3); margin: 0 0 .75rem; }
.summary-section[data-summary-review] { border-left: 2px solid var(--gold-400); padding-left: 1rem; }
.summary-section p { max-width: 68ch; }
.summary .report-qualifier { margin-top: var(--s-4); }
.summary .report-cta { margin-top: var(--s-3); }

.report-reasons { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.report-reasons li {
  position: relative; padding-left: 1.4rem; max-width: 68ch;
  font-size: var(--t-body); color: var(--ink-soft); line-height: 1.55;
}
.report-reasons li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: .5rem; height: .5rem; border-radius: 999px; background: var(--sky-500);
}
.report-qualifier {
  border: 1px solid var(--line); border-radius: var(--r-m); background: var(--mist);
  padding: var(--s-3); font-size: var(--t-small); color: var(--ink-soft); max-width: 68ch; margin: 0;
}
.report-cta { margin-top: 0; }

.out-of-scope { border: 1px solid var(--line); border-radius: var(--r-l); background: var(--white); padding: var(--s-4); }
.out-of-scope h2 { margin: .5rem 0 .75rem; max-width: 24ch; outline: none; }
.out-of-scope p { max-width: 68ch; }

.path-notes { list-style: none; margin: 1.25rem 0 1rem; padding: 0; display: grid; gap: .45rem; }
.path-notes li { position: relative; padding-left: 1.2rem; font-size: var(--t-small); color: var(--ink-soft); }
.path-notes li::before { content: ''; position: absolute; left: 0; top: .6em; width: .4rem; height: .4rem; border-radius: 999px; background: var(--gold-400); }

/* ---- the homepage entry card ---- */
.quiz-cta { display: grid; grid-template-columns: 1fr auto; gap: var(--s-4); align-items: center; }
@media (max-width: 800px) { .quiz-cta { grid-template-columns: 1fr; } }
/* The header is sticky, so anything we scroll to needs to clear it. */
.q, .result, .quiz, .summary, .path-gate, .out-of-scope { scroll-margin-top: 96px; }

@media (prefers-reduced-motion: reduce) {
  .quiz-progress i { transition: none; }
}

/* ==========================================================================
   Security / procurement page
   ========================================================================== */
.sp-hero .lead { max-width: 68ch; }
.sp-strip {
  list-style: none; margin: 1.5rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .55rem .9rem;
  font-family: var(--font); font-size: var(--t-micro);
  letter-spacing: .08em; text-transform: uppercase; color: var(--sky-700);
}
.sp-strip li { display: inline-flex; align-items: center; gap: .85rem; }
.sp-strip li:not(:last-child)::after {
  content: '·'; color: var(--ink-quiet); letter-spacing: 0; margin-left: .1rem;
}
.sp-toc { margin-top: 1.5rem; }
.sp-toc ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .45rem .65rem;
}
.sp-toc a {
  display: inline-flex; align-items: center; gap: .4rem;
  text-decoration: none; color: var(--ink-soft);
  font-size: var(--t-micro); border: 1px solid var(--line);
  border-radius: 999px; padding: .35rem .7rem; background: var(--white);
}
.sp-toc a:hover { border-color: var(--hover-border); color: var(--ink); }
.sp-toc-n { font-family: var(--font); color: var(--sky-700); letter-spacing: .06em; }
#access, #data, #retention, #threat-model, #communication,
#automation, #subprocessors, #customer-hosted, #reporting, #this-site {
  scroll-margin-top: 96px;
}

.sp-note { margin-top: 1.1rem; max-width: 68ch; }
.sp-flow {
  margin: 1.5rem 0 0; display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(12rem, .85fr);
  gap: 1rem; align-items: stretch;
}
.sp-flow-main {
  display: grid; gap: .55rem; justify-items: center;
  border: 1px solid var(--line); border-radius: var(--r-m);
  background: var(--white); padding: 1.1rem 1.15rem;
}
.sp-node {
  width: 100%; text-align: center; border: 1px solid var(--line);
  border-radius: var(--r-s); padding: .75rem .9rem; background: var(--mist);
}
.sp-node.is-accent {
  border-color: color-mix(in srgb, var(--sky-600) 40%, var(--line));
  background: color-mix(in srgb, var(--sky-600) 8%, var(--white));
}
.sp-node strong { display: block; font-size: var(--t-small); color: var(--ink); }
.sp-node .mono { display: block; margin-top: .2rem; font-size: var(--t-micro); color: var(--ink-quiet); }
.sp-arrow {
  width: 1.5px; height: 1.2rem; background: var(--sky-600); position: relative;
}
.sp-arrow::after {
  content: ''; position: absolute; left: 50%; bottom: -1px;
  width: 7px; height: 7px; border-right: 1.5px solid var(--sky-600);
  border-bottom: 1.5px solid var(--sky-600); transform: translateX(-50%) rotate(45deg);
}
.sp-flow-exclude {
  border: 1.5px dashed var(--line-strong); border-radius: var(--r-m);
  padding: 1rem 1.05rem; background: color-mix(in srgb, var(--slate-500) 6%, var(--white));
}
.sp-flow-exclude-label {
  margin: 0 0 .55rem; font-size: var(--t-micro); letter-spacing: .1em;
  text-transform: uppercase; color: var(--slate-500); font-weight: 600;
}
.sp-flow-exclude ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.sp-flow-exclude li { font-size: var(--t-small); color: var(--ink-quiet); }

.sp-compare {
  margin-top: 1.25rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
.sp-compare-col {
  border: 1px solid var(--line); border-radius: var(--r-m);
  background: var(--white); padding: 1.1rem 1.15rem;
}
.sp-compare-label {
  margin: 0 0 .7rem; font-size: var(--t-micro); letter-spacing: .1em;
  text-transform: uppercase; color: var(--sky-700); font-weight: 600;
}
.sp-compare-col.is-out .sp-compare-label { color: var(--slate-500); }
.sp-compare-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.sp-compare-col li {
  position: relative; padding-left: 1.1rem;
  font-size: var(--t-small); color: var(--ink-soft); line-height: 1.4;
}
.sp-compare-col.is-in li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 7px; height: 7px; border-radius: 999px; background: var(--sky-600);
}
.sp-compare-col.is-out li::before {
  content: ''; position: absolute; left: 1px; top: .72em;
  width: 8px; height: 1.5px; background: var(--slate-500);
}

.sp-lifecycle {
  list-style: none; margin: 1.35rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem;
}
.sp-lifecycle li {
  border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--white); padding: .7rem .75rem; text-align: center;
  position: relative;
}
.sp-lifecycle li .mono {
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--sky-700);
}
.sp-lifecycle li:not(:last-child)::after {
  content: '→'; position: absolute; right: -.55rem; top: 50%;
  transform: translateY(-50%); color: var(--ink-quiet); font-size: 12px; z-index: 1;
}
.sp-ret-list {
  list-style: none; margin: 1.25rem 0 0; padding: 0;
  border: 1px solid var(--line); border-radius: var(--r-m);
  background: var(--white); overflow: hidden;
}
.sp-ret-row {
  display: grid; grid-template-columns: minmax(10rem, 1.1fr) minmax(8rem, .7fr) 1.3fr;
  gap: .75rem 1rem; padding: .9rem 1.05rem; border-bottom: 1px solid var(--line);
  align-items: start;
}
.sp-ret-row:last-child { border-bottom: 0; }
.sp-ret-row strong { display: block; font-size: var(--t-small); color: var(--ink); }
.sp-ret-row .mono { display: block; margin-top: .2rem; font-size: 10px; color: var(--ink-quiet); letter-spacing: .06em; text-transform: uppercase; }
.sp-ret-rule { font-size: var(--t-micro); color: var(--sky-700); font-weight: 600; }
.sp-ret-row p { margin: 0; font-size: var(--t-micro); color: var(--ink-quiet); line-height: 1.45; }
.sp-delete {
  margin-top: 1.15rem; border-left: 2px solid var(--gold-400);
  background: color-mix(in srgb, var(--gold-400) 8%, var(--white));
  border-radius: 0 var(--r-s) var(--r-s) 0; padding: .85rem 1rem; max-width: 64ch;
}
.sp-delete-label { margin: 0 0 .35rem; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-700); font-weight: 600; }
.sp-delete-flow { margin: 0 0 .35rem; font-size: var(--t-micro); color: var(--ink); letter-spacing: .04em; }

.sp-threats { list-style: none; margin: 1.35rem 0 0; padding: 0; display: grid; gap: .75rem; }
.sp-threat {
  display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 1px;
  border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; background: var(--line);
}
.sp-threat-h, .sp-threat-c { background: var(--white); padding: .9rem 1rem; }
.sp-threat-h .mono, .sp-threat-c .mono {
  display: block; margin-bottom: .35rem; font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--sky-700); font-weight: 600;
}
.sp-threat-c .mono { color: var(--ink-quiet); }
.sp-threat-h strong { font-size: var(--t-small); color: var(--ink); letter-spacing: -.01em; }
.sp-threat-c p { margin: 0; font-size: var(--t-micro); color: var(--ink-quiet); line-height: 1.45; }

.sp-pipeline {
  list-style: none; margin: 1.35rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem;
}
.sp-pipeline li {
  border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--white); padding: .85rem .9rem; position: relative;
}
.sp-pipeline li.is-gate {
  border-color: color-mix(in srgb, var(--gold-400) 55%, var(--line));
  background: color-mix(in srgb, var(--gold-400) 10%, var(--white));
}
.sp-pipeline .mono {
  display: block; margin-bottom: .3rem; font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-quiet);
}
.sp-pipeline strong { font-size: var(--t-small); color: var(--ink); }
.sp-pipeline li:not(:last-child)::after {
  content: '→'; position: absolute; right: -.45rem; top: 50%;
  transform: translateY(-50%); color: var(--ink-quiet); font-size: 12px;
}
.sp-points { list-style: none; margin: 1.15rem 0 0; padding: 0; display: grid; gap: .65rem; max-width: 68ch; }
.sp-points li { font-size: var(--t-small); color: var(--ink-soft); line-height: 1.45; }
.sp-points strong { color: var(--ink); }

.sp-boundary {
  margin-top: 1.35rem; display: grid;
  grid-template-columns: 1fr auto 1fr; gap: .85rem; align-items: stretch;
}
.sp-boundary-col {
  border: 1px solid var(--line); border-radius: var(--r-m);
  background: var(--white); padding: 1.1rem 1.15rem;
}
.sp-boundary-col.is-human {
  border-color: color-mix(in srgb, var(--gold-400) 45%, var(--line));
  background: color-mix(in srgb, var(--gold-400) 7%, var(--white));
}
.sp-boundary-label {
  margin: 0 0 .7rem; font-size: var(--t-micro); letter-spacing: .1em;
  text-transform: uppercase; color: var(--sky-700); font-weight: 600;
}
.sp-boundary-col.is-human .sp-boundary-label { color: var(--gold-700); }
.sp-boundary-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.sp-boundary-col li { font-size: var(--t-small); color: var(--ink-soft); padding-left: 1rem; position: relative; }
.sp-boundary-col li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 6px; height: 6px; border-radius: 999px; background: var(--sky-600);
}
.sp-boundary-col.is-human li::before { background: var(--gold-400); }
.sp-boundary-gate {
  display: grid; place-items: center; writing-mode: vertical-rl;
  transform: rotate(180deg); border: 1.5px dashed var(--gold-400);
  border-radius: var(--r-s); padding: .75rem .35rem;
  background: color-mix(in srgb, var(--gold-400) 10%, var(--white));
  min-width: 2.6rem;
}
.sp-boundary-gate .mono {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-700); font-weight: 600;
}


.sp-deploy {
  margin-top: 1.35rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
.sp-deploy-card {
  border: 1px solid var(--line); border-radius: var(--r-m);
  background: var(--white); padding: 1.1rem 1.15rem;
}
.sp-deploy-card.is-hosted {
  border-color: color-mix(in srgb, var(--gold-400) 50%, var(--line));
  background: color-mix(in srgb, var(--gold-400) 7%, var(--white));
}
.sp-deploy-label {
  margin: 0 0 .75rem; font-size: var(--t-micro); letter-spacing: .1em;
  text-transform: uppercase; color: var(--sky-700); font-weight: 600;
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
}
.sp-chip {
  display: inline-flex; font-size: 9px; letter-spacing: .08em;
  border: 1px solid color-mix(in srgb, var(--gold-400) 55%, var(--line));
  border-radius: 999px; padding: .15rem .45rem; color: var(--gold-700);
  background: color-mix(in srgb, var(--gold-400) 12%, transparent);
}
.sp-mini-flow {
  list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem;
  counter-reset: spflow;
}
.sp-mini-flow li {
  counter-increment: spflow; position: relative; padding-left: 1.6rem;
  font-size: var(--t-small); color: var(--ink-soft);
}
.sp-mini-flow li::before {
  content: counter(spflow, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-family: var(--font); font-size: 10px; letter-spacing: .06em;
  color: var(--sky-700); font-weight: 600;
}
.sp-points-grid {
  margin-top: 1.15rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
.sp-points-grid article {
  border: 1px solid var(--line); border-radius: var(--r-m);
  background: var(--white); padding: 1.1rem 1.15rem;
}
.sp-points-grid .h3 { margin-bottom: .45rem; }
.sp-points-grid p { margin: 0; font-size: var(--t-small); color: var(--ink-soft); }
.sp-mini-flow-inline {
  margin: 0 0 .5rem !important; font-size: var(--t-micro) !important;
  letter-spacing: .04em; color: var(--sky-700) !important;
}

.sp-meta {
  list-style: none; margin: 1rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .45rem .7rem;
}
.sp-meta li {
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-quiet); border: 1px solid var(--line);
  border-radius: 999px; padding: .3rem .65rem; background: var(--white);
}

.sp-proofs {
  list-style: none; margin: 1.35rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem;
}
.sp-proofs li {
  border: 1px solid var(--line); border-radius: var(--r-m);
  background: var(--white); padding: 1.05rem 1.1rem;
  font-size: var(--t-small); color: var(--ink-soft); line-height: 1.45;
}
.sp-proofs strong { display: block; margin-bottom: .35rem; color: var(--ink); font-size: var(--t-small); }

@media (max-width: 900px) {
  .sp-flow { grid-template-columns: 1fr; }
  .sp-lifecycle { grid-template-columns: 1fr 1fr; }
  .sp-lifecycle li:not(:last-child)::after { display: none; }
  .sp-ret-row { grid-template-columns: 1fr; gap: .35rem; }
  .sp-threat { grid-template-columns: 1fr; }
  .sp-pipeline { grid-template-columns: 1fr 1fr; }
  .sp-pipeline li:not(:last-child)::after { display: none; }
  .sp-boundary { grid-template-columns: 1fr; }
  .sp-boundary-gate {
    writing-mode: horizontal-tb; transform: none; min-width: 0;
    padding: .55rem .85rem; text-align: center;
  }
  .sp-deploy, .sp-points-grid, .sp-compare, .sp-proofs { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .sp-strip li:not(:last-child)::after { display: none; }
  .sp-strip { flex-direction: column; gap: .4rem; }
  .sp-strip li {
    border: 1px solid var(--line); border-radius: var(--r-s);
    padding: .4rem .65rem; width: fit-content; background: var(--white);
  }
  .sp-lifecycle, .sp-pipeline { grid-template-columns: 1fr; }
}

/* ==========================================================================
   How-it-works — start from where you are
   ========================================================================== */
.start-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  overflow: hidden;
  background: var(--line);
}
.start-card {
  background: var(--white);
  padding: 1.15rem 1.2rem 1.25rem;
  display: grid;
  gap: .45rem;
  align-content: start;
}
.start-card .card-num { margin-bottom: .15rem; }
.start-card-kicker {
  margin: 0;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sky-700);
  font-weight: 600;
}
.start-card .h3 { margin: 0; font-size: var(--t-lead); }
.start-card p { margin: 0; font-size: var(--t-small); color: var(--ink-soft); line-height: 1.45; }
.start-card-meta {
  margin-top: .35rem !important;
  font-size: 10px !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-quiet) !important;
  line-height: 1.5 !important;
}
.start-converge {
  margin-top: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--mist);
  padding: .95rem 1.15rem;
  text-align: center;
}
.start-converge-label {
  margin: 0 0 .4rem;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sky-700);
  font-weight: 600;
}
.start-converge-line {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .35rem .65rem;
  font-family: var(--font);
  font-size: var(--t-micro);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.start-converge-end {
  margin: .55rem 0 0;
  font-size: var(--t-small);
  color: var(--ink);
  font-weight: 600;
}
.start-proposition {
  margin: 1.15rem 0 0;
  max-width: 62ch;
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: 1.45;
}
.start-proposition strong {
  display: block;
  margin-bottom: .35rem;
  color: var(--ink);
  font-size: var(--t-lead);
  letter-spacing: -.015em;
  font-weight: 650;
}
@media (max-width: 900px) {
  .start-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Schematic label floor on small screens.

   The pan above promises "a legible floor", but three label rules sat under
   it: .rp-sub and .pipe-sub at 10.5px and the dp-imat point numbers at 10px.
   Inside the pan the viewBox draws 1:1, so those are literal sizes on the
   glass rather than something the scale forgives.

   This block lives at the end of the file deliberately. The rules it corrects
   are defined after the pan media query, so an override placed there loses on
   source order at equal specificity.
   ========================================================================== */
@media (max-width: 900px) {
  .schematic .rp-sub,
  .schematic .pipe-sub { font-size: 12px; }
  .schematic .dp-imat-point text { font-size: 11px; }
}