/* ============================================================
   Plumb by Medici — plumb.finance
   Styles for the single-page site. Dark surface; the one
   differentiating motif is the plumb-line.
   ============================================================ */

/* ---------- Fonts (self-hosted, latin subset, variable) ---------- */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/eb-garamond-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin.woff2') format('woff2');
}

/* ---------- Tokens ---------- */
:root {
  --black: #000000;          /* True Black — the canvas */
  --surface: #0A0A0A;        /* cards */
  --surface-light: #1A1A1A;  /* borders, dividers */
  --white: #FFFFFF;
  --blue: #3366FF;           /* Electric Blue — the only frequent color */
  --blue-light: #5C85FF;
  --blue-dark: #1A4DCC;
  --gold: #D4A843;           /* accent only, <1% of surface */
  --green: #00CC66;          /* functional: active */
  --red: #FF4444;            /* functional: danger */
  --yellow: #FFCC00;         /* functional: pending / dev / placeholder */
  --text-2: #AAAAAA;
  --text-3: #7C7C7C;           /* tertiary / legal — AA on black (~5:1) and on the
                                  #0A0A0A card surface (~4.7:1) for scope-notes / .invariant */
  --on-accent: #000000;         /* text/icon on a filled blue surface */
  --header-bg: rgba(0, 0, 0, 0.8);
  --secondary-hover-border: #333333;
  --scroll-thumb-hover: #777777;
  --green-text: #00CC66;        /* functional colors used as TEXT (readable per surface) */
  --amber-text: #FFCC00;
  --red-text: #FF4444;
  --serif: 'EB Garamond', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
  --rail: 56px;              /* plumb-line rail width on desktop */
  /* The plumb-line signature is themed: on dark it glows faint-blue and
     fades down; on light it needs a stronger stroke to hold on white. */
  --plumb-grad: linear-gradient(to bottom, rgba(51, 102, 255, 0.55), rgba(51, 102, 255, 0.18) 320px, rgba(51, 102, 255, 0.12));
  --plumb-grad-mobile: linear-gradient(to bottom, rgba(51, 102, 255, 0.28), rgba(51, 102, 255, 0.10) 320px, rgba(51, 102, 255, 0.06));
  color-scheme: dark;
}

/* ---------- Light theme ----------
   The explicit choice (data-theme) is the source of truth; the media
   query is the no-script fallback so the system preference still lands. */
:root[data-theme="light"] {
  --black: #FFFFFF;             /* canvas — white page (Medici light document) */
  --surface: #F4F6FA;          /* cards — faint cool tint on the white page */
  --surface-light: #E4E7EC;    /* hairline / rule */
  --white: #1A1D26;            /* primary text — brand ink, never pure black */
  --blue: #3366FF;             /* Electric Blue — brand accent, kept */
  --blue-light: #1F4ED8;       /* darker for legible hover / gradient on white */
  --blue-dark: #163FB0;
  --text-2: #5B6472;           /* muted — secondary text, AA on white (~6:1) */
  --text-3: #656C77;           /* faint tier for legal/tertiary TEXT — brand cool-grey
                                  family, darkened from the #8A93A3 hairline swatch to
                                  clear AA (~5.3:1 white / ~4.9:1 on cards) at 11–14px */
  --on-accent: #FFFFFF;        /* white text on blue buttons */
  --header-bg: rgba(255, 255, 255, 0.78);
  --secondary-hover-border: #B4BAC6;
  --scroll-thumb-hover: #B4BAC6;
  --green-text: #0A7D46;
  --amber-text: #8A5A00;
  --red-text: #C62828;
  /* Plumb-line: a darker blue stroke so the hairline reads on white. */
  --plumb-grad: linear-gradient(to bottom, rgba(51, 102, 255, 0.85), rgba(51, 102, 255, 0.45) 320px, rgba(51, 102, 255, 0.30));
  --plumb-grad-mobile: linear-gradient(to bottom, rgba(51, 102, 255, 0.55), rgba(51, 102, 255, 0.28) 320px, rgba(51, 102, 255, 0.18));
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --black: #FFFFFF;
    --surface: #F4F6FA;
    --surface-light: #E4E7EC;
    --white: #1A1D26;
    --blue: #3366FF;
    --blue-light: #1F4ED8;
    --blue-dark: #163FB0;
    --text-2: #5B6472;
    --text-3: #656C77;
    --on-accent: #FFFFFF;
    --header-bg: rgba(255, 255, 255, 0.78);
    --secondary-hover-border: #B4BAC6;
    --scroll-thumb-hover: #B4BAC6;
    --green-text: #0A7D46;
    --amber-text: #8A5A00;
    --red-text: #C62828;
    --plumb-grad: linear-gradient(to bottom, rgba(51, 102, 255, 0.85), rgba(51, 102, 255, 0.45) 320px, rgba(51, 102, 255, 0.30));
    --plumb-grad-mobile: linear-gradient(to bottom, rgba(51, 102, 255, 0.55), rgba(51, 102, 255, 0.28) 320px, rgba(51, 102, 255, 0.18));
    color-scheme: light;
  }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: 1rem;            /* 16px — long-form reading comfort */
  line-height: 1.6;
  color: var(--white);
  background: var(--black);
}
img, svg { max-width: 100%; display: block; }
a { color: var(--blue); text-decoration: none; transition: color 150ms ease-out; }
a:hover { color: var(--blue-light); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
::selection { background: rgba(51, 102, 255, 0.35); }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--black); }
::-webkit-scrollbar-thumb { background: var(--surface-light); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; color: var(--white); }
h1 { font-size: clamp(2.125rem, 5.5vw, 3rem); line-height: 1.1; }   /* 34 → 48px */
h2 { font-size: clamp(1.5rem, 3.6vw, 1.875rem); line-height: 1.2; } /* 24 → 30px, fluid */
h3 { font-size: 1.25rem; line-height: 1.3; }
p  { color: var(--text-2); }
strong { color: var(--white); font-weight: 500; }

.label {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
}
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Gradient text — used exactly once, on the hero */
.gradient-blue {
  background: linear-gradient(135deg, var(--blue), var(--blue-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---------- Layout ---------- */
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: 72px;
  background: var(--header-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--surface-light);
}
.site-header .wrap {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--white); }
.brand:hover { color: var(--white); }
.brand-mark { width: 22px; height: 30px; flex: none; }
.brand-word { font-family: var(--serif); font-weight: 600; font-size: 1.375rem; letter-spacing: -0.02em; }
.brand-co { font-size: 0.8125rem; color: var(--text-3); margin-left: 2px; }
/* The lockup hairline: Plumb | by Medici — 1px vertical rule,
   Electric Blue at 40% opacity, settling to true vertical on load. */
.brand-pipe {
  width: 1px; height: 16px; flex: none;
  background: var(--blue); opacity: 0.4;
  transform-origin: bottom center;
  animation: converge-to-plumb 200ms ease-out forwards;
}
@keyframes converge-to-plumb {
  from { transform: rotate(-15deg); }
  to   { transform: rotate(0deg); }
}
.site-nav { display: flex; gap: 28px; }
.site-nav a { font-size: 0.875rem; font-weight: 500; color: var(--text-2); }
.site-nav a:hover { color: var(--white); }

/* Header right cluster: nav + theme toggle, kept together on the right */
.header-right { display: flex; align-items: center; gap: 24px; }

/* Menu button — mobile only; hidden on desktop where the nav sits inline.
   Shares the theme toggle's square-button footprint so the two read as a pair. */
.nav-toggle {
  display: none;
  width: 36px; height: 36px; flex: none; padding: 0;
  border: 1px solid var(--surface-light);
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  align-items: center; justify-content: center;
  transition: color 150ms ease-out, border-color 150ms ease-out;
}
.nav-toggle:hover { color: var(--white); border-color: var(--secondary-hover-border); }
.nav-toggle svg { width: 18px; height: 18px; display: block; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-menu  { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* Theme toggle — real button, keyboard-operable, aria-labelled from script */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: none;
  padding: 0;
  border: 1px solid var(--surface-light);
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: color 150ms ease-out, border-color 150ms ease-out, background-color 150ms ease-out;
}
.theme-toggle:hover { color: var(--white); border-color: var(--secondary-hover-border); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun  { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .theme-toggle .icon-sun  { display: none; }
  :root:not([data-theme]) .theme-toggle .icon-moon { display: block; }
}

/* ============================================================
   Signature: the plumb line.
   A true-vertical hairline with a bob, hung from the header;
   it settles to true vertical on load.
   ============================================================ */
main { position: relative; }
.plumb {
  position: absolute;
  top: 0; bottom: 0;
  left: max(24px, calc((100% - 1120px) / 2 + 24px));
  width: 1px;
  pointer-events: none;
  z-index: 1;
}
.plumb-line {
  position: absolute; inset: 0;
  width: 1px;
  background: var(--plumb-grad);
  transform-origin: top center;
  animation: settle 1.1s ease-out both;
}
.plumb-bob {
  position: absolute;
  top: 208px; left: 50%;
  width: 11px; height: 15px;
  transform: translateX(-50%);
  animation: settle-bob 1.1s ease-out both;
}
.plumb-bob svg { width: 100%; height: 100%; }
@keyframes settle {
  0%   { transform: rotate(1.4deg); }
  55%  { transform: rotate(-0.5deg); }
  80%  { transform: rotate(0.18deg); }
  100% { transform: rotate(0deg); }
}
@keyframes settle-bob {
  0%   { transform: translateX(calc(-50% + 6px)); }
  55%  { transform: translateX(calc(-50% - 2px)); }
  80%  { transform: translateX(calc(-50% + 0.75px)); }
  100% { transform: translateX(-50%); }
}

/* Section tick: a small marker hung off the line */
.section-mark { position: relative; padding-left: var(--rail); margin-bottom: 24px; }
.section-mark::before {
  content: '';
  position: absolute; left: -3.5px; top: 7px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--black);
  border: 1.5px solid var(--blue);
}

/* Sections */
.section { padding: 96px 0; position: relative; z-index: 2; }
.section + .section { border-top: 1px solid var(--surface-light); }
.section-body { padding-left: var(--rail); }
.section-intro { max-width: 620px; margin-bottom: 40px; }
.section-intro h2 { margin-bottom: 12px; }

/* ---------- Hero ---------- */
.hero { padding: 120px 0 104px; position: relative; z-index: 2; }
.hero-inner { padding-left: var(--rail); max-width: 780px; }
.hero .label { display: block; margin-bottom: 20px; color: var(--blue); }
.hero h1 { margin-bottom: 24px; }
.hero-sub { font-size: 1.0625rem; max-width: 620px; margin-bottom: 16px; }
.hero-note { font-size: 0.875rem; color: var(--text-3); margin-bottom: 36px; }
.hero-note .net-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); margin-right: 6px; vertical-align: baseline; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out;
}
.btn-primary { background: var(--blue); color: var(--on-accent); }
.btn-primary:hover { background: var(--blue-light); color: var(--on-accent); }
.btn-secondary { background: transparent; border: 1px solid var(--surface-light); color: var(--white); }
.btn-secondary:hover { border-color: var(--secondary-hover-border); color: var(--white); }

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--surface-light);
  border-radius: 12px;
  padding: 24px;
}
.card h3 { margin-bottom: 8px; }
.card p { font-size: 0.875rem; }
.card p + p { margin-top: 10px; }
.scope-note { font-size: 0.75rem; color: var(--text-3); }
.landscape {
  margin-top: 40px;
  border-left: 2px solid var(--blue);
  background: var(--surface);
  border-radius: 0 12px 12px 0;
  padding: 24px 28px;
  max-width: 780px;
}
.landscape p { font-size: 0.875rem; color: var(--text-2); }

/* ---------- Why / zero-knowledge block ---------- */
.zk { margin-top: 8px; }
.zk-intro { max-width: 640px; margin-bottom: 16px; }
.zk-intro .label { display: block; color: var(--blue); margin-bottom: 10px; }
.zk-intro h3 { font-size: clamp(1.3125rem, 3.4vw, 1.5rem); line-height: 1.25; }  /* 21 → 24px, fluid */
.zk-lede { max-width: 780px; font-size: 0.9375rem; color: var(--text-2); margin-bottom: 28px; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* ---------- Mechanism ---------- */
.invariant {
  background: var(--surface);
  border: 1px solid var(--surface-light);
  border-radius: 12px;
  padding: 28px 32px;
  margin-bottom: 40px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.125rem;
  color: var(--white);
  overflow-x: auto;
  white-space: nowrap;
}
.invariant .good-tok { color: var(--green-text); }  /* converged = green (control-room semantics) */
.invariant .always { color: var(--text-3); font-size: 0.875rem; margin-left: 16px; }


/* ---------- Products ---------- */
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.product { display: flex; flex-direction: column; gap: 12px; }
.product-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.product ul { list-style: none; margin-top: 4px; display: grid; gap: 8px; }
.product li {
  font-size: 0.8125rem; color: var(--text-2);
  padding-left: 16px; position: relative;
}
.product li::before { content: '—'; position: absolute; left: 0; color: var(--text-3); }
.product-foot { margin-top: auto; padding-top: 12px; font-size: 0.8125rem; }
.product-tbd { border-style: dashed; border-color: #2A2A2A; }

/* Badges */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px; border-radius: 9999px;
  font-size: 0.75rem; font-weight: 500;
  white-space: nowrap;
}
.badge .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.badge-dev    { background: rgba(255, 204, 0, 0.1);  color: var(--amber-text); border: 1px solid rgba(255, 204, 0, 0.3); }
.badge-active { background: rgba(0, 204, 102, 0.1);  color: var(--green-text);  border: 1px solid rgba(0, 204, 102, 0.3); }
.badge-muted  { background: rgba(102, 102, 102, 0.1); color: var(--text-3); border: 1px solid rgba(102, 102, 102, 0.3); }

/* Placeholder marker chip. */
.tbd {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 1px 8px; border-radius: 9999px;
  background: rgba(255, 204, 0, 0.1);
  border: 1px solid rgba(255, 204, 0, 0.3);
  color: var(--amber-text);
  font-family: var(--mono);
  font-size: 0.75rem; font-weight: 500;
  white-space: nowrap;
}

/* ============================================================
   Open-proposal page.
   The status marker is the point of this page: a reader must not
   be able to skim proposed work as shipped work. Amber carries the
   pending/placeholder meaning already used by the dev badge and the
   hero net-dot; it is never used here for a converged state.
   ============================================================ */

/* Proposal badge — amber, matches the badge system */
.badge-proposal {
  background: rgba(255, 204, 0, 0.12);
  color: var(--amber-text);
  border: 1px solid rgba(255, 204, 0, 0.45);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.hero-proposal { padding-bottom: 72px; }
.hero-proposal .badge-proposal { margin-bottom: 20px; }
.hero-proposal h1 { margin-bottom: 32px; }

/* The banner: the loudest element on the page, by design */
.proposal-banner {
  border: 1px solid rgba(255, 204, 0, 0.45);
  border-left: 4px solid var(--yellow);
  background: rgba(255, 204, 0, 0.06);
  border-radius: 0 12px 12px 0;
  padding: 24px 28px;
  max-width: 720px;
}
.proposal-banner p { font-size: 0.9375rem; }
.proposal-banner p + p { margin-top: 12px; }
.proposal-banner-head {
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--amber-text) !important;
  font-weight: 600;
}
.proposal-banner a { color: var(--amber-text); text-decoration: underline; text-underline-offset: 2px; }
.proposal-banner a:hover { color: var(--blue); }

/* Per-section status strip — keeps the tense unambiguous while scrolling.
   It sits flush at the top of its section, so a reader who lands mid-page
   still meets the section's status before its prose. A section carrying a
   strip drops its own top border and top padding; the strip supplies both. */
.section:has(.section-status) { padding-top: 0; border-top: none; }
.section-status {
  border-top: 1px solid var(--surface-light);
  position: relative; z-index: 3;
  padding: 10px 0;
}
.section-status + .wrap { padding-top: 72px; }
.status-strip {
  display: inline-block;
  margin-left: var(--rail);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.status-ran      { background: rgba(0, 204, 102, 0.05);  border-top-color: rgba(0, 204, 102, 0.25); }
.status-ran      .status-strip { color: var(--green-text); }
.status-not      { background: rgba(255, 68, 68, 0.05);  border-top-color: rgba(255, 68, 68, 0.25); }
.status-not      .status-strip { color: var(--red-text); }
.status-proposed { background: rgba(255, 204, 0, 0.05);  border-top-color: rgba(255, 204, 0, 0.3); }
.status-proposed .status-strip { color: var(--amber-text); }

.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.card-head h3 { margin-bottom: 0; }
.card-ran { border-color: #23301F; }

/* The not-built list — red keyline, one claim per row */
.not-list { list-style: none; max-width: 780px; display: grid; gap: 14px; }
.not-list li {
  background: var(--surface);
  border: 1px solid var(--surface-light);
  border-left: 3px solid var(--red);
  border-radius: 0 8px 8px 0;
  padding: 16px 20px;
  font-size: 0.875rem;
  color: var(--text-2);
}
.not-list strong { color: var(--white); }

.today-box {
  margin-top: 32px;
  max-width: 780px;
  background: var(--surface);
  border: 1px solid var(--surface-light);
  border-radius: 12px;
  padding: 24px 28px;
}
.today-box h3 { margin-bottom: 8px; }
.today-box p { font-size: 0.875rem; }

/* The proposed programme — numbered, conditional by construction */
.propose-list { list-style: none; max-width: 820px; display: grid; gap: 8px; }
.propose-list li { display: flex; gap: 20px; padding: 20px 0; }
.propose-list li + li { border-top: 1px solid var(--surface-light); }
.propose-list .step {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  color: var(--amber-text);
  padding-top: 4px;
  flex: none;
  width: 28px;
}
.propose-list h3 { margin-bottom: 6px; }
.propose-list p { font-size: 0.875rem; }

/* Current-page nav item */
.site-nav a.is-current { color: var(--white); }

/* ============================================================
   Network marks + "how it works" panels.
   Each network's official logomark sits on a FIXED tile (same in
   both light and dark page themes), matched to that mark's own
   surface requirement — the two brands are opposite here. Midnight's
   mark is a white/accent stroke on transparent: it needs a dark tile
   and vanishes on a light one. Canton's mark is dark-ink diamonds
   (near-black fill) accented with a pale ring: it needs a light tile
   and vanishes on a dark one — true of every variant Canton
   publishes, including their official "white" logo, whose diamond
   fill stays near-black (#030206). `.netmark-canton` gives it that
   light tile. The tile is a "built on / works with" indicator — not
   a claim of endorsement.
   ============================================================ */
.netmark {
  width: 52px; height: 52px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: #0B0B10;                    /* fixed dark in both themes */
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 9px;
}
.netmark img { width: 100%; height: 100%; object-fit: contain; }
.netmark-sm { width: 40px; height: 40px; border-radius: 10px; padding: 7px; }
.netmark-canton {
  background: #FFFFFF;                    /* fixed light in both themes */
  border: 1px solid rgba(11, 11, 16, 0.12);
}

/* Two network panels side by side — the "how it works" section */
.networks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.net-panel {
  display: flex; flex-direction: column; gap: 16px;
  background: var(--surface);
  border: 1px solid var(--surface-light);
  border-radius: 12px;
  padding: 24px 26px;
}
.net-head { display: flex; align-items: center; gap: 14px; }
.net-title { display: flex; flex-direction: column; gap: 6px; }
.net-name { font-family: var(--serif); font-weight: 600; font-size: 1.25rem; color: var(--white); line-height: 1; }
.net-panel > p { font-size: 0.875rem; }
.net-steps { list-style: none; display: grid; gap: 9px; }
.net-steps li {
  font-size: 0.8125rem; color: var(--text-2);
  padding-left: 20px; position: relative;
}
.net-steps li::before { content: '→'; position: absolute; left: 0; color: var(--blue); }
.net-steps strong { color: var(--white); }
.net-foot { margin-top: auto; padding-top: 4px; font-size: 0.875rem; }

/* Calm "in development" banner for the Canton page — blue keyline, not
   the amber alarm the open-proposal page uses. It states the boundary
   (runs today, in development, not production) without crying wolf. */
.dev-banner {
  border: 1px solid rgba(51, 102, 255, 0.35);
  border-left: 4px solid var(--blue);
  background: rgba(51, 102, 255, 0.06);
  border-radius: 0 12px 12px 0;
  padding: 24px 28px;
  max-width: 720px;
}
.dev-banner p { font-size: 0.9375rem; }
.dev-banner p + p { margin-top: 12px; }
.dev-banner-head {
  font-family: var(--serif);
  font-size: 1.25rem; line-height: 1.3;
  color: var(--blue); font-weight: 600;
}
.dev-banner a { text-decoration: underline; text-underline-offset: 2px; }

.badge-net { background: rgba(51, 102, 255, 0.1); color: var(--blue); border: 1px solid rgba(51, 102, 255, 0.3); }
.status-runs { background: rgba(0, 204, 102, 0.05); border-top-color: rgba(0, 204, 102, 0.25); }
.status-runs .status-strip { color: var(--green-text); }

.hero-net { padding-bottom: 72px; }
.hero-net .badge { margin-bottom: 20px; }
.hero-net h1 { margin-bottom: 32px; }
.hero-badges { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }

/* ---------- Contact ---------- */
.contact-box {
  background: var(--surface);
  border: 1px solid var(--surface-light);
  border-radius: 12px;
  padding: 32px;
  max-width: 620px;
}
.contact-box p { font-size: 0.875rem; margin-bottom: 12px; }
.contact-box p:last-child { margin-bottom: 0; }
.contact-email { font-family: var(--mono); font-size: 1rem; }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--surface-light);
  padding: 48px 0 56px;
  position: relative; z-index: 2;
  background: var(--black);
}
.footer-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 28px;
}
.footer-brand { display: flex; align-items: baseline; gap: 10px; }
.footer-brand .brand-word { font-size: 1.125rem; }
.footer-brand .accent-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); align-self: center; }
.footer-nav { display: flex; gap: 24px; }
.footer-nav a { font-size: 0.8125rem; color: var(--text-3); }
.footer-nav a:hover { color: var(--white); }
.legal {
  font-size: 0.6875rem;  /* small legal-disclaimer size */
  line-height: 1.6;
  color: var(--text-3);
  max-width: 780px;
}
.legal + .legal { margin-top: 10px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .grid-3, .product-grid, .networks { grid-template-columns: 1fr; }
  .section { padding: 64px 0; }
  .hero { padding: 80px 0 64px; }
  .section-status + .wrap { padding-top: 48px; }
  .hero-proposal, .hero-net { padding-bottom: 56px; }
}
@media (max-width: 720px) {
  .proposal-banner { padding: 20px; }
  .propose-list li { gap: 14px; }
  .card-head { flex-direction: column; gap: 6px; }
}
@media (max-width: 720px) {
  /* The rail collapses, but the signature does NOT vanish: the plumb line
     re-hangs at the far-left gutter as a faint spine (content starts at the
     24px wrap padding, clear of it). The bob is dropped — mid-column on a
     narrow screen it reads as debris, not a plumb bob. */
  :root { --rail: 0px; }
  .plumb { left: 8px; }
  .plumb-bob { display: none; }
  .plumb-line { background: var(--plumb-grad-mobile); }
  .section-mark { padding-left: 0; }
  .section-mark::before { display: none; }
  .brand-co, .brand-pipe { display: none; }
  .invariant { font-size: 0.9375rem; padding: 20px; }
  .header-right { gap: 8px; }
  /* Touch: header controls grow to a ≥44px hit target on mobile. */
  .theme-toggle, .nav-toggle { width: 44px; height: 44px; }

  /* Mobile nav: the six links collapse behind the menu button. The bar keeps
     the brand, the theme toggle, and the menu button. */
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: fixed;
    top: 72px; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    padding: 4px 24px 12px;
    background: var(--black);
    border-bottom: 1px solid var(--surface-light);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.28);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 160ms ease-out, transform 160ms ease-out, visibility 160ms;
    z-index: 49;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
  }
  .site-nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .site-nav a {
    display: block;
    padding: 14px 2px;             /* ≥44px tap target */
    font-size: 1.0625rem;
    color: var(--white);
    border-bottom: 1px solid var(--surface-light);
  }
  .site-nav a:last-child { border-bottom: none; }
  .site-nav a.is-current { color: var(--blue); }
}

/* ---------- Small phones ---------- */
@media (max-width: 480px) {
  .wrap { padding: 0 20px; }
  .site-nav { padding-left: 20px; padding-right: 20px; }
  /* h2 / .zk-intro h3 now scale via clamp() — no fixed override needed here */
  .section { padding: 56px 0; }
  .hero { padding: 64px 0 56px; }
  .hero-sub { font-size: 1rem; }
  .hero-actions { gap: 10px; }
  .hero-actions .btn { flex: 1 1 auto; text-align: center; }  /* full-width, tappable */
  .card, .today-box, .contact-box, .invariant { padding: 20px; }
  .contact-box, .landscape, .proposal-banner { padding: 20px; }
  .footer-top { gap: 16px; }
  .footer-nav { gap: 16px; row-gap: 8px; flex-wrap: wrap; }
}

/* ---------- Reduced motion — disables animation ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .plumb-line, .plumb-bob, .brand-pipe { animation: none; }
  * { transition-duration: 0.01ms !important; }
}