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

/* ═════════════  PALETTE  ═════════════
   Raw values. Never theme-dependent; never referenced directly by a
   component rule. Components use the semantic layer below. */
:root {
  --obsidian:      #1d1d1f;
  --frost-white:   #f5f5f7;
  --pure-black:    #000000;
  --paper-white:   #ffffff;
  --carbon:        #111111;
  --platinum:      #86868b;
  --graphite:      #333336;
  --smoke:         #424245;
  --apple-blue:    #0071e3;
  --apple-blue-hi: #0077ed;
  --link-blue:     #0066cc;
  --halo-blue:     #2997ff;
  --signal-orange: #f56900;
  --reef-teal:     #00a1b3;
  --iris-violet:   #8668ff;

  /* Type */
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, "Segoe UI", Roboto, sans-serif;
  --font-text:    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, "Segoe UI", Roboto, sans-serif;

  --text-caption:    12px;
  --text-body:       17px;
  --text-heading-sm: 19px;
  --text-heading:    clamp(1.375rem, 2vw, 1.5rem);
  --text-heading-lg: clamp(1.625rem, 3vw, 2rem);
  --text-display:    clamp(2.125rem, 5.2vw, 3.5rem);
  --text-hero:       clamp(2.75rem, 7.4vw, 5rem);

  --gutter: 32px;
  --section-gap: 104px;

  --radius-links:   10px;
  --radius-cards:   28px;
  --radius-buttons: 36px;
  --radius-pill:    980px;

  --page-max: 1200px;
}

/* ═════════════  SEMANTIC LAYER  ═════════════
   Dark is the default because the design language is dark-stage-first.
   Every surface, ink and rule flips here — an earlier version only
   themed two of six sections, so the toggle looked broken. */
:root {
  --surface-0:  var(--pure-black);   /* page and stage */
  --surface-1:  var(--carbon);       /* tiles, figure frames */
  --surface-2:  var(--obsidian);     /* alternate band, footer */
  --ink:        var(--frost-white);
  --ink-muted:  var(--platinum);
  --rule:       var(--graphite);
  --rule-soft:  var(--smoke);
  --accent:     var(--signal-orange);
  --link:       var(--halo-blue);
  --link-hover: #52aaff;
  --nav-bg:     rgba(0, 0, 0, .88);
  --nav-border: rgba(255, 255, 255, .1);
  --hover-wash: rgba(255, 255, 255, .08);
  --ghost-num:  var(--graphite);

  /* Figure tokens — inline SVG resolves these, so one set of figures
     serves both themes. Standalone .svg files fall back to the dark values. */
  --fig-ink:    #f5f5f7;
  --fig-muted:  #86868b;
  --fig-rule:   #333336;
  --fig-soft:   #6e6e73;
  --fig-s1:     #2997ff;
  --fig-s2:     #00a1b3;
  --fig-accent: #f56900;
}

/* Light theme: applied by OS preference unless the visitor has chosen,
   and by the toggle when they have. */
@media (prefers-color-scheme: light) {
  :root:not(.dark-theme) {
    --surface-0:  var(--paper-white);
    --surface-1:  var(--frost-white);
    --surface-2:  var(--frost-white);
    --ink:        var(--obsidian);
    --ink-muted:  #6e6e73;
    --rule:       #d2d2d7;
    --rule-soft:  #c7c7cc;
    --accent:     #b84f00;
    --link:       var(--link-blue);
    --link-hover: #0055aa;
    --nav-bg:     rgba(255, 255, 255, .9);
    --nav-border: rgba(0, 0, 0, .12);
    --hover-wash: rgba(0, 0, 0, .06);
    --ghost-num:  #d2d2d7;

    --fig-ink:    #1d1d1f;
    --fig-muted:  #6e6e73;
    --fig-rule:   #d2d2d7;
    --fig-soft:   #86868b;
    --fig-s1:     #0062c4;
    --fig-s2:     #00707c;
    --fig-accent: #b84f00;
  }
}

html.light-theme {
  --surface-0:  var(--paper-white);
  --surface-1:  var(--frost-white);
  --surface-2:  var(--frost-white);
  --ink:        var(--obsidian);
  --ink-muted:  #6e6e73;
  --rule:       #d2d2d7;
  --rule-soft:  #c7c7cc;
  --accent:     #b84f00;
  --link:       var(--link-blue);
  --link-hover: #0055aa;
  --nav-bg:     rgba(255, 255, 255, .9);
  --nav-border: rgba(0, 0, 0, .12);
  --hover-wash: rgba(0, 0, 0, .06);
  --ghost-num:  #d2d2d7;

  --fig-ink:    #1d1d1f;
  --fig-muted:  #6e6e73;
  --fig-rule:   #d2d2d7;
  --fig-soft:   #86868b;
  --fig-s1:     #0062c4;
  --fig-s2:     #00707c;
  --fig-accent: #b84f00;
}

html.dark-theme {
  --surface-0:  var(--pure-black);
  --surface-1:  var(--carbon);
  --surface-2:  var(--obsidian);
  --ink:        var(--frost-white);
  --ink-muted:  var(--platinum);
  --rule:       var(--graphite);
  --rule-soft:  var(--smoke);
  --accent:     var(--signal-orange);
  --link:       var(--halo-blue);
  --link-hover: #52aaff;
  --nav-bg:     rgba(0, 0, 0, .88);
  --nav-border: rgba(255, 255, 255, .1);
  --hover-wash: rgba(255, 255, 255, .08);
  --ghost-num:  var(--graphite);

  --fig-ink:    #f5f5f7;
  --fig-muted:  #86868b;
  --fig-rule:   #333336;
  --fig-soft:   #6e6e73;
  --fig-s1:     #2997ff;
  --fig-s2:     #00a1b3;
  --fig-accent: #f56900;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  background: var(--surface-0);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-text);
  background: var(--surface-0);
  color: var(--ink);
  line-height: 1.47;
  letter-spacing: -0.016em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-variant-numeric: tabular-nums;
}

a { color: var(--link); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--link-hover); }

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

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

/* ─────────────────────────  PILL NAV  ───────────────────────── */
.nav-shell {
  position: sticky;
  top: 12px;
  z-index: 1000;
  padding: 12px var(--gutter) 0;
}

nav {
  max-width: var(--page-max);
  margin: 0 auto;
  background: var(--nav-bg);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--nav-border);
  border-radius: var(--radius-pill);
  padding: 10px 12px 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.wordmark {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--ink);
  white-space: nowrap;
}

.nav-links { display: flex; align-items: center; gap: 26px; }

.nav-links a {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
  opacity: .78;
  transition: opacity .2s ease;
  white-space: nowrap;
}
.nav-links a:hover { opacity: 1; color: var(--ink); }

.nav-right { display: flex; align-items: center; gap: 8px; }

.nav-cta {
  background: var(--apple-blue);
  color: var(--paper-white) !important;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.016em;
  padding: 9px 20px;
  border-radius: var(--radius-buttons);
  opacity: 1 !important;
  transition: background .2s ease;
  white-space: nowrap;
}
.nav-cta:hover { background: var(--apple-blue-hi); color: var(--paper-white) !important; }

.icon-btn {
  background: none;
  border: none;
  color: var(--ink);
  cursor: pointer;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  opacity: .78;
  transition: opacity .2s ease, background .2s ease;
}
.icon-btn:hover { opacity: 1; background: var(--hover-wash); }
.icon-btn svg { width: 17px; height: 17px; fill: currentColor; }

.menu-btn { display: none; }
.menu-btn svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

/* ─────────────────────────  DARK STAGE  ───────────────────────── */
.stage { background: var(--surface-0); }

.eyebrow {
  font-size: var(--text-heading-sm);
  font-weight: 600;
  letter-spacing: -0.0147em;
  color: var(--accent);
  margin-bottom: 14px;
}
.eyebrow-sm {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}

/* ── Hero ── */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  align-items: center;
  gap: 40px;
  padding: 76px 0 60px;
}

.hero h1 {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 26px;
}
.hero h1 em { font-style: normal; color: var(--ink-muted); }

.hero-sub {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: -0.011em;
  color: var(--ink-muted);
  max-width: 30em;
  margin-bottom: 34px;
}

.hero-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.btn-primary {
  background: var(--apple-blue);
  color: var(--paper-white);
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.016em;
  padding: 13px 26px;
  border-radius: var(--radius-buttons);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  transition: background .2s ease;
}
.btn-primary:hover { background: var(--apple-blue-hi); color: var(--paper-white); }

/* The secondary action is OUTLINED, not a faded text link. The reference is
   explicit: pair a filled action with an outlined one, never two fills and never
   a ghost so quiet it reads as body copy. Border and text both take --link
   (#0066cc on light, #2997ff on dark), which keeps the filled blue reserved for
   exactly one job. Dropping the .82 opacity also removes a contrast risk —
   translucent text was the only place the system tinted a foreground. */
.btn-ghost {
  color: var(--link);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.016em;
  padding: 12px 21px;
  border: 1px solid var(--link);
  border-radius: var(--radius-buttons);
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  transition: color .2s ease, border-color .2s ease;
}
.btn-ghost:hover { color: var(--link-hover); border-color: var(--link-hover); }

/* ── Constellation ── */
.constellation {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  max-height: 420px;
  justify-self: center;
}
.constellation canvas { display: block; width: 100%; height: 100%; }

/* ── Stats ── */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  padding: 48px 0 96px;
  border-top: 1px solid var(--rule);
}
.stat-num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  font-weight: 600;
  line-height: 1.07;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.stat-label {
  font-size: var(--text-caption);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink-muted);
  margin-top: 10px;
}

/* ── Statement ── */
.statement { padding: 0 0 var(--section-gap); }
.statement p {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 16em;
}
.statement em { font-style: normal; color: var(--ink-muted); }

/* ── Partners ── */
.partners { padding-bottom: var(--section-gap); }
.partners-title {
  font-size: var(--text-caption);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink-muted);
  margin-bottom: 26px;
}
.partners-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 44px;
  align-items: baseline;
  padding-top: 26px;
  border-top: 1px solid var(--rule);
}
.partners-row span {
  font-family: var(--font-display);
  font-size: var(--text-heading-sm);
  font-weight: 600;
  letter-spacing: -0.0147em;
  color: var(--ink);
  opacity: .62;
}

/* ── Section headline (dark, standalone) ── */
.section-head { padding-bottom: 60px; }
.section-head h2 {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 600;
  line-height: 1.07;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 16em;
}
.section-head p {
  font-size: var(--text-body);
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 34em;
  margin-top: 18px;
}

/* ── Capability rows (zigzag, no cards) ── */
.cap-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px 64px;
  align-items: center;
  padding: 60px 0;
  border-top: 1px solid var(--rule);
}
.cap-row:last-of-type { border-bottom: 1px solid var(--rule); }
.cap-row.flip .cap-copy { order: 2; }
.cap-row.flip .cap-visual { order: 1; }

.cap-copy h3 {
  font-family: var(--font-display);
  font-size: var(--text-heading-lg);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 16px;
}
.cap-copy p {
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 34em;
}

.cap-visual { display: flex; align-items: center; gap: 32px; }

.cap-index {
  font-family: var(--font-display);
  font-size: clamp(4rem, 9vw, 7rem);
  font-weight: 600;
  line-height: .9;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1px var(--ghost-num);
  flex-shrink: 0;
}

.cap-methods { list-style: none; flex: 1; min-width: 0; }
.cap-methods li {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.016em;
  color: var(--ink-muted);
  padding: 11px 0;
  border-bottom: 1px solid var(--rule);
}
.cap-methods li:first-child { border-top: 1px solid var(--rule); }

/* ─────────────────────────  LIGHT DETAIL BAND  ───────────────────────── */
.band {
  background: var(--surface-2);
  color: var(--ink);
  padding: var(--section-gap) 0;
  transition: background .4s ease, color .4s ease;
}
.band .eyebrow-sm, .band .eyebrow { color: var(--accent); }
.band .section-head h2 { color: var(--ink); }
.band .section-head p { color: var(--ink-muted); }

.work-row {
  display: grid;
  grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
  gap: 24px 56px;
  padding: 48px 0;
  border-top: 1px solid var(--rule);
}
.work-row:last-of-type { border-bottom: 1px solid var(--rule); }

.work-tag {
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1.5;
}
.work-row h3 {
  font-family: var(--font-display);
  font-size: var(--text-heading-lg);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 14px;
  max-width: 22em;
}
.work-row p {
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 40em;
  margin-bottom: 18px;
}
.work-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-body);
  font-weight: 400;
  color: var(--link);
}
.work-link:hover { color: var(--link); text-decoration: underline; }

/* ── Standards: inline feature links ── */
.standards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px;
  padding-top: 8px;
}
.standard { display: flex; gap: 16px; align-items: flex-start; }
.standard-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  display: flex; align-items: center; justify-content: center;
}
.standard-icon svg {
  width: 15px; height: 15px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.standard h4 {
  font-size: var(--text-body);
  font-weight: 600;
  letter-spacing: -0.011em;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 7px;
}
.standard p {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink-muted);
}

/* ─────────────────────────  CLOSING CTA  ───────────────────────── */
.closing {
  padding: 140px 0 130px;
  text-align: center;
}
.closing h2 {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 700;
  line-height: 1.07;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 18px;
}
.closing p {
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 30em;
  margin: 0 auto 34px;
}
.closing .hero-actions { justify-content: center; }

/* ─────────────────────────  FOOTER  ───────────────────────── */
footer {
  background: var(--surface-2);
  padding: 40px 0;
  font-size: var(--text-caption);
  line-height: 1.5;
  color: var(--ink-muted);
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
.footer-links { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-links a { color: var(--ink-muted); }
.footer-links a:hover { color: var(--ink); }

/* ─────────────────────────  REVEAL  ───────────────────────── */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ─────────────────────────  RESPONSIVE  ───────────────────────── */
@media (max-width: 1024px) {
  :root { --section-gap: 88px; }
  .hero { grid-template-columns: 1fr; gap: 8px; padding-top: 56px; }
  .constellation { order: -1; aspect-ratio: 2 / 1; max-height: 290px; }
  .cap-row, .cap-row.flip { grid-template-columns: 1fr; gap: 32px; }
  .cap-row.flip .cap-copy, .cap-row.flip .cap-visual { order: 0; }
  .standards { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 768px) {
  :root { --gutter: 20px; --section-gap: 72px; }

  /* ── Thumb-zone menu ──────────────────────────────────────────────────
     The menu used to drop DOWN from the top bar, which put every link in the
     upper half of the screen — the part of a phone a thumb cannot reach while
     holding it one-handed. It is now a bottom sheet: it rises from the edge the
     thumb rests on, and the order is deliberate. The primary action sits
     LOWEST, because the bottom of the sheet is the easiest place to hit and the
     top of a tall sheet is the hardest.

     Established pattern, not an experiment: the trigger, the roles, Escape,
     outside-click and aria-expanded are all unchanged, and with JS off the
     sheet is simply never opened — every link still exists in the footer. */
  .nav-links {
    display: none;
    position: fixed;
    left: 8px; right: 8px;
    bottom: 8px;
    top: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    background: var(--surface-0);
    border: 1px solid var(--nav-border);
    border-radius: var(--radius-cards);
    /* Clear of the home indicator on a notched device. */
    padding: 10px 14px calc(14px + env(safe-area-inset-bottom));
    max-height: calc(100dvh - 120px);
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 1200;
  }
  .nav-links.open { display: flex; }

  /* A grab handle reads instantly as "this came from the bottom edge". */
  .nav-links.open::before {
    content: "";
    align-self: center;
    width: 36px; height: 4px;
    margin: 2px 0 8px;
    border-radius: var(--radius-pill);
    background: var(--rule-soft);
    flex: none;
  }

  /* 48px targets. Apple's minimum is 44; the extra 4 is for the fact that a
     thumb arriving at an angle is less accurate than a fingertip. */
  .nav-links a {
    font-size: 16px;
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: 11px 14px;
    border-radius: var(--radius-links);
  }

  /* Primary action last in the flow and visually anchored — the sheet's
     bottom edge is the single easiest point to reach. */
  .nav-cta {
    order: 99;
    text-align: center;
    justify-content: center;
    margin-top: 8px;
    min-height: 50px;
  }

  /* Scrim: makes the sheet a mode, and gives a large forgiving dismiss target
     anywhere on the page. */
  .nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 1150;
    background: rgba(0, 0, 0, .38);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border: 0;
    width: 100%;
    cursor: default;
  }

  /* `backdrop-filter` makes an element the containing block for any
     `position: fixed` descendant. With it on, the bottom sheet anchored to the
     nav pill instead of the viewport and sat near the top of the screen — the
     exact opposite of the intent. The blur comes off on phones and the bar goes
     fully opaque, which it very nearly was already at 88% alpha. */
  nav {
    position: relative;
    padding-left: 20px;
    background: var(--surface-0);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  /* `.nav-shell` is sticky with a z-index, so it opens a stacking context and
     the sheet inside it cannot escape — the scrim at 1150 painted straight over
     the sheet and greyed it out. Lifting the whole shell above the scrim fixes
     the sheet and keeps the bar live, so the menu icon still closes the sheet. */
  .nav-shell { z-index: 1300; }

  .menu-btn { display: flex; }
  /* Both nav icons get a full 48px target. They stay in the bar for context,
     but the reachable surface is what the thumb is aiming at. */
  .icon-btn { width: 48px; height: 48px; }
  /* The wordmark is the home link, and it was a 28px-tall tap target. */
  .wordmark { display: inline-flex; align-items: center; min-height: 44px; }

  .stats { grid-template-columns: 1fr 1fr; gap: 28px 20px; padding-bottom: 72px; }
  .work-row { grid-template-columns: 1fr; gap: 14px; padding: 36px 0; }
  .cap-visual { gap: 24px; }
  .closing { padding: 96px 0 88px; }
  .hero-actions { width: 100%; }
  .btn-primary, .btn-ghost { flex: 1 1 auto; justify-content: center; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}

/* ═════════════  FRAMEWORKS PAGE (schemas.html)  ═════════════ */
.page-hero { padding: 88px 0 76px; }
.page-hero h1 {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 700;
  line-height: 1.07;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 14em;
  margin-bottom: 22px;
}
.page-hero p {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 34em;
}

.framework {
  padding: 60px 0;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 40px 64px;
  align-items: start;
}
.band .framework { border-top-color: var(--rule); }
.framework:last-of-type { border-bottom: 1px solid var(--rule); }
.band .framework:last-of-type { border-bottom-color: var(--rule); }

.framework h2 {
  font-family: var(--font-display);
  font-size: var(--text-heading-lg);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 14px;
}
.framework p {
  font-size: var(--text-body);
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 34em;
  margin-bottom: 20px;
}
.band .framework h2 { color: var(--ink); }
.band .framework p { color: var(--ink-muted); }

/* Allocation bars */
.alloc { display: flex; flex-direction: column; gap: 20px; }
.alloc-row-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-size: 13px;
  letter-spacing: -0.01em;
  margin-bottom: 9px;
}
.alloc-name { color: var(--ink); font-weight: 400; }
.alloc-pct  { color: var(--link); font-weight: 600; font-variant-numeric: tabular-nums; }
.band .alloc-name { color: var(--ink); }
.band .alloc-pct  { color: var(--link); }
.alloc-track {
  height: 6px;
  background: var(--rule);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.band .alloc-track { background: var(--rule); }
.alloc-fill { height: 100%; background: var(--apple-blue); border-radius: var(--radius-pill); }

/* Ordered step / pillar lists — hairline rows, no boxes */
.steps { list-style: none; }
.steps li {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 15px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 15px;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.steps li:first-child { border-top: 1px solid var(--rule); }
.band .steps li { border-color: var(--rule); color: var(--ink); }
.step-idx {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  min-width: 4.5em;
}
.band .step-idx, .band .step-note { color: var(--ink-muted); }
.steps li.is-terminal .step-idx,
.steps li.is-terminal .step-note { color: var(--accent); }
.band .steps li.is-terminal .step-idx,
.band .steps li.is-terminal .step-note { color: var(--accent); }
.step-note {
  margin-left: auto;
  font-size: 13px;
  color: var(--ink-muted);
  text-align: right;
}

@media (max-width: 1024px) {
  .framework { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 768px) {
  .steps li { flex-wrap: wrap; gap: 4px 14px; }
  .step-note { margin-left: 0; width: 100%; text-align: left; }
}

/* ═════════════  CENTRED UTILITY PAGES (404, access)  ═════════════ */
body.centred {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 64px var(--gutter);
}
.centred-card { max-width: 34em; }
.centred-card h1 {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 700;
  line-height: 1.07;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 18px;
}
.centred-card p {
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink-muted);
  margin: 0 auto 34px;
}
.centred-card .hero-actions { justify-content: center; }
.centred-note { margin-top: 26px; font-size: var(--text-caption); color: var(--ink-muted); }
.back-link {
  position: fixed;
  top: 24px; left: 24px;
  font-size: 13px;
  color: var(--ink-muted);
}
.back-link:hover { color: var(--ink); }

/* ═════════════  DRILL-DOWN DISCLOSURE  ═════════════ */
.nav-drop { position: relative; }
.nav-drop > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
  opacity: .78;
  transition: opacity .2s ease;
  white-space: nowrap;
}
.nav-drop > summary::-webkit-details-marker { display: none; }
.nav-drop > summary:hover,
.nav-drop[open] > summary { opacity: 1; }
.nav-drop > summary .chev {
  width: 9px; height: 9px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .25s cubic-bezier(.16,1,.3,1);
}
.nav-drop[open] > summary .chev { transform: rotate(180deg); }

.nav-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  width: min(92vw, 520px);
  background: var(--surface-1);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--rule);
  border-radius: var(--radius-cards);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 40;
}
.nav-menu a {
  display: block;
  padding: 12px 14px;
  border-radius: var(--radius-links);
  opacity: 1;
  white-space: normal;          /* .nav-links a sets nowrap; menu copy wraps */
  transition: background .18s ease;
}
.nav-menu a:hover { background: var(--hover-wash); }
.nmi-title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.014em;
  color: var(--ink);
  margin-bottom: 3px;
}
.nmi-desc {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-muted);
  letter-spacing: -0.01em;
}
.nav-menu .nmi-lead .nmi-title { color: var(--link); }
.nav-menu hr { border: none; border-top: 1px solid var(--rule); margin: 8px 4px; }

/* Row-level drill-down */
.drill { margin-top: 24px; }
.drill > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.014em;
  color: var(--link);
}
.drill > summary::-webkit-details-marker { display: none; }
.drill > summary .chev {
  width: 10px; height: 10px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .25s cubic-bezier(.16,1,.3,1);
}
.drill[open] > summary .chev { transform: rotate(180deg); }
.band .drill > summary { color: var(--link); }

.drill-body {
  padding-top: 22px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 44px;
}
.drill-group h4 {
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 12px;
}
.band .drill-group h4 { color: var(--ink-muted); }
.drill-group ul { list-style: none; }
.drill-group li {
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: -0.014em;
  color: var(--ink);
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
}
.band .drill-group li { color: var(--ink); border-color: var(--rule); }
.drill-group li:first-child { border-top: 1px solid var(--rule); }
.band .drill-group li:first-child { border-top-color: var(--rule); }

/* ═════════════  VISUALISATION SHOWCASE  ═════════════ */
.figure-block { padding: 56px 0; border-top: 1px solid var(--rule); }
.figure-block:last-of-type { border-bottom: 1px solid var(--rule); }

.figure-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 20px 56px;
  align-items: start;
  margin-bottom: 30px;
}
.figure-head h3 {
  font-family: var(--font-display);
  font-size: var(--text-heading-lg);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 18em;
}
.figure-head p {
  font-size: var(--text-body);
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 40em;
}

/* Carbon layer — surface contrast, no shadow, per the design system. */
.figure-frame {
  background: var(--surface-1);
  border-radius: var(--radius-cards);
  padding: 28px;
}
.figure-meta {
  display: flex;
  justify-content: space-between;
  gap: 16px 32px;
  flex-wrap: wrap;
  margin-top: 16px;
  font-size: var(--text-caption);
  line-height: 1.5;
  color: var(--ink-muted);
}
.figure-meta .grammar { color: var(--accent); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

.stack-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  padding: 40px 0 8px;
  border-top: 1px solid var(--rule);
}
.stack-fact .n {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 600;
  line-height: 1.07;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.stack-fact .k {
  font-size: var(--text-caption);
  color: var(--ink-muted);
  margin-top: 8px;
  line-height: 1.4;
}

@media (max-width: 1024px) {
  .figure-head { grid-template-columns: 1fr; gap: 14px; }
  .drill-body { grid-template-columns: 1fr; gap: 22px; }
  .stack-facts { grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (max-width: 768px) {
  /* The popover becomes an inline list inside the sheet. Descriptions are
     dropped: the titles carry the meaning, and keeping them made the menu
     ~1000px tall, pushing the rest of the nav off screen. */
  .nav-menu {
    position: static;
    transform: none;
    width: 100%;
    margin-top: 6px;
    background: none;
    border: none;
    border-radius: 0;
    padding: 4px 0 6px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nav-menu a { white-space: normal; padding: 11px 12px; }
  .nmi-desc { display: none; }
  .nmi-title { font-size: 15px; margin-bottom: 0; }
  .nav-menu hr { margin: 6px 12px; }
  .nav-drop > summary {
    font-size: 16px;
    padding: 11px 12px;
    border-radius: var(--radius-links);
    justify-content: space-between;
    width: 100%;
  }
  .figure-frame { padding: 16px; border-radius: var(--radius-links); }

  /* Dense charts do not survive being scaled to a phone: at 375px every
     figure rendered at 0.42, putting 10px axis labels at 4.2px. Give them a
     legible floor and let the tile scroll horizontally instead. */
  .tile figure,
  .figure-frame {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .tile figure svg,
  .figure-frame svg { min-width: 620px; }

  /* `overflow-x: auto` only contains the chart if the scroll container is
     allowed to shrink below it. `.tile` is a grid item and `.tile figure` a
     column-flex item, both defaulting to `min-width: auto`, so the 620px floor
     propagated up as min-content and widened the whole page instead of the
     figure (656px column = 620 + 2x18px padding at 375px). */
  .tile,
  .tile figure,
  .figure-frame { min-width: 0; }

  /* Fades at the edges signal there is more chart off-screen. */
  .tile figure {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px,
                        #000 calc(100% - 14px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 14px,
                        #000 calc(100% - 14px), transparent 100%);
  }
  .tile-scroll-hint {
    font-size: 11px;
    color: var(--ink-muted);
    margin-top: -6px;
  }
}

@media (min-width: 769px) {
  .tile-scroll-hint { display: none; }
}

/* Drill-down: chart grammar -> analytical question */
.drill-body { display: block; }
.drill-note {
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-muted);
  max-width: 44em;
  margin-bottom: 18px;
}
.band .drill-note { color: var(--ink-muted); }
.q-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 44px;
}
.q-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
}
.band .q-list li { border-color: var(--rule); }
.q-chart {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.014em;
  color: var(--ink);
  white-space: nowrap;
}
.band .q-chart { color: var(--ink); }
.q-ask {
  font-size: 13px;
  color: var(--ink-muted);
  text-align: right;
}
.band .q-ask { color: var(--ink-muted); }
@media (max-width: 1024px) { .q-list { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .q-list li { flex-direction: column; gap: 2px; }
  .q-ask { text-align: left; }
}

/* ═════════════  DASHBOARD (design.html)  ═════════════
   A data dashboard is the one place a grid is right: these are peer
   observations meant to be compared, not marketing cards. Surface contrast
   only — still no shadows. */
.dash {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}
.tile {
  grid-column: span 1;
  background: var(--surface-1);
  border-radius: var(--radius-cards);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tile-wide { grid-column: span 2; }

.tile-head { display: flex; flex-direction: column; gap: 8px; }
.tile-grammar {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}
.tile h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.21;
  letter-spacing: -0.0147em;
  color: var(--ink);
}
.tile p {
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-muted);
  max-width: 46em;
}
.tile figure { margin: 0; }
.tile-source {
  font-size: var(--text-caption);
  line-height: 1.5;
  /* Provenance is content, not decoration — must stay readable (5.2:1 on carbon). */
  color: var(--ink-muted);
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  margin-top: auto;
}
.tile-source a { color: var(--ink-muted); text-decoration: underline; }
.tile-source a:hover { color: var(--ink); }

/* Verdict chips for the QC tile */
.verdicts { display: flex; flex-wrap: wrap; gap: 10px; }
.verdict {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--rule);
  color: var(--ink-muted);
}
.verdict b { font-weight: 600; letter-spacing: .05em; text-transform: uppercase; font-size: 10px; }
.verdict.keep b { color: var(--reef-teal); }
.verdict.drop b { color: var(--accent); }

/* Family index */
.families {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 40px;
}
.families div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 14px;
  letter-spacing: -0.014em;
}
.families span:first-child { color: var(--ink); }
.families span:last-child { color: var(--ink-muted); font-variant-numeric: tabular-nums; }

@media (max-width: 1024px) {
  .dash { grid-template-columns: 1fr; }
  .tile, .tile-wide { grid-column: span 1; }
  .families { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .tile { padding: 18px; border-radius: var(--radius-links); }
  .families { grid-template-columns: 1fr; }
}

/* ═════════════  FOUNDER PLATFORM (2026-07-31)  ═════════════ */
.skip-link {
  position: fixed;
  z-index: 2000;
  top: 8px;
  left: 12px;
  padding: 10px 16px;
  border-radius: var(--radius-links);
  background: var(--surface-0);
  color: var(--ink);
  border: 1px solid var(--rule);
  transform: translateY(-160%);
}
.skip-link:focus { transform: none; }

.nav-links a[aria-current="page"],
.nav-cta[aria-current="page"] { opacity: 1; }
.nav-links > a:not(.nav-cta)[aria-current="page"]::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 3px;
  background: currentColor;
}

.founder-hero { padding-bottom: 76px; }
.section-spacer { height: var(--section-gap); }
.section-spacer-sm { height: 72px; }
.section-head-top { padding-top: var(--section-gap); }
.compact-band { padding-top: 72px; }
.method-link { margin-top: 20px; }
.section-link { padding-top: 40px; display: flex; justify-content: flex-end; }

.proof-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 28px;
  padding: 30px 0 96px;
  border-top: 1px solid var(--rule);
}
.proof-strip > div { display: flex; flex-direction: column; gap: 7px; }
.proof-key {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.014em;
}
.proof-strip div > span:last-child {
  color: var(--ink-muted);
  font-size: var(--text-caption);
  line-height: 1.45;
}

.project-list { border-bottom: 1px solid var(--rule); }
.project-row {
  display: grid;
  grid-template-columns: minmax(9rem, .38fr) minmax(0, 1fr);
  gap: 28px 64px;
  padding: 50px 0;
  border-top: 1px solid var(--rule);
}
.project-row[hidden] { display: none; }
.project-rail { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.project-pillar {
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.status-label {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 4px 11px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .025em;
}
.status-date { color: var(--ink-muted); font-size: 11px; line-height: 1.4; }
.project-body h3 {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--text-heading-lg);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.01em;
  margin-bottom: 12px;
  scroll-margin-top: 100px;
}
.project-lead {
  color: var(--ink-muted);
  font-size: var(--text-body);
  line-height: 1.5;
  max-width: 43em;
  margin-bottom: 15px;
}
.project-role { color: var(--ink-muted); font-size: 13px; margin-bottom: 18px; }
.project-role strong { color: var(--ink); font-weight: 600; margin-right: 7px; }
.project-detail { max-width: 48em; margin: 4px 0 20px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.project-detail > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  color: var(--ink-muted);
  cursor: pointer;
  list-style: none;
  font-size: 13px;
}
.project-detail > summary::-webkit-details-marker { display: none; }
.project-detail > summary .chev { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform .2s ease; }
.project-detail[open] > summary .chev { transform: rotate(180deg); }
.project-detail-body { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 32px; padding: 8px 0 24px; }
.project-detail-body span {
  display: block;
  color: var(--accent);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 7px;
}
.project-detail-body p { color: var(--ink-muted); font-size: 13px; line-height: 1.5; }

.filter-bar { display: flex; flex-wrap: wrap; gap: 9px; padding-top: 4px; }
.filter-btn {
  appearance: none;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-muted);
  font-family: var(--font-text);
  font-size: 13px;
  padding: 9px 16px;
  cursor: pointer;
}
.filter-btn:hover { color: var(--ink); border-color: var(--rule-soft); }
.filter-btn.is-active { background: var(--ink); color: var(--surface-0); border-color: var(--ink); }
.filter-status { min-height: 1.5em; padding: 18px 0 0; color: var(--ink-muted); font-size: 12px; }

.maturity-key {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}
.maturity-key div { display: flex; flex-direction: column; gap: 7px; }
.maturity-key strong { color: var(--ink); font-size: 13px; }
.maturity-key span { color: var(--ink-muted); font-size: 12px; line-height: 1.45; }

.founder-band,
.bio-grid {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: 48px 88px;
  align-items: start;
}
.founder-band h2,
.bio-grid h2 {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--text-display);
  line-height: 1.07;
  letter-spacing: -.015em;
}
.founder-band > div:last-child > p,
.prose-stack p {
  color: var(--ink-muted);
  font-size: var(--text-body);
  line-height: 1.6;
  margin-bottom: 18px;
  max-width: 42em;
}
.founder-intro { color: var(--ink) !important; font-size: clamp(1.25rem, 2vw, 1.65rem) !important; font-weight: 300; line-height: 1.4 !important; }
.prose-stack strong { color: var(--ink); font-weight: 600; }

.principle-list { border-bottom: 1px solid var(--rule); }
.principle-row { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 32px; padding: 38px 0; border-top: 1px solid var(--rule); }
.principle-row > span { color: var(--accent); font-size: 12px; font-weight: 600; letter-spacing: .06em; }
.principle-row h3 { color: var(--ink); font-family: var(--font-display); font-size: var(--text-heading); margin-bottom: 9px; }
.principle-row p { color: var(--ink-muted); font-size: var(--text-body); line-height: 1.5; max-width: 40em; }

.engage-list { border-bottom: 1px solid var(--rule); }
.engage-row { display: grid; grid-template-columns: minmax(10rem, .42fr) minmax(0, 1fr); gap: 32px 64px; padding: 54px 0; border-top: 1px solid var(--rule); scroll-margin-top: 110px; }
.engage-row > div:first-child { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.engage-index { color: var(--accent); font-size: 12px; font-weight: 600; letter-spacing: .08em; }
.engage-row h2 { color: var(--ink); font-family: var(--font-display); font-size: var(--text-heading-lg); margin-bottom: 13px; }
.engage-row p { color: var(--ink-muted); font-size: var(--text-body); line-height: 1.5; max-width: 42em; margin-bottom: 15px; }
.engage-row .engage-prompt { font-size: 14px; margin-bottom: 24px; }
.engage-prompt strong { color: var(--ink); }

.legal-prose { max-width: 780px; }
.legal-prose section { padding: 36px 0; border-top: 1px solid var(--rule); }
.legal-prose section:last-child { border-bottom: 1px solid var(--rule); }
.legal-prose h2 { color: var(--ink); font-family: var(--font-display); font-size: var(--text-heading); margin-bottom: 12px; }
.legal-prose p { color: var(--ink-muted); font-size: var(--text-body); line-height: 1.6; }

@media (max-width: 1024px) {
  .proof-strip, .maturity-key { grid-template-columns: 1fr 1fr; gap: 28px 36px; }
  .founder-band, .bio-grid { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 900px) and (min-width: 769px) {
  .nav-links { gap: 14px; }
  .nav-links a, .nav-drop > summary { font-size: 12px; }
  .nav-cta { padding-inline: 15px; }
}

@media (max-width: 768px) {
  .proof-strip, .maturity-key { grid-template-columns: 1fr 1fr; gap: 24px 18px; padding-bottom: 72px; }
  .project-row, .engage-row { grid-template-columns: 1fr; gap: 22px; padding: 40px 0; }
  .project-rail { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .status-date { flex-basis: 100%; }
  .project-detail-body { grid-template-columns: 1fr; }
  .section-link { justify-content: stretch; }
  .principle-row { grid-template-columns: 3rem minmax(0, 1fr); gap: 18px; }
  .compact-band { padding-top: 56px; }
}

@media (max-width: 480px) {
  .proof-strip, .maturity-key { grid-template-columns: 1fr; }
}

/* ═════════════  VELLUM FIGURE APPEARANCE SWITCH  ═════════════
   The figures are now rendered by Vellum itself. ggplot bakes colours into the
   SVG, so unlike the old hand-rolled figures they cannot follow the toggle
   through CSS variables. Each figure ships a light and a dark render and we
   show one. Default is dark, matching the dark-stage-first design; the light
   render appears under a light preference or an explicit light-theme choice.
   `html.dark-theme` / `html.light-theme` must win over the media query, so the
   explicit-class rules come last. */
.fig-light { display: none; }
.fig-dark  { display: block; }

@media (prefers-color-scheme: light) {
  :root:not(.dark-theme) .fig-light { display: block; }
  :root:not(.dark-theme) .fig-dark  { display: none; }
}

html.light-theme .fig-light { display: block; }
html.light-theme .fig-dark  { display: none; }
html.dark-theme  .fig-light { display: none; }
html.dark-theme  .fig-dark  { display: block; }

/* ═════════════  TOOLKIT GALLERY  ═════════════
   Editorial treatment borrowed from the reference schema: the hairline border is
   the whole edge treatment, one idea per row, and the caption reads like a
   colophon rather than a marketing card. Deliberately NOT borrowed: its shadow
   tokens, its parchment canvas and its second blue — this system builds depth
   from surface contrast only and holds to one palette.

   A plate states its data support in every case. Most of these are demonstration
   data, and the page above turns on figures carrying their source. */
.plate-list { display: flex; flex-direction: column; gap: 72px; }

.plate {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  margin: 0;
}

.plate-art {
  border: 1px solid var(--rule);
  border-radius: var(--radius-links);
  background: var(--surface-1);
  padding: 14px;
  overflow: hidden;
}
.plate-art img { width: 100%; height: auto; display: block; }

.plate figcaption { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }

.plate-grammar {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}
.plate figcaption h3 {
  font-family: var(--font-display);
  font-size: var(--text-heading);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.019em;
  color: var(--ink);
}
.plate figcaption p {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 42em;
}

/* Support line: the outlined-label treatment from the reference — a border and a
   colour, never a fill. Real data gets the accent border; demonstration data
   stays neutral so it cannot be mistaken for a finding. */
.plate-support {
  align-self: start;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-muted);
  border: 1px solid var(--rule);
  border-radius: var(--radius-links);
  padding: 7px 11px;
  margin-top: 4px;
}
.plate-support-real { color: var(--ink); border-color: var(--rule-soft); }

@media (max-width: 900px) {
  .plate { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .plate-list { gap: 56px; }
  .plate figcaption p { font-size: 14px; }
}

/* Scrim base. The full treatment lives in the mobile block; this guarantees it
   is never an unstyled block element if a viewport change strands one. */
.nav-scrim { position: fixed; inset: 0; z-index: 1150; }
@media (min-width: 769px) { .nav-scrim { display: none; } }

/* ═════════════  TEAM  ═════════════
   Name and role carried by a hairline rule, not a card or an avatar. There is
   no cleared photography of anyone, and an avatar placeholder would be worse
   than none — the same reason the AI portraits were deleted. */
.team-list { display: flex; flex-direction: column; }

.team-row {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: 24px 56px;
  padding: 36px 0;
  border-top: 1px solid var(--rule);
}
.team-row:last-child { border-bottom: 1px solid var(--rule); }

.team-name { display: flex; flex-direction: column; gap: 7px; }
.team-name h3 {
  font-family: var(--font-display);
  font-size: var(--text-heading);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.019em;
  color: var(--ink);
}
.team-role {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--accent);
}
.team-row p {
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 40em;
  align-self: center;
}

@media (max-width: 768px) {
  .team-row { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 28px 0; }
  .team-row p { font-size: 15px; align-self: start; }
}

/* ═════════════  TOUCH TARGETS  ═════════════
   Standalone controls need a 44px minimum on a phone. Inline links inside a
   paragraph are deliberately NOT padded — a 44px inline link tears the line
   spacing apart and hurts reading far more than the extra 20px helps aiming.
   The rule applies to things that stand alone and are aimed at. */
@media (max-width: 768px) {
  /* Filter pills sit in a row and are the most-tapped control on Work. */
  .filter-btn {
    min-height: 44px;
    padding: 11px 18px;
    font-size: 14px;
  }
  .filter-row { gap: 10px; }

  /* The block-level "Explore research ›" action that closes each row. */
  .work-link {
    min-height: 44px;
    padding: 10px 0;
  }

  /* Footer links were an 18px-tall wrapped row — 24px apart horizontally but
     effectively touching vertically once wrapped. */
  .footer-links { gap: 4px 22px; }
  .footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Disclosure rows are controls, not prose. */
  .project-detail > summary,
  .drill > summary,
  .plate-support { min-height: 44px; }
  .project-detail > summary,
  .drill > summary { display: flex; align-items: center; }
}

/* ═════════════  PRODUCT PAGE — features, pricing, beta form  ═════════════
   Same discipline as the rest of the system: surface contrast and hairline
   rules, no shadows, restricted radii, one filled action per view. */
.feature-list { display: flex; flex-direction: column; }
.feature-row {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: 20px 32px;
  padding: 34px 0;
  border-top: 1px solid var(--rule);
}
.feature-row:last-child { border-bottom: 1px solid var(--rule); }
.feature-idx {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  /* --ghost-num is for the huge decorative numerals; at 20px this is body-sized
     text and it failed contrast at 1.38:1. --ink-muted is the audited value. */
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.feature-row h3 {
  font-family: var(--font-display);
  font-size: var(--text-heading);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.019em;
  color: var(--ink);
  margin-bottom: 8px;
}
.feature-row p { font-size: 16px; line-height: 1.5; color: var(--ink-muted); max-width: 44em; }

/* ── Pricing ── */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}
.tier {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-cards);
  background: var(--surface-1);
}
/* The recommended tier is marked by a stronger rule, not a shadow or a fill. */
.tier-featured { border-color: var(--link); }
.tier-head h3 {
  font-family: var(--font-display);
  font-size: var(--text-heading-sm);
  font-weight: 600;
  color: var(--ink);
}
.tier-price {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-top: 10px;
  line-height: 1.1;
}
.tier-note { font-size: 13px; color: var(--ink-muted); margin-top: 6px; }
.tier-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.tier-list li {
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-muted);
  padding-left: 20px;
  position: relative;
}
.tier-list li::before {
  content: "";
  position: absolute;
  left: 2px; top: .62em;
  width: 8px; height: 2px;
  background: var(--rule-soft);
}
.tier-cta { margin-top: auto; justify-content: center; }
.tier-foot {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-muted);
  padding-top: 26px;
  max-width: 52em;
}

/* ── Beta form ── */
.beta-form { display: flex; flex-direction: column; gap: 20px; max-width: 620px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 14px; font-weight: 600; color: var(--ink); }
.field input,
.field textarea,
.field select {
  font-family: var(--font-text);
  font-size: 16px;                /* 16px or iOS zooms the page on focus */
  color: var(--ink);
  background: var(--surface-1);
  border: 1px solid var(--rule);
  border-radius: var(--radius-links);
  padding: 13px 14px;
  min-height: 48px;
  width: 100%;
}
.field textarea { resize: vertical; min-height: 112px; line-height: 1.5; }
.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible { border-color: var(--link); }
.field [aria-invalid="true"] { border-color: var(--accent); }
.form-note, .form-fallback {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 46em;
}
.beta-form .btn-primary { align-self: flex-start; }

@media (max-width: 900px) {
  .tier-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .feature-row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 26px 0; }
  .feature-idx { font-size: 15px; }
  .beta-form .btn-primary { align-self: stretch; justify-content: center; }
}

/* Legal identity line. Reyanda is a registered business name under Malawi's
   Business Registration Act (No. 12 of 2012), BRN-KGS5RRJ — a sole
   proprietorship, NOT a company incorporated under the Companies Act. Never
   render this as "Ltd", "Limited" or "Inc". */
.footer-legal { display: inline-block; margin-top: 4px; font-size: 12px; color: var(--ink-muted); }

/* ═════════════  SOCIAL-ENTERPRISE ARMS  ═════════════ */
.arm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.arm {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-cards);
  background: var(--surface-1);
}
.arm-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}
.arm h3 {
  font-family: var(--font-display);
  font-size: var(--text-heading);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.019em;
  color: var(--ink);
}
.arm p { font-size: 15px; line-height: 1.5; color: var(--ink-muted); }
.arm .work-link { margin-top: auto; padding-top: 6px; }
.arm-foot {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-muted);
  padding-top: 22px;
  max-width: 52em;
}

/* Which arm a person sits in, under their role. */
.team-arm {
  font-size: 12px;
  line-height: 1.35;
  color: var(--ink-muted);
}

@media (max-width: 768px) {
  .arm-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Honeypot. Off-screen rather than display:none — some bots skip hidden fields,
   and this must still be in the layout to be filled. Never focusable. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status { font-size: 14px; line-height: 1.5; min-height: 1.4em; }
.form-status.is-ok { color: var(--link); }
.form-status.is-error { color: var(--accent); }

/* ═════════════  CAREERS  ═════════════ */
.role-list { display: flex; flex-direction: column; padding-top: 8px; }
.role-row {
  display: grid;
  grid-template-columns: minmax(0, .34fr) minmax(0, 1fr);
  gap: 18px 44px;
  padding: 30px 0;
  border-top: 1px solid var(--rule);
}
.role-row:last-child { border-bottom: 1px solid var(--rule); }
.role-meta { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.role-kind {
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent);
}
.role-row h3 {
  font-family: var(--font-display); font-size: var(--text-heading);
  font-weight: 600; line-height: 1.18; letter-spacing: -0.019em;
  color: var(--ink); margin-bottom: 8px;
}
.role-row p { font-size: 15px; line-height: 1.5; color: var(--ink-muted); max-width: 44em; }

/* Checkbox rows: the control and its label are one target, so the whole line
   is clickable rather than a 13px box. */
.field-check { padding-top: 4px; }
.check-row {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 15px; font-weight: 400; line-height: 1.5;
  color: var(--ink-muted); cursor: pointer; min-height: 44px;
}
.check-row input[type="checkbox"] {
  flex: none; width: 20px; height: 20px; margin-top: 2px;
  accent-color: var(--apple-blue); cursor: pointer;
}
.field-hint { font-size: 13px; line-height: 1.45; color: var(--ink-muted); }
.field-optional { font-weight: 400; color: var(--ink-muted); }

.field input[type="file"] {
  padding: 11px 12px; font-size: 15px; cursor: pointer;
  background: var(--surface-1); border: 1px dashed var(--rule);
}
.field input[type="file"]::file-selector-button {
  font-family: var(--font-text); font-size: 14px; font-weight: 600;
  color: var(--ink); background: transparent;
  border: 1px solid var(--rule); border-radius: var(--radius-buttons);
  padding: 8px 16px; margin-right: 12px; cursor: pointer; min-height: 40px;
}
.field input[type="file"]::file-selector-button:hover { border-color: var(--rule-soft); }

.apply-form { max-width: 660px; }

@media (max-width: 768px) {
  .role-row { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 24px 0; }
}