/* BeVyne — one stylesheet. Sage & Ink v1.0 (docs/brand/bevyne-design-system.md).
   Order: fonts, tokens, base, header, components, page sections, footer, motion. */

/* ---------- self-hosted IBM Plex (latin) ---------- */

@font-face { font-family: "IBM Plex Sans"; src: url("assets/fonts/ibm-plex-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("assets/fonts/ibm-plex-sans-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("assets/fonts/ibm-plex-sans-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("assets/fonts/ibm-plex-sans-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("assets/fonts/ibm-plex-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("assets/fonts/ibm-plex-mono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("assets/fonts/ibm-plex-mono-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* ---------- tokens ---------- */

:root {
  --sage: #eff3ea;
  --sage-deep: #e2ead9;
  --white: #ffffff;
  --ink: #1e3d2f;
  --moss: #2b3a30;
  --moss-muted: #5c6b5f;
  --vine: #3e7c59;
  --vine-bright: #6fbf8d; /* display accent on ink surfaces only, 5.4:1 on ink */
  --line: #d7e0d2;
  --line-on-ink: rgba(239, 243, 234, 0.16);
  --ink-text: #eff3ea;
  --ink-text-2: #b7c9bb;
  --rust: #c05b3b;
  --rust-chip: #b4552f; /* chip fills only: white 14px text measures 4.9:1 */
  --rust-muted: #a05252;
  --green-deep: #2a4c3c;
  --font: "IBM Plex Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Monaco, monospace;
  --radius: 10px;
  --radius-card: 12px;
  /* one gap and one inset for every card grid, so columns line up from section to section */
  --grid-gap: 1.25rem;
  --card-pad: 1.6rem;
  --radius-pill: 999px;

  /* elevation: three levels, all ink-tinted so depth reads as the brand's own shade, never grey.
     Resting cards, raised instruments, and the lift a linked card takes on hover. */
  --shadow-1: 0 1px 2px rgba(30, 61, 47, 0.06), 0 4px 14px -6px rgba(30, 61, 47, 0.14);
  --shadow-2: 0 1px 2px rgba(30, 61, 47, 0.07), 0 12px 28px -12px rgba(30, 61, 47, 0.22), 0 28px 56px -28px rgba(30, 61, 47, 0.18);
  --shadow-hover: 0 2px 4px rgba(30, 61, 47, 0.08), 0 18px 36px -14px rgba(30, 61, 47, 0.28), 0 36px 72px -36px rgba(30, 61, 47, 0.22);
  --measure: 32rem;
  --width: 1180px;
  --width-prose: 680px;

  /* spacing scale: the only gaps that exist. Tight inside a group,
     generous between ideas; no one-off values in components. */
  --s-2xs: 0.35rem;
  --s-xs: 0.55rem;
  --s-sm: 0.9rem;
  --s-md: 1.6rem;
  --s-lg: 2.2rem;
  --s-xl: 3.4rem;
  --section-y: 4.5rem;

  /* type roles: six, everywhere. Display and section scale live on h1/h2. */
  --text-body: 17px;
  --text-support: 15.5px;
  --text-control: 15px;
  --text-small: 14px;
  --text-mono-label: 11.5px;
  --text-mono-data: 12.5px;

  /* motion vocabulary: feedback, transition, entrance; two easings. */
  --t-feedback: 0.15s;
  --t-transition: 0.22s;
  --t-entrance: 0.55s;
  --ease-rise: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-draw: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- base ---------- */

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--moss);
  background: var(--sage);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-weight: 700; letter-spacing: -0.01em; line-height: 1.18; color: var(--ink); }
h1 { font-size: clamp(2.6rem, 6.5vw, 5rem); line-height: 1.02; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); letter-spacing: -0.018em; }
h3 { font-size: 1.15rem; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

p { max-width: var(--measure); }

::selection { background: var(--ink); color: var(--ink-text); }

a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; transition: color var(--t-feedback) ease; }
a:hover { color: var(--vine); }

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

.skip {
  position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--ink-text);
  padding: 0.5rem 1rem; z-index: 20;
}
.skip:focus { left: 0; }

.kicker::before {
  content: ""; display: inline-block; width: 26px; height: 3px;
  background: var(--vine); margin-right: 10px; vertical-align: 4px;
}
.kicker {
  font-family: var(--mono); font-size: var(--text-mono-label); text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 500; color: var(--moss-muted); display: block; margin-bottom: var(--s-sm);
}

.wrap { max-width: var(--width); margin: 0 auto; padding: 0 24px; }

section { padding: var(--section-y) 0; }
section:not(.cta-band) .wrap > h2 { max-width: 36ch; }
section:not(.cta-band) .wrap > h2 + p { margin-top: var(--s-md); }
section + section { border-top: 1px solid var(--line); }

.muted { color: var(--moss-muted); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.small { font-size: var(--text-small); }
.push-sm { margin-top: var(--s-sm); }
.push { margin-top: var(--s-md); }
.push-lg { margin-top: var(--s-lg); }

/* ---------- header ---------- */

.site-header-wrap { position: sticky; top: 0; z-index: 10; background: var(--sage); border-bottom: 1px solid var(--line); }
/* frosted while content passes beneath; 75% sage keeps the bold moss nav
   labels above 6:1 even over the dark hero. Solid sage wherever backdrop-filter is
   missing or transparency is reduced. */
@supports (backdrop-filter: blur(1px)) {
  .site-header-wrap {
    background: rgba(239, 243, 234, 0.75);
    backdrop-filter: blur(22px) saturate(160%);
  }
  @media (prefers-reduced-transparency: reduce) {
    .site-header-wrap { background: var(--sage); backdrop-filter: none; }
  }
}
.site-header {
  display: flex; align-items: center; gap: 2rem;
  max-width: var(--width); margin: 0 auto; padding: 1.25rem 24px;
}

.brand {
  display: flex; align-items: center; gap: 10px; color: var(--ink);
  text-decoration: none; font-weight: 700; font-size: 1.15rem; letter-spacing: -0.5px;
}
.brand:hover { color: var(--ink); }
.brand svg { width: 27px; height: 26px; display: block; }

.site-nav { margin-left: auto; display: flex; align-items: baseline; gap: 1.6rem; flex-wrap: wrap; }
.site-nav a { text-decoration: none; font-size: var(--text-control); font-weight: 600; color: var(--moss); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); }
.site-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--vine); text-decoration-thickness: 2px; }

.header-cta { margin-left: 1.6rem; padding: 0.5rem 1rem; font-size: 14px; }

/* mobile menu: JS-gated; without JS the nav wraps as before */
.menu-toggle { display: none; margin-left: auto; background: none; border: 0; padding: 10px 6px; cursor: pointer; }
.menu-toggle span:not(.sr-only) {
  display: block; width: 22px; height: 2.5px; border-radius: 2px;
  background: var(--ink); margin: 4.5px 0;
}
@media (max-width: 899.98px) {
  .js-nav .menu-toggle { display: block; }
  .js-nav .site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--sage); border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: stretch; gap: 0;
    margin: 0; padding: 0.4rem 0 0.8rem;
  }
  .js-nav .site-nav.open { display: flex; }
  .js-nav .site-nav .nav-item { position: static; }
  .js-nav .site-nav a { padding: 0.85rem 24px; font-size: 16px; }
  .js-nav .header-cta { display: none; }
}

/* nav submenu: desktop hover and focus reveal; on touch and narrow screens the
   parent link goes to the hub, which lists the same children */
.nav-item { position: relative; }
.nav-item > .submenu { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding-top: 12px; z-index: 11; }
@media (min-width: 900px) {
  .nav-item:hover > .submenu, .nav-item:focus-within > .submenu { display: block; }
}
.submenu-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0.4rem; min-width: 250px;
  animation: rise-in 0.22s cubic-bezier(0.2, 0.6, 0.2, 1) both;
}
.submenu-card a { display: block; padding: 0.55rem 0.8rem; border-radius: 6px; white-space: nowrap; color: var(--moss); }
.submenu-card a:hover, .submenu-card a:focus-visible { background: var(--sage); color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .submenu-card { animation: none; } }

/* ---------- components ---------- */

.btn {
  display: inline-block; background: var(--vine); color: #fff;
  transition: background var(--t-feedback) ease, transform var(--t-feedback) ease;
  font-size: var(--text-control); font-weight: 700; text-decoration: none;
  padding: 0.75rem 1.4rem; border-radius: var(--radius);
}
.btn:hover { background: var(--green-deep); color: #fff; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* the closing bookend: dark, like the hero it answers */
.cta-band { text-align: center; background: var(--ink); position: relative; overflow: hidden; }
.cta-band::after {
  content: ""; position: absolute; right: -120px; bottom: -160px;
  width: 300px; height: 300px; border-radius: 50%; background: var(--green-deep);
}
.cta-band .wrap { position: relative; z-index: 1; }
.cta-band h2 { margin-bottom: var(--s-sm); color: var(--ink-text); }
.cta-band p { margin: 0 auto var(--s-md); color: var(--ink-text-2); }
.cta-band :focus-visible { outline-color: var(--vine-bright); }

/* comparison instrument */
.comparison { width: 100%; border-collapse: collapse; margin-top: var(--s-lg); font-size: var(--text-support); border-top: 2px solid var(--ink); background: var(--white); }
.comparison caption { text-align: left; font-size: var(--text-small); color: var(--moss-muted); margin-bottom: 0.8rem; }
.comparison th, .comparison td { border: 1px solid var(--line); padding: 0.85rem 1rem; text-align: left; vertical-align: top; }
.comparison thead th { background: var(--sage); font-weight: 700; color: var(--ink); }
.comparison th[scope="row"] { font-weight: 500; white-space: nowrap; color: var(--ink); }
.comparison .rail-col { background: var(--sage-deep); font-weight: 500; color: var(--ink); }
.comparison td { font-variant-numeric: tabular-nums; }
.comparison tbody tr:hover td:not(.rail-col) { background: var(--sage); }
/* evidence register: citations in the data voice, wrapping allowed */
.register { table-layout: fixed; }
.register thead th:first-child { width: 27%; }
.register thead th:last-child { width: 12.5rem; }
.register th[scope="row"] { font-family: var(--mono); font-size: var(--text-mono-data); white-space: normal; }
.register tbody th, .register tbody td { vertical-align: baseline; }
.register td { text-wrap: pretty; }
.register .cite { white-space: nowrap; }
/* below 860px the register stacks: reference, control, then standing, on hairlines */
@media (max-width: 860px) {
  .register, .register tbody, .register tr, .register th, .register td { display: block; }
  .register thead { display: none; }
  .register caption { display: block; width: auto; }
  .register tr { padding: var(--s-sm) 0; border-top: 1px solid var(--line); }
  .register tr:first-child { border-top: 0; }
  .register th, .register td { border: none; padding: 0; }
  .register th[scope="row"] { width: auto; padding-bottom: var(--s-2xs); }
  .register td:last-child { margin-top: var(--s-xs); font-family: var(--mono); font-size: var(--text-mono-data); color: var(--moss-muted); }
  .register td:last-child::before { content: "Standing · "; }
  .comparison.register tbody tr:hover td { background: transparent; }
}
.table-scroll { overflow-x: auto; }

/* rail diagram */
.rail-diagram { margin: var(--s-lg) 0 var(--s-xs); }
.rail-diagram svg { width: 100%; height: auto; display: block; }

/* two-column keep/never contrast */
.contrast { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: var(--s-lg); }
.contrast > div { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s-md); }
.contrast ul { list-style: none; }
.contrast h3 { margin-bottom: var(--s-2xs); }
.contrast li { padding: var(--s-xs) 0; border-bottom: 1px solid var(--line); font-size: var(--text-support); text-wrap: pretty; }
.contrast li:last-child { border-bottom: none; }

.hero-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; }
.hero-art { display: none; }
@media (min-width: 920px) {
  .hero-grid { grid-template-columns: 11fr 8fr; gap: 4.5rem; }
  .hero-art { display: block; }
  .hero-art svg { width: 100%; height: auto; }
}

/* editorial visuals: concept art surfaces, framed like instruments */
.hero .visual img, .cta-band .visual img { border-color: var(--line-on-ink); }

/* stat readout */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gap); margin-top: var(--s-lg); }
.stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats > div {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: var(--card-pad); box-shadow: var(--shadow-1);
}
.stats b { display: block; font-size: clamp(2.3rem, 4vw, 3rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1; color: var(--vine); font-variant-numeric: tabular-nums; }
.stats span { display: block; margin-top: 0.8rem; font-size: var(--text-support); color: var(--moss); }
@media (max-width: 860px) { .stats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .stats, .stats-3 { grid-template-columns: 1fr; } }

/* instruments: white panels raised off the sage field, the site's highest resting elevation */
.instrument {
  border: 1px solid var(--line); background: var(--white); border-radius: var(--radius-card);
  padding: var(--s-md); margin-top: var(--s-lg); box-shadow: var(--shadow-2);
}
.inst-head {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  font-family: var(--mono); font-size: var(--text-mono-label); text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--moss-muted); padding-bottom: var(--s-sm); border-bottom: 1px solid var(--line);
  margin-bottom: 1.1rem;
}
.instrument .comparison { margin-top: 0; border-top: none; }
.instrument .rail-diagram { margin: 0.4rem 0 0.4rem; }
.instrument .contrast { margin-top: 0; gap: var(--s-lg); }
.instrument .contrast > div { border: none; padding: 0; }
@media (max-width: 560px) { .instrument { padding: 1rem 1.1rem 1.1rem; } }

/* operator panel — THE ink card: the one dark element per view (Sage & Ink signature) */
.op-panel {
  background: var(--ink); color: var(--ink-text-2); border: none; border-radius: var(--radius);
  padding: 1.5rem var(--s-md);
}
/* on the dark hero the panel needs its own edge to hold as an instrument.
   Frosted where supported: the merged rail runs under the panel and stays
   faintly visible through the surface. Solid ink otherwise, and whenever
   the user asks for reduced transparency. */
.hero .op-panel { border: 1px solid var(--line-on-ink); }
@supports (backdrop-filter: blur(1px)) {
  .hero .op-panel {
    background: rgba(239, 243, 234, 0.15);
    backdrop-filter: blur(24px) saturate(150%);
    border-color: rgba(239, 243, 234, 0.38);
    /* same 4s clock as the orb: it exits under the panel at 30% of the
       cycle, the panel answers with a held vine glow, and settles before
       the next arrival */
    animation: panel-receive 4s linear 1.4s infinite;
  }
  @keyframes panel-receive {
    0%, 30% { border-color: rgba(239, 243, 234, 0.3); background: rgba(239, 243, 234, 0.12); }
    36%     { border-color: rgba(111, 191, 141, 0.7); background: rgba(239, 243, 234, 0.18); }
    62%     { border-color: rgba(111, 191, 141, 0.7); background: rgba(239, 243, 234, 0.18); }
    82%, 100% { border-color: rgba(239, 243, 234, 0.3); background: rgba(239, 243, 234, 0.12); }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero .op-panel { animation: none; }
  }
  @media (prefers-reduced-transparency: reduce) {
    .hero .op-panel { background: var(--ink); backdrop-filter: none; border-color: var(--line-on-ink); }
  }
}
.op-head {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: var(--text-mono-label); text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--ink-text-2); padding-bottom: var(--s-sm); border-bottom: 1px solid rgba(239, 243, 234, 0.18);
}
.op-payment {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 0.9rem 0 0.7rem;
}
.op-type { font-weight: 700; font-size: var(--text-support); color: var(--ink-text); }
.op-amt { font-family: var(--mono); font-size: 1.35rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink-text); font-variant-numeric: tabular-nums; }
.op-states { list-style: none; display: grid; gap: 0.45rem; padding: 0.2rem 0 0.9rem; }
.op-states li {
  position: relative; padding-left: 22px; font-size: var(--text-small); color: var(--ink-text-2);
}
.op-states li::before {
  content: ""; position: absolute; left: 0; top: 5px;
  width: 9px; height: 9px; border-radius: 50%; border: 2px solid rgba(239, 243, 234, 0.35);
}
.op-states li.done { color: var(--ink-text); }
.op-states li.done::before { background: var(--ink-text); border-color: var(--ink-text); }
.op-states li.active { color: var(--ink-text); font-weight: 500; }
.op-states li.active::before { border-color: var(--ink-text); background: var(--ink); }
/* Blocked: the rust break, the only place rust exists. Rendered as the brand's status chip. */
.op-states li.blocked {
  color: #fff; font-weight: 700; background: var(--rust-chip);
  border-radius: var(--radius-pill); padding: 3px 12px 3px 26px; justify-self: start;
}
.op-states li.blocked::before { border-color: #fff; background: #fff; left: 10px; top: 9px; animation: none; }
.op-ledger { border-top: 1px solid rgba(239, 243, 234, 0.18); padding-top: 0.8rem; display: grid; gap: 0.3rem; }
.op-row {
  display: grid; grid-template-columns: 2.4ch 1fr auto; gap: 10px;
  font-family: var(--mono); font-size: var(--text-mono-data); color: var(--ink-text);
  font-variant-numeric: tabular-nums;
}
.op-row span:first-child { color: var(--ink-text-2); }
.op-gates {
  margin-top: 0.85rem; padding-top: 0.75rem; border-top: 1px solid rgba(239, 243, 234, 0.18);
  font-family: var(--mono); font-size: var(--text-mono-label); text-transform: none; letter-spacing: 0; color: var(--ink-text-2);
}

/* hero — the opening surface, now the dark bookend: ink field, sage type,
   one deep-green blob. The dark hero and the dark CTA band are chrome, framing
   the light content between them; the one-ink-card rule governs that content.
   Home's hero carries the rail convergence instead; the rails suppress the blob
   (one decorative system per surface). */
.hero {
  padding: 6rem 0 5rem;
  background: var(--ink); color: var(--ink-text-2);
  position: relative; overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; right: -160px; top: -160px;
  width: 380px; height: 380px; border-radius: 50%;
  background: var(--green-deep); z-index: 0;
}
.hero:has(.hero-rails)::after, .hero:has(.hero-grid)::after { content: none; }
.hero h1 { color: var(--ink-text); }
.hero h1 .accent { color: var(--vine-bright); }
.hero a:not(.btn) { color: var(--ink-text); }
.hero a:not(.btn):hover { color: var(--vine-bright); }
.hero :focus-visible { outline-color: var(--vine-bright); }
/* interior heroes have no operator panel to anchor left, so the type takes
   the stage: centered, at full display scale */
.hero:not(:has(.hero-grid)) .wrap { text-align: center; }
.hero:not(:has(.hero-grid)) .actions { justify-content: center; }
.hero:not(:has(.hero-grid)) h1,
.hero:not(:has(.hero-grid)) p { margin-inline: auto; }

/* Rail convergence: the logo geometry at architectural scale. Deep-green feeders
   whisper on the ink field (1.25:1, the dark twin of sage-line on sage) and curve
   into one point at the operator panel's edge; the straight rail, in bright vine,
   runs the baseline uninterrupted. Desktop only, where the panel exists to
   converge into. */
.hero-rails {
  display: none; position: absolute; inset: 0;
  width: 100%; height: 100%; z-index: 0;
}
@media (min-width: 920px) { .hero-rails { display: block; } }
.hero-rails path {
  fill: none; stroke: var(--green-deep); stroke-width: 5;
  stroke-linecap: round; vector-effect: non-scaling-stroke;
}
.hero-rails .feeder { stroke-width: 4; opacity: 0.6; }
.hero-rails .through { stroke: var(--vine-bright); }
/* Draws on load beneath the title sequence, feeders first, vine rail last. */
.hero-rails path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 0.75s var(--ease-draw) forwards; }
.hero-rails .f1 { animation-duration: 0.5s; animation-delay: 0.05s; }
.hero-rails .c1 { animation-duration: 0.75s; animation-delay: 0.12s; }
.hero-rails .f2 { animation-duration: 0.5s; animation-delay: 0.2s; }
.hero-rails .c2 { animation-duration: 0.8s; animation-delay: 0.25s; }
.hero-rails .through { animation-duration: 0.7s; animation-delay: 0.5s; }
.hero-rails .amb.a1 { animation-delay: 0.1s; }
.hero-rails .amb.a2 { animation-delay: 0.22s; }
/* the living layer: a payment orb crosses the rail quickly, one every 4s.
   A near-zero dash with round caps and a wide stroke renders as a small
   bright dot; the gap is longer than the path so the rail sits empty
   between arrivals. On Home it follows the merged path and vanishes under
   the frosted panel. */
.hero-rails .pulse {
  stroke: var(--vine-bright); opacity: 1; stroke-width: 9;
  stroke-dasharray: 0.004 1.996; stroke-dashoffset: 0.004;
  animation: rail-pulse 4s linear 1.4s infinite;
}
@keyframes rail-pulse {
  0% { stroke-dashoffset: 0.004; }
  30% { stroke-dashoffset: -0.996; }
  100% { stroke-dashoffset: -1.996; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-rails path { animation: none; stroke-dashoffset: 0; }
  /* without the offset animation the pulse would sit as a static dash; hide it */
  .hero-rails .pulse { opacity: 0; }
}
.hero .wrap { position: relative; z-index: 1; }
.hero .kicker { color: var(--ink-text-2); }
.hero p { color: var(--ink-text-2); }
.hero p strong { color: var(--ink-text); }
.hero + section { border-top: none; }
.hero h1 { max-width: 21ch; margin-bottom: 1.2rem; }
/* Home's split hero: sized for an intentional three-line composition */
.hero-grid h1 { font-size: clamp(2.6rem, 5.4vw, 4.35rem); max-width: 19ch; }
.hero p { font-size: 1.15rem; margin-bottom: 1.8rem; max-width: 42rem; }
.hero:not(:has(.hero-grid)) p, .cta-band p { text-wrap: balance; }
.hero .actions { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }

/* mobile proof: the payment lifecycle, shown only where the operator
   panel is hidden */
.mobile-proof { display: none; }
@media (max-width: 919.98px) {
  .mobile-proof {
    display: block; margin-top: var(--s-lg); padding-top: var(--s-md);
    border-top: 1px solid var(--line-on-ink);
  }
  .mobile-proof p { margin-top: var(--s-xs); font-size: var(--text-small); color: var(--ink-text-2); margin-bottom: 0; }
}
/* the strip itself: rails and nodes on ink, the veto branch in rust. Rails
   draw left to right; the veto fades in last. */
.mobile-proof .lifecycle-svg { width: 100%; max-width: 560px; height: auto; display: block; }
.mobile-proof .strip-labels text { font-family: var(--font); fill: var(--ink-text-2); }
.mobile-proof .strip-rails .rail { stroke: rgba(239, 243, 234, 0.4); stroke-width: 2.5; }
.mobile-proof .strip-nodes circle { stroke: rgba(239, 243, 234, 0.55); stroke-width: 2.5; }
.mobile-proof .strip-nodes .filled { fill: var(--ink-text); stroke: var(--ink-text); }
.mobile-proof .strip-veto path, .mobile-proof .strip-veto circle { stroke: var(--rust); stroke-width: 2; }
.mobile-proof .strip-rails .rail { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.mobile-proof .s2 { animation-delay: 0.1s; }
.mobile-proof .s3 { animation-delay: 0.2s; }
.mobile-proof .s4 { animation-delay: 0.3s; }
.mobile-proof .strip-veto { opacity: 0; animation: fade-in 0.4s ease 0.55s forwards; }
@keyframes fade-in { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .mobile-proof .strip-rails .rail { animation: none; stroke-dashoffset: 0; }
  .mobile-proof .strip-veto { animation: none; opacity: 1; }
}

/* card grids: the site's statement unit. Each card is one idea: a short title and one or two
   lines. No numbers, no icons; the box carries the structure. */
.cards {
  list-style: none; margin-top: var(--s-lg);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap);
}
.cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* a list item that holds a linked card lets the card fill it, so a row's cards share one height */
.cards > li:not(.card) { display: flex; }
.cards > li:not(.card) > .card { flex: 1; }
.cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wrap > .cards:first-child { margin-top: 0; }
.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: var(--card-pad); box-shadow: var(--shadow-1);
}
.card-label {
  font-family: var(--mono); font-size: var(--text-mono-label); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink); margin-bottom: 0.6rem;
}
.card h2, .card h3 { font-size: 1.12rem; letter-spacing: -0.01em; line-height: 1.3; }
.card p { margin-top: 0.6rem; font-size: var(--text-support); color: var(--moss); max-width: none; }
/* the featured card: the statement the rest depend on, given two columns */
.card-feature { grid-column: span 2; }
.card-feature h3 { font-size: 1.4rem; }
.card-feature p { font-size: 1.12rem; line-height: 1.55; margin-top: 0.8rem; max-width: 34rem; }
/* status cards state where things stand; sage-deep, so they never read as another claim */
.card-status { background: var(--sage-deep); box-shadow: none; }

/* linked cards: the whole card is the link, and it lifts to say so */
a.card { text-decoration: none; color: inherit; transition: transform var(--t-feedback) ease, box-shadow var(--t-transition) ease, border-color var(--t-feedback) ease; }
a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: #c5d3c0; color: inherit; }
a.card:focus-visible { outline-offset: 4px; }
.card-more {
  margin-top: auto; padding-top: 1.3rem; display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: var(--text-control); font-weight: 600; color: var(--ink);
}
.card-more .chevron { transform: rotate(-90deg); }
a.card:hover .card-more { color: var(--vine); }

@media (max-width: 1080px) {
  .cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .cards, .cards-2, .cards-4 { grid-template-columns: 1fr; }
  .card-feature { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  a.card, a.card:hover { transition: none; transform: none; }
}

/* lifecycle strip: five steps on one rail, the node filling in at credit. Order is carried by
   the rail itself, so no step numbers. Vertical on narrow screens. */
.steps {
  list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--grid-gap);
  margin-top: 0.4rem;
}
.steps li { position: relative; padding-top: 2.1rem; }
.steps li::before {
  content: ""; position: absolute; top: 0; left: 0; z-index: 1;
  width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--ink); background: var(--white);
}
.steps li:last-child::before { background: var(--ink); }
.steps li:not(:last-child)::after {
  content: ""; position: absolute; top: 8px; left: 18px; right: calc(-1 * var(--grid-gap));
  height: 2.5px; background: var(--ink);
}
.steps h3 { font-size: 1.05rem; }
.steps p { margin-top: 0.4rem; font-size: var(--text-support); color: var(--moss); max-width: none; }
@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr; gap: 0; }
  .steps li { padding: 0 0 1.4rem 2.2rem; }
  .steps li:last-child { padding-bottom: 0; }
  .steps li:not(:last-child)::after { top: 18px; left: 8px; right: auto; bottom: 0; width: 2.5px; height: auto; }
}

/* the strip draws once on first view: rails grow node to node, then credit fills. JS adds
   .will-draw only when motion is allowed, so without JS or with reduced motion it is simply drawn. */
@keyframes grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes fill-ink { from { background: var(--white); } to { background: var(--ink); } }
.steps.will-draw li:not(:last-child)::after { transform: scaleX(0); }
.steps li:not(:last-child)::after { transform-origin: left center; }
.steps.drawn li:not(:last-child)::after { animation: grow-x 0.42s var(--ease-draw) both; }
.steps.drawn li:nth-child(2)::after { animation-delay: 0.14s; }
.steps.drawn li:nth-child(3)::after { animation-delay: 0.28s; }
.steps.drawn li:nth-child(4)::after { animation-delay: 0.42s; }
.steps.will-draw li:last-child::before { background: var(--white); }
.steps.drawn li:last-child::before { animation: fill-ink 0.3s ease 0.84s both; }
@media (max-width: 860px) {
  .steps li:not(:last-child)::after { transform-origin: center top; }
  .steps.will-draw li:not(:last-child)::after { transform: scaleY(0); }
  .steps.drawn li:not(:last-child)::after { animation-name: grow-y; }
}

@media (prefers-reduced-motion: reduce) {
  .steps.drawn li::after, .steps.drawn li::before { animation: none; }
}

/* schematics: the use-case and integration diagrams. Cards carry an ink-tinted SVG shadow; on
   first view they build (cards lift, rails draw, nodes pop), then one payment runs the route, each
   gate turning vine as it clears and the receiving card answering in vine. Once, never looping;
   Replay runs it again. Final state without JS or with reduced motion; the payment dot stays hidden. */
.schematic { padding-bottom: 1.1rem; }
.schematic .inst-head { margin-bottom: 0.6rem; }
.schematic-scroll { overflow-x: auto; margin: 0 -0.6rem; padding: 0.6rem; }
.schematic svg { display: block; width: 100%; height: auto; overflow: visible; }
.schematic-hint { display: none; }
.sx-t { font-family: var(--font); font-weight: 700; fill: var(--ink); }
.sx-s { font-family: var(--font); font-size: 14px; fill: var(--moss); }
.sx-m { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--moss-muted); }
.sx-m.sx-ink { fill: var(--ink); }
.sx-rise, .sx-node { transform-box: fill-box; transform-origin: center; }
.sx-draw { stroke-dasharray: 1; stroke-dashoffset: 0; }
.sx-grow { transform-box: fill-box; transform-origin: left center; }
.sx-token { opacity: 0; pointer-events: none; }

.replay {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.7rem; cursor: pointer;
  background: var(--white); border: 1px solid var(--line); border-radius: 8px;
  font-family: var(--mono); font-size: var(--text-mono-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink);
  transition: border-color var(--t-feedback) ease, color var(--t-feedback) ease;
}
.replay::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--vine); }
.replay:hover { border-color: var(--vine); color: var(--vine); }

@keyframes sx-pop { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; } }
@keyframes sx-lit { to { fill: var(--vine); stroke: var(--vine); } }
@keyframes sx-arrive {
  0% { stroke: var(--line); stroke-width: 1.2; }
  18%, 70% { stroke: var(--vine); stroke-width: 2.4; }
  100% { stroke: var(--line); stroke-width: 1.2; }
}
@keyframes sx-token { 0% { opacity: 0; } 8%, 88% { opacity: 1; } 100% { opacity: 0; } }
.schematic.will-draw .sx-rise, .schematic.will-draw .sx-fade, .schematic.will-draw .sx-node { opacity: 0; }
.schematic.will-draw .sx-draw { stroke-dashoffset: 1; }
.schematic.will-draw .sx-grow { transform: scaleX(0); }
.schematic.drawn .sx-rise { animation: rise-in var(--t-entrance) var(--ease-rise) var(--d) both; }
@keyframes sx-fade-in { from { opacity: 0; } to { opacity: 1; } }
.schematic.drawn .sx-fade { animation: sx-fade-in 0.4s ease var(--d) both; }
.schematic.drawn .sx-draw { stroke-dashoffset: 1; animation: draw var(--dur, 0.7s) var(--ease-draw) var(--d) forwards; }
.schematic.drawn .sx-node { animation: sx-pop 0.32s var(--ease-rise) var(--d) both; }
.schematic.drawn .sx-grow { animation: grow-x 0.55s var(--ease-draw) var(--d) both; }
.schematic.drawn .sx-clears { animation: sx-pop 0.32s var(--ease-rise) var(--d) both, sx-lit 0.3s ease var(--lit) forwards; }
.schematic.drawn .sx-arrive { animation: sx-arrive 1.8s ease var(--arr) both; }
.schematic.drawn .sx-token { animation: sx-token var(--dur) linear var(--d) both; }

@media (max-width: 760px) {
  .schematic svg { min-width: 760px; }
  .schematic-hint {
    display: block; margin-top: 0.5rem; font-family: var(--mono); font-size: var(--text-mono-label);
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--moss-muted);
  }
}
@media (prefers-reduced-motion: reduce) {
  .schematic .sx-rise, .schematic .sx-fade, .schematic .sx-node, .schematic .sx-draw, .schematic .sx-grow, .schematic .sx-arrive { animation: none !important; opacity: 1; stroke-dashoffset: 0; transform: none; }
  .schematic .sx-token { display: none; }
}

/* contact: what to expect on the left, the request form raised on the right */
.contact-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem; align-items: start; }
.expect-list { list-style: none; display: grid; gap: var(--grid-gap); margin-top: var(--s-lg); }
.request-form { margin-top: 0; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.2rem; }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field-full { grid-column: 1 / -1; }
.field label { font-size: var(--text-small); font-weight: 600; color: var(--ink); }
.req { color: var(--vine); }
.field input, .field select, .field textarea {
  font: inherit; font-size: var(--text-control); color: var(--moss); width: 100%;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.72rem 0.85rem;
  transition: border-color var(--t-feedback) ease;
}
.field textarea { resize: vertical; min-height: 7rem; }
.field select {
  appearance: none; cursor: pointer; padding-right: 2.4rem;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%233E7C59' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 0.9rem center / 12px 8px;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: #c5d3c0; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--vine); outline-offset: 1px; border-color: var(--vine); }
.field input:user-invalid, .field select:user-invalid { border-color: var(--rust); }
.hp { display: none; }
.form-note { margin-top: 1.1rem; font-size: var(--text-small); color: var(--moss-muted); max-width: none; }
.form-actions { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-top: 1.3rem; }
.form-actions .btn { border: 0; cursor: pointer; font-family: inherit; }
.form-actions .btn:disabled { opacity: 0.6; cursor: progress; transform: none; }
.form-status { font-size: var(--text-small); color: var(--moss-muted); max-width: none; }
.form-status.is-error { color: var(--rust); }
.form-done { padding: 1.4rem 0 0.6rem; }
.form-done h3 { font-size: 1.35rem; outline: none; }
.form-done p { margin-top: 0.6rem; color: var(--moss); max-width: none; }
.form-done h3::before {
  content: ""; display: block; width: 38px; height: 38px; margin-bottom: 1rem; border-radius: 50%;
  background: var(--vine) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 20px 20px;
}
@media (max-width: 920px) { .contact-split { grid-template-columns: 1fr; gap: var(--s-lg); } }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }

/* legal documents: long-form reading, one measure, quiet hierarchy */
.legal-doc { max-width: 46rem; }
.legal-meta { font-family: var(--mono); font-size: var(--text-mono-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--moss-muted); }
.legal-doc h2 { font-size: 1.35rem; letter-spacing: -0.01em; margin-top: 2.4rem; }
.legal-doc h2:first-of-type { margin-top: 1.6rem; }
.legal-doc h3 { font-size: 1.05rem; margin-top: 1.4rem; }
.legal-doc p, .legal-doc li { max-width: none; color: var(--moss); }
.legal-doc p { margin-top: 0.8rem; }
.legal-doc ul { margin: 0.8rem 0 0 1.2rem; }
.legal-doc li + li { margin-top: 0.4rem; }
.legal-doc strong { color: var(--ink); }

/* split: argument on the left, the instrument that proves it on the right */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem; align-items: center; }
.split .instrument { margin-top: 0; }
.split > div > h2 + p { margin-top: var(--s-md); }
@media (max-width: 920px) { .split { grid-template-columns: 1fr; gap: var(--s-lg); } }

/* the quiet way onward: a bold link with a chevron, under a section */
.more-link {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-top: var(--s-md);
  font-size: var(--text-control); font-weight: 600; color: var(--ink); text-decoration: none;
}
.more-link .chevron { transform: rotate(-90deg); }
.more-link:hover { color: var(--vine); }

/* notes: what used to be grey footnotes under an instrument, now a labeled box you cannot miss */
.note {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: 1.2rem; align-items: baseline;
  margin-top: 1.25rem; padding: 1rem 1.25rem;
  background: var(--sage-deep); border: 1px solid var(--line); border-radius: var(--radius-card);
}
.note + .note { margin-top: 0.75rem; }
.note-label {
  font-family: var(--mono); font-size: var(--text-mono-label); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink);
}
.note p { font-size: var(--text-support); color: var(--moss); max-width: none; }
@media (max-width: 620px) {
  .note { grid-template-columns: 1fr; gap: 0.35rem; }
}

/* boxed accordion: each question its own card, the answer opening inside it */
.faq { display: grid; gap: 0.75rem; margin-top: var(--s-lg); max-width: 52rem; }
.faq details {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: 0; box-shadow: var(--shadow-1); transition: box-shadow var(--t-transition) ease;
}
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq details[open] { box-shadow: var(--shadow-2); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  list-style: none; padding: 1.1rem 1.3rem; font-size: 1.02rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chevron { flex: none; color: var(--vine); }
.faq details[open] summary .chevron { transform: rotate(180deg); }
.faq details p { margin: 0; padding: 0 1.3rem 1.2rem; font-size: var(--text-support); color: var(--moss); max-width: none; }
@media (prefers-reduced-motion: reduce) { .faq details { transition: none; } }

/* leadership: three people across, circular portraits, bios behind a native disclosure */
.team {
  list-style: none; margin-top: var(--s-xl);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); align-items: start;
}
/* each person on the same card surface as the rest of the site */
.person {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: var(--card-pad); box-shadow: var(--shadow-1);
}
/* the portraits' own shadow, deeper than the card elevation: a tight contact shadow under a
   soft wide one, so they sit on the card like prints */
.person-photo {
  display: block; width: 176px; height: 176px; padding: 5px;
  border-radius: 50%; background: var(--white); border: 1px solid var(--line);
  box-shadow:
    0 1px 2px rgba(30, 61, 47, 0.10),
    0 6px 14px -4px rgba(30, 61, 47, 0.18),
    0 18px 38px -12px rgba(30, 61, 47, 0.28);
}
.person-photo img { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--sage-deep); }
.person h3 { font-size: 1.4rem; letter-spacing: -0.015em; margin-top: 1.5rem; }
.person-role {
  font-family: var(--mono); font-size: var(--text-mono-label); text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 500; color: var(--moss-muted); margin-top: 0.4rem;
}
.team .person-bio { margin-top: 1.1rem; padding: 0; border: 0; } /* not the FAQ accordion's hairlines */
.person-bio summary {
  display: inline-flex; align-items: center; gap: 0.55rem; list-style: none; cursor: pointer;
  font-size: var(--text-control); font-weight: 600; color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--line); text-decoration-thickness: 1px; text-underline-offset: 5px;
  transition: color var(--t-feedback) ease, text-decoration-color var(--t-feedback) ease;
}
.person-bio summary::-webkit-details-marker { display: none; }
.person-bio summary:hover { color: var(--vine); text-decoration-color: var(--vine); }
.person-bio .bio-close, .person-bio[open] .bio-open { display: none; }
.person-bio[open] .bio-close { display: inline; }
.chevron { width: 12px; height: 8px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--t-transition) var(--ease-draw); }
.person-bio[open] .chevron { transform: rotate(180deg); }
.person-bio p { margin-top: 1rem; font-size: var(--text-support); color: var(--moss); max-width: none; }
.person-bio[open] p { animation: bio-rise var(--t-entrance) var(--ease-rise); }
@keyframes bio-rise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .chevron { transition: none; }
  .person-bio[open] p { animation: none; }
}
@media (max-width: 899.98px) {
  .team { grid-template-columns: 1fr; }
  .person-photo { width: 148px; height: 148px; }
  .person-bio p { max-width: var(--measure); }
}

/* operator reference: the data voice in the panel header */
.op-ref { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--ink-text-2); }

/* pull quote */
.pull {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: var(--s-md) 0; margin: var(--s-lg) 0;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 700; letter-spacing: -0.015em;
  line-height: 1.25; max-width: var(--width-prose); color: var(--ink);
}

/* native disclosure for FAQ-style content */
details { border-top: 1px solid var(--line); padding: var(--s-sm) 0; }
details:last-of-type { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; font-weight: 700; color: var(--ink); }
summary:focus-visible { outline: 2px solid var(--vine); outline-offset: 3px; }
details p { margin-top: var(--s-xs); }

/* ---------- footer — the closing brand surface ---------- */

.site-footer { background: var(--ink); color: var(--ink-text-2); border-top: 1px solid var(--line-on-ink); }
.site-footer .wrap {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-top: 3rem; padding-bottom: 3.4rem;
}
.site-footer svg { width: 30px; height: 29px; }
.site-footer .name { font-weight: 700; letter-spacing: -0.3px; font-size: 1.1rem; color: var(--ink-text); }
.site-footer .thesis { font-size: var(--text-small); color: var(--ink-text-2); margin-left: 6px; }
.site-footer nav { margin-left: auto; display: flex; gap: 1.2rem; flex-wrap: wrap; }
.site-footer a { font-size: var(--text-small); color: var(--ink-text-2); }
.site-footer a:hover { color: var(--ink-text); }
.site-footer :focus-visible { outline-color: var(--ink-text); }
.site-footer .legal {
  flex-basis: 100%; margin-top: 0.7rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem 1.2rem;
  font-family: var(--mono); font-size: 12px; color: var(--ink-text-2);
}
.site-footer .legal nav { gap: 1.1rem; }
.site-footer .legal a { font-size: 12px; }

/* ---------- cinematics ---------- */

/* Title sequence: every page opens in the logo's own cadence — rise 7px + fade,
   the wordmark's easing, five staggered beats. Load-only, never on scroll. */
@keyframes rise-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.hero h1 { animation: rise-in var(--t-entrance) var(--ease-rise) 0.08s both; }
.hero p { animation: rise-in var(--t-entrance) var(--ease-rise) 0.2s both; }
.hero .actions { animation: rise-in var(--t-entrance) var(--ease-rise) 0.32s both; }
.hero .hero-art { animation: rise-in var(--t-entrance) var(--ease-rise) 0.45s both; }

/* Evidence rise: instruments, stats, and the pull quote lift in as they enter the
   viewport. JS-observed (deterministic under programmatic jumps, unlike scroll
   timelines); without JS nothing is ever hidden. Applied ONLY to evidence objects. */
.will-rise { opacity: 0; }
.risen { animation: rise-in var(--t-entrance) var(--ease-rise) both; }

/* Cross-document transitions: page navigation crossfades instead of hard-cutting. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--t-transition); }

@media (prefers-reduced-motion: reduce) {
  .hero h1, .hero p, .hero .actions, .hero .hero-art,
  .instrument, .stats, .pull, .risen { animation: none; }
  .will-rise { opacity: 1; }
  @view-transition { navigation: none; }
}

/* ---------- motion ---------- */

/* Header mark: rails draw on once per load, the logo's own easing. */
.brand .rail { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 0.75s var(--ease-draw) forwards; }
.brand .r3 { animation-delay: 0.05s; animation-duration: 0.55s; }
.brand .r2 { animation-delay: 0.18s; animation-duration: 0.68s; }
.brand .r1 { animation-delay: 0.3s; animation-duration: 0.72s; }

/* Diagrams: rails draw when the diagram first enters the viewport (.drawn added by script). */
.rail-diagram .rail { stroke-dasharray: 1; stroke-dashoffset: 1; }
.rail-diagram.drawn .rail { animation: draw 0.7s var(--ease-draw) forwards; }
.rail-diagram.drawn .rail.d2 { animation-delay: 0.12s; }
.rail-diagram.drawn .rail.d3 { animation-delay: 0.24s; }
.rail-diagram.drawn .rail.d4 { animation-delay: 0.36s; }
/* the fail-closed branch: dotted, drawn right after the gate it hangs from */
.rail-diagram .rail.veto { stroke-dasharray: 0.08 0.08; stroke-dashoffset: 0; opacity: 0; }
.rail-diagram.drawn .rail.veto { animation: fade-in 0.4s ease 0.5s forwards; }

@keyframes draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .brand .rail, .rail-diagram .rail { animation: none; stroke-dashoffset: 0; }
  .rail-diagram.drawn .rail { animation: none; }
  .rail-diagram .rail.veto { opacity: 1; }
}

/* ---------- responsive ---------- */

@media (max-width: 860px) {
  .contrast { grid-template-columns: 1fr; }
  section { padding: 3.2rem 0; }
  .hero { padding: 3.6rem 0 3.2rem; }
}

@media (max-width: 560px) {
  .site-header { flex-wrap: wrap; gap: 0.8rem; }
  .site-nav { margin-left: 0; gap: 1.1rem; }
  body { font-size: 16px; }
}