/* ==========================================================================
   64ARC — The architecture of intelligent business
   site.css  ·  Design system + components + page styles
   --------------------------------------------------------------------------
   Contents
     01  Tokens
     02  Reset & base
     03  Typography
     04  Layout
     05  Buttons & links
     06  Header / navigation
     07  Sections & surfaces
     08  Cards & primitives
     09  Diagrams
     10  Motion / reveal
     11  Forms
     12  Footer
     13  Responsive
   ========================================================================== */

/* ==========================================================================
   01  TOKENS
   ========================================================================== */

:root {
  /* ---- Brand palette (per brief) ---- */
  --carbon:        #111318;   /* primary typography / dark surfaces */
  --ivory:         #F4F1EA;   /* primary light surface              */
  --signal:        #5367FF;   /* intelligence / interaction         */
  --soft-grey:     #E7E8EC;   /* rules / borders / scaffolding      */

  /* ---- Derived surfaces ---- */
  --carbon-raised: #181B22;
  --carbon-sunken: #0C0E12;
  --carbon-line:   #262A34;
  --carbon-line-2: #343947;
  --ivory-raised:  #FBFAF6;
  --ivory-sunken:  #EDEAE1;

  /* ---- Ink ---- */
  /* ---- Ink ----
     Every value below is used for real text, so each clears WCAG AA (4.5:1)
     against the surfaces it actually appears on. Do not lighten these. */
  --ink:           #111318;
  --ink-muted:     #5C6272;   /* 5.40:1 on ivory                        */
  --ink-faint:     #636978;   /* 4.87 ivory · 4.57 sunken · 5.26 raised  */
  --ink-inv:       #F4F1EA;
  --ink-inv-muted: #A7ADBB;
  --ink-inv-faint: #808795;   /* 5.15:1 on carbon                       */

  /* ---- Signal variants ---- */
  --signal-ink:     #3B4CE0;   /* small text on light  — 5.65:1 on ivory  */
  --signal-on-dark: #7A89FF;   /* small text on carbon — 6.06:1           */
  --signal-soft:   rgba(83, 103, 255, .10);
  --signal-line:   rgba(83, 103, 255, .34);
  --signal-glow:   rgba(83, 103, 255, .55);

  /* ---- Type ---- */
  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Fluid type scale — engineered, not cramped */
  --t-hero:    clamp(2.125rem, 1.1rem + 4.4vw, 5rem);     /* 34 → 80px  */
  --t-h1:      clamp(2.375rem, 1.35rem + 3.9vw, 4rem);    /* 38 → 64px  */
  --t-h2:      clamp(2rem, 1.25rem + 2.8vw, 3.25rem);     /* 32 → 52px  */
  --t-h3:      clamp(1.375rem, 1.10rem + 1.0vw, 1.875rem);/* 22 → 30px  */
  --t-h4:      clamp(1.125rem, 1.03rem + .35vw, 1.3125rem);
  --t-lead:    clamp(1.125rem, 1.02rem + .45vw, 1.4375rem);
  --t-body:    clamp(1rem, .96rem + .18vw, 1.1875rem);    /* 16 → 19px  */
  --t-small:   .9375rem;
  --t-label:   .75rem;

  /* ---- Space ---- */
  --gutter:     clamp(1.25rem, .6rem + 2.4vw, 2.5rem);
  --wrap:       1280px;
  --wrap-text:  760px;
  --section-y:  clamp(5rem, 3rem + 8vw, 10rem);
  --section-y-lg: clamp(6.5rem, 3.5rem + 10vw, 13rem);

  /* ---- Form ---- */
  --radius:    10px;
  --radius-sm: 6px;
  --radius-lg: 14px;

  /* ---- Motion ---- */
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --dur:       .6s;

  --header-h:  76px;
}

/* ==========================================================================
   02  RESET & BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

body.is-locked { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
svg { height: auto; }

hr {
  border: 0;
  border-top: 1px solid var(--soft-grey);
  margin: 0;
}

::selection { background: var(--signal); color: #fff; }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--carbon);
  color: var(--ivory);
  padding: .875rem 1.25rem;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus { left: 1rem; top: 1rem; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   03  TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -.025em;
  margin: 0;
  text-wrap: balance;
}

.t-hero  { font-size: var(--t-hero); line-height: 1.0;  letter-spacing: -.035em; }
.t-h1    { font-size: var(--t-h1);   line-height: 1.03; letter-spacing: -.032em; }
.t-h2    { font-size: var(--t-h2);   line-height: 1.06; letter-spacing: -.028em; }
.t-h3    { font-size: var(--t-h3);   line-height: 1.15; letter-spacing: -.022em; }
.t-h4    { font-size: var(--t-h4);   line-height: 1.3;  letter-spacing: -.015em; }

p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--ink-muted);
  letter-spacing: -.012em;
}
/* A lead paragraph always needs air after the headline it follows. */
:is(h1, h2, h3) + .lead { margin-top: 1.5rem; }

.muted     { color: var(--ink-muted); }
.faint     { color: var(--ink-faint); }
.measure   { max-width: 62ch; }
.measure-s { max-width: 48ch; }
.measure-l { max-width: 72ch; }

/* Technical label — the 64-bit nod */
.label { font-family: var(--font-body); font-size: .8125rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-muted); display: inline-block; margin-bottom: .75rem; }
.label--signal { color: var(--signal-ink); }
/* As a standalone eyebrow the label carries its own spacing; inline uses
   (.ai-ask, .principle) override this below. */
p.label { margin-bottom: 1.5rem; }
.label--bare::before { display: none; }

.label-index {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: .12em;
  color: var(--signal-ink);
  font-weight: 500;
}

/* Emphasis inside headlines */
.hl { color: var(--signal); }
em.hl, .hl em { font-style: normal; }

/* Rule that reads as architectural scaffolding */
.rule {
  height: 1px;
  background: var(--soft-grey);
  border: 0;
  margin: 0;
}

/* ==========================================================================
   04  LAYOUT
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow { max-width: 980px; }

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.25rem, .8rem + 1.6vw, 2.5rem);
}

.stack > * + * { margin-top: var(--stack, 1.5rem); }

/* Section header block: label + heading + lead */
.section-head {
  max-width: 900px;
  margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}
.section-head .label { margin-bottom: 1.75rem; }
.section-head .lead  { margin-top: 1.5rem; }
.section-head:last-child { margin-bottom: 0; }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: start;
}
/* Label column + content column: the content side needs the room. */
.split--sticky { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
.split--sticky > :first-child { position: sticky; top: calc(var(--header-h) + 48px); }

/* Definition rows inside a split are already narrow — stack them. */
.split .rows > div { grid-template-columns: 1fr; gap: .5rem; }

/* ==========================================================================
   05  BUTTONS & LINKS
   ========================================================================== */

a { color: inherit; }

.btn {
  --btn-bg: var(--carbon);
  --btn-fg: var(--ivory);
  --btn-bd: var(--carbon);
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem 1.5rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: -.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease), transform .35s var(--ease);
  white-space: nowrap;
}
.btn .arw {
  flex: none;
  transition: transform .4s var(--ease-out);
}
.btn:hover .arw { transform: translateX(5px); }

/* A shade darker than --signal so white label text clears AA (5.03:1, vs 4.42:1). */
.btn--primary { --btn-bg: #4A5DF5; --btn-bd: #4A5DF5; --btn-fg: #fff; }
.btn--primary:hover { --btn-bg: #4356F0; --btn-bd: #4356F0; }

.btn--dark:hover { --btn-bg: #000; --btn-bd: #000; }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: rgba(17,19,24,.24);
}
.btn--ghost:hover { --btn-bd: var(--carbon); --btn-bg: rgba(17,19,24,.04); }

.btn--on-dark {
  --btn-bg: var(--ivory);
  --btn-fg: var(--carbon);
  --btn-bd: var(--ivory);
}
.btn--on-dark:hover { --btn-bg: #fff; --btn-bd: #fff; }

.btn--ghost-dark {
  --btn-bg: transparent;
  --btn-fg: var(--ivory);
  --btn-bd: rgba(244,241,234,.28);
}
.btn--ghost-dark:hover { --btn-bd: rgba(244,241,234,.7); --btn-bg: rgba(244,241,234,.06); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .875rem;
  align-items: center;
}

/* Inline text link with arrow */
.link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 500;
  color: var(--signal-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.link .arw { transition: transform .4s var(--ease-out); }
.link:hover { border-color: currentColor; }
.link:hover .arw { transform: translateX(4px); }
.link--dark { color: var(--ivory); }

/* ==========================================================================
   06  HEADER / NAVIGATION
   ========================================================================== */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .45s var(--ease), border-color .45s var(--ease),
              backdrop-filter .45s var(--ease);
}
.header .wrap {
  display: flex;
  align-items: center;
  gap: 2rem;
  width: 100%;
}

/* Over the dark hero */
.header .brand,
.header .nav-link { color: var(--ivory); }
.header .nav-link::after { background: var(--ivory); }

/* Scrolled → warm-ivory surface with carbon typography.
   Opaque rather than translucent: over the carbon hero a semi-transparent
   ivory reads as muddy grey instead of a clean surface. */
.header.is-stuck {
  background: var(--ivory);
  border-bottom-color: var(--soft-grey);
}
.header.is-stuck .brand,
.header.is-stuck .nav-link { color: var(--carbon); }
.header.is-stuck .nav-link::after { background: var(--carbon); }
.header.is-stuck .btn--on-dark {
  --btn-bg: var(--carbon); --btn-fg: var(--ivory); --btn-bd: var(--carbon);
}
.header.is-stuck .btn--on-dark:hover { --btn-bg: var(--signal); --btn-bd: var(--signal); }
.header.is-stuck .burger span { background: var(--carbon); }

.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  flex: none;
  transition: color .45s var(--ease), opacity .3s var(--ease);
}
.brand:hover { opacity: .78; }
/* Approved symbol and wordmark; the two surfaces share one fixed-size slot. */
.brand-lockup { display: grid; width: 190px; aspect-ratio: 405 / 112; }
.brand-logo { grid-area: 1 / 1; display: block; width: 100%; height: auto; }
.brand-logo--dark { visibility: hidden; }
.header.is-stuck .brand-logo--light { visibility: hidden; }
.header.is-stuck .brand-logo--dark { visibility: visible; }
.footer .brand-lockup { width: 220px; }
@media (max-width: 400px) {
  .header .brand-lockup { width: 166px; }
}

.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, .4rem + 1.7vw, 2.25rem);
}
.nav-link {
  position: relative;
  font-size: .9375rem;
  font-weight: 450;
  text-decoration: none;
  letter-spacing: -.005em;
  padding: .35rem 0;
  transition: color .45s var(--ease), opacity .3s var(--ease);
  white-space: nowrap;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 1px; width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease-out);
}
.nav-link:hover::after,
.nav-link[aria-current="page"]::after { transform: scaleX(1); }
.nav-link[aria-current="page"] { opacity: 1; }

.header-cta {
  flex: none;
  margin-left: clamp(.5rem, 1.4vw, 1.5rem);
  padding: .7rem 1.125rem;   /* lighter than a page-level CTA */
  font-size: .875rem;
}

/* Burger */
.burger {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px;
  flex-direction: column;   /* the three bars stack — without this they'd sit in a row */
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.burger span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--ivory);
  transition: transform .4s var(--ease-out), opacity .25s var(--ease), background .45s var(--ease);
}
.burger span + span { margin-top: 6px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* Mobile drawer */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--carbon);
  padding: calc(var(--header-h) + 2.5rem) var(--gutter) 3rem;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
  overflow-y: auto;
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: none; }
.mobile-nav a.m-link {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem);
  font-weight: 500;
  letter-spacing: -.03em;
  color: var(--ivory);
  text-decoration: none;
  padding: .55rem 0;
  border-bottom: 1px solid var(--carbon-line);
  display: flex;
  align-items: baseline;
  gap: 1rem;
  transition: color .3s var(--ease);
}
.mobile-nav a.m-link:hover { color: var(--signal); }
.mobile-nav a.m-link .n {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .12em;
  color: var(--ink-inv-faint);
}
.mobile-nav .m-foot { margin-top: auto; padding-top: 2.5rem; }

/* ==========================================================================
   07  SECTIONS & SURFACES
   ========================================================================== */

.section {
  padding-block: var(--section-y);
  position: relative;
}
.section--lg   { padding-block: var(--section-y-lg); }
.section--tight{ padding-block: clamp(3.5rem, 2rem + 5vw, 6rem); }

.s-ivory  { background: var(--ivory); color: var(--ink); }
.s-raised { background: var(--ivory-raised); color: var(--ink); }
.s-sunken { background: var(--ivory-sunken); color: var(--ink); }
.s-carbon { background: var(--carbon); color: var(--ink-inv); }
.s-carbon-deep { background: var(--carbon-sunken); color: var(--ink-inv); }

/* Inverted text colours inside dark surfaces */
.s-carbon .lead, .s-carbon .muted,
.s-carbon-deep .lead, .s-carbon-deep .muted { color: var(--ink-inv-muted); }
.s-carbon .faint, .s-carbon-deep .faint { color: var(--ink-inv-faint); }
.s-carbon .label, .s-carbon-deep .label { color: var(--ink-inv-faint); }
/* .cta, .mega and .footer set a carbon background without the .s-carbon class,
   so they need naming here too — otherwise the eyebrow keeps the light-surface
   blue and drops to 2.9:1. */
.s-carbon .label--signal,
.s-carbon-deep .label--signal,
.s-carbon .rule, .s-carbon-deep .rule { background: var(--carbon-line); }
.s-carbon .link, .s-carbon-deep .link { color: var(--ivory); }

/* Blueprint grid backdrop for dark technical sections.
   No overflow:hidden — it would make this the scrollport for any
   position:sticky descendant. The ::before is inset:0 and cannot overflow. */

/* Light architectural grid — see .blueprint on why there is no overflow:hidden */

/* ---- Page hero (inner pages) ---- */
.page-hero {
  padding-top: calc(var(--header-h) + clamp(4.5rem, 3rem + 7vw, 9rem));
  padding-bottom: clamp(4rem, 2.5rem + 6vw, 8rem);
  background: var(--carbon);
  color: var(--ink-inv);
  position: relative;
  overflow: hidden;
}
.page-hero .eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--signal-on-dark);
  display: block;
  margin-bottom: 2rem;
}
.page-hero .lead { color: var(--ink-inv-muted); margin-top: 2rem; max-width: 60ch; }

/* Breadcrumb-ish page counter */

/* ==========================================================================
   08  CARDS & PRIMITIVES
   ========================================================================== */

.card {
  background: var(--ivory-raised);
  border: 1px solid var(--soft-grey);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 1rem + 1.4vw, 2.25rem);
  transition: border-color .4s var(--ease), transform .4s var(--ease), background .4s var(--ease);
}
.card--dark {
  background: var(--carbon-raised);
  border-color: var(--carbon-line);
  color: var(--ink-inv);
}
.card--dark .muted { color: var(--ink-inv-muted); }
.card--flat { background: transparent; }

.card h3, .card .t-h3 { margin-bottom: .75rem; }
.card p { color: var(--ink-muted); font-size: 1rem; line-height: 1.6; }
.card--dark p { color: var(--ink-inv-muted); }

/* Numbered card with hairline top rule */
.card--numbered { padding-top: 1.5rem; border-top: 2px solid var(--carbon); border-radius: 0; background: transparent; border-left: 0; border-right: 0; border-bottom: 0; }
.card--numbered .n {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: .12em;
  color: var(--signal-ink);
  display: block;
  margin-bottom: 1.25rem;
}

/* Auto-fitting card grids */
.cards {
  display: grid;
  gap: clamp(1rem, .6rem + 1.2vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.cards--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.cards--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
/* Four cards with real paragraphs in them — 2x2 rather than an orphaned fourth. */
.cards--wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.cards--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }

/* Pill / chip list */

/* Dot-separated capability line */
.dotline {
  font-size: 1rem;
  color: var(--ink-muted);
  line-height: 1.8;
}
.dotline b { font-weight: 400; color: var(--ink); }

/* Big pull statement */
.statement {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-h2);
  line-height: 1.1;
  letter-spacing: -.028em;
  text-wrap: balance;
}

/* Callout band — the "principle" blocks in the brief */

/* Two-column list of "outgrown / don't need" */
.contrast-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
}
.contrast-list { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.contrast-list li {
  padding: .95rem 0;
  border-bottom: 1px solid var(--carbon-line);
  display: flex;
  gap: .875rem;
  align-items: baseline;
  font-size: 1.0625rem;
}
.contrast-list li::before {
  content: "";
  flex: none;
  width: 14px; height: 1px;
  background: var(--ink-inv-faint);
  transform: translateY(-4px);
}
.contrast-list--ok li::before { background: var(--signal); }

/* Definition rows (outcomes, principles) */
.rows { border-top: 1px solid var(--soft-grey); }
.rows > div {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1rem, .5rem + 2vw, 3rem);
  padding: clamp(1.5rem, 1rem + 1.4vw, 2.25rem) 0;
  border-bottom: 1px solid var(--soft-grey);
  align-items: start;
}
.rows--dark { border-top-color: var(--carbon-line); }
.rows--dark > div { border-bottom-color: var(--carbon-line); }
.rows h3 { font-size: var(--t-h3); }
.rows p { color: var(--ink-muted); margin: 0; }
.rows--dark p { color: var(--ink-inv-muted); }

/* ==========================================================================
   09  DIAGRAMS
   ========================================================================== */

.figure {
  position: relative;
  width: 100%;
}
.figure svg { width: 100%; height: auto; overflow: visible; }
.figure-cap {
  font-family: var(--font-body);
  font-size: var(--t-label);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-faint);
  margin-top: 1.25rem;
  display: flex;
  gap: .625rem;
  align-items: center;
}
.figure-cap::before {
  content: "";
  width: 6px; height: 6px;
  border: 1px solid currentColor;
  transform: rotate(45deg);
  flex: none;
}

/* --- shared SVG primitives --- */
.d-node       { fill: var(--carbon-raised); stroke: var(--carbon-line-2); stroke-width: 1; }
.d-node-light { fill: var(--ivory-raised);  stroke: var(--soft-grey);     stroke-width: 1; }
.d-label {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0;
  text-transform: none;
  fill: var(--ink-inv-muted);
}
.d-label-light { fill: var(--ink-muted); }
.d-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -.01em;
  fill: var(--ivory);
}
.d-title-light { fill: var(--carbon); }
.d-link  { fill: none; stroke: var(--signal); stroke-width: 1.25; opacity: .55; }
.d-link-faint { fill: none; stroke: var(--carbon-line-2); stroke-width: 1; }
.d-arc   { fill: none; stroke: var(--signal); stroke-width: 1; opacity: .35; }
.d-dash  { fill: none; stroke: #B9BDC8; stroke-width: 1; stroke-dasharray: 3 5; }

/* Line-drawing animation driver */

/* Node pop-in */

/* Travelling signal — a short dash running the length of a path.
   Length is measured by site.js and written into --len.               */

/* --- Fragmented stack (left panel of the ecosystem comparison) --- */
.in-view .frag { opacity: 1; transform: translateY(0) rotate(var(--rot, 0deg)); }

/* Ordered architecture (right panel) */
.order-panel {
  position: relative;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border: 1px solid var(--carbon-line);
  border-radius: var(--radius);
  background: var(--carbon);
  min-height: 420px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Architecture layers (blueprint stack) --- */
.layers { display: grid; gap: 0; }
.layer {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 3.2fr) minmax(0, 8.8fr);
  gap: clamp(1rem, .5rem + 2vw, 3rem);
  align-items: center;
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.5rem) clamp(1.25rem, .8rem + 1.4vw, 2.25rem);
  border: 1px solid var(--carbon-line);
  background: rgba(244,241,234,.022);
  transition: background .45s var(--ease), border-color .45s var(--ease);
}
.layer + .layer { border-top: 0; }
.layer:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.layer:last-child  { border-radius: 0 0 var(--radius) var(--radius); }
.layer-name {
  font-family: var(--font-mono);
  font-size: .8125rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ivory);
  display: flex;
  align-items: center;
  gap: .875rem;
}
.layer-name .idx { color: var(--signal-on-dark); font-size: .6875rem; }
.layer-items { color: var(--ink-inv-muted); font-size: 1rem; line-height: 1.7; }
.layer-items b { font-weight: 400; color: var(--ivory); }

/* Connective stitches between layers */
.layer-stitch {
  height: 26px;
  position: relative;
  display: flex;
  justify-content: space-evenly;
  align-items: stretch;
  margin: 0;
}
.layer-stitch i {
  display: block;
  width: 1px;
  background: linear-gradient(to bottom, var(--signal-line), rgba(83,103,255,.08));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .6s var(--ease-out);
  transition-delay: var(--delay, 0s);
}
.in-view .layer-stitch i { transform: scaleY(1); }

/* --- AI query demo --- */
.ai-demo {
  border: 1px solid var(--carbon-line);
  border-radius: var(--radius);
  background: var(--carbon-raised);
  overflow: hidden;
}
.ai-demo + .ai-demo { margin-top: clamp(1rem, .6rem + 1.2vw, 1.75rem); }
.ai-ask {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-bottom: 1px solid var(--carbon-line);
}
.ai-ask .label { flex: none; padding-top: .35rem; }
.ai-ask q {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, .95rem + .7vw, 1.5rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--ivory);
  quotes: "“" "”";
}
.ai-track {
  display: flex;
  align-items: center;
  gap: 0;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  flex-wrap: wrap;
  row-gap: 1rem;
}
.ai-stop {
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-inv-faint);
  border: 1px solid var(--carbon-line);
  border-radius: var(--radius-sm);
  padding: .55rem .75rem;
  white-space: nowrap;
  transition: color .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.ai-stop.is-lit {
  color: var(--ivory);
  border-color: var(--signal);
  background: rgba(83,103,255,.12);
}
.ai-wire {
  flex: 1 1 24px;
  min-width: 24px;
  height: 1px;
  background: var(--carbon-line);
  position: relative;
  overflow: hidden;
}
.ai-wire::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s linear;
}
.ai-wire.is-lit::after { transform: scaleX(1); }
.ai-result {
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-top: 1px solid var(--carbon-line);
  background: rgba(83,103,255,.05);
  display: flex;
  gap: 1rem;
  align-items: baseline;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .55s var(--ease), transform .55s var(--ease-out);
}
.ai-result.is-shown { opacity: 1; transform: none; }
.ai-result strong {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, .95rem + .6vw, 1.375rem);
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--ivory);
}

/* --- Process steps --- */
.steps { counter-reset: step; }
.step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(1rem, .5rem + 2.5vw, 4rem);
  padding: clamp(2rem, 1.2rem + 2.4vw, 3.5rem) 0;
  border-top: 1px solid var(--soft-grey);
  position: relative;
}
.step:last-child { border-bottom: 1px solid var(--soft-grey); }
.step-n {
  font-family: var(--font-body);
  font-size: var(--t-label);
  letter-spacing: 0;
  color: var(--signal-ink);
  margin-bottom: 1rem;
  display: block;
}
.step h3 { font-size: var(--t-h3); }
.step .step-body p { color: var(--ink-muted); }
.step .chips { margin-top: 1.5rem; }

/* --- Ecosystem satellite diagram wrapper --- */
.eco {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(1rem, .5rem + 2vw, 2rem) 0;
}

/* Small connection tick used on mobile cards */
.tether {
  display: flex;
  align-items: center;
  gap: .625rem;
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--signal-ink);
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--signal-line);
}
.tether::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 4px var(--signal-soft);
  flex: none;
}

/* --- Platform family cards --- */
.family { display: grid; gap: 1px; background: var(--soft-grey); border: 1px solid var(--soft-grey); border-radius: var(--radius); overflow: hidden; }
.fam {
  background: var(--ivory-raised);
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(1rem, .5rem + 2vw, 3rem);
  align-items: start;
  transition: background .4s var(--ease);
  position: relative;
}
.fam:hover { background: #fff; }
.fam:hover::before { transform: scaleY(1); }
.fam-key .t-h3 { margin-bottom: .5rem; }
.fam-key .k {
  font-family: var(--font-mono);
  font-size: .8125rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--signal-ink);
  display: block;
  margin-bottom: .75rem;
}
.fam-key p { color: var(--ink-muted); font-size: 1.0625rem; }

/* --- Outcome grid --- */
.outcomes { display: grid; gap: 1px; background: var(--carbon); border: 1px solid var(--carbon-line); border-radius: var(--radius); overflow: hidden; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.outcome {
  background: var(--carbon);
  box-shadow: 0 0 0 1px var(--carbon-line);
  padding: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  transition: background .4s var(--ease);
}
.outcome:hover { background: var(--carbon-raised); }
.outcome .n {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: .14em;
  color: var(--signal-on-dark);
  display: block;
  margin-bottom: 1.5rem;
}
.outcome h3 { font-size: 1.375rem; margin-bottom: .625rem; color: var(--ivory); }
.outcome p { color: var(--ink-inv-muted); font-size: 1rem; margin: 0; }

/* --- Full-screen statement --- */

/* --- Final CTA --- */

/* ==========================================================================
   10  MOTION / REVEAL
   ========================================================================== */



/* Line that draws itself horizontally */

/* Words that stagger up (hero headline).
   The mask needs headroom for descenders, hence the padding/margin pair. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal-l, .reveal-r { opacity: 1; transform: none; }
  .rise > span { transform: none; }
  .draw { stroke-dashoffset: 0; }
  .flow { display: none; }
  .pop { opacity: 1; transform: none; }
  .frag { opacity: 1; transform: none; }
  .rule-draw { transform: none; }
  .layer-stitch i { transform: scaleY(1); }
  .mega .sub, .mega .mark { opacity: 1; transform: none; }
}

/* ==========================================================================
   11  FORMS
   ========================================================================== */

.form { display: grid; gap: 1.5rem; }
.field { display: grid; gap: .6rem; }
.field label {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.field .req { color: var(--signal-ink); }
.field input,
.field select,
.field textarea {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  color: var(--ink);
  background: var(--ivory-raised);
  border: 1px solid var(--soft-grey);
  border-radius: var(--radius-sm);
  padding: .9rem 1rem;
  width: 100%;
  transition: border-color .3s var(--ease), background .3s var(--ease);
  appearance: none;
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%235C6272' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--signal);
  background: #fff;
  outline: none;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 1.5rem; }

.form-note {
  font-size: .9375rem;
  color: var(--ink-muted);
  line-height: 1.6;
}
.form-status {
  padding: 1rem 1.125rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--signal-line);
  background: var(--signal-soft);
  font-size: 1rem;
  display: none;
}
.form-status.is-shown { display: block; }
.form-status.is-error { border-color: #E0B4B4; background: #FBEFEF; }

/* ==========================================================================
   12  FOOTER
   ========================================================================== */

.footer {
  background: var(--carbon-sunken);
  color: var(--ink-inv);
  padding-block: clamp(3.5rem, 2rem + 4vw, 5.5rem) 2.5rem;
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  border-bottom: 1px solid var(--carbon-line);
}
.footer-tag {
  color: var(--ink-inv-muted);
  margin-top: 1.25rem;
  font-size: 1.0625rem;
  max-width: 34ch;
}
.footer-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 2rem;
}
.footer-nav h4 {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-inv-faint);
  font-weight: 500;
  margin-bottom: 1.125rem;
}
.footer-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .625rem; }
.footer-nav a {
  color: var(--ink-inv-muted);
  text-decoration: none;
  font-size: .9375rem;
  transition: color .3s var(--ease);
}
.footer-nav a:hover { color: var(--ivory); }
.footer-bottom {
  padding-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-inv-faint);
}
.footer-bottom a { color: inherit; text-decoration: none; }
.footer-bottom a:hover { color: var(--ivory); }
.footer-bottom .set { display: flex; gap: 1.5rem; flex-wrap: wrap; }

/* ==========================================================================
   13  RESPONSIVE
   ========================================================================== */

@media (max-width: 1040px) {
  .nav { display: none; }
  .header-cta { display: none; }
  .burger { display: flex; }
  /* minmax(0, 1fr), not 1fr — a wide child must never force the track open */
  .split, .split--sticky { grid-template-columns: minmax(0, 1fr); }
  .split--sticky > :first-child { position: static; }
  .fam { grid-template-columns: 1fr; }
  .step { grid-template-columns: 1fr; }
  .rows > div { grid-template-columns: 1fr; gap: .75rem; }
  .footer-top { grid-template-columns: 1fr; }
  .layer { grid-template-columns: 1fr; gap: 1rem; align-items: start; }
}

@media (max-width: 720px) {
  :root { --header-h: 66px; }
  .fragment-grid { grid-template-columns: repeat(2, 1fr); }
  .contrast-cols { gap: 2.5rem; }
  .mega { min-height: 76vh; }
  .btn { width: 100%; justify-content: space-between; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .header .btn { width: auto; }
  .figure-cap { font-size: .6875rem; }
}

/* Desktop-only / mobile-only diagram switching.
   The switch is at 1200px, not at a phone breakpoint, because the wide variant
   is an SVG whose labels are in user units: it renders at scale = container/1000,
   so below ~1200px the 10px labels fall under 10px on screen (7.3px at 861px,
   measured). Above 1200px the container is 1041-1118px and they land at
   10.4-11.2px, in line with the rest of the small type. Everything narrower gets
   the .eco-stack / .ledger-stack HTML variants, which are real text at real sizes. */
.only-wide { display: block; }
.only-narrow { display: none; }
@media (max-width: 1200px) {
  .only-wide { display: none; }
  .only-narrow { display: block; }
}

@media print {
  .header, .mobile-nav, .cta, .footer { display: none; }
  body { background: #fff; }
  .reveal, .reveal-l, .reveal-r { opacity: 1; transform: none; }
}

/* ==========================================================================
   14  PAGE MODULES
   ========================================================================== */

/* ---- Homepage hero ---- */

.hero {
  background: var(--carbon);
  color: var(--ink-inv);
  padding-top: calc(var(--header-h) + clamp(3.5rem, 2rem + 6vw, 7.5rem));
  padding-bottom: clamp(3rem, 2rem + 4vw, 5.5rem);
  position: relative;
  overflow: hidden;
}
.hero::after {
  /* a very quiet field of light behind the architecture */
  content: "";
  position: absolute;
  left: 50%; bottom: -20%;
  width: min(1100px, 120%); aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(83,103,255,.14), transparent 62%);
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }

.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--signal-on-dark);
  margin: 0 0 clamp(1.75rem, 1rem + 2vw, 3rem);
  }
.is-ready .hero-eyebrow { opacity: 1; }

.hero h1 { max-width: 18ch; }
.hero h1 .dim { color: var(--ink-inv-muted); }

.hero-cols {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(1.75rem, 1rem + 3vw, 4rem);
  align-items: end;
  margin-top: clamp(2.25rem, 1.5rem + 2.5vw, 3.75rem);
  
}
.is-ready .hero-cols { opacity: 1; transform: none; }
.hero-cols .lead { color: var(--ink-inv-muted); max-width: 52ch; margin: 0; }

.is-ready .hero-figure { opacity: 1; }



@media (max-width: 900px) {
  .hero-cols { grid-template-columns: 1fr; align-items: start; }
}

/* ---- Fragmented stack overlay (messy connections) ---- */


.compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(1.25rem, .8rem + 2vw, 2.5rem);
  align-items: stretch;
}
.compare-side { display: flex; flex-direction: column; }
/* Captions sit directly under their panel; panels flex to equal height so the
   two sides of the comparison stay aligned. */
.compare-side > .panel-cap { margin-top: 1.5rem; }
.compare-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.compare-head h3 { font-size: var(--t-h4); }
.compare-head .tag {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.compare-side--good .compare-head .tag { color: var(--signal-ink); }
.order-panel .figure-cap { color: var(--ink-inv-faint); }

/* Caption strips beneath each comparison panel */
.panel-cap {
  margin-top: 1.25rem;
  font-family: var(--font-display);
  font-size: var(--t-h4);
  font-weight: 500;
  letter-spacing: -.015em;
}
.panel-cap + p { margin-top: .5rem; color: var(--ink-muted); font-size: 1rem; }

/* ---- Example ecosystem hub ---- */
.hub-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(.75rem, .4rem + 1vw, 1.25rem);
}
.hub-card {
  border: 1px solid var(--carbon-line);
  border-radius: var(--radius);
  background: var(--carbon-raised);
  padding: clamp(1.125rem, .8rem + 1vw, 1.625rem);
  transition: border-color .4s var(--ease), background .4s var(--ease);
}
.hub-card:hover { border-color: var(--signal-line); background: #1C2029; }
.hub-card .k {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--signal-on-dark);
  display: block;
  margin-bottom: .875rem;
}
.hub-card h3 { font-size: 1.0625rem; color: var(--ivory); margin-bottom: .5rem; line-height: 1.25; }
.hub-card p { font-size: .875rem; color: var(--ink-inv-muted); margin: 0; line-height: 1.55; }

.core-link { position: relative; height: 64px; }
.core-drops {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  height: 63px;
}
.core-drops i {
  display: block;
  width: 1px;
  height: 100%;
  justify-self: center;
  background: linear-gradient(to bottom, rgba(83,103,255,.15), var(--signal));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .7s var(--ease-out);
  transition-delay: var(--delay, 0s);
}
.in-view .core-drops i { transform: scaleY(1); }
.core-rail {
  height: 1px;
  background: var(--signal);
  opacity: .55;
  transform: scaleX(0);
  transition: transform 1.1s var(--ease-out) .5s;
}
.in-view .core-rail { transform: scaleX(1); }

.core-bar {
  border: 1px solid var(--signal-line);
  border-radius: var(--radius);
  background: rgba(83,103,255,.07);
  padding: clamp(1.5rem, 1rem + 1.4vw, 2.25rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem clamp(1.5rem, 1rem + 2vw, 3rem);
  justify-content: space-between;
}
.core-bar .core-title {
  font-family: var(--font-mono);
  font-size: .8125rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ivory);
}
.core-bar .core-items {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-inv-muted);
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.25rem;
}

@media (max-width: 980px) {
  .hub-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .core-link { display: none; }
  .core-bar { margin-top: 1.25rem; }
  .hub-card { position: relative; }
}
@media (max-width: 560px) {
  .hub-cards { grid-template-columns: 1fr; }
}

/* ---- Case study (Work page) ---- */
.case {
  border: 1px solid var(--soft-grey);
  border-radius: var(--radius-lg);
  background: var(--ivory-raised);
  overflow: hidden;
}
.case + .case { margin-top: clamp(2rem, 1.2rem + 2.4vw, 3.5rem); }
.case-head {
  padding: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
  border-bottom: 1px solid var(--soft-grey);
  background: var(--carbon);
  color: var(--ivory);
}
.case-head .sector {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--signal-on-dark);
  display: block;
  margin-bottom: 1.25rem;
}
.case-head h2 { font-size: var(--t-h3); max-width: 44ch; }
.case-head .chips { margin-top: 1.75rem; }
.case-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1px; background: var(--ivory-raised); }
.case-cell { background: var(--ivory-raised); box-shadow: 0 0 0 1px var(--soft-grey); padding: clamp(1.5rem, 1rem + 1.4vw, 2.25rem); }
.case-cell h3 {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 1rem;
}
.case-cell p { font-size: 1rem; color: var(--ink-muted); margin: 0; }
.case-cell ul { margin: 0; padding-left: 1.1rem; color: var(--ink-muted); font-size: 1rem; }
.case-cell ul li + li { margin-top: .4rem; }
/* The outcome is the punchline — give it the full width of the last row. */
.case-cell--outcome { background: var(--carbon); grid-column: 1 / -1; }
.case-cell--outcome p { max-width: 90ch; }
.case-cell--outcome h3 { color: var(--signal-on-dark); }
.case-cell--outcome p, .case-cell--outcome ul { color: var(--ink-inv-muted); }
.case-cell--outcome strong { color: var(--ivory); font-weight: 500; }

/* ---- Artefact frames (How It Works) ---- */
.artefact {
  border: 1px solid var(--carbon-line);
  border-radius: var(--radius);
  background: var(--carbon-sunken);
  overflow: hidden;
}
.artefact-bar {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--carbon-line);
  font-family: var(--font-body);
  font-size: .625rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-inv-faint);
}
.artefact-bar::before {
  content: "";
  width: 6px; height: 6px;
  border: 1px solid var(--signal);
  transform: rotate(45deg);
  flex: none;
}
.artefact-body { padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); }

/* Process-map artefact rows */
.pmap { display: grid; gap: .5rem; }
.pmap-row {
  display: grid;
  /* Every track is minmax(0, …): a fixed first track plus a nowrap `auto`
     track would otherwise give the row a ~400px min-content width, which
     propagates up the split and clips body copy off-screen on phones. */
  grid-template-columns: minmax(0, 96px) minmax(0, 1fr) minmax(0, auto);
  gap: .875rem;
  align-items: center;
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-inv-muted);
}
.pmap-row .who { color: var(--ink-inv-faint); }
.pmap-bar {
  height: 22px;
  border-radius: 3px;
  background: rgba(83,103,255,.16);
  border: 1px solid var(--signal-line);
  position: relative;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .8s var(--ease-out);
  transition-delay: var(--delay, 0s);
}
.in-view .pmap-bar { transform: scaleX(1); }
.pmap-row.is-friction .pmap-bar { background: rgba(224,140,140,.14); border-color: rgba(224,140,140,.4); }
.pmap-row .t { color: var(--ink-inv-faint); white-space: nowrap; }

/* On phones the row has nowhere near the width for actor + bar + label on one
   line, so drop the label to its own line and let it wrap. */
@media (max-width: 720px) {
  .pmap-row {
    grid-template-columns: minmax(0, 84px) minmax(0, 1fr);
    row-gap: .3rem;
    margin-bottom: .35rem;
  }
  .pmap-row .t {
    grid-column: 1 / -1;
    white-space: normal;
    line-height: 1.5;
  }
}

/* ---- Contact page ---- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-aside .rows > div { grid-template-columns: 1fr; gap: .5rem; }
.contact-aside .rows h3 { font-size: 1.125rem; }

/* ---- Model picker (Work page) ----
   Progressive enhancement: with JS off every model stays visible and the
   control is hidden, so nothing is ever unreachable. */
.picker { display: none; margin-bottom: clamp(2rem, 1.4rem + 2vw, 3rem); }
.js .picker { display: block; }
/* Sits at the foot of a section rather than above a list — needs air above,
   and a rule to separate it from the argument it follows. */
.picker--wide {
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  margin-bottom: 0;
  padding-top: clamp(2rem, 1.4rem + 2vw, 3rem);
  border-top: 1px solid var(--soft-grey);
}

.picker-q {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 1.125rem;
}
.picker-set { display: flex; flex-wrap: wrap; gap: .5rem; }
.picker-btn {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .7rem 1rem;
  border: 1px solid var(--soft-grey);
  border-radius: var(--radius-sm);
  background: var(--ivory-raised);
  color: var(--ink-muted);
  cursor: pointer;
  transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.picker-btn:hover { border-color: var(--signal-line); color: var(--ink); }
.picker-btn[aria-pressed="true"] {
  background: var(--carbon);
  border-color: var(--carbon);
  color: var(--ivory);
}
.picker-status {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 1.125rem;
  min-height: 1.2em;
}

/* A lone ivory capability would otherwise sit between two ivory neighbours,
   flattening the page. Give it the sunken surface; the carbon one is already
   distinct and keeps its own. */
.section[data-cap].is-solo:not(.s-carbon) { background: var(--ivory-sunken); }

/* Hidden models must really be gone, whatever display they'd otherwise take. */
[hidden] { display: none !important; }
.case[data-model]:not([hidden]) { animation: case-in .5s var(--ease-out) both; }
@keyframes case-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .case[data-model]:not([hidden]) { animation: none; }
}

/* ---- Phase rail (How It Works) ----
   A sequence, not a set of alternatives — so this jumps rather than filters.
   Nothing is ever hidden; the rail only says where you are and lets you skip. */
/* The rail is sticky within the phases only — the wrapper is what releases it,
   so it does not ride over the delivery principles and the closing CTA. */
.rail-scope { position: relative; }
.railwrap {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  background: var(--ivory);
  border-bottom: 1px solid var(--soft-grey);
}
.rail {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: clamp(.25rem, .1rem + .8vw, 1.5rem);
  overflow-x: auto;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail li { flex: none; }

.rail-step {
  display: inline-flex;
  align-items: baseline;
  gap: .55rem;
  padding: 1.125rem .5rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.rail-step .n { color: var(--signal-ink); font-size: .625rem; }
.rail-step:hover { color: var(--ink); }
.rail-step[aria-current="true"] {
  color: var(--ink);
  border-bottom-color: var(--signal);
}

/* The rail pins under the fixed header, so anchored phases need to clear both. */
.railwrap ~ * .anchor,
.railwrap ~ .anchor { scroll-margin-top: calc(var(--header-h) + 78px); }
/* Clear the rail's real height, not just the header's. */
.rail-scope .split--sticky > :first-child { top: calc(var(--header-h) + 82px); }

@media (max-width: 720px) {
  .rail { padding-inline: 0; }
  .rail-step { padding: .95rem .5rem; font-size: .6875rem; }
  /* The rail is wider than the screen. Without an affordance the last two
     phases simply do not exist for a phone user. */
  .railwrap {
    -webkit-mask-image: linear-gradient(to right, #000 82%, transparent 100%);
    mask-image: linear-gradient(to right, #000 82%, transparent 100%);
  }
  .railwrap::after {
    content: "";
    position: absolute;
    right: 0; top: 0; bottom: 1px;
    width: 34px;
    pointer-events: none;
    background: linear-gradient(to right, rgba(244,241,234,0), var(--ivory));
  }
}

/* ---- Ecosystem stack: the phone version of the PSS diagram ----
   Real text rather than a second SVG, so it scales with the user's font size,
   can be selected and translated, and never renders below the 12px floor. */
/* The stack carries its own dark panel, mirroring .note-figure .frame — its
   children use inverted ink and translucent tints, so it cannot sit directly
   on a light section. */
.eco-stack {
  display: grid;
  gap: .625rem;
  background: var(--carbon-sunken);
  border: 1px solid var(--carbon-line);
  border-radius: var(--radius);
  padding: clamp(1rem, .8rem + 1vw, 1.5rem);
}
.note-figure--on-dark .eco-stack {
  background: var(--carbon);
  border-color: var(--carbon-line-2);
}
.eco-node {
  border: 1px solid var(--carbon-line);
  border-radius: var(--radius);
  background: var(--carbon-raised);
  padding: 1.125rem 1.25rem;
}
.eco-node .who {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-inv-faint);
  margin: 0 0 .75rem;
}
.eco-head { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .625rem; }
.eco-head h3 {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ivory);
}
.eco-tag {
  font-family: var(--font-body);
  font-size: .625rem;
  letter-spacing: 0;
  text-transform: none;
  padding: .2rem .5rem;
  border-radius: 3px;
  border: 1px solid var(--signal);
  color: var(--signal-on-dark);
  background: rgba(83,103,255,.12);
}
.eco-tag--pilot { border-color: #4A5060; color: var(--ink-inv-faint); background: rgba(244,241,234,.05); }
.eco-node p.what { font-size: .9375rem; color: var(--ink-inv-muted); margin: 0; line-height: 1.55; }

.eco-join {
  justify-self: center;
  width: 1px;
  height: 22px;
  background: linear-gradient(to bottom, var(--signal-line), var(--signal));
}
.eco-core, .eco-books {
  border-radius: var(--radius);
  padding: 1.125rem 1.25rem;
}
.eco-core { border: 1px solid var(--signal); background: rgba(83,103,255,.08); }
.eco-books { border: 1px solid var(--carbon-line); background: var(--carbon-raised); }
.eco-core .t, .eco-books .t {
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ivory);
  display: block;
  margin-bottom: .5rem;
}
.eco-core p, .eco-books p { font-size: .875rem; color: var(--ink-inv-muted); margin: 0; line-height: 1.55; }
.eco-note {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-inv-faint);
  margin: .25rem 0 0;
  line-height: 1.6;
}

/* ---- Ledger stack: the phone version of the build-note diagram ---- */
.ledger-stack {
  display: grid;
  gap: .75rem;
  background: var(--carbon-sunken);
  border: 1px solid var(--carbon-line);
  border-radius: var(--radius);
  padding: clamp(1rem, .8rem + 1vw, 1.5rem);
}
.ledger-head {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-inv-faint);
  margin: .5rem 0 0;
}
.ledger { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ledger li {
  border: 1px solid var(--carbon-line);
  border-radius: var(--radius-sm);
  background: var(--carbon-raised);
  padding: .875rem 1rem;
  display: grid;
  gap: .3rem;
}
.ledger li b {
  font-family: var(--font-display);
  font-size: .9375rem;
  font-weight: 500;
  color: var(--ivory);
}
.ledger li span {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .04em;
  color: var(--ink-inv-muted);
  line-height: 1.5;
}
.ledger li.is-odd { border-color: var(--signal); }
.ledger li.is-odd span { color: var(--signal-on-dark); }
.ledger li.is-one { border-color: var(--signal); background: rgba(83,103,255,.10); }

/* ---- Register dial: how technical the wording is ----
   Level lives on <html data-level>, written into the HTML so the page reads
   correctly with no JavaScript at all. Elements tag themselves with the levels
   they belong to; `~=` lets one element serve several. */
[data-lvl] { display: none; }
html[data-level="1"] [data-lvl~="1"],
html[data-level="2"] [data-lvl~="2"],
html[data-level="3"] [data-lvl~="3"] { display: revert; }

.dial {
  border-top: 1px solid var(--carbon-line);
  padding-top: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  margin-top: clamp(2rem, 1.4rem + 2vw, 3rem);
}
.dial-q {
  font-family: var(--font-body);
  font-size: var(--t-label);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-inv-faint);
  margin-bottom: 1.25rem;
}
.dial-row { display: flex; align-items: center; gap: clamp(1rem, .6rem + 1.4vw, 2rem); flex-wrap: wrap; }

.dial input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: clamp(160px, 26vw, 260px);
  height: 26px;
  background: transparent;
  cursor: pointer;
  flex: none;
  margin: 0;
}
.dial input[type="range"]::-webkit-slider-runnable-track {
  height: 2px;
  background: var(--carbon-line-2);
  border-radius: 2px;
}
.dial input[type="range"]::-moz-range-track {
  height: 2px;
  background: var(--carbon-line-2);
  border-radius: 2px;
}
.dial input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  margin-top: -8px;
  border-radius: 50%;
  background: var(--signal);
  border: 3px solid var(--carbon);
  box-shadow: 0 0 0 1px var(--signal);
}
.dial input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--signal);
  border: 3px solid var(--carbon);
  box-shadow: 0 0 0 1px var(--signal);
}
.dial input[type="range"]:focus-visible { outline: 2px solid var(--signal); outline-offset: 6px; }

.dial-stops {
  display: flex;
  gap: clamp(.75rem, .4rem + 1.2vw, 1.75rem);
  flex-wrap: wrap;
  font-family: var(--font-body);
  font-size: .6875rem;
  letter-spacing: 0;
  text-transform: none;
}
.dial-stops span { color: var(--ink-inv-faint); transition: color .3s var(--ease); }
html[data-level="1"] .dial-stops span:nth-child(1),
html[data-level="2"] .dial-stops span:nth-child(2),
html[data-level="3"] .dial-stops span:nth-child(3) { color: var(--ivory); }

.hero-credential {
  margin-top: clamp(1.5rem, 1rem + 1.4vw, 2.25rem);
  max-width: 62ch;
  font-family: var(--font-mono);
  font-size: .8125rem;
  line-height: 1.7;
  color: var(--ink-inv-faint);
  border-left: 2px solid var(--signal);
  padding-left: 1.125rem;
}
.dial-hint {
  margin-top: .5rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .06em;
  color: var(--ink-inv-faint);
}
.dial-status {
  margin-top: 1rem;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--ink-inv-muted);
}

/* Without JS the dial cannot do anything, so do not offer it. */
.dial { display: none; }
html.js .dial { display: block; }

/* ---- Long-form prose (the engineering note) ---- */
.prose {
  max-width: 68ch;
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  line-height: 1.72;
  color: var(--ink);
}
/* Both rules are (0,1,0) so the adjacent-sibling one wins on order. Do NOT write
   this reset as `.prose p` — at (0,1,1) it outranks the spacing rule and every
   paragraph gap silently collapses to zero. */
.prose > * { margin: 0; }
.prose > * + * { margin-top: 1.5em; }
.prose h2 {
  font-size: var(--t-h3);
  letter-spacing: -.02em;
  margin-top: 2.6em;
  margin-bottom: -.4em;
}
.prose h2 + p { margin-top: 1.1em; }
.prose strong { font-weight: 500; color: var(--ink); }
.prose em { font-style: italic; }
.prose ul, .prose ol { margin-left: 0; padding-left: 1.35em; color: var(--ink-muted); }
.prose li + li { margin-top: .5em; }
.prose a { color: var(--signal-ink); text-decoration: none; border-bottom: 1px solid var(--signal-line); }
.prose a:hover { border-bottom-color: var(--signal-ink); }
.prose blockquote {
  margin: 2em 0;
  padding-left: clamp(1.25rem, .8rem + 1.4vw, 2rem);
  border-left: 2px solid var(--signal);
  font-family: var(--font-display);
  font-size: var(--t-h4);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -.015em;
  color: var(--ink);
}
.prose code {
  font-family: var(--font-mono);
  font-size: .875em;
  background: var(--ivory-sunken);
  border: 1px solid var(--soft-grey);
  border-radius: 4px;
  padding: .1em .35em;
}
/* A rule that reads as a section break rather than a divider */
.prose hr {
  border: 0;
  margin: 2.8em 0;
  height: 1px;
  background: var(--soft-grey);
  max-width: 5rem;
}

.note-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-bottom: 2rem;
  margin-bottom: 2.75rem;
  border-bottom: 1px solid var(--soft-grey);
}

/* The one drawn idea in the note */
.note-figure {
  margin: clamp(2rem, 1.4rem + 2vw, 3.25rem) 0;
  max-width: 100%;
}
.note-figure .frame {
  border: 1px solid var(--carbon-line);
  border-radius: var(--radius);
  background: var(--carbon-sunken);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  overflow-x: auto;
}
.note-figure svg { width: 100%; height: auto; min-width: 460px; }
/* A denser diagram needs more room before its labels collide. */
.note-figure--wide svg { min-width: 680px; }

/* On a dark section the default frame is the same colour as the surface behind
   it, so lift it and let the caption use the inverted ink. */
.note-figure--on-dark .frame {
  background: var(--carbon);
  border-color: var(--carbon-line-2);
}
.note-figure figcaption {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 1.125rem;
  display: flex;
  flex-wrap: wrap;      /* the scroll hint must not become a second column */
  gap: .625rem;
  align-items: baseline;
}
.note-figure .scroll-hint { display: none; }
/* The diagram is wider than a phone; it scrolls inside its own frame, so say so. */
@media (max-width: 720px) {
  .note-figure .scroll-hint { display: inline; color: var(--signal-ink); }
}
/* Declared after the base rules on purpose: these are equal specificity, so
   source order is the only thing that makes them win. */
.note-figure--on-dark figcaption { color: var(--ink-inv-faint); }
.note-figure--on-dark .scroll-hint { color: var(--signal-on-dark); }

.note-figure figcaption::before {
  content: "";
  width: 6px; height: 6px;
  border: 1px solid currentColor;
  transform: rotate(45deg);
  flex: none;
  position: relative;
  top: .45em;
}

/* ---- Named anchor offset helper ---- */
.anchor { scroll-margin-top: calc(var(--header-h) + 32px); }

/* ---- Diagram switching, resolved last ----
   .only-wide / .only-narrow are declared early (line ~1465), so any component
   that sets its own `display` later at the same specificity — .eco-stack and
   .ledger-stack both set `display: grid` — used to beat them and render the
   mobile stack on desktop as well. Restating the switch at the end of the
   sheet makes source order settle it the right way round. */
@media (min-width: 1201px) { .only-narrow { display: none; } }
@media (max-width: 1200px) { .only-wide  { display: none; } }

/* Products catalog */
.products-page .page-hero {
  padding-top: 8rem;
  padding-bottom: 3rem;
}
.products-page .chip { font-size: .8125rem; }

.product-card {
  padding: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  background: var(--ivory-raised);
  border: 1px solid var(--soft-grey);
  border-top: 3px solid var(--signal);
  border-radius: var(--radius);
}
.product-card-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  margin-bottom: 1.5rem;
}
.product-card-head h2 { margin: 0; }
.product-description {
  max-width: 78ch;
  margin: 0 0 2rem;
  color: var(--ink-muted);
  font-size: var(--t-body);
  line-height: 1.7;
}
.product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; }
.product-card .product-description { margin-bottom: 1.5rem; }
.mobile-nav a.m-link[aria-current="page"] { color: var(--signal-on-dark); }
.footer-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: .25em; }

/* Keep the expanded desktop navigation clear of the logo and contact link. */
@media (min-width: 1041px) and (max-width: 1200px) {
  .header .wrap { gap: 1rem; }
  .header .brand-lockup { width: 166px; }
  .nav { gap: 1rem; }
  .header-cta { margin-left: 0; }
}


/* ---- Our own pilots (products.html) ----
   Each pilot is a two-column block: what it does on the left, where it stops on
   the right. The bounds panel is deliberately given the same weight as the
   pitch — these products are early, and the limits are part of the description
   rather than a disclaimer appended to it. */

.pilot {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(2rem, 1.2rem + 3vw, 4.5rem);
  align-items: start;
}
@media (max-width: 900px) { .pilot { grid-template-columns: minmax(0, 1fr); } }

.pilot-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.pilot-one-line {
  font-size: clamp(1.125rem, 1rem + .55vw, 1.4375rem);
  line-height: 1.4;
  letter-spacing: -.015em;
  color: var(--ink);
  margin-bottom: 1.25rem;
}
.pilot-lede > p { color: var(--ink-muted); max-width: 58ch; }

.pilot-figure { margin: clamp(2rem, 1.4rem + 2vw, 3rem) 0 0; }
.pilot-figure svg {
  width: 100%; height: auto;
  background: var(--ivory-raised);
  border: 1px solid var(--soft-grey);
  border-radius: var(--radius);
  padding: clamp(.75rem, .5rem + 1vw, 1.25rem);
}
.pilot-figure figcaption { margin-top: .75rem; font-size: .9375rem; line-height: 1.5; color: var(--ink-muted); }

.pilot-bounds {
  background: var(--carbon);
  border: 1px solid var(--carbon-line-2);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
}
.pilot-bounds .label { margin-bottom: 1.25rem; }
.pilot-bounds ul { list-style: none; margin: 0; padding: 0; }
.pilot-bounds li {
  position: relative;
  padding: 0 0 0 1.5rem;
  margin-bottom: .875rem;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--ink-inv-muted);
}
.pilot-bounds li::before {
  content: "";
  position: absolute; left: 0; top: .6em;
  width: 8px; height: 1px;
  background: var(--signal);
}
.pilot-data {
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--carbon-line);
  font-size: .875rem;
  line-height: 1.6;
  color: var(--ink-inv-faint);
}
.pilot-data .link { color: var(--signal-on-dark); }

.pilot-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: clamp(2rem, 1.4rem + 2vw, 3rem);
}

/* The .d-* diagram classes are authored for dark panels (.d-title fills ivory),
   so on the pilots' light frames they render invisible. Restate them here
   rather than overriding fill inline on every <text>. */
.pilot-figure .d-title { fill: var(--carbon); }
.pilot-figure .d-label { fill: var(--ink-muted); }
.pilot-figure .d-label.is-signal { fill: var(--signal-ink); }
.pilot-figure .d-node-light { fill: #FFFFFF; stroke: var(--soft-grey); }

/* ---- "Built and running" cards on the homepage ---- */
.built-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.built-head .label { margin: 0; color: var(--ink-inv-faint); }
.card--dark h3 { color: var(--ink-inv); }
.card--dark .link { display: inline-flex; margin-top: 1.25rem; }

/* ---- de-vibe pass: single-colour headings, plain hero lines, plain closer ---- */
h1 .muted, h2 .muted, .t-hero .muted, .t-h1 .muted, .t-h2 .muted { color: inherit; }
.t-hero .line { display: block; }
.was-principle { max-width: 62ch; margin-top: 2rem; }
.closer-wrap { padding-top: 0; }
.closer { max-width: 62ch; font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); line-height: 1.6; color: var(--ink); }
.card { transition: none; }
.chip { display: inline-block; font-family: var(--font-body); font-size: .8125rem; font-weight: 500; letter-spacing: 0; text-transform: none; padding: .15rem .55rem; border: 1px solid var(--soft-grey); border-radius: 3px; color: var(--ink-muted); }

/* ---- real screenshots: a plain border, no chrome, no bezel ---- */
.pilot-figure img { display: block; width: 100%; height: auto; border: 1px solid var(--soft-grey); border-radius: var(--radius); background: #fff; }
.pilot-figure--phone { max-width: 340px; margin-top: clamp(1.5rem, 1rem + 1.4vw, 2.25rem); }

/* ---- Notes: a dated list, nothing else ---- */
.notes { max-width: 68ch; margin: 1.5rem 0 0; }
.notes dt { font-weight: 600; margin-top: 1.5rem; }
.notes dd { margin: .35rem 0 0; color: var(--ink-muted); line-height: 1.6; }


/* =====================================================================
   De-vibe pass 2 — one light surface per page.
   The heroes and every mid-page section sit on ivory; the footer is the
   only dark surface; diagram figures keep their dark frame because they
   are self-contained components with light ink baked into their SVG.
   Appended so source order settles every earlier dark rule.
   ===================================================================== */
h1, h2, h3, h4, .t-hero, .t-h1, .t-h2, .t-h3, .t-h4 { font-weight: 600; letter-spacing: -.01em; }
.section--lg { padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); }

/* header: always ivory, dark logo, no surface swap */
.header, .header.is-stuck { background: var(--ivory); border-bottom: 1px solid var(--soft-grey); backdrop-filter: none; }
.header .brand, .header .nav-link, .header.is-stuck .brand, .header.is-stuck .nav-link { color: var(--carbon); }
.header .nav-link::after { background: var(--carbon); }
.header .burger span { background: var(--carbon); }
.header .brand-logo--light { visibility: hidden; }
.header .brand-logo--dark { visibility: visible; }
.header .btn--on-dark, .header.is-stuck .btn--on-dark { --btn-bg: transparent; --btn-fg: var(--carbon); --btn-bd: var(--carbon-line-2, #B9BDC8); }
.header .btn--on-dark:hover { --btn-bg: var(--signal); --btn-fg: #fff; --btn-bd: var(--signal); }

/* heroes and dark sections become ivory */
.hero, .page-hero, .s-carbon, .s-carbon-deep { background: var(--ivory); color: var(--ink); }
.hero, .page-hero { border-bottom: 1px solid var(--soft-grey); }
.hero-cols .lead, .page-hero .lead { color: var(--ink-muted); }
.s-carbon .muted, .s-carbon-deep .muted, .hero .muted { color: var(--ink-muted); }
.s-carbon .faint, .s-carbon-deep .faint { color: var(--ink-faint); }
.s-carbon .label, .s-carbon-deep .label { color: var(--ink-muted); }
.s-carbon .link, .s-carbon-deep .link, .link--dark { color: var(--signal-ink); }
.btn--ghost-dark { --btn-bg: transparent; --btn-fg: var(--carbon); --btn-bd: var(--carbon-line-2, #B9BDC8); }
.btn--ghost-dark:hover { --btn-bg: var(--carbon); --btn-fg: var(--ivory); --btn-bd: var(--carbon); }
.contrast-list li::before { background: var(--ink-faint); }
.rows--dark p { color: var(--ink-muted); }

/* components that assumed a dark parent */
.card--dark { background: var(--ivory-raised); border-color: var(--soft-grey); color: var(--ink); }
.card--dark h3 { color: var(--ink); }
.card--dark p, .card--dark .muted { color: var(--ink-muted); }
.built-head .label { color: var(--ink-muted); }
.eco-tag { border-color: var(--signal-line); color: var(--signal-ink); background: var(--signal-soft); }
.eco-tag--pilot { border-color: var(--soft-grey); color: var(--ink-muted); background: transparent; }
.eco-stack .eco-tag, .eco-stack .eco-tag--pilot, .note-figure .frame .eco-tag { border-color: var(--signal); color: var(--signal-on-dark); background: rgba(83,103,255,.12); }
.pilot-bounds { background: var(--ivory-raised); border-color: var(--soft-grey); }
.pilot-bounds li { color: var(--ink-muted); }
.pilot-bounds .label { color: var(--signal-ink); }
.pilot-data { color: var(--ink-faint); border-top-color: var(--soft-grey); }
.pilot-data .link { color: var(--signal-ink); }
.case-head { background: var(--ivory-raised); color: var(--ink); border: 1px solid var(--soft-grey); border-bottom: 0; }
.case-head .sector { color: var(--signal-ink); }
.case-cell--outcome { background: var(--ivory-raised); }
.case-cell--outcome h3 { color: var(--signal-ink); }
.case-cell--outcome p, .case-cell--outcome ul { color: var(--ink-muted); }
.case-cell--outcome strong { color: var(--ink); }
.artefact { background: var(--ivory-raised); border: 1px solid var(--soft-grey); }
.artefact-bar { color: var(--ink-faint); }
.pmap-row { color: var(--ink-muted); }
.pmap-row .who, .pmap-row .t { color: var(--ink-faint); }
.ai-demo { background: var(--ivory-raised); border: 1px solid var(--soft-grey); }
.ai-ask q { color: var(--ink); }
.ai-stop { color: var(--ink-muted); border-color: var(--soft-grey); }
.ai-result strong { color: var(--ink); }
.outcomes, .outcome { background: var(--ivory-raised); }
.outcome h3 { color: var(--ink); } .outcome p { color: var(--ink-muted); } .outcome .n { color: var(--signal-ink); }
.note-figure--on-dark figcaption { color: var(--ink-muted); }
.note-figure--on-dark .scroll-hint { color: var(--signal-ink); }
.skip-link { background: var(--carbon); color: var(--ivory); }

/* the dial, on ivory and neutral */
.dial { border-top-color: var(--soft-grey); }
.dial-q, .dial-stops span, .dial-hint { color: var(--ink-faint); }
.dial-status { color: var(--ink-muted); }
html[data-level="1"] .dial-stops span:nth-child(1),
html[data-level="2"] .dial-stops span:nth-child(2),
html[data-level="3"] .dial-stops span:nth-child(3) { color: var(--ink); font-weight: 600; }
.dial input[type="range"]::-webkit-slider-runnable-track { background: var(--soft-grey); }
.dial input[type="range"]::-moz-range-track { background: var(--soft-grey); }
.dial input[type="range"]::-webkit-slider-thumb { background: var(--carbon); border-color: var(--ivory); box-shadow: 0 0 0 1px var(--carbon); }
.dial input[type="range"]::-moz-range-thumb { background: var(--carbon); border-color: var(--ivory); box-shadow: 0 0 0 1px var(--carbon); }
.hero-credential { color: var(--ink-muted); border-left-color: var(--signal); }

/* =====================================================================
   De-vibe pass 3 — no monospace or uppercase outside code.
   The label look survived the first two passes under other class names
   (footer headings, form labels, pickers, phase rail, case card, the
   diagram's phone variant, figure captions). Monospace is for code.
   ===================================================================== */
.skip-link, .mobile-nav a.m-link .n, .page-hero .eyebrow, .card--numbered .n, .outcome .n,
.field label, .footer-nav h4, .footer-bottom, .compare-head .tag, .case-head .sector,
.case-cell h3, .pmap-row, .picker-q, .picker-btn, .picker-status, .rail-step,
.eco-node .who, .eco-core .t, .eco-books .t, .eco-note, .ledger-head, .ledger li span,
.hero-credential, .dial-hint, .note-figure figcaption {
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: 0;
}
.field label, .picker-q, .picker-status, .rail-step, .picker-btn, .dial-hint,
.eco-node .who, .eco-note, .ledger-head, .compare-head .tag, .footer-bottom { font-size: .8125rem; }
.case-cell h3, .footer-nav h4 { font-size: .9375rem; font-weight: 600; }
.case-head .sector, .eco-core .t, .eco-books .t { font-size: .875rem; font-weight: 600; }
.hero-credential { font-size: .9375rem; line-height: 1.6; }
.note-figure figcaption { font-size: .9375rem; line-height: 1.5; }
.pmap-row { font-size: .875rem; }
/* The hero's "quiet field of light" was a decorative glow. Gone. */
.hero::after { content: none; display: none; }