@charset "utf-8";
/* ==========================================================================
   page-about.css — page-scoped styles for about.html
   Design-system tokens only. Theme-aware: correct on dark and light bands.
   Sections follow document order.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Type tiers — the missing step between a ~60px display face and 14px body.
   Every section headline is followed by a 20–22px lead, and the primary CTA
   is sized as a target, not as a link.
   -------------------------------------------------------------------------- */

.section-head .lead,
.ab-hero__lead {
  font-size: clamp(1.125rem, 1.02rem + .42vw, 1.375rem);
  line-height: 1.5;
}

.ab-hero__cta .btn--lg,
.ab-cta .btn--lg,
.handover .btn {
  min-height: 52px;
  padding-inline: var(--s-8);
  font-size: var(--t-body);
}

/* --------------------------------------------------------------------------
   0a. Shared page primitives (chips, tick lists, diagram frames)
   -------------------------------------------------------------------------- */

/* Chip row — hero focus block and the "what to expect" block */
.ab-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.ab-chips > li {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: var(--s-2) var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
  color: var(--body);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .02em;
  line-height: 1.2;
  transition: border-color var(--d-2) var(--e-out), background var(--d-2) var(--e-out);
}

.ab-chips > li:hover {
  border-color: var(--line-strong);
  background: var(--bg-card-2);
}

/* Affirmative checklist */
.ab-ticks,
.ab-nevers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-3);
}

/* The page CSS loads after core.css, so the reset above would otherwise beat
   the `.mt-6` utility these lists carry. Restore the heading gap explicitly. */
h2 + .ab-ticks,
h3 + .ab-ticks,
h2 + .ab-nevers,
h3 + .ab-nevers {
  margin-top: var(--s-8);
}

.ab-ticks > li,
.ab-nevers > li {
  position: relative;
  padding-left: var(--s-8);
  font-size: var(--t-sm);
  line-height: 1.55;
}

.ab-ticks > li { color: var(--body); }

.ab-ticks > li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: .3em;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* Negative list — same text weight as the ticks (this is real copy), but a
   different glyph so the meaning is never carried by colour alone. */
.ab-nevers > li { color: var(--body); }

.ab-nevers > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .68em;
  width: 13px;
  height: 0;
  border-top: 2px solid var(--muted);
}

/* --------------------------------------------------------------------------
   0b. Page diagram kit — .dgx-* mirrors the shared .dg-* geometry contract
   (channel 2.5 / output 3 / port r4 / node r17 / rings 32 / human 2px dashed
   4 4 / labels mono 10.5 ls 1.4 upper / plate radius 10). Colour comes only
   from --rf-* theme vars with light-safe fallbacks, so no mark can go
   invisible if a band flips.
   -------------------------------------------------------------------------- */

.dgx-ch {
  fill: none;
  stroke: var(--rf-ch-1, #2F9AA8);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.dgx-out {
  fill: none;
  stroke: var(--rf-out, #0B4F8A);
  stroke-width: 3;
  stroke-linecap: round;
}

.dgx-port { fill: var(--rf-port, #2F9AA8); }

.dgx-node {
  fill: var(--bg-card, #fff);
  stroke: var(--rf-node-1, #1077D7);
  stroke-width: 2.5;
}

.dgx-out-node { fill: var(--rf-out, #0B4F8A); }

.dgx-ring {
  fill: none;
  stroke: var(--rf-ring, #1077D7);
  stroke-opacity: .3;
  stroke-width: 1.5;
}

.dgx-diamond {
  fill: var(--bg-card, #fff);
  stroke: var(--rf-node-1, #1077D7);
  stroke-width: 2.5;
}

/* Human / exception marks — amber, dashed. Never decorative. */
.dgx-human {
  fill: none;
  stroke: var(--rf-amber, #E7A63A);
  stroke-width: 2;
  stroke-dasharray: 4 4;
  stroke-linecap: round;
}

.dgx-human-dot { fill: var(--rf-amber, #E7A63A); }

.dgx-seam {
  fill: none;
  stroke: var(--rf-amber, #E7A63A);
  stroke-width: 2;
  stroke-dasharray: 4 4;
  stroke-linecap: round;
}

.dgx-seam-ring {
  fill: none;
  stroke: var(--rf-amber, #E7A63A);
  stroke-opacity: .55;
  stroke-width: 2;
}

/* Plates */
.dgx-plate {
  fill: var(--bg-card, #fff);
  stroke: var(--line-strong, #C9D6E2);
  stroke-width: 1.5;
}

.dgx-plate--on-layer { stroke: var(--rf-node-1, #1077D7); stroke-opacity: .38; }

.dgx-plate--human {
  fill: var(--rf-amber-wash, #FDF3E2);
  stroke: var(--rf-amber, #E7A63A);
  stroke-opacity: .8;
  stroke-width: 2;
}

.dgx-layer {
  fill: var(--rf-wash, #E9F1FA);
  stroke: var(--rf-node-1, #1077D7);
  stroke-opacity: .26;
  stroke-width: 1.5;
}

.dgx-riser {
  fill: none;
  stroke: var(--rf-ch-2, #1077D7);
  stroke-opacity: .7;
  stroke-width: 2;
  stroke-linecap: round;
}

.dgx-riser-head { fill: var(--rf-ch-2, #1077D7); fill-opacity: .7; }

/* Diagram type — one size, one family, everywhere */
.dgx-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 1.4px;
  fill: var(--muted);
}

.dgx-label--accent { fill: var(--rf-out, #0B4F8A); }
.dgx-label--human  { fill: var(--rf-amber-ink, #8A5D05); }

.dgx-plate-label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 1.1px;
  fill: var(--ink);
}

.dgx-plate-label--human { fill: var(--rf-amber-ink, #8A5D05); }

/* Display-scale diagram type. Used where a figure runs at container width and
   the labels must read from a metre away, not be squinted at. */
.dgx-label--lg {
  font-size: 13px;
  letter-spacing: 1.6px;
}

.dgx-plate-label--lg {
  font-size: 14.5px;
  letter-spacing: 1.3px;
  font-weight: 500;
}

.dgx-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  fill: var(--ink);
}

/* Diagram frame ---------------------------------------------------------- */
.diagram-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--s-2);
  scrollbar-width: thin;
}

.diagram-scroll::-webkit-scrollbar { height: 6px; }
.diagram-scroll::-webkit-scrollbar-track { background: transparent; }
.diagram-scroll::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: var(--r-pill);
}


/* --------------------------------------------------------------------------
   1. Hero — section.band.band--void.ab-hero
   -------------------------------------------------------------------------- */

.ab-hero {
  position: relative;
  overflow: hidden;
}

/* Shorter than a copy-only hero: the fold now carries two masses, so it does
   not need 9rem of air above the headline to feel composed. */
.ab-hero {
  padding-block: clamp(3rem, 2rem + 3.5vw, 5rem) var(--band-y);
}

.ab-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  align-items: center;
  gap: clamp(2.5rem, 1rem + 4vw, 4.5rem);
}

.ab-hero__copy {
  display: grid;
  align-content: center;
  gap: var(--s-6);
  max-width: min(100%, 620px);
}

.ab-hero__title {
  margin: 0;
  max-width: 15ch;
  /* Two masses in the fold: the display face gives up a little scale so the
     headline keeps three tight lines beside the figure instead of five. */
  font-size: clamp(2.5rem, 1.5rem + 3.1vw, 3.5rem);
  line-height: .98;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.ab-hero__title > span { display: block; }

/* Headline accent inks DOWN toward navy on light — never glows up. */
.ab-hero__title-accent {
  background: linear-gradient(96deg, var(--blue) 0%, var(--blue-deep) 62%, #1E6F7C 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@supports not (background-clip: text) {
  .ab-hero__title-accent { color: var(--blue-deep); }
}

.ab-hero__lead {
  margin: 0;
  max-width: 46ch;
  color: var(--body);
}

.ab-hero__cta {
  margin-top: var(--s-2);
  flex-wrap: wrap;
  align-items: center;
}

/* Was 11px legal-looking small print under the button. */
.ab-hero__fine {
  margin: 0;
  font-size: var(--t-sm, .8125rem);
  line-height: 1.5;
  letter-spacing: .01em;
}

/* --------------------------------------------------------------------------
   1b. Hero figure — the engagement path, rendered at hero scale
   -------------------------------------------------------------------------- */

.ab-hero__figure {
  margin: 0;
  display: grid;
  gap: var(--s-5);
  padding: var(--s-7) var(--s-7) var(--s-6);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  background: var(--bg-card);
  box-shadow: var(--shadow-lift);
  transition: box-shadow var(--d-3) var(--e-out), border-color var(--d-3) var(--e-out);
}

.ab-hero__figure:hover { border-color: var(--line); }

.ab-hero__figure-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--line-soft);
}

.ab-hero__figure-note {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: .04em;
  color: var(--muted);
}

.ab-hero .ab-hero__figure .ab-path__svg {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  margin-inline: auto;
  color: var(--body);
}

/* The single human gate — the one place amber is spent in this figure. */
.ab-path__gate {
  fill: var(--rf-amber-wash, #FDF3E2);
  stroke: var(--rf-amber, #E7A63A);
  stroke-width: 2;
  stroke-dasharray: 4 4;
}

/* --------------------------------------------------------------------------
   1c. Hero ledge — what we build, spanning the full fold width
   -------------------------------------------------------------------------- */

.ab-hero__strip {
  position: relative;
  z-index: 1;
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  padding-top: var(--s-8);
  border-top: 1px solid var(--line-soft);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 30ch);
  align-items: center;
  gap: var(--s-8);
}

.ab-hero__strip-main {
  display: grid;
  gap: var(--s-4);
}

/* Bilingual framed as revenue capture, not an accessibility footnote. */
.ab-hero__bilingual {
  margin: 0;
  font-size: var(--t-sm, .8125rem);
  line-height: 1.55;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   2. Founder panel — aside.founder (inside the hero)
   -------------------------------------------------------------------------- */

/* No approved photograph exists, so the square where a portrait would sit is
   built deliberately instead: the brand mark at monogram scale on a tinted
   plate. It has to read as a design decision, never as a missing asset. */
.founder {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2.5rem, 1rem + 4vw, 4.5rem);
}

.founder__plate {
  margin: 0;
  display: grid;
  gap: var(--s-5);
  padding: var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--rf-wash, #E9F1FA);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--d-3) var(--e-out), border-color var(--d-3) var(--e-out);
}

.founder__plate:hover {
  box-shadow: var(--shadow-lift);
  border-color: var(--line-strong);
}

.founder__monogram {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-lg);
  background: var(--bg-card);
}

/* Brand-mark proportions held exactly: the 48-unit mark scaled 6x. */
.founder__mono-ch {
  fill: none;
  stroke: var(--rf-ch-1, #2F9AA8);
  stroke-width: 26;
  stroke-linecap: round;
}

.founder__mono-port { fill: var(--rf-port, #2F9AA8); }

.founder__mono-node {
  fill: var(--rf-node-1, #1077D7);
}

.founder__mono-out {
  fill: none;
  stroke: var(--rf-node-1, #1077D7);
  stroke-width: 26;
  stroke-linecap: round;
}

.founder__mono-word {
  font-family: var(--font-mono);
  font-size: 36px;
  font-weight: 600;
  letter-spacing: 5px;
  fill: var(--ink);
}

.founder__plate-cap {
  display: grid;
  gap: var(--s-2);
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--body);
}

.founder__kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.founder__body {
  display: grid;
  gap: var(--s-6);
  padding-left: var(--s-8);
  border-left: 3px solid var(--accent);
}

.founder__line {
  margin: 0;
  max-width: 62ch;
  font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  line-height: 1.6;
  color: var(--body);
}

/* The unresolved inputs, stated once as an editorial note. They stay findable
   as tokens, but they are set as quiet prose — not as amber TODO chips. */
.founder__note {
  margin: 0;
  max-width: 68ch;
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-soft);
  font-size: var(--t-sm);
  line-height: 1.65;
  color: var(--muted);
}

.founder__note .placeholder-flag {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: .92em;
  letter-spacing: .02em;
  color: var(--muted);
  border-bottom: 1px dotted var(--line-strong);
}

/* --------------------------------------------------------------------------
   3. Standing statement — div.stand
   -------------------------------------------------------------------------- */

.stand__statement {
  margin: 0;
  max-width: 34ch;
  font-family: var(--font-display);
  font-size: var(--t-display-3);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -.018em;
  color: var(--ink);
  text-wrap: pretty;
}

.stand__statement .serif-accent { color: var(--accent); }

/* --------------------------------------------------------------------------
   4. Seam diagram — figure.seam
   -------------------------------------------------------------------------- */

.seam {
  margin: 0 auto;
  max-width: 1080px;
  display: grid;
  gap: var(--s-8);
  padding: var(--s-10) var(--s-8);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
}

/* Full container width, on a tinted ground. The chain used to be hairline
   boxes on white at reading-column width — invisible from a metre away. */
.seam--wide {
  max-width: none;
  padding: clamp(1.75rem, 1rem + 2vw, 3rem);
  background: var(--rf-wash, #E9F1FA);
  border-color: var(--line);
}

.seam__head {
  max-width: 900px;
  margin-inline: auto;
  margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

.seam__head h2 {
  max-width: 22ch;
  margin-inline: auto;
  text-wrap: balance;
}

.seam__head .lead {
  max-width: 60ch;
  margin-inline: auto;
}

/* NOTE ON SPECIFICITY — this is why the labels were unreadable.
   core.css caps `main svg[viewBox]:not([width])` at 680px (0,2,2). A plain
   `.seam__svg` rule (0,1,0) never won, so every figure on this page was being
   squeezed to 680px and its 10.5px labels landed at roughly 9px on screen.
   The three display figures below each carry a three-class selector so the
   page-level width actually applies. */
.seam .diagram-scroll .seam__svg {
  display: block;
  width: 100%;
  max-width: 1200px;
  min-width: 860px;
  height: auto;
  margin-inline: auto;
  color: var(--body);
}

/* Inverted on the tinted ground: the layer becomes the white slab and its
   contents pick up the tint, so both levels stay legible. */
.seam--wide .dgx-layer {
  fill: var(--bg-card, #fff);
  stroke: var(--rf-node-1, #1077D7);
  stroke-opacity: .3;
}

.seam--wide .dgx-plate--on-layer { fill: var(--rf-wash, #E9F1FA); }

/* The default link blue lands at 4.46:1 on the tinted ground — ink it down. */
.seam--wide .link-arrow { color: var(--blue-deep, #0B4F8A); }

/* The single focal point: one item stalled mid-handoff. The static ring keeps
   the focal point readable at every frame of the pulse (and in screenshots). */
.seam__packet { fill: var(--rf-amber, #E7A63A); }

.seam__ring {
  fill: none;
  stroke: var(--rf-amber, #E7A63A);
  stroke-opacity: .55;
  stroke-width: 2;
  stroke-dasharray: 4 4;
}

.seam__halo {
  fill: none;
  stroke: var(--rf-amber, #E7A63A);
  stroke-width: 2;
  transform-origin: 540px 88px;
  animation: ab-packet-pulse 2.6s var(--e-inout) infinite;
}

/* The stacked narrow composition keeps its own focal geometry. */
.seam__svg--m .seam__halo { transform-origin: 170px 57px; }

@keyframes ab-packet-pulse {
  0%, 100% { opacity: .55; transform: scale(.82); }
  50%      { opacity: 0;   transform: scale(1.25); }
}

.seam__cap {
  display: grid;
  gap: var(--s-2);
  justify-items: center;
  max-width: var(--w-text);
  margin-inline: auto;
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-soft);
  text-align: center;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--muted);
}

.seam__cap > p { margin: 0; }

.seam__cta {
  margin: 0;
  text-align: center;
}

/* Hover: lift the whole plate and light its hairline. */
.seam,
.exc {
  transition: box-shadow var(--d-3) var(--e-out), border-color var(--d-3) var(--e-out);
}

.seam:hover,
.exc:hover {
  box-shadow: var(--shadow-lift);
  border-color: var(--line);
}

/* --------------------------------------------------------------------------
   5. Method — div.grid.grid--aside.method
   -------------------------------------------------------------------------- */

.method {
  align-items: start;
  gap: var(--s-16);
}

.method__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

/* The step number is already in the markup (p.card__index) — never add a
   counter here or it renders twice. */
.method__step {
  position: relative;
  display: grid;
  gap: var(--s-3);
  padding-block: var(--s-8);
  padding-left: 0;
  transition: padding-left var(--d-3) var(--e-out);
}

.method__step::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--s-8);
  bottom: var(--s-8);
  width: 2px;
  border-radius: var(--r-pill);
  background: var(--accent);
  opacity: 0;
  transition: opacity var(--d-2) var(--e-out);
}

.method__step:hover {
  padding-left: var(--s-5);
}

.method__step:hover::before { opacity: 1; }

.method__step:first-child { padding-top: 0; }
.method__step:last-child  { padding-bottom: 0; }

.method__step + .method__step {
  border-top: 1px solid var(--line-soft);
}

.method__step > .card__index {
  margin: 0;
  color: var(--accent);
}

.method__step > h3 { margin: 0; }

.method__step > p:not(.card__index) {
  margin: 0;
  max-width: 58ch;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   6. Principles — aside.card.card--roomy.principles
   -------------------------------------------------------------------------- */

.principles {
  position: sticky;
  top: var(--s-16);
  align-self: start;
}

.principles__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.principles__list > li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  align-items: baseline;
  column-gap: var(--s-3);
  row-gap: var(--s-1);
  padding-block: var(--s-4);
}

.principles__note {
  margin: var(--s-5) 0 0;
  padding: var(--s-3) 0 var(--s-3) var(--s-4);
  border-left: 2px solid var(--amber);
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--body);
}

.principles__list > li + li {
  border-top: 1px solid var(--line-soft);
}

.principles__n {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  line-height: 1.7;
  letter-spacing: .06em;
  color: var(--accent);
}

.principles__t {
  grid-column: 2;
  grid-row: 1;
  font-size: var(--t-body);
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}

.principles__d {
  grid-column: 2;
  grid-row: 2;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   7. Engagement rail — div.grid.grid--aside.eng
   -------------------------------------------------------------------------- */

.eng {
  align-items: start;
  gap: var(--s-16);
}

.eng__rail { margin: 0; }

/* The human-approval gate on each step — amber is reserved for exactly this. */
.eng__approve {
  margin: var(--s-3) 0 0;
  padding: var(--s-2) 0 var(--s-2) var(--s-4);
  border-left: 2px solid var(--amber);
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--body);
}

/* --------------------------------------------------------------------------
   8. Handover card — aside.card.card--roomy.handover
   -------------------------------------------------------------------------- */

.handover {
  position: sticky;
  top: var(--s-16);
  align-self: start;
  display: grid;
  align-content: start;
  gap: var(--s-5);
}

.handover__note {
  margin: 0;
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-soft);
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--muted);
}

.handover__fine {
  margin: calc(var(--s-3) * -1) 0 0;
  font-size: var(--t-sm, .8125rem);
  line-height: 1.5;
  text-align: center;
}

/* --------------------------------------------------------------------------
   9. Exceptions diagram — figure.exc
   -------------------------------------------------------------------------- */

/* Second centred head on the page — it sits directly over its figure, the same
   way the seam band does, so the split rhythm never runs more than twice. */
.exc__head {
  max-width: 900px;
  margin-inline: auto;
  margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

.exc__head h2 {
  max-width: 24ch;
  margin-inline: auto;
  text-wrap: balance;
}

.exc__head .lead {
  max-width: 60ch;
  margin-inline: auto;
}

.exc {
  /* Followed directly by .own inside a plain block shell — carry the gap. */
  margin: 0 auto var(--s-16);
  /* Levelled to the seam figure: same label size on screen, same presence. */
  max-width: 1060px;
  display: grid;
  gap: var(--s-5);
  padding: var(--s-8);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
}

.exc .diagram-scroll .exc__svg {
  display: block;
  width: 100%;
  max-width: 1000px;
  min-width: 660px;
  height: auto;
  margin-inline: auto;
  color: var(--body);
}

/* --------------------------------------------------------------------------
   10. Ownership — div.grid.grid--2.own
   -------------------------------------------------------------------------- */

.own {
  align-items: stretch;
  gap: var(--s-8);
}

.own > * { height: 100%; }

.own__never {
  display: grid;
  align-content: start;
}

.own__fine {
  margin: var(--s-6) 0 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-soft);
  font-size: var(--t-xs);
  line-height: 1.55;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   11. Commercials — div.grid.grid--4.comm
   -------------------------------------------------------------------------- */

.comm {
  gap: var(--s-6);
  align-items: stretch;
}

.comm__card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  height: 100%;
}

.comm__fine {
  margin: var(--s-2) 0 0;
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-soft);
  font-size: var(--t-xs);
  line-height: 1.55;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   12. What to expect — div.expect
   -------------------------------------------------------------------------- */

.expect {
  /* Follows .comm inside a plain block shell — carry the gap. */
  margin: var(--s-16) auto 0;
  max-width: 1020px;
  display: grid;
  justify-items: center;
  gap: var(--s-6);
  padding: var(--s-10) var(--s-8);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
  text-align: center;
}

.expect__chips {
  justify-content: center;
  max-width: 900px;
}

.expect__note {
  margin: 0;
  max-width: 66ch;
}

/* --------------------------------------------------------------------------
   13. Closing CTA band — section.ab-cta
   -------------------------------------------------------------------------- */

.ab-cta {
  position: relative;
  overflow: hidden;
}

.ab-cta > .shell {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   14. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  .founder {
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    gap: var(--s-10);
  }

  .method,
  .eng { gap: var(--s-10); }

  .principles,
  .handover { position: static; }
}

@media (max-width: 1024px) {
  /* One column, but the figure stays a real mass — it is the artifact, not
     decoration, so it keeps full width rather than shrinking to a thumbnail. */
  .ab-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-12);
  }

  .ab-hero__copy { max-width: 40rem; }

  .ab-hero__figure { max-width: 40rem; }

  .ab-hero__strip {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-6);
  }

  .comm { gap: var(--s-5); }
}

@media (max-width: 900px) {
  .founder {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }

  /* Stacked: the plate keeps portrait scale instead of stretching into a band. */
  .founder__plate { max-width: 300px; }

  .founder__body {
    padding-left: var(--s-6);
    border-left-width: 2px;
  }
}

@media (max-width: 768px) {
  .ab-hero__copy { gap: var(--s-5); }

  .ab-hero__strip {
    margin-top: var(--s-10);
    padding-top: var(--s-6);
  }

  .founder__plate { padding: var(--s-5); }

  .method__step { padding-block: var(--s-6); }

  .exc { margin-bottom: var(--s-12); }
  .expect { margin-top: var(--s-12); }

  .seam,
  .exc,
  .expect { padding: var(--s-8) var(--s-5); }
}

@media (max-width: 560px) {
  .ab-chips { gap: var(--s-2); }

  .ab-chips > li {
    min-height: 34px;
    padding: var(--s-2) var(--s-3);
    font-size: var(--t-micro);
    letter-spacing: .04em;
  }

  .ab-hero__cta > * { width: 100%; }

  .founder__plate {
    padding: var(--s-4);
    border-radius: var(--r-lg);
  }

  .principles__list > li { grid-template-columns: 2rem minmax(0, 1fr); }

  .seam,
  .exc,
  .expect {
    padding: var(--s-6) var(--s-3);
    border-radius: var(--r-lg);
  }
}

/* --------------------------------------------------------------------------
   14b. Diagram breakpoint swap — must come after §4 and §9 set the wide sizes.

   Every diagram ships a wide composition and a stacked narrow one. Below the
   swap point the wide SVG would have to be scrolled past its own focal point,
   so it is replaced rather than squashed or clipped.
   -------------------------------------------------------------------------- */

.seam .diagram-scroll .seam__svg--m,
.exc .diagram-scroll .exc__svg--m,
.ab-hero .ab-hero__figure .ab-path__svg--m { display: none; }

/* Below this width the hero path's labels would land near 5px. Swap the
   composition rather than squash it. */
@media (max-width: 560px) {
  .ab-hero .ab-hero__figure .ab-path__svg { display: none; }

  .ab-hero .ab-hero__figure .ab-path__svg--m {
    display: block;
    width: 100%;
    max-width: 330px;
    height: auto;
    margin-inline: auto;
  }
}

@media (max-width: 900px) {
  .seam .diagram-scroll .seam__svg,
  .exc .diagram-scroll .exc__svg { display: none; }

  .seam .diagram-scroll .seam__svg--m,
  .exc .diagram-scroll .exc__svg--m {
    display: block;
    width: 100%;
    min-width: 0;
    /* Capped so the 10.5px label type never scales far past its desktop size —
       one label size across every diagram on the site. */
    max-width: 440px;
    margin-inline: auto;
  }
}

/* --------------------------------------------------------------------------
   15. Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .seam__halo {
    animation: none;
    opacity: .55;
    transform: none;
  }

  .ab-chips > li,
  .founder__plate,
  .ab-hero__figure,
  .comm__card,
  .method__step { transition: none; }
}