/* =========================================================================
   synar.ch — homepage rebuild candidate (/rebuild)
   Design system: architectural trust. 90% ink-on-paper; verdigris is
   the single load-bearing accent (links, CTAs, the boundary line).
   Self-hosted fonts only (CSP font-src 'self'). No external requests.
   ========================================================================= */

/* ---------- Fonts (self-hosted; no Google Fonts — CSP forbids it and it
     would leak visitor IPs, which contradicts the entire pitch) ---------- */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/assets/fonts/fraunces-latin-opsz-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url('/assets/fonts/fraunces-latin-opsz-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/public-sans-latin-wght-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Public Sans';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/public-sans-latin-wght-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
}

/* ---------- Tokens ---------- */
:root {
  --ink:            #16211F; /* near-black, green undertone */
  --paper:          #F7F5F0; /* warm limestone white */
  --paper-deep:     #EDEAE2; /* recessed panels */
  --verdigris:      #3E7268; /* THE accent — CTAs, boundary */
  --verdigris-deep: #2C544D; /* hover/active + text links (AA on paper) */
  --bronze:         #A98B5F; /* stat numerals, small labels only */
  --bronze-ink:     #7C6236; /* bronze that passes AA for small text */
  --line:           #C9C4B8; /* hairline rules */
  --alert:          #8C3B2E; /* form errors only */

  /* On-dark variants */
  --paper-on-ink:   #F1EEE7;
  --line-on-ink:    #3A4643;
  --verdigris-lift: #6FA79B; /* verdigris legible on ink */

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --measure: 62ch;
  --wrap: 1200px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --section-y: clamp(4.5rem, 10vw, 8rem); /* 72 → 128px */

  --fs-eyebrow: 0.75rem;   /* 12 */
  --fs-label: 0.875rem;    /* 14 */
  --fs-body: 1.0625rem;    /* 17 */
  --fs-lede: clamp(1.15rem, 2.2vw, 1.3125rem); /* 21 */
  --fs-h3: clamp(1.35rem, 2.6vw, 1.75rem);     /* 28 */
  --fs-h2: clamp(1.9rem, 4.2vw, 3.375rem);     /* 54 */
  --fs-stat: clamp(2.6rem, 5.5vw, 3.375rem);   /* 54 */
  --fs-h1: clamp(2.4rem, 6vw, 4.75rem);        /* 76 */

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
  font-optical-sizing: auto;
}

p { margin: 0 0 1.1em; max-width: var(--measure); }
a { color: var(--verdigris-deep); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }
strong { font-weight: 600; }
img, svg { max-width: 100%; }

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

.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;
}

.skip-link {
  position: absolute;
  left: 1rem; top: -3rem;
  background: var(--ink); color: var(--paper);
  padding: 0.6rem 1rem; z-index: 100;
  border-radius: 2px; text-decoration: none;
  font-family: var(--font-mono); font-size: var(--fs-label);
  transition: top 0.18s var(--ease);
}
.skip-link:focus { top: 1rem; color: var(--paper); }

/* ---------- Layout primitives ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--paper { background: var(--paper); }
.section--deep  { background: var(--paper-deep); }
.section--ink {
  background: var(--ink);
  color: var(--paper-on-ink);
}
.section--ink h1, .section--ink h2, .section--ink h3 { color: var(--paper); }
.section--ink a { color: var(--verdigris-lift); }
.section--ink a:hover { color: var(--paper); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bronze-ink);
  margin: 0 0 1.25rem;
}
.section--ink .eyebrow { color: var(--bronze); }

.lede { font-size: var(--fs-lede); line-height: 1.5; max-width: 52ch; }

/* ---------- Motion primitives ----------
   Reveal is gated behind html.js so that without JavaScript (or if the
   module fails) every section renders fully visible. JS swaps no-js→js and
   synchronously marks in-viewport elements is-in before first paint. */
.js .reveal { opacity: 0; transform: translateY(12px); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* =========================================================================
   0. Announcement bar
   ========================================================================= */
.announce {
  background: var(--ink);
  color: var(--paper-on-ink);
  font-family: var(--font-mono);
  font-size: 0.8125rem; /* 13 */
  letter-spacing: 0.01em;
}
.announce[hidden] { display: none; }
.announce__inner {
  display: flex; align-items: center; gap: 1rem;
  min-height: 40px; padding-block: 0.5rem;
}
.announce__text { margin: 0; max-width: none; flex: 1; }
.announce a { color: var(--verdigris-lift); font-weight: 500; }
.announce a:hover { color: var(--paper); }
.announce__close {
  appearance: none; background: none; border: 0;
  color: var(--paper-on-ink); cursor: pointer;
  font-size: 1.1rem; line-height: 1; padding: 0.35rem 0.5rem;
  border-radius: 2px;
}
.announce__close:hover { color: var(--paper); }

/* =========================================================================
   1. Navigation
   ========================================================================= */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease);
}
.nav.is-stuck { border-bottom-color: var(--line); }
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 68px;
}
.nav__brand {
  font-family: var(--font-display);
  font-weight: 500; font-size: 1.5rem;
  letter-spacing: -0.02em; text-decoration: none; color: var(--ink);
}
.nav__links { display: flex; align-items: center; gap: 1.75rem; }
.nav__links a:not(.btn) { color: var(--ink); text-decoration: none; font-size: var(--fs-label); }
.nav__links a:not(.btn):hover { color: var(--verdigris-deep); }
.nav__toggle { display: none; }

.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-body); font-weight: 600;
  font-size: var(--fs-label);
  padding: 0.65rem 1.15rem; border-radius: 3px;
  background: var(--verdigris); color: var(--paper);
  border: 1px solid var(--verdigris);
  text-decoration: none; cursor: pointer;
  transition: background 0.16s var(--ease), border-color 0.16s var(--ease);
}
.btn:hover { background: var(--verdigris-deep); border-color: var(--verdigris-deep); color: var(--paper); }
.btn--lg { padding: 0.85rem 1.5rem; font-size: var(--fs-body); }
.btn--ghost {
  background: transparent; color: var(--verdigris-deep);
  border-color: var(--line);
}
.btn--ghost:hover { background: transparent; color: var(--ink); border-color: var(--ink); }
.section--ink .btn--ghost { color: var(--paper); border-color: var(--line-on-ink); }
.section--ink .btn--ghost:hover { border-color: var(--paper); color: var(--paper); }

.link-arrow {
  font-family: var(--font-body); font-weight: 600;
  text-decoration: none; color: var(--verdigris-deep);
  display: inline-flex; gap: 0.4rem; align-items: baseline;
}
.link-arrow:hover { color: var(--ink); }
.section--ink .link-arrow { color: var(--verdigris-lift); }
.section--ink .link-arrow:hover { color: var(--paper); }

/* =========================================================================
   2. Hero
   ========================================================================= */
.hero { padding-top: clamp(3rem, 7vw, 5.5rem); }
.hero__grid {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 55fr 45fr;
  align-items: center;
}
.hero__title {
  font-size: var(--fs-h1);
  font-weight: 340;
  letter-spacing: -0.025em;
  line-height: 1.04;
  margin: 0.4em 0 0.55em;
  max-width: 15ch;
}
/* padding-bottom widens the overflow clip so descenders (p, y, g) aren't cut
   off; the matching negative margin keeps line spacing unchanged. */
.hero__title .ln { display: block; overflow: hidden; padding-bottom: 0.22em; margin-bottom: -0.22em; }
.hero__title .ln > span { display: block; }
.hero__title .ln--strong { font-weight: 600; }
.hero__sub { font-size: var(--fs-lede); line-height: 1.5; max-width: 52ch; color: var(--ink); }
.hero__actions {
  display: flex; align-items: center; gap: 1.5rem 2rem;
  flex-wrap: wrap; margin-top: 2rem;
}

/* Hero load animation: pure CSS so it plays on first paint with no inline
   script (CSP) and degrades to fully-visible under reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  .hero__title .ln > span { animation: heroRise 0.7s var(--ease) both; }
  .hero__title .ln:nth-child(1) > span { animation-delay: 0.05s; }
  .hero__title .ln:nth-child(2) > span { animation-delay: 0.11s; }
  .hero__title .ln:nth-child(3) > span { animation-delay: 0.17s; }
  @keyframes heroRise { from { transform: translateY(125%); } to { transform: none; } }
  .hero__eyebrow, .hero__sub, .hero__actions { animation: heroFade 0.6s var(--ease) both; }
  .hero__eyebrow { animation-delay: 0.02s; }
  .hero__sub { animation-delay: 0.28s; }
  .hero__actions { animation-delay: 0.36s; }
  @keyframes heroFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  .boundary-line { animation: draw 0.7s var(--ease) 0.4s both; }
  @keyframes draw { from { stroke-dashoffset: 460; } to { stroke-dashoffset: 0; } }
}

/* Hero visual */
.hero__visual { align-self: stretch; }
.hero-figure { margin: 0; }
.hero-figure svg { display: block; width: 100%; height: auto; }
.boundary-line { stroke: var(--verdigris); stroke-width: 2; fill: none; stroke-dasharray: 460; stroke-dashoffset: 0; }
.hero-figure .hb-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; fill: var(--bronze-ink); }
.hero-figure .hb-row { font-family: var(--font-mono); font-size: 16px; fill: var(--ink); }
.hero-figure .vault-outline { fill: none; stroke: var(--line); stroke-width: 1.5; }
.hero-figure .hb-dot { fill: var(--verdigris); }

/* =========================================================================
   3. Stat bar
   ========================================================================= */
.stats__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.stat__num {
  font-family: var(--font-display);
  font-size: var(--fs-stat); font-weight: 420;
  color: var(--bronze-ink); line-height: 1;
  letter-spacing: -0.02em;
  display: block; margin-bottom: 0.5rem;
  font-variant-numeric: lining-nums tabular-nums;
}
.stat__claim { font-size: var(--fs-body); line-height: 1.4; margin: 0 0 0.7rem; max-width: 32ch; }
.stat__src {
  font-family: var(--font-mono); font-size: var(--fs-eyebrow);
  letter-spacing: 0.05em; color: var(--bronze-ink);
  text-transform: uppercase; margin: 0; max-width: 30ch;
}
.stats__coda {
  text-align: center; font-style: italic;
  font-size: var(--fs-lede); margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  max-width: none; /* keep on one line on desktop; wraps naturally on mobile */
}
@media (max-width: 640px) { .stats__coda { max-width: 34ch; } }

/* =========================================================================
   4. The pain
   ========================================================================= */
.section__head { max-width: 30ch; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.section__head--wide { max-width: 24ch; }
/* The problem headline gets a wider measure so it reads across the page and
   the closing "You get drift." drops onto its own line as a punch. */
.pain .section__head { max-width: 46rem; }
.h2 .punch { white-space: nowrap; }
/* Reframe headline: each sentence on its own line (wraps internally only if
   the width can't hold it). Wider measure so each fits on one line. */
.reframe .section__head { max-width: 44rem; }
.h2 .line { display: block; }
.h2 .b { font-weight: 600; }
/* The platform headline reads across the page rather than stacking tall. */
.platform .section__head { max-width: 46rem; }
/* Short section headlines that should stay on one line. */
.ways .section__head,
.faq .section__head { max-width: none; }
.h2 { font-size: var(--fs-h2); }
.pain__cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.75rem, 3.5vw, 3rem);
}
.pain__card p { max-width: 40ch; }
.card__lead {
  font-family: var(--font-display);
  font-size: var(--fs-h3); font-weight: 420;
  color: var(--ink); line-height: 1.15;
  margin: 0 0 0.9rem; max-width: 20ch;
}

/* =========================================================================
   5. The reframe
   ========================================================================= */
.reframe__body { max-width: none; font-size: var(--fs-lede); line-height: 1.55; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.mechanisms {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line);
}
.mechanism {
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  margin-top: -1px;
}
.mechanism h3 {
  font-size: var(--fs-h3); font-weight: 440;
  margin-bottom: 0.5rem;
}
.mechanism p { font-size: var(--fs-body); line-height: 1.5; margin: 0; max-width: 42ch; color: color-mix(in srgb, var(--ink) 86%, transparent); }
.reframe__more { margin-top: clamp(2rem, 4vw, 3rem); }

/* =========================================================================
   6. The platform
   ========================================================================= */
.platform__grid {
  display: grid; grid-template-columns: 42fr 58fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: start;
}
.audience { border-top: 1px solid var(--line); }
.audience__row { padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
.audience__label {
  font-family: var(--font-mono); font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--verdigris-deep); margin: 0 0 0.5rem;
}
.audience__row p:last-child { margin: 0; font-size: var(--fs-label); max-width: 38ch; }

/* Ecosystem diagram */
.ecosystem { margin: 0; position: relative; }
.ecosystem svg { display: block; width: 100%; height: auto; overflow: visible; }
.eco-spokes line { stroke: var(--line); stroke-width: 1; }
.eco-node { cursor: default; }
.eco-node__hit { fill: transparent; }
.eco-node circle.eco-dot { fill: var(--paper); stroke: var(--verdigris); stroke-width: 1.5; transition: fill 0.15s var(--ease); }
.eco-node__label { font-family: var(--font-mono); font-size: 12px; fill: var(--ink); letter-spacing: 0.02em; }
.eco-centre { fill: var(--verdigris); }
.eco-centre-label { font-family: var(--font-mono); font-size: 11px; fill: var(--verdigris-deep); text-anchor: middle; letter-spacing: 0.06em; text-transform: uppercase; }
.eco-tip {
  opacity: 0; pointer-events: none;
  transition: opacity 0.14s var(--ease);
}
.eco-tip rect { fill: var(--ink); }
.eco-tip text { font-family: var(--font-body); font-size: 12px; fill: var(--paper); }
.eco-node:hover .eco-tip,
.eco-node:focus-visible .eco-tip,
.eco-node.is-open .eco-tip { opacity: 1; }
.eco-node:hover .eco-dot,
.eco-node:focus-visible .eco-dot,
.eco-node.is-open .eco-dot { fill: var(--verdigris); }
.eco-node:focus-visible { outline: none; }
.eco-node:focus-visible .eco-dot { stroke: var(--verdigris-deep); stroke-width: 2.5; }
.ecosystem__caption, .figure-caption {
  font-style: italic; font-size: var(--fs-label);
  color: color-mix(in srgb, var(--ink) 78%, transparent);
  margin: 1.25rem 0 0; max-width: 46ch;
}

/* Four-step strip */
.flow {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--line);
  padding-top: 1.75rem;
}
.flow__steps {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.75rem 1rem;
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 1rem;
}
.flow__steps .sep { color: var(--verdigris); }
.flow__note { font-size: var(--fs-label); font-style: italic; margin: 0; max-width: 52ch; color: color-mix(in srgb, var(--ink) 82%, transparent); }

/* =========================================================================
   7. The vault (dark)
   ========================================================================= */
.vault__intro { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.vault__intro h2 { margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.vault__intro .lede { color: var(--paper); max-width: var(--measure); }
/* Keep the vault headline on one line on desktop; it wraps on narrow screens. */
@media (min-width: 1000px) { .vault__intro h2 { white-space: nowrap; } }

.interactives {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-block: clamp(2rem, 4vw, 3rem);
}
.panel {
  position: relative;
  background: color-mix(in srgb, var(--paper) 6%, var(--ink));
  border: 1px solid var(--line-on-ink);
  border-radius: 4px;
  padding: clamp(1.25rem, 3vw, 2rem);
}
.panel__label {
  font-family: var(--font-mono); font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--bronze); margin: 0 0 1rem;
}

/* Release box */
.release__field {
  width: 100%; min-height: 96px; resize: vertical;
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--line-on-ink); border-radius: 3px;
  font-family: var(--font-body); font-size: var(--fs-body);
  padding: 0.85rem 1rem; line-height: 1.5;
}
.release__field::placeholder { color: color-mix(in srgb, var(--paper) 45%, transparent); }
.release__field:focus-visible { outline: 2px solid var(--verdigris-lift); outline-offset: 1px; }
.release__row { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; flex-wrap: wrap; }
.release__confirm {
  font-family: var(--font-mono); font-size: var(--fs-label);
  color: var(--verdigris-lift); margin: 0; min-height: 1.4em;
}
.release__ghost {
  position: absolute; pointer-events: none;
  font-family: var(--font-body); font-size: var(--fs-body);
  color: var(--paper); white-space: pre-wrap;
}
.release__char {
  display: inline-block; will-change: transform, opacity;
}

/* Two views */
.views__toggle {
  display: flex; width: 100%; border: 1px solid var(--line-on-ink);
  border-radius: 3px; overflow: hidden; margin-bottom: 1.5rem;
}
.views__toggle label {
  flex: 1; text-align: center;
  font-family: var(--font-mono); font-size: var(--fs-label);
  padding: 0.55rem 0.9rem; cursor: pointer;
  color: color-mix(in srgb, var(--paper) 65%, transparent);
}
.views__toggle input:checked + label { background: var(--verdigris); color: var(--paper); }
.views__toggle input:focus-visible + label { outline: 2px solid var(--verdigris-lift); outline-offset: -2px; }
.views__stage {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 0; align-items: stretch; min-height: 190px;
}
.views__col { padding: 0.25rem 0; }
.views__col--org { padding-right: 1.5rem; }
.views__col--person { padding-left: 1.5rem; }
.views__divider {
  width: 2px; background: var(--verdigris);
  align-self: stretch;
  transition: opacity 0.3s var(--ease);
}
.views__meta {
  font-family: var(--font-mono); font-size: 0.8125rem;
  line-height: 1.7; color: color-mix(in srgb, var(--paper) 78%, transparent);
}
.views__doc { font-size: var(--fs-label); line-height: 1.5; }
.views__doc li { margin-bottom: 0.35rem; }
.views__doc ul { list-style: none; padding: 0; margin: 0 0 0.75rem; }
.views__scope { font-family: var(--font-mono); font-size: var(--fs-eyebrow); color: var(--verdigris-lift); letter-spacing: 0.06em; text-transform: uppercase; }
.views__pane[hidden] { display: none; }
.views__pane { animation: fadePane 0.3s var(--ease); }
@keyframes fadePane { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .views__pane { animation: none; } }
.views__caption { font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: 0.06em; text-transform: uppercase; color: color-mix(in srgb, var(--paper) 55%, transparent); margin-top: 1.25rem; }

/* Release box → Jordan's view: the flying note and where it lands. */
.release__fly {
  position: fixed; z-index: 60;
  font-family: var(--font-body); font-size: var(--fs-label);
  color: var(--paper); background: var(--verdigris-deep);
  border: 1px solid var(--verdigris); border-radius: 4px;
  padding: 0.5rem 0.75rem; max-width: 300px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none; box-shadow: 0 8px 28px rgba(0,0,0,0.35);
}
.views__doc-new {
  color: var(--paper);
  border-left: 2px solid var(--verdigris);
  padding-left: 0.6rem; margin-left: -0.62rem;
  opacity: 0; transform: translateX(-4px);
}
.views__doc-new.is-in {
  opacity: 1; transform: none;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
@media (prefers-reduced-motion: reduce) { .views__doc-new { opacity: 1; transform: none; } }

/* Vault media — a mock of the app's live session screen. Role colours match
   the real app: sage = coach, warm gold = coachee. Sits as a light "app
   window" on the dark vault background. */
.vault__media { margin: clamp(2rem, 4vw, 3rem) 0 0; }
.appwin {
  --sage: #4A7367; --sage-deep: #2B453F;
  --gold: #C9A84C; --gold-deep: #9A7E38;
  --forest: #0F2B2B; --cream: #F5F0E8; --offwhite: #FAFAF7;
  width: 100%; border-radius: 10px; overflow: hidden;
  background: var(--offwhite); color: var(--forest);
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.5);
  font-family: var(--font-body);
}
.appwin__bar {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem 0.9rem; background: var(--cream);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.appwin__dots { display: inline-flex; gap: 6px; }
.appwin__dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(15,43,43,0.18); }
.appwin__title { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--sage-deep); letter-spacing: 0.02em; }
.appwin__enc {
  margin-left: auto; display: inline-flex; align-items: center; gap: 0.35rem;
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--sage);
  padding: 0.2rem 0.5rem; border: 1px solid rgba(74,115,103,0.35); border-radius: 999px;
}
.appwin__body { display: grid; grid-template-columns: 1.35fr 1fr; gap: 0; }
.appwin__stage { display: grid; grid-template-rows: 1fr 1fr; gap: 10px; padding: 14px; background: var(--offwhite); }
.vtile {
  position: relative; border-radius: 8px; min-height: 96px;
  display: flex; align-items: center; gap: 0.85rem; padding: 0.9rem 1rem;
  overflow: hidden;
}
.vtile--coach { background: linear-gradient(135deg, #24463E, #16302B); box-shadow: inset 0 0 0 1.5px rgba(130,173,155,0.5); }
.vtile--coachee { background: linear-gradient(135deg, #3a3320, #241f13); box-shadow: inset 0 0 0 1.5px rgba(201,168,76,0.5); }
.vtile__avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1.35rem; font-weight: 600;
}
.vtile--coach .vtile__avatar { background: var(--sage); color: var(--cream); }
.vtile--coachee .vtile__avatar { background: var(--gold); color: var(--forest); }
.vtile__name { font-size: 0.9rem; color: var(--cream); font-weight: 600; }
.vtile__name em { font-style: normal; font-weight: 400; color: rgba(245,240,232,0.6); }
.vtile__wave { position: absolute; right: 1rem; bottom: 0.9rem; display: inline-flex; align-items: flex-end; gap: 3px; height: 16px; }
.vtile__wave i { width: 3px; border-radius: 2px; background: var(--soft-sage, #A8C5B8); height: 40%; }
.vtile__wave i:nth-child(1) { animation: wave 1s ease-in-out infinite; }
.vtile__wave i:nth-child(2) { animation: wave 1s ease-in-out 0.12s infinite; }
.vtile__wave i:nth-child(3) { animation: wave 1s ease-in-out 0.24s infinite; }
.vtile__wave i:nth-child(4) { animation: wave 1s ease-in-out 0.36s infinite; }
.vtile__wave i:nth-child(5) { animation: wave 1s ease-in-out 0.48s infinite; }
@keyframes wave { 0%,100% { height: 30%; } 50% { height: 100%; } }
.vtile__mute { position: absolute; right: 1rem; bottom: 0.9rem; font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(245,240,232,0.5); }
@media (prefers-reduced-motion: reduce) { .vtile__wave i { animation: none !important; height: 60%; } }

.appwin__side { padding: 14px 16px; display: flex; flex-direction: column; }
.appwin__side-h { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-deep); margin: 0 0 0.5rem; }
.appwin__side-h:not(:first-child) { margin-top: 1rem; }
.transcript { list-style: none; margin: 0; padding: 0; font-size: 0.8125rem; line-height: 1.5; }
.transcript li { margin-bottom: 0.4rem; color: rgba(15,43,43,0.85); }
.transcript .sp { font-weight: 700; margin-right: 0.4rem; }
.transcript .sp--coach { color: var(--sage); }
.transcript .sp--coachee { color: var(--gold-deep); }
.appwin__note { font-size: 0.8125rem; line-height: 1.5; color: rgba(15,43,43,0.7); font-style: italic; margin: 0; }
.appwin__note .caret { display: inline-block; width: 2px; height: 0.95em; background: var(--gold-deep); margin-left: 2px; vertical-align: -0.12em; animation: caret 1.1s step-end infinite; }
@keyframes caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .appwin__note .caret { animation: none; } }

.appwin__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.6rem 0.9rem; background: var(--cream);
  border-top: 1px solid rgba(0,0,0,0.08);
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.04em;
}
.appwin__rec { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--sage-deep); }
.appwin__rec .dot { width: 8px; height: 8px; border-radius: 50%; background: #C0503A; animation: recpulse 1.6s ease-in-out infinite; }
@keyframes recpulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .appwin__rec .dot { animation: none; } }
.appwin__pod { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--sage); }
.figure-caption { font-style: italic; font-size: var(--fs-label); color: color-mix(in srgb, var(--paper) 62%, transparent); margin: 1rem 0 0; max-width: 60ch; }

@media (max-width: 620px) {
  .appwin__body { grid-template-columns: 1fr; }
  .appwin__stage { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
}

.vault__promise {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-left: 2px solid var(--verdigris);
  padding-left: clamp(1.25rem, 3vw, 2rem);
}
.vault__promise p {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.375rem);
  font-weight: 360; line-height: 1.25;
  color: var(--paper); margin: 0 0 0.15em; max-width: none;
}

/* =========================================================================
   8. Proof
   ========================================================================= */
.proof__block {
  border-left: 2px solid var(--verdigris);
  padding-left: clamp(1.25rem, 3vw, 2rem);
}
.proof__nums {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
}
.proof__num {
  font-family: var(--font-display);
  font-size: var(--fs-stat); font-weight: 420;
  color: var(--bronze-ink); line-height: 1;
  letter-spacing: -0.02em; display: block;
}
.proof__num--zero { position: relative; display: inline-block; }
.proof__num--zero::after {
  content: ""; position: absolute; left: -0.12em; right: -0.12em;
  bottom: -0.12em; height: 3px; background: var(--verdigris);
  border-radius: 2px;
}
.proof__label {
  font-family: var(--font-mono); font-size: var(--fs-eyebrow);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink); margin: 0.6rem 0 0; max-width: 16ch;
}
.proof__block > p { max-width: 74ch; margin-bottom: 0; text-wrap: balance; }

/* =========================================================================
   9. Ways to work
   ========================================================================= */
.ways__cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2rem);
}
.way {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line); border-radius: 4px;
  padding: clamp(1.5rem, 3vw, 2rem);
}
.section--deep .way { background: var(--paper); }
.way h3 { font-size: var(--fs-h3); font-weight: 440; margin-bottom: 0.75rem; }
.way p { font-size: var(--fs-label); flex: 1; }
.way .btn { margin-top: 1rem; align-self: flex-start; }

/* =========================================================================
   10. FAQ
   ========================================================================= */
.faq__list { max-width: 78ch; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; gap: 1.5rem; align-items: baseline;
  padding: 1.4rem 0;
  font-family: var(--font-display); font-size: var(--fs-h3);
  font-weight: 420; color: var(--ink);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; font-family: var(--font-mono); font-size: 1.4rem;
  color: var(--verdigris-deep); line-height: 1; flex: none;
  transition: transform 0.2s var(--ease);
}
.faq__item[open] summary::after { content: "\2013"; }
.faq__answer { padding: 0 0 1.6rem; max-width: 68ch; margin: 0; }

/* =========================================================================
   11. Final CTA + forms (dark)
   ========================================================================= */
.cta__head { max-width: none; margin-bottom: 1rem; }
/* Keep the final CTA headline on one line on desktop; wraps on narrow screens. */
@media (min-width: 1000px) { .cta__head h2 { white-space: nowrap; } }
.cta__intro { max-width: 52ch; color: var(--paper); margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.form {
  max-width: 620px;
}
.form__row { margin-bottom: 1.25rem; }
.form__row--split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
/* Form controls scoped to the whole CTA section so both the demo form
   (.form) and the individuals waitlist (.inline-form) are styled. */
.cta label {
  display: block; font-family: var(--font-mono);
  font-size: var(--fs-eyebrow); letter-spacing: 0.06em; text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 72%, transparent); margin-bottom: 0.5rem;
}
.cta input, .cta textarea {
  width: 100%; background: color-mix(in srgb, var(--paper) 6%, var(--ink));
  border: 1px solid var(--line-on-ink); border-radius: 3px;
  color: var(--paper); font-family: var(--font-body); font-size: var(--fs-body);
  padding: 0.75rem 0.9rem; line-height: 1.5;
}
.cta input::placeholder, .cta textarea::placeholder { color: color-mix(in srgb, var(--paper) 45%, transparent); }
.cta textarea { min-height: 96px; resize: vertical; }
.cta input:focus-visible, .cta textarea:focus-visible { outline: 2px solid var(--verdigris-lift); outline-offset: 1px; }
.cta input[aria-invalid="true"], .cta textarea[aria-invalid="true"] { border-color: var(--alert); }
.form__error {
  font-family: var(--font-mono); font-size: var(--fs-eyebrow);
  color: #E39184; margin: 0.4rem 0 0; min-height: 1em;
}
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__actions { margin-top: 1.5rem; }
.form__disclosure { font-size: var(--fs-eyebrow); font-family: var(--font-mono); color: color-mix(in srgb, var(--paper) 60%, transparent); margin: 1rem 0 0; max-width: 52ch; line-height: 1.6; }
.form__disclosure a { color: var(--verdigris-lift); }
.form__success {
  font-family: var(--font-display); font-size: var(--fs-h3);
  color: var(--paper); max-width: 34ch;
}

.cta__individuals {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--line-on-ink);
}
.cta__individuals h3 { font-size: var(--fs-h3); font-weight: 420; color: var(--paper); margin-bottom: 1.25rem; max-width: none; }
.inline-form { max-width: 560px; }
.inline-form__controls { display: flex; gap: 1rem; align-items: stretch; flex-wrap: wrap; }
.inline-form__controls input { flex: 1; min-width: 220px; }
.inline-form__controls .btn { flex: none; }

/* =========================================================================
   12. Footer
   ========================================================================= */
.site-footer { background: var(--paper-deep); padding-block: clamp(3.5rem, 7vw, 5.5rem); }
.footer__defs {
  display: grid; grid-template-columns: 1fr 2px 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.footer__rule { background: var(--verdigris); width: 2px; }
.footer__def dt {
  font-family: var(--font-display); font-size: var(--fs-h3);
  font-weight: 440; margin-bottom: 0.35rem;
}
.footer__def .pron { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--bronze-ink); margin: 0 0 0.75rem; }
.footer__def dd { margin: 0; font-size: var(--fs-label); max-width: 40ch; }
.footer__def dd em { font-style: italic; }
.footer__meta {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; align-items: center;
  font-family: var(--font-mono); font-size: 0.8125rem;
  border-top: 1px solid var(--line); padding-top: 1.75rem;
  color: var(--bronze-ink);
}
.footer__meta a { color: var(--verdigris-deep); text-decoration: none; }
.footer__meta a:hover { color: var(--ink); }

/* =========================================================================
   Mobile nav overlay
   ========================================================================= */
.nav__overlay { display: none; }

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__toggle {
    display: inline-flex; flex-direction: column; gap: 4px;
    background: none; border: 0; cursor: pointer; padding: 0.5rem;
  }
  .nav__toggle span { display: block; width: 24px; height: 2px; background: var(--ink); transition: transform 0.2s var(--ease), opacity 0.2s var(--ease); }
  .nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .nav__overlay {
    display: flex; flex-direction: column;
    position: fixed; inset: 0; z-index: 45;
    background: var(--paper);
    padding: clamp(1.25rem, 5vw, 2rem);
    transform: translateY(-100%); visibility: hidden;
    transition: transform 0.28s var(--ease), visibility 0.28s var(--ease);
  }
  .nav__overlay.is-open { transform: none; visibility: visible; }
  .nav__overlay-top { display: flex; justify-content: space-between; align-items: center; }
  .nav__overlay-links { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 3rem; flex: 1; }
  .nav__overlay-links a {
    font-family: var(--font-display); font-size: 1.75rem; color: var(--ink);
    text-decoration: none; padding: 0.5rem 0; border-bottom: 1px solid var(--line);
  }
  .nav__overlay .btn { width: 100%; justify-content: center; margin-top: auto; }
  .nav__close { background: none; border: 0; font-size: 1.75rem; cursor: pointer; color: var(--ink); line-height: 1; padding: 0.25rem 0.5rem; }
}

/* =========================================================================
   Responsive breakpoints
   ========================================================================= */
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { order: 2; }
  .platform__grid { grid-template-columns: 1fr; }
  .pain__cards { grid-template-columns: 1fr; gap: 2rem; }
  .ways__cards { grid-template-columns: 1fr; }
  .interactives { grid-template-columns: 1fr; }
  .mechanisms { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .stats__grid { grid-template-columns: 1fr 1fr; }
  .proof__nums { grid-template-columns: 1fr 1fr; gap: 1.75rem 2rem; }
  .footer__defs { grid-template-columns: 1fr; }
  .footer__rule { display: none; }
  .form__row--split { grid-template-columns: 1fr; }
  .views__stage { grid-template-columns: 1fr; }
  .views__col--org { padding: 0 0 1.25rem; }
  .views__col--person { padding: 1.25rem 0 0; border-top: 2px solid var(--verdigris); }
  .views__divider { display: none; }
}

@media (min-width: 1600px) {
  :root { --wrap: 1200px; }
}

/* =========================================================================
   6b. The record (homepage + /version2; .model rules are /version2 only)
   ========================================================================= */
/* Headline measures. NB .section__head--wide is 24ch — NARROWER than the 30ch
   base; it only reads as "wide" because .reframe overrides it to 44rem. These
   sections need the same override or the headline stacks one word per line.
   .record is 49rem so "Growth you can watch happen." (a .punch, ~48.5rem of
   Fraunces at full size) holds one line without spilling the box. */
.record .section__head { max-width: 49rem; }
.model .section__head { max-width: 46rem; }
/* The punch line is ~14.3× the h2 font-size. Below ~500px the h2 clamp floor
   is wider than the viewport, so cap the size to what one line can afford. */
#record-heading { font-size: min(var(--fs-h2), calc((100vw - 2 * var(--gutter)) / 14.5)); }

.record__split {
  margin-top: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--line);
  padding-top: clamp(1.75rem, 3.5vw, 2.75rem);
}
.record .ecosystem { margin-top: 0.5rem; }
/* .reframe__body normally sits ABOVE a .mechanisms grid; here one closes the
   section beneath it, so it needs the top gap the original never wanted. */
.record .mechanisms + .reframe__body {
  margin-top: clamp(2rem, 4vw, 3rem);
  margin-bottom: 0;
}